@floless/app 0.75.0 → 0.77.0

package/dist/web/workspaces.js

@@ -36,6 +36,10 @@
     model: document.getElementById('ws-frame-model'),
     drawings: document.getElementById('ws-frame-drawings'),
   };
+  const $drawingsBar = document.getElementById('ws-drawings-bar');
+  const $revisionCard = document.getElementById('ws-revision-card');
+  const $revisionFile = document.getElementById('ws-revision-file');
+  let currentStep = 'model';
 
   // The Exports step's cards. `file:true` = writes a file on disk (shown with a "✓ exported HH:MM"
   // line + ⧉ Open / ▤ Reveal); `open:false` (IFC) = reveal-only (no OS default app for a .ifc).
@@ -171,6 +175,7 @@
     if (!p) { try { p = (await api('/api/projects')).projects.find((x) => x.id === id); } catch { /* fall through */ } }
     if (!p) { showToast('Project not found — it may have been archived.', 'warn'); return loadProjects(); }
     current = p;
+    lastRevState = 'none'; stopRevisionPoll(); // fresh project — drop any prior revision-poll state
     $projName.textContent = p.name;
     $crumbName.textContent = p.name;
     $status.textContent = p.app;
@@ -184,10 +189,11 @@
     setStep('model');
     applyMode();
   }
-  function closeProject() { current = null; closeProjMenu(); applyMode(); }
+  function closeProject() { current = null; stopRevisionPoll(); lastRevState = 'none'; $revisionCard.hidden = true; closeProjMenu(); applyMode(); }
   document.getElementById('ws-back').addEventListener('click', closeProject);
 
   function setStep(s) {
+    currentStep = s;
     $stepTabs.querySelectorAll('button').forEach((b) => {
       const on = b.dataset.step === s;
       b.classList.toggle('active', on);
@@ -198,6 +204,8 @@
       f.hidden = !show;
       if (show && !f.dataset.loaded) { f.src = f.dataset.want; f.dataset.loaded = '1'; }
     }
+    $drawingsBar.hidden = s !== 'drawings';
+    renderRevisionCard(); // reflect any pending/failed revision read (card shows only on the Drawings step)
     // Exports is a shell-rendered pane (not an iframe): show/hide + (re)paint on open.
     const showExports = s === 'exports';
     $wsExports.hidden = !showExports;
@@ -206,7 +214,7 @@
     const showHistory = s === 'history';
     $wsHistory.hidden = !showHistory;
     if (showHistory) renderHistory();
-    else closeRollbackConfirm(); // don't leave a rollback popover open behind a step switch
+    else { closeRollbackConfirm(); closeBaseMenu(); } // don't leave a popover open behind a step switch
   }
   $stepTabs.addEventListener('click', (e) => {
     const b = e.target.closest('button[data-step]');
@@ -240,6 +248,43 @@
   }
   document.getElementById('ws-approve').addEventListener('click', approveProject);
 
+  // ── Find in model bridge (app.js Ctrl+F delegates here in Workspaces mode) ──────
+  // Active only when a project is open on the Model step, the editor iframe is loaded and exposes
+  // findMember(), and there's no pending "AI updated — reload" banner (searching a stale in-memory
+  // model would mislead). Same-origin contentWindow call, like the Approve flush above.
+  function wsFindActive() {
+    if (!$app.classList.contains('mode-workspaces')) return false;
+    if (!current || frames.model.hidden) return false; // Model step must be showing
+    const w = frames.model.contentWindow;
+    if (!w || typeof w.findMember !== 'function') return false;
+    try { if (w.document.getElementById('aiUpdateBanner')) return false; } catch { return false; }
+    return true;
+  }
+  function wsFind(q) {
+    try { const w = frames.model.contentWindow; if (w && typeof w.findMember === 'function') return w.findMember(q); } catch { /* iframe reloaded between findActive() and here */ }
+    return { count: 0 };
+  }
+  function wsClearFind() {
+    const w = frames.model && frames.model.contentWindow;
+    if (w && typeof w.clearFind === 'function') { try { w.clearFind(); } catch { /* iframe gone */ } }
+  }
+  // While focus is inside the editor iframe (the usual case on the Model step), the parent's Ctrl+F
+  // handler never sees the key — so the shell forwards Cmd/Ctrl+F from the same-origin editor up to
+  // the global openFind. Re-wired on every iframe (re)load; each load is a fresh contentWindow, so
+  // the listeners don't stack.
+  frames.model.addEventListener('load', () => {
+    try {
+      frames.model.contentWindow.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && !e.shiftKey && (e.key === 'f' || e.key === 'F')) {
+          e.preventDefault();
+          if (typeof window.openFind === 'function') window.openFind();
+        }
+      });
+    } catch { /* not-yet-loaded / cross-origin */ }
+  });
+  // (find methods are exposed on the canonical window.flolessWorkspaces export below — a separate
+  //  assignment here would be clobbered by that later `= { setMode, … }`.)
+
   // ── Exports step ──────────────────────────────────────────────────────────────
   const hhmm = (iso) => {
     const d = new Date(iso);
@@ -367,6 +412,141 @@
     if (rev) { fileAction('/api/reveal', rev.dataset.reveal, 'Couldn’t reveal the file'); return; }
   });
 
