@usetheo/ui 0.1.0-next.0

package/registry/r/rule-card.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "rule-card",
+  "type": "registry:ui",
+  "title": "RuleCard",
+  "description": "Single Rule row in the Rules list.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "rule-types",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/rule-card/rule-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/rule-card.tsx",
+      "content": "import { Globe, Pencil, Trash2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { Rule, RuleScope, RuleState } from \"@/types/rule\";\n\n/**\n * RuleCard — single Rule row in the Rules list. Renders title, scope/state\n * badges, optional tag chips, a truncated body preview, and edit/toggle/delete\n * actions in the corner.\n */\n\nconst SCOPE_LABEL: Record<RuleScope, string> = {\n  global: \"Global\",\n  project: \"Project\",\n};\n\nconst SCOPE_CLASS: Record<RuleScope, string> = {\n  global: \"bg-primary/15 text-primary\",\n  project: \"bg-accent/15 text-accent\",\n};\n\ninterface RuleCardProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"onSelect\" | \"onToggle\"> {\n  rule: Rule;\n  /** Click on the card body — typically opens detail/edit view. */\n  onSelect?: (id: string) => void;\n  /** Click on the edit pencil. Defaults to onSelect if omitted. */\n  onEdit?: (id: string) => void;\n  /** Click on the trash icon. Renders the icon only when provided. */\n  onDelete?: (id: string) => void;\n  /** Toggle enabled/disabled. Renders the switch-like dot only when provided. */\n  onToggle?: (id: string, next: RuleState) => void;\n}\n\nconst RuleCard = forwardRef<HTMLElement, RuleCardProps>(\n  ({ className, rule, onSelect, onEdit, onDelete, onToggle, ...props }, ref) => {\n    const handleEdit = (e: MouseEvent) => {\n      e.stopPropagation();\n      (onEdit ?? onSelect)?.(rule.id);\n    };\n    const handleDelete = (e: MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(rule.id);\n    };\n    const handleToggle = (e: MouseEvent) => {\n      e.stopPropagation();\n      onToggle?.(rule.id, rule.state === \"enabled\" ? \"disabled\" : \"enabled\");\n    };\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-2 rounded-lg border border-border/40 bg-card/40 p-3\",\n          \"transition-colors duration-base ease-out-soft\",\n          onSelect && \"cursor-pointer hover:border-border hover:bg-card/70\",\n          rule.state === \"disabled\" && \"opacity-60\",\n          className,\n        )}\n        onClick={onSelect ? () => onSelect(rule.id) : undefined}\n        {...props}\n      >\n        <header className=\"flex items-start gap-2\">\n          <h4 className=\"flex-1 truncate font-display text-foreground text-title-md tracking-tight\">\n            {rule.title}\n          </h4>\n          <span\n            className={cn(\n              \"inline-flex h-5 shrink-0 items-center gap-1 rounded-md px-2 font-medium font-mono text-label tracking-tight\",\n              SCOPE_CLASS[rule.scope],\n            )}\n          >\n            <Globe className=\"size-3\" aria-hidden=\"true\" /> {SCOPE_LABEL[rule.scope]}\n          </span>\n        </header>\n        <p className=\"line-clamp-2 text-body-sm text-muted-foreground\">{rule.body}</p>\n        <footer className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex flex-wrap items-center gap-1\">\n            {rule.tags?.map((t) => (\n              <span\n                key={t}\n                className=\"inline-flex h-4 items-center rounded bg-muted px-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\"\n              >\n                {t}\n              </span>\n            ))}\n            {rule.updatedAt ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                · {rule.updatedAt}\n              </span>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            {onToggle ? (\n              <button\n                type=\"button\"\n                onClick={handleToggle}\n                aria-label={rule.state === \"enabled\" ? \"Disable rule\" : \"Enable rule\"}\n                className={cn(\n                  \"inline-flex h-6 items-center rounded-full px-2 font-mono text-label\",\n                  rule.state === \"enabled\"\n                    ? \"bg-success/15 text-success\"\n                    : \"bg-muted text-muted-foreground\",\n                )}\n              >\n                {rule.state === \"enabled\" ? \"Enabled\" : \"Disabled\"}\n              </button>\n            ) : null}\n            <button\n              type=\"button\"\n              onClick={handleEdit}\n              aria-label=\"Edit rule\"\n              className=\"grid size-6 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground\"\n            >\n              <Pencil className=\"size-3.5\" />\n            </button>\n            {onDelete ? (\n              <button\n                type=\"button\"\n                onClick={handleDelete}\n                aria-label=\"Delete rule\"\n                className=\"grid size-6 place-items-center rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive\"\n              >\n                <Trash2 className=\"size-3.5\" />\n              </button>\n            ) : null}\n          </div>\n        </footer>\n      </article>\n    );\n  },\n);\nRuleCard.displayName = \"RuleCard\";\n\nexport { RuleCard };\n"
+    }
+  ]
+}

package/registry/r/rule-editor.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "rule-editor",
+  "type": "registry:block",
+  "title": "RuleEditor",
+  "description": "Form for creating or editing a Rule (behavior instruction",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "cn",
+    "form-field",
+    "input",
+    "mode-types",
+    "rule-types",
+    "select",
+    "switch",
+    "tailwind-preset",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "components/composites/rule-editor/rule-editor.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/rule-editor.tsx",
+      "content": "import { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"@/types/mode\";\nimport type { Rule, RuleScope, RuleState } from \"@/types/rule\";\nimport { Button } from \"@/components/ui/button\";\nimport { FormField } from \"@/components/ui/form-field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select } from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * RuleEditor — form for creating or editing a Rule (behavior instruction\n * injected into the system prompt).\n */\n\ntype RuleDraft = Omit<Rule, \"id\" | \"updatedAt\"> & {\n  id?: string;\n  tags?: string[];\n};\n\ninterface RuleEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<Rule>;\n  onSave: (draft: RuleDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst SCOPES: Array<{ id: RuleScope; label: string }> = [\n  { id: \"global\", label: \"Global — applies to every session\" },\n  { id: \"project\", label: \"Project — only this workspace\" },\n];\n\nexport function RuleEditor({\n  className,\n  initial,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: RuleEditorProps) {\n  const [title, setTitle] = useState(initial?.title ?? \"\");\n  const [body, setBody] = useState(initial?.body ?? \"\");\n  const [scope, setScope] = useState<RuleScope>(initial?.scope ?? \"global\");\n  const [tagsRaw, setTagsRaw] = useState(initial?.tags?.join(\", \") ?? \"\");\n  const [enabled, setEnabled] = useState<RuleState>(initial?.state ?? \"enabled\");\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing\n  // a different rule, use the React `key` pattern at the call site:\n  //   <RuleEditor key={rule.id} initial={rule} ... />\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = title.trim().length > 0 && body.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      title: title.trim(),\n      body: body.trim(),\n      scope,\n      state: enabled,\n      tags: tagsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <FormField>\n        <FormField.Label>Title</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={title}\n            onChange={(e) => setTitle(e.target.value)}\n            placeholder=\"Always write tests before fixes\"\n            required\n          />\n        </FormField.Control>\n        <FormField.Hint>Short, imperative summary the agent will keep in memory.</FormField.Hint>\n      </FormField>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>Body (markdown)</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={body}\n            onChange={(e) => setBody(e.target.value)}\n            rows={8}\n            placeholder=\"When fixing a bug, first write a failing regression test, then the fix.\"\n            required\n            className=\"min-h-[12rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Injected into the system prompt verbatim.</FormField.Hint>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Scope</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={scope}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow Select string value against\n                // SCOPES.id before casting. Silent no-op for unknown.\n                const next = SCOPES.find((s) => s.id === v);\n                if (next) setScope(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select rule scope\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {SCOPES.map((s) => (\n                  <Select.Item key={s.id} value={s.id}>\n                    {s.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        <FormField>\n          <FormField.Label>Tags (comma-separated)</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={tagsRaw}\n              onChange={(e) => setTagsRaw(e.target.value)}\n              placeholder=\"testing, process\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (applies to every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <div className=\"flex items-center gap-3\">\n        <Switch\n          checked={enabled === \"enabled\"}\n          onCheckedChange={(v) => setEnabled(v ? \"enabled\" : \"disabled\")}\n          aria-label=\"Enabled\"\n        />\n        <span className=\"text-body-sm text-muted-foreground\">\n          {enabled === \"enabled\"\n            ? \"Enabled — agent will follow this rule.\"\n            : \"Disabled — kept but ignored.\"}\n        </span>\n      </div>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create rule\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"
+    }
+  ]
+}

