@floless/app 0.11.0 → 0.12.1

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

@@ -0,0 +1,131 @@
+---
+name: floless-app-ui
+description: This skill should be used when the user wants to customize the floless.app Dashboard — add, change, rearrange, or remove custom panels (stat cards, data tables, report buttons, run buttons) — or when picking up queued 'ui-customize' requests from the floless.app Customize box. Use it when the user says things like "add a panel showing last night's BOM run", "pin a run button to my dashboard", "apply my dashboard change", "customize my floless dashboard", "pick up my floless UI request", or after they type into the Dashboard's Customize box. It edits ~/.floless/ui/extensions.json (the declarative UI descriptor), validates with the AWARE ui agent, and the app re-renders live.
+metadata:
+  version: 0.1.0
+---
+
+# floless.app Custom Panels — the dashboard descriptor
+
+floless.app's Dashboard view renders **`~/.floless/ui/extensions.json`** — one declarative
+JSON document describing the user's custom panels. **You (the terminal AI) compose the
+description; floless.app renders it** with its own design system. You never write HTML,
+CSS, or JS — and never need to: every string in the descriptor is escaped at render time,
+so markup would show up as literal text.
+
+The file is watched: the moment you write it, the open browser re-renders the Dashboard.
+No compile, no approve, no restart.
+
+## Picking up a queued request
+
+When the user types into the Dashboard's **Customize box**, floless.app queues a request:
+
+```sh
+curl -s http://127.0.0.1:4317/api/requests        # → { ok, requests: [...] }
+```
+
+```jsonc
+// type "ui-customize" — a dashboard change in plain English. No appId (it's
+// workspace-level); panelId optionally scopes it to one existing panel.
+{ "id": "uuid", "type": "ui-customize", "status": "pending",
+  "instruction": "show last night's BOM run as a table with a re-run button",
+  "panelId": null }
+```
+
+Workflow: read the request → edit `extensions.json` (below) → validate → **delete the
+processed request** (`curl -s -X DELETE http://127.0.0.1:4317/api/requests/<id>`).
+The request files also live at `~/.floless/requests/*.json` if the server is down.
+
+## The descriptor schema (v1)
+
+Authoritative sources — read them, don't guess field names:
+
+```sh
+aware agent describe ui                          # the agent's commands
+aware agent skill ui descriptor-authoring.md     # the full authoring guide
+aware agent invoke ui catalog --json             # machine-readable block contracts
+```
+
+Shape: `{ "version": 1, "panels": [ { "id", "slot", "title", "blocks": [...] } ] }`
+
+- `id` — unique, `[a-z0-9-]+` (floless.app keys panels by it).
+- `slot` — floless.app honors **`"dashboard"`** (the Dashboard grid) and
+  **`"inspect-tab"`** (an extra tab in the right Inspect column, after Execution).
+  Anything else falls back to the Dashboard.
+- `blocks` — ordered; order is the layout. Types floless.app renders:
+  - `stat` `{label, value, hint?}` — a KPI card. Consecutive stats become one strip;
+    lead a panel with 2–4. Values are LITERALS — write the number/text yourself.
+  - `table` `{source, columns?, sort?, "sort-desc"?}` — a data table fed by a
+    floless-resolved `source` (below). Columns/sort mirror html-report (#210).
+  - `text` `{content}` — escaped prose; blank lines separate paragraphs.
+  - `report` `{source, title?}` — a "View report" button opening the run's HTML
+    report in the app's sandboxed viewer.
+  - `action` `{label, "action-id", inputs?}` — a button. floless.app wires ONLY
+    `"action-id": "run-app:<appId>"` (runs that installed workflow with `inputs`,
+    respecting the compile/lock gate). Other action-ids render inert.
+  - An unknown `type` renders as a friendly placeholder — never an error — so
+    composing for a newer FloLess degrades safely.
+
+## Source strings the floless server resolves
+
+`table.source` / `report.source` bind data BY NAME; floless.app resolves these:
+
+| source | payload |
+|---|---|
+| `last-run-output:<appId>` | the app's latest run trace → `{appId, runId, status, rows, html}` — `table` uses the rows, `report` uses the html |
+| `last-run-status:<appId>` | `{appId, status, finishedAt, runId}` of the latest run |
+| `routine-status:<routineId-or-appId>` | `{id, name, workflow, kind, enabled, nextFireAt, lastRun, broken}` from the user's routines |
+
+`<appId>` is an installed app id (`aware app list`). An unresolvable source renders a
+quiet "no data yet" placeholder — the descriptor outlives any one run, so binding to an
+app that hasn't run yet is fine.
+
+## Worked example
+
+```json
+{
+  "version": 1,
+  "panels": [
+    {
+      "id": "morning-bom",
+      "slot": "dashboard",
+      "title": "Morning BOM",
+      "blocks": [
+        { "type": "stat", "label": "Scope", "value": "Phase 2", "hint": "live Tekla model" },
+        { "type": "table", "source": "last-run-output:tekla-bom-by-phase",
+          "columns": ["profile", "qty"], "sort": "qty", "sort-desc": true },
+        { "type": "report", "source": "last-run-output:tekla-bom-by-phase", "title": "Full BOM report" },
+        { "type": "action", "label": "Re-run BOM", "action-id": "run-app:tekla-bom-by-phase",
+          "inputs": { "phase": 2 } }
+      ]
+    }
+  ]
+}
+```
+
+## Write → validate → done
+
+1. **Edit atomically**: write to `~/.floless/ui/extensions.json.tmp`, then rename over
+   `~/.floless/ui/extensions.json` (the watcher fires once, on a complete file). Create
+   `~/.floless/ui/` if missing. Edit the EXISTING file when the user is changing/adding —
+   read it first; replace it wholesale only when they ask to start over.
+2. **Validate** (the check, before or right after writing):
+   ```sh
+   aware agent invoke ui validate --inputs '{"descriptor": { ...the json... }}' --json
+   # or, for a large descriptor:  --inputs @args.json   where args.json = {"descriptor": …}
+   ```
+   Fix `errors` (the UI falls back to the default view on an invalid file and shows a
+   warning); review `warnings` (typos surface as unknown-field warnings).
+3. **Delete the processed request** if you picked one up from `/api/requests`.
+4. Nothing else — the app re-renders live and shows a "Customized" badge.
+
+## Guardrails
+
+- **Never write raw HTML/markup into descriptor strings** — it renders as literal text
+  by design. Describe; don't mark up.
+- Every write is snapshotted to `~/.floless/ui/history/` (newest 20), and the user has
+  one-click **Undo** and **Reset to default** in the app — so be bold composing, but
+  never destructive: don't delete panels the user didn't ask to remove, and prefer
+  editing the existing document over regenerating it.
+- The UI renders; AWARE runs; you compose. Don't put computed values in `stat` blocks
+  that a `source`-bound block could keep live — a stale hand-written number misleads.

package/dist/web/app.css

@@ -1935,6 +1935,25 @@ body {
 .run-state.drift      { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
 .run-state.uncompiled { color: var(--text-muted); border-color: var(--border-strong); }
 
+/* Header Stop — the always-reachable escape hatch during a run, regardless of whether
+   the HTML Viewer modal is open or closed (#39). Shown only while a run is in flight.
+   Mirrors the in-modal .overlay-stop: a quiet destructive action — warn-tinted outline
+   that fills on hover, never a primary. Inherits the header button's size/radius/font;
+   only the colours are overridden here. */
+.run-stop-btn {
+  background: transparent;
+  color: var(--warn);
+  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.run-stop-btn:hover {
+  background: color-mix(in srgb, var(--warn) 16%, transparent);
+  border-color: var(--warn);
+  color: var(--text);
+}
+.run-stop-btn:disabled { opacity: 0.6; cursor: default; }
+
 /* Compile-notes strip over the canvas (CONCERNS §1). These are info-level FYIs
    (e.g. AWARE's read-mode-on-exec note), so they read as info — not a warning —
    and collapse to a faint one-line pill so they don't eat canvas height. */
@@ -2483,3 +2502,167 @@ body {
     .relnotes-skel-line::after { animation: none; }
     .whats-new-detail { transition: none; }
   }
+
+/* ============================================================================
+   CUSTOM PANELS — the Dashboard view + Customized badge (web/panels.js).
+   Renders ~/.floless/ui/extensions.json with the EXISTING tokens only (shadcn
+   dark slate-blue baseline); a user panel must be indistinguishable from
+   shipped UI. No new colors, fonts, or aesthetics here — composition only.
+   ========================================================================== */
+
+/* Header view switch (Canvas | Dashboard) — compact segmented control next to
+   the brand; reuses the .rtn-mode pill vocabulary at header scale. */
+.view-toggle { display: inline-flex; gap: 4px; margin-left: 16px; }
+.view-btn {
+  background: var(--surface-2); border: 1px solid var(--border-strong);
+  color: var(--text-dim); font-size: 10.5px; text-transform: uppercase;
+  letter-spacing: 0.1em; padding: 4px 12px; border-radius: 6px; cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.view-btn:hover { color: var(--text); border-color: var(--accent-dim); }
+.view-btn.active { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-soft); }
+.view-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+/* "Dashboard updated" dot — lit when panels changed while the user was on Canvas. */
+.view-dot { color: var(--accent); font-size: 8px; vertical-align: 2px; margin-left: 5px; }
+.view-dot[hidden] { display: none; }
+
+/* Customized pill — present only while custom panels exist; opens the ext menu. */
+.ext-badge {
+  margin-left: 8px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
+  background: var(--accent-soft); border: 1px solid var(--accent-dim);
+  color: var(--accent); font-size: 10.5px; letter-spacing: 0.04em;
+}
+.ext-badge:hover { border-color: var(--accent); }
+.ext-badge[hidden] { display: none; }
+
+/* Ext menu — inherits .menu chrome; position is set per-open (under the badge). */
+.ext-menu { width: 290px; }
+.ext-menu[hidden] { display: none; }
+.ext-history-head {
+  padding: 6px 12px 2px; font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--text-muted);
+}
+.ext-history { max-height: 180px; overflow-y: auto; padding: 2px 4px 4px; }
+.ext-history-item {
+  display: flex; justify-content: space-between; gap: 10px;
+  padding: 4px 8px; border-radius: 4px; font-size: 12px; color: var(--text-dim);
+}
+.ext-history-when { color: var(--text); }
+.ext-history-count { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
+.ext-history-empty { padding: 6px 8px 8px; font-size: 12px; color: var(--text-muted); }
+/* Reset is destructive-looking (though recoverable) — danger on hover, never accent. */
+#ext-reset-confirm:hover { color: var(--err); border-color: var(--err); background: color-mix(in srgb, var(--err) 10%, transparent); }
+
+/* Dashboard view — replaces the topology in the center column; chat + inspect stay. */
+.canvas.view-dashboard .topology,
+.canvas.view-dashboard .canvas-toolbar,
+.canvas.view-dashboard .hint,
+.canvas.view-dashboard .fav-bar,
+.canvas.view-dashboard .notes-strip,
+.canvas.view-dashboard .find-overlay { display: none; }
+.dashboard { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; }
+.dashboard[hidden] { display: none; }
+
+/* Notices above the panels: dim note (degraded validation / warnings) and the
+   invalid-descriptor warning (defaults shown; file never bricks the app). */
+.ext-note { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+.ext-invalid {
+  border: 1px solid var(--warn); border-radius: 8px; padding: 12px 14px;
+  background: color-mix(in srgb, var(--warn) 7%, transparent); margin-bottom: 14px;
+}
+.ext-invalid-title { font-size: 13px; font-weight: 600; color: var(--warn); }
+.ext-invalid ul { margin: 8px 0 0 18px; font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
+.ext-invalid-hint { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
+
+/* Panel grid + cards — same surface/border/radius family as .modal/.agent-card. */
+.ext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
+.ext-panel {
+  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
+  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
+}
+.ext-panel-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
+
+/* stat — KPI card; consecutive stats render as one strip. */
+.ext-stat-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.ext-stat {
+  flex: 1 1 90px; min-width: 0; background: var(--surface-2);
+  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px 10px;
+}
+.ext-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
+.ext-stat-value { font-size: 19px; font-weight: 600; color: var(--text); margin-top: 3px; overflow-wrap: anywhere; }
+.ext-stat-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+
+/* table — data rows from the resolved payload; columns/sort mirror html-report. */
+.ext-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
+.ext-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.ext-table th {
+  position: sticky; top: 0; background: var(--surface-2); text-align: left;
+  padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--text-dim); font-weight: 600; white-space: nowrap;
+}
+.ext-table td { padding: 5px 10px; border-top: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; }
+.ext-table td.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
+.ext-table-more { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+
+/* text — escaped prose paragraphs. */
+.ext-text p { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 0 0 8px; }
+.ext-text p:last-child { margin-bottom: 0; }
+
+/* report — opens the run's HTML in the existing sandboxed viewer. */
+.ext-report-row { display: flex; align-items: center; gap: 10px; }
+.ext-report-title { font-size: 12.5px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ext-report-open {
+  flex: none; background: var(--surface-2); border: 1px solid var(--border-strong);
+  color: var(--accent); font-size: 11.5px; padding: 5px 11px; border-radius: 6px; cursor: pointer;
+}
+.ext-report-open:hover { border-color: var(--accent-dim); background: var(--accent-soft); }
+
+/* action — run-app buttons obey the same runnable gate as the header Run. */
+.ext-action {
+  align-self: flex-start; background: var(--accent); border: 1px solid var(--accent);
+  color: #ffffff; font-size: 12px; font-weight: 600; padding: 6px 14px;
+  border-radius: 6px; cursor: pointer;
+}
+.ext-action:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: 0 0 14px var(--accent-glow); }
+.ext-action:disabled { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-muted); cursor: not-allowed; }
+
+/* placeholders — missing data + forward-compat unknown blocks (dashed). */
+.ext-placeholder {
+  border: 1px dashed var(--border-strong); border-radius: 6px; padding: 12px;
+  font-size: 12px; color: var(--text-muted); text-align: center;
+}
+
+/* Empty state + the Customize composer (the dashboard's reverse channel). */
+.ext-empty { font-size: 13px; color: var(--text-dim); margin: 18vh auto 0; max-width: 420px; text-align: center; }
+.ext-composer-wrap { max-width: 640px; margin: 18px auto 0; }
+.ext-grid + .ext-composer-wrap { margin-top: 22px; }
+.ext-pending { font-size: 12px; color: var(--warn); margin-bottom: 8px; }
+.ext-pending[hidden] { display: none; }
+.ext-composer { display: flex; gap: 8px; }
+.ext-composer input {
+  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-strong);
+  border-radius: 6px; color: var(--text); font-size: 13px; padding: 9px 12px;
+}
+.ext-composer input:focus { outline: none; border-color: var(--accent-dim); }
+.ext-composer input::placeholder { color: var(--text-muted); }
+#ext-composer-send {
+  flex: none; background: var(--accent); border: 1px solid var(--accent); color: #ffffff;
+  font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 6px; cursor: pointer;
+}
+#ext-composer-send:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
+#ext-composer-send:disabled { opacity: 0.6; cursor: default; }
+.ext-composer-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; }
+/* Post-reset escape hatch: the empty state's one-line offer of the newest history
+   snapshot — without it, resetting hides the Customized pill and with it the only
+   Undo control, stranding a mistaken reset. Quiet hint scale; accent link. */
+.ext-restore { max-width: 640px; margin: 10px auto 0; font-size: 12px; color: var(--text-dim); }
+.ext-restore[hidden] { display: none; }
+.ext-restore-btn {
+  background: none; border: none; padding: 0; font-size: 12px; cursor: pointer;
+  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
+}
+.ext-restore-btn:hover { color: var(--accent-bright); }
+.ext-restore-btn:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
+
+/* Inspect-tab panels reuse the same block styles inside the inspect body. */
+.ext-inspect { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }

package/dist/web/aware.js

@@ -24,6 +24,7 @@
   const $reportOpen = document.getElementById('report-open');
   const $reportShare = document.getElementById('report-share');
   const $reportClose = document.getElementById('report-close');
+  const $stopRunBtn = document.getElementById('stop-run-btn');
 
   // One persistent array the inspect Execution tab reads; we mutate in place so
   // every AGENTS[node].execution reference stays valid across re-renders.
@@ -327,7 +328,10 @@
     };
     $runState.dataset.tip = stateTips[app.runState] || '';
 
-    $runBtn.disabled = !app.runnable;
+    // Keep Run disabled (and the header Stop shown) if a gate re-paint lands mid-run (#39) —
+    // never let a re-render re-arm Run while a run is still in flight.
+    $runBtn.disabled = !app.runnable || reportRunning || state.running;
+    if ($stopRunBtn) $stopRunBtn.hidden = !(reportRunning || state.running);
     $runBtn.dataset.tip = app.runnable
       ? 'Run the approved workflow'
       : app.runState === 'drift'
@@ -896,6 +900,35 @@
   // double-click LOAD the last result instantly instead of re-running.
   const lastReportByApp = new Map();
 
+  // Reflect run-in-flight state in the ALWAYS-VISIBLE header so a run is stoppable even
+  // when the HTML Viewer modal is closed (#39). The header ■ Stop run appears for the whole
+  // duration of either run path (the modal run `reportRunning` and the inline run
+  // `state.running`) and disappears when neither is active. Run stays disabled while a run
+  // is in flight; when idle it falls back to the compile-gate's runnable state. Also tells
+  // the user, on the modal's × tooltip, that closing leaves the run going (Stop is in the
+  // header) — the canvas keeps showing progress (markCanvasRunning), by design.
+  function syncRunControls() {
+    const running = reportRunning || state.running;
+    if ($stopRunBtn) {
+      $stopRunBtn.hidden = !running;
+      // Reset to a fresh, clickable Stop each run; stopRun() flips it to "Cancelling…".
+      if (running && !cancelRequested) { $stopRunBtn.disabled = false; $stopRunBtn.textContent = '■ Stop run'; }
+    }
+    if (running) {
+      $runBtn.disabled = true;
+    } else {
+      const app = currentId && apps.get(currentId);
+      $runBtn.disabled = !(app && app.runnable);
+    }
+    // Rely on the native `disabled` attribute for AT state (paintGate also flips it); a
+    // separate aria-disabled would be redundant and could go stale on a gate re-paint.
+    if ($reportClose) {
+      $reportClose.dataset.tip = reportRunning
+        ? 'Close viewer (the run keeps going — ■ Stop run is in the header)'
+        : 'Close';
+    }
+  }
+
   // Stop the in-flight run (the escape hatch for a hung/unattached host). Marks
   // cancelRequested so the catch shows "cancelled", clears the canvas running
   // pulse, and asks the server to kill the `aware app run` child. The in-flight
@@ -904,8 +937,10 @@
     if (!reportRunning && !state.running) return;
     cancelRequested = true;
     clearNodeStatus();
+    // Reflect "cancelling" on BOTH Stop surfaces — the in-modal overlay and the header.
     const stopBtn = document.querySelector('.overlay-stop');
     if (stopBtn) { stopBtn.disabled = true; stopBtn.textContent = 'Cancelling…'; }
+    if ($stopRunBtn) { $stopRunBtn.disabled = true; $stopRunBtn.textContent = 'Cancelling…'; }
     try { await api('/api/run/stop', { method: 'POST' }); } catch { /* the run's own catch surfaces it */ }
   }
 
@@ -946,6 +981,7 @@
     reportRunning = true;
     cancelRequested = false;
     markCanvasRunning(); // paints behind the modal; visible once it's closed
+    syncRunControls(); // header ■ Stop run + Run disabled — reachable even if the modal is closed (#39)
 
     const inputs = currentInputs();
     const inputBadge = Object.entries(inputs).map(([k, v]) => `${k}=${v}`).join(' · ');
@@ -1004,6 +1040,7 @@
       }
     } finally {
       reportRunning = false;
+      syncRunControls(); // run ended — hide the header Stop, restore Run from the gate
     }
   }
 
