@usetheo/ui 0.13.0 → 0.13.2

package/registry/index.json

@@ -84,6 +84,12 @@
       "title": "AgentTimeline",
       "description": "Vertical list of agent events."
     },
+    {
+      "name": "agent-tool-renderer",
+      "type": "registry:ui",
+      "title": "AgentToolRenderer",
+      "description": "Overridable tool-renderer registry for agent chat surfaces — dispatches a UIMessage tool part to a rich renderer (diff, terminal, code, created-files, data-table) by classification kind, falling back to the generic ToolCallPart for anything unmapped."
+    },
     {
       "name": "agent-types",
       "type": "registry:lib",
@@ -198,6 +204,12 @@
       "title": "Checkbox",
       "description": "Built on Radix Checkbox — accessible binary control with focus ring and indeterminate state support."
     },
+    {
+      "name": "choice-prompt",
+      "type": "registry:block",
+      "title": "ChoicePrompt",
+      "description": "Single-select ask-the-user card with number-key shortcuts, an Other free-text option, and a side-by-side preview pane."
+    },
     {
       "name": "cn",
       "type": "registry:lib",
@@ -222,6 +234,12 @@
       "title": "ConfirmDialog",
       "description": "Controlled confirmation modal built on Dialog. Auto-focuses Cancel on open (deliberate — NOT the destructive button). Optional intent=destructive switches the confirm button to destructive variant. Optional confirmationPhrase enables typed-confirmation guard (case-sensitive, empty string = no phrase). Async onConfirm shows Loader2 spinner; resolve closes the dialog; reject keeps it open so consumers can surface their own error. Enter in the phrase input triggers confirm when matched."
     },
+    {
+      "name": "confirm-prompt",
+      "type": "registry:block",
+      "title": "ConfirmPrompt",
+      "description": "Binary yes/no ask-the-user card with an optional destructive variant exposed as an alertdialog."
+    },
     {
       "name": "context-card",
       "type": "registry:ui",
@@ -304,7 +322,7 @@
       "name": "dropdown-menu",
       "type": "registry:ui",
       "title": "DropdownMenu",
-      "description": "Accessible dropdown menu primitive built on @radix-ui/react-dropdown-menu. Sub-components attached via Object.assign (Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, Shortcut, Group, Sub, SubTrigger, SubContent, RadioGroup). Styled with @usetheo/ui design tokens. Consolidates the 5 prior direct-Radix usages under a single wrapper."
+      "description": "Accessible dropdown menu primitive built on @radix-ui/react-dropdown-menu. Sub-components attached via Object.assign (Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, Shortcut, Group, Sub, SubTrigger, SubContent, RadioGroup). Styled with @theokit/ui design tokens. Consolidates the 5 prior direct-Radix usages under a single wrapper."
     },
     {
       "name": "empty-state",
@@ -318,6 +336,12 @@
       "title": "EnvVarEditor",
       "description": "Table-like editor for environment variables."
     },
+    {
+      "name": "env",
+      "type": "registry:lib",
+      "title": "Environment helpers",
+      "description": "Typed environment helpers (isDev / isProd) reading NODE_ENV through a single accessor that works in browser bundlers, Node/SSR, and unbundled browsers."
+    },
     {
       "name": "folder-context-card",
       "type": "registry:ui",
@@ -408,6 +432,12 @@
       "title": "MentionMenu",
       "description": "Keyboard-navigable popover for slash-command / @file / #memory"
     },
+    {
+      "name": "metric-card",
+      "type": "registry:ui",
+      "title": "MetricCard",
+      "description": "Dashboard metric tile composite — title + value + delta with trend semantics. Supports invertTrend for cost/churn metrics (EC-17)."
+    },
     {
       "name": "metrics-panel",
       "type": "registry:block",
@@ -432,6 +462,12 @@
       "title": "ModelSelector",
       "description": "Chip dropdown for picking the active LLM."
     },
+    {
+      "name": "multi-select-prompt",
+      "type": "registry:block",
+      "title": "MultiSelectPrompt",
+      "description": "Multi-select ask-the-user card with number-key toggles, an Other free-text option, and a side-by-side preview pane."
+    },
     {
       "name": "page-shell",
       "type": "registry:ui",
@@ -510,6 +546,12 @@
       "title": "ProjectSwitcher",
       "description": "Sidebar header for a code agent app."
     },
+    {
+      "name": "prompt",
+      "type": "registry:lib",
+      "title": "Prompt option helpers",
+      "description": "Shared option type + helpers (PromptOption, Other-value, number-key mapping) used by the prompt composites."
+    },
     {
       "name": "quick-action-chips",
       "type": "registry:ui",
@@ -634,7 +676,7 @@
       "name": "slide-deck",
       "type": "registry:block",
       "title": "SlideDeck",
-      "description": "Composite engine that orchestrates N <Slide> primitives. Keyboard / touch / hash routing, thumbnails, presenter view, fullscreen, CSS transitions, Marpit-style fragments, PDF export. Subpath-isolated bundle in @usetheo/ui."
+      "description": "Composite engine that orchestrates N <Slide> primitives. Keyboard / touch / hash routing, thumbnails, presenter view, fullscreen, CSS transitions, Marpit-style fragments, PDF export. Subpath-isolated bundle in @theokit/ui."
     },
     {
       "name": "slide-plugin-emoji",
@@ -664,7 +706,7 @@
       "name": "slide",
       "type": "registry:ui",
       "title": "Slide",
-      "description": "View-only primitive that renders Markdown + YAML frontmatter as a themed slide surface (Marp-inspired). Sanitized hast pipeline, two built-in themes, opt-in plugin system. Subpath-isolated bundle in @usetheo/ui."
+      "description": "View-only primitive that renders Markdown + YAML frontmatter as a themed slide surface (Marp-inspired). Sanitized hast pipeline, two built-in themes, opt-in plugin system. Subpath-isolated bundle in @theokit/ui."
     },
     {
       "name": "social-auth-row",
@@ -684,6 +726,12 @@
       "title": "StatusDot",
       "description": "Semantic status indicator (small colored circle + optional label). Five status kinds: live (success), building (warning, auto-pulses), failed (destructive), idle (muted), warning (warning, static). Three sizes (xs 6px / sm 8px default / md 10px). When neither label nor aria-label is provided, auto-applies aria-label=status and emits a dev warning."
     },
+    {
+      "name": "status-indicator",
+      "type": "registry:ui",
+      "title": "StatusIndicator",
+      "description": "Operational state indicator (online/offline/degraded/info) consuming status-* semantic tokens (ADR-0007)."
+    },
     {
       "name": "steps-rail",
       "type": "registry:ui",
@@ -750,6 +798,12 @@
       "title": "TerminalPanel",
       "description": "Minimal terminal output viewer."
     },
+    {
+      "name": "text-prompt",
+      "type": "registry:block",
+      "title": "TextPrompt",
+      "description": "Free-text ask-the-user card with single-line or multi-line input and an optional required gate."
+    },
     {
       "name": "textarea",
       "type": "registry:ui",
@@ -850,7 +904,7 @@
       "name": "whiteboard",
       "type": "registry:ui",
       "title": "Whiteboard",
-      "description": "View-only primitive that renders a declarative JSON scene as SVG with a hand-drawn aesthetic. Pan + zoom built-in; no editor surface. Subpath-isolated bundle in @usetheo/ui."
+      "description": "View-only primitive that renders a declarative JSON scene as SVG with a hand-drawn aesthetic. Pan + zoom built-in; no editor surface. Subpath-isolated bundle in @theokit/ui."
     }
   ]
 }

package/registry/r/account-menu.json

@@ -18,7 +18,7 @@
       "path": "components/composites/account-menu/account-menu.tsx",
       "type": "registry:ui",
       "target": "components/ui/account-menu.tsx",
-      "content": "import { ChevronsUpDown } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Avatar } from \"@/components/ui/avatar\";\nimport { PlanBadge, type PlanTier } from \"@/components/ui/plan-badge\";\n\n/**\n * AccountMenu — sidebar header for PaaS surfaces.\n *\n * Renders avatar + name + (optional) plan badge + (optional) secondary line.\n * Dual mode: with `onClick`, renders as a `<button>` with a `ChevronsUpDown`\n * trailing icon (account picker affordance); without, renders as a static\n * `<div>` (read-only display, not focusable).\n *\n * Composition:\n *\n *   <Sidebar.Header className=\"p-0\">\n *     <AccountMenu\n *       name=\"paulohenriquevn\"\n *       avatar=\"https://avatars.githubusercontent.com/u/12345\"\n *       plan=\"hobby\"\n *       onClick={openAccountSwitcher}\n *     />\n *   </Sidebar.Header>\n *\n * Avatar handling:\n *   - URL (`http(s)://` or `/`) → `<Avatar.Image>` with `<Avatar.Fallback>` initials\n *   - Short string (≤2 chars) → treated as initials directly\n *   - Undefined → initials derived from the first character of `name`\n *\n * PaaS-shape sibling of `<ProjectSwitcher>` (workspace + branch + agent-status).\n * Same dual-mode (interactive vs static) pattern; different semantics.\n */\n\nexport interface AccountMenuProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"name\"> {\n  /** Display name (username, email, org name). */\n  name: ReactNode;\n  /** Avatar URL or 1-2-char initials. If undefined, derives initials from `name`. */\n  avatar?: string;\n  /** Plan tier — renders inline `<PlanBadge size=\"sm\">`. Omit for none. */\n  plan?: PlanTier;\n  /** Optional secondary line below name (e.g. email). */\n  secondary?: ReactNode;\n  /** Make the row interactive (button) with a trailing chevron. */\n  onClick?: () => void;\n}\n\nconst URL_RE = /^(?:https?:\\/\\/|\\/)/;\n\nfunction deriveInitials(name: ReactNode, avatar: string | undefined): string {\n  if (avatar && !URL_RE.test(avatar) && avatar.length <= 2) {\n    return avatar.toUpperCase();\n  }\n  if (typeof name === \"string\" && name.length > 0) {\n    return name.charAt(0).toUpperCase();\n  }\n  return \"?\";\n}\n\nconst AccountMenu = forwardRef<HTMLElement, AccountMenuProps>(\n  ({ className, name, avatar, plan, secondary, onClick, ...props }, ref) => {\n    const interactive = typeof onClick === \"function\";\n    const initials = deriveInitials(name, avatar);\n    const isUrlAvatar = avatar !== undefined && URL_RE.test(avatar);\n    const altText = typeof name === \"string\" ? name : \"account\";\n\n    const content = (\n      <>\n        <Avatar size=\"sm\">\n          {isUrlAvatar ? <Avatar.Image src={avatar} alt={altText} /> : null}\n          <Avatar.Fallback delayMs={0}>{initials}</Avatar.Fallback>\n        </Avatar>\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <span className=\"truncate font-medium text-body-sm text-foreground\">{name}</span>\n            {plan ? <PlanBadge plan={plan} size=\"sm\" /> : null}\n          </div>\n          {secondary ? (\n            <span className=\"truncate text-label text-muted-foreground\">{secondary}</span>\n          ) : null}\n        </div>\n\n        {interactive ? (\n          <ChevronsUpDown className=\"size-3 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n        ) : null}\n      </>\n    );\n\n    const baseClass = cn(\n      \"flex w-full items-center gap-3 px-3 py-2\",\n      interactive &&\n        cn(\n          \"rounded-md text-left transition-colors\",\n          \"hover:bg-muted/40\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n        ),\n      className,\n    );\n\n    if (interactive) {\n      const { ...buttonProps } = props as ButtonHTMLAttributes<HTMLButtonElement>;\n      return (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          className={baseClass}\n          onClick={onClick}\n          {...buttonProps}\n        >\n          {content}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={baseClass}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      >\n        {content}\n      </div>\n    );\n  },\n);\nAccountMenu.displayName = \"AccountMenu\";\n\nexport { AccountMenu };\n"
+      "content": "import { ChevronsUpDown } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Avatar } from \"@/components/ui/avatar\";\nimport { PlanBadge, type PlanTier } from \"@/components/ui/plan-badge\";\n\n/**\n * AccountMenu — sidebar header for PaaS surfaces.\n *\n * Renders avatar + name + (optional) plan badge + (optional) secondary line.\n * Dual mode: with `onClick`, renders as a `<button>` with a `ChevronsUpDown`\n * trailing icon (account picker affordance); without, renders as a static\n * `<div>` (read-only display, not focusable).\n *\n * Composition:\n *\n *   <Sidebar.Header className=\"p-0\">\n *     <AccountMenu\n *       name=\"paulohenriquevn\"\n *       avatar=\"https://avatars.githubusercontent.com/u/12345\"\n *       plan=\"hobby\"\n *       onClick={openAccountSwitcher}\n *     />\n *   </Sidebar.Header>\n *\n * Avatar handling:\n *   - URL (`http(s)://` or `/`) → `<Avatar.Image>` with `<Avatar.Fallback>` initials\n *   - Short string (≤2 chars) → treated as initials directly\n *   - Undefined → initials derived from the first character of `name`\n *\n * PaaS-shape sibling of `<ProjectSwitcher>` (workspace + branch + agent-status).\n * Same dual-mode (interactive vs static) pattern; different semantics.\n */\n\nexport interface AccountMenuProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"name\"> {\n  /** Display name (username, email, org name). */\n  name: ReactNode;\n  /** Avatar URL or 1-2-char initials. If undefined, derives initials from `name`. */\n  avatar?: string;\n  /** Plan tier — renders inline `<PlanBadge size=\"sm\">`. Omit for none. */\n  plan?: PlanTier;\n  /** Optional secondary line below name (e.g. email). */\n  secondary?: ReactNode;\n  /** Make the row interactive (button) with a trailing chevron. */\n  onClick?: () => void;\n}\n\nconst URL_RE = /^(?:https?:\\/\\/|\\/)/;\n\nfunction deriveInitials(name: ReactNode, avatar: string | undefined): string {\n  if (avatar && !URL_RE.test(avatar) && avatar.length <= 2) {\n    return avatar.toUpperCase();\n  }\n  if (typeof name === \"string\" && name.length > 0) {\n    return name.charAt(0).toUpperCase();\n  }\n  return \"?\";\n}\n\nconst AccountMenu = forwardRef<HTMLElement, AccountMenuProps>(\n  ({ className, name, avatar, plan, secondary, onClick, ...props }, ref) => {\n    const interactive = typeof onClick === \"function\";\n    const initials = deriveInitials(name, avatar);\n    const isUrlAvatar = avatar !== undefined && URL_RE.test(avatar);\n    const altText = typeof name === \"string\" ? name : \"account\";\n\n    const content = (\n      <>\n        <Avatar size=\"sm\">\n          {isUrlAvatar ? <Avatar.Image src={avatar} alt={altText} /> : null}\n          <Avatar.Fallback delayMs={0}>{initials}</Avatar.Fallback>\n        </Avatar>\n\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <span className=\"truncate font-medium text-body-sm text-foreground\">{name}</span>\n            {plan ? <PlanBadge plan={plan} size=\"sm\" /> : null}\n          </div>\n          {secondary ? (\n            <span className=\"truncate text-label text-muted-foreground\">{secondary}</span>\n          ) : null}\n        </div>\n\n        {interactive ? (\n          <ChevronsUpDown className=\"size-3 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n        ) : null}\n      </>\n    );\n\n    const baseClass = cn(\n      \"flex w-full items-center gap-3 px-3 py-2\",\n      interactive &&\n        cn(\n          \"rounded-md text-left transition-colors\",\n          \"hover:bg-muted/40\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n        ),\n      className,\n    );\n\n    if (interactive) {\n      const { ...buttonProps } = props as ButtonHTMLAttributes<HTMLButtonElement>;\n      return (\n        <button\n          data-slot=\"account-menu\"\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          className={baseClass}\n          onClick={onClick}\n          {...buttonProps}\n        >\n          {content}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        data-slot=\"account-menu\"\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={baseClass}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      >\n        {content}\n      </div>\n    );\n  },\n);\nAccountMenu.displayName = \"AccountMenu\";\n\nexport { AccountMenu };\n"
     }
   ]
 }

