cowork-os 0.3.21

package/src/electron/canvas/canvas-preload.ts

@@ -0,0 +1,102 @@
+/**
+ * Canvas Preload Script
+ *
+ * Exposes a secure bridge between the canvas content and the main process.
+ * This preload script is loaded into canvas BrowserWindows and provides:
+ * - A2UI (Agent-to-UI) action sending
+ * - Session information retrieval
+ * - Agent update notifications
+ */
+
+import { contextBridge, ipcRenderer } from 'electron';
+
+// Type definitions for the canvas API
+interface CanvasAPI {
+  /**
+   * Send an A2UI action to the agent
+   * @param actionName - Name of the action (e.g., 'button_click', 'form_submit')
+   * @param componentId - Optional ID of the component that triggered the action
+   * @param context - Optional context data to send with the action
+   */
+  sendA2UIAction: (
+    actionName: string,
+    componentId?: string,
+    context?: Record<string, unknown>
+  ) => Promise<void>;
+
+  /**
+   * Get information about the current canvas session
+   */
+  getSessionInfo: () => Promise<{
+    id: string;
+    taskId: string;
+    workspaceId: string;
+    title?: string;
+  } | null>;
+
+  /**
+   * Register a callback for agent updates
+   * @param callback - Function to call when agent sends an update
+   */
+  onAgentUpdate: (callback: (data: unknown) => void) => void;
+
+  /**
+   * Request a snapshot of the current canvas
+   */
+  requestSnapshot: () => Promise<{
+    imageBase64: string;
+    width: number;
+    height: number;
+  } | null>;
+
+  /**
+   * Log a message to the main process console
+   */
+  log: (message: string, data?: unknown) => void;
+}
+
+// Create the canvas API
+const canvasAPI: CanvasAPI = {
+  sendA2UIAction: async (actionName, componentId, context) => {
+    await ipcRenderer.invoke('canvas:a2ui-action-from-window', {
+      actionName,
+      componentId,
+      context,
+    });
+  },
+
+  getSessionInfo: async () => {
+    return ipcRenderer.invoke('canvas:get-session-from-window');
+  },
+
+  onAgentUpdate: (callback) => {
+    ipcRenderer.on('canvas:agent-update', (_event, data) => {
+      callback(data);
+    });
+  },
+
+  requestSnapshot: async () => {
+    return ipcRenderer.invoke('canvas:request-snapshot-from-window');
+  },
+
+  log: (message, data) => {
+    ipcRenderer.send('canvas:log', { message, data });
+  },
+};
+
+const shouldExposeCanvasApi = (() => {
+  try {
+    const location = (globalThis as { location?: { protocol?: string } }).location;
+    return location?.protocol === 'canvas:';
+  } catch {
+    return false;
+  }
+})();
+
+if (shouldExposeCanvasApi) {
+  // Expose the API to trusted canvas:// content only
+  contextBridge.exposeInMainWorld('coworkCanvas', canvasAPI);
+  console.log('[CanvasPreload] Canvas preload script loaded (canvas://)');
+} else {
+  console.log('[CanvasPreload] Canvas preload script loaded (no API exposed)');
+}

package/src/electron/canvas/canvas-protocol.ts

