@invergent/agent-chat-react 2.19.0 → 2.19.1

package/dist/index.js

@@ -1,14 +1,14 @@
 import { cn, __publicField } from './chunk-47MF6JUW.js';
 import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, useLayoutEffect, lazy, useContext, Fragment as Fragment$1, Suspense, useSyncExternalStore, useId, Children } from 'react';
 import { Button } from '@invergent/ui-sdk/button';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@invergent/ui-sdk/dropdown-menu';
+import { Toggle, FilterPill } from '@invergent/ui-sdk/toggle';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ConfirmDialog } from '@invergent/ui-sdk/confirm-dialog';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@invergent/ui-sdk/dialog';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight as ChevronRight$1, RefreshCw, CreditCard, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, PlugZapIcon, ChevronRightIcon, ArrowLeftIcon, Loader2Icon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, UsersIcon, Pen, Eraser, Type, MousePointer2, Hand, Maximize2, Undo2, Redo2, CheckIcon, CopyIcon, DownloadIcon, Maximize2Icon, LaptopIcon, MessageSquareIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, ChevronLeftIcon, Trash2Icon, SquareIcon, ArrowDownIcon, FileIcon, TrashIcon, FileTextIcon, Minimize2Icon, XIcon, Clock, ArrowRight, ListTreeIcon, PenLineIcon, PaperclipIcon, CloudIcon, HardDriveIcon, IdCardIcon, PlusIcon, TerminalIcon, SparklesIcon, ClockIcon, ShrinkIcon, FolderOpenIcon, FolderIcon, ImageIcon, CircleDot, XCircle, CheckCircle2, GlobeIcon, SearchIcon, ZapIcon, PanelTopIcon, ArrowUpIcon, ThumbsUpIcon, ThumbsDownIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, LibraryIcon, ListTodoIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight as ChevronRight$1, RefreshCw, CreditCard, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, PlugZapIcon, ChevronRightIcon, ArrowLeftIcon, Loader2Icon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, Pen, Eraser, Type, MousePointer2, Hand, Maximize2, Undo2, Redo2, CheckIcon, CopyIcon, DownloadIcon, Maximize2Icon, LaptopIcon, MessageSquareIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, ChevronLeftIcon, Trash2Icon, SquareIcon, ArrowDownIcon, FileIcon, TrashIcon, FileTextIcon, Minimize2Icon, XIcon, Clock, ArrowRight, MinusIcon, PlusIcon, ListTreeIcon, PenLineIcon, PaperclipIcon, CloudIcon, HardDriveIcon, IdCardIcon, TerminalIcon, SparklesIcon, ClockIcon, ShrinkIcon, FolderOpenIcon, FolderIcon, ImageIcon, CircleDot, XCircle, CheckCircle2, GlobeIcon, SearchIcon, ZapIcon, PanelTopIcon, ArrowUpIcon, ThumbsUpIcon, ThumbsDownIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, LibraryIcon, ListTodoIcon, XCircleIcon, CheckCircle2Icon, Code, CircleCheckIcon, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
-import { cva } from 'class-variance-authority';
-import { Progress as Progress$1, Dialog as Dialog$1, Slot } from 'radix-ui';
-import '@invergent/ui-sdk/separator';
+import { ButtonGroup } from '@invergent/ui-sdk/button-group';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@invergent/ui-sdk/tooltip';
 import { cjk } from '@streamdown/cjk';
 import { code } from '@streamdown/code';
@@ -18,29 +18,46 @@ import { defaultRehypePlugins, Streamdown } from 'streamdown';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@invergent/ui-sdk/collapsible';
 import { ThinkingOrb } from 'thinking-orbs';
+import { Timeline, TimelineItem, TimelineHeader, TimelineSeparator, TimelineIndicator, TimelineContent } from '@invergent/ui-sdk/timeline';
+import { CollapsibleHeader } from '@invergent/ui-sdk/collapsible-header';
 import { ScrollArea } from '@invergent/ui-sdk/scroll-area';
 import '@invergent/ui-sdk/select';
 import { createHighlighter } from 'shiki';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@invergent/ui-sdk/tabs';
-import { Badge } from '@invergent/ui-sdk/badge';
+import { TagPill, TonePill, TONE, Chip } from '@invergent/ui-sdk/chip';
+import { TextLink } from '@invergent/ui-sdk/text-link';
 import { diffLines, diffWordsWithSpace } from 'diff';
 import AnsiImport from 'ansi-to-react';
 import { Textarea } from '@invergent/ui-sdk/textarea';
+import { ChoiceCard, choiceCardVariants } from '@invergent/ui-sdk/choice-card';
 import { Input } from '@invergent/ui-sdk/input';
-import { Command as Command$1 } from 'cmdk';
+import { Command, CommandList, CommandGroup, CommandItem, CommandEmpty } from '@invergent/ui-sdk/command';
+import '@invergent/ui-sdk/hover-card';
 import { InputGroupButton, InputGroup, InputGroupTextarea, InputGroupAddon } from '@invergent/ui-sdk/input-group';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@invergent/ui-sdk/dropdown-menu';
 import { Spinner } from '@invergent/ui-sdk/spinner';
 import { nanoid } from 'nanoid';
 import { BrandBeam } from '@invergent/ui-sdk/brand-beam';
 export { BrandBeam } from '@invergent/ui-sdk/brand-beam';
+import { ProgressBar } from '@invergent/ui-sdk/progress-bar';
 import 'tokenlens';
-import { Popover, PopoverAnchor, PopoverTrigger, PopoverContent } from '@invergent/ui-sdk/popover';
+import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions } from '@invergent/ui-sdk/item';
+import { Popover, PopoverAnchor, PopoverContent } from '@invergent/ui-sdk/popover';
+import { ResponsivePanel } from '@invergent/ui-sdk/responsive-panel';
+import { Command as Command$1 } from 'cmdk';
 import { Skeleton } from '@invergent/ui-sdk/skeleton';
+import { ListRow, listRowVariants } from '@invergent/ui-sdk/list-row';
+import { Alert, AlertTitle, AlertDescription, AlertAction } from '@invergent/ui-sdk/alert';
 import { Checkbox } from '@invergent/ui-sdk/checkbox';
 import { Label } from '@invergent/ui-sdk/label';
+import { SegmentedControl } from '@invergent/ui-sdk/segmented-control';
+import { RabbitMark, RABBIT_MARK_BOX, RABBIT_MARK_PATH } from '@invergent/ui-sdk/rabbit-mark';
+import { ViewSwitch, ToggleGroup, ToggleGroupItem } from '@invergent/ui-sdk/toggle-group';
 import { useTheme } from 'next-themes';
+import { EmptyState } from '@invergent/ui-sdk/empty-state';
+import { SectionLabel } from '@invergent/ui-sdk/section-label';
+import { CONTROL_FIELD, CONTROL_OPTION } from '@invergent/ui-sdk/control-styles';
 import { formatDistanceToNow } from 'date-fns';
+import { Badge } from '@invergent/ui-sdk/badge';
 import { Card, CardContent, CardHeader, CardTitle, CardAction } from '@invergent/ui-sdk/card';
 
 var AgentChatAdapterContext = createContext(null);
@@ -174,7 +191,6 @@ function BrowserShell({
   const [frame, setFrame] = useState(null);
   const [tabs, setTabs] = useState([]);
   const [nav, setNav] = useState({ url: "", title: "" });
-  const [menuOpen, setMenuOpen] = useState(false);
   const [address, setAddress] = useState("");
   const editingRef = useRef(false);
   useEffect(() => {
@@ -329,15 +345,14 @@ function BrowserShell({
             }
           ),
           (onToggleControl || hasControl) && /* @__PURE__ */ jsx(
-            Button,
+            Toggle,
             {
-              type: "button",
-              variant: hasControl ? "default" : "ghost",
-              size: "icon-xs",
+              size: "sm",
               "data-testid": "browser-shell-control",
               "aria-label": hasControl ? "Return control" : "Take control",
-              "aria-pressed": hasControl,
-              onClick: onToggleControl,
+              pressed: hasControl,
+              onPressedChange: () => onToggleControl?.(),
+              className: "size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0",
               children: /* @__PURE__ */ jsx(Pointer, {})
             }
           ),
@@ -386,51 +401,12 @@ function BrowserShell({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon-xs",
-                "aria-label": "More",
-                onClick: () => setMenuOpen((open) => !open),
-                children: /* @__PURE__ */ jsx(Ellipsis, {})
-              }
-            ),
-            menuOpen && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-testid": "browser-shell-menu",
-                className: "absolute right-0 top-8 z-10 min-w-36 rounded-md border border-line bg-card py-1 text-xs shadow-md",
-                children: [
-                  onMaximize && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "block w-full px-3 py-1.5 text-left hover:bg-secondary",
-                      onClick: () => {
-                        setMenuOpen(false);
-                        onMaximize();
-                      },
-                      children: "Maximize"
-                    }
-                  ),
-                  onClose && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "block w-full px-3 py-1.5 text-left hover:bg-secondary",
-                      onClick: () => {
-                        setMenuOpen(false);
-                        onClose();
-                      },
-                      children: "Close browser"
-                    }
-                  )
-                ]
-              }
-            )
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": "More", children: /* @__PURE__ */ jsx(Ellipsis, {}) }) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { "data-testid": "browser-shell-menu", align: "end", children: [
+              onMaximize && /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: onMaximize, children: "Maximize" }),
+              onClose && /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: onClose, children: "Close browser" })
+            ] })
           ] })
         ] }),
         showTabs && /* @__PURE__ */ jsx(
@@ -867,36 +843,6 @@ var ConversationScrollButton = ({
     }
   );
 };