+  // ── Revisions: attach a revised drawing set → queue a compose-time read (Slice 4b) ──
+  // The browser records intent + files and QUEUES the read; the terminal AI reads and commits a
+  // `revision-read` version. The pending/failed card is Drawings-scoped (proximity to the action; the
+  // footer Requests popover surfaces it globally). A self-contained poll resolves it — the shell has
+  // no SSE hook — and refreshes History on completion. Cards are DOM-built (textContent, never
+  // innerHTML) so an AI-supplied error string can never reach the DOM as markup.
+  let lastRevState = 'none';
+  let revBaseVersion = 0; // the ledger head captured at attach — success = the head advances past it
+  let revCardReq = null;
+  let revisionPoll = null;
+  function stopRevisionPoll() { if (revisionPoll) { clearInterval(revisionPoll); revisionPoll = null; } }
+  function startRevisionPoll() {
+    stopRevisionPoll();
+    revisionPoll = setInterval(() => { if (current) renderRevisionCard(); else stopRevisionPoll(); }, 3000);
+  }
+  const revEl = (tag, cls, text) => {
+    const e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text != null) e.textContent = text;
+    return e;
+  };
+
+  function readFileAsSnapshot(file) {
+    return new Promise((resolve, reject) => {
+      const r = new FileReader();
+      r.onload = () => resolve({ name: file.name, dataUrl: String(r.result) });
+      r.onerror = () => reject(new Error('read failed'));
+      r.readAsDataURL(file);
+    });
+  }
+
+  async function attachRevision(files) {
+    const proj = current; // capture — the user may switch projects during the async file reads / POST
+    if (!proj || !files.length) return;
+    let snapshots;
+    try { snapshots = await Promise.all(files.map(readFileAsSnapshot)); }
+    catch { showToast('Could not read the selected files', 'warn'); return; }
+    if (current !== proj) return; // switched projects mid-read — abandon rather than queue against the wrong one
+    let res;
+    try {
+      res = await api(`/api/projects/${encodeURIComponent(proj.id)}/revision-requests`, {
+        method: 'POST', body: JSON.stringify({ appId: proj.app, snapshots }),
+      });
+    } catch (err) { showToast('Attach failed: ' + ((err && err.message) || err), 'warn'); return; }
+    const req = res && res.request;
+    // Copy the paste-ready instruction so the user can hand it to their terminal AI (best-effort).
+    if (req && bridge.markedInstruction && bridge.copyToClipboard) {
+      try { await bridge.copyToClipboard(bridge.markedInstruction(req)); } catch { /* clipboard blocked */ }
+    }
+    if (bridge.loadRequests) bridge.loadRequests().catch(() => {}); // refresh the footer Requests popover
+    if (current !== proj) return; // switched away while posting — don't drive the wrong project's card/poll
+    showToast(`Revised set queued — ${files.length} file${files.length > 1 ? 's' : ''} for your terminal AI`, 'ok');
+    revBaseVersion = (req && typeof req.baseVersion === 'number') ? req.baseVersion : 0;
+    lastRevState = 'pending';
+    startRevisionPoll();
+    renderRevisionCard();
+  }
+
+  document.getElementById('ws-attach-revision').addEventListener('click', () => $revisionFile.click());
+  $revisionFile.addEventListener('change', () => {
+    const files = [...($revisionFile.files || [])];
+    $revisionFile.value = ''; // clear so re-picking the same file re-fires change
+    attachRevision(files);
+  });
+
+  function buildPendingCard(req) {
+    const n = (req.sourceRefs && req.sourceRefs.length) || (req.snapshots && req.snapshots.length) || 1;
+    const spin = revEl('span', 'wrc-spin'); spin.setAttribute('aria-hidden', 'true');
+    const txt = revEl('span', 'wrc-text');
+    txt.appendChild(revEl('b', null, 'Reading the revised set…'));
+    txt.appendChild(document.createTextNode(` ${n} file${n > 1 ? 's' : ''} queued for your terminal AI — paste the copied instruction there, or say “apply my floless request”.`));
+    const copy = revEl('button', 'btn-mini', '⧉ Copy');
+    copy.type = 'button'; copy.dataset.revcopy = ''; copy.setAttribute('data-tip', 'Copy the instruction again');
+    return [spin, txt, copy];
+  }
+  function buildFailedCard(req) {
+    const ico = revEl('span', 'wrc-err-ico', '⚠'); ico.setAttribute('aria-hidden', 'true');
+    const txt = revEl('span', 'wrc-text');
+    txt.appendChild(revEl('b', null, 'The read failed.'));
+    txt.appendChild(document.createTextNode(' '));
+    txt.appendChild(revEl('span', 'wrc-err-detail', req.error || 'The read could not be completed.'));
+    txt.appendChild(document.createTextNode(' Attach the set again to retry.'));
+    const actions = revEl('span', 'wrc-actions');
+    const dismiss = revEl('button', 'btn-mini', 'Dismiss'); dismiss.type = 'button'; dismiss.dataset.revdismiss = '';
+    actions.appendChild(dismiss);
+    return [ico, txt, actions];
+  }
+
+  async function renderRevisionCard() {
+    if (!current) { $revisionCard.hidden = true; return; }
+    let reqs = [];
+    try { const b = await api('/api/requests'); reqs = Array.isArray(b) ? b : (b.requests || []); } catch { return; }
+    const mine = reqs.filter((r) => r && r.type === 'revision-read' && r.project === current.id);
+    const failed = mine.find((r) => r.status === 'failed');
+    const pending = mine.find((r) => r.status === 'pending');
+    const state = failed ? 'failed' : pending ? 'pending' : 'none';
+    // Was pending, now nothing in flight. Confirm a NEW version actually committed (the head advanced
+    // past the attach baseVersion) before celebrating — a bare request DELETE (Dismiss / footer-clear)
+    // must NOT show a false "complete" toast or re-lock exports.
+    if (lastRevState === 'pending' && state === 'none') {
+      let vr;
+      try { vr = await api(`/api/projects/${encodeURIComponent(current.id)}/versions`); }
+      catch { return; } // transient — leave lastRevState 'pending'; the poll retries next tick
+      const tip = (vr.versions || [])[0];
+      if (tip && tip.kind === 'revision-read' && tip.n > revBaseVersion) {
+        current.approvedAt = vr.approvedAt || undefined; // the AI read cleared the sign-off (exports re-lock)
+        if (!$wsHistory.hidden) renderHistory();
+        showToast('Revision read complete — a new version is on History', 'ok');
+      }
+    }
+    lastRevState = state;
+    if (state === 'none') { stopRevisionPoll(); $revisionCard.hidden = true; $revisionCard.replaceChildren(); return; }
+    if (state === 'failed') stopRevisionPoll();
+    else if (!revisionPoll) startRevisionPoll(); // a pending read seen on load → keep it fresh
+    if (currentStep !== 'drawings') { $revisionCard.hidden = true; return; } // card is Drawings-scoped
+    revCardReq = failed || pending;
+    $revisionCard.className = 'ws-revision-card ' + (state === 'failed' ? 'state-failed' : 'state-pending');
+    $revisionCard.replaceChildren(...(state === 'failed' ? buildFailedCard(failed) : buildPendingCard(pending)));
+    $revisionCard.hidden = false;
+  }
+
+  $revisionCard.addEventListener('click', async (e) => {
+    const req = revCardReq;
+    if (!req) return;
+    if (e.target.closest('[data-revcopy]') && bridge.markedInstruction && bridge.copyToClipboard) {
+      const ok = await bridge.copyToClipboard(bridge.markedInstruction(req));
+      showToast(ok ? 'Instruction copied' : 'Copy blocked — use the Requests panel', ok ? 'ok' : 'warn');
+    } else if (e.target.closest('[data-revdismiss]')) {
+      try { await api(`/api/requests/${encodeURIComponent(req.id)}`, { method: 'DELETE' }); } catch { /* already gone */ }
+      lastRevState = 'none';
+      if (bridge.loadRequests) bridge.loadRequests().catch(() => {});
+      renderRevisionCard();
+    }
+  });
+
   // ── History step ────────────────────────────────────────────────────────────────
   // The project's version ledger. A version = a commit (Approve = Model gate, Rollback = unsigned).
   // The draft contract is the working tree; an unapproved draft shows the working-copy banner.
