From 5b8894a912f05588e7dc5ae787d5b509f2dfefed Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Mon, 20 Apr 2026 09:51:22 -0500
Subject: [PATCH] feat(ui): expand Storybook overview with full coverage map

Add all planned story groups (navigation, agents, issues, forms, budget,
dialogs, projects, chat, data viz) to the overview guide and coverage
matrix. Updates grid layout for the larger card set.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/storybook/stories/overview.stories.tsx | 79 ++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 3 deletions(-)

diff --git a/ui/storybook/stories/overview.stories.tsx b/ui/storybook/stories/overview.stories.tsx
index f410b410ed8..f56cf4239ef 100644
--- a/ui/storybook/stories/overview.stories.tsx
+++ b/ui/storybook/stories/overview.stories.tsx
@@ -1,5 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { BookOpen, CheckCircle2, FlaskConical, Layers3, Route, ShieldCheck } from "lucide-react";
+import {
+  BookOpen,
+  Bot,
+  CheckCircle2,
+  FlaskConical,
+  FolderKanban,
+  FormInput,
+  Layers3,
+  LayoutDashboard,
+  ListTodo,
+  MessageSquare,
+  PanelLeft,
+  Route,
+  ShieldCheck,
+  Wallet,
+} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
@@ -22,6 +37,54 @@ const storyGroups = [
     stories: "Issue chat, run transcripts, invite/access flows",
     why: "The old `/tests/ux/*` pages are fixture-backed Storybook stories now.",
   },
+  {
+    title: "Navigation & Layout",
+    icon: PanelLeft,
+    stories: "Sidebar, breadcrumbs, command palette, company rail, mobile nav",
+    why: "Navigation chrome frames every board interaction and needs mobile parity.",
+  },
+  {
+    title: "Agent Management",
+    icon: Bot,
+    stories: "Agent properties, config forms, icon picker, action buttons",
+    why: "Agent lifecycle is the primary governance surface for operators.",
+  },
+  {
+    title: "Issue Management",
+    icon: ListTodo,
+    stories: "Issue lists, filters, properties, documents, run ledger, workspace cards",
+    why: "Issues are the core work unit — every view state matters for scan speed.",
+  },
+  {
+    title: "Forms & Editors",
+    icon: FormInput,
+    stories: "Markdown editor, JSON schema forms, env vars, schedule editor, pickers",
+    why: "Rich editors need isolated review for empty, filled, and validation states.",
+  },
+  {
+    title: "Budget & Finance",
+    icon: Wallet,
+    stories: "Incident cards, provider quotas, biller spend, subscription panels",
+    why: "Financial controls are safety-critical and need threshold state coverage.",
+  },
+  {
+    title: "Dialogs & Modals",
+    icon: LayoutDashboard,
+    stories: "New issue/agent/goal/project dialogs, diff modal, image gallery",
+    why: "Dialogs interrupt flow — they must be scannable and self-explanatory.",
+  },
+  {
+    title: "Projects & Goals",
+    icon: FolderKanban,
+    stories: "Project properties, workspace cards, goal trees, runtime controls",
+    why: "Hierarchical views (goals, projects, workspaces) need expand/collapse coverage.",
+  },
+  {
+    title: "Chat & Comments",
+    icon: MessageSquare,
+    stories: "Comment threads, run chat, issue chat with timeline events",
+    why: "Threaded conversations mix agent/user/system authors and need density review.",
+  },
 ];
 
 const coverageRows = [
@@ -32,7 +95,16 @@ const coverageRows = [
   ["Budget controls", "Covered", "Healthy, warning, hard-stop, compact, plain, and editable card variants"],
   ["Execution UX", "Covered", "Run transcript detail, live widget, dashboard card, streaming and settled views"],
   ["Invite UX", "Covered", "Fixture-backed access roles, invite landing, pending, accepted, expired, and error states"],
-  ["Full app pages", "Deferred", "API-driven route stories should be added after page data loaders can be fixture-injected"],
+  ["Navigation & layout", "Planned", "Sidebar, breadcrumbs, command palette, company rail, mobile nav"],
+  ["Agent management", "Planned", "Agent properties, config forms, icon picker, action buttons, active panel"],
+  ["Issue management", "Planned", "Issue lists, filters, properties, documents, run ledger, workspace cards"],
+  ["Forms & editors", "Planned", "Markdown editor, JSON schema, env vars, schedule editor, pickers"],
+  ["Budget & finance", "Planned", "Incident cards, provider quotas, biller spend, subscription panels"],
+  ["Dialogs & modals", "Planned", "New issue/agent/goal/project dialogs, diff modal, image gallery"],
+  ["Projects & goals", "Planned", "Project properties, workspace cards, goal trees, runtime controls"],
+  ["Chat & comments", "Planned", "Comment threads, run chat, issue chat with timeline events"],
+  ["Data viz & misc", "Planned", "Activity charts, kanban, filter bar, live widget, onboarding, skeletons"],
+  ["Full app pages", "Deferred", "API-driven route stories after page data loaders can be fixture-injected"],
 ];
 
 function StorybookGuide() {
@@ -63,7 +135,7 @@ function StorybookGuide() {
           </div>
         </section>
 
-        <section className="grid gap-4 md:grid-cols-3">
+        <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {storyGroups.map((group) => {
             const Icon = group.icon;
             return (
@@ -97,6 +169,7 @@ function StorybookGuide() {
                 <div>
                   <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs text-muted-foreground">
                     {status === "Covered" ? <CheckCircle2 className="h-3 w-3 text-emerald-500" /> : null}
+                    {status === "Planned" ? <Route className="h-3 w-3 text-cyan-500" /> : null}
                     {status}
                   </span>
                 </div>