browse-code 0.1.0__tar.gz

browse_code-0.1.0/PKG-INFO

@@ -0,0 +1,9 @@
+Metadata-Version: 2.4
+Name: browse_code
+Version: 0.1.0
+Summary: A local AI bridge package
+Requires-Dist: fastapi
+Requires-Dist: uvicorn
+Requires-Dist: pydantic
+Dynamic: requires-dist
+Dynamic: summary

browse_code-0.1.0/README.md

@@ -0,0 +1,61 @@
+# Browse Code
+
+![Python Version](https://img.shields.io/badge/python-3.8%2B-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+
+**Browse Code** is a powerful CLI tool that bridges your local terminal environment with your browser. It runs a local backend server and injects an AI-assisted Chrome extension, enabling seamless automation, local file reads/writes, and background process management directly from the browser.
+
+## ✨ Features
+
+- **Local AI Bridge Server:** A fast, secure FastAPI-based server that exposes your local environment (reading files, listing directories, executing terminal commands, managing background processes).
+- **Chrome Extension Integration:** Automatically sets up (with your permission) a Chrome extension that interacts with the backend.
+- **Easy-to-use CLI:** Start your AI sessions with a single `bc` command.
+
+## 🚀 Installation
+
+### For Users
+
+Install the package directly via pip:
+
+```bash
+pip install browse-code
+```
+*(Note: If this package is published to PyPI, you can install it as above. Otherwise, clone the repo and see "For Developers" below).*
+
+### For Developers
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/Dedeep007/browse_code.git
+   cd browse_code
+   ```
+2. Install in editable mode:
+   ```bash
+   pip install -e .
+   ```
+
+## 💻 Usage
+
+Once installed, simply run the CLI command:
+
+```bash
+bc
+```
+
+### What happens when you run `bc`?
+1. **Extension Setup:** The tool will ask if you want to install its companion Chrome extension. If you agree, it will extract the extension to your home folder (`~/.browse_code/extension`) and offer to launch Chrome with the extension loaded.
+2. **Server Initialization:** It will start the AI session backend server on `http://127.0.0.1:5505`. Keep this terminal open to maintain the bridge connection and view real-time execution logs and diffs.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository.
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`).
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
+4. Push to the branch (`git push origin feature/AmazingFeature`).
+5. Open a Pull Request.
+
+## 📄 License
+
+Distributed under the MIT License.

browse_code-0.1.0/browse_code/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.1.0"

browse_code-0.1.0/browse_code/cli.py

@@ -0,0 +1,75 @@
+import os
+import sys
+import shutil
+import subprocess
+from pathlib import Path
+
+def get_data_dir():
+    home = Path.home()
+    data_dir = home / ".browse_code"
+    data_dir.mkdir(exist_ok=True)
+    return data_dir
+
+def install_extension():
+    data_dir = get_data_dir()
+    installed_marker = data_dir / ".installed"
+    ext_dest = data_dir / "extension"
+
+    # Copy extension files from package to ~/.browse_code/extension
+    pkg_ext_dir = Path(__file__).parent / "extension"
+    
+    if not installed_marker.exists():
+        ans_allow = input("Do you allow browse_code to install its Chrome extension? (y/n): ")
+        if ans_allow.lower() != 'y':
+            print("Extension installation skipped.")
+            return
+
+        print("Installing browse_code extension...")
+        if ext_dest.exists():
+            shutil.rmtree(ext_dest)
+        shutil.copytree(pkg_ext_dir, ext_dest)
+        
+        print("\n========================================================")
+        print("Extension files copied to: ", ext_dest)
+        print("To load the extension in Chrome:")
+        print("1. Open Chrome and navigate to chrome://extensions/")
+        print("2. Enable 'Developer mode' at the top right")
+        print("3. Click 'Load unpacked' and select the folder:")
+        print(f"   {ext_dest}")
+        print("========================================================\n")
+        
+        ans = input("Do you want me to try launching Chrome with this extension now? (y/n): ")
+        if ans.lower() == 'y':
+            # Attempt to launch chrome
+            # On Windows:
+            chrome_path = r"C:\Program Files\Google\Chrome\Application\chrome.exe"
+            if not os.path.exists(chrome_path):
+                chrome_path = r"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
+            if os.path.exists(chrome_path):
+                subprocess.Popen([chrome_path, f"--load-extension={ext_dest}"])
+            else:
+                print("Could not find Chrome executable automatically.")
+        
+        installed_marker.touch()
+    else:
+        # Already installed, check if files are still there, if not recopy
+        if not ext_dest.exists():
+            shutil.copytree(pkg_ext_dir, ext_dest)
+
+def main():
+    install_extension()
+    
+    print("\nStarting AI session server...\n")
+    # Now we need to start the FastAPI server.
+    # The original server.py is in the same package
+    try:
+        from .server import app
+    except ImportError:
+        # Fallback if run directly during dev
+        from server import app
+        
+    import uvicorn
+    uvicorn.run(app, host="127.0.0.1", port=5505, access_log=False)
+
+if __name__ == "__main__":
+    main()

browse_code-0.1.0/browse_code/extension/content.js

@@ -0,0 +1,356 @@
+const LOCAL_SERVER = "http://127.0.0.1:5505";
+const hostname = window.location.hostname;
+
+let PLATFORM = {};
+
+if (hostname.includes('gemini.google.com')) {
+    PLATFORM = {
+        name: "Gemini",
+        inputBox: 'rich-textarea div[contenteditable="true"], div[role="textbox"][contenteditable="true"]',
+        sendBtn: 'button[aria-label*="Send"], button[aria-label*="send"], button[mattooltip*="Send"]',
+        responseContainer: 'message-content, model-response, .model-response-text'
+    };
+} else if (hostname.includes('claude.ai')) {
+    PLATFORM = {
+        name: "Claude",
+        inputBox: '.ProseMirror[contenteditable="true"]',
+        sendBtn: 'button[aria-label*="Send"], button[aria-label*="send"]',
+        responseContainer: '.font-claude-response, .font-claude-message'
+    };
+} else if (hostname.includes('huggingface.co')) {
+    PLATFORM = {
+        name: "HuggingFace",
+        inputBox: 'input[name="prompt"]',
+        sendBtn: 'button[type="submit"]',
+        responseContainer: '.prose, .markdown, .break-words, [class*="message"]'
+    };
+} else {
+    PLATFORM = {
+        name: "ChatGPT",
+        inputBox: '#prompt-textarea',
+        sendBtn: '[data-testid="send-button"], button[data-testid*="send"]',
+        responseContainer: '.markdown, .prose'
+    };
+}
+
+const spoofScript = document.createElement('script');
+spoofScript.src = chrome.runtime.getURL('spoof.js');
+(document.head || document.documentElement).appendChild(spoofScript);
+spoofScript.onload = function () { this.remove(); };
+
+const SYSTEM_PROMPT = `You are an elite, autonomous AI software engineer (similar to Antigravity or Devin) connected to a local execution bridge.
+You do NOT have direct access to my file system. You interact with it ONLY by emitting the XML tool tags defined below, which are executed locally on my machine.
+
+═══════════════════════════════════════
+GOLDEN RULES (violating any of these breaks the session)
+═══════════════════════════════════════
+1. STOP AFTER EVERY TOOL CALL. The moment you emit one or more tool tags, END YOUR TURN. Do not write "Result:", do not guess what the output will be, do not continue coding as if you already have it. A human/script will run the tool and give you the real output in the next message. Generating fake tool output is the single worst failure mode — never do it.
+2. NEVER claim a file was created, edited, or tested unless you emitted the corresponding tag THIS turn AND already received its result.
+3. NEVER fabricate file contents, line numbers, search results, or terminal output. If you haven't seen it via a tool result in this conversation, you don't know it.
+4. Explore before you edit. Default order: view_dir → search_code → read_lines → patch/write. Do not read a full file "just in case" — read only what your search told you to read.
+5. Prefer patch over write. Only use write for brand-new files or a full intentional rewrite. patch requires the <search> block to match the existing file EXACTLY (same whitespace/indentation) — read_lines first if you're not certain of the exact text.
+6. Terminals have no memory of directory state between calls. Every terminal_run/terminal_bg must include any necessary cd, chained with &&.
+7. **terminal_run is FULLY BLOCKING and HARD-CAPPED at 300s.** Under the hood it runs synchronously and only returns once the process exits completely — there is no streaming, no partial progress, nothing, until it's done or the 300s timeout fires. If it times out, you get a forced error containing only whatever STDOUT/STDERR happened to be captured before the kill — this is NOT a reliable signal of success or failure, just a fragment.
+   Because of this, terminal_run must NEVER be used for anything that installs dependencies, builds, scaffolds a project, or could plausibly run past a few seconds — e.g. npm/yarn/pnpm install, pip install, create-next-app, docker build, webpack/vite build, test suites with network calls, git clone of large repos, etc.
+   For ALL such commands: start with terminal_bg (returns a PID instantly, non-blocking), then poll with cron_monitor (delay 20-30s) — repeat cron_monitor while status is still "running." Only treat the command as done when a poll returns a completed/exited status.
+   If you ever see a terminal_run timeout error, do NOT re-run the same command with terminal_run again — restart it via terminal_bg instead.
+   terminal_run is only appropriate for short, fast, deterministic commands you're confident finish in a few seconds (e.g. ls, cat, a single quick lint check, git status).
+8. If a result is [TRUNCATED] or a file is large, narrow down with search_code or read_lines instead of re-requesting the whole file.
+
+═══════════════════════════════════════
+WORKFLOW: "Autonomous Researcher"
+═══════════════════════════════════════
+1. **Explore:** view_dir to understand project structure.
+2. **Search:** search_code to grep for exactly which file/line defines a function or variable.
+3. **Inspect:** read_lines to read only the relevant chunk.
+4. **Modify:** patch to surgically replace targeted code. write only for brand-new files.
+5. **Test:** terminal_bg to run dev servers/tests; monitor with cron_monitor or terminal_logs.
+
+═══════════════════════════════════════
+AVAILABLE TOOLS
+═══════════════════════════════════════
+CRITICAL FORMAT RULE: Every individual tool call is wrapped in its OWN \`\`\`tool ... \`\`\` fence. If you issue multiple tool calls in one turn, output multiple separate \`\`\`tool\`\`\` blocks back to back — never combine two tags inside one fence.
+
+| Tool | Format | Description |
+|---|---|---|
+| **View Dir** | \`\`\`tool\n<tool='view_dir'>src/components</tool>\n\`\`\` | Lists files. Leave empty for root. |
+| **Search Code** | \`\`\`tool\n<tool='search_code' query='functionName'>src</tool>\n\`\`\` | Fast regex/string search. Returns file & line numbers. |
+| **Read Lines** | \`\`\`tool\n<tool='read_lines' path='App.js' start='20' end='45'></tool>\n\`\`\` | Reads a specific chunk of a file. |
+| **Read File** | \`\`\`tool\n<tool='read'>path/to/file.py</tool>\n\`\`\` | Reads a full file (avoid if file is large — prefer search_code + read_lines). |
+| **Write File** | \`\`\`tool\n<tool='write' path='path.js'>\nRAW CODE\n</tool>\n\`\`\` | Creates/overwrites a file completely. |
+| **Patch Code** | \`\`\`tool\n<tool='patch' path='main.py'>\n<search>\nOLD\n</search>\n<replace>\nNEW\n</replace>\n</tool>\n\`\`\` | Surgically replaces a block. <search> must match the file byte-for-byte. |
+| **Run Terminal** | \`\`\`tool\n<tool='terminal_run'>npm test</tool>\n\`\`\` | BLOCKING, synchronous, hard 300s timeout. Only for short/fast commands (see Rule 7). |
+| **Background Term**| \`\`\`tool\n<tool='terminal_bg'>npm run dev</tool>\n\`\`\` | Non-blocking. Returns a PID instantly. Required for installs/builds/servers. |
+| **Cron Monitor** | \`\`\`tool\n<tool='cron_monitor' pid='1234' delay='15'></tool>\n\`\`\` | Sleeps X seconds, then returns the background PID's logs. Poll repeatedly until status is no longer "running." |
+| **Term Logs** | \`\`\`tool\n<tool='terminal_logs' pid='1234'></tool>\n\`\`\` | Reads output of a background PID instantly. |
+| **Kill Term** | \`\`\`tool\n<tool='terminal_kill' pid='1234'></tool>\n\`\`\` | Stops a background PID. |
+
+═══════════════════════════════════════
+WORKED EXAMPLES
+═══════════════════════════════════════
+
+--- Example A: code fix (stop-and-wait pattern) ---
+User: "Fix the off-by-one in the pagination helper."
+
+Your turn:
+I'll locate the pagination logic first.
+\`\`\`tool
+<tool='search_code' query='pagination'>src</tool>
+\`\`\`
+[END TURN — wait for result]
+
+Next turn (after receiving real results):
+Found it in src/utils/paginate.js:14.
+\`\`\`tool
+<tool='read_lines' path='src/utils/paginate.js' start='1' end='30'></tool>
+\`\`\`
+[END TURN — wait for result]
+
+Next turn (after receiving the real file contents):
+\`\`\`tool
+<tool='patch' path='src/utils/paginate.js'>
+<search>
+  return start + pageSize;
+</search>
+<replace>
+  return start + pageSize - 1;
+</replace>
+</tool>
+\`\`\`
+[END TURN — wait for result. Only say "Fixed" after this result confirms success.]
+
+--- Example B: long-running install (bg + poll pattern) ---
+User: "Scaffold a new Next.js app called 'dashboard'."
+
+Your turn:
+This will download packages, so I'll run it in the background.
+\`\`\`tool
+<tool='terminal_bg'>npx create-next-app@latest dashboard --yes</tool>
+\`\`\`
+[END TURN — wait for PID]
+
+Next turn (after receiving PID, e.g. 4821):
+\`\`\`tool
+<tool='cron_monitor' pid='4821' delay='25'></tool>
+\`\`\`
+[END TURN — wait for result]
+
+Next turn: if status is still "running," issue cron_monitor again. Only once the log shows completion do you proceed or report success — never use terminal_run for this command, and never assume it finished just because time has passed.
+
+═══════════════════════════════════════
+COMPLETION
+═══════════════════════════════════════
+When the task is fully done and you have real tool results confirming every change, reply in plain text summarizing exactly what changed (files touched, what was added/removed/fixed, commands run and their confirmed final status) — no more and no less than what you actually executed and verified this session.
+
+To confirm you understand these instructions, reply ONLY with: "Agent Initialized. Awaiting command."`;
+
+let messageCount = 0;
+let injectN = 5;
+
+chrome.storage.local.get(['injectN'], (res) => {
+    if (res.injectN !== undefined) injectN = parseInt(res.injectN, 10);
+});
+chrome.storage.onChanged.addListener((changes, namespace) => {
+    if (namespace === 'local' && changes.injectN) {
+        injectN = parseInt(changes.injectN.newValue, 10);
+    }
+});
+
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    sendResponse({ status: "received" });
+    if (request.action === "INITIALIZE_AGENT") {
+        messageCount = 0;
+        startNewChat()
+            .then(() => injectAndSend(SYSTEM_PROMPT))
+            .catch(err => console.error("Initialization sequence failed:", err));
+    }
+    return true;
+});
+
+async function startNewChat() {
+    if (PLATFORM.name === "HuggingFace") {
+        return Promise.resolve();
+    }
+
+    if (PLATFORM.name === "Gemini") {
+        const elements = document.querySelectorAll('span, div, a');
+        for (let el of elements) {
+            if (el.textContent.trim().toLowerCase() === 'new chat') {
+                el.closest('button, a, [role="button"]')?.click();
+                break;
+            }
+        }
+    } else if (PLATFORM.name === "Claude") {
+        const newChatBtn = document.querySelector('a[href="/new"], a[href="/chat/new"]');
+        if (newChatBtn) newChatBtn.click();
+    } else {
+        const newChatBtn = document.querySelector('a[href="/"], [data-testid="new-chat-button"]');
+        if (newChatBtn) newChatBtn.click();
+    }
+    await new Promise(r => setTimeout(r, 2000));
+}
+
+async function injectAndSend(promptText) {
+    let inputBox = null;
+    for (let i = 0; i < 30; i++) {
+        inputBox = document.querySelector(PLATFORM.inputBox);
+        if (inputBox) break;
+        await new Promise(r => setTimeout(r, 200));
+    }
+
+    if (!inputBox) return;
+    inputBox.focus();
+
+    if (inputBox.tagName === 'INPUT' || inputBox.tagName === 'TEXTAREA') {
+        inputBox.value = promptText;
+    } else {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.setData('text/plain', promptText);
+        const pasteEvent = new ClipboardEvent('paste', {
+            clipboardData: dataTransfer,
+            bubbles: true,
+            cancelable: true
+        });
+
+        inputBox.dispatchEvent(pasteEvent);
+
+        if (inputBox.textContent.trim() === "") {
+            document.execCommand('insertText', false, promptText);
+        }
+    }
+
+    inputBox.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    inputBox.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+
+    await new Promise(r => setTimeout(r, 800));
+
+    const sendButton = document.querySelector(PLATFORM.sendBtn);
+    if (sendButton && (!sendButton.disabled && sendButton.getAttribute('aria-disabled') !== 'true')) {
+        sendButton.click();
+    } else {
+        inputBox.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, key: 'Enter', code: 'Enter' }));
+    }
+}
+
+// --- NEW: Robust Text Stability Engine ---
+let isWaitingForLLM = false;
+let lastProcessedMessage = "";
+let trackInterval = null;
+
+const messageQueue = [];
+let isInjectingQueue = false;
+
+function processQueue() {
+    if (messageQueue.length === 0 || isInjectingQueue || isWaitingForLLM) return;
+
+    let inputBox = document.querySelector(PLATFORM.inputBox);
+    if (!inputBox) return;
+
+    // Do not interrupt the user if they are currently typing a message
+    const userText = inputBox.tagName === 'INPUT' || inputBox.tagName === 'TEXTAREA' ? inputBox.value : inputBox.textContent;
+    if (userText && userText.trim() !== "") return;
+
+    // Do not inject if the LLM is currently generating (Send button is missing or disabled)
+    const sendButton = document.querySelector(PLATFORM.sendBtn);
+    if (!sendButton || sendButton.disabled || sendButton.getAttribute('aria-disabled') === 'true') {
+        return;
+    }
+
+    const nextMessage = messageQueue.shift();
+    isInjectingQueue = true;
+    
+    injectAndSend(nextMessage).then(() => {
+        isInjectingQueue = false;
+    }).catch((err) => {
+        console.error("Queue injection failed", err);
+        isInjectingQueue = false;
+    });
+}
+
+// Primary observer loop: checks every 1 second
+setInterval(() => {
+    processQueue();
+
+    if (isWaitingForLLM) return;
+
+    const allContainers = document.querySelectorAll(PLATFORM.responseContainer);
+    // Filter out hidden carousel messages
+    const containers = Array.from(allContainers).filter(el => el.offsetWidth > 0 && el.offsetHeight > 0);
+    if (containers.length === 0) return;
+
+    const lastContainer = containers[containers.length - 1];
+    if (lastContainer.hasAttribute('data-agent-processed')) return;
+
+    // Grab the very last message in the chat using textContent to avoid layout thrashing
+    const currentText = lastContainer.textContent || "";
+
+    // If the LLM has generated a closing tool tag that we haven't processed yet, lock it in and wait for it to finish typing
+    if (currentText.includes("</tool>")) {
+        isWaitingForLLM = true;
+        trackResponse(currentText);
+    }
+}, 1000);
+
+function trackResponse(initialText) {
+    let previousText = initialText;
+    let unchangedTicks = 0;
+
+    if (trackInterval) clearInterval(trackInterval);
+
+    // Sub-loop: monitors text generation speed
+    trackInterval = setInterval(async () => {
+        const allContainers = document.querySelectorAll(PLATFORM.responseContainer);
+        const containers = Array.from(allContainers).filter(el => el.offsetWidth > 0 && el.offsetHeight > 0);
+        const lastContainer = containers.length > 0 ? containers[containers.length - 1] : null;
+        if (!lastContainer) return;
+
+        const currentText = lastContainer.textContent || "";
+
+        // Check if the LLM is still typing
+        if (currentText.length > previousText.length) {
+            previousText = currentText;
+            unchangedTicks = 0;
+        } else {
+            unchangedTicks++;
+        }
+
+        // If text has not changed for 2.5 seconds (5 ticks), assume generation is complete!
+        if (unchangedTicks > 4) {
+            clearInterval(trackInterval);
+            lastContainer.setAttribute('data-agent-processed', 'true');
+            isWaitingForLLM = false; // UNLOCK IMMEDIATELY to prevent deadlocks from long-running tools
+
+
+            const toolMatches = currentText.match(/<tool=[\s\S]*?<\/tool>/g);
+            if (toolMatches && toolMatches.length > 0) {
+                try {
+                    const toolPromises = toolMatches.map(async (toolCall) => {
+                        const response = await fetch(`${LOCAL_SERVER}/extension/run-tool`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ tool_call: toolCall })
+                        });
+                        const resultData = await response.json();
+
+                        const toolNameMatch = toolCall.match(/<tool='(.*?)'/);
+                        const toolName = toolNameMatch ? toolNameMatch[1] : 'unknown';
+
+                        return `\n[System - Tool Execution: ${toolName}]\nStatus: Success\n------------------------------------\nResult Output:\n${resultData.output}\n------------------------------------\n`;
+                    });
+
+                    const results = await Promise.all(toolPromises);
+                    let combinedFeedback = results.join("") + "Instruction: Review the output above. If the task requires more steps, continue. If finished, summarize what was done.";
+
+                    messageCount++;
+                    if (injectN > 0 && messageCount % injectN === 0) {
+                        combinedFeedback += `\n\n[System Reminder (Context Refresh)]:\n${SYSTEM_PROMPT}`;
+                    }
+
+                    messageQueue.push(combinedFeedback);
+                } catch (err) {
+                    messageQueue.push(`\n[System - Error]: Tool execution failed. Ensure your Python backend is running.`);
+                }
+            }
+        }
+    }, 500);
+}

