@theokit/ui 0.13.0

package/registry/r/hook-config.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hook-config",
+  "type": "registry:ui",
+  "title": "HookConfig",
+  "description": "Editor for lifecycle hooks (PreToolUse, PostToolUse, Stop…).",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/hook-config/hook-config.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/hook-config.tsx",
+      "content": "import { Plus, Trash2, Zap } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type HookEvent =\n  | \"PreToolUse\"\n  | \"PostToolUse\"\n  | \"UserPromptSubmit\"\n  | \"Stop\"\n  | \"SessionStart\"\n  | \"SessionEnd\";\n\nexport interface HookEntry {\n  id: string;\n  event: HookEvent;\n  /** Tool matcher (e.g. \"Bash\", \"Write\", \"*\"). */\n  matcher: string;\n  /** Shell command to run. */\n  command: string;\n  enabled?: boolean;\n}\n\nconst HOOK_EVENTS: HookEvent[] = [\n  \"PreToolUse\",\n  \"PostToolUse\",\n  \"UserPromptSubmit\",\n  \"Stop\",\n  \"SessionStart\",\n  \"SessionEnd\",\n];\n\ninterface HookConfigProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  hooks: HookEntry[];\n  onAdd?: (hook: Omit<HookEntry, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  title?: ReactNode;\n}\n\n/**\n * HookConfig — editor for lifecycle hooks (PreToolUse, PostToolUse, Stop…).\n *\n * Mirrors Claude Code's settings.json hooks but visual. Each row is an\n * { event × matcher × command } triple with on/off toggle.\n */\nconst HookConfig = forwardRef<HTMLDivElement, HookConfigProps>(\n  ({ className, hooks, onAdd, onRemove, onToggle, title = \"Hooks\", ...props }, ref) => {\n    const [event, setEvent] = useState<HookEvent>(\"PreToolUse\");\n    const [matcher, setMatcher] = useState(\"*\");\n    const [command, setCommand] = useState(\"\");\n\n    const submit = () => {\n      if (!command.trim()) return;\n      onAdd?.({ event, matcher: matcher.trim() || \"*\", command: command.trim() });\n      setCommand(\"\");\n    };\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Zap className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          </div>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {hooks.length} {hooks.length === 1 ? \"hook\" : \"hooks\"}\n          </span>\n        </header>\n\n        {onAdd ? (\n          <form\n            className=\"grid grid-cols-[140px_140px_1fr_auto] items-center gap-2 border-border/40 border-b p-3\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <select\n              value={event}\n              onChange={(e) => setEvent(e.target.value as HookEvent)}\n              aria-label=\"Event\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm\"\n            >\n              {HOOK_EVENTS.map((evt) => (\n                <option key={evt} value={evt}>\n                  {evt}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={matcher}\n              onChange={(e) => setMatcher(e.target.value)}\n              placeholder=\"matcher (Bash, Write, *)\"\n              aria-label=\"Matcher\"\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            <input\n              type=\"text\"\n              value={command}\n              onChange={(e) => setCommand(e.target.value)}\n              placeholder='command (e.g. \"./scripts/audit.sh\")'\n              aria-label=\"Command\"\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            <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          {hooks.map((hook) => {\n            const enabled = hook.enabled ?? true;\n            return (\n              <li\n                key={hook.id}\n                className={cn(\n                  \"grid grid-cols-[140px_140px_1fr_auto_auto] items-center gap-3 px-4 py-2.5\",\n                  !enabled && \"opacity-50\",\n                )}\n              >\n                <span className=\"font-mono text-code-sm text-primary\">{hook.event}</span>\n                <span className=\"font-mono text-code-sm text-muted-foreground\">{hook.matcher}</span>\n                <span className=\"truncate font-mono text-code-sm text-foreground\">\n                  {hook.command}\n                </span>\n                {onToggle ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggle(hook.id, !enabled)}\n                    aria-pressed={enabled}\n                    className={cn(\n                      \"rounded-full border px-2.5 py-0.5 font-mono text-label uppercase\",\n                      enabled\n                        ? \"border-success/40 bg-success/15 text-success\"\n                        : \"border-border/40 bg-muted text-muted-foreground\",\n                    )}\n                  >\n                    {enabled ? \"On\" : \"Off\"}\n                  </button>\n                ) : (\n                  <span />\n                )}\n                {onRemove ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => onRemove(hook.id)}\n                    aria-label={`Remove hook ${hook.event} ${hook.matcher}`}\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                ) : (\n                  <span />\n                )}\n              </li>\n            );\n          })}\n          {hooks.length === 0 ? (\n            <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n              No hooks configured.\n            </li>\n          ) : null}\n        </ul>\n      </section>\n    );\n  },\n);\nHookConfig.displayName = \"HookConfig\";\n\nexport { HookConfig, HOOK_EVENTS };\n"
+    }
+  ]
+}

