agentix-cli 0.26.0 → 0.28.0

package/dist/chunk-O6YPEOQF.js

@@ -1,5 +0,0 @@
-import{f as m}from"./chunk-BTHHSY7D.js";function y(t){let e=typeof t.node=="string"?t.node:"",n=typeof t.token=="string"?t.token:"";if(!e||!n)try{let o=m(t.config);e||(e=o.dashboard?.daemonUrl||""),n||(n=o.dashboard?.token||"")}catch{}return e||(e="http://localhost:18800"),{baseUrl:e.replace(/\/+$/,""),token:n}}async function d(t,e,n){let o={Accept:"application/json"};t.token&&(o.Authorization=`Bearer ${t.token}`);let r=await fetch(`${t.baseUrl}${e}`,{headers:o,signal:n});if(!r.ok)throw new Error(`GET ${e} \u2192 HTTP ${r.status}`);return await r.json()}function w(t,e){return d(t,"/agents",e)}async function R(t,e){return(await d(t,"/api/processes",e)).processes??[]}function S(t,e){return d(t,"/crons",e)}async function h(t,e,n,o){let r={Accept:"application/json","Content-Type":"application/json"};t.token&&(r.Authorization=`Bearer ${t.token}`);let s=await fetch(`${t.baseUrl}${e}`,{method:"POST",headers:r,body:JSON.stringify(n),signal:o}),a=await s.text(),i;try{i=a?JSON.parse(a):{}}catch{i={raw:a}}if(!s.ok)throw new Error(i?.error||`POST ${e} \u2192 HTTP ${s.status}`);return i}function P(t,e,n="tui"){return h(t,"/api/processes/kill",{...e,reason:n})}function A(t,e,n,o){return h(t,"/task",{agent:e,message:n,context:o??{channel:"tui",chatId:"tui:operator"}})}async function C(t,e,n,o={}){let r={Accept:"text/event-stream","Content-Type":"application/json"};t.token&&(r.Authorization=`Bearer ${t.token}`);let s=await fetch(`${t.baseUrl}/task`,{method:"POST",headers:r,body:JSON.stringify({agent:e,message:n,stream:!0,context:{channel:o.channel??"chat-cli",chatId:o.chatId??"chat-cli:operator"}}),signal:o.signal});if(!s.ok||!s.body){let g=await s.text().catch(()=>"");throw new Error(`POST /task (stream) \u2192 HTTP ${s.status}${g?`: ${g.slice(0,200)}`:""}`)}let a=s.body.getReader(),i=new TextDecoder,u={content:""},c="";try{for(;;){let{done:g,value:p}=await a.read();if(g)break;c+=i.decode(p,{stream:!0});let l;for(;(l=c.indexOf(`
-
-`))>=0;){let k=c.slice(0,l);c=c.slice(l+2);let f=T(k);f&&b(f,o,u)}}}finally{try{a.releaseLock()}catch{}}return u}function b(t,e,n){let{event:o,data:r}=t;switch(o){case"text":r?.text&&(n.content+=r.text,e.onText?.(r.text));break;case"thinking":r?.text&&e.onThinking?.(r.text);break;case"tool":e.onTool?.(r);break;case"done":typeof r?.content=="string"&&(n.content=r.content),n.usage=r?.usage,n.duration=r?.duration;break;case"error":n.error=r?.error,n.errorKind=r?.errorKind;break}}function T(t){let e="message",n="";for(let r of t.split(`
-`))r.startsWith("event: ")?e=r.slice(7).trim():r.startsWith("data: ")&&(n=r.slice(6));if(!n)return null;let o;try{o=JSON.parse(n)}catch{o=n}return{event:e,data:o}}export{y as a,w as b,R as c,S as d,P as e,A as f,C as g};
-//# sourceMappingURL=chunk-O6YPEOQF.js.map

