monomind 2.1.3 → 2.1.5

package/packages/@monomind/cli/dist/src/ui/dashboard.html

@@ -440,6 +440,11 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.v2-bubble-inner.v2-bubble-question {
+  background: oklch(28% 0.04 75 / 0.95);
+  border-color: oklch(78% 0.16 75 / 0.7);
+  color: oklch(92% 0.03 75);
+}
 .org-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 2px; }
 .ocl-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-lo); }
 
@@ -1426,67 +1431,6 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
 @keyframes pb-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
 
-/* ── systems grid ──────────────────────────────────────────── */
-#wf-systems-grid { display: block; }
-/* ── monoagent connections tile grid ─────────────────────────── */
-.ma-cat-hdr { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
-.ma-cat-label { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--text-lo); text-transform:uppercase; letter-spacing:2px; white-space:nowrap; }
-.ma-cat-line { flex:1; height:1px; background:var(--border); }
-.ma-cat-count { font-family:var(--mono); font-size:9.5px; color:var(--text-xs); }
-.ma-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-bottom:24px; }
-.ma-tile { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 8px 12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:border-color 0.15s,box-shadow 0.15s; user-select:none; }
-.ma-tile:hover { border-color:var(--border-hi); }
-.ma-tile.connected { border-color:oklch(65% 0.15 150 / 0.5); box-shadow:0 0 10px oklch(65% 0.15 150 / 0.12); }
-.ma-tile-icon { font-size:22px; line-height:1; }
-.ma-tile-name { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--text-mid); text-align:center; line-height:1.3; }
-.ma-tile-dot { width:6px; height:6px; border-radius:50%; background:var(--border); }
-.ma-tile.connected .ma-tile-dot { background:var(--green); box-shadow:0 0 5px oklch(65% 0.15 150 / 0.7); }
-.ma-tile.expired .ma-tile-dot { background:#fbbf24; box-shadow:0 0 5px rgba(251,191,36,0.5); }
-.ma-tile-acct { font-family:var(--mono); font-size:9px; color:var(--text-xs); max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-/* modal */
-.ma-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1200; display:flex; align-items:center; justify-content:center; padding:24px; }
-.ma-modal { width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border-hi); border-radius:14px; box-shadow:0 8px 40px rgba(0,0,0,0.5); overflow:hidden; }
-.ma-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; border-bottom:1px solid var(--border); }
-.ma-modal-hdr-left { display:flex; align-items:center; gap:10px; }
-.ma-modal-title { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text-hi); }
-.ma-modal-status { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; }
-.ma-modal-body { padding:16px 20px 20px; display:flex; flex-direction:column; gap:14px; }
-.ma-modal-info { background:var(--surface-hi); border:1px solid var(--border); border-radius:8px; padding:10px 14px; display:flex; flex-direction:column; gap:8px; }
-.ma-modal-row { display:flex; justify-content:space-between; align-items:center; }
-.ma-modal-lbl { font-family:var(--mono); font-size:9.5px; color:var(--text-xs); text-transform:uppercase; letter-spacing:1px; }
-.ma-modal-val { font-family:var(--mono); font-size:11px; color:var(--text-mid); }
-.ma-modal-val.ok { color:var(--green); }
-.ma-modal-val.warn { color:#fbbf24; }
-.ma-field-label { font-family:var(--mono); font-size:9.5px; color:var(--text-xs); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; }
-.ma-field-input { width:100%; padding:7px 10px; border:1px solid var(--border-hi); border-radius:6px; background:var(--surface-hi); color:var(--text-hi); font-family:var(--mono); font-size:11px; box-sizing:border-box; outline:none; }
-.ma-field-input:focus { border-color:var(--accent); }
-.ma-steps { background:var(--surface-hi); border:1px solid var(--border); border-radius:8px; padding:8px 10px; max-height:130px; overflow-y:auto; display:flex; flex-direction:column; gap:5px; }
-.ma-step { display:flex; align-items:center; gap:8px; }
-.ma-step-dot { width:5px; height:5px; border-radius:50%; background:var(--text-xs); flex-shrink:0; }
-.ma-step-dot.ok { background:var(--green); }
-.ma-step-dot.err { background:oklch(60% 0.18 25); }
-.ma-step-txt { font-family:var(--mono); font-size:10px; color:var(--text-lo); }
-.ma-step-txt.ok { color:var(--green); }
-.ma-step-txt.err { color:oklch(60% 0.18 25); }
-.ma-btns { display:flex; gap:8px; flex-wrap:wrap; }
-.ma-btn { padding:6px 14px; border-radius:6px; border:none; font-family:var(--mono); font-size:11px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:5px; transition:opacity 0.15s; }
-.ma-btn:disabled { opacity:0.45; cursor:default; }
-.ma-btn-primary { background:var(--accent); color:#fff; }
-.ma-btn-primary:hover:not(:disabled) { opacity:0.85; }
-.ma-btn-secondary { background:var(--surface-hi); color:var(--text-mid); border:1px solid var(--border-hi); }
-.ma-btn-secondary:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
-.ma-btn-danger { background:oklch(17% 0.015 25); color:oklch(60% 0.18 25); border:1px solid oklch(60% 0.18 25 / 0.3); }
-.ma-btn-danger:hover:not(:disabled) { opacity:0.85; }
-.ma-btn-ghost { background:none; color:var(--text-lo); border:1px solid var(--border); }
-.ma-btn-ghost:hover:not(:disabled) { color:var(--text-mid); }
-.ma-msg { font-family:var(--mono); font-size:11px; padding:7px 12px; border-radius:6px; }
-.ma-msg.ok { background:oklch(65% 0.15 150 / 0.08); border:1px solid oklch(65% 0.15 150 / 0.25); color:var(--green); }
-.ma-msg.err { background:oklch(60% 0.18 25 / 0.08); border:1px solid oklch(60% 0.18 25 / 0.25); color:oklch(60% 0.18 25); }
-.ma-method-tabs { display:flex; gap:6px; flex-wrap:wrap; }
-.ma-method-tab { font-family:var(--mono); font-size:10px; padding:3px 10px; border-radius:4px; background:var(--surface-hi); border:1px solid var(--border); color:var(--text-lo); cursor:pointer; }
-.ma-method-tab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
-.ma-browser-hint { font-size:11px; color:var(--text-lo); line-height:1.5; }
-
 /* ── playbook runs view ────────────────────────────────────── */
 .wf-run-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
 .wf-run-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
@@ -1590,10 +1534,6 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
     </div>
     <div class="nav-no-proj" id="nav-no-proj-hint">Select a project above</div>
     <div class="nav-sect" style="margin-top:auto;padding-top:8px;">
-      <div class="nav-item" data-view="monoagent">
-        <span class="ico">🤖</span><span class="lbl">MonoAgent</span>
-        <span class="bdg" id="bdg-monoagent">—</span>
-      </div>
       <div class="nav-item" data-view="global">
         <span class="ico">⊕</span><span class="lbl">Global Feed</span>
       </div>
@@ -1607,6 +1547,10 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
       <div class="nav-item" data-view="chat" title="All agent sessions across projects">
         <span class="ico">⌘</span><span class="lbl">Global Agent Chat</span>
       </div>
+      <div class="nav-item" data-view="humaninput" title="Pending questions from agents across all orgs">
+        <span class="ico">❓</span><span class="lbl">Human Input</span>
+        <span class="bdg" id="bdg-humaninput">—</span>
+      </div>
     </div>
   </div>
   <div id="sb-footer">
@@ -2262,30 +2206,6 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
       </div>
     </div>
 
-    <!-- MONOAGENT -->
-    <div class="view" id="view-monoagent">
-      <div class="vscroll">
-        <div class="pg-title">MonoAgent</div>
-        <div class="pg-sub">Social media automation workflows &amp; run history</div>
-        <div class="mg-tab-bar" style="margin-top:14px">
-          <button class="odt-btn active" data-matab="workflows" onclick="maSwitchTab('workflows')">Workflows</button>
-          <button class="odt-btn" data-matab="history" onclick="maSwitchTab('history')">Action History</button>
-        </div>
-        <div class="wf-pane active" id="ma-tab-workflows">
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;margin-top:4px">
-            <button class="btn" onclick="loadMonoagentData()">↺ Refresh</button>
-          </div>
-          <div id="ma-workflows-list"><div class="loading-txt">Loading…</div></div>
-        </div>
-        <div class="wf-pane" id="ma-tab-history">
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;margin-top:4px">
-            <button class="btn" onclick="loadMonoagentData()">↺ Refresh</button>
-          </div>
-          <div id="ma-history-list"><div class="loading-txt">Loading…</div></div>
-        </div>
-      </div>
-    </div>
-
     <!-- GLOBAL FEED -->
     <div class="view" id="view-global">
       <div class="vscroll">
@@ -2339,6 +2259,17 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
       </div>
     </div>
 
+    <!-- HUMAN INPUT (global, cross-org) -->
+    <div class="view" id="view-humaninput">
+      <div class="vscroll">
+        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+          <div class="pg-title" style="margin-bottom:0">Human Input</div>
+          <span class="pg-sub" id="hi-sub" style="margin-bottom:0">Pending questions across all projects</span>
+        </div>
+        <div id="hi-content" style="margin-top:16px"><div class="loading-txt">Loading…</div></div>
+      </div>
+    </div>
+
   </div><!-- /view-wrap -->
 </div><!-- /main -->
 <div id="app-ambient-hint">Press A to exit ambient mode</div>
@@ -2439,6 +2370,27 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
 </div>
 
 <script>
+// ── auth: attach this session's dashboard credential to every non-GET fetch ──
+// server.mjs requires an x-monomind-token header on all non-GET routes and
+// injects the current value via a <meta name="mm-token"> tag on page load.
+// Wrapping fetch() once here (rather than editing every individual POST/
+// DELETE call site across this file) means every existing and future write
+// action is covered automatically.
+(function () {
+  const _mmAuthTag = document.querySelector('meta[name="mm-token"]');
+  const _mmAuthValue = _mmAuthTag ? _mmAuthTag.content : '';
+  const _origFetch = window.fetch.bind(window);
+  window.fetch = function (input, init) {
+    const method = (init && init.method ? init.method : 'GET').toUpperCase();
+    if (_mmAuthValue && method !== 'GET' && method !== 'HEAD') {
+      init = init ? { ...init } : {};
+      init.headers = new Headers(init.headers || {});
+      if (!init.headers.has('x-monomind-token')) init.headers.set('x-monomind-token', _mmAuthValue);
+    }
+    return _origFetch(input, init);
+  };
+})();
+
 // ── state ──────────────────────────────────────────────────
 let DIR = '';
 let ORIGINAL_DIR = '';
@@ -2477,10 +2429,10 @@ function switchView(v, { updateHash = true } = {}) {
     el.classList.toggle('active', el.dataset.view === v));
   document.querySelectorAll('.view').forEach(el =>
     el.classList.toggle('active', el.id === 'view-' + v));
-  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', loops:'Loops', tokens:'Tokens', memory:'Memory', orgs:'Orgs', monograph:'Monograph', monoagent:'MonoAgent', global:'Global Feed', 'global-loops':'Global Loops', 'global-tokens':'Global Tokens', chat:'Global Agent Chat' };
+  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', loops:'Loops', tokens:'Tokens', memory:'Memory', orgs:'Orgs', monograph:'Monograph', global:'Global Feed', 'global-loops':'Global Loops', 'global-tokens':'Global Tokens', chat:'Global Agent Chat', humaninput:'Human Input' };
   document.getElementById('view-title').textContent = titles[v] || v;
   const PROJECT = DIR ? shortPath(DIR) : 'monomind';
-  const VIEW_LABELS = { now: 'Now', sessions: 'Sessions', projects: 'Projects', loops: 'Loops', tokens: 'Tokens', memory: 'Memory', orgs: 'Orgs', monograph: 'Monograph', monoagent: 'MonoAgent', global: 'Global Feed', 'global-loops': 'Global Loops', 'global-tokens': 'Global Tokens', chat: 'Global Agent Chat' };
+  const VIEW_LABELS = { now: 'Now', sessions: 'Sessions', projects: 'Projects', loops: 'Loops', tokens: 'Tokens', memory: 'Memory', orgs: 'Orgs', monograph: 'Monograph', global: 'Global Feed', 'global-loops': 'Global Loops', 'global-tokens': 'Global Tokens', chat: 'Global Agent Chat', humaninput: 'Human Input' };
   document.title = `monomind · ${PROJECT} · ${VIEW_LABELS[v] || v}`;
   if (updateHash) _pushHash();
   // Projects always re-fetches so onclick paths in cards stay current
@@ -2540,10 +2492,10 @@ function renderView(v) {
   if (v === 'memory') renderMemory();
   if (v === 'orgs') renderOrgs();
   if (v === 'monograph') loadMonograph();
-  if (v === 'monoagent') { loadMonoagentData(); }
   if (v === 'global') renderGlobalFeed();
   if (v === 'global-loops') renderGlobalLoops();
   if (v === 'global-tokens') renderGlobalTokens();
+  if (v === 'humaninput') renderHumanInputView();
 }
 
 function refreshCurrent() {
@@ -3670,7 +3622,7 @@ function renderProjectGrid(projects, query) {
     const isCurrent = p.path === DIR;
     const score = computeHealthScore(p);
     const hCls = healthClass(score);
-    return `<div class="proj-card${isCurrent ? ' current' : ''}" onclick="switchProject('${esc(p.path || '')}')">
+    return `<div class="proj-card${isCurrent ? ' current' : ''}" onclick="switchProject('${esc(String(p.path || '').replace(/['\\]/g,'\\$&'))}')">
       ${isCurrent ? '<div class="proj-card-badge">active</div>' : ''}
       <div class="proj-health ${hCls}" title="Health score: ${score}">${score}</div>
       <div class="proj-card-name">${esc(p.name || p.slug)}</div>
@@ -3747,7 +3699,7 @@ async function renderSessions() {
       let anomBadge = '';
       if (medianCost > 0.05 && sCost > medianCost * 3 && sCost > 0.5) {
         // f60: anomaly badge is clickable for explainer
-        anomBadge = `<span class="sess-anomaly anom-cost clickable" style="cursor:pointer" onclick="showCostExplainer('${esc(s.id)}',event)" title="Cost ${((sCost/medianCost).toFixed(1))}× above median — click for details">! costly</span>`;
+        anomBadge = `<span class="sess-anomaly anom-cost clickable" style="cursor:pointer" onclick="showCostExplainer('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}',event)" title="Cost ${((sCost/medianCost).toFixed(1))}× above median — click for details">! costly</span>`;
       } else if (s.toolCalls > 0 && (s.errorCount || 0) / s.toolCalls > 0.3) {
         anomBadge = `<span class="sess-anomaly anom-err" title="${s.errorCount} tool errors">! errors</span>`;
       }
@@ -3775,7 +3727,7 @@ async function renderSessions() {
       </div>` : '';
       // f51: error badge — clickable if errors exist
       const errBadge = (s.errorCount > 0 && s.toolCalls > 0 && (s.errorCount / s.toolCalls) > 0.3)
-        ? `<span class="sess-anomaly anom-err clickable" onclick="toggleErrDrawer('${esc(s.id)}',event)" title="Click to see ${s.errorCount} tool errors">${s.errorCount} err</span>`
+        ? `<span class="sess-anomaly anom-err clickable" onclick="toggleErrDrawer('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}',event)" title="Click to see ${s.errorCount} tool errors">${s.errorCount} err</span>`
         : anomBadge;
       // f50: custom tags
       const ctags = getCustomTags(s.id);
@@ -3786,12 +3738,12 @@ async function renderSessions() {
       const summaryHtml = s.summary
         ? `<div class="sr-summary">${esc(s.summary.slice(0, 180))}</div>`
         : '';
-      return `<div class="sess-row" data-sess-idx="${idx}" data-sess-id="${esc(s.id)}" onclick="handleSessRowClick(event,this,'${esc(s.id)}')" data-sess-data='${sData}'>
+      return `<div class="sess-row" data-sess-idx="${idx}" data-sess-id="${esc(s.id)}" onclick="handleSessRowClick(event,this,'${esc(String(s.id).replace(/['\\]/g,'\\$&'))}')" data-sess-data='${sData}'>
         <div class="sr-top">
           <div class="sr-prompt">${esc(s.lastPrompt || s.id?.slice(0,8) || '—')}</div>
           <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>${compactBadge}
           <button class="sr-copy-btn" data-prompt="${esc(s.lastPrompt || s.id)}" onclick="copyPrompt(this.dataset.prompt,event)" title="Copy prompt to clipboard">⎘</button>
-          <button class="sess-star${isStarred ? ' on' : ''}" data-sid="${esc(s.id)}" onclick="toggleBookmark('${esc(s.id)}',event)" title="${isStarred ? 'Remove bookmark' : 'Bookmark session'}">${isStarred ? '★' : '☆'}</button>
+          <button class="sess-star${isStarred ? ' on' : ''}" data-sid="${esc(s.id)}" onclick="toggleBookmark('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}',event)" title="${isStarred ? 'Remove bookmark' : 'Bookmark session'}">${isStarred ? '★' : '☆'}</button>
           <span class="sr-view">→ view</span>
         </div>
         ${summaryHtml}
@@ -3803,7 +3755,7 @@ async function renderSessions() {
         ${ctxGauge}
         <div class="err-drawer" id="err-drawer-${esc(s.id)}"></div>
         <div class="sess-notes-wrap" onclick="event.stopPropagation()">
-          <button class="sess-notes-toggle${hasNote ? ' has-note' : ''}" onclick="toggleSessNote('${esc(s.id)}',this)">✎ ${hasNote ? 'Note' : 'Add note'}</button>
+          <button class="sess-notes-toggle${hasNote ? ' has-note' : ''}" onclick="toggleSessNote('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}',this)">✎ ${hasNote ? 'Note' : 'Add note'}</button>
           <div class="sess-notes-area" id="snote-${esc(s.id)}">
             <textarea class="sess-note-input" rows="2" placeholder="Session note…" oninput="saveSessNote('${esc(s.id)}',this.value,this.closest('.sess-notes-wrap').querySelector('.sess-notes-toggle'),this.closest('.sess-row').querySelector('.sess-note-saved'))">${esc(note)}</textarea>
             <div class="sess-note-saved"></div>
@@ -3930,7 +3882,7 @@ function buildTagFilterBar(sessions) {
   if (!allTags.common.size) return '';
   const sorted = [...allTags.common].sort();
   const chips = sorted.map(t =>
-    `<button class="tag-chip${activeTagFilter === t ? ' active' : ''}" onclick="setTagFilter('${esc(t)}')">${esc(t)}</button>`
+    `<button class="tag-chip${activeTagFilter === t ? ' active' : ''}" onclick="setTagFilter('${esc(String(t).replace(/['\\]/g,'\\$&'))}')">${esc(t)}</button>`
   ).join('');
   return `<div class="tag-filter-bar">${chips}</div>`;
 }
@@ -4181,7 +4133,7 @@ async function renderGlobalFeed() {
       const gfSummaryHtml = s.summary
         ? `<div class="sr-summary">${esc(s.summary.slice(0, 180))}</div>`
         : '';
-      return `<div class="sess-row" onclick="switchProject('${esc(project.path)}');setTimeout(()=>jumpToSession('${esc(s.id)}'),150)">
+      return `<div class="sess-row" onclick="switchProject('${esc(String(project.path).replace(/['\\]/g,'\\$&'))}');setTimeout(()=>jumpToSession('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}'),150)">
         <div class="sr-top">
           <div class="sr-prompt">${esc(s.lastPrompt || s.id?.slice(0,8) || '—')}</div>
           <div class="sr-time">${relTime(s.lastTs || s.mtime)}</div>${gfCompactBadge}
@@ -4196,6 +4148,73 @@ async function renderGlobalFeed() {
   }
 }
 
+async function renderHumanInputView() {
+  const el = document.getElementById('hi-content');
+  el.innerHTML = '<div class="loading-txt">Loading all projects…</div>';
+  try {
+    const data = await apiFetch('/api/projects');
+    const projects = (data?.projects || []).slice(0, 8);
+    if (!projects.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">❓</div><div>No projects found</div></div>';
+      updateHumanInputBadge(0);
+      return;
+    }
+    const results = await Promise.allSettled(
+      projects.map(p => apiFetch('/api/questions?dir=' + enc(p.path)).then(d => ({ project: p, questions: d.questions || [] })))
+    );
+    const entries = [];
+    for (const r of results) {
+      if (r.status !== 'fulfilled') continue;
+      const { project, questions } = r.value;
+      for (const q of questions) entries.push({ project, q });
+    }
+    entries.sort((a, b) => (b.q.ts || 0) - (a.q.ts || 0));
+    updateHumanInputBadge(entries.length);
+    document.getElementById('hi-sub').textContent = entries.length
+      ? `${entries.length} pending question(s) across ${projects.length} projects`
+      : `No pending questions across ${projects.length} projects`;
+    if (!entries.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">❓</div><div>No pending questions</div></div>';
+      return;
+    }
+    el.innerHTML = '<div class="sess-list">' + entries.map(({ project, q }) => `
+      <div class="sess-row" data-question-id="${esc(q.questionId)}" style="flex-direction:column;align-items:stretch;gap:6px">
+        <div style="display:flex;justify-content:space-between;gap:8px">
+          <div><b>${esc(q.org)}</b> · ${esc(q.role)} <span style="color:var(--text-xs)">(${esc(project.name || project.path)})</span></div>
+          <div style="color:var(--text-xs);font-size:11px;font-family:var(--mono)">${relTime(q.ts)}</div>
+        </div>
+        <div style="color:var(--text-hi)">${esc(q.question)}</div>
+        <div style="display:flex;gap:6px">
+          <input type="text" class="hi-answer-input" placeholder="Your answer…" style="flex:1;padding:4px 8px;font-size:12px" />
+          <button class="btn" style="font-size:11px" onclick="submitHumanAnswer('${esc(String(project.path).replace(/['\\]/g,'\\$&'))}','${esc(String(q.org).replace(/['\\]/g,'\\$&'))}','${esc(String(q.role).replace(/['\\]/g,'\\$&'))}','${esc(String(q.questionId).replace(/['\\]/g,'\\$&'))}',this)">Answer</button>
+        </div>
+      </div>
+    `).join('') + '</div>';
+  } catch (e) { el.innerHTML = '<div class="empty">Failed: ' + esc(e.message) + '</div>'; }
+}
+
+function updateHumanInputBadge(count) {
+  const b = document.getElementById('bdg-humaninput');
+  if (b) b.textContent = String(count);
+}
+
+async function submitHumanAnswer(dir, org, role, questionId, btnEl) {
+  const row = btnEl.closest('[data-question-id]');
+  const input = row.querySelector('.hi-answer-input');
+  const answer = input.value.trim();
+  if (!answer) return;
+  btnEl.disabled = true;
+  try {
+    const res = await fetch('/api/questions/answer', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ dir, org, role, questionId, answer }),
+    });
+    const data = await res.json();
+    if (data.ok) { showToast('Answered', `${org}:${role}`, 'ok'); row.remove(); }
+    else { showToast('Error', data.error || 'failed', 'err'); btnEl.disabled = false; }
+  } catch (e) { showToast('Error', e.message, 'err'); btnEl.disabled = false; }
+}
+
 // ── agent chat view ────────────────────────────────────────
 let chatVSessions = {};       // sessionId or groupId → session/group object
 let chatVGroupMap = {};        // groupId → group object
@@ -5087,7 +5106,7 @@ function renderLeaderboard() {
     const cost = '$' + s.totalCost.toFixed(2);
     const dur = s.totalDurationMs ? fmtDur(s.totalDurationMs) : '—';
     const prompt = s.lastPrompt || s.id;
-    return `<tr onclick="jumpToSession('${esc(s.id)}')" title="${esc(prompt)}">
+    return `<tr onclick="jumpToSession('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}')" title="${esc(prompt)}">
       <td class="lb-rank">${i + 1}</td>
       <td class="lb-prompt">${esc(prompt.slice(0, 60))}</td>
       <td class="lb-cost">${cost}</td>
@@ -5337,7 +5356,7 @@ function buildSwimlane() {
     const color = `oklch(65% 0.14 ${hue})`;
     const name = (s.lastPrompt || s.id).slice(0, 16);
     return `<div class="sw-row">
-      <div class="sw-lbl" onclick="jumpToSession('${esc(s.id)}')" title="${esc(s.lastPrompt || s.id)}">${esc(name)}</div>
+      <div class="sw-lbl" onclick="jumpToSession('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}')" title="${esc(s.lastPrompt || s.id)}">${esc(name)}</div>
       <div class="sw-track">
         <div class="sw-bar" style="left:${leftPct}%;width:${widthPct}%;background:${color}" title="${esc(name)} · ${fmtDur(dur)}"></div>
       </div>
@@ -6287,6 +6306,14 @@ function v2RenderOrgChart() {
   });
   _v2ChartLayout = { pos, edgeIdByPair };
   v2OrgActivityReset();
+  // The org-chart's live bubbles (activity + pending-question) and flying letters are ALL
+  // driven by _odtHandleLiveEvent, which only receives events while the odt SSE connections
+  // are open. Those were previously established only from v2RenderOrgChat (the Chat tab), so a
+  // user who opens the Chart tab without first visiting Chat got NO live chart updates — the
+  // question bubble never lit. Establish them here too so the Chart tab is self-sufficient.
+  // Both connect helpers are idempotent (guarded) and null-safe on their live-dot elements.
+  _odtConnectChatSSE();
+  if (_v2SelOrg) _odtConnectOrgTail(_v2SelOrg);
 }
 
 function _v2RoleName(id, roles) {
@@ -6403,14 +6430,23 @@ function v2OrgActivityReset() {
   _v2BubbleTimers = new Map();
 }
 
+function _v2FadeOutBubble(fo) {
+  if (typeof gsap !== 'undefined') {
+    gsap.to(fo, { autoAlpha: 0, duration: 0.4, ease: 'power2.in', onComplete: function() { fo.style.visibility = 'hidden'; } });
+  } else {
+    fo.style.opacity = '0';
+    fo.style.visibility = 'hidden';
+  }
+}
+
 function v2ShowActivityBubble(roleId, text) {
   const fo = document.querySelector('.v2-activity-bubble[data-bubble-for="' + CSS.escape(roleId) + '"]');
   if (!fo) return;
+  if (fo.dataset.questionPending === '1') return; // a pending question owns this bubble until answered
   const inner = fo.querySelector('.v2-bubble-inner');
   inner.textContent = text;
   if (typeof gsap !== 'undefined') {
     gsap.killTweensOf(fo);
-    fo.style.visibility = 'visible';
     gsap.fromTo(fo, { scale: 0.8, autoAlpha: 0 }, {
       scale: 1, autoAlpha: 1, duration: 0.3, ease: 'back.out(1.7)',
       transformOrigin: '50% 100%',
@@ -6422,16 +6458,47 @@ function v2ShowActivityBubble(roleId, text) {
   const existing = _v2BubbleTimers.get(roleId);
   if (existing) clearTimeout(existing);
   _v2BubbleTimers.set(roleId, setTimeout(function() {
-    if (typeof gsap !== 'undefined') {
-      gsap.to(fo, { autoAlpha: 0, duration: 0.4, ease: 'power2.in', onComplete: function() { fo.style.visibility = 'hidden'; } });
-    } else {
-      fo.style.opacity = '0';
-      fo.style.visibility = 'hidden';
-    }
+    _v2FadeOutBubble(fo);
     _v2BubbleTimers.delete(roleId);
   }, 5000));
 }
 
+// Truncates by Unicode code point (via the string iterator), not UTF-16 code
+// unit — a plain .slice() can bisect a surrogate pair (e.g. an emoji in the
+// question text) and render a broken glyph.
+function _v2TruncateText(text, maxLen) {
+  const chars = [...text];
+  if (chars.length <= maxLen) return text;
+  return chars.slice(0, maxLen - 1).join('') + '…';
+}
+
+function v2ShowQuestionBubble(roleId, questionText) {
+  const fo = document.querySelector('.v2-activity-bubble[data-bubble-for="' + CSS.escape(roleId) + '"]');
+  if (!fo) return;
+  const existing = _v2BubbleTimers.get(roleId);
+  if (existing) { clearTimeout(existing); _v2BubbleTimers.delete(roleId); }
+  fo.dataset.questionPending = '1';
+  const inner = fo.querySelector('.v2-bubble-inner');
+  inner.textContent = '❓ ' + _v2TruncateText(questionText, 40);
+  inner.classList.add('v2-bubble-question');
+  if (typeof gsap !== 'undefined') {
+    gsap.killTweensOf(fo);
+    gsap.fromTo(fo, { scale: 0.8, autoAlpha: 0 }, { scale: 1, autoAlpha: 1, duration: 0.3, ease: 'back.out(1.7)', transformOrigin: '50% 100%' });
+  } else {
+    fo.style.visibility = 'visible';
+    fo.style.opacity = '1';
+  }
+}
+
+function v2ClearQuestionBubble(roleId) {
+  const fo = document.querySelector('.v2-activity-bubble[data-bubble-for="' + CSS.escape(roleId) + '"]');
+  if (!fo) return;
+  delete fo.dataset.questionPending;
+  const inner = fo.querySelector('.v2-bubble-inner');
+  if (inner) inner.classList.remove('v2-bubble-question');
+  _v2FadeOutBubble(fo);
+}
+
 // ── in-place running dot updater (avoids full re-render + GSAP flicker on SSE events) ──
 function v2UpdateChartRunningDots() {
   if (!_v2OrgData) return;
@@ -8332,6 +8399,14 @@ function _odtHandleLiveEvent(ev) {
     const _arr = [..._odtChatSeenKeys];
     _odtChatSeenKeys = new Set(_arr.slice(1000));
   }
+  if (ev?.type === 'org:question' && ev.from) {
+    if (ev.org === _v2SelOrg) v2ShowQuestionBubble(ev.from, ev.question || '');
+    if (viewRendered['humaninput']) renderHumanInputView();
+    else updateHumanInputBadge((parseInt(document.getElementById('bdg-humaninput')?.textContent, 10) || 0) + 1);
+  }
+  if (ev?.type === 'org:question-answered' && ev.role) {
+    if (ev.org === _v2SelOrg) v2ClearQuestionBubble(ev.role);
+  }
   // Wire activity bubble for org chart visualization
   if (ev && ev.org === _v2SelOrg) {
     const roles = Array.isArray(_v2OrgData && _v2OrgData.roles) ? _v2OrgData.roles : [];
@@ -8552,23 +8627,65 @@ async function v2RenderOrgFiles() {
         '<table style="width:100%;border-collapse:collapse;font-size:12px">'+
         '<thead><tr style="color:var(--text-xs);font-size:9px;text-align:left"><th style="padding:4px 8px">File</th><th>Type</th><th>Size</th><th>Modified</th><th></th></tr></thead>'+
         '<tbody>'+g.items.map(f => {
+          const isImg = OF_IMG_RE.test(f.name);
           return '<tr style="border-top:1px solid var(--border)" data-fp="'+esc(f.path)+'" data-fn="'+esc(f.name)+'">'+
             '<td style="padding:6px 8px"><span style="font-family:var(--mono);font-size:11px;color:var(--text-hi);cursor:pointer" onclick="v2ViewOrgFile(this.closest(\'tr\').dataset.fp,this.closest(\'tr\').dataset.fn)">'+esc(f.name)+'</span></td>'+
             '<td style="padding:6px 8px">'+badge(f.type)+'</td>'+
             '<td style="padding:6px 8px;font-size:10px;color:var(--text-lo);font-family:var(--mono)">'+fmtSize(f.size||0)+'</td>'+
             '<td style="padding:6px 8px;font-size:10px;color:var(--text-lo)">'+fmtTime(f.mtime)+'</td>'+
-            '<td style="padding:6px 8px"><button class="btn" style="font-size:9px;padding:2px 7px" onclick="v2ViewOrgFile(this.closest(\'tr\').dataset.fp,this.closest(\'tr\').dataset.fn)">View</button></td></tr>';
+            '<td style="padding:6px 8px;white-space:nowrap">'+
+              '<button class="btn" style="font-size:9px;padding:2px 7px" onclick="v2ViewOrgFile(this.closest(\'tr\').dataset.fp,this.closest(\'tr\').dataset.fn)">View</button> '+
+              '<button class="btn" style="font-size:9px;padding:2px 7px" onclick="_ofCopyPath(this.closest(\'tr\').dataset.fp)">Copy Path</button>'+
+              (isImg ? '' : ' <button class="btn" style="font-size:9px;padding:2px 7px" onclick="_ofCopyContent(this.closest(\'tr\').dataset.fp)">Copy</button>') +
+            '</td></tr>';
         }).join('')+'</tbody></table></div>';
     }).join('')+'</div>';
   } catch(e) { el.innerHTML = '<div style="padding:20px;color:oklch(60% 0.22 25)">Error: '+e.message+'</div>'; }
 }
 
+function _ofCopyPath(filePath) {
+  if (!filePath) return;
+  navigator.clipboard.writeText(filePath).then(() => {
+    if (typeof showToast === 'function') showToast('Path copied', '', 'ok');
+  });
+}
+
+async function _ofCopyContent(filePath) {
+  if (!filePath) return;
+  try {
+    const dirParam = (typeof DIR !== 'undefined' && DIR) ? '&dir='+encodeURIComponent(DIR) : '';
+    const r = await fetch('/api/file-content?path='+encodeURIComponent(filePath)+dirParam);
+    if (!r.ok) { if (typeof showToast === 'function') showToast('Copy failed', 'Error '+r.status, 'error'); return; }
+    const text = await r.text();
+    await navigator.clipboard.writeText(text);
+    if (typeof showToast === 'function') showToast('Content copied', '', 'ok');
+  } catch (e) {
+    if (typeof showToast === 'function') showToast('Copy failed', e.message, 'error');
+  }
+}
+
 let _ofModal = null;
 let _ofRawText = '';
 
+const OF_IMG_RE = /\.(png|jpe?g|gif|svg|webp)$/i;
+
+function _ofMdTableRow(row) {
+  var cells = row.trim().replace(/^\||\|$/g,'').split('|').map(function(c){ return c.trim(); });
+  return cells;
+}
+
 function _ofMdToHtml(md) {
   return md
     .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/^(\|.+\|)[ \t]*\n\|[ \t]*:?-{2,}:?[ \t]*(?:\|[ \t]*:?-{2,}:?[ \t]*)*\|?[ \t]*\n((?:\|.*\|[ \t]*\n?)*)/gm, function(_m, headerRow, bodyRows) {
+      var head = _ofMdTableRow(headerRow);
+      var thead = '<tr>' + head.map(function(c){ return '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);color:var(--text-hi)">'+c+'</th>'; }).join('') + '</tr>';
+      var tbody = bodyRows.split('\n').filter(function(r){ return r.trim(); }).map(function(r){
+        var cells = _ofMdTableRow(r);
+        return '<tr>' + cells.map(function(c){ return '<td style="padding:6px 10px;border-bottom:1px solid var(--border)">'+c+'</td>'; }).join('') + '</tr>';
+      }).join('');
+      return '<table style="border-collapse:collapse;width:100%;margin:8px 0;font-size:11px">'+thead+tbody+'</table>';
+    })
     .replace(/^#{6}\s+(.+)$/gm,'<h6 style="font-size:11px;font-weight:700;color:var(--text-hi);margin:10px 0 4px">$1</h6>')
     .replace(/^#{5}\s+(.+)$/gm,'<h5 style="font-size:12px;font-weight:700;color:var(--text-hi);margin:10px 0 4px">$1</h5>')
     .replace(/^#{4}\s+(.+)$/gm,'<h4 style="font-size:13px;font-weight:700;color:var(--text-hi);margin:12px 0 5px">$1</h4>')
@@ -8583,6 +8700,9 @@ function _ofMdToHtml(md) {
     .replace(/^\s*[-*]\s+(.+)$/gm,'<li style="margin:2px 0;padding-left:4px">$1</li>')
     .replace(/(<li.*<\/li>\n?)+/g,'<ul style="padding-left:18px;margin:6px 0">$&</ul>')
     .replace(/^\d+\.\s+(.+)$/gm,'<li style="margin:2px 0;padding-left:4px">$1</li>')
+    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, function(_m, alt, url) {
+      return '<img src="'+String(url).replace(/"/g,'&quot;')+'" alt="'+String(alt).replace(/"/g,'&quot;')+'" loading="lazy" style="max-width:100%;border-radius:4px;margin:8px 0;display:block">';
+    })
     .replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" style="color:var(--accent);text-decoration:underline" target="_blank" rel="noopener">$1</a>')
     .replace(/\n\n+/g,'</p><p style="margin:0 0 8px">')
     .replace(/^(?!<[hupoli]|<pre|<hr)(.+)$/gm, '$1')
@@ -8593,6 +8713,7 @@ async function v2ViewOrgFile(filePath, fileName) {
   if (_ofModal) { _ofModal.remove(); _ofModal = null; }
   const isMd = /\.(md|markdown)$/i.test(fileName);
   const isJson = /\.json$/i.test(fileName);
+  const isImage = OF_IMG_RE.test(fileName);
   _ofRawText = '';
   _ofModal = document.createElement('div');
   _ofModal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box';
@@ -8602,8 +8723,9 @@ async function v2ViewOrgFile(filePath, fileName) {
       '<div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0">' +
         '<span style="font-family:var(--mono);font-size:11px;color:var(--text-hi);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="'+esc(filePath)+'">'+esc(fileName)+'</span>' +
         (isMd ? '<button id="of-toggle" class="btn" style="font-size:9px;padding:2px 7px" onclick="_ofToggleRender()">Raw</button>' : '') +
-        '<button class="btn" style="font-size:9px;padding:2px 7px" onclick="navigator.clipboard.writeText(_ofRawText).then(()=>{ if(typeof showToast===\'function\') showToast(\'Copied\',\'\',\'ok\'); })">Copy</button>' +
-        '<button class="btn" style="font-size:9px;padding:2px 7px;border-color:oklch(68% 0.20 150);color:oklch(68% 0.20 150)" onclick="_ofSaveFile(\''+esc(fileName)+'\')">Save</button>' +
+        (isImage ? '' : '<button class="btn" style="font-size:9px;padding:2px 7px" onclick="navigator.clipboard.writeText(_ofRawText).then(()=>{ if(typeof showToast===\'function\') showToast(\'Copied\',\'\',\'ok\'); })">Copy</button>') +
+        (isImage ? '<button class="btn" style="font-size:9px;padding:2px 7px;border-color:oklch(68% 0.20 150);color:oklch(68% 0.20 150)" onclick="_ofSaveImage(\''+esc(String(fileName).replace(/['\\]/g,'\\$&'))+'\')">Save</button>'
+                 : '<button class="btn" style="font-size:9px;padding:2px 7px;border-color:oklch(68% 0.20 150);color:oklch(68% 0.20 150)" onclick="_ofSaveFile(\''+esc(String(fileName).replace(/['\\]/g,'\\$&'))+'\')">Save</button>') +
         '<button class="btn" style="font-size:9px;padding:2px 7px" onclick="_ofModal&&(_ofModal.remove(),_ofModal=null)">✕</button>' +
       '</div>' +
       '<div id="of-content" style="flex:1;overflow-y:auto;padding:16px 18px;font-size:12px;line-height:1.7;color:var(--text-mid);scrollbar-width:thin;scrollbar-color:var(--border) transparent">' +
@@ -8611,9 +8733,18 @@ async function v2ViewOrgFile(filePath, fileName) {
       '</div>' +
     '</div>';
   document.body.appendChild(_ofModal);
+  const dirParam = (typeof DIR !== 'undefined' && DIR) ? '&dir='+encodeURIComponent(DIR) : '';
+  const fileUrl = '/api/file-content?path='+encodeURIComponent(filePath)+dirParam;
+  if (isImage) {
+    const el = document.getElementById('of-content');
+    if (el) {
+      _ofRawText = fileUrl;
+      el.innerHTML = '<img src="'+esc(fileUrl)+'" alt="'+esc(fileName)+'" style="max-width:100%;display:block;margin:0 auto" onerror="this.replaceWith(document.createTextNode(\'Failed to load image\'))">';
+    }
+    return;
+  }
   try {
-    const dirParam = (typeof DIR !== 'undefined' && DIR) ? '&dir='+encodeURIComponent(DIR) : '';
-    const r = await fetch('/api/file-content?path='+encodeURIComponent(filePath)+dirParam);
+    const r = await fetch(fileUrl);
     const el = document.getElementById('of-content');
     if (!el) return;
     if (!r.ok) { el.textContent = 'Error '+r.status+': '+r.statusText; return; }
@@ -8660,6 +8791,14 @@ function _ofSaveFile(defaultName) {
   URL.revokeObjectURL(a.href);
 }
 
+function _ofSaveImage(defaultName) {
+  if (!_ofRawText) return;
+  const a = document.createElement('a');
+  a.href = _ofRawText;
+  a.download = defaultName || 'image';
+  a.click();
+}
+
 // ── WORKSPACES ─────────────────────────────────────────────
 async function v2RenderOrgWorkspaces() {
   const el = document.getElementById('odt-workspaces');
@@ -8901,7 +9040,7 @@ window.v2ShowCopyOrgDialog = async function() {
         const label = p.name || p.slug || p.path?.split('/').pop() || p.path;
         const shortP = (p.path || '').replace(/\/Users\/[^/]+\//, '~/');
         const isCurrent = p.path === (window._orgDir || '');
-        return `<div class="ocp-row${isCurrent ? ' ocp-sel' : ''}" title="${esc(p.path)}" onclick="document.querySelectorAll('.ocp-row').forEach(r=>r.classList.remove('ocp-sel'));this.classList.add('ocp-sel');document.getElementById('org-copy-dest').value='${esc(p.path).replace(/'/g,"\\'")}'" style="padding:7px 10px;font-size:12px;font-family:var(--mono);cursor:pointer;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:baseline">
+        return `<div class="ocp-row${isCurrent ? ' ocp-sel' : ''}" title="${esc(p.path)}" onclick="document.querySelectorAll('.ocp-row').forEach(r=>r.classList.remove('ocp-sel'));this.classList.add('ocp-sel');document.getElementById('org-copy-dest').value='${esc(String(p.path).replace(/['\\]/g,'\\$&'))}'" style="padding:7px 10px;font-size:12px;font-family:var(--mono);cursor:pointer;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:baseline">
           <span style="color:var(--text-hi)">${esc(label)}</span>
           <span style="color:var(--text-lo);font-size:10px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(shortP)}</span>
         </div>`;
@@ -10109,7 +10248,7 @@ async function loadProjCosts() {
     const rows = data.projects.slice(0, 10).map((p, i) => {
       const barW = maxCost > 0 ? Math.round((p.cost / maxCost) * 100) : 0;
       const name = p.path.split('/').filter(Boolean).pop() || p.path;
-      return `<tr onclick="switchProject('${esc(p.path)}')" style="cursor:pointer" title="${esc(p.path)}">
+      return `<tr onclick="switchProject('${esc(String(p.path).replace(/['\\]/g,'\\$&'))}')" style="cursor:pointer" title="${esc(p.path)}">
         <td class="lb-rank">${i + 1}</td>
         <td style="font-size:12px;color:var(--text-mid);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(name)}</td>
         <td class="lb-cost">$${p.cost.toFixed(2)}</td>
@@ -10181,7 +10320,7 @@ function buildGanttTimeline() {
       const opacity = 0.3 + costRatio * 0.7;
       const color = DONUT_COLORS[i % DONUT_COLORS.length];
       const tip = `${s.lastPrompt ? s.lastPrompt.slice(0,60) : s.id} | $${(s.totalCost||0).toFixed(3)} | ${fmtDur(s.totalDurationMs||0)}`;
-      track += `<div class="tl-bar" style="left:${startPct}%;width:${durPct}%;background:${color};opacity:${opacity}" title="${esc(tip)}" onclick="jumpToSession('${esc(s.id)}')"></div>`;
+      track += `<div class="tl-bar" style="left:${startPct}%;width:${durPct}%;background:${color};opacity:${opacity}" title="${esc(tip)}" onclick="jumpToSession('${esc(String(s.id).replace(/['\\]/g,'\\$&'))}')"></div>`;
     }
     html += `<div class="tl-day-row"><div class="tl-day-lbl">${lbl}</div><div class="tl-track">${track}</div></div>`;
   }
@@ -10498,7 +10637,7 @@ function showCustomTagInput(sessId, event) {
   iw.className = 'ctag-input-wrap';
   iw.onclick = e => e.stopPropagation();
   iw.innerHTML = `<input class="ctag-input" type="text" placeholder="tag name…" maxlength="20" autofocus>
-    <button class="ctag-ok" onclick="(()=>{const inp=this.closest('.ctag-input-wrap').querySelector('input');addCustomTag('${esc(sessId)}',inp.value,event);inp.value='';})()">Add</button>`;
+    <button class="ctag-ok" onclick="(()=>{const inp=this.closest('.ctag-input-wrap').querySelector('input');addCustomTag('${esc(String(sessId).replace(/['\\]/g,'\\$&'))}',inp.value,event);inp.value='';})()">Add</button>`;
   wrap.appendChild(iw);
   const inp = iw.querySelector('input');
   inp.focus();
@@ -10510,11 +10649,11 @@ function showCustomTagInput(sessId, event) {
 
 function renderCustomTagsInline(sessId, tags) {
   const tagHtml = tags.map(t =>
-    `<span class="sr-ctag">${esc(t)}<span class="ctag-del" onclick="removeCustomTag('${esc(sessId)}','${esc(t)}',event)" title="Remove tag">✕</span></span>`
+    `<span class="sr-ctag">${esc(t)}<span class="ctag-del" onclick="removeCustomTag('${esc(String(sessId).replace(/['\\]/g,'\\$&'))}','${esc(String(t).replace(/['\\]/g,'\\$&'))}',event)" title="Remove tag">✕</span></span>`
   ).join('');
   return `<div class="sr-custom-tags" data-sess="${esc(sessId)}" onclick="event.stopPropagation()">
     ${tagHtml}
-    <button class="ctag-add-btn" onclick="showCustomTagInput('${esc(sessId)}',event)" title="Add tag">+ tag</button>
+    <button class="ctag-add-btn" onclick="showCustomTagInput('${esc(String(sessId).replace(/['\\]/g,'\\$&'))}',event)" title="Add tag">+ tag</button>
   </div>`;
 }
 
@@ -10529,14 +10668,14 @@ async function toggleErrDrawer(sessId, event) {
   try {
     const data = await apiFetch('/api/session-errors?dir=' + enc(DIR) + '&id=' + enc(sessId));
     if (!data.errors?.length) {
-      drawer.innerHTML = `<div class="err-drawer-head"><span>No error details found</span><button class="err-close" onclick="closeErrDrawer('${esc(sessId)}')">✕</button></div>`;
+      drawer.innerHTML = `<div class="err-drawer-head"><span>No error details found</span><button class="err-close" onclick="closeErrDrawer('${esc(String(sessId).replace(/['\\]/g,'\\$&'))}')">✕</button></div>`;
       return;
     }
     const items = data.errors.map(e => `<div class="err-item">${esc(e.text)}</div>`).join('');
-    drawer.innerHTML = `<div class="err-drawer-head"><span>${data.errors.length} error${data.errors.length !== 1 ? 's' : ''}</span><button class="err-close" onclick="closeErrDrawer('${esc(sessId)}')">✕</button></div>
+    drawer.innerHTML = `<div class="err-drawer-head"><span>${data.errors.length} error${data.errors.length !== 1 ? 's' : ''}</span><button class="err-close" onclick="closeErrDrawer('${esc(String(sessId).replace(/['\\]/g,'\\$&'))}')">✕</button></div>
       <div class="err-drawer-body">${items}</div>`;
   } catch (err) {
-    drawer.innerHTML = `<div class="err-drawer-head"><span>Could not load: ${esc(err.message)}</span><button class="err-close" onclick="closeErrDrawer('${esc(sessId)}')">✕</button></div>`;
+    drawer.innerHTML = `<div class="err-drawer-head"><span>Could not load: ${esc(err.message)}</span><button class="err-close" onclick="closeErrDrawer('${esc(String(sessId).replace(/['\\]/g,'\\$&'))}')">✕</button></div>`;
   }
 }
 
@@ -10675,19 +10814,12 @@ let _mgWikiMode = 'all';
 let _mgWikiSearchTimer = null;
 
 /* ── Playbook View ─────────────────────────────────────────── */
-// monoagent connections state
-let _maPlatforms = [];   // full registry from monoes
-let _maConns = [];       // active API/OAuth connections
-let _maSessions = [];    // browser sessions
-let _maSelected = null;  // currently open modal platform def
-let _maLoginPoll = null; // active login poll interval (cleared on modal close)
 
 function wfSwitchTab(tab) {
   document.querySelectorAll('.wf-pane, #wf-tab-builder').forEach(p => p.classList.remove('active'));
   document.querySelectorAll('[data-wftab]').forEach(b => b.classList.remove('active'));
   document.getElementById('wf-tab-' + tab).classList.add('active');
   document.querySelector('[data-wftab="' + tab + '"]').classList.add('active');
-  if (tab === 'systems') loadPlatformSessions();
   if (tab === 'library') loadWorkflowDefs();
   if (tab === 'runs') loadWorkflowRuns();
   if (tab === 'builder') pbInit();
@@ -10721,31 +10853,13 @@ async function loadWorkflowDefs() {
         </div>
       </div>
       <div style="display:flex;flex-direction:column;gap:4px;flex-shrink:0">
-        <button class="wf-def-run-btn" title="Copy run command" onclick="navigator.clipboard?.writeText('npx monomind browse playbook run .monomind/playbooks/${esc(d.file)}').then(()=>this.textContent='Copied!').catch(()=>{});setTimeout(()=>this.textContent='▶ Run',1500)">▶ Run</button>
+        <button class="wf-def-run-btn" title="Copy run command" onclick="navigator.clipboard?.writeText('npx monomind browse playbook run .monomind/playbooks/${esc(String(d.file).replace(/['\\]/g,'\\$&'))}').then(()=>this.textContent='Copied!').catch(()=>{});setTimeout(()=>this.textContent='▶ Run',1500)">▶ Run</button>
         <button class="wf-def-run-btn" style="font-size:10px" title="Open in Builder" onclick="pbLoadDef(${JSON.stringify(d.id)});wfSwitchTab('builder')">✎ Edit</button>
       </div>
     </div>`;
   }).join('');
 }
 
-async function loadPlatformSessions() {
-  const grid = document.getElementById('wf-systems-grid');
-  if (!grid) return;
-  grid.innerHTML = '<div class="loading-txt">Loading…</div>';
-  try {
-    const [plats, conns] = await Promise.all([
-      fetch('/api/monoagent/platforms').then(r => r.json()).catch(() => []),
-      fetch('/api/monoagent/connections').then(r => r.json()).catch(() => ({ connections: [], sessions: [] })),
-    ]);
-    _maPlatforms = Array.isArray(plats) ? plats : [];
-    _maConns = Array.isArray(conns.connections) ? conns.connections : [];
-    _maSessions = Array.isArray(conns.sessions) ? conns.sessions : [];
-    renderSystems();
-  } catch (e) {
-    grid.innerHTML = '<div class="loading-txt">Failed to load systems.</div>';
-  }
-}
-
 function relativeTime(ts) {
   if (!ts) return '—';
   const s = Math.floor((Date.now() - ts) / 1000);
@@ -10755,291 +10869,6 @@ function relativeTime(ts) {
   return Math.floor(s / 86400) + 'd ago';
 }
 
-const MA_CATEGORY_ORDER = ['social', 'service', 'communication', 'database'];
-const MA_CATEGORY_LABELS = { social: 'Social', service: 'Services & APIs', communication: 'Communication', database: 'Databases' };
-const BROWSER_PLATFORMS = new Set(['instagram', 'linkedin', 'x', 'tiktok', 'gemini']);
-
-function maResolveConn(pid) {
-  pid = pid.toLowerCase();
-  if (BROWSER_PLATFORMS.has(pid)) {
-    const now = Date.now();
-    const s = _maSessions.find(x => (x.Platform || '').toLowerCase() === pid);
-    if (!s) return null;
-    const expiry = new Date(s.Expiry).getTime();
-    return { _type: 'session', id: String(s.ID), account: s.Username || '—', method: 'browser', status: expiry > now ? 'active' : 'expired' };
-  }
-  const c = _maConns.find(x => (x.platform || '').toLowerCase() === pid);
-  if (!c) return null;
-  return { _type: 'connection', id: c.id, account: c.account_id || c.label || '—', method: c.method || '—', status: c.status || 'active', lastTested: c.last_tested };
-}
-
-function renderSystems() {
-  const grid = document.getElementById('wf-systems-grid');
-  if (!grid) return;
-
-  if (!_maPlatforms.length) {
-    grid.innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-xs);font-size:12px">
-      <div style="font-size:28px;margin-bottom:8px">🔌</div>
-      <div style="font-weight:600;color:var(--text-lo);margin-bottom:4px">monoagent not found</div>
-      <div style="font-size:11px">Install monoes: <code style="color:var(--accent)">go install github.com/monoes/mono-agent/cmd/monoes@latest</code></div>
-    </div>`;
-    return;
-  }
-
-  const groups = {};
-  for (const p of _maPlatforms) {
-    const cat = (p.Category || p.category || 'service').toLowerCase();
-    if (!groups[cat]) groups[cat] = [];
-    groups[cat].push(p);
-  }
-
-  const cats = [...MA_CATEGORY_ORDER, ...Object.keys(groups).filter(c => !MA_CATEGORY_ORDER.includes(c))].filter(c => groups[c]);
-  const totalConn = _maPlatforms.filter(p => maResolveConn(p.ID || p.id)).length;
-
-  let html = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
-    <span style="font-size:11px;color:var(--text-xs)">${totalConn} / ${_maPlatforms.length} connected</span>
-    <button class="ma-btn ma-btn-ghost" style="font-size:10px;padding:3px 10px" onclick="loadPlatformSessions()">↺ Refresh</button>
-  </div>`;
-
-  for (const cat of cats) {
-    const list = groups[cat];
-    const catConn = list.filter(p => maResolveConn(p.ID || p.id)).length;
-    html += `<div class="ma-cat-hdr">
-      <span class="ma-cat-label">${MA_CATEGORY_LABELS[cat] || cat}</span>
-      <div class="ma-cat-line"></div>
-      <span class="ma-cat-count">${catConn}/${list.length}</span>
-    </div><div class="ma-tiles">`;
-    for (const p of list) {
-      const pid = p.ID || p.id;
-      const conn = maResolveConn(pid);
-      const connected = conn && conn.status === 'active';
-      const expired = conn && conn.status !== 'active';
-      const cls = connected ? 'connected' : expired ? 'expired' : '';
-      html += `<div class="ma-tile ${cls}" data-pid="${esc(pid)}" onclick="maOpenModal(this.dataset.pid)">
-        <span class="ma-tile-icon">${esc(p.IconEmoji || p.iconEmoji || '🔌')}</span>
-        <span class="ma-tile-name">${esc(p.Name || p.name || pid)}</span>
-        <div style="display:flex;align-items:center;gap:4px">
-          <span class="ma-tile-dot"></span>
-          ${conn ? `<span class="ma-tile-acct">${esc(conn.account)}</span>` : ''}
-        </div>
-      </div>`;
-    }
-    html += `</div>`;
-  }
-
-  grid.innerHTML = html;
-}
-
-function maOpenModal(pid) {
-  const p = _maPlatforms.find(x => (x.ID || x.id) === pid);
-  if (!p) return;
-  _maSelected = p;
-  maRenderModal(p, maResolveConn(pid), []);
-}
-
-function maRenderModal(p, conn, steps, selMethod, fields, state) {
-  const pid = p.ID || p.id;
-  const name = p.Name || p.name || pid;
-  const emoji = p.IconEmoji || p.iconEmoji || '🔌';
-  const methods = (p.Methods || p.methods || []);
-  const method = selMethod || methods[0] || '';
-  const isBrowser = method === 'browser';
-  const connected = conn && conn.status === 'active';
-  const expired = conn && conn.status !== 'active' && conn;
-  state = state || {};
-
-  const existing = document.getElementById('ma-modal-overlay');
-  if (existing) existing.remove();
-
-  const overlay = document.createElement('div');
-  overlay.id = 'ma-modal-overlay';
-  overlay.className = 'ma-modal-bg';
-  overlay.addEventListener('click', e => { if (e.target === overlay) maCloseModal(); });
-
-  let bodyHtml = '';
-
-  if (conn) {
-    // Connected state
-    const statusColor = connected ? 'var(--green)' : '#fbbf24';
-    bodyHtml = `
-      <div class="ma-modal-info">
-        ${[['Account', conn.account], ['Method', conn.method], ['Status', conn.status]].map(([l,v]) =>
-          `<div class="ma-modal-row"><span class="ma-modal-lbl">${l}</span><span class="ma-modal-val ${v==='active'?'ok':v==='expired'?'warn':''}">${esc(v)}</span></div>`
-        ).join('')}
-        ${conn.lastTested ? `<div class="ma-modal-row"><span class="ma-modal-lbl">Last tested</span><span class="ma-modal-val">${esc(relativeTime(new Date(conn.lastTested).getTime()))}</span></div>` : ''}
-      </div>
-      ${state.testMsg ? `<div class="ma-msg ${state.testOk ? 'ok' : 'err'}">${esc(state.testMsg)}</div>` : ''}
-      ${state.err ? `<div class="ma-msg err">${esc(state.err)}</div>` : ''}
-      ${steps.length ? `<div class="ma-steps">${steps.map(s=>`<div class="ma-step"><span class="ma-step-dot ${s.kind}"></span><span class="ma-step-txt ${s.kind}">${esc(s.msg)}</span></div>`).join('')}</div>` : ''}
-      <div class="ma-btns">
-        <button class="ma-btn ma-btn-secondary" id="ma-test-btn" onclick="maTest('${pid}','${conn.id}')">Test</button>
-        ${expired ? `<button class="ma-btn ma-btn-primary" onclick="maStartLogin('${pid}')">Log in again</button>` : ''}
-        ${state.confirmDisc ? `
-          <button class="ma-btn ma-btn-danger" onclick="maDisconnect('${pid}','${conn.id}','${conn._type}')">Yes, disconnect</button>
-          <button class="ma-btn ma-btn-ghost" data-pid="${esc(pid)}" onclick="maOpenModal(this.dataset.pid)">Cancel</button>
-        ` : `
-          <button class="ma-btn ma-btn-danger" onclick="maConfirmDisconnect('${pid}')">Disconnect</button>
-          <button class="ma-btn ma-btn-ghost" onclick="maCloseModal()">Close</button>
-        `}
-      </div>`;
-  } else {
-    // Not connected — show method tabs + connect form
-    const methodTabsHtml = methods.length > 1 ? `<div class="ma-method-tabs">${methods.map(m =>
-      `<button class="ma-method-tab ${m===method?'active':''}" data-pid="${esc(p.ID||p.id)}" data-method="${esc(m)}" onclick="maRenderModal(_maPlatforms.find(x=>(x.ID||x.id)===this.dataset.pid),null,[],this.dataset.method,{},{})">${esc(m)}</button>`
-    ).join('')}</div>` : '';
-
-    let formHtml = '';
-    if (isBrowser) {
-      formHtml = `<div class="ma-browser-hint">A browser window will open. Log in to ${esc(name)} and the session will be saved automatically.</div>
-        ${steps.length ? `<div class="ma-steps">${steps.map(s=>`<div class="ma-step"><span class="ma-step-dot ${s.kind}"></span><span class="ma-step-txt ${s.kind}">${esc(s.msg)}</span></div>`).join('')}</div>` : ''}
-        ${state.running ? `<div style="display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-xs)"><span class="spinner" style="width:10px;height:10px;border-width:2px"></span>Waiting for login…</div>` : ''}
-        ${state.err ? `<div class="ma-msg err">${esc(state.err)}</div>` : ''}`;
-    } else {
-      const fieldDefs = (p.Fields || p.fields || {})[method] || [];
-      formHtml = fieldDefs.map(f => {
-        const key = f.Key || f.key;
-        const label = f.Label || f.label || key;
-        const secret = f.Secret || f.secret;
-        const req = f.Required || f.required;
-        const val = (fields || {})[key] || '';
-        return `<div>
-          <div class="ma-field-label">${esc(label)}${req ? ' <span style="color:oklch(60% 0.18 25)">*</span>' : ''}</div>
-          <input class="ma-field-input" type="${secret ? 'password' : 'text'}" data-key="${esc(key)}" value="${esc(val)}" autocomplete="${secret ? 'new-password' : 'off'}" placeholder="${esc(label)}">
-          ${f.HelpURL || f.helpURL ? `<a href="#" style="font-size:9.5px;color:var(--accent);text-decoration:none" onclick="event.preventDefault()">How to get this ↗</a>` : ''}
-        </div>`;
-      }).join('') || `<div class="ma-browser-hint">No configuration required.</div>`;
-      formHtml += `${state.err ? `<div class="ma-msg err">${esc(state.err)}</div>` : ''}
-        ${state.ok ? `<div class="ma-msg ok">Connected!</div>` : ''}`;
-    }
-
-    const connectBtn = isBrowser
-      ? `<button class="ma-btn ma-btn-primary" id="ma-conn-btn" onclick="maStartLogin('${pid}')">Connect ${esc(name)}</button>`
-      : `<button class="ma-btn ma-btn-primary" id="ma-conn-btn" data-pid="${esc(pid)}" data-method="${esc(method)}" onclick="maConnectApiKey(this.dataset.pid,this.dataset.method)">Connect</button>`;
-
-    bodyHtml = `
-      ${methodTabsHtml}
-      ${formHtml}
-      <div class="ma-btns">
-        ${state.ok ? '' : connectBtn}
-        <button class="ma-btn ma-btn-ghost" onclick="loadPlatformSessions();maCloseModal()">Refresh</button>
-        <button class="ma-btn ma-btn-ghost" onclick="maCloseModal()">Close</button>
-      </div>`;
-  }
-
-  overlay.innerHTML = `<div class="ma-modal">
-    <div class="ma-modal-hdr">
-      <div class="ma-modal-hdr-left">
-        <span style="font-size:26px">${esc(emoji)}</span>
-        <div>
-          <div class="ma-modal-title">${esc(name)}</div>
-          <div style="display:flex;align-items:center;gap:5px;margin-top:2px">
-            <span style="width:6px;height:6px;border-radius:50%;background:${connected?'var(--green)':expired?'#fbbf24':'var(--border)'}"></span>
-            <span class="ma-modal-status" style="color:${connected?'var(--green)':expired?'#fbbf24':'var(--text-xs)'}">${connected?'Connected':expired?'Session expired':'Not connected'}</span>
-          </div>
-        </div>
-      </div>
-      <button class="ma-btn ma-btn-ghost" style="padding:4px 8px" onclick="maCloseModal()">✕</button>
-    </div>
-    <div class="ma-modal-body">${bodyHtml}</div>
-  </div>`;
-
-  document.body.appendChild(overlay);
-}
-
-function maCloseModal() {
-  if (_maLoginPoll) { clearInterval(_maLoginPoll); _maLoginPoll = null; }
-  const el = document.getElementById('ma-modal-overlay');
-  if (el) el.remove();
-  _maSelected = null;
-}
-
-function maConfirmDisconnect(pid) {
-  const p = _maPlatforms.find(x => (x.ID || x.id) === pid);
-  const conn = maResolveConn(pid);
-  if (p && conn) maRenderModal(p, conn, [], null, {}, { confirmDisc: true });
-}
-
-async function maStartLogin(pid) {
-  const p = _maPlatforms.find(x => (x.ID || x.id) === pid);
-  if (!p) return;
-  const steps = [{ msg: 'Opening browser…', kind: '' }];
-  maRenderModal(p, null, steps, 'browser', {}, { running: true });
-  try {
-    const r = await fetch('/api/monoagent/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: pid }) });
-    if (!r.ok) throw new Error('HTTP ' + r.status);
-    steps.push({ msg: 'Browser open — log in then come back', kind: 'ok' });
-    maRenderModal(p, null, steps, 'browser', {}, { running: false });
-    showToast('Browser opened', 'Log in to ' + (p.Name || pid) + ' and hit Refresh', 'ok');
-    // Poll for completion
-    let polls = 0;
-    if (_maLoginPoll) clearInterval(_maLoginPoll);
-    _maLoginPoll = setInterval(async () => {
-      polls++;
-      const d = await fetch('/api/monoagent/connections').then(r => r.json()).catch(() => null);
-      if (d) { _maConns = d.connections || []; _maSessions = d.sessions || []; }
-      const conn = maResolveConn(pid);
-      if (conn || polls >= 18) {
-        clearInterval(_maLoginPoll); _maLoginPoll = null;
-        if (conn) { renderSystems(); maOpenModal(pid); showToast('Connected', (p.Name||pid) + ' session saved', 'ok'); }
-        else { maRenderModal(p, null, [], 'browser', {}, { err: 'Login timed out. Close the browser tab and try again.' }); }
-      }
-    }, 5000);
-  } catch (e) {
-    maRenderModal(p, null, [], 'browser', {}, { err: e.message });
-  }
-}
-
-async function maConnectApiKey(pid, method) {
-  const p = _maPlatforms.find(x => (x.ID || x.id) === pid);
-  if (!p) return;
-  const modal = document.getElementById('ma-modal-overlay');
-  const inputs = modal ? modal.querySelectorAll('.ma-field-input') : [];
-  const fields = {};
-  inputs.forEach(inp => { fields[inp.dataset.key] = inp.value.trim(); });
-  const btn = document.getElementById('ma-conn-btn');
-  if (btn) { btn.disabled = true; btn.textContent = 'Connecting…'; }
-  try {
-    const r = await fetch('/api/monoagent/connect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: pid, method, fields }) });
-    const d = await r.json();
-    if (d.ok) {
-      await loadPlatformSessions();
-      maRenderModal(p, maResolveConn(pid), [], method, fields, { ok: true });
-      showToast('Connected', (p.Name || pid) + ' connected', 'ok');
-    } else {
-      maRenderModal(p, null, [], method, fields, { err: d.stderr || d.error || 'Connection failed' });
-    }
-  } catch (e) {
-    maRenderModal(p, null, [], method, fields, { err: e.message });
-  }
-}
-
-async function maTest(pid, connId) {
-  const p = _maPlatforms.find(x => (x.ID || x.id) === pid);
-  const conn = maResolveConn(pid);
-  if (!p || !conn) return;
-  const btn = document.getElementById('ma-test-btn');
-  if (btn) { btn.disabled = true; btn.textContent = 'Testing…'; }
-  try {
-    const d = await fetch('/api/monoagent/test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: connId }) }).then(r => r.json());
-    maRenderModal(p, conn, [], null, {}, { testOk: d.ok, testMsg: d.ok ? '✓ Connection OK' : ('✗ ' + (d.error || 'Test failed')) });
-  } catch (e) {
-    maRenderModal(p, conn, [], null, {}, { testMsg: '✗ ' + e.message, testOk: false });
-  }
-}
-
-async function maDisconnect(pid, connId, type) {
-  const p = _maPlatforms.find(x => (x.ID || x.id) === pid);
-  if (!p) return;
-  try {
-    await fetch('/api/monoagent/disconnect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: connId, type }) });
-    await loadPlatformSessions();
-    maCloseModal();
-    showToast('Disconnected', (p.Name || pid) + ' removed', 'ok');
-  } catch (e) {
-    showToast('Error', e.message, 'err');
-  }
-}
-
 let _wfRuns = [];
 async function loadWorkflowRuns() {
   const runsListEl = document.getElementById('wf-runs-list');
@@ -11541,7 +11370,7 @@ function pbRenderPalette() {
         <span class="pb-cat-arrow">▸</span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${catColor};margin-right:5px;vertical-align:middle;flex-shrink:0"></span>${cat}
       </div>
       <div class="pb-cat-body ${cat === cats[0] ? '' : 'collapsed'}">
-        ${nodes.map((n,i) => `<button class="pb-node-btn" onclick="pbAddNode('${esc(n.type)}',PB_NODE_DEFS.filter(d=>d.cat==='${cat}')[${i}])" title="${esc(n.type)}${n.defaultConfig ? ' (op: '+n.defaultConfig.operation+')' : ''}">
+        ${nodes.map((n,i) => `<button class="pb-node-btn" onclick="pbAddNode('${esc(String(n.type).replace(/['\\]/g,'\\$&'))}',PB_NODE_DEFS.filter(d=>d.cat==='${cat}')[${i}])" title="${esc(n.type)}${n.defaultConfig ? ' (op: '+n.defaultConfig.operation+')' : ''}">
           <span class="pb-node-icon">${n.icon}</span>${esc(n.label)}
         </button>`).join('')}
       </div>
@@ -11618,13 +11447,13 @@ function pbRenderCanvas() {
       <div class="pb-node-hdr">
         <span class="pb-node-type-icon">${def.icon}</span>
         <span class="pb-node-title" title="${esc(node.type)}">${esc(node.name || node.type)}</span>
-        <button class="pb-node-del" onclick="pbDeleteNode('${esc(node.id)}')" title="Remove">✕</button>
+        <button class="pb-node-del" onclick="pbDeleteNode('${esc(String(node.id).replace(/['\\]/g,'\\$&'))}')" title="Remove">✕</button>
       </div>
       <div class="pb-node-body">
         ${st ? `<div class="pb-node-status"><div class="pb-ns-dot ${st}"></div><span style="color:${st==='running'?'var(--accent)':st==='completed'?'var(--green)':'var(--red)'}">${st}</span></div>` : ''}
         <div style="font-size:10px;color:var(--text-xs)">${esc(node.type)}</div>
       </div>
-      <button class="pb-node-conn-btn" title="Connect to another node" onclick="pbStartConnect('${esc(node.id)}',event)">→</button>
+      <button class="pb-node-conn-btn" title="Connect to another node" onclick="pbStartConnect('${esc(String(node.id).replace(/['\\]/g,'\\$&'))}',event)">→</button>
     `;
     card.addEventListener('mousedown', (e) => pbDragStart(node.id, e));
     card.addEventListener('click', (e) => { if (!e.defaultPrevented) pbSelectNode(node.id); });
@@ -12268,12 +12097,12 @@ function mgRenderAnalyzeButtons() {
   const cEl = document.getElementById('mg-client-btns');
   const sEl = document.getElementById('mg-server-btns');
   cEl.innerHTML = MG_CLIENT_ANALYSES.map(a => `
-    <div class="mg-analyze-btn" id="mg-abtn-${esc(a.id)}" onclick="mgRunClient('${esc(a.id)}')">
+    <div class="mg-analyze-btn" id="mg-abtn-${esc(a.id)}" onclick="mgRunClient('${esc(String(a.id).replace(/['\\]/g,'\\$&'))}')">
       <div class="mab-name">${esc(a.label)}</div>
       <div class="mab-desc">${esc(a.desc)}</div>
     </div>`).join('');
   sEl.innerHTML = MG_SERVER_ANALYSES.map(a => `
-    <div class="mg-analyze-btn mg-server" id="mg-abtn-${esc(a.id)}" onclick="mgRunServer('${esc(a.id)}')">
+    <div class="mg-analyze-btn mg-server" id="mg-abtn-${esc(a.id)}" onclick="mgRunServer('${esc(String(a.id).replace(/['\\]/g,'\\$&'))}')">
       <div class="mab-name mg">${esc(a.label)}</div>
       <div class="mab-desc">${esc(a.desc)}</div>
     </div>`).join('');
@@ -12964,7 +12793,7 @@ function mgRenderExport() {
     <div class="mg-export-card">
       <div class="mec-name">${esc(x.name)}</div>
       <div class="mec-desc">${esc(x.desc)}</div>
-      <button class="btn" onclick="mgExport('${esc(x.id)}')" style="margin-top:auto">EXPORT</button>
+      <button class="btn" onclick="mgExport('${esc(String(x.id).replace(/['\\]/g,'\\$&'))}')" style="margin-top:auto">EXPORT</button>
     </div>`).join('');
 }
 
@@ -13241,7 +13070,7 @@ function mgRenderWiki() {
   const types = [...new Set(nodes.map(n => n.type || n.kind || 'unknown'))].sort();
   const pillsEl = document.getElementById('mg-wiki-pills');
   pillsEl.innerHTML = `<span class="mg-pill active" data-type="all" onclick="mgWikiFilterType('all')">All</span>` +
-    types.map(t => `<span class="mg-pill" data-type="${esc(t)}" onclick="mgWikiFilterType('${esc(t)}')">${esc(t)}</span>`).join('');
+    types.map(t => `<span class="mg-pill" data-type="${esc(t)}" onclick="mgWikiFilterType('${esc(String(t).replace(/['\\]/g,'\\$&'))}')">${esc(t)}</span>`).join('');
 
   mgRenderWikiList('');
 }
@@ -14247,64 +14076,6 @@ async function mmRenderGraph(body) {
   } catch (e) { body.innerHTML = '<div class="empty">Failed: ' + esc(e.message) + '</div>'; }
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   MONOAGENT TAB
-   ═══════════════════════════════════════════════════════════════ */
-const MA_STATE_COLOR = { completed:'#22c55e', failed:'#ef4444', running:'#3b82f6', pending:'#a3a3a3' };
-let _maWorkflows = [], _maActions = [];
-
-function maSwitchTab(tab) {
-  document.querySelectorAll('[data-matab]').forEach(b => b.classList.toggle('active', b.dataset.matab === tab));
-  document.querySelectorAll('#view-monoagent .wf-pane').forEach(p => p.classList.toggle('active', p.id === 'ma-tab-' + tab));
-}
-
-async function loadMonoagentData() {
-  document.getElementById('ma-workflows-list').innerHTML = '<div class="loading-txt">Loading…</div>';
-  document.getElementById('ma-history-list').innerHTML = '<div class="loading-txt">Loading…</div>';
-  try {
-    const data = await apiFetch('/api/monoagent/data');
-    _maWorkflows = Array.isArray(data.workflows) ? data.workflows : [];
-    _maActions = Array.isArray(data.actions) ? data.actions : [];
-  } catch (e) {
-    _maWorkflows = []; _maActions = [];
-  }
-  const bdg = document.getElementById('bdg-monoagent');
-  if (bdg) bdg.textContent = _maWorkflows.length || '—';
-  renderMonoagentWorkflows();
-  renderMonoagentHistory();
-}
-
-function renderMonoagentWorkflows() {
-  const el = document.getElementById('ma-workflows-list');
-  if (!el) return;
-  if (!_maWorkflows.length) { el.innerHTML = '<div class="empty">No monoagent workflows found. Create one with: <code>monoagent workflow create</code></div>'; return; }
-  el.innerHTML = _maWorkflows.map(w => `<div class="m-card" style="margin-bottom:10px;padding:12px 14px">
-    <div style="display:flex;justify-content:space-between;align-items:center">
-      <span style="font-weight:600;color:var(--text-hi);font-family:var(--mono);font-size:13px">${esc(w.name||w.id||'—')}</span>
-      <span style="font-size:11px;color:var(--text-lo)">${esc(w.id||'')}</span>
-    </div>
-    ${w.description ? `<div style="font-size:12px;color:var(--text-lo);margin-top:4px">${esc(w.description)}</div>` : ''}
-    <div style="font-size:11px;color:var(--text-xs);margin-top:6px">${(w.nodes||[]).length} nodes · trigger: ${esc(w.trigger||'manual')}</div>
-  </div>`).join('');
-}
-
-function renderMonoagentHistory() {
-  const el = document.getElementById('ma-history-list');
-  if (!el) return;
-  if (!_maActions.length) { el.innerHTML = '<div class="empty">No action history yet.</div>'; return; }
-  el.innerHTML = _maActions.map(a => {
-    const color = MA_STATE_COLOR[a.status] || MA_STATE_COLOR.pending;
-    const ts = a.createdAt ? new Date(a.createdAt).toLocaleString() : '—';
-    return `<div class="m-card" style="margin-bottom:8px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center">
-      <div>
-        <span style="font-weight:600;color:var(--text-hi);font-size:12px;font-family:var(--mono)">${esc(a.type||a.action||'—')}</span>
-        <span style="font-size:11px;color:var(--text-lo);margin-left:8px">${esc(a.platform||'')}</span>
-        <div style="font-size:11px;color:var(--text-xs);margin-top:2px">${ts}</div>
-      </div>
-      <span style="font-size:11px;font-weight:600;color:${color}">${esc(a.status||'—')}</span>
-    </div>`;
-  }).join('');
-}
 </script>
 </body>
 </html>