@usetheo/ui 0.1.0-next.0

package/registry/r/memory-editor.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "memory-editor",
+  "type": "registry:ui",
+  "title": "MemoryEditor",
+  "description": "Three-layer Markdown memory editor (global / project /",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/memory-editor/memory-editor.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/memory-editor.tsx",
+      "content": "import { Brain, Folder, FolderOpen, 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 MemoryScope = \"global\" | \"project\" | \"session\";\n\nexport interface MemoryLayer {\n  scope: MemoryScope;\n  /** File path on disk for transparency. */\n  path: string;\n  /** Markdown content. */\n  content: string;\n  /** Last modified label, e.g. \"2m ago\". */\n  modifiedAt?: string;\n}\n\ninterface MemoryEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  layers: MemoryLayer[];\n  /** Currently active layer for editing. */\n  activeScope: MemoryScope;\n  onScopeChange: (scope: MemoryScope) => void;\n  onContentChange: (scope: MemoryScope, next: string) => void;\n  title?: ReactNode;\n}\n\nconst SCOPE_META: Record<MemoryScope, { label: string; icon: IconComponent; hint: string }> = {\n  global: { label: \"Global\", icon: User, hint: \"Applies to every project for this user.\" },\n  project: {\n    label: \"Project\",\n    icon: FolderOpen,\n    hint: \"Versioned with the project. Shared by team.\",\n  },\n  session: { label: \"Session\", icon: Folder, hint: \"This session only. Wiped on exit.\" },\n};\n\n/**\n * MemoryEditor — three-layer Markdown memory editor (global / project /\n * session) mirroring Claude Code's CLAUDE.md hierarchy.\n *\n * Each scope keeps its own file. Switching scopes via tab updates which\n * layer is being edited. Path is shown explicitly so users know where the\n * content lives on disk.\n */\nconst MemoryEditor = forwardRef<HTMLDivElement, MemoryEditorProps>(\n  (\n    { className, layers, activeScope, onScopeChange, onContentChange, title = \"Memory\", ...props },\n    ref,\n  ) => {\n    const active = layers.find((l) => l.scope === activeScope);\n    const ActiveIcon = active ? SCOPE_META[active.scope].icon : Brain;\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Brain className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          </div>\n          <div className=\"inline-flex items-center rounded-lg border border-border/60 bg-muted p-0.5\">\n            {([\"global\", \"project\", \"session\"] as const).map((scope) => {\n              const meta = SCOPE_META[scope];\n              const Icon = meta.icon;\n              const isActive = scope === activeScope;\n              return (\n                <button\n                  key={scope}\n                  type=\"button\"\n                  onClick={() => onScopeChange(scope)}\n                  aria-pressed={isActive}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 rounded-md px-2.5 py-1\",\n                    \"font-sans text-label transition-colors\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                    isActive\n                      ? \"bg-card text-foreground shadow-sm\"\n                      : \"text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  <Icon className=\"size-3\" />\n                  {meta.label}\n                </button>\n              );\n            })}\n          </div>\n        </header>\n\n        {active ? (\n          <>\n            <div className=\"flex items-center justify-between gap-3 border-border/40 border-b bg-muted/30 px-4 py-2\">\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <ActiveIcon className=\"size-3 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n                <span className=\"truncate font-mono text-code-sm text-foreground\">\n                  {active.path}\n                </span>\n                {active.modifiedAt ? (\n                  <span className=\"shrink-0 font-mono text-label text-muted-foreground\">\n                    · {active.modifiedAt}\n                  </span>\n                ) : null}\n              </div>\n              <span className=\"font-sans text-label text-muted-foreground italic\">\n                {SCOPE_META[active.scope].hint}\n              </span>\n            </div>\n            <textarea\n              value={active.content}\n              onChange={(e) => onContentChange(active.scope, e.target.value)}\n              rows={12}\n              className=\"w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground placeholder:text-muted-foreground focus:outline-none\"\n              placeholder={`# ${SCOPE_META[active.scope].label} notes\\n\\nWrite Markdown the agent should keep in context.`}\n            />\n          </>\n        ) : null}\n      </section>\n    );\n  },\n);\nMemoryEditor.displayName = \"MemoryEditor\";\n\nexport { MemoryEditor };\n"
+    }
+  ]
+}

