@usetheo/ui 0.8.0-next.0 → 0.10.0-next.0

package/dist/chunk-TO3UAT6O.js

@@ -0,0 +1,221 @@
+import { ALL_MODES, MODE_LABEL } from './chunk-VM4RMQQN.js';
+import { Textarea } from './chunk-WWNH5ENT.js';
+import { Select } from './chunk-EP25QJ4N.js';
+import { FormField } from './chunk-TK24HQJJ.js';
+import { Input } from './chunk-H3VJMFJQ.js';
+import { Button } from './chunk-57NXT3OX.js';
+import { cn } from './chunk-ZSRJCIWF.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TONES = [
+  { id: "primary", label: "Primary (violet)" },
+  { id: "accent", label: "Accent (sienna)" },
+  { id: "success", label: "Success (green)" },
+  { id: "warning", label: "Warning (amber)" },
+  { id: "info", label: "Info (blue)" },
+  { id: "muted", label: "Muted (neutral)" }
+];
+function AgentEditor({
+  className,
+  initial,
+  models,
+  skills,
+  onSave,
+  onCancel,
+  onDelete,
+  ...formProps
+}) {
+  const [name, setName] = useState(initial?.name ?? "");
+  const [initials, setInitials] = useState(initial?.initials ?? "");
+  const [description, setDescription] = useState(
+    typeof initial?.description === "string" ? initial.description : ""
+  );
+  const [tone, setTone] = useState(
+    initial?.tone ?? "primary"
+  );
+  const [model, setModel] = useState(initial?.model ?? models?.[0]?.id ?? "");
+  const [systemPrompt, setSystemPrompt] = useState(initial?.systemPrompt ?? "");
+  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(", ") ?? "");
+  const [skillsSelected, setSkillsSelected] = useState(
+    new Set(initial?.skillIds ?? [])
+  );
+  const [modes, setModes] = useState(initial?.modes ?? []);
+  const toggleMode = (m) => setModes((prev) => prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m]);
+  const canSave = name.trim().length > 0;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!canSave) return;
+    onSave({
+      id: initial?.id,
+      name: name.trim(),
+      initials: initials.trim() || void 0,
+      description: description.trim() || void 0,
+      tone,
+      model: model || void 0,
+      systemPrompt: systemPrompt.trim() || void 0,
+      allowedTools: allowedToolsRaw.split(",").map((t) => t.trim()).filter(Boolean),
+      skillIds: Array.from(skillsSelected),
+      modes: modes.length > 0 ? modes : void 0
+    });
+  };
+  const toggleSkill = (id) => {
+    setSkillsSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn("flex h-full flex-col gap-4", className),
+      ...formProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-3", children: [
+          /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormField.Label, { children: "Name" }),
+            /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                placeholder: "Coder",
+                required: true
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(FormField, { className: "w-24", children: [
+            /* @__PURE__ */ jsx(FormField.Label, { children: "Initials" }),
+            /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: initials,
+                onChange: (e) => setInitials(e.target.value.slice(0, 2).toUpperCase()),
+                placeholder: "CO",
+                maxLength: 2,
+                className: "text-center font-mono uppercase"
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Description" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: description,
+              onChange: (e) => setDescription(e.target.value),
+              placeholder: "Writes code, edits files, runs verification."
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormField.Label, { children: "Tone" }),
+            /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: tone,
+                onValueChange: (v) => {
+                  const next = TONES.find((t) => t.id === v);
+                  if (next) setTone(next.id);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": "Select tone", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                  /* @__PURE__ */ jsx(Select.Content, { children: TONES.map((t) => /* @__PURE__ */ jsx(Select.Item, { value: t.id, children: t.label }, t.id)) })
+                ]
+              }
+            ) })
+          ] }),
+          models && models.length > 0 ? /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormField.Label, { children: "Model" }),
+            /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsxs(Select, { value: model, onValueChange: setModel, children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": "Select model", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+              /* @__PURE__ */ jsx(Select.Content, { children: models.map((m) => /* @__PURE__ */ jsx(Select.Item, { value: m.id, children: m.label }, m.id)) })
+            ] }) })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "System prompt override" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: systemPrompt,
+              onChange: (e) => setSystemPrompt(e.target.value),
+              rows: 6,
+              placeholder: "You are the Coder. You write code, edit files, and run verification\u2026",
+              className: "min-h-[10rem] flex-1 font-mono text-code-sm"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormField.Hint, { children: "Leave empty to inherit the workspace default." })
+        ] }),
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Allowed tools" }),
+          /* @__PURE__ */ jsx(FormField.Control, { children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: allowedToolsRaw,
+              onChange: (e) => setAllowedToolsRaw(e.target.value),
+              placeholder: "Read, Edit, Bash"
+            }
+          ) })
+        ] }),
+        skills && skills.length > 0 ? /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Linked skills" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: skills.map((s) => {
+            const on = skillsSelected.has(s.id);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleSkill(s.id),
+                "aria-pressed": on,
+                className: cn(
+                  "inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors",
+                  on ? "border-primary bg-primary/15 text-primary" : "border-border/60 bg-card text-muted-foreground hover:text-foreground"
+                ),
+                children: s.label
+              },
+              s.id
+            );
+          }) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormField.Label, { children: "Active modes" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: ALL_MODES.map((m) => {
+            const on = modes.includes(m);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleMode(m),
+                "aria-pressed": on,
+                className: cn(
+                  "inline-flex h-7 items-center rounded-full border px-3 font-mono text-body-sm transition-colors",
+                  on ? "border-primary bg-primary/15 text-primary" : "border-border/60 bg-card text-muted-foreground hover:text-foreground"
+                ),
+                children: MODE_LABEL[m]
+              },
+              m
+            );
+          }) }),
+          /* @__PURE__ */ jsx(FormField.Hint, { children: modes.length === 0 ? "Empty = global (available in every mode)." : `Only visible in: ${modes.map((m) => MODE_LABEL[m]).join(", ")}.` })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between gap-2 border-border/40 border-t pt-4", children: [
+          /* @__PURE__ */ jsx("div", { children: onDelete ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: onDelete, children: "Delete" }) : null }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            onCancel ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onCancel, children: "Cancel" }) : null,
+            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSave, children: initial?.id ? "Save changes" : "Create agent" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AgentEditor };
+//# sourceMappingURL=chunk-TO3UAT6O.js.map
+//# sourceMappingURL=chunk-TO3UAT6O.js.map

