Jun 30, 2025 · Jun 30, 2025
diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
 DropdownMenuItem,
 DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { Spinner } from "components/Spinner/Spinner";
 import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
 </div>
 )}

 <iframe
 ref={frameRef}
 src={frameSrc}
 title={link.label}
 loading="eager"
 className={"w-full h-full border-0"}
 allow="clipboard-read; clipboard-write"
 />
 {app.health === "healthy" ||
 app.health === "disabled" ||
 app.health === "unhealthy" ? (
 <iframe
 ref={frameRef}
 src={frameSrc}
 title={link.label}
 loading="eager"
 className={"w-full h-full border-0"}
 allow="clipboard-read; clipboard-write"
 />
 ) : app.health === "initializing" ? (
 <div className="w-full h-full flex items-center justify-center">
 <Spinner loading />
 </div>
 ) : (
 <div className="w-full h-full flex flex-col items-center justify-center">
 <h3 className="m-0 font-medium text-content-primary text-base">
 Error
 </h3>
 <span className="text-content-secondary text-sm">
 The app is in an unknown health state.
 </span>
 </div>
 )}
 </div>
 );
 };
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
 DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { ChevronDownIcon, LayoutGridIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
 <RouterLink to={link.href} onClick={onClick}>
 {app.icon ? <ExternalImage src={app.icon} /> : <LayoutGridIcon />}
 {link.label}
 {app.health === "unhealthy" && (
 <InfoTooltip
 title="This app is unhealthy."
 message="The health check failed."
 type="warning"
 />
 )}
 </RouterLink>
 </Button>
 );
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
 },
 };

 const mainAppHealthStory = (health: WorkspaceApp["health"]) => ({
 beforeEach: () => {
 spyOn(data, "fetchTask").mockResolvedValue({
 prompt: "Create competitors page",
 workspace: {
 ...MockWorkspace,
 latest_build: {
 ...MockWorkspace.latest_build,
 resources: mockResources({
 claudeCodeAppOverrides: {
 health,
 },
 }),
 },
 },
 });
 },
 });

 export const MainAppHealthy: Story = mainAppHealthStory("healthy");
 export const MainAppInitializing: Story = mainAppHealthStory("initializing");
 export const MainAppUnhealthy: Story = mainAppHealthStory("unhealthy");
 export const MainAppHealthDisabled: Story = mainAppHealthStory("disabled");
 export const MainAppHealthUnknown: Story = mainAppHealthStory(
 "unknown" as unknown as WorkspaceApp["health"],
 );

 export const BuildNoAITask: Story = {
 beforeEach: () => {
 spyOn(data, "fetchTask").mockImplementation(() => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,7 @@ import {
		DropdownMenuItem,
		DropdownMenuTrigger,
		} from "components/DropdownMenu/DropdownMenu";
		import { Spinner } from "components/Spinner/Spinner";
		import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
		import { useAppLink } from "modules/apps/useAppLink";
		import type { Task } from "modules/tasks/tasks";
Expand DownExpand Up		@@ -97,14 +98,31 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
		</div>
		)}

		<iframe
		ref={frameRef}
		src={frameSrc}
		title={link.label}
		loading="eager"
		className={"w-full h-full border-0"}
		allow="clipboard-read; clipboard-write"
		/>
		{app.health === "healthy" \|\|
		app.health === "disabled" \|\|
		app.health === "unhealthy" ? (
		<iframe
		ref={frameRef}
		src={frameSrc}
		title={link.label}
		loading="eager"
		className={"w-full h-full border-0"}
		allow="clipboard-read; clipboard-write"
		/>
		) : app.health === "initializing" ? (
		<div className="w-full h-full flex items-center justify-center">
		<Spinner loading />
		</div>
		) : (
		<div className="w-full h-full flex flex-col items-center justify-center">
		<h3 className="m-0 font-medium text-content-primary text-base">
		Error
		</h3>
		<span className="text-content-secondary text-sm">
		The app is in an unknown health state.
		</span>
		</div>
		)}
		</div>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,6 +7,7 @@ import {
		DropdownMenuTrigger,
		} from "components/DropdownMenu/DropdownMenu";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
		import { ChevronDownIcon, LayoutGridIcon } from "lucide-react";
		import { useAppLink } from "modules/apps/useAppLink";
		import type { Task } from "modules/tasks/tasks";
Expand DownExpand Up		@@ -165,6 +166,13 @@ const TaskAppTab: FC<TaskAppTabProps> = ({ task, app, active, onClick }) => {
		<RouterLink to={link.href} onClick={onClick}>
		{app.icon ? <ExternalImage src={app.icon} /> : <LayoutGridIcon />}
		{link.label}
		{app.health === "unhealthy" && (
		<InfoTooltip
		title="This app is unhealthy."
		message="The health check failed."
		type="warning"
		/>
		)}
		</RouterLink>
		</Button>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -176,6 +176,33 @@ export const SidebarAppHealthy: Story = {
		},
		};

		const mainAppHealthStory = (health: WorkspaceApp["health"]) => ({
		beforeEach: () => {
		spyOn(data, "fetchTask").mockResolvedValue({
		prompt: "Create competitors page",
		workspace: {
		...MockWorkspace,
		latest_build: {
		...MockWorkspace.latest_build,
		resources: mockResources({
		claudeCodeAppOverrides: {
		health,
		},
		}),
		},
		},
		});
		},
		});

		export const MainAppHealthy: Story = mainAppHealthStory("healthy");
		export const MainAppInitializing: Story = mainAppHealthStory("initializing");
		export const MainAppUnhealthy: Story = mainAppHealthStory("unhealthy");
		export const MainAppHealthDisabled: Story = mainAppHealthStory("disabled");
		export const MainAppHealthUnknown: Story = mainAppHealthStory(
		"unknown" as unknown as WorkspaceApp["health"],
		);

		export const BuildNoAITask: Story = {
		beforeEach: () => {
		spyOn(data, "fetchTask").mockImplementation(() => {
Expand Down