package/registry/r/rule-types.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "rule-types",
+  "type": "registry:lib",
+  "title": "Theo UI rule types",
+  "description": "Shared TypeScript types for Rules — user-authored behavior instructions injected into the system prompt.",
+  "files": [
+    {
+      "path": "types/rule.ts",
+      "type": "registry:lib",
+      "target": "types/rule.ts",
+      "content": "import type { Mode } from \"@/types/mode\";\n\n/**\n * Rule — a user-authored behavior instruction injected into the system prompt.\n *\n * Equivalent to a single markdown file under `.claude/rules/` in Claude Code:\n * short imperative text the user writes once and the agent follows always.\n * Rules can be scoped (`global` = applies to every session; `project` = only\n * inside the current workspace) and toggled on/off without deletion.\n */\n\nexport type RuleScope = \"global\" | \"project\";\nexport type RuleState = \"enabled\" | \"disabled\";\n\nexport interface Rule {\n  id: string;\n  /** Short title shown in the list. */\n  title: string;\n  /** Markdown body — the actual instruction injected into the prompt. */\n  body: string;\n  /** Where this rule applies. */\n  scope: RuleScope;\n  /** Whether the rule is currently active. */\n  state: RuleState;\n  /** Optional tags for grouping (\"testing\", \"style\", \"security\"). */\n  tags?: string[];\n  /** Modes this rule applies to. Omit / empty = global (every mode). */\n  modes?: Mode[];\n  /** ISO timestamp / friendly label of last edit. */\n  updatedAt?: string;\n}\n"
+    }
+  ],
+  "registryDependencies": [
+    "mode-types"
+  ]
+}

package/registry/r/run-stats.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "run-stats",
+  "type": "registry:ui",
+  "title": "RunStats",
+  "description": "Inline metric row shown after an agent run.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/run-stats/run-stats.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/run-stats.tsx",
+      "content": "import { Clock, Coins, FileEdit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface RunStatsProps extends HTMLAttributes<HTMLDivElement> {\n  duration?: string;\n  /** Formatted token count, e.g. \"35.7k\". */\n  tokens?: string;\n  /** Number of files changed in the run. */\n  filesChanged?: number;\n}\n\n/**\n * RunStats — inline metric row shown after an agent run.\n *\n * Visual: muted bullet-separated row with clock + tokens + files-changed icons.\n * All optional — the component skips entries that aren't provided.\n */\nconst RunStats = forwardRef<HTMLDivElement, RunStatsProps>(\n  ({ className, duration, tokens, filesChanged, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex flex-wrap items-center gap-3 font-mono text-code-sm text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {duration ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Clock className=\"size-3\" aria-hidden=\"true\" /> {duration}\n        </span>\n      ) : null}\n      {tokens ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Coins className=\"size-3\" aria-hidden=\"true\" /> {tokens} tokens\n        </span>\n      ) : null}\n      {filesChanged !== undefined ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <FileEdit className=\"size-3\" aria-hidden=\"true\" /> {filesChanged} files\n        </span>\n      ) : null}\n    </div>\n  ),\n);\nRunStats.displayName = \"RunStats\";\n\nexport { RunStats };\n"
+    }
+  ]
+}

package/registry/r/running-tasks-panel.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "running-tasks-panel",
+  "type": "registry:ui",
+  "title": "RunningTasksPanel",
+  "description": "Split list of Running vs Completed tasks.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/running-tasks-panel/running-tasks-panel.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/running-tasks-panel.tsx",
+      "content": "import { Bot, CheckCircle2, Loader2, Terminal } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type TaskSource = \"agent\" | \"bash\" | \"tool\";\nexport type RunningTaskStatus = \"running\" | \"completed\" | \"failed\";\n\nexport interface RunningTaskItem {\n  id: string;\n  label: ReactNode;\n  source: TaskSource;\n  status: RunningTaskStatus;\n}\n\ninterface RunningTasksPanelProps extends HTMLAttributes<HTMLElement> {\n  tasks: RunningTaskItem[];\n}\n\nconst sourceIcon = {\n  agent: Bot,\n  bash: Terminal,\n  tool: Bot,\n} as const;\nconst sourceLabel: Record<TaskSource, string> = {\n  agent: \"Agent\",\n  bash: \"Bash\",\n  tool: \"Tool\",\n};\n\n/**\n * RunningTasksPanel — split list of Running vs Completed tasks.\n *\n * Used in the Code workspace right rail to give operational visibility into\n * what the agent is executing (foreground/background) vs what already finished.\n */\nconst RunningTasksPanel = forwardRef<HTMLElement, RunningTasksPanelProps>(\n  ({ className, tasks, ...props }, ref) => {\n    const running = tasks.filter((t) => t.status === \"running\");\n    const completed = tasks.filter((t) => t.status !== \"running\");\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card p-4\", className)} {...props}>\n        <Group title=\"Running\" empty=\"Nothing running\" items={running} />\n        {completed.length > 0 ? (\n          <div className=\"mt-4\">\n            <Group title=\"Completed\" empty=\"—\" items={completed} />\n          </div>\n        ) : null}\n      </section>\n    );\n  },\n);\nRunningTasksPanel.displayName = \"RunningTasksPanel\";\n\nfunction Group({\n  title,\n  empty,\n  items,\n}: {\n  title: string;\n  empty: ReactNode;\n  items: RunningTaskItem[];\n}) {\n  return (\n    <div>\n      <h4 className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n        {title}\n      </h4>\n      {items.length === 0 ? (\n        <p className=\"text-body-sm text-muted-foreground\">{empty}</p>\n      ) : (\n        <ul className=\"grid gap-1\">\n          {items.map((task) => {\n            const SourceIcon = sourceIcon[task.source];\n            return (\n              <li\n                key={task.id}\n                className=\"flex items-center gap-2 rounded-md px-2 py-1.5 text-body-sm\"\n              >\n                {task.status === \"running\" ? (\n                  <Loader2 className=\"size-3.5 animate-spin text-primary\" aria-label=\"running\" />\n                ) : task.status === \"completed\" ? (\n                  <CheckCircle2 className=\"size-3.5 text-success\" aria-label=\"completed\" />\n                ) : (\n                  <span className=\"size-2 rounded-full bg-destructive\" aria-label=\"failed\" />\n                )}\n                <SourceIcon\n                  className=\"size-3.5 shrink-0 text-muted-foreground\"\n                  aria-hidden=\"true\"\n                />\n                <span className=\"flex-1 truncate\">{task.label}</span>\n                <span className=\"font-mono text-label text-muted-foreground uppercase\">\n                  {sourceLabel[task.source]}\n                </span>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </div>\n  );\n}\n\nexport { RunningTasksPanel };\n"
+    }
+  ]
+}

