npm - monomind - Versions diffs - 1.14.6 → 1.15.0 - Mend

monomind 1.14.6 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (314) hide show

package/packages/@monomind/cli/dist/src/ui/orgs.html ADDED Viewed

@@ -0,0 +1,2215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MASTERMIND ORGS</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:        oklch(7%  0.010 186);
+  --bg-panel:  oklch(9%  0.012 186);
+  --bg-hover:  oklch(62% 0.20 186 / 0.06);
+  --bg-active: oklch(62% 0.20 186 / 0.11);
+  --teal:      oklch(62% 0.20 186);
+  --teal-dim:  oklch(62% 0.20 186 / 0.18);
+  --teal-glow: oklch(62% 0.20 186 / 0.08);
+  --indigo:    oklch(68% 0.18 252);
+  --green:     oklch(68% 0.20 150);
+  --green-glow:oklch(68% 0.20 150 / 0.25);
+  --amber:     oklch(78% 0.18 80);
+  --red:       oklch(62% 0.22 25);
+  --text:      oklch(80% 0.012 186);
+  --muted:     oklch(52% 0.010 186);
+  --dim:       oklch(36% 0.008 186);
+  --border:    oklch(62% 0.20 186 / 0.12);
+  --border-hi: oklch(62% 0.20 186 / 0.35);
+  --mono: 'Azeret Mono', 'Space Mono', 'Courier New', monospace;
+}
+html, body {
+  width: 100%; height: 100%; overflow: hidden;
+  background: var(--bg);
+  font-family: var(--mono);
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.5;
+  user-select: none;
+}
+/* ── Layout ─────────────────────────────────────────────────── */
+#app { display: flex; height: 100vh; }
+#sidebar {
+  width: 260px; flex-shrink: 0;
+  background: var(--bg-panel);
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+#main {
+  flex: 1; display: flex; flex-direction: column;
+  overflow: hidden; min-width: 0;
+}
+/* ── Sidebar ─────────────────────────────────────────────────── */
+#sb-header {
+  padding: 14px 14px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+#sb-wordmark {
+  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+}
+#sb-back {
+  font-size: 9px; letter-spacing: 1px; color: var(--dim);
+  text-decoration: none; padding: 3px 7px;
+  border: 1px solid var(--border); border-radius: 3px;
+  transition: color 0.12s, border-color 0.12s;
+}
+#sb-back:hover { color: var(--teal); border-color: var(--teal-dim); }
+#sb-title {
+  font-size: 9px; letter-spacing: 4px; color: var(--teal);
+  opacity: 0.8;
+}
+#sb-status-row {
+  display: flex; align-items: center; gap: 6px;
+}
+.live-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--dim); flex-shrink: 0;
+  transition: background 0.4s, box-shadow 0.4s;
+}
+.live-dot.on {
+  background: var(--green);
+  box-shadow: 0 0 6px var(--green-glow);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .live-dot.on { animation: livepulse 2.2s ease-in-out infinite; }
+}
+@keyframes livepulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
+#sb-status-text { font-size: 9px; letter-spacing: 2px; color: var(--dim); }
+#sb-running-count { font-size: 8px; color: var(--green); margin-left: auto; letter-spacing: 1px; }
+#sb-list {
+  flex: 1; overflow-y: auto;
+  padding: 6px 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--teal-dim) transparent;
+}
+#sb-list::-webkit-scrollbar { width: 3px; }
+#sb-list::-webkit-scrollbar-thumb { background: var(--teal-dim); border-radius: 2px; }
+.org-item {
+  padding: 10px 14px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  transition: background 0.12s, border-color 0.12s;
+  position: relative;
+}
+.org-item:hover { background: var(--bg-hover); }
+.org-item.active {
+  background: var(--bg-active);
+  border-left-color: var(--teal);
+}
+.org-item.running { border-left-color: var(--green); }
+.org-item.active.running { border-left-color: var(--teal); }
+.oi-header { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
+.oi-dot {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--dim); flex-shrink: 0;
+}
+.oi-dot.running {
+  background: var(--green);
+  box-shadow: 0 0 4px var(--green);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .oi-dot.running { animation: livepulse 2s ease-in-out infinite; }
+}
+.oi-name {
+  font-size: 11px; color: var(--text); font-weight: 500;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  flex: 1;
+}
+.oi-badge {
+  font-size: 7px; padding: 1px 6px; border-radius: 2px; flex-shrink: 0;
+  text-transform: uppercase; letter-spacing: 0.06em;
+}
+.oi-badge.running {
+  background: oklch(68% 0.20 150 / 0.12);
+  color: var(--green);
+  border: 1px solid oklch(68% 0.20 150 / 0.28);
+}
+.oi-badge.quiet {
+  background: oklch(75% 0.18 80 / 0.10);
+  color: oklch(75% 0.18 80);
+  border: 1px solid oklch(75% 0.18 80 / 0.30);
+}
+.oi-badge.stale {
+  background: oklch(60% 0.20 25 / 0.10);
+  color: oklch(65% 0.20 25);
+  border: 1px solid oklch(60% 0.20 25 / 0.30);
+}
+.oi-badge.idle {
+  background: transparent; color: var(--dim);
+  border: 1px solid var(--border);
+}
+.oi-goal {
+  font-size: 9px; color: var(--muted); line-height: 1.5;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  padding-left: 12px;
+}
+.oi-meta {
+  display: flex; gap: 8px; padding-left: 12px; margin-top: 3px;
+}
+.oi-chip {
+  font-size: 8px; color: var(--dim); letter-spacing: 0.5px;
+}
+.oi-chip span { color: var(--muted); }
+#sb-empty {
+  padding: 28px 16px; text-align: center;
+  color: var(--dim); font-size: 9px; line-height: 1.8; letter-spacing: 0.5px;
+}
+#sb-empty .empty-icon {
+  font-size: 24px; display: block; margin-bottom: 10px; opacity: 0.35;
+}
+#sb-empty .empty-cmd {
+  display: inline-block; margin-top: 10px;
+  color: var(--teal); border: 1px solid var(--teal-dim);
+  padding: 3px 10px; border-radius: 3px; font-size: 8px; letter-spacing: 1px;
+}
+/* ── Main area ─────────────────────────────────────────────────── */
+#main-header {
+  padding: 12px 20px 11px;
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; gap: 12px;
+  flex-shrink: 0;
+}
+#org-label {
+  font-size: 9px; letter-spacing: 4px; color: var(--teal);
+  opacity: 0.7; text-transform: uppercase;
+}
+#org-name {
+  font-size: 15px; letter-spacing: 2px; color: var(--text);
+  font-weight: 600; text-transform: uppercase;
+}
+#org-status-badge {
+  font-size: 8px; padding: 2px 8px; border-radius: 2px;
+  text-transform: uppercase; letter-spacing: 0.1em; margin-left: 4px;
+}
+#org-status-badge.running {
+  background: oklch(68% 0.20 150 / 0.12);
+  color: var(--green); border: 1px solid oklch(68% 0.20 150 / 0.25);
+}
+#org-status-badge.quiet {
+  background: oklch(75% 0.18 80 / 0.10);
+  color: oklch(75% 0.18 80); border: 1px solid oklch(75% 0.18 80 / 0.30);
+}
+#org-status-badge.stale {
+  background: oklch(60% 0.20 25 / 0.10);
+  color: oklch(65% 0.20 25); border: 1px solid oklch(60% 0.20 25 / 0.30);
+}
+#org-status-badge.idle {
+  background: transparent; color: var(--dim);
+  border: 1px solid var(--border);
+}
+.hdr-chip {
+  font-size: 8px; color: var(--dim); letter-spacing: 0.5px;
+  padding: 2px 8px; border: 1px solid var(--border); border-radius: 2px;
+}
+.hdr-chip span { color: var(--muted); }
+#main-tabs {
+  display: flex; gap: 0; border-bottom: 1px solid var(--border);
+  flex-shrink: 0; padding: 0 20px;
+}
+.tab-btn {
+  font-size: 9px; letter-spacing: 2px; color: var(--dim);
+  padding: 8px 14px; background: none; border: none; cursor: pointer;
+  font-family: var(--mono); text-transform: uppercase;
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+  transition: color 0.12s, border-color 0.12s;
+}
+.tab-btn:hover { color: var(--muted); }
+.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
+#main-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
+#main-body::-webkit-scrollbar { width: 4px; }
+#main-body::-webkit-scrollbar-thumb { background: var(--teal-dim); border-radius: 2px; }
+.tab-pane { display: none; }
+.tab-pane.active { display: block; }
+/* ── Empty / no-selection state ─────────────────────────────────── */
+#no-org-state {
+  display: flex; flex-direction: column; align-items: center;
+  justify-content: center; height: 100%; gap: 10px; opacity: 0.5;
+  padding: 40px;
+}
+#no-org-state .ns-icon { font-size: 48px; opacity: 0.25; }
+#no-org-state .ns-text {
+  font-size: 9px; letter-spacing: 3px; color: var(--dim);
+  text-align: center;
+}
+/* ── Org Chart ──────────────────────────────────────────────────── */
+#chart-pane {
+  padding: 20px;
+  display: flex; flex-direction: column; gap: 16px;
+}
+#chart-svg-wrap {
+  background: oklch(8% 0.01 186);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden; position: relative;
+}
+#org-chart-svg {
+  width: 100%; display: block;
+}
+/* ── Info grid (goal / topology / created) ─────────────────────── */
+#org-meta-grid {
+  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
+  background: var(--border); border: 1px solid var(--border);
+  border-radius: 3px; overflow: hidden;
+}
+.meta-cell {
+  background: var(--bg-panel);
+  padding: 10px 14px;
+}
+.meta-cell-label { font-size: 8px; letter-spacing: 2px; color: var(--dim); margin-bottom: 4px; }
+.meta-cell-value { font-size: 11px; color: var(--text); }
+/* ── Live status strip ─────────────────────────────────────────── */
+#live-strip {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  background: oklch(8% 0.01 186); border: 1px solid var(--border);
+  border-radius: 4px; padding: 8px 12px; font-size: 10px; color: var(--dim);
+  letter-spacing: 0.5px;
+}
+#ls-state { display: flex; align-items: center; gap: 5px; }
+.ls-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
+.ls-dot.running { background: oklch(65% 0.20 150); }
+@media (prefers-reduced-motion: no-preference) { .ls-dot.running { animation: ls-pulse 2s ease-in-out infinite; } }
+@keyframes ls-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+#ls-label { font-size: 9px; letter-spacing: 2px; }
+.ls-metric { font-size: 10px; color: var(--muted); }
+.ls-sparkline-wrap { display: flex; align-items: flex-end; gap: 1px; height: 20px; margin-left: auto; }
+.ls-bar { width: 6px; border-radius: 1px; background: oklch(62% 0.20 186 / 0.4); min-height: 2px; }
+.ls-bar.active { background: oklch(62% 0.20 186 / 0.8); }
+#clf-wrap {
+  background: oklch(8% 0.01 186); border: 1px solid var(--border);
+  border-radius: 4px; overflow: hidden;
+}
+#clf-header {
+  font-size: 8px; letter-spacing: 3px; color: var(--dim); padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+}
+#clf-rows { min-height: 48px; max-height: 160px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--teal-dim) transparent; }
+.clf-row {
+  display: grid; grid-template-columns: 80px 70px 1fr;
+  gap: 8px; padding: 5px 12px;
+  font-size: 10px; border-bottom: 1px solid oklch(100% 0 0 / 0.03);
+}
+.clf-row.new { animation: clf-fadein 0.3s ease; }
+@keyframes clf-fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.clf-time { color: var(--dim); font-variant-numeric: tabular-nums; }
+.clf-type { color: var(--accent); }
+.clf-msg { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* ── Roles list ─────────────────────────────────────────────────── */
+#roles-pane { padding: 20px; }
+.roles-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 10px;
+}
+.role-block {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 3px; padding: 12px 14px;
+  transition: border-color 0.12s;
+}
+.role-block:hover { border-color: var(--teal-dim); }
+.rb-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
+.rb-dot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
+}
+.rb-title { font-size: 12px; color: var(--text); font-weight: 500; line-height: 1.3; }
+.rb-agent {
+  margin-left: auto; flex-shrink: 0;
+  font-size: 8px; padding: 1px 7px; border-radius: 2px;
+  border: 1px solid var(--teal-dim); color: var(--teal); opacity: 0.85;
+  letter-spacing: 0.5px;
+}
+.rb-id { font-size: 9px; color: var(--dim); margin-bottom: 5px; padding-left: 15px; }
+.rb-reports { font-size: 9px; color: var(--muted); padding-left: 15px; margin-bottom: 6px; }
+.rb-reports span { color: var(--indigo); }
+.rb-resps { padding-left: 15px; }
+.rb-resp-item {
+  font-size: 9px; color: var(--dim); line-height: 1.6;
+  display: flex; gap: 6px; align-items: flex-start;
+}
+.rb-resp-item::before {
+  content: '—'; color: oklch(36% 0.008 186 / 0.5); flex-shrink: 0; margin-top: 1px;
+}
+/* ── Activity / event log ───────────────────────────────────────── */
+#activity-pane { padding: 20px; }
+#activity-log { display: flex; flex-direction: column; gap: 0; }
+.act-row {
+  display: grid;
+  grid-template-columns: 60px 90px 1fr;
+  gap: 8px; padding: 5px 0;
+  border-bottom: 1px solid oklch(62% 0.20 186 / 0.05);
+  align-items: baseline; font-size: 10px;
+}
+.act-row:last-child { border-bottom: none; }
+.act-time { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 9px; }
+.act-type { color: var(--teal); font-weight: 500; letter-spacing: 0.5px; }
+.act-msg  { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.act-empty { color: var(--dim); font-size: 9px; padding: 16px 0; letter-spacing: 1px; }
+/* ── Health pane ─────────────────────────────────────────────────── */
+#health-pane { padding: 20px; }
+.health-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px; margin-bottom: 16px;
+}
+.health-cell {
+  background: var(--bg-panel);
+  border: 1px solid var(--border); border-radius: 3px;
+  padding: 12px 14px;
+}
+.hc-label { font-size: 8px; letter-spacing: 2px; color: var(--dim); margin-bottom: 4px; }
+.hc-value { font-size: 18px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
+.hc-sub { font-size: 9px; color: var(--muted); margin-top: 2px; }
+.hc-value.green  { color: var(--green); }
+.hc-value.amber  { color: var(--amber); }
+.hc-value.red    { color: var(--red); }
+/* ── Chat tab ───────────────────────────────────────────────────── */
+#chat-pane {
+  display: flex; flex-direction: column; height: 100%;
+  overflow: hidden;
+}
+#chat-session-bar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 20px 8px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0; flex-wrap: wrap;
+}
+#chat-sess-label { font-size: 8px; letter-spacing: 2px; color: var(--dim); }
+#chat-sess-select {
+  background: var(--bg-panel); color: var(--muted);
+  border: 1px solid var(--border); border-radius: 3px;
+  font-size: 9px; font-family: var(--mono); letter-spacing: 0.5px;
+  padding: 3px 6px; cursor: pointer; max-width: 260px;
+}
+#chat-sess-select:focus { outline: none; border-color: var(--teal-dim); }
+#chat-live-dot {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--dim); margin-left: auto; flex-shrink: 0;
+  transition: background 0.4s;
+}
+#chat-live-dot.on { background: var(--green); animation: livepulse 2.2s ease-in-out infinite; }
+#chat-live-label { font-size: 8px; color: var(--dim); }
+/* Phase 3: render mode toggle */
+#chat-mode-bar {
+  display: flex; gap: 3px; margin-left: 8px;
+}
+.chat-mode-btn {
+  font-size: 7px; padding: 2px 7px; border-radius: 2px;
+  border: 1px solid var(--border); color: var(--dim);
+  background: transparent; cursor: pointer; font-family: var(--mono);
+  letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.15s;
+}
+.chat-mode-btn:hover { border-color: var(--teal-dim); color: var(--muted); }
+.chat-mode-btn.active { border-color: var(--teal); color: var(--teal); background: oklch(62% 0.20 186 / 0.07); }
+#chat-feed-wrap {
+  flex: 1; overflow-y: auto; padding: 12px 20px;
+  display: flex; flex-direction: column; gap: 5px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--teal-dim) transparent;
+}
+#chat-feed-wrap::-webkit-scrollbar { width: 4px; }
+#chat-feed-wrap::-webkit-scrollbar-thumb { background: var(--teal-dim); border-radius: 2px; }
+#chat-feed-empty {
+  font-size: 10px; color: var(--dim); text-align: center;
+  padding: 30px 0; line-height: 2;
+}
+#chat-agent-bar {
+  display: flex; align-items: center; gap: 6px;
+  padding: 6px 20px 7px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0; flex-wrap: wrap;
+}
+#chat-agent-label { font-size: 8px; letter-spacing: 2px; color: var(--dim); flex-shrink: 0; }
+.chat-agent-pill {
+  font-size: 8px; padding: 2px 8px; border-radius: 10px;
+  border: 1px solid var(--border); color: var(--muted);
+  background: transparent; cursor: pointer; letter-spacing: 0.3px;
+  font-family: var(--mono); transition: border-color 0.15s, color 0.15s;
+}
+.chat-agent-pill:hover { border-color: var(--teal-dim); color: var(--text); }
+.chat-agent-pill.active { border-color: var(--teal); color: var(--teal); background: oklch(62% 0.20 186 / 0.07); }
+.cmsg { display: flex; flex-direction: column; max-width: 92%; }
+.cmsg.csys { align-self: center; max-width: 100%; }
+.cmsg.cagent { align-self: flex-start; }
+.cmsg.cic { align-self: flex-start; }
+@keyframes cmsg-in { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} }
+.cmsg.new { animation: cmsg-in 0.18s ease-out; }
+.cmsg.csys .cbubble {
+  background: oklch(10% 0.008 186);
+  border: 1px solid var(--border);
+  border-radius: 6px; padding: 4px 12px;
+  font-size: 9px; color: var(--dim); letter-spacing: 0.3px;
+  text-align: center;
+}
+.cmsg.cagent .cbubble {
+  background: oklch(11% 0.016 186);
+  border: 1px solid var(--teal-dim);
+  border-radius: 2px 8px 8px 8px;
+  padding: 7px 11px;
+  color: oklch(70% 0.010 186);
+  font-size: 11px; line-height: 1.6;
+  word-break: break-word; white-space: pre-wrap;
+}
+.cmsg.cic .cbubble {
+  background: oklch(10% 0.013 295);
+  border: 1px solid oklch(68% 0.18 295 / 0.22);
+  border-radius: 2px 8px 8px 8px;
+  padding: 7px 11px;
+  color: oklch(68% 0.010 295);
+  font-size: 11px; line-height: 1.6;
+  word-break: break-word; white-space: pre-wrap;
+}
+.cmsg-meta {
+  display: flex; align-items: center; gap: 5px;
+  margin-bottom: 3px; flex-wrap: wrap;
+}
+.cmsg.csys .cmsg-meta { display: none; }
+.ctag {
+  font-size: 8px; padding: 1px 6px; border-radius: 10px;
+  border: 1px solid var(--teal-dim); color: var(--teal);
+  letter-spacing: 0.4px; flex-shrink: 0;
+}
+.ctag.sender  { border-color: oklch(68% 0.18 295 / 0.35); color: oklch(68% 0.14 295); }
+.ctag.receiver{ border-color: oklch(78% 0.18 80 / 0.35);  color: var(--amber); }
+.cic-arrow { font-size: 9px; color: var(--dim); }
+.cts { font-size: 8px; color: var(--dim); margin-left: auto; }
+.cevtype {
+  font-size: 7px; padding: 1px 4px; border-radius: 2px;
+  background: oklch(62% 0.20 186 / 0.07);
+  border: 1px solid var(--border); color: var(--dim);
+  letter-spacing: 0.3px;
+}
+/* ── Communication edges (SVG in chart) ─────────────────────────── */
+.oc-edge { stroke: var(--teal); stroke-opacity: 0.25; stroke-width: 1; fill: none; }
+.oc-edge.command  { stroke: var(--teal); stroke-opacity: 0.4; }
+.oc-edge.report   { stroke: var(--indigo); stroke-opacity: 0.35; stroke-dasharray: 4 3; }
+.oc-edge.feedback { stroke: var(--amber); stroke-opacity: 0.25; stroke-dasharray: 2 4; }
+.oc-edge.handoff  { stroke: var(--green); stroke-opacity: 0.3; }
+.oc-node-bg  { fill: oklch(8% 0.01 186); stroke-width: 1.5; }
+.oc-node-bg.boss { stroke: var(--teal); }
+.oc-node-bg.peer { stroke: oklch(68% 0.18 252); }
+.oc-node-text {
+  fill: var(--text); font-size: 10px;
+  font-family: 'Azeret Mono', 'Space Mono', monospace;
+  text-anchor: middle; dominant-baseline: middle;
+  pointer-events: none;
+}
+.oc-node-sub {
+  fill: var(--muted); font-size: 8px;
+  font-family: 'Azeret Mono', 'Space Mono', monospace;
+  text-anchor: middle; dominant-baseline: middle;
+  pointer-events: none;
+}
+.oc-node-pulse { fill: none; stroke-width: 1; opacity: 0; }
+@media (prefers-reduced-motion: no-preference) {
+  .oc-node-pulse.running {
+    animation: nodepulse 2.5s ease-in-out infinite;
+    stroke: var(--green); opacity: 0.35;
+  }
+}
+@keyframes nodepulse { 0%,100%{r:26;opacity:0.2} 50%{r:30;opacity:0.55} }
+/* Arrow markers are inline in the SVG */
+/* ── Copy / Export / Import buttons on org items ────────────────── */
+.oi-copy-btn, .oi-export-btn, .oi-import-btn {
+  display: none;
+  flex-shrink: 0;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 7px;
+  letter-spacing: 0.5px;
+  padding: 1px 5px;
+  cursor: pointer;
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.org-item:hover .oi-copy-btn,
+.org-item:hover .oi-export-btn,
+.org-item:hover .oi-import-btn { display: inline-block; }
+.oi-copy-btn:hover {
+  color: var(--teal);
+  border-color: var(--teal-dim);
+  background: var(--teal-glow);
+}
+.oi-export-btn:hover {
+  color: var(--green, #4ade80);
+  border-color: oklch(60% 0.15 145 / 0.4);
+  background: oklch(60% 0.15 145 / 0.08);
+}
+.oi-import-btn:hover {
+  color: var(--amber, #facc15);
+  border-color: oklch(70% 0.15 85 / 0.4);
+  background: oklch(70% 0.15 85 / 0.08);
+}
+/* ── Copy modal ─────────────────────────────────────────────────── */
+#copy-project-list {
+  max-height: 180px;
+  overflow-y: auto;
+  border: 1px solid var(--border-hi);
+  border-radius: 4px;
+  margin: 4px 0 10px;
+  background: oklch(6% 0.008 186);
+}
+.copy-proj-row {
+  padding: 7px 10px;
+  font-size: 12px;
+  font-family: var(--mono);
+  color: var(--text-md);
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.copy-proj-row:last-child { border-bottom: none; }
+.copy-proj-row:hover { background: var(--bg-hover); color: var(--text-hi); }
+.copy-proj-row.selected { background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); border-left: 2px solid var(--teal); padding-left: 8px; }
+.copy-proj-loading { padding: 10px; font-size: 11px; color: var(--dim); text-align: center; }
+#copy-modal-overlay {
+  display: none;
+  position: fixed; inset: 0;
+  background: oklch(5% 0.008 186 / 0.82);
+  backdrop-filter: blur(2px);
+  z-index: 200;
+  align-items: center; justify-content: center;
+}
+#copy-modal-overlay.open { display: flex; }
+#copy-modal {
+  background: var(--bg-panel);
+  border: 1px solid var(--border-hi);
+  border-radius: 4px;
+  padding: 22px 24px 18px;
+  width: 440px;
+  max-width: calc(100vw - 32px);
+  box-shadow: 0 8px 40px oklch(0% 0 0 / 0.5);
+}
+#copy-modal-title {
+  font-size: 9px; letter-spacing: 3px; color: var(--teal);
+  margin-bottom: 4px;
+}
+#copy-modal-org {
+  font-size: 14px; font-weight: 600; color: var(--text);
+  letter-spacing: 1px; margin-bottom: 16px;
+}
+.copy-modal-label {
+  font-size: 8px; letter-spacing: 2px; color: var(--dim);
+  margin-bottom: 6px;
+}
+#copy-dest-input {
+  width: 100%;
+  background: oklch(6% 0.008 186);
+  border: 1px solid var(--border-hi);
+  border-radius: 3px;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  padding: 8px 10px;
+  outline: none;
+  transition: border-color 0.12s;
+  margin-bottom: 6px;
+}
+#copy-dest-input:focus { border-color: var(--teal); }
+#copy-dest-input::placeholder { color: var(--dim); }
+#copy-modal-hint {
+  font-size: 9px; color: var(--dim); margin-bottom: 16px; line-height: 1.5;
+}
+#copy-modal-status {
+  font-size: 9px; min-height: 16px; margin-bottom: 12px;
+  letter-spacing: 0.5px;
+}
+#copy-modal-status.ok   { color: var(--green); }
+#copy-modal-status.err  { color: var(--red); }
+.copy-modal-actions {
+  display: flex; gap: 8px; justify-content: flex-end;
+}
+.cm-btn {
+  background: none;
+  border: 1px solid var(--border-hi);
+  border-radius: 3px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 9px; letter-spacing: 1px;
+  padding: 5px 14px;
+  cursor: pointer;
+  text-transform: uppercase;
+  transition: color 0.12s, border-color 0.12s, background 0.12s;
+}
+.cm-btn:hover { color: var(--text); border-color: var(--muted); }
+.cm-btn.primary {
+  color: var(--teal); border-color: var(--teal-dim);
+}
+.cm-btn.primary:hover { background: var(--teal-glow); border-color: var(--teal); }
+.cm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- ── Sidebar: org list ── -->
+  <div id="sidebar">
+    <div id="sb-header">
+      <div id="sb-wordmark">
+        <a id="sb-back" href="/">← CONTROL</a>
+        <span id="sb-title">ORGS</span>
+      </div>
+      <div id="sb-status-row">
+        <div class="live-dot" id="sb-live-dot"></div>
+        <span id="sb-status-text">LOADING</span>
+        <span id="sb-running-count"></span>
+      </div>
+    </div>
+    <div id="sb-list">
+      <div id="sb-empty" style="display:none">
+        <span class="empty-icon">⬡</span>
+        NO ORGS FOUND<br><br>
+        Create a named agent team<br>that coordinates across sessions.
+        <span class="empty-cmd">/mastermind:createorg</span>
+      </div>
+    </div>
+  </div>
+  <!-- ── Main content ── -->
+  <div id="main">
+    <!-- No-selection splash -->
+    <div id="no-org-state">
+      <div class="ns-icon">⬡</div>
+      <div class="ns-text">SELECT AN ORG</div>
+    </div>
+    <!-- Org detail (hidden until org selected) -->
+    <div id="org-detail" style="display:none; height:100%; flex-direction:column; overflow:hidden;">
+      <div id="main-header">
+        <div>
+          <div id="org-label">MASTERMIND ORG</div>
+          <div style="display:flex; align-items:center; gap:8px; margin-top:2px;">
+            <div id="org-name">—</div>
+            <span id="org-status-badge" class="idle">IDLE</span>
+          </div>
+        </div>
+        <div style="margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;">
+          <div class="hdr-chip">ROLES <span id="hdr-roles">0</span></div>
+          <div class="hdr-chip">TOPOLOGY <span id="hdr-topology">—</span></div>
+          <div class="hdr-chip" id="hdr-created-wrap" style="display:none">SINCE <span id="hdr-created">—</span></div>
+        </div>
+        <button id="stop-btn" onclick="stopCurrentOrg()" style="display:none;
+          font-size:9px; font-family:var(--mono); letter-spacing:1px; color:var(--red);
+          border:1px solid oklch(62% 0.22 25 / 0.35); background:none; padding:4px 12px;
+          border-radius:3px; cursor:pointer; text-transform:uppercase; transition:background 0.12s;"
+          onmouseover="this.style.background='oklch(62% 0.22 25 / 0.08)'"
+          onmouseout="this.style.background='none'">STOP</button>
+      </div>
+      <div id="main-tabs">
+        <button class="tab-btn active" onclick="switchTab('chart')">ORG CHART</button>
+        <button class="tab-btn" onclick="switchTab('roles')">ROLES</button>
+        <button class="tab-btn" onclick="switchTab('activity')">ACTIVITY</button>
+        <button class="tab-btn" onclick="switchTab('health')">HEALTH</button>
+        <button class="tab-btn" onclick="switchTab('chat')">CHAT</button>
+      </div>
+      <div id="main-body">
+        <!-- Chart tab -->
+        <div class="tab-pane active" id="tab-chart">
+          <div id="chart-pane">
+            <div id="org-meta-grid">
+              <div class="meta-cell">
+                <div class="meta-cell-label">GOAL</div>
+                <div class="meta-cell-value" id="meta-goal" style="font-size:10px;line-height:1.5;white-space:normal;color:var(--muted)">—</div>
+              </div>
+              <div class="meta-cell">
+                <div class="meta-cell-label">TOPOLOGY</div>
+                <div class="meta-cell-value" id="meta-topology">—</div>
+              </div>
+              <div class="meta-cell">
+                <div class="meta-cell-label">CREATED</div>
+                <div class="meta-cell-value" id="meta-created" style="font-size:10px;color:var(--muted)">—</div>
+              </div>
+            </div>
+            <div id="chart-svg-wrap">
+              <svg id="org-chart-svg" viewBox="0 0 720 320">
+                <defs>
+                  <marker id="arr-teal" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+                    <path d="M0,0 L0,6 L6,3 z" fill="oklch(62% 0.20 186 / 0.5)"/>
+                  </marker>
+                  <marker id="arr-indigo" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+                    <path d="M0,0 L0,6 L6,3 z" fill="oklch(68% 0.18 252 / 0.45)"/>
+                  </marker>
+                  <marker id="arr-amber" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+                    <path d="M0,0 L0,6 L6,3 z" fill="oklch(78% 0.18 80 / 0.35)"/>
+                  </marker>
+                  <marker id="arr-green" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+                    <path d="M0,0 L0,6 L6,3 z" fill="oklch(68% 0.20 150 / 0.4)"/>
+                  </marker>
+                  <filter id="node-glow" x="-50%" y="-50%" width="200%" height="200%">
+                    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
+                    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
+                  </filter>
+                </defs>
+                <rect width="720" height="320" fill="oklch(7% 0.008 186)"/>
+                <g id="oc-edges"></g>
+                <g id="oc-nodes"></g>
+              </svg>
+            </div>
+            <!-- Live status strip -->
+            <div id="live-strip">
+              <div id="ls-state">
+                <span id="ls-dot" class="ls-dot"></span>
+                <span id="ls-label">IDLE</span>
+              </div>
+              <div id="ls-uptime" class="ls-metric" title="Uptime">—</div>
+              <div id="ls-last" class="ls-metric" title="Last event">—</div>
+              <div id="ls-epm" class="ls-metric" title="Events / 5 min">—</div>
+              <div id="ls-sparkline" class="ls-sparkline-wrap"></div>
+            </div>
+            <!-- Live event feed -->
+            <div id="clf-wrap">
+              <div id="clf-header">LIVE EVENTS</div>
+              <div id="clf-rows"></div>
+            </div>
+            <!-- Legend -->
+            <div style="display:flex; gap:16px; flex-wrap:wrap; padding:0 2px;">
+              <div style="display:flex; align-items:center; gap:5px; font-size:8px; color:var(--dim);">
+                <svg width="24" height="8"><line x1="0" y1="4" x2="24" y2="4" stroke="oklch(62% 0.20 186)" stroke-opacity="0.5" stroke-width="1.5" marker-end="url(#arr-teal)"/></svg>
+                COMMAND
+              </div>
+              <div style="display:flex; align-items:center; gap:5px; font-size:8px; color:var(--dim);">
+                <svg width="24" height="8"><line x1="0" y1="4" x2="24" y2="4" stroke="oklch(68% 0.18 252)" stroke-opacity="0.45" stroke-width="1" stroke-dasharray="4 3" marker-end="url(#arr-indigo)"/></svg>
+                REPORT
+              </div>
+              <div style="display:flex; align-items:center; gap:5px; font-size:8px; color:var(--dim);">
+                <svg width="24" height="8"><line x1="0" y1="4" x2="24" y2="4" stroke="oklch(78% 0.18 80)" stroke-opacity="0.35" stroke-width="1" stroke-dasharray="2 4" marker-end="url(#arr-amber)"/></svg>
+                FEEDBACK
+              </div>
+              <div style="display:flex; align-items:center; gap:5px; font-size:8px; color:var(--dim);">
+                <svg width="24" height="8"><line x1="0" y1="4" x2="24" y2="4" stroke="oklch(68% 0.20 150)" stroke-opacity="0.4" stroke-width="1.5" marker-end="url(#arr-green)"/></svg>
+                HANDOFF
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Roles tab -->
+        <div class="tab-pane" id="tab-roles">
+          <div id="roles-pane">
+            <div id="roles-grid" class="roles-grid"></div>
+          </div>
+        </div>
+        <!-- Activity tab -->
+        <div class="tab-pane" id="tab-activity">
+          <div id="activity-pane">
+            <div id="activity-log"></div>
+          </div>
+        </div>
+        <!-- Health tab -->
+        <div class="tab-pane" id="tab-health">
+          <div id="health-pane">
+            <div id="health-grid" class="health-grid"></div>
+            <div id="health-detail"></div>
+          </div>
+        </div>
+        <!-- Chat tab -->
+        <div class="tab-pane" id="tab-chat">
+          <div id="chat-pane">
+            <div id="chat-session-bar">
+              <span id="chat-sess-label">SESSION</span>
+              <select id="chat-sess-select" onchange="selectChatSession(this.value)">
+                <option value="">— select a session —</option>
+              </select>
+              <div id="chat-mode-bar">
+                <button class="chat-mode-btn active" id="mode-summary" onclick="setChatMode('summary')">SUMMARY</button>
+                <button class="chat-mode-btn" id="mode-detailed" onclick="setChatMode('detailed')">DETAILED</button>
+                <button class="chat-mode-btn" id="mode-raw" onclick="setChatMode('raw')">RAW</button>
+              </div>
+              <div id="chat-live-dot"></div>
+              <span id="chat-live-label">OFFLINE</span>
+            </div>
+            <div id="chat-agent-bar" style="display:none">
+              <span id="chat-agent-label">AGENT</span>
+            </div>
+            <div id="chat-feed-wrap">
+              <div id="chat-feed-empty">Select a session above to see agent communications.</div>
+            </div>
+          </div>
+        </div>
+      </div><!-- end main-body -->
+    </div><!-- end org-detail -->
+  </div><!-- end main -->
+</div><!-- end app -->
+<!-- ── Copy-to-project modal ── -->
+<div id="copy-modal-overlay" onclick="if(event.target===this)closeCopyModal()">
+  <div id="copy-modal">
+    <div id="copy-modal-title">COPY ORG TO PROJECT</div>
+    <div id="copy-modal-org">—</div>
+    <div class="copy-modal-label">SELECT DESTINATION PROJECT</div>
+    <div id="copy-project-list"><div class="copy-proj-loading">Loading projects…</div></div>
+    <div class="copy-modal-label" style="margin-top:4px">OR ENTER PATH MANUALLY</div>
+    <input id="copy-dest-input" type="text" placeholder="/absolute/path/to/project"
+           onkeydown="if(event.key==='Enter')executeCopy(); if(event.key==='Escape')closeCopyModal()"
+           oninput="document.querySelectorAll('.copy-proj-row').forEach(r=>r.classList.remove('selected'))">
+    <div id="copy-modal-hint">
+      Writes to <span style="color:var(--teal)">&lt;destination&gt;/.monomind/orgs/&lt;name&gt;.json</span>
+    </div>
+    <div id="copy-modal-status"></div>
+    <div class="copy-modal-actions">
+      <button class="cm-btn" onclick="closeCopyModal()">CANCEL</button>
+      <button class="cm-btn primary" id="copy-confirm-btn" onclick="executeCopy()">COPY</button>
+    </div>
+  </div>
+</div>
+<script>
+'use strict';
+// ── State ─────────────────────────────────────────────────────────
+let allOrgs = [];
+let selectedOrg = null;
+let orgDetailData = null;
+let currentTab = 'chart';
+// Phase 3: Chat render mode (Summary / Detailed / Raw)
+let chatRenderMode = localStorage.getItem('chatRenderMode') || 'summary';
+// Phase 3: Chat render mode — Summary / Detailed / Raw
+const CHAT_SUMMARY_TYPES = new Set(['session:start','session:complete','domain:dispatch','domain:complete','agent:spawn','agent:complete','agent:edit','org:comms','loop:start','loop:complete','org:artifact','agent:message','intercom']);
+const CHAT_DETAILED_TYPES = new Set([...CHAT_SUMMARY_TYPES,'agent:bash','agent:bash:result','agent:browse','agent:read','agent:read:batch']);
+function setChatMode(mode) {
+  chatRenderMode = mode;
+  localStorage.setItem('chatRenderMode', mode);
+  ['summary','detailed','raw'].forEach(m => {
+    const btn = document.getElementById('mode-' + m);
+    if (btn) btn.className = 'chat-mode-btn' + (m === mode ? ' active' : '');
+  });
+  // Re-render chat feed with new mode
+  const currentSessId = document.getElementById('chat-sess-select')?.value;
+  if (currentSessId) selectChatSession(currentSessId);
+}
+// Apply saved mode on load
+(function() {
+  ['summary','detailed','raw'].forEach(m => {
+    const btn = document.getElementById('mode-' + m);
+    if (btn) btn.className = 'chat-mode-btn' + (m === chatRenderMode ? ' active' : '');
+  });
+})();
+// ── Utilities ──────────────────────────────────────────────────────
+function esc(s) {
+  return String(s ?? '')
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+function fmtDate(ts) {
+  if (!ts) return '—';
+  const d = new Date(typeof ts === 'number' ? ts : Date.parse(ts));
+  if (isNaN(d)) return ts;
+  return d.toLocaleDateString('en', {month:'short', day:'numeric', year:'numeric'});
+}
+function fmtTime(ts) {
+  if (!ts) return '';
+  const d = new Date(typeof ts === 'number' ? ts : Date.parse(ts));
+  if (isNaN(d)) return '';
+  return d.toLocaleTimeString('en', {hour12:false, hour:'2-digit', minute:'2-digit', second:'2-digit'});
+}
+function fmtEventType(t) {
+  const m = {
+    'org:start':'START','org:stop':'STOP','org:complete':'COMPLETE',
+    'org:create':'CREATE','org:heartbeat':'HB','org:agent:online':'AGENT ON',
+    'org:comms':'COMMS','org:checkpoint':'CHECKPOINT',
+  };
+  return m[t] || (t || '').replace(/^org:/,'').toUpperCase();
+}
+// Role colors cycle
+const ROLE_COLORS = [
+  'oklch(62% 0.20 186)',
+  'oklch(68% 0.18 252)',
+  'oklch(68% 0.20 150)',
+  'oklch(78% 0.18 80)',
+  'oklch(62% 0.22 25)',
+  'oklch(74% 0.16 310)',
+];
+function roleColor(i) { return ROLE_COLORS[i % ROLE_COLORS.length]; }
+// ── Tab switching ─────────────────────────────────────────────────
+window.switchTab = function(tab) {
+  currentTab = tab;
+  document.querySelectorAll('.tab-btn').forEach(b => {
+    b.classList.toggle('active', b.textContent.toLowerCase().includes(tab) ||
+      (tab === 'chart' && b.textContent === 'ORG CHART') ||
+      (tab === 'roles' && b.textContent === 'ROLES') ||
+      (tab === 'activity' && b.textContent === 'ACTIVITY') ||
+      (tab === 'health' && b.textContent === 'HEALTH') ||
+      (tab === 'chat' && b.textContent === 'CHAT'));
+  });
+  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
+  const pane = document.getElementById('tab-' + tab);
+  if (pane) pane.classList.add('active');
+  if (tab === 'chat') renderChatTab();
+  else if (orgDetailData) renderTab(tab);
+};
+// ── Render all orgs in sidebar ────────────────────────────────────
+function renderSidebar() {
+  const list = document.getElementById('sb-list');
+  const empty = document.getElementById('sb-empty');
+  const dot = document.getElementById('sb-live-dot');
+  const statusText = document.getElementById('sb-status-text');
+  const runCount = document.getElementById('sb-running-count');
+  // Clear existing items
+  list.querySelectorAll('.org-item').forEach(el => el.remove());
+  const running = allOrgs.filter(o => o.running).length;
+  if (running > 0) {
+    dot.classList.add('on');
+    statusText.textContent = 'LIVE';
+    runCount.textContent = running + ' RUNNING';
+  } else {
+    dot.classList.remove('on');
+    statusText.textContent = allOrgs.length ? 'IDLE' : 'EMPTY';
+    runCount.textContent = '';
+  }
+  if (!allOrgs.length) {
+    empty.style.display = 'block';
+    return;
+  }
+  empty.style.display = 'none';
+  allOrgs.forEach(org => {
+    const item = document.createElement('div');
+    item.className = 'org-item' +
+      (org.running ? ' running' : '') +
+      (selectedOrg === org.name ? ' active' : '');
+    item.dataset.orgName = org.name;
+    const rolesCount = Array.isArray(org.roles) ? org.roles.length : (org.roles || 0);
+    const topo = org.topology || 'hierarchical';
+    const goalText = (org.goal || '').slice(0, 55) + ((org.goal || '').length > 55 ? '…' : '');
+    item.innerHTML = `
+      <div class="oi-header">
+        <div class="oi-dot ${org.running ? 'running' : ''}"></div>
+        <div class="oi-name">${esc(org.name)}</div>
+        <span class="oi-badge ${(()=>{if(!org.running)return 'idle';if(!org.lastEventAt)return 'quiet';const a=Date.now()-org.lastEventAt;return a<1800000?'running':a<7200000?'quiet':'stale';})()} ">${(()=>{if(!org.running)return 'IDLE';if(!org.lastEventAt)return '🟡 QUIET';const a=Date.now()-org.lastEventAt;return a<1800000?'🟢 LIVE':a<7200000?'🟡 QUIET':'🔴 STALE';})()}</span>
+        <button class="oi-copy-btn" title="Copy org to another project">COPY</button>
+        <button class="oi-export-btn" title="Export org as JSON file">EXPORT</button>
+        <button class="oi-import-btn" title="Import org from JSON file">IMPORT</button>
+      </div>
+      ${goalText ? `<div class="oi-goal">${esc(goalText)}</div>` : ''}
+      <div class="oi-meta">
+        <span class="oi-chip">${rolesCount} <span>roles</span></span>
+        <span class="oi-chip">${esc(topo)}</span>
+      </div>`;
+    item.querySelector('.oi-copy-btn').addEventListener('click', e => {
+      e.stopPropagation();
+      openCopyModal(org.name);
+    });
+    item.querySelector('.oi-export-btn').addEventListener('click', e => {
+      e.stopPropagation();
+      exportOrg(org.name);
+    });
+    item.querySelector('.oi-import-btn').addEventListener('click', e => {
+      e.stopPropagation();
+      triggerImportOrg(org.name);
+    });
+    item.addEventListener('click', () => selectOrg(org.name));
+    list.appendChild(item);
+  });
+}
+// ── Select and load an org ────────────────────────────────────────
+async function selectOrg(name) {
+  selectedOrg = name;
+  chatCurrentId = null;  // reset chat session when org changes
+  orgRunStartMs = null;
+  if (lsUptimeTimer) { clearInterval(lsUptimeTimer); lsUptimeTimer = null; }
+  // Update sidebar active state
+  document.querySelectorAll('.org-item').forEach(el => {
+    el.classList.toggle('active', el.dataset.orgName === name);
+  });
+  // Show detail area
+  document.getElementById('no-org-state').style.display = 'none';
+  const detail = document.getElementById('org-detail');
+  detail.style.display = 'flex';
+  // Basic data from list
+  const listOrg = allOrgs.find(o => o.name === name) || {};
+  updateHeader(listOrg, null);
+  // Fetch full data
+  orgDetailData = null;
+  try {
+    const [mainR, actR, healthR] = await Promise.all([
+      fetch(`/api/org/${encodeURIComponent(name)}`),
+      fetch(`/api/org/${encodeURIComponent(name)}/activity`).catch(() => null),
+      fetch(`/api/org/${encodeURIComponent(name)}/health`).catch(() => null),
+    ]);
+    if (!mainR.ok) throw new Error('not found');
+    const raw = await mainR.json();
+    // API returns {config, state, goals, routines, approvals, running, tasks} — flatten config to top level
+    orgDetailData = raw.config ? { ...raw.config, ...raw, running: raw.running } : raw;
+    orgDetailData._activity = actR && actR.ok ? await actR.json() : [];
+    orgDetailData._health = healthR && healthR.ok ? await healthR.json() : null;
+  } catch (e) {
+    orgDetailData = { ...listOrg, roles: listOrg.roles || [], communication: [] };
+    orgDetailData._activity = [];
+    orgDetailData._health = null;
+  }
+  updateHeader(listOrg, orgDetailData);
+  // Pre-populate LIVE EVENTS from historical run data (so panel isn't empty on select)
+  if (listOrg.projectDir) {
+    try {
+      const runsR = await fetch(`/api/orgs/${encodeURIComponent(name)}/runs/current?dir=${encodeURIComponent(listOrg.projectDir)}`);
+      if (runsR.ok) {
+        const runsData = await runsR.json();
+        if (runsData.events && runsData.events.length) {
+          orgEventLog[name] = runsData.events.map(ev => ({ ...ev, _ts: ev.ts || Date.now() }));
+        }
+      }
+    } catch (_) {}
+  }
+  renderTab(currentTab);
+}
+function updateHeader(listOrg, data) {
+  const name = listOrg.name || selectedOrg || '—';
+  document.getElementById('org-name').textContent = name.toUpperCase();
+  const running = listOrg.running;
+  const badge = document.getElementById('org-status-badge');
+  // Phase 2: Three-state liveness — LIVE / QUIET / STALE / IDLE (Issue 6)
+  let badgeState, badgeText;
+  if (running) {
+    if (!listOrg.lastEventAt) { badgeState = 'quiet'; badgeText = '🟡 QUIET'; }
+    else {
+      const _ageMs = Date.now() - listOrg.lastEventAt;
+      if (_ageMs < 30 * 60 * 1000)          { badgeState = 'running'; badgeText = '🟢 LIVE'; }
+      else if (_ageMs < 2 * 60 * 60 * 1000) { badgeState = 'quiet';   badgeText = '🟡 QUIET'; }
+      else                                   { badgeState = 'stale';   badgeText = '🔴 STALE'; }
+    }
+  } else {
+    badgeState = 'idle'; badgeText = 'IDLE';
+  }
+  badge.textContent = badgeText;
+  badge.className = 'oi-badge ' + badgeState;
+  const rolesArr = data ? (data.roles || []) : [];
+  const rolesCount = Array.isArray(rolesArr) ? rolesArr.length : (listOrg.roles || 0);
+  document.getElementById('hdr-roles').textContent = rolesCount;
+  document.getElementById('hdr-topology').textContent = (data?.topology || listOrg.topology || '—').toUpperCase();
+  const created = data?.created_at || listOrg.created_at;
+  if (created) {
+    document.getElementById('hdr-created').textContent = fmtDate(created);
+    document.getElementById('hdr-created-wrap').style.display = '';
+  }
+  document.getElementById('stop-btn').style.display = running ? '' : 'none';
+}
+// ── Tab renderers ─────────────────────────────────────────────────
+function renderTab(tab) {
+  if (!orgDetailData) return;
+  if (tab === 'chart') { renderChart(); initLiveStrip(); }
+  else if (tab === 'roles') renderRoles();
+  else if (tab === 'activity') renderActivity();
+  else if (tab === 'health') renderHealth();
+}
+// ── CHART TAB ─────────────────────────────────────────────────────
+function renderChart() {
+  const d = orgDetailData;
+  const roles = Array.isArray(d.roles) ? d.roles : [];
+  const comms = Array.isArray(d.communication) ? d.communication : [];
+  const running = !!(allOrgs.find(o => o.name === selectedOrg) || {}).running;
+  // Meta bar
+  document.getElementById('meta-goal').textContent = d.goal || '—';
+  document.getElementById('meta-topology').textContent = (d.topology || '—').toUpperCase();
+  document.getElementById('meta-created').textContent = fmtDate(d.created_at);
+  // Build SVG chart
+  const svgEl = document.getElementById('org-chart-svg');
+  const edgesG = document.getElementById('oc-edges');
+  const nodesG = document.getElementById('oc-nodes');
+  edgesG.innerHTML = '';
+  nodesG.innerHTML = '';
+  if (!roles.length) {
+    // Empty chart placeholder
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', '360');
+    text.setAttribute('y', '160');
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('fill', 'oklch(36% 0.008 186)');
+    text.setAttribute('font-size', '11');
+    text.setAttribute('font-family', "'Azeret Mono','Space Mono',monospace");
+    text.setAttribute('letter-spacing', '2');
+    text.textContent = 'NO ROLES DEFINED';
+    nodesG.appendChild(text);
+    return;
+  }
+  // Layout: compute node positions
+  const W = 720, H = 320;
+  const topo = (d.topology || 'hierarchical').toLowerCase();
+  const positions = computeLayout(roles, comms, topo, W, H);
+  const NS = 'http://www.w3.org/2000/svg';
+  // Draw edges first
+  const markerMap = {
+    command: 'arr-teal', report: 'arr-indigo', feedback: 'arr-amber', handoff: 'arr-green'
+  };
+  const strokeMap = {
+    command:  { color: 'oklch(62% 0.20 186)',  opacity: 0.5,  width: 1.5, dash: '' },
+    report:   { color: 'oklch(68% 0.18 252)',  opacity: 0.4,  width: 1,   dash: '4 3' },
+    feedback: { color: 'oklch(78% 0.18 80)',   opacity: 0.3,  width: 1,   dash: '2 4' },
+    handoff:  { color: 'oklch(68% 0.20 150)',  opacity: 0.45, width: 1.5, dash: '' },
+  };
+  // Build set of edge pairs to detect anti-parallel edges (A→B + B→A)
+  const edgePairSet = new Set(comms.map(c => `${c.from}|${c.to}`));
+  comms.forEach(edge => {
+    const fromPos = positions[edge.from];
+    const toPos   = positions[edge.to];
+    if (!fromPos || !toPos || edge.from === edge.to) return;
+    const style = strokeMap[edge.type] || strokeMap.command;
+    const marker = markerMap[edge.type] || 'arr-teal';
+    // Nudge endpoints toward each edge center to avoid overlap with nodes
+    const dx = toPos.x - fromPos.x, dy = toPos.y - fromPos.y;
+    const len = Math.sqrt(dx*dx + dy*dy) || 1;
+    const R = 24; // node radius to clear
+    // Perpendicular offset for anti-parallel pairs so both edges remain visible
+    let px = 0, py = 0;
+    if (edgePairSet.has(`${edge.to}|${edge.from}`)) {
+      const [canonFrom, canonTo] = edge.from < edge.to ? [edge.from, edge.to] : [edge.to, edge.from];
+      const cp = positions[canonFrom], ct = positions[canonTo];
+      const cdx = ct.x - cp.x, cdy = ct.y - cp.y;
+      const clen = Math.sqrt(cdx*cdx + cdy*cdy) || 1;
+      const sign = edge.from === canonFrom ? 1 : -1;
+      px = sign * (-cdy / clen) * 6;
+      py = sign * ( cdx / clen) * 6;
+    }
+    const x1 = fromPos.x + (dx/len)*R + px;
+    const y1 = fromPos.y + (dy/len)*R + py;
+    const x2 = toPos.x   - (dx/len)*(R + 4) + px;
+    const y2 = toPos.y   - (dy/len)*(R + 4) + py;
+    const line = document.createElementNS(NS, 'line');
+    line.setAttribute('x1', x1.toFixed(1));
+    line.setAttribute('y1', y1.toFixed(1));
+    line.setAttribute('x2', x2.toFixed(1));
+    line.setAttribute('y2', y2.toFixed(1));
+    line.setAttribute('stroke', style.color);
+    line.setAttribute('stroke-opacity', style.opacity);
+    line.setAttribute('stroke-width', style.width);
+    if (style.dash) line.setAttribute('stroke-dasharray', style.dash);
+    line.setAttribute('marker-end', `url(#${marker})`);
+    edgesG.appendChild(line);
+  });
+  // Draw nodes
+  roles.forEach((role, i) => {
+    const pos = positions[role.id];
+    if (!pos) return;
+    const isBoss = !role.reports_to || role.reports_to === role.id;
+    const color = roleColor(i);
+    const g = document.createElementNS(NS, 'g');
+    g.setAttribute('transform', `translate(${pos.x.toFixed(1)},${pos.y.toFixed(1)})`);
+    // Pulse ring (running state)
+    if (running) {
+      const pulse = document.createElementNS(NS, 'circle');
+      pulse.setAttribute('r', '26');
+      pulse.setAttribute('class', 'oc-node-pulse running');
+      pulse.setAttribute('stroke', isBoss ? 'oklch(62% 0.20 186)' : 'oklch(68% 0.20 150)');
+      g.appendChild(pulse);
+    }
+    // Node circle
+    const circle = document.createElementNS(NS, 'circle');
+    circle.setAttribute('r', '22');
+    circle.setAttribute('class', `oc-node-bg ${isBoss ? 'boss' : 'peer'}`);
+    circle.setAttribute('stroke', color);
+    circle.setAttribute('filter', 'url(#node-glow)');
+    g.appendChild(circle);
+    // Role title — abbreviated to fit circle
+    const titleText = document.createElementNS(NS, 'text');
+    titleText.setAttribute('class', 'oc-node-text');
+    titleText.setAttribute('y', '-4');
+    const title = role.title || role.id;
+    const shortTitle = title.length > 10 ? title.slice(0, 9) + '…' : title;
+    titleText.textContent = shortTitle;
+    titleText.style.fill = color;
+    g.appendChild(titleText);
+    // Agent type
+    if (role.agent_type) {
+      const subText = document.createElementNS(NS, 'text');
+      subText.setAttribute('class', 'oc-node-sub');
+      subText.setAttribute('y', '10');
+      const agent = role.agent_type.length > 12 ? role.agent_type.slice(0, 11) + '…' : role.agent_type;
+      subText.textContent = agent;
+      g.appendChild(subText);
+    }
+    nodesG.appendChild(g);
+  });
+}
+function computeLayout(roles, comms, topology, W, H) {
+  const positions = {};
+  const n = roles.length;
+  if (n === 0) return positions;
+  const cx = W / 2, cy = H / 2;
+  const PAD = 60;
+  if (topology === 'mesh') {
+    // All nodes in a circle
+    roles.forEach((role, i) => {
+      const angle = (2 * Math.PI * i / n) - Math.PI / 2;
+      const r = Math.min((W - PAD*2) / 2, (H - PAD*2) / 2) * 0.8;
+      positions[role.id] = {
+        x: cx + r * Math.cos(angle),
+        y: cy + r * Math.sin(angle),
+      };
+    });
+  } else if (topology === 'star') {
+    // Boss in center, others around edge
+    const boss = roles.find(r => !r.reports_to) || roles[0];
+    const rest = roles.filter(r => r.id !== boss.id);
+    positions[boss.id] = { x: cx, y: cy };
+    const r2 = Math.min((W - PAD*2) / 2, (H - PAD*2) / 2) * 0.75;
+    rest.forEach((role, i) => {
+      const angle = (2 * Math.PI * i / rest.length) - Math.PI / 2;
+      positions[role.id] = {
+        x: cx + r2 * Math.cos(angle),
+        y: cy + r2 * Math.sin(angle),
+      };
+    });
+  } else {
+    // Hierarchical: layer by reports_to depth
+    const depthMap = {};
+    const childMap = {};
+    roles.forEach(r => {
+      if (!r.reports_to || r.reports_to === r.id) { depthMap[r.id] = 0; }
+      const parent = r.reports_to;
+      if (parent && parent !== r.id) {
+        if (!childMap[parent]) childMap[parent] = [];
+        childMap[parent].push(r.id);
+      }
+    });
+    // BFS to assign depths
+    let changed = true, iter = 0;
+    while (changed && iter < 20) {
+      changed = false; iter++;
+      roles.forEach(r => {
+        if (r.reports_to && r.reports_to !== r.id && depthMap[r.reports_to] !== undefined) {
+          const newDepth = (depthMap[r.reports_to] || 0) + 1;
+          if (depthMap[r.id] !== newDepth) { depthMap[r.id] = newDepth; changed = true; }
+        }
+      });
+    }
+    // Assign depth 0 to any unresolved
+    roles.forEach(r => { if (depthMap[r.id] === undefined) depthMap[r.id] = 1; });
+    const maxDepth = Math.max(...Object.values(depthMap));
+    const layerMap = {};
+    Object.entries(depthMap).forEach(([id, depth]) => {
+      if (!layerMap[depth]) layerMap[depth] = [];
+      layerMap[depth].push(id);
+    });
+    const rowH = maxDepth > 0 ? (H - PAD * 2) / (maxDepth + 1) : H - PAD * 2;
+    Object.entries(layerMap).forEach(([depth, ids]) => {
+      const y = PAD + Number(depth) * rowH + (maxDepth > 0 ? rowH / 2 : H / 2);
+      ids.forEach((id, i) => {
+        const colW = (W - PAD * 2) / ids.length;
+        const x = PAD + colW * i + colW / 2;
+        positions[id] = { x, y };
+      });
+    });
+  }
+  return positions;
+}
+// ── ROLES TAB ─────────────────────────────────────────────────────
+function renderRoles() {
+  const d = orgDetailData;
+  const roles = Array.isArray(d.roles) ? d.roles : [];
+  const grid = document.getElementById('roles-grid');
+  grid.innerHTML = '';
+  if (!roles.length) {
+    grid.innerHTML = '<div style="color:var(--dim);font-size:9px;letter-spacing:1px;">NO ROLES DEFINED</div>';
+    return;
+  }
+  roles.forEach((role, i) => {
+    const color = roleColor(i);
+    const isBoss = !role.reports_to || role.reports_to === role.id;
+    const resps = Array.isArray(role.responsibilities) ? role.responsibilities : [];
+    const block = document.createElement('div');
+    block.className = 'role-block';
+    block.innerHTML = `
+      <div class="rb-header">
+        <div class="rb-dot" style="background:${color}; box-shadow:0 0 4px ${color.replace(')', ' / 0.31)')};"></div>
+        <div class="rb-title">${esc(role.title || role.id)}</div>
+        ${role.agent_type ? `<span class="rb-agent">${esc(role.agent_type)}</span>` : ''}
+      </div>
+      <div class="rb-id">id: <span style="color:var(--muted)">${esc(role.id)}</span>${isBoss ? ' <span style="color:var(--teal);font-size:8px;margin-left:4px">BOSS</span>' : ''}</div>
+      ${role.reports_to && !isBoss ? `<div class="rb-reports">reports to: <span>${esc(role.reports_to)}</span></div>` : ''}
+      ${resps.length ? `<div class="rb-resps">${resps.map(r => `<div class="rb-resp-item">${esc(r)}</div>`).join('')}</div>` : ''}
+    `;
+    grid.appendChild(block);
+  });
+}
+// ── ACTIVITY TAB ─────────────────────────────────────────────────
+function renderActivity() {
+  const log = document.getElementById('activity-log');
+  const activity = orgDetailData._activity;
+  // Also inject org event log from SSE-captured events
+  const orgEvents = orgEventLog[selectedOrg] || [];
+  // Merge and sort
+  let events = [];
+  if (Array.isArray(activity)) events = [...activity];
+  events.push(...orgEvents);
+  events.sort((a, b) => (b.ts || 0) - (a.ts || 0));
+  if (!events.length) {
+    log.innerHTML = '<div class="act-empty">NO ACTIVITY RECORDED</div>';
+    return;
+  }
+  log.innerHTML = events.slice(0, 80).map(ev => {
+    const t = fmtTime(ev.ts);
+    const type = fmtEventType(ev.type);
+    const detail = ev.role ? ev.role : ev.msg ? ev.msg : ev.agent ? ev.agent : '';
+    return `<div class="act-row">
+      <span class="act-time">${esc(t)}</span>
+      <span class="act-type">${esc(type)}</span>
+      <span class="act-msg">${esc(detail)}</span>
+    </div>`;
+  }).join('');
+}
+// ── HEALTH TAB ─────────────────────────────────────────────────────
+function renderHealth() {
+  const health = orgDetailData._health;
+  const listOrg = allOrgs.find(o => o.name === selectedOrg) || {};
+  const roles = Array.isArray(orgDetailData.roles) ? orgDetailData.roles : [];
+  const running = listOrg.running;
+  const grid = document.getElementById('health-grid');
+  const detail = document.getElementById('health-detail');
+  grid.innerHTML = `
+    <div class="health-cell">
+      <div class="hc-label">STATUS</div>
+      <div class="hc-value ${running ? 'green' : ''}">${running ? 'LIVE' : 'IDLE'}</div>
+    </div>
+    <div class="health-cell">
+      <div class="hc-label">ROLES</div>
+      <div class="hc-value">${roles.length}</div>
+    </div>
+    <div class="health-cell">
+      <div class="hc-label">TOPOLOGY</div>
+      <div class="hc-value" style="font-size:13px">${esc((orgDetailData.topology || '—').toUpperCase())}</div>
+    </div>
+    ${health?.agents_active !== undefined ? `
+    <div class="health-cell">
+      <div class="hc-label">AGENTS</div>
+      <div class="hc-value ${health.agents_active > 0 ? 'green' : ''}">${health.agents_active}</div>
+      <div class="hc-sub">active</div>
+    </div>` : ''}
+    ${health?.tasks_pending !== undefined ? `
+    <div class="health-cell">
+      <div class="hc-label">TASKS</div>
+      <div class="hc-value ${health.tasks_pending > 5 ? 'amber' : ''}">${health.tasks_pending}</div>
+      <div class="hc-sub">pending</div>
+    </div>` : ''}
+    ${health?.run_success_rate_7d !== null && health?.run_success_rate_7d !== undefined ? `
+    <div class="health-cell">
+      <div class="hc-label">SUCCESS</div>
+      <div class="hc-value ${health.run_success_rate_7d >= 80 ? 'green' : health.run_success_rate_7d >= 50 ? 'amber' : 'red'}">${health.run_success_rate_7d}%</div>
+      <div class="hc-sub">7d rate (${health.total_runs_7d || 0} runs)</div>
+    </div>` : ''}
+    ${health?.budget_used_pct !== null && health?.budget_used_pct !== undefined ? `
+    <div class="health-cell">
+      <div class="hc-label">BUDGET</div>
+      <div class="hc-value ${health.budget_used_pct > 90 ? 'red' : health.budget_used_pct > 70 ? 'amber' : ''}">${health.budget_used_pct}%</div>
+      <div class="hc-sub">tokens used</div>
+    </div>` : ''}
+  `;
+  if (health?.errors && health.errors.length) {
+    detail.innerHTML = `
+      <div style="margin-top:16px">
+        <div style="font-size:8px;letter-spacing:2px;color:var(--dim);margin-bottom:8px">RECENT ERRORS</div>
+        ${health.errors.slice(0,5).map(e => `
+          <div style="font-size:9px;color:var(--red);padding:5px 0;border-bottom:1px solid oklch(62% 0.22 25 / 0.1)">
+            ${esc(e)}
+          </div>`).join('')}
+      </div>`;
+  } else {
+    detail.innerHTML = health ? `
+      <div style="margin-top:16px;font-size:9px;color:var(--dim);letter-spacing:1px;">
+        ${running ? 'ORG IS RUNNING — NO ERRORS DETECTED' : 'ORG IS IDLE'}
+      </div>` : `
+      <div style="margin-top:16px;font-size:9px;color:var(--dim);letter-spacing:1px;">
+        HEALTH DATA UNAVAILABLE
+      </div>`;
+  }
+}
+// ── CHAT TAB ──────────────────────────────────────────────────────
+let chatSessions = [];   // all sessions from /api/mastermind/sessions
+let chatCurrentId = null; // currently viewed session id
+let chatCurrentAgent = 'all'; // 'all' or an agent/role name
+let chatScrollLocked = false;
+let mmSse = null;
+async function loadChatSessions() {
+  try {
+    const r = await fetch('/api/mastermind/sessions');
+    if (!r.ok) return;
+    chatSessions = await r.json();
+    populateChatSelect();
+  } catch(_) {}
+}
+function orgSessionMatch(s) {
+  if (!selectedOrg) return true;
+  const orgLc = selectedOrg.toLowerCase();
+  const prompt = (s.prompt || '').toLowerCase();
+  if (prompt.includes('running org: ' + orgLc) || prompt.includes('org: ' + orgLc)) return true;
+  // Also check events for an org field
+  return (s.events || []).some(ev => (ev.org || '').toLowerCase() === orgLc);
+}
+function populateChatSelect() {
+  const sel = document.getElementById('chat-sess-select');
+  if (!sel) return;
+  const prev = chatCurrentId || sel.value;
+  // Filter to sessions for this org; fall back to all if none match
+  const orgSessions = chatSessions.filter(orgSessionMatch);
+  const list = orgSessions.length ? orgSessions : chatSessions;
+  const isFiltered = orgSessions.length > 0 && orgSessions.length < chatSessions.length;
+  const placeholder = isFiltered
+    ? `— ${orgSessions.length} session${orgSessions.length !== 1 ? 's' : ''} for ${selectedOrg} —`
+    : '— select a session —';
+  sel.innerHTML = `<option value="">${placeholder}</option>`;
+  list.forEach(s => {
+    const d = new Date(s.ts);
+    const ts = d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+    const date = d.toLocaleDateString([],{month:'short',day:'numeric'});
+    const prompt = (s.prompt || '').replace(/^running org:\s*/i, '').slice(0, 40);
+    const label = `${date} ${ts}  ${prompt}${prompt.length >= 40 ? '…' : ''}  [${s.status || '?'}]`;
+    const opt = document.createElement('option');
+    opt.value = s.id;
+    opt.textContent = label;
+    if (s.id === prev) opt.selected = true;
+    sel.appendChild(opt);
+  });
+  // Auto-select most recent running session for this org
+  if (!chatCurrentId) {
+    const running = list.find(s => s.status === 'running');
+    if (running) { sel.value = running.id; selectChatSession(running.id); }
+  }
+}
+window.selectChatSession = function(id) {
+  chatCurrentId = id;
+  chatCurrentAgent = 'all';
+  const feed = document.getElementById('chat-feed-wrap');
+  const empty = document.getElementById('chat-feed-empty');
+  const bar = document.getElementById('chat-agent-bar');
+  if (!id) {
+    feed.querySelectorAll('.cmsg').forEach(e=>e.remove());
+    if (empty) empty.style.display = 'block';
+    if (bar) bar.style.display = 'none';
+    return;
+  }
+  const sess = chatSessions.find(s => s.id === id);
+  if (!sess) return;
+  feed.querySelectorAll('.cmsg').forEach(e=>e.remove());
+  if (empty) empty.style.display = 'none';
+  populateChatAgentBar(sess.events || []);
+  (sess.events || []).forEach(ev => appendChatEvent(ev, false));
+  chatScrollFeed();
+};
+function chatAgentMatchesFilter(ev) {
+  if (chatCurrentAgent === 'all') return true;
+  return ev.agent === chatCurrentAgent || ev.from === chatCurrentAgent || ev.to === chatCurrentAgent;
+}
+function populateChatAgentBar(events) {
+  const bar = document.getElementById('chat-agent-bar');
+  if (!bar) return;
+  const agentSet = new Set();
+  (events || []).forEach(ev => {
+    if (ev.agent) agentSet.add(ev.agent);
+    if (ev.from && ev.from !== '?') agentSet.add(ev.from);
+    if (ev.to && ev.to !== '?') agentSet.add(ev.to);
+  });
+  // Add org roles even if not yet seen in events
+  if (orgDetailData && Array.isArray(orgDetailData.roles)) {
+    orgDetailData.roles.forEach(r => {
+      const n = typeof r === 'string' ? r : (r.role || r.name || r.id || '');
+      if (n) agentSet.add(n);
+    });
+  }
+  const agents = [...agentSet].sort();
+  if (!agents.length) { bar.style.display = 'none'; return; }
+  bar.style.display = 'flex';
+  bar.innerHTML = '<span id="chat-agent-label">AGENT</span>';
+  ['all', ...agents].forEach(name => {
+    const pill = document.createElement('button');
+    pill.className = 'chat-agent-pill' + (chatCurrentAgent === name ? ' active' : '');
+    pill.textContent = name === 'all' ? 'ALL' : name;
+    pill.dataset.agent = name;
+    pill.onclick = () => selectChatAgent(name);
+    bar.appendChild(pill);
+  });
+}
+window.selectChatAgent = function(name) {
+  chatCurrentAgent = name;
+  document.querySelectorAll('#chat-agent-bar .chat-agent-pill').forEach(p => {
+    p.classList.toggle('active', p.dataset.agent === name);
+  });
+  const feed = document.getElementById('chat-feed-wrap');
+  const empty = document.getElementById('chat-feed-empty');
+  const sess = chatSessions.find(s => s.id === chatCurrentId);
+  feed.querySelectorAll('.cmsg').forEach(e => e.remove());
+  if (!sess) return;
+  const visible = (sess.events || []).filter(ev => chatAgentMatchesFilter(ev));
+  if (!visible.length) {
+    if (empty) { empty.style.display = 'block'; empty.textContent = name === 'all' ? 'No events.' : `No events for "${name}"`; }
+  } else {
+    if (empty) empty.style.display = 'none';
+    visible.forEach(ev => appendChatEvent(ev, false));
+  }
+  chatScrollFeed();
+};
+function appendChatEvent(ev, animate) {
+  if (!chatAgentMatchesFilter(ev)) return;
+  // Phase 3: Apply render mode filter
+  if (chatRenderMode === 'summary' && !CHAT_SUMMARY_TYPES.has(ev.type)) return;
+  if (chatRenderMode === 'detailed' && !CHAT_DETAILED_TYPES.has(ev.type)) return;
+  // 'raw' mode: show everything
+  const feed = document.getElementById('chat-feed-wrap');
+  const empty = document.getElementById('chat-feed-empty');
+  if (!feed) return;
+  if (empty) empty.style.display = 'none';
+  const ts = new Date(ev.ts || Date.now()).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+  const DCOLS = {build:'#60a5fa',idea:'#fbbf24',marketing:'#f472b6',review:'#34d399',research:'#a78bfa',content:'#fb923c',release:'#22d3ee',sales:'#f87171',ops:'#4ade80',finance:'#fde68a',orgs:'#c084fc'};
+  const dc = d => DCOLS[d] || 'oklch(62% 0.20 186)';
+  let el = null;
+  if (ev.type === 'session:start') {
+    el = mkSys(`🔵 Session started${ev.prompt ? ': ' + esc(ev.prompt.slice(0,80)) : ''}`, ts);
+  } else if (ev.type === 'session:complete') {
+    el = mkSys(`🏁 Session complete — ${esc((ev.domains||[]).join(', ') || 'done')}`, ts);
+  } else if (ev.type === 'domain:dispatch') {
+    el = mkSys(`<span style="color:${dc(ev.domain)}">⚙ [${esc((ev.domain||'').toUpperCase())}]</span> ${esc(ev.cmd||'dispatched')}`, ts);
+  } else if (ev.type === 'domain:complete') {
+    const arts = (ev.artifacts||[]).length ? ` · ${ev.artifacts.length} artifact${ev.artifacts.length!==1?'s':''}` : '';
+    el = mkSys(`<span style="color:${dc(ev.domain)}">✓ [${esc((ev.domain||'').toUpperCase())}]</span> ${esc(ev.status||'done')}${arts}`, ts);
+  } else if (ev.type === 'agent:spawn') {
+    const col = dc(ev.domain);
+    const name = ev.agentType || ev.from || ev.agent || 'agent';
+    el = mkAgent(name, `spawned: ${esc(ev.task||'task')}`, ts, col, 'spawn');
+  } else if (ev.type === 'agent:complete') {
+    const name = ev.agentType || ev.role || ev.from || 'agent';
+    const result = (ev.result || '').slice(0, 300);
+    const cost = ev.cost_usd ? ` · $${parseFloat(ev.cost_usd).toFixed(4)}` : '';
+    const tools = ev.toolCalls?.length ? ` · ${ev.toolCalls.slice(0,4).join(', ')}` : '';
+    el = mkAgent(name, `${esc(result) || 'done'}${esc(tools)}${esc(cost)}`, ts, dc(ev.domain), 'complete');
+  } else if (ev.type === 'org:comms') {
+    el = mkIntercom(ev.from || 'boss', ev.to || 'agent', esc(ev.msg || ev.message || ''), ts);
+  } else if (ev.type === 'agent:message') {
+    el = mkAgent(ev.agent||'agent', esc(ev.text||''), ts, dc(ev.domain), null);
+  } else if (ev.type === 'intercom') {
+    el = mkIntercom(ev.from, ev.to, esc(ev.msg||''), ts);
+  } else if (ev.type === 'loop:start') {
+    el = mkSys(`🔁 Loop: ${esc(ev.command||'')} (${ev.repeat||'?'} runs)`, ts);
+  } else if (ev.type === 'loop:complete') {
+    el = mkSys(`🔁 Loop done: ${esc(ev.command||'')} — ${ev.ranReps||'?'} run(s)`, ts);
+  } else if (ev.type === 'org:artifact' && ev.artifact) {
+    el = mkArtifact(ev.artifact, ts);
+  } else {
+    el = mkSys(`<span style="opacity:0.4">${esc(ev.type)}${ev.domain?' ['+esc(ev.domain)+']':''}</span>`, ts);
+  }
+  if (!el) return;
+  if (animate) el.classList.add('new');
+  feed.appendChild(el);
+}
+function mkSys(html, ts) {
+  const el = document.createElement('div');
+  el.className = 'cmsg csys';
+  el.innerHTML = `<div class="cbubble">${html} <span style="color:var(--dim);margin-left:8px">${ts}</span></div>`;
+  return el;
+}
+function mkAgent(name, text, ts, color, typeTag) {
+  const el = document.createElement('div');
+  el.className = 'cmsg cagent';
+  const tagStyle = color ? `style="border-color:${color}44;color:${color}"` : '';
+  const ttag = typeTag ? `<span class="cevtype">${esc(typeTag)}</span>` : '';
+  el.innerHTML = `<div class="cmsg-meta"><span class="ctag" ${tagStyle}>${esc(name)}</span>${ttag}<span class="cts">${ts}</span></div><div class="cbubble">${text}</div>`;
+  return el;
+}
+function mkIntercom(from, to, text, ts) {
+  const el = document.createElement('div');
+  el.className = 'cmsg cic';
+  el.innerHTML = `<div class="cmsg-meta"><span class="ctag sender">${esc(from||'?')}</span><span class="cic-arrow">→</span><span class="ctag receiver">${esc(to||'?')}</span><span class="cevtype">intercom</span><span class="cts">${ts}</span></div><div class="cbubble">${text}</div>`;
+  return el;
+}
+function mkArtifact(art, ts) {
+  const el = document.createElement('div');
+  el.className = 'cmsg csys';
+  const isText = (art.mimeType || '').startsWith('text/') || (art.mimeType || '') === 'application/json';
+  const labelRaw = art.label || (art.path || 'artifact').split('/').pop();
+  const meta = [art.mimeType, art.size ? `${Math.round(art.size/1024*10)/10} KB` : null, art.path ? art.path.split('/').slice(-2).join('/') : null].filter(Boolean).join(' · ');
+  const viewBtn = isText && art.path
+    ? `<button onclick="viewArtifact(${JSON.stringify(art.path)},${JSON.stringify(labelRaw)})" style="background:#1a3a5a;color:#5d9fd9;border:1px solid #2980b944;border-radius:4px;padding:3px 9px;font-size:10px;font-weight:700;cursor:pointer;margin-left:auto">View</button>`
+    : `<span style="font-size:10px;color:#555">Binary</span>`;
+  el.innerHTML = `<div class="cbubble" style="padding:0"><div style="background:#1a1a2e;border:1px solid #3333aa44;border-radius:6px;padding:7px 10px;display:flex;align-items:center;gap:8px"><span style="font-size:16px">📄</span><div style="flex:1;min-width:0"><div style="font-size:12px;font-weight:700;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(labelRaw)}</div><div style="font-size:10px;color:#888">${esc(meta)}</div></div>${viewBtn}</div><span style="color:var(--dim);font-size:9px;padding:4px 6px 2px">${ts}</span></div>`;
+  return el;
+}
+async function viewArtifact(filePath, label) {
+  const orgName = selectedOrg;
+  if (!orgName || !filePath) return;
+  const url = `/api/org/${encodeURIComponent(orgName)}/artifact?path=${encodeURIComponent(filePath)}`;
+  try {
+    const data = await fetch(url).then(r => r.json());
+    if (data.binary) { console.warn('[orgs] Binary file — cannot display'); return; }
+    if (data.error === 'file not found') { console.warn('[orgs] File no longer exists'); return; }
+    if (data.error) { console.warn('[orgs] Artifact error:', data.error); return; }
+    showArtifactPanel(label, data.content, data.mimeType);
+  } catch(_) { console.warn('[orgs] Failed to load artifact', _); }
+}
+function showArtifactPanel(label, content, mimeType) {
+  let panel = document.getElementById('artifact-panel');
+  if (!panel) {
+    panel = document.createElement('div');
+    panel.id = 'artifact-panel';
+    panel.style.cssText = 'position:fixed;top:0;right:0;width:480px;height:100vh;background:#0a0a14;border-left:1px solid #333;z-index:1000;display:flex;flex-direction:column;overflow:hidden';
+    document.body.appendChild(panel);
+  }
+  panel.innerHTML = `
+    <div style="padding:12px 14px;border-bottom:1px solid #1a1a2a;display:flex;align-items:center;gap:10px">
+      <span style="font-size:13px;font-weight:700;color:#ccc;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(label)}</span>
+      <button onclick="document.getElementById('artifact-panel').remove()" style="background:none;border:none;color:#888;font-size:16px;cursor:pointer">✕</button>
+    </div>
+    <pre style="flex:1;overflow:auto;padding:14px;font-size:11px;line-height:1.6;color:#bbb;white-space:pre-wrap;word-break:break-word">${esc(content)}</pre>
+  `;
+  panel.style.display = 'flex';
+}
+function chatScrollFeed() {
+  const feed = document.getElementById('chat-feed-wrap');
+  if (feed && !chatScrollLocked) feed.scrollTop = feed.scrollHeight;
+}
+function renderChatTab() {
+  if (chatSessions.length) {
+    populateChatSelect(); // re-filter immediately with current selectedOrg
+  }
+  loadChatSessions();    // then refresh from server
+  connectMmSSE();
+  const feed = document.getElementById('chat-feed-wrap');
+  if (feed) {
+    feed.addEventListener('scroll', () => {
+      chatScrollLocked = feed.scrollHeight - feed.scrollTop - feed.clientHeight > 80;
+    }, { passive: true });
+  }
+}
+function connectMmSSE() {
+  if (mmSse) return; // already connected
+  mmSse = new EventSource('/api/mastermind-stream');
+  mmSse.onopen = () => {
+    const dot = document.getElementById('chat-live-dot');
+    const lbl = document.getElementById('chat-live-label');
+    if (dot) dot.classList.add('on');
+    if (lbl) lbl.textContent = 'LIVE';
+  };
+  mmSse.onmessage = e => {
+    try {
+      const ev = JSON.parse(e.data);
+      handleMmEvent(ev);
+    } catch(_) {}
+  };
+  mmSse.onerror = () => {
+    const dot = document.getElementById('chat-live-dot');
+    const lbl = document.getElementById('chat-live-label');
+    if (dot) dot.classList.remove('on');
+    if (lbl) lbl.textContent = 'RECONNECTING';
+    mmSse = null;
+    setTimeout(connectMmSSE, 4000);
+  };
+}
+function handleMmEvent(ev) {
+  // Update in-memory sessions list
+  if (ev.type === 'session:start') {
+    const existing = chatSessions.find(s => s.id === ev.session);
+    if (!existing) {
+      chatSessions.unshift({ id: ev.session, ts: ev.ts||Date.now(), prompt: ev.prompt||'', status:'running', domains:[], events:[ev] });
+    }
+    populateChatSelect();
+    // Auto-select if chat tab is active, nothing selected, and session matches this org
+    if (currentTab === 'chat' && !chatCurrentId) {
+      const newSess = chatSessions.find(s => s.id === ev.session);
+      if (newSess && orgSessionMatch(newSess)) {
+        const sel = document.getElementById('chat-sess-select');
+        if (sel) { sel.value = ev.session; selectChatSession(ev.session); }
+      }
+    }
+    return;
+  }
+  const sess = chatSessions.find(s => s.id === ev.session);
+  if (sess) {
+    (sess.events = sess.events || []).push(ev);
+    if (ev.type === 'domain:dispatch' && ev.domain && !sess.domains.includes(ev.domain)) sess.domains.push(ev.domain);
+    if (ev.type === 'session:complete') { sess.status = ev.status || 'complete'; sess.endTs = ev.ts; populateChatSelect(); }
+    // If this is the currently-viewed session and chat tab is visible, append bubble
+    if (currentTab === 'chat' && chatCurrentId === ev.session) {
+      const hasNewAgent = (ev.agent && !document.querySelector(`[data-agent="${CSS.escape(ev.agent)}"]`))
+        || (ev.from && !document.querySelector(`[data-agent="${CSS.escape(ev.from)}"]`))
+        || (ev.to && !document.querySelector(`[data-agent="${CSS.escape(ev.to)}"]`));
+      if (hasNewAgent) populateChatAgentBar(sess.events);
+      appendChatEvent(ev, true);
+      chatScrollFeed();
+    }
+  }
+}
+// ── Stop org action ────────────────────────────────────────────────
+window.stopCurrentOrg = async function() {
+  if (!selectedOrg) return;
+  try {
+    await fetch(`/api/orgs/${encodeURIComponent(selectedOrg)}/stop`, { method: 'POST' });
+    setTimeout(loadOrgs, 600);
+  } catch (_) {}
+};
+// ── SSE org events ────────────────────────────────────────────────
+const orgEventLog = {};
+let orgRunStartMs = null;
+let lsUptimeTimer = null;
+let evtSource = null;
+function connectSSE() {
+  if (evtSource) evtSource.close();
+  evtSource = new EventSource('/api/mastermind-stream');
+  evtSource.onmessage = e => {
+    try {
+      const ev = JSON.parse(e.data);
+      if (ev && typeof ev.org === 'string' && ev.type && (ev.type.startsWith('org:') || ev.type.startsWith('agent:'))) {
+        const name = ev.org;
+        if (!orgEventLog[name]) orgEventLog[name] = [];
+        orgEventLog[name].push({ ...ev, _ts: Date.now() });
+        if (orgEventLog[name].length > 50) orgEventLog[name].shift();
+        // Refresh if this org is selected
+        if (name === selectedOrg && currentTab === 'activity') {
+          renderActivity();
+        }
+        // Reload org list if start/stop event
+        if (ev.type === 'org:start' || ev.type === 'org:stop') {
+          setTimeout(loadOrgs, 400);
+        }
+        // Update live strip for selected org on chart tab
+        if (name === selectedOrg && currentTab === 'chart') {
+          if (ev.type === 'org:start') orgRunStartMs = Date.now();
+          if (ev.type === 'org:stop') orgRunStartMs = null;
+          appendLiveFeedRow(ev, true);
+          updateLiveStrip();
+        }
+      }
+    } catch (_) {}
+  };
+  evtSource.onerror = () => {
+    setTimeout(connectSSE, 5000);
+  };
+}
+function updateLiveStrip() {
+  const events = orgEventLog[selectedOrg] || [];
+  const running = orgRunStartMs !== null;
+  const dot = document.getElementById('ls-dot');
+  const label = document.getElementById('ls-label');
+  if (!dot || !label) return;
+  dot.className = 'ls-dot' + (running ? ' running' : '');
+  label.textContent = running ? 'RUNNING' : 'IDLE';
+  // Uptime
+  const uptimeEl = document.getElementById('ls-uptime');
+  if (uptimeEl) {
+    if (running && orgRunStartMs) {
+      const s = Math.floor((Date.now() - orgRunStartMs) / 1000);
+      const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
+      uptimeEl.textContent = h ? `up ${h}h ${m}m` : m ? `up ${m}m ${sec}s` : `up ${sec}s`;
+    } else {
+      uptimeEl.textContent = '—';
+    }
+  }
+  // Last event
+  const lastEl = document.getElementById('ls-last');
+  if (lastEl && events.length) {
+    const last = events[events.length - 1];
+    const ago = Math.round((Date.now() - (last._ts || Date.now())) / 1000);
+    lastEl.textContent = ago < 5 ? 'just now' : ago < 60 ? ago + 's ago' : Math.floor(ago/60) + 'm ago';
+  } else if (lastEl) {
+    lastEl.textContent = '—';
+  }
+  // Events per 5 min
+  const now = Date.now();
+  const epmEl = document.getElementById('ls-epm');
+  if (epmEl) {
+    const recent = events.filter(ev => ev._ts && now - ev._ts < 5 * 60 * 1000).length;
+    epmEl.textContent = recent + ' / 5m';
+  }
+  // 12-bar sparkline (25s buckets)
+  renderLiveSparkline(events);
+}
+function renderLiveSparkline(events) {
+  const wrap = document.getElementById('ls-sparkline');
+  if (!wrap) return;
+  const now = Date.now();
+  const buckets = Array.from({ length: 12 }, (_, i) => {
+    const start = now - (12 - i) * 25000;
+    return events.filter(ev => ev._ts && ev._ts >= start && ev._ts < start + 25000).length;
+  });
+  const max = Math.max(1, ...buckets);
+  wrap.innerHTML = buckets.map((count, i) => {
+    const h = Math.max(2, Math.round(count / max * 18));
+    return `<div class="ls-bar${i === 11 ? ' active' : ''}" style="height:${h}px" title="${count} events"></div>`;
+  }).join('');
+}
+function appendLiveFeedRow(ev, isNew) {
+  const rows = document.getElementById('clf-rows');
+  if (!rows) return;
+  const time = new Date().toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  const type = (ev.type || '').replace('org:', '');
+  const msg = ev.message || ev.msg || ev.task?.slice(0,60) || (ev.result||'').slice(0,60) || ev.agentType || ev.agent || ev.role || ev.status || '';
+  const row = document.createElement('div');
+  row.className = 'clf-row' + (isNew ? ' new' : '');
+  row.title = msg;
+  row.innerHTML = `<span class="clf-time">${time}</span><span class="clf-type">${type}</span><span class="clf-msg">${msg}</span>`;
+  rows.appendChild(row);
+  if (rows.children.length > 30) rows.removeChild(rows.firstChild);
+  rows.scrollTop = rows.scrollHeight;
+}
+function initLiveStrip() {
+  orgRunStartMs = null;
+  const rows = document.getElementById('clf-rows');
+  if (rows) rows.innerHTML = '';
+  const events = orgEventLog[selectedOrg] || [];
+  // Seed from existing event history
+  events.forEach(ev => appendLiveFeedRow(ev, false));
+  // Detect running state from list data
+  const listOrg = allOrgs.find(o => o.name === selectedOrg);
+  if (listOrg && listOrg.running && !orgRunStartMs) {
+    const acts = orgDetailData._activity || [];
+    const startEv = acts.slice().reverse().find(e => e.type === 'org:start' || e.type === 'org:create');
+    if (startEv && startEv.ts) orgRunStartMs = startEv.ts;
+    else if (listOrg.running_since) orgRunStartMs = listOrg.running_since;
+    else orgRunStartMs = Date.now(); // fallback
+  } else if (listOrg && !listOrg.running) {
+    orgRunStartMs = null;
+  }
+  updateLiveStrip();
+  if (lsUptimeTimer) clearInterval(lsUptimeTimer);
+  lsUptimeTimer = setInterval(updateLiveStrip, 1000);
+}
+// ── Data loading ──────────────────────────────────────────────────
+async function loadOrgs() {
+  try {
+    const r = await fetch('/api/orgs');
+    allOrgs = await r.json();
+    if (!Array.isArray(allOrgs)) allOrgs = [];
+  } catch (_) {
+    allOrgs = [];
+  }
+  renderSidebar();
+  // Re-render detail if selected org changed running state
+  if (selectedOrg && orgDetailData) {
+    const listOrg = allOrgs.find(o => o.name === selectedOrg);
+    if (listOrg) updateHeader(listOrg, orgDetailData);
+  }
+}
+// ── Copy org modal ────────────────────────────────────────────────
+let copyTargetOrg = null;
+window.openCopyModal = function(name) {
+  copyTargetOrg = name;
+  document.getElementById('copy-modal-org').textContent = name.toUpperCase();
+  document.getElementById('copy-dest-input').value = '';
+  document.getElementById('copy-modal-status').textContent = '';
+  document.getElementById('copy-modal-status').className = '';
+  document.getElementById('copy-confirm-btn').disabled = false;
+  document.getElementById('copy-modal-overlay').classList.add('open');
+  // Load project list
+  const listEl = document.getElementById('copy-project-list');
+  listEl.innerHTML = '<div class="copy-proj-loading">Loading projects…</div>';
+  fetch('/api/projects').then(r => r.json()).then(data => {
+    const projects = data?.projects || [];
+    if (!projects.length) { listEl.innerHTML = '<div class="copy-proj-loading">No other projects found</div>'; return; }
+    listEl.innerHTML = projects.map(p => {
+      const label = p.name || p.slug || p.path?.split('/').pop() || p.path;
+      const isCurrentDir = p.path === (window._orgDir || '');
+      return `<div class="copy-proj-row${isCurrentDir ? ' selected' : ''}" title="${p.path}" onclick="selectCopyProject('${p.path.replace(/'/g,"\\'")}', this)">
+        <span style="color:var(--text-hi)">${label}</span>
+        <span style="color:var(--dim);font-size:10px;margin-left:6px">${p.path.replace(/\/Users\/[^/]+\//, '~/')}</span>
+      </div>`;
+    }).join('');
+  }).catch(() => { listEl.innerHTML = '<div class="copy-proj-loading">Could not load projects</div>'; });
+  setTimeout(() => document.getElementById('copy-dest-input').focus(), 60);
+};
+window.selectCopyProject = function(path, el) {
+  document.querySelectorAll('.copy-proj-row').forEach(r => r.classList.remove('selected'));
+  el.classList.add('selected');
+  document.getElementById('copy-dest-input').value = path;
+};
+window.closeCopyModal = function() {
+  document.getElementById('copy-modal-overlay').classList.remove('open');
+  copyTargetOrg = null;
+};
+window.executeCopy = async function() {
+  if (!copyTargetOrg) return;
+  const destination = document.getElementById('copy-dest-input').value.trim();
+  const status = document.getElementById('copy-modal-status');
+  const btn = document.getElementById('copy-confirm-btn');
+  if (!destination) {
+    status.textContent = 'ENTER A DESTINATION PATH';
+    status.className = 'err';
+    return;
+  }
+  btn.disabled = true;
+  status.textContent = 'COPYING…';
+  status.className = '';
+  try {
+    const r = await fetch(`/api/orgs/${encodeURIComponent(copyTargetOrg)}/copy`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ destination }),
+    });
+    const data = await r.json();
+    if (r.ok && data.ok) {
+      status.textContent = 'COPIED — ' + (data.destFile || destination);
+      status.className = 'ok';
+      setTimeout(closeCopyModal, 2000);
+    } else {
+      status.textContent = 'ERROR: ' + (data.error || r.statusText);
+      status.className = 'err';
+      btn.disabled = false;
+    }
+  } catch(e) {
+    status.textContent = 'ERROR: ' + e.message;
+    status.className = 'err';
+    btn.disabled = false;
+  }
+};
+// ── Export org ────────────────────────────────────────────────────
+window.exportOrg = async function(name) {
+  try {
+    const r = await fetch(`/api/orgs/${encodeURIComponent(name)}`);
+    if (!r.ok) throw new Error(r.statusText);
+    const blob = await r.blob();
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `${name}.json`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 5000);
+  } catch(e) {
+    console.warn('[orgs] Export failed:', e.message);
+  }
+};
+// ── Import org ────────────────────────────────────────────────────
+let importTargetOrg = null;
+window.triggerImportOrg = function(name) {
+  importTargetOrg = name;
+  let inp = document.getElementById('oi-import-file-input');
+  if (!inp) {
+    inp = document.createElement('input');
+    inp.type = 'file';
+    inp.accept = '.json,application/json';
+    inp.id = 'oi-import-file-input';
+    inp.style.display = 'none';
+    document.body.appendChild(inp);
+    inp.addEventListener('change', handleImportFile);
+  }
+  inp.value = '';
+  inp.click();
+};
+async function handleImportFile(e) {
+  const file = e.target.files[0];
+  if (!file || !importTargetOrg) return;
+  try {
+    const text = await file.text();
+    let data;
+    try { data = JSON.parse(text); } catch(_) { console.warn('[orgs] Import failed: invalid JSON'); return; }
+    const r = await fetch(`/api/orgs/${encodeURIComponent(importTargetOrg)}/import`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    const result = await r.json();
+    if (r.ok && result.ok) {
+      loadOrgs();
+    } else {
+      console.warn('[orgs] Import failed:', result.error || r.statusText);
+    }
+  } catch(e) {
+    console.warn('[orgs] Import failed:', e.message);
+  } finally {
+    importTargetOrg = null;
+  }
+}
+// ── Bootstrap ─────────────────────────────────────────────────────
+fetch('/api/status').then(r => r.json()).then(d => { if (d.dir) window._orgDir = d.dir; }).catch(() => {});
+connectSSE();
+loadOrgs();
+setInterval(loadOrgs, 8000);
+</script>
+</body>
+</html>