From c597523abd27e64e3cb259329fac704e25d8a882 Mon Sep 17 00:00:00 2001
From: Hugo Dutka <hugo@coder.com>
Date: Mon, 30 Jun 2025 15:30:46 +0000
Subject: [PATCH] handle health status when displaying task apps

---
 site/src/pages/TaskPage/TaskAppIframe.tsx    | 34 +++++++++++++++-----
 site/src/pages/TaskPage/TaskApps.tsx         |  8 +++++
 site/src/pages/TaskPage/TaskPage.stories.tsx | 27 ++++++++++++++++
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
index b995dfec771b6..ce0223e802fd9 100644
--- a/site/src/pages/TaskPage/TaskAppIframe.tsx
+++ b/site/src/pages/TaskPage/TaskAppIframe.tsx
@@ -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";
@@ -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>
 	);
 };
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
index e1444f54d80bd..0cccc8c7a01df 100644
--- a/site/src/pages/TaskPage/TaskApps.tsx
+++ b/site/src/pages/TaskPage/TaskApps.tsx
@@ -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";
@@ -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>
 	);
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
index 03f8cfe739d89..b025c9994f3d0 100644
--- a/site/src/pages/TaskPage/TaskPage.stories.tsx
+++ b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -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(() => {