package/registry/r/hook-event-log.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hook-event-log",
+  "type": "registry:ui",
+  "title": "HookEventLog",
+  "description": "Chronological list of hook firings, with result tone, the",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/hook-event-log/hook-event-log.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/hook-event-log.tsx",
+      "content": "import { CheckCircle2, CircleX, ShieldAlert } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type HookEventResult = \"ok\" | \"blocked\" | \"error\";\n\nexport interface HookEventEntry {\n  id: string;\n  /** Hook event (e.g. PreToolUse). */\n  event: string;\n  /** Hook matcher (e.g. Bash). */\n  matcher: string;\n  /** What the hook command was. */\n  command: string;\n  result: HookEventResult;\n  timestamp: string;\n  /** Optional stderr/stdout snippet. */\n  output?: string;\n  /** Optional duration label, e.g. \"120ms\". */\n  duration?: string;\n}\n\ninterface HookEventLogProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  events: HookEventEntry[];\n  title?: ReactNode;\n}\n\nconst RESULT_CONFIG = {\n  ok: { icon: CheckCircle2, color: \"text-success\" },\n  blocked: { icon: ShieldAlert, color: \"text-warning\" },\n  error: { icon: CircleX, color: \"text-destructive\" },\n} as const;\n\n/**\n * HookEventLog — chronological list of hook firings, with result tone, the\n * command that ran, and an optional output preview.\n */\nconst HookEventLog = forwardRef<HTMLDivElement, HookEventLogProps>(\n  ({ className, events, title = \"Hook log\", ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\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          {events.length} {events.length === 1 ? \"event\" : \"events\"}\n        </span>\n      </header>\n      <ol className=\"divide-y divide-border/30\">\n        {events.map((evt) => {\n          const cfg = RESULT_CONFIG[evt.result];\n          const Icon = cfg.icon;\n          return (\n            <li\n              key={evt.id}\n              className=\"grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-2.5\"\n            >\n              <Icon aria-hidden=\"true\" className={cn(\"mt-0.5 size-3.5 shrink-0\", cfg.color)} />\n              <div className=\"min-w-0\">\n                <p className=\"flex flex-wrap items-baseline gap-2\">\n                  <span className=\"font-mono text-code-sm text-primary\">{evt.event}</span>\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">\n                    matcher={evt.matcher}\n                  </span>\n                  {evt.duration ? (\n                    <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                      {evt.duration}\n                    </span>\n                  ) : null}\n                </p>\n                <p className=\"truncate font-mono text-code-sm text-foreground\">{evt.command}</p>\n                {evt.output ? (\n                  <pre className=\"mt-1 max-h-24 overflow-auto rounded-md bg-muted/60 px-2 py-1 font-mono text-code-sm text-muted-foreground\">\n                    {evt.output}\n                  </pre>\n                ) : null}\n              </div>\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                {evt.timestamp}\n              </span>\n            </li>\n          );\n        })}\n        {events.length === 0 ? (\n          <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No hooks have fired yet.\n          </li>\n        ) : null}\n      </ol>\n    </section>\n  ),\n);\nHookEventLog.displayName = \"HookEventLog\";\n\nexport { HookEventLog };\n"
+    }
+  ]
+}

package/registry/r/input.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "title": "Input",
+  "description": "Text input primitive with focus ring, error state, and form-field composition support.",
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/input/input.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/input.tsx",
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nconst inputVariants = cva(\n  [\n    \"flex w-full rounded-md border border-input bg-card\",\n    \"text-foreground placeholder:text-muted-foreground\",\n    \"transition-[box-shadow,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    \"focus-visible:border-primary\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"file:border-0 file:bg-transparent file:font-medium file:text-body-sm\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 py-1 text-body-sm\",\n        // md: density-tunable via CSS var. Comfortable (default) = 36px.\n        md: \"h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm\",\n        lg: \"h-11 px-4 py-2.5 text-body-md\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * Input — text input primitive.\n *\n * Violet Forge specifics:\n *   - height 40px (h-10) matching default Button md.\n *   - rounded-md (6px) — slightly less than buttons to differentiate.\n *   - focus uses violet ring (--ring).\n *   - placeholder uses --muted-foreground.\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 40px tall input from before this prop existed. EC-1 (edge-case review):\n * this overrides the native HTML `size` attribute (text-input columns) —\n * use `{...{ size: 20 } as any}` if you genuinely need the HTML attribute,\n * which is exceedingly rare.\n */\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\">,\n    VariantProps<typeof inputVariants> {}\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = \"text\", size, ...props }, ref) => (\n    <input ref={ref} type={type} className={cn(inputVariants({ size }), className)} {...props} />\n  ),\n);\nInput.displayName = \"Input\";\n\nexport { Input, inputVariants };\n"
+    }
+  ],
+  "dependencies": [
+    "class-variance-authority"
+  ]
+}