-var buttonGroupVariants = cva(
-  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
-  {
-    variants: {
-      orientation: {
-        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
-        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!"
-      }
-    },
-    defaultVariants: {
-      orientation: "horizontal"
-    }
-  }
-);
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "button-group",
-      "data-orientation": orientation,
-      className: cn(buttonGroupVariants({ orientation }), className),
-      ...props
-    }
-  );
-}
 var streamdownRehypePlugins = Object.entries(defaultRehypePlugins).map(([name, plugin]) => {
   if (name !== "harden" || !Array.isArray(plugin)) return plugin;
   const [harden, options] = plugin;
@@ -1203,128 +1149,6 @@ var ReasoningContent = memo(
 Reasoning.displayName = "Reasoning";
 ReasoningTrigger.displayName = "ReasoningTrigger";
 ReasoningContent.displayName = "ReasoningContent";
-var TimelineContext = createContext(
-  void 0
-);
-var useTimeline = () => {
-  const context = useContext(TimelineContext);
-  if (!context) {
-    throw new Error("useTimeline must be used within a Timeline");
-  }
-  return context;
-};
-function Timeline({
-  defaultValue = 1,
-  value,
-  onValueChange,
-  orientation = "vertical",
-  className,
-  children,
-  ...props
-}) {
-  const [activeStep, setInternalStep] = useState(defaultValue);
-  const setActiveStep = useCallback(
-    (step) => {
-      if (value === void 0) {
-        setInternalStep(step);
-      }
-      onValueChange?.(step);
-    },
-    [value, onValueChange]
-  );
-  const currentStep = value ?? activeStep;
-  return /* @__PURE__ */ jsx(
-    TimelineContext.Provider,
-    {
-      value: { activeStep: currentStep, setActiveStep },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "group/timeline flex flex-col",
-            className
-          ),
-          "data-orientation": orientation,
-          "data-slot": "timeline",
-          ...props,
-          children
-        }
-      )
-    }
-  );
-}
-function TimelineContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("text-foreground text-sm min-w-0 overflow-hidden", className),
-      "data-slot": "timeline-content",
-      ...props
-    }
-  );
-}
-function TimelineHeader({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("div", { className: cn(className), "data-slot": "timeline-header", ...props });
-}
-function TimelineIndicator({
-  asChild = false,
-  className,
-  children,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 top-1.25 -left-6 -translate-x-1/2",
-        className
-      ),
-      "data-slot": "timeline-indicator",
-      ...props,
-      children
-    }
-  );
-}
-function TimelineItem({ step, className, ...props }) {
-  const { activeStep } = useTimeline();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-col gap-0.5 ms-8 not-last:pb-6",
-        className
-      ),
-      "data-completed": step <= activeStep || void 0,
-      "data-slot": "timeline-item",
-      ...props
-    }
-  );
-}
-function TimelineSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: cn(
-        "bg-primary/10 absolute self-start group-last/timeline-item:hidden -left-6 h-[calc(100%-1rem-0.25rem)] w-0.5 -translate-x-1/2 translate-y-4.5",
-        className
-      ),
-      "data-slot": "timeline-separator",
-      ...props
-    }
-  );
-}
 
 // src/runtime/orb-state.ts
 var ORB_STATE_LABELS = {
@@ -1645,10 +1469,11 @@ function toolErrorSummary(result, max = 180) {
 function CopyButton({ text }) {
   const [copied, setCopied] = useState(false);
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
-      className: "shrink-0 p-0.5 rounded opacity-0 group-hover/in:opacity-100 transition-opacity text-muted-foreground hover:text-foreground",
+      variant: "ghost",
+      size: "icon-xs",
+      className: "opacity-0 text-muted-foreground hover:text-foreground group-hover/in:opacity-100 focus-visible:opacity-100",
       onClick: (e) => {
         e.stopPropagation();
         void navigator.clipboard.writeText(text).then(() => {
@@ -1710,18 +1535,7 @@ function TerminalCollapsible({ command, output, isRunning, hasError }) {
       onOpenChange: setIsOpen,
       className: "not-prose w-full",
       children: [
-        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group/trigger flex w-fit items-center gap-2 text-sm transition-colors", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-left", children: isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", duration: 1, children: "Running command..." }) : hasError ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-destructive", children: "Command failed" }) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Command" }) }),
-          /* @__PURE__ */ jsx(
-            ChevronDownIcon,
-            {
-              className: cn(
-                "size-4 shrink-0 transition-transform",
-                isOpen ? "rotate-180" : "rotate-0"
-              )
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx(CollapsibleHeader, { className: "-ml-2 w-fit max-w-full", children: isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", duration: 1, children: "Running command..." }) : hasError ? /* @__PURE__ */ jsx("span", { className: "font-medium text-destructive", children: "Command failed" }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Command" }) }),
         /* @__PURE__ */ jsx(
           CollapsibleContent,
           {
@@ -1845,28 +1659,13 @@ var QueueList = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ jsx(ScrollArea, { className: cn("mt-2 -mb-1", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "max-h-40 pr-4", children: /* @__PURE__ */ jsx("ul", { children }) }) });
+}) => /* @__PURE__ */ jsx(ScrollArea, { className, ...props, children: /* @__PURE__ */ jsx("div", { className: "max-h-40 pr-4", children: /* @__PURE__ */ jsx("ul", { children }) }) });
 var QueueSection = ({
   className,
   defaultOpen = true,
   ...props
 }) => /* @__PURE__ */ jsx(Collapsible, { className: cn(className), defaultOpen, ...props });
-var QueueSectionTrigger = ({
-  children,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-  "button",
-  {
-    className: cn(
-      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
-      className
-    ),
-    type: "button",
-    ...props,
-    children
-  }
-) });
+var QueueSectionTrigger = (props) => /* @__PURE__ */ jsx(CollapsibleHeader, { variant: "section", ...props });
 var QueueSectionLabel = ({
   count,
   label,
@@ -1874,7 +1673,6 @@ var QueueSectionLabel = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2", className), ...props, children: [
-  /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=closed]:-rotate-90" }),
   icon,
   /* @__PURE__ */ jsxs("span", { children: [
     count,
@@ -1885,12 +1683,18 @@ var QueueSectionLabel = ({
 var QueueSectionContent = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn(className), ...props });
+}) => /* @__PURE__ */ jsx(
+  CollapsibleContent,
+  {
+    className: cn("border-t border-foreground/[0.08] p-1.5", className),
+    ...props
+  }
+);
 var Queue = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      "flex flex-col overflow-hidden rounded-[10px] border border-foreground/[0.08] bg-background",
       className
     ),
     ...props
@@ -2228,7 +2032,7 @@ var CodeBlockCopyButton = ({
   );
 };
 var statusLabels = {
-  "approval-requested": "Awaiting Approval",
+  "approval-requested": "Awaiting approval",
   "approval-responded": "Responded",
   "input-available": "Running",
   "input-streaming": "Pending",
@@ -2236,16 +2040,25 @@ var statusLabels = {
   "output-denied": "Denied",
   "output-error": "Error"
 };
+var statusTones = {
+  "approval-requested": "warn",
+  "approval-responded": "muted",
+  "input-available": "muted",
+  "input-streaming": "muted",
+  "output-available": "ok",
+  "output-denied": "warn",
+  "output-error": "bad"
+};
 var statusIcons = {
-  "approval-requested": /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 text-yellow-600" }),
-  "approval-responded": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-blue-600" }),
-  "input-available": /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 animate-pulse" }),
-  "input-streaming": /* @__PURE__ */ jsx(CircleIcon, { className: "size-4" }),
-  "output-available": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-green-600" }),
-  "output-denied": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-orange-600" }),
-  "output-error": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-red-600" })
+  "approval-requested": /* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }),
+  "approval-responded": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-3" }),
+  "input-available": /* @__PURE__ */ jsx(ClockIcon, { className: "size-3 animate-pulse" }),
+  "input-streaming": /* @__PURE__ */ jsx(CircleIcon, { className: "size-3" }),
+  "output-available": /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-3" }),
+  "output-denied": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3" }),
+  "output-error": /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3" })
 };
-var getStatusBadge = (status) => /* @__PURE__ */ jsxs(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [
+var getStatusBadge = (status) => /* @__PURE__ */ jsxs(TonePill, { tone: statusTones[status], children: [
   statusIcons[status],
   statusLabels[status]
 ] });
@@ -2253,7 +2066,7 @@ var Sandbox = ({ className, ...props }) => /* @__PURE__ */ jsx(
   Collapsible,
   {
     className: cn(
-      "not-prose group mb-4 w-full overflow-hidden rounded-md border border-foreground/20",
+      "not-prose mb-4 w-full overflow-hidden rounded-[10px] border border-foreground/[0.08]",
       className
     ),
     defaultOpen: true,
@@ -2265,22 +2078,17 @@ var SandboxHeader = ({
   title,
   state,
   ...props
-}) => /* @__PURE__ */ jsxs(
-  CollapsibleTrigger,
+}) => /* @__PURE__ */ jsx(
+  CollapsibleHeader,
   {
-    className: cn(
-      "flex w-full items-center justify-between gap-4 p-3",
-      className
-    ),
+    variant: "section",
+    icon: Code,
+    className,
     ...props,
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Code, { className: "size-4 text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: title }),
-        getStatusBadge(state)
-      ] }),
-      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
-    ]
+    children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+      title,
+      getStatusBadge(state)
+    ] })
   }
 );
 var SandboxContent = ({
@@ -2304,7 +2112,7 @@ var SandboxTabsBar = ({
   "div",
   {
     className: cn(
-      "flex w-full items-center border-border border-t border-b",
+      "flex w-full items-center border-foreground/[0.08] border-t border-b px-2 py-1.5",
       className
     ),
     ...props
@@ -2313,26 +2121,11 @@ var SandboxTabsBar = ({
 var SandboxTabsList = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  TabsList,
-  {
-    className: cn("h-auto rounded-none border-0 bg-transparent p-0", className),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ jsx(TabsList, { variant: "line", className, ...props });
 var SandboxTabsTrigger = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  TabsTrigger,
-  {
-    className: cn(
-      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
-      className
-    ),
-    ...props
-  }
-);
+}) => /* @__PURE__ */ jsx(TabsTrigger, { className, ...props });
 var SandboxTabContent = ({
   className,
   ...props
@@ -2783,11 +2576,12 @@ function CollapsedBlock({
   return /* @__PURE__ */ jsxs("div", { className: "flex text-sm leading-5 bg-muted/30 border-y border-border/30", children: [
     /* @__PURE__ */ jsx("span", { className: "w-10 shrink-0" }),
     /* @__PURE__ */ jsxs(
-      "button",
+      Button,
       {
-        type: "button",
+        variant: "ghost",
+        size: "xs",
         onClick: onExpand,
-        className: "flex-1 text-left px-3 py-0.5 text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer",
+        className: "flex-1 justify-start rounded-none font-normal text-muted-foreground hover:text-foreground",
         children: [
           "\u2195 ",
           count,
@@ -2929,15 +2723,7 @@ function FileNameWithTooltip({
   const display = displayPath(filePath);
   const name = fileName(filePath);
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: onFileSelect ? /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onFileSelect(filePath),
-        className: "text-primary hover:underline truncate text-left cursor-pointer underline",
-        children: name
-      }
-    ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: name }) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: onFileSelect ? /* @__PURE__ */ jsx(TextLink, { size: "inline", asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onFileSelect(filePath), className: "truncate text-left", children: name }) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: name }) }),
     /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: display })
   ] });
 }
@@ -3355,17 +3141,14 @@ function truncateCommand(cmd, max = 80) {
 }
 function StatusBadge({ status, exitCode }) {
   if (status === "running") {
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400", children: [
+    return /* @__PURE__ */ jsxs(TonePill, { tone: "ok", children: [
       /* @__PURE__ */ jsx(CircleDotIcon, { className: "size-3 animate-pulse" }),
       "running"
     ] });
   }
   if (status === "exited") {
     const ok = exitCode === 0;
-    return /* @__PURE__ */ jsxs("span", { className: cn(
-      "inline-flex items-center gap-1 text-xs font-medium",
-      ok ? "text-muted-foreground" : "text-red-500 dark:text-red-400"
-    ), children: [
+    return /* @__PURE__ */ jsxs(TonePill, { tone: ok ? "muted" : "bad", children: [
       ok ? /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(CircleXIcon, { className: "size-3" }),
       "exited(",
       exitCode ?? "?",
@@ -3373,24 +3156,24 @@ function StatusBadge({ status, exitCode }) {
     ] });
   }
   if (status === "killed") {
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-orange-500 dark:text-orange-400", children: [
+    return /* @__PURE__ */ jsxs(TonePill, { tone: "bad", children: [
       /* @__PURE__ */ jsx(SkullIcon, { className: "size-3" }),
       "killed"
     ] });
   }
   if (status === "timeout") {
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-amber-500 dark:text-amber-400", children: [
+    return /* @__PURE__ */ jsxs(TonePill, { tone: "warn", children: [
       /* @__PURE__ */ jsx(ClockIcon, { className: "size-3" }),
       "timeout"
     ] });
   }
   if (status === "interrupted") {
-    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-amber-500 dark:text-amber-400", children: [
+    return /* @__PURE__ */ jsxs(TonePill, { tone: "warn", children: [
       /* @__PURE__ */ jsx(CircleXIcon, { className: "size-3" }),
       "interrupted"
     ] });
   }
-  return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground", children: status });
+  return /* @__PURE__ */ jsx(TonePill, { children: status });
 }
 function ProcessListView({ processes }) {
   if (processes.length === 0) {
@@ -3662,36 +3445,16 @@ function ExpertToolBlock({ tc }) {
   const question = args.question ?? args.prompt ?? "";
   const result = parseExpertResult(tc.result);
   const failed = Boolean(result?.error);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setExpanded(!expanded),
-        className: cn(
-          "flex w-fit max-w-full items-center gap-1.5 rounded-md px-0 py-0.5",
-          "text-sm text-muted-foreground hover:text-foreground transition-colors"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            ChevronRightIcon,
-            {
-              className: cn(
-                "size-3 shrink-0 transition-transform duration-150",
-                expanded && "rotate-90"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Consulted expert" }),
-          expertName && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-            "\xB7 ",
-            expertName
-          ] }),
-          failed && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "\xB7 failed" })
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ jsxs("div", { className: "ml-6 mt-0.5 space-y-1.5 text-sm", children: [
+  return /* @__PURE__ */ jsxs(Collapsible, { open: expanded, onOpenChange: setExpanded, className: "space-y-1", children: [
+    /* @__PURE__ */ jsx(CollapsibleHeader, { className: "-ml-2 w-fit max-w-full", children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-foreground", children: "Consulted expert" }),
+      expertName && /* @__PURE__ */ jsxs("span", { className: "truncate text-muted-foreground", children: [
+        "\xB7 ",
+        expertName
+      ] }),
+      failed && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-red-500", children: "\xB7 failed" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CollapsibleContent, { className: "ml-6 mt-0.5 space-y-1.5 text-sm", children: [
       question && /* @__PURE__ */ jsx(ExpertDetail, { label: "Question", content: question }),
       result?.summary && /* @__PURE__ */ jsx(
         ExpertDetail,
@@ -4049,25 +3812,20 @@ function QuickReply({
   disabled,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      disabled,
-      onClick: onSelect,
-      className: cn(
-        "border border-border bg-background text-left text-foreground transition-colors",
-        "hover:border-foreground/30 hover:bg-muted",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        stacked ? "rounded-md px-3 py-2" : "rounded-full px-3.5 py-1.5 text-sm"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: cn("block", stacked && "text-sm"), children: choice.label }),
-        stacked && choice.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: choice.description })
-      ]
-    }
-  );
+  if (stacked) {
+    return /* @__PURE__ */ jsx(
+      ChoiceCard,
+      {
+        size: "sm",
+        selected: false,
+        title: choice.label,
+        description: choice.description,
+        disabled,
+        onClick: onSelect
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled, onClick: onSelect, children: choice.label });
 }
 function BatchAsk({
   tc,
@@ -4183,74 +3941,68 @@ function BatchAsk({
       role: "group",
       "aria-label": "Questions for the user",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 pt-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 overflow-x-auto text-sm", children: questions.map((_, i) => {
-            const isActive = i === active;
-            const answered = answers[i] !== null;
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setActive(i),
-                className: cn(
-                  "relative pb-2 transition-colors whitespace-nowrap",
-                  isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    "Question ",
-                    i + 1
-                  ] }),
-                  answered && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-emerald-500", children: "\u25CF" }),
-                  isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-px bg-foreground" })
-                ]
-              },
-              i
-            );
-          }) }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon-xs",
-              onClick: handleCancel,
-              className: "ml-2",
-              "aria-label": "Cancel clarification and stop chat",
-              title: "Esc \u2014 cancel and stop the chat",
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-3 pt-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: current.prompt }) }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-3 px-1 pb-2", children: [
-          (current.choices ?? []).map((choice, i) => /* @__PURE__ */ jsx(
-            ChoiceRow,
-            {
-              choice,
-              selected: currentSel.index === i,
-              onSelect: () => selectChoice(i)
-            },
-            i
-          )),
-          (current.allow_other ?? true) && /* @__PURE__ */ jsx(
-            OtherRow,
-            {
-              selected: currentSel.index >= OTHER_INDEX_OFFSET,
-              value: currentSel.other,
-              onSelect: () => updateSelection({ index: OTHER_INDEX_OFFSET }),
-              onChange: (v) => updateSelection({ index: OTHER_INDEX_OFFSET, other: v }),
-              onCommit: () => {
-                if (allAnswered) void handleSubmit();
-                else advance();
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs("span", { className: "mr-2 tabular-nums", children: [
-              answeredCount,
+        /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            value: String(active),
+            onValueChange: (value) => setActive(Number(value)),
+            className: "gap-0",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2", children: [
+                /* @__PURE__ */ jsx(TabsList, { variant: "line", className: "no-scrollbar max-w-full overflow-x-auto", children: questions.map((_, i) => /* @__PURE__ */ jsxs(TabsTrigger, { value: String(i), children: [
+                  "Question ",
+                  i + 1,
+                  answers[i] !== null && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-emerald-500", children: "\u25CF" })
+                ] }, i)) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-xs",
+                    onClick: handleCancel,
+                    "aria-label": "Cancel clarification and stop chat",
+                    title: "Esc \u2014 cancel and stop the chat",
+                    children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(TabsContent, { value: String(active), children: [
+                /* @__PURE__ */ jsx("div", { className: "px-3 pt-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: current.prompt }) }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-1.5 px-3 pb-3", children: [
+                  (current.choices ?? []).map((choice, i) => /* @__PURE__ */ jsx(
+                    ChoiceCard,
+                    {
+                      size: "sm",
+                      selected: currentSel.index === i,
+                      title: choice.label,
+                      description: choice.description,
+                      onClick: () => selectChoice(i)
+                    },
+                    i
+                  )),
+                  (current.allow_other ?? true) && /* @__PURE__ */ jsx(
+                    OtherRow,
+                    {
+                      selected: currentSel.index >= OTHER_INDEX_OFFSET,
+                      value: currentSel.other,
+                      onSelect: () => updateSelection({ index: OTHER_INDEX_OFFSET }),
+                      onChange: (v) => updateSelection({ index: OTHER_INDEX_OFFSET, other: v }),
+                      onCommit: () => {
+                        if (allAnswered) void handleSubmit();
+                        else advance();
+                      }
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "mr-2 tabular-nums", children: [
+              answeredCount,
               " of ",
               questions.length,
               " answered"
@@ -4273,30 +4025,6 @@ function BatchAsk({
     }
   );
 }
-function ChoiceRow({
-  choice,
-  selected,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: onSelect,
-      className: cn(
-        "flex w-full items-start gap-3 rounded px-2 py-1.5 text-left transition-colors",
-        selected ? "bg-muted" : "hover:bg-muted/40"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Radio, { selected }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children: choice.label }),
-          choice.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: choice.description })
-        ] })
-      ]
-    }
-  );
-}
 function OtherRow({
   selected,
   value,
@@ -4308,55 +4036,33 @@ function OtherRow({
     "div",
     {
       className: cn(
-        "flex items-start gap-3 rounded px-2 py-1.5 transition-colors",
-        selected ? "bg-muted" : "hover:bg-muted/40"
+        choiceCardVariants({ size: "sm", selected }),
+        "cursor-pointer flex-col gap-1.5 sm:gap-1.5"
       ),
+      onClick: onSelect,
       children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[14px] font-medium text-foreground sm:text-[13px]", children: "Other" }),
         /* @__PURE__ */ jsx(
-          "button",
+          Input,
           {
-            type: "button",
-            onClick: onSelect,
-            className: "flex shrink-0 items-center pt-0.5",
-            "aria-label": "Choose Other",
-            children: /* @__PURE__ */ jsx(Radio, { selected })
+            "aria-label": "Other answer",
+            placeholder: "Type your answer\u2026",
+            value,
+            onFocus: onSelect,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && value.trim()) {
+                e.preventDefault();
+                onCommit();
+              }
+            },
+            className: "h-8 text-[13px]"
           }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children: "Other" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              placeholder: "Type your answer\u2026",
-              value,
-              onFocus: onSelect,
-              onChange: (e) => onChange(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && value.trim()) {
-                  e.preventDefault();
-                  onCommit();
-                }
-              },
-              className: "mt-0.5 h-7 px-0 text-xs"
-            }
-          )
-        ] })
+        )
       ]
     }
   );
 }
-function Radio({ selected }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: cn(
-        "mt-[3px] size-3.5 shrink-0 rounded-full border",
-        selected ? "border-foreground bg-foreground" : "border-muted-foreground/60 bg-transparent"
-      )
-    }
-  );
-}
 function BatchAskLocked({
   tc,
   questions,
@@ -4469,28 +4175,17 @@ function MemoryToolBlock({ tc }) {
   const targetLabel = TARGET_LABEL[target] ?? target;
   const failed = result?.success === false || !!result?.error;
   return /* @__PURE__ */ jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: "not-prose w-full", children: [
-    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group/trigger flex w-fit items-center gap-2 text-sm transition-colors", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-left", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: verb }),
+    /* @__PURE__ */ jsx(CollapsibleHeader, { className: "-ml-2 w-fit max-w-full", children: /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: verb }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        prep,
         " ",
-        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-          prep,
-          " ",
-          targetLabel
-        ] }),
-        result?.usage && !failed && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 ml-1.5 text-xs", children: result.usage }),
-        failed && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1.5", children: "\xB7 failed" })
+        targetLabel
       ] }),
-      /* @__PURE__ */ jsx(
-        ChevronDownIcon,
-        {
-          className: cn(
-            "size-4 shrink-0 transition-transform",
-            isOpen ? "rotate-180" : "rotate-0"
-          )
-        }
-      )
-    ] }),
+      result?.usage && !failed && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 ml-1.5 text-xs", children: result.usage }),
+      failed && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1.5", children: "\xB7 failed" })
+    ] }) }),
     /* @__PURE__ */ jsx(
       CollapsibleContent,
       {
@@ -4629,35 +4324,14 @@ function StatusIcon({ tc }) {
   return /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-3.5 text-emerald-500" });
 }
 function DefaultToolBlock({ tc }) {
-  const [expanded, setExpanded] = useState(false);
   const summary = toolSummary(tc);
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/60 bg-muted/20 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setExpanded(!expanded),
-        className: cn(
-          "flex w-full items-center gap-2 px-3 py-2",
-          "text-sm hover:bg-muted/40 transition-colors cursor-pointer"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(StatusIcon, { tc }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: toolLabel(tc.toolName) }),
-          summary && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 truncate text-xs flex-1 text-left", children: summary }),
-          /* @__PURE__ */ jsx(
-            ChevronRightIcon,
-            {
-              className: cn(
-                "size-3.5 shrink-0 text-muted-foreground/50 transition-transform duration-150 ml-auto",
-                expanded && "rotate-90"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 px-3 py-2 space-y-2", children: [
+  return /* @__PURE__ */ jsxs(Collapsible, { className: "overflow-hidden rounded-[10px] border border-foreground/[0.08]", children: [
+    /* @__PURE__ */ jsx(CollapsibleHeader, { variant: "section", children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(StatusIcon, { tc }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0", children: toolLabel(tc.toolName) }),
+      summary && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs font-normal text-muted-foreground/70", children: summary })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CollapsibleContent, { className: "space-y-2 border-t border-foreground/[0.08] px-3 py-2", children: [
       /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground font-mono whitespace-pre-wrap break-all", children: formatArgs(tc.args) }),
       tc.result && /* @__PURE__ */ jsxs("pre", { className: "overflow-x-auto rounded-md bg-muted/50 px-3 py-2 text-xs font-mono whitespace-pre-wrap break-all max-h-48 overflow-y-auto", children: [
         /* @__PURE__ */ jsx("span", { className: "text-emerald-600 dark:text-emerald-400 font-semibold", children: "Result" }),
@@ -4728,18 +4402,7 @@ function CodeRunToolBlock({
       onOpenChange: setIsOpen,
       className: "not-prose w-full",
       children: [
-        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "group/trigger flex w-fit items-center gap-2 text-sm transition-colors", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-left", children: isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", duration: 1, children: `Running ${label}...` }) : hasError ? /* @__PURE__ */ jsx("span", { className: "font-semibold text-destructive", children: `${label} failed` }) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: `Ran ${label}` }) }),
-          /* @__PURE__ */ jsx(
-            ChevronDownIcon,
-            {
-              className: cn(
-                "size-4 shrink-0 transition-transform",
-                isOpen ? "rotate-180" : "rotate-0"
-              )
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx(CollapsibleHeader, { className: "-ml-2 w-fit max-w-full", children: isRunning ? /* @__PURE__ */ jsx(Shimmer, { as: "span", duration: 1, children: `Running ${label}...` }) : hasError ? /* @__PURE__ */ jsx("span", { className: "font-medium text-destructive", children: `${label} failed` }) : /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: `Ran ${label}` }) }),
         /* @__PURE__ */ jsx(
           CollapsibleContent,
           {
@@ -5417,88 +5080,6 @@ function renderInlineMarkdown(text) {
     }
   });
 }
-function Command({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1,
-    {
-      "data-slot": "command",
-      className: cn(
-        "flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandList({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1.List,
-    {
-      "data-slot": "command-list",
-      className: cn(
-        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandEmpty({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1.Empty,
-    {
-      "data-slot": "command-empty",
-      className: cn("py-6 text-center text-sm", className),
-      ...props
-    }
-  );
-}
-function CommandGroup({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Command$1.Group,
-    {
-      "data-slot": "command-group",
-      className: cn(
-        "overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:mb-1 **:[[cmdk-group-heading]]:rounded-sm **:[[cmdk-group-heading]]:bg-orange-100 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground dark:**:[[cmdk-group-heading]]:bg-orange-400/40 dark:**:[[cmdk-group-heading]]:text-foreground/90",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Command$1.Item,
-    {
-      "data-slot": "command-item",
-      className: cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[selected=true]:*:[svg]:text-foreground",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })
-      ]
-    }
-  );
-}
 var convertBlobUrlToDataUrl = async (url) => {
   try {
     const response = await fetch(url);
@@ -6203,31 +5784,6 @@ function splitComposerFiles(files) {
   }
   return { images, pending };
 }
-function Progress({
-  className,
-  value,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Progress$1.Root,
-    {
-      "data-slot": "progress",
-      className: cn(
-        "relative flex h-0.5 w-full items-center overflow-x-hidden rounded-none bg-muted",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        Progress$1.Indicator,
-        {
-          "data-slot": "progress-indicator",
-          className: "size-full flex-1 bg-primary transition-all",
-          style: { transform: `translateX(-${100 - (value || 0)}%)` }
-        }
-      )
-    }
-  );
-}
 var PERCENT_MAX = 100;
 var NEARLY_FULL = 0.9;
 var ICON_RADIUS = 10;
@@ -6342,20 +5898,9 @@ var ContextContentHeader = ({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      Progress,
+      ProgressBar,
       {
-        className: cn(
-          // The primitive only clips its x-axis, which leaves the fill's
-          // square end poking out of the pill at both ends.
-          "h-1 overflow-hidden rounded-full bg-muted",
-          // Amber, not `bg-primary`: primary is the host app's colour, and
-          // the two hosts disagree — the agent web app is amber, Studio is
-          // near-black — so the same bar came out black beside a Send
-          // button the composer hardcodes amber. This is the composer's
-          // own accent, so it reads the same wherever it is embedded.
-          "[&>[data-slot=progress-indicator]]:bg-amber-500",
-          nearlyFull && "[&>[data-slot=progress-indicator]]:bg-destructive"
-        ),
+        color: nearlyFull ? "var(--destructive)" : "var(--color-amber-500)",
         value: usedPercent * PERCENT_MAX
       }
     )
@@ -6366,230 +5911,38 @@ var ContextContentBody = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx("div", { className: cn("w-full space-y-1.5 px-3 py-2.5", className), ...props, children });
-var itemVariants = cva(
-  "group/item flex w-full flex-wrap items-center rounded-none border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent",
-        outline: "border-border",
-        muted: "border-transparent bg-muted/50"
-      },
-      size: {
-        default: "gap-3.5 px-4 py-3.5",
-        sm: "gap-3.5 px-3.5 py-3",
-        xs: "gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Item({
-  className,
-  variant = "default",
-  size: size2 = "default",
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "item",
-      "data-variant": variant,
-      "data-size": size2,
-      className: cn(itemVariants({ variant, size: size2, className })),
-      ...props
-    }
-  );
-}
-var itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "[&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-none [&_img]:size-full [&_img]:object-cover"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function ItemMedia({
-  className,
-  variant = "default",
-  ...props
+var SEARCH_PLACEHOLDER = {
+  commands: "Search commands\u2026",
+  skills: "Search skills\u2026",
+  scheduled: "Search scheduled tasks\u2026",
+  all: "Type a command or search\u2026"
+};
+var NAV_HINT = "\u2191\u2193 navigate   \xB7   Enter select   \xB7   Esc dismiss";
+var SEARCH_HINT = {
+  commands: NAV_HINT,
+  skills: "Esc dismiss",
+  scheduled: NAV_HINT,
+  all: NAV_HINT
+};
+var NAME_COLUMNS = "grid-cols-[120px_minmax(0,1fr)] sm:grid-cols-[200px_minmax(0,1fr)]";
+var ROW_CLASS = `grid ${NAME_COLUMNS} min-h-11 items-center gap-4 rounded-[10px] px-3 py-1.5 data-[selected=true]:bg-accent [&_svg]:hidden`;
+function ComposerCommandMenu({
+  menuMode,
+  searchQuery,
+  onSearchChange,
+  skillsLoading,
+  builtinCommands,
+  adapterCommands,
+  scheduledExamples,
+  onCommandSelect,
+  onEscapeDismiss
 }) {
+  const controlledSearch = menuMode === "commands" || menuMode === "all";
+  const showCommands = menuMode === "commands" || menuMode === "all";
+  const showSkills = menuMode === "skills" || menuMode === "all";
+  const skillsUnattached = menuMode === "skills" && !skillsLoading && adapterCommands.length === 0;
   return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-media",
-      "data-variant": variant,
-      className: cn(itemMediaVariants({ variant, className })),
-      ...props
-    }
-  );
-}
-function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-content",
-      className: cn(
-        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-title",
-      className: cn(
-        "line-clamp-1 flex w-fit items-center gap-2 text-xs leading-snug font-semibold uppercase underline-offset-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      "data-slot": "item-description",
-      className: cn(
-        "line-clamp-2 text-left text-sm leading-relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "item-actions",
-      className: cn("flex items-center gap-2", className),
-      ...props
-    }
-  );
-}
-var MOBILE_QUERY = "(max-width: 767px)";
-function subscribe(onChange) {
-  const mql = window.matchMedia(MOBILE_QUERY);
-  mql.addEventListener("change", onChange);
-  return () => mql.removeEventListener("change", onChange);
-}
-function useIsMobile() {
-  return useSyncExternalStore(
-    subscribe,
-    () => window.matchMedia(MOBILE_QUERY).matches,
-    // No viewport when server-rendered; assume desktop, as the SDK does.
-    () => false
-  );
-}
-function ResponsivePanel({
-  open,
-  onOpenChange,
-  trigger,
-  title,
-  children,
-  align = "start",
-  popoverClassName
-}) {
-  const isMobile = useIsMobile();
-  if (!isMobile) {
-    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx(
-        PopoverContent,
-        {
-          side: "top",
-          align,
-          className: cn("w-64 overflow-hidden rounded-xl p-1", popoverClassName),
-          children
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Dialog$1.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx(Dialog$1.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        Dialog$1.Overlay,
-        {
-          "data-slot": "responsive-panel-overlay",
-          className: "fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Dialog$1.Content,
-        {
-          "data-slot": "responsive-panel-sheet",
-          "aria-describedby": void 0,
-          className: cn(
-            "fixed inset-x-0 bottom-0 z-50 flex max-h-[80svh] flex-col overflow-hidden rounded-t-2xl border-t border-border bg-popover pb-[env(safe-area-inset-bottom)] text-popover-foreground shadow-lg",
-            "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Dialog$1.Title, { className: "sr-only", children: title }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                "aria-hidden": "true",
-                className: "mx-auto mt-2.5 mb-1 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1", children })
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-var SEARCH_PLACEHOLDER = {
-  commands: "Search commands\u2026",
-  skills: "Search skills\u2026",
-  scheduled: "Search scheduled tasks\u2026",
-  all: "Type a command or search\u2026"
-};
-var NAV_HINT = "\u2191\u2193 navigate   \xB7   Enter select   \xB7   Esc dismiss";
-var SEARCH_HINT = {
-  commands: NAV_HINT,
-  skills: "Esc dismiss",
-  scheduled: NAV_HINT,
-  all: NAV_HINT
-};
-var NAME_COLUMNS = "grid-cols-[120px_minmax(0,1fr)] sm:grid-cols-[200px_minmax(0,1fr)]";
-var ROW_CLASS = `grid ${NAME_COLUMNS} min-h-11 items-center gap-4 rounded-[10px] px-3 py-1.5 data-[selected=true]:bg-accent [&_svg]:hidden`;
-function ComposerCommandMenu({
-  menuMode,
-  searchQuery,
-  onSearchChange,
-  skillsLoading,
-  builtinCommands,
-  adapterCommands,
-  scheduledExamples,
-  onCommandSelect,
-  onEscapeDismiss
-}) {
-  const controlledSearch = menuMode === "commands" || menuMode === "all";
-  const showCommands = menuMode === "commands" || menuMode === "all";
-  const showSkills = menuMode === "skills" || menuMode === "all";
-  const skillsUnattached = menuMode === "skills" && !skillsLoading && adapterCommands.length === 0;
-  return /* @__PURE__ */ jsx(
-    PopoverContent,
+    PopoverContent,
     {
       side: "top",
       align: "start",
@@ -7689,50 +7042,36 @@ function ResearchSourcesPanel({
   }, []);
   if (sources.length === 0) return null;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Collapsible,
     {
       ref: rootRef,
-      className: "rounded-md border border-line bg-card",
+      open: expanded,
+      onOpenChange: setExpanded,
+      className: "rounded-[10px] border border-foreground/[0.08] bg-card",
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setExpanded((prev) => !prev),
-            "aria-expanded": expanded,
-            className: "flex w-full items-center gap-1.5 px-2 py-1.5 text-left hover:bg-muted/40",
-            children: [
-              /* @__PURE__ */ jsx(
-                ChevronRightIcon,
-                {
-                  className: cn(
-                    "size-3 shrink-0 text-muted-foreground transition-transform duration-150",
-                    expanded && "rotate-90"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-muted-foreground", children: [
-                "Sources \xB7 ",
-                sources.length
-              ] })
-            ]
-          }
-        ),
-        expanded && /* @__PURE__ */ jsx("ul", { className: "max-h-35 overflow-y-auto border-t border-line py-1", children: sources.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-          "a",
+        /* @__PURE__ */ jsxs(CollapsibleHeader, { variant: "section", children: [
+          "Sources \xB7 ",
+          sources.length
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", { className: "max-h-35 overflow-y-auto border-t border-foreground/[0.08] p-1", children: sources.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          ListRow,
           {
-            id: `source-${s.sourceId}`,
-            href: s.url,
-            target: "_blank",
-            rel: "noreferrer",
-            className: "group flex items-baseline gap-2 px-2 py-1 hover:bg-muted/60",
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] font-semibold text-primary tabular-nums", children: s.sourceId }),
-              /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground group-hover:underline", children: s.title || s.url }),
-              /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 truncate text-[10px] text-muted-foreground max-w-[40%]", children: hostname2(s.url) })
-            ]
+            asChild: true,
+            size: "sm",
+            label: s.title || s.url,
+            meta: /* @__PURE__ */ jsx("span", { className: "block max-w-40 truncate", children: hostname2(s.url) }),
+            children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                id: `source-${s.sourceId}`,
+                href: s.url,
+                target: "_blank",
+                rel: "noreferrer",
+                children: /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[12px] font-medium text-amber-500 tabular-nums", children: s.sourceId })
+              }
+            )
           }
-        ) }, s.sourceId)) })
+        ) }, s.sourceId)) }) })
       ]
     }
   );
@@ -8246,24 +7585,26 @@ function ArtifactHtml({
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           spec.caption ? /* @__PURE__ */ jsx("span", { children: spec.caption }) : /* @__PURE__ */ jsx("span", {}),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
-                type: "button",
+                variant: "ghost",
+                size: "icon-xs",
                 onClick: () => setZoom((z) => clamp4(z - ZOOM_STEP)),
                 disabled: zoom <= MIN_ZOOM,
-                className: "hover:text-foreground disabled:opacity-40 cursor-pointer",
+                className: "text-muted-foreground hover:text-foreground",
                 "aria-label": "zoom out",
-                children: "\u2212"
+                children: /* @__PURE__ */ jsx(MinusIcon, {})
               }
             ),
             /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
-                type: "button",
+                variant: "ghost",
+                size: "xs",
                 onClick: () => setZoom(1),
-                className: "tabular-nums hover:text-foreground",
+                className: "font-normal tabular-nums text-muted-foreground hover:text-foreground",
                 "aria-label": "reset zoom",
                 children: [
                   Math.round(zoom * 100),
@@ -8272,25 +7613,27 @@ function ArtifactHtml({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
-                type: "button",
+                variant: "ghost",
+                size: "icon-xs",
                 onClick: () => setZoom((z) => clamp4(z + ZOOM_STEP)),
                 disabled: zoom >= MAX_ZOOM,
-                className: "hover:text-foreground disabled:opacity-40",
+                className: "text-muted-foreground hover:text-foreground",
                 "aria-label": "zoom in",
-                children: "+"
+                children: /* @__PURE__ */ jsx(PlusIcon, {})
               }
             ),
             !fill && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: "text-border", children: "|" }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "h-4 w-px bg-border" }),
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
-                  type: "button",
+                  variant: "ghost",
+                  size: "xs",
                   onClick: () => setExpanded((v) => !v),
-                  className: "hover:text-foreground",
-                  children: expanded ? "collapse" : "expand"
+                  className: "font-normal text-muted-foreground hover:text-foreground",
+                  children: expanded ? "Collapse" : "Expand"
                 }
               )
             ] })
@@ -8678,61 +8021,50 @@ var ErrorMessage = memo(function ErrorMessage2({
       setRetryPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "alert",
-      className: cn(
-        "flex w-full gap-3 rounded-none border-l-4 border-destructive bg-destructive/5 p-4",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-destructive", children: errorInfo.title }),
-          errorInfo.detail && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setDetailOpen((open) => !open),
-              className: "flex items-center gap-1 self-start text-xs text-muted-foreground hover:text-foreground",
-              "aria-expanded": detailOpen,
-              children: [
-                detailOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight$1, { className: "size-3" }),
-                detailOpen ? "Hide details" : "Show details"
-              ]
-            }
-          ),
-          detailOpen && errorInfo.detail && /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-none border border-destructive/20 bg-background p-2 font-mono text-xs whitespace-pre-wrap wrap-break-word text-muted-foreground", children: errorInfo.detail }),
-          (showRetry || onDismiss) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
-            showRetry && /* @__PURE__ */ jsxs(
-              Button,
-              {
-                size: "xs",
-                variant: "secondary",
-                onClick: handleRetry,
-                disabled: retryPending,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    RefreshCw,
-                    {
-                      className: cn("size-3", retryPending && "animate-spin")
-                    }
-                  ),
-                  retryPending ? "Retrying\u2026" : "Retry"
-                ]
-              }
-            ),
-            onDismiss && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: onDismiss, children: "Dismiss" })
-          ] }),
-          retryError && /* @__PURE__ */ jsxs("div", { className: "pt-1 text-xs text-destructive", role: "status", children: [
-            "Retry failed: ",
-            retryError
-          ] })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: cn("gap-y-2", className), children: [
+    /* @__PURE__ */ jsx(AlertTriangle, {}),
+    /* @__PURE__ */ jsx(AlertTitle, { children: errorInfo.title }),
+    /* @__PURE__ */ jsxs(AlertDescription, { className: "flex min-w-0 flex-col items-start gap-2", children: [
+      errorInfo.detail && /* @__PURE__ */ jsx(TextLink, { variant: "muted", size: "sm", asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDetailOpen((open) => !open),
+          "aria-expanded": detailOpen,
+          children: [
+            detailOpen ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight$1, {}),
+            detailOpen ? "Hide details" : "Show details"
+          ]
+        }
+      ) }),
+      detailOpen && errorInfo.detail && /* @__PURE__ */ jsx("pre", { className: "w-full overflow-x-auto rounded-[6px] border border-destructive/20 bg-background p-2 font-mono text-xs whitespace-pre-wrap wrap-break-word text-muted-foreground", children: errorInfo.detail }),
+      (showRetry || onDismiss) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-1", children: [
+        showRetry && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "xs",
+            variant: "secondary",
+            onClick: handleRetry,
+            disabled: retryPending,
+            children: [
+              /* @__PURE__ */ jsx(
+                RefreshCw,
+                {
+                  className: cn("size-3", retryPending && "animate-spin")
+                }
+              ),
+              retryPending ? "Retrying\u2026" : "Retry"
+            ]
+          }
+        ),
+        onDismiss && /* @__PURE__ */ jsx(Button, { size: "xs", variant: "ghost", onClick: onDismiss, children: "Dismiss" })
+      ] }),
+      retryError && /* @__PURE__ */ jsxs("div", { className: "pt-1 text-xs text-destructive", role: "status", children: [
+        "Retry failed: ",
+        retryError
+      ] })
+    ] })
+  ] });
 });
 function parseRequestedTokens(detail) {
   const m = detail.match(/["']?requested["']?\s*[:=]\s*(\d+)/);
@@ -8745,34 +8077,24 @@ var InsufficientCreditsCard = memo(function InsufficientCreditsCard2({
 }) {
   const { onOpenBilling } = useAgentChatAdapterContext();
   const requested = parseRequestedTokens(detail);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "alert",
-      className: cn(
-        "flex w-full gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-4",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(CreditCard, { className: "mt-0.5 size-5 shrink-0 text-amber-600 dark:text-amber-400" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: "You're out of credits" }),
-          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-            "This run was blocked by the token-credit limit",
-            requested ? ` (it needed ~${requested.toLocaleString()} tokens)` : "",
-            ". Buy additional credits or upgrade your plan to keep your agents running."
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 pt-1", children: [
-            onOpenBilling && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onOpenBilling, children: [
-              /* @__PURE__ */ jsx(CreditCard, { className: "size-4" }),
-              "Go to Billing"
-            ] }),
-            onDismiss && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onDismiss, children: "Dismiss" })
-          ] })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Alert, { variant: "warning", className: cn("gap-y-2", className), children: [
+    /* @__PURE__ */ jsx(CreditCard, {}),
+    /* @__PURE__ */ jsx(AlertTitle, { children: "You're out of credits" }),
+    /* @__PURE__ */ jsxs(AlertDescription, { className: "flex flex-col items-start gap-2", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        "This run was blocked by the token-credit limit",
+        requested ? ` (it needed ~${requested.toLocaleString()} tokens)` : "",
+        ". Buy additional credits or upgrade your plan to keep your agents running."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 pt-1", children: [
+        onOpenBilling && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onOpenBilling, children: [
+          /* @__PURE__ */ jsx(CreditCard, { className: "size-4" }),
+          "Go to Billing"
+        ] }),
+        onDismiss && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onDismiss, children: "Dismiss" })
+      ] })
+    ] })
+  ] });
 });
 var DOCUMENT = { icon: FileTextIcon, kind: "Document" };
 var SPREADSHEET = { icon: FileSpreadsheetIcon, kind: "Spreadsheet" };