@@ -380,10 +560,13 @@
     author === 'You'
       ? '<span class="avatar you">YOU</span>'
       : `<span class="avatar ai">${escapeHtml((author || '?').replace(/[^A-Za-z0-9]/g, '').slice(0, 2).toUpperCase() || 'AI')}</span>`;
-  const gateBadge = (gate) =>
-    gate === 'model'
-      ? '<span class="gate-badge model" data-tip="Model gate — the geometry was signed off">Model</span>'
-      : '<span class="gate-badge" data-tip="Unsigned — a working-tree restore, not a sign-off">unsigned</span>';
+  const gateBadge = (gate, kind) => {
+    if (gate === 'model')
+      return '<span class="gate-badge model" data-tip="Model gate — the geometry was signed off">Model</span>';
+    if (kind === 'revision-read')
+      return '<span class="gate-badge ai-read" data-tip="AI read — the terminal AI composed this version from a revised drawing set; Approve to sign it off">AI read</span>';
+    return '<span class="gate-badge" data-tip="Unsigned — a working-tree restore, not a sign-off">unsigned</span>';
+  };
 
   let versions = []; // last-rendered ledger (newest first)
 
@@ -392,18 +575,31 @@
     const action = v.current
       ? ''
       : `<button type="button" class="btn-mini" data-rollback="${escapeAttr(String(v.n))}" data-tip="Restore this version as a new version">↺ Rollback</button>`;
