From 5d9ae81090d4b210af477fa00bab67abc35943e6 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 24 Aug 2026 01:37:53 +0900
Subject: [PATCH] test: inventory workspace navigation states

---
 docs/storybook-inventory.md                   |  2 +
 .../src/components/WorkspaceNav.stories.tsx   | 73 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 frontend/src/components/WorkspaceNav.stories.tsx

diff --git a/docs/storybook-inventory.md b/docs/storybook-inventory.md
index d889b0637..aeb43499b 100644
--- a/docs/storybook-inventory.md
+++ b/docs/storybook-inventory.md
@@ -39,6 +39,8 @@ reader-facing control you can click before changing product CSS.
 | `Workspace/AskAgentPanel` SavedHistory | Continue a saved evidence-grounded conversation. | `aria-current`, `AskAgentPanel` |
 | `Workspace/AskAgentPanel` Unavailable | Retry loading conversation history. | `ExceptionAlert`, `AskAgentPanel` |
 | `Workspace/AskAgentPanel` Phone | Review the anchored flow at the phone viewport. | `AskAgentPanel` phone breakpoint |
+| `Workspace/WorkspaceNav` Desktop | Switch workspace destinations and expose the current page. | `WorkspaceNav`, `aria-current` |
+| `Workspace/WorkspaceNav` PhoneDrawer | Review the phone drawer navigation without the admin destination. | `WorkspaceNav` drawer variant |
 | `Workspace/ChatPanel` SeededDump | Read seeded questions on a post, then ask a new question. | `ChatPanel` |
 | `Workspace/ChatPanel` SavedHistory | Select a saved post conversation, then start a new conversation. | `aria-current`, `ChatPanel` |
 | `Workspace/ChatPanel` Phone | Review post Ask history at the phone viewport. | `ChatPanel` phone breakpoint |
diff --git a/frontend/src/components/WorkspaceNav.stories.tsx b/frontend/src/components/WorkspaceNav.stories.tsx
new file mode 100644
index 000000000..737896961
--- /dev/null
+++ b/frontend/src/components/WorkspaceNav.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import "../App.css";
+import {
+  WorkspaceNav,
+  type WorkspaceDestination,
+  type WorkspaceNavProps,
+} from "./WorkspaceNav";
+
+function InteractiveNav(args: WorkspaceNavProps) {
+  const [destination, setDestination] = useState<WorkspaceDestination>(
+    args.destination,
+  );
+  return (
+    <WorkspaceNav
+      {...args}
+      destination={destination}
+      onChange={(next) => {
+        setDestination(next);
+        args.onChange(next);
+      }}
+    />
+  );
+}
+
+const meta = {
+  title: "Workspace/WorkspaceNav",
+  component: WorkspaceNav,
+  args: {
+    destination: "board",
+    onChange: () => undefined,
+  },
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof WorkspaceNav>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  render: (args) => <InteractiveNav {...args} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("button", { name: "Board" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    await userEvent.click(canvas.getByRole("button", { name: "Ask Agent" }));
+    await expect(
+      canvas.getByRole("button", { name: "Ask Agent" }),
+    ).toHaveAttribute("aria-current", "page");
+  },
+};
+
+export const PhoneDrawer: Story = {
+  args: {
+    drawer: true,
+    id: "workspace-drawer-story",
+    showAdmin: false,
+  },
+  render: (args) => <InteractiveNav {...args} />,
+  parameters: {
+    layout: "padded",
+    viewport: { defaultViewport: "mobile1" },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.getByRole("navigation", { name: "Workspace navigation" }),
+    ).toHaveClass("workspace-gnb-drawer");
+    await expect(canvas.queryByRole("button", { name: "Admin" })).toBeNull();
+  },
+};