@@ -1264,6 +1301,8 @@
   // 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 header ■ Stop run — the always-reachable twin of the overlay Stop (#39).
+  if ($stopRunBtn) $stopRunBtn.onclick = () => stopRun();
   $reportOpen.onclick = () => {
     const html = $reportFrame.srcdoc;
     if (!html) return;
@@ -2064,6 +2103,7 @@
     $runBtn.disabled = true;
     if ($simBtn) $simBtn.disabled = true;
     $runBtn.textContent = '◆ Running…';
+    syncRunControls(); // surface the header ■ Stop run for the inline (no-modal) run too (#39)
     liveTrace.length = 0;
     state.hasRun = true;
     try {
@@ -2102,6 +2142,7 @@
       $runBtn.disabled = false;
       if ($simBtn) $simBtn.disabled = false;
       $runBtn.textContent = '▶ Run workflow';
+      syncRunControls(); // hide the header Stop; reconcile Run with the gate's runnable state
     }
   }
   $runBtn.onclick = () => runApp({ simulate: false });
@@ -2592,7 +2633,7 @@
           // (popover + what's-new). Empty until /api/health reports it → links omitted.
           if (h && h.webBase) webBase = h.webBase;
           const av = document.getElementById('app-version');
-          if (av && h && h.appVersion && !shownVersion) { av.textContent = 'v' + h.appVersion; shownVersion = true; }
+          if (av && h && h.appVersion && !shownVersion) { av.textContent = 'FloLess ' + h.appVersion; shownVersion = true; }
           // After the build version is stamped, reveal the relaunch-surviving what's-new
           // panel iff this is the build we just self-updated into (guarded to once).
           maybeShowWhatsNew();
