@floless/app 0.27.0 → 0.29.0

package/dist/schemas/steel.takeoff.v1.schema.json

@@ -0,0 +1,148 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://floless.app/schemas/steel.takeoff/v1",
+  "title": "steel.takeoff/v1",
+  "description": "Typed contract emitted by the steel-takeoff-us reader and rendered by the floless contract editor. The contract is the single source of truth; the editor is its view, the exporters (IFC/Tekla/viewer-3d) consume it, Approve bakes the .lock. A multi-plan container: each plan is one framing sheet. All coordinates are DISPLAY space; elevations are decimal inches. Confidential rasters ride inside as base64 and are never committed. Field reference: docs/superpowers/specs/2026-06-17-steel-takeoff-agent-guidance.md §3.",
+  "type": "object",
+  "required": ["type", "plans"],
+  "additionalProperties": true,
+  "properties": {
+    "type": { "const": "steel.takeoff/v1", "description": "Renderer-registry discriminator." },
+    "active": { "type": "integer", "description": "Index into plans of the active sheet." },
+    "palette": { "type": "array", "items": { "type": "string" }, "description": "Default per-index profile colours." },
+    "weights": { "type": "object", "additionalProperties": { "type": ["number", "null"] }, "description": "profile -> plf (pounds per linear foot), from the AISC lookup. null for an unresolved profile (e.g. an unsized moment-frame mark) that has no weight yet." },
+    "profile_colors": { "type": "object", "additionalProperties": { "type": "string" }, "description": "profile -> #hex user overrides." },
+    "sheet_previews": { "type": "object", "additionalProperties": { "type": "string" }, "description": "sheet -> base64 JPEG full-sheet preview (title block excluded)." },
+    "custom_details": { "type": "object", "additionalProperties": { "type": "string" }, "description": "user-created detail name -> base64 JPEG." },
+    "moment_frames": { "type": "array", "description": "Moment-frame schedule from the frame-elevation sheets." },
+    "detail_bubbles": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": { "$ref": "#/$defs/point2" }
+      },
+      "description": "sheet -> { detail number -> normalized [fx,fy] bubble anchor }."
+    },
+    "plans": { "type": "array", "items": { "$ref": "#/$defs/plan" } }
+  },
+  "$defs": {
+    "point2": {
+      "type": "array",
+      "items": { "type": "number" },
+      "minItems": 2,
+      "maxItems": 2,
+      "description": "An [x,y] pair in display space (or [fx,fy] normalized for bubbles)."
+    },
+    "plan": {
+      "type": "object",
+      "required": ["sheet", "members"],
+      "additionalProperties": true,
+      "properties": {
+        "sheet": { "type": "string", "description": "Sheet number, e.g. S-202." },
+        "title": { "type": "string" },
+        "clip": {
+          "type": "array",
+          "items": { "type": "number" },
+          "minItems": 4,
+          "maxItems": 4,
+          "description": "[x0,y0,x1,y1] display-space crop of the framing area."
+        },
+        "pt_per_ft": { "type": "number", "description": "Display points per foot (the drawing scale)." },
+        "default_tos": { "type": "number", "description": "Default top-of-steel elevation in inches for blank ends on this plan." },
+        "raster_b64": { "type": "string", "description": "Base64 raster of the framing area. CONFIDENTIAL — never committed." },
+        "segments": { "type": "array", "items": { "$ref": "#/$defs/segment" } },
+        "labels": { "type": "array", "items": { "$ref": "#/$defs/label" } },
+        "details": { "type": "array", "items": { "$ref": "#/$defs/detail" } },
+        "tos_callouts": { "type": "array", "items": { "$ref": "#/$defs/tos_callout" } },
+        "members": { "type": "array", "items": { "$ref": "#/$defs/member" } }
+      }
+    },
+    "segment": {
+      "type": "object",
+      "required": ["id", "a", "b"],
+      "additionalProperties": true,
+      "properties": {
+        "id": { "type": "string" },
+        "a": { "$ref": "#/$defs/point2" },
+        "b": { "$ref": "#/$defs/point2" },
+        "o": { "enum": ["H", "V", "D"], "description": "Orientation: horizontal / vertical / diagonal." }
+      }
+    },
+    "label": {
+      "type": "object",
+      "required": ["text", "disp"],
+      "additionalProperties": true,
+      "properties": {
+        "text": { "type": "string" },
+        "disp": { "$ref": "#/$defs/point2" }
+      }
+    },
+    "detail": {
+      "type": "object",
+      "required": ["text"],
+      "additionalProperties": true,
+      "properties": {
+        "text": { "type": "string", "description": "Callout, e.g. \"2-S-302\"." },
+        "disp": { "$ref": "#/$defs/point2" }
+      }
+    },
+    "tos_callout": {
+      "type": "object",
+      "required": ["elev_in"],
+      "additionalProperties": true,
+      "properties": {
+        "elev_in": { "type": "number", "description": "Top-of elevation in inches." },
+        "type": { "enum": ["TOS", "TOD", "TOC"], "description": "Top of steel / deck / concrete." },
+        "disp": { "$ref": "#/$defs/point2" }
+      }
+    },
+    "member": {
+      "type": "object",
+      "required": ["id", "profile", "wp"],
+      "additionalProperties": true,
+      "properties": {
+        "id": { "type": "string" },
+        "profile": { "type": "string", "description": "AISC designation (e.g. W16X26) or an unresolved mark (e.g. MF). Empty string allowed for an unprofiled member." },
+        "wp": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/point2" },
+          "minItems": 2,
+          "maxItems": 2,
+          "description": "Work-point endpoints [[x,y],[x,y]] in display space."
+        },
+        "angle": { "enum": ["H", "V", "D"] },
+        "role": { "enum": ["beam", "column"], "description": "Defaults to beam when absent." },
+        "rfi": { "type": "boolean", "description": "True when the size is unresolved (excluded from the BOM)." },
+        "mf": { "type": "boolean", "description": "Moment-frame member (persistent flag)." },
+        "ends": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/end" },
+          "minItems": 2,
+          "maxItems": 2,
+          "description": "Per-end metadata (beam variant); index 0 and 1 match wp's two endpoints."
+        },
+        "col": { "$ref": "#/$defs/col" }
+      }
+    },
+    "end": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "tos": { "type": ["number", "null"], "description": "Top-of-steel elevation in inches at this end." },
+        "note": { "type": "string", "description": "Connection note (e.g. moment, shear, braced)." },
+        "tosDef": { "type": "boolean", "description": "True = follows the plan default; false = read from a drawing callout or set by hand." },
+        "detail": { "type": "string", "description": "Connection detail reference, e.g. \"5-S504\"." }
+      }
+    },
+    "col": {
+      "type": "object",
+      "additionalProperties": true,
+      "properties": {
+        "bos": { "type": ["number", "null"], "description": "Bottom-of-steel elevation in inches." },
+        "tos": { "type": ["number", "null"], "description": "Top-of-steel elevation in inches." },
+        "note": { "type": "string" },
+        "detail": { "type": "string" }
+      }
+    }
+  }
+}