package/registry/r/action-bar.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/action-bar/action-bar.tsx",
       "type": "registry:ui",
       "target": "components/ui/action-bar.tsx",
-      "content": "import { Filter, Loader2, Search } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * ActionBar — page-top action strip primitive.\n *\n * A horizontal flexbox row with three optional slots:\n *   - Search input (flex-1, grows to fill)\n *   - Filter icon button (next to search)\n *   - Primary action button (right-aligned)\n *\n * Returns `null` when no props are provided — don't render an empty\n * bar. Used standalone or composed inside `<PageShell>` (Brief #5).\n *\n * @example\n *   <ActionBar\n *     search={{ placeholder: \"Search projects…\", value: q, onChange: setQ }}\n *     primaryAction={{ label: \"New project\", icon: Plus, onClick: openModal }}\n *   />\n */\n\nexport interface ActionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  search?: {\n    placeholder: string;\n    value: string;\n    onChange: (value: string) => void;\n  };\n  primaryAction?: {\n    label: ReactNode;\n    icon?: ElementType;\n    onClick: () => void;\n    loading?: boolean;\n  };\n  onFilterClick?: () => void;\n}\n\nconst ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(\n  ({ className, search, primaryAction, onFilterClick, ...props }, ref) => {\n    if (!search && !primaryAction && !onFilterClick) {\n      return null;\n    }\n\n    const PrimaryIcon = primaryAction?.icon;\n    const isLoading = primaryAction?.loading === true;\n\n    return (\n      <div ref={ref} className={cn(\"flex w-full items-center gap-2\", className)} {...props}>\n        {search ? (\n          <div className=\"relative flex-1\">\n            <Search\n              aria-hidden=\"true\"\n              className=\"-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground\"\n            />\n            <input\n              type=\"search\"\n              placeholder={search.placeholder}\n              value={search.value}\n              onChange={(e) => search.onChange(e.target.value)}\n              className={cn(\n                \"w-full rounded-md border border-border/40 bg-card py-2 pr-3 pl-9\",\n                \"font-sans text-body-sm text-foreground placeholder:text-muted-foreground\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              )}\n            />\n          </div>\n        ) : null}\n        {onFilterClick !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={onFilterClick}\n            aria-label=\"Filter\"\n            className={cn(\n              \"inline-flex size-9 items-center justify-center rounded-md border border-border/40\",\n              \"text-muted-foreground transition-colors\",\n              \"hover:bg-muted hover:text-foreground\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            <Filter aria-hidden=\"true\" className=\"size-4\" />\n          </button>\n        ) : null}\n        {primaryAction !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={primaryAction.onClick}\n            disabled={isLoading}\n            className={cn(\n              \"ml-auto inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2\",\n              \"font-medium font-sans text-body-sm text-primary-foreground\",\n              \"transition-colors hover:bg-primary-deep\",\n              \"disabled:cursor-not-allowed disabled:opacity-60\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n            )}\n          >\n            {isLoading ? (\n              <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" />\n            ) : PrimaryIcon ? (\n              <PrimaryIcon aria-hidden=\"true\" className=\"size-4\" />\n            ) : null}\n            {primaryAction.label}\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\nActionBar.displayName = \"ActionBar\";\n\nexport { ActionBar };\n"
+      "content": "import { Filter, Loader2, Search } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * ActionBar — page-top action strip primitive.\n *\n * A horizontal flexbox row with three optional slots:\n *   - Search input (flex-1, grows to fill)\n *   - Filter icon button (next to search)\n *   - Primary action button (right-aligned)\n *\n * Returns `null` when no props are provided — don't render an empty\n * bar. Used standalone or composed inside `<PageShell>` (Brief #5).\n *\n * @example\n *   <ActionBar\n *     search={{ placeholder: \"Search projects…\", value: q, onChange: setQ }}\n *     primaryAction={{ label: \"New project\", icon: Plus, onClick: openModal }}\n *   />\n */\n\nexport interface ActionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  search?: {\n    placeholder: string;\n    value: string;\n    onChange: (value: string) => void;\n  };\n  primaryAction?: {\n    label: ReactNode;\n    icon?: ElementType;\n    onClick: () => void;\n    loading?: boolean;\n  };\n  onFilterClick?: () => void;\n}\n\nconst ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(\n  ({ className, search, primaryAction, onFilterClick, ...props }, ref) => {\n    if (!search && !primaryAction && !onFilterClick) {\n      return null;\n    }\n\n    const PrimaryIcon = primaryAction?.icon;\n    const isLoading = primaryAction?.loading === true;\n\n    return (\n      <div\n        data-slot=\"action-bar\"\n        ref={ref}\n        className={cn(\"flex w-full items-center gap-2\", className)}\n        {...props}\n      >\n        {search ? (\n          <div className=\"relative flex-1\">\n            <Search\n              aria-hidden=\"true\"\n              className=\"-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground\"\n            />\n            <input\n              type=\"search\"\n              placeholder={search.placeholder}\n              value={search.value}\n              onChange={(e) => search.onChange(e.target.value)}\n              className={cn(\n                \"w-full rounded-md border border-border/40 bg-card py-2 pr-3 pl-9\",\n                \"font-sans text-body-sm text-foreground placeholder:text-muted-foreground\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              )}\n            />\n          </div>\n        ) : null}\n        {onFilterClick !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={onFilterClick}\n            aria-label=\"Filter\"\n            className={cn(\n              \"inline-flex size-9 items-center justify-center rounded-md border border-border/40\",\n              \"text-muted-foreground transition-colors\",\n              \"hover:bg-muted hover:text-foreground\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            <Filter aria-hidden=\"true\" className=\"size-4\" />\n          </button>\n        ) : null}\n        {primaryAction !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={primaryAction.onClick}\n            disabled={isLoading}\n            className={cn(\n              \"ml-auto inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2\",\n              \"font-medium font-sans text-body-sm text-primary-foreground\",\n              \"transition-colors hover:bg-primary-deep\",\n              \"disabled:cursor-not-allowed disabled:opacity-60\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n            )}\n          >\n            {isLoading ? (\n              <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" />\n            ) : PrimaryIcon ? (\n              <PrimaryIcon aria-hidden=\"true\" className=\"size-4\" />\n            ) : null}\n            {primaryAction.label}\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\nActionBar.displayName = \"ActionBar\";\n\nexport { ActionBar };\n"
     }
   ]
 }

package/registry/r/agent-composer.json

@@ -16,7 +16,7 @@
       "path": "components/composites/agent-composer/agent-composer.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-composer.tsx",
