vibecodingmachine-core 1.0.1 → 2025.11.2-7.1239

package/src/ui/ChatInterface.js

@@ -1,499 +1,499 @@
-/**
- * Shared Chat Interface Component
- * Provides a consistent UI across electron app and VSCode extension
- */
-
-import { stateManager } from './StateManager.js';
-import {
-  createAutonomousButton,
-  createPauseButton,
-  createStopButton,
-  createCheckQuotaButton,
-  createOpenIdeButton,
-  createIdeButton,
-  createControlButtonContainer,
-  updateAutonomousButton,
-  updatePauseButton,
-  updateStopButton,
-  updateCheckQuotaButton,
-  updateOpenIdeButton
-} from './ButtonComponents.js';
-
-export class ChatInterface {
-  constructor(container, options = {}) {
-    this.container = container;
-    this.options = {
-      showIdeSelector: true,
-      showChatMessages: true,
-      showInput: true,
-      showControls: true,
-      theme: 'default', // 'default', 'vscode', 'electron'
-      ...options
-    };
-
-    this.elements = {};
-    this.state = stateManager.getState();
-    this.unsubscribe = null;
-
-    this.init();
-  }
-
-  init() {
-    this.render();
-    this.bindEvents();
-    this.subscribeToState();
-  }
-
-  render() {
-    this.container.innerHTML = '';
-
-    // Create header
-    const header = this.createHeader();
-    this.container.appendChild(header);
-
-    // Create IDE selector
-    if (this.options.showIdeSelector) {
-      const ideSelector = this.createIdeSelector();
-      this.container.appendChild(ideSelector);
-    }
-
-    // Create status
-    const status = this.createStatus();
-    this.container.appendChild(status);
-
-    // Create chat messages
-    if (this.options.showChatMessages) {
-      const messages = this.createMessages();
-      this.container.appendChild(messages);
-    }
-
-    // Create input area
-    if (this.options.showInput) {
-      const input = this.createInput();
-      this.container.appendChild(input);
-    }
-
-    // Create autonomous button
-    const autonomousButton = this.createAutonomousButton();
-    this.container.appendChild(autonomousButton);
-
-    // Create control buttons
-    if (this.options.showControls) {
-      const controls = this.createControlButtons();
-      this.container.appendChild(controls);
-    }
-  }
-
-  createHeader() {
-    const header = document.createElement('div');
-    header.className = 'chat-header';
-    header.innerHTML = `
-      <h1>🤖 VibeCodingMachine Chat</h1>
-    `;
-
-    Object.assign(header.style, {
-      textAlign: 'center',
-      marginBottom: '20px'
-    });
-
-    const title = header.querySelector('h1');
-    Object.assign(title.style, {
-      color: this.getThemeColor('primary'),
-      margin: '0',
-      fontSize: '24px',
-      fontWeight: '600'
-    });
-
-    this.elements.header = header;
-    return header;
-  }
-
-  createIdeSelector() {
-    const container = document.createElement('div');
-    container.className = 'ide-selector';
-
-    Object.assign(container.style, {
-      marginBottom: '20px',
-      textAlign: 'center'
-    });
-
-    const ides = ['vscode', 'cursor', 'windsurf'];
-
-    ides.forEach(ide => {
-      const button = createIdeButton({
-        ide,
-        isActive: this.state.currentIde === ide,
-        onClick: () => this.onIdeSelect(ide)
-      });
-      container.appendChild(button);
-    });
-
-    const openIdeButton = createOpenIdeButton({
-      isOpeningIde: this.state.isOpeningIde,
-      onClick: () => this.onOpenIde()
-    });
-    container.appendChild(openIdeButton);
-
-    this.elements.ideSelector = container;
-    this.elements.ideButtons = container.querySelectorAll('.ide-button');
-    this.elements.openIdeButton = openIdeButton;
-    return container;
-  }
-
-  createStatus() {
-    const status = document.createElement('div');
-    status.className = 'status';
-    status.textContent = this.state.status;
-
-    Object.assign(status.style, {
-      textAlign: 'center',
-      margin: '10px 0',
-      fontStyle: 'italic',
-      color: this.getThemeColor('secondary')
-    });
-
-    this.elements.status = status;
-    return status;
-  }
-
-  createMessages() {
-    const container = document.createElement('div');
-    container.className = 'chat-messages';
-
-    Object.assign(container.style, {
-      height: '400px',
-      overflowY: 'auto',
-      border: `1px solid ${this.getThemeColor('border')}`,
-      borderRadius: '4px',
-      padding: '10px',
-      marginBottom: '20px',
-      backgroundColor: this.getThemeColor('background')
-    });
-
-    // Add welcome message
-    const welcome = document.createElement('div');
-    welcome.className = 'message assistant';
-    welcome.textContent = 'Welcome to VibeCodingMachine! Select an IDE and start chatting.';
-
-    Object.assign(welcome.style, {
-      marginBottom: '15px',
-      padding: '10px',
-      borderRadius: '4px',
-      backgroundColor: this.getThemeColor('messageBackground'),
-      border: `1px solid ${this.getThemeColor('border')}`,
-      marginRight: '20%'
-    });
-
-    container.appendChild(welcome);
-
-    this.elements.messages = container;
-    return container;
-  }
-
-  createInput() {
-    const container = document.createElement('div');
-    container.className = 'input-container';
-
-    Object.assign(container.style, {
-      display: 'flex',
-      gap: '10px',
-      marginBottom: '10px'
-    });
-
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.className = 'message-input';
-    input.placeholder = 'Type your message...';
-
-    Object.assign(input.style, {
-      flex: '1',
-      padding: '10px',
-      border: `1px solid ${this.getThemeColor('border')}`,
-      borderRadius: '4px',
-      backgroundColor: this.getThemeColor('background'),
-      color: this.getThemeColor('text')
-    });
-
-    const sendButton = document.createElement('button');
-    sendButton.className = 'send-button';
-    sendButton.textContent = 'Send';
-
-    Object.assign(sendButton.style, {
-      background: this.getThemeColor('primary'),
-      color: 'white',
-      border: 'none',
-      padding: '10px 20px',
-      borderRadius: '4px',
-      cursor: 'pointer'
-    });
-
-    container.appendChild(input);
-    container.appendChild(sendButton);
-
-    this.elements.input = input;
-    this.elements.sendButton = sendButton;
-    return container;
-  }
-
-  createAutonomousButton() {
-    const button = createAutonomousButton({
-      autonomousMode: this.state.autonomousMode,
-      isPaused: this.state.isPaused,
-      onClick: () => this.onAutonomousToggle()
-    });
-
-    Object.assign(button.style, {
-      width: '100%',
-      marginTop: '10px'
-    });
-
-    this.elements.autonomousButton = button;
-    return button;
-  }
-
-  createControlButtons() {
-    const container = createControlButtonContainer();
-
-    const pauseButton = createPauseButton({
-      isPaused: this.state.isPaused,
-      onClick: () => this.onPauseToggle()
-    });
-
-    const stopButton = createStopButton({
-      autonomousMode: this.state.autonomousMode,
-      onClick: () => this.onStop()
-    });
-
-    const checkQuotaButton = createCheckQuotaButton({
-      isCheckingQuota: this.state.isCheckingQuota,
-      onClick: () => this.onCheckQuota()
-    });
-
-    container.appendChild(pauseButton);
-    container.appendChild(stopButton);
-    container.appendChild(checkQuotaButton);
-
-    this.elements.pauseButton = pauseButton;
-    this.elements.stopButton = stopButton;
-    this.elements.checkQuotaButton = checkQuotaButton;
-    this.elements.controlContainer = container;
-
-    return container;
-  }
-
-  bindEvents() {
-    // Input events
-    if (this.elements.input) {
-      this.elements.input.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-          this.onSendMessage();
-        }
-      });
-    }
-
-    if (this.elements.sendButton) {
-      this.elements.sendButton.addEventListener('click', () => {
-        this.onSendMessage();
-      });
-    }
-  }
-
-  subscribeToState() {
-    this.unsubscribe = stateManager.subscribe((newState, oldState) => {
-      this.updateUI(newState, oldState);
-    });
-  }
-
-  updateUI(newState, oldState) {
-    this.state = newState;
-
-    // Update status
-    if (this.elements.status) {
-      this.elements.status.textContent = newState.status;
-    }
-
-    // Update autonomous button
-    if (this.elements.autonomousButton) {
-      updateAutonomousButton(
-        this.elements.autonomousButton,
-        newState.autonomousMode,
-        newState.isPaused
-      );
-    }
-
-    // Update pause button
-    if (this.elements.pauseButton) {
-      updatePauseButton(this.elements.pauseButton, newState.isPaused);
-    }
-
-    // Update stop button
-    if (this.elements.stopButton) {
-      updateStopButton(this.elements.stopButton, newState.autonomousMode);
-    }
-
-    // Update check quota button
-    if (this.elements.checkQuotaButton) {
-      updateCheckQuotaButton(this.elements.checkQuotaButton, newState.isCheckingQuota);
-    }
-
-    // Update open IDE button
-    if (this.elements.openIdeButton) {
-      updateOpenIdeButton(this.elements.openIdeButton, newState.isOpeningIde);
-    }
-
-    // Update IDE buttons
-    if (this.elements.ideButtons) {
-      this.elements.ideButtons.forEach(button => {
-        const ide = button.dataset.ide;
-        button.classList.toggle('active', ide === newState.currentIde);
-        button.style.backgroundColor = ide === newState.currentIde ?
-          this.getThemeColor('primary') : this.getThemeColor('secondary');
-      });
-    }
-
-    // Update messages
-    if (this.elements.messages && newState.messages.length !== oldState.messages.length) {
-      this.updateMessages(newState.messages);
-    }
-  }
-
-  updateMessages(messages) {
-    // Clear existing messages except welcome
-    const welcome = this.elements.messages.querySelector('.message.assistant');
-    this.elements.messages.innerHTML = '';
-    if (welcome) {
-      this.elements.messages.appendChild(welcome);
-    }
-
-    // Add new messages
-    messages.forEach(message => {
-      const messageEl = document.createElement('div');
-      messageEl.className = `message ${message.role}`;
-      messageEl.textContent = message.text;
-
-      Object.assign(messageEl.style, {
-        marginBottom: '15px',
-        padding: '10px',
-        borderRadius: '4px',
-        backgroundColor: message.role === 'user' ?
-          this.getThemeColor('primary') : this.getThemeColor('messageBackground'),
-        color: message.role === 'user' ? 'white' : this.getThemeColor('text'),
-        marginLeft: message.role === 'user' ? '20%' : '0',
-        marginRight: message.role === 'user' ? '0' : '20%'
-      });
-
-      this.elements.messages.appendChild(messageEl);
-    });
-
-    // Scroll to bottom
-    this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
-  }
-
-  getThemeColor(type) {
-    const themes = {
-      default: {
-        primary: '#68217a',
-        secondary: '#007acc',
-        background: '#ffffff',
-        text: '#333333',
-        border: '#cccccc',
-        messageBackground: '#f8f9fa'
-      },
-      vscode: {
-        primary: 'var(--vscode-textLink-foreground)',
-        secondary: 'var(--vscode-button-secondaryBackground)',
-        background: 'var(--vscode-editor-background)',
-        text: 'var(--vscode-editor-foreground)',
-        border: 'var(--vscode-input-border)',
-        messageBackground: 'var(--vscode-input-background)'
-      },
-      electron: {
-        primary: '#68217a',
-        secondary: '#007acc',
-        background: '#ffffff',
-        text: '#333333',
-        border: '#cccccc',
-        messageBackground: '#f8f9fa'
-      }
-    };
-
-    return themes[this.options.theme]?.[type] || themes.default[type];
-  }
-
-  // Event handlers
-  onIdeSelect(ide) {
-    stateManager.setState({ currentIde: ide });
-    if (this.options.onIdeSelect) {
-      this.options.onIdeSelect(ide);
-    }
-  }
-
-  onOpenIde() {
-    if (this.options.onOpenIde) {
-      this.options.onOpenIde(this.state.currentIde);
-    }
-  }
-
-  onSendMessage() {
-    const text = this.elements.input?.value?.trim();
-    if (!text) return;
-
-    stateManager.addMessage('user', text);
-    this.elements.input.value = '';
-
-    if (this.options.onSendMessage) {
-      this.options.onSendMessage(text, this.state.currentIde);
-    }
-  }
-
-  onAutonomousToggle() {
-    if (this.state.autonomousMode) {
-      stateManager.stopAutonomousMode();
-    } else {
-      stateManager.startAutonomousMode(this.state.currentIde);
-    }
-
-    if (this.options.onAutonomousToggle) {
-      this.options.onAutonomousToggle(this.state.autonomousMode);
-    }
-  }
-
-  onPauseToggle() {
-    stateManager.togglePause();
-
-    if (this.options.onPauseToggle) {
-      this.options.onPauseToggle(this.state.isPaused);
-    }
-  }
-
-  onStop() {
-    stateManager.stopAutonomousMode();
-
-    if (this.options.onStop) {
-      this.options.onStop();
-    }
-  }
-
-  onCheckQuota() {
-    stateManager.startQuotaCheck();
-
-    if (this.options.onCheckQuota) {
-      this.options.onCheckQuota(this.state.currentIde);
-    }
-  }
-
-  // Public methods
-  addMessage(role, text) {
-    stateManager.addMessage(role, text);
-  }
-
-  updateStatus(status) {
-    stateManager.updateStatus(status);
-  }
-
-  destroy() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
-}
+/**
+ * Shared Chat Interface Component
+ * Provides a consistent UI across electron app and VSCode extension
+ */
+
+import { stateManager } from './StateManager.js';
+import {
+  createAutonomousButton,
+  createPauseButton,
+  createStopButton,
+  createCheckQuotaButton,
+  createOpenIdeButton,
+  createIdeButton,
+  createControlButtonContainer,
+  updateAutonomousButton,
+  updatePauseButton,
+  updateStopButton,
+  updateCheckQuotaButton,
+  updateOpenIdeButton
+} from './ButtonComponents.js';
+
+export class ChatInterface {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      showIdeSelector: true,
+      showChatMessages: true,
+      showInput: true,
+      showControls: true,
+      theme: 'default', // 'default', 'vscode', 'electron'
+      ...options
+    };
+
+    this.elements = {};
+    this.state = stateManager.getState();
+    this.unsubscribe = null;
+
+    this.init();
+  }
+
+  init() {
+    this.render();
+    this.bindEvents();
+    this.subscribeToState();
+  }
+
+  render() {
+    this.container.innerHTML = '';
+
+    // Create header
+    const header = this.createHeader();
+    this.container.appendChild(header);
+
+    // Create IDE selector
+    if (this.options.showIdeSelector) {
+      const ideSelector = this.createIdeSelector();
+      this.container.appendChild(ideSelector);
+    }
+
+    // Create status
+    const status = this.createStatus();
+    this.container.appendChild(status);
+
+    // Create chat messages
+    if (this.options.showChatMessages) {
+      const messages = this.createMessages();
+      this.container.appendChild(messages);
+    }
+
+    // Create input area
+    if (this.options.showInput) {
+      const input = this.createInput();
+      this.container.appendChild(input);
+    }
+
+    // Create autonomous button
+    const autonomousButton = this.createAutonomousButton();
+    this.container.appendChild(autonomousButton);
+
+    // Create control buttons
+    if (this.options.showControls) {
+      const controls = this.createControlButtons();
+      this.container.appendChild(controls);
+    }
+  }
+
+  createHeader() {
+    const header = document.createElement('div');
+    header.className = 'chat-header';
+    header.innerHTML = `
+      <h1>🤖 VibeCodingMachine Chat</h1>
+    `;
+
+    Object.assign(header.style, {
+      textAlign: 'center',
+      marginBottom: '20px'
+    });
+
+    const title = header.querySelector('h1');
+    Object.assign(title.style, {
+      color: this.getThemeColor('primary'),
+      margin: '0',
+      fontSize: '24px',
+      fontWeight: '600'
+    });
+
+    this.elements.header = header;
+    return header;
+  }
+
+  createIdeSelector() {
+    const container = document.createElement('div');
+    container.className = 'ide-selector';
+
+    Object.assign(container.style, {
+      marginBottom: '20px',
+      textAlign: 'center'
+    });
+
+    const ides = ['vscode', 'cursor', 'windsurf'];
+
+    ides.forEach(ide => {
+      const button = createIdeButton({
+        ide,
+        isActive: this.state.currentIde === ide,
+        onClick: () => this.onIdeSelect(ide)
+      });
+      container.appendChild(button);
+    });
+
+    const openIdeButton = createOpenIdeButton({
+      isOpeningIde: this.state.isOpeningIde,
+      onClick: () => this.onOpenIde()
+    });
+    container.appendChild(openIdeButton);
+
+    this.elements.ideSelector = container;
+    this.elements.ideButtons = container.querySelectorAll('.ide-button');
+    this.elements.openIdeButton = openIdeButton;
+    return container;
+  }
+
+  createStatus() {
+    const status = document.createElement('div');
+    status.className = 'status';
+    status.textContent = this.state.status;
+
+    Object.assign(status.style, {
+      textAlign: 'center',
+      margin: '10px 0',
+      fontStyle: 'italic',
+      color: this.getThemeColor('secondary')
+    });
+
+    this.elements.status = status;
+    return status;
+  }
+
+  createMessages() {
+    const container = document.createElement('div');
+    container.className = 'chat-messages';
+
+    Object.assign(container.style, {
+      height: '400px',
+      overflowY: 'auto',
+      border: `1px solid ${this.getThemeColor('border')}`,
+      borderRadius: '4px',
+      padding: '10px',
+      marginBottom: '20px',
+      backgroundColor: this.getThemeColor('background')
+    });
+
+    // Add welcome message
+    const welcome = document.createElement('div');
+    welcome.className = 'message assistant';
+    welcome.textContent = 'Welcome to VibeCodingMachine! Select an IDE and start chatting.';
+
+    Object.assign(welcome.style, {
+      marginBottom: '15px',
+      padding: '10px',
+      borderRadius: '4px',
+      backgroundColor: this.getThemeColor('messageBackground'),
+      border: `1px solid ${this.getThemeColor('border')}`,
+      marginRight: '20%'
+    });
+
+    container.appendChild(welcome);
+
+    this.elements.messages = container;
+    return container;
+  }
+
+  createInput() {
+    const container = document.createElement('div');
+    container.className = 'input-container';
+
+    Object.assign(container.style, {
+      display: 'flex',
+      gap: '10px',
+      marginBottom: '10px'
+    });
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'message-input';
+    input.placeholder = 'Type your message...';
+
+    Object.assign(input.style, {
+      flex: '1',
+      padding: '10px',
+      border: `1px solid ${this.getThemeColor('border')}`,
+      borderRadius: '4px',
+      backgroundColor: this.getThemeColor('background'),
+      color: this.getThemeColor('text')
+    });
+
+    const sendButton = document.createElement('button');
+    sendButton.className = 'send-button';
+    sendButton.textContent = 'Send';
+
+    Object.assign(sendButton.style, {
+      background: this.getThemeColor('primary'),
+      color: 'white',
+      border: 'none',
+      padding: '10px 20px',
+      borderRadius: '4px',
+      cursor: 'pointer'
+    });
+
+    container.appendChild(input);
+    container.appendChild(sendButton);
+
+    this.elements.input = input;
+    this.elements.sendButton = sendButton;
+    return container;
+  }
+
+  createAutonomousButton() {
+    const button = createAutonomousButton({
+      autonomousMode: this.state.autonomousMode,
+      isPaused: this.state.isPaused,
+      onClick: () => this.onAutonomousToggle()
+    });
+
+    Object.assign(button.style, {
+      width: '100%',
+      marginTop: '10px'
+    });
+
+    this.elements.autonomousButton = button;
+    return button;
+  }
+
+  createControlButtons() {
+    const container = createControlButtonContainer();
+
+    const pauseButton = createPauseButton({
+      isPaused: this.state.isPaused,
+      onClick: () => this.onPauseToggle()
+    });
+
+    const stopButton = createStopButton({
+      autonomousMode: this.state.autonomousMode,
+      onClick: () => this.onStop()
+    });
+
+    const checkQuotaButton = createCheckQuotaButton({
+      isCheckingQuota: this.state.isCheckingQuota,
+      onClick: () => this.onCheckQuota()
+    });
+
+    container.appendChild(pauseButton);
+    container.appendChild(stopButton);
+    container.appendChild(checkQuotaButton);
+
+    this.elements.pauseButton = pauseButton;
+    this.elements.stopButton = stopButton;
+    this.elements.checkQuotaButton = checkQuotaButton;
+    this.elements.controlContainer = container;
+
+    return container;
+  }
+
+  bindEvents() {
+    // Input events
+    if (this.elements.input) {
+      this.elements.input.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          this.onSendMessage();
+        }
+      });
+    }
+
+    if (this.elements.sendButton) {
+      this.elements.sendButton.addEventListener('click', () => {
+        this.onSendMessage();
+      });
+    }
+  }
+
+  subscribeToState() {
+    this.unsubscribe = stateManager.subscribe((newState, oldState) => {
+      this.updateUI(newState, oldState);
+    });
+  }
+
+  updateUI(newState, oldState) {
+    this.state = newState;
+
+    // Update status
+    if (this.elements.status) {
+      this.elements.status.textContent = newState.status;
+    }
+
+    // Update autonomous button
+    if (this.elements.autonomousButton) {
+      updateAutonomousButton(
+        this.elements.autonomousButton,
+        newState.autonomousMode,
+        newState.isPaused
+      );
+    }
+
+    // Update pause button
+    if (this.elements.pauseButton) {
+      updatePauseButton(this.elements.pauseButton, newState.isPaused);
+    }
+
+    // Update stop button
+    if (this.elements.stopButton) {
+      updateStopButton(this.elements.stopButton, newState.autonomousMode);
+    }
+
+    // Update check quota button
+    if (this.elements.checkQuotaButton) {
+      updateCheckQuotaButton(this.elements.checkQuotaButton, newState.isCheckingQuota);
+    }
+
+    // Update open IDE button
+    if (this.elements.openIdeButton) {
+      updateOpenIdeButton(this.elements.openIdeButton, newState.isOpeningIde);
+    }
+
+    // Update IDE buttons
+    if (this.elements.ideButtons) {
+      this.elements.ideButtons.forEach(button => {
+        const ide = button.dataset.ide;
+        button.classList.toggle('active', ide === newState.currentIde);
+        button.style.backgroundColor = ide === newState.currentIde ?
+          this.getThemeColor('primary') : this.getThemeColor('secondary');
+      });
+    }
+
+    // Update messages
+    if (this.elements.messages && newState.messages.length !== oldState.messages.length) {
+      this.updateMessages(newState.messages);
+    }
+  }
+
+  updateMessages(messages) {
+    // Clear existing messages except welcome
+    const welcome = this.elements.messages.querySelector('.message.assistant');
+    this.elements.messages.innerHTML = '';
+    if (welcome) {
+      this.elements.messages.appendChild(welcome);
+    }
+
+    // Add new messages
+    messages.forEach(message => {
+      const messageEl = document.createElement('div');
+      messageEl.className = `message ${message.role}`;
+      messageEl.textContent = message.text;
+
+      Object.assign(messageEl.style, {
+        marginBottom: '15px',
+        padding: '10px',
+        borderRadius: '4px',
+        backgroundColor: message.role === 'user' ?
+          this.getThemeColor('primary') : this.getThemeColor('messageBackground'),
+        color: message.role === 'user' ? 'white' : this.getThemeColor('text'),
+        marginLeft: message.role === 'user' ? '20%' : '0',
+        marginRight: message.role === 'user' ? '0' : '20%'
+      });
+
+      this.elements.messages.appendChild(messageEl);
+    });
+
+    // Scroll to bottom
+    this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
+  }
+
+  getThemeColor(type) {
+    const themes = {
+      default: {
+        primary: '#68217a',
+        secondary: '#007acc',
+        background: '#ffffff',
+        text: '#333333',
+        border: '#cccccc',
+        messageBackground: '#f8f9fa'
+      },
+      vscode: {
+        primary: 'var(--vscode-textLink-foreground)',
+        secondary: 'var(--vscode-button-secondaryBackground)',
+        background: 'var(--vscode-editor-background)',
+        text: 'var(--vscode-editor-foreground)',
+        border: 'var(--vscode-input-border)',
+        messageBackground: 'var(--vscode-input-background)'
+      },
+      electron: {
+        primary: '#68217a',
+        secondary: '#007acc',
+        background: '#ffffff',
+        text: '#333333',
+        border: '#cccccc',
+        messageBackground: '#f8f9fa'
+      }
+    };
+
+    return themes[this.options.theme]?.[type] || themes.default[type];
+  }
+
+  // Event handlers
+  onIdeSelect(ide) {
+    stateManager.setState({ currentIde: ide });
+    if (this.options.onIdeSelect) {
+      this.options.onIdeSelect(ide);
+    }
+  }
+
+  onOpenIde() {
+    if (this.options.onOpenIde) {
+      this.options.onOpenIde(this.state.currentIde);
+    }
+  }
+
+  onSendMessage() {
+    const text = this.elements.input?.value?.trim();
+    if (!text) return;
+
+    stateManager.addMessage('user', text);
+    this.elements.input.value = '';
+
+    if (this.options.onSendMessage) {
+      this.options.onSendMessage(text, this.state.currentIde);
+    }
+  }
+
+  onAutonomousToggle() {
+    if (this.state.autonomousMode) {
+      stateManager.stopAutonomousMode();
+    } else {
+      stateManager.startAutonomousMode(this.state.currentIde);
+    }
+
+    if (this.options.onAutonomousToggle) {
+      this.options.onAutonomousToggle(this.state.autonomousMode);
+    }
+  }
+
+  onPauseToggle() {
+    stateManager.togglePause();
+
+    if (this.options.onPauseToggle) {
+      this.options.onPauseToggle(this.state.isPaused);
+    }
+  }
+
+  onStop() {
+    stateManager.stopAutonomousMode();
+
+    if (this.options.onStop) {
+      this.options.onStop();
+    }
+  }
+
+  onCheckQuota() {
+    stateManager.startQuotaCheck();
+
+    if (this.options.onCheckQuota) {
+      this.options.onCheckQuota(this.state.currentIde);
+    }
+  }
+
+  // Public methods
+  addMessage(role, text) {
+    stateManager.addMessage(role, text);
+  }
+
+  updateStatus(status) {
+    stateManager.updateStatus(status);
+  }
+
+  destroy() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+    }
+  }
+}