package/dist/chunk-P4VWIVKN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/daemon/ui/tokens.ts","../src/daemon/ui/components.css.ts","../src/daemon/ui/shell.ts","../src/daemon/ui/util.ts","../src/daemon/ui/components.ts"],"sourcesContent":["// --- Design tokens for every dashboard surface ---\n//\n// SINGLE source of truth. Every page imports AX_TOKENS_CSS and drops it in\n// its <style> block once, so no page carries its own :root copy.\n//\n// The palette and shape language are ported from the agentina console\n// (packages/console/src/index.ts) — a deliberately plain, friendly system\n// built on three principles worth restating here, because they are as much\n// about what we remove as how it looks:\n//\n//   1. CONTACTS, NOT CONCEPTS — surface the people and agents you work with;\n//      grants, sessions and adapters stay machinery.\n//   2. ONE SCREEN, ONE JOB — a flow is a short wizard with one obvious next\n//      action, not a dense panel of every option.\n//   3. HONEST UI — nothing simulated. Offline is offline, denied is denied.\n//\n// What was ported and what was not:\n//   - Ported: the four-colour brand palette, 2px borders, generous radii,\n//     pill chips, the hard offset shadow (`0 4px 0 <darker>`) that makes\n//     controls read as physical, and Outfit / Roboto Mono.\n//   - NOT ported: light-only. agentina is a consumer console; this is a\n//     dense ops dashboard people read at 2am, so the dark variant stays and\n//     carries the same shape language with the palette lifted for contrast.\n//   - Removed: the `crt` theme. Two well-maintained themes beat three, and\n//     it had no users.\n//\n// Guideline for adding tokens: every token must be page-neutral. Page-\n// specific padding/gaps belong in the page's own CSS file, not here.\n\nexport const AX_TOKENS_CSS = `:root {\n  /* --- Brand (agentina) --------------------------------------------- */\n  --ax-blue: #2979FF;\n  --ax-blue-d: #1B5FD9;\n  --ax-blue-t: #E7F0FF;\n  --ax-blue-e: #A9CBFF;\n  --ax-green: #22B573;\n  --ax-green-d: #178F58;\n  --ax-green-e: #A9E8C9;\n  --ax-amber: #FFB300;\n  --ax-amber-e: #FFE08A;\n  --ax-amber-t: #FFFCF5;\n  --ax-red: #F23A3A;\n  --ax-red-t: #FEECEC;\n  --ax-red-e: #F9C1C1;\n\n  /* --- Surfaces + text ---------------------------------------------- */\n  --ax-bg: #f8f9fa;\n  --ax-bg-elev: #f1f3f4;\n  --ax-surface: #ffffff;\n  --ax-surface-2: #f8f9fa;\n  --ax-surface-3: #f1f3f4;\n  --ax-border: #e8eaed;\n  --ax-border-2: #dadce0;\n  --ax-text: #202124;\n  --ax-text-2: #5f6368;\n  --ax-muted: #9aa0a6;\n\n  /* --- Semantic ------------------------------------------------------ */\n  --ax-accent: var(--ax-blue);\n  --ax-accent-2: var(--ax-blue-d);\n  --ax-accent-t: var(--ax-blue-t);\n  --ax-ok: var(--ax-green);\n  --ax-warn: var(--ax-amber);\n  --ax-err: var(--ax-red);\n  --ax-info: var(--ax-blue);\n\n  /* --- Shape ---------------------------------------------------------\n     The offset shadow is the signature move: a solid, un-blurred drop in a\n     darker shade of the element's own colour. It reads as a physical edge\n     rather than a glow, and it is what stops flat 2px-bordered boxes from\n     looking like a wireframe. */\n  --ax-border-w: 2px;\n  --ax-radius: 16px;\n  --ax-radius-lg: 20px;\n  --ax-radius-sm: 12px;\n  --ax-radius-pill: 999px;\n  --ax-shadow: 0 3px 0 var(--ax-border);\n  --ax-shadow-lg: 0 4px 0 var(--ax-border-2);\n  --ax-shadow-accent: 0 4px 0 var(--ax-blue-d);\n  --ax-shadow-ok: 0 4px 0 var(--ax-green-d);\n\n  /* --- Spacing ------------------------------------------------------- */\n  --ax-pad: 16px;\n  --ax-pad-sm: 10px;\n  --ax-gap: 12px;\n\n  /* --- Type ---------------------------------------------------------- */\n  --ax-font: \"Outfit\", -apple-system, \"Segoe UI\", system-ui, sans-serif;\n  --ax-mono: \"Roboto Mono\", ui-monospace, \"SF Mono\", Consolas, monospace;\n  --ax-fs: 14px;\n  --ax-fs-sm: 13px;\n  --ax-fs-xs: 12px;\n\n  /* Legacy aliases so older CSS blocks keep rendering until they're ported. */\n  --bg: var(--ax-bg);\n  --card: var(--ax-surface);\n  --node: var(--ax-bg-elev);\n  --border: var(--ax-border);\n  --text: var(--ax-text);\n  --muted: var(--ax-muted);\n  --accent: var(--ax-accent);\n  --yellow: var(--ax-warn);\n  --red: var(--ax-err);\n  --blue: var(--ax-info);\n  --gray: var(--ax-muted);\n  color-scheme: light;\n}\n\n/* Dark is not a tint of light — the brand colours are lifted toward their\n   tints so they keep contrast against a dark ground, and the offset shadow\n   goes DARKER than the surface instead of lighter. Same shape language,\n   inverted physics. */\n[data-theme=\"dark\"] {\n  --ax-blue: #6BA5FF;\n  --ax-blue-d: #1B5FD9;\n  --ax-blue-t: #16233d;\n  --ax-blue-e: #2f4d7a;\n  --ax-green: #4ED89B;\n  --ax-green-d: #178F58;\n  --ax-green-e: #1e4a36;\n  --ax-amber: #FFC948;\n  --ax-amber-e: #4a3a12;\n  --ax-amber-t: #2a2313;\n  --ax-red: #FF6B6B;\n  --ax-red-t: #3a1c1c;\n  --ax-red-e: #6b2f2f;\n\n  --ax-bg: #14161a;\n  --ax-bg-elev: #191c21;\n  --ax-surface: #1e2228;\n  --ax-surface-2: #23272e;\n  --ax-surface-3: #2a2f37;\n  --ax-border: #2f353e;\n  --ax-border-2: #3d444f;\n  --ax-text: #f1f3f4;\n  --ax-text-2: #b6bcc4;\n  --ax-muted: #858c96;\n\n  --ax-shadow: 0 3px 0 #0e1013;\n  --ax-shadow-lg: 0 4px 0 #0e1013;\n  --ax-shadow-accent: 0 4px 0 #14396e;\n  --ax-shadow-ok: 0 4px 0 #11402c;\n  color-scheme: dark;\n}\n\n/* Base element resets shared across every page. */\n* { box-sizing: border-box; }\nhtml, body {\n  margin: 0; min-height: 100vh;\n  background: var(--ax-bg); color: var(--ax-text);\n  font-family: var(--ax-font); font-size: var(--ax-fs);\n  -webkit-font-smoothing: antialiased;\n}\npre, code, .ax-mono {\n  font-family: var(--ax-mono); font-variant-numeric: tabular-nums;\n  letter-spacing: -0.01em;\n}\na { color: var(--ax-accent); text-decoration: none; font-weight: 600; }\na:hover { color: var(--ax-accent-2); text-decoration: underline; }\n.ax-muted { color: var(--ax-muted); }\n.ax-accent { color: var(--ax-accent); }`\n","// --- Shared component CSS ---\n//\n// Styles for the primitives in components.ts. Kept separate from tokens so a\n// page can opt-in to only what it uses (setup-wizard doesn't need stat-strip\n// styles, for example). Most pages just emit both blocks together.\n//\n// All class names are prefixed `ax-` — they won't collide with host-app or\n// per-page styles.\n\nexport const AX_COMPONENTS_CSS = `\n/* --- Dots --- */\n.ax-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ax-muted); }\n.ax-dot--ok, .ax-dot--live { background: var(--ax-accent); }\n.ax-dot--warn { background: var(--ax-warn); }\n.ax-dot--err { background: var(--ax-err); }\n.ax-dot--off { background: var(--ax-border-2); }\n.ax-dot--pulse {\n  box-shadow: 0 0 0 0 currentColor;\n  animation: ax-pulse 1.8s infinite;\n  color: var(--ax-accent);\n}\n@keyframes ax-pulse {\n  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ax-accent) 70%, transparent); }\n  70%  { box-shadow: 0 0 0 6px color-mix(in oklch, var(--ax-accent) 0%, transparent); }\n  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ax-accent) 0%, transparent); }\n}\n\n/* --- Badges --- */\n.ax-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  padding: 2px 10px; border-radius: var(--ax-radius-pill); font-size: var(--ax-fs-xs); line-height: 18px;\n  border: var(--ax-border-w) solid var(--ax-border-2); color: var(--ax-text-2);\n  background: var(--ax-surface); font-weight: 600;\n}\n.ax-badge--mono {\n  font-family: var(--ax-mono); letter-spacing: 0.02em;\n  text-transform: uppercase; font-size: 10px;\n}\n.ax-badge--accent {\n  color: var(--ax-accent);\n  border-color: color-mix(in oklch, var(--ax-accent) 50%, transparent);\n}\n.ax-badge--live {\n  color: var(--ax-accent);\n  background: color-mix(in oklch, var(--ax-accent) 14%, transparent);\n  border-color: color-mix(in oklch, var(--ax-accent) 60%, transparent);\n  font-weight: 600; letter-spacing: 0.06em;\n}\n.ax-badge--warn {\n  color: var(--ax-warn);\n  border-color: color-mix(in oklch, var(--ax-warn) 50%, transparent);\n}\n.ax-badge--err {\n  color: var(--ax-err);\n  border-color: color-mix(in oklch, var(--ax-err) 50%, transparent);\n}\n.ax-badge--ghost {\n  color: var(--ax-muted); border-color: var(--ax-border); background: var(--ax-surface-2);\n}\n\n/* --- Buttons --- */\n.ax-btn {\n  background: var(--ax-surface); color: var(--ax-text-2);\n  border: var(--ax-border-w) solid var(--ax-border-2); border-radius: var(--ax-radius);\n  padding: 8px 16px; font: inherit; font-size: var(--ax-fs); font-weight: 600;\n  cursor: pointer; line-height: 1.4;\n  box-shadow: var(--ax-shadow);\n  transition: border-color 0.1s, color 0.1s, background 0.1s, transform 0.06s, box-shadow 0.06s;\n}\n.ax-btn:hover:not(:disabled) { color: var(--ax-text); border-color: var(--ax-accent); }\n/* The offset shadow collapses on press so the control physically sinks —\n   the whole point of an un-blurred drop rather than a glow. */\n.ax-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ax-border); }\n.ax-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }\n\n.ax-btn--primary {\n  background: color-mix(in oklch, var(--ax-accent) 15%, var(--ax-surface));\n  color: var(--ax-accent);\n  border-color: color-mix(in oklch, var(--ax-accent) 50%, var(--ax-border-2));\n  font-weight: 700;\n  box-shadow: var(--ax-shadow-accent);\n}\n.ax-btn--primary:hover:not(:disabled) {\n  background: color-mix(in oklch, var(--ax-accent) 25%, var(--ax-surface));\n  border-color: var(--ax-accent);\n}\n\n.ax-btn--ghost {\n  background: transparent; color: var(--ax-muted);\n  border-color: var(--ax-border); box-shadow: none;\n}\n.ax-btn--ghost:active:not(:disabled) { transform: none; }\n\n.ax-btn--danger {\n  color: var(--ax-err);\n  border-color: var(--ax-red-e);\n  box-shadow: 0 4px 0 var(--ax-red-e);\n}\n.ax-btn--danger:hover:not(:disabled) {\n  background: color-mix(in oklch, var(--ax-err) 12%, var(--ax-surface));\n  border-color: var(--ax-err);\n}\n\n/* --- Chips (read-only labels used in kanban filters, etc.) --- */\n.ax-chip {\n  display: inline-block; padding: 0 6px; font-family: var(--ax-mono);\n  font-size: 11px; line-height: 18px; border-radius: var(--ax-radius-pill); color: var(--ax-text-2);\n  border: var(--ax-border-w) solid var(--ax-border); background: var(--ax-surface); font-weight: 600;\n}\n\n/* --- Cards --- */\n.ax-card {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: var(--ax-pad);\n  box-shadow: var(--ax-shadow);\n}\n\n/* Step cards used by the setup wizard / onboarding-style flows. */\n.ax-step {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius); padding: 20px 22px; margin: 14px 0;\n}\n.ax-step__head {\n  font-size: var(--ax-fs-xs); font-weight: 600; text-transform: uppercase;\n  letter-spacing: 0.08em; color: var(--ax-muted);\n  margin: 0 0 14px; display: flex; align-items: center; gap: 10px;\n}\n.ax-step__num {\n  width: 22px; height: 22px; border-radius: var(--ax-radius-sm);\n  background: color-mix(in oklch, var(--ax-accent) 15%, var(--ax-surface));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 45%, var(--ax-border-2));\n  color: var(--ax-accent);\n  display: inline-flex; align-items: center; justify-content: center;\n  font-family: var(--ax-mono); font-size: 11px; font-weight: 700;\n  letter-spacing: 0; text-transform: none;\n}\n\n/* --- Stat strip (the \"COUNT / label\" cards across the top of Live) --- */\n.ax-statstrip {\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));\n  gap: var(--ax-gap); padding: var(--ax-pad) var(--ax-pad) 0;\n}\n.ax-stat {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius); padding: 14px 16px;\n}\n.ax-stat__label {\n  font-size: var(--ax-fs-xs); text-transform: uppercase; letter-spacing: 0.06em;\n  color: var(--ax-muted); display: flex; align-items: center; gap: 6px;\n}\n.ax-stat__value {\n  font-size: 24px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em;\n  font-family: var(--ax-mono); font-variant-numeric: tabular-nums;\n}\n.ax-stat__sub {\n  font-size: var(--ax-fs-xs); color: var(--ax-muted); margin-top: 2px;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.ax-stat--live .ax-stat__value { color: var(--ax-accent); }\n.ax-stat--warn .ax-stat__value { color: var(--ax-warn); }\n.ax-stat--err .ax-stat__value { color: var(--ax-err); }\n\n/* --- Forms --- */\n.ax-field { margin: 10px 0 0; }\n.ax-field:first-child { margin-top: 0; }\n.ax-field label {\n  display: block; margin-bottom: 5px;\n  font-size: var(--ax-fs-xs); color: var(--ax-muted);\n  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;\n}\n.ax-field label .ax-hint {\n  text-transform: none; letter-spacing: 0; color: var(--ax-muted);\n  font-weight: 400; font-size: var(--ax-fs-xs); margin-left: 6px;\n}\n.ax-field input, .ax-field textarea, .ax-field select {\n  width: 100%;\n  background: var(--ax-bg); color: var(--ax-text);\n  border: var(--ax-border-w) solid var(--ax-border-2); border-radius: var(--ax-radius);\n  padding: 11px 14px; font: inherit; font-size: var(--ax-fs);\n  transition: border-color 0.1s ease;\n}\n.ax-field input:focus, .ax-field textarea:focus, .ax-field select:focus {\n  outline: none; border-color: var(--ax-accent);\n  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ax-accent) 18%, transparent);\n}\n.ax-field textarea { resize: vertical; min-height: 72px; font-family: var(--ax-font); }\n.ax-field input::placeholder, .ax-field textarea::placeholder {\n  color: var(--ax-muted); opacity: 0.7;\n}\n\n.ax-row { display: flex; gap: 12px; }\n.ax-row > * { flex: 1; }\n\n/* --- Section titles shared across pages --- */\n.ax-section-title {\n  display: flex; justify-content: space-between; align-items: center;\n  margin-bottom: 12px;\n}\n.ax-section-title__label {\n  font-size: var(--ax-fs-xs); text-transform: uppercase;\n  letter-spacing: 0.08em; color: var(--ax-muted);\n}\n.ax-section-title__right {\n  display: flex; align-items: center; gap: 8px;\n  font-size: var(--ax-fs-xs); color: var(--ax-muted);\n}\n\n/* ============================================================\n * Settings-page design system (also reusable on other pages).\n * Ported from the Stitch redesign mockup so the primitives can\n * be consumed by any page — not just /admin. Sections:\n *   page-head     — kicker + h1 + lead paragraph\n *   health-strip  — 4-up status cards with coloured dot\n *   wit           — dismissable \"what is this?\" info banner\n *   section-head  — icon chip + title + lead + right-aligned CTA\n *   row-card      — list row with avatar + info + actions + expand\n *   avatar        — coloured-initial square (teal/coral/amber/blue)\n *   pill          — small status pill with coloured dot (chip-flavor)\n *   connectors    — 2-up grid of connector cards\n *   tab-count     — mono count bubble on a tab\n *   toast         — bottom-right ephemeral notification\n *   modal         — simple centred dialog + backdrop\n *   sec-label     — uppercase mini-heading with optional CTA\n * ============================================================ */\n\n/* --- Page head --- */\n.ax-page-head {\n  max-width: 1040px; margin: 0 auto; padding: 28px 24px 12px;\n}\n.ax-page-head .ax-kicker {\n  display: inline-block; font-size: 10px; letter-spacing: 0.1em;\n  color: var(--ax-muted); text-transform: uppercase; margin-bottom: 6px;\n  font-family: var(--ax-mono);\n}\n.ax-page-head h1 {\n  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;\n  margin: 0 0 4px; display: flex; align-items: center; gap: 10px;\n}\n.ax-page-head .ax-lead {\n  color: var(--ax-text-2); margin: 0; font-size: 13px;\n  max-width: 640px; line-height: 1.6;\n}\n.ax-page-head .ax-lead code {\n  font-family: var(--ax-mono); font-size: 11.5px;\n  background: var(--ax-surface-2); padding: 1px 6px; border-radius: var(--ax-radius-sm);\n}\n\n/* --- Health strip --- */\n.ax-health-strip {\n  max-width: 1040px; margin: 18px auto 22px; padding: 0 24px;\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;\n}\n.ax-health-card {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm); padding: 12px 14px;\n  display: flex; align-items: center; gap: 11px;\n  transition: border-color 120ms;\n}\n.ax-health-card:hover { border-color: var(--ax-border-2); }\n.ax-health-card .ax-hc-dot {\n  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n}\n.ax-health-card .ax-hc-dot--ok {\n  background: var(--ax-accent);\n  box-shadow: 0 0 8px color-mix(in oklch, var(--ax-accent) 50%, transparent);\n}\n.ax-health-card .ax-hc-dot--warn { background: var(--ax-warn); }\n.ax-health-card .ax-hc-dot--off { background: var(--ax-border-2); }\n.ax-health-card .ax-hc-txt { flex: 1; min-width: 0; }\n.ax-health-card .ax-hc-num {\n  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;\n}\n.ax-health-card .ax-hc-lbl {\n  font-size: 11px; color: var(--ax-muted); margin-top: 1px;\n}\n\n/* --- \"What is this?\" info banner (dismissable) --- */\n.ax-wit {\n  background: color-mix(in oklch, var(--ax-info) 6%, var(--ax-bg-elev));\n  border: 1px solid color-mix(in oklch, var(--ax-info) 22%, var(--ax-border));\n  border-radius: var(--ax-radius-sm); padding: 12px 14px; margin-bottom: 18px;\n  font-size: 12.5px; color: var(--ax-text-2); line-height: 1.6;\n  display: flex; gap: 10px; align-items: flex-start;\n}\n.ax-wit__icon {\n  width: 18px; height: 18px; border-radius: 50%;\n  background: color-mix(in oklch, var(--ax-info) 18%, transparent);\n  color: var(--ax-info);\n  display: grid; place-items: center;\n  font-size: 11px; font-weight: 600; flex-shrink: 0; margin-top: 1px;\n}\n.ax-wit b { color: var(--ax-text); font-weight: 600; }\n.ax-wit code {\n  font-family: var(--ax-mono); font-size: 11.5px;\n  background: var(--ax-bg); padding: 1px 5px; border-radius: var(--ax-radius-sm);\n  border: var(--ax-border-w) solid var(--ax-border);\n}\n.ax-wit .ax-wit__dismiss {\n  background: transparent; border: 0; color: var(--ax-muted);\n  font-size: 16px; cursor: pointer; margin-left: auto;\n  padding: 0 4px; line-height: 1;\n}\n.ax-wit .ax-wit__dismiss:hover { color: var(--ax-text); }\n\n/* --- Section head (icon + title + lead + right CTA) --- */\n.ax-section-head {\n  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px;\n}\n.ax-section-head__icon {\n  width: 44px; height: 44px; border-radius: var(--ax-radius);\n  background: color-mix(in oklch, var(--ax-accent) 10%, var(--ax-surface));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 25%, var(--ax-border));\n  display: grid; place-items: center; flex-shrink: 0;\n  color: var(--ax-accent);\n}\n.ax-section-head__icon svg { width: 22px; height: 22px; }\n.ax-section-head__text { flex: 1; }\n.ax-section-head h2 {\n  font-size: 18px; margin: 0 0 3px;\n  font-weight: 600; letter-spacing: -0.01em;\n}\n.ax-section-head .ax-lead {\n  color: var(--ax-text-2); margin: 0; font-size: 13px; line-height: 1.55;\n  max-width: 640px;\n}\n\n/* --- Row cards (collapsible list items) --- */\n.ax-stack { display: flex; flex-direction: column; gap: 10px; }\n.ax-row-card {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 14px 16px;\n  transition: border-color 160ms, transform 160ms;\n}\n.ax-row-card:hover { border-color: var(--ax-border-2); }\n.ax-row-card__top { display: flex; align-items: center; gap: 12px; }\n.ax-row-card__info { flex: 1; min-width: 0; }\n.ax-row-card__info .ax-name {\n  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;\n  display: flex; align-items: center; gap: 8px;\n}\n.ax-row-card__info .ax-slug {\n  font-family: var(--ax-mono); font-size: 11px;\n  color: var(--ax-muted); margin-left: 4px;\n}\n.ax-row-card__info .ax-sub {\n  font-size: 12px; color: var(--ax-text-2); margin-top: 3px;\n  line-height: 1.5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;\n}\n.ax-row-card__actions { display: flex; gap: 6px; align-items: center; }\n.ax-row-card__details {\n  display: none; margin-top: 14px; padding-top: 14px;\n  border-top: 1px dashed var(--ax-border);\n  font-size: 12.5px; color: var(--ax-text-2); line-height: 1.6;\n}\n.ax-row-card.is-open .ax-row-card__details { display: block; }\n.ax-row-card.is-open .ax-chev { transform: rotate(180deg); }\n.ax-chev { transition: transform 160ms; }\n\n.ax-detail-grid {\n  display: grid; grid-template-columns: repeat(2, 1fr);\n  gap: 12px 20px; margin-bottom: 12px;\n}\n.ax-detail-grid dt {\n  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;\n  color: var(--ax-muted); margin-bottom: 3px; font-family: var(--ax-mono);\n}\n.ax-detail-grid dd {\n  margin: 0; font-size: 12.5px; color: var(--ax-text);\n}\n.ax-triggers { display: flex; gap: 4px; flex-wrap: wrap; }\n.ax-trigger-pill {\n  font-family: var(--ax-mono); font-size: 11px;\n  padding: 2px 8px; background: var(--ax-bg);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius-sm);\n  color: var(--ax-text);\n}\n\n/* --- Avatars (coloured initial square) --- */\n.ax-avatar {\n  width: 36px; height: 36px; border-radius: var(--ax-radius); flex-shrink: 0;\n  background: var(--ax-surface-2); border: var(--ax-border-w) solid var(--ax-border-2);\n  display: grid; place-items: center;\n  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;\n  color: var(--ax-text);\n}\n.ax-avatar--teal {\n  background: color-mix(in oklch, var(--ax-accent) 18%, var(--ax-surface));\n  border-color: color-mix(in oklch, var(--ax-accent) 35%, var(--ax-border));\n  color: var(--ax-accent);\n}\n.ax-avatar--coral {\n  background: color-mix(in oklch, var(--ax-err) 14%, var(--ax-surface));\n  border-color: color-mix(in oklch, var(--ax-err) 30%, var(--ax-border));\n  color: var(--ax-err);\n}\n.ax-avatar--amber {\n  background: color-mix(in oklch, var(--ax-warn) 14%, var(--ax-surface));\n  border-color: color-mix(in oklch, var(--ax-warn) 30%, var(--ax-border));\n  color: var(--ax-warn);\n}\n.ax-avatar--blue {\n  background: color-mix(in oklch, var(--ax-info) 14%, var(--ax-surface));\n  border-color: color-mix(in oklch, var(--ax-info) 30%, var(--ax-border));\n  color: var(--ax-info);\n}\n\n/* --- Pills (status indicator with coloured dot) ---\n *\n * Different from .ax-badge: pills have a rounded (10px) shape, a small\n * leading coloured dot, and stronger semantics (ok/warn/off/info). Use\n * for \"live\", \"idle\", \"receiving\", \"stale\" states next to a name.\n */\n.ax-pill {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 11px; padding: 2px 8px; line-height: 16px;\n  border-radius: var(--ax-radius); background: var(--ax-surface-2);\n  color: var(--ax-text-2); border: var(--ax-border-w) solid var(--ax-border);\n  white-space: nowrap;\n}\n.ax-pill .ax-pill__dot {\n  width: 6px; height: 6px; border-radius: 50%; background: currentColor;\n}\n.ax-pill--ok {\n  background: color-mix(in oklch, var(--ax-accent) 14%, transparent);\n  color: var(--ax-accent);\n  border-color: color-mix(in oklch, var(--ax-accent) 30%, transparent);\n}\n.ax-pill--warn {\n  background: color-mix(in oklch, var(--ax-warn) 14%, transparent);\n  color: var(--ax-warn);\n  border-color: color-mix(in oklch, var(--ax-warn) 30%, transparent);\n}\n.ax-pill--off { color: var(--ax-muted); }\n.ax-pill--info {\n  background: color-mix(in oklch, var(--ax-info) 14%, transparent);\n  color: var(--ax-info);\n  border-color: color-mix(in oklch, var(--ax-info) 30%, transparent);\n}\n\n/* --- Connectors grid (Channels tab) --- */\n.ax-connectors {\n  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;\n}\n.ax-connector {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 18px 18px 16px;\n  cursor: pointer; position: relative;\n  transition: border-color 160ms, transform 160ms, background 160ms;\n}\n.ax-connector:hover { border-color: var(--ax-border-2); background: var(--ax-surface-2); }\n.ax-connector.is-on {\n  border-color: color-mix(in oklch, var(--ax-accent) 40%, var(--ax-border));\n}\n.ax-connector.is-active {\n  border-color: var(--ax-accent);\n  background: color-mix(in oklch, var(--ax-accent) 8%, var(--ax-surface));\n}\n.ax-connector__top {\n  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;\n}\n.ax-connector__logo {\n  width: 40px; height: 40px; border-radius: var(--ax-radius);\n  display: grid; place-items: center;\n  font-weight: 700; font-size: 15px; letter-spacing: -0.02em; flex-shrink: 0;\n  background: var(--ax-surface-2); border: var(--ax-border-w) solid var(--ax-border-2);\n  color: var(--ax-text); font-family: var(--ax-mono);\n}\n.ax-connector__meta { flex: 1; }\n.ax-connector__name {\n  font-weight: 600; font-size: 14px; letter-spacing: -0.005em;\n}\n.ax-connector__sub {\n  font-size: 11.5px; color: var(--ax-muted); margin-top: 2px;\n}\n.ax-connector__status { margin-left: auto; }\n.ax-connector__desc {\n  font-size: 12.5px; color: var(--ax-text-2); line-height: 1.5; min-height: 36px;\n}\n.ax-connector__foot {\n  margin-top: 12px; display: flex; align-items: center; justify-content: space-between;\n  font-size: 11.5px; color: var(--ax-muted);\n}\n.ax-connector__cta {\n  color: var(--ax-accent); font-weight: 500;\n  display: inline-flex; align-items: center; gap: 4px;\n}\n.ax-connector__cta svg { width: 12px; height: 12px; }\n\n/* --- Tab counts + warn indicator --- */\n.ax-tab-count {\n  font-family: var(--ax-mono); font-size: 10px;\n  padding: 1px 6px; background: var(--ax-surface-2);\n  color: var(--ax-muted); border-radius: var(--ax-radius); line-height: 14px;\n  margin-left: 6px;\n}\n.is-active .ax-tab-count {\n  background: color-mix(in oklch, var(--ax-accent) 18%, transparent);\n  color: var(--ax-accent);\n}\n.ax-tab-warn {\n  width: 6px; height: 6px; border-radius: 50%; background: var(--ax-warn);\n  display: inline-block; margin-left: 6px;\n}\n\n/* --- Section mini-labels --- */\n.ax-sec-label {\n  display: flex; align-items: center; justify-content: space-between;\n  margin: 22px 0 10px;\n}\n.ax-sec-label h3 {\n  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--ax-muted);\n  margin: 0; font-family: var(--ax-mono);\n}\n\n/* --- Toast --- */\n.ax-toast {\n  position: fixed; bottom: 24px; right: 24px;\n  background: var(--ax-surface-2);\n  border: var(--ax-border-w) solid var(--ax-accent); color: var(--ax-text);\n  padding: 10px 16px; border-radius: var(--ax-radius); font-size: 12.5px;\n  display: flex; align-items: center; gap: 10px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n  opacity: 0; transform: translateY(10px); pointer-events: none;\n  transition: opacity 200ms, transform 200ms; z-index: 100;\n}\n.ax-toast.is-show { opacity: 1; transform: none; }\n.ax-toast__icon { color: var(--ax-accent); }\n\n/* --- Modal (centred dialog + backdrop) --- */\n.ax-modal-bd {\n  position: fixed; inset: 0;\n  background: color-mix(in oklch, var(--ax-bg) 60%, black);\n  display: none; align-items: center; justify-content: center;\n  z-index: 200; padding: 24px;\n}\n.ax-modal-bd.is-show { display: flex; }\n.ax-modal {\n  width: min(560px, 94vw); max-height: 86vh; overflow: auto;\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border-2);\n  border-radius: var(--ax-radius-lg); padding: 0;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.5);\n}\n.ax-modal > header {\n  padding: 18px 22px 10px; border-bottom: var(--ax-border-w) solid var(--ax-border);\n  display: flex; align-items: center; gap: 10px;\n}\n.ax-modal > header h3 {\n  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; flex: 1;\n}\n.ax-modal > header .ax-modal__close {\n  background: transparent; border: 0; color: var(--ax-muted);\n  font-size: 22px; cursor: pointer; line-height: 1; padding: 0 6px;\n}\n.ax-modal__body { padding: 18px 22px; }\n.ax-modal__foot {\n  padding: 12px 22px 18px;\n  display: flex; justify-content: flex-end; gap: 8px;\n  border-top: var(--ax-border-w) solid var(--ax-border);\n}\n\n/* --- Mesh hero (enable toggle + SVG network viz) --- */\n.ax-mesh-hero {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 20px;\n  display: grid; grid-template-columns: 1fr 240px; gap: 24px;\n  align-items: center; margin-bottom: 18px;\n}\n.ax-mesh-hero h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }\n.ax-mesh-hero p { margin: 0 0 12px; font-size: 12.5px; color: var(--ax-text-2); line-height: 1.5; }\n.ax-mesh-viz { position: relative; width: 240px; height: 140px; }\n.ax-mesh-dot {\n  position: absolute; width: 44px; height: 44px; border-radius: 50%;\n  background: var(--ax-surface-2); border: 2px solid var(--ax-border-2);\n  display: grid; place-items: center;\n  font-family: var(--ax-mono); font-size: 10px; font-weight: 600;\n  color: var(--ax-text-2);\n}\n.ax-mesh-dot.self {\n  background: color-mix(in oklch, var(--ax-accent) 18%, var(--ax-surface));\n  border-color: var(--ax-accent); color: var(--ax-accent);\n}\n.ax-mesh-dot.empty {\n  border-style: dashed; color: var(--ax-muted); font-size: 14px;\n}\n.ax-mesh-wires { position: absolute; inset: 0; }\n.ax-mesh-wires line { stroke: var(--ax-border-2); stroke-width: 1.5; stroke-dasharray: 3 3; }\n.ax-mesh-wires line.live { stroke: var(--ax-accent); stroke-dasharray: 0; opacity: 0.6; }\n\n/* Pill-shaped toggle (used for the mesh enable switch + similar binary actions). */\n.ax-mesh-toggle {\n  display: inline-flex; align-items: center; gap: 10px;\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: 20px; padding: 4px 14px 4px 5px;\n  cursor: pointer; user-select: none; font-size: 12px;\n}\n.ax-mesh-switch {\n  width: 32px; height: 18px; background: var(--ax-surface-3);\n  border-radius: var(--ax-radius); position: relative; transition: background 160ms;\n}\n.ax-mesh-switch::after {\n  content: \"\"; position: absolute; top: 2px; left: 2px;\n  width: 14px; height: 14px; border-radius: 50%;\n  background: var(--ax-text-2); transition: all 160ms;\n}\n.ax-mesh-toggle.is-on .ax-mesh-switch {\n  background: color-mix(in oklch, var(--ax-accent) 80%, transparent);\n}\n.ax-mesh-toggle.is-on .ax-mesh-switch::after {\n  left: 16px; background: var(--ax-bg);\n}\n\n/* --- Schedule builder: sentence-builder + pill picks + day picker --- */\n.ax-builder {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 20px;\n}\n.ax-builder h3 {\n  margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.005em;\n}\n.ax-builder__hint { margin: 0 0 16px; font-size: 12.5px; color: var(--ax-muted); }\n.ax-builder__lbl {\n  display: block; font-size: 11px; color: var(--ax-muted);\n  letter-spacing: 0.03em; text-transform: uppercase; margin: 12px 0 5px;\n  font-weight: 500;\n}\n.ax-builder__lbl .opt {\n  text-transform: none; letter-spacing: 0; font-weight: 400;\n  opacity: 0.75; margin-left: 6px;\n}\n.ax-builder__inp {\n  width: 100%; background: var(--ax-bg); color: var(--ax-text);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius-sm);\n  padding: 8px 11px; font: inherit; font-size: 13px;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n.ax-builder__inp:focus {\n  outline: none; border-color: var(--ax-accent);\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ax-accent) 18%, transparent);\n}\ntextarea.ax-builder__inp { min-height: 80px; line-height: 1.5; resize: vertical; }\n\n.ax-mode-switch {\n  display: inline-flex; background: var(--ax-surface-2);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius); padding: 3px;\n  margin-bottom: 14px;\n}\n.ax-mode-switch button {\n  background: transparent; border: 0; color: var(--ax-muted);\n  padding: 6px 14px; font: inherit; font-size: 12px; cursor: pointer;\n  border-radius: var(--ax-radius-sm); font-weight: 500;\n}\n.ax-mode-switch button.is-active {\n  background: var(--ax-surface); color: var(--ax-text);\n}\n\n.ax-sentence {\n  display: flex; align-items: center; gap: 8px;\n  font-size: 16px; line-height: 1.9; flex-wrap: wrap;\n  margin-bottom: 14px; padding: 14px 16px;\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm);\n}\n.ax-sentence > span { color: var(--ax-text-2); }\n.ax-pill-pick {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border-2);\n  color: var(--ax-accent); padding: 3px 10px; border-radius: var(--ax-radius);\n  font-size: 14px; font-family: inherit; cursor: pointer; font-weight: 500;\n}\n.ax-pill-pick:hover { background: var(--ax-surface-2); border-color: var(--ax-accent); }\n.ax-pill-pick--sm { font-size: 13px; padding: 3px 8px; }\n\n.ax-day-picker { display: flex; gap: 4px; }\n.ax-day-picker button {\n  width: 30px; height: 30px; border-radius: var(--ax-radius);\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  color: var(--ax-muted); font: inherit; font-size: 11px; font-weight: 500;\n  cursor: pointer;\n}\n.ax-day-picker button:hover { border-color: var(--ax-border-2); color: var(--ax-text); }\n.ax-day-picker button.is-active {\n  background: color-mix(in oklch, var(--ax-accent) 20%, var(--ax-surface));\n  border-color: var(--ax-accent); color: var(--ax-accent);\n}\n\n.ax-preview-box {\n  background: color-mix(in oklch, var(--ax-accent) 5%, var(--ax-bg-elev));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 20%, var(--ax-border));\n  border-radius: var(--ax-radius-sm); padding: 12px 14px; margin-top: 12px;\n  font-size: 12.5px; color: var(--ax-text-2);\n  display: flex; align-items: center; gap: 10px;\n}\n.ax-preview-box svg { width: 15px; height: 15px; color: var(--ax-accent); flex-shrink: 0; }\n.ax-preview-box b { color: var(--ax-text); font-weight: 600; }\n\n.ax-cron-hints {\n  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px;\n  margin-top: 10px; font-size: 11.5px; color: var(--ax-muted);\n}\n.ax-cron-hints code {\n  font-family: var(--ax-mono); color: var(--ax-text);\n  background: var(--ax-bg); border: var(--ax-border-w) solid var(--ax-border);\n  padding: 1px 6px; border-radius: var(--ax-radius-sm); margin-right: 6px;\n}\n\n/* --- JSON tree viewer (Advanced tab) --- */\n.ax-jv-toolbar {\n  display: flex; align-items: center; gap: 8px;\n  padding: 8px 12px; background: var(--ax-bg-elev);\n  border: var(--ax-border-w) solid var(--ax-border); border-bottom: 0;\n  border-radius: var(--ax-radius) var(--ax-radius) 0 0;\n}\n.ax-jv-toolbar .ax-jv-spacer { flex: 1; }\n.ax-jv-toolbar .ax-jv-seg {\n  display: inline-flex; background: var(--ax-surface);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius-sm); padding: 2px;\n}\n.ax-jv-toolbar .ax-jv-seg button {\n  background: transparent; border: 0; color: var(--ax-muted);\n  padding: 4px 10px; font: inherit; font-size: 11px;\n  cursor: pointer; border-radius: var(--ax-radius-sm);\n}\n.ax-jv-toolbar .ax-jv-seg button.is-active { background: var(--ax-surface-2); color: var(--ax-text); }\n.ax-jv-search {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm); padding: 4px 9px; font: inherit; font-size: 12px;\n  color: var(--ax-text); width: 180px;\n}\n.ax-jv-search:focus { outline: none; border-color: var(--ax-accent); }\n\n.ax-jv-viewer {\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-top: 0; border-radius: 0 0 var(--ax-radius) var(--ax-radius);\n  font-family: var(--ax-mono); font-size: 12.5px; line-height: 1.75;\n  padding: 14px 18px; max-height: 620px; overflow: auto;\n}\n.ax-jv-line {\n  display: flex; align-items: flex-start; padding: 1px 0; gap: 0;\n  position: relative; border-radius: var(--ax-radius-sm); white-space: nowrap;\n}\n.ax-jv-line:hover { background: color-mix(in oklch, var(--ax-accent) 5%, transparent); }\n.ax-jv-line.is-match { background: color-mix(in oklch, var(--ax-warn) 16%, transparent); }\n.ax-jv-toggle {\n  width: 12px; display: inline-block; color: var(--ax-muted);\n  cursor: pointer; user-select: none; text-align: center;\n  font-size: 9px; line-height: 1.75;\n}\n.ax-jv-toggle.empty { cursor: default; }\n.ax-jv-key { color: var(--ax-info); margin-right: 0; }\n.ax-jv-punc { color: var(--ax-muted); }\n.ax-jv-string { color: var(--ax-accent); }\n.ax-jv-number { color: var(--ax-warn); }\n.ax-jv-bool { color: var(--ax-info); font-weight: 500; }\n.ax-jv-null { color: var(--ax-muted); font-style: italic; }\n.ax-jv-comment {\n  color: var(--ax-muted); font-family: var(--ax-font);\n  font-style: italic; font-size: 11.5px; margin-left: 8px; opacity: 0.8;\n}\n.ax-jv-children {\n  padding-left: 18px;\n  border-left: 1px dashed color-mix(in oklch, var(--ax-border) 80%, transparent);\n  margin-left: 4px;\n}\n.ax-jv-children.is-collapsed { display: none; }\n.ax-jv-collapsed-note {\n  color: var(--ax-muted); font-size: 11px; font-style: italic; margin-left: 4px;\n}\n.ax-jv-empty-brace { color: var(--ax-muted); }\n\n/* ============================================================\n * Detail-page primitives (Agent manage, and any future\n * detail-view). Built around a 3-col layout:\n *\n *   [rail 200px] [main] [test-drive 360px]\n *\n * Scales down: test-drive hides at 1180px, rail hides at 780px.\n * ============================================================ */\n\n/* Crumb */\n.ax-crumb {\n  max-width: 1400px; margin: 0 auto; padding: 16px 24px 0;\n  font-size: 12px; color: var(--ax-muted);\n  display: flex; align-items: center; gap: 6px;\n}\n.ax-crumb a { color: var(--ax-muted); }\n.ax-crumb a:hover { color: var(--ax-accent); text-decoration: none; }\n.ax-crumb .ax-crumb__sep { color: var(--ax-border-2); }\n.ax-crumb .ax-crumb__cur { color: var(--ax-text); }\n\n/* Hero — large avatar + editable name + chip row + actions */\n.ax-hero {\n  max-width: 1400px; margin: 0 auto; padding: 14px 24px 18px;\n  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;\n}\n.ax-hero__ava {\n  width: 64px; height: 64px; border-radius: 14px;\n  background: color-mix(in oklch, var(--ax-accent) 20%, var(--ax-surface));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 40%, var(--ax-border));\n  display: grid; place-items: center;\n  font-weight: 700; font-size: 22px; letter-spacing: -0.02em;\n  color: var(--ax-accent); flex-shrink: 0; position: relative;\n}\n.ax-hero__on {\n  position: absolute; bottom: -2px; right: -2px;\n  width: 16px; height: 16px; border-radius: 50%;\n  background: var(--ax-accent); border: 3px solid var(--ax-bg);\n}\n.ax-hero__title { flex: 1; min-width: 260px; }\n.ax-hero h1 {\n  margin: 0 0 3px; font-size: 22px; font-weight: 600;\n  letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px;\n}\n.ax-hero h1 input {\n  background: transparent; border: 0; color: var(--ax-text);\n  font: inherit; padding: 0; border-bottom: 1px dashed transparent;\n  transition: border-color 120ms; max-width: 260px;\n}\n.ax-hero h1 input:hover { border-color: var(--ax-border-2); }\n.ax-hero h1 input:focus { outline: none; border-color: var(--ax-accent); }\n.ax-hero__sub {\n  color: var(--ax-text-2); font-size: 13px; margin-top: 2px;\n  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;\n}\n.ax-hero__sub .ax-hero__dot {\n  width: 3px; height: 3px; background: var(--ax-border-2); border-radius: 50%;\n}\n.ax-hero__actions { display: flex; gap: 8px; align-items: center; }\n\n/* Inline stats strip (smaller than the settings health strip — fits in\n * the detail page hero below the hero title). */\n.ax-stats-inline {\n  max-width: 1400px; margin: 0 auto; padding: 0 24px;\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;\n}\n.ax-stat-inline {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm); padding: 10px 12px;\n  display: flex; align-items: center; gap: 11px;\n}\n.ax-stat-inline__icon {\n  width: 26px; height: 26px; border-radius: var(--ax-radius);\n  background: color-mix(in oklch, var(--ax-accent) 12%, var(--ax-surface-2));\n  display: grid; place-items: center;\n  color: var(--ax-accent); flex-shrink: 0;\n}\n.ax-stat-inline__icon svg { width: 14px; height: 14px; }\n.ax-stat-inline__v {\n  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;\n}\n.ax-stat-inline__l {\n  font-size: 11px; color: var(--ax-muted); margin-top: 1px;\n}\n\n/* Detail layout — 2-col rail + main. Overlays (test-drive, history, etc.)\n * dock separately via fixed positioning. */\n.ax-layout {\n  max-width: 1400px; margin: 22px auto 0; padding: 0 24px 60px;\n  display: grid; grid-template-columns: 200px 1fr;\n  gap: 22px; align-items: flex-start;\n}\n\n/* Left rail — sticky nav list with grouped items */\n.ax-rail {\n  position: sticky; top: 72px;\n  display: flex; flex-direction: column; gap: 1px;\n}\n.ax-rail a {\n  display: flex; align-items: center; gap: 10px;\n  padding: 9px 11px; border-radius: var(--ax-radius);\n  color: var(--ax-text-2); font-size: 13px; font-weight: 500;\n  cursor: pointer; position: relative;\n  transition: background 120ms, color 120ms;\n}\n.ax-rail a svg {\n  width: 15px; height: 15px; flex-shrink: 0; color: var(--ax-muted);\n}\n.ax-rail a:hover {\n  background: var(--ax-surface); color: var(--ax-text); text-decoration: none;\n}\n.ax-rail a:hover svg { color: var(--ax-text); }\n.ax-rail a.is-active {\n  background: color-mix(in oklch, var(--ax-accent) 12%, var(--ax-surface));\n  color: var(--ax-accent);\n}\n.ax-rail a.is-active svg { color: var(--ax-accent); }\n.ax-rail a.is-active::before {\n  content: \"\"; position: absolute; left: -3px; top: 7px; bottom: 7px;\n  width: 2px; border-radius: var(--ax-radius-sm); background: var(--ax-accent);\n}\n.ax-rail__count {\n  margin-left: auto; font-family: var(--ax-mono);\n  font-size: 10px; padding: 1px 6px; background: var(--ax-surface-2);\n  color: var(--ax-muted); border-radius: var(--ax-radius); line-height: 14px;\n}\n.ax-rail a.is-active .ax-rail__count {\n  background: color-mix(in oklch, var(--ax-accent) 22%, transparent);\n  color: var(--ax-accent);\n}\n.ax-rail__sep { height: 1px; background: var(--ax-border); margin: 8px 4px; }\n.ax-rail__label {\n  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;\n  color: var(--ax-muted); padding: 6px 11px 4px; font-family: var(--ax-mono);\n}\n\n/* Main panel containers (one per section) */\n.ax-panel {\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 22px;\n}\n.ax-panel + .ax-panel { margin-top: 12px; }\n.ax-panel h2 {\n  margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em;\n}\n.ax-panel .ax-lead {\n  margin: 0 0 16px; font-size: 12.5px; color: var(--ax-text-2); line-height: 1.55;\n}\n.ax-panel__head {\n  display: flex; align-items: flex-start; justify-content: space-between;\n  gap: 12px; margin-bottom: 14px;\n}\n.ax-panel__head h2 { margin: 0 0 3px; }\n.ax-panel__tab { display: none; animation: ax-fade 180ms ease; }\n.ax-panel__tab.is-active { display: block; }\n@keyframes ax-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to   { opacity: 1; transform: none; }\n}\n\n/* Grids for form rows */\n.ax-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.ax-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }\n\n/* Slider-style setting row — label + hint + segmented options */\n.ax-slider-row {\n  display: grid; grid-template-columns: 140px 1fr auto;\n  gap: 12px; align-items: center;\n  padding: 10px 0; border-bottom: 1px dashed var(--ax-border);\n}\n.ax-slider-row:last-child { border-bottom: 0; }\n.ax-slider-row label { font-size: 12.5px; color: var(--ax-text); margin: 0; }\n.ax-slider-row .ax-hint {\n  margin: 0; color: var(--ax-muted); font-size: 11.5px;\n}\n.ax-slider-row .ax-opts {\n  display: flex; gap: 4px; background: var(--ax-bg);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius-sm); padding: 2px;\n}\n.ax-slider-row .ax-opts button {\n  background: transparent; border: 0; color: var(--ax-muted);\n  padding: 5px 11px; font: inherit; font-size: 11.5px;\n  cursor: pointer; border-radius: var(--ax-radius-sm); white-space: nowrap;\n}\n.ax-slider-row .ax-opts button.is-active {\n  background: var(--ax-surface-2); color: var(--ax-text);\n}\n\n/* Sub-tabs (Guided/Freeform, CLAUDE.md/SOUL.md/IDENTITY.md) */\n.ax-subtabs {\n  display: inline-flex; background: var(--ax-bg);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius);\n  padding: 3px; margin-bottom: 16px;\n}\n.ax-subtabs button {\n  background: transparent; border: 0; color: var(--ax-muted);\n  padding: 6px 14px; font: inherit; font-size: 12px;\n  cursor: pointer; border-radius: var(--ax-radius-sm); font-weight: 500;\n}\n.ax-subtabs button.is-active {\n  background: var(--ax-surface-2); color: var(--ax-text);\n}\n\n/* Trigger-word chips with inline input (for Wake words field) */\n.ax-triggers-edit {\n  display: flex; flex-wrap: wrap; gap: 6px;\n  background: var(--ax-bg); border: var(--ax-border-w) solid var(--ax-border);\n  padding: 7px; border-radius: var(--ax-radius-sm); min-height: 38px;\n  align-items: center; cursor: text;\n}\n.ax-triggers-edit:focus-within {\n  border-color: var(--ax-accent);\n  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ax-accent) 18%, transparent);\n}\n.ax-trig-pill {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-family: var(--ax-mono); font-size: 11px;\n  padding: 3px 4px 3px 9px;\n  background: color-mix(in oklch, var(--ax-accent) 16%, var(--ax-surface));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 30%, var(--ax-border));\n  border-radius: var(--ax-radius-sm); color: var(--ax-accent);\n}\n.ax-trig-pill button {\n  background: transparent; border: 0; color: currentColor;\n  opacity: 0.6; cursor: pointer; font-size: 13px; line-height: 1;\n  padding: 0 2px; border-radius: var(--ax-radius-sm);\n}\n.ax-trig-pill button:hover {\n  opacity: 1;\n  background: color-mix(in oklch, var(--ax-accent) 20%, transparent);\n}\n.ax-triggers-edit input {\n  flex: 1; min-width: 120px;\n  background: transparent; border: 0; color: var(--ax-text);\n  font: inherit; font-size: 12.5px;\n  padding: 4px 6px; font-family: var(--ax-mono);\n}\n.ax-triggers-edit input:focus { outline: none; }\n\n/* Prompt editor (freeform CLAUDE.md) */\n.ax-prompt-edit { position: relative; }\n.ax-prompt-edit textarea { min-height: 220px; line-height: 1.6; }\n.ax-prompt-badges {\n  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px;\n}\n.ax-prompt-badges .ax-pbadge {\n  font-size: 10px; padding: 3px 7px; border-radius: var(--ax-radius-sm);\n  background: var(--ax-surface-2); color: var(--ax-muted);\n  font-family: var(--ax-mono); letter-spacing: 0.03em;\n}\n\n/* Skill gallery */\n.ax-skill-toolbar {\n  display: flex; gap: 10px; align-items: center;\n  margin-bottom: 14px; flex-wrap: wrap;\n}\n.ax-search {\n  position: relative; flex: 1; min-width: 220px;\n}\n.ax-search svg {\n  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);\n  width: 13px; height: 13px; color: var(--ax-muted); pointer-events: none;\n}\n.ax-search input { width: 100%; padding-left: 30px; }\n.ax-skill-filter {\n  display: flex; gap: 4px; background: var(--ax-bg);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius-sm); padding: 2px;\n}\n.ax-skill-filter button {\n  background: transparent; border: 0; color: var(--ax-muted);\n  padding: 5px 10px; font: inherit; font-size: 11.5px;\n  cursor: pointer; border-radius: var(--ax-radius-sm);\n}\n.ax-skill-filter button.is-active {\n  background: var(--ax-surface-2); color: var(--ax-text);\n}\n.ax-skill-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  gap: 10px;\n}\n.ax-skill-card {\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 14px;\n  display: flex; flex-direction: column; gap: 8px;\n  cursor: pointer; position: relative; overflow: hidden;\n  transition: border-color 160ms, transform 160ms, background 160ms;\n}\n.ax-skill-card:hover { border-color: var(--ax-border-2); transform: translateY(-1px); }\n.ax-skill-card.is-on {\n  border-color: color-mix(in oklch, var(--ax-accent) 40%, var(--ax-border));\n  background: color-mix(in oklch, var(--ax-accent) 5%, var(--ax-bg-elev));\n}\n.ax-skill-card.is-on::after {\n  content: \"\"; position: absolute; top: 0; right: 0;\n  width: 0; height: 0;\n  border-left: 26px solid transparent;\n  border-top: 26px solid var(--ax-accent);\n}\n.ax-skill-card.is-on::before {\n  content: \"\"; position: absolute; top: 5px; right: 3px;\n  width: 7px; height: 4px;\n  border-left: 2px solid var(--ax-bg);\n  border-bottom: 2px solid var(--ax-bg);\n  transform: rotate(-45deg); z-index: 2;\n}\n.ax-skill-card__top { display: flex; align-items: center; gap: 10px; }\n.ax-skill-card__icon {\n  width: 32px; height: 32px; border-radius: var(--ax-radius);\n  background: var(--ax-surface-2);\n  display: grid; place-items: center; flex-shrink: 0;\n  color: var(--ax-accent);\n}\n.ax-skill-card__icon svg { width: 16px; height: 16px; }\n.ax-skill-card__name {\n  font-weight: 600; font-size: 13px; letter-spacing: -0.005em;\n}\n.ax-skill-card__slug {\n  font-family: var(--ax-mono); font-size: 10.5px;\n  color: var(--ax-muted); margin-top: 1px;\n}\n.ax-skill-card__desc {\n  font-size: 12px; color: var(--ax-text-2); line-height: 1.5;\n  flex: 1; min-height: 32px;\n}\n.ax-skill-card__foot {\n  display: flex; align-items: center; justify-content: space-between;\n  font-size: 11px; color: var(--ax-muted);\n}\n\n/* Info callout (similar to wit but inline inside panels) */\n.ax-callout {\n  background: color-mix(in oklch, var(--ax-info) 5%, var(--ax-bg-elev));\n  border: 1px solid color-mix(in oklch, var(--ax-info) 20%, var(--ax-border));\n  border-radius: var(--ax-radius-sm); padding: 12px 14px;\n  font-size: 12.5px; color: var(--ax-text-2); line-height: 1.6;\n  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;\n}\n.ax-callout__icon {\n  width: 18px; height: 18px; border-radius: 50%;\n  background: color-mix(in oklch, var(--ax-info) 18%, transparent);\n  color: var(--ax-info); display: grid; place-items: center;\n  font-size: 11px; font-weight: 600; flex-shrink: 0; margin-top: 1px;\n}\n.ax-callout b { color: var(--ax-text); }\n.ax-callout code {\n  font-family: var(--ax-mono); font-size: 11.5px;\n  background: var(--ax-bg); padding: 1px 5px; border-radius: var(--ax-radius-sm);\n  border: var(--ax-border-w) solid var(--ax-border);\n}\n\n/* Channel-binding rows (agent-specific view) */\n.ax-chan-row {\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); padding: 12px 14px;\n  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\n}\n.ax-chan-row__logo {\n  width: 32px; height: 32px; border-radius: var(--ax-radius);\n  display: grid; place-items: center;\n  font-weight: 700; font-size: 13px; color: white; flex-shrink: 0;\n  font-family: var(--ax-mono);\n}\n.ax-chan-row__info { flex: 1; }\n.ax-chan-row__name { font-size: 13px; font-weight: 600; }\n.ax-chan-row__desc {\n  font-size: 12px; color: var(--ax-muted);\n  margin-top: 2px; font-family: var(--ax-mono);\n}\n\n/* Handover viz (from-agent → to-agent arrow) */\n.ax-handover-viz {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: 14px; padding: 16px 18px;\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); margin-bottom: 14px;\n}\n.ax-ho-side {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; flex: 0 0 130px;\n}\n.ax-ho-side__av {\n  width: 42px; height: 42px; border-radius: var(--ax-radius);\n  display: grid; place-items: center;\n  font-weight: 600; font-size: 15px;\n}\n.ax-ho-side--from .ax-ho-side__av {\n  background: color-mix(in oklch, var(--ax-accent) 18%, var(--ax-surface));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 35%, var(--ax-border));\n  color: var(--ax-accent);\n}\n.ax-ho-side--to .ax-ho-side__av {\n  background: var(--ax-surface-2); border: var(--ax-border-w) solid var(--ax-border-2);\n  color: var(--ax-text);\n}\n.ax-ho-side__nm { font-size: 12px; font-weight: 600; }\n.ax-ho-side__rl {\n  font-size: 10px; color: var(--ax-muted);\n  text-transform: uppercase; letter-spacing: 0.06em;\n  font-family: var(--ax-mono);\n}\n.ax-ho-wire {\n  flex: 1; height: 2px; position: relative;\n  background: repeating-linear-gradient(90deg,\n    var(--ax-border-2) 0, var(--ax-border-2) 4px,\n    transparent 4px, transparent 8px);\n}\n.ax-ho-wire svg {\n  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);\n  width: 16px; height: 16px; color: var(--ax-accent);\n}\n.ax-ho-list-row {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 12px;\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm); margin-bottom: 6px;\n  font-size: 12.5px;\n}\n.ax-ho-list-row .ax-who { flex: 1; color: var(--ax-text-2); }\n.ax-ho-list-row .ax-who b {\n  color: var(--ax-text); font-family: var(--ax-mono); font-weight: 500;\n}\n.ax-ho-list-row .ax-when { color: var(--ax-muted); font-size: 11px; }\n\n/* Activity cells + spark + session rows */\n.ax-activity-grid {\n  display: grid; grid-template-columns: repeat(4, 1fr);\n  gap: 10px; margin-bottom: 18px;\n}\n.ax-activity-cell {\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm); padding: 14px;\n}\n.ax-activity-cell .ax-v {\n  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;\n}\n.ax-activity-cell .ax-l {\n  font-size: 11px; color: var(--ax-muted); margin-top: 2px;\n}\n.ax-activity-cell .ax-delta {\n  font-size: 11px; margin-top: 6px;\n  display: inline-flex; align-items: center; gap: 3px;\n}\n.ax-activity-cell .ax-delta--up { color: var(--ax-accent); }\n.ax-activity-cell .ax-delta--down { color: var(--ax-muted); }\n\n.ax-spark { width: 100%; height: 100px; margin: 10px 0 14px; }\n\n.ax-session {\n  display: flex; align-items: center; gap: 10px;\n  padding: 10px 12px;\n  background: var(--ax-bg-elev); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-sm); margin-bottom: 6px;\n  font-size: 12.5px;\n}\n.ax-session__ch {\n  width: 24px; height: 24px; border-radius: var(--ax-radius-sm);\n  display: grid; place-items: center;\n  font-weight: 700; font-size: 10px; color: white;\n  flex-shrink: 0; font-family: var(--ax-mono);\n}\n.ax-session__body { flex: 1; min-width: 0; }\n.ax-session__txt {\n  color: var(--ax-text); overflow: hidden; text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ax-session__meta {\n  font-size: 11px; color: var(--ax-muted);\n  margin-top: 1px; font-family: var(--ax-mono);\n}\n\n/* Log row (Conversations tab) */\n.ax-log-head {\n  display: grid; grid-template-columns: 24px 90px 160px 1fr auto;\n  gap: 12px; padding: 8px 10px;\n  border-bottom: var(--ax-border-w) solid var(--ax-border-2);\n  font-size: 10px; color: var(--ax-muted);\n  text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--ax-mono);\n}\n.ax-log-row {\n  display: grid; grid-template-columns: 24px 90px 160px 1fr auto;\n  gap: 12px; align-items: center; padding: 9px 10px;\n  border-bottom: var(--ax-border-w) solid var(--ax-border); font-size: 12px;\n}\n.ax-log-row:hover { background: color-mix(in oklch, var(--ax-accent) 4%, transparent); }\n.ax-log-row .ax-sev {\n  width: 8px; height: 8px; border-radius: 50%; margin-left: 8px;\n}\n.ax-log-row .ax-sev--ok { background: var(--ax-accent); }\n.ax-log-row .ax-sev--warn { background: var(--ax-warn); }\n.ax-log-row .ax-sev--err { background: var(--ax-err); }\n.ax-log-row .ax-t {\n  font-family: var(--ax-mono); color: var(--ax-muted); font-size: 11px;\n}\n.ax-log-row .ax-who {\n  font-family: var(--ax-mono); font-size: 11px; color: var(--ax-text-2);\n}\n.ax-log-row .ax-msg {\n  color: var(--ax-text); overflow: hidden;\n  text-overflow: ellipsis; white-space: nowrap;\n}\n.ax-log-row .ax-ms {\n  color: var(--ax-muted); font-family: var(--ax-mono); font-size: 11px;\n}\n\n/* Danger zone */\n.ax-panel--danger {\n  border-color: color-mix(in oklch, var(--ax-err) 30%, var(--ax-border));\n}\n.ax-danger-item {\n  display: flex; align-items: center; gap: 14px;\n  padding: 14px 0; border-bottom: 1px dashed var(--ax-border);\n}\n.ax-danger-item:last-child { border-bottom: 0; padding-bottom: 0; }\n.ax-danger-item:first-child { padding-top: 4px; }\n.ax-danger-item__info { flex: 1; }\n.ax-danger-item__name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }\n.ax-danger-item__desc { font-size: 12px; color: var(--ax-muted); line-height: 1.5; }\n\n/* Test-drive panel — docked to the right edge, slides in from outside\n * the viewport when toggled. Similar to the Live page history-panel. */\n.ax-td-panel {\n  position: fixed; top: 0; right: 0; bottom: 0; width: 420px;\n  background: var(--ax-bg-elev); border-left: var(--ax-border-w) solid var(--ax-border);\n  z-index: 900;\n  display: flex; flex-direction: column;\n  box-shadow: -8px 0 24px rgba(0,0,0,0.4);\n  transform: translateX(100%); transition: transform 0.22s ease;\n}\n.ax-td-panel.is-open { transform: translateX(0); }\n@media (max-width: 520px) {\n  .ax-td-panel { width: 100vw; }\n}\n.ax-td-head {\n  padding: 12px 14px; border-bottom: var(--ax-border-w) solid var(--ax-border);\n  background: var(--ax-bg-elev);\n  display: flex; align-items: center; gap: 10px;\n}\n.ax-td-head__dot {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--ax-accent);\n  box-shadow: 0 0 8px color-mix(in oklch, var(--ax-accent) 60%, transparent);\n  animation: ax-pulse 2.2s infinite;\n}\n.ax-td-head__t { flex: 1; font-size: 12px; font-weight: 600; }\n.ax-td-head__sub {\n  font-size: 11px; color: var(--ax-muted); font-family: var(--ax-mono);\n}\n.ax-td-head__seg {\n  display: inline-flex; background: var(--ax-surface);\n  border: var(--ax-border-w) solid var(--ax-border); border-radius: var(--ax-radius-sm); padding: 2px;\n}\n.ax-td-head__seg button {\n  background: transparent; border: 0; color: var(--ax-muted);\n  padding: 3px 8px; font: inherit; font-size: 10.5px;\n  cursor: pointer; border-radius: var(--ax-radius-sm); font-family: var(--ax-mono);\n}\n.ax-td-head__seg button.is-active {\n  background: var(--ax-surface-2); color: var(--ax-text);\n}\n\n.ax-td-scenarios {\n  padding: 10px 14px; background: var(--ax-bg-elev);\n  border-bottom: var(--ax-border-w) solid var(--ax-border);\n  display: flex; gap: 5px; flex-wrap: wrap;\n}\n.ax-td-scenarios__lbl {\n  font-size: 10px; color: var(--ax-muted);\n  text-transform: uppercase; letter-spacing: 0.06em;\n  font-family: var(--ax-mono); width: 100%; margin-bottom: 3px;\n}\n.ax-td-scenario {\n  font-size: 11px; padding: 3px 8px;\n  background: var(--ax-surface); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius); color: var(--ax-text-2);\n  cursor: pointer; transition: all 120ms;\n}\n.ax-td-scenario:hover { border-color: var(--ax-accent); color: var(--ax-accent); }\n\n.ax-td-chat {\n  flex: 1; overflow-y: auto; padding: 14px;\n  display: flex; flex-direction: column; gap: 8px;\n  background: var(--ax-bg);\n}\n.ax-td-chat__msg-wrap {\n  display: flex; flex-direction: column; gap: 2px; max-width: 86%;\n}\n.ax-td-chat__msg-wrap.is-user { align-self: flex-end; align-items: flex-end; }\n.ax-td-chat__msg-wrap.is-bot { align-self: flex-start; }\n.ax-td-chat__bubble {\n  padding: 8px 12px; border-radius: var(--ax-radius-lg);\n  font-size: 12.5px; line-height: 1.55; word-wrap: break-word;\n}\n.ax-td-chat__bubble.is-user {\n  background: var(--ax-accent); color: var(--ax-bg);\n  border-bottom-right-radius: 3px; font-weight: 500;\n}\n.ax-td-chat__bubble.is-bot {\n  background: var(--ax-surface-2); color: var(--ax-text);\n  border-bottom-left-radius: 3px; border: var(--ax-border-w) solid var(--ax-border);\n}\n.ax-td-chat__meta {\n  font-size: 9.5px; color: var(--ax-muted);\n  font-family: var(--ax-mono); padding: 0 4px;\n}\n.ax-td-chat__typing {\n  align-self: flex-start; padding: 10px 14px;\n  background: var(--ax-surface-2); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius-lg); border-bottom-left-radius: 3px;\n  display: inline-flex; gap: 4px;\n}\n.ax-td-chat__typing span {\n  width: 6px; height: 6px; background: var(--ax-muted);\n  border-radius: 50%; animation: axTypingBounce 1.2s infinite;\n}\n.ax-td-chat__typing span:nth-child(2) { animation-delay: 0.15s; }\n.ax-td-chat__typing span:nth-child(3) { animation-delay: 0.3s; }\n@keyframes axTypingBounce {\n  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }\n  30% { transform: translateY(-5px); opacity: 1; }\n}\n.ax-td-input {\n  padding: 10px; border-top: var(--ax-border-w) solid var(--ax-border);\n  background: var(--ax-bg-elev); display: flex; gap: 6px;\n}\n.ax-td-input input {\n  flex: 1; background: var(--ax-bg); border: var(--ax-border-w) solid var(--ax-border);\n  border-radius: var(--ax-radius); padding: 8px 11px;\n  color: var(--ax-text); font: inherit; font-size: 12.5px;\n}\n.ax-td-input input:focus { outline: none; border-color: var(--ax-accent); }\n.ax-td-input button {\n  background: var(--ax-accent); color: var(--ax-bg); border: 0;\n  border-radius: var(--ax-radius); padding: 0 12px;\n  cursor: pointer; font-weight: 600;\n}\n.ax-td-input button:hover {\n  background: color-mix(in oklch, var(--ax-accent) 88%, white);\n}\n\n/* Inline task-queue chip on bot messages */\n.ax-td-task-chip {\n  display: inline-flex; align-items: center; gap: 5px;\n  margin-top: 5px; padding: 3px 8px;\n  background: color-mix(in oklch, var(--ax-accent) 10%, var(--ax-surface));\n  border: 1px solid color-mix(in oklch, var(--ax-accent) 35%, var(--ax-border));\n  border-radius: var(--ax-radius); font-size: 10px; color: var(--ax-accent);\n  font-family: var(--ax-mono); letter-spacing: 0.04em;\n  cursor: default; user-select: none;\n}\n.ax-td-task-chip__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--ax-accent); flex-shrink: 0;\n}\n.ax-td-task-chip--queued .ax-td-task-chip__dot {\n  background: var(--ax-muted);\n}\n.ax-td-task-chip__id {\n  font-family: var(--ax-mono); opacity: 0.7; font-size: 9px;\n}\n\n/* Section mini-label used throughout detail pages */\n.ax-sec-label-d {\n  display: flex; align-items: center; justify-content: space-between;\n  margin: 20px 0 10px;\n}\n.ax-sec-label-d h3 {\n  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--ax-muted);\n  margin: 0; font-family: var(--ax-mono);\n}\n\n/* --- Responsive collapses for the settings primitives --- */\n@media (max-width: 1180px) {\n  .ax-layout { grid-template-columns: 180px 1fr; }\n}\n@media (max-width: 760px) {\n  .ax-health-strip { grid-template-columns: repeat(2, 1fr); }\n  .ax-connectors { grid-template-columns: 1fr; }\n  .ax-detail-grid { grid-template-columns: 1fr; }\n  .ax-mesh-hero { grid-template-columns: 1fr; }\n  .ax-mesh-viz { margin: 0 auto; }\n  .ax-cron-hints { grid-template-columns: 1fr; }\n  .ax-layout { grid-template-columns: 1fr; }\n  .ax-rail { display: none; }\n  .ax-stats-inline { grid-template-columns: repeat(2, 1fr); }\n  .ax-activity-grid { grid-template-columns: repeat(2, 1fr); }\n  .ax-log-head, .ax-log-row { grid-template-columns: 8px 80px 1fr auto; }\n  .ax-log-head span:nth-child(3), .ax-log-row .ax-who { display: none; }\n  .ax-grid-2, .ax-grid-3 { grid-template-columns: 1fr; }\n}`\n","// --- Page shell renderer ---\n//\n// Every dashboard page used to hand-roll its own <html><head><body> wrapper:\n// meta tags, font links, theme bootstrap script, style tags, topbar markup,\n// closing tags. That's ~60 lines of boilerplate per page, identical across\n// ~8 pages. This module centralises it.\n//\n// A page calls `renderShell({ title, activeTab, subtitle, body, css, ... })`\n// and gets back a complete HTML document with:\n//   - Correct <meta>, <title>, Plex font link, theme-bootstrap script\n//   - AX_TOKENS_CSS (design tokens) + AX_COMPONENTS_CSS (badge/stat/card/...)\n//   - TOPBAR_CSS (chrome) always included\n//   - Page-specific CSS appended after\n//   - renderTopbar() at the top\n//   - <main> with the page body\n//   - TOPBAR_SCRIPT (theme toggle + mesh selector) at the end\n//   - Page-specific <script> appended after\n//\n// Pages that want a slimmer header (e.g. /setup, which has its own simplified\n// topbar) can pass `renderHeader: \"custom\"` and provide their own <header>.\n\nimport { AX_TOKENS_CSS } from \"./tokens\"\nimport { AX_COMPONENTS_CSS } from \"./components.css\"\nimport {\n  TOPBAR_HEAD,\n  TOPBAR_CSS,\n  TOPBAR_SCRIPT,\n  renderTopbar,\n  type TopbarOpts,\n  type TopbarPeer,\n} from \"../topbar\"\n\nexport interface ShellOpts {\n  /** Browser tab title — \"AgentX · Live\", \"AgentX · Settings\", etc. */\n  title: string\n  /**\n   * The topbar tab to highlight, OR \"custom\" to skip rendering the default\n   * topbar so the page can provide its own header.\n   */\n  activeTab: TopbarOpts[\"activeTab\"] | \"custom\"\n  /** Subtitle after the brand — \"Live\", \"Settings\", \"Setup\", \"Intent Graph\". */\n  subtitle: string\n  /** Page body HTML — everything inside <main>. */\n  body: string\n  /** Optional HTML inserted as a second row under the topbar. */\n  subheader?: string\n  /**\n   * Page-specific CSS appended after the shared blocks. Use this for styles\n   * that aren't worth promoting to components.css (e.g. kanban column\n   * layout, graph tree indentation).\n   */\n  css?: string\n  /** Page-specific <script> blocks (full tags, not raw JS). */\n  scripts?: string\n  /** Mesh peers to populate the selector. */\n  peers?: TopbarPeer[]\n  currentPeerId?: string\n  /** If provided, replaces the default topbar entirely. */\n  customHeader?: string\n  /**\n   * When true, omit the <main> wrapper — caller renders their own. Useful\n   * for pages (e.g. boards kanban) that need a full-viewport layout without\n   * the default padding.\n   */\n  noMain?: boolean\n  /** Extra content to inject into <head> (rare — e.g. preload hints). */\n  headExtras?: string\n}\n\nexport function renderShell(opts: ShellOpts): string {\n  const css = `${AX_TOKENS_CSS}\\n${AX_COMPONENTS_CSS}\\n${TOPBAR_CSS}${opts.css ? \"\\n\" + opts.css : \"\"}`\n\n  const header = opts.customHeader\n    ?? (opts.activeTab === \"custom\"\n      ? \"\"\n      : renderTopbar({\n          activeTab: opts.activeTab,\n          subtitle: opts.subtitle,\n          subheader: opts.subheader,\n          peers: opts.peers,\n          currentPeerId: opts.currentPeerId,\n        }))\n\n  const main = opts.noMain ? opts.body : `<main>${opts.body}</main>`\n\n  return `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>${escapeTitle(opts.title)}</title>\n${TOPBAR_HEAD}\n${opts.headExtras || \"\"}\n<style>${css}</style>\n</head>\n<body>\n${header}\n${main}\n${TOPBAR_SCRIPT}\n${opts.scripts || \"\"}\n</body>\n</html>`\n}\n\nfunction escapeTitle(s: string): string {\n  return String(s || \"\").replace(/[<>&]/g, (c) => ({ \"<\": \"&lt;\", \">\": \"&gt;\", \"&\": \"&amp;\" }[c] as string))\n}\n","// Shared small utilities for UI renderers.\n\n/**\n * HTML-escape a string so it's safe to interpolate inside attributes or text\n * content. Every page used to ship its own `esc` / `escapeHtml` / `safe` —\n * this is the canonical one.\n */\nexport function esc(s: unknown): string {\n  return String(s ?? \"\").replace(/[&<>\"']/g, (c) => ({\n    \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&#39;\",\n  }[c] as string))\n}\n\n/** Join class names, dropping falsy values. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \")\n}\n","// --- Shared UI components ---\n//\n// Small helpers that return HTML strings. Used by every page to produce\n// consistent badges, cards, form rows, buttons without copy-pasting.\n//\n// ### Philosophy\n//\n// - Pure functions: `string` in, `string` out. No classes, no DSL, no JSX.\n// - Caller composes: `cardHtml(children)` not `Card({children})`.\n// - Null/undefined opts render an empty string, so conditional composition\n//   just inlines: `${badge(...) ?? \"\"}` without wrapper ifs.\n// - Variants are flat classnames, not object props: `badge(\"LIVE\", \"live\")`\n//   not `badge({label: \"LIVE\", variant: \"live\"})`. Cheaper to read, easier\n//   to grep for.\n\nimport { esc } from \"./util\"\n\n// --- Dots (status indicators) ---\n\nexport type DotKind = \"ok\" | \"live\" | \"warn\" | \"err\" | \"off\" | undefined\n\nexport function dot(kind?: DotKind, pulse = false): string {\n  const classes = [\"ax-dot\", kind ? `ax-dot--${kind}` : \"\", pulse ? \"ax-dot--pulse\" : \"\"]\n    .filter(Boolean).join(\" \")\n  return `<span class=\"${classes}\"></span>`\n}\n\n// --- Badges (small pill labels) ---\n\nexport type BadgeKind = \"accent\" | \"live\" | \"warn\" | \"err\" | \"ghost\" | \"mono\" | undefined\n\nexport function badge(label: string, kind?: BadgeKind, extraClass = \"\"): string {\n  const classes = [\"ax-badge\", kind ? `ax-badge--${kind}` : \"\", extraClass]\n    .filter(Boolean).join(\" \")\n  return `<span class=\"${classes}\">${esc(label)}</span>`\n}\n\n// --- Buttons ---\n\nexport interface BtnOpts {\n  type?: \"button\" | \"submit\"\n  primary?: boolean\n  ghost?: boolean\n  danger?: boolean\n  id?: string\n  disabled?: boolean\n  extraClass?: string\n  onclick?: string\n}\n\nexport function btn(label: string, opts: BtnOpts = {}): string {\n  const classes = [\"ax-btn\",\n    opts.primary ? \"ax-btn--primary\" : \"\",\n    opts.ghost ? \"ax-btn--ghost\" : \"\",\n    opts.danger ? \"ax-btn--danger\" : \"\",\n    opts.extraClass || \"\",\n  ].filter(Boolean).join(\" \")\n  const attrs = [\n    `type=\"${opts.type || \"button\"}\"`,\n    `class=\"${classes}\"`,\n    opts.id ? `id=\"${esc(opts.id)}\"` : \"\",\n    opts.disabled ? \"disabled\" : \"\",\n    opts.onclick ? `onclick=\"${esc(opts.onclick)}\"` : \"\",\n  ].filter(Boolean).join(\" \")\n  return `<button ${attrs}>${esc(label)}</button>`\n}\n\n// --- Stat cards (the \"NUMBER + label\" strip) ---\n\nexport interface StatOpts {\n  label: string\n  value: string\n  sub?: string\n  kind?: \"live\" | \"warn\" | \"err\"\n}\n\nexport function stat(opts: StatOpts): string {\n  const cls = opts.kind ? `ax-stat ax-stat--${opts.kind}` : \"ax-stat\"\n  return `<div class=\"${cls}\">\n    <div class=\"ax-stat__label\">${esc(opts.label)}</div>\n    <div class=\"ax-stat__value\">${esc(opts.value)}</div>\n    ${opts.sub ? `<div class=\"ax-stat__sub\">${esc(opts.sub)}</div>` : \"\"}\n  </div>`\n}\n\nexport function statStrip(stats: StatOpts[]): string {\n  return `<div class=\"ax-statstrip\">${stats.map(stat).join(\"\")}</div>`\n}\n\n// --- Form field (label + input/textarea/select) ---\n\nexport interface FieldOpts {\n  name: string\n  label: string\n  hint?: string\n  type?: \"text\" | \"password\" | \"email\" | \"url\" | \"number\" | \"textarea\" | \"select\"\n  value?: string\n  placeholder?: string\n  pattern?: string\n  required?: boolean\n  readonly?: boolean\n  rows?: number\n  options?: Array<{ value: string; label: string; selected?: boolean }>\n  extraAttrs?: string\n}\n\nexport function field(opts: FieldOpts): string {\n  const labelHtml = `<label>${esc(opts.label)}${\n    opts.hint ? ` <span class=\"ax-hint\">${opts.hint}</span>` : \"\"\n  }</label>`\n  let controlHtml = \"\"\n  const common = [\n    `name=\"${esc(opts.name)}\"`,\n    opts.required ? \"required\" : \"\",\n    opts.readonly ? \"readonly\" : \"\",\n    opts.placeholder ? `placeholder=\"${esc(opts.placeholder)}\"` : \"\",\n    opts.extraAttrs || \"\",\n  ].filter(Boolean).join(\" \")\n\n  if (opts.type === \"textarea\") {\n    controlHtml = `<textarea ${common} rows=\"${opts.rows || 3}\">${esc(opts.value || \"\")}</textarea>`\n  } else if (opts.type === \"select\" && opts.options) {\n    const options = opts.options.map(o =>\n      `<option value=\"${esc(o.value)}\"${o.selected ? \" selected\" : \"\"}>${esc(o.label)}</option>`\n    ).join(\"\")\n    controlHtml = `<select ${common}>${options}</select>`\n  } else {\n    const type = opts.type || \"text\"\n    controlHtml = `<input type=\"${type}\" ${common}`\n      + (opts.value !== undefined ? ` value=\"${esc(opts.value)}\"` : \"\")\n      + (opts.pattern ? ` pattern=\"${esc(opts.pattern)}\"` : \"\")\n      + \" />\"\n  }\n  return `<div class=\"ax-field\">${labelHtml}${controlHtml}</div>`\n}\n\nexport function row(children: string[]): string {\n  return `<div class=\"ax-row\">${children.join(\"\")}</div>`\n}\n\n// --- Cards ---\n\nexport function card(content: string, extraClass = \"\"): string {\n  return `<div class=\"ax-card${extraClass ? \" \" + extraClass : \"\"}\">${content}</div>`\n}\n\nexport function stepCard(num: number | string, title: string, body: string): string {\n  return `<section class=\"ax-step\">\n    <div class=\"ax-step__head\"><span class=\"ax-step__num\">${esc(String(num))}</span>${esc(title)}</div>\n    ${body}\n  </section>`\n}\n\n// --- Small layout helpers ---\n\nexport function spacer(height = 12): string {\n  return `<div style=\"height:${height}px\"></div>`\n}\n\n// ============================================================================\n// Settings-page primitives (from the Stitch redesign)\n// ============================================================================\n\n/** Page head — kicker + h1 + lead. Lives outside <main> so it can span wider. */\nexport interface PageHeadOpts {\n  kicker?: string\n  title: string\n  lead?: string\n}\nexport function pageHead(opts: PageHeadOpts): string {\n  return `<div class=\"ax-page-head\">\n    ${opts.kicker ? `<div class=\"ax-kicker\">${esc(opts.kicker)}</div>` : \"\"}\n    <h1>${esc(opts.title)}</h1>\n    ${opts.lead ? `<p class=\"ax-lead\">${opts.lead}</p>` : \"\"}\n  </div>`\n}\n\n/** 4-up health strip: colour-coded status cards across the top of a page. */\nexport interface HealthCardOpts {\n  kind?: \"ok\" | \"warn\" | \"off\"\n  num: string\n  label: string\n}\nexport function healthCard(opts: HealthCardOpts): string {\n  const kind = opts.kind || \"off\"\n  return `<div class=\"ax-health-card\">\n    <div class=\"ax-hc-dot ax-hc-dot--${kind}\"></div>\n    <div class=\"ax-hc-txt\">\n      <div class=\"ax-hc-num\">${esc(opts.num)}</div>\n      <div class=\"ax-hc-lbl\">${esc(opts.label)}</div>\n    </div>\n  </div>`\n}\nexport function healthStrip(cards: HealthCardOpts[]): string {\n  return `<div class=\"ax-health-strip\">${cards.map(healthCard).join(\"\")}</div>`\n}\n\n/**\n * \"What is this?\" banner. Renders a dismissable explanatory box for users\n * meeting a tab for the first time. Pass raw HTML for body — short runs\n * with <b> and <code> are the intended style.\n */\nexport interface WitOpts {\n  bodyHtml: string\n  /** Persist the dismissal under this key in localStorage. Optional. */\n  persistKey?: string\n  icon?: string\n}\nexport function witBanner(opts: WitOpts): string {\n  const attr = opts.persistKey ? ` data-wit=\"${esc(opts.persistKey)}\"` : \"\"\n  return `<div class=\"ax-wit\"${attr}>\n    <span class=\"ax-wit__icon\">${esc(opts.icon || \"?\")}</span>\n    <div>${opts.bodyHtml}</div>\n    <button class=\"ax-wit__dismiss\" onclick=\"this.parentElement.style.display='none'\">×</button>\n  </div>`\n}\n\n/**\n * Section header with icon chip + title + lead + optional right-aligned\n * action. Icon is raw SVG so the caller picks the glyph; feed a 24x24\n * stroked Feather-style icon for best fit.\n */\nexport interface SectionHeadOpts {\n  icon: string\n  title: string\n  lead?: string\n  actionHtml?: string\n}\nexport function sectionHead(opts: SectionHeadOpts): string {\n  return `<div class=\"ax-section-head\">\n    <div class=\"ax-section-head__icon\">${opts.icon}</div>\n    <div class=\"ax-section-head__text\">\n      <h2>${esc(opts.title)}</h2>\n      ${opts.lead ? `<p class=\"ax-lead\">${esc(opts.lead)}</p>` : \"\"}\n    </div>\n    ${opts.actionHtml || \"\"}\n  </div>`\n}\n\n/** Coloured-initial avatar — pass 1-2 letters; variant sets the tint. */\nexport type AvatarVariant = \"plain\" | \"teal\" | \"coral\" | \"amber\" | \"blue\"\nexport function avatar(initials: string, variant: AvatarVariant = \"plain\"): string {\n  const cls = variant === \"plain\" ? \"ax-avatar\" : `ax-avatar ax-avatar--${variant}`\n  return `<div class=\"${cls}\">${esc(initials)}</div>`\n}\n\n/**\n * Status pill with coloured dot — \"live\", \"idle\", \"receiving\", \"stale\".\n * Different from {@link badge}: pill has a rounded shape (10px radius) and\n * a leading dot. Prefer for attached-to-name status labels.\n */\nexport type PillKind = \"ok\" | \"warn\" | \"off\" | \"info\" | \"plain\"\nexport function pill(label: string, kind: PillKind = \"plain\", withDot = true): string {\n  const cls = kind === \"plain\" ? \"ax-pill\" : `ax-pill ax-pill--${kind}`\n  const dot = withDot && kind !== \"plain\" && kind !== \"off\" ? `<span class=\"ax-pill__dot\"></span>` : \"\"\n  return `<span class=\"${cls}\">${dot}${esc(label)}</span>`\n}\n\n/**\n * Row card with colored avatar + info + actions + optional expandable\n * details section. Details are hidden behind `.is-open` on the card;\n * toggleCard() on the client flips it.\n */\nexport interface RowCardOpts {\n  avatarHtml?: string\n  /** Left block: title + pills + sub-line. Raw HTML. */\n  infoHtml: string\n  /** Right-aligned action cluster. Raw HTML (usually btns). */\n  actionsHtml?: string\n  /** Collapsible details. When provided, the card is collapsible. */\n  detailsHtml?: string\n  /** Initial open state. Default false. */\n  open?: boolean\n  /** Extra classes on the card wrapper. */\n  extraClass?: string\n}\nexport function rowCard(opts: RowCardOpts): string {\n  const cls = [\"ax-row-card\", opts.open ? \"is-open\" : \"\", opts.extraClass || \"\"]\n    .filter(Boolean).join(\" \")\n  return `<div class=\"${cls}\">\n    <div class=\"ax-row-card__top\">\n      ${opts.avatarHtml || \"\"}\n      <div class=\"ax-row-card__info\">${opts.infoHtml}</div>\n      ${opts.actionsHtml ? `<div class=\"ax-row-card__actions\">${opts.actionsHtml}</div>` : \"\"}\n    </div>\n    ${opts.detailsHtml ? `<div class=\"ax-row-card__details\">${opts.detailsHtml}</div>` : \"\"}\n  </div>`\n}\n\n/**\n * Channel/webhook-style connector card — big logo, name, status pill,\n * description, foot row. Clickable (caller attaches onclick / wraps\n * in <a>).\n */\nexport interface ConnectorOpts {\n  logoHtml: string\n  name: string\n  sub: string\n  statusHtml?: string\n  desc: string\n  footLeft?: string\n  footCta?: string\n  isOn?: boolean\n  onclick?: string\n  extraStyle?: string\n}\nexport function connector(opts: ConnectorOpts): string {\n  const cls = opts.isOn ? \"ax-connector is-on\" : \"ax-connector\"\n  const onclick = opts.onclick ? ` onclick=\"${esc(opts.onclick)}\"` : \"\"\n  const style = opts.extraStyle ? ` style=\"${esc(opts.extraStyle)}\"` : \"\"\n  return `<div class=\"${cls}\"${onclick}${style}>\n    <div class=\"ax-connector__top\">\n      ${opts.logoHtml}\n      <div class=\"ax-connector__meta\">\n        <div class=\"ax-connector__name\">${esc(opts.name)}</div>\n        <div class=\"ax-connector__sub\">${esc(opts.sub)}</div>\n      </div>\n      ${opts.statusHtml ? `<div class=\"ax-connector__status\">${opts.statusHtml}</div>` : \"\"}\n    </div>\n    <div class=\"ax-connector__desc\">${opts.desc}</div>\n    <div class=\"ax-connector__foot\">\n      <span>${esc(opts.footLeft || \"\")}</span>\n      ${opts.footCta\n        ? `<span class=\"ax-connector__cta\">${esc(opts.footCta)} <svg viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M4 2l4 4-4 4\"/></svg></span>`\n        : \"\"}\n    </div>\n  </div>`\n}\n\n/** Empty state used when a tab has nothing yet. */\nexport interface EmptyOpts {\n  title: string\n  desc?: string\n  actionHtml?: string\n}\nexport function emptyState(opts: EmptyOpts): string {\n  return `<div class=\"ax-empty-card\" style=\"text-align:center;padding:42px 22px;background:var(--ax-surface);border:1px dashed var(--ax-border-2);border-radius:var(--ax-radius-lg);color:var(--ax-muted)\">\n    <h3 style=\"margin:0 0 4px;color:var(--ax-text);font-size:15px;font-weight:600\">${esc(opts.title)}</h3>\n    ${opts.desc ? `<p style=\"margin:0 0 16px;font-size:13px;line-height:1.55;max-width:380px;margin-left:auto;margin-right:auto\">${esc(opts.desc)}</p>` : \"\"}\n    ${opts.actionHtml || \"\"}\n  </div>`\n}\n\n/** Mini-label used to divide sections inside a tab. */\nexport interface SecLabelOpts {\n  label: string\n  rightHtml?: string\n}\nexport function secLabel(opts: SecLabelOpts): string {\n  return `<div class=\"ax-sec-label\"><h3>${esc(opts.label)}</h3>${opts.rightHtml || \"\"}</div>`\n}\n\n/** Toast element + helper script. Include once per page that uses it. */\nexport const TOAST_HTML = `<div class=\"ax-toast\" id=\"ax-toast\">\n  <svg class=\"ax-toast__icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6L9 17l-5-5\"/></svg>\n  <span id=\"ax-toast-msg\">Copied</span>\n</div>`\nexport const TOAST_SCRIPT = `\n  let __axToastTimer;\n  window.showToast = function(msg) {\n    const el = document.getElementById('ax-toast');\n    const m = document.getElementById('ax-toast-msg');\n    if (!el || !m) return;\n    m.textContent = msg;\n    el.classList.add('is-show');\n    clearTimeout(__axToastTimer);\n    __axToastTimer = setTimeout(function(){ el.classList.remove('is-show'); }, 1800);\n  };\n  window.copyText = function(_btn, text) {\n    try { navigator.clipboard.writeText(text); } catch (e) {}\n    window.showToast('Copied to clipboard');\n  };`\n\n/** Client script that wires `.ax-row-card` expand/collapse on any button\n *  that calls `toggleCard(this)`. Include once per page. */\nexport const ROW_CARD_SCRIPT = `\n  window.toggleCard = function(btn) {\n    const card = btn.closest('.ax-row-card');\n    if (card) card.classList.toggle('is-open');\n  };`\n"],"mappings":"6DA6BO,IAAMA,EAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;yCCpBtB,IAAMC,EAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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","names":["AX_TOKENS_CSS","AX_COMPONENTS_CSS","renderShell","opts","css","AX_TOKENS_CSS","AX_COMPONENTS_CSS","TOPBAR_CSS","header","renderTopbar","main","escapeTitle","TOPBAR_HEAD","TOPBAR_SCRIPT","s","c","esc","s","c","btn","label","opts","classes","esc","field","opts","labelHtml","esc","controlHtml","common","options","o","row","children","stepCard","num","title","body","esc","pageHead","opts","esc","healthCard","healthStrip","cards","witBanner","sectionHead","secLabel","opts","esc","TOAST_HTML","TOAST_SCRIPT","ROW_CARD_SCRIPT"]}

