@usetheo/ui 0.13.0 → 0.13.2

package/dist/chunk-QCSMJTA6.js

@@ -0,0 +1,68 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { CircleDashed, Check, Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var statusIcon = {
+  pending: CircleDashed,
+  running: Loader2,
+  done: Check,
+  skipped: CircleDashed
+};
+var statusToneText = {
+  pending: "text-muted-foreground",
+  running: "text-primary",
+  done: "text-success line-through",
+  skipped: "text-muted-foreground line-through"
+};
+var statusBg = {
+  pending: "bg-muted text-muted-foreground",
+  running: "bg-primary text-primary-foreground",
+  done: "bg-success text-success-foreground",
+  skipped: "bg-muted text-muted-foreground"
+};
+var ProgressChecklist = forwardRef(
+  ({ className, title, steps, showProgressBars = true, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "progress-checklist",
+      ref,
+      className: cn("rounded-xl border border-border bg-card p-4", className),
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx("header", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) }) : null,
+        /* @__PURE__ */ jsx("ol", { className: "grid gap-3", children: steps.map((step) => {
+          const Icon = statusIcon[step.status];
+          return /* @__PURE__ */ jsxs("li", { className: "grid grid-cols-[auto_1fr] items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-0.5 grid size-5 place-items-center rounded-full",
+                  statusBg[step.status]
+                ),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(Icon, { className: cn("size-3", step.status === "running" && "animate-spin") })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: cn("text-body-sm", statusToneText[step.status]), children: step.label }),
+              showProgressBars && step.status === "running" && step.progress !== void 0 ? /* @__PURE__ */ jsx("div", { className: "mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full bg-primary transition-[width] duration-base ease-out-soft",
+                  style: { width: `${Math.round(step.progress * 100)}%` }
+                }
+              ) }) : null
+            ] })
+          ] }, step.id);
+        }) })
+      ]
+    }
+  )
+);
+ProgressChecklist.displayName = "ProgressChecklist";
+
+export { ProgressChecklist };
+//# sourceMappingURL=chunk-QCSMJTA6.js.map
+//# sourceMappingURL=chunk-QCSMJTA6.js.map

