@floless/app 0.71.0 → 0.72.1

package/dist/web/app.css

@@ -3308,3 +3308,85 @@ body {
   header { flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
   select, .wf-combo { min-width: 0; }
 }
+
+/* ── 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] { 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);
+  font-size:12px; padding:7px 14px; letter-spacing:.02em; cursor:pointer; transition:all .15s; }
+.mode-switch button + button { border-left:1px solid var(--border-strong); }
+.mode-switch button:hover { color:var(--text); }
+.mode-switch button.active { background:var(--accent-soft); color:var(--accent-bright); }
+
+/* Mode gating: Workflows chrome hides wholesale in Workspaces (hidden, never disabled).
+   ≡ keeps only app-wide items; Dashboard is Workflows-scoped (spec §2). */
+.app.mode-workspaces .controls > label,
+.app.mode-workspaces .wf-combo, .app.mode-workspaces #wf-update, .app.mode-workspaces #wf-forked,
+.app.mode-workspaces #guide-beacon, .app.mode-workspaces #run-state,
+.app.mode-workspaces #restore-btn, .app.mode-workspaces #customize-btn,
+.app.mode-workspaces #compile-btn, .app.mode-workspaces #sim-btn,
+.app.mode-workspaces #run-btn, .app.mode-workspaces #stop-run-btn,
+.app.mode-workspaces #ext-badge,
+.app.mode-workspaces #menu .menu-item[data-action="view-switch"],
+.app.mode-workspaces #menu .menu-item[data-action="find"],
+.app.mode-workspaces #menu .menu-item[data-action="open"],
+.app.mode-workspaces #menu .menu-item[data-action="save"],
+.app.mode-workspaces #menu .menu-item[data-action="new-workflow"],
+.app.mode-workspaces #menu .menu-item[data-action="import"],
+.app.mode-workspaces #menu .menu-item[data-action="agents"],
+.app.mode-workspaces #menu .menu-item[data-action="graft"],
+.app.mode-workspaces #menu .menu-item[data-action="bake"] { display:none; }
+.app.mode-workspaces .topology, .app.mode-workspaces .canvas-toolbar,
+.app.mode-workspaces .hint, .app.mode-workspaces .fav-bar, .app.mode-workspaces .dashboard,
+.app.mode-workspaces .notes-strip, .app.mode-workspaces .find-overlay,
+/* the ws surfaces carry their own headings — hide the canvas's "Canvas · transparency layer" label */
+.app.mode-workspaces .canvas > .panel-label { display:none !important; }
+/* the editor owns center+right in a project — collapse the inspect column entirely */
+.app.mode-workspaces { --right-width:0px !important; }
+.app.mode-workspaces .inspect { display:none; }
+.app.mode-workspaces .canvas { cursor:default; touch-action:auto; }
+.ws-spine { display:flex; align-items:center; gap:10px; }
+#ws-proj-name { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+#ws-proj-trigger { display:inline-flex; align-items:center; gap:8px; }
+
+/* landing */
+.ws-landing { flex:1; min-height:0; overflow-y:auto; padding:6px 20px 24px; }
+.ws-head h2 { font-size:17px; font-weight:650; letter-spacing:.01em; }
+.ws-head .ws-sub { color:var(--text-muted); font-size:12px; margin:2px 0 14px; }
+.ws-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); align-content:start; }
+.ws-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden;
+  cursor:pointer; transition:all .15s; text-align:left; padding:0; display:flex; flex-direction:column; }
+.ws-card:hover { border-color:var(--accent-dim); transform:translateY(-1px); }
+.ws-card .ws-thumb { height:88px; background:var(--surface-2); border-bottom:1px solid var(--border);
+  display:flex; align-items:center; justify-content:center; position:relative; color:var(--accent); font-size:24px; }
+.ws-card .ws-kind { position:absolute; top:8px; left:8px; font-size:9px; text-transform:uppercase; letter-spacing:.1em;
+  color:var(--accent-bright); background:var(--surface); border:1px solid var(--accent-dim); padding:2px 7px; border-radius:4px; }
+.ws-card .ws-body { padding:11px 13px 13px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
+.ws-card .ws-name { font-size:13px; font-weight:600; color:var(--text); }
+.ws-card .ws-meta { font-size:11px; color:var(--text-muted); margin-top:4px; }
+.ws-card .ws-meta .t { font-family:var(--mono); font-size:10px; color:var(--text-dim); }
+.ws-card .ws-kebab { background:transparent; border:1px solid transparent; color:var(--text-dim);
+  padding:2px 7px; border-radius:4px; font-size:14px; line-height:1; flex:none; }
+.ws-card .ws-kebab:hover { border-color:var(--border-strong); color:var(--text); }
+.ws-seed { border:2px dashed var(--accent-dim); background:transparent; border-radius:8px; min-height:150px;
+  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer;
+  color:var(--text-muted); font-size:12px; width:100%; text-align:center; padding:12px; }
+.ws-seed:hover { background:var(--accent-soft); border-color:var(--accent); }
+.ws-seed .plus { font-size:24px; color:var(--accent); line-height:1; }
+.ws-empty-note { color:var(--text-dim); font-size:12px; margin-top:10px; }
+
+/* open project */
+.ws-project { flex:1; min-height:0; display:flex; flex-direction:column; }
+.ws-crumb-row { padding:12px 14px 8px; display:flex; justify-content:space-between; align-items:center; }
+.ws-crumb { font-size:12px; color:var(--text-muted); }
+.ws-crumb-link { background:none; border:none; padding:0; color:var(--text-muted); font-size:12px; cursor:pointer; }
+.ws-crumb-link:hover { color:var(--accent); }
+.ws-crumb-sep { color:var(--text-dim); margin:0 6px; }
+.ws-crumb-cur { color:var(--text); }
+.ws-status { font-size:10px; color:var(--text-dim); font-style:italic; }
+.tabs.ws-step-tabs { background:transparent; padding:0 6px; }
+.tabs.ws-step-tabs button { flex:0 0 auto; padding:11px 16px; }
+.ws-frame { flex:1; min-height:0; width:100%; border:none; background:var(--bg); }

package/dist/web/aware.js

@@ -6445,6 +6445,7 @@
     copyToClipboard,
     instructionFor,
     markedInstruction, // marked (paste-safe) form for clipboard copies — panels.js uses it (#73)
+    formModal, // the shared styled prompt/form modal — workspaces.js reuses it (never a native prompt)
   };
 
   // ── boot ──────────────────────────────────────────────────────────────────────

