From 6109c1e8fed4bb0c2f17077ac3b8824848fffb45 Mon Sep 17 00:00:00 2001
From: AhmedV20 <160046016+AhmedV20@users.noreply.github.com>
Date: Sat, 24 Jan 2026 16:05:09 +0200
Subject: [PATCH] feat(v1.2.0): OpenAI support, analyzed files dropdown, DOM
 scraping Features: - Add OpenAI provider (GPT-4o) with streaming support -
 Add Analyzed Files Dropdown with glow animation - Implement client-side DOM
 scraping strategy - Add smart file prioritization with 80k token budget -
 Enhance cache management with repo-specific delete Improvements: - Redesign
 Analyze button with status colors - Add request throttling (30s cooldown) -
 Remove GitHub token requirement for public repos - Update README.md (remove
 Firefox, add Chrome manual) - Update PRIVACY.md with OpenAI provider Removed:
 - ChatInterface.tsx (consolidated into HomeTab) - GitHubTokenModal.tsx (no
 longer needed)

---
 .github/workflows/deploy-edge.yml             |   7 -
 PRIVACY.md                                    |   7 +-
 README.md                                     |  54 +-
 package.json                                  |   2 +-
 public/manifest.json                          |   3 +-
 src/background/api/ai-provider.ts             |  31 +-
 src/background/api/github.ts                  | 157 +++-
 src/background/api/provider-factory.ts        |  14 +
 src/background/api/providers/openai.ts        | 235 ++++++
 src/background/index.ts                       |  23 +
 src/background/services/analysis.ts           | 146 +++-
 src/background/services/cache.ts              |  86 +-
 .../services/strategies/client-strategy.ts    | 200 +++++
 src/background/services/strategies/factory.ts |  41 +
 .../services/strategies/file-prioritizer.ts   | 148 ++++
 .../services/strategies/prompt-optimizer.ts   | 231 ++++++
 src/background/services/strategies/types.ts   |  52 ++
 src/content/components/AnalysisPanel.tsx      |   2 +-
 src/content/components/AnalyzeButton.tsx      | 176 ++--
 .../components/AnalyzedFilesDropdown.tsx      | 161 ++++
 src/content/components/ChatInterface.tsx      | 366 ---------
 src/content/components/GitHubTokenModal.tsx   | 308 -------
 src/content/components/HomeTab.tsx            | 597 +++++++++++---
 src/content/components/SettingsTab.tsx        | 749 +++++++++++++++---
 src/content/components/ThinkingBox.tsx        |  20 +-
 src/content/hooks/useAnalysis.ts              |  90 ++-
 src/content/index.tsx                         |  15 +-
 src/content/utils/domScraper.ts               | 190 +++++
 src/content/utils/fileTreeScraper.ts          | 111 +++
 src/content/utils/thinkingParser.ts           |  59 +-
 src/shared/constants.ts                       |  35 +-
 src/shared/types/index.ts                     |  73 ++
 32 files changed, 3266 insertions(+), 1123 deletions(-)
 create mode 100644 src/background/api/providers/openai.ts
 create mode 100644 src/background/services/strategies/client-strategy.ts
 create mode 100644 src/background/services/strategies/factory.ts
 create mode 100644 src/background/services/strategies/file-prioritizer.ts
 create mode 100644 src/background/services/strategies/prompt-optimizer.ts
 create mode 100644 src/background/services/strategies/types.ts
 create mode 100644 src/content/components/AnalyzedFilesDropdown.tsx
 delete mode 100644 src/content/components/ChatInterface.tsx
 delete mode 100644 src/content/components/GitHubTokenModal.tsx
 create mode 100644 src/content/utils/domScraper.ts
 create mode 100644 src/content/utils/fileTreeScraper.ts

diff --git a/.github/workflows/deploy-edge.yml b/.github/workflows/deploy-edge.yml
index 40f77a9..813ccef 100644
--- a/.github/workflows/deploy-edge.yml
+++ b/.github/workflows/deploy-edge.yml
@@ -189,13 +189,6 @@ jobs:
           api-key: ${{ secrets.EDGE_API_KEY }}
           client-id: ${{ secrets.EDGE_CLIENT_ID }}
           upload-only: true
-          notes-for-certification: |
-            v${{ needs.validate.outputs.version }} release
-            - Bug fixes and performance improvements
-            - CSS isolation fixes
-            - GitHub API optimization
-            
-            GitHub: https://github.com/AhmedV20/codemind
 
       - name: ✅ Upload success
         if: success()
diff --git a/PRIVACY.md b/PRIVACY.md
index 0ed9cd5..4fc8d54 100644
--- a/PRIVACY.md
+++ b/PRIVACY.md
@@ -10,8 +10,8 @@ CodeMind is a browser extension that provides AI-powered analysis of GitHub repo
 
 ### What We Collect
 - **API Keys:** Stored locally in your browser using Chrome's storage API. Never transmitted to our servers.
-- **Repository Data:** Temporarily fetched from GitHub's public API for analysis. Not stored permanently.
-- **GitHub Token (Optional):** If you add a GitHub token for rate limit handling, it's stored locally only.
+- **Repository Data:** Temporarily fetched from GitHub for analysis. Not stored permanently.
+- **Cached Analyses:** Stored locally and automatically expire after 24 hours.
 
 ### What We Don't Collect
 - Personal information
@@ -28,9 +28,10 @@ All data is stored **locally on your device**:
 ## Third-Party Services
 
 CodeMind connects to:
-1. **GitHub API** - To fetch public repository information
+1. **GitHub** - To fetch public repository information (no authentication required)
 2. **AI Providers** (user-selected):
    - Google Gemini API
+   - OpenAI API
    - Anthropic Claude API
    - HuggingFace Inference API
    - OpenRouter API