-    return `<tr class="${v.current ? 'current' : ''}">` +
+    // "What changed" disclosure — only for a version that HAS a predecessor (n>1). v1 is the baseline,
+    // so it gets NO toggle at all (an ABSENT control, never a disabled one).
+    const canDiff = Number(v.n) > 1;
+    const toggle = canDiff
+      ? `<button type="button" class="hd-toggle" data-diff="${escapeAttr(String(v.n))}" aria-expanded="false" data-tip="What changed vs the previous version"><span class="hd-caret">▸</span></button>`
+      : '';
+    const verRow = `<tr class="${v.current ? 'current' : ''}" data-ver="${escapeAttr(String(v.n))}">` +
+      `<td class="hd-cell">${toggle}</td>` +
       `<td><span class="ver${v.current ? ' cur' : ''}">v${escapeHtml(String(v.n))}</span></td>` +
       `<td class="htime">${escapeHtml(histWhen(v.ts))}</td>` +
       `<td><span class="hby">${avatarFor(v.author)}${escapeHtml(v.author)}</span></td>` +
-      `<td>${gateBadge(v.gate)}</td>` +
+      `<td>${gateBadge(v.gate, v.kind)}</td>` +
       `<td class="change">${escapeHtml(v.message)}</td>` +
       `<td>${action}</td></tr>`;