package/registry/r/intent-selector.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "intent-selector",
+  "type": "registry:ui",
+  "title": "IntentSelector",
+  "description": "Chip dropdown for picking the agent's intent for the next",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/intent-selector/intent-selector.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/intent-selector.tsx",
+      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Pencil } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface IntentOption {\n  id: string;\n  label: string;\n  /** Optional one-liner shown below the label in the menu. */\n  description?: string;\n  /** Optional icon — defaults to a pencil for the trigger if none. */\n  icon?: IconComponent;\n}\n\ninterface IntentSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  value: string;\n  options: IntentOption[];\n  onChange?: (id: string) => void;\n}\n\n/**\n * IntentSelector — chip dropdown for picking the agent's intent for the next\n * turn (e.g. edit / plan / review). Mirrors ModelSelector: pill trigger +\n * Radix DropdownMenu of options with description and a check on the active.\n */\nconst IntentSelector = forwardRef<HTMLButtonElement, IntentSelectorProps>(\n  ({ className, value, options, onChange, ...props }, ref) => {\n    const current = options.find((o) => o.id === value) ?? options[0];\n    const Icon = current?.icon ?? Pencil;\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            <Icon className=\"size-3.5 text-primary\" aria-hidden=\"true\" />\n            {current?.label ?? \"Select intent\"}\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=\"start\"\n            className={cn(\n              \"z-50 min-w-[16rem] 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              const OptIcon = opt.icon ?? Pencil;\n              return (\n                <DropdownMenu.Item\n                  key={opt.id}\n                  onSelect={() => onChange?.(opt.id)}\n                  className={cn(\n                    \"flex cursor-pointer items-start 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                  <OptIcon className=\"mt-0.5 size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  <span className=\"flex flex-1 flex-col\">\n                    <span className=\"font-medium\">{opt.label}</span>\n                    {opt.description ? (\n                      <span className=\"text-label text-muted-foreground\">{opt.description}</span>\n                    ) : null}\n                  </span>\n                  {opt.id === value ? (\n                    <Check className=\"mt-0.5 size-3.5 shrink-0 text-primary\" />\n                  ) : null}\n                </DropdownMenu.Item>\n              );\n            })}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nIntentSelector.displayName = \"IntentSelector\";\n\nexport { IntentSelector };\n"
+    }
+  ]
+}

package/registry/r/label.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "title": "Label",
+  "description": "Form field label built on Radix Label.",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/label/label.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/label.tsx",
+      "content": "import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Label — form field label built on Radix Label.\n *\n * Behaviors:\n *   - Clicking the label focuses the associated `htmlFor` input.\n *   - Adds a small red asterisk when `required` is set.\n *   - Inherits disabled visuals from the wrapper (`peer-disabled`).\n */\ninterface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean;\n}\n\nconst Label = forwardRef<ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n  ({ className, required, children, ...props }, ref) => (\n    <LabelPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex items-center gap-1 font-medium font-sans text-body-sm text-foreground\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-60\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {required ? (\n        <span className=\"text-destructive\" aria-hidden=\"true\">\n          *\n        </span>\n      ) : null}\n    </LabelPrimitive.Root>\n  ),\n);\nLabel.displayName = \"Label\";\n\nexport { Label };\n"
+    }
+  ]
+}

package/registry/r/lane-board.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "lane-board",
+  "type": "registry:ui",
+  "title": "LaneBoard",
+  "description": "Kanban-style task board with 4 lanes matching the claw-code",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/lane-board/lane-board.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/lane-board.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type LaneState = \"started\" | \"blocked\" | \"failed\" | \"finished\";\n\nexport interface LaneCard {\n  id: string;\n  /** Card title (e.g. task name). */\n  title: ReactNode;\n  /** Optional description / preview. */\n  description?: ReactNode;\n  /** Optional footer / metadata row. */\n  footer?: ReactNode;\n}\n\nexport interface Lane {\n  state: LaneState;\n  cards: LaneCard[];\n}\n\ninterface LaneBoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  lanes: Lane[];\n  title?: ReactNode;\n}\n\nconst LANE_META: Record<LaneState, { label: string; headerClass: string; cardClass: string }> = {\n  started: {\n    label: \"Started\",\n    headerClass: \"text-primary\",\n    cardClass: \"border-primary/30 bg-primary/5\",\n  },\n  blocked: {\n    label: \"Blocked\",\n    headerClass: \"text-warning\",\n    cardClass: \"border-warning/40 bg-warning/5\",\n  },\n  failed: {\n    label: \"Failed\",\n    headerClass: \"text-destructive\",\n    cardClass: \"border-destructive/40 bg-destructive/5\",\n  },\n  finished: {\n    label: \"Finished\",\n    headerClass: \"text-success\",\n    cardClass: \"border-success/40 bg-success/5\",\n  },\n};\n\n/**\n * LaneBoard — kanban-style task board with 4 lanes matching the claw-code\n * lane event schema (started/blocked/failed/finished). Each card is a\n * machine-readable task snapshot the agent emits.\n */\nconst LaneBoard = forwardRef<HTMLDivElement, LaneBoardProps>(\n  ({ className, lanes, title, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"grid gap-3\", className)}\n      aria-label=\"Agent lane board\"\n      {...props}\n    >\n      {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n      <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4\">\n        {lanes.map((lane) => {\n          const meta = LANE_META[lane.state];\n          return (\n            <div\n              key={lane.state}\n              className=\"grid auto-rows-max gap-2 rounded-xl border border-border/40 bg-card p-3\"\n            >\n              <header className=\"flex items-center justify-between px-1\">\n                <span\n                  className={cn(\n                    \"font-mono text-label-caps uppercase tracking-wider\",\n                    meta.headerClass,\n                  )}\n                >\n                  {meta.label}\n                </span>\n                <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                  {lane.cards.length}\n                </span>\n              </header>\n              {lane.cards.length === 0 ? (\n                <p className=\"rounded-md border border-border/40 border-dashed px-3 py-4 text-center font-sans text-body-sm text-muted-foreground\">\n                  empty\n                </p>\n              ) : (\n                <ul className=\"grid gap-2\">\n                  {lane.cards.map((card) => (\n                    <li\n                      key={card.id}\n                      className={cn(\"grid gap-1 rounded-md border p-3\", meta.cardClass)}\n                    >\n                      <p className=\"font-medium text-body-sm text-foreground\">{card.title}</p>\n                      {card.description ? (\n                        <p className=\"text-body-sm text-muted-foreground\">{card.description}</p>\n                      ) : null}\n                      {card.footer ? (\n                        <p className=\"font-mono text-label text-muted-foreground\">{card.footer}</p>\n                      ) : null}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </section>\n  ),\n);\nLaneBoard.displayName = \"LaneBoard\";\n\nexport { LaneBoard };\n"
+    }
+  ]
+}