package/dist/chunk-QCSMJTA6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/progress-checklist/progress-checklist.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,UAAA,GAAa;AAAA,EACjB,OAAA,EAAS,YAAA;AAAA,EACT,OAAA,EAAS,OAAA;AAAA,EACT,IAAA,EAAM,KAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,cAAA,GAAiD;AAAA,EACrD,OAAA,EAAS,uBAAA;AAAA,EACT,OAAA,EAAS,cAAA;AAAA,EACT,IAAA,EAAM,2BAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,QAAA,GAA2C;AAAA,EAC/C,OAAA,EAAS,gCAAA;AAAA,EACT,OAAA,EAAS,oCAAA;AAAA,EACT,IAAA,EAAM,oCAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAiBA,IAAM,iBAAA,GAAoB,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,KAAA,EAAO,mBAAmB,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC/D,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,6CAAA,EAA+C,SAAS,CAAA;AAAA,MACrE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,wCAAA,EAChB,QAAA,kBAAA,GAAA,CAAC,QAAG,SAAA,EAAU,2CAAA,EAA6C,QAAA,EAAA,KAAA,EAAM,CAAA,EACnE,CAAA,GACE,IAAA;AAAA,4BACH,IAAA,EAAA,EAAG,SAAA,EAAU,cACX,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,UAAA,MAAM,IAAA,GAAO,UAAA,CAAW,IAAA,CAAK,MAAM,CAAA;AACnC,UAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAiB,SAAA,EAAU,6CAAA,EAC1B,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,oDAAA;AAAA,kBACA,QAAA,CAAS,KAAK,MAAM;AAAA,iBACtB;AAAA,gBACA,aAAA,EAAY,MAAA;AAAA,gBAEZ,QAAA,kBAAA,GAAA,CAAC,QAAK,SAAA,EAAW,EAAA,CAAG,UAAU,IAAA,CAAK,MAAA,KAAW,SAAA,IAAa,cAAc,CAAA,EAAG;AAAA;AAAA,aAC9E;AAAA,4BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,EAAA,CAAG,cAAA,EAAgB,cAAA,CAAe,KAAK,MAAM,CAAC,CAAA,EAAI,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,cAC1E,gBAAA,IAAoB,IAAA,CAAK,MAAA,KAAW,SAAA,IAAa,IAAA,CAAK,aAAa,MAAA,mBAClE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACb,QAAA,kBAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,kEAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,IAAA,CAAK,MAAM,IAAA,CAAK,QAAA,GAAW,GAAG,CAAC,CAAA,CAAA,CAAA;AAAI;AAAA,iBAE1D,CAAA,GACE;AAAA,aAAA,EACN;AAAA,WAAA,EAAA,EApBO,KAAK,EAqBd,CAAA;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA;AAGN;AACA,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"chunk-QCSMJTA6.js","sourcesContent":["import { Check, CircleDashed, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { TaskStep, TaskStepStatus } from \"../../../types/task.js\";\n\nconst statusIcon = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: Check,\n  skipped: CircleDashed,\n} as const;\n\nconst statusToneText: Record<TaskStepStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success line-through\",\n  skipped: \"text-muted-foreground line-through\",\n};\n\nconst statusBg: Record<TaskStepStatus, string> = {\n  pending: \"bg-muted text-muted-foreground\",\n  running: \"bg-primary text-primary-foreground\",\n  done: \"bg-success text-success-foreground\",\n  skipped: \"bg-muted text-muted-foreground\",\n};\n\ninterface ProgressChecklistProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  steps: TaskStep[];\n  /**\n   * If true, shows percentage bar for running steps with `progress`.\n   */\n  showProgressBars?: boolean;\n}\n\n/**\n * ProgressChecklist — right-inspector checklist.\n *\n * Visual: vertical list of steps with status dot, label, optional progress bar.\n * Matches WIREMOCKS §3 / §4 (\"Progresso\") with checkmarks and pulse on running.\n */\nconst ProgressChecklist = forwardRef<HTMLDivElement, ProgressChecklistProps>(\n  ({ className, title, steps, showProgressBars = true, ...props }, ref) => (\n    <section\n      data-slot=\"progress-checklist\"\n      ref={ref}\n      className={cn(\"rounded-xl border border-border bg-card p-4\", className)}\n      {...props}\n    >\n      {title ? (\n        <header className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n        </header>\n      ) : null}\n      <ol className=\"grid gap-3\">\n        {steps.map((step) => {\n          const Icon = statusIcon[step.status];\n          return (\n            <li key={step.id} className=\"grid grid-cols-[auto_1fr] items-start gap-3\">\n              <span\n                className={cn(\n                  \"mt-0.5 grid size-5 place-items-center rounded-full\",\n                  statusBg[step.status],\n                )}\n                aria-hidden=\"true\"\n              >\n                <Icon className={cn(\"size-3\", step.status === \"running\" && \"animate-spin\")} />\n              </span>\n              <div className=\"min-w-0\">\n                <p className={cn(\"text-body-sm\", statusToneText[step.status])}>{step.label}</p>\n                {showProgressBars && step.status === \"running\" && step.progress !== undefined ? (\n                  <div className=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted\">\n                    <div\n                      className=\"h-full bg-primary transition-[width] duration-base ease-out-soft\"\n                      style={{ width: `${Math.round(step.progress * 100)}%` }}\n                    />\n                  </div>\n                ) : null}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    </section>\n  ),\n);\nProgressChecklist.displayName = \"ProgressChecklist\";\n\nexport { ProgressChecklist };\n"]}

package/dist/chunk-QNYOIVQ4.js