package/dist/chunk-SR3X25TN.js

@@ -1,3 +0,0 @@
-import{a as l}from"./chunk-VJUTQAPJ.js";import{existsSync as R,promises as h}from"fs";import g from"path";import b from"js-yaml";import I from"fast-glob";import{z as e}from"zod";var y=e.enum(["ssh","gitlab","path","contact","http","secret-pointer"]),u=e.object({id:e.string().regex(/^[a-z0-9][a-z0-9._-]*[a-z0-9]$/,"id must be a dotted slug"),kind:y,summary:e.string(),fields:e.record(e.string(),e.union([e.string(),e.number(),e.boolean()])),tags:e.array(e.string()).default([]),ownerAgent:e.string().optional(),lastVerified:e.string().optional(),notes:e.string().optional()}),m=e.object({namespace:e.string().optional(),cards:e.array(u)});var $=["references",".references",".agentx/references"],x="**/*.{yaml,yml}";async function v(t){let r={byId:new Map,byTag:new Map,sourceById:new Map};for(let c of $){let o=g.resolve(t,c);if(!R(o))continue;let i=await I.glob(x,{cwd:o,deep:5});for(let a of i){let s=g.resolve(o,a);if(!a.startsWith("recipes/"))try{await C(s,r)}catch(n){l.warn({file:s,error:n?.message},"references: failed to load file")}}}return r}async function C(t,r){let c=await h.readFile(t,"utf8"),o=b.load(c),i=m.parse(o),a=i.namespace?`${i.namespace}.`:"";for(let s of i.cards){let n=`${a}${s.id}`;if(r.byId.has(n)){let f=r.sourceById.get(n);throw new Error(`references: duplicate id "${n}" in ${t}`+(f?` (also defined in ${f})`:""))}let d={...s,id:n};r.byId.set(n,d),r.sourceById.set(n,t);for(let f of d.tags){let p=r.byTag.get(f)??[];p.push(d),r.byTag.set(f,p)}}}function T(t,r=2e3){if(t.length===0)return"";let c=[...t].sort((s,n)=>s.id.localeCompare(n.id)),o="[Verified References \u2014 deterministic, do not re-query]",i=[o],a=o.length;for(let s of c){let n=w(s);if(a+n.length+1>r)break;i.push(n),a+=n.length+1}return i.join(`
-`)}function w(t){let r=Object.entries(t.fields).map(([c,o])=>`${c}=${o}`).join(" ");return`- ${t.id} (${t.kind}): ${t.summary}${r?` { ${r} }`:""}`}export{v as a,T as b};
-//# sourceMappingURL=chunk-SR3X25TN.js.map