package/dist/chunk-TO3UAT6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/agent-editor/agent-editor.tsx"],"names":[],"mappings":";;;;;;;;;;AAkCA,IAAM,KAAA,GAAmF;AAAA,EACvF,EAAE,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,kBAAA,EAAmB;AAAA,EAC3C,EAAE,EAAA,EAAI,QAAA,EAAU,KAAA,EAAO,iBAAA,EAAkB;AAAA,EACzC,EAAE,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,iBAAA,EAAkB;AAAA,EAC1C,EAAE,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,iBAAA,EAAkB;AAAA,EAC1C,EAAE,EAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAc;AAAA,EACnC,EAAE,EAAA,EAAI,OAAA,EAAS,KAAA,EAAO,iBAAA;AACxB,CAAA;AAEO,SAAS,WAAA,CAAY;AAAA,EAC1B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,QAAA,CAAS,OAAA,EAAS,QAAQ,EAAE,CAAA;AACpD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAI,QAAA,CAAS,OAAA,EAAS,YAAY,EAAE,CAAA;AAChE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA;AAAA,IACpC,OAAO,OAAA,EAAS,WAAA,KAAgB,QAAA,GAAW,QAAQ,WAAA,GAAc;AAAA,GACnE;AACA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAA;AAAA,IACtB,SAAS,IAAA,IAAQ;AAAA,GACnB;AACA,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA,CAAiB,OAAA,EAAS,KAAA,IAAS,MAAA,GAAS,CAAC,CAAA,EAAG,EAAA,IAAM,EAAE,CAAA;AAClF,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,IAAI,QAAA,CAAS,OAAA,EAAS,gBAAgB,EAAE,CAAA;AAC5E,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA,CAAS,SAAS,YAAA,EAAc,IAAA,CAAK,IAAI,CAAA,IAAK,EAAE,CAAA;AAC9F,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA;AAAA,IAC1C,IAAI,GAAA,CAAI,OAAA,EAAS,QAAA,IAAY,EAAE;AAAA,GACjC;AACA,EAAA,MAAM,CAAC,OAAO,QAAQ,CAAA,GAAI,SAAiB,OAAA,EAAS,KAAA,IAAS,EAAE,CAAA;AAO/D,EAAA,MAAM,UAAA,GAAa,CAAC,CAAA,KAClB,QAAA,CAAS,CAAC,IAAA,KAAU,IAAA,CAAK,SAAS,CAAC,CAAA,GAAI,KAAK,MAAA,CAAO,CAAC,MAAM,CAAA,KAAM,CAAC,IAAI,CAAC,GAAG,IAAA,EAAM,CAAC,CAAE,CAAA;AAEpF,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,IAAA,EAAK,CAAE,MAAA,GAAS,CAAA;AACrC,EAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAAiB;AACrC,IAAA,CAAA,CAAE,cAAA,EAAe;AACjB,IAAA,IAAI,CAAC,OAAA,EAAS;AACd,IAAA,MAAA,CAAO;AAAA,MACL,IAAI,OAAA,EAAS,EAAA;AAAA,MACb,IAAA,EAAM,KAAK,IAAA,EAAK;AAAA,MAChB,QAAA,EAAU,QAAA,CAAS,IAAA,EAAK,IAAK,MAAA;AAAA,MAC7B,WAAA,EAAa,WAAA,CAAY,IAAA,EAAK,IAAK,MAAA;AAAA,MACnC,IAAA;AAAA,MACA,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,YAAA,EAAc,YAAA,CAAa,IAAA,EAAK,IAAK,MAAA;AAAA,MACrC,YAAA,EAAc,eAAA,CACX,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAA,EAAM,CAAA,CACnB,OAAO,OAAO,CAAA;AAAA,MACjB,QAAA,EAAU,KAAA,CAAM,IAAA,CAAK,cAAc,CAAA;AAAA,MACnC,KAAA,EAAO,KAAA,CAAM,MAAA,GAAS,CAAA,GAAI,KAAA,GAAQ;AAAA,KACnC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,EAAA,KAAe;AAClC,IAAA,iBAAA,CAAkB,CAAC,IAAA,KAAS;AAC1B,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,IAAI,CAAA;AACzB,MAAA,IAAI,KAAK,GAAA,CAAI,EAAE,CAAA,EAAG,IAAA,CAAK,OAAO,EAAE,CAAA;AAAA,WAC3B,IAAA,CAAK,IAAI,EAAE,CAAA;AAChB,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA;AAAA,MACpD,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,4BACrB,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,KAAA,EAAO,IAAA;AAAA,gBACP,UAAU,CAAC,CAAA,KAAM,OAAA,CAAQ,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,gBACvC,WAAA,EAAY,OAAA;AAAA,gBACZ,QAAA,EAAQ;AAAA;AAAA,aACV,EACF;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,MAAA,EACnB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,UAAA,EAAQ,CAAA;AAAA,4BACzB,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,KAAA,EAAO,QAAA;AAAA,gBACP,QAAA,EAAU,CAAC,CAAA,KAAM,WAAA,CAAY,CAAA,CAAE,MAAA,CAAO,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,CAAE,WAAA,EAAa,CAAA;AAAA,gBACrE,WAAA,EAAY,IAAA;AAAA,gBACZ,SAAA,EAAW,CAAA;AAAA,gBACX,SAAA,EAAU;AAAA;AAAA,aACZ,EACF;AAAA,WAAA,EACF;AAAA,SAAA,EACF,CAAA;AAAA,6BAEC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,0BAC5B,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,WAAA;AAAA,cACP,UAAU,CAAC,CAAA,KAAM,cAAA,CAAe,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAC9C,WAAA,EAAY;AAAA;AAAA,WACd,EACF;AAAA,SAAA,EACF,CAAA;AAAA,wBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,MAAA,EAAI,CAAA;AAAA,4BACrB,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAA,IAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,KAAA,EAAO,IAAA;AAAA,gBACP,aAAA,EAAe,CAAC,CAAA,KAAM;AAOpB,kBAAA,MAAM,OAAO,KAAA,CAAM,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,CAAC,CAAA;AACzC,kBAAA,IAAI,IAAA,EAAM,OAAA,CAAQ,IAAA,CAAK,EAAE,CAAA;AAAA,gBAC3B,CAAA;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,MAAA,CAAO,SAAP,EAAe,YAAA,EAAW,eACzB,QAAA,kBAAA,GAAA,CAAC,MAAA,CAAO,KAAA,EAAP,EAAa,CAAA,EAChB,CAAA;AAAA,kCACA,GAAA,CAAC,OAAO,OAAA,EAAP,EACE,gBAAM,GAAA,CAAI,CAAC,sBACV,GAAA,CAAC,MAAA,CAAO,MAAP,EAAuB,KAAA,EAAO,EAAE,EAAA,EAC9B,QAAA,EAAA,CAAA,CAAE,SADa,CAAA,CAAE,EAEpB,CACD,CAAA,EACH;AAAA;AAAA;AAAA,aACF,EACF;AAAA,WAAA,EACF,CAAA;AAAA,UACC,MAAA,IAAU,MAAA,CAAO,MAAA,GAAS,CAAA,wBACxB,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,4BACtB,GAAA,CAAC,UAAU,OAAA,EAAV,EACC,+BAAC,MAAA,EAAA,EAAO,KAAA,EAAO,KAAA,EAAO,aAAA,EAAe,QAAA,EACnC,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,CAAO,SAAP,EAAe,YAAA,EAAW,gBACzB,QAAA,kBAAA,GAAA,CAAC,MAAA,CAAO,KAAA,EAAP,EAAa,CAAA,EAChB,CAAA;AAAA,8BACA,GAAA,CAAC,OAAO,OAAA,EAAP,EACE,iBAAO,GAAA,CAAI,CAAC,sBACX,GAAA,CAAC,MAAA,CAAO,MAAP,EAAuB,KAAA,EAAO,EAAE,EAAA,EAC9B,QAAA,EAAA,CAAA,CAAE,SADa,CAAA,CAAE,EAEpB,CACD,CAAA,EACH;AAAA,aAAA,EACF,CAAA,EACF;AAAA,WAAA,EACF,CAAA,GACE;AAAA,SAAA,EACN,CAAA;AAAA,wBAEA,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAU,QAAA,EACnB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,wBAAA,EAAsB,CAAA;AAAA,0BACvC,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,YAAA;AAAA,cACP,UAAU,CAAC,CAAA,KAAM,eAAA,CAAgB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAC/C,IAAA,EAAM,CAAA;AAAA,cACN,WAAA,EAAY,2EAAA;AAAA,cACZ,SAAA,EAAU;AAAA;AAAA,WACZ,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,SAAA,CAAU,IAAA,EAAV,EAAe,QAAA,EAAA,+CAAA,EAA6C;AAAA,SAAA,EAC/D,CAAA;AAAA,6BAEC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,0BAC9B,GAAA,CAAC,SAAA,CAAU,OAAA,EAAV,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,eAAA;AAAA,cACP,UAAU,CAAC,CAAA,KAAM,kBAAA,CAAmB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAClD,WAAA,EAAY;AAAA;AAAA,WACd,EACF;AAAA,SAAA,EACF,CAAA;AAAA,QAEC,MAAA,IAAU,MAAA,CAAO,MAAA,GAAS,CAAA,wBACxB,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,eAAA,EAAa,CAAA;AAAA,8BAC7B,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,KAAM;AACjB,YAAA,MAAM,EAAA,GAAK,cAAA,CAAe,GAAA,CAAI,CAAA,CAAE,EAAE,CAAA;AAClC,YAAA,uBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBAEC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAM,WAAA,CAAY,CAAA,CAAE,EAAE,CAAA;AAAA,gBAC/B,cAAA,EAAc,EAAA;AAAA,gBACd,SAAA,EAAW,EAAA;AAAA,kBACT,gGAAA;AAAA,kBACA,KACI,2CAAA,GACA;AAAA,iBACN;AAAA,gBAEC,QAAA,EAAA,CAAA,CAAE;AAAA,eAAA;AAAA,cAXE,CAAA,CAAE;AAAA,aAYT;AAAA,UAEJ,CAAC,CAAA,EACH;AAAA,SAAA,EACF,CAAA,GACE,IAAA;AAAA,6BAEH,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,CAAU,KAAA,EAAV,EAAgB,QAAA,EAAA,cAAA,EAAY,CAAA;AAAA,8BAC5B,KAAA,EAAA,EAAI,SAAA,EAAU,0BACZ,QAAA,EAAA,SAAA,CAAU,GAAA,CAAI,CAAC,CAAA,KAAM;AACpB,YAAA,MAAM,EAAA,GAAK,KAAA,CAAM,QAAA,CAAS,CAAC,CAAA;AAC3B,YAAA,uBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBAEC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAM,UAAA,CAAW,CAAC,CAAA;AAAA,gBAC3B,cAAA,EAAc,EAAA;AAAA,gBACd,SAAA,EAAW,EAAA;AAAA,kBACT,gGAAA;AAAA,kBACA,KACI,2CAAA,GACA;AAAA,iBACN;AAAA,gBAEC,qBAAW,CAAC;AAAA,eAAA;AAAA,cAXR;AAAA,aAYP;AAAA,UAEJ,CAAC,CAAA,EACH,CAAA;AAAA,0BACA,GAAA,CAAC,UAAU,IAAA,EAAV,EACE,gBAAM,MAAA,KAAW,CAAA,GACd,8CACA,CAAA,iBAAA,EAAoB,KAAA,CAAM,IAAI,CAAC,CAAA,KAAM,WAAW,CAAC,CAAC,EAAE,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA,CAAA,EACpE;AAAA,SAAA,EACF,CAAA;AAAA,wBAEA,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,wEAAA,EAChB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EACE,QAAA,EAAA,QAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,OAAA,EAAQ,OAAA,EAAQ,OAAA,EAAS,QAAA,EAAU,QAAA,EAAA,QAAA,EAEzD,CAAA,GACE,IAAA,EACN,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,QAAA,mBACC,GAAA,CAAC,UAAO,IAAA,EAAK,QAAA,EAAS,SAAQ,WAAA,EAAY,OAAA,EAAS,QAAA,EAAU,QAAA,EAAA,QAAA,EAE7D,CAAA,GACE,IAAA;AAAA,4BACJ,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,QAAA,EAAU,CAAC,OAAA,EAC9B,QAAA,EAAA,OAAA,EAAS,EAAA,GAAK,cAAA,GAAiB,cAAA,EAClC;AAAA,WAAA,EACF;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-TO3UAT6O.js","sourcesContent":["import { useState } from \"react\";\nimport type { FormEvent, HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { ALL_MODES, MODE_LABEL, type Mode } from \"../../../types/mode.js\";\nimport type { AgentProfileDescriptor } from \"../../primitives/agent-profile/index.js\";\nimport { Button } from \"../../primitives/button/index.js\";\nimport { FormField } from \"../../primitives/form-field/index.js\";\nimport { Input } from \"../../primitives/input/index.js\";\nimport { Select } from \"../../primitives/select/index.js\";\nimport { Textarea } from \"../../primitives/textarea/index.js\";\n\n/**\n * AgentEditor — form for creating or editing an Agent persona.\n */\n\nexport interface AgentDraft extends Omit<AgentProfileDescriptor, \"id\"> {\n  id?: string;\n  systemPrompt?: string;\n  model?: string;\n  allowedTools?: string[];\n  skillIds?: string[];\n  /** Modes this agent is visible in. Omit / empty = global (all modes). */\n  modes?: Mode[];\n}\n\ninterface AgentEditorProps extends Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\" | \"onChange\"> {\n  initial?: Partial<AgentDraft>;\n  models?: Array<{ id: string; label: string }>;\n  skills?: Array<{ id: string; label: string }>;\n  onSave: (draft: AgentDraft) => void;\n  onCancel?: () => void;\n  onDelete?: () => void;\n}\n\nconst TONES: Array<{ id: NonNullable<AgentProfileDescriptor[\"tone\"]>; label: string }> = [\n  { id: \"primary\", label: \"Primary (violet)\" },\n  { id: \"accent\", label: \"Accent (sienna)\" },\n  { id: \"success\", label: \"Success (green)\" },\n  { id: \"warning\", label: \"Warning (amber)\" },\n  { id: \"info\", label: \"Info (blue)\" },\n  { id: \"muted\", label: \"Muted (neutral)\" },\n];\n\nexport function AgentEditor({\n  className,\n  initial,\n  models,\n  skills,\n  onSave,\n  onCancel,\n  onDelete,\n  ...formProps\n}: AgentEditorProps) {\n  const [name, setName] = useState(initial?.name ?? \"\");\n  const [initials, setInitials] = useState(initial?.initials ?? \"\");\n  const [description, setDescription] = useState(\n    typeof initial?.description === \"string\" ? initial.description : \"\",\n  );\n  const [tone, setTone] = useState<NonNullable<AgentProfileDescriptor[\"tone\"]>>(\n    initial?.tone ?? \"primary\",\n  );\n  const [model, setModel] = useState<string>(initial?.model ?? models?.[0]?.id ?? \"\");\n  const [systemPrompt, setSystemPrompt] = useState(initial?.systemPrompt ?? \"\");\n  const [allowedToolsRaw, setAllowedToolsRaw] = useState(initial?.allowedTools?.join(\", \") ?? \"\");\n  const [skillsSelected, setSkillsSelected] = useState<Set<string>>(\n    new Set(initial?.skillIds ?? []),\n  );\n  const [modes, setModes] = useState<Mode[]>(initial?.modes ?? []);\n\n  // Note: state is only seeded once on mount. To reset the form when editing a\n  // different agent, use the React `key` pattern at the call site:\n  //   <AgentEditor key={agent.id} initial={agent} ... />\n  // This is the idiomatic React way (over a useEffect that watches prop deltas\n  // and writes setters) — it guarantees a clean component instance per entity.\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      initials: initials.trim() || undefined,\n      description: description.trim() || undefined,\n      tone,\n      model: model || undefined,\n      systemPrompt: systemPrompt.trim() || undefined,\n      allowedTools: allowedToolsRaw\n        .split(\",\")\n        .map((t) => t.trim())\n        .filter(Boolean),\n      skillIds: Array.from(skillsSelected),\n      modes: modes.length > 0 ? modes : undefined,\n    });\n  };\n\n  const toggleSkill = (id: string) => {\n    setSkillsSelected((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\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      <div className=\"grid grid-cols-[1fr_auto] gap-3\">\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=\"Coder\"\n              required\n            />\n          </FormField.Control>\n        </FormField>\n        <FormField className=\"w-24\">\n          <FormField.Label>Initials</FormField.Label>\n          <FormField.Control>\n            <Input\n              value={initials}\n              onChange={(e) => setInitials(e.target.value.slice(0, 2).toUpperCase())}\n              placeholder=\"CO\"\n              maxLength={2}\n              className=\"text-center font-mono uppercase\"\n            />\n          </FormField.Control>\n        </FormField>\n      </div>\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=\"Writes code, edits files, runs verification.\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <FormField>\n          <FormField.Label>Tone</FormField.Label>\n          <FormField.Control>\n            <Select\n              value={tone}\n              onValueChange={(v) => {\n                // Re-audit Issue 7: narrow the string `v` against TONES.id\n                // values before casting. Radix Select guarantees `v` is one\n                // of the Select.Item values declared below, but adding the\n                // runtime guard keeps the type narrowing explicit and\n                // surfaces invalid future configurations as no-ops instead\n                // of silently writing a bad state.\n                const next = TONES.find((t) => t.id === v);\n                if (next) setTone(next.id);\n              }}\n            >\n              <Select.Trigger aria-label=\"Select tone\">\n                <Select.Value />\n              </Select.Trigger>\n              <Select.Content>\n                {TONES.map((t) => (\n                  <Select.Item key={t.id} value={t.id}>\n                    {t.label}\n                  </Select.Item>\n                ))}\n              </Select.Content>\n            </Select>\n          </FormField.Control>\n        </FormField>\n        {models && models.length > 0 ? (\n          <FormField>\n            <FormField.Label>Model</FormField.Label>\n            <FormField.Control>\n              <Select value={model} onValueChange={setModel}>\n                <Select.Trigger aria-label=\"Select model\">\n                  <Select.Value />\n                </Select.Trigger>\n                <Select.Content>\n                  {models.map((m) => (\n                    <Select.Item key={m.id} value={m.id}>\n                      {m.label}\n                    </Select.Item>\n                  ))}\n                </Select.Content>\n              </Select>\n            </FormField.Control>\n          </FormField>\n        ) : null}\n      </div>\n\n      <FormField className=\"flex-1\">\n        <FormField.Label>System prompt override</FormField.Label>\n        <FormField.Control>\n          <Textarea\n            value={systemPrompt}\n            onChange={(e) => setSystemPrompt(e.target.value)}\n            rows={6}\n            placeholder=\"You are the Coder. You write code, edit files, and run verification…\"\n            className=\"min-h-[10rem] flex-1 font-mono text-code-sm\"\n          />\n        </FormField.Control>\n        <FormField.Hint>Leave empty to inherit the workspace default.</FormField.Hint>\n      </FormField>\n\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, Edit, Bash\"\n          />\n        </FormField.Control>\n      </FormField>\n\n      {skills && skills.length > 0 ? (\n        <FormField>\n          <FormField.Label>Linked skills</FormField.Label>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {skills.map((s) => {\n              const on = skillsSelected.has(s.id);\n              return (\n                <button\n                  key={s.id}\n                  type=\"button\"\n                  onClick={() => toggleSkill(s.id)}\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                  {s.label}\n                </button>\n              );\n            })}\n          </div>\n        </FormField>\n      ) : null}\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      <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 agent\"}\n          </Button>\n        </div>\n      </footer>\n    </form>\n  );\n}\n"]}

