pmx-canvas 0.7.0 → 0.7.2

package/skills/pmx-canvas/references/installing-pmx-canvas.md

@@ -4,7 +4,7 @@ Use this reference when the `pmx-canvas` skill is installed but the `pmx-canvas`
 
 ## Prerequisites and version
 
-The examples pin **PMX Canvas 0.7.0**, which requires **Bun >=1.4.2** even when
+The examples pin **PMX Canvas 0.7.2**, which requires **Bun >=1.4.2** even when
 installed through npm: the CLI runs through Bun, not Node. Check `bun --version`
 first. If missing or older, follow the [Bun installation instructions](https://bun.sh/docs/installation)
 with the user's authorization. Ensure Bun is on the MCP host's PATH as well as the
@@ -17,11 +17,11 @@ in `SKILL.md`. Do not pair newer checkout guidance with an older runtime unknowi
 ## Install from npm
 
 ```bash
-npm install -g pmx-canvas@0.7.0
+npm install -g pmx-canvas@0.7.2
 pmx-canvas --version
 ```
 
-Without a global install, use `bunx pmx-canvas@0.7.0` in place of `pmx-canvas` in
+Without a global install, use `bunx pmx-canvas@0.7.2` in place of `pmx-canvas` in
 the commands below. Do not use unpinned `bunx pmx-canvas` for a version-specific check.
 
 ## Choose the workspace and target
@@ -91,7 +91,7 @@ discards empty env values, remove `PMX_CANVAS_URL` from its launch environment i
   "mcpServers": {
     "canvas": {
       "command": "bunx",
-      "args": ["pmx-canvas@0.7.0", "--mcp"],
+      "args": ["pmx-canvas@0.7.2", "--mcp"],
       "env": {
         "PMX_CANVAS_WORKSPACE_ROOT": "/absolute/path/to/project",
         "PMX_CANVAS_PORT": "14313",

package/skills/pmx-canvas/references/tours-and-recording.md

@@ -0,0 +1,69 @@
+# Tours and recording
+
+Tours use the existing board cards as presentation content. Interactive presentation and
+deterministic capture share this one stop model; recording does not create a second deck.
+
+## Author a tour
+
+Persist a tour with `canvas_view { action: "set-tour", tour: { stops: [...] } }` and read it with
+`canvas_view { action: "get-tour" }`. A stop has exactly one target:
+
+```json
+{
+  "stops": [
+    { "target": { "nodeId": "overview-group" }, "duration": 1.5, "padding": 60 },
+    { "target": { "nodeId": "detail-note" }, "duration": 2, "easing": "ease-in-out", "pullback": 0.7 },
+    { "target": { "viewport": { "x": 80, "y": 100, "scale": 0.5 } }, "duration": 1 }
+  ]
+}
+```
+
+- `nodeId` may identify a card or group. Its persisted position and size determine the camera.
+- An explicit viewport is `{ x, y, scale }`, with positive `scale`. Translation is screen-space:
+  `screen = world * scale + offset`.
+- `duration` is transition time in seconds (default 1; zero jumps). Valid values are 0–3600.
+- `padding` is screen pixels around a node target (default 40).
+- `easing` is `linear`, `ease-in-out` (default), or `ease-out`.
+- `pullback` is 0–4 (default 0). It zooms out during the move without changing either endpoint.
+- A tour contains at most 1000 stops.
+
+Open `/workbench?present=1` for chrome-free viewing. Right, Down, or Space advances; Left or Up
+goes back; Escape or **Exit presentation** exits. Right-drag pans and interrupts an ongoing
+transition without editing cards. Stops do not auto-advance. A missing node target reports an
+error and may be skipped. The presentation camera is local to that viewer while board content
+continues to update. Recording hides the exit control.
+
+Tours are board-scoped, persist with that board and its snapshots, participate in undo, and clear
+with the board. Setting `tour: null` resets to a derived tour: groups ordered by y, then x, then
+ID. A saved `{ "stops": [] }` intentionally has no stops; it does not enable group derivation.
+Preserve the tour of each board when working across boards and target the intended board before
+setting or reading it.
+
+## Capture prerequisites and behavior
+
+Start and verify the matching PMX daemon first: its `/health` workspace and version must match the
+installation and workspace used by the CLI/MCP host. Capture is a local CLI/file operation. It
+requires Bun with WebView support and Chrome (or `--chrome-path`); MP4 encoding additionally
+requires ffmpeg. Recording starts a separate Chrome session; it does not capture the native host's
+Browser pane. Use a new output path because existing output and frame paths are refused.
+
+Capture the saved or derived tour:
+
+```bash
+pmx-canvas record --mode deterministic --present --fps 30 --resolution 1920x1080 --output tour.mp4
+```
+
+Use `--tour-file tour.json` in deterministic mode to try the same model without changing the
+board. Resolution defaults to 1280x720 and FPS to 30 (valid 1–120). Deterministic mode resolves
+target geometry once and emits `max(1, ceil(duration * fps))` frames per stop, including each
+endpoint. Duplicate a stop to hold it. It makes camera timing deterministic, not iframe animation,
+late fonts/network assets, or concurrent board edits.
+
+Realtime mode instead needs one stopping rule: `--duration SECONDS` or `--stop-on-signal`. It
+samples the live board and repeats frames when capture is slow to preserve wall-clock duration.
+Capture has no audio and does not move other viewers' cameras or replace an existing automation
+session.
+
+An `.mp4` output uses ffmpeg/H.264. Frames and `recording.json` remain in `<output>.frames`; if
+ffmpeg is unavailable, the command reports and returns the PNG sequence directory. Any other
+output path is itself a PNG sequence directory. Encoding failures retain the frames and fail.

package/skills/pmx-canvas-testing/SKILL.md

@@ -182,8 +182,13 @@ reason to scope verification more narrowly.
   the object handed to the emitter — the envelope overwrites `sessionId` and `timestamp`.
 - Two-tab behaviour (human cursors, the edit lock) needs two browser contexts; name them with
   `/workbench?name=…` so assertions can target a cursor by its tag.
-- The Browser pane reports `visibility: hidden` and never fires rAF: drags, drop pills, edge
-  previews and presence animations only work under Playwright. Use the pane for static checks.
+- Do not categorically infer Browser-pane behavior from the host name. Probe the actual surface:
+  record `document.visibilityState`, race a `requestAnimationFrame` callback against a short
+  timeout, and capture a screenshot of the claimed rendered state. If hidden or rAF times out,
+  use the pane only for static checks and run animation/drag/drop/edge-preview assertions in
+  Playwright. If the probe succeeds, it is still scheduling evidence rather than paint proof;
+  retain screenshot evidence for a visual pass, especially for iframe-backed or native-host
+  surfaces.
 - Selection is shift-click on the node BODY (the titlebar drags); groups have no ports and
   their drag handle is the edge row; the selection bar and command bar both float bottom-center
   (the selection bar lifts during a session).

package/src/cli/commands/apps.ts

@@ -101,7 +101,7 @@ cmd(
     'cat ops.json | pmx-canvas batch --stdin',
   ],
   async (args) => {
-    const { flags } = parseFlags(args);
+    const { flags } = parseFlags(args, { valueFlags: ['json'] });
     if (flags.help || flags.h) return showCommandHelp('batch');
 
     let raw = '';

package/src/cli/commands/backup.ts

@@ -12,12 +12,23 @@ import {
   showCommandHelp,
 } from '../shared.js';
 
+function backupArgs(command: string, args: string[], supported: string[]) {
+  const parsed = parseFlags(args, { boolFlags: ['off'] });
+  const allowed = new Set(['help', 'h', ...supported]);
+  const unknown = Object.keys(parsed.flags).find((flag) => !allowed.has(flag));
+  if (unknown) die(`Unknown ${command} flag: --${unknown}`, `Run: pmx-canvas ${command} --help`);
+  for (const name of ['to', 'keep', 'every']) {
+    if (parsed.flags[name] === true) die(`Missing value for --${name}`, `Run: pmx-canvas ${command} --help`);
+  }
+  return parsed;
+}
+
 cmd(
   'backup',
   'Back up every board to a folder (safe while the server runs)',
   ['pmx-canvas backup', 'pmx-canvas backup --to ~/Backups/pmx --keep 14'],
   async (args) => {
-    const { flags } = parseFlags(args);
+    const { flags } = backupArgs('backup', args, ['to', 'keep']);
     if (flags.help || flags.h) return showCommandHelp('backup');
     const to = getStringFlag(flags, 'to');
     const keep = optionalNumberFlag(flags, 'keep', 'pmx-canvas backup --keep <n>');
@@ -26,7 +37,7 @@ cmd(
 );
 
 cmd('backup status', 'Show the backup folder, schedule and backups', ['pmx-canvas backup status'], async (args) => {
-  const { flags } = parseFlags(args);
+  const { flags } = backupArgs('backup status', args, []);
   if (flags.help || flags.h) return showCommandHelp('backup status');
   output(await invokeOperation('backup.status', {}));
 });
@@ -36,7 +47,7 @@ cmd(
   'Back up on a schedule, run by the server',
   ['pmx-canvas backup schedule --every 24h --keep 14 --to ~/Backups/pmx', 'pmx-canvas backup schedule --off'],
   async (args) => {
-    const { flags } = parseFlags(args);
+    const { flags } = backupArgs('backup schedule', args, ['every', 'off', 'to', 'keep']);
     if (flags.help || flags.h) return showCommandHelp('backup schedule');
     const every = flags.off ? 'off' : getStringFlag(flags, 'every');
     if (!every) die('Usage: pmx-canvas backup schedule --every <30m|24h|7d> [--keep <n>] [--to <folder>] | --off');
@@ -57,7 +68,7 @@ cmd(
   'Replace every board with a backup (the current file is kept as canvas.db.before-restore)',
   ['pmx-canvas restore ~/Backups/pmx/canvas-20260927T090000000Z.db'],
   async (args) => {
-    const { positional, flags } = parseFlags(args);
+    const { positional, flags } = backupArgs('restore', args, []);
     if (flags.help || flags.h) return showCommandHelp('restore');
     const file = positional[0];
     if (!file) die('Usage: pmx-canvas restore <backup-file>');

package/src/cli/commands/boards.ts

@@ -1,5 +1,4 @@
-// Board commands (plan 012): board list, board create, board rename, board category.
-// Opening, switching and deleting boards is the human's, in the workbench.
+// Board commands. Opening changes the shared workbench; deletion remains human-only.
 
 import { cmd, die, getStringFlag, invokeOperation, output, parseFlags, showCommandHelp } from '../shared.js';
 
@@ -9,6 +8,20 @@ cmd('board list', 'List boards, most recently opened first', ['pmx-canvas board
   output(await invokeOperation('board.list', {}));
 });
 
+cmd(
+  'board open',
+  'Open a board in the shared workbench, or return Home with --home',
+  ['pmx-canvas board open <board-id>', 'pmx-canvas board open --home'],
+  async (args) => {
+    const { positional, flags } = parseFlags(args, { boolFlags: ['home'] });
+    if (flags.help || flags.h) return showCommandHelp('board open');
+    if (positional.length > 1 || (flags.home ? positional.length !== 0 : !positional[0])) {
+      die('Usage: pmx-canvas board open <board-id> | --home');
+    }
+    output(await invokeOperation('board.open', { id: flags.home ? null : positional[0] }));
+  },
+);
+
 cmd(
   'board from',
   'Preview or create a board from selected cards on another board',
@@ -35,7 +48,7 @@ cmd(
 
 cmd(
   'board create',
-  'Create an empty board (the human opens it in the workbench)',
+  'Create an empty board (use board open with its returned id before writing)',
   ['pmx-canvas board create "Q4 planning"', 'pmx-canvas board create "Q4 planning" --category Planning'],
   async (args) => {
     const { positional, flags } = parseFlags(args);

package/src/cli/commands/export.ts

@@ -2,7 +2,7 @@
 
 import { copyFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { cmd, getStringFlag, invokeOperation, output, parseFlags, showCommandHelp } from '../shared.js';
+import { cmd, die, getStringFlag, invokeOperation, output, parseFlags, showCommandHelp } from '../shared.js';
 
 cmd(
   'export',
@@ -11,15 +11,22 @@ cmd(
     'pmx-canvas export',
     'pmx-canvas export --board board-abc123 --out ~/Desktop/okrs.html',
     'pmx-canvas export --include-files',
+    'pmx-canvas export --include-derived-text',
   ],
   async (args) => {
-    const { flags } = parseFlags(args);
+    const { flags } = parseFlags(args, { boolFlags: ['include-files', 'include-derived-text'] });
+    const supportedFlags = new Set(['help', 'h', 'board', 'out', 'include-files', 'include-derived-text']);
+    const unknownFlag = Object.keys(flags).find((flag) => !supportedFlags.has(flag));
+    if (unknownFlag) {
+      die(`Unknown export flag: --${unknownFlag}`, 'Run: pmx-canvas export --help');
+    }
     if (flags.help || flags.h) return showCommandHelp('export');
     const board = getStringFlag(flags, 'board');
     const out = getStringFlag(flags, 'out');
     const result = (await invokeOperation('export.run', {
       ...(board ? { board } : {}),
       includeFiles: flags['include-files'] === true,
+      includeDerivedText: flags['include-derived-text'] === true,
     })) as { path: string };
     if (out) {
       copyFileSync(result.path, resolve(out));

package/src/cli/daemon.ts

@@ -49,14 +49,24 @@ export function isProcessRunning(pid: number): boolean {
 }
 
 /**
- * Whether pid's command line contains `needle`. Returns null when `ps` cannot
- * answer (no such process, unsupported platform) — callers fall back to the
- * plain liveness signal.
+ * Whether pid's command line contains `needle`. Returns null when the OS probe
+ * cannot answer (no such process or unavailable command). Stop must not treat
+ * an unknown identity as permission to signal a live process.
  */
 export function processCommandMatches(pid: number, needle: string): boolean | null {
   if (!Number.isInteger(pid) || pid <= 0) return null;
   try {
-    const command = execFileSync('ps', ['-o', 'command=', '-p', String(pid)], {
+    const executable = process.platform === 'win32' ? 'powershell.exe' : 'ps';
+    const args =
+      process.platform === 'win32'
+        ? [
+            '-NoProfile',
+            '-NonInteractive',
+            '-Command',
+            `(Get-CimInstance Win32_Process -Filter 'ProcessId = ${pid}').CommandLine`,
+          ]
+        : ['-o', 'command=', '-p', String(pid)];
+    const command = execFileSync(executable, args, {
       encoding: 'utf-8',
       stdio: ['ignore', 'pipe', 'ignore'],
     }).trim();
@@ -69,8 +79,8 @@ export function processCommandMatches(pid: number, needle: string): boolean | nu
 
 /**
  * Liveness with a PID-recycling guard: the pid must be alive AND its command
- * line must still look like our daemon (unless `ps` is unavailable, in which
- * case the plain liveness signal wins).
+ * line must still look like our daemon. Status falls back to plain liveness
+ * when the command probe is unavailable; stop requires a verified match.
  */
 export function isOwnDaemonProcess(pid: number, entryNeedle: string): boolean {
   if (!isProcessRunning(pid)) return false;
@@ -439,7 +449,27 @@ export async function stopServeDaemon(
     process.exit(1);
   }
 
-  if (!isOwnDaemonProcess(pid, options.entry)) {
+  const commandMatches = processCommandMatches(pid, options.entry);
+  if (commandMatches !== true) {
+    if (isProcessRunning(pid)) {
+      outputJson({
+        ok: false,
+        daemon: true,
+        stopped: false,
+        running: responsive,
+        error:
+          commandMatches === false
+            ? `PID ${pid} is live but does not belong to this installation. The pid file was preserved.`
+            : `PID ${pid} is live but its installation could not be verified. The pid file was preserved.`,
+        hint: 'Use the matching installation and workspace to stop the daemon; verify the process before removing its pid file.',
+        pid,
+        url,
+        healthUrl,
+        logFile: options.logFile,
+        pidFile: options.pidFile,
+      });
+      process.exit(1);
+    }
     removePidFile(options.pidFile);
     outputJson({
       ok: true,

package/src/cli/shared.ts

@@ -133,7 +133,8 @@ async function invokeOperation(name: string, input: Record<string, unknown>): Pr
 // ── Flag parsing ─────────────────────────────────────────────
 
 /**
- * `options.boolFlags` marks flags that are boolean FOR THIS COMMAND. Value
+ * `options.boolFlags` marks flags that are boolean FOR THIS COMMAND, while
+ * `options.valueFlags` overrides a globally boolean flag for one command. Value
  * flags consume the next token verbatim (so a unified diff beginning with
  * `--- a/file` survives), which makes a flag that is boolean here and
  * value-taking elsewhere ambiguous — `--summary` is boolean in `history` /
@@ -144,7 +145,7 @@ async function invokeOperation(name: string, input: Record<string, unknown>): Pr
  */
 function parseFlags(
   args: string[],
-  options: { boolFlags?: readonly string[] } = {},
+  options: { boolFlags?: readonly string[]; valueFlags?: readonly string[] } = {},
 ): { positional: string[]; flags: Record<string, string | true> } {
   const positional: string[] = [];
   const flags: Record<string, string | true> = {};
@@ -187,6 +188,7 @@ function parseFlags(
     'check',
     'skip-mcp',
   ]);
+  for (const flag of options.valueFlags ?? []) BOOL_FLAGS.delete(flag);
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
     // Conventional end-of-flags separator: the rest is positional, never flags.
@@ -847,6 +849,13 @@ function showCommandHelp(name: string): void {
     console.log('\nAlias:');
     console.log('  Equivalent to: pmx-canvas external-app add --kind excalidraw ...');
   }
+  if (name === 'export') {
+    console.log('\nOptions:');
+    console.log('  --board <id>               Export this board instead of the open board');
+    console.log('  --out <path>               Copy the export to this path');
+    console.log('  --include-files            Include local file contents (default: excluded)');
+    console.log('  --include-derived-text     Include imported document text (default: excluded)');
+  }
   console.log('');
 }
 

package/src/client/App.tsx

@@ -233,7 +233,6 @@ export function App() {
         if (ids.length === 0) return;
         e.preventDefault();
         for (const id of ids) {
-          removeNode(id);
           void removeNodeFromClient(id).catch((error) => logAppError('delete', error));
         }
         clearSelection();

package/src/client/canvas/AttentionHistory.tsx

@@ -5,6 +5,7 @@ import {
   closeAttentionHistory,
   openAttentionHistory,
 } from '../state/attention-store';
+import { IconClose } from '../icons';
 
 function formatTimestamp(timestamp: number): string {
   return new Date(timestamp).toLocaleTimeString([], {
@@ -73,7 +74,7 @@ export function AttentionHistory() {
           aria-label="Collapse changes panel"
           title="Collapse"
         >
-          ×
+          <IconClose />
         </button>
       </div>
       <div class="attention-history-list">

package/src/client/canvas/AttentionToast.tsx

@@ -9,11 +9,13 @@ export function AttentionToast() {
       type="button"
       class={`attention-toast attention-tone-${toast.tone}`}
       onClick={openAttentionHistory}
-      aria-label={`${toast.title} — open change history`}
-      title={toast.detail || toast.title}
+      aria-label={`${toast.title}${toast.detail ? `: ${toast.detail}` : ''} — open change history`}
     >
       <span class="attention-toast-dot" aria-hidden="true" />
-      <span class="attention-toast-title">{toast.title}</span>
+      <span class="attention-toast-copy">
+        <span class="attention-toast-title">{toast.title}</span>
+        {toast.detail && <span class="attention-toast-detail">{toast.detail}</span>}
+      </span>
     </button>
   );
 }

package/src/client/canvas/BoardSwitcher.tsx

@@ -1,7 +1,7 @@
 import { render, type VNode } from 'preact';
 import { useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { activeBoard, activeBoardId, boardList, boardsLoaded, openBoard } from '../state/boards-store';
-import { IconLogo, IconArrange } from '../icons';
+import { IconLogo, IconArrange, IconChevronDown, IconPlus } from '../icons';
 import { promptNewBoard } from './HomeView';
 
 const RECENT_LIMIT = 8;
@@ -76,7 +76,7 @@ export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
       >
         <span class="board-switcher-name">{label}</span>
         <span class="board-switcher-caret" aria-hidden="true">
-          ▾
+          <IconChevronDown />
         </span>
       </button>
       {open && anchor && (
@@ -130,7 +130,7 @@ export function BoardSwitcher({ fallbackName }: { fallbackName: string }) {
                 }}
               >
                 <span class="board-switcher-icon" aria-hidden="true">
-                  +
+                  <IconPlus size={18} />
                 </span>
                 New board…
               </button>

package/src/client/canvas/CanvasNode.tsx

@@ -38,7 +38,16 @@ import { KIND_COLOR } from './kind-colors';
 import { reportHumanGrab, takeOverNode, yieldedNodes } from '../state/human-store';
 import { AxStepControls } from '../nodes/AxStepControls';
 import { canOpenAsSite, openNodeAsSite } from '../nodes/surface-url';
-import { getNodeIcon } from '../icons';
+import {
+  getNodeIcon,
+  IconChevronRight,
+  IconChevronDown,
+  IconClose,
+  IconMore,
+  IconExternalLink,
+  IconExpand,
+  IconSparkle,
+} from '../icons';
 import { EXPANDABLE_TYPES, TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
 import { AUTO_FIT_TITLEBAR_HEIGHT, computeAutoFitHeight, shouldAutoFitNode } from './auto-fit';
@@ -472,7 +481,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               toggleCollapsed(node.id);
             }}
           >
-            ▸
+            <IconChevronRight size={14} />
           </button>
           <div class="group-chip-text">
             <div class="group-chip-name">{title}</div>
@@ -591,7 +600,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 setGroupMenuOpen((open) => !open);
               }}
             >
-              ⋯
+              <IconMore size={14} />
             </button>
             {groupMenuOpen && (
               <div class="group-menu" role="menu" onPointerDown={(e) => e.stopPropagation()}>
@@ -683,7 +692,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               }}
               title={isContextPinned ? 'Remove from context' : 'Add to context'}
             >
-              {'\u2726'}
+              <IconSparkle size={14} />
             </button>
             {/* Open as site — full-page standalone view of this node's surface,
               served from /api/canvas/surface/:id (same document as the canvas
@@ -698,7 +707,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 }}
                 title="Open as site"
               >
-                ↗
+                <IconExternalLink size={14} />
               </button>
             )}
             {/* Expand — opens node as full-viewport overlay for focused work */}
@@ -711,7 +720,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
                 }}
                 title="Expand (focus mode)"
               >
-                ⤢
+                <IconExpand size={14} />
               </button>
             )}
             <button
@@ -722,7 +731,7 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               }}
               title={node.collapsed ? 'Expand' : 'Collapse'}
             >
-              {node.collapsed ? '▸' : '▾'}
+              {node.collapsed ? <IconChevronRight size={14} /> : <IconChevronDown size={14} />}
             </button>
             {/* Report #64: status nodes get the same remove control as every other
               node type (backend removal + undo/history handle status uniformly). */}
@@ -730,12 +739,11 @@ export function CanvasNode({ node, children, onContextMenu }: CanvasNodeProps) {
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                removeNode(node.id);
                 void removeNodeFromClient(node.id);
               }}
               title="Close"
             >
-              ×
+              <IconClose size={14} />
             </button>
           </div>
         </div>

package/src/client/canvas/CommandBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'preact/hooks';
-import { IconSteer } from '../icons';
+import { IconSteer, IconClose } from '../icons';
 import { contextPinnedNodeIds, nodes, toggleContextPin } from '../state/canvas-store';
 import { steerableAgents } from '../state/presence-store';
 import { sendSteering } from '../state/session-store';
@@ -72,7 +72,7 @@ export function CommandBar() {
                   title="Remove from context"
                   onClick={() => toggleContextPin(id)}
                 >
-                  ×
+                  <IconClose size={14} />
                 </button>
               </span>
             );

package/src/client/canvas/ContextMenu.tsx

@@ -669,7 +669,6 @@ function buildNodeMenuItems(node: CanvasNodeState): MenuItem[] {
     label: node.type === 'group' ? 'Delete frame (children stay)' : 'Delete',
     danger: true,
     action: () => {
-      removeNode(node.id);
       void removeNodeFromClient(node.id);
     },
   });

package/src/client/canvas/ContextPinBar.tsx

@@ -1,5 +1,6 @@
 import { clearContextPins, contextPinnedNodeIds } from '../state/canvas-store';
 import { attentionHistoryOpen } from '../state/attention-store';
+import { IconClose } from '../icons';
 
 export function ContextPinBar() {
   const count = contextPinnedNodeIds.value.size;
@@ -15,8 +16,9 @@ export function ContextPinBar() {
         class="context-pin-bar-btn context-pin-bar-clear"
         onClick={clearContextPins}
         title="Clear all context pins"
+        aria-label="Clear all context pins"
       >
-        {'\u00d7'}
+        <IconClose size={14} />
       </button>
     </div>
   );

package/src/client/canvas/ExpandedNodeOverlay.tsx

@@ -25,7 +25,7 @@ import {
   pendingExpandedNodeCloseId,
   toggleContextPin,
 } from '../state/canvas-store';
-import { getNodeIcon } from '../icons';
+import { getNodeIcon, IconClose, IconExternalLink } from '../icons';
 import { useFocusTrap } from './use-focus-trap';
 import { TYPE_LABELS } from '../types';
 import type { CanvasNodeState } from '../types';
@@ -316,7 +316,7 @@ export function ExpandedNodeOverlay() {
                 onClick={() => void openNodeAsSite(node)}
                 title="Open as a full-page site in the system browser"
               >
-                Open in tab ↗
+                Open in tab <IconExternalLink size={14} />
               </button>
             )}
             {canPresent && (
@@ -331,7 +331,7 @@ export function ExpandedNodeOverlay() {
             )}
           </div>
           <button type="button" class="expanded-close" onClick={handleClose} title="Close (Esc)" aria-label="Close">
-            ×
+            <IconClose />
           </button>
         </div>
 

package/src/client/canvas/ExportDialog.tsx

@@ -177,7 +177,9 @@ export function ExportDialog() {
               <a href={result.url} target="_blank" rel="noopener noreferrer">
                 Open
               </a>
-              <a href={`${result.url}?download=1`}>Download</a>
+              <a class="is-primary" href={`${result.url}?download=1`}>
+                Download
+              </a>
             </div>
           </div>
         )}

package/src/client/canvas/ExternalWriters.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'preact/hooks';
+import { IconClose, IconExternalLink } from '../icons';
 import type { AgentPresence } from '../../shared/agent-presence.js';
 import { vetoGhostIntent } from '../state/intent-bridge';
 import { type ClientIntent, intents, removeIntent } from '../state/intent-store';
@@ -149,7 +150,7 @@ export function ActivityFeed() {
             activityFeedOpen.value = false;
           }}
         >
-          ×
+          <IconClose />
         </button>
       </div>
       <div class="activity-filters">
@@ -226,7 +227,7 @@ export function ActivityFeed() {
             void startSession();
           }}
         >
-          Start session ↗
+          Start session <IconExternalLink size={14} />
         </button>
       </div>
     </div>
@@ -267,7 +268,7 @@ export function WritersSheet() {
           <span class="writers-title">Connected writers</span>
           <span class="writers-board">{sessionId.value.slice(0, 12)}</span>
           <button type="button" class="activity-feed-close" aria-label="Close writers" onClick={close}>
-            ×
+            <IconClose />
           </button>
         </div>
         <div class="writers-body">

package/src/client/canvas/FeedbackDialog.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'preact/hooks';
 import { useFocusTrap } from './use-focus-trap';
+import { IconExternalLink } from '../icons';
 
 /** Draft only: GitHub owns authentication and the final public submission. */
 export function FeedbackDialog({ onClose }: { onClose: () => void }) {
@@ -77,7 +78,7 @@ export function FeedbackDialog({ onClose }: { onClose: () => void }) {
             Cancel
           </button>
           <button type="submit" class="text-prompt-confirm" disabled={!title.trim() || !description.trim()}>
-            Continue on GitHub ↗
+            Continue on GitHub <IconExternalLink size={14} />
           </button>
         </div>
       </form>