pmx-canvas 0.3.0 → 0.3.2

package/src/cli/index.ts

@@ -1,8 +1,9 @@
 #!/usr/bin/env bun
 import { spawn } from 'node:child_process';
-import { existsSync, mkdirSync, openSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { readFileSync } from 'node:fs';
 import { dirname, join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { showServeStatus, startDaemonMode, stopServeDaemon } from './daemon.js';
 import { runAgentCli } from './agent.js';
 import { createCanvas } from '../server/index.js';
 import { seedDemoCanvas } from '../server/demo.js';
@@ -31,9 +32,39 @@ if (args.includes('--version') || args.includes('-v')) {
 // ── Agent CLI subcommands ────────────────────────────────────
 // If first arg is a known subcommand (not a --flag), route to the agent CLI.
 const AGENT_COMMANDS = new Set([
-  'node', 'edge', 'json-render', 'search', 'layout', 'status', 'arrange', 'focus',
-  'fit', 'screenshot', 'pin', 'ax', 'undo', 'redo', 'history', 'snapshot', 'diff', 'group', 'webview', 'open',
-  'clear', 'code-graph', 'spatial', 'watch', 'web-artifact', 'external-app', 'diagram', 'graph', 'html', 'batch', 'validate', 'serve', 'copilot',
+  'node',
+  'edge',
+  'json-render',
+  'search',
+  'layout',
+  'status',
+  'arrange',
+  'focus',
+  'fit',
+  'screenshot',
+  'pin',
+  'ax',
+  'undo',
+  'redo',
+  'history',
+  'snapshot',
+  'diff',
+  'group',
+  'webview',
+  'open',
+  'clear',
+  'code-graph',
+  'spatial',
+  'watch',
+  'web-artifact',
+  'external-app',
+  'diagram',
+  'graph',
+  'html',
+  'batch',
+  'validate',
+  'serve',
+  'copilot',
 ]);
 
 const firstArg = args[0] ?? '';
@@ -66,7 +97,10 @@ function readNumberOption(name: string): number | undefined {
 function readCsvOption(name: string): string[] | undefined {
   const raw = readOption(name);
   if (!raw) return undefined;
-  const values = raw.split(',').map((value) => value.trim()).filter((value) => value.length > 0);
+  const values = raw
+    .split(',')
+    .map((value) => value.trim())
+    .filter((value) => value.length > 0);
   return values.length > 0 ? values : undefined;
 }
 
@@ -86,304 +120,23 @@ function stripOption(argv: string[], name: string): string[] {
   return stripped;
 }
 
-function outputJson(data: unknown): void {
-  console.log(JSON.stringify(data, null, 2));
-}
-
-function readPidFile(path: string): number | null {
-  try {
-    if (!existsSync(path)) return null;
-    const raw = readFileSync(path, 'utf-8').trim();
-    if (!raw) return null;
-    const pid = Number(raw);
-    return Number.isInteger(pid) && pid > 0 ? pid : null;
-  } catch {
-    return null;
-  }
-}
-
-function isProcessRunning(pid: number): boolean {
-  try {
-    process.kill(pid, 0);
-    return true;
-  } catch (error) {
-    if (error && typeof error === 'object' && 'code' in error) {
-      return (error as NodeJS.ErrnoException).code === 'EPERM';
-    }
-    return false;
-  }
-}
-
-function removePidFile(path: string): void {
-  try {
-    rmSync(path, { force: true });
-  } catch {
-    // Ignore cleanup failures for stale pid files.
-  }
-}
-
-interface HealthStatus {
-  responsive: boolean;
-  workspace: string | null;
-}
-
-async function readHealthStatus(url: string): Promise<HealthStatus> {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) return { responsive: false, workspace: null };
-    const payload = await response.json().catch(() => null) as unknown;
-    const workspace = payload && typeof payload === 'object' && 'workspace' in payload
-      && typeof payload.workspace === 'string'
-      ? payload.workspace
-      : null;
-    return { responsive: true, workspace };
-  } catch {
-    return { responsive: false, workspace: null };
-  }
-}
-
-async function isHealthy(url: string): Promise<boolean> {
-  return (await readHealthStatus(url)).responsive;
-}
-
-function readLogTail(path: string, maxLines = 20): string | null {
-  try {
-    if (!existsSync(path)) return null;
-    const lines = readFileSync(path, 'utf-8').trim().split('\n');
-    return lines.slice(-maxLines).join('\n') || null;
-  } catch {
-    return null;
-  }
-}
-
-async function waitForHealth(
-  healthUrl: string,
-  timeoutMs: number,
-  getExitMessage: () => string | null,
-): Promise<{ ok: true } | { ok: false; reason: string }> {
-  const deadline = Date.now() + timeoutMs;
-  while (Date.now() < deadline) {
-    if (await isHealthy(healthUrl)) {
-      return { ok: true };
-    }
-    const exitMessage = getExitMessage();
-    if (exitMessage) {
-      return { ok: false, reason: exitMessage };
-    }
-    await Bun.sleep(250);
-  }
-  return { ok: false, reason: `Timed out waiting for ${healthUrl}` };
-}
-
-async function waitForShutdown(
-  healthUrl: string,
-  timeoutMs: number,
-  pid: number | null,
-): Promise<boolean> {
-  const deadline = Date.now() + timeoutMs;
-  while (Date.now() < deadline) {
-    const responsive = await isHealthy(healthUrl);
-    const alive = pid ? isProcessRunning(pid) : false;
-    if (!responsive && !alive) {
-      return true;
-    }
-    await Bun.sleep(250);
-  }
-  return false;
-}
-
-async function startDaemonMode(options: {
-  port: number;
-  baseArgs: string[];
-  logFile: string;
-  pidFile: string;
-  waitMs: number;
-}): Promise<void> {
-  const healthUrl = `http://localhost:${options.port}/health`;
-  const workbenchUrl = `http://localhost:${options.port}/workbench`;
-  const existingPid = readPidFile(options.pidFile);
-
-  if (await isHealthy(healthUrl)) {
-    outputJson({
-      ok: true,
-      daemon: true,
-      alreadyRunning: true,
-      pid: existingPid,
-      url: workbenchUrl,
-      healthUrl,
-      logFile: options.logFile,
-      pidFile: options.pidFile,
-    });
-    process.exit(0);
-  }
-
-  mkdirSync(dirname(options.logFile), { recursive: true });
-  const logFd = openSync(options.logFile, 'a');
-  const childArgs = options.baseArgs.includes('--no-open')
-    ? options.baseArgs
-    : [...options.baseArgs, '--no-open'];
-  const child = spawn(process.execPath, ['run', fileURLToPath(import.meta.url), ...childArgs], {
-    cwd: process.cwd(),
-    detached: true,
-    env: process.env,
-    stdio: ['ignore', logFd, logFd],
-  });
-
-  let exitMessage: string | null = null;
-  child.once('exit', (code, signal) => {
-    exitMessage = signal
-      ? `Daemon exited via signal ${signal}`
-      : `Daemon exited with code ${code ?? 'unknown'}`;
-  });
-  child.unref();
-
-  const health = await waitForHealth(healthUrl, options.waitMs, () => exitMessage);
-  if (!health.ok) {
-    const logTail = readLogTail(options.logFile);
-    const details = logTail ? `${health.reason}\n\nRecent log output:\n${logTail}` : health.reason;
-    console.error(details);
-    process.exit(1);
-  }
-
-  mkdirSync(dirname(options.pidFile), { recursive: true });
-  writeFileSync(options.pidFile, `${child.pid}\n`, 'utf-8');
-
-  outputJson({
-    ok: true,
-    daemon: true,
-    pid: child.pid,
-    url: workbenchUrl,
-    healthUrl,
-    logFile: options.logFile,
-    pidFile: options.pidFile,
-  });
-  process.exit(0);
-}
-
-async function showServeStatus(options: {
-  port: number;
-  logFile: string;
-  pidFile: string;
-}): Promise<void> {
-  const healthUrl = `http://localhost:${options.port}/health`;
-  const url = `http://localhost:${options.port}/workbench`;
-  const pid = readPidFile(options.pidFile);
-  const pidRunning = pid ? isProcessRunning(pid) : false;
-  const health = await readHealthStatus(healthUrl);
-  const responsive = health.responsive;
-  const running = responsive || pidRunning;
-  if (!running && existsSync(options.pidFile) && !pidRunning) {
-    removePidFile(options.pidFile);
-  }
-
-  outputJson({
-    ok: true,
-    daemon: true,
-    running,
-    responsive,
-    workspace: health.workspace,
-    pid,
-    pidRunning,
-    url,
-    healthUrl,
-    logFile: options.logFile,
-    pidFile: options.pidFile,
-    pidFileExists: existsSync(options.pidFile),
-  });
-  process.exit(0);
-}
-
-async function stopServeDaemon(options: {
-  port: number;
-  logFile: string;
-  pidFile: string;
-  waitMs: number;
-}): Promise<void> {
-  const healthUrl = `http://localhost:${options.port}/health`;
-  const url = `http://localhost:${options.port}/workbench`;
-  const pid = readPidFile(options.pidFile);
-  const responsive = await isHealthy(healthUrl);
-
-  if (!pid) {
-    if (!responsive) {
-      removePidFile(options.pidFile);
-      outputJson({
-        ok: true,
-        daemon: true,
-        stopped: false,
-        running: false,
-        reason: 'No running daemon found.',
-        url,
-        healthUrl,
-        logFile: options.logFile,
-        pidFile: options.pidFile,
-      });
-      process.exit(0);
+// Global target flags (--port / --server-url) may precede the subcommand, e.g.
+// `pmx-canvas --port 4750 node list`. Skip them (and their values) when picking
+// the subcommand to dispatch, so the agent CLI — which strips these flags via
+// extractGlobalTargetFlags and validates them loudly — is reached instead of the
+// server-startup fallback. Only these two flags are skipped; other leading flags
+// (--mcp, --demo, …) still route exactly as before.
+function commandAfterGlobalTargetFlags(argv: string[]): string {
+  for (let index = 0; index < argv.length; index++) {
+    const arg = argv[index];
+    if (arg === '--port' || arg === '--server-url') {
+      if (index + 1 < argv.length && !argv[index + 1].startsWith('-')) index++;
+      continue;
     }
-
-    outputJson({
-      ok: false,
-      daemon: true,
-      error: `Server on port ${options.port} is responsive, but no pid file was found at ${options.pidFile}.`,
-      hint: 'Restart with `pmx-canvas serve --daemon` or provide the correct --pid-file.',
-      url,
-      healthUrl,
-      logFile: options.logFile,
-      pidFile: options.pidFile,
-    });
-    process.exit(1);
-  }
-
-  if (!isProcessRunning(pid)) {
-    removePidFile(options.pidFile);
-    outputJson({
-      ok: true,
-      daemon: true,
-      stopped: false,
-      running: responsive,
-      reason: `Removed stale pid file for ${pid}.`,
-      pid,
-      url,
-      healthUrl,
-      logFile: options.logFile,
-      pidFile: options.pidFile,
-    });
-    process.exit(0);
+    if (arg.startsWith('--port=') || arg.startsWith('--server-url=')) continue;
+    return arg;
   }
-
-  process.kill(pid, 'SIGTERM');
-  const stopped = await waitForShutdown(healthUrl, options.waitMs, pid);
-  const stillResponsive = await isHealthy(healthUrl);
-  const pidRunning = isProcessRunning(pid);
-  if (stopped || (!stillResponsive && !pidRunning)) {
-    removePidFile(options.pidFile);
-    outputJson({
-      ok: true,
-      daemon: true,
-      stopped: true,
-      pid,
-      url,
-      healthUrl,
-      logFile: options.logFile,
-      pidFile: options.pidFile,
-    });
-    process.exit(0);
-  }
-
-  outputJson({
-    ok: false,
-    daemon: true,
-    stopped: false,
-    error: `Timed out waiting for daemon ${pid} to stop.`,
-    pid,
-    responsive: stillResponsive,
-    pidRunning,
-    url,
-    healthUrl,
-    logFile: options.logFile,
-    pidFile: options.pidFile,
-  });
-  process.exit(1);
+  return '';
 }
 
 function runMcpServerProcess(): Promise<void> {
@@ -398,16 +151,16 @@ function runMcpServerProcess(): Promise<void> {
         resolvePromise();
         return;
       }
-      rejectPromise(new Error(
-        signal
-          ? `MCP server exited via signal ${signal}`
-          : `MCP server exited with code ${code ?? 'unknown'}`,
-      ));
+      rejectPromise(
+        new Error(
+          signal ? `MCP server exited via signal ${signal}` : `MCP server exited with code ${code ?? 'unknown'}`,
+        ),
+      );
     });
   });
 }
 
-const serveSubcommand = firstArg === 'serve' ? args[1] ?? '' : '';
+const serveSubcommand = firstArg === 'serve' ? (args[1] ?? '') : '';
 
 if (firstArg === 'serve' && (serveSubcommand === 'status' || serveSubcommand === 'stop')) {
   const port = parseInt(readOption('port') ?? process.env.PMX_WEB_CANVAS_PORT ?? '4313');
@@ -430,6 +183,7 @@ Usage:
       port,
       logFile: daemonLogFile,
       pidFile: daemonPidFile,
+      entry: fileURLToPath(import.meta.url),
     });
   } else {
     await stopServeDaemon({
@@ -437,6 +191,7 @@ Usage:
       logFile: daemonLogFile,
       pidFile: daemonPidFile,
       waitMs: daemonWaitMs,
+      entry: fileURLToPath(import.meta.url),
     });
   }
 }
