@floless/app 0.41.0 → 0.42.0

package/dist/floless-server.cjs

@@ -52856,7 +52856,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.41.0" : void 0,
+    define: true ? "0.42.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -52866,7 +52866,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.41.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.42.0" : void 0 });
 }
 
 // oauth-presets.ts
@@ -53752,18 +53752,23 @@ function bakeContractIntoApp(sourcePath, contract) {
   if (idx < 0) idx = items.findIndex((it) => nodeOf(it)?.agent === "steel-takeoff-us");
   if (idx < 0) throw new Error("no contract-emitting node to bake the contract into");
   doc2.setIn(["nodes", idx, "config", "contract"], contract.type);
-  const plans = contract.plans;
-  const baked = Array.isArray(plans) ? {
-    ...contract,
-    plans: plans.map((p) => {
+  const baked = { ...contract };
+  if (Array.isArray(contract.plans)) {
+    baked.plans = contract.plans.map((p) => {
       if (p && typeof p === "object") {
         const clone = { ...p };
         delete clone.dims;
         return clone;
       }
       return p;
-    })
-  } : contract;
+    });
+  }
+  const filter = baked.filter;
+  if (filter && typeof filter === "object" && filter.page && typeof filter.page === "object") {
+    const page = { ...filter.page };
+    delete page.bg_b64;
+    baked.filter = { ...filter, page };
+  }
   doc2.setIn(["nodes", idx, "config", "takeoff"], baked);
   (0, import_node_fs17.writeFileSync)(sourcePath, doc2.toString());
 }

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

@@ -36,9 +36,89 @@
       },
       "additionalProperties": false
     },