package/registry/r/safe-href.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "safe-href",
+  "type": "registry:lib",
+  "title": "safeHref (XSS-safe URL guard)",
+  "description": "Defang javascript:/vbscript:/data:text/html URIs before rendering as <a href>. Returns undefined for dangerous protocols so the caller can render a non-link fallback.",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "lib/safe-href.ts",
+      "type": "registry:lib",
+      "target": "lib/safe-href.ts",
+      "content": "/**\n * safeHref — defang `javascript:`, `vbscript:`, and `data:text/html` URIs.\n *\n * T3.3 (Security SEC-003). When a consumer passes user-controlled data as\n * an href to one of our card composites (`ProjectCard.href`, `PreviewEnvCard.url`,\n * etc.), an attacker who controls that data can craft a `javascript:alert(...)`\n * URI that fires in the application's origin on click. This is a standard\n * component-library hardening (mitigation also documented in `SECURITY.md`).\n *\n * Returns `undefined` for dangerous protocols so the consuming component\n * can short-circuit to a non-link rendering. Returns the URL unchanged for\n * safe protocols (`http`, `https`, `mailto`, `tel`, relative paths).\n *\n * Allowed (returns input unchanged):\n *   - \"https://example.com/path?query\"\n *   - \"/internal/route\"\n *   - \"mailto:dev@usetheo.dev\"\n *   - \"tel:+15551234567\"\n *\n * Blocked (returns undefined):\n *   - \"javascript:alert(1)\" — XSS via JS execution\n *   - \" JavaScript:alert(1)\" — case-insensitive, leading whitespace\n *   - \"vbscript:msgbox(1)\" — legacy IE XSS surface (still relevant on\n *     certain enterprise envs)\n *   - \"data:text/html,...\" — inline HTML/script payloads\n */\n\nconst DANGEROUS_PROTOCOL_PATTERNS: readonly RegExp[] = [\n  /^javascript:/i,\n  /^vbscript:/i,\n  /^data:text\\/html/i,\n];\n\nexport function safeHref(url: string | null | undefined): string | undefined {\n  if (url === null || url === undefined) return undefined;\n  const trimmed = url.trim();\n  if (trimmed.length === 0) return undefined;\n  for (const pattern of DANGEROUS_PROTOCOL_PATTERNS) {\n    if (pattern.test(trimmed)) return undefined;\n  }\n  return url;\n}\n"
+    }
+  ]
+}

package/registry/r/scroll-area.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "title": "ScrollArea",
+  "description": "Custom scroller with Violet Forge styling.",
+  "dependencies": [
+    "@radix-ui/react-scroll-area"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/scroll-area/scroll-area.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/scroll-area.tsx",
+      "content": "import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * ScrollArea — custom scroller with Violet Forge styling.\n *\n * Built on Radix ScrollArea so the native scrollbar is always hidden and the\n * custom thumb stays consistent across Chrome/Firefox/Safari/macOS-trackpad.\n *\n * Visual:\n *   - track is transparent, only the thumb is visible.\n *   - thumb is `--primary` at 25% opacity by default; on hover, 45% with violet glow.\n *   - active drag bumps to 60%.\n *   - the rounded full pill thumb plays well with the brutalist border language\n *     but stays subtle (1.5px wide on rest, 3px on hover).\n *\n * Modes (via `type`):\n *   - \"hover\" (default)  — scrollbar fades in on hover/focus, otherwise hidden.\n *   - \"always\"           — scrollbar always visible.\n *   - \"auto\"             — scrollbar visible only when content overflows.\n *   - \"scroll\"           — Radix-managed: visible only while scrolling.\n */\n\ninterface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Optional override for which scrollbar(s) to render.\n   * Defaults: vertical only. Set to \"both\" for grids/tables with overflow-x.\n   */\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\n  /**\n   * Thickness of the scrollbar. Default \"thin\" (2.5px → 3.5px on hover).\n   * Use \"regular\" (8px) for content where the scrollbar should be a more prominent target.\n   */\n  size?: \"thin\" | \"regular\";\n}\n\nconst ScrollAreaRoot = forwardRef<ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(\n  (\n    { className, children, orientation = \"vertical\", size = \"thin\", type = \"hover\", ...props },\n    ref,\n  ) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      type={type}\n      className={cn(\"relative overflow-hidden\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full w-full rounded-[inherit]\",\n          // Smooth scroll-behavior + masked overflow inheriting any inner radius\n          \"[&>div]:!block\",\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {orientation === \"vertical\" || orientation === \"both\" ? (\n        <ScrollBar orientation=\"vertical\" size={size} />\n      ) : null}\n      {orientation === \"horizontal\" || orientation === \"both\" ? (\n        <ScrollBar orientation=\"horizontal\" size={size} />\n      ) : null}\n      <ScrollAreaPrimitive.Corner className=\"bg-transparent\" />\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollAreaRoot.displayName = \"ScrollArea\";\n\ninterface ScrollBarProps\n  extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {\n  size?: \"thin\" | \"regular\";\n}\n\nconst ScrollBar = forwardRef<\n  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ScrollBarProps\n>(({ className, orientation = \"vertical\", size = \"thin\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"z-10 flex touch-none select-none p-0.5 transition-[width,height,background-color] duration-base ease-out-soft\",\n      // hover state slightly lifts the track with a near-invisible violet wash\n      \"hover:bg-primary/5\",\n      orientation === \"vertical\" &&\n        (size === \"thin\"\n          ? \"h-full w-2.5 border-l border-l-transparent\"\n          : \"h-full w-3 border-l border-l-transparent\"),\n      orientation === \"horizontal\" &&\n        (size === \"thin\"\n          ? \"h-2.5 w-full flex-col border-t border-t-transparent\"\n          : \"h-3 w-full flex-col border-t border-t-transparent\"),\n      className,\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn(\n        \"relative flex-1 rounded-full bg-primary/30\",\n        \"transition-[background-color,box-shadow] duration-fast ease-out-soft\",\n        // Theme-aware: glow uses --primary (recolors when theme switches)\n        \"hover:bg-primary/55 hover:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n        // Drag state uses Radix data-state=\"visible\" + :active\n        \"active:bg-primary/75 data-[state=visible]:bg-primary/45\",\n      )}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\nScrollBar.displayName = \"ScrollArea.Bar\";\n\n// Compound assembly. `ScrollArea.Bar` is the only public surface for the\n// scroll bar. The previous standalone `ScrollBar` re-export was deprecated\n// theater in v0.0.0 (no public consumers exist on a pre-published package),\n// so it was removed cleanly in T7.4 (agent-team-audit-fixes plan).\nconst ScrollArea = /*#__PURE__*/ Object.assign(ScrollAreaRoot, { Bar: ScrollBar });\n\nexport { ScrollArea };\n"
+    }
+  ]
+}

