@floless/app 0.56.0 → 0.57.0

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

@@ -430,6 +430,14 @@ past a few hard facts, split it into a `references/` file and link it.
   Enforced by `npm run verify:flo` in CI. See "Every node's Description must be plain English".
 - Determinism is AWARE's: `<app>.lock` is the approved artifact; Run is gated on a fresh
   source-hash. Never let the UI run on drift.
+- **Never edit a MAINTAINED app's `.flo` in place.** A maintained app is FloLess-published
+  (`publisher: floless`) and not forked — it tracks our update channel and its output is our
+  responsibility. To run it across projects with different data, **Duplicate** it (stays maintained,
+  keeps updates) and change only its inputs/contract. To change the *workflow logic* (add/edit a
+  node, the 2D/3D, an export), **Fork first** (`POST /api/app/:id/fork {accept:true}` — the user
+  accepts the liability terms), which takes it off the update channel and makes it theirs; only then
+  edit the `.flo`. An out-of-band logic edit to a maintained app trips the drift gate, which forces
+  the user to Restore the official version or Customize (fork) — shipped apps stay form-only.
 - Any change under `web/` requires a Playwright pass (visual + interaction), not just a check of
   the request body — see the project's standing rule.
 - When a real `aware`/bridge bug surfaces, file it on `aware-aeco/aware` (don't file your own

package/dist/web/app.css

@@ -1237,6 +1237,25 @@
   .modal-field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
   .modal-field input:focus,
   .modal-field textarea:focus { border-color: var(--accent); }
+  /* Consent checkbox (fork liability terms) — inline label + fully themed box (no native
+     default leaks the dark baseline). Custom checkmark via clip-path, accent on check. */
+  .modal-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 2px 0 4px; }
+  .modal-check input[type="checkbox"] {
+    appearance: none; -webkit-appearance: none; flex: none;
+    width: 16px; height: 16px; margin: 1px 0 0;
+    border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface-2);
+    cursor: pointer; display: grid; place-content: center;
+    transition: border-color 0.12s, background 0.12s;
+  }
+  .modal-check input[type="checkbox"]::before {
+    content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform 0.12s ease;
+    background: var(--accent-bright);
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+  .modal-check input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent-soft); }
+  .modal-check input[type="checkbox"]:checked::before { transform: scale(1); }
+  .modal-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .modal-check span { user-select: none; }
   .modal-categories { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
   .modal-categories button {
     background: var(--surface-2);
@@ -1759,6 +1778,14 @@
   .wf-update-pill:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; }
   .wf-update-pill:hover { border-color: var(--accent); color: var(--accent); }
   .wf-update-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  /* "yours" — a FORKED (user-owned, off-channel) workflow. Amber (--warn), NOT red: a forked app
+     is an intentional customization, not a fault. Header pill (informational) + compact row badge. */
+  .wf-forked-pill { display: none; border: 1px solid var(--warn); background: rgba(251, 191, 36, 0.08); color: var(--warn); font-size: 10px; padding: 1px 8px; border-radius: 999px; margin-left: 8px; line-height: 1.5; white-space: nowrap; cursor: default; }
+  .wf-forked-pill:not([hidden]) { display: inline-flex; align-items: center; }
+  .wf-fork-badge { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); border-radius: 999px; padding: 1px 6px; line-height: 1.4; white-space: nowrap; flex-shrink: 0; align-self: center; }
+  /* Restore (primary, accent) — re-installs the official version. Customize uses the default outline. */
+  #restore-btn { color: var(--accent-bright); border-color: var(--accent-dim); }
+  #restore-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
   /* Changelog list inside the update modal — themed scroll container (no native bar leaks). */
   .wf-update-changelog { max-height: 280px; overflow-y: auto; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
   .wf-update-changelog::-webkit-scrollbar { width: 6px; }

package/dist/web/aware.js

@@ -27,6 +27,9 @@
   const $reportClose = document.getElementById('report-close');
   const $reportStop = document.getElementById('report-stop');
   const $stopRunBtn = document.getElementById('stop-run-btn');
+  const $restoreBtn = document.getElementById('restore-btn');
+  const $customizeBtn = document.getElementById('customize-btn');
+  const $wfForked = document.getElementById('wf-forked');
 
   // Contract editor — a dedicated full-window surface for an editable typed
   // contract (steel takeoff, …). Unlike the opaque report viewer, this is a
@@ -426,11 +429,14 @@
       ...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.`);
+    const maintainedDrift = app.publisher === 'floless' && !app.forked && app.runState === 'drift';
     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.');
+      : maintainedDrift
+        ? 'The workflow logic changed since it was last approved. **Restore** the official version, or **Customize** it to make it your own.'
+        : 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 };
@@ -475,6 +481,21 @@
     $compileBtn.disabled = false;
     $compileBtn.textContent = needsCompile ? '⎙ Compile *' : '⎙ Compile';
 
+    // Maintained = a FloLess-published app the user hasn't forked (so it has an official version to
+    // restore + an update channel). Customize (fork) is offered for any maintained app; Restore +
+    // suppressing Compile fire only when a maintained app's LOGIC drifted — approving that via Compile
+    // would silently accept an edit to a shipped workflow, defeating "shipped apps are form-only".
+    const maintained = app.publisher === 'floless' && !app.forked;
+    const drifted = app.runState === 'drift';
+    if ($wfForked) $wfForked.hidden = !app.forked;
+    if ($customizeBtn) $customizeBtn.hidden = !maintained;
+    if ($restoreBtn) $restoreBtn.hidden = !(maintained && drifted);
+    // Suppress Compile for a maintained, drifted app: approving an out-of-band logic edit via
+    // Compile would defeat "shipped apps are form-only". Disable as well as hide, so no programmatic
+    // click / queued event / shortcut can fire it through the hidden-but-enabled element.
+    if (maintained && drifted) { $compileBtn.hidden = true; $compileBtn.disabled = true; }
+    else $compileBtn.hidden = false;
+
     // 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
@@ -867,6 +888,7 @@
         const aid = escapeAttr(a.id);
         html += `<div class="wf-option" role="option" id="wf-opt-${aid}" data-id="${aid}" data-baked="${a.baked ? '1' : ''}" 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>`
+          + (a.forked ? `<span class="wf-fork-badge" data-tip="You forked this workflow — it no longer receives FloLess updates. You own its output.">yours</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>`
@@ -1127,6 +1149,64 @@
     }
   }
 
+  // ── Fork / Restore: the maintained ⇄ owned boundary ──────────────────────────
+  // FORK crosses a maintained app to user-owned: it requires explicit liability acceptance (a ticked
+  // checkbox — informed consent for structural-steel output) and takes the app off the update channel.
+  // The .flo is NOT edited here; the user changes the workflow afterwards (via the terminal AI). RESTORE
+  // re-installs the official version over a forked/edited app and returns it to maintained.
+  async function forkWorkflow(id) {
+    closeCombo(false);
+    const res = await formModal({
+      title: 'Customize this workflow',
+      sub: 'Forking lets you change the workflow logic — but it takes it off the FloLess update channel. If you only need a different project’s inputs, use Duplicate (⧉) instead — duplicates stay maintained.',
+      fields: [{
+        type: 'checkbox',
+        name: 'accept',
+        label: 'I understand this is structural-steel software. I am responsible for verifying that any changes I make produce correct output before using the results on a real project.',
+        required: true,
+        value: false,
+      }],
+      okLabel: 'Fork & customize',
+    });
+    if (!res || res.accept !== true) return; // cancelled, or (defensive) terms not ticked
+    showToast('Forking…', 'ok');
+    try {
+      await api(`/api/app/${encodeURIComponent(id)}/fork`, { method: 'POST', body: JSON.stringify({ accept: true }) });
+      await loadApps();
+      if (currentId === id) await loadApp(id);
+      await refreshWorkflowUpdates(); // it just left the channel — drop any pending update pill
+      showToast('Forked — this workflow is now yours to edit. Run ⎙ Compile when you’re ready.', 'ok');
+    } catch (e) {
+      console.error(e);
+      showToast(e.message || 'Fork failed', 'warn');
+    }
+  }
+
+  async function restoreWorkflow(id) {
+    closeCombo(false);
+    const ok = await formModal({
+      title: 'Restore the official version?',
+      sub: 'Re-installs the official workflow and discards any changes made to its logic. Your saved inputs are kept.',
+      fields: [],
+      okLabel: 'Restore',
+    });
+    if (!ok) return;
+    showToast('Restoring…', 'ok');
+    try {
+      await api(`/api/app/${encodeURIComponent(id)}/restore`, { method: 'POST', body: JSON.stringify({}) });
+      await loadApps();
+      if (currentId === id) await loadApp(id);
+      await refreshWorkflowUpdates(); // back on the channel — re-offer any pending update
+      showToast('Restored to the official version.', 'ok');
+    } catch (e) {
+      console.error(e);
+      showToast(e.message || 'Restore failed', 'warn');
+    }
+  }
+
+  if ($customizeBtn) $customizeBtn.onclick = () => { if (currentId) forkWorkflow(currentId); };
+  if ($restoreBtn) $restoreBtn.onclick = () => { if (currentId) restoreWorkflow(currentId); };
+
   // ── app inputs + HTML Viewer ────────────────────────────────────────────────
 
   // The id of the report-viewer node — the terminal node a user double-clicks to
@@ -2165,6 +2245,11 @@
         const id = `fm-${f.name}`;
         const val = f.value != null ? String(f.value) : '';
         const ph = escapeHtml(f.placeholder || '');
+        // A consent checkbox renders inline (label beside the box, not above) — used for the
+        // fork liability terms. `required: true` gates the OK button until it's ticked.
+        if (f.type === 'checkbox') {
+          return `<label class="modal-check" for="${id}"><input type="checkbox" id="${id}" data-fm-check="${escapeHtml(f.name)}"${f.value ? ' checked' : ''}><span>${escapeHtml(f.label || f.name)}</span></label>`;
+        }
         let ctl;
         if (f.type === 'images') {
           ctl = `<div class="fm-images" data-fm-images="${escapeHtml(f.name)}">
@@ -2308,9 +2393,20 @@
         const file = fileItems[0].getAsFile();
         if (entry && file) entry.setFile(file);
       };
