Spaces:

fokan
/

vs-code-ai-builder

Running

App Files Files Community

fokan commited on Oct 24, 2025

Commit

47b4206

verified ·

1 Parent(s): 69e3625

# VS Code AI Builder Extension — MVP

Browse files

> هدف الإضافة: بناء مواقع/تطبيقات كاملة من برومبت واحد، ورؤية المشروع المفتوح والتعديل على الملفات بشكل احترافي (Agentic Codegen) — شبيه Augment Code/Cline.

---

## 0) المزايا الأساسية

* **Build from Prompt**: توليد خطة + هيكل مشروع + كود أولي.
* **Project-Aware**: قراءة الشجرة، تلخيصها، والانطلاق منها (context packing).
* **Patch & Review**: استلام تغييرات بصيغة Unified Diff، عرضها، تطبيقها انتقائيًا.
* **Tasks Orchestrator**: تشغيل أوامر (npm/yarn/pnpm), dev server, linters، مع بث حي للّوغز في جانب.
* **Safe Mode**: Dry‑run، وحدود/قوائم سماح للمجلدات، طلب تأكيد قبل أي تغييرات كبيرة.
* **Provider‑agnostic**: يدعم OpenAI/Anthropic/Gemini عبر واجهة موحّدة.

---

## 1) أوامر الإضافة (Commands)

* `aiBuilder.buildFromPrompt` — “ابنِ مشروعي من هذا البرومبت…”.
* `aiBuilder.explainPlan` — عرض الخطة ومراحل التنفيذ قبل التطبيق.
* `aiBuilder.applyPlan` — تطبيق الخطة دفعة واحدة أو على مراحل.
* `aiBuilder.editSelection` — تعديل الجزء المحدد في الملف الحالي.
* `aiBuilder.refactorProject` — تحسين شامل مع حماية الاختبارات/الأنماط.
* `aiBuilder.runTask` — تشغيل مهام (install/build/dev/test) مع لوغ.

---

## 2) بنية المشروع

```
ai-builder-ext/
├─ package.json
├─ tsconfig.json
├─ src/
│ ├─ extension.ts
│ ├─ agent/
│ │ ├─ Agent.ts
│ │ ├─ Patch.ts
│ │ ├─ Context.ts
│ │ └─ Tools.ts
│ ├─ llm/
│ │ ├─ Provider.ts
│ │ ├─ OpenAIProvider.ts
│ │ ├─ AnthropicProvider.ts
│ │ └─ GeminiProvider.ts
│ ├─ ui/
│ │ ├─ Panel.ts
│ │ └─ webview.html
│ └─ util/
│ ├─ fs.ts
│ └─ diff.ts
└─ README.md
```

---

## 3) package.json (مختصر قابل للتشغيل)

```json
{
"name": "ai-builder-ext",
"displayName": "AI Builder — Agentic Codegen",
"publisher": "your-name",
"version": "0.0.1",
"engines": { "vscode": "^1.92.0" },
"categories": ["Other"],
"activationEvents": [
"onCommand:aiBuilder.buildFromPrompt",
"onCommand:aiBuilder.explainPlan",
"onCommand:aiBuilder.applyPlan",
"onCommand:aiBuilder.editSelection",
"onCommand:aiBuilder.refactorProject",
"onCommand:aiBuilder.runTask"
],
"contributes": {
"commands": [
{ "command": "aiBuilder.buildFromPrompt", "title": "AI: Build From Prompt" },
{ "command": "aiBuilder.explainPlan", "title": "AI: Show Plan" },
{ "command": "aiBuilder.applyPlan", "title": "AI: Apply Plan" },
{ "command": "aiBuilder.editSelection", "title": "AI: Edit Selection" },
{ "command": "aiBuilder.refactorProject", "title": "AI: Refactor Project" },
{ "command": "aiBuilder.runTask", "title": "AI: Run Task" }
],
"configuration": {
"type": "object",
"title": "AI Builder Settings",
"properties": {
"aiBuilder.provider": {
"type": "string",
"default": "openai",
"enum": ["openai", "anthropic", "gemini"],
"description": "LLM provider"
},
"aiBuilder.apiKey": {
"type": "string",
"default": "",
"description": "API Key (stored in VS Code SecretStorage)"
},
"aiBuilder.model": {
"type": "string",
"default": "gpt-4.1-mini",
"description": "Model name"
},
"aiBuilder.maxContextFiles": {
"type": "number",
"default": 200,
"description": "Max files to summarize in context"
},
"aiBuilder.allowWritePaths": {
"type": "array",
"items": {"type": "string"},
"default": ["src", "app", "public", "components"],
"description": "Directories allowed for write operations"
},
"aiBuilder.dryRun": {
"type": "boolean",
"default": true,
"description": "Preview patches without applying"
}
}
}
},
"main": "./dist/extension.js",
"scripts": {
"vscode:prepublish": "npm run build",
"build": "tsc -p .",
"watch": "tsc -watch -p ."
},
"devDependencies": {
"@types/node": "^20.11.28",
"@types/vscode": "^1.92.0",
"typescript": "^5.5.4"
},
"dependencies": {
"diff": "^5.2.0"
}
}
```

