agentix-cli 0.23.0 → 0.25.0

package/dist/chunk-LDHPMJ7M.js

@@ -0,0 +1,257 @@
+var d={};function g(r){d=r}function v(){return d}var w=`<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<script>(function(){try{var t=localStorage.getItem('ax-theme');if(t!=='light'&&t!=='dark'){t='dark';localStorage.setItem('ax-theme',t)}document.documentElement.setAttribute('data-theme',t)}catch(e){document.documentElement.setAttribute('data-theme','dark')}})();</script>`,y=`
+.ax-topbar{display:flex;align-items:center;justify-content:space-between;
+  padding:8px 18px;border-bottom:1px solid var(--ax-border);
+  background:var(--ax-bg-elev);position:sticky;top:0;z-index:20;gap:10px;flex-wrap:nowrap}
+.ax-topbar__left{display:flex;align-items:center;gap:18px;min-width:0}
+.ax-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.01em;flex-shrink:0}
+.ax-brand__mark{font-family:var(--ax-mono);font-size:12px;padding:2px 8px;
+  border:1px solid var(--ax-border-2);color:var(--ax-accent);border-radius:4px}
+.ax-brand__name{font-size:14px}
+.ax-brand__subtitle{font-size:11px;color:var(--ax-muted);
+  border-left:1px solid var(--ax-border);padding-left:12px;margin-left:4px}
+.ax-topbar__tabs{display:flex;gap:14px;min-width:0;overflow-x:auto;align-items:center}
+/* Tier groups (System / Processes / Procedures) \u2014 visual separators
+ * mirror the docs/architecture/three-tier.md hierarchy. */
+.ax-topbar__group{display:flex;align-items:center;gap:0;padding:0 4px;
+  border-left:1px solid var(--ax-border);position:relative}
+.ax-topbar__group:first-child{border-left:none;padding-left:0}
+.ax-topbar__group-label{font:inherit;font-family:var(--ax-mono);font-size:9px;
+  letter-spacing:0.08em;text-transform:uppercase;color:var(--ax-muted);
+  padding:0 8px;white-space:nowrap;opacity:0.7}
+.ax-topbar__tab{background:transparent;border:none;color:var(--ax-text-2);
+  padding:8px 12px;font:inherit;cursor:pointer;font-size:12px;text-decoration:none;
+  border-bottom:2px solid transparent;letter-spacing:-0.005em;white-space:nowrap}
+.ax-topbar__tab:hover{color:var(--ax-text)}
+.ax-topbar__tab.is-active{color:var(--ax-text);border-bottom-color:var(--ax-accent)}
+.ax-topbar__right{display:flex;align-items:center;gap:10px;font-size:11px;
+  color:var(--ax-muted);flex-shrink:0}
+.ax-topbar__right .ax-mono{color:var(--ax-text-2)}
+
+/* Mesh selector */
+.ax-mesh-sel{position:relative;display:inline-flex;align-items:center;gap:6px;
+  padding:4px 10px;border:1px solid var(--ax-border-2);border-radius:4px;
+  background:var(--ax-surface);cursor:pointer;font:inherit;font-size:11px;
+  color:var(--ax-text-2);white-space:nowrap}
+.ax-mesh-sel:hover{border-color:var(--ax-accent);color:var(--ax-text)}
+.ax-mesh-sel.is-proxy{background:color-mix(in oklch,var(--ax-accent) 14%,var(--ax-surface));
+  border-color:color-mix(in oklch,var(--ax-accent) 45%,var(--ax-border-2));color:var(--ax-accent)}
+.ax-mesh-sel .lbl{font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ax-muted);margin-right:2px}
+.ax-mesh-sel .name{font-weight:500;color:var(--ax-text)}
+.ax-mesh-sel .chev{font-size:9px;opacity:0.6;margin-left:2px}
+.ax-mesh-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:240px;
+  background:var(--ax-surface);border:1px solid var(--ax-border-2);
+  border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.4);padding:4px;z-index:30;display:none}
+.ax-mesh-sel.is-open .ax-mesh-menu{display:block}
+.ax-mesh-menu a{display:block;padding:7px 10px;border-radius:4px;text-decoration:none;
+  color:var(--ax-text-2);font-size:12px}
+.ax-mesh-menu a:hover{background:var(--ax-surface-2);color:var(--ax-text)}
+.ax-mesh-menu a.is-current{background:color-mix(in oklch,var(--ax-accent) 12%,var(--ax-surface));
+  color:var(--ax-accent);border:1px solid color-mix(in oklch,var(--ax-accent) 30%,var(--ax-border-2))}
+.ax-mesh-menu a .row{display:flex;align-items:center;gap:8px}
+.ax-mesh-menu a .row .dot{width:6px;height:6px;border-radius:50%;background:var(--ax-accent)}
+.ax-mesh-menu a.is-offline .row .dot{background:var(--ax-border-2)}
+.ax-mesh-menu a .url{font-family:var(--ax-mono);font-size:10px;color:var(--ax-muted);margin-top:2px}
+
+/* Theme switcher segmented control */
+.ax-theme-switch{display:inline-flex;border:1px solid var(--ax-border-2);
+  border-radius:4px;overflow:hidden}
+.ax-theme-switch button{background:transparent;border:none;color:var(--ax-muted);
+  padding:3px 9px;font:inherit;font-size:10px;cursor:pointer;letter-spacing:0.04em;
+  text-transform:uppercase;font-family:var(--ax-mono);border-right:1px solid var(--ax-border-2)}
+.ax-theme-switch button:last-child{border-right:none}
+.ax-theme-switch button:hover{color:var(--ax-text);background:var(--ax-surface-2,var(--ax-surface))}
+.ax-theme-switch button.is-active{color:var(--ax-accent);
+  background:color-mix(in oklch,var(--ax-accent) 12%,var(--ax-surface))}
+
+/* Subheader \u2014 page-specific toolbar below the main topbar. Kanban uses it
+ * for the board picker + search + filters; others can use it for context
+ * bars if they want. */
+.ax-subheader{display:flex;align-items:center;gap:10px;padding:10px 18px;
+  background:var(--ax-bg-elev);border-bottom:1px solid var(--ax-border);
+  flex-wrap:wrap}
+.ax-subheader > * {flex-shrink:0}
+.ax-subheader .spacer{flex:1}`,k=`<script>
+(function(){
+  function wireTheme(){
+    var sw = document.querySelectorAll('[data-theme-opt]');
+    if (!sw.length) return;
+    var current = document.documentElement.getAttribute('data-theme') || 'dark';
+    sw.forEach(function(b){
+      if (b.dataset.wired) return; b.dataset.wired = '1';
+      if (b.getAttribute('data-theme-opt') === current) b.classList.add('is-active');
+      b.addEventListener('click', function(){
+        var t = b.getAttribute('data-theme-opt');
+        document.documentElement.setAttribute('data-theme', t);
+        try { localStorage.setItem('ax-theme', t); } catch (e) {}
+        sw.forEach(function(x){ x.classList.toggle('is-active', x === b); });
+      });
+    });
+  }
+  function currentPeer(){
+    try { return localStorage.getItem('ax-peer') || 'primary'; } catch { return 'primary'; }
+  }
+  function setCurrentPeer(id){
+    try {
+      if (id && id !== 'primary') localStorage.setItem('ax-peer', id);
+      else localStorage.removeItem('ax-peer');
+    } catch {}
+  }
+  function reflectPeerPill(){
+    var sel = document.querySelector('.ax-mesh-sel');
+    if (!sel) return;
+    var cur = currentPeer();
+    sel.classList.toggle('is-proxy', cur !== 'primary');
+    // If a proxy is active, update the visible pill label + highlight.
+    var picked = null;
+    sel.querySelectorAll('.ax-mesh-menu a').forEach(function(a){
+      a.classList.toggle('is-current', a.getAttribute('data-peer-id') === cur || (cur === 'primary' && a.getAttribute('data-peer-id') === 'primary'));
+      if (a.getAttribute('data-peer-id') === cur) picked = a;
+    });
+    if (picked) {
+      var name = picked.querySelector('span'); // first <span> inside .row
+      var visibleName = sel.querySelector('.name');
+      if (name && visibleName) visibleName.textContent = name.textContent.replace(/ \xB7 primary/, '');
+    }
+  }
+  function wireMesh(){
+    var sel = document.querySelector('.ax-mesh-sel');
+    if (!sel || sel.dataset.wired) return; sel.dataset.wired = '1';
+    sel.addEventListener('click', function(e){
+      var link = e.target.closest('.ax-mesh-menu a[data-peer-action="proxy"]');
+      if (link) {
+        e.preventDefault();
+        setCurrentPeer(link.getAttribute('data-peer-id'));
+        reflectPeerPill();
+        sel.classList.remove('is-open');
+        // Reload so the admin panel re-reads state from the selected peer.
+        location.reload();
+        return;
+      }
+      if (e.target.closest('.ax-mesh-menu a')) return; // plain navigate anchor
+      sel.classList.toggle('is-open');
+    });
+    document.addEventListener('click', function(e){
+      if (!sel.contains(e.target)) sel.classList.remove('is-open');
+    });
+    reflectPeerPill();
+  }
+  function wireHostRewrite(){
+    try {
+      var h = location.hostname || 'localhost';
+      document.querySelectorAll('.ax-topbar__tab[href*="__HOST__"]').forEach(function(a){
+        a.href = a.getAttribute('href').replace(/__HOST__/g, h);
+      });
+    } catch (e) {}
+  }
+  /**
+   * Make the topbar peer selector actually drive page content. When the
+   * operator picks a non-primary peer, every /api/admin/* request gets an
+   * X-Agentx-Peer header (and every EventSource on that path gets a ?peer=
+   * query, since EventSource can't set headers). The dashboard's existing
+   * proxy handler picks it up and forwards to the chosen peer.
+   *
+   * Without this hook, the activity-graph (and other admin pages) silently
+   * keep showing only the local node's data even after the operator picks
+   * a different peer in the topbar.
+   */
+  function wirePeerProxy(){
+    if (window.__axPeerWired) return; window.__axPeerWired = true;
+    // Path-prefix allowlist for the peer-proxy interceptor. Extend here
+    // when a new admin-side surface needs to follow the mesh selector.
+    // /api/workflows is the workflow dashboard's read/write API \u2014 it
+    // lives outside /api/admin for legacy reasons, but the page is part
+    // of the admin surface and should proxy when a non-primary peer is
+    // selected (otherwise the workflows page on Mac shows local-only
+    // YAMLs while the runtime lives on clawd).
+    function shouldProxy(url){
+      if (!url) return false;
+      // Admin-side surfaces that follow the mesh selector. Each entry
+      // is a path-prefix match. Extend when a new admin surface lands
+      // outside /api/admin/* but should still proxy when the operator
+      // picks a non-primary peer.
+      //   /api/admin/   \u2014 original admin surface (activity, ledger, \u2026)
+      //   /api/workflows \u2014 workflow editor + observability page
+      //   /api/agents   \u2014 agent dropdowns inside the workflow editor +
+      //                   anywhere else the page asks "which agents
+      //                   exist on the selected node?"
+      return url.indexOf('/api/admin/') >= 0
+          || url.indexOf('/api/workflows') >= 0
+          || url.indexOf('/api/agents') >= 0;
+    }
+    var origFetch = window.fetch.bind(window);
+    window.fetch = function(input, init){
+      try {
+        var peer = currentPeer();
+        if (peer && peer !== 'primary') {
+          var url = typeof input === 'string' ? input : (input && input.url) || '';
+          if (shouldProxy(url)) {
+            init = init || {};
+            init.headers = new Headers(init.headers || {});
+            init.headers.set('X-Agentx-Peer', peer);
+          }
+        }
+      } catch (e) {}
+      return origFetch(input, init);
+    };
+    var OrigES = window.EventSource;
+    if (OrigES) {
+      window.EventSource = function(url, cfg){
+        try {
+          var peer = currentPeer();
+          if (peer && peer !== 'primary' && typeof url === 'string' && shouldProxy(url)) {
+            url += (url.indexOf('?') >= 0 ? '&' : '?') + 'peer=' + encodeURIComponent(peer);
+          }
+        } catch (e) {}
+        return new OrigES(url, cfg);
+      };
+      window.EventSource.prototype = OrigES.prototype;
+      window.EventSource.CONNECTING = OrigES.CONNECTING;
+      window.EventSource.OPEN = OrigES.OPEN;
+      window.EventSource.CLOSED = OrigES.CLOSED;
+    }
+  }
+  // wirePeerProxy() is synchronous and DOM-independent \u2014 it just wraps
+  // window.fetch + window.EventSource. Fire it IMMEDIATELY (before
+  // DOMContentLoaded) so deferred page bundles that issue their first
+  // fetch on bundle-parse (e.g. the workflow editor's React useEffect)
+  // see the wrapped fetch and pick up the X-Agentx-Peer header. Without
+  // this, the workflow editor's load on Mac:4202 hit local /api/workflows
+  // (instead of proxying to the selected peer), got a 404, and silently
+  // fell back to blank-graph state \u2014 looking like a "new workflow".
+  wirePeerProxy();
+  function wire(){ wireHostRewrite(); wireTheme(); wireMesh(); /* wirePeerProxy already ran */ }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', wire);
+  } else { wire(); }
+})();
+</script>`;function _(r){let t=r.peers&&r.peers.length>0?r.peers:[{id:"local",name:"this daemon",dashboardUrl:"",primary:!0}],c=r.currentPeerId||t.find(e=>e.primary)?.id||t[0].id,p=t.find(e=>e.id===c)||t[0],x=t.map(e=>{let n=e.id===c,o=e.primary?' <span style="color:var(--ax-muted);font-size:10px">\xB7 primary</span>':"",i=!!e.tokenScope&&!e.primary,s=i?"#":e.dashboardUrl?`${e.dashboardUrl.replace(/\/+$/,"")}/admin`:"#",l=i?` data-peer-id="${a(e.id)}" data-peer-action="proxy"`:e.primary?' data-peer-id="primary" data-peer-action="proxy"':"",m=i?'<div class="url" style="color:var(--ax-accent)">manage from this dashboard \u2713</div>':e.tokenScope?`<div class="url">${a(e.tokenScope)}</div>`:e.dashboardUrl?'<div class="url" style="color:var(--ax-muted)">(open peer dashboard \u2197)</div>':"";return`<a href="${a(s)}" class="${n?"is-current":""}"${l}>
+      <div class="row"><span class="dot"></span><span>${a(e.name)}${o}</span></div>
+      ${e.dashboardUrl?`<div class="url">${a(e.dashboardUrl)}</div>`:""}
+      ${m}
+    </a>`}).join(""),h=`<div class="ax-mesh-sel" aria-haspopup="menu">
+    <span class="lbl">managing</span>
+    <span class="name">${a(p.name)}</span>
+    <span class="chev">\u25BE</span>
+    <div class="ax-mesh-menu" role="menu">${x}</div>
+  </div>`,u=[{name:"Mesh",tabs:[{id:"live",label:"Live",href:"/live"},{id:"mesh",label:"Operations",href:"/mesh"},{id:"admin",label:"Settings",href:"/admin"}]}].map(e=>{let n=e.tabs.map(o=>{let i=o.id===r.activeTab?"ax-topbar__tab is-active":"ax-topbar__tab",s=o.external?' target="_blank" rel="noopener"':"",l=o.external?' <span style="font-size:9px;opacity:0.6">\u2197</span>':"";return`<a href="${o.href}" class="${i}"${s}>${o.label}${l}</a>`}).join("");return`<div class="ax-topbar__group" title="${a(e.name)} tier"><span class="ax-topbar__group-label">${a(e.name)}</span>${n}</div>`}).join("");return`<header class="ax-topbar">
+  <div class="ax-topbar__left">
+    <div class="ax-brand">
+      <span class="ax-brand__mark">AX</span>
+      <span class="ax-brand__name">AgentX</span>
+      <span class="ax-brand__subtitle">${a(r.subtitle)}</span>
+    </div>
+    <nav class="ax-topbar__tabs">${u}</nav>
+  </div>
+  <div class="ax-topbar__right">
+    ${r.rightExtras||""}
+    ${h}
+    <div class="ax-theme-switch" role="tablist" aria-label="Theme">
+      <button data-theme-opt="dark">Dark</button>
+      <button data-theme-opt="light">Light</button>
+    </div>
+  </div>
+</header>${r.subheader?`<div class="ax-subheader">${r.subheader}</div>`:""}`}function a(r){return String(r||"").replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[t])}export{g as a,v as b,w as c,y as d,k as e,_ as f};
+//# sourceMappingURL=chunk-LDHPMJ7M.js.map