package/dist/chunk-UAYOOTRR.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { TrendingDown, TrendingUp } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MetricsPanel = forwardRef(
+  ({ className, title, description, metrics, columns, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("rounded-xl border bg-card p-5 shadow-sm", className), ...props, children: [
+    title || description ? /* @__PURE__ */ jsxs("header", { className: "mb-4 grid gap-0.5", children: [
+      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
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid gap-4",
+        style: {
+          gridTemplateColumns: columns ? `repeat(${columns}, minmax(0, 1fr))` : "repeat(auto-fit, minmax(180px, 1fr))"
+        },
+        children: metrics.map((m) => /* @__PURE__ */ jsx(Tile, { metric: m }, m.label))
+      }
+    )
+  ] })
+);
+MetricsPanel.displayName = "MetricsPanel";
+function Tile({ metric }) {
+  const interactive = metric.onClick !== void 0;
+  const Tag = interactive ? "button" : "div";
+  const ariaLabel = interactive ? metric.actionLabel ?? `View ${metric.label} details` : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      type: interactive ? "button" : void 0,
+      onClick: metric.onClick,
+      "aria-label": ariaLabel,
+      className: cn(
+        "flex flex-col gap-2 rounded-lg border border-border/30 bg-muted/30 p-4 text-left",
+        "transition-colors duration-base ease-out-soft",
+        interactive && "hover:border-primary/40 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-sans text-label-caps text-muted-foreground uppercase", children: metric.label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-bold font-display text-display-md tabular-nums leading-none", children: metric.value }),
+          metric.unit ? /* @__PURE__ */ jsx("span", { className: "font-mono text-body-sm text-muted-foreground", children: metric.unit }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          metric.delta ? /* @__PURE__ */ jsx(Delta, { metric }) : null,
+          metric.sparkline && metric.sparkline.length > 0 ? /* @__PURE__ */ jsx(Sparkline, { values: metric.sparkline }) : null
+        ] })
+      ]
+    }
+  );
+}
+function Delta({ metric }) {
+  const tone = metric.deltaGood === void 0 ? "text-muted-foreground" : metric.deltaGood ? "text-success" : "text-destructive";
+  const Icon = metric.deltaGood === false ? TrendingDown : TrendingUp;
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1 font-mono text-body-sm", tone), children: [
+    /* @__PURE__ */ jsx(Icon, { className: "size-3" }),
+    " ",
+    metric.delta
+  ] });
+}
+function Sparkline({ values }) {
+  const clamped = values.map((v) => Math.max(0, Math.min(1, v)));
+  return /* @__PURE__ */ jsx("span", { className: "ml-auto flex h-6 items-end gap-[2px]", "aria-hidden": "true", children: clamped.map((v, idx) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "w-[3px] rounded-sm bg-primary/60",
+      style: { height: `${Math.max(8, v * 100)}%` }
+    },
+    idx
+  )) });
+}
+
+export { MetricsPanel };
+//# sourceMappingURL=chunk-UAYOOTRR.js.map
+//# sourceMappingURL=chunk-UAYOOTRR.js.map

