@invana/ui 0.0.21 → 0.0.23

package/dist/index.js

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import * as React23 from 'react';
 import React23__default, { Component } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -28,6 +28,13 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 
 // src/lib/utils.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: ["meta"] }]
+    }
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -104,7 +111,7 @@ var AlertDescription = React23.forwardRef(({ className, ...props }, ref) => /* @
   "div",
   {
     ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
+    className: cn("[&_p]:leading-relaxed", className),
     ...props
   }
 ));
@@ -122,10 +129,19 @@ var buttonVariants = cva(
         soft: "bg-primary/10 glassable text-primary ring-1 ring-primary/30 shadow-sm           hover:bg-primary/20 active:bg-primary/25",
         link: "text-primary underline-offset-4 hover:underline           hover:text-primary/80 active:text-primary/60"
       },
+      /*
+       * The scale runs 24 → 48. `xs` and `icon-xs` are the dense tier: a
+       * toolbar above a panel, an action inside a list row, a chip-height
+       * control beside 13px text. Below `sm` the icon has to come down with
+       * the box, so both xs sizes reset `[&_svg]:size-4` — the base class sets
+       * size-5, which at h-6 leaves no padding at all.
+       */
       size: {
+        xs: "h-6 rounded-control px-2 text-meta gap-1 [&_svg]:size-4",
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-control px-3 py-2 text-sm",
+        sm: "h-8 rounded-control px-3 py-2",
         lg: "h-12 rounded-control px-8 py-3",
+        "icon-xs": "h-6 w-6 rounded-control [&_svg]:size-4",
         icon: "h-8 w-8 rounded-control",
         "nav-icon": "h-11 w-11 rounded-control"
       }
@@ -221,7 +237,7 @@ var AlertDialogDescription = React23.forwardRef(({ className, ...props }, ref) =
   AlertDialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("text-muted-foreground", className),
     ...props
   }
 ));
@@ -283,24 +299,51 @@ var AvatarFallback = React23.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 var badgeVariants = cva(
-  "inline-flex items-center border px-2.5 py-0.5 text-xs   font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center border font-semibold transition-colors   focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "border-transparent bg-[var(--badge-solid)] text-[var(--badge-on-solid)] hover:opacity-90",
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground border-border",
-        soft: "border-primary/25 bg-primary/15 text-primary hover:bg-primary/20"
+        outline: "border-border text-[var(--badge-ink)]",
+        soft: "border-[color-mix(in_srgb,var(--badge-solid)_25%,transparent)]           bg-[color-mix(in_srgb,var(--badge-solid)_15%,transparent)] text-[var(--badge-solid)]           hover:bg-[color-mix(in_srgb,var(--badge-solid)_22%,transparent)]"
+      },
+      tone: {
+        primary: "[--badge-solid:var(--color-primary)] [--badge-on-solid:var(--color-primary-foreground)] [--badge-ink:var(--color-foreground)]",
+        success: "[--badge-solid:var(--color-success)] [--badge-on-solid:var(--color-success-foreground)] [--badge-ink:var(--color-success)]",
+        warning: "[--badge-solid:var(--color-warning)] [--badge-on-solid:var(--color-warning-foreground)] [--badge-ink:var(--color-warning)]",
+        info: "[--badge-solid:var(--color-info)] [--badge-on-solid:var(--color-info-foreground)] [--badge-ink:var(--color-info)]",
+        muted: "[--badge-solid:var(--color-muted-foreground)] [--badge-on-solid:var(--color-background)] [--badge-ink:var(--color-muted-foreground)]"
+      },
+      size: {
+        /** 18px — inline in a title, or a count against a label. */
+        xs: "h-[18px] px-1.5 text-meta",
+        /** 22px — the row chip: a status beside an entity name. */
+        sm: "h-[22px] px-2 text-meta",
+        /**
+         * Unchanged from before `size` existed: no explicit height, so it sizes
+         * from its text. Every badge already written keeps rendering exactly as
+         * it did — the two tiers above are additions, not a re-baseline.
+         */
+        default: "px-2.5 py-0.5 text-meta"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      tone: "primary",
+      size: "default"
     }
   }
 );
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+function Badge({ className, variant, tone, size, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(badgeVariants({ variant, tone, size }), className),
+      ...props
+    }
+  );
 }
 var Breadcrumb = React23.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
@@ -309,7 +352,7 @@ var BreadcrumbList = React23.forwardRef(({ className, ...props }, ref) => /* @__
   {
     ref,
     className: cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground sm:gap-2.5",
       className
     ),
     ...props
@@ -438,7 +481,7 @@ function ButtonGroupText({
     Comp,
     {
       className: cn(
-        "bg-muted shadow-xs flex items-center gap-2 rounded-control border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        "bg-muted shadow-xs flex items-center gap-2 rounded-control border px-4 font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
         className
       ),
       ...props
@@ -787,7 +830,7 @@ var DialogDescription = React23.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("text-muted-foreground", className),
     ...props
   }
 ));
@@ -814,7 +857,7 @@ var CommandInput = React23.forwardRef(({ className, ...props }, ref) => /* @__PU
     {
       ref,
       className: cn(
-        "flex h-10 w-full rounded-control bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-control bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props
@@ -835,7 +878,7 @@ var CommandEmpty = React23.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   {
     ref,
-    className: "py-6 text-center text-sm",
+    className: "py-6 text-center",
     ...props
   }
 ));
@@ -845,7 +888,7 @@ var CommandGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PU
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     ),
     ...props
@@ -866,7 +909,7 @@ var CommandItem = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-control px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary/15 data-[selected=true]:text-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-control px-2 py-1.5 outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary/15 data-[selected=true]:text-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
     ...props
@@ -881,7 +924,7 @@ var CommandShortcut = ({
     "span",
     {
       className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto text-meta tracking-widest text-muted-foreground",
         className
       ),
       ...props
@@ -1013,7 +1056,7 @@ var DropdownMenuShortcut = ({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      className: cn("ml-auto text-meta tracking-widest opacity-60", className),
       ...props
     }
   );
@@ -1061,7 +1104,7 @@ function ItemSeparator({
   );
 }
 var itemVariants = cva(
-  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent outline-none transition-colors duration-100 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -1071,12 +1114,29 @@ var itemVariants = cva(
       },
       size: {
         default: "gap-4 p-4 ",
-        sm: "gap-2.5 px-4 py-3"
+        sm: "gap-2.5 px-4 py-3",
+        /**
+         * The application row — 30px, the height a dense list actually uses:
+         * an agent in a roster, a dataset, a schedule, a node type, a queue
+         * entry. `min-h` rather than `h`, so a row that wraps still contains
+         * its content instead of clipping it.
+         */
+        xs: "min-h-[30px] gap-2 px-2 py-1"
+      },
+      /**
+       * Selection, not hover. A row the user has chosen stays marked while
+       * they work elsewhere in the panel, which `:hover` cannot express.
+       * Drive it from the same state that drives `aria-selected`.
+       */
+      selected: {
+        true: "bg-accent",
+        false: ""
       }
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "default",
+      selected: false
     }
   }
 );
