@floless/app 0.16.2 → 0.18.0

package/dist/web/aware.js

@@ -284,6 +284,7 @@
     for (const [k, v] of Object.entries(inputs || {})) if (k !== 'code') inputsNoCode[k] = v;
     return {
       _mode: n.mode,
+      _runtimeModel: !!n.runtimeModel, // B2: lock stamped runtime-model → card badge
       icon: iconFor(n.agent),
       kind: n.kind === 'agent' && n.agent ? `${agentLabel} agent` : escapeHtml(n.kind),
       version: pin ? `v${escapeHtml(String(pin))}` : '—',
@@ -780,13 +781,27 @@
   // every markSpecialNodes — which openInputsDialog calls right after a change.
   function addNodeInputs(card) {
     const vals = currentInputs();
-    const keys = Object.keys(vals);
+    const app = currentId && apps.get(currentId);
+    const declared = app && Array.isArray(app.inputs) ? app.inputs : [];
+    const byName = new Map(declared.map((i) => [i.name, i]));
+    const isVisual = (inp) => !!inp && (inp.widget === 'file' || inp.type === 'image' || inp.type === 'file');
+    const baseName = (p) => String(p || '').split(/[\\/]/).pop() || '';
+    // Show every SET value, plus any declared visual input (so its "not set" /
+    // attach affordance is visible on the node before the first pick).
+    const keys = [...new Set([...Object.keys(vals), ...declared.filter(isVisual).map((i) => i.name)])];
     if (!keys.length) return;
     const wrap = document.createElement('div');
     wrap.className = 'node-inputs';
-    wrap.innerHTML = keys
-      .map((k) => `<span class="ni-pair"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-val">${escapeHtml(String(vals[k]))}</span></span>`)
-      .join('');
+    wrap.innerHTML = keys.map((k) => {
+      const inp = byName.get(k);
+      if (isVisual(inp)) {
+        const v = String(vals[k] || '');
+        if (!v) return `<span class="ni-pair ni-pair-file ni-pair-file-empty"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-val ni-not-set">not set</span></span>`;
+        const glyph = /\.pdf$/i.test(v) ? 'pdf' : 'img';
+        return `<span class="ni-pair ni-pair-file"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-file-glyph">${glyph}</span><span class="ni-val ni-file-name" title="${escapeAttr(v)}">${escapeHtml(baseName(v))}</span></span>`;
+      }
+      return `<span class="ni-pair"><span class="ni-key">${escapeHtml(k)}</span><span class="ni-val">${escapeHtml(String(vals[k]))}</span></span>`;
+    }).join('');
     card.appendChild(wrap);
   }
 
@@ -797,18 +812,57 @@
   function markSpecialNodes() {
     const rid = reportNodeId();
     const iid = inputNodeId();
-    document.querySelectorAll('.agent-card').forEach((card) => {
+    // B3: a baked-visual app (read-strategy: bake) has no runtime input node, so the
+    // "Re-read & re-bake ▸" affordance lands on the entry (first) node card.
+    const app = currentId && apps.get(currentId);
+    const rebakeInput = app && app.rebakeInput ? app.rebakeInput : null;
+    const cards = document.querySelectorAll('.agent-card');
+    const firstId = cards.length ? cards[0].dataset.agentId : null;
+    cards.forEach((card) => {
       const id = card.dataset.agentId;
       const isReport = !!rid && id === rid;
       const isInput = !!iid && id === iid;
+      const isRebake = !!rebakeInput && id === firstId;
       card.classList.toggle('report-node', isReport);
       card.classList.toggle('input-node', isInput);
+      card.classList.toggle('rebake-node', isRebake);
       // clear anything we injected last render, so re-renders never stack
       card.querySelectorAll('.node-action, .node-inputs').forEach((b) => b.remove());
       if (isInput) addNodeInputs(card); // current values, above the button
       if (isReport) addNodeAction(card, 'View report ▸', () => showReport(id));
       if (isInput) addNodeAction(card, 'Set inputs ▸', () => openInputsDialog());
+      if (isRebake) addNodeAction(card, 'Re-read & re-bake ▸', () => openRebakeDialog());
+    });
+  }
+
+  // B3 "swap re-bakes": pick a new source drawing for a baked app and queue a
+  // re-bake request. Thin-UI — the host AI (via the floless-app-rebake skill)
+  // does the actual re-read + re-bake at compose time; the browser only records
+  // intent + the new image. Re-uses the SP1 file field + the request relay.
+  async function openRebakeDialog() {
+    const app = currentId && apps.get(currentId);
+    if (!app || !app.rebakeInput) return;
+    const name = app.rebakeInput;
+    const res = await formModal({
+      title: `Re-read & re-bake · ${app.displayName}`,
+      sub: 'Swap the source drawing. Your terminal AI will re-read it, re-bake the values into config, then ask you to approve.',
+      fields: [{ name, label: `${name} — new source drawing`, type: 'file', accept: ['png', 'jpg', 'webp'] }],
+      okLabel: 'Queue re-bake',
     });
+    if (!res) return;
+    const dataUrl = res[name];
+    if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:')) { showToast('attach a drawing to re-bake', 'warn'); return; }
+    try {
+      const r = await fetch('/api/rebake', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ appId: app.id, inputName: name, snapshots: [{ dataUrl }] }),
+      });
+      const out = await r.json().catch(() => ({ ok: false, error: `re-bake failed (${r.status})` }));
+      if (!out || !out.ok) { showToast((out && out.error) || 'could not queue re-bake', 'err'); return; }
+      showToast('Queued — your terminal AI will re-read & re-bake, then ask you to approve.', 'ok');
+      appendNarration(`<strong>Re-bake queued</strong> for <strong>${escapeHtml(name)}</strong>. Your terminal AI will re-read the drawing, re-bake the config literals, and ask you to approve the new lock.`);
+    } catch { showToast('could not queue re-bake', 'err'); }
   }
 
   // Per-app declared-input values, set via the input node's double-click dialog.