@@ -0,0 +1,36 @@
+import { useInLiveRegion } from './chunk-UGKI466V.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AgentStartingState = forwardRef(
+  ({ className, label = "Starting up\u2026", hint, ...props }, ref) => {
+    const inLiveRegion = useInLiveRegion();
+    return /* @__PURE__ */ jsxs(
+      "output",
+      {
+        "data-slot": "agent-starting-state",
+        ref,
+        "aria-live": inLiveRegion ? void 0 : "polite",
+        className: cn(
+          "flex items-center gap-3 rounded-xl border border-primary/30 border-dashed bg-primary/5 px-4 py-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-body-sm text-foreground", children: label }),
+            hint ? /* @__PURE__ */ jsx("span", { className: "text-body-sm text-muted-foreground", children: hint }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+AgentStartingState.displayName = "AgentStartingState";
+
+export { AgentStartingState };
+//# sourceMappingURL=chunk-QNYOIVQ4.js.map
+//# sourceMappingURL=chunk-QNYOIVQ4.js.map

package/dist/chunk-QNYOIVQ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/agent-starting-state/agent-starting-state.tsx"],"names":[],"mappings":";;;;;;AAmBA,IAAM,kBAAA,GAAqB,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,qBAAgB,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAE9D,IAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,sBAAA;AAAA,QACV,GAAA;AAAA,QACA,WAAA,EAAW,eAAe,MAAA,GAAY,QAAA;AAAA,QACtC,SAAA,EAAW,EAAA;AAAA,UACT,kGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,kCAAA,EAAmC,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BACzE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CAAA,EAA4C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,YACjE,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAsC,gBAAK,CAAA,GAAU;AAAA,WAAA,EAC/E;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"chunk-QNYOIVQ4.js","sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { OutputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { useInLiveRegion } from \"../../../lib/live-region-context.js\";\n\ninterface AgentStartingStateProps extends OutputHTMLAttributes<HTMLOutputElement> {\n  /** Title shown next to the spinner. Default \"Starting up…\". */\n  label?: ReactNode;\n  /** Optional secondary copy explaining the bootstrap step. */\n  hint?: ReactNode;\n}\n\n/**\n * AgentStartingState — full-width skeleton shown while the agent boots.\n *\n * Visual: violet spinner + label, optional hint below. Wrapped in a soft card.\n * Uses semantic `<output aria-live=\"polite\">` so screen readers announce the state.\n */\nconst AgentStartingState = forwardRef<HTMLOutputElement, AgentStartingStateProps>(\n  ({ className, label = \"Starting up…\", hint, ...props }, ref) => {\n    // T4.1 (MF-4): omit aria-live when nested inside a container live region.\n    const inLiveRegion = useInLiveRegion();\n    return (\n      <output\n        data-slot=\"agent-starting-state\"\n        ref={ref}\n        aria-live={inLiveRegion ? undefined : \"polite\"}\n        className={cn(\n          \"flex items-center gap-3 rounded-xl border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <Loader2 className=\"size-4 animate-spin text-primary\" aria-hidden=\"true\" />\n        <div className=\"grid\">\n          <span className=\"font-medium text-body-sm text-foreground\">{label}</span>\n          {hint ? <span className=\"text-body-sm text-muted-foreground\">{hint}</span> : null}\n        </div>\n      </output>\n    );\n  },\n);\nAgentStartingState.displayName = \"AgentStartingState\";\n\nexport { AgentStartingState };\n"]}

package/dist/chunk-QPURZJJM.js

@@ -0,0 +1,88 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { CornerDownRight, Bot, Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATE_CONFIG = {
+  spawning: {
+    label: "Spawning",
+    class: "border-primary/40 bg-primary/10 text-primary animate-pulse"
+  },
+  running: { label: "Running", class: "border-primary/40 bg-primary/15 text-primary" },
+  completed: { label: "Done", class: "border-success/40 bg-success/15 text-success" },
+  failed: { label: "Failed", class: "border-destructive/40 bg-destructive/15 text-destructive" },
+  cancelled: { label: "Cancelled", class: "border-border/40 bg-muted text-muted-foreground" }
+};
+var SubAgentDispatch = forwardRef(
+  ({ className, run, onCancel, ...props }, ref) => {
+    const cfg = STATE_CONFIG[run.state];
+    const isLive = run.state === "spawning" || run.state === "running";
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "data-slot": "sub-agent-dispatch",
+        ref,
+        className: cn(
+          "grid gap-2 rounded-lg border border-primary/30 border-l-2 border-l-primary bg-card px-4 py-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(CornerDownRight, { className: "size-3.5 shrink-0 text-primary", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(Bot, { className: "size-4 shrink-0 text-primary", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium font-mono text-code-sm text-foreground", children: "dispatch" }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm text-primary", children: run.agent }),
+              run.duration ? /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+                "\xB7 ",
+                run.duration
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-0.5",
+                  "font-mono text-label uppercase tracking-wider",
+                  cfg.class
+                ),
+                children: [
+                  isLive ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin", "aria-hidden": "true" }) : null,
+                  cfg.label
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-body-sm text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: "task" }),
+            run.task
+          ] }),
+          run.lastEvent ? /* @__PURE__ */ jsxs("p", { className: "truncate font-mono text-code-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "\u203A" }),
+            " ",
+            run.lastEvent
+          ] }) : null,
+          run.result ? /* @__PURE__ */ jsxs("p", { className: "rounded-md bg-muted/40 px-3 py-2 text-body-sm text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: "result" }),
+            run.result
+          ] }) : null,
+          isLive && onCancel ? /* @__PURE__ */ jsx("footer", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onCancel(run.id),
+              className: "rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: "Cancel"
+            }
+          ) }) : null
+        ]
+      }
+    );
+  }
+);
+SubAgentDispatch.displayName = "SubAgentDispatch";
+
+export { SubAgentDispatch };
+//# sourceMappingURL=chunk-QPURZJJM.js.map
+//# sourceMappingURL=chunk-QPURZJJM.js.map