-      "content": "import { useMemo, useState } from \"react\";\nimport type { ComponentProps, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type MentionItem,\n  MentionMenu,\n  type MentionTrigger,\n} from \"@/components/ui/mention-menu\";\nimport { ChatComposer } from \"@/components/ui/chat-composer\";\n\n/**\n * AgentComposer — ChatComposer + slash-command / @file / #memory triggers.\n *\n * Wraps ChatComposer and watches the value for three trigger characters:\n *   `/` → slash commands (`/clear`, `/help`, …)\n *   `@` → file references (`@src/components/Foo.tsx`)\n *   `#` → memory entries (`#alignment-grid`)\n *\n * Detection is string-based — no textarea ref required. A trigger is active\n * iff the value ends with a token of the form `[\\s|^]([/@#])[^\\s]*` (i.e. a\n * trigger char preceded by start-of-string or whitespace, with no space\n * after).\n *\n * The consumer provides the candidate items per trigger. On selection the\n * trailing token is replaced with the chosen value plus a trailing space.\n */\n\ntype ItemsProvider = (query: string) => MentionItem[];\n\ninterface AgentComposerProps extends ComponentProps<typeof ChatComposer> {\n  /** Items shown when `/` is the active trigger. */\n  commands?: MentionItem[] | ItemsProvider;\n  /** Items shown when `@` is the active trigger. */\n  files?: MentionItem[] | ItemsProvider;\n  /** Items shown when `#` is the active trigger. */\n  memories?: MentionItem[] | ItemsProvider;\n  /**\n   * What text gets inserted when an item is picked. Defaults to\n   * `${trigger}${item.label}` (assumes `label` is a string). Override to\n   * insert a token different from the visible label (e.g. include path,\n   * id, …).\n   */\n  resolveInsertText?: (item: MentionItem, trigger: MentionTrigger) => string;\n  /** Optional slot for the empty-state copy per trigger. */\n  emptyLabels?: Partial<Record<MentionTrigger, ReactNode>>;\n  /** Outer wrapper className (the relative positioning anchor for the menu). */\n  containerClassName?: string;\n}\n\nconst TRIGGER_CHARS: ReadonlyArray<MentionTrigger> = [\"/\", \"@\", \"#\"];\n\nconst TRIGGER_RE = /(^|\\s)([/@#])([^\\s]*)$/;\n\ninterface DetectedTrigger {\n  trigger: MentionTrigger;\n  query: string;\n  /** Index in the value where the trigger char starts. */\n  start: number;\n}\n\nfunction detectTrigger(value: string): DetectedTrigger | null {\n  const match = value.match(TRIGGER_RE);\n  if (!match) return null;\n  const leading = match[1] ?? \"\";\n  const triggerChar = match[2] as MentionTrigger;\n  const query = match[3] ?? \"\";\n  if (!TRIGGER_CHARS.includes(triggerChar)) return null;\n  // start = position of the trigger char itself\n  const start = (match.index ?? 0) + leading.length;\n  return { trigger: triggerChar, query, start };\n}\n\nfunction resolveItems(\n  source: MentionItem[] | ItemsProvider | undefined,\n  query: string,\n): MentionItem[] {\n  if (!source) return [];\n  if (typeof source === \"function\") return source(query);\n  if (!query) return source;\n  const q = query.toLowerCase();\n  return source.filter((item) => {\n    const haystack = `${typeof item.label === \"string\" ? item.label : \"\"} ${\n      typeof item.description === \"string\" ? item.description : \"\"\n    }`.toLowerCase();\n    return haystack.includes(q);\n  });\n}\n\nfunction defaultInsertText(item: MentionItem, trigger: MentionTrigger): string {\n  const label = typeof item.label === \"string\" ? item.label : \"\";\n  // If the visible label already starts with the trigger char (e.g. \"/clear\"),\n  // use it as-is so we don't end up with \"//clear\".\n  if (label.startsWith(trigger)) return label;\n  return `${trigger}${label}`;\n}\n\nexport function AgentComposer({\n  value,\n  onValueChange,\n  commands,\n  files,\n  memories,\n  resolveInsertText = defaultInsertText,\n  emptyLabels,\n  containerClassName,\n  className,\n  textareaProps,\n  ...chatComposerProps\n}: AgentComposerProps) {\n  // Trigger detection + manual dismiss state.\n  // We honour `dismissed` so the user can Esc the menu and keep typing after\n  // a trigger char without the menu re-appearing.\n  const [dismissedAt, setDismissedAt] = useState<number | null>(null);\n\n  const detected = useMemo(() => detectTrigger(value), [value]);\n  const isDismissed = detected !== null && dismissedAt === detected.start;\n  const activeTrigger = isDismissed ? null : (detected?.trigger ?? null);\n  const query = isDismissed ? \"\" : (detected?.query ?? \"\");\n\n  const items = useMemo(() => {\n    if (!activeTrigger || !detected) return [];\n    if (activeTrigger === \"/\") return resolveItems(commands, query);\n    if (activeTrigger === \"@\") return resolveItems(files, query);\n    if (activeTrigger === \"#\") return resolveItems(memories, query);\n    return [];\n  }, [activeTrigger, detected, commands, files, memories, query]);\n\n  const handleSelect = (item: MentionItem) => {\n    if (!detected) return;\n    const before = value.slice(0, detected.start);\n    const insert = resolveInsertText(item, detected.trigger);\n    onValueChange(`${before}${insert} `);\n    setDismissedAt(null);\n  };\n\n  const handleClose = () => {\n    if (detected) setDismissedAt(detected.start);\n  };\n\n  const interceptKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (activeTrigger) {\n      // Let MentionMenu's global key handler take Arrow/Enter/Esc.\n      if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.key)) {\n        if (e.key === \"Enter\") e.preventDefault(); // also prevent form submit\n        return;\n      }\n    }\n    // Mirror ChatComposer's default Enter-to-submit when menu is closed.\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      (e.currentTarget.form as HTMLFormElement | null)?.requestSubmit();\n    }\n    textareaProps?.onKeyDown?.(e);\n  };\n\n  return (\n    <div className={cn(\"relative\", containerClassName)}>\n      <MentionMenu\n        open={!!activeTrigger && items !== null}\n        trigger={(activeTrigger ?? \"/\") as MentionTrigger}\n        items={items}\n        onSelect={handleSelect}\n        onClose={handleClose}\n        emptyLabel={activeTrigger ? emptyLabels?.[activeTrigger] : undefined}\n      />\n      <ChatComposer\n        value={value}\n        onValueChange={(next) => {\n          // If user clears the trigger token, drop the dismissed marker too.\n          if (!detectTrigger(next)) setDismissedAt(null);\n          onValueChange(next);\n        }}\n        className={className}\n        textareaProps={{\n          ...textareaProps,\n          onKeyDown: interceptKeyDown,\n        }}\n        {...chatComposerProps}\n      />\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport type { ComponentProps, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type MentionItem,\n  MentionMenu,\n  type MentionTrigger,\n} from \"@/components/ui/mention-menu\";\nimport { ChatComposer } from \"@/components/ui/chat-composer\";\n\n/**\n * AgentComposer — ChatComposer + slash-command / @file / #memory triggers.\n *\n * Wraps ChatComposer and watches the value for three trigger characters:\n *   `/` → slash commands (`/clear`, `/help`, …)\n *   `@` → file references (`@src/components/Foo.tsx`)\n *   `#` → memory entries (`#alignment-grid`)\n *\n * Detection is string-based — no textarea ref required. A trigger is active\n * iff the value ends with a token of the form `[\\s|^]([/@#])[^\\s]*` (i.e. a\n * trigger char preceded by start-of-string or whitespace, with no space\n * after).\n *\n * The consumer provides the candidate items per trigger. On selection the\n * trailing token is replaced with the chosen value plus a trailing space.\n */\n\ntype ItemsProvider = (query: string) => MentionItem[];\n\ninterface AgentComposerProps extends ComponentProps<typeof ChatComposer> {\n  /** Items shown when `/` is the active trigger. */\n  commands?: MentionItem[] | ItemsProvider;\n  /** Items shown when `@` is the active trigger. */\n  files?: MentionItem[] | ItemsProvider;\n  /** Items shown when `#` is the active trigger. */\n  memories?: MentionItem[] | ItemsProvider;\n  /**\n   * What text gets inserted when an item is picked. Defaults to\n   * `${trigger}${item.label}` (assumes `label` is a string). Override to\n   * insert a token different from the visible label (e.g. include path,\n   * id, …).\n   */\n  resolveInsertText?: (item: MentionItem, trigger: MentionTrigger) => string;\n  /** Optional slot for the empty-state copy per trigger. */\n  emptyLabels?: Partial<Record<MentionTrigger, ReactNode>>;\n  /** Outer wrapper className (the relative positioning anchor for the menu). */\n  containerClassName?: string;\n}\n\nconst TRIGGER_CHARS: ReadonlyArray<MentionTrigger> = [\"/\", \"@\", \"#\"];\n\nconst TRIGGER_RE = /(^|\\s)([/@#])([^\\s]*)$/;\n\ninterface DetectedTrigger {\n  trigger: MentionTrigger;\n  query: string;\n  /** Index in the value where the trigger char starts. */\n  start: number;\n}\n\nfunction detectTrigger(value: string): DetectedTrigger | null {\n  const match = value.match(TRIGGER_RE);\n  if (!match) return null;\n  const leading = match[1] ?? \"\";\n  const triggerChar = match[2] as MentionTrigger;\n  const query = match[3] ?? \"\";\n  if (!TRIGGER_CHARS.includes(triggerChar)) return null;\n  // start = position of the trigger char itself\n  const start = (match.index ?? 0) + leading.length;\n  return { trigger: triggerChar, query, start };\n}\n\nfunction resolveItems(\n  source: MentionItem[] | ItemsProvider | undefined,\n  query: string,\n): MentionItem[] {\n  if (!source) return [];\n  if (typeof source === \"function\") return source(query);\n  if (!query) return source;\n  const q = query.toLowerCase();\n  return source.filter((item) => {\n    const haystack = `${typeof item.label === \"string\" ? item.label : \"\"} ${\n      typeof item.description === \"string\" ? item.description : \"\"\n    }`.toLowerCase();\n    return haystack.includes(q);\n  });\n}\n\nfunction defaultInsertText(item: MentionItem, trigger: MentionTrigger): string {\n  const label = typeof item.label === \"string\" ? item.label : \"\";\n  // If the visible label already starts with the trigger char (e.g. \"/clear\"),\n  // use it as-is so we don't end up with \"//clear\".\n  if (label.startsWith(trigger)) return label;\n  return `${trigger}${label}`;\n}\n\nexport function AgentComposer({\n  value,\n  onValueChange,\n  commands,\n  files,\n  memories,\n  resolveInsertText = defaultInsertText,\n  emptyLabels,\n  containerClassName,\n  className,\n  textareaProps,\n  ...chatComposerProps\n}: AgentComposerProps) {\n  // Trigger detection + manual dismiss state.\n  // We honour `dismissed` so the user can Esc the menu and keep typing after\n  // a trigger char without the menu re-appearing.\n  const [dismissedAt, setDismissedAt] = useState<number | null>(null);\n\n  const detected = useMemo(() => detectTrigger(value), [value]);\n  const isDismissed = detected !== null && dismissedAt === detected.start;\n  const activeTrigger = isDismissed ? null : (detected?.trigger ?? null);\n  const query = isDismissed ? \"\" : (detected?.query ?? \"\");\n\n  const items = useMemo(() => {\n    if (!activeTrigger || !detected) return [];\n    if (activeTrigger === \"/\") return resolveItems(commands, query);\n    if (activeTrigger === \"@\") return resolveItems(files, query);\n    if (activeTrigger === \"#\") return resolveItems(memories, query);\n    return [];\n  }, [activeTrigger, detected, commands, files, memories, query]);\n\n  const handleSelect = (item: MentionItem) => {\n    if (!detected) return;\n    const before = value.slice(0, detected.start);\n    const insert = resolveInsertText(item, detected.trigger);\n    onValueChange(`${before}${insert} `);\n    setDismissedAt(null);\n  };\n\n  const handleClose = () => {\n    if (detected) setDismissedAt(detected.start);\n  };\n\n  const interceptKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (activeTrigger) {\n      // Let MentionMenu's global key handler take Arrow/Enter/Esc.\n      if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.key)) {\n        if (e.key === \"Enter\") e.preventDefault(); // also prevent form submit\n        return;\n      }\n    }\n    // Mirror ChatComposer's default Enter-to-submit when menu is closed.\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      (e.currentTarget.form as HTMLFormElement | null)?.requestSubmit();\n    }\n    textareaProps?.onKeyDown?.(e);\n  };\n\n  return (\n    <div data-slot=\"agent-composer\" className={cn(\"relative\", containerClassName)}>\n      <MentionMenu\n        open={!!activeTrigger && items !== null}\n        trigger={(activeTrigger ?? \"/\") as MentionTrigger}\n        items={items}\n        onSelect={handleSelect}\n        onClose={handleClose}\n        emptyLabel={activeTrigger ? emptyLabels?.[activeTrigger] : undefined}\n      />\n      <ChatComposer\n        value={value}\n        onValueChange={(next) => {\n          // If user clears the trigger token, drop the dismissed marker too.\n          if (!detectTrigger(next)) setDismissedAt(null);\n          onValueChange(next);\n        }}\n        className={className}\n        textareaProps={{\n          ...textareaProps,\n          onKeyDown: interceptKeyDown,\n        }}\n        {...chatComposerProps}\n      />\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/r/agent-editor.json

@@ -21,7 +21,7 @@
       "path": "components/composites/agent-editor/agent-editor.tsx",
       "type": "registry:block",
       "target": "components/blocks/agent-editor.tsx",