package/registry/r/select.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "select",
+  "type": "registry:ui",
+  "title": "Select",
+  "description": "Styled wrapper around Radix Select.",
+  "dependencies": [
+    "@radix-ui/react-select",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/select/select.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/select.tsx",
+      "content": "import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Select — styled wrapper around Radix Select.\n *\n * Composition:\n *   <Select value={value} onValueChange={setValue}>\n *     <Select.Trigger>\n *       <Select.Value placeholder=\"Pick…\" />\n *     </Select.Trigger>\n *     <Select.Content>\n *       <Select.Group>\n *         <Select.Label>Group</Select.Label>\n *         <Select.Item value=\"a\">A</Select.Item>\n *       </Select.Group>\n *     </Select.Content>\n *   </Select>\n *\n * Trigger matches Input height + violet focus ring. Content uses popover\n * surface with check on the selected item.\n */\n\nconst SelectTrigger = forwardRef<\n  ElementRef<typeof SelectPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-2\",\n      \"text-body-md text-foreground placeholder:text-muted-foreground\",\n      \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"focus-visible:border-primary\",\n      \"data-[placeholder]:text-muted-foreground\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      \"[&>span]:line-clamp-1\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = \"Select.Trigger\";\n\nconst SelectScrollUpButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <ChevronUp className=\"size-4\" />\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"Select.ScrollUpButton\";\n\nconst SelectScrollDownButton = forwardRef<\n  ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <ChevronDown className=\"size-4\" />\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"Select.ScrollDownButton\";\n\nconst SelectContent = forwardRef<\n  ElementRef<typeof SelectPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      className={cn(\n        \"relative z-50 min-w-[8rem] 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        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n        position === \"popper\" && \"data-[side=top]:-translate-y-1 data-[side=bottom]:translate-y-1\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = \"Select.Content\";\n\nconst SelectLabel = forwardRef<\n  ElementRef<typeof SelectPrimitive.Label>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\",\n      className,\n    )}\n    {...props}\n  />\n));\nSelectLabel.displayName = \"Select.Label\";\n\nconst SelectItem = forwardRef<\n  ElementRef<typeof SelectPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1.5 pr-2 pl-7\",\n      \"text-body-sm outline-none\",\n      \"focus:bg-muted focus:text-foreground\",\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-1.5 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"size-3.5 text-primary\" aria-hidden=\"true\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = \"Select.Item\";\n\nconst SelectSeparator = forwardRef<\n  ElementRef<typeof SelectPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border/40\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = \"Select.Separator\";\n\nconst Select = SelectPrimitive.Root as typeof SelectPrimitive.Root & {\n  Trigger: typeof SelectTrigger;\n  Value: typeof SelectPrimitive.Value;\n  Content: typeof SelectContent;\n  Group: typeof SelectPrimitive.Group;\n  Label: typeof SelectLabel;\n  Item: typeof SelectItem;\n  Separator: typeof SelectSeparator;\n};\nSelect.Trigger = SelectTrigger;\nSelect.Value = SelectPrimitive.Value;\nSelect.Content = SelectContent;\nSelect.Group = SelectPrimitive.Group;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n\nexport { Select };\n"
+    }
+  ]
+}

package/registry/r/session-list-item.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "session-list-item",
+  "type": "registry:ui",
+  "title": "SessionListItem",
+  "description": "Single row in the sidebar's Sessions list for a code agent",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/session-list-item/session-list-item.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/session-list-item.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * SessionListItem — single row in the sidebar's Sessions list for a code agent\n * app. Richer than the generic `Sidebar.Item`: shows a status dot, the agent\n * mode last used (chat/code/infra), and a relative timestamp.\n *\n *   <SessionListItem\n *     title=\"Build the alignment grid demo\"\n *     status=\"running\"\n *     mode=\"code\"\n *     timestamp=\"2m ago\"\n *     active\n *     onClick={() => navigate(`/session/${id}`)}\n *   />\n *\n * The status dot maps to the agent run state and animates while running.\n */\n\nexport type SessionRunStatus = \"running\" | \"queued\" | \"completed\" | \"failed\" | \"cancelled\";\nexport type SessionMode = \"chat\" | \"code\" | \"infra\";\n\nconst STATUS_CLASS: Record<SessionRunStatus, string> = {\n  running: \"bg-success animate-pulse\",\n  queued: \"bg-warning\",\n  completed: \"bg-muted-foreground/50\",\n  failed: \"bg-destructive\",\n  cancelled: \"bg-muted-foreground/30\",\n};\n\nconst STATUS_LABEL: Record<SessionRunStatus, string> = {\n  running: \"Running\",\n  queued: \"Queued\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nconst MODE_CLASS: Record<SessionMode, string> = {\n  chat: \"bg-primary/15 text-primary\",\n  code: \"bg-success/15 text-success\",\n  infra: \"bg-accent/15 text-accent\",\n};\n\ninterface SessionListItemProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"title\"> {\n  /** Session title (truncated). */\n  title: ReactNode;\n  /** Agent run state. Drives the status dot. */\n  status: SessionRunStatus;\n  /** Last mode the user was viewing this session in. Optional pill. */\n  mode?: SessionMode;\n  /** Relative timestamp string (\"2m ago\", \"yesterday\"). */\n  timestamp?: ReactNode;\n  /** Optional unread count (pending agent events, new outputs). */\n  unread?: number;\n  /** Whether this is the currently selected session. */\n  active?: boolean;\n}\n\nconst SessionListItem = forwardRef<HTMLButtonElement, SessionListItemProps>(\n  (\n    { className, title, status, mode, timestamp, unread, active, onClick, disabled, ...props },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-current={active ? \"true\" : undefined}\n      className={cn(\n        \"group grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md px-2 py-2 text-left\",\n        \"transition-colors duration-base ease-out-soft\",\n        active\n          ? \"bg-muted text-foreground\"\n          : \"text-muted-foreground hover:bg-muted/50 hover:text-foreground\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className={cn(\"size-2 shrink-0 rounded-full\", STATUS_CLASS[status])}\n        aria-label={STATUS_LABEL[status]}\n        role=\"img\"\n      />\n      <span className=\"grid min-w-0\">\n        <span className=\"truncate font-medium text-body-sm\">{title}</span>\n        {(mode || timestamp) && (\n          <span className=\"mt-0.5 flex items-center gap-1.5 font-mono text-label text-muted-foreground\">\n            {mode ? (\n              <span\n                className={cn(\n                  \"inline-flex h-3.5 items-center rounded px-1 font-medium text-label-caps uppercase tracking-wider\",\n                  MODE_CLASS[mode],\n                )}\n              >\n                {mode}\n              </span>\n            ) : null}\n            {timestamp ? <span className=\"truncate\">{timestamp}</span> : null}\n          </span>\n        )}\n      </span>\n      {unread && unread > 0 ? (\n        <span className=\"inline-flex min-w-[1.25rem] shrink-0 items-center justify-center rounded-full bg-primary px-1.5 font-mono text-label text-primary-foreground tabular-nums\">\n          {unread > 99 ? \"99+\" : unread}\n        </span>\n      ) : null}\n    </button>\n  ),\n);\nSessionListItem.displayName = \"SessionListItem\";\n\nexport { SessionListItem };\n"
+    }
+  ]
+}

