@myrialabs/clopen 0.1.9 → 0.2.0

package/backend/lib/engine/adapters/opencode/stream.ts

@@ -40,7 +40,7 @@ import {
 	convertSubtaskToolUseOnly,
 	getToolInput,
 } from './message-converter';
-import { ensureClient, getClient } from './server';
+import { ensureClient, getClient, getServerUrl } from './server';
 import { debug } from '$shared/utils/logger';
 
 /** Map SDK Model.status to our category */
@@ -75,6 +75,8 @@ export class OpenCodeEngine implements AIEngine {
 	private activeAbortController: AbortController | null = null;
 	private activeSessionId: string | null = null;
 	private activeProjectPath: string | null = null;
+	/** Pending question requests keyed by tool callID → { requestId, questions } */
+	private pendingQuestions = new Map<string, { requestId: string; questions: Array<{ question: string }> }>();
 
 	get isInitialized(): boolean {
 		return this._isInitialized;
@@ -102,6 +104,7 @@ export class OpenCodeEngine implements AIEngine {
 	 */
 	async dispose(): Promise<void> {
 		await this.cancel();
+		this.pendingQuestions.clear();
 		this._isInitialized = false;
 		debug.log('engine', 'Open Code engine instance disposed');
 	}
@@ -664,6 +667,39 @@ export class OpenCodeEngine implements AIEngine {
 							break;
 						}
 
+						// v2 question event — emitted when the question tool needs user input
+						case 'question.asked': {
+							const props = evt.properties as {
+								id: string;
+								sessionID: string;
+								questions: Array<{ question: string; header: string; options: Array<{ label: string; description: string }> }>;
+								tool?: { messageID: string; callID: string };
+							};
+							if (props.sessionID !== sessionId) break;
+							if (props.tool?.callID) {
+								this.pendingQuestions.set(props.tool.callID, {
+									requestId: props.id,
+									questions: props.questions,
+								});
+								debug.log('engine', `[OC] question.asked: stored question ${props.id} for callID ${props.tool.callID}`);
+							}
+							break;
+						}
+
+						// v2 permission event — auto-approve to avoid blocking the session
+						// (tool permissions like file_write, bash, etc. are bypassed)
+						case 'permission.asked':
+						case 'permission.updated': {
+							const props = evt.properties as {
+								id: string;
+								sessionID: string;
+								callID?: string;
+							};
+							if (props.sessionID !== sessionId) break;
+							this.autoApprovePermission(props.id, props.sessionID);
+							break;
+						}
+
 						case 'session.error': {
 							const errorProps = (event as EventSessionError).properties;
 							// Only handle errors for our session (sessionID is optional on errors)
@@ -729,6 +765,7 @@ export class OpenCodeEngine implements AIEngine {
 			this.activeAbortController = null;
 			this.activeSessionId = null;
 			this.activeProjectPath = null;
+			this.pendingQuestions.clear();
 		}
 	}
 
@@ -754,6 +791,7 @@ export class OpenCodeEngine implements AIEngine {
 		this._isActive = false;
 		this.activeSessionId = null;
 		this.activeProjectPath = null;
+		this.pendingQuestions.clear();
 	}
 
 	/**
@@ -779,6 +817,142 @@ export class OpenCodeEngine implements AIEngine {
 		await this.cancel();
 	}
 
+	/**
+	 * Resolve a pending AskUserQuestion by replying via the OpenCode question API.
+	 *
+	 * Flow:
+	 * 1. If a `question.asked` event was received → use stored requestId to reply
+	 * 2. Fallback → fetch pending questions from GET /question and match by callID
+	 *
+	 * The reply is sent to POST /question/{requestID}/reply with answers
+	 * ordered by the original questions array.
+	 */
+	resolveUserAnswer(toolUseId: string, answers: Record<string, string>): boolean {
+		const pending = this.pendingQuestions.get(toolUseId);
+
+		if (pending) {
+			// Convert Record<questionText, answerLabel> → Array<Array<string>> ordered by questions
+			const orderedAnswers = pending.questions.map(q => {
+				const answer = answers[q.question];
+				return answer ? [answer] : [];
+			});
+			this.replyToQuestion(pending.requestId, orderedAnswers);
+			this.pendingQuestions.delete(toolUseId);
+			return true;
+		}
+
+		// Fallback: fetch pending questions from the API and find matching one
+		debug.log('engine', `resolveUserAnswer: No stored question for toolUseId ${toolUseId}, fetching from API...`);
+		this.fetchAndReplyToQuestion(toolUseId, answers);
+		return true;
+	}
+
+	/**
+	 * POST /question/{requestID}/reply to send user answers back to the OpenCode server.
+	 */
+	private replyToQuestion(requestId: string, orderedAnswers: string[][]): void {
+		const serverUrl = getServerUrl();
+		if (!serverUrl) {
+			debug.warn('engine', 'replyToQuestion: Server URL not available');
+			return;
+		}
+
+		const dirParam = this.activeProjectPath ? `?directory=${encodeURIComponent(this.activeProjectPath)}` : '';
+		const url = `${serverUrl}/question/${requestId}/reply${dirParam}`;
+		debug.log('engine', `Replying to question ${requestId}:`, orderedAnswers);
+
+		fetch(url, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ answers: orderedAnswers }),
+		}).then(async res => {
+			if (res.ok) {
+				debug.log('engine', `Question reply accepted: ${requestId} (${res.status})`);
+			} else {
+				const body = await res.text().catch(() => '');
+				debug.error('engine', `Question reply failed: ${res.status} ${res.statusText}`, body);
+			}
+		}).catch(error => {
+			debug.error('engine', 'Failed to reply to question:', error);
+		});
+	}
+
+	/**
+	 * Fallback: GET /question to list pending questions, find the matching one, and reply.
+	 */
+	private async fetchAndReplyToQuestion(toolUseId: string, answers: Record<string, string>): Promise<void> {
+		const serverUrl = getServerUrl();
+		if (!serverUrl) {
+			debug.warn('engine', 'fetchAndReplyToQuestion: Server URL not available');
+			return;
+		}
+
+		try {
+			const dirParam = this.activeProjectPath ? `?directory=${encodeURIComponent(this.activeProjectPath)}` : '';
+			const res = await fetch(`${serverUrl}/question${dirParam}`);
+			if (!res.ok) {
+				debug.error('engine', `Failed to list pending questions: ${res.status}`);
+				return;
+			}
+
+			const questions = await res.json() as Array<{
+				id: string;
+				questions: Array<{ question: string }>;
+				tool?: { callID: string };
+			}>;
+
+			const matching = questions.find(q => q.tool?.callID === toolUseId);
+			if (!matching) {
+				debug.warn('engine', 'fetchAndReplyToQuestion: No matching question for toolUseId:', toolUseId);
+				return;
+			}
+
+			const orderedAnswers = matching.questions.map(q => {
+				const answer = answers[q.question];
+				return answer ? [answer] : [];
+			});
+			this.replyToQuestion(matching.id, orderedAnswers);
+		} catch (error) {
+			debug.error('engine', 'Failed to fetch and reply to question:', error);
+		}
+	}
+
+	/**
+	 * Auto-approve a permission request to avoid blocking the session.
+	 * Uses direct HTTP since the v1 client may not have the v2 permission.reply method.
+	 */
+	private autoApprovePermission(permissionId: string, sessionId: string): void {
+		const serverUrl = getServerUrl();
+		if (!serverUrl) return;
+
+		// Try v2 endpoint first (/permission/{requestID}/reply), fall back to v1
+		fetch(`${serverUrl}/permission/${permissionId}/reply`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ reply: 'once' }),
+		}).then(res => {
+			if (res.ok) {
+				debug.log('engine', `[OC] auto-approved permission ${permissionId} (v2)`);
+				return;
+			}
+			// v2 endpoint not available — try v1
+			const client = getClient();
+			if (client) {
+				client.postSessionIdPermissionsPermissionId({
+					path: { id: sessionId, permissionID: permissionId },
+					body: { response: 'once' },
+					...(this.activeProjectPath && { query: { directory: this.activeProjectPath } }),
+				}).then(() => {
+					debug.log('engine', `[OC] auto-approved permission ${permissionId} (v1)`);
+				}).catch(err => {
+					debug.error('engine', 'Failed to auto-approve permission (v1):', err);
+				});
+			}
+		}).catch(error => {
+			debug.error('engine', 'Failed to auto-approve permission:', error);
+		});
+	}
+
 	/**
 	 * Extract prompt parts (text + file attachments) from SDKUserMessage.
 	 * Converts Claude-format image/document blocks to OpenCode FilePartInput format.

package/backend/lib/mcp/config.ts

@@ -6,11 +6,10 @@
  */
 
 import type { McpSdkServerConfigWithInstance, McpServerConfig } from "@anthropic-ai/claude-agent-sdk";
