@floless/app 0.55.0 → 0.57.0

package/dist/web/aware.js

@@ -27,6 +27,9 @@
   const $reportClose = document.getElementById('report-close');
   const $reportStop = document.getElementById('report-stop');
   const $stopRunBtn = document.getElementById('stop-run-btn');
+  const $restoreBtn = document.getElementById('restore-btn');
+  const $customizeBtn = document.getElementById('customize-btn');
+  const $wfForked = document.getElementById('wf-forked');
 
   // Contract editor — a dedicated full-window surface for an editable typed
   // contract (steel takeoff, …). Unlike the opaque report viewer, this is a
@@ -426,11 +429,14 @@
       ...app.nodes.map((n) => `**${escapeHtml(n.id)}** → \`${escapeHtml(n.agent || n.kind)}${n.command ? '/' + escapeHtml(n.command) : ''}\` · ${escapeHtml(n.mode)}`),
     ];
     if (app.notes.length) narration.push(`ℹ ${app.notes.length} compiler note${app.notes.length === 1 ? '' : 's'} — see the strip over the canvas.`);
+    const maintainedDrift = app.publisher === 'floless' && !app.forked && app.runState === 'drift';
     narration.push(app.runnable
       ? 'Lock is fresh (source-hash matches). **Run** is armed.'
-      : app.runState === 'drift'
-        ? 'The `.flo` changed since the last approve — **Compile** to refresh the lock before Run.'
-        : 'No lock yet — **Compile** to freeze the approved contract.');
+      : maintainedDrift
+        ? 'The workflow logic changed since it was last approved. **Restore** the official version, or **Customize** it to make it your own.'
+        : app.runState === 'drift'
+          ? 'The `.flo` changed since the last approve — **Compile** to refresh the lock before Run.'
+          : 'No lock yet — **Compile** to freeze the approved contract.');
 
     if (app.layout === 'dag') {
       PROMPTS[app.id] = { name: app.name, layout: 'dag', nodes: layoutDag(app.nodes, app.connections), connections: app.connections, userText, narration };
@@ -475,6 +481,21 @@
     $compileBtn.disabled = false;
     $compileBtn.textContent = needsCompile ? '⎙ Compile *' : '⎙ Compile';
 
+    // Maintained = a FloLess-published app the user hasn't forked (so it has an official version to
+    // restore + an update channel). Customize (fork) is offered for any maintained app; Restore +
+    // suppressing Compile fire only when a maintained app's LOGIC drifted — approving that via Compile
+    // would silently accept an edit to a shipped workflow, defeating "shipped apps are form-only".
+    const maintained = app.publisher === 'floless' && !app.forked;
+    const drifted = app.runState === 'drift';
+    if ($wfForked) $wfForked.hidden = !app.forked;
+    if ($customizeBtn) $customizeBtn.hidden = !maintained;
+    if ($restoreBtn) $restoreBtn.hidden = !(maintained && drifted);
+    // Suppress Compile for a maintained, drifted app: approving an out-of-band logic edit via
+    // Compile would defeat "shipped apps are form-only". Disable as well as hide, so no programmatic
+    // click / queued event / shortcut can fire it through the hidden-but-enabled element.
+    if (maintained && drifted) { $compileBtn.hidden = true; $compileBtn.disabled = true; }
+    else $compileBtn.hidden = false;
+
     // Bake: package the workflow as a reusable agent. Gated on the same runnable
     // state as Run (baking a stale/uncompiled app makes no sense — the lock is
     // what the server reads to mirror inputs). Disabled-with-tooltip (teach the
@@ -669,6 +690,21 @@
     } catch (e) { reportErr(e); }
   }
 
