@floless/app 0.70.0 → 0.72.0

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

@@ -526,6 +526,7 @@ function applyCopes(mesh, cuts) {
 
 function buildFromScene(sc) {
   clearRoot();
+  resetConnState(); // a fresh scene rebuilds selection from scratch — drop any stale connection envelope/context
   for (const mat of baseMat.values()) mat.dispose(); // shared per-profile materials from the prior build
   groupColor.clear(); baseMat.clear();
   sceneGroups = (sc.groups || []).map((g) => ({ key: g.key, label: g.label, color: g.color || '#94a3b8' }));
@@ -547,6 +548,7 @@ function buildFromScene(sc) {
     if (memberCuts && memberCuts.length) applyCopes(mesh, memberCuts); // notch a coped member end
     mesh.userData.id = el.id; mesh.userData.group = el.group; mesh.userData.profile = el.meta && el.meta.profile;
     mesh.userData.derived = !!(el.kind && el.kind !== 'box'); // connection parts: rendered, not member-editable
+    mesh.userData.conn = el.conn || null; mesh.userData.connKind = el.connKind || null; // Connection Component membership (Slice A) — the whole-select/drill handle
     root.add(mesh); meshById.set(el.id, mesh);
     box.expandByObject(mesh);
   }
@@ -1302,6 +1304,7 @@ function onKey(e) {
   if (insertMode && e.key === 'Escape') { e.preventDefault(); setInsertMode(false); if (api && api.toast) api.toast('Insert cancelled'); return; }   // Esc disarms the detail-placement pick
   if (clipMode && e.key === 'Escape') { e.preventDefault(); if (clipMode === 'box' && clipBoxDraft) { if (clipBoxDraft.b) clipBoxDraft.b = null; else clipBoxDraft = null; setClipPreview(null); updateStatusChip(); } else setClipMode(null); return; } // Esc steps back: height→footprint→cancel, else disarms the pick
   if (isolatedIds && e.key === 'Escape' && !dimMode3d) { e.preventDefault(); clearIsolation(); return; } // Esc exits isolate-selected (the dim tool's own Esc wins while it's armed)
+  if (e.key === 'Escape' && !dimMode3d && !cmActive() && ascendConn()) { e.preventDefault(); return; } // Esc ascends the connection drill: part → whole → nothing
   if ((e.key === ' ' && e.shiftKey) || ((e.key === 'z' || e.key === 'Z') && e.altKey)) { e.preventDefault(); frameSelection(); return; } // zoom-selected (Tekla Shift+Space / viewer Alt+Z)
   const k = e.key.toLowerCase();
   // Don't touch the dim tool while a member gesture (drag / box-select) owns the shared marker/readout —
@@ -1354,6 +1357,16 @@ function onDblClick(e) {
   const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false); // incl. connection parts
   if (!hits.length) return; // empty space → no-op (Fit / Home fit-all; avoids an accidental camera teleport)
   const p = hits[0].point, mesh = hits[0].object;
+  // Connection drill-down (Slice A): double-clicking a part of a connection we're NOT already inside ENTERS
+  // that connection (selects the part under the cursor) and frames it. A part of the connection we're
+  // already in, or a bare member, falls through to the classic zoom-to-part below (non-breaking).
+  const dblConn = mesh.userData && mesh.userData.conn;
+  if (dblConn && ctxConn !== dblConn) {
+    enterConn(dblConn, mesh.userData.id);
+    const cb = connBox(dblConn);
+    if (!cb.isEmpty()) { const vDir = camera.position.clone().sub(controls.target).normalize(); fitCamera(cb, vDir.lengthSq() > 0.5 ? vDir : undefined); }
+    return;
+  }
   if (mesh.geometry && !mesh.geometry.boundingBox) mesh.geometry.computeBoundingBox();
   const s = mesh.geometry && mesh.geometry.boundingBox ? mesh.geometry.boundingBox.getSize(new THREE.Vector3()) : V(400, 400, 400);
   const sect = Math.max(40, Math.min(s.x, s.y, s.z)); // the part's smallest extent ≈ a section / plate scale
@@ -1378,6 +1391,7 @@ function setSelection(ids) {
   }
   applyDisplayMode();                 // selection swapped the materials → re-apply wire/xray
   selIds = new Set(set);
+  reconcileConnState(set);            // any selection path (2D click, box-select, keyboard) must not leave a stale connection envelope/drill
   rebuildEndpoints();                 // endpoint dots follow the selection (+ any hover)
   updateStatusChip();
 }
@@ -1817,14 +1831,19 @@ const CYCLE_TOL_PX = 8;
 function resetCycle() { cycleAnchor = null; cycleIds = []; cycleIdx = 0; }
 function clickSelect(cx, cy, ctrl) {
   let hits = []; try { hits = pickAllAt(cx, cy); } catch { hits = []; }
-  if (!hits.length) { resetCycle(); if (api && api.onSelect) api.onSelect(null, !!ctrl); return; }
-  if (ctrl) { resetCycle(); if (api && api.onSelect) api.onSelect(hits[0], true); return; } // additive toggles the nearest
+  if (!hits.length) { resetCycle(); clearConnSel(); return; }                       // empty → deselect (clears any connection too)
+  if (ctrl) { resetCycle(); resetConnState(); if (api && api.onSelect) api.onSelect(hits[0], true); return; } // additive toggles the nearest RAW part (leaves connection mode)
   const same = cycleAnchor && Math.hypot(cx - cycleAnchor[0], cy - cycleAnchor[1]) <= CYCLE_TOL_PX
     && cycleIds.length === hits.length && cycleIds.every((v, i) => v === hits[i]);
   if (same) cycleIdx = (cycleIdx + 1) % hits.length; else { cycleIds = hits; cycleIdx = 0; cycleAnchor = [cx, cy]; }
-  const pick = hits[cycleIdx], grp = boltGroupOf(pick); // a bolt → select the whole bolt ARRAY (a pattern, not one bolt)
-  if (grp.length > 1) { if (api && api.onSelectMany) api.onSelectMany(grp); }
-  else if (api && api.onSelect) api.onSelect(pick, false);
+  const pick = hits[cycleIdx], conn = connOf(pick);
+  if (!conn) { resetConnState(); if (api && api.onSelect) api.onSelect(pick, false); return; } // a bare member → normal single select
+  if (ctxConn === conn) {                     // drilled INTO this connection → clicks land on its parts (bolt array or a single part)
+    const grp = boltGroupOf(pick);
+    if (grp.length > 1) { if (api && api.onSelectMany) api.onSelectMany(grp); } else if (api && api.onSelect) api.onSelect(pick, false);
+    return;
+  }
+  selectWholeConn(conn);                       // at root (or over a different connection) → select the WHOLE connection
 }
 // A bolt/head/nut id → all bolt-group part ids of the same joint (the connection's bolt array); else just [id].
 function boltGroupOf(id) {
@@ -1834,6 +1853,63 @@ function boltGroupOf(id) {
   const ids = [...meshById.keys()].filter((k) => { const c = k.indexOf(':'); return c >= 0 && k.slice(0, c) === jid && /^(bolt|head|nut)/.test(k.slice(c + 1)); });
   return ids.length ? ids : [id];
 }
+
+// ── Connection Components (Slice A): select/drill a whole connection (base-plate / shear-plate) as ONE
+// unit. `selConn` = the connection currently whole-selected at root; `ctxConn` = the connection we've
+// DRILLED INTO (double-click) so subsequent clicks land on its individual parts. Both derive from the
+// `conn` tag every ConnPart carries (buildFromScene stashes el.conn on userData). A bare member (no conn)
+// clears both. The host editor re-derives its breadcrumb + component inspector from the selection ids each
+// render() — no view→editor callback needed; reconcileConnState() (from setSelection) keeps this honest.
+let selConn = null, ctxConn = null;
+function connOf(id) { const m = id && meshById.get(id); return m && m.userData ? (m.userData.conn || null) : null; }
+function connChildIds(conn) { const out = []; for (const [id, m] of meshById) { if (m.userData && m.userData.conn === conn) out.push(id); } return out; } // every rendered part of this connection
+function connBox(conn) { const b = new THREE.Box3(); for (const m of meshById.values()) { if (m.userData && m.userData.conn === conn && m.visible) b.expandByObject(m); } return b; }
+// The dashed brand-blue envelope = the single "this is a group" cue for a whole-connection selection.
+let connEnvelope = null;
+function clearConnEnvelope() { if (connEnvelope) { if (overlayScene) overlayScene.remove(connEnvelope); connEnvelope.geometry.dispose(); connEnvelope.material.dispose(); connEnvelope = null; } }
+function renderConnEnvelope(conn) {
+  clearConnEnvelope();
+  if (!conn || !overlayScene) return;
+  const b = connBox(conn); if (b.isEmpty()) return;
+  b.expandByScalar(Math.max(6, b.getSize(new THREE.Vector3()).length() * 0.02)); // a little breathing room around the parts
+  connEnvelope = new THREE.Box3Helper(b, new THREE.Color(SELECT_EMISSIVE)); // --brand
+  connEnvelope.material.depthTest = false; connEnvelope.material.transparent = true; connEnvelope.material.opacity = 0.6; connEnvelope.renderOrder = 996;
+  overlayScene.add(connEnvelope);
+}
+function resetConnState() { selConn = null; ctxConn = null; clearConnEnvelope(); } // internal reset, no callbacks
+// Select the WHOLE connection at root (single-click a part, or a breadcrumb click). Clears any drill context.
+function selectWholeConn(conn) {
+  if (!conn || !connChildIds(conn).length) return clearConnSel();
+  selConn = conn; ctxConn = null;
+  renderConnEnvelope(conn);
+  if (api && api.onSelectMany) api.onSelectMany(connChildIds(conn));
+}
+// Clear any connection selection/drill (back to bare Model root — deselects).
+function clearConnSel() { resetConnState(); if (api && api.onSelect) api.onSelect(null, false); }
+// Enter a connection (double-click) and select the part under the cursor — the drill-in step.
+function enterConn(conn, partId) {
+  ctxConn = conn; selConn = conn; clearConnEnvelope(); // inside → the part-level highlight carries; no whole envelope
+  const grp = boltGroupOf(partId);
+  if (grp.length > 1) { if (api && api.onSelectMany) api.onSelectMany(grp); }
+  else if (api && api.onSelect) api.onSelect(partId, false);
+}
+// Ascend one level: drilled part → whole connection → nothing. Returns true if it consumed the gesture.
+function ascendConn() {
+  if (ctxConn) { selectWholeConn(ctxConn); return true; } // part → whole
+  if (selConn) { clearConnSel(); return true; }           // whole → nothing
+  return false;
+}
+// Keep the connection state honest against ANY selection change — not just the 3D click paths but a 2D
+// member click, box-select, keyboard, or Delete that route through setSelection(). Whole: the full child
+// set must still be selected, else drop the stale envelope; drilled: the selection must stay WITHIN the
+// connection, else exit the drill. Callback-free (resetConnState) so it can't recurse through render().
+function reconcileConnState(set) {
+  if (!selConn) return;
+  const kids = connChildIds(selConn);
+  if (ctxConn) { if (!set.size || ![...set].every((id) => kids.includes(id))) resetConnState(); }  // drilled: any pick outside the connection → exit
+  else if (!kids.length || !kids.every((k) => set.has(k))) resetConnState();                        // whole: must remain the full set, else drop the envelope
+}
+function connContext() { return { selConn, ctxConn }; } // test/editor read
 // The (currently shown) end-node dot nearest the cursor within a screen tolerance → { id, end } or
 // null. Screen-space (not a raycast) so the small dots are easy to grab at any zoom. Dots win over
 // the member body, letting you grab one end to stretch it.
@@ -2575,7 +2651,7 @@ function dispose() {
   gridTexCache.clear();
   clearRoot();
   if (workAreaHelper) { if (overlayScene) overlayScene.remove(workAreaHelper); workAreaHelper.geometry.dispose(); workAreaHelper.material.dispose(); workAreaHelper = null; }
-  clearClipGizmo(); setClipPreview(null); overlayScene = null;
+  clearConnEnvelope(); clearClipGizmo(); setClipPreview(null); overlayScene = null;
   clips = []; workArea = null; clipMode = null; selectedClipIds.clear(); clipBoxDraft = null;   // clips live on the renderer; drop them with the renderer
   if (renderer) renderer.dispose();
   renderer = scene = camera = perspCam = orthoCam = controls = root = api = canvasEl = ro = null; built = false;
@@ -2637,6 +2713,7 @@ window.Steel3DView = {
   setProjection, projection, setDisplayMode, mode: () => displayMode, frameAll, frameSelection, applyView,
   setRefLine, refLine: () => refLineOn,
   setInsertMode, insertMode: insertModeOn,          // arm/query the detail-placement pick (Slice 4)
+  selectWholeConn, clearConnSel, ascendConn, connContext, connEnvelopeOn: () => !!connEnvelope, // Connection Components (Slice A): whole-select / drill / ascend + test probes
   setLabelsOn, labelsOn: () => labelsOnFlag,          // member mark/id label overlay toggle
   syncMemberLabels,                                  // editor calls after a mark/id edit to refresh labels
   setPropLabels,                                     // right-click property labels: editor pushes { labels:[{id,lines}], placement }

package/dist/web/steel-editor.html

@@ -33,6 +33,13 @@
  .detf input{width:100%}
  #detOpacity{accent-color:var(--brand);flex:1;min-width:0}
  #zoombar #zPct{min-width:40px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
+ /* Connection Component breadcrumb (Slice A) — a floating chip over the 3D canvas, same recipe as #zoombar. */
+ #connCrumb{position:absolute;left:50%;top:48px;transform:translateX(-50%);display:none;align-items:center;gap:1px;max-width:min(72%,560px);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 10px;box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:58;font-size:12px;white-space:nowrap;overflow:hidden}  /* below #m3dBar (top:12,h~29,z:59); z:58 keeps it clickable above the dim-label chips (57) */
+ #connCrumb .seg{color:var(--mut);cursor:pointer;padding:1px 4px;border-radius:4px;background:none;border:0;font:inherit;max-width:260px;overflow:hidden;text-overflow:ellipsis}
+ #connCrumb .seg:hover{color:var(--text);text-decoration:underline}
+ #connCrumb .seg.cur{color:var(--brand);font-weight:600;cursor:default;text-decoration:none}
+ #connCrumb .sep{color:var(--mut);opacity:.7;padding:0 2px}
+ .pilllink{background:none;border:0;color:var(--brand);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
  aside{width:240px;flex:none;background:var(--panel);border-left:1px solid var(--line);padding:12px;overflow:auto}
  aside h3{margin:0 0 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
  select,input{background:#0f172a;color:var(--text);border:1px solid #475569;border-radius:6px;padding:6px;width:100%;font:13px system-ui}
@@ -496,6 +503,7 @@
  <div id=stagewrap>
   <div id=stage><svg id=svg></svg></div>
   <canvas id=stage3d tabindex=0 aria-label="3D model"></canvas>
+  <div id=connCrumb role=navigation aria-label="Connection breadcrumb"></div>
   <div id=m3dBar role=group aria-label="3D view controls">
    <!-- Camera projection — dropdown (like Plane / Work area); the button shows the current mode -->
    <div class=m3dwrap>
@@ -639,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
@@ -659,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);
@@ -920,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);}}
@@ -932,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');
@@ -1377,6 +1390,7 @@ function render(){
  if(P.frame)s+=axisGlyphSvg(P.frame.o,P.frame.u,false);   // local-axes glyph at the origin (only when a frame is set; removed on reset)
  svg.innerHTML=s; document.getElementById('profiles').innerHTML=profs.map(p=>`<option value="${esc(p)}">`).join(''); document.getElementById('details').innerHTML=(P.details||[]).map(d=>`<option value="${esc(d.text)}">`).join(''); stats(); panel(); updUR(); updDup(); updConf(); updCS(); updConnBtn(); updBpBtn(); updSpBtn(); updGridToggle();
  if(view3d&&window.Steel3DView){window.Steel3DView.setSelection(selIds);updateIsolateBtn();if(selIds.size&&window.Steel3DView.selectedClips&&window.Steel3DView.selectedClips().length)window.Steel3DView.setSelectedClips([]);}  // keep the 3D highlight in sync; selecting a member clears any clip selection (exclusive)
+ try{updateConnCrumb();}catch(_){}  // Connection Component breadcrumb follows the selection (3D-only; hidden at root)
  syncPropLabelsAfterRender();   // corner-note + push labels to 3D + refresh the popup rows against the (possibly changed) selection
 }
 function updDup(){const n=redundantDups().length;
@@ -1417,6 +1431,54 @@ function stats(){
 // "Varies" placeholders + the indeterminate "default" checkbox in the multi-edit panel. get() must return a primitive.
 const VARIES=Symbol('varies');
 function agg(list,get){if(!list.length)return undefined;const f=get(list[0]);for(let i=1;i<list.length;i++)if(get(list[i])!==f)return VARIES;return f;}
+// ── Connection Components (Slice A). Derive the current connection-selection state from selIds + the
+// resolved scene parts (partsById carries each part's `conn` tag). Returns {conn,kind,main,joint,childIds,
+// whole,mode} or null when the selection isn't one connection's parts. `whole` = every selectable part of
+// the connection is selected (copes are subtractive → not rendered/selectable, so excluded). Robust: no
+// dependence on cross-view callback timing — every render() re-derives it.
+function connSelInfo(){
+ const ids=[...selIds]; if(!ids.length) return null;
+ let conn=null;
+ for(const id of ids){ const el=(partsById||{})[id]; const c=el&&el.conn; if(!c) return null; if(conn==null) conn=c; else if(conn!==c) return null; }
+ if(!conn) return null;
+ const j=(C.joints||[]).find(x=>x&&x.id===conn); if(!j) return null;
+ const childIds=Object.keys(partsById||{}).filter(id=>{const el=partsById[id];return el&&el.conn===conn&&el.kind!=='cut';});
+ const whole=childIds.length>0&&childIds.every(id=>selIds.has(id));
+ return {conn,kind:j.kind,main:j.main,joint:j,childIds,whole,mode:whole?'whole':'part'};
+}
+// The floating breadcrumb over the 3D canvas: Model ▸ <Connection> [▸ <Part>]. Segments jump levels via the
+// 3D view's own ascend/whole-select so the canvas selection + envelope stay in lockstep. 3D-only; hidden at root.
+function updateConnCrumb(){
+ const el=document.getElementById('connCrumb'); if(!el) return;
+ const cs=view3d?connSelInfo():null;
+ if(!cs){ el.style.display='none'; el.innerHTML=''; return; }
+ const name=(cs.kind==='base-plate'?'Base plate':cs.kind==='shear-plate'?'Shear plate':'Connection')+' · '+cs.main;
+ let html='<button class=seg data-lvl=root data-tip="Back to the model (deselect)">Model</button><span class=sep>▸</span>';
+ if(cs.whole){ html+='<span class="seg cur">'+esc(name)+'</span>'; }
+ else{
+  html+='<button class=seg data-lvl=whole data-tip="Select the whole connection">'+esc(name)+'</button><span class=sep>▸</span>';
+  const partId=[...selIds].find(id=>/:bolt\d+$/.test(id))||[...selIds][0];
+  const pel=(partsById||{})[partId]; const plbl=(pel&&pel.meta&&pel.meta.label)||'Part';
+  html+='<span class="seg cur">'+esc(plbl)+'</span>';
+ }
+ el.innerHTML=html; el.style.display='flex';
+ {const b=el.querySelector('[data-lvl=root]'); if(b)b.onclick=()=>{ if(window.Steel3DView&&window.Steel3DView.clearConnSel)window.Steel3DView.clearConnSel(); else{selIds=new Set();render();} };}
+ {const b=el.querySelector('[data-lvl=whole]'); if(b)b.onclick=()=>{ if(window.Steel3DView&&window.Steel3DView.selectWholeConn)window.Steel3DView.selectWholeConn(cs.conn); };}
+}
+// Route a "modify this connection" ask through the Request relay (intent+target). A recipe connection's
+// geometry is member-derived, so move/replace/adjust go to the terminal AI (the UI relays intent) — unlike
+// Delete, which is a direct, deterministic contract edit.
+async function connModifyRequest(j){
+ if(!j) return;
+ try{await window.flushContract();}catch(_){}
+ try{persist();}catch(_){}
+ const kindName=j.kind==='base-plate'?'base plate':j.kind==='shear-plate'?'shear plate':'connection';
+ const instruction='Modify the '+kindName+' connection "'+j.id+'" on member '+j.main+' (sheet '+((P&&P.sheet)||'?')+') — adjust, replace or move it per my request.';
+ try{const res=await fetch('/api/contract-request',{method:'POST',headers:{'content-type':'application/json'},
+     body:JSON.stringify({appId:APP_ID,instruction,intent:'modify',target:{sheet:(P&&P.sheet)||undefined,ids:[j.id,j.main]}})});
+   toast(res.ok?'Change queued for your terminal AI session':'Could not queue the request');
+ }catch(_){toast('Could not queue the request');}
+}
 function panel(){
  const p=document.getElementById('panel');
  if(!selDimIds.size||!dimsVisible)dimSplitMode=false;document.body.classList.toggle('dimsplit',dimSplitMode);   // split mode is meaningless without a (visible) dim selected — also disarms when dims are hidden
@@ -1499,6 +1561,38 @@ function panel(){
    {const rm=document.getElementById('detRemove');if(rm)rm.onclick=()=>edit(()=>{C.detail_placements=(C.detail_placements||[]).filter(x=>x&&x.id!==detId);selIds.clear();});}
    return;
   }}
+ // A WHOLE connection selected (Slice A) — the Component inspector: type badge + editability chip +
+ // on-member link + part count + a read-only param summary, then Delete (direct contract edit) /
+ // Modify (relay) / Edit-on-member. Precedes the single-part branch below (which handles the DRILLED case).
+ {const cs=connSelInfo();
+  if(cs&&cs.whole){
+   const j=cs.joint,isBP=j.kind==='base-plate',pp=j.params||{};
+   const plate=(partsById||{})[cs.conn+':plate']||null;
+   const dim=(n)=>(n==null?'<span style="color:var(--mut)">auto</span>':esc(fmtFtIn(Number(n)/25.4)));
+   const kv=(l,val)=>`<div style="display:flex;justify-content:space-between;gap:8px;font-size:12px;margin:3px 0"><span style="color:var(--mut)">${esc(l)}</span><span style="font-variant-numeric:tabular-nums">${val}</span></div>`;
+   const sec=t=>`<div class=divrow><hr><span class=sect style="margin:0">${esc(t)}</span><hr></div>`;
+   const sz=plate?dim(plate.width)+' × '+dim(plate.depth):'<span style="color:var(--mut)">auto</span>';
+   let body='';
+   if(isBP)body=sec('Plate')+kv('Size',sz)+kv('Thickness',plate?dim(plate.thickness):dim(pp.thickness))+sec('Anchors')+kv('Grid (cols × rows)',esc(`${pp.boltCols||2} × ${pp.boltRows||2}`))+kv('Diameter',pp.boltDia?dim(pp.boltDia):dim(24));
+   else body=sec('Plate')+kv('Size',sz)+kv('Thickness',plate?dim(plate.thickness):dim(pp.plateThickness))+sec('Bolts')+kv('Grid (cols × rows)',esc(`${pp.boltCols||1} × ${pp.boltRows||3}`))+kv('Diameter',pp.boltDia?dim(pp.boltDia):dim(20))+sec('Weld')+kv('Leg',pp.weldLeg?dim(pp.weldLeg):dim(6));
+   p.innerHTML=`<span class=badge>${isBP?'Base plate':'Shear plate'}</span>
+     <div class=row style="margin:0 0 6px"><span class=chip style="border-color:var(--brand);color:#bfdbfe">Parametric — editable</span></div>
+     <div class="row hint" style="margin:0 0 2px">On <button class=pilllink id=cmpMember data-tip="Select ${esc(j.main)}">${esc(j.main)}</button> · ${cs.childIds.length} parts</div>
+     <div class="row hint" style="margin:0 0 6px;font-size:11px">Double-click to enter and pick a part · <b>Esc</b> steps back.</div>
+     ${body}
+     <div class=divrow><hr></div>
+     <div class="row f" style="gap:6px;flex-wrap:wrap">
+       <button class=ghostw id=cmpEdit data-tip="Edit this connection's parameters on ${esc(j.main)}">✎ Edit parameters on ${esc(j.main)} →</button>
+       <button class=ghostw id=cmpAsk data-tip="Record a request for your terminal AI to modify / replace / move this connection">Modify connection…</button>
+       <button class=danger id=cmpDel data-tip="Remove this whole connection">Delete connection</button>
+     </div>`;
+   const toMember=()=>{if(window.Steel3DView&&window.Steel3DView.clearConnSel)window.Steel3DView.clearConnSel();selIds=new Set([j.main]);selDimIds.clear();sel3dDimIds.clear();render();};
+   {const b=document.getElementById('cmpMember');if(b)b.onclick=toMember;}
+   {const b=document.getElementById('cmpEdit');if(b)b.onclick=toMember;}
+   {const b=document.getElementById('cmpAsk');if(b)b.onclick=()=>connModifyRequest(j);}
+   {const b=document.getElementById('cmpDel');if(b)b.onclick=()=>edit(()=>{C.joints=(C.joints||[]).filter(x=>x!==j);selIds.clear();});}
+   return;
+  }}
  // A derived CONNECTION PART selected in 3D (plate / bolt / weld / cope / stiffener) — show its details
  // read-only (parts have no own state; their params live on the parent joint) + a jump to that member.
  {const selList=[...selIds];
@@ -1523,7 +1617,7 @@ function panel(){
    const sec=t=>`<div class=divrow><hr><span class=sect style="margin:0">${t}</span><hr></div>`;
    let body='';
    if(pk==='plate'&&j.kind==='shear-plate')body=sec('Plate')+kv('Width',dim(el&&el.width))+kv('Height',dim(el&&el.depth))+kv('Thickness',dim(el&&el.thickness))+kv('Weld leg',v('weldLeg','mm'))+kv('Clearance',v('clearance','mm'));
-   else if(pk==='bolt')body=sec('Bolts')+kv('Grid (cols × rows)',`${pp.boltCols||1} × ${pp.boltRows||3}`)+kv('Diameter',v('boltDia','mm'))+kv('Grade',pp.boltGrade?esc(pp.boltGrade):'A325'+dft)+kv('Pitch',v('boltPitch','mm'))+kv('Length','<span style="color:var(--mut)">auto (from grip)</span>');
+   else if(pk==='bolt')body=sec('Bolts')+kv('Grid (cols × rows)',esc(`${pp.boltCols||1} × ${pp.boltRows||3}`))+kv('Diameter',v('boltDia','mm'))+kv('Grade',pp.boltGrade?esc(pp.boltGrade):'A325'+dft)+kv('Pitch',v('boltPitch','mm'))+kv('Length','<span style="color:var(--mut)">auto (from grip)</span>');
    else if(pk==='weld')body=sec('Weld')+kv('Leg',v('weldLeg','mm'));
    else if(pk==='cope')body=sec('Cope')+kv('Length',dim(el&&el.width))+kv('Depth',dim(el&&el.depth))+kv('Re-entrant radius',v('copeRadius','mm'));
    else if(pk==='stiff')body=sec('Stiffener')+`<div class=hint style="margin:0">Opposite-side web stiffener on the support.</div>`;
@@ -1538,8 +1632,9 @@ function panel(){
      ${lbl?`<div class="row" style="margin:3px 0 0;font-size:12px;color:var(--brand);font-variant-numeric:tabular-nums">${esc(lbl)}</div>`:''}
      ${body}
      <div class=divrow><hr></div>
-     <div class="row f"><button class=ghostw id=partEdit data-tip="Select the parent member to edit this connection">✎ Edit on ${esc(j.main)} →</button></div>`;
-   const eb=document.getElementById('partEdit');if(eb)eb.onclick=()=>{selIds=new Set([j.main]);selDimIds.clear();sel3dDimIds.clear();render();};
+     <div class="row f" style="gap:6px;flex-wrap:wrap"><button class=ghostw id=partBack data-tip="Back to the whole connection (Esc)">◂ Connection</button><button class=ghostw id=partEdit data-tip="Select the parent member to edit this connection">✎ Edit on ${esc(j.main)} →</button></div>`;
+   {const bb=document.getElementById('partBack');if(bb)bb.onclick=()=>{if(window.Steel3DView&&window.Steel3DView.ascendConn)window.Steel3DView.ascendConn();};}
+   const eb=document.getElementById('partEdit');if(eb)eb.onclick=()=>{if(window.Steel3DView&&window.Steel3DView.clearConnSel)window.Steel3DView.clearConnSel();selIds=new Set([j.main]);selDimIds.clear();sel3dDimIds.clear();render();};
    return;
   }}
  const arr=selArr();
@@ -2763,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,
@@ -3886,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; }