package/dist/web/index.html

@@ -33,6 +33,13 @@
         </span>
         <span class="name">FloLess</span>
         </div>
+        <!-- Top-level mode switch (Workflows = node canvas + Run; Workspaces = project/document
+             apps, no Run). Segmented control, Ctrl+1/Ctrl+2. See docs/superpowers/specs/
+             2026-07-03-workspaces-two-mode-shell-design.md. -->
+        <div class="mode-switch" id="mode-switch" role="tablist" aria-label="Mode">
+          <button type="button" data-mode="workflows" class="active" role="tab" aria-selected="true">Workflows</button>
+          <button type="button" data-mode="workspaces" role="tab" aria-selected="false">Workspaces</button>
+        </div>
         <!-- Workspace view switch (Canvas = the workflow topology; Dashboard = the user's
              custom panels from ~/.floless/ui/extensions.json) moved into the ≡ menu in #149.
              The "dashboard updated" signal now rides the ≡ hamburger badge (.has-dash-update)
@@ -61,6 +68,20 @@
         <!-- Agents (⊞) and Routines (⏱) buttons moved into the ≡ menu in #149
              (Ctrl+G / Ctrl+R); the toolbar keeps only the run-critical controls. -->
         <span class="ctl-sep" aria-hidden="true"></span>
+        <!-- Workspaces project spine — swapped in wholesale by mode (the restore/customize
+             swap precedent). Approve takes Run's filled-primary slot; Export/Rollback arrive
+             in slices 2/3. Hidden (never disabled) outside an open project. -->
+        <div class="ws-spine" id="ws-spine" hidden>
+          <label id="ws-proj-label">project</label>
+          <button id="ws-proj-trigger" class="wf-trigger" type="button" aria-haspopup="menu" aria-expanded="false"
+                  data-tip="This project — open another, rename, duplicate, archive">
+            <span id="ws-proj-name">—</span>
+            <svg class="wf-caret" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path fill="currentColor" d="M0 0l5 6 5-6z"/></svg>
+          </button>
+          <span class="ctl-sep" aria-hidden="true"></span>
+          <button id="ws-approve" type="button" class="primary"
+                  data-tip="Locks in this version of the model — your edits already auto-save; this is the sign-off.">✓ Approve</button>
+        </div>
         <!-- Per-workflow onboarding beacon. Pulses "✨ Start here" while this workflow is
              new to the user (no first Run completed, not dismissed); calms to a quiet
              "❔ Guide" after — always clickable for re-reference. Hidden until an app loads. -->