---

## 4) tsconfig.json

```json
{
"compilerOptions": {
"module": "commonjs",
"target": "es2020",
"outDir": "dist",
"lib": ["es2020"],
"sourceMap": true,
"rootDir": "src",
"strict": true,
"skipLibCheck": true
},
"include": ["src"]
}
```

---

## 5) src/extension.ts (تسجيل الأوامر والواجهة)

```ts
import * as vscode from 'vscode';
import { Agent } from './agent/Agent';
import { Panel } from './ui/Panel';

export async function activate(context: vscode.ExtensionContext) {
const panel = new Panel(context);
const agent = new Agent(context, panel);

context.subscriptions.push(
vscode.commands.registerCommand('aiBuilder.buildFromPrompt', async () => {
const prompt = await vscode.window.showInputBox({
prompt: 'اكتب وصفًا موجزًا للموقع/التطبيق المطلوب',
placeHolder: 'Landing page SaaS داكنة مع تسعير ولوحة إدارة...'
});
if (!prompt) return;
await agent.buildFromPrompt(prompt);
}),

vscode.commands.registerCommand('aiBuilder.explainPlan', async () => agent.showPlan()),
vscode.commands.registerCommand('aiBuilder.applyPlan', async () => agent.applyPlan()),

vscode.commands.registerCommand('aiBuilder.editSelection', async () => {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const selection = editor.document.getText(editor.selection);
const instruction = await vscode.window.showInputBox({ prompt: 'صف التعديل المطلوب' });
if (!instruction) return;
await agent.editSelection(editor.document.uri, editor.selection, selection, instruction);
}),

vscode.commands.registerCommand('aiBuilder.refactorProject', async () => agent.refactorProject()),
vscode.commands.registerCommand('aiBuilder.runTask', async () => agent.runTask())
);
}

export function deactivate() {}
```

---

## 6) src/agent/Agent.ts (حلقة الوكيل الأساسية)

```ts
import * as vscode from 'vscode';
import { getProvider } from '../llm/Provider';
import { collectContext } from './Context';
import { applyUnifiedDiff } from '../util/diff';
import { Panel } from '../ui/Panel';

export class Agent {
constructor(private ctx: vscode.ExtensionContext, private panel: Panel) {}

private plan: string | undefined;
private lastPatch: string | undefined;

async buildFromPrompt(userPrompt: string) {
this.panel.appendLog('Collecting project context...');
const context = await collectContext({ maxFiles: this.getCfg('aiBuilder.maxContextFiles') });

this.panel.show();
this.panel.setPlan('Generating plan...');

const provider = await getProvider(this.ctx);
const sys = SYSTEM_PROMPT;
const prompt = BUILD_PROMPT(userPrompt, context.summary);

const plan = await provider.complete(sys, prompt);
this.plan = plan;
this.panel.setPlan(plan);

// طلب Patch أولي
const patch = await provider.complete(sys, PATCH_PROMPT(context.filesIndex, plan));
this.lastPatch = patch;
this.panel.setPatch(patch);

if (this.getCfg('aiBuilder.dryRun')) {
this.panel.appendLog('Dry‑run enabled. Review patch before applying.');
return;
}
await this.applyPlan();
}

async showPlan() {
if (!this.plan) vscode.window.showWarningMessage('لا توجد خطة بعد');
else this.panel.setPlan(this.plan!);
}

async applyPlan() {
if (!this.lastPatch) return vscode.window.showWarningMessage('لا يوجد Patch للتطبيق');
await applyUnifiedDiff(this.lastPatch, this.getCfg('aiBuilder.allowWritePaths'));
vscode.window.showInformationMessage('تم تطبيق التغييرات.');
}

async editSelection(uri: vscode.Uri, sel: vscode.Range, code: string, instruction: string) {
const provider = await getProvider(this.ctx);
const sys = SYSTEM_PROMPT;
const msg = EDIT_SELECTION_PROMPT(uri.fsPath, code, instruction);
const patch = await provider.complete(sys, msg);
this.lastPatch = patch;
this.panel.setPatch(patch);
}

async refactorProject() { /* مشابه buildFromPrompt ولكن يركز على التحسين */ }
async runTask() { /* تنفيذ أمر في terminal + بث اللوغ للـ panel */ }

private getCfg(key: string) { return vscode.workspace.getConfiguration().get(key); }
}

const SYSTEM_PROMPT = `You are an expert software engineer agent. Always propose a PLAN then return changes as unified diffs. Respect allowed paths. Avoid destructive ops. Keep patches minimal and idempotent.`;

const BUILD_PROMPT = (userPrompt: string, projectSummary: string) => `
User Request:\n${userPrompt}\n\nProject Summary:\n${projectSummary}\n\nDeliverables:\n1) PLAN with steps.\n2) Minimal files list.\n3) Tech choices.\n`;

const PATCH_PROMPT = (filesIndex: string, plan: string) => `
You have file index:\n${filesIndex}\n\nBased on PLAN:\n${plan}\n\nReturn ONLY a unified diff patch to implement step 1. Use paths relative to workspace root.`;

const EDIT_SELECTION_PROMPT = (path: string, code: string, instruction: string) => `
File: ${path}
Selection:
"""
${code}
"""
Instruction: ${instruction}
Return a unified diff for this file only.`;
```