@@ -445,7 +200,8 @@ if (firstArg === 'serve') {
   args.shift();
 }
 
-if (AGENT_COMMANDS.has(firstArg) && firstArg !== 'serve') {
+const routedCommand = commandAfterGlobalTargetFlags(args);
+if (AGENT_COMMANDS.has(routedCommand) && routedCommand !== 'serve') {
   await runAgentCli(args);
 } else if (args.includes('--mcp')) {
   // MCP server mode: stdio transport, auto-starts canvas on first tool call
@@ -468,9 +224,7 @@ if (AGENT_COMMANDS.has(firstArg) && firstArg !== 'serve') {
   const daemonPidFile = resolve(readOption('pid-file') ?? `.pmx-canvas/daemon-${port}.pid`);
   const daemonWaitMs = readNumberOption('wait-ms') ?? 10_000;
   const webviewBackendOption: 'chrome' | 'webkit' | undefined =
-    webviewBackend === 'chrome' || webviewBackend === 'webkit'
-      ? webviewBackend
-      : undefined;
+    webviewBackend === 'chrome' || webviewBackend === 'webkit' ? webviewBackend : undefined;
   if (themeArg && ['dark', 'light', 'high-contrast'].includes(themeArg)) {
     process.env.PMX_CANVAS_THEME = themeArg;
   }
@@ -587,28 +341,31 @@ Examples:
   }
 
   if (daemon) {
-    const baseArgs = stripOption(stripOption(stripOption(stripOption(args, 'daemon'), 'log-file'), 'pid-file'), 'wait-ms');
+    const baseArgs = stripOption(
+      stripOption(stripOption(stripOption(args, 'daemon'), 'log-file'), 'pid-file'),
+      'wait-ms',
+    );
     await startDaemonMode({
       port,
       baseArgs,
       logFile: daemonLogFile,
       pidFile: daemonPidFile,
       waitMs: daemonWaitMs,
+      entry: fileURLToPath(import.meta.url),
     });
   }
 
   const canvas = createCanvas({ port });
-  const automationWebView =
-    webviewAutomation
-      ? {
-          ...(webviewBackendOption ? { backend: webviewBackendOption } : {}),
-          ...(webviewChromePath ? { chromePath: webviewChromePath } : {}),
-          ...(webviewChromeArgv ? { chromeArgv: webviewChromeArgv } : {}),
-          ...(webviewDataDir ? { dataStoreDir: webviewDataDir } : {}),
-          ...(webviewWidth !== undefined ? { width: webviewWidth } : {}),
-          ...(webviewHeight !== undefined ? { height: webviewHeight } : {}),
-        }
-      : false;
+  const automationWebView = webviewAutomation
+    ? {
+        ...(webviewBackendOption ? { backend: webviewBackendOption } : {}),
+        ...(webviewChromePath ? { chromePath: webviewChromePath } : {}),
+        ...(webviewChromeArgv ? { chromeArgv: webviewChromeArgv } : {}),
+        ...(webviewDataDir ? { dataStoreDir: webviewDataDir } : {}),
+        ...(webviewWidth !== undefined ? { width: webviewWidth } : {}),
+        ...(webviewHeight !== undefined ? { height: webviewHeight } : {}),
+      }
+    : false;
   try {
     await canvas.start({ open: !noOpen, automationWebView });
   } catch (error) {

package/src/cli/watch.ts

@@ -7,16 +7,8 @@ import {
   type SseMessage,
 } from '../shared/semantic-attention.js';
 
-export {
-  ALL_SEMANTIC_WATCH_EVENT_TYPES,
-  formatCompactWatchEvent,
-  SemanticWatchReducer,
-};
-export type {
-  SemanticWatchEvent,
-  SemanticWatchEventType,
-  SseMessage,
-};
+export { ALL_SEMANTIC_WATCH_EVENT_TYPES, formatCompactWatchEvent, SemanticWatchReducer };
+export type { SemanticWatchEvent, SemanticWatchEventType, SseMessage };
 
 export function parseSemanticEventFilter(raw: string | undefined): Set<SemanticWatchEventType> {
   const all = new Set<SemanticWatchEventType>(ALL_SEMANTIC_WATCH_EVENT_TYPES);

package/src/client/App.tsx

@@ -165,7 +165,11 @@ function Toolbar({
 
         <div class="separator" />
 
-        <ToolbarHint label="Canvas status" detail={hasSynced ? statusLabel : 'Syncing canvas from server'} align="start">
+        <ToolbarHint
+          label="Canvas status"
+          detail={hasSynced ? statusLabel : 'Syncing canvas from server'}
+          align="start"
+        >
           <span class={`connection-dot ${status}`} aria-label={`Canvas status: ${statusTitle}`} />
         </ToolbarHint>
         <span class="hud-collapsible-text" style={{ fontSize: '11px', color: 'var(--c-muted)' }}>
@@ -175,20 +179,12 @@ function Toolbar({
         <div class="separator" />
 
         <ToolbarHint label="Fit canvas" detail="Frame every node on screen">
-          <button
-            type="button"
-            onClick={() => fitAll(window.innerWidth, window.innerHeight)}
-            aria-label="Fit canvas"
-          >
+          <button type="button" onClick={() => fitAll(window.innerWidth, window.innerHeight)} aria-label="Fit canvas">
             <IconFitAll />
           </button>
         </ToolbarHint>
         <ToolbarHint label="Reset view" shortcut={`${MOD_KEY}+0`}>
-          <button
-            type="button"
-            onClick={() => animateViewport({ x: 0, y: 0, scale: 1 }, 250)}
-            aria-label="Reset view"
-          >
+          <button type="button" onClick={() => animateViewport({ x: 0, y: 0, scale: 1 }, 250)} aria-label="Reset view">
             <IconResetView />
           </button>
         </ToolbarHint>
@@ -210,7 +206,10 @@ function Toolbar({
             <IconZoomOut />
           </button>
         </ToolbarHint>
-        <span class="hud-collapsible-text" style={{ fontSize: '10px', color: 'var(--c-dim)', minWidth: '36px', textAlign: 'center' }}>
+        <span
+          class="hud-collapsible-text"
+          style={{ fontSize: '10px', color: 'var(--c-dim)', minWidth: '36px', textAlign: 'center' }}
+        >
           {Math.round(v.scale * 100)}%
         </span>
 
@@ -220,7 +219,11 @@ function Toolbar({
           label="Arrange layout"
           detail={edgeCount > 0 ? 'Graph-aware layout for connected nodes' : 'Grid layout for loose nodes'}
         >
-          <button type="button" onClick={() => edgeCount > 0 ? forceDirectedArrange() : autoArrange()} aria-label="Arrange layout">
+          <button
+            type="button"
+            onClick={() => (edgeCount > 0 ? forceDirectedArrange() : autoArrange())}
+            aria-label="Arrange layout"
+          >
             <IconArrange />
           </button>
         </ToolbarHint>
@@ -234,7 +237,10 @@ function Toolbar({
             <IconMinimap />
           </button>
         </ToolbarHint>
-        <ToolbarHint label={`Switch to ${canvasTheme.value === 'dark' ? 'light' : 'dark'} theme`} detail={`Current theme: ${canvasTheme.value}`}>
+        <ToolbarHint
+          label={`Switch to ${canvasTheme.value === 'dark' ? 'light' : 'dark'} theme`}
+          detail={`Current theme: ${canvasTheme.value}`}
+        >
           <button
             type="button"
             onClick={() => {
@@ -280,13 +286,13 @@ function Toolbar({
         {(isTraceOn || traceNodeCount > 0) && (
           <ToolbarHint
             label="Clear trace"
-            detail={traceNodeCount > 0 ? `Remove ${traceNodeCount} trace node${traceNodeCount === 1 ? '' : 's'}` : 'Trace is enabled but still empty'}
+            detail={
+              traceNodeCount > 0
+                ? `Remove ${traceNodeCount} trace node${traceNodeCount === 1 ? '' : 's'}`
+                : 'Trace is enabled but still empty'
+            }
           >
-            <button
-              type="button"
-              onClick={() => sendIntent('trace-clear')}
-              aria-label="Clear trace"
-            >
+            <button type="button" onClick={() => sendIntent('trace-clear')} aria-label="Clear trace">
               <IconClearTrace />
             </button>
           </ToolbarHint>
@@ -340,25 +346,19 @@ function Toolbar({
         <div class="separator" />
 
         <ToolbarHint label="Search nodes and actions" shortcut={`${MOD_KEY}+K`}>
-          <button
-            type="button"
-            onClick={onOpenPalette}
-            aria-label="Search nodes and actions"
-          >
+          <button type="button" onClick={onOpenPalette} aria-label="Search nodes and actions">
             <IconSearch />
           </button>
         </ToolbarHint>
         <ToolbarHint label="Keyboard shortcuts" shortcut="?" align="end">
-          <button
-            type="button"
-            onClick={onOpenShortcuts}
-            aria-label="Keyboard shortcuts"
-          >
+          <button type="button" onClick={onOpenShortcuts} aria-label="Keyboard shortcuts">
             <IconShortcuts />
           </button>
         </ToolbarHint>
 
-        <span class="hud-collapsible-text" style={{ fontSize: '10px', color: 'var(--c-dim)' }}>{countsLabel}</span>
+        <span class="hud-collapsible-text" style={{ fontSize: '10px', color: 'var(--c-dim)' }}>
+          {countsLabel}
+        </span>
       </div>
     </div>
   );
@@ -370,7 +370,8 @@ function WelcomeCard({ onOpenPalette }: { onOpenPalette: () => void }) {
       <div class="welcome-icon">◇</div>
       <div class="welcome-title">Shape What The Agent Sees</div>
       <div class="welcome-subtitle">
-        Lay out notes, files, and evidence. Bring related nodes together. Pin what matters. The board will reflect the active focus.
+        Lay out notes, files, and evidence. Bring related nodes together. Pin what matters. The board will reflect the
+        active focus.
       </div>
       <div class="welcome-hints">
         <button type="button" class="welcome-hint" onClick={onOpenPalette}>
@@ -390,9 +391,7 @@ function WelcomeCard({ onOpenPalette }: { onOpenPalette: () => void }) {
           <span>Shape the focus field</span>
         </div>
       </div>
-      <div class="welcome-footer">
-        The canvas is a shared attention surface, not just an editor.
-      </div>
+      <div class="welcome-footer">The canvas is a shared attention surface, not just an editor.</div>
     </div>
   );
 }
@@ -410,9 +409,18 @@ export function App() {
   const handleToggleMinimap = useCallback(() => setMinimapVisible((v) => !v), []);
   const handleToggleSnapshot = useCallback(() => setSnapshotOpen((v) => !v), []);
   const handleCloseSnapshot = useCallback(() => setSnapshotOpen(false), []);
-  const handleToggleAnnotationMode = useCallback(() => setAnnotationTool((tool) => tool === 'pen' ? null : 'pen'), []);
-  const handleToggleAnnotationEraser = useCallback(() => setAnnotationTool((tool) => tool === 'eraser' ? null : 'eraser'), []);
-  const handleToggleTextAnnotation = useCallback(() => setAnnotationTool((tool) => tool === 'text' ? null : 'text'), []);
+  const handleToggleAnnotationMode = useCallback(
+    () => setAnnotationTool((tool) => (tool === 'pen' ? null : 'pen')),
+    [],
+  );
+  const handleToggleAnnotationEraser = useCallback(
+    () => setAnnotationTool((tool) => (tool === 'eraser' ? null : 'eraser')),
+    [],
+  );
+  const handleToggleTextAnnotation = useCallback(
+    () => setAnnotationTool((tool) => (tool === 'text' ? null : 'text')),
+    [],
+  );
 
   const handleMinimapNavigate = useCallback((x: number, y: number) => {
     animateViewport({ x, y, scale: viewport.value.scale }, 200);
@@ -508,8 +516,7 @@ export function App() {
 
   useEffect(() => {
     if (!hasInitialLayout) return;
-    const ready = (window as Window & { __pmxCanvasBootstrapReady?: () => void })
-      .__pmxCanvasBootstrapReady;
+    const ready = (window as Window & { __pmxCanvasBootstrapReady?: () => void }).__pmxCanvasBootstrapReady;
     if (typeof ready === 'function') ready();
   }, [hasInitialLayout]);
 
@@ -575,12 +582,7 @@ export function App() {
         />
       )}
       {menu && <ContextMenu menu={menu} onClose={closeMenu} />}
-      {paletteOpen && (
-        <CommandPalette
-          onClose={() => setPaletteOpen(false)}
-          onToggleMinimap={handleToggleMinimap}
-        />
-      )}
+      {paletteOpen && <CommandPalette onClose={() => setPaletteOpen(false)} onToggleMinimap={handleToggleMinimap} />}
       {shortcutsOpen && <ShortcutOverlay onClose={() => setShortcutsOpen(false)} />}
     </div>
   );