@@ -0,0 +1,174 @@
+/**
+ * Canvas Protocol Handler
+ *
+ * Registers a custom 'canvas://' URL scheme that serves files from
+ * canvas session directories to the canvas BrowserWindows.
+ *
+ * URL Format: canvas://{sessionId}/{filename}
+ * Example: canvas://abc123-def456/index.html
+ */
+
+import { protocol } from 'electron';
+import * as path from 'path';
+import * as fs from 'fs';
+import { CanvasManager } from './canvas-manager';
+
+// MIME type mapping
+const MIME_TYPES: Record<string, string> = {
+  '.html': 'text/html',
+  '.htm': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.wasm': 'application/wasm',
+  '.mp3': 'audio/mpeg',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
+  '.ogg': 'audio/ogg',
+  '.wav': 'audio/wav',
+  '.pdf': 'application/pdf',
+  '.xml': 'application/xml',
+  '.txt': 'text/plain',
+  '.md': 'text/markdown',
+};
+
+/**
+ * Get MIME type for a file extension
+ */
+function getMimeType(filePath: string): string {
+  const ext = path.extname(filePath).toLowerCase();
+  return MIME_TYPES[ext] || 'application/octet-stream';
+}
+
+/**
+ * Create an error response
+ */
+function createErrorResponse(statusCode: number, message: string): Response {
+  return new Response(message, {
+    status: statusCode,
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  });
+}
+
+/**
+ * Register the canvas:// protocol scheme as privileged
+ * Must be called before app.ready
+ */
+export function registerCanvasScheme(): void {
+  protocol.registerSchemesAsPrivileged([
+    {
+      scheme: 'canvas',
+      privileges: {
+        standard: true,
+        secure: true,
+        supportFetchAPI: true,
+        corsEnabled: true,
+        stream: true,
+      },
+    },
+  ]);
+}
+
+/**
+ * Register the canvas:// protocol handler
+ * Must be called after app.ready
+ */
+export function registerCanvasProtocol(): void {
+  protocol.handle('canvas', async (request) => {
+    try {
+      const url = new URL(request.url);
+      const sessionId = url.hostname;
+      let filePath = decodeURIComponent(url.pathname);
+
+      // Security: prevent path traversal attacks
+      if (filePath.includes('..') || filePath.includes('//')) {
+        console.warn(`[CanvasProtocol] Blocked path traversal attempt: ${filePath}`);
+        return createErrorResponse(403, 'Forbidden: Invalid path');
+      }
+
+      // Get the canvas manager
+      const manager = CanvasManager.getInstance();
+      const session = manager.getSession(sessionId);
+
+      if (!session) {
+        console.warn(`[CanvasProtocol] Session not found: ${sessionId}`);
+        return createErrorResponse(404, 'Session not found');
+      }
+
+      // Default to index.html for root requests
+      if (filePath === '/' || filePath === '') {
+        filePath = '/index.html';
+      }
+
+      // Remove leading slash
+      const relativePath = filePath.startsWith('/') ? filePath.slice(1) : filePath;
+      const fullPath = path.join(session.sessionDir, relativePath);
+
+      // Security: ensure the resolved path is within the session directory
+      const resolvedPath = path.resolve(fullPath);
+      const resolvedSessionDir = path.resolve(session.sessionDir);
+      if (!resolvedPath.startsWith(resolvedSessionDir)) {
+        console.warn(`[CanvasProtocol] Path escape attempt: ${fullPath}`);
+        return createErrorResponse(403, 'Forbidden: Path outside session');
+      }
+
+      // Check if file exists
+      if (!fs.existsSync(fullPath)) {
+        console.warn(`[CanvasProtocol] File not found: ${fullPath}`);
+        return createErrorResponse(404, 'File not found');
+      }
+
+      // Get file stats
+      const stats = fs.statSync(fullPath);
+      if (stats.isDirectory()) {
+        // Try index.html in directory
+        const indexPath = path.join(fullPath, 'index.html');
+        if (fs.existsSync(indexPath)) {
+          const content = fs.readFileSync(indexPath);
+          return new Response(content, {
+            status: 200,
+            headers: {
+              'Content-Type': 'text/html',
+              'Content-Length': content.length.toString(),
+            },
+          });
+        }
+        return createErrorResponse(403, 'Directory listing not allowed');
+      }
+
+      // Read and serve the file
+      const content = fs.readFileSync(fullPath);
+      const mimeType = getMimeType(fullPath);
+
+      return new Response(content, {
+        status: 200,
+        headers: {
+          'Content-Type': mimeType,
+          'Content-Length': content.length.toString(),
+          'Cache-Control': 'no-cache', // Disable caching for development
+        },
+      });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      console.error('[CanvasProtocol] Error handling request:', error);
+      return createErrorResponse(500, `Internal error: ${message}`);
+    }
+  });
+
+  console.log('[CanvasProtocol] Registered canvas:// protocol handler');
+}

package/src/electron/canvas/canvas-store.ts