-      "content": "import { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"@/types/mode\";\nimport type { AgentProfileDescriptor } from \"@/components/ui/agent-profile\";\nimport { Button } from \"@/components/ui/button\";\nimport { FormField } from \"@/components/ui/form-field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select } from \"@/components/ui/select\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * AgentEditor — form for creating or editing an Agent persona.\n */\n\nexport interface AgentDraft extends Omit<AgentProfileDescriptor, \"id\"> {\n  id?: string;\n  systemPrompt?: string;\n  model?: string;\n  allowedTools?: string[];\n  skillIds?: string[];\n  /** Modes this agent is visible in. Omit / empty = global (all modes). */\n  modes?: Mode[];\n}\n\ninterface AgentEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<AgentDraft>;\n  models?: Array<{ id: string; label: string }>;\n  skills?: Array<{ id: string; label: string }>;\n  onSave: (draft: AgentDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst TONES: Array<{ id: NonNullable<AgentProfileDescriptor[\"tone\"]>; label: string }> = [\n  { id: \"primary\", label: \"Primary (violet)\" },\n  { id: \"accent\", label: \"Accent (sienna)\" },\n  { id: \"success\", label: \"Success (green)\" },\n  { id: \"warning\", label: \"Warning (amber)\" },\n  { id: \"info\", label: \"Info (blue)\" },\n  { id: \"muted\", label: \"Muted (neutral)\" },\n];\n\nexport function AgentEditor({\n  className,\n  initial,\n  models,\n  skills,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: AgentEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [initials, setInitials] = useState(initial?.initials ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [tone, setTone] = useState<NonNullable<AgentProfileDescriptor[\"tone\"]>>(\n    initial?.tone ?? \"primary\",\n  );\n  const [model, setModel] = useState<string>(initial?.model ?? models?.[0]?.id ?? \"\");\n  const [systemPrompt, setSystemPrompt] = useState(initial?.systemPrompt ?? \"\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [skillsSelected, setSkillsSelected] = useState<Set<string>>(\n    new Set(initial?.skillIds ?? []),\n  );\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing a\n  // different agent, use the React `key` pattern at the call site:\n  //   <AgentEditor key={agent.id} initial={agent} ... />\n  // This is the idiomatic React way (over a useEffect that watches prop deltas\n  // and writes setters) — it guarantees a clean component instance per entity.\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = name.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      name: name.trim(),\n      initials: initials.trim() || undefined,\n      description: description.trim() || undefined,\n      tone,\n      model: model || undefined,\n      systemPrompt: systemPrompt.trim() || undefined,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      skillIds: Array.from(skillsSelected),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  const toggleSkill = (id: string) => {\n    setSkillsSelected((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <div className=\"grid grid-cols-[1fr_auto] gap-3\">\n        <FormField>\n          <FormField.Label>Name</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder=\"Coder\"\n              required\n            />\n          </FormField.Control>\n        </FormField>\n        <FormField className=\"w-24\">\n          <FormField.Label>Initials</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={initials}\n              onChange={(e) => setInitials(e.target.value.slice(0, 2).toUpperCase())}\n              placeholder=\"CO\"\n              maxLength={2}\n              className=\"text-center font-mono uppercase\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Description</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Writes code, edits files, runs verification.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Tone</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={tone}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow the string `v` against TONES.id\n                // values before casting. Radix Select guarantees `v` is one\n                // of the Select.Item values declared below, but adding the\n                // runtime guard keeps the type narrowing explicit and\n                // surfaces invalid future configurations as no-ops instead\n                // of silently writing a bad state.\n                const next = TONES.find((t) => t.id === v);\n                if (next) setTone(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select tone\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {TONES.map((t) => (\n                  <Select.Item key={t.id} value={t.id}>\n                    {t.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        {models && models.length > 0 ? (\n          <FormField>\n            <FormField.Label>Model</FormField.Label>\n            <FormField.Control>\n              <Select value={model} onValueChange={setModel}>\n                <Select.Trigger aria-label=\"Select model\">\n                  <Select.Value />\n                </Select.Trigger>\n                <Select.Content>\n                  {models.map((m) => (\n                    <Select.Item key={m.id} value={m.id}>\n                      {m.label}\n                    </Select.Item>\n                  ))}\n                </Select.Content>\n              </Select>\n            </FormField.Control>\n          </FormField>\n        ) : null}\n      </div>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>System prompt override</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={systemPrompt}\n            onChange={(e) => setSystemPrompt(e.target.value)}\n            rows={6}\n            placeholder=\"You are the Coder. You write code, edit files, and run verification…\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Leave empty to inherit the workspace default.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Allowed tools</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={allowedToolsRaw}\n            onChange={(e) => setAllowedToolsRaw(e.target.value)}\n            placeholder=\"Read, Edit, Bash\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      {skills && skills.length > 0 ? (\n        <FormField>\n          <FormField.Label>Linked skills</FormField.Label>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {skills.map((s) => {\n              const on = skillsSelected.has(s.id);\n              return (\n                <button\n                  key={s.id}\n                  type=\"button\"\n                  onClick={() => toggleSkill(s.id)}\n                  aria-pressed={on}\n                  className={cn(\n                    \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                    on\n                      ? \"border-primary bg-primary/15 text-primary\"\n                      : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {s.label}\n                </button>\n              );\n            })}\n          </div>\n        </FormField>\n      ) : null}\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (available in every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create agent\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"@/types/mode\";\nimport type { AgentProfileDescriptor } from \"@/components/ui/agent-profile\";\nimport { Button } from \"@/components/ui/button\";\nimport { FormField } from \"@/components/ui/form-field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select } from \"@/components/ui/select\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * AgentEditor — form for creating or editing an Agent persona.\n */\n\nexport interface AgentDraft extends Omit<AgentProfileDescriptor, \"id\"> {\n  id?: string;\n  systemPrompt?: string;\n  model?: string;\n  allowedTools?: string[];\n  skillIds?: string[];\n  /** Modes this agent is visible in. Omit / empty = global (all modes). */\n  modes?: Mode[];\n}\n\ninterface AgentEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<AgentDraft>;\n  models?: Array<{ id: string; label: string }>;\n  skills?: Array<{ id: string; label: string }>;\n  onSave: (draft: AgentDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst TONES: Array<{ id: NonNullable<AgentProfileDescriptor[\"tone\"]>; label: string }> = [\n  { id: \"primary\", label: \"Primary (violet)\" },\n  { id: \"accent\", label: \"Accent (sienna)\" },\n  { id: \"success\", label: \"Success (green)\" },\n  { id: \"warning\", label: \"Warning (amber)\" },\n  { id: \"info\", label: \"Info (blue)\" },\n  { id: \"muted\", label: \"Muted (neutral)\" },\n];\n\nexport function AgentEditor({\n  className,\n  initial,\n  models,\n  skills,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: AgentEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [initials, setInitials] = useState(initial?.initials ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [tone, setTone] = useState<NonNullable<AgentProfileDescriptor[\"tone\"]>>(\n    initial?.tone ?? \"primary\",\n  );\n  const [model, setModel] = useState<string>(initial?.model ?? models?.[0]?.id ?? \"\");\n  const [systemPrompt, setSystemPrompt] = useState(initial?.systemPrompt ?? \"\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [skillsSelected, setSkillsSelected] = useState<Set<string>>(\n    new Set(initial?.skillIds ?? []),\n  );\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing a\n  // different agent, use the React `key` pattern at the call site:\n  //   <AgentEditor key={agent.id} initial={agent} ... />\n  // This is the idiomatic React way (over a useEffect that watches prop deltas\n  // and writes setters) — it guarantees a clean component instance per entity.\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = name.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      name: name.trim(),\n      initials: initials.trim() || undefined,\n      description: description.trim() || undefined,\n      tone,\n      model: model || undefined,\n      systemPrompt: systemPrompt.trim() || undefined,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      skillIds: Array.from(skillsSelected),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  const toggleSkill = (id: string) => {\n    setSkillsSelected((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  };\n\n  return (\n    <form\n      data-slot=\"agent-editor\"\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <div className=\"grid grid-cols-[1fr_auto] gap-3\">\n        <FormField>\n          <FormField.Label>Name</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder=\"Coder\"\n              required\n            />\n          </FormField.Control>\n        </FormField>\n        <FormField className=\"w-24\">\n          <FormField.Label>Initials</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={initials}\n              onChange={(e) => setInitials(e.target.value.slice(0, 2).toUpperCase())}\n              placeholder=\"CO\"\n              maxLength={2}\n              className=\"text-center font-mono uppercase\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Description</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Writes code, edits files, runs verification.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Tone</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={tone}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow the string `v` against TONES.id\n                // values before casting. Radix Select guarantees `v` is one\n                // of the Select.Item values declared below, but adding the\n                // runtime guard keeps the type narrowing explicit and\n                // surfaces invalid future configurations as no-ops instead\n                // of silently writing a bad state.\n                const next = TONES.find((t) => t.id === v);\n                if (next) setTone(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select tone\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {TONES.map((t) => (\n                  <Select.Item key={t.id} value={t.id}>\n                    {t.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        {models && models.length > 0 ? (\n          <FormField>\n            <FormField.Label>Model</FormField.Label>\n            <FormField.Control>\n              <Select value={model} onValueChange={setModel}>\n                <Select.Trigger aria-label=\"Select model\">\n                  <Select.Value />\n                </Select.Trigger>\n                <Select.Content>\n                  {models.map((m) => (\n                    <Select.Item key={m.id} value={m.id}>\n                      {m.label}\n                    </Select.Item>\n                  ))}\n                </Select.Content>\n              </Select>\n            </FormField.Control>\n          </FormField>\n        ) : null}\n      </div>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>System prompt override</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={systemPrompt}\n            onChange={(e) => setSystemPrompt(e.target.value)}\n            rows={6}\n            placeholder=\"You are the Coder. You write code, edit files, and run verification…\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Leave empty to inherit the workspace default.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Allowed tools</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={allowedToolsRaw}\n            onChange={(e) => setAllowedToolsRaw(e.target.value)}\n            placeholder=\"Read, Edit, Bash\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      {skills && skills.length > 0 ? (\n        <FormField>\n          <FormField.Label>Linked skills</FormField.Label>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {skills.map((s) => {\n              const on = skillsSelected.has(s.id);\n              return (\n                <button\n                  key={s.id}\n                  type=\"button\"\n                  onClick={() => toggleSkill(s.id)}\n                  aria-pressed={on}\n                  className={cn(\n                    \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                    on\n                      ? \"border-primary bg-primary/15 text-primary\"\n                      : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {s.label}\n                </button>\n              );\n            })}\n          </div>\n        </FormField>\n      ) : null}\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (available in every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create agent\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"
     }
   ]
 }