@@ -932,25 +986,54 @@
     const app = currentId && apps.get(currentId);
     if (!app || !Array.isArray(app.inputs) || !app.inputs.length) return;
     const cur = currentInputs();
-    const fields = app.inputs.map((inp) => ({
-      name: inp.name,
-      label: inp.name + (inp.description ? ` — ${inp.description}` : ''),
-      type: inp.type === 'integer' || inp.type === 'number' ? 'number' : 'text',
-      value: cur[inp.name] != null ? cur[inp.name] : inp.default != null ? inp.default : '',
-    }));
+    const isVisual = (inp) => inp.widget === 'file' || inp.type === 'image' || inp.type === 'file';
+    const visualNames = new Set(app.inputs.filter(isVisual).map((i) => i.name));
+    const fields = app.inputs.map((inp) => isVisual(inp)
+      ? {
+          name: inp.name,
+          label: inp.name + (inp.description ? ` — ${inp.description}` : ''),
+          type: 'file',
+          accept: inp.accept,
+          value: cur[inp.name] != null ? cur[inp.name] : '',
+        }
+      : {
+          name: inp.name,
+          label: inp.name + (inp.description ? ` — ${inp.description}` : ''),
+          type: inp.type === 'integer' || inp.type === 'number' ? 'number' : 'text',
+          value: cur[inp.name] != null ? cur[inp.name] : inp.default != null ? inp.default : '',
+        });
     const res = await formModal({ title: `Inputs · ${app.displayName}`, sub: 'Set the values this run uses, then ▶ Run workflow.', fields, okLabel: 'Set inputs' });
     if (!res) return;
     const store = {};