package/registry/r/mention-menu.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mention-menu",
+  "type": "registry:ui",
+  "title": "MentionMenu",
+  "description": "Keyboard-navigable popover for slash-command / @file / #memory",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/mention-menu/mention-menu.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/mention-menu.tsx",
+      "content": "import { Hash, type LucideIcon, Slash } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface MentionItem {\n  id: string;\n  /** Primary label shown on the row. */\n  label: ReactNode;\n  /** Secondary one-line description (optional). */\n  description?: ReactNode;\n  /** Optional per-row icon override. */\n  icon?: IconComponent;\n}\n\n/** Trigger character — drives the default header + icon if not overridden. */\nexport type MentionTrigger = \"/\" | \"@\" | \"#\";\n\ninterface MentionMenuProps {\n  /** Whether the panel is open. The consumer (composer) controls this. */\n  open: boolean;\n  /** Trigger character that opened the menu — used for default title + icon. */\n  trigger: MentionTrigger;\n  /** Items to display (already filtered by the consumer). */\n  items: MentionItem[];\n  /** Fires when the user selects an item via click or Enter. */\n  onSelect: (item: MentionItem) => void;\n  /** Fires when the user dismisses (Esc, click outside). */\n  onClose: () => void;\n  /** Title above the list. Defaults to the trigger's domain (\"Commands\", \"Files\", \"Memories\"). */\n  title?: ReactNode;\n  /** Empty-state message when items is empty. */\n  emptyLabel?: ReactNode;\n  /** Override the alignment relative to its anchor. Default: above-left. */\n  className?: string;\n}\n\nconst DEFAULT_TITLE: Record<MentionTrigger, string> = {\n  \"/\": \"Commands\",\n  \"@\": \"Files\",\n  \"#\": \"Memories\",\n};\n\nconst DEFAULT_ICON: Record<MentionTrigger, LucideIcon> = {\n  \"/\": Slash,\n  \"@\": Slash,\n  \"#\": Hash,\n};\n\n/**\n * MentionMenu — keyboard-navigable popover for slash-command / @file / #memory\n * triggers inside an agent composer.\n *\n * Generic by design: the consumer decides what items appear for each trigger\n * (commands list, file search, memory lookup, …). MentionMenu owns the visual\n * presentation, selection highlight, Esc/Enter/Arrow keys.\n *\n * Position: absolute, anchored to the closest positioned ancestor — usually\n * the composer wrapper. Default `bottom-full left-0` (above the composer).\n */\nexport function MentionMenu({\n  open,\n  trigger,\n  items,\n  onSelect,\n  onClose,\n  title,\n  emptyLabel = \"No matches\",\n  className,\n}: MentionMenuProps) {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const resolvedTitle = title ?? DEFAULT_TITLE[trigger];\n  const TriggerIcon = DEFAULT_ICON[trigger];\n\n  // Clamp the highlighted index whenever items change.\n  useEffect(() => {\n    if (activeIndex >= items.length) setActiveIndex(Math.max(0, items.length - 1));\n  }, [items.length, activeIndex]);\n\n  // Reset highlight when the menu opens / trigger changes.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional reset on open/trigger\n  useEffect(() => {\n    if (open) setActiveIndex(0);\n  }, [open, trigger]);\n\n  // Global keyboard handler — Arrows / Enter / Esc. Captures while open.\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setActiveIndex((i) => Math.min(items.length - 1, i + 1));\n      } else if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        setActiveIndex((i) => Math.max(0, i - 1));\n      } else if (e.key === \"Enter\") {\n        if (items.length === 0) return;\n        e.preventDefault();\n        const item = items[activeIndex];\n        if (item) onSelect(item);\n      } else if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey, true);\n    return () => window.removeEventListener(\"keydown\", onKey, true);\n  }, [open, items, activeIndex, onSelect, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      aria-label={typeof resolvedTitle === \"string\" ? resolvedTitle : \"Mention menu\"}\n      tabIndex={-1}\n      className={cn(\n        \"absolute bottom-full left-0 z-40 mb-2 w-[22rem] max-w-full\",\n        \"overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md\",\n        \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n        className,\n      )}\n      data-state=\"open\"\n    >\n      <div\n        role=\"presentation\"\n        className=\"flex items-center justify-between gap-2 border-border/40 border-b bg-muted/30 px-3 py-2\"\n      >\n        <span className=\"inline-flex items-center gap-1.5 font-mono text-label text-muted-foreground uppercase tracking-wider\">\n          <TriggerIcon className=\"size-3\" aria-hidden=\"true\" />\n          {resolvedTitle}\n        </span>\n        <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n          {items.length}\n        </span>\n      </div>\n      {items.length === 0 ? (\n        <div role=\"presentation\" className=\"px-3 py-4 text-body-sm text-muted-foreground\">\n          {emptyLabel}\n        </div>\n      ) : (\n        <ul ref={listRef} role=\"presentation\" className=\"max-h-[18rem] overflow-y-auto py-1\">\n          {items.map((item, idx) => {\n            const Icon = item.icon;\n            const active = idx === activeIndex;\n            return (\n              <li key={item.id} role=\"presentation\">\n                <button\n                  type=\"button\"\n                  role=\"menuitem\"\n                  onMouseEnter={() => setActiveIndex(idx)}\n                  // Prevent textarea from losing focus on click so the caret stays put.\n                  onMouseDown={(e) => e.preventDefault()}\n                  onClick={() => onSelect(item)}\n                  className={cn(\n                    \"flex w-full items-start gap-3 px-3 py-2 text-left\",\n                    \"transition-colors duration-base ease-out-soft\",\n                    active ? \"bg-muted\" : \"hover:bg-muted/60\",\n                  )}\n                  data-active={active || undefined}\n                >\n                  {Icon ? (\n                    <Icon\n                      className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"\n                      aria-hidden=\"true\"\n                    />\n                  ) : null}\n                  <span className=\"grid min-w-0 flex-1 gap-0.5\">\n                    <span className=\"truncate font-medium font-mono text-code-md\">\n                      {item.label}\n                    </span>\n                    {item.description ? (\n                      <span className=\"truncate font-sans text-label text-muted-foreground\">\n                        {item.description}\n                      </span>\n                    ) : null}\n                  </span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/r/metrics-panel.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "metrics-panel",
+  "type": "registry:block",
+  "title": "MetricsPanel",
+  "description": "Grid of metric tiles for observability dashboards.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/metrics-panel/metrics-panel.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/metrics-panel.tsx",
+      "content": "import { TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface Metric {\n  /**\n   * Short label, e.g. \"Requests/s\", \"p95 latency\", \"Error rate\".\n   */\n  label: string;\n  /**\n   * Pre-formatted value string, e.g. \"1.2k\", \"182ms\", \"0.03%\".\n   * Consumer formats; the component does not parse.\n   */\n  value: string;\n  /**\n   * Optional unit suffix appended after value with .9 opacity.\n   */\n  unit?: string;\n  /**\n   * Optional change vs comparison period, e.g. \"+12%\", \"-4ms\", \"+0.01pp\".\n   */\n  delta?: string;\n  /**\n   * If true, delta is \"good\" (success color); if false, \"bad\" (destructive).\n   * If omitted, delta is rendered in muted (neutral).\n   *\n   * Caller decides semantics — \"more requests\" is good but \"more errors\" is bad.\n   */\n  deltaGood?: boolean;\n  /**\n   * Optional sparkline data, 0..1 normalized. Consumer is responsible for normalization.\n   */\n  sparkline?: number[];\n  /**\n   * Optional onClick to drill into the metric.\n   */\n  onClick?: () => void;\n  /**\n   * Optional override for the clickable tile's accessible name. When the\n   * tile is interactive (`onClick` set), defaults to `View <label> details`.\n   * Has no effect when `onClick` is absent (tile is rendered as a non-link\n   * `<div>` with no button semantics). T4.3.\n   */\n  actionLabel?: string;\n}\n\ninterface MetricsPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  description?: ReactNode;\n  metrics: Metric[];\n  /**\n   * Grid columns. Defaults to auto-fit ~180px min.\n   */\n  columns?: number;\n}\n\n/**\n * MetricsPanel — grid of metric tiles for observability dashboards.\n *\n * Visual: each tile is a soft surface with a big value (font-display),\n * label uppercase muted, optional delta with arrow icon + tone color,\n * optional CSS-only sparkline drawn as flexed bars.\n *\n * No external chart lib — keeps the registry copy-pasteable.\n */\nconst MetricsPanel = forwardRef<HTMLDivElement, MetricsPanelProps>(\n  ({ className, title, description, metrics, columns, ...props }, ref) => (\n    <div ref={ref} className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)} {...props}>\n      {title || description ? (\n        <header className=\"mb-4 grid gap-0.5\">\n          {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n          {description ? <p className=\"text-body-sm text-muted-foreground\">{description}</p> : null}\n        </header>\n      ) : null}\n      <div\n        className=\"grid gap-4\"\n        style={{\n          gridTemplateColumns: columns\n            ? `repeat(${columns}, minmax(0, 1fr))`\n            : \"repeat(auto-fit, minmax(180px, 1fr))\",\n        }}\n      >\n        {metrics.map((m) => (\n          <Tile key={m.label} metric={m} />\n        ))}\n      </div>\n    </div>\n  ),\n);\nMetricsPanel.displayName = \"MetricsPanel\";\n\nfunction Tile({ metric }: { metric: Metric }) {\n  const interactive = metric.onClick !== undefined;\n  const Tag = interactive ? \"button\" : \"div\";\n  // T4.3 (Code Issue 3): clickable tiles need an explicit accessible name\n  // so AT users hear \"View Requests/s details, button\" instead of just\n  // the spoken value cluster. Falls back to metric.actionLabel when the\n  // caller wants custom text (e.g., \"Drill into requests\").\n  const ariaLabel = interactive\n    ? (metric.actionLabel ?? `View ${metric.label} details`)\n    : undefined;\n  return (\n    <Tag\n      type={interactive ? \"button\" : undefined}\n      onClick={metric.onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"flex flex-col gap-2 rounded-lg border border-border/30 bg-muted/30 p-4 text-left\",\n        \"transition-colors duration-base ease-out-soft\",\n        interactive &&\n          \"hover:border-primary/40 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n      )}\n    >\n      <span className=\"font-sans text-label-caps text-muted-foreground uppercase\">\n        {metric.label}\n      </span>\n      <div className=\"flex items-baseline gap-1.5\">\n        <span className=\"font-bold font-display text-display-md tabular-nums leading-none\">\n          {metric.value}\n        </span>\n        {metric.unit ? (\n          <span className=\"font-mono text-body-sm text-muted-foreground\">{metric.unit}</span>\n        ) : null}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {metric.delta ? <Delta metric={metric} /> : null}\n        {metric.sparkline && metric.sparkline.length > 0 ? (\n          <Sparkline values={metric.sparkline} />\n        ) : null}\n      </div>\n    </Tag>\n  );\n}\n\nfunction Delta({ metric }: { metric: Metric }) {\n  const tone =\n    metric.deltaGood === undefined\n      ? \"text-muted-foreground\"\n      : metric.deltaGood\n        ? \"text-success\"\n        : \"text-destructive\";\n  const Icon = metric.deltaGood === false ? TrendingDown : TrendingUp;\n  return (\n    <span className={cn(\"inline-flex items-center gap-1 font-mono text-body-sm\", tone)}>\n      <Icon className=\"size-3\" /> {metric.delta}\n    </span>\n  );\n}\n\nfunction Sparkline({ values }: { values: number[] }) {\n  const clamped = values.map((v) => Math.max(0, Math.min(1, v)));\n  return (\n    <span className=\"ml-auto flex h-6 items-end gap-[2px]\" aria-hidden=\"true\">\n      {clamped.map((v, idx) => (\n        <span\n          // biome-ignore lint/suspicious/noArrayIndexKey: positional, values are not stable identifiers\n          key={idx}\n          className=\"w-[3px] rounded-sm bg-primary/60\"\n          style={{ height: `${Math.max(8, v * 100)}%` }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport { MetricsPanel };\n"
+    }
+  ]
+}

