promptarchitect 0.6.0

package/src/providers/aiChatViewProvider.ts

@@ -0,0 +1,1023 @@
+/**
+ * AI Chat WebView Provider
+ * 
+ * Provides the AI Chat panel as a webview in the sidebar.
+ * Integrates with the PromptArchitect API for chat functionality.
+ */
+
+import * as vscode from 'vscode';
+import { PromptArchitectAPI } from '../api';
+
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: number;
+  refined?: boolean;
+}
+
+export class AIChatViewProvider implements vscode.WebviewViewProvider {
+  public static readonly viewType = 'promptarchitect.aiChat';
+  private _view?: vscode.WebviewView;
+  private chatHistory: ChatMessage[] = [];
+
+  constructor(
+    private readonly context: vscode.ExtensionContext,
+    private readonly api: PromptArchitectAPI
+  ) {}
+
+  public resolveWebviewView(
+    webviewView: vscode.WebviewView,
+    _context: vscode.WebviewViewResolveContext,
+    _token: vscode.CancellationToken
+  ): void {
+    this._view = webviewView;
+
+    webviewView.webview.options = {
+      enableScripts: true,
+      localResourceRoots: [this.context.extensionUri],
+    };
+
+    webviewView.webview.html = this.getHtmlContent();
+
+    // Handle messages from webview
+    webviewView.webview.onDidReceiveMessage(async (message) => {
+      switch (message.command) {
+        case 'sendMessage':
+          await this.handleSendMessage(message.text, message.refined);
+          break;
+        case 'refine':
+          await this.handleRefine(message.text, message.mode);
+          break;
+        case 'copyToClipboard':
+          await vscode.env.clipboard.writeText(message.text);
+          vscode.window.showInformationMessage('📋 Copied!');
+          break;
+        case 'insertInEditor':
+          await this.insertInEditor(message.text);
+          break;
+        case 'clearChat':
+          this.chatHistory = [];
+          await this.context.workspaceState.update('aiChatHistory', []);
+          this.syncHistory();
+          vscode.window.showInformationMessage('🗒️ Chat cleared');
+          break;
+        case 'addContext':
+          await this.addEditorContext();
+          break;
+        case 'attachFile':
+          await this.attachFile();
+          break;
+      }
+    });
+
+    // Load any existing chat history
+    this.chatHistory = this.context.workspaceState.get('aiChatHistory', []);
+    this.syncHistory();
+  }
+
+  private async attachFile(): Promise<void> {
+    const uris = await vscode.window.showOpenDialog({
+      canSelectMany: false,
+      openLabel: 'Attach File',
+      filters: {
+        'All Files': ['*'],
+        'Code': ['ts', 'js', 'py', 'java', 'cpp', 'c', 'go', 'rs', 'rb', 'php'],
+        'Config': ['json', 'yaml', 'yml', 'toml', 'xml'],
+        'Text': ['txt', 'md', 'markdown'],
+      },
+    });
+
+    if (uris && uris.length > 0) {
+      const uri = uris[0];
+      const document = await vscode.workspace.openTextDocument(uri);
+      const content = document.getText();
+      const fileName = uri.fsPath.split(/[\\/]/).pop() || 'file';
+      const language = document.languageId;
+
+      // Limit content size
+      const maxChars = 10000;
+      const truncated = content.length > maxChars 
+        ? content.substring(0, maxChars) + '\n\n... [truncated]'
+        : content;
+
+      this._view?.webview.postMessage({
+        command: 'addFile',
+        fileName,
+        language,
+        content: truncated,
+      });
+    }
+  }
+
+  private async handleSendMessage(text: string, wasRefined: boolean = false): Promise<void> {
+    if (!text.trim()) return;
+
+    // Add user message
+    const userMessage: ChatMessage = {
+      id: this.generateId(),
+      role: 'user',
+      content: text,
+      timestamp: Date.now(),
+      refined: wasRefined,
+    };
+    this.chatHistory.push(userMessage);
+    this.syncHistory();
+
+    // Show loading
+    this._view?.webview.postMessage({ command: 'loading', loading: true });
+
+    try {
+      const response = await this.api.chat({
+        message: text,
+        history: this.chatHistory.slice(0, -1).map(m => ({
+          role: m.role,
+          content: m.content,
+        })),
+      });
+
+      // Add assistant response
+      const assistantMessage: ChatMessage = {
+        id: this.generateId(),
+        role: 'assistant',
+        content: response.reply,
+        timestamp: Date.now(),
+      };
+      this.chatHistory.push(assistantMessage);
+      
+      // Save to workspace state
+      await this.context.workspaceState.update('aiChatHistory', this.chatHistory);
+      
+      this.syncHistory();
+    } catch (error) {
+      const errorMessage: ChatMessage = {
+        id: this.generateId(),
+        role: 'assistant',
+        content: `⚠️ Error: ${error}. Please try again.`,
+        timestamp: Date.now(),
+      };
+      this.chatHistory.push(errorMessage);
+      this.syncHistory();
+    } finally {
+      this._view?.webview.postMessage({ command: 'loading', loading: false });
+    }
+  }
+
+  private async handleRefine(text: string, mode: string): Promise<void> {
+    if (!text.trim()) return;
+
+    this._view?.webview.postMessage({ command: 'refining', refining: true });
+
+    try {
+      const config = vscode.workspace.getConfiguration('promptarchitect');
+      const targetModel = config.get<string>('targetModel') || 'general';
+
+      const feedbackMap: Record<string, string> = {
+        clarity: 'Make this prompt clearer and more specific.',
+        detailed: 'Add more context and details.',
+        concise: 'Make this more concise.',
+        technical: 'Make this technically precise.',
+      };
+
+      const result = await this.api.refinePrompt({
+        prompt: text,
+        feedback: feedbackMap[mode] || feedbackMap.clarity,
+        targetModel,
+      });
+
+      this._view?.webview.postMessage({
+        command: 'refined',
+        text: result.refinedPrompt,
+      });
+    } catch (error) {
+      vscode.window.showErrorMessage(`Refinement failed: ${error}`);
+    } finally {
+      this._view?.webview.postMessage({ command: 'refining', refining: false });
+    }
+  }
+
+  private async insertInEditor(text: string): Promise<void> {
+    const editor = vscode.window.activeTextEditor;
+    if (editor) {
+      await editor.edit((editBuilder) => {
+        if (editor.selection.isEmpty) {
+          editBuilder.insert(editor.selection.active, text);
+        } else {
+          editBuilder.replace(editor.selection, text);
+        }
+      });
+    } else {
+      const doc = await vscode.workspace.openTextDocument({ content: text });
+      await vscode.window.showTextDocument(doc);
+    }
+  }
+
+  private async addEditorContext(): Promise<void> {
+    const editor = vscode.window.activeTextEditor;
+    if (!editor) {
+      vscode.window.showWarningMessage('No active editor');
+      return;
+    }
+
+    let contextText = '';
+    if (!editor.selection.isEmpty) {
+      contextText = editor.document.getText(editor.selection);
+    } else {
+      const visibleRanges = editor.visibleRanges;
+      if (visibleRanges.length > 0) {
+        contextText = editor.document.getText(visibleRanges[0]);
+      }
+    }
+
+    if (contextText) {
+      const fileName = editor.document.fileName.split(/[\\/]/).pop();
+      const language = editor.document.languageId;
+      
+      this._view?.webview.postMessage({
+        command: 'addContext',
+        context: { fileName, language, code: contextText },
+      });
+    }
+  }
+
+  private syncHistory(): void {
+    this._view?.webview.postMessage({
+      command: 'syncHistory',
+      history: this.chatHistory,
+    });
+  }
+
+  private generateId(): string {
+    return `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  public prefillPrompt(text: string): void {
+    this._view?.webview.postMessage({
+      command: 'prefill',
+      text,
+    });
+  }
+
+  private getHtmlContent(): string {
+    return /*html*/ `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    :root {
+      --radius-sm: 4px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    html, body {
+      font-family: var(--vscode-font-family);
+      font-size: var(--vscode-font-size);
+      background: var(--vscode-sideBar-background);
+      color: var(--vscode-foreground);
+      height: 100%;
+      overflow: hidden;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* Header toolbar */
+    .header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--vscode-widget-border);
+      background: var(--vscode-sideBarSectionHeader-background);
+    }
+    
+    .header-title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      opacity: 0.8;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    
+    .header-actions {
+      display: flex;
+      gap: 4px;
+    }
+    
+    .icon-btn {
+      background: transparent;
+      border: none;
+      color: var(--vscode-foreground);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: var(--radius-sm);
+      opacity: 0.7;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon-btn:hover {
+      opacity: 1;
+      background: var(--vscode-toolbar-hoverBackground);
+    }
+    
+    /* Chat container */
+    .chat-container {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      scroll-behavior: smooth;
+    }
+    
+    .empty-state {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      opacity: 0.8;
+      padding: 20px;
+    }
+    
+    .empty-state .icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+    .empty-state h3 { font-size: 16px; margin-bottom: 8px; font-weight: 600; }
+    .empty-state p { font-size: 13px; line-height: 1.5; color: var(--vscode-descriptionForeground); max-width: 240px; margin-bottom: 24px; }
+    
+    .quick-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: center;
+      max-width: 300px;
+    }
+    
+    .quick-action {
+      padding: 6px 12px;
+      background: var(--vscode-button-secondaryBackground);
+      color: var(--vscode-button-secondaryForeground);
+      border: 1px solid transparent;
+      border-radius: 16px;
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    
+    .quick-action:hover {
+      background: var(--vscode-button-secondaryHoverBackground);
+      transform: translateY(-1px);
+    }
+    
+    /* Messages */
+    .message {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      animation: slideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+    
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .message.user { align-items: flex-end; }
+    .message.assistant { align-items: flex-start; }
+    
+    .bubble {
+      max-width: 90%;
+      padding: 10px 14px;
+      font-size: 13px;
+      line-height: 1.5;
+      position: relative;
+    }
+    
+    .message.user .bubble {
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border-radius: 16px 16px 4px 16px;
+    }
+    
+    .message.assistant .bubble {
+      background: var(--vscode-editor-background);
+      border: 1px solid var(--vscode-widget-border);
+      border-radius: 16px 16px 16px 4px;
+    }
+
+    .bubble pre {
+      background: var(--vscode-textCodeBlock-background);
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 8px 0;
+      font-family: var(--vscode-editor-font-family);
+      font-size: 12px;
+    }
+    
+    .bubble code {
+      background: rgba(0,0,0,0.1);
+      padding: 2px 4px;
+      border-radius: 4px;
+      font-family: var(--vscode-editor-font-family);
+      font-size: 12px;
+    }
+    
+    .message.assistant .bubble code {
+      background: var(--vscode-textCodeBlock-background);
+    }
+    
+    .message-meta {
+      font-size: 10px;
+      color: var(--vscode-descriptionForeground);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 4px;
+      min-height: 16px;
+    }
+    
+    .msg-actions {
+      display: flex;
+      gap: 4px;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+    
+    .message:hover .msg-actions { opacity: 1; }
+    
+    .msg-action {
+      background: transparent;
+      border: none;
+      color: var(--vscode-descriptionForeground);
+      cursor: pointer;
+      padding: 2px;
+      font-size: 14px;
+    }
+    
+    .msg-action:hover { color: var(--vscode-foreground); }
+    
+    /* FLOATING COMPOSER */
+    .composer {
+      flex-shrink: 0;
+      padding: 16px;
+      background: var(--vscode-sideBar-background);
+      border-top: 1px solid var(--vscode-widget-border);
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .input-container {
+      background: var(--vscode-input-background);
+      border: 1px solid var(--vscode-input-border);
+      border-radius: var(--radius-md);
+      padding: 0;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .input-container:focus-within {
+      border-color: var(--vscode-focusBorder);
+      box-shadow: 0 0 0 1px var(--vscode-focusBorder);
+    }
+
+    .chat-input {
+      width: 100%;
+      min-height: 100px;
+      max-height: 300px;
+      padding: 14px 16px;
+      border: none;
+      background: transparent;
+      color: var(--vscode-input-foreground);
+      font-family: var(--vscode-font-family);
+      font-size: 13px;
+      line-height: 1.6;
+      resize: none;
+    }
+
+    .chat-input:focus { outline: none; }
+
+    .chat-input::placeholder {
+      color: var(--vscode-input-placeholderForeground);
+    }
+
+    /* Attachments Bar */
+    .attachments-bar {
+      padding: 8px 12px;
+      border-top: 1px solid rgba(128, 128, 128, 0.1);
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .attach-btn {
+      background: transparent;
+      border: none;
+      color: var(--vscode-descriptionForeground);
+      font-size: 11px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: all 0.2s;
+    }
+
+    .attach-btn:hover {
+      background: var(--vscode-toolbar-hoverBackground);
+      color: var(--vscode-foreground);
+    }
+
+    .attachment-chip {
+      background: var(--vscode-badge-background);
+      color: var(--vscode-badge-foreground);
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    @keyframes popIn {
+      from { transform: scale(0.8); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+
+    .chip-remove {
+      background: none;
+      border: none;
+      color: inherit;
+      cursor: pointer;
+      opacity: 0.7;
+      padding: 0;
+      font-size: 12px;
+      display: flex;
+    }
+
+    .chip-remove:hover { opacity: 1; }
+
+    /* Polish Toolbar - COLLAPSIBLE */
+    .polish-toolbar {
+      overflow: hidden;
+      transition: all 0.3s ease;
+      background: var(--vscode-editor-background);
+      border: 1px solid var(--vscode-widget-border);
+      border-radius: var(--radius-md);
+    }
+
+    .polish-toolbar.collapsed .polish-content {
+      display: none;
+    }
+
+    .polish-header {
+      padding: 8px 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      font-size: 11px;
+      font-weight: 600;
+      user-select: none;
+    }
+
+    .polish-header:hover {
+      background: var(--vscode-toolbar-hoverBackground);
+    }
+
+    .polish-content {
+      padding: 8px 12px;
+      border-top: 1px solid var(--vscode-widget-border);
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    .refine-btn {
+      flex: 1;
+      min-width: 80px;
+      padding: 6px 10px;
+      background: var(--vscode-button-secondaryBackground);
+      color: var(--vscode-button-secondaryForeground);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      font-size: 11px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      transition: all 0.2s;
+    }
+
+    .refine-btn:hover {
+      background: var(--vscode-button-secondaryHoverBackground);
+    }
+
+    .refine-btn.active {
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+    }
+
+    /* Execute Button */
+    .execute-btn {
+      width: 100%;
+      padding: 12px;
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border: none;
+      border-radius: var(--radius-md);
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .execute-btn:hover {
+      background: var(--vscode-button-hoverBackground);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    }
+
+    .execute-btn:active {
+      transform: translateY(0);
+    }
+
+    .execute-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    .keyboard-hints {
+      text-align: center;
+      font-size: 10px;
+      color: var(--vscode-descriptionForeground);
+      opacity: 0;
+      transition: opacity 0.3s;
+      margin-top: -4px;
+    }
+
+    .composer:focus-within .keyboard-hints {
+      opacity: 0.7;
+    }
+
+    .spinner {
+      width: 14px;
+      height: 14px;
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Narrow sidebar adaptations */
+    @media (max-width: 300px) {
+      .polish-content {
+        flex-direction: column;
+      }
+      .refine-btn {
+        width: 100%;
+        justify-content: flex-start;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="header-title">
+      <span>⚡ Architect</span>
+    </div>
+    <div class="header-actions">
+      <button class="icon-btn" id="newChatBtn" title="New Chat">🗒️</button>
+      <button class="icon-btn" id="exportBtn" title="Export Chat">📤</button>
+    </div>
+  </div>
+
+  <div class="chat-container" id="chatContainer">
+    <div class="empty-state" id="emptyState">
+      <div class="icon">⚡</div>
+      <h3>PromptArchitect</h3>
+      <p>Build, refine, and execute complex prompts with ease.</p>
+      <div class="quick-actions">
+        <button class="quick-action" data-prompt="Refactor this code to follow SOLID principles:">🔧 Refactor</button>
+        <button class="quick-action" data-prompt="Write unit tests for this file:">🧪 Test</button>
+        <button class="quick-action" data-prompt="Explain how this code works:">💡 Explain</button>
+        <button class="quick-action" data-prompt="Find potential bugs in:">🐛 Debug</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="composer">
+    <!-- Polish Toolbar (Collapsed by default) -->
+    <div class="polish-toolbar collapsed" id="polishToolbar">
+      <div class="polish-header" id="polishToggle">
+        <span style="display: flex; align-items: center; gap: 6px;">✨ Polish Prompt <span id="refineStatus" style="font-weight: 400; color: var(--vscode-descriptionForeground); font-size: 10px;">(Optional)</span></span>
+        <span class="chevron" id="polishChevron">▼</span>
+      </div>
+      <div class="polish-content">
+        <button class="refine-btn" data-mode="clarity">✨ Clarity</button>
+        <button class="refine-btn" data-mode="detailed">📝 Detail</button>
+        <button class="refine-btn" data-mode="concise">✂️ Concise</button>
+        <button class="refine-btn" data-mode="technical">⚙️ Technical</button>
+      </div>
+    </div>
+
+    <!-- Main Input Area -->
+    <div class="input-container">
+      <textarea class="chat-input" id="chatInput" placeholder="Describe what you want to build..." rows="4"></textarea>
+      
+      <!-- Attachments Bar -->
+      <div class="attachments-bar" id="attachmentsBar">
+        <button class="attach-btn" id="attachCodeBtn">📎 Code</button>
+        <button class="attach-btn" id="attachFileBtn">📄 File</button>
+        <!-- Dynamic chips go here -->
+        <div id="attachmentChips" style="display:contents"></div>
+      </div>
+    </div>
+
+    <!-- Execute Button -->
+    <button class="execute-btn" id="sendBtn">
+      <span class="btn-icon">⚡</span>
+      <span class="btn-text">Execute Prompt</span>
+    </button>
+    
+    <div class="keyboard-hints">
+      Enter to send · Shift+Enter for new line
+    </div>
+  </div>
+
+  <script>
+    const vscode = acquireVsCodeApi();
+    
+    // UI Elements
+    const chatContainer = document.getElementById('chatContainer');
+    const emptyState = document.getElementById('emptyState');
+    const input = document.getElementById('chatInput');
+    const sendBtn = document.getElementById('sendBtn');
+    const polishToolbar = document.getElementById('polishToolbar');
+    const polishToggle = document.getElementById('polishToggle');
+    const polishChevron = document.getElementById('polishChevron');
+    const refineBtns = document.querySelectorAll('.refine-btn');
+    const attachmentChips = document.getElementById('attachmentChips');
+    const refineStatus = document.getElementById('refineStatus');
+    
+    // State
+    let isLoading = false;
+    let wasRefined = false;
+    let attachedContexts = [];
+    let chatHistory = [];
+
+    // --- Autosize Textarea ---
+    function resizeInput() {
+      input.style.height = 'auto';
+      input.style.height = Math.min(input.scrollHeight, 300) + 'px';
+    }
+    input.addEventListener('input', resizeInput);
+    
+    // --- Polish Toolbar ---
+    polishToggle.addEventListener('click', () => {
+      const isCollapsed = polishToolbar.classList.toggle('collapsed');
+      polishChevron.textContent = isCollapsed ? '▼' : '▲';
+    });
+
+    refineBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        if (!input.value.trim()) return;
+        
+        // Visual feedback
+        refineBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        refineStatus.textContent = '(Refining...)';
+        
+        vscode.postMessage({
+          command: 'refine',
+          text: input.value,
+          mode: btn.dataset.mode
+        });
+      });
+    });
+
+    // --- Attachments ---
+    document.getElementById('attachCodeBtn').addEventListener('click', () => {
+      vscode.postMessage({ command: 'addContext' });
+    });
+    
+    document.getElementById('attachFileBtn').addEventListener('click', () => {
+      vscode.postMessage({ command: 'attachFile' });
+    });
+
+    function renderAttachments() {
+      attachmentChips.innerHTML = attachedContexts.map((ctx, i) => \`
+        <div class="attachment-chip">
+          <span>\${ctx.type === 'file' ? '📄' : '✂️'} \${ctx.name}</span>
+          <button class="chip-remove" onclick="removeAttachment(\${i})">✕</button>
+        </div>
+      \`).join('');
+    }
+
+    window.removeAttachment = (index) => {
+      attachedContexts.splice(index, 1);
+      renderAttachments();
+    };
+
+    // --- Quick Actions ---
+    document.querySelectorAll('.quick-action').forEach(btn => {
+      btn.addEventListener('click', () => {
+        input.value = btn.dataset.prompt + ' ';
+        input.focus();
+        resizeInput();
+      });
+    });
+
+    // --- Messaging ---
+    sendBtn.addEventListener('click', sendMessage);
+    
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+
+    function sendMessage() {
+      if (isLoading || !input.value.trim()) return;
+      
+      let text = input.value;
+      
+      // Combine context
+      if (attachedContexts.length > 0) {
+        const contextStr = attachedContexts.map(ctx => 
+          \`**\${ctx.type}: \${ctx.name}**\\n\\\`\\\`\\\`\${ctx.language || ''}\\n\${ctx.content}\\n\\\`\\\`\\\`\`
+        ).join('\\n\\n');
+        text = contextStr + '\\n\\n' + text;
+      }
+      
+      vscode.postMessage({ command: 'sendMessage', text, refined: wasRefined });
+      
+      // Reset state
+      input.value = '';
+      resizeInput();
+      wasRefined = false;
+      attachedContexts = [];
+      renderAttachments();
+      refineBtns.forEach(b => b.classList.remove('active'));
+      polishToolbar.classList.add('collapsed');
+      polishChevron.textContent = '▼';
+      refineStatus.textContent = '(Optional)';
+    }
+
+    // --- Message Rendering ---
+    function renderMessage(msg) {
+      const div = document.createElement('div');
+      div.className = \`message \${msg.role}\`;
+      
+      let content = msg.content
+        .replace(/\\\`\\\`\\\`(\\w*)\\n([\\s\\S]*?)\\\`\\\`\\\`/g, '<pre><code>$2</code></pre>')
+        .replace(/\\\`([^\\\`]+)\\\`/g, '<code>$1</code>')
+        .replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')
+        .replace(/\\n/g, '<br>');
+      
+      const time = new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      
+      div.innerHTML = \`
+        <div class="bubble">
+          \${content}
+        </div>
+        <div class="message-meta">
+          <span>\${time}</span>
+          \${msg.refined ? '<span>✨ refined</span>' : ''}
+          <div class="msg-actions">
+            <button class="msg-action" onclick="copyMsg('\${msg.id}')" title="Copy">📋</button>
+            \${msg.role === 'assistant' ? \`<button class="msg-action" onclick="insertMsg('\${msg.id}')" title="Insert">📥</button>\` : ''}
+          </div>
+        </div>
+      \`;
+      return div;
+    }
+
+    // --- Extension Communication ---
+    window.addEventListener('message', event => {
+      const msg = event.data;
+      
+      switch (msg.command) {
+        case 'loading':
+          isLoading = msg.loading;
+          sendBtn.disabled = msg.loading;
+          const btnText = sendBtn.querySelector('.btn-text');
+          const btnIcon = sendBtn.querySelector('.btn-icon');
+          
+          if (msg.loading) {
+            btnIcon.innerHTML = '<div class="spinner"></div>';
+            btnText.textContent = 'Thinking...';
+          } else {
+            btnIcon.textContent = '⚡';
+            btnText.textContent = 'Execute Prompt';
+          }
+          break;
+          
+        case 'refined':
+          input.value = msg.text;
+          wasRefined = true;
+          resizeInput();
+          refineStatus.textContent = '✓ Refined';
+          break;
+          
+        case 'refining':
+          refineBtns.forEach(b => b.disabled = msg.refining);
+          break;
+          
+        case 'syncHistory':
+          chatHistory = msg.history;
+          chatContainer.innerHTML = '';
+          if (chatHistory.length === 0) {
+            chatContainer.appendChild(emptyState);
+          } else {
+            chatHistory.forEach(m => chatContainer.appendChild(renderMessage(m)));
+          }
+          chatContainer.scrollTop = chatContainer.scrollHeight;
+          break;
+
+        case 'addContext':
+        case 'addFile':
+          attachedContexts.push({
+            type: msg.command === 'addFile' ? 'file' : 'code',
+            name: msg.command === 'addFile' ? msg.fileName : msg.context.fileName,
+            language: msg.command === 'addFile' ? msg.language : msg.context.language,
+            content: msg.command === 'addFile' ? msg.content : msg.context.code
+          });
+          renderAttachments();
+          break;
+          
+        case 'prefill':
+          input.value = msg.text;
+          input.focus();
+          resizeInput();
+          break;
+          
+        case 'clearChat':
+          chatHistory = [];
+          chatContainer.innerHTML = '';
+          chatContainer.appendChild(emptyState);
+          break;
+      }
+    });
+
+    // Helper functions exposed to window
+    window.copyMsg = (id) => {
+      const msg = chatHistory.find(m => m.id === id);
+      if (msg) vscode.postMessage({ command: 'copyToClipboard', text: msg.content });
+    };
+
+    window.insertMsg = (id) => {
+      const msg = chatHistory.find(m => m.id === id);
+      if (msg) vscode.postMessage({ command: 'insertInEditor', text: msg.content });
+    };
+
+    // Header Actions
+    document.getElementById('newChatBtn').addEventListener('click', () => {
+      vscode.postMessage({ command: 'clearChat' });
+    });
+    
+    document.getElementById('exportBtn').addEventListener('click', () => {
+      const exportText = chatHistory.map(m => 
+        \`[\${m.role.toUpperCase()}]\\n\${m.content}\`
+      ).join('\\n\\n---\\n\\n');
+      vscode.postMessage({ command: 'copyToClipboard', text: exportText });
+    });
+
+    // Init
+    resizeInput();
+    input.focus();
+  </script>
+</body>
+</html>
+`;
+  }
+}