-    app.inputs.forEach((inp) => {
+    for (const inp of app.inputs) {
+      if (isVisual(inp)) {
+        const v = res[inp.name];
+        if (typeof v === 'string' && v.startsWith('data:')) {
+          // Fresh pick/paste → persist it to the store; the input VALUE is the path.
+          try {
+            const r = await fetch('/api/visual-input', {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify({ appId: app.id, name: inp.name, dataUrl: v }),
+            });
+            const up = await r.json().catch(() => ({ ok: false, error: `upload failed (${r.status})` }));
+            if (!up || !up.ok) { showToast((up && up.error) || 'could not store the file', 'err'); return; }
+            store[inp.name] = up.path;
+          } catch { showToast('could not upload the file', 'err'); return; }
+        } else if (typeof v === 'string' && v) {
+          store[inp.name] = v; // unchanged existing path
+        } // cleared/empty → omit (no value)
+        continue;
+      }
       let v = String(res[inp.name] ?? '').trim();
-      if (v === '') { if (inp.default != null) v = String(inp.default); else return; }
-      if (inp.type === 'integer' || inp.type === 'number') { const num = Number(v); if (!Number.isNaN(num)) { store[inp.name] = num; return; } }
+      if (v === '') { if (inp.default != null) v = String(inp.default); else continue; }
+      if (inp.type === 'integer' || inp.type === 'number') { const num = Number(v); if (!Number.isNaN(num)) { store[inp.name] = num; continue; } }
       store[inp.name] = v;
-    });
+    }
     appInputValues.set(currentId, store);
     markSpecialNodes();
     refreshDirtyIndicator(); // values changed → reflect unsaved state in the header/menu
-    const badge = Object.entries(store).map(([k, v]) => `${k}=${v}`).join(' · ');
+    const badge = Object.entries(store).map(([k, v]) => `${k}=${visualNames.has(k) ? String(v).split(/[\\/]/).pop() : v}`).join(' · ');
     appendNarration(`Inputs set — <strong>${escapeHtml(badge)}</strong>. Run with <strong>▶ Run workflow</strong>.`);
     showToast('Inputs set: ' + badge, 'ok');
   }
@@ -1257,7 +1340,7 @@
       $save.onclick = () => done('save');
       $dont.onclick = () => done('discard');
       $cancel.onclick = () => done('cancel');
-      $confirmModal.onclick = (e) => { if (e.target === $confirmModal) done('cancel'); };
+      onBackdropDismiss($confirmModal, () => done('cancel'));
       document.addEventListener('keydown', onKey, true);
     });
   }