package/registry/r/mode-types.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mode-types",
+  "type": "registry:lib",
+  "title": "Theo UI mode types",
+  "description": "Shared Mode type — \"chat\" | \"code\" | \"infra\" — controlling app shell density and surfaces.",
+  "files": [
+    {
+      "path": "types/mode.ts",
+      "type": "registry:lib",
+      "target": "types/mode.ts",
+      "content": "/**\n * Mode — top-level density / domain the agent session is operating in.\n *\n * `chat`  — conversational Q&A, lean UI.\n * `code`  — code agent: read/plan/edit/verify inside the repo.\n * `infra` — operate the deployed system: metrics, deploys, logs, rollback.\n *\n * Used everywhere resources can be scoped per-mode (Skills, Agents, Rules,\n * SystemPrompt overrides, Sessions, …). `modes?: Mode[]` on a resource means\n * \"only available in these modes\"; omitting `modes` means \"available\n * globally\".\n */\nexport type Mode = \"chat\" | \"code\" | \"infra\";\n\nexport const ALL_MODES: ReadonlyArray<Mode> = [\"chat\", \"code\", \"infra\"];\n\n/** Friendly label per mode — render in chips, headers, badges. */\nexport const MODE_LABEL: Record<Mode, string> = {\n  chat: \"Chat\",\n  code: \"Code\",\n  infra: \"Infra\",\n};\n"
+    }
+  ]
+}

package/registry/r/model-card.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "model-card",
+  "type": "registry:ui",
+  "title": "ModelCard",
+  "description": "Full info on a model: vendor, context, output cap, pricing,",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/model-card/model-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/model-card.tsx",
+      "content": "import { CalendarDays, Eye, GitBranch, Image, Sparkles, Wrench } 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 interface ModelCapabilityFlag {\n  id: string;\n  label: string;\n  icon?: IconComponent;\n  enabled: boolean;\n}\n\nexport interface ModelInfo {\n  id: string;\n  /** Display name (e.g. \"Opus 4.7\"). */\n  name: string;\n  /** Vendor (Anthropic, OpenAI, …). */\n  vendor: string;\n  /** Optional tag (default, fast, smart, beta). */\n  tag?: ReactNode;\n  /** Total context window in tokens. */\n  contextWindow: number;\n  /** Max output tokens per turn. */\n  maxOutput: number;\n  /** USD per million input tokens. */\n  pricePerMInput?: number;\n  /** USD per million output tokens. */\n  pricePerMOutput?: number;\n  /** Knowledge cutoff date label (e.g. \"Jan 2026\"). */\n  cutoff?: string;\n  /** Capability flags shown as chips. */\n  capabilities?: ModelCapabilityFlag[];\n  /** Short description / positioning. */\n  description?: ReactNode;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;\n  return `${n}`;\n};\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;\n\ninterface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  model: ModelInfo;\n  /** Render as the currently-selected variant (violet ring). */\n  selected?: boolean;\n  /** Fires when user clicks to select. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * ModelCard — full info on a model: vendor, context, output cap, pricing,\n * capabilities, knowledge cutoff. Used in the \"switch model\" surface.\n */\nconst ModelCard = forwardRef<HTMLElement, ModelCardProps>(\n  ({ className, model, selected, onSelect, ...props }, ref) => {\n    const Tag = onSelect ? \"button\" : \"article\";\n    return (\n      <Tag\n        ref={ref as never}\n        type={onSelect ? \"button\" : undefined}\n        onClick={onSelect ? () => onSelect(model.id) : undefined}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4 text-left\",\n          \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n          selected\n            ? \"border-primary shadow-glow\"\n            : onSelect\n              ? \"hover:border-primary/40 hover:shadow-sm\"\n              : \"\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          className,\n        )}\n        aria-pressed={onSelect ? !!selected : undefined}\n        {...(props as HTMLAttributes<HTMLElement>)}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{model.name}</h4>\n            <p className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model.vendor}\n            </p>\n          </div>\n          {model.tag ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n              {typeof model.tag === \"string\" && model.tag.toLowerCase() === \"smart\" ? (\n                <Sparkles className=\"size-3\" />\n              ) : null}\n              {model.tag}\n            </span>\n          ) : null}\n        </header>\n\n        {model.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{model.description}</p>\n        ) : null}\n\n        <dl className=\"grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono\">\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Context\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.contextWindow)} tok\n            </dd>\n          </div>\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Max output\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.maxOutput)} tok\n            </dd>\n          </div>\n          {model.pricePerMInput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Input\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMInput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n          {model.pricePerMOutput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Output\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMOutput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n        </dl>\n\n        {model.capabilities && model.capabilities.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {model.capabilities.map((cap) => {\n              const Icon = cap.icon ?? Wrench;\n              return (\n                <span\n                  key={cap.id}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label\",\n                    cap.enabled\n                      ? \"bg-success/15 text-success\"\n                      : \"bg-muted text-muted-foreground line-through\",\n                  )}\n                >\n                  <Icon className=\"size-3\" aria-hidden=\"true\" />\n                  {cap.label}\n                </span>\n              );\n            })}\n          </div>\n        ) : null}\n\n        {model.cutoff ? (\n          <p className=\"inline-flex items-center gap-1 font-mono text-label text-muted-foreground\">\n            <CalendarDays className=\"size-3\" aria-hidden=\"true\" /> Knowledge cutoff · {model.cutoff}\n          </p>\n        ) : null}\n      </Tag>\n    );\n  },\n);\nModelCard.displayName = \"ModelCard\";\n\n/** Pre-canned capability flags. */\nexport const modelCapabilityPresets = {\n  vision: { id: \"vision\", label: \"Vision\", icon: Image as IconComponent } as const,\n  tools: { id: \"tools\", label: \"Tool use\", icon: Wrench } as const,\n  reasoning: { id: \"reasoning\", label: \"Reasoning\", icon: Sparkles } as const,\n  fineTuning: { id: \"ft\", label: \"Fine-tuning\", icon: GitBranch } as const,\n  multimodal: { id: \"multimodal\", label: \"Multimodal\", icon: Eye } as const,\n};\n\nexport { ModelCard };\n"
+    }
+  ]
+}

package/registry/r/model-selector.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "model-selector",
+  "type": "registry:ui",
+  "title": "ModelSelector",
+  "description": "Chip dropdown for picking the active LLM.",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/model-selector/model-selector.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/model-selector.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 } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ModelOption {\n  id: string;\n  label: string;\n  /** Optional vendor hint shown small below the label. */\n  vendor?: string;\n  /** Optional tag e.g. \"default\", \"fast\", \"smart\". */\n  tag?: string;\n}\n\ninterface ModelSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  value: string;\n  options: ModelOption[];\n  onChange?: (id: string) => void;\n}\n\n/**\n * ModelSelector — chip dropdown for picking the active LLM.\n *\n * Visual: pill with violet dot + label + chevron. Dropdown uses Radix Menu.\n */\nconst ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(\n  ({ className, value, options, onChange, ...props }, ref) => {\n    const current = options.find((o) => o.id === value) ?? options[0];\n    return (\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-8 items-center gap-2 rounded-full border border-border/60 bg-card px-3\",\n              \"font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors duration-base ease-out-soft\",\n              \"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 className=\"size-1.5 rounded-full bg-primary\" aria-hidden=\"true\" />\n            {current?.label ?? \"Select model\"}\n            <ChevronDown className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            sideOffset={6}\n            align=\"end\"\n            className={cn(\n              \"z-50 min-w-[14rem] 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            {options.map((opt) => (\n              <DropdownMenu.Item\n                key={opt.id}\n                onSelect={() => onChange?.(opt.id)}\n                className={cn(\n                  \"flex cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-2\",\n                  \"text-body-sm\",\n                  \"focus:bg-muted focus:outline-none\",\n                  \"data-[highlighted]:bg-muted\",\n                )}\n              >\n                <span className=\"flex flex-col\">\n                  <span className=\"font-medium\">{opt.label}</span>\n                  {opt.vendor ? (\n                    <span className=\"font-mono text-label text-muted-foreground\">{opt.vendor}</span>\n                  ) : null}\n                </span>\n                <span className=\"flex items-center gap-2\">\n                  {opt.tag ? (\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n                      {opt.tag === \"smart\" ? <Sparkles className=\"size-3\" /> : null}\n                      {opt.tag}\n                    </span>\n                  ) : null}\n                  {opt.id === value ? <Check className=\"size-3.5 text-primary\" /> : null}\n                </span>\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nModelSelector.displayName = \"ModelSelector\";\n\nexport { ModelSelector };\n"
+    }
+  ]
+}