@@ -9081,15 +8403,7 @@ function WorkerCard({ worker }) {
         return (
           // A long name is cut, its mark never.
           /* @__PURE__ */ jsxs("li", { className: "flex min-w-0 max-w-full", title: file.label, children: [
-            file.kind === "file" && onFileSelect ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "min-w-0 truncate underline",
-                onClick: () => onFileSelect(file.ref),
-                children: /* @__PURE__ */ jsx("bdi", { children: file.label })
-              }
-            ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: /* @__PURE__ */ jsx("bdi", { children: file.label }) }),
+            file.kind === "file" && onFileSelect ? /* @__PURE__ */ jsx(TextLink, { variant: "muted", size: "inline", asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "min-w-0 truncate", onClick: () => onFileSelect(file.ref), children: /* @__PURE__ */ jsx("bdi", { children: file.label }) }) }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: /* @__PURE__ */ jsx("bdi", { children: file.label }) }),
             mark && /* @__PURE__ */ jsx("span", { "data-mark": landing, className: "shrink-0 whitespace-pre text-muted-foreground", children: ` \xB7 ${mark}` })
           ] }, `${file.kind}:${file.ref}`)
         );
@@ -9937,7 +9251,7 @@ function useElapsedSeconds(since) {
 function formatElapsed(seconds) {
   return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
 }
-function CommandGroup2({ commands, live }) {
+function CommandGroup3({ commands, live }) {
   const [chosen, setChosen] = useState(null);
   const open = chosen ?? live !== void 0;
   const elapsed = useElapsedSeconds(live ? (commands[0]?.message ?? live).createdAt : void 0);
@@ -10025,7 +9339,7 @@ function IterationGroup({
     return /* @__PURE__ */ jsx("p", { className: "py-0.5 text-sm text-muted-foreground", children: reasoningTokenLabel(message, false) });
   }
   const commands = iterationCommands(message);
-  return commands.length === 1 ? /* @__PURE__ */ jsx(CommandRow, { label: commands[0].label, calls: commands[0].calls }) : /* @__PURE__ */ jsx(CommandGroup2, { commands });
+  return commands.length === 1 ? /* @__PURE__ */ jsx(CommandRow, { label: commands[0].label, calls: commands[0].calls }) : /* @__PURE__ */ jsx(CommandGroup3, { commands });
 }
 function deriveFileArtifactsFromMessages(messages) {
   const terminalCommands = [];
@@ -10100,10 +9414,10 @@ function SimpleAssistantGroup({
   const endRun = (live) => {
     const key = (run[0]?.message ?? live)?.id;
     if (live && (run.length > 0 || liveCommands(live).length > 0)) {
-      rows.push(/* @__PURE__ */ jsx(CommandGroup2, { commands: run, live }, key));
+      rows.push(/* @__PURE__ */ jsx(CommandGroup3, { commands: run, live }, key));
     } else {
       if (run.length > 1) {
-        rows.push(/* @__PURE__ */ jsx(CommandGroup2, { commands: run }, key));
+        rows.push(/* @__PURE__ */ jsx(CommandGroup3, { commands: run }, key));
       } else if (run.length === 1) {
         rows.push(
           /* @__PURE__ */ jsx(CommandRow, { label: run[0].label, calls: run[0].calls }, run[0].key)
@@ -10250,34 +9564,30 @@ function AssistantGroup({
 }
 function RetryBanner({ indicator }) {
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "status",
-      className: "flex flex-col gap-1 border-l-2 border-amber-500 bg-amber-500/5 px-3 py-2 text-xs",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen((prev) => !prev),
-            className: "flex items-center gap-2 text-left text-amber-600 hover:text-amber-700",
-            "aria-expanded": open,
-            children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { className: "size-3 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-medium", children: indicator.title }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-foreground/60", children: [
-                "attempt ",
-                indicator.attempt
-              ] }),
-              indicator.detail && (open ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight$1, { className: "size-3" }))
-            ]
-          }
-        ),
-        open && indicator.detail && /* @__PURE__ */ jsx("pre", { className: "mt-1 overflow-x-auto rounded-none bg-background p-2 font-mono text-[11px] whitespace-pre-wrap wrap-break-word text-foreground/60", children: indicator.detail })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Alert, { variant: "warning", role: "status", children: [
+    /* @__PURE__ */ jsx(AlertTriangle, {}),
+    /* @__PURE__ */ jsxs(AlertTitle, { className: "flex min-w-0 items-center gap-2 font-medium", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: indicator.title }),
+      /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[11.5px] font-normal opacity-70", children: [
+        "attempt ",
+        indicator.attempt
+      ] })
+    ] }),
+    indicator.detail && /* @__PURE__ */ jsx(AlertAction, { children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "xs",
+        onClick: () => setOpen((prev) => !prev),
+        "aria-expanded": open,
+        children: [
+          open ? "Hide details" : "Details",
+          open ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight$1, {})
+        ]
+      }
+    ) }),
+    open && indicator.detail && /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("pre", { className: "mt-1 overflow-x-auto rounded-[6px] bg-background p-2 font-mono text-[11px] whitespace-pre-wrap wrap-break-word text-foreground/60", children: indicator.detail }) })
+  ] });
 }
 function WorkingOnItIndicator({ activity }) {
   return /* @__PURE__ */ jsx(Message, { from: "assistant", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(OrbShimmerLabel, { state: activity.state, label: activity.label }) }) });
