@floless/app 0.10.0 → 0.12.0

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

@@ -2483,3 +2483,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

@@ -22,6 +22,7 @@
   const $reportTitle = document.getElementById('report-title');
   const $reportSub = document.getElementById('report-sub');
   const $reportOpen = document.getElementById('report-open');
+  const $reportShare = document.getElementById('report-share');
   const $reportClose = document.getElementById('report-close');
 
   // One persistent array the inspect Execution tab reads; we mutate in place so
@@ -908,7 +909,9 @@
     try { await api('/api/run/stop', { method: 'POST' }); } catch { /* the run's own catch surfaces it */ }
   }
 
-  function paintReport(html) { $reportFrame.srcdoc = html; $reportOverlay.hidden = true; $reportOverlay.innerHTML = ''; }
+  // 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; }
 
   // 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.
@@ -925,6 +928,7 @@
       paintReport(cached.html);
     } else {
       $reportFrame.srcdoc = '';
+      $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>`;
       $reportSub.textContent = 'Double-click loads the last report; ▶ Run workflow generates a fresh one.';
@@ -948,6 +952,7 @@
     $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
+    $reportShare.hidden = true; // the frame is blank — only a painted report is shareable
     $reportOverlay.hidden = false;
     $reportOverlay.innerHTML = opts.debug
       ? `<div class="spinner"></div><div>Launching the .NET debugger for <code>${escapeHtml(nodeId)}</code> — a Windows picker will pop; choose your <strong>Visual Studio</strong> to attach to <code>aware-tekla.exe</code>, then step through. The report renders when you let it finish.</div>`
@@ -1022,6 +1027,7 @@
 
   function showCredentialReconnect(cred) {
     $reportFrame.srcdoc = '';
+    $reportShare.hidden = true;
     $reportOverlay.hidden = false;
     $reportOverlay.replaceChildren();
 
@@ -1267,6 +1273,51 @@
     window.open(url, '_blank');
     setTimeout(() => URL.revokeObjectURL(url), 30000);
   };
+
+  // Share the on-screen report → a hosted floless.io link. The local server does the
+  // upload (the bearer never reaches this page); we relay exactly the HTML the run
+  // produced and surface the returned link. Disabled while in flight (double-click =
+  // double upload), and the link lands in $reportSub as a real DOM anchor (mkEl, not
+  // markup) so a server-returned URL can never inject HTML.
+  $reportShare.onclick = async () => {
+    const cached = currentId && lastReportByApp.get(currentId);
+    // Share exactly what's on screen — the frame's srcdoc — so the link can never carry
+    // a different report than the one the user is looking at (e.g. another app's cache).
+    const html = $reportFrame.srcdoc;
+    if (!html || !cached) return; // button is hidden in this state; belt-and-braces
+    const app = apps.get(currentId);
+    const title = `${app ? app.displayName : currentId}${cached.label ? ' · ' + cached.label : ''}`;
+    $reportShare.disabled = true;
+    const prev = $reportShare.textContent;
+    $reportShare.textContent = 'Sharing…';
+    try {
+      const res = await api('/api/share-report', { method: 'POST', body: JSON.stringify({ title, html }) });
+      await navigator.clipboard.writeText(res.url).catch(() => {});
+      const link = mkEl('a', null, res.url.replace(/^https:\/\//, ''));
+      link.href = res.url;
+      link.target = '_blank';
+      link.rel = 'noopener';
+      $reportSub.replaceChildren(
+        document.createTextNode('Shared — '),
+        link,
+        document.createTextNode(' — copied to clipboard. Anyone with the link can view this frozen report.'),
+      );
+      showToast('Link copied to clipboard', 'ok');
+    } catch (e) {
+      const err = e && e.body && e.body.error;
+      const msg =
+        err === 'signed_out' ? 'Your FloLess sign-in has expired — sign in again to share reports.' :
+        err === 'no_subscription' || err === 'subscription required'
+          ? 'A FloLess subscription is required to share reports — sign in to continue.' :
+        err === 'rate_limited' ? 'Share limit reached (30 per hour) — try again in a few minutes.' :
+        err === 'too_large' ? 'Report is too large to share (over 5 MB).' :
+        'Couldn’t reach FloLess — check your connection and try sharing again.';
+      showToast(msg, 'warn');
+    } finally {
+      $reportShare.disabled = false;
+      $reportShare.textContent = prev;
+    }
+  };
   $promptSel.onchange = () => { loadApp($promptSel.value).catch(reportErr); };
 
   $compileBtn.onclick = async () => {
@@ -2615,6 +2666,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') {
@@ -2623,6 +2682,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') {
@@ -2778,6 +2838,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 '';
   }
 
@@ -2856,15 +2920,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>
@@ -3808,6 +3872,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');
@@ -3922,6 +3989,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>
@@ -78,11 +87,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 +109,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 +188,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>
@@ -246,12 +288,17 @@
           <div class="modal-sub" id="report-sub">Rendered from the live run — never composed by the UI.</div>
         </div>
         <div class="report-actions">
+          <button id="report-share" class="ghost" hidden data-tip="Share this report as a link anyone can view — hosted on floless.io">↗ Share</button>
           <button id="report-open" class="ghost" data-tip="Open the report in a new browser tab">↗ Open</button>
           <button id="report-close" data-tip="Close">×</button>
         </div>
       </div>
       <div class="report-stage" id="report-stage">
-        <iframe id="report-frame" sandbox="allow-same-origin" title="Report"></iframe>
+        <!-- allow-popups (+ escape): the report's own links — the "Made with FloLess"
+             badge above all — must open in a real, unsandboxed tab. Scripts stay
+             blocked and there is NO allow-same-origin: the report remains an opaque
+             origin with zero access to the app page. -->
+        <iframe id="report-frame" sandbox="allow-popups allow-popups-to-escape-sandbox" title="Report"></iframe>
         <div class="report-overlay" id="report-overlay" hidden></div>
       </div>
     </div>
@@ -541,5 +588,6 @@
   </div>
 <script src="app.js"></script>
 <script src="aware.js"></script>
+<script src="panels.js"></script>
 </body>
 </html>