package/registry/r/permission-matrix.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "permission-matrix",
+  "type": "registry:ui",
+  "title": "PermissionMatrix",
+  "description": "Tool × path × decision grid for fine-grained access",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/permission-matrix/permission-matrix.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/permission-matrix.tsx",
+      "content": "import { Check, Lock, Plus, ShieldQuestion, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type PermissionDecisionKind = \"allow\" | \"ask\" | \"deny\";\n\nexport interface PermissionRule {\n  id: string;\n  /** Tool the rule applies to. Use \"*\" for any. */\n  tool: string;\n  /** Glob path it applies to. Use \"*\" for any. */\n  path: string;\n  decision: PermissionDecisionKind;\n  /** Optional rationale shown as helper text. */\n  note?: string;\n}\n\ninterface PermissionMatrixProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  rules: PermissionRule[];\n  title?: ReactNode;\n  /**\n   * Available tools shown in the add form. Pass `undefined` (or omit) — or an\n   * empty array — to hide the add form entirely. The form only renders when\n   * `onAdd` is provided AND `toolOptions` has at least one entry.\n   */\n  toolOptions?: string[];\n  onAdd?: (rule: Omit<PermissionRule, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  onDecisionChange?: (id: string, decision: PermissionDecisionKind) => void;\n}\n\nconst DECISION_CLASS: Record<PermissionDecisionKind, string> = {\n  allow: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  deny: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst DECISION_ICON: Record<PermissionDecisionKind, ReactNode> = {\n  allow: <Check className=\"size-3\" aria-hidden=\"true\" />,\n  ask: <ShieldQuestion className=\"size-3\" aria-hidden=\"true\" />,\n  deny: <Lock className=\"size-3\" aria-hidden=\"true\" />,\n};\n\nconst cycle = (cur: PermissionDecisionKind): PermissionDecisionKind =>\n  cur === \"allow\" ? \"ask\" : cur === \"ask\" ? \"deny\" : \"allow\";\n\n/**\n * PermissionMatrix — tool × path × decision grid for fine-grained access\n * control. Used as the \"permissions\" tab in the agent settings.\n *\n * One PermissionRule per row. Click the decision pill to cycle Allow → Ask → Deny.\n *\n * Design decision (2026-05-14): PermissionMatrix stays in `primitives/`\n * — not `composites/` — even though it renders inputs and a select. The native\n * `<input>` / `<select>` elements use Theo design tokens directly (border-input,\n * ring, font-mono) so visual parity with `Input` / `Select` primitives is\n * preserved. Reason for keeping it primitive: a consumer installing\n * `permission-matrix` from the registry gets a single self-contained file with\n * no transitive Theo dependencies — opposite trade-off from `EnvVarEditor`\n * which is intentionally a composite. Both shapes are valid; we ship one of\n * each so consumers can pick the dependency profile that fits their app.\n */\nconst PermissionMatrix = forwardRef<HTMLDivElement, PermissionMatrixProps>(\n  (\n    {\n      className,\n      rules,\n      title = \"Permissions\",\n      toolOptions,\n      onAdd,\n      onRemove,\n      onDecisionChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const [newTool, setNewTool] = useState(toolOptions?.[0] ?? \"*\");\n    const [newPath, setNewPath] = useState(\"\");\n    const [newDecision, setNewDecision] = useState<PermissionDecisionKind>(\"ask\");\n\n    const submit = () => {\n      if (!newPath.trim()) return;\n      onAdd?.({ tool: newTool, path: newPath.trim(), decision: newDecision });\n      setNewPath(\"\");\n    };\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        {title ? (\n          <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span className=\"font-mono text-label text-muted-foreground\">\n              {rules.length} {rules.length === 1 ? \"rule\" : \"rules\"}\n            </span>\n          </header>\n        ) : null}\n\n        {onAdd && toolOptions && toolOptions.length > 0 ? (\n          <form\n            className=\"grid grid-cols-[1fr_2fr_auto_auto] gap-2 border-border/40 border-b p-3\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <select\n              value={newTool}\n              onChange={(e) => setNewTool(e.target.value)}\n              aria-label=\"Tool\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm\"\n            >\n              <option value=\"*\">* (any tool)</option>\n              {toolOptions.map((t) => (\n                <option key={t} value={t}>\n                  {t}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={newPath}\n              onChange={(e) => setNewPath(e.target.value)}\n              placeholder=\"path glob (e.g. src/**/*.ts)\"\n              aria-label=\"Path\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            />\n            <select\n              value={newDecision}\n              onChange={(e) => setNewDecision(e.target.value as PermissionDecisionKind)}\n              aria-label=\"Decision\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm uppercase\"\n            >\n              <option value=\"allow\">allow</option>\n              <option value=\"ask\">ask</option>\n              <option value=\"deny\">deny</option>\n            </select>\n            <button\n              type=\"submit\"\n              className=\"inline-flex h-9 items-center gap-1 rounded-md bg-primary px-3 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plus className=\"size-3.5\" /> Add\n            </button>\n          </form>\n        ) : null}\n\n        <ul className=\"divide-y divide-border/30\">\n          {rules.map((rule) => (\n            <li\n              key={rule.id}\n              className=\"grid grid-cols-[1fr_2fr_auto_auto] items-center gap-3 px-4 py-2.5\"\n            >\n              <span className=\"truncate font-mono text-code-sm text-foreground\">{rule.tool}</span>\n              <span className=\"truncate font-mono text-code-sm text-muted-foreground\">\n                {rule.path}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => onDecisionChange?.(rule.id, cycle(rule.decision))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  DECISION_CLASS[rule.decision],\n                  !onDecisionChange && \"pointer-events-none\",\n                )}\n              >\n                {DECISION_ICON[rule.decision]}\n                {rule.decision}\n              </button>\n              {onRemove ? (\n                <button\n                  type=\"button\"\n                  onClick={() => onRemove(rule.id)}\n                  aria-label={`Remove rule ${rule.tool} ${rule.path}`}\n                  className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                >\n                  <Trash2 className=\"size-3.5\" />\n                </button>\n              ) : null}\n            </li>\n          ))}\n          {rules.length === 0 ? (\n            <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n              No permission rules configured. The agent will fall back to default policy.\n            </li>\n          ) : null}\n        </ul>\n      </section>\n    );\n  },\n);\nPermissionMatrix.displayName = \"PermissionMatrix\";\n\nexport { PermissionMatrix };\n"
+    }
+  ]
+}