@@ -1084,6 +1144,7 @@ function Item3({
   className,
   variant = "default",
   size = "default",
+  selected,
   asChild = false,
   ...props
 }) {
@@ -1094,7 +1155,8 @@ function Item3({
       "data-slot": "item",
       "data-variant": variant,
       "data-size": size,
-      className: cn(itemVariants({ variant, size, className })),
+      "data-selected": selected || void 0,
+      className: cn(itemVariants({ variant, size, selected, className })),
       ...props
     }
   );
@@ -1148,7 +1210,7 @@ function ItemTitle({ className, ...props }) {
     {
       "data-slot": "item-title",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
+        "flex w-fit items-center gap-2 font-medium leading-snug",
         className
       ),
       ...props
@@ -1161,7 +1223,9 @@ function ItemDescription({ className, ...props }) {
     {
       "data-slot": "item-description",
       className: cn(
-        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "text-muted-foreground line-clamp-2 text-balance font-normal leading-normal",
+        // A dense row's subtitle is one line of meta, not a wrapped paragraph.
+        "group-data-[size=xs]/item:line-clamp-1 group-data-[size=xs]/item:text-meta",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
       ),
@@ -1211,7 +1275,7 @@ function Kbd({ className, ...props }) {
     {
       "data-slot": "kbd",
       className: cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-control px-1 font-sans text-xs font-medium",
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-control px-1 font-sans text-meta font-medium",
         "[&_svg:not([class*='size-'])]:size-3",
         "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
         className
@@ -1401,7 +1465,7 @@ var MenubarShortcut = ({
     "span",
     {
       className: cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto text-meta tracking-widest text-muted-foreground",
         className
       ),
       ...props
@@ -1606,12 +1670,13 @@ var PopoverContent = React23.forwardRef(({ className, align = "center", sideOffs
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Progress = React23.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+var Progress = React23.forwardRef(({ className, value, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
   ProgressPrimitive.Root,
   {
     ref,
     className: cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      "relative w-full overflow-hidden rounded-full bg-secondary",
+      size === "sm" ? "h-1" : "h-4",
       className
     ),
     ...props,
@@ -1771,7 +1836,7 @@ var SheetDescription = React23.forwardRef(({ className, ...props }, ref) => /* @
   DialogPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("text-muted-foreground", className),
     ...props
   }
 ));
@@ -2069,7 +2134,7 @@ var SidebarInput = React23.forwardRef(({ className, type, ...props }, ref) => {
       "data-sidebar": "input",
       className: cn(
         // mirrors @invana/forms <Input> styling
-        "flex h-10 w-full rounded-control border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-10 w-full rounded-control border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         "h-8 w-full shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
         className
       ),
@@ -2149,7 +2214,7 @@ var SidebarGroupLabel = React23.forwardRef(({ className, asChild = false, ...pro
       ref,
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-meta font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       ),
@@ -2182,7 +2247,7 @@ var SidebarGroupContent = React23.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     "data-sidebar": "group-content",
-    className: cn("w-full text-sm", className),
+    className: cn("w-full", className),
     ...props
   }
 ));
@@ -2217,7 +2282,7 @@ var sidebarMenuButtonVariants = cva(
       },
       size: {
         default: "h-8",
-        sm: "h-7 text-sm",
+        sm: "h-7",
         lg: "h-12 text-lg group-data-[collapsible=icon]:!p-0"
       }
     },
@@ -2302,7 +2367,7 @@ var SidebarMenuBadge = React23.forwardRef(({ className, ...props }, ref) => /* @
     ref,
     "data-sidebar": "menu-badge",
     className: cn(
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-meta font-medium tabular-nums text-sidebar-foreground",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -2376,7 +2441,6 @@ var SidebarMenuSubButton = React23.forwardRef(({ asChild = false, size = "md", i
       className: cn(
         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-control px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-sm",
         size === "md" && "text-lg",
         "group-data-[collapsible=icon]:hidden",
         className
@@ -2433,14 +2497,69 @@ function Spinner({ className, ...props }) {
     }
   );
 }
-var Table = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto border rounded-md", children: /* @__PURE__ */ jsx(
-  "table",
+var statusDotVariants = cva("inline-block shrink-0 rounded-full", {
+  variants: {
+    tone: {
+      /** Work in flight. The only tone that animates. */
+      running: "bg-primary animate-pulse motion-reduce:animate-none",
+      /** Finished, and the result stands. */
+      success: "bg-success",
+      /** Finished, but something wants a person to look. */
+      warning: "bg-warning",
+      /** Failed. */
+      error: "bg-destructive",
+      /** Informational — a note, a count, a neutral marker. */
+      info: "bg-info",
+      /** Not started. Hollow, because there is nothing in it yet. */
+      queued: "bg-transparent border-[1.5px] border-muted-foreground",
+      /** Present but inactive — retired, paused, skipped, hidden. */
+      muted: "bg-muted-foreground"
+    },
+    size: {
+      /** 5px — inside a dense step row. */
+      xs: "size-[5px]",
+      /** 6px — the default in a thread or a list row. */
+      sm: "size-1.5",
+      /** 8px — a roster row, a legend swatch. */
+      md: "size-2",
+      /** 10px — a legend key that stands on its own. */
+      lg: "size-2.5"
+    }
+  },
+  defaultVariants: {
+    tone: "muted",
+    size: "sm"
+  }
+});
+var StatusDot = React23.forwardRef(
+  ({ className, tone, size, label, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(statusDotVariants({ tone, size }), className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...props
+    }
+  )
+);
+StatusDot.displayName = "StatusDot";
+var Table = React23.forwardRef(({ className, density = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
   {
-    ref,
-    className: cn("w-full caption-bottom text-sm", className),
-    ...props
+    "data-density": density,
+    className: "group/table relative w-full overflow-auto border rounded-md",
+    children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        className: cn("w-full caption-bottom", className),
+        ...props
+      }
+    )
   }
-) }));
+));
 Table.displayName = "Table";
 var TableHeader = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
@@ -2483,6 +2602,11 @@ var TableHead = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ref,
     className: cn(
       "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      // Compact density: `<Table density="compact">` marks the wrapper, and
+      // every cell follows from there. One prop on the table rather than a
+      // size on <TableHead> and <TableCell> individually — four places to
+      // forget, and a table with two densities in it is always a mistake.
+      "group-data-[density=compact]/table:h-[26px] group-data-[density=compact]/table:text-meta",
       className
     ),
     ...props
@@ -2495,6 +2619,7 @@ var TableCell = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE_
     ref,
     className: cn(
       "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "group-data-[density=compact]/table:px-2 group-data-[density=compact]/table:py-1",
       className
     ),
     ...props
@@ -2510,30 +2635,40 @@ var TableCaption = React23.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableCaption.displayName = "TableCaption";
-var Tabs = TabsPrimitive.Root;
-var TabsList = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
+var TabsSizeContext = React23.createContext("default");
+var Tabs = React23.forwardRef(({ size = "default", ...props }, ref) => /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+Tabs.displayName = TabsPrimitive.Root.displayName;
+var TabsList = React23.forwardRef(({ className, ...props }, ref) => {
+  const size = React23.useContext(TabsSizeContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center text-muted-foreground",
+        size === "sm" ? "h-[30px] gap-1" : "rounded-lg bg-muted p-1",
+        className
+      ),
+      ...props
+    }
+  );
+});
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-control px-3 py-1 font-medium ring-offset-background transition-colors text-muted-foreground hover:text-foreground hover:bg-background/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:ring-1 data-[state=active]:ring-primary/25 data-[state=active]:shadow-sm",
-      className
-    ),
-    ...props
-  }
-));
+var TabsTrigger = React23.forwardRef(({ className, ...props }, ref) => {
+  const size = React23.useContext(TabsSizeContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        size === "sm" ? "h-[26px] px-2 text-meta" : "px-3 py-1",
+        "inline-flex items-center justify-center whitespace-nowrap rounded-control font-medium ring-offset-background transition-colors text-muted-foreground hover:text-foreground hover:bg-background/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:ring-1 data-[state=active]:ring-primary/25 data-[state=active]:shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+});
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 var TabsContent = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
@@ -2609,12 +2744,211 @@ var ToggleGroupItem = React23.forwardRef(({ className, children, variant, size,
   );
 });
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var agentChipVariants = cva(
+  "inline-flex max-w-full shrink-0 items-center gap-1 rounded-control border px-1.5   text-meta [&_svg]:size-3 [&_svg]:shrink-0",
+  {
+    variants: {
+      /**
+       * Who this is. The distinction is the point of the component: a reader
+       * scanning a task list needs to know at a glance whether a person or an
+       * agent is holding it, and reading the name is too slow.
+       */
+      kind: {
+        agent: "border-border bg-transparent text-foreground",
+        person: "border-transparent bg-accent text-foreground"
+      },
+      /** A retired or paused agent still appears in history and lineage. */
+      inactive: {
+        true: "opacity-60",
+        false: ""
+      }
+    },
+    defaultVariants: { kind: "agent", inactive: false }
+  }
+);
+var AgentChip = React23.forwardRef(
+  ({ icon, name, kind, inactive, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(agentChipVariants({ kind, inactive }), className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-muted-foreground", children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+      ]
+    }
+  )
+);
+AgentChip.displayName = "AgentChip";
+var stateVariants = cva("inline-flex shrink-0 items-center gap-1.5 font-medium", {
+  variants: {
+    tone: {
+      active: "text-success",
+      running: "text-primary",
+      draft: "text-muted-foreground",
+      review: "text-warning",
+      error: "text-destructive"
+    }
+  },
+  defaultVariants: { tone: "active" }
+});
+var AppStatusBar = React23.forwardRef(
+  ({ state, tone, end, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex h-[25px] shrink-0 items-center gap-2 border-t border-border px-2 text-meta text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        state != null ? /* @__PURE__ */ jsxs("span", { className: cn(stateVariants({ tone })), children: [
+          /* @__PURE__ */ jsx(
+            StatusDot,
+            {
+              tone: tone === "error" ? "error" : tone === "review" ? "warning" : tone === "running" ? "running" : tone === "draft" ? "muted" : "success"
+            }
+          ),
+          state
+        ] }) : null,
+        state != null && children ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2022" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
+        end != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: end }) : null
+      ]
+    }
+  )
+);
+AppStatusBar.displayName = "AppStatusBar";
+var BarChartH = React23.forwardRef(
+  ({
+    data,
+    max,
+    labelWidth = 78,
+    color = "var(--color-data-1)",
+    caption,
+    className,
+    ...props
+  }, ref) => {
+    const ceiling = max ?? (Math.max(...data.map((d) => d.value), 0) || 1);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      caption != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: caption }) : null,
+      data.map((d, i) => /* @__PURE__ */ jsxs("div", { className: "flex h-4 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "shrink-0 truncate text-meta text-muted-foreground",
+            style: { width: labelWidth },
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: `${d.label}: ${d.display ?? d.value}`,
+              className: "h-2.5 shrink-0 rounded-e-[4px]",
+              style: {
+                width: `${Math.max(0, d.value / ceiling * 100)}%`,
+                background: d.color ?? color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta tabular-nums", children: d.display ?? d.value })
+        ] })
+      ] }, i))
+    ] });
+  }
+);
+BarChartH.displayName = "BarChartH";
+var BarChartV = React23.forwardRef(
+  ({
+    data,
+    max,
+    gridlines = [],
+    height = 160,
+    color = "var(--color-data-1)",
+    highlightColor,
+    highlightIndex,
+    labelMode = "last",
+    caption,
+    className,
+    ...props
+  }, ref) => {
+    const ceiling = max ?? (Math.max(...data.map((d) => d.value), 0) || 1);
+    const emphasis = highlightIndex ?? data.length - 1;
+    const labelled = (i) => labelMode === "all" || labelMode === "last" && i === emphasis;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      caption != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: caption }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "relative mt-2", style: { height }, children: [
+        gridlines.map((g) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-x-0 flex translate-y-1/2 items-center",
+            style: { bottom: `${g / ceiling * 100}%` },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-border" }),
+              /* @__PURE__ */ jsx("span", { className: "pl-1 text-meta tabular-nums text-muted-foreground", children: g })
+            ]
+          },
+          g
+        )),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-end justify-between gap-2", children: data.map((d, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1",
+            children: [
+              labelled(i) ? /* @__PURE__ */ jsx("span", { className: "text-meta tabular-nums", children: d.display ?? d.value }) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: `${d.label}: ${d.display ?? d.value}`,
+                  className: "w-full max-w-6 rounded-t-[4px]",
+                  style: {
+                    height: `${Math.max(0, d.value / ceiling * 100)}%`,
+                    background: i === emphasis ? highlightColor ?? color : color,
+                    opacity: i === emphasis ? 1 : 0.55
+                  }
+                }
+              )
+            ]
+          },
+          i
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-between gap-2", children: data.map((d, i) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col items-center", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-meta text-muted-foreground", children: d.label }),
+        d.sublabel != null ? /* @__PURE__ */ jsx("span", { className: "truncate text-meta text-muted-foreground/70", children: d.sublabel }) : null
+      ] }, i)) })
+    ] });
+  }
+);
+BarChartV.displayName = "BarChartV";
 function ButtonWithTooltip(props) {
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: cn("hover:bg-transparent", props.className), ...props, children: props.children }) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: props.tooltip })
   ] }) });
 }
