codebakers 1.0.45 → 2.0.1

package/src/ChatPanelProvider.ts

@@ -1,1815 +0,0 @@
-import * as vscode from 'vscode';
-import { CodeBakersClient, FileOperation, CommandToRun } from './CodeBakersClient';
-import { ProjectContext } from './ProjectContext';
-import { FileOperations } from './FileOperations';
-import { CodeValidator } from './CodeValidator';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-  thinking?: string;
-  timestamp: Date;
-}
-
-interface PendingChange {
-  id: string;
-  operation: FileOperation;
-  status: 'pending' | 'applied' | 'rejected';
-}
-
-interface PendingCommand {
-  id: string;
-  command: CommandToRun;
-  status: 'pending' | 'running' | 'done';
-}
-
-export class ChatPanelProvider {
-  private static _instance: ChatPanelProvider | undefined;
-  private _panel: vscode.WebviewPanel | undefined;
-  private _messages: Message[] = [];
-  private _conversationSummary: string = '';
-  private readonly fileOps: FileOperations;
-  private _abortController: AbortController | null = null;
-
-  // Separate tracking for pending operations (Claude Code style)
-  private _pendingChanges: PendingChange[] = [];
-  private _pendingCommands: PendingCommand[] = [];
-
-  // Throttling for streaming updates
-  private _streamBuffer: string = '';
-  private _thinkingBuffer: string = '';
-  private _streamThrottleTimer: NodeJS.Timeout | null = null;
-  private _lastStreamUpdate: number = 0;
-  private readonly STREAM_THROTTLE_MS = 50; // Update UI every 50ms max
-
-  private constructor(
-    private readonly context: vscode.ExtensionContext,
-    private readonly client: CodeBakersClient,
-    private readonly projectContext: ProjectContext
-  ) {
-    this.fileOps = new FileOperations();
-  }
-
-  public static getInstance(
-    context: vscode.ExtensionContext,
-    client: CodeBakersClient,
-    projectContext: ProjectContext
-  ): ChatPanelProvider {
-    if (!ChatPanelProvider._instance) {
-      ChatPanelProvider._instance = new ChatPanelProvider(context, client, projectContext);
-    }
-    return ChatPanelProvider._instance;
-  }
-
-  public show() {
-    if (this._panel) {
-      this._panel.reveal(vscode.ViewColumn.Beside);
-      return;
-    }
-
-    this._panel = vscode.window.createWebviewPanel(
-      'codebakers.chat',
-      'CodeBakers',
-      {
-        viewColumn: vscode.ViewColumn.Beside,
-        preserveFocus: true
-      },
-      {
-        enableScripts: true,
-        retainContextWhenHidden: true,
-        localResourceRoots: [this.context.extensionUri]
-      }
-    );
-
-    this._panel.iconPath = vscode.Uri.joinPath(this.context.extensionUri, 'media', 'icon.svg');
-    this._panel.webview.html = this._getHtmlForWebview(this._panel.webview);
-
-    this._panel.webview.onDidReceiveMessage(async (data) => {
-      switch (data.type) {
-        case 'sendMessage':
-          await this.sendMessage(data.message);
-          break;
-        case 'clearChat':
-          this._messages = [];
-          this._conversationSummary = '';
-          this._pendingChanges = [];
-          this._pendingCommands = [];
-          this._updateWebview();
-          break;
-        case 'runTool':
-          await this._executeTool(data.tool);
-          break;
-        case 'login':
-          await this.client.login();
-          break;
-        case 'applyFile':
-          await this._applyFileOperation(data.id);
-          break;
-        case 'applyAllFiles':
-          await this._applyAllPendingChanges();
-          break;
-        case 'rejectFile':
-          this._rejectFileOperation(data.id);
-          break;
-        case 'rejectAllFiles':
-          this._rejectAllPendingChanges();
-          break;
-        case 'runCommand':
-          await this._runCommand(data.id);
-          break;
-        case 'showDiff':
-          await this._showDiff(data.id);
-          break;
-        case 'undoFile':
-          await this._undoFileOperation(data.id);
-          break;
-        case 'cancelRequest':
-          this._cancelCurrentRequest();
-          break;
-      }
-    });
-
-    this._panel.onDidDispose(() => {
-      this._panel = undefined;
-    });
-
-    this._initializeStatus();
-  }
-
-  public refresh() {
-    if (this._panel) {
-      this._initializeStatus();
-      this._updateWebview();
-    }
-  }
-
-  private async _initializeStatus() {
-    if (!this._panel) return;
-
-    try {
-      const planInfo = this.client.getPlanInfo();
-      this._panel.webview.postMessage({
-        type: 'updatePlan',
-        plan: planInfo.plan
-      });
-
-      if (!this.client.hasSessionToken()) {
-        this._panel.webview.postMessage({
-          type: 'updateHealth',
-          health: 0,
-          score: 0
-        });
-        this._panel.webview.postMessage({
-          type: 'showLogin'
-        });
-        return;
-      }
-
-      try {
-        const health = await this.client.guardianStatus();
-        this._panel.webview.postMessage({
-          type: 'updateHealth',
-          health: health.data?.health || 85,
-          score: health.data?.health || 85
-        });
-      } catch (healthError) {
-        console.warn('Health check failed:', healthError);
-        this._panel.webview.postMessage({
-          type: 'updateHealth',
-          health: 85,
-          score: 85
-        });
-      }
-    } catch (error) {
-      console.error('Failed to initialize status:', error);
-    }
-  }
-
-  private async _executeTool(toolName: string) {
-    if (!this._panel) return;
-
-    try {
-      this._panel.webview.postMessage({ type: 'typing', isTyping: true });
-      const result = await this.client.executeTool(toolName, {});
-
-      // Add tool result as a message
-      this._messages.push({
-        role: 'assistant',
-        content: `**Tool: ${toolName}**\n\`\`\`json\n${JSON.stringify(result.data || result, null, 2)}\n\`\`\``,
-        timestamp: new Date()
-      });
-
-      if (toolName === 'guardian_status' && result.data?.health) {
-        this._panel.webview.postMessage({
-          type: 'updateHealth',
-          health: result.data.health,
-          score: result.data.health
-        });
-      }
-    } catch (error) {
-      this._messages.push({
-        role: 'assistant',
-        content: `**Tool Error: ${toolName}**\n${error instanceof Error ? error.message : 'Tool execution failed'}`,
-        timestamp: new Date()
-      });
-    } finally {
-      this._panel?.webview.postMessage({ type: 'typing', isTyping: false });
-      this._updateWebview();
-    }
-  }
-
-  private async _applyFileOperation(id: string) {
-    if (!this._panel) return;
-
-    const change = this._pendingChanges.find(c => c.id === id);
-    if (!change || change.status !== 'pending') return;
-
-    try {
-      const success = await this.fileOps.applyChange({
-        path: change.operation.path,
-        action: change.operation.action,
-        content: change.operation.content,
-        description: change.operation.description
-      });
-
-      if (success) {
-        change.status = 'applied';
-        vscode.window.showInformationMessage(`✅ ${change.operation.action}: ${change.operation.path}`);
-
-        // Open the file if not a delete
-        if (change.operation.action !== 'delete') {
-          await this.fileOps.openFile(change.operation.path);
-        }
-      } else {
-        throw new Error('Operation failed');
-      }
-    } catch (error) {
-      vscode.window.showErrorMessage(`❌ Failed: ${change.operation.path} - ${error}`);
-    }
-
-    this._updatePendingChanges();
-  }
-
-  private async _applyAllPendingChanges() {
-    if (!this._panel) return;
-
-    const pending = this._pendingChanges.filter(c => c.status === 'pending');
-    if (pending.length === 0) {
-      vscode.window.showInformationMessage('No pending changes to apply');
-      return;
-    }
-
-    // Show progress in webview
-    const total = pending.length;
-    this._panel?.webview.postMessage({
-      type: 'showProgress',
-      text: `Applying 0/${total} files...`,
-      current: 0,
-      total,
-      show: true
-    });
-
-    // Apply files in parallel batches of 5 for speed
-    const BATCH_SIZE = 5;
-    let success = 0;
-    let failed = 0;
-
-    for (let i = 0; i < pending.length; i += BATCH_SIZE) {
-      const batch = pending.slice(i, i + BATCH_SIZE);
-
-      const results = await Promise.allSettled(
-        batch.map(async (change) => {
-          try {
-            const result = await this.fileOps.applyChange({
-              path: change.operation.path,
-              action: change.operation.action,
-              content: change.operation.content,
-              description: change.operation.description
-            });
-
-            if (result) {
-              change.status = 'applied';
-              return true;
-            } else {
-              return false;
-            }
-          } catch (error) {
-            console.error(`Failed to apply ${change.operation.path}:`, error);
-            return false;
-          }
-        })
-      );
-
-      // Count results
-      results.forEach((result) => {
-        if (result.status === 'fulfilled' && result.value) {
-          success++;
-        } else {
-          failed++;
-        }
-      });
-
-      // Update progress indicator
-      const done = success + failed;
-      this._panel?.webview.postMessage({
-        type: 'showProgress',
-        text: `Applying ${done}/${total} files...`,
-        current: done,
-        total,
-        show: true
-      });
-
-      // Update UI after each batch
-      this._updatePendingChanges();
-    }
-
-    this._panel?.webview.postMessage({ type: 'showProgress', show: false });
-    vscode.window.showInformationMessage(
-      `✅ Applied ${success} file(s)${failed > 0 ? `, ${failed} failed` : ''}`
-    );
-
-    // Auto-run TypeScript check after applying files
-    if (success > 0) {
-      await this._runTscCheck();
-    }
-  }
-
-  private async _runTscCheck(autoRetry: boolean = true) {
-    // Check if project has TypeScript
-    const tsconfigExists = await this.fileOps.fileExists('tsconfig.json');
-    if (!tsconfigExists) {
-      return; // No TypeScript in project
-    }
-
-    this._panel?.webview.postMessage({
-      type: 'showStatus',
-      text: 'Checking TypeScript...',
-      show: true
-    });
-
-    try {
-      const validator = new CodeValidator();
-      const result = await validator.runTypeScriptCheck();
-
-      this._panel?.webview.postMessage({ type: 'showStatus', show: false });
-
-      if (!result.passed && result.errors.length > 0) {
-        const action = await vscode.window.showWarningMessage(
-          `⚠️ TypeScript errors found (${result.errorCount})`,
-          'Auto-Fix with AI',
-          'Show Errors',
-          'Ignore'
-        );
-
-        if (action === 'Auto-Fix with AI' && autoRetry) {
-          // Send errors to AI for auto-fix
-          const errorMessage = `Please fix these TypeScript errors:\n\n${result.errors.map((e: any) =>
-            `${e.file}:${e.line}: ${e.message}`
-          ).join('\n')}`;
-
-          this._panel?.webview.postMessage({
-            type: 'showStatus',
-            text: 'AI fixing TypeScript errors...',
-            show: true
-          });
-
-          // Trigger a new AI request with the errors
-          await this.sendMessage(errorMessage);
-        } else if (action === 'Show Errors') {
-          // Show errors in output channel
-          const outputChannel = vscode.window.createOutputChannel('CodeBakers TSC');
-          outputChannel.clear();
-          outputChannel.appendLine('TypeScript Errors:');
-          outputChannel.appendLine('=================\n');
-          result.errors.forEach((e: any) => {
-            outputChannel.appendLine(`${e.file}:${e.line}:${e.column}`);
-            outputChannel.appendLine(`  ${e.message}\n`);
-          });
-          outputChannel.show();
-        }
-      } else {
-        vscode.window.showInformationMessage('✅ TypeScript check passed!');
-      }
-    } catch (error) {
-      this._panel?.webview.postMessage({ type: 'showStatus', show: false });
-      console.error('TSC check failed:', error);
-    }
-  }
-
-  private _rejectFileOperation(id: string) {
-    const change = this._pendingChanges.find(c => c.id === id);
-    if (change && change.status === 'pending') {
-      change.status = 'rejected';
-      this._updatePendingChanges();
-    }
-  }
-
-  private _rejectAllPendingChanges() {
-    for (const change of this._pendingChanges) {
-      if (change.status === 'pending') {
-        change.status = 'rejected';
-      }
-    }
-    this._updatePendingChanges();
-  }
-
-  private async _runCommand(id: string) {
-    if (!this._panel) return;
-
-    const cmd = this._pendingCommands.find(c => c.id === id);
-    if (!cmd || cmd.status !== 'pending') return;
-
-    try {
-      cmd.status = 'running';
-      this._updatePendingChanges();
-
-      await this.fileOps.runCommand(cmd.command.command, cmd.command.description || 'CodeBakers');
-      cmd.status = 'done';
-      vscode.window.showInformationMessage(`🚀 Running: ${cmd.command.command}`);
-    } catch (error) {
-      cmd.status = 'pending'; // Reset to allow retry
-      vscode.window.showErrorMessage(`❌ Failed to run command: ${error}`);
-    }
-
-    this._updatePendingChanges();
-  }
-
-  private async _showDiff(id: string) {
-    const change = this._pendingChanges.find(c => c.id === id);
-    if (!change || !change.operation.content) return;
-
-    try {
-      await this.fileOps.showDiff(
-        change.operation.path,
-        change.operation.content,
-        `CodeBakers: ${change.operation.path}`
-      );
-    } catch (error) {
-      vscode.window.showErrorMessage(`❌ Failed to show diff: ${error}`);
-    }
-  }
-
-  private async _undoFileOperation(id: string) {
-    const change = this._pendingChanges.find(c => c.id === id);
-    if (!change || change.status !== 'applied') {
-      vscode.window.showWarningMessage('Cannot undo - change was not applied');
-      return;
-    }
-
-    try {
-      const success = await this.fileOps.restoreFromBackup(change.operation.path);
-      if (success) {
-        // Mark as pending again so user can re-apply if desired
-        change.status = 'pending';
-        this._updatePendingChanges();
-      }
-    } catch (error) {
-      vscode.window.showErrorMessage(`❌ Failed to undo: ${error}`);
-    }
-  }
-
-  private _cancelCurrentRequest() {
-    if (this._abortController) {
-      this._abortController.abort();
-      this._abortController = null;
-      this._panel?.webview.postMessage({ type: 'requestCancelled' });
-      vscode.window.showInformationMessage('Request cancelled');
-    }
-  }
-
-  // Throttled streaming update
-  private _throttledStreamUpdate() {
-    const now = Date.now();
-
-    if (now - this._lastStreamUpdate < this.STREAM_THROTTLE_MS) {
-      // Schedule update if not already scheduled
-      if (!this._streamThrottleTimer) {
-        this._streamThrottleTimer = setTimeout(() => {
-          this._streamThrottleTimer = null;
-          this._sendStreamUpdate();
-        }, this.STREAM_THROTTLE_MS);
-      }
-      return;
-    }
-
-    this._sendStreamUpdate();
-  }
-
-  private _sendStreamUpdate() {
-    this._lastStreamUpdate = Date.now();
-
-    if (this._thinkingBuffer) {
-      this._panel?.webview.postMessage({
-        type: 'streamThinking',
-        thinking: this._thinkingBuffer
-      });
-    }
-
-    if (this._streamBuffer) {
-      this._panel?.webview.postMessage({
-        type: 'streamContent',
-        content: this._streamBuffer
-      });
-    }
-  }
-
-  async sendMessage(userMessage: string) {
-    if (!this._panel) return;
-
-    // Check if user is logged in
-    if (!this.client.hasSessionToken()) {
-      this._panel.webview.postMessage({ type: 'showLogin' });
-      vscode.window.showWarningMessage(
-        'Please sign in to CodeBakers first',
-        'Sign In with GitHub'
-      ).then(selection => {
-        if (selection === 'Sign In with GitHub') {
-          this.client.login();
-        }
-      });
-      return;
-    }
-
-    this._messages.push({
-      role: 'user',
-      content: userMessage,
-      timestamp: new Date()
-    });
-    this._updateWebview();
-
-    // Reset stream buffers
-    this._streamBuffer = '';
-    this._thinkingBuffer = '';
-
-    try {
-      this._abortController = new AbortController();
-      this._panel.webview.postMessage({ type: 'typing', isTyping: true });
-
-      const projectState = await this.projectContext.getProjectState();
-      const contextualizedMessages = await this._buildContextualizedMessages(userMessage, projectState);
-
-      const response = await this.client.chat(contextualizedMessages, projectState, {
-        onThinking: (thinking) => {
-          this._thinkingBuffer = thinking;
-          this._throttledStreamUpdate();
-        },
-        onContent: (content) => {
-          this._streamBuffer = content;
-          this._throttledStreamUpdate();
-        },
-        onDone: () => {
-          this._panel?.webview.postMessage({ type: 'validating' });
-        },
-        onError: (error) => {
-          this._panel?.webview.postMessage({
-            type: 'streamError',
-            error: error.message
-          });
-        },
-        abortSignal: this._abortController.signal
-      });
-
-      // Add assistant message (content only, no file ops embedded)
-      this._messages.push({
-        role: 'assistant',
-        content: response.content,
-        thinking: response.thinking,
-        timestamp: new Date()
-      });
-
-      // Add file operations to pending changes panel
-      if (response.fileOperations && response.fileOperations.length > 0) {
-        for (const op of response.fileOperations) {
-          this._pendingChanges.push({
-            id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-            operation: op,
-            status: 'pending'
-          });
-        }
-      }
-
-      // Add commands to pending commands
-      if (response.commands && response.commands.length > 0) {
-        for (const cmd of response.commands) {
-          this._pendingCommands.push({
-            id: `cmd-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-            command: cmd,
-            status: 'pending'
-          });
-        }
-      }
-
-      if (response.projectUpdates) {
-        await this.projectContext.applyUpdates(response.projectUpdates);
-      }
-
-      if (this._messages.length > 20) {
-        await this._summarizeConversation();
-      }
-    } catch (error) {
-      if ((error as Error).message !== 'Request was cancelled') {
-        this._messages.push({
-          role: 'assistant',
-          content: `**Error:** ${error instanceof Error ? error.message : 'Unknown error'}`,
-          timestamp: new Date()
-        });
-      }
-    } finally {
-      // Clear throttle timer
-      if (this._streamThrottleTimer) {
-        clearTimeout(this._streamThrottleTimer);
-        this._streamThrottleTimer = null;
-      }
-
-      this._abortController = null;
-      this._panel?.webview.postMessage({ type: 'typing', isTyping: false });
-      this._updateWebview();
-    }
-  }
-
-  private async _buildContextualizedMessages(userMessage: string, projectState: any): Promise<any[]> {
-    const messages: any[] = [];
-
-    if (this._conversationSummary) {
-      messages.push({
-        role: 'system',
-        content: `Previous conversation summary:\n${this._conversationSummary}`
-      });
-    }
-
-    if (projectState) {
-      messages.push({
-        role: 'system',
-        content: `Current project state:\n${JSON.stringify(projectState, null, 2)}`
-      });
-    }
-
-    const recentMessages = this._messages.slice(-10);
-    for (const msg of recentMessages) {
-      messages.push({
-        role: msg.role,
-        content: msg.content
-      });
-    }
-
-    return messages;
-  }
-
-  private async _summarizeConversation() {
-    const oldMessages = this._messages.slice(0, -10);
-    if (oldMessages.length === 0) return;
-
-    const summaryPrompt = `Summarize these conversation messages, keeping key decisions and context:\n${
-      oldMessages.map(m => `${m.role}: ${m.content}`).join('\n')
-    }`;
-
-    try {
-      const summary = await this.client.summarize(summaryPrompt);
-      this._conversationSummary = summary;
-      this._messages = this._messages.slice(-10);
-    } catch (error) {
-      console.error('Failed to summarize conversation:', error);
-    }
-  }
-
-  private _updateWebview() {
-    if (!this._panel) return;
-
-    this._panel.webview.postMessage({
-      type: 'updateMessages',
-      messages: this._messages.map(m => ({
-        role: m.role,
-        content: m.content,
-        thinking: m.thinking,
-        timestamp: m.timestamp.toISOString()
-      }))
-    });
-
-    this._updatePendingChanges();
-  }
-
-  private _updatePendingChanges() {
-    if (!this._panel) return;
-
-    const pendingFileChanges = this._pendingChanges.filter(c => c.status === 'pending');
-    const pendingCmds = this._pendingCommands.filter(c => c.status === 'pending');
-
-    this._panel.webview.postMessage({
-      type: 'updatePendingChanges',
-      changes: this._pendingChanges.map(c => ({
-        id: c.id,
-        path: c.operation.path,
-        action: c.operation.action,
-        description: c.operation.description,
-        status: c.status,
-        hasContent: !!c.operation.content
-      })),
-      commands: this._pendingCommands.map(c => ({
-        id: c.id,
-        command: c.command.command,
-        description: c.command.description,
-        status: c.status
-      })),
-      pendingCount: pendingFileChanges.length + pendingCmds.length
-    });
-  }
-
-  private _getHtmlForWebview(webview: vscode.Webview): string {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CodeBakers</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: var(--vscode-font-family);
-      font-size: var(--vscode-font-size);
-      color: var(--vscode-foreground);
-      background: var(--vscode-editor-background);
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .header {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--vscode-panel-border);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      flex-shrink: 0;
-    }
-
-    .header-icon {
-      width: 20px;
-      height: 20px;
-    }
-
-    .header-title {
-      font-weight: 600;
-      font-size: 13px;
-      flex: 1;
-    }
-
-    .header-btn {
-      background: transparent;
-      border: none;
-      color: var(--vscode-foreground);
-      cursor: pointer;
-      padding: 4px 8px;
-      border-radius: 4px;
-      font-size: 11px;
-      opacity: 0.7;
-    }
-
-    .header-btn:hover {
-      background: var(--vscode-toolbar-hoverBackground);
-      opacity: 1;
-    }
-
-    .plan-badge {
-      font-size: 10px;
-      padding: 2px 8px;
-      background: var(--vscode-button-background);
-      color: var(--vscode-button-foreground);
-      border-radius: 10px;
-    }
-
-    .plan-badge.trial {
-      background: #f0a030;
-    }
-
-    /* Main content area */
-    .main-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-    }
-
-    /* Messages area */
-    .messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .message {
-      max-width: 90%;
-      padding: 10px 14px;
-      border-radius: 10px;
-      line-height: 1.5;
-      font-size: 13px;
-    }
-
-    .message.user {
-      background: var(--vscode-button-background);
-      color: var(--vscode-button-foreground);
-      align-self: flex-end;
-      border-bottom-right-radius: 4px;
-    }
-
-    .message.assistant {
-      background: var(--vscode-editor-inactiveSelectionBackground);
-      align-self: flex-start;
-      border-bottom-left-radius: 4px;
-    }
-
-    .message pre {
-      background: var(--vscode-textCodeBlock-background);
-      padding: 8px;
-      border-radius: 4px;
-      overflow-x: auto;
-      margin: 8px 0;
-      font-size: 12px;
-    }
-
-    .message code {
-      font-family: var(--vscode-editor-font-family);
-      font-size: 12px;
-    }
-
-    .message h1, .message h2, .message h3, .message h4 {
-      margin: 10px 0 6px 0;
-      font-weight: 600;
-    }
-
-    .message h1 { font-size: 1.3em; }
-    .message h2 { font-size: 1.2em; }
-    .message h3 { font-size: 1.1em; }
-
-    .message ul, .message ol {
-      margin: 6px 0;
-      padding-left: 18px;
-    }
-
-    .message li { margin: 3px 0; }
-
-    .message hr {
-      border: none;
-      border-top: 1px solid var(--vscode-panel-border);
-      margin: 10px 0;
-    }
-
-    .message p { margin: 6px 0; }
-    .message p:first-child { margin-top: 0; }
-    .message p:last-child { margin-bottom: 0; }
-
-    .thinking-toggle {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 11px;
-      color: var(--vscode-textLink-foreground);
-      cursor: pointer;
-      margin-bottom: 8px;
-      padding: 4px 0;
-    }
-
-    .thinking-content {
-      background: var(--vscode-textBlockQuote-background);
-      border-left: 2px solid var(--vscode-textLink-foreground);
-      padding: 8px;
-      font-size: 11px;
-      color: var(--vscode-descriptionForeground);
-      margin-bottom: 8px;
-      display: none;
-      max-height: 200px;
-      overflow-y: auto;
-    }
-
-    .thinking-content.show { display: block; }
-
-    .streaming-indicator {
-      align-self: flex-start;
-      display: none;
-      padding: 10px 14px;
-      background: var(--vscode-editor-inactiveSelectionBackground);
-      border-radius: 10px;
-      border-bottom-left-radius: 4px;
-      max-width: 90%;
-    }
-
-    .streaming-indicator.show { display: block; }
-
-    .typing-dots {
-      display: flex;
-      gap: 4px;
-      padding: 8px 0;
-    }
-
-    .typing-dot {
-      width: 6px;
-      height: 6px;
-      background: var(--vscode-foreground);
-      border-radius: 50%;
-      animation: bounce 1.4s infinite ease-in-out;
-    }
-
-    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
-    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
-
-    @keyframes bounce {
-      0%, 80%, 100% { transform: translateY(0); }
-      40% { transform: translateY(-6px); }
-    }
-
-    /* Pending Changes Panel - Claude Code Style */
-    .pending-panel {
-      border-top: 1px solid var(--vscode-panel-border);
-      background: var(--vscode-sideBar-background);
-      max-height: 40vh;
-      overflow-y: auto;
-      display: none;
-      flex-shrink: 0;
-    }
-
-    .pending-panel.show { display: block; }
-
-    .pending-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 14px;
-      background: var(--vscode-editor-inactiveSelectionBackground);
-      position: sticky;
-      top: 0;
-      z-index: 10;
-    }
-
-    .pending-title {
-      font-weight: 600;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .pending-count {
-      background: var(--vscode-badge-background);
-      color: var(--vscode-badge-foreground);
-      padding: 2px 6px;
-      border-radius: 10px;
-      font-size: 10px;
-    }
-
-    .pending-actions {
-      display: flex;
-      gap: 8px;
-    }
-
-    .accept-all-btn {
-      background: #28a745;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 5px 12px;
-      font-size: 11px;
-      font-weight: 500;
-      cursor: pointer;
-    }
-
-    .accept-all-btn:hover { background: #218838; }
-
-    .reject-all-btn {
-      background: transparent;
-      color: var(--vscode-foreground);
-      border: 1px solid var(--vscode-panel-border);
-      border-radius: 4px;
-      padding: 5px 12px;
-      font-size: 11px;
-      cursor: pointer;
-    }
-
-    .reject-all-btn:hover {
-      background: var(--vscode-toolbar-hoverBackground);
-    }
-
-    .pending-list {
-      padding: 0;
-    }
-
-    .pending-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 8px 14px;
-      border-bottom: 1px solid var(--vscode-panel-border);
-    }
-
-    .pending-item:last-child { border-bottom: none; }
-
-    .pending-item.applied {
-      opacity: 0.5;
-      background: rgba(40, 167, 69, 0.1);
-    }
-
-    .pending-item.rejected {
-      opacity: 0.5;
-      text-decoration: line-through;
-    }
-
-    .pending-icon {
-      width: 18px;
-      text-align: center;
-      font-size: 12px;
-    }
-
-    .pending-info {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .pending-path {
-      font-family: var(--vscode-editor-font-family);
-      font-size: 12px;
-      color: var(--vscode-textLink-foreground);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .pending-desc {
-      font-size: 10px;
-      color: var(--vscode-descriptionForeground);
-      margin-top: 2px;
-    }
-
-    .pending-item-actions {
-      display: flex;
-      gap: 4px;
-    }
-
-    .item-btn {
-      background: transparent;
-      border: 1px solid var(--vscode-panel-border);
-      border-radius: 3px;
-      padding: 3px 8px;
-      font-size: 10px;
-      cursor: pointer;
-      color: var(--vscode-foreground);
-    }
-
-    .item-btn:hover {
-      background: var(--vscode-toolbar-hoverBackground);
-    }
-
-    .item-btn.accept {
-      background: #28a745;
-      border-color: #28a745;
-      color: white;
-    }
-
-    .item-btn.accept:hover { background: #218838; }
-
-    .item-btn.reject {
-      color: #dc3545;
-      border-color: #dc3545;
-    }
-
-    .item-btn.reject:hover {
-      background: rgba(220, 53, 69, 0.1);
-    }
-
-    .command-item {
-      background: var(--vscode-textCodeBlock-background);
-    }
-
-    .command-text {
-      font-family: var(--vscode-editor-font-family);
-      font-size: 11px;
-    }
-
-    /* Input area */
-    .input-area {
-      padding: 12px 16px;
-      border-top: 1px solid var(--vscode-panel-border);
-      display: flex;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-
-    .input-area textarea {
-      flex: 1;
-      background: var(--vscode-input-background);
-      color: var(--vscode-input-foreground);
-      border: 1px solid var(--vscode-input-border);
-      border-radius: 6px;
-      padding: 10px 12px;
-      font-family: inherit;
-      font-size: 13px;
-      resize: none;
-      min-height: 40px;
-      max-height: 120px;
-    }
-
-    .input-area textarea:focus {
-      outline: none;
-      border-color: var(--vscode-focusBorder);
-    }
-
-    .input-area textarea:disabled {
-      opacity: 0.6;
-    }
-
-    .send-btn {
-      background: var(--vscode-button-background);
-      color: var(--vscode-button-foreground);
-      border: none;
-      border-radius: 6px;
-      padding: 0 16px;
-      cursor: pointer;
-      font-weight: 500;
-      font-size: 12px;
-    }
-
-    .send-btn:hover {
-      background: var(--vscode-button-hoverBackground);
-    }
-
-    .send-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .cancel-btn {
-      background: #dc3545;
-      color: white;
-      border: none;
-      border-radius: 6px;
-      padding: 0 16px;
-      cursor: pointer;
-      font-weight: 500;
-      font-size: 12px;
-      display: none;
-    }
-
-    .cancel-btn.show { display: block; }
-    .cancel-btn:hover { background: #c82333; }
-
-    /* Welcome screen */
-    .welcome {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 30px;
-      text-align: center;
-    }
-
-    .welcome-icon { font-size: 48px; margin-bottom: 16px; }
-    .welcome-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
-    .welcome-text { color: var(--vscode-descriptionForeground); margin-bottom: 20px; max-width: 350px; font-size: 13px; }
-
-    .quick-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      justify-content: center;
-    }
-
-    .quick-action {
-      background: var(--vscode-button-secondaryBackground);
-      color: var(--vscode-button-secondaryForeground);
-      border: none;
-      border-radius: 16px;
-      padding: 6px 14px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-
-    .quick-action:hover {
-      background: var(--vscode-button-secondaryHoverBackground);
-    }
-
-    /* Login prompt */
-    .login-prompt {
-      flex: 1;
-      display: none;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 30px;
-      text-align: center;
-    }
-
-    .login-prompt.show { display: flex; }
-
-    .login-btn {
-      background: var(--vscode-button-background);
-      color: var(--vscode-button-foreground);
-      border: none;
-      border-radius: 6px;
-      padding: 10px 20px;
-      cursor: pointer;
-      font-size: 13px;
-      font-weight: 500;
-      margin-top: 16px;
-    }
-
-    .login-btn:hover {
-      background: var(--vscode-button-hoverBackground);
-    }
-
-    /* Status indicator */
-    .status-indicator {
-      display: none;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 14px;
-      background: var(--vscode-editor-inactiveSelectionBackground);
-      font-size: 12px;
-      border-top: 1px solid var(--vscode-panel-border);
-    }
-
-    .status-indicator.show { display: flex; }
-
-    .status-spinner {
-      width: 14px;
-      height: 14px;
-      border: 2px solid var(--vscode-foreground);
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
-    /* Progress bar */
-    .progress-bar {
-      width: 100%;
-      height: 4px;
-      background: var(--vscode-progressBar-background, #333);
-      border-radius: 2px;
-      margin-top: 6px;
-      overflow: hidden;
-    }
-
-    .progress-fill {
-      height: 100%;
-      background: var(--vscode-progressBar-foreground, #0e7ad3);
-      border-radius: 2px;
-      transition: width 0.2s ease;
-    }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <svg class="header-icon" viewBox="0 0 24 24" fill="currentColor">
-      <path d="M4 4 L10 12 L4 20 L8 20 L12 14 L16 20 L20 20 L14 12 L20 4 L16 4 L12 10 L8 4 Z"/>
-    </svg>
-    <span class="header-title">CodeBakers</span>
-    <span class="plan-badge" id="planBadge">Pro</span>
-    <button class="header-btn" onclick="clearChat()">Clear</button>
-  </div>
-
-  <div class="login-prompt" id="loginPrompt">
-    <div class="welcome-icon">🔐</div>
-    <div class="welcome-title">Sign in to CodeBakers</div>
-    <div class="welcome-text">Connect with GitHub to start your free trial.</div>
-    <button class="login-btn" onclick="login()">Sign in with GitHub</button>
-  </div>
-
-  <div class="main-content" id="mainContent">
-    <div class="messages" id="messages">
-      <div class="welcome" id="welcome">
-        <div class="welcome-icon">🍪</div>
-        <div class="welcome-title">CodeBakers AI</div>
-        <div class="welcome-text">Production-ready code with AI. Ask me to build features, edit files, or audit your code.</div>
-        <div class="quick-actions">
-          <button class="quick-action" onclick="quickAction('/build')">Build Project</button>
-          <button class="quick-action" onclick="quickAction('/feature')">Add Feature</button>
-          <button class="quick-action" onclick="quickAction('/audit')">Audit Code</button>
-        </div>
-      </div>
-
-      <div class="streaming-indicator" id="streaming">
-        <div class="typing-dots">
-          <div class="typing-dot"></div>
-          <div class="typing-dot"></div>
-          <div class="typing-dot"></div>
-        </div>
-        <div id="streamingContent" style="margin-top: 8px; display: none;"></div>
-      </div>
-    </div>
-
-    <!-- Claude Code Style Pending Changes Panel -->
-    <div class="pending-panel" id="pendingPanel">
-      <div class="pending-header">
-        <div class="pending-title">
-          <span>Pending Changes</span>
-          <span class="pending-count" id="pendingCount">0</span>
-        </div>
-        <div class="pending-actions">
-          <button class="reject-all-btn" onclick="rejectAll()">Reject All</button>
-          <button class="accept-all-btn" onclick="acceptAll()">Accept All</button>
-        </div>
-      </div>
-      <div class="pending-list" id="pendingList"></div>
-    </div>
-
-    <div class="status-indicator" id="statusIndicator">
-      <div class="status-spinner"></div>
-      <span id="statusText">Processing...</span>
-    </div>
-  </div>
-
-  <div class="input-area">
-    <textarea
-      id="input"
-      placeholder="Ask CodeBakers anything..."
-      rows="1"
-      onkeydown="handleKeydown(event)"
-      oninput="autoResize(this)"
-    ></textarea>
-    <button class="send-btn" id="sendBtn" onclick="sendMessage()">Send</button>
-    <button class="cancel-btn" id="cancelBtn" onclick="cancelRequest()">Cancel</button>
-  </div>
-
-  <script>
-    const vscode = acquireVsCodeApi();
-    const messagesEl = document.getElementById('messages');
-    const welcomeEl = document.getElementById('welcome');
-    const loginPromptEl = document.getElementById('loginPrompt');
-    const mainContentEl = document.getElementById('mainContent');
-    const inputEl = document.getElementById('input');
-    const sendBtn = document.getElementById('sendBtn');
-    const cancelBtn = document.getElementById('cancelBtn');
-    const streamingEl = document.getElementById('streaming');
-    const streamingContentEl = document.getElementById('streamingContent');
-    const pendingPanel = document.getElementById('pendingPanel');
-    const pendingList = document.getElementById('pendingList');
-    const pendingCount = document.getElementById('pendingCount');
-    const statusIndicator = document.getElementById('statusIndicator');
-    const statusText = document.getElementById('statusText');
-
-    let currentMessages = [];
-    let currentChanges = [];
-    let currentCommands = [];
-    let isStreaming = false;
-
-    // Command history for up/down navigation
-    let commandHistory = JSON.parse(localStorage.getItem('codebakers-history') || '[]');
-    let historyIndex = -1;
-    let tempInput = ''; // Store current input when navigating
-
-    function sendMessage() {
-      const message = inputEl.value.trim();
-      if (message) {
-        // Add to history (avoid duplicates of last command)
-        if (commandHistory.length === 0 || commandHistory[commandHistory.length - 1] !== message) {
-          commandHistory.push(message);
-          // Keep only last 50 commands
-          if (commandHistory.length > 50) {
-            commandHistory = commandHistory.slice(-50);
-          }
-          localStorage.setItem('codebakers-history', JSON.stringify(commandHistory));
-        }
-        historyIndex = -1;
-        tempInput = '';
-      }
-      if (!message || isStreaming) return;
-
-      vscode.postMessage({ type: 'sendMessage', message });
-      inputEl.value = '';
-      inputEl.style.height = 'auto';
-      setStreamingState(true);
-    }
-
-    function cancelRequest() {
-      vscode.postMessage({ type: 'cancelRequest' });
-    }
-
-    function setStreamingState(streaming) {
-      isStreaming = streaming;
-      sendBtn.style.display = streaming ? 'none' : 'block';
-      cancelBtn.classList.toggle('show', streaming);
-      inputEl.disabled = streaming;
-      streamingEl.classList.toggle('show', streaming);
-
-      if (streaming) {
-        streamingContentEl.style.display = 'none';
-        streamingContentEl.innerHTML = '';
-      }
-    }
-
-    function quickAction(command) {
-      inputEl.value = command + ' ';
-      inputEl.focus();
-    }
-
-    function clearChat() {
-      vscode.postMessage({ type: 'clearChat' });
-    }
-
-    function login() {
-      vscode.postMessage({ type: 'login' });
-    }
-
-    function acceptAll() {
-      vscode.postMessage({ type: 'applyAllFiles' });
-    }
-
-    function rejectAll() {
-      vscode.postMessage({ type: 'rejectAllFiles' });
-    }
-
-    function acceptFile(id) {
-      vscode.postMessage({ type: 'applyFile', id });
-    }
-
-    function rejectFile(id) {
-      vscode.postMessage({ type: 'rejectFile', id });
-    }
-
-    function showDiff(id) {
-      vscode.postMessage({ type: 'showDiff', id });
-    }
-
-    function undoFile(id) {
-      vscode.postMessage({ type: 'undoFile', id });
-    }
-
-    function runCommand(id) {
-      vscode.postMessage({ type: 'runCommand', id });
-    }
-
-    function handleKeydown(e) {
-      // Enter (without Shift) or Ctrl+Enter to send
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-        return;
-      }
-
-      // Up arrow: Previous command in history
-      if (e.key === 'ArrowUp' && commandHistory.length > 0) {
-        e.preventDefault();
-        if (historyIndex === -1) {
-          tempInput = inputEl.value; // Save current input
-          historyIndex = commandHistory.length - 1;
-        } else if (historyIndex > 0) {
-          historyIndex--;
-        }
-        inputEl.value = commandHistory[historyIndex];
-        autoResize(inputEl);
-        return;
-      }
-
-      // Down arrow: Next command in history
-      if (e.key === 'ArrowDown' && historyIndex !== -1) {
-        e.preventDefault();
-        if (historyIndex < commandHistory.length - 1) {
-          historyIndex++;
-          inputEl.value = commandHistory[historyIndex];
-        } else {
-          historyIndex = -1;
-          inputEl.value = tempInput; // Restore saved input
-        }
-        autoResize(inputEl);
-        return;
-      }
-    }
-
-    // Global keyboard shortcuts
-    document.addEventListener('keydown', function(e) {
-      // Ctrl+Shift+A: Accept all pending changes
-      if (e.ctrlKey && e.shiftKey && e.key === 'A') {
-        e.preventDefault();
-        acceptAll();
-        return;
-      }
-
-      // Escape: Cancel current request
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        cancelRequest();
-        return;
-      }
-
-      // Ctrl+Enter anywhere: Focus input and send if has content
-      if (e.ctrlKey && e.key === 'Enter') {
-        e.preventDefault();
-        inputEl.focus();
-        if (inputEl.value.trim()) {
-          sendMessage();
-        }
-        return;
-      }
-
-      // Ctrl+/ : Focus input
-      if (e.ctrlKey && e.key === '/') {
-        e.preventDefault();
-        inputEl.focus();
-        return;
-      }
-    });
-
-    function autoResize(el) {
-      el.style.height = 'auto';
-      el.style.height = Math.min(el.scrollHeight, 120) + 'px';
-    }
-
-    function escapeHtml(text) {
-      const div = document.createElement('div');
-      div.textContent = text;
-      return div.innerHTML;
-    }
-
-    function formatContent(content) {
-      if (!content) return '';
-
-      let text = content;
-      const bt = String.fromCharCode(96); // backtick
-      const bt3 = bt + bt + bt;
-
-      // Step 1: Extract and protect code blocks
-      const codeBlocks = [];
-      const codeBlockPattern = bt3 + '([a-zA-Z]*)' + String.fromCharCode(10) + '([\\s\\S]*?)' + bt3;
-      text = text.replace(new RegExp(codeBlockPattern, 'g'), function(match, lang, code) {
-        const idx = codeBlocks.length;
-        codeBlocks.push('<pre class="code-block"><code>' + escapeHtml(code.trim()) + '</code></pre>');
-        return '%%CODE' + idx + '%%';
-      });
-
-      // Step 2: Extract and protect inline code
-      const inlineCodes = [];
-      const inlinePattern = bt + '([^' + bt + ']+)' + bt;
-      text = text.replace(new RegExp(inlinePattern, 'g'), function(match, code) {
-        const idx = inlineCodes.length;
-        inlineCodes.push('<code class="inline-code">' + escapeHtml(code) + '</code>');
-        return '%%INLINE' + idx + '%%';
-      });
-
-      // Step 3: Strip markdown to plain text (not converting to HTML tags)
-      // Remove headers markers but keep text
-      text = text.replace(/^#{1,6} /gm, '');
-
-      // Remove bold markers but keep text: **text** -> text
-      text = text.replace(/\*\*([^*]+)\*\*/g, '$1');
-
-      // Remove italic markers but keep text: *text* -> text
-      text = text.replace(/\*([^*]+)\*/g, '$1');
-
-      // Remove horizontal rules
-      text = text.replace(/^-{3,}$/gm, '');
-      text = text.replace(/^_{3,}$/gm, '');
-      text = text.replace(/^\*{3,}$/gm, '');
-
-      // Clean up list markers but keep text
-      text = text.replace(/^[\-\*] /gm, '• ');
-      text = text.replace(/^\d+\. /gm, '• ');
-
-      // Remove link syntax but show text: [text](url) -> text
-      text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
-
-      // Step 4: Escape HTML in text (but not in code placeholders)
-      // Split by placeholders, escape non-placeholder parts, rejoin
-      const parts = text.split(/(%%CODE\d+%%|%%INLINE\d+%%)/g);
-      text = parts.map(part => {
-        if (part.match(/^%%CODE\d+%%$/) || part.match(/^%%INLINE\d+%%$/)) {
-          return part; // Keep placeholder as-is
-        }
-        return escapeHtml(part);
-      }).join('');
-
-      // Step 5: Restore code blocks and inline code
-      for (let i = 0; i < codeBlocks.length; i++) {
-        text = text.replace('%%CODE' + i + '%%', codeBlocks[i]);
-      }
-      for (let i = 0; i < inlineCodes.length; i++) {
-        text = text.replace('%%INLINE' + i + '%%', inlineCodes[i]);
-      }
-
-      // Step 6: Handle paragraphs and line breaks
-      const paragraphs = text.split(/\n\n+/);
-      const formatted = paragraphs.map(p => {
-        const trimmed = p.trim();
-        if (!trimmed) return '';
-        if (trimmed.startsWith('<pre') || trimmed.startsWith('<code')) return trimmed;
-        return '<p>' + trimmed.replace(/\n/g, '<br>') + '</p>';
-      }).filter(p => p).join('');
-
-      return formatted || '<p></p>';
-    }
-
-    function renderMessage(msg, index) {
-      const div = document.createElement('div');
-      div.className = 'message ' + msg.role;
-
-      let html = '';
-
-      // Thinking toggle
-      if (msg.role === 'assistant' && msg.thinking) {
-        html += '<div class="thinking-toggle" onclick="toggleThinking(this)">▶ Show reasoning</div>';
-        html += '<div class="thinking-content">' + escapeHtml(msg.thinking) + '</div>';
-      }
-
-      html += formatContent(msg.content);
-
-      div.innerHTML = html;
-      return div;
-    }
-
-    function toggleThinking(el) {
-      const content = el.nextElementSibling;
-      const isShown = content.classList.toggle('show');
-      el.textContent = isShown ? '▼ Hide reasoning' : '▶ Show reasoning';
-    }
-
-    function renderPendingChanges() {
-      const pending = currentChanges.filter(c => c.status === 'pending');
-      const pendingCmds = currentCommands.filter(c => c.status === 'pending');
-      const total = pending.length + pendingCmds.length;
-
-      pendingCount.textContent = total;
-      pendingPanel.classList.toggle('show', currentChanges.length > 0 || currentCommands.length > 0);
-
-      let html = '';
-
-      // File changes
-      for (const change of currentChanges) {
-        const icon = change.action === 'create' ? '➕' : change.action === 'edit' ? '✏️' : '🗑️';
-        const statusClass = change.status !== 'pending' ? change.status : '';
-
-        html += '<div class="pending-item ' + statusClass + '">';
-        html += '<span class="pending-icon">' + icon + '</span>';
-        html += '<div class="pending-info">';
-        html += '<div class="pending-path">' + escapeHtml(change.path) + '</div>';
-        if (change.description) {
-          html += '<div class="pending-desc">' + escapeHtml(change.description) + '</div>';
-        }
-        html += '</div>';
-
-        if (change.status === 'pending') {
-          html += '<div class="pending-item-actions">';
-          if (change.hasContent && change.action !== 'delete') {
-            html += '<button class="item-btn" onclick="showDiff(\'' + change.id + '\')">Diff</button>';
-          }
-          html += '<button class="item-btn reject" onclick="rejectFile(\'' + change.id + '\')">✕</button>';
-          html += '<button class="item-btn accept" onclick="acceptFile(\'' + change.id + '\')">✓</button>';
-          html += '</div>';
-        } else if (change.status === 'applied') {
-          html += '<div class="pending-item-actions">';
-          html += '<span style="font-size: 10px; color: #28a745; margin-right: 6px;">✓ applied</span>';
-          html += '<button class="item-btn" onclick="undoFile(\'' + change.id + '\')" title="Undo this change">↩</button>';
-          html += '</div>';
-        } else {
-          html += '<span style="font-size: 10px; opacity: 0.7;">' + change.status + '</span>';
-        }
-
-        html += '</div>';
-      }
-
-      // Commands
-      for (const cmd of currentCommands) {
-        const statusClass = cmd.status !== 'pending' ? cmd.status : '';
-
-        html += '<div class="pending-item command-item ' + statusClass + '">';
-        html += '<span class="pending-icon">▶</span>';
-        html += '<div class="pending-info">';
-        html += '<div class="command-text">' + escapeHtml(cmd.command) + '</div>';
-        if (cmd.description) {
-          html += '<div class="pending-desc">' + escapeHtml(cmd.description) + '</div>';
-        }
-        html += '</div>';
-
-        if (cmd.status === 'pending') {
-          html += '<div class="pending-item-actions">';
-          html += '<button class="item-btn accept" onclick="runCommand(\'' + cmd.id + '\')">Run</button>';
-          html += '</div>';
-        } else {
-          html += '<span style="font-size: 10px; opacity: 0.7;">' + cmd.status + '</span>';
-        }
-
-        html += '</div>';
-      }
-
-      pendingList.innerHTML = html;
-    }
-
-    window.addEventListener('message', event => {
-      const data = event.data;
-
-      switch (data.type) {
-        case 'updateMessages':
-          currentMessages = data.messages;
-          welcomeEl.style.display = data.messages.length > 0 ? 'none' : 'flex';
-
-          // Clear and re-render messages
-          const existing = messagesEl.querySelectorAll('.message');
-          existing.forEach(el => el.remove());
-
-          data.messages.forEach((msg, i) => {
-            messagesEl.insertBefore(renderMessage(msg, i), streamingEl);
-          });
-
-          messagesEl.scrollTop = messagesEl.scrollHeight;
-          setStreamingState(false);
-          break;
-
-        case 'updatePendingChanges':
-          currentChanges = data.changes || [];
-          currentCommands = data.commands || [];
-          renderPendingChanges();
-          break;
-
-        case 'typing':
-          if (data.isTyping) {
-            welcomeEl.style.display = 'none';
-          }
-          streamingEl.classList.toggle('show', data.isTyping);
-          messagesEl.scrollTop = messagesEl.scrollHeight;
-          break;
-
-        case 'streamThinking':
-          // Could show thinking indicator if desired
-          break;
-
-        case 'streamContent':
-          streamingContentEl.style.display = 'block';
-          streamingContentEl.innerHTML = formatContent(data.content);
-          messagesEl.scrollTop = messagesEl.scrollHeight;
-          break;
-
-        case 'validating':
-          statusText.textContent = 'Validating TypeScript...';
-          statusIndicator.classList.add('show');
-          break;
-
-        case 'streamError':
-          statusIndicator.classList.remove('show');
-          setStreamingState(false);
-          alert('Error: ' + (data.error || 'Unknown error'));
-          break;
-
-        case 'requestCancelled':
-          statusIndicator.classList.remove('show');
-          setStreamingState(false);
-          break;
-
-        case 'updatePlan':
-          const badge = document.getElementById('planBadge');
-          badge.textContent = data.plan.charAt(0).toUpperCase() + data.plan.slice(1);
-          badge.className = 'plan-badge' + (data.plan === 'trial' ? ' trial' : '');
-          break;
-
-        case 'showStatus':
-          if (data.show) {
-            statusText.textContent = data.text || 'Processing...';
-            statusIndicator.classList.add('show');
-          } else {
-            statusIndicator.classList.remove('show');
-          }
-          break;
-
-        case 'showProgress':
-          if (data.show) {
-            const pct = data.total > 0 ? Math.round((data.current / data.total) * 100) : 0;
-            statusText.innerHTML = data.text + '<div class="progress-bar"><div class="progress-fill" style="width:' + pct + '%"></div></div>';
-            statusIndicator.classList.add('show');
-          } else {
-            statusIndicator.classList.remove('show');
-          }
-          break;
-
-        case 'showLogin':
-          loginPromptEl.classList.add('show');
-          mainContentEl.style.display = 'none';
-          break;
-
-        case 'hideLogin':
-          loginPromptEl.classList.remove('show');
-          mainContentEl.style.display = 'flex';
-          break;
-
-        case 'updateHealth':
-          // Could show health indicator
-          break;
-      }
-    });
-
-    // Hide status after a delay
-    setInterval(() => {
-      if (!isStreaming) {
-        statusIndicator.classList.remove('show');
-      }
-    }, 3000);
-  </script>
-</body>
-</html>`;
-  }
-}