package/registry/r/permission-modal.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "permission-modal",
+  "type": "registry:ui",
+  "title": "PermissionModal",
+  "description": "Local-files access prompt built on Dialog.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "dialog",
+    "permission-types",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/permission-modal/permission-modal.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/permission-modal.tsx",
+      "content": "import { AlertTriangle, FolderOpen, ShieldAlert } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type {\n  PermissionDecision,\n  PermissionOperation,\n  PermissionRequest,\n} from \"@/types/permission\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog } from \"@/components/ui/dialog\";\n\n/**\n * Friendly operation labels used by the default copy. Override with the\n * `operationLabels` prop to localize or rephrase per project.\n */\nexport const defaultOperationLabels: Record<PermissionOperation, string> = {\n  read: \"read\",\n  write: \"edit\",\n  delete: \"permanently delete\",\n};\n\ninterface PermissionModalLabels {\n  /** \"Cancel\" button. */\n  cancel: ReactNode;\n  /** \"Always allow\" tertiary button. */\n  always: ReactNode;\n  /** \"Allow once\" primary button. */\n  allow: ReactNode;\n  /** Inline label rendered before the operation list inside the body card. */\n  requestedOps: ReactNode;\n}\n\nconst defaultLabels: PermissionModalLabels = {\n  cancel: \"Cancel\",\n  always: \"Always allow\",\n  allow: \"Allow once\",\n  requestedOps: \"Requested operations:\",\n};\n\ninterface PermissionModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  request: PermissionRequest;\n  /**\n   * Fires when the user picks a decision. The modal does NOT auto-close;\n   * caller decides whether the decision should dismiss the modal.\n   */\n  onDecide: (decision: PermissionDecision) => void;\n  /** Override the modal title. Defaults to \"Allow Theo to {ops} files in {path}?\". */\n  title?: ReactNode;\n  /** Override the modal description (body lead text). */\n  description?: ReactNode;\n  /** Override the verb used for each operation in the default copy. */\n  operationLabels?: Partial<Record<PermissionOperation, string>>;\n  /** Override button text + inline labels. Useful for i18n. */\n  labels?: Partial<PermissionModalLabels>;\n}\n\n/**\n * PermissionModal — local-files access prompt built on Dialog.\n *\n * Three actions: Cancel (denied), Always allow, Allow once. Per WIREMOCKS §5,\n * the path is shown in the title (not hidden in body) and destructive\n * operations are listed inline.\n *\n * All visible text can be overridden via `title`, `description`,\n * `operationLabels`, and `labels`. Defaults are English; pass overrides for\n * other locales.\n */\nfunction PermissionModal({\n  open,\n  onOpenChange,\n  request,\n  onDecide,\n  title,\n  description,\n  operationLabels,\n  labels,\n}: PermissionModalProps) {\n  const opLabels = { ...defaultOperationLabels, ...operationLabels };\n  const opsList = request.operations.map((op) => opLabels[op]).join(\", \");\n  const text = { ...defaultLabels, ...labels };\n\n  // T4.4 (Code Issue 4): Esc / overlay-click previously fired onOpenChange(false)\n  // but never onDecide — users saw \"Cancel\" semantics, app saw silent dismissal.\n  // Track whether an explicit button decision happened; if the dialog closes\n  // without one, treat it as denied. decidedRef must reset on every fresh open\n  // so a rapid close-then-open doesn't carry state forward.\n  const decidedRef = useRef(false);\n  function handleDecide(decision: PermissionDecision) {\n    decidedRef.current = true;\n    onDecide(decision);\n  }\n  function handleOpenChange(next: boolean) {\n    const wasDecided = decidedRef.current;\n    // Reset BEFORE invoking onDecide so a re-open within the same tick starts\n    // clean. Edge case from SF-6: rapid toggle could leave decidedRef=true.\n    decidedRef.current = false;\n    if (!next && !wasDecided) {\n      onDecide(\"denied\");\n    }\n    onOpenChange(next);\n  }\n\n  const defaultTitle = (\n    <span className=\"flex items-center gap-2\">\n      <ShieldAlert className=\"size-5 text-warning\" aria-hidden=\"true\" />\n      Allow Theo to {opsList} files in{\" \"}\n      <code className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-code-md text-primary\">\n        {request.path}\n      </code>\n      ?\n    </span>\n  );\n\n  const defaultDescription = (\n    <>\n      This includes all files and subfolders. Theo will be able to {opsList} and may share the\n      contents with connected third-party tools. Be careful when exposing confidential information.\n    </>\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <Dialog.Content className=\"max-w-xl\">\n        <Dialog.Header>\n          <Dialog.Title>{title ?? defaultTitle}</Dialog.Title>\n          <Dialog.Description>{description ?? defaultDescription}</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <div className=\"flex items-start gap-3 rounded-md border border-border/40 bg-muted/40 p-3\">\n            <FolderOpen\n              className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <div className=\"grid gap-1\">\n              <p className=\"font-mono text-code-sm text-foreground\">{request.path}</p>\n              <p className=\"flex items-center gap-1.5 font-sans text-label text-warning\">\n                <AlertTriangle className=\"size-3\" aria-hidden=\"true\" />\n                {text.requestedOps} {opsList}\n              </p>\n            </div>\n          </div>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Button variant=\"secondary\" onClick={() => handleDecide(\"denied\")}>\n            {text.cancel}\n          </Button>\n          <Button variant=\"ghost\" onClick={() => handleDecide(\"always_allowed\")}>\n            {text.always}\n          </Button>\n          <Button onClick={() => handleDecide(\"allowed_once\")}>{text.allow}</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { PermissionModal };\n"
+    }
+  ]
+}

package/registry/r/permission-types.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "permission-types",
+  "type": "registry:lib",
+  "title": "Theo UI permission types",
+  "description": "Shared TypeScript types for permission requests, scopes, and decisions.",
+  "files": [
+    {
+      "path": "types/permission.ts",
+      "type": "registry:lib",
+      "target": "types/permission.ts",
+      "content": "export type PermissionOperation = \"read\" | \"write\" | \"delete\";\nexport type PermissionDecision = \"denied\" | \"allowed_once\" | \"always_allowed\";\n\nexport interface PermissionRequest {\n  /** Absolute path to the resource (file or folder). */\n  path: string;\n  /** Operations the agent wants to perform on the resource. */\n  operations: PermissionOperation[];\n}\n"
+    }
+  ]
+}

package/registry/r/preview-env-card.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "preview-env-card",
+  "type": "registry:block",
+  "title": "PreviewEnvCard",
+  "description": "Preview environment card surfacing all services from one PR.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "cn",
+    "deployment-row",
+    "safe-href",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/preview-env-card/preview-env-card.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/preview-env-card.tsx",
+      "content": "import { ExternalLink, GitPullRequest, Server } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { DeploymentStatus } from \"@/components/blocks/deployment-row\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\nconst statusToDot: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface PreviewService {\n  /** Service name e.g. \"api\", \"web\", \"worker\". */\n  name: string;\n  /** Live URL or null if not exposed (worker). */\n  url?: string;\n  status: DeploymentStatus;\n}\n\nexport interface PreviewEnv {\n  id: string;\n  prNumber: number;\n  prTitle: string;\n  branch: string;\n  author?: { name: string; avatarUrl?: string };\n  services: PreviewService[];\n  createdAt: string;\n}\n\ninterface PreviewEnvCardProps extends HTMLAttributes<HTMLDivElement> {\n  env: PreviewEnv;\n  actions?: ReactNode;\n}\n\n/**\n * PreviewEnvCard — preview environment card surfacing all services from one PR.\n *\n * Theo's killer feature: full-stack preview environments. The card shows:\n *   - PR number + title at the top\n *   - branch + author in the metadata row\n *   - one badge per service with its own status + URL\n *   - bottom action row (Open, Promote, Delete)\n */\nconst PreviewEnvCard = forwardRef<HTMLDivElement, PreviewEnvCardProps>(\n  ({ className, env, actions, ...props }, ref) => (\n    <article\n      ref={ref}\n      className={cn(\n        \"rounded-xl border bg-card p-5 shadow-sm\",\n        \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n        \"hover:border-primary/40\",\n        className,\n      )}\n      {...(props as HTMLAttributes<HTMLDivElement>)}\n    >\n      <header className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <p className=\"flex items-center gap-2 font-mono text-label-caps text-muted-foreground uppercase\">\n            <GitPullRequest className=\"size-3\" /> PR #{env.prNumber}\n          </p>\n          <h3 className=\"mt-1 truncate font-display text-title-md tracking-tight\">{env.prTitle}</h3>\n          <p className=\"mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{env.branch}</span>\n            {env.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {env.author.name}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>opened {env.createdAt}</span>\n          </p>\n        </div>\n        <Badge variant=\"primary\">\n          <Server className=\"size-3\" /> {env.services.length} service\n          {env.services.length === 1 ? \"\" : \"s\"}\n        </Badge>\n      </header>\n\n      <ul className=\"mt-4 divide-y divide-border/30 rounded-lg border border-border/30\">\n        {env.services.map((s) => {\n          // T3.3 (SEC-003): defang dangerous URL protocols before rendering\n          // as <a href>. Consumers passing user-controlled URLs from API\n          // responses are protected from javascript:/vbscript:/data:text/html\n          // XSS payloads.\n          const sanitized = safeHref(s.url);\n          return (\n            <li key={s.name} className=\"flex items-center justify-between gap-3 px-3 py-2\">\n              <span className=\"font-mono text-code-sm text-foreground\">{s.name}</span>\n              <div className=\"flex items-center gap-2\">\n                {sanitized ? (\n                  <a\n                    href={sanitized}\n                    className=\"inline-flex items-center gap-1 font-mono text-code-sm text-primary hover:underline\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                  >\n                    {sanitized.replace(/^https?:\\/\\//, \"\")}\n                    <ExternalLink className=\"size-3\" />\n                  </a>\n                ) : (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">internal</span>\n                )}\n                <Badge variant={statusToVariant[s.status]}>\n                  <Badge.Dot\n                    tone={statusToDot[s.status]}\n                    pulse={\n                      s.status === \"building\" || s.status === \"deploying\" || s.status === \"queued\"\n                    }\n                  />\n                  {statusLabels[s.status]}\n                </Badge>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n\n      {actions ? <div className=\"mt-4 flex items-center gap-2\">{actions}</div> : null}\n    </article>\n  ),\n);\nPreviewEnvCard.displayName = \"PreviewEnvCard\";\n\nexport { PreviewEnvCard };\n"
+    }
+  ]
+}

