@floless/app 0.73.0 → 0.74.0

package/dist/web/workspaces.js

@@ -31,6 +31,7 @@
   const $stepTabs = document.getElementById('ws-step-tabs');
   const $projMenu = document.getElementById('ws-proj-menu');
   const $wsExports = document.getElementById('ws-exports');
+  const $wsHistory = document.getElementById('ws-history');
   const frames = {
     model: document.getElementById('ws-frame-model'),
     drawings: document.getElementById('ws-frame-drawings'),
@@ -201,6 +202,11 @@
     const showExports = s === 'exports';
     $wsExports.hidden = !showExports;
     if (showExports) renderExports();
+    // History is likewise a shell-rendered pane: the project's version ledger.
+    const showHistory = s === 'history';
+    $wsHistory.hidden = !showHistory;
+    if (showHistory) renderHistory();
+    else closeRollbackConfirm(); // don't leave a rollback popover open behind a step switch
   }
   $stepTabs.addEventListener('click', (e) => {
     const b = e.target.closest('button[data-step]');
@@ -227,6 +233,7 @@
       if (res && res.approvedAt) current.approvedAt = res.approvedAt; // unlock exports
       showToast(`Approved — "${current.name}" is baked into ${current.app}`, 'ok');
       if (!$wsExports.hidden) renderExports(); // reflect the unlocked gate immediately if it's open
+      if (!$wsHistory.hidden) renderHistory(); // a new version was recorded — reflect it + clear the banner
     } catch (err) {
       showToast('Approve failed: ' + (err && err.message || err), 'warn');
     } finally { btn.disabled = false; btn.textContent = prev; }
@@ -360,6 +367,138 @@
     if (rev) { fileAction('/api/reveal', rev.dataset.reveal, 'Couldn’t reveal the file'); return; }
   });
 
+  // ── 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.
+  const histWhen = (iso) => {
+    const d = new Date(iso);
+    return isNaN(d.getTime()) ? '' : d.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false });
+  };
+  // Avatar: the human is "You" (neutral fill); an AI author (future rebake) gets the accent fill —
+  // accent already means "the AI acted" elsewhere in the baseline, so it's a free scan signal.
+  const avatarFor = (author) =>
+    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>';
+
+  let versions = []; // last-rendered ledger (newest first)
+
+  function versionRowHtml(v) {
+    // Rolling back to the version you're already on is a no-op — omit the button (blank cell), never disable it.
+    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' : ''}">` +
+      `<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 class="change">${escapeHtml(v.message)}</td>` +
+      `<td>${action}</td></tr>`;
+  }
+
+  async function renderHistory() {
+    if (!current) return;
+    const id = current.id;
+    $wsHistory.innerHTML = '<div class="hist-note">Loading history…</div>';
+    let rows = [];
+    let approvedAt;
+    try {
+      const r = await api(`/api/projects/${encodeURIComponent(id)}/versions`);
+      rows = Array.isArray(r.versions) ? r.versions : [];
+      approvedAt = r.approvedAt || undefined;
+      current.approvedAt = approvedAt; // re-sync — an in-editor autosave clears the sign-off server-side
+    } catch (err) {
+      showToast('Couldn’t load history: ' + ((err && err.message) || err), 'warn');
+      if (current && current.id === id && !$wsHistory.hidden) {
+        $wsHistory.innerHTML = '<div class="hist-empty">History unavailable — try again.</div>';
+      }
+      return;
+    }
+    if (!current || current.id !== id || $wsHistory.hidden) return; // switched away mid-await
+    versions = rows;
+    if (!rows.length) {
+      // Empty = an inline-action banner (never a bare header row that reads as broken/loading).
+      $wsHistory.innerHTML =
+        '<div class="hist-empty">No versions yet — <button type="button" id="hist-approve">Approve the model</button> ' +
+        'to create <b>v1</b> and start the ledger.</div>';
+      return;
+    }
+    // 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 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>'
+      : '';
+    $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>' +
+      working +
+      // 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: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>';
+  }
+
+  // Rollback confirm — a styled anchored popover (never a native dialog); names the Exports re-lock.
+  function onDocDownForConfirm(e) {
+    if (!e.target.closest('.hist-confirm') && !e.target.closest('[data-rollback]')) closeRollbackConfirm();
+  }
+  function closeRollbackConfirm() {
+    const pop = $wsHistory.querySelector('.hist-confirm');
+    if (pop) pop.remove();
+    document.removeEventListener('mousedown', onDocDownForConfirm, true);
+  }
+  function showRollbackConfirm(btn, n) {
+    closeRollbackConfirm();
+    const pop = document.createElement('div');
+    pop.className = 'hist-confirm';
+    pop.innerHTML =
+      `<div class="hc-title">Restore v${escapeHtml(String(n))} as a new version?</div>` +
+      `<div class="hc-body">History isn’t erased — this adds a new version copied from v${escapeHtml(String(n))}. ` +
+      `Exports re-lock until you Approve again.</div>` +
+      `<div class="hc-act"><button type="button" class="hc-cancel">Cancel</button>` +
+      `<button type="button" class="hc-go" data-hc-go="${escapeAttr(String(n))}">↺ Rollback to v${escapeHtml(String(n))}</button></div>`;
+    $wsHistory.appendChild(pop);
+    const pr = $wsHistory.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    pop.style.top = br.bottom - pr.top + $wsHistory.scrollTop + 6 + 'px';
+    pop.style.left = Math.max(8, Math.min(br.right - pr.left - pop.offsetWidth, $wsHistory.clientWidth - pop.offsetWidth - 8)) + 'px';
+    document.addEventListener('mousedown', onDocDownForConfirm, true);
+  }
+
+  async function rollbackTo(n) {
+    if (!current) return;
+    const proj = current;
+    closeRollbackConfirm();
+    try {
+      await api(`/api/projects/${encodeURIComponent(proj.id)}/versions/${encodeURIComponent(n)}/rollback`, { method: 'POST' });
+      proj.approvedAt = undefined; // rollback re-locks exports (the server cleared the sign-off)
+      showToast(`Restored v${n} as a new version — Exports re-locked; Approve to re-enable`, 'ok');
+      // Reload the editor iframe so it shows the restored geometry (it fetched the contract on load).
+      frames.model.dataset.loaded = '';
+      frames.model.src = 'about:blank';
+      if (!frames.model.hidden) { frames.model.src = frames.model.dataset.want; frames.model.dataset.loaded = '1'; }
+      renderHistory();
+    } catch (err) {
+      showToast('Rollback failed: ' + ((err && err.message) || err), 'warn');
+    }
+  }
+
+  $wsHistory.addEventListener('click', (e) => {
+    if (e.target.closest('#hist-approve')) { approveProject(); return; }
+    if (e.target.closest('.hc-cancel')) { closeRollbackConfirm(); return; }
+    const go = e.target.closest('[data-hc-go]');
+    if (go) { rollbackTo(Number(go.dataset.hcGo)); return; }
+    const roll = e.target.closest('[data-rollback]');
+    if (roll) { showRollbackConfirm(roll, Number(roll.dataset.rollback)); return; }
+  });
+
   // ── project picker + lifecycle (full set lives HERE; ≡ carries nothing) ────
   let menuFor = null;
   function menuItem(action, label) {

package/package.json

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