+  // ≡ menu "New workflow…" — the create-from-scratch sibling of requestGuide(). No open
+  // workflow to target (none exists yet), so no currentId gate: relay the ask to the
+  // terminal AI the same house way (queue a request, copy the marked prompt, toast, light
+  // the requests pill). The UI never authors the workflow itself; the AI's
+  // floless-app-new-workflow skill does, step by step.
+  async function requestNewWorkflow() {
+    try {
+      const { request } = await api('/api/guide-new', { method: 'POST', body: '{}' });
+      const copied = await copyToClipboard(markedInstruction(request));
+      showToast(copied ? 'Building your workflow · copied to clipboard' : 'Building your workflow', 'ok');
+      appendNarration(`Asked your terminal AI to interview you and <strong>build a new workflow</strong> from scratch — watch the glowing <strong>requests</strong> pill (bottom-right), or switch to your terminal.${copied ? ' The prompt is also on your clipboard.' : ''}`);
+      loadRequests();
+    } catch (e) { reportErr(e); }
+  }
+
   // ── First-open spotlight (one-time per workflow) ────────────────────────────
   // Dims the canvas, raises the beacon, and points a small caption at it; Esc /
   // click-away / either button dismiss it for good. Slice 2 of the onboarding beacon.
@@ -852,6 +888,7 @@
         const aid = escapeAttr(a.id);
         html += `<div class="wf-option" role="option" id="wf-opt-${aid}" data-id="${aid}" data-baked="${a.baked ? '1' : ''}" data-search="${escapeAttr((a.id + ' ' + p).toLowerCase())}" tabindex="-1" aria-selected="false">`
           + `<span class="wf-option-name">${escapeHtml(a.id)}</span><span class="wf-option-meta">${meta}</span>`
+          + (a.forked ? `<span class="wf-fork-badge" data-tip="You forked this workflow — it no longer receives FloLess updates. You own its output.">yours</span>` : '')
           + `<span class="wf-option-actions">`
           + `<button type="button" class="wf-act act-edit" data-wf-act="rename" data-id="${aid}" tabindex="-1" data-tip="Rename" aria-label="Rename ${aid}">✎</button>`
           + `<button type="button" class="wf-act act-dup" data-wf-act="duplicate" data-id="${aid}" tabindex="-1" data-tip="Duplicate" aria-label="Duplicate ${aid}">⧉</button>`
@@ -1112,6 +1149,64 @@
     }
   }
 
+  // ── Fork / Restore: the maintained ⇄ owned boundary ──────────────────────────
+  // FORK crosses a maintained app to user-owned: it requires explicit liability acceptance (a ticked
+  // checkbox — informed consent for structural-steel output) and takes the app off the update channel.
+  // The .flo is NOT edited here; the user changes the workflow afterwards (via the terminal AI). RESTORE
+  // re-installs the official version over a forked/edited app and returns it to maintained.
+  async function forkWorkflow(id) {
+    closeCombo(false);
+    const res = await formModal({
+      title: 'Customize this workflow',
+      sub: 'Forking lets you change the workflow logic — but it takes it off the FloLess update channel. If you only need a different project’s inputs, use Duplicate (⧉) instead — duplicates stay maintained.',
+      fields: [{
+        type: 'checkbox',
+        name: 'accept',
+        label: 'I understand this is structural-steel software. I am responsible for verifying that any changes I make produce correct output before using the results on a real project.',
+        required: true,
+        value: false,
+      }],
+      okLabel: 'Fork & customize',
+    });
+    if (!res || res.accept !== true) return; // cancelled, or (defensive) terms not ticked
+    showToast('Forking…', 'ok');
+    try {
+      await api(`/api/app/${encodeURIComponent(id)}/fork`, { method: 'POST', body: JSON.stringify({ accept: true }) });
+      await loadApps();
+      if (currentId === id) await loadApp(id);
+      await refreshWorkflowUpdates(); // it just left the channel — drop any pending update pill
+      showToast('Forked — this workflow is now yours to edit. Run ⎙ Compile when you’re ready.', 'ok');
+    } catch (e) {
+      console.error(e);
+      showToast(e.message || 'Fork failed', 'warn');
+    }
+  }
+
+  async function restoreWorkflow(id) {
+    closeCombo(false);
+    const ok = await formModal({
+      title: 'Restore the official version?',
+      sub: 'Re-installs the official workflow and discards any changes made to its logic. Your saved inputs are kept.',
+      fields: [],
+      okLabel: 'Restore',
+    });
+    if (!ok) return;
+    showToast('Restoring…', 'ok');
+    try {
+      await api(`/api/app/${encodeURIComponent(id)}/restore`, { method: 'POST', body: JSON.stringify({}) });
+      await loadApps();
+      if (currentId === id) await loadApp(id);
+      await refreshWorkflowUpdates(); // back on the channel — re-offer any pending update
+      showToast('Restored to the official version.', 'ok');
+    } catch (e) {
+      console.error(e);
+      showToast(e.message || 'Restore failed', 'warn');
+    }
+  }
+
+  if ($customizeBtn) $customizeBtn.onclick = () => { if (currentId) forkWorkflow(currentId); };
+  if ($restoreBtn) $restoreBtn.onclick = () => { if (currentId) restoreWorkflow(currentId); };
+
   // ── app inputs + HTML Viewer ────────────────────────────────────────────────
 
   // The id of the report-viewer node — the terminal node a user double-clicks to
