@floless/app 0.5.1

package/dist/web/aware.js

@@ -0,0 +1,3274 @@
+/* ============================================================================
+ * aware.js — wires the demo skin to live AWARE data via the floless.app server.
+ *
+ * Loaded AFTER app.js, so it shares its globals (PROMPTS, AGENTS, state,
+ * renderTopology, renderInspect, selectAgent, renderChat, $promptSel, $runBtn,
+ * escapeHtml, showToast, appendNarration). It mutates PROMPTS/AGENTS from real
+ * /api data and reuses the existing renderers — the canvas stays the demo's.
+ *
+ * The UI never becomes the brain: it reads AWARE state, triggers `aware` verbs
+ * (compile/run) through /api, and enforces the build-once/run-forever gate.
+ * ========================================================================== */
+(() => {
+  const $compileBtn = document.getElementById('compile-btn');
+  const $menuBakeItem = document.getElementById('menu-bake-item');
+  const $menuBakeLabel = document.getElementById('menu-bake-label');
+  const $simBtn = document.getElementById('sim-btn');
+  const $runState = document.getElementById('run-state');
+  const $notesStrip = document.getElementById('notes-strip');
+  const $reportModal = document.getElementById('report-modal');
+  const $reportFrame = document.getElementById('report-frame');
+  const $reportOverlay = document.getElementById('report-overlay');
+  const $reportTitle = document.getElementById('report-title');
+  const $reportSub = document.getElementById('report-sub');
+  const $reportOpen = document.getElementById('report-open');
+  const $reportClose = document.getElementById('report-close');
+
+  // One persistent array the inspect Execution tab reads; we mutate in place so
+  // every AGENTS[node].execution reference stays valid across re-renders.
+  const liveTrace = [];
+  // Latest normalized app payload, keyed by id, so handlers can read mode/gate.
+  const apps = new Map();
+  let currentId = null;
+
+  // Local UI-state persistence (per origin; never touches the .flo or lock).
+  // The last-opened app is restored on refresh; per-app input values are saved
+  // explicitly via "Save inputs" (Ctrl+S) and rehydrated when the app opens.
+  const LS_LAST_APP = 'floless:lastApp';
+  const lsInputsKey = (id) => 'floless:inputs:' + id;
+  function loadSavedInputs(id) {
+    try {
+      const v = JSON.parse(localStorage.getItem(lsInputsKey(id)) || 'null');
+      return v && typeof v === 'object' ? v : null;
+    } catch { return null; }
+  }
+
+  // Notes-strip collapse memory, keyed by app + a signature of the note set, so a
+  // collapsed strip STAYS collapsed across sessions — but a recompile that changes
+  // the notes (a new issue) invalidates the signature and re-expands, so the user
+  // never misses a genuinely new note.
+  const lsNotesKey = (id) => 'floless:notes:' + id;
+  function notesSig(notes) {
+    const s = notes.map((nt) => (nt.nodeId || '') + '|' + (nt.kind || '') + '|' + nt.text).join('\n');
+    let h = 5381;
+    for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+    return notes.length + ':' + (h >>> 0).toString(36);
+  }
+  // Tri-state: true/false = the user's remembered choice for THIS note set;
+  // undefined = no choice yet (caller defaults by severity).
+  function notesRememberedCollapse(id, sig) {
+    try {
+      const v = JSON.parse(localStorage.getItem(lsNotesKey(id)) || 'null');
+      if (v && v.sig === sig) return !!v.collapsed;
+    } catch { /* ignore */ }
+    return undefined;
+  }
+  function saveNotesCollapsed(id, sig, collapsed) {
+    try { localStorage.setItem(lsNotesKey(id), JSON.stringify({ sig, collapsed })); } catch { /* ignore */ }
+  }
+
+  // Re-phrase a recognized AWARE info-note into plain language for AEC users.
+  // Severity always comes from note.kind, never this text — so if the wording
+  // ever changes and the pattern misses, we just fall back to the raw note.
+  function humanizeNote(text) {
+    const m = /command\s+(\S+)\s+(?:not found|is mode-overridable);\s*using author-declared mode:\s*(read|write)/i.exec(text);
+    if (m) {
+      const cmd = m[1];
+      return m[2].toLowerCase() === 'read'
+        ? `Runs custom read-only code (${cmd}) using the read-only mode set on this node — no model or file changes.`
+        : `Runs custom code (${cmd}) in the write mode set on this node.`;
+    }
+    return text;
+  }
+
+  const AGENT_ICONS = {
+    tekla: '⊞', file: '🗀', excel: '◵', revit: '◰', slack: '✦',
+    'trimble-connect': '☁', 'microsoft-365': '✉', email: '✉', http: '⇄',
+  };
+  const iconFor = (agent) => AGENT_ICONS[agent] || '◈';
+
+  // The demo's renderChat staggers narration via setTimeout; its bootstrap call
+  // (fired before this script runs) would otherwise drip stale demo lines into
+  // our chat. Replace it with a synchronous version, and clear any stragglers
+  // already scheduled by the original before we took over.
+  renderChat = function renderChatSync() {
+    const p = PROMPTS[state.promptKey];
+    $messages.innerHTML = '';
+    if (!p) return;
+    $messages.appendChild(msgEl('user', '$ you', p.userText));
+    (p.narration || []).forEach((line) => $messages.appendChild(msgEl('aware', 'claude', mdInline(line))));
+    $messages.scrollTop = $messages.scrollHeight;
+  };
+
+  async function api(path, opts) {
+    const res = await fetch(path, {
+      headers: { 'content-type': 'application/json' },
+      ...opts,
+    });
+    const body = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
+    if (!res.ok || body.ok === false) throw new Error(body.error || `HTTP ${res.status}`);
+    return body;
+  }
+
+  // ── transform: normalized app -> the renderer's PROMPTS/AGENTS shapes ──────
+
+  function nodeYaml(n) {
+    const lines = [`id: ${n.id}`, `kind: ${n.kind}`];
+    if (n.agent) lines.push(`agent: ${n.agent}`);
+    if (n.command) lines.push(`command: ${n.command}`);
+    lines.push(`mode: ${n.mode}`);
+    const inputs = n.inputs && Object.keys(n.inputs).length ? n.inputs : n.config;
+    if (inputs && Object.keys(inputs).length) {
+      lines.push('inputs:');
+      for (const [k, v] of Object.entries(inputs)) lines.push(`  ${k}: ${JSON.stringify(v)}`);
+    }
+    if (n.notes && n.notes.length) {
+      lines.push('notes:');
+      for (const note of n.notes) lines.push(`  - [${note.kind}] ${note.text}`);
+    }
+    return lines.join('\n');
+  }
+
+  function kvTable(obj) {
+    const entries = Object.entries(obj || {});
+    if (!entries.length) return '<p class="empty-state">none</p>';
+    return `<table class="kv">${entries
+      .map(([k, v]) => `<tr><th>${escapeHtml(k)}</th><td>${escapeHtml(typeof v === 'string' ? v : JSON.stringify(v))}</td></tr>`)
+      .join('')}</table>`;
+  }
+
+  // Dependency-free C# highlighter for the Code tab. Single-pass scanner that
+  // handles comments/strings/chars BEFORE keywords (so keywords inside strings
+  // aren't recolored), escapes every token's text, and reuses the demo's token
+  // classes (kw/ty/st/cm + a new nu for numbers). Kept tiny + local on purpose —
+  // the thin UI ships no syntax-highlighting library (no supply-chain surface).
+  const CSHARP_KEYWORDS = new Set([
+    'using', 'namespace', 'class', 'struct', 'enum', 'interface', 'public', 'private',
+    'protected', 'internal', 'static', 'readonly', 'const', 'var', 'new', 'return', 'if',
+    'else', 'for', 'foreach', 'while', 'do', 'switch', 'case', 'break', 'continue', 'try',
+    'catch', 'finally', 'throw', 'in', 'out', 'ref', 'is', 'as', 'null', 'true', 'false',
+    'void', 'int', 'long', 'short', 'byte', 'uint', 'ulong', 'double', 'float', 'decimal',
+    'bool', 'string', 'char', 'object', 'dynamic', 'this', 'base', 'typeof', 'nameof',
+    'default', 'get', 'set', 'async', 'await', 'yield', 'lock', 'params', 'when', 'where',
+  ]);
+  function highlightCSharp(src) {
+    const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const span = (cls, text) => `<span class="${cls}">${esc(text)}</span>`;
+    const n = src.length;
+    let out = '';
+    let i = 0;
+    while (i < n) {
+      const c = src[i];
+      if (c === '/' && src[i + 1] === '/') { // line comment
+        let j = src.indexOf('\n', i); if (j < 0) j = n;
+        out += span('cm', src.slice(i, j)); i = j; continue;
+      }
+      if (c === '/' && src[i + 1] === '*') { // block comment
+        let j = src.indexOf('*/', i + 2); j = j < 0 ? n : j + 2;
+        out += span('cm', src.slice(i, j)); i = j; continue;
+      }
+      if (c === '@' && src[i + 1] === '"') { // verbatim string ("" escapes a quote)
+        let j = i + 2;
+        while (j < n) { if (src[j] === '"') { if (src[j + 1] === '"') { j += 2; continue; } j++; break; } j++; }
+        out += span('st', src.slice(i, j)); i = j; continue;
+      }
+      if (c === '"' || c === "'" || (c === '$' && src[i + 1] === '"')) { // string / char
+        const quote = c === '$' ? '"' : c;
+        let j = c === '$' ? i + 2 : i + 1;
+        while (j < n) {
+          if (src[j] === '\\') { j += 2; continue; }
+          if (src[j] === quote) { j++; break; }
+          if (src[j] === '\n') break;
+          j++;
+        }
+        out += span('st', src.slice(i, j)); i = j; continue;
+      }
+      if (c >= '0' && c <= '9') { // number
+        let j = i; while (j < n && /[0-9._a-fA-FxXdflmDFLM]/.test(src[j])) j++;
+        out += span('nu', src.slice(i, j)); i = j; continue;
+      }
+      if (/[A-Za-z_]/.test(c)) { // identifier / keyword / type
+        let j = i; while (j < n && /[A-Za-z0-9_]/.test(src[j])) j++;
+        const word = src.slice(i, j);
+        if (CSHARP_KEYWORDS.has(word)) out += span('kw', word);
+        else if (/^[A-Z]/.test(word)) out += span('ty', word);
+        else out += esc(word);
+        i = j; continue;
+      }
+      out += esc(c); i++;
+    }
+    return out;
+  }
+
+  // Plain-English summary of an exec node = its leading `//` comment header
+  // (authored as prose). Used in the Description tab so it explains what the node
+  // does — the raw C# is the Code tab's job, never Description's.
+  function leadingComment(code) {
+    const out = [];
+    for (const raw of String(code).split(/\r?\n/)) {
+      const line = raw.trim();
+      if (line.startsWith('//')) { out.push(line.replace(/^\/\/+\s?/, '')); continue; }
+      if (line === '') { if (out.length) break; else continue; }
+      break; // first real (non-comment, non-blank) line ends the header block
+    }
+    return out.join(' ').replace(/\s+/g, ' ').trim();
+  }
+
+  function buildAgentEntry(app, n) {
+    const pin = app.lock.agentPins && n.agent ? app.lock.agentPins[n.agent] : null;
+    // All file-derived strings are escaped here: cardEl/renderInspect inject these
+    // into innerHTML raw, so a hostile node id/agent/command/note must not be HTML.
+    const agentLabel = escapeHtml(n.agent || n.kind);
+    const cmd = n.command ? escapeHtml(n.command) : '';
+    const mode = escapeHtml(n.mode);
+    const modeBadge = `<span class="lvl ${n.mode === 'write' ? 'warn' : 'info'}">${mode}</span>`;
+    const notesHtml = n.notes.length
+      ? `<p><strong>Compile notes:</strong></p><ul>${n.notes.map((x) => `<li><span class="note-kind ${x.kind}">${x.kind}</span> ${escapeHtml(humanizeNote(x.text))}</li>`).join('')}</ul>`
+      : '';
+    const inputs = n.inputs && Object.keys(n.inputs).length ? n.inputs : n.config;
+    // The exec node's Roslyn C# (the actual script the host runs). null for
+    // pure-agent nodes that carry no inline code.
+    const execSource = n.config && typeof n.config.code === 'string' ? n.config.code : null;
+    // Description tab: a plain-English explanation + a small input table that
+    // EXCLUDES the code (code belongs to the Code tab, never dumped here).
+    const plainDesc = execSource ? leadingComment(execSource) : '';
+    const inputsNoCode = {};
+    for (const [k, v] of Object.entries(inputs || {})) if (k !== 'code') inputsNoCode[k] = v;
+    return {
+      _mode: n.mode,
+      icon: iconFor(n.agent),
+      kind: n.kind === 'agent' && n.agent ? `${agentLabel} agent` : escapeHtml(n.kind),
+      version: pin ? `v${escapeHtml(String(pin))}` : '—',
+      title: escapeHtml(n.id),
+      subtitle: `${agentLabel}${cmd ? '/' + cmd : ''} · ${mode}`,
+      blurb: n.notes[0] ? escapeHtml(humanizeNote(n.notes[0].text)) : `${mode}-mode ${cmd ? '<code>' + cmd + '</code>' : escapeHtml(n.kind)} node`,
+      description: `${plainDesc ? `<p>${escapeHtml(plainDesc)}</p>` : ''}<p>Resolves to ${modeBadge} via <code>${escapeHtml(n.agent || n.kind)}${n.command ? '.' + escapeHtml(n.command) : ''}</code>.</p>${Object.keys(inputsNoCode).length ? `<p><strong>Inputs</strong></p>${kvTable(inputsNoCode)}` : ''}${execSource ? `<p class="dim-note">Full source in the <strong>Code</strong> tab.</p>` : ''}${notesHtml}`,
+      skill: `<h3>Provided by</h3><p><code>${escapeHtml(n.agent || n.kind)}</code>${pin ? ' · pinned <code>v' + escapeHtml(pin) + '</code>' : ''}${n.command ? ' · command <code>' + escapeHtml(n.command) + '</code>' : ''}</p>
+        <p>Resolved write/read mode is part of the approved <code>.lock</code> — see the <strong>Code</strong> tab.</p>${notesHtml}`,
+      // Code tab: the REAL node source. For exec nodes (Roslyn C# run against a
+      // live host) that's `config.code` straight from the .flo — the same text
+      // the host compiles, so "Debug in VS" attaches to exactly this. For
+      // non-exec nodes there is no script; we show the resolved lockfile YAML.
+      code: execSource
+        ? highlightCSharp(`// ${n.agent || n.kind}${n.command ? '.' + n.command : ''} · node "${n.id}" · live source from ~/.aware/apps/${app.id}/\n${execSource}`)
+        : app.lock.present
+          ? `<span class="cm"># ${escapeHtml(app.id)}.lock · node "${escapeHtml(n.id)}"</span>\n${escapeHtml(nodeYaml(n))}`
+          : `<span class="cm"># not compiled</span>\nHit ⎙ Compile to freeze the .lock.`,
+      // raw (unescaped) exec source for the Debug-in-VS handler; null for non-exec.
+      _execSource: execSource,
+      _execVersion: n.config && typeof n.config.version === 'string' ? n.config.version : null,
+      _appId: app.id,
+      _nodeId: n.id,
+      execution: liveTrace,
+    };
+  }
+
+  // Best-effort DAG layering when a source declares layout: dag (longest-path
+  // columns; rows by arrival order within a column). Linear apps skip this.
+  function layoutDag(nodes, connections) {
+    const depth = new Map(nodes.map((n) => [n.id, 0]));
+    for (let pass = 0; pass < nodes.length; pass++) {
+      for (const c of connections) {
+        depth.set(c.to, Math.max(depth.get(c.to) || 0, (depth.get(c.from) || 0) + 1));
+      }
+    }
+    const rowByCol = {};
+    return nodes.map((n) => {
+      const col = (depth.get(n.id) || 0) + 1;
+      rowByCol[col] = (rowByCol[col] || 0) + 1;
+      return { id: n.id, col, row: rowByCol[col] };
+    });
+  }
+
+  function transform(app) {
+    app.nodes.forEach((n) => { AGENTS[n.id] = buildAgentEntry(app, n); });
+
+    const userText = escapeHtml(app.description?.trim()
+      ? app.description.trim().split('\n')[0]
+      : `${app.displayName} — ${app.nodes.length} node${app.nodes.length === 1 ? '' : 's'}.`);
+    // Escape interpolated values (not the literal **/`` markup, which mdInline renders).
+    const narration = [
+      `Reading **${escapeHtml(app.name)}** from \`~/.aware/apps/${escapeHtml(app.id)}\` — the canvas is a view of the real \`.flo\`.`,
+      ...app.nodes.map((n) => `**${escapeHtml(n.id)}** → \`${escapeHtml(n.agent || n.kind)}${n.command ? '/' + escapeHtml(n.command) : ''}\` · ${escapeHtml(n.mode)}`),
+    ];
+    if (app.notes.length) narration.push(`ℹ ${app.notes.length} compiler note${app.notes.length === 1 ? '' : 's'} — see the strip over the canvas.`);
+    narration.push(app.runnable
+      ? 'Lock is fresh (source-hash matches). **Run** is armed.'
+      : app.runState === 'drift'
+        ? 'The `.flo` changed since the last approve — **Compile** to refresh the lock before Run.'
+        : 'No lock yet — **Compile** to freeze the approved contract.');
+
+    if (app.layout === 'dag') {
+      PROMPTS[app.id] = { name: app.name, layout: 'dag', nodes: layoutDag(app.nodes, app.connections), connections: app.connections, userText, narration };
+    } else {
+      const ids = app.nodes.map((n) => n.id);
+      const wires = ids.slice(1).map((_, i) => app.connections[i]?.label || '');
+      PROMPTS[app.id] = { name: app.name, layout: 'linear', nodes: ids, wires, userText, narration };
+    }
+  }
+
+  // ── gate + notes UI ────────────────────────────────────────────────────────
+
+  function paintGate(app) {
+    // Task-language label (AEC users don't know "lock"/"drift"); the tooltip carries
+    // the why + the Compile step.
+    const labels = { ready: 'Ready to run', drift: 'Needs refresh', uncompiled: 'Not set up' };
+    $runState.className = `run-state ${app.runState}`;
+    $runState.textContent = labels[app.runState] || '';
+    const stateTips = {
+      ready: 'Ready to run.\nThis workflow was compiled from exactly the current .flo (the approved “lock” matches the source), so ▶ Run workflow is enabled.',
+      drift: 'Needs refresh.\nThe .flo changed since the last Compile, so the approved lock is out of date and Run is blocked. Hit ⎙ Compile to re-approve it.',
+      uncompiled: 'Not set up yet.\nThere is no approved lock for this workflow, so Run is blocked. Hit ⎙ Compile to freeze one — then ▶ Run workflow turns on.',
+    };
+    $runState.dataset.tip = stateTips[app.runState] || '';
+
+    $runBtn.disabled = !app.runnable;
+    $runBtn.dataset.tip = app.runnable
+      ? 'Run the approved workflow'
+      : app.runState === 'drift'
+        ? 'Blocked: the .flo changed since the last approve — Compile first'
+        : 'Blocked: not compiled — Compile first';
+
+    const needsCompile = app.runState !== 'ready';
+    $compileBtn.disabled = false;
+    $compileBtn.textContent = needsCompile ? '⎙ Compile *' : '⎙ Compile';
+
+    // Bake: package the workflow as a reusable agent. Gated on the same runnable
+    // state as Run (baking a stale/uncompiled app makes no sense — the lock is
+    // what the server reads to mirror inputs). Disabled-with-tooltip (teach the
+    // path), not hidden. Label flips to "Re-bake" when already exposed-as-agent.
+    if ($menuBakeItem) {
+      $menuBakeLabel.textContent = app.baked ? 'Re-bake agent' : 'Bake into agent';
+      $menuBakeItem.disabled = !app.runnable;
+      $menuBakeItem.dataset.tip = app.runnable
+        ? (app.baked
+          ? 'Already a reusable agent. Re-bake to refresh its exposed interface after edits.'
+          : 'Package this workflow as a reusable agent — drop it as a single node in any other workflow.')
+        : app.runState === 'drift'
+          ? 'Compile first — the .flo changed since the last approve, so Bake is blocked.'
+          : 'Compile first — there is no approved lock yet, so Bake is blocked.';
+    }
+
+    if (app.notes.length) {
+      const n = app.notes.length;
+      const sig = notesSig(app.notes);
+      // Strip severity = worst note kind (info < warn < error). Drives colour +
+      // icon; AWARE 0.48 tags each note with `kind` (#170) so we render by it
+      // rather than guessing from the text.
+      const worst = app.notes.some((x) => x.kind === 'error') ? 'error'
+        : app.notes.some((x) => x.kind === 'warn') ? 'warn' : 'info';
+      const icon = worst === 'error' ? '✕' : worst === 'warn' ? '⚠' : 'ℹ';
+      $notesStrip.hidden = false;
+      $notesStrip.dataset.appId = app.id;
+      $notesStrip.dataset.sig = sig;
+      $notesStrip.classList.remove('sev-info', 'sev-warn', 'sev-error');
+      $notesStrip.classList.add('sev-' + worst);
+      $notesStrip.innerHTML =
+        `<div class="notes-head"><span class="notes-title">${icon} ${n} compiler note${n === 1 ? '' : 's'}</span>` +
+        `<button class="notes-dismiss" type="button" aria-label="Collapse compiler notes" data-tip="Collapse">×</button></div>` +
+        `<ul>${app.notes.map((nt) => `<li><span class="note-kind ${nt.kind}">${nt.kind}</span><code>${escapeHtml(nt.nodeId)}</code> — ${escapeHtml(humanizeNote(nt.text))}</li>`).join('')}</ul>`;
+      // Collapse decision: a remembered choice for this exact note set wins;
+      // otherwise default to collapsed for benign info-only sets (keep the canvas
+      // quiet for AEC users) and expanded when anything is warn/error.
+      const remembered = notesRememberedCollapse(app.id, sig);
+      $notesStrip.classList.toggle('collapsed', remembered !== undefined ? remembered : worst === 'info');
+    } else {
+      $notesStrip.hidden = true;
+      $notesStrip.classList.remove('collapsed');
+      delete $notesStrip.dataset.appId;
+      delete $notesStrip.dataset.sig;
+      $notesStrip.innerHTML = '';
+    }
+  }
+
+  function paintModes() {
+    document.querySelectorAll('.agent-card').forEach((card) => {
+      const a = AGENTS[card.dataset.agentId];
+      card.classList.toggle('mode-write', a?._mode === 'write');
+      card.classList.toggle('mode-read', a?._mode === 'read');
+    });
+  }
+
+  // ── load / select / compile / run ───────────────────────────────────────────
+
+  async function loadApp(id) {
+    const { app } = await api(`/api/app/${encodeURIComponent(id)}`);
+    apps.set(id, app);
+    currentId = id;
+    try { localStorage.setItem(LS_LAST_APP, id); } catch { /* private mode / quota */ }
+    transform(app);
+    liveTrace.length = 0;
+    state.promptKey = id;
+    state.selectedAgentId = null;
+    state.hasRun = false;
+    if ($promptSel.value !== id) $promptSel.value = id;
+    setComboTriggerLabel(id);
+    setComboSelected(id);
+    renderChat();
+    renderTopology(); // selects first node + renderInspect
+    paintModes();
+    markStars();
+    seedAppInputs(app);
+    markSpecialNodes();
+    paintGate(app);
+    refreshDirtyIndicator(); // clean app → dot off; switched back to a dirty one → dot on
+  }
+
+  async function loadApps() {
+    setComboTriggerLabel('loading…');
+    renderCanvasPlaceholder('loading');
+    const { apps: list } = await api('/api/apps');
+    $promptSel.innerHTML = '';
+    if (!list.length) {
+      // The guided empty-state panel owns the "install a workflow" message now —
+      // don't also raise the warn-coloured notes strip (it's for real compiler
+      // notes, and a yellow band for a neutral first-run reads as a false alarm).
+      $notesStrip.hidden = true;
+      $runBtn.disabled = true;
+      $compileBtn.disabled = true;
+      if ($menuBakeItem) $menuBakeItem.disabled = true;
+      if ($wfTrigger) $wfTrigger.disabled = true;
+      setComboTriggerLabel('no workflows installed');
+      renderCanvasPlaceholder('empty');
+      return;
+    }
+    const $apps = document.getElementById('apps-count');
+    if ($apps) $apps.textContent = list.length;
+    for (const a of list) {
+      const opt = document.createElement('option');
+      opt.value = a.id;
+      opt.textContent = `${a.id} · ${a.nodes} node${a.nodes === 1 ? '' : 's'} · ${a.layout}`;
+      $promptSel.appendChild(opt);
+    }
+    buildWorkflowCombo(list); // searchable, provider-grouped picker over the hidden select
+    // Restore the last-opened app (remembered across refresh); fall back to the
+    // first app when there's no saved choice or it's no longer installed.
+    let startId = list[0].id;
+    try {
+      const saved = localStorage.getItem(LS_LAST_APP);
+      if (saved && list.some((a) => a.id === saved)) startId = saved;
+    } catch { /* ignore */ }
+    await loadApp(startId);
+  }
+
+  // ── Workflow combobox (searchable, provider-grouped) ─────────────────────────
+  // A custom control over the hidden <select id="prompt-select"> — the select stays
+  // the value model (it keeps firing change → loadApp), and this adds search +
+  // provider grouping a native <select> can't. Provider comes from /api/apps.
+  const PROVIDER_LABELS = {
+    tekla: 'Tekla', revit: 'Revit', sketchup: 'SketchUp', excel: 'Excel',
+    supabase: 'Supabase', http: 'HTTP', file: 'File', email: 'Email',
+    'trimble-connect': 'Trimble Connect', 'microsoft-365': 'Microsoft 365',
+    'ui-inspector': 'UI Inspector', 'html-report': 'HTML Report',
+    'google-workspace': 'Google Workspace', other: 'Other',
+  };
+  const PROVIDER_ORDER = ['tekla', 'revit', 'sketchup', 'excel', 'supabase', 'http', 'trimble-connect', 'microsoft-365', 'email', 'file', 'ui-inspector'];
+  const providerLabel = (p) => PROVIDER_LABELS[p] || (p ? p.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) : 'Other');
+
+  const $wfCombo = document.getElementById('wf-combo');
+  const $wfTrigger = document.getElementById('wf-trigger');
+  const $wfTriggerLabel = document.getElementById('wf-trigger-label');
+  const $wfPopover = document.getElementById('wf-popover');
+  const $wfSearch = document.getElementById('wf-search');
+  const $wfList = document.getElementById('wf-list');
+  let comboHi = -1; // index into the currently-visible options (-1 = none)
+
+  function setComboTriggerLabel(text) { if ($wfTriggerLabel) $wfTriggerLabel.textContent = text || 'select workflow'; }
+  function setComboSelected(id) {
+    if (!$wfList) return;
+    $wfList.querySelectorAll('.wf-option').forEach((o) => {
+      const sel = o.dataset.id === id;
+      o.classList.toggle('selected', sel);
+      o.setAttribute('aria-selected', sel ? 'true' : 'false');
+    });
+  }
+
+  // Rebuild the grouped option list from the /api/apps payload (id, nodes, layout,
+  // provider). Groups are ordered by PROVIDER_ORDER, then any extras alpha, "Other"
+  // last. All file-derived strings are escaped (they land in innerHTML).
+  function buildWorkflowCombo(list) {
+    if (!$wfList) return;
+    if ($wfTrigger) $wfTrigger.disabled = false;
+    const groups = new Map();
+    for (const a of list) {
+      const p = a.provider || 'other';
+      if (!groups.has(p)) groups.set(p, []);
+      groups.get(p).push(a);
+    }
+    const order = [
+      ...PROVIDER_ORDER.filter((p) => groups.has(p)),
+      ...[...groups.keys()].filter((p) => !PROVIDER_ORDER.includes(p) && p !== 'other').sort(),
+      ...(groups.has('other') ? ['other'] : []),
+    ];
+    let html = '';
+    for (const p of order) {
+      const rows = groups.get(p).slice().sort((x, y) => x.id.localeCompare(y.id));
+      html += `<div class="wf-group" role="group" aria-label="${escapeAttr(providerLabel(p))}"><div class="wf-group-header">${escapeHtml(providerLabel(p))}</div>`;
+      for (const a of rows) {
+        const meta = `${escapeHtml(String(a.nodes))} node${a.nodes === 1 ? '' : 's'} · ${escapeHtml(String(a.layout))}`;
+        html += `<button type="button" class="wf-option" role="option" id="wf-opt-${escapeAttr(a.id)}" data-id="${escapeAttr(a.id)}" data-search="${escapeAttr((a.id + ' ' + p).toLowerCase())}" aria-selected="false">`
+          + `<span class="wf-option-name">${escapeHtml(a.id)}</span><span class="wf-option-meta">${meta}</span></button>`;
+      }
+      html += '</div>';
+    }
+    html += `<div class="wf-empty-search" hidden>No workflows match '<span class="wf-empty-term"></span>'</div>`;
+    $wfList.innerHTML = html;
+    setComboSelected(currentId || $promptSel.value);
+  }
+
+  function comboVisibleOptions() {
+    return [...$wfList.querySelectorAll('.wf-option')].filter((o) => !o.hidden && !o.closest('.wf-group').hidden);
+  }
+  function comboClearHighlight() {
+    $wfList.querySelectorAll('.wf-option.highlighted').forEach((o) => o.classList.remove('highlighted'));
+    comboHi = -1;
+    if ($wfSearch) $wfSearch.removeAttribute('aria-activedescendant');
+  }
+  function comboFilter(q) {
+    q = (q || '').toLowerCase().trim();
+    let any = false;
+    $wfList.querySelectorAll('.wf-group').forEach((g) => {
+      let groupVisible = false;
+      g.querySelectorAll('.wf-option').forEach((o) => {
+        const match = !q || o.dataset.search.includes(q);
+        o.hidden = !match;
+        if (match) groupVisible = true;
+      });
+      g.hidden = !groupVisible;
+      if (groupVisible) any = true;
+    });
+    const empty = $wfList.querySelector('.wf-empty-search');
+    if (empty) { empty.hidden = any; empty.querySelector('.wf-empty-term').textContent = q; }
+    comboClearHighlight();
+  }
+  function comboMove(delta) {
+    const vis = comboVisibleOptions();
+    if (!vis.length) return;
+    // From no highlight: Down → first, Up → last. Otherwise step + clamp.
+    comboHi = comboHi < 0 ? (delta > 0 ? 0 : vis.length - 1) : Math.max(0, Math.min(vis.length - 1, comboHi + delta));
+    vis.forEach((o, i) => o.classList.toggle('highlighted', i === comboHi));
+    const hi = vis[comboHi];
+    hi.scrollIntoView({ block: 'nearest' });
+    if ($wfSearch) $wfSearch.setAttribute('aria-activedescendant', hi.id);
+  }
+  function openCombo() {
+    if (!$wfPopover || ($wfTrigger && $wfTrigger.disabled)) return;
+    $wfPopover.hidden = false;
+    $wfTrigger.classList.add('open');
+    $wfTrigger.setAttribute('aria-expanded', 'true');
+    if ($wfSearch) $wfSearch.value = '';
+    comboFilter('');
+    setComboSelected(currentId || $promptSel.value);
+    const sel = $wfList.querySelector('.wf-option.selected');
+    if (sel) sel.scrollIntoView({ block: 'nearest' });
+    setTimeout(() => { if ($wfSearch) $wfSearch.focus(); }, 0);
+  }
+  function closeCombo(focusTrigger) {
+    if (!$wfPopover || $wfPopover.hidden) return;
+    $wfPopover.hidden = true;
+    $wfTrigger.classList.remove('open');
+    $wfTrigger.setAttribute('aria-expanded', 'false');
+    comboClearHighlight();
+    if (focusTrigger && $wfTrigger) $wfTrigger.focus();
+  }
+  // Pick a workflow: drive the hidden <select> (dispatch change → loadApp). Picking
+  // the already-open workflow just closes (no redundant reload).
+  // Re-entrancy latch: the switch-confirm dialog is async, and Ctrl+O (doOpen) can
+  // reopen the picker over it — ignore a second pick until the first resolves.
+  let switchConfirmPending = false;
+  async function selectComboById(id) {
+    const switching = id && id !== currentId;
+    // Guard a switch away from an app with unsaved input changes: close the picker,
+    // then ask Save / Don't save / Cancel before leaving. Non-user reloads (compile,
+    // fs-change, restore-last) call loadApp directly and never hit this path.
+    if (switching && isInputsDirty(currentId)) {
+      if (switchConfirmPending) return;         // a decision is already pending
+      switchConfirmPending = true;
+      closeCombo(true);
+      const app = apps.get(currentId);
+      let choice;
+      try { choice = await confirmUnsavedSwitch(app ? app.displayName : currentId); }
+      finally { switchConfirmPending = false; }
+      if (choice === 'cancel') return;          // stay on the current workflow
+      if (choice === 'save') saveCurrentInputs();
+      else revertInputs(currentId);             // 'discard' → drop unsaved edits
+    } else {
+      closeCombo(true); // committed pick → return focus to the trigger, not the hidden search
+    }
+    if (switching) {
+      $promptSel.value = id;
+      $promptSel.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    setComboTriggerLabel(id);
+  }
+
+  if ($wfTrigger) {
+    $wfTrigger.addEventListener('click', () => ($wfPopover.hidden ? openCombo() : closeCombo(false)));
+    $wfTrigger.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openCombo(); }
+    });
+  }
+  if ($wfSearch) {
+    $wfSearch.addEventListener('input', () => comboFilter($wfSearch.value));
+    $wfSearch.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown') { e.preventDefault(); comboMove(1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); comboMove(-1); }
+      else if (e.key === 'Enter') {
+        e.preventDefault();
+        const vis = comboVisibleOptions();
+        const pick = comboHi >= 0 ? vis[comboHi] : (vis.length === 1 ? vis[0] : null);
+        if (pick) selectComboById(pick.dataset.id);
+      } else if (e.key === 'Escape') { e.preventDefault(); closeCombo(true); }
+    });
+  }
+  if ($wfList) {
+    $wfList.addEventListener('click', (e) => {
+      const o = e.target.closest('.wf-option');
+      if (o) selectComboById(o.dataset.id);
+    });
+  }
+  document.addEventListener('mousedown', (e) => {
+    if ($wfPopover && !$wfPopover.hidden && $wfCombo && !$wfCombo.contains(e.target)) closeCombo(false);
+  });
+
+  // ── app inputs + HTML Viewer ────────────────────────────────────────────────
+
+  // The id of the report-viewer node — the terminal node a user double-clicks to
+  // LOAD the last report. The header "▶ Run workflow" generates a fresh one. The app
+  // qualifies only if some node runs exec C# returning HTML; the viewer is then
+  // the LAST node in the chain (e.g. the dedicated "HTML Report Viewer" node),
+  // which is also where extractReportHtml's output naturally surfaces.
+  // null when the app builds no report.
+  function reportNodeId() {
+    const app = currentId && apps.get(currentId);
+    if (!app || !app.nodes.length) return null;
+    // Qualify the app only if some node actually PRODUCES report HTML — its exec
+    // code returns an `html` field (the `data.result.html` extractReportHtml keys
+    // on), or it forwards `{{ <node>.result.html }}` through its args (a
+    // pass-through viewer). "any node has exec code" is NOT enough: a plain
+    // status-bar app like hello-world runs exec yet emits no HTML, so it has no
+    // report-viewer node (and Run must fill the trace, not open an empty viewer).
+    // The code test matches `html` in anonymous-object-property position only —
+    // `html =` OR shorthand `html` (preceded by `{`/`,`, followed by `=`/`,`/`}`)
+    // — so a local `html` variable in a non-report node doesn't false-qualify it.
+    const producesHtml = app.nodes.some((n) => {
+      const cfg = n.config;
+      if (!cfg) return false;
+      if (typeof cfg.code === 'string' && /[,{]\s*html\s*[=,}]/.test(cfg.code)) return true;
+      if (cfg.args && typeof cfg.args === 'object') {
+        for (const v of Object.values(cfg.args)) {
+          if (typeof v === 'string' && /\{\{\s*[\w.-]+\.result\.html\s*\}\}/.test(v)) return true;
+        }
+      }
+      return false;
+    });
+    return producesHtml ? app.nodes[app.nodes.length - 1].id : null;
+  }
+
+  // The node that carries the app inputs = the first node templating {{ inputs.* }}
+  // in its config.args. Double-clicking it opens the inputs dialog. null when the
+  // app declares no inputs / no node consumes them.
+  function inputNodeId() {
+    const app = currentId && apps.get(currentId);
+    if (!app || !Array.isArray(app.inputs) || !app.inputs.length) return null;
+    for (const n of app.nodes) {
+      const args = n.config && n.config.args;
+      if (args && typeof args === 'object') {
+        for (const v of Object.values(args)) {
+          if (typeof v === 'string' && /\{\{\s*inputs\.[A-Za-z0-9._-]+\s*\}\}/.test(v)) return n.id;
+        }
+      }
+    }
+    return null;
+  }
+
+  // Append a first-class action button to a card (e.g. "View report ▸"). The
+  // click is self-contained: it stops the canvas/inspect handlers from also
+  // firing, then runs the action. Idempotent — callers clear stale buttons first.
+  function addNodeAction(card, label, onClick) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'node-action';
+    btn.textContent = label;
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onClick();
+    });
+    card.appendChild(btn);
+  }
+
+  // Show the input node's current values inline ("phase = 2"), so the user sees
+  // what the next run will use without opening the dialog. Reads live
+  // appInputValues (declared defaults + any saved/overridden value); refreshed on
+  // every markSpecialNodes — which openInputsDialog calls right after a change.
+  function addNodeInputs(card) {
+    const vals = currentInputs();
+    const keys = Object.keys(vals);
+    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('');
+    card.appendChild(wrap);
+  }
+
+  // Flag report + input nodes on the canvas and give each a visible action
+  // button — "View report ▸" / "Set inputs ▸" — so the affordance is first-class,
+  // not a hidden double-click. (Double-click still works via the delegated handler.)
+  // The input node also gets an at-a-glance read-out of its current values.
+  function markSpecialNodes() {
+    const rid = reportNodeId();
+    const iid = inputNodeId();
+    document.querySelectorAll('.agent-card').forEach((card) => {
+      const id = card.dataset.agentId;
+      const isReport = !!rid && id === rid;
+      const isInput = !!iid && id === iid;
+      card.classList.toggle('report-node', isReport);
+      card.classList.toggle('input-node', isInput);
+      // 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());
+    });
+  }
+
+  // Per-app declared-input values, set via the input node's double-click dialog.
+  // Seeded from each input's declared default so the app is runnable with no action.
+  // (The old above-canvas inputs strip was removed — inputs live on the node now.)
+  const appInputValues = new Map(); // appId -> { name: value }
+
+  // Dirty tracking for input VALUES (never the .flo/lock). dirtyBaseline holds a
+  // canonical snapshot of an app's inputs at the moment they were last seeded or
+  // saved; "dirty" = the live values diverge from it. Comparing to a captured
+  // baseline (not raw localStorage) means defaults-untouched reads clean, and
+  // editing a value back to its saved value clears dirty again.
+  const dirtyBaseline = new Map(); // appId -> canonical JSON string
+  function canonicalInputs(obj) {
+    const o = obj || {};
+    return JSON.stringify(Object.keys(o).sort().map((k) => [k, o[k]]));
+  }
+  function setInputBaseline(id) { if (id) dirtyBaseline.set(id, canonicalInputs(appInputValues.get(id))); }
+  function isInputsDirty(id) {
+    return !!id && dirtyBaseline.has(id) && canonicalInputs(appInputValues.get(id)) !== dirtyBaseline.get(id);
+  }
+  // Throw away unsaved edits: restore the live values to the baseline snapshot.
+  function revertInputs(id) {
+    if (!id || !dirtyBaseline.has(id)) return;
+    appInputValues.set(id, Object.fromEntries(JSON.parse(dirtyBaseline.get(id))));
+  }
+  // Toggle the unsaved-changes indicator (header dot + menu Save item) for the
+  // active app. Cheap; safe to call on every input change, save, and app load.
+  function refreshDirtyIndicator() {
+    const dirty = isInputsDirty(currentId);
+    const dot = document.getElementById('wf-dirty-dot');
+    if (dot) dot.hidden = !dirty;
+    const saveItem = document.querySelector('.menu-item[data-action="save"]');
+    if (saveItem) saveItem.classList.toggle('menu-item-dirty', dirty);
+  }
+  // Refresh/close guard: unsaved input values live only in memory, so warn before
+  // the page unloads while dirty (the browser shows its own generic confirm).
+  window.addEventListener('beforeunload', (e) => {
+    if (isInputsDirty(currentId)) { e.preventDefault(); e.returnValue = ''; }
+  });
+
+  function seedAppInputs(app) {
+    if (app && Array.isArray(app.inputs) && app.inputs.length) {
+      if (!appInputValues.has(app.id)) {
+        const seed = {};
+        app.inputs.forEach((inp) => { if (inp.default != null) seed[inp.name] = inp.default; });
+        // Overlay explicitly-saved values ("Save inputs"), but only for inputs the
+        // .flo still declares (a renamed/removed input is dropped) and only after
+        // coercing to the declared type — mirrors the inputs dialog, so a tampered
+        // or stale localStorage value can't feed a bad type to `aware app run`.
+        const saved = loadSavedInputs(app.id);
+        if (saved) {
+          app.inputs.forEach((inp) => {
+            if (!(inp.name in saved)) return;
+            let v = saved[inp.name];
+            if (inp.type === 'integer' || inp.type === 'number') {
+              const num = Number(v);
+              if (Number.isNaN(num)) return; // keep the default rather than forward garbage
+              v = num;
+            }
+            seed[inp.name] = v;
+          });
+        }
+        appInputValues.set(app.id, seed);
+        setInputBaseline(app.id); // first open this session → clean baseline
+      } else {
+        // Drop values whose declared input was renamed/removed since last seed.
+        const names = new Set(app.inputs.map((i) => i.name));
+        const cur = appInputValues.get(app.id);
+        Object.keys(cur).forEach((k) => { if (!names.has(k)) delete cur[k]; });
+        // Prune the baseline by the same key set so a .flo schema change (rename/
+        // remove) isn't mistaken for a user edit. Unchanged schema → no-op; edits to
+        // surviving keys stay dirty.
+        if (dirtyBaseline.has(app.id)) {
+          const base = Object.fromEntries(JSON.parse(dirtyBaseline.get(app.id)).filter(([k]) => names.has(k)));
+          dirtyBaseline.set(app.id, canonicalInputs(base));
+        }
+      }
+    }
+  }
+
+  // Current declared-input values for the active app (a copy).
+  function currentInputs() {
+    return { ...(appInputValues.get(currentId) || {}) };
+  }
+
+  // Save inputs (Ctrl+S / menu): persist this app's current input values locally so
+  // they survive refresh + reopen. Pure UI state — the .flo and lock are untouched,
+  // so Run stays armed. Apps with no declared inputs have nothing to save.
+  function saveCurrentInputs() {
+    const app = currentId && apps.get(currentId);
+    if (!app) { showToast('no app open', 'info'); return; }
+    if (!Array.isArray(app.inputs) || !app.inputs.length) {
+      showToast('this workflow has no inputs to save', 'info');
+      return;
+    }
+    try {
+      localStorage.setItem(lsInputsKey(app.id), JSON.stringify(appInputValues.get(app.id) || {}));
+      setInputBaseline(app.id); // saved → this is the new clean baseline
+      refreshDirtyIndicator();
+      showToast(`Saved inputs · ${app.displayName}`, 'ok');
+    } catch {
+      showToast('could not save inputs', 'err');
+    }
+  }
+
+  // Double-click the input node → styled dialog to set the declared inputs. Writes
+  // to appInputValues; the header "▶ Run workflow" uses them. No native window.prompt.
+  async function openInputsDialog() {
+    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 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) => {
+      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; } }
+      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(' · ');
+    appendNarration(`Inputs set — <strong>${escapeHtml(badge)}</strong>. Run with <strong>▶ Run workflow</strong>.`);
+    showToast('Inputs set: ' + badge, 'ok');
+  }
+
+  let reportRunning = false;
+  // Set when the user hits Stop. api() throws a bare Error on the cancelled
+  // response (the {cancelled:true} flag is lost), so we read this flag in the
+  // run catch blocks to show "cancelled" rather than a misleading "run failed".
+  let cancelRequested = false;
+  // The most recent rendered report per app id: { nodeId, label, html }. Lets a
+  // double-click LOAD the last result instantly instead of re-running.
+  const lastReportByApp = new Map();
+
+  // Stop the in-flight run (the escape hatch for a hung/unattached host). Marks
+  // cancelRequested so the catch shows "cancelled", clears the canvas running
+  // pulse, and asks the server to kill the `aware app run` child. The in-flight
+  // /api/run then rejects via api() and the catch renders the cancelled state.
+  async function stopRun() {
+    if (!reportRunning && !state.running) return;
+    cancelRequested = true;
+    clearNodeStatus();
+    const stopBtn = document.querySelector('.overlay-stop');
+    if (stopBtn) { stopBtn.disabled = true; stopBtn.textContent = 'Cancelling…'; }
+    try { await api('/api/run/stop', { method: 'POST' }); } catch { /* the run's own catch surfaces it */ }
+  }
+
+  function paintReport(html) { $reportFrame.srcdoc = html; $reportOverlay.hidden = true; $reportOverlay.innerHTML = ''; }
+
+  // Double-click the HTML Viewer node → LOAD the last report (no run; running is
+  // the header "▶ Run workflow" button's job). Shows a prompt if nothing has run yet.
+  function showReport(nodeId) {
+    const app = currentId && apps.get(currentId);
+    if (!app) return;
+    $reportModal.dataset.nodeId = nodeId;
+    $reportTitle.textContent = `HTML Viewer · ${app.displayName}`;
+    showModal($reportModal);
+    if (reportRunning) return; // a run is in flight — its overlay already shows progress
+    const cached = lastReportByApp.get(currentId);
+    if (cached && cached.html) {
+      $reportSub.innerHTML = `Last report${cached.label ? ' · ' + escapeHtml(cached.label) : ''} — rendered from the run's output, never composed by the UI.`;
+      paintReport(cached.html);
+    } else {
+      $reportFrame.srcdoc = '';
+      $reportOverlay.hidden = false;
+      $reportOverlay.innerHTML = `<div>No report yet. Click <strong>▶ Run workflow</strong> (top right) to run it against the live model, then double-click to view it any time.</div>`;
+      $reportSub.textContent = 'Double-click loads the last report; ▶ Run workflow generates a fresh one.';
+    }
+  }
+
+  // The dedicated RUN: executes the app for real (simulate:false) with the
+  // current inputs, renders + caches the HTML the report node returned. The UI
+  // never builds the HTML — it relays exactly what the exec node produced.
+  async function runReport(nodeId, opts = {}) {
+    const app = currentId && apps.get(currentId);
+    if (!app) return;
+    if (!app.runnable) { showToast('Compile the workflow first — Run is gated on a fresh lock.', 'warn'); return; }
+    if (reportRunning) return;
+    reportRunning = true;
+    cancelRequested = false;
+    markCanvasRunning(); // paints behind the modal; visible once it's closed
+
+    const inputs = currentInputs();
+    const inputBadge = Object.entries(inputs).map(([k, v]) => `${k}=${v}`).join(' · ');
+    $reportTitle.textContent = `HTML Viewer · ${app.displayName}`;
+    $reportSub.innerHTML = `Live run of <code>${escapeHtml(nodeId)}</code>${inputBadge ? ' · ' + escapeHtml(inputBadge) : ''} — rendered from the node's output, never composed by the UI.`;
+    $reportFrame.srcdoc = ''; // clear any previously rendered report while this run is in flight
+    $reportOverlay.hidden = false;
+    $reportOverlay.innerHTML = opts.debug
+      ? `<div class="spinner"></div><div>Launching the .NET debugger for <code>${escapeHtml(nodeId)}</code> — a Windows picker will pop; choose your <strong>Visual Studio</strong> to attach to <code>aware-tekla.exe</code>, then step through. The report renders when you let it finish.</div>`
+      : `<div class="spinner"></div><div>Running <code>${escapeHtml(currentId)}</code> against the live model…</div><button type="button" class="overlay-stop">■ Stop run</button>`;
+    showModal($reportModal);
+    $reportModal.dataset.nodeId = nodeId;
+
+    try {
+      // Debug-in-VS goes straight to the host bridge (Debugger.Launch injected),
+      // so VS attaches to aware-tekla.exe; a normal run goes through aware app run.
+      const res = opts.debug
+        ? await api('/api/debug-node', { method: 'POST', body: JSON.stringify({ id: currentId, nodeId, inputs }) })
+        : await api('/api/run', { method: 'POST', body: JSON.stringify({ id: currentId, simulate: false, inputs }) });
+      // Reflect the run in the Execution tab too.
+      if (Array.isArray(res.events)) { liveTrace.length = 0; res.events.forEach(pushTrace); state.hasRun = true; if (state.currentTab === 'execution') renderInspect(); }
+      const html = res.report && res.report.html;
+      if (!html) {
+        $reportOverlay.innerHTML = `<div>Run completed but <code>${escapeHtml(nodeId)}</code> returned no <code>html</code>. Check the Execution tab.</div>`;
+        return;
+      }
+      paintReport(html);
+      lastReportByApp.set(currentId, { nodeId, label: inputBadge, html });
+      $reportModal.dataset.html = '1';
+      appendNarration(`Rendered the report from <strong>${escapeHtml(nodeId)}</strong>${inputBadge ? ' (' + escapeHtml(inputBadge) + ')' : ''} — live run against the model.`);
+    } catch (e) {
+      const msg = e && e.message ? e.message : String(e);
+      if (cancelRequested) {
+        // User hit Stop — an expected outcome, not a failure. A node already
+        // executing on the host may still finish; the run result is discarded.
+        clearNodeStatus(); // wipe any status painted before the flag was set
+        $reportOverlay.innerHTML = `<div>Run cancelled. A node already running on the host may still finish there; click <strong>▶ Run workflow</strong> to run again.</div>`;
+        showToast('Run cancelled', 'info');
+      } else {
+        // Expected, recoverable failure (host not attached, stale lock, …): show it
+        // in the viewer overlay + a toast. No console.error — the server returns the
+        // failure in-band, so a failed run isn't a console-worthy fault.
+        $reportOverlay.innerHTML = `<div>Run failed: ${escapeHtml(msg)}. Check the host is attached and the lock is fresh.</div>`;
+        showToast('Run failed: ' + msg, 'warn');
+      }
+    } finally {
+      reportRunning = false;
+    }
+  }
+
+  function showModal(el) { el.classList.add('show'); }
+  function hideModal(el) { el.classList.remove('show'); }
+
+  // Save-on-switch confirmation. Resolves with 'save' | 'discard' | 'cancel'.
+  // Save is the primary (Enter); Esc and the backdrop both cancel (the safe,
+  // non-destructive default — never lose edits to a stray key/click).
+  const $confirmModal = document.getElementById('confirm-modal');
+  function confirmUnsavedSwitch(appName) {
+    return new Promise((resolve) => {
+      const $sub = document.getElementById('confirm-modal-sub');
+      const $save = document.getElementById('confirm-save');
+      const $dont = document.getElementById('confirm-dont-save');
+      const $cancel = document.getElementById('confirm-cancel');
+      $sub.textContent = `You changed the inputs for “${appName}” but haven’t saved them yet. What would you like to do?`;
+      showModal($confirmModal);
+      setTimeout(() => $save.focus(), 0);
+      const done = (result) => {
+        hideModal($confirmModal);
+        $save.onclick = $dont.onclick = $cancel.onclick = $confirmModal.onclick = null;
+        document.removeEventListener('keydown', onKey, true);
+        resolve(result);
+      };
+      const onKey = (e) => {
+        if (e.key === 'Escape') { e.preventDefault(); done('cancel'); }
+        else if (e.key === 'Enter') { e.preventDefault(); done('save'); }
+      };
+      $save.onclick = () => done('save');
+      $dont.onclick = () => done('discard');
+      $cancel.onclick = () => done('cancel');
+      $confirmModal.onclick = (e) => { if (e.target === $confirmModal) done('cancel'); };
+      document.addEventListener('keydown', onKey, true);
+    });
+  }
+
+  // Styled replacement for window.prompt — matches the app's modal style/scale.
+  // `fields`: [{name,label,type,value,placeholder,multiline}]. Resolves with a
+  // { name: value } object on Save (Enter), or null on Cancel (Esc / backdrop).
+  const $formModal = document.getElementById('form-modal');
+  function formModal({ title, sub = '', fields, okLabel = 'Save' }) {
+    return new Promise((resolve) => {
+      const $title = document.getElementById('form-modal-title');
+      const $sub = document.getElementById('form-modal-sub');
+      const $body = document.getElementById('form-modal-body');
+      const $ok = document.getElementById('form-modal-ok');
+      const $cancel = document.getElementById('form-modal-cancel');
+      $title.textContent = title;
+      $sub.textContent = sub || '';
+      $sub.hidden = !sub;
+      $body.innerHTML = fields.map((f) => {
+        const id = `fm-${f.name}`;
+        const val = f.value != null ? String(f.value) : '';
+        const ph = escapeHtml(f.placeholder || '');
+        let ctl;
+        if (f.type === 'images') {
+          ctl = `<div class="fm-images" data-fm-images="${escapeHtml(f.name)}">
+            <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 {
+          ctl = f.multiline
+            ? `<textarea id="${id}" rows="4" data-fm="${escapeHtml(f.name)}" placeholder="${ph}">${escapeHtml(val)}</textarea>`
+            : `<input id="${id}" type="${f.type || 'text'}"${f.type === 'number' ? ' step="1"' : ''} data-fm="${escapeHtml(f.name)}" value="${escapeHtml(val)}" placeholder="${ph}">`;
+        }
+        return `<div class="modal-field"><label for="${id}">${escapeHtml(f.label || f.name)}</label>${ctl}</div>`;
+      }).join('');
+      $ok.textContent = okLabel;
+      showModal($formModal);
+      const first = $body.querySelector('input:not(.fm-file-input),textarea');
+      if (first) { first.focus(); if (first.select) first.select(); }
+      // ── images-field setup ──────────────────────────────────────────────────────
+      const imageStates = new Map();
+      $body.querySelectorAll('.fm-images').forEach((box) => {
+        const name = box.dataset.fmImages;
+        const state = [];
+        const MAX = 8;
+        const thumbs = box.querySelector('.fm-thumbs');
+        const drop = box.querySelector('.fm-drop');
+        const fileInput = box.querySelector('.fm-file-input');
+        const renderThumbs = () => {
+          thumbs.hidden = state.length === 0;
+          thumbs.innerHTML = state.map((im, i) =>
+            `<div class="fm-thumb"><img src="${escapeAttr(im.dataUrl)}" alt="${escapeAttr(im.name || 'screenshot ' + (i + 1))}"><button type="button" class="fm-thumb-del" data-i="${i}" aria-label="Remove">×</button></div>`
+          ).join('');
+          thumbs.querySelectorAll('.fm-thumb-del').forEach((b) => {
+            b.onclick = () => { state.splice(Number(b.dataset.i), 1); renderThumbs(); };
+          });
+        };
+        const addFile = (file) => {
+          if (!file || !file.type.startsWith('image/')) return;
+          if (state.length >= MAX) { showToast(`Max ${MAX} snapshots`, 'warn'); return; }
+          const reader = new FileReader();
+          reader.onload = () => { state.push({ name: file.name, dataUrl: reader.result }); renderThumbs(); };
+          reader.readAsDataURL(file);
+        };
+        imageStates.set(name, { state, renderThumbs });
+        drop.onclick = () => fileInput.click();
+        drop.onkeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); } };
+        fileInput.onchange = () => {
+          const picked = Array.from(fileInput.files || []);
+          const room = Math.max(0, MAX - state.length);
+          if (picked.length > room) showToast(`Max ${MAX} snapshots`, 'warn');
+          picked.slice(0, room).forEach(addFile);
+          fileInput.value = '';
+        };
+      });
+      // ── paste support: paste an image into the modal → first images 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;
+        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 collect = () => {
+        const out = {};
+        $body.querySelectorAll('[data-fm]').forEach((el) => { out[el.dataset.fm] = el.value; });
+        imageStates.forEach((entry, name) => { out[name] = entry.state; });
+        return out;
+      };
+      const done = (result) => {
+        hideModal($formModal);
+        $ok.onclick = null; $cancel.onclick = null; $formModal.onclick = null; $body.onkeydown = null; $body.onpaste = null;
+        resolve(result);
+      };
+      $ok.onclick = () => done(collect());
+      $cancel.onclick = () => done(null);
+      $formModal.onclick = (e) => { if (e.target === $formModal) done(null); };
+      $body.onkeydown = (e) => {
+        if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { e.preventDefault(); done(collect()); }
+        else if (e.key === 'Escape') { e.preventDefault(); done(null); }
+      };
+    });
+  }
+
+  // Double-click a node on the canvas: the report node → LOAD the last report (no
+  // run); the input node → open the styled inputs dialog. Delegated + bound once;
+  // survives every renderTopology that rebuilds the cards.
+  $topology.addEventListener('dblclick', (e) => {
+    const card = e.target.closest('.agent-card');
+    if (!card) return;
+    const id = card.dataset.agentId;
+    if (!id) return;
+    if (id === reportNodeId()) showReport(id);
+    else if (id === inputNodeId()) openInputsDialog();
+  });
+
+  $reportClose.onclick = () => hideModal($reportModal);
+  $reportModal.addEventListener('click', (e) => { if (e.target === $reportModal) hideModal($reportModal); });
+  // The Stop button is rebuilt into the overlay each run — delegate so one
+  // listener survives every innerHTML swap.
+  $reportOverlay.addEventListener('click', (e) => { if (e.target.closest('.overlay-stop')) stopRun(); });
+  $reportOpen.onclick = () => {
+    const html = $reportFrame.srcdoc;
+    if (!html) return;
+    // Open via a blob: URL — an opaque origin, so the report can't script the
+    // app origin (mirrors the iframe's sandbox intent).
+    const url = URL.createObjectURL(new Blob([html], { type: 'text/html' }));
+    window.open(url, '_blank');
+    setTimeout(() => URL.revokeObjectURL(url), 30000);
+  };
+  $promptSel.onchange = () => { loadApp($promptSel.value).catch(reportErr); };
+
+  $compileBtn.onclick = async () => {
+    if (!currentId || $compileBtn.disabled) return;
+    const id = currentId;
+    $compileBtn.disabled = true;
+    const prev = $compileBtn.textContent;
+    $compileBtn.textContent = '⎙ Compiling…';
+    try {
+      await api('/api/compile', { method: 'POST', body: JSON.stringify({ id }) });
+      await loadApp(id);
+      const app = apps.get(id);
+      appendNarration(app.runnable
+        ? `Compiled · <code>${escapeHtml(id)}.lock</code> frozen at source-hash. Run is armed.`
+        : `Compiled, but ${app.notes.length} note(s) remain — review the strip.`);
+      showToast('Compiled — lock frozen', 'ok');
+    } catch (e) {
+      $compileBtn.textContent = prev;
+      $compileBtn.disabled = false;
+      reportErr(e);
+    }
+  };
+
+  // ── Bake into agent ──────────────────────────────────────────────────────────
+  // Open a preview/confirm modal (agent name + the inputs it will expose, mirrored
+  // 1:1 from the app's declared inputs), then POST /api/bake. The action is
+  // subscription-gated server-side (402 → the standard sign-in prompt); the UI just
+  // triggers the verb and renders the outcome. Thin-UI: composes nothing itself.
+  const $bakeModal = document.getElementById('bake-modal');
+  function openBakeModal() {
+    if (!currentId || ($menuBakeItem && $menuBakeItem.disabled)) return;
+    const app = apps.get(currentId);
+    if (!app) return;
+    document.getElementById('bake-title').textContent = app.baked ? 'Re-bake agent' : 'Bake into agent';
+    const inps = app.inputs || [];
+    const inputsHtml = inps.length
+      ? inps.map((i) => `<span class="ni-pair"><span class="ni-key">${escapeHtml(i.name)}</span><span class="ni-val">${escapeHtml(i.type)}</span></span>`).join('')
+      : '<span class="bake-noinputs">No inputs — this agent is called with no parameters.</span>';
+    // Rebuild the whole body each open — a prior runBake() replaces it with the
+    // spinner (destroying #bake-name/#bake-inputs), so we can't assume they exist.
+    const $body = document.getElementById('bake-body');
+    $body.classList.remove('busy');
+    $body.innerHTML =
+      `<div class="modal-field"><label>Agent name</label><div id="bake-name" class="bake-name"><code>${escapeHtml(app.id)}</code></div></div>` +
+      `<div class="modal-field"><label>Agent inputs</label><div id="bake-inputs" class="bake-inputs">${inputsHtml}</div></div>`;
+    const $confirm = document.getElementById('bake-confirm');
+    const $cancel = document.getElementById('bake-cancel');
+    $confirm.disabled = false; $cancel.disabled = false;
+    $confirm.textContent = '⊙ Bake';
+    showModal($bakeModal);
+    setTimeout(() => $confirm.focus(), 0);
+  }
+
+  async function runBake() {
+    const id = currentId;
+    if (!id) return;
+    const $confirm = document.getElementById('bake-confirm');
+    const $cancel = document.getElementById('bake-cancel');
+    const $body = document.getElementById('bake-body');
+    $confirm.disabled = true; $cancel.disabled = true;
+    $confirm.textContent = '⊙ Baking…';
+    $body.classList.add('busy');
+    $body.innerHTML = '<div class="bake-progress"><span class="rtn-spinner"></span><span>Reinstalling as an agent — this takes a few seconds…</span></div>';
+    try {
+      await api('/api/bake', { method: 'POST', body: JSON.stringify({ id }) });
+      hideModal($bakeModal);
+      await loadApp(id);
+      appendNarration(`Baked <strong>${escapeHtml(id)}</strong> as a reusable agent — find it in the Agents library (<strong>⊞ Agents</strong>).`);
+      showToast(`Baked — now in the Agents library as “${id}”`, 'ok');
+    } catch (e) {
+      hideModal($bakeModal);
+      // The server restores the original install on failure (recoverable) → warn, not err.
+      const msg = (e && e.message ? e.message : 'Bake failed').slice(0, 80);
+      showToast(`Bake failed: ${msg}`, 'warn');
+    }
+  }
+
+  document.getElementById('bake-cancel').onclick = () => hideModal($bakeModal);
+  document.getElementById('bake-confirm').onclick = () => runBake();
+  $bakeModal.onclick = (e) => { if (e.target === $bakeModal && !document.getElementById('bake-confirm').disabled) hideModal($bakeModal); };
+
+  // ── Graft into agent ────────────────────────────────────────────────────────
+  // Build an agent from a foreign tool (DLL / C# source / NuGet / OpenAPI / …).
+  // The server stages an `aware build` into a throwaway AWARE_HOME, we preview the
+  // discovered commands, then commit. Thin-UI: we trigger the verb and render the
+  // result; AWARE owns the reader + recipes (incl. the Tekla model-plugin recipe),
+  // so we SURFACE its output and shape nothing. The wizard body is rebuilt per step.
+  //
+  // SAFETY: every dynamic value below is escapeHtml()-escaped (the app's standard);
+  // markup is injected via graftFill() (replaceChildren + insertAdjacentHTML) so the
+  // escaping discipline is explicit at each call site.
+  const $graftModal = document.getElementById('graft-modal');
+  const $graftBack = document.getElementById('graft-back');
+  const $graftCancel = document.getElementById('graft-cancel');
+  const $graftPrimary = document.getElementById('graft-primary');
+  function graftFill(el, markup) { if (!el) return; el.replaceChildren(); if (markup) el.insertAdjacentHTML('beforeend', markup); }
+
+  // Featured kinds (shown first) are the AEC-relevant ones; the rest live under "More".
+  const GRAFT_KINDS = [
+    { kind: 'dlls', label: '.NET / Tekla DLL', desc: 'A .dll or folder of .dlls — Tekla plugins, in-house .NET libraries', featured: true, decompile: true, match: true,
+      field: { label: 'DLL path or glob', placeholder: 'C:\\Vendor\\Plugin\\*.dll', hint: 'Paste a path or a glob (a folder’s *.dll). Multiple assemblies load together.' } },
+    { kind: 'csharp', label: 'C# source', desc: 'A .cs file/folder, or a .csproj / .sln — your in-house source', featured: true,
+      field: { label: 'C# source path', placeholder: 'C:\\src\\MyPlugin   (or a .csproj / .sln)', hint: 'A .cs file, folder, .csproj or .sln. AWARE reads it with Roslyn.' } },
+    { kind: 'nuget', label: 'NuGet package', desc: 'A NuGet package by name and version', featured: true, decompile: true,
+      field: { label: 'Package', placeholder: 'Tekla.Structures.Model@2025.0', hint: 'Format: Package@version' } },
+    { kind: 'openapi', label: 'OpenAPI / REST', desc: 'An OpenAPI 3.x spec — a URL or a local file', featured: true,
+      field: { label: 'Spec URL or file', placeholder: 'https://api.example.com/openapi.json', hint: 'A URL, or a local .json / .yaml file path' } },
+    { kind: 'cli', label: 'CLI tool', desc: 'Any command-line tool on your PATH', featured: false,
+      field: { label: 'Command name', placeholder: 'ffmpeg', hint: 'The command as it appears on your PATH' } },
+    { kind: 'com', label: 'COM ProgID', desc: 'A COM component by ProgID', featured: false,
+      field: { label: 'ProgID', placeholder: 'Excel.Application', hint: 'The COM ProgID from the registry' } },
+    { kind: 'python', label: 'Python module', desc: 'An importable Python module', featured: false,
+      field: { label: 'Module', placeholder: 'requests', hint: 'The importable module name' } },
+    { kind: 'npm', label: 'npm package', desc: 'An npm package (reflected from its .d.ts)', featured: false,
+      field: { label: 'Package', placeholder: 'three@0.162.0', hint: 'Format: package@version' } },
+    { kind: 'ruby', label: 'Ruby gem', desc: 'A RubyGems package', featured: false,
+      field: { label: 'Gem', placeholder: 'aws-sdk@3.1.0', hint: 'Format: gem@version' } },
+    { kind: 'yard', label: 'YARD docs', desc: 'YARD-rendered Ruby docs — URL or folder', featured: false,
+      field: { label: 'URL or directory', placeholder: 'https://docs.mylib.com', hint: 'A YARD-doc URL or a local directory' } },
+    { kind: 'headers', label: 'C / C++ headers', desc: 'A C/C++ header glob', featured: false,
+      field: { label: 'Header glob', placeholder: 'C:\\SDK\\include\\*.h', hint: 'Paste a glob or a folder path' } },
+  ];
+
+  let graftState = {};
+  const graftCfg = (kind) => GRAFT_KINDS.find((k) => k.kind === kind) || GRAFT_KINDS[0];
+  const graftBodyEl = () => document.getElementById('graft-body');
+  function graftFooter({ backShown = false, primaryLabel = 'Introspect', primaryDisabled = false } = {}) {
+    $graftBack.hidden = !backShown;
+    $graftPrimary.textContent = primaryLabel;
+    $graftPrimary.disabled = primaryDisabled;
+  }
+
+  function openGraftModal() {
+    graftState = { kind: 'dlls', ref: '', decompile: false, showMore: false, preview: null, stagedRef: null, onPrimary: runGraftIntrospect, onBack: null };
+    document.getElementById('graft-title').textContent = 'Graft into agent';
+    document.getElementById('graft-sub').textContent = 'Point at a DLL, package, or API spec — AWARE reads it and builds an agent you can drop into any workflow.';
+    $graftBack.disabled = false; $graftCancel.disabled = false;
+    graftRenderPicker();
+    showModal($graftModal);
+  }
+
+  function graftRenderPicker() {
+    graftState.onPrimary = runGraftIntrospect;
+    graftState.onBack = null;
+    const cfg = graftCfg(graftState.kind);
+    const tiles = GRAFT_KINDS.filter((k) => k.featured || graftState.showMore).map((k) =>
+      `<button type="button" class="graft-kind${k.kind === graftState.kind ? ' selected' : ''}" data-kind="${k.kind}">` +
+        `<div class="gk-name">${escapeHtml(k.label)}</div><div class="gk-desc">${escapeHtml(k.desc)}</div></button>`).join('');
+    const moreBtn = graftState.showMore ? '' : '<button type="button" class="graft-more" id="graft-more">▸ More source types</button>';
+    const decompile = cfg.decompile
+      ? `<label class="rtn-toggle" style="margin-top:4px;"><input type="checkbox" id="graft-decompile"${graftState.decompile ? ' checked' : ''}><span class="rtn-toggle-track"></span><span class="rtn-toggle-label">Include decompiled private types (slower)</span></label>`
+      : '';
+    graftFill(graftBodyEl(),
+      `<div class="modal-field"><label>Source type</label><div class="graft-kinds">${tiles}</div>${moreBtn}</div>` +
+      `<div class="modal-field"><label id="graft-field-label">${escapeHtml(cfg.field.label)}</label>` +
+        `<div class="graft-row"><input type="text" id="graft-ref" placeholder="${escapeHtml(cfg.field.placeholder)}" value="${escapeHtml(graftState.ref)}" autocomplete="off" spellcheck="false"></div>` +
+        `<div class="graft-hint" id="graft-hint">${escapeHtml(cfg.field.hint)}</div>` +
+        `<div id="graft-matched"></div>${decompile}</div>`);
+    graftBodyEl().querySelectorAll('.graft-kind').forEach((el) => { el.onclick = () => { graftState.kind = el.dataset.kind; graftRenderPicker(); }; });
+    const more = document.getElementById('graft-more'); if (more) more.onclick = () => { graftState.showMore = true; graftRenderPicker(); };
+    const ref = document.getElementById('graft-ref');
+    ref.oninput = () => {
+      graftState.ref = ref.value;
+      graftFooter({ primaryLabel: 'Introspect', primaryDisabled: !graftState.ref.trim() });
+      if (graftCfg(graftState.kind).match) graftMatchDebounced();
+    };
+    ref.onkeydown = (e) => { if (e.key === 'Enter' && graftState.ref.trim()) runGraftIntrospect(); };
+    const dec = document.getElementById('graft-decompile'); if (dec) dec.onchange = () => { graftState.decompile = dec.checked; };
+    graftFooter({ backShown: false, primaryLabel: 'Introspect', primaryDisabled: !graftState.ref.trim() });
+    setTimeout(() => ref.focus(), 0);
+    if (graftCfg(graftState.kind).match && graftState.ref.trim()) graftMatch();
+  }
+
+  let graftMatchTimer = null;
+  function graftMatchDebounced() { clearTimeout(graftMatchTimer); graftMatchTimer = setTimeout(graftMatch, 350); }
+  async function graftMatch() {
+    const el = document.getElementById('graft-matched'); if (!el) return;
+    const glob = graftState.ref.trim();
+    if (!glob) { el.replaceChildren(); return; }
+    try {
+      const { files } = await api('/api/graft/match', { method: 'POST', body: JSON.stringify({ glob }) });
+      if (!files || !files.length) { el.replaceChildren(); return; }
+      graftFill(el,
+        `<div class="graft-matched"><div class="graft-matched-h">Matched assemblies (${files.length})</div>` +
+        `<div class="graft-matched-f">${files.map(escapeHtml).join('<br>')}</div></div>` +
+        (files.length > 1 ? '<div class="graft-hint">All assemblies load together so AWARE can resolve references across them.</div>' : ''));
+    } catch { el.replaceChildren(); }
+  }
+
+  function graftIntrospectingLabel(kind) {
+    if (kind === 'nuget') return 'Restoring the NuGet package and reading its API…';
+    if (kind === 'dlls' || kind === 'csharp') return 'Reading your assemblies…';
+    if (kind === 'openapi' || kind === 'yard') return 'Fetching and reading the spec…';
+    return 'Discovering commands…';
+  }
+
+  async function runGraftIntrospect() {
+    const cfg = graftCfg(graftState.kind);
+    graftFill(graftBodyEl(),
+      `<div class="graft-progress"><span class="rtn-spinner"></span><span>${escapeHtml(graftIntrospectingLabel(graftState.kind))}</span></div>` +
+      '<div class="graft-hint">Large packages can take 30–60 seconds (a NuGet restore is included).</div>');
+    graftFooter({ backShown: false, primaryLabel: 'Introspecting…', primaryDisabled: true });
+    try {
+      const body = { sourceKind: graftState.kind, sourceRef: graftState.ref.trim() };
+      if (cfg.decompile && graftState.decompile) body.decompile = true;
+      const { preview } = await api('/api/graft/introspect', { method: 'POST', body: JSON.stringify(body) });
+      graftState.preview = preview;
+      graftState.stagedRef = preview.stagedRef;
+      graftRenderPreview(preview);
+    } catch (e) {
+      graftRenderPicker(); // restores the entered values from graftState
+      const msg = (e && e.message) ? e.message : 'Introspection failed';
+      const err = document.createElement('div');
+      err.className = 'graft-err';
+      err.textContent = msg;
+      graftBodyEl().appendChild(err);
+    }
+  }
+
+  function graftPluginName(preview) {
+    for (const c of preview.commands) {
+      const m = (c.summary || '').match(/Insert the "([^"]+)"/);
+      if (m) return m[1];
+    }
+    return null;
+  }
+  function graftCmdHtml(c) {
+    const mode = (c.kind === 'write' || c.kind === 'read') ? `<span class="graft-cmd-mode ${c.kind}">${c.kind}</span>` : '';
+    const inputs = (c.inputs && c.inputs.length)
+      ? `<div class="graft-cmd-in">${c.inputs.map((i) => `${escapeHtml(i.name)} <span style="opacity:.6">(${escapeHtml(i.type)})</span>`).join(' · ')}</div>`
+      : '';
+    return `<div class="graft-cmd"><span class="graft-cmd-name">${escapeHtml(c.name)}</span>${mode}${inputs}</div>`;
+  }
+
+  function graftRenderPreview(preview) {
+    document.getElementById('graft-title').textContent = 'Review your new agent';
+    document.getElementById('graft-sub').textContent = 'Here is what AWARE found — create it to add it to your Agents library.';
+    const tekla = preview.recipe === 'tekla-plugin';
+    const badge = tekla
+      ? '<div class="graft-badge tekla">⊕ Tekla plug-in recipe</div>'
+      : '<div class="graft-badge">◈ generic reflection</div>';
+    let hero = '';
+    if (tekla) {
+      const name = graftPluginName(preview) || preview.agentId;
+      hero =
+        `<dl class="graft-identity"><dt>Plug-in</dt><dd>${escapeHtml(name)}</dd>` +
+        `<dt>Recipe</dt><dd>Tekla model plug-in</dd>` +
+        `<dt>Source</dt><dd>${escapeHtml(preview.sourceRef)}</dd></dl>` +
+        '<div class="graft-hint">The picked points become a typed <code>input-points</code> input — no dialog, no mouse.</div>';
+    }
+    const warnings = (preview.warnings || []).map((w) => `<div class="graft-warn">⚠ ${escapeHtml(w)}</div>`).join('');
+    const cmds = preview.commands.length
+      ? `<div class="graft-cmds">${preview.commands.map(graftCmdHtml).join('')}</div>`
+      : '<div class="graft-warn">No commands found in this source. It may have no public API surface, or the reader couldn’t parse it — try a different entry point or path.</div>';
+    const skills = preview.skills ? `<div class="graft-skills">${preview.skills} skill${preview.skills === 1 ? '' : 's'} generated.</div>` : '';
+    graftFill(graftBodyEl(),
+      badge + hero + warnings + cmds + skills +
+      `<div class="modal-field"><label>Agent name</label><div class="bake-name"><code>${escapeHtml(preview.agentId)}</code></div></div>`);
+    graftState.onBack = graftRenderPicker;
+    graftState.onPrimary = () => runGraftCommit(false);
+    graftFooter({ backShown: true, primaryLabel: 'Create agent', primaryDisabled: preview.commands.length === 0 });
+  }
+
+  async function runGraftCommit(force) {
+    if (!graftState.stagedRef) return;
+    graftFooter({ backShown: true, primaryLabel: 'Creating…', primaryDisabled: true });
+    $graftBack.disabled = true; $graftCancel.disabled = true;
+    try {
+      const body = { stagedRef: graftState.stagedRef };
+      if (force) body.force = true;
+      const res = await api('/api/graft/commit', { method: 'POST', body: JSON.stringify(body) });
+      graftFill(graftBodyEl(), `<div class="graft-success"><div class="gs-icon">⊕</div><div class="gs-msg">Agent created — now in the Agents library as <code>${escapeHtml(res.agentId)}</code>.</div></div>`);
+      $graftBack.hidden = true; $graftCancel.disabled = false; $graftPrimary.textContent = 'Done'; $graftPrimary.disabled = false;
+      graftState.onPrimary = () => hideModal($graftModal);
+      loadAgentCatalog().catch(() => {}); // refresh count immediately (SSE also fires for other tabs)
+      appendNarration(`Grafted <strong>${escapeHtml(res.agentId)}</strong> from ${escapeHtml(graftState.preview.sourceRef)} — find it in the Agents library (<strong>⊞ Agents</strong>).`);
+      showToast(`Agent created — “${res.agentId}” is now in the Agents library`, 'ok');
+      setTimeout(() => { if ($graftModal.classList.contains('show')) hideModal($graftModal); }, 1500);
+    } catch (e) {
+      $graftBack.disabled = false; $graftCancel.disabled = false;
+      const msg = (e && e.message) ? e.message : 'Create failed';
+      if (/already (installed|exists)/i.test(msg) && !force) {
+        // The stage is kept server-side on a collision — offer to overwrite.
+        graftFooter({ backShown: true, primaryLabel: 'Overwrite existing', primaryDisabled: false });
+        graftState.onPrimary = () => runGraftCommit(true);
+        if (!graftBodyEl().querySelector('.graft-warn.collide')) {
+          const warn = document.createElement('div');
+          warn.className = 'graft-warn collide';
+          warn.textContent = `⚠ ${msg} Click “Overwrite existing” to replace it.`;
+          graftBodyEl().prepend(warn);
+        }
+      } else {
+        graftFooter({ backShown: true, primaryLabel: 'Create agent', primaryDisabled: false });
+        graftState.onPrimary = () => runGraftCommit(false);
+        showToast(`Create failed: ${msg.slice(0, 80)}`, 'warn');
+      }
+    }
+  }
+
+  $graftBack.onclick = () => { if (graftState.onBack) graftState.onBack(); };
+  $graftCancel.onclick = () => hideModal($graftModal);
+  $graftPrimary.onclick = () => { if (graftState.onPrimary) graftState.onPrimary(); };
+  $graftModal.onclick = (e) => { if (e.target === $graftModal && !$graftCancel.disabled) hideModal($graftModal); };
+
+  // Secondary entry: "⊕ Graft new agent" inside the Agents Library modal.
+  const $libGraft = document.getElementById('lib-graft');
+  if ($libGraft) $libGraft.onclick = () => { hideModal($libModal); openGraftModal(); };
+
+  // Route the ≡ menu's "Graft"/"Bake" items to their modals. handleMenuAction lives
+  // in app.js; openGraftModal/openBakeModal live here — so wrap it (the same pattern
+  // app.js's doOpen/doSave are reassigned from this file).
+  const _handleMenuAction = handleMenuAction;
+  handleMenuAction = function (action) {
+    if (action === 'graft') { openGraftModal(); return; }
+    if (action === 'bake') { openBakeModal(); return; }
+    _handleMenuAction(action);
+  };
+
+  // ── App self-update tag ───────────────────────────────────────────────────────
+  // Surface updater.ts: poll GET /api/update (on load + every 6h); when a newer
+  // installed build exists, show a footer tag → confirm → POST /api/update/apply,
+  // which downloads + relaunches into the new version. Hidden in dev/npm (supported:false).
+  const $appUpdate = document.getElementById('app-update');
+  async function refreshUpdate() {
+    if (!$appUpdate) return;
+    try {
+      const r = await fetch('/api/update');
+      const d = await r.json();
+      if (r.ok && d.supported && d.updateAvailable && d.targetVersion) {
+        $appUpdate.textContent = '↑ Update to v' + d.targetVersion;
+        $appUpdate.dataset.tip = 'A newer floless.app is available — click to download and relaunch into v' + d.targetVersion;
+        $appUpdate.hidden = false;
+      } else {
+        $appUpdate.hidden = true; // up-to-date / unsupported (dev/npm) / feed error → no tag
+      }
+    } catch { $appUpdate.hidden = true; }
+  }
+  if ($appUpdate) {
+    $appUpdate.onclick = async () => {
+      const v = $appUpdate.textContent.replace(/^[^0-9]*/, ''); // "↑ Update to v0.4.1" → "0.4.1"
+      if (!window.confirm('Download v' + v + ' and relaunch floless.app now?')) return;
+      $appUpdate.disabled = true;
+      $appUpdate.textContent = '↑ Updating…';
+      try {
+        const r = await fetch('/api/update/apply', { method: 'POST', headers: { 'content-type': 'application/json' } });
+        const d = await r.json().catch(() => ({}));
+        if (!r.ok || !d.ok) throw new Error(d.error || 'update failed');
+        // Success: the server is exiting + Update.exe relaunches the new build. The health
+        // poll flips to offline (R1 overlay), then the new version reconnects on its own.
+      } catch (e) {
+        $appUpdate.disabled = false;
+        showToast('Update failed — ' + String((e && e.message) || e).slice(0, 80), 'warn');
+        refreshUpdate();
+      }
+    };
+    refreshUpdate();
+    setInterval(refreshUpdate, 6 * 60 * 60 * 1000); // re-check every 6h so a long-running window notices
+  }
+
+  // ONE Run (the approved single-Run model). "▶ Run workflow" does a REAL run against
+  // the live host, using the app inputs. If the app has a report node, it drives
+  // the in-app HTML Viewer (renders + caches the returned HTML); otherwise it
+  // fills the Execution trace. "Simulate" is the demoted secondary: every node is
+  // stubbed from its output-schema, no host sidecar is contacted (AWARE v0.37) —
+  // a composition check that runs even when the real agents aren't connected. There is
+  // no second "Run" control anywhere else; the viewer node only LOADS the last
+  // report on double-click.
+  async function runApp({ simulate = false } = {}) {
+    const app = currentId && apps.get(currentId);
+    if (!app) return;
+    if (!app.runnable) { showToast($runBtn.dataset.tip, 'warn'); return; }
+    if (state.running || reportRunning) return;
+
+    markCanvasRunning(); // immediate during-run feedback; the trace refines per node
+
+    // Real run + a report node → the HTML Viewer path (renders the report,
+    // caches it for double-click, and mirrors the run into the Execution tab).
+    const rid = reportNodeId();
+    if (!simulate && rid) { runReport(rid); return; }
+
+    state.running = true;
+    cancelRequested = false;
+    $runBtn.disabled = true;
+    if ($simBtn) $simBtn.disabled = true;
+    $runBtn.textContent = '◆ Running…';
+    liveTrace.length = 0;
+    state.hasRun = true;
+    try {
+      const res = await api('/api/run', { method: 'POST', body: JSON.stringify({ id: currentId, simulate, inputs: currentInputs() }) });
+      // SSE usually fills liveTrace first; backfill from the response if it didn't.
+      if (liveTrace.length === 0 && Array.isArray(res.events)) res.events.forEach(pushTrace);
+      switchToExecution();
+      const steps = liveTrace.filter((r) => r.kind === 'node-start').length;
+      appendNarration(simulate
+        ? `Simulated run complete · ${steps} node${steps === 1 ? '' : 's'} stubbed (no host needed) · see the <strong>Execution</strong> tab.`
+        : `Run complete · ${steps} node${steps === 1 ? '' : 's'} against the live model · see the <strong>Execution</strong> tab.`);
+    } catch (e) {
+      const msg = (e && e.message) ? e.message : String(e);
+      if (cancelRequested) {
+        clearNodeStatus();
+        showToast('Run cancelled', 'info');
+        appendNarration('Run cancelled. Click <strong>▶ Run workflow</strong> to run again.');
+      } else {
+        // A failed run is an expected, recoverable outcome (the server returns it
+        // in-band) — surface it as a toast + narration, not a console error.
+        showToast((simulate ? 'Simulate failed' : 'Run failed') + ': ' + msg, 'warn');
+        appendNarration(simulate
+          ? `Simulate couldn't validate <code>${escapeHtml(currentId)}</code> — it stubs each node from its output-schema, but exec nodes have none, so the cross-node templates render undefined. Use <strong>▶ Run workflow</strong> for a live run against the host.`
+          : `Run failed: ${escapeHtml(msg)}. Check the host is attached and the lock is fresh.`);
+      }
+    } finally {
+      state.running = false;
+      $runBtn.disabled = false;
+      if ($simBtn) $simBtn.disabled = false;
+      $runBtn.textContent = '▶ Run workflow';
+    }
+  }
+  $runBtn.onclick = () => runApp({ simulate: false });
+  if ($simBtn) $simBtn.onclick = () => runApp({ simulate: true });
+
+  function switchToExecution() {
+    state.currentTab = 'execution';
+    document.querySelectorAll('.tabs button').forEach((b) => b.classList.toggle('active', b.dataset.tab === 'execution'));
+    renderInspect();
+  }
+
+  // ── trace + SSE ──────────────────────────────────────────────────────────────
+
+  function fmtTs(ts) {
+    const d = ts ? new Date(ts) : new Date();
+    return isNaN(d.getTime()) ? '' : d.toTimeString().slice(0, 8);
+  }
+
+  // Trace fields come from the run JSONL (file-derived) and render raw into the
+  // Execution tab via renderInspect — escape everything that lands in `msg`.
+  // ── Per-node run status on the canvas ──────────────────────────────────────
+  // The server broadcasts the whole trace when `aware app run` returns, so we
+  // also mark every node "running" the instant Run is clicked (markCanvasRunning)
+  // — that's the during-run feedback; pushTrace then refines each node to
+  // done/error as the (batched) trace arrives. Covers UI runs, report runs (the
+  // canvas paints behind the modal), and terminal-driven runs (trace-file).
+  const NODE_STAT_LABEL = { running: '◆ running', done: '✓ done', error: '✗ failed' };
+  function setNodeStatus(nodeId, status) {
+    if (!nodeId) return;
+    const card = document.querySelector(`.agent-card[data-agent-id="${(window.CSS && CSS.escape) ? CSS.escape(nodeId) : nodeId}"]`);
+    if (!card) return;
+    card.classList.remove('node-running', 'node-done', 'node-error');
+    card.classList.add('node-' + status);
+    let pip = card.querySelector('.node-stat');
+    if (!pip) { pip = document.createElement('span'); pip.className = 'node-stat'; card.appendChild(pip); }
+    pip.textContent = NODE_STAT_LABEL[status] || status;
+  }
+  function clearNodeStatus() {
+    document.querySelectorAll('.agent-card').forEach((card) => {
+      card.classList.remove('node-running', 'node-done', 'node-error');
+      const pip = card.querySelector('.node-stat');
+      if (pip) pip.remove();
+    });
+  }
+  function markCanvasRunning() {
+    clearNodeStatus();
+    const app = currentId && apps.get(currentId);
+    if (!app || !Array.isArray(app.nodes)) return;
+    app.nodes.forEach((n) => setNodeStatus(n.id, 'running'));
+  }
+
+  function pushTrace(ev) {
+    const node = escapeHtml(ev.node || '');
+    const agent = escapeHtml(ev.agent || '');
+    const cmd = ev.command ? '/' + escapeHtml(ev.command) : '';
+    let lvl = 'info';
+    let msg;
+    switch (ev.kind) {
+      case 'run-start': msg = `run start · ${escapeHtml(ev.app || '')} (${escapeHtml(ev.instance || 'default')})`; break;
+      case 'node-start': lvl = 'event'; msg = `node ${node} · ${agent}${cmd}`; break;
+      case 'would-write': lvl = 'warn'; msg = `would-write ${node} · ${escapeHtml(JSON.stringify(ev.proposed_inputs || {}))}`; break;
+      case 'node-output': case 'output': case 'write': lvl = 'ok'; msg = `${escapeHtml(ev.kind)} ${node}`.trim(); break;
+      case 'run-end': lvl = ev.status === 'ok' ? 'ok' : 'err'; msg = `run ${escapeHtml(ev.status || 'ended')}`; break;
+      default: msg = `${escapeHtml(ev.kind)} ${node}`.trim();
+    }
+    // `node` (the raw node id) feeds the Execution tab's node-filter chips.
+    liveTrace.push({ kind: ev.kind, ts: fmtTs(ev.ts), lvl, msg, node: ev.node || '' });
+
+    // Paint the node's status on the canvas as the trace streams in. Once the
+    // user hits Stop, leave the canvas alone — late SSE events (the fs-watcher
+    // replaying the partial JSONL) would otherwise re-pulse a node "running"
+    // after stopRun() cleared it.
+    if (cancelRequested) return;
+    if (ev.kind === 'run-start') clearNodeStatus();
+    else if (ev.node && ev.kind === 'node-start') setNodeStatus(ev.node, 'running');
+    else if (ev.node && /^(node-output|output|write|node-end|node-ok)$/.test(ev.kind)) setNodeStatus(ev.node, 'done');
+    else if (ev.node && /error/i.test(ev.kind)) setNodeStatus(ev.node, 'error');
+    else if (ev.kind === 'run-end' && ev.status && ev.status !== 'ok') {
+      // run failed — any node still "running" (started, never produced output) failed
+      document.querySelectorAll('.agent-card.node-running').forEach((c) => setNodeStatus(c.dataset.agentId, 'error'));
+    }
+  }
+
+  // ── Server status light + in-tab recovery ─────────────────────────────────
+  // The footer dot/label show whether the LOCAL server is reachable, driven by the
+  // SSE connection (onopen/onerror) plus a 5s /api/health backstop. When the server
+  // is down we raise a prominent overlay; both it and the footer Restart are real
+  // <a href="floless://start"> anchors the USER clicks. A genuine click carries the
+  // user activation Chromium (Chrome AND Edge) requires to hand the registered scheme
+  // off to the OS protocol handler (which relaunches the server even though HTTP is
+  // dead). For a registered scheme the browser intercepts the click and shows its
+  // native "Open FlolessApp?" prompt INSTEAD of following the URL, so this tab is
+  // never navigated away. (A synthetic anchor.click() or hidden iframe — the old
+  // approach — is silently dropped for external protocols: that was the dead-Restart
+  // bug.) The tab then heals itself: the next health tick flips back online and, if
+  // we never managed to load, pulls the workspace.
+  let serverOnline = null;
+
+  // The overlay leads with AUTO-RECOVERY. The login watchdog (FlolessApp --supervise)
+  // respawns a dead server within seconds, so a crash heals itself with NO user action
+  // — the overlay's job is to reassure ("reconnecting…"), not to demand a click. We
+  // keep a SMALL secondary "Start FloLess now" link as a manual kick, but it stays
+  // HIDDEN until recovery is clearly stuck (still offline after ESCALATE_MS): showing
+  // a button while the copy says "no action needed" is contradictory, and the
+  // floless:// launch is a no-op on corporate-managed browsers anyway (they ignore the
+  // user-level scheme handler). The link's real value is on non-managed browsers; the
+  // reliable fallback when the watchdog itself is down is "reopen FloLess", which the
+  // escalation line offers. The link is a real <a href> the USER clicks — a synthetic
+  // anchor.click() is silently dropped by Chromium for external protocols.
+  const ESCALATE_MS = 15000; // 3 missed 5s health polls ⇒ the watchdog isn't recovering
+  let escalateTimer = null;
+  let lastFocusBeforeOverlay = null;
+  function onStartClickFeedback() {
+    // Feedback only — the href performs the launch (genuine user activation); must NOT
+    // preventDefault. No "approve the dialog" promise: on managed browsers no dialog
+    // ever appears, so the escalation line's "reopen FloLess" stays the honest path.
+    const s = document.getElementById('so-status');
+    if (s) s.textContent = 'Starting FloLess…';
+  }
+
+  let offlineOverlayEl = null;
+  function showOfflineOverlay() {
+    if (offlineOverlayEl) return;
+    lastFocusBeforeOverlay = document.activeElement; // restored on heal (WCAG 2.4.3)
+    const wrap = document.createElement('div');
+    wrap.id = 'server-offline-overlay';
+    // role=status on the card → screen readers announce its text on insertion. The
+    // spinner is decorative (aria-hidden). The manual link is hidden until escalation.
+    wrap.innerHTML =
+      `<div class="so-card" role="status" tabindex="-1">
+         <div class="so-spinner" aria-hidden="true"></div>
+         <h1>Reconnecting to FloLess…</h1>
+         <p>The local server stopped — this tab reconnects automatically in a few seconds.</p>
+         <p class="so-status" id="so-status"></p>
+         <a id="so-start" href="floless://start" class="secondary" hidden>Start FloLess now</a>
+       </div>`;
+    document.body.appendChild(wrap);
+    offlineOverlayEl = wrap;
+    document.getElementById('so-start').addEventListener('click', onStartClickFeedback);
+    // No action is required, so move focus to the CARD (tabindex=-1), NOT the link —
+    // keeps keyboard focus inside the overlay without implying the link is the action.
+    wrap.querySelector('.so-card').focus();
+    // Reveal the manual fallback only if recovery is clearly stuck (watchdog down).
+    if (escalateTimer) clearTimeout(escalateTimer);
+    escalateTimer = setTimeout(() => {
+      if (serverOnline === true) return; // healed
+      const s = document.getElementById('so-status');
+      const a = document.getElementById('so-start');
+      if (s) s.textContent = 'Taking longer than usual — try the button below, or reopen FloLess to bring it back.';
+      if (a) a.hidden = false;
+    }, ESCALATE_MS);
+  }
+  function hideOfflineOverlay() {
+    if (escalateTimer) { clearTimeout(escalateTimer); escalateTimer = null; }
+    if (!offlineOverlayEl) return;
+    offlineOverlayEl.remove();
+    offlineOverlayEl = null;
+    // Return focus to wherever it was before the overlay grabbed it.
+    if (lastFocusBeforeOverlay && document.contains(lastFocusBeforeOverlay)) {
+      try { lastFocusBeforeOverlay.focus(); } catch { /* element gone */ }
+    }
+    lastFocusBeforeOverlay = null;
+  }
+
+  // ── AWARE first-run setup overlay ──────────────────────────────────────────
+  // First launch installs the AWARE runtime (npm i -g). While that runs the
+  // workspace is meaningless, so we raise a blocking card (mirrors the offline
+  // overlay's chrome, differentiated by copy). The server's bootstrap state
+  // machine (probing→installing→ready|failed) drives it over SSE, with the 5s
+  // health poll as a backstop. Three states: installing / failed / ready-beat.
+
+  // Pure: reason → the fixed, user-facing body copy for the FAILED state.
+  // Isolated so the wording is trivially reviewable (and unit-testable). NEVER
+  // leaks raw error codes (EACCES/permission denied) — those are dev phrasing.
+  function bootstrapBody(reason) {
+    switch (reason) {
+      case 'no-node':
+      case 'no-npm':
+        return 'AWARE requires Node.js, which was not found on this machine. Install Node.js (nodejs.org), then try again.';
+      case 'eacces':
+        return "Couldn't install because this location requires administrator permissions. Run FloLess as administrator, or install Node.js globally yourself and try again.";
+      case 'offline':
+        return 'No network connection was detected. Connect to the internet, then try again.';
+      case 'smoke-failed':
+        return "AWARE installed but didn't start correctly. This sometimes resolves on its own — try again. If it keeps failing, reinstall AWARE manually: npm i -g @aware-aeco/cli";
+      default:
+        return "Setup didn't complete. Try again.";
+    }
+  }
+
+  let bootstrapOverlayEl = null;
+  let bootstrapState = null;     // last applied {status, reason, remediation}
+  let bootstrapReadyTimer = null; // the 400ms "ready" dwell before dismiss
+  // Set by the boot sequence: invoked ONCE when AWARE first reaches ready, to route
+  // to the workspace (licensed) or the sign-in gate (unlicensed). "Setup first" — the
+  // runtime overlay precedes the gate, so this routing is deferred until AWARE is up.
+  let onBootstrapReady = null;
+
+  function showBootstrapOverlay() {
+    if (bootstrapOverlayEl) return;
+    // Only grab the pre-overlay focus if another overlay hasn't already (the
+    // offline overlay shares this var); avoids clobbering it with our own card.
+    if (!offlineOverlayEl && !lastFocusBeforeOverlay) lastFocusBeforeOverlay = document.activeElement;
+    const wrap = document.createElement('div');
+    wrap.id = 'aware-bootstrap-overlay';
+    // role=status announces the card text on insertion; spinner + log are
+    // decorative/noisy (aria-hidden); bs-status is the polite live channel.
+    wrap.innerHTML =
+      `<div class="bs-card" role="status" tabindex="-1">
+         <div class="bs-spinner" aria-hidden="true"></div>
+         <h1></h1>
+         <p class="bs-body"></p>
+         <p class="bs-status" id="bs-status" aria-live="polite"></p>
+         <p class="bs-log" aria-hidden="true"></p>
+         <p class="bs-remediation"></p>
+         <button type="button" class="secondary" hidden>Try again</button>
+       </div>`;
+    document.body.appendChild(wrap);
+    bootstrapOverlayEl = wrap;
+    wrap.querySelector('.secondary').addEventListener('click', onBootstrapRetry);
+    wrap.querySelector('.bs-card').focus();
+  }
+
+  // The live npm ticker: REPLACE (never append) the single line; aria-hidden so
+  // the rapid output is not announced. Only meaningful while installing.
+  function setBootstrapLogLine(line) {
+    if (!bootstrapOverlayEl) return;
+    const log = bootstrapOverlayEl.querySelector('.bs-log');
+    if (log) log.textContent = line || '';
+  }
+
+  // Drive the card from a {status, reason, remediation} snapshot (SSE or health).
+  function updateBootstrap(s) {
+    if (!s) return;
+    const status = s.status;
+    if (status === 'ready') return finishBootstrapReady();
+    if (status !== 'installing' && status !== 'probing' && status !== 'failed') return; // idle — nothing to show yet
+    showBootstrapOverlay();
+    if (!bootstrapOverlayEl) return;
+    const prev = bootstrapState;
+    bootstrapState = { status, reason: s.reason ?? null, remediation: s.remediation ?? null };
+    const card = bootstrapOverlayEl.querySelector('.bs-card');
+    const spinner = bootstrapOverlayEl.querySelector('.bs-spinner');
+    const h1 = bootstrapOverlayEl.querySelector('h1');
+    const body = bootstrapOverlayEl.querySelector('.bs-body');
+    const statusEl = bootstrapOverlayEl.querySelector('.bs-status');
+    const log = bootstrapOverlayEl.querySelector('.bs-log');
+    const remediation = bootstrapOverlayEl.querySelector('.bs-remediation');
+    const retry = bootstrapOverlayEl.querySelector('.secondary');
+    if (status === 'failed') {
+      // No spinner on failure — absence of motion is the signal (no error icon).
+      if (spinner) spinner.remove();
+      h1.textContent = 'Setup failed';
+      body.textContent = bootstrapBody(s.reason);
+      statusEl.textContent = '';
+      if (log) log.textContent = ''; // ticker is only meaningful while installing
+      // Server remediation is SUPPLEMENTARY dim context — omit if empty or if it
+      // duplicates the fixed body (the fixed copy is the user-facing message).
+      const rem = (s.remediation || '').trim();
+      remediation.textContent = rem && rem !== body.textContent ? rem : '';
+      retry.hidden = false;
+      // Respect an in-flight retry: an SSE/poll re-render of `failed` mid-retry
+      // would otherwise re-enable the button and allow duplicate clicks. The
+      // server is idempotent today (terminal-state guard on /api/bootstrap/retry),
+      // but the UI shouldn't depend on that.
+      retry.disabled = bootstrapRetryInFlight;
+      retry.textContent = bootstrapRetryInFlight ? 'Trying…' : 'Try again';
+    } else {
+      // probing / installing — spinner spins, no button.
+      if (!bootstrapOverlayEl.querySelector('.bs-spinner')) {
+        const sp = document.createElement('div');
+        sp.className = 'bs-spinner';
+        sp.setAttribute('aria-hidden', 'true');
+        card.insertBefore(sp, h1);
+      }
+      h1.textContent = 'Setting up AWARE…';
+      body.textContent = 'Installing the AWARE runtime. This happens once.';
+      // probing may say "Checking…"; installing clears it (the ticker carries the signal).
+      statusEl.textContent = status === 'probing' ? 'Checking for AWARE…' : '';
+      if (status !== 'installing' && log) log.textContent = ''; // clear ticker when not installing
+      remediation.textContent = '';
+      retry.hidden = true;
+    }
+    // Re-focus the card when the STATE changes (not on every event) so the new
+    // h1/body is re-announced via role=status without spamming on each ticker line.
+    if (!prev || prev.status !== status) {
+      if (document.activeElement !== card) card.focus();
+    }
+  }
+
+  // Transition installing→ready: a brief "Ready" beat, then remove (not instant)
+  // so success registers before the workspace paints. A dwell, not an animation.
+  function finishBootstrapReady() {
+    if (!bootstrapOverlayEl) {
+      // No overlay was ever raised (the happy path AWARE-already-ready boot, or a
+      // very fast probing→ready before the first poll tick painted). Record the
+      // state and route now if the boot sequence wired onBootstrapReady — without
+      // this, routing depends on the boot's second health fetch winning the race
+      // against SSE/poll delivering `ready` first. (One-shot; onBootstrapReady is
+      // self-gated by `routed`, so a later call from the boot fetch is a no-op.)
+      bootstrapState = { status: 'ready', reason: null, remediation: null };
+      if (onBootstrapReady) onBootstrapReady();
+      return;
+    }
+    if (bootstrapReadyTimer) return; // beat already scheduled
+    bootstrapState = { status: 'ready', reason: null, remediation: null };
+    const card = bootstrapOverlayEl.querySelector('.bs-card');
+    const spinner = bootstrapOverlayEl.querySelector('.bs-spinner');
+    if (spinner) spinner.remove();
+    if (card) {
+      card.querySelector('h1').textContent = 'AWARE is ready.';
+      card.querySelector('.bs-body').textContent = '';
+      card.querySelector('.bs-status').textContent = '';
+      card.querySelector('.bs-log').textContent = '';
+      card.querySelector('.bs-remediation').textContent = '';
+      card.querySelector('.secondary').hidden = true;
+    }
+    bootstrapReadyTimer = setTimeout(() => {
+      hideBootstrapOverlay();
+      // AWARE is up — NOW route to the workspace or the sign-in gate (deferred until
+      // ready by the "setup first" boot sequence). One-shot; guarded in the callback.
+      if (onBootstrapReady) onBootstrapReady();
+    }, 400);
+  }
+
+  function hideBootstrapOverlay() {
+    if (bootstrapReadyTimer) { clearTimeout(bootstrapReadyTimer); bootstrapReadyTimer = null; }
+    if (!bootstrapOverlayEl) return;
+    bootstrapOverlayEl.remove();
+    bootstrapOverlayEl = null;
+    // Restore focus only if WE own the saved focus and no other overlay is up.
+    if (!offlineOverlayEl && lastFocusBeforeOverlay && document.contains(lastFocusBeforeOverlay)) {
+      try { lastFocusBeforeOverlay.focus(); } catch { /* element gone */ }
+      lastFocusBeforeOverlay = null;
+    }
+  }
+
+  let bootstrapRetryInFlight = false;
+
+  async function onBootstrapRetry(e) {
+    if (bootstrapRetryInFlight) return; // guard double-clicks even before disabled paints
+    bootstrapRetryInFlight = true;
+    const btn = e.currentTarget;
+    btn.disabled = true;
+    btn.textContent = 'Trying…';
+    try {
+      await api('/api/bootstrap/retry', { method: 'POST' });
+      // Server kicked the state machine back to probing/installing; the SSE
+      // stream + health poll rebuild the card. Pre-empt with a probing view so
+      // the click feels responsive even before the first event arrives — but
+      // only if no faster SSE/poll event has already moved us past `failed`
+      // (else we'd briefly clobber a definitive update with stale optimism).
+      if (bootstrapState?.status === 'failed') {
+        updateBootstrap({ status: 'probing', reason: null, remediation: null });
+      }
+    } catch (err) {
+      // Retry call itself failed (server unreachable mid-retry) — leave the
+      // failed card up, SURFACE the error so the user knows the click landed
+      // nowhere (silent re-enable looks like the click didn't register), and
+      // re-enable so they can try again. The offline overlay (if the server
+      // is truly down) layers on top via its own health path.
+      const statusEl = bootstrapOverlayEl?.querySelector('.bs-status');
+      if (statusEl) statusEl.textContent = 'Retry failed — server unreachable.';
+      console.warn('bootstrap retry failed', err);
+      btn.disabled = false;
+      btn.textContent = 'Try again';
+    } finally {
+      bootstrapRetryInFlight = false;
+    }
+  }
+
+  function initServerStatusUI() {
+    if (document.getElementById('server-status-restart')) return;
+    const style = document.createElement('style');
+    style.textContent = `
+      footer .status .stat-server .dot.offline{background:var(--err,#f87171);box-shadow:0 0 6px var(--err,#f87171);}
+      #server-status-restart{appearance:none;border:1px solid var(--err,#f87171);background:transparent;color:var(--err,#f87171);
+        font-family:var(--mono,monospace);font-size:11px;cursor:pointer;padding:1px 7px;border-radius:4px;margin-left:2px;text-decoration:none;display:inline-block;}
+      /* display:inline-block on the ID above would beat the UA [hidden]{display:none}
+         rule (ID > attribute specificity), leaving the link visible while online — so
+         restore hiding with an ID+attribute rule that wins. */
+      #server-status-restart[hidden]{display:none;}
+      #server-status-restart:hover{background:color-mix(in srgb,var(--err,#f87171) 14%,transparent);}
+      #server-offline-overlay{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;
+        background:color-mix(in srgb,var(--bg,#020817) 88%,transparent);backdrop-filter:blur(2px);
+        color:var(--text,#f8fafc);font-family:var(--ui,system-ui,sans-serif);}
+      #server-offline-overlay .so-card{max-width:420px;text-align:center;padding:36px 34px;border-radius:14px;
+        background:var(--surface,#0b1424);border:1px solid var(--border,#1e293b);box-shadow:0 20px 60px rgba(0,0,0,.5);}
+      #server-offline-overlay .so-spinner{width:30px;height:30px;margin:0 auto 14px;border-radius:50%;
+        border:3px solid color-mix(in srgb,var(--text-dim,#94a3b8) 28%,transparent);border-top-color:var(--accent,#3b82f6);
+        animation:so-spin .8s linear infinite;}
+      @keyframes so-spin{to{transform:rotate(360deg);}}
+      @media (prefers-reduced-motion:reduce){#server-offline-overlay .so-spinner{animation:none;}}
+      #server-offline-overlay h1{font-size:19px;margin:0 0 8px;font-weight:600;}
+      #server-offline-overlay p{font-size:13.5px;line-height:1.5;color:var(--text-dim,#94a3b8);margin:0 0 4px;}
+      #server-offline-overlay .so-card:focus{outline:none;}
+      #server-offline-overlay .so-status{min-height:16px;margin:10px 0 0;font-size:12.5px;color:var(--text-dim,#94a3b8);}
+      #server-offline-overlay .secondary{appearance:none;cursor:pointer;font-size:12.5px;margin-top:16px;
+        background:transparent;border:1px solid var(--border,#1e293b);color:var(--text-dim,#94a3b8);
+        padding:7px 16px;border-radius:7px;text-decoration:none;display:inline-block;}
+      #server-offline-overlay .secondary:hover{border-color:var(--accent,#3b82f6);color:var(--text,#f8fafc);}
+      /* display:inline-block (for padding) would beat the UA [hidden] rule — keep the
+         link hidden until escalation with an ID+attribute rule that wins on specificity. */
+      #server-offline-overlay .secondary[hidden]{display:none;}
+      /* ── AWARE first-run setup overlay ──────────────────────────────────────
+         Shares the offline overlay's .so-card chrome (same tokens, spinner, copy
+         scale) but differentiates by COPY, not color/icon (see the UX spec). Sits
+         BELOW the offline overlay (99997 < 99998 < 99999 gate): a server crash
+         mid-setup should layer the reconnect card on top. */
+      #aware-bootstrap-overlay{position:fixed;inset:0;z-index:99997;display:flex;align-items:center;justify-content:center;
+        background:color-mix(in srgb,var(--bg,#020817) 88%,transparent);backdrop-filter:blur(2px);
+        color:var(--text,#f8fafc);font-family:var(--ui,system-ui,sans-serif);}
+      #aware-bootstrap-overlay .bs-card{max-width:420px;text-align:center;padding:36px 34px;border-radius:14px;
+        background:var(--surface,#0b1424);border:1px solid var(--border,#1e293b);box-shadow:0 20px 60px rgba(0,0,0,.5);}
+      #aware-bootstrap-overlay .bs-card:focus{outline:none;}
+      #aware-bootstrap-overlay .bs-spinner{width:30px;height:30px;margin:0 auto 14px;border-radius:50%;
+        border:3px solid color-mix(in srgb,var(--text-dim,#94a3b8) 28%,transparent);border-top-color:var(--accent,#3b82f6);
+        animation:so-spin .8s linear infinite;}
+      @media (prefers-reduced-motion:reduce){#aware-bootstrap-overlay .bs-spinner{animation:none;}}
+      #aware-bootstrap-overlay h1{font-size:19px;margin:0 0 8px;font-weight:600;}
+      #aware-bootstrap-overlay p{font-size:13.5px;line-height:1.5;color:var(--text-dim,#94a3b8);margin:0 0 4px;}
+      #aware-bootstrap-overlay .bs-status{min-height:16px;margin:10px 0 0;font-size:12.5px;color:var(--text-dim,#94a3b8);}
+      /* live npm ticker: dim mono single-line, truncated; replaced (not appended) per SSE line. */
+      #aware-bootstrap-overlay .bs-log{font-family:var(--mono,monospace);font-size:11.5px;color:var(--text-dim,#94a3b8);
+        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px;margin:8px 0 0;opacity:.7;}
+      #aware-bootstrap-overlay .bs-remediation{margin:8px 0 0;font-size:12.5px;color:var(--text-dim,#94a3b8);}
+      #aware-bootstrap-overlay .secondary{appearance:none;cursor:pointer;font-size:12.5px;margin-top:16px;
+        background:transparent;border:1px solid var(--border,#1e293b);color:var(--text-dim,#94a3b8);
+        padding:7px 16px;border-radius:7px;}
+      #aware-bootstrap-overlay .secondary:hover{border-color:var(--accent,#3b82f6);color:var(--text,#f8fafc);}
+      #aware-bootstrap-overlay .secondary:disabled{cursor:default;opacity:.55;border-color:var(--border,#1e293b);color:var(--text-dim,#94a3b8);}
+      #aware-bootstrap-overlay .bs-log:empty,#aware-bootstrap-overlay .bs-remediation:empty{display:none;}`;
+    document.head.appendChild(style);
+    const stat = document.querySelector('footer .status .stat'); // first stat = runtime
+    if (!stat) return;
+    stat.classList.add('stat-server');
+    const btn = document.createElement('a'); // real anchor — the href performs the launch
+    btn.id = 'server-status-restart';
+    btn.href = 'floless://start';
+    btn.textContent = '↻ Restart FloLess';
+    btn.dataset.tip = 'Restart the local server';
+    btn.hidden = true;
+    btn.addEventListener('click', () => {
+      // Feedback only — the href launches; don't preventDefault.
+      btn.textContent = 'starting…';
+      setTimeout(() => { btn.textContent = '↻ Restart FloLess'; }, 4000); // health poll flips the light back to green
+    });
+    stat.appendChild(btn);
+  }
+  function setServerStatus(online) {
+    if (online === serverOnline) return;
+    const wasOnline = serverOnline;
+    serverOnline = online;
+    const stat = document.querySelector('footer .status .stat-server') || document.querySelector('footer .status .stat');
+    const dot = stat && stat.querySelector('.dot');
+    const label = stat && stat.querySelector('.stat-val');
+    const btn = document.getElementById('server-status-restart');
+    if (dot) dot.classList.toggle('offline', !online);
+    if (label) label.textContent = online ? 'runtime online' : 'server offline';
+    if (btn) btn.hidden = online;
+    if (online) {
+      hideOfflineOverlay(); // also clears the escalation timer + restores focus
+      // Recovered from a boot-time / never-loaded outage: now that the server is
+      // back, pull the workspace so the canvas fills in instead of staying empty.
+      if (wasOnline === false && !currentId) loadWorkspaceData();
+    } else {
+      showOfflineOverlay();
+    }
+  }
+  let shownVersion = false;
+  function startHealthPoll() {
+    const tick = async () => {
+      let ok = false;
+      try {
+        const r = await fetch('/api/health', { cache: 'no-store' });
+        ok = r.ok;
+        if (ok) {
+          const h = await r.json();
+          // Stamp the build + AWARE runtime versions into the footer once (so a
+          // stale install or AWARE mismatch is self-diagnosable). appVersion is
+          // the real sq.version on an install (package.json only from source);
+          // awareVersion is the aware npm package this app drives.
+          if (!shownVersion) {
+            const av = document.getElementById('app-version');
+            if (av && h && h.appVersion) av.textContent = 'v' + h.appVersion;
+            const wv = document.getElementById('aware-version');
+            if (wv && h && h.awareVersion) wv.textContent = 'AWARE ' + h.awareVersion;
+            if (h && (h.appVersion || h.awareVersion)) shownVersion = true;
+          }
+          // Bootstrap BACKSTOP: reconcile the setup overlay from cached health
+          // state in case an SSE event was missed. ready → finish the beat &
+          // dismiss; failed/installing/probing → (re)render that state.
+          if (h && h.bootstrap) {
+            updateBootstrap({ status: h.bootstrap, reason: h.bootstrapReason ?? null, remediation: h.bootstrapRemediation ?? null });
+          }
+        }
+      } catch { ok = false; }
+      setServerStatus(ok);
+    };
+    tick();
+    setInterval(tick, 5000);
+  }
+
+  // Re-check the subscription after a seat-takeover and gate this session if it
+  // lost access. Re-uses the bootstrap gate panel.
+  async function recheckLicenseAndGate() {
+    let s; try { s = await api('/api/license/status'); } catch { return; }
+    if (s.state !== 'valid' && s.state !== 'offline-grace') renderGate(s);
+  }
+
+  function connectSse() {
+    const es = new EventSource('/api/events');
+    let reloadTimer = null;
+    es.onopen = () => setServerStatus(true);
+    es.onmessage = (e) => {
+      let m;
+      try { m = JSON.parse(e.data); } catch { return; }
+      if (!m || typeof m !== 'object') return; // valid non-object JSON (null/number) has no .type
+      if (m.type === 'bootstrap') {
+        // First-run AWARE setup state machine. `line` carries an npm ticker line
+        // (installing only) → dim ticker; `status`/`reason` drive the card state.
+        if (m.line != null) setBootstrapLogLine(m.line);
+        if (m.status) updateBootstrap({ status: m.status, reason: m.reason ?? null, remediation: m.remediation ?? null });
+      } else if (m.type === 'trace' && m.id === currentId) {
+        pushTrace(m.event);
+        if (state.currentTab === 'execution') renderInspect();
+      } else if (m.type === 'trace-file' && m.id === currentId && !state.running) {
+        // A terminal-driven run wrote a trace for the open app (our own UI runs
+        // are handled by the type:'trace' path above and skipped via state.running).
+        liveTrace.length = 0;
+        (m.events || []).forEach(pushTrace);
+        state.hasRun = true;
+        if (state.currentTab === 'execution') renderInspect();
+      } else if (m.type === 'run-started' && m.id === currentId) {
+        liveTrace.length = 0;
+        state.hasRun = true;
+      } else if (m.type === 'templates-changed') {
+        loadTemplates().catch(() => {});
+      } else if (m.type === 'baked' && m.id === currentId) {
+        // Baked (here or in another tab) → refresh so the menu item flips to "Re-bake".
+        loadApp(currentId).catch(() => {});
+      } else if (m.type === 'grafted') {
+        // A new agent was grafted (here or in another tab) → refresh the catalog +
+        // count, and re-render the library if it's open.
+        loadAgentCatalog().then(() => {
+          if ($libModal && $libModal.classList.contains('show')) renderLibrary();
+        }).catch(() => {});
+      } else if (m.type === 'request-added' || m.type === 'requests-changed') {
+        loadRequests();
+      } else if (m.type === 'routine-changed') {
+        loadRoutinesData();
+      } else if (m.type === 'routine-run-started') {
+        runningRoutines.add(m.id);
+        if ($routinesModal.classList.contains('show')) renderRoutinesList();
+      } else if (m.type === 'routine-run-ended') {
+        runningRoutines.delete(m.id);
+        loadRoutinesData();
+      } else if (m.type === 'trigger-session-changed') {
+        applyTriggerSnapshot(m.id, m.snapshot);
+      } else if (m.type === 'connect-result') {
+        // The device-code sign-in resolved. On success, refresh so the card flips
+        // to Connected; otherwise surface the outcome in the integration's slot.
+        connecting.delete(m.id);
+        const slot = dcSlot(m.id);
+        if (m.status === 'connected') {
+          if (slot) slot.innerHTML = '';
+          showToast(`Connected ${m.id}`, 'ok');
+          refreshIntegrations();
+        } else if (slot) {
+          slot.innerHTML = `Sign-in ${escapeHtml(m.status || 'failed')}${m.error ? ' — ' + escapeHtml(m.error) : ''}. Click Connect to retry.`;
+        }
+      } else if (m.type === 'fs-change' && m.kind === 'credential') {
+        // `aware connect`/`disconnect` wrote/removed a token in the local vault —
+        // refresh the Integrations window so its status reflects reality live.
+        refreshIntegrations();
+      } else if (m.type === 'fs-change' && (m.kind === 'source' || m.kind === 'lock') && currentId && pathHasSegment(m.path, currentId)) {
+        // The host AI (or anyone) edited this app's .flo/.lock in the terminal —
+        // refresh so the canvas + gate reflect reality.
+        clearTimeout(reloadTimer);
+        reloadTimer = setTimeout(() => loadApp(currentId).catch(reportErr), 250);
+      } else if (m.type === 'seat-taken') {
+        // This session's seat was claimed by another device (newest-login-wins).
+        showToast('Your session was taken over on another device — sign in to continue.', 'err');
+        recheckLicenseAndGate();
+      }
+    };
+    es.onerror = () => setServerStatus(false); // server unreachable → red; EventSource auto-reconnects (onopen → green)
+  }
+
+  function reportErr(e) {
+    console.error(e);
+    showToast(e.message || String(e), 'err');
+  }
+
+  // True if `id` appears as a full path segment (avoids `foo` matching `foo-bar`).
+  function pathHasSegment(path, id) {
+    return path.split(/[\\/]/).includes(id);
+  }
+
+  // ── templates (reusable node palette / "notes"), server-persisted ───────────
+  // state.favorites holds the template list so app.js's category-suggestion code
+  // keeps working; the chip/star/library behaviour is overridden below.
+  let agentCatalog = [];
+
+  async function loadTemplates() {
+    const { templates } = await api('/api/templates');
+    state.favorites = templates;
+    renderFavBar();
+    markStars();
+    $favCount.textContent = templates.length;
+  }
+
+  // The node a chip/star refers to is identified by source {appId,nodeId}; a card
+  // is "starred" when a template was captured from it in this app.
+  function templateForNode(nodeId) {
+    return state.favorites.find((t) => t.source && t.source.appId === currentId && t.source.nodeId === nodeId);
+  }
+  function markStars() {
+    document.querySelectorAll('.agent-card .fav-btn').forEach((btn) => {
+      btn.classList.toggle('faved', !!templateForNode(btn.dataset.fav));
+    });
+  }
+
+  // Star on a card: save this node as a reusable template (or remove if already).
+  toggleFav = function toggleFavTpl(nodeId) {
+    const existing = templateForNode(nodeId);
+    if (existing) { deleteTemplate(existing.id); return; }
+    openAddFavModal(nodeId);
+  };
+
+  openAddFavModal = function openAddFavModalTpl(nodeId) {
+    state.pendingFavAgentId = nodeId;
+    const a = AGENTS[nodeId];
+    $addFavSub.textContent = `Save "${nodeId}" as a reusable template — usable in any project.`;
+    $favName.value = a ? a.title : nodeId;
+    $favCat.value = '';
+    renderCategorySuggestions();
+    $addFavModal.classList.add('show');
+    setTimeout(() => $favCat.focus(), 50);
+  };
+
+  commitFav = async function commitFavTpl() {
+    const nodeId = state.pendingFavAgentId;
+    if (!nodeId) return;
+    const name = ($favName.value || '').trim() || nodeId;
+    const category = ($favCat.value || '').trim() || 'Uncategorized';
+    const app = apps.get(currentId);
+    const n = app && app.nodes.find((x) => x.id === nodeId);
+    if (!n) { showToast('node not found', 'err'); return; }
+    const node = {
+      agent: n.agent,
+      command: n.command,
+      kind: n.kind,
+      config: n.inputs && Object.keys(n.inputs).length ? n.inputs : n.config,
+    };
+    try {
+      await api('/api/templates', { method: 'POST', body: JSON.stringify({ name, category, node, source: { appId: currentId, nodeId } }) });
+      $addFavModal.classList.remove('show');
+      state.pendingFavAgentId = null;
+      await loadTemplates();
+      showToast(`Saved template "${name}"`, 'ok');
+    } catch (e) { reportErr(e); }
+  };
+
+  async function deleteTemplate(id) {
+    try { await api(`/api/templates/${encodeURIComponent(id)}`, { method: 'DELETE' }); await loadTemplates(); }
+    catch (e) { reportErr(e); }
+  }
+
+  // Template chips: click = "use in this app" (reverse channel); × = delete.
+  renderFavBar = function renderFavBarTpl() {
+    const tpls = state.favorites;
+    $favCount.textContent = tpls.length;
+    if (!tpls.length) { $favChipRow.innerHTML = ''; $favBarEmpty.style.display = 'block'; return; }
+    $favBarEmpty.style.display = 'none';
+    $favChipRow.innerHTML = tpls.map((t) => `
+      <div class="fav-chip" data-tpl="${escapeAttr(t.id)}" data-tip="Use in this workflow · ${escapeAttr(t.category)} · ${escapeAttr((t.node.agent || t.node.kind) + (t.node.command ? '/' + t.node.command : ''))}">
+        <span class="cat">${escapeHtml(t.category)}</span>
+        <span class="name">${escapeHtml(t.name)}</span>
+        <span class="del" data-tip="Delete template">×</span>
+      </div>`).join('');
+    $favChipRow.querySelectorAll('.fav-chip').forEach((chip) => {
+      const id = chip.dataset.tpl;
+      chip.onclick = (e) => { if (e.target.closest('.del')) return; useTemplate(id); };
+      chip.querySelector('.del').onclick = (e) => { e.stopPropagation(); deleteTemplate(id); };
+    });
+  };
+
+  refreshFavMarkers = function refreshFavMarkersTpl() {
+    markStars();
+    if ($libModal.classList.contains('show')) renderLibrary();
+  };
+  saveFavs = function saveFavsNoop() { $favCount.textContent = state.favorites.length; };
+
+  // ── reverse channel: record intent for the host AI, copy a paste-ready line ──
+  function instructionFor(req) {
+    if (req.type === 'use-template' && req.template) {
+      const t = req.template;
+      return `In floless app "${req.appId}", add a node from my saved template "${t.name}" (agent ${t.node.agent || t.node.kind}${t.node.command ? ' / ' + t.node.command : ''}, config ${JSON.stringify(t.node.config || {})}). Edit the .flo, then run \`aware app compile\`.`;
+    }
+    if (req.type === 'tweak') {
+      const base = `In floless app "${req.appId}", change only node "${req.nodeId}": ${req.instruction}. Edit just that node in the .flo, then run \`aware app compile\`.`;
+      return req.snapshots && req.snapshots.length
+        ? `${base}\nReference snapshots (read these for visual context): ${req.snapshots.join(', ')}`
+        : base;
+    }
+    return '';
+  }
+
+  async function copyToClipboard(text) {
+    try { await navigator.clipboard.writeText(text); return true; } catch { return false; }
+  }
+
+  async function useTemplate(templateId) {
+    if (!currentId) { showToast('open a workflow first', 'warn'); return; }
+    try {
+      const { request } = await api('/api/use-template', { method: 'POST', body: JSON.stringify({ appId: currentId, templateId }) });
+      const line = instructionFor(request);
+      const copied = await copyToClipboard(line);
+      appendNarration(`Queued template <strong>${escapeHtml(request.template.name)}</strong> for workflow <code>${escapeHtml(currentId)}</code> — the UI can’t edit the workflow itself, so your terminal AI picks this up and applies it. ${copied ? 'Instruction copied to your clipboard — paste it in.' : 'Open the requests chip (bottom-right) to copy it.'}`);
+      showToast(copied ? 'Queued for your terminal AI · copied to clipboard' : 'Queued for your terminal AI', 'ok');
+      loadRequests();
+    } catch (e) { reportErr(e); }
+  }
+
+  async function tweakNode() {
+    if (!currentId || !state.selectedAgentId) return;
+    const node = state.selectedAgentId;
+    const res = await formModal({
+      title: `Tweak · ${node}`,
+      sub: 'Describe the change in plain English. It is queued for your terminal AI to pick up (pull it with the floless skill, or copy it).',
+      fields: [
+        { name: 'instruction', label: 'What should change about this node?', multiline: true, placeholder: 'e.g. also group by ASSEMBLY_POS and add a per-assembly subtotal' },
+        { name: 'snapshots', label: 'Screenshots (optional)', type: 'images' },
+      ],
+      okLabel: 'Queue for terminal',
+    });
+    const instruction = res && res.instruction ? res.instruction.trim() : '';
+    if (!instruction) return;
+    try {
+      const snaps = Array.isArray(res.snapshots) ? res.snapshots.map((s) => ({ name: s.name, dataUrl: s.dataUrl })) : [];
+      const { request } = await api('/api/tweak', { method: 'POST', body: JSON.stringify({ appId: currentId, nodeId: node, instruction, snapshots: snaps }) });
+      const copied = await copyToClipboard(instructionFor(request));
+      appendNarration(`Tweak queued for <code>${escapeHtml(node)}</code> — your terminal AI can pull it (floless skill) ${copied ? 'or paste the copied instruction' : ''}.`);
+      const toastMsg = snaps.length
+        ? `Tweak + ${snaps.length} snapshot(s) queued${copied ? ' + copied' : ''}`
+        : copied ? 'Tweak queued + copied' : 'Tweak queued';
+      showToast(toastMsg, 'ok');
+      loadRequests();
+    } catch (e) { reportErr(e); }
+  }
+
+  let pendingRequests = [];
+  async function loadRequests() {
+    try {
+      const { requests } = await api('/api/requests');
+      pendingRequests = requests;
+      const $rc = document.getElementById('req-count');
+      const $rs = document.getElementById('req-stat');
+      if ($rc) $rc.textContent = requests.length;
+      if ($rs) $rs.classList.toggle('has-pending', requests.length > 0);
+      const $rm = document.getElementById('requests-modal');
+      if ($rm && $rm.classList.contains('show')) renderRequests(); // keep an open list live
+    } catch { /* non-fatal */ }
+  }
+
+  // The Requests window: every queued change in a list, each copyable + clearable,
+  // plus copy-all / clear-all. instructionFor() output (which embeds file-derived
+  // appId/nodeId/instruction) is rendered via textContent-equivalent escaping.
+  function renderRequests() {
+    const $list = document.getElementById('requests-list');
+    const $clear = document.getElementById('requests-clear');
+    const $copy = document.getElementById('requests-copy');
+    if (!$list) return;
+    const empty = pendingRequests.length === 0;
+    // Hide (not just disable) the bulk actions when there's nothing to act on — a
+    // disabled "Clear all"/"Copy all" over an empty list reads as broken UI.
+    if ($clear) $clear.hidden = empty;
+    if ($copy) $copy.hidden = empty;
+    if (empty) {
+      $list.innerHTML = '<div class="empty-state">No requests queued. Save a Template or ✎ Tweak a node to send a change to your terminal AI.</div>';
+      return;
+    }
+    $list.innerHTML = pendingRequests.map((r) => {
+      const label = r.type === 'use-template' ? 'template' : 'tweak';
+      const badgeCls = r.type === 'tweak' ? 'req-type req-type-tweak' : 'req-type';
+      const target = r.type === 'tweak' && r.nodeId ? ` · node <code>${escapeHtml(r.nodeId)}</code>` : '';
+      const when = r.createdAt ? new Date(r.createdAt) : null;
+      const time = when && !isNaN(when) ? `<span class="req-time">${escapeHtml(nowStamp(when))}</span>` : '';
+      return `
+        <div class="req-item">
+          <div class="req-info">
+            <div class="req-head"><span class="${badgeCls}">${label}</span> <code>${escapeHtml(r.appId || '')}</code>${target}${time}</div>
+            <div class="req-instruction">${escapeHtml(instructionFor(r))}</div>
+            ${r.snapshots && r.snapshots.length ? `<div class="req-thumbs">${r.snapshots.map((_, i) => `<button type="button" class="req-thumb" data-id="${escapeAttr(r.id)}" data-n="${i}" aria-label="View screenshot ${i + 1}"><img src="/api/requests/${encodeURIComponent(r.id)}/snapshot/${i}" alt=""></button>`).join('')}</div>` : ''}
+          </div>
+          <div class="req-actions">
+            <button class="req-copy" data-id="${escapeAttr(r.id)}" data-tip="Copy this instruction">⧉</button>
+            <button class="req-del" data-id="${escapeAttr(r.id)}" data-tip="Clear this request">×</button>
+          </div>
+        </div>`;
+    }).join('');
+    $list.querySelectorAll('.req-copy').forEach((b) => {
+      b.onclick = async () => {
+        const r = pendingRequests.find((x) => x.id === b.dataset.id);
+        if (!r) return;
+        const copied = await copyToClipboard(instructionFor(r));
+        showToast(copied ? 'Copied — paste it to your terminal AI' : 'copy failed', copied ? 'ok' : 'err');
+      };
+    });
+    $list.querySelectorAll('.req-del').forEach((b) => { b.onclick = () => deleteOneRequest(b.dataset.id); });
+    $list.querySelectorAll('.req-thumb').forEach((b) => {
+      b.onclick = () => window.open(`/api/requests/${encodeURIComponent(b.dataset.id)}/snapshot/${b.dataset.n}`, '_blank');
+    });
+  }
+
+  async function deleteOneRequest(id) {
+    try { await api(`/api/requests/${encodeURIComponent(id)}`, { method: 'DELETE' }); await loadRequests(); renderRequests(); }
+    catch (e) { reportErr(e); }
+  }
+  async function clearAllRequests() {
+    if (!pendingRequests.length) return;
+    try { await api('/api/requests', { method: 'DELETE' }); await loadRequests(); renderRequests(); showToast('Cleared all requests', 'ok'); }
+    catch (e) { reportErr(e); }
+  }
+  function openRequests() {
+    renderRequests();
+    document.getElementById('requests-modal').classList.add('show');
+  }
+
+  // ── Agents library: real installed agents + their commands ───────────────────
+  async function loadAgentCatalog() {
+    const { agents } = await api('/api/agents');
+    agentCatalog = agents;
+    const $ac = document.getElementById('agents-count');
+    if ($ac) $ac.textContent = agents.length;
+    // Narrative banner shows the REAL installed-agent count, not a placeholder.
+    const $acn = document.getElementById('agent-count-narr');
+    if ($acn) $acn.textContent = agents.length;
+  }
+
+  openLibrary = function openLibraryReal() {
+    $libSearch.value = '';
+    renderLibrary();
+    $libModal.classList.add('show');
+    if (!agentCatalog.length) loadAgentCatalog().then(renderLibrary).catch(reportErr);
+  };
+
+  renderLibrary = function renderLibraryReal() {
+    const q = ($libSearch.value || '').toLowerCase().trim();
+    const items = agentCatalog.filter((a) => !q || a.id.toLowerCase().includes(q) || (a.kind || '').toLowerCase().includes(q));
+    $libList.innerHTML = items.map((a) => `
+      <div class="lib-item" data-agent="${escapeAttr(a.id)}">
+        <div class="info">
+          <div class="name">${escapeHtml(a.id)} <span style="color:var(--text-dim);font-weight:400">v${escapeHtml(String(a.version))}</span></div>
+          <div class="meta">${escapeHtml(a.kind || 'agent')} · ${a.commands} command${a.commands === 1 ? '' : 's'} · ${a.skills} skill${a.skills === 1 ? '' : 's'}</div>
+        </div>
+        <button class="lib-fav" data-expand="${escapeAttr(a.id)}" data-tip="Show commands">⌄</button>
+      </div>
+      <div class="lib-commands" id="cmds-${escapeAttr(a.id)}" hidden></div>
+    `).join('') || '<div class="empty-state">No agents match.</div>';
+    $libList.querySelectorAll('[data-expand]').forEach((btn) => {
+      btn.onclick = () => expandAgent(btn.dataset.expand);
+    });
+  };
+
+  async function expandAgent(id) {
+    const box = document.getElementById(`cmds-${id}`);
+    if (!box) return;
+    if (!box.hidden) { box.hidden = true; return; }
+    box.hidden = false;
+    box.innerHTML = '<div class="cmd-desc">loading…</div>';
+    try {
+      const { agent } = await api(`/api/agent/${encodeURIComponent(id)}`);
+      const cmds = Array.isArray(agent.commands) ? agent.commands : [];
+      box.innerHTML = cmds.map((c) => `
+        <div class="lib-cmd">
+          <span class="cmd-name">${escapeHtml(c.name)}</span>
+          <span class="cmd-cat">${escapeHtml(c.category || '')}</span>
+          <span class="cmd-desc">${escapeHtml(c.description || '')}</span>
+          <button class="cmd-save" data-agent="${escapeAttr(id)}" data-cmd="${escapeAttr(c.name)}" data-tip="Save as template">★</button>
+        </div>`).join('') || '<div class="cmd-desc">no commands</div>';
+      box.querySelectorAll('.cmd-save').forEach((btn) => {
+        btn.onclick = () => saveAgentCommandTemplate(btn.dataset.agent, btn.dataset.cmd);
+      });
+    } catch (e) { box.innerHTML = `<div class="cmd-desc">error: ${escapeHtml(e.message)}</div>`; }
+  }
+
+  async function saveAgentCommandTemplate(agent, command) {
+    try {
+      await api('/api/templates', { method: 'POST', body: JSON.stringify({
+        name: command, category: agent,
+        node: { agent, command, kind: 'agent', config: {} },
+      }) });
+      await loadTemplates();
+      showToast(`Saved template "${command}"`, 'ok');
+    } catch (e) { reportErr(e); }
+  }
+
+  // ── Integrations: real connection state from the local vault ────────────────
+  const VENDOR_ICON = { microsoft: '▦', google: 'G', trimble: '◬', autodesk: 'A' };
+  let integrations = [];
+
+  openIntegrations = function openIntegrationsReal() {
+    $integrationsModal.classList.add('show');
+    renderIntegrations();
+    refreshIntegrations();
+  };
+
+  // Re-fetch live connection state from the local vault; re-render if the modal
+  // is open. Called on open and whenever a credential file changes (SSE), so an
+  // open window flips to Connected the moment `aware connect` writes the token.
+  function refreshIntegrations() {
+    return api('/api/integrations')
+      .then(({ integrations: list }) => {
+        integrations = list;
+        if ($integrationsModal.classList.contains('show')) renderIntegrations();
+      })
+      .catch(reportErr);
+  }
+
+  renderIntegrations = function renderIntegrationsReal() {
+    if (!integrations.length) {
+      $integrationsList.innerHTML = '<div class="empty-state">Loading installed integrations…</div>';
+      return;
+    }
+    $integrationsList.innerHTML = integrations.map((i) => {
+      const action = i.status === 'connected' ? 'Disconnect' : i.status === 'expired' ? 'Reconnect' : 'Connect';
+      const badge = i.status === 'connected' ? 'Connected' : i.status === 'expired' ? 'Token expired' : 'Not connected';
+      const meta = i.status === 'disconnected' ? '—' : i.expiresAt ? `expires ${new Date(i.expiresAt).toLocaleString()}` : 'connected';
+      return `
+        <div class="int-item int-${i.status}">
+          <div class="int-icon">${escapeHtml(VENDOR_ICON[i.vendor] || (i.name[0] || '?'))}</div>
+          <div class="int-info">
+            <div class="int-name">${escapeHtml(i.name)}</div>
+            <div class="int-kind">${escapeHtml(i.vendor || 'integration')} · agent <code>${escapeHtml(i.agent)}</code></div>
+            <div class="int-scopes">${escapeHtml((i.network || []).join(' · ') || '—')}</div>
+            <div class="int-meta">${escapeHtml(meta)}</div>
+            <div class="int-row">
+              <span class="int-badge int-badge-${i.status}">${badge}</span>
+              <button class="int-action" data-int="${escapeAttr(i.id)}" data-int-action="${action.toLowerCase()}">${action}</button>
+            </div>
+            ${i.status === 'connected' ? '' : `
+            <label class="int-flow" data-tip="Use a one-time device code instead of opening the browser — for headless or locked-down machines where the loopback sign-in can't run">
+              <input type="checkbox" class="int-flow-toggle" data-flow="${escapeAttr(i.id)}"> use a device code instead
+            </label>`}
+            <div class="int-devicecode" data-dc="${escapeAttr(i.id)}"></div>
+          </div>
+        </div>`;
+    }).join('');
+    $integrationsList.querySelectorAll('.int-action').forEach((btn) => {
+      btn.onclick = async () => {
+        // Connect/Reconnect drive the device-code sign-in IN the app (AWARE owns
+        // the OAuth + token storage; we only show the code + reflect the result —
+        // the token never crosses floless.app). Disconnect stays a copied command.
+        if (btn.dataset.intAction === 'disconnect') {
+          const cmd = 'aware disconnect ' + btn.dataset.int;
+          const copied = await copyToClipboard(cmd);
+          showToast(`${copied ? 'Copied — run' : 'Run'} in your terminal:  ${cmd}`, 'info');
+          return;
+        }
+        await startConnect(btn.dataset.int);
+      };
+    });
+  };
+
+  // Device-code sign-in: ask the server to start `aware connect --device-code`,
+  // show the user the code + verification URL, then wait for the SSE result.
+  // `connecting` guards against duplicate clicks spawning parallel polls.
+  const connecting = new Set();
+  function dcSlot(id) {
+    return $integrationsList.querySelector(`.int-devicecode[data-dc="${(window.CSS && CSS.escape) ? CSS.escape(id) : id}"]`);
+  }
+  async function startConnect(id) {
+    if (connecting.has(id)) return;
+    connecting.add(id);
+    const slot = dcSlot(id);
+    // Default flow is OAuth loopback+PKCE (safer; aware opens the browser). The
+    // per-card toggle opts into device-code (a one-time code) for headless /
+    // loopback-blocked machines.
+    const esc = (window.CSS && CSS.escape) ? CSS.escape(id) : id;
+    const toggle = $integrationsList.querySelector(`.int-flow-toggle[data-flow="${esc}"]`);
+    const body = toggle && toggle.checked ? JSON.stringify({ flow: 'device-code' }) : '{}';
+    if (slot) slot.innerHTML = 'Starting sign-in…';
+    try {
+      const res = await api(`/api/connect/${encodeURIComponent(id)}`, { method: 'POST', body });
+      if (slot) {
+        if (res.flow === 'device-code' && res.prompt) {
+          // Fallback flow: show the device code to enter at the verification URL.
+          slot.innerHTML =
+            `Go to <a href="${escapeAttr(res.prompt.verification_uri)}" target="_blank" rel="noopener">${escapeHtml(res.prompt.verification_uri)}</a>` +
+            ` and enter code <strong class="dc-code">${escapeHtml(res.prompt.user_code)}</strong> — waiting for sign-in…`;
+        } else {
+          // OAuth: aware opened the provider sign-in in the browser.
+          slot.innerHTML = 'Opening your browser to sign in… complete it there and this will update automatically.';
+        }
+      }
+    } catch (e) {
+      connecting.delete(id);
+      if (slot) slot.innerHTML = '';
+      reportErr(e);
+    }
+  }
+
+  // Show the per-node Tweak button when a node is selected, and the Debug-in-VS
+  // button only for exec nodes (those carry C# the host can run under a debugger).
+  // Debug lives HERE in the main window, not in the report modal.
+  const _selectAgent = selectAgent;
+  selectAgent = function selectAgentTweakAware(id) {
+    _selectAgent(id);
+    const tb = document.getElementById('tweak-btn');
+    if (tb) tb.hidden = !id;
+    const db = document.getElementById('debug-btn');
+    if (db) {
+      const node = id && currentId && apps.get(currentId)?.nodes.find((n) => n.id === id);
+      db.hidden = !(node && node.config && typeof node.config.code === 'string');
+    }
+  };
+
+  // ── Routines (scheduled .flo runs) ──────────────────────────────────────────
+  // A routine is a TIME-based trigger of `aware app run` (the server scheduler fires
+  // it). This panel is pure CRUD over /api/routines — the same seam the authoring
+  // skill writes to. The UI never composes a workflow; it schedules an existing one.
+  const $routinesModal = document.getElementById('routines-modal');
+  const $routineEditModal = document.getElementById('routine-edit-modal');
+  let routinesData = [];
+  let routinesMax = 15;
+  let editingRoutineId = null;
+  let editWorkflows = []; // app list for the workflow <select>, cached per edit-open
+  let editTriggerSource = null; // picked workflow's triggerSource (null = not trigger-eligible)
+  let editRoutineMode = 'schedule'; // 'schedule' | 'trigger' — chosen kind in the edit form
+  const runningRoutines = new Set(); // ids executing now (SSE start → ended)
+
+  const RTN_DAY_LABELS = { sun: 'Sun', mon: 'Mon', tue: 'Tue', wed: 'Wed', thu: 'Thu', fri: 'Fri', sat: 'Sat' };
+  const RTN_DAY_ORDER = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+
+  function scheduleText(s) {
+    if (!s || !s.kind) return '—';
+    if (s.kind === 'hourly') return s.everyHours === 1 ? 'Every hour' : `Every ${s.everyHours} hours`;
+    if (s.kind === 'daily') return `Daily · ${s.time}`;
+    if (s.kind === 'weekdays') return `Weekdays · ${s.time}`;
+    if (s.kind === 'weekly') {
+      const days = (s.days || []).slice().sort((a, b) => RTN_DAY_ORDER.indexOf(a) - RTN_DAY_ORDER.indexOf(b)).map((d) => RTN_DAY_LABELS[d] || d).join(', ');
+      return `${days || '—'} · ${s.time}`;
+    }
+    if (s.kind === 'cron') return `Custom · ${s.expr}`;
+    return '—';
+  }
+
+  // Build the hour/minute <select> options once (00–23 / 00–59). App-styled selects
+  // replace the native <input type="time"> so the picker matches the dark baseline.
+  function fillTimeSelects() {
+    const $h = document.getElementById('rtn-hour');
+    const $m = document.getElementById('rtn-minute');
+    if (!$h || !$m || $h.options.length) return; // build once
+    const pad = (n) => String(n).padStart(2, '0');
+    $h.innerHTML = Array.from({ length: 24 }, (_, i) => `<option value="${pad(i)}">${pad(i)}</option>`).join('');
+    $m.innerHTML = Array.from({ length: 60 }, (_, i) => `<option value="${pad(i)}">${pad(i)}</option>`).join('');
+  }
+  function setTimeSelects(hhmm) {
+    const [h, m] = (hhmm || '07:00').split(':');
+    const $h = document.getElementById('rtn-hour');
+    const $m = document.getElementById('rtn-minute');
+    if ($h) $h.value = (h || '07').padStart(2, '0');
+    if ($m) $m.value = (m || '00').padStart(2, '0');
+  }
+  function getTimeSelects() {
+    const h = document.getElementById('rtn-hour').value || '07';
+    const m = document.getElementById('rtn-minute').value || '00';
+    return `${h}:${m}`;
+  }
+  function relTime(iso) {
+    if (!iso) return '—';
+    const ms = new Date(iso).getTime() - Date.now();
+    if (isNaN(ms)) return '—';
+    if (ms <= 0) return 'due';
+    const min = Math.round(ms / 60000);
+    if (min < 60) return `in ${min} min`;
+    const h = Math.round(min / 60);
+    if (h < 48) return `in ${h} h`;
+    return `in ${Math.round(h / 24)} d`;
+  }
+  function absTime(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    return isNaN(d.getTime()) ? '' : d.toLocaleString();
+  }
+  function lastRunTip(r) {
+    if (!r.lastRun) return 'Never run yet';
+    const lr = r.lastRun;
+    const dur = lr.durationMs != null ? ` · ${(lr.durationMs / 1000).toFixed(1)} s` : '';
+    return `Last run ${lr.status}${lr.reason ? ' — ' + lr.reason : ''} · ${absTime(lr.at)}${dur}`;
+  }
+
+  // ── Trigger-routine row helpers ─────────────────────────────────────────────
+  // A trigger routine's "when" descriptor (mirrors scheduleText for timers): the
+  // source agent/command it fires on, from the routine's TriggerBinding.
+  function triggerWhenText(r) {
+    const t = r.trigger || {};
+    const src = t.agent ? `${t.agent}${t.command ? '/' + t.command : ''}` : 'event';
+    return `On trigger · ${src}`;
+  }
+
+  // Short "x ago" for a PAST instant (relTime is for future fires). '' when absent.
+  function agoTime(iso) {
+    if (!iso) return '';
+    const ms = Date.now() - new Date(iso).getTime();
+    if (isNaN(ms) || ms < 0) return '';
+    const min = Math.round(ms / 60000);
+    if (min < 1) return 'just now';
+    if (min < 60) return `${min}m ago`;
+    const h = Math.round(min / 60);
+    if (h < 48) return `${h}h ago`;
+    return `${Math.round(h / 24)}d ago`;
+  }
+
+  // Map a trigger routine's live session snapshot to its status cell —
+  // {label, dotClass, tip, sr} mirroring a schedule row's nextLabel/dot. Dot classes
+  // reuse the existing palette: listening=ok, blocked=skipped, error=failed, stopped=muted.
+  // Pure render of server-pushed state; the UI never composes it.
+  function triggerStatus(r) {
+    if (!r.enabled) return { label: 'stopped', dotClass: '', tip: 'Disabled — turn on to start watching', sr: 'Status: stopped' };
+    if (r.broken) return { label: 'blocked', dotClass: 'skipped', tip: r.broken.reason, sr: `Status: blocked — ${r.broken.reason}` };
+    const ss = r.session || null;
+    const state = ss ? ss.state : 'stopped';
+    if (state === 'blocked') {
+      const why = (ss && ss.error) || 'Not runnable — needs Compile';
+      return { label: 'blocked', dotClass: 'skipped', tip: why, sr: `Status: blocked — ${why}` };
+    }
+    if (state === 'error') {
+      const why = (ss && ss.error) || 'The watcher exited with an error';
+      return { label: 'error', dotClass: 'failed', tip: why, sr: `Status: error — ${why}` };
+    }
+    if (state === 'listening') {
+      const fired = (ss && ss.firedCount) || 0;
+      const label = fired ? `listening · ${fired}×` : 'listening';
+      let tip = 'Watching for events — runs on each one';
+      if (fired) {
+        const le = ss.lastEvent;
+        tip = `Fired ${fired}×` + (le ? ` · ${le.summary} · ${agoTime(le.at) || absTime(le.at)}` : '');
+      }
+      const sr = `Status: listening, fired ${fired} times` + (ss && ss.lastEvent ? `, last event ${ss.lastEvent.summary}` : '');
+      return { label, dotClass: 'ok', tip, sr };
+    }
+    return { label: 'stopped', dotClass: '', tip: 'Not running', sr: 'Status: stopped' };
+  }
+
+  async function loadRoutinesData() {
+    try {
+      const res = await api('/api/routines');
+      routinesData = res.routines || [];
+      routinesMax = res.max || 15;
+      // Reconcile running indicators from the server's authoritative state (queued/
+      // active) so a missed SSE end-event can't leave a spinner wedged on.
+      runningRoutines.clear();
+      for (const r of routinesData) if (r.running) runningRoutines.add(r.id);
+      if ($routinesModal.classList.contains('show')) renderRoutinesList();
+    } catch { /* non-fatal */ }
+  }
+
+  // SSE: a trigger routine's live session snapshot changed. Update the in-memory
+  // row and re-render; flash the row when its fired count climbs (a real event).
+  function applyTriggerSnapshot(id, snapshot) {
+    const r = routinesData.find((x) => x.id === id);
+    if (!r) { loadRoutinesData(); return; } // unknown id (created in another tab) → resync
+    const prevFired = (r.session && r.session.firedCount) || 0;
+    r.session = snapshot;
+    if (!$routinesModal.classList.contains('show')) return;
+    renderRoutinesList();
+    if (snapshot && snapshot.firedCount > prevFired) flashRoutineRow(id);
+  }
+
+  // Briefly tint a row when it just fired. Re-applies on rapid repeats via a forced
+  // reflow (else the animation wouldn't restart). Honors reduced-motion (CSS).
+  function flashRoutineRow(id) {
+    // ids are slugs ([a-z0-9._-]) — safe inside a quoted attribute selector as-is.
+    const el = document.querySelector(`.rtn-item[data-id="${id}"]`);
+    if (!el) return;
+    el.classList.remove('rtn-fired-flash');
+    void el.offsetWidth;
+    el.classList.add('rtn-fired-flash');
+  }
+
+  function renderRoutinesList() {
+    const $list = document.getElementById('routines-list');
+    const $quota = document.getElementById('rtn-quota');
+    const $add = document.getElementById('rtn-add');
+    if (!$list) return;
+    const n = routinesData.length;
+    const full = n >= routinesMax;
+    const near = !full && n >= routinesMax - 3;
+    $quota.className = 'rtn-quota' + (full ? ' full' : near ? ' near' : '');
+    $quota.innerHTML = `<span class="num">${n}</span> of ${routinesMax} routines used` +
+      (full ? ' · <span class="cap-note">limit reached — delete one to add another</span>' : '');
+    if ($add) $add.hidden = full; // hide (don't disable) at the cap
+    if (!n) {
+      $list.innerHTML = '<div class="empty-state">No routines yet. Add one to run a workflow on a schedule.</div>';
+      return;
+    }
+    $list.innerHTML = routinesData.map((r) => {
+      const isTrigger = r.kind === 'trigger';
+      const running = runningRoutines.has(r.id);
+      const broken = r.broken ? `<span class="rtn-dot">·</span><span style="color:var(--err)">${escapeHtml(r.broken.reason)}</span>` : '';
+      let statusEl, nextTip, nextLabel;
+      if (isTrigger) {
+        const t = triggerStatus(r);
+        nextLabel = t.label;
+        nextTip = t.tip;
+        statusEl = `<span class="rtn-status ${t.dotClass}" data-tip="${escapeAttr(t.tip)}"><span class="sr-only">${escapeHtml(t.sr)}</span></span>`;
+      } else {
+        statusEl = running
+          ? '<span class="rtn-spinner" data-tip="Running now…"></span>'
+          : `<span class="rtn-status ${escapeAttr(r.lastRun ? r.lastRun.status : '')}" data-tip="${escapeAttr(lastRunTip(r))}"></span>`;
+        nextTip = r.nextFireAt ? `Next run: ${absTime(r.nextFireAt)}` : (r.broken ? r.broken.reason : r.enabled ? 'Not scheduled' : 'Disabled');
+        nextLabel = !r.enabled ? 'disabled' : r.broken ? 'broken' : relTime(r.nextFireAt);
+      }
+      const whenText = isTrigger ? triggerWhenText(r) : scheduleText(r.schedule);
+      const toggleTip = isTrigger ? (r.enabled ? 'Stop listening' : 'Start listening') : `${r.enabled ? 'Disable' : 'Enable'} this routine`;
+      return `
+        <div class="rtn-item ${isTrigger ? 'trigger ' : ''}${r.enabled ? '' : 'disabled'} ${running ? 'running' : ''}" data-id="${escapeAttr(r.id)}">
+          <div class="rtn-main">
+            <div class="rtn-name">${escapeHtml(r.name)}</div>
+            <div class="rtn-sub"><span class="rtn-wf">${escapeHtml(r.workflow)}</span><span class="rtn-dot">·</span><span>${escapeHtml(whenText)}</span>${broken}</div>
+          </div>
+          <div class="rtn-meta"${isTrigger ? ' aria-live="polite" aria-atomic="true"' : ''}>
+            <span class="rtn-next" data-tip="${escapeAttr(nextTip)}">${escapeHtml(nextLabel)}</span>
+            ${statusEl}
+          </div>
+          <div class="rtn-actions">
+            <label class="rtn-toggle" data-tip="${escapeAttr(toggleTip)}">
+              <input type="checkbox" data-rtn-toggle="${escapeAttr(r.id)}" ${r.enabled ? 'checked' : ''}>
+              <span class="rtn-toggle-track"></span>
+            </label>
+            ${isTrigger ? '' : `<button class="rtn-act" data-rtn-run="${escapeAttr(r.id)}" data-tip="Run now"${running ? ' disabled' : ''}>▶</button>`}
+            <button class="rtn-act" data-rtn-edit="${escapeAttr(r.id)}" data-tip="Edit">✎</button>
+            <button class="rtn-act rtn-del-act" data-rtn-del="${escapeAttr(r.id)}" data-tip="Delete">×</button>
+          </div>
+        </div>`;
+    }).join('');
+    $list.querySelectorAll('[data-rtn-toggle]').forEach((el) => { el.onchange = () => toggleRoutine(el.dataset.rtnToggle, el.checked); });
+    $list.querySelectorAll('[data-rtn-run]').forEach((b) => { b.onclick = () => runRoutineNow(b.dataset.rtnRun); });
+    $list.querySelectorAll('[data-rtn-edit]').forEach((b) => { b.onclick = () => openRoutineEdit(b.dataset.rtnEdit); });
+    $list.querySelectorAll('[data-rtn-del]').forEach((b) => { b.onclick = () => deleteRoutineUi(b.dataset.rtnDel); });
+  }
+
+  async function toggleRoutine(id, enabled) {
+    try {
+      await api(`/api/routines/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ enabled }) });
+    } catch (e) { reportErr(e); }
+    loadRoutinesData();
+  }
+  async function runRoutineNow(id) {
+    try {
+      await api(`/api/routines/${encodeURIComponent(id)}/run`, { method: 'POST' });
+      runningRoutines.add(id);
+      renderRoutinesList();
+      showToast('Routine started', 'ok');
+    } catch (e) { reportErr(e); }
+  }
+  // Destructive-action confirm. Cancel holds focus (so Enter/Esc/backdrop all cancel);
+  // only an explicit Delete click removes the routine. Resolves true to proceed.
+  function confirmDeleteRoutine(r) {
+    return new Promise((resolve) => {
+      const $m = document.getElementById('rtn-delete-modal');
+      const $sub = document.getElementById('rtn-delete-sub');
+      const $confirm = document.getElementById('rtn-delete-confirm');
+      const $cancel = document.getElementById('rtn-delete-cancel');
+      const name = r && r.name ? r.name : 'this routine';
+      const when = r ? (r.kind === 'trigger' ? triggerWhenText(r) : scheduleText(r.schedule)) : '';
+      const verb = r && r.kind === 'trigger' ? 'watches' : 'runs';
+      $sub.textContent = `“${name}”${when && when !== '—' ? ` ${verb} ${when}` : ''} — this can’t be undone.`;
+      showModal($m);
+      setTimeout(() => $cancel.focus(), 0); // safe default: Enter activates Cancel
+      const done = (result) => {
+        hideModal($m);
+        $confirm.onclick = $cancel.onclick = $m.onclick = null;
+        document.removeEventListener('keydown', onKey, true);
+        resolve(result);
+      };
+      const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); done(false); } };
+      $confirm.onclick = () => done(true);
+      $cancel.onclick = () => done(false);
+      $m.onclick = (e) => { if (e.target === $m) done(false); };
+      document.addEventListener('keydown', onKey, true);
+    });
+  }
+
+  async function deleteRoutineUi(id) {
+    const r = routinesData.find((x) => x.id === id);
+    if (!(await confirmDeleteRoutine(r))) return; // guard against an accidental × click
+    try {
+      await api(`/api/routines/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      await loadRoutinesData();
+      showToast('Routine deleted', 'ok');
+    } catch (e) { reportErr(e); }
+  }
+
+  // Schedule builder: reveal only the fields the chosen kind needs.
+  // Switch the edit form between schedule and trigger layouts. Hides the schedule
+  // builder and shows the read-only trigger-source line for 'trigger' (only honored
+  // when the picked workflow is actually trigger-eligible).
+  function setRoutineMode(mode) {
+    editRoutineMode = (mode === 'trigger' && editTriggerSource) ? 'trigger' : 'schedule';
+    const trig = editRoutineMode === 'trigger';
+    document.querySelectorAll('#rtn-mode-field .rtn-mode-btn').forEach((b) => {
+      const on = b.dataset.mode === editRoutineMode;
+      b.classList.toggle('active', on);
+      b.setAttribute('aria-pressed', on ? 'true' : 'false');
+    });
+    const schedKind = document.getElementById('rtn-sched-kind-field');
+    const schedDetail = document.getElementById('rtn-sched-detail');
+    const trigField = document.getElementById('rtn-trigger-field');
+    if (schedKind) schedKind.hidden = trig;
+    if (schedDetail) schedDetail.hidden = trig;
+    if (trigField) trigField.hidden = !trig;
+    if (trig && editTriggerSource) {
+      const t = editTriggerSource;
+      const el = document.getElementById('rtn-trigger-src');
+      if (el) el.textContent = `${t.agent || ''}${t.command ? '/' + t.command : ''}` || 'event source';
+    }
+    const enLabel = document.getElementById('rtn-enabled-label');
+    if (enLabel) enLabel.textContent = trig ? 'Enabled — start watching now' : 'Enabled';
+  }
+
+  // Reveal the schedule-vs-trigger chooser only when it's a real choice: a NEW
+  // routine on a trigger-eligible workflow. On edit the kind is fixed (inputs are
+  // coerced against the workflow), so the chooser is hidden and the saved kind shown.
+  function applyRoutineModeAvailability() {
+    const $modeField = document.getElementById('rtn-mode-field');
+    if (editingRoutineId) {
+      if ($modeField) $modeField.hidden = true; // kind fixed after create
+      setRoutineMode(editRoutineMode);
+      return;
+    }
+    const eligible = !!editTriggerSource;
+    if ($modeField) $modeField.hidden = !eligible;
+    setRoutineMode(eligible ? 'trigger' : 'schedule'); // event is the sensible default for a streaming source
+  }
+
+  function applySchedKind(kind) {
+    document.querySelectorAll('#rtn-sched-detail [data-sched]').forEach((el) => {
+      el.hidden = !el.dataset.sched.split(' ').includes(kind);
+    });
+  }
+  function renderDayChips(selected) {
+    const $days = document.getElementById('rtn-days');
+    $days.innerHTML = RTN_DAY_ORDER.map((d) =>
+      `<button type="button" class="tf-chip rtn-day${selected.includes(d) ? ' active' : ''}" data-day="${d}">${RTN_DAY_LABELS[d]}</button>`).join('');
+    $days.querySelectorAll('.rtn-day').forEach((b) => { b.onclick = () => b.classList.toggle('active'); });
+  }
+  function selectedDays() {
+    return [...document.querySelectorAll('#rtn-days .rtn-day.active')].map((b) => b.dataset.day);
+  }
+
+  // Render the chosen workflow's declared inputs (seeded from defaults / the routine's
+  // saved values). Hidden when the workflow declares none.
+  async function loadRoutineInputs(workflowId, prefill) {
+    const $field = document.getElementById('rtn-inputs-field');
+    const $inputs = document.getElementById('rtn-inputs');
+    $inputs.innerHTML = '';
+    $field.hidden = true;
+    editTriggerSource = null;
+    if (!workflowId) { applyRoutineModeAvailability(); return; }
+    let app;
+    try { ({ app } = await api(`/api/app/${encodeURIComponent(workflowId)}`)); } catch { applyRoutineModeAvailability(); return; }
+    if (document.getElementById('rtn-workflow').value !== workflowId) return; // a newer workflow selection superseded this fetch
+    editTriggerSource = (app && app.triggerSource) || null;
+    applyRoutineModeAvailability(); // reveal/hide the schedule-vs-trigger chooser
+    const inps = (app && app.inputs) || [];
+    if (!inps.length) return;
+    $field.hidden = false;
+    // The DOM id is index-based (not the workflow-controlled input name) so a crafted
+    // input name can't inject into the id/for attributes. The real key rides the
+    // escaped data-rtn-in attribute, which collectRoutineInputs reads.
+    $inputs.innerHTML = inps.map((inp, i) => {
+      const id = `rtn-in-${i}`;
+      const val = prefill && inp.name in prefill ? prefill[inp.name] : (inp.default != null ? inp.default : '');
+      const type = inp.type === 'integer' || inp.type === 'number' ? 'number' : 'text';
+      return `<div class="modal-field"><label for="${id}">${escapeHtml(inp.name)}${inp.description ? ' — ' + escapeHtml(inp.description) : ''}</label>`
+        + `<input id="${id}" type="${type}" data-rtn-in="${escapeAttr(inp.name)}" value="${escapeAttr(String(val))}"></div>`;
+    }).join('');
+  }
+  function collectRoutineInputs() {
+    const out = {};
+    document.querySelectorAll('#rtn-inputs [data-rtn-in]').forEach((el) => {
+      const v = el.value.trim();
+      if (v === '') return;
+      out[el.dataset.rtnIn] = el.type === 'number' && !isNaN(Number(v)) ? Number(v) : v;
+    });
+    return out;
+  }
+
+  async function openRoutineEdit(id) {
+    editingRoutineId = id || null;
+    const r = id ? routinesData.find((x) => x.id === id) : null;
+    const $wf = document.getElementById('rtn-workflow');
+    try {
+      const { apps: list } = await api('/api/apps');
+      editWorkflows = list;
+    } catch { editWorkflows = []; }
+    $wf.innerHTML = editWorkflows.map((a) => `<option value="${escapeAttr(a.id)}">${escapeHtml(a.id)}</option>`).join('');
+    document.getElementById('rtn-edit-title').textContent = r ? 'Edit routine' : 'New routine';
+    document.getElementById('rtn-name').value = r ? r.name : '';
+    const wfId = r ? r.workflow : (editWorkflows[0] ? editWorkflows[0].id : '');
+    $wf.value = wfId;
+    // Workflow is fixed after create (inputs are coerced against it) — disable on edit.
+    $wf.disabled = !!r;
+    if (r) $wf.setAttribute('data-tip', 'Workflow is fixed — delete and recreate to use a different one');
+    else $wf.removeAttribute('data-tip');
+    editRoutineMode = (r && r.kind === 'trigger') ? 'trigger' : 'schedule';
+    const sched = (r && r.schedule) ? r.schedule : { kind: 'daily', time: '07:00' };
+    fillTimeSelects();
+    document.getElementById('rtn-kind').value = sched.kind;
+    document.getElementById('rtn-everyhours').value = sched.kind === 'hourly' ? String(sched.everyHours) : '2';
+    setTimeSelects(sched.time || '07:00');
+    document.getElementById('rtn-cron').value = sched.kind === 'cron' ? sched.expr : '';
+    renderDayChips(sched.kind === 'weekly' ? (sched.days || []) : []);
+    applySchedKind(sched.kind);
+    document.getElementById('rtn-enabled').checked = r ? r.enabled : true;
+    await loadRoutineInputs(wfId, r ? r.inputs : null);
+    showModal($routineEditModal);
+    setTimeout(() => document.getElementById('rtn-name').focus(), 0);
+  }
+
+  async function saveRoutine() {
+    const name = document.getElementById('rtn-name').value.trim();
+    if (!name) { showToast('Name is required', 'warn'); return; }
+    const workflow = document.getElementById('rtn-workflow').value;
+    if (!workflow) { showToast('Pick a workflow', 'warn'); return; }
+    const inputs = collectRoutineInputs();
+    const enabled = document.getElementById('rtn-enabled').checked;
+    const asTrigger = editRoutineMode === 'trigger' && !!editTriggerSource;
+    let schedule;
+    if (!asTrigger) {
+      const kind = document.getElementById('rtn-kind').value;
+      if (kind === 'hourly') {
+        const n = Math.max(1, Math.min(24, parseInt(document.getElementById('rtn-everyhours').value, 10) || 1));
+        schedule = { kind: 'hourly', everyHours: n };
+      } else if (kind === 'weekly') {
+        const days = selectedDays();
+        if (!days.length) { showToast('Pick at least one weekday', 'warn'); return; }
+        schedule = { kind: 'weekly', days, time: getTimeSelects() };
+      } else if (kind === 'cron') {
+        const expr = document.getElementById('rtn-cron').value.trim();
+        if (!expr) { showToast('Enter a cron expression', 'warn'); return; }
+        schedule = { kind: 'cron', expr };
+      } else {
+        schedule = { kind, time: getTimeSelects() };
+      }
+    }
+    try {
+      if (editingRoutineId) {
+        const body = asTrigger ? { name, inputs, enabled } : { name, schedule, inputs, enabled };
+        await api(`/api/routines/${encodeURIComponent(editingRoutineId)}`, { method: 'PATCH', body: JSON.stringify(body) });
+        showToast('Routine updated', 'ok');
+      } else {
+        const body = asTrigger ? { kind: 'trigger', name, workflow, inputs, enabled } : { name, workflow, schedule, inputs, enabled };
+        await api('/api/routines', { method: 'POST', body: JSON.stringify(body) });
+        showToast('Routine created', 'ok');
+      }
+      hideModal($routineEditModal);
+      await loadRoutinesData();
+    } catch (e) { showToast(e.message || 'Could not save routine', 'err'); }
+  }
+
+  openRoutines = function openRoutinesReal() {
+    renderRoutinesList();
+    showModal($routinesModal);
+    loadRoutinesData();
+  };
+
+  // Wiring (the modal elements are static in index.html, present when this runs).
+  document.getElementById('routines-btn').onclick = () => openRoutines();
+  document.getElementById('routines-close').onclick = () => hideModal($routinesModal);
+  $routinesModal.onclick = (e) => { if (e.target === $routinesModal) hideModal($routinesModal); };
+  document.getElementById('rtn-add').onclick = () => openRoutineEdit(null);
+  document.getElementById('rtn-edit-cancel').onclick = () => hideModal($routineEditModal);
+  document.getElementById('rtn-edit-save').onclick = () => saveRoutine();
+  $routineEditModal.onclick = (e) => { if (e.target === $routineEditModal) hideModal($routineEditModal); };
+  document.getElementById('rtn-kind').onchange = (e) => applySchedKind(e.target.value);
+  document.querySelectorAll('#rtn-mode-field .rtn-mode-btn').forEach((b) => { b.onclick = () => setRoutineMode(b.dataset.mode); });
+  document.getElementById('rtn-workflow').onchange = (e) => { if (!editingRoutineId) loadRoutineInputs(e.target.value, null); };
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    if ($routineEditModal.classList.contains('show')) hideModal($routineEditModal);
+    else if ($routinesModal.classList.contains('show')) hideModal($routinesModal);
+  });
+
+  // ── init (after app.js bootstrap) ────────────────────────────────────────────
+  // app.js already stored the ORIGINAL functions as .onclick/.oninput before we
+  // reassigned the globals; rebind via arrows so they resolve our versions at
+  // call-time (otherwise Save/library-search silently run the demo code).
+  $browseBtn.onclick = () => openLibrary();
+  $libSearch.oninput = () => renderLibrary();
+
+  // Compile-notes strip: × collapses it to a faint one-line pill; clicking the
+  // collapsed pill re-expands. Delegated (the strip's innerHTML is rebuilt each
+  // load). The choice is remembered per app+note-signature (see notesSig).
+  $notesStrip.addEventListener('click', (e) => {
+    if (e.target.closest('.notes-dismiss')) $notesStrip.classList.add('collapsed');
+    else if ($notesStrip.classList.contains('collapsed')) $notesStrip.classList.remove('collapsed');
+    else return; // click inside the expanded body — nothing to toggle
+    const id = $notesStrip.dataset.appId, sig = $notesStrip.dataset.sig;
+    if (id && sig) saveNotesCollapsed(id, sig, $notesStrip.classList.contains('collapsed'));
+  });
+
+  // Take over the menu/keyboard Save from app.js's demo stub: in the real app the
+  // UI can't author the .flo (that's the terminal AI's job), so "Save" persists the
+  // current workflow's input values locally. "Save to…" (demo .flo download) is
+  // retired — its menu item is removed; neutralize its Ctrl+Shift+S shortcut too.
+  doSave = () => saveCurrentInputs();
+  doSaveAs = () => saveCurrentInputs();
+  // "Open" can't open a local .flo — a workflow is an installed AWARE app, not a
+  // file the UI authors. It opens the searchable workflow picker so you can find one.
+  doOpen = () => openCombo();
+  const $favSave = document.getElementById('fav-save');
+  if ($favSave) $favSave.onclick = () => commitFav();
+
+  const $tweakBtn = document.getElementById('tweak-btn');
+  if ($tweakBtn) $tweakBtn.onclick = () => { tweakNode(); };
+  const $debugBtn = document.getElementById('debug-btn');
+  if ($debugBtn) $debugBtn.onclick = () => { if (state.selectedAgentId) runReport(state.selectedAgentId, { debug: true }); };
+  const $reqStat = document.getElementById('req-stat');
+  if ($reqStat) $reqStat.onclick = () => openRequests();
+  const $reqModal = document.getElementById('requests-modal');
+  const $reqClose = document.getElementById('requests-close');
+  if ($reqClose) $reqClose.onclick = () => $reqModal.classList.remove('show');
+  if ($reqModal) $reqModal.onclick = (e) => { if (e.target === $reqModal) $reqModal.classList.remove('show'); };
+  const $reqClear = document.getElementById('requests-clear');
+  if ($reqClear) $reqClear.onclick = () => clearAllRequests();
+  const $reqCopy = document.getElementById('requests-copy');
+  if ($reqCopy) $reqCopy.onclick = async () => {
+    if (!pendingRequests.length) return;
+    const text = pendingRequests.map(instructionFor).filter(Boolean).join('\n\n');
+    const copied = await copyToClipboard(text);
+    showToast(copied ? `Copied ${pendingRequests.length} request(s) — paste to your terminal AI` : 'copy failed', copied ? 'ok' : 'err');
+  };
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && $reqModal && $reqModal.classList.contains('show')) $reqModal.classList.remove('show');
+  });
+
+  // Pull all workspace data (agents/templates/requests + the apps list). Factored
+  // out of bootWorkspace so the health poll can re-pull it after the server comes
+  // back from a boot-time outage (setServerStatus → recovery).
+  function loadWorkspaceData() {
+    Promise.all([
+      loadAgentCatalog().catch(() => {}),
+      loadTemplates().catch(() => {}),
+      loadRequests().catch(() => {}),
+    ]);
+    return loadApps().catch((e) => {
+      reportErr(e);
+      setComboTriggerLabel('server unreachable');
+      renderCanvasPlaceholder('offline');
+    });
+  }
+
+  // Load the workspace. Entered ONLY for a valid (or offline-grace) subscription AND
+  // after AWARE is ready (see the boot sequence below). The license-independent setup
+  // — overlay CSS, the health poll, and SSE — runs in the boot sequence, so a
+  // setting-up/failed runtime is surfaced even to a signed-out user instead of being
+  // masked by the gate.
+  function bootWorkspace() {
+    loadWorkspaceData();
+    // The demo bootstrap scheduled narration appends (≤720ms out) before we
+    // overrode renderChat; re-render once they've all fired to wipe stragglers.
+    setTimeout(() => { if (currentId) renderChat(); }, 900);
+  }
+
+  // Subscription gate (the server enforces it on every /api/* with 402; the UI
+  // mirrors it so an ungated user sees a sign-in panel, not a broken workspace).
+  // We fetch NO workspace data while ungated. The license endpoints stay open.
+  function renderGate(status) {
+    if (document.getElementById('license-gate')) return;
+    const expired = status.state === 'expired';
+    // signInUrl is server-generated, but escape it anyway before it lands in an
+    // innerHTML href — a crafted FLOLESS_WEB_BASE shouldn't be able to break out.
+    const subUrl = escapeHtml(status.signInUrl || 'https://floless.io');
+    const style = document.createElement('style');
+    style.textContent = `
+      #license-gate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
+        background:var(--bg,#020817);color:var(--text,#f8fafc);font-family:var(--ui,system-ui,sans-serif);}
+      #license-gate .lg-card{max-width:420px;text-align:center;padding:40px 36px;border-radius:14px;
+        background:var(--surface,#0b1424);border:1px solid var(--border,#1e293b);box-shadow:0 20px 60px rgba(0,0,0,.5);}
+      #license-gate .lg-mark{color:var(--accent,#3b82f6);width:54px;height:54px;margin:0 auto 18px;}
+      #license-gate h1{font-size:20px;margin:0 0 8px;font-weight:600;}
+      #license-gate p{font-size:14px;line-height:1.5;color:var(--text-dim,#94a3b8);margin:0 0 22px;}
+      #license-gate .primary{appearance:none;border:none;cursor:pointer;font-size:14px;font-weight:600;
+        padding:11px 22px;border-radius:8px;background:var(--accent,#3b82f6);color:#fff;}
+      #license-gate .primary:hover{filter:brightness(1.08);}
+      #license-gate .lg-status{min-height:18px;margin:14px 0 0;font-size:12.5px;color:var(--text-dim,#94a3b8);}
+      #license-gate .lg-sub{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--accent,#3b82f6);text-decoration:none;}
+      #license-gate .lg-sub:hover{text-decoration:underline;}
+      #license-gate .lg-version{margin:18px 0 0;font-size:11px;font-family:var(--mono,monospace);color:var(--text-muted,#9aa5b6);}`;
+    document.head.appendChild(style);
+    const wrap = document.createElement('div');
+    wrap.id = 'license-gate';
+    wrap.innerHTML = `
+      <div class="lg-card">
+        <div class="lg-mark"><svg viewBox="0 0 192 181" fill="none" xmlns="http://www.w3.org/2000/svg" width="54" height="54">
+          <path d="M93.4818 26.2302L32.3762 26.2313C25.5914 26.2314 19.347 32.217 15.0271 38.0025C11.2275 43.0912 8.72093 49.9322 8.72093 56.5314C8.72093 64.7036 10.9644 71.8345 15.0271 77.7851C19.2332 83.9459 26.1884 90.7551 32.3762 90.7551H159.101C165.715 90.7551 171.878 93.8886 176.177 98.8111C180.654 103.937 183.14 111.953 183.14 118.757C183.14 126.308 181.52 131.542 177.974 137.069C174.152 143.027 159.887 151.23 159.887 151.23" stroke="currentColor" stroke-width="11.6719" stroke-linecap="round"/>
+          <path d="M90.1163 8.72095L106.704 26.7965" stroke="currentColor" stroke-width="11.6712" stroke-linecap="round"/>
+          <path d="M90.1163 44.9346L106.704 26.859" stroke="currentColor" stroke-width="11.6712" stroke-linecap="round"/>
+          <path d="M78.5336 136.746L95.1213 154.822" stroke="currentColor" stroke-width="11.6712" stroke-linecap="round"/>
+          <path d="M78.5336 172.96L95.1213 154.885" stroke="currentColor" stroke-width="11.6712" stroke-linecap="round"/>
+          <path d="M61.4378 154.466H82.2457" stroke="currentColor" stroke-width="11.6712" stroke-linecap="square"/>
+          <path class="mark-node" d="M33.4144 174.908C43.8527 174.908 52.3146 166.446 52.3146 156.008C52.3146 145.57 43.8527 137.108 33.4144 137.108C22.9762 137.108 14.5143 145.57 14.5143 156.008C14.5143 166.446 22.9762 174.908 33.4144 174.908Z" fill="white" stroke="currentColor" stroke-width="8.72093" stroke-linecap="round" stroke-linejoin="round"/>
+          <path class="mark-node" d="M138.092 174.908C148.53 174.908 156.992 166.446 156.992 156.008C156.992 145.57 148.53 137.108 138.092 137.108C127.654 137.108 119.192 145.57 119.192 156.008C119.192 166.446 127.654 174.908 138.092 174.908Z" fill="white" stroke="currentColor" stroke-width="8.72093" stroke-linecap="round" stroke-linejoin="round"/>
+          <path class="mark-node" d="M149.714 43.6142C160.152 43.6142 168.614 35.1523 168.614 24.7141C168.614 14.2758 160.152 5.81396 149.714 5.81396C139.276 5.81396 130.814 14.2758 130.814 24.7141C130.814 35.1523 139.276 43.6142 149.714 43.6142Z" fill="white" stroke="currentColor" stroke-width="8.72093" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg></div>
+        <h1>${expired ? 'Your subscription has expired' : 'Subscription required'}</h1>
+        <p>${expired
+          ? 'Renew your FloLess subscription to keep using floless.app.'
+          : 'floless.app runs on your FloLess subscription. Sign in to continue.'}</p>
+        <button id="lg-signin" class="primary">Sign in at floless.io</button>
+        <p class="lg-status" id="lg-status"></p>
+        <a class="lg-sub" href="${subUrl}" target="_blank" rel="noopener">${expired ? 'Manage subscription →' : 'No subscription yet? Subscribe →'}</a>
+        <p class="lg-version" id="lg-version"></p>
+      </div>`;
+    document.body.appendChild(wrap);
+    // Show the installed build (so a stale install is self-diagnosable from the
+    // gate — the highest-value spot since that's where a confused user lands).
+    // /api/health is un-gated, so this works even while unlicensed.
+    fetch('/api/health', { cache: 'no-store' })
+      .then((r) => r.json())
+      .then((h) => { if (h && h.appVersion) document.getElementById('lg-version').textContent = 'v' + h.appVersion; })
+      .catch(() => { /* version is a nicety; never block the gate on it */ });
+    document.getElementById('lg-signin').onclick = async () => {
+      const s = document.getElementById('lg-status');
+      s.textContent = 'Opening sign-in in your browser…';
+      try { await api('/api/license/start', { method: 'POST' }); } catch { /* ignore */ }
+      s.textContent = 'Waiting for sign-in to complete…';
+      const deadline = Date.now() + 185000;
+      const tick = async () => {
+        let st; try { st = await api('/api/license/status'); } catch { st = {}; }
+        if (st.state === 'valid' || st.state === 'offline-grace') { location.reload(); return; }
+        if (Date.now() > deadline) { s.textContent = 'Timed out — click to try again.'; return; }
+        setTimeout(tick, 2000);
+      };
+      tick();
+    };
+  }
+
+  // ── boot ──────────────────────────────────────────────────────────────────────
+  // AWARE setup is orthogonal to the subscription, so surface the bootstrap state and
+  // run the health poll REGARDLESS of license — and show "Setting up AWARE…" FIRST.
+  // The runtime must exist before a sign-in gate or workspace is meaningful, and a
+  // FAILED install must be visible (with its remediation) rather than hidden behind
+  // the gate. Once AWARE is ready we route: valid subscription → workspace, else gate.
+  (async () => {
+    initServerStatusUI();   // overlay CSS + server-status light (license-independent)
+    startHealthPoll();      // drives the bootstrap overlay via the un-gated /api/health
+
+    let licenseStatus = null;
+    let licenseFetchFailed = false;
+    try { licenseStatus = await api('/api/license/status'); }
+    catch { licenseFetchFailed = true; /* server unreachable → the offline-overlay path (health poll) covers it */ }
+    const licensed = !!licenseStatus &&
+      (licenseStatus.state === 'valid' || licenseStatus.state === 'offline-grace');
+    // SSE carries the live bootstrap ticker + workspace events, but /api/events is
+    // subscription-gated — an unlicensed EventSource would 402 → a false "server
+    // offline". So connect only when licensed; it's safe to connect during install
+    // (the handlers no-op until a workspace is loaded).
+    if (licensed) connectSse();
+
+    let routed = false;
+    onBootstrapReady = async () => {
+      if (routed) return;
+      routed = true; // gate re-entry before any await
+      let effectiveStatus = licenseStatus;
+      let effectivelyLicensed = licensed;
+      // License fetch failed during boot — could be a transient blip while
+      // health later recovered. Retry once before falling through to the gate
+      // so a momentary 5xx on /api/license/status doesn't strand a signed-in
+      // user at "no subscription". (A genuinely-down server is covered by the
+      // offline overlay driven by the health poll.)
+      if (licenseFetchFailed) {
+        try {
+          const r = await api('/api/license/status');
+          effectiveStatus = r;
+          effectivelyLicensed = !!r && (r.state === 'valid' || r.state === 'offline-grace');
+          // The synchronous boot path skipped connectSse() because `licensed`
+          // was false. Recover live updates now that we know we're licensed —
+          // otherwise the workspace would render without SSE and feel stale.
+          if (effectivelyLicensed && !licensed) connectSse();
+        } catch { /* still failing — fall through to gate */ }
+      }
+      if (effectivelyLicensed) bootWorkspace();
+      else renderGate(effectiveStatus || { state: 'none' });
+    };
+
+    // Setup-first: if AWARE isn't ready, show the overlay and DEFER routing until it
+    // is (the health poll + finishBootstrapReady → onBootstrapReady do the routing).
+    let h = null;
+    try { h = await (await fetch('/api/health', { cache: 'no-store' })).json(); }
+    catch { /* health unreachable → route now; the offline overlay handles a down server */ }
+    if (h && h.bootstrap && h.bootstrap !== 'ready') {
+      updateBootstrap({ status: h.bootstrap, reason: h.bootstrapReason ?? null, remediation: h.bootstrapRemediation ?? null });
+    } else {
+      // Health says ready — but the parallel health poll may have transiently
+      // observed installing/probing between this boot's two health fetches and
+      // raised the overlay. finishBootstrapReady both dismisses any raised
+      // overlay (with the brief Ready dwell) AND routes via onBootstrapReady,
+      // collapsing the two paths into one and avoiding "workspace painted
+      // behind a stuck bootstrap card" until the next poll tick.
+      finishBootstrapReady();
+    }
+  })();
+})();