package/dist/skills/floless-app-tweak-contract/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: floless-app-tweak-contract
+description: This skill should be used when there is a pending floless `tweak-contract` request — the user typed an instruction in the steel-takeoff contract editor and clicked Send (Ask AI). Also triggers on asks like "edit the steel takeoff contract via AI", "adjust the steel takeoff in the contract editor", "the user asked me to change the steel contract", "pick up my tweak-contract request", "update the member profile in the contract". It teaches the host AI to read the request, fetch the current steel.takeoff/v1 contract, apply the instruction (and any pasted screenshots), PUT the updated contract back, and resolve the request.
+metadata:
+  version: 0.1.0
+---
+
+# Handle a `tweak-contract` request (Slice 2 AI round-trip)
+
+## What this is
+
+The floless.app steel-takeoff contract editor surfaces an **Ask AI** panel: the user types
+an instruction ("change all W12X26 to W14X30", "add a new beam on sheet S-202", "mark this
+member as moment-frame") and optionally pastes screenshots, then clicks **Send**. That records
+a `tweak-contract` request in the reverse channel. You pick it up here, edit the contract
+document, write it back, and the editor reloads it.
+
+The contract is `~/.floless/contracts/<appId>.json`, a `steel.takeoff/v1` document. It is the
+single source of truth — the editor is its view, the exporters (IFC/Tekla/viewer-3d) consume
+it, and **Approve** bakes the lock. A PUT writeback is schema-validated on the server; a 400
+means invalid — fix and retry.
+
+> **Pasted a request?** If the user pastes a message with a `[floless-request type=tweak-contract id=…]`
+> marker, that is a request **copied from the FloLess Dashboard**. Resolve it via
+> `GET /api/requests` (match the id) — don't act on the raw marker — then follow the loop
+> below and `DELETE` it when done.
+
+## The loop
+
+1. **Find the request.** `GET http://localhost:<port>/api/requests` → find the entry with
+   `type: "tweak-contract"`. It carries:
+   - `id` — the request id (used to DELETE it when done)
+   - `appId` — which app's contract to edit
+   - `instruction` — the user's plain-English ask
+   - `snapshots` — absolute paths to screenshot files saved under
+     `~/.floless/requests/<id>/` (PNG/JPEG/WebP). These are the key input — the user
+     pasted them to show you exactly which region or member they mean.
+
+   The port is the same base URL the floless.app server is on (check `/api/health` or use
+   the port the skill context provides — typically 4317 for the installed app, 4318 for the
+   dev server).
+
+2. **Read the current contract.** `GET http://localhost:<port>/api/contract/<appId>` returns
+   the full `steel.takeoff/v1` JSON document. You can also read it directly from
+   `~/.floless/contracts/<appId>.json`.
+
+   The schema is at `schemas/steel.takeoff.v1.schema.json` (in the floless.app repo) and the
+   field reference is `docs/superpowers/specs/2026-06-17-steel-takeoff-agent-guidance.md` §3.
+   Key shapes you'll edit:
+   - Top-level: `type` (const `"steel.takeoff/v1"`), `active`, `palette`, `weights{profile→plf}`,
+     `profile_colors{profile→#hex}`, `plans[]`
+   - `plans[i]`: `sheet`, `title`, `clip`, `pt_per_ft`, `default_tos`, `segments[]`,
+     `labels[]`, `details[]`, `tos_callouts[]`, `members[]`
+   - `members[j]`: `id` (required), `profile` (AISC designation e.g. `W16X26` or mark e.g. `MF`),
+     `wp` ([[x,y],[x,y]] work-point endpoints in display space), `angle` (`H`|`V`|`D`),
+     `role` (`beam`|`column`), `rfi` (true = no resolved AISC size), `mf` (moment-frame flag),
+     `ends[2]` (per-end: `tos` in inches, `note`, `tosDef`, `detail`),
+     `col` (column variant: `bos`, `tos`, `note`, `detail`)
+
+3. **Understand the ask.** Read the `instruction` text AND open the `snapshots[]` image files
+   with your vision — the screenshots are the primary input. They show the user pointing at a
+   specific member, region, or annotation on the canvas. What the text alone says ("change this
+   beam") only resolves with the visual context ("this beam" = the one circled in red on the
+   screenshot).
+
+4. **Produce the edit.** Modify the contract JSON to satisfy the instruction:
+   - Profile changes: update `members[j].profile`; if the new profile resolves in the AISC
+     table update `weights` too (plf from the AISC designation). Set `rfi: false` when you
+     assign a real AISC size; `rfi: true` for marks (`MF`, `BF`) or unknowns.
+   - Add a member: append to `plans[i].members[]` with a valid `{id, profile, wp}` minimum.
+     Use a unique `id` (e.g. `m-<uuid-fragment>`). Infer geometry from context/screenshot.
+   - Delete a member: remove it from `members[]`.
+   - Elevation changes: update `ends[].tos` (decimal inches) or `col.tos`/`col.bos`.
+     `tosDef: false` means the value came from the drawing, not the plan default.
+   - Connection notes / detail refs: update `ends[].note` or `ends[].detail` (e.g. `"5-S504"`).
+   - Flag adjustments: `mf: true` for moment-frame members; `rfi: true` for unresolved sizes.
+   - **Preserve everything you're not changing** — v1 is a full-document writeback; partial
+     objects are not supported.
+
+5. **Write it back.** `PUT http://localhost:<port>/api/contract/<appId>` with the full updated
+   document (Content-Type: application/json). A **400** response means schema-invalid — read
+   the error, fix the structure against `schemas/steel.takeoff.v1.schema.json`, and retry.
+   On success the server broadcasts a `contract-changed` event; the editor picks it up and
+   prompts to reload.
+
+6. **Tell the user.** Summarize what you changed (e.g. "Updated W12X26 → W14X30 on 4 beams
+   in sheet S-202; updated `weights` entry to 30 plf"). Tell them to click **↻ Reload** in the
+   editor (or accept the reload banner) to see the change. Then resolve the request:
+
+   `DELETE http://localhost:<port>/api/requests/<id>`
+
+   so it doesn't reappear in the queue.
+
+## Guardrails
+
+- **Schema is the guardrail.** A 400 on PUT is the server rejecting invalid JSON — don't
+  skip it. Read `schemas/steel.takeoff.v1.schema.json` and fix the issue before retrying.
+- **Preserve unedited data.** Coordinates, rasters (`raster_b64`), detail bubbles, sheet
+  previews — if you're not changing them, copy them through unchanged. Dropping fields silently
+  corrupts the contract.
+- **Coordinates are display space, elevations are decimal inches.** Don't confuse them. Member
+  geometry (`wp`, `segments`) is in display-space points (not feet, not native PDF coords).
+  `tos` / `bos` / `elev_in` fields are always decimal inches (`16.5` = 16½ inches).
+- **Screenshots don't lie; instructions generalize.** If the screenshot shows a specific member
+  and the instruction says "this beam", resolve "this" from the visual, not a guess.
+- **Never auto-approve.** Writing the contract back is the AI act; the user still clicks
+  **Approve** in the editor to bake the lock. You write; they gate.
+- **Thin-UI contract holds.** The browser recorded intent + screenshots; the brain is you, in
+  the terminal. The editor never edits the contract directly (it's read-only from its side
+  until the user clicks Save after a manual edit — and that is a different path). This skill
+  is the AI path.

package/dist/web/app.css

@@ -344,6 +344,9 @@
     overflow: hidden;
     min-width: 0;
     position: relative;
+    /* Touch: the canvas is a one-finger-pan + pinch-zoom surface on phones (handled in app.js);
+       touch-action:none stops the browser claiming the gesture first. .dashboard re-enables scroll. */
+    touch-action: none;
     /* The whole canvas is a pannable infinite surface (drag the background / middle-mouse),
        so the grab affordance covers the entire grid-area — not just .topology, which is
        sized around the node cards and left distant background areas as a plain arrow (#115).
@@ -2900,7 +2903,7 @@ body {
 /* In dashboard view the pannable topology is hidden, so the canvas isn't a drag surface —
    drop the grab affordance the .canvas rule sets for the normal view (#115 follow-up). */
 .canvas.view-dashboard { cursor: default; }
-.dashboard { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; }
+.dashboard { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; touch-action: pan-y; }
 .dashboard[hidden] { display: none; }
 
 /* Notices above the panels: dim note (degraded validation / warnings) and the
@@ -3006,3 +3009,50 @@ body {
 
 /* Inspect-tab panels reuse the same block styles inside the inspect body. */
 .ext-inspect { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
+
+/* ── Contract editor overlay ────────────────────────────────────────────────
+   Full-window surface for an editable typed contract (steel takeoff, …).
+   Same-origin iframe, so the editor page calls /api/contract directly.
+   z-index 60 sits above the 3-col app (z 1–8) and below any modal backdrops (z 70+). */
+.contract-editor {
+  position: fixed; inset: 0; z-index: 60;
+  display: flex; flex-direction: column;
+  background: var(--bg);
+}
+.contract-editor[hidden] { display: none; }
+.contract-editor-bar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 14px;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+.contract-editor-title {
+  color: var(--text-muted);
+  font-size: 13px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* The Approve button reuses the same .primary recipe as modal primary actions. */
+.contract-editor-bar .primary {
+  background: var(--accent); color: #fff; border: 1px solid var(--accent);
+  padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer;
+}
+.contract-editor-bar .primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: 0 0 14px var(--accent-glow); }
+.contract-editor-bar .primary:disabled { opacity: 0.6; cursor: default; background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); box-shadow: none; }
+.contract-editor iframe { flex: 1; border: 0; width: 100%; min-height: 0; }
+
+/* ===== MOBILE REFLOW =====
+   Phone/touch access (e.g. over Tailscale). The desktop 3-column shell is wider than a phone
+   and html,body{overflow:hidden} (top of file) clips the off-screen columns with no way to pan
+   to them — single-finger AND pinch do nothing. On narrow screens, WITHIN the locked skin:
+     (1) let the shell scroll so nothing is ever unreachable;
+     (2) collapse both side panels by default (see app.js) — canvas full-width, tap the existing
+         48px stubs to reveal chat/inspect one at a time;
+     (3) let the header wrap and the workflow picker shrink so it fits one phone-width row.
+   Guarded by the media query → desktop layout is 100% untouched. No new fonts/colors/components. */
+@media (max-width: 760px) {
+  html, body { overflow: auto; }
+  .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr 44px; }
+  header { flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
+  select, .wf-combo { min-width: 0; }
+}

package/dist/web/app.js

@@ -31,6 +31,13 @@ function loadState() {
     if (c.left !== undefined)  state.collapse.left = c.left;
     if (c.right !== undefined) state.collapse.right = c.right;
   } catch {}
+  // Mobile/touch: start with both side panels collapsed so the canvas is full-width and the
+  // desktop 3-column shell fits a phone. In-memory only — NOT persisted, so it never clobbers
+  // the desktop collapse preference. The user can still tap the stubs to reveal chat/inspect.
+  if (window.matchMedia('(max-width: 760px)').matches) {
+    state.collapse.left = true;
+    state.collapse.right = true;
+  }
 }
 function saveFavs() {
   document.getElementById('fav-count').textContent = state.favorites.length;
@@ -1448,6 +1455,54 @@ window.addEventListener('mouseup', () => {
 });
 $canvasEl.addEventListener('auxclick', (e) => { if (e.button === 1) e.preventDefault(); });
 
+// ----- Touch: one-finger pan + two-finger pinch-zoom (phones). The mouse handlers above are
+// untouched (touch events never fire from a mouse), so desktop is unaffected. touch-action:none
+// on .canvas (CSS) stops the browser hijacking the gesture and suppresses synthetic mouse events.
+let tPan = false, tPinch = false, tFromX = 0, tFromY = 0, tBaseX = 0, tBaseY = 0, pinchDist0 = 0, pinchZoom0 = 1;
+const pinchSpan = (ts) => Math.hypot(ts[0].clientX - ts[1].clientX, ts[0].clientY - ts[1].clientY);
+$canvasEl.addEventListener('touchstart', (e) => {
+  if (e.touches.length === 2) {
+    e.preventDefault();
+    tPinch = true; tPan = false;
+    pinchDist0 = pinchSpan(e.touches) || 1; pinchZoom0 = zoom;
+  } else if (e.touches.length === 1) {
+    // Let taps on interactive chrome through (node select, zoom toolbar, fav-bar, find, dashboard).
+    if (e.target.closest('.agent-card, .canvas-toolbar, .fav-bar, .find-overlay, .dashboard')) return;
+    e.preventDefault();
+    tPan = true; tPinch = false;
+    tFromX = e.touches[0].clientX; tFromY = e.touches[0].clientY;
+    tBaseX = panX; tBaseY = panY;
+    $canvasEl.classList.add('panning');
+  }
+}, { passive: false });
+$canvasEl.addEventListener('touchmove', (e) => {
+  if (tPinch && e.touches.length === 2) {
+    e.preventDefault();
+    const ratio = pinchSpan(e.touches) / pinchDist0;
+    zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, pinchZoom0 * ratio));
+    autoFit = false;
+    applyTransform();
+  } else if (tPan && e.touches.length === 1) {
+    e.preventDefault();
+    panX = tBaseX + (e.touches[0].clientX - tFromX);
+    panY = tBaseY + (e.touches[0].clientY - tFromY);
+    autoFit = false;
+    applyTransform();
+  }
+}, { passive: false });
+function endTouch(e) {
+  if (e.touches.length === 0) {
+    tPan = false; tPinch = false; $canvasEl.classList.remove('panning');
+  } else if (e.touches.length === 1 && tPinch) {
+    // 2->1 finger: hand off from pinch to pan without a jump.
+    tPinch = false; tPan = true;
+    tFromX = e.touches[0].clientX; tFromY = e.touches[0].clientY;
+    tBaseX = panX; tBaseY = panY;
+  }
+}
+$canvasEl.addEventListener('touchend', endTouch);
+$canvasEl.addEventListener('touchcancel', endTouch);
+
 // Keep the auto-fitted view fitted as the canvas resizes (a panel toggling/dragging,
 // the window resizing) — but never override a view the user has zoomed/panned. A
 // trailing debounce fires ONE clean re-fit after the resize settles (rather than on