package/registry/r/agent-error-card.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/agent-error-card/agent-error-card.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-error-card.tsx",
-      "content": "import {\n  AlertOctagon,\n  Database,\n  KeyRound,\n  type LucideIcon,\n  Network,\n  ShieldOff,\n} from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\n/**\n * AgentErrorCard — inline error / blocked-state card for an agent stream.\n *\n * Renders when the agent run hits a wall it can't recover from on its own:\n * rate limit, context overflow, auth lost, tool failure, network error.\n * Severity is always destructive; the `kind` drives the icon and helps the\n * consumer wire recovery actions in the footer slot.\n */\n\nexport type AgentErrorKind =\n  | \"rate-limit\"\n  | \"context-overflow\"\n  | \"auth\"\n  | \"tool-failure\"\n  | \"network\"\n  | \"generic\";\n\nconst ICON_FOR_KIND: Record<AgentErrorKind, LucideIcon> = {\n  \"rate-limit\": Database,\n  \"context-overflow\": ShieldOff,\n  auth: KeyRound,\n  \"tool-failure\": AlertOctagon,\n  network: Network,\n  generic: AlertOctagon,\n};\n\ninterface AgentErrorCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  kind?: AgentErrorKind;\n  title: ReactNode;\n  detail?: ReactNode;\n  /** Recovery action slot (Retry, Reset, Re-auth, etc.). */\n  actions?: ReactNode;\n  timestamp?: ReactNode;\n}\n\nconst AgentErrorCard = forwardRef<HTMLElement, AgentErrorCardProps>(\n  ({ className, kind = \"generic\", title, detail, actions, timestamp, ...props }, ref) => {\n    const Icon = ICON_FOR_KIND[kind];\n    // T4.1 (MF-4): omit own aria-live when nested in a container live region.\n    // role=\"alert\" stays — alerts should announce even via outer region —\n    // but we drop the explicit aria-live=\"assertive\" attribute so AT doesn't\n    // see two competing live region declarations.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <section\n        ref={ref}\n        role=\"alert\"\n        aria-live={inLiveRegion ? undefined : \"assertive\"}\n        className={cn(\n          \"grid w-full gap-3 rounded-xl border border-destructive/40 bg-destructive/5 p-4\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start gap-3\">\n          <span className=\"mt-0.5 inline-flex shrink-0 text-destructive\" aria-hidden=\"true\">\n            <Icon className=\"size-4\" />\n          </span>\n          <div className=\"grid min-w-0 flex-1 gap-1\">\n            <div className=\"flex items-baseline justify-between gap-2\">\n              <h4 className=\"font-display text-foreground text-title-md tracking-tight\">{title}</h4>\n              {timestamp ? (\n                <span className=\"shrink-0 font-mono text-label text-muted-foreground tabular-nums\">\n                  {timestamp}\n                </span>\n              ) : null}\n            </div>\n            {detail ? (\n              <p className=\"break-words font-mono text-code-sm text-muted-foreground\">{detail}</p>\n            ) : null}\n          </div>\n        </header>\n        {actions ? (\n          <footer className=\"flex flex-wrap items-center justify-end gap-2\">{actions}</footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nAgentErrorCard.displayName = \"AgentErrorCard\";\n\nexport { AgentErrorCard };\n"
+      "content": "import {\n  AlertOctagon,\n  Database,\n  KeyRound,\n  type LucideIcon,\n  Network,\n  ShieldOff,\n} from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\n/**\n * AgentErrorCard — inline error / blocked-state card for an agent stream.\n *\n * Renders when the agent run hits a wall it can't recover from on its own:\n * rate limit, context overflow, auth lost, tool failure, network error.\n * Severity is always destructive; the `kind` drives the icon and helps the\n * consumer wire recovery actions in the footer slot.\n */\n\nexport type AgentErrorKind =\n  | \"rate-limit\"\n  | \"context-overflow\"\n  | \"auth\"\n  | \"tool-failure\"\n  | \"network\"\n  | \"generic\";\n\nconst ICON_FOR_KIND: Record<AgentErrorKind, LucideIcon> = {\n  \"rate-limit\": Database,\n  \"context-overflow\": ShieldOff,\n  auth: KeyRound,\n  \"tool-failure\": AlertOctagon,\n  network: Network,\n  generic: AlertOctagon,\n};\n\n/**\n * G5 T2.3 — derive an AgentErrorKind from a TheoErrorEnvelope `code` string.\n *\n * Maps the canonical TheoErrorCode union (theokit/server + @theokit/sdk\n * cross-layer envelope) to the AgentErrorKind that drives the icon + visual\n * severity in this primitive. Unknown codes fall back to 'generic'.\n *\n * Consumer pattern (without coupling to theokit/server types):\n *\n * ```tsx\n * <AgentErrorCard envelopeCode={env.code} title={env.message} />\n * ```\n *\n * Or use the helper directly when fully controlling the kind prop:\n *\n * ```tsx\n * <AgentErrorCard kind={kindFromEnvelopeCode(env.code)} title={env.message} />\n * ```\n */\nexport function kindFromEnvelopeCode(code: string): AgentErrorKind {\n  switch (code) {\n    case \"UNAUTHORIZED\":\n    case \"FORBIDDEN\":\n    case \"PROVIDER_KEY_MISSING\":\n      return \"auth\";\n    case \"RATE_LIMITED\":\n    case \"TOO_MANY_REQUESTS\":\n    case \"CREDENTIAL_POOL_EXHAUSTED\":\n      return \"rate-limit\";\n    case \"BAD_GATEWAY\":\n    case \"SERVICE_UNAVAILABLE\":\n    case \"GATEWAY_TIMEOUT\":\n      return \"network\";\n    case \"AGENT_RUN_ERROR\":\n      return \"tool-failure\";\n    case \"PAYLOAD_TOO_LARGE\":\n    case \"CONTENT_TOO_LARGE\":\n      return \"context-overflow\";\n    default:\n      return \"generic\";\n  }\n}\n\ninterface AgentErrorCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  kind?: AgentErrorKind;\n  /**\n   * G5 T2.3 — canonical TheoErrorCode (e.g. `\"UNAUTHORIZED\"`, `\"RATE_LIMITED\"`)\n   * used to derive `kind` automatically. The explicit `kind` prop takes\n   * precedence when both are passed. Pass `envelope.code` from a\n   * `TheoErrorEnvelope` directly — no coupling to theokit/server types.\n   */\n  envelopeCode?: string;\n  title: ReactNode;\n  detail?: ReactNode;\n  /** Recovery action slot (Retry, Reset, Re-auth, etc.). */\n  actions?: ReactNode;\n  timestamp?: ReactNode;\n}\n\nconst AgentErrorCard = forwardRef<HTMLElement, AgentErrorCardProps>(\n  ({ className, kind, envelopeCode, title, detail, actions, timestamp, ...props }, ref) => {\n    // G5 T2.3: explicit `kind` wins; otherwise derive from envelopeCode; else 'generic'.\n    const effectiveKind: AgentErrorKind =\n      kind ?? (envelopeCode !== undefined ? kindFromEnvelopeCode(envelopeCode) : \"generic\");\n    const Icon = ICON_FOR_KIND[effectiveKind];\n    // T4.1 (MF-4): omit own aria-live when nested in a container live region.\n    // role=\"alert\" stays — alerts should announce even via outer region —\n    // but we drop the explicit aria-live=\"assertive\" attribute so AT doesn't\n    // see two competing live region declarations.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <section\n        data-slot=\"agent-error-card\"\n        ref={ref}\n        role=\"alert\"\n        aria-live={inLiveRegion ? undefined : \"assertive\"}\n        className={cn(\n          \"grid w-full gap-3 rounded-xl border border-destructive/40 bg-destructive/5 p-4\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start gap-3\">\n          <span className=\"mt-0.5 inline-flex shrink-0 text-destructive\" aria-hidden=\"true\">\n            <Icon className=\"size-4\" />\n          </span>\n          <div className=\"grid min-w-0 flex-1 gap-1\">\n            <div className=\"flex items-baseline justify-between gap-2\">\n              <h4 className=\"font-display text-foreground text-title-md tracking-tight\">{title}</h4>\n              {timestamp ? (\n                <span className=\"shrink-0 font-mono text-label text-muted-foreground tabular-nums\">\n                  {timestamp}\n                </span>\n              ) : null}\n            </div>\n            {detail ? (\n              <p className=\"break-words font-mono text-code-sm text-muted-foreground\">{detail}</p>\n            ) : null}\n          </div>\n        </header>\n        {actions ? (\n          <footer className=\"flex flex-wrap items-center justify-end gap-2\">{actions}</footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nAgentErrorCard.displayName = \"AgentErrorCard\";\n\nexport { AgentErrorCard };\n"
     }
   ]
 }

package/registry/r/agent-event.json

@@ -18,7 +18,7 @@
       "path": "components/primitives/agent-event/agent-event.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-event.tsx",
-      "content": "import {\n  AlertTriangle,\n  CheckCircle2,\n  ChevronRight,\n  CircleDot,\n  Edit3,\n  FilePlus,\n  FileSearch,\n  Hammer,\n  Loader2,\n  ShieldCheck,\n  Terminal,\n  Wrench,\n} from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type {\n  AgentEvent as AgentEventModel,\n  AgentEventStatus,\n  AgentEventType,\n} from \"@/types/agent\";\n\nconst typeIcon: Record<AgentEventType, IconComponent> = {\n  command: Terminal,\n  file_read: FileSearch,\n  file_write: FilePlus,\n  edit: Edit3,\n  lint: ShieldCheck,\n  typecheck: ShieldCheck,\n  build: Hammer,\n  tool: Wrench,\n};\n\nconst statusIcon: Record<AgentEventStatus, IconComponent> = {\n  pending: CircleDot,\n  running: Loader2,\n  success: CheckCircle2,\n  failed: AlertTriangle,\n};\n\nconst statusColor: Record<AgentEventStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  success: \"text-success\",\n  failed: \"text-destructive\",\n};\n\ninterface AgentEventProps extends HTMLAttributes<HTMLDivElement> {\n  event: AgentEventModel;\n  /**\n   * If true, clicking the row toggles `event.detail` visibility.\n   */\n  collapsible?: boolean;\n  /**\n   * Force the collapsible state (for controlled scenarios).\n   */\n  defaultOpen?: boolean;\n}\n\n/**\n * AgentEvent — single event row in the agent timeline.\n *\n * Composition: type icon + label + path + diff stats + status icon + (optional) chevron.\n * Running events show a spinner via motion-safe:animate-spin (respects\n * `prefers-reduced-motion`); failed events flash red.\n *\n * When `collapsible` is true and `event.detail` is provided, the row renders as\n * a native `<button>` for correct keyboard and screen-reader semantics.\n */\nconst AgentEvent = forwardRef<HTMLDivElement, AgentEventProps>(\n  ({ className, event, collapsible, defaultOpen, ...props }, ref) => {\n    const [open, setOpen] = useState(defaultOpen ?? false);\n    const TypeIcon = typeIcon[event.type];\n    const StatusIcon = statusIcon[event.status];\n    const isExpandable = !!(collapsible && event.detail !== undefined);\n\n    const handleToggle = () => {\n      if (isExpandable) setOpen((v) => !v);\n    };\n\n    const headerContent: ReactNode = (\n      <>\n        <span className=\"grid size-7 place-items-center rounded-md bg-muted text-muted-foreground\">\n          <TypeIcon className=\"size-3.5\" />\n        </span>\n        <div className=\"min-w-0\">\n          <p className=\"flex flex-wrap items-baseline gap-x-2 gap-y-0.5\">\n            <span className=\"truncate font-medium text-body-sm text-foreground\">{event.label}</span>\n            {event.path ? (\n              <span className=\"truncate font-mono text-code-sm text-muted-foreground\">\n                {event.path}\n              </span>\n            ) : null}\n            {event.diff ? (\n              <span className=\"font-mono text-code-sm\">\n                <span className=\"text-success\">+{event.diff.added}</span>{\" \"}\n                <span className=\"text-destructive\">-{event.diff.removed}</span>\n              </span>\n            ) : null}\n          </p>\n          {event.timestamp ? (\n            <p className=\"font-mono text-label text-muted-foreground\">{event.timestamp}</p>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-1.5\">\n          <StatusIcon\n            className={cn(\n              \"size-4\",\n              statusColor[event.status],\n              event.status === \"running\" && \"motion-safe:animate-spin\",\n            )}\n            aria-label={event.status}\n          />\n          {isExpandable ? (\n            <ChevronRight\n              className={cn(\n                \"size-4 text-muted-foreground transition-transform\",\n                open && \"rotate-90\",\n              )}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </div>\n      </>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"rounded-md border border-transparent\",\n          isExpandable && \"hover:border-border/40 hover:bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        {isExpandable ? (\n          <button\n            type=\"button\"\n            onClick={handleToggle}\n            aria-expanded={open}\n            className={cn(\n              \"grid w-full grid-cols-[auto_1fr_auto] items-center gap-3 px-3 py-2 text-left\",\n              \"cursor-pointer rounded-md\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            {headerContent}\n          </button>\n        ) : (\n          <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 px-3 py-2\">\n            {headerContent}\n          </div>\n        )}\n        {isExpandable && open ? (\n          <div className=\"border-border/40 border-t bg-muted/20 px-3 py-2 font-mono text-code-sm text-muted-foreground\">\n            {event.detail}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nAgentEvent.displayName = \"AgentEvent\";\n\nexport { AgentEvent };\n"
+      "content": "\"use client\";\n\nimport {\n  AlertTriangle,\n  CheckCircle2,\n  ChevronRight,\n  CircleDot,\n  Edit3,\n  FilePlus,\n  FileSearch,\n  Hammer,\n  Loader2,\n  ShieldCheck,\n  Terminal,\n  Wrench,\n} from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type {\n  AgentEvent as AgentEventModel,\n  AgentEventStatus,\n  AgentEventType,\n} from \"@/types/agent\";\n\nconst typeIcon: Record<AgentEventType, IconComponent> = {\n  command: Terminal,\n  file_read: FileSearch,\n  file_write: FilePlus,\n  edit: Edit3,\n  lint: ShieldCheck,\n  typecheck: ShieldCheck,\n  build: Hammer,\n  tool: Wrench,\n};\n\nconst statusIcon: Record<AgentEventStatus, IconComponent> = {\n  pending: CircleDot,\n  running: Loader2,\n  success: CheckCircle2,\n  failed: AlertTriangle,\n};\n\nconst statusColor: Record<AgentEventStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  success: \"text-success\",\n  failed: \"text-destructive\",\n};\n\ninterface AgentEventProps extends HTMLAttributes<HTMLDivElement> {\n  event: AgentEventModel;\n  /**\n   * If true, clicking the row toggles `event.detail` visibility.\n   */\n  collapsible?: boolean;\n  /**\n   * Force the collapsible state (for controlled scenarios).\n   */\n  defaultOpen?: boolean;\n}\n\n/**\n * AgentEvent — single event row in the agent timeline.\n *\n * Composition: type icon + label + path + diff stats + status icon + (optional) chevron.\n * Running events show a spinner via motion-safe:animate-spin (respects\n * `prefers-reduced-motion`); failed events flash red.\n *\n * When `collapsible` is true and `event.detail` is provided, the row renders as\n * a native `<button>` for correct keyboard and screen-reader semantics.\n */\nconst AgentEvent = forwardRef<HTMLDivElement, AgentEventProps>(\n  ({ className, event, collapsible, defaultOpen, ...props }, ref) => {\n    const [open, setOpen] = useState(defaultOpen ?? false);\n    const TypeIcon = typeIcon[event.type];\n    const StatusIcon = statusIcon[event.status];\n    const isExpandable = !!(collapsible && event.detail !== undefined);\n\n    const handleToggle = () => {\n      if (isExpandable) setOpen((v) => !v);\n    };\n\n    const headerContent: ReactNode = (\n      <>\n        <span className=\"grid size-7 place-items-center rounded-md bg-muted text-muted-foreground\">\n          <TypeIcon className=\"size-3.5\" />\n        </span>\n        <div className=\"min-w-0\">\n          <p className=\"flex flex-wrap items-baseline gap-x-2 gap-y-0.5\">\n            <span className=\"truncate font-medium text-body-sm text-foreground\">{event.label}</span>\n            {event.path ? (\n              <span className=\"truncate font-mono text-code-sm text-muted-foreground\">\n                {event.path}\n              </span>\n            ) : null}\n            {event.diff ? (\n              <span className=\"font-mono text-code-sm\">\n                <span className=\"text-success\">+{event.diff.added}</span>{\" \"}\n                <span className=\"text-destructive\">-{event.diff.removed}</span>\n              </span>\n            ) : null}\n          </p>\n          {event.timestamp ? (\n            <p className=\"font-mono text-label text-muted-foreground\">{event.timestamp}</p>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-1.5\">\n          <StatusIcon\n            className={cn(\n              \"size-4\",\n              statusColor[event.status],\n              event.status === \"running\" && \"motion-safe:animate-spin\",\n            )}\n            aria-label={event.status}\n          />\n          {isExpandable ? (\n            <ChevronRight\n              className={cn(\n                \"size-4 text-muted-foreground transition-transform\",\n                open && \"rotate-90\",\n              )}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </div>\n      </>\n    );\n\n    return (\n      <div\n        data-slot=\"agent-event\"\n        ref={ref}\n        className={cn(\n          \"rounded-md border border-transparent\",\n          isExpandable && \"hover:border-border/40 hover:bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        {isExpandable ? (\n          <button\n            type=\"button\"\n            onClick={handleToggle}\n            aria-expanded={open}\n            className={cn(\n              \"grid w-full grid-cols-[auto_1fr_auto] items-center gap-3 px-3 py-2 text-left\",\n              \"cursor-pointer rounded-md\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            {headerContent}\n          </button>\n        ) : (\n          <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-3 px-3 py-2\">\n            {headerContent}\n          </div>\n        )}\n        {isExpandable && open ? (\n          <div className=\"border-border/40 border-t bg-muted/20 px-3 py-2 font-mono text-code-sm text-muted-foreground\">\n            {event.detail}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nAgentEvent.displayName = \"AgentEvent\";\n\nexport { AgentEvent };\n"
     }
   ]
 }