package/registry/r/session-timeline.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "session-timeline",
+  "type": "registry:ui",
+  "title": "SessionTimeline",
+  "description": "Historical view of past agent sessions with per-row",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/session-timeline/session-timeline.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/session-timeline.tsx",
+      "content": "import { ChevronRight, Clock, Coins, MessageSquare, Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SessionStatus = \"active\" | \"completed\" | \"failed\" | \"aborted\";\n\nexport interface SessionSummary {\n  id: string;\n  /** Friendly title (often the first user message). */\n  title: string;\n  /** ISO timestamp / friendly date label. */\n  startedAt: string;\n  duration?: string;\n  status: SessionStatus;\n  /** Agent/model that ran the session. */\n  model?: string;\n  /** Total tokens consumed (formatted, e.g. \"35.7k\"). */\n  tokens?: string;\n  /** Total cost (USD). */\n  cost?: number;\n  /** Number of messages in the session. */\n  messageCount?: number;\n}\n\ninterface SessionTimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  sessions: SessionSummary[];\n  /** Title above the list. */\n  title?: ReactNode;\n  /** Fires when a row is clicked. */\n  onOpen?: (id: string) => void;\n}\n\nconst STATUS_CLASS: Record<SessionStatus, string> = {\n  active: \"border-primary/40 bg-primary/15 text-primary\",\n  completed: \"border-success/40 bg-success/15 text-success\",\n  failed: \"border-destructive/40 bg-destructive/15 text-destructive\",\n  aborted: \"border-border/40 bg-muted text-muted-foreground\",\n};\n\nconst STATUS_LABEL: Record<SessionStatus, string> = {\n  active: \"Active\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n  aborted: \"Aborted\",\n};\n\n/**\n * SessionTimeline — historical view of past agent sessions with per-row\n * tokens / cost / duration / status. Click a row to open the full session.\n */\nconst SessionTimeline = forwardRef<HTMLDivElement, SessionTimelineProps>(\n  ({ className, sessions, title = \"Recent sessions\", onOpen, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"rounded-xl border bg-card\", className)}\n      aria-label=\"Session history\"\n      {...props}\n    >\n      {title ? (\n        <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {sessions.length} {sessions.length === 1 ? \"session\" : \"sessions\"}\n          </span>\n        </header>\n      ) : null}\n      <ul className=\"divide-y divide-border/30\">\n        {sessions.map((s) => {\n          const RowTag = onOpen ? \"button\" : \"div\";\n          return (\n            <li key={s.id}>\n              <RowTag\n                type={onOpen ? \"button\" : undefined}\n                onClick={onOpen ? () => onOpen(s.id) : undefined}\n                className={cn(\n                  \"grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-3 text-left\",\n                  onOpen &&\n                    \"hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:outline-none\",\n                )}\n              >\n                <div className=\"min-w-0\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <p className=\"truncate font-medium text-body-sm text-foreground\">{s.title}</p>\n                    <span\n                      className={cn(\n                        \"inline-flex shrink-0 items-center rounded-full border px-2 py-0.5\",\n                        \"font-mono text-label uppercase tracking-wider\",\n                        STATUS_CLASS[s.status],\n                      )}\n                    >\n                      {STATUS_LABEL[s.status]}\n                    </span>\n                  </div>\n                  <div className=\"mt-1 flex flex-wrap items-center gap-3 font-mono text-label text-muted-foreground\">\n                    <span className=\"inline-flex items-center gap-1\">\n                      <Clock className=\"size-3\" aria-hidden=\"true\" /> {s.startedAt}\n                      {s.duration ? <> · {s.duration}</> : null}\n                    </span>\n                    {s.model ? (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <Sparkles className=\"size-3\" aria-hidden=\"true\" /> {s.model}\n                      </span>\n                    ) : null}\n                    {s.tokens ? (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <Coins className=\"size-3\" aria-hidden=\"true\" /> {s.tokens} tok\n                      </span>\n                    ) : null}\n                    {s.cost !== undefined ? (\n                      <span className=\"tabular-nums\">${s.cost.toFixed(2)}</span>\n                    ) : null}\n                    {s.messageCount !== undefined ? (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <MessageSquare className=\"size-3\" aria-hidden=\"true\" /> {s.messageCount}\n                      </span>\n                    ) : null}\n                  </div>\n                </div>\n                {onOpen ? (\n                  <ChevronRight\n                    className=\"size-4 shrink-0 text-muted-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                ) : null}\n              </RowTag>\n            </li>\n          );\n        })}\n        {sessions.length === 0 ? (\n          <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No sessions yet.\n          </li>\n        ) : null}\n      </ul>\n    </section>\n  ),\n);\nSessionTimeline.displayName = \"SessionTimeline\";\n\nexport { SessionTimeline };\n"
+    }
+  ]
+}

package/registry/r/sheet.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sheet",
+  "type": "registry:ui",
+  "title": "Sheet",
+  "description": "Slide-in side panel built on Radix Dialog.",
+  "dependencies": [
+    "@radix-ui/react-dialog",
+    "class-variance-authority",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/sheet/sheet.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/sheet.tsx",
+      "content": "import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Sheet — slide-in side panel built on Radix Dialog.\n *\n * Same Radix primitive as Dialog, but Content slides from an edge instead of\n * fading from center. Used for: workspace overlays (Memory, Observability,\n * Sub-agents), Settings, contextual filters.\n *\n * Composition:\n *   <Sheet>\n *     <Sheet.Trigger>Open</Sheet.Trigger>\n *     <Sheet.Content side=\"right\">\n *       <Sheet.Header>\n *         <Sheet.Title>Memory</Sheet.Title>\n *         <Sheet.Description>Episodes and wiki pages</Sheet.Description>\n *       </Sheet.Header>\n *       <Sheet.Body>…</Sheet.Body>\n *       <Sheet.Footer>…</Sheet.Footer>\n *     </Sheet.Content>\n *   </Sheet>\n */\n\nconst Overlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nOverlay.displayName = \"Sheet.Overlay\";\n\nconst sheetVariants = cva(\n  [\n    \"fixed z-50 flex flex-col gap-3 border-border/40 bg-card text-card-foreground shadow-lg\",\n    \"transition duration-base ease-out-soft\",\n    \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n  ],\n  {\n    variants: {\n      side: {\n        right:\n          \"data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 max-w-md border-l\",\n        left: \"data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 max-w-md border-r\",\n        top: \"data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 h-auto max-h-[80vh] border-b\",\n        bottom:\n          \"data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 h-auto max-h-[80vh] border-t\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\ninterface ContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  hideCloseButton?: boolean;\n}\n\nconst Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, ContentProps>(\n  ({ className, children, hideCloseButton, side = \"right\", ...props }, ref) => (\n    <DialogPrimitive.Portal>\n      <Overlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n        {!hideCloseButton ? (\n          <DialogPrimitive.Close\n            className={cn(\n              \"absolute top-4 right-4 rounded-md p-1 opacity-70\",\n              \"transition-opacity hover:opacity-100\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n              \"disabled:pointer-events-none\",\n            )}\n          >\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  ),\n);\nContent.displayName = \"Sheet.Content\";\n\nconst Header = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col gap-1.5 border-border/40 border-b px-6 py-5 text-left\", className)}\n    {...props}\n  />\n);\nHeader.displayName = \"Sheet.Header\";\n\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex-1 overflow-y-auto px-6 py-4 text-body-md\", className)} {...props} />\n);\nBody.displayName = \"Sheet.Body\";\n\nconst Footer = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse gap-2 border-border/40 border-t px-6 py-4 sm:flex-row sm:justify-end\",\n      className,\n    )}\n    {...props}\n  />\n);\nFooter.displayName = \"Sheet.Footer\";\n\nconst Title = forwardRef<\n  ElementRef<typeof DialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\"font-display text-foreground text-title-lg tracking-tight\", className)}\n    {...props}\n  />\n));\nTitle.displayName = \"Sheet.Title\";\n\nconst Description = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-body-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDescription.displayName = \"Sheet.Description\";\n\nconst Sheet = DialogPrimitive.Root as typeof DialogPrimitive.Root & {\n  Trigger: typeof DialogPrimitive.Trigger;\n  Close: typeof DialogPrimitive.Close;\n  Content: typeof Content;\n  Overlay: typeof Overlay;\n  Header: typeof Header;\n  Body: typeof Body;\n  Footer: typeof Footer;\n  Title: typeof Title;\n  Description: typeof Description;\n};\nSheet.Trigger = DialogPrimitive.Trigger;\nSheet.Close = DialogPrimitive.Close;\nSheet.Content = Content;\nSheet.Overlay = Overlay;\nSheet.Header = Header;\nSheet.Body = Body;\nSheet.Footer = Footer;\nSheet.Title = Title;\nSheet.Description = Description;\n\nexport { Sheet, sheetVariants };\n"
+    }
+  ]
+}

