Sep 26, 2025 · Sep 24, 2025 · Sep 24, 2025 · Sep 25, 2025 · Sep 25, 2025 · Sep 25, 2025
diff --git a/site/src/modules/tasks/tasks.ts b/site/src/modules/tasks/tasks.ts
 };

 export function getTaskApps(task: Task): WorkspaceAppWithAgent[] {
 return (
 task.workspace.latest_build.resources
 .flatMap((r) => r.agents ?? [])
 .flatMap((agent) =>
 agent.apps.map((app) => ({
 ...app,
 agent,
 })),
 )
 // The Chat UI app will be displayed in the sidebar, so we don't want to
 // show it as a tab.
 .filter(
 (app) => app.id !== task.workspace.latest_build.ai_task_sidebar_app_id,
 )
 );
 return task.workspace.latest_build.resources
 .flatMap((r) => r.agents ?? [])
 .flatMap((agent) =>
 agent.apps.map((app) => ({
 ...app,
 agent,
 })),
 );
 }
diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
 </div>
 )}

 {app.health === "healthy" ||
 app.health === "disabled" ||
 app.health === "unhealthy" ? (
 {app.health === "healthy" || app.health === "disabled" ? (
 <iframe
 ref={frameRef}
 src={link.href}
 className={"w-full h-full border-0"}
 allow="clipboard-read; clipboard-write"
 />
 ) : app.health === "unhealthy" ? (
 <div className="w-full h-full flex flex-col items-center justify-center p-4">
 <h3 className="m-0 font-medium text-content-primary text-base text-center">
 App "{app.display_name}" is unhealthy
 </h3>
 <div className="text-content-secondary text-sm">
 <span className="block text-center">
 Here are some troubleshooting steps you can take:
 </span>
 <ul className="m-0 pt-4 flex flex-col gap-4">
 {app.healthcheck && (
 <li>
 <span className="block font-medium text-content-primary mb-1">
 Verify healthcheck
 </span>
 Try running the following inside your workspace:{" "}
 <code className="font-mono text-content-primary select-all">
 curl -v "{app.healthcheck.url}"
 </code>
 </li>
 )}
 <li>
 <span className="block font-medium text-content-primary mb-1">
 Check logs
 </span>
 See{" "}
 <code className="font-mono text-content-primary select-all">
 /tmp/coder-agent.log
 </code>{" "}
 inside your workspace "{task.workspace.name}" for more
 information.
 </li>
 </ul>
 </div>
 </div>
 ) : app.health === "initializing" ? (
 <div className="w-full h-full flex items-center justify-center">
 <Spinner loading />
diff --git a/site/src/pages/TaskPage/TaskApps.stories.tsx b/site/src/pages/TaskPage/TaskApps.stories.tsx
 const mockExternalApp: WorkspaceApp = {
 ...MockWorkspaceApp,
 external: true,
 health: "healthy",
 };

 const meta: Meta<typeof TaskApps> = {
 slug: kebabCase(name),
 display_name: name,
 external: false,
 health: "healthy",
 };
 }

diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
 };

 export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
 const apps = getTaskApps(task);
 const apps = getTaskApps(task).filter(
 // The Chat UI app will be displayed in the sidebar, so we don't want to
 // show it as a web app.
 (app) =>
 app.id !== task.workspace.latest_build.ai_task_sidebar_app_id &&
 app.health !== "disabled",
 );
 const [embeddedApps, externalApps] = splitEmbeddedAndExternalApps(apps);
 const [activeAppId, setActiveAppId] = useState(embeddedApps.at(0)?.id);
 const hasAvailableAppsToDisplay =
 embeddedApps.length > 0 || externalApps.length > 0;

 return (
 <main className="flex flex-col h-full">
 <div className="w-full flex items-center border-0 border-b border-border border-solid">
 <ScrollArea className="max-w-full">
 <div className="flex w-max gap-2 items-center p-2 pb-0">
 {embeddedApps.map((app) => (
 <TaskAppTab
 key={app.id}
 task={task}
 app={app}
 active={app.id === activeAppId}
 onClick={(e) => {
 e.preventDefault();
 setActiveAppId(app.id);
 }}
 />
 ))}
 </div>
 <ScrollBar orientation="horizontal" className="h-2" />
 </ScrollArea>

 {externalApps.length > 0 && (
 <ExternalAppsDropdown task={task} externalApps={externalApps} />
 )}
 </div>
 {hasAvailableAppsToDisplay && (
 <div className="w-full flex items-center border-0 border-b border-border border-solid">
 <ScrollArea className="max-w-full">
 <div className="flex w-max gap-2 items-center p-2 pb-0">
 {embeddedApps.map((app) => (
 <TaskAppTab
 key={app.id}
 task={task}
 app={app}
 active={app.id === activeAppId}
 onClick={(e) => {
 e.preventDefault();
 setActiveAppId(app.id);
 }}
 />
 ))}
 </div>
 <ScrollBar orientation="horizontal" className="h-2" />
 </ScrollArea>

 {externalApps.length > 0 && (
 <ExternalAppsDropdown task={task} externalApps={externalApps} />
 )}
 </div>
 )}

 {embeddedApps.length > 0 ? (
 <div className="flex-1">
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,19 +16,12 @@ export type WorkspaceAppWithAgent = WorkspaceApp & {
		};

		export function getTaskApps(task: Task): WorkspaceAppWithAgent[] {
		return (
		task.workspace.latest_build.resources
		.flatMap((r) => r.agents ?? [])
		.flatMap((agent) =>
		agent.apps.map((app) => ({
		...app,
		agent,
		})),
		)
		// The Chat UI app will be displayed in the sidebar, so we don't want to
		// show it as a tab.
		.filter(
		(app) => app.id !== task.workspace.latest_build.ai_task_sidebar_app_id,
		)
		);
		return task.workspace.latest_build.resources
		.flatMap((r) => r.agents ?? [])
		.flatMap((agent) =>
		agent.apps.map((app) => ({
		...app,
		agent,
		})),
		);
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -84,9 +84,7 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		</div>
		)}

		{app.health === "healthy" \|\|
		app.health === "disabled" \|\|
		app.health === "unhealthy" ? (
		{app.health === "healthy" \|\| app.health === "disabled" ? (
		<iframe
		ref={frameRef}
		src={link.href}
Expand All		@@ -95,6 +93,41 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		className={"w-full h-full border-0"}
		allow="clipboard-read; clipboard-write"
		/>
		) : app.health === "unhealthy" ? (
		<div className="w-full h-full flex flex-col items-center justify-center p-4">
		<h3 className="m-0 font-medium text-content-primary text-base text-center">
		App "{app.display_name}" is unhealthy
		</h3>
		<div className="text-content-secondary text-sm">
		<span className="block text-center">
		Here are some troubleshooting steps you can take:
		</span>
		<ul className="m-0 pt-4 flex flex-col gap-4">
		{app.healthcheck && (
		<li>
		<span className="block font-medium text-content-primary mb-1">
		Verify healthcheck
		</span>
		Try running the following inside your workspace:{" "}
		<code className="font-mono text-content-primary select-all">
		curl -v "{app.healthcheck.url}"
		</code>
		</li>
		)}
		<li>
		<span className="block font-medium text-content-primary mb-1">
		Check logs
		</span>
		See{" "}
		<code className="font-mono text-content-primary select-all">
		/tmp/coder-agent.log
		</code>{" "}
		inside your workspace "{task.workspace.name}" for more
		information.
		</li>
		</ul>
		</div>
		</div>
		) : app.health === "initializing" ? (
		<div className="w-full h-full flex items-center justify-center">
		<Spinner loading />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,6 +18,7 @@ import { TaskApps } from "./TaskApps";
		const mockExternalApp: WorkspaceApp = {
		...MockWorkspaceApp,
		external: true,
		health: "healthy",
		};

		const meta: Meta<typeof TaskApps> = {
Expand DownExpand Up		@@ -103,6 +104,7 @@ function mockEmbeddedApp(name = MockWorkspaceApp.display_name): WorkspaceApp {
		slug: kebabCase(name),
		display_name: name,
		external: false,
		health: "healthy",
		};
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,35 +28,45 @@ type TaskAppsProps = {
		};

		export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
		const apps = getTaskApps(task);
		const apps = getTaskApps(task).filter(
		// The Chat UI app will be displayed in the sidebar, so we don't want to
		// show it as a web app.
		(app) =>
		app.id !== task.workspace.latest_build.ai_task_sidebar_app_id &&
		app.health !== "disabled",
		);
		const [embeddedApps, externalApps] = splitEmbeddedAndExternalApps(apps);
		const [activeAppId, setActiveAppId] = useState(embeddedApps.at(0)?.id);
		const hasAvailableAppsToDisplay =
		embeddedApps.length > 0 \|\| externalApps.length > 0;

		return (
		<main className="flex flex-col h-full">
		<div className="w-full flex items-center border-0 border-b border-border border-solid">
		<ScrollArea className="max-w-full">
		<div className="flex w-max gap-2 items-center p-2 pb-0">
		{embeddedApps.map((app) => (
		<TaskAppTab
		key={app.id}
		task={task}
		app={app}
		active={app.id === activeAppId}
		onClick={(e) => {
		e.preventDefault();
		setActiveAppId(app.id);
		}}
		/>
		))}
		</div>
		<ScrollBar orientation="horizontal" className="h-2" />
		</ScrollArea>

		{externalApps.length > 0 && (
		<ExternalAppsDropdown task={task} externalApps={externalApps} />
		)}
		</div>
		{hasAvailableAppsToDisplay && (
		<div className="w-full flex items-center border-0 border-b border-border border-solid">
		<ScrollArea className="max-w-full">
		<div className="flex w-max gap-2 items-center p-2 pb-0">
		{embeddedApps.map((app) => (
		<TaskAppTab
		key={app.id}
		task={task}
		app={app}
		active={app.id === activeAppId}
		onClick={(e) => {
		e.preventDefault();
		setActiveAppId(app.id);
		}}
		/>
		))}
		</div>
		<ScrollBar orientation="horizontal" className="h-2" />
		</ScrollArea>

		{externalApps.length > 0 && (
		<ExternalAppsDropdown task={task} externalApps={externalApps} />
		)}
		</div>
		)}

		{embeddedApps.length > 0 ? (
		<div className="flex-1">
Expand Down