package/dist/chunk-QPURZJJM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/sub-agent-dispatch/sub-agent-dispatch.tsx"],"names":[],"mappings":"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","file":"chunk-QPURZJJM.js","sourcesContent":["import { Bot, CornerDownRight, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport type SubAgentState = \"spawning\" | \"running\" | \"completed\" | \"failed\" | \"cancelled\";\n\nexport interface SubAgentRun {\n  id: string;\n  /** Profile name (matches AgentProfile.name). */\n  agent: string;\n  /** Short task description given to the sub-agent. */\n  task: string;\n  state: SubAgentState;\n  /** Optional duration label. */\n  duration?: string;\n  /** Optional last status line (preview of the latest event). */\n  lastEvent?: string;\n  /** Optional result summary (one-liner). */\n  result?: ReactNode;\n}\n\ninterface SubAgentDispatchProps extends HTMLAttributes<HTMLElement> {\n  run: SubAgentRun;\n  /** When provided, renders a cancel button while the run is in flight. */\n  onCancel?: (id: string) => void;\n}\n\nconst STATE_CONFIG: Record<SubAgentState, { label: string; class: string }> = {\n  spawning: {\n    label: \"Spawning\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  running: { label: \"Running\", class: \"border-primary/40 bg-primary/15 text-primary\" },\n  completed: { label: \"Done\", class: \"border-success/40 bg-success/15 text-success\" },\n  failed: { label: \"Failed\", class: \"border-destructive/40 bg-destructive/15 text-destructive\" },\n  cancelled: { label: \"Cancelled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * SubAgentDispatch — visualization for a Task() / sub-agent invocation.\n *\n * Shows the agent name, the task summary, current state, an inline event\n * preview, and an optional result. Use inside the agent timeline to make\n * delegation visible.\n */\nconst SubAgentDispatch = forwardRef<HTMLElement, SubAgentDispatchProps>(\n  ({ className, run, onCancel, ...props }, ref) => {\n    const cfg = STATE_CONFIG[run.state];\n    const isLive = run.state === \"spawning\" || run.state === \"running\";\n    return (\n      <article\n        data-slot=\"sub-agent-dispatch\"\n        ref={ref}\n        className={cn(\n          \"grid gap-2 rounded-lg border border-primary/30 border-l-2 border-l-primary bg-card px-4 py-3\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <CornerDownRight className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <Bot className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">dispatch</span>\n            <span className=\"font-mono text-code-sm text-primary\">{run.agent}</span>\n            {run.duration ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                · {run.duration}\n              </span>\n            ) : null}\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {isLive ? <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" /> : null}\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"text-body-sm text-foreground\">\n          <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            task\n          </span>\n          {run.task}\n        </p>\n\n        {run.lastEvent ? (\n          <p className=\"truncate font-mono text-code-sm text-muted-foreground\">\n            <span className=\"text-muted-foreground/60\">›</span> {run.lastEvent}\n          </p>\n        ) : null}\n\n        {run.result ? (\n          <p className=\"rounded-md bg-muted/40 px-3 py-2 text-body-sm text-foreground\">\n            <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              result\n            </span>\n            {run.result}\n          </p>\n        ) : null}\n\n        {isLive && onCancel ? (\n          <footer className=\"flex justify-end\">\n            <button\n              type=\"button\"\n              onClick={() => onCancel(run.id)}\n              className=\"rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Cancel\n            </button>\n          </footer>\n        ) : null}\n      </article>\n    );\n  },\n);\nSubAgentDispatch.displayName = \"SubAgentDispatch\";\n\nexport { SubAgentDispatch };\n"]}

package/dist/chunk-QTG266XU.js

