pmx-canvas 0.4.2 → 0.4.4

package/.github/extensions/pmx-canvas/extension.mjs

@@ -252,7 +252,10 @@ function escapeHtml(value) {
 
 function renderShell(instanceId, entry) {
     const status = entry.pmx?.ok ? "Connected" : "Not connected";
-    const frameSrc = entry.pmx?.baseUrl ? `${entry.pmx.baseUrl}/workbench` : "about:blank";
+    // theme=light is a client-local session default matching the Copilot app's
+    // light chrome — it never changes the server-global theme other clients
+    // see, and the in-panel theme picker still overrides it.
+    const frameSrc = entry.pmx?.baseUrl ? `${entry.pmx.baseUrl}/workbench?theme=light` : "about:blank";
     const error = entry.pmx?.error ? `<p class="error">${escapeHtml(entry.pmx.error)}</p>` : "";
     return `<!doctype html>
 <html>
@@ -731,7 +734,7 @@ const pmxCanvas = createCanvas({
             return {
                 title: "PMX Canvas",
                 status: "Connected",
-                url: `${pmx.baseUrl}/workbench`,
+                url: `${pmx.baseUrl}/workbench?theme=light`,
             };
         }
 

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to `pmx-canvas` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## [0.4.4] - 2026-08-06
+
+### Fixed
+
+- Amp orb pages now default straight to the polling transport instead of
+  waiting out the 3-second SSE watchdog behind the portal's buffering proxy —
+  on slow proxy days that wait could trip the "did not finish booting" modal.
+  `?transport=sse` still overrides for diagnosis.
+- When the SSE watchdog does fall back to polling mid-boot (non-orb buffering
+  proxies), the boot screen now shows "switching to polling" and restarts its
+  deadline instead of alarming while the fallback is already recovering.
+
+### Added
+
+- A ninth theme, `volt` — built from the Amp app's real palette (green-tinted
+  charcoal neutrals, warm green-white text, coral accent). `ember` stays
+  unchanged.
+- `pmx-canvas skills sync --yes` refreshes the pmx-canvas skill copies already
+  installed in the workspace — whatever agent layout owns them — by comparing
+  and replacing whole trees from the installed package; `--check` (or running
+  without `--yes`) reports drift and exits 1 without changing anything. A
+  directory whose `SKILL.md` identity doesn't match the bundled skill is
+  skipped, never replaced, and it never creates a copy where none is
+  installed. This automates the sync every release test cycle previously did
+  by hand.
+
+## [0.4.3] - 2026-08-05
+
+### Added
+
+- Host-default theming: open the workbench with `?theme=<name>` (or
+  `?theme=auto` to follow the host's light/dark appearance) and that panel
+  gets its own session-local theme without changing the server-global theme
+  other clients see. Picking a theme from the toolbar ends the override. The
+  bundled GitHub Copilot extension now opens its panel with `?theme=light`.
+
+### Changed
+
+- The `ember` theme was retuned to its intended look: neutral charcoal
+  surfaces, warm off-white text, and a vivid orange-red accent.
+
+### Fixed
+
+- The theme picker and More menus now open anchored to their buttons instead
+  of at the toolbar's right edge (0.4.2 report Finding T).
+- `POST /api/canvas/theme` now rejects unknown theme names with a 400 error
+  instead of silently keeping the previous theme.
+- An app node whose live session errors after a stressed reconnect (0.4.2
+  report Finding U, e.g. "MCP error -32001") now shows a soft
+  degraded-interactivity notice over its still-rendered saved content instead
+  of a red error banner.
+- Graph, json-render, and app nodes no longer stay blank after a refresh in
+  srcdoc mode until scrolled or expanded — inline documents now load eagerly
+  (lazy loading only applies in `src` mode, where it defers a real HTTP
+  request).
+- The npm package's `test` scripts now explain that the test suite is not
+  shipped instead of failing with a confusing "no test files" error.
+
 ## [0.4.2] - 2026-08-04
 
 ### Added
@@ -2880,6 +2938,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.4]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.4
+[0.4.3]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.3
 [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

package/Readme.md

@@ -130,7 +130,8 @@ surfaces (the core never imports a host SDK).
 
 - **GitHub Copilot app** — a committed project canvas extension
   (`.github/extensions/pmx-canvas/`) opens the live PMX workbench in a native
-  Copilot panel, injects pinned/focused AX context on prompt submission, and
+  Copilot panel (light-themed by default to match the app, via the `?theme=`
+  session override), injects pinned/focused AX context on prompt submission, and
   exposes actions for focus, session steering, work items, approval gates,
   review annotations, the AX timeline, and host-capability reporting. Install it
   into any repo with `pmx-canvas copilot install-extension` (`--dry-run` to
@@ -142,17 +143,26 @@ surfaces (the core never imports a host SDK).
   (MCP + in-app Browser) are exactly what the canvas requires.
 - **Claude Code desktop app** — the workbench runs in the desktop app's
   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 / 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.
+  as Codex: open `http://localhost:4313/workbench?theme=light` (or
+  `?theme=auto` to follow the app's appearance) in the app's browser and the
+  live board, pins, and Ghost Cursor all work in-panel — themed to match the
+  pane without changing what other clients see.
+- **AMPCode orbs + portal** — run the canvas as an orb service and view the
+  live workbench through the Amp portal (the `*.onamp.dev` URL ampcode.com
+  embeds for the thread). Zero configuration: orbs set `AMP_ORB` in the
+  service environment, and the canvas auto-adapts to the portal's constraints
+  — it defaults straight to the proxy-safe polling transport (the portal
+  proxy buffers the live event stream), and renders HTML, graph, json-render,
+  and app surfaces inline via `srcdoc` because the nested-iframe embed blocks
+  `src`-URL child iframes (`?transport=sse` and `?iframe-mode=src` override
+  either behavior when diagnosing). Non-orb buffering proxies get the same
+  protections via runtime detection: an SSE watchdog that falls back to
+  polling, and the boot-time iframe probe.
+  <!-- screenshot: docs/screenshots/amp-orb-portal.png — PMX Canvas live inside the Amp portal (to be added) -->
+
+Any other app browser (the ChatGPT desktop app, an IDE webview, …) works the
+same zero-adapter way: open the workbench URL, and add `?theme=<name|auto>` to
+give that panel its own session-local default theme.
 
 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.
@@ -239,6 +249,19 @@ Agents read pinned/focused context from `canvas://ax-context` /
 [`codex-app-adapter.md`](skills/pmx-canvas/references/codex-app-adapter.md) for
 the full workflow and live-test checklist.
 
+### Use inside AMPCode orbs and the Amp portal
+
+Amp needs no adapter either. Run `pmx-canvas` as an orb service (the orb sets
+`AMP_ORB` in the environment automatically) and open the workbench through the
+thread's portal URL. The canvas detects the orb and the portal's nested-iframe
+embed on its own: live updates arrive over the proxy-safe polling transport,
+and iframe-backed nodes (HTML, graph, json-render, web artifacts) render
+inline via `srcdoc` with their theme styling included. Cross-origin hosted
+apps (e.g. the hosted Excalidraw MCP app) cannot be inlined and may stay
+blocked by the portal embed — everything served from the canvas itself works.
+Debug overrides: `/workbench?transport=poll|sse` and
+`?iframe-mode=srcdoc|src`.
+
 ### Install the agent skill (recommended)
 
 The fastest way to get a working canvas is to install the `pmx-canvas` agent

package/dist/canvas/global.css

@@ -337,16 +337,16 @@
 }
 
 :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;
+  /* ── Core palette (ember · neutral charcoal + vivid orange-red) ─── */
+  --c-bg: #0B0B0C;
+  --c-panel: #161618;
+  --c-panel-soft: #101012;
+  --c-line: #29292C;
+  --c-text: #EDEBE6;
+  --c-text-soft: #CBC9C2;
+  --c-muted: #96948D;
+  --c-dim: #66655F;
+  --c-accent: #F34E1C;
   --c-ok: #4CC38A;
   --c-warn: #F5B944;
   --c-warn-alt: #FFB300;
@@ -354,23 +354,23 @@
   --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-input-bg: #101012;
+  --c-dot-grid: rgba(243, 78, 28, 0.08);
+  --c-panel-overlay: rgba(11, 11, 12, 0.6);
+  --c-panel-glass: rgba(22, 22, 24, 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-glow-accent: rgba(243, 78, 28, 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-accent-8: rgba(243, 78, 28, 0.08);
+  --c-accent-10: rgba(243, 78, 28, 0.1);
+  --c-accent-12: rgba(243, 78, 28, 0.12);
+  --c-accent-15: rgba(243, 78, 28, 0.15);
+  --c-accent-25: rgba(243, 78, 28, 0.25);
+  --c-accent-30: rgba(243, 78, 28, 0.3);
+  --c-accent-40: rgba(243, 78, 28, 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);
@@ -383,12 +383,12 @@
   --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-line-30: rgba(41, 41, 44, 0.3);
+  --c-contrast-fg: #0B0B0C;
+  --c-accent-hover: #FF6B3A;
   --c-warn-hover: #F7C868;
   --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
-  --c-annotation: #F2F2F4;
+  --c-annotation: #F2F0EB;
 }
 
 :root[data-theme="forest"] {
@@ -446,6 +446,61 @@
   --c-annotation: #EDF5EF;
 }
 
+:root[data-theme="volt"] {
+  /* ── Core palette (volt · green-tinted charcoal + coral) ── */
+  --c-bg: #0B0D0B;
+  --c-panel: #171A17;
+  --c-panel-soft: #111311;
+  --c-line: #272A27;
+  --c-text: #F6FFF5;
+  --c-text-soft: #CBD3CA;
+  --c-muted: #9CA49C;
+  --c-dim: #626962;
+  --c-accent: #F34E3F;
+  --c-ok: #52C880;
+  --c-warn: #E4C465;
+  --c-warn-alt: #FFB300;
+  --c-danger: #D67670;
+  --c-purple: #BC8FB4;
+  --c-thinking: #BC8FB4;
+  --c-subagent: #6CA0E0;
+  --c-input-bg: #111311;
+  --c-dot-grid: rgba(243, 78, 63, 0.08);
+  --c-panel-overlay: rgba(11, 13, 11, 0.6);
+  --c-panel-glass: rgba(23, 26, 23, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(243, 78, 63, 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(243, 78, 63, 0.08);
+  --c-accent-10: rgba(243, 78, 63, 0.1);
+  --c-accent-12: rgba(243, 78, 63, 0.12);
+  --c-accent-15: rgba(243, 78, 63, 0.15);
+  --c-accent-25: rgba(243, 78, 63, 0.25);
+  --c-accent-30: rgba(243, 78, 63, 0.3);
+  --c-accent-40: rgba(243, 78, 63, 0.4);
+  --c-ok-10: rgba(82, 200, 128, 0.1);
+  --c-ok-12: rgba(82, 200, 128, 0.12);
+  --c-ok-20: rgba(82, 200, 128, 0.2);
+  --c-ok-25: rgba(82, 200, 128, 0.25);
+  --c-warn-10: rgba(228, 196, 101, 0.1);
+  --c-warn-12: rgba(228, 196, 101, 0.12);
+  --c-warn-15: rgba(228, 196, 101, 0.15);
+  --c-warn-20: rgba(228, 196, 101, 0.2);
+  --c-warn-22: rgba(228, 196, 101, 0.22);
+  --c-warn-30: rgba(228, 196, 101, 0.3);
+  --c-warn-60: rgba(228, 196, 101, 0.6);
+  --c-danger-12: rgba(214, 118, 112, 0.12);
+  --c-line-30: rgba(39, 42, 39, 0.3);
+  --c-contrast-fg: #0B0D0B;
+  --c-accent-hover: #F8695B;
+  --c-warn-hover: #EBD087;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #F1F7F0;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -944,7 +999,6 @@ body,
 }
 
 .toolbar-group {
-  position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -953,6 +1007,14 @@ body,
   max-width: 100%;
 }
 
+/* Positioning parent for a toolbar popover menu. Every menu MUST live inside
+   one of these wrapped around its trigger — anchoring to a wider ancestor
+   opens the menu far from the button (0.4.2 report Finding T). */
+.toolbar-menu-anchor {
+  position: relative;
+  display: inline-flex;
+}
+
 .canvas-toolbar button svg {
   display: block;
 }
@@ -1074,7 +1136,9 @@ body,
   }
 
   .toolbar-more {
-    display: contents;
+    /* inline-flex (NOT contents): this span is also the positioning anchor
+       for the More menu — display:contents cannot anchor absolute children. */
+    display: inline-flex;
   }
 }