@monoes/monomindcli 1.11.13 → 1.12.0

package/dist/src/ui/orgs.html

@@ -285,6 +285,43 @@ html, body {
 .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; }
 
@@ -364,6 +401,116 @@ html, body {
 .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); }
+
+#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; }
@@ -397,8 +544,8 @@ html, body {
 
 /* Arrow markers are inline in the SVG */
 
-/* ── Copy button on org items ───────────────────────────────────── */
-.oi-copy-btn {
+/* ── Copy / Export / Import buttons on org items ────────────────── */
+.oi-copy-btn, .oi-export-btn, .oi-import-btn {
   display: none;
   flex-shrink: 0;
   background: none;
@@ -414,14 +561,49 @@ html, body {
   line-height: 1.4;
   white-space: nowrap;
 }
-.org-item:hover .oi-copy-btn { display: inline-block; }
+.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;
@@ -571,6 +753,7 @@ html, body {
         <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">
@@ -618,6 +801,23 @@ html, body {
               </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);">
@@ -662,6 +862,26 @@ html, body {
           </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-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 -->
@@ -672,12 +892,14 @@ html, body {
   <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">DESTINATION PROJECT PATH</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()">
+           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">
-      The org config will be written to<br>
-      <span style="color:var(--muted)">&lt;destination&gt;/.monomind/orgs/&lt;name&gt;.json</span>
+      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">
@@ -742,12 +964,14 @@ window.switchTab = function(tab) {
       (tab === 'chart' && b.textContent === 'ORG CHART') ||
       (tab === 'roles' && b.textContent === 'ROLES') ||
       (tab === 'activity' && b.textContent === 'ACTIVITY') ||
-      (tab === 'health' && b.textContent === 'HEALTH'));
+      (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 (orgDetailData) renderTab(tab);
+  if (tab === 'chat') renderChatTab();
+  else if (orgDetailData) renderTab(tab);
 };
 
 // ── Render all orgs in sidebar ────────────────────────────────────
@@ -795,6 +1019,8 @@ function renderSidebar() {
         <div class="oi-name">${esc(org.name)}</div>
         <span class="oi-badge ${org.running ? 'running' : 'idle'}">${org.running ? 'LIVE' : 'IDLE'}</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">
@@ -806,6 +1032,14 @@ function renderSidebar() {
       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);
   });
@@ -814,6 +1048,9 @@ function renderSidebar() {
 // ── 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 => {
@@ -879,7 +1116,7 @@ function updateHeader(listOrg, data) {
 // ── Tab renderers ─────────────────────────────────────────────────
 function renderTab(tab) {
   if (!orgDetailData) return;
-  if (tab === 'chart') renderChart();
+  if (tab === 'chart') { renderChart(); initLiveStrip(); }
   else if (tab === 'roles') renderRoles();
   else if (tab === 'activity') renderActivity();
   else if (tab === 'health') renderHealth();
@@ -1215,6 +1452,18 @@ function renderHealth() {
       <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) {
@@ -1237,6 +1486,281 @@ function renderHealth() {
   }
 }
 
+// ── 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;
+  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);
+    el = mkAgent(ev.agent||'agent', `spawned: ${esc(ev.task||'task')}`, ts, col, 'spawn');
+  } 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 {
+    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 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;
@@ -1248,18 +1772,20 @@ window.stopCurrentOrg = async function() {
 
 // ── SSE org events ────────────────────────────────────────────────
 const orgEventLog = {};
+let orgRunStartMs = null;
+let lsUptimeTimer = null;
 
 let evtSource = null;
 function connectSSE() {
   if (evtSource) evtSource.close();
-  evtSource = new EventSource('/api/events');
+  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:')) {
         const name = ev.org;
         if (!orgEventLog[name]) orgEventLog[name] = [];
-        orgEventLog[name].push(ev);
+        orgEventLog[name].push({ ...ev, _ts: Date.now() });
         if (orgEventLog[name].length > 50) orgEventLog[name].shift();
 
         // Refresh if this org is selected
@@ -1270,6 +1796,13 @@ function connectSSE() {
         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 (_) {}
   };
@@ -1278,6 +1811,102 @@ function connectSSE() {
   };
 }
 
+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.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 {
@@ -1307,9 +1936,30 @@ window.openCopyModal = function(name) {
   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;
@@ -1351,6 +2001,66 @@ window.executeCopy = async function() {
   }
 };
 
+// ── 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) {
+    alert('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(_) { alert('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 {
+      alert('IMPORT FAILED: ' + (result.error || r.statusText));
+    }
+  } catch(e) {
+    alert('IMPORT FAILED: ' + e.message);
+  } finally {
+    importTargetOrg = null;
+  }
+}
+
 // ── Bootstrap ─────────────────────────────────────────────────────
 connectSSE();
 loadOrgs();