-import type { McpLocalConfig } from '@opencode-ai/sdk';
+import type { McpRemoteConfig } from '@opencode-ai/sdk';
 import type { ServerConfig, ParsedMcpToolName, ServerName } from './types';
 import { serverRegistry, serverFactories } from './servers';
 import { debug } from '$shared/utils/logger';
-import { resolve } from 'path';
 import { SERVER_ENV } from '../shared/env';
 
 /**
@@ -21,7 +20,7 @@ import { SERVER_ENV } from '../shared/env';
  *
  * Type-safe: Server names and tool names are validated at compile time!
  */
-const mcpServersConfig: Record<ServerName, ServerConfig> = {
+export const mcpServersConfig: Record<ServerName, ServerConfig> = {
 	"weather-service": {
 		enabled: true,
 		tools: [
@@ -256,6 +255,8 @@ export function getMcpStats() {
  * This function strips the prefix and maps back using the mcpServers
  * registry — the SAME source that defines which tools exist.
  *
+ * Works for both remote HTTP MCP and legacy stdio MCP (same naming convention).
+ *
  * Returns null if the tool name is not one of our custom MCP tools.
  */
 export function resolveOpenCodeToolName(toolName: string): string | null {
@@ -263,7 +264,7 @@ export function resolveOpenCodeToolName(toolName: string): string | null {
 	if (toolName.startsWith('mcp__')) return toolName;
 
 	// Strip Open Code MCP server prefix if present
-	// Open Code prefixes with the stdio server name: "clopen-mcp_<tool>"
+	// Open Code prefixes with the server config key: "clopen-mcp_<tool>"
 	let rawName = toolName;
 	const ocPrefix = 'clopen-mcp_';
 	if (rawName.startsWith(ocPrefix)) {
@@ -288,32 +289,26 @@ export function resolveOpenCodeToolName(toolName: string): string | null {
 /**
  * Get MCP configuration for Open Code engine.
  *
- * Open Code expects MCP servers as local (stdio subprocess) or remote (HTTP URL).
- * We provide a single local MCP server that wraps all our custom tools.
- * The server communicates with the main Clopen process via an HTTP bridge
- * for tools that need in-process access (browser-automation).
+ * Open Code connects to a remote MCP HTTP server running in the main Clopen
+ * process. Tool handlers execute in-process — no subprocess, no bridge.
+ *
+ * This is the Open Code equivalent of Claude Code's in-process MCP servers.
  */
-export function getOpenCodeMcpConfig(): Record<string, McpLocalConfig> {
+export function getOpenCodeMcpConfig(): Record<string, McpRemoteConfig> {
 	// Check if any servers are enabled
 	const enabledServers = getEnabledServerNames();
 	if (enabledServers.length === 0) {
 		return {};
 	}
 
-	// Resolve path to the stdio server script
-	const stdioServerPath = resolve(import.meta.dir, 'stdio-server.ts');
 	const port = SERVER_ENV.PORT;
 
-	debug.log('mcp', `📦 Open Code MCP: stdio server at ${stdioServerPath}`);
-	debug.log('mcp', `📦 Open Code MCP: bridge port ${port}`);
+	debug.log('mcp', `📦 Open Code MCP: remote server at http://localhost:${port}/mcp`);
 
 	return {
 		'clopen-mcp': {
-			type: 'local',
-			command: ['bun', 'run', stdioServerPath],
-			environment: {
-				CLOPEN_PORT: String(port),
-			},
+			type: 'remote',
+			url: `http://localhost:${port}/mcp`,
 			enabled: true,
 			timeout: 10000,
 		},

package/backend/lib/mcp/index.ts

@@ -2,6 +2,11 @@
  * MCP (Model Context Protocol) Custom Tools
  *
  * Main export point for the custom MCP tools system.
+ *
+ * Claude Code: in-process MCP servers via createSdkMcpServer()
+ * Open Code:   remote HTTP MCP server via createRemoteMcpServer()
+ *
+ * Both use the same tool definitions from defineServer() in servers/helper.ts.
  */
 
 // Type definitions
@@ -13,6 +18,7 @@ export type {
 // Main configuration and all utilities
 export {
 	mcpServers,
+	mcpServersConfig,
 	getEnabledMcpServers,
 	getAllowedMcpTools,
 	getServerConfig,
@@ -31,5 +37,8 @@ export {
 // Server implementations
 export * from './servers';
 
+// Remote MCP HTTP server for Open Code
+export { handleMcpRequest, closeMcpServer } from './remote-server';
+
 // Project context service for MCP tool handlers
 export { projectContextService } from './project-context';

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

@@ -0,0 +1,132 @@
+/**
+ * Remote MCP HTTP Server for Open Code
+ *
+ * Serves custom MCP tools over HTTP (Streamable HTTP transport) so Open Code
+ * can connect via `type: 'remote'` config instead of spawning a stdio subprocess.
+ *
+ * Tool handlers execute directly in the main Clopen process — no subprocess,
+ * no WebSocket bridge. This is architecturally identical to how Claude Code
+ * uses in-process MCP servers via createSdkMcpServer().
+ *
+ * Transport: WebStandardStreamableHTTPServerTransport (works natively with Bun)
+ */
+
+import { WebStandardStreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js';
+import { isInitializeRequest } from '@modelcontextprotocol/sdk/types.js';
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { createRemoteMcpServer } from './servers/helper';
+import { debug } from '$shared/utils/logger';
+
+// Lazy imports to avoid circular dependencies at module load time
+let _allServers: Parameters<typeof createRemoteMcpServer>[0] | null = null;
+let _enabledConfig: Parameters<typeof createRemoteMcpServer>[1] | null = null;
+
+async function getServerDeps() {
+	if (!_allServers || !_enabledConfig) {
+		const { allServers } = await import('./servers/index');
+		const { mcpServersConfig } = await import('./config');
+		_allServers = allServers;
+		_enabledConfig = mcpServersConfig;
+	}
+	return { allServers: _allServers, enabledConfig: _enabledConfig };
+}
+
+// ============================================================================
+// Session Management
+// ============================================================================
+
+/** Active transports keyed by MCP session ID */
+const transports = new Map<string, WebStandardStreamableHTTPServerTransport>();
+
+/** Active MCP servers keyed by MCP session ID */
+const servers = new Map<string, McpServer>();
+
+/**
+ * Handle an incoming MCP HTTP request (GET/POST/DELETE).
+ *
+ * Mounted at /mcp on the main Elysia server.
+ * Follows the Streamable HTTP transport protocol:
+ * - POST without session: initialization → create new transport + server
+ * - POST with session: route to existing transport
+ * - GET with session: SSE stream for server notifications
+ * - DELETE with session: close session
+ */
+export async function handleMcpRequest(request: Request): Promise<Response> {
+	const sessionId = request.headers.get('mcp-session-id');
+
+	// Existing session — route to its transport
+	if (sessionId && transports.has(sessionId)) {
+		const transport = transports.get(sessionId)!;
+		return transport.handleRequest(request);
+	}
+
+	// New initialization request — create transport + MCP server
+	if (request.method === 'POST') {
+		// Parse body to check if it's an init request
+		const body = await request.json();
+
+		if (isInitializeRequest(body)) {
+			const { allServers, enabledConfig } = await getServerDeps();
+
+			const transport = new WebStandardStreamableHTTPServerTransport({
+				sessionIdGenerator: () => crypto.randomUUID(),
+				onsessioninitialized: (sid) => {
+					transports.set(sid, transport);
+					debug.log('mcp', `🌐 Remote MCP session initialized: ${sid}`);
+				},
+				onsessionclosed: (sid) => {
+					transports.delete(sid);
+					servers.delete(sid);
+					debug.log('mcp', `🌐 Remote MCP session closed: ${sid}`);
+				},
+			});
+
+			transport.onclose = () => {
+				if (transport.sessionId) {
+					transports.delete(transport.sessionId);
+					servers.delete(transport.sessionId);
+				}
+			};
+
+			// Create a fresh MCP server with all enabled tools (in-process handlers)
+			const mcpServer = createRemoteMcpServer(allServers, enabledConfig);
+			await mcpServer.connect(transport);
+
+			// Store server reference for cleanup
+			if (transport.sessionId) {
+				servers.set(transport.sessionId, mcpServer);
+			}
+
+			// Handle the initialization request with pre-parsed body
+			return transport.handleRequest(request, { parsedBody: body });
+		}
+	}
+
+	// Invalid request
+	return new Response(JSON.stringify({
+		jsonrpc: '2.0',
+		error: { code: -32000, message: 'Bad Request: No valid session ID provided' },
+		id: null,
+	}), {
+		status: 400,
+		headers: { 'Content-Type': 'application/json' },
+	});
+}
+
+/**
+ * Close all active MCP sessions and transports.
+ * Called during graceful server shutdown.
+ */
+export async function closeMcpServer(): Promise<void> {
+	for (const [sessionId, transport] of transports) {
+		try {
+			await transport.close();
+			debug.log('mcp', `🌐 Remote MCP transport closed: ${sessionId}`);
+		} catch (error) {
+			debug.error('mcp', `Error closing MCP transport ${sessionId}:`, error);
+		}
+	}
+	transports.clear();
+	servers.clear();
+	debug.log('mcp', '🌐 All remote MCP sessions closed');
+}

package/backend/lib/mcp/servers/helper.ts

@@ -3,10 +3,14 @@
  *
  * Stores both the Claude SDK server instance AND raw tool definitions
  * so the same source can be used for Claude Code (in-process) and
- * Open Code (stdio subprocess via @modelcontextprotocol/sdk).
+ * Open Code (remote HTTP MCP via @modelcontextprotocol/sdk).
+ *
+ * Claude Code: createSdkMcpServer() → in-process MCP server
+ * Open Code:   createRemoteMcpServer() → HTTP MCP server (same process, same handlers)
  */
 
 import { createSdkMcpServer, tool } from "@anthropic-ai/claude-agent-sdk";
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import type { z } from "zod";
 
 /**
@@ -35,8 +39,7 @@ type ToolHandler<TSchema extends Record<string, z.ZodType<any>> | undefined> =
  * Raw tool definition — schema, description, and handler.
  * Single source of truth used by:
  * - Claude Code: in-process via createSdkMcpServer
- * - Open Code stdio: schema/description for registration, handler via bridge
- * - MCP bridge: handler for in-process execution
+ * - Open Code: remote HTTP MCP via createRemoteMcpServer (in-process handlers)
  */
 export interface RawToolDef {
 	description: string;
@@ -152,3 +155,46 @@ export function buildServerRegistries<
 		}
 	};
 }
+
+// ============================================================================
+// Remote MCP Server for Open Code (HTTP transport, in-process execution)
+// ============================================================================
+
+/**
+ * Create a McpServer instance (from @modelcontextprotocol/sdk) with tools registered
+ * from the same RawToolDef definitions used by Claude Code.
+ *
+ * This is the Open Code equivalent of createSdkMcpServer() for Claude Code.
+ * Handlers execute directly in-process — no subprocess, no bridge.
+ *
+ * @param servers - Server definitions from defineServer()
+ * @param enabledConfig - Which servers/tools are enabled (from mcpServersConfig)
+ */
+export function createRemoteMcpServer(
+	servers: readonly ServerWithMeta<string, readonly string[]>[],
+	enabledConfig: Record<string, { enabled: boolean; tools: readonly string[] }>
+): McpServer {
+	const mcpServer = new McpServer({
+		name: 'clopen-mcp',
+		version: '1.0.0',
+	});
+
+	for (const srv of servers) {
+		const config = enabledConfig[srv.meta.name];
+		if (!config?.enabled) continue;
+
+		for (const toolName of config.tools) {
+			const def = srv.meta.toolDefs[toolName as string];
+			if (!def) continue;
+
+			mcpServer.registerTool(toolName as string, {
+				description: def.description,
+				inputSchema: def.schema,
+			}, async (args: Record<string, unknown>) => {
+				return await def.handler(args) as any;
+			});
+		}
+	}
+
+	return mcpServer;
+}

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

@@ -14,8 +14,9 @@ import weather from './weather/index';
 import browserAutomation from './browser-automation/index';
 import { buildServerRegistries } from './helper';
 
-// Re-export types for stdio server
+// Re-export types and remote server factory
 export type { RawToolDef } from './helper';
+export { createRemoteMcpServer } from './helper';
 
 /**
  * All MCP Servers
@@ -23,7 +24,7 @@ export type { RawToolDef } from './helper';
  * Simply import and add new servers to this array.
  * Metadata and registry will be automatically built.
  */
-const allServers = [
+export const allServers = [
 	weather,
 	browserAutomation,
 	// Add more servers here...

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

@@ -11,14 +11,31 @@ 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
+	 * Setup audio capture for a page (pre-navigation).
+	 * WARNING: Uses evaluateOnNewDocument which patches AudioContext BEFORE page
+	 * scripts run. This is detected by Cloudflare's fingerprinting.
+	 * Prefer injectAudioCapture() for post-navigation injection.
 	 */
 	async setupAudioCapture(page: Page, config: StreamingConfig['audio']): Promise<void> {
-		// Inject audio capture script BEFORE page loads to intercept AudioContext
 		await page.evaluateOnNewDocument(audioCaptureScript, config);
 	}
 
+	/**
+	 * Inject audio capture into the current page context (post-navigation).
+	 * Uses page.evaluate() instead of evaluateOnNewDocument() to avoid
+	 * Cloudflare detection — AudioContext constructor patching before page
+	 * load is heavily flagged by CF's fingerprinting algorithms.
+	 * Call this AFTER navigation completes and CF challenges pass.
+	 */
+	async injectAudioCapture(page: Page, config: StreamingConfig['audio']): Promise<boolean> {
+		try {
+			await page.evaluate(audioCaptureScript, config);
+			return true;
+		} catch {
+			return false;
+		}
+	}
+
 	/**
 	 * Check if audio encoder is supported in the page
 	 */

package/backend/lib/preview/browser/browser-navigation-tracker.ts

@@ -62,6 +62,8 @@ export class BrowserNavigationTracker extends EventEmitter {
 		});
 
 		// Track hash changes (fragment identifier changes like #contact-us)
+		// Temporarily disabled URL tracking injection to test CloudFlare evasion
+		/*
 		await page.evaluateOnNewDocument(() => {
 			let lastUrl = window.location.href;
 
@@ -86,6 +88,7 @@ export class BrowserNavigationTracker extends EventEmitter {
 			// Periodically check for URL changes (for SPA navigation)
 			setInterval(checkUrlChange, 500);
 		});
+		*/
 	}
 
 	async navigateSession(sessionId: string, session: BrowserTab, url: string): Promise<string> {