package/registry/r/agent-handoff.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/agent-handoff/agent-handoff.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-handoff.tsx",
-      "content": "import { ArrowRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface HandoffParty {\n  /** Display name, e.g. \"planner\". */\n  name: string;\n  /** Optional avatar initials (max 2 chars). */\n  initials?: string;\n  /** Identity tone matching AgentProfile. */\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"muted\";\n}\n\ninterface AgentHandoffProps extends HTMLAttributes<HTMLElement> {\n  from: HandoffParty;\n  to: HandoffParty;\n  /** What is being handed off — short reason / payload preview. */\n  reason: ReactNode;\n  /** Optional metadata footer (e.g. timestamp, token budget). */\n  footer?: ReactNode;\n}\n\nconst TONE_CLASS: Record<NonNullable<HandoffParty[\"tone\"]>, string> = {\n  primary: \"bg-primary text-primary-foreground\",\n  accent: \"bg-accent text-accent-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n  muted: \"bg-muted text-foreground\",\n};\n\nfunction Avatar({ party }: { party: HandoffParty }) {\n  const inits = party.initials ?? party.name.slice(0, 2).toUpperCase();\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span\n        className={cn(\n          \"grid size-7 place-items-center rounded-full font-bold font-mono text-label\",\n          TONE_CLASS[party.tone ?? \"primary\"],\n        )}\n        aria-hidden=\"true\"\n      >\n        {inits}\n      </span>\n      <span className=\"font-medium font-mono text-code-sm text-foreground\">{party.name}</span>\n    </span>\n  );\n}\n\n/**\n * AgentHandoff — visual marker of one agent delegating to another. Pairs\n * with AgentProfile for the identity tones; place it in the timeline so the\n * user sees the baton being passed.\n */\nconst AgentHandoff = forwardRef<HTMLElement, AgentHandoffProps>(\n  ({ className, from, to, reason, footer, ...props }, ref) => (\n    <article\n      ref={ref}\n      className={cn(\n        \"grid gap-2 rounded-lg border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex items-center gap-2\">\n        <Avatar party={from} />\n        <ArrowRight className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <Avatar party={to} />\n        <span className=\"ml-auto font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          handoff\n        </span>\n      </header>\n      <p className=\"text-body-sm text-foreground\">{reason}</p>\n      {footer ? <p className=\"font-mono text-label text-muted-foreground\">{footer}</p> : null}\n    </article>\n  ),\n);\nAgentHandoff.displayName = \"AgentHandoff\";\n\nexport { AgentHandoff };\n"
+      "content": "import { ArrowRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface HandoffParty {\n  /** Display name, e.g. \"planner\". */\n  name: string;\n  /** Optional avatar initials (max 2 chars). */\n  initials?: string;\n  /** Identity tone matching AgentProfile. */\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"muted\";\n}\n\ninterface AgentHandoffProps extends HTMLAttributes<HTMLElement> {\n  from: HandoffParty;\n  to: HandoffParty;\n  /** What is being handed off — short reason / payload preview. */\n  reason: ReactNode;\n  /** Optional metadata footer (e.g. timestamp, token budget). */\n  footer?: ReactNode;\n}\n\nconst TONE_CLASS: Record<NonNullable<HandoffParty[\"tone\"]>, string> = {\n  primary: \"bg-primary text-primary-foreground\",\n  accent: \"bg-accent text-accent-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n  muted: \"bg-muted text-foreground\",\n};\n\nfunction Avatar({ party }: { party: HandoffParty }) {\n  const inits = party.initials ?? party.name.slice(0, 2).toUpperCase();\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span\n        className={cn(\n          \"grid size-7 place-items-center rounded-full font-bold font-mono text-label\",\n          TONE_CLASS[party.tone ?? \"primary\"],\n        )}\n        aria-hidden=\"true\"\n      >\n        {inits}\n      </span>\n      <span className=\"font-medium font-mono text-code-sm text-foreground\">{party.name}</span>\n    </span>\n  );\n}\n\n/**\n * AgentHandoff — visual marker of one agent delegating to another. Pairs\n * with AgentProfile for the identity tones; place it in the timeline so the\n * user sees the baton being passed.\n */\nconst AgentHandoff = forwardRef<HTMLElement, AgentHandoffProps>(\n  ({ className, from, to, reason, footer, ...props }, ref) => (\n    <article\n      data-slot=\"agent-handoff\"\n      ref={ref}\n      className={cn(\n        \"grid gap-2 rounded-lg border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex items-center gap-2\">\n        <Avatar party={from} />\n        <ArrowRight className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <Avatar party={to} />\n        <span className=\"ml-auto font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          handoff\n        </span>\n      </header>\n      <p className=\"text-body-sm text-foreground\">{reason}</p>\n      {footer ? <p className=\"font-mono text-label text-muted-foreground\">{footer}</p> : null}\n    </article>\n  ),\n);\nAgentHandoff.displayName = \"AgentHandoff\";\n\nexport { AgentHandoff };\n"
     }
   ]
 }

package/registry/r/agent-profile.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/agent-profile/agent-profile.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-profile.tsx",
-      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface AgentProfileDescriptor {\n  id: string;\n  /** Display name, e.g. \"Coder\", \"Planner\", \"Reviewer\". */\n  name: string;\n  /** Avatar initials (2 chars max). Falls back to first 2 letters of name. */\n  initials?: string;\n  /** Optional short description for tooltips and the dropdown. */\n  description?: ReactNode;\n  /**\n   * Identity tone — colors the avatar so users tell agents apart at a glance.\n   */\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"muted\";\n  /** Optional badge text (e.g. \"experimental\"). */\n  badge?: ReactNode;\n}\n\nconst TONE_CLASS: Record<NonNullable<AgentProfileDescriptor[\"tone\"]>, string> = {\n  primary: \"bg-primary text-primary-foreground\",\n  accent: \"bg-accent text-accent-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n  muted: \"bg-muted text-foreground\",\n};\n\ninterface AgentProfileProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  agents: AgentProfileDescriptor[];\n  activeId: string;\n  onChange?: (id: string) => void;\n}\n\n/**\n * AgentProfile — switcher between multiple agent profiles (coder, planner,\n * reviewer, etc.). Each profile gets its own tone so the user can spot at a\n * glance which \"persona\" is currently driving the session.\n */\nconst AgentProfile = forwardRef<HTMLButtonElement, AgentProfileProps>(\n  ({ className, agents, activeId, onChange, ...props }, ref) => {\n    const active = agents.find((a) => a.id === activeId) ?? agents[0];\n    if (!active) return null;\n    const initials = active.initials ?? active.name.slice(0, 2).toUpperCase();\n    return (\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-9 items-center gap-2 rounded-full border border-border/60 bg-card pr-3 pl-1\",\n              \"transition-colors hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              className,\n            )}\n            {...props}\n          >\n            <span\n              className={cn(\n                \"grid size-7 place-items-center rounded-full font-bold font-mono text-label\",\n                TONE_CLASS[active.tone ?? \"primary\"],\n              )}\n              aria-hidden=\"true\"\n            >\n              {initials}\n            </span>\n            <span className=\"font-medium font-sans text-body-sm text-foreground\">\n              {active.name}\n            </span>\n            <ChevronDown className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            align=\"start\"\n            sideOffset={6}\n            className={cn(\n              \"z-50 min-w-[18rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n              \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n            )}\n          >\n            <DropdownMenu.Label className=\"px-2 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Switch agent\n            </DropdownMenu.Label>\n            {agents.map((agent) => {\n              const inits = agent.initials ?? agent.name.slice(0, 2).toUpperCase();\n              const isActive = agent.id === activeId;\n              return (\n                <DropdownMenu.Item\n                  key={agent.id}\n                  onSelect={() => onChange?.(agent.id)}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-3 rounded-md px-2 py-2\",\n                    \"focus:bg-muted focus:outline-none data-[highlighted]:bg-muted\",\n                  )}\n                >\n                  <span\n                    className={cn(\n                      \"mt-0.5 grid size-8 place-items-center rounded-full font-bold font-mono text-label\",\n                      TONE_CLASS[agent.tone ?? \"muted\"],\n                    )}\n                    aria-hidden=\"true\"\n                  >\n                    {inits}\n                  </span>\n                  <div className=\"grid min-w-0 flex-1 gap-0.5\">\n                    <span className=\"flex items-center gap-2\">\n                      <span className=\"font-medium text-body-sm\">{agent.name}</span>\n                      {agent.badge ? (\n                        <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-1.5 py-0 font-mono text-accent text-label uppercase\">\n                          <Sparkles className=\"size-2.5\" aria-hidden=\"true\" />\n                          {agent.badge}\n                        </span>\n                      ) : null}\n                    </span>\n                    {agent.description ? (\n                      <span className=\"text-body-sm text-muted-foreground\">\n                        {agent.description}\n                      </span>\n                    ) : null}\n                  </div>\n                  {isActive ? (\n                    <Check className=\"mt-1 size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  ) : null}\n                </DropdownMenu.Item>\n              );\n            })}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nAgentProfile.displayName = \"AgentProfile\";\n\nexport { AgentProfile };\n"
+      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface AgentProfileDescriptor {\n  id: string;\n  /** Display name, e.g. \"Coder\", \"Planner\", \"Reviewer\". */\n  name: string;\n  /** Avatar initials (2 chars max). Falls back to first 2 letters of name. */\n  initials?: string;\n  /** Optional short description for tooltips and the dropdown. */\n  description?: ReactNode;\n  /**\n   * Identity tone — colors the avatar so users tell agents apart at a glance.\n   */\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"muted\";\n  /** Optional badge text (e.g. \"experimental\"). */\n  badge?: ReactNode;\n}\n\nconst TONE_CLASS: Record<NonNullable<AgentProfileDescriptor[\"tone\"]>, string> = {\n  primary: \"bg-primary text-primary-foreground\",\n  accent: \"bg-accent text-accent-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n  muted: \"bg-muted text-foreground\",\n};\n\ninterface AgentProfileProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  agents: AgentProfileDescriptor[];\n  activeId: string;\n  onChange?: (id: string) => void;\n}\n\n/**\n * AgentProfile — switcher between multiple agent profiles (coder, planner,\n * reviewer, etc.). Each profile gets its own tone so the user can spot at a\n * glance which \"persona\" is currently driving the session.\n */\nconst AgentProfile = forwardRef<HTMLButtonElement, AgentProfileProps>(\n  ({ className, agents, activeId, onChange, ...props }, ref) => {\n    const active = agents.find((a) => a.id === activeId) ?? agents[0];\n    if (!active) return null;\n    const initials = active.initials ?? active.name.slice(0, 2).toUpperCase();\n    return (\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            data-slot=\"agent-profile\"\n            ref={ref}\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-9 items-center gap-2 rounded-full border border-border/60 bg-card pr-3 pl-1\",\n              \"transition-colors hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              className,\n            )}\n            {...props}\n          >\n            <span\n              className={cn(\n                \"grid size-7 place-items-center rounded-full font-bold font-mono text-label\",\n                TONE_CLASS[active.tone ?? \"primary\"],\n              )}\n              aria-hidden=\"true\"\n            >\n              {initials}\n            </span>\n            <span className=\"font-medium font-sans text-body-sm text-foreground\">\n              {active.name}\n            </span>\n            <ChevronDown className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            align=\"start\"\n            sideOffset={6}\n            className={cn(\n              \"z-50 min-w-[18rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n              \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n            )}\n          >\n            <DropdownMenu.Label className=\"px-2 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Switch agent\n            </DropdownMenu.Label>\n            {agents.map((agent) => {\n              const inits = agent.initials ?? agent.name.slice(0, 2).toUpperCase();\n              const isActive = agent.id === activeId;\n              return (\n                <DropdownMenu.Item\n                  key={agent.id}\n                  onSelect={() => onChange?.(agent.id)}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-3 rounded-md px-2 py-2\",\n                    \"focus:bg-muted focus:outline-none data-[highlighted]:bg-muted\",\n                  )}\n                >\n                  <span\n                    className={cn(\n                      \"mt-0.5 grid size-8 place-items-center rounded-full font-bold font-mono text-label\",\n                      TONE_CLASS[agent.tone ?? \"muted\"],\n                    )}\n                    aria-hidden=\"true\"\n                  >\n                    {inits}\n                  </span>\n                  <div className=\"grid min-w-0 flex-1 gap-0.5\">\n                    <span className=\"flex items-center gap-2\">\n                      <span className=\"font-medium text-body-sm\">{agent.name}</span>\n                      {agent.badge ? (\n                        <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-1.5 py-0 font-mono text-accent text-label uppercase\">\n                          <Sparkles className=\"size-2.5\" aria-hidden=\"true\" />\n                          {agent.badge}\n                        </span>\n                      ) : null}\n                    </span>\n                    {agent.description ? (\n                      <span className=\"text-body-sm text-muted-foreground\">\n                        {agent.description}\n                      </span>\n                    ) : null}\n                  </div>\n                  {isActive ? (\n                    <Check className=\"mt-1 size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  ) : null}\n                </DropdownMenu.Item>\n              );\n            })}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nAgentProfile.displayName = \"AgentProfile\";\n\nexport { AgentProfile };\n"
     }
   ]
 }