@@ -13553,26 +12863,6 @@ function mapSelected(doc, edit) {
     objects: doc.objects.map((o) => o.selected ? edit(o) : o)
   };
 }
-var RABBIT_MARK_PATH = "M49.71,46.83c0,.23.02.45.07.67,2.1.49,4.16,1.07,6.18,1.74.58-.64.94-1.48.94-2.42,0-1.98-1.61-3.59-3.59-3.59s-3.59,1.61-3.59,3.59M33.95,78.3c3.1-5.1,6.72-8.89,11.64-12.21.61-.42,1.24-.8,1.88-1.17.44-.25.61-.66.58-1.05,0-.53-.49-.91-.93-1.12-1.34-.62-2.72-1.5-4.06-2.54-1.57-1.22-3.01-2.59-4.36-4.06-.95-1.04-2.02-2.38-3-3.81-.81-1.18-.63-2.77.43-3.73,1.1-1,2.26-1.92,3.48-2.76.36-.25.72-.49,1.1-.73,2.43-1.55,5.05-2.79,7.79-3.7,3.23-1.07,6.62-1.66,10.03-1.74.59-.35,1.19-.69,1.8-1.01,1.66-.88,3.38-1.62,5.17-2.21,1.58-.54,3.2-.95,4.85-1.24,3.28-.59,6.64-.7,9.95-.32,1.23.14,2.45.34,3.68.62,2.87.64,5.59,1.62,8.09,2.9.54.27.71.95.36,1.45-1.58,2.22-3.46,4.25-5.5,6.05-3.01,2.65-6.51,4.75-10.26,6.17-2.32.88-4.75,1.53-7.22,1.91-.62.1-.78.9-.24,1.22,0,0,.01,0,.02.01,6.97,4.05,13.1,9.22,18.36,15.32.72.83,1.42,1.68,2.1,2.53,3.36,4.22,6.23,8.82,8.56,13.68,1.8,3.73,3.27,7.63,4.39,11.62.73,2.6,1.34,5.24,1.76,7.91.11.76-.87,1.16-1.3.53-1.15-1.69-2.31-3.35-3.61-4.93-1.2-1.46-2.46-2.86-3.75-4.24-5.44-5.8-11.84-10.7-18.84-14.48-7.32-3.94-15.09-6.38-23.44-6.53-2.23-.04-4.46.08-6.68.3-4.05.43-8.02,1.28-11.93,2.4-.03,0-.05.01-.08.02,0,0-.01,0-.02,0-.07.02-.14.03-.21.03-.53,0-.91-.6-.61-1.09M50.95,12.97c-1.31,1.16-2.2,2.71-2.9,4.29-1.66,3.74-2.85,7.74-3.52,11.77-.32,1.92-.56,3.87-1.28,5.69-.17.44-.37.87-.6,1.28-1.18,2.1-3.37,3.19-5.6,3.86-4.96,1.47-10.14,1.97-15.25,2.65-2.37.31-8.03,1.12-7.34,4.69.46,2.36,2.26,4.16,4.08,5.6,2.66,2.11,5.44,4.09,8.33,5.88,1.87,1.15,3.85,2.11,5.6,3.44,1.74,1.33,3.15,3.05,3.58,5.25.22,1.16-.18,2.35-1,3.2-1.57,1.63-3,3.41-4.25,5.29-1.32,2.1-2.38,4.35-3.25,6.65-.59,1.44.97,2.98,2.41,2.37.53-.21,1.07-.41,1.61-.61,2.26-.82,4.68.73,4.93,3.12.17,1.61.38,3.17.63,4.57.46,2.57,3.14,3.63,5.32,1.41,2.84-2.88,4.66-6.31,7.84-8.86,2.53-2.03,6.26-4.17,9.71-3.59,3.17.56,6.27,1.52,9.23,2.85,5.32,2.32,10.36,5.29,14.95,8.86,9.17,7.1,16.56,16.51,21.27,27.1.93,2.07,4.03,1.44,4.1-.83.55-17.71-5.72-35.46-17.11-49.01-2.87-3.42-6.07-6.65-9.59-9.44-.88-.8-1.54-1.7-1.38-2.93.38-2.97,2-4.32,4.04-5.85,2.51-1.89,5.02-3.85,7.16-6.21.03-.03.06-.06.09-.1,1.24-1.37,2.38-2.83,3.4-4.37,1.2-1.81.6-4.26-1.3-5.31,0,0-.96-.52-1.45-.76-2.72-1.34-5.61-2.36-8.6-3.03-2.76-.62-5.58-.93-8.38-.93-2.38,0-4.76.22-7.09.67-1.96.37-3.97-.31-5.25-1.84-.28-.34-.54-.69-.79-1.04-.58-.84-1.09-1.71-1.63-2.58-1.29-2.06-1.87-3.63-2.89-5.84-1.06-2.29-1.85-4.73-3.26-6.86-.73-1.11-1.53-1.54-2.32-1.54s-1.54.41-2.24,1.02";
-var RABBIT_MARK_BOX = {
-  x: 14.4021,
-  y: 11.93,
-  h: 109.058
-};
-function RabbitMark({ className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className,
-      viewBox: "14.4021 11.93 95.1813 109.058",
-      fill: "currentColor",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: RABBIT_MARK_PATH })
-    }
-  );
-}
-
-// src/components/whiteboard/render.ts
 var TEXT_GLYPH_ADVANCE = 0.6;
 var AGENT_COLOR = "#2563eb";
 var TEXT_COLOR = "#111827";
@@ -15070,6 +14360,8 @@ var TOOLS = [
   { id: "select", label: "Select", Icon: MousePointer2 },
   { id: "pan", label: "Pan", Icon: Hand }
 ];