@@ -1286,6 +1369,16 @@
             <div class="fm-drop" role="button" tabindex="0" aria-label="Paste a screenshot or click to attach">Paste a screenshot (Ctrl+V) or click to add<input type="file" accept="image/*" multiple class="fm-file-input" tabindex="-1" aria-hidden="true"></div>
             <div class="fm-thumbs" hidden></div>
           </div>`;
+        } else if (f.type === 'file') {
+          // Single image/PDF Visual Input. Reuses the .fm-drop visual language; the
+          // hidden file input is a SIBLING of the drop (not a child) so render() can
+          // freely rewrite the drop's innerHTML between empty/has-file without losing it.
+          const accepts = (f.accept && f.accept.length) ? f.accept : ['png', 'jpg', 'webp', 'pdf'];
+          const acceptAttr = accepts.map((e) => '.' + String(e).replace(/^\./, '')).join(',');
+          ctl = `<div class="fm-file" data-fm-file-box="${escapeAttr(f.name)}" data-accept-hint="${escapeAttr(accepts.join(', ').toUpperCase())}" data-init-value="${escapeAttr(val)}">
+            <div class="fm-drop" role="button" tabindex="0" aria-label="Attach an image or PDF"></div>
+            <input type="file" accept="${escapeAttr(acceptAttr)}" class="fm-file-input" tabindex="-1" aria-hidden="true">
+          </div>`;
         } else {
           ctl = f.multiline
             ? `<textarea id="${id}" rows="4" data-fm="${escapeHtml(f.name)}" placeholder="${ph}">${escapeHtml(val)}</textarea>`
@@ -1333,32 +1426,81 @@
           fileInput.value = '';
         };
       });
-      // ── paste support: paste an image into the modal → first images field ──────
+      // ── file-field setup (single image/PDF Visual Input) ───────────────────────
+      // st.mode: 'empty' | 'path' (a previously-set on-disk path, passed through
+      // unchanged) | 'dataurl' (a fresh pick/paste the caller uploads to the store).
+      const fileStates = new Map();
+      const fmBaseName = (p) => String(p || '').split(/[\\/]/).pop() || '';
+      const fmExtOf = (p) => { const m = /\.([a-z0-9]+)$/i.exec(String(p || '')); return m ? m[1].toLowerCase() : ''; };
+      $body.querySelectorAll('.fm-file').forEach((box) => {
+        const name = box.dataset.fmFileBox;
+        const hint = box.dataset.acceptHint || 'PNG, JPG, PDF';
+        const drop = box.querySelector('.fm-drop');
+        const fileInput = box.querySelector('.fm-file-input');
+        const init = box.dataset.initValue || '';
+        const st = init
+          ? { mode: 'path', value: init, name: fmBaseName(init), ext: fmExtOf(init) }
+          : { mode: 'empty', value: '', name: '', ext: '' };
+        const render = () => {
+          const has = st.mode !== 'empty';
+          drop.classList.toggle('has-file', has);
+          if (!has) {
+            drop.innerHTML = `Paste (Ctrl+V) or click to attach<span class="fm-drop-hint">${escapeHtml(hint)}</span>`;
+            return;
+          }
+          const glyph = st.ext === 'pdf' ? 'pdf' : 'img';
+          drop.innerHTML = `<span class="fm-file-glyph">${glyph}</span><span class="fm-file-name" title="${escapeAttr(st.value)}">${escapeHtml(st.name)}</span><span class="fm-file-actions"><button type="button" class="fm-file-replace">Replace</button><button type="button" class="fm-file-clear">Clear</button></span>`;
+          drop.querySelector('.fm-file-replace').onclick = (e) => { e.stopPropagation(); fileInput.click(); };
+          drop.querySelector('.fm-file-clear').onclick = (e) => { e.stopPropagation(); st.mode = 'empty'; st.value = ''; st.name = ''; st.ext = ''; render(); };
+        };
+        const setFile = (file) => {
+          if (!file) return;
+          const ext = fmExtOf(file.name) || (file.type === 'application/pdf' ? 'pdf' : '');
+          const reader = new FileReader();
+          reader.onload = () => { st.mode = 'dataurl'; st.value = reader.result; st.name = file.name || ('pasted.' + (ext || 'png')); st.ext = ext; render(); };
+          reader.onerror = () => showToast('could not read the file', 'err');
+          reader.readAsDataURL(file);
+        };
+        drop.onclick = () => { if (st.mode === 'empty') fileInput.click(); };
+        drop.onkeydown = (e) => { if ((e.key === 'Enter' || e.key === ' ') && st.mode === 'empty') { e.preventDefault(); fileInput.click(); } };
+        fileInput.onchange = () => { const f0 = (fileInput.files || [])[0]; if (f0) setFile(f0); fileInput.value = ''; };
+        fileStates.set(name, { st, setFile });
+        render();
+      });
+      // ── paste support: an image into the modal → the images field, else the file field ──
       $body.onpaste = (e) => {
-        const box = $body.querySelector('.fm-images');
-        if (!box) return;
         const items = Array.from((e.clipboardData && e.clipboardData.items) || []);
         const imgs = items.filter((it) => it.kind === 'file' && it.type.startsWith('image/'));
-        if (!imgs.length) return;
+        const box = $body.querySelector('.fm-images');
+        if (box) {
+          if (!imgs.length) return;
+          e.preventDefault();
+          const entry = imageStates.get(box.dataset.fmImages);
+          if (!entry) return;
+          const { state, renderThumbs } = entry;
+          const room = Math.max(0, 8 - state.length);
+          if (imgs.length > room) showToast('Max 8 snapshots', 'warn');
+          imgs.slice(0, room).forEach((it) => {
+            const file = it.getAsFile();
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = () => { state.push({ name: file.name || 'pasted.png', dataUrl: reader.result }); renderThumbs(); };
+            reader.readAsDataURL(file);
+          });
+          return;
+        }
+        const fileBox = $body.querySelector('.fm-file');
+        if (!fileBox || !imgs.length) return;
         e.preventDefault();
-        const name = box.dataset.fmImages;
-        const entry = imageStates.get(name);
-        if (!entry) return;
-        const { state, renderThumbs } = entry;
-        const room = Math.max(0, 8 - state.length);
-        if (imgs.length > room) showToast('Max 8 snapshots', 'warn');
-        imgs.slice(0, room).forEach((it) => {
-          const file = it.getAsFile();
-          if (!file) return;
-          const reader = new FileReader();
-          reader.onload = () => { state.push({ name: file.name || 'pasted.png', dataUrl: reader.result }); renderThumbs(); };
-          reader.readAsDataURL(file);
-        });
+        const entry = fileStates.get(fileBox.dataset.fmFileBox);
+        const file = imgs[0].getAsFile();
+        if (entry && file) entry.setFile(file);
       };
       const collect = () => {
         const out = {};
         $body.querySelectorAll('[data-fm]').forEach((el) => { out[el.dataset.fm] = el.value; });
         imageStates.forEach((entry, name) => { out[name] = entry.state; });
+        fileStates.forEach((entry, name) => { out[name] = entry.st.mode === 'empty' ? '' : entry.st.value; });
         return out;
       };
       const done = (result) => {
@@ -1368,7 +1510,7 @@
       };
       $ok.onclick = () => done(collect());
       $cancel.onclick = () => done(null);
-      $formModal.onclick = (e) => { if (e.target === $formModal) done(null); };
+      onBackdropDismiss($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); }
@@ -1393,7 +1535,7 @@
   // BEHIND the report modal's backdrop, so a session shown in the Viewer needs its
   // own reachable Stop. Visibility is driven by syncRunControls (foregroundTrigger).
   if ($reportStop) $reportStop.onclick = () => stopRun();
-  $reportModal.addEventListener('click', (e) => { if (e.target === $reportModal) hideModal($reportModal); });
+  onBackdropDismiss($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(); });
@@ -1532,7 +1674,7 @@
 
   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); };
+  onBackdropDismiss($bakeModal, () => hideModal($bakeModal), () => !document.getElementById('bake-confirm').disabled);
 
   // ── Graft into agent ────────────────────────────────────────────────────────
   // Build an agent from a foreign tool (DLL / C# source / NuGet / OpenAPI / …).
@@ -1755,7 +1897,7 @@
   $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); };
+  onBackdropDismiss($graftModal, () => hideModal($graftModal), () => !$graftCancel.disabled);
 
   // Secondary entry: "⊕ Graft new agent" inside the Agents Library modal.
   const $libGraft = document.getElementById('lib-graft');
@@ -1768,9 +1910,59 @@
   handleMenuAction = function (action) {
     if (action === 'graft') { openGraftModal(); return; }
     if (action === 'bake') { openBakeModal(); return; }
+    if (action === 'import') { triggerImport(); return; }
     _handleMenuAction(action);
   };
 
+  // ── Import a shared workflow (#66) ────────────────────────────────────────────
+  // A teammate's .flo, via the ≡ menu's "Import workflow…" OR dropped onto the canvas.
+  // The server derives the id from the file's `app:` field, installs it, and we select
+  // it so the user can Compile (we never auto-compile — Run stays a deliberate act).
+  const $importFile = document.getElementById('import-file');
+  function triggerImport() { if ($importFile) $importFile.click(); }
+
+  async function importFlo(file) {
+    if (!file) return;
+    let content;
+    try { content = await file.text(); } catch { showToast('Could not read that file', 'err'); return; }
+    try {
+      const { id } = await api('/api/import', { method: 'POST', body: JSON.stringify({ filename: file.name, content }) });
+      await loadApps();
+      $promptSel.value = id;
+      $promptSel.dispatchEvent(new Event('change', { bubbles: true })); // → loadApp(id), arms Compile
+      showToast(`Imported "${id}" — Compile to run`, 'ok');
+    } catch (e) {
+      const body = e && e.body;
+      const msg = (body && body.error) || (e && e.message) || 'Import failed';
+      showToast(msg, body && body.code === 'exists' ? 'warn' : 'err');
+    }
+  }
+
+  if ($importFile) {
+    $importFile.onchange = () => {
+      const f = $importFile.files && $importFile.files[0];
+      $importFile.value = ''; // reset so re-picking the same filename still fires change
+      importFlo(f);
+    };
+  }
+
+  // OS-file drop on the canvas. Distinguished from in-app node-card HTML5 drags (which
+  // carry no "Files" type) so dragging a card still drops onto the Templates bar (#71).
+  const $canvasMain = document.getElementById('canvas-main');
+  const $dropTarget = document.getElementById('canvas-drop-target');
+  const isFileDrag = (e) => !!e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files');
+  if ($canvasMain && $dropTarget) {
+    $canvasMain.addEventListener('dragenter', (e) => { if (isFileDrag(e)) { e.preventDefault(); $dropTarget.classList.add('active'); } });
+    $canvasMain.addEventListener('dragover', (e) => { if (isFileDrag(e)) e.preventDefault(); }); // required to allow the drop
+    $canvasMain.addEventListener('dragleave', (e) => { if (!$canvasMain.contains(e.relatedTarget)) $dropTarget.classList.remove('active'); });
+    $canvasMain.addEventListener('drop', (e) => {
+      if (!isFileDrag(e)) return; // let node-card drops fall through to the Templates bar
+      e.preventDefault();
+      $dropTarget.classList.remove('active');
+      importFlo(e.dataTransfer.files && e.dataTransfer.files[0]);
+    });
+  }
+
   // ── Release notes: shared state + popover ─────────────────────────────────────
   // The channel-correct public site base (e.g. https://floless.io), captured from
   // /api/health in the health poll. The changelog deep-link is omitted entirely when
@@ -2843,6 +3035,9 @@
         state.hasRun = true;
       } else if (m.type === 'templates-changed') {
         loadTemplates().catch(() => {});
+      } else if (m.type === 'apps-changed') {
+        // A workflow was imported (here or in another tab) → refresh the picker (#66).
+        loadApps().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(() => {});
@@ -2958,8 +3153,9 @@
 
   openAddFavModal = function openAddFavModalTpl(nodeId) {
     state.pendingFavAgentId = nodeId;
+    state.editingTemplateId = null; // CREATE mode
     const a = AGENTS[nodeId];
-    $addFavSub.textContent = `Save "${nodeId}" as a reusable template — usable in any project.`;
+    setFavModalChrome('Save as Template', `Save "${nodeId}" as a reusable template — usable in any project.`, '★ Save');
     $favName.value = a ? a.title : nodeId;
     $favCat.value = '';
     renderCategorySuggestions();
@@ -2967,7 +3163,47 @@
     setTimeout(() => $favCat.focus(), 50);
   };
 
+  // Swap the shared Add-Template modal's title / subtitle / save-button label so the
+  // same modal serves both CREATE (from a node) and EDIT (rename/recategorize) (#68).
+  function setFavModalChrome(title, sub, saveLabel) {
+    const $t = document.getElementById('add-fav-title');
+    const $s = document.getElementById('fav-save');
+    if ($t) $t.textContent = title;
+    $addFavSub.textContent = sub;
+    if ($s) $s.textContent = saveLabel;
+  }
+
+  // Open the modal in EDIT mode for an existing template. Only name + category are
+  // editable; the captured node is immutable (re-star a node to change its logic) (#68).
+  function openEditTemplate(id) {
+    const tpl = state.favorites.find((t) => t.id === id);
+    if (!tpl) return;
+    state.editingTemplateId = id;
+    state.pendingFavAgentId = null;
+    setFavModalChrome('Edit Template', 'Rename or recategorize this template.', 'Save changes');
+    $favName.value = tpl.name;
+    $favCat.value = tpl.category;
+    renderCategorySuggestions();
+    $addFavModal.classList.add('show');
+    setTimeout(() => { $favName.focus(); $favName.select(); }, 50);
+  }
+
   commitFav = async function commitFavTpl() {
+    // EDIT mode (#68): PATCH the existing template's name/category; node is untouched.
+    if (state.editingTemplateId) {
+      const id = state.editingTemplateId;
+      const name = ($favName.value || '').trim();
+      const category = ($favCat.value || '').trim() || 'Uncategorized';
+      if (!name) { showToast('Name required', 'warn'); return; }
+      try {
+        await api(`/api/templates/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify({ name, category }) });
+        $addFavModal.classList.remove('show');
+        state.editingTemplateId = null;
+        await loadTemplates();
+        showToast(`Updated template "${name}"`, 'ok');
+      } catch (e) { reportErr(e); }
+      return;
+    }
     const nodeId = state.pendingFavAgentId;
     if (!nodeId) return;
     const name = ($favName.value || '').trim() || nodeId;
