@usetheo/ui 0.1.0-next.0

package/registry/r/browser-controls.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "browser-controls",
+  "type": "registry:ui",
+  "title": "BrowserControls",
+  "description": "Back/forward/reload + URL bar.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/browser-controls/browser-controls.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/browser-controls.tsx",
+      "content": "import { ArrowLeft, ArrowRight, RotateCw } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface BrowserControlsProps extends HTMLAttributes<HTMLDivElement> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Disable URL editing (some previews are read-only).\n   */\n  readOnlyUrl?: boolean;\n}\n\n/**\n * BrowserControls — back/forward/reload + URL bar.\n *\n * Used as the top of PreviewPanel in the Code workspace.\n */\nconst BrowserControls = forwardRef<HTMLDivElement, BrowserControlsProps>(\n  ({ className, url, onUrlChange, onBack, onForward, onReload, readOnlyUrl, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-1 border-border/40 border-b bg-card px-3 py-2\",\n        className,\n      )}\n      {...props}\n    >\n      <NavBtn aria-label=\"Back\" {...(onBack ? { onClick: onBack } : {})}>\n        <ArrowLeft className=\"size-3.5\" />\n      </NavBtn>\n      <NavBtn aria-label=\"Forward\" {...(onForward ? { onClick: onForward } : {})}>\n        <ArrowRight className=\"size-3.5\" />\n      </NavBtn>\n      <NavBtn aria-label=\"Reload\" {...(onReload ? { onClick: onReload } : {})}>\n        <RotateCw className=\"size-3.5\" />\n      </NavBtn>\n      <input\n        type=\"url\"\n        value={url}\n        onChange={(e) => onUrlChange?.(e.target.value)}\n        readOnly={readOnlyUrl ?? !onUrlChange}\n        aria-label=\"Address\"\n        className={cn(\n          \"ml-2 h-7 flex-1 rounded-md border border-border/40 bg-muted/40 px-2\",\n          \"font-mono text-code-sm text-foreground\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        )}\n      />\n    </div>\n  ),\n);\nBrowserControls.displayName = \"BrowserControls\";\n\nfunction NavBtn({\n  onClick,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  onClick?: () => void;\n  children: ReactNode;\n  \"aria-label\": string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={ariaLabel}\n      disabled={!onClick}\n      className={cn(\n        \"rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        \"disabled:opacity-30 disabled:hover:bg-transparent\",\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { BrowserControls };\n"
+    }
+  ]
+}

package/registry/r/build-log-stream.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "build-log-stream",
+  "type": "registry:block",
+  "title": "BuildLogStream",
+  "description": "Terminal-like log viewer with timestamps + level coloring.",
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/build-log-stream/build-log-stream.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/build-log-stream.tsx",
+      "content": "import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\nexport type LogLevel = \"info\" | \"warn\" | \"error\" | \"success\" | \"debug\";\n\nexport interface LogLine {\n  id: string;\n  timestamp: string;\n  level: LogLevel;\n  message: string;\n  source?: string;\n}\n\nconst levelClasses: Record<LogLevel, string> = {\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n  debug: \"text-muted-foreground\",\n};\n\nconst levelLabels: Record<LogLevel, string> = {\n  info: \"INFO\",\n  warn: \"WARN\",\n  error: \"ERROR\",\n  success: \" OK \",\n  debug: \"DBG \",\n};\n\ninterface BuildLogStreamProps extends HTMLAttributes<HTMLDivElement> {\n  lines: LogLine[];\n  /**\n   * If true, shows level filter chips above the stream.\n   */\n  filterable?: boolean;\n  /**\n   * Controlled filter — which levels are visible. Empty Set = show all.\n   *\n   * Pick one mode: either always pass `visibleLevels` + `onVisibleLevelsChange`\n   * (controlled), or never (uncontrolled). Mixing the two between renders is\n   * not supported and may produce surprising state.\n   */\n  visibleLevels?: Set<LogLevel>;\n  onVisibleLevelsChange?: (levels: Set<LogLevel>) => void;\n  /**\n   * Height of the scrollable region.\n   */\n  height?: string | number;\n  /**\n   * Maximum number of lines rendered. When exceeded, only the tail is shown\n   * and a banner indicates truncation. Defaults to 2000 — set higher with\n   * caution; React reconciliation cost scales linearly.\n   */\n  maxLines?: number;\n  /**\n   * Screen-reader live-region politeness for newly appended lines. Defaults\n   * to `\"off\"` because build-log streams can be high-volume; opt into\n   * `\"polite\"` only when running the build in the foreground.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst ALL_LEVELS: LogLevel[] = [\"info\", \"warn\", \"error\", \"success\", \"debug\"];\n\n/**\n * BuildLogStream — terminal-like log viewer with timestamps + level coloring.\n *\n * Used in Code workspace and PaaS deployment views. Geist Mono throughout.\n * Lines fade in via animate-fade-in-up on mount; new lines (when prepended/appended)\n * are not animated to avoid feedback noise (consumer's responsibility to render\n * incrementally if needed).\n */\nconst BuildLogStream = forwardRef<HTMLDivElement, BuildLogStreamProps>(\n  (\n    {\n      className,\n      lines,\n      filterable = true,\n      visibleLevels,\n      onVisibleLevelsChange,\n      height = \"320px\",\n      maxLines = 2000,\n      live = \"off\",\n      ...props\n    },\n    ref,\n  ) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    const [internalLevels, setInternalLevels] = useState<Set<LogLevel>>(new Set());\n    const levels = visibleLevels ?? internalLevels;\n    const updateLevels = onVisibleLevelsChange ?? setInternalLevels;\n\n    // MEDIUM-002 / T6.5: warn (dev-only) when a consumer flips between\n    // controlled and uncontrolled — React's own warning handles `value`/\n    // `defaultValue` on form inputs but doesn't see our custom prop pair.\n    const wasControlled = useRef<boolean | null>(null);\n    useEffect(() => {\n      if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n      const isControlled = visibleLevels !== undefined;\n      if (wasControlled.current === null) {\n        wasControlled.current = isControlled;\n        return;\n      }\n      if (wasControlled.current !== isControlled) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic (MEDIUM-002)\n        console.warn(\n          `[@usetheo/ui] BuildLogStream: \\`visibleLevels\\` prop switched between ${\n            wasControlled.current ? \"controlled\" : \"uncontrolled\"\n          } and ${isControlled ? \"controlled\" : \"uncontrolled\"} between renders. Pick one mode and keep it consistent.`,\n        );\n        wasControlled.current = isControlled;\n      }\n    }, [visibleLevels]);\n\n    const filtered = useMemo(() => {\n      if (levels.size === 0) return lines;\n      return lines.filter((l) => levels.has(l.level));\n    }, [lines, levels]);\n\n    const truncated = filtered.length > maxLines;\n    const visible = truncated ? filtered.slice(filtered.length - maxLines) : filtered;\n    const hiddenCount = truncated ? filtered.length - maxLines : 0;\n\n    const toggle = (level: LogLevel) => {\n      const next = new Set(levels);\n      if (next.has(level)) next.delete(level);\n      else next.add(level);\n      updateLevels(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...props}>\n        {filterable ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {ALL_LEVELS.map((level) => {\n              const active = levels.size === 0 || levels.has(level);\n              return (\n                <button\n                  key={level}\n                  type=\"button\"\n                  onClick={() => toggle(level)}\n                  aria-pressed={active}\n                  className={cn(\n                    \"rounded-md border px-2 py-1 font-mono text-label uppercase tracking-wider\",\n                    \"transition-colors 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                    active\n                      ? cn(\"border-border/60 bg-muted\", levelClasses[level])\n                      : \"border-border/30 text-muted-foreground/50 hover:text-muted-foreground\",\n                  )}\n                >\n                  {level}\n                </button>\n              );\n            })}\n          </div>\n        ) : null}\n        <div\n          className={cn(\"overflow-y-auto rounded-lg border bg-card\", \"font-mono text-code-sm\")}\n          style={{ height }}\n        >\n          {truncated ? (\n            <output className=\"block border-border/30 border-b bg-muted/40 px-4 py-1.5 text-label text-muted-foreground\">\n              Showing last {maxLines.toLocaleString()} of {filtered.length.toLocaleString()} lines (\n              {hiddenCount.toLocaleString()} earlier lines hidden)\n            </output>\n          ) : null}\n          {visible.length === 0 ? (\n            <p className=\"px-4 py-3 text-muted-foreground\">No log lines.</p>\n          ) : (\n            <ol className=\"divide-y divide-border/30\" aria-live={effectiveLive} aria-atomic=\"false\">\n              {visible.map((line) => (\n                <li\n                  key={line.id}\n                  className=\"grid grid-cols-[auto_auto_1fr] gap-3 px-4 py-1.5 leading-relaxed hover:bg-muted/30\"\n                >\n                  <span className=\"select-none text-muted-foreground\">{line.timestamp}</span>\n                  <span className={cn(\"select-none font-bold\", levelClasses[line.level])}>\n                    [{levelLabels[line.level]}]\n                  </span>\n                  <span className={levelClasses[line.level]}>\n                    {line.source ? (\n                      <span className=\"mr-2 text-muted-foreground\">{line.source}:</span>\n                    ) : null}\n                    {line.message}\n                  </span>\n                </li>\n              ))}\n            </ol>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nBuildLogStream.displayName = \"BuildLogStream\";\n\nexport { BuildLogStream };\n"
+    }
+  ]
+}