package/registry/r/live-region-context.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "live-region-context",
+  "type": "registry:lib",
+  "title": "LiveRegionContext",
+  "description": "React context that coordinates aria-live declarations across nested components to prevent screen-reader double-announcement (T4.1).",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "lib/live-region-context.tsx",
+      "type": "registry:lib",
+      "target": "lib/live-region-context.tsx",
+      "content": "import { createContext, useContext } from \"react\";\n\n/**\n * LiveRegionContext — coordinates `aria-live` declarations across nested\n * components so screen readers don't announce content twice.\n *\n * T4.1 (MF-4, edge-case review). Problem: a container component that\n * declares `role=\"log\" aria-live=\"polite\"` (e.g. `ChatThread`,\n * `AgentStream`) may render a child component that ALSO declares its own\n * `role=\"status\" aria-live=\"polite\"` (e.g. `AgentStreaming`,\n * `AgentErrorCard`). NVDA/JAWS/VoiceOver treat each live region as an\n * independent announcement source, so updates to the child trigger TWO\n * announcements — once from the inner status, once because the outer\n * log observes the DOM mutation. Result: stutter on every streaming\n * token, every new toast, every skeleton mount inside a log.\n *\n * Solution: container components wrap their content with\n * `<LiveRegionProvider value={true}>`. Child components call\n * `useInLiveRegion()` and omit their own `aria-live` / `role` when the\n * context is true. The outer region remains the single announcement\n * source.\n *\n * Default is `false` so standalone components (e.g., a single\n * `AgentStreaming` placed directly in a page) keep their original\n * announcement semantics with zero migration cost.\n *\n * @example\n *   // Container declares the live region\n *   <LiveRegionProvider value={true}>\n *     <div role=\"log\" aria-live=\"polite\">\n *       {children}\n *     </div>\n *   </LiveRegionProvider>\n *\n *   // Child reads context to decide its own ARIA attrs\n *   const inLiveRegion = useInLiveRegion();\n *   return (\n *     <div\n *       role={inLiveRegion ? undefined : \"status\"}\n *       aria-live={inLiveRegion ? undefined : \"polite\"}\n *     >\n *       ...\n *     </div>\n *   );\n */\n\nconst LiveRegionContext = createContext<boolean>(false);\n\nexport const LiveRegionProvider = LiveRegionContext.Provider;\n\nexport function useInLiveRegion(): boolean {\n  return useContext(LiveRegionContext);\n}\n"
+    }
+  ]
+}

package/registry/r/login-split.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-split",
+  "type": "registry:ui",
+  "title": "LoginSplit",
+  "description": "50/50 split shell for authentication screens — form pane on the left, illustration on the right.",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/login-split/login-split.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/login-split.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface LoginSplitProps extends HTMLAttributes<HTMLDivElement> {\n  /** Left pane content — form, brand, etc. */\n  left: ReactNode;\n  /** Right pane content — illustration, marketing, social proof. */\n  right: ReactNode;\n  /**\n   * Optional footer rendered below both panes.\n   */\n  footer?: ReactNode;\n  /**\n   * Reverse the split (form on the right). Default = form left.\n   */\n  reverse?: boolean;\n}\n\n/**\n * LoginSplit — 50/50 split layout shell.\n *\n * Used for the auth flow. Two slots (`left`, `right`); the right pane has a\n * subtle violet wash so the illustration sits inside Theo identity. Mobile\n * collapses to single column.\n */\nconst LoginSplit = forwardRef<HTMLDivElement, LoginSplitProps>(\n  ({ className, left, right, footer, reverse, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex min-h-screen flex-col bg-background\", className)} {...props}>\n      <div\n        className={cn(\n          \"grid flex-1 grid-cols-1 lg:grid-cols-2\",\n          reverse && \"lg:[&>*:first-child]:order-2\",\n        )}\n      >\n        <div className=\"flex items-center justify-center px-6 py-12 lg:px-12\">\n          <div className=\"w-full max-w-md\">{left}</div>\n        </div>\n        <div\n          className={cn(\n            \"relative flex items-center justify-center px-6 py-12 lg:px-12\",\n            \"bg-dotted-violet bg-muted/60\",\n          )}\n        >\n          <div className=\"w-full max-w-lg\">{right}</div>\n        </div>\n      </div>\n      {footer ? (\n        <footer className=\"border-border/40 border-t px-6 py-3 text-center text-body-sm text-muted-foreground\">\n          {footer}\n        </footer>\n      ) : null}\n    </div>\n  ),\n);\nLoginSplit.displayName = \"LoginSplit\";\n\nexport { LoginSplit };\n"
+    }
+  ]
+}

