Add screenshot export feature

packages/client/index.html

@@ -164,6 +164,9 @@
         <button id="zoom-reset" title="Fit to View" aria-label="Fit to view">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5v4h2V5h4V3H5a2 2 0 00-2 2zm2 10H3v4a2 2 0 002 2h4v-2H5v-4zm14 4h-4v2h4a2 2 0 002-2v-4h-2v4zm0-16h-4v2h4v4h2V5a2 2 0 00-2-2z"/></svg>
         </button>
+        <button id="screenshot-btn" title="Screenshot (Shift+E)" aria-label="Screenshot">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/></svg>
+        </button>
       </div>
     </div>
     <div id="right-panel">

packages/client/package.json

@@ -6,14 +6,18 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@agent-move/shared": "*",
     "pixi.js": "^8.6.6"
   },
   "devDependencies": {
+    "jsdom": "^29.0.0",
+    "typescript": "^5.7.3",
     "vite": "^6.1.0",
-    "typescript": "^5.7.3"
+    "vitest": "^4.1.0"
   }
 }

packages/client/src/main.ts

@@ -18,6 +18,7 @@ import { Sidebar } from './ui/sidebar.js';
 import { ToastManager } from './ui/toast-manager.js';
 import { ShortcutsHelp } from './ui/shortcuts-help.js';
 import { SessionExport } from './ui/session-export.js';
+import { ScreenshotExport } from './ui/screenshot-export.js';
 import { Onboarding } from './ui/onboarding.js';
 import { ZONE_MAP, AGENT_PALETTES } from '@agent-move/shared';
 
@@ -186,6 +187,9 @@ async function main() {
   // ── Session Export ──
   const sessionExport = new SessionExport(store);
 
+  // ── Screenshot Export ──
+  const screenshotExport = new ScreenshotExport(pixiApp, world);
+
   // ── Onboarding ──
   const onboarding = new Onboarding();
 
@@ -379,6 +383,7 @@ async function main() {
         break;
       case 'exit-focus':         if (focusModeActive) exitFocusMode(); break;
       case 'session-export':     sessionExport.toggle(); break;
+      case 'screenshot-export':  screenshotExport.toggle(); break;
       case 'toggle-trails':      trails.toggle(); break;
       case 'toggle-daynight':    world.dayNight.toggle(); break;
       case 'toggle-minimap':     minimap.toggle(); break;
@@ -416,6 +421,7 @@ async function main() {
   document.getElementById('zoom-in')!.addEventListener('click', () => world.camera.zoomIn());
   document.getElementById('zoom-out')!.addEventListener('click', () => world.camera.zoomOut());
   document.getElementById('zoom-reset')!.addEventListener('click', () => world.resetCamera());
+  document.getElementById('screenshot-btn')!.addEventListener('click', () => screenshotExport.toggle());
 
   // Audio controls (mute button + volume slider in top bar)
   const muteBtn = document.getElementById('mute-btn')!;
@@ -524,6 +530,7 @@ async function main() {
     's': 'toggle-sessions',
     '[': 'toggle-sidebar',
     'S': 'toggle-settings',
+    'E': 'screenshot-export',
   };
 
   document.addEventListener('keydown', (e) => {
@@ -554,6 +561,7 @@ async function main() {
     sessionDetailPanel.dispose();
     sessionComparisonPanel.dispose();
     minimap.dispose();
+    screenshotExport.dispose();
     store.dispose();
   });
 

packages/client/src/ui/command-palette.ts

@@ -183,6 +183,14 @@ export class CommandPalette {
       category: 'feature',
       action: () => this.onCommand('session-export'),
     });
+    this.actions.push({
+      id: 'feature:screenshot',
+      label: 'Screenshot Export',
+      description: 'Capture canvas as PNG (Shift+E)',
+      icon: '📸',
+      category: 'feature',
+      action: () => this.onCommand('screenshot-export'),
+    });
 
     // New features
     this.actions.push({