package/registry/r/button.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "title": "Button",
+  "description": "Primitive action element in the Violet Forge design system.",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "class-variance-authority"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/button/button.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/button.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Button — primitive action element in the Violet Forge design system.\n *\n * Variants:\n *   - primary    Theo violet fill, glow on hover (signature)\n *   - secondary  surface with hairline border\n *   - accent     burnt-sienna fill, celebratory actions\n *   - ghost      transparent, hover lifts surface\n *   - link       text-only, primary color, underline on hover\n *   - destructive  for irreversible actions\n *\n * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)\n *\n * `asChild` swaps the root for the consumer's element (Radix Slot pattern).\n */\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.\n    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight\n    // range declared for Geist Sans in the Violet Forge identity.\n    \"font-medium font-sans tracking-tight\",\n    \"transition-[box-shadow,background-color,color,transform] 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    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-primary text-primary-foreground\",\n          \"hover:bg-primary hover:shadow-glow\",\n          \"active:scale-[0.98] active:bg-primary-deep active:shadow-none\",\n        ],\n        secondary: [\n          \"border border-border bg-secondary text-secondary-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98]\",\n        ],\n        accent: [\"bg-accent text-accent-foreground\", \"hover:bg-accent-deep\", \"active:scale-[0.98]\"],\n        ghost: [\n          \"bg-transparent text-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98] active:bg-secondary\",\n        ],\n        link: [\n          \"bg-transparent text-primary underline-offset-4\",\n          \"hover:text-primary-deep hover:underline\",\n          \"h-auto p-0\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground\",\n          \"hover:bg-destructive/90\",\n          \"active:scale-[0.98]\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-3 text-body-sm\",\n        md: \"h-10 px-4 text-body-md\",\n        lg: \"h-12 px-6 text-body-lg\",\n        icon: \"h-10 w-10 p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"
+    }
+  ]
+}

package/registry/r/capability-indicator.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "capability-indicator",
+  "type": "registry:ui",
+  "title": "CapabilityIndicator",
+  "description": "Row of chips showing what the agent can currently do.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/capability-indicator/capability-indicator.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/capability-indicator.tsx",
+      "content": "import {\n  AlertCircle,\n  Eye,\n  Network,\n  Pencil,\n  Rocket,\n  Sparkles,\n  Terminal,\n  Trash2,\n} 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 CapabilityState = \"enabled\" | \"disabled\" | \"blocked\" | \"active\";\n\nexport interface Capability {\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional icon override. */\n  icon?: IconComponent;\n  /** Default state. */\n  state?: CapabilityState;\n  /** Tooltip / longer description. */\n  hint?: ReactNode;\n}\n\ninterface CapabilityIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n  capabilities: Capability[];\n}\n\n/**\n * CapabilityIndicator — row of chips showing what the agent can currently do.\n *\n * Critical for transparency: the user should always see (e.g. in a top bar)\n * whether the agent has read/write/exec/network access enabled. The \"active\"\n * state pulses when a capability is in use.\n */\nconst stateClasses: Record<CapabilityState, string> = {\n  enabled: \"border-success/40 bg-success/10 text-success\",\n  active: \"border-primary/50 bg-primary/15 text-primary\",\n  disabled: \"border-border/40 bg-muted text-muted-foreground line-through\",\n  blocked: \"border-destructive/40 bg-destructive/10 text-destructive\",\n};\n\nconst CapabilityIndicator = forwardRef<HTMLUListElement, CapabilityIndicatorProps>(\n  ({ className, capabilities, ...props }, ref) => (\n    <ul\n      ref={ref}\n      aria-label=\"Agent capabilities\"\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n      {...(props as HTMLAttributes<HTMLUListElement>)}\n    >\n      {capabilities.map((c) => {\n        const Icon = c.icon ?? AlertCircle;\n        const state = c.state ?? \"enabled\";\n        return (\n          <li\n            key={c.id}\n            title={typeof c.hint === \"string\" ? c.hint : undefined}\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5\",\n              \"font-sans text-label\",\n              \"transition-colors\",\n              stateClasses[state],\n            )}\n          >\n            <Icon\n              aria-hidden=\"true\"\n              className={cn(\"size-3 shrink-0\", state === \"active\" && \"animate-pulse\")}\n            />\n            {c.label}\n          </li>\n        );\n      })}\n    </ul>\n  ),\n);\nCapabilityIndicator.displayName = \"CapabilityIndicator\";\n\n/** Common capability presets — re-use these so apps don't reinvent labels. */\nexport const capabilityPresets = {\n  read: { id: \"read\", label: \"Read files\", icon: Eye } as const,\n  write: { id: \"write\", label: \"Write files\", icon: Pencil } as const,\n  delete: { id: \"delete\", label: \"Delete files\", icon: Trash2 } as const,\n  bash: { id: \"bash\", label: \"Run shell\", icon: Terminal } as const,\n  network: { id: \"network\", label: \"Network\", icon: Network } as const,\n  deploy: { id: \"deploy\", label: \"Deploy\", icon: Rocket } as const,\n  llm: { id: \"llm\", label: \"Sub-agents\", icon: Sparkles } as const,\n};\n\nexport { CapabilityIndicator };\n"
+    }
+  ]
+}