-    "plans": { "type": "array", "items": { "$ref": "#/$defs/plan" } }
+    "plans": { "type": "array", "items": { "$ref": "#/$defs/plan" } },
+    "filter": { "$ref": "#/$defs/filter", "description": "Layer/thickness/colour filter pre-stage dataset from one compose-time PyMuPDF pass. The saved selection (per-facet `on` flags + `mode`) scopes which lines the reader binds profile labels to; replaces the length heuristic, fallback when absent. CONFIDENTIAL: `page.bg_b64` is machine-local, never committed." }
   },
   "$defs": {
+    "filter": {
+      "type": "object",
+      "additionalProperties": true,
+      "description": "Steel filter pre-stage. Lines render as SVG paths over a dimmed page raster; text spans make profile labels pickable (and feed the label-binding step).",
+      "properties": {
+        "page": {
+          "type": "object",
+          "required": ["w", "h"],
+          "description": "When present, w and h are required and positive — the view sets the SVG viewBox from them (an empty page would yield viewBox=\"NaN …\").",
+          "properties": {
+            "w": { "type": "number", "minimum": 1 },
+            "h": { "type": "number", "minimum": 1 },
+            "bg_b64": { "type": "string", "description": "Base64 JPEG of the page (title block excluded). CONFIDENTIAL — machine-local, stripped from the baked .flo (contract-bake.ts), never committed." }
+          }
+        },
+        "steelBbox": { "type": "array", "items": { "type": "number" }, "minItems": 4, "maxItems": 4, "description": "[x0,y0,x1,y1] of the steel linework, for Zoom-to-steel." },
+        "mode": { "enum": ["thickness", "layer", "color", "thickness+layer", "thickness+color"], "description": "Active match mode." },
+        "hide_title_block": { "type": "boolean" },
+        "layers": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": ["name"],
+            "additionalProperties": true,
+            "properties": {
+              "name": { "type": "string" },
+              "count": { "type": "number" },
+              "steel": { "type": "boolean", "description": "Heuristic steel layer — defaults ON at first load." },
+              "drawable": { "type": "boolean", "description": "false = listed but not drawn (e.g. a text/title-block layer)." },
+              "on": { "type": "boolean", "description": "Persisted selection state." }
+            }
+          }
+        },
+        "thicknesses": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": ["w"],
+            "additionalProperties": true,
+            "properties": {
+              "w": { "type": "number", "description": "Stroke width in pt." },
+              "count": { "type": "number" },
+              "on": { "type": "boolean" }
+            }
+          }
+        },
+        "colors": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": ["hex"],
+            "additionalProperties": true,
+            "properties": {
+              "hex": { "type": "string" },
+              "count": { "type": "number" },
+              "on": { "type": "boolean" }
+            }
+          }
+        },
+        "elements": {
+          "type": "array",
+          "description": "Every drawing element: lines (with an SVG path `d`) and text spans (with `text`+`bbox`), each tagged layer/thickness/colour.",
+          "items": {
+            "type": "object",
+            "additionalProperties": true,
+            "properties": {
+              "kind": { "enum": ["line", "text"] },
+              "layer": { "type": "string" },
+              "w": { "type": "number" },
+              "color": { "type": "string" },
+              "d": { "type": "string", "description": "SVG path (line elements)." },
+              "text": { "type": "string", "description": "Label text (text elements)." },
+              "bbox": { "type": "array", "items": { "type": "number" }, "description": "[x0,y0,x1,y1] (text elements)." },
+              "dashed": { "type": "boolean" }
+            }
+          }
+        }
+      }
+    },
     "point2": {
       "type": "array",
       "items": { "type": "number" },

package/dist/skills/floless-app-steel-takeoff/SKILL.md

@@ -39,8 +39,48 @@ file) and optionally `sourceName` (the original filename — use it for the `sou
 provenance field). If the user just attaches or points at a drawing in prose, skip the lookup
 and proceed from that path.
 
+### 1b. Filter pre-stage — isolate the steel linework FIRST (the `filter` node)
+
+Before the heavy read, do **one** deterministic PyMuPDF pass that enumerates *every* drawing
+element by **layer · thickness · colour** and bakes it into the contract's `filter` block. The user
+then opens the **Filter** node (double-click → the steel-filter view) and keeps only the real steel
+lines — by facet (layer/thickness/colour) or the **eyedropper** (click a line or label → Add its
+layer/thickness/colour). The saved selection is what step 2 binds profile labels to, so a clean
+framing plan goes in instead of the whole noisy sheet. This is a big reliability win
+(`S-ANNO-BEAM-STEL` + thick line beats a length-only guess) **and** makes the profile-label search in
+step 2 far cleaner (fewer candidate lines).
+
+One pass, display space (`page.rotation_matrix` — same as step 2, never mix native/display coords):
+
+1. **Lines** — `page.get_drawings()`: for each path keep `{ kind:"line", layer:<OCG name>, w:<stroke
+   width pt>, color:<#rrggbb stroke>, d:<SVG path built from the path items>, dashed:<bool> }`. The
+   **layer** is the path's optional-content group (OCG) name; thickness is the stroke width; colour
+   the stroke colour.
+2. **Text** — `page.get_text("dict")` (or rawdict): for each span keep `{ kind:"text", layer:<OCG>,
+   w:0, color:<#hex>, text:<string>, bbox:[x0,y0,x1,y1] }`. Text elements make profile **labels**
+   pickable (the eyedropper) and are the candidate set step 2's label-binding iterates.
+3. **Facets** — aggregate distinct `layers` / `thicknesses` / `colors` with a `count` each. Round
+   each element's `w` and the facet `w` the **same** way — matching is exact-equality, so a rounding
+   mismatch would silently hide lines. Mark
+   `steel: true` on layers whose name reads as steel framing (e.g. `*BEAM*STEL*`, `*COL*`, `*BRACE*`,
+   `*JOIST*`) → those default **on**; everything else defaults off. Mark `drawable: false` on pure
+   text/dimension/title-block layers (listed for completeness, not drawn as lines).
+4. **Page + bbox** — `page: { w, h, bg_b64 }` where `bg_b64` is a dimmed raster of the framing area
+   (**title block excluded** — CONFIDENTIAL, machine-local, never committed); `steelBbox` = the bbox
+   of the steel-layer elements (for Zoom-to-steel). Set `mode: "layer"`.
+5. **PUT** the contract with this `filter` block (`PUT /api/contract/steel-takeoff`). On a re-read,
+   preserve any existing per-facet `on` flags the user already set.
+
+Then tell the user to open the **Filter** node, narrow to the steel, and **Save**. The saved `on`
+flags + `mode` are what step 2 reads.
+
 ### 2. Read it with your own vision — the heavy pipeline
 
+> **Candidate geometry comes from the filter (1b) when present.** If the contract carries a saved
+> `filter`, the member candidate set is the **kept** line elements (those whose layer/thickness/colour
+> pass `mode` + the `on` flags) — bind labels to *those*, not to a length-filtered scan of the whole
+> sheet. The length heuristic below is the **fallback** only when no filter was saved.
+
 Follow the methodology condensed here (full detail + every gotcha in
 `docs/superpowers/specs/2026-06-17-steel-takeoff-agent-guidance.md`):
 

package/dist/web/aware.js

@@ -926,7 +926,12 @@
     // An html-report (static) or viewer-3d (interactive 3D) agent node renders HTML — its
     // `render` command returns an `html` field, exactly what extractReportHtml keys on. So
     // it's a report producer regardless of exec code; prefer it directly as the viewer node.
-    const htmlReportNode = app.nodes.find((n) => n.agent === 'html-report' || n.agent === 'viewer-3d');
+    // A pre-stage authoring node (config.surface, e.g. the steel `filter` node) renders a summary
+    // but is NOT the workflow's report viewer — its affordance is its own surface button. Skip it,
+    // or prepending it would steal "View report ▸" from the real first report node (e.g. `read`).
+    const htmlReportNode = app.nodes.find(
+      (n) => (n.agent === 'html-report' || n.agent === 'viewer-3d') && !(n.config && n.config.surface),
+    );
     if (htmlReportNode) return htmlReportNode.id;
     // Otherwise, qualify the app only if some node actually PRODUCES report HTML — its exec
     // code returns an `html` field (the `data.result.html` extractReportHtml keys
@@ -1068,6 +1073,11 @@
         teklaBtn.dataset.tip = 'Tekla must be open with a model loaded. Click to create native parts in it.';
         card.dataset.tip = 'Double-click to open the contract editor';
       }
+      // Filter pre-stage node — opens the served steel-filter view (facets + eyedropper → contract.filter).
+      if (node && node.config && node.config.surface === 'steel-filter') {
+        addNodeAction(card, 'Filter ▸', () => openFilterView(currentId));
+        if (!card.dataset.tip) card.dataset.tip = 'Double-click to open the steel filter';
+      }
     });
   }
 
@@ -1428,6 +1438,9 @@
   function openContractEditor(appId, type) {
     const r = window.CONTRACT_RENDERERS && window.CONTRACT_RENDERERS[type];
     if (!r) return false;
+    // The editor bakes the .lock on Approve — that control belongs to the contract editor, not the
+    // filter view (which has its own Save). Make sure it's visible here (openFilterView hides it).
+    const ap0 = document.getElementById('contract-editor-approve'); if (ap0) ap0.hidden = 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)' }),
@@ -1439,6 +1452,22 @@
     $contractEditor.hidden = false;
     return true;
   }
+  // The steel filter pre-stage view — reuses the contract-editor overlay/iframe to load the served
+  // steel-filter.html (layer/thickness/colour facets + eyedropper). Same seam as the editor: the
+  // iframe talks to /api/contract directly and Save writes contract.filter.
+  function openFilterView(appId) {
+    // The filter view has its own Save; the overlay's "Approve & bake lock" (editor-only) would
+    // be a confusing no-op here, so hide it. openContractEditor restores it.
+    const ap = document.getElementById('contract-editor-approve'); if (ap) ap.hidden = true;
+    $contractEditorTitle.replaceChildren(
+      Object.assign(document.createElement('span'), { textContent: appId, style: 'color:var(--text);font-weight:600' }),
+      Object.assign(document.createElement('span'), { textContent: ' · steel filter', style: 'color:var(--text-muted)' }),
+    );
+    $contractEditorFrame.onload = () => { try { $contractEditorFrame.contentWindow.focus(); } catch (_) {} };
+    $contractEditorFrame.src = '/steel-filter.html?app=' + encodeURIComponent(appId);
+    $contractEditor.hidden = false;
+    return true;
+  }
   function closeContractEditor() {
     $contractEditor.hidden = true;
     $contractEditorFrame.src = 'about:blank'; // tear down the editor session + its draft listeners
@@ -2061,6 +2090,7 @@
     const node = app && (app.nodes || []).find((n) => n.id === id);
     const ct = window.contractTypeOf && window.contractTypeOf(node);
     if (ct && openContractEditor(currentId, ct)) return;
+    if (node && node.config && node.config.surface === 'steel-filter') { openFilterView(currentId); return; }
     if (id === reportNodeId()) showReport(id);
     else if (id === inputNodeId()) openInputsDialog();
   });

package/dist/web/steel-filter-core.js

@@ -0,0 +1,79 @@
+/*
+ * steel-filter-core.js — PURE, framework-free core for the steel filter pre-stage (no DOM, no
+ * window). Unit-tested in node (server/steel-filter-core.test.ts) AND loaded by web/steel-filter.html.
+ *
+ * The filter pre-stage isolates the real steel linework on a drawing before the takeoff reader binds
+ * profile labels to it. The host AI runs ONE PyMuPDF pass at compose time and writes a `filter` block
+ * onto the steel.takeoff/v1 contract; this module is the pure match/selection logic the view and the
+ * reader both reason about. Lifted from the steel-parts-from-pdf.flo spike (`matchesActive`), extended
+ * with persistence (`on` flags) and the eyedropper add.
+ *
+ * Shapes:
+ *   element : { kind:'line'|'text', layer:string, w:number, color:string, d?:string, text?:string, bbox?:number[], dashed?:boolean }
+ *   mode    : 'thickness' | 'layer' | 'color' | 'thickness+layer' | 'thickness+color'
+ *   sel     : { layers:Set<string>, thicknesses:Set<number>, colors:Set<string> }
+ *   filter  : { mode, layers:[{name,count,steel?,drawable?,on?}], thicknesses:[{w,count,on?}], colors:[{hex,count,on?}], elements:[…] }
+ */
+
+/** The active match predicate — does this element pass the current mode + selection? */
+export function matchesActive(el, mode, sel) {
+  const byLayer = () => sel.layers.has(el.layer);
+  const byThk = () => sel.thicknesses.has(el.w);
+  const byColor = () => sel.colors.has(el.color);
+  switch (mode) {
+    case 'thickness': return byThk();
+    case 'layer': return byLayer();
+    case 'color': return byColor();
+    case 'thickness+layer': return byThk() && byLayer();
+    case 'thickness+color': return byThk() && byColor();
+    default: return false;
+  }
+}
+
+/**
+ * Build the in-memory selection Sets from a persisted filter block's `on` flags. A missing `on`
+ * defaults to the sensible first-load state: layers default to their `steel` flag, thicknesses and
+ * colors default ON (so switching into those modes shows everything until the user narrows).
+ */
+export function selFromFilter(filter) {
+  const onOr = (it, dflt) => (it.on === undefined ? dflt : !!it.on);
+  return {
+    layers: new Set((filter.layers || []).filter((l) => onOr(l, !!l.steel)).map((l) => l.name)),
+    thicknesses: new Set((filter.thicknesses || []).filter((t) => onOr(t, true)).map((t) => t.w)),
+    colors: new Set((filter.colors || []).filter((c) => onOr(c, true)).map((c) => c.hex)),
+  };
+}
+
+/**
+ * Eyedropper: add a picked element's facet value(s) to the selection (additive — never clears).
+ * `which` is 'layer' | 'thickness' | 'color' | 'all'. Returns the same (mutated) sel for chaining.
+ */
+export function eyedropperAdd(sel, el, which) {
+  // Text spans / hairlines (w<=0) have no meaningful stroke width — the popover hides their
+  // Thickness row, so "all" must not slip a w:0 into the thickness selection (which would then
+  // match every text/hairline element in any thickness mode — the opposite of isolating steel).
+  const hasStroke = el.kind !== 'text' && el.w > 0;
+  if (which === 'layer' || which === 'all') sel.layers.add(el.layer);
+  if ((which === 'thickness' || which === 'all') && hasStroke) sel.thicknesses.add(el.w);
+  if (which === 'color' || which === 'all') sel.colors.add(el.color);
+  return sel;
+}
+
+/** Count how many elements are visible under the current mode + selection. */
+export function countShown(elements, mode, sel) {
+  let n = 0;
+  for (const el of elements) if (matchesActive(el, mode, sel)) n++;
+  return n;
+}
+
+/**
+ * Write the live selection + mode back onto the filter block's `on` flags so it persists on the
+ * contract (what Save PUTs, and what the reader reads). Mutates and returns `filter`.
+ */
+export function applySelToFilter(filter, sel, mode) {
+  filter.mode = mode;
+  for (const l of filter.layers || []) l.on = sel.layers.has(l.name);
+  for (const t of filter.thicknesses || []) t.on = sel.thicknesses.has(t.w);
+  for (const c of filter.colors || []) c.on = sel.colors.has(c.hex);
+  return filter;
+}

package/dist/web/steel-filter.html

@@ -0,0 +1,384 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Steel Filter</title>
+<style>
+:root{--bg:#0f172a;--panel:#1e293b;--line:#334155;--text:#e2e8f0;--mut:#94a3b8;--brand:#3b82f6}
+/* Theme EVERY scrollbar — no native white default may leak (panels, popovers, modal lists). */
+*{scrollbar-width:thin;scrollbar-color:#475569 transparent}
+*::-webkit-scrollbar{width:10px;height:10px}
+*::-webkit-scrollbar-track{background:transparent}
+*::-webkit-scrollbar-thumb{background:#475569;border-radius:6px;border:2px solid transparent;background-clip:content-box}
+*::-webkit-scrollbar-thumb:hover{background:#5b6b85;background-clip:content-box}
+*::-webkit-scrollbar-corner{background:transparent}
+*{box-sizing:border-box}
+html,body{height:100%}
+body{margin:0;background:var(--bg);color:var(--text);font:13px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
+header{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
+header b{font-size:14px} header .sp{flex:1}
+.stat{color:var(--mut);font-size:12px} .stat b{color:var(--text)}
+.stat.dirty b{color:#f59e0b} .stat.saved b{color:#34d399} .stat.err b{color:#f87171}
+button{background:#334155;color:var(--text);border:1px solid #475569;border-radius:6px;padding:5px 10px;cursor:pointer;font:13px system-ui}
+button:hover{background:#475569} button:disabled{opacity:.5;cursor:default}
+button.primary{background:var(--brand);border-color:var(--brand);color:#fff} button.primary:hover{background:#2f6fe0}
+button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
+#app{display:flex;flex:1;min-height:0}
+#panel{width:300px;flex:0 0 300px;background:var(--panel);border-right:1px solid var(--line);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
+#panel h2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 0 8px;display:flex;align-items:center;justify-content:space-between}
+.acts{display:inline-flex;gap:4px}
+.acts button{font-size:11px;padding:2px 7px;background:transparent;border-color:var(--line);color:var(--mut)}
+.acts button:hover{background:transparent;border-color:var(--brand);color:var(--text)}
+.facet{border-top:1px solid var(--line);padding-top:14px}
+#modes label,.opts label{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;cursor:pointer;color:var(--text)}
+.opts label em{margin-left:auto;color:var(--mut);font-style:normal;font-size:11px}
+.opts .sw{width:12px;height:12px;border-radius:3px;flex:0 0 12px;border:1px solid var(--line)}
+.opts label.textlayer{opacity:.55;cursor:default}
+/* Fully custom checkbox/radio — the native unchecked widget is a white/grey square that breaks the dark baseline. */
+input[type=radio],input[type=checkbox]{-webkit-appearance:none;appearance:none;width:14px;height:14px;flex:none;border:1px solid #475569;border-radius:3px;background:transparent;cursor:pointer;margin:0;vertical-align:middle}
+input[type=radio]{border-radius:50%}
+input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-5' stroke='%23fff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
+input[type=radio]:checked{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px var(--panel)}
+input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
+.facet.dim{opacity:.4} .facet.dim .opts,.facet.dim .acts{pointer-events:none}
+.hint{color:var(--mut);font-size:11px;line-height:1.5}
+footer{margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}
+#count{font-size:11px;color:var(--mut);width:100%;margin-bottom:4px}
+#count b{color:var(--text)}
+#stage{flex:1;position:relative;background:var(--bg);min-width:0}
+#canvas{width:100%;height:100%;cursor:grab;touch-action:none;display:block}
+#canvas.dragging{cursor:grabbing}
+#canvas image.bg{opacity:.28}
+#canvas path.el{pointer-events:stroke}
+#canvas text.el{pointer-events:all;cursor:pointer;user-select:none}
+#empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:40px;text-align:center;color:var(--mut)}
+#empty.show{display:flex}
+#zoombar{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
+/* eyedropper popover */
+#eye{position:fixed;display:none;z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:210px}
+#eye.show{display:block}
+#eye .ehead{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
+#eye .erow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
+#eye .erow .k{color:var(--mut);min-width:72px;flex:none}
+#eye .erow .v{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#eye .erow .sw{width:12px;height:12px;border-radius:3px;border:1px solid var(--line);flex:none}
+#eye .erow button{font-size:11px;padding:2px 7px}
+#eye .eall{margin-top:8px;width:100%}
+</style>
+</head>
+<body>
+<header>
+  <b>Steel filter</b>
+  <span id="src" class="stat"></span>
+  <span class="sp"></span>
+  <span id="saved" class="stat"></span>
+  <button id="save" class="primary" disabled>Save</button>
+</header>
+<div id="app">
+  <aside id="panel">
+    <section id="modes">
+      <h2>Match mode</h2>
+      <label><input type="radio" name="mode" value="layer" checked /> Layer only</label>
+      <label><input type="radio" name="mode" value="thickness" /> Thickness only</label>
+      <label><input type="radio" name="mode" value="color" /> Color only</label>
+      <label><input type="radio" name="mode" value="thickness+layer" /> Thickness + Layer</label>
+      <label><input type="radio" name="mode" value="thickness+color" /> Thickness + Color</label>
+    </section>
+    <section class="facet" id="facet-layers">
+      <h2>Layers <span class="acts"><button data-all="layers">all</button><button data-none="layers">none</button></span></h2>
+      <div class="opts"></div>
+    </section>
+    <section class="facet" id="facet-thicknesses">
+      <h2>Thicknesses <span class="acts"><button data-all="thicknesses">all</button><button data-none="thicknesses">none</button></span></h2>
+      <div class="opts"></div>
+    </section>
+    <section class="facet" id="facet-colors">
+      <h2>Colors <span class="acts"><button data-all="colors">all</button><button data-none="colors">none</button></span></h2>
+      <div class="opts"></div>
+    </section>
+    <footer>
+      <span id="count"></span>
+      <button id="fit">Fit page</button>
+      <button id="zoomsteel">Zoom to steel</button>
+    </footer>
+  </aside>
+  <main id="stage">
+    <svg id="canvas" preserveAspectRatio="xMidYMid meet">
+      <image class="bg"></image>
+      <g id="overlay" fill="none"></g>
+    </svg>
+    <div id="empty">
+      <div>
+        <p>No filter data yet.</p>
+        <p class="hint" style="margin-top:8px;max-width:340px">Your terminal AI reads the drawing once (PyMuPDF) and bakes its layers, thicknesses and colours here. Use <b>Re-read &amp; re-bake ▸</b> on the canvas, then reload.</p>
+      </div>
+    </div>
+    <div id="zoombar"><button id="fit2">Fit</button><button id="zoomsteel2">Steel</button></div>
+  </main>
+</div>
+<div id="eye">
+  <div class="ehead"><span>Picked element</span><button id="eyeClose" style="padding:0 6px">✕</button></div>
+  <div id="eyeBody"></div>
+  <button class="eall primary" id="eyeAddAll">Add all to filter</button>
+</div>
+
+<script type="module">
+import { matchesActive, selFromFilter, eyedropperAdd, countShown, applySelToFilter } from './steel-filter-core.js';
+
+const APP_ID = new URLSearchParams(location.search).get('app') || '';
+const SVGNS = 'http://www.w3.org/2000/svg';
+const PALETTE = ['#3b82f6','#22d3ee','#a78bfa','#f59e0b','#34d399','#f472b6','#60a5fa','#facc15'];
+
+const esc = s => String(s).replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
+const safeColor = c => /^#[0-9a-fA-F]{3,8}$/.test(String(c)) ? c : 'transparent';
+
+const svg = document.getElementById('canvas');
+const overlay = document.getElementById('overlay');
+const bgImg = svg.querySelector('image.bg');
+const countEl = document.getElementById('count');
+const savedEl = document.getElementById('saved');
+const saveBtn = document.getElementById('save');
+
+let C = null;            // the full contract
+let F = null;            // C.filter
+let sel = null;          // { layers, thicknesses, colors } Sets
+let mode = 'layer';
+let nodes = [];          // [{ node, el }]
+let layerColor = {};
+let dirty = false;
+
+function setSaved(state){
+  savedEl.className = 'stat ' + (state || '');
+  savedEl.innerHTML = state === 'dirty' ? 'Unsaved <b>●</b>' : state === 'saved' ? 'Saved <b>✓</b>' : state === 'err' ? 'Save failed <b>✕</b>' : '';
+}
+function markDirty(){ dirty = true; saveBtn.disabled = false; setSaved('dirty'); }
+
+async function boot(){
+  if(!APP_ID){ showEmpty('No app specified.'); return; }
+  let res;
+  try { res = await fetch('/api/contract/' + encodeURIComponent(APP_ID)); }
+  catch(e){ showEmpty('Could not reach the server.'); return; }
+  if(!res.ok){ showEmpty(); return; }
+  C = await res.json();
+  F = C && C.filter;
+  if(!F || !Array.isArray(F.elements) || !F.elements.length){ showEmpty(); return; }
+  document.getElementById('empty').classList.remove('show');
+  document.getElementById('src').textContent = (C.source && C.source.name) ? ('· ' + C.source.name) : '';
+  initFromFilter();
+}
+
+function showEmpty(msg){
+  const e = document.getElementById('empty');
+  if(msg) e.querySelector('p').textContent = msg;
+  e.classList.add('show');
+}
+
+function initFromFilter(){
+  mode = F.mode || 'layer';
+  document.querySelector(`input[name=mode][value="${mode}"]`)?.setAttribute('checked','');
+  document.querySelectorAll('input[name=mode]').forEach(r => { r.checked = (r.value === mode); });
+  // layer colours: steel layers vivid+distinct, others a single muted slate
+  let si = 0;
+  layerColor = {};
+  for(const l of F.layers || []) layerColor[l.name] = l.steel ? PALETTE[si++ % PALETTE.length] : '#94a3b8';
+  sel = selFromFilter(F);
+  // page + viewBox
+  const pg = (F.page && F.page.w > 0 && F.page.h > 0) ? F.page : { w: 1000, h: 1000 };  // guard an empty page → no NaN viewBox
+  svg.setAttribute('viewBox', `0 0 ${pg.w} ${pg.h}`);
+  if(pg.bg_b64){ bgImg.setAttribute('href', 'data:image/jpeg;base64,' + pg.bg_b64); bgImg.setAttribute('width', pg.w); bgImg.setAttribute('height', pg.h); bgImg.style.display=''; }
+  else bgImg.style.display = 'none';
+  buildOverlay();
+  buildFacet('layers', F.layers || [], 'name', it => it.name, it => it.name);
+  buildFacet('thicknesses', F.thicknesses || [], 'w', it => it.w + ' pt', it => it.w);
+  buildFacet('colors', F.colors || [], 'hex', it => it.hex, it => it.hex);
+  base = { x: 0, y: 0, w: pg.w, h: pg.h }; vb = { ...base };
+  apply();
+}
+
+function buildOverlay(){
+  overlay.replaceChildren();
+  nodes = (F.elements || []).map(el => {
+    let n;
+    if(el.kind === 'text'){
+      n = document.createElementNS(SVGNS, 'text');
+      const b = el.bbox || [0,0,0,0];
+      n.setAttribute('x', b[0]); n.setAttribute('y', b[3] || b[1]);
+      n.setAttribute('font-size', Math.max(8, (b[3]-b[1]) || 10));
+      n.setAttribute('fill', layerColor[el.layer] || '#cbd5e1');
+      n.textContent = el.text || '';
+    } else {
+      n = document.createElementNS(SVGNS, 'path');
+      n.setAttribute('d', el.d || '');
+      n.setAttribute('stroke', layerColor[el.layer] || '#3b82f6');
+      n.setAttribute('stroke-width', '2.2');
+      n.setAttribute('stroke-linecap', 'round');
+      n.setAttribute('vector-effect', 'non-scaling-stroke');
+      if(el.dashed) n.setAttribute('stroke-dasharray', '7 4');
+    }
+    n.setAttribute('class', 'el');
+    n.__el = el;
+    overlay.appendChild(n);
+    return { node: n, el };
+  });
+}
+
+function setOf(facet){ return facet === 'layers' ? sel.layers : facet === 'thicknesses' ? sel.thicknesses : sel.colors; }
+
+function buildFacet(facet, items, valueKey, label, selValue){
+  const box = document.querySelector(`#facet-${facet} .opts`);
+  box.replaceChildren();
+  for(const it of items){
+    const val = it[valueKey];
+    const isText = facet === 'layers' && it.drawable === false;
+    const wrap = document.createElement('label');
+    if(isText) wrap.className = 'textlayer';
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.checked = setOf(facet).has(selValue(it));
+    cb.value = String(val);
+    cb.addEventListener('change', () => { const s = setOf(facet); cb.checked ? s.add(selValue(it)) : s.delete(selValue(it)); markDirty(); apply(); });
+    wrap.appendChild(cb);
+    if(facet === 'layers'){
+      const sw = document.createElement('span'); sw.className = 'sw';
+      sw.style.background = layerColor[val] || 'transparent';
+      wrap.appendChild(sw);
+    } else if(facet === 'colors'){
+      const sw = document.createElement('span'); sw.className = 'sw';
+      sw.style.background = safeColor(val);
+      wrap.appendChild(sw);
+    }
+    wrap.appendChild(document.createTextNode(' ' + label(it) + ' '));
+    const c = document.createElement('em'); c.textContent = it.count; wrap.appendChild(c);
+    box.appendChild(wrap);
+  }
+}
+
+function syncFacetChecks(){
+  for(const facet of ['layers','thicknesses','colors']){
+    const items = F[facet] || [];
+    const cbs = document.querySelectorAll(`#facet-${facet} input[type=checkbox]`);
+    cbs.forEach((cb, i) => {
+      const it = items[i]; if(!it) return;
+      const v = facet === 'thicknesses' ? it.w : (facet === 'layers' ? it.name : it.hex);
+      cb.checked = setOf(facet).has(v);
+    });
+  }
+}
+
+function apply(){
+  for(const { node, el } of nodes){
+    const vis = matchesActive(el, mode, sel);
+    node.style.display = vis ? '' : 'none';
+  }
+  countEl.innerHTML = '<b>' + countShown(F.elements, mode, sel) + '</b> of <b>' + nodes.length + '</b> elements shown';
+  document.getElementById('facet-layers').classList.toggle('dim', !(mode === 'layer' || mode === 'thickness+layer'));
+  document.getElementById('facet-thicknesses').classList.toggle('dim', !mode.startsWith('thickness'));
+  document.getElementById('facet-colors').classList.toggle('dim', !(mode === 'color' || mode === 'thickness+color'));
+}
+
+// --- modes + all/none ---
+document.querySelectorAll('input[name=mode]').forEach(r => r.addEventListener('change', () => { if(r.checked){ mode = r.value; markDirty(); apply(); } }));
+document.querySelectorAll('[data-all]').forEach(b => b.addEventListener('click', () => setAllFacet(b.dataset.all, true)));
+document.querySelectorAll('[data-none]').forEach(b => b.addEventListener('click', () => setAllFacet(b.dataset.none, false)));
+function setAllFacet(facet, on){
+  const s = setOf(facet);
+  const items = F[facet] || [];
+  for(const it of items){ const v = facet === 'thicknesses' ? it.w : (facet === 'layers' ? it.name : it.hex); on ? s.add(v) : s.delete(v); }
+  syncFacetChecks(); markDirty(); apply();
+}
+
+// --- eyedropper: pick a line/label -> popover, + Add each / Add all ---
+const eye = document.getElementById('eye');
+let eyeEl = null;
+function openEyedropper(clientX, clientY, el){
+  eyeEl = el;
+  const body = document.getElementById('eyeBody');
+  const rows = [];
+  rows.push(eyeRow('Layer', el.layer, 'layer', `<span class="sw" style="background:${safeColor(layerColor[el.layer])}"></span>`));
+  if(el.kind !== 'text' && el.w > 0) rows.push(eyeRow('Thickness', el.w + ' pt', 'thickness', ''));
+  rows.push(eyeRow('Color', el.color, 'color', `<span class="sw" style="background:${safeColor(el.color)}"></span>`));
+  body.innerHTML = rows.join('');
+  body.querySelectorAll('button[data-add]').forEach(b => b.onclick = () => { eyedropperAdd(sel, el, b.dataset.add); syncFacetChecks(); markDirty(); apply(); closeEye(); });
+  eye.classList.add('show');
+  const w = eye.offsetWidth || 220, h = eye.offsetHeight || 160;
+  eye.style.left = Math.min(clientX + 8, window.innerWidth - w - 8) + 'px';
+  eye.style.top = Math.min(clientY + 8, window.innerHeight - h - 8) + 'px';
+}
+function eyeRow(k, v, which, swatch){
+  return `<div class="erow"><span class="k">${k}</span>${swatch}<span class="v" title="${esc(v)}">${esc(v)}</span><button data-add="${which}">＋ Add</button></div>`;
+}
+function closeEye(){ eye.classList.remove('show'); eyeEl = null; }
+document.getElementById('eyeClose').onclick = closeEye;
+document.getElementById('eyeAddAll').onclick = () => { if(eyeEl){ eyedropperAdd(sel, eyeEl, 'all'); syncFacetChecks(); markDirty(); apply(); } closeEye(); };
+
+// --- pan/zoom via viewBox; a click (no drag) on an element opens the eyedropper ---
+let base = { x:0, y:0, w:1000, h:1000 }, vb = { ...base }, drag = null;
+function setVB(){ svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.w} ${vb.h}`); }
+svg.addEventListener('wheel', e => {
+  e.preventDefault();
+  const r = svg.getBoundingClientRect();
+  const mx = vb.x + ((e.clientX - r.left) / r.width) * vb.w;
+  const my = vb.y + ((e.clientY - r.top) / r.height) * vb.h;
+  const k = e.deltaY < 0 ? 0.85 : 1 / 0.85;
+  vb.w *= k; vb.h *= k;
+  vb.x = mx - ((e.clientX - r.left) / r.width) * vb.w;
+  vb.y = my - ((e.clientY - r.top) / r.height) * vb.h;
+  setVB();
+}, { passive: false });
+svg.addEventListener('pointerdown', e => {
+  drag = { x: e.clientX, y: e.clientY, vx: vb.x, vy: vb.y, moved: false, target: e.target };
+  svg.setPointerCapture(e.pointerId); svg.classList.add('dragging');
+});
+svg.addEventListener('pointermove', e => {
+  if(!drag) return;
+  if(Math.abs(e.clientX - drag.x) + Math.abs(e.clientY - drag.y) > 3) drag.moved = true;
+  const r = svg.getBoundingClientRect();
+  vb.x = drag.vx - ((e.clientX - drag.x) / r.width) * vb.w;
+  vb.y = drag.vy - ((e.clientY - drag.y) / r.height) * vb.h;
+  setVB();
+});
+svg.addEventListener('pointerup', e => {
+  svg.classList.remove('dragging');
+  if(drag && !drag.moved && drag.target && drag.target.__el) openEyedropper(e.clientX, e.clientY, drag.target.__el);
+  else if(drag && !drag.moved) closeEye();
+  drag = null;
+});
+function fit(){ vb = { ...base }; setVB(); }
+function zoomSteel(){ const b = F && F.steelBbox; if(!b){ fit(); return; } const pad = 40; vb = { x: b[0]-pad, y: b[1]-pad, w: (b[2]-b[0])+2*pad, h: (b[3]-b[1])+2*pad }; setVB(); }
+document.getElementById('fit').onclick = fit;
+document.getElementById('fit2').onclick = fit;
+document.getElementById('zoomsteel').onclick = zoomSteel;
+document.getElementById('zoomsteel2').onclick = zoomSteel;
+
+// --- save: write the selection + mode onto C.filter and PUT the contract ---
+saveBtn.onclick = save;
+async function save(){
+  if(!C || !F) return;
+  applySelToFilter(F, sel, mode);
+  C.filter = F;
+  saveBtn.disabled = true; setSaved('');
+  try {
+    const res = await fetch('/api/contract/' + encodeURIComponent(APP_ID), { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify(C) });
+    if(!res.ok) throw new Error(await res.text());
+    dirty = false; setSaved('saved');
+  } catch(e){ console.error('filter save failed', e); setSaved('err'); saveBtn.disabled = false; }
+}
+window.addEventListener('beforeunload', e => { if(dirty){ e.preventDefault(); e.returnValue = ''; } });
+
+// Test seam (mirrors steel-3d-view's debug()/probe()) — lets a headless E2E drive the eyedropper
+// and inspect state deterministically without fragile sub-pixel clicks on thin SVG strokes.
+window.__filterTest = {
+  ready: () => !!F,
+  mode: () => mode,
+  sel: () => ({ layers: [...sel.layers], thicknesses: [...sel.thicknesses], colors: [...sel.colors] }),
+  shown: () => countShown(F.elements, mode, sel),
+  total: () => nodes.length,
+  pick: (i) => { const el = nodes[i].el; openEyedropper(Math.round(window.innerWidth / 2), 200, el); return el; },
+  addAll: () => document.getElementById('eyeAddAll').click(),
+};
+
+boot();
+</script>
+</body>
+</html>

package/package.json

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