package/dist/chunk-LDHPMJ7M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/daemon/topbar.ts"],"sourcesContent":["// --- Shared top-chrome for every dashboard surface ---\n//\n// Four pages render in different files (live + kanban + glossary in\n// board-dashboard.ts, settings in admin-panel.ts) but must share: design\n// tokens, fonts, theme switcher, brand, primary tab nav, and a mesh-node\n// selector. This module exports the CSS + HTML snippets so each page\n// composes exactly the same chrome and we never drift them again.\n//\n// Nothing here is page-specific — callers pass in { activeTab, subtitle,\n// subheader? } and compose their own <main> below.\n\nexport type TopbarTab = \"live\" | \"mesh\" | \"boards\" | \"admin\" | \"graph\" | \"glossary\" | \"workflows\" | \"health\" | \"cost\" | \"wiki\" | \"procedures\" | \"inbox\" | \"projects\"\n\nexport interface TopbarPeer {\n  /** Stable id: primary node id, or URL for configured daemons */\n  id: string\n  name: string\n  /** Absolute URL of the peer's dashboard (http://host:port) — selector\n   *  navigates to <url>/admin when switched. */\n  dashboardUrl: string\n  /** True for the node hosting this dashboard (locks the default). */\n  primary?: boolean\n  /** Optional; shown in the dropdown as \"managing via token\" hint. */\n  tokenScope?: string\n}\n\nexport interface TopbarFeatures {\n  /** Show the Team/Business Settings sub-tabs — config.business.enabled. */\n  business?: boolean\n}\n\n// Set once at server start (board-dashboard + daemon both call it).\n//\n// This used to carry `boards` and `workflows` flags that gated top-level\n// tabs. The nav is now fixed (Live, Operations, Settings), so those flags had\n// nothing left to gate and were removed rather than left describing chrome\n// that no longer exists.\nlet topbarFeatures: TopbarFeatures = {}\n\nexport function setTopbarFeatures(features: TopbarFeatures): void {\n  topbarFeatures = features\n}\n\nexport function getTopbarFeatures(): TopbarFeatures {\n  return topbarFeatures\n}\n\nexport interface TopbarOpts {\n  activeTab: TopbarTab\n  /** Text after the brand, e.g. \"Live\" / \"Settings\" / \"Boards\". */\n  subtitle: string\n  /** Optional HTML inserted as a second row under the topbar. */\n  subheader?: string\n  /** Peers to list in the mesh selector. */\n  peers?: TopbarPeer[]\n  /** id of the peer currently being managed — defaults to the primary. */\n  currentPeerId?: string\n  /** Optional right-side HTML added before the theme switcher (clocks,\n   *  connection dots, etc.). */\n  rightExtras?: string\n}\n\n/**\n * Font link tags + tiny inline bootstrap script. Callers drop this in <head>.\n */\n// Fonts degrade to the system stack when the box is offline or air-gapped —\n// the tokens list real fallbacks, so a failed font fetch costs typography,\n// never layout.\n//\n// The theme bootstrap runs before first paint to avoid a flash. A stored\n// \"crt\" from before that theme was removed falls back to dark rather than\n// leaving data-theme set to a value no stylesheet defines.\nexport const TOPBAR_HEAD = `<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<script>(function(){try{var t=localStorage.getItem('ax-theme');if(t!=='light'&&t!=='dark'){t='dark';localStorage.setItem('ax-theme',t)}document.documentElement.setAttribute('data-theme',t)}catch(e){document.documentElement.setAttribute('data-theme','dark')}})();</script>`\n\n/**\n * CSS for topbar + subheader + theme switch + mesh selector. No token\n * definitions — those are per-page because each page's CSS block owns its\n * own :root overrides.\n */\nexport const TOPBAR_CSS = `\n.ax-topbar{display:flex;align-items:center;justify-content:space-between;\n  padding:8px 18px;border-bottom:1px solid var(--ax-border);\n  background:var(--ax-bg-elev);position:sticky;top:0;z-index:20;gap:10px;flex-wrap:nowrap}\n.ax-topbar__left{display:flex;align-items:center;gap:18px;min-width:0}\n.ax-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.01em;flex-shrink:0}\n.ax-brand__mark{font-family:var(--ax-mono);font-size:12px;padding:2px 8px;\n  border:1px solid var(--ax-border-2);color:var(--ax-accent);border-radius:4px}\n.ax-brand__name{font-size:14px}\n.ax-brand__subtitle{font-size:11px;color:var(--ax-muted);\n  border-left:1px solid var(--ax-border);padding-left:12px;margin-left:4px}\n.ax-topbar__tabs{display:flex;gap:14px;min-width:0;overflow-x:auto;align-items:center}\n/* Tier groups (System / Processes / Procedures) — visual separators\n * mirror the docs/architecture/three-tier.md hierarchy. */\n.ax-topbar__group{display:flex;align-items:center;gap:0;padding:0 4px;\n  border-left:1px solid var(--ax-border);position:relative}\n.ax-topbar__group:first-child{border-left:none;padding-left:0}\n.ax-topbar__group-label{font:inherit;font-family:var(--ax-mono);font-size:9px;\n  letter-spacing:0.08em;text-transform:uppercase;color:var(--ax-muted);\n  padding:0 8px;white-space:nowrap;opacity:0.7}\n.ax-topbar__tab{background:transparent;border:none;color:var(--ax-text-2);\n  padding:8px 12px;font:inherit;cursor:pointer;font-size:12px;text-decoration:none;\n  border-bottom:2px solid transparent;letter-spacing:-0.005em;white-space:nowrap}\n.ax-topbar__tab:hover{color:var(--ax-text)}\n.ax-topbar__tab.is-active{color:var(--ax-text);border-bottom-color:var(--ax-accent)}\n.ax-topbar__right{display:flex;align-items:center;gap:10px;font-size:11px;\n  color:var(--ax-muted);flex-shrink:0}\n.ax-topbar__right .ax-mono{color:var(--ax-text-2)}\n\n/* Mesh selector */\n.ax-mesh-sel{position:relative;display:inline-flex;align-items:center;gap:6px;\n  padding:4px 10px;border:1px solid var(--ax-border-2);border-radius:4px;\n  background:var(--ax-surface);cursor:pointer;font:inherit;font-size:11px;\n  color:var(--ax-text-2);white-space:nowrap}\n.ax-mesh-sel:hover{border-color:var(--ax-accent);color:var(--ax-text)}\n.ax-mesh-sel.is-proxy{background:color-mix(in oklch,var(--ax-accent) 14%,var(--ax-surface));\n  border-color:color-mix(in oklch,var(--ax-accent) 45%,var(--ax-border-2));color:var(--ax-accent)}\n.ax-mesh-sel .lbl{font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ax-muted);margin-right:2px}\n.ax-mesh-sel .name{font-weight:500;color:var(--ax-text)}\n.ax-mesh-sel .chev{font-size:9px;opacity:0.6;margin-left:2px}\n.ax-mesh-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:240px;\n  background:var(--ax-surface);border:1px solid var(--ax-border-2);\n  border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,0.4);padding:4px;z-index:30;display:none}\n.ax-mesh-sel.is-open .ax-mesh-menu{display:block}\n.ax-mesh-menu a{display:block;padding:7px 10px;border-radius:4px;text-decoration:none;\n  color:var(--ax-text-2);font-size:12px}\n.ax-mesh-menu a:hover{background:var(--ax-surface-2);color:var(--ax-text)}\n.ax-mesh-menu a.is-current{background:color-mix(in oklch,var(--ax-accent) 12%,var(--ax-surface));\n  color:var(--ax-accent);border:1px solid color-mix(in oklch,var(--ax-accent) 30%,var(--ax-border-2))}\n.ax-mesh-menu a .row{display:flex;align-items:center;gap:8px}\n.ax-mesh-menu a .row .dot{width:6px;height:6px;border-radius:50%;background:var(--ax-accent)}\n.ax-mesh-menu a.is-offline .row .dot{background:var(--ax-border-2)}\n.ax-mesh-menu a .url{font-family:var(--ax-mono);font-size:10px;color:var(--ax-muted);margin-top:2px}\n\n/* Theme switcher segmented control */\n.ax-theme-switch{display:inline-flex;border:1px solid var(--ax-border-2);\n  border-radius:4px;overflow:hidden}\n.ax-theme-switch button{background:transparent;border:none;color:var(--ax-muted);\n  padding:3px 9px;font:inherit;font-size:10px;cursor:pointer;letter-spacing:0.04em;\n  text-transform:uppercase;font-family:var(--ax-mono);border-right:1px solid var(--ax-border-2)}\n.ax-theme-switch button:last-child{border-right:none}\n.ax-theme-switch button:hover{color:var(--ax-text);background:var(--ax-surface-2,var(--ax-surface))}\n.ax-theme-switch button.is-active{color:var(--ax-accent);\n  background:color-mix(in oklch,var(--ax-accent) 12%,var(--ax-surface))}\n\n/* Subheader — page-specific toolbar below the main topbar. Kanban uses it\n * for the board picker + search + filters; others can use it for context\n * bars if they want. */\n.ax-subheader{display:flex;align-items:center;gap:10px;padding:10px 18px;\n  background:var(--ax-bg-elev);border-bottom:1px solid var(--ax-border);\n  flex-wrap:wrap}\n.ax-subheader > * {flex-shrink:0}\n.ax-subheader .spacer{flex:1}`\n\n/**\n * Shared click wiring for the theme switcher + mesh selector. Safe to call\n * multiple times — only binds once per element.\n */\nexport const TOPBAR_SCRIPT = `<script>\n(function(){\n  function wireTheme(){\n    var sw = document.querySelectorAll('[data-theme-opt]');\n    if (!sw.length) return;\n    var current = document.documentElement.getAttribute('data-theme') || 'dark';\n    sw.forEach(function(b){\n      if (b.dataset.wired) return; b.dataset.wired = '1';\n      if (b.getAttribute('data-theme-opt') === current) b.classList.add('is-active');\n      b.addEventListener('click', function(){\n        var t = b.getAttribute('data-theme-opt');\n        document.documentElement.setAttribute('data-theme', t);\n        try { localStorage.setItem('ax-theme', t); } catch (e) {}\n        sw.forEach(function(x){ x.classList.toggle('is-active', x === b); });\n      });\n    });\n  }\n  function currentPeer(){\n    try { return localStorage.getItem('ax-peer') || 'primary'; } catch { return 'primary'; }\n  }\n  function setCurrentPeer(id){\n    try {\n      if (id && id !== 'primary') localStorage.setItem('ax-peer', id);\n      else localStorage.removeItem('ax-peer');\n    } catch {}\n  }\n  function reflectPeerPill(){\n    var sel = document.querySelector('.ax-mesh-sel');\n    if (!sel) return;\n    var cur = currentPeer();\n    sel.classList.toggle('is-proxy', cur !== 'primary');\n    // If a proxy is active, update the visible pill label + highlight.\n    var picked = null;\n    sel.querySelectorAll('.ax-mesh-menu a').forEach(function(a){\n      a.classList.toggle('is-current', a.getAttribute('data-peer-id') === cur || (cur === 'primary' && a.getAttribute('data-peer-id') === 'primary'));\n      if (a.getAttribute('data-peer-id') === cur) picked = a;\n    });\n    if (picked) {\n      var name = picked.querySelector('span'); // first <span> inside .row\n      var visibleName = sel.querySelector('.name');\n      if (name && visibleName) visibleName.textContent = name.textContent.replace(/ · primary/, '');\n    }\n  }\n  function wireMesh(){\n    var sel = document.querySelector('.ax-mesh-sel');\n    if (!sel || sel.dataset.wired) return; sel.dataset.wired = '1';\n    sel.addEventListener('click', function(e){\n      var link = e.target.closest('.ax-mesh-menu a[data-peer-action=\"proxy\"]');\n      if (link) {\n        e.preventDefault();\n        setCurrentPeer(link.getAttribute('data-peer-id'));\n        reflectPeerPill();\n        sel.classList.remove('is-open');\n        // Reload so the admin panel re-reads state from the selected peer.\n        location.reload();\n        return;\n      }\n      if (e.target.closest('.ax-mesh-menu a')) return; // plain navigate anchor\n      sel.classList.toggle('is-open');\n    });\n    document.addEventListener('click', function(e){\n      if (!sel.contains(e.target)) sel.classList.remove('is-open');\n    });\n    reflectPeerPill();\n  }\n  function wireHostRewrite(){\n    try {\n      var h = location.hostname || 'localhost';\n      document.querySelectorAll('.ax-topbar__tab[href*=\"__HOST__\"]').forEach(function(a){\n        a.href = a.getAttribute('href').replace(/__HOST__/g, h);\n      });\n    } catch (e) {}\n  }\n  /**\n   * Make the topbar peer selector actually drive page content. When the\n   * operator picks a non-primary peer, every /api/admin/* request gets an\n   * X-Agentx-Peer header (and every EventSource on that path gets a ?peer=\n   * query, since EventSource can't set headers). The dashboard's existing\n   * proxy handler picks it up and forwards to the chosen peer.\n   *\n   * Without this hook, the activity-graph (and other admin pages) silently\n   * keep showing only the local node's data even after the operator picks\n   * a different peer in the topbar.\n   */\n  function wirePeerProxy(){\n    if (window.__axPeerWired) return; window.__axPeerWired = true;\n    // Path-prefix allowlist for the peer-proxy interceptor. Extend here\n    // when a new admin-side surface needs to follow the mesh selector.\n    // /api/workflows is the workflow dashboard's read/write API — it\n    // lives outside /api/admin for legacy reasons, but the page is part\n    // of the admin surface and should proxy when a non-primary peer is\n    // selected (otherwise the workflows page on Mac shows local-only\n    // YAMLs while the runtime lives on clawd).\n    function shouldProxy(url){\n      if (!url) return false;\n      // Admin-side surfaces that follow the mesh selector. Each entry\n      // is a path-prefix match. Extend when a new admin surface lands\n      // outside /api/admin/* but should still proxy when the operator\n      // picks a non-primary peer.\n      //   /api/admin/   — original admin surface (activity, ledger, …)\n      //   /api/workflows — workflow editor + observability page\n      //   /api/agents   — agent dropdowns inside the workflow editor +\n      //                   anywhere else the page asks \"which agents\n      //                   exist on the selected node?\"\n      return url.indexOf('/api/admin/') >= 0\n          || url.indexOf('/api/workflows') >= 0\n          || url.indexOf('/api/agents') >= 0;\n    }\n    var origFetch = window.fetch.bind(window);\n    window.fetch = function(input, init){\n      try {\n        var peer = currentPeer();\n        if (peer && peer !== 'primary') {\n          var url = typeof input === 'string' ? input : (input && input.url) || '';\n          if (shouldProxy(url)) {\n            init = init || {};\n            init.headers = new Headers(init.headers || {});\n            init.headers.set('X-Agentx-Peer', peer);\n          }\n        }\n      } catch (e) {}\n      return origFetch(input, init);\n    };\n    var OrigES = window.EventSource;\n    if (OrigES) {\n      window.EventSource = function(url, cfg){\n        try {\n          var peer = currentPeer();\n          if (peer && peer !== 'primary' && typeof url === 'string' && shouldProxy(url)) {\n            url += (url.indexOf('?') >= 0 ? '&' : '?') + 'peer=' + encodeURIComponent(peer);\n          }\n        } catch (e) {}\n        return new OrigES(url, cfg);\n      };\n      window.EventSource.prototype = OrigES.prototype;\n      window.EventSource.CONNECTING = OrigES.CONNECTING;\n      window.EventSource.OPEN = OrigES.OPEN;\n      window.EventSource.CLOSED = OrigES.CLOSED;\n    }\n  }\n  // wirePeerProxy() is synchronous and DOM-independent — it just wraps\n  // window.fetch + window.EventSource. Fire it IMMEDIATELY (before\n  // DOMContentLoaded) so deferred page bundles that issue their first\n  // fetch on bundle-parse (e.g. the workflow editor's React useEffect)\n  // see the wrapped fetch and pick up the X-Agentx-Peer header. Without\n  // this, the workflow editor's load on Mac:4202 hit local /api/workflows\n  // (instead of proxying to the selected peer), got a 404, and silently\n  // fell back to blank-graph state — looking like a \"new workflow\".\n  wirePeerProxy();\n  function wire(){ wireHostRewrite(); wireTheme(); wireMesh(); /* wirePeerProxy already ran */ }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', wire);\n  } else { wire(); }\n})();\n</script>`\n\n/**\n * Render the topbar element. Caller places this at the start of <body>.\n * Emits a matching .ax-subheader row only when `subheader` HTML is provided.\n */\nexport function renderTopbar(opts: TopbarOpts): string {\n  const peers = opts.peers && opts.peers.length > 0 ? opts.peers : [{ id: \"local\", name: \"this daemon\", dashboardUrl: \"\", primary: true }]\n  const currentId = opts.currentPeerId || peers.find((p) => p.primary)?.id || peers[0].id\n  const current = peers.find((p) => p.id === currentId) || peers[0]\n\n  const meshMenu = peers.map((p) => {\n    const isCurrent = p.id === currentId\n    const primaryMark = p.primary ? ' <span style=\"color:var(--ax-muted);font-size:10px\">· primary</span>' : \"\"\n    const proxyable = !!p.tokenScope && !p.primary\n    // Proxyable peers: use data-peer-id so the click handler switches locally\n    // via localStorage + reload. Un-proxyable (no token): legacy navigate.\n    const href = proxyable\n      ? \"#\"\n      : p.dashboardUrl\n        ? `${p.dashboardUrl.replace(/\\/+$/, \"\")}/admin`\n        : \"#\"\n    const dataAttr = proxyable ? ` data-peer-id=\"${esc(p.id)}\" data-peer-action=\"proxy\"` : p.primary ? ` data-peer-id=\"primary\" data-peer-action=\"proxy\"` : \"\"\n    const hint = proxyable\n      ? '<div class=\"url\" style=\"color:var(--ax-accent)\">manage from this dashboard ✓</div>'\n      : p.tokenScope\n        ? `<div class=\"url\">${esc(p.tokenScope)}</div>`\n        : p.dashboardUrl\n          ? '<div class=\"url\" style=\"color:var(--ax-muted)\">(open peer dashboard ↗)</div>'\n          : \"\"\n    return `<a href=\"${esc(href)}\" class=\"${isCurrent ? \"is-current\" : \"\"}\"${dataAttr}>\n      <div class=\"row\"><span class=\"dot\"></span><span>${esc(p.name)}${primaryMark}</span></div>\n      ${p.dashboardUrl ? `<div class=\"url\">${esc(p.dashboardUrl)}</div>` : \"\"}\n      ${hint}\n    </a>`\n  }).join(\"\")\n\n  const meshSelector = `<div class=\"ax-mesh-sel\" aria-haspopup=\"menu\">\n    <span class=\"lbl\">managing</span>\n    <span class=\"name\">${esc(current.name)}</span>\n    <span class=\"chev\">▾</span>\n    <div class=\"ax-mesh-menu\" role=\"menu\">${meshMenu}</div>\n  </div>`\n\n  // Minimal, mesh-first nav. The primary group answers the four ops\n  // questions in order: who's alive and what are they doing (Live),\n  // what happened (Ledger), what did it cost (Cost), how is it wired\n  // (Settings). A second \"Work\" group appears only when the operator\n  // actually configured that surface (boards / workflows) — flags are\n  // set once per process via setTopbarFeatures().\n  //\n  // Deliberately NOT in the nav (all still routable by URL):\n  //   /admin/ledger  /admin/cost         what happened, what it cost\n  //   /workflows  /inbox              BPM surfaces\n  //   /  (boards)                       Kanban\n  //   /admin/health  /admin/activity-graph  /admin/graph  /admin/projects\n  //   /procedures  /admin/wiki  /glossary  /processes\n  //\n  // Three tabs are the whole nav. Every page above is one link away from Live\n  // or Settings, and none of them is where an operator starts their day —\n  // \"who is alive and what are they doing\" (Live) and \"how is this wired\"\n  // (Settings) are. A tab bar that lists every surface an app HAS is a site\n  // map, not navigation; it makes the two answers people actually want\n  // harder to find, which is the opposite of what chrome is for.\n  //\n  // Removing a tab does not remove the page. If view counts later show a\n  // surface earning its place, adding a tab back is one line.\n  type Tab = { id: TopbarTab; label: string; href: string; external?: boolean }\n  const groups: Array<{ name: string; tabs: Tab[] }> = [\n    {\n      name: \"Mesh\",\n      tabs: [\n        { id: \"live\", label: \"Live\", href: \"/live\" },\n        { id: \"mesh\", label: \"Operations\", href: \"/mesh\" },\n        { id: \"admin\", label: \"Settings\", href: \"/admin\" },\n      ],\n    },\n  ]\n\n  const tabs = groups.map((g) => {\n    const inner = g.tabs.map((t) => {\n      const cls = t.id === opts.activeTab ? \"ax-topbar__tab is-active\" : \"ax-topbar__tab\"\n      const extAttrs = t.external ? ` target=\"_blank\" rel=\"noopener\"` : \"\"\n      const extGlyph = t.external ? ' <span style=\"font-size:9px;opacity:0.6\">↗</span>' : \"\"\n      return `<a href=\"${t.href}\" class=\"${cls}\"${extAttrs}>${t.label}${extGlyph}</a>`\n    }).join(\"\")\n    return `<div class=\"ax-topbar__group\" title=\"${esc(g.name)} tier\"><span class=\"ax-topbar__group-label\">${esc(g.name)}</span>${inner}</div>`\n  }).join(\"\")\n\n  const header = `<header class=\"ax-topbar\">\n  <div class=\"ax-topbar__left\">\n    <div class=\"ax-brand\">\n      <span class=\"ax-brand__mark\">AX</span>\n      <span class=\"ax-brand__name\">AgentX</span>\n      <span class=\"ax-brand__subtitle\">${esc(opts.subtitle)}</span>\n    </div>\n    <nav class=\"ax-topbar__tabs\">${tabs}</nav>\n  </div>\n  <div class=\"ax-topbar__right\">\n    ${opts.rightExtras || \"\"}\n    ${meshSelector}\n    <div class=\"ax-theme-switch\" role=\"tablist\" aria-label=\"Theme\">\n      <button data-theme-opt=\"dark\">Dark</button>\n      <button data-theme-opt=\"light\">Light</button>\n    </div>\n  </div>\n</header>${opts.subheader ? `<div class=\"ax-subheader\">${opts.subheader}</div>` : \"\"}`\n  return header\n}\n\nfunction esc(s: string): string {\n  return String(s || \"\").replace(/[&<>\"']/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&#39;\" }[c] as string))\n}\n"],"mappings":"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","names":["topbarFeatures","setTopbarFeatures","features","getTopbarFeatures","TOPBAR_HEAD","TOPBAR_CSS","TOPBAR_SCRIPT","renderTopbar","opts","peers","currentId","p","current","meshMenu","isCurrent","primaryMark","proxyable","href","dataAttr","esc","hint","meshSelector","tabs","g","inner","t","cls","extAttrs","extGlyph","s","c"]}