package/dist/chunk-UAYOOTRR.js.map

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

package/dist/chunk-UDTAMHXW.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Cloud, FileSpreadsheet, Folder } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CreatedFilesCard = forwardRef(
+  ({ className, title = "Files created", files, cta, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("rounded-xl border border-primary/40 bg-primary/5 p-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "mb-3 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Cloud, { className: "size-4 text-primary", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: files.map((file) => {
+          const Icon = file.icon ?? FileSpreadsheet;
+          const RowTag = file.href ? "a" : "div";
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            RowTag,
+            {
+              href: file.href,
+              target: file.href ? "_blank" : void 0,
+              rel: file.href ? "noreferrer" : void 0,
+              className: cn(
+                "flex items-center gap-3 rounded-md border border-border/40 bg-card px-3 py-2",
+                file.href && "transition-colors hover:border-primary/40 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-primary", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-code-md text-foreground", children: file.name }),
+                  file.destination ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 truncate text-body-sm text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx(Folder, { className: "size-3 shrink-0", "aria-hidden": "true" }),
+                    " ",
+                    file.destination
+                  ] }) : null
+                ] }),
+                file.size ? /* @__PURE__ */ jsx("span", { className: "font-mono text-code-sm text-muted-foreground", children: file.size }) : null
+              ]
+            }
+          ) }, file.id);
+        }) }),
+        cta ? /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-end", children: cta }) : null
+      ]
+    }
+  )
+);
+CreatedFilesCard.displayName = "CreatedFilesCard";
+
+export { CreatedFilesCard };
+//# sourceMappingURL=chunk-UDTAMHXW.js.map
+//# sourceMappingURL=chunk-UDTAMHXW.js.map