+var TOOL_ITEM = "size-9 px-0 pointer-coarse:size-11";
+var SWATCH_ITEM = "size-7 px-0 pointer-coarse:size-11";
 function ToolRail({
   tool,
   onToolChange,
@@ -15087,66 +14379,66 @@ function ToolRail({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "flex flex-col gap-1 rounded-lg border bg-background p-1",
+      className: "flex flex-col items-center gap-1 rounded-lg border bg-background p-1",
       role: "toolbar",
       "aria-label": "Whiteboard tools",
       "aria-orientation": "vertical",
       children: [
-        TOOLS.map(({ id, label, Icon }) => /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
           {
-            type: "button",
-            size: "icon",
-            variant: tool === id ? "default" : "ghost",
-            "aria-label": label,
-            "aria-pressed": tool === id,
+            type: "single",
+            orientation: "vertical",
+            "aria-label": "Tool",
+            value: tool,
+            onValueChange: (next) => {
+              if (next) onToolChange(next);
+            },
             disabled,
-            onClick: () => onToolChange(id),
-            children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
-          },
-          id
-        )),
-        /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
-        INK_COLORS.map((c) => /* @__PURE__ */ jsx(
-          "button",
+            children: TOOLS.map(({ id, label, Icon }) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: id, "aria-label": label, className: TOOL_ITEM, children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }, id))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "my-1 h-px w-full bg-border" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
           {
-            type: "button",
-            "aria-label": `Colour ${c}`,
-            "aria-pressed": color === c,
+            type: "single",
+            variant: "outline",
+            size: "sm",
+            orientation: "vertical",
+            "aria-label": "Colour",
+            value: color,
+            onValueChange: (next) => {
+              if (next) onColorChange(next);
+            },
             disabled,
-            onClick: () => onColorChange(c),
-            className: cn(
-              "mx-auto size-5 rounded-full border-2",
-              color === c ? "border-foreground" : "border-transparent"
-            ),
-            style: { backgroundColor: c }
-          },
-          c
-        )),
-        /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
-        INK_WIDTHS.map((w) => /* @__PURE__ */ jsx(
-          "button",
+            children: INK_COLORS.map((c) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: c, "aria-label": `Colour ${c}`, className: SWATCH_ITEM, children: /* @__PURE__ */ jsx("span", { className: "size-5 rounded-full", style: { backgroundColor: c } }) }, c))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "my-1 h-px w-full bg-border" }),
+        /* @__PURE__ */ jsx(
+          ToggleGroup,
           {
-            type: "button",
-            "aria-label": `Width ${w}`,
-            "aria-pressed": width === w,
+            type: "single",
+            variant: "outline",
+            size: "sm",
+            orientation: "vertical",
+            "aria-label": "Width",
+            value: String(width),
+            onValueChange: (next) => {
+              if (next) onWidthChange(Number(next));
+            },
             disabled,
-            onClick: () => onWidthChange(w),
-            className: cn(
-              "mx-auto flex size-6 items-center justify-center rounded",
-              width === w ? "bg-accent" : ""
-            ),
-            children: /* @__PURE__ */ jsx(
+            children: INK_WIDTHS.map((w) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: String(w), "aria-label": `Width ${w}`, className: SWATCH_ITEM, children: /* @__PURE__ */ jsx(
               "span",
               {
                 className: "rounded-full bg-foreground",
                 style: { width: w + 2, height: w + 2 }
               }
-            )
-          },
-          w
-        )),
-        /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-border" }),
+            ) }, w))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "my-1 h-px w-full bg-border" }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -15200,6 +14492,13 @@ var VIEW_MODE_LABELS = {
   expert: "Advanced",
   whiteboard: "Whiteboard"
 };
+var VIEW_MODE_SEGMENTS2 = ["simple", "expert", "whiteboard"].map(
+  (mode) => ({
+    value: mode,
+    label: VIEW_MODE_LABELS[mode],
+    ariaLabel: `${VIEW_MODE_LABELS[mode]} view`
+  })
+);
 function AgentWhiteboard(props) {
   const runtime = useAgentChatRuntime({
     adapter: props.adapter,
@@ -16070,21 +15369,15 @@ function WhiteboardSurface({
           children: "New board"
         }
       ) : null,
-      viewMode && onViewModeChange && hasAnswer ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-full border p-0.5", children: ["simple", "expert", "whiteboard"].map((mode) => /* @__PURE__ */ jsx(
-        "button",
+      viewMode && onViewModeChange && hasAnswer ? /* @__PURE__ */ jsx(
+        SegmentedControl,
         {
-          type: "button",
-          "aria-label": `${VIEW_MODE_LABELS[mode]} view`,
-          "aria-pressed": viewMode === mode,
-          className: cn(
-            "rounded-full px-3 py-1 text-xs",
-            viewMode === mode ? "bg-background font-medium shadow-sm" : "text-muted-foreground"
-          ),
-          onClick: () => onViewModeChange(mode),
-          children: VIEW_MODE_LABELS[mode]
-        },
-        mode
-      )) }) : null
+          "aria-label": "View",
+          segments: VIEW_MODE_SEGMENTS2,
+          value: viewMode,
+          onChange: onViewModeChange
+        }
+      ) : null
     ] })
   ] });
 }
@@ -16470,46 +15763,37 @@ function FileTreeFolder({
     onSelect?.(path);
   }, [onSelect, path]);
   return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: handleOpenChange, open: isExpanded, children: /* @__PURE__ */ jsxs("div", { className: cn("", className), role: "treeitem", tabIndex: 0, ...props, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex h-9 w-full items-center gap-2 rounded-lg px-2 text-left transition-colors hover:bg-accent",
-          isSelected && "bg-accent"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
+    /* @__PURE__ */ jsxs("div", { className: listRowVariants({ size: "sm", active: isSelected }), children: [
+      /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
+          type: "button",
+          "aria-label": isExpanded ? `Collapse ${name}` : `Expand ${name}`,
+          children: /* @__PURE__ */ jsx(
+            ChevronRightIcon,
             {
-              className: "flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0",
-              type: "button",
-              "aria-label": isExpanded ? `Collapse ${name}` : `Expand ${name}`,
-              children: /* @__PURE__ */ jsx(
-                ChevronRightIcon,
-                {
-                  className: cn(
-                    "size-4 shrink-0 text-muted-foreground transition-transform",
-                    isExpanded && "rotate-90"
-                  )
-                }
+              className: cn(
+                "size-4 shrink-0 text-muted-foreground transition-transform",
+                isExpanded && "rotate-90"
               )
             }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left",
-              onClick: handleSelect,
-              type: "button",
-              children: [
-                /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4.5 text-muted-foreground", strokeWidth: 1.8 }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4.5 text-muted-foreground", strokeWidth: 1.8 }) }),
-                /* @__PURE__ */ jsx(FileTreeName, { children: name })
-              ]
-            }
           )
-        ]
-      }
-    ),
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 border-none bg-transparent p-0 text-left",
+          onClick: handleSelect,
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx(FileTreeIcon, { children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, { className: "size-4.5 text-muted-foreground", strokeWidth: 1.8 }) : /* @__PURE__ */ jsx(FolderIcon, { className: "size-4.5 text-muted-foreground", strokeWidth: 1.8 }) }),
+            /* @__PURE__ */ jsx(FileTreeName, { children: name })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "pl-5", children }) })
   ] }) });
 }
@@ -16538,8 +15822,8 @@ function FileTreeFile({
     "div",
     {
       className: cn(
-        "group flex h-9 cursor-pointer items-center gap-2 rounded-lg px-2 transition-colors hover:bg-accent",
-        isSelected && "bg-accent",
+        listRowVariants({ size: "sm", active: isSelected }),
+        "group cursor-pointer",
         className
       ),
       onClick: handleClick,
@@ -16576,14 +15860,14 @@ function forgetChatFiles() {
   chats.clear();
   changed();
 }
-function subscribe2(listener) {
+function subscribe(listener) {
   listeners.add(listener);
   return () => {
     listeners.delete(listener);
   };
 }
 function useChatFiles(chat) {
-  return useSyncExternalStore(subscribe2, () => chat === null ? NONE : chats.get(chat) ?? NONE);
+  return useSyncExternalStore(subscribe, () => chat === null ? NONE : chats.get(chat) ?? NONE);
 }
 var SKELETON_WIDTHS2 = [75, 60, 90, 65, 80, 70, 85, 55];
 var NO_ENTRIES = [];
@@ -16662,22 +15946,32 @@ function RenderEntries({
       entry.size != null && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 text-xs text-muted-foreground/60", children: formatFileSize(entry.size) }),
       /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-0 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100", children: [
         /* @__PURE__ */ jsx(
-          "a",
+          Button,
           {
-            href: downloadUrlFor(entry.path),
-            download: fileName2,
-            className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
-            onClick: (event) => event.stopPropagation(),
-            title: "Download",
-            "aria-label": `Download ${fileName2}`,
-            children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-5" })
+            asChild: true,
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: downloadUrlFor(entry.path),
+                download: fileName2,
+                onClick: (event) => event.stopPropagation(),
+                title: "Download",
+                "aria-label": `Download ${fileName2}`,
+                children: /* @__PURE__ */ jsx(DownloadIcon, { className: "size-5" })
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
             type: "button",
-            className: "rounded p-0.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
             onClick: (event) => {
               event.stopPropagation();
               onDelete(entry.path);
@@ -16891,7 +16185,7 @@ function WorkspacePanel({
                   type: "button",
                   variant: "ghost",
                   size: "icon-sm",
-                  className: "rounded-xl text-foreground/80 md:size-11",
+                  className: "text-foreground/80 md:size-11",
                   onClick: () => fileInputRef.current?.click(),
                   disabled: disabled || !sessionId || uploading,
                   "aria-label": "Upload files",
@@ -16907,7 +16201,7 @@ function WorkspacePanel({
                   type: "button",
                   variant: "ghost",
                   size: "icon-sm",
-                  className: "rounded-xl text-foreground/80 md:size-11",
+                  className: "text-foreground/80 md:size-11",
                   onClick: () => void fetchTree(),
                   disabled: !sessionId || loading,
                   "aria-label": "Refresh workspace",
@@ -16955,24 +16249,28 @@ function WorkspacePanel({
               /* @__PURE__ */ jsx(AlertCircleIcon, { className: "mt-0.5 size-4 shrink-0" }),
               /* @__PURE__ */ jsx("span", { children: error })
             ] }),
-            !loading && !error && entries.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-8 text-center text-sm text-faint", children: [
-              /* @__PURE__ */ jsx("p", { children: "No workspace files" }),
-              /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "sm",
-                  className: "mt-3 gap-1.5",
-                  onClick: () => fileInputRef.current?.click(),
-                  disabled: disabled || !sessionId,
-                  children: [
-                    /* @__PURE__ */ jsx(UploadIcon, { className: "size-3.5" }),
-                    "Upload files"
-                  ]
-                }
-              )
-            ] }),
+            !loading && !error && entries.length === 0 && /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                className: "px-4 py-8",
+                logoClassName: "size-9",
+                title: "No workspace files",
+                action: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: disabled || !sessionId,
+                    children: [
+                      /* @__PURE__ */ jsx(UploadIcon, { className: "size-3.5" }),
+                      "Upload files"
+                    ]
+                  }
+                )
+              }
+            ),
             entries.length > 0 && /* @__PURE__ */ jsx(
               FileTree,
               {
@@ -17031,27 +16329,34 @@ function ConfirmDialog2({
       onOpenChange: (nextOpen) => {
         if (!nextOpen && !loading) onCancel();
       },
-      children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: description })
-        ] }),
-        /* @__PURE__ */ jsxs(DialogFooter, { children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: loading, onClick: onCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "destructive",
-              disabled: loading,
-              onClick: onConfirm,
-              children: [
-                loading && /* @__PURE__ */ jsx(Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
-                confirmLabel
-              ]
-            }
-          )
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          showCloseButton: false,
+          className: "gap-3.5 px-6 pt-6 pb-5 sm:max-w-[430px]",
+          children: [
+            /* @__PURE__ */ jsxs(DialogHeader, { children: [
+              /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: description })
+            ] }),
+            /* @__PURE__ */ jsxs(DialogFooter, { className: "pt-1.5", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: loading, onClick: onCancel, children: "Cancel" }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "destructive",
+                  disabled: loading,
+                  onClick: onConfirm,
+                  children: [
+                    loading && /* @__PURE__ */ jsx(Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
+                    confirmLabel
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -17313,21 +16618,19 @@ function AgentChat({
               "div",
               {
                 "data-testid": "mobile-pane-toggle",
-                className: "md:hidden flex shrink-0 border-b border-line bg-card",
-                children: mobilePanes.map((pane) => /* @__PURE__ */ jsx(
-                  "button",
+                className: "md:hidden flex shrink-0 justify-center border-b border-line bg-card px-3 py-2",
+                children: /* @__PURE__ */ jsx(
+                  SegmentedControl,
                   {
-                    type: "button",
-                    onClick: () => setMobileView(pane),
-                    "aria-pressed": activeMobilePane === pane,
-                    className: cn(
-                      "flex-1 min-h-11 px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors",
-                      activeMobilePane === pane ? "border-primary text-foreground" : "border-transparent text-subtle hover:text-foreground"
-                    ),
-                    children: MOBILE_PANE_LABELS[pane]
-                  },
-                  pane
-                ))
+                    "aria-label": "Show",
+                    segments: mobilePanes.map((pane) => ({
+                      value: pane,
+                      label: MOBILE_PANE_LABELS[pane]
+                    })),
+                    value: activeMobilePane,
+                    onChange: setMobileView
+                  }
+                )
               }
             ),
             /* @__PURE__ */ jsx(
@@ -17764,35 +17067,26 @@ function IntegrationsPage({ agentId, adapter, onBack }) {
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6 p-6", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onBack,
-        className: "-mx-2 inline-flex min-h-11 w-fit items-center gap-1.5 rounded-lg px-2 text-sm text-muted-foreground pointer-fine:mx-0 pointer-fine:min-h-0 pointer-fine:px-0 pointer-fine:hover:text-foreground",
-        children: [
-          /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "h-4 w-4" }),
-          "Back"
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsx(TextLink, { asChild: true, variant: "muted", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: onBack, children: [
+      /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }),
+      "Back"
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Integrations" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Connect third-party services to enhance your agent's capabilities" })
     ] }),
     /* @__PURE__ */ jsx(
-      "input",
+      Input,
       {
         type: "search",
         value: query,
         onChange: (e) => setQuery(e.target.value),
-        placeholder: "Search integrations...",
-        className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+        placeholder: "Search integrations..."
       }
     ),
     error && /* @__PURE__ */ jsx("div", { role: "alert", className: "text-xs text-red-500", children: error }),
     grouped.map(([category, items]) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold uppercase tracking-wide text-muted-foreground/70", children: category }),
+      /* @__PURE__ */ jsx(SectionLabel, { label: category, role: "heading", "aria-level": 2, className: "pl-0" }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: items.map((r) => /* @__PURE__ */ jsx(
         ToolkitRow,
         {
@@ -17815,53 +17109,73 @@ function ToolkitRow({
   const [open, setOpen] = useState(false);
   const [broken, setBroken] = useState(false);
   const name = row.name ?? titleCase(row.toolkit);
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          "aria-label": open ? "Collapse" : "Expand",
-          "aria-expanded": open,
-          onClick: () => setOpen((v) => !v),
-          className: "flex min-w-0 flex-1 items-center gap-2 text-left",
-          children: [
-            open ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }),
-            broken || !row.logo ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-5 w-5 items-center justify-center rounded bg-muted text-sm font-semibold uppercase", children: name.charAt(0) }) : /* @__PURE__ */ jsx(
-              "img",
+  return (
+    // A boxed disclosure: the header names the toolkit and opens its
+    // description; Connect sits beside it, outside the trigger, since a
+    // button cannot hold another.
+    /* @__PURE__ */ jsxs(
+      Collapsible,
+      {
+        open,
+        onOpenChange: setOpen,
+        className: "rounded-[10px] border border-foreground/[0.08]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pr-3", children: [
+            /* @__PURE__ */ jsx(
+              CollapsibleHeader,
               {
-                src: row.logo,
-                alt: name,
-                className: "h-5 w-5 rounded object-contain",
-                onError: () => setBroken(true)
+                variant: "section",
+                "aria-label": open ? "Collapse" : "Expand",
+                className: "min-w-0 flex-1",
+                children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  broken || !row.logo ? /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 shrink-0 items-center justify-center rounded bg-muted text-sm font-semibold uppercase", children: name.charAt(0) }) : /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: row.logo,
+                      alt: name,
+                      className: "size-5 shrink-0 rounded object-contain",
+                      onError: () => setBroken(true)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+                ] })
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: name })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "outline",
-          size: "xs",
-          disabled: busy,
-          onClick: row.connected ? onDisconnect : onConnect,
-          className: "ml-auto min-w-[6rem]",
-          children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Loader2Icon, { className: "h-3.5 w-3.5 animate-spin" }),
-            row.connected ? "Disconnecting" : "Connecting"
-          ] }) : row.connected ? "Disconnect" : "Connect"
-        }
-      )
-    ] }),
-    open && /* @__PURE__ */ jsxs("div", { className: "mt-2 pl-7 text-sm text-muted-foreground", children: [
-      row.description && /* @__PURE__ */ jsx("p", { children: row.description }),
-      /* @__PURE__ */ jsx("span", { className: "mt-1 inline-block rounded bg-primary/10 px-1.5 py-0.5 text-sm font-semibold text-primary", children: row.auth_mode === "api_key" ? "API Key" : "OAuth" })
-    ] })
-  ] });
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "xs",
+                disabled: busy,
+                onClick: row.connected ? onDisconnect : onConnect,
+                className: "min-w-[6rem]",
+                children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin" }),
+                  row.connected ? "Disconnecting" : "Connecting"
+                ] }) : row.connected ? "Disconnect" : "Connect"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(CollapsibleContent, { className: "border-t border-foreground/[0.08] px-3 py-2.5 text-[13px] text-muted-foreground", children: [
+            row.description && /* @__PURE__ */ jsx("p", { children: row.description }),
+            /* @__PURE__ */ jsx(
+              TagPill,
+              {
+                label: row.auth_mode === "api_key" ? "API key" : "OAuth",
+                className: "mt-1.5"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  );
 }
+var MODES = [
+  { value: "oauth", label: "Subscription" },
+  { value: "api_key", label: "API key" }
+];
 var PROVIDERS = [
   {
     key: "claude",
@@ -17910,18 +17224,10 @@ function CodingAgentsPanel({ agentId, adapter, onBack }) {
   }, [connections]);
   if (!supported) return null;
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6 p-6", children: [
-    onBack && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onBack,
-        className: "-mx-2 inline-flex min-h-11 w-fit items-center gap-1.5 rounded-lg px-2 text-sm text-muted-foreground pointer-fine:mx-0 pointer-fine:min-h-0 pointer-fine:px-0 pointer-fine:hover:text-foreground",
-        children: [
-          /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "h-4 w-4" }),
-          "Back"
-        ]
-      }
-    ),
+    onBack && /* @__PURE__ */ jsx(TextLink, { asChild: true, variant: "muted", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: onBack, children: [
+      /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }),
+      "Back"
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Coding agents" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Connect your Claude or ChatGPT plan so the agent can run `/code` on your behalf without separate API billing." })
@@ -18000,40 +17306,21 @@ function ProviderCard({
   return /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-3 rounded-lg border border-border p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground", children: meta.name }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold ${connected ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"}`,
-          children: connected ? `Connected${connection?.auth_mode === "api_key" ? " (API key)" : ""}` : "Not connected"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-1 text-xs", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setMode("oauth");
-            setError(null);
-          },
-          className: `rounded-md border px-2 py-1 ${mode === "oauth" ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-accent"}`,
-          children: "Subscription"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            setMode("api_key");
-            setError(null);
-          },
-          className: `rounded-md border px-2 py-1 ${mode === "api_key" ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-accent"}`,
-          children: "API key"
-        }
-      )
+      /* @__PURE__ */ jsx(TonePill, { tone: connected ? "ok" : "muted", children: connected ? `Connected${connection?.auth_mode === "api_key" ? " (API key)" : ""}` : "Not connected" })
     ] }),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        "aria-label": "Credential type",
