[codex] add comprehensive UI Storybook coverage (#4132)

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies.
> - The board UI is the main operator surface, so its component and
workflow coverage needs to stay reviewable as the product grows.
> - This branch adds Storybook as a dedicated UI reference surface for
core Paperclip screens and interaction patterns.
> - That work spans Storybook infrastructure, app-level provider wiring,
and a large fixture set that can render real control-plane states
without a live backend.
> - The branch also expands coverage across agents, budgets, issues,
chat, dialogs, navigation, projects, and data visualization so future UI
changes have a concrete visual baseline.
> - This pull request packages that Storybook work on top of the latest
`master`, excludes the lockfile from the final diff per repo policy, and
fixes one fixture contract drift caught during verification.
> - The benefit is a single reviewable PR that adds broad UI
documentation and regression-surfacing coverage without losing the
existing branch work.

## What Changed

- Added Storybook 10 wiring for the UI package, including root scripts,
UI package scripts, Storybook config, preview wrappers, Tailwind
entrypoints, and setup docs.
- Added a large fixture-backed data source for Storybook so complex
board states can render without a live server.
- Added story suites covering foundations, status language,
control-plane surfaces, overview, UX labs, agent management, budget and
finance, forms and editors, issue management, navigation and layout,
chat and comments, data visualization, dialogs and modals, and
projects/goals/workspaces.
- Adjusted several UI components for Storybook parity so dialogs, menus,
keyboard shortcuts, budget markers, markdown editing, and related
surfaces render correctly in isolation.
- Rebasing work for PR assembly: replayed the branch onto current
`master`, removed `pnpm-lock.yaml` from the final PR diff, and aligned
the dashboard fixture with the current `DashboardSummary.runActivity`
API contract.

## Verification

- `pnpm --filter @paperclipai/ui typecheck`
- `pnpm --filter @paperclipai/ui build-storybook`
- Manual diff audit after rebase: verified the PR no longer includes
`pnpm-lock.yaml` and now cleanly targets current `master`.
- Before/after UI note: before this branch there was no dedicated
Storybook surface for these Paperclip views; after this branch the local
Storybook build includes the new overview and domain story suites in
`ui/storybook-static`.

## Risks

- Large static fixture files can drift from shared types as dashboard
and UI contracts evolve; this PR already needed one fixture correction
for `runActivity`.
- Storybook bundle output includes some large chunks, so future growth
may need chunking work if build performance becomes an issue.
- Several component tweaks were made for isolated rendering parity, so
reviewers should spot-check key board surfaces against the live app
behavior.

## Model Used

- OpenAI Codex, GPT-5-based coding agent in the Paperclip harness; exact
serving model ID is not exposed in-runtime to the agent.
- Tool-assisted workflow with terminal execution, git operations, local
typecheck/build verification, and GitHub CLI PR creation.
- Context window/reasoning mode not surfaced by the harness.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>

ui/storybook/.storybook/main.ts

@@ -0,0 +1,32 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import type { StorybookConfig } from "@storybook/react-vite";
+import tailwindcss from "@tailwindcss/vite";
+import { mergeConfig } from "vite";
+
+const storybookConfigDir = path.dirname(fileURLToPath(import.meta.url));
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.stories.@(ts|tsx|mdx)"],
+  staticDirs: ["../../public"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-a11y"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  viteFinal: async (baseConfig) =>
+    mergeConfig(baseConfig, {
+      plugins: [tailwindcss()],
+      resolve: {
+        alias: {
+          "@": path.resolve(storybookConfigDir, "../../src"),
+          lexical: path.resolve(storybookConfigDir, "../../node_modules/lexical/Lexical.mjs"),
+        },
+      },
+    }),
+};
+
+export default config;

ui/storybook/.storybook/preview.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState, type ReactNode } from "react";
+import type { Preview } from "@storybook/react-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter } from "@/lib/router";
+import { BreadcrumbProvider } from "@/context/BreadcrumbContext";
+import { CompanyProvider } from "@/context/CompanyContext";
+import { DialogProvider } from "@/context/DialogContext";
+import { EditorAutocompleteProvider } from "@/context/EditorAutocompleteContext";
+import { PanelProvider } from "@/context/PanelContext";
+import { SidebarProvider } from "@/context/SidebarContext";
+import { ThemeProvider } from "@/context/ThemeContext";
+import { ToastProvider } from "@/context/ToastContext";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  storybookAgents,
+  storybookApprovals,
+  storybookAuthSession,
+  storybookCompanies,
+  storybookDashboardSummary,
+  storybookIssues,
+  storybookLiveRuns,
+  storybookProjects,
+  storybookSidebarBadges,
+} from "../fixtures/paperclipData";
+import "@mdxeditor/editor/style.css";
+import "./tailwind-entry.css";
+import "./styles.css";
+
+function installStorybookApiFixtures() {
+  if (typeof window === "undefined") return;
+  const currentWindow = window as typeof window & {
+    __paperclipStorybookFetchInstalled?: boolean;
+  };
+  if (currentWindow.__paperclipStorybookFetchInstalled) return;
+
+  const originalFetch = window.fetch.bind(window);
+  currentWindow.__paperclipStorybookFetchInstalled = true;
+
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const rawUrl =
+      typeof input === "string"
+        ? input
+        : input instanceof URL
+          ? input.href
+          : input.url;
+    const url = new URL(rawUrl, window.location.origin);
+
+    if (url.pathname === "/api/auth/get-session") {
+      return Response.json(storybookAuthSession);
+    }
+
+    if (url.pathname === "/api/companies") {
+      return Response.json(storybookCompanies);
+    }
+
+    if (url.pathname === "/api/companies/company-storybook/user-directory") {
+      return Response.json({
+        users: [
+          {
+            principalId: "user-board",
+            status: "active",
+            user: {
+              id: "user-board",
+              email: "board@paperclip.local",
+              name: "Board Operator",
+              image: null,
+            },
+          },
+          {
+            principalId: "user-product",
+            status: "active",
+            user: {
+              id: "user-product",
+              email: "product@paperclip.local",
+              name: "Product Lead",
+              image: null,
+            },
+          },
+        ],
+      });
+    }
+
+    if (url.pathname === "/api/instance/settings/experimental") {
+      return Response.json({
+        enableIsolatedWorkspaces: true,
+        autoRestartDevServerWhenIdle: false,
+      });
+    }
+
+    if (url.pathname === "/api/plugins/ui-contributions") {
+      return Response.json([]);
+    }
+
+    const companyResourceMatch = url.pathname.match(/^\/api\/companies\/([^/]+)\/([^/]+)$/);
+    if (companyResourceMatch) {
+      const [, companyId, resource] = companyResourceMatch;
+      if (resource === "agents") {
+        return Response.json(companyId === "company-storybook" ? storybookAgents : []);
+      }
+      if (resource === "projects") {
+        return Response.json(companyId === "company-storybook" ? storybookProjects : []);
+      }
+      if (resource === "approvals") {
+        return Response.json(companyId === "company-storybook" ? storybookApprovals : []);
+      }
+      if (resource === "dashboard") {
+        return Response.json({
+          ...storybookDashboardSummary,
+          companyId,
+        });
+      }
+      if (resource === "heartbeat-runs") {
+        return Response.json([]);
+      }
+      if (resource === "live-runs") {
+        return Response.json(companyId === "company-storybook" ? storybookLiveRuns : []);
+      }
+      if (resource === "inbox-dismissals") {
+        return Response.json([]);
+      }
+      if (resource === "sidebar-badges") {
+        return Response.json(
+          companyId === "company-storybook"
+            ? storybookSidebarBadges
+            : { inbox: 0, approvals: 0, failedRuns: 0, joinRequests: 0 },
+        );
+      }
+      if (resource === "join-requests") {
+        return Response.json([]);
+      }
+      if (resource === "issues") {
+        const query = url.searchParams.get("q")?.trim().toLowerCase();
+        const issues = companyId === "company-storybook" ? storybookIssues : [];
+        return Response.json(
+          query
+            ? issues.filter((issue) =>
+                `${issue.identifier ?? ""} ${issue.title} ${issue.description ?? ""}`.toLowerCase().includes(query),
+              )
+            : issues,
+        );
+      }
+    }
+
+    if (url.pathname.startsWith("/api/invites/") && url.pathname.endsWith("/logo")) {
+      return new Response(null, { status: 204 });
+    }
+
+    return originalFetch(input, init);
+  };
+}
+
+function applyStorybookTheme(theme: "light" | "dark") {
+  if (typeof document === "undefined") return;
+  document.documentElement.classList.toggle("dark", theme === "dark");
+  document.documentElement.style.colorScheme = theme;
+}
+
+function StorybookProviders({
+  children,
+  theme,
+}: {
+  children: ReactNode;
+  theme: "light" | "dark";
+}) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: Number.POSITIVE_INFINITY,
+          },
+        },
+      }),
+  );
+
+  useEffect(() => {
+    applyStorybookTheme(theme);
+    installStorybookApiFixtures();
+  }, [theme]);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <MemoryRouter initialEntries={["/PAP/storybook"]}>
+          <CompanyProvider>
+            <EditorAutocompleteProvider>
+              <ToastProvider>
+                <TooltipProvider>
+                  <BreadcrumbProvider>
+                    <SidebarProvider>
+                      <PanelProvider>
+                        <DialogProvider>{children}</DialogProvider>
+                      </PanelProvider>
+                    </SidebarProvider>
+                  </BreadcrumbProvider>
+                </TooltipProvider>
+              </ToastProvider>
+            </EditorAutocompleteProvider>
+          </CompanyProvider>
+        </MemoryRouter>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+
+const preview: Preview = {
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme === "light" ? "light" : "dark";
+      return (
+        <StorybookProviders key={theme} theme={theme}>
+          <Story />
+        </StorybookProviders>
+      );
+    },
+  ],
+  globalTypes: {
+    theme: {
+      description: "Paperclip color mode",
+      defaultValue: "dark",
+      toolbar: {
+        title: "Theme",
+        icon: "mirror",
+        items: [
+          { value: "dark", title: "Dark" },
+          { value: "light", title: "Light" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    a11y: {
+      test: "error",
+    },
+    backgrounds: {
+      disable: true,
+    },
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: true,
+    },
+    layout: "fullscreen",
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: { width: "390px", height: "844px" },
+        },
+        tablet: {
+          name: "Tablet",
+          styles: { width: "834px", height: "1112px" },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: { width: "1440px", height: "960px" },
+        },
+      },
+    },
+  },
+};
+
+export default preview;

ui/storybook/.storybook/styles.css

@@ -0,0 +1,49 @@
+html,
+body,
+#storybook-root {
+  min-height: 100%;
+}
+
+body {
+  overflow: auto;
+  background: var(--background);
+}
+
+.sb-show-main {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.paperclip-story {
+  min-height: 100vh;
+  background:
+    linear-gradient(180deg, color-mix(in oklab, var(--muted) 28%, transparent), transparent 340px),
+    var(--background);
+  color: var(--foreground);
+  padding: 24px;
+}
+
+.paperclip-story__inner {
+  margin: 0 auto;
+  max-width: 1180px;
+}
+
+.paperclip-story__frame {
+  border: 1px solid var(--border);
+  background: color-mix(in oklab, var(--card) 86%, transparent);
+  box-shadow: 0 24px 90px color-mix(in oklab, black 16%, transparent);
+}
+
+.paperclip-story__label {
+  color: var(--muted-foreground);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 640px) {
+  .paperclip-story {
+    padding: 16px;
+  }
+}

ui/storybook/.storybook/tailwind-entry.css

@@ -0,0 +1,2 @@
+@import "../../src/index.css";
+@source "../../src";