browse_code-0.1.0/browse_code/extension/manifest.json

@@ -0,0 +1,30 @@
+{
+  "manifest_version": 3,
+  "name": "Local Agent Bridge",
+  "version": "2.0",
+  "description": "Autonomous AI Code Execution Bridge",
+  "permissions": [
+    "activeTab",
+    "storage"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "*://*.chatgpt.com/*",
+        "*://gemini.google.com/*",
+        "*://*.claude.ai/*",
+        "*://*.huggingface.co/*"
+      ],
+      "js": ["content.js"]
+    }
+  ],
+  "action": {
+    "default_popup": "popup.html"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["spoof.js"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}

browse_code-0.1.0/browse_code/extension/popup.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <style>
+    body {
+      font-family: 'Segoe UI', sans-serif;
+      width: 350px;
+      padding: 15px;
+      margin: 0;
+      background-color: #0f172a;
+      color: #f8fafc;
+    }
+
+    h3 {
+      margin-top: 0;
+      font-size: 16px;
+      border-bottom: 1px solid #334155;
+      padding-bottom: 5px;
+    }
+
+    label {
+      font-size: 12px;
+      font-weight: bold;
+      color: #94a3b8;
+    }
+
+    input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px;
+      margin: 8px 0;
+      background: #1e293b;
+      border: 1px solid #475569;
+      color: white;
+      border-radius: 4px;
+    }
+
+    button {
+      width: 100%;
+      padding: 10px;
+      font-weight: bold;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: 0.2s;
+    }
+
+    #save-btn {
+      background-color: #3b82f6;
+      color: white;
+      margin-bottom: 15px;
+    }
+
+    #init-btn {
+      background-color: #10b981;
+      color: white;
+      margin-bottom: 15px;
+    }
+
+    .dashboard {
+      background: #1e293b;
+      padding: 10px;
+      border-radius: 5px;
+      font-size: 12px;
+    }
+
+    .process-card {
+      background: #000;
+      border: 1px solid #334155;
+      padding: 8px;
+      margin-top: 8px;
+      border-radius: 4px;
+    }
+
+    .pid {
+      color: #f59e0b;
+      font-weight: bold;
+    }
+
+    .log-preview {
+      font-family: monospace;
+      color: #a3e635;
+      font-size: 10px;
+      white-space: pre-wrap;
+      overflow-x: hidden;
+      margin-top: 5px;
+    }
+  </style>
+</head>
+
+<body>
+  <h3>Agent Dashboard</h3>
+  <label>Workspace Directory:</label>
+  <input type="text" id="dir-input" placeholder="C:\Projects\app">
+  <label>Inject Prompt Every N Messages (0 to disable):</label>
+  <input type="number" id="inject-n-input" placeholder="5" value="5" min="0">
+  <button id="save-btn">Save Directory</button>
+  <button id="init-btn">Initialize Agent in Chat</button>
+
+  <h3>Live Terminals</h3>
+  <div class="dashboard" id="process-list">
+    <div style="color: #94a3b8;">No active background processes...</div>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+
+</html>