@myrialabs/clopen 0.0.1

package/backend/lib/mcp/servers/weather/get-temperature.ts

@@ -0,0 +1,56 @@
+/**
+ * Get Temperature Handler
+ */
+
+export async function getTemperatureHandler(args: { latitude: number; longitude: number }) {
+	try {
+		// Call Open-Meteo API (no API key required)
+		const url = `https://api.open-meteo.com/v1/forecast?latitude=${args.latitude}&longitude=${args.longitude}&current=temperature_2m&temperature_unit=fahrenheit`;
+
+		const response = await fetch(url);
+
+		if (!response.ok) {
+			return {
+				content: [{
+					type: "text" as const,
+					text: `Failed to fetch weather data: ${response.status} ${response.statusText}`
+				}],
+				isError: true
+			};
+		}
+
+		const data = await response.json();
+
+		// Check if temperature data is available
+		if (!data.current || data.current.temperature_2m === undefined) {
+			return {
+				content: [{
+					type: "text" as const,
+					text: "Temperature data not available for this location."
+				}],
+				isError: true
+			};
+		}
+
+		const temperature = data.current.temperature_2m;
+		const unit = data.current_units?.temperature_2m || "°F";
+
+		return {
+			content: [{
+				type: "text" as const,
+				text: `Temperature: ${temperature}${unit}`
+			}]
+		};
+
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+
+		return {
+			content: [{
+				type: "text" as const,
+				text: `Error fetching temperature: ${errorMessage}`
+			}],
+			isError: true
+		};
+	}
+}

package/backend/lib/mcp/servers/weather/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Weather Service - Custom MCP Server
+ *
+ * Provides weather-related tools using the Open-Meteo API.
+ * No API key required.
+ */
+
+import { z } from "zod";
+import { defineServer } from "../helper";
+import { getTemperatureHandler } from "./get-temperature";
+
+export default defineServer({
+	name: "weather-service",
+	version: "1.0.0",
+	tools: {
+		"get_temperature": {
+			description: "Get current temperature for a location using coordinates. Returns temperature in Fahrenheit.",
+			schema: {
+				latitude: z.number()
+					.min(-90)
+					.max(90)
+					.describe("Latitude coordinate (-90 to 90)"),
+				longitude: z.number()
+					.min(-180)
+					.max(180)
+					.describe("Longitude coordinate (-180 to 180)")
+			},
+			handler: getTemperatureHandler
+		}
+	}
+});

package/backend/lib/mcp/stdio-server.ts

@@ -0,0 +1,103 @@
+#!/usr/bin/env bun
+/**
+ * MCP Stdio Server for Open Code
+ *
+ * Standalone subprocess that exposes our custom MCP tools via stdio transport.
+ * Open Code spawns this process and communicates over stdin/stdout (JSON-RPC 2.0).
+ *
+ * Tool definitions (schema, description) are loaded from the SAME source as
+ * Claude Code — the `serverMetadata` registry in `./servers/index.ts`.
+ *
+ * ALL tool calls are proxied to the main Clopen server via WSClient bridge,
+ * because handlers need in-process access to browser instances, project context, etc.
+ */
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { WSClient } from '$shared/utils/ws-client';
+import { serverMetadata } from './servers/index';
+import { mcpServers } from './config';
+
+// ============================================================================
+// WebSocket Bridge — proxies tool calls to the main Clopen server via WSClient
+// ============================================================================
+
+const BRIDGE_PORT = process.env.CLOPEN_PORT || '9141';
+const WS_URL = `ws://localhost:${BRIDGE_PORT}/ws`;
+
+/**
+ * WSClient instance for communicating with the main Clopen server.
+ * Uses the same protocol as the frontend (JSON messages with action/payload).
+ */
+const wsClient = new WSClient<any>(WS_URL, {
+	autoReconnect: true,
+	maxReconnectAttempts: 10,
+	reconnectDelay: 1000,
+	maxReconnectDelay: 10000,
+});
+
+/**
+ * Call a tool handler on the main Clopen server via the WS bridge.
+ * Uses WSClient.http() which follows the standard request-response pattern.
+ */
+async function callBridge(
+	serverName: string,
+	toolName: string,
+	args: Record<string, unknown>
+): Promise<{ content: Array<{ type: string; text?: string; data?: string; mimeType?: string }>; isError?: boolean }> {
+	try {
+		return await wsClient.http('mcp:execute' as any, {
+			server: serverName,
+			tool: toolName,
+			args,
+		} as any, 30000);
+	} catch (error) {
+		const msg = error instanceof Error ? error.message : String(error);
+		return {
+			content: [{ type: 'text', text: `Bridge connection failed: ${msg}` }],
+			isError: true,
+		};
+	}
+}
+
+// ============================================================================
+// Build MCP server from existing server metadata (single source of truth)
+// ============================================================================
+
+const server = new McpServer({
+	name: 'clopen-mcp',
+	version: '1.0.0',
+});
+
+// Iterate over all configured servers and register their enabled tools
+for (const [serverName, serverConfig] of Object.entries(mcpServers)) {
+	if (!serverConfig.enabled) continue;
+
+	// Get tool definitions from the metadata registry
+	const meta = (serverMetadata as Record<string, { toolDefs: Record<string, { description: string; schema: Record<string, any> }> }>)[serverName];
+	if (!meta) continue;
+
+	for (const toolName of serverConfig.tools) {
+		const toolDef = meta.toolDefs[toolName];
+		if (!toolDef) continue;
+
+		// Register tool with the same schema/description, but handler goes through bridge
+		server.registerTool(
+			toolName,
+			{
+				description: toolDef.description,
+				inputSchema: toolDef.schema,
+			},
+			async (args: Record<string, unknown>) => {
+				return await callBridge(serverName, toolName, args) as any;
+			}
+		);
+	}
+}
+
+// ============================================================================
+// Connect via stdio transport
+// ============================================================================
+
+const transport = new StdioServerTransport();
+await server.connect(transport);