package/registry/r/sidebar.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "title": "Sidebar",
+  "description": "Vertical navigation shell with header, sections, items (active / count), and footer slots.",
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/sidebar/sidebar.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  ElementType,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Sidebar — vertical navigation shell.\n *\n * Composition:\n *   <Sidebar>\n *     <Sidebar.Header>…brand…</Sidebar.Header>\n *     <Sidebar.Section title=\"Workspace\">\n *       <Sidebar.Item icon={Home} active>Overview</Sidebar.Item>\n *       <Sidebar.Item icon={Rocket} count={3}>Deployments</Sidebar.Item>\n *     </Sidebar.Section>\n *     <Sidebar.Footer>…user…</Sidebar.Footer>\n *   </Sidebar>\n *\n * Width is 260px by default (matches the wiremocks). Pass `className` to override.\n * Sidebar root is `<aside>` with a hairline right border.\n */\n\nconst Root = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <aside\n      ref={ref}\n      className={cn(\n        \"flex h-full w-64 flex-col border-border/40 border-r bg-card text-card-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"Sidebar\";\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex h-16 items-center gap-3 border-border/40 border-b px-5\", className)}\n      {...props}\n    />\n  ),\n);\nHeader.displayName = \"Sidebar.Header\";\n\ninterface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n}\n\nconst Section = forwardRef<HTMLDivElement, SectionProps>(\n  ({ className, title, children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-1 px-3 py-4\", className)} {...props}>\n      {title ? (\n        <p className=\"px-2 pb-1 font-sans text-label-caps text-muted-foreground uppercase\">\n          {title}\n        </p>\n      ) : null}\n      {children}\n    </div>\n  ),\n);\nSection.displayName = \"Sidebar.Section\";\n\ninterface ItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  icon?: ElementType;\n  active?: boolean;\n  count?: number | string;\n  as?: \"button\" | \"a\";\n  href?: string;\n}\n\n/**\n * Sidebar.Item — single nav row. Renders as <button> by default; pass `as=\"a\"` + `href`\n * to render an anchor for routing.\n */\nconst Item = forwardRef<HTMLElement, ItemProps>(\n  ({ className, icon: Icon, active, count, as = \"button\", href, children, ...props }, ref) => {\n    const classes = cn(\n      \"group flex w-full items-center gap-3 rounded-lg px-2 py-2\",\n      \"font-medium font-sans text-body-sm\",\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-card\",\n      active\n        ? \"bg-primary/10 text-primary\"\n        : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n      className,\n    );\n\n    const content = (\n      <>\n        {Icon ? (\n          <Icon\n            className={cn(\n              \"size-4 shrink-0\",\n              active ? \"text-primary\" : \"text-muted-foreground group-hover:text-foreground\",\n            )}\n          />\n        ) : null}\n        <span className=\"flex-1 truncate text-left\">{children}</span>\n        {count !== undefined ? (\n          <span\n            className={cn(\n              \"ml-auto rounded-full px-1.5 py-0.5 font-mono text-label\",\n              active ? \"bg-primary text-primary-foreground\" : \"bg-muted-foreground/15\",\n            )}\n          >\n            {count}\n          </span>\n        ) : null}\n      </>\n    );\n\n    if (as === \"a\") {\n      return (\n        <a\n          ref={ref as Ref<HTMLAnchorElement>}\n          href={href}\n          className={classes}\n          aria-current={active ? \"page\" : undefined}\n          {...(props as AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        className={classes}\n        aria-pressed={active ? \"true\" : undefined}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  },\n);\nItem.displayName = \"Sidebar.Item\";\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"mt-auto border-border/40 border-t px-5 py-4\", className)}\n      {...props}\n    />\n  ),\n);\nFooter.displayName = \"Sidebar.Footer\";\n\nconst Sidebar = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Section,\n  Item,\n  Footer,\n});\n\nexport { Sidebar };\n"
+    }
+  ]
+}

package/registry/r/skeleton.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skeleton",
+  "type": "registry:ui",
+  "title": "Skeleton",
+  "description": "Placeholder block shown while content is loading.",
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/skeleton/skeleton.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/skeleton.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\n/**\n * Skeleton — placeholder block shown while content is loading.\n *\n * Uses --muted as base + a subtle shimmer that respects the violet theme.\n * Compose multiple Skeletons to mirror your component layout while loading.\n *\n * Accessibility (LOW-004): the default `role=\"status\"` + `aria-live=\"polite\"`\n * announces \"Loading\" to screen readers. In loops or grids where many\n * Skeletons mount simultaneously, this can be noisy. Override per-instance\n * with `aria-live=\"off\"` and/or `aria-hidden` when only one container-level\n * loading announcement is desired:\n *\n *   <div role=\"status\" aria-live=\"polite\" aria-label=\"Loading deployments\">\n *     {placeholders.map(id => (\n *       <Skeleton key={id} aria-live=\"off\" aria-hidden=\"true\" className=\"h-8\" />\n *     ))}\n *   </div>\n */\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    // T4.1 (MF-4): when nested inside a container live region (BuildLogStream,\n    // ChatThread, etc.), omit role/aria-live so AT doesn't announce every\n    // placeholder mount as a separate \"loading\" event.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <div\n        ref={ref}\n        role={inLiveRegion ? undefined : \"status\"}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        aria-label={inLiveRegion ? undefined : \"Loading\"}\n        className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton };\n"
+    }
+  ]
+}