+      // Required consent checkboxes (e.g. the fork liability terms) disable OK until ticked.
+      const requiredChecks = Array.from($body.querySelectorAll('[data-fm-check]')).filter((el) => {
+        const f = fields.find((x) => x.name === el.dataset.fmCheck);
+        return f && f.required;
+      });
+      if (requiredChecks.length) {
+        const syncOkGate = () => { $ok.disabled = requiredChecks.some((el) => !el.checked); };
+        requiredChecks.forEach((el) => { el.onchange = syncOkGate; });
+        syncOkGate();
+      }
       const collect = () => {
         const out = {};
         $body.querySelectorAll('[data-fm]').forEach((el) => { out[el.dataset.fm] = el.value; });
+        $body.querySelectorAll('[data-fm-check]').forEach((el) => { out[el.dataset.fmCheck] = el.checked; });
         imageStates.forEach((entry, name) => { out[name] = entry.state; });
         fileStates.forEach((entry, name) => {
           out[name] = entry.st.mode === 'empty' ? '' : entry.st.value;
@@ -2323,7 +2419,7 @@
         _formModalOpen = false;
         hideModal($formModal);
         $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
+        $ok.classList.remove('danger'); $ok.classList.add('primary'); $cancel.classList.remove('primary'); $ok.disabled = false; // reset chrome for the next caller
         resolve(result);
       };
       $ok.onclick = () => done(collect());
@@ -2334,7 +2430,7 @@
       // 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()); }
+        else if (e.key === 'Enter' && !danger && e.target.tagName !== 'TEXTAREA' && !$ok.disabled) { e.preventDefault(); done(collect()); }
       };
       // Setup succeeded and the modal is shown — mark it open now. Setting it here (not
       // before the synchronous setup above) means a setup throw can't latch the guard for
@@ -2441,7 +2537,7 @@
   $promptSel.onchange = () => { loadApp($promptSel.value).catch(reportErr); };
 
   $compileBtn.onclick = async () => {
-    if (!currentId || $compileBtn.disabled) return;
+    if (!currentId || $compileBtn.disabled || $compileBtn.hidden) return; // hidden = suppressed for a maintained drift
     const id = currentId;
     $compileBtn.disabled = true;
     const prev = $compileBtn.textContent;

package/dist/web/index.html

@@ -55,6 +55,9 @@
         </div>
         <select id="prompt-select" hidden></select>
         <button id="wf-update" class="wf-update-pill" type="button" hidden aria-haspopup="dialog"></button>
+        <!-- Shown only when the OPEN workflow is forked (user-owned, off the update channel). Purely
+             informational (the badge of ownership); the picker row carries the same "yours" cue. -->
+        <span id="wf-forked" class="wf-forked-pill" hidden role="status" data-tip="You forked this workflow — it no longer receives FloLess updates. You are responsible for verifying its output.">yours · off updates</span>
         <!-- Agents (⊞) and Routines (⏱) buttons moved into the ≡ menu in #149
              (Ctrl+G / Ctrl+R); the toolbar keeps only the run-critical controls. -->
         <span class="ctl-sep" aria-hidden="true"></span>
@@ -66,6 +69,12 @@
           <span class="guide-beacon-label">Start here</span>
         </button>
         <span class="run-state" id="run-state" role="status" aria-live="polite"></span>
+        <!-- Restore + Customize: shown for a MAINTAINED (publisher:floless, non-forked) app. Restore
+             appears only when its logic drifted (re-installs the official version); Customize (fork) is
+             always available for a maintained app. When shown on drift they replace Compile, so a
+             shipped app's logic edit can't be silently approved (form-only). -->
+        <button id="restore-btn" type="button" hidden data-tip="Restore the official workflow — undoes any out-of-band edits and re-arms Run">↺ Restore</button>
+        <button id="customize-btn" type="button" hidden data-tip="Fork this workflow to edit it yourself — takes it off the FloLess update channel">Customize…</button>
         <button id="compile-btn" data-tip="Compile + approve → freeze the .lock">⎙ Compile</button>
         <button id="sim-btn" data-tip="Simulate: stub every node from its output schema — no live host is contacted. Validates the workflow's composition end-to-end, even when the real agents aren't connected yet.">Simulate</button>
         <button id="run-btn" data-tip="Run the workflow for real against the live host (uses the inputs; renders the report node in the HTML Viewer)">▶ Run workflow</button>

package/package.json

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