package/backend/lib/mcp/types.ts

@@ -0,0 +1,65 @@
+/**
+ * MCP (Model Context Protocol) Custom Tools - Type Definitions
+ *
+ * This file contains all TypeScript types and interfaces used across
+ * the custom MCP tools system.
+ */
+
+import type { serverMetadata } from './servers';
+import type { McpSdkServerConfigWithInstance } from '@anthropic-ai/claude-agent-sdk';
+
+/**
+ * Extract server names from metadata registry
+ */
+export type ServerName = keyof typeof serverMetadata;
+
+/**
+ * Extract tool names from a specific server
+ * Automatically inferred from server metadata
+ */
+export type ToolsForServer<S extends ServerName> = (typeof serverMetadata)[S]['tools'][number];
+
+/**
+ * Configuration for an MCP server (user-defined)
+ */
+export type ServerConfig<S extends ServerName = ServerName> = {
+	/** Whether this server is enabled */
+	enabled: boolean;
+	/** List of enabled tool names for this server */
+	tools: readonly ToolsForServer<S>[];
+};
+
+/**
+ * Complete server configuration with instance (internal use)
+ */
+export type McpServerConfigWithInstance<S extends ServerName = ServerName> = ServerConfig<S> & {
+	instance: McpSdkServerConfigWithInstance;
+};
+
+/**
+ * Parsed MCP tool name
+ * Format: mcp__server-name__tool-name
+ */
+export interface ParsedMcpToolName {
+	/** Server name (e.g., "weather-service") */
+	server: string;
+	/** Tool name (e.g., "get_temperature") */
+	tool: string;
+	/** Full tool name (e.g., "mcp__weather-service__get_temperature") */
+	fullName: string;
+}
+
+/**
+ * MCP server status from SDK
+ */
+export interface McpServerStatus {
+	/** Server name */
+	name: string;
+	/** Connection status */
+	status: 'connected' | 'failed' | 'needs-auth' | 'pending';
+	/** Server information if connected */
+	serverInfo?: {
+		name: string;
+		version: string;
+	};
+}

package/backend/lib/preview/browser/browser-audio-capture.ts

