monomind 2.5.4 → 2.5.5

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

@@ -53,6 +53,14 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .nav-proj-name { font-size: 12px; font-weight: 600; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .nav-proj-items { padding-left: 12px; border-left: 1px solid oklch(72% 0.18 75 / 0.2); margin-left: 11px; }
 .nav-no-proj { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px 10px; font-size: 11px; color: var(--text-xs); font-style: italic; }
+/* collapsible global nav section */
+.nav-glob-hdr { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; cursor: pointer; user-select: none; color: var(--text-xs); }
+.nav-glob-hdr:hover { color: var(--text-hi); }
+.nav-glob-arrow { font-size: 9px; width: 10px; text-align: center; flex-shrink: 0; transition: transform 0.12s; }
+.nav-glob-hdr.open .nav-glob-arrow { transform: rotate(90deg); }
+.nav-glob-lbl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
+.nav-glob-items { display: none; flex-direction: column; }
+.nav-glob-items.open { display: flex; }
 #sb-footer { padding: 10px 14px; border-top: 1px solid var(--border); }
 #sb-user { font-size: 12px; font-weight: 500; color: var(--text-mid); }
 #sb-path { font-size: 10px; color: var(--text-lo); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
@@ -349,6 +357,8 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #odt-chat-send-btn { font-size:8px; letter-spacing:1.5px; padding:4px 10px; border-radius:3px; border:1px solid oklch(62% 0.2 186 / 0.4); color:oklch(62% 0.2 186); background:transparent; cursor:pointer; font-family:inherit; flex-shrink:0; align-self:flex-end; }
 #odt-chat-send-btn:hover:not(:disabled) { background:oklch(62% 0.2 186 / 0.12); }
 #odt-chat-send-btn:disabled { opacity:0.3; cursor:default; }
+#odt-chat-role-sel { background:var(--surface); color:var(--text-mid); border:1px solid var(--border); border-radius:4px; font-size:10px; font-family:var(--mono); padding:4px 5px; align-self:flex-end; max-width:110px; flex-shrink:0; }
+#odt-chat-role-sel:focus { outline:none; border-color:var(--accent); }
 .cv-user-msg { align-self:flex-end; }
 .cv-user-msg .cv-bub { background:oklch(20% 0.06 220); border-left:none; border-right:2px solid oklch(62% 0.2 186); }
 .odt-mode-btn {
@@ -381,6 +391,10 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 @media (prefers-reduced-motion: reduce) { #org-agent-drawer { transition: none; } }
 #oad-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
 .oad-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--surface-hi); object-fit: cover; }
+.oad-avatar-wrap { position: relative; width: 46px; height: 46px; flex-shrink: 0; cursor: pointer; }
+.oad-avatar-wrap .oad-avatar { width: 100%; height: 100%; }
+.oad-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-hi); border: 1.5px solid var(--bg); color: var(--text-lo); display: flex; align-items: center; justify-content: center; font-size: 9px; opacity: 0; transition: opacity 0.12s; }
+.oad-avatar-wrap:hover .oad-avatar-edit { opacity: 1; }
 .oad-id { flex: 1; min-width: 0; }
 .oad-name { font-size: 15px; font-weight: 600; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .oad-pills { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
@@ -795,27 +809,6 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #rp-fill { height:100%; width:100%; background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 0.15s; }
 #rp-counter { font-size:11px; color:var(--text-lo); font-family:var(--mono); white-space:nowrap; }
 
-/* ── agent chat view ─────────────────────────────────────── */
-#view-chat .vscroll { display:flex; flex-direction:column; height:100%; overflow:hidden; padding:0; }
-#chat-v-bar { display:flex; align-items:center; gap:8px; padding:14px 18px 10px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
-#chat-v-bar-title { font-size:13px; font-weight:600; color:var(--text-hi); }
-#chat-v-sel { background:var(--surface); color:var(--text-mid); border:1px solid var(--border); border-radius:4px; font-size:11px; font-family:var(--mono); padding:3px 7px; cursor:pointer; max-width:300px; }
-#chat-v-sel:focus { outline:none; border-color:var(--accent); }
-#chat-v-live-dot { width:5px; height:5px; border-radius:50%; background:var(--text-xs); flex-shrink:0; margin-left:auto; transition:background 0.4s; }
-#chat-v-live-dot.on { background:oklch(68% 0.20 150); animation:livepulse-cv 2.2s ease-in-out infinite; }
-@keyframes livepulse-cv { 0%,100%{opacity:1} 50%{opacity:0.4} }
-#chat-v-live-lbl { font-size:9px; color:var(--text-lo); }
-#chat-v-feed { flex:1; overflow-y:auto; padding:12px 18px; display:flex; flex-direction:column; gap:5px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
-#chat-v-feed::-webkit-scrollbar { width:4px; }
-#chat-v-feed::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
-#chat-v-empty { font-size:11px; color:var(--text-lo); text-align:center; padding:32px 0; line-height:2; }
-#chat-v-excerpt { flex-shrink:0; padding:7px 18px 8px; background:oklch(13% 0.01 295); border-bottom:1px solid var(--border); display:none; }
-#chat-v-excerpt.visible { display:block; }
-#chat-v-agent-bar { display:flex; align-items:center; gap:6px; padding:6px 18px 7px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
-#chat-v-agent-lbl { font-size:8px; letter-spacing:2px; color:var(--text-xs); flex-shrink:0; }
-.cv-agent-pill { font-size:8px; padding:2px 8px; border-radius:10px; border:1px solid var(--border); color:var(--text-lo); background:transparent; cursor:pointer; letter-spacing:0.3px; font-family:var(--mono); transition:border-color 0.15s,color 0.15s; }
-.cv-agent-pill:hover { border-color:oklch(62% 0.20 186 / 0.4); color:var(--text-mid); }
-.cv-agent-pill.active { border-color:oklch(62% 0.20 186); color:oklch(62% 0.20 186); background:oklch(62% 0.20 186 / 0.07); }
 .cv-session-hdr { padding:10px 18px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; background:oklch(13% 0.01 295); }
 .cv-shdr-prompt { font-size:12px; color:var(--text-mid); margin-bottom:4px; font-weight:500; }
 .cv-shdr-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:9px; color:var(--text-lo); font-family:var(--mono); }
@@ -1582,22 +1575,25 @@ 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="global">
-        <span class="ico">⊕</span><span class="lbl">Global Feed</span>
+      <div class="nav-glob-hdr" id="nav-glob-hdr" onclick="toggleGlobalNav()">
+        <span class="nav-glob-arrow" id="nav-glob-arrow">▸</span>
+        <span class="nav-glob-lbl">Global</span>
       </div>
-      <div class="nav-item" data-view="global-loops" title="Loops across all projects">
-        <span class="ico">↺</span><span class="lbl">Global Loops</span>
-        <span class="bdg" id="bdg-global-loops">—</span>
-      </div>
-      <div class="nav-item" data-view="global-tokens" title="Token usage across all projects">
-        <span class="ico">$</span><span class="lbl">Global Tokens</span>
-      </div>
-      <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 class="nav-glob-items" id="nav-glob-items">
+        <div class="nav-item" data-view="global">
+          <span class="ico">⊕</span><span class="lbl">Global Feed</span>
+        </div>
+        <div class="nav-item" data-view="global-tokens" title="Token usage across all projects">
+          <span class="ico">$</span><span class="lbl">Global Tokens</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 class="nav-item" data-view="global-orgs" title="All orgs across all projects">
+          <span class="ico">⬡</span><span class="lbl">All Orgs</span>
+          <span class="bdg" id="bdg-global-orgs">—</span>
+        </div>
       </div>
     </div>
   </div>
@@ -2276,17 +2272,6 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
       </div>
     </div>
 
-    <!-- GLOBAL LOOPS -->
-    <div class="view" id="view-global-loops">
-      <div class="vscroll">
-        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
-          <div class="pg-title" style="margin-bottom:0">Global Loops</div>
-          <span class="pg-sub" id="gl-sub" style="margin-bottom:0">Loops across all projects</span>
-        </div>
-        <div id="gl-content" style="margin-top:16px"><div class="loading-txt">Loading…</div></div>
-      </div>
-    </div>
-
     <!-- GLOBAL TOKENS -->
     <div class="view" id="view-global-tokens">
       <div class="vscroll">
@@ -2298,23 +2283,14 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
       </div>
     </div>
 
-    <div class="view" id="view-chat">
+    <!-- GLOBAL ORGS -->
+    <div class="view" id="view-global-orgs">
       <div class="vscroll">
-        <div id="chat-v-bar">
-          <span id="chat-v-bar-title">Agent Chat</span>
-          <select id="chat-v-sel" onchange="chatVSelectSession(this.value)">
-            <option value="">— select a session —</option>
-          </select>
-          <select id="chat-v-org-run-sel" style="display:none" onchange="chatVSelectOrgRun(this.value)" title="Select org run to replay communications">
-            <option value="">— org run history —</option>
-          </select>
-          <div id="chat-v-live-dot"></div>
-          <span id="chat-v-live-lbl">OFFLINE</span>
-        </div>
-        <div id="chat-v-excerpt" class="cv-excerpt-banner"></div>
-        <div id="chat-v-feed">
-          <div id="chat-v-empty">Select a session above to see agent communications.<br>Agent messages, intercom signals, and system events appear here in real time.</div>
+        <div style="display:flex;align-items:baseline;gap:10px;margin-bottom:4px">
+          <div class="pg-title" style="margin-bottom:0">All Orgs</div>
+          <span class="pg-sub" id="go-sub" style="margin-bottom:0">Orgs across all projects</span>
         </div>
+        <div id="go-content" style="margin-top:16px"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
 
@@ -2325,6 +2301,10 @@ select.pb-cfg-inp { padding: 4px 7px; cursor: pointer; }
           <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 class="hi-tab-bar" style="display:flex;gap:4px;margin-top:12px;border-bottom:1px solid var(--border);padding-bottom:6px">
+          <button class="odt-btn active" data-hitab="pending" onclick="hiSwitchTab('pending')">Pending <span style="font-size:10px;background:var(--surface-hi);color:var(--text-lo);border-radius:8px;padding:1px 6px;min-width:18px;display:inline-block;text-align:center" id="hi-tab-count-pending">—</span></button>
+          <button class="odt-btn" data-hitab="answered" onclick="hiSwitchTab('answered')">Answered <span style="font-size:10px;background:var(--surface-hi);color:var(--text-lo);border-radius:8px;padding:1px 6px;min-width:18px;display:inline-block;text-align:center" id="hi-tab-count-answered">—</span></button>
+        </div>
         <div id="hi-content" style="margin-top:16px"><div class="loading-txt">Loading…</div></div>
       </div>
     </div>
@@ -2493,25 +2473,44 @@ document.querySelectorAll('.nav-item[data-view]').forEach(el => {
   el.addEventListener('click', () => switchView(el.dataset.view));
 });
 
+// ── collapsible global nav section ──────────────────────────
+const GLOBAL_VIEWS = ['global', 'global-tokens', 'global-orgs', 'humaninput'];
+function setGlobalNavOpen(open) {
+  const items = document.getElementById('nav-glob-items');
+  const hdr = document.getElementById('nav-glob-hdr');
+  const arrow = document.getElementById('nav-glob-arrow');
+  if (!items || !hdr) return;
+  items.classList.toggle('open', open);
+  hdr.classList.toggle('open', open);
+  if (arrow) arrow.textContent = open ? '▾' : '▸';
+}
+function toggleGlobalNav() {
+  const items = document.getElementById('nav-glob-items');
+  const open = !(items && items.classList.contains('open'));
+  setGlobalNavOpen(open);
+  try { localStorage.setItem('nav-global-open', open ? '1' : '0'); } catch(_) {}
+}
+try { setGlobalNavOpen(localStorage.getItem('nav-global-open') === '1'); } catch(_) { setGlobalNavOpen(false); }
+
 document.getElementById('feed-scroll').addEventListener('scroll', () => {
   userScrolled = document.getElementById('feed-scroll').scrollTop > 50;
 });
 
 function switchView(v, { updateHash = true } = {}) {
   currentView = v;
+  if (GLOBAL_VIEWS.includes(v)) setGlobalNavOpen(true);
   document.querySelectorAll('.nav-item[data-view]').forEach(el =>
     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', global:'Global Feed', 'global-loops':'Global Loops', 'global-tokens':'Global Tokens', chat:'Global Agent Chat', humaninput:'Human Input' };
+  const titles = { now:'Now', projects:'Projects', sessions:'Sessions', loops:'Loops', tokens:'Tokens', memory:'Memory', orgs:'Orgs', monograph:'Monograph', global:'Global Feed', 'global-tokens':'Global Tokens', 'global-orgs':'All Orgs', 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', global: 'Global Feed', 'global-loops': 'Global Loops', 'global-tokens': 'Global Tokens', chat: 'Global Agent Chat', humaninput: 'Human Input' };
+  const VIEW_LABELS = { now: 'Now', sessions: 'Sessions', projects: 'Projects', loops: 'Loops', tokens: 'Tokens', memory: 'Memory', orgs: 'Orgs', monograph: 'Monograph', global: 'Global Feed', 'global-tokens': 'Global Tokens', 'global-orgs': 'All Orgs', 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
   if (v === 'projects') { renderProjects(); return; }
-  if (v === 'chat') { initChatView(); return; }
   if (!viewRendered[v]) { renderView(v); viewRendered[v] = true; }
 }
 
@@ -2567,8 +2566,8 @@ function renderView(v) {
   if (v === 'orgs') renderOrgs();
   if (v === 'monograph') loadMonograph();
   if (v === 'global') renderGlobalFeed();
-  if (v === 'global-loops') renderGlobalLoops();
   if (v === 'global-tokens') renderGlobalTokens();
+  if (v === 'global-orgs') renderGlobalOrgs();
   if (v === 'humaninput') renderHumanInputView();
 }
 
@@ -3997,88 +3996,57 @@ function buildRecap(events, sess) {
   recap.className = 'show';
 }
 
-// ── global loops (multi-project) ───────────────────────────
-function deduplicateLoops(loops) {
-  const hasRepeat = loops.some(l => l.source === '_repeat.md');
-  const repeatPrompts = new Set(loops.filter(l => l.source === '_repeat.md').map(l => (l.prompt || '').trim()));
-  return loops.filter(l => {
-    if (l.source === 'scheduled_tasks_lock' && hasRepeat) return false;
-    if (l.source !== 'schedule_wakeup_hook') return true;
-    const m = (l.prompt || '').match(/--loop\s+\S+\s+(.+)$/s);
-    return !m || !repeatPrompts.has(m[1].trim());
-  });
+// ── global orgs (multi-project) ──────────────────────────
+function openGlobalOrg(name, projectDir) {
+  switchProject(projectDir);
+  switchView('orgs');
+  const trySelect = (attempts) => {
+    if (typeof _v2Orgs !== 'undefined' && _v2Orgs && _v2Orgs.some(o => o.name === name)) {
+      v2SelectOrg(name);
+    } else if (attempts > 0) {
+      setTimeout(() => trySelect(attempts - 1), 200);
+    }
+  };
+  trySelect(20);
 }
 
-async function renderGlobalLoops() {
-  const el = document.getElementById('gl-content');
+async function renderGlobalOrgs() {
+  const el = document.getElementById('go-content');
   el.innerHTML = '<div class="loading-txt">Loading all projects…</div>';
   try {
-    const data = await apiFetch('/api/projects');
-    const allProjects = data?.projects || [];
-    const projects = allProjects.slice(0, 20);
-    if (!projects.length) {
-      el.innerHTML = '<div class="empty"><div class="empty-ico">↺</div><div>No projects found</div></div>';
-      document.getElementById('bdg-global-loops').textContent = '—';
-      return;
-    }
-
-    const results = await Promise.allSettled(
-      projects.map(p => apiFetch('/api/loops?dir=' + enc(p.path)).then(d => ({
-        project: p,
-        loops: deduplicateLoops(Array.isArray(d) ? d : (d.loops || []))
-      })))
-    );
-
-    let totalLoops = 0;
-    const sections = [];
-    for (const r of results) {
-      if (r.status !== 'fulfilled') continue;
-      const { project, loops } = r.value;
-      if (!loops.length) continue;
-      totalLoops += loops.length;
-      const projName = project.name || project.slug || project.path?.split('/').pop() || '?';
-      const rows = loops.map(l => {
-        const isTillend = l.type === 'tillend';
-        const curRep = l.currentRep || 0;
-        const maxReps = l.maxReps || 0;
-        const nextAt = l.nextRunAt ? parseInt(l.nextRunAt, 10) : 0;
-        const isHil = l.status === 'hil:pending';
-        const isExplicitlyActive = l.status === 'running' || l.status === 'waiting' || l.status === 'active';
-        const isOverdue = !l.status?.startsWith('hil') && !isExplicitlyActive && nextAt > 0 && nextAt <= Date.now();
-        const isFinished = isOverdue || (maxReps > 0 && curRep >= maxReps) ||
-          ['finished','done','complete','completed','expired'].includes(l.status);
-        const running = !isFinished && l.status !== 'stopped' && l.status !== 'paused';
-        const name = l.name || (l.prompt || 'loop').split('--')[0].trim().slice(0, 60);
-        const intervalStr = fmtInterval(l.interval || l.schedule);
-        const type = esc(l.type || 'repeat');
-        const statusClass = isHil ? 'hil' : (running ? 'active' : 'stopped');
-        const statusLabel = isHil ? '⚠ HIL' : (running ? 'active' : (isFinished ? 'done' : 'stopped'));
-        const overdueSpan = isOverdue ? ' <span class="loop-cdown overdue">overdue</span>' : '';
-        const metaStr = intervalStr ? esc(intervalStr) + overdueSpan : overdueSpan;
-        return `<div class="loop-row" style="cursor:default">
-          <div class="loop-ico">${isTillend ? '∞' : '↺'}</div>
-          <div class="loop-body">
-            <div class="loop-name" title="${esc(l.name || l.prompt || '')}"><span class="loop-type-badge${isTillend ? ' tillend' : ''}">${type}</span>${esc(name)}</div>
-            <div class="loop-meta">${metaStr}</div>
-          </div>
-          <span class="gf-proj-tag">${esc(projName)}</span>
-          <div class="loop-status ${statusClass}">${statusLabel}</div>
-        </div>`;
-      }).join('');
-      sections.push(`<div style="margin-bottom:18px">
-        <div class="m-group-title" style="margin-bottom:6px">${esc(projName)}</div>
-        ${rows}
-      </div>`);
-    }
+    const data = await apiFetch('/api/orgs');
+    const orgs = sortOrgList(Array.isArray(data) ? data : (data.orgs || []));
+    const running = orgs.filter(o => o.running).length;
 
-    document.getElementById('bdg-global-loops').textContent = totalLoops || '—';
-    document.getElementById('gl-sub').textContent = `${totalLoops} loop${totalLoops !== 1 ? 's' : ''} across ${sections.length} project${sections.length !== 1 ? 's' : ''}`;
+    document.getElementById('bdg-global-orgs').textContent = orgs.length || '—';
+    document.getElementById('go-sub').textContent = running > 0
+      ? `${orgs.length} org${orgs.length !== 1 ? 's' : ''} · ${running} running`
+      : `${orgs.length} org${orgs.length !== 1 ? 's' : ''} across all projects`;
 
-    if (!sections.length) {
-      el.innerHTML = '<div class="empty"><div class="empty-ico">↺</div><div>No loops found across projects</div></div>';
+    if (!orgs.length) {
+      el.innerHTML = '<div class="empty"><div class="empty-ico">⬡</div><div>No orgs found across projects</div></div>';
       return;
     }
-    el.innerHTML = sections.join('');
+
+    el.innerHTML = orgs.map(o => {
+      const rolesArr = Array.isArray(o.roles) ? o.roles : [];
+      const rolesN = rolesArr.length || (typeof o.roles === 'number' ? o.roles : 0);
+      const goalSnip = (o.goal || '').slice(0, 60) + ((o.goal || '').length > 60 ? '…' : '');
+      const projName = o.projectDir ? (o.projectDir.split('/').filter(Boolean).pop() || o.projectDir) : '?';
+      return `<div class="org-item" data-org="${esc(o.name)}" data-projdir="${esc(o.projectDir || '')}" onclick="openGlobalOrg(this.dataset.org, this.dataset.projdir)">
+        <div class="oi-dot ${o.running ? 'running' : ''}"></div>
+        <div class="oi-body">
+          <div class="oi-name">${esc(o.name)}</div>
+          ${goalSnip ? `<div class="oi-goal">${esc(goalSnip)}</div>` : ''}
+          <div class="oi-chips">
+            ${o.running ? `<span class="oi-chip ${o.lastEventAt ? (Date.now()-o.lastEventAt<1800000?'live':'quiet') : 'quiet'}">${o.lastEventAt ? (Date.now()-o.lastEventAt<1800000?'🟢 LIVE':'🟡 QUIET') : '🟡 QUIET'}</span>` : ''}
+            <span class="oi-chip">${rolesN} roles</span>
+            <span class="oi-chip">${esc(o.topology || 'hierarchical')}</span>
+            <span class="gf-proj-tag" title="${esc(o.projectDir || '')}">${esc(projName)}</span>
+          </div>
+        </div>
+      </div>`;
+    }).join('');
   } catch (err) {
     el.innerHTML = '<div class="empty">Could not load: ' + esc(err.message) + '</div>';
   }
@@ -4222,6 +4190,9 @@ async function renderGlobalFeed() {
   }
 }
 
+let _hiEntries = [];
+let _hiTab = 'pending';
+
 async function renderHumanInputView() {
   const el = document.getElementById('hi-content');
   el.innerHTML = '<div class="loading-txt">Loading all projects…</div>';
@@ -4230,7 +4201,9 @@ async function renderHumanInputView() {
     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>';
+      _hiEntries = [];
       updateHumanInputBadge(0);
+      renderHiCurrentTab(projects.length);
       return;
     }
     const results = await Promise.allSettled(
@@ -4242,31 +4215,55 @@ async function renderHumanInputView() {
       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>';
+    entries.sort((a, b) => (b.q.answeredAt || b.q.ts || 0) - (a.q.answeredAt || a.q.ts || 0));
+    _hiEntries = entries;
+    updateHumanInputBadge(entries.filter(({ q }) => q.answer === null || q.answer === undefined).length);
+    renderHiCurrentTab(projects.length);
   } catch (e) { el.innerHTML = '<div class="empty">Failed: ' + esc(e.message) + '</div>'; }
 }
 
+function hiSwitchTab(tab) {
+  _hiTab = tab;
+  document.querySelectorAll('.hi-tab-bar .odt-btn').forEach(b =>
+    b.classList.toggle('active', b.dataset.hitab === tab));
+  renderHiCurrentTab();
+}
+
+function renderHiCurrentTab(projectCount) {
+  const el = document.getElementById('hi-content');
+  const pending = _hiEntries.filter(({ q }) => q.answer === null || q.answer === undefined);
+  const answered = _hiEntries.filter(({ q }) => q.answer !== null && q.answer !== undefined);
+  document.getElementById('hi-tab-count-pending').textContent = pending.length || '—';
+  document.getElementById('hi-tab-count-answered').textContent = answered.length || '—';
+  const entries = _hiTab === 'answered' ? answered : pending;
+  const projTxt = projectCount != null ? ` across ${projectCount} project${projectCount !== 1 ? 's' : ''}` : '';
+  document.getElementById('hi-sub').textContent = _hiTab === 'answered'
+    ? (answered.length ? `${answered.length} answered question(s)${projTxt}` : `No answered questions${projTxt}`)
+    : (pending.length ? `${pending.length} pending question(s)${projTxt}` : `No pending questions${projTxt}`);
+  if (!entries.length) {
+    el.innerHTML = `<div class="empty"><div class="empty-ico">❓</div><div>No ${_hiTab} 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>
+      ${_hiTab === 'answered' ? `
+      <div style="display:flex;justify-content:space-between;gap:8px;padding:6px 8px;background:var(--surface-hi);border-radius:4px">
+        <div><span style="color:var(--text-xs)">Answer:</span> ${esc(q.answer)}</div>
+        <div style="color:var(--text-xs);font-size:11px;font-family:var(--mono);flex-shrink:0">${relTime(q.answeredAt)}</div>
+      </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>';
+}
+
 function updateHumanInputBadge(count) {
   const b = document.getElementById('bdg-humaninput');
   if (b) b.textContent = String(count);
@@ -4284,366 +4281,16 @@ async function submitHumanAnswer(dir, org, role, questionId, btnEl) {
       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; }
+    if (data.ok) {
+      showToast('Answered', `${org}:${role}`, 'ok');
+      const entry = _hiEntries.find(({ q }) => q.questionId === questionId);
+      if (entry) { entry.q.answer = answer; entry.q.answeredAt = Date.now(); }
+      updateHumanInputBadge(_hiEntries.filter(({ q }) => q.answer === null || q.answer === undefined).length);
+      renderHiCurrentTab();
+    } 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
-let chatVSessionGroupMap = {}; // sessionId → groupId (for sessions inside a group)
-let chatVCurrentId = null;
-let chatVCurrentGroupSessions = new Set(); // session IDs belonging to the currently selected group
-let chatVSseSource = null;
-let chatVSeenKeys = new Set();
-
-function initChatView() {
-  loadChatViewSessions();
-  loadChatViewOrgRuns();
-  if (!chatVSseSource) connectChatViewSSE();
-}
-
-async function loadChatViewOrgRuns() {
-  // Populate the org run history selector with recent org runs
-  const runSel = document.getElementById('chat-v-org-run-sel');
-  if (!runSel) return;
-  try {
-    const dir = DIR ? `?dir=${encodeURIComponent(DIR)}` : '';
-    const orgs = await apiFetch('/api/orgs' + dir).catch(() => []);
-    const orgList = Array.isArray(orgs) ? orgs : (orgs.orgs || []);
-    const runEntries = [];
-    await Promise.all(orgList.slice(0, 10).map(async org => {
-      const name = org.name || org;
-      if (!name) return;
-      try {
-        const runs = await apiFetch(`/api/org/${encodeURIComponent(name)}/runs${dir}`);
-        (Array.isArray(runs) ? runs : (runs.runs || [])).slice(0, 5).forEach(r => {
-          runEntries.push({ org: name, runId: r.runId || r.id, startedAt: r.startedAt || 0 });
-        });
-      } catch (_) {}
-    }));
-    runEntries.sort((a, b) => b.startedAt - a.startedAt);
-    while (runSel.options.length > 1) runSel.remove(1);
-    runEntries.slice(0, 20).forEach(r => {
-      const opt = document.createElement('option');
-      opt.value = JSON.stringify({ org: r.org, runId: r.runId });
-      const ts = r.startedAt ? new Date(r.startedAt).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '';
-      opt.textContent = r.org + '/' + (r.runId || '').slice(0, 12) + (ts ? '  ' + ts : '');
-      runSel.appendChild(opt);
-    });
-    runSel.style.display = runEntries.length ? '' : 'none';
-  } catch(e) { console.warn('chat org runs load failed', e); }
-}
-
-async function chatVSelectOrgRun(value) {
-  if (!value) return;
-  let org, runId;
-  try { ({ org, runId } = JSON.parse(value)); } catch { return; }
-  const feed = document.getElementById('chat-v-feed');
-  const empty = document.getElementById('chat-v-empty');
-  if (!feed) return;
-  feed.innerHTML = '';
-  // Clear session selection — org run replay is a different mode;
-  // also set chatVCurrentId=null so appendChatViewEvent session-guard doesn't filter events
-  chatVCurrentId = null;
-  const sessEl = document.getElementById('chat-v-sel');
-  if (sessEl) sessEl.value = '';
-  try {
-    const dir = DIR ? `?dir=${encodeURIComponent(DIR)}` : '';
-    const events = await apiFetch(`/api/org/${encodeURIComponent(org)}/runs/${encodeURIComponent(runId)}${dir}`);
-    const evArr = Array.isArray(events) ? events : (events.events || []);
-    if (!evArr.length) { feed.appendChild(empty || document.createTextNode('No events in this run.')); return; }
-    evArr.forEach(ev => appendChatViewEvent(ev, false));
-    feed.scrollTop = feed.scrollHeight;
-  } catch(e) {
-    feed.textContent = 'Failed to load run events: ' + e.message;
-  }
-}
-
-async function loadChatViewSessions() {
-  try {
-    // Snapshot SSE-seeded sessions before the async fetch — the API response may not yet
-    // include events that arrived via SSE right before the fetch, so we preserve their
-    // buffered events and merge them back after (same pattern as _odtLoadChatSessions).
-    const _prevChatSessions = { ...chatVSessions };
-    const data = await apiFetch('/api/mastermind/sessions' + (DIR ? '?project=' + encodeURIComponent(DIR) : ''));
-    chatVSessions = {};
-    chatVGroupMap = {};
-    chatVSessionGroupMap = {};
-    const sel = document.getElementById('chat-v-sel');
-    const prev = sel.value;
-    while (sel.options.length > 1) sel.remove(1);
-    // API returns a plain array (not {sessions:{...}}) — handle both shapes for safety
-    const sessions = Array.isArray(data) ? data : Object.values(data.sessions || data || {});
-
-    // Normalize and merge SSE-seeded events before grouping
-    sessions.forEach(s => {
-      if (_prevChatSessions[s.id] && (_prevChatSessions[s.id].events || []).length > (s.events || []).length) {
-        s.events = _prevChatSessions[s.id].events;
-      }
-      if (s.status && s.status !== 'running' && s.status !== 'complete') s.status = 'complete';
-    });
-
-    // Group consecutive sessions with same normalized prompt + gap < 20 min → loop group
-    const _CV_MAX_LOOP_GAP = 20 * 60 * 1000;
-    const _cvNormPrompt = p => (p || '').replace(/^running org:\s*/i, '').toLowerCase().replace(/\s*rep\s+\d+.*$/i, '').trim().slice(0, 40);
-    const sessAsc = [...sessions].sort((a, b) => (a.startedAt || a.ts || 0) - (b.startedAt || b.ts || 0));
-    const cvGroups = []; // [{id, sessions, events, totalEvents, status, prompt, startedAt, _newestAt, _normKey, _isGroup}]
-    sessAsc.forEach(s => {
-      const key = _cvNormPrompt(s.prompt);
-      const sAt = s.startedAt || s.ts || 0;
-      const last = cvGroups[cvGroups.length - 1];
-      if (last && last._normKey === key && key && (sAt - last._newestAt) < _CV_MAX_LOOP_GAP) {
-        last.sessions.push(s);
-        last._newestAt = sAt;
-        last.totalEvents += (s.events || []).length;
-        if (s.status === 'running') last.status = 'running';
-        (s.events || []).forEach(ev => last.events.push(ev));
-      } else {
-        cvGroups.push({
-          id: s.id,
-          sessions: [s],
-          _normKey: key,
-          _newestAt: sAt,
-          totalEvents: (s.events || []).length,
-          status: s.status || 'complete',
-          prompt: s.prompt,
-          startedAt: sAt,
-          domains: s.domains || [],
-          events: [...(s.events || [])],
-          _isGroup: false
-        });
-      }
-    });
-    // Finalize groups
-    cvGroups.forEach(g => {
-      if (g.sessions.length > 1) {
-        g._isGroup = true;
-        g.id = 'grp:' + g.sessions[0].id;
-        g.events.sort((a, b) => (a.ts || 0) - (b.ts || 0));
-      }
-    });
-    // Sort groups newest first, register
-    cvGroups.sort((a, b) => b._newestAt - a._newestAt);
-    cvGroups.forEach(g => {
-      chatVSessions[g.id] = g;
-      chatVGroupMap[g.id] = g;
-      g.sessions.forEach(s => {
-        chatVSessions[s.id] = g; // session ID also routes to group
-        if (g._isGroup) chatVSessionGroupMap[s.id] = g.id;
-      });
-      const opt = document.createElement('option');
-      opt.value = g.id;
-      const ts = g._newestAt ? new Date(g._newestAt).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '';
-      const label = (g.prompt || '').replace(/^running org:\s*/i, '').replace(/\s*rep\s+\d+.*$/i, '').trim().slice(0, 30) || g.id.slice(0, 16);
-      const evCount = g.totalEvents || (g.events || []).length;
-      const msgPart = evCount ? '  ' + evCount + 'ev' : '';
-      const repPart = g._isGroup ? '  ' + g.sessions.length + 'reps' : '';
-      opt.textContent = label + (ts ? '  ' + ts : '') + repPart + msgPart + (g.status === 'running' ? '  ●' : '');
-      sel.appendChild(opt);
-    });
-
-    // Re-attach SSE-only sessions not yet in the API response (arrived during fetch)
-    Object.values(_prevChatSessions).forEach(ps => {
-      if (!chatVSessions[ps.id]) {
-        chatVSessions[ps.id] = ps;
-        const opt = document.createElement('option');
-        opt.value = ps.id;
-        const tsVal = ps.startedAt || 0;
-        const ts = tsVal ? new Date(tsVal).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}) : '';
-        const label = (ps.prompt || '').replace(/^running org:\s*/i, '').slice(0, 40) || ps.id.slice(0, 16);
-        opt.textContent = label + (ts ? '  ' + ts : '') + '  ●';
-        sel.appendChild(opt);
-      }
-    });
-
-    // Resolve prev selection: may be a sessionId inside a group now
-    const prevResolved = prev ? (chatVSessionGroupMap[prev] || (chatVSessions[prev] ? prev : null)) : null;
-    if (prevResolved && chatVSessions[prevResolved]) {
-      sel.value = prevResolved;
-      if (!chatVCurrentId) chatVSelectSession(prevResolved);
-    } else {
-      const runningGroup = cvGroups.find(g => g.status === 'running');
-      if (runningGroup) { sel.value = runningGroup.id; chatVSelectSession(runningGroup.id); }
-      else if (cvGroups.length) { sel.value = cvGroups[0].id; chatVSelectSession(cvGroups[0].id); }
-    }
-  } catch(e) { console.warn('chat sessions load failed', e); }
-}
-
-function chatVSelectSession(id) {
-  chatVCurrentId = id;
-  chatVCurrentGroupSessions.clear();
-  const feed = document.getElementById('chat-v-feed');
-  const empty = document.getElementById('chat-v-empty');
-  if (!id || !chatVSessions[id]) {
-    feed.innerHTML = '';
-    feed.appendChild(empty);
-    return;
-  }
-  feed.innerHTML = '';
-  const session = chatVSessions[id];
-  // Populate group session set so live SSE events from any rep appear in feed
-  if (session._isGroup && session.sessions) {
-    session.sessions.forEach(s => chatVCurrentGroupSessions.add(s.id));
-  }
-  // Inject session metadata header
-  const tsVal = session.startedAt || session.ts || 0;
-  const tsStr = tsVal ? new Date(tsVal).toLocaleString([], {month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}) : '—';
-  const domains = (session.domains || []);
-  const agents = domains.length ? domains.join(', ') : '—';
-  const evCount = session._isGroup ? (session.totalEvents || (session.events || []).length) : (session.events || []).length;
-  const agentNames = (() => {
-    const names = new Set();
-    (session.events || []).forEach(ev => {
-      if (ev.agent) names.add(ev.agent);
-      if (ev.from && ev.from !== 'system') names.add(ev.from);
-    });
-    return names.size ? [...names].join(', ') : agents;
-  })();
-  const prompt = (session.prompt || '').replace(/^running org:\s*/i, '').replace(/\s*rep\s+\d+.*$/i, '').trim().slice(0, 120) || id;
-  const repInfo = session._isGroup ? ' · ' + session.sessions.length + ' reps' : '';
-  const statusCls = session.status === 'running' ? 'color:oklch(65% 0.20 145)' : session.status === 'complete' ? 'color:var(--text-lo)' : 'color:oklch(65% 0.20 25)';
-  // Compute cost + duration from events
-  const _allEvs = session.events || [];
-  const _totalCost = _allEvs.reduce((acc, ev) => acc + (Number(ev.cost_usd) || 0), 0);
-  const _costStr = _totalCost > 0 ? '$' + _totalCost.toFixed(4) : '';
-  const _startTs = session.startedAt || session.ts || 0;
-  const _endTs = session.endedAt || (_allEvs[_allEvs.length-1]?.ts) || 0;
-  const _durMs = _endTs > _startTs ? _endTs - _startTs : 0;
-  const _durStr = _durMs > 60000 ? Math.round(_durMs/60000) + 'm' : _durMs > 0 ? Math.round(_durMs/1000) + 's' : '';
-  const hdr = document.createElement('div');
-  hdr.className = 'cv-session-hdr';
-  hdr.innerHTML = `<div class="cv-shdr-prompt">${esc(prompt)}${repInfo ? '<span style="color:var(--text-lo);font-size:10px"> ' + esc(repInfo) + '</span>' : ''}</div>`+
-    `<div class="cv-shdr-meta">`+
-      `<span class="cv-shdr-id" title="${esc(id)}">${esc(id)}</span>`+
-      `<span class="cv-shdr-sep">·</span>`+
-      `<span style="${statusCls}">${esc(session.status || 'unknown')}</span>`+
-      `<span class="cv-shdr-sep">·</span>`+
-      `<span title="started">${esc(tsStr)}</span>`+
-      (_durStr ? `<span class="cv-shdr-sep">·</span><span title="duration">${esc(_durStr)}</span>` : '')+
-      `<span class="cv-shdr-sep">·</span>`+
-      `<span title="agents">${esc(agentNames)}</span>`+
-      `<span class="cv-shdr-sep">·</span>`+
-      `<span title="event count">${evCount} events</span>`+
-      (_costStr ? `<span class="cv-shdr-sep">·</span><span style="color:oklch(65% 0.18 50)" title="total cost">${esc(_costStr)}</span>` : '')+
-    `</div>`;
-  feed.appendChild(hdr);
-  const events = session.events || [];
-  events.forEach(ev => {
-    appendChatViewEvent(ev, false);
-    // Pre-seed dedup set so SSE reconnect replays of historical events are swallowed
-    const _cvhk = (ev?.ts||'')+'|'+(ev?.type||'')+'|'+(ev?.from||ev?.role||ev?.agent||'')+'|'+(ev?.session||ev?.runId||'')+'|'+(ev?.result||ev?.msg||ev?.message||ev?.summary||'').slice(0,20);
-    chatVSeenKeys.add(_cvhk);
-  });
-  // Populate excerpt banner with last activity for the selected session
-  const _cvExEl = document.getElementById('chat-v-excerpt');
-  if (_cvExEl) { if (events.length) renderCvExcerptBanner('chat-v-excerpt', events, session); else _cvExEl.innerHTML = ''; }
-  feed.scrollTop = feed.scrollHeight;
-}
-
-function appendChatViewEvent(ev, animate) {
-  if (chatVCurrentId && ev.session && ev.session !== chatVCurrentId && !chatVCurrentGroupSessions.has(ev.session)) return;
-  const feed = document.getElementById('chat-v-feed');
-  if (!feed) return;
-  const empty = document.getElementById('chat-v-empty');
-  if (empty && feed.contains(empty)) feed.removeChild(empty);
-
-  let el;
-  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 ? ': ' + (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 ? ' · ' + (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') {
-    const _cvCommsFrom = ev.from || ev.role || ev.org || '?';
-    // Directed messages (to set, not broadcast) → intercom bubble; broadcasts → agent bubble
-    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('[' + (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] ' + (ev.summary || ev.progress || ev.msg || ''), ts);
-  } else if (ev.type === 'org:start') {
-    el = mkCVSys('[org:start] ' + (ev.org || ''), ts);
-  } else if (ev.type === 'run:complete') {
-    el = mkCVSys('■ Run complete' + (ev.status ? ' [' + (ev.status) + ']' : ''), ts);
-  } else if (ev.type === 'org:complete') {
-    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') {
-    const _spawnTo = ev.to || ev.agentType || '?';
-    const _spawnTask = ev.task || ev.briefing || '';
-    el = mkCVSpawn(ev.from || 'orchestrator', _spawnTo, _spawnTask, ts);
-  } else if (ev.type === 'agent:complete') {
-    // Rich completion event from capture-handler (replaces/supplements org:comms)
-    const _acAgent = ev.agentType || ev.role || ev.from || '?';
-    const _acResult = ev.result || '';
-    const _acCost = ev.cost_usd != null ? ' $' + Number(ev.cost_usd).toFixed(4) : '';
-    const _acTok = (ev.tokens_in || ev.tokens_out) ? ' · ' + ((ev.tokens_in||0)+(ev.tokens_out||0)).toLocaleString() + ' tok' : '';
-    const _acTools = (ev.toolCalls || []).length ? ' · [' + ev.toolCalls.slice(0,5).map(t => esc(t)).join(', ') + ']' : '';
-    el = mkCVResult(_acAgent + _acCost + _acTok + _acTools, _acResult, ts);
-  } else if (ev.type === 'agent:usage') {
-    // Token/cost accounting event — show as compact system line
-    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('◈ ' + (_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 ? ': ' + (ev.prompt.slice(0,80)) : ''), ts);
-  } else if (ev.type === 'session:complete') {
-    el = mkCVSys('Session complete' + (ev.status ? ' — ' + (ev.status) : ''), ts);
-  } else if (ev.type === 'domain:dispatch') {
-    el = mkCVSys('→ ' + (ev.domain || '') + (ev.cmd ? ': ' + (ev.cmd.slice(0,80)) : ''), ts);
-  } else if (ev.type === 'domain:complete') {
-    el = mkCVSys('✓ ' + (ev.domain || '') + (ev.status ? ' [' + (ev.status) + ']' : ''), ts);
-  } else if (ev.type === 'loop:start') {
-    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: ' + (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 ' + (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: ' + (ev.command || ev.loopId || ev.id || ''), ts);
-    if (currentView === 'loops') renderLoops();
-  } else if (ev.type === 'loop:hil:resolved') {
-    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);
-  } 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') {
-    el = mkCVTool('BASH', ev.payload || ev.command || '', ev.output || '', 'oklch(72% 0.18 40)', ts);
-  } 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('◌ ' + (ev.title || ev.role || '?') + ' offline' + (ev.org ? ' [' + (ev.org) + ']' : ''), ts);
-  } else if (ev.type === 'org:error') {
-    el = mkCVSys('⚠ Error: ' + (ev.msg || ev.error || ev.message || ''), ts);
-    el.classList.add('cv-err');
-  } else {
-    el = mkCVSys((ev.type || 'event'), ts);
-  }
-  if (animate) el.classList.add('cv-new');
-  feed.appendChild(el);
-  if (atBottom) feed.scrollTop = feed.scrollHeight;
-}
-
 function _cvExcerptText(ev) {
   const t = ev.type || '';
   if (t === 'intercom' || t === 'org:comms') return (ev.from || ev.role || '?') + ' → ' + (ev.to || '?') + ': ' + (ev.msg || ev.message || '').slice(0, 80);
@@ -4798,84 +4445,6 @@ function mkCVIntercom(from, to, text, ts) {
   return d;
 }
 
-function connectChatViewSSE() {
-  if (chatVSseSource) return;
-  const dot = document.getElementById('chat-v-live-dot');
-  const lbl = document.getElementById('chat-v-live-lbl');
-  chatVSseSource = window.mmEventSource('/api/mastermind-stream' + (DIR ? '?project=' + encodeURIComponent(DIR) : ''));
-  chatVSseSource.onopen = () => { dot && dot.classList.add('on'); lbl && (lbl.textContent = 'LIVE'); };
-  chatVSseSource.onmessage = e => {
-    try { handleChatViewEvent(JSON.parse(e.data)); } catch(_) {}
-  };
-  chatVSseSource.onerror = () => {
-    dot && dot.classList.remove('on');
-    lbl && (lbl.textContent = 'OFFLINE');
-    const _cvSrc = chatVSseSource;
-    chatVSseSource = null;
-    if (_cvSrc) _cvSrc.close();
-    setTimeout(connectChatViewSSE, 5000);
-  };
-}
-
-function handleChatViewEvent(ev) {
-  if (!ev) return;
-  // Deduplicate SSE reconnect replays (server replays last 50 events on every reconnect)
-  const dedupKey = (ev.ts||'') + '|' + (ev.type||'') + '|' + (ev.from||ev.role||ev.agent||'') + '|' + (ev.session||ev.runId||'') + '|' + (ev.result||ev.msg||ev.message||ev.summary||'').slice(0,20);
-  if (chatVSeenKeys.has(dedupKey)) return;
-  chatVSeenKeys.add(dedupKey);
-  if (chatVSeenKeys.size > 2000) { const _a = [...chatVSeenKeys]; chatVSeenKeys = new Set(_a.slice(1000)); }
-  // Org events (org:comms, org:agent:online, org:checkpoint, etc.) may carry a session field
-  // from the org run's session ID — route them directly to the feed if the session matches,
-  // or append them unconditionally when the chat view is showing the "live" placeholder.
-  if (ev.project && DIR && ev.project !== DIR) return;
-  const isOrgEvent = ev.type && (ev.type.startsWith('org:') || ev.type.startsWith('run:') || ev.type.startsWith('loop:'));
-  if (!ev.session && !isOrgEvent) return;
-  if (ev.session) {
-    const existingEntry = chatVSessions[ev.session]; // may be a group object
-    if (!existingEntry) {
-      // Seed events with the triggering event so it isn't lost if loadChatViewSessions
-      // runs before the event is flushed to disk (disk write and SSE broadcast race).
-      chatVSessions[ev.session] = { id: ev.session, events: [ev], startedAt: ev.ts, status: 'running', prompt: ev.prompt || '' };
-      loadChatViewSessions();
-      // Auto-switch to new session on session:start — after loadChatViewSessions it may be grouped
-      if (ev.type === 'session:start') {
-        const _cvGroupId = chatVSessionGroupMap[ev.session] || ev.session;
-        const _cvSel = document.getElementById('chat-v-sel');
-        if (_cvSel) { _cvSel.value = _cvGroupId; chatVSelectSession(_cvGroupId); }
-      }
-    } else {
-      // existingEntry may be a group — push event to it and update status
-      const target = existingEntry;
-      target.events = target.events || [];
-      target.events.push(ev);
-      if (ev.type === 'session:complete') {
-        // Mark this individual session complete; group stays running until all sessions done
-        if (!target._isGroup) target.status = 'complete';
-        else {
-          // Update the underlying session in group
-          const sub = (target.sessions || []).find(s => s.id === ev.session);
-          if (sub) sub.status = 'complete';
-          // Group stays running if any session is still running
-          if (!(target.sessions || []).some(s => s.status === 'running')) target.status = 'complete';
-        }
-      }
-      if (target._isGroup) target.totalEvents = (target.totalEvents || 0) + 1;
-    }
-    // Show event in feed if this session (or its group) is currently selected
-    const _cvGroupId = chatVSessionGroupMap[ev.session];
-    const _cvIsSelected = chatVCurrentId === ev.session || (_cvGroupId && chatVCurrentId === _cvGroupId) || chatVCurrentGroupSessions.has(ev.session);
-    if (_cvIsSelected) {
-      appendChatViewEvent(ev, true);
-      const _cvSess = chatVSessions[_cvGroupId || ev.session];
-      if (_cvSess) renderCvExcerptBanner('chat-v-excerpt', _cvSess.events || [], _cvSess);
-    }
-  } else if (isOrgEvent) {
-    // Org events without a Claude session ID — append to feed regardless of active view;
-    // #chat-v-feed is in the DOM even when hidden, so events accumulate correctly.
-    appendChatViewEvent(ev, true);
-  }
-}
-
 // ── feature 4: budget cap + desktop notification ───────────
 let budget = (function(){ try { return JSON.parse(localStorage.getItem('mm-budget') || '{}'); } catch { return {}; } })();
 
@@ -5893,11 +5462,23 @@ let _v2OrgTab = 'chart';
 const _v2OrgEventLog = {};
 let _v2ChartLayout = { pos: {}, edgeIdByPair: new Map() };
 
+function _orgActivityMs(o) {
+  const t = o.lastEventAt || (o.loop && o.loop.last_run) || o.created_at || 0;
+  return typeof t === 'number' ? t : (Number(t) || new Date(t).getTime() || 0);
+}
+// Running orgs first, then most-recently-active first
+function sortOrgList(orgs) {
+  return [...orgs].sort((a, b) => {
+    if (!!a.running !== !!b.running) return a.running ? -1 : 1;
+    return _orgActivityMs(b) - _orgActivityMs(a);
+  });
+}
+
 async function renderOrgs() {
   try {
     const q = DIR ? '?dir=' + encodeURIComponent(DIR) : '';
     const data = await apiFetch('/api/orgs' + q);
-    _v2Orgs = Array.isArray(data) ? data : (data.orgs || []);
+    _v2Orgs = sortOrgList(Array.isArray(data) ? data : (data.orgs || []));
   } catch (_) { _v2Orgs = []; }
   // Show current project name in sub-header
   const orgProjLabel = document.getElementById('orgs-proj-label');
@@ -5928,8 +5509,9 @@ function v2RenderOrgList() {
     const MAX_SHOW = 4;
     const shownRoles = rolesArr.slice(0, MAX_SHOW);
     const extraCount = rolesN - shownRoles.length;
+    const _oiAvMap = v2AvatarMapFor(rolesArr);
     const avatarsHtml = shownRoles.length ? `<div class="oi-avatars">
-      ${shownRoles.map(r => `<img class="oi-av" src="${v2RoleAvatar(r)}" alt="${esc(r.name||r.id||'')}" loading="lazy" title="${esc(r.name||r.id||'')}" onerror="this.src='data/avatars/coder.svg'"/>`).join('')}
+      ${shownRoles.map(r => `<img class="oi-av" src="${v2RoleAvatar(r, _oiAvMap)}" alt="${esc(r.name||r.id||'')}" loading="lazy" title="${esc(r.name||r.id||'')}" onerror="this.src='data/avatars/coder.svg'"/>`).join('')}
       ${extraCount > 0 ? `<div class="oi-av-more">+${extraCount}</div>` : ''}
     </div>` : '';
     return `<div class="org-item${active}" data-org="${esc(o.name)}" onclick="v2SelectOrg(this.dataset.org)">
@@ -6381,6 +5963,7 @@ function v2RenderOrgChart() {
 
   // Overlay live running status from in-memory agent SSE state for chart node indicators
   const _chartRunning = new Set((_v2OrgData?._agents || []).filter(a => a.status === 'running').map(a => a.id));
+  const _chartAvMap = v2AvatarMapFor(roles);
   let nodesHTML = '';
   roles.forEach((role, i) => {
     const p = pos[role.id];
@@ -6397,13 +5980,13 @@ function v2RenderOrgChart() {
     const runningDot = isRunning ? `<circle class="v2-chart-running-dot" r="5.5" cx="${(R * 0.65).toFixed(1)}" cy="${(-R * 0.65).toFixed(1)}" fill="oklch(68% 0.20 150)" stroke="oklch(12% 0.008 55)" stroke-width="1.5" style="animation:blink 2s ease-in-out infinite"/>` : '';
     const nameY = subType ? (R * 0.55 + 2).toFixed(0) : (R * 0.55 + 8).toFixed(0);
     const avR = Math.round(R * 0.52);
-    const avatarSrc = v2RoleAvatar(role);
+    const avatarSrc = v2RoleAvatar(role, _chartAvMap);
     nodesHTML += `<g class="v2oc-node" data-role="${esc(role.id)}" onclick="v2OpenAgent('${String(role.id).replace(/['\\]/g,'\\$&')}')" transform="translate(${p.x.toFixed(1)},${p.y.toFixed(1)})">
       ${runningDot}
       <title>${esc(displayName)}${subType ? ` · ${esc(subType)}` : ''} — click for details</title>
       ${outerRing}
       <circle r="${R}" fill="oklch(12% 0.008 55)" stroke="${color}" stroke-width="${leader ? 2.5 : 1.8}" filter="url(#v2glow)"/>
-      <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')"/>
+      <image href="${avatarSrc}" x="${-avR}" y="${-avR}" 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">
@@ -6734,18 +6317,68 @@ const _v2TypeFallback = {
   reporter:'analytics-reporter', strategist:'product-manager',
   designer:'game-designer', writer:'technical-writer', auditor:'security-auditor',
 };
-function v2RoleAvatar(role) {
+// Ranked list of built-in avatar ids that could represent this role, best match first.
+function _v2AvatarCandidates(role) {
   const id   = ((role && role.id)         || '').toLowerCase().replace(/\s+/g,'-');
   const type = ((role && (role.type || role.agent_type)) || '').toLowerCase().replace(/\s+/g,'-');
-  if (_v2AvatarKnown.has(id))   return `data/avatars/${id}.svg`;
-  if (_v2AvatarKnown.has(type)) return `data/avatars/${type}.svg`;
+  const out = [];
+  const add = k => { if (k && !out.includes(k)) out.push(k); };
+  if (_v2AvatarKnown.has(id)) add(id);
+  if (_v2AvatarKnown.has(type)) add(type);
   for (const k of _v2AvatarKnown) {
-    if (id && (id.includes(k) || k.includes(id))) return `data/avatars/${k}.svg`;
+    if (id && (id.includes(k) || k.includes(id))) add(k);
   }
   for (const [t, av] of Object.entries(_v2TypeFallback)) {
-    if ((type && type.includes(t)) || (id && id.includes(t))) return `data/avatars/${av}.svg`;
+    if ((type && type.includes(t)) || (id && id.includes(t))) add(av);
   }
-  return 'data/avatars/coder.svg';
+  add('coder');
+  return out;
+}
+
+// Small stable string hash — used to deterministically (not randomly) pick a fallback
+// avatar for roles whose entire candidate list is already taken by a sibling role.
+function _v2StrHash(s) {
+  let h = 0;
+  for (let i = 0; i < String(s).length; i++) h = (h * 31 + String(s).charCodeAt(i)) >>> 0;
+  return h;
+}
+
+// Assigns each role in an org a distinct built-in avatar (no two roles in the same
+// org share one), while leaving any role with a custom uploaded avatar untouched.
+// Pure function of `roles` — cheap to recompute on every render, so callers should
+// NOT cache it across data reloads.
+function v2AvatarMapFor(roles) {
+  const list = Array.isArray(roles) ? roles : [];
+  const used = new Set();
+  const map = new Map();
+  const allKnown = Array.from(_v2AvatarKnown);
+  list.forEach(r => {
+    if (!r || !r.id) return;
+    if (r.avatar) { map.set(r.id, r.avatar); return; } // custom upload — exempt from dedup
+    const candidates = _v2AvatarCandidates(r);
+    let pick = candidates.find(c => !used.has(c));
+    if (!pick) {
+      const free = allKnown.filter(k => !used.has(k));
+      // Pool exhausted (org has more roles than the ~65 built-in avatars) — a genuine
+      // duplicate is unavoidable at that point, but hash across the FULL pool rather
+      // than always falling back to candidates[0] (which is guaranteed already taken,
+      // since the .find() above just failed on it), so overflow roles at least spread
+      // out instead of all collapsing onto the same one avatar.
+      pick = free.length ? free[_v2StrHash(r.id) % free.length] : allKnown[_v2StrHash(r.id) % allKnown.length];
+    }
+    used.add(pick);
+    map.set(r.id, `data/avatars/${pick}.svg`);
+  });
+  return map;
+}
+
+// avatarMap (from v2AvatarMapFor) is optional — pass it whenever sibling roles are
+// known, so avatars stay unique within the org; without it this falls back to the
+// single best guess for this role alone.
+function v2RoleAvatar(role, avatarMap) {
+  if (avatarMap && role && avatarMap.has(role.id)) return avatarMap.get(role.id);
+  if (role && role.avatar) return role.avatar;
+  return `data/avatars/${_v2AvatarCandidates(role)[0]}.svg`;
 }
 
 // ── org roles ───────────────────────────────
@@ -6764,6 +6397,7 @@ function v2RenderOrgRoles() {
   if (!leaderIds.size) leaderIds.add(roles[0]?.id);
   // Overlay live running status from in-memory agent SSE state
   const _rolesRunning = new Set((_v2OrgData?._agents || []).filter(a => a.status === 'running').map(a => a.id));
+  const _rolesAvMap = v2AvatarMapFor(roles);
   pane.innerHTML = `<div class="roles-v2-grid">${roles.map((r, i) => {
     const color = V2_ROLE_COLORS[i % V2_ROLE_COLORS.length];
     const isLeader = leaderIds.has(r.id);
@@ -6771,7 +6405,7 @@ function v2RenderOrgRoles() {
     const resps = Array.isArray(r.responsibilities) ? r.responsibilities : [];
     const displayName = r.name || r.title || r.id;
     const roleType = r.type || r.agent_type || '';
-    const avatarSrc = v2RoleAvatar(r);
+    const avatarSrc = v2RoleAvatar(r, _rolesAvMap);
     return `<div class="role-v2" style="border-top:2px solid ${color}" onclick="v2OpenAgent('${String(r.id).replace(/['\\]/g,'\\$&')}')" title="View agent characteristics, skills & instructions">
       <div class="rv2-head">
         <img class="rv2-avatar" src="${avatarSrc}" alt="${esc(displayName)}" loading="lazy" onerror="this.src='data/avatars/coder.svg'"/>
@@ -6828,10 +6462,15 @@ function v2RenderAgentDrawer(data) {
   const name = role.name || role.title || role.id || 'Agent';
   const type = role.agent_type || role.type || '';
   const model = (role.adapter_config && role.adapter_config.model) || cap.model_preference || '';
-  const avatar = v2RoleAvatar(role);
+  const siblingRoles = Array.isArray(_v2OrgData?.roles) ? _v2OrgData.roles : [role];
+  const avatar = v2RoleAvatar(role, v2AvatarMapFor(siblingRoles));
 
   headEl.innerHTML = `
-    <img class="oad-avatar" src="${avatar}" alt="${esc(name)}" onerror="this.src='data/avatars/coder.svg'"/>
+    <div class="oad-avatar-wrap" onclick="v2TriggerAvatarUpload('${String(role.id).replace(/['\\]/g,'\\$&')}')" title="Change avatar">
+      <img class="oad-avatar" id="oad-avatar-img" src="${avatar}" alt="${esc(name)}" onerror="this.src='data/avatars/coder.svg'"/>
+      <div class="oad-avatar-edit">✎</div>
+    </div>
+    <input type="file" id="oad-avatar-file" accept="image/png,image/jpeg,image/webp,image/gif" style="display:none" onchange="v2HandleAvatarFile(this)"/>
     <div class="oad-id">
       <div class="oad-name">${esc(name)}</div>
       <div class="oad-pills">
@@ -6871,6 +6510,62 @@ function v2RenderAgentDrawer(data) {
   bodyEl.innerHTML = html;
   bodyEl.scrollTop = 0;
 }
+
+// ── custom role avatar upload ────────────────
+function v2TriggerAvatarUpload(roleId) {
+  const inp = document.getElementById('oad-avatar-file');
+  if (!inp) return;
+  inp.dataset.roleId = roleId;
+  inp.value = '';
+  inp.click();
+}
+async function v2HandleAvatarFile(inputEl) {
+  const file = inputEl.files && inputEl.files[0];
+  const roleId = inputEl.dataset.roleId;
+  if (!file || !roleId || !_v2SelOrg) return;
+  if (!/^image\//.test(file.type)) { showToast('Error', 'Please choose an image file', 'err'); return; }
+  if (file.size > 5 * 1024 * 1024) { showToast('Error', 'Image too large (max 5MB)', 'err'); return; }
+  try {
+    const dataUrl = await v2DownscaleImageToDataUrl(file, 160);
+    const res = await fetch(`/api/org/${encodeURIComponent(_v2SelOrg)}/agent/${encodeURIComponent(roleId)}/avatar${DIR ? '?dir=' + encodeURIComponent(DIR) : ''}`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ avatarDataUrl: dataUrl }),
+    });
+    const data = await res.json();
+    if (!data.ok) throw new Error(data.error || 'failed');
+    const roles = Array.isArray(_v2OrgData?.roles) ? _v2OrgData.roles : [];
+    const r = roles.find(x => x.id === roleId);
+    if (r) r.avatar = dataUrl;
+    const imgEl = document.getElementById('oad-avatar-img');
+    if (imgEl) imgEl.src = dataUrl;
+    showToast('Avatar updated', roleId, 'ok');
+    if (document.getElementById('odt-roles')) v2RenderOrgRoles();
+    if (_v2SelOrg) v2RenderOrgChart();
+  } catch (e) { showToast('Error', e.message, 'err'); }
+}
+// Downscale/center-crop an uploaded image client-side before sending — avatars are
+// stored inline as data URLs in the org config JSON, so keeping them small matters.
+function v2DownscaleImageToDataUrl(file, size) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error('Could not read file'));
+    reader.onload = () => {
+      img.onerror = () => reject(new Error('Could not decode image'));
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = size; canvas.height = size;
+        const ctx = canvas.getContext('2d');
+        const s = Math.min(img.width, img.height);
+        ctx.drawImage(img, (img.width - s) / 2, (img.height - s) / 2, s, s, 0, 0, size, size);
+        resolve(canvas.toDataURL('image/png'));
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
 // Minimal, XSS-safe markdown → HTML (headings, lists, code, bold/italic, inline code).
 function v2RenderMarkdown(md) {
   if (!md) return '';
@@ -7634,6 +7329,7 @@ async function v2RenderOrgChat() {
         <div id="odt-chat-empty">Select a session to see agent communications.<br><span style="font-size:10px;opacity:0.5">Sessions appear after the first /mastermind:runorg</span></div>
       </div>
       <div id="odt-chat-compose">
+        <select id="odt-chat-role-sel" title="Send to"><option value="">boss (default)</option></select>
         <textarea id="odt-chat-input" rows="1" placeholder="Send a message to the org…" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();odtSendChatMessage();}"></textarea>
         <button id="odt-chat-send-btn" onclick="odtSendChatMessage()" disabled>SEND</button>
       </div>`;
@@ -7641,6 +7337,7 @@ async function v2RenderOrgChat() {
 
   // Restore saved chat mode (runs on every tab open so buttons stay in sync)
   initOdtChatMode();
+  populateOdtChatRoleSelect();
 
   // Reset state only when org changes (not on every tab-switch)
   if (_odtChatForOrg !== _v2SelOrg) {
@@ -8017,16 +7714,34 @@ function _odtPopulateChatSel() {
   }
 }
 
+function populateOdtChatRoleSelect() {
+  const sel = document.getElementById('odt-chat-role-sel');
+  if (!sel) return;
+  const roles = Array.isArray(_v2OrgData?.roles) ? _v2OrgData.roles : [];
+  const prev = sel.value;
+  sel.innerHTML = '<option value="">boss (default)</option>' +
+    roles.map(r => `<option value="${esc(r.id)}">${esc(r.title || r.id)}</option>`).join('');
+  if (roles.some(r => r.id === prev)) sel.value = prev;
+}
+
 window.odtSendChatMessage = async function() {
   const inp = document.getElementById('odt-chat-input');
   const btn = document.getElementById('odt-chat-send-btn');
+  const roleSel = document.getElementById('odt-chat-role-sel');
   if (!inp || !_v2SelOrg) return;
   const text = inp.value.trim();
   if (!text) return;
+  const role = roleSel ? roleSel.value : '';
   inp.value = '';
   btn.disabled = true;
   try {
-    await fetch('/api/orgs/'+encodeURIComponent(_v2SelOrg)+'/chat', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ text, runId: _odtChatCurrentId || null }) });
+    const _sendQ = DIR ? '?dir=' + encodeURIComponent(DIR) : '';
+    const res = await fetch('/api/orgs/'+encodeURIComponent(_v2SelOrg)+'/chat'+_sendQ, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ text, role: role || undefined, runId: _odtChatCurrentId || null }) });
+    const data = await res.json().catch(() => ({}));
+    if (!data.delivered) {
+      const lbl = document.getElementById('odt-chat-live-lbl');
+      if (lbl) { const prev = lbl.textContent; lbl.textContent = 'QUEUED (org offline)'; setTimeout(() => { lbl.textContent = prev; }, 4000); }
+    }
   } catch(e) {
     inp.value = text;
   } finally {
@@ -9183,6 +8898,7 @@ window.v2DeleteOrg = async function() {
     if (!r.ok) { const d = await r.json().catch(() => ({})); throw new Error(d.error || 'HTTP ' + r.status); }
     showToast('Deleted', `Org "${name}" deleted`, 'ok');
     _v2SelOrg = null;
+    if (btn) { btn.disabled = false; btn.textContent = 'Delete'; }
     const inner = document.getElementById('org-detail-inner');
     if (inner) inner.style.display = 'none';
     const noSel = document.querySelector('.orgs-no-sel');