@@ -0,0 +1,69 @@
+"use client";
+import { SkillCard } from './chunk-VLNFUEOR.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Search } from 'lucide-react';
+import { forwardRef, useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SkillsList = forwardRef(
+  ({ className, skills, title = "Skills", searchable = true, onToggle, ...props }, ref) => {
+    const [q, setQ] = useState("");
+    const filtered = useMemo(() => {
+      if (!q.trim()) return skills;
+      const needle = q.toLowerCase();
+      return skills.filter((s) => {
+        const hay = [
+          s.name,
+          typeof s.description === "string" ? s.description : "",
+          ...s.triggers ?? []
+        ].join(" ").toLowerCase();
+        return hay.includes(needle);
+      });
+    }, [skills, q]);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "data-slot": "skills-list",
+        ref,
+        className: cn("grid gap-3", className),
+        "aria-label": "Available skills",
+        ...props,
+        children: [
+          title || searchable ? /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+            title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : /* @__PURE__ */ jsx("span", {}),
+            searchable ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  className: "-translate-y-1/2 absolute top-1/2 left-2 size-3.5 text-muted-foreground",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "search",
+                  value: q,
+                  onChange: (e) => setQ(e.target.value),
+                  placeholder: "Filter skills\u2026",
+                  "aria-label": "Filter skills",
+                  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"
+                }
+              )
+            ] }) : null
+          ] }) : null,
+          filtered.length === 0 ? /* @__PURE__ */ jsxs("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", children: [
+            "No skills match ",
+            q ? `"${q}"` : "the current filter",
+            "."
+          ] }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: filtered.map((skill) => /* @__PURE__ */ jsx(SkillCard, { skill, ...onToggle ? { onToggle } : {} }, skill.id)) })
+        ]
+      }
+    );
+  }
+);
+SkillsList.displayName = "SkillsList";
+
+export { SkillsList };
+//# sourceMappingURL=chunk-QTG266XU.js.map
+//# sourceMappingURL=chunk-QTG266XU.js.map

package/dist/chunk-QTG266XU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/skills-list/skills-list.tsx"],"names":[],"mappings":"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","file":"chunk-QTG266XU.js","sourcesContent":["\"use client\";\n\nimport { Search } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { type Skill, SkillCard, type SkillState } from \"../../primitives/skill-card/index.js\";\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        data-slot=\"skills-list\"\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/dist/chunk-QV4BQRNH.js

@@ -0,0 +1,29 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { BookOpen } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ContextCard = forwardRef(
+  ({ className, title, description, illustration, icon, ...props }, ref) => {
+    const Icon = icon ?? BookOpen;
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "data-slot": "context-card",
+        ref,
+        className: cn("grid gap-3 rounded-xl border border-border/40 bg-muted/30 p-4", className),
+        ...props,
+        children: [
+          illustration ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: illustration }) : /* @__PURE__ */ jsx(Icon, { className: "size-5 text-primary", "aria-hidden": "true" }),
+          title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: description }) : null
+        ]
+      }
+    );
+  }
+);
+ContextCard.displayName = "ContextCard";
+
+export { ContextCard };
+//# sourceMappingURL=chunk-QV4BQRNH.js.map
+//# sourceMappingURL=chunk-QV4BQRNH.js.map

package/dist/chunk-QV4BQRNH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/context-card/context-card.tsx"],"names":[],"mappings":";;;;;AAqBA,IAAM,WAAA,GAAc,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,WAAA,EAAa,cAAc,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxE,IAAA,MAAM,OAAO,IAAA,IAAQ,QAAA;AACrB,IAAA,uBACE,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,cAAA;AAAA,QACV,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,+DAAA,EAAiE,SAAS,CAAA;AAAA,QACvF,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,YAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAA,YAAA,EAAa,CAAA,mBAEnD,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,UAE1D,wBAAQ,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2CAAA,EAA6C,iBAAM,CAAA,GAAQ,IAAA;AAAA,UACjF,8BAAc,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,uBAAY,CAAA,GAAO;AAAA;AAAA;AAAA,KACvF;AAAA,EAEJ;AACF;AACA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-QV4BQRNH.js","sourcesContent":["import { BookOpen } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\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        data-slot=\"context-card\"\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/dist/chunk-RJ6RAMKH.js