+        segments: MODES,
+        value: mode,
+        onChange: (next) => {
+          setMode(next);
+          setError(null);
+        },
+        className: "self-start"
+      }
+    ),
     /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: instructions }),
     /* @__PURE__ */ jsx(
       "textarea",
@@ -18045,7 +17332,7 @@ function ProviderCard({
         autoComplete: "off",
         rows: mode === "oauth" && meta.provider === "openai" ? 4 : 2,
         "aria-label": `${meta.name} credential`,
-        className: "w-full resize-y rounded-md border border-border bg-background px-3 py-2 font-mono text-xs [-webkit-text-security:disc]"
+        className: cn(CONTROL_FIELD, "resize-y font-mono [-webkit-text-security:disc]")
       }
     ),
     error && /* @__PURE__ */ jsx("div", { role: "alert", className: "text-xs text-red-500", children: error }),
@@ -18170,21 +17457,27 @@ function kindIcon(kind) {
 }
 var VIEWS = {
   active: {
+    label: "Active",
     statuses: ["pending"],
     kinds: ["input_required", "action_required", "governance_gate"],
     empty: "Nothing needs you right now"
   },
   updates: {
+    label: "Updates",
     statuses: ["pending"],
     kinds: ["task_complete", "progress_checkin"],
     empty: "No news from your agent"
   },
   history: {
+    label: "History",
     statuses: ["acknowledged", "responded", "expired"],
     empty: "No history yet"
   }
 };
-var VIEW_NAMES = Object.keys(VIEWS);
+var VIEW_OPTIONS = Object.keys(VIEWS).map((id) => ({
+  id,
+  label: VIEWS[id].label
+}));
 function belongsToView(item, view) {
   const kinds = VIEWS[view].kinds;
   return VIEWS[view].statuses.includes(item.status) && (kinds === void 0 || kinds.includes(item.kind));
@@ -18208,7 +17501,6 @@ function InboxBody({ body, muted }) {
     }
   );
 }
-var FIELD_CLASS = "h-9 w-full border border-line bg-background px-2 text-sm text-foreground outline-none focus:border-primary disabled:opacity-50";
 function errorMessage(error, fallback) {
   return error instanceof Error && error.message ? error.message : fallback;
 }
@@ -18268,7 +17560,7 @@ function QuestionInput({
         "select",
         {
           "aria-label": prompt,
-          className: FIELD_CLASS,
+          className: CONTROL_FIELD,
           disabled,
           value: useOther ? OTHER_OPTION : pickedIndex >= 0 ? String(pickedIndex) : "",
           onChange: (event) => {
@@ -18281,9 +17573,17 @@ function QuestionInput({
             if (choice) onPickChoice(choice.label);
           },
           children: [
-            /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select" }),
-            choices.map((choice, index) => /* @__PURE__ */ jsx("option", { value: String(index), children: choice.label }, choice.label)),
-            allowOther && /* @__PURE__ */ jsx("option", { value: OTHER_OPTION, children: "Other" })
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true, className: CONTROL_OPTION, children: "Select" }),
+            choices.map((choice, index) => /* @__PURE__ */ jsx(
+              "option",
+              {
+                value: String(index),
+                className: CONTROL_OPTION,
+                children: choice.label
+              },
+              choice.label
+            )),
+            allowOther && /* @__PURE__ */ jsx("option", { value: OTHER_OPTION, className: CONTROL_OPTION, children: "Other" })
           ]
         }
       ),
@@ -18291,7 +17591,7 @@ function QuestionInput({
         "input",
         {
           "aria-label": `${prompt} (other)`,
-          className: FIELD_CLASS,
+          className: CONTROL_FIELD,
           placeholder: "Type your answer\u2026",
           disabled,
           value: typed,
@@ -18304,7 +17604,7 @@ function QuestionInput({
     "input",
     {
       "aria-label": prompt,
-      className: FIELD_CLASS,
+      className: CONTROL_FIELD,
       disabled,
       value: typed,
       onChange: (event) => onType(event.target.value)
@@ -18669,18 +17969,10 @@ function InboxDetail({
 }) {
   const Icon = kindIcon(item.kind);
   return /* @__PURE__ */ jsxs("section", { className: "min-w-0 flex-1 overflow-y-auto p-4 md:p-6", children: [
-    onBack && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: onBack,
-        className: "-ml-2 mb-2 inline-flex min-h-11 items-center gap-1.5 px-2 text-sm font-medium text-muted-foreground md:hidden",
-        children: [
-          /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }),
-          "Inbox"
-        ]
-      }
-    ),
+    onBack && /* @__PURE__ */ jsx(TextLink, { variant: "muted", asChild: true, className: "mb-2 md:hidden", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: onBack, children: [
+      /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+      "Inbox"
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "mb-5 flex min-w-0 items-start gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center border border-line text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -18870,54 +18162,43 @@ function InboxPanel({
             /* @__PURE__ */ jsx(InboxIcon, { className: "size-4 text-muted-foreground" }),
             /* @__PURE__ */ jsx("h1", { className: "font-semibold", children: title })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-line px-2 py-2", children: VIEW_NAMES.map((value) => /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx("div", { className: "border-b border-line px-2 py-2", children: /* @__PURE__ */ jsx(
+            ViewSwitch,
             {
-              type: "button",
-              onClick: () => selectView(value),
-              className: cn(
-                "px-2 py-1 text-xs capitalize transition-colors",
-                view === value ? "bg-line font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
-              ),
-              children: value
-            },
-            value
-          )) }),
+              label: "Inbox view",
+              views: VIEW_OPTIONS,
+              value: view,
+              onChange: selectView
+            }
+          ) }),
           /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
             error && items.length === 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-4 py-3", children: [
               /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
               /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: () => void load(null), children: "Try again" })
             ] }),
-            items.length === 0 && !error && !loading && /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-sm text-muted-foreground", children: VIEWS[view].empty }),
-            items.map((item) => {
-              const Icon = kindIcon(item.kind);
-              const selected = item.id === selectedItemId;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `Open inbox item ${item.title}`,
-                  className: cn(
-                    "flex w-full min-w-0 gap-3 border-l-2 px-3 py-3 text-left transition-colors hover:bg-input",
-                    selected ? "border-l-primary bg-line text-foreground" : "border-l-transparent text-subtle",
-                    !item.readAt && "font-medium text-foreground"
-                  ),
-                  onClick: () => void selectItem(item.id),
-                  children: [
-                    /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
-                    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center justify-between gap-2", children: [
-                        /* @__PURE__ */ jsx("span", { className: "truncate text-xs uppercase tracking-wide text-muted-foreground", children: kindLabel(item.kind) }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatRelative(item.createdAt) })
-                      ] }),
-                      /* @__PURE__ */ jsx("span", { className: "mt-1 block truncate text-sm", children: item.title }),
-                      /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: statusLabel(item.status) })
-                    ] })
-                  ]
-                },
-                item.id
-              );
-            }),
+            items.length === 0 && !error && !loading && /* @__PURE__ */ jsx(EmptyState, { className: "px-4 py-10", title: VIEWS[view].empty }),
+            items.map((item) => /* @__PURE__ */ jsx(
+              ListRow,
+              {
+                size: "lg",
+                icon: kindIcon(item.kind),
+                label: item.title,
+                description: `${kindLabel(item.kind)} \xB7 ${statusLabel(item.status)}`,
+                meta: formatRelative(item.createdAt),
+                isActive: item.id === selectedItemId,
+                badge: !item.readAt && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-label": "Unread",
+                    title: "Unread",
+                    className: "size-[7px] shrink-0 rounded-full bg-amber-500"
+                  }
+                ),
+                "aria-label": `Open inbox item ${item.title}`,
+                onClick: () => void selectItem(item.id)
+              },
+              item.id
+            )),
             nextCursor && /* @__PURE__ */ jsx(
               Button,
               {
@@ -18995,12 +18276,12 @@ function useInboxUnreadCount(adapter) {
   }, [listInbox, openInboxStream, refetch]);
   return { unreadCount, hasLoaded, error };
 }
-var CATEGORY_BADGE_CLASS = {
-  spawn: "border-primary/30 bg-primary/10 text-primary",
-  output: "border-foreground/20 bg-foreground/5 text-foreground/80",
-  done: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600",
-  verdict: "border-amber-500/30 bg-amber-500/10 text-amber-600",
-  system: "border-border bg-muted text-muted-foreground"
+var CATEGORY_TONE = {
+  spawn: "warn",
+  output: "muted",
+  done: "ok",
+  verdict: "warn",
+  system: "muted"
 };
 function MissionActivityTab({ feed }) {
   const [filter, setFilter] = useState("all");
@@ -19010,15 +18291,15 @@ function MissionActivityTab({ feed }) {
     return newestFirst.filter((e) => missionEventCategory(e.type) === filter);
   }, [feed.events, filter]);
   if (feed.events.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground/60", children: "No mission activity yet." });
+    return /* @__PURE__ */ jsx(EmptyState, { className: "py-8", title: "No mission activity yet" });
   }
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: ["all", ...MISSION_EVENT_CATEGORIES].map((cat) => /* @__PURE__ */ jsx(
-      "button",
+      FilterPill,
       {
-        type: "button",
+        on: filter === cat,
         onClick: () => setFilter(cat),
-        className: `rounded-full border px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-wide transition-colors ${filter === cat ? "border-foreground bg-foreground text-background" : "border-border/60 bg-background text-muted-foreground hover:bg-muted/40"}`,
+        className: "capitalize",
         children: cat
       },
       cat
@@ -19036,28 +18317,18 @@ function ActivityRow({
     /* @__PURE__ */ jsx("span", { className: "w-20 shrink-0 font-mono text-[10px] text-muted-foreground/60", children: formatMissionTimestamp(event.createdAt) }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `shrink-0 rounded border px-1.5 font-mono uppercase ${CATEGORY_BADGE_CLASS[category]}`,
-            children: category
-          }
-        ),
+        /* @__PURE__ */ jsx(TonePill, { tone: CATEGORY_TONE[category], className: "capitalize", children: category }),
         /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-foreground font-mono", children: missionEventActorLabel(event, feed.sessions) }),
-        taskId ? /* @__PURE__ */ jsx("p", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 font-mono text-[9px] text-muted-foreground/70", children: taskId.slice(0, 8) }) : null
+        taskId ? /* @__PURE__ */ jsx(TagPill, { label: taskId.slice(0, 8), className: "font-mono" }) : null
       ] }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-foreground/80", children: renderInlineMarkdown(missionEventSummary(event)) }) })
     ] })
   ] });
 }
-function verdictToneClass(result) {
-  if (result === "satisfied") {
-    return "border-emerald-500/30 bg-emerald-500/5 text-emerald-700 dark:text-emerald-400";
-  }
-  if (result === "failed" || result === "blocked") {
-    return "border-destructive/30 bg-destructive/5 text-destructive";
-  }
-  return "border-amber-500/30 bg-amber-500/5 text-amber-700 dark:text-amber-400";
+function missionVerdictTone(result) {
+  if (result === "satisfied") return "ok";
+  if (result === "failed" || result === "blocked") return "bad";
+  return "warn";
 }
 function MissionMetadataTab({ mission }) {
   const rows = [
@@ -19108,7 +18379,7 @@ function MissionMetadataTab({ mission }) {
     mission.lastEvaluationResult ? /* @__PURE__ */ jsxs(
       "section",
       {
-        className: `space-y-2 rounded-md border p-4 ${verdictToneClass(mission.lastEvaluationResult)}`,
+        className: `space-y-2 rounded-[10px] p-4 ${TONE[missionVerdictTone(mission.lastEvaluationResult)]}`,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "font-mono text-[10px] uppercase tracking-widest", children: [
             "Last verdict \u2014 ",
@@ -19121,7 +18392,7 @@ function MissionMetadataTab({ mission }) {
       }
     ) : null,
     /* @__PURE__ */ jsxs("section", { children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: "Identifiers" }),
+      /* @__PURE__ */ jsx(SectionLabel, { label: "Identifiers", className: "mb-2 pl-0" }),
       /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 text-xs", children: rows.map((r) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground/70", children: r.label }),
         /* @__PURE__ */ jsx("dd", { className: "break-all text-foreground/90", children: r.value })
@@ -19141,22 +18412,11 @@ function compareNodes(a, b) {
   }
   return pa.length - pb.length;
 }
-function statusToneClass(status) {
-  switch (status) {
-    case "merged":
-      return "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400";
-    case "done":
-      return "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-400";
-    case "running":
-      return "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400";
-    case "failed":
-      return "border-destructive/30 bg-destructive/10 text-destructive";
-    case "pruned":
-      return "border-border bg-muted/40 text-muted-foreground/70 line-through";
-    default:
-      return "border-border bg-muted/30 text-muted-foreground/80";
-  }
-}
+var IDEA_STATUS_TONE = {
+  merged: "ok",
+  running: "warn",
+  failed: "bad"
+};
 function fmtScore(n) {
   if (n === null || n === void 0) return "\u2014";
   return n.toFixed(3).replace(/\.?0+$/, "") || "0";
@@ -19252,9 +18512,10 @@ function IdeaRow({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx("code", { className: "shrink-0 text-[11px] text-muted-foreground/60", children: node.nodeKey }),
           /* @__PURE__ */ jsx(
-            "span",
+            TonePill,
             {
-              className: `shrink-0 rounded border px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider ${statusToneClass(node.status)}`,
+              tone: IDEA_STATUS_TONE[node.status] ?? "muted",
+              className: node.status === "pruned" ? "capitalize line-through" : "capitalize",
               children: node.status
             }
           ),
@@ -19287,13 +18548,14 @@ function MissionResearchTab({ research }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx(RunHeader, { run }),
     /* @__PURE__ */ jsxs("section", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: [
-        "Idea Tree \xB7 ",
-        sorted.length,
-        " node",
-        sorted.length === 1 ? "" : "s"
-      ] }),
-      sorted.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/60", children: "No hypotheses yet." }) : /* @__PURE__ */ jsx("ul", { className: "rounded-md border", children: sorted.map((n) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
+        SectionLabel,
+        {
+          label: `Idea tree \xB7 ${sorted.length} node${sorted.length === 1 ? "" : "s"}`,
+          className: "mb-2 pl-0"
+        }
+      ),
+      sorted.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { className: "py-8", title: "No hypotheses yet" }) : /* @__PURE__ */ jsx("ul", { className: "rounded-md border", children: sorted.map((n) => /* @__PURE__ */ jsx(
         IdeaRow,
         {
           node: n,
@@ -19305,27 +18567,30 @@ function MissionResearchTab({ research }) {
     ] })
   ] });
 }
-var TASK_STATUS_BADGE_CLASS = {
-  running: "border-primary/30 bg-primary/10 text-primary",
-  blocked: "border-amber-500/30 bg-amber-500/10 text-amber-600",
-  done: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600",
-  failed: "border-destructive/30 bg-destructive/10 text-destructive",
-  cancelled: "border-border bg-muted text-muted-foreground"
+var TASK_STATUS_TONE = {
+  running: "warn",
+  blocked: "warn",
+  done: "ok",
+  failed: "bad",
+  active: "warn",
+  completed: "ok"
 };
-function statusBadgeClass(status) {
-  return TASK_STATUS_BADGE_CLASS[status] ?? "border-foreground/20 bg-foreground/5 text-foreground/70";
+function missionTaskStatusTone(status) {
+  return TASK_STATUS_TONE[status] ?? "muted";
 }
 function TaskChip({
   task,
   onSelect
 }) {
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
       type: "button",
+      variant: "outline",
+      size: "xs",
       "data-task-chip": true,
       onClick: () => onSelect(task.id),
-      className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border/60 bg-background px-2.5 py-1 text-xs hover:bg-muted/40",
+      className: "max-w-full",
       children: [
         /* @__PURE__ */ jsx(
           "span",
@@ -19333,8 +18598,8 @@ function TaskChip({
             className: `size-1.5 shrink-0 rounded-full ${missionTaskStatusDotClass(task.status)}`
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "truncate text-foreground/85", children: missionTaskTitle(task.goal, 40) }),
-        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[9px] text-muted-foreground/60", children: task.id.slice(0, 8) })
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: missionTaskTitle(task.goal, 40) }),
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[10px] text-muted-foreground", children: task.id.slice(0, 8) })
       ]
     }
   );
@@ -19347,27 +18612,22 @@ function TaskRailRow({
   const preview = stripMissionControlMarkup(
     task.status === "done" && task.result ? task.result : task.goal
   );
-  return /* @__PURE__ */ jsxs(
-    "button",
+  return /* @__PURE__ */ jsx(
+    ListRow,
     {
-      type: "button",
+      asChild: true,
+      size: "sm",
+      isActive: selected,
+      label: task.goal,
+      description: [task.agentDefName, preview].filter(Boolean).join(" \xB7 "),
       onClick: () => onSelect(task.id),
-      className: `w-full rounded-md border px-3 py-2 text-left text-sm transition-colors ${selected ? "border-primary/40 bg-primary/5" : "border-transparent hover:bg-muted/40"}`,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `size-2 shrink-0 rounded-full ${missionTaskStatusDotClass(task.status)}`
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground/90", children: task.goal })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-2 pl-4", children: [
-          task.agentDefName ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs font-mono text-muted-foreground", children: task.agentDefName }) : null,
-          /* @__PURE__ */ jsx("span", { className: "line-clamp-2 min-w-0 flex-1 text-xs text-muted-foreground/70", children: preview })
-        ] })
-      ]
+      className: "cursor-pointer",
+      children: /* @__PURE__ */ jsx("button", { type: "button", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `size-2 shrink-0 rounded-full ${missionTaskStatusDotClass(task.status)}`
+        }
+      ) })
     }
   );
 }