package/dist/web/aware.js

@@ -28,6 +28,14 @@
   const $reportStop = document.getElementById('report-stop');
   const $stopRunBtn = document.getElementById('stop-run-btn');
 
+  // Contract editor — a dedicated full-window surface for an editable typed
+  // contract (steel takeoff, …). Unlike the opaque report viewer, this is a
+  // same-origin floless page (the iframe talks to /api/contract directly). The
+  // type→view registry lives in renderers.js (a global, loaded before this file).
+  const $contractEditor = document.getElementById('contract-editor');
+  const $contractEditorFrame = document.getElementById('contract-editor-frame');
+  const $contractEditorTitle = document.getElementById('contract-editor-title');
+
   // One persistent array the inspect Execution tab reads; we mutate in place so
   // every AGENTS[node].execution reference stays valid across re-renders.
   const liveTrace = [];
@@ -967,6 +975,15 @@
       }
       if (isInput) addNodeAction(card, 'Set inputs ▸', () => openInputsDialog());
       if (isRebake) addNodeAction(card, 'Re-read & re-bake ▸', () => openRebakeDialog());
+      const node = app && app.nodes.find((n) => n.id === id);
+      const contractType = node && window.contractTypeOf && window.contractTypeOf(node);
+      // Only offer the action when a renderer is actually registered for the type — otherwise
+      // openContractEditor() returns false and the click would silently do nothing.
+      if (contractType && window.CONTRACT_RENDERERS && window.CONTRACT_RENDERERS[contractType]) {
+        addNodeAction(card, 'Edit contract ▸', () => openContractEditor(currentId, contractType));
+        addNodeAction(card, 'View 3D ▸', () => exportContract3d(currentId));
+        card.dataset.tip = 'Double-click to open the contract editor';
+      }
     });
   }
 
