[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/stories/foundations.stories.tsx

@@ -0,0 +1,300 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlertTriangle, ArrowRight, Check, Copy, Play, Plus, Save, Search, Settings } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { ToggleSwitch } from "@/components/ui/toggle-switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+const buttonVariants = ["default", "secondary", "outline", "ghost", "destructive", "link"] as const;
+const buttonSizes = ["xs", "sm", "default", "lg", "icon", "icon-sm"] as const;
+const badgeVariants = ["default", "secondary", "outline", "destructive", "ghost", "link"] as const;
+
+function Section({
+  eyebrow,
+  title,
+  children,
+}: {
+  eyebrow: string;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="paperclip-story__frame overflow-hidden">
+      <div className="border-b border-border px-5 py-4">
+        <div className="paperclip-story__label">{eyebrow}</div>
+        <h2 className="mt-1 text-xl font-semibold">{title}</h2>
+      </div>
+      <div className="p-5">{children}</div>
+    </section>
+  );
+}
+
+function FoundationsMatrix() {
+  const [autoMode, setAutoMode] = useState(true);
+  const [boardApproval, setBoardApproval] = useState(true);
+
+  return (
+    <div className="paperclip-story">
+      <main className="paperclip-story__inner space-y-6">
+        <section className="paperclip-story__frame p-6">
+          <div className="paperclip-story__label">Foundations</div>
+          <h1 className="mt-2 text-3xl font-semibold tracking-tight">Primitives and interaction states</h1>
+          <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
+            A dense pass over the base controls that Paperclip pages use for operational actions, filtering,
+            approvals, and settings.
+          </p>
+        </section>
+
+        <Section eyebrow="Actions" title="Button variants and sizes">
+          <div className="space-y-6">
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {buttonVariants.map((variant) => (
+                <div key={variant} className="rounded-lg border border-border bg-background/70 p-4">
+                  <div className="mb-3 text-xs font-medium capitalize text-muted-foreground">{variant}</div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Button variant={variant}>
+                      <Play className="h-4 w-4" />
+                      Invoke run
+                    </Button>
+                    <Button variant={variant} disabled>
+                      Disabled
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="rounded-lg border border-border bg-background/70 p-4">
+              <div className="mb-3 text-xs font-medium text-muted-foreground">Sizes and icon-only actions</div>
+              <div className="flex flex-wrap items-center gap-2">
+                {buttonSizes.map((size) => (
+                  <Button key={size} size={size} variant={size.startsWith("icon") ? "outline" : "secondary"}>
+                    {size.startsWith("icon") ? <Settings /> : size}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </Section>
+
+        <Section eyebrow="Status labels" title="Badges and compact metadata">
+          <div className="flex flex-wrap gap-2">
+            {badgeVariants.map((variant) => (
+              <Badge key={variant} variant={variant}>
+                {variant === "destructive" ? <AlertTriangle /> : variant === "default" ? <Check /> : null}
+                {variant}
+              </Badge>
+            ))}
+            <Badge variant="outline" className="font-mono">
+              PAP-1641
+            </Badge>
+            <Badge variant="secondary">
+              <ArrowRight />
+              in review
+            </Badge>
+          </div>
+        </Section>
+
+        <Section eyebrow="Inputs" title="Form controls with real Paperclip copy">
+          <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]">
+            <div className="space-y-4">
+              <div className="grid gap-2">
+                <Label htmlFor="story-title">Issue title</Label>
+                <Input id="story-title" defaultValue="Create Storybook coverage for the board UI" />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="story-summary">Comment</Label>
+                <Textarea
+                  id="story-summary"
+                  defaultValue={"Implemented the foundation stories.\nNext action: run static build verification."}
+                  rows={5}
+                />
+              </div>
+              <div className="grid gap-2 sm:grid-cols-2">
+                <div className="grid gap-2">
+                  <Label>Priority</Label>
+                  <Select defaultValue="high">
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Priority" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="critical">Critical</SelectItem>
+                      <SelectItem value="high">High</SelectItem>
+                      <SelectItem value="medium">Medium</SelectItem>
+                      <SelectItem value="low">Low</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="grid gap-2">
+                  <Label>Assignee</Label>
+                  <Select defaultValue="codexcoder">
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Assignee" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="codexcoder">CodexCoder</SelectItem>
+                      <SelectItem value="qachecker">QAChecker</SelectItem>
+                      <SelectItem value="board">Board</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
+            <Card className="shadow-none">
+              <CardHeader>
+                <CardTitle>Governed settings</CardTitle>
+                <CardDescription>Switches, checkboxes, and validation copy in one compact panel.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex items-center justify-between gap-4 rounded-lg border border-border p-3">
+                  <div>
+                    <div className="text-sm font-medium">Auto mode</div>
+                    <div className="text-xs text-muted-foreground">Let agents continue after review approval.</div>
+                  </div>
+                  <ToggleSwitch checked={autoMode} onCheckedChange={setAutoMode} />
+                </div>
+                <label className="flex items-start gap-3 rounded-lg border border-border p-3 text-sm">
+                  <Checkbox checked={boardApproval} onCheckedChange={(value) => setBoardApproval(value === true)} />
+                  <span>
+                    <span className="font-medium">Require board approval for new agents</span>
+                    <span className="mt-1 block text-xs text-muted-foreground">
+                      Mirrors the company-level governance control.
+                    </span>
+                  </span>
+                </label>
+              </CardContent>
+            </Card>
+          </div>
+        </Section>
+
+        <Section eyebrow="Navigation" title="Tabs, overlays, and modal affordances">
+          <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_320px]">
+            <Tabs defaultValue="details" className="rounded-lg border border-border bg-background/70 p-4">
+              <TabsList variant="line">
+                <TabsTrigger value="details">Details</TabsTrigger>
+                <TabsTrigger value="activity">Activity</TabsTrigger>
+                <TabsTrigger value="budget">Budget</TabsTrigger>
+              </TabsList>
+              <TabsContent value="details" className="pt-5 text-sm leading-6 text-muted-foreground">
+                The line tab style is used on dense detail pages where the content, not the tab chrome, needs to dominate.
+              </TabsContent>
+              <TabsContent value="activity" className="pt-5 text-sm leading-6 text-muted-foreground">
+                Activity copy stays compact and pairs with timestamped rows in the product stories.
+              </TabsContent>
+              <TabsContent value="budget" className="pt-5 text-sm leading-6 text-muted-foreground">
+                Budget controls surface warning and hard-stop states in the control-plane stories.
+              </TabsContent>
+            </Tabs>
+
+            <div className="space-y-3">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="outline" className="w-full justify-start">
+                    <Search className="h-4 w-4" />
+                    Hover for tooltip
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Search issues, agents, projects, and approvals.</TooltipContent>
+              </Tooltip>
+
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="w-full justify-start">
+                    <Copy className="h-4 w-4" />
+                    Open popover
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-72">
+                  <div className="text-sm font-medium">Copy-safe detail</div>
+                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                    Popovers should keep quick metadata close to the control that opened them.
+                  </p>
+                </PopoverContent>
+              </Popover>
+
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button className="w-full justify-start">
+                    <Plus className="h-4 w-4" />
+                    Open dialog
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Create issue</DialogTitle>
+                    <DialogDescription>
+                      Dialogs should keep the primary decision and risk clear without leaving the current board context.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <Separator />
+                  <div className="grid gap-2">
+                    <Label htmlFor="dialog-title">Title</Label>
+                    <Input id="dialog-title" defaultValue="Review Storybook visual coverage" />
+                  </div>
+                  <DialogFooter>
+                    <Button variant="outline">Cancel</Button>
+                    <Button>
+                      <Save className="h-4 w-4" />
+                      Save
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </Section>
+      </main>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Foundations/Primitive Matrix",
+  component: FoundationsMatrix,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Foundation stories keep base shadcn/Radix primitives visible in every variant and key interaction state used by Paperclip.",
+      },
+    },
+  },
+} satisfies Meta<typeof FoundationsMatrix>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AllPrimitives: Story = {};