@@ -19396,17 +18656,12 @@ function MissionTasksTab({
     return outputs.length > 0 ? outputs[outputs.length - 1] : null;
   }, [selected, taskEvents]);
   if (tasks.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground/60", children: "No tasks spawned yet." });
+    return /* @__PURE__ */ jsx(EmptyState, { className: "py-8", title: "No tasks spawned yet" });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 gap-4", children: [
     /* @__PURE__ */ jsx("div", { className: "w-72 shrink-0 space-y-4 overflow-y-auto pr-1", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-1 px-1 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: [
-        group.label,
-        " (",
-        group.tasks.length,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.tasks.map((t) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(SectionLabel, { label: `${group.label} (${group.tasks.length})` }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: group.tasks.map((t) => /* @__PURE__ */ jsx(
         TaskRailRow,
         {
           task: t,
@@ -19459,14 +18714,7 @@ function TaskDetail({
         /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[10px] text-muted-foreground/60", children: task.id.slice(0, 8) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs", children: [
-        /* @__PURE__ */ jsx(
-          Badge,
-          {
-            variant: "destructive",
-            className: `font-mono text-sm uppercase tracking-wide ${statusBadgeClass(task.status)}`,
-            children: task.status
-          }
-        ),
+        /* @__PURE__ */ jsx(TonePill, { tone: missionTaskStatusTone(task.status), className: "capitalize", children: task.status }),
         task.agentDefName ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: task.agentDefName }) : null,
         task.attemptCount > 1 ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
           "attempts ",
@@ -19482,30 +18730,26 @@ function TaskDetail({
     ] }),
     /* @__PURE__ */ jsx(OutcomeCard, { outcome }),
     parents.length > 0 || children.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: "Dependencies" }),
+      /* @__PURE__ */ jsx(SectionLabel, { label: "Dependencies", className: "pl-0" }),
       parents.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "mr-1 text-[10px] uppercase text-muted-foreground/50", children: "Depends on" }),
+        /* @__PURE__ */ jsx("span", { className: "mr-1 text-[12px] text-subtle", children: "Depends on" }),
         parents.map((p) => /* @__PURE__ */ jsx(TaskChip, { task: p, onSelect }, p.id))
       ] }) : null,
       children.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "mr-1 text-[10px] uppercase text-muted-foreground/50", children: "Blocks" }),
+        /* @__PURE__ */ jsx("span", { className: "mr-1 text-[12px] text-subtle", children: "Blocks" }),
         children.map((c) => /* @__PURE__ */ jsx(TaskChip, { task: c, onSelect }, c.id))
       ] }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1 font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: "Brief" }),
+      /* @__PURE__ */ jsx(SectionLabel, { label: "Brief", className: "mb-1 pl-0" }),
       /* @__PURE__ */ jsx(MessageResponse, { className: "text-sm leading-relaxed text-foreground/90", children: task.goal })
     ] }),
-    task.resultMetadata ? /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer font-mono text-[10px] uppercase tracking-widest text-muted-foreground/70", children: "Result metadata" }),
-      /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-64 overflow-auto whitespace-pre-wrap rounded bg-muted/30 px-2 py-1.5 text-[11px] text-foreground/90", children: JSON.stringify(task.resultMetadata, null, 2) })
+    task.resultMetadata ? /* @__PURE__ */ jsxs(Collapsible, { className: "rounded-[10px] border border-foreground/[0.08]", children: [
+      /* @__PURE__ */ jsx(CollapsibleHeader, { variant: "section", children: "Result metadata" }),
+      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap border-t border-foreground/[0.08] px-3 py-2 text-[11px] text-foreground/90", children: JSON.stringify(task.resultMetadata, null, 2) }) })
     ] }) : null,
     eventsSupported && taskEvents.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 font-mono font-semibold uppercase text-muted-foreground", children: [
-        "History (",
-        taskEvents.length,
-        ")"
-      ] }),
+      /* @__PURE__ */ jsx(SectionLabel, { label: `History (${taskEvents.length})`, className: "mb-2 pl-0" }),
       /* @__PURE__ */ jsx("ol", { className: "space-y-3", children: taskEvents.map((e) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3 text-xs", children: [
         /* @__PURE__ */ jsx("span", { className: "w-16 shrink-0 font-mono text-[10px] text-muted-foreground/60", children: formatMissionTimestamp(e.createdAt) }),
         /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -19628,11 +18872,6 @@ function OutcomeCard({ outcome }) {
     }
   );
 }
-var MISSION_WORKER_KIND_BADGE_CLASS = {
-  task: "border-primary/40 bg-primary/10 text-primary uppercase tracking-wide text-[10px]",
-  worker: "border-foreground/30 bg-foreground/5 text-foreground/80 uppercase tracking-wide text-[10px]",
-  delegation: "border-foreground/20 bg-foreground/[0.03] text-foreground/60 uppercase tracking-wide text-[10px]"
-};
 var MISSION_WORKER_KIND_TOOLTIP = {
   task: "Durable Task row created by spawn_task. Retried by the dispatcher; survives across coordinator wakes.",
   worker: "Async one-shot session spawned by spawn_worker. Durable session, no retry/DAG.",
@@ -19644,7 +18883,13 @@ function MissionWorkersTab({
   onOpenTranscript
 }) {
   if (workers.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground/60", children: "No workers attached to this mission right now." });
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        className: "py-8",
+        title: "No workers attached to this mission right now"
+      }
+    );
   }
   return /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: workers.map((w) => /* @__PURE__ */ jsx(
     WorkerCard2,
@@ -19674,18 +18919,11 @@ function WorkerCard2({
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-foreground", children: worker.agentDefName ?? "worker" }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Badge,
-            {
-              variant: "outline",
-              className: `mt-1 ${MISSION_WORKER_KIND_BADGE_CLASS[worker.kind]}`,
-              children: worker.kind
-            }
-          ) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Chip, { size: "sm", className: "mt-1 capitalize", children: worker.kind }) }),
           /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: MISSION_WORKER_KIND_TOOLTIP[worker.kind] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: statusLabel2 })
+      /* @__PURE__ */ jsx(TonePill, { tone: missionTaskStatusTone(statusLabel2), className: "capitalize", children: statusLabel2 })
     ] }),
     counts ? /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-6", children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -19710,13 +18948,13 @@ function WorkerCard2({
       ] }),
       /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-foreground/80", children: deriveMissionWorkerActivityLabel(worker) }),
       /* @__PURE__ */ jsx(
-        "a",
+        TextLink,
         {
+          size: "sm",
           href: worker.transcriptUrl,
           target: "_blank",
           rel: "noreferrer",
           onClick: onTranscriptClick,
-          className: "inline-block text-xs text-primary hover:underline",
           children: "View session"
         }
       )
@@ -19787,8 +19025,15 @@ function useMissionEvents(input) {
 var DEFAULT_POLL_INTERVAL_MS = 5e3;
 function CountBadge({ n }) {
   if (n === 0) return null;
-  return /* @__PURE__ */ jsx("span", { className: "ml-1 rounded bg-muted px-1 py-px text-[9px] text-muted-foreground/70", children: n });
-}
+  return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: n });
+}
+var MISSION_STATUS_TONE = {
+  active: "warn",
+  paused: "warn",
+  satisfied: "ok",
+  failed: "bad",
+  cancelled: "bad"
+};
 var INITIAL_STATE = {
   mission: null,
   tasks: [],
@@ -19948,7 +19193,6 @@ function MissionDashboard({
       setBusy(false);
     }
   };
-  const statusTone = mission.status === "satisfied" ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400" : mission.status === "failed" || mission.status === "cancelled" ? "border-destructive/40 bg-destructive/10 text-destructive" : mission.status === "paused" ? "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-400" : "border-primary/40 bg-primary/10 text-primary";
   const isActive = ACTIVE_MISSION_STATUSES.has(mission.status);
   const iterationPct = mission.maxIterations > 0 ? Math.min(100, mission.iteration / mission.maxIterations * 100) : 0;
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-1 flex-col overflow-hidden bg-muted/30", children: [
@@ -19956,9 +19200,10 @@ function MissionDashboard({
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
           /* @__PURE__ */ jsx(
-            "span",
+            TonePill,
             {
-              className: `rounded-md border px-2 py-0.5 font-mono text-[10px] font-semibold uppercase tracking-wider ${statusTone}`,
+              tone: MISSION_STATUS_TONE[mission.status] ?? "muted",
+              className: "capitalize",
               children: mission.status
             }
           ),
@@ -19970,9 +19215,9 @@ function MissionDashboard({
             ] }),
             /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] uppercase tracking-wider text-muted-foreground/60", children: "iterations" })
           ] }),
-          mission.lastEvaluationResult ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground/70", children: [
-            /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "last verdict" }),
-            /* @__PURE__ */ jsx("span", { className: "rounded border border-primary/30 bg-primary/10 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wider text-primary", children: mission.lastEvaluationResult })
+          mission.lastEvaluationResult ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[12px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: "Last verdict" }),
+            /* @__PURE__ */ jsx(TonePill, { tone: missionVerdictTone(mission.lastEvaluationResult), children: mission.lastEvaluationResult })
           ] }) : null
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
@@ -20034,10 +19279,10 @@ function MissionDashboard({
         ] })
       ] }),
       /* @__PURE__ */ jsx(
-        Progress,
+        ProgressBar,
         {
           value: iterationPct,
-          className: `h-1 ${isActive ? "" : "opacity-40"}`
+          className: isActive ? void 0 : "opacity-40"
         }
       ),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -20115,11 +19360,10 @@ function MissionDashboard({
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx(
-              "input",
+              Checkbox,
               {
-                type: "checkbox",
                 checked: cancelCascade,
-                onChange: (e) => setCancelCascade(e.target.checked)
+                onCheckedChange: (checked) => setCancelCascade(checked === true)
               }
             ),
             /* @__PURE__ */ jsxs("span", { children: [
@@ -20174,6 +19418,12 @@ function sortMissions(items) {
     return (a.updatedAt ?? "") > (b.updatedAt ?? "") ? -1 : 1;
   });
 }
+function missionTone(status) {
+  if (status === "active") return "ok";
+  if (status === "paused" || status === "blocked") return "warn";
+  if (status === "failed" || status === "max_iterations_reached") return "bad";
+  return "muted";
+}
 function MissionRow({
   mission,
   onOpen,
@@ -20204,81 +19454,79 @@ function MissionRow({
     e.preventDefault();
     openMission();
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    ListRow,
     {
-      className: cn(
-        "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors cursor-pointer hover:border-l-primary hover:bg-input",
-        "min-h-11 md:min-h-0"
-      ),
-      onClick: openMission,
-      onKeyDown: handleRowKeyDown,
-      role: "button",
-      tabIndex: 0,
-      "aria-label": `Open mission ${description}`,
-      title: "Open mission dashboard",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center text-faint", children: /* @__PURE__ */ jsx(TargetIcon, { className: "size-3.5" }) }),
-        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-start gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "truncate text-foreground", children: description }),
-          /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsx(
-            Badge,
-            {
-              variant: isActive ? "default" : "secondary",
-              className: "shrink-0",
-              children: mission.status
-            }
-          ) }),
-          meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-0.5 space-y-0.5 text-xs text-faint", children: meta.map((line) => /* @__PURE__ */ jsx("div", { className: "truncate", children: line }, line)) })
-        ] }) }) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-          isActive && canMutate.pause && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
-              onClick: (e) => {
-                stopActionClick(e);
-                onPause(mission.id);
-              },
-              "aria-label": "Pause mission",
-              title: "Pause mission",
-              disabled: busy,
-              children: /* @__PURE__ */ jsx(Pause, { className: "size-3.5" })
-            }
-          ),
-          isPaused && canMutate.resume && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
-              onClick: (e) => {
-                stopActionClick(e);
-                onResume(mission.id);
-              },
-              "aria-label": "Resume mission",
-              title: "Resume mission",
-              disabled: busy,
-              children: /* @__PURE__ */ jsx(Play, { className: "size-3.5" })
-            }
-          ),
-          (isActive || isPaused) && canMutate.cancel && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
-              onClick: (e) => {
-                stopActionClick(e);
-                onCancel(mission.id);
-              },
-              "aria-label": "Cancel mission",
-              title: "Cancel mission",
-              disabled: busy,
-              children: /* @__PURE__ */ jsx(Ban, { className: "size-3.5" })
-            }
-          )
-        ] })
-      ]
+      asChild: true,
+      size: "sm",
+      icon: TargetIcon,
+      label: description,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex", children: /* @__PURE__ */ jsx(TonePill, { tone: missionTone(mission.status), children: mission.status }) }),
+        meta.map((line) => /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate", children: line }, line))
+      ] }),
+      className: "cursor-pointer items-start",
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        isActive && canMutate.pause && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:text-foreground md:opacity-70 md:group-hover/list-row:opacity-100",
+            onClick: (e) => {
+              stopActionClick(e);
+              onPause(mission.id);
+            },
+            "aria-label": "Pause mission",
+            title: "Pause mission",
+            disabled: busy,
+            children: /* @__PURE__ */ jsx(Pause, { className: "size-3.5" })
+          }
+        ),
+        isPaused && canMutate.resume && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:text-foreground md:opacity-70 md:group-hover/list-row:opacity-100",
+            onClick: (e) => {
+              stopActionClick(e);
+              onResume(mission.id);
+            },
+            "aria-label": "Resume mission",
+            title: "Resume mission",
+            disabled: busy,
+            children: /* @__PURE__ */ jsx(Play, { className: "size-3.5" })
+          }
+        ),
+        (isActive || isPaused) && canMutate.cancel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive md:opacity-70 md:group-hover/list-row:opacity-100",
+            onClick: (e) => {
+              stopActionClick(e);
+              onCancel(mission.id);
+            },
+            "aria-label": "Cancel mission",
+            title: "Cancel mission",
+            disabled: busy,
+            children: /* @__PURE__ */ jsx(Ban, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: openMission,
+          onKeyDown: handleRowKeyDown,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": `Open mission ${description}`,
+          title: "Open mission dashboard"
+        }
+      )
     }
   );
 }
