monomind 2.0.3 → 2.1.3

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

@@ -428,6 +428,18 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 /* SVG org chart */
 .org-chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
 .org-chart-svg { width: 100%; display: block; }
+.v2-bubble-inner {
+  background: oklch(18% 0.01 55 / 0.95);
+  border: 1px solid oklch(72% 0.18 75 / 0.4);
+  border-radius: 8px;
+  padding: 4px 8px;
+  font: 500 9.5px 'Inter', system-ui, sans-serif;
+  color: oklch(88% 0.01 75);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .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); }
 
@@ -2468,7 +2480,7 @@ function switchView(v, { updateHash = true } = {}) {
   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' };
   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', global: 'Global Feed', 'global-loops': 'Global Loops', 'global-tokens': 'Global Tokens' };
+  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' };
   document.title = `monomind · ${PROJECT} · ${VIEW_LABELS[v] || v}`;
   if (updateHash) _pushHash();
   // Projects always re-fetches so onclick paths in cards stay current
@@ -4448,9 +4460,9 @@ function appendChatViewEvent(ev, animate) {
   const atBottom = !animate || (feed.scrollHeight - feed.scrollTop - feed.clientHeight < 80);
   const ts = ev.ts ? new Date(ev.ts).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'}) : '';
   if (ev.type === 'run:start') {
-    el = mkCVSys('▶ Run started' + (ev.goal ? ': ' + esc(ev.goal.slice(0,80)) : '') + (ev.bossRole ? ' · boss: ' + esc(ev.bossRole) : ''), ts);
+    el = mkCVSys('▶ Run started' + (ev.goal ? ': ' + (ev.goal.slice(0,80)) : '') + (ev.bossRole ? ' · boss: ' + (ev.bossRole) : ''), ts);
   } else if (ev.type === 'run:cycle:complete') {
-    el = mkCVSys('◎ Cycle complete' + (ev.pending != null ? ' · ' + esc(String(ev.pending)) + ' tasks pending' : ''), ts);
+    el = mkCVSys('◎ Cycle complete' + (ev.pending != null ? ' · ' + (String(ev.pending)) + ' tasks pending' : ''), ts);
   } else if (ev.type === 'intercom') {
     el = mkCVIntercom(ev.from, ev.to, ev.msg || '', ts);
   } else if (ev.type === 'org:comms') {
@@ -4459,15 +4471,15 @@ function appendChatViewEvent(ev, animate) {
     if (ev.to && ev.to !== 'all') el = mkCVIntercom(_cvCommsFrom, ev.to, ev.msg || '', ts);
     else el = mkCVAgent(_cvCommsFrom, ev.msg || '', ts, 'org:comms');
   } else if (ev.type === 'org:agent:online') {
-    el = mkCVSys('[' + esc(ev.org || '') + '] ' + esc(ev.role || ev.title || '?') + ' online' + (ev.title && ev.role && ev.title !== ev.role ? ' (' + esc(ev.title) + ')' : ''), ts);
+    el = mkCVSys('[' + (ev.org || '') + '] ' + (ev.role || ev.title || '?') + ' online' + (ev.title && ev.role && ev.title !== ev.role ? ' (' + (ev.title) + ')' : ''), ts);
   } else if (ev.type === 'org:checkpoint') {
-    el = mkCVSys('[checkpoint] ' + esc(ev.summary || ev.progress || ev.msg || ''), ts);
+    el = mkCVSys('[checkpoint] ' + (ev.summary || ev.progress || ev.msg || ''), ts);
   } else if (ev.type === 'org:start') {
-    el = mkCVSys('[org:start] ' + esc(ev.org || ''), ts);
+    el = mkCVSys('[org:start] ' + (ev.org || ''), ts);
   } else if (ev.type === 'run:complete') {
-    el = mkCVSys('■ Run complete' + (ev.status ? ' [' + esc(ev.status) + ']' : ''), ts);
+    el = mkCVSys('■ Run complete' + (ev.status ? ' [' + (ev.status) + ']' : ''), ts);
   } else if (ev.type === 'org:complete') {
-    el = mkCVSys('■ Org complete' + (ev.org ? ' — ' + esc(ev.org) : ''), ts);
+    el = mkCVSys('■ Org complete' + (ev.org ? ' — ' + (ev.org) : ''), ts);
   } else if (ev.type === 'agent:result') {
     el = mkCVResult(ev.agent || ev.from || '?', ev.result || ev.msg || ev.message || ev.summary || '', ts);
   } else if (ev.type === 'agent:spawn') {
@@ -4487,36 +4499,36 @@ function appendChatViewEvent(ev, animate) {
     const _auAgent = ev.role || ev.agentType || '?';
     const _auCost = ev.cost_usd != null ? '$' + Number(ev.cost_usd).toFixed(4) : '';
     const _auTok = (ev.tokens_in || ev.tokens_out) ? ((ev.tokens_in||0)).toLocaleString() + '↑ ' + ((ev.tokens_out||0)).toLocaleString() + '↓' : '';
-    el = mkCVSys('◈ ' + esc(_auAgent) + (_auTok ? ' · ' + _auTok : '') + (_auCost ? ' · ' + _auCost : ''), ts);
+    el = mkCVSys('◈ ' + (_auAgent) + (_auTok ? ' · ' + _auTok : '') + (_auCost ? ' · ' + _auCost : ''), ts);
   } else if (ev.type === 'agent:message') {
     el = mkCVAgent(ev.agent || ev.name || ev.role || '?', ev.msg || ev.message || ev.content || '', ts, ev.type);
   } else if (ev.type === 'session:start') {
-    el = mkCVSys('Session started' + (ev.prompt ? ': ' + esc(ev.prompt.slice(0,80)) : ''), ts);
+    el = mkCVSys('Session started' + (ev.prompt ? ': ' + (ev.prompt.slice(0,80)) : ''), ts);
   } else if (ev.type === 'session:complete') {
-    el = mkCVSys('Session complete' + (ev.status ? ' — ' + esc(ev.status) : ''), ts);
+    el = mkCVSys('Session complete' + (ev.status ? ' — ' + (ev.status) : ''), ts);
   } else if (ev.type === 'domain:dispatch') {
-    el = mkCVSys('→ ' + esc(ev.domain || '') + (ev.cmd ? ': ' + esc(ev.cmd.slice(0,80)) : ''), ts);
+    el = mkCVSys('→ ' + (ev.domain || '') + (ev.cmd ? ': ' + (ev.cmd.slice(0,80)) : ''), ts);
   } else if (ev.type === 'domain:complete') {
-    el = mkCVSys('✓ ' + esc(ev.domain || '') + (ev.status ? ' [' + esc(ev.status) + ']' : ''), ts);
+    el = mkCVSys('✓ ' + (ev.domain || '') + (ev.status ? ' [' + (ev.status) + ']' : ''), ts);
   } else if (ev.type === 'loop:start') {
-    el = mkCVSys('◎ Loop: ' + esc(ev.command || '') + (ev.repeat ? ' ×' + esc(String(ev.repeat)) : ''), ts);
+    el = mkCVSys('◎ Loop: ' + (ev.command || '') + (ev.repeat ? ' ×' + (String(ev.repeat)) : ''), ts);
     if (currentView === 'loops') renderLoops();
   } else if (ev.type === 'loop:complete') {
-    el = mkCVSys('■ Loop done: ' + esc(ev.command || '') + (ev.ranReps ? ' (' + esc(String(ev.ranReps)) + ' runs)' : ''), ts);
+    el = mkCVSys('■ Loop done: ' + (ev.command || '') + (ev.ranReps ? ' (' + (String(ev.ranReps)) + ' runs)' : ''), ts);
     if (currentView === 'loops') renderLoops();
   } else if (ev.type === 'loop:tick') {
     const _tickLbl = ev.rep != null
-      ? 'rep ' + esc(String(ev.rep)) + ' done' + (ev.wait != null ? ' → next in ' + esc(String(ev.wait)) + 's' : '')
-      : esc(ev.command || ev.loopId || ev.id || '');
+      ? 'rep ' + (String(ev.rep)) + ' done' + (ev.wait != null ? ' → next in ' + (String(ev.wait)) + 's' : '')
+      : (ev.command || ev.loopId || ev.id || '');
     el = mkCVSys('◷ ' + _tickLbl, ts);
     el.dataset.evType = 'loop:tick';
     if (feed.lastElementChild?.dataset?.evType === 'loop:tick') feed.lastElementChild.remove();
     if (currentView === 'loops') renderLoops();
   } else if (ev.type === 'loop:hil' || ev.type === 'loop:hil:waiting') {
-    el = mkCVSys('⚠ Loop HIL: ' + esc(ev.command || ev.loopId || ev.id || ''), ts);
+    el = mkCVSys('⚠ Loop HIL: ' + (ev.command || ev.loopId || ev.id || ''), ts);
     if (currentView === 'loops') renderLoops();
   } else if (ev.type === 'loop:hil:resolved') {
-    el = mkCVSys('✓ Loop HIL resolved: ' + esc(ev.loopId || ev.command || ''), ts);
+    el = mkCVSys('✓ Loop HIL resolved: ' + (ev.loopId || ev.command || ''), ts);
     if (currentView === 'loops') renderLoops();
   } else if (ev.type === 'file:write') {
     el = mkCVFileCard(ev.name || ev.path || '?', ev.path || '', ev.size || 0, ts);
@@ -4527,12 +4539,12 @@ function appendChatViewEvent(ev, animate) {
   } else if (ev.type === 'agent:browse') {
     el = mkCVTool('BROWSE', ev.payload || ev.url || '', '', 'oklch(65% 0.15 190)', ts);
   } else if (ev.type === 'org:agent:offline') {
-    el = mkCVSys('◌ ' + esc(ev.title || ev.role || '?') + ' offline' + (ev.org ? ' [' + esc(ev.org) + ']' : ''), ts);
+    el = mkCVSys('◌ ' + (ev.title || ev.role || '?') + ' offline' + (ev.org ? ' [' + (ev.org) + ']' : ''), ts);
   } else if (ev.type === 'org:error') {
-    el = mkCVSys('⚠ Error: ' + esc(ev.msg || ev.error || ev.message || ''), ts);
+    el = mkCVSys('⚠ Error: ' + (ev.msg || ev.error || ev.message || ''), ts);
     el.classList.add('cv-err');
   } else {
-    el = mkCVSys(esc(ev.type || 'event'), ts);
+    el = mkCVSys((ev.type || 'event'), ts);
   }
   if (animate) el.classList.add('cv-new');
   feed.appendChild(el);
@@ -4671,10 +4683,10 @@ function mkCVTool(tag, cmd, output, color, ts) {
   return d;
 }
 
-function mkCVSys(html, ts) {
+function mkCVSys(text, ts) {
   const d = document.createElement('div');
   d.className = 'cv-msg cv-sys';
-  d.innerHTML = `<div class="cv-bub"><span class="cv-etype">SYS</span><span class="cv-text">${html}</span><span class="cv-ts">${ts}</span></div>`;
+  d.innerHTML = `<div class="cv-bub"><span class="cv-etype">SYS</span><span class="cv-text">${esc(text)}</span><span class="cv-ts">${ts}</span></div>`;
   return d;
 }
 
@@ -5786,6 +5798,7 @@ let _v2SelOrg = null;
 let _v2OrgData = null;
 let _v2OrgTab = 'chart';
 const _v2OrgEventLog = {};
+let _v2ChartLayout = { pos: {}, edgeIdByPair: new Map() };
 
 async function renderOrgs() {
   try {
@@ -6204,6 +6217,9 @@ function v2RenderOrgChart() {
       <image href="${avatarSrc}" x="${-avR}" y="${-R + 2}" width="${avR * 2}" height="${avR * 2}" clip-path="url(#${nodeClipIds[i]})" preserveAspectRatio="xMidYMid meet" onerror="this.setAttribute('href','data/avatars/coder.svg')"/>
       <text text-anchor="middle" y="${nameY}" font-size="9" font-weight="${leader?'600':'500'}" font-family="'Inter',system-ui,sans-serif" fill="${color}">${esc(nameText)}</text>
       ${subTypeText ? `<text text-anchor="middle" y="${+nameY + 11}" font-size="7.5" font-family="'Inter',system-ui,sans-serif" fill="oklch(48% 0.005 75)">${esc(subTypeText)}</text>` : ''}
+      <foreignObject class="v2-activity-bubble" data-bubble-for="${esc(role.id)}" x="-70" y="${-R - 46}" width="140" height="34" style="overflow:visible;pointer-events:none;visibility:hidden;opacity:0">
+        <div class="v2-bubble-inner" xmlns="http://www.w3.org/1999/xhtml"></div>
+      </foreignObject>
     </g>`;
   });
 
@@ -6230,6 +6246,7 @@ function v2RenderOrgChart() {
         <g id="v2oc-edges">${edgesHTML}</g>
         <g id="v2oc-nodes">${nodesHTML}</g>
         <g id="v2oc-particles" opacity="${isRunning ? 1 : 0}">${particlesHTML}</g>
+        <g id="v2oc-letters"></g>
       </svg>
     </div>
     <div class="org-chart-legend" style="margin-top:10px">
@@ -6262,8 +6279,158 @@ function v2RenderOrgChart() {
       el.style.opacity = '0';
     });
   }
+
+  const edgeIdByPair = new Map();
+  comms.forEach((edge, ei) => {
+    if (edge.from === edge.to) return;
+    edgeIdByPair.set(edge.from + '->' + edge.to, 'v2ep' + ei);
+  });
+  _v2ChartLayout = { pos, edgeIdByPair };
+  v2OrgActivityReset();
+}
+
+function _v2RoleName(id, roles) {
+  const r = (roles || []).find(x => x.id === id);
+  return r ? (r.name || r.title || r.id) : id;
+}
+
+function v2DeriveActivityText(ev, roles) {
+  if (!ev || !ev.from) return null;
+  const type = ev.type || '';
+  if (type === 'org:tool') return ev.tool ? ('running ' + ev.tool) : 'active';
+  if (type === 'org:checkpoint') {
+    const p = ev.progress || '';
+    return p ? (p.length > 40 ? p.slice(0, 39) + '...' : p) : 'active';
+  }
+  if (type === 'org:comms') {
+    if (!ev.to || ev.to === 'all') return 'broadcasting';
+    return 'messaging ' + _v2RoleName(ev.to, roles);
+  }
+  if (type === 'org:artifact') {
+    const label = ev.artifact && ev.artifact.label;
+    return label ? ('writing ' + label) : 'active';
+  }
+  return 'active';
+}
+
+function v2DeriveLetterTarget(ev, roles) {
+  if (!ev || !ev.from) return null;
+  const type = ev.type || '';
+  if (type === 'org:comms') {
+    if (!ev.to || ev.to === 'all') return null;
+    return { from: ev.from, to: ev.to };
+  }
+  if (type === 'org:checkpoint' || type === 'org:artifact') {
+    const leader = (roles || []).find(_v2OrgIsLeader);
+    if (!leader || leader.id === ev.from) return null;
+    return { from: ev.from, to: leader.id };
+  }
+  return null;
+}
+
+let _v2LetterBurst = { lastTs: 0, count: 0 };
+
+function v2SpawnLetter(fromId, toId) {
+  const layout = _v2ChartLayout;
+  const fp = layout.pos[fromId], tp = layout.pos[toId];
+  if (!fp || !tp) return;
+  const group = document.getElementById('v2oc-letters');
+  if (!group) return;
+
+  const now = Date.now();
+  if (now - _v2LetterBurst.lastTs < 150) _v2LetterBurst.count++;
+  else _v2LetterBurst.count = 0;
+  _v2LetterBurst.lastTs = now;
+  const delay = (_v2LetterBurst.count * 0.08).toFixed(2);
+
+  const svgNS = 'http://www.w3.org/2000/svg';
+  let pathId = layout.edgeIdByPair.get(fromId + '->' + toId);
+  let synthesizedPath = null;
+  if (!pathId) {
+    pathId = 'v2lp' + Math.random().toString(36).slice(2, 9);
+    synthesizedPath = document.createElementNS(svgNS, 'path');
+    synthesizedPath.setAttribute('id', pathId);
+    synthesizedPath.setAttribute('d', 'M' + fp.x + ',' + fp.y + ' L' + tp.x + ',' + tp.y);
+    synthesizedPath.setAttribute('fill', 'none');
+    synthesizedPath.setAttribute('stroke', 'none');
+    document.getElementById('v2oc-edges').appendChild(synthesizedPath);
+  }
+
+  const letter = document.createElementNS(svgNS, 'g');
+  const circ = document.createElementNS(svgNS, 'circle');
+  circ.setAttribute('r', '6');
+  circ.setAttribute('fill', 'oklch(85% 0.16 85)');
+  circ.setAttribute('stroke', 'oklch(30% 0.02 55)');
+  circ.setAttribute('stroke-width', '1');
+  letter.appendChild(circ);
+  const flap = document.createElementNS(svgNS, 'path');
+  flap.setAttribute('d', 'M-3.5,-2 L0,1 L3.5,-2');
+  flap.setAttribute('stroke', 'oklch(30% 0.02 55)');
+  flap.setAttribute('stroke-width', '1');
+  flap.setAttribute('fill', 'none');
+  letter.appendChild(flap);
+
+  const anim = document.createElementNS(svgNS, 'animateMotion');
+  anim.setAttribute('dur', '0.8s');
+  anim.setAttribute('begin', delay + 's');
+  anim.setAttribute('fill', 'freeze');
+  const mpath = document.createElementNS(svgNS, 'mpath');
+  mpath.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + pathId);
+  anim.appendChild(mpath);
+  letter.appendChild(anim);
+  group.appendChild(letter);
+
+  if (typeof gsap !== 'undefined') {
+    gsap.fromTo(letter, { scale: 0, autoAlpha: 0 }, { scale: 1, autoAlpha: 1, duration: 0.15, delay: Number(delay), ease: 'back.out(1.7)' });
+  }
+
+  const totalMs = (Number(delay) + 0.8) * 1000;
+  setTimeout(function() {
+    function cleanup() {
+      letter.remove();
+      if (synthesizedPath) synthesizedPath.remove();
+    }
+    if (typeof gsap !== 'undefined') {
+      gsap.to(letter, { autoAlpha: 0, duration: 0.15, onComplete: cleanup });
+    } else cleanup();
+  }, totalMs);
+}
+
+let _v2BubbleTimers = new Map();
+
+function v2OrgActivityReset() {
+  _v2BubbleTimers.forEach(t => clearTimeout(t));
+  _v2BubbleTimers = new Map();
 }
 
+function v2ShowActivityBubble(roleId, text) {
+  const fo = document.querySelector('.v2-activity-bubble[data-bubble-for="' + CSS.escape(roleId) + '"]');
+  if (!fo) return;
+  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%',
+    });
+  } else {
+    fo.style.visibility = 'visible';
+    fo.style.opacity = '1';
+  }
+  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';
+    }
+    _v2BubbleTimers.delete(roleId);
+  }, 5000));
+}
 
 // ── in-place running dot updater (avoids full re-render + GSAP flicker on SSE events) ──
 function v2UpdateChartRunningDots() {
@@ -7940,17 +8107,28 @@ window.odtChatSelectAgent = function(name) {
   });
   const feed = document.getElementById('odt-chat-feed');
   const emptyEl = document.getElementById('odt-chat-empty');
-  const sess = _odtChatSessions.find(s => s.id === _odtChatCurrentId);
   feed.querySelectorAll('.cv-msg').forEach(e => e.remove());
-  if (!sess) { if (emptyEl) emptyEl.style.display = 'block'; return; }
-  const visible = (sess.events || []).filter(ev => _odtChatAgentMatches(ev));
+  const id = _odtChatCurrentId;
+  let events = null;
+  let sess = null;
+  if (id && id.startsWith('rgrp:') && _odtRunGroups[id]) {
+    events = _odtGetMergedRunGroupEvents(_odtRunGroups[id]);
+  } else if (id && id.startsWith('grp:') && _odtSessionGroups[id]) {
+    events = _odtGetMergedGroupEvents(_odtSessionGroups[id]);
+  } else {
+    sess = _odtChatSessions.find(s => s.id === id);
+    events = sess ? (sess.events || []) : null;
+  }
+  if (events === null) { if (emptyEl) { emptyEl.style.display = 'block'; emptyEl.textContent = 'Select a session to see agent communications.'; } return; }
+  const visible = events.filter(ev => _odtChatAgentMatches(ev));
   if (!visible.length) {
     if (emptyEl) { emptyEl.style.display = 'block'; emptyEl.textContent = name === 'all' ? 'No events.' : `${name} was online in this run but sent no messages.`; }
   } else {
     if (emptyEl) emptyEl.style.display = 'none';
     visible.forEach(ev => _odtAppendEvent(ev, false));
+    if (!feed.querySelector('.cv-msg') && emptyEl) { emptyEl.style.display = 'block'; emptyEl.textContent = 'No displayable events.'; }
   }
-  if (!sess._isOrgRun) {
+  if (sess && !sess._isOrgRun) {
     const _linkedRunId = 'run-' + (sess.id || '').replace(/^mm-/, '');
     const _linkedRun = _odtChatSessions.find(s => s._isOrgRun && s.id === _linkedRunId);
     if (_linkedRun) {
@@ -7976,17 +8154,25 @@ window.odtChatSelectAgent = function(name) {
 // Chat tab render mode (Summary/Detailed/Raw) — persists to localStorage
 let _odtChatMode = localStorage.getItem('odt-chat-mode') || 'detailed';
 
-function setOdtChatMode(mode) {
-  _odtChatMode = mode;
-  localStorage.setItem('odt-chat-mode', mode);
+function _odtApplyChatModeUI(mode) {
   document.querySelectorAll('.odt-mode-btn').forEach(b => b.classList.remove('active'));
   const btn = document.getElementById('odt-mode-' + mode);
   if (btn) btn.classList.add('active');
 }
 
+function setOdtChatMode(mode) {
+  _odtChatMode = mode;
+  localStorage.setItem('odt-chat-mode', mode);
+  _odtApplyChatModeUI(mode);
+  // Re-render the current selection so the mode change is reflected immediately —
+  // previously this only affected events appended after the switch.
+  if (_odtChatCurrentId) window.odtChatSelectAgent(_odtChatCurrentAgent);
+}
+
 function initOdtChatMode() {
   const saved = localStorage.getItem('odt-chat-mode') || 'detailed';
-  setOdtChatMode(saved);
+  _odtChatMode = saved;
+  _odtApplyChatModeUI(saved);
 }
 
 function _odtAppendEvent(ev, animate) {
@@ -8014,18 +8200,18 @@ function _odtAppendEvent(ev, animate) {
   const ts = ev.ts ? new Date(ev.ts).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'}) : '';
   let el;
   if (ev.type === 'run:start') {
-    el = mkCVSys('▶ Run started' + (ev.goal ? ': ' + esc(ev.goal.slice(0,80)) : '') + (ev.bossRole ? ' · boss: ' + esc(ev.bossRole) : ''), ts);
+    el = mkCVSys('▶ Run started' + (ev.goal ? ': ' + (ev.goal.slice(0,80)) : '') + (ev.bossRole ? ' · boss: ' + (ev.bossRole) : ''), ts);
   } else if (ev.type === 'run:cycle:complete') {
-    el = mkCVSys('◎ Cycle complete' + (ev.pending != null ? ' · ' + esc(String(ev.pending)) + ' tasks pending' : ''), ts);
+    el = mkCVSys('◎ Cycle complete' + (ev.pending != null ? ' · ' + (String(ev.pending)) + ' tasks pending' : ''), ts);
   } else if (ev.type === 'run:complete') {
-    el = mkCVSys('■ Run complete' + (ev.status ? ' [' + esc(ev.status) + ']' : ''), ts);
+    el = mkCVSys('■ Run complete' + (ev.status ? ' [' + (ev.status) + ']' : ''), ts);
   } else if (ev.type === 'org:comms') {
     // Some older runs use ev.role instead of ev.from — normalise before rendering
     const _commsFrom = ev.from || ev.role || 'boss';
     if (ev.to && ev.to !== 'all') el = mkCVIntercom(_commsFrom, ev.to, ev.msg || '', ts);
     else el = mkCVAgent(_commsFrom, ev.msg || '', ts, 'org:comms');
   } else if (ev.type === 'org:agent:online') {
-    el = mkCVSys('◉ ' + esc(ev.title || ev.role || '?') + ' online', ts);
+    el = mkCVSys('◉ ' + (ev.title || ev.role || '?') + ' online', ts);
   } else if (ev.type === 'org:checkpoint') {
     el = mkCVAgent('boss', ev.summary || ev.progress || ev.msg || '', ts, 'org:checkpoint');
   } else if (ev.type === 'org:start' || ev.type === 'org:complete') {
@@ -8041,32 +8227,32 @@ function _odtAppendEvent(ev, animate) {
   } else if (ev.type === 'agent:message') {
     el = mkCVAgent(ev.agent || ev.name || ev.role || '?', ev.msg || ev.message || ev.content || '', ts, ev.type);
   } else if (ev.type === 'session:start') {
-    el = mkCVSys('▶ ' + esc((ev.prompt || '').replace(/^running org:\s*/i,'').slice(0,80) || 'Session started'), ts);
+    el = mkCVSys('▶ ' + ((ev.prompt || '').replace(/^running org:\s*/i,'').slice(0,80) || 'Session started'), ts);
   } else if (ev.type === 'session:complete') {
-    el = mkCVSys('■ Complete' + (ev.status ? ' — ' + esc(ev.status) : ''), ts);
+    el = mkCVSys('■ Complete' + (ev.status ? ' — ' + (ev.status) : ''), ts);
   } else if (ev.type === 'domain:dispatch') {
-    el = mkCVSys('→ ' + esc(ev.domain || '') + (ev.cmd ? ': ' + esc(ev.cmd.slice(0,80)) : ''), ts);
+    el = mkCVSys('→ ' + (ev.domain || '') + (ev.cmd ? ': ' + (ev.cmd.slice(0,80)) : ''), ts);
   } else if (ev.type === 'domain:complete') {
-    el = mkCVSys('✓ ' + esc(ev.domain || '') + (ev.status ? ' [' + esc(ev.status) + ']' : ''), ts);
+    el = mkCVSys('✓ ' + (ev.domain || '') + (ev.status ? ' [' + (ev.status) + ']' : ''), ts);
   } else if (ev.type === 'loop:start') {
-    el = mkCVSys('Loop: ' + esc(ev.command || ''), ts);
+    el = mkCVSys('Loop: ' + (ev.command || ''), ts);
   } else if (ev.type === 'loop:complete') {
-    el = mkCVSys('Loop done: ' + esc(ev.command || '') + (ev.ranReps ? ' (' + ev.ranReps + ' runs)' : ''), ts);
+    el = mkCVSys('Loop done: ' + (ev.command || '') + (ev.ranReps ? ' (' + ev.ranReps + ' runs)' : ''), ts);
   } else if (ev.type === 'loop:tick') {
     const _trep = ev.rep ?? ev.fromRep;
     const _tnext = ev.nextRep ?? ev.toRep;
     const tickLabel = _trep != null
-      ? 'rep ' + esc(String(_trep)) + ' done' + (_tnext != null ? ' → rep ' + esc(String(_tnext)) + (ev.wait != null ? ' in ' + esc(String(ev.wait)) + 's' : '') : '')
-      : esc(ev.command || ev.loopId || '');
+      ? 'rep ' + (String(_trep)) + ' done' + (_tnext != null ? ' → rep ' + (String(_tnext)) + (ev.wait != null ? ' in ' + (String(ev.wait)) + 's' : '') : '')
+      : (ev.command || ev.loopId || '');
     el = mkCVSys('◷ ' + tickLabel, ts);
     el.dataset.evType = 'loop:tick';
     // Collapse: replace the previous loop:tick if it's the last element — prevents the
     // feed from flooding with one entry per rep in long-running loops (e.g. --repeat 9999).
     if (feed.lastElementChild?.dataset?.evType === 'loop:tick') feed.lastElementChild.remove();
   } else if (ev.type === 'loop:hil' || ev.type === 'loop:hil:waiting') {
-    el = mkCVSys('⚠ Loop HIL: ' + esc(ev.command || ev.loopId || ''), ts);
+    el = mkCVSys('⚠ Loop HIL: ' + (ev.command || ev.loopId || ''), ts);
   } else if (ev.type === 'loop:hil:resolved') {
-    el = mkCVSys('✓ Loop HIL resolved: ' + esc(ev.loopId || ''), ts);
+    el = mkCVSys('✓ Loop HIL resolved: ' + (ev.loopId || ''), ts);
   } else if (ev.type === 'agent:edit' || ev.type === 'agent:write') {
     el = mkCVTool('EDIT', ev.payload || ev.file || ev.path || '', '', 'oklch(65% 0.20 270)', ts);
   } else if (ev.type === 'agent:bash') {
@@ -8074,15 +8260,15 @@ function _odtAppendEvent(ev, animate) {
   } else if (ev.type === 'agent:browse') {
     el = mkCVTool('BROWSE', ev.payload || ev.url || '', '', 'oklch(65% 0.15 190)', ts);
   } else if (ev.type === 'org:error') {
-    el = mkCVSys('⚠ Error: ' + esc(ev.msg || ev.error || ev.message || ''), ts);
+    el = mkCVSys('⚠ Error: ' + (ev.msg || ev.error || ev.message || ''), ts);
     el.classList.add('cv-err');
   } else if (ev.type === 'org:agent:offline') {
-    el = mkCVSys('◌ ' + esc(ev.title || ev.role || '?') + ' offline', ts);
+    el = mkCVSys('◌ ' + (ev.title || ev.role || '?') + ' offline', ts);
   } else if (ev.type === 'user:message') {
     el = mkCVAgent('you', ev.text || ev.msg || ev.message || '', ts, 'user:message');
     el.classList.add('cv-user-msg');
   } else {
-    el = mkCVSys(esc(ev.type || 'event'), ts);
+    el = mkCVSys((ev.type || 'event'), ts);
   }
   if (animate) el.classList.add('cv-new');
   feed.appendChild(el);
@@ -8146,6 +8332,14 @@ function _odtHandleLiveEvent(ev) {
     const _arr = [..._odtChatSeenKeys];
     _odtChatSeenKeys = new Set(_arr.slice(1000));
   }
+  // Wire activity bubble for org chart visualization
+  if (ev && ev.org === _v2SelOrg) {
+    const roles = Array.isArray(_v2OrgData && _v2OrgData.roles) ? _v2OrgData.roles : [];
+    const text = v2DeriveActivityText(ev, roles);
+    if (text && ev.from) v2ShowActivityBubble(ev.from, text);
+    const letterTarget = v2DeriveLetterTarget(ev, roles);
+    if (letterTarget) v2SpawnLetter(letterTarget.from, letterTarget.to);
+  }
   // Route org run events (have runId + org) to the active run session
   if (ev?.org && ev?.runId && ev.org === _v2SelOrg) {
     let runSess = _odtChatSessions.find(s => s.id === ev.runId);