package/registry/r/agent-starting-state.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/agent-starting-state/agent-starting-state.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-starting-state.tsx",
-      "content": "import { Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { OutputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\ninterface AgentStartingStateProps extends OutputHTMLAttributes<HTMLOutputElement> {\n  /** Title shown next to the spinner. Default \"Starting up…\". */\n  label?: ReactNode;\n  /** Optional secondary copy explaining the bootstrap step. */\n  hint?: ReactNode;\n}\n\n/**\n * AgentStartingState — full-width skeleton shown while the agent boots.\n *\n * Visual: violet spinner + label, optional hint below. Wrapped in a soft card.\n * Uses semantic `<output aria-live=\"polite\">` so screen readers announce the state.\n */\nconst AgentStartingState = forwardRef<HTMLOutputElement, AgentStartingStateProps>(\n  ({ className, label = \"Starting up…\", hint, ...props }, ref) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <output\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"flex items-center gap-3 rounded-xl border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Loader2 className=\"size-4 animate-spin text-primary\" aria-hidden=\"true\" />\n        <div className=\"grid\">\n          <span className=\"font-medium text-body-sm text-foreground\">{label}</span>\n          {hint ? <span className=\"text-body-sm text-muted-foreground\">{hint}</span> : null}\n        </div>\n      </output>\n    );\n  },\n);\nAgentStartingState.displayName = \"AgentStartingState\";\n\nexport { AgentStartingState };\n"
+      "content": "import { Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { OutputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\ninterface AgentStartingStateProps extends OutputHTMLAttributes<HTMLOutputElement> {\n  /** Title shown next to the spinner. Default \"Starting up…\". */\n  label?: ReactNode;\n  /** Optional secondary copy explaining the bootstrap step. */\n  hint?: ReactNode;\n}\n\n/**\n * AgentStartingState — full-width skeleton shown while the agent boots.\n *\n * Visual: violet spinner + label, optional hint below. Wrapped in a soft card.\n * Uses semantic `<output aria-live=\"polite\">` so screen readers announce the state.\n */\nconst AgentStartingState = forwardRef<HTMLOutputElement, AgentStartingStateProps>(\n  ({ className, label = \"Starting up…\", hint, ...props }, ref) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <output\n        data-slot=\"agent-starting-state\"\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"flex items-center gap-3 rounded-xl border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Loader2 className=\"size-4 animate-spin text-primary\" aria-hidden=\"true\" />\n        <div className=\"grid\">\n          <span className=\"font-medium text-body-sm text-foreground\">{label}</span>\n          {hint ? <span className=\"text-body-sm text-muted-foreground\">{hint}</span> : null}\n        </div>\n      </output>\n    );\n  },\n);\nAgentStartingState.displayName = \"AgentStartingState\";\n\nexport { AgentStartingState };\n"
     }
   ]
 }

package/registry/r/agent-stream.json

@@ -21,7 +21,7 @@
       "path": "components/composites/agent-stream/agent-stream.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-stream.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { UIMessage } from \"@/types/chat\";\nimport { AgentErrorCard, type AgentErrorKind } from \"@/components/ui/agent-error-card\";\nimport { AgentStreaming } from \"@/components/ui/agent-streaming\";\nimport { ToolCallCard, type ToolCallStatus } from \"@/components/ui/tool-call-card\";\nimport { ApprovalCard, type ApprovalSeverity } from \"@/components/blocks/approval-card\";\nimport { ChatMessage } from \"@/components/ui/chat-message/index\";\n\n/**\n * AgentStream — the canonical conversation surface for a code agent.\n *\n * Interleaves chat messages (user + assistant), tool invocations, approval\n * gates, errors, and the live streaming indicator. Mirrors how Claude Code\n * presents work to the user: conversation-centric, tool calls embedded,\n * approvals pause the flow inline, errors surface where they happen.\n *\n * Items are rendered in array order. The consumer fully controls the data;\n * AgentStream is a pure presentational composite over its child primitives.\n */\n\ninterface ToolCallStreamItem {\n  kind: \"tool-call\";\n  id: string;\n  tool: ReactNode;\n  icon?: IconComponent;\n  target?: ReactNode;\n  status: ToolCallStatus;\n  output?: ReactNode;\n  defaultExpanded?: boolean;\n  timestamp?: ReactNode;\n}\n\ninterface ApprovalStreamItem {\n  kind: \"approval\";\n  id: string;\n  severity?: ApprovalSeverity;\n  title: ReactNode;\n  request: ReactNode;\n  description?: ReactNode;\n  details?: ReactNode;\n  onApprove?: () => void;\n  onDeny?: () => void;\n  onAlways?: () => void;\n}\n\ninterface ErrorStreamItem {\n  kind: \"error\";\n  id: string;\n  errorKind?: AgentErrorKind;\n  title: ReactNode;\n  detail?: ReactNode;\n  actions?: ReactNode;\n  timestamp?: ReactNode;\n}\n\ninterface StreamingStreamItem {\n  kind: \"streaming\";\n  id: string;\n  model?: ReactNode;\n  partial?: ReactNode;\n}\n\ninterface MessageStreamItem {\n  kind: \"message\";\n  id: string;\n  message: UIMessage;\n}\n\ninterface CustomStreamItem {\n  kind: \"custom\";\n  id: string;\n  /** Arbitrary node — escape hatch for inline diff cards, etc. */\n  node: ReactNode;\n}\n\nexport type AgentStreamItem =\n  | MessageStreamItem\n  | ToolCallStreamItem\n  | ApprovalStreamItem\n  | ErrorStreamItem\n  | StreamingStreamItem\n  | CustomStreamItem;\n\ninterface AgentStreamProps extends HTMLAttributes<HTMLDivElement> {\n  items: AgentStreamItem[];\n}\n\nconst AgentStream = forwardRef<HTMLDivElement, AgentStreamProps>(\n  ({ className, items, ...props }, ref) => (\n    // T4.1 (MF-4): AgentStream is the canonical live region for the stream\n    // surface. Wrap children in LiveRegionProvider so nested AgentStreaming,\n    // AgentErrorCard, AutoCompactNotice, Skeleton, etc. don't declare their\n    // own aria-live (which would cause double announcements).\n    <LiveRegionProvider value={true}>\n      <div\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        // MEDIUM-001: explicit aria-atomic=\"false\" so VoiceOver/macOS doesn't\n        // reannounce the entire stream on each new item.\n        aria-atomic=\"false\"\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {items.map((item) => {\n          if (item.kind === \"message\") return <ChatMessage key={item.id} message={item.message} />;\n          if (item.kind === \"tool-call\")\n            return (\n              <ToolCallCard\n                key={item.id}\n                tool={item.tool}\n                icon={item.icon}\n                target={item.target}\n                status={item.status}\n                output={item.output}\n                defaultExpanded={item.defaultExpanded}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"approval\")\n            return (\n              <ApprovalCard\n                key={item.id}\n                severity={item.severity}\n                title={item.title}\n                request={item.request}\n                description={item.description}\n                details={item.details}\n                onApprove={item.onApprove}\n                onDeny={item.onDeny}\n                onAlways={item.onAlways}\n              />\n            );\n          if (item.kind === \"error\")\n            return (\n              <AgentErrorCard\n                key={item.id}\n                kind={item.errorKind}\n                title={item.title}\n                detail={item.detail}\n                actions={item.actions}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"streaming\")\n            return <AgentStreaming key={item.id} model={item.model} partial={item.partial} />;\n          if (item.kind === \"custom\") return <div key={item.id}>{item.node}</div>;\n          return null;\n        })}\n      </div>\n    </LiveRegionProvider>\n  ),\n);\nAgentStream.displayName = \"AgentStream\";\n\nexport { AgentStream };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { UIMessage } from \"@/types/chat\";\nimport { AgentErrorCard, type AgentErrorKind } from \"@/components/ui/agent-error-card\";\nimport { AgentStreaming } from \"@/components/ui/agent-streaming\";\nimport { ToolCallCard, type ToolCallStatus } from \"@/components/ui/tool-call-card\";\nimport { ApprovalCard, type ApprovalSeverity } from \"@/components/blocks/approval-card\";\nimport { ChatMessage } from \"@/components/ui/chat-message/index\";\n\n/**\n * AgentStream — the canonical conversation surface for a code agent.\n *\n * Interleaves chat messages (user + assistant), tool invocations, approval\n * gates, errors, and the live streaming indicator. Mirrors how Claude Code\n * presents work to the user: conversation-centric, tool calls embedded,\n * approvals pause the flow inline, errors surface where they happen.\n *\n * Items are rendered in array order. The consumer fully controls the data;\n * AgentStream is a pure presentational composite over its child primitives.\n */\n\nexport interface ToolCallStreamItem {\n  kind: \"tool-call\";\n  id: string;\n  tool: ReactNode;\n  icon?: IconComponent;\n  target?: ReactNode;\n  status: ToolCallStatus;\n  output?: ReactNode;\n  defaultExpanded?: boolean;\n  timestamp?: ReactNode;\n}\n\ninterface ApprovalStreamItem {\n  kind: \"approval\";\n  id: string;\n  severity?: ApprovalSeverity;\n  title: ReactNode;\n  request: ReactNode;\n  description?: ReactNode;\n  details?: ReactNode;\n  onApprove?: () => void;\n  onDeny?: () => void;\n  onAlways?: () => void;\n}\n\ninterface ErrorStreamItem {\n  kind: \"error\";\n  id: string;\n  errorKind?: AgentErrorKind;\n  title: ReactNode;\n  detail?: ReactNode;\n  actions?: ReactNode;\n  timestamp?: ReactNode;\n}\n\ninterface StreamingStreamItem {\n  kind: \"streaming\";\n  id: string;\n  model?: ReactNode;\n  partial?: ReactNode;\n}\n\nexport interface MessageStreamItem {\n  kind: \"message\";\n  id: string;\n  message: UIMessage;\n}\n\ninterface CustomStreamItem {\n  kind: \"custom\";\n  id: string;\n  /** Arbitrary node — escape hatch for inline diff cards, etc. */\n  node: ReactNode;\n}\n\nexport type AgentStreamItem =\n  | MessageStreamItem\n  | ToolCallStreamItem\n  | ApprovalStreamItem\n  | ErrorStreamItem\n  | StreamingStreamItem\n  | CustomStreamItem;\n\ninterface AgentStreamProps extends HTMLAttributes<HTMLDivElement> {\n  items: AgentStreamItem[];\n}\n\nconst AgentStream = forwardRef<HTMLDivElement, AgentStreamProps>(\n  ({ className, items, ...props }, ref) => (\n    // T4.1 (MF-4): AgentStream is the canonical live region for the stream\n    // surface. Wrap children in LiveRegionProvider so nested AgentStreaming,\n    // AgentErrorCard, AutoCompactNotice, Skeleton, etc. don't declare their\n    // own aria-live (which would cause double announcements).\n    <LiveRegionProvider value={true}>\n      <div\n        data-slot=\"agent-stream\"\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        // MEDIUM-001: explicit aria-atomic=\"false\" so VoiceOver/macOS doesn't\n        // reannounce the entire stream on each new item.\n        aria-atomic=\"false\"\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {items.map((item) => {\n          if (item.kind === \"message\") return <ChatMessage key={item.id} message={item.message} />;\n          if (item.kind === \"tool-call\")\n            return (\n              <ToolCallCard\n                key={item.id}\n                tool={item.tool}\n                icon={item.icon}\n                target={item.target}\n                status={item.status}\n                output={item.output}\n                defaultExpanded={item.defaultExpanded}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"approval\")\n            return (\n              <ApprovalCard\n                key={item.id}\n                severity={item.severity}\n                title={item.title}\n                request={item.request}\n                description={item.description}\n                details={item.details}\n                onApprove={item.onApprove}\n                onDeny={item.onDeny}\n                onAlways={item.onAlways}\n              />\n            );\n          if (item.kind === \"error\")\n            return (\n              <AgentErrorCard\n                key={item.id}\n                kind={item.errorKind}\n                title={item.title}\n                detail={item.detail}\n                actions={item.actions}\n                timestamp={item.timestamp}\n              />\n            );\n          if (item.kind === \"streaming\")\n            return <AgentStreaming key={item.id} model={item.model} partial={item.partial} />;\n          if (item.kind === \"custom\") return <div key={item.id}>{item.node}</div>;\n          return null;\n        })}\n      </div>\n    </LiveRegionProvider>\n  ),\n);\nAgentStream.displayName = \"AgentStream\";\n\nexport { AgentStream };\n"
     }
   ]
 }

