pmx-canvas 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to `pmx-canvas` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## [0.4.2] - 2026-08-04
+
+### Added
+
+- Five new themes — `midnight`, `sepia`, `arctic`, `ember`, and `forest` —
+  alongside `dark`, `light`, and `high-contrast`, selectable from a new theme
+  picker in the toolbar, via `--theme=...`, or `PMX_CANVAS_THEME`.
+- The toolbar now collapses on narrow screens and mobile into a single compact
+  bar with a "⋯" menu holding every secondary action as labeled touch-friendly
+  rows, replacing the wrapped two-bar layout.
+- Amp orbs are auto-detected: when the server runs with `AMP_ORB` set, the
+  embedded canvas skips the (there-unreliable) iframe probe and uses `srcdoc`
+  mode directly.
+
+### Changed
+
+- Refreshed the bundled skill's accuracy: tool tables verified against the
+  live 22-tool MCP surface, stale composite counts corrected, and the browser
+  guidance now documents the toolbar theme picker and the narrow-screen More
+  menu.
+
+### Fixed
+
+- HTML surfaces now inline their theme stylesheet instead of linking it, so
+  srcdoc-rendered surfaces in nested-iframe hosts render styled instead of
+  blank (dark-on-dark).
+
+## [0.4.1] - 2026-08-04
+
+### Added
+
+- Iframe-backed nodes (HTML, graph, json-render, MCP apps) now render inside
+  nested-iframe hosts like Amp orb portals: the canvas probes at boot whether
+  the embedding context loads iframe `src` URLs at all, and falls back to
+  fetching same-origin surfaces and rendering them inline via `srcdoc` when it
+  does not. Force a mode with `/workbench?iframe-mode=srcdoc` (or `=src`).
+
+### Fixed
+
+- Ext-app nodes now survive a daemon restart without a full panel reload
+  (Finding S): the browser revalidates its frame-document URLs on every
+  reconnect and automatically re-mints them against the new server process
+  when they have gone stale.
+- Best-effort mitigation for residual black ext-app tiles in WebKit host
+  panels (Finding N): after an app finishes booting, the canvas briefly nudges
+  the iframe's layout size so WebKit must re-rasterize the frame — the same
+  mechanism as the manual enlarge-then-close unstick, without the reload. The
+  nudge is recorded as `repaint-nudge` in the ext-app recovery trail.
+
 ## [0.4.0] - 2026-08-04
 
 ### Breaking
@@ -2831,6 +2880,8 @@ otherwise have to discover by trial and error.
 - Regression coverage for snapshot flat-`id` aliases on both MCP and
   HTTP surfaces, plus async / top-level-`await` WebView script bodies.
 
+[0.4.2]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.2
+[0.4.1]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.1
 [0.4.0]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.0
 [0.3.4]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.3.4
 [0.3.3]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.3.3

package/Readme.md

@@ -144,10 +144,15 @@ surfaces (the core never imports a host SDK).
   built-in browser pane alongside the PMX MCP server, same zero-adapter recipe
   as Codex: open `http://localhost:4313/workbench` in the app's browser and the
   live board, pins, and Ghost Cursor all work in-panel.
-- **Amp orb portals** (and other buffering proxies) — the canvas detects when
-  the live event stream is being buffered by the proxy and automatically
-  switches to a polling transport, so the board boots and stays live through
-  the portal with no proxy shims (`/workbench?transport=poll` forces it).
+- **Amp orb portals** (and other buffering proxies / nested-iframe embeds) —
+  the canvas detects when the live event stream is being buffered by the proxy
+  and automatically switches to a polling transport, so the board boots and
+  stays live through the portal with no proxy shims
+  (`/workbench?transport=poll` forces it). It also detects when the nested
+  iframe embed blocks `src`-URL iframes entirely and renders HTML, graph,
+  json-render, and app surfaces inline via `srcdoc` instead
+  (`?iframe-mode=srcdoc` forces it), so iframe-backed nodes work in the portal
+  too.
 
 The contract is host-agnostic, so a new host plugs in the same way: map its
 hooks, canvas, and session APIs onto PMX's AX primitives — no core changes.

