monomind 2.0.3 → 2.1.3

package/packages/@monomind/cli/dist/src/ui/orgs-files.js

@@ -0,0 +1,192 @@
+// packages/@monomind/cli/dist/src/ui/orgs-files.js
+// Files tab + diff-view feature, split out of orgs.html to keep that file under
+// the CLAUDE.md 500-line guideline. Loaded as a classic <script> right where this
+// code used to live inline — shares the same global scope as orgs.html's main
+// script (chatSessions, orgSessionMatch, esc, currentTab, loadChatSessions,
+// viewArtifact are all defined there and referenced here by closure).
+
+// ── Files tab: every asset produced by this org, grouped by path with full
+// version history (not deduped) so successive writes to the same file can be
+// diffed against each other, latest-touched file first ──
+let filesGroups = [];
+
+function collectOrgArtifacts() {
+  const bySessions = chatSessions.filter(orgSessionMatch);
+  const byPath = new Map(); // path -> [{ art, ts, from }]
+  bySessions.forEach(s => (s.events || []).forEach(ev => {
+    if (ev.type !== 'org:artifact') return;
+    const art = ev.artifact || (ev.path ? { path: ev.path, label: ev.label, mimeType: ev.mimeType } : null);
+    if (!art || !art.path) return;
+    if (!byPath.has(art.path)) byPath.set(art.path, []);
+    byPath.get(art.path).push({ art, ts: ev.ts || 0, from: ev.from || '' });
+  }));
+  const groups = [];
+  byPath.forEach((versions, path) => {
+    versions.sort((a, b) => a.ts - b.ts);
+    groups.push({ path, versions, latest: versions[versions.length - 1] });
+  });
+  groups.sort((a, b) => b.latest.ts - a.latest.ts);
+  return groups;
+}
+
+function mkFileCard(group) {
+  const { art, ts, from } = group.latest;
+  const el = document.createElement('div');
+  el.className = 'file-card';
+  const isText = (art.mimeType || '').startsWith('text/') || (art.mimeType || '') === 'application/json';
+  const labelRaw = art.label || (art.path || 'file').split('/').pop();
+  const timeStr = ts ? new Date(ts).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
+  const meta = [from, art.path ? art.path.split('/').slice(-3).join('/') : null, timeStr].filter(Boolean).join(' · ');
+  const vBadge = group.versions.length > 1 ? `<span class="fc-vbadge">${group.versions.length}v</span>` : '';
+  const diffable = group.versions.filter(v => typeof v.art.content === 'string').length >= 2;
+  el.innerHTML = `
+    <div class="fc-icon">📄</div>
+    <div class="fc-body">
+      <div class="fc-name">${esc(labelRaw)} ${vBadge}</div>
+      <div class="fc-meta">${esc(meta)}</div>
+    </div>
+    ${diffable ? `<button class="fc-diff" onclick="openDiffPanel(${JSON.stringify(art.path)})">Diff</button>` : ''}
+    ${isText && art.path
+      ? `<button class="fc-view" onclick="viewArtifact(${JSON.stringify(art.path)},${JSON.stringify(labelRaw)})">View</button>`
+      : `<span class="fc-binary">Binary</span>`}
+  `;
+  return el;
+}
+
+function paintFilesGrid() {
+  const grid = document.getElementById('files-grid');
+  const empty = document.getElementById('files-empty');
+  if (!grid) return;
+  filesGroups = collectOrgArtifacts();
+  renderFilesGridFromGroups();
+}
+
+/** Re-renders the grid from the current in-memory `filesGroups` — no rescan.
+ *  Split out of paintFilesGrid() so applyArtifactEvent() can repaint after an
+ *  O(groups) incremental update instead of forcing a full O(all-events) rescan. */
+function renderFilesGridFromGroups() {
+  const grid = document.getElementById('files-grid');
+  const empty = document.getElementById('files-empty');
+  if (!grid) return;
+  grid.innerHTML = '';
+  if (!filesGroups.length) { if (empty) empty.style.display = 'block'; return; }
+  if (empty) empty.style.display = 'none';
+  filesGroups.forEach(group => grid.appendChild(mkFileCard(group)));
+}
+
+/** Incrementally folds a single new org:artifact event into `filesGroups` —
+ *  O(groups) to re-sort by latest-touched, not O(all sessions' all events)
+ *  like collectOrgArtifacts(). Mirrors collectOrgArtifacts()'s grouping rules. */
+function applyArtifactEvent(ev) {
+  const art = ev.artifact || (ev.path ? { path: ev.path, label: ev.label, mimeType: ev.mimeType } : null);
+  if (!art || !art.path) return;
+  const entry = { art, ts: ev.ts || 0, from: ev.from || '' };
+  let group = filesGroups.find(g => g.path === art.path);
+  if (!group) {
+    group = { path: art.path, versions: [], latest: entry };
+    filesGroups.push(group);
+  }
+  group.versions.push(entry);
+  group.versions.sort((a, b) => a.ts - b.ts);
+  group.latest = group.versions[group.versions.length - 1];
+  filesGroups.sort((a, b) => b.latest.ts - a.latest.ts);
+  renderFilesGridFromGroups();
+}
+
+function renderFilesTab() {
+  paintFilesGrid(); // paint immediately with whatever's cached
+  loadChatSessions().then(() => { if (currentTab === 'files') paintFilesGrid(); });
+}
+
+// ── Diff view: compare two captured versions of the same file ──
+window.openDiffPanel = function(path) {
+  const group = filesGroups.find(g => g.path === path);
+  if (!group) return;
+  const versions = group.versions.filter(v => typeof v.art.content === 'string');
+  if (versions.length < 2) return;
+  const label = group.latest.art.label || path.split('/').pop();
+  renderDiffPanel(label, versions);
+};
+
+function renderDiffPanel(label, versions) {
+  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:640px;height:100vh;background:#0a0a14;border-left:1px solid #333;z-index:1000;display:flex;flex-direction:column;overflow:hidden';
+    document.body.appendChild(panel);
+  }
+  const optLabel = v => `${new Date(v.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })} · ${esc(v.from || '?')}`;
+  const opts = versions.map((v, i) => `<option value="${i}">${optLabel(v)}</option>`).join('');
+  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)} — diff</span>
+      <button onclick="document.getElementById('artifact-panel').remove()" style="background:none;border:none;color:#888;font-size:16px;cursor:pointer">✕</button>
+    </div>
+    <div style="padding:8px 14px;border-bottom:1px solid #1a1a2a;display:flex;gap:8px;align-items:center;font-size:10px;color:#888">
+      <select id="diff-from" style="background:#151520;color:#ccc;border:1px solid #333;border-radius:3px;padding:2px 6px;font-size:10px">${opts}</select>
+      <span>→</span>
+      <select id="diff-to" style="background:#151520;color:#ccc;border:1px solid #333;border-radius:3px;padding:2px 6px;font-size:10px">${opts}</select>
+    </div>
+    <div id="diff-body" style="flex:1;overflow:auto;font-size:11px;line-height:1.6;font-family:var(--mono,ui-monospace,monospace)"></div>
+  `;
+  panel.style.display = 'flex';
+  const fromSel = document.getElementById('diff-from');
+  const toSel = document.getElementById('diff-to');
+  fromSel.value = String(versions.length - 2);
+  toSel.value = String(versions.length - 1);
+  const recompute = () => renderDiffBody(versions[Number(fromSel.value)].art.content, versions[Number(toSel.value)].art.content);
+  fromSel.onchange = recompute;
+  toSel.onchange = recompute;
+  recompute();
+}
+
+function renderDiffBody(oldText, newText) {
+  const body = document.getElementById('diff-body');
+  if (!body) return;
+  if (oldText === newText) {
+    body.innerHTML = '<div style="padding:14px;color:#666">No differences between these two versions.</div>';
+    return;
+  }
+  const rows = diffLines(oldText, newText);
+  if (!rows) {
+    body.innerHTML = '<div style="padding:14px;color:#666">File too large to diff line-by-line.</div>';
+    return;
+  }
+  body.innerHTML = rows.map(r => {
+    const style = r.type === 'add' ? 'background:#0d2818;color:#7ee787'
+      : r.type === 'del' ? 'background:#2d0d10;color:#ffa198' : 'color:#8b949e';
+    const prefix = r.type === 'add' ? '+' : r.type === 'del' ? '-' : ' ';
+    return `<div style="${style};padding:1px 12px;white-space:pre-wrap;word-break:break-word">${esc(prefix + ' ' + r.text)}</div>`;
+  }).join('');
+}
+
+/** Line-level LCS diff. Returns null (caller shows a fallback message) rather
+ *  than hanging the tab if both files are unexpectedly huge — the O(n*m) DP
+ *  table would otherwise blow past what's reasonable to allocate client-side.
+ *  Bounds n and m individually, not just their product: a lopsided pair (e.g.
+ *  n=1, m=4000000 — one huge file diffed against a near-empty one) passes the
+ *  product check but still allocates a 4M-row DP table, one row per line of A. */
+function diffLines(a, b) {
+  const A = a.split('\n'), B = b.split('\n');
+  const n = A.length, m = B.length;
+  const DIFF_MAX_LINES = 20000;
+  if (n > DIFF_MAX_LINES || m > DIFF_MAX_LINES || n * m > 4000000) return null;
+  const dp = new Array(n + 1);
+  for (let i = 0; i <= n; i++) dp[i] = new Int32Array(m + 1);
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      dp[i][j] = A[i] === B[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+    }
+  }
+  const out = [];
+  let i = 0, j = 0;
+  while (i < n && j < m) {
+    if (A[i] === B[j]) { out.push({ type: 'ctx', text: A[i] }); i++; j++; }
+    else if (dp[i + 1][j] >= dp[i][j + 1]) { out.push({ type: 'del', text: A[i] }); i++; }
+    else { out.push({ type: 'add', text: B[j] }); j++; }
+  }
+  while (i < n) { out.push({ type: 'del', text: A[i] }); i++; }
+  while (j < m) { out.push({ type: 'add', text: B[j] }); j++; }
+  return out;
+}

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

@@ -383,6 +383,46 @@ html, body {
   content: '—'; color: oklch(36% 0.008 186 / 0.5); flex-shrink: 0; margin-top: 1px;
 }
 
+/* ── Files tab ──────────────────────────────────────────────────── */
+#files-pane { padding: 20px; }
+.files-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 10px;
+}
+.file-card {
+  background: var(--bg-panel);
+  border: 1px solid var(--border); border-radius: 3px;
+  padding: 10px 12px;
+  display: flex; align-items: center; gap: 10px;
+  transition: border-color 0.12s;
+}
+.file-card:hover { border-color: var(--teal-dim); }
+.fc-icon { font-size: 18px; flex-shrink: 0; }
+.fc-body { flex: 1; min-width: 0; }
+.fc-name {
+  font-size: 12px; color: var(--text); font-weight: 500;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.fc-meta {
+  font-size: 9px; color: var(--dim); margin-top: 2px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.fc-view {
+  flex-shrink: 0; background: #1a3a5a; color: #5d9fd9; border: 1px solid #2980b944;
+  border-radius: 4px; padding: 4px 10px; font-size: 10px; font-weight: 700; cursor: pointer;
+}
+.fc-view:hover { background: #204a70; }
+.fc-diff {
+  flex-shrink: 0; background: #2a1a3a; color: #b98dd9; border: 1px solid #8e44ad44;
+  border-radius: 4px; padding: 4px 10px; font-size: 10px; font-weight: 700; cursor: pointer;
+}
+.fc-diff:hover { background: #3a2050; }
+.fc-vbadge {
+  font-size: 8px; font-weight: 700; color: var(--dim); border: 1px solid var(--border);
+  border-radius: 2px; padding: 1px 5px; margin-left: 4px; letter-spacing: 0.5px;
+}
+.fc-binary { flex-shrink: 0; font-size: 9px; color: var(--dim); }
+
 /* ── Activity / event log ───────────────────────────────────────── */
 #activity-pane { padding: 20px; }
 #activity-log { display: flex; flex-direction: column; gap: 0; }
@@ -819,6 +859,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('files')">FILES</button>
         <button class="tab-btn" onclick="switchTab('chat')">CHAT</button>
       </div>
 
@@ -937,6 +978,14 @@ html, body {
           </div>
         </div>
 
+        <!-- Files tab: every asset any agent in this org has produced, across all runs -->
+        <div class="tab-pane" id="tab-files">
+          <div id="files-pane">
+            <div id="files-empty" class="act-empty" style="display:none">No files produced yet.</div>
+            <div id="files-grid" class="files-grid"></div>
+          </div>
+        </div>
+
         <!-- Chat tab -->
         <div class="tab-pane" id="tab-chat">
           <div id="chat-pane">
@@ -1081,9 +1130,19 @@ window.switchTab = function(tab) {
   const mainBody = document.getElementById('main-body');
   if (mainBody) mainBody.classList.toggle('chat-active', tab === 'chat');
   if (tab === 'chat') renderChatTab();
+  else if (tab === 'files') renderFilesTab();
   else if (orgDetailData) renderTab(tab);
 };
 
+// Files tab + diff view — extracted to orgs-files.js to keep this file under
+// the CLAUDE.md 500-line-per-file guideline. Loaded as a classic script below,
+// sharing this script's global scope (function declarations here call into it,
+// e.g. renderFilesTab() from renderTab() above and applyArtifactEvent() from
+// handleMmEvent() below).
+</script>
+<script src="orgs-files.js"></script>
+<script>
+
 // ── Render all orgs in sidebar ────────────────────────────────────
 function renderSidebar() {
   const list = document.getElementById('sb-list');
@@ -1689,8 +1748,13 @@ function orgSessionMatch(s) {
   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);
+  // Only genuine org-run events (org:comms, org:artifact, org:start, ...) count.
+  // agent:bash / agent:edit / etc. also carry an `org` field (ambient "which
+  // org was active while this Claude Code session ran" tagging) — matching on
+  // those too would pull an unrelated dev session's entire tool-call history
+  // into this org's Chat/Files tabs whenever that org happened to be running
+  // at the same time.
+  return (s.events || []).some(ev => (ev.type || '').startsWith('org:') && (ev.org || '').toLowerCase() === orgLc);
 }
 
 function populateChatSelect() {
@@ -1834,21 +1898,21 @@ function appendChatEvent(ev, animate) {
   } 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');
+    el = mkAgent(name, `spawned: ${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');
+    el = mkAgent(name, `${result || 'done'}${tools}${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);
+    el = mkIntercom(ev.from || 'boss', ev.to || 'agent', ev.msg || ev.message || '', ts);
   } else if (ev.type === 'agent:message') {
-    el = mkAgent(ev.agent||'agent', esc(ev.text||''), ts, dc(ev.domain), null);
+    el = mkAgent(ev.agent||'agent', ev.text||'', ts, dc(ev.domain), null);
   } else if (ev.type === 'intercom') {
-    el = mkIntercom(ev.from, ev.to, esc(ev.msg||''), ts);
+    el = mkIntercom(ev.from, ev.to, ev.msg||'', ts);
   } else if (ev.type === 'user:message') {
-    el = mkUser(esc(ev.text||ev.msg||''), ts);
+    el = mkUser(ev.text||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') {
@@ -1876,13 +1940,13 @@ function mkAgent(name, text, ts, color, typeTag) {
   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>`;
+  el.innerHTML = `<div class="cmsg-meta"><span class="ctag" ${tagStyle}>${esc(name)}</span>${ttag}<span class="cts">${ts}</span></div><div class="cbubble">${esc(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>`;
+  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">${esc(text)}</div>`;
   return el;
 }
 function mkArtifact(art, ts) {
@@ -1901,7 +1965,7 @@ function mkArtifact(art, ts) {
 function mkUser(text, ts) {
   const el = document.createElement('div');
   el.className = 'cmsg cuser';
-  el.innerHTML = `<div class="cmsg-meta" style="justify-content:flex-end"><span class="cts">${ts}</span><span class="ctag" style="border-color:oklch(68% 0.18 250 / 0.35);color:oklch(68% 0.14 250)">you</span></div><div class="cbubble">${text}</div>`;
+  el.innerHTML = `<div class="cmsg-meta" style="justify-content:flex-end"><span class="cts">${ts}</span><span class="ctag" style="border-color:oklch(68% 0.18 250 / 0.35);color:oklch(68% 0.14 250)">you</span></div><div class="cbubble">${esc(text)}</div>`;
   return el;
 }
 
@@ -2042,6 +2106,10 @@ function handleMmEvent(ev) {
       appendChatEvent(ev, true);
       chatScrollFeed();
     }
+    // Live-update the Files tab when a new asset lands while it's open — incremental,
+    // not a rescan of every session's every event (that's collectOrgArtifacts()'s job,
+    // reserved for tab-open / initial load in renderFilesTab()).
+    if (ev.type === 'org:artifact' && currentTab === 'files') applyArtifactEvent(ev);
   }
 }