pmx-canvas 0.4.2 → 0.4.4

package/src/cli/index.ts

@@ -66,6 +66,7 @@ const AGENT_COMMANDS = new Set([
   'validate',
   'serve',
   'copilot',
+  'skills',
 ]);
 
 const firstArg = args[0] ?? '';
@@ -253,7 +254,7 @@ Server options:
   --log-file=PATH  Daemon log file (default: ./.pmx-canvas/daemon-${port}.log)
   --pid-file=PATH  Optional daemon PID file (default: ./.pmx-canvas/daemon-${port}.pid)
   --wait-ms=MS   Health-check wait budget for daemon mode (default: 10000)
-  --theme=THEME  Theme: dark (default), light, high-contrast, midnight, sepia, arctic, ember, forest
+  --theme=THEME  Theme: dark (default), light, high-contrast, midnight, sepia, arctic, ember, forest, volt
   --webview-automation        Start a headless Bun.WebView automation session for /workbench
   --webview-backend=BACKEND   Bun.WebView backend: chrome or webkit
   --webview-width=PX          Automation WebView width (default: 1280)
@@ -343,6 +344,7 @@ Examples:
   pmx-canvas watch --events context-pin,move-end              Watch semantic deltas
   pmx-canvas clear --dry-run                                  Preview destructive op
   pmx-canvas copilot install-extension --dry-run             Preview Copilot adapter install