@@ -0,0 +1,86 @@
+/**
+ * Browser Audio Capture Handler
+ *
+ * Handles audio capture setup and management for headless browser sessions.
+ * Audio is captured via AudioContext interception and encoded with AudioEncoder (Opus).
+ */
+
+import type { Page } from 'puppeteer';
+import type { StreamingConfig } from './types';
+import { audioCaptureScript } from './scripts/audio-stream';
+
+export class BrowserAudioCapture {
+	/**
+	 * Setup audio capture for a page
+	 * Injects audio capture script that intercepts AudioContext before page loads
+	 */
+	async setupAudioCapture(page: Page, config: StreamingConfig['audio']): Promise<void> {
+		// Inject audio capture script BEFORE page loads to intercept AudioContext
+		await page.evaluateOnNewDocument(audioCaptureScript, config);
+	}
+
+	/**
+	 * Check if audio encoder is supported in the page
+	 */
+	async isAudioSupported(page: Page): Promise<boolean> {
+		try {
+			return await page.evaluate(() => {
+				return typeof (window as any).__audioEncoder?.isSupported === 'function'
+					&& (window as any).__audioEncoder.isSupported();
+			});
+		} catch {
+			return false;
+		}
+	}
+
+	/**
+	 * Initialize and start audio capture
+	 */
+	async startAudioCapture(page: Page): Promise<boolean> {
+		try {
+			const initialized = await page.evaluate(async () => {
+				const encoder = (window as any).__audioEncoder;
+				if (!encoder) return false;
+
+				const initiated = await encoder.init();
+				if (initiated) {
+					return encoder.start();
+				}
+				return false;
+			});
+
+			return initialized;
+		} catch (error) {
+			return false;
+		}
+	}
+
+	/**
+	 * Stop audio capture
+	 */
+	async stopAudioCapture(page: Page): Promise<void> {
+		try {
+			await page.evaluate(() => {
+				const encoder = (window as any).__audioEncoder;
+				if (encoder) {
+					encoder.stop();
+				}
+			});
+		} catch {
+			// Ignore errors during cleanup
+		}
+	}
+
+	/**
+	 * Check if audio is currently being captured
+	 */
+	async isCapturing(page: Page): Promise<boolean> {
+		try {
+			return await page.evaluate(() => {
+				return (window as any).__audioEncoder?.isCapturing() || false;
+			});
+		} catch {
+			return false;
+		}
+	}
+}

package/backend/lib/preview/browser/browser-console-manager.ts