@@ -2150,6 +2245,11 @@
         const id = `fm-${f.name}`;
         const val = f.value != null ? String(f.value) : '';
         const ph = escapeHtml(f.placeholder || '');
+        // A consent checkbox renders inline (label beside the box, not above) — used for the
+        // fork liability terms. `required: true` gates the OK button until it's ticked.
+        if (f.type === 'checkbox') {
+          return `<label class="modal-check" for="${id}"><input type="checkbox" id="${id}" data-fm-check="${escapeHtml(f.name)}"${f.value ? ' checked' : ''}><span>${escapeHtml(f.label || f.name)}</span></label>`;
+        }
         let ctl;
         if (f.type === 'images') {
           ctl = `<div class="fm-images" data-fm-images="${escapeHtml(f.name)}">
@@ -2293,9 +2393,20 @@
         const file = fileItems[0].getAsFile();
         if (entry && file) entry.setFile(file);
       };
+      // Required consent checkboxes (e.g. the fork liability terms) disable OK until ticked.
+      const requiredChecks = Array.from($body.querySelectorAll('[data-fm-check]')).filter((el) => {
+        const f = fields.find((x) => x.name === el.dataset.fmCheck);
+        return f && f.required;
+      });
+      if (requiredChecks.length) {
+        const syncOkGate = () => { $ok.disabled = requiredChecks.some((el) => !el.checked); };
+        requiredChecks.forEach((el) => { el.onchange = syncOkGate; });
+        syncOkGate();
+      }
       const collect = () => {
         const out = {};
         $body.querySelectorAll('[data-fm]').forEach((el) => { out[el.dataset.fm] = el.value; });
+        $body.querySelectorAll('[data-fm-check]').forEach((el) => { out[el.dataset.fmCheck] = el.checked; });
         imageStates.forEach((entry, name) => { out[name] = entry.state; });
         fileStates.forEach((entry, name) => {
           out[name] = entry.st.mode === 'empty' ? '' : entry.st.value;
@@ -2308,7 +2419,7 @@
         _formModalOpen = false;
         hideModal($formModal);
         $ok.onclick = null; $cancel.onclick = null; $formModal.onclick = null; $formModal.onkeydown = null; $body.onpaste = null;
-        $ok.classList.remove('danger'); $ok.classList.add('primary'); $cancel.classList.remove('primary'); // reset chrome for the next caller
+        $ok.classList.remove('danger'); $ok.classList.add('primary'); $cancel.classList.remove('primary'); $ok.disabled = false; // reset chrome for the next caller
         resolve(result);
       };
       $ok.onclick = () => done(collect());
@@ -2319,7 +2430,7 @@
       // commits only for a normal form (never a danger confirm; never inside a textarea).
       $formModal.onkeydown = (e) => {
         if (e.key === 'Escape') { e.preventDefault(); done(null); }
-        else if (e.key === 'Enter' && !danger && e.target.tagName !== 'TEXTAREA') { e.preventDefault(); done(collect()); }
+        else if (e.key === 'Enter' && !danger && e.target.tagName !== 'TEXTAREA' && !$ok.disabled) { e.preventDefault(); done(collect()); }
       };
       // Setup succeeded and the modal is shown — mark it open now. Setting it here (not
       // before the synchronous setup above) means a setup throw can't latch the guard for
@@ -2426,7 +2537,7 @@
   $promptSel.onchange = () => { loadApp($promptSel.value).catch(reportErr); };
 
   $compileBtn.onclick = async () => {
-    if (!currentId || $compileBtn.disabled) return;
+    if (!currentId || $compileBtn.disabled || $compileBtn.hidden) return; // hidden = suppressed for a maintained drift
     const id = currentId;
     $compileBtn.disabled = true;
     const prev = $compileBtn.textContent;
@@ -2736,6 +2847,7 @@
   // app.js's doOpen/doSave are reassigned from this file).
   const _handleMenuAction = handleMenuAction;
   handleMenuAction = function (action) {
+    if (action === 'new-workflow') { requestNewWorkflow(); return; }
     if (action === 'graft') { openGraftModal(); return; }
     if (action === 'bake') { openBakeModal(); return; }
     if (action === 'import') { triggerImport(); return; }
@@ -4318,6 +4430,9 @@
     if (req.type === 'guide') {
       return `Walk me through the floless workflow "${req.appId}" — explain in plain English what it does and how to run it (set its inputs → Compile → ▶ Run). Use your floless-app-${req.appId} skill if one exists; otherwise read the workflow's own description and node notes from GET /api/app/${req.appId} and explain from those. This is a guided explanation — don't change anything.`;
     }
+    if (req.type === 'new-workflow') {
+      return `Help me build a brand-new floless workflow from scratch, step by step, with your floless-app-new-workflow skill. Ask me what I want it to do, then before writing any node confirm the agents it needs are installed (offer to install a missing one from the catalogue, or to report a not-yet-existing agent as an idea). Author the .flo node by node, verifying each step is correct (plain-English descriptions, validate, compile, a real run), and finish by installing → Compile → ▶ Run so I can see it work and approve.`;
+    }
     return '';
   }
 
@@ -4331,6 +4446,8 @@
     // The guided-tour ask is picked up by onboarding; the instruction body names the
     // per-app floless-app-<appId> skill for depth when one exists.
     guide: 'floless-app-onboarding',
+    // Build-a-workflow-from-scratch: its own guide skill (interview → author → verify).
+    'new-workflow': 'floless-app-new-workflow',
   };
 
   // The COPIED form of a request: instructionFor() prefixed with a self-identifying
@@ -4425,7 +4542,7 @@
       return;
     }
     $list.innerHTML = pendingRequests.map((r) => {
-      const label = r.type === 'use-template' ? 'template' : r.type === 'ui-customize' ? 'dashboard' : r.type === 'rebake' ? 're-bake' : r.type === 'guide' ? 'guide' : 'tweak';
+      const label = r.type === 'use-template' ? 'template' : r.type === 'ui-customize' ? 'dashboard' : r.type === 'rebake' ? 're-bake' : r.type === 'guide' ? 'guide' : r.type === 'new-workflow' ? 'new workflow' : 'tweak';
       const badgeCls = r.type === 'tweak' || r.type === 'ui-customize' || r.type === 'rebake' ? 'req-type req-type-tweak' : 'req-type';
       const target = r.type === 'tweak' && r.nodeId
         ? ` · node <code>${escapeHtml(r.nodeId)}</code>`

package/dist/web/index.html

@@ -55,6 +55,9 @@
         </div>
         <select id="prompt-select" hidden></select>
         <button id="wf-update" class="wf-update-pill" type="button" hidden aria-haspopup="dialog"></button>
+        <!-- Shown only when the OPEN workflow is forked (user-owned, off the update channel). Purely
+             informational (the badge of ownership); the picker row carries the same "yours" cue. -->
+        <span id="wf-forked" class="wf-forked-pill" hidden role="status" data-tip="You forked this workflow — it no longer receives FloLess updates. You are responsible for verifying its output.">yours · off updates</span>
         <!-- 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>
@@ -66,6 +69,12 @@
           <span class="guide-beacon-label">Start here</span>
         </button>
         <span class="run-state" id="run-state" role="status" aria-live="polite"></span>
+        <!-- Restore + Customize: shown for a MAINTAINED (publisher:floless, non-forked) app. Restore
+             appears only when its logic drifted (re-installs the official version); Customize (fork) is
+             always available for a maintained app. When shown on drift they replace Compile, so a
+             shipped app's logic edit can't be silently approved (form-only). -->
+        <button id="restore-btn" type="button" hidden data-tip="Restore the official workflow — undoes any out-of-band edits and re-arms Run">↺ Restore</button>
+        <button id="customize-btn" type="button" hidden data-tip="Fork this workflow to edit it yourself — takes it off the FloLess update channel">Customize…</button>
         <button id="compile-btn" data-tip="Compile + approve → freeze the .lock">⎙ Compile</button>
         <button id="sim-btn" data-tip="Simulate: stub every node from its output schema — no live host is contacted. Validates the workflow's composition end-to-end, even when the real agents aren't connected yet.">Simulate</button>
         <button id="run-btn" data-tip="Run the workflow for real against the live host (uses the inputs; renders the report node in the HTML Viewer)">▶ Run workflow</button>
@@ -276,6 +285,10 @@
       <span class="menu-label">Save inputs</span>
       <span class="menu-kbd">Ctrl+S</span>
     </button>
+    <button class="menu-item" data-action="new-workflow" role="menuitem">
+      <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 18v-6"/></svg></span>
+      <span class="menu-label">New workflow…</span>
+    </button>
     <button class="menu-item" data-action="import" role="menuitem">
       <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3v12m0 0-4-4m4 4 4-4"/><path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/></svg></span>
       <span class="menu-label">Import workflow…</span>

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

@@ -16,6 +16,7 @@
  */
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/OrbitControls.js';
+import { Brush, Evaluator, SUBTRACTION } from 'three-bvh-csg';
 import { snapCandidates, snapPoint, planPointToWp, memberGeometry, elevationLevels, dim3dGeom } from './steel-3d-core.js';
 
 let renderer, scene, perspCam, orthoCam, camera, controls, root, api, canvasEl, ro, rafId, grid, raycaster, downXY, lastPick = '(none)';
@@ -126,7 +127,7 @@ function init(canvas, theApi) {
   window.addEventListener('pointermove', onMove); // window so a drag keeps tracking off-canvas
   window.addEventListener('pointerup', onUp);
   canvas.addEventListener('pointermove', onHoverMove); // canvas-only: cursor + hover readout when idle
-  canvas.addEventListener('dblclick', onDblClick);     // Tekla "set view point": dbl-click sets the orbit/zoom pivot
+  canvas.addEventListener('dblclick', onDblClick);     // "zoom to detail": dbl-click a part zooms to it (empty = no-op)
   window.addEventListener('keydown', onKey);           // Tekla keyboard nav: arrows pan, Ctrl/Shift+arrows rotate
   ro = new ResizeObserver(resize); ro.observe(canvas.parentElement || canvas);
   initCube();
@@ -223,10 +224,98 @@ function placeMember(mesh, a, b, el) {
   mesh.position.copy(A).addScaledVector(dir, len / 2);
 }
 
+// ---- connection parts (base-plate slice) — the new scene-element kinds the connection engine
+// (server/steel-joints.ts) emits: a plate with holes, anchor rods, a weld bead. These are DERIVED
+// geometry, not contract members, so buildFromScene marks them non-editable (excluded from picks).
+
+// A flat plate (with punched holes) extruded along its normal, oriented by its in-plane axes.
+function placePlate(mesh, el) {
+  const w = Math.max(el.width || 10, 1), d = Math.max(el.depth || 10, 1), t = Math.max(el.thickness || 5, 0.5);
+  const hw = w / 2, hd = d / 2;
+  const shape = new THREE.Shape();
+  shape.moveTo(-hw, -hd); shape.lineTo(hw, -hd); shape.lineTo(hw, hd); shape.lineTo(-hw, hd); shape.closePath();
+  for (const h of el.holes || []) { // bolts own the holes — punch one per fastener
+    const r = Math.max((h.d || 0) / 2, 0.1);
+    const hole = new THREE.Path(); hole.absarc(h.u || 0, h.v || 0, r, 0, Math.PI * 2, true);
+    shape.holes.push(hole);
+  }
+  const g = new THREE.ExtrudeGeometry(shape, { depth: t, bevelEnabled: false });
+  g.translate(0, 0, -t / 2); // centre the slab on the plate plane
+  mesh.geometry = g;
+  const u = V(...(el.uDir || [1, 0, 0])).normalize();
+  const v = V(...(el.vDir || [0, 1, 0])).normalize();
+  const n = new THREE.Vector3().crossVectors(u, v).normalize(); // extrude axis = plate normal
+  mesh.quaternion.setFromRotationMatrix(new THREE.Matrix4().makeBasis(u, v, n));
+  mesh.position.set(...(el.center || [0, 0, 0]));
+}
+
+// A cylinder between two points (anchor rod / bolt shank).
+function placeBar(mesh, a, b, r, radial) {
+  const A = V(a[0], a[1], a[2]), B = V(b[0], b[1], b[2]);
+  const dir = new THREE.Vector3().subVectors(B, A); const len = dir.length() || 1; dir.normalize();
+  mesh.geometry = new THREE.CylinderGeometry(r, r, len, radial || 16, 1, false); // axis = local +Y
+  mesh.quaternion.setFromUnitVectors(_YA, dir);
+  mesh.position.copy(A).addScaledVector(dir, len / 2);
+}
+
+// A fillet weld traced as a thin bead along its path — STRAIGHT segments (no CatmullRom rounding) so it
+// hugs the actual edge. Path points are already world mm. `closed` (default true) wraps end→start (the
+// base-plate column outline). `closed:false` = an OPEN polyline (the shear plate's straight edge weld) —
+// must NOT wrap: a 2-point wrap doubles back into a cusp that degenerates the tube (an invisible weld).
+function placeWeld(mesh, el) {
+  const pts = (el.path || []).map((p) => V(p[0], p[1], p[2]));
+  if (pts.length < 2) { mesh.geometry = new THREE.BufferGeometry(); return; }
+  const r = Math.max((el.leg || 6) * 0.6, 2); // enough girth to read as a fillet bead, not a wire ring
+  const closed = el.closed !== false; // default = a closed loop (back-compat with the base-plate weld)
+  const cp = new THREE.CurvePath();
+  const last = closed ? pts.length : pts.length - 1; // closed → wrap the final segment; open → stop one short
+  for (let i = 0; i < last; i++) { // skip any zero-length segment (avoids NaN tube frames)
+    const a = pts[i], b = pts[(i + 1) % pts.length];
+    if (a.distanceToSquared(b) > 1e-6) cp.add(new THREE.LineCurve3(a, b));
+  }
+  if (!cp.curves.length) { mesh.geometry = new THREE.BufferGeometry(); return; }
+  mesh.geometry = new THREE.TubeGeometry(cp, Math.max(pts.length * 6, 24), r, 8, false);
+  mesh.position.set(0, 0, 0); // geometry carries world coordinates
+}
+
+// A hex nut: a 6-sided prism swept from→to. acrossFlats (wrench size) → circumradius = AF/√3.
+function placeNut(mesh, el) {
+  placeBar(mesh, el.from, el.to, Math.max((el.acrossFlats || 20) / Math.sqrt(3), 0.5), 6);
+}
+
+// A flat washer: an annulus (outer ⌀ with an inner hole) swept from→to along its axis.
+function placeWasher(mesh, el) {
+  const A = V(el.from[0], el.from[1], el.from[2]), B = V(el.to[0], el.to[1], el.to[2]);
+  const dir = new THREE.Vector3().subVectors(B, A); const len = dir.length() || 1; dir.normalize();
+  const ro = Math.max((el.dOuter || 20) / 2, 0.5), ri = Math.min(Math.max((el.dInner || 10) / 2, 0.1), ro - 0.2);
+  const shape = new THREE.Shape(); shape.absarc(0, 0, ro, 0, Math.PI * 2, false);
+  const hole = new THREE.Path(); hole.absarc(0, 0, ri, 0, Math.PI * 2, true); shape.holes.push(hole);
+  mesh.geometry = new THREE.ExtrudeGeometry(shape, { depth: len, bevelEnabled: false, curveSegments: 24 });
+  mesh.quaternion.setFromUnitVectors(_ZA, dir); // shape-plane normal (local +Z) → washer axis
+  mesh.position.copy(A); // extrudes from `from` toward `to`
+}
+
+// Build a mesh for one scene element by kind: a member box (default) or a connection part. Returns
+// false for an unknown kind so the caller skips it (forward-compatible with later part kinds).
+function placeElement(mesh, el) {
+  switch (el.kind || 'box') {
+    case 'box': placeMember(mesh, el.from, el.to, el); return true;
+    case 'plate': placePlate(mesh, el); return true;
+    case 'rod': placeBar(mesh, el.from, el.to, Math.max((el.d || 20) / 2, 0.5), 16); return true;
+    case 'nut': placeNut(mesh, el); return true;
+    case 'washer': placeWasher(mesh, el); return true;
+    case 'weld': placeWeld(mesh, el); return true;
+    default: return false;
+  }
+}
+
 function materialFor(groupKey) {
   if (!baseMat.has(groupKey)) {
     const col = groupColor.get(groupKey) || new THREE.Color(0x94a3b8);
-    baseMat.set(groupKey, new THREE.MeshStandardMaterial({ color: col, metalness: 0.1, roughness: 0.75 }));
+    // Fasteners (anchor rods / bolts / nuts / washers) read more metallic (zinc-plated); plates/welds/members stay matte.
+    const metallic = groupKey === 'anchor' || groupKey === 'bolt' || groupKey === 'nut' || groupKey === 'washer';
+    const metal = metallic ? 0.5 : 0.1, rough = metallic ? 0.4 : 0.75;
+    baseMat.set(groupKey, new THREE.MeshStandardMaterial({ color: col, metalness: metal, roughness: rough }));
   }
   return baseMat.get(groupKey);
 }
@@ -240,6 +329,34 @@ function clearRoot() {
   meshById.clear();
 }
 
+// Subtract each cope (a `cut` part) from a member's solid via CSG — a real coped beam end. Cut boxes are
+// world-space (center/uDir/vDir/width/depth/thickness); we transform them into the member's LOCAL frame so
+// the result keeps the member's placement (drag/select still work), then subtract. On any CSG failure the
+// member is left uncoped rather than breaking the whole scene.
+const _csgEval = new Evaluator();
+_csgEval.useGroups = false; // one solid out → the member's single material applies
+function applyCopes(mesh, cuts) {
+  try {
+    mesh.updateMatrix(); // local TRS (root is identity → local == world mm)
+    const invMember = mesh.matrix.clone().invert();
+    let result = new Brush(mesh.geometry); result.updateMatrixWorld(true); // member-local, identity
+    for (const cut of cuts) {
+      const pad = 0.6; // over-cut so coplanar faces don't leave slivers
+      const g = new THREE.BoxGeometry(Math.max(cut.width || 1, 1) + pad, Math.max(cut.depth || 1, 1) + pad, Math.max(cut.thickness || 1, 1) + pad);
+      const u = V(...(cut.uDir || [1, 0, 0])).normalize(), vv = V(...(cut.vDir || [0, 1, 0])).normalize();
+      const n = new THREE.Vector3().crossVectors(u, vv).normalize();
+      const world = new THREE.Matrix4().makeBasis(u, vv, n); world.setPosition(cut.center[0], cut.center[1], cut.center[2]);
+      const b = new Brush(g);
+      invMember.clone().multiply(world).decompose(b.position, b.quaternion, b.scale); // cut → member-local
+      b.updateMatrixWorld(true);
+      result = _csgEval.evaluate(result, b, SUBTRACTION);
+      g.dispose();
+    }
+    mesh.geometry.dispose();
+    mesh.geometry = result.geometry; // member-local solid carrying the notch(es); mesh keeps its placement
+  } catch (e) { console.warn('[steel-3d] cope CSG failed; member left uncoped', mesh.userData && mesh.userData.id, e); }
+}
+
 function buildFromScene(sc) {
   clearRoot();
   for (const mat of baseMat.values()) mat.dispose(); // shared per-profile materials from the prior build
@@ -247,10 +364,22 @@ function buildFromScene(sc) {
   sceneGroups = (sc.groups || []).map((g) => ({ key: g.key, label: g.label, color: g.color || '#94a3b8' }));
   for (const g of sceneGroups) groupColor.set(g.key, new THREE.Color(g.color));
   const box = new THREE.Box3();
+  // Copes (`cut` parts) are SUBTRACTIVE — they notch their target member's mesh, they don't render as
+  // standalone parts. Collect them by target member id first, then subtract once the member mesh is built.
+  const cutsByMember = new Map();
+  for (const el of sc.elements || []) {
+    if (el && el.kind === 'cut' && el.member) {
+      if (!cutsByMember.has(el.member)) cutsByMember.set(el.member, []);
+      cutsByMember.get(el.member).push(el);
+    }
+  }
   for (const el of sc.elements || []) {
     const mesh = new THREE.Mesh(undefined, materialFor(el.group));
-    placeMember(mesh, el.from, el.to, el); // real cross-section (I / channel / angle / tube / box) from the profile
+    if (!placeElement(mesh, el)) continue; // unknown kind → skip (a `cut` is one of these: applied below, never a standalone mesh)
+    const memberCuts = cutsByMember.get(el.id);
+    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
     root.add(mesh); meshById.set(el.id, mesh);
     box.expandByObject(mesh);
   }
@@ -462,14 +591,25 @@ function reflectDimBar() {
   reflectDimAxisBar();
 }
 function reflectDimAxisBar() { document.querySelectorAll('#m3dDimAxis button').forEach((x) => x.classList.toggle('on', x.dataset.d3axis === dimAxis3d)); }
-// Tekla "set view point": double-click a member → make that point the orbit/zoom pivot.
+// "Zoom to detail": double-click a part → zoom to a tight region around the click point so a connection
+// fills the view (members AND their derived connection parts are valid targets), keeping the current view
+// direction. Empty space → no-op (use the Fit button / Home for fit-all, so a stray double-click can't
+// teleport the camera). Replaces the old set-orbit-pivot — zoom-to sets the pivot anyway, and
+// zoomToCursor already lets the wheel zoom toward the cursor.
 function onDblClick(e) {
   camera.updateMatrixWorld(); root.updateMatrixWorld(true);
   const rect = canvasEl.getBoundingClientRect();
   const ndc = new THREE.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
   raycaster.setFromCamera(ndc, camera);
-  const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false);
-  if (hits.length) { controls.target.copy(hits[0].point); controls.update(); }
+  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;
+  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
+  const half = Math.min(Math.max(sect * 3, 300), 2500); // a detail-scale zoom box (clamped sane)
+  const viewDir = camera.position.clone().sub(controls.target).normalize(); // keep the current view orientation
+  fitCamera(new THREE.Box3().setFromCenterAndSize(p, new THREE.Vector3(half * 2, half * 2, half * 2)), viewDir.lengthSq() > 0.5 ? viewDir : undefined);
 }
 
 function setSelection(ids) {
@@ -636,7 +776,7 @@ function pickAt(cx, cy) {
   const rect = canvasEl.getBoundingClientRect();
   const ndc = new THREE.Vector2(((cx - rect.left) / rect.width) * 2 - 1, -((cy - rect.top) / rect.height) * 2 + 1);
   raycaster.setFromCamera(ndc, camera);
-  const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible), false);
+  const hits = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible && !m.userData.derived), false);
   lastPick = hits.length ? hits[0].object.userData.id : null;
   return lastPick;
 }
@@ -855,7 +995,7 @@ function membersInRect(x0, y0, x1, y1) {
   const lo = { x: Math.min(x0, x1), y: Math.min(y0, y1) }, hi = { x: Math.max(x0, x1), y: Math.max(y0, y1) };
   const out = [];
   for (const [id, m] of meshById) {
-    if (!m.visible) continue;
+    if (!m.visible || m.userData.derived) continue; // derived connection parts aren't member-selectable (mirrors pickAt; dbl-click-zoom deliberately includes them)
     const w = m.getWorldPosition(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(id);
@@ -959,7 +1099,7 @@ function updateStatusChip() {
   const showId = hoverId || (selIds.size === 1 ? [...selIds][0] : null);
   if (showId) { const m = members().find((x) => x.id === showId); txt = m ? `${m.id} · ${m.profile || '—'}` : ''; }
   else if (selIds.size > 1) txt = `${selIds.size} members selected`;
-  else txt = 'Drag a member to move · ends to stretch · Alt+drag elevation · right-drag orbits';
+  else txt = 'Drag to move · ends to stretch · Alt+drag elevation · right-drag orbit · dbl-click to zoom in';
   hoverChip.textContent = txt;
   hoverChip.style.left = (rect.left + rect.width / 2) + 'px'; hoverChip.style.transform = 'translateX(-50%)';
   hoverChip.style.top = (rect.bottom - 30) + 'px';