@floless/app 0.16.1 → 0.17.0

package/dist/skills/floless-app-rebake/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: floless-app-rebake
+description: This skill should be used when the user swaps the source drawing of a BAKED floless.app workflow and wants it re-read — the "Re-read & re-bake" (B3) loop for Visual Inputs. Triggers on a pending floless `rebake` request (queued from the app's "Re-read & re-bake ▸" button), or asks like "re-bake screenshot-to-saved-settings with this new schedule", "I swapped the drawing, re-read it", "re-extract and re-bake the config". It teaches the host AI to read the new image, re-extract its values, rewrite ONLY the app's config.yaml baked literals, recompile, and ask the user to approve — all at COMPOSE time (AWARE forbids reading a drawing during a run).
+metadata:
+  version: 0.1.0
+---
+
+# Re-read & re-bake a baked Visual Input (B3)
+
+## What this is
+
+Some floless.app workflows **bake** an image/PDF at compose time: the terminal AI reads a
+drawing once and writes the extracted values into `config.yaml` as literals, so the run is
+fully deterministic and reads no drawing (the **decalog-#9 / "bake"** strategy — AWARE's
+`aware app validate` *rejects* a node that reads a drawing during a run). When the user wants
+to process a **different** drawing, they can't just "swap and run" — the literals must be
+re-extracted and re-baked. That re-extraction is an LLM act, so it happens **here, at compose
+time**, then the user approves the new lock. This is strategy **B3** of the Visual Inputs design
+(`docs/superpowers/specs/2026-06-12-visual-inputs-design.md`).
+
+The floless.app UI surfaces a **"Re-read & re-bake ▸"** button on a baked-visual app's entry
+node. Clicking it (after attaching a new drawing) records a **`rebake` request** that you pick
+up here.
+
+## The loop
+
+1. **Find the request.** `GET http://localhost:<port>/api/requests` → find the entry with
+   `type: "rebake"`. It carries `appId`, the `inputName` (the baked input, e.g. `drawing`),
+   an `instruction`, and `snapshots: ["<abs path to the new image>"]`. (The user may also just
+   ask in prose with an image attached — same procedure, skip the request lookup.)
+2. **Read the new drawing.** Open the image at `snapshots[0]` (a real PNG/JPEG/WebP on disk).
+   Read it with your own vision — this is the compose-time extraction.
+3. **Re-extract the same schema the app already bakes.** Open the app source +
+   `config.yaml` under `~/.aware/apps/<appId>/` (and the editable copy under `demos/<appId>/`
+   if present). Identify the baked literals (e.g. `config.schedule-rows`). Re-extract **the same
+   shape** from the new drawing — same fields, same types — so the deterministic nodes keep
+   working. Do NOT invent values the drawing doesn't state; leave the app's documented
+   sentinel/default for anything absent (mirror how it was originally baked).
+4. **Rewrite ONLY the baked config values.** Edit `~/.aware/apps/<appId>/config.yaml`
+   (and the `demos/<appId>/config.yaml` editable copy) — replace the baked literals with the
+   re-extracted ones. **Do not change node logic, the `.flo`, or the schema** — only the values.
+5. **Recompile.** `aware app compile ~/.aware/apps/<appId>` → writes a fresh `<appId>.lock`.
+   The source-hash changes, so floless's Run gate disarms until approval. Copy the lock back to
+   `demos/<appId>/` if you keep an editable copy.
+6. **Hand the approval to the user.** Tell them what changed (e.g. "re-baked 7 schedule rows
+   from the new drawing — review the diff in Inspect → Code, then Compile/Approve, then ▶ Run").
+   The human eyeballing the re-extraction before any run **is the safety gate** (it replaces the
+   `approve:` block AWARE's bake pattern recommends). Never auto-run.
+7. **Clear the request.** `DELETE http://localhost:<port>/api/requests/<id>` once done.
+
+## Guardrails
+
+- **Compose-time only.** Never add a runtime node that reads the drawing — `aware app validate`
+  rejects it, and it would break determinism. The whole point of B3 is to keep the run
+  deterministic by re-baking up front.
+- **Values, not logic.** Re-bake only `config.yaml` literals. If the new drawing needs a
+  *different shape* (new columns, a different schema), that's a workflow change, not a re-bake —
+  tell the user and use `floless-app-workflows` instead.
+- **Thin-UI contract holds.** The browser only recorded intent + the image; the brain is you,
+  in the terminal. The UI never re-bakes and never reads the drawing.
+- **Resolve the port** from the running floless.app (the `/api` base the user's workspace is on)
+  the same way the other floless-app skills do.
+
+## Relationship to the other strategies
+
+- **A (bake)** is the first-time version of this (read at compose, bake). B3 is "do it again for a
+  new drawing." Same act, re-triggered by a swap.
+- **B1 (parse)** is for deterministically-parseable inputs that DON'T need re-baking — there the
+  image is a true runtime input read by an `exec` node; the user swaps and runs with no re-bake.
+- **B2 (vision)** — a curated runtime `vision.extract` agent — is the future zero-friction
+  replacement for B3 once AWARE ships it (RFC `aware-aeco/aware#223`). Until then, B3 is the
+  swap-and-(almost)-run answer for vision inputs.

package/dist/skills/floless-app-workflows/references/exec-contract.md

@@ -44,7 +44,16 @@ floless extracts `data.result.html` for the HTML Viewer.
   `System.IO`, `System.Diagnostics.Debugger`, and the Tekla Open API
   (`Tekla.Structures.Model`, etc. — discovered/probed from the running install).
 - **NOT referenced:** `System.Net` (so **no** `WebUtility.HtmlEncode` — escape manually),
-  `System.Diagnostics.Process`. Don't rely on them.
+  `System.Diagnostics.Process`, and **`System.Text.RegularExpressions`** (no `Regex` —
+  use `IndexOf`/`Substring` scans instead). Don't rely on them.
+
+> **FOOTGUN — the bridge swallows the compiler diagnostic.** An exec script that fails
+> to compile (e.g. references an unreferenced assembly like `Regex`) does NOT surface a
+> `CS####` error — the run aborts with an opaque `agent tekla/exec failed (exit Some(2))`
+> and an empty detail (verified on aware 0.65.0). It reads like a host-attach failure but
+> is a compile error in your C#. Isolate by running a known-good Tekla-free exec
+> (`dummy-report`): if that runs and yours exits 2, the fault is your script, not the
+> bridge/host. (The opacity is an AWARE DX gap — candidate to file on aware-aeco.)
 
 Manual HTML escape (since `System.Net` is unavailable):
 

package/dist/skills/floless-app-workflows/references/visual-inputs.md

@@ -0,0 +1,94 @@
+# Visual Inputs (image / PDF): one input, four read-strategies
+
+A workflow takes an image/PDF via an input that declares **`widget: file`** (and
+typically `type: image`). The user swaps it on the **input node** ("Set inputs ▸" →
+a file picker); floless stores the bytes under `~/.floless/inputs/<app>/<sha>.<ext>`
+(content-addressed, PDF-aware) and sets `{{ inputs.<name> }}` to that **path**. The
+bytes never pass through a model in the UI — the web layer moves a file, AWARE (or
+the terminal AI at compose) interprets it.
+
+```yaml
+inputs:
+  drawing:
+    type: image
+    widget: file              # ← load-bearing: renders the picker, not a text box
+    accept: [pdf, png, jpg]   # narrows the picker + the chip glyph
+    read-strategy: parse      # parse | bake | rebake | vision  (see below)
+    description: The framing PDF/image to take off (swappable per run).
+```
+
+## Pick the strategy from two questions — needs vision? swappable per run?
+
+| | deterministic parser exists | needs vision |
+|---|---|---|
+| **fixed / rare** | parse-once, or **bake** (A) | **bake** (A) |
+| **swap per run** | **parse** (B1) | **rebake** (B3) today · **vision** (B2) later |
+
+- **parse (B1)** — a read-only `exec` node opens `{{ inputs.<name> }}` with `System.IO`
+  and a deterministic library (PdfPig geometry, OCR, barcode). No LLM, legal at
+  runtime. The file is a true swappable input; swap + Run, no recompile. Reference:
+  `demos/tekla-pdf-takeoff/` (page-count today; geometry takeoff is the same shape).
+- **bake (A)** — the terminal AI reads the artifact at **compose** time and bakes
+  literals into `config.yaml`; the run never reads it. Reference:
+  `demos/screenshot-to-saved-settings/`. **AWARE REQUIRES this for any vision read:**
+  `aware app validate` rejects a runtime think-node that reads a drawing
+  (`app-spec.md` §"Reading a drawing / PDF / image", and `validate.rs`).
+- **rebake (B3)** — swapping the artifact re-triggers the compose-time bake via the
+  request relay; the **`floless-app-rebake` skill** teaches the host AI to re-read +
+  re-bake + recompile + approve. The baked input declares `read-strategy: bake`; the
+  entry node shows a **"Re-read & re-bake ▸"** affordance. Feels like swap-and-run,
+  keeps determinism. (Shipped — Sub-project 2.)
+- **vision (B2)** — a curated runtime `vision.extract` agent (image → schema-bound
+  JSON, content-cached, approve-gated). Needs an AWARE substrate change — RFC
+  `aware-aeco/aware#223` (+ reference impl PR). **Substrate-gated:** until `aware`
+  ships `vision.extract`, authoring a B2 app fails `validate`; use **rebake (B3)** for
+  swap + vision in the meantime (a B2 input is a drop-in upgrade of a B3 input).
+
+**Rule:** never put an LLM in the run path except B2's curated, lock-pinned,
+approve-gated agent. The UI never interprets the file — it only stores it and passes
+the path.
+
+## Authoring a B2 (vision) app — gated on AWARE `vision.extract`
+
+A B2 app is a normal reusable `.flo` whose **source drawing is a runtime input** (the SP1
+picker — `read-strategy: vision`, `widget: file`) feeding a **`vision.extract` node**, whose
+schema-bound JSON then drives deterministic downstream nodes behind an `approve:` gate:
+
+```yaml
+inputs:
+  drawing: { type: image, widget: file, read-strategy: vision, accept: [png, jpg, pdf],
+             description: The schedule drawing to extract (swappable per run). }
+nodes:
+  - id: extract
+    agent: vision
+    command: extract                 # the curated carve-out — runs a model at RUN time
+    config:
+      file:   "{{ inputs.drawing }}"  # bytes on the edge
+      model:  "claude-..."            # pinned in the lock; a swap re-invalidates approval
+      schema: { type: object, properties: { rows: { type: array, ... } } }  # FIXED output schema
+      prompt: "Extract each schedule row as {member, boltCount, ...}."
+  - id: write
+    # ...deterministic for-each over {{ extract.result.rows }}...
+    approve: { ... }                  # human eyeballs the extraction before any write
+```
+
+**floless seams for B2 (mostly already in place from SP1):**
+- The picker is the **SP1 file field** — a `read-strategy: vision` input already gets "Set
+  inputs ▸" and stores the path as `{{ inputs.drawing }}` (no new UI). Swap + Run; the
+  `vision.extract` node re-reads at runtime (content-cached, so a repeat input is replayed
+  from cache with no model call).
+- When AWARE stamps a `runtime-model` marker on the compiled node (RFC §5.3), `app-reader`
+  surfaces it and the canvas badges **"calls a model at run time"** so the approver sees it
+  honestly — wire this against the real lock field once `vision.extract` lands.
+- Gate the affordance/authoring on the installed `aware` version exposing `vision`
+  (`aware agent has vision extract`); degrade to B3 below the floor.
+
+## Server / UI seams (where this lives)
+
+- `server/visual-input-store.ts` — content-addressed store (`storeVisualInput`),
+  PDF-aware magic-byte sniff, path-safety.
+- `server/app-reader.ts` — `AppInput.widget/accept/readStrategy` + `isVisualInput`.
+- `POST /api/visual-input` (`server/index.ts`) — `{appId, name, dataUrl}` → `{path}`.
+- `web/aware.js` — `openInputsDialog` renders a `type:'file'` field (reuses `.fm-drop`);
+  on a fresh pick it uploads the data URL and stores the returned path as the input
+  value; `addNodeInputs` shows a `.ni-pair-file` chip (file glyph + basename).

package/dist/web/app.css

@@ -367,6 +367,17 @@
   }
   /* (the grabbing cursor during a pan is already forced by `.canvas.panning *` above) */
 
+  /* Canvas chrome (top label, bottom hint + Templates bar) paints ABOVE the
+     transform-panned topology with an OPAQUE background, so dragging the canvas
+     slides node cards cleanly BEHIND the chrome instead of overlapping it. The
+     toolbar already does this via its own z-index. */
+  .canvas > .panel-label,
+  .canvas > .hint { position: relative; z-index: 6; background: var(--bg); }
+  /* fav-bar is already opaque (surface); the notes pill stays translucent by design
+     — both just need to paint ABOVE the panned content (the notes stay readable). */
+  .canvas > .fav-bar,
+  .canvas > .notes-strip { position: relative; z-index: 6; }
+
   /* LINEAR */
   .topology:not(.dag) .agent-card { flex: 0 0 210px; }
 
@@ -563,6 +574,16 @@
     word-break: break-word;
   }
   .agent-card .blurb { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
+  /* B2: the one node that calls a model at run time (vision.extract). A subtle accent
+     pill so the approver sees the non-deterministic-on-first-input node honestly. */
+  .agent-card .rt-model-badge {
+    display: inline-flex; align-items: center; gap: 4px;
+    margin: 0 0 8px; padding: 2px 8px;
+    font: 600 10px/1.4 var(--ui); letter-spacing: 0.01em;
+    color: var(--accent); background: var(--accent-soft);
+    border: 1px solid var(--accent-dim); border-radius: 999px;
+    cursor: help;
+  }
   .agent-card .footer-row {
     display: flex;
     justify-content: space-between;
@@ -572,7 +593,10 @@
     border-top: 1px dashed var(--border-strong);
     padding-top: 8px;
   }
-  .agent-card .inspect-hint { color: var(--accent); opacity: 0.6; }
+  /* The "inspect ▸" hint is the explicit affordance that opens the Inspect panel —
+     read it as a button: pointer cursor + brighten/underline on hover. */
+  .agent-card .inspect-hint { color: var(--accent); opacity: 0.6; cursor: pointer; transition: opacity 0.12s; }
+  .agent-card .inspect-hint:hover { opacity: 1; text-decoration: underline; }
   .agent-card.selected .inspect-hint { opacity: 1; }
 
   /* LINEAR WIRES */
@@ -1515,7 +1539,9 @@
     left: 14px;
     display: flex;
     gap: 8px;
-    z-index: 5;
+    /* Above the canvas chrome (z-index:6) — it overlaps the hint band, and must
+       stay fully visible/clickable (it's the always-on zoom + Fit control). */
+    z-index: 7;
   }
   .toolbar-group {
     display: flex;
@@ -2350,6 +2376,23 @@ body {
   .fm-thumb-del { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 2px; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.12s, color 0.12s, border-color 0.12s; }
   .fm-thumb:hover .fm-thumb-del, .fm-thumb-del:focus-visible { opacity: 1; }
   .fm-thumb-del:hover { color: var(--err); border-color: var(--err); }
+  /* ===== Visual Input: single image/PDF file field (inputs dialog) ===== */
+  .fm-file { position: relative; }
+  .fm-file .fm-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+  .fm-drop .fm-drop-hint { display: block; margin-top: 3px; font-size: 10px; color: var(--text-dim); }
+  .fm-drop.has-file { min-height: auto; padding: 6px 10px; flex-direction: row; justify-content: space-between; gap: 8px; border-style: solid; cursor: default; text-align: left; }
+  .fm-drop.has-file:hover, .fm-drop.has-file:focus-visible { border-color: var(--border-strong); background: var(--surface-2); color: var(--text-muted); outline: none; }
+  .fm-file-glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 18px; border: 1px solid var(--accent-dim); border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
+  .fm-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--text); text-align: left; }
+  .fm-file-actions { display: flex; gap: 5px; flex-shrink: 0; }
+  .fm-file-replace, .fm-file-clear { font-size: 10px; padding: 3px 8px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); border-radius: 3px; cursor: pointer; font-family: var(--ui); }
+  .fm-file-replace:hover { color: var(--text); border-color: var(--accent-dim); }
+  .fm-file-clear:hover { color: var(--err); border-color: var(--err); }
+  /* Visual Input chip on the canvas input node */
+  .agent-card .node-inputs .ni-pair-file { align-items: center; }
+  .agent-card .node-inputs .ni-file-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 15px; border: 1px solid var(--accent-dim); border-radius: 3px; background: var(--accent-soft); color: var(--accent); font: 700 8px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
+  .agent-card .node-inputs .ni-file-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
+  .agent-card .node-inputs .ni-not-set { color: var(--text-dim); font-style: italic; font-weight: 400; }
   /* ===== Requests: snapshot thumbnails ===== */
   .req-thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
   .req-thumb { width: 46px; height: 46px; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg); overflow: hidden; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s; }

package/dist/web/app.js

@@ -346,6 +346,7 @@ function cardEl(id, ports) {
     </div>
     <div class="title">${a.title}</div>
     <div class="subtitle">${a.subtitle}</div>
+    ${a._runtimeModel ? '<div class="rt-model-badge" title="This node calls a model at run time (vision.extract). Output is content-cached and sits behind an approve gate — review the extraction before any write.">⚡ calls a model at run time</div>' : ''}
     <div class="blurb">${a.blurb}</div>
     <div class="footer-row">
       <span class="ports"><span class="ports-num">${ports.in}</span> in <span class="ports-arrow">·</span> <span class="ports-num">${ports.out}</span> out</span>

package/dist/web/aware.js

@@ -284,6 +284,7 @@
     for (const [k, v] of Object.entries(inputs || {})) if (k !== 'code') inputsNoCode[k] = v;
     return {
       _mode: n.mode,
+      _runtimeModel: !!n.runtimeModel, // B2: lock stamped runtime-model → card badge
       icon: iconFor(n.agent),
       kind: n.kind === 'agent' && n.agent ? `${agentLabel} agent` : escapeHtml(n.kind),
       version: pin ? `v${escapeHtml(String(pin))}` : '—',
@@ -780,13 +781,27 @@
   // every markSpecialNodes — which openInputsDialog calls right after a change.
   function addNodeInputs(card) {
     const vals = currentInputs();
-    const keys = Object.keys(vals);
+    const app = currentId && apps.get(currentId);
+    const declared = app && Array.isArray(app.inputs) ? app.inputs : [];
+    const byName = new Map(declared.map((i) => [i.name, i]));
+    const isVisual = (inp) => !!inp && (inp.widget === 'file' || inp.type === 'image' || inp.type === 'file');
+    const baseName = (p) => String(p || '').split(/[\\/]/).pop() || '';
+    // Show every SET value, plus any declared visual input (so its "not set" /
+    // attach affordance is visible on the node before the first pick).
+    const keys = [...new Set([...Object.keys(vals), ...declared.filter(isVisual).map((i) => i.name)])];
     if (!keys.length) return;
     const wrap = document.createElement('div');
     wrap.className = 'node-inputs';
-    wrap.innerHTML = keys
-      .map((k) => `<span class="ni-pair"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-val">${escapeHtml(String(vals[k]))}</span></span>`)
-      .join('');
+    wrap.innerHTML = keys.map((k) => {
+      const inp = byName.get(k);
+      if (isVisual(inp)) {
+        const v = String(vals[k] || '');
+        if (!v) return `<span class="ni-pair ni-pair-file ni-pair-file-empty"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-val ni-not-set">not set</span></span>`;
+        const glyph = /\.pdf$/i.test(v) ? 'pdf' : 'img';
+        return `<span class="ni-pair ni-pair-file"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-file-glyph">${glyph}</span><span class="ni-val ni-file-name" title="${escapeAttr(v)}">${escapeHtml(baseName(v))}</span></span>`;
+      }
+      return `<span class="ni-pair"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-val">${escapeHtml(String(vals[k]))}</span></span>`;
+    }).join('');
     card.appendChild(wrap);
   }
 
@@ -797,18 +812,57 @@
   function markSpecialNodes() {
     const rid = reportNodeId();
     const iid = inputNodeId();
-    document.querySelectorAll('.agent-card').forEach((card) => {
+    // B3: a baked-visual app (read-strategy: bake) has no runtime input node, so the
+    // "Re-read & re-bake ▸" affordance lands on the entry (first) node card.
+    const app = currentId && apps.get(currentId);
+    const rebakeInput = app && app.rebakeInput ? app.rebakeInput : null;
+    const cards = document.querySelectorAll('.agent-card');
+    const firstId = cards.length ? cards[0].dataset.agentId : null;
+    cards.forEach((card) => {
       const id = card.dataset.agentId;
       const isReport = !!rid && id === rid;
       const isInput = !!iid && id === iid;
+      const isRebake = !!rebakeInput && id === firstId;
       card.classList.toggle('report-node', isReport);
       card.classList.toggle('input-node', isInput);
+      card.classList.toggle('rebake-node', isRebake);
       // clear anything we injected last render, so re-renders never stack
       card.querySelectorAll('.node-action, .node-inputs').forEach((b) => b.remove());
       if (isInput) addNodeInputs(card); // current values, above the button
       if (isReport) addNodeAction(card, 'View report ▸', () => showReport(id));
       if (isInput) addNodeAction(card, 'Set inputs ▸', () => openInputsDialog());
+      if (isRebake) addNodeAction(card, 'Re-read & re-bake ▸', () => openRebakeDialog());
+    });
+  }
+
+  // B3 "swap re-bakes": pick a new source drawing for a baked app and queue a
+  // re-bake request. Thin-UI — the host AI (via the floless-app-rebake skill)
+  // does the actual re-read + re-bake at compose time; the browser only records
+  // intent + the new image. Re-uses the SP1 file field + the request relay.
+  async function openRebakeDialog() {
+    const app = currentId && apps.get(currentId);
+    if (!app || !app.rebakeInput) return;
+    const name = app.rebakeInput;
+    const res = await formModal({
+      title: `Re-read & re-bake · ${app.displayName}`,
+      sub: 'Swap the source drawing. Your terminal AI will re-read it, re-bake the values into config, then ask you to approve.',
+      fields: [{ name, label: `${name} — new source drawing`, type: 'file', accept: ['png', 'jpg', 'webp'] }],
+      okLabel: 'Queue re-bake',
     });
+    if (!res) return;
+    const dataUrl = res[name];
+    if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:')) { showToast('attach a drawing to re-bake', 'warn'); return; }
+    try {
+      const r = await fetch('/api/rebake', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ appId: app.id, inputName: name, snapshots: [{ dataUrl }] }),
+      });
+      const out = await r.json().catch(() => ({ ok: false, error: `re-bake failed (${r.status})` }));
+      if (!out || !out.ok) { showToast((out && out.error) || 'could not queue re-bake', 'err'); return; }
+      showToast('Queued — your terminal AI will re-read & re-bake, then ask you to approve.', 'ok');
+      appendNarration(`<strong>Re-bake queued</strong> for <strong>${escapeHtml(name)}</strong>. Your terminal AI will re-read the drawing, re-bake the config literals, and ask you to approve the new lock.`);
+    } catch { showToast('could not queue re-bake', 'err'); }
   }
 
   // Per-app declared-input values, set via the input node's double-click dialog.
@@ -932,25 +986,54 @@
     const app = currentId && apps.get(currentId);
     if (!app || !Array.isArray(app.inputs) || !app.inputs.length) return;
     const cur = currentInputs();
-    const fields = app.inputs.map((inp) => ({
-      name: inp.name,
-      label: inp.name + (inp.description ? ` — ${inp.description}` : ''),
-      type: inp.type === 'integer' || inp.type === 'number' ? 'number' : 'text',
-      value: cur[inp.name] != null ? cur[inp.name] : inp.default != null ? inp.default : '',
-    }));
+    const isVisual = (inp) => inp.widget === 'file' || inp.type === 'image' || inp.type === 'file';
+    const visualNames = new Set(app.inputs.filter(isVisual).map((i) => i.name));
+    const fields = app.inputs.map((inp) => isVisual(inp)
+      ? {
+          name: inp.name,
+          label: inp.name + (inp.description ? ` — ${inp.description}` : ''),
+          type: 'file',
+          accept: inp.accept,
+          value: cur[inp.name] != null ? cur[inp.name] : '',
+        }
+      : {
+          name: inp.name,
+          label: inp.name + (inp.description ? ` — ${inp.description}` : ''),
+          type: inp.type === 'integer' || inp.type === 'number' ? 'number' : 'text',
+          value: cur[inp.name] != null ? cur[inp.name] : inp.default != null ? inp.default : '',
+        });
     const res = await formModal({ title: `Inputs · ${app.displayName}`, sub: 'Set the values this run uses, then ▶ Run workflow.', fields, okLabel: 'Set inputs' });
     if (!res) return;
     const store = {};
-    app.inputs.forEach((inp) => {
+    for (const inp of app.inputs) {
+      if (isVisual(inp)) {
+        const v = res[inp.name];
+        if (typeof v === 'string' && v.startsWith('data:')) {
+          // Fresh pick/paste → persist it to the store; the input VALUE is the path.
+          try {
+            const r = await fetch('/api/visual-input', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ appId: app.id, name: inp.name, dataUrl: v }),
+            });
+            const up = await r.json().catch(() => ({ ok: false, error: `upload failed (${r.status})` }));
+            if (!up || !up.ok) { showToast((up && up.error) || 'could not store the file', 'err'); return; }
+            store[inp.name] = up.path;
+          } catch { showToast('could not upload the file', 'err'); return; }
+        } else if (typeof v === 'string' && v) {
+          store[inp.name] = v; // unchanged existing path
+        } // cleared/empty → omit (no value)
+        continue;
+      }
       let v = String(res[inp.name] ?? '').trim();
-      if (v === '') { if (inp.default != null) v = String(inp.default); else return; }
-      if (inp.type === 'integer' || inp.type === 'number') { const num = Number(v); if (!Number.isNaN(num)) { store[inp.name] = num; return; } }
+      if (v === '') { if (inp.default != null) v = String(inp.default); else continue; }
+      if (inp.type === 'integer' || inp.type === 'number') { const num = Number(v); if (!Number.isNaN(num)) { store[inp.name] = num; continue; } }
       store[inp.name] = v;
-    });
+    }
     appInputValues.set(currentId, store);
     markSpecialNodes();
     refreshDirtyIndicator(); // values changed → reflect unsaved state in the header/menu
-    const badge = Object.entries(store).map(([k, v]) => `${k}=${v}`).join(' · ');
+    const badge = Object.entries(store).map(([k, v]) => `${k}=${visualNames.has(k) ? String(v).split(/[\\/]/).pop() : v}`).join(' · ');
     appendNarration(`Inputs set — <strong>${escapeHtml(badge)}</strong>. Run with <strong>▶ Run workflow</strong>.`);
     showToast('Inputs set: ' + badge, 'ok');
   }
@@ -1286,6 +1369,16 @@
             <div class="fm-drop" role="button" tabindex="0" aria-label="Paste a screenshot or click to attach">Paste a screenshot (Ctrl+V) or click to add<input type="file" accept="image/*" multiple class="fm-file-input" tabindex="-1" aria-hidden="true"></div>
             <div class="fm-thumbs" hidden></div>
           </div>`;
+        } else if (f.type === 'file') {
+          // Single image/PDF Visual Input. Reuses the .fm-drop visual language; the
+          // hidden file input is a SIBLING of the drop (not a child) so render() can
+          // freely rewrite the drop's innerHTML between empty/has-file without losing it.
+          const accepts = (f.accept && f.accept.length) ? f.accept : ['png', 'jpg', 'webp', 'pdf'];
+          const acceptAttr = accepts.map((e) => '.' + String(e).replace(/^\./, '')).join(',');
+          ctl = `<div class="fm-file" data-fm-file-box="${escapeAttr(f.name)}" data-accept-hint="${escapeAttr(accepts.join(', ').toUpperCase())}" data-init-value="${escapeAttr(val)}">
+            <div class="fm-drop" role="button" tabindex="0" aria-label="Attach an image or PDF"></div>
+            <input type="file" accept="${escapeAttr(acceptAttr)}" class="fm-file-input" tabindex="-1" aria-hidden="true">
+          </div>`;
         } else {
           ctl = f.multiline
             ? `<textarea id="${id}" rows="4" data-fm="${escapeHtml(f.name)}" placeholder="${ph}">${escapeHtml(val)}</textarea>`
@@ -1333,32 +1426,81 @@
           fileInput.value = '';
         };
       });
-      // ── paste support: paste an image into the modal → first images field ──────
+      // ── file-field setup (single image/PDF Visual Input) ───────────────────────
+      // st.mode: 'empty' | 'path' (a previously-set on-disk path, passed through
+      // unchanged) | 'dataurl' (a fresh pick/paste the caller uploads to the store).
+      const fileStates = new Map();
+      const fmBaseName = (p) => String(p || '').split(/[\\/]/).pop() || '';
+      const fmExtOf = (p) => { const m = /\.([a-z0-9]+)$/i.exec(String(p || '')); return m ? m[1].toLowerCase() : ''; };
+      $body.querySelectorAll('.fm-file').forEach((box) => {
+        const name = box.dataset.fmFileBox;
+        const hint = box.dataset.acceptHint || 'PNG, JPG, PDF';
+        const drop = box.querySelector('.fm-drop');
+        const fileInput = box.querySelector('.fm-file-input');
+        const init = box.dataset.initValue || '';
+        const st = init
+          ? { mode: 'path', value: init, name: fmBaseName(init), ext: fmExtOf(init) }
+          : { mode: 'empty', value: '', name: '', ext: '' };
+        const render = () => {
+          const has = st.mode !== 'empty';
+          drop.classList.toggle('has-file', has);
+          if (!has) {
+            drop.innerHTML = `Paste (Ctrl+V) or click to attach<span class="fm-drop-hint">${escapeHtml(hint)}</span>`;
+            return;
+          }
+          const glyph = st.ext === 'pdf' ? 'pdf' : 'img';
+          drop.innerHTML = `<span class="fm-file-glyph">${glyph}</span><span class="fm-file-name" title="${escapeAttr(st.value)}">${escapeHtml(st.name)}</span><span class="fm-file-actions"><button type="button" class="fm-file-replace">Replace</button><button type="button" class="fm-file-clear">Clear</button></span>`;
+          drop.querySelector('.fm-file-replace').onclick = (e) => { e.stopPropagation(); fileInput.click(); };
+          drop.querySelector('.fm-file-clear').onclick = (e) => { e.stopPropagation(); st.mode = 'empty'; st.value = ''; st.name = ''; st.ext = ''; render(); };
+        };
+        const setFile = (file) => {
+          if (!file) return;
+          const ext = fmExtOf(file.name) || (file.type === 'application/pdf' ? 'pdf' : '');
+          const reader = new FileReader();
+          reader.onload = () => { st.mode = 'dataurl'; st.value = reader.result; st.name = file.name || ('pasted.' + (ext || 'png')); st.ext = ext; render(); };
+          reader.onerror = () => showToast('could not read the file', 'err');
+          reader.readAsDataURL(file);
+        };
+        drop.onclick = () => { if (st.mode === 'empty') fileInput.click(); };
+        drop.onkeydown = (e) => { if ((e.key === 'Enter' || e.key === ' ') && st.mode === 'empty') { e.preventDefault(); fileInput.click(); } };
+        fileInput.onchange = () => { const f0 = (fileInput.files || [])[0]; if (f0) setFile(f0); fileInput.value = ''; };
+        fileStates.set(name, { st, setFile });
+        render();
+      });
+      // ── paste support: an image into the modal → the images field, else the file field ──
       $body.onpaste = (e) => {
-        const box = $body.querySelector('.fm-images');
-        if (!box) return;
         const items = Array.from((e.clipboardData && e.clipboardData.items) || []);
         const imgs = items.filter((it) => it.kind === 'file' && it.type.startsWith('image/'));
-        if (!imgs.length) return;
+        const box = $body.querySelector('.fm-images');
+        if (box) {
+          if (!imgs.length) return;
+          e.preventDefault();
+          const entry = imageStates.get(box.dataset.fmImages);
+          if (!entry) return;
+          const { state, renderThumbs } = entry;
+          const room = Math.max(0, 8 - state.length);
+          if (imgs.length > room) showToast('Max 8 snapshots', 'warn');
+          imgs.slice(0, room).forEach((it) => {
+            const file = it.getAsFile();
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = () => { state.push({ name: file.name || 'pasted.png', dataUrl: reader.result }); renderThumbs(); };
+            reader.readAsDataURL(file);
+          });
+          return;
+        }
+        const fileBox = $body.querySelector('.fm-file');
+        if (!fileBox || !imgs.length) return;
         e.preventDefault();
-        const name = box.dataset.fmImages;
-        const entry = imageStates.get(name);
-        if (!entry) return;
-        const { state, renderThumbs } = entry;
-        const room = Math.max(0, 8 - state.length);
-        if (imgs.length > room) showToast('Max 8 snapshots', 'warn');
-        imgs.slice(0, room).forEach((it) => {
-          const file = it.getAsFile();
-          if (!file) return;
-          const reader = new FileReader();
-          reader.onload = () => { state.push({ name: file.name || 'pasted.png', dataUrl: reader.result }); renderThumbs(); };
-          reader.readAsDataURL(file);
-        });
+        const entry = fileStates.get(fileBox.dataset.fmFileBox);
+        const file = imgs[0].getAsFile();
+        if (entry && file) entry.setFile(file);
       };
       const collect = () => {
         const out = {};
         $body.querySelectorAll('[data-fm]').forEach((el) => { out[el.dataset.fm] = el.value; });
         imageStates.forEach((entry, name) => { out[name] = entry.state; });
+        fileStates.forEach((entry, name) => { out[name] = entry.st.mode === 'empty' ? '' : entry.st.value; });
         return out;
       };
       const done = (result) => {
@@ -3036,6 +3178,13 @@
       const scope = req.panelId ? ` (panel "${req.panelId}")` : '';
       return `Customize my floless.app dashboard${scope}: ${req.instruction}. Edit ~/.floless/ui/extensions.json per the floless-app-ui skill, then check it with \`aware agent invoke ui validate\`.`;
     }
+    if (req.type === 'rebake') {
+      const where = req.inputName ? ` (input "${req.inputName}")` : '';
+      const snaps = req.snapshots && req.snapshots.length
+        ? `\nNew drawing${req.snapshots.length > 1 ? 's' : ''} (read for the re-extraction): ${req.snapshots.join(', ')}`
+        : '';
+      return `In floless app "${req.appId}", re-read & re-bake${where} per the floless-app-rebake skill: ${req.instruction}${snaps}`;
+    }
     return '';
   }
 
@@ -3114,9 +3263,13 @@
       return;
     }
     $list.innerHTML = pendingRequests.map((r) => {
-      const label = r.type === 'use-template' ? 'template' : r.type === 'ui-customize' ? 'dashboard' : 'tweak';
-      const badgeCls = r.type === 'tweak' || r.type === 'ui-customize' ? 'req-type req-type-tweak' : 'req-type';
-      const target = r.type === 'tweak' && r.nodeId ? ` · node <code>${escapeHtml(r.nodeId)}</code>` : '';
+      const label = r.type === 'use-template' ? 'template' : r.type === 'ui-customize' ? 'dashboard' : r.type === 'rebake' ? 're-bake' : '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>`
+        : r.type === 'rebake' && r.inputName
+          ? ` · input <code>${escapeHtml(r.inputName)}</code>`
+          : '';
       const when = r.createdAt ? new Date(r.createdAt) : null;
       const time = when && !isNaN(when) ? `<span class="req-time">${escapeHtml(nowStamp(when))}</span>` : '';
       return `

package/package.json

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