@@ -0,0 +1,89 @@
+import { useInLiveRegion } from './chunk-UGKI466V.js';
+import { cn } from './chunk-EWDN56AS.js';
+import { Sparkles, X } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return `${n}`;
+};
+var AutoCompactNotice = forwardRef(
+  ({
+    className,
+    title = "Auto-compaction soon",
+    turnsRemaining,
+    tokensToCompact,
+    onCompactNow,
+    onDismiss,
+    ...props
+  }, ref) => {
+    const inLiveRegion = useInLiveRegion();
+    return /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        "data-slot": "auto-compact-notice",
+        ref,
+        "aria-live": inLiveRegion ? void 0 : "polite",
+        className: cn(
+          "grid grid-cols-[auto_1fr_auto] items-start gap-3 rounded-lg border border-warning/40 bg-warning/10 px-4 py-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Sparkles, { className: "mt-0.5 size-4 shrink-0 text-warning", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+            /* @__PURE__ */ jsxs("p", { className: "flex items-baseline gap-2 font-medium text-body-sm text-foreground", children: [
+              title,
+              turnsRemaining !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center rounded-full bg-warning/20 px-2 py-0.5 font-mono text-label text-warning tabular-nums", children: [
+                turnsRemaining,
+                " ",
+                turnsRemaining === 1 ? "turn" : "turns",
+                " left"
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-body-sm text-muted-foreground", children: [
+              "Older context will be summarized to make room.",
+              tokensToCompact !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                "About",
+                " ",
+                /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums", children: [
+                  formatTokens(tokensToCompact),
+                  " tokens"
+                ] }),
+                " ",
+                "will be replaced by a recap."
+              ] }) : null
+            ] }),
+            onCompactNow ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onCompactNow,
+                className: "mt-1 inline-flex w-fit items-center rounded-md border border-warning/40 bg-card px-2.5 py-1 font-mono text-label text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: "Compact now"
+              }
+            ) : null
+          ] }),
+          onDismiss ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              "aria-label": "Dismiss",
+              className: "rounded-md p-1 text-warning hover:bg-warning/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+AutoCompactNotice.displayName = "AutoCompactNotice";
+
+export { AutoCompactNotice };
+//# sourceMappingURL=chunk-RJ6RAMKH.js.map
+//# sourceMappingURL=chunk-RJ6RAMKH.js.map

package/dist/chunk-RJ6RAMKH.js.map

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

package/dist/chunk-RJBCTMVW.js

@@ -0,0 +1,59 @@
+import { cn } from './chunk-EWDN56AS.js';
+import { ArrowRight } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TONE_CLASS = {
+  primary: "bg-primary text-primary-foreground",
+  accent: "bg-accent text-accent-foreground",
+  success: "bg-success text-success-foreground",
+  warning: "bg-warning text-warning-foreground",
+  info: "bg-info text-info-foreground",
+  muted: "bg-muted text-foreground"
+};
+function Avatar({ party }) {
+  const inits = party.initials ?? party.name.slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "grid size-7 place-items-center rounded-full font-bold font-mono text-label",
+          TONE_CLASS[party.tone ?? "primary"]
+        ),
+        "aria-hidden": "true",
+        children: inits
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "font-medium font-mono text-code-sm text-foreground", children: party.name })
+  ] });
+}
+var AgentHandoff = forwardRef(
+  ({ className, from, to, reason, footer, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "agent-handoff",
+      ref,
+      className: cn(
+        "grid gap-2 rounded-lg border border-primary/30 border-dashed bg-primary/5 px-4 py-3",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Avatar, { party: from }),
+          /* @__PURE__ */ jsx(ArrowRight, { className: "size-4 text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Avatar, { party: to }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: "handoff" })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-body-sm text-foreground", children: reason }),
+        footer ? /* @__PURE__ */ jsx("p", { className: "font-mono text-label text-muted-foreground", children: footer }) : null
+      ]
+    }
+  )
+);
+AgentHandoff.displayName = "AgentHandoff";
+
+export { AgentHandoff };
+//# sourceMappingURL=chunk-RJBCTMVW.js.map
+//# sourceMappingURL=chunk-RJBCTMVW.js.map

