Aug 22, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 19, 2025 · Aug 21, 2025 · Aug 21, 2025
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
 import { action } from "storybook/actions";
 import type { WorkspacePermissions } from "../../modules/workspaces/permissions";
 import { Workspace } from "./Workspace";
 import { defaultPermissions } from "./WorkspaceNotifications/WorkspaceNotifications.stories";

 // Helper function to create timestamps easily - Copied from AppStatuses.stories.tsx
 const createTimestamp = (
 },
 };

 export const Unhealthy: Story = {
 args: {
 ...Running.args,
 workspace: Mocks.MockUnhealthyWorkspace,
 },
 };

 export const UnhealthyWithoutUpdatePermission: Story = {
 args: {
 ...Unhealthy.args,
 permissions: {
 ...defaultPermissions,
 updateWorkspace: false,
 },
 },
 };

 export const FailedWithLogs: Story = {
 args: {
 ...Running.args,
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
 WorkspaceBuildProgress,
 } from "./WorkspaceBuildProgress";
 import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
 import { NotificationActionButton } from "./WorkspaceNotifications/Notifications";
 import { findTroubleshootingURL } from "./WorkspaceNotifications/WorkspaceNotifications";
 import { WorkspaceTopbar } from "./WorkspaceTopbar";

 interface WorkspaceProps {
 (workspace.latest_build.matched_provisioners?.available ?? 1) > 0;
 const shouldShowProvisionerAlert =
 workspacePending && !haveBuildLogs && !provisionersHealthy && !isRestarting;
 const troubleshootingURL = findTroubleshootingURL(workspace.latest_build);
 const hasActions = permissions.updateWorkspace || troubleshootingURL;

 return (
 <div className="flex flex-col flex-1 min-h-0">
 </Alert>
 )}

 {!workspace.health.healthy && (
 <Alert severity="warning">
 <AlertTitle>Workspace is unhealthy</AlertTitle>
 <AlertDetail>
 <p>
 Your workspace is running but{" "}
 {workspace.health.failing_agents.length > 1
 ? `${workspace.health.failing_agents.length} agents are unhealthy`
 : "1 agent is unhealthy"}
 .
 </p>
 {hasActions && (
 <div className="flex items-center gap-2">
 {permissions.updateWorkspace && (
 <NotificationActionButton
 onClick={() => handleRestart()}
 >
 Restart
 </NotificationActionButton>
 )}
 {troubleshootingURL && (
 <NotificationActionButton
 onClick={() =>
 window.open(troubleshootingURL, "_blank")
 }
 >
 Troubleshooting
 </NotificationActionButton>
 )}
 </div>
 )}
 </AlertDetail>
 </Alert>
 )}

 {transitionStats !== undefined && (
 <WorkspaceBuildProgress
 workspace={workspace}
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.stories.tsx
 import { expect, userEvent, waitFor, within } from "storybook/test";
 import { WorkspaceNotifications } from "./WorkspaceNotifications";

 const defaultPermissions: WorkspacePermissions = {
 exportconst defaultPermissions: WorkspacePermissions = {
 readWorkspace: true,
 updateWorkspaceVersion: true,
 updateWorkspace: true,
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
 },
 } satisfies Record<string, Interpolation<Theme>>;

 const findTroubleshootingURL = (
 exportconst findTroubleshootingURL = (
 workspaceBuild: WorkspaceBuild,
 ): string | undefined => {
 for (const resource of workspaceBuild.resources) {
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
 ],
 };

 const MockWorkspaceUnhealthyAgent: TypesGen.WorkspaceAgent = {
 ...MockWorkspaceAgent,
 id: "test-workspace-unhealthy-agent",
 name: "a-workspace-unhealthy-agent",
 status: "timeout",
 lifecycle_state: "start_error",
 health: { healthy: false },
 };

 export const MockWorkspaceAppStatus: TypesGen.WorkspaceAppStatus = {
 id: "test-app-status",
 created_at: "2022-05-17T17:39:01.382927298Z",
 status: "stopping",
 },
 };
 export const MockUnhealthyWorkspace: TypesGen.Workspace = {
 ...MockWorkspace,
 id: "test-unhealthy-workspace",
 health: {
 healthy: false,
 failing_agents: [MockWorkspaceUnhealthyAgent.id],
 },
 latest_build: {
 ...MockWorkspace.latest_build,
 resources: [
 { ...MockWorkspaceResource, agents: [MockWorkspaceUnhealthyAgent] },
 ],
 },
 };
 export const MockStartingWorkspace: TypesGen.Workspace = {
 ...MockWorkspace,
 id: "test-starting-workspace",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,6 +9,7 @@ import type { ProvisionerJobLog } from "api/typesGenerated";
		import { action } from "storybook/actions";
		import type { WorkspacePermissions } from "../../modules/workspaces/permissions";
		import { Workspace } from "./Workspace";
		import { defaultPermissions } from "./WorkspaceNotifications/WorkspaceNotifications.stories";

		// Helper function to create timestamps easily - Copied from AppStatuses.stories.tsx
		const createTimestamp = (
Expand DownExpand Up		@@ -349,6 +350,23 @@ export const Stopping: Story = {
		},
		};

		export const Unhealthy: Story = {
aqandrew marked this conversation as resolved. Show resolvedHide resolved
		args: {
		...Running.args,
		workspace: Mocks.MockUnhealthyWorkspace,
		},
		};

		export const UnhealthyWithoutUpdatePermission: Story = {
		args: {
		...Unhealthy.args,
		permissions: {
		...defaultPermissions,
		updateWorkspace: false,
		},
		},
		};

		export const FailedWithLogs: Story = {
		args: {
		...Running.args,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,6 +21,8 @@ import {
		WorkspaceBuildProgress,
		} from "./WorkspaceBuildProgress";
		import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
		import { NotificationActionButton } from "./WorkspaceNotifications/Notifications";
		import { findTroubleshootingURL } from "./WorkspaceNotifications/WorkspaceNotifications";
		import { WorkspaceTopbar } from "./WorkspaceTopbar";

		interface WorkspaceProps {
Expand DownExpand Up		@@ -95,6 +97,8 @@ export const Workspace: FC<WorkspaceProps> = ({
		(workspace.latest_build.matched_provisioners?.available ?? 1) > 0;
		const shouldShowProvisionerAlert =
		workspacePending && !haveBuildLogs && !provisionersHealthy && !isRestarting;
		const troubleshootingURL = findTroubleshootingURL(workspace.latest_build);
		const hasActions = permissions.updateWorkspace \|\| troubleshootingURL;

		return (
		<div className="flex flex-col flex-1 min-h-0">
Expand DownExpand Up		@@ -192,6 +196,41 @@ export const Workspace: FC<WorkspaceProps> = ({
		</Alert>
		)}

		{!workspace.health.healthy && (
		<Alert severity="warning">
Copy link ContributorAuthor aqandrewAug 18, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. `Alert`'s background color is`--surface-secondary`. The buttons turn`--surface-secondary` on hover, so there's no apparent change when hovering. (This is also the case in`WorkspaceNotifications`.) Does it make sense to keep these colors? Or should we do something like give`NotificationActionButton` an even lighter background (`--surface-tertiary`) on hover? Copy link Member aslilacAug 21, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. the existing popup has the same problem. it should definitely get fixed eventually but our colors are a bit of a mess right now. probably out of scope for this issue. aqandrew reacted with thumbs up emoji
		<AlertTitle>Workspace is unhealthy</AlertTitle>
		<AlertDetail>
		<p>
		Your workspace is running but{" "}
		{workspace.health.failing_agents.length > 1
		? `${workspace.health.failing_agents.length} agents are unhealthy`
		: "1 agent is unhealthy"}
		.
		</p>
		{hasActions && (
		<div className="flex items-center gap-2">
		{permissions.updateWorkspace && (
		<NotificationActionButton
		onClick={() => handleRestart()}
		>
		Restart
		</NotificationActionButton>
		)}
		{troubleshootingURL && (
		<NotificationActionButton
		onClick={() =>
		window.open(troubleshootingURL, "_blank")
		}
		>
		Troubleshooting
		</NotificationActionButton>
		)}
		</div>
		)}
		</AlertDetail>
		</Alert>
		)}

		{transitionStats !== undefined && (
		<WorkspaceBuildProgress
		workspace={workspace}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,7 +12,7 @@ import type { WorkspacePermissions } from "modules/workspaces/permissions";
		import { expect, userEvent, waitFor, within } from "storybook/test";
		import { WorkspaceNotifications } from "./WorkspaceNotifications";

		const defaultPermissions: WorkspacePermissions = {
		exportconst defaultPermissions: WorkspacePermissions = {
		readWorkspace: true,
		updateWorkspaceVersion: true,
		updateWorkspace: true,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -275,7 +275,7 @@ const styles = {
		},
		} satisfies Record<string, Interpolation<Theme>>;

		const findTroubleshootingURL = (
		exportconst findTroubleshootingURL = (
		workspaceBuild: WorkspaceBuild,
		): string \| undefined => {
		for (const resource of workspaceBuild.resources) {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -992,6 +992,15 @@ export const MockWorkspaceSubAgent: TypesGen.WorkspaceAgent = {
		],
		};

		const MockWorkspaceUnhealthyAgent: TypesGen.WorkspaceAgent = {
		...MockWorkspaceAgent,
		id: "test-workspace-unhealthy-agent",
		name: "a-workspace-unhealthy-agent",
		status: "timeout",
		lifecycle_state: "start_error",
		health: { healthy: false },
		};

		export const MockWorkspaceAppStatus: TypesGen.WorkspaceAppStatus = {
		id: "test-app-status",
		created_at: "2022-05-17T17:39:01.382927298Z",
Expand DownExpand Up		@@ -1443,6 +1452,20 @@ export const MockStoppingWorkspace: TypesGen.Workspace = {
		status: "stopping",
		},
		};
		export const MockUnhealthyWorkspace: TypesGen.Workspace = {
		...MockWorkspace,
		id: "test-unhealthy-workspace",
		health: {
		healthy: false,
		failing_agents: [MockWorkspaceUnhealthyAgent.id],
		},
		latest_build: {
		...MockWorkspace.latest_build,
		resources: [
		{ ...MockWorkspaceResource, agents: [MockWorkspaceUnhealthyAgent] },
		],
		},
		};
		export const MockStartingWorkspace: TypesGen.Workspace = {
		...MockWorkspace,
		id: "test-starting-workspace",
Expand Down