package/registry/r/mcp-server-card.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mcp-server-card",
+  "type": "registry:ui",
+  "title": "McpServerCard",
+  "description": "One MCP server entry showing connection status, the tools",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/mcp-server-card/mcp-server-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/mcp-server-card.tsx",
+      "content": "import { Plug, RotateCcw, Server } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type MCPServerStatus = \"connected\" | \"degraded\" | \"disconnected\" | \"starting\";\n\nexport interface MCPServer {\n  id: string;\n  /** Friendly name, e.g. \"postgres\". */\n  name: string;\n  /** Transport endpoint (stdio command or URL). */\n  endpoint: string;\n  status: MCPServerStatus;\n  /** Tools exposed by the server. */\n  tools: string[];\n  /** Optional resources exposed. */\n  resources?: string[];\n  /** Diagnostic message when degraded/disconnected. */\n  message?: ReactNode;\n  /** Auto-restart toggle hint. */\n  autoRestart?: boolean;\n}\n\nconst STATUS_CONFIG: Record<MCPServerStatus, { label: string; class: string }> = {\n  connected: { label: \"Connected\", class: \"border-success/40 bg-success/15 text-success\" },\n  starting: {\n    label: \"Starting\",\n    class: \"border-primary/40 bg-primary/15 text-primary animate-pulse\",\n  },\n  degraded: { label: \"Degraded\", class: \"border-warning/40 bg-warning/15 text-warning\" },\n  disconnected: {\n    label: \"Disconnected\",\n    class: \"border-destructive/40 bg-destructive/15 text-destructive\",\n  },\n};\n\ninterface MCPServerCardProps extends HTMLAttributes<HTMLElement> {\n  server: MCPServer;\n  onRestart?: (id: string) => void;\n  onDisconnect?: (id: string) => void;\n}\n\n/**\n * MCPServerCard — one MCP server entry showing connection status, the tools\n * it exposes, and inline controls (restart, disconnect).\n *\n * Pairs with claw-code's \"degraded startup reporting\" — failed servers can\n * still appear here with a recovery message.\n */\nconst MCPServerCard = forwardRef<HTMLElement, MCPServerCardProps>(\n  ({ className, server, onRestart, onDisconnect, ...props }, ref) => {\n    const cfg = STATUS_CONFIG[server.status];\n    return (\n      <article\n        ref={ref}\n        className={cn(\"grid gap-3 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <Server className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <div className=\"min-w-0\">\n              <h4 className=\"font-medium font-mono text-body-sm text-foreground\">{server.name}</h4>\n              <p className=\"truncate font-mono text-label text-muted-foreground\">\n                {server.endpoint}\n              </p>\n            </div>\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {cfg.label}\n          </span>\n        </header>\n\n        {server.message ? (\n          <p className=\"rounded-md border border-warning/30 bg-warning/10 px-3 py-2 font-mono text-code-sm text-warning\">\n            {server.message}\n          </p>\n        ) : null}\n\n        {server.tools.length > 0 ? (\n          <div className=\"grid gap-1.5\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {server.tools.length} tools\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {server.tools.map((tool) => (\n                <span\n                  key={tool}\n                  className=\"inline-flex items-center rounded-md bg-muted px-2 py-0.5 font-mono text-foreground text-label\"\n                >\n                  {tool}\n                </span>\n              ))}\n            </div>\n          </div>\n        ) : null}\n\n        {server.resources && server.resources.length > 0 ? (\n          <div className=\"grid gap-1.5\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {server.resources.length} resources\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {server.resources.map((r) => (\n                <span\n                  key={r}\n                  className=\"inline-flex items-center rounded-md bg-accent/10 px-2 py-0.5 font-mono text-accent text-label\"\n                >\n                  {r}\n                </span>\n              ))}\n            </div>\n          </div>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-1.5\">\n          {onRestart ? (\n            <button\n              type=\"button\"\n              onClick={() => onRestart(server.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <RotateCcw className=\"size-3\" /> Restart\n            </button>\n          ) : null}\n          {onDisconnect ? (\n            <button\n              type=\"button\"\n              onClick={() => onDisconnect(server.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plug className=\"size-3\" /> Disconnect\n            </button>\n          ) : null}\n        </footer>\n      </article>\n    );\n  },\n);\nMCPServerCard.displayName = \"MCPServerCard\";\n\nexport { MCPServerCard };\n"
+    }
+  ]
+}

