@floless/app 0.69.0 → 0.71.0

package/dist/templates/dummy-report.flo

@@ -4,10 +4,11 @@ display-name:  Dummy Report
 description: |
   A self-contained test workflow that produces a styled HTML report — no Tekla
   model required. Neither node touches `model`, so it runs on the host bridge with
-  nothing open. Use it to preview the in-app HTML Viewer and the "Made with
-  FloLess" report badge end to end without a real model. Two real tekla/exec nodes:
-  a title input → a report node that builds the HTML inline and is the terminal the
-  viewer renders.
+  nothing open. Use it to preview the in-app HTML Viewer, the "Made with FloLess"
+  report badge, and the viewer's "Open file" / "Reveal in folder" buttons end to
+  end without a real model. Two real tekla/exec nodes: a title input → a report
+  node that builds the HTML inline, saves a copy to a file in your temp folder, and
+  is the terminal the viewer renders.
 exposes-as-agent: false
 inputs:
   title:
@@ -47,11 +48,14 @@ nodes:
       args:
         title: "{{ title-input.result.title }}"
       code: |
-        // Dummy report — builds a styled HTML report inline and returns it as this
-        // terminal node's `html`, so the floless.app HTML Viewer renders it on
-        // double-click. Touches NO `model` (runs with no Tekla open) and writes no
-        // file. Pure string build, manual HTML-escape (no System.Net available).
+        // Dummy report — builds a styled HTML report inline, saves a copy to a file
+        // in your temp folder, and returns the report as this terminal node's `html`
+        // (so the floless.app HTML Viewer renders it on double-click) plus that file's
+        // path as `saved_path` (so the viewer's "Open file" / "Reveal in folder"
+        // buttons have a real file to act on). Touches NO `model`, so it runs with no
+        // Tekla open. Manual HTML-escape (no System.Net available).
         using System;
+        using System.IO;
         using System.Text;
 
         string title = "FloLess Test Report";
@@ -99,6 +103,20 @@ nodes:
         sb.Append("<div class=\"ft\">This is a dummy report for testing the FloLess HTML viewer.</div>");
         sb.Append("</div></body></html>");
 
-        return new { ok = true, title, html = sb.ToString() };
+        string html = sb.ToString();
+
+        // Also SAVE the report to a real file on disk so the viewer's "Open file" /
+        // "Reveal in folder" buttons have something to act on. Best-effort: a write
+        // failure just means no saved file (the report still renders inline).
+        string savedPath = null;
+        try
+        {
+            var outPath = Path.Combine(Path.GetTempPath(), "floless-dummy-report.html");
+            File.WriteAllText(outPath, html);
+            savedPath = outPath;
+        }
+        catch { savedPath = null; }
+
+        return new { ok = true, title, html, saved_path = savedPath };
 connections:
   - { from: title-input, to: report }

package/dist/web/aware.js

@@ -24,6 +24,8 @@
   const $reportSub = document.getElementById('report-sub');
   const $reportOpen = document.getElementById('report-open');
   const $reportShare = document.getElementById('report-share');
+  const $reportOpenFile = document.getElementById('report-open-file');
+  const $reportRevealFile = document.getElementById('report-reveal-file');
   const $reportClose = document.getElementById('report-close');
   const $reportStop = document.getElementById('report-stop');
   const $stopRunBtn = document.getElementById('stop-run-btn');
@@ -1699,12 +1701,26 @@
   // never a disabled affordance with no path forward).
   // The last HTML painted (static or 3D) — so ↗ Open works for both surfaces.
   let lastPaintedHtml = '';
+  // The workflow-written output file the current report reported (its run's
+  // `saved_path`), or '' when the run wrote none. Drives the ⧉ Open file / ▤ Reveal
+  // buttons — both hide together when there's no file (#209). Hidden is the default:
+  // paintReport clears it every paint, and only a run/cached-show with a real path
+  // re-shows it — so a trigger/3D/other paint can never leak a previous file's path.
+  let currentSavedPath = '';
+  function showSavedPathActions(path) {
+    currentSavedPath = typeof path === 'string' ? path : '';
+    const has = !!currentSavedPath;
+    $reportOpenFile.hidden = !has;
+    $reportRevealFile.hidden = !has;
+  }
+
   // Paint a report into the viewer. A STATIC report uses the scriptless srcdoc frame; an
   // INTERACTIVE 3D doc (viewer-3d) uses the script-enabled frame via a data: URL (opaque
   // origin, cannot touch the app page) and keeps a "Loading 3D view…" overlay until the doc
   // posts `viewer-ready`. Exactly one frame is shown at a time.
   function paintReport(html, interactive) {
     lastPaintedHtml = html || '';
+    showSavedPathActions(''); // default off; the caller re-shows if this report saved a file
     if (interactive) {
       $reportFrame.hidden = true; $reportFrame.srcdoc = '';
       $reportFrame3d.hidden = false;
@@ -1727,6 +1743,7 @@
     $reportFrame.srcdoc = ''; $reportFrame.hidden = false;
     $reportFrame3d.hidden = true; $reportFrame3d.removeAttribute('src');
     lastPaintedHtml = '';
+    showSavedPathActions(''); // no report shown → no saved-file actions
   }
 
   // Double-click the HTML Viewer node → LOAD the last report (no run; running is
@@ -1748,6 +1765,7 @@
         $reportSub.textContent = `Last report${sfx} — rendered from the run's output, never composed by the UI.`;
       }
       paintReport(cached.html, cached.interactive);