package/registry/r/preview-panel.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "preview-panel",
+  "type": "registry:ui",
+  "title": "PreviewPanel",
+  "description": "Browser preview with controls + integrated logs slot.",
+  "dependencies": [],
+  "registryDependencies": [
+    "browser-controls",
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/preview-panel/preview-panel.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/preview-panel.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { BrowserControls } from \"@/components/ui/browser-controls\";\n\ninterface PreviewPanelProps extends Omit<HTMLAttributes<HTMLElement>, \"content\"> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Region rendered as the preview body. Typically an <iframe>.\n   */\n  content: ReactNode;\n  /**\n   * Optional logs section rendered below the preview (e.g. dev server output).\n   */\n  logsSlot?: ReactNode;\n}\n\n/**\n * PreviewPanel — browser preview with controls + integrated logs slot.\n *\n * The Code workspace shows live dev-server URL + HMR logs side-by-side; this\n * panel keeps both in a single card so the user doesn't switch contexts.\n */\nconst PreviewPanel = forwardRef<HTMLElement, PreviewPanelProps>(\n  (\n    { className, url, onUrlChange, onBack, onForward, onReload, content, logsSlot, ...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      <BrowserControls\n        url={url}\n        {...(onUrlChange ? { onUrlChange } : {})}\n        {...(onBack ? { onBack } : {})}\n        {...(onForward ? { onForward } : {})}\n        {...(onReload ? { onReload } : {})}\n      />\n      <div className=\"flex-1 overflow-hidden bg-background\">{content}</div>\n      {logsSlot ? (\n        <div className=\"max-h-48 overflow-auto border-border/40 border-t bg-card\">{logsSlot}</div>\n      ) : null}\n    </section>\n  ),\n);\nPreviewPanel.displayName = \"PreviewPanel\";\n\nexport { PreviewPanel };\n"
+    }
+  ]
+}

package/registry/r/progress-checklist.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-checklist",
+  "type": "registry:ui",
+  "title": "ProgressChecklist",
+  "description": "Right-inspector checklist tracking subtask completion with success / running / pending tones.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "task-types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/progress-checklist/progress-checklist.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/progress-checklist.tsx",
+      "content": "import { Check, CircleDashed, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { TaskStep, TaskStepStatus } from \"@/types/task\";\n\nconst statusIcon = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: Check,\n  skipped: CircleDashed,\n} as const;\n\nconst statusToneText: Record<TaskStepStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success line-through\",\n  skipped: \"text-muted-foreground line-through\",\n};\n\nconst statusBg: Record<TaskStepStatus, string> = {\n  pending: \"bg-muted text-muted-foreground\",\n  running: \"bg-primary text-primary-foreground\",\n  done: \"bg-success text-success-foreground\",\n  skipped: \"bg-muted text-muted-foreground\",\n};\n\ninterface ProgressChecklistProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  steps: TaskStep[];\n  /**\n   * If true, shows percentage bar for running steps with `progress`.\n   */\n  showProgressBars?: boolean;\n}\n\n/**\n * ProgressChecklist — right-inspector checklist.\n *\n * Visual: vertical list of steps with status dot, label, optional progress bar.\n * Matches WIREMOCKS §3 / §4 (\"Progresso\") with checkmarks and pulse on running.\n */\nconst ProgressChecklist = forwardRef<HTMLDivElement, ProgressChecklistProps>(\n  ({ className, title, steps, showProgressBars = true, ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card p-4\", className)} {...props}>\n      {title ? (\n        <header className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n        </header>\n      ) : null}\n      <ol className=\"grid gap-3\">\n        {steps.map((step) => {\n          const Icon = statusIcon[step.status];\n          return (\n            <li key={step.id} className=\"grid grid-cols-[auto_1fr] items-start gap-3\">\n              <span\n                className={cn(\n                  \"mt-0.5 grid size-5 place-items-center rounded-full\",\n                  statusBg[step.status],\n                )}\n                aria-hidden=\"true\"\n              >\n                <Icon className={cn(\"size-3\", step.status === \"running\" && \"animate-spin\")} />\n              </span>\n              <div className=\"min-w-0\">\n                <p className={cn(\"text-body-sm\", statusToneText[step.status])}>{step.label}</p>\n                {showProgressBars && step.status === \"running\" && step.progress !== undefined ? (\n                  <div className=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted\">\n                    <div\n                      className=\"h-full bg-primary transition-[width] duration-base ease-out-soft\"\n                      style={{ width: `${Math.round(step.progress * 100)}%` }}\n                    />\n                  </div>\n                ) : null}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    </section>\n  ),\n);\nProgressChecklist.displayName = \"ProgressChecklist\";\n\nexport { ProgressChecklist };\n"
+    }
+  ]
+}

package/registry/r/project-card.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "project-card",
+  "type": "registry:block",
+  "title": "ProjectCard",
+  "description": "Surface for a project in a project listing.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "cn",
+    "deployment-row",
+    "safe-href",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/project-card/project-card.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/project-card.tsx",
+      "content": "import { Activity, GitBranch, GitCommit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { DeploymentStatus } from \"@/components/blocks/deployment-row\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\nconst statusToDotTone: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\n\nexport interface Project {\n  id: string;\n  name: string;\n  description?: string;\n  framework?: string;\n  branch: string;\n  commitSha: string;\n  commitMessage?: string;\n  status: DeploymentStatus;\n  url?: string;\n  region?: string;\n  lastDeployedAt: string;\n}\n\ninterface ProjectCardProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {\n  project: Project;\n  href?: string;\n  actions?: ReactNode;\n  /**\n   * Show the project description and commit message. Default true.\n   */\n  detailed?: boolean;\n}\n\n/**\n * ProjectCard — surface for a project in a project listing.\n *\n * Light hover lift (no shadow inflation), violet ring on focus,\n * status badge with optional pulse, framework + region in muted footer.\n */\nconst ProjectCard = forwardRef<HTMLElement, ProjectCardProps>(\n  ({ className, project, href, actions, detailed = true, ...props }, ref) => {\n    // T3.3 (SEC-003): defang javascript:/vbscript:/data:text/html before\n    // rendering as <a href>. Consumers passing user-controlled URLs are\n    // protected from XSS via dangerous protocols.\n    const sanitizedHref = safeHref(href);\n    const isLink = sanitizedHref !== undefined;\n    const Tag = isLink ? \"a\" : \"div\";\n    const isAnimated =\n      project.status === \"building\" ||\n      project.status === \"deploying\" ||\n      project.status === \"queued\";\n\n    const content = (\n      <>\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h3 className=\"truncate font-display text-title-md tracking-tight\">{project.name}</h3>\n            {project.framework ? (\n              <p className=\"mt-0.5 font-mono text-label-caps text-muted-foreground uppercase\">\n                {project.framework}\n              </p>\n            ) : null}\n          </div>\n          <Badge variant={statusToVariant[project.status]}>\n            <Badge.Dot tone={statusToDotTone[project.status]} pulse={isAnimated} />\n            {project.status === \"live\"\n              ? \"Live\"\n              : project.status === \"building\"\n                ? \"Building\"\n                : project.status === \"deploying\"\n                  ? \"Deploying\"\n                  : project.status === \"queued\"\n                    ? \"Queued\"\n                    : project.status === \"failed\"\n                      ? \"Failed\"\n                      : \"Cancelled\"}\n          </Badge>\n        </div>\n\n        {detailed && project.description ? (\n          <p className=\"line-clamp-2 text-body-sm text-muted-foreground\">{project.description}</p>\n        ) : null}\n\n        {detailed && project.commitMessage ? (\n          <p className=\"line-clamp-1 font-mono text-code-sm text-foreground/80\">\n            {project.commitMessage}\n          </p>\n        ) : null}\n\n        <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-code-sm text-muted-foreground\">\n          <span className=\"inline-flex items-center gap-1\">\n            <GitBranch className=\"size-3\" /> {project.branch}\n          </span>\n          <span className=\"inline-flex items-center gap-1\">\n            <GitCommit className=\"size-3\" /> {project.commitSha.slice(0, 7)}\n          </span>\n          {project.region ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Activity className=\"size-3\" /> {project.region}\n            </span>\n          ) : null}\n          <span aria-hidden=\"true\">·</span>\n          <span>{project.lastDeployedAt}</span>\n        </div>\n\n        {actions ? <div className=\"flex items-center gap-2 pt-2\">{actions}</div> : null}\n      </>\n    );\n\n    return (\n      <Tag\n        ref={ref as Ref<HTMLAnchorElement & HTMLDivElement>}\n        href={sanitizedHref}\n        className={cn(\n          \"group relative flex flex-col gap-3 rounded-xl border bg-card p-5 shadow-sm\",\n          \"transition-[box-shadow,transform,border-color] duration-base ease-out-soft\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          isLink && \"hover:-translate-y-px cursor-pointer hover:border-primary/50 hover:shadow-md\",\n          className,\n        )}\n        {...(props as HTMLAttributes<HTMLAnchorElement> & HTMLAttributes<HTMLDivElement>)}\n      >\n        {content}\n      </Tag>\n    );\n  },\n);\nProjectCard.displayName = \"ProjectCard\";\n\nexport { ProjectCard };\n"
+    }
+  ]
+}

package/registry/r/project-switcher.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "project-switcher",
+  "type": "registry:ui",
+  "title": "ProjectSwitcher",
+  "description": "Sidebar header for a code agent app.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/project-switcher/project-switcher.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/project-switcher.tsx",
+      "content": "import { ChevronsUpDown, GitBranch } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * ProjectSwitcher — sidebar header for a code agent app.\n *\n * Shows the active workspace (folder name) + branch + status dot + a tiny\n * `ChevronsUpDown` hint when clickable. Used in Sidebar.Header to anchor the\n * current project context for the session list below.\n *\n *   <Sidebar.Header className=\"p-0\">\n *     <ProjectSwitcher\n *       workspace=\"acme-web\"\n *       branch=\"claude/alignment-grid\"\n *       status=\"running\"\n *       onClick={openProjectPicker}\n *     />\n *   </Sidebar.Header>\n *\n * If `onClick` is omitted, renders as a static `<div>` (no chevron, not focusable).\n */\n\nexport type ProjectStatus = \"idle\" | \"running\" | \"error\" | \"offline\";\n\nconst STATUS_CLASS: Record<ProjectStatus, string> = {\n  idle: \"bg-muted-foreground/40\",\n  running: \"bg-success animate-pulse\",\n  error: \"bg-destructive\",\n  offline: \"bg-muted-foreground/20\",\n};\n\nconst STATUS_LABEL: Record<ProjectStatus, string> = {\n  idle: \"Idle\",\n  running: \"Agent running\",\n  error: \"Error\",\n  offline: \"Offline\",\n};\n\ninterface ProjectSwitcherProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /** Workspace / folder name (e.g. \"acme-web\"). */\n  workspace: ReactNode;\n  /** Optional git branch. Renders inline with a GitBranch icon. */\n  branch?: ReactNode;\n  /** Optional status dot. Defaults to \"idle\". */\n  status?: ProjectStatus;\n  /** Brand letter / icon shown in the violet tile. Default: first char of workspace if string. */\n  brand?: ReactNode;\n}\n\nconst ProjectSwitcher = forwardRef<HTMLButtonElement, ProjectSwitcherProps>(\n  ({ className, workspace, branch, status = \"idle\", brand, onClick, disabled, ...props }, ref) => {\n    const isInteractive = !!onClick;\n    const inferredBrand =\n      brand ?? (typeof workspace === \"string\" ? workspace.charAt(0).toUpperCase() : \"·\");\n    const content = (\n      <>\n        <span\n          className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-primary font-black font-display text-primary-foreground\"\n          aria-hidden=\"true\"\n        >\n          {inferredBrand}\n        </span>\n        <div className=\"grid min-w-0 flex-1 text-left\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span className=\"truncate font-display text-title-md leading-none\">{workspace}</span>\n            <span\n              className={cn(\"size-1.5 shrink-0 rounded-full\", STATUS_CLASS[status])}\n              aria-label={STATUS_LABEL[status]}\n              role=\"img\"\n            />\n          </div>\n          {branch ? (\n            <span className=\"mt-1 inline-flex items-center gap-1 truncate font-mono text-label text-muted-foreground\">\n              <GitBranch className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {branch}\n            </span>\n          ) : null}\n        </div>\n        {isInteractive ? (\n          <ChevronsUpDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n        ) : null}\n      </>\n    );\n\n    if (!isInteractive) {\n      return (\n        <div\n          className={cn(\"flex w-full items-center gap-3 px-5 py-3 text-card-foreground\", className)}\n          aria-disabled={disabled || undefined}\n        >\n          {content}\n        </div>\n      );\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        className={cn(\n          \"flex w-full items-center gap-3 px-5 py-3 text-card-foreground\",\n          \"transition-colors hover:bg-muted/40\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  },\n);\nProjectSwitcher.displayName = \"ProjectSwitcher\";\n\nexport { ProjectSwitcher };\n"
+    }
+  ]
+}

package/registry/r/quick-action-chips.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "quick-action-chips",
+  "type": "registry:ui",
+  "title": "QuickActionChips",
+  "description": "Row of intent chips below a hero composer.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/quick-action-chips/quick-action-chips.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/quick-action-chips.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface QuickAction {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. from lucide-react). */\n  icon?: IconComponent;\n  /** When true, the chip is highlighted as the suggested next action. */\n  primary?: boolean;\n}\n\ninterface QuickActionChipsProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  actions: QuickAction[];\n  onSelect?: (id: string) => void;\n}\n\n/**\n * QuickActionChips — row of intent chips below a hero composer.\n *\n * Used in Chat Home (\"Escrever / Aprender / Código / Assuntos pessoais\")\n * and the Files panel.\n */\nconst QuickActionChips = forwardRef<HTMLDivElement, QuickActionChipsProps>(\n  ({ className, actions, onSelect, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-wrap items-center justify-center gap-2\", className)}\n      {...props}\n    >\n      {actions.map((a) => {\n        const Icon = a.icon;\n        return (\n          <button\n            key={a.id}\n            type=\"button\"\n            onClick={() => onSelect?.(a.id)}\n            className={cn(\n              \"inline-flex h-9 items-center gap-2 rounded-full border px-4\",\n              \"font-medium font-sans text-body-sm\",\n              \"transition-[box-shadow,background-color,border-color,color] duration-base ease-out-soft\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              a.primary\n                ? \"border-transparent bg-primary text-primary-foreground hover:shadow-glow\"\n                : \"border-border/60 bg-card text-foreground hover:border-primary/40 hover:bg-muted\",\n            )}\n          >\n            {Icon ? <Icon className=\"size-4\" /> : null}\n            {a.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nQuickActionChips.displayName = \"QuickActionChips\";\n\nexport { QuickActionChips };\n"
+    }
+  ]
+}

