@floless/app 0.73.1 → 0.74.0

package/dist/web/app.css

@@ -3312,7 +3312,7 @@ body {
 /* ── Workspaces (mode shell) — see docs/superpowers/mockups/2026-07-03-workspaces-mockup.html ── */
 /* The display rules below (display:flex etc.) would otherwise override the `hidden` attribute's
    UA display:none — these guards keep hidden winning so nothing leaks across modes. */
-.ws-landing[hidden], .ws-project[hidden], .ws-spine[hidden], .ws-frame[hidden], .ws-exports[hidden] { display:none !important; }
+.ws-landing[hidden], .ws-project[hidden], .ws-spine[hidden], .ws-frame[hidden], .ws-exports[hidden], .ws-history[hidden] { display:none !important; }
 .mode-switch { display:inline-flex; border:1px solid var(--border-strong); border-radius:6px;
   overflow:hidden; background:var(--surface-2); flex:none; }
 .mode-switch button { background:transparent; border:none; border-radius:0; color:var(--text-muted);
@@ -3428,3 +3428,64 @@ body {
   background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text-muted); cursor:pointer; transition:all .15s; }
 .ecard .e-act button:hover:not(:disabled) { color:var(--text); border-color:var(--accent-dim); background:var(--surface); }
 .ecard .e-act button:disabled { opacity:0.6; cursor:not-allowed; }
+
+/* ── Workspaces ▸ History step (shell-rendered pane; the project's version ledger). Ports the
+      mockup's table.hist into app tokens. `position:relative` anchors the rollback confirm popover. */
+.ws-history { flex:1; min-height:0; position:relative; overflow-y:auto; padding:16px 20px;
+  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
+.ws-history::-webkit-scrollbar { width:10px; }
+.ws-history::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:5px; }
+.ws-history::-webkit-scrollbar-track { background:transparent; }
+.ws-history .hist-note { font-size:12px; color:var(--text-muted); margin:0 0 14px; }
+.ws-history .hist-note b { color:var(--text); font-weight:600; }
+/* Working-copy banner — sibling of .ws-exports-gate; NEUTRAL (accent-dim rail, never a danger
+   color): "unapproved" is an absence-of-signature, not an error. Names the Exports-lock consequence. */
+.hist-working { margin:0 0 14px; padding:9px 13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
+  background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--accent-dim);
+  border-radius:6px; font-size:12px; color:var(--text-muted); }
+.hist-working b { color:var(--text); font-weight:600; }
+.hist-working button { background:none; border:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; }
+.hist-working button:hover { color:var(--accent-bright); text-decoration:underline; }
+/* Empty state — an inline-action banner (never a bare header row, which reads as broken/loading). */
+.hist-empty { margin:6px 0 0; padding:11px 14px; background:var(--surface-2); border:1px solid var(--border);
+  border-left:3px solid var(--accent-dim); border-radius:6px; font-size:12.5px; color:var(--text-muted); }
+.hist-empty b { color:var(--text); }
+.hist-empty button { background:none; border:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; }
+.hist-empty button:hover { color:var(--accent-bright); text-decoration:underline; }
+
+table.hist { width:100%; border-collapse:collapse; font-size:12.5px; }
+table.hist th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim);
+  font-weight:600; padding:0 12px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
+table.hist td { padding:11px 12px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
+table.hist td.change { line-height:1.45; }
+table.hist tr:hover td { background:var(--surface-2); }
+table.hist tr.current td { background:var(--accent-soft); }
+.hist .ver { font-family:var(--mono); font-size:11.5px; color:var(--text-dim); }
+.hist .ver.cur { color:var(--accent-bright); }
+.hist .htime { color:var(--text-muted); white-space:nowrap; }
+.hist .hby { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
+.hist .avatar { width:20px; height:20px; border-radius:50%; flex:none; display:inline-flex; align-items:center;
+  justify-content:center; font-size:8.5px; font-weight:700; letter-spacing:.02em; }
+.hist .avatar.you { background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text); }
+.hist .avatar.ai  { background:var(--accent-dim); color:var(--text); }
+/* Gate badge — the signed sign-off, its own column so a long change message never buries it.
+   "Model" (accent, signed) vs "unsigned" (dim/bordered — an absence of signature, not a warning). */
+.hist .gate-badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:9.5px; font-weight:600;
+  text-transform:uppercase; letter-spacing:.05em; background:transparent; border:1px solid var(--border-strong); color:var(--text-dim); }
+.hist .gate-badge.model { background:var(--accent-soft); border-color:var(--accent-dim); color:var(--accent-bright); }
+.hist .btn-mini { background:none; border:1px solid var(--border-strong); color:var(--text-muted); border-radius:6px;
+  padding:4px 10px; font-size:11px; cursor:pointer; white-space:nowrap; }
+.hist .btn-mini:hover { color:var(--text); border-color:var(--accent); }
+
+/* Rollback confirm — a styled anchored popover (NEVER a native dialog); names the Exports re-lock. */
+.hist-confirm { position:absolute; z-index:20; width:264px; padding:12px 13px; background:var(--surface-3);
+  border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
+.hist-confirm .hc-title { font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:5px; }
+.hist-confirm .hc-body { font-size:11.5px; color:var(--text-muted); line-height:1.45; margin-bottom:11px; }
+.hist-confirm .hc-act { display:flex; gap:8px; justify-content:flex-end; }
+.hist-confirm .hc-go { background:var(--accent); border:1px solid var(--accent); color:white; font-weight:600;
+  border-radius:6px; padding:5px 11px; font-size:11.5px; cursor:pointer; }
+.hist-confirm .hc-go:hover { background:var(--accent-bright); border-color:var(--accent-bright); box-shadow:0 0 14px var(--accent-glow); }
+.hist-confirm .hc-cancel { background:none; border:1px solid var(--border-strong); color:var(--text-muted);
+  border-radius:6px; padding:5px 11px; font-size:11.5px; cursor:pointer; }
+.hist-confirm .hc-cancel:hover { color:var(--text); border-color:var(--accent); }

package/dist/web/index.html

@@ -168,6 +168,7 @@
           <button type="button" data-step="drawings" role="tab" aria-selected="false">Drawings</button>
           <button type="button" data-step="model" class="active" role="tab" aria-selected="true">Model</button>
           <button type="button" data-step="exports" role="tab" aria-selected="false">Exports</button>
+          <button type="button" data-step="history" role="tab" aria-selected="false">History</button>
         </div>
         <!-- Two lazily-srced iframes so switching steps never reloads the editor's 3D state.
              Same-origin like #contract-editor-frame (they call /api/contract directly). -->
@@ -176,6 +177,10 @@
         <!-- Exports = a SHELL-rendered pane (not an iframe): export cards over the project's own
              contract. workspaces.js fills it on step-switch (renderExports). -->
         <div class="ws-exports" id="ws-exports" hidden></div>
+        <!-- History = a SHELL-rendered pane (not an iframe): the project's version ledger.
+             workspaces.js fills it on step-switch (renderHistory). Rollback is per-row (a header
+             ↺ Rollback verb was cut in design review — no selection context; per-row is unambiguous). -->
+        <div class="ws-history" id="ws-history" hidden></div>
       </div>
       <div class="hint" id="canvas-hint">Click any node to inspect. Star ★ a node to save it as a reusable Template. Drag the background to pan — or press Home to fit.</div>
       <div class="fav-bar" id="fav-bar">

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.1",
+  "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": {