+  pmx-canvas skills sync --yes                               Refresh installed pmx-canvas skill copies in this workspace (--check to detect drift)
 `);
     process.exit(0);
   }

package/src/cli/shared.ts

@@ -163,6 +163,7 @@ function parseFlags(args: string[]): { positional: string[]; flags: Record<strin
     'permissions',
     'files',
     'ui-prompts',
+    'check',
   ]);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];

package/src/client/App.tsx

@@ -59,6 +59,7 @@ import {
   IconZoomIn,
   IconZoomOut,
 } from './icons';
+import { clearThemeOverride } from './state/theme-override';
 import { invalidateTokenCache } from './theme/tokens';
 import { MOD_KEY } from './utils/platform';
 import {
@@ -184,6 +185,9 @@ function Toolbar({
   }, [openMenu]);
 
   const applyTheme = (next: CanvasThemeName) => {
+    // An explicit pick ends any ?theme= session override (host default) and
+    // returns this client to the shared server-global theme it just saved.
+    clearThemeOverride();
     document.documentElement.setAttribute('data-theme', next);
     invalidateTokenCache();
     canvasTheme.value = next;
@@ -307,18 +311,27 @@ function Toolbar({
               <IconMinimap />
             </button>
           </ToolbarHint>
-          <ToolbarHint label="Theme" detail={`Current theme: ${CANVAS_THEME_META[activeTheme].label}`}>
-            <button
-              type="button"
-              onClick={() => setOpenMenu(openMenu === 'theme' ? null : 'theme')}
-              aria-label="Choose theme"
-              aria-haspopup="menu"
-              aria-expanded={openMenu === 'theme'}
-              style={{ color: openMenu === 'theme' ? 'var(--c-accent)' : undefined }}
-            >
-              {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
-            </button>
-          </ToolbarHint>
+          {/* Anchor wrapper: the theme menu must open under THIS control, not at
+              the toolbar-group's right edge (0.4.2 report Finding T). */}
+          <span class="toolbar-menu-anchor">
+            <ToolbarHint label="Theme" detail={`Current theme: ${CANVAS_THEME_META[activeTheme].label}`}>
+              <button
+                type="button"
+                onClick={() => setOpenMenu(openMenu === 'theme' ? null : 'theme')}
+                aria-label="Choose theme"
+                aria-haspopup="menu"
+                aria-expanded={openMenu === 'theme'}
+                style={{ color: openMenu === 'theme' ? 'var(--c-accent)' : undefined }}
+              >
+                {canvasThemeScheme(activeTheme) === 'dark' ? <IconSun /> : <IconMoon />}
+              </button>
+            </ToolbarHint>
+            {openMenu === 'theme' && (
+              <div class="toolbar-menu" role="menu" aria-label="Theme">
+                {themeMenuItems}
+              </div>
+            )}
+          </span>
           <ToolbarHint label="Snapshots" detail="Capture and restore canvas states" align="end">
             <button
               ref={snapshotBtnRef}
@@ -333,7 +346,7 @@ function Toolbar({
         </span>
 
         {/* Narrow screens: everything collapsed lives in this single menu. */}
-        <span class="toolbar-more">
+        <span class="toolbar-more toolbar-menu-anchor">
           <ToolbarHint label="More" detail="All canvas actions" align="end">
             <button
               type="button"
@@ -348,6 +361,65 @@ function Toolbar({
               </span>
             </button>
           </ToolbarHint>
+          {openMenu === 'more' && (
+            <div class="toolbar-menu" role="menu" aria-label="Canvas actions">
+              <button
+                type="button"
+                class="toolbar-menu-item"
+                onClick={menuAction(() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange()))}
+              >
+                <IconArrange />
+                <span>Arrange layout</span>
+              </button>
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleMinimap)}>
+                <IconMinimap />
+                <span>{minimapVisible ? 'Hide minimap' : 'Show minimap'}</span>
+              </button>
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleSnapshot)}>
+                <IconSnapshot />
+                <span>Snapshots</span>
+              </button>
+              <div class="toolbar-menu-separator" />
+              <button
+                type="button"
+                class="toolbar-menu-item"
+                onClick={menuAction(() => sendIntent('trace-toggle', { enabled: !isTraceOn }))}
+              >
+                <IconTrace />
+                <span>{isTraceOn ? 'Disable trace' : 'Enable trace'}</span>
+              </button>
+              {(isTraceOn || traceNodeCount > 0) && (
+                <button type="button" class="toolbar-menu-item" onClick={menuAction(() => sendIntent('trace-clear'))}>
+                  <IconClearTrace />
+                  <span>Clear trace</span>
+                </button>
+              )}
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleAnnotationMode)}>
+                <IconPen />
+                <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Annotate canvas'}</span>
+              </button>
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleAnnotationEraser)}>
+                <IconEraser />
+                <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Erase annotations'}</span>
+              </button>
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleTextAnnotation)}>
+                <IconTextAnnotation />
+                <span>{annotationTool === 'text' ? 'Stop text annotations' : 'Text annotations'}</span>
+              </button>
+              <div class="toolbar-menu-separator" />
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onOpenPalette)}>
+                <IconSearch />
+                <span>Search nodes and actions</span>
+              </button>
+              <button type="button" class="toolbar-menu-item" onClick={menuAction(onOpenShortcuts)}>
+                <IconShortcuts />
+                <span>Keyboard shortcuts</span>
+              </button>
+              <div class="toolbar-menu-separator" />
+              <div class="toolbar-menu-heading">Theme</div>
+              {themeMenuItems}
+            </div>
+          )}
         </span>
       </div>
 
@@ -443,71 +515,6 @@ function Toolbar({
           {countsLabel}
         </span>
       </div>
-
-      {openMenu === 'theme' && (
-        <div class="toolbar-menu" role="menu" aria-label="Theme">
-          {themeMenuItems}
-        </div>
-      )}
-      {openMenu === 'more' && (
-        <div class="toolbar-menu" role="menu" aria-label="Canvas actions">
-          <button
-            type="button"
-            class="toolbar-menu-item"
-            onClick={menuAction(() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange()))}
-          >
-            <IconArrange />
-            <span>Arrange layout</span>
-          </button>
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleMinimap)}>
-            <IconMinimap />
-            <span>{minimapVisible ? 'Hide minimap' : 'Show minimap'}</span>
-          </button>
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleSnapshot)}>
-            <IconSnapshot />
-            <span>Snapshots</span>
-          </button>
-          <div class="toolbar-menu-separator" />
-          <button
-            type="button"
-            class="toolbar-menu-item"
-            onClick={menuAction(() => sendIntent('trace-toggle', { enabled: !isTraceOn }))}
-          >
-            <IconTrace />
-            <span>{isTraceOn ? 'Disable trace' : 'Enable trace'}</span>
-          </button>
-          {(isTraceOn || traceNodeCount > 0) && (
-            <button type="button" class="toolbar-menu-item" onClick={menuAction(() => sendIntent('trace-clear'))}>
-              <IconClearTrace />
-              <span>Clear trace</span>
-            </button>
-          )}
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleAnnotationMode)}>
-            <IconPen />
-            <span>{annotationTool === 'pen' ? 'Stop annotating' : 'Annotate canvas'}</span>
-          </button>
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleAnnotationEraser)}>
-            <IconEraser />
-            <span>{annotationTool === 'eraser' ? 'Stop erasing' : 'Erase annotations'}</span>
-          </button>
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onToggleTextAnnotation)}>
-            <IconTextAnnotation />
-            <span>{annotationTool === 'text' ? 'Stop text annotations' : 'Text annotations'}</span>
-          </button>
-          <div class="toolbar-menu-separator" />
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onOpenPalette)}>
-            <IconSearch />
-            <span>Search nodes and actions</span>
-          </button>
-          <button type="button" class="toolbar-menu-item" onClick={menuAction(onOpenShortcuts)}>
-            <IconShortcuts />
-            <span>Keyboard shortcuts</span>
-          </button>
-          <div class="toolbar-menu-separator" />
-          <div class="toolbar-menu-heading">Theme</div>
-          {themeMenuItems}
-        </div>
-      )}
     </div>
   );
 }

package/src/client/canvas/CommandPalette.tsx

@@ -11,6 +11,7 @@ import {
 import { createNodeFromClient, saveCanvasTheme } from '../state/intent-bridge';
 import { TYPE_LABELS, type CanvasNodeState } from '../types';
 import { invalidateTokenCache } from '../theme/tokens';
+import { clearThemeOverride } from '../state/theme-override';
 
 import { MOD_KEY } from '../utils/platform';
 
@@ -174,6 +175,9 @@ export function CommandPalette({ onClose, onToggleMinimap }: { onClose: () => vo
         badge: 'THEME',
         action: () => {
           const next = canvasTheme.value === 'dark' ? 'light' : 'dark';
+          // An explicit pick ends any ?theme= session override, same as the
+          // toolbar picker — otherwise the session stays sticky-overridden.
+          clearThemeOverride();
           document.documentElement.setAttribute('data-theme', next);
           invalidateTokenCache();
           canvasTheme.value = next;

package/src/client/nodes/ExtAppFrame.tsx

@@ -528,9 +528,17 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
   latestToolInputRef.current = toolInput;
   latestToolResultRef.current = toolResult;
 
+  // Finding U (0.4.2 report): a stressed reconnect can leave sessionStatus
+  // 'error' (e.g. "MCP error -32001: Request timed out") while the cached app
+  // document still renders fine below. When content IS available, present the
+  // error as a degraded-interactivity notice, not a full-alarm banner over a
+  // working diagram.
+  const sessionErrorWithContent = sessionStatus === 'error' && typeof html === 'string' && html.length > 0;
   const sessionUnavailableMessage =
     sessionStatus === 'error'
-      ? (sessionError ?? 'Saved app session is unavailable. Reopen the app to restore interactivity.')
+      ? sessionErrorWithContent
+        ? `Live session unavailable — showing saved content. Reopen the app to restore interactivity.${sessionError ? ` (${sessionError})` : ''}`
+        : (sessionError ?? 'Saved app session is unavailable. Reopen the app to restore interactivity.')
       : 'Reconnecting saved app session...';
 
   const flushToolResult = (bridge: AppBridge | null): Promise<void> | null => {
@@ -1040,9 +1048,12 @@ export function ExtAppFrame({ node, expanded = false }: { node: CanvasNodeState;
           style={{
             padding: '6px 10px',
             fontSize: '11px',
-            background: sessionStatus === 'error' ? 'var(--c-danger-12)' : 'var(--c-warn-10)',
-            color: sessionStatus === 'error' ? 'var(--c-danger)' : 'var(--c-warn)',
-            borderBottom: `1px solid ${sessionStatus === 'error' ? 'var(--c-danger-12)' : 'var(--c-warn-15)'}`,
+            background:
+              sessionStatus === 'error' && !sessionErrorWithContent ? 'var(--c-danger-12)' : 'var(--c-warn-10)',
+            color: sessionStatus === 'error' && !sessionErrorWithContent ? 'var(--c-danger)' : 'var(--c-warn)',
+            borderBottom: `1px solid ${
+              sessionStatus === 'error' && !sessionErrorWithContent ? 'var(--c-danger-12)' : 'var(--c-warn-15)'
+            }`,
           }}
         >
           {sessionUnavailableMessage}

package/src/client/nodes/McpAppNode.tsx

@@ -3,6 +3,7 @@ import { HTML_SURFACE_PUSH_SOURCE } from '../../shared/ax-surface-protocol.js';
 import { canvasThemeScheme } from '../../shared/themes.js';
 import type { CanvasNodeState } from '../types';
 import { axSurfaceState, canvasTheme } from '../state/canvas-store';
+import { iframeMode } from '../state/iframe-mode';
 import { shouldContentFitIframeNode } from '../canvas/auto-fit';
 import { ExtAppFrame } from './ExtAppFrame';
 import { useAxSurfaceBridge } from './use-ax-surface-bridge';
@@ -185,7 +186,11 @@ function McpAppViewer({ node, expanded }: { node: CanvasNodeState; expanded: boo
         class="mcp-app-frame"
         sandbox="allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
         allow="clipboard-read; clipboard-write"
-        loading="lazy"
+        // Lazy loading only helps src mode (defers the HTTP request for
+        // off-screen nodes). In srcdoc mode the content is already inline —
+        // lazy would just delay PAINTING until the node scrolls near the
+        // viewport, which reads as "blank until opened" (Amp portal report).
+        loading={iframeMode.value === 'srcdoc' ? undefined : 'lazy'}
         onLoad={pushAxState}
         style={{ flex: 1, minHeight: 0, width: '100%' }}
         title={`MCP App: ${sourceServer}`}

package/src/client/state/sse-bridge.ts

@@ -26,6 +26,7 @@ import {
   workbenchConnectionEpoch,
 } from './canvas-store';
 import { fetchAxSurfaceState } from './intent-bridge';
+import { initSessionThemeOverride, themeOverrideActive } from './theme-override';
 import { DEFAULT_POSITIONS, makeNodeState } from './node-factory';
 import { invalidateTokenCache } from '../theme/tokens';
 import { resetAttentionBridge, syncAttentionFromSse } from './attention-bridge';
@@ -56,10 +57,17 @@ let pollSeq: number | null = null;
 let pollGeneration = 0;
 let sseFirstEventWatchdog: ReturnType<typeof setTimeout> | null = null;
 
-function forcedTransport(): 'poll' | 'sse' | null {
-  if (typeof location === 'undefined') return null;
+export function forcedTransport(): 'poll' | 'sse' | null {
+  if (typeof location === 'undefined' || typeof window === 'undefined') return null;
   const value = new URLSearchParams(location.search).get('transport');
-  return value === 'poll' || value === 'sse' ? value : null;
+  if (value === 'poll' || value === 'sse') return value;
+  // Amp orbs: the portal proxy buffers SSE, so auto mode burns the 3s
+  // watchdog before falling back — and on slow proxy days that trips the
+  // boot modal. The server stamps the orb flag into the page (canvasSpaHtml);
+  // go straight to the transport that works there. `?transport=sse` above
+  // still overrides for diagnosis.
+  if ((window as Window & { __PMX_AMP_ORB?: unknown }).__PMX_AMP_ORB === true) return 'poll';
+  return null;
 }
 
 // Maps responseNodeId → thread prompt node ID so response deltas/completions
@@ -399,7 +407,9 @@ function handleConnected(data: Record<string, unknown>): void {
   connectionStatus.value = 'connected';
   // Reconnect marker for holders of server-minted URLs (Finding S).
   workbenchConnectionEpoch.value += 1;
-  if (typeof data.theme === 'string') {
+  // A ?theme= session override (host-default theming) wins over the
+  // server-global theme for THIS client only.
+  if (typeof data.theme === 'string' && !themeOverrideActive()) {
     applyCanvasTheme(data.theme);
   }
   if (data.ledgerSummary) {
@@ -890,7 +900,7 @@ function handleTraceState(data: Record<string, unknown>): void {
 }
 
 function handleThemeChanged(data: Record<string, unknown>): void {
-  if (typeof data.theme === 'string') {
+  if (typeof data.theme === 'string' && !themeOverrideActive()) {
     applyCanvasTheme(data.theme);
   }
 }
@@ -1082,6 +1092,9 @@ function startPollingTransport(): () => void {
 }
 
 export function connectSSE(): () => void {
+  // Host-default theming: a ?theme= param applies before the first server
+  // frame so an embedding host panel never flashes the server-global theme.
+  initSessionThemeOverride(applyCanvasTheme);
   savedLayout = restoreLayout();
   ensureStatusNode();
   hasInitialServerLayout.value = false;
@@ -1118,6 +1131,10 @@ export function connectSSE(): () => void {
       sseFirstEventWatchdog = null;
       if (gotFirstEvent || eventSource !== source) return;
       console.warn('[sse-bridge] No SSE event within watchdog window — switching to polling transport.');
+      // Give the bootstrap card a fresh deadline for the fallback transport so
+      // the "did not finish booting" modal doesn't fire while polling is
+      // already recovering the boot (the inline bootstrap script listens).
+      window.dispatchEvent(new Event('pmx-canvas-boot-extend'));
       source.close();
       eventSource = null;
       startPollingTransport();

package/src/client/state/theme-override.ts

@@ -0,0 +1,83 @@
+/**
+ * Per-session theme override — host-default theming.
+ *
+ * Hosts that embed the workbench (the GitHub Copilot panel, the Claude Code
+ * desktop browser pane, ChatGPT-style app browsers, …) can open it with
+ * `?theme=<name>` or `?theme=auto` to give THEIR panel a fitting default
+ * without touching the server-global theme every other client sees. The
+ * override is client-local: server theme frames are ignored while it is
+ * active, and it ends the moment the user explicitly picks a theme from the
+ * picker (which then applies + saves globally as usual).
+ *
+ * `theme=auto` follows the host's prefers-color-scheme live, mapping to the
+ * built-in light/dark themes — so a light-mode host panel gets a light canvas
+ * by default and flips with the host appearance.
+ */
+import { type CanvasThemeName, isCanvasTheme } from '../../shared/themes.js';
+
+let active = false;
+// Latched when the user explicitly ends the override: the URL param survives
+// reconnects (connectSSE re-inits on every transport drop), but the user's
+// choice must stick for the page lifetime — only a reload re-activates.
+let userEnded = false;
+let schemeQuery: MediaQueryList | null = null;
+let schemeListener: (() => void) | null = null;
+
+export function themeOverrideActive(): boolean {
+  return active;
+}
+
+/** Test-only: reset the module state, including the page-lifetime latch. */
+export function resetThemeOverrideForTests(): void {
+  active = false;
+  userEnded = false;
+  detachSchemeListener();
+}
+
+/** The user picked a theme explicitly — the session override ends for good. */
+export function clearThemeOverride(): void {
+  active = false;
+  userEnded = true;
+  detachSchemeListener();
+}
+
+function detachSchemeListener(): void {
+  if (schemeQuery && schemeListener) {
+    schemeQuery.removeEventListener('change', schemeListener);
+  }
+  schemeQuery = null;
+  schemeListener = null;
+}
+
+export function sessionThemeParam(): CanvasThemeName | 'auto' | null {
+  // DOM-less callers (server-side rendering of the module graph, unit tests
+  // that import the sse-bridge without a DOM) have no override.
+  if (typeof window === 'undefined' || !window.location) return null;
+  const value = new URLSearchParams(window.location.search).get('theme');
+  if (value === 'auto') return 'auto';
+  return isCanvasTheme(value) ? value : null;
+}
+
+/**
+ * Activate the override from the URL (no-op without a valid `?theme=`).
+ * `apply` is the canvas theme applier (client-side only — never saved).
+ */
+export function initSessionThemeOverride(apply: (theme: CanvasThemeName) => void): void {
+  if (userEnded) return;
+  const param = sessionThemeParam();
+  if (!param) return;
+  // Re-init happens on every reconnect — replace any prior listener instead
+  // of accumulating one per reconnect cycle.
+  detachSchemeListener();
+  active = true;
+  if (param !== 'auto') {
+    apply(param);
+    return;
+  }
+  schemeQuery = window.matchMedia('(prefers-color-scheme: light)');
+  schemeListener = () => {
+    if (active && schemeQuery) apply(schemeQuery.matches ? 'light' : 'dark');
+  };
+  schemeListener();
+  schemeQuery.addEventListener('change', schemeListener);
+}

package/src/client/theme/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;
   }
 }