feat(webapp): complete the storybook's variant coverage

Audited every component against its story by extracting the variant keys
each one declares. The gaps, now filled:

- Buttons: was missing every extra-large size, the whole docs and
  ask-trigger families, secondary/small-icon and the three menu-item
  variants. Rewritten to drive off the family and size lists, so all 35
  variants render and the page can't drift from the component again.
- Popover: only the arrow trigger appeared. Now every trigger (custom, side
  menu, both ellipse orientations, plain), all four arrow variants, the
  layout options and each content side.
- Tooltip: adds the dark variant, all four sides, the delay options and
  InfoIconTooltip.
- Select: all six variants plus placeholder, dropdown icon, disabled and
  icon items, above the existing interactive demos.
- Table: all four variants, the chevron/menu/blank-row cell types, and
  static ids in place of crypto.randomUUID() at render time.
- Switch, Badge, InlineCode, SegmentedControl, Spinner and Shortcuts:
  rewritten to cover every variant, size and state.
- Smaller fills: TextLink's three variants, Checkbox button/small, Input
  secondary-small, InfoPanel info, DetailCell small, CopyableText
  text-below, DurationPicker medium, AnimatingArrow extra-large.

The agent gallery drops its own three-button theme toggle, now that the
header control covers all five themes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/routes/resources.account.mfa.setup/MfaDisableDialog.tsx