@@ -134,6 +155,24 @@
            ~/.floless/ui/extensions.json here; the canvas children hide via
            .canvas.view-dashboard). Composed by the terminal AI, rendered by us. -->
       <div class="dashboard" id="dashboard" hidden></div>
+      <!-- Workspaces mode surfaces (web/workspaces.js renders both; hidden outside the mode).
+           Landing = project grid; project = step tabs over the editor/filter iframes. -->
+      <div class="ws-landing" id="ws-landing" hidden></div>
+      <div class="ws-project" id="ws-project" hidden>
+        <div class="ws-crumb-row">
+          <span class="ws-crumb"><button type="button" id="ws-back" class="ws-crumb-link">Workspaces</button>
+            <span class="ws-crumb-sep">›</span><span id="ws-crumb-name" class="ws-crumb-cur">—</span></span>
+          <span class="ws-status" id="ws-status"></span>
+        </div>
+        <div class="tabs ws-step-tabs" id="ws-step-tabs" role="tablist" aria-label="Project steps">
+          <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>
+        </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). -->
+        <iframe id="ws-frame-model" class="ws-frame" title="Project model editor" hidden></iframe>
+        <iframe id="ws-frame-drawings" class="ws-frame" title="Project drawings & filter" hidden></iframe>
+      </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">
         <div class="fav-bar-label"><span class="star">★</span><span>Templates</span></div>
@@ -767,9 +806,14 @@
       </div>
     </div>
   </div>
+  <!-- Project picker + lifecycle. The FULL lifecycle set lives HERE and only here — ≡ carries
+       nothing project-specific (spec §2). Populated per-open in workspaces.js. -->
+  <div class="menu ws-proj-menu" id="ws-proj-menu" role="menu" hidden></div>
+
 <script src="app.js"></script>
 <script src="renderers.js"></script>
 <script src="aware.js"></script>
 <script src="panels.js"></script>
+<script src="workspaces.js"></script>
 </body>
 </html>

package/dist/web/steel-3d-view.js

@@ -2454,6 +2454,22 @@ function membersInRect(x0, y0, x1, y1) {
   }
   return out;
 }
