test(site): add missing stories for AgentsPage components (#22808)

site/src/pages/AgentsPage/AgentsSkeletons.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AgentDetailSkeleton, AgentsPageSkeleton } from "./AgentsSkeletons";
+
+const meta: Meta<typeof AgentsPageSkeleton> = {
+	title: "pages/AgentsPage/AgentsSkeletons",
+	component: AgentsPageSkeleton,
+	decorators: [
+		(Story) => (
+			<div style={{ height: 600, width: "100%" }}>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+type Story = StoryObj<typeof AgentsPageSkeleton>;
+
+export const Page: Story = {};
+
+export const Detail: Story = {
+	render: () => (
+		<div style={{ height: 600, width: "100%" }}>
+			<AgentDetailSkeleton />
+		</div>
+	),
+};

site/src/pages/AgentsPage/ChimeButton.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { ChimeButton } from "./ChimeButton";
+
+const meta: Meta<typeof ChimeButton> = {
+	title: "pages/AgentsPage/ChimeButton",
+	component: ChimeButton,
+};
+export default meta;
+type Story = StoryObj<typeof ChimeButton>;
+
+export const Default: Story = {};
+
+export const ToggleState: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const button = canvas.getByRole("button");
+		const initialText = button.querySelector("svg")?.classList.toString();
+		await userEvent.click(button);
+		const updatedText = button.querySelector("svg")?.classList.toString();
+		// The icon class should change after clicking.
+		expect(initialText).not.toBe(updatedText);
+	},
+};

site/src/pages/AgentsPage/DiffStats.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DiffStatBadge } from "./DiffStats";
+
+const badgeMeta: Meta<typeof DiffStatBadge> = {
+	title: "pages/AgentsPage/DiffStatBadge",
+	component: DiffStatBadge,
+	decorators: [
+		(Story) => (
+			<div className="flex h-6 items-center">
+				<Story />
+			</div>
+		),
+	],
+	args: {
+		additions: 42,
+		deletions: 7,
+	},
+};
+export default badgeMeta;
+type BadgeStory = StoryObj<typeof DiffStatBadge>;
+
+export const Default: BadgeStory = {};
+
+export const AdditionsOnly: BadgeStory = {
+	args: { additions: 10, deletions: 0 },
+};
+
+export const DeletionsOnly: BadgeStory = {
+	args: { additions: 0, deletions: 5 },
+};
+
+export const ZeroChanges: BadgeStory = {
+	args: { additions: 0, deletions: 0 },
+};
+
+export const LargeNumbers: BadgeStory = {
+	args: { additions: 1234, deletions: 567 },
+};

site/src/pages/AgentsPage/DiffStatsInline.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { DiffStatsInline } from "./DiffStats";
+
+const meta: Meta<typeof DiffStatsInline> = {
+	title: "pages/AgentsPage/DiffStatsInline",
+	component: DiffStatsInline,
+	args: {
+		status: {
+			chat_id: "chat-1",
+			changes_requested: false,
+			additions: 42,
+			deletions: 7,
+			changed_files: 5,
+		},
+		onClick: fn(),
+	},
+};
+export default meta;
+type Story = StoryObj<typeof DiffStatsInline>;
+
+export const Default: Story = {};
+
+export const ZeroLinesWithFiles: Story = {
+	args: {
+		status: {
+			chat_id: "chat-2",
+			changes_requested: false,
+			additions: 0,
+			deletions: 0,
+			changed_files: 3,
+		},
+	},
+};
+
+export const NoChanges: Story = {
+	args: {
+		status: {
+			chat_id: "chat-3",
+			changes_requested: false,
+			additions: 0,
+			deletions: 0,
+			changed_files: 0,
+		},
+	},
+};
+
+export const LargeNumbers: Story = {
+	args: {
+		status: {
+			chat_id: "chat-4",
+			changes_requested: false,
+			additions: 1234,
+			deletions: 567,
+			changed_files: 42,
+		},
+	},
+};

site/src/pages/AgentsPage/RightPanel.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { RightPanel } from "./RightPanel";
+
+const meta: Meta<typeof RightPanel> = {
+	title: "pages/AgentsPage/RightPanel",
+	component: RightPanel,
+	args: {
+		isOpen: true,
+		isExpanded: false,
+		onToggleExpanded: fn(),
+		onClose: fn(),
+		children: (
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					height: "100%",
+					padding: 24,
+					color: "var(--content-secondary)",
+				}}
+			>
+				Panel content
+			</div>
+		),
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ display: "flex", height: 400, width: "100%" }}>
+				<div
+					style={{
+						flex: 1,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						color: "var(--content-secondary)",
+					}}
+				>
+					Main content area
+				</div>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+type Story = StoryObj<typeof RightPanel>;
+
+export const Default: Story = {};
+
+export const Closed: Story = {
+	args: { isOpen: false },
+};
+
+export const Expanded: Story = {
+	args: { isExpanded: true },
+};

site/src/pages/AgentsPage/SectionHeader.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SectionHeader } from "./SectionHeader";
+
+const meta: Meta<typeof SectionHeader> = {
+	title: "pages/AgentsPage/SectionHeader",
+	component: SectionHeader,
+	args: {
+		label: "Agent Configuration",
+	},
+	decorators: [
+		(Story) => (
+			<div style={{ maxWidth: 600 }}>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+type Story = StoryObj<typeof SectionHeader>;
+
+export const Default: Story = {};
+
+export const WithDescription: Story = {
+	args: {
+		label: "Model Settings",
+		description: "Configure which AI models are available for agents.",
+	},
+};
+
+export const WithAction: Story = {
+	args: {
+		label: "Notifications",
+		description: "Manage how you receive notifications.",
+		action: <button type="button">Edit</button>,
+	},
+};
+
+export const LabelOnly: Story = {
+	args: {
+		label: "Advanced",
+		description: undefined,
+		action: undefined,
+	},
+};