@@ -2666,6 +2707,14 @@
         }).catch(() => {});
       } else if (m.type === 'request-added' || m.type === 'requests-changed') {
         loadRequests();
+        if (window.flolessPanels) window.flolessPanels.refreshPending(); // composer's "queued" line
+      } else if (m.type === 'extensions-changed') {
+        // The terminal AI (or undo/reset) rewrote ~/.floless/ui/extensions.json —
+        // re-render the Dashboard / inspect-tab panels live. panels.js owns it.
+        if (window.flolessPanels) window.flolessPanels.refresh({ fromChange: true });
+      } else if (m.type === 'run-ended') {
+        // Panel data bindings (last-run-output/-status) go stale after any run.
+        if (window.flolessPanels) window.flolessPanels.refreshData();
       } else if (m.type === 'routine-changed') {
         loadRoutinesData();
       } else if (m.type === 'routine-run-started') {
@@ -2674,6 +2723,7 @@
       } else if (m.type === 'routine-run-ended') {
         runningRoutines.delete(m.id);
         loadRoutinesData();
+        if (window.flolessPanels) window.flolessPanels.refreshData(); // routine runs also refresh bindings
       } else if (m.type === 'trigger-session-changed') {
         applyTriggerSnapshot(m.id, m.snapshot);
       } else if (m.type === 'connect-result') {
@@ -2829,6 +2879,10 @@
         ? `${base}\nReference snapshots (read these for visual context): ${req.snapshots.join(', ')}`
         : base;
     }