package/registry/r/card.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "title": "Card",
+  "description": "Surface container for grouping related content.",
+  "dependencies": [
+    "@radix-ui/react-slot"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/card/card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/card.tsx",
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Card — surface container for grouping related content.\n *\n * Composition pattern (shadcn-style):\n *   <Card>\n *     <Card.Header>\n *       <Card.Title>…</Card.Title>\n *       <Card.Description>…</Card.Description>\n *     </Card.Header>\n *     <Card.Body>…</Card.Body>\n *     <Card.Footer>…</Card.Footer>\n *   </Card>\n *\n * Variants are applied via Tailwind utility classes on the root.\n * Use `bg-dotted-violet` utility on a parent to get the signature page texture.\n */\n\nconst Root = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"rounded-xl border bg-card text-card-foreground shadow-md\",\n        \"transition-shadow duration-base ease-out-soft\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"Card\";\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-1.5 p-6 pb-3\", className)} {...props} />\n  ),\n);\nHeader.displayName = \"Card.Header\";\n\ninterface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * When true, renders the child element with the Card.Title styles applied\n   * (Radix Slot pattern). Use to swap the default `<h3>` for `<h1>` / `<h2>`\n   * when the heading hierarchy requires it.\n   */\n  asChild?: boolean;\n}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"h3\";\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\"font-display text-foreground text-title-lg tracking-tight\", className)}\n        {...props}\n      />\n    );\n  },\n);\nTitle.displayName = \"Card.Title\";\n\nconst Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props} />\n  ),\n);\nDescription.displayName = \"Card.Description\";\n\nconst Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"p-6 pt-3\", className)} {...props} />\n  ),\n);\nBody.displayName = \"Card.Body\";\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center gap-3 border-border/40 border-t p-6 pt-4\", className)}\n      {...props}\n    />\n  ),\n);\nFooter.displayName = \"Card.Footer\";\n\nconst Card = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n});\n\nexport { Card };\n"
+    }
+  ]
+}

package/registry/r/chat-composer.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chat-composer",
+  "type": "registry:ui",
+  "title": "ChatComposer",
+  "description": "Message input area, shared by Chat / Code / Infra modes.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "button",
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/chat-composer/chat-composer.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/chat-composer.tsx",
+      "content": "import { Mic, Paperclip, Send, Square } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type {\n  FormEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Button } from \"@/components/ui/button\";\n\nexport type ComposerMode = \"chat\" | \"code\" | \"infra\";\n\ninterface ChatComposerProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> {\n  mode?: ComposerMode;\n  value: string;\n  onValueChange: (next: string) => void;\n  onSubmit?: (value: string) => void;\n  /**\n   * If true, the composer is in \"agent running\" state — Send becomes a Stop button.\n   */\n  running?: boolean;\n  onStop?: () => void;\n  /**\n   * Slot above the textarea — used for the folder selector in Infra mode.\n   */\n  contextSlot?: ReactNode;\n  /**\n   * Slot above the textarea for attachments / chips.\n   */\n  attachmentsSlot?: ReactNode;\n  /**\n   * Slot on the bottom-left of the action row (e.g. custom toggles).\n   * Overrides the default attach button entirely when provided.\n   */\n  leadingActions?: ReactNode;\n  /**\n   * Slot on the bottom-right (e.g. model selector). Send/stop is appended after this.\n   */\n  trailingActions?: ReactNode;\n  /**\n   * Optional attach-file callback. If omitted (and `leadingActions` is also\n   * omitted), no attach button is rendered. This avoids fake affordances per\n   * Quality Gate §7.\n   */\n  onAttach?: () => void;\n  /**\n   * Optional voice-input callback. If omitted, no mic button is rendered.\n   * Same rationale as `onAttach`.\n   */\n  onVoiceInput?: () => void;\n  /**\n   * Accessible label for the textarea. Falls back to a mode-aware default.\n   */\n  textareaLabel?: string;\n  /**\n   * Textarea placeholder. Defaults change by mode.\n   */\n  placeholder?: string;\n  /**\n   * Extra textarea props (rows, maxLength…).\n   */\n  textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"value\" | \"onChange\">;\n}\n\nconst defaultPlaceholder: Record<ComposerMode, string> = {\n  chat: \"How can I help you today?\",\n  code: \"Type / for commands\",\n  infra: \"Ask about deploys, metrics, env, or rollback…\",\n};\n\nconst defaultTextareaLabel: Record<ComposerMode, string> = {\n  chat: \"Chat message\",\n  code: \"Code prompt\",\n  infra: \"Infra command\",\n};\n\n/**\n * ChatComposer — message input area, shared by Chat / Code / Infra modes.\n *\n * Visual:\n *   - chat / infra → soft card with violet ring on focus, generous padding\n *   - code          → compact dense form with mono font, slash prefix hint\n *\n * Stateless: caller controls `value` + handles `onSubmit`. Submit fires on Enter\n * (without Shift). Shift+Enter inserts a newline.\n *\n * Optional affordances (mic, attach) are opt-in via `onVoiceInput` / `onAttach`\n * — Quality Gate §7 forbids rendering fake controls without behavior.\n */\nconst ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(\n  (\n    {\n      className,\n      mode = \"chat\",\n      value,\n      onValueChange,\n      onSubmit,\n      running = false,\n      onStop,\n      contextSlot,\n      attachmentsSlot,\n      leadingActions,\n      trailingActions,\n      onAttach,\n      onVoiceInput,\n      textareaLabel,\n      placeholder,\n      textareaProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleSubmit = (e: FormEvent) => {\n      e.preventDefault();\n      if (running) return;\n      if (!value.trim()) return;\n      onSubmit?.(value);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        if (running) return;\n        if (!value.trim()) return;\n        onSubmit?.(value);\n      }\n    };\n\n    const isCode = mode === \"code\";\n\n    return (\n      <form\n        ref={ref}\n        onSubmit={handleSubmit}\n        className={cn(\n          \"rounded-2xl border bg-card text-card-foreground transition-shadow\",\n          \"focus-within:border-primary/60 focus-within:shadow-glow\",\n          isCode && \"rounded-xl shadow-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {contextSlot ? (\n          <div className=\"border-border/40 border-b px-3 pt-3\">{contextSlot}</div>\n        ) : null}\n\n        {attachmentsSlot ? (\n          <div className=\"flex flex-wrap gap-2 px-4 pt-3\">{attachmentsSlot}</div>\n        ) : null}\n\n        <textarea\n          value={value}\n          onChange={(e) => onValueChange(e.target.value)}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder ?? defaultPlaceholder[mode]}\n          aria-label={textareaLabel ?? defaultTextareaLabel[mode]}\n          rows={isCode ? 1 : 2}\n          {...textareaProps}\n          className={cn(\n            \"w-full resize-none bg-transparent px-4 py-3\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n            isCode ? \"font-mono text-code-md\" : \"min-h-[3.5rem] font-sans text-body-md\",\n            textareaProps?.className,\n          )}\n        />\n\n        <div\n          className={cn(\n            \"flex items-center justify-between gap-2 border-border/40 border-t px-3 py-2\",\n          )}\n        >\n          <div className=\"flex items-center gap-1\">\n            {leadingActions !== undefined ? (\n              leadingActions\n            ) : onAttach ? (\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                type=\"button\"\n                onClick={onAttach}\n                aria-label=\"Attach file\"\n              >\n                <Paperclip />\n              </Button>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {trailingActions}\n            {onVoiceInput ? (\n              <Button\n                size=\"icon\"\n                variant=\"ghost\"\n                type=\"button\"\n                onClick={onVoiceInput}\n                aria-label=\"Voice input\"\n              >\n                <Mic />\n              </Button>\n            ) : null}\n            {running ? (\n              <Button\n                type=\"button\"\n                onClick={onStop}\n                size=\"icon\"\n                variant=\"destructive\"\n                aria-label=\"Stop generation\"\n              >\n                <Square />\n              </Button>\n            ) : (\n              <Button type=\"submit\" size=\"icon\" disabled={!value.trim()} aria-label=\"Send message\">\n                <Send />\n              </Button>\n            )}\n          </div>\n        </div>\n      </form>\n    );\n  },\n);\nChatComposer.displayName = \"ChatComposer\";\n\nexport { ChatComposer };\n"
+    }
+  ]
+}