diff --git a/README.md b/README.md
index 486b778..4b343bf 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 <div align="center">
 
 [![Stars](https://img.shields.io/github/stars/AhmedV20/codemind?style=social)](https://github.com/AhmedV20/codemind/stargazers)
-[![Version](https://img.shields.io/badge/version-1.1.1-blue)](https://github.com/AhmedV20/codemind/releases)
+[![Version](https://img.shields.io/badge/version-1.2.0-blue)](https://github.com/AhmedV20/codemind/releases)
 [![Build](https://img.shields.io/github/actions/workflow/status/AhmedV20/codemind/ci.yml?label=CI/Build)](https://github.com/AhmedV20/codemind/actions)
 [![Privacy](https://img.shields.io/badge/Privacy-Protected-green)](PRIVACY.md)
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
@@ -38,25 +38,23 @@
 </td>
 <td align="center" width="50%">
 <br>
-<img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png" width="65">
+<img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png" width="65">
 <br>
-<img src="https://img.shields.io/badge/Firefox-Coming_Soon-FF7139?style=for-the-badge&logo=firefoxbrowser&logoColor=white" alt="Firefox">
+<img src="https://img.shields.io/badge/Chrome-Manual_Install-4285F4?style=for-the-badge&logo=googlechrome&logoColor=white" alt="Chrome">
 <br><br>
-<p><b>📝 In Progress</b></p>
-<p>Firefox submission is underway. We'll notify you once it's available!</p>
+<p><b>🔧 Developer Mode</b></p>
+<p>Install manually via <a href="#-manual-installation">instructions below</a></p>
 </td>
 </tr>
 </table>
 
 <br>
 
-> 💡 **Want to try CodeMind now?** See the [Manual Installation](#-manual-installation) guide below for Chrome/Edge.
-
 </div>
 
 ---
 
-### 💡 What is CodeMind?
+## 💡 What is CodeMind?
 
 CodeMind is a powerful browser extension that uses AI to instantly understand any GitHub repository. Simply click a button and get:
 
@@ -64,6 +62,7 @@ CodeMind is a powerful browser extension that uses AI to instantly understand an
 - **Code Structure Analysis** — Learn how the codebase is organized  
 - **Tech Stack Detection** — See all languages, frameworks, and dependencies at a glance
 - **Interactive Q&A** — Ask follow-up questions and get detailed answers about any part of the code
+- **Analyzed Files View** — See exactly which files were analyzed (new in v1.2.0!)
 
 <!-- Demo GIF - Replace with your actual demo recording
 <p align="center">
@@ -78,7 +77,7 @@ CodeMind is a powerful browser extension that uses AI to instantly understand an
 1. Install from the [Edge Add-ons Store](https://microsoftedge.microsoft.com/addons/detail/hfggelncfoaompalbnkgbincglagmbnj) or [manually](#-manual-installation)
 2. Navigate to any GitHub repository
 3. Click the **CodeMind** button next to the Insights tab
-4. Configure your AI provider (Gemini, Claude, HuggingFace, or OpenRouter)
+4. Configure your AI provider (Gemini, OpenAI, Claude, HuggingFace, or OpenRouter)
 5. Click **Analyze Repository** to get your summary
 
 ---
@@ -90,21 +89,37 @@ CodeMind is a powerful browser extension that uses AI to instantly understand an
 - **AI Summaries** — Get instant, readable explanations of complex code
 - **Interactive Chat** — Ask follow-up questions about the repository
 - **Smart Caching** — Results saved for 24 hours
+- **Analyzed Files Dropdown** — See which files were included in the analysis
 
 ### AI Providers
 | Provider | Free Tier | Description |
 |----------|-----------|-------------|
 | **Gemini** | ✅ Yes | Google's AI with generous free tier |
+| **OpenAI** | ❌ Paid | GPT-4o with streaming support (new!) |
 | **OpenRouter** | ✅ Yes | Access 100+ models (DeepSeek, Qwen, etc.) |
 | **Claude** | ❌ Paid | Anthropic's Claude models |
 | **HuggingFace** | ✅ Yes | Open-source models |
 
-### v1.1.0 Highlights
+### v1.2.0 Highlights
+- 🤖 **OpenAI Support** — GPT-4o integration with streaming
+- 📂 **Analyzed Files Dropdown** — See which files were analyzed with glow animation
+- 🌐 **No GitHub Token Required** — Works on public repos without authentication
+- 🎯 **Smart File Selection** — Intelligent 80k token budget with file prioritization
+- 🧠 **ThinkingBox** — See AI reasoning process in collapsible box
+- 🎨 **Redesigned UI** — New Analyze button with status colors
+- ⏱️ **Request Throttling** — Built-in cooldown to prevent rate limits
+
+### Previous Versions
+<details>
+<summary>v1.1.x Features</summary>
+
 - 🧠 **ThinkingBox** — See AI reasoning process in collapsible box
 - 🔑 **GitHub Token** — Handle rate limits with personal access token
 - 🎨 **Glass UI** — Modern glassmorphism design throughout
 - ⚠️ **Error Handling** — Clear error messages with retry options
 
+</details>
+
 ---
 
 ## 🔒 Privacy Policy
@@ -114,6 +129,7 @@ Your privacy matters. CodeMind:
 - ✅ Never sends data to external servers (except AI providers you choose)
 - ✅ Uses HTTPS for all API communications
 - ✅ Allows you to clear all data anytime
+- ✅ No GitHub token required for public repositories
 
 Read the full [Privacy Policy](PRIVACY.md).
 
@@ -137,11 +153,23 @@ npm run dev
 npm run build
 ```
 
+### 📁 Project Structure
+```
+src/
+├── background/          # Service worker & API calls
+│   ├── api/             # AI provider implementations
+│   └── services/        # Analysis, cache, strategies
+├── content/             # UI components & hooks
+│   ├── components/      # React components
+│   └── utils/           # DOM scrapers, parsers
+├── shared/              # Types & constants
+└── popup/               # Extension popup
+```
+
 ---
 
 ### 🔧 Manual Installation
 
-
 **Step 1: Build the extension**
 ```bash
 npm run build
@@ -164,11 +192,9 @@ npm run build
 **Step 3: Configure**
 
 1. Click the CodeMind extension icon in your toolbar
-2. Add your AI API key (Gemini, OpenRouter, Claude, or HuggingFace)
+2. Add your AI API key (Gemini, OpenAI, OpenRouter, Claude, or HuggingFace)
 3. Navigate to any GitHub repo and start analyzing!
 
-</details>
-
 ---
 
 ## 🤝 Contributing
diff --git a/package.json b/package.json
index ebe3f6c..af8108d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codemind",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "AI-Powered Repository Analyzer for GitHub",
   "type": "module",
   "scripts": {
diff --git a/public/manifest.json b/public/manifest.json
index 336f62a..5889bfe 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "CodeMind - AI Repository Analyzer",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "Understand any GitHub repository in seconds with AI-powered analysis.",
     "icons": {
         "16": "icons/icon16.png",
@@ -20,6 +20,7 @@
         "https://generativelanguage.googleapis.com/*",
         "https://router.huggingface.co/*",
         "https://openrouter.ai/*",
+        "https://api.openai.com/*",
         "https://raw.githubusercontent.com/*"
     ],
     "background": {
diff --git a/src/background/api/ai-provider.ts b/src/background/api/ai-provider.ts
index 2f6380a..4476c5e 100644
--- a/src/background/api/ai-provider.ts
+++ b/src/background/api/ai-provider.ts
@@ -45,6 +45,8 @@ export interface ChatContext {
     repoData: RepositoryData;
     analysis: Analysis;
     history: Array<{ role: 'user' | 'assistant'; content: string }>;
+    conversationMemory?: import('@shared/types').ConversationMemory;
+    optimizedPrompt?: string;
 }
 
 /**
@@ -311,7 +313,7 @@ ${releases[0].assets.length > 0 ? releases[0].assets.map(a => `- **${a.name}** (
  * Build a chat prompt for follow-up questions
  */
 export function buildChatPrompt(question: string, context: ChatContext): string {
-    const { repoData, analysis, history } = context;
+    const { repoData, analysis, history, conversationMemory, optimizedPrompt } = context;
 
     // Build conversation history
     const historyText = history
@@ -319,16 +321,22 @@ export function buildChatPrompt(question: string, context: ChatContext): string
         .map(msg => `**${msg.role === 'user' ? 'User' : 'CodeMind'}:** ${msg.content}`)
         .join('\n\n');
 
-    // Include key files in context for better answers
+    // Build memory context from previous conversations
+    const memoryContext = conversationMemory && conversationMemory.facts.length > 0
+        ? `\n\n## Previous Conversation Context\n${conversationMemory.facts.slice(-5).map(f => `- ${f.fact}`).join('\n')}`
+        : '';
+
+    // Use CACHED files (not trying to fetch missing ones) - show with ✅
     const keyFilesContext = repoData.keyFiles.length > 0
-        ? `\n\nKey files available for reference:\n${repoData.keyFiles.map(f => `- ${f.path}`).join('\n')}`
+        ? `\n\n## Files Analyzed in Repository\n${repoData.keyFiles.map(f => `✅ ${f.path}`).join('\n')}`
         : '';
 
     return `You are CodeMind, an AI assistant helping users understand the GitHub repository "${repoData.metadata.fullName}".
 
-## Repository Summary
-${analysis.content.slice(0, 5000)}
+## Repository Analysis Summary
+${analysis.content.slice(0, 3000)}
 ${keyFilesContext}
+${memoryContext}
 
 ${history.length > 0 ? `## Previous Conversation\n${historyText}\n` : ''}
 
@@ -336,13 +344,12 @@ ${history.length > 0 ? `## Previous Conversation\n${historyText}\n` : ''}
 **User asks:** "${question}"
 
 ## Instructions
-1. Answer based on the repository data and your previous analysis
-2. Be specific and reference actual files/features when relevant
-3. If you need to show code or commands, use proper markdown code blocks
-4. If you're not sure about something, say so clearly
-5. Keep your response focused and helpful
-6. For technical questions, provide accurate details
-7. For beginner questions, explain concepts simply
+1. Answer based on the analyzed files and previous analysis
+2. Reference ONLY the files listed above (marked with ✅)
+3. Use conversation memory to provide continuity
+4. Be specific and accurate
+5. If a file wasn't analyzed, say so clearly - don't make assumptions
+6. Keep responses focused and helpful
 
 Provide your response:`;
 }
diff --git a/src/background/api/github.ts b/src/background/api/github.ts
index 6120fb0..e5f5886 100644
--- a/src/background/api/github.ts
+++ b/src/background/api/github.ts
@@ -4,7 +4,8 @@ import {
     RepositoryData,
     RepositoryStructure,
     ReleaseInfo,
-    KeyFile
+    KeyFile,
+    FileTreeItem
 } from '@shared/types';
 import { API_ENDPOINTS } from '@shared/constants';
 
@@ -83,17 +84,35 @@ export class GitHubClient {
 
     /**
      * Fetch complete repository data for analysis
+     * Uses scraped metadata from DOM when available (no API calls!)
      */
     async fetchRepositoryData(info: RepositoryInfo): Promise<RepositoryData> {
-        const [metadata, readme, structure, releases] = await Promise.all([
-            this.fetchMetadata(info.owner, info.repo),
-            this.fetchReadme(info.owner, info.repo),
-            this.fetchStructure(info.owner, info.repo, info.branch),
-            this.fetchReleases(info.owner, info.repo),
-        ]);
+        // Use scraped metadata if available (from DOM, no API needed!)
+        // Otherwise fall back to API call (will be rate limited)
+        let metadata: RepositoryMetadata;
+
+        if (info.scrapedMetadata) {
+            console.log('[GitHubClient] Using scraped metadata (no API call)');
+            metadata = this.convertScrapedToMetadata(info, info.scrapedMetadata);
+        } else {
+            console.log('[GitHubClient] Falling back to API for metadata');
+            metadata = await this.fetchMetadata(info.owner, info.repo);
+        }
+
+        // Fetch README using raw URL (not rate limited)
+        const readme = await this.fetchReadme(info.owner, info.repo, info.branch);
+
+        // Discover files by attempting to fetch known key files (no tree API needed!)
+        const keyFiles = await this.discoverKeyFiles(info.owner, info.repo, info.branch);
 
-        // Fetch key files based on what exists in the structure
-        const keyFiles = await this.fetchKeyFiles(info.owner, info.repo, info.branch, structure);
+        // Build a structure from discovered files
+        const structure: RepositoryStructure = {
+            tree: keyFiles.map(f => ({ path: f.path, type: 'blob' as const })),
+            truncated: false,
+        };
+
+        // Skip releases API call to avoid rate limits
+        const releases: ReleaseInfo[] = [];
 
         return {
             info,
@@ -105,6 +124,126 @@ export class GitHubClient {
         };
     }
 
+    /**
+     * Convert scraped metadata to full RepositoryMetadata format
+     */
+    private convertScrapedToMetadata(info: RepositoryInfo, scraped: NonNullable<RepositoryInfo['scrapedMetadata']>): RepositoryMetadata {
+        return {
+            name: info.repo,
+            fullName: `${info.owner}/${info.repo}`,
+            description: scraped.description,
+            stars: scraped.stars,
+            forks: scraped.forks,
+            watchers: scraped.watchers,
+            language: scraped.language,
+            topics: scraped.topics,
+            license: scraped.license,
+            createdAt: '', // Not available from DOM
+            updatedAt: '', // Not available from DOM
+            pushedAt: '', // Not available from DOM
+            defaultBranch: info.branch,
+            isArchived: scraped.isArchived,
+            isFork: scraped.isFork,
+        };
+    }
+
+    /**
+     * Discover key files by attempting to fetch them directly (no tree API needed!)
+     * Uses raw.githubusercontent.com which is NOT rate limited
+     */
+    async discoverKeyFiles(owner: string, repo: string, branch: string): Promise<KeyFile[]> {
+        const keyFiles: KeyFile[] = [];
+
+        // Fetch files in parallel batches, sorted by priority
+        const sortedFiles = [...KEY_FILES_CONFIG].sort((a, b) => a.priority - b.priority);
+
+        // Batch fetch to speed up discovery
+        const batchSize = 5;
+        for (let i = 0; i < sortedFiles.length && keyFiles.length < 10; i += batchSize) {
+            const batch = sortedFiles.slice(i, i + batchSize);
+
+            const results = await Promise.all(
+                batch.map(async (fileConfig) => {
+                    try {
+                        const content = await this.fetchFileContent(owner, repo, branch, fileConfig.path);
+                        if (content) {
+                            // Limit content size to avoid token limits
+                            const truncatedContent = content.length > 3000
+                                ? content.slice(0, 3000) + '\n... [truncated]'
+                                : content;
+
+                            return {
+                                path: fileConfig.path,
+                                content: truncatedContent,
+                                type: fileConfig.type,
+                            } as KeyFile;
+                        }
+                    } catch {
+                        // File doesn't exist, skip
+                    }
+                    return null;
+                })
+            );
+
+            // Add successfully fetched files
+            for (const result of results) {
+                if (result && keyFiles.length < 10) {
+                    keyFiles.push(result);
+                }
+            }
+        }
+
+        console.log(`[GitHubClient] Discovered ${keyFiles.length} key files`);
+        return keyFiles;
+    }
+
+    /**
+     * Fetch complete file tree using GitHub API
+     * Works WITHOUT authentication for public repos (60/hour limit)
+     * With token: 5000/hour limit
+     */
+    async fetchFullTree(owner: string, repo: string, branch: string): Promise<FileTreeItem[]> {
+        try {
+            const url = `${this.baseUrl}/repos/${owner}/${repo}/git/trees/${branch}?recursive=1`;
+
+            console.log('[GitHubClient] Fetching full tree from API');
+            const response = await fetch(url, {
+                headers: this.getHeaders()
+            });
+
+            if (!response.ok) {
+                if (response.status === 404) {
+                    console.warn('[GitHubClient] Repository or branch not found');
+                } else if (response.status === 403) {
+                    console.warn('[GitHubClient] Rate limit hit or access denied');
+                }
+                return [];
+            }
+
+            const data = await response.json();
+
+            // Filter to only files (blob type), exclude directories
+            const files = (data.tree || [])
+                .filter((item: any) => item.type === 'blob')
+                .map((item: any) => ({
+                    path: item.path,
+                    type: 'blob' as const,
+                    size: item.size || 0,
+                }));
+
+            console.log(`[GitHubClient] Fetched ${files.length} files from tree API`);
+
+            if (data.truncated) {
+                console.warn('[GitHubClient] Tree was truncated (>100k files). Some files may be missing.');
+            }
+
+            return files;
+        } catch (error) {
+            console.error('[GitHubClient] Error fetching full tree:', error);
+            return [];
+        }
+    }
+
     /**
      * Fetch repository metadata
      */
diff --git a/src/background/api/provider-factory.ts b/src/background/api/provider-factory.ts
index 0a0e420..9a233b7 100644
--- a/src/background/api/provider-factory.ts
+++ b/src/background/api/provider-factory.ts
@@ -4,6 +4,7 @@ import { ClaudeProvider } from './providers/claude';
 import { GeminiProvider } from './providers/gemini';
 import { HuggingFaceProvider } from './providers/huggingface';
 import { OpenRouterProvider } from './providers/openrouter';
+import { OpenAIProvider } from './providers/openai';
 
 /**
  * Factory for creating AI provider instances
@@ -44,6 +45,14 @@ export function createProvider(settings: ExtensionSettings): AIProvider {
             return new OpenRouterProvider(config.apiKey, config.model);
         }
 
+        case AIProviderEnum.OPENAI: {
+            const config = providers[AIProviderEnum.OPENAI];
+            if (!config.apiKey) {
+                throw new Error('OpenAI API key not configured. Please add your API key in the extension settings.');
+            }
+            return new OpenAIProvider(config.apiKey, config.model);
+        }
+
         default:
             throw new Error(`Unknown AI provider: ${selectedProvider}`);
     }
@@ -62,6 +71,8 @@ export function getProviderDisplayName(provider: AIProviderEnum): string {
             return 'HuggingFace';
         case AIProviderEnum.OPENROUTER:
             return 'OpenRouter';
+        case AIProviderEnum.OPENAI:
+            return 'OpenAI';
         default:
             return provider;
     }
@@ -80,7 +91,10 @@ export function getProviderSetupUrl(provider: AIProviderEnum): string {
             return 'https://huggingface.co/settings/tokens';
         case AIProviderEnum.OPENROUTER:
             return 'https://openrouter.ai/settings/keys';
+        case AIProviderEnum.OPENAI:
+            return 'https://platform.openai.com/api-keys';
         default:
             return '';
     }
 }
+
diff --git a/src/background/api/providers/openai.ts b/src/background/api/providers/openai.ts
new file mode 100644
index 0000000..ab3c21b
--- /dev/null
+++ b/src/background/api/providers/openai.ts
@@ -0,0 +1,235 @@
+import { RepositoryData, Analysis, AIProvider as AIProviderEnum } from '@shared/types';
+import { API_ENDPOINTS } from '@shared/constants';
+import { AIProvider, ChatContext, buildAnalysisPrompt, buildChatPrompt } from '../ai-provider';
+
+/**
+ * OpenAI AI Provider
+ * Uses the OpenAI Chat Completions API
+ */
+export class OpenAIProvider implements AIProvider {
+    readonly name = 'OpenAI';
+    private apiKey: string;
+    private model: string;
+
+    constructor(apiKey: string, model = 'gpt-4o-mini') {
+        this.apiKey = apiKey;
+        this.model = model;
+    }
+
+    async analyzeRepository(
+        repoData: RepositoryData,
+        onChunk: (chunk: string) => void
+    ): Promise<Analysis> {
+        const prompt = buildAnalysisPrompt(repoData);
+        let fullContent = '';
+
+        const url = `${API_ENDPOINTS.OPENAI_API}/chat/completions`;
+
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${this.apiKey}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                model: this.model,
+                messages: [
+                    {
+                        role: 'user',
+                        content: prompt,
+                    },
+                ],
+                max_tokens: 4096,
+                temperature: 0.7,
+                stream: true,
+            }),
+        });
+
+        if (!response.ok) {
+            const status = response.status;
+            const error = await response.json().catch(() => ({ error: { message: response.statusText } }));
+
+            if (status === 401 || status === 403) {
+                throw new Error('Invalid API key. Please check your OpenAI API key in the extension settings.');
+            }
+            if (status === 429) {
+                throw new Error('Rate limit exceeded. Please wait and try again, or check your OpenAI usage limits.');
+            }
+            if (status === 400) {
+                throw new Error(`Invalid request: ${error.error?.message || 'Please check your model name.'}`);
+            }
+
+            throw new Error(error.error?.message || `OpenAI API error: ${status}`);
+        }
+
+        // Handle SSE streaming
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+
+        if (!reader) {
+            throw new Error('No response body');
+        }
+
+        let buffer = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() || '';
+
+            for (const line of lines) {
+                if (line.startsWith('data:')) {
+                    const dataStr = line.slice(5).trim();
+                    if (dataStr === '[DONE]') continue;
+
+                    try {
+                        const data = JSON.parse(dataStr);
+                        const content = data.choices?.[0]?.delta?.content;
+                        if (content) {
+                            fullContent += content;
+                            onChunk(content);
+                        }
+                    } catch {
+                        // Skip invalid JSON
+                    }
+                }
+            }
+        }
+
+        return {
+            repoInfo: repoData.info,
+            content: fullContent,
+            sections: this.parseSections(fullContent),
+            generatedAt: new Date().toISOString(),
+            provider: AIProviderEnum.OPENAI,
+            fromCache: false,
+        };
+    }
+
+    async chat(
+        question: string,
+        context: ChatContext,
+        onChunk: (chunk: string) => void
+    ): Promise<string> {
+        const prompt = buildChatPrompt(question, context);
+        let fullContent = '';
+
+        const url = `${API_ENDPOINTS.OPENAI_API}/chat/completions`;
+
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${this.apiKey}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                model: this.model,
+                messages: [
+                    {
+                        role: 'user',
+                        content: prompt,
+                    },
+                ],
+                max_tokens: 2048,
+                temperature: 0.7,
+                stream: true,
+            }),
+        });
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ error: response.statusText }));
+            throw new Error(error.error?.message || `OpenAI API error: ${response.status}`);
+        }
+
+        // Handle SSE streaming
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+
+        if (!reader) {
+            throw new Error('No response body');
+        }
+
+        let buffer = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop() || '';
+
+            for (const line of lines) {
+                if (line.startsWith('data:')) {
+                    const dataStr = line.slice(5).trim();
+                    if (dataStr === '[DONE]') continue;
+
+                    try {
+                        const data = JSON.parse(dataStr);
+                        const content = data.choices?.[0]?.delta?.content;
+                        if (content) {
+                            fullContent += content;
+                            onChunk(content);
+                        }
+                    } catch {
+                        // Skip invalid JSON
+                    }
+                }
+            }
+        }
+
+        return fullContent;
+    }
+
+    async testConnection(): Promise<boolean> {
+        try {
+            const url = `${API_ENDPOINTS.OPENAI_API}/chat/completions`;
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${this.apiKey}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    model: this.model,
+                    messages: [{ role: 'user', content: 'Hi' }],
+                    max_tokens: 10,
+                }),
+            });
+            return response.ok;
+        } catch {
+            return false;
+        }
+    }
+
+    private parseSections(content: string): Analysis['sections'] {
+        return {
+            summary: this.extractSection(content, '## 📊 Quick Summary'),
+            whatItDoes: this.extractSection(content, '## 🎯 What It Does'),
+            whoItsFor: this.extractSection(content, '## 👥 Who It\'s For'),
+            keyFeatures: this.extractListItems(content, '## ✨ Key Features'),
+            techStack: [],
+            gettingStarted: this.extractSection(content, '## 🚀 Getting Started'),
+            downloadInfo: content.includes('## 📥') ? { hasReleases: true } : undefined,
+        };
+    }
+
+    private extractSection(content: string, header: string): string {
+        const index = content.indexOf(header);
+        if (index === -1) return '';
+        const start = index + header.length;
+        const nextSection = content.indexOf('## ', start);
+        return content.slice(start, nextSection === -1 ? undefined : nextSection).trim();
+    }
+
+    private extractListItems(content: string, header: string): string[] {
+        const section = this.extractSection(content, header);
+        return section
+            .split('\n')
+            .filter(line => line.trim().startsWith('-') || line.trim().startsWith('*'))
+            .map(line => line.replace(/^[-*]\s*/, '').trim());
+    }
+}
diff --git a/src/background/index.ts b/src/background/index.ts
index 1c8cb40..47a9986 100644
--- a/src/background/index.ts
+++ b/src/background/index.ts
@@ -76,6 +76,29 @@ chrome.runtime.onMessage.addListener((
             });
             return true; // Async response
 
+        case 'GET_CACHED_REPOS':
+            cacheManager.getCachedRepos().then(repos => {
+                sendResponse({ repos });
+            });
+            return true; // Async response
+
+        case 'DELETE_REPO_CACHE':
+            if (message.data) {
+                const { fullName, branch } = message.data as { fullName: string; branch: string };
+                if (fullName && branch) {
+                    cacheManager.deleteRepo(fullName, branch).then(() => {
+                        sendResponse({ success: true });
+                    }).catch(error => {
+                        sendResponse({ error: error.message });
+                    });
+                } else {
+                    sendResponse({ error: 'Missing fullName or branch' });
+                }
+            } else {
+                sendResponse({ error: 'No data provided' });
+            }
+            return true; // Async response
+
         case 'CHECK_CACHE':
             if (message.data) {
                 const { owner, repo, branch } = message.data as { owner: string; repo: string; branch: string };
diff --git a/src/background/services/analysis.ts b/src/background/services/analysis.ts
index c34631d..3b9429b 100644
--- a/src/background/services/analysis.ts
+++ b/src/background/services/analysis.ts
@@ -1,8 +1,10 @@
-import { RepositoryInfo, Analysis, ChatMessage } from '@shared/types';
+import { RepositoryInfo, Analysis, ChatMessage, ConversationMemory } from '@shared/types';
 import { githubClient } from '../api/github';
 import { createProvider } from '../api/provider-factory';
 import { cacheManager } from './cache';
 import { settingsManager } from './settings';
+import { strategyFactory } from './strategies/factory';
+import { promptOptimizer } from './strategies/prompt-optimizer';
 
 /**
  * Analysis orchestration service
@@ -10,7 +12,7 @@ import { settingsManager } from './settings';
  */
 export class AnalysisService {
     /**
-     * Analyze a repository
+     * Analyze a repository using strategy pattern
      */
     async analyzeRepository(
         repoInfo: RepositoryInfo,
@@ -26,7 +28,6 @@ export class AnalysisService {
         }
 
         // Force refresh settings to ensure we have the latest token
-        // This fixes the race condition when user just saved a new GitHub token
         const settings = await settingsManager.forceRefresh();
 
         // Set GitHub token if available
@@ -36,26 +37,57 @@ export class AnalysisService {
             githubClient.setToken(settings.github.token);
         }
 
-        // Create AI provider
-        const provider = createProvider(settings);
+        // Create analysis strategy
+        const strategy = strategyFactory.create(settings.analysis.strategyConfig);
+        console.log('[AnalysisService] Using strategy:', strategy.name);
+
+        // Execute strategy to get repository data
+        const strategyResult = await strategy.execute(repoInfo, settings.analysis.strategyConfig);
 
-        // Fetch repository data from GitHub
-        console.log('[AnalysisService] Fetching repository data...');
-        const repoData = await githubClient.fetchRepositoryData(repoInfo);
+        // Build repository data object (for metadata)
+        const metadata = repoInfo.scrapedMetadata
+            ? githubClient['convertScrapedToMetadata'](repoInfo, repoInfo.scrapedMetadata)
+            : await githubClient.fetchMetadata(owner, repo);
 
-        // Run AI analysis
+        const readme = await githubClient.fetchReadme(owner, repo, branch);
+
+        const repoData = {
+            info: repoInfo,
+            metadata,
+            readme,
+            structure: strategyResult.structure,
+            releases: [], // Skip releases to avoid rate limits
+            keyFiles: strategyResult.files,
+        };
+
+        // Build optimized prompt
+        const optimizedPrompt = promptOptimizer.buildPrompt(repoData, strategyResult);
+
+        // Create AI provider and run analysis
+        const provider = createProvider(settings);
         console.log('[AnalysisService] Running AI analysis with', provider.name);
-        const analysis = await provider.analyzeRepository(repoData, onChunk);
 
-        // Cache the result
-        const cacheDuration = settings.analysis.cacheDuration;
-        await cacheManager.set(owner, repo, branch, analysis, cacheDuration);
+        const analysis = await provider.analyzeRepository(
+            { ...repoData, readme: optimizedPrompt },  // Replace README with optimized prompt
+            onChunk
+        );
+
+        // Store enhanced data in cache for chat
+        const enhancedAnalysis: Analysis = {
+            ...analysis,
+            strategyResult,
+            metadata,
+            optimizedPrompt,
+        };
+
+        // Cache the result with enhanced data
+        await cacheManager.set(owner, repo, branch, enhancedAnalysis, settings.analysis.cacheDuration);
 
-        return analysis;
+        return enhancedAnalysis;
     }
 
     /**
-     * Handle a chat message
+     * Handle a chat message using cached analysis data
      */
     async handleChatMessage(
         repoInfo: RepositoryInfo,
@@ -63,33 +95,63 @@ export class AnalysisService {
         history: ChatMessage[],
         onChunk: (chunk: string) => void
     ): Promise<ChatMessage> {
-        // Get settings
         const settings = await settingsManager.get();
-
-        // Create AI provider
         const provider = createProvider(settings);
 
         // Get cached analysis (should exist if chat is available)
-        const analysis = await cacheManager.get(repoInfo.owner, repoInfo.repo, repoInfo.branch);
-        if (!analysis) {
+        const cached = await cacheManager.get(repoInfo.owner, repoInfo.repo, repoInfo.branch);
+        if (!cached) {
             throw new Error('No analysis found. Please analyze the repository first.');
         }
 
-        // Fetch repo data for context
-        const repoData = await githubClient.fetchRepositoryData(repoInfo);
+        // Build context from CACHED data (not re-fetching files!)
+        const repoData = {
+            info: repoInfo,
+            metadata: cached.metadata || await githubClient.fetchMetadata(repoInfo.owner, repoInfo.repo),
+            readme: '',
+            structure: cached.strategyResult?.structure || { tree: [], truncated: false },
+            releases: [],
+            keyFiles: cached.strategyResult?.files || [],
+        };
+
+        // Initialize conversation memory if not exists
+        const conversationMemory: ConversationMemory = {
+            sessionId: Date.now().toString(),
+            facts: [],
+            topics: [],
+            questionsAsked: [],
+            lastUpdated: Date.now(),
+        };
 
-        // Build context
         const context = {
             repoData,
-            analysis,
+            analysis: cached,
             history: history.map(m => ({ role: m.role, content: m.content })),
+            conversationMemory,
+            optimizedPrompt: cached.optimizedPrompt,
         };
 
         // Get chat response
         console.log('[AnalysisService] Sending chat message to', provider.name);
         const response = await provider.chat(question, context, onChunk);
 
-        // Return as ChatMessage
+        // Extract simple facts from conversation
+        const newFacts = this.extractFacts(question, response);
+        const topics = this.extractTopics(question);
+
+        // Update conversation memory
+        await cacheManager.updateConversationMemory(
+            repoInfo.owner,
+            repoInfo.repo,
+            repoInfo.branch,
+            {
+                ...conversationMemory,
+                facts: newFacts,
+                questionsAsked: [...conversationMemory.questionsAsked, question],
+                topics,
+            }
+        );
+
         return {
             id: Date.now().toString(),
             role: 'assistant',
@@ -97,6 +159,40 @@ export class AnalysisService {
             timestamp: Date.now(),
         };
     }
+
+    /**
+     * Extract facts from conversation
+     */
+    private extractFacts(question: string, response: string): Array<{ fact: string; confidence: number; addedAt: number }> {
+        const facts: Array<{ fact: string; confidence: number; addedAt: number }> = [];
+
+        // Simple fact extraction - just store the Q&A
+        if (response.length > 0) {
+            facts.push({
+                fact: `Q: ${question.slice(0, 100)} | A: ${response.slice(0, 200)}`,
+                confidence: 0.8,
+                addedAt: Date.now(),
+            });
+        }
+
+        return facts;
+    }
+
+    /**
+     * Extract topics from question
+     */
+    private extractTopics(question: string): string[] {
+        const topics: string[] = [];
+        const keywords = ['install', 'setup', 'deploy', 'test', 'build', 'run', 'config', 'api', 'database', 'how'];
+
+        keywords.forEach(keyword => {
+            if (question.toLowerCase().includes(keyword)) {
+                topics.push(keyword);
+            }
+        });
+
+        return topics;
+    }
 }
 
 // Singleton instance
diff --git a/src/background/services/cache.ts b/src/background/services/cache.ts
index 14b49be..bf855de 100644
--- a/src/background/services/cache.ts
+++ b/src/background/services/cache.ts
@@ -72,7 +72,7 @@ export class CacheManager {
     }
 
     /**
-     * Store analysis in cache
+     * Store analysis in cache with enhanced data for chat
      */
     async set(
         owner: string,
@@ -102,6 +102,42 @@ export class CacheManager {
         }
     }
 
+    /**
+     * Update conversation memory in cache
+     */
+    async updateConversationMemory(
+        owner: string,
+        repo: string,
+        branch: string,
+        memoryUpdate: Partial<import('@shared/types').ConversationMemory>
+    ): Promise<void> {
+        const cached = await this.get(owner, repo, branch);
+        if (!cached) return;
+
+        // Initialize conversation memory if it doesn't exist
+        if (!cached.strategyResult) {
+            console.warn('[CacheManager] Cannot update memory: no strategyResult in cache');
+            return;
+        }
+
+        const key = this.buildKey(owner, repo, branch);
+        const storageKey = `${STORAGE_KEYS.CACHE_PREFIX}${key}`;
+        const result = await chrome.storage.local.get(storageKey);
+        const entry = result[storageKey] as CacheEntry<Analysis>;
+
+        if (entry) {
+            // Update the analysis data with new memory
+            entry.data = {
+                ...entry.data,
+                conversationMemory: memoryUpdate as any,
+            };
+
+            // Update both memory and storage
+            this.memoryCache.set(key, entry);
+            await chrome.storage.local.set({ [storageKey]: entry });
+        }
+    }
+
     /**
      * Delete cached analysis
      */
@@ -153,6 +189,54 @@ export class CacheManager {
         }
     }
 
+    /**
+     * Get list of all cached repositories
+     */
+    async getCachedRepos(): Promise<Array<{ fullName: string; branch: string; expiresAt: number; sizeBytes: number }>> {
+        try {
+            const allItems = await chrome.storage.local.get(null);
+            const repos: Array<{ fullName: string; branch: string; expiresAt: number; sizeBytes: number }> = [];
+
+            for (const [key, entry] of Object.entries(allItems)) {
+                if (key.startsWith(STORAGE_KEYS.CACHE_PREFIX)) {
+                    const keyPart = key.replace(STORAGE_KEYS.CACHE_PREFIX, '');
+                    const colonIndex = keyPart.lastIndexOf(':');
+                    if (colonIndex > 0) {
+                        const fullName = keyPart.substring(0, colonIndex);
+                        const branch = keyPart.substring(colonIndex + 1);
+                        const cacheEntry = entry as CacheEntry<Analysis>;
+                        repos.push({
+                            fullName,
+                            branch,
+                            expiresAt: cacheEntry.expiresAt,
+                            sizeBytes: JSON.stringify(entry).length,
+                        });
+                    }
+                }
+            }
+
+            return repos;
+        } catch (error) {
+            console.error('[CacheManager] Error getting cached repos:', error);
+            return [];
+        }
+    }
+
+    /**
+     * Delete cache for a specific repository (by fullName which includes branch)
+     */
+    async deleteRepo(fullName: string, branch: string): Promise<void> {
+        const key = `${fullName}:${branch}`;
+        this.memoryCache.delete(key);
+
+        try {
+            const storageKey = `${STORAGE_KEYS.CACHE_PREFIX}${key}`;
+            await chrome.storage.local.remove(storageKey);
+        } catch (error) {
+            console.error('[CacheManager] Error deleting repo cache:', error);
+        }
+    }
+
     private buildKey(owner: string, repo: string, branch: string): string {
         return `${owner}/${repo}:${branch}`;
     }
diff --git a/src/background/services/strategies/client-strategy.ts b/src/background/services/strategies/client-strategy.ts
new file mode 100644
index 0000000..814b84b
--- /dev/null
+++ b/src/background/services/strategies/client-strategy.ts
@@ -0,0 +1,200 @@
+import { RepositoryInfo, StrategyResult, AnalysisStrategyConfig, KeyFile } from '@shared/types';
+import { AnalysisStrategy, TreeFetchResult } from './types';
+import { githubClient } from '../../api/github';
+import { prioritizeFiles } from './file-prioritizer';
+
+/**
+ * Client-side analysis strategy
+ * Uses DOM scraping + GitHub API + raw.githubusercontent.com
+ */
+export class ClientSideStrategy implements AnalysisStrategy {
+    readonly name = 'ClientSideStrategy';
+
+    async canHandle(info: RepositoryInfo): Promise<boolean> {
+        // Client strategy can always handle any public repo
+        return true;
+    }
+
+    async execute(
+        info: RepositoryInfo,
+        config: AnalysisStrategyConfig
+    ): Promise<StrategyResult> {
+        console.log(`[${this.name}] Starting analysis for ${info.owner}/${info.repo}`);
+
+        // Step 1: Get file tree
+        const treeResult = await this.fetchFileTree(info);
+
+        // Step 2: Prioritize files
+        const scoredFiles = prioritizeFiles(treeResult.files, config);
+
+        // Step 3: Select files within budget
+        const selectedFiles = this.selectFilesWithinBudget(
+            scoredFiles,
+            config.tokenBudget,
+            config.maxFiles
+        );
+
+        // Step 4: Fetch file contents
+        const keyFiles = await this.fetchFileContents(
+            info.owner,
+            info.repo,
+            info.branch,
+            selectedFiles
+        );
+
+        // Step 5: Build structure
+        const structure = {
+            tree: treeResult.files.map(f => ({
+                path: f.path,
+                type: f.type === 'file' ? 'blob' as const : 'tree' as const,
+                size: f.size,
+            })),
+            truncated: treeResult.truncated,
+        };
+
+        // Step 6: Estimate tokens
+        const tokenEstimate = this.estimateTokens(keyFiles, structure);
+
+        return {
+            files: keyFiles,
+            structure,
+            tokenEstimate,
+            coverage: this.determineCoverage(selectedFiles.length, treeResult.files.length),
+            filesAnalyzed: keyFiles.length,
+            totalFiles: treeResult.files.length,
+        };
+    }
+
+    /**
+     * Fetch file tree using best available method
+     */
+    private async fetchFileTree(info: RepositoryInfo): Promise<TreeFetchResult> {
+        // Try GitHub API first (works without auth for public repos!)
+        try {
+            const apiFiles = await githubClient.fetchFullTree(
+                info.owner,
+                info.repo,
+                info.branch
+            );
+
+            if (apiFiles && apiFiles.length > 0) {
+                return {
+                    files: apiFiles.map(f => ({
+                        path: f.path,
+                        type: f.type === 'blob' ? 'file' as const : 'directory' as const,
+                        size: f.size,
+                    })),
+                    source: 'api',
+                    truncated: false,
+                };
+            }
+        } catch (error) {
+            console.warn(`[${this.name}] GitHub API failed, falling back to discovery:`, error);
+        }
+
+        // Fallback: Use existing discovery method
+        const discoveredFiles = await githubClient.discoverKeyFiles(info.owner, info.repo, info.branch);
+        return {
+            files: discoveredFiles.map(f => ({
+                path: f.path,
+                type: 'file' as const,
+                size: f.content.length,
+            })),
+            source: 'mixed',
+            truncated: true,
+        };
+    }
+
+    /**
+     * Select files within token budget
+     */
+    private selectFilesWithinBudget(
+        scoredFiles: Array<{ path: string; size: number; score: number; category: string }>,
+        tokenBudget: number,
+        maxFiles: number
+    ): Array<{ path: string; size: number; score: number; category: string }> {
+        const selected: typeof scoredFiles = [];
+        let estimatedTokens = 0;
+
+        for (const file of scoredFiles) {
+            if (selected.length >= maxFiles) break;
+
+            const fileTokens = Math.ceil(file.size / 4); // 4 chars per token estimate
+
+            if (estimatedTokens + fileTokens <= tokenBudget) {
+                selected.push(file);
+                estimatedTokens += fileTokens;
+            }
+        }
+
+        console.log(`[${this.name}] Selected ${selected.length} files (~${estimatedTokens} tokens)`);
+        return selected;
+    }
+
+    /**
+     * Fetch contents of selected files
+     */
+    private async fetchFileContents(
+        owner: string,
+        repo: string,
+        branch: string,
+        files: Array<{ path: string; category: string }>
+    ): Promise<KeyFile[]> {
+        const contents = await Promise.all(
+            files.map(async (file) => {
+                try {
+                    const content = await githubClient.fetchFileContent(owner, repo, branch, file.path);
+                    if (content) {
+                        return {
+                            path: file.path,
+                            content: this.truncateContent(content, 5000),
+                            type: file.category as KeyFile['type'],
+                        } as KeyFile;
+                    }
+                } catch (error) {
+                    console.warn(`[${this.name}] Failed to fetch ${file.path}:`, error);
+                }
+                return null;
+            })
+        );
+
+        return contents.filter((c): c is KeyFile => c !== null);
+    }
+
+    /**
+     * Truncate file content if too long
+     */
+    private truncateContent(content: string, maxLength: number): string {
+        if (content.length <= maxLength) return content;
+
+        const lines = content.split('\n');
+        const headLines = Math.floor(maxLength * 0.7 / (content.length / lines.length));
+        const tailLines = Math.floor(maxLength * 0.2 / (content.length / lines.length));
+
+        const head = lines.slice(0, headLines).join('\n');
+        const tail = lines.slice(-tailLines).join('\n');
+
+        return `${head}\n\n... [${lines.length - headLines - tailLines} lines truncated] ...\n\n${tail}`;
+    }
+
+    /**
+     * Estimate total tokens
+     */
+    private estimateTokens(files: KeyFile[], structure: any): number {
+        const contentTokens = files.reduce((sum, f) => sum + Math.ceil(f.content.length / 4), 0);
+        const structureTokens = 500;
+        const metadataTokens = 200;
+
+        return contentTokens + structureTokens + metadataTokens;
+    }
+
+    /**
+     * Determine coverage level
+     */
+    private determineCoverage(analyzed: number, total: number): 'full' | 'partial' | 'minimal' {
+        const ratio = analyzed / total;
+        if (ratio >= 0.8) return 'full';
+        if (ratio >= 0.4) return 'partial';
+        return 'minimal';
+    }
+}
diff --git a/src/background/services/strategies/factory.ts b/src/background/services/strategies/factory.ts
new file mode 100644
index 0000000..25a32ba
--- /dev/null
+++ b/src/background/services/strategies/factory.ts
@@ -0,0 +1,41 @@
+import { AnalysisStrategy } from './types';
+import { ClientSideStrategy } from './client-strategy';
+import { AnalysisStrategyType, AnalysisStrategyConfig } from '@shared/types';
+
+/**
+ * Factory for creating analysis strategy instances
+ * Extensible for future backend/hybrid strategies
+ */
+export class StrategyFactory {
+    /**
+     * Create strategy instance based on config
+     */
+    create(config: AnalysisStrategyConfig): AnalysisStrategy {
+        switch (config.type) {
+            case AnalysisStrategyType.CLIENT_SIDE:
+                return new ClientSideStrategy();
+
+            case AnalysisStrategyType.BACKEND:
+                throw new Error('Backend strategy not yet implemented. Use CLIENT_SIDE for now.');
+
+            case AnalysisStrategyType.HYBRID:
+                throw new Error('Hybrid strategy not yet implemented. Use CLIENT_SIDE for now.');
+
+            default:
+                console.warn(`Unknown strategy type: ${config.type}, falling back to CLIENT_SIDE`);
+                return new ClientSideStrategy();
+        }
+    }
+
+    /**
+     * Get recommended strategy for a repository
+     */
+    getRecommendedStrategy(repoInfo: { stars: number; fileCount?: number }): AnalysisStrategyType {
+        // For now, always recommend client-side
+        // Future: Could recommend backend for very large repos
+        return AnalysisStrategyType.CLIENT_SIDE;
+    }
+}
+
+// Singleton
+export const strategyFactory = new StrategyFactory();
diff --git a/src/background/services/strategies/file-prioritizer.ts b/src/background/services/strategies/file-prioritizer.ts
new file mode 100644
index 0000000..3cdaa9d
--- /dev/null
+++ b/src/background/services/strategies/file-prioritizer.ts
@@ -0,0 +1,148 @@
+import { PRIORITY_WEIGHTS } from '@shared/constants';
+
+interface FileItem {
+    path: string;
+    type: 'file' | 'directory';
+    size?: number;
+}
+
+interface ScoredFile {
+    path: string;
+    size: number;
+    score: number;
+    category: 'docs' | 'config' | 'source' | 'test' | 'other';
+}
+
+/**
+ * Priority rules for file selection
+ */
+const PRIORITY_RULES: Array<{
+    pattern: RegExp;
+    score: number;
+    category: ScoredFile['category'];
+}> = [
+        // Tier 1: Critical Documentation (100 points)
+        { pattern: /^readme\.md$/i, score: PRIORITY_WEIGHTS.README, category: 'docs' },
+
+        // Tier 1: Package/Project Files (100 points)
+        { pattern: /^package\.json$/, score: PRIORITY_WEIGHTS.PACKAGE_JSON, category: 'config' },
+        { pattern: /^cargo\.toml$/, score: PRIORITY_WEIGHTS.PACKAGE_JSON, category: 'config' },
+        { pattern: /^go\.mod$/, score: PRIORITY_WEIGHTS.PACKAGE_JSON, category: 'config' },
+        { pattern: /^pyproject\.toml$/, score: PRIORITY_WEIGHTS.PACKAGE_JSON, category: 'config' },
+        { pattern: /^composer\.json$/, score: PRIORITY_WEIGHTS.PACKAGE_JSON, category: 'config' },
+        { pattern: /^gemfile$/i, score: PRIORITY_WEIGHTS.PACKAGE_JSON, category: 'config' },
+
+        // Tier 2: Entry Points (90 points)
+        { pattern: /^src\/(index|main|app)\.(ts|tsx|js|jsx|py|rs)$/, score: PRIORITY_WEIGHTS.ENTRY_POINT, category: 'source' },
+        { pattern: /^(index|main|app)\.(ts|tsx|js|jsx|py|rs)$/, score: PRIORITY_WEIGHTS.ENTRY_POINT, category: 'source' },
+        { pattern: /^src\/lib\.(ts|rs)$/, score: PRIORITY_WEIGHTS.ENTRY_POINT, category: 'source' },
+        { pattern: /^lib\.rs$/, score: PRIORITY_WEIGHTS.ENTRY_POINT, category: 'source' },
+        { pattern: /^mod\.rs$/, score: PRIORITY_WEIGHTS.ENTRY_POINT, category: 'source' },
+
+        // Tier 3: Config Files (80 points)
+        { pattern: /\.(config|conf)\.(ts|js|json|yaml|yml|toml)$/, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^tsconfig\.json$/, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^vite\.config\.(ts|js)$/, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^webpack\.config\.(ts|js)$/, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^next\.config\.(ts|js)$/, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^dockerfile$/i, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^docker-compose\.ya?ml$/i, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+        { pattern: /^\.env\.example$/, score: PRIORITY_WEIGHTS.CONFIG, category: 'config' },
+
+        // Tier 4: Core Source Files (70 points)
+        { pattern: /^src\/.*\.(ts|tsx|js|jsx|py|rs|go)$/, score: PRIORITY_WEIGHTS.SOURCE, category: 'source' },
+        { pattern: /^lib\/.*\.(ts|tsx|js|jsx|py|rs|go)$/, score: PRIORITY_WEIGHTS.SOURCE, category: 'source' },
+        { pattern: /^app\/.*\.(ts|tsx|js|jsx|py)$/, score: PRIORITY_WEIGHTS.SOURCE, category: 'source' },
+
+        // Tier 5: API/Routes (65 points)
+        { pattern: /\/(api|routes|controllers|handlers)\/.*\.(ts|tsx|js|jsx|py)$/, score: PRIORITY_WEIGHTS.API_ROUTE, category: 'source' },
+
+        // Tier 6: Components/Views (60 points)
+        { pattern: /\/(components|views|pages|ui)\/.*\.(ts|tsx|js|jsx)$/, score: PRIORITY_WEIGHTS.COMPONENT, category: 'source' },
+
+        // Tier 7: Documentation (50 points)
+        { pattern: /^docs\/.*\.md$/, score: PRIORITY_WEIGHTS.DOCS, category: 'docs' },
+        { pattern: /^(contributing|changelog|api)\.md$/i, score: PRIORITY_WEIGHTS.DOCS, category: 'docs' },
+        { pattern: /^\.github\/.*\.md$/, score: PRIORITY_WEIGHTS.DOCS, category: 'docs' },
+
+        // Tier 8: Tests (20 points) - low priority
+        { pattern: /\.(test|spec)\.(ts|tsx|js|jsx|py)$/, score: PRIORITY_WEIGHTS.TEST, category: 'test' },
+        { pattern: /^tests?\//, score: PRIORITY_WEIGHTS.TEST, category: 'test' },
+        { pattern: /^__tests__\//, score: PRIORITY_WEIGHTS.TEST, category: 'test' },
+
+        // Default (10 points)
+        { pattern: /.*/, score: PRIORITY_WEIGHTS.OTHER, category: 'other' },
+    ];
+
+/**
+ * Files to ALWAYS exclude
+ */
+const EXCLUDE_PATTERNS = [
+    /node_modules\//,
+    /\.git\//,
+    /\.github\/workflows\//,
+    /dist\//,
+    /build\//,
+    /out\//,
+    /target\//,
+    /\.next\//,
+    /\.nuxt\//,
+    /\.cache\//,
+    /coverage\//,
+    /\.min\.(js|css)$/,
+    /\.map$/,
+    /-lock\.(json|yaml)$/,
+    /^package-lock\.json$/,
+    /^yarn\.lock$/,
+    /^pnpm-lock\.yaml$/,
+    /^bun\.lockb$/,
+    /^composer\.lock$/,
+    /^Cargo\.lock$/,
+    /^Gemfile\.lock$/,
+    /\.(png|jpg|jpeg|gif|ico|svg|webp|bmp|tiff)$/i,
+    /\.(woff|woff2|ttf|eot|otf)$/i,
+    /\.(mp3|mp4|webm|ogg|wav|flac)$/i,
+    /\.(zip|tar|gz|rar|7z)$/i,
+    /\.(pdf|doc|docx|xls|xlsx|ppt|pptx)$/i,
+    /\.exe$/i,
+    /\.dll$/i,
+];
+
+/**
+ * Prioritize and score files for analysis
+ */
+export function prioritizeFiles(
+    files: FileItem[],
+    config: { priorityThreshold: number }
+): ScoredFile[] {
+    // Filter out excluded files and directories
+    const filtered = files.filter(f => {
+        if (f.type === 'directory') return false;
+        return !EXCLUDE_PATTERNS.some(pattern => pattern.test(f.path));
+    });
+
+    // Score each file
+    const scored: ScoredFile[] = filtered.map(file => {
+        // Find matching rule (first match wins)
+        const rule = PRIORITY_RULES.find(r => r.pattern.test(file.path));
+
+        return {
+            path: file.path,
+            size: file.size || 2000, // Default size if unknown
+            score: rule?.score || PRIORITY_WEIGHTS.OTHER,
+            category: rule?.category || 'other',
+        };
+    });
+
+    // Filter by threshold and sort by score (highest first)
+    return scored
+        .filter(f => f.score >= config.priorityThreshold)
+        .sort((a, b) => {
+            // Sort by score first, then by category priority
+            if (b.score !== a.score) return b.score - a.score;
+
+            // If same score, prefer certain categories
+            const categoryOrder = ['docs', 'config', 'source', 'test', 'other'];
+            return categoryOrder.indexOf(a.category) - categoryOrder.indexOf(b.category);
+        });
+}
diff --git a/src/background/services/strategies/prompt-optimizer.ts b/src/background/services/strategies/prompt-optimizer.ts
new file mode 100644
index 0000000..1cb305a
--- /dev/null
+++ b/src/background/services/strategies/prompt-optimizer.ts
@@ -0,0 +1,231 @@
+import { RepositoryData, StrategyResult } from '@shared/types';
+import { TOKEN_ESTIMATION } from '@shared/constants';
+
+interface PromptBudget {
+    metadata: number;
+    structure: number;
+    readme: number;
+    keyFiles: number;
+    total: number;
+}
+
+/**
+ * Optimizes prompts for AI models by intelligently allocating token budget
+ */
+export class PromptOptimizer {
+    /**
+     * Build optimized prompt from strategy result
+     */
+    buildPrompt(repoData: RepositoryData, strategyResult: StrategyResult): string {
+        const budget = this.calculateBudget(strategyResult.tokenEstimate);
+
+        const sections: string[] = [
+            this.buildMetadataSection(repoData.metadata, budget.metadata),
+            this.buildStructureSection(strategyResult.structure, budget.structure),
+            this.buildReadmeSection(repoData.readme, budget.readme),
+            this.buildKeyFilesSection(strategyResult.files, budget.keyFiles),
+            this.buildCoverageSection(strategyResult),
+        ];
+
+        return sections.join('\n\n');
+    }
+
+    /**
+     * Calculate token budget allocation for each section
+     */
+    private calculateBudget(totalEstimate: number): PromptBudget {
+        return {
+            metadata: TOKEN_ESTIMATION.METADATA_TOKENS,
+            structure: TOKEN_ESTIMATION.STRUCTURE_TOKENS,
+            readme: Math.min(Math.floor(totalEstimate * 0.3), 6000),
+            keyFiles: Math.min(Math.floor(totalEstimate * 0.6), 15000),
+            total: totalEstimate,
+        };
+    }
+
+    /**
+     * Build repository metadata section
+     */
+    private buildMetadataSection(metadata: any, tokenBudget: number): string {
+        return `## 📁 REPOSITORY METADATA
+
+| Field | Value |
+|:------|:------|
+| **Repository** | ${metadata.fullName} |
+| **Description** | ${metadata.description || 'No description provided'} |
+| **Primary Language** | ${metadata.language || 'Not specified'} |
+| **Stars** | ⭐ ${metadata.stars.toLocaleString()} |
+| **Forks** | 🔀 ${metadata.forks.toLocaleString()} |
+| **License** | ${metadata.license || 'Not specified'} |
+| **Topics** | ${metadata.topics.length > 0 ? metadata.topics.join(', ') : 'None'} |
+| **Archived** | ${metadata.isArchived ? '⚠️ Yes' : '✅ No'} |
+| **Fork** | ${metadata.isFork ? 'Yes' : 'No'} |`;
+    }
+
+    /**
+     * Build file structure section
+     */
+    private buildStructureSection(structure: any, tokenBudget: number): string {
+        const grouped = this.groupFilesByDirectory(structure.tree);
+        const maxDirs = 15;
+        const maxFilesPerDir = 8;
+
+        let output = '## 📂 PROJECT STRUCTURE\n\n```\n';
+
+        let dirCount = 0;
+        for (const [dir, files] of grouped) {
+            if (dirCount >= maxDirs) {
+                output += `... +${grouped.size - maxDirs} more directories\n`;
+                break;
+            }
+
+            output += `📁 ${dir}/\n`;
+            files.slice(0, maxFilesPerDir).forEach(f => {
+                const fileName = f.split('/').pop();
+                output += `   └─ ${fileName}\n`;
+            });
+
+            if (files.length > maxFilesPerDir) {
+                output += `   ... +${files.length - maxFilesPerDir} more files\n`;
+            }
+
+            dirCount++;
+        }
+
+        output += '```';
+
+        if (structure.truncated) {
+            output += '\n\n> **Note:** Structure is truncated. Some files may not be shown.';
+        }
+
+        return output;
+    }
+
+    /**
+     * Build README section
+     */
+    private buildReadmeSection(readme: string | null, tokenBudget: number): string {
+        if (!readme) {
+            return '## 📖 README\n\n*No README found*';
+        }
+
+        const truncated = this.truncateToTokens(readme, tokenBudget);
+        const wasTruncated = truncated.length < readme.length;
+
+        let output = '## 📖 README\n\n';
+        output += truncated;
+
+        if (wasTruncated) {
+            output += '\n\n*... [README truncated for brevity]*';
+        }
+
+        return output;
+    }
+
+    /**
+     * Build key files section
+     */
+    private buildKeyFilesSection(files: any[], tokenBudget: number): string {
+        if (files.length === 0) {
+            return '## 📄 KEY FILES\n\n*No key files available*';
+        }
+
+        let output = '## 📄 KEY FILES\n\n';
+        let tokensUsed = 0;
+        const maxTokensPerFile = Math.floor(tokenBudget / files.length);
+
+        for (const file of files) {
+            if (tokensUsed >= tokenBudget) {
+                output += `\n*... ${files.length - files.indexOf(file)} more files not shown due to token limit*`;
+                break;
+            }
+
+            const icon = this.getFileIcon(file.type);
+            const content = this.truncateToTokens(file.content, maxTokensPerFile);
+
+            output += `### ${icon} ${file.path}\n\n`;
+            output += `\`\`\`${this.getFileLanguage(file.path)}\n${content}\n\`\`\`\n\n`;
+
+            tokensUsed += Math.ceil(content.length / TOKEN_ESTIMATION.CHARS_PER_TOKEN);
+        }
+
+        return output;
+    }
+
+    /**
+     * Build coverage info section
+     */
+    private buildCoverageSection(result: StrategyResult): string {
+        const percentage = Math.round((result.filesAnalyzed / result.totalFiles) * 100);
+        const coverageEmoji = result.coverage === 'full' ? '✅' : result.coverage === 'partial' ? '⚠️' : '❌';
+
+        return `## 📊 ANALYSIS COVERAGE
+
+${coverageEmoji} **Coverage:** ${result.coverage} (${percentage}% of repository)
+- **Files Analyzed:** ${result.filesAnalyzed} / ${result.totalFiles}
+- **Estimated Tokens:** ~${result.tokenEstimate.toLocaleString()}`;
+    }
+
+    /**
+     * Group files by top-level directory
+     */
+    private groupFilesByDirectory(tree: any[]): Map<string, string[]> {
+        const grouped = new Map<string, string[]>();
+
+        tree.forEach(item => {
+            const parts = item.path.split('/');
+            const topLevel = parts.length > 1 ? parts[0] : '(root)';
+
+            if (!grouped.has(topLevel)) {
+                grouped.set(topLevel, []);
+            }
+
+            grouped.get(topLevel)!.push(item.path);
+        });
+
+        return new Map([...grouped.entries()].sort((a, b) => b[1].length - a[1].length));
+    }
+
+    /**
+     * Truncate text to fit within token budget
+     */
+    private truncateToTokens(text: string, maxTokens: number): string {
+        const maxChars = maxTokens * TOKEN_ESTIMATION.CHARS_PER_TOKEN;
+
+        if (text.length <= maxChars) return text;
+
+        const truncated = text.substring(0, maxChars);
+        const lastNewline = truncated.lastIndexOf('\n');
+
+        if (lastNewline > maxChars * 0.8) {
+            return truncated.substring(0, lastNewline);
+        }
+
+        return truncated;
+    }
+
+    private getFileIcon(type: string): string {
+        const icons: Record<string, string> = {
+            docs: '📖',
+            config: '⚙️',
+            source: '📄',
+            test: '🧪',
+            other: '📋',
+        };
+        return icons[type] || '📋';
+    }
+
+    private getFileLanguage(path: string): string {
+        const ext = path.split('.').pop()?.toLowerCase();
+        const langMap: Record<string, string> = {
+            ts: 'typescript', tsx: 'typescript',
+            js: 'javascript', jsx: 'javascript',
+            py: 'python', rs: 'rust', go: 'go',
+            json: 'json', md: 'markdown',
+            yaml: 'yaml', yml: 'yaml',
+        };
+        return langMap[ext || ''] || '';
+    }
+}
+
+export const promptOptimizer = new PromptOptimizer();
diff --git a/src/background/services/strategies/types.ts b/src/background/services/strategies/types.ts
new file mode 100644
index 0000000..c2a6ed4
--- /dev/null
+++ b/src/background/services/strategies/types.ts
@@ -0,0 +1,52 @@
+import {
+    RepositoryInfo,
+    RepositoryData,
+    StrategyResult,
+    AnalysisStrategyConfig
+} from '@shared/types';
+
+/**
+ * Base interface for all analysis strategies
+ * Allows easy extension for backend/hybrid modes
+ */
+export interface AnalysisStrategy {
+    /**
+     * Strategy name for logging/debugging
+     */
+    readonly name: string;
+
+    /**
+     * Fetch and prepare repository data for analysis
+     */
+    execute(
+        info: RepositoryInfo,
+        config: AnalysisStrategyConfig
+    ): Promise<StrategyResult>;
+
+    /**
+     * Check if this strategy can handle the given repository
+     */
+    canHandle(info: RepositoryInfo): Promise<boolean>;
+}
+
+/**
+ * Options for file tree fetching
+ */
+export interface TreeFetchOptions {
+    useAPI: boolean;        // Use GitHub API or fallback to scraping
+    maxDepth?: number;      // Max directory depth to explore
+    timeout?: number;       // Timeout in ms
+}
+
+/**
+ * Result from file tree fetching
+ */
+export interface TreeFetchResult {
+    files: Array<{
+        path: string;
+        type: 'file' | 'directory';
+        size?: number;
+    }>;
+    source: 'api' | 'dom_scraping' | 'mixed';
+    truncated: boolean;
+}
diff --git a/src/content/components/AnalysisPanel.tsx b/src/content/components/AnalysisPanel.tsx
index af13147..61a17c3 100644
--- a/src/content/components/AnalysisPanel.tsx
+++ b/src/content/components/AnalysisPanel.tsx
@@ -71,7 +71,7 @@ const AnalysisPanel: React.FC = () => {
                     top: '12px',
                     right: '12px',
                     bottom: '12px',
-                    width: '500px',
+                    width: '550px',
                     backgroundColor: 'var(--glass-bg)',
                     backdropFilter: 'blur(40px) saturate(180%)',
                     WebkitBackdropFilter: 'blur(40px) saturate(180%)',
diff --git a/src/content/components/AnalyzeButton.tsx b/src/content/components/AnalyzeButton.tsx
index 8a31bc3..5dc5616 100644
--- a/src/content/components/AnalyzeButton.tsx
+++ b/src/content/components/AnalyzeButton.tsx
@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Brain, Loader2, CheckCircle } from 'lucide-react';
 import { useAnalysisStore } from '../hooks/useAnalysis';
 
 const AnalyzeButton: React.FC = () => {
     const { status, hasCachedAnalysis, showPanel, checkCache, repoInfo } = useAnalysisStore();
+    const [isHovered, setIsHovered] = useState(false);
 
     // Check cache when repo info changes
     useEffect(() => {
@@ -19,86 +20,94 @@ const AnalyzeButton: React.FC = () => {
         showPanel();
     };
 
-    const getButtonContent = () => {
+    // Get status-based colors
+    const getColors = () => {
         if (isLoading) {
-            return (
-                <>
-                    <Loader2 className="gai-spinner" size={16} />
-                    <span>Analyzing...</span>
-                </>
-            );
+            return {
+                bg: '#3b82f6', // Blue
+                hoverBg: '#2563eb',
+                shadow: 'rgba(59, 130, 246, 0.3)',
+            };
         }
-
         if (hasAnalysis) {
-            return (
-                <>
-                    <CheckCircle size={16} />
-                    <span>View Analysis</span>
-                </>
-            );
+            return {
+                bg: '#10b981', // Green
+                hoverBg: '#059669',
+                shadow: 'rgba(16, 185, 129, 0.3)',
+            };
         }
-
-        return (
-            <>
-                <Brain size={16} />
-                <span>CodeMind</span>
-            </>
-        );
+        return {
+            bg: '#8b5cf6', // Purple
+            hoverBg: '#7c3aed',
+            shadow: 'rgba(139, 92, 246, 0.3)',
+        };
     };
 
-    // Liquid Glass button styles
-    const getButtonStyles = (): React.CSSProperties => {
-        const baseStyles: React.CSSProperties = {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '7px',
-            height: '32px',
-            padding: '0 14px',
-            fontSize: '13px',
-            fontWeight: 500,
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
-            letterSpacing: '0.01em',
-            lineHeight: '1',
-            whiteSpace: 'nowrap',
-            cursor: 'pointer',
-            border: 'none',
-            borderRadius: '5px',
-            transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-            position: 'relative',
-            overflow: 'hidden',
-        };
+    const colors = getColors();
 
+    // Get button text based on state
+    const getButtonText = () => {
+        if (isLoading) return 'Analyzing...';
+        if (hasAnalysis) return 'View Analysis';
+        return 'CodeMind';
+    };
+
+    // Get icon based on state
+    const getIcon = () => {
         if (isLoading) {
-            return {
-                ...baseStyles,
-                background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%)',
-                backdropFilter: 'blur(12px)',
-                color: '#ffffff',
-                boxShadow: '0 2px 12px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)',
-                opacity: 0.85,
-                cursor: 'wait',
-            };
+            return <Loader2 className="gai-btn-icon-svg gai-spinner" size={18} />;
         }
-
         if (hasAnalysis) {
-            return {
-                ...baseStyles,
-                background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%)',
-                backdropFilter: 'blur(12px)',
-                color: '#ffffff',
-                boxShadow: '0 2px 12px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)',
-            };
+            return <CheckCircle className="gai-btn-icon-svg" size={18} />;
         }
+        return <Brain className="gai-btn-icon-svg" size={18} />;
+    };
 
-        // Default: Glass purple
-        return {
-            ...baseStyles,
-            background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(99, 102, 241, 0.9) 50%, rgba(59, 130, 246, 0.9) 100%)',
-            backdropFilter: 'blur(12px)',
-            color: '#ffffff',
-            boxShadow: '0 2px 12px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2)',
-        };
+    const buttonStyles: React.CSSProperties = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        height: '36px',
+        padding: '0',
+        paddingLeft: '9px',
+        paddingRight: isHovered ? '14px' : '9px',
+        fontSize: '13px',
+        fontWeight: 600,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+        letterSpacing: '0.01em',
+        lineHeight: '1',
+        whiteSpace: 'nowrap',
+        cursor: isLoading ? 'wait' : 'pointer',
+        border: 'none',
+        borderRadius: '8px',
+        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        position: 'relative',
+        overflow: 'hidden',
+        background: isHovered ? colors.hoverBg : colors.bg,
+        color: '#ffffff',
+        boxShadow: isHovered
+            ? `0 4px 12px ${colors.shadow}`
+            : `0 2px 8px ${colors.shadow}`,
+        transform: isHovered ? 'translateY(-1px)' : 'translateY(0)',
+    };
+
+    const iconContainerStyles: React.CSSProperties = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '18px',
+        height: '18px',
+        flexShrink: 0,
+    };
+
+    const textStyles: React.CSSProperties = {
+        display: 'inline-block',
+        overflow: 'hidden',
+        maxWidth: isHovered ? '100px' : '0px',
+        opacity: isHovered ? 1 : 0,
+        marginLeft: isHovered ? '8px' : '0px',
+        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        whiteSpace: 'nowrap',
     };
 
     return (
@@ -107,27 +116,16 @@ const AnalyzeButton: React.FC = () => {
             className="gai-analyze-btn"
             aria-label={hasAnalysis ? "View Analysis" : "Open CodeMind"}
             title={hasAnalysis ? "View cached analysis" : "Open CodeMind - AI Repository Analyzer"}
-            style={getButtonStyles()}
-            onMouseEnter={(e) => {
-                if (!isLoading) {
-                    e.currentTarget.style.transform = 'translateY(-1px) scale(1.02)';
-                    if (hasAnalysis) {
-                        e.currentTarget.style.boxShadow = '0 6px 20px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)';
-                    } else {
-                        e.currentTarget.style.boxShadow = '0 6px 20px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)';
-                    }
-                }
-            }}
-            onMouseLeave={(e) => {
-                e.currentTarget.style.transform = 'translateY(0) scale(1)';
-                if (hasAnalysis) {
-                    e.currentTarget.style.boxShadow = '0 2px 12px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)';
-                } else {
-                    e.currentTarget.style.boxShadow = '0 2px 12px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2)';
-                }
-            }}
+            style={buttonStyles}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
         >
-            {getButtonContent()}
+            <span style={iconContainerStyles}>
+                {getIcon()}
+            </span>
+            <span style={textStyles}>
+                {getButtonText()}
+            </span>
         </button>
     );
 };
diff --git a/src/content/components/AnalyzedFilesDropdown.tsx b/src/content/components/AnalyzedFilesDropdown.tsx
new file mode 100644
index 0000000..0134b1d
--- /dev/null
+++ b/src/content/components/AnalyzedFilesDropdown.tsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronDown, ChevronUp, FileText, Code, BookOpen, FolderOpen } from 'lucide-react';
+
+interface AnalyzedFilesDropdownProps {
+    files: Array<{ path: string; type: string }>;
+}
+
+const AnalyzedFilesDropdown: React.FC<AnalyzedFilesDropdownProps> = ({ files }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showGlow, setShowGlow] = useState(true);
+
+    // Remove glow after first interaction or after 5 seconds
+    useEffect(() => {
+        const timer = setTimeout(() => setShowGlow(false), 5000);
+        return () => clearTimeout(timer);
+    }, []);
+
+    const handleToggle = () => {
+        setIsOpen(!isOpen);
+        setShowGlow(false);
+    };
+
+    const getFileIcon = (type: string) => {
+        switch (type) {
+            case 'config':
+                return <FileText size={14} style={{ color: '#f59e0b' }} />;
+            case 'source':
+                return <Code size={14} style={{ color: '#8b5cf6' }} />;
+            case 'docs':
+                return <BookOpen size={14} style={{ color: '#3b82f6' }} />;
+            default:
+                return <FileText size={14} style={{ color: 'var(--gai-text-muted)' }} />;
+        }
+    };
+
+    const getFileName = (path: string) => {
+        const parts = path.split('/');
+        return parts.length > 1
+            ? `${parts.slice(0, -1).join('/')}/${parts[parts.length - 1]}`
+            : path;
+    };
+
+    if (!files || files.length === 0) return null;
+
+    return (
+        <div
+            style={{
+                marginBottom: '16px',
+                borderRadius: '12px',
+                background: 'var(--glass-bg)',
+                backdropFilter: 'blur(20px)',
+                border: '1px solid var(--glass-border)',
+                boxShadow: showGlow
+                    ? '0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1), var(--glass-shadow)'
+                    : 'var(--glass-shadow)',
+                overflow: 'hidden',
+                transition: 'box-shadow 0.5s ease',
+                animation: showGlow ? 'gai-glow-pulse 2s ease-in-out infinite' : 'none',
+            }}
+        >
+            {/* Header */}
+            <button
+                onClick={handleToggle}
+                style={{
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: '12px 16px',
+                    background: 'transparent',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: 'var(--gai-text-color)',
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    transition: 'background 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                    e.currentTarget.style.background = 'rgba(139, 92, 246, 0.05)';
+                }}
+                onMouseLeave={(e) => {
+                    e.currentTarget.style.background = 'transparent';
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                    <FolderOpen size={16} style={{ color: '#8b5cf6' }} />
+                    <span>
+                        <span style={{ color: '#8b5cf6', fontWeight: 600 }}>{files.length}</span>
+                        {' '}files analyzed
+                    </span>
+                </div>
+                {isOpen ? (
+                    <ChevronUp size={16} style={{ color: 'var(--gai-text-muted)' }} />
+                ) : (
+                    <ChevronDown size={16} style={{ color: 'var(--gai-text-muted)' }} />
+                )}
+            </button>
+
+            {/* File List */}
+            {isOpen && (
+                <div
+                    style={{
+                        maxHeight: '200px',
+                        overflowY: 'auto',
+                        borderTop: '1px solid var(--glass-border)',
+                        padding: '8px 0',
+                    }}
+                >
+                    {files.map((file, index) => (
+                        <div
+                            key={file.path}
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '10px',
+                                padding: '8px 16px',
+                                fontSize: '12px',
+                                color: 'var(--gai-text-muted)',
+                                animation: `gai-fade-slide-in 0.2s ease-out ${index * 0.03}s both`,
+                            }}
+                        >
+                            {getFileIcon(file.type)}
+                            <span style={{
+                                fontFamily: 'monospace',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                            }}>
+                                {getFileName(file.path)}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {/* Keyframe animations */}
+            <style>{`
+                @keyframes gai-glow-pulse {
+                    0%, 100% {
+                        box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1), var(--glass-shadow);
+                    }
+                    50% {
+                        box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.2), var(--glass-shadow);
+                    }
+                }
+                @keyframes gai-fade-slide-in {
+                    from {
+                        opacity: 0;
+                        transform: translateX(-8px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateX(0);
+                    }
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default AnalyzedFilesDropdown;
diff --git a/src/content/components/ChatInterface.tsx b/src/content/components/ChatInterface.tsx
deleted file mode 100644
index a194b70..0000000
--- a/src/content/components/ChatInterface.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { Send, X, Loader2, AlertTriangle, RefreshCw } from 'lucide-react';
-import { useAnalysisStore } from '../hooks/useAnalysis';
-import { SUGGESTED_QUESTIONS } from '@shared/constants';
-import ThinkingBox from './ThinkingBox';
-import GitHubTokenModal from './GitHubTokenModal';
-import { parseThinkingContent } from '../utils/thinkingParser';
-
-interface ChatInterfaceProps {
-    onClose: () => void;
-}
-
-const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
-    const {
-        chatMessages,
-        chatStatus,
-        chatStreamingContent,
-        chatError,
-        sendChatMessage,
-        analysis,
-        saveGitHubToken,
-        startAnalysis
-    } = useAnalysisStore();
-
-    const [input, setInput] = useState('');
-    const [showRateLimitModal, setShowRateLimitModal] = useState(false);
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    // Detect rate limit error and show modal
-    const isGitHubAuthError = chatError?.includes('rate limit') || chatError?.includes('Rate limit');
-
-    useEffect(() => {
-        if (isGitHubAuthError) {
-            setShowRateLimitModal(true);
-        }
-    }, [isGitHubAuthError]);
-
-    // Auto-scroll to bottom
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [chatMessages, chatStreamingContent]);
-
-    // Focus input on mount
-    useEffect(() => {
-        inputRef.current?.focus();
-    }, []);
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        if (input.trim() && chatStatus !== 'loading') {
-            sendChatMessage(input.trim());
-            setInput('');
-        }
-    };
-
-    const handleSuggestedQuestion = (question: string) => {
-        if (chatStatus !== 'loading') {
-            sendChatMessage(question);
-        }
-    };
-
-    // Determine which suggested questions to show
-    const suggestedQuestions = analysis?.sections?.downloadInfo?.hasReleases
-        ? SUGGESTED_QUESTIONS.hasReleases
-        : SUGGESTED_QUESTIONS.default;
-
-    const isLoading = chatStatus === 'loading';
-
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                height: '450px',
-                maxHeight: '50vh',
-            }}
-        >
-            {/* Chat header */}
-            <div
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    padding: '8px 12px',
-                    borderBottom: '1px solid var(--gai-border-muted)',
-                }}
-            >
-                <span style={{ fontSize: '13px', fontWeight: 500 }}>💬 Ask Questions</span>
-                <button
-                    onClick={onClose}
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: '24px',
-                        height: '24px',
-                        border: 'none',
-                        borderRadius: '4px',
-                        backgroundColor: 'transparent',
-                        cursor: 'pointer',
-                        color: 'var(--gai-text-muted)',
-                    }}
-                >
-                    <X size={14} />
-                </button>
-            </div>
-
-            {/* Messages */}
-            <div
-                style={{
-                    flex: 1,
-                    overflowY: 'auto',
-                    padding: '12px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '8px',
-                }}
-            >
-                {/* Show suggested questions if no messages yet */}
-                {chatMessages.length === 0 && !chatStreamingContent && (
-                    <div style={{ marginBottom: '8px' }}>
-                        <div style={{ fontSize: '12px', color: 'var(--gai-text-muted)', marginBottom: '8px' }}>
-                            Suggested questions:
-                        </div>
-                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-                            {suggestedQuestions.slice(0, 4).map((question, i) => (
-                                <button
-                                    key={i}
-                                    onClick={() => handleSuggestedQuestion(question)}
-                                    disabled={isLoading}
-                                    style={{
-                                        padding: '6px 10px',
-                                        fontSize: '12px',
-                                        backgroundColor: 'var(--gai-bg-primary)',
-                                        border: '1px solid var(--gai-border-color)',
-                                        borderRadius: '16px',
-                                        cursor: isLoading ? 'not-allowed' : 'pointer',
-                                        color: 'var(--gai-text-color)',
-                                        transition: 'background-color 0.2s',
-                                    }}
-                                >
-                                    {question}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-                )}
-
-                {/* Chat messages */}
-                {chatMessages.map((msg) => (
-                    <div
-                        key={msg.id}
-                        className={`gai-chat-message gai-chat-message-${msg.role}`}
-                        style={{
-                            padding: '10px 14px',
-                            borderRadius: '12px',
-                            maxWidth: '85%',
-                            backgroundColor: msg.role === 'user'
-                                ? 'var(--gai-accent-color)'
-                                : 'var(--gai-bg-primary)',
-                            color: msg.role === 'user' ? '#ffffff' : 'var(--gai-text-color)',
-                            alignSelf: msg.role === 'user' ? 'flex-end' : 'flex-start',
-                            borderBottomRightRadius: msg.role === 'user' ? '4px' : '12px',
-                            borderBottomLeftRadius: msg.role === 'assistant' ? '4px' : '12px',
-                        }}
-                    >
-                        {msg.role === 'assistant' ? (
-                            <div className="gai-markdown" style={{ fontSize: '13px' }}>
-                                {(() => {
-                                    const parsed = parseThinkingContent(msg.content);
-                                    return (
-                                        <>
-                                            {parsed.hasThinking && parsed.thinking && (
-                                                <ThinkingBox thinking={parsed.thinking} />
-                                            )}
-                                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{parsed.content}</ReactMarkdown>
-                                        </>
-                                    );
-                                })()}
-                            </div>
-                        ) : (
-                            <span style={{ fontSize: '13px' }}>{msg.content}</span>
-                        )}
-                    </div>
-                ))}
-
-                {/* Streaming response */}
-                {chatStreamingContent && (
-                    <div
-                        className="gai-chat-message gai-chat-message-assistant"
-                        style={{
-                            padding: '10px 14px',
-                            borderRadius: '12px',
-                            maxWidth: '85%',
-                            backgroundColor: 'var(--gai-bg-primary)',
-                            color: 'var(--gai-text-color)',
-                            alignSelf: 'flex-start',
-                            borderBottomLeftRadius: '4px',
-                        }}
-                    >
-                        <div className="gai-markdown" style={{ fontSize: '13px' }}>
-                            {(() => {
-                                const parsed = parseThinkingContent(chatStreamingContent);
-                                return (
-                                    <>
-                                        {parsed.hasThinking && parsed.thinking && (
-                                            <ThinkingBox thinking={parsed.thinking} />
-                                        )}
-                                        <ReactMarkdown remarkPlugins={[remarkGfm]}>{parsed.content}</ReactMarkdown>
-                                    </>
-                                );
-                            })()}
-                        </div>
-                    </div>
-                )}
-
-                {/* Loading indicator - uses ThinkingBox in message bubble */}
-                {isLoading && !chatStreamingContent && (
-                    <div style={{
-                        padding: '10px 14px',
-                        borderRadius: '12px',
-                        maxWidth: '85%',
-                        backgroundColor: 'var(--gai-bg-primary)',
-                        alignSelf: 'flex-start',
-                        borderBottomLeftRadius: '4px',
-                    }}>
-                        <ThinkingBox isLoading={true} />
-                    </div>
-                )}
-
-                {/* Error display */}
-                {chatError && !isLoading && (
-                    <div style={{
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        gap: '10px',
-                        padding: '12px 14px',
-                        borderRadius: '12px',
-                        maxWidth: '90%',
-                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
-                        border: '1px solid rgba(239, 68, 68, 0.2)',
-                        alignSelf: 'flex-start',
-                    }}>
-                        <AlertTriangle size={16} style={{ color: '#f87171', flexShrink: 0, marginTop: '2px' }} />
-                        <div style={{ flex: 1 }}>
-                            <div style={{ fontSize: '12px', fontWeight: 600, color: '#f87171', marginBottom: '4px' }}>
-                                Error
-                            </div>
-                            <div style={{ fontSize: '12px', color: 'var(--gai-text-muted)', lineHeight: 1.4 }}>
-                                {chatError}
-                            </div>
-                            {isGitHubAuthError && (
-                                <button
-                                    onClick={() => setShowRateLimitModal(true)}
-                                    style={{
-                                        marginTop: '8px',
-                                        padding: '6px 12px',
-                                        fontSize: '11px',
-                                        fontWeight: 600,
-                                        color: '#a78bfa',
-                                        backgroundColor: 'rgba(139, 92, 246, 0.15)',
-                                        border: '1px solid rgba(139, 92, 246, 0.3)',
-                                        borderRadius: '6px',
-                                        cursor: 'pointer',
-                                    }}
-                                >
-                                    Add GitHub Token
-                                </button>
-                            )}
-                            {!isGitHubAuthError && (
-                                <button
-                                    onClick={() => sendChatMessage(chatMessages[chatMessages.length - 1]?.content || '')}
-                                    style={{
-                                        marginTop: '8px',
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        gap: '4px',
-                                        padding: '6px 12px',
-                                        fontSize: '11px',
-                                        fontWeight: 600,
-                                        color: 'var(--gai-text-muted)',
-                                        backgroundColor: 'var(--gai-bg-tertiary)',
-                                        border: '1px solid var(--gai-border-color)',
-                                        borderRadius: '6px',
-                                        cursor: 'pointer',
-                                    }}
-                                >
-                                    <RefreshCw size={12} />
-                                    Retry
-                                </button>
-                            )}
-                        </div>
-                    </div>
-                )}
-
-                <div ref={messagesEndRef} />
-            </div>
-
-            {/* Input */}
-            <form
-                onSubmit={handleSubmit}
-                style={{
-                    display: 'flex',
-                    gap: '8px',
-                    padding: '12px',
-                    borderTop: '1px solid var(--gai-border-muted)',
-                }}
-            >
-                <input
-                    ref={inputRef}
-                    type="text"
-                    value={input}
-                    onChange={(e) => setInput(e.target.value)}
-                    placeholder="Ask a question..."
-                    disabled={isLoading}
-                    style={{
-                        flex: 1,
-                        padding: '8px 12px',
-                        fontSize: '13px',
-                        border: '1px solid var(--gai-border-color)',
-                        borderRadius: '6px',
-                        backgroundColor: 'var(--gai-bg-primary)',
-                        color: 'var(--gai-text-color)',
-                        outline: 'none',
-                    }}
-                />
-                <button
-                    type="submit"
-                    disabled={!input.trim() || isLoading}
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: '36px',
-                        height: '36px',
-                        border: 'none',
-                        borderRadius: '6px',
-                        backgroundColor: input.trim() && !isLoading
-                            ? 'var(--gai-accent-color)'
-                            : 'var(--gai-bg-tertiary)',
-                        color: input.trim() && !isLoading ? '#ffffff' : 'var(--gai-text-muted)',
-                        cursor: input.trim() && !isLoading ? 'pointer' : 'not-allowed',
-                    }}
-                >
-                    <Send size={16} />
-                </button>
-            </form>
-
-            {/* GitHub Rate Limit Modal */}
-            <GitHubTokenModal
-                isOpen={showRateLimitModal}
-                onClose={() => setShowRateLimitModal(false)}
-                onSaveToken={saveGitHubToken}
-                onRetry={() => {
-                    const lastUserMsg = chatMessages.filter(m => m.role === 'user').pop();
-                    if (lastUserMsg) sendChatMessage(lastUserMsg.content);
-                }}
-            />
-        </div>
-    );
-};
-
-export default ChatInterface;
diff --git a/src/content/components/GitHubTokenModal.tsx b/src/content/components/GitHubTokenModal.tsx
deleted file mode 100644
index 53a5491..0000000
--- a/src/content/components/GitHubTokenModal.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { X, Key, Clock, ExternalLink, AlertTriangle, Check, Loader2 } from 'lucide-react';
-
-interface GitHubTokenModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onSaveToken: (token: string) => Promise<boolean>;
-    onRetry: () => void;
-}
-
-/**
- * Modal for GitHub API rate limit - allows user to add token or wait
- */
-const GitHubTokenModal: React.FC<GitHubTokenModalProps> = ({
-    isOpen,
-    onClose,
-    onSaveToken,
-    onRetry,
-}) => {
-    const [token, setToken] = useState('');
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-    const [countdown, setCountdown] = useState(60 * 60); // 60 minutes in seconds
-
-    // Countdown timer
-    useEffect(() => {
-        if (!isOpen) return;
-
-        const interval = setInterval(() => {
-            setCountdown((prev) => {
-                if (prev <= 1) {
-                    clearInterval(interval);
-                    return 0;
-                }
-                return prev - 1;
-            });
-        }, 1000);
-
-        return () => clearInterval(interval);
-    }, [isOpen]);
-
-    const formatTime = (seconds: number): string => {
-        const mins = Math.floor(seconds / 60);
-        const secs = seconds % 60;
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    };
-
-    const handleSave = async () => {
-        if (!token.trim()) return;
-
-        setSaving(true);
-        try {
-            await onSaveToken(token.trim());
-            setSaved(true);
-            setTimeout(() => {
-                onRetry();
-                onClose();
-            }, 1000);
-        } catch (error) {
-            console.error('Failed to save token:', error);
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    if (!isOpen) return null;
-
-    return (
-        <>
-            {/* Backdrop */}
-            <div
-                onClick={onClose}
-                style={{
-                    position: 'fixed',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-                    backdropFilter: 'blur(4px)',
-                    zIndex: 10000,
-                }}
-            />
-
-            {/* Modal */}
-            <div
-                style={{
-                    position: 'fixed',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    width: '380px',
-                    backgroundColor: 'rgba(22, 22, 24, 0.98)',
-                    backdropFilter: 'blur(20px)',
-                    WebkitBackdropFilter: 'blur(20px)',
-                    borderRadius: '16px',
-                    border: '1px solid rgba(255, 255, 255, 0.1)',
-                    boxShadow: '0 24px 48px rgba(0, 0, 0, 0.5)',
-                    zIndex: 10001,
-                    overflow: 'hidden',
-                }}
-            >
-                {/* Header */}
-                <div
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        padding: '16px 20px',
-                        borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
-                    }}
-                >
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                        <div
-                            style={{
-                                width: '36px',
-                                height: '36px',
-                                borderRadius: '10px',
-                                background: 'rgba(239, 68, 68, 0.15)',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <AlertTriangle size={18} style={{ color: '#f87171' }} />
-                        </div>
-                        <div>
-                            <h3 style={{ margin: 0, fontSize: '15px', fontWeight: 600, color: '#e4e4e7' }}>
-                                GitHub Rate Limit
-                            </h3>
-                            <p style={{ margin: 0, fontSize: '12px', color: 'rgba(228, 228, 231, 0.5)' }}>
-                                API limit exceeded
-                            </p>
-                        </div>
-                    </div>
-                    <button
-                        onClick={onClose}
-                        style={{
-                            width: '28px',
-                            height: '28px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            border: 'none',
-                            borderRadius: '6px',
-                            backgroundColor: 'transparent',
-                            cursor: 'pointer',
-                            color: 'rgba(228, 228, 231, 0.4)',
-                        }}
-                    >
-                        <X size={16} />
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div style={{ padding: '20px' }}>
-                    {/* Option 1: Add Token */}
-                    <div
-                        style={{
-                            padding: '16px',
-                            background: 'rgba(139, 92, 246, 0.08)',
-                            borderRadius: '12px',
-                            border: '1px solid rgba(139, 92, 246, 0.2)',
-                            marginBottom: '16px',
-                        }}
-                    >
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-                            <Key size={14} style={{ color: '#a78bfa' }} />
-                            <span style={{ fontSize: '13px', fontWeight: 600, color: '#a78bfa' }}>
-                                Add GitHub Token
-                            </span>
-                        </div>
-                        <p style={{ fontSize: '12px', color: 'rgba(228, 228, 231, 0.6)', marginBottom: '12px', lineHeight: 1.5 }}>
-                            A personal access token increases your rate limit to 5,000 requests/hour.
-                        </p>
-                        <input
-                            type="password"
-                            value={token}
-                            onChange={(e) => setToken(e.target.value)}
-                            placeholder="ghp_xxxxxxxxxxxx"
-                            style={{
-                                width: '100%',
-                                padding: '10px 12px',
-                                fontSize: '13px',
-                                border: '1px solid rgba(255, 255, 255, 0.1)',
-                                borderRadius: '8px',
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                color: '#e4e4e7',
-                                outline: 'none',
-                                boxSizing: 'border-box',
-                                marginBottom: '12px',
-                            }}
-                        />
-                        <div style={{ display: 'flex', gap: '8px' }}>
-                            <button
-                                onClick={handleSave}
-                                disabled={!token.trim() || saving}
-                                style={{
-                                    flex: 1,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    gap: '6px',
-                                    padding: '10px 16px',
-                                    fontSize: '13px',
-                                    fontWeight: 600,
-                                    color: '#fff',
-                                    background: saved
-                                        ? 'linear-gradient(135deg, #10b981 0%, #059669 100%)'
-                                        : 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
-                                    border: 'none',
-                                    borderRadius: '8px',
-                                    cursor: !token.trim() || saving ? 'not-allowed' : 'pointer',
-                                    opacity: !token.trim() ? 0.5 : 1,
-                                }}
-                            >
-                                {saving ? <Loader2 size={14} className="gai-spinner" /> : saved ? <Check size={14} /> : null}
-                                {saving ? 'Saving...' : saved ? 'Saved!' : 'Save & Retry'}
-                            </button>
-                        </div>
-                        <a
-                            href="https://github.com/settings/tokens?type=beta"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                gap: '4px',
-                                fontSize: '11px',
-                                color: '#a78bfa',
-                                textDecoration: 'none',
-                                marginTop: '10px',
-                            }}
-                        >
-                            <ExternalLink size={10} />
-                            Get a token from GitHub Settings
-                        </a>
-                    </div>
-
-                    {/* Option 2: Wait */}
-                    <div
-                        style={{
-                            padding: '16px',
-                            background: 'rgba(59, 130, 246, 0.08)',
-                            borderRadius: '12px',
-                            border: '1px solid rgba(59, 130, 246, 0.2)',
-                        }}
-                    >
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
-                            <Clock size={14} style={{ color: '#60a5fa' }} />
-                            <span style={{ fontSize: '13px', fontWeight: 600, color: '#60a5fa' }}>
-                                Or Wait for Reset
-                            </span>
-                        </div>
-                        <p style={{ fontSize: '12px', color: 'rgba(228, 228, 231, 0.6)', marginBottom: '12px', lineHeight: 1.5 }}>
-                            <strong style={{ color: '#e4e4e7' }}>Rate limit resets in approximately:</strong>
-                        </p>
-                        <div
-                            style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                padding: '12px',
-                                background: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '8px',
-                                marginBottom: '12px',
-                            }}
-                        >
-                            <span
-                                style={{
-                                    fontSize: '24px',
-                                    fontWeight: 700,
-                                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                                    color: countdown === 0 ? '#10b981' : '#60a5fa',
-                                }}
-                            >
-                                {countdown === 0 ? 'Ready!' : formatTime(countdown)}
-                            </span>
-                        </div>
-                        {countdown === 0 && (
-                            <button
-                                onClick={() => {
-                                    onRetry();
-                                    onClose();
-                                }}
-                                style={{
-                                    width: '100%',
-                                    padding: '10px 16px',
-                                    fontSize: '13px',
-                                    fontWeight: 600,
-                                    color: '#fff',
-                                    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
-                                    border: 'none',
-                                    borderRadius: '8px',
-                                    cursor: 'pointer',
-                                }}
-                            >
-                                Try Again
-                            </button>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </>
-    );
-};
-
-export default GitHubTokenModal;
diff --git a/src/content/components/HomeTab.tsx b/src/content/components/HomeTab.tsx
index 69fefbd..6b6c85d 100644
--- a/src/content/components/HomeTab.tsx
+++ b/src/content/components/HomeTab.tsx
@@ -1,12 +1,12 @@
 import React, { useRef, useEffect, useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Brain, Sparkles, AlertCircle, Settings, MessageCircle, Package, Key, ChevronDown, Cpu, Check } from 'lucide-react';
+import { Brain, Sparkles, AlertCircle, Settings, Package, Key, ChevronDown, Cpu, Check, Send, Loader2, RefreshCw, Clock } from 'lucide-react';
 import { useAnalysisStore } from '../hooks/useAnalysis';
-import ChatInterface from './ChatInterface';
 import ThinkingBox from './ThinkingBox';
-import GitHubTokenModal from './GitHubTokenModal';
+import AnalyzedFilesDropdown from './AnalyzedFilesDropdown';
 import { parseThinkingContent } from '../utils/thinkingParser';
+import { SUGGESTED_QUESTIONS } from '@shared/constants';
 
 const HomeTab: React.FC = () => {
     const {
@@ -21,15 +21,21 @@ const HomeTab: React.FC = () => {
         startAnalysis,
         setActiveTab,
         setSelectedProvider,
-        saveGitHubToken
+        chatMessages,
+        chatStatus,
+        chatStreamingContent,
+        chatError,
+        sendChatMessage,
+        cooldownRemaining,
+        setCooldownRemaining
     } = useAnalysisStore();
 
-    const [showChat, setShowChat] = useState(false);
-    const [showRateLimitModal, setShowRateLimitModal] = useState(false);
+    const [chatInput, setChatInput] = useState('');
     const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
     const providerDropdownRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
     const bottomRef = useRef<HTMLDivElement>(null);
+    const chatInputRef = useRef<HTMLInputElement>(null);
 
     const displayContent = analysis?.content || streamingContent;
     const isLoading = status === 'loading';
@@ -67,8 +73,8 @@ const HomeTab: React.FC = () => {
                 return;
             }
 
-            // Lerp factor: 0.12 provides smooth but responsive scrolling
-            container.scrollTop = currentScroll + diff * 0.12;
+            // Lerp factor: 0.25 for faster, more responsive scrolling
+            container.scrollTop = currentScroll + diff * 0.25;
             animationFrameId = requestAnimationFrame(smoothScroll);
         };
 
@@ -82,6 +88,28 @@ const HomeTab: React.FC = () => {
         };
     }, [streamingContent, isStreaming]);
 
+    // Auto-scroll for chat messages and chat streaming
+    useEffect(() => {
+        if (contentRef.current && (chatMessages.length > 0 || chatStreamingContent)) {
+            contentRef.current.scrollTo({
+                top: contentRef.current.scrollHeight,
+                behavior: 'smooth'
+            });
+        }
+    }, [chatMessages, chatStreamingContent]);
+
+    // Ensure final scroll when analysis streaming ends
+    useEffect(() => {
+        if (status === 'complete' && contentRef.current) {
+            // Use timeout to ensure DOM has updated
+            setTimeout(() => {
+                if (contentRef.current) {
+                    contentRef.current.scrollTop = contentRef.current.scrollHeight;
+                }
+            }, 100);
+        }
+    }, [status]);
+
     // Close dropdown on click outside
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -92,13 +120,22 @@ const HomeTab: React.FC = () => {
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
-
-    // Auto-show rate limit modal when error detected
+    // Cooldown timer effect
     useEffect(() => {
-        if (isGitHubAuthError) {
-            setShowRateLimitModal(true);
-        }
-    }, [isGitHubAuthError]);
+        if (cooldownRemaining <= 0) return;
+
+        const timer = setInterval(() => {
+            const newRemaining = cooldownRemaining - 1000;
+            if (newRemaining <= 0) {
+                setCooldownRemaining(0);
+                clearInterval(timer);
+            } else {
+                setCooldownRemaining(newRemaining);
+            }
+        }, 1000);
+
+        return () => clearInterval(timer);
+    }, [cooldownRemaining, setCooldownRemaining]);
 
     // No API keys configured - first time setup
     if (isIdle && !displayContent && noProvidersConfigured) {
@@ -317,36 +354,112 @@ const HomeTab: React.FC = () => {
                         )}
                     </div>
                 )}
-
-                <button
-                    onClick={() => startAnalysis()}
-                    style={{
-                        display: 'inline-flex',
+                {/* Cooldown Timer or Analyze Button */}
+                {cooldownRemaining > 0 ? (
+                    <div style={{
+                        display: 'flex',
+                        flexDirection: 'column',
                         alignItems: 'center',
-                        gap: '8px',
-                        padding: '14px 28px',
-                        fontSize: '14px',
-                        fontWeight: 500,
-                        color: '#fff',
-                        background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(99, 102, 241, 0.95) 50%, rgba(59, 130, 246, 0.95) 100%)',
-                        border: 'none',
-                        borderRadius: '50px',
-                        cursor: 'pointer',
-                        transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
-                        boxShadow: '0 4px 16px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)',
-                    }}
-                    onMouseEnter={(e) => {
-                        e.currentTarget.style.transform = 'translateY(-2px) scale(1.02)';
-                        e.currentTarget.style.boxShadow = '0 8px 24px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)';
-                    }}
-                    onMouseLeave={(e) => {
-                        e.currentTarget.style.transform = 'translateY(0) scale(1)';
-                        e.currentTarget.style.boxShadow = '0 4px 16px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)';
-                    }}
-                >
-                    <Sparkles size={16} />
-                    Analyze Repository
-                </button>
+                        gap: '12px',
+                    }}>
+                        {/* Circular timer */}
+                        <div style={{
+                            position: 'relative',
+                            width: '80px',
+                            height: '80px',
+                        }}>
+                            <svg
+                                width="80"
+                                height="80"
+                                style={{ transform: 'rotate(-90deg)' }}
+                            >
+                                {/* Background circle */}
+                                <circle
+                                    cx="40"
+                                    cy="40"
+                                    r="35"
+                                    fill="none"
+                                    stroke="rgba(139, 92, 246, 0.15)"
+                                    strokeWidth="6"
+                                />
+                                {/* Animated progress circle */}
+                                <circle
+                                    cx="40"
+                                    cy="40"
+                                    r="35"
+                                    fill="none"
+                                    stroke="url(#cooldown-gradient)"
+                                    strokeWidth="6"
+                                    strokeLinecap="round"
+                                    strokeDasharray={2 * Math.PI * 35}
+                                    strokeDashoffset={2 * Math.PI * 35 * (1 - cooldownRemaining / 30000)}
+                                    style={{ transition: 'stroke-dashoffset 1s linear' }}
+                                />
+                                <defs>
+                                    <linearGradient id="cooldown-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                                        <stop offset="0%" stopColor="#8b5cf6" />
+                                        <stop offset="100%" stopColor="#3b82f6" />
+                                    </linearGradient>
+                                </defs>
+                            </svg>
+                            {/* Timer text */}
+                            <div style={{
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                            }}>
+                                <Clock size={16} style={{ color: '#8b5cf6', marginBottom: '2px' }} />
+                                <span style={{
+                                    fontSize: '14px',
+                                    fontWeight: 600,
+                                    color: 'var(--gai-text-color)',
+                                }}>
+                                    {Math.ceil(cooldownRemaining / 1000)}s
+                                </span>
+                            </div>
+                        </div>
+                        <span style={{
+                            fontSize: '13px',
+                            color: 'var(--gai-text-muted)',
+                        }}>
+                            Cooldown active
+                        </span>
+                    </div>
+                ) : (
+                    <button
+                        onClick={() => startAnalysis()}
+                        style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                            padding: '14px 28px',
+                            fontSize: '14px',
+                            fontWeight: 500,
+                            color: '#fff',
+                            background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(99, 102, 241, 0.95) 50%, rgba(59, 130, 246, 0.95) 100%)',
+                            border: 'none',
+                            borderRadius: '50px',
+                            cursor: 'pointer',
+                            transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+                            boxShadow: '0 4px 16px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)',
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.transform = 'translateY(-2px) scale(1.02)';
+                            e.currentTarget.style.boxShadow = '0 8px 24px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3)';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.transform = 'translateY(0) scale(1)';
+                            e.currentTarget.style.boxShadow = '0 4px 16px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2)';
+                        }}
+                    >
+                        <Sparkles size={16} />
+                        Analyze Repository
+                    </button>
+                )}
 
                 <p style={{
                     fontSize: '12px',
@@ -354,7 +467,9 @@ const HomeTab: React.FC = () => {
                     marginTop: '16px',
                     maxWidth: '260px',
                 }}>
-                    Get AI-powered insights about this repository in seconds
+                    {cooldownRemaining > 0
+                        ? 'Rate limiting protects API resources'
+                        : 'Get AI-powered insights about this repository in seconds'}
                 </p>
             </div>
         );
@@ -479,42 +594,11 @@ const HomeTab: React.FC = () => {
                         lineHeight: 1.5,
                     }}>
                         {isGitHubAuthError
-                            ? 'GitHub API rate limit exceeded. Add a token for 5,000 requests/hour or wait ~60 minutes.'
+                            ? 'GitHub API rate limit reached. Please wait ~60 minutes and try again.'
                             : error}
                     </p>
 
                     <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
-                        {isGitHubAuthError && (
-                            <button
-                                onClick={() => setShowRateLimitModal(true)}
-                                style={{
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: '8px',
-                                    padding: '12px 24px',
-                                    fontSize: '14px',
-                                    fontWeight: 600,
-                                    color: '#fff',
-                                    background: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
-                                    border: 'none',
-                                    borderRadius: '10px',
-                                    cursor: 'pointer',
-                                    transition: 'all 0.2s ease',
-                                    boxShadow: '0 4px 14px rgba(139, 92, 246, 0.35)',
-                                }}
-                                onMouseEnter={(e) => {
-                                    e.currentTarget.style.transform = 'translateY(-2px)';
-                                    e.currentTarget.style.boxShadow = '0 6px 20px rgba(139, 92, 246, 0.45)';
-                                }}
-                                onMouseLeave={(e) => {
-                                    e.currentTarget.style.transform = 'translateY(0)';
-                                    e.currentTarget.style.boxShadow = '0 4px 14px rgba(139, 92, 246, 0.35)';
-                                }}
-                            >
-                                <Key size={16} />
-                                Add GitHub Token
-                            </button>
-                        )}
                         <button
                             onClick={() => startAnalysis(true)}
                             style={{
@@ -524,15 +608,13 @@ const HomeTab: React.FC = () => {
                                 padding: '12px 24px',
                                 fontSize: '14px',
                                 fontWeight: 600,
-                                color: isGitHubAuthError ? 'var(--gai-text-muted)' : '#fff',
-                                background: isGitHubAuthError
-                                    ? 'var(--gai-bg-tertiary)'
-                                    : 'linear-gradient(135deg, #f85149 0%, #da3633 100%)',
-                                border: isGitHubAuthError ? '1px solid var(--gai-border-color)' : 'none',
+                                color: '#fff',
+                                background: 'linear-gradient(135deg, #f85149 0%, #da3633 100%)',
+                                border: 'none',
                                 borderRadius: '10px',
                                 cursor: 'pointer',
                                 transition: 'all 0.2s ease',
-                                boxShadow: isGitHubAuthError ? 'none' : '0 4px 14px rgba(248, 81, 73, 0.35)',
+                                boxShadow: '0 4px 14px rgba(248, 81, 73, 0.35)',
                             }}
                             onMouseEnter={(e) => {
                                 e.currentTarget.style.transform = 'translateY(-2px)';
@@ -546,14 +628,6 @@ const HomeTab: React.FC = () => {
                         </button>
                     </div>
                 </div>
-
-                {/* GitHub Rate Limit Modal */}
-                <GitHubTokenModal
-                    isOpen={showRateLimitModal}
-                    onClose={() => setShowRateLimitModal(false)}
-                    onSaveToken={saveGitHubToken}
-                    onRetry={() => startAnalysis(true)}
-                />
             </>
         );
     }
@@ -654,16 +728,45 @@ const HomeTab: React.FC = () => {
         );
     }
 
-    // Analysis content
+    // Analysis content with integrated chat
+    const isChatLoading = chatStatus === 'loading';
+    const suggestedQuestions = analysis?.sections?.downloadInfo?.hasReleases
+        ? SUGGESTED_QUESTIONS.hasReleases
+        : SUGGESTED_QUESTIONS.default;
+
+    const handleSendMessage = (e?: React.FormEvent) => {
+        e?.preventDefault();
+        if (chatInput.trim() && !isChatLoading) {
+            sendChatMessage(chatInput.trim());
+            setChatInput('');
+        }
+    };
+
+    const handleSuggestedQuestion = (question: string) => {
+        if (!isChatLoading) {
+            sendChatMessage(question);
+        }
+    };
+
     return (
         <>
-            <div ref={contentRef} style={{ padding: '20px', flex: 1, overflowY: 'auto' }}>
+            <div ref={contentRef} style={{ padding: '20px', flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
+                {/* Analysis Content */}
                 {displayContent && parsedContent && (
                     <div className="gai-markdown">
                         {/* Show thinking box if AI returned thinking content */}
                         {parsedContent.hasThinking && parsedContent.thinking && (
-                            <ThinkingBox thinking={parsedContent.thinking} />
+                            <ThinkingBox
+                                thinking={parsedContent.thinking}
+                                isThinking={!parsedContent.isComplete}
+                            />
                         )}
+
+                        {/* Analyzed Files Dropdown - below thinking, above content */}
+                        {analysis?.strategyResult?.files && analysis.strategyResult.files.length > 0 && (
+                            <AnalyzedFilesDropdown files={analysis.strategyResult.files} />
+                        )}
+
                         <ReactMarkdown remarkPlugins={[remarkGfm]}>{parsedContent.content}</ReactMarkdown>
                         {isStreaming && (
                             <span style={{
@@ -676,8 +779,6 @@ const HomeTab: React.FC = () => {
                                 animation: 'gai-blink 1s infinite',
                             }} />
                         )}
-                        {/* Auto-scroll anchor */}
-                        <div ref={bottomRef} />
                     </div>
                 )}
 
@@ -701,59 +802,305 @@ const HomeTab: React.FC = () => {
                         Loaded from cache • {new Date(analysis.generatedAt).toLocaleString()}
                     </div>
                 )}
+
+                {/* Integrated Chat Section - appears after analysis complete */}
+                {status === 'complete' && (
+                    <div style={{
+                        marginTop: '24px',
+                        paddingTop: '20px',
+                        borderTop: '1px solid var(--gai-border-muted)',
+                        animation: 'gai-fade-in 0.4s ease-out',
+                    }}>
+                        {/* Suggested Questions - show when no chat messages */}
+                        {chatMessages.length === 0 && !chatStreamingContent && (
+                            <div style={{ marginBottom: '16px' }}>
+                                <div style={{
+                                    fontSize: '12px',
+                                    color: 'var(--gai-text-muted)',
+                                    marginBottom: '12px',
+                                    fontWeight: 500,
+                                }}>
+                                    ✨ Ask a follow-up question
+                                </div>
+                                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+                                    {suggestedQuestions.slice(0, 4).map((question, i) => (
+                                        <button
+                                            key={i}
+                                            onClick={() => handleSuggestedQuestion(question)}
+                                            disabled={isChatLoading}
+                                            style={{
+                                                padding: '10px 16px',
+                                                fontSize: '13px',
+                                                background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%)',
+                                                border: '1px solid rgba(139, 92, 246, 0.2)',
+                                                borderRadius: '20px',
+                                                cursor: isChatLoading ? 'not-allowed' : 'pointer',
+                                                color: 'var(--gai-text-color)',
+                                                transition: 'all 0.2s ease',
+                                                opacity: isChatLoading ? 0.5 : 1,
+                                                fontWeight: 400,
+                                            }}
+                                            onMouseEnter={(e) => {
+                                                if (!isChatLoading) {
+                                                    e.currentTarget.style.background = 'linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%)';
+                                                    e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.4)';
+                                                    e.currentTarget.style.transform = 'translateY(-1px)';
+                                                }
+                                            }}
+                                            onMouseLeave={(e) => {
+                                                e.currentTarget.style.background = 'linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%)';
+                                                e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.2)';
+                                                e.currentTarget.style.transform = 'translateY(0)';
+                                            }}
+                                        >
+                                            {question}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Chat Messages */}
+                        {chatMessages.length > 0 && (
+                            <div style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '12px',
+                                marginBottom: '16px',
+                            }}>
+                                {chatMessages.map((msg) => (
+                                    <div
+                                        key={msg.id}
+                                        style={{
+                                            padding: '12px 16px',
+                                            borderRadius: msg.role === 'user' ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+                                            maxWidth: '90%',
+                                            background: msg.role === 'user'
+                                                ? 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)'
+                                                : 'var(--gai-bg-secondary)',
+                                            border: msg.role === 'assistant' ? '1px solid var(--gai-border-muted)' : 'none',
+                                            color: msg.role === 'user' ? '#ffffff' : 'var(--gai-text-color)',
+                                            alignSelf: msg.role === 'user' ? 'flex-end' : 'flex-start',
+                                            boxShadow: msg.role === 'user'
+                                                ? '0 2px 8px rgba(139, 92, 246, 0.25)'
+                                                : '0 1px 4px rgba(0, 0, 0, 0.05)',
+                                        }}
+                                    >
+                                        {msg.role === 'assistant' ? (
+                                            <div className="gai-markdown" style={{ fontSize: '13px' }}>
+                                                {(() => {
+                                                    const parsed = parseThinkingContent(msg.content);
+                                                    return (
+                                                        <>
+                                                            {parsed.hasThinking && parsed.thinking && (
+                                                                <ThinkingBox
+                                                                    thinking={parsed.thinking}
+                                                                    isThinking={!parsed.isComplete}
+                                                                />
+                                                            )}
+                                                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{parsed.content}</ReactMarkdown>
+                                                        </>
+                                                    );
+                                                })()}
+                                            </div>
+                                        ) : (
+                                            <span style={{ fontSize: '13px' }}>{msg.content}</span>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+
+                        {/* Streaming Response */}
+                        {chatStreamingContent && (
+                            <div
+                                style={{
+                                    padding: '12px 16px',
+                                    borderRadius: '18px 18px 18px 4px',
+                                    maxWidth: '90%',
+                                    background: 'var(--gai-bg-secondary)',
+                                    border: '1px solid var(--gai-border-muted)',
+                                    color: 'var(--gai-text-color)',
+                                    alignSelf: 'flex-start',
+                                    marginBottom: '16px',
+                                }}
+                            >
+                                <div className="gai-markdown" style={{ fontSize: '13px' }}>
+                                    {(() => {
+                                        const parsed = parseThinkingContent(chatStreamingContent);
+                                        return (
+                                            <>
+                                                {parsed.hasThinking && parsed.thinking && (
+                                                    <ThinkingBox
+                                                        thinking={parsed.thinking}
+                                                        isThinking={!parsed.isComplete}
+                                                    />
+                                                )}
+                                                <ReactMarkdown remarkPlugins={[remarkGfm]}>{parsed.content}</ReactMarkdown>
+                                            </>
+                                        );
+                                    })()}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Loading indicator */}
+                        {isChatLoading && !chatStreamingContent && (
+                            <div style={{
+                                padding: '12px 16px',
+                                borderRadius: '18px 18px 18px 4px',
+                                maxWidth: '90%',
+                                background: 'var(--gai-bg-secondary)',
+                                border: '1px solid var(--gai-border-muted)',
+                                alignSelf: 'flex-start',
+                                marginBottom: '16px',
+                            }}>
+                                <ThinkingBox isLoading={true} />
+                            </div>
+                        )}
+
+                        {/* Chat Error */}
+                        {chatError && !isChatLoading && (
+                            <div style={{
+                                display: 'flex',
+                                alignItems: 'flex-start',
+                                gap: '10px',
+                                padding: '12px 14px',
+                                borderRadius: '12px',
+                                maxWidth: '90%',
+                                backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                                border: '1px solid rgba(239, 68, 68, 0.2)',
+                                alignSelf: 'flex-start',
+                                marginBottom: '16px',
+                            }}>
+                                <AlertCircle size={16} style={{ color: '#f87171', flexShrink: 0, marginTop: '2px' }} />
+                                <div style={{ flex: 1 }}>
+                                    <div style={{ fontSize: '12px', fontWeight: 600, color: '#f87171', marginBottom: '4px' }}>
+                                        Error
+                                    </div>
+                                    <div style={{ fontSize: '12px', color: 'var(--gai-text-muted)', lineHeight: 1.4 }}>
+                                        {chatError}
+                                    </div>
+                                    <button
+                                        onClick={() => {
+                                            const lastUserMsg = chatMessages.filter(m => m.role === 'user').pop();
+                                            if (lastUserMsg) sendChatMessage(lastUserMsg.content);
+                                        }}
+                                        style={{
+                                            marginTop: '8px',
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: '4px',
+                                            padding: '6px 12px',
+                                            fontSize: '11px',
+                                            fontWeight: 600,
+                                            color: 'var(--gai-text-muted)',
+                                            backgroundColor: 'var(--gai-bg-tertiary)',
+                                            border: '1px solid var(--gai-border-color)',
+                                            borderRadius: '6px',
+                                            cursor: 'pointer',
+                                        }}
+                                    >
+                                        <RefreshCw size={12} />
+                                        Retry
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Auto-scroll anchor */}
+                        <div ref={bottomRef} />
+                    </div>
+                )}
             </div>
 
-            {/* Chat section */}
-            <div style={{ borderTop: '1px solid var(--gai-border-color)', backgroundColor: 'var(--gai-bg-secondary)' }}>
-                {!showChat ? (
+            {/* Chat Input - Fixed at bottom when analysis complete */}
+            {status === 'complete' && (
+                <form
+                    onSubmit={handleSendMessage}
+                    style={{
+                        display: 'flex',
+                        gap: '10px',
+                        padding: '16px 20px',
+                        borderTop: '1px solid var(--gai-border-muted)',
+                        background: 'var(--gai-bg-secondary)',
+                    }}
+                >
+                    <input
+                        ref={chatInputRef}
+                        type="text"
+                        value={chatInput}
+                        onChange={(e) => setChatInput(e.target.value)}
+                        placeholder="Ask a follow-up question..."
+                        disabled={isChatLoading}
+                        style={{
+                            flex: 1,
+                            padding: '12px 18px',
+                            fontSize: '14px',
+                            border: '2px solid var(--gai-border-color)',
+                            borderRadius: '24px',
+                            backgroundColor: 'var(--gai-bg-primary)',
+                            color: 'var(--gai-text-color)',
+                            outline: 'none',
+                            transition: 'all 0.2s ease',
+                        }}
+                        onFocus={(e) => {
+                            e.currentTarget.style.borderColor = '#8b5cf6';
+                            e.currentTarget.style.boxShadow = '0 0 0 3px rgba(139, 92, 246, 0.15)';
+                        }}
+                        onBlur={(e) => {
+                            e.currentTarget.style.borderColor = 'var(--gai-border-color)';
+                            e.currentTarget.style.boxShadow = 'none';
+                        }}
+                    />
                     <button
-                        onClick={() => setShowChat(true)}
-                        disabled={status !== 'complete'}
+                        type="submit"
+                        disabled={!chatInput.trim() || isChatLoading}
                         style={{
-                            width: '100%',
-                            padding: '14px 20px',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
-                            gap: '8px',
+                            width: '48px',
+                            height: '48px',
                             border: 'none',
-                            backgroundColor: 'transparent',
-                            color: status === 'complete' ? '#8b5cf6' : 'var(--gai-text-muted)',
-                            cursor: status === 'complete' ? 'pointer' : 'not-allowed',
-                            fontSize: '14px',
-                            fontWeight: 500,
+                            borderRadius: '50%',
+                            background: chatInput.trim() && !isChatLoading
+                                ? 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)'
+                                : 'var(--gai-bg-tertiary)',
+                            color: chatInput.trim() && !isChatLoading ? '#ffffff' : 'var(--gai-text-muted)',
+                            cursor: chatInput.trim() && !isChatLoading ? 'pointer' : 'not-allowed',
                             transition: 'all 0.2s ease',
+                            boxShadow: chatInput.trim() && !isChatLoading
+                                ? '0 4px 12px rgba(139, 92, 246, 0.3)'
+                                : 'none',
                         }}
                         onMouseEnter={(e) => {
-                            if (status === 'complete') {
-                                e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)';
+                            if (chatInput.trim() && !isChatLoading) {
+                                e.currentTarget.style.transform = 'scale(1.05)';
+                                e.currentTarget.style.boxShadow = '0 6px 16px rgba(139, 92, 246, 0.4)';
                             }
                         }}
                         onMouseLeave={(e) => {
-                            e.currentTarget.style.backgroundColor = 'transparent';
+                            e.currentTarget.style.transform = 'scale(1)';
+                            if (chatInput.trim() && !isChatLoading) {
+                                e.currentTarget.style.boxShadow = '0 4px 12px rgba(139, 92, 246, 0.3)';
+                            }
                         }}
                     >
-                        <MessageCircle size={16} />
-                        Ask a question about this repository
+                        {isChatLoading ? <Loader2 size={20} className="gai-spinner" /> : <Send size={20} />}
                     </button>
-                ) : (
-                    <ChatInterface onClose={() => setShowChat(false)} />
-                )}
-            </div>
-
-            {/* GitHub Rate Limit Modal */}
-            <GitHubTokenModal
-                isOpen={showRateLimitModal}
-                onClose={() => setShowRateLimitModal(false)}
-                onSaveToken={saveGitHubToken}
-                onRetry={() => startAnalysis(true)}
-            />
+                </form>
+            )}
 
             <style>{`
                 @keyframes gai-blink {
                     0%, 50% { opacity: 1; }
                     51%, 100% { opacity: 0; }
                 }
+                @keyframes gai-fade-in {
+                    from { opacity: 0; transform: translateY(10px); }
+                    to { opacity: 1; transform: translateY(0); }
+                }
             `}</style>
         </>
     );
diff --git a/src/content/components/SettingsTab.tsx b/src/content/components/SettingsTab.tsx
index 07e0cb8..b809ff3 100644
--- a/src/content/components/SettingsTab.tsx
+++ b/src/content/components/SettingsTab.tsx
@@ -1,11 +1,31 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Check, Loader2, Trash2, ExternalLink, Key, Database, Cpu, HardDrive, Clock, ChevronDown } from 'lucide-react';
+import { Check, Loader2, Trash2, ExternalLink, Key, Database, Cpu, HardDrive, Clock, ChevronDown, ChevronLeft, ChevronRight, AlertTriangle } from 'lucide-react';
 import { useAnalysisStore } from '../hooks/useAnalysis';
 import { AIProvider, ExtensionSettings } from '@shared/types';
 import { DEFAULT_SETTINGS } from '@shared/constants';
 
+// CDN URLs for AI Provider icons from homarr-labs/dashboard-icons
+const PROVIDER_ICON_URLS: Record<AIProvider, string> = {
+    [AIProvider.GEMINI]: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/google-gemini.svg',
+    [AIProvider.CLAUDE]: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/claude-ai.svg',
+    [AIProvider.HUGGINGFACE]: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/hugging-face.svg',
+    [AIProvider.OPENROUTER]: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/open-router-dark.svg',
+    [AIProvider.OPENAI]: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/openai-light.svg',
+};
+
+// Provider icon component using CDN images
+const ProviderIcon: React.FC<{ provider: AIProvider; size?: number }> = ({ provider, size = 24 }) => (
+    <img
+        src={PROVIDER_ICON_URLS[provider]}
+        alt={provider}
+        width={size}
+        height={size}
+        style={{ objectFit: 'contain' }}
+    />
+);
+
 // Provider info with icons and colors
-const PROVIDER_INFO: Record<AIProvider, { name: string; url: string; color: string; description: string }> = {
+const PROVIDER_INFO: Record<AIProvider, { name: string; url: string; color: string; description: string; warning?: string }> = {
     [AIProvider.GEMINI]: {
         name: 'Gemini',
         url: 'https://aistudio.google.com/apikey',
@@ -17,6 +37,7 @@ const PROVIDER_INFO: Record<AIProvider, { name: string; url: string; color: stri
         url: 'https://console.anthropic.com/settings/keys',
         color: '#d97706',
         description: 'Anthropic • Paid API',
+        warning: 'Requires browser access enabled on API key',
     },
     [AIProvider.HUGGINGFACE]: {
         name: 'HuggingFace',
@@ -30,6 +51,12 @@ const PROVIDER_INFO: Record<AIProvider, { name: string; url: string; color: stri
         color: '#10b981',
         description: 'Multi-provider • Free models',
     },
+    [AIProvider.OPENAI]: {
+        name: 'OpenAI',
+        url: 'https://platform.openai.com/api-keys',
+        color: '#00a67e',
+        description: 'OpenAI • Paid API',
+    },
 };
 
 // Model options for each provider
@@ -54,10 +81,15 @@ const MODEL_OPTIONS: Record<AIProvider, { value: string; label: string; descript
         { value: 'xiaomi/mimo-v2-flash:free', label: 'Xiaomi Mimo V2 Flash', description: 'Free • Fast' },
         { value: 'z-ai/glm-4.5-air:free', label: 'GLM-4.5-Air', description: 'Free • Fast' },
     ],
+    [AIProvider.OPENAI]: [
+        { value: 'gpt-4o-mini', label: 'GPT-4o Mini', description: 'Fast & affordable' },
+        { value: 'gpt-4o', label: 'GPT-4o', description: 'Most capable' },
+        { value: 'gpt-4-turbo', label: 'GPT-4 Turbo', description: 'High quality' },
+    ],
 };
 
 const SettingsTab: React.FC = () => {
-    const { settings, saveSettings, clearCache, loadSettings } = useAnalysisStore();
+    const { settings, saveSettings, clearCache, deleteCurrentRepoCache, loadSettings, repoInfo, reset } = useAnalysisStore();
 
     const [localSettings, setLocalSettings] = useState<ExtensionSettings>(settings || DEFAULT_SETTINGS);
     const [saving, setSaving] = useState(false);
@@ -68,9 +100,25 @@ const SettingsTab: React.FC = () => {
     const [showCustomInput, setShowCustomInput] = useState(false);
     const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
     const [modelDropdownOpen, setModelDropdownOpen] = useState(false);
+    const [providerPage, setProviderPage] = useState(0);
     const providerDropdownRef = useRef<HTMLDivElement>(null);
     const modelDropdownRef = useRef<HTMLDivElement>(null);
 
+    // Cached repos state
+    const [cachedRepos, setCachedRepos] = useState<Array<{ fullName: string; branch: string; sizeBytes: number }>>([]);
+    const [selectedRepos, setSelectedRepos] = useState<Set<string>>(new Set());
+    const [deletingRepos, setDeletingRepos] = useState(false);
+    const [showRepoDropdown, setShowRepoDropdown] = useState(false);
+
+    // Provider carousel settings
+    const providersPerPage = 2;
+    const providerList = Object.entries(PROVIDER_INFO) as [AIProvider, typeof PROVIDER_INFO[AIProvider]][];
+    const totalPages = Math.ceil(providerList.length / providersPerPage);
+    const currentProviders = providerList.slice(
+        providerPage * providersPerPage,
+        (providerPage + 1) * providersPerPage
+    );
+
     // Close dropdowns on outside click
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
@@ -98,13 +146,18 @@ const SettingsTab: React.FC = () => {
         }
     }, [settings]);
 
-    // Load cache stats
+    // Load cache stats and cached repos
     useEffect(() => {
         chrome.runtime.sendMessage({ type: 'GET_CACHE_STATS' }, (response) => {
             if (response?.stats) {
                 setCacheStats(response.stats);
             }
         });
+        chrome.runtime.sendMessage({ type: 'GET_CACHED_REPOS' }, (response) => {
+            if (response?.repos) {
+                setCachedRepos(response.repos);
+            }
+        });
     }, []);
 
     const selectedProvider = localSettings.ai.selectedProvider;
@@ -199,9 +252,95 @@ const SettingsTab: React.FC = () => {
         setClearing(false);
         if (success) {
             setCacheStats({ count: 0, sizeBytes: 0 });
+            setCachedRepos([]);
+            setSelectedRepos(new Set());
+        }
+    };
+
+    // Toggle repo selection
+    const toggleRepoSelection = (repoKey: string) => {
+        setSelectedRepos(prev => {
+            const next = new Set(prev);
+            if (next.has(repoKey)) {
+                next.delete(repoKey);
+            } else {
+                next.add(repoKey);
+            }
+            return next;
+        });
+    };
+
+    // Select/deselect all repos
+    const toggleSelectAll = () => {
+        if (selectedRepos.size === cachedRepos.length) {
+            setSelectedRepos(new Set());
+        } else {
+            setSelectedRepos(new Set(cachedRepos.map(r => `${r.fullName}:${r.branch}`)));
+        }
+    };
+
+    // Delete selected repos
+    const handleDeleteSelectedRepos = async () => {
+        if (selectedRepos.size === 0) return;
+        setDeletingRepos(true);
+
+        // Check if current repo is being deleted
+        const currentKey = repoInfo ? `${repoInfo.owner}/${repoInfo.repo}:${repoInfo.branch}` : null;
+        const deletingCurrentRepo = currentKey && selectedRepos.has(currentKey);
+
+        const promises = Array.from(selectedRepos).map(key => {
+            const colonIdx = key.lastIndexOf(':');
+            const fullName = key.substring(0, colonIdx);
+            const branch = key.substring(colonIdx + 1);
+            return new Promise<void>((resolve) => {
+                chrome.runtime.sendMessage({
+                    type: 'DELETE_REPO_CACHE',
+                    data: { fullName, branch }
+                }, () => resolve());
+            });
+        });
+
+        await Promise.all(promises);
+
+        // Refresh cache data
+        chrome.runtime.sendMessage({ type: 'GET_CACHE_STATS' }, (response) => {
+            if (response?.stats) setCacheStats(response.stats);
+        });
+        chrome.runtime.sendMessage({ type: 'GET_CACHED_REPOS' }, (response) => {
+            if (response?.repos) setCachedRepos(response.repos);
+        });
+
+        // Reset state if current repo was deleted (same as clearCache)
+        if (deletingCurrentRepo) {
+            reset();
         }
+
+        setSelectedRepos(new Set());
+        setDeletingRepos(false);
+        setShowRepoDropdown(false);
     };
 
+    // Delete current repo cache (quick action)
+    const handleDeleteCurrentRepo = async () => {
+        if (!repoInfo) return;
+        setDeletingRepos(true);
+        const success = await deleteCurrentRepoCache();
+        setDeletingRepos(false);
+        if (success) {
+            // Refresh cache stats and repos list
+            chrome.runtime.sendMessage({ type: 'GET_CACHE_STATS' }, (response) => {
+                if (response?.stats) setCacheStats(response.stats);
+            });
+            chrome.runtime.sendMessage({ type: 'GET_CACHED_REPOS' }, (response) => {
+                if (response?.repos) setCachedRepos(response.repos);
+            });
+        }
+    };
+
+    // Check if current repo is cached
+    const currentRepoKey = repoInfo ? `${repoInfo.owner}/${repoInfo.repo}:${repoInfo.branch}` : null;
+    const isCurrentRepoCached = currentRepoKey && cachedRepos.some(r => `${r.fullName}:${r.branch}` === currentRepoKey);
+
     const formatBytes = (bytes: number): string => {
         if (bytes < 1024) return `${bytes} B`;
         if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -212,119 +351,242 @@ const SettingsTab: React.FC = () => {
 
     return (
         <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
-            {/* AI Provider Dropdown */}
-            <div ref={providerDropdownRef} style={{ position: 'relative' }}>
-                <label style={{
-                    display: 'block',
-                    fontSize: '12px',
-                    fontWeight: 600,
-                    color: 'var(--gai-text-muted)',
-                    marginBottom: '8px',
-                    textTransform: 'uppercase',
-                    letterSpacing: '0.5px',
+            {/* AI Provider Carousel */}
+            <div>
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '12px',
                 }}>
-                    AI Provider
-                </label>
-                <button
-                    onClick={() => setProviderDropdownOpen(!providerDropdownOpen)}
-                    style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '12px',
-                        width: '100%',
-                        padding: '12px 14px',
-                        backgroundColor: 'var(--gai-bg-secondary)',
-                        border: '1px solid var(--gai-border-color)',
-                        borderRadius: '10px',
-                        cursor: 'pointer',
-                        textAlign: 'left',
-                    }}
-                >
+                    <label style={{
+                        fontSize: '12px',
+                        fontWeight: 600,
+                        color: 'var(--gai-text-muted)',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                    }}>
+                        AI Provider
+                    </label>
+                    {/* Page indicator */}
                     <div style={{
-                        width: '32px',
-                        height: '32px',
-                        borderRadius: '8px',
-                        backgroundColor: `${providerInfo.color}20`,
                         display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
+                        gap: '4px',
                     }}>
-                        <Cpu size={16} style={{ color: providerInfo.color }} />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <div style={{ fontSize: '14px', fontWeight: 500, color: 'var(--gai-text-color)' }}>
-                            {providerInfo.name}
-                        </div>
-                        <div style={{ fontSize: '11px', color: 'var(--gai-text-muted)' }}>
-                            {providerInfo.description}
-                        </div>
+                        {Array.from({ length: totalPages }).map((_, i) => (
+                            <div
+                                key={i}
+                                style={{
+                                    width: '6px',
+                                    height: '6px',
+                                    borderRadius: '50%',
+                                    backgroundColor: i === providerPage ? '#8b5cf6' : 'rgba(139, 92, 246, 0.2)',
+                                    transition: 'all 0.2s ease',
+                                }}
+                            />
+                        ))}
                     </div>
-                    <ChevronDown size={16} style={{
-                        color: 'var(--gai-text-muted)',
-                        transform: providerDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-                        transition: 'transform 0.2s ease',
-                    }} />
-                </button>
+                </div>
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                }}>
+                    {/* Left Arrow */}
+                    <button
+                        onClick={() => setProviderPage(p => Math.max(0, p - 1))}
+                        disabled={providerPage === 0}
+                        style={{
+                            width: '32px',
+                            height: '32px',
+                            borderRadius: '50%',
+                            border: 'none',
+                            background: providerPage === 0 ? 'transparent' : 'rgba(139, 92, 246, 0.1)',
+                            cursor: providerPage === 0 ? 'default' : 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'all 0.2s ease',
+                            opacity: providerPage === 0 ? 0.3 : 1,
+                            flexShrink: 0,
+                        }}
+                        onMouseEnter={(e) => {
+                            if (providerPage > 0) {
+                                e.currentTarget.style.background = 'rgba(139, 92, 246, 0.2)';
+                                e.currentTarget.style.transform = 'scale(1.1)';
+                            }
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = providerPage === 0 ? 'transparent' : 'rgba(139, 92, 246, 0.1)';
+                            e.currentTarget.style.transform = 'scale(1)';
+                        }}
+                    >
+                        <ChevronLeft size={18} style={{ color: '#8b5cf6' }} />
+                    </button>
 
-                {/* Provider Dropdown Menu */}
-                {providerDropdownOpen && (
+                    {/* Provider Cards */}
                     <div style={{
-                        position: 'absolute',
-                        top: 'calc(100% + 4px)',
-                        left: 0,
-                        right: 0,
-                        backgroundColor: 'rgba(22, 22, 24, 0.98)',
-                        backdropFilter: 'blur(20px)',
-                        WebkitBackdropFilter: 'blur(20px)',
-                        borderRadius: '12px',
-                        border: '1px solid rgba(255, 255, 255, 0.08)',
-                        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
-                        overflow: 'hidden',
-                        zIndex: 100,
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(2, 1fr)',
+                        gap: '10px',
+                        flex: 1,
                     }}>
-                        {Object.entries(PROVIDER_INFO).map(([key, info]) => (
-                            <button
-                                key={key}
-                                onClick={() => handleProviderChange(key as AIProvider)}
-                                style={{
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '12px',
-                                    width: '100%',
-                                    padding: '12px 14px',
-                                    backgroundColor: 'transparent',
-                                    border: 'none',
-                                    cursor: 'pointer',
-                                    textAlign: 'left',
-                                    transition: 'background-color 0.15s ease',
-                                }}
-                                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.06)'}
-                                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
-                            >
-                                <div style={{
-                                    width: '32px',
-                                    height: '32px',
-                                    borderRadius: '8px',
-                                    backgroundColor: `${info.color}20`,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                }}>
-                                    <Cpu size={16} style={{ color: info.color }} />
-                                </div>
-                                <div style={{ flex: 1 }}>
-                                    <div style={{ fontSize: '13px', fontWeight: 500, color: '#e4e4e7' }}>
-                                        {info.name}
+                        {currentProviders.map(([key, info]) => {
+                            const isSelected = key === selectedProvider;
+
+                            return (
+                                <button
+                                    key={key}
+                                    onClick={() => handleProviderChange(key as AIProvider)}
+                                    style={{
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'flex-start',
+                                        gap: '8px',
+                                        padding: '12px',
+                                        backgroundColor: isSelected
+                                            ? 'rgba(139, 92, 246, 0.1)'
+                                            : 'var(--gai-bg-secondary)',
+                                        border: isSelected
+                                            ? '2px solid transparent'
+                                            : '1px solid var(--gai-border-color)',
+                                        borderRadius: '12px',
+                                        cursor: 'pointer',
+                                        textAlign: 'left',
+                                        transition: 'all 0.2s ease',
+                                        position: 'relative',
+                                        background: isSelected
+                                            ? 'linear-gradient(var(--gai-bg-primary), var(--gai-bg-primary)) padding-box, linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%) border-box'
+                                            : 'var(--gai-bg-secondary)',
+                                        boxShadow: isSelected
+                                            ? '0 4px 16px rgba(139, 92, 246, 0.25), inset 0 0 0 1px rgba(139, 92, 246, 0.1)'
+                                            : 'none',
+                                    }}
+                                    onMouseEnter={(e) => {
+                                        if (!isSelected) {
+                                            e.currentTarget.style.transform = 'translateY(-2px)';
+                                            e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.4)';
+                                            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
+                                        }
+                                    }}
+                                    onMouseLeave={(e) => {
+                                        if (!isSelected) {
+                                            e.currentTarget.style.transform = 'translateY(0)';
+                                            e.currentTarget.style.borderColor = 'var(--gai-border-color)';
+                                            e.currentTarget.style.boxShadow = 'none';
+                                        }
+                                    }}
+                                >
+                                    {/* Selection indicator */}
+                                    {isSelected && (
+                                        <div style={{
+                                            position: 'absolute',
+                                            top: '8px',
+                                            right: '8px',
+                                            width: '18px',
+                                            height: '18px',
+                                            borderRadius: '50%',
+                                            background: 'linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }}>
+                                            <Check size={10} style={{ color: '#ffffff' }} />
+                                        </div>
+                                    )}
+
+                                    {/* Icon */}
+                                    <div style={{
+                                        width: '32px',
+                                        height: '32px',
+                                        borderRadius: '8px',
+                                        backgroundColor: `${info.color}15`,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        border: `1px solid ${info.color}30`,
+                                    }}>
+                                        <ProviderIcon provider={key as AIProvider} size={20} />
                                     </div>
-                                    <div style={{ fontSize: '11px', color: 'rgba(228, 228, 231, 0.5)' }}>
-                                        {info.description}
+
+                                    {/* Text */}
+                                    <div>
+                                        <div style={{
+                                            fontSize: '13px',
+                                            fontWeight: 600,
+                                            color: 'var(--gai-text-color)',
+                                            marginBottom: '1px',
+                                        }}>
+                                            {info.name}
+                                        </div>
+                                        <div style={{
+                                            fontSize: '10px',
+                                            color: 'var(--gai-text-muted)',
+                                            lineHeight: 1.2,
+                                        }}>
+                                            {info.description}
+                                        </div>
                                     </div>
-                                </div>
-                                {key === selectedProvider && <Check size={16} style={{ color: '#10b981' }} />}
-                            </button>
+                                </button>
+                            );
+                        })}
+                        {/* Empty placeholders for grid alignment when less than 2 providers */}
+                        {Array.from({ length: Math.max(0, providersPerPage - currentProviders.length) }).map((_, i) => (
+                            <div key={`empty-${i}`} style={{
+                                borderRadius: '12px',
+                                border: '1px dashed rgba(139, 92, 246, 0.15)',
+                                backgroundColor: 'transparent',
+                                minHeight: '90px',
+                            }} />
                         ))}
                     </div>
-                )}
+
+                    {/* Right Arrow with pulse animation */}
+                    <button
+                        onClick={() => setProviderPage(p => Math.min(totalPages - 1, p + 1))}
+                        disabled={providerPage >= totalPages - 1}
+                        className={providerPage < totalPages - 1 ? 'gai-pulse-arrow' : ''}
+                        style={{
+                            width: '32px',
+                            height: '32px',
+                            borderRadius: '50%',
+                            border: 'none',
+                            background: providerPage >= totalPages - 1 ? 'transparent' : 'linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%)',
+                            cursor: providerPage >= totalPages - 1 ? 'default' : 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'all 0.2s ease',
+                            opacity: providerPage >= totalPages - 1 ? 0.3 : 1,
+                            flexShrink: 0,
+                            boxShadow: providerPage < totalPages - 1 ? '0 0 0 0 rgba(139, 92, 246, 0.4)' : 'none',
+                        }}
+                        onMouseEnter={(e) => {
+                            if (providerPage < totalPages - 1) {
+                                e.currentTarget.style.background = 'linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(99, 102, 241, 0.3) 100%)';
+                                e.currentTarget.style.transform = 'scale(1.15)';
+                            }
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = providerPage >= totalPages - 1 ? 'transparent' : 'linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%)';
+                            e.currentTarget.style.transform = 'scale(1)';
+                        }}
+                    >
+                        <ChevronRight size={18} style={{ color: '#8b5cf6' }} />
+                    </button>
+                </div>
+
+                {/* Pulse animation keyframes */}
+                <style>{`
+                    @keyframes gai-pulse {
+                        0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
+                        70% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
+                        100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
+                    }
+                    .gai-pulse-arrow {
+                        animation: gai-pulse 2s infinite;
+                    }
+                `}</style>
             </div>
 
             {/* API Key */}
@@ -377,6 +639,28 @@ const SettingsTab: React.FC = () => {
                     <ExternalLink size={12} />
                     Get your API key
                 </a>
+                {/* Provider-specific warning */}
+                {providerInfo.warning && (
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: '8px',
+                        marginTop: '12px',
+                        padding: '10px 12px',
+                        backgroundColor: 'rgba(251, 191, 36, 0.1)',
+                        border: '1px solid rgba(251, 191, 36, 0.2)',
+                        borderRadius: '8px',
+                    }}>
+                        <AlertTriangle size={14} style={{ color: '#f59e0b', flexShrink: 0, marginTop: '1px' }} />
+                        <span style={{
+                            fontSize: '12px',
+                            color: 'var(--gai-text-muted)',
+                            lineHeight: 1.4,
+                        }}>
+                            {providerInfo.warning}
+                        </span>
+                    </div>
+                )}
             </div>
 
             {/* Model Dropdown */}
@@ -621,31 +905,236 @@ const SettingsTab: React.FC = () => {
                 </div>
 
                 {cacheStats && cacheStats.count > 0 && (
-                    <button
-                        onClick={handleClearCache}
-                        disabled={clearing}
-                        style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            gap: '8px',
-                            width: '100%',
-                            marginTop: '12px',
-                            padding: '10px 16px',
-                            fontSize: '13px',
-                            fontWeight: 500,
-                            color: '#f85149',
-                            backgroundColor: 'transparent',
-                            border: '1px solid rgba(248, 81, 73, 0.3)',
-                            borderRadius: '8px',
-                            cursor: clearing ? 'wait' : 'pointer',
-                        }}
-                        onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(248, 81, 73, 0.08)'}
-                        onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
-                    >
-                        {clearing ? <Loader2 size={14} className="gai-spinner" /> : <Trash2 size={14} />}
-                        {clearing ? 'Clearing...' : 'Clear Cache'}
-                    </button>
+                    <div style={{ marginTop: '16px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                        {/* Current repo quick delete */}
+                        {isCurrentRepoCached && repoInfo && (
+                            <button
+                                onClick={handleDeleteCurrentRepo}
+                                disabled={deletingRepos}
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    width: '100%',
+                                    padding: '10px 14px',
+                                    fontSize: '13px',
+                                    fontWeight: 500,
+                                    color: '#f59e0b',
+                                    backgroundColor: 'rgba(245, 158, 11, 0.08)',
+                                    border: '1px solid rgba(245, 158, 11, 0.3)',
+                                    borderRadius: '8px',
+                                    cursor: deletingRepos ? 'wait' : 'pointer',
+                                    textAlign: 'left',
+                                }}
+                                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(245, 158, 11, 0.12)'}
+                                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(245, 158, 11, 0.08)'}
+                            >
+                                {deletingRepos ? <Loader2 size={14} className="gai-spinner" /> : <Trash2 size={14} />}
+                                <span style={{ flex: 1 }}>
+                                    Delete cache for <strong>{repoInfo.owner}/{repoInfo.repo}</strong>
+                                </span>
+                            </button>
+                        )}
+
+                        {/* Multi-select dropdown for other repos */}
+                        {cachedRepos.length > 1 && (
+                            <div style={{ position: 'relative' }}>
+                                <button
+                                    onClick={() => setShowRepoDropdown(!showRepoDropdown)}
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        width: '100%',
+                                        padding: '10px 14px',
+                                        fontSize: '13px',
+                                        fontWeight: 500,
+                                        color: 'var(--gai-text-color)',
+                                        backgroundColor: 'var(--gai-bg-secondary)',
+                                        border: '1px solid var(--gai-border-color)',
+                                        borderRadius: '8px',
+                                        cursor: 'pointer',
+                                    }}
+                                >
+                                    <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <Database size={14} style={{ color: '#8b5cf6' }} />
+                                        Select repositories ({selectedRepos.size} selected)
+                                    </span>
+                                    <ChevronDown size={14} style={{
+                                        color: 'var(--gai-text-muted)',
+                                        transform: showRepoDropdown ? 'rotate(180deg)' : 'rotate(0deg)',
+                                        transition: 'transform 0.2s ease',
+                                    }} />
+                                </button>
+
+                                {/* Dropdown */}
+                                {showRepoDropdown && (
+                                    <div style={{
+                                        position: 'absolute',
+                                        top: '100%',
+                                        left: 0,
+                                        right: 0,
+                                        marginTop: '4px',
+                                        backgroundColor: 'var(--gai-bg-primary)',
+                                        border: '1px solid var(--gai-border-color)',
+                                        borderRadius: '8px',
+                                        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.2)',
+                                        zIndex: 100,
+                                        maxHeight: '200px',
+                                        overflowY: 'auto',
+                                    }}>
+                                        {/* Select All */}
+                                        <button
+                                            onClick={toggleSelectAll}
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '10px',
+                                                width: '100%',
+                                                padding: '10px 12px',
+                                                fontSize: '12px',
+                                                fontWeight: 600,
+                                                color: '#8b5cf6',
+                                                backgroundColor: 'transparent',
+                                                border: 'none',
+                                                borderBottom: '1px solid var(--gai-border-muted)',
+                                                cursor: 'pointer',
+                                                textAlign: 'left',
+                                            }}
+                                            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'}
+                                            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                                        >
+                                            <div style={{
+                                                width: '16px',
+                                                height: '16px',
+                                                borderRadius: '4px',
+                                                border: '2px solid #8b5cf6',
+                                                backgroundColor: selectedRepos.size === cachedRepos.length ? '#8b5cf6' : 'transparent',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                            }}>
+                                                {selectedRepos.size === cachedRepos.length && <Check size={10} style={{ color: '#fff' }} />}
+                                            </div>
+                                            {selectedRepos.size === cachedRepos.length ? 'Deselect All' : 'Select All'}
+                                        </button>
+
+                                        {/* Repo list */}
+                                        {cachedRepos.map((repo) => {
+                                            const repoKey = `${repo.fullName}:${repo.branch}`;
+                                            const isSelected = selectedRepos.has(repoKey);
+                                            const isCurrent = repoKey === currentRepoKey;
+
+                                            return (
+                                                <button
+                                                    key={repoKey}
+                                                    onClick={() => toggleRepoSelection(repoKey)}
+                                                    style={{
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: '10px',
+                                                        width: '100%',
+                                                        padding: '8px 12px',
+                                                        fontSize: '12px',
+                                                        color: 'var(--gai-text-color)',
+                                                        backgroundColor: 'transparent',
+                                                        border: 'none',
+                                                        cursor: 'pointer',
+                                                        textAlign: 'left',
+                                                    }}
+                                                    onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.05)'}
+                                                    onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                                                >
+                                                    <div style={{
+                                                        width: '16px',
+                                                        height: '16px',
+                                                        borderRadius: '4px',
+                                                        border: isSelected ? '2px solid #8b5cf6' : '1px solid var(--gai-border-color)',
+                                                        backgroundColor: isSelected ? '#8b5cf6' : 'transparent',
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        flexShrink: 0,
+                                                    }}>
+                                                        {isSelected && <Check size={10} style={{ color: '#fff' }} />}
+                                                    </div>
+                                                    <div style={{ flex: 1, minWidth: 0 }}>
+                                                        <div style={{
+                                                            fontSize: '12px',
+                                                            fontWeight: 500,
+                                                            overflow: 'hidden',
+                                                            textOverflow: 'ellipsis',
+                                                            whiteSpace: 'nowrap',
+                                                        }}>
+                                                            {repo.fullName}
+                                                            {isCurrent && <span style={{ color: '#10b981', marginLeft: '6px', fontSize: '10px' }}>• current</span>}
+                                                        </div>
+                                                        <div style={{ fontSize: '10px', color: 'var(--gai-text-muted)' }}>
+                                                            {repo.branch} · {formatBytes(repo.sizeBytes)}
+                                                        </div>
+                                                    </div>
+                                                </button>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {/* Delete selected button */}
+                        {selectedRepos.size > 0 && (
+                            <button
+                                onClick={handleDeleteSelectedRepos}
+                                disabled={deletingRepos}
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    gap: '8px',
+                                    width: '100%',
+                                    padding: '10px 16px',
+                                    fontSize: '13px',
+                                    fontWeight: 500,
+                                    color: '#fff',
+                                    backgroundColor: '#f85149',
+                                    border: 'none',
+                                    borderRadius: '8px',
+                                    cursor: deletingRepos ? 'wait' : 'pointer',
+                                }}
+                                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#da3633'}
+                                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#f85149'}
+                            >
+                                {deletingRepos ? <Loader2 size={14} className="gai-spinner" /> : <Trash2 size={14} />}
+                                Delete {selectedRepos.size} selected {selectedRepos.size === 1 ? 'repository' : 'repositories'}
+                            </button>
+                        )}
+
+                        {/* Clear all cache */}
+                        <button
+                            onClick={handleClearCache}
+                            disabled={clearing}
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '8px',
+                                width: '100%',
+                                padding: '10px 16px',
+                                fontSize: '13px',
+                                fontWeight: 500,
+                                color: 'var(--gai-text-muted)',
+                                backgroundColor: 'transparent',
+                                border: '1px solid var(--gai-border-muted)',
+                                borderRadius: '8px',
+                                cursor: clearing ? 'wait' : 'pointer',
+                            }}
+                            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--gai-bg-secondary)'}
+                            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                        >
+                            {clearing ? <Loader2 size={14} className="gai-spinner" /> : <Trash2 size={14} />}
+                            {clearing ? 'Clearing all...' : 'Clear all cache'}
+                        </button>
+                    </div>
                 )}
             </div>
         </div>
diff --git a/src/content/components/ThinkingBox.tsx b/src/content/components/ThinkingBox.tsx
index e8c6008..6c2d40c 100644
--- a/src/content/components/ThinkingBox.tsx
+++ b/src/content/components/ThinkingBox.tsx
@@ -5,6 +5,7 @@ interface ThinkingBoxProps {
     thinking?: string;
     isLoading?: boolean;
     defaultExpanded?: boolean;
+    isThinking?: boolean;
 }
 
 /**
@@ -15,10 +16,21 @@ interface ThinkingBoxProps {
 const ThinkingBox: React.FC<ThinkingBoxProps> = ({
     thinking,
     isLoading = false,
-    defaultExpanded = false
+    defaultExpanded = false,
+    isThinking = false
 }) => {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
+    // Auto-expand/collapse based on thinking state
+    React.useEffect(() => {
+        if (isThinking) {
+            setIsExpanded(true);
+        } else if (thinking && !isThinking) {
+            // Collapse when thinking completes
+            setIsExpanded(false);
+        }
+    }, [isThinking, thinking]);
+
     // If no thinking and not loading, render nothing
     if (!thinking && !isLoading) return null;
 
@@ -58,7 +70,7 @@ const ThinkingBox: React.FC<ThinkingBoxProps> = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    {isLoading ? (
+                    {isLoading || isThinking ? (
                         <Loader2 size={14} style={{ color: '#a78bfa' }} className="gai-spinner" />
                     ) : (
                         <Brain size={14} style={{ color: '#a78bfa' }} />
@@ -72,7 +84,7 @@ const ThinkingBox: React.FC<ThinkingBoxProps> = ({
                     fontWeight: 500,
                     color: '#a78bfa',
                 }}>
-                    {isLoading ? 'Thinking...' : 'Reasoning'}
+                    {isLoading ? 'Thinking...' : (isThinking ? 'Reasoning...' : 'Reasoning')}
                 </span>
 
                 {/* Expand/Collapse Icon - only show if not loading and has content */}
@@ -86,7 +98,7 @@ const ThinkingBox: React.FC<ThinkingBoxProps> = ({
                 )}
 
                 {/* Loading pulse dots */}
-                {isLoading && (
+                {(isLoading || isThinking) && (
                     <div style={{ display: 'flex', gap: '4px' }}>
                         {[0, 1, 2].map((i) => (
                             <div
diff --git a/src/content/hooks/useAnalysis.ts b/src/content/hooks/useAnalysis.ts
index 3602e05..83cbaac 100644
--- a/src/content/hooks/useAnalysis.ts
+++ b/src/content/hooks/useAnalysis.ts
@@ -14,8 +14,31 @@ const PROVIDER_NAMES: Record<string, string> = {
     claude: 'Claude',
     huggingface: 'HuggingFace',
     openrouter: 'OpenRouter',
+    openai: 'OpenAI',
 };
 
+// Throttle settings
+const THROTTLE_COOLDOWN_MS = 30000; // 30 seconds
+const THROTTLE_MAX_REQUESTS = 2;
+const THROTTLE_STORAGE_KEY = 'codemind-throttle';
+
+function getThrottleState(): { requests: number[] } {
+    try {
+        const data = localStorage.getItem(THROTTLE_STORAGE_KEY);
+        return data ? JSON.parse(data) : { requests: [] };
+    } catch {
+        return { requests: [] };
+    }
+}
+
+function saveThrottleState(state: { requests: number[] }): void {
+    try {
+        localStorage.setItem(THROTTLE_STORAGE_KEY, JSON.stringify(state));
+    } catch {
+        // Ignore storage errors
+    }
+}
+
 interface AnalysisStore extends AnalysisState, ChatState {
     // Repository info
     repoInfo: RepositoryInfo | null;
@@ -29,6 +52,10 @@ interface AnalysisStore extends AnalysisState, ChatState {
     // Active tab
     activeTab: 'home' | 'settings';
 
+    // Throttle state
+    cooldownRemaining: number;
+    setCooldownRemaining: (ms: number) => void;
+
     // Actions
     setRepoInfo: (info: RepositoryInfo) => void;
     startAnalysis: (forceRefresh?: boolean) => void;
@@ -42,6 +69,7 @@ interface AnalysisStore extends AnalysisState, ChatState {
     saveSettings: (settings: ExtensionSettings) => Promise<boolean>;
     saveGitHubToken: (token: string) => Promise<boolean>;
     clearCache: () => Promise<boolean>;
+    deleteCurrentRepoCache: () => Promise<boolean>;
     sendChatMessage: (message: string) => void;
     reset: () => void;
 }
@@ -68,6 +96,10 @@ export const useAnalysisStore = create<AnalysisStore>((set, get) => ({
     chatStreamingContent: '',
     chatError: null,
 
+    // Throttle state
+    cooldownRemaining: 0,
+    setCooldownRemaining: (ms) => set({ cooldownRemaining: ms }),
+
     // Actions
     setRepoInfo: (info) => set({ repoInfo: info }),
 
@@ -174,6 +206,42 @@ export const useAnalysisStore = create<AnalysisStore>((set, get) => ({
         }
     },
 
+    deleteCurrentRepoCache: async () => {
+        const { repoInfo } = get();
+        if (!repoInfo) return false;
+
+        try {
+            await new Promise<void>((resolve, reject) => {
+                chrome.runtime.sendMessage({
+                    type: 'DELETE_REPO_CACHE',
+                    data: {
+                        fullName: `${repoInfo.owner}/${repoInfo.repo}`,
+                        branch: repoInfo.branch
+                    }
+                }, (response) => {
+                    if (response?.error) reject(new Error(response.error));
+                    else resolve();
+                });
+            });
+            // Reset state (same as clearCache)
+            set({
+                hasCachedAnalysis: false,
+                status: 'idle',
+                analysis: null,
+                streamingContent: '',
+                error: null,
+                chatMessages: [],
+                chatStatus: 'idle',
+                chatStreamingContent: '',
+                chatError: null,
+            });
+            return true;
+        } catch (error) {
+            console.error('Failed to delete repo cache:', error);
+            return false;
+        }
+    },
+
     saveGitHubToken: async (token: string) => {
         const { settings, saveSettings } = get();
         if (!settings) return false;
@@ -236,9 +304,26 @@ export const useAnalysisStore = create<AnalysisStore>((set, get) => ({
     },
 
     startAnalysis: async (forceRefresh = false) => {
-        const { repoInfo, hasApiKey, hasCachedAnalysis, settings } = get();
+        const { repoInfo, hasApiKey, hasCachedAnalysis, settings, setCooldownRemaining } = get();
         if (!repoInfo) return;
 
+        // Check throttle state (only for non-cached requests)
+        const now = Date.now();
+        const throttle = getThrottleState();
+        const recentRequests = throttle.requests.filter(
+            (t: number) => now - t < THROTTLE_COOLDOWN_MS
+        );
+
+        // If not just loading from cache, check throttle
+        if (forceRefresh || !hasCachedAnalysis) {
+            if (recentRequests.length >= THROTTLE_MAX_REQUESTS) {
+                const oldestRequest = Math.min(...recentRequests);
+                const remaining = THROTTLE_COOLDOWN_MS - (now - oldestRequest);
+                setCooldownRemaining(remaining);
+                return;
+            }
+        }
+
         // For forceRefresh, check API key directly from settings
         let apiKeyValid = hasApiKey;
         if (forceRefresh && settings) {
@@ -262,6 +347,9 @@ export const useAnalysisStore = create<AnalysisStore>((set, get) => ({
             return;
         }
 
+        // Track this request for throttling
+        saveThrottleState({ requests: [...recentRequests, now] });
+
         // Clear current analysis when regenerating
         set({
             status: 'loading',
diff --git a/src/content/index.tsx b/src/content/index.tsx
index 367124d..c9401c5 100644
--- a/src/content/index.tsx
+++ b/src/content/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import App from './App';
 import './styles/global.css';
+import { scrapeRepositoryMetadata, scrapeDefaultBranch } from './utils/domScraper';
 
 // Configuration
 const INJECTION_TIMEOUT = 500;
@@ -26,8 +27,8 @@ function isRepositoryPage(): boolean {
     return !!repoNav;
 }
 
-// Extract repository information from the page URL
-function extractRepoInfo(): { owner: string; repo: string; branch: string } | null {
+// Extract repository information from the page URL and DOM
+function extractRepoInfo(): { owner: string; repo: string; branch: string; scrapedMetadata: ReturnType<typeof scrapeRepositoryMetadata> } | null {
     const pathParts = window.location.pathname.split('/').filter(Boolean);
 
     if (pathParts.length < 2) return null;
@@ -42,13 +43,13 @@ function extractRepoInfo(): { owner: string; repo: string; branch: string } | nu
         branch = pathParts[3];
     } else {
         // Try to get from DOM
-        const branchSelector = document.querySelector('[data-hotkey="w"] span.Text-sc-17v1xeu-0, #branch-select-menu span');
-        if (branchSelector) {
-            branch = branchSelector.textContent?.trim() || 'main';
-        }
+        branch = scrapeDefaultBranch();
     }
 
-    return { owner, repo, branch };
+    // Scrape metadata from the GitHub page DOM (no API needed!)
+    const scrapedMetadata = scrapeRepositoryMetadata();
+
+    return { owner, repo, branch, scrapedMetadata };
 }
 
 // Find the repository navigation bar (where Code, Issues, Pull requests, Insights are)
diff --git a/src/content/utils/domScraper.ts b/src/content/utils/domScraper.ts
new file mode 100644
index 0000000..7b97d35
--- /dev/null
+++ b/src/content/utils/domScraper.ts
@@ -0,0 +1,190 @@
+/**
+ * DOM Scraper for extracting repository metadata from GitHub pages
+ * This avoids using the GitHub API and its rate limits
+ */
+
+export interface ScrapedMetadata {
+    description: string | null;
+    stars: number;
+    forks: number;
+    watchers: number;
+    topics: string[];
+    language: string | null;
+    license: string | null;
+    isArchived: boolean;
+    isFork: boolean;
+}
+
+/**
+ * Safely parse a number from text, handling K/M suffixes
+ */
+function parseCount(text: string | null | undefined): number {
+    if (!text) return 0;
+    const cleaned = text.trim().toLowerCase();
+
+    // Handle K (thousands) and M (millions) suffixes
+    if (cleaned.endsWith('k')) {
+        return Math.round(parseFloat(cleaned) * 1000);
+    }
+    if (cleaned.endsWith('m')) {
+        return Math.round(parseFloat(cleaned) * 1000000);
+    }
+
+    // Remove commas and parse
+    return parseInt(cleaned.replace(/,/g, ''), 10) || 0;
+}
+
+/**
+ * Scrape repository metadata from the current GitHub page DOM
+ */
+export function scrapeRepositoryMetadata(): ScrapedMetadata {
+    const metadata: ScrapedMetadata = {
+        description: null,
+        stars: 0,
+        forks: 0,
+        watchers: 0,
+        topics: [],
+        language: null,
+        license: null,
+        isArchived: false,
+        isFork: false,
+    };
+
+    try {
+        // Description - multiple selectors for different GitHub layouts
+        const descriptionSelectors = [
+            '.f4.my-3',
+            '[data-testid="about-panel"] p',
+            '.BorderGrid-cell p.f4',
+            '.repository-content .f4',
+            'meta[name="description"]',
+        ];
+        for (const selector of descriptionSelectors) {
+            const el = document.querySelector(selector);
+            if (el) {
+                metadata.description = el instanceof HTMLMetaElement
+                    ? el.content
+                    : el.textContent?.trim() || null;
+                if (metadata.description) break;
+            }
+        }
+
+        // Stars - look for star counter
+        const starSelectors = [
+            '#repo-stars-counter-star',
+            'a[href$="/stargazers"] .Counter',
+            'a[href$="/stargazers"] span.Counter',
+            '[data-view-component="true"].Counter--primary',
+        ];
+        for (const selector of starSelectors) {
+            const el = document.querySelector(selector);
+            if (el?.textContent) {
+                metadata.stars = parseCount(el.textContent);
+                if (metadata.stars > 0) break;
+            }
+        }
+
+        // Forks - look for fork counter
+        const forkSelectors = [
+            '#repo-network-counter',
+            'a[href$="/forks"] .Counter',
+            'a[href$="/network/members"] .Counter',
+        ];
+        for (const selector of forkSelectors) {
+            const el = document.querySelector(selector);
+            if (el?.textContent) {
+                metadata.forks = parseCount(el.textContent);
+                if (metadata.forks > 0) break;
+            }
+        }
+
+        // Watchers - look for watch counter
+        const watchSelectors = [
+            'a[href$="/watchers"] .Counter',
+            '#repo-watchers-counter',
+        ];
+        for (const selector of watchSelectors) {
+            const el = document.querySelector(selector);
+            if (el?.textContent) {
+                metadata.watchers = parseCount(el.textContent);
+                if (metadata.watchers > 0) break;
+            }
+        }
+
+        // Topics - get all topic tags
+        const topicElements = document.querySelectorAll('.topic-tag, a[data-octo-click="topic_click"]');
+        metadata.topics = Array.from(topicElements)
+            .map(el => el.textContent?.trim() || '')
+            .filter(Boolean);
+
+        // Language - from the language bar or about section
+        const langSelectors = [
+            '.BorderGrid-cell [data-ga-click*="language"]',
+            '.repository-lang-stats-graph span[aria-label]',
+            '.Layout-sidebar .h4.mb-3 + ul li span.color-fg-default',
+        ];
+        for (const selector of langSelectors) {
+            const el = document.querySelector(selector);
+            if (el) {
+                // Handle aria-label format like "Python 45.2%"
+                const ariaLabel = el.getAttribute('aria-label');
+                if (ariaLabel) {
+                    metadata.language = ariaLabel.split(/\s+/)[0] || null;
+                } else {
+                    metadata.language = el.textContent?.trim().split(/\s+/)[0] || null;
+                }
+                if (metadata.language) break;
+            }
+        }
+
+        // License - look for license info
+        const licenseSelectors = [
+            '.octicon-law + span',
+            'a[href$="/blob/main/LICENSE"] span',
+            'a[href$="/blob/master/LICENSE"] span',
+            '.BorderGrid-cell .octicon-law',
+        ];
+        for (const selector of licenseSelectors) {
+            const el = document.querySelector(selector);
+            if (el) {
+                // If it's the octicon, get parent's text
+                const parent = el.closest('a, div');
+                metadata.license = parent?.textContent?.trim() || el.textContent?.trim() || null;
+                if (metadata.license) break;
+            }
+        }
+
+        // Check if archived
+        metadata.isArchived = !!document.querySelector('.Label--attention, .flash-warn:has(.octicon-archive)');
+
+        // Check if fork
+        metadata.isFork = !!document.querySelector('.octicon-repo-forked, a[data-hovercard-type="repository"]:has(.octicon-repo-forked)');
+
+        console.log('[CodeMind] Scraped metadata:', metadata);
+    } catch (error) {
+        console.error('[CodeMind] Error scraping metadata:', error);
+    }
+
+    return metadata;
+}
+
+/**
+ * Get the default branch from DOM elements
+ */
+export function scrapeDefaultBranch(): string {
+    const branchSelectors = [
+        '[data-hotkey="w"] span.Text-sc-17v1xeu-0',
+        '#branch-select-menu span.css-truncate-target',
+        'summary[data-menu-button] span.css-truncate-target',
+        '.branch-select-menu span.css-truncate-target',
+    ];
+
+    for (const selector of branchSelectors) {
+        const el = document.querySelector(selector);
+        if (el?.textContent?.trim()) {
+            return el.textContent.trim();
+        }
+    }
+
+    return 'main'; // Default fallback
+}
diff --git a/src/content/utils/fileTreeScraper.ts b/src/content/utils/fileTreeScraper.ts
new file mode 100644
index 0000000..ec0b75b
--- /dev/null
+++ b/src/content/utils/fileTreeScraper.ts
@@ -0,0 +1,111 @@
+/**
+ * Scrape file tree from GitHub repository page DOM
+ * This avoids API calls and rate limits
+ */
+
+export interface ScrapedFile {
+    path: string;
+    type: 'file' | 'directory';
+    size?: string;
+}
+
+/**
+ * Scrape visible file tree from GitHub page
+ */
+export function scrapeFileTree(): ScrapedFile[] {
+    const files: ScrapedFile[] = [];
+
+    try {
+        // GitHub uses different selectors depending on UI version
+        const selectors = [
+            '.js-navigation-item',              // Classic GitHub
+            '[data-testid="tree-row"]',         // New GitHub UI
+            '.Box-row',                          // Alternative
+        ];
+
+        let rows: NodeListOf<Element> | null = null;
+
+        for (const selector of selectors) {
+            rows = document.querySelectorAll(selector);
+            if (rows.length > 0) break;
+        }
+
+        if (!rows || rows.length === 0) {
+            console.warn('[FileTreeScraper] No file rows found');
+            return [];
+        }
+
+        rows.forEach(row => {
+            try {
+                // Get file link
+                const link = row.querySelector('a[class*="Link"], a.js-navigation-open');
+                if (!link) return;
+
+                // Extract path from href
+                const href = link.getAttribute('href');
+                if (!href) return;
+
+                // Detect if it's a directory or file
+                const isDirectory = href.includes('/tree/') ||
+                    row.querySelector('[aria-label*="Directory"]') !== null ||
+                    row.querySelector('.octicon-file-directory') !== null;
+
+                const isFile = href.includes('/blob/');
+
+                if (!isDirectory && !isFile) return;
+
+                // Extract path
+                let path: string | null = null;
+
+                if (isDirectory) {
+                    const match = href.match(/\/tree\/[^/]+\/(.+)/);
+                    path = match ? match[1] : null;
+                } else if (isFile) {
+                    const match = href.match(/\/blob\/[^/]+\/(.+)/);
+                    path = match ? match[1] : null;
+                }
+
+                if (!path) return;
+
+                // Get size if available (only for files)
+                let size: string | undefined;
+                if (isFile) {
+                    const sizeEl = row.querySelector('[data-test-selector="file-size"], .flex-auto span');
+                    size = sizeEl?.textContent?.trim();
+                }
+
+                files.push({
+                    path: decodeURIComponent(path),
+                    type: isDirectory ? 'directory' : 'file',
+                    size,
+                });
+            } catch (error) {
+                console.warn('[FileTreeScraper] Error parsing row:', error);
+            }
+        });
+
+        console.log(`[FileTreeScraper] Scraped ${files.length} items from DOM`);
+    } catch (error) {
+        console.error('[FileTreeScraper] Error scraping file tree:', error);
+    }
+
+    return files;
+}
+
+/**
+ * Convert size string to bytes (approximate)
+ */
+export function sizeToBytes(sizeStr: string): number {
+    const match = sizeStr.match(/^([\d.]+)\s*(KB|MB|GB|Bytes?)$/i);
+    if (!match) return 2000; // Default
+
+    const value = parseFloat(match[1]);
+    const unit = match[2].toUpperCase();
+
+    switch (unit) {
+        case 'KB': return Math.round(value * 1024);
+        case 'MB': return Math.round(value * 1024 * 1024);
+        case 'GB': return Math.round(value * 1024 * 1024 * 1024);
+        default: return Math.round(value);
+    }
+}
diff --git a/src/content/utils/thinkingParser.ts b/src/content/utils/thinkingParser.ts
index 719b074..c228f7c 100644
--- a/src/content/utils/thinkingParser.ts
+++ b/src/content/utils/thinkingParser.ts
@@ -7,30 +7,30 @@ export interface ParsedContent {
     thinking: string | null;
     content: string;
     hasThinking: boolean;
+    isComplete: boolean;
 }
 
 /**
  * Parse content for thinking blocks
  * Handles formats:
- * - <think>...</think>
- * - <thinking>...</thinking>
+ * - <think>...</think> (Completed)
+ * - <thinking>...</thinking> (Completed)
+ * - <think>... (Streaming/Incomplete)
  */
 export function parseThinkingContent(text: string): ParsedContent {
     if (!text) {
-        return { thinking: null, content: '', hasThinking: false };
+        return { thinking: null, content: '', hasThinking: false, isComplete: true };
     }
 
-    // Match <think>...</think> or <thinking>...</thinking>
-    const thinkingRegex = /<think(?:ing)?>([\s\S]*?)<\/think(?:ing)?>/gi;
+    // 1. Check for complete thinking blocks first
+    const completeThinkingRegex = /<think(?:ing)?>([\s\S]*?)<\/think(?:ing)?>/gi;
+    const completeMatches = text.match(completeThinkingRegex);
 
-    let thinking: string | null = null;
-    const matches = text.match(thinkingRegex);
-
-    if (matches && matches.length > 0) {
-        // Extract all thinking content
+    if (completeMatches && completeMatches.length > 0) {
+        let thinking = '';
         const thinkingParts: string[] = [];
 
-        for (const match of matches) {
+        for (const match of completeMatches) {
             const innerContent = match
                 .replace(/<think(?:ing)?>/gi, '')
                 .replace(/<\/think(?:ing)?>/gi, '')
@@ -44,17 +44,40 @@ export function parseThinkingContent(text: string): ParsedContent {
         if (thinkingParts.length > 0) {
             thinking = thinkingParts.join('\n\n');
         }
+
+        const cleanContent = text.replace(completeThinkingRegex, '').trim();
+
+        return {
+            thinking: thinking || null,
+            content: cleanContent,
+            hasThinking: thinkingParts.length > 0,
+            isComplete: true
+        };
     }
 
-    // Remove thinking blocks from content
-    const cleanContent = text
-        .replace(thinkingRegex, '')
-        .trim();
+    // 2. Check for incomplete/streaming thinking block
+    // Matches <think> or <thinking> followed by anything until end of string (since we checked for closing tags above)
+    const incompleteThinkingRegex = /<think(?:ing)?>([\s\S]*)$/i;
+    const incompleteMatch = text.match(incompleteThinkingRegex);
+
+    if (incompleteMatch) {
+        const rawThinking = incompleteMatch[1].trim(); // Content after the opening tag
+        const cleanContent = text.replace(incompleteThinkingRegex, '').trim();
+
+        return {
+            thinking: rawThinking || null,
+            content: cleanContent,
+            hasThinking: true,
+            isComplete: false // Still streaming/thinking
+        };
+    }
 
+    // 3. No thinking tags found
     return {
-        thinking,
-        content: cleanContent,
-        hasThinking: thinking !== null && thinking.length > 0,
+        thinking: null,
+        content: text,
+        hasThinking: false,
+        isComplete: true
     };
 }
 
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index e5f8011..ecc260d 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -1,4 +1,4 @@
-import { AIProvider, ExtensionSettings } from './types';
+import { AIProvider, ExtensionSettings, AnalysisStrategyType } from './types';
 
 // Default settings for new users
 export const DEFAULT_SETTINGS: ExtensionSettings = {
@@ -21,12 +21,22 @@ export const DEFAULT_SETTINGS: ExtensionSettings = {
                 apiKey: '',
                 model: 'deepseek/deepseek-r1-0528:free',
             },
+            [AIProvider.OPENAI]: {
+                apiKey: '',
+                model: 'gpt-4o-mini',
+            },
         },
     },
     analysis: {
         depth: 'standard',
         autoAnalyze: false,
         cacheDuration: 24, // 24 hours
+        strategyConfig: {                    // NEW
+            type: AnalysisStrategyType.CLIENT_SIDE,
+            tokenBudget: 80000,
+            maxFiles: 50,
+            priorityThreshold: 50,
+        },
     },
     ui: {
         panelPosition: 'right',
@@ -45,6 +55,7 @@ export const API_ENDPOINTS = {
     GEMINI_API: 'https://generativelanguage.googleapis.com/v1beta',
     HUGGINGFACE_API: 'https://router.huggingface.co/v1',
     OPENROUTER_API: 'https://openrouter.ai/api/v1',
+    OPENAI_API: 'https://api.openai.com/v1',
 };
 
 // Storage keys
@@ -54,6 +65,28 @@ export const STORAGE_KEYS = {
     CONVERSATION_PREFIX: 'github-ai-analyzer-conversation:',
 };
 
+// File prioritization weights
+export const PRIORITY_WEIGHTS = {
+    README: 100,
+    PACKAGE_JSON: 100,
+    ENTRY_POINT: 90,
+    CONFIG: 80,
+    SOURCE: 70,
+    API_ROUTE: 65,
+    COMPONENT: 60,
+    DOCS: 50,
+    TEST: 20,
+    OTHER: 10,
+};
+
+// Token estimation constants
+export const TOKEN_ESTIMATION = {
+    CHARS_PER_TOKEN: 4,  // Conservative estimate for code
+    MAX_FILE_SIZE: 50000, // bytes
+    STRUCTURE_TOKENS: 500,
+    METADATA_TOKENS: 200,
+};
+
 // Analysis prompt template
 export const ANALYSIS_PROMPT_TEMPLATE = `You are a helpful assistant that explains GitHub repositories to non-technical users in simple, accessible language.
 
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index e9e4eed..2ae630c 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -7,6 +7,17 @@ export interface RepositoryInfo {
     repo: string;
     branch: string;
     url: string;
+    scrapedMetadata?: {
+        description: string | null;
+        stars: number;
+        forks: number;
+        watchers: number;
+        topics: string[];
+        language: string | null;
+        license: string | null;
+        isArchived: boolean;
+        isFork: boolean;
+    };
 }
 
 export interface RepositoryMetadata {
@@ -80,6 +91,11 @@ export interface Analysis {
     generatedAt: string;
     provider: AIProvider;
     fromCache: boolean;
+    // NEW: Store strategy result and metadata for chat
+    strategyResult?: StrategyResult;
+    metadata?: RepositoryMetadata;
+    optimizedPrompt?: string;
+    conversationMemory?: ConversationMemory;
 }
 
 export interface AnalysisSections {
@@ -90,6 +106,8 @@ export interface AnalysisSections {
     techStack: TechStackItem[];
     gettingStarted: string;
     downloadInfo?: DownloadInfo;
+    downloadAndInstall?: string;
+    projectStatus?: string;
 }
 
 export interface TechStackItem {
@@ -111,6 +129,22 @@ export interface PlatformDownload {
     size: number;
 }
 
+// ============================================
+// Conversation Memory Types
+// ============================================
+
+export interface ConversationMemory {
+    sessionId: string;
+    facts: Array<{
+        fact: string;
+        confidence: number;
+        addedAt: number;
+    }>;
+    topics: string[];
+    questionsAsked: string[];
+    lastUpdated: number;
+}
+
 // ============================================
 // Chat Types
 // ============================================
@@ -137,6 +171,7 @@ export enum AIProvider {
     GEMINI = 'gemini',
     HUGGINGFACE = 'huggingface',
     OPENROUTER = 'openrouter',
+    OPENAI = 'openai',
 }
 
 export interface ProviderConfig {
@@ -164,6 +199,10 @@ export interface AIProviderSettings {
             apiKey: string;
             model: string;
         };
+        [AIProvider.OPENAI]: {
+            apiKey: string;
+            model: string;
+        };
     };
 }
 
@@ -177,6 +216,7 @@ export interface ExtensionSettings {
         depth: 'quick' | 'standard' | 'deep';
         autoAnalyze: boolean;
         cacheDuration: number; // in hours
+        strategyConfig: AnalysisStrategyConfig;  // NEW
     };
     ui: {
         panelPosition: 'right' | 'left';
@@ -188,6 +228,39 @@ export interface ExtensionSettings {
     };
 }
 
+// ============================================
+// Analysis Strategy Types
+// ============================================
+
+export enum AnalysisStrategyType {
+    CLIENT_SIDE = 'client_side',
+    BACKEND = 'backend',
+    HYBRID = 'hybrid',
+}
+
+export interface AnalysisStrategyConfig {
+    type: AnalysisStrategyType;
+    tokenBudget: number;        // Max tokens to use
+    maxFiles: number;           // Max files to include
+    priorityThreshold: number;  // Min priority score for files
+}
+
+export interface FileScore {
+    path: string;
+    size: number;
+    score: number;
+    category: 'docs' | 'config' | 'source' | 'test' | 'other';
+}
+
+export interface StrategyResult {
+    files: KeyFile[];
+    structure: RepositoryStructure;
+    tokenEstimate: number;
+    coverage: 'full' | 'partial' | 'minimal';
+    filesAnalyzed: number;
+    totalFiles: number;
+}
+
 // ============================================
 // Message Types (for chrome.runtime messaging)
 // ============================================