Jun 13, 2025 · Jun 5, 2025
diff --git a/site/src/pages/WorkspacePage/AppStatuses.stories.tsx b/site/src/pages/WorkspacePage/AppStatuses.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import type { WorkspaceAppStatus } from "api/typesGenerated";
 import {
 MockWorkspace,
 },
 };

 export const MultipleStatuses: Story = {
 args: {
 agent: mockAgent([
 {
 ...MockWorkspaceAppStatus,
 id: "status-1",
 icon: "",
 message: "Initial setup complete.",
 created_at: createTimestamp(5, 10), // 15:05:10 (after referenceDate)
 uri: "",
 state: "complete" as const,
 },
 {
 ...MockWorkspaceAppStatus,
 id: "status-2",
 icon: "",
 message: "Working...",
 created_at: createTimestamp(5, 0), // 15:05:00 (after referenceDate)
 uri: "",
 state: "working" as const,
 },
 ]),
 },
 play: async ({ canvasElement }) => {
 const canvas = within(canvasElement);
 const submitButton = canvas.getByRole("button");
 await userEvent.click(submitButton);
 await canvas.findByText(/working/i);
 },
 };

 function mockAgent(statuses: WorkspaceAppStatus[]) {
 return {
 ...MockWorkspaceAgent,
diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx
 <div className="flex items-center justify-between w-full text-content-secondary">
 <span className="text-xs flex items-center gap-2">
 <AppStatusStateIcon
 state={latestStatus.state}
 state={status.state}
 latest={false}
 className="size-icon-xs w-[18px]"
 />
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,5 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import { userEvent, within } from "@storybook/test";
		import type { WorkspaceAppStatus } from "api/typesGenerated";
		import {
		MockWorkspace,
Expand DownExpand Up		@@ -82,6 +83,37 @@ export const SingleStatus: Story = {
		},
		};

		export const MultipleStatuses: Story = {
		args: {
		agent: mockAgent([
		{
		...MockWorkspaceAppStatus,
		id: "status-1",
		icon: "",
		message: "Initial setup complete.",
		created_at: createTimestamp(5, 10), // 15:05:10 (after referenceDate)
		uri: "",
		state: "complete" as const,
		},
		{
		...MockWorkspaceAppStatus,
		id: "status-2",
		icon: "",
		message: "Working...",
		created_at: createTimestamp(5, 0), // 15:05:00 (after referenceDate)
		uri: "",
		state: "working" as const,
		},
		]),
		},
		play: async ({ canvasElement }) => {
		const canvas = within(canvasElement);
		const submitButton = canvas.getByRole("button");
		await userEvent.click(submitButton);
		await canvas.findByText(/working/i);
		},
		};

		function mockAgent(statuses: WorkspaceAppStatus[]) {
		return {
		...MockWorkspaceAgent,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -156,7 +156,7 @@ export const AppStatuses: FC<AppStatusesProps> = ({
		<div className="flex items-center justify-between w-full text-content-secondary">
		<span className="text-xs flex items-center gap-2">
		<AppStatusStateIcon
		state={latestStatus.state}
		state={status.state}
		latest={false}
		className="size-icon-xs w-[18px]"
		/>
Expand Down