@@ -1319,6 +1336,86 @@
     }
   }
 
+  // ── Contract editor (tier-1 typed, editable contract) ───────────────────────
+  // Open the dedicated full-window editor for a node that emits a known contract
+  // type. Returns true if a renderer exists (so the caller can stop here instead
+  // of falling through to the report viewer); false → unknown type, caller continues.
+  function openContractEditor(appId, type) {
+    const r = window.CONTRACT_RENDERERS && window.CONTRACT_RENDERERS[type];
+    if (!r) return false;
+    $contractEditorTitle.replaceChildren(
+      Object.assign(document.createElement('span'), { textContent: appId, style: 'color:var(--text);font-weight:600' }),
+      Object.assign(document.createElement('span'), { textContent: ' · ' + type, style: 'color:var(--text-muted)' }),
+    );
+    $contractEditorFrame.src = r.editorUrl(appId);
+    $contractEditor.hidden = false;
+    return true;
+  }
+  function closeContractEditor() {
+    $contractEditor.hidden = true;
+    $contractEditorFrame.src = 'about:blank'; // tear down the editor session + its draft listeners
+  }
+  document.getElementById('contract-editor-close').onclick = closeContractEditor;
+
+  // Export 3D ▸ — render the approved takeoff as an interactive 3D model. Calls the server's
+  // export-3d (transform → companion viewer-3d app → compile → run) and paints the returned
+  // interactive report in the same viewer a normal run uses. api() throws on any failure (non-2xx
+  // OR in-band ok:false), so one catch covers "no contract", "all RFI", and compile/render errors.
+  async function exportContract3d(appId) {
+    const app = currentId && apps.get(currentId);
+    if (!app) return;
+    $reportTitle.textContent = `3D Viewer · ${app.displayName}`;
+    $reportSub.textContent = 'Rendering the 3D model from the approved takeoff…';
+    $reportModal.dataset.nodeId = appId;
+    showModal($reportModal);
+    clearReportFrames(); // reset both frames + the ↗ Open buffer so a failure can't show a stale report
+    $reportFrame.hidden = true; $reportFrame3d.hidden = true;
+    $reportOverlay.hidden = false;
+    $reportOverlay.replaceChildren(mkEl('div', 'spinner'), mkEl('div', null, 'Rendering 3D model…'));
+    try {
+      const res = await api('/api/contract/' + encodeURIComponent(appId) + '/export-3d', { method: 'POST' });
+      const html = res.report && res.report.html;
+      if (!html) { $reportOverlay.innerHTML = '<div>The 3D render produced no output. Check the Execution tab.</div>'; return; }
+      // Partial render: members with no resolvable AISC size were dropped server-side (res.skipped) —
+      // surface that, never let an incomplete model read as complete.
+      const dropped = Array.isArray(res.skipped) ? res.skipped.length : 0;
+      $reportSub.textContent = (dropped ? `${dropped} member(s) not shown (no AISC size — RFI). ` : '')
+        + 'Live 3D view from the approved takeoff — drag to orbit, scroll to zoom, click an element to inspect.';
+      if (dropped) showToast(`3D: ${dropped} member(s) skipped — no resolvable AISC size`, 'info');
+      paintReport(html, true);
+      lastReportByApp.set(currentId, { nodeId: res.report.nodeId, label: '3D', html, interactive: true });
+      $reportModal.dataset.html = '1';
+    } catch (e) {
+      const msg = e && e.message ? e.message : String(e);
+      $reportOverlay.innerHTML = `<div>3D export failed: ${escapeHtml(msg)}</div>`;
+      showToast('3D export failed: ' + msg, 'warn');
+    }
+  }
+
+  // Approve & bake — freezes the edited contract into the .lock, arming Run.
+  // Flushes the editor's pending debounce save first so Approve always bakes the
+  // latest in-memory edits, not a stale snapshot. api() throws on non-2xx, so
+  // any flush or bake failure surfaces through the catch as a warn toast.
+  document.getElementById('contract-editor-approve').onclick = async () => {
+    const appId = currentId;
+    if (!appId) return;
+    const btn = document.getElementById('contract-editor-approve');
+    const prev = btn.textContent;
+    btn.disabled = true; btn.textContent = '⊙ Baking…';
+    try {
+      const frameWin = document.getElementById('contract-editor-frame').contentWindow;
+      if (frameWin && typeof frameWin.flushContract === 'function') {
+        await frameWin.flushContract(); // ensure the latest edits are on the server before baking
+      }
+      await api(`/api/contract/${encodeURIComponent(appId)}/approve`, { method: 'POST' });
+      showToast('Approved — lock baked. Run is armed.', 'ok');
+    } catch (e) {
+      showToast((e && e.message) || 'Approve failed', 'warn');
+    } finally {
+      btn.disabled = false; btn.textContent = prev;
+    }
+  };
+
   // The dedicated RUN: executes the app for real (simulate:false) with the
   // current inputs, renders + caches the HTML the report node returned. The UI
   // never builds the HTML — it relays exactly what the exec node produced.