package/registry/r/skill-card.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skill-card",
+  "type": "registry:ui",
+  "title": "SkillCard",
+  "description": "Single skill entry showing what it does, where it came from,",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "mode-types",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/skill-card/skill-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/skill-card.tsx",
+      "content": "import { BookOpen, Sparkles, User, Users } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\nimport type { Mode } from \"@/types/mode\";\n\nexport type SkillSource = \"builtin\" | \"project\" | \"user\" | \"plugin\";\nexport type SkillState = \"enabled\" | \"disabled\";\n\nconst SOURCE_CONFIG: Record<SkillSource, { label: string; icon: IconComponent; tone: string }> = {\n  builtin: { label: \"Built-in\", icon: Sparkles, tone: \"text-primary\" },\n  project: { label: \"Project\", icon: BookOpen, tone: \"text-accent\" },\n  user: { label: \"User\", icon: User, tone: \"text-info\" },\n  plugin: { label: \"Plugin\", icon: Users, tone: \"text-muted-foreground\" },\n};\n\nexport interface Skill {\n  id: string;\n  name: string;\n  description?: ReactNode;\n  /** Where the skill comes from. */\n  source: SkillSource;\n  /** Optional tools the skill is allowed to use (informational). */\n  allowedTools?: string[];\n  /** Optional trigger keywords / patterns for discovery. */\n  triggers?: string[];\n  state?: SkillState;\n  /** Modes this skill is visible in. Omit / empty = global (all modes). */\n  modes?: Mode[];\n}\n\ninterface SkillCardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onToggle\"> {\n  skill: Skill;\n  onToggle?: (id: string, next: SkillState) => void;\n}\n\n/**\n * SkillCard — single skill entry showing what it does, where it came from,\n * and which tools it needs. Toggle to enable/disable for the current session.\n */\nconst SkillCard = forwardRef<HTMLDivElement, SkillCardProps>(\n  ({ className, skill, onToggle, ...props }, ref) => {\n    const config = SOURCE_CONFIG[skill.source];\n    const Icon = config.icon;\n    const state = skill.state ?? \"enabled\";\n    const enabled = state === \"enabled\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4\",\n          !enabled && \"opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex items-center gap-2\">\n            <span className={cn(\"grid size-8 place-items-center rounded-md bg-muted\", config.tone)}>\n              <Icon className=\"size-4\" aria-hidden=\"true\" />\n            </span>\n            <div className=\"grid\">\n              <h4 className=\"font-medium font-mono text-body-sm text-foreground\">{skill.name}</h4>\n              <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n                {config.label}\n              </span>\n            </div>\n          </div>\n          {onToggle ? (\n            <button\n              type=\"button\"\n              onClick={() => onToggle(skill.id, enabled ? \"disabled\" : \"enabled\")}\n              aria-pressed={enabled}\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 transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                enabled\n                  ? \"border-success/40 bg-success/15 text-success\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {enabled ? \"Enabled\" : \"Disabled\"}\n            </button>\n          ) : null}\n        </header>\n        {skill.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{skill.description}</p>\n        ) : null}\n        {skill.allowedTools && skill.allowedTools.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n              tools:\n            </span>\n            {skill.allowedTools.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        ) : null}\n        {skill.triggers && skill.triggers.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            <span className=\"font-mono text-label text-muted-foreground uppercase tracking-wider\">\n              triggers:\n            </span>\n            {skill.triggers.map((trigger) => (\n              <span\n                key={trigger}\n                className=\"inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 font-mono text-label text-primary\"\n              >\n                {trigger}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </article>\n    );\n  },\n);\nSkillCard.displayName = \"SkillCard\";\n\nexport { SkillCard };\n"
+    }
+  ]
+}

package/registry/r/skill-editor.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skill-editor",
+  "type": "registry:block",
+  "title": "SkillEditor",
+  "description": "Form for creating or editing a Skill.",
+  "dependencies": [],
+  "registryDependencies": [
+    "button",
+    "cn",
+    "form-field",
+    "input",
+    "mode-types",
+    "select",
+    "skill-card",
+    "switch",
+    "tailwind-preset",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "components/composites/skill-editor/skill-editor.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/skill-editor.tsx",
+      "content": "import { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"@/types/mode\";\nimport { Button } from \"@/components/ui/button\";\nimport { FormField } from \"@/components/ui/form-field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Select } from \"@/components/ui/select\";\nimport type { Skill, SkillSource, SkillState } from \"@/components/ui/skill-card\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * SkillEditor — form for creating or editing a Skill.\n */\n\ntype SkillDraft = Omit<Skill, \"id\"> & {\n  id?: string;\n  instructions?: string;\n};\n\ninterface SkillEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<Skill> & { instructions?: string };\n  onSave: (draft: SkillDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst SOURCES: Array<{ id: SkillSource; label: string }> = [\n  { id: \"user\", label: \"User — defined by you\" },\n  { id: \"project\", label: \"Project — lives in this workspace\" },\n  { id: \"plugin\", label: \"Plugin — imported from a package\" },\n  { id: \"builtin\", label: \"Built-in — shipped with Theo\" },\n];\n\nexport function SkillEditor({\n  className,\n  initial,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: SkillEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [instructions, setInstructions] = useState(initial?.instructions ?? \"\");\n  const [source, setSource] = useState<SkillSource>(initial?.source ?? \"user\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [triggersRaw, setTriggersRaw] = useState(initial?.triggers?.join(\", \") ?? \"\");\n  const [enabled, setEnabled] = useState<SkillState>(initial?.state ?? \"enabled\");\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing\n  // a different skill, use the React `key` pattern at the call site:\n  //   <SkillEditor key={skill.id} initial={skill} ... />\n  const toggleMode = (m: Mode) =>\n    setModes((prev) => (prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]));\n\n  const canSave = name.trim().length > 0;\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!canSave) return;\n    onSave({\n      id: initial?.id,\n      name: name.trim(),\n      description: description.trim() || undefined,\n      instructions: instructions.trim() || undefined,\n      source,\n      state: enabled,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      triggers: triggersRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\"flex h-full flex-col gap-4\", className)}\n      {...formProps}\n    >\n      <FormField>\n        <FormField.Label>Name</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={name}\n            onChange={(e) => setName(e.target.value)}\n            placeholder=\"diff-explainer\"\n            required\n          />\n        </FormField.Control>\n        <FormField.Hint>Kebab-case identifier the agent uses to invoke this skill.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Description</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Explain a diff in plain English.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>Instructions</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={instructions}\n            onChange={(e) => setInstructions(e.target.value)}\n            rows={6}\n            placeholder=\"When invoked, read the diff via Read or Grep and produce a concise summary of intent + risk.\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Sub-prompt loaded when the skill is invoked.</FormField.Hint>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Source</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={source}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow Select string value against\n                // SOURCES.id before casting. Silent no-op for unknown.\n                const next = SOURCES.find((s) => s.id === v);\n                if (next) setSource(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select skill source\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {SOURCES.map((s) => (\n                  <Select.Item key={s.id} value={s.id}>\n                    {s.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        <FormField>\n          <FormField.Label>Allowed tools</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={allowedToolsRaw}\n              onChange={(e) => setAllowedToolsRaw(e.target.value)}\n              placeholder=\"Read, Grep, Bash\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\n\n      <FormField>\n        <FormField.Label>Triggers</FormField.Label>\n        <FormField.Control>\n          <Input\n            value={triggersRaw}\n            onChange={(e) => setTriggersRaw(e.target.value)}\n            placeholder=\"explain diff, summarize change\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Optional keywords / patterns for auto-discovery.</FormField.Hint>\n      </FormField>\n\n      <FormField>\n        <FormField.Label>Active modes</FormField.Label>\n        <div className=\"flex flex-wrap gap-1.5\">\n          {ALL_MODES.map((m) => {\n            const on = modes.includes(m);\n            return (\n              <button\n                key={m}\n                type=\"button\"\n                onClick={() => toggleMode(m)}\n                aria-pressed={on}\n                className={cn(\n                  \"inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors\",\n                  on\n                    ? \"border-primary bg-primary/15 text-primary\"\n                    : \"border-border/60 bg-card text-muted-foreground hover:text-foreground\",\n                )}\n              >\n                {MODE_LABEL[m]}\n              </button>\n            );\n          })}\n        </div>\n        <FormField.Hint>\n          {modes.length === 0\n            ? \"Empty = global (available in every mode).\"\n            : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(\", \")}.`}\n        </FormField.Hint>\n      </FormField>\n\n      <div className=\"flex items-center gap-3\">\n        <Switch\n          checked={enabled === \"enabled\"}\n          onCheckedChange={(v) => setEnabled(v ? \"enabled\" : \"disabled\")}\n          aria-label=\"Enabled\"\n        />\n        <span className=\"text-body-sm text-muted-foreground\">\n          {enabled === \"enabled\"\n            ? \"Enabled — available to the agent.\"\n            : \"Disabled — kept but hidden from the agent.\"}\n        </span>\n      </div>\n\n      <footer className=\"flex items-center justify-between gap-2 border-border/40 border-t pt-4\">\n        <div>\n          {onDelete ? (\n            <Button type=\"button\" variant=\"ghost\" onClick={onDelete}>\n              Delete\n            </Button>\n          ) : null}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {onCancel ? (\n            <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n              Cancel\n            </Button>\n          ) : null}\n          <Button type=\"submit\" disabled={!canSave}>\n            {initial?.id ? \"Save changes\" : \"Create skill\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"
+    }
+  ]
+}

