@monoes/monomindcli 1.10.46 → 1.10.54

package/dist/src/ui/dashboard-v2.html

@@ -34,7 +34,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 #sb-logo { padding: 18px 16px 14px; border-bottom: 1px solid var(--border); }
 #sb-logo .mark { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-hi); }
 #sb-logo .proj { font-size: 11px; color: var(--accent); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
-#sb-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
+#sb-nav { flex: 1; padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; }
 .nav-sect { margin-bottom: 8px; }
 .nav-lbl { font-size: 10px; letter-spacing: 0.08em; color: var(--text-xs); padding: 8px 8px 4px; text-transform: uppercase; }
 .nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r); cursor: pointer; color: var(--text-mid); transition: background 0.1s, color 0.1s; user-select: none; }
@@ -44,6 +44,15 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .nav-item .lbl { font-size: 13px; }
 .nav-item .bdg { margin-left: auto; font-size: 10px; background: var(--surface-hi); color: var(--text-lo); border-radius: 8px; padding: 1px 6px; min-width: 18px; text-align: center; }
 .nav-item.active .bdg { background: var(--accent-dim); color: var(--accent); }
+/* project context section */
+#nav-project-ctx { display: none; }
+#nav-project-ctx.visible { display: block; }
+.nav-proj-hdr { display: flex; align-items: center; gap: 7px; padding: 10px 8px 5px; cursor: pointer; }
+.nav-proj-hdr:hover .nav-proj-name { color: var(--text-hi); }
+.nav-proj-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+.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; }
 #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); }
@@ -211,12 +220,103 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .dr-ts { font-size: 10px; color: var(--text-lo); margin-top: 2px; }
 .drawer-item.hidden { display: none; }
 
-/* orgs */
-.org-list { display: flex; flex-direction: column; gap: 6px; }
-.org-row { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 11px 14px; cursor: pointer; transition: border-color 0.12s; }
-.org-row:hover { border-color: var(--accent); }
-.org-name { font-size: 13px; color: var(--text-hi); font-weight: 500; }
-.org-meta { font-size: 11px; color: var(--text-lo); margin-top: 3px; }
+/* orgs ── two-panel layout */
+#view-orgs { flex-direction: row; }
+#orgs-list-pane { width: 280px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
+#orgs-list-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+#orgs-list-scroll { flex: 1; overflow-y: auto; padding: 8px; }
+#orgs-list-scroll::-webkit-scrollbar { width: 3px; }
+#orgs-list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.orgs-view-title { font-size: 14px; font-weight: 600; color: var(--text-hi); }
+.orgs-view-sub { font-size: 11px; color: var(--text-lo); margin-top: 2px; }
+
+.org-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border-radius: var(--r); cursor: pointer; transition: background 0.09s; border: 1px solid transparent; }
+.org-item:hover { background: var(--surface-hi); }
+.org-item.active { background: var(--accent-dim); border-color: oklch(72% 0.18 75 / 0.25); }
+.oi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex-shrink: 0; margin-top: 4px; transition: background 0.3s; }
+.oi-dot.running { background: var(--green); box-shadow: 0 0 5px oklch(65% 0.15 150 / 0.5); }
+@media (prefers-reduced-motion: no-preference) { .oi-dot.running { animation: blink 2s ease-in-out infinite; } }
+.oi-body { flex: 1; min-width: 0; }
+.oi-name { font-size: 13px; font-weight: 500; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oi-goal { font-size: 11px; color: var(--text-lo); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oi-chips { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
+.oi-chip { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: var(--surface-hi); color: var(--text-lo); }
+.oi-chip.live { background: oklch(65% 0.15 150 / 0.12); color: var(--green); }
+
+/* detail pane */
+#org-detail-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+#org-detail-pane.empty-state { align-items: center; justify-content: center; }
+.orgs-no-sel { color: var(--text-lo); font-size: 13px; text-align: center; }
+.orgs-no-sel-ico { font-size: 28px; margin-bottom: 10px; opacity: 0.3; }
+
+#org-detail-head { padding: 12px 18px 11px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
+.odh-name { font-size: 16px; font-weight: 600; color: var(--text-hi); }
+.odh-badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
+.odh-badge.idle { background: var(--surface-hi); color: var(--text-lo); }
+.odh-badge.live { background: oklch(65% 0.15 150 / 0.12); color: var(--green); }
+.odh-pill { font-size: 11px; padding: 2px 8px; border-radius: 8px; background: var(--surface); color: var(--text-lo); border: 1px solid var(--border); }
+.odh-right { margin-left: auto; display: flex; gap: 6px; }
+
+#org-detail-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 16px; }
+.odt-btn { font-size: 12px; padding: 8px 12px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; color: var(--text-lo); font-family: var(--sans); transition: color 0.1s; }
+.odt-btn:hover { color: var(--text-hi); }
+.odt-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+#org-detail-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
+#org-detail-body::-webkit-scrollbar { width: 3px; }
+#org-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.odt-pane { display: none; }
+.odt-pane.active { display: block; }
+
+/* org meta strip */
+.org-meta-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
+.oms-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; }
+.oms-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-lo); margin-bottom: 4px; }
+.oms-val { font-size: 12px; color: var(--text-hi); word-break: break-word; line-height: 1.4; }
+
+/* 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; }
+.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); }
+
+/* roles in v2 */
+.roles-v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
+.role-v2 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
+.rv2-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
+.rv2-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
+.rv2-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
+.rv2-title { font-size: 13px; font-weight: 500; color: var(--text-hi); line-height: 1.3; }
+.rv2-agent { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: var(--accent-dim); color: var(--accent); white-space: nowrap; align-self: flex-start; }
+.rv2-id { font-size: 10px; color: var(--text-lo); font-family: var(--mono); margin-bottom: 4px; }
+.rv2-reports { font-size: 11px; color: var(--text-lo); margin-bottom: 6px; }
+.rv2-reports span { color: var(--text-mid); }
+.rv2-resps { }
+.rv2-resp { font-size: 11px; color: var(--text-lo); line-height: 1.6; display: flex; gap: 6px; }
+.rv2-resp::before { content: '–'; opacity: 0.4; flex-shrink: 0; }
+/* role avatars in org list */
+.oi-avatars { display: flex; margin-top: 5px; }
+.oi-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-right: -5px; border: 1.5px solid var(--bg); }
+.oi-av-more { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); font-size: 9px; color: var(--text-lo); display: flex; align-items: center; justify-content: center; margin-right: -5px; }
+/* chart avatar clip */
+.v2oc-node image { pointer-events: none; }
+
+/* activity in v2 */
+.act-v2-list { display: flex; flex-direction: column; }
+.av2-row { display: grid; grid-template-columns: 56px 90px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid oklch(25% 0.008 55 / 0.5); font-size: 11px; align-items: baseline; }
+.av2-row:last-child { border-bottom: none; }
+.av2-time { color: var(--text-xs); font-family: var(--mono); font-size: 10px; }
+.av2-type { color: var(--accent); font-weight: 500; }
+.av2-msg  { color: var(--text-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* health in v2 */
+.health-v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
+.hv2-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; }
+.hv2-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-lo); margin-bottom: 4px; }
+.hv2-val { font-size: 20px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); }
+.hv2-val.green { color: var(--green); }
+.hv2-val.amber { color: var(--accent); }
+.hv2-val.red   { color: var(--red); }
 
 /* ── alerts rail ─────────────────────────────────────────── */
 #alerts-rail { display: none; flex-shrink: 0; border-bottom: 1px solid var(--border); padding: 0 16px; min-height: 36px; flex-direction: row; gap: 8px; align-items: center; overflow-x: auto; }