package/dist/canvas/global.css

@@ -171,6 +171,281 @@
   --c-annotation: #ffff00;
 }
 
+:root[data-theme="midnight"] {
+  /* ── Core palette (midnight · deep indigo night) ─────────── */
+  --c-bg: #0A0D1C;
+  --c-panel: #12172E;
+  --c-panel-soft: #0D1224;
+  --c-line: #232B4A;
+  --c-text: #E6E9F7;
+  --c-text-soft: #C6CCE8;
+  --c-muted: #8D96BC;
+  --c-dim: #5B6383;
+  --c-accent: #8B96FF;
+  --c-ok: #34D399;
+  --c-warn: #F5C452;
+  --c-warn-alt: #FFB300;
+  --c-danger: #FF6B8A;
+  --c-purple: #B388FF;
+  --c-thinking: #B388FF;
+  --c-subagent: #22D3EE;
+  --c-input-bg: #0D1224;
+  --c-dot-grid: rgba(139, 150, 255, 0.08);
+  --c-panel-overlay: rgba(10, 13, 28, 0.6);
+  --c-panel-glass: rgba(18, 23, 46, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(139, 150, 255, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(139, 150, 255, 0.08);
+  --c-accent-10: rgba(139, 150, 255, 0.1);
+  --c-accent-12: rgba(139, 150, 255, 0.12);
+  --c-accent-15: rgba(139, 150, 255, 0.15);
+  --c-accent-25: rgba(139, 150, 255, 0.25);
+  --c-accent-30: rgba(139, 150, 255, 0.3);
+  --c-accent-40: rgba(139, 150, 255, 0.4);
+  --c-ok-10: rgba(52, 211, 153, 0.1);
+  --c-ok-12: rgba(52, 211, 153, 0.12);
+  --c-ok-20: rgba(52, 211, 153, 0.2);
+  --c-ok-25: rgba(52, 211, 153, 0.25);
+  --c-warn-10: rgba(245, 196, 82, 0.1);
+  --c-warn-12: rgba(245, 196, 82, 0.12);
+  --c-warn-15: rgba(245, 196, 82, 0.15);
+  --c-warn-20: rgba(245, 196, 82, 0.2);
+  --c-warn-22: rgba(245, 196, 82, 0.22);
+  --c-warn-30: rgba(245, 196, 82, 0.3);
+  --c-warn-60: rgba(245, 196, 82, 0.6);
+  --c-danger-12: rgba(255, 107, 138, 0.12);
+  --c-line-30: rgba(35, 43, 74, 0.3);
+  --c-contrast-fg: #0A0D1C;
+  --c-accent-hover: #A3ACFF;
+  --c-warn-hover: #F7D06E;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #EDEDF7;
+}
+
+:root[data-theme="sepia"] {
+  /* ── Core palette (sepia · warm amber paper) ─────────────── */
+  --c-bg: #F2E7D5;
+  --c-panel: #EBDCC2;
+  --c-panel-soft: #E8D8BC;
+  --c-line: #D3C1A0;
+  --c-text: #2E2416;
+  --c-text-soft: #554833;
+  --c-muted: #77664C;
+  --c-dim: #978870;
+  --c-accent: #B4632C;
+  --c-ok: #3E7D4F;
+  --c-warn: #A97B1E;
+  --c-warn-alt: #8F6A0D;
+  --c-danger: #B3402E;
+  --c-purple: #8456B0;
+  --c-thinking: #8456B0;
+  --c-subagent: #0E7C7B;
+  --c-input-bg: #F7EEDD;
+  --c-dot-grid: rgba(46, 36, 22, 0.08);
+  --c-panel-overlay: rgba(242, 231, 213, 0.88);
+  --c-panel-glass: rgba(235, 220, 194, 0.88);
+  --c-shadow: rgba(46, 36, 22, 0.08);
+  --c-shadow-heavy: rgba(46, 36, 22, 0.16);
+  --c-glow-accent: rgba(180, 99, 44, 0.12);
+  --c-surface-hover: rgba(46, 36, 22, 0.06);
+  --c-surface-subtle: rgba(46, 36, 22, 0.03);
+  --c-surface-th: rgba(46, 36, 22, 0.04);
+  --c-accent-8: rgba(180, 99, 44, 0.08);
+  --c-accent-10: rgba(180, 99, 44, 0.1);
+  --c-accent-12: rgba(180, 99, 44, 0.12);
+  --c-accent-15: rgba(180, 99, 44, 0.15);
+  --c-accent-25: rgba(180, 99, 44, 0.25);
+  --c-accent-30: rgba(180, 99, 44, 0.3);
+  --c-accent-40: rgba(180, 99, 44, 0.4);
+  --c-ok-10: rgba(62, 125, 79, 0.1);
+  --c-ok-12: rgba(62, 125, 79, 0.12);
+  --c-ok-20: rgba(62, 125, 79, 0.2);
+  --c-ok-25: rgba(62, 125, 79, 0.25);
+  --c-warn-10: rgba(169, 123, 30, 0.1);
+  --c-warn-12: rgba(169, 123, 30, 0.12);
+  --c-warn-15: rgba(169, 123, 30, 0.15);
+  --c-warn-20: rgba(169, 123, 30, 0.2);
+  --c-warn-22: rgba(169, 123, 30, 0.22);
+  --c-warn-30: rgba(169, 123, 30, 0.3);
+  --c-warn-60: rgba(169, 123, 30, 0.6);
+  --c-danger-12: rgba(179, 64, 46, 0.12);
+  --c-line-30: rgba(211, 193, 160, 0.5);
+  --c-contrast-fg: #F2E7D5;
+  --c-accent-hover: #C4763F;
+  --c-warn-hover: #BD9037;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(46, 36, 22, 0.02));
+  --c-annotation: #2E2416;
+}
+
+:root[data-theme="arctic"] {
+  /* ── Core palette (arctic · cool slate + ice) ────────────── */
+  --c-bg: #20242E;
+  --c-panel: #2A2F3C;
+  --c-panel-soft: #242936;
+  --c-line: #3A4152;
+  --c-text: #E9EDF4;
+  --c-text-soft: #CBD3E1;
+  --c-muted: #939DB1;
+  --c-dim: #667082;
+  --c-accent: #7FC8DE;
+  --c-ok: #74C596;
+  --c-warn: #E8C476;
+  --c-warn-alt: #E0A93F;
+  --c-danger: #D9707C;
+  --c-purple: #B48EAD;
+  --c-thinking: #B48EAD;
+  --c-subagent: #6FD6C4;
+  --c-input-bg: #242936;
+  --c-dot-grid: rgba(127, 200, 222, 0.08);
+  --c-panel-overlay: rgba(32, 36, 46, 0.6);
+  --c-panel-glass: rgba(42, 47, 60, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(127, 200, 222, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(127, 200, 222, 0.08);
+  --c-accent-10: rgba(127, 200, 222, 0.1);
+  --c-accent-12: rgba(127, 200, 222, 0.12);
+  --c-accent-15: rgba(127, 200, 222, 0.15);
+  --c-accent-25: rgba(127, 200, 222, 0.25);
+  --c-accent-30: rgba(127, 200, 222, 0.3);
+  --c-accent-40: rgba(127, 200, 222, 0.4);
+  --c-ok-10: rgba(116, 197, 150, 0.1);
+  --c-ok-12: rgba(116, 197, 150, 0.12);
+  --c-ok-20: rgba(116, 197, 150, 0.2);
+  --c-ok-25: rgba(116, 197, 150, 0.25);
+  --c-warn-10: rgba(232, 196, 118, 0.1);
+  --c-warn-12: rgba(232, 196, 118, 0.12);
+  --c-warn-15: rgba(232, 196, 118, 0.15);
+  --c-warn-20: rgba(232, 196, 118, 0.2);
+  --c-warn-22: rgba(232, 196, 118, 0.22);
+  --c-warn-30: rgba(232, 196, 118, 0.3);
+  --c-warn-60: rgba(232, 196, 118, 0.6);
+  --c-danger-12: rgba(217, 112, 124, 0.12);
+  --c-line-30: rgba(58, 65, 82, 0.3);
+  --c-contrast-fg: #20242E;
+  --c-accent-hover: #9AD5E7;
+  --c-warn-hover: #EDD194;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #ECEFF4;
+}
+
+:root[data-theme="ember"] {
+  /* ── Core palette (ember · charcoal + vivid warm orange) ─── */
+  --c-bg: #0E0E11;
+  --c-panel: #17181D;
+  --c-panel-soft: #121317;
+  --c-line: #2A2C34;
+  --c-text: #ECEDF0;
+  --c-text-soft: #C9CCD4;
+  --c-muted: #8E939F;
+  --c-dim: #5F646E;
+  --c-accent: #FF5C2E;
+  --c-ok: #4CC38A;
+  --c-warn: #F5B944;
+  --c-warn-alt: #FFB300;
+  --c-danger: #F0566A;
+  --c-purple: #A78BFA;
+  --c-thinking: #A78BFA;
+  --c-subagent: #38BDF8;
+  --c-input-bg: #121317;
+  --c-dot-grid: rgba(255, 92, 46, 0.08);
+  --c-panel-overlay: rgba(14, 14, 17, 0.6);
+  --c-panel-glass: rgba(23, 24, 29, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(255, 92, 46, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(255, 92, 46, 0.08);
+  --c-accent-10: rgba(255, 92, 46, 0.1);
+  --c-accent-12: rgba(255, 92, 46, 0.12);
+  --c-accent-15: rgba(255, 92, 46, 0.15);
+  --c-accent-25: rgba(255, 92, 46, 0.25);
+  --c-accent-30: rgba(255, 92, 46, 0.3);
+  --c-accent-40: rgba(255, 92, 46, 0.4);
+  --c-ok-10: rgba(76, 195, 138, 0.1);
+  --c-ok-12: rgba(76, 195, 138, 0.12);
+  --c-ok-20: rgba(76, 195, 138, 0.2);
+  --c-ok-25: rgba(76, 195, 138, 0.25);
+  --c-warn-10: rgba(245, 185, 68, 0.1);
+  --c-warn-12: rgba(245, 185, 68, 0.12);
+  --c-warn-15: rgba(245, 185, 68, 0.15);
+  --c-warn-20: rgba(245, 185, 68, 0.2);
+  --c-warn-22: rgba(245, 185, 68, 0.22);
+  --c-warn-30: rgba(245, 185, 68, 0.3);
+  --c-warn-60: rgba(245, 185, 68, 0.6);
+  --c-danger-12: rgba(240, 86, 106, 0.12);
+  --c-line-30: rgba(42, 44, 52, 0.3);
+  --c-contrast-fg: #0E0E11;
+  --c-accent-hover: #FF7A52;
+  --c-warn-hover: #F7C868;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #F2F2F4;
+}
+
+:root[data-theme="forest"] {
+  /* ── Core palette (forest · deep green) ──────────────────── */
+  --c-bg: #0C1712;
+  --c-panel: #14231B;
+  --c-panel-soft: #101D16;
+  --c-line: #26402F;
+  --c-text: #E4EFE7;
+  --c-text-soft: #C4D6CA;
+  --c-muted: #8BA695;
+  --c-dim: #5D7566;
+  --c-accent: #5CCF8F;
+  --c-ok: #74D99F;
+  --c-warn: #E0B84F;
+  --c-warn-alt: #D9A421;
+  --c-danger: #E57373;
+  --c-purple: #A88FE0;
+  --c-thinking: #A88FE0;
+  --c-subagent: #4FD8CE;
+  --c-input-bg: #101D16;
+  --c-dot-grid: rgba(92, 207, 143, 0.08);
+  --c-panel-overlay: rgba(12, 23, 18, 0.6);
+  --c-panel-glass: rgba(20, 35, 27, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(92, 207, 143, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(92, 207, 143, 0.08);
+  --c-accent-10: rgba(92, 207, 143, 0.1);
+  --c-accent-12: rgba(92, 207, 143, 0.12);
+  --c-accent-15: rgba(92, 207, 143, 0.15);
+  --c-accent-25: rgba(92, 207, 143, 0.25);
+  --c-accent-30: rgba(92, 207, 143, 0.3);
+  --c-accent-40: rgba(92, 207, 143, 0.4);
+  --c-ok-10: rgba(116, 217, 159, 0.1);
+  --c-ok-12: rgba(116, 217, 159, 0.12);
+  --c-ok-20: rgba(116, 217, 159, 0.2);
+  --c-ok-25: rgba(116, 217, 159, 0.25);
+  --c-warn-10: rgba(224, 184, 79, 0.1);
+  --c-warn-12: rgba(224, 184, 79, 0.12);
+  --c-warn-15: rgba(224, 184, 79, 0.15);
+  --c-warn-20: rgba(224, 184, 79, 0.2);
+  --c-warn-22: rgba(224, 184, 79, 0.22);
+  --c-warn-30: rgba(224, 184, 79, 0.3);
+  --c-warn-60: rgba(224, 184, 79, 0.6);
+  --c-danger-12: rgba(229, 115, 115, 0.12);
+  --c-line-30: rgba(38, 64, 47, 0.3);
+  --c-contrast-fg: #0C1712;
+  --c-accent-hover: #7BDAA4;
+  --c-warn-hover: #E8C871;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #EDF5EF;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -669,6 +944,7 @@ body,
 }
 
 .toolbar-group {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -681,6 +957,127 @@ body,
   display: block;
 }
 
+/* ── Toolbar popover menus (theme picker + narrow-screen More menu) ── */
+.toolbar-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 224px;
+  max-height: min(70vh, 560px);
+  overflow-y: auto;
+  padding: 6px;
+  background: var(--c-panel-glass);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--c-line);
+  border-radius: var(--radius);
+  box-shadow: 0 18px 48px var(--c-shadow-heavy);
+}
+
+.toolbar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-soft);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.toolbar-menu-item:hover {
+  background: var(--c-surface-hover);
+  color: var(--c-text);
+  border-color: var(--c-line);
+}
+
+.toolbar-menu-item.active {
+  color: var(--c-accent);
+}
+
+.toolbar-menu-item svg {
+  flex-shrink: 0;
+}
+
+.toolbar-menu-check {
+  margin-left: auto;
+  color: var(--c-accent);
+}
+
+.toolbar-menu-separator {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--c-line);
+  flex-shrink: 0;
+}
+
+.toolbar-menu-heading {
+  padding: 6px 12px 2px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-dim);
+}
+
+.theme-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--c-line);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.theme-swatch-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.toolbar-more-glyph {
+  display: block;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* Wide screens: the full two-bar toolbar; the More trigger stays hidden. */
+.toolbar-collapsible {
+  display: contents;
+}
+
+.toolbar-more {
+  display: none;
+}
+
+/* Narrow screens / embedded panels: ONE compact bar (brand, status, view
+   controls) — every secondary control folds into the More menu instead of
+   wrapping into a second toolbar row. */
+@media (max-width: 900px) {
+  .toolbar-collapsible {
+    display: none;
+  }
+
+  .toolbar-actions-bar {
+    display: none;
+  }
+
+  .toolbar-more {
+    display: contents;
+  }
+}
+
 @media (max-width: 900px) {
   .toolbar-tooltip {
     min-width: 150px;