@@ -1710,14 +1807,19 @@
     });
   }
 
-  // Double-click a node on the canvas: the report node → LOAD the last report (no
-  // run); the input node → open the styled inputs dialog. Delegated + bound once;
-  // survives every renderTopology that rebuilds the cards.
+  // Double-click a node on the canvas: a node that emits an editable typed contract
+  // → open the dedicated full-window editor; the report node → LOAD the last report
+  // (no run); the input node → open the styled inputs dialog. Delegated + bound
+  // once; survives every renderTopology that rebuilds the cards.
   $topology.addEventListener('dblclick', (e) => {
     const card = e.target.closest('.agent-card');
     if (!card) return;
     const id = card.dataset.agentId;
     if (!id) return;
+    const app = currentId && apps.get(currentId);
+    const node = app && (app.nodes || []).find((n) => n.id === id);
+    const ct = window.contractTypeOf && window.contractTypeOf(node);
+    if (ct && openContractEditor(currentId, ct)) return;
     if (id === reportNodeId()) showReport(id);
     else if (id === inputNodeId()) openInputsDialog();
   });

package/dist/web/index.html

@@ -320,6 +320,19 @@
     </div>
   </div>
 
+  <!-- Dedicated full-window surface for a contract editor (steel takeoff, …).
+       Same-origin iframe so the editor reads/writes /api/contract directly
+       (unlike the opaque 3D viewer which uses a data: URL and allow-scripts only). -->
+  <div id="contract-editor" class="contract-editor" hidden>
+    <div class="contract-editor-bar">
+      <button id="contract-editor-close" type="button">✕ Close</button>
+      <span id="contract-editor-title" class="contract-editor-title"></span>
+      <span style="flex:1"></span>
+      <button id="contract-editor-approve" type="button" class="primary">✓ Approve &amp; bake lock</button>
+    </div>
+    <iframe id="contract-editor-frame" title="Contract editor"></iframe>
+  </div>
+
   <!-- HTML Viewer — renders the report HTML an exec node returned, in-app.
        Double-click a report node on the canvas to run it and open this. -->
   <div class="modal-backdrop report-backdrop" id="report-modal">