+var CannotAnswerCard = React23.forwardRef(({ label = "cannot answer", remedy, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col gap-1 border border-dashed border-border bg-card p-2",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "text-meta font-medium text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx("span", { children }),
+      remedy != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: remedy }) : null
+    ]
+  }
+));
+CannotAnswerCard.displayName = "CannotAnswerCard";
 function ChatSession({
   children,
   footer,
@@ -2752,12 +3086,14 @@ var NavItems = ({
   return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => {
     const isActive = activeItem === item.name;
     const padding = item.label ? "px-3 py-1.5" : "px-2 py-2";
-    const isInteractive = Boolean(item.href || item.onClick);
-    const itemClass = `inline-flex border-0 items-center justify-center gap-2
+    const hasMenu = !item.href && Boolean(item.menuItems?.length);
+    const isInteractive = Boolean(item.href || item.onClick || hasMenu);
+    const itemClass = `relative inline-flex border-0 items-center justify-center gap-2
           whitespace-nowrap rounded-control transition-colors
           ring-1 ring-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
           ${padding}
           ${isInteractive ? "cursor-pointer hover:bg-primary/10 hover:text-primary hover:ring-primary/25" : ""}
+          ${hasMenu ? "data-[state=open]:bg-primary/15 data-[state=open]:text-primary data-[state=open]:ring-primary/25" : ""}
           ${isActive ? `bg-primary/15 text-primary ring-primary/25 ${item.activeClass || ""}` : ""}
           ${item.className || ""}`;
     const icon = item.icon && /* @__PURE__ */ jsx(
@@ -2767,40 +3103,76 @@ var NavItems = ({
         className: item.iconClassName || iconClassName
       }
     );
-    const label = item.label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label });
+    const label = item.label && /* @__PURE__ */ jsx("span", { children: item.label });
+    const badge = item.badge != null && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "pointer-events-none absolute -right-0.5 -top-0.5 inline-flex h-3.5\n              min-w-3.5 items-center justify-center rounded-full bg-primary px-1\n              text-[9px] font-semibold leading-none text-primary-foreground",
+        children: item.badge
+      }
+    );
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label,
+      badge
+    ] });
+    const control = item.href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        onClick: () => setActiveItem(item.name),
+        className: itemClass,
+        children: inner
+      }
+    ) : item.onClick || hasMenu ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          item.onClick?.();
+          if (!hasMenu) setActiveItem(isActive ? null : item.name);
+        },
+        className: itemClass,
+        children: inner
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: itemClass, children: inner });
+    const withTooltip = /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: hasMenu ? /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: control }) : control }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: item.tooltipSide || tooltipSide, children: item.tooltip || item.name })
+    ] });
     return /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
-      /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: item.href ? /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: item.href,
-            onClick: () => setActiveItem(item.name),
-            className: itemClass,
-            children: [
-              icon,
-              label
-            ]
-          }
-        ) : item.onClick ? /* @__PURE__ */ jsxs(
-          "button",
+      hasMenu ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        withTooltip,
+        /* @__PURE__ */ jsx(
+          DropdownMenuContent,
           {
-            type: "button",
-            onClick: () => {
-              item.onClick?.();
-              setActiveItem(isActive ? null : item.name);
-            },
-            className: itemClass,
-            children: [
-              icon,
-              label
-            ]
+            side: isVertical ? "right" : "bottom",
+            align: isVertical ? "start" : "end",
+            children: item.menuItems?.map((menuItem) => {
+              const MenuIcon = menuItem.icon;
+              const gutter = item.menuItems?.some((m) => m.icon);
+              return /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
+                menuItem.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuItem,
+                  {
+                    disabled: menuItem.disabled,
+                    onSelect: () => menuItem.onSelect?.(),
+                    className: cn(
+                      menuItem.destructive && "text-destructive focus:bg-destructive/15 focus:text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    ),
+                    children: [
+                      MenuIcon ? /* @__PURE__ */ jsx(MenuIcon, {}) : gutter ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-4 shrink-0" }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: menuItem.label }),
+                      menuItem.shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: menuItem.shortcut })
+                    ]
+                  }
+                )
+              ] }, menuItem.id);
+            })
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: itemClass, children: [
-          icon,
-          label
-        ] }) }),
-        /* @__PURE__ */ jsx(TooltipContent, { side: item.tooltipSide || tooltipSide, children: item.tooltip || item.name })
-      ] }),
+        )
+      ] }) : withTooltip,
       item.showSeperator && /* @__PURE__ */ jsx(
         Separator,
         {
@@ -3207,67 +3579,604 @@ function ChatSessionStatusBar({
     }
   );
 }
-var ErrorBoundary = class extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(_) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("ErrorBoundary caught an error", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-full w-full text-sm", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center", children: [
-        /* @__PURE__ */ jsx(Frown, { className: "mr-1 h-4" }),
-        "Oops ! something went wrong."
-      ] }) });
-    }
-    return this.props.children;
-  }
-};
-var MenuItem = ({
-  label,
-  icon: Icon,
-  shortcut,
-  children,
+function ChatSessionContextChip({
+  icon,
+  onDismiss,
+  dismissLabel = "Remove context",
   className,
-  level = 0,
-  href,
-  onClick
-}) => {
-  const hasChildren = children && children.length > 0;
-  const ButtonOrLink = href ? "a" : "button";
-  const clickTrigger = href ? { href } : { onClick };
-  return /* @__PURE__ */ jsxs("li", { className: "relative group/item", children: [
-    /* @__PURE__ */ jsxs(
-      ButtonOrLink,
-      {
-        ...clickTrigger,
-        className: cn(
-          "flex w-full items-center justify-between  px-4 py-2 ",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none",
-          className,
-          level === 0 ? "font-medium" : "font-normal"
-          // "group-hover/item:bg-accent/50"
-        ),
-        role: hasChildren ? "menuitem" : void 0,
-        "aria-haspopup": hasChildren ? "true" : void 0,
-        "aria-expanded": hasChildren ? "true" : void 0,
-        children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: label })
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            shortcut && /* @__PURE__ */ jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: shortcut }),
-            hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-          ] })
-        ]
-      }
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[26px] items-center gap-1.5 border border-border bg-muted/40 px-1.5 text-meta",
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-3", children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
+        onDismiss ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": dismissLabel,
+            className: "shrink-0 px-1 text-muted-foreground hover:text-foreground",
+            children: "\xD7"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var CitationList = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col", className), ...props, children }));
+CitationList.displayName = "CitationList";
+var CitationRow = React23.forwardRef(
+  ({ kind, source, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn("flex min-h-[26px] items-center gap-2 py-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 border border-border px-1 text-meta text-muted-foreground", children: kind }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
+        source != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground", children: source }) : null
+      ]
+    }
+  )
+);
+CitationRow.displayName = "CitationRow";
+var ClarifyCard = React23.forwardRef(
+  ({
+    step,
+    waiting,
+    question,
+    options,
+    value,
+    onSelect,
+    actions,
+    footnote,
+    className,
+    ...props
+  }, ref) => {
+    const name = React23.useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col overflow-hidden border border-border bg-card", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-6 shrink-0 items-center gap-2 border-b border-border bg-muted/40 px-2 text-meta", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium", children: "question" }),
+            step != null ? /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", children: step }) : null,
+            /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+            waiting != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: waiting }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2", children: [
+            /* @__PURE__ */ jsx("p", { children: question }),
+            /* @__PURE__ */ jsx("div", { role: "radiogroup", className: "flex flex-col gap-1", children: options.map((o) => {
+              const checked = value === o.value;
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: cn(
+                    "flex min-h-[30px] cursor-pointer items-center gap-2 border px-2 py-1",
+                    checked ? "border-primary/40 bg-primary/10" : "border-border",
+                    o.disabled && "cursor-not-allowed opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name,
+                        value: o.value,
+                        checked,
+                        disabled: o.disabled,
+                        onChange: () => onSelect?.(o.value),
+                        className: "sr-only"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "flex size-3.5 shrink-0 items-center justify-center rounded-full border",
+                          checked ? "border-primary" : "border-muted-foreground"
+                        ),
+                        children: checked ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary" }) : null
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: o.label }),
+                    o.detail != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-meta text-muted-foreground", children: o.detail }) : null
+                  ]
+                },
+                o.value
+              );
+            }) }),
+            actions || footnote != null ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              actions,
+              footnote != null ? /* @__PURE__ */ jsx("span", { className: "flex-1 text-meta text-muted-foreground", children: footnote }) : null
+            ] }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+ClarifyCard.displayName = "ClarifyCard";
+var ContextBar = React23.forwardRef(
+  ({ counters, hint, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex h-7 shrink-0 items-center gap-3 border-t border-border px-2 text-meta",
+        className
+      ),
+      ...props,
+      children: [
+        children ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children }) : null,
+        counters ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-3 text-muted-foreground", children: counters }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        hint != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: hint }) : null
+      ]
+    }
+  )
+);
+ContextBar.displayName = "ContextBar";
+var DiagnosisCard = React23.forwardRef(({ code, attempted, target, actions, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-2 border border-destructive/40 bg-card p-2", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-meta", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-destructive", children: "diagnosis" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-muted-foreground", children: code })
+      ] }),
+      children != null ? /* @__PURE__ */ jsx("div", { children }) : null,
+      attempted != null || target != null ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border border-border bg-muted/40 p-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: "what was tried" }),
+        attempted != null ? /* @__PURE__ */ jsx("code", { className: "whitespace-pre-wrap break-all font-mono text-meta", children: attempted }) : null,
+        target != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: target }) : null
+      ] }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: actions }) : null
+    ]
+  }
+));
+DiagnosisCard.displayName = "DiagnosisCard";
+var OP_SIGN = { add: "+", remove: "\u2212", change: "~" };
+var OP_CLASS = {
+  add: "text-success",
+  remove: "text-destructive",
+  change: "text-warning"
+};
+var DiffList = React23.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-col", className), ...props, children })
+);
+DiffList.displayName = "DiffList";
+var DiffRow = React23.forwardRef(
+  ({ op = "add", kind, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn("flex items-baseline gap-2 py-0.5 text-meta", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("w-3 shrink-0 text-center font-mono", OP_CLASS[op]), children: OP_SIGN[op] }),
+        kind != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: kind }) : null,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  )
+);
+DiffRow.displayName = "DiffRow";
+var DivergingBar = React23.forwardRef(
+  ({
+    data,
+    max,
+    labelWidth = 104,
+    positiveColor = "var(--color-success)",
+    negativeColor = "var(--color-destructive)",
+    caption,
+    className,
+    ...props
+  }, ref) => {
+    const ceiling = max ?? (Math.max(...data.map((d) => Math.abs(d.value)), 0) || 1);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      caption != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: caption }) : null,
+      data.map((d, i) => {
+        const positive = d.value >= 0;
+        const width = `${Math.abs(d.value) / ceiling * 50}%`;
+        return /* @__PURE__ */ jsxs("div", { className: "flex h-4 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "shrink-0 truncate text-meta text-muted-foreground",
+              style: { width: labelWidth },
+              children: d.label
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "relative flex min-w-0 flex-1 items-center", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "absolute left-1/2 h-4 w-px -translate-x-1/2 bg-border"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "flex w-1/2 justify-end", children: !positive ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                title: `${d.label}: ${d.display ?? d.value}`,
+                className: "h-2.5 rounded-s-[4px]",
+                style: { width, background: negativeColor }
+              }
+            ) : null }),
+            /* @__PURE__ */ jsx("span", { className: "flex w-1/2 justify-start", children: positive ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                title: `${d.label}: ${d.display ?? d.value}`,
+                className: "h-2.5 rounded-e-[4px]",
+                style: { width, background: positiveColor }
+              }
+            ) : null })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "w-8 shrink-0 text-right text-meta tabular-nums", children: d.display ?? (d.value > 0 ? `+${d.value}` : d.value) })
+        ] }, i);
+      })
+    ] });
+  }
+);
+DivergingBar.displayName = "DivergingBar";
+var EmissionHeader = React23.forwardRef(({ kind, template, citation, note, actions, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex h-6 shrink-0 items-center gap-2 border-b border-border bg-muted/40 px-2 text-meta",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium", children: kind }),
+      template != null ? /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-muted-foreground", children: template }) : null,
+      note != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 border border-border px-1 text-muted-foreground", children: note }) : null,
+      /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+      citation != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: citation }) : null,
+      actions ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: actions }) : null
+    ]
+  }
+));
+EmissionHeader.displayName = "EmissionHeader";
+var EmissionCard = React23.forwardRef(
+  ({
+    kind,
+    template,
+    citation,
+    note,
+    actions,
+    showHeader = true,
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-kind": kind,
+      className: cn("flex flex-col overflow-hidden border border-border bg-card", className),
+      ...props,
+      children: [
+        showHeader ? /* @__PURE__ */ jsx(
+          EmissionHeader,
+          {
+            kind,
+            template,
+            citation,
+            note,
+            actions
+          }
+        ) : null,
+        children
+      ]
+    }
+  )
+);
+EmissionCard.displayName = "EmissionCard";
+var CitationMarker = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "sup",
+  {
+    ref,
+    className: cn("px-0.5 align-super text-[0.7em] text-primary", className),
+    ...props,
+    children
+  }
+));
+CitationMarker.displayName = "CitationMarker";
+var EmptyState = React23.forwardRef(
+  ({ icon, title, description, actions, locks, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col items-center justify-center gap-2 p-6 text-center",
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon }) : null,
+        /* @__PURE__ */ jsx("h3", { className: "font-medium", children: title }),
+        description != null ? /* @__PURE__ */ jsx("p", { className: "max-w-prose text-muted-foreground", children: description }) : null,
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-1.5 pt-1", children: actions }) : null,
+        locks ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-1.5 pt-1", children: locks }) : null
+      ]
+    }
+  )
+);
+EmptyState.displayName = "EmptyState";
+var EmptyStateLock = React23.forwardRef(({ icon, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    ref,
+    className: cn(
+      "inline-flex h-6 items-center gap-1.5 border border-dashed border-border px-2 text-meta text-muted-foreground [&_svg]:size-3",
+      className
+    ),
+    ...props,
+    children: [
+      icon,
+      children
+    ]
+  }
+));
+EmptyStateLock.displayName = "EmptyStateLock";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(_) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-full w-full", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center", children: [
+        /* @__PURE__ */ jsx(Frown, { className: "mr-1 h-4" }),
+        "Oops ! something went wrong."
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+var FilterBar = React23.forwardRef(
+  ({ summary, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex h-[30px] shrink-0 items-center gap-1.5 border-b border-border px-2",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+        summary != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground", children: summary }) : null
+      ]
+    }
+  )
+);
+FilterBar.displayName = "FilterBar";
+var FilterChip = React23.forwardRef(
+  ({ label, value, active, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      type: "button",
+      variant: "outline",
+      size: "xs",
+      "data-active": active || void 0,
+      className: cn(
+        "h-[22px] gap-1 px-1.5 font-normal",
+        active && "border-primary/40 text-primary",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(value != null && "text-muted-foreground"), children: label }),
+        value != null ? /* @__PURE__ */ jsx("span", { className: "truncate", children: value }) : null,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-muted-foreground", children: "\u25BE" })
+      ]
+    }
+  )
+);
+FilterChip.displayName = "FilterChip";
+var HeatStrip = React23.forwardRef(
+  ({ cells, states, ticks, cellSize = 14, className, ...props }, ref) => {
+    const byKey = React23.useMemo(
+      () => new Map(states.map((s) => [s.key, s])),
+      [states]
+    );
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: cells.map((c, i) => {
+        const s = byKey.get(c.state);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            title: `${c.at} \xB7 ${s?.label ?? c.state}${c.detail ? ` \xB7 ${c.detail}` : ""}`,
+            className: cn("shrink-0 rounded-[2px]", s?.hollow && "border"),
+            style: {
+              width: cellSize,
+              height: cellSize,
+              background: s?.hollow ? "transparent" : s?.color ?? "var(--color-muted)",
+              borderColor: s?.hollow ? s.color ?? "var(--color-border)" : void 0
+            }
+          },
+          i
+        );
+      }) }),
+      ticks?.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", "aria-hidden": true, children: cells.map((_, i) => {
+        const tick = ticks.find((t) => t.at === i);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "shrink-0 text-meta tabular-nums text-muted-foreground",
+            style: { width: cellSize },
+            children: tick ? tick.label : ""
+          },
+          i
+        );
+      }) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-meta", children: states.map((s) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("size-2.5 shrink-0 rounded-[2px]", s.hollow && "border"),
+            style: {
+              background: s.hollow ? "transparent" : s.color ?? "var(--color-muted)",
+              borderColor: s.hollow ? s.color ?? "var(--color-border)" : void 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: s.label })
+      ] }, s.key)) })
+    ] });
+  }
+);
+HeatStrip.displayName = "HeatStrip";
+function Swatch({ kind = "dot", color }) {
+  const style = { color };
+  if (kind === "dot")
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style,
+        className: "size-2 shrink-0 rounded-full bg-current"
+      }
+    );
+  if (kind === "ring")
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style,
+        className: "size-2 shrink-0 rounded-full border-[1.5px] border-current"
+      }
+    );
+  if (kind === "line")
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, style, className: "h-0.5 w-4 shrink-0 bg-current" });
+  if (kind === "dashed")
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        style,
+        className: "h-0 w-4 shrink-0 border-t-[1.5px] border-dashed border-current"
+      }
+    );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      style,
+      className: "w-4 shrink-0 overflow-visible",
+      viewBox: "0 0 16 6",
+      height: "6",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M0 3h11", stroke: "currentColor", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 0l6 3-6 3z", fill: "currentColor" })
+      ]
+    }
+  );
+}
+var Legend = React23.forwardRef(
+  ({ orientation = "row", className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "list",
+      className: cn(
+        "flex gap-x-3 gap-y-1 text-meta",
+        orientation === "row" ? "flex-wrap items-center" : "flex-col",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+Legend.displayName = "Legend";
+var LegendItem = React23.forwardRef(
+  ({ kind, color, label, count, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "listitem",
+      className: cn("flex min-w-0 items-center gap-1.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Swatch, { kind, color }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+        count != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: count }) : null
+      ]
+    }
+  )
+);
+LegendItem.displayName = "LegendItem";
+var MenuItem = ({
+  label,
+  icon: Icon,
+  shortcut,
+  children,
+  className,
+  level = 0,
+  href,
+  onClick
+}) => {
+  const hasChildren = children && children.length > 0;
+  const ButtonOrLink = href ? "a" : "button";
+  const clickTrigger = href ? { href } : { onClick };
+  return /* @__PURE__ */ jsxs("li", { className: "relative group/item", children: [
+    /* @__PURE__ */ jsxs(
+      ButtonOrLink,
+      {
+        ...clickTrigger,
+        className: cn(
+          "flex w-full items-center justify-between  px-4 py-2 ",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-none",
+          className,
+          level === 0 ? "font-medium" : "font-normal"
+          // "group-hover/item:bg-accent/50"
+        ),
+        role: hasChildren ? "menuitem" : void 0,
+        "aria-haspopup": hasChildren ? "true" : void 0,
+        "aria-expanded": hasChildren ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: label })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            shortcut && /* @__PURE__ */ jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: shortcut }),
+            hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          ] })
+        ]
+      }
     ),
     hasChildren && /* @__PURE__ */ jsx(
       "ul",
@@ -3288,6 +4197,39 @@ var MenuItem = ({
     )
   ] });
 };
+var MetricTile = React23.forwardRef(
+  ({ label, value, caption, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-0.5 border border-border bg-card p-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-meta text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-base font-medium leading-tight", children: value }),
+        caption != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: caption }) : null,
+        children
+      ]
+    }
+  )
+);
+MetricTile.displayName = "MetricTile";
+var MetricGrid = React23.forwardRef(
+  ({ minTileWidth = 120, className, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("grid gap-1.5", className),
+      style: {
+        gridTemplateColumns: `repeat(auto-fit, minmax(${minTileWidth}px, 1fr))`,
+        ...style
+      },
+      ...props,
+      children
+    }
+  )
+);
+MetricGrid.displayName = "MetricGrid";
 var NavVerticalItems = ({ items }) => /* @__PURE__ */ jsx(NavItems, { items, orientation: "vertical" });
 var NavVertical = ({
   className = "",
@@ -3334,35 +4276,42 @@ function PanelContent({
   title,
   titleText,
   children,
-  onClose,
-  showClose,
+  className,
   headerClassName,
   bodyClassName,
   footerContent,
   footerClassName,
-  closeIcon
+  headerActions,
+  actionsOnHover = false
 }) {
-  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Card, { className: `h-full border-none ${headerClassName}`, children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "relative flex flex-row items-center py-0 border-b h-[30px]", children: [
-      title && /* @__PURE__ */ jsx("span", { className: "leading-none font-bold ", children: title }),
-      titleText && /* @__PURE__ */ jsx("h4", { className: "font-bold leading-none", children: titleText }),
-      showClose && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          className: "absolute top-[0px] right-[5px] h-6 w-6 hover:bg-transparent hover:text-primary/80",
-          onClick: onClose,
-          children: [
-            closeIcon ? closeIcon : /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close panel" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { className: `overflow-y-auto h-full ${bodyClassName}`, children }),
-    footerContent ? /* @__PURE__ */ jsx(CardFooter, { className: footerClassName, children: footerContent }) : /* @__PURE__ */ jsx(Fragment, {})
-  ] }) });
+  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Card, { className: cn("flex h-full min-h-0 flex-col border-none", className), children: [
+    /* @__PURE__ */ jsxs(
+      CardHeader,
+      {
+        className: cn(
+          "group/panel-header flex h-[35px] shrink-0 flex-row items-center gap-2",
+          "space-y-0 border-b py-0 pr-1",
+          headerClassName
+        ),
+        children: [
+          title && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-bold leading-none", children: title }),
+          titleText && /* @__PURE__ */ jsx("h4", { className: "min-w-0 truncate font-bold leading-none", children: titleText }),
+          headerActions && headerActions.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "ml-auto flex shrink-0 items-center gap-1 pl-2",
+                actionsOnHover && "opacity-0 transition-opacity group-hover/panel-header:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100"
+              ),
+              children: /* @__PURE__ */ jsx(NavHorizontalItems, { items: headerActions })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: cn("min-h-0 flex-1 overflow-y-auto", bodyClassName), children }),
+    footerContent ? /* @__PURE__ */ jsx(CardFooter, { className: cn("shrink-0 border-t", footerClassName), children: footerContent }) : null
+  ] }) }) });
 }
 function PanelStack({
   sections,
@@ -3372,6 +4321,7 @@ function PanelStack({
   headerClassName,
   bodyClassName
 }) {
+  const groupRef = React23.useRef(null);
   const refs = React23.useRef({});
   const [collapsed, setCollapsed] = React23.useState(
     () => Object.fromEntries(sections.map((s) => [s.id, !!s.defaultCollapsed]))
@@ -3380,94 +4330,366 @@ function PanelStack({
   React23.useLayoutEffect(() => {
     if (didInit.current) return;
     didInit.current = true;
-    for (const section of sections) {
-      if (section.defaultCollapsed) refs.current[section.id]?.collapse();
+    const targets = sections.filter((s) => s.defaultCollapsed);
+    const expanded = sections.filter((s) => !s.defaultCollapsed);
+    if (targets.length === 0 || expanded.length === 0) return;
+    const group = groupRef.current;
+    const probe = refs.current[sections[0].id]?.getSize();
+    if (!group || !probe || probe.asPercentage <= 0) {
+      for (const s of targets) refs.current[s.id]?.collapse();
+      return;
+    }
+    const groupPx = probe.inPixels / probe.asPercentage * 100;
+    const collapsedPct = headerHeight / groupPx * 100;
+    const layout = group.getLayout();
+    const next = { ...layout };
+    let freed = 0;
+    for (const s of targets) {
+      const current = layout[s.id] ?? 0;
+      if (current <= collapsedPct) continue;
+      freed += current - collapsedPct;
+      next[s.id] = collapsedPct;
     }
+    if (freed === 0) return;
+    const total = expanded.reduce((sum, s) => sum + (layout[s.id] ?? 0), 0);
+    for (const s of expanded) {
+      const share = total > 0 ? (layout[s.id] ?? 0) / total : 1 / expanded.length;
+      next[s.id] = (layout[s.id] ?? 0) + freed * share;
+    }
+    for (const s of targets) refs.current[s.id]?.collapse();
+    group.setLayout(next);
   }, []);
   const toggle = (id) => {
     const ref = refs.current[id];
     if (!ref) return;
-    if (ref.isCollapsed()) ref.expand();
-    else ref.collapse();
+    if (!ref.isCollapsed()) {
+      ref.collapse();
+      return;
+    }
+    ref.expand();
+    if (!ref.isCollapsed()) return;
+    const group = groupRef.current;
+    if (!group) return;
+    const layout = group.getLayout();
+    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsed[panelId]).sort((a, b) => b[1] - a[1])[0];
+    if (!donor) return;
+    const [donorId, donorPct] = donor;
+    const share = donorPct / 2;
+    group.setLayout({
+      ...layout,
+      [id]: (layout[id] ?? 0) + share,
+      [donorId]: donorPct - share
+    });
   };
-  return /* @__PURE__ */ jsx(
-    ResizablePanelGroup,
+  return (
+    // Header actions are nav items, and those carry tooltips — provide the
+    // context here so a `PanelStack` works outside an app shell too. Nesting
+    // inside an app's own provider is harmless.
+    /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+      ResizablePanelGroup,
+      {
+        groupRef,
+        orientation: "vertical",
+        className: cn("h-full w-full", className),
+        children: sections.map((section, index) => {
+          const Icon = section.icon;
+          const isCollapsed = collapsed[section.id];
+          const flush = index > 0 && (isCollapsed || collapsed[sections[index - 1].id]);
+          return /* @__PURE__ */ jsxs(React23.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx(
+              ResizableHandle,
+              {
+                withHandle: withHandle && !flush,
+                className: cn(
+                  flush && "pointer-events-none bg-border aria-[orientation=horizontal]:h-px aria-[orientation=vertical]:w-px"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              ResizablePanel,
+              {
+                id: section.id,
+                collapsible: true,
+                collapsedSize: `${headerHeight}px`,
+                minSize: section.minSize ?? `${headerHeight + 64}px`,
+                defaultSize: section.defaultSize,
+                panelRef: (ref) => {
+                  refs.current[section.id] = ref;
+                },
+                onResize: (size) => {
+                  const next = size.inPixels <= headerHeight + 1;
+                  setCollapsed(
+                    (prev) => prev[section.id] === next ? prev : { ...prev, [section.id]: next }
+                  );
+                },
+                className: "flex flex-col overflow-hidden",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: { height: headerHeight },
+                      className: cn(
+                        "group/panel-header flex shrink-0 items-center pr-2 text-muted-foreground",
+                        headerClassName
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => toggle(section.id),
+                            "aria-expanded": !isCollapsed,
+                            className: cn(
+                              "flex h-full min-w-0 flex-1 items-center gap-1 pl-2 text-left",
+                              "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                            ),
+                            children: [
+                              isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-5 w-5 shrink-0" }),
+                              Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                              typeof section.title === "string" ? /* @__PURE__ */ jsx("span", { className: "truncate text-meta font-semibold uppercase tracking-wide", children: section.title }) : (
+                                // Custom node: rendered as-is so the consumer owns the
+                                // styling (icon, casing, colour, badges…).
+                                /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center", children: section.title })
+                              )
+                            ]
+                          }
+                        ),
+                        section.headerActions && section.headerActions.length > 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "flex items-center gap-1 pl-2",
+                              // Quiet at rest: the actions appear on hover over the
+                              // header, and never hide while one of them holds focus
+                              // or has its menu open — so the keyboard path stays
+                              // visible.
+                              (section.actionsOnHover ?? true) && "opacity-0 transition-opacity group-hover/panel-header:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100"
+                            ),
+                            children: /* @__PURE__ */ jsx(NavHorizontalItems, { items: section.headerActions })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("min-h-0 flex-1 overflow-auto", bodyClassName),
+                      hidden: isCollapsed,
+                      children: section.content
+                    }
+                  )
+                ]
+              }
+            )
+          ] }, section.id);
+        })
+      }
+    ) })
+  );
+}
+var PropertyList = React23.forwardRef(
+  ({ labelWidth = 78, className, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dl",
     {
-      orientation: "vertical",
-      className: cn("h-full w-full", className),
-      children: sections.map((section, index) => {
-        const Icon = section.icon;
-        const isCollapsed = collapsed[section.id];
-        return /* @__PURE__ */ jsxs(React23.Fragment, { children: [
-          index > 0 && /* @__PURE__ */ jsx(ResizableHandle, { withHandle }),
-          /* @__PURE__ */ jsxs(
-            ResizablePanel,
+      ref,
+      className: cn("flex flex-col", className),
+      style: {
+        "--property-label-width": typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth,
+        ...style
+      },
+      ...props,
+      children
+    }
+  )
+);
+PropertyList.displayName = "PropertyList";
+var PropertyRow = React23.forwardRef(
+  ({ label, mono, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex items-baseline gap-2 py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "shrink-0 truncate text-meta text-muted-foreground [width:var(--property-label-width,78px)]", children: label }),
+        /* @__PURE__ */ jsx("dd", { className: cn("min-w-0 flex-1", mono && "font-mono text-meta"), children })
+      ]
+    }
+  )
+);
+PropertyRow.displayName = "PropertyRow";
+var ProposalCard = React23.forwardRef(
+  ({
+    title,
+    source,
+    evidence,
+    evidenceTitle,
+    evidenceMeta,
+    consequence,
+    actions,
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
+    /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("h4", { className: "font-medium", children: title }),
+        source != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: source }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "border border-border bg-muted/30 p-2", children })
+    ] }),
+    evidence ? /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("h4", { className: "font-medium", children: evidenceTitle }),
+        evidenceMeta != null ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: evidenceMeta }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden border border-border", children: evidence })
+    ] }) : null,
+    consequence != null ? /* @__PURE__ */ jsx("p", { className: "text-meta text-muted-foreground", children: consequence }) : null,
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: actions }) : null
+  ] })
+);
+ProposalCard.displayName = "ProposalCard";
+var DotRating = React23.forwardRef(
+  ({ value, max = 3, onChange, readOnly, label, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: readOnly ? "img" : "radiogroup",
+      "aria-label": label ?? `weight ${value} of ${max}`,
+      className: cn("inline-flex items-center gap-1", className),
+      ...props,
+      children: Array.from({ length: max }, (_, i) => {
+        const n = i + 1;
+        const on = n <= value;
+        if (readOnly) {
+          return /* @__PURE__ */ jsx(
+            "span",
             {
-              collapsible: true,
-              collapsedSize: `${headerHeight}px`,
-              minSize: section.minSize ?? `${headerHeight + 64}px`,
-              defaultSize: section.defaultSize,
-              panelRef: (ref) => {
-                refs.current[section.id] = ref;
-              },
-              onResize: (size) => {
-                const next = size.inPixels <= headerHeight + 1;
-                setCollapsed(
-                  (prev) => prev[section.id] === next ? prev : { ...prev, [section.id]: next }
-                );
-              },
-              className: "flex flex-col overflow-hidden",
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: { height: headerHeight },
-                    className: cn(
-                      "flex shrink-0 items-center pr-2 text-muted-foreground",
-                      headerClassName
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => toggle(section.id),
-                          "aria-expanded": !isCollapsed,
-                          className: cn(
-                            "flex h-full min-w-0 flex-1 items-center gap-1 pl-2 text-left",
-                            "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                          ),
-                          children: [
-                            isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0" }),
-                            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
-                            typeof section.title === "string" ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-semibold uppercase tracking-wide", children: section.title }) : (
-                              // Custom node: rendered as-is so the consumer owns the
-                              // styling (icon, casing, colour, badges…).
-                              /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center", children: section.title })
-                            )
-                          ]
-                        }
-                      ),
-                      section.actions && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 pl-2", children: section.actions })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn("min-h-0 flex-1 overflow-auto", bodyClassName),
-                    hidden: isCollapsed,
-                    children: section.content
-                  }
-                )
-              ]
-            }
-          )
-        ] }, section.id);
+              "aria-hidden": true,
+              className: cn(
+                "size-2.5 rounded-full border",
+                on ? "border-primary bg-primary" : "border-muted-foreground bg-transparent"
+              )
+            },
+            n
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": value === n,
+            "aria-label": String(n),
+            onClick: () => onChange?.(n),
+            className: cn(
+              "size-2.5 cursor-pointer rounded-full border",
+              on ? "border-primary bg-primary" : "border-muted-foreground bg-transparent"
+            )
+          },
+          n
+        );
       })
     }
-  );
-}
+  )
+);
+DotRating.displayName = "DotRating";
+var RatingControl = React23.forwardRef(
+  ({
+    verdict,
+    onVerdictChange,
+    weight,
+    onWeightChange,
+    maxWeight = 3,
+    refines,
+    by,
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-2 border border-border bg-card p-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-meta", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Your verdict" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "becomes a Learning" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          by
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { role: "radiogroup", className: "inline-flex border border-border", children: ["appreciate", "depreciate"].map((v) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": verdict === v,
+              onClick: () => onVerdictChange?.(v),
+              className: cn(
+                "h-[22px] px-2 text-meta capitalize",
+                verdict === v ? v === "appreciate" ? "bg-success text-success-foreground" : "bg-warning text-warning-foreground" : "text-muted-foreground hover:bg-accent"
+              ),
+              children: v
+            },
+            v
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: "weight" }),
+            /* @__PURE__ */ jsx(DotRating, { value: weight, max: maxWeight, onChange: onWeightChange }),
+            /* @__PURE__ */ jsx("span", { className: "text-meta tabular-nums", children: weight })
+          ] }),
+          refines != null ? /* @__PURE__ */ jsxs("span", { className: "text-meta text-muted-foreground", children: [
+            "refines ",
+            /* @__PURE__ */ jsx("span", { className: "text-foreground", children: refines })
+          ] }) : null
+        ] }),
+        children
+      ]
+    }
+  )
+);
+RatingControl.displayName = "RatingControl";
+var RepairNote = React23.forwardRef(
+  ({ from, to, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-center gap-1 py-0.5 pl-4 text-meta text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono line-through decoration-muted-foreground/60", children: from }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2192" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: to })
+      ]
+    }
+  )
+);
+RepairNote.displayName = "RepairNote";
+var RetryNote = React23.forwardRef(
+  ({ attempt, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-wrap items-baseline gap-1.5 py-0.5 pl-4 text-meta text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        attempt != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium text-warning", children: attempt }) : null,
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  )
+);
+RetryNote.displayName = "RetryNote";
 function OptionRow({ option }) {
   const Icon = option.icon;
   return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
@@ -3476,7 +4698,7 @@ function OptionRow({ option }) {
       /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
       option.badge != null && /* @__PURE__ */ jsx("span", { className: "ml-auto pl-2", children: option.badge })
     ] }),
-    option.description != null && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+    option.description != null && /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: option.description })
   ] });
 }
 function RichSelect({
@@ -3590,6 +4812,123 @@ function RichSelect({
     )
   ] });
 }
+var SearchInput = ({
+  value,
+  onChange,
+  className,
+  inputSize = "default",
+  placeholder = "Search...",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      className: cn(
+        "flex w-full rounded-control border border-input bg-background ring-offset-background",
+        "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        inputSize === "sm" ? "h-[26px] px-2 py-0 text-meta" : "h-10 px-3 py-2 text-base",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var SectionHeader = React23.forwardRef(({ icon, title, count, actions, bare, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex h-[35px] shrink-0 items-center gap-2 px-2",
+      !bare && "border-b border-border",
+      className
+    ),
+    ...props,
+    children: [
+      icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-3.5", children: icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-medium", children: title }),
+      count != null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground", children: count }) : null,
+      actions ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-1", children: actions }) : null
+    ]
+  }
+));
+SectionHeader.displayName = "SectionHeader";
+var Sparkline = React23.forwardRef(
+  ({
+    values,
+    width = 72,
+    height = 20,
+    color = "var(--color-data-1)",
+    area,
+    endMarker = true,
+    label,
+    className,
+    ...props
+  }, ref) => {
+    const pad = 3;
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const span = max - min || 1;
+    const stepX = values.length > 1 ? (width - pad * 2) / (values.length - 1) : 0;
+    const points = values.map((v, i) => [
+      pad + i * stepX,
+      height - pad - (v - min) / span * (height - pad * 2)
+    ]);
+    const d = points.map((p, i) => `${i ? "L" : "M"}${p[0]} ${p[1]}`).join(" ");
+    const last = points[points.length - 1];
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        className: cn("shrink-0 overflow-visible", className),
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        ...props,
+        children: [
+          area ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: `${d} L${last[0]} ${height} L${points[0][0]} ${height} Z`,
+              fill: color,
+              opacity: 0.1
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          endMarker ? /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: last[0],
+              cy: last[1],
+              r: 4,
+              fill: color,
+              stroke: "var(--color-card)",
+              strokeWidth: 2
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
 function TabbedPanel({
   tabs,
   defaultTab,
@@ -3600,10 +4939,7 @@ function TabbedPanel({
   headerClassName,
   bodyClassName,
   footerClassName,
-  footerContent,
-  showClose: _showClose,
-  onClose: _onClose,
-  closeIcon: _closeIcon
+  footerContent
 }) {
   const [internalTab, setInternalTab] = React23__default.useState(defaultTab || tabs[0]?.value);
   const currentTab = activeTab !== void 0 ? activeTab : internalTab;
@@ -3628,13 +4964,7 @@ function TabbedPanel({
         },
         tab.value
       )) }),
-      headerActions && /* @__PURE__ */ jsx("div", { className: "flex items-center h-full", children: /* @__PURE__ */ jsx(
-        NavHorizontal,
-        {
-          className: "h-full",
-          ...headerActions
-        }
-      ) })
+      headerActions && headerActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-auto flex h-full shrink-0 items-center gap-1 pr-1", children: /* @__PURE__ */ jsx(NavHorizontalItems, { items: headerActions }) })
     ] }),
     tabs.map((tab) => /* @__PURE__ */ jsx(
       TabsContent,
@@ -3648,24 +4978,139 @@ function TabbedPanel({
     footerContent && /* @__PURE__ */ jsx(CardFooter, { className: footerClassName, children: footerContent })
   ] }) }) }) });
 }
-var SearchInput = ({ value, onChange, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    "input",
+var TemplatePicker = React23.forwardRef(({ heading, options, value, onSelect, footnote, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ref,
+    className: cn("flex w-full flex-col border border-border bg-card", className),
+    ...props,
+    children: [
+      heading != null ? /* @__PURE__ */ jsx("div", { className: "flex h-6 shrink-0 items-center border-b border-border px-2 text-meta text-muted-foreground", children: heading }) : null,
+      /* @__PURE__ */ jsx("div", { role: "listbox", className: "flex flex-col", children: options.map((o) => {
+        const disabled = o.unavailable != null;
+        const selected = value === o.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": selected,
+            disabled,
+            onClick: () => onSelect?.(o.id),
+            className: cn(
+              "flex h-7 items-center gap-2 px-2 text-left",
+              selected && "bg-accent",
+              disabled ? "cursor-not-allowed opacity-50" : "hover:bg-accent/60"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-3 shrink-0 text-primary", children: selected ? "\u2022" : "" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-meta", children: o.id }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground", children: o.kind }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-meta text-muted-foreground", children: o.unavailable ?? o.note })
+            ]
+          },
+          o.id
+        );
+      }) }),
+      footnote != null ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-2 py-1 text-meta text-muted-foreground", children: footnote }) : null
+    ]
+  }
+));
+TemplatePicker.displayName = "TemplatePicker";
+var MARKER = {
+  prompt: "$",
+  output: "\u2192",
+  comment: "#"
+};
+var Terminal = React23.forwardRef(
+  ({ cursor, columnTemplate = "150px minmax(0,1fr) auto auto", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
     {
-      type: "text",
-      value,
-      onChange: (e) => onChange(e.target.value),
-      placeholder: "Search...",
+      ref,
+      style: { "--terminal-cols": columnTemplate },
       className: cn(
-        "flex h-10 w-full rounded-control border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "w-full px-2 py-1 border rounded-control dark:bg-neutral-800",
-        props?.className
-      )
+        "overflow-x-auto border border-border bg-muted/40 p-2 font-mono text-meta",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        cursor ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "mt-0.5 inline-block h-3.5 w-1.5 animate-pulse bg-foreground align-middle motion-reduce:animate-none"
+          }
+        ) : null
+      ]
     }
-  );
-};
+  )
+);
+Terminal.displayName = "Terminal";
+var TerminalLine = React23.forwardRef(
+  ({ kind = "output", columns, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "items-baseline gap-2 whitespace-pre",
+        columns ? "grid [grid-template-columns:auto_var(--terminal-cols)]" : "flex",
+        kind === "comment" && "text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "w-3 shrink-0",
+              kind === "prompt" ? "text-primary" : "text-muted-foreground"
+            ),
+            children: MARKER[kind]
+          }
+        ),
+        columns ? columns.map((c, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "min-w-0 truncate",
+              i === columns.length - 1 && "text-muted-foreground"
+            ),
+            children: c
+          },
+          i
+        )) : /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+      ]
+    }
+  )
+);
+TerminalLine.displayName = "TerminalLine";
+var TimelineList = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("ol", { ref, className: cn("flex flex-col", className), ...props, children }));
+TimelineList.displayName = "TimelineList";
+var TimelineEntry = React23.forwardRef(({ when, title, marker, className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "li",
+  {
+    ref,
+    className: cn("flex gap-2 border-b border-border py-1.5 last:border-b-0", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex w-[72px] shrink-0 items-baseline gap-1.5 text-meta text-muted-foreground", children: [
+        marker ? /* @__PURE__ */ jsx("span", { className: "translate-y-1", children: marker }) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: when })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        title != null ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }) : null,
+        children
+      ] })
+    ]
+  }
+));
+TimelineEntry.displayName = "TimelineEntry";
 var Toolbar = () => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-5 items-center space-x-2 text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-5 items-center space-x-2", children: [
     /* @__PURE__ */ jsx(
       ButtonWithTooltip,
       {
@@ -3793,7 +5238,7 @@ function Tour({
         /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 p-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Badge, { variant: "soft", className: "tracking-wider", children: badgeLabel }),
-            showCounter && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            showCounter && /* @__PURE__ */ jsxs("span", { className: "text-meta text-muted-foreground", children: [
               current + 1,
               " / ",
               total
@@ -3804,7 +5249,7 @@ function Tour({
             {
               variant: "ghost",
               size: "sm",
-              className: "-mr-1 h-7 gap-1 px-2 text-xs text-muted-foreground [&_svg]:size-3.5",
+              className: "-mr-1 h-7 gap-1 px-2 text-meta text-muted-foreground [&_svg]:size-3.5",
               onClick: ctrl.exit,
               children: [
                 /* @__PURE__ */ jsx(X, {}),
@@ -3823,10 +5268,10 @@ function Tour({
         /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-3 pt-2", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug", children: step.title }),
           step.content ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            step.body && /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-muted-foreground", children: step.body }),
+            step.body && /* @__PURE__ */ jsx("div", { className: "leading-relaxed text-muted-foreground", children: step.body }),
             step.callout && /* @__PURE__ */ jsxs("div", { className: "rounded-r-md border-l-2 border-primary bg-muted/40 p-3", children: [
               step.callout.label && /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-primary", children: step.callout.label }),
-              /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed", children: step.callout.content })
+              /* @__PURE__ */ jsx("div", { className: "leading-relaxed", children: step.callout.content })
             ] }),
             step.references && step.references.items.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               step.references.label && /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: step.references.label }),
@@ -3987,7 +5432,7 @@ function UnderDevelopment({
     /* @__PURE__ */ jsx(Construction, { size: iconSize, className: "text-primary" }),
     /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: title }),
     /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-md", children: description }),
-    /* @__PURE__ */ jsx("span", { className: "mt-4 px-3 py-1 bg-yellow-100 text-yellow-800 text-sm", children: "Coming Soon" })
+    /* @__PURE__ */ jsx("span", { className: "mt-4 px-3 py-1 bg-yellow-100 text-yellow-800", children: "Coming Soon" })
   ] });
 }
 var TypographyH1 = React23.forwardRef(
@@ -4125,7 +5570,7 @@ var TypographyInlineCode = React23.forwardRef(
       {
         ref,
         className: cn(
-          "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+          "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-meta font-semibold",
           className
         ),
         ...props
@@ -4173,7 +5618,7 @@ var TypographySmall = React23.forwardRef(
       {
         ref,
         className: cn(
-          "text-sm font-medium leading-none",
+          "text-meta font-medium leading-none",
           className
         ),
         ...props
@@ -4189,7 +5634,7 @@ var TypographyMuted = React23.forwardRef(
       {
         ref,
         className: cn(
-          "text-sm text-muted-foreground",
+          "text-muted-foreground",
           className
         ),
         ...props
@@ -4250,6 +5695,6 @@ var Typography = {
   Pre: TypographyPre
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonWithTooltip, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWithHeader, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChatSession, ChatSessionActivityRow, ChatSessionActivitySubLine, ChatSessionComposer, ChatSessionDisclosure, ChatSessionMessage, ChatSessionMessageOptions, ChatSessionProgressLine, ChatSessionPromptRow, ChatSessionStatusBar, ChatSessionTaskGroup, ChatSessionTaskRow, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorBoundary, HoverCard, HoverCardContent, HoverCardTrigger, Item3 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavBase, NavHorizontal, NavHorizontalItems, NavItems, NavVertical, NavVerticalItems, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NestedMenu, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelContent, PanelStack, Popover, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichSelect, ScrollArea, ScrollBar, SearchInput, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Spinner, TabbedPanel, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TreeItem, TreeView, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyH5, TypographyH6, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographyPre, TypographySmall, UnderDevelopment, badgeVariants, buttonGroupVariants, buttonVariants, chatSessionGutterClass, cn, navigationMenuTriggerStyle, toggleVariants, useSidebar, useTour };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChip, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppStatusBar, Avatar, AvatarFallback, AvatarImage, Badge, BarChartH, BarChartV, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, ButtonWithTooltip, CannotAnswerCard, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardWithHeader, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChatSession, ChatSessionActivityRow, ChatSessionActivitySubLine, ChatSessionComposer, ChatSessionContextChip, ChatSessionDisclosure, ChatSessionMessage, ChatSessionMessageOptions, ChatSessionProgressLine, ChatSessionPromptRow, ChatSessionStatusBar, ChatSessionTaskGroup, ChatSessionTaskRow, CitationList, CitationMarker, CitationRow, ClarifyCard, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextBar, DiagnosisCard, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffList, DiffRow, DivergingBar, DotRating, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmissionCard, EmissionHeader, EmptyState, EmptyStateLock, ErrorBoundary, FilterBar, FilterChip, HeatStrip, HoverCard, HoverCardContent, HoverCardTrigger, Item3 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Legend, LegendItem, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricGrid, MetricTile, NavBase, NavHorizontal, NavHorizontalItems, NavItems, NavVertical, NavVerticalItems, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NestedMenu, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PanelContent, PanelStack, Popover, PopoverContent, PopoverTrigger, Progress, PropertyList, PropertyRow, ProposalCard, RatingControl, RepairNote, ResizableHandle, ResizablePanel, ResizablePanelGroup, RetryNote, RichSelect, ScrollArea, ScrollBar, SearchInput, SectionHeader, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Sparkline, Spinner, StatusDot, TabbedPanel, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TemplatePicker, Terminal, TerminalLine, TimelineEntry, TimelineList, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TreeItem, TreeView, Typography, TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyH5, TypographyH6, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographyPre, TypographySmall, UnderDevelopment, agentChipVariants, badgeVariants, buttonGroupVariants, buttonVariants, chatSessionGutterClass, cn, navigationMenuTriggerStyle, statusDotVariants, toggleVariants, useSidebar, useTour };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map