refactor(site): inline cls variables and remove workspaceStatusDisplay

- Inline badgeCls directly into cn() call in WorkspacePill - Remove workspaceStatusDisplay.tsx and its test file - Inline status icon/label computation into both callers (WorkspacePill and AgentChatPageView) - Replace iconCls variable with direct "size-3" on each icon
coder · DanielleMaywood · Apr 15, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
commit 1b186da9aff4711cb4fa6a420b9ad2216c2b3f80
diff --git a/site/src/pages/AgentsPage/AgentChatPageView.tsx b/site/src/pages/AgentsPage/AgentChatPageView.tsx
@@ -1,4 +1,10 @@
-import { ArchiveIcon } from "lucide-react";
+import {
+	ArchiveIcon,
+	MonitorDotIcon,
+	MonitorIcon,
+	MonitorPauseIcon,
+	MonitorXIcon,
+} from "lucide-react";
 
 import {
 	type FC,
@@ -14,7 +20,10 @@ import type * as TypesGen from "#/api/typesGenerated";
 import type { ChatDiffStatus, ChatMessagePart } from "#/api/typesGenerated";
 import { cn } from "#/utils/cn";
 import { pageTitle } from "#/utils/page";
-
+import {
+	type DisplayWorkspaceStatusType,
+	getDisplayWorkspaceStatus,
+} from "#/utils/workspace";
 import {
 	AgentChatInput,
 	type ChatMessageInputRef,
@@ -34,7 +43,6 @@ import { GitPanel } from "./components/GitPanel/GitPanel";
 import { RightPanel } from "./components/RightPanel/RightPanel";
 import { SidebarTabView } from "./components/Sidebar/SidebarTabView";
 import { TerminalPanel } from "./components/TerminalPanel";
-import { getWorkspaceStatusDisplay } from "./components/workspaceStatusDisplay";
 import { ChatWorkspaceContext } from "./context/ChatWorkspaceContext";
 import { chatWidthClass, useChatFullWidth } from "./hooks/useChatFullWidth";
 import type { ChatDetailError } from "./utils/usageLimitMessage";
@@ -269,11 +277,43 @@ export const AgentChatPageView: FC<AgentChatPageViewProps> = ({
 
 	const attachedWorkspace = (() => {
 		if (!workspace || !workspaceRoute) return undefined;
-		const { statusLabel, statusIcon } = getWorkspaceStatusDisplay(
-			workspace,
-			workspaceAgent,
+
+		const statusIconMap: Record<DisplayWorkspaceStatusType, ReactNode> = {
+			success: <MonitorIcon className="size-3" />,
+			active: <MonitorDotIcon className="size-3" />,
+			inactive: <MonitorPauseIcon className="size-3" />,
+			error: <MonitorXIcon className="size-3" />,
+			danger: <MonitorXIcon className="size-3" />,
+			warning: <MonitorXIcon className="size-3" />,
+		};
+
+		let { type, text } = getDisplayWorkspaceStatus(
+			workspace.latest_build.status,
+			workspace.latest_build.job,
 		);
 
+		const agentPreparing =
+			workspace.latest_build.status === "running" &&
+			(workspaceAgent?.lifecycle_state === "created" ||
+				workspaceAgent?.lifecycle_state === "starting");
+		const agentStartupFailed =
+			workspace.latest_build.status === "running" &&
+			(workspaceAgent?.lifecycle_state === "start_error" ||
+				workspaceAgent?.lifecycle_state === "start_timeout");
+		if (agentPreparing) {
+			type = "active";
+			text = "Preparing";
+		} else if (agentStartupFailed) {
+			type = "warning";
+			text = "Startup failed";
+		}
+
+		const effectiveType = workspace.health.healthy ? type : "warning";
+		const statusLabel = workspace.health.healthy
+			? `Workspace ${text.toLowerCase()}`
+			: `Workspace ${text.toLowerCase()} (unhealthy)`;
+		const statusIcon = statusIconMap[effectiveType];
+
 		return {
 			name: workspace.name,
 			route: workspaceRoute,

diff --git a/site/src/pages/AgentsPage/components/WorkspacePill.tsx b/site/src/pages/AgentsPage/components/WorkspacePill.tsx
@@ -3,10 +3,13 @@ import {
 	CopyIcon,
 	ExternalLinkIcon,
 	LayoutGridIcon,
+	MonitorDotIcon,
 	MonitorIcon,
+	MonitorPauseIcon,
+	MonitorXIcon,
 	SquareTerminalIcon,
 } from "lucide-react";
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { useState } from "react";
 import { useMutation } from "react-query";
 import { Link } from "react-router";
@@ -39,10 +42,19 @@ import {
 } from "#/modules/apps/apps";
 import { useAppLink } from "#/modules/apps/useAppLink";
 import { cn } from "#/utils/cn";
-import { getWorkspaceStatusDisplay } from "./workspaceStatusDisplay";
+import {
+	type DisplayWorkspaceStatusType,
+	getDisplayWorkspaceStatus,
+} from "#/utils/workspace";
 
-const badgeCls =
-	"inline-flex shrink-0 items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs font-medium text-content-secondary";
+const statusIconMap: Record<DisplayWorkspaceStatusType, ReactNode> = {
+	success: <MonitorIcon className="size-3" />,
+	active: <MonitorDotIcon className="size-3" />,
+	inactive: <MonitorPauseIcon className="size-3" />,
+	error: <MonitorXIcon className="size-3" />,
+	danger: <MonitorXIcon className="size-3" />,
+	warning: <MonitorXIcon className="size-3" />,
+};
 
 interface WorkspacePillProps {
 	workspace: Workspace;
@@ -64,11 +76,33 @@ export const WorkspacePill: FC<WorkspacePillProps> = ({
 	const isRunning = workspace.latest_build.status === "running";
 	const route = `/@${workspace.owner_name}/${workspace.name}`;
 
-	const { statusLabel, statusIcon } = getWorkspaceStatusDisplay(
-		workspace,
-		agent,
+	let { type, text } = getDisplayWorkspaceStatus(
+		workspace.latest_build.status,
+		workspace.latest_build.job,
 	);
 
+	const agentPreparing =
+		workspace.latest_build.status === "running" &&
+		(agent?.lifecycle_state === "created" ||
+			agent?.lifecycle_state === "starting");
+	const agentStartupFailed =
+		workspace.latest_build.status === "running" &&
+		(agent?.lifecycle_state === "start_error" ||
+			agent?.lifecycle_state === "start_timeout");
+	if (agentPreparing) {
+		type = "active";
+		text = "Preparing";
+	} else if (agentStartupFailed) {
+		type = "warning";
+		text = "Startup failed";
+	}
+
+	const effectiveType = workspace.health.healthy ? type : "warning";
+	const statusLabel = workspace.health.healthy
+		? `Workspace ${text.toLowerCase()}`
+		: `Workspace ${text.toLowerCase()} (unhealthy)`;
+	const statusIcon = statusIconMap[effectiveType];
+
 	const builtinApps = new Set(agent.display_apps);
 	const hasVSCode = builtinApps.has("vscode");
 	const hasVSCodeInsiders = builtinApps.has("vscode_insiders");
@@ -95,7 +129,7 @@ export const WorkspacePill: FC<WorkspacePillProps> = ({
 							type="button"
 							aria-label={`${workspace.name} workspace menu`}
 							className={cn(
-								badgeCls,
+								"inline-flex shrink-0 items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs font-medium text-content-secondary",
 								"cursor-pointer border-0 transition-colors hover:bg-surface-tertiary hover:text-content-primary",
 							)}
 						>

diff --git a/site/src/pages/AgentsPage/components/workspaceStatusDisplay.test.tsx b/site/src/pages/AgentsPage/components/workspaceStatusDisplay.test.tsx
diff --git a/site/src/pages/AgentsPage/components/workspaceStatusDisplay.tsx b/site/src/pages/AgentsPage/components/workspaceStatusDisplay.tsx