fix: use matching state in status list (#18349)

It was using the latest state for all statuses, so if the last status
was "failing" for example every status would show the failing icon.

site/src/pages/WorkspacePage/AppStatuses.stories.tsx

@@ -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,
@@ -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,

site/src/pages/WorkspacePage/AppStatuses.tsx

@@ -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]"
 									/>