@@ -0,0 +1,200 @@
+/**
+ * Canvas Store - File-based persistence for canvas sessions
+ * Uses atomic writes with temporary files for data safety
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { app } from 'electron';
+import type { CanvasSession } from '../../shared/types';
+
+export interface CanvasStoreFile {
+  version: number;
+  sessions: CanvasSession[];
+}
+
+// Lazy-evaluated paths (app.getPath() is not available until app is ready)
+let _canvasDir: string | null = null;
+let _canvasStorePath: string | null = null;
+
+export function getCanvasDir(): string {
+  if (!_canvasDir) {
+    _canvasDir = path.join(app.getPath('userData'), 'canvas');
+  }
+  return _canvasDir;
+}
+
+export function getCanvasStorePath(): string {
+  if (!_canvasStorePath) {
+    _canvasStorePath = path.join(getCanvasDir(), 'sessions.json');
+  }
+  return _canvasStorePath;
+}
+
+// Maximum sessions to keep (to prevent unbounded growth)
+const MAX_SESSIONS = 50;
+
+/**
+ * Validate a single canvas session object
+ */
+function isValidSession(s: unknown): s is CanvasSession {
+  if (!s || typeof s !== 'object') return false;
+  const session = s as Record<string, unknown>;
+  const mode = session.mode;
+  const isValidMode = mode === undefined || mode === 'html' || mode === 'browser';
+  const url = session.url;
+  const isValidUrl = url === undefined || typeof url === 'string';
+  return (
+    typeof session.id === 'string' &&
+    typeof session.taskId === 'string' &&
+    typeof session.workspaceId === 'string' &&
+    typeof session.sessionDir === 'string' &&
+    isValidMode &&
+    isValidUrl &&
+    typeof session.status === 'string' &&
+    ['active', 'paused', 'closed'].includes(session.status as string) &&
+    typeof session.createdAt === 'number' &&
+    typeof session.lastUpdatedAt === 'number'
+  );
+}
+
+/**
+ * Load canvas sessions from the store file
+ * Returns empty array if file doesn't exist or is invalid
+ */
+export async function loadCanvasStore(storePath?: string): Promise<CanvasStoreFile> {
+  const effectivePath = storePath || getCanvasStorePath();
+  try {
+    const raw = await fs.promises.readFile(effectivePath, 'utf-8');
+    const parsed = JSON.parse(raw) as Partial<CanvasStoreFile> | null;
+    const sessions = Array.isArray(parsed?.sessions) ? parsed.sessions : [];
+
+    // Validate and filter sessions
+    const validSessions = sessions.filter((s): s is CanvasSession => {
+      if (!isValidSession(s)) return false;
+
+      // Also verify the session directory still exists
+      try {
+        return fs.existsSync(s.sessionDir);
+      } catch {
+        return false;
+      }
+    });
+
+    return {
+      version: 1,
+      sessions: validSessions,
+    };
+  } catch {
+    // File doesn't exist or is invalid - return empty store
+    return { version: 1, sessions: [] };
+  }
+}
+
+/**
+ * Load canvas store synchronously (for initialization)
+ */
+export function loadCanvasStoreSync(storePath?: string): CanvasStoreFile {
+  const effectivePath = storePath || getCanvasStorePath();
+  try {
+    const raw = fs.readFileSync(effectivePath, 'utf-8');
+    const parsed = JSON.parse(raw) as Partial<CanvasStoreFile> | null;
+    const sessions = Array.isArray(parsed?.sessions) ? parsed.sessions : [];
+
+    // Validate and filter sessions
+    const validSessions = sessions.filter((s): s is CanvasSession => {
+      if (!isValidSession(s)) return false;
+
+      // Also verify the session directory still exists
+      try {
+        return fs.existsSync(s.sessionDir);
+      } catch {
+        return false;
+      }
+    });
+
+    return {
+      version: 1,
+      sessions: validSessions,
+    };
+  } catch {
+    return { version: 1, sessions: [] };
+  }
+}
+
+/**
+ * Save canvas sessions to the store file
+ * Uses atomic writes to prevent data corruption
+ */
+export async function saveCanvasStore(
+  store: CanvasStoreFile,
+  storePath?: string
+): Promise<void> {
+  const effectivePath = storePath || getCanvasStorePath();
+
+  // Ensure directory exists
+  await fs.promises.mkdir(path.dirname(effectivePath), { recursive: true });
+
+  // Only keep non-closed sessions, and limit to max
+  let sessionsToSave = store.sessions.filter(s => s.status !== 'closed');
+
+  // Trim to max sessions (keep most recent)
+  if (sessionsToSave.length > MAX_SESSIONS) {
+    sessionsToSave = sessionsToSave
+      .sort((a, b) => b.lastUpdatedAt - a.lastUpdatedAt)
+      .slice(0, MAX_SESSIONS);
+  }
+
+  const storeToSave: CanvasStoreFile = {
+    version: 1,
+    sessions: sessionsToSave,
+  };
+
+  // Generate temp file path with process ID and random suffix
+  const tmp = `${effectivePath}.${process.pid}.${Math.random().toString(16).slice(2)}.tmp`;
+
+  // Write to temp file
+  const json = JSON.stringify(storeToSave, null, 2);
+  await fs.promises.writeFile(tmp, json, 'utf-8');
+
+  // Atomic rename
+  await fs.promises.rename(tmp, effectivePath);
+}
+
+/**
+ * Save canvas store synchronously
+ */
+export function saveCanvasStoreSync(
+  store: CanvasStoreFile,
+  storePath?: string
+): void {
+  const effectivePath = storePath || getCanvasStorePath();
+
+  // Ensure directory exists
+  fs.mkdirSync(path.dirname(effectivePath), { recursive: true });
+
+  // Only keep non-closed sessions, and limit to max
+  let sessionsToSave = store.sessions.filter(s => s.status !== 'closed');
+
+  // Trim to max sessions (keep most recent)
+  if (sessionsToSave.length > MAX_SESSIONS) {
+    sessionsToSave = sessionsToSave
+      .sort((a, b) => b.lastUpdatedAt - a.lastUpdatedAt)
+      .slice(0, MAX_SESSIONS);
+  }
+
+  const storeToSave: CanvasStoreFile = {
+    version: 1,
+    sessions: sessionsToSave,
+  };
+
+  // Generate temp file path
+  const tmp = `${effectivePath}.${process.pid}.${Math.random().toString(16).slice(2)}.tmp`;
+
+  // Write to temp file
+  const json = JSON.stringify(storeToSave, null, 2);
+  fs.writeFileSync(tmp, json, 'utf-8');
+
+  // Atomic rename
+  fs.renameSync(tmp, effectivePath);
+}

package/src/electron/canvas/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Live Canvas Module
+ *
+ * Agent-driven visual workspace for rendering interactive HTML/CSS/JS content.
+ */
+
+export { CanvasManager } from './canvas-manager';
+export { registerCanvasScheme, registerCanvasProtocol } from './canvas-protocol';