@@ -672,6 +685,7 @@
     </div>
   </div>
 <script src="app.js"></script>
+<script src="renderers.js"></script>
 <script src="aware.js"></script>
 <script src="panels.js"></script>
 </body>

package/dist/web/renderers.js

@@ -0,0 +1,25 @@
+/* ============================================================================
+ * renderers.js — contract-type → editor-view registry.
+ *
+ * aware.js is an IIFE (not an ES module), so this file exposes globals too.
+ * Include this via <script src="renderers.js"> BEFORE aware.js in index.html.
+ *
+ * Tier 0: HTML-Viewer (read-only {html}) — rendered by the existing report modal.
+ * Tier 1: typed, editable contract — rendered by a dedicated editor page (this file).
+ * ========================================================================== */
+
+// contract type → descriptor for the editor surface.
+window.CONTRACT_RENDERERS = {
+  'steel.takeoff/v1': {
+    editorUrl: (appId) => '/steel-editor.html?app=' + encodeURIComponent(appId),
+  },
+};
+
+// Return the contract type string declared on a node, or null when none.
+// A node "emits" a contract type when its config carries a `contract` field,
+// or when its agent is the known steel-takeoff agent.
+window.contractTypeOf = function contractTypeOf(node) {
+  return (node && node.config && node.config.contract) ||
+    // TODO: drop this agent-name fallback once every steel-takeoff node carries config.contract.
+    (node && node.agent === 'steel-takeoff-us' ? 'steel.takeoff/v1' : null);
+};