package/dist/chunk-SR3X25TN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/agents/references/loader.ts","../src/agents/references/types.ts"],"sourcesContent":["import { existsSync, promises as fs } from \"fs\"\nimport path from \"path\"\nimport yaml from \"js-yaml\"\nimport fg from \"fast-glob\"\nimport { logger } from \"@/utils/logger\"\nimport {\n  referenceFileSchema,\n  type ReferenceCard,\n  type ReferenceIndex,\n} from \"./types\"\n\nconst REFERENCE_DIRS = [\"references\", \".references\", \".agentx/references\"]\nconst REFERENCE_GLOB = \"**/*.{yaml,yml}\"\n\n/**\n * Walk every references directory under `cwd` and build the merged index.\n * Files: YAML matching ReferenceFile schema. Each card's id can be optionally\n * prefixed by a per-file `namespace`.\n *\n * Collisions throw — references must be globally unique to keep the resolver\n * deterministic. Caller can catch and surface them via the audit lint.\n */\nexport async function loadReferences(cwd: string): Promise<ReferenceIndex> {\n  const index: ReferenceIndex = {\n    byId: new Map(),\n    byTag: new Map(),\n    sourceById: new Map(),\n  }\n\n  for (const dir of REFERENCE_DIRS) {\n    const absDir = path.resolve(cwd, dir)\n    if (!existsSync(absDir)) continue\n\n    const files = await fg.glob(REFERENCE_GLOB, { cwd: absDir, deep: 5 })\n    for (const rel of files) {\n      const abs = path.resolve(absDir, rel)\n      // Recipes live alongside references but are loaded separately.\n      if (rel.startsWith(\"recipes/\")) continue\n      try {\n        await ingestFile(abs, index)\n      } catch (e: any) {\n        logger.warn({ file: abs, error: e?.message }, \"references: failed to load file\")\n      }\n    }\n  }\n\n  return index\n}\n\nasync function ingestFile(absPath: string, index: ReferenceIndex): Promise<void> {\n  const raw = await fs.readFile(absPath, \"utf8\")\n  const parsed = yaml.load(raw)\n  const validated = referenceFileSchema.parse(parsed)\n\n  const ns = validated.namespace ? `${validated.namespace}.` : \"\"\n  for (const card of validated.cards) {\n    const id = `${ns}${card.id}`\n    if (index.byId.has(id)) {\n      const prior = index.sourceById.get(id)\n      throw new Error(\n        `references: duplicate id \"${id}\" in ${absPath}` +\n          (prior ? ` (also defined in ${prior})` : \"\")\n      )\n    }\n    const stamped: ReferenceCard = { ...card, id }\n    index.byId.set(id, stamped)\n    index.sourceById.set(id, absPath)\n    for (const tag of stamped.tags) {\n      const bucket = index.byTag.get(tag) ?? []\n      bucket.push(stamped)\n      index.byTag.set(tag, bucket)\n    }\n  }\n}\n\n/**\n * Render a deterministic, compact block of cards. Token-trimmed by alphabetical\n * id once `maxChars` is exceeded (stable order = stable cache).\n */\nexport function renderReferences(\n  cards: ReferenceCard[],\n  maxChars: number = 2000,\n): string {\n  if (cards.length === 0) return \"\"\n  const sorted = [...cards].sort((a, b) => a.id.localeCompare(b.id))\n  const header = \"[Verified References — deterministic, do not re-query]\"\n  const lines: string[] = [header]\n  let total = header.length\n  for (const card of sorted) {\n    const fact = renderCard(card)\n    if (total + fact.length + 1 > maxChars) break\n    lines.push(fact)\n    total += fact.length + 1\n  }\n  return lines.join(\"\\n\")\n}\n\nfunction renderCard(card: ReferenceCard): string {\n  const fields = Object.entries(card.fields)\n    .map(([k, v]) => `${k}=${v}`)\n    .join(\" \")\n  return `- ${card.id} (${card.kind}): ${card.summary}${fields ? ` { ${fields} }` : \"\"}`\n}\n","import { z } from \"zod\"\n\n// --- Deterministic Reference Registry ---\n//\n// References are typed, structured fact cards (SSH hosts, GitLab project IDs,\n// filesystem paths, contacts). Skills cite them by dotted ID; the resolver\n// renders them as a small deterministic block at the top of agent context.\n// No LLM in the lookup path — same (agent, intent, message) → same facts.\n\nexport const referenceKindSchema = z.enum([\n  \"ssh\",\n  \"gitlab\",\n  \"path\",\n  \"contact\",\n  \"http\",\n  \"secret-pointer\",\n])\nexport type ReferenceKind = z.infer<typeof referenceKindSchema>\n\nexport const referenceCardSchema = z.object({\n  /** Dotted ID, e.g. \"ksi.gitlab.project.ksi-v2\". Globally unique. */\n  id: z.string().regex(/^[a-z0-9][a-z0-9._-]*[a-z0-9]$/, \"id must be a dotted slug\"),\n  kind: referenceKindSchema,\n  /** Human-readable summary rendered in the verified-references block. */\n  summary: z.string(),\n  /** Typed fact body. Shape varies by kind — validated permissively here,\n   *  shape is enforced at render time. */\n  fields: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])),\n  /** Free-form tags used by recipes for matching (e.g. \"deploy\", \"ksi-v2\"). */\n  tags: z.array(z.string()).default([]),\n  /** Agent that owns / verifies this card. */\n  ownerAgent: z.string().optional(),\n  /** ISO date the values were last verified. Stale cards surface in audit. */\n  lastVerified: z.string().optional(),\n  /** Inline notes — never rendered to the agent, just for human readers. */\n  notes: z.string().optional(),\n})\nexport type ReferenceCard = z.infer<typeof referenceCardSchema>\n\nexport const referenceFileSchema = z.object({\n  /** Optional namespace prefix applied to every card id in the file. */\n  namespace: z.string().optional(),\n  cards: z.array(referenceCardSchema),\n})\nexport type ReferenceFile = z.infer<typeof referenceFileSchema>\n\nexport interface ReferenceIndex {\n  /** id → card */\n  byId: Map<string, ReferenceCard>\n  /** tag → card[] */\n  byTag: Map<string, ReferenceCard[]>\n  /** Source file path for each card id (for audit / debug). */\n  sourceById: Map<string, string>\n}\n"],"mappings":"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","names":["existsSync","fs","path","yaml","fg","z","referenceKindSchema","referenceCardSchema","referenceFileSchema","REFERENCE_DIRS","REFERENCE_GLOB","loadReferences","cwd","index","dir","absDir","path","existsSync","files","fg","rel","abs","ingestFile","e","logger","absPath","raw","fs","parsed","yaml","validated","referenceFileSchema","ns","card","id","prior","stamped","tag","bucket","renderReferences","cards","maxChars","sorted","a","b","header","lines","total","fact","renderCard","fields","k","v"]}