+// Connection Components whose CENTRE falls inside a marquee rect (mirrors membersInRect's member-centre
+// test, applied to each connection's bounding box) — so area-select picks up connections, not just members.
+function connsInRect(x0, y0, x1, y1) {
+  const rect = canvasEl.getBoundingClientRect();
+  const lo = { x: Math.min(x0, x1), y: Math.min(y0, y1) }, hi = { x: Math.max(x0, x1), y: Math.max(y0, y1) };
+  const conns = new Set();
+  for (const m of meshById.values()) { const c = m.userData && m.userData.conn; if (c && m.visible) conns.add(c); }
+  const out = [];
+  for (const conn of conns) {
+    const b = connBox(conn); if (b.isEmpty()) continue;
+    const w = b.getCenter(new THREE.Vector3()).project(camera); if (w.z > 1) continue;
+    const sx = rect.left + (w.x * 0.5 + 0.5) * rect.width, sy = rect.top + (-w.y * 0.5 + 0.5) * rect.height;
+    if (sx >= lo.x && sx <= hi.x && sy >= lo.y && sy <= hi.y) out.push(conn);
+  }
+  return out;
+}
 
 function onUp(e) {
   if (e.button === 2) rightDownXY = null; // end the click-vs-drag test (rightMoved keeps the verdict for the contextmenu that follows)
@@ -2461,7 +2477,12 @@ function onUp(e) {
   if (!renderer || !canvasEl || canvasEl.style.display === 'none') { downXY = null; boxSel = pending = dragging = null; if (controls) controls.enabled = true; return; } // 3D hidden mid-gesture → drop stale gesture state (no resume on re-show)
   const bs = boxSel; boxSel = null;
   if (bs) { // empty-space gesture: drag = box-select, click = clear selection
-    if (bs.moved) { resetCycle(); const ids = membersInRect(bs.x, bs.y, e.clientX, e.clientY); if (api && api.onSelectMany) api.onSelectMany(ids); }
+    if (bs.moved) { resetCycle();
+      const memberIds = membersInRect(bs.x, bs.y, e.clientX, e.clientY);
+      const connIds = connsInRect(bs.x, bs.y, e.clientX, e.clientY);
+      if (!memberIds.length && connIds.length === 1) selectWholeConn(connIds[0]); // a lone connection framed → full component select (envelope + inspector), same as a click
+      else { resetConnState(); const ids = [...memberIds, ...connIds.flatMap((c) => connChildIds(c))]; if (api && api.onSelectMany) api.onSelectMany(ids); } // members and/or several connections → a plain multi-select that INCLUDES the connections' parts
+    }
     else clickSelect(e.clientX, e.clientY, e.ctrlKey || e.metaKey); // click in empty space → cycle-pick (may land on a derived part) or clear
     downXY = null; return;
   }

package/dist/web/steel-editor.html

@@ -647,6 +647,11 @@
  <div class=lbpanel><div class=mhead><b id=lbCap></b><div style="display:flex;gap:10px;align-items:center"><span class=hint>scroll = zoom · drag = pan · dbl-click = reset</span><button id=lbClose>✕</button></div></div><div id=lbView><img id=lbImg></div></div></div>
 <script>
 const APP_ID = new URLSearchParams(location.search).get('app') || '';
+// Workspaces: a project-keyed contract lives at projects/<id>/contract.json. Empty PROJECT
+// = legacy app-keyed behaviour, byte-for-byte today's URLs. PROJECT_QS is appended to every
+// /api/contract call; the contract-request (Ask AI) bodies carry `project` for slice-4 context.
+const PROJECT = new URLSearchParams(location.search).get('project') || '';
+const PROJECT_QS = PROJECT ? ('?project=' + encodeURIComponent(PROJECT)) : '';
 let C, PAL, WT;
 let TARGET_CONF = null; // the app's target_confidence input default (%), or null when undeclared — drives the chip's "· target N%" goal
 let view3d = false, view3dReady = false; // 2D|3D toggle state; view3dReady once Steel3DView.init has run
@@ -667,7 +672,7 @@ function showEmpty(icon, headline, bodyText, appIdText) {
 }
 async function boot() {
   if (!APP_ID) { showEmpty('⊞', 'No workflow selected', 'Open a workflow in the FloLess canvas, then open the contract editor from that workflow’s node.'); return; }
-  const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID));
+  const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID) + PROJECT_QS);
   if (!res.ok) {
     if (res.status === 404) {
       showEmpty('⊞', 'No takeoff for', 'Read a structural drawing first — ask your terminal AI to run the workflow, then open this editor again.', APP_ID);
@@ -928,7 +933,7 @@ function persist(){try{localStorage.setItem(LSKEY,JSON.stringify({sig:dataSig(),
 // fetch does NOT reject on HTTP 400 (schema rejection), so treat !res.ok as 'err' (not a false 'Saved ✓'). ---
 async function persistServer(){try{
   lastLocalPut = Date.now();
-  const res=await fetch('/api/contract/'+encodeURIComponent(APP_ID),{method:'PUT',headers:{'content-type':'application/json'},body:JSON.stringify(C)});
+  const res=await fetch('/api/contract/'+encodeURIComponent(APP_ID)+PROJECT_QS,{method:'PUT',headers:{'content-type':'application/json'},body:JSON.stringify(C)});
   setSaved(res.ok?'ok':'err');
   if(!res.ok)console.error('server save rejected ('+res.status+')',await res.text().catch(()=>''));  // 400 = schema reject: edits won't be what Approve bakes
 }catch(e){setSaved('err');console.error('server save failed',e);}}
@@ -940,7 +945,7 @@ function scheduleSave(){setSaved('dirty');clearTimeout(saveT);saveT=setTimeout((
 window.flushContract = async () => {
   clearTimeout(saveT);
   lastLocalPut = Date.now();
-  const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID), {
+  const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID) + PROJECT_QS, {
     method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(C),
   });
   setSaved(res.ok ? 'ok' : 'err');
@@ -2853,7 +2858,7 @@ async function detailRequest(intent,place,note){
     : 'Update the placed "'+place.detailName+'" detail (id '+place.id+') on sheet '+(place.sheet||'?')+' to match the attached image / my adjustments.');
   const ids=[intent==='create'?(place.anchorId||('det:'+place.id)):('det:'+place.id)];
   try{const res=await fetch('/api/contract-request',{method:'POST',headers:{'content-type':'application/json'},
-      body:JSON.stringify({appId:APP_ID,instruction,intent,target:{sheet:place.sheet||undefined,ids},snapshots:snaps})});
+      body:JSON.stringify({appId:APP_ID,project:PROJECT||undefined,instruction,intent,target:{sheet:place.sheet||undefined,ids},snapshots:snaps})});
     toast(res.ok?(intent==='create'?'Insert queued for your terminal AI session':'Change queued for your terminal AI session'):'Could not queue the request');
   }catch(_){toast('Could not queue the request');}}
 // Build the 3D legend overlay from the live scene groups (per profile). Single-click hide/show,
@@ -3976,6 +3981,7 @@ document.getElementById('askAiSend').onclick = async () => {
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({
         appId: APP_ID,
+        project: PROJECT || undefined,
         instruction,
         snapshots: askAiSnapshots.map(s => ({ name: s.name, dataUrl: s.dataUrl })),
       }),

package/dist/web/steel-filter.html

@@ -128,6 +128,9 @@ footer{margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;bo
 import { matchesActive, modeDims, canonicalMode, selFromFilter, eyedropperAdd, countShown, bgRect, applySelToFilter, normalizeFilter } from './steel-filter-core.js';
 
 const APP_ID = new URLSearchParams(location.search).get('app') || '';
+// Workspaces: project-keyed contract (see steel-editor.html). Empty = legacy app-keyed URLs.
+const PROJECT = new URLSearchParams(location.search).get('project') || '';
+const PROJECT_QS = PROJECT ? ('?project=' + encodeURIComponent(PROJECT)) : '';
 const SVGNS = 'http://www.w3.org/2000/svg';
 const PALETTE = ['#3b82f6','#22d3ee','#a78bfa','#f59e0b','#34d399','#f472b6','#60a5fa','#facc15'];
 
@@ -160,7 +163,7 @@ function markDirty(){ dirty = true; saveBtn.disabled = false; setSaved('dirty');
 async function boot(){
   if(!APP_ID){ showEmpty('No app specified.'); return; }
   let res;
-  try { res = await fetch('/api/contract/' + encodeURIComponent(APP_ID)); }
+  try { res = await fetch('/api/contract/' + encodeURIComponent(APP_ID) + PROJECT_QS); }
   catch(e){ showEmpty('Could not reach the server.'); return; }
   if(!res.ok){ showEmpty(); return; }
   C = await res.json();
@@ -410,7 +413,7 @@ async function save(){
   C.filter = F;
   saveBtn.disabled = true; setSaved('');
   try {
-    const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID), { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(C) });
+    const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID) + PROJECT_QS, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(C) });
     if(!res.ok) throw new Error(await res.text());
     dirty = false; setSaved('saved');
   } catch(e){ console.error('filter save failed', e); setSaved('err'); saveBtn.disabled = false; }

package/dist/web/workspaces.js

@@ -0,0 +1,270 @@
+/* ============================================================================
+ * workspaces.js — the Workflows | Workspaces mode shell (slice 1).
+ * Owns: mode state, the landing project grid, the open-project view (Drawings |
+ * Model iframes), the project picker + lifecycle menu, and per-project Approve.
+ * Composes with app.js/panels.js by CLASS-GATING (CSS hides Workflows chrome under
+ * .app.mode-workspaces) — it never removes their DOM or unwires their handlers.
+ * Reuses app.js globals (escapeHtml, escapeAttr, showToast) and the flolessBridge
+ * seams (api, formModal, loadRequests) like panels.js does.
+ * SECURITY CONTRACT (same as panels.js): every innerHTML interpolation passes
+ * escapeHtml/escapeAttr — project names are user-authored; no unescaped string may
+ * ever reach the DOM. textContent wherever no markup is needed.
+ * See docs/superpowers/specs/2026-07-03-workspaces-two-mode-shell-design.md.
+ * ========================================================================== */
+(() => {
+  const bridge = window.flolessBridge || {};
+  const api = bridge.api || (async (path, opts) => {
+    const res = await fetch(path, { headers: { 'content-type': 'application/json' }, ...opts });
+    const body = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
+    if (!res.ok || body.ok === false) { const e = new Error(body.error || `HTTP ${res.status}`); e.body = body; throw e; }
+    return body;
+  });
+
+  const $app = document.getElementById('app');
+  const $switch = document.getElementById('mode-switch');
+  const $landing = document.getElementById('ws-landing');
+  const $project = document.getElementById('ws-project');
+  const $spine = document.getElementById('ws-spine');
+  const $projName = document.getElementById('ws-proj-name');
+  const $crumbName = document.getElementById('ws-crumb-name');
+  const $status = document.getElementById('ws-status');
+  const $stepTabs = document.getElementById('ws-step-tabs');
+  const $projMenu = document.getElementById('ws-proj-menu');
+  const frames = {
+    model: document.getElementById('ws-frame-model'),
+    drawings: document.getElementById('ws-frame-drawings'),
+  };
+  if (!$switch || !$landing || !$app) return; // markup absent — nothing to wire
+
+  // The picker menu is a `.menu` (display:none by default; `.menu.show` → display:block, which
+  // OVERRIDES the `hidden` attribute). So close must clear BOTH — same idiom as the ext-menu.
+  const closeProjMenu = () => { $projMenu.hidden = true; $projMenu.classList.remove('show'); };
+
+  const LS_MODE = 'floless:mode';
+  const WORKSPACE_APP = 'steel-model'; // slice 1: the one workspace app; a manifest flag generalizes this in slice 5
+  let mode = 'workflows';
+  try { if (localStorage.getItem(LS_MODE) === 'workspaces') mode = 'workspaces'; } catch { /* private mode */ }
+  let projects = [];
+  let current = null; // the open project (null = landing)
+
+  // ── mode ────────────────────────────────────────────────────────────────────
+  function applyMode() {
+    const ws = mode === 'workspaces';
+    $app.classList.toggle('mode-workspaces', ws);
+    $switch.querySelectorAll('button').forEach((b) => {
+      const on = b.dataset.mode === mode;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-selected', String(on));
+    });
+    $landing.hidden = !ws || !!current;
+    $project.hidden = !ws || !current;
+    $spine.hidden = !ws || !current;
+    if (!ws && !$projMenu.hidden) closeProjMenu();
+    if (ws && !current) loadProjects();
+  }
+  function setMode(m) {
+    mode = m === 'workspaces' ? 'workspaces' : 'workflows';
+    try { localStorage.setItem(LS_MODE, mode); } catch { /* private mode */ }
+    applyMode();
+  }
+  $switch.addEventListener('click', (e) => {
+    const b = e.target.closest('button[data-mode]');
+    if (b) setMode(b.dataset.mode);
+  });
+  document.addEventListener('keydown', (e) => {
+    if (!(e.ctrlKey || e.metaKey) || e.altKey || e.shiftKey) return;
+    const t = e.target;
+    if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
+    if (e.key === '1') { e.preventDefault(); setMode('workflows'); }
+    else if (e.key === '2') { e.preventDefault(); setMode('workspaces'); }
+  });
+
+  // ── landing ─────────────────────────────────────────────────────────────────
+  const relAgo = (iso) => {
+    const ms = Date.now() - new Date(iso).getTime();
+    if (isNaN(ms) || ms < 0) return '';
+    const min = Math.round(ms / 60000);
+    if (min < 1) return 'just now';
+    if (min < 60) return `${min} min ago`;
+    const h = Math.round(min / 60);
+    return h < 48 ? `${h} h ago` : `${Math.round(h / 24)} d ago`;
+  };
+
+  async function loadProjects() {
+    // Surface a real failure — never present a server/network error as an empty workspace
+    // (the empty-state CTA would be a lie: "no projects yet" when the truth is "load failed").
+    try { ({ projects } = await api('/api/projects')); }
+    catch (err) { projects = []; showToast('Couldn’t load projects: ' + (err && err.message || err), 'warn'); }
+    renderLanding();
+  }
+
+  function renderLanding() {
+    let html = `<div class="ws-head"><h2>Workspaces</h2>` +
+      `<div class="ws-sub">Live projects — open a document to keep working. No Run here.</div></div>` +
+      `<div class="ws-grid">`;
+    for (const p of projects) {
+      html += `<div class="ws-card" role="button" tabindex="0" data-open="${escapeAttr(p.id)}">` +
+        `<span class="ws-thumb"><span class="ws-kind">${escapeHtml(p.app)}</span>▦</span>` +
+        `<span class="ws-body"><span><span class="ws-name">${escapeHtml(p.name)}</span>` +
+        `<span class="ws-meta">${escapeHtml(p.app)} · <span class="t">${escapeHtml(relAgo(p.updatedAt))}</span></span></span>` +
+        `<button type="button" class="ws-kebab" data-kebab="${escapeAttr(p.id)}" aria-label="Project actions" data-tip="Rename · Duplicate · Archive">⋯</button>` +
+        `</span></div>`;
+    }
+    // Slice-1 creation path: seed a project from the app's current takeoff. The
+    // compose-time "read a drawing set" flow is Slice 4 — this card is honest about that.
+    html += `<button type="button" class="ws-seed" id="ws-seed">` +
+      `<span class="plus">+</span><span>Import the current ${escapeHtml(WORKSPACE_APP)} takeoff as a project</span></button>`;
+    html += `</div>`;
+    if (!projects.length) html += `<div class="ws-empty-note">No projects yet — import your current takeoff above, or ask your terminal AI to read a drawing set.</div>`;
+    $landing.innerHTML = html;
+  }
+
+  $landing.addEventListener('click', async (e) => {
+    const kebab = e.target.closest('[data-kebab]');
+    if (kebab) { e.stopPropagation(); openProjMenu(kebab.dataset.kebab, kebab); return; }
+    const card = e.target.closest('[data-open]');
+    if (card) { openProject(card.dataset.open); return; }
+    if (e.target.closest('#ws-seed')) createSeeded();
+  });
+  $landing.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    const card = e.target.closest('[data-open]');
+    if (card) { e.preventDefault(); openProject(card.dataset.open); }
+  });
+
+  async function promptName(title, label, value) {
+    if (!bridge.formModal) return null;
+    const res = await bridge.formModal({ title, fields: [{ name: 'name', label, value, placeholder: 'e.g. Westfield Retail — Ph2' }], okLabel: 'Save' });
+    return res && typeof res.name === 'string' && res.name.trim() ? res.name.trim() : null;
+  }
+
+  async function createSeeded() {
+    const name = await promptName('New project', 'Name this project', '');
+    if (!name) return;
+    try {
+      const { project, seeded } = await api('/api/projects', { method: 'POST', body: JSON.stringify({ name, app: WORKSPACE_APP, seedFromApp: true }) });
+      // Tell the truth about the import: seeded=false means there was no current takeoff to copy
+      // (or it was unreadable) — the project is EMPTY, don't imply the takeoff came across.
+      if (seeded) showToast(`Project "${project.name}" created from the current ${WORKSPACE_APP} takeoff`, 'ok');
+      else showToast(`Project "${project.name}" created — empty (no current ${WORKSPACE_APP} takeoff to import)`, 'warn');
+      projects.unshift(project);
+      openProject(project.id);
+    } catch (err) { showToast('Couldn’t create the project: ' + (err && err.message || err), 'warn'); }
+  }
+
+  // ── open project ────────────────────────────────────────────────────────────
+  async function openProject(id) {
+    let p = projects.find((x) => x.id === id);
+    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;
+    $projName.textContent = p.name;
+    $crumbName.textContent = p.name;
+    $status.textContent = p.app;
+    // Lazily src the frames once per project; switching steps only toggles hidden so the
+    // editor's 3D state survives a Drawings⇄Model round-trip.
+    const qs = `?app=${encodeURIComponent(p.app)}&project=${encodeURIComponent(p.id)}`;
+    frames.model.dataset.want = `/steel-editor.html${qs}`;
+    frames.drawings.dataset.want = `/steel-filter.html${qs}`;
+    frames.model.src = 'about:blank'; frames.drawings.src = 'about:blank'; // reset any previous project
+    frames.model.dataset.loaded = ''; frames.drawings.dataset.loaded = '';
+    setStep('model');
+    applyMode();
+  }
+  function closeProject() { current = null; closeProjMenu(); applyMode(); }
+  document.getElementById('ws-back').addEventListener('click', closeProject);
+
+  function setStep(s) {
+    $stepTabs.querySelectorAll('button').forEach((b) => {
+      const on = b.dataset.step === s;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-selected', String(on));
+    });
+    for (const [k, f] of Object.entries(frames)) {
+      const show = k === s;
+      f.hidden = !show;
+      if (show && !f.dataset.loaded) { f.src = f.dataset.want; f.dataset.loaded = '1'; }
+    }
+  }
+  $stepTabs.addEventListener('click', (e) => {
+    const b = e.target.closest('button[data-step]');
+    if (b) setStep(b.dataset.step);
+  });
+
+  // ── Approve (per-project) ───────────────────────────────────────────────────
+  document.getElementById('ws-approve').addEventListener('click', async () => {
+    if (!current) return;
+    const btn = document.getElementById('ws-approve');
+    btn.disabled = true;
+    const prev = btn.textContent;
+    btn.textContent = '◆ Approving…';
+    try {
+      // Flush the editor's debounced autosave FIRST (same-origin iframe) so Approve bakes the
+      // LATEST edits, not a stale contract — a user can edit then hit Approve before the ~debounce
+      // fires. flushContract() PUTs the live contract and resolves; a save failure aborts the bake.
+      const win = frames.model && frames.model.contentWindow;
+      if (win && typeof win.flushContract === 'function') await win.flushContract();
+      await api(`/api/contract/${encodeURIComponent(current.app)}/approve?project=${encodeURIComponent(current.id)}`, { method: 'POST' });
+      showToast(`Approved — "${current.name}" is baked into ${current.app}`, 'ok');
+    } catch (err) {
+      showToast('Approve failed: ' + (err && err.message || err), 'warn');
+    } finally { btn.disabled = false; btn.textContent = prev; }
+  });
+
+  // ── project picker + lifecycle (full set lives HERE; ≡ carries nothing) ────
+  let menuFor = null;
+  function menuItem(action, label) {
+    return `<button class="menu-item" data-act="${action}" role="menuitem"><span class="menu-label">${escapeHtml(label)}</span></button>`;
+  }
+  function openProjMenu(id, anchor) {
+    menuFor = id;
+    const others = projects.filter((p) => p.id !== id);
+    $projMenu.innerHTML =
+      (others.length ? others.map((p) => `<button class="menu-item" data-goto="${escapeAttr(p.id)}" role="menuitem"><span class="menu-label">Open: ${escapeHtml(p.name)}</span></button>`).join('') + '<div class="menu-divider"></div>' : '') +
+      menuItem('rename', 'Rename…') + menuItem('duplicate', 'Duplicate') +
+      '<div class="menu-divider"></div>' + menuItem('archive', 'Archive');
+    const r = anchor.getBoundingClientRect();
+    $projMenu.style.left = Math.round(Math.max(8, Math.min(r.left, window.innerWidth - 260))) + 'px';
+    $projMenu.style.top = Math.round(r.bottom + 6) + 'px';
+    $projMenu.hidden = false;
+    $projMenu.classList.add('show');
+  }
+  document.getElementById('ws-proj-trigger').addEventListener('click', (e) => {
+    if (!current) return;
+    e.stopPropagation();
+    if ($projMenu.hidden) openProjMenu(current.id, e.currentTarget); else closeProjMenu();
+  });
+  document.addEventListener('click', (e) => {
+    if ($projMenu.hidden) return;
+    if (!$projMenu.contains(e.target) && !e.target.closest('#ws-proj-trigger') && !e.target.closest('[data-kebab]')) closeProjMenu();
+  });
+  $projMenu.addEventListener('click', async (e) => {
+    const goto = e.target.closest('[data-goto]');
+    if (goto) { closeProjMenu(); return openProject(goto.dataset.goto); }
+    const act = e.target.closest('[data-act]');
+    if (!act || !menuFor) return;
+    closeProjMenu();
+    const id = menuFor;
+    const proj = projects.find((p) => p.id === id);
+    try {
+      if (act.dataset.act === 'rename') {
+        const name = await promptName('Rename project', 'New name', proj ? proj.name : '');
+        if (!name) return;
+        const { project } = await api(`/api/projects/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ name }) });
+        if (current && current.id === id) { current = project; $projName.textContent = project.name; $crumbName.textContent = project.name; }
+        showToast('Renamed', 'ok');
+      } else if (act.dataset.act === 'duplicate') {
+        const { project } = await api(`/api/projects/${encodeURIComponent(id)}/duplicate`, { method: 'POST', body: '{}' });
+        showToast(`Duplicated as "${project.name}"`, 'ok');
+      } else if (act.dataset.act === 'archive') {
+        await api(`/api/projects/${encodeURIComponent(id)}/archive`, { method: 'POST', body: '{}' });
+        showToast('Archived — recoverable from ~/.floless/projects/.archive', 'ok');
+        if (current && current.id === id) { closeProject(); return; }
+      }
+    } catch (err) { showToast('Action failed: ' + (err && err.message || err), 'warn'); }
+    loadProjects();
+  });
+
+  window.flolessWorkspaces = { setMode, refresh: loadProjects };
+  applyMode(); // restore persisted mode immediately (matches panels.js applyView timing)
+})();

package/package.json

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