chore: show status when message is blank

code-asher · code-asher · commit aba81298efc0 · 2025-06-20T13:42:17.000-08:00
The status row looks janky with just the icon.  We can get into a "no
message" state if the LLM never reported a status update.
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
@@ -49,6 +49,16 @@ export const Idle: Story = {
 	},
 };
 
+export const NoMessage: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "idle",
+			message: "",
+		},
+	},
+};
+
 export const LongMessage: Story = {
 	args: {
 		status: {
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
@@ -5,6 +5,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
+import capitalize from "lodash/capitalize";
 import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
 import { cn } from "utils/cn";
 
@@ -25,6 +26,7 @@ export const WorkspaceAppStatus = ({
 		);
 	}
 
+	const message = status.message || capitalize(status.state);
 	return (
 		<div className="flex flex-col text-content-secondary">
 			<TooltipProvider>
@@ -40,11 +42,11 @@ export const WorkspaceAppStatus = ({
 								})}
 							/>
 							<span className="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
-								{status.message}
+								{message}
 							</span>
 						</div>
 					</TooltipTrigger>
-					<TooltipContent>{status.message}</TooltipContent>
+					<TooltipContent>{message}</TooltipContent>
 				</Tooltip>
 			</TooltipProvider>
 			<span className="text-xs first-letter:uppercase block pl-6">
diff --git a/site/src/pages/WorkspacePage/AppStatuses.stories.tsx b/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
@@ -64,6 +64,24 @@ export const IdleState: Story = {
 		]),
 	},
 };
+
+export const NoMessage: Story = {
+	args: {
+		agent: mockAgent([
+			{
+				...MockWorkspaceAppStatus,
+				id: "status-8",
+				icon: "",
+				message: "",
+				created_at: createTimestamp(5, 20),
+				uri: "",
+				state: "idle" as const,
+			},
+			...MockWorkspaceAppStatuses,
+		]),
+	},
+};
+
 export const LongStatusText: Story = {
 	args: {
 		agent: mockAgent([
diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx
@@ -12,6 +12,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
+import capitalize from "lodash/capitalize";
 import { timeFrom } from "utils/time";
 
 import {
@@ -77,7 +78,7 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 					<div className="text-sm font-medium text-content-primary flex items-center gap-2 ">
 						<AppStatusStateIcon state={latestStatus.state} latest />
 						<span className="block flex-1 whitespace-nowrap overflow-hidden text-ellipsis">
-							{latestStatus.message}
+							{latestStatus.message || capitalize(latestStatus.state)}
 						</span>
 					</div>
 					<span className="text-xs text-content-secondary first-letter:uppercase block pl-[26px]">
@@ -160,7 +161,7 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 										latest={false}
 										className="size-icon-xs w-[18px]"
 									/>
-									{status.message}
+									{status.message || capitalize(status.state)}
 								</span>
 								<span className="text-2xs text-content-secondary first-letter:uppercase block pl-[26px]">
 									{formattedTimestamp}