package/registry/r/chat-message.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chat-message",
+  "type": "registry:ui",
+  "title": "ChatMessage",
+  "description": "Single chat turn rendered as user bubble, assistant card, or system callout with accent border.",
+  "dependencies": [],
+  "registryDependencies": [
+    "chat-types",
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/chat-message/chat-message.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/chat-message.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { Message } from \"@/types/chat\";\n\ninterface ChatMessageProps extends HTMLAttributes<HTMLElement> {\n  message: Message;\n  /**\n   * Optional avatar slot rendered before assistant/user content.\n   */\n  avatar?: ReactNode;\n  /**\n   * Optional toolbar (copy, regenerate, etc.) rendered after the content.\n   */\n  actions?: ReactNode;\n}\n\n/**\n * ChatMessage — single chat turn.\n *\n * Visual:\n *   - user      → soft surface bubble aligned right, max-width 70%\n *   - assistant → card with violet accent border-left + display-font title for model + body\n *   - system    → muted callout with accent-deep border\n */\nconst ChatMessage = forwardRef<HTMLElement, ChatMessageProps>(\n  ({ className, message, avatar, actions, ...props }, ref) => {\n    if (message.role === \"user\") {\n      return (\n        <article\n          ref={ref}\n          className={cn(\"flex justify-end gap-3\", className)}\n          aria-label=\"user message\"\n          {...props}\n        >\n          <div\n            className={cn(\n              \"max-w-[70%] rounded-2xl rounded-tr-md border border-border/40 bg-secondary\",\n              \"px-4 py-3 text-body-md text-secondary-foreground\",\n            )}\n          >\n            {message.content}\n            {message.timestamp ? (\n              <p className=\"mt-1 text-right font-mono text-label text-muted-foreground\">\n                {message.timestamp}\n              </p>\n            ) : null}\n          </div>\n          {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        </article>\n      );\n    }\n\n    if (message.role === \"system\") {\n      return (\n        <article\n          ref={ref}\n          className={cn(\n            \"rounded-lg border border-accent-deep/40 border-l-4 bg-accent/10 px-4 py-2\",\n            \"text-body-sm text-foreground\",\n            className,\n          )}\n          aria-label=\"system message\"\n          {...props}\n        >\n          {message.content}\n        </article>\n      );\n    }\n\n    return (\n      <article\n        ref={ref}\n        className={cn(\"flex gap-3\", className)}\n        aria-label=\"assistant message\"\n        {...props}\n      >\n        {avatar ? <div className=\"shrink-0\">{avatar}</div> : null}\n        <div\n          className={cn(\n            \"min-w-0 flex-1 rounded-2xl rounded-tl-md border border-border/40 border-l-2 border-l-primary\",\n            \"bg-card px-5 py-4 shadow-sm\",\n          )}\n        >\n          <header className=\"mb-2 flex items-center justify-between gap-3\">\n            {message.model ? (\n              <span className=\"font-mono text-label-caps text-primary uppercase tracking-wider\">\n                {message.model}\n              </span>\n            ) : (\n              <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Assistant\n              </span>\n            )}\n            {message.timestamp ? (\n              <span className=\"font-mono text-label text-muted-foreground\">\n                {message.timestamp}\n              </span>\n            ) : null}\n          </header>\n          <div className=\"text-body-md text-foreground leading-relaxed\">{message.content}</div>\n          {actions ? <div className=\"mt-3 flex items-center gap-1\">{actions}</div> : null}\n        </div>\n      </article>\n    );\n  },\n);\nChatMessage.displayName = \"ChatMessage\";\n\nexport { ChatMessage };\n"
+    }
+  ]
+}

package/registry/r/chat-thread.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chat-thread",
+  "type": "registry:ui",
+  "title": "ChatThread",
+  "description": "Simple vertical container that applies spacing + scroll.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/chat-thread/chat-thread.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/chat-thread.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { LiveRegionProvider } from \"@/lib/live-region-context\";\n\n/**\n * ChatThread — simple vertical container that applies spacing + scroll.\n *\n * No virtualization or stickiness. Wrap with your own scroller for long threads.\n *\n * T4.1 (MF-4): declares the outer live region and wraps children in\n * LiveRegionProvider so nested AgentStreaming / AgentErrorCard / Skeleton\n * don't add their own aria-live (double-announcement avoided).\n */\nconst ChatThread = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <LiveRegionProvider value={true}>\n      <div\n        ref={ref}\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions\"\n        className={cn(\"flex flex-col gap-6\", className)}\n        {...props}\n      />\n    </LiveRegionProvider>\n  ),\n);\nChatThread.displayName = \"ChatThread\";\n\nexport { ChatThread };\n"
+    }
+  ]
+}