package/registry/r/radio-group.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "title": "RadioGroup",
+  "description": "Built on Radix RadioGroup — accessible radio group with roving focus and orientation control.",
+  "dependencies": [
+    "@radix-ui/react-radio-group",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/radio-group/radio-group.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/radio-group.tsx",
+      "content": "import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { Circle } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * RadioGroup — built on Radix RadioGroup.\n *\n * Composition:\n *   <RadioGroup value={v} onValueChange={setV}>\n *     <RadioGroup.Item value=\"a\" id=\"a\" />\n *     <Label htmlFor=\"a\">Option A</Label>\n *   </RadioGroup>\n *\n * Group spaces items by 0.75rem vertically; switch to grid utilities if you\n * need horizontal/grid layouts.\n */\n\nconst RadioGroupRoot = forwardRef<\n  ElementRef<typeof RadioGroupPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Root ref={ref} className={cn(\"grid gap-3\", className)} {...props} />\n));\nRadioGroupRoot.displayName = \"RadioGroup\";\n\nconst RadioGroupItem = forwardRef<\n  ElementRef<typeof RadioGroupPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"aspect-square size-4 rounded-full border border-border bg-card text-primary\",\n      \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"data-[state=checked]:border-primary\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n      <Circle className=\"size-2 fill-primary text-primary\" aria-hidden=\"true\" />\n    </RadioGroupPrimitive.Indicator>\n  </RadioGroupPrimitive.Item>\n));\nRadioGroupItem.displayName = \"RadioGroup.Item\";\n\nconst RadioGroup = /*#__PURE__*/ Object.assign(RadioGroupRoot, {\n  Item: RadioGroupItem,\n});\n\nexport { RadioGroup };\n"
+    }
+  ]
+}

package/registry/r/recent-folders-list.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "recent-folders-list",
+  "type": "registry:ui",
+  "title": "RecentFoldersList",
+  "description": "Recently-used folders for the Files picker.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/recent-folders-list/recent-folders-list.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/recent-folders-list.tsx",
+      "content": "import { Folder } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface RecentFolder {\n  id: string;\n  name: ReactNode;\n  path: string;\n  /** When true, the row is highlighted as selected. */\n  active?: boolean;\n}\n\ninterface RecentFoldersListProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onSelect\"> {\n  title?: ReactNode;\n  folders: RecentFolder[];\n  onSelect?: (id: string) => void;\n}\n\n/**\n * RecentFoldersList — recently-used folders for the Files picker.\n *\n * Visual: a stack of rows with folder icon + name + path (smaller, muted),\n * active row highlighted with violet bg.\n */\nconst RecentFoldersList = forwardRef<HTMLDivElement, RecentFoldersListProps>(\n  ({ className, title = \"Recent folders\", folders, onSelect, ...props }, ref) => (\n    <div ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n      {title ? (\n        <p className=\"border-border/40 border-b px-3 py-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {title}\n        </p>\n      ) : null}\n      <ul>\n        {folders.map((folder) => (\n          <li key={folder.id}>\n            <button\n              type=\"button\"\n              onClick={() => onSelect?.(folder.id)}\n              className={cn(\n                \"flex w-full items-center gap-3 px-3 py-2\",\n                \"text-left transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                folder.active ? \"bg-primary/10 text-primary\" : \"hover:bg-muted\",\n              )}\n            >\n              <Folder\n                className={cn(\n                  \"size-4 shrink-0\",\n                  folder.active ? \"text-primary\" : \"text-muted-foreground\",\n                )}\n                aria-hidden=\"true\"\n              />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate font-medium text-body-sm\">{folder.name}</p>\n                <p className=\"truncate font-mono text-label text-muted-foreground\">{folder.path}</p>\n              </div>\n            </button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  ),\n);\nRecentFoldersList.displayName = \"RecentFoldersList\";\n\nexport { RecentFoldersList };\n"
+    }
+  ]
+}

package/registry/r/rollback-ui.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "rollback-ui",
+  "type": "registry:block",
+  "title": "RollbackUI",
+  "description": "Instant rollback selector showing recent versions.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "button",
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/rollback-ui/rollback-ui.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/rollback-ui.tsx",
+      "content": "import { ArrowDownLeft, Clock, GitCommit, RotateCcw } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface RollbackTarget {\n  id: string;\n  version: string;\n  commitSha: string;\n  commitMessage: string;\n  deployedAt: string;\n  isCurrent?: boolean;\n  /**\n   * Optional duration of the deploy (e.g. \"24s\") for context.\n   */\n  duration?: string;\n}\n\ninterface RollbackUIProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Deployment history, newest first. The current deploy should have `isCurrent: true`.\n   */\n  history: RollbackTarget[];\n  /**\n   * Fires when user confirms rollback to a specific target.\n   */\n  onRollback?: (targetId: string) => void | Promise<void>;\n}\n\n/**\n * RollbackUI — instant rollback selector showing recent versions.\n *\n * The current deploy is marked, every other version offers a \"Roll back\" button.\n * On select, the row enters confirm state (Confirm / Cancel buttons inline) before\n * firing onRollback. This protects against accidental rollbacks while still being one click.\n */\nconst RollbackUI = forwardRef<HTMLDivElement, RollbackUIProps>(\n  ({ className, history, onRollback, ...props }, ref) => {\n    const [confirmId, setConfirmId] = useState<string | null>(null);\n    const [pendingId, setPendingId] = useState<string | null>(null);\n\n    const trigger = async (id: string) => {\n      setPendingId(id);\n      try {\n        await onRollback?.(id);\n      } finally {\n        setPendingId(null);\n        setConfirmId(null);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)}\n        {...props}\n      >\n        <header className=\"mb-4 flex items-baseline justify-between gap-3\">\n          <div>\n            <h3 className=\"font-display text-title-md tracking-tight\">Rollback</h3>\n            <p className=\"text-body-sm text-muted-foreground\">\n              Instant rollback to a previous version. Verified in under 5 seconds.\n            </p>\n          </div>\n        </header>\n\n        <ol className=\"grid gap-2\">\n          {history.map((target, idx) => {\n            const isCurrent = target.isCurrent ?? idx === 0;\n            const isConfirming = confirmId === target.id;\n            const isPending = pendingId === target.id;\n            return (\n              <li\n                key={target.id}\n                className={cn(\n                  \"grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-lg border p-3\",\n                  isCurrent ? \"border-primary/40 bg-primary/5\" : \"border-border/40 bg-card\",\n                )}\n              >\n                <span\n                  className={cn(\n                    \"grid size-8 place-items-center rounded-md\",\n                    isCurrent\n                      ? \"bg-primary text-primary-foreground\"\n                      : \"bg-muted text-muted-foreground\",\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {isCurrent ? <Clock className=\"size-4\" /> : <GitCommit className=\"size-4\" />}\n                </span>\n                <div className=\"min-w-0\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <span className=\"font-mono text-code-sm text-foreground\">{target.version}</span>\n                    {isCurrent ? <Badge variant=\"success\">Current</Badge> : null}\n                    {target.duration ? (\n                      <span className=\"font-mono text-code-sm text-muted-foreground\">\n                        · {target.duration}\n                      </span>\n                    ) : null}\n                  </div>\n                  <p className=\"mt-0.5 truncate text-body-sm text-muted-foreground\">\n                    <span className=\"font-mono\">{target.commitSha.slice(0, 7)}</span> ·{\" \"}\n                    {target.commitMessage} · {target.deployedAt}\n                  </p>\n                </div>\n                <div>\n                  {isCurrent ? null : isConfirming ? (\n                    <div className=\"flex items-center gap-1\">\n                      <Button\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        onClick={() => setConfirmId(null)}\n                        disabled={isPending}\n                      >\n                        Cancel\n                      </Button>\n                      <Button size=\"sm\" onClick={() => trigger(target.id)} disabled={isPending}>\n                        <RotateCcw /> Confirm rollback\n                      </Button>\n                    </div>\n                  ) : (\n                    <Button size=\"sm\" variant=\"secondary\" onClick={() => setConfirmId(target.id)}>\n                      <ArrowDownLeft /> Roll back\n                    </Button>\n                  )}\n                </div>\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  },\n);\nRollbackUI.displayName = \"RollbackUI\";\n\nexport { RollbackUI };\n"
+    }
+  ]
+}