+    // The disclosure row is always emitted (hidden) so toggling is a pure show/hide + lazy fetch.
+    const diffRow = canDiff
+      ? `<tr class="hist-diff-row" data-diff-for="${escapeAttr(String(v.n))}" hidden><td colspan="7"><div class="hd-panel" data-panel="${escapeAttr(String(v.n))}"></div></td></tr>`
+      : '';
+    return verRow + diffRow;
   }
 
   async function renderHistory() {
     if (!current) return;
     const id = current.id;
+    closeBaseMenu(); // this re-render replaces the History HTML — drop any open base-picker's listener first
     $wsHistory.innerHTML = '<div class="hist-note">Loading history…</div>';
     let rows = [];
     let approvedAt;
@@ -430,9 +626,13 @@
     }
     // Working copy = the draft; when it isn't signed off (approvedAt cleared by an edit or a
     // rollback) surface it honestly ABOVE the table (not as a fake row) and name the Exports lock.
+    const headKind = rows.length && rows[0].current ? rows[0].kind : undefined;
     const working = !approvedAt
-      ? '<div class="hist-working">● <b>Working copy isn’t signed off.</b> ' +
-        '<button type="button" id="hist-approve">Approve</button> to sign off this version. Exports stay locked until you do.</div>'
+      ? (headKind === 'revision-read'
+          ? '<div class="hist-working">● <b>The AI read a revised drawing set — review it before signing.</b> ' +
+            'Open <b>Model</b> to check the change, then <button type="button" id="hist-approve">Approve</button> to sign off. Exports stay locked until you do.</div>'
+          : '<div class="hist-working">● <b>Working copy isn’t signed off.</b> ' +
+            '<button type="button" id="hist-approve">Approve</button> to sign off this version. Exports stay locked until you do.</div>')
       : '';
     $wsHistory.innerHTML =
       '<div class="hist-note">Every <b>Approve</b> and <b>Rollback</b> records a version. Rollback is non-destructive — it restores a version as a <i>new</i> one.</div>' +
@@ -440,6 +640,7 @@
       // Version/Gate/action are fixed-narrow; When/By auto-size to their nowrap content (fixing them
       // wider than the content wastes room and needlessly wraps Change). Change flexes to the rest.
       '<table class="hist"><thead><tr>' +
+      '<th style="width:26px"></th>' +
       '<th style="width:44px">Version</th><th>When</th><th>By</th>' +
       '<th style="width:80px">Gate</th><th style="width:99%">Change</th><th style="width:92px"></th>' +
       '</tr></thead><tbody>' + rows.map(versionRowHtml).join('') + '</tbody></table>';
@@ -490,6 +691,211 @@
     }
   }
 