package/registry/r/chat-types.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chat-types",
+  "type": "registry:lib",
+  "title": "Theo UI chat types",
+  "description": "Shared TypeScript types for chat messages, roles, and attachments.",
+  "files": [
+    {
+      "path": "types/chat.ts",
+      "type": "registry:lib",
+      "target": "types/chat.ts",
+      "content": "import type { ReactNode } from \"react\";\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nexport interface Attachment {\n  id: string;\n  name: string;\n  size?: string;\n  type?: string;\n}\n\nexport interface Message {\n  id: string;\n  role: MessageRole;\n  content: string | ReactNode;\n  timestamp?: string;\n  /**\n   * Model that produced this message (assistant role only).\n   * e.g. \"Opus 4.6\", \"Sonnet 4.6\", \"GPT-5.4\".\n   */\n  model?: string;\n  attachments?: Attachment[];\n}\n"
+    }
+  ]
+}

package/registry/r/checkbox.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "type": "registry:ui",
+  "title": "Checkbox",
+  "description": "Built on Radix Checkbox — accessible binary control with focus ring and indeterminate state support.",
+  "dependencies": [
+    "@radix-ui/react-checkbox",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/checkbox/checkbox.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/checkbox.tsx",
+      "content": "import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Checkbox — built on Radix Checkbox.\n *\n * Supports tri-state via `checked=\"indeterminate\"`. Violet fill when on,\n * border-only when off. Themed via tokens (--primary, --background).\n */\nconst Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer size-4 shrink-0 rounded-sm border border-border bg-card\",\n      \"transition-[background-color,border-color,box-shadow] duration-base ease-out-soft\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n      {props.checked === \"indeterminate\" ? (\n        <Minus className=\"size-3.5\" aria-hidden=\"true\" strokeWidth={3} />\n      ) : (\n        <Check className=\"size-3.5\" aria-hidden=\"true\" strokeWidth={3} />\n      )}\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"
+    }
+  ]
+}

package/registry/r/cn.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cn",
+  "type": "registry:lib",
+  "title": "cn (Tailwind class merger)",
+  "description": "Merge Tailwind classes with conflict resolution.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "lib/cn.ts",
+      "type": "registry:lib",
+      "target": "lib/cn.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge Tailwind classes with conflict resolution.\n * Standard utility across all @usetheo/ui components.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}

package/registry/r/command-palette.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command-palette",
+  "type": "registry:ui",
+  "title": "CommandPalette",
+  "description": "Cmd+K-style global launcher with arrow-key navigation, fuzzy ranking, and Enter/Escape behavior — built on cmdk + Theo Dialog.",
+  "dependencies": [
+    "cmdk",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "dialog",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/composites/command-palette/command-palette.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/command-palette.tsx",
+      "content": "import { Command as CommandPrimitive } from \"cmdk\";\nimport { ChevronRight, Search } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport { Dialog } from \"@/components/ui/dialog\";\n\nexport interface CommandItem {\n  id: string;\n  label: ReactNode;\n  /** Optional secondary line (path, hint, shortcut). */\n  hint?: ReactNode;\n  /** Optional group name. Items with the same group are visually grouped. */\n  group?: string;\n  /** Optional icon. */\n  icon?: IconComponent;\n  /** Optional searchable plain-text used by the cmdk ranker. Falls back to `label` when string. */\n  searchable?: string;\n}\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  items: CommandItem[];\n  onSelect: (id: string) => void;\n  placeholder?: string;\n  emptyMessage?: ReactNode;\n  /**\n   * Optional custom filter score (0 = no match, > 0 = match). Receives the\n   * `value` (the item's searchable text) and the current `search` query.\n   * Defaults to cmdk's built-in fuzzy ranker which prioritizes substring +\n   * word-boundary + consecutive matches.\n   */\n  filter?: (value: string, search: string) => number;\n}\n\nconst defaultEmpty = \"No results.\";\n\n/**\n * CommandPalette — Cmd+K-style global launcher with full keyboard navigation.\n *\n * Built on `cmdk` (the de-facto shadcn pattern) + Theo Dialog. Provides\n * out-of-the-box: ArrowUp/ArrowDown navigation, Enter selection, Escape close,\n * Home/End, active-item highlight via `data-selected`, and fuzzy ranking.\n *\n * Stateless: caller owns `open` / `onOpenChange` / `items`. Selecting an item\n * fires `onSelect(id)` and closes the dialog.\n */\nfunction CommandPalette({\n  open,\n  onOpenChange,\n  items,\n  onSelect,\n  placeholder = \"Type a command or search…\",\n  emptyMessage = defaultEmpty,\n  filter,\n}: CommandPaletteProps) {\n  const [search, setSearch] = useState(\"\");\n\n  const groups = useMemo(() => {\n    const map = new Map<string, CommandItem[]>();\n    for (const item of items) {\n      const key = item.group ?? \"\";\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)?.push(item);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const handleSelect = (id: string) => {\n    onSelect(id);\n    onOpenChange(false);\n    setSearch(\"\");\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content className=\"max-w-xl p-0\" hideCloseButton>\n        <Dialog.Title className=\"sr-only\">Command palette</Dialog.Title>\n        <Dialog.Description className=\"sr-only\">\n          Type to search commands. Use arrow keys to navigate, Enter to select, Escape to close.\n        </Dialog.Description>\n        <CommandPrimitive label=\"Command palette\" shouldFilter {...(filter ? { filter } : {})}>\n          <div className=\"flex items-center gap-2 border-border/40 border-b px-4 py-3\">\n            <Search className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n            <CommandPrimitive.Input\n              value={search}\n              onValueChange={setSearch}\n              placeholder={placeholder}\n              className={cn(\n                \"flex-1 bg-transparent\",\n                \"font-sans text-body-md text-foreground placeholder:text-muted-foreground\",\n                \"focus:outline-none\",\n              )}\n            />\n            <span className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-label text-muted-foreground\">\n              ⌘K\n            </span>\n          </div>\n          <CommandPrimitive.List className=\"max-h-[420px] overflow-y-auto p-1\">\n            <CommandPrimitive.Empty className=\"px-3 py-6 text-center text-body-sm text-muted-foreground\">\n              {emptyMessage}\n            </CommandPrimitive.Empty>\n            {groups.map(([groupName, list]) => (\n              <CommandPrimitive.Group\n                key={groupName || \"default\"}\n                heading={groupName || undefined}\n                className={cn(\n                  \"[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1\",\n                  \"[&_[cmdk-group-heading]]:font-sans [&_[cmdk-group-heading]]:text-label-caps\",\n                  \"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\n                )}\n              >\n                {list.map((item) => {\n                  const Icon = item.icon;\n                  const value =\n                    item.searchable ?? (typeof item.label === \"string\" ? item.label : item.id);\n                  return (\n                    <CommandPrimitive.Item\n                      key={item.id}\n                      value={value}\n                      onSelect={() => handleSelect(item.id)}\n                      className={cn(\n                        \"flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left\",\n                        \"transition-colors hover:bg-muted\",\n                        \"data-[selected=true]:bg-muted\",\n                        \"focus-visible:outline-none\",\n                      )}\n                    >\n                      {Icon ? <Icon className=\"size-4 text-primary\" /> : null}\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"truncate text-body-sm text-foreground\">{item.label}</p>\n                        {item.hint ? (\n                          <p className=\"truncate font-mono text-label text-muted-foreground\">\n                            {item.hint}\n                          </p>\n                        ) : null}\n                      </div>\n                      <ChevronRight className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n                    </CommandPrimitive.Item>\n                  );\n                })}\n              </CommandPrimitive.Group>\n            ))}\n          </CommandPrimitive.List>\n        </CommandPrimitive>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { CommandPalette };\n"
+    }
+  ]
+}