package/registry/r/mcp-server-list.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mcp-server-list",
+  "type": "registry:block",
+  "title": "McpServerList",
+  "description": "Grouped MCP server inventory with status filter chips.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/mcp-server-card.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/mcp-server-list/mcp-server-list.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/mcp-server-list.tsx",
+      "content": "import { Plus } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type MCPServer,\n  MCPServerCard,\n  type MCPServerStatus,\n} from \"@/components/ui/mcp-server-card\";\n\ninterface MCPServerListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  servers: MCPServer[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRestart?: (id: string) => void;\n  onDisconnect?: (id: string) => void;\n}\n\nconst STATUS_ORDER: MCPServerStatus[] = [\"connected\", \"starting\", \"degraded\", \"disconnected\"];\n\n/**\n * MCPServerList — grouped MCP server inventory with status filter chips.\n * Surfaces degraded/disconnected servers prominently so the user can act.\n */\nconst MCPServerList = forwardRef<HTMLDivElement, MCPServerListProps>(\n  (\n    { className, servers, title = \"MCP servers\", onAdd, onRestart, onDisconnect, ...props },\n    ref,\n  ) => {\n    const [filter, setFilter] = useState<MCPServerStatus | null>(null);\n\n    const counts = useMemo(() => {\n      const result: Record<MCPServerStatus, number> = {\n        connected: 0,\n        starting: 0,\n        degraded: 0,\n        disconnected: 0,\n      };\n      for (const s of servers) result[s.status]++;\n      return result;\n    }, [servers]);\n\n    const filtered = useMemo(\n      () => (filter ? servers.filter((s) => s.status === filter) : servers),\n      [servers, filter],\n    );\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3\", className)}\n        aria-label=\"MCP servers\"\n        {...props}\n      >\n        <header className=\"flex flex-wrap items-center justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"inline-flex rounded-lg border border-border/60 bg-muted p-0.5\">\n              <button\n                type=\"button\"\n                onClick={() => setFilter(null)}\n                aria-pressed={filter === null}\n                className={cn(\n                  \"rounded-md px-2.5 py-1 font-mono text-label\",\n                  filter === null ? \"bg-card text-foreground shadow-sm\" : \"text-muted-foreground\",\n                )}\n              >\n                All · {servers.length}\n              </button>\n              {STATUS_ORDER.map((status) => (\n                <button\n                  key={status}\n                  type=\"button\"\n                  onClick={() => setFilter(status)}\n                  aria-pressed={filter === status}\n                  disabled={counts[status] === 0}\n                  className={cn(\n                    \"rounded-md px-2.5 py-1 font-mono text-label uppercase\",\n                    filter === status\n                      ? \"bg-card text-foreground shadow-sm\"\n                      : \"text-muted-foreground\",\n                    \"disabled:opacity-40\",\n                  )}\n                >\n                  {status} · {counts[status]}\n                </button>\n              ))}\n            </div>\n            {onAdd ? (\n              <button\n                type=\"button\"\n                onClick={onAdd}\n                className=\"inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 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 server\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No servers in this state.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            {filtered.map((server) => (\n              <MCPServerCard\n                key={server.id}\n                server={server}\n                {...(onRestart ? { onRestart } : {})}\n                {...(onDisconnect ? { onDisconnect } : {})}\n              />\n            ))}\n          </div>\n        )}\n      </section>\n    );\n  },\n);\nMCPServerList.displayName = \"MCPServerList\";\n\nexport { MCPServerList };\n"
+    }
+  ]
+}

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": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "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": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "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": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "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": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
+  ],
+  "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": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "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/page-shell.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "page-shell",
+  "type": "registry:ui",
+  "title": "PageShell",
+  "description": "Page-level scaffold composite. Renders title + optional description + optional ActionBar (when search/primaryAction/onFilterClick provided), then one of four mutually-exclusive content states (loading > error > empty > children). Loading defaults to a centered spinner Card; loadingNode escape hatch lets consumers pass custom skeleton. Error state renders Card with message + optional retry button + optional docsHref. Empty state delegates to <EmptyState>. PageShell does NOT manage document.title — pass onTitleChange callback to wire your own hook.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/action-bar.json",
+    "https://usetheodev.github.io/theo-ui/r/card.json",
+    "https://usetheodev.github.io/theo-ui/r/empty-state.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/page-shell/page-shell.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/page-shell.tsx",
+      "content": "import { AlertCircle, Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect } from \"react\";\nimport type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ActionBar } from \"@/components/ui/action-bar\";\nimport { Card } from \"@/components/ui/card\";\nimport { EmptyState } from \"@/components/ui/empty-state\";\n\n/**\n * PageShell — page-level scaffold composite.\n *\n * Renders title + optional description + optional ActionBar, then\n * one of four mutually-exclusive content states:\n *   1. loading (highest precedence)\n *   2. error\n *   3. empty\n *   4. children (default)\n *\n * Scope-narrowed per Brief #5 D3: PageShell does NOT manage\n * `document.title`. Use the optional `onTitleChange` callback to\n * wire your own hook (e.g. useSetPageTitle, react-helmet,\n * next/head).\n *\n * @example\n *   <PageShell\n *     title=\"Domains\"\n *     description=\"Custom domains and DNS verification.\"\n *     search={{ placeholder: \"Search…\", value: q, onChange: setQ }}\n *     primaryAction={{ label: \"Add domain\", icon: Plus, onClick: openModal }}\n *     loading={isLoading}\n *     error={error ? { message: error.message, onRetry: refetch } : undefined}\n *     empty={data?.length === 0 ? { title: \"No domains yet\" } : undefined}\n *   >\n *     <DataTable columns={…} data={data} />\n *   </PageShell>\n */\nexport interface PageShellProps {\n  title: string;\n  description?: ReactNode;\n  /** Optional callback invoked when `title` changes — wire to your own document.title hook. */\n  onTitleChange?: (title: string) => void;\n  primaryAction?: {\n    label: ReactNode;\n    icon?: ElementType;\n    onClick: () => void;\n    loading?: boolean;\n  };\n  search?: {\n    placeholder: string;\n    value: string;\n    onChange: (v: string) => void;\n  };\n  onFilterClick?: () => void;\n  loading?: boolean;\n  /** Custom loading UI. Defaults to a centered spinner card. */\n  loadingNode?: ReactNode;\n  error?: {\n    message: string;\n    onRetry?: () => void;\n    docsHref?: string;\n  };\n  empty?: {\n    icon?: ElementType;\n    title: string;\n    description?: ReactNode;\n    action?: { label: string; onClick: () => void };\n  };\n  children?: ReactNode;\n  className?: string;\n}\n\nconst PageShell = forwardRef<HTMLElement, PageShellProps>(\n  (\n    {\n      title,\n      description,\n      onTitleChange,\n      primaryAction,\n      search,\n      onFilterClick,\n      loading = false,\n      loadingNode,\n      error,\n      empty,\n      children,\n      className,\n    },\n    ref,\n  ) => {\n    useEffect(() => {\n      onTitleChange?.(title);\n    }, [title, onTitleChange]);\n\n    const hasActionBar =\n      search !== undefined || primaryAction !== undefined || onFilterClick !== undefined;\n\n    // State precedence: loading > error > empty > children\n    let content: ReactNode;\n    if (loading) {\n      content = loadingNode ?? (\n        <Card className=\"flex items-center justify-center gap-3 p-12 text-muted-foreground\">\n          <Loader2 aria-hidden=\"true\" className=\"size-5 animate-spin\" />\n          <span className=\"font-sans text-body-sm\">Loading…</span>\n        </Card>\n      );\n    } else if (error) {\n      content = (\n        <Card className=\"flex flex-col items-center gap-3 p-8 text-center\">\n          <AlertCircle aria-hidden=\"true\" className=\"size-8 text-destructive\" />\n          <p className=\"font-sans text-body-sm text-foreground\">{error.message}</p>\n          <div className=\"flex items-center gap-3\">\n            {error.onRetry ? (\n              <button\n                type=\"button\"\n                onClick={error.onRetry}\n                className={cn(\n                  \"inline-flex items-center rounded-md border border-border/40 px-3 py-1.5\",\n                  \"font-sans text-body-sm text-foreground\",\n                  \"transition-colors hover:bg-muted\",\n                )}\n              >\n                Retry\n              </button>\n            ) : null}\n            {error.docsHref ? (\n              <a\n                href={error.docsHref}\n                className=\"font-sans text-body-sm text-primary hover:underline\"\n              >\n                View docs\n              </a>\n            ) : null}\n          </div>\n        </Card>\n      );\n    } else if (empty) {\n      const emptyAction = empty.action;\n      content = (\n        <EmptyState\n          icon={empty.icon as Parameters<typeof EmptyState>[0][\"icon\"]}\n          title={empty.title}\n          description={empty.description}\n          action={\n            emptyAction ? (\n              <button\n                type=\"button\"\n                onClick={emptyAction.onClick}\n                className={cn(\n                  \"inline-flex items-center rounded-md bg-primary px-3 py-1.5\",\n                  \"font-medium font-sans text-body-sm text-primary-foreground\",\n                  \"transition-colors hover:bg-primary-deep\",\n                )}\n              >\n                {emptyAction.label}\n              </button>\n            ) : undefined\n          }\n        />\n      );\n    } else {\n      content = children;\n    }\n\n    return (\n      <main\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(\"flex flex-col gap-6\", className)}\n      >\n        <header className=\"flex flex-col gap-1\">\n          <h1 className=\"font-display font-semibold text-display-sm text-foreground tracking-tight\">\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"font-sans text-body-md text-muted-foreground\">{description}</p>\n          ) : null}\n        </header>\n        {hasActionBar ? (\n          <ActionBar search={search} primaryAction={primaryAction} onFilterClick={onFilterClick} />\n        ) : null}\n        <div>{content}</div>\n      </main>\n    );\n  },\n);\nPageShell.displayName = \"PageShell\";\n\nexport { PageShell };\n"
+    }
+  ]
+}

package/registry/r/pagination.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "pagination",
+  "type": "registry:ui",
+  "title": "Pagination",
+  "description": "Accessible page-number navigation primitive. Renders <nav aria-label=Pagination> with first/prev/numbers/next/last buttons and visual ellipses when totalPages exceeds the visible range. Active page carries aria-current=page. Keyboard nav: ArrowLeft / ArrowRight / Home / End. Configurable siblingCount + optional jump buttons. Returns null when totalPages <= 1. Exports a pure computePageRange helper for unit testing the range logic in isolation.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/pagination/pagination.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/pagination.tsx",
+      "content": "import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Pagination — accessible page-number navigation primitive.\n *\n * Renders a `<nav aria-label=\"Pagination\">` containing a button group:\n * `[<<] [<] 1 ... 5 6 [7] 8 9 ... 42 [>] [>>]`. The active page carries\n * `aria-current=\"page\"`. Keyboard navigation (ArrowLeft / ArrowRight /\n * Home / End) is wired on the nav. Ellipses are rendered as\n * non-interactive `<span>` elements with `aria-hidden`.\n *\n * Renders nothing when `totalPages <= 1` (the page is the whole list).\n *\n * `siblingCount` controls how many neighbors of the current page are\n * always visible (default 1 → \"5 6 [7] 8 9\"). `showJumpButtons`\n * toggles the first/last `<<` / `>>` buttons.\n *\n * Consumers control state (`currentPage`) and are responsible for any\n * URL routing — the buttons are `<button>`, not `<a>`.\n *\n * @example\n *   <Pagination\n *     currentPage={page}\n *     totalPages={42}\n *     onPageChange={setPage}\n *   />\n */\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  /** Neighbors of current page that stay visible. Default 1. */\n  siblingCount?: number;\n  /** Render `<<` / `>>` first/last buttons. Default true. */\n  showJumpButtons?: boolean;\n  /** Size variant. Default md. */\n  size?: \"sm\" | \"md\";\n}\n\n/**\n * Pure helper: compute the visible page-range with ellipses.\n * Exported for unit testing — most pagination bugs live here.\n */\nexport function computePageRange(\n  currentPage: number,\n  totalPages: number,\n  siblingCount = 1,\n): Array<number | \"ellipsis-start\" | \"ellipsis-end\"> {\n  if (totalPages <= 1) return [];\n\n  // Always keep first + last + siblings around current.\n  // Total \"core\" buttons: 1 + (siblingCount * 2 + 1) + 1 = siblingCount * 2 + 3.\n  // Plus possibly 2 ellipsis placeholders → max visible = siblingCount * 2 + 5.\n  const totalNumbers = siblingCount * 2 + 3;\n  const totalWithEdges = totalNumbers + 2;\n\n  if (totalPages <= totalWithEdges) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblingCount, 1);\n  const rightSibling = Math.min(currentPage + siblingCount, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRangeEnd = 1 + (siblingCount * 2 + 2);\n    const leftRange = Array.from({ length: leftRangeEnd }, (_, i) => i + 1);\n    return [...leftRange, \"ellipsis-end\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightStart = totalPages - (siblingCount * 2 + 2);\n    const rightRange = Array.from(\n      { length: totalPages - rightStart + 1 },\n      (_, i) => rightStart + i,\n    );\n    return [1, \"ellipsis-start\", ...rightRange];\n  }\n\n  // Both sides need ellipsis.\n  const middleRange = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  );\n  return [1, \"ellipsis-start\", ...middleRange, \"ellipsis-end\", totalPages];\n}\n\nconst SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-7 text-label\",\n  md: \"size-8 text-body-sm\",\n};\n\nconst ICON_SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-3\",\n  md: \"size-3.5\",\n};\n\nconst Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      className,\n      currentPage,\n      totalPages,\n      onPageChange,\n      siblingCount = 1,\n      showJumpButtons = true,\n      size = \"md\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (totalPages <= 1) {\n      return null;\n    }\n\n    const range = computePageRange(currentPage, totalPages, siblingCount);\n    const prevDisabled = currentPage <= 1;\n    const nextDisabled = currentPage >= totalPages;\n    const sizeClass = SIZE[size];\n    const iconClass = ICON_SIZE[size];\n\n    const buttonBase = cn(\n      \"inline-flex items-center justify-center rounded-md font-mono tabular-nums\",\n      \"transition-colors\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      sizeClass,\n    );\n\n    function go(page: number) {\n      const clamped = Math.max(1, Math.min(totalPages, page));\n      if (clamped !== currentPage) onPageChange(clamped);\n    }\n\n    function handleKeyDown(e: KeyboardEvent<HTMLElement>) {\n      if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        go(currentPage - 1);\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        go(currentPage + 1);\n      } else if (e.key === \"Home\") {\n        e.preventDefault();\n        go(1);\n      } else if (e.key === \"End\") {\n        e.preventDefault();\n        go(totalPages);\n      }\n    }\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Pagination\"\n        onKeyDown={handleKeyDown}\n        className={cn(\"flex items-center gap-1\", className)}\n        {...props}\n      >\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(1)}\n            disabled={prevDisabled}\n            aria-label=\"Go to first page\"\n            aria-disabled={prevDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsLeft aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage - 1)}\n          disabled={prevDisabled}\n          aria-label=\"Go to previous page\"\n          aria-disabled={prevDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronLeft aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {range.map((item) => {\n          if (item === \"ellipsis-start\" || item === \"ellipsis-end\") {\n            return (\n              <span\n                key={item}\n                aria-hidden=\"true\"\n                className={cn(\n                  \"inline-flex items-center justify-center text-muted-foreground\",\n                  sizeClass,\n                )}\n              >\n                …\n              </span>\n            );\n          }\n          const isActive = item === currentPage;\n          return (\n            <button\n              key={item}\n              type=\"button\"\n              onClick={() => go(item)}\n              aria-label={`Go to page ${item}`}\n              aria-current={isActive ? \"page\" : undefined}\n              className={cn(\n                buttonBase,\n                isActive\n                  ? \"bg-primary text-primary-foreground hover:bg-primary\"\n                  : \"text-foreground hover:bg-muted\",\n              )}\n            >\n              {item}\n            </button>\n          );\n        })}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage + 1)}\n          disabled={nextDisabled}\n          aria-label=\"Go to next page\"\n          aria-disabled={nextDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronRight aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(totalPages)}\n            disabled={nextDisabled}\n            aria-label=\"Go to last page\"\n            aria-disabled={nextDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsRight aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n      </nav>\n    );\n  },\n);\nPagination.displayName = \"Pagination\";\n\nexport { Pagination };\n"
+    }
+  ]
+}