@@ -832,7 +932,12 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 .ctx-pressure-fill.warn { background:oklch(70% 0.18 80); }
 .ctx-pressure-fill.crit { background:oklch(65% 0.2 25); }
 .ctx-pressure-lbl { font-size:9px; color:var(--text-xs); white-space:nowrap; }
+/* org chart nodes — CSS fallback animation */
+.v2oc-node { transform-box: fill-box; transform-origin: center center; }
+@keyframes v2nodeIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+@keyframes v2edgeIn { from { opacity: 0; } to { opacity: 1; } }
 </style>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
 <div id="app">
@@ -848,30 +953,36 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
       <div class="nav-item active" data-view="now">
         <span class="ico">◉</span><span class="lbl">Now</span>
       </div>
-    </div>
-    <div class="nav-sect">
-      <div class="nav-lbl">Workspace</div>
       <div class="nav-item" data-view="projects">
         <span class="ico">⊞</span><span class="lbl">Projects</span>
         <span class="bdg" id="bdg-projects">—</span>
       </div>
-      <div class="nav-item" data-view="sessions">
-        <span class="ico">◫</span><span class="lbl">Sessions</span>
-        <span class="bdg" id="bdg-sessions">—</span>
-      </div>
-      <div class="nav-item" data-view="loops">
-        <span class="ico">↺</span><span class="lbl">Loops</span>
-        <span class="bdg" id="bdg-loops">—</span>
-      </div>
     </div>
-    <div class="nav-sect">
-      <div class="nav-lbl">Intelligence</div>
-      <div class="nav-item" data-view="memory">
-        <span class="ico">◈</span><span class="lbl">Memory</span>
+    <!-- project-scoped section: hidden until a project is selected -->
+    <div id="nav-project-ctx">
+      <div class="nav-proj-hdr" onclick="switchView('projects')" title="Change project">
+        <div class="nav-proj-dot"></div>
+        <div class="nav-proj-name" id="nav-proj-name">—</div>
       </div>
-      <div class="nav-item" data-view="orgs">
-        <span class="ico">⬡</span><span class="lbl">Orgs</span>
+      <div class="nav-proj-items">
+        <div class="nav-item" data-view="sessions">
+          <span class="ico">◫</span><span class="lbl">Sessions</span>
+          <span class="bdg" id="bdg-sessions">—</span>
+        </div>
+        <div class="nav-item" data-view="loops">
+          <span class="ico">↺</span><span class="lbl">Loops</span>
+          <span class="bdg" id="bdg-loops">—</span>
+        </div>
+        <div class="nav-item" data-view="memory">
+          <span class="ico">◈</span><span class="lbl">Memory</span>
+        </div>
+        <div class="nav-item" data-view="orgs">
+          <span class="ico">⬡</span><span class="lbl">Orgs</span>
+        </div>
       </div>
+    </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>
@@ -1180,10 +1291,47 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
 
     <!-- ORGS -->
     <div class="view" id="view-orgs">
-      <div class="vscroll">
-        <div class="pg-title">Orgs</div>
-        <div class="pg-sub">MASTERMIND organizations and swarms</div>
-        <div id="orgs-content"><div class="loading-txt">Loading…</div></div>
+      <!-- List sidebar -->
+      <div id="orgs-list-pane">
+        <div id="orgs-list-head">
+          <div class="orgs-view-title">Orgs <span id="orgs-proj-label" style="font-size:11px;font-weight:400;opacity:0.5;margin-left:6px;"></span></div>
+          <div class="orgs-view-sub" id="orgs-view-sub">MASTERMIND organizations</div>
+        </div>
+        <div id="orgs-list-scroll">
+          <div class="loading-txt" id="orgs-list-content">Loading…</div>
+        </div>
+      </div>
+      <!-- Detail pane -->
+      <div id="org-detail-pane" class="empty-state">
+        <div class="orgs-no-sel">
+          <div class="orgs-no-sel-ico">⬡</div>
+          Select an org
+        </div>
+        <div id="org-detail-inner" style="display:none;width:100%;height:100%;display:none;flex-direction:column;overflow:hidden;">
+          <div id="org-detail-head">
+            <div>
+              <div class="odh-name" id="odh-name">—</div>
+            </div>
+            <span class="odh-badge idle" id="odh-badge">IDLE</span>
+            <span class="odh-pill" id="odh-topo">—</span>
+            <span class="odh-pill" id="odh-roles">0 roles</span>
+            <div class="odh-right">
+              <button class="btn" id="org-stop-btn" onclick="v2StopOrg()" style="display:none;color:var(--red);border-color:oklch(60% 0.18 25 / 0.4)">Stop</button>
+            </div>
+          </div>
+          <div id="org-detail-tabs">
+            <button class="odt-btn active" data-tab="chart" onclick="v2SwitchOrgTab('chart')">Chart</button>
+            <button class="odt-btn" data-tab="roles" onclick="v2SwitchOrgTab('roles')">Roles</button>
+            <button class="odt-btn" data-tab="activity" onclick="v2SwitchOrgTab('activity')">Activity</button>
+            <button class="odt-btn" data-tab="health" onclick="v2SwitchOrgTab('health')">Health</button>
+          </div>
+          <div id="org-detail-body">
+            <div class="odt-pane active" id="odt-chart"></div>
+            <div class="odt-pane" id="odt-roles"></div>
+            <div class="odt-pane" id="odt-activity"></div>
+            <div class="odt-pane" id="odt-health"></div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -1325,6 +1473,7 @@ async function init() {
     document.getElementById('sb-user').textContent = gu.name || gu.email || '—';
     document.getElementById('sb-path').textContent = DIR;
     document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
+    _showNavProjectCtx(DIR);
   } catch (_) {}
   // deep-link: ?sess=<id>&proj=<path>
   const params = new URLSearchParams(window.location.search);