@@ -3002,14 +3238,16 @@
     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 : ''))}">
+      <div class="fav-chip" data-tpl="${escapeAttr(t.id)}" data-tip="Click to use · ✎ rename · ${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>
+        <span class="edit" data-tip="Rename / recategorize" aria-label="Edit template">✎</span>
+        <span class="del" data-tip="Delete template" aria-label="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.onclick = (e) => { if (e.target.closest('.del') || e.target.closest('.edit')) return; useTemplate(id); };
+      chip.querySelector('.edit').onclick = (e) => { e.stopPropagation(); openEditTemplate(id); };
       chip.querySelector('.del').onclick = (e) => { e.stopPropagation(); deleteTemplate(id); };
     });
   };
@@ -3036,9 +3274,42 @@
       const scope = req.panelId ? ` (panel "${req.panelId}")` : '';
       return `Customize my floless.app dashboard${scope}: ${req.instruction}. Edit ~/.floless/ui/extensions.json per the floless-app-ui skill, then check it with \`aware agent invoke ui validate\`.`;
     }
+    if (req.type === 'rebake') {
+      const where = req.inputName ? ` (input "${req.inputName}")` : '';
+      const snaps = req.snapshots && req.snapshots.length
+        ? `\nNew drawing${req.snapshots.length > 1 ? 's' : ''} (read for the re-extraction): ${req.snapshots.join(', ')}`
+        : '';
+      return `In floless app "${req.appId}", re-read & re-bake${where} per the floless-app-rebake skill: ${req.instruction}${snaps}`;
+    }
     return '';
   }
 