---

## 7) src/agent/Context.ts (تلخيص المشروع)

```ts
import * as vscode from 'vscode';

export async function collectContext(opts: { maxFiles: number }): Promise<{ summary: string; filesIndex: string; }> {
const u

Files changed (6) hide show

README.md +8 -5
components/footer.js +147 -0
components/navbar.js +104 -0
index.html +304 -19
script.js +70 -0
style.css +58 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Vs Code Ai Builder
-emoji: 📚
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: VS Code AI Builder 🚀
+colorFrom: pink
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,147 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+          color: white;
+          padding: 3rem 2rem 2rem;
+          margin-top: auto;
+          border-top: 1px solid rgba(55, 65, 81, 0.3);
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: 2fr 1fr 1fr 1fr;
+          gap: 3rem;
+          margin-bottom: 2rem;
+        }
+        .footer-brand h3 {
+          font-size: 1.5rem;
+          font-weight: bold;
+          margin-bottom: 1rem;
+          background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .footer-brand p {
+          color: #9ca3af;
+          line-height: 1.6;
+        }
+        .footer-section h4 {
+          font-size: 1.1rem;
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: #e5e7eb;
+        }
+        .footer-section ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-section li {
+          margin-bottom: 0.5rem;
+        }
+        .footer-section a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-section a:hover {
+          color: #a78bfa;
+        }
+        .footer-bottom {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding-top: 2rem;
+          border-top: 1px solid rgba(55, 65, 81, 0.3);
+          text-align: center;
+          color: #6b7280;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+        }
+        .social-links a {
+          color: #6b7280;
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: #a78bfa;
+        }
+        @media (max-width: 768px) {
+          .footer-content {
+            grid-template-columns: 1fr;
+            gap: 2rem;
+          }
+          .footer-bottom {
+            flex-direction: column;
+            gap: 1rem;
+            text-align: center;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-brand">
+            <h3>VS Code AI Builder</h3>
+            <p>Agentic Codegen Extension for VS Code. Build complete applications from natural language prompts with AI assistance.</p>
+          </div>
+          <div class="footer-section">
+            <h4>Features</h4>
+            <ul>
+              <li><a href="#features">Build from Prompt</a></li>
+              <li><a href="#features">Project-Aware</a></li>
+              <li><a href="#features">Patch & Review</a></li>
+              <li><a href="#features">Safe Mode</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h4>Commands</h4>
+            <ul>
+              <li><a href="#commands">Build From Prompt</a></li>
+              <li><a href="#commands">Edit Selection</a></li>
+              <li><a href="#commands">Refactor Project</a></li>
+              <li><a href="#commands">Run Task</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h4>Resources</h4>
+            <ul>
+              <li><a href="#installation">Documentation</a></li>
+              <li><a href="https://github.com">GitHub</a></li>
+              <li><a href="#installation">Quick Start</a></li>
+              <li><a href="#installation">Configuration</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>&copy; 2024 VS Code AI Builder. All rights reserved.</p>
+          <div class="social-links">
+            <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0m6 13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5m-6 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3m-6-1c-.8 0-1.5-.7-1.5-1.5S5.2 9 6 9s1.5.7 1.5 1.5S6.8 13.5 6 13.5z"/>
+              </svg>
+            </a>
+            <a href="#" target="_blank" rel="noopener noreferrer">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
+              </svg>
+            </a>
+            <a href="#" target="_blank" rel="noopener noreferrer">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,104 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(17, 24, 39, 0.95);
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 50;
+          border-bottom: 1px solid rgba(55, 65, 81, 0.5);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.25rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .logo-icon {
+          width: 24px;
+          height: 24px;
+        }
+        ul {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: rgb(209, 213, 219);
+          text-decoration: none;
+          transition: all 0.2s;
+          font-weight: 500;
+        }
+        a:hover {
+          color: rgb(167, 139, 250);
+        }
+        .nav-actions {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+        }
+        .btn-primary {
+          background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(147, 51, 234) 100%);
+          color: white;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          text-decoration: none;
+          font-weight: 600;
+          transition: all 0.2s;
+        }
+        .btn-primary:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem;
+          }
+          ul {
+            gap: 1rem;
+            font-size: 0.9rem;
+          }
+          .nav-actions {
+            display: none;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <svg class="logo-icon" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2h9m3-4v-2H6v2h12z"/>
+          </svg>
+          AI Builder
+        </div>
+        <ul>
+          <li><a href="#hero">Home</a></li>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#commands">Commands</a></li>
+          <li><a href="#installation">Install</a></li>
+        </ul>
+        <div class="nav-actions">
+          <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0m6 13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5m-6 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3m-6-1c-.8 0-1.5-.7-1.5-1.5S5.2 9 6 9s1.5.7 1.5 1.5S6.8 13.5 6 13.5z"/>
+            </svg>
+          </a>
+          <a href="#hero" class="btn-primary">Get Started</a>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,304 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VS Code AI Builder Extension - MVP</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <div id="vanta-bg" class="absolute inset-0"></div>
+        <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
+            <div class="mb-8">
+                <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-4">
+                    VS Code AI Builder
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-300 mb-2">Agentic Codegen Extension</p>
+                <p class="text-lg text-gray-400 max-w-3xl mx-auto">
+                    Build complete websites and applications from a single prompt. See your project open, edit files professionally, and enjoy seamless development.
+                </p>
+            </div>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
+                <button class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold py-3 px-8 rounded-lg transform transition hover:scale-105 shadow-xl">
+                    <i data-feather="code" class="inline mr-2"></i>
+                    Get Started
+                </button>
+                <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-8 rounded-lg border border-gray-700 transform transition hover:scale-105">
+                    <i data-feather="github" class="inline mr-2"></i>
+                    View on GitHub
+                </button>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg p-6 transform transition hover:scale-105">
+                    <div class="text-blue-400 mb-4">
+                        <i data-feather="zap" class="w-12 h-12"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Build from Prompt</h3>
+                    <p class="text-gray-400">Generate project structure, plan, and initial code from natural language descriptions</p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg p-6 transform transition hover:scale-105">
+                    <div class="text-purple-400 mb-4">
+                        <i data-feather="edit-3" class="w-12 h-12"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Project-Aware</h3>
+                    <p class="text-gray-400">Read tree structure, summarize context, and work with existing codebases</p>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-lg p-6 transform transition hover:scale-105">
+                    <div class="text-pink-400 mb-4">
+                        <i data-feather="shield" class="w-12 h-12"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Safe Mode</h3>
+                    <p class="text-gray-400">Dry-run, path allowlists, and confirmation prompts for safe development</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-20 px-4">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+                Core Features
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-gray-800 rounded-lg p-8 border border-gray-700 hover:border-purple-500 transition">
+                    <h3 class="text-2xl font-semibold mb-4 text-purple-400">
+                        <i data-feather="git-branch" class="inline mr-2"></i>
+                        Patch & Review
+                    </h3>
+                    <p class="text-gray-300 mb-4">
+                        Receive changes in Unified Diff format, preview them visually, and apply selectively with confidence.
+                    </p>
+                    <ul class="text-gray-400 space-y-2">
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Visual diff viewer</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Selective patch application</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Rollback support</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-8 border border-gray-700 hover:border-blue-500 transition">
+                    <h3 class="text-2xl font-semibold mb-4 text-blue-400">
+                        <i data-feather="terminal" class="inline mr-2"></i>
+                        Tasks Orchestrator
+                    </h3>
+                    <p class="text-gray-300 mb-4">
+                        Run commands (npm/yarn/pnpm), dev servers, linters with live log streaming in the panel.
+                    </p>
+                    <ul class="text-gray-400 space-y-2">
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Real-time log streaming</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Task queue management</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Error detection</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-8 border border-gray-700 hover:border-pink-500 transition">
+                    <h3 class="text-2xl font-semibold mb-4 text-pink-400">
+                        <i data-feather="cpu" class="inline mr-2"></i>
+                        Provider-Agnostic
+                    </h3>
+                    <p class="text-gray-300 mb-4">
+                        Works with OpenAI, Anthropic, Gemini, and other LLM providers through a unified interface.
+                    </p>
+                    <ul class="text-gray-400 space-y-2">
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Multiple provider support</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Easy switching</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>API key management</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-800 rounded-lg p-8 border border-gray-700 hover:border-green-500 transition">
+                    <h3 class="text-2xl font-semibold mb-4 text-green-400">
+                        <i data-feather="command" class="inline mr-2"></i>
+                        Command Suite
+                    </h3>
+                    <p class="text-gray-300 mb-4">
+                        Comprehensive set of commands for every development stage and use case.
+                    </p>
+                    <ul class="text-gray-400 space-y-2">
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Build from prompt</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Edit selection</li>
+                        <li><i data-feather="check-circle" class="inline mr-2 text-green-400"></i>Refactor project</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Commands Section -->
+    <section class="py-20 px-4 bg-gray-800 bg-opacity-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
+                Available Commands
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-blue-500 transition group">
+                    <code class="text-blue-400 font-mono text-sm">aiBuilder.buildFromPrompt</code>
+                    <p class="text-gray-400 mt-2 group-hover:text-gray-300 transition">
+                        Build project from natural language prompt
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-purple-500 transition group">
+                    <code class="text-purple-400 font-mono text-sm">aiBuilder.explainPlan</code>
+                    <p class="text-gray-400 mt-2 group-hover:text-gray-300 transition">
+                        Show the execution plan before applying
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-pink-500 transition group">
+                    <code class="text-pink-400 font-mono text-sm">aiBuilder.applyPlan</code>
+                    <p class="text-gray-400 mt-2 group-hover:text-gray-300 transition">
+                        Apply the generated plan to workspace
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-green-500 transition group">
+                    <code class="text-green-400 font-mono text-sm">aiBuilder.editSelection</code>
+                    <p class="text-gray-400 mt-2 group-hover:text-gray-300 transition">
+                        Edit selected code with AI assistance
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-yellow-500 transition group">
+                    <code class="text-yellow-400 font-mono text-sm">aiBuilder.refactorProject</code>
+                    <p class="text-gray-400 mt-2 group-hover:text-gray-300 transition">
+                        Comprehensive project refactoring
+                    </p>
+                </div>
+                <div class="bg-gray-900 rounded-lg p-6 border border-gray-700 hover:border-red-500 transition group">
+                    <code class="text-red-400 font-mono text-sm">aiBuilder.runTask</code>
+                    <p class="text-gray-400 mt-2 group-hover:text-gray-300 transition">
+                        Execute development tasks with live logs
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Project Structure -->
+    <section class="py-20 px-4">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
+                Project Structure
+            </h2>
+            <div class="bg-gray-800 rounded-lg p-8 overflow-x-auto">
+                <pre class="text-gray-300 font-mono text-sm">
+<code class="language-bash">ai-builder-ext/
+├─ package.json
+├─ tsconfig.json
+├─ src/
+│  ├─ extension.ts
+│  ├─ agent/
+│  │  ├─ Agent.ts
+│  │  ├─ Patch.ts
+│  │  ├─ Context.ts
+│  │  └─ Tools.ts
+│  ├─ llm/
+│  │  ├─ Provider.ts
+│  │  ├─ OpenAIProvider.ts
+│  │  ├─ AnthropicProvider.ts
+│  │  └─ GeminiProvider.ts
+│  ├─ ui/
+│  │  ├─ Panel.ts
+│  │  └─ webview.html
+│  └─ util/
+│     ├─ fs.ts
+│     └─ diff.ts
+└─ README.md</code>
+                </pre>
+            </div>
+        </div>
+    </section>
+    <!-- Installation Guide -->
+    <section class="py-20 px-4 bg-gray-800 bg-opacity-50">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-4xl font-bold text-center mb-12 bg-gradient-to-r from-pink-400 to-purple-500 bg-clip-text text-transparent">
+                Quick Start
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-gray-900 rounded-lg p-8">
+                    <h3 class="text-2xl font-semibold mb-6 text-purple-400">
+                        <i data-feather="download" class="inline mr-2"></i>
+                        Installation
+                    </h3>
+                    <div class="space-y-4">
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Prerequisites:</p>
+                            <ul class="text-gray-300 space-y-1">
+                                <li>• VS Code 1.92.0+</li>
+                                <li>• Node.js 18+</li>
+                            </ul>
+                        </div>
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Install dependencies:</p>
+                            <code class="text-blue-400 font-mono text-sm">npm i</code>
+                        </div>
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Build in watch mode:</p>
+                            <code class="text-blue-400 font-mono text-sm">npm run watch</code>
+                        </div>
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Press F5 to launch extension</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-900 rounded-lg p-8">
+                    <h3 class="text-2xl font-semibold mb-6 text-blue-400">
+                        <i data-feather="settings" class="inline mr-2"></i>
+                        Configuration
+                    </h3>
+                    <div class="space-y-4">
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Select provider:</p>
+                            <code class="text-blue-400 font-mono text-sm">aiBuilder.provider</code>
+                            <p class="text-gray-500 text-sm mt-1">Options: openai, anthropic, gemini</p>
+                        </div>
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Set API Key:</p>
+                            <code class="text-blue-400 font-mono text-sm">aiBuilder.apiKey</code>
+                            <p class="text-gray-500 text-sm mt-1">Stored securely in VS Code SecretStorage</p>
+                        </div>
+                        <div class="bg-gray-800 rounded p-4">
+                            <p class="text-gray-400 mb-2">Enable safe mode:</p>
+                            <code class="text-blue-400 font-mono text-sm">aiBuilder.dryRun: true</code>
+                            <p class="text-gray-500 text-sm mt-1">Preview changes before applying</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+    <script>
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x7c3aed,
+            backgroundColor: 0x111827,
+            size: 0.80
+        })
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,70 @@

+// Initialize tooltips and interactive elements
+document.addEventListener('DOMContentLoaded', () => {
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        });
+    });
+    // Add active state to navigation items
+    const sections = document.querySelectorAll('section[id]');
+    const navLinks = document.querySelectorAll('nav a[href^="#"]');
+    function highlightNav() {
+        const scrollY = window.pageYOffset;
+        sections.forEach(section => {
+            const sectionHeight = section.offsetHeight;
+            const sectionTop = section.offsetTop - 100;
+            const sectionId = section.getAttribute('id');
+            if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+                navLinks.forEach(link => {
+                    link.classList.remove('text-purple-400');
+                    link.classList.add('text-gray-300');
+                });
+                document.querySelector(`nav a[href*="${sectionId}"]`)?.classList.add('text-purple-400');
+            }
+        });
+    }
+    window.addEventListener('scroll', highlightNav);
+    highlightNav();
+    // Animate elements on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in');
+            }
+        });
+    }, observerOptions);
+    // Observe all feature cards and sections
+    document.querySelectorAll('.bg-gray-800, .bg-gray-900').forEach(el => {
+        observer.observe(el);
+    });
+});
+// Add fade-in animation
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes fade-in {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-fade-in {
+        animation: fade-in 0.6s ease-out forwards;
+    }
+`;
+document.head.appendChild(style);

style.css CHANGED Viewed

@@ -1,28 +1,68 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles for AI Builder Extension */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+/* Code block styles */
+pre {
+    background: #1f2937 !important;
+    border: 1px solid #374151;
+    border-radius: 0.5rem;
+}
+/* Gradient text animation */
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient 3s ease infinite;
 }
+/* Glow effect */
+.glow {
+    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
 }
+/* Hover glow */
+.hover-glow:hover {
+    box-shadow: 0 0 30px rgba(139, 92, 246, 0.7);
 }
+/* Pulse animation */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
+.animate-pulse-slow {
+    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}