package/registry/r/agent-streaming.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/agent-streaming/agent-streaming.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-streaming.tsx",
-      "content": "import { Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\n/**\n * AgentStreaming — inline \"agent is thinking / typing\" indicator.\n *\n * Renders inside an agent stream while the model is producing a response.\n * Default visual is 3 violet dots pulsing. If `partial` is provided, renders\n * the streamed-so-far text with a caret. Optional `model` label on the right.\n */\n\ninterface AgentStreamingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Streamed-so-far text. When present, replaces the dots animation. */\n  partial?: ReactNode;\n  /** Optional model name shown as a chip. */\n  model?: ReactNode;\n}\n\nconst AgentStreaming = forwardRef<HTMLDivElement, AgentStreamingProps>(\n  ({ className, partial, model, ...props }, ref) => {\n    // T4.1 (MF-4): when nested inside a live region container (AgentStream,\n    // ChatThread, etc.), omit our own aria-live to prevent double-announcement.\n    // Standalone usage keeps the live region intact.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <div\n        ref={ref}\n        role={inLiveRegion ? undefined : \"status\"}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        aria-label=\"Agent is responding\"\n        className={cn(\n          \"flex w-full items-start gap-3 rounded-xl border border-border/40 bg-card/40 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className=\"grid size-7 shrink-0 place-items-center rounded-full bg-primary/15 text-primary\"\n          aria-hidden=\"true\"\n        >\n          <Sparkles className=\"size-3.5\" />\n        </span>\n        <div className=\"grid min-w-0 flex-1 gap-1\">\n          {model ? (\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model}\n            </span>\n          ) : null}\n          {partial ? (\n            <span className=\"break-words text-body-md text-foreground\">\n              {partial}\n              <span\n                className=\"ml-0.5 inline-block h-4 w-[2px] translate-y-0.5 animate-pulse bg-primary align-middle\"\n                aria-hidden=\"true\"\n              />\n            </span>\n          ) : (\n            <span className=\"flex items-center gap-1.5\" aria-hidden=\"true\">\n              <Dot delay={0} />\n              <Dot delay={120} />\n              <Dot delay={240} />\n              <span className=\"ml-1 text-body-sm text-muted-foreground\">thinking…</span>\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nAgentStreaming.displayName = \"AgentStreaming\";\n\nfunction Dot({ delay }: { delay: number }) {\n  return (\n    <span\n      className=\"size-1.5 animate-pulse rounded-full bg-primary\"\n      style={{ animationDelay: `${delay}ms` }}\n    />\n  );\n}\n\nexport { AgentStreaming };\n"
+      "content": "import { Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\n/**\n * AgentStreaming — inline \"agent is thinking / typing\" indicator.\n *\n * Renders inside an agent stream while the model is producing a response.\n * Default visual is 3 violet dots pulsing. If `partial` is provided, renders\n * the streamed-so-far text with a caret. Optional `model` label on the right.\n */\n\ninterface AgentStreamingProps extends HTMLAttributes<HTMLDivElement> {\n  /** Streamed-so-far text. When present, replaces the dots animation. */\n  partial?: ReactNode;\n  /** Optional model name shown as a chip. */\n  model?: ReactNode;\n}\n\nconst AgentStreaming = forwardRef<HTMLDivElement, AgentStreamingProps>(\n  ({ className, partial, model, ...props }, ref) => {\n    // T4.1 (MF-4): when nested inside a live region container (AgentStream,\n    // ChatThread, etc.), omit our own aria-live to prevent double-announcement.\n    // Standalone usage keeps the live region intact.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <div\n        data-slot=\"agent-streaming\"\n        ref={ref}\n        role={inLiveRegion ? undefined : \"status\"}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        aria-label=\"Agent is responding\"\n        className={cn(\n          \"flex w-full items-start gap-3 rounded-xl border border-border/40 bg-card/40 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className=\"grid size-7 shrink-0 place-items-center rounded-full bg-primary/15 text-primary\"\n          aria-hidden=\"true\"\n        >\n          <Sparkles className=\"size-3.5\" />\n        </span>\n        <div className=\"grid min-w-0 flex-1 gap-1\">\n          {model ? (\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model}\n            </span>\n          ) : null}\n          {partial ? (\n            <span className=\"break-words text-body-md text-foreground\">\n              {partial}\n              <span\n                className=\"ml-0.5 inline-block h-4 w-[2px] translate-y-0.5 animate-pulse bg-primary align-middle\"\n                aria-hidden=\"true\"\n              />\n            </span>\n          ) : (\n            <span className=\"flex items-center gap-1.5\" aria-hidden=\"true\">\n              <Dot delay={0} />\n              <Dot delay={120} />\n              <Dot delay={240} />\n              <span className=\"ml-1 text-body-sm text-muted-foreground\">thinking…</span>\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nAgentStreaming.displayName = \"AgentStreaming\";\n\nfunction Dot({ delay }: { delay: number }) {\n  return (\n    <span\n      className=\"size-1.5 animate-pulse rounded-full bg-primary\"\n      style={{ animationDelay: `${delay}ms` }}\n    />\n  );\n}\n\nexport { AgentStreaming };\n"
     }
   ]
 }

package/registry/r/agent-timeline.json

@@ -16,7 +16,7 @@
       "path": "components/composites/agent-timeline/agent-timeline.tsx",
       "type": "registry:ui",
       "target": "components/ui/agent-timeline.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { AgentEvent as AgentEventModel } from \"@/types/agent\";\nimport { AgentEvent } from \"@/components/ui/agent-event\";\n\ninterface AgentTimelineProps extends HTMLAttributes<HTMLOListElement> {\n  events: AgentEventModel[];\n  /**\n   * If true, events with `detail` are collapsible.\n   */\n  collapsible?: boolean;\n  /**\n   * Renders a vertical line connecting events. Default true.\n   */\n  showLine?: boolean;\n}\n\n/**\n * AgentTimeline — vertical list of agent events.\n *\n * Visual: optional thin border-left running through the column, with each\n * AgentEvent slightly indented from the line. Events animate in via fade-in-up\n * when first mounted.\n */\nconst AgentTimeline = forwardRef<HTMLOListElement, AgentTimelineProps>(\n  ({ className, events, collapsible = true, showLine = true, ...props }, ref) => (\n    <ol\n      ref={ref}\n      className={cn(\n        \"grid gap-1\",\n        showLine &&\n          \"relative pl-4 before:absolute before:top-1 before:bottom-1 before:left-[11px] before:w-px before:bg-border/60\",\n        className,\n      )}\n      {...props}\n    >\n      {events.map((event) => (\n        <li key={event.id} className=\"animate-fade-in-up\">\n          <AgentEvent event={event} collapsible={collapsible} />\n        </li>\n      ))}\n    </ol>\n  ),\n);\nAgentTimeline.displayName = \"AgentTimeline\";\n\nexport { AgentTimeline };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { AgentEvent as AgentEventModel } from \"@/types/agent\";\nimport { AgentEvent } from \"@/components/ui/agent-event\";\n\ninterface AgentTimelineProps extends HTMLAttributes<HTMLOListElement> {\n  events: AgentEventModel[];\n  /**\n   * If true, events with `detail` are collapsible.\n   */\n  collapsible?: boolean;\n  /**\n   * Renders a vertical line connecting events. Default true.\n   */\n  showLine?: boolean;\n}\n\n/**\n * AgentTimeline — vertical list of agent events.\n *\n * Visual: optional thin border-left running through the column, with each\n * AgentEvent slightly indented from the line. Events animate in via fade-in-up\n * when first mounted.\n */\nconst AgentTimeline = forwardRef<HTMLOListElement, AgentTimelineProps>(\n  ({ className, events, collapsible = true, showLine = true, ...props }, ref) => (\n    <ol\n      data-slot=\"agent-timeline\"\n      ref={ref}\n      className={cn(\n        \"grid gap-1\",\n        showLine &&\n          \"relative pl-4 before:absolute before:top-1 before:bottom-1 before:left-[11px] before:w-px before:bg-border/60\",\n        className,\n      )}\n      {...props}\n    >\n      {events.map((event) => (\n        <li key={event.id} className=\"animate-fade-in-up\">\n          <AgentEvent event={event} collapsible={collapsible} />\n        </li>\n      ))}\n    </ol>\n  ),\n);\nAgentTimeline.displayName = \"AgentTimeline\";\n\nexport { AgentTimeline };\n"
     }
   ]
 }