+  // Which product skill applies each request type (named in the copied marker so the
+  // terminal AI picks up the right one).
+  const REQUEST_SKILL = {
+    'use-template': 'floless-app-workflows',
+    tweak: 'floless-app-workflows',
+    'ui-customize': 'floless-app-ui',
+    rebake: 'floless-app-rebake',
+  };
+
+  // The COPIED form of a request: instructionFor() prefixed with a self-identifying
+  // marker so a PASTED request is unmistakable to the terminal AI — it's a queued FloLess
+  // Dashboard request to APPLY (via the named skill + the authoritative /api/requests),
+  // not a literal instruction to run verbatim (#73). The modal preview keeps the plain
+  // instructionFor() text; only the clipboard carries the marker.
+  function markedInstruction(req) {
+    const body = instructionFor(req);
+    if (!body) return '';
+    const skill = REQUEST_SKILL[req.type] || 'floless-app-workflows';
+    const base = (typeof location !== 'undefined' && location.origin) ? location.origin : 'http://127.0.0.1:4317';
+    const marker =
+      `[floless-request type=${req.type} id=${req.id}] — queued from the FloLess Dashboard. ` +
+      `Apply it with your ${skill} skill: fetch the authoritative spec from GET ${base}/api/requests, ` +
+      `apply that request, then DELETE ${base}/api/requests/${req.id}. Don't run the line below verbatim.`;
+    return `${marker}\n${body}`;
+  }
+
   async function copyToClipboard(text) {
     try { await navigator.clipboard.writeText(text); return true; } catch { return false; }
   }