@@ -138,11 +138,7 @@ export function MfaDisableDialog({
             </Button>
             <Button type="submit" variant="primary/medium" disabled={isSubmitting}>
               {isSubmitting ? <Spinner className="mr-2 size-5" color="white" /> : null}
-              {isSubmitting ? (
-                <span>Disabling…</span>
-              ) : (
-                <span>Disable MFA</span>
-              )}
+              {isSubmitting ? <span>Disabling…</span> : <span>Disable MFA</span>}
             </Button>
           </DialogFooter>
         </Form>

apps/webapp/app/routes/storybook.accordion/route.tsx

@@ -10,7 +10,11 @@ import { StoryPage, StorySection } from "../storybook/StoryKit";
 
 export default function Story_() {
   return (
-    <StoryPage title="Accordion" description="Collapsible sections built on Radix Accordion.">
+    <StoryPage
+      componentNames={["Accordion.tsx"]}
+      title="Accordion"
+      description="Collapsible sections built on Radix Accordion."
+    >
       <StorySection title="Single, collapsible">
         <div className="max-w-xl rounded-sm border border-grid-dimmed p-2">
           <Accordion type="single" collapsible>

apps/webapp/app/routes/storybook.agent-investigation/route.tsx

@@ -83,5 +83,7 @@ const STATES: Record<string, React.ReactNode> = {
 };
 
 export default function Story() {
-  return <GalleryPage page="investigation" states={STATES} />;
+  return (
+    <GalleryPage page="investigation" states={STATES} componentNames={["InvestigationCard.tsx"]} />
+  );
 }

apps/webapp/app/routes/storybook.agent-report/route.tsx

@@ -28,5 +28,5 @@ const STATES: Record<string, React.ReactNode> = {
 };
 
 export default function Story() {
-  return <GalleryPage page="report" states={STATES} />;
+  return <GalleryPage page="report" states={STATES} componentNames={["ReportView.tsx"]} />;
 }

apps/webapp/app/routes/storybook.agent-ui/gallery.tsx

@@ -3,6 +3,7 @@ import { safeParseTriggerUri } from "@internal/dashboard-agent-contracts";
 import { Header1, Header2 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { cn } from "~/utils/cn";
+import { ComponentNames } from "../storybook/StoryKit";
 import {
   GALLERY_PAGES,
   groupsOnPage,
@@ -54,24 +55,6 @@ function Section({
   );
 }
 
-function ThemeToggle() {
-  return (
-    <div className="flex items-center gap-1.5">
-      {/* classic is still the default theme for most users, so it's in the pack */}
-      {(["classic", "dark", "light"] as const).map((theme) => (
-        <button
-          key={theme}
-          type="button"
-          onClick={() => document.documentElement.setAttribute("data-theme", theme)}
-          className="rounded border border-border-bright bg-background-bright px-2 py-1 text-xs text-text-dimmed transition hover:text-text-bright"
-        >
-          {theme}
-        </button>
-      ))}
-    </div>
-  );
-}
-
 function PageLinks({ page }: { page: GalleryPageId }) {
   return (
     <div className="flex flex-wrap gap-1.5">
@@ -120,9 +103,12 @@ function Nav({ page }: { page: GalleryPageId }) {
 export function GalleryPage({
   page,
   states,
+  componentNames,
 }: {
   page: GalleryPageId;
   states: Record<string, React.ReactNode>;
+  /** Component files this page covers, shown copyable under the title. */
+  componentNames?: string[];
 }) {
   const meta = GALLERY_PAGES.find((entry) => entry.id === page)!;
   const sections = sectionsOnPage(page);
@@ -134,8 +120,8 @@ export function GalleryPage({
         <div className="flex flex-col gap-2">
           <div className="flex items-baseline justify-between gap-4">
             <Header1>Trigger Agent — {meta.title}</Header1>
-            <ThemeToggle />
           </div>
+          {componentNames && componentNames.length > 0 && <ComponentNames names={componentNames} />}
           <PageLinks page={page} />
           <Paragraph variant="small">
             {meta.blurb} {sections.length} states, rendered in isolation at panel width (380px) from
@@ -145,8 +131,8 @@ export function GalleryPage({
           </Paragraph>
           <Paragraph variant="extra-small">
             Run ids, queues, errors and reports are fabricated. Deep links resolve inside a project,
-            so here they render as plain text or navigate nowhere. The theme buttons flip{" "}
-            <code className="font-mono text-xs">data-theme</code> on the root element.
+            so here they render as plain text or navigate nowhere. Use the theme control in the
+            storybook header to switch themes.
           </Paragraph>
         </div>
 

apps/webapp/app/routes/storybook.agent-ui/route.tsx

@@ -333,5 +333,15 @@ const STATES: Record<string, React.ReactNode> = {
 };
 
 export default function Story() {
-  return <GalleryPage page="chat" states={STATES} />;
+  return (
+    <GalleryPage
+      page="chat"
+      states={STATES}
+      componentNames={[
+        "DashboardAgentComposer.tsx",
+        "DashboardAgentMessages.tsx",
+        "DashboardAgentHero.tsx",
+      ]}
+    />
+  );
 }

apps/webapp/app/routes/storybook.agent-view-blocks/route.tsx

@@ -120,5 +120,11 @@ const STATES: Record<string, React.ReactNode> = {
 };
 
 export default function Story() {
-  return <GalleryPage page="view-blocks" states={STATES} />;
+  return (
+    <GalleryPage
+      page="view-blocks"
+      states={STATES}
+      componentNames={["AgentChart.tsx", "RunDiagnosisCard.tsx", "agent-card.tsx"]}
+    />
+  );
 }

apps/webapp/app/routes/storybook.agent-watch/route.tsx

@@ -120,5 +120,11 @@ const STATES: Record<string, React.ReactNode> = {
 };
 
 export default function Story() {
-  return <GalleryPage page="watch" states={STATES} />;
+  return (
+    <GalleryPage
+      page="watch"
+      states={STATES}
+      componentNames={["WatchCard.tsx", "WatchResultBlock.tsx", "WatchWakeToast.tsx"]}
+    />
+  );
 }

apps/webapp/app/routes/storybook.ai-agent/route.tsx

@@ -1,3 +1,4 @@
+import { ComponentNames } from "../storybook/StoryKit";
 import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { LogoIcon } from "~/components/LogoIcon";
 import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
@@ -26,6 +27,9 @@ import {
 export default function Story() {
   return (
     <div className="flex flex-col gap-4 p-6">
+      <div className="px-4 pt-4">
+        <ComponentNames names={["AgentDotMatrix.tsx"]} />
+      </div>
       <div className="flex max-w-3xl flex-col gap-1">
         <Header1>Trigger Agent — Icons & Buttons</Header1>
         <Paragraph variant="small">

apps/webapp/app/routes/storybook.animated-panel/route.tsx

@@ -1,3 +1,4 @@
+import { ComponentNames } from "../storybook/StoryKit";
 import { useState } from "react";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { Button } from "~/components/primitives/Buttons";
@@ -166,6 +167,9 @@ export default function Story() {
 
   return (
     <div className="h-full">
+      <div className="px-4 pt-4">
+        <ComponentNames names={["Resizable.tsx", "PropertyTable.tsx"]} />
+      </div>
       <ResizablePanelGroup orientation="horizontal" className="max-h-full">
         <ResizablePanel id="animated-panel-main" min="200px">
           <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden">