@usetheo/ui 0.1.0-next.0

package/registry/r/agent-composer.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-composer",
+  "type": "registry:ui",
+  "title": "AgentComposer",
+  "description": "ChatComposer + slash-command / @file / #memory triggers.",
+  "dependencies": [],
+  "registryDependencies": [
+    "chat-composer",
+    "cn",
+    "mention-menu",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-editor.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-editor",
+  "type": "registry:block",
+  "title": "AgentEditor",
+  "description": "Form for creating or editing an Agent persona.",
+  "dependencies": [],
+  "registryDependencies": [
+    "agent-profile",
+    "button",
+    "cn",
+    "form-field",
+    "input",
+    "mode-types",
+    "select",
+    "tailwind-preset",
+    "textarea"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

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

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-error-card",
+  "type": "registry:ui",
+  "title": "AgentErrorCard",
+  "description": "Inline error / blocked-state card for an agent stream.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-event.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-event",
+  "type": "registry:ui",
+  "title": "AgentEvent",
+  "description": "Single event row in the agent timeline.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "agent-types",
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-handoff.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-handoff",
+  "type": "registry:ui",
+  "title": "AgentHandoff",
+  "description": "Visual marker of one agent delegating to another.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-profile.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-profile",
+  "type": "registry:ui",
+  "title": "AgentProfile",
+  "description": "Switcher between multiple agent profiles (coder, planner,",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

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

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-starting-state",
+  "type": "registry:ui",
+  "title": "AgentStartingState",
+  "description": "Full-width skeleton shown while the agent boots.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-stream.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-stream",
+  "type": "registry:ui",
+  "title": "AgentStream",
+  "description": "The canonical conversation surface for a code agent.",
+  "dependencies": [],
+  "registryDependencies": [
+    "agent-error-card",
+    "agent-streaming",
+    "approval-card",
+    "chat-message",
+    "chat-types",
+    "cn",
+    "tailwind-preset",
+    "tool-call-card",
+    "types"
+  ],
+  "files": [
+    {
+      "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 { Message } from \"@/types/chat\";\nimport { AgentErrorCard, type AgentErrorKind } from \"@/components/ui/agent-error-card\";\nimport { AgentStreaming } from \"@/components/ui/agent-streaming\";\nimport { ChatMessage } from \"@/components/ui/chat-message\";\nimport { ToolCallCard, type ToolCallStatus } from \"@/components/ui/tool-call-card\";\nimport { ApprovalCard, type ApprovalSeverity } from \"@/components/blocks/approval-card\";\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: Message;\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"
+    }
+  ]
+}

package/registry/r/agent-streaming.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-streaming",
+  "type": "registry:ui",
+  "title": "AgentStreaming",
+  "description": "Inline \"agent is thinking / typing\" indicator.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-timeline.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-timeline",
+  "type": "registry:ui",
+  "title": "AgentTimeline",
+  "description": "Vertical list of agent events.",
+  "dependencies": [],
+  "registryDependencies": [
+    "agent-event",
+    "agent-types",
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/r/agent-types.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "agent-types",
+  "type": "registry:lib",
+  "title": "Theo UI agent types",
+  "description": "Shared TypeScript types for the agent timeline, events, and statuses.",
+  "files": [
+    {
+      "path": "types/agent.ts",
+      "type": "registry:lib",
+      "target": "types/agent.ts",
+      "content": "import type { ReactNode } from \"react\";\n\nexport type AgentEventType =\n  | \"command\"\n  | \"file_read\"\n  | \"file_write\"\n  | \"edit\"\n  | \"lint\"\n  | \"typecheck\"\n  | \"build\"\n  | \"tool\";\n\nexport type AgentEventStatus = \"pending\" | \"running\" | \"success\" | \"failed\";\n\nexport interface AgentEvent {\n  id: string;\n  type: AgentEventType;\n  label: string;\n  /** File path when the event is file-related. */\n  path?: string;\n  /** Diff stats for edit/write events. */\n  diff?: { added: number; removed: number };\n  status: AgentEventStatus;\n  timestamp?: string;\n  /** Optional expandable detail (e.g. command output, diff snippet). */\n  detail?: ReactNode;\n}\n"
+    }
+  ]
+}

package/registry/r/approval-card.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "approval-card",
+  "type": "registry:block",
+  "title": "ApprovalCard",
+  "description": "Inline pause-and-ask card for an agent stream.",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/composites/approval-card/approval-card.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/approval-card.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { AlertTriangle, Lock, ShieldCheck } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport { Button } from \"@/components/ui/button\";\n\n/**\n * ApprovalCard — inline pause-and-ask card for an agent stream.\n *\n * Used when the agent wants to perform an action that requires the user's\n * consent (run a destructive command, use a new tool, edit outside the\n * sandbox, etc.). Renders as a bordered card inside the conversation stream,\n * pauses the visual flow, and exposes Deny / Approve / Always-allow actions.\n */\n\nconst cardVariants = cva(\n  \"grid w-full gap-3 rounded-xl border p-4 transition-colors duration-base ease-out-soft\",\n  {\n    variants: {\n      severity: {\n        info: \"border-info/40 bg-info/5\",\n        warning: \"border-warning/40 bg-warning/5\",\n        destructive: \"border-destructive/40 bg-destructive/5\",\n      },\n    },\n    defaultVariants: { severity: \"warning\" },\n  },\n);\n\nconst ICON_FOR_SEVERITY: Record<NonNullable<ApprovalSeverity>, IconComponent> = {\n  info: ShieldCheck,\n  warning: AlertTriangle,\n  destructive: Lock,\n};\n\nconst ICON_TONE: Record<NonNullable<ApprovalSeverity>, string> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n  destructive: \"text-destructive\",\n};\n\ntype ApprovalSeverity = NonNullable<VariantProps<typeof cardVariants>[\"severity\"]>;\n\ninterface ApprovalCardProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\">,\n    VariantProps<typeof cardVariants> {\n  /** Short headline (\"Run destructive command?\"). */\n  title: ReactNode;\n  /** What is being requested (command, file path, tool name…). Renders monospace. */\n  request: ReactNode;\n  /** Optional explanation line under the request. */\n  description?: ReactNode;\n  /** Optional expandable details (e.g. full command, file diff). */\n  details?: ReactNode;\n  /** Pressing the primary \"Approve\" button. */\n  onApprove?: () => void;\n  /** Pressing \"Deny\". */\n  onDeny?: () => void;\n  /** Pressing \"Always allow\" — optional tertiary action. */\n  onAlways?: () => void;\n  /** Customise the icon shown in the corner. */\n  icon?: IconComponent;\n}\n\nconst ApprovalCard = forwardRef<HTMLElement, ApprovalCardProps>(\n  (\n    {\n      className,\n      severity = \"warning\",\n      title,\n      request,\n      description,\n      details,\n      onApprove,\n      onDeny,\n      onAlways,\n      icon,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedSeverity: ApprovalSeverity = severity ?? \"warning\";\n    const Icon = icon ?? ICON_FOR_SEVERITY[resolvedSeverity];\n    return (\n      <section\n        ref={ref}\n        role=\"alertdialog\"\n        aria-label={typeof title === \"string\" ? title : \"Approval required\"}\n        className={cn(cardVariants({ severity: resolvedSeverity }), className)}\n        {...props}\n      >\n        <header className=\"flex items-start gap-3\">\n          <span\n            className={cn(\"mt-0.5 inline-flex shrink-0\", ICON_TONE[resolvedSeverity])}\n            aria-hidden=\"true\"\n          >\n            <Icon className=\"size-4\" />\n          </span>\n          <div className=\"grid min-w-0 flex-1 gap-1\">\n            <h4 className=\"font-display text-foreground text-title-md tracking-tight\">{title}</h4>\n            <code className=\"overflow-hidden break-words font-mono text-code-md text-muted-foreground\">\n              {request}\n            </code>\n            {description ? (\n              <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n            ) : null}\n          </div>\n        </header>\n        {details ? (\n          <details className=\"rounded-md border border-border/40 bg-background/40 px-3 py-2 text-body-sm\">\n            <summary className=\"cursor-pointer select-none font-mono text-label text-muted-foreground\">\n              Show details\n            </summary>\n            <div className=\"mt-2 break-words\">{details}</div>\n          </details>\n        ) : null}\n        <footer className=\"flex flex-wrap items-center justify-end gap-2\">\n          {onAlways ? (\n            <Button size=\"sm\" variant=\"ghost\" onClick={onAlways}>\n              Always allow\n            </Button>\n          ) : null}\n          {onDeny ? (\n            <Button size=\"sm\" variant=\"secondary\" onClick={onDeny}>\n              Deny\n            </Button>\n          ) : null}\n          {onApprove ? (\n            <Button\n              size=\"sm\"\n              variant={resolvedSeverity === \"destructive\" ? \"destructive\" : \"primary\"}\n              onClick={onApprove}\n            >\n              Approve\n            </Button>\n          ) : null}\n        </footer>\n      </section>\n    );\n  },\n);\nApprovalCard.displayName = \"ApprovalCard\";\n\nexport { ApprovalCard, type ApprovalSeverity };\n"
+    }
+  ]
+}

package/registry/r/artifact-preview.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "artifact-preview",
+  "type": "registry:ui",
+  "title": "ArtifactPreview",
+  "description": "Shell for previewing a generated artifact (XLSX, PDF, image…).",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/artifact-preview/artifact-preview.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/artifact-preview.tsx",
+      "content": "import { Maximize2, RefreshCw, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ArtifactPreviewProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  /** Optional source/destination label (e.g. \"Google Drive\", \"Local · ~/reports\"). */\n  source?: ReactNode;\n  /**\n   * Tabs at the bottom of the artifact (e.g. \"Expense Report | Currency Summary\").\n   * Caller controls the active state externally.\n   */\n  tabs?: ReactNode;\n  /** Top toolbar actions. Defaults to refresh + maximize + close. */\n  toolbar?: ReactNode;\n  onMaximize?: () => void;\n  onRefresh?: () => void;\n  onClose?: () => void;\n}\n\n/**\n * ArtifactPreview — shell for previewing a generated artifact (XLSX, PDF, image…).\n *\n * Renders a toolbar + content slot + optional bottom tabs. The actual preview\n * (spreadsheet, PDF embed, image) is the caller's `children`, so this stays\n * dependency-free.\n */\nconst ArtifactPreview = forwardRef<HTMLElement, ArtifactPreviewProps>(\n  (\n    { className, title, source, tabs, toolbar, onMaximize, onRefresh, onClose, children, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"flex h-full flex-col overflow-hidden rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      <header className=\"flex items-center gap-3 border-border/40 border-b px-3 py-2\">\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate font-medium text-body-sm text-foreground\">{title}</p>\n          {source ? (\n            <p className=\"truncate font-mono text-label text-muted-foreground\">{source}</p>\n          ) : null}\n        </div>\n        {toolbar ?? (\n          <div className=\"flex items-center gap-1\">\n            {onRefresh ? (\n              <ToolbarButton onClick={onRefresh} aria-label=\"Refresh\">\n                <RefreshCw className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n            {onMaximize ? (\n              <ToolbarButton onClick={onMaximize} aria-label=\"Maximize\">\n                <Maximize2 className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n            {onClose ? (\n              <ToolbarButton onClick={onClose} aria-label=\"Close preview\">\n                <X className=\"size-3.5\" />\n              </ToolbarButton>\n            ) : null}\n          </div>\n        )}\n      </header>\n      <div className=\"flex-1 overflow-auto\">{children}</div>\n      {tabs ? (\n        <footer className=\"flex items-center gap-1 border-border/40 border-t px-2 py-1\">\n          {tabs}\n        </footer>\n      ) : null}\n    </section>\n  ),\n);\nArtifactPreview.displayName = \"ArtifactPreview\";\n\nfunction ToolbarButton({\n  onClick,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  onClick?: () => void;\n  children: ReactNode;\n  \"aria-label\": string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { ArtifactPreview };\n"
+    }
+  ]
+}

package/registry/r/attachment-chip.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "attachment-chip",
+  "type": "registry:ui",
+  "title": "AttachmentChip",
+  "description": "File pill shown in chat composer or message attachments row.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "chat-types",
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/attachment-chip/attachment-chip.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/attachment-chip.tsx",
+      "content": "import { File, FileCode, FileImage, FileSpreadsheet, FileText, X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { Attachment } from \"@/types/chat\";\n\nconst typeIcon: Record<string, IconComponent> = {\n  image: FileImage,\n  spreadsheet: FileSpreadsheet,\n  code: FileCode,\n  text: FileText,\n};\n\ninterface AttachmentChipProps extends HTMLAttributes<HTMLDivElement> {\n  attachment: Attachment;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * AttachmentChip — file pill shown in chat composer or message attachments row.\n *\n * Visual: rounded chip with type-icon + name + size + optional remove button.\n * Truncates the name with `text-ellipsis`; full name available via title.\n */\nconst AttachmentChip = forwardRef<HTMLDivElement, AttachmentChipProps>(\n  ({ className, attachment, onRemove, ...props }, ref) => {\n    const Icon: IconComponent = (attachment.type ? typeIcon[attachment.type] : undefined) ?? File;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"inline-flex max-w-[18rem] items-center gap-2 rounded-md border border-border/40 bg-muted/60 px-2 py-1\",\n          \"font-mono text-code-sm text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <Icon className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n        <span className=\"truncate text-foreground\" title={attachment.name}>\n          {attachment.name}\n        </span>\n        {attachment.size ? <span>· {attachment.size}</span> : null}\n        {onRemove ? (\n          <button\n            type=\"button\"\n            onClick={() => onRemove(attachment.id)}\n            aria-label={`Remove ${attachment.name}`}\n            className={cn(\n              \"ml-1 rounded-sm p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-destructive\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            <X className=\"size-3\" />\n          </button>\n        ) : null}\n      </div>\n    );\n  },\n);\nAttachmentChip.displayName = \"AttachmentChip\";\n\nexport { AttachmentChip };\n"
+    }
+  ]
+}

package/registry/r/audit-log-entry.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "audit-log-entry",
+  "type": "registry:ui",
+  "title": "AuditLogEntry",
+  "description": "One row in the agent audit log.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/audit-log-entry/audit-log-entry.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/audit-log-entry.tsx",
+      "content": "import { Bot, ShieldAlert, User } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport type AuditActorKind = \"user\" | \"agent\" | \"system\";\n\nexport type AuditSeverity = \"info\" | \"warning\" | \"error\";\n\nexport interface AuditEntry {\n  id: string;\n  /** Who triggered the action. */\n  actor: { kind: AuditActorKind; name: string };\n  /** Verb / action label, e.g. \"wrote file\", \"ran command\". */\n  action: string;\n  /** Target of the action (file path, command, etc). */\n  target?: ReactNode;\n  /** ISO timestamp / friendly label. */\n  timestamp: string;\n  severity?: AuditSeverity;\n  /** Optional detail block (multi-line). */\n  detail?: ReactNode;\n}\n\ninterface AuditLogEntryProps extends HTMLAttributes<HTMLElement> {\n  entry: AuditEntry;\n}\n\nconst ACTOR_ICON: Record<AuditActorKind, IconComponent> = {\n  user: User,\n  agent: Bot,\n  system: ShieldAlert,\n};\n\nconst SEVERITY_CLASS: Record<AuditSeverity, string> = {\n  info: \"text-muted-foreground\",\n  warning: \"text-warning\",\n  error: \"text-destructive\",\n};\n\n/**\n * AuditLogEntry — one row in the agent audit log. Tells the user exactly\n * who did what and when. Severity colors the timestamp and target.\n */\nconst AuditLogEntry = forwardRef<HTMLElement, AuditLogEntryProps>(\n  ({ className, entry, ...props }, ref) => {\n    const Icon = ACTOR_ICON[entry.actor.kind];\n    const sev = entry.severity ?? \"info\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-start gap-3 border-border/30 border-b px-3 py-2\",\n          \"last:border-b-0\",\n          className,\n        )}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"mt-0.5 grid size-7 place-items-center rounded-md bg-muted text-muted-foreground\",\n            sev === \"warning\" && \"text-warning\",\n            sev === \"error\" && \"text-destructive\",\n          )}\n          aria-hidden=\"true\"\n        >\n          <Icon className=\"size-3.5\" />\n        </span>\n        <div className=\"min-w-0\">\n          <p className=\"flex flex-wrap items-baseline gap-2 text-body-sm\">\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">\n              {entry.actor.name}\n            </span>\n            <span className={cn(\"font-mono text-code-sm\", SEVERITY_CLASS[sev])}>\n              {entry.action}\n            </span>\n            {entry.target ? (\n              <span className=\"truncate font-mono text-code-sm text-foreground/80\">\n                {entry.target}\n              </span>\n            ) : null}\n          </p>\n          {entry.detail ? (\n            <div className=\"mt-1 rounded-md bg-muted/40 px-2.5 py-1.5 font-mono text-code-sm text-muted-foreground\">\n              {entry.detail}\n            </div>\n          ) : null}\n        </div>\n        <span className=\"shrink-0 font-mono text-label text-muted-foreground tabular-nums\">\n          {entry.timestamp}\n        </span>\n      </article>\n    );\n  },\n);\nAuditLogEntry.displayName = \"AuditLogEntry\";\n\nexport { AuditLogEntry };\n"
+    }
+  ]
+}

package/registry/r/auto-compact-notice.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "auto-compact-notice",
+  "type": "registry:ui",
+  "title": "AutoCompactNotice",
+  "description": "Inline banner warning the user that the agent is",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/auto-compact-notice/auto-compact-notice.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/auto-compact-notice.tsx",
+      "content": "import { Sparkles, X } 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\ninterface AutoCompactNoticeProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Optional custom title. */\n  title?: ReactNode;\n  /**\n   * How many turns until the next auto-compaction. Used to render an inline\n   * countdown chip.\n   */\n  turnsRemaining?: number;\n  /** Approx tokens that will be removed/summarized. */\n  tokensToCompact?: number;\n  onCompactNow?: () => void;\n  onDismiss?: () => void;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * AutoCompactNotice — inline banner warning the user that the agent is\n * about to summarize / compact older context. Lets them act early (compact\n * now) or dismiss.\n *\n * Critical for transparency: a user must not be surprised by silent context\n * loss. This component announces it before it happens.\n */\nconst AutoCompactNotice = forwardRef<HTMLElement, AutoCompactNoticeProps>(\n  (\n    {\n      className,\n      title = \"Auto-compaction soon\",\n      turnsRemaining,\n      tokensToCompact,\n      onCompactNow,\n      onDismiss,\n      ...props\n    },\n    ref,\n  ) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <aside\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-lg border border-warning/40 bg-warning/10 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Sparkles className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden=\"true\" />\n        <div className=\"grid gap-1\">\n          <p className=\"flex items-baseline gap-2 font-medium text-body-sm text-foreground\">\n            {title}\n            {turnsRemaining !== undefined ? (\n              <span className=\"inline-flex items-center rounded-full bg-warning/20 px-2 py-0.5 font-mono text-label text-warning tabular-nums\">\n                {turnsRemaining} {turnsRemaining === 1 ? \"turn\" : \"turns\"} left\n              </span>\n            ) : null}\n          </p>\n          <p className=\"text-body-sm text-muted-foreground\">\n            Older context will be summarized to make room.\n            {tokensToCompact !== undefined ? (\n              <>\n                {\" \"}\n                About{\" \"}\n                <span className=\"font-mono tabular-nums\">\n                  {formatTokens(tokensToCompact)} tokens\n                </span>{\" \"}\n                will be replaced by a recap.\n              </>\n            ) : null}\n          </p>\n          {onCompactNow ? (\n            <button\n              type=\"button\"\n              onClick={onCompactNow}\n              className=\"mt-1 inline-flex w-fit items-center rounded-md border border-warning/40 bg-card px-2.5 py-1 font-mono text-label text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Compact now\n            </button>\n          ) : null}\n        </div>\n        {onDismiss ? (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            aria-label=\"Dismiss\"\n            className=\"rounded-md p-1 text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <X className=\"size-3.5\" />\n          </button>\n        ) : null}\n      </aside>\n    );\n  },\n);\nAutoCompactNotice.displayName = \"AutoCompactNotice\";\n\nexport { AutoCompactNotice };\n"
+    }
+  ]
+}

package/registry/r/avatar.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "type": "registry:ui",
+  "title": "Avatar",
+  "description": "User/team avatar with safe fallback to initials.",
+  "dependencies": [
+    "@radix-ui/react-avatar",
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/avatar/avatar.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/avatar.tsx",
+      "content": "import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Avatar — user/team avatar with safe fallback to initials.\n *\n * Composition:\n *   <Avatar size=\"md\">\n *     <Avatar.Image src=\"…\" alt=\"…\" />\n *     <Avatar.Fallback>AA</Avatar.Fallback>\n *   </Avatar>\n *\n * Built on Radix Avatar (handles image load failures → fallback automatically).\n * Sizes scale on the root; fallback inherits the size's text scale.\n */\n\nconst avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 overflow-hidden rounded-full\",\n    \"border border-border/40 bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"size-6 text-label\",\n        sm: \"size-7 text-label\",\n        md: \"size-9 text-body-sm\",\n        lg: \"size-12 text-body-md\",\n        xl: \"size-16 text-title-md\",\n      },\n      tone: {\n        muted: \"bg-muted text-foreground\",\n        primary: \"bg-primary text-primary-foreground\",\n        accent: \"bg-accent text-accent-foreground\",\n      },\n    },\n    defaultVariants: { size: \"md\", tone: \"muted\" },\n  },\n);\n\ninterface AvatarProps\n  extends ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\nconst AvatarRoot = forwardRef<ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n  ({ className, size, tone, ...props }, ref) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cn(avatarVariants({ size, tone }), className)}\n      {...props}\n    />\n  ),\n);\nAvatarRoot.displayName = \"Avatar\";\n\nconst AvatarImage = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Image>,\n  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square size-full object-cover\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Fallback>,\n  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center font-medium leading-none\",\n      className,\n    )}\n    delayMs={300}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst Avatar = /*#__PURE__*/ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { Avatar, avatarVariants };\n"
+    }
+  ]
+}

package/registry/r/badge.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "title": "Badge",
+  "description": "Small status / tag indicator with semantic variants (default, primary, success, warning, destructive, info).",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/badge/badge.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/badge.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Badge — small status / tag indicator.\n *\n * Variants:\n *   - default     muted surface, hairline border\n *   - primary     violet outline + soft violet bg\n *   - accent      burnt sienna (celebration / pro / beta)\n *   - success     deploy succeeded\n *   - warning     attention needed\n *   - destructive failed\n *   - outline     transparent, just border\n *\n * Status dots are inlined via `<Badge.Dot />` for things like \"Building…\",\n * \"Running\", \"Failed\" rows in deployment lists.\n */\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5\",\n    \"font-sans text-label uppercase tracking-wider\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-muted text-muted-foreground\",\n        primary: \"border-primary/30 bg-primary/10 text-primary\",\n        accent: \"border-accent/40 bg-accent/15 text-accent\",\n        success: \"border-success/40 bg-success/15 text-success\",\n        warning: \"border-warning/40 bg-warning/15 text-warning\",\n        destructive: \"border-destructive/40 bg-destructive/15 text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant, ...props }, ref) => (\n  <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />\n));\nBadge.displayName = \"Badge\";\n\ninterface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {\n  pulse?: boolean;\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"destructive\" | \"muted\";\n}\n\nconst toneClass: Record<NonNullable<BadgeDotProps[\"tone\"]>, string> = {\n  primary: \"bg-primary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground\",\n};\n\nconst Dot = forwardRef<HTMLSpanElement, BadgeDotProps>(\n  ({ className, pulse = false, tone = \"success\", ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-block size-1.5 rounded-full\",\n        toneClass[tone],\n        pulse && \"animate-pulse-glow\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDot.displayName = \"Badge.Dot\";\n\nconst BadgeWithDot = Badge as typeof Badge & { Dot: typeof Dot };\nBadgeWithDot.Dot = Dot;\n\nexport { BadgeWithDot as Badge, badgeVariants };\n"
+    }
+  ]
+}