@@ -1334,6 +1483,7 @@ async function init() {
     DIR = projParam;
     document.getElementById('sb-proj').textContent = DIR.split('/').filter(Boolean).pop() || '—';
     document.getElementById('sb-path').textContent = DIR;
+    _showNavProjectCtx(DIR);
   }
   restoreURLParams();
   viewRendered['now'] = true;
@@ -1369,13 +1519,36 @@ async function apiFetch(url) {
 }
 
 // ── project switching ──────────────────────────────────────
+function _showNavProjectCtx(path) {
+  const projName = (path || '').split('/').filter(Boolean).pop() || '';
+  const ctx = document.getElementById('nav-project-ctx');
+  const hint = document.getElementById('nav-no-proj-hint');
+  if (projName) {
+    document.getElementById('nav-proj-name').textContent = projName;
+    ctx.classList.add('visible');
+    hint.style.display = 'none';
+  } else {
+    ctx.classList.remove('visible');
+    hint.style.display = '';
+  }
+}
+
 function switchProject(path) {
   if (DIR === path) { switchView('sessions'); return; }
   DIR = path;
   document.getElementById('sb-proj').textContent = path.split('/').filter(Boolean).pop() || '—';
   document.getElementById('sb-path').textContent = path;
+  _showNavProjectCtx(path);
   viewRendered = {};
   allSessions = [];
+  _v2SelOrg = null;
+  _v2OrgData = null;
+  _v2Orgs = [];
+  Object.keys(_v2OrgEventLog).forEach(k => delete _v2OrgEventLog[k]);
+  document.getElementById('org-detail-pane')?.classList.add('empty-state');
+  document.getElementById('org-detail-inner') && (document.getElementById('org-detail-inner').style.display = 'none');
+  const _noSel = document.querySelector('#org-detail-pane .orgs-no-sel');
+  if (_noSel) _noSel.style.display = '';
   closeDetail();
   switchView('sessions');
 }
@@ -3204,26 +3377,593 @@ function filterMemoryNs(ns) {
 }
 
 // ── orgs ───────────────────────────────────────────────────