@@ -3047,7 +3318,7 @@
     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 line = markedInstruction(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');
@@ -3072,7 +3343,7 @@
     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));
+      const copied = await copyToClipboard(markedInstruction(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' : ''}`
@@ -3114,9 +3385,13 @@
       return;
     }
     $list.innerHTML = pendingRequests.map((r) => {
-      const label = r.type === 'use-template' ? 'template' : r.type === 'ui-customize' ? 'dashboard' : 'tweak';
-      const badgeCls = r.type === 'tweak' || r.type === 'ui-customize' ? 'req-type req-type-tweak' : 'req-type';
-      const target = r.type === 'tweak' && r.nodeId ? ` · node <code>${escapeHtml(r.nodeId)}</code>` : '';
+      const label = r.type === 'use-template' ? 'template' : r.type === 'ui-customize' ? 'dashboard' : r.type === 'rebake' ? 're-bake' : 'tweak';
+      const badgeCls = r.type === 'tweak' || r.type === 'ui-customize' || r.type === 'rebake' ? 'req-type req-type-tweak' : 'req-type';
+      const target = r.type === 'tweak' && r.nodeId
+        ? ` · node <code>${escapeHtml(r.nodeId)}</code>`
+        : r.type === 'rebake' && r.inputName
+          ? ` · input <code>${escapeHtml(r.inputName)}</code>`
+          : '';
       const when = r.createdAt ? new Date(r.createdAt) : null;
       const time = when && !isNaN(when) ? `<span class="req-time">${escapeHtml(nowStamp(when))}</span>` : '';
       return `
@@ -3136,7 +3411,7 @@
       b.onclick = async () => {
         const r = pendingRequests.find((x) => x.id === b.dataset.id);
         if (!r) return;
-        const copied = await copyToClipboard(instructionFor(r));
+        const copied = await copyToClipboard(markedInstruction(r));
         showToast(copied ? 'Copied — paste it to your terminal AI' : 'copy failed', copied ? 'ok' : 'err');
       };
     });
@@ -3822,7 +4097,7 @@
       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); };
+      onBackdropDismiss($m, () => done(false));
       document.addEventListener('keydown', onKey, true);
     });
   }
@@ -4014,11 +4289,11 @@
   // 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); };
+  onBackdropDismiss($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); };
+  onBackdropDismiss($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); };
@@ -4206,7 +4481,7 @@
   $riDesc.addEventListener('input', riSyncSend);
   $riSend.onclick = () => riSubmit();
   $riCancel.onclick = () => riClose();
-  $riModal.onclick = (e) => { if (e.target === $riModal) riClose(); };
+  onBackdropDismiss($riModal, () => riClose());
   $riModal.querySelectorAll('#ri-category .rtn-mode-btn').forEach((b) => { b.onclick = () => riSetCategory(b.dataset.cat); });
   document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && $riModal.classList.contains('show')) riClose(); });
 
@@ -4249,13 +4524,13 @@
   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'); };
+  if ($reqModal) onBackdropDismiss($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 text = pendingRequests.map(markedInstruction).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');
   };
@@ -4408,6 +4683,7 @@
     loadRequests,
     copyToClipboard,
     instructionFor,
+    markedInstruction, // marked (paste-safe) form for clipboard copies — panels.js uses it (#73)
   };
 
   // ── boot ──────────────────────────────────────────────────────────────────────