package/dist/chunk-UDTAMHXW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/created-files-card/created-files-card.tsx"],"names":[],"mappings":";;;;;AAkCA,IAAM,gBAAA,GAAmB,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,eAAA,EAAiB,OAAO,GAAA,EAAK,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC7D,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,sDAAA,EAAwD,SAAS,CAAA;AAAA,MAC9E,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,8BAAA,EAChB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,qBAAA,EAAsB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,0BAC1D,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2CAAA,EAA6C,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EACnE,CAAA;AAAA,4BACC,IAAA,EAAA,EAAG,SAAA,EAAU,cACX,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,UAAA,MAAM,IAAA,GAAO,KAAK,IAAA,IAAQ,eAAA;AAC1B,UAAA,MAAM,MAAA,GAAS,IAAA,CAAK,IAAA,GAAO,GAAA,GAAM,KAAA;AACjC,UAAA,2BACG,IAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,MAAA,EAAQ,IAAA,CAAK,IAAA,GAAO,QAAA,GAAW,MAAA;AAAA,cAC/B,GAAA,EAAK,IAAA,CAAK,IAAA,GAAO,YAAA,GAAe,MAAA;AAAA,cAChC,SAAA,EAAW,EAAA;AAAA,gBACT,8EAAA;AAAA,gBACA,KAAK,IAAA,IACH;AAAA,eACJ;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EAA+B,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,gCAClE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iDAAA,EAAmD,QAAA,EAAA,IAAA,CAAK,IAAA,EAAK,CAAA;AAAA,kBACzE,IAAA,CAAK,WAAA,mBACJ,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,qEAAA,EACX,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAU,iBAAA,EAAkB,aAAA,EAAY,MAAA,EAAO,CAAA;AAAA,oBAAE,GAAA;AAAA,oBAAE,IAAA,CAAK;AAAA,mBAAA,EAClE,CAAA,GACE;AAAA,iBAAA,EACN,CAAA;AAAA,gBACC,IAAA,CAAK,uBACJ,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,8CAAA,EAAgD,QAAA,EAAA,IAAA,CAAK,MAAK,CAAA,GACxE;AAAA;AAAA;AAAA,WACN,EAAA,EAvBO,KAAK,EAwBd,CAAA;AAAA,QAEJ,CAAC,CAAA,EACH,CAAA;AAAA,QACC,sBAAM,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EAAyB,eAAI,CAAA,GAAS;AAAA;AAAA;AAAA;AAGlE;AACA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"chunk-UDTAMHXW.js","sourcesContent":["import { Cloud, FileSpreadsheet, Folder } 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\nexport interface CreatedFile {\n  id: string;\n  name: string;\n  /** Optional size for display, e.g. \"42 KB\". */\n  size?: string;\n  /** Icon override. */\n  icon?: IconComponent;\n  /** Optional destination metadata (e.g. \"Google Drive · /Reports\"). */\n  destination?: ReactNode;\n  /** Optional URL to open the file. */\n  href?: string;\n}\n\ninterface CreatedFilesCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  files: CreatedFile[];\n  /**\n   * Optional CTA shown at the bottom (e.g. \"Move to Google Drive\").\n   */\n  cta?: ReactNode;\n}\n\n/**\n * CreatedFilesCard — surfaces files produced by a completed task.\n *\n * From WIREMOCKS §2: each file is a card-like row with icon + name + destination.\n * Used as social proof of delivery in Task Completed views.\n */\nconst CreatedFilesCard = forwardRef<HTMLElement, CreatedFilesCardProps>(\n  ({ className, title = \"Files created\", files, cta, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"rounded-xl border border-primary/40 bg-primary/5 p-4\", className)}\n      {...props}\n    >\n      <header className=\"mb-3 flex items-center gap-2\">\n        <Cloud className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n      </header>\n      <ul className=\"grid gap-2\">\n        {files.map((file) => {\n          const Icon = file.icon ?? FileSpreadsheet;\n          const RowTag = file.href ? \"a\" : \"div\";\n          return (\n            <li key={file.id}>\n              <RowTag\n                href={file.href}\n                target={file.href ? \"_blank\" : undefined}\n                rel={file.href ? \"noreferrer\" : undefined}\n                className={cn(\n                  \"flex items-center gap-3 rounded-md border border-border/40 bg-card px-3 py-2\",\n                  file.href &&\n                    \"transition-colors hover:border-primary/40 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                )}\n              >\n                <Icon className=\"size-5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate font-mono text-code-md text-foreground\">{file.name}</p>\n                  {file.destination ? (\n                    <p className=\"flex items-center gap-1 truncate text-body-sm text-muted-foreground\">\n                      <Folder className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {file.destination}\n                    </p>\n                  ) : null}\n                </div>\n                {file.size ? (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">{file.size}</span>\n                ) : null}\n              </RowTag>\n            </li>\n          );\n        })}\n      </ul>\n      {cta ? <div className=\"mt-3 flex justify-end\">{cta}</div> : null}\n    </section>\n  ),\n);\nCreatedFilesCard.displayName = \"CreatedFilesCard\";\n\nexport { CreatedFilesCard };\n"]}

