Add screenshot export feature

.gitignore

@@ -5,3 +5,4 @@ dist/
 .playwright-mcp/
 COMPETITIVE_ANALYSIS.md
 .claude/settings.local.json
+.strata-worktrees/

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="Take Screenshot (Shift+E)" aria-label="Take screenshot">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15.2a3.2 3.2 0 100-6.4 3.2 3.2 0 000 6.4z"/><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 5z"/></svg>
+        </button>
       </div>
     </div>
     <div id="right-panel">

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.canvas as HTMLCanvasElement);
+
   // ── 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.capture(); 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.capture());
 
   // 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) => {

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

@@ -185,6 +185,14 @@ export class CommandPalette {
     });
 
     // New features
+    this.actions.push({
+      id: 'feature:screenshot',
+      label: 'Take Screenshot',
+      description: 'Capture canvas as PNG image (Shift+E)',
+      icon: '📷',
+      category: 'feature',
+      action: () => this.onCommand('screenshot-export'),
+    });
     this.actions.push({
       id: 'feature:trails',
       label: 'Toggle Agent Trails',

packages/client/src/ui/screenshot-export.ts

@@ -0,0 +1,33 @@
+/**
+ * Screenshot Export — captures the Pixi.js canvas as a PNG image
+ * and triggers a direct download with a timestamped filename.
+ */
+
+export class ScreenshotExport {
+  private canvas: HTMLCanvasElement;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+  }
+
+  /**
+   * Capture the current canvas contents and download as a PNG file.
+   */
+  capture(): void {
+    try {
+      const dataUrl = this.canvas.toDataURL('image/png');
+      const timestamp = new Date()
+        .toISOString()
+        .slice(0, 19)
+        .replace(/:/g, '-');
+      const filename = `agent-move-screenshot-${timestamp}.png`;
+
+      const a = document.createElement('a');
+      a.href = dataUrl;
+      a.download = filename;
+      a.click();
+    } catch (err) {
+      console.error('Screenshot capture failed:', err);
+    }
+  }
+}