package/dist/chunk-RJBCTMVW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/agent-handoff/agent-handoff.tsx"],"names":[],"mappings":";;;;;AAuBA,IAAM,UAAA,GAAgE;AAAA,EACpE,OAAA,EAAS,oCAAA;AAAA,EACT,MAAA,EAAQ,kCAAA;AAAA,EACR,OAAA,EAAS,oCAAA;AAAA,EACT,OAAA,EAAS,oCAAA;AAAA,EACT,IAAA,EAAM,8BAAA;AAAA,EACN,KAAA,EAAO;AACT,CAAA;AAEA,SAAS,MAAA,CAAO,EAAE,KAAA,EAAM,EAA4B;AAClD,EAAA,MAAM,KAAA,GAAQ,MAAM,QAAA,IAAY,KAAA,CAAM,KAAK,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,CAAE,WAAA,EAAY;AACnE,EAAA,uBACE,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gCAAA,EACd,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,4EAAA;AAAA,UACA,UAAA,CAAW,KAAA,CAAM,IAAA,IAAQ,SAAS;AAAA,SACpC;AAAA,QACA,aAAA,EAAY,MAAA;AAAA,QAEX,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDAAA,EAAsD,gBAAM,IAAA,EAAK;AAAA,GAAA,EACnF,CAAA;AAEJ;AAOA,IAAM,YAAA,GAAe,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,QAAQ,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,qBAClD,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,qFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,yBAAA,EAChB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAO,IAAA,EAAM,CAAA;AAAA,0BACrB,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,qBAAA,EAAsB,eAAY,MAAA,EAAO,CAAA;AAAA,0BAC/D,GAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,EAAA,EAAI,CAAA;AAAA,0BACnB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kFAAA,EAAmF,QAAA,EAAA,SAAA,EAEnG;AAAA,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8BAAA,EAAgC,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACnD,yBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4CAAA,EAA8C,kBAAO,CAAA,GAAO;AAAA;AAAA;AAAA;AAGzF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-RJBCTMVW.js","sourcesContent":["import { ArrowRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport interface HandoffParty {\n  /** Display name, e.g. \"planner\". */\n  name: string;\n  /** Optional avatar initials (max 2 chars). */\n  initials?: string;\n  /** Identity tone matching AgentProfile. */\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"info\" | \"muted\";\n}\n\ninterface AgentHandoffProps extends HTMLAttributes<HTMLElement> {\n  from: HandoffParty;\n  to: HandoffParty;\n  /** What is being handed off — short reason / payload preview. */\n  reason: ReactNode;\n  /** Optional metadata footer (e.g. timestamp, token budget). */\n  footer?: ReactNode;\n}\n\nconst TONE_CLASS: Record<NonNullable<HandoffParty[\"tone\"]>, string> = {\n  primary: \"bg-primary text-primary-foreground\",\n  accent: \"bg-accent text-accent-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  info: \"bg-info text-info-foreground\",\n  muted: \"bg-muted text-foreground\",\n};\n\nfunction Avatar({ party }: { party: HandoffParty }) {\n  const inits = party.initials ?? party.name.slice(0, 2).toUpperCase();\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span\n        className={cn(\n          \"grid size-7 place-items-center rounded-full font-bold font-mono text-label\",\n          TONE_CLASS[party.tone ?? \"primary\"],\n        )}\n        aria-hidden=\"true\"\n      >\n        {inits}\n      </span>\n      <span className=\"font-medium font-mono text-code-sm text-foreground\">{party.name}</span>\n    </span>\n  );\n}\n\n/**\n * AgentHandoff — visual marker of one agent delegating to another. Pairs\n * with AgentProfile for the identity tones; place it in the timeline so the\n * user sees the baton being passed.\n */\nconst AgentHandoff = forwardRef<HTMLElement, AgentHandoffProps>(\n  ({ className, from, to, reason, footer, ...props }, ref) => (\n    <article\n      data-slot=\"agent-handoff\"\n      ref={ref}\n      className={cn(\n        \"grid gap-2 rounded-lg border border-primary/30 border-dashed bg-primary/5 px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <header className=\"flex items-center gap-2\">\n        <Avatar party={from} />\n        <ArrowRight className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <Avatar party={to} />\n        <span className=\"ml-auto font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          handoff\n        </span>\n      </header>\n      <p className=\"text-body-sm text-foreground\">{reason}</p>\n      {footer ? <p className=\"font-mono text-label text-muted-foreground\">{footer}</p> : null}\n    </article>\n  ),\n);\nAgentHandoff.displayName = \"AgentHandoff\";\n\nexport { AgentHandoff };\n"]}