+  // ── "What changed" semantic diff (Slice 5) ─────────────────────────────────
+  // The panel is DOM-built with textContent for every AI/drawing-supplied string (marks, profiles,
+  // connection summaries) — never innerHTML, per the file's security contract.
+  const DIFF_GROUPS = [
+    { key: 'added', label: 'Added' },
+    { key: 'removed', label: 'Removed' },
+    { key: 'resized', label: 'Resized' },
+    { key: 'moved', label: 'Moved' },
+    { key: 'material', label: 'Material' },
+    { key: 'connections', label: 'Connections' },
+  ];
+  const diffBase = new Map(); // "<projectId>\0<n>" → chosen baseline (undefined = compare to the previous version)
+  const baseKeyFor = (n) => (current && current.id ? current.id : '?') + '' + n; // project-scoped so a base pick can't bleed across projects sharing a version number
+  const el = (tag, cls, text) => {
+    const n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (text != null) n.textContent = text;
+    return n;
+  };
+
+  function diffMemberBasic(ref) {
+    const line = el('div', 'hd-item');
+    line.appendChild(el('span', 'hd-mark', ref.mark || ref.id));
+    if (ref.profile) line.appendChild(el('span', 'hd-prof', ref.profile));
+    if (ref.sheet) line.appendChild(el('span', 'hd-sheet', ref.sheet));
+    return line;
+  }
+  function diffMemberXform(ref, fromTxt, toTxt) {
+    const line = el('div', 'hd-item');
+    line.appendChild(el('span', 'hd-mark', ref.mark || ref.id));
+    const x = el('span', 'hd-xform');
+    x.appendChild(el('span', 'hd-prof', fromTxt || '—'));
+    x.appendChild(el('span', 'hd-arrow', '→'));
+    x.appendChild(el('span', 'hd-prof', toTxt || '—'));
+    line.appendChild(x);
+    if (ref.sheet) line.appendChild(el('span', 'hd-sheet', ref.sheet));
+    return line;
+  }
+  function diffMemberMoved(it) {
+    const line = el('div', 'hd-item');
+    line.appendChild(el('span', 'hd-mark', it.ref.mark || it.ref.id));
+    line.appendChild(el('span', 'hd-prof', `moved ~${it.feet} ft`));
+    if (it.scaleUnknown) line.appendChild(el('span', 'hd-qual', 'scale unknown'));
+    if (it.ref.sheet) line.appendChild(el('span', 'hd-sheet', it.ref.sheet));
+    return line;
+  }
+  function diffMemberConn(it) {
+    const line = el('div', 'hd-item');
+    line.appendChild(el('span', 'hd-mark', it.ref.mark || it.ref.id));
+    line.appendChild(el('span', 'hd-summary', it.summary || 'connection changed'));
+    if (it.ref.sheet) line.appendChild(el('span', 'hd-sheet', it.ref.sheet));
+    return line;
+  }
+  function diffRowFor(key, it) {
+    if (key === 'added' || key === 'removed') return diffMemberBasic(it);
+    if (key === 'resized' || key === 'material') return diffMemberXform(it.ref, it.from, it.to);
+    if (key === 'moved') return diffMemberMoved(it);
+    return diffMemberConn(it);
+  }
+  function diffGroup(g, items) {
+    if (!items || !items.length) return null;
+    const box = el('div', `hd-group ${g.key}`);
+    const head = el('div', 'hd-type');
+    head.appendChild(el('span', null, g.label.toUpperCase()));
+    head.appendChild(document.createTextNode(' '));
+    head.appendChild(el('span', 'hd-count', `(${items.length})`));
+    box.appendChild(head);
+    for (const it of items) box.appendChild(diffRowFor(g.key, it));
+    return box;
+  }
+  function diffNetHeader(t) {
+    const wrap = el('div', 'hd-net');
+    const net = t && typeof t.netTons === 'number' ? t.netTons : 0;
+    if (net === 0) wrap.classList.add('flat');
+    wrap.appendChild(el('span', 'hd-net-label', 'Net steel:'));
+    wrap.appendChild(el('span', 'hd-net-arrow', net > 0 ? '▲' : net < 0 ? '▼' : '•'));
+    wrap.appendChild(el('span', 'hd-net-val', `${net > 0 ? '+' : ''}${net} tons`));
+    return wrap;
+  }
+  // The engine's four honest signals — each names its CONSEQUENCE so a withheld member/connection is
+  // never silently absent from the panel. ALL render here (not just identity), above the numbers.
+  function diffCautions(w) {
+    if (!w) return [];
+    const mk = (strong, rest) => {
+      const box = el('div', 'hd-warn');
+      box.appendChild(el('span', 'hd-warn-ico', '⚠'));
+      const body = el('div');
+      if (strong) body.appendChild(el('b', null, strong));
+      if (rest) body.appendChild(document.createTextNode((strong ? ' ' : '') + rest));
+      box.appendChild(body);
+      return box;
+    };
+    const out = [];
+    if (w.identityNotPreserved) out.push(mk('These two reads don’t share member identity.', 'The comparison may be unreliable — the revised set looks re-read without carrying member labels forward.'));
+    if (w.duplicateKeys && w.duplicateKeys.length) out.push(mk(null, `${w.duplicateKeys.length} member${w.duplicateKeys.length > 1 ? 's were' : ' was'} left out — a duplicate id appears more than once on a sheet, so its changes can’t be attributed.`));
+    if (w.ambiguousJoints && w.ambiguousJoints.length) out.push(mk(null, 'Some connection changes couldn’t be attributed (a joint’s member id is shared across sheets) and were left out rather than guessed.'));
+    if (w.scaleUnknown && !w.identityNotPreserved) out.push(mk(null, 'A drawing’s scale is unknown, so the move distances shown are approximate.'));
+    return out;
+  }
+  function diffBasePicker(diff) {
+    const wrap = el('div', 'hd-basewrap');
+    wrap.appendChild(el('span', null, 'Compared to'));
+    const btn = el('button', 'hd-base');
+    btn.type = 'button';
+    btn.dataset.baseFor = String(diff.to);
+    btn.setAttribute('data-tip', 'Compare against an earlier version');
+    btn.appendChild(el('span', null, `v${diff.from}`));
+    btn.appendChild(el('span', 'hd-base-caret', '▾'));
+    wrap.appendChild(btn);
+    return wrap;
+  }
+  function renderDiffPanel(panel, diff) {
+    panel.textContent = '';
+    panel.appendChild(diffBasePicker(diff));
+    for (const c of diffCautions(diff.warnings)) panel.appendChild(c); // above the numbers — context for reading them
+    panel.appendChild(diffNetHeader(diff.tonnage));
+    let any = false;
+    for (const g of DIFF_GROUPS) {
+      const grp = diffGroup(g, diff[g.key]);
+      if (grp) { panel.appendChild(grp); any = true; }
+    }
+    if (!any) {
+      panel.appendChild(el('div', 'hd-empty', `No changes detected${diff.unchanged ? ` — ${diff.unchanged} members unchanged` : ''}.`));
+    } else if (diff.unchanged) {
+      panel.appendChild(el('div', 'hd-tail', `${diff.unchanged} members unchanged`));
+    }
+  }
+  async function loadDiff(n, base) {
+    const proj = current;
+    if (!proj) return;
+    const panel = $wsHistory.querySelector(`.hd-panel[data-panel="${CSS.escape(String(n))}"]`);
+    if (!panel) return;
+    const stamp = `${proj.id}:${n}:${base ?? ''}`; // guard against a stale response painting the wrong project/version/base
+    panel.dataset.stamp = stamp;
+    panel.textContent = '';
+    panel.appendChild(el('div', 'hd-loading', 'Comparing…'));
+    let diff;
+    try {
+      const q = base != null ? `?base=${encodeURIComponent(base)}` : '';
+      diff = (await api(`/api/projects/${encodeURIComponent(proj.id)}/versions/${encodeURIComponent(n)}/diff${q}`)).diff;
+    } catch (err) {
+      if (current && current.id === proj.id && panel.dataset.stamp === stamp) {
+        panel.textContent = '';
+        const box = el('div', 'hd-err');
+        box.appendChild(document.createTextNode('Couldn’t load the comparison' + (err && err.message ? ` — ${err.message}` : '') + ' — '));
+        const retry = el('button', null, 'try again');
+        retry.type = 'button';
+        retry.dataset.diffRetry = String(n);
+        box.appendChild(retry);
+        panel.appendChild(box);
+      }
+      return;
+    }
+    if (!current || current.id !== proj.id || panel.dataset.stamp !== stamp) return; // switched away / re-picked mid-await
+    renderDiffPanel(panel, diff);
+  }
+  function toggleDiff(btn) {
+    const n = Number(btn.dataset.diff);
+    const row = $wsHistory.querySelector(`tr.hist-diff-row[data-diff-for="${CSS.escape(String(n))}"]`);
+    if (!row) return;
+    const verRow = btn.closest('tr');
+    if (row.hasAttribute('hidden')) {
+      row.removeAttribute('hidden');
+      btn.setAttribute('aria-expanded', 'true');
+      if (verRow) verRow.classList.add('hd-open');
+      const panel = row.querySelector('.hd-panel');
+      if (panel && !panel.dataset.stamp) loadDiff(n, diffBase.get(baseKeyFor(n))); // lazy first load
+    } else {
+      row.setAttribute('hidden', '');
+      btn.setAttribute('aria-expanded', 'false');
+      if (verRow) verRow.classList.remove('hd-open');
+    }
+  }
+  // Baseline picker popover (mirrors the rollback-confirm popover idiom; never a native <select>).
+  function onDocDownForBase(e) {
+    if (!e.target.closest('.hd-base-menu') && !e.target.closest('.hd-base')) closeBaseMenu();
+  }
+  function closeBaseMenu() {
+    const m = $wsHistory.querySelector('.hd-base-menu');
+    if (m) m.remove();
+    document.removeEventListener('mousedown', onDocDownForBase, true);
+  }
+  function showBaseMenu(btn) {
+    closeBaseMenu();
+    const to = Number(btn.dataset.baseFor);
+    const cur = diffBase.get(baseKeyFor(to)) ?? to - 1;
+    const menu = el('div', 'hd-base-menu');
+    for (const v of versions) { // module-level ledger (newest first); only earlier versions are valid bases
+      if (Number(v.n) >= to) continue;
+      const opt = el('button', 'hd-base-opt' + (Number(v.n) === cur ? ' sel' : ''));
+      opt.type = 'button';
+      opt.dataset.baseOpt = String(v.n);
+      opt.dataset.baseTo = String(to);
+      opt.appendChild(el('span', null, `v${v.n}`));
+      opt.appendChild(el('span', 'hd-base-meta', histWhen(v.ts)));
+      menu.appendChild(opt);
+    }
+    $wsHistory.appendChild(menu);
+    const pr = $wsHistory.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    menu.style.top = br.bottom - pr.top + $wsHistory.scrollTop + 4 + 'px';
+    menu.style.left = Math.max(8, Math.min(br.left - pr.left, $wsHistory.clientWidth - menu.offsetWidth - 8)) + 'px';
+    document.addEventListener('mousedown', onDocDownForBase, true);
+  }
+
   $wsHistory.addEventListener('click', (e) => {
     if (e.target.closest('#hist-approve')) { approveProject(); return; }
     if (e.target.closest('.hc-cancel')) { closeRollbackConfirm(); return; }
@@ -497,6 +903,14 @@
     if (go) { rollbackTo(Number(go.dataset.hcGo)); return; }
     const roll = e.target.closest('[data-rollback]');
     if (roll) { showRollbackConfirm(roll, Number(roll.dataset.rollback)); return; }
+    const tog = e.target.closest('.hd-toggle');
+    if (tog) { toggleDiff(tog); return; }
+    const opt = e.target.closest('[data-base-opt]');
+    if (opt) { const to = Number(opt.dataset.baseTo), b = Number(opt.dataset.baseOpt); diffBase.set(baseKeyFor(to), b); closeBaseMenu(); loadDiff(to, b); return; }
+    const baseBtn = e.target.closest('.hd-base');
+    if (baseBtn) { showBaseMenu(baseBtn); return; }
+    const dr = e.target.closest('[data-diff-retry]');
+    if (dr) { const n = Number(dr.dataset.diffRetry); loadDiff(n, diffBase.get(baseKeyFor(n))); return; }
   });
 
   // ── project picker + lifecycle (full set lives HERE; ≡ carries nothing) ────
@@ -553,6 +967,6 @@
     loadProjects();
   });
 
-  window.flolessWorkspaces = { setMode, refresh: loadProjects };
+  window.flolessWorkspaces = { setMode, refresh: loadProjects, findActive: wsFindActive, find: wsFind, clearFind: wsClearFind };
   applyMode(); // restore persisted mode immediately (matches panels.js applyView timing)
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.75.0",
+  "version": "0.77.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {