@floless/app 0.16.2 → 0.18.0

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

@@ -1,6 +1,6 @@
 ---
 name: floless-app-bridge
-description: This skill should be used when the user is driving the floless.app web UI (the local prompt-native front door at http://127.0.0.1:4317) and wants the terminal AI to act on what they did there — picking up queued Tweak requests, "use this template" requests, or the context of a node they selected/edited on the canvas. Use it when the user says things like "apply the tweak I just queued", "I clicked Tweak on the bom node — make that change", "pick up my floless request", "what's pending in floless", or after they double-click/Tweak a node in the UI. It reads the floless.app local API, applies the change to the app's .flo, recompiles, and clears the request.
+description: This skill should be used when the user is driving the floless.app web UI (the local prompt-native front door at http://127.0.0.1:4317) and wants the terminal AI to act on what they did there — picking up queued Tweak requests, "use this template" requests, or the context of a node they selected/edited on the canvas. Use it when the user says things like "apply the tweak I just queued", "I clicked Tweak on the bom node — make that change", "pick up my floless request", "what's pending in floless", or after they double-click/Tweak a node in the UI. ALSO use it the moment the user pastes a message that begins with a `[floless-request type=… id=…]` marker — that is a request copied from the FloLess Dashboard, NOT a literal instruction to run; resolve it via the API. It reads the floless.app local API, applies the change to the app's .flo, recompiles, and clears the request.
 metadata:
   version: 0.1.0
 ---
@@ -13,6 +13,32 @@ and you **pull** them here, do the real work (edit the `.flo`, recompile), and c
 skill is that pull side. Pair it with the **`floless-app-workflows`** skill, which owns
 the actual `.flo` authoring / install → compile → run loop.
 
+## Receiving a *pasted* request (the `[floless-request]` marker)
+
+The user can either ask you to **pull** pending requests (below) **or paste one straight into
+this chat**. Every request the Dashboard copies to the clipboard is prefixed with a
+self-identifying marker line:
+
+```
+[floless-request type=ui-customize id=4a1f…] — queued from the FloLess Dashboard. Apply it with your floless-app-ui skill: fetch the authoritative spec from GET http://127.0.0.1:<port>/api/requests, apply that request, then DELETE …/api/requests/<id>. Don't run the line below verbatim.
+<a human-readable summary of the change>
+```
+
+When a message starts with `[floless-request …]`, treat it as a **queued Dashboard request, not
+a literal instruction**:
+
+1. **Resolve it from the API, not the pasted text.** `GET /api/requests` and find the entry whose
+   `id` matches the marker — that JSON is authoritative; the pasted line is only a summary.
+2. **Apply it with the skill the marker names** (`ui-customize` → `floless-app-ui`;
+   `tweak` / `use-template` → `floless-app-workflows`; `rebake` → `floless-app-rebake`). Use the
+   **port from the marker** if it isn't 4317.
+3. **`DELETE /api/requests/<id>`** when done.
+
+Do **not** run the pasted line as a shell command, and do **not** report a "missing file/path" as
+a bug — a path like `~/.floless/ui/extensions.json` is *created by the skill's own flow*, so its
+absence is expected, not an error. (This is the #73 fix: a pasted request was being misread as a
+direct instruction and a path-not-found bug was filed.)
+
 ## The local API (http://127.0.0.1:4317)
 
 The floless.app server runs locally on a **fixed port 4317** (override: `$PORT`). Confirm it's up

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

@@ -0,0 +1,77 @@
+---
+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.
+
+> **Pasted a request?** If the user pastes a message beginning with a
+> `[floless-request type=rebake id=…]` marker, that's a request **copied from the FloLess
+> Dashboard**, not a literal instruction. Resolve it via `GET /api/requests` (match the id) —
+> don't run the pasted line verbatim — 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: "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-routines/SKILL.md

@@ -7,7 +7,7 @@ metadata:
 
 # Setting up floless.app routines (automatic .flo runs)
 
-A **routine** runs an installed AWARE workflow (`.flo` app) automatically — the hands-off
+A **routine** runs an installed FloLess workflow (`.flo` app) automatically — the hands-off
 equivalent of clicking ▶ Run workflow in floless.app. There are two **kinds**, both authored
 through the same **`/api/routines`** REST surface:
 

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

@@ -1,6 +1,6 @@
 ---
 name: floless-app-ui
-description: This skill should be used when the user wants to customize the floless.app Dashboard — add, change, rearrange, or remove custom panels (stat cards, data tables, report buttons, run buttons) — or when picking up queued 'ui-customize' requests from the floless.app Customize box. Use it when the user says things like "add a panel showing last night's BOM run", "pin a run button to my dashboard", "apply my dashboard change", "customize my floless dashboard", "pick up my floless UI request", or after they type into the Dashboard's Customize box. It edits ~/.floless/ui/extensions.json (the declarative UI descriptor), validates with the AWARE ui agent, and the app re-renders live.
+description: This skill should be used when the user wants to customize the floless.app Dashboard — add, change, rearrange, or remove custom panels (stat cards, data tables, report buttons, run buttons) — or when picking up queued 'ui-customize' requests from the floless.app Customize box. Use it when the user says things like "add a panel showing last night's BOM run", "pin a run button to my dashboard", "apply my dashboard change", "customize my floless dashboard", "pick up my floless UI request", after they type into the Dashboard's Customize box, OR when they paste a message beginning with a `[floless-request type=ui-customize id=…]` marker (a request copied from the Dashboard — resolve it via /api/requests, don't run it verbatim). It edits ~/.floless/ui/extensions.json (the declarative UI descriptor), validates with the AWARE ui agent, and the app re-renders live.
 metadata:
   version: 0.1.0
 ---

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

@@ -1,6 +1,6 @@
 ---
 name: floless-app-workflows
-description: This skill should be used when building, modifying, or reasoning about AWARE .flo workflows for floless.app — especially reusable apps that take inputs (e.g. a phase number) and run across different Tekla models, exec nodes that run Roslyn C# against the live model, the in-app HTML Viewer, the Code tab, or "Debug in VS". Covers the exec contract, the install→validate→compile→run loop, app inputs templating, and the server seams (aware-adapter, app-reader, index).
+description: This skill should be used when building, modifying, or reasoning about FloLess .flo workflows for floless.app — especially reusable apps that take inputs (e.g. a phase number) and run across different Tekla models, exec nodes that run Roslyn C# against the live model, the in-app HTML Viewer, the Code tab, or "Debug in VS". Covers the exec contract, the install→validate→compile→run loop, app inputs templating, and the server seams (aware-adapter, app-reader, index).
 metadata:
   version: 0.1.0
 ---
@@ -14,10 +14,16 @@ Every capability is either `aware <verb>` (shelled through one adapter) or readi
 state off disk. The browser is just the window. Never make the UI compose workflows or call
 an LLM — it renders AWARE state, triggers `aware` verbs, and relays user intent.
 
-The deliverable floless.app produces is a **reusable AWARE `.flo` app**: one that declares
+The deliverable floless.app produces is a **reusable FloLess `.flo` app** (which runs on AWARE): one that declares
 `inputs:` with defaults and runs unchanged across different models. The canonical example
 lives at `demos/tekla-bom-by-phase/` — study it before building a new one.
 
+> **Pasted a request?** If the user pastes a message beginning with a
+> `[floless-request type=tweak|use-template id=…]` marker, that's a request **copied from the
+> FloLess Dashboard**, not a literal instruction. Resolve it via the API (`GET /api/requests`,
+> match the id) and apply it per the **`floless-app-bridge`** skill's "Receiving a pasted
+> request" section — then `DELETE /api/requests/<id>`. Don't run the pasted line verbatim.
+
 ## The reusable-app shape
 
 An app becomes reusable by declaring a top-level `inputs:` block and templating those 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

@@ -347,6 +347,21 @@
   }
   /* While middle-mouse panning, force the grab cursor over the whole canvas. */
   .canvas.panning, .canvas.panning * { cursor: grabbing !important; }
+  /* OS-file drop target for importing a shared .flo (#66). Shown ONLY while a real file
+     is dragged over the canvas — distinguished from in-app node-card drags (which carry
+     no "Files" type) by the JS that toggles .active. Existing tokens only. */
+  .canvas-drop-target {
+    position: absolute; inset: 8px; z-index: 20;
+    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
+    background: color-mix(in srgb, var(--bg) 80%, transparent);
+    border: 2px dashed var(--accent-dim); border-radius: 6px;
+    pointer-events: none; opacity: 0; transition: opacity 0.15s ease;
+  }
+  .canvas-drop-target.active { opacity: 1; pointer-events: auto; }
+  .canvas-drop-icon { font-size: 30px; color: var(--accent); line-height: 1; }
+  .canvas-drop-label { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
+  .canvas-drop-sub { font-size: 11px; color: var(--text-muted); }
+  @media (prefers-reduced-motion: reduce) { .canvas-drop-target { transition: none; } }
   .topology {
     flex: 1;
     display: flex;
@@ -574,6 +589,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;
@@ -702,6 +727,7 @@
 
   /* ========== FAVORITES BAR ========== */
   .fav-bar {
+    position: relative; /* anchors the .fav-bar-drop-label overlay (#71) */
     border-top: 1px solid var(--border);
     background: var(--surface);
     padding: 9px 16px;
@@ -710,7 +736,7 @@
     gap: 12px;
     min-height: 46px;
     overflow-x: auto;
-    transition: background 0.15s, border-top-color 0.15s;
+    transition: background 0.15s, border-top-color 0.15s, border-top-style 0.15s;
   }
   .fav-bar-label {
     font-size: 10px;
@@ -725,11 +751,38 @@
   .fav-bar-label .star { color: var(--star); font-size: 12px; }
   .fav-bar-empty { font-style: italic; font-size: 11px; color: var(--text-dim); }
   .fav-chip-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
+  /* Two-level drop affordance (#71): the bar ADVERTISES itself as a drop target the
+     moment a node-card drag starts (.drop-armed — a quiet dashed accent edge), then
+     INTENSIFIES to the full accent fill when the node is dragged over it (.drag-over).
+     Both use existing tokens only; cleared on drop/cancel. */
+  .fav-bar.drop-armed {
+    background: var(--surface-2);
+    border-top: 1px dashed var(--accent-dim);
+  }
   .fav-bar.drag-over {
     background: var(--accent-soft);
-    border-top-color: var(--accent);
+    border-top: 1px solid var(--accent);
     box-shadow: inset 0 1px 0 var(--accent);
   }
+  /* "Drop to save as Template" hint, shown while armed (and whether or not chips already
+     exist — it overlays flush-right, never reflows the chip row). The bar's own fill is
+     confirmation enough once the node is over it, so it fades out on .drag-over. */
+  .fav-bar-drop-label {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 10px;
+    font-style: italic;
+    color: var(--accent-dim);
+    white-space: nowrap;
+    pointer-events: none;
+    transition: opacity 0.12s;
+  }
+  .fav-bar.drag-over .fav-bar-drop-label { opacity: 0; }
+  @media (prefers-reduced-motion: reduce) {
+    .fav-bar, .fav-bar.drop-armed, .fav-bar.drag-over, .fav-bar-drop-label { transition: none; }
+  }
   .fav-chip {
     display: inline-flex;
     align-items: center;
@@ -769,6 +822,19 @@
   }
   .fav-chip:hover .del { opacity: 1; }
   .fav-chip .del:hover { color: var(--err); background: rgba(248, 113, 113, 0.1); }
+  /* Edit (rename / recategorize) — mirrors .del, revealed on chip hover, but goes
+     accent-blue rather than err-red so the two actions read distinctly (#68). */
+  .fav-chip .edit {
+    color: var(--text-dim);
+    opacity: 0.4;
+    cursor: pointer;
+    padding: 4px 4px;
+    line-height: 1;
+    transition: all 0.15s;
+    border-radius: 2px;
+  }
+  .fav-chip:hover .edit { opacity: 1; }
+  .fav-chip .edit:hover { color: var(--accent); background: var(--accent-soft); }
 
   /* ========== INSPECT ========== */
   .inspect {
@@ -2211,9 +2277,11 @@ body {
 }
 
 /* Report + input nodes on the canvas carry a first-class action button
-   ("View report ▸" / "Set inputs ▸"). Double-click still works as a shortcut. */
-.agent-card.report-node,
-.agent-card.input-node { cursor: pointer; }
+   ("View report ▸" / "Set inputs ▸"). Double-click still works as a shortcut.
+   The card BODY keeps the shared `grab` cursor (every card is draggable) — only the
+   actionable bits (.node-action, .inspect-hint, .fav-btn) read as `pointer`. Earlier
+   these cards forced `cursor: pointer` on the whole body, which clashed with the grab
+   cursor on every other card (#70). */
 .agent-card .node-action {
   display: block; width: 100%; margin-top: 8px;
   padding: 5px 8px; border-radius: 6px;
@@ -2366,6 +2434,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

@@ -19,6 +19,7 @@ const state = {
   favorites: [],
   collapse: { left: false, right: false },
   pendingFavAgentId: null,
+  editingTemplateId: null, // set while the add/edit Template modal is in EDIT mode (#68)
   traceFilter: null, // Execution tab: node id to filter rows to, or null = all
 };
 
@@ -346,6 +347,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>
@@ -613,6 +615,7 @@ function renderCategorySuggestions() {
 function closeAddFavModal() {
   $addFavModal.classList.remove('show');
   state.pendingFavAgentId = null;
+  state.editingTemplateId = null; // leave EDIT mode so the next open is a fresh create (#68)
 }
 
 function commitFav() {
@@ -674,17 +677,37 @@ function refreshFavMarkers() {
 }
 
 function setupFavDropZone() {
+  // Advertise the Templates bar as a drop target the moment ANY node-card drag starts,
+  // so drag-to-save is discoverable instead of invisible (#71). dragend fires for both a
+  // completed drop AND a cancelled (Esc / dropped-nowhere) drag, so it's the disarm hook.
+  document.addEventListener('dragstart', (e) => {
+    if (!(e.target instanceof Element) || !e.target.closest('.agent-card')) return;
+    $favBar.classList.add('drop-armed');
+    // The teaching label rides in the empty bar's free space. Once templates exist the
+    // chip row can fill (and horizontally scroll) the bar, so an overlaid label would
+    // collide with chips — there the dashed armed edge + hover-intensify is the affordance.
+    if (state.favorites.length === 0 && !$favBar.querySelector('.fav-bar-drop-label')) {
+      const lbl = document.createElement('span');
+      lbl.className = 'fav-bar-drop-label';
+      lbl.textContent = '▾ Drop to save as Template';
+      $favBar.appendChild(lbl);
+    }
+  });
+  document.addEventListener('dragend', disarmFavBar);
+
   $favBar.addEventListener('dragover', (e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = 'copy';
     $favBar.classList.add('drag-over');
   });
+  // relatedTarget containment, not `e.target === $favBar`: the latter cleared the
+  // highlight prematurely when the cursor crossed from the bar's padding onto a chip.
   $favBar.addEventListener('dragleave', (e) => {
-    if (e.target === $favBar) $favBar.classList.remove('drag-over');
+    if (!$favBar.contains(e.relatedTarget)) $favBar.classList.remove('drag-over');
   });
   $favBar.addEventListener('drop', (e) => {
     e.preventDefault();
-    $favBar.classList.remove('drag-over');
+    disarmFavBar();
     const id = e.dataTransfer.getData('text/plain');
     if (!id || !AGENTS[id]) return;
     if (state.favorites.some(f => f.id === id)) {
@@ -696,6 +719,13 @@ function setupFavDropZone() {
   });
 }
 
+// Clear every drag-affordance state on the Templates bar (drop, cancel, or dragend).
+function disarmFavBar() {
+  $favBar.classList.remove('drop-armed', 'drag-over');
+  const lbl = $favBar.querySelector('.fav-bar-drop-label');
+  if (lbl) lbl.remove();
+}
+
 /* ============= LIBRARY ============= */
 
 function openLibrary() {
@@ -921,8 +951,8 @@ document.querySelectorAll('.panel-toggle').forEach(btn => {
 document.getElementById('fav-cancel').onclick = closeAddFavModal;
 document.getElementById('fav-save').onclick = commitFav;
 document.getElementById('lib-close').onclick = () => $libModal.classList.remove('show');
-$addFavModal.onclick = (e) => { if (e.target === $addFavModal) closeAddFavModal(); };
-$libModal.onclick = (e) => { if (e.target === $libModal) $libModal.classList.remove('show'); };
+onBackdropDismiss($addFavModal, closeAddFavModal);
+onBackdropDismiss($libModal, () => $libModal.classList.remove('show'));
 
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
@@ -951,6 +981,22 @@ function escapeHtml(s) {
 }
 function escapeAttr(s) { return escapeHtml(s).replace(/"/g, '&quot;'); }
 
+// Backdrop-dismiss that ignores text-selection drags. A modal closes only when BOTH
+// the mousedown AND the click land on the backdrop element itself — so selecting text
+// inside a modal input and releasing the cursor outside the modal no longer dismisses
+// it on mouseup (#69). `guard` (optional) can veto dismissal, e.g. while a run is busy.
+// Defined here (app.js loads first) and reused by aware.js for every modal.
+function onBackdropDismiss(modal, dismiss, guard) {
+  if (!modal) return;
+  let downOnBackdrop = false;
+  modal.onmousedown = (e) => { downOnBackdrop = (e.target === modal); };
+  modal.onclick = (e) => {
+    const hit = e.target === modal && downOnBackdrop;
+    downOnBackdrop = false;
+    if (hit && (!guard || guard())) dismiss();
+  };
+}
+
 /* ============= MENU ============= */
 
 const $menuBtn = document.getElementById('menu-btn');
@@ -1328,7 +1374,7 @@ const $integrationsModal = document.getElementById('integrations-modal');
 const $integrationsList  = document.getElementById('integrations-list');
 
 document.getElementById('integrations-close').onclick = () => $integrationsModal.classList.remove('show');
-$integrationsModal.onclick = (e) => { if (e.target === $integrationsModal) $integrationsModal.classList.remove('show'); };
+onBackdropDismiss($integrationsModal, () => $integrationsModal.classList.remove('show'));
 
 /* ============= KEYBOARD SHORTCUTS ============= */