package/dist/chunk-UGKI466V.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+// src/lib/live-region-context.tsx
+var LiveRegionContext = createContext(false);
+var LiveRegionProvider = LiveRegionContext.Provider;
+function useInLiveRegion() {
+  return useContext(LiveRegionContext);
+}
+
+export { LiveRegionProvider, useInLiveRegion };
+//# sourceMappingURL=chunk-UGKI466V.js.map
+//# sourceMappingURL=chunk-UGKI466V.js.map

package/dist/chunk-UGKI466V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/live-region-context.tsx"],"names":[],"mappings":";;;AA8CA,IAAM,iBAAA,GAAoB,cAAuB,KAAK,CAAA;AAE/C,IAAM,qBAAqB,iBAAA,CAAkB;AAE7C,SAAS,eAAA,GAA2B;AACzC,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC","file":"chunk-UGKI466V.js","sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * LiveRegionContext — coordinates `aria-live` declarations across nested\n * components so screen readers don't announce content twice.\n *\n * T4.1 (MF-4, edge-case review). Problem: a container component that\n * declares `role=\"log\" aria-live=\"polite\"` (e.g. `ChatThread`,\n * `AgentStream`) may render a child component that ALSO declares its own\n * `role=\"status\" aria-live=\"polite\"` (e.g. `AgentStreaming`,\n * `AgentErrorCard`). NVDA/JAWS/VoiceOver treat each live region as an\n * independent announcement source, so updates to the child trigger TWO\n * announcements — once from the inner status, once because the outer\n * log observes the DOM mutation. Result: stutter on every streaming\n * token, every new toast, every skeleton mount inside a log.\n *\n * Solution: container components wrap their content with\n * `<LiveRegionProvider value={true}>`. Child components call\n * `useInLiveRegion()` and omit their own `aria-live` / `role` when the\n * context is true. The outer region remains the single announcement\n * source.\n *\n * Default is `false` so standalone components (e.g., a single\n * `AgentStreaming` placed directly in a page) keep their original\n * announcement semantics with zero migration cost.\n *\n * @example\n *   // Container declares the live region\n *   <LiveRegionProvider value={true}>\n *     <div role=\"log\" aria-live=\"polite\">\n *       {children}\n *     </div>\n *   </LiveRegionProvider>\n *\n *   // Child reads context to decide its own ARIA attrs\n *   const inLiveRegion = useInLiveRegion();\n *   return (\n *     <div\n *       role={inLiveRegion ? undefined : \"status\"}\n *       aria-live={inLiveRegion ? undefined : \"polite\"}\n *     >\n *       ...\n *     </div>\n *   );\n */\n\nconst LiveRegionContext = createContext<boolean>(false);\n\nexport const LiveRegionProvider = LiveRegionContext.Provider;\n\nexport function useInLiveRegion(): boolean {\n  return useContext(LiveRegionContext);\n}\n"]}

