@floless/app 0.18.0 → 0.19.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; }
 

package/dist/web/aware.js

@@ -578,8 +578,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 +704,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 +721,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
@@ -1349,7 +1473,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 +1511,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 +1636,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()); }
       };
     });
   }
@@ -1919,7 +2054,25 @@
   // 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(); }
+  // Prefer the File System Access API: its types[].description names the OS picker's filter
+  // ("FloLess workflow"), whereas a plain <input accept=…> with several extensions renders as
+  // the generic "Custom Files". Fall back to the hidden <input> where the API is absent
+  // (Firefox/Safari). Called synchronously from the menu-click gesture (no await before the
+  // picker call), so the required user-activation is preserved.
+  async function triggerImport() {
+    if (typeof window.showOpenFilePicker === 'function') {
+      let handle;
+      try {
+        [handle] = await window.showOpenFilePicker({
+          types: [{ description: 'FloLess workflow', accept: { 'text/plain': ['.flo', '.app', '.flow', '.aware'] } }],
+          multiple: false,
+        });
+      } catch { return; } // the user dismissed the picker (AbortError) — nothing to import
+      try { importFlo(await handle.getFile()); } catch { showToast('Could not read that file', 'err'); }
+      return;
+    }
+    if ($importFile) $importFile.click();
+  }
 
   async function importFlo(file) {
     if (!file) return;
@@ -3100,7 +3253,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');

package/package.json

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