package/registry/r/context-card.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-card",
+  "type": "registry:ui",
+  "title": "ContextCard",
+  "description": "Generic \"informational\" card for the right inspector.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/context-card/context-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/context-card.tsx",
+      "content": "import { BookOpen } 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\ninterface ContextCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Optional illustration slot (rendered above title). */\n  illustration?: ReactNode;\n  /** Icon for the title row — used when illustration is omitted. */\n  icon?: IconComponent;\n}\n\n/**\n * ContextCard — generic \"informational\" card for the right inspector.\n *\n * Used as the \"Contexto\" card on Files screens: illustration / icon, title,\n * short description. Inert by design — no actions.\n */\nconst ContextCard = forwardRef<HTMLElement, ContextCardProps>(\n  ({ className, title, description, illustration, icon, ...props }, ref) => {\n    const Icon = icon ?? BookOpen;\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3 rounded-xl border border-border/40 bg-muted/30 p-4\", className)}\n        {...props}\n      >\n        {illustration ? (\n          <div className=\"flex justify-center\">{illustration}</div>\n        ) : (\n          <Icon className=\"size-5 text-primary\" aria-hidden=\"true\" />\n        )}\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      </section>\n    );\n  },\n);\nContextCard.displayName = \"ContextCard\";\n\nexport { ContextCard };\n"
+    }
+  ]
+}

package/registry/r/context-window-bar.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "context-window-bar",
+  "type": "registry:ui",
+  "title": "ContextWindowBar",
+  "description": "Shows how much of the model's context window has been",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/context-window-bar/context-window-bar.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/context-window-bar.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ContextWindowBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tokens currently used in the context window. */\n  used: number;\n  /** Model's total context capacity (e.g. 200_000, 1_000_000). */\n  total: number;\n  /** Optional secondary label rendered on the right (e.g. model name). */\n  trailing?: ReactNode;\n  /** Optional title shown above the bar. */\n  label?: ReactNode;\n  /** Compact mode hides numbers and label; just the bar. */\n  compact?: boolean;\n  /**\n   * Override warning thresholds (0..1). Defaults: warn 0.7, danger 0.9.\n   */\n  warnAt?: number;\n  dangerAt?: number;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * ContextWindowBar — shows how much of the model's context window has been\n * consumed. Color transitions: success → warning → destructive past thresholds.\n *\n * Critical for transparency: a user should always be able to glance at this\n * and know if the conversation is about to hit the cap.\n */\nconst ContextWindowBar = forwardRef<HTMLDivElement, ContextWindowBarProps>(\n  (\n    {\n      className,\n      used,\n      total,\n      trailing,\n      label = \"Context\",\n      compact,\n      warnAt = 0.7,\n      dangerAt = 0.9,\n      ...props\n    },\n    ref,\n  ) => {\n    const ratio = Math.max(0, Math.min(1, used / total));\n    const tone = ratio >= dangerAt ? \"destructive\" : ratio >= warnAt ? \"warning\" : \"primary\";\n    const percent = Math.round(ratio * 100);\n\n    const barColor = {\n      primary: \"bg-primary\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    }[tone];\n\n    const textColor = {\n      primary: \"text-foreground\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n    }[tone];\n\n    return (\n      <div ref={ref} className={cn(\"grid gap-1.5\", className)} {...props}>\n        {!compact ? (\n          <div className=\"flex items-baseline justify-between gap-2\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {label}\n            </span>\n            <span className={cn(\"font-mono text-body-sm tabular-nums\", textColor)}>\n              {formatTokens(used)} / {formatTokens(total)}{\" \"}\n              <span className=\"opacity-60\">({percent}%)</span>\n            </span>\n          </div>\n        ) : null}\n        <div\n          className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n          role=\"progressbar\"\n          tabIndex={-1}\n          aria-valuenow={used}\n          aria-valuemin={0}\n          aria-valuemax={total}\n          aria-label={`${percent}% of context window used`}\n        >\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width,background-color] duration-base ease-out-soft\",\n              barColor,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        </div>\n        {trailing ? (\n          <div className=\"font-mono text-label text-muted-foreground\">{trailing}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nContextWindowBar.displayName = \"ContextWindowBar\";\n\nexport { ContextWindowBar };\n"
+    }
+  ]
+}