+      showSavedPathActions(cached.savedPath); // re-show Open file / Reveal if this run saved one
     } else {
       clearReportFrames();
       $reportShare.hidden = true; // nothing to share — hide, don't disable
@@ -2109,8 +2127,12 @@
         $reportSub.innerHTML = `Live 3D view from <code>${escapeHtml(nodeId)}</code>${inputBadge ? ' · ' + escapeHtml(inputBadge) : ''} — drag to orbit, scroll to zoom, click an element to inspect.`;
       }
       paintReport(html, interactive);
+      // If a node wrote an output file, the run reports its path — surface the
+      // ⧉ Open file / ▤ Reveal buttons and cache it so a later double-click restores them (#209).
+      const savedPath = res && typeof res.savedPath === 'string' ? res.savedPath : '';
+      showSavedPathActions(savedPath);
       markFirstRunDone(app.id); // a real run rendered → this workflow is no longer "new" (app captured pre-await; a mid-run switch must not mark the wrong workflow)
-      lastReportByApp.set(currentId, { nodeId, label: inputBadge, html, interactive });
+      lastReportByApp.set(currentId, { nodeId, label: inputBadge, html, interactive, savedPath });
       $reportModal.dataset.html = '1';
       appendNarration(`Rendered the ${interactive ? '3D view' : 'report'} from <strong>${escapeHtml(nodeId)}</strong>${inputBadge ? ' (' + escapeHtml(inputBadge) + ')' : ''} — live run against the model.`);
     } catch (e) {
@@ -2664,6 +2686,22 @@
   });
   // The header ■ Stop run — the always-reachable twin of the overlay Stop (#39).
   if ($stopRunBtn) $stopRunBtn.onclick = () => stopRun();
+  // ⧉ Open file / ▤ Reveal in folder — act on the run's saved output file via the OS.
+  // The sandboxed report can't (file:// is blocked from an http page), so the local
+  // host shells it (#209). Fire-and-forget: a 400 (file moved/deleted, or bad type)
+  // surfaces as a toast, never a console error.
+  async function savedFileAction(endpoint, failMsg) {
+    if (!currentSavedPath) return; // button is hidden in this state; belt-and-braces
+    try {
+      await api(endpoint, { method: 'POST', body: JSON.stringify({ path: currentSavedPath }) });
+    } catch (e) {
+      const detail = e && e.body && e.body.error;
+      showToast(detail ? `${failMsg} — ${detail}` : failMsg, 'warn');
+    }
+  }
+  $reportOpenFile.onclick = () => savedFileAction('/api/open-file', 'Couldn’t open the file');
+  $reportRevealFile.onclick = () => savedFileAction('/api/reveal', 'Couldn’t reveal the file');
+
   $reportOpen.onclick = () => {
     const html = lastPaintedHtml || $reportFrame.srcdoc;
     if (!html) return;
@@ -6392,12 +6430,15 @@
   window.flolessBridge = {
     api,
     // Open report HTML in the existing sandboxed HTML Viewer (same modal + srcdoc
-    // iframe the canvas report node uses — no new sandbox surface).
-    showHtmlReport(title, html) {
+    // iframe the canvas report node uses — no new sandbox surface). `savedPath` is
+    // optional: pass the run's saved_path so a dashboard-panel run surfaces the same
+    // ⧉ Open file / ▤ Reveal buttons as a canvas run (#209); omit → they stay hidden.
+    showHtmlReport(title, html, savedPath) {
       $reportTitle.textContent = title;
       $reportSub.textContent = "Rendered from the run's output — never composed by the UI.";
       showModal($reportModal);
       paintReport(html);
+      showSavedPathActions(savedPath);
     },
     // Refresh the footer requests counter after the Customize box queues a request.
     loadRequests,

package/dist/web/index.html

@@ -395,6 +395,8 @@
         <div class="report-actions">
           <button id="report-stop" class="ghost report-stop" hidden data-tip="Stop the live session — the report stops updating on each change">■ Stop run</button>
           <button id="report-share" class="ghost" hidden data-tip="Share this report as a link anyone can view — hosted on floless.io">↗ Share</button>
+          <button id="report-open-file" class="ghost" hidden data-tip="Open the saved file in its default app">⧉ Open file</button>
+          <button id="report-reveal-file" class="ghost" hidden data-tip="Show the saved file in its folder">▤ Reveal in folder</button>
           <button id="report-open" class="ghost" data-tip="Open the report in a new browser tab">↗ Open</button>
           <button id="report-close" data-tip="Close">×</button>
         </div>

package/dist/web/panels.js

@@ -398,7 +398,8 @@
     const payload = payloadFor(source);
     const html = payload && typeof payload === 'object' && typeof payload.html === 'string' ? payload.html : null;
     if (!html) { showToast('No report yet — run the workflow first.', 'info'); return; }
-    if (bridge.showHtmlReport) bridge.showHtmlReport(title || 'Report', html);
+    const savedPath = payload && typeof payload.saved_path === 'string' ? payload.saved_path : null;
+    if (bridge.showHtmlReport) bridge.showHtmlReport(title || 'Report', html, savedPath);
   }
 
   async function runAction(btn) {
@@ -415,7 +416,7 @@
         return;
       }
       const html = res.report && res.report.html;
-      if (html && bridge.showHtmlReport) bridge.showHtmlReport(`${appId} · report`, html);
+      if (html && bridge.showHtmlReport) bridge.showHtmlReport(`${appId} · report`, html, res.savedPath);
       else showToast(`Run complete · ${appId}`, 'ok');
     } catch (err) {
       const cred = err && err.body && err.body.credentialIssue;

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>
@@ -1377,6 +1385,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 +1426,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 +1556,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 +1612,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 +1627,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();

package/package.json

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