@floless/app 0.18.1 → 0.20.0

package/dist/web/app.css

@@ -1096,6 +1096,11 @@
   /* A disabled action reads as inert — never a primary that looks clickable but isn't. */
   .modal-actions button:disabled { opacity: 0.5; cursor: default; }
   .modal-actions button.primary:disabled:hover { background: var(--accent); box-shadow: none; }
+  /* Destructive confirm (#85): the commit button is neutral at rest and turns
+     error-red only on hover, so an accidental Enter (focus sits on the accent Cancel)
+     never deletes — matching the app's other destructive affordances. */
+  .modal-actions button.danger { border-color: var(--border-strong); color: var(--text); font-weight: 600; }
+  .modal-actions button.danger:hover { color: var(--err); border-color: var(--err); background: rgba(248, 113, 113, 0.1); box-shadow: none; }
   .modal.library {
     width: 720px;
     max-height: 82vh;
@@ -1585,6 +1590,20 @@
   .wf-option.selected .wf-option-name { color: var(--accent); }
   .wf-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .wf-option-meta { font-family: var(--mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
+  /* Per-row lifecycle actions (#85) — hover/keyboard-revealed, mirroring the #68
+     template chip's ✎/× treatment one level up (act on an installed workflow). */
+  .wf-option-actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
+  .wf-act {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 20px; height: 20px; padding: 0; border: 1px solid transparent; border-radius: 3px;
+    background: transparent; color: var(--text-dim); font: inherit; font-size: 12px; line-height: 1;
+    cursor: pointer; opacity: 0; transition: opacity .12s ease, color .12s, background .12s, border-color .12s;
+  }
+  .wf-option:hover .wf-act, .wf-option.highlighted .wf-act { opacity: 0.45; }
+  .wf-act:hover { opacity: 1; }
+  .wf-act.act-edit:hover { color: var(--accent); background: var(--accent-soft); }
+  .wf-act.act-dup:hover  { color: var(--text); border-color: var(--border-strong); }
+  .wf-act.act-del:hover  { color: var(--err); background: rgba(248, 113, 113, 0.1); border-color: var(--err); }
   .wf-empty-search { color: var(--text-dim); font-style: italic; font-size: 12px; padding: 16px 10px; text-align: center; }
   .wf-empty-search[hidden] { display: none; }
 
@@ -2190,7 +2209,9 @@ body {
 .report-actions button.report-stop:hover { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: var(--warn); color: var(--text); }
 #report-close { font-size: 18px; line-height: 1; padding: 4px 10px; }
 .report-stage { position: relative; flex: 1; background: #0f172a; }
-#report-frame { width: 100%; height: 100%; border: 0; display: block; background: #0f172a; }
+/* Only the SHOWN frame fills the stage — `:not([hidden])` so `display:block` never defeats the
+   `hidden` attribute on the inactive frame (else it keeps its height and pushes the other off-screen). */
+#report-frame:not([hidden]), #report-frame-3d:not([hidden]) { width: 100%; height: 100%; border: 0; display: block; background: #0f172a; }
 
 /* Live "On trigger" report: a pulsing pip in the viewer subtitle + a brief edge
    flash on the stage when a trigger routine (e.g. tekla-selection-report) pushes a

package/dist/web/aware.js

@@ -18,6 +18,7 @@
   const $notesStrip = document.getElementById('notes-strip');
   const $reportModal = document.getElementById('report-modal');
   const $reportFrame = document.getElementById('report-frame');
+  const $reportFrame3d = document.getElementById('report-frame-3d');
   const $reportOverlay = document.getElementById('report-overlay');
   const $reportTitle = document.getElementById('report-title');
   const $reportSub = document.getElementById('report-sub');
@@ -578,8 +579,17 @@
       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>`;
+        // A div (not a button) carries role="option" so the action icons can be real
+        // <button>s without nesting interactive elements (#85). Selection stays driven by
+        // the delegated $wfList click + comboMove highlight (aria-activedescendant).
+        const aid = escapeAttr(a.id);
+        html += `<div class="wf-option" role="option" id="wf-opt-${aid}" data-id="${aid}" data-search="${escapeAttr((a.id + ' ' + p).toLowerCase())}" tabindex="-1" aria-selected="false">`
+          + `<span class="wf-option-name">${escapeHtml(a.id)}</span><span class="wf-option-meta">${meta}</span>`
+          + `<span class="wf-option-actions">`
+          + `<button type="button" class="wf-act act-edit" data-wf-act="rename" data-id="${aid}" tabindex="-1" data-tip="Rename" aria-label="Rename ${aid}">✎</button>`
+          + `<button type="button" class="wf-act act-dup" data-wf-act="duplicate" data-id="${aid}" tabindex="-1" data-tip="Duplicate" aria-label="Duplicate ${aid}">⧉</button>`
+          + `<button type="button" class="wf-act act-del" data-wf-act="delete" data-id="${aid}" tabindex="-1" data-tip="Delete" aria-label="Delete ${aid}">×</button>`
+          + `</span></div>`;
       }
       html += '</div>';
     }
@@ -695,6 +705,15 @@
   }
   if ($wfList) {
     $wfList.addEventListener('click', (e) => {
+      // A row action (#85) takes precedence over selecting the workflow.
+      const act = e.target.closest('[data-wf-act]');
+      if (act) {
+        const id = act.dataset.id;
+        if (act.dataset.wfAct === 'rename') openRenameWorkflow(id);
+        else if (act.dataset.wfAct === 'duplicate') openDuplicateWorkflow(id);
+        else if (act.dataset.wfAct === 'delete') confirmDeleteWorkflow(id);
+        return;
+      }
       const o = e.target.closest('.wf-option');
       if (o) selectComboById(o.dataset.id);
     });
@@ -703,6 +722,112 @@
     if ($wfPopover && !$wfPopover.hidden && $wfCombo && !$wfCombo.contains(e.target)) closeCombo(false);
   });
 
+  // ── Workflow lifecycle actions: rename / duplicate / delete (#85) ─────────────
+  // The server owns the fs work + `aware app compile`/`uninstall` + the app-id cascade
+  // (visual inputs, bound routines). Here we drive the modal, migrate the CLIENT-side
+  // saved input VALUES (localStorage, keyed by app id), set LS_LAST_APP so the
+  // apps-changed SSE → loadApps() reopens the right workflow, and toast the outcome.
+  function migrateInputsLS(fromId, toId) {
+    try {
+      const v = localStorage.getItem(lsInputsKey(fromId));
+      if (v != null) localStorage.setItem(lsInputsKey(toId), v);
+    } catch { /* private mode / quota */ }
+  }
+  function dropClientAppState(id) {
+    try { localStorage.removeItem(lsInputsKey(id)); } catch { /* ignore */ }
+    appInputValues.delete(id); dirtyBaseline.delete(id); apps.delete(id);
+  }
+
+  async function openRenameWorkflow(oldId) {
+    closeCombo(false);
+    const res = await formModal({
+      title: 'Rename workflow',
+      sub: 'This is the name you pick here, and what .flo files and your terminal AI use to refer to it.',
+      fields: [{ name: 'name', label: 'New name', type: 'text', value: oldId, placeholder: 'e.g. tekla-bom-by-phase' }],
+      okLabel: 'Rename',
+    });
+    if (!res) return;
+    const newId = String(res.name || '').trim();
+    if (!newId || newId === oldId) return;
+    showToast('Renaming…', 'ok');
+    try {
+      const r = await api(`/api/app/${encodeURIComponent(oldId)}/rename`, { method: 'PATCH', body: JSON.stringify({ name: newId }) });
+      // Carry saved input VALUES + any unsaved in-memory edits/dirty baseline to the new id
+      // so a rename never silently drops the user's inputs (#85 review). loadApp() only seeds
+      // inputs when the id is absent, so pre-setting them here preserves unsaved edits.
+      migrateInputsLS(oldId, r.id);
+      if (appInputValues.has(oldId)) appInputValues.set(r.id, appInputValues.get(oldId));
+      if (dirtyBaseline.has(oldId)) dirtyBaseline.set(r.id, dirtyBaseline.get(oldId));
+      const wasOpen = currentId === oldId;
+      dropClientAppState(oldId);
+      if (wasOpen) { try { localStorage.setItem(LS_LAST_APP, r.id); } catch { /* ignore */ } }
+      await loadApps();
+      showToast(r.compiled ? `Renamed to “${r.id}”` : `Renamed to “${r.id}” — needs Compile`, r.compiled ? 'ok' : 'warn');
+    } catch (e) {
+      console.error(e); // an unexpected client throw (not a clean server message) stays debuggable
+      showToast(e.message || 'Rename failed', 'warn');
+    }
+  }
+
+  async function openDuplicateWorkflow(srcId) {
+    closeCombo(false);
+    const res = await formModal({
+      title: 'Duplicate workflow',
+      sub: 'Makes an independent copy you can edit and run separately — compiled and ready.',
+      fields: [{ name: 'name', label: 'New name', type: 'text', value: `${srcId}-copy`, placeholder: 'e.g. tekla-bom-by-phase-copy' }],
+      okLabel: 'Duplicate',
+    });
+    if (!res) return;
+    const newId = String(res.name || '').trim();
+    if (!newId) return;
+    showToast('Duplicating…', 'ok');
+    try {
+      const r = await api(`/api/app/${encodeURIComponent(srcId)}/duplicate`, { method: 'POST', body: JSON.stringify({ name: newId }) });
+      migrateInputsLS(srcId, r.id); // the copy starts with the source's saved inputs
+      try { localStorage.setItem(LS_LAST_APP, r.id); } catch { /* ignore */ } // open the copy
+      await loadApps();
+      showToast(r.compiled ? `Duplicated as “${r.id}”` : `Duplicated as “${r.id}” — needs Compile`, r.compiled ? 'ok' : 'warn');
+    } catch (e) {
+      console.error(e);
+      showToast(e.message || 'Duplicate failed', 'warn');
+    }
+  }
+
+  async function confirmDeleteWorkflow(id) {
+    // Warn honestly if a routine (schedule OR trigger) is bound — the server cascade removes it.
+    let routineNote = '';
+    try {
+      const { routines } = await api('/api/routines');
+      const bound = (routines || []).filter((r) => r.workflow === id).length;
+      if (bound) routineNote = ` Its ${bound} bound routine${bound === 1 ? '' : 's'} will also be removed.`;
+    } catch {
+      // Couldn't read routines — never UNDER-warn before an irreversible delete: state the
+      // worst case so the user knows bound routines (if any) go too (the cascade still removes them).
+      routineNote = ' Any routines bound to it will also be removed.';
+    }
+    closeCombo(false);
+    const ok = await formModal({
+      title: 'Delete workflow?',
+      sub: `Permanently delete “${id}” — its source, lock and saved inputs.${routineNote} This can’t be undone.`,
+      fields: [],
+      okLabel: 'Delete',
+      danger: true,
+    });
+    if (!ok) return;
+    showToast('Deleting…', 'ok');
+    try {
+      await api(`/api/app/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      const wasOpen = currentId === id;
+      dropClientAppState(id);
+      if (wasOpen) { currentId = null; try { localStorage.removeItem(LS_LAST_APP); } catch { /* ignore */ } }
+      await loadApps();
+      showToast(`Deleted “${id}”`, 'ok');
+    } catch (e) {
+      console.error(e);
+      showToast(e.message || 'Delete failed', 'err'); // a failed destructive delete reads as an error
+    }
+  }
+
   // ── app inputs + HTML Viewer ────────────────────────────────────────────────
 
   // The id of the report-viewer node — the terminal node a user double-clicks to
@@ -714,10 +839,10 @@
   function reportNodeId() {
     const app = currentId && apps.get(currentId);
     if (!app || !app.nodes.length) return null;
-    // An html-report agent node renders report HTML — its `render` command returns
-    // an `html` field, which is exactly what extractReportHtml keys on. So it's a
-    // report producer regardless of exec code; prefer it directly as the viewer node.
-    const htmlReportNode = app.nodes.find((n) => n.agent === 'html-report');
+    // An html-report (static) or viewer-3d (interactive 3D) agent node renders HTML — its
+    // `render` command returns an `html` field, exactly what extractReportHtml keys on. So
+    // it's a report producer regardless of exec code; prefer it directly as the viewer node.
+    const htmlReportNode = app.nodes.find((n) => n.agent === 'html-report' || n.agent === 'viewer-3d');
     if (htmlReportNode) return htmlReportNode.id;
     // Otherwise, qualify the app only if some node actually PRODUCES report HTML — its exec
     // code returns an `html` field (the `data.result.html` extractReportHtml keys
@@ -829,7 +954,11 @@
       // 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 (isReport) {
+        const rNode = app && app.nodes.find((n) => n.id === rid);
+        const viewLabel = rNode && rNode.agent === 'viewer-3d' ? 'View 3D ▸' : 'View report ▸';
+        addNodeAction(card, viewLabel, () => showReport(id));
+      }
       if (isInput) addNodeAction(card, 'Set inputs ▸', () => openInputsDialog());
       if (isRebake) addNodeAction(card, 'Re-read & re-bake ▸', () => openRebakeDialog());
     });
@@ -1121,7 +1250,37 @@
 
   // Share is visible exactly when the frame holds a report (the empty state HIDES it —
   // never a disabled affordance with no path forward).
-  function paintReport(html) { $reportFrame.srcdoc = html; $reportOverlay.hidden = true; $reportOverlay.replaceChildren(); $reportShare.hidden = false; }
+  // The last HTML painted (static or 3D) — so ↗ Open works for both surfaces.
+  let lastPaintedHtml = '';
+  // Paint a report into the viewer. A STATIC report uses the scriptless srcdoc frame; an
+  // INTERACTIVE 3D doc (viewer-3d) uses the script-enabled frame via a data: URL (opaque
+  // origin, cannot touch the app page) and keeps a "Loading 3D view…" overlay until the doc
+  // posts `viewer-ready`. Exactly one frame is shown at a time.
+  function paintReport(html, interactive) {
+    lastPaintedHtml = html || '';
+    if (interactive) {
+      $reportFrame.hidden = true; $reportFrame.srcdoc = '';
+      $reportFrame3d.hidden = false;
+      $reportFrame3d.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
+      $reportShare.hidden = true; // a script doc can't be statically hosted — hide, don't disable
+      $reportOverlay.hidden = false; $reportOverlay.replaceChildren();
+      $reportOverlay.append(mkEl('div', 'spinner'), mkEl('div', null, 'Loading 3D view…'));
+    } else {
+      $reportFrame3d.hidden = true; $reportFrame3d.removeAttribute('src');
+      $reportFrame.hidden = false; $reportFrame.srcdoc = html;
+      $reportOverlay.hidden = true; $reportOverlay.replaceChildren();
+      $reportShare.hidden = false;
+    }
+  }
+
+  // Reset the viewer to "no report shown": clear BOTH frames + the Open buffer, so a stale
+  // interactive 3D doc can't linger (its WebGL loop running) behind an overlay, and ↗ Open
+  // can't reopen a previous app's report. Used by every empty / transition state.
+  function clearReportFrames() {
+    $reportFrame.srcdoc = ''; $reportFrame.hidden = false;
+    $reportFrame3d.hidden = true; $reportFrame3d.removeAttribute('src');
+    lastPaintedHtml = '';
+  }
 
   // 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.
@@ -1134,10 +1293,16 @@
     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);
+      const sfx = cached.label ? ' · ' + cached.label : '';
+      if (cached.interactive) {
+        $reportTitle.textContent = `3D Viewer · ${app.displayName}`;
+        $reportSub.textContent = `Last 3D view${sfx} — drag to orbit, scroll to zoom, click an element to inspect.`;
+      } else {
+        $reportSub.textContent = `Last report${sfx} — rendered from the run's output, never composed by the UI.`;
+      }
+      paintReport(cached.html, cached.interactive);
     } else {
-      $reportFrame.srcdoc = '';
+      clearReportFrames();
       $reportShare.hidden = true; // nothing to share — hide, don't disable
       $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>`;
@@ -1162,7 +1327,7 @@
     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
+    clearReportFrames(); // clear any previous report (static or 3D) before this run paints a fresh one
     $reportShare.hidden = true; // the frame is blank — only a painted report is shareable
     $reportOverlay.hidden = false;
     $reportOverlay.innerHTML = opts.debug
@@ -1183,14 +1348,19 @@
       // body, not real data) — prompt reconnect instead of rendering the noise.
       if (res.credentialIssue) { surfaceCredentialIssue(res.credentialIssue); return; }
       const html = res.report && res.report.html;
+      const interactive = !!(res.report && res.report.interactive);
       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 });
+      if (interactive) {
+        $reportTitle.textContent = `3D Viewer · ${app.displayName}`;
+        $reportSub.innerHTML = `Live 3D view from <code>${escapeHtml(nodeId)}</code>${inputBadge ? ' · ' + escapeHtml(inputBadge) : ''} — drag to orbit, scroll to zoom, click an element to inspect.`;
+      }
+      paintReport(html, interactive);
+      lastReportByApp.set(currentId, { nodeId, label: inputBadge, html, interactive });
       $reportModal.dataset.html = '1';
-      appendNarration(`Rendered the report from <strong>${escapeHtml(nodeId)}</strong>${inputBadge ? ' (' + escapeHtml(inputBadge) + ')' : ''} — live run against the model.`);
+      appendNarration(`Rendered the ${interactive ? '3D view' : '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) {
@@ -1238,7 +1408,7 @@
   const CRED_BODY_IDLE = 'Sign in again and then run the workflow — it takes about 30 seconds.';
 
   function showCredentialReconnect(cred) {
-    $reportFrame.srcdoc = '';
+    clearReportFrames();
     $reportShare.hidden = true;
     $reportOverlay.hidden = false;
     $reportOverlay.replaceChildren();
@@ -1349,7 +1519,7 @@
   // `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' }) {
+  function formModal({ title, sub = '', fields, okLabel = 'Save', danger = false }) {
     return new Promise((resolve) => {
       const $title = document.getElementById('form-modal-title');
       const $sub = document.getElementById('form-modal-sub');
@@ -1387,9 +1557,16 @@
         return `<div class="modal-field"><label for="${id}">${escapeHtml(f.label || f.name)}</label>${ctl}</div>`;
       }).join('');
       $ok.textContent = okLabel;
+      // A destructive confirm flips the emphasis: the commit button is neutral→red
+      // (.danger) and the SAFE Cancel becomes the accent primary + gets focus, so a
+      // stray Enter never deletes (#85).
+      $ok.classList.toggle('danger', !!danger);
+      $ok.classList.toggle('primary', !danger);
+      $cancel.classList.toggle('primary', !!danger);
       showModal($formModal);
       const first = $body.querySelector('input:not(.fm-file-input),textarea');
       if (first) { first.focus(); if (first.select) first.select(); }
+      else if (danger) $cancel.focus();
       // ── images-field setup ──────────────────────────────────────────────────────
       const imageStates = new Map();
       $body.querySelectorAll('.fm-images').forEach((box) => {
@@ -1505,15 +1682,19 @@
       };
       const done = (result) => {
         hideModal($formModal);
-        $ok.onclick = null; $cancel.onclick = null; $formModal.onclick = null; $body.onkeydown = null; $body.onpaste = null;
+        $ok.onclick = null; $cancel.onclick = null; $formModal.onclick = null; $formModal.onkeydown = null; $body.onpaste = null;
+        $ok.classList.remove('danger'); $ok.classList.add('primary'); $cancel.classList.remove('primary'); // reset chrome for the next caller
         resolve(result);
       };
       $ok.onclick = () => done(collect());
       $cancel.onclick = () => 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); }
+      // Keydown at the MODAL level (not $body) so Esc cancels regardless of focus — e.g. a
+      // destructive confirm where focus sits on Cancel, not in the (empty) body. Enter
+      // commits only for a normal form (never a danger confirm; never inside a textarea).
+      $formModal.onkeydown = (e) => {
+        if (e.key === 'Escape') { e.preventDefault(); done(null); }
+        else if (e.key === 'Enter' && !danger && e.target.tagName !== 'TEXTAREA') { e.preventDefault(); done(collect()); }
       };
     });
   }
@@ -1539,10 +1720,22 @@
   // 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(); });
+  // The interactive 3D doc (viewer-3d) posts a load handshake from its opaque-origin frame:
+  // `viewer-ready` clears the loading overlay; `viewer-error` (CDN/script/timeout) shows a
+  // retry. Guard: only when the 3D frame is the active surface and the message is from it.
+  window.addEventListener('message', (e) => {
+    if ($reportFrame3d.hidden || e.source !== $reportFrame3d.contentWindow) return;
+    const t = e.data && e.data.type;
+    if (t === 'viewer-ready') { $reportOverlay.hidden = true; $reportOverlay.replaceChildren(); }
+    else if (t === 'viewer-error') {
+      $reportOverlay.hidden = false; $reportOverlay.replaceChildren();
+      $reportOverlay.append(mkEl('div', null, '3D view failed to load — check your connection, then click ▶ Run workflow to try again.'));
+    }
+  });
   // The header ■ Stop run — the always-reachable twin of the overlay Stop (#39).
   if ($stopRunBtn) $stopRunBtn.onclick = () => stopRun();
   $reportOpen.onclick = () => {
-    const html = $reportFrame.srcdoc;
+    const html = lastPaintedHtml || $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).
@@ -3118,7 +3311,13 @@
         // 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);
+        reloadTimer = setTimeout(() => {
+          // Skip if the open app was renamed/removed out from under us (#85) — the
+          // apps-changed handler already refreshes the picker, and reloading a gone id
+          // would 404. dropClientAppState() removes it from `apps` before this fires.
+          if (!currentId || !apps.has(currentId)) return;
+          loadApp(currentId).catch(reportErr);
+        }, 250);
       } else if (m.type === 'seat-taken') {
         // This session's seat was claimed by another device (newest-login-wins).
         showToast('Signed in on another device — sign in here to continue.', 'err');
@@ -3892,7 +4091,7 @@
     $reportModal.dataset.nodeId = reportNodeId() || '';
     const cached = lastReportByApp.get(id);
     if (cached && cached.html) paintReport(cached.html);
-    else { $reportFrame.srcdoc = ''; $reportShare.hidden = true; }
+    else { clearReportFrames(); $reportShare.hidden = true; }
     $reportOverlay.hidden = false;
     $reportOverlay.replaceChildren();
     $reportOverlay.append(mkEl('div', 'spinner'), mkEl('div', null, 'Starting live session…'));
@@ -3977,7 +4176,7 @@
       $reportShare.hidden = false; // the cached report is the primary content
       $reportSub.innerHTML = `<span class="live-pip" aria-hidden="true"></span>Live · waiting for the next change — change your selection in Tekla to refresh the report.`;
     } else {
-      $reportFrame.srcdoc = '';
+      clearReportFrames();
       $reportShare.hidden = true;
       $reportOverlay.hidden = false;
       $reportOverlay.replaceChildren();
@@ -4005,7 +4204,7 @@
         ? `Run complete · last report above — click <strong>▶ Run workflow</strong> to run again.`
         : `Live session stopped · last report above — click <strong>▶ Run workflow</strong> to start again.`;
     } else {
-      $reportFrame.srcdoc = '';
+      clearReportFrames();
       $reportShare.hidden = true;
       $reportOverlay.hidden = false;
       $reportOverlay.replaceChildren();

package/dist/web/index.html

@@ -319,6 +319,13 @@
              Scripts stay BLOCKED (no allow-scripts), so even though the report is now
              same-origin it has no JS to touch the app page — static reports only. -->
         <iframe id="report-frame" sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" title="Report"></iframe>
+        <!-- Interactive output (the viewer-3d agent) needs scripts, so it cannot use the
+             scriptless static frame above. Loaded via a `data:text/html` URL → an opaque
+             origin (cannot reach the app page, cookies, or same-origin APIs). Minimal
+             sandbox: `allow-scripts` ONLY — the 3D doc has no links/popups of its own
+             (↗ Open is a parent-side action), and NO allow-same-origin. Shown only for
+             interactive reports; the static frame is used otherwise. -->
+        <iframe id="report-frame-3d" sandbox="allow-scripts" title="3D view" hidden></iframe>
         <div class="report-overlay" id="report-overlay" hidden></div>
       </div>
     </div>

package/package.json

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