package/dist/chunk-UOXU7NDY.js

@@ -0,0 +1,120 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Globe, Pencil, Trash2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SCOPE_LABEL = {
+  global: "Global",
+  project: "Project"
+};
+var SCOPE_CLASS = {
+  global: "bg-primary/15 text-primary",
+  project: "bg-accent/15 text-accent"
+};
+var RuleCard = forwardRef(
+  ({ className, rule, onSelect, onEdit, onDelete, onToggle, ...props }, ref) => {
+    const handleEdit = (e) => {
+      e.stopPropagation();
+      (onEdit ?? onSelect)?.(rule.id);
+    };
+    const handleDelete = (e) => {
+      e.stopPropagation();
+      onDelete?.(rule.id);
+    };
+    const handleToggle = (e) => {
+      e.stopPropagation();
+      onToggle?.(rule.id, rule.state === "enabled" ? "disabled" : "enabled");
+    };
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ref,
+        className: cn(
+          "grid gap-2 rounded-lg border border-border/40 bg-card/40 p-3",
+          "transition-colors duration-base ease-out-soft",
+          onSelect && "cursor-pointer hover:border-border hover:bg-card/70",
+          rule.state === "disabled" && "opacity-60",
+          className
+        ),
+        onClick: onSelect ? () => onSelect(rule.id) : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsx("h4", { className: "flex-1 truncate font-display text-foreground text-title-md tracking-tight", children: rule.title }),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex h-5 shrink-0 items-center gap-1 rounded-md px-2 font-medium font-mono text-label tracking-tight",
+                  SCOPE_CLASS[rule.scope]
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Globe, { className: "size-3", "aria-hidden": "true" }),
+                  " ",
+                  SCOPE_LABEL[rule.scope]
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-body-sm text-muted-foreground", children: rule.body }),
+          /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+              rule.tags?.map((t) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "inline-flex h-4 items-center rounded bg-muted px-1.5 font-mono text-label-caps text-muted-foreground uppercase tracking-wider",
+                  children: t
+                },
+                t
+              )),
+              rule.updatedAt ? /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: [
+                "\xB7 ",
+                rule.updatedAt
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              onToggle ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleToggle,
+                  "aria-label": rule.state === "enabled" ? "Disable rule" : "Enable rule",
+                  className: cn(
+                    "inline-flex h-6 items-center rounded-full px-2 font-mono text-label",
+                    rule.state === "enabled" ? "bg-success/15 text-success" : "bg-muted text-muted-foreground"
+                  ),
+                  children: rule.state === "enabled" ? "Enabled" : "Disabled"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleEdit,
+                  "aria-label": "Edit rule",
+                  className: "grid size-6 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+                  children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" })
+                }
+              ),
+              onDelete ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleDelete,
+                  "aria-label": "Delete rule",
+                  className: "grid size-6 place-items-center rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+                }
+              ) : null
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+RuleCard.displayName = "RuleCard";
+
+export { RuleCard };
+//# sourceMappingURL=chunk-UOXU7NDY.js.map
+//# sourceMappingURL=chunk-UOXU7NDY.js.map

package/dist/chunk-UOXU7NDY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/rule-card/rule-card.tsx"],"names":[],"mappings":"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","file":"chunk-UOXU7NDY.js","sourcesContent":["import { Globe, Pencil, Trash2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, MouseEvent } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { Rule, RuleScope, RuleState } from \"../../../types/rule.js\";\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"]}