@@ -20298,7 +19546,6 @@ function MissionsPanel({
   const [error, setError] = useState(null);
   const [hasEverLoaded, setHasEverLoaded] = useState(false);
   const [busyMissionId, setBusyMissionId] = useState(null);
-  const [collapsed, setCollapsed] = useState(false);
   const mounted = useRef(true);
   const requestId = useRef(0);
   const lastFingerprint = useRef("");
@@ -20416,44 +19663,31 @@ function MissionsPanel({
   );
   if (!hasEverLoaded) return null;
   if (!adapter.listMissions) return null;
-  const showBody = hideHeader || !collapsed;
   const canMutate = {
     pause: Boolean(adapter.pauseMission),
     resume: Boolean(adapter.resumeMission),
     cancel: Boolean(adapter.cancelMission)
   };
-  return /* @__PURE__ */ jsxs("section", { className: "min-w-0 border-t border-line", children: [
-    !hideHeader && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex w-full items-center gap-1.5 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-foreground transition-colors hover:bg-input",
-        onClick: () => setCollapsed((c) => !c),
-        "aria-expanded": !collapsed,
-        children: [
-          /* @__PURE__ */ jsx(TargetIcon, { className: "size-3.5" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: title }),
-          activeCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "ml-auto", children: activeCount }),
-          collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 text-faint" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 text-faint" })
-        ]
-      }
-    ),
-    showBody && error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
-    showBody && !error && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-faint", children: "No missions" }),
-    showBody && !error && items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("pb-2", hideHeader && "pt-1"), children: items.map((mission) => /* @__PURE__ */ jsx(
-      MissionRow,
-      {
-        mission,
-        busy: busyMissionId === mission.id,
-        canMutate,
-        onOpen: handleOpen,
-        onPause: handlePause,
-        onResume: handleResume,
-        onCancel: handleCancel
-      },
-      mission.id
-    )) })
-  ] });
+  const body = error ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-destructive", children: error }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-faint", children: "No missions" }) : /* @__PURE__ */ jsx("div", { children: items.map((mission) => /* @__PURE__ */ jsx(
+    MissionRow,
+    {
+      mission,
+      busy: busyMissionId === mission.id,
+      canMutate,
+      onOpen: handleOpen,
+      onPause: handlePause,
+      onResume: handleResume,
+      onCancel: handleCancel
+    },
+    mission.id
+  )) });
+  return /* @__PURE__ */ jsx("section", { className: "min-w-0 border-t border-line p-1", children: hideHeader ? body : /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: true, children: [
+    /* @__PURE__ */ jsxs(CollapsibleHeader, { icon: TargetIcon, children: [
+      title,
+      activeCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "ml-1.5", children: activeCount })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: body })
+  ] }) });
 }
 var CITATION_RE = /\[(S\d+(?:\s*,\s*S\d+)*)\]/g;
 function splitCitations(text) {
@@ -20486,17 +19720,15 @@ function CitationText({
       return /* @__PURE__ */ jsx("span", { children: seg.value }, i);
     }
     const src = byId.get(seg.value);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Badge, { asChild: true, className: "mx-0.5 cursor-pointer hover:bg-foreground/[0.12]", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         title: src ? `${src.title} \u2014 ${src.url}` : seg.value,
         onClick: () => onCitationClick?.(seg.value),
-        className: "mx-0.5 inline-flex items-center rounded-sm bg-muted px-1 text-[10px] font-semibold text-primary hover:bg-primary/10",
         children: seg.value
-      },
-      i
-    );
+      }
+    ) }, i);
   }) });
 }
 var DEFAULT_LIMIT2 = 50;
@@ -20536,6 +19768,11 @@ function scheduleDisplay(item) {
   if (item.kind === "dynamic_loop") return null;
   return item.scheduleDisplay;
 }
+function statusTone(status) {
+  if (status === "paused") return "warn";
+  if (status === "failed") return "bad";
+  return "muted";
+}
 function sortScheduledWork(items) {
   return [...items].sort((a, b) => {
     if (a.status === "active" && b.status !== "active") return -1;
@@ -20582,73 +19819,74 @@ function ScheduledWorkRow({
   const stopActionClick = (e) => {
     e.stopPropagation();
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    ListRow,
     {
-      className: cn(
-        "group flex min-w-0 items-start gap-2 border-l-2 border-l-transparent px-3 py-2 text-sm transition-colors hover:border-l-primary hover:bg-input",
-        "min-h-11 md:min-h-0",
-        lastSessionId && "cursor-pointer"
-      ),
-      onClick: openLastRun,
-      onKeyDown: handleRowKeyDown,
-      role: lastSessionId ? "button" : void 0,
-      tabIndex: lastSessionId ? 0 : void 0,
-      "aria-label": lastSessionId ? `Open last run for ${title}` : void 0,
-      title: lastSessionId ? "Open last run" : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center text-faint", children: /* @__PURE__ */ jsx(CalendarClockIcon, { className: "size-3.5" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-foreground", children: title }),
-              /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0", children: formatKind(item.kind) }) }),
-              meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-0.5 space-y-0.5 text-xs text-faint", children: meta.map((line) => /* @__PURE__ */ jsx("div", { className: "truncate", children: line }, line)) })
-            ] }),
-            statusText && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "shrink-0", children: statusText })
-          ] }),
-          item.lastError && /* @__PURE__ */ jsx("div", { className: "mt-1 line-clamp-2 text-xs text-destructive", children: item.lastError })
+      asChild: true,
+      size: "sm",
+      icon: CalendarClockIcon,
+      label: title,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex gap-1", children: [
+          /* @__PURE__ */ jsx(TonePill, { children: formatKind(item.kind) }),
+          statusText && /* @__PURE__ */ jsx(TonePill, { tone: statusTone(statusText), children: statusText })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-          showRunNow && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-line hover:text-foreground disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
-              onClick: (e) => {
-                stopActionClick(e);
-                onRunNow(item.id);
-              },
-              "aria-label": "Run schedule now",
-              title: "Run schedule now",
-              disabled,
-              children: /* @__PURE__ */ jsx(CalendarClockIcon, { className: "size-3.5" })
-            }
-          ),
-          canCancel && isActive && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "rounded p-2 md:p-1 text-faint opacity-100 md:opacity-70 transition-all hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-40 md:group-hover:opacity-100",
-              onClick: (e) => {
-                stopActionClick(e);
-                onCancel(item.id);
-              },
-              "aria-label": "Cancel schedule",
-              title: "Cancel schedule",
-              disabled,
-              children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3.5" })
-            }
-          )
-        ] })
-      ]
+        meta.map((line) => /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate", children: line }, line)),
+        item.lastError && /* @__PURE__ */ jsx("span", { className: "mt-1 line-clamp-2 whitespace-normal text-destructive", children: item.lastError })
+      ] }),
+      className: cn("items-start", lastSessionId && "cursor-pointer"),
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        showRunNow && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:text-foreground md:opacity-70 md:group-hover/list-row:opacity-100",
+            onClick: (e) => {
+              stopActionClick(e);
+              onRunNow(item.id);
+            },
+            "aria-label": "Run schedule now",
+            title: "Run schedule now",
+            disabled,
+            children: /* @__PURE__ */ jsx(CalendarClockIcon, { className: "size-3.5" })
+          }
+        ),
+        canCancel && isActive && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive md:opacity-70 md:group-hover/list-row:opacity-100",
+            onClick: (e) => {
+              stopActionClick(e);
+              onCancel(item.id);
+            },
+            "aria-label": "Cancel schedule",
+            title: "Cancel schedule",
+            disabled,
+            children: /* @__PURE__ */ jsx(Trash2Icon, { className: "size-3.5" })
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: openLastRun,
+          onKeyDown: handleRowKeyDown,
+          role: lastSessionId ? "button" : void 0,
+          tabIndex: lastSessionId ? 0 : void 0,
+          "aria-label": lastSessionId ? `Open last run for ${title}` : void 0,
+          title: lastSessionId ? "Open last run" : void 0
+        }
+      )
     }
   );
 }
 function ScheduledWorkPanel({
   adapter,
   agentId,
-  title = "Scheduled Work",
+  title = "Scheduled work",
   limit = DEFAULT_LIMIT2,
   status = "active",
   hideHeader = false,
@@ -20661,7 +19899,6 @@ function ScheduledWorkPanel({
   const [error, setError] = useState(null);
   const [hasEverLoaded, setHasEverLoaded] = useState(false);
   const [actionScheduleId, setActionScheduleId] = useState(null);
-  const [collapsed, setCollapsed] = useState(false);
   const mounted = useRef(true);
   const requestId = useRef(0);
   const lastFingerprint = useRef("");
@@ -20767,39 +20004,26 @@ function ScheduledWorkPanel({
   );
   if (!hasEverLoaded) return null;
   if (!adapter.listScheduledWork) return null;
-  const showBody = hideHeader || !collapsed;
-  return /* @__PURE__ */ jsxs("section", { className: "min-w-0 border-t border-line", children: [
-    !hideHeader && /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex w-full items-center gap-1.5 px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-foreground transition-colors hover:bg-input",
-        onClick: () => setCollapsed((current) => !current),
-        "aria-expanded": !collapsed,
-        children: [
-          /* @__PURE__ */ jsx(CalendarClockIcon, { className: "size-3.5" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: title }),
-          activeCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "ml-auto", children: activeCount }),
-          collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 text-faint" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5 shrink-0 text-faint" })
-        ]
-      }
-    ),
-    showBody && error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
-    showBody && !error && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-faint", children: "No scheduled work" }),
-    showBody && !error && items.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("pb-2", hideHeader && "pt-1"), children: items.map((item) => /* @__PURE__ */ jsx(
-      ScheduledWorkRow,
-      {
-        item,
-        canRunNow: Boolean(adapter.runScheduledWorkNow),
-        canCancel: Boolean(adapter.cancelScheduledWork),
-        actionScheduleId,
-        onOpenLastRun: handleOpenLastRun,
-        onRunNow: handleRunNow,
-        onCancel: handleCancel
-      },
-      item.id
-    )) })
-  ] });
+  const body = error ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-destructive", children: error }) : items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-faint", children: "No scheduled work" }) : /* @__PURE__ */ jsx("div", { children: items.map((item) => /* @__PURE__ */ jsx(
+    ScheduledWorkRow,
+    {
+      item,
+      canRunNow: Boolean(adapter.runScheduledWorkNow),
+      canCancel: Boolean(adapter.cancelScheduledWork),
+      actionScheduleId,
+      onOpenLastRun: handleOpenLastRun,
+      onRunNow: handleRunNow,
+      onCancel: handleCancel
+    },
+    item.id
+  )) });
+  return /* @__PURE__ */ jsx("section", { className: "min-w-0 border-t border-line p-1", children: hideHeader ? body : /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: true, children: [
+    /* @__PURE__ */ jsxs(CollapsibleHeader, { icon: CalendarClockIcon, children: [
+      title,
+      activeCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "ml-1.5", children: activeCount })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: body })
+  ] }) });
 }
 var POLL_INTERVAL_ACTIVE_MS = 4e3;
 var POLL_INTERVAL_IDLE_MS = 3e4;
@@ -20903,15 +20127,6 @@ function fallbackSessionTitle(entry) {
   if (entry.runKind === "scheduled") return "Scheduled run";
   return "New session";
 }
-function rowStateClass(isActive, isInActiveGroup) {
-  if (isActive) {
-    return "bg-faint/30 dark:bg-[#1e2840] text-foreground border-l-primary";
-  }
-  if (isInActiveGroup) {
-    return "bg-line/70 dark:bg-line/60 text-foreground/80 hover:bg-input hover:text-foreground border-l-transparent";
-  }
-  return "bg-transparent text-foreground/80 hover:bg-input hover:text-foreground border-l-transparent";
-}
 function TreeNodeRow({
   entry,
   depth,
@@ -20938,77 +20153,85 @@ function TreeNodeRow({
     if (hasChildren) setExpanded(isInActiveGroup);
   }, [isInActiveGroup, hasChildren]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
+    /* @__PURE__ */ jsx(
+      ListRow,
       {
-        role: "button",
-        tabIndex: 0,
-        onClick: () => onSelect(entry.id),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") onSelect(entry.id);
-        },
+        asChild: true,
+        size: "sm",
+        label: title,
+        description: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [
+          entry.computer && // A chat on a folder of the user's computer, in every list of chats, the browser's too.
+          /* @__PURE__ */ jsxs("span", { "data-testid": "session-computer", title: `On ${entry.computer}`, className: "inline-flex min-w-0 max-w-[50%] items-center gap-1", children: [
+            /* @__PURE__ */ jsx(LaptopIcon, { className: "w-3 h-3 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.computer })
+          ] }),
+          entry.computer && subtitle && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle })
+        ] }),
+        isActive,
         className: cn(
-          "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
-          "min-h-11 md:min-h-0",
-          rowStateClass(isActive, isInActiveGroup)
+          "cursor-pointer",
+          !isActive && isInActiveGroup && "bg-foreground/[0.03]"
         ),
         style: { paddingLeft: `${depth * 12 + 12}px` },
-        children: [
-          hasChildren ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "p-2 md:p-0.5 rounded hover:bg-line shrink-0",
-              onClick: (e) => {
-                e.stopPropagation();
-                setExpanded(!expanded);
-              },
-              "aria-label": expanded ? "Collapse" : "Expand",
-              "aria-expanded": expanded,
-              children: expanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-sm truncate", children: title }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-faint min-w-0", children: [
-              entry.computer && // A chat on a folder of the user's computer, in every list of chats, the browser's too.
-              /* @__PURE__ */ jsxs("span", { "data-testid": "session-computer", title: `On ${entry.computer}`, className: "inline-flex min-w-0 max-w-[50%] items-center gap-1", children: [
-                /* @__PURE__ */ jsx(LaptopIcon, { className: "w-3 h-3 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.computer })
-              ] }),
-              entry.computer && subtitle && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle })
-            ] })
-          ] }),
+        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
           isRunning && canStop && isChildSession && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
-              type: "button",
-              className: "p-2 md:p-1 rounded opacity-100 md:opacity-0 md:group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive transition-all",
+              variant: "ghost",
+              size: "icon-xs",
+              className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive md:opacity-0 md:group-hover/list-row:opacity-100 md:focus-visible:opacity-100",
               onClick: (e) => {
                 e.stopPropagation();
                 onStop(entry.id);
               },
               "aria-label": "Stop child session",
               title: "Stop child session",
-              children: /* @__PURE__ */ jsx(SquareIcon, { className: "w-3 h-3", fill: "currentColor" })
+              children: /* @__PURE__ */ jsx(SquareIcon, { fill: "currentColor" })
             }
           ),
           canDelete && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
-              type: "button",
-              className: "p-2 md:p-1 rounded opacity-60 md:opacity-50 md:group-hover:opacity-100 md:focus-visible:opacity-100 hover:bg-destructive/10 hover:text-destructive transition-all",
+              variant: "ghost",
+              size: "icon-xs",
+              className: "text-muted-foreground opacity-60 hover:bg-destructive/10 hover:text-destructive md:opacity-50 md:group-hover/list-row:opacity-100 md:focus-visible:opacity-100",
               onClick: (e) => {
                 e.stopPropagation();
                 onDelete(entry.id);
               },
               "aria-label": "Delete session",
               title: "Delete session",
-              children: /* @__PURE__ */ jsx(Trash2Icon, { className: "w-3 h-3" })
+              children: /* @__PURE__ */ jsx(Trash2Icon, {})
             }
           )
-        ]
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => onSelect(entry.id),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") onSelect(entry.id);
+            },
+            children: hasChildren ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-xs",
+                className: "size-5",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setExpanded(!expanded);
+                },
+                "aria-label": expanded ? "Collapse" : "Expand",
+                "aria-expanded": expanded,
+                children: expanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0" })
+          }
+        )
       }
     ),
     hasChildren && expanded && entry.children.map((child) => /* @__PURE__ */ jsx(
@@ -21206,11 +20429,15 @@ function SessionTreePanel({
   const topLevel = hideRoot ? roots.flatMap((r) => r.children) : roots;
   if (topLevel.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !hideHeader && /* @__PURE__ */ jsxs("div", { className: "border-t border-line flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide", children: [
-      /* @__PURE__ */ jsx(UsersIcon, { className: "w-3.5 h-3.5" }),
-      /* @__PURE__ */ jsx("span", { children: title }),
-      runningCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "h-4 px-1.5 text-[10px] ml-auto", children: runningCount })
-    ] }),
+    !hideHeader && /* @__PURE__ */ jsx(
+      SectionLabel,
+      {
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          title,
+          runningCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "ml-1.5", children: runningCount })
+        ] })
+      }
+    ),
     error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
     !error && /* @__PURE__ */ jsx("div", { className: "px-1 pb-2", children: topLevel.map((entry) => /* @__PURE__ */ jsx(
       TreeNodeRow,