package/registry/r/skills-list.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "skills-list",
+  "type": "registry:block",
+  "title": "SkillsList",
+  "description": "Grid of SkillCards with optional search + source filter chips.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "skill-card",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/skills-list/skills-list.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/skills-list.tsx",
+      "content": "import { Search } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { type Skill, SkillCard, type SkillState } from \"@/components/ui/skill-card\";\n\ninterface SkillsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  skills: Skill[];\n  title?: ReactNode;\n  /** If true, shows a search input above the grid. */\n  searchable?: boolean;\n  onToggle?: (id: string, next: SkillState) => void;\n}\n\n/**\n * SkillsList — grid of SkillCards with optional search + source filter chips.\n * Pairs with claw-code's `claw skills` inventory but visual.\n */\nconst SkillsList = forwardRef<HTMLDivElement, SkillsListProps>(\n  ({ className, skills, title = \"Skills\", searchable = true, onToggle, ...props }, ref) => {\n    const [q, setQ] = useState(\"\");\n    const filtered = useMemo(() => {\n      if (!q.trim()) return skills;\n      const needle = q.toLowerCase();\n      return skills.filter((s) => {\n        const hay = [\n          s.name,\n          typeof s.description === \"string\" ? s.description : \"\",\n          ...(s.triggers ?? []),\n        ]\n          .join(\" \")\n          .toLowerCase();\n        return hay.includes(needle);\n      });\n    }, [skills, q]);\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3\", className)}\n        aria-label=\"Available skills\"\n        {...props}\n      >\n        {title || searchable ? (\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            {searchable ? (\n              <div className=\"relative\">\n                <Search\n                  className=\"-translate-y-1/2 absolute top-1/2 left-2 size-3.5 text-muted-foreground\"\n                  aria-hidden=\"true\"\n                />\n                <input\n                  type=\"search\"\n                  value={q}\n                  onChange={(e) => setQ(e.target.value)}\n                  placeholder=\"Filter skills…\"\n                  aria-label=\"Filter skills\"\n                  className=\"h-8 w-56 rounded-md border border-input bg-card pr-2 pl-7 font-mono text-code-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                />\n              </div>\n            ) : null}\n          </header>\n        ) : null}\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 skills match {q ? `\"${q}\"` : \"the current filter\"}.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            {filtered.map((skill) => (\n              <SkillCard key={skill.id} skill={skill} {...(onToggle ? { onToggle } : {})} />\n            ))}\n          </div>\n        )}\n      </section>\n    );\n  },\n);\nSkillsList.displayName = \"SkillsList\";\n\nexport { SkillsList };\n"
+    }
+  ]
+}

package/registry/r/social-auth-row.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "social-auth-row",
+  "type": "registry:ui",
+  "title": "SocialAuthRow",
+  "description": "Row of OAuth provider buttons.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/social-auth-row/social-auth-row.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/social-auth-row.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface SocialProvider {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. brand-specific SVG). */\n  icon: IconComponent;\n}\n\ninterface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  providers: SocialProvider[];\n  onSelect?: (id: string) => void;\n  /**\n   * Stack vertically instead of horizontally (single-column flow).\n   */\n  vertical?: boolean;\n}\n\n/**\n * SocialAuthRow — row of OAuth provider buttons.\n *\n * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button\n * styling but with provider icon prominently on the left.\n */\nconst SocialAuthRow = forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  ({ className, providers, onSelect, vertical, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"grid gap-2\",\n        vertical ? \"grid-cols-1\" : `grid-cols-${Math.min(providers.length, 4)}`,\n        className,\n      )}\n      style={\n        !vertical\n          ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` }\n          : undefined\n      }\n      {...props}\n    >\n      {providers.map((p) => {\n        const Icon = p.icon;\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            onClick={() => onSelect?.(p.id)}\n            className={cn(\n              \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card\",\n              \"px-4 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            )}\n          >\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nSocialAuthRow.displayName = \"SocialAuthRow\";\n\nexport { SocialAuthRow };\n"
+    }
+  ]
+}

package/registry/r/steps-rail.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "steps-rail",
+  "type": "registry:ui",
+  "title": "StepsRail",
+  "description": "Vertical numbered rail with connecting line.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/steps-rail/steps-rail.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/steps-rail.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface RailStep {\n  id: string | number;\n  label?: ReactNode;\n  /**\n   * Visual state: \"complete\", \"current\", \"pending\".\n   */\n  state?: \"complete\" | \"current\" | \"pending\";\n}\n\ninterface StepsRailProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  steps: RailStep[];\n  /**\n   * Optional label rendered at the top of the rail (e.g. \"STEPS\").\n   */\n  title?: ReactNode;\n}\n\n/**\n * StepsRail — vertical numbered rail with connecting line.\n *\n * Mirrors the file-organisation wiremock right rail: 5 numbered dots, current\n * highlighted, line connecting them.\n */\nconst StepsRail = forwardRef<HTMLElement, StepsRailProps>(\n  ({ className, steps, title, ...props }, ref) => (\n    <aside\n      ref={ref}\n      className={cn(\n        \"flex w-14 flex-col items-center gap-6 border-border/40 border-l py-6\",\n        className,\n      )}\n      aria-label=\"Task steps\"\n      {...props}\n    >\n      {title ? (\n        <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {title}\n        </span>\n      ) : null}\n      <ol className=\"before:-translate-x-1/2 relative grid place-items-center gap-6 before:absolute before:top-3 before:bottom-3 before:left-1/2 before:w-px before:bg-border/60\">\n        {steps.map((step, idx) => {\n          const state = step.state ?? (idx === 0 ? \"current\" : \"pending\");\n          return (\n            <li key={step.id} className=\"relative z-10\">\n              <span\n                className={cn(\n                  \"grid size-7 place-items-center rounded-full border-2 font-bold font-mono text-code-sm\",\n                  state === \"complete\" && \"border-primary bg-primary text-primary-foreground\",\n                  state === \"current\" && \"border-foreground bg-foreground text-background\",\n                  state === \"pending\" && \"border-border bg-card text-muted-foreground\",\n                )}\n                aria-current={state === \"current\" ? \"step\" : undefined}\n              >\n                {step.label ?? idx + 1}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </aside>\n  ),\n);\nStepsRail.displayName = \"StepsRail\";\n\nexport { StepsRail };\n"
+    }
+  ]
+}