+let _v2Orgs = [];
+let _v2SelOrg = null;
+let _v2OrgData = null;
+let _v2OrgTab = 'chart';
+const _v2OrgEventLog = {};
+
 async function renderOrgs() {
-  const el = document.getElementById('orgs-content');
-  el.innerHTML = '<div class="loading-txt">Loading…</div>';
   try {
-    const data = await apiFetch('/api/orgs');
-    const orgs = Array.isArray(data) ? data : (data.orgs || []);
-    if (!orgs.length) {
-      el.innerHTML = '<div class="empty"><div class="empty-ico">⬡</div><div>No MASTERMIND orgs found</div></div>';
-      return;
+    const q = DIR ? '?dir=' + encodeURIComponent(DIR) : '';
+    const data = await apiFetch('/api/orgs' + q);
+    _v2Orgs = Array.isArray(data) ? data : (data.orgs || []);
+  } catch (_) { _v2Orgs = []; }
+  // Show current project name in sub-header
+  const orgProjLabel = document.getElementById('orgs-proj-label');
+  if (orgProjLabel) orgProjLabel.textContent = DIR ? DIR.split('/').filter(Boolean).pop() : '';
+  try { v2RenderOrgList(); } catch (_) {}
+}
+
+function v2RenderOrgList() {
+  const wrap = document.getElementById('orgs-list-scroll');
+  const sub  = document.getElementById('orgs-view-sub');
+  if (!wrap || !sub) return;
+  const running = _v2Orgs.filter(o => o.running).length;
+  sub.textContent = running > 0
+    ? `${_v2Orgs.length} orgs · ${running} running`
+    : `${_v2Orgs.length} org${_v2Orgs.length !== 1 ? 's' : ''}`;
+
+  if (!_v2Orgs.length) {
+    wrap.innerHTML = '<div class="empty"><div class="empty-ico">⬡</div><div>No orgs found<br><span style="font-size:11px;color:var(--text-xs)">/mastermind:createorg</span></div></div>';
+    return;
+  }
+
+  wrap.innerHTML = _v2Orgs.map(o => {
+    const rolesArr = Array.isArray(o.roles) ? o.roles : [];
+    const rolesN = rolesArr.length || (typeof o.roles === 'number' ? o.roles : 0);
+    const active = _v2SelOrg === o.name ? ' active' : '';
+    const goalSnip = (o.goal || '').slice(0, 60) + ((o.goal || '').length > 60 ? '…' : '');
+    const MAX_SHOW = 4;
+    const shownRoles = rolesArr.slice(0, MAX_SHOW);
+    const extraCount = rolesN - shownRoles.length;
+    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('')}
+      ${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)">
+      <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 live">LIVE</span>' : ''}
+          <span class="oi-chip">${rolesN} roles</span>
+          <span class="oi-chip">${esc(o.topology || 'hierarchical')}</span>
+        </div>
+        ${avatarsHtml}
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function v2SelectOrg(name) {
+  _v2SelOrg = name;
+  const requested = name;
+  const requestedDir = DIR;
+  document.querySelectorAll('.org-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.org === name);
+  });
+
+  // Show detail inner, hide placeholder
+  const pane = document.getElementById('org-detail-pane');
+  if (!pane) return;
+  pane.classList.remove('empty-state');
+  const noSel = pane.querySelector('.orgs-no-sel');
+  if (noSel) noSel.style.display = 'none';
+  const inner = document.getElementById('org-detail-inner');
+  if (!inner) return;
+  inner.style.display = 'flex';
+
+  // Populate header from list data
+  const listOrg = _v2Orgs.find(o => o.name === name) || {};
+  v2UpdateOrgHeader(listOrg, null);
+
+  // Fetch full data
+  _v2OrgData = null;
+  const _enc = encodeURIComponent(name);
+  try {
+    const [mainR, actR, healthR] = await Promise.all([
+      apiFetch(`/api/org/${_enc}${DIR ? '?dir=' + encodeURIComponent(DIR) : ''}`),
+      fetch(`/api/org/${_enc}/activity${DIR ? '?dir=' + encodeURIComponent(DIR) : ''}`).then(r=>r.ok?r.json():[]).catch(()=>[]),
+      fetch(`/api/org/${_enc}/health${DIR ? '?dir=' + encodeURIComponent(DIR) : ''}`).then(r=>r.ok?r.json():null).catch(()=>null),
+    ]);
+    if (_v2SelOrg !== requested || DIR !== requestedDir) return;
+    // API returns {config, state, goals, ...} — flatten config; config wins for schema fields
+    _v2OrgData = mainR.config ? { ...mainR, ...mainR.config, running: mainR.running } : mainR;
+    _v2OrgData._activity = Array.isArray(actR) ? actR : [];
+    _v2OrgData._health   = healthR;
+  } catch (_) {
+    if (_v2SelOrg !== requested || DIR !== requestedDir) return;
+    _v2OrgData = { ...listOrg, communication: [], _activity: [], _health: null };
+  }
+
+  v2UpdateOrgHeader(listOrg, _v2OrgData);
+  v2RenderOrgTab(_v2OrgTab);
+}
+
+function v2UpdateOrgHeader(listOrg, data) {
+  document.getElementById('odh-name').textContent = listOrg.name || _v2SelOrg || '—';
+  const running = data ? (data.running ?? listOrg.running) : listOrg.running;
+  const badge = document.getElementById('odh-badge');
+  badge.textContent = running ? 'LIVE' : 'IDLE';
+  badge.className = 'odh-badge ' + (running ? 'live' : 'idle');
+  const roles = data ? (Array.isArray(data.roles) ? data.roles.length : (data.roles || 0)) : (listOrg.roles || 0);
+  document.getElementById('odh-roles').textContent = roles + ' role' + (roles !== 1 ? 's' : '');
+  document.getElementById('odh-topo').textContent = (data?.topology || listOrg.topology || '—');
+  document.getElementById('org-stop-btn').style.display = running ? '' : 'none';
+}
+
+window.v2SwitchOrgTab = function(tab) {
+  _v2OrgTab = tab;
+  document.querySelectorAll('.odt-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.tab === tab);
+  });
+  document.querySelectorAll('.odt-pane').forEach(p => p.classList.remove('active'));
+  document.getElementById('odt-' + tab)?.classList.add('active');
+  v2RenderOrgTab(tab);
+};
+
+function v2RenderOrgTab(tab) {
+  if (!_v2OrgData) {
+    const p = document.getElementById('odt-' + tab);
+    if (p) p.innerHTML = '<div class="empty">Loading…</div>';
+    return;
+  }
+  if (tab === 'chart')    v2RenderOrgChart();
+  else if (tab === 'roles')    v2RenderOrgRoles();
+  else if (tab === 'activity') v2RenderOrgActivity();
+  else if (tab === 'health')   v2RenderOrgHealth();
+}
+
+// ── org chart ───────────────────────────────
+function _v2OrgIsLeader(r) {
+  return r.id === 'boss' || r.type === 'coordinator' || r.type === 'planner';
+}
+
+function v2RenderOrgChart() {
+  if (!_v2SelOrg) return;
+  const d = _v2OrgData;
+  if (!d) return;
+  const roles = Array.isArray(d.roles) ? d.roles : [];
+  const listOrg = _v2Orgs.find(o => o.name === _v2SelOrg) || {};
+  const isRunning = listOrg.running || d.running;
+  const goalText = d.goal || '—';
+  const topo = (d.topology || 'hierarchical').toLowerCase();
+  const created = d.created_at ? new Date(d.created_at).toLocaleDateString('en', {month:'short',day:'numeric',year:'numeric'}) : '—';
+  const pane = document.getElementById('odt-chart');
+
+  // ── color palette ─────────────────────────────────────
+  const COLORS = [
+    'oklch(72% 0.18 75)',   // amber — leader
+    'oklch(65% 0.12 240)',  // blue
+    'oklch(65% 0.15 150)',  // green
+    'oklch(65% 0.13 290)',  // purple
+    'oklch(65% 0.14 35)',   // orange
+    'oklch(62% 0.12 195)',  // cyan
+  ];
+  // fix: reserve COLORS[0] for leaders; non-leaders start at index 1
+  const colorOf = (role, idx) => COLORS[_v2OrgIsLeader(role) ? 0 : (idx % (COLORS.length - 1)) + 1];
+
+  // ── auto-generate edges ───────────────────────────────
+  let comms = Array.isArray(d.communication) ? [...d.communication] : [];
+  if (!comms.length && roles.length > 1) {
+    const _lr0 = roles.find(_v2OrgIsLeader) || roles[0];
+    comms = roles.filter(r => r.id !== _lr0.id).flatMap(r => [
+      { from: _lr0.id, to: r.id, type: 'command' },
+      { from: r.id, to: _lr0.id, type: 'report' },
+    ]);
+  }
+
+  // ── layout positions ──────────────────────────────────
+  const W = 720, R = 42, PAD_X = R + 20, PAD_Y = R + 24;
+  const roleIds = new Set(roles.map(r => r.id));
+  // all leaders at depth 0 (supports co-lead orgs)
+  const leaders = roles.filter(_v2OrgIsLeader);
+  const lr = leaders[0] || roles[0];
+  const hasSubs = lr && roles.length > 1;
+
+  const pos = {};
+  let _layoutH = null; // separate from pos to avoid key collision
+
+  const _hubAndSpoke = () => {
+    if (leaders.length > 0) {
+      leaders.forEach((r, i) => {
+        const x = leaders.length === 1 ? W / 2 : PAD_X + ((W - PAD_X * 2) / (leaders.length - 1)) * i;
+        pos[r.id] = { x, y: PAD_Y };
+      });
     }
-    el.innerHTML = '<div class="org-list">' + orgs.map(o =>
-      `<div class="org-row">
-        <div class="org-name">${esc(o.name || o.id || '—')}</div>
-        <div class="org-meta">${esc(o.description || (o.agents != null ? o.agents + ' agents' : ''))}</div>
-      </div>`).join('') + '</div>';
-  } catch (err) {
-    el.innerHTML = '<div class="empty">Could not load orgs: ' + esc(err.message) + '</div>';
+    const subs = roles.filter(r => !_v2OrgIsLeader(r));
+    const usableW = W - PAD_X * 2;
+    // collapse to single row when no leaders — avoids blank 220px upper band
+    const subY = leaders.length > 0 ? PAD_Y + 220 : PAD_Y;
+    subs.forEach((r, i) => {
+      const x = subs.length === 1 ? W / 2 : PAD_X + (usableW / (subs.length - 1)) * i;
+      pos[r.id] = { x, y: subY };
+    });
+    const _hasBothRows = leaders.length > 0 && subs.length > 0;
+    _layoutH = _hasBothRows ? PAD_Y + 220 + R + 8 : PAD_Y + R + 8;
+  };
+
+  if (!roles.length) {
+    // nothing
+  } else if (!hasSubs) {
+    pos[roles[0].id] = { x: W / 2, y: 90 };
+  } else if (topo === 'mesh') {
+    // circular — radius and cy both scale with n to prevent overlap and top-clip
+    const n = roles.length, cx = W / 2;
+    const minRad = (2 * R + 6) * n / (2 * Math.PI);
+    const rad = Math.max(minRad, Math.min((W - PAD_X * 2) / 2, 130) * 0.82);
+    const cy = Math.max(170, rad + PAD_Y); // shift center down so top nodes stay in viewBox
+    roles.forEach((r, i) => {
+      const a = (2 * Math.PI * i / n) - Math.PI / 2;
+      pos[r.id] = { x: cx + rad * Math.cos(a), y: cy + rad * Math.sin(a) };
+    });
+    _layoutH = Math.round(cy + rad + PAD_Y);
+  } else if (topo === 'ring' || topo === 'pipeline') {
+    // linear sequence
+    const usableW = W - PAD_X * 2;
+    roles.forEach((r, i) => {
+      const x = roles.length === 1 ? W / 2 : PAD_X + (usableW / (roles.length - 1)) * i;
+      pos[r.id] = { x, y: 90 };
+    });
+    _layoutH = 180;
+  } else if (Array.isArray(d.communication) && d.communication.length > 0) {
+    // BFS multi-level layout — only traverse forward (non-report) edges
+    const fwdEdges = comms.filter(e => e.type !== 'report');
+    if (!fwdEdges.length) {
+      // all-report graph: render as hub-and-spoke
+      _hubAndSpoke();
+    } else {
+      const depth = {};
+      leaders.forEach(r => { depth[r.id] = 0; });
+      const queue = [...leaders.map(r => r.id)];
+      while (queue.length) {
+        const cur = queue.shift();
+        fwdEdges.forEach(e => {
+          // fix: skip ghost ids not present in roles
+          if (e.from === cur && roleIds.has(e.to) && depth[e.to] === undefined) {
+            depth[e.to] = depth[cur] + 1;
+            queue.push(e.to);
+          }
+        });
+      }
+      roles.forEach(r => { if (depth[r.id] === undefined) depth[r.id] = 1; });
+      // normalize: shift all depths so the shallowest layer is 0 — avoids blank top band when leaders=[]
+      const minDepth = Math.min(...roles.map(r => depth[r.id]));
+      if (minDepth > 0) roles.forEach(r => { depth[r.id] -= minDepth; });
+      const maxDepth = Math.max(...roles.map(r => depth[r.id]));
+      const layerOf = {};
+      for (let d2 = 0; d2 <= maxDepth; d2++) layerOf[d2] = [];
+      roles.forEach(r => layerOf[depth[r.id]].push(r));
+
+      const LAYER_H = 110;
+      _layoutH = PAD_Y + maxDepth * LAYER_H + R + 24; // bottom row center + radius + margin
+
+      for (let d2 = 0; d2 <= maxDepth; d2++) {
+        const layer = layerOf[d2];
+        const usableW = W - PAD_X * 2;
+        layer.forEach((r, i) => {
+          const x = layer.length === 1 ? W / 2 : PAD_X + (usableW / (layer.length - 1)) * i;
+          pos[r.id] = { x, y: PAD_Y + d2 * LAYER_H };
+        });
+      }
+    }
+  } else {
+    _hubAndSpoke();
+  }
+
+  const H = _layoutH || (hasSubs ? 320 : 180);
+
+  // ── build edge SVG strings with offset parallel arrows ─
+  let edgesHTML = '', particlesHTML = '';
+  const OFFSET = 8; // perpendicular offset px between cmd/report arrows
+
+  comms.forEach((edge, ei) => {
+    if (edge.from === edge.to) return; // skip self-loops — zero-length path parks a static particle
+    const fp = pos[edge.from], tp = pos[edge.to];
+    if (!fp || !tp) return;
+    const dx = tp.x - fp.x, dy = tp.y - fp.y;
+    const len = Math.sqrt(dx * dx + dy * dy) || 1;
+    // Perpendicular unit vector — derived from canonical direction to stay
+    // consistent for both halves of an anti-parallel pair (A→B and B→A),
+    // so command and report arrows always offset to opposite sides.
+    const canonDir = String(edge.from) < String(edge.to) ? 1 : -1;
+    const px = (-dy / len) * canonDir, py = (dx / len) * canonDir;
+    const edgeSide = edge.type === 'report' ? -1 : 1;
+    const ox = px * OFFSET * edgeSide, oy = py * OFFSET * edgeSide;
+    // Trim from circle edges
+    const trimS = R + 3, trimE = R + 8;
+    const x1 = (fp.x + ox + dx / len * trimS).toFixed(1);
+    const y1 = (fp.y + oy + dy / len * trimS).toFixed(1);
+    const x2 = (tp.x + ox - dx / len * trimE).toFixed(1);
+    const y2 = (tp.y + oy - dy / len * trimE).toFixed(1);
+    const pid = `v2ep${ei}`;
+
+    let stroke, dash, marker, opacity, sw;
+    if (edge.type === 'command') {
+      stroke='oklch(72% 0.18 75)'; dash=''; marker='v2ac'; opacity=0.7; sw=1.8;
+    } else if (edge.type === 'report') {
+      stroke='oklch(65% 0.12 240)'; dash='5 4'; marker='v2ar'; opacity=0.55; sw=1.2;
+    } else {
+      stroke='oklch(65% 0.15 150)'; dash=''; marker='v2ah'; opacity=0.6; sw=1.5;
+    }
+    edgesHTML += `<path id="${pid}" class="v2oc-edge" d="M${x1},${y1} L${x2},${y2}" stroke="${stroke}" stroke-opacity="${opacity}" stroke-width="${sw}" ${dash?`stroke-dasharray="${dash}"`:''}  fill="none" marker-end="url(#${marker})"/>`;
+
+    // Animated flow particle on command edges
+    if (edge.type === 'command') {
+      const delay = (ei * 0.4).toFixed(2);
+      particlesHTML += `<circle class="v2oc-particle" r="3.5" fill="${stroke}" opacity="0.7">
+        <animateMotion dur="2s" repeatCount="indefinite" begin="${delay}s"><mpath href="#${pid}" xlink:href="#${pid}"/></animateMotion>
+      </circle>`;
+    }
+  });
+
+  // ── build node SVG strings ─────────────────────────────
+  // Pre-build per-node clipPath ids for avatar images
+  const nodeClipIds = roles.map((r, i) => `v2ac-${_v2SelOrg.replace(/\W/g,'')}-${i}`);
+  const avatarClipDefs = roles.map((r, i) =>
+    `<clipPath id="${nodeClipIds[i]}"><circle r="${Math.round(R * 0.52)}"/></clipPath>`
+  ).join('');
+
+  let nodesHTML = '';
+  roles.forEach((role, i) => {
+    const p = pos[role.id];
+    if (!p) return;
+    const leader = _v2OrgIsLeader(role);
+    const color = colorOf(role, i);
+    const displayName = role.name || role.title || role.id;
+    const subType = role.type || role.agent_type || '';
+    const MAX_LBL = Math.floor(R / 4.2);
+    const nameText = displayName.length > MAX_LBL ? displayName.slice(0, MAX_LBL - 1) + '…' : displayName;
+    const subTypeText = subType.length > MAX_LBL ? subType.slice(0, MAX_LBL - 1) + '…' : subType;
+    const outerRing = leader ? `<circle r="${R + 9}" fill="none" stroke="${color}" stroke-width="0.6" opacity="0.18"/>` : '';
+    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);
+    nodesHTML += `<g class="v2oc-node" transform="translate(${p.x.toFixed(1)},${p.y.toFixed(1)})">
+      <title>${esc(displayName)}${subType ? ` · ${esc(subType)}` : ''}</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')"/>
+      <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>` : ''}
+    </g>`;
+  });
+
+  // ── assemble HTML ─────────────────────────────────────
+  pane.innerHTML = `
+    <div class="org-meta-strip">
+      <div class="oms-cell"><div class="oms-lbl">Goal</div><div class="oms-val" style="color:var(--text-mid);font-size:11px;line-height:1.4">${esc(goalText)}</div></div>
+      <div class="oms-cell"><div class="oms-lbl">Topology</div><div class="oms-val">${esc(topo)}</div></div>
+      <div class="oms-cell"><div class="oms-lbl">Created</div><div class="oms-val" style="color:var(--text-mid)">${esc(created)}</div></div>
+    </div>
+    <div class="org-chart-wrap">
+      <svg class="org-chart-svg" id="v2-org-svg" viewBox="0 0 ${W} ${H}" style="min-height:${Math.round(H * 0.5)}px">
+        <defs>
+          <marker id="v2ac" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0.5 L0,6.5 L6,3.5 z" fill="oklch(72% 0.18 75 / 0.8)"/></marker>
+          <marker id="v2ar" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0.5 L0,6.5 L6,3.5 z" fill="oklch(65% 0.12 240 / 0.7)"/></marker>
+          <marker id="v2ah" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0.5 L0,6.5 L6,3.5 z" fill="oklch(65% 0.15 150 / 0.75)"/></marker>
+          <filter id="v2glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
+            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+          </filter>
+          ${avatarClipDefs}
+        </defs>
+        <rect width="${W}" height="${H}" fill="oklch(12% 0.008 55)"/>
+        <g id="v2oc-edges">${edgesHTML}</g>
+        <g id="v2oc-nodes">${nodesHTML}</g>
+        <g id="v2oc-particles" opacity="${isRunning ? 1 : 0}">${particlesHTML}</g>
+      </svg>
+    </div>
+    <div class="org-chart-legend" style="margin-top:10px">
+      <div class="ocl-item"><span style="display:inline-block;width:20px;height:2px;background:oklch(72% 0.18 75);vertical-align:middle;margin-right:3px;border-radius:1px"></span>Command</div>
+      <div class="ocl-item"><span style="display:inline-block;width:20px;height:1px;background:oklch(65% 0.12 240);vertical-align:middle;margin-right:3px;border-top:1px dashed oklch(65% 0.12 240)"></span>Report</div>
+      <div class="ocl-item"><span style="display:inline-block;width:20px;height:2px;background:oklch(65% 0.15 150);vertical-align:middle;margin-right:3px;border-radius:1px"></span>Handoff</div>
+    </div>`;
+
+  // ── GSAP entrance animation ───────────────────────────
+  if (typeof gsap !== 'undefined') {
+    const nodes = pane.querySelectorAll('.v2oc-node');
+    const edges = pane.querySelectorAll('.v2oc-edge');
+    // Nodes: scale + fade in, staggered
+    gsap.fromTo(nodes,
+      { scale: 0, autoAlpha: 0 },
+      { scale: 1, autoAlpha: 1, duration: 0.5, ease: 'back.out(1.7)', stagger: 0.08 }
+    );
+    // Edges: draw along path after nodes appear
+    edges.forEach((path, i) => {
+      const pathLen = path.getTotalLength ? path.getTotalLength() : 200;
+      gsap.fromTo(path,
+        { strokeDasharray: pathLen, strokeDashoffset: pathLen, autoAlpha: 0 },
+        { strokeDashoffset: 0, autoAlpha: 1, duration: 0.65, ease: 'power2.out', delay: 0.3 + i * 0.04 }
+      );
+    });
+  } else {
+    // CSS fallback: simple fade-in stagger
+    pane.querySelectorAll('.v2oc-node').forEach((el, i) => {
+      el.style.animation = `v2nodeIn 0.45s cubic-bezier(0.34,1.56,0.64,1) ${(i * 0.08).toFixed(2)}s forwards`;
+      el.style.opacity = '0';
+    });
+  }
+}
+
+
+// ── avatar lookup ────────────────────────────
+const _v2AvatarKnown = new Set([
+  'coder','senior-developer','reviewer','tester','planner','researcher',
+  'security-architect','security-auditor','threat-detection','input-validator',
+  'path-validator','safe-executor','hierarchical-coord','mesh-coordinator',
+  'adaptive-coordinator','collective-coord','queen-coordinator','worker-specialist',
+  'byzantine-coord','raft-manager','gossip-coordinator','crdt-synchronizer',
+  'quorum-manager','consensus-coordinator','perf-analyzer','benchmarker',
+  'task-orchestrator','memory-coordinator','load-balancer','resource-allocator',
+  'pr-manager','code-review-swarm','issue-tracker','release-manager','repo-architect',
+  'workflow-automation','sparc-coord','sparc-coder','specification','pseudocode',
+  'architecture','refinement','backend-dev','frontend-developer','mobile-dev',
+  'ml-developer','cicd-engineer','system-architect','ai-engineer','model-qa',
+  'data-engineer','analytics-reporter','experiment-tracker','data-consolidator',
+  'devops-automator','sre','incident-commander','infrastructure','database-optimizer',
+  'cloud-architect','prosecutor','defender','judge','case-analyst','trial-director',
+  'legal-compliance','technical-writer','content-creator','seo-specialist',
+  'social-media','email-marketing','ai-citation','product-manager','sprint-prioritizer',
+  'launch-strategist','pricing-strategist','feedback-synthesizer','cro-specialist',
+  'sales-engineer','deal-strategist','account-strategist','outbound-strategist',
+  'pipeline-analyst','sales-coach','support-responder','discovery-coach',
+  'proposal-strategist','game-designer','narrative-designer','level-designer',
+  'game-audio-engineer','technical-artist','unity-architect','blockchain-auditor',
+  'solidity-engineer','zk-steward','studio-producer','project-shepherd',
+  'senior-pm','studio-operations','workflow-architect','adaptive-coordinator2',
+  'api-tester','evidence-collector','reality-checker','production-validator',
+  'finance-tracker','accounts-payable','recruitment','visionos-engineer',
+  'embedded-firmware','ios-developer','mobile-app-builder','mcp-builder',
+  'automation-governance','payment-agent','compliance-auditor','trend-researcher',
+  'scout-explorer'
+]);
+const _v2TypeFallback = {
+  planner:'planner', coordinator:'hierarchical-coord', researcher:'researcher',
+  analyst:'researcher', reviewer:'reviewer', coder:'coder', tester:'tester',
+  architect:'system-architect', engineer:'backend-dev', developer:'coder',
+  manager:'product-manager', security:'security-architect',
+  reporter:'analytics-reporter', strategist:'product-manager',
+  designer:'game-designer', writer:'technical-writer', auditor:'security-auditor',
+};
+function v2RoleAvatar(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`;
+  for (const k of _v2AvatarKnown) {
+    if (id && (id.includes(k) || k.includes(id))) return `data/avatars/${k}.svg`;
+  }
+  for (const [t, av] of Object.entries(_v2TypeFallback)) {
+    if ((type && type.includes(t)) || (id && id.includes(t))) return `data/avatars/${av}.svg`;
+  }
+  return 'data/avatars/coder.svg';
+}
+
+// ── org roles ───────────────────────────────
+function v2RenderOrgRoles() {
+  if (!_v2SelOrg) return;
+  const roles = Array.isArray(_v2OrgData?.roles) ? _v2OrgData.roles : [];
+  const V2_ROLE_COLORS = ['oklch(72% 0.18 75)','oklch(65% 0.12 240)','oklch(65% 0.15 150)','oklch(65% 0.13 290)','oklch(65% 0.14 35)','oklch(62% 0.12 195)'];
+  const pane = document.getElementById('odt-roles');
+  if (!pane) return;
+  if (!roles.length) {
+    pane.innerHTML = '<div class="empty">No roles defined</div>';
+    return;
   }
+  // Determine leader: explicit reports_to=undefined + type=planner/coordinator, or first role, or id=boss
+  const leaderIds = new Set(roles.filter(r => r.id === 'boss' || r.type === 'coordinator' || r.type === 'planner').map(r => r.id));
+  if (!leaderIds.size) leaderIds.add(roles[0]?.id);
+  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);
+    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);
+    return `<div class="role-v2" style="border-top:2px solid ${color}">
+      <div class="rv2-head">
+        <img class="rv2-avatar" src="${avatarSrc}" alt="${esc(displayName)}" loading="lazy" onerror="this.src='data/avatars/coder.svg'"/>
+        <div class="rv2-info">
+          <div class="rv2-title">${esc(displayName)}${isLeader ? ' <span style="font-size:10px;color:var(--accent);font-weight:400;opacity:0.8">lead</span>' : ''}</div>
+          ${roleType ? `<span class="rv2-agent">${esc(roleType)}</span>` : ''}
+        </div>
+      </div>
+      <div class="rv2-id">${esc(r.id)}</div>
+      ${r.reports_to ? `<div class="rv2-reports">reports to <span>${esc(r.reports_to)}</span></div>` : ''}
+      ${resps.length ? `<div class="rv2-resps">${resps.map(s=>`<div class="rv2-resp">${esc(s)}</div>`).join('')}</div>` : ''}
+    </div>`;
+  }).join('')}</div>`;
+}
+
+// ── org activity ────────────────────────────
+function v2RenderOrgActivity() {
+  if (!_v2SelOrg) return;
+  const activity = _v2OrgData?._activity || [];
+  const orgEvents = _v2OrgEventLog[_v2SelOrg] || [];
+  const events = [...activity, ...orgEvents].sort((a,b) => (b.ts||0)-(a.ts||0)).slice(0,80);
+  const pane = document.getElementById('odt-activity');
+  if (!pane) return;
+  const fmtOrgEvType = t => {
+    const m={'org:start':'start','org:stop':'stop','org:complete':'done','org:create':'create','org:heartbeat':'hb','org:agent:online':'agent-on','org:comms':'comms'};
+    return m[t]||(t||'').replace(/^org:/,'');
+  };
+  if (!events.length) {
+    pane.innerHTML = '<div class="empty">No activity recorded</div>';
+    return;
+  }
+  pane.innerHTML = `<div class="act-v2-list">${events.map(ev => {
+    const t = ev.ts ? new Date(ev.ts).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'}) : '';
+    const detail = ev.role||ev.msg||ev.agent||'';
+    return `<div class="av2-row"><span class="av2-time">${esc(t)}</span><span class="av2-type">${esc(fmtOrgEvType(ev.type))}</span><span class="av2-msg">${esc(detail)}</span></div>`;
+  }).join('')}</div>`;
+}
+
+// ── org health ──────────────────────────────
+function v2RenderOrgHealth() {
+  if (!_v2SelOrg) return;
+  const listOrg = _v2Orgs.find(o => o.name === _v2SelOrg) || {};
+  const health  = _v2OrgData?._health;
+  const roles   = Array.isArray(_v2OrgData?.roles) ? _v2OrgData.roles.length : 0;
+  const pane    = document.getElementById('odt-health');
+  if (!pane) return;
+  pane.innerHTML = `
+    <div class="health-v2-grid">
+      <div class="hv2-cell"><div class="hv2-lbl">Status</div><div class="hv2-val ${(_v2OrgData?.running??listOrg.running)?'green':''}">${(_v2OrgData?.running??listOrg.running)?'LIVE':'IDLE'}</div></div>
+      <div class="hv2-cell"><div class="hv2-lbl">Roles</div><div class="hv2-val">${roles}</div></div>
+      <div class="hv2-cell"><div class="hv2-lbl">Topology</div><div class="hv2-val" style="font-size:14px">${esc((_v2OrgData?.topology||'—').toUpperCase())}</div></div>
+      ${health?.agents_active!=null?`<div class="hv2-cell"><div class="hv2-lbl">Agents</div><div class="hv2-val ${health.agents_active>0?'green':''}">${health.agents_active}</div></div>`:''}
+      ${health?.tasks_pending!=null?`<div class="hv2-cell"><div class="hv2-lbl">Tasks</div><div class="hv2-val ${health.tasks_pending>5?'amber':''}">${health.tasks_pending}</div></div>`:''}
+    </div>
+    ${health?.errors?.length?`<div style="margin-top:12px"><div class="m-group-title">Errors</div>${health.errors.slice(0,5).map(e=>`<div style="font-size:11px;color:var(--red);padding:4px 0;border-bottom:1px solid var(--border)">${esc(e)}</div>`).join('')}</div>`:`<div style="margin-top:10px;font-size:12px;color:var(--text-lo)">${listOrg.running?'Running — no errors detected':'Org is idle'}</div>`}
+  `;
 }
 
+// stop org
+window.v2StopOrg = async function() {
+  if (!_v2SelOrg) return;
+  const stopped = _v2SelOrg;
+  try { await fetch(`/api/orgs/${encodeURIComponent(stopped)}/stop`, {method:'POST'}); } catch(_) {}
+  setTimeout(async () => { await renderOrgs(); if (_v2SelOrg === stopped) v2SelectOrg(stopped); }, 600);
+};
+
+// live SSE for org events
+(function v2OrgSSE() {
+  let src;
+  function connect() {
+    if (src) src.close();
+    src = new EventSource('/api/events');
+    src.onmessage = e => {
+      try {
+        const ev = JSON.parse(e.data);
+        if (!ev?.org || !ev?.type?.startsWith('org:')) return;
+        const n = ev.org;
+        const evDir = ev.dir || '';
+        if (!evDir || (DIR && evDir !== DIR)) return;
+        if (!_v2OrgEventLog[n]) _v2OrgEventLog[n] = [];
+        _v2OrgEventLog[n].push(ev);
+        if (_v2OrgEventLog[n].length > 50) _v2OrgEventLog[n].shift();
+        if (n === _v2SelOrg && _v2OrgTab === 'activity') v2RenderOrgActivity();
+        if (ev.type === 'org:start' || ev.type === 'org:stop') {
+          setTimeout(async () => {
+            await renderOrgs();
+            if (_v2SelOrg === n) {
+              const listOrg = _v2Orgs.find(o => o.name === _v2SelOrg) || {};
+              if (_v2OrgData) _v2OrgData.running = listOrg.running;
+              v2UpdateOrgHeader(listOrg, _v2OrgData);
+              if (_v2OrgTab === 'health') v2RenderOrgHealth();
+            }
+          }, 400);
+        }
+      } catch(_) {}
+    };
+    src.onerror = () => setTimeout(connect, 5000);
+  }
+  connect();
+})();
+
 // ── density toggle ─────────────────────────────────────────
 let compactMode = false;
 function toggleDensity() {