import * as vscode from 'vscode'; import { handleBridgeMessage, type BridgeRequest, type BridgeResponse } from './bridge'; import { getThemeKindName } from './theme'; import type { OpenCodeManager, ConnectionStatus } from './opencode'; import { getWebviewShikiThemes } from './shikiThemes'; import { getWebviewHtml } from './webviewHtml'; export class AgentManagerPanelProvider { public static readonly viewType = 'openchamber.agentManager'; private _panel?: vscode.WebviewPanel; // Cache latest status/URL for when webview is resolved after connection is ready private _cachedStatus: ConnectionStatus = 'connecting'; private _cachedError?: string; private _sseCounter = 0; private _sseStreams = new Map(); private _sseHeartbeats = new Map>(); constructor( private readonly _context: vscode.ExtensionContext, private readonly _extensionUri: vscode.Uri, private readonly _openCodeManager?: OpenCodeManager ) {} public createOrShow(): void { // If panel exists, reveal it if (this._panel) { this._panel.reveal(vscode.ViewColumn.One); return; } const distUri = vscode.Uri.joinPath(this._extensionUri, 'dist'); // Create new panel this._panel = vscode.window.createWebviewPanel( AgentManagerPanelProvider.viewType, 'Agent Manager', vscode.ViewColumn.One, { enableScripts: true, retainContextWhenHidden: true, localResourceRoots: [this._extensionUri, distUri], } ); this._panel.iconPath = { light: vscode.Uri.joinPath(this._extensionUri, 'assets', 'icon.svg'), dark: vscode.Uri.joinPath(this._extensionUri, 'assets', 'icon-titlebar.svg'), }; this._panel.webview.html = this._getHtmlForWebview(this._panel.webview); // Send theme payload (including optional Shiki theme JSON) after the webview is set up. void this.updateTheme(vscode.window.activeColorTheme.kind); // Send cached connection status this._sendCachedState(); // Handle panel disposal this._panel.onDidDispose(() => { // Clean up SSE streams for (const controller of this._sseStreams.values()) { controller.abort(); } this._sseStreams.clear(); for (const heartbeat of this._sseHeartbeats.values()) { clearInterval(heartbeat); } this._sseHeartbeats.clear(); this._panel = undefined; }, null, this._context.subscriptions); // Handle messages this._panel.webview.onDidReceiveMessage(async (message: BridgeRequest) => { if (message.type === 'restartApi') { await this._openCodeManager?.restart(); return; } if (message.type === 'api:sse:start') { const response = await this._startSseProxy(message); this._panel?.webview.postMessage(response); return; } if (message.type === 'api:sse:stop') { const response = await this._stopSseProxy(message); this._panel?.webview.postMessage(response); return; } const response = await handleBridgeMessage(message, { manager: this._openCodeManager, context: this._context, }); this._panel?.webview.postMessage(response); }, null, this._context.subscriptions); } public updateTheme(kind: vscode.ColorThemeKind) { if (this._panel) { const themeKind = getThemeKindName(kind); void getWebviewShikiThemes().then((shikiThemes) => { this._panel?.webview.postMessage({ type: 'themeChange', theme: { kind: themeKind, shikiThemes }, }); }); } } public updateConnectionStatus(status: ConnectionStatus, error?: string) { // Cache the latest state this._cachedStatus = status; this._cachedError = error; // Send to webview if it exists this._sendCachedState(); } private _sendCachedState() { if (!this._panel) { return; } this._panel.webview.postMessage({ type: 'connectionStatus', status: this._cachedStatus, error: this._cachedError, }); } private _buildSseHeaders(extra?: Record): Record { return { Accept: 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive', ...(extra || {}), }; } private _collectHeaders(headers: Headers): Record { const result: Record = {}; headers.forEach((value, key) => { result[key] = value; }); return result; } private async _startSseProxy(message: BridgeRequest): Promise { const { id, type, payload } = message; const apiBaseUrl = this._openCodeManager?.getApiUrl(); const { path, headers } = (payload || {}) as { path?: string; headers?: Record }; const normalizedPath = typeof path === 'string' && path.trim().length > 0 ? path.trim() : '/event'; const shouldInjectActivity = normalizedPath === '/event' || normalizedPath === '/global/event'; if (!apiBaseUrl) { return { id, type, success: true, data: { status: 503, headers: { 'content-type': 'application/json' }, streamId: null }, }; } const streamId = `sse_${++this._sseCounter}_${Date.now()}`; const controller = new AbortController(); const base = `${apiBaseUrl.replace(/\/+$/, '')}/`; const targetUrl = new URL(normalizedPath.replace(/^\/+/, ''), base).toString(); let response: Response; let wrapAsGlobal = false; const requestHeaders = this._buildSseHeaders(headers || {}); try { response = await fetch(targetUrl, { method: 'GET', headers: requestHeaders, signal: controller.signal, }); // Fallback for OpenCode versions without /global/event. if ((!response.ok || !response.body) && normalizedPath === '/global/event') { const fallbackUrl = new URL('event', base).toString(); response = await fetch(fallbackUrl, { method: 'GET', headers: requestHeaders, signal: controller.signal, }); if (response.ok && response.body) { wrapAsGlobal = true; } } } catch (error) { const message = error instanceof Error ? error.message : String(error); return { id, type, success: true, data: { status: 502, headers: { 'content-type': 'application/json' }, streamId: null, error: message }, }; } const responseHeaders = this._collectHeaders(response.headers); const responseBody = response.body; if (!response.ok || !responseBody) { return { id, type, success: true, data: { status: response.status, headers: responseHeaders, streamId: null, error: `SSE failed: ${response.status}`, }, }; } this._sseStreams.set(streamId, controller); const fallbackDirectory = this._openCodeManager?.getWorkingDirectory() || vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || 'global'; if (shouldInjectActivity) { const heartbeatTimer = setInterval(() => { if (controller.signal.aborted) { return; } const heartbeatChunk = `${buildHeartbeatEventBlock()}\n\n`; this._panel?.webview.postMessage({ type: 'api:sse:chunk', streamId, chunk: heartbeatChunk }); }, 30000); this._sseHeartbeats.set(streamId, heartbeatTimer); } (async () => { try { const reader = responseBody.getReader(); const decoder = new TextDecoder(); let sseBuffer = ''; try { while (true) { const { done, value } = await reader.read(); if (done) break; if (controller.signal.aborted) break; if (value && value.length > 0) { const chunk = decoder.decode(value, { stream: true }); if (!chunk) continue; // Reduce webview message pressure by forwarding complete SSE blocks. sseBuffer += shouldInjectActivity ? chunk.replace(/\r\n/g, '\n') : chunk; const blocks = sseBuffer.split('\n\n'); sseBuffer = blocks.pop() ?? ''; if (blocks.length > 0) { const routedBlocks = wrapAsGlobal ? wrapSseBlocksAsGlobal(blocks, fallbackDirectory) : blocks; const outboundBlocks = shouldInjectActivity ? expandSseBlocksWithActivity(routedBlocks) : routedBlocks; const joined = outboundBlocks.map((block: string) => `${block}\n\n`).join(''); this._panel?.webview.postMessage({ type: 'api:sse:chunk', streamId, chunk: joined }); } } } const tail = decoder.decode(); if (tail) { sseBuffer += shouldInjectActivity ? tail.replace(/\r\n/g, '\n') : tail; } if (sseBuffer) { if (shouldInjectActivity) { const baseBlocks = wrapAsGlobal ? wrapSseBlocksAsGlobal([sseBuffer], fallbackDirectory) : [sseBuffer]; const outboundBlocks = expandSseBlocksWithActivity(baseBlocks); const joined = outboundBlocks.map((block: string) => `${block}\n\n`).join(''); this._panel?.webview.postMessage({ type: 'api:sse:chunk', streamId, chunk: joined }); } else { this._panel?.webview.postMessage({ type: 'api:sse:chunk', streamId, chunk: sseBuffer }); } } } finally { try { reader.releaseLock(); } catch { // ignore } } this._panel?.webview.postMessage({ type: 'api:sse:end', streamId }); } catch (error) { if (!controller.signal.aborted) { const message = error instanceof Error ? error.message : String(error); this._panel?.webview.postMessage({ type: 'api:sse:end', streamId, error: message }); } } finally { this._sseStreams.delete(streamId); const heartbeat = this._sseHeartbeats.get(streamId); if (heartbeat) { clearInterval(heartbeat); this._sseHeartbeats.delete(streamId); } } })(); return { id, type, success: true, data: { status: response.status, headers: responseHeaders, streamId, }, }; } private async _stopSseProxy(message: BridgeRequest): Promise { const { id, type, payload } = message; const { streamId } = (payload || {}) as { streamId?: string }; if (typeof streamId === 'string' && streamId.length > 0) { const controller = this._sseStreams.get(streamId); if (controller) { controller.abort(); this._sseStreams.delete(streamId); } const heartbeat = this._sseHeartbeats.get(streamId); if (heartbeat) { clearInterval(heartbeat); this._sseHeartbeats.delete(streamId); } } return { id, type, success: true, data: { stopped: true } }; } private _getHtmlForWebview(webview: vscode.Webview): string { const workspaceFolder = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || ''; const cliAvailable = this._openCodeManager?.isCliAvailable() ?? false; return getWebviewHtml({ webview, extensionUri: this._extensionUri, workspaceFolder, initialStatus: this._cachedStatus, cliAvailable, panelType: 'agentManager', }); } } type SessionActivityPhase = 'idle' | 'busy' | 'cooldown'; type SessionActivity = { sessionId: string; phase: SessionActivityPhase; }; const parseSseDataPayload = (block: string): Record | null => { if (!block) { return null; } const dataLines = block .split('\n') .filter((line) => line.startsWith('data:')) .map((line) => line.slice(5).replace(/^\s/, '')); if (dataLines.length === 0) { return null; } const payloadText = dataLines.join('\n').trim(); if (!payloadText) { return null; } try { const parsed = JSON.parse(payloadText) as unknown; if (parsed && typeof parsed === 'object') { const record = parsed as Record; const nestedPayload = record.payload; if (nestedPayload && typeof nestedPayload === 'object') { return nestedPayload as Record; } return record; } return null; } catch { return null; } }; const deriveSessionActivity = (payload: Record | null): SessionActivity | null => { if (!payload || typeof payload !== 'object') { return null; } const type = payload.type; const properties = payload.properties as Record | undefined; if (type === 'session.status') { const status = properties?.status as Record | undefined; const sessionId = properties?.sessionID ?? properties?.sessionId; const statusType = status?.type; if (typeof sessionId === 'string' && sessionId.length > 0 && typeof statusType === 'string') { const phase: SessionActivityPhase = statusType === 'busy' || statusType === 'retry' ? 'busy' : 'idle'; return { sessionId, phase }; } } if (type === 'message.updated') { const info = properties?.info as Record | undefined; const sessionId = info?.sessionID ?? info?.sessionId ?? properties?.sessionID ?? properties?.sessionId; const role = info?.role; const finish = info?.finish; if (typeof sessionId === 'string' && sessionId.length > 0 && role === 'assistant' && finish === 'stop') { return { sessionId, phase: 'cooldown' }; } } if (type === 'message.part.updated') { const info = properties?.info as Record | undefined; const sessionId = info?.sessionID ?? info?.sessionId ?? properties?.sessionID ?? properties?.sessionId; const role = info?.role; const finish = info?.finish; if (typeof sessionId === 'string' && sessionId.length > 0 && role === 'assistant' && finish === 'stop') { return { sessionId, phase: 'cooldown' }; } } if (type === 'session.idle') { const sessionId = properties?.sessionID ?? properties?.sessionId; if (typeof sessionId === 'string' && sessionId.length > 0) { return { sessionId, phase: 'idle' }; } } return null; }; const buildActivityEventBlock = (activity: SessionActivity): string => { return `data: ${JSON.stringify({ type: 'openchamber:session-activity', properties: { sessionId: activity.sessionId, phase: activity.phase, }, })}`; }; const buildHeartbeatEventBlock = (): string => { return `data: ${JSON.stringify({ type: 'openchamber:heartbeat', timestamp: Date.now() })}`; }; const parseSseBlockForGlobalWrap = (block: string): { id?: string; payload: Record } | null => { if (!block) { return null; } const lines = block.split('\n'); const dataLines: string[] = []; let eventId: string | undefined; for (const line of lines) { if (line.startsWith('data:')) { dataLines.push(line.slice(5).replace(/^\s/, '')); continue; } if (line.startsWith('id:')) { const candidate = line.slice(3).trim(); if (candidate) { eventId = candidate; } } } if (dataLines.length === 0) { return null; } const payloadText = dataLines.join('\n').trim(); if (!payloadText) { return null; } try { const parsed = JSON.parse(payloadText) as unknown; if (!parsed || typeof parsed !== 'object') { return null; } const record = parsed as Record; const nestedPayload = record.payload; const payload = nestedPayload && typeof nestedPayload === 'object' ? (nestedPayload as Record) : record; return eventId ? { id: eventId, payload } : { payload }; } catch { return null; } }; const wrapSseBlocksAsGlobal = (blocks: string[], directory: string): string[] => { const normalizedDirectory = typeof directory === 'string' && directory.trim().length > 0 ? directory.trim().replace(/\\/g, '/') : 'global'; return blocks.map((block) => { const parsed = parseSseBlockForGlobalWrap(block); if (!parsed) { return block; } const envelope = { directory: normalizedDirectory, payload: parsed.payload, }; const idPrefix = parsed.id ? `id: ${parsed.id}\n` : ''; return `${idPrefix}data: ${JSON.stringify(envelope)}`; }); }; const expandSseBlocksWithActivity = (blocks: string[]): string[] => { const expanded: string[] = []; for (const block of blocks) { expanded.push(block); const activity = deriveSessionActivity(parseSseDataPayload(block)); if (activity) { expanded.push(buildActivityEventBlock(activity)); } } return expanded; };