@@ -0,0 +1,263 @@
+import { EventEmitter } from 'events';
+import type { Page, ConsoleMessage as PuppeteerConsoleMessage, HTTPResponse } from 'puppeteer';
+import type { BrowserConsoleMessage, BrowserTab } from './types';
+
+import { debug } from '$shared/utils/logger';
+export class BrowserConsoleManager extends EventEmitter {
+	constructor() {
+		super();
+	}
+
+	async setupConsoleLogging(sessionId: string, page: Page, session: BrowserTab) {
+
+		// Clear any existing console logs for this session
+		session.consoleLogs = [];
+
+		// Listen to ALL console events from the page
+		page.on('console', async (consoleMessage: PuppeteerConsoleMessage) => {
+			// Always log to server console for debugging
+			if (!session.consoleEnabled) {
+				return;
+			}
+
+			try {
+				const messageId = `console-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+				const text = consoleMessage.text();
+				const type = consoleMessage.type() as BrowserConsoleMessage['type'];
+
+				// Get location information (Puppeteer uses location() method)
+				const location = consoleMessage.location();
+				const messageLocation = location ? {
+					url: location.url || '',
+					lineNumber: location.lineNumber || 0,
+					columnNumber: location.columnNumber || 0
+				} : undefined;
+
+				// Extract arguments with improved error handling
+				let args: any[] = [];
+				try {
+					const messageArgs = consoleMessage.args();
+					if (messageArgs && messageArgs.length > 0) {
+						args = await Promise.all(
+							messageArgs.map(async (arg) => {
+								try {
+									// Try to get JSON value first
+									const jsonValue = await arg.jsonValue();
+									return jsonValue;
+								} catch {
+									try {
+										// Fallback to string representation
+										return arg.toString();
+									} catch {
+										// Final fallback
+										return '[Unable to serialize]';
+									}
+								}
+							})
+						);
+					}
+				} catch (error) {
+					debug.warn('preview', 'Could not extract console message args:', error);
+					args = [];
+				}
+
+				const consoleLog: BrowserConsoleMessage = {
+					id: messageId,
+					type,
+					text,
+					args,
+					location: messageLocation,
+					timestamp: Date.now()
+				};
+
+				// Add to session logs (with limit to prevent memory issues)
+				session.consoleLogs.push(consoleLog);
+				if (session.consoleLogs.length > 1000) {
+					session.consoleLogs = session.consoleLogs.slice(-500); // Keep last 500 logs
+				}
+
+				// Emit console message event for real-time streaming
+				this.emit('console-message', {
+					sessionId: session.id,
+					message: consoleLog
+				});
+
+
+			} catch (error) {
+				debug.error('preview', '❌ Error processing console message:', error);
+			}
+		});
+
+		// Listen to page errors (uncaught JavaScript errors)
+		page.on('pageerror', (err) => {
+			if (!session.consoleEnabled) {
+				return;
+			}
+
+			try {
+				const error = err as Error;
+				const messageId = `error-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+				const consoleLog: BrowserConsoleMessage = {
+					id: messageId,
+					type: 'error',
+					text: `Uncaught ${error.message || String(err)}`,
+					stackTrace: error.stack,
+					timestamp: Date.now()
+				};
+
+				session.consoleLogs.push(consoleLog);
+				if (session.consoleLogs.length > 1000) {
+					session.consoleLogs = session.consoleLogs.slice(-500);
+				}
+
+				this.emit('console-message', {
+					sessionId: session.id,
+					message: consoleLog
+				});
+
+
+			} catch (err) {
+				debug.error('preview', '❌ Error processing page error:', err);
+			}
+		});
+
+		// Listen to response failures (network errors)
+		page.on('response', (response: HTTPResponse) => {
+			if (!session.consoleEnabled) return;
+
+			if (!response.ok() && response.status() >= 400) {
+
+				
+				try {
+					const messageId = `network-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+					const consoleLog: BrowserConsoleMessage = {
+						id: messageId,
+						type: 'error',
+						text: `Network error: ${response.status()} ${response.statusText()} - ${response.url()}`,
+						location: {
+							url: response.url(),
+							lineNumber: 0,
+							columnNumber: 0
+						},
+						timestamp: Date.now()
+					};
+
+					session.consoleLogs.push(consoleLog);
+					if (session.consoleLogs.length > 1000) {
+						session.consoleLogs = session.consoleLogs.slice(-500);
+					}
+
+					this.emit('console-message', {
+						sessionId: session.id,
+						message: consoleLog
+					});
+
+
+				} catch (err) {
+					debug.error('preview', '❌ Error processing network error:', err);
+				}
+			}
+		});
+
+		// Console monitoring is handled automatically by Puppeteer's console event listener
+		// No additional injection needed
+
+
+	}
+
+	getConsoleLogs(session: BrowserTab): BrowserConsoleMessage[] {
+		return session ? session.consoleLogs : [];
+	}
+
+	clearConsoleLogs(session: BrowserTab): boolean {
+		if (!session) return false;
+
+		session.consoleLogs = [];
+		
+		// Add a clear message to console logs
+		const clearMessage: BrowserConsoleMessage = {
+			id: `clear-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+			type: 'clear',
+			text: 'Console was cleared',
+			timestamp: Date.now()
+		};
+
+		session.consoleLogs.push(clearMessage);
+
+		// Emit clear event
+		this.emit('console-clear', {
+			sessionId: session.id,
+			timestamp: Date.now()
+		});
+
+
+		return true;
+	}
+
+	toggleConsoleLogging(session: BrowserTab, enabled: boolean): boolean {
+		if (!session) return false;
+
+		session.consoleEnabled = enabled;
+
+		return true;
+	}
+
+	async executeConsoleCommand(session: BrowserTab, command: string): Promise<any> {
+		if (!session) throw new Error('Session not found');
+
+		try {
+
+			
+			// Execute the command in the browser context
+			const result = await session.page.evaluate((cmd: string) => {
+				// Create a safe evaluation context
+				try {
+					// Use Function constructor for safer evaluation than eval
+					const func = new Function('return ' + cmd);
+					return func();
+				} catch (error) {
+					return { error: error instanceof Error ? error.message : String(error) };
+				}
+			}, command);
+
+			// Log the command execution as a console message
+			const commandMessage: BrowserConsoleMessage = {
+				id: `command-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+				type: 'log',
+				text: `> ${command}`,
+				args: [result],
+				timestamp: Date.now()
+			};
+
+			session.consoleLogs.push(commandMessage);
+
+			// Emit the command result
+			this.emit('console-message', {
+				sessionId: session.id,
+				message: commandMessage
+			});
+
+			return result;
+		} catch (error) {
+			debug.error('preview', 'Error executing console command:', error);
+			
+			// Log the error as a console message
+			const errorMessage: BrowserConsoleMessage = {
+				id: `command-error-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+				type: 'error',
+				text: `Error executing command: ${command}`,
+				args: [error instanceof Error ? error.message : String(error)],
+				timestamp: Date.now()
+			};
+
+			session.consoleLogs.push(errorMessage);
+
+			this.emit('console-message', {
+				sessionId: session.id,
+				message: errorMessage
+			});
+
+			throw error;
+		}
+	}
+}