+    if (req.type === 'ui-customize') {
+      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\`.`;
+    }
     return '';
   }
 
@@ -2907,15 +2961,15 @@
       return;
     }
     $list.innerHTML = pendingRequests.map((r) => {
-      const label = r.type === 'use-template' ? 'template' : 'tweak';
-      const badgeCls = r.type === 'tweak' ? 'req-type req-type-tweak' : 'req-type';
+      const 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 when = r.createdAt ? new Date(r.createdAt) : null;
       const time = when && !isNaN(when) ? `<span class="req-time">${escapeHtml(nowStamp(when))}</span>` : '';
       return `
         <div class="req-item">
           <div class="req-info">
-            <div class="req-head"><span class="${badgeCls}">${label}</span> <code>${escapeHtml(r.appId || '')}</code>${target}${time}</div>
+            <div class="req-head"><span class="${badgeCls}">${label}</span> ${r.appId ? `<code>${escapeHtml(r.appId)}</code>` : ''}${target}${time}</div>
             <div class="req-instruction">${escapeHtml(instructionFor(r))}</div>
             ${r.snapshots && r.snapshots.length ? `<div class="req-thumbs">${r.snapshots.map((_, i) => `<button type="button" class="req-thumb" data-id="${escapeAttr(r.id)}" data-n="${i}" aria-label="View screenshot ${i + 1}"><img src="/api/requests/${encodeURIComponent(r.id)}/snapshot/${i}" alt=""></button>`).join('')}</div>` : ''}
           </div>
@@ -3703,7 +3757,7 @@
       riAwareVersion = h.awareVersion || '';
       const app = currentId && apps.get(currentId);
       const wf = app ? ` · workflow "${app.displayName || currentId}"` : '';
-      $riContext.textContent = `Also sent automatically: FloLess v${h.appVersion || '?'}, AWARE v${h.awareVersion || '?'}${wf}`;
+      $riContext.textContent = `Also sent automatically: FloLess ${h.appVersion || '?'}, AWARE ${h.awareVersion || '?'}${wf}`;
     }).catch(() => { /* keep the generic line on a health blip */ });
     showModal($riModal);
     setTimeout(() => $riTitle.focus(), 0);
@@ -3859,6 +3913,9 @@
       loadTemplates().catch(() => {}),
       loadRequests().catch(() => {}),
     ]);
+    // Custom Panels boot is deferred to here so panels.js never fetches while the
+    // subscription gate / AWARE bootstrap would 402/409 it.
+    if (window.flolessPanels) window.flolessPanels.boot();
     return loadApps().catch((e) => {
       reportErr(e);
       setComboTriggerLabel('server unreachable');
@@ -3955,7 +4012,7 @@
     // /api/health is un-gated, so this works even while unlicensed.
     fetch('/api/health', { cache: 'no-store' })
       .then((r) => r.json())
-      .then((h) => { if (h && h.appVersion) document.getElementById('lg-version').textContent = 'v' + h.appVersion; })
+      .then((h) => { if (h && h.appVersion) document.getElementById('lg-version').textContent = 'FloLess ' + h.appVersion; })
       .catch(() => { /* version is a nicety; never block the gate on it */ });
     document.getElementById('lg-signin').onclick = async () => {
       const s = document.getElementById('lg-status');
@@ -3973,6 +4030,27 @@
     };
   }
 
+  // ── Custom Panels bridge (web/panels.js) ─────────────────────────────────────
+  // panels.js renders ~/.floless/ui/extensions.json into the Dashboard view. It
+  // loads AFTER this file and reuses these seams instead of duplicating the fetch /
+  // report-viewer plumbing — the renderer composes nothing itself. Kept minimal on
+  // purpose; widen only when a panel block genuinely needs another seam.
+  window.flolessBridge = {
+    api,
+    // Open report HTML in the existing sandboxed HTML Viewer (same modal + srcdoc
+    // iframe the canvas report node uses — no new sandbox surface).
+    showHtmlReport(title, html) {
+      $reportTitle.textContent = title;
+      $reportSub.textContent = "Rendered from the run's output — never composed by the UI.";
+      showModal($reportModal);
+      paintReport(html);
+    },
+    // Refresh the footer requests counter after the Customize box queues a request.
+    loadRequests,
+    copyToClipboard,
+    instructionFor,
+  };
+
   // ── boot ──────────────────────────────────────────────────────────────────────
   // AWARE setup is orthogonal to the subscription, so surface the bootstrap state and
   // run the health poll REGARDLESS of license — and show "Setting up AWARE…" FIRST.

package/dist/web/index.html

@@ -33,6 +33,15 @@
         </span>
         <span class="name">FloLess</span>
         </div>
+        <!-- Workspace view switch (Canvas = the workflow topology; Dashboard = the
+             user's custom panels from ~/.floless/ui/extensions.json). The dot on
+             Dashboard lights when panels changed while the user was on Canvas. -->
+        <div class="view-toggle" id="view-toggle" role="group" aria-label="Workspace view">
+          <button type="button" class="view-btn active" data-view="canvas" aria-pressed="true">Canvas</button>
+          <button type="button" class="view-btn" data-view="dashboard" aria-pressed="false">Dashboard<span class="view-dot" id="dash-dot" hidden aria-label="Dashboard updated">●</span></button>
+        </div>
+        <!-- Shown only while custom panels exist; opens Undo · History · Reset. -->
+        <button type="button" id="ext-badge" class="ext-badge" hidden aria-haspopup="menu" aria-expanded="false" aria-controls="ext-menu" data-tip="Your dashboard is customized — undo, history, reset to default">Customized</button>
       </div>
       <div class="controls">
         <label id="wf-label">workflow</label>
@@ -51,10 +60,11 @@
         <button id="browse-btn" data-tip="Browse all installed agents">⊞ Agents</button>
         <button id="routines-btn" data-tip="Routines — run a workflow on a schedule or a live trigger">⏱ Routines</button>
         <span class="ctl-sep" aria-hidden="true"></span>
-        <span class="run-state" id="run-state"></span>
+        <span class="run-state" id="run-state" role="status" aria-live="polite"></span>
         <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>
+        <button id="stop-run-btn" class="run-stop-btn" type="button" aria-label="Stop the current run" data-tip="Stop the in-flight run (always reachable, even with the HTML Viewer closed)" hidden>■ Stop run</button>
       </div>
     </header>
 
@@ -78,11 +88,11 @@
       <div class="resize-handle resize-handle-right" data-resize="left" data-tip="Drag to resize · double-click to reset"></div>
     </aside>
 
-    <main class="canvas">
+    <main class="canvas" id="canvas-main">
       <div class="panel-label">
-        <span>Canvas</span>
+        <span id="center-panel-name">Canvas</span>
         <span class="label-end">
-          <span class="role">transparency layer · read-mostly</span>
+          <span class="role" id="center-panel-role">transparency layer · read-mostly</span>
         </span>
       </div>
       <div class="find-overlay" id="find-overlay">
@@ -100,6 +110,10 @@
           <button class="tb-btn" id="zoom-fit" data-tip="Fit the whole workflow to the screen (Home)">⤢</button>
         </div>
       </div>
+      <!-- Dashboard view — the user's custom panels (web/panels.js renders
+           ~/.floless/ui/extensions.json here; the canvas children hide via
+           .canvas.view-dashboard). Composed by the terminal AI, rendered by us. -->
+      <div class="dashboard" id="dashboard" hidden></div>
       <div class="hint" id="canvas-hint">Click any node to inspect. Star ★ a node to save it as a reusable Template.</div>
       <div class="fav-bar" id="fav-bar">
         <div class="fav-bar-label"><span class="star">★</span><span>Templates</span></div>
@@ -175,6 +189,35 @@
        #aware-update; its body is rendered per-open in aware.js. -->
   <div id="notes-popover" class="relnotes-popover" role="dialog" aria-modal="true" aria-label="Release notes" tabindex="-1" hidden></div>
 
+  <!-- Customized-badge menu — Undo · Reset · a read-only history list. Anchored
+       under the header badge; populated per-open in panels.js. -->
+  <div class="menu ext-menu" id="ext-menu" role="menu" hidden>
+    <button class="menu-item" id="ext-undo" role="menuitem">
+      <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg></span>
+      <span class="menu-label">Undo last change</span>
+    </button>
+    <button class="menu-item" id="ext-reset" role="menuitem">
+      <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg></span>
+      <span class="menu-label">Reset to default</span>
+    </button>
+    <div class="menu-divider"></div>
+    <div class="ext-history-head">History · restored by Undo, newest first</div>
+    <div class="ext-history" id="ext-history"></div>
+  </div>
+
+  <!-- Reset-to-default confirmation — destructive-looking but recoverable; Cancel
+       holds focus (Enter/Esc/backdrop all cancel), mirroring the routine delete. -->
+  <div class="modal-backdrop" id="ext-reset-modal">
+    <div class="modal">
+      <div class="modal-title">Reset dashboard to default</div>
+      <div class="modal-sub">Removes all custom panels and restores the FloLess default view. Your current layout is saved to history first — Undo (or your terminal AI) can bring it back.</div>
+      <div class="modal-actions">
+        <button id="ext-reset-cancel">Cancel</button>
+        <button id="ext-reset-confirm">Reset</button>
+      </div>
+    </div>
+  </div>
+
   <div class="menu" id="menu" role="menu">
     <button class="menu-item" data-action="open" role="menuitem">
       <span class="menu-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg></span>
@@ -546,5 +589,6 @@
   </div>
 <script src="app.js"></script>
 <script src="aware.js"></script>
+<script src="panels.js"></script>
 </body>
 </html>