package/registry/r/cost-meter.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cost-meter",
+  "type": "registry:ui",
+  "title": "CostMeter",
+  "description": "Gauge for token spend that visualizes used vs. budget with color-coded states.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/cost-meter/cost-meter.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/cost-meter.tsx",
+      "content": "import { Coins, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface CostMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current cost in USD. */\n  cost: number;\n  /** Optional monthly budget; renders progress bar when present. */\n  budget?: number;\n  /** Optional title (e.g. \"This session\", \"Monthly\"). */\n  title?: ReactNode;\n  /** Optional delta vs previous period. */\n  delta?: { value: number; period: string };\n  /** Compact mode — single-line summary. */\n  compact?: boolean;\n}\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;\n\n/**\n * CostMeter — gauge for token spend. Two visuals:\n *   - card: title + big number + optional progress bar + optional delta.\n *   - compact: chip \"Coins $4.20\" for nav bars.\n */\nconst CostMeter = forwardRef<HTMLDivElement, CostMeterProps>(\n  ({ className, cost, budget, title = \"Spend\", delta, compact, ...props }, ref) => {\n    if (compact) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            \"inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1\",\n            \"font-mono text-label\",\n            className,\n          )}\n          {...props}\n        >\n          <Coins className=\"size-3 text-primary\" aria-hidden=\"true\" />\n          <span className=\"text-foreground tabular-nums\">{formatUsd(cost)}</span>\n          {budget ? <span className=\"text-muted-foreground\">/ {formatUsd(budget)}</span> : null}\n        </div>\n      );\n    }\n\n    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;\n    const percent = Math.round(ratio * 100);\n    const overBudget = budget !== undefined && cost > budget;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"grid gap-2 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between\">\n          <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n          {delta ? (\n            <span\n              className={cn(\n                \"inline-flex items-center gap-1 font-mono text-body-sm tabular-nums\",\n                delta.value >= 0 ? \"text-warning\" : \"text-success\",\n              )}\n            >\n              {delta.value >= 0 ? (\n                <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n              ) : (\n                <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n              )}\n              {delta.value >= 0 ? \"+\" : \"\"}\n              {formatUsd(Math.abs(delta.value))}{\" \"}\n              <span className=\"text-muted-foreground\">{delta.period}</span>\n            </span>\n          ) : null}\n        </header>\n        <div className=\"flex items-baseline gap-1.5\">\n          <span className=\"font-bold font-display text-display-md text-foreground tabular-nums leading-none\">\n            {formatUsd(cost)}\n          </span>\n          {budget !== undefined ? (\n            <span className=\"font-mono text-body-sm text-muted-foreground\">\n              of {formatUsd(budget)}\n            </span>\n          ) : null}\n        </div>\n        {budget !== undefined ? (\n          <div className=\"grid gap-1\">\n            <div\n              className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n              role=\"progressbar\"\n              tabIndex={-1}\n              aria-valuenow={percent}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            >\n              <div\n                className={cn(\n                  \"h-full rounded-full transition-[width,background-color]\",\n                  overBudget ? \"bg-destructive\" : ratio > 0.75 ? \"bg-warning\" : \"bg-primary\",\n                )}\n                style={{ width: `${Math.min(100, percent)}%` }}\n              />\n            </div>\n            <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n              {percent}% of budget {overBudget ? \"· over!\" : \"used\"}\n            </span>\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nCostMeter.displayName = \"CostMeter\";\n\nexport { CostMeter };\n"
+    }
+  ]
+}

package/registry/r/created-files-card.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "created-files-card",
+  "type": "registry:ui",
+  "title": "CreatedFilesCard",
+  "description": "Surfaces files produced by a completed task.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/created-files-card/created-files-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/created-files-card.tsx",
+      "content": "import { Cloud, FileSpreadsheet, Folder } 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 CreatedFile {\n  id: string;\n  name: string;\n  /** Optional size for display, e.g. \"42 KB\". */\n  size?: string;\n  /** Icon override. */\n  icon?: IconComponent;\n  /** Optional destination metadata (e.g. \"Google Drive · /Reports\"). */\n  destination?: ReactNode;\n  /** Optional URL to open the file. */\n  href?: string;\n}\n\ninterface CreatedFilesCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  files: CreatedFile[];\n  /**\n   * Optional CTA shown at the bottom (e.g. \"Move to Google Drive\").\n   */\n  cta?: ReactNode;\n}\n\n/**\n * CreatedFilesCard — surfaces files produced by a completed task.\n *\n * From WIREMOCKS §2: each file is a card-like row with icon + name + destination.\n * Used as social proof of delivery in Task Completed views.\n */\nconst CreatedFilesCard = forwardRef<HTMLElement, CreatedFilesCardProps>(\n  ({ className, title = \"Files created\", files, cta, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"rounded-xl border border-primary/40 bg-primary/5 p-4\", className)}\n      {...props}\n    >\n      <header className=\"mb-3 flex items-center gap-2\">\n        <Cloud className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n      </header>\n      <ul className=\"grid gap-2\">\n        {files.map((file) => {\n          const Icon = file.icon ?? FileSpreadsheet;\n          const RowTag = file.href ? \"a\" : \"div\";\n          return (\n            <li key={file.id}>\n              <RowTag\n                href={file.href}\n                target={file.href ? \"_blank\" : undefined}\n                rel={file.href ? \"noreferrer\" : undefined}\n                className={cn(\n                  \"flex items-center gap-3 rounded-md border border-border/40 bg-card px-3 py-2\",\n                  file.href &&\n                    \"transition-colors hover:border-primary/40 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                )}\n              >\n                <Icon className=\"size-5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate font-mono text-code-md text-foreground\">{file.name}</p>\n                  {file.destination ? (\n                    <p className=\"flex items-center gap-1 truncate text-body-sm text-muted-foreground\">\n                      <Folder className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {file.destination}\n                    </p>\n                  ) : null}\n                </div>\n                {file.size ? (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">{file.size}</span>\n                ) : null}\n              </RowTag>\n            </li>\n          );\n        })}\n      </ul>\n      {cta ? <div className=\"mt-3 flex justify-end\">{cta}</div> : null}\n    </section>\n  ),\n);\nCreatedFilesCard.displayName = \"CreatedFilesCard\";\n\nexport { CreatedFilesCard };\n"
+    }
+  ]
+}

package/registry/r/cron-job-card.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cron-job-card",
+  "type": "registry:ui",
+  "title": "CronJobCard",
+  "description": "One scheduled agent job — shows schedule, next run, last status, and toggle / edit actions.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/cron-job-card/cron-job-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/cron-job-card.tsx",
+      "content": "import { Clock, Play, Square, Trash2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type CronJobStatus = \"idle\" | \"running\" | \"failed\" | \"disabled\";\n\nexport interface CronJob {\n  id: string;\n  /** Human-readable job name. */\n  name: string;\n  /** Cron expression — e.g. every 4 hours. */\n  schedule: string;\n  /** What gets run (prompt or command). */\n  prompt: string;\n  status: CronJobStatus;\n  /** ISO/string timestamp of last run. */\n  lastRun?: string;\n  /** ISO/string timestamp of next run. */\n  nextRun?: string;\n  /** Optional last-run result line. */\n  lastResult?: ReactNode;\n}\n\ninterface CronJobCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onToggle\"> {\n  job: CronJob;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\nconst STATUS_CONFIG: Record<CronJobStatus, { label: string; class: string }> = {\n  idle: { label: \"Scheduled\", class: \"border-success/40 bg-success/10 text-success\" },\n  running: {\n    label: \"Running\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  failed: {\n    label: \"Last run failed\",\n    class: \"border-destructive/40 bg-destructive/10 text-destructive\",\n  },\n  disabled: { label: \"Disabled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * CronJobCard — one scheduled agent job. Shows cron expression, prompt,\n * status, last/next run. Inline actions: run now, pause, delete.\n */\nconst CronJobCard = forwardRef<HTMLElement, CronJobCardProps>(\n  ({ className, job, onRunNow, onToggle, onRemove, ...props }, ref) => {\n    const cfg = STATUS_CONFIG[job.status];\n    const enabled = job.status !== \"disabled\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4\",\n          job.status === \"disabled\" && \"opacity-70\",\n          className,\n        )}\n        {...props}\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\">{job.name}</h4>\n            <p className=\"mt-0.5 inline-flex items-center gap-2 font-mono text-code-sm text-muted-foreground\">\n              <Clock className=\"size-3\" aria-hidden=\"true\" /> {job.schedule}\n            </p>\n          </div>\n          <span\n            className={cn(\n              \"inline-flex 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        <p className=\"line-clamp-2 rounded-md bg-muted/60 px-3 py-2 font-mono text-code-sm text-foreground\">\n          {job.prompt}\n        </p>\n\n        <div className=\"grid grid-cols-2 gap-3 font-mono text-label text-muted-foreground\">\n          <span>\n            <span className=\"text-muted-foreground/60\">last:</span> {job.lastRun ?? \"never\"}\n          </span>\n          <span>\n            <span className=\"text-muted-foreground/60\">next:</span> {job.nextRun ?? \"—\"}\n          </span>\n        </div>\n\n        {job.lastResult ? (\n          <p className=\"text-body-sm text-muted-foreground\">{job.lastResult}</p>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-1.5\">\n          {onRunNow ? (\n            <button\n              type=\"button\"\n              onClick={() => onRunNow(job.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              <Play className=\"size-3\" /> Run now\n            </button>\n          ) : null}\n          {onToggle ? (\n            <button\n              type=\"button\"\n              onClick={() => onToggle(job.id, !enabled)}\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              <Square className=\"size-3\" /> {enabled ? \"Pause\" : \"Enable\"}\n            </button>\n          ) : null}\n          {onRemove ? (\n            <button\n              type=\"button\"\n              onClick={() => onRemove(job.id)}\n              aria-label={`Remove ${job.name}`}\n              className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Trash2 className=\"size-3.5\" />\n            </button>\n          ) : null}\n        </footer>\n      </article>\n    );\n  },\n);\nCronJobCard.displayName = \"CronJobCard\";\n\nexport { CronJobCard };\n"
+    }
+  ]
+}

package/registry/r/cron-jobs-list.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cron-jobs-list",
+  "type": "registry:block",
+  "title": "CronJobsList",
+  "description": "Grid of CronJobCards with a sticky \"new job\" action.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "cron-job-card",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/cron-jobs-list/cron-jobs-list.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/cron-jobs-list.tsx",
+      "content": "import { Plus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { type CronJob, CronJobCard } from \"@/components/ui/cron-job-card\";\n\ninterface CronJobsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  jobs: CronJob[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * CronJobsList — grid of CronJobCards with a sticky \"new job\" action.\n */\nconst CronJobsList = forwardRef<HTMLDivElement, CronJobsListProps>(\n  (\n    { className, jobs, title = \"Scheduled jobs\", onAdd, onRunNow, onToggle, onRemove, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"grid gap-3\", className)}\n      aria-label=\"Scheduled agent jobs\"\n      {...props}\n    >\n      <header className=\"flex items-baseline justify-between\">\n        {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : <span />}\n        <div className=\"flex items-center gap-3\">\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {jobs.length} {jobs.length === 1 ? \"job\" : \"jobs\"}\n          </span>\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\" /> New job\n            </button>\n          ) : null}\n        </div>\n      </header>\n      {jobs.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 scheduled jobs yet.\n        </p>\n      ) : (\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n          {jobs.map((job) => (\n            <CronJobCard\n              key={job.id}\n              job={job}\n              {...(onRunNow ? { onRunNow } : {})}\n              {...(onToggle ? { onToggle } : {})}\n              {...(onRemove ? { onRemove } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  ),\n);\nCronJobsList.displayName = \"CronJobsList\";\n\nexport { CronJobsList };\n"
+    }
+  ]
+}

package/registry/r/deployment-row.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "deployment-row",
+  "type": "registry:block",
+  "title": "DeploymentRow",
+  "description": "One row in a deployment list (table-ish layout).",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/deployment-row/deployment-row.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/deployment-row.tsx",
+      "content": "import { GitCommit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport type DeploymentStatus =\n  | \"queued\"\n  | \"building\"\n  | \"deploying\"\n  | \"live\"\n  | \"failed\"\n  | \"cancelled\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\n\nconst statusToDotTone: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\n\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nconst isAnimated = (status: DeploymentStatus) =>\n  status === \"building\" || status === \"deploying\" || status === \"queued\";\n\nexport interface Deployment {\n  id: string;\n  status: DeploymentStatus;\n  environment: string;\n  branch: string;\n  commitSha: string;\n  commitMessage: string;\n  author?: { name: string; avatarUrl?: string };\n  duration?: string;\n  timeAgo: string;\n}\n\ninterface DeploymentRowProps extends HTMLAttributes<HTMLDivElement> {\n  deployment: Deployment;\n  actions?: ReactNode;\n}\n\n/**\n * DeploymentRow — one row in a deployment list (table-ish layout).\n *\n * Inspired by Vercel/Railway deployment lists. Composes Badge + Badge.Dot for status,\n * mono font for SHA/branch, muted-foreground for metadata.\n */\nconst DeploymentRow = forwardRef<HTMLDivElement, DeploymentRowProps>(\n  ({ className, deployment, actions, ...props }, ref) => {\n    const variant = statusToVariant[deployment.status];\n    const tone = statusToDotTone[deployment.status];\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-center gap-4 border-border/40 border-b px-4 py-3\",\n          \"last:border-b-0\",\n          \"transition-colors hover:bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        <Badge variant={variant} className=\"min-w-[88px] justify-center\">\n          <Badge.Dot tone={tone} pulse={isAnimated(deployment.status)} />\n          {statusLabels[deployment.status]}\n        </Badge>\n\n        <div className=\"min-w-0\">\n          <p className=\"truncate font-medium text-body-sm text-foreground\">\n            {deployment.commitMessage}\n          </p>\n          <p className=\"mt-0.5 flex flex-wrap items-center gap-2 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{deployment.environment}</span>\n            <span aria-hidden=\"true\">·</span>\n            <span className=\"inline-flex items-center gap-1 font-mono text-code-sm\">\n              <GitCommit className=\"size-3\" /> {deployment.commitSha.slice(0, 7)}\n            </span>\n            <span aria-hidden=\"true\">·</span>\n            <span className=\"font-mono text-code-sm\">{deployment.branch}</span>\n            {deployment.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {deployment.author.name}</span>\n              </>\n            ) : null}\n            {deployment.duration ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span className=\"font-mono text-code-sm\">{deployment.duration}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>{deployment.timeAgo}</span>\n          </p>\n        </div>\n\n        {actions ? <div className=\"flex items-center gap-1\">{actions}</div> : null}\n      </div>\n    );\n  },\n);\nDeploymentRow.displayName = \"DeploymentRow\";\n\nexport { DeploymentRow };\n"
+    }
+  ]
+}