diff --git a/.gitignore b/.gitignore
index 96fab4fe..0d8e8ee0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# Worktrees
+.worktrees
diff --git a/AGENTS.md b/AGENTS.md
index 8e533a7c..109b4924 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,12 +4,45 @@
 
 ## Project Overview
 
-FreeCode is a CLI tool that drives ChatGPT (via Playwright/CDP) to assist with coding tasks. The architecture consists of:
+FreeCode is a CLI tool that drives AI coding assistants (ChatGPT, Claude, Gemini) via browser automation to assist with coding tasks. The architecture uses a **thin-client model**: multiple frontends (TUI, VS Code extension) delegate all intelligence to a shared CLI backend via JSON-RPC over stdin/stdout.
 
-- **CLI Backend** (`apps/cli/`) — Node.js/TypeScript that handles browser automation, context management, response parsing, and file application
-- **TUI Frontend** (`apps/tui/`) — React + xterm.js terminal UI with layered architecture (terminal rendering + React DOM overlay)
+The system uses a two-phase approach: the AI first returns which files it needs, then receives those files + prompt and returns structured file changes.
 
-The system uses a two-phase approach: ChatGPT first returns which files it needs, then receives those files + prompt and returns structured file changes.
+---
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                          TUI                                 │
+│              (apps/tui) — pure UI shell                    │
+│         Uses pi-tui for terminal rendering                  │
+│         IPC client sends/receives JSON-RPC                  │
+└──────────────────────────┬──────────────────────────────────┘
+                           │
+                           │ JSON-RPC (stdin/stdout)
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                          CLI Backend                        │
+│              (apps/cli) — ALL intelligence                  │
+│   Browser controller, parser, tools, context engine,        │
+│   agent loop, file applier                                  │
+└──────────────────────────┬──────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                     AI Provider (Browser)                    │
+│                    ChatGPT / Claude / Gemini                 │
+└─────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────┐
+│                      VS Code Extension                       │
+│              (apps/vscode) — pure UI shell                   │
+│         React webview + IPC client to CLI                   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key principle:** TUI and VSCode are pure presentation layers. All business logic lives in CLI.
 
 ---
 
@@ -22,20 +55,11 @@ The system uses a two-phase approach: ChatGPT first returns which files it needs
 3. **DRY** — Don't repeat yourself; extract shared logic to single sources of truth
 4. **Decomposition** — Each file/module does one thing well; avoid bloated files
 
-### React Component Guidelines
+### Thin Client Principles
 
-1. **Single responsibility per component** — A component should render one UI element or compose smaller components. If a component exceeds ~150 lines, decompose it.
-2. **Colocation** — Keep component-specific hooks, utils, and types near the component that uses them
-3. **Composition over prop-drilling** — Use compound components, context, or composition patterns instead of passing many props through many levels
-4. **Extract when used in 2+ places** — If logic/JSX is copied, extract it
-5. **Pure presentational vs smart containers** — Separate data-fetching from rendering
-
-### State Management
-
-- **Zustand stores** (`stores/`) — Global state that crosses component boundaries (chat, panels, session)
-- **Local state** (`useState`) — Component-specific state that doesn't escape the component
-- **Derived state** — Compute from store values, don't duplicate in store
-- **Store access in non-components** — Use `store.getState()` (not hooks) for IPC, utilities, etc.
+1. **Zero business logic in frontends** — TUI and VSCode do only rendering and IPC. No browser automation, no file reading, no parsing.
+2. **IPC is the only bridge** — All communication between frontends and CLI goes through JSON-RPC. No shared state.
+3. **CLI owns everything** — Browser controller, providers, context engine, parser, tools, agent loop all live in CLI.
 
 ---
 
@@ -43,136 +67,205 @@ The system uses a two-phase approach: ChatGPT first returns which files it needs
 
 ```
 freecode/
+├── packages/
+│   └── shared/                     # Shared types + IPC protocol ONLY
+│       └── src/
+│           ├── types.ts             # Message, MessagePart, ToolResult,
+│           │                         # FileChange, ParsedResponse
+│           ├── ipc/
+│           │   └── protocol.ts     # JsonRpcRequest/Response, StreamResponse
+│           └── index.ts
+│
 ├── apps/
-│   ├── cli/                    # CLI backend (Node.js/TypeScript)
+│   ├── cli/                        # ALL intelligence lives here
 │   │   └── src/
-│   │       ├── index.ts        # Entry point
-│   │       ├── cli.ts          # REPL orchestration
-│   │       ├── browser/        # Playwright + CDP controller
+│   │       ├── server.ts            # JSON-RPC stdin/stdout server
+│   │       ├── agent/              # Agent loop + session management
+│   │       │   ├── loop.ts
+│   │       │   └── session.ts
+│   │       ├── browser/            # Playwright + CDP + provider adapters
 │   │       │   ├── controller.ts
-│   │       │   ├── chatgpt-adapter.ts
+│   │       │   ├── providers/
+│   │       │   │   ├── index.ts
+│   │       │   │   ├── chatgpt.ts
+│   │       │   │   └── types.ts
 │   │       │   └── types.ts
-│   │       ├── context/        # Two-phase context engine
-│   │       │   ├── engine.ts
+│   │       ├── context/            # File tree + context collection
+│   │       │   ├── collector.ts
 │   │       │   └── file-tree.ts
-│   │       ├── parser/         # Format-agnostic response parser
+│   │       ├── parser/             # Response parsing
+│   │       │   ├── registry.ts
+│   │       │   └── extractors/
+│   │       │       ├── structured.ts
+│   │       │       ├── markdown.ts
+│   │       │       └── json.ts
+│   │       ├── tools/              # Tool definitions + execution
 │   │       │   ├── index.ts
-│   │       │   ├── json-parser.ts
-│   │       │   ├── markdown-parser.ts
-│   │       │   └── types.ts
-│   │       ├── applier/        # File application with diff preview
+│   │       │   ├── read.ts
+│   │       │   ├── write.ts
+│   │       │   ├── edit.ts
+│   │       │   ├── bash.ts
+│   │       │   ├── grep.ts
+│   │       │   ├── find.ts
+│   │       │   └── glob.ts
+│   │       └── applier/            # File diff + write
+│   │           ├── index.ts
+│   │           ├── differ.ts
+│   │           └── writer.ts
+│   │
+│   ├── tui/                        # Pure UI shell — no business logic
+│   │   └── src/
+│   │       ├── index.ts            # Entry point: mounts TUI, connects IPC
+│   │       ├── commands/           # TUI-specific commands (model select)
 │   │       │   ├── index.ts
-│   │       │   ├── differ.ts
-│   │       │   └── writer.ts
-│   │       └── types/          # Shared types
-│   └── tui/                    # React TUI frontend
-│       └── src/
-│           ├── app/            # Next.js app router
-│           ├── components/     # UI components
-│           │   ├── ChatLayout.tsx
-│           │   ├── PromptInput.tsx
-│           │   ├── Logo.tsx
-│           │   ├── messages/   # Message rendering
-│           │   │   ├── UserMessage.tsx
-│           │   │   ├── AssistantMessage.tsx
-│           │   │   └── parts/   # Message part renderers
-│           │   │       ├── TextPart.tsx
-│           │   │       ├── CodePart.tsx
-│           │   │       └── ToolPart.tsx
-│           │   └── ui/         # LayerStack, Toast, Dialog
-│           ├── stores/          # Zustand stores
-│           │   ├── chat-store.ts
-│           │   ├── ui-panel-store.ts
-│           │   ├── session-store.ts
-│           │   └── index.ts
-│           ├── ipc/             # JSON-RPC bridge to CLI
-│           │   ├── bridge.ts
-│           │   ├── protocol.ts
-│           │   └── client.ts
-│           └── hooks/           # Custom hooks
-│               └── useAutoResize.ts
-├── packages/
-│   └── shared/                 # Shared types between apps
+│   │       │   └── built-in.ts
+│   │       ├── ipc/
+│   │       │   └── client.ts       # JSON-RPC client to CLI
+│   │       └── assets/
+│   │           └── logo.ts
+│   │
+│   └── vscode/                     # Pure UI shell — no business logic
 │       └── src/
-│           └── types.ts
+│           ├── extension.ts        # VS Code extension entry point
+│           ├── chat/
+│           │   ├── ChatView.tsx    # Main webview panel
+│           │   ├── MessageList.tsx
+│           │   ├── MessageInput.tsx
+│           │   └── parts/          # Message part renderers
+│           │       ├── TextPart.tsx
+│           │       ├── CodePart.tsx
+│           │       └── ToolPart.tsx
+│           ├── stores/
+│           │   └── chat-store.ts   # UI state only (messages, status)
+│           └── ipc/
+│               └── client.ts       # JSON-RPC client to CLI
+│
 └── docs/
     └── superpowers/
-        ├── specs/              # Design specifications
-        └── plans/             # Implementation plans
+        ├── specs/                  # Design specifications
+        └── plans/                 # Implementation plans
 ```
 
 ---
 
-## Component Design Patterns
+## Boundary: What Lives Where
+
+| Concern | CLI | TUI | VSCode |
+|---------|-----|-----|--------|
+| Browser automation (Playwright/CDP) | ✅ | ❌ | ❌ |
+| Provider adapters (ChatGPT, Claude) | ✅ | ❌ | ❌ |
+| Agent loop + session management | ✅ | ❌ | ❌ |
+| Context collection (file tree) | ✅ | ❌ | ❌ |
+| Response parsing | ✅ | ❌ | ❌ |
+| Tool execution | ✅ | ❌ | ❌ |
+| File diff + writing | ✅ | ❌ | ❌ |
+| TUI rendering (pi-tui) | ❌ | ✅ | ❌ |
+| VS Code webview | ❌ | ❌ | ✅ |
+| IPC client | ❌ | ✅ | ✅ |
 
-### Message Parts Pattern
+---
 
-Messages contain typed `parts`:
+## IPC Protocol
 
-```typescript
-type MessagePart =
-  | { type: 'text'; content: string }
-  | { type: 'code'; language: string; content: string }
-  | { type: 'tool'; tool: { name: string; args: Record<string, unknown> }; result?: string }
-```
+CLI exposes a JSON-RPC 2.0 interface over stdin/stdout. Both TUI and VSCode use the same protocol.
 
-Each part type has its own component (`TextPart`, `CodePart`, `ToolPart`). The parent `Message` component switches on type:
+### Methods
 
-```typescript
-// In AssistantMessage.tsx
-{message.parts.map((part, i) => {
-  switch (part.type) {
-    case 'text': return <TextPart key={i} content={part.content} />
-    case 'code': return <CodePart key={i} language={part.language} content={part.content} />
-    case 'tool': return <ToolPart key={i} tool={part.tool} result={part.result} />
-  }
-})}
-```
-
-### Store Pattern
+| Method | Params | Returns | Description |
+|--------|--------|---------|-------------|
+| `tools.list` | — | `ToolListItem[]` | List available tools |
+| `tools.call` | `{ name: string, args: Record<string, unknown> }` | `ToolResult` | Execute a tool |
+| `session.start` | `{ projectPath: string, provider?: string }` | `{ sessionId: string }` | Start a new session |
+| `session.send` | `{ sessionId: string, message: string }` | `StreamResponse` (streaming) | Send a message |
+| `session.stop` | `{ sessionId: string }` | `void` | Abort current turn |
+| `providers.list` | — | `ProviderInfo[]` | List available AI providers |
 
-Each store is in its own file with co-located types:
+### Streaming Response
 
 ```typescript
-// stores/chat-store.ts
-interface ChatStore {
-  messages: Message[]
-  status: 'idle' | 'streaming' | 'error'
-  // ...
+interface StreamResponse {
+  type: "text" | "code" | "tool" | "done" | "error";
+  content: string;
+  toolName?: string;      // when type === "tool"
+  toolArgs?: unknown;     // when type === "tool"
+  toolResult?: string;    // when type === "tool" (after execution)
 }
-export const useChatStore = create<ChatStore>((set) => ({ /* ... */ }))
 ```
 
-Export from `stores/index.ts` for clean imports:
+---
+
+## Type Sharing
+
+Core domain types live in `packages/shared/src/types.ts`:
 
 ```typescript
-export { useChatStore, type Message, type MessagePart } from './chat-store'
-```
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  parts: MessagePart[];
+  timestamp: number;
+}
 
-### Hook Pattern
+export type MessagePart =
+  | { type: "text"; content: string }
+  | { type: "code"; language: string; content: string }
+  | { type: "tool"; tool: { name: string; args: Record<string, unknown> }; result?: string };
 
-Custom hooks encapsulate logic and state:
+export interface ToolDef {
+  id: string;
+  description: string;
+  parameters: JsonSchema;
+}
 
-```typescript
-// hooks/useAutoResize.ts
-export function useAutoResize(options: UseAutoResizeOptions = {}) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
-  const resize = useCallback(() => { /* ... */ }, [])
-  return { textareaRef, resize }
+export interface ToolResult {
+  title: string;
+  output: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface FileChange {
+  path: string;
+  action: "create" | "update" | "delete";
+  content?: string;
+  diff?: string;
 }
 ```
 
 ---
 
+## Key Design Decisions
+
+### 1. Long-Running CLI Daemon
+
+CLI stays alive between turns, maintaining browser connection and session state. Starting a new browser + logging in per prompt is slow (5-15 seconds). A persistent connection enables sub-second response for subsequent turns.
+
+### 2. Two-Phase Context Collection
+
+Before sending a prompt, CLI first asks the LLM which files it needs, then reads only those files:
+
+1. Send prompt + file tree to LLM → LLM returns list of needed files
+2. CLI reads those files
+3. Send files + prompt to LLM → LLM returns structured response
+
+### 3. Format-Agnostic Parser
+
+Parser tries multiple strategies (structured, markdown, JSON) in chain until one succeeds. LLMs are inconsistent in output format.
+
+### 4. Diff Preview Before Apply
+
+File changes are shown as a diff to the user for approval before writing. Prevents accidental data loss.
+
+---
+
 ## File Naming Conventions
 
 | Type | Convention | Example |
 |------|-----------|---------|
 | Components | PascalCase | `ChatLayout.tsx`, `CodePart.tsx` |
-| Stores | kebab-case | `chat-store.ts`, `ui-panel-store.ts` |
-| Hooks | camelCase with `use` prefix | `useAutoResize.ts` |
-| Utilities | camelCase | `file-tree.ts`, `differ.ts` |
-| Types/Interfaces | PascalCase | `types.ts` exports `FileChange`, `ParsedResponse` |
+| Stores | kebab-case | `chat-store.ts` |
+| IPC client | camelCase | `ipc/client.ts` |
+| Provider adapters | camelCase | `chatgpt.ts` |
+| Tool implementations | camelCase | `read.ts`, `write.ts` |
 
 ---
 
@@ -184,7 +277,8 @@ export function useAutoResize(options: UseAutoResizeOptions = {}) {
 - **Context layer** (`apps/cli/src/context/`) — File tree, context compilation
 - **Parser layer** (`apps/cli/src/parser/`) — Response parsing (JSON/markdown/tool)
 - **Applier layer** (`apps/cli/src/applier/`) — File writing, diff generation
-- **UI components** (`apps/tui/src/components/`) — React components
+- **Tools layer** (`apps/cli/src/tools/`) — Tool definitions and execution
+- **UI components** (`apps/tui/src/`, `apps/vscode/src/`) — Rendering only
 
 ### 2. Check existing patterns
 
@@ -197,35 +291,26 @@ Before adding code, verify:
 
 If a file exceeds ~150 lines, decompose:
 - Extract sub-components
-- Move helper functions to `lib/` or `utils/`
+- Move helper functions to utils
 - Split store logic into separate files
 
-### 4. Testing
-
-- **Components** — React Testing Library
-- **Stores** — Unit tests for state transitions
-- **IPC** — Integration tests with mock backend
-- **E2E** — Playwright for full flow
-
 ---
 
-## Key invariants
+## Key Invariants
 
-1. **Components are dumb** — They receive props and render UI; business logic lives in stores/hooks
-2. **Stores are flat** — No nested store composition; use selectors for derived state
-3. **IPC is centralized** — All TUI→backend communication goes through `ipc/client.ts`
-4. **Types are shared** — Core domain types (`FileChange`, `ParsedResponse`) live in `packages/shared`
-5. **DOM adapters are isolated** — ChatGPT/Claude adapters in `browser/` can be swapped without changing core logic
+1. **Frontends are dumb** — TUI and VSCode only render UI and send/receive IPC. All logic is in CLI.
+2. **IPC is the only bridge** — No shared state between frontends and CLI.
+3. **Types are centralized** — Core domain types live in `packages/shared`. No duplicate type definitions.
+4. **Providers are swappable** — ChatGPT/Claude adapters in `browser/providers/` can be swapped without changing core logic.
+5. **Parser is chain-based** — Multiple extractors tried in order until one succeeds.
 
 ---
 
-## Deferred Items (Not Yet Implemented)
+## Deferred Items
 
-- Rust TUI for richer terminal UI
-- Provider adapters (Claude, Gemini)
-- Context intelligence (graphify/contextcarry integration)
-- VS Code extension
-- Autonomous multi-step agents
-- Vector DB / semantic search
+- **MCP server integration** — Expose tools via Model Context Protocol
+- **Storage layer** — Persistent session history across restarts
+- **Claude/Gemini providers** — Additional AI provider adapters
+- **Rust TUI** — Higher-fidelity terminal rendering (only if performance demands)
 
 Don't implement these unless explicitly requested.
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..0e7f062f
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,256 @@
+# FreeCode Agent Guide
+
+> How to work on this codebase — architectural principles, patterns, and practices.
+
+## Project Overview
+
+FreeCode is a CLI tool that drives AI coding assistants (ChatGPT, Claude, Gemini) via browser automation to assist with coding tasks. The architecture uses a **thin-client model**: multiple frontends (TUI, VS Code extension) delegate all intelligence to a shared CLI backend via JSON-RPC over stdin/stdout.
+
+The system uses a two-phase approach: the AI first returns which files it needs, then receives those files + prompt and returns structured file changes.
+
+---
+
+## Architecture
+
+**TUI and VSCode are pure presentation layers. All business logic lives in CLI.**
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                          TUI                                 │
+│              (apps/tui) — pure UI shell                    │
+│         Uses pi-tui for terminal rendering                  │
+│         IPC client sends/receives JSON-RPC                  │
+└──────────────────────────┬──────────────────────────────────┘
+                           │
+                           │ JSON-RPC (stdin/stdout)
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                          CLI Backend                        │
+│              (apps/cli) — ALL intelligence                  │
+│   Browser controller, parser, tools, context engine,        │
+│   agent loop, file applier                                  │
+└──────────────────────────┬──────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                      AI Provider (Browser)                   │
+│                    ChatGPT / Claude / Gemini                 │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Key principle:** TUI and VSCode are pure presentation layers. All business logic lives in CLI.
+
+---
+
+## Project Structure
+
+```
+freecode/
+├── packages/
+│   └── shared/                     # Shared types + IPC protocol ONLY
+│       └── src/
+│           ├── types.ts             # Message, MessagePart, ToolResult,
+│           │                         # FileChange, ParsedResponse
+│           ├── ipc/
+│           │   └── protocol.ts     # JsonRpcRequest/Response, StreamResponse
+│           └── index.ts
+│
+├── apps/
+│   ├── cli/                        # ALL intelligence lives here
+│   │   └── src/
+│   │       ├── server.ts            # JSON-RPC stdin/stdout server
+│   │       ├── agent/              # Agent loop + session management
+│   │       ├── browser/            # Playwright + CDP + provider adapters
+│   │       ├── context/            # File tree + context collection
+│   │       ├── parser/             # Response parsing
+│   │       ├── tools/              # Tool definitions + execution
+│   │       └── applier/            # File diff + write
+│   │
+│   ├── tui/                        # Pure UI shell — no business logic
+│   │   └── src/
+│   │       ├── index.ts            # Entry point: mounts TUI, connects IPC
+│   │       ├── commands/           # TUI-specific commands (model select)
+│   │       ├── ipc/
+│   │       │   └── client.ts       # JSON-RPC client to CLI
+│   │       └── assets/
+│   │
+│   └── vscode/                     # Pure UI shell — no business logic
+│       └── src/
+│           ├── extension.ts        # VS Code extension entry point
+│           ├── chat/               # React webview components
+│           ├── stores/             # Zustand stores (UI state only)
+│           └── ipc/
+│               └── client.ts       # JSON-RPC client to CLI
+│
+└── docs/
+    └── superpowers/
+        ├── specs/                  # Design specifications
+        └── plans/                 # Implementation plans
+```
+
+---
+
+## Boundary: What Lives Where
+
+| Concern | CLI | TUI | VSCode |
+|---------|-----|-----|--------|
+| Browser automation (Playwright/CDP) | ✅ | ❌ | ❌ |
+| Provider adapters (ChatGPT, Claude) | ✅ | ❌ | ❌ |
+| Agent loop + session management | ✅ | ❌ | ❌ |
+| Context collection (file tree) | ✅ | ❌ | ❌ |
+| Response parsing | ✅ | ❌ | ❌ |
+| Tool execution | ✅ | ❌ | ❌ |
+| File diff + writing | ✅ | ❌ | ❌ |
+| TUI rendering (pi-tui) | ❌ | ✅ | ❌ |
+| VS Code webview | ❌ | ❌ | ✅ |
+| IPC client | ❌ | ✅ | ✅ |
+
+---
+
+## IPC Protocol
+
+CLI exposes a JSON-RPC 2.0 interface over stdin/stdout. Both TUI and VSCode use the same protocol.
+
+### Methods
+
+| Method | Params | Returns | Description |
+|--------|--------|---------|-------------|
+| `tools.list` | — | `ToolListItem[]` | List available tools |
+| `tools.call` | `{ name: string, args: Record<string, unknown> }` | `ToolResult` | Execute a tool |
+| `session.start` | `{ projectPath: string, provider?: string }` | `{ sessionId: string }` | Start a new session |
+| `session.send` | `{ sessionId: string, message: string }` | `StreamResponse` (streaming) | Send a message |
+| `session.stop` | `{ sessionId: string }` | `void` | Abort current turn |
+| `providers.list` | — | `ProviderInfo[]` | List available AI providers |
+
+### Streaming Response
+
+```typescript
+interface StreamResponse {
+  type: "text" | "code" | "tool" | "done" | "error";
+  content: string;
+  toolName?: string;      // when type === "tool"
+  toolArgs?: unknown;    // when type === "tool"
+  toolResult?: string;   // when type === "tool" (after execution)
+}
+```
+
+---
+
+## Type Sharing
+
+Core domain types live in `packages/shared/src/types.ts`. No duplicate type definitions in frontends.
+
+```typescript
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  parts: MessagePart[];
+  timestamp: number;
+}
+
+export type MessagePart =
+  | { type: "text"; content: string }
+  | { type: "code"; language: string; content: string }
+  | { type: "tool"; tool: { name: string; args: Record<string, unknown> }; result?: string };
+```
+
+---
+
+## Architectural Principles
+
+### Core Design Principles
+
+1. **SOLID** — Single responsibility, Open-closed, Liskov substitution, Interface segregation, Dependency inversion
+2. **YAGNI** — Only implement what's needed now; avoid speculative generalization
+3. **DRY** — Don't repeat yourself; extract shared logic to single sources of truth
+4. **Decomposition** — Each file/module does one thing well; avoid bloated files
+
+### Thin Client Principles
+
+1. **Zero business logic in frontends** — TUI and VSCode do only rendering and IPC. No browser automation, no file reading, no parsing.
+2. **IPC is the only bridge** — All communication between frontends and CLI goes through JSON-RPC. No shared state.
+3. **CLI owns everything** — Browser controller, providers, context engine, parser, tools, agent loop all live in CLI.
+
+---
+
+## Key Design Decisions
+
+### 1. Long-Running CLI Daemon
+
+CLI stays alive between turns, maintaining browser connection and session state. Starting a new browser + logging in per prompt is slow (5-15 seconds). A persistent connection enables sub-second response for subsequent turns.
+
+### 2. Two-Phase Context Collection
+
+Before sending a prompt, CLI first asks the LLM which files it needs, then reads only those files:
+1. Send prompt + file tree to LLM → LLM returns list of needed files
+2. CLI reads those files
+3. Send files + prompt to LLM → LLM returns structured response
+
+### 3. Format-Agnostic Parser
+
+Parser tries multiple strategies (structured, markdown, JSON) in chain until one succeeds. LLMs are inconsistent in output format.
+
+### 4. Diff Preview Before Apply
+
+File changes are shown as a diff to the user for approval before writing. Prevents accidental data loss.
+
+---
+
+## File Naming Conventions
+
+| Type | Convention | Example |
+|------|-----------|---------|
+| Components | PascalCase | `ChatLayout.tsx`, `CodePart.tsx` |
+| Stores | kebab-case | `chat-store.ts` |
+| IPC client | camelCase | `ipc/client.ts` |
+| Provider adapters | camelCase | `chatgpt.ts` |
+| Tool implementations | camelCase | `read.ts`, `write.ts` |
+| Parser extractors | camelCase | `structured.ts`, `markdown.ts` |
+
+---
+
+## Adding New Features
+
+### 1. Identify the domain
+
+- **Browser layer** (`apps/cli/src/browser/`) — Playwright/CDP, DOM adapters
+- **Context layer** (`apps/cli/src/context/`) — File tree, context compilation
+- **Parser layer** (`apps/cli/src/parser/`) — Response parsing (JSON/markdown/tool)
+- **Applier layer** (`apps/cli/src/applier/`) — File writing, diff generation
+- **Tools layer** (`apps/cli/src/tools/`) — Tool definitions and execution
+- **UI components** (`apps/tui/src/`, `apps/vscode/src/`) — Rendering only
+
+### 2. Check existing patterns
+
+Before adding code, verify:
+- Does a similar pattern exist? Follow it.
+- Is this functionality needed in more than one place? Extract to shared.
+- Does this component do more than one thing? Decompose.
+
+### 3. File limits
+
+If a file exceeds ~150 lines, decompose:
+- Extract sub-components
+- Move helper functions to utils
+- Split store logic into separate files
+
+---
+
+## Key Invariants
+
+1. **Frontends are dumb** — TUI and VSCode only render UI and send/receive IPC. All logic is in CLI.
+2. **IPC is the only bridge** — No shared state between frontends and CLI.
+3. **Types are centralized** — Core domain types live in `packages/shared`. No duplicate type definitions.
+4. **Providers are swappable** — ChatGPT/Claude adapters in `browser/providers/` can be swapped without changing core logic.
+5. **Parser is chain-based** — Multiple extractors tried in order until one succeeds.
+
+---
+
+## Deferred Items
+
+- **MCP server integration** — Expose tools via Model Context Protocol
+- **Storage layer** — Persistent session history across restarts
+- **Claude/Gemini providers** — Additional AI provider adapters
+- **Rust TUI** — Higher-fidelity terminal rendering (only if performance demands)
+
+Don't implement these unless explicitly requested.
\ No newline at end of file
diff --git a/apps/cli/package.json b/apps/cli/package.json
new file mode 100644
index 00000000..c2733cd5
--- /dev/null
+++ b/apps/cli/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@freecode/cli",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "build": "tsc",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@freecode/shared": "workspace:*",
+    "playwright": "^1.42.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "tsx": "^4.0.0",
+    "typescript": "^5.7.0"
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/agent/index.ts b/apps/cli/src/agent/index.ts
new file mode 100644
index 00000000..a2ef2c42
--- /dev/null
+++ b/apps/cli/src/agent/index.ts
@@ -0,0 +1,6 @@
+// =============================================================================
+// Agent Module
+// =============================================================================
+
+export { executePromptCycle } from './loop.js';
+export type { AgentResult, StreamCallback, StreamEvent, ExecutorOptions } from './types.js';
\ No newline at end of file
diff --git a/apps/cli/src/agent/loop.ts b/apps/cli/src/agent/loop.ts
new file mode 100644
index 00000000..fc819df6
--- /dev/null
+++ b/apps/cli/src/agent/loop.ts
@@ -0,0 +1,138 @@
+// =============================================================================
+// Agent Loop
+// Orchestrates a single agent turn: context → prompt → parse → apply
+// =============================================================================
+
+import { PlaywrightBrowserController } from '../browser/controller.js';
+import { createDefaultProviders, getProvider } from '../browser/providers/index.js';
+import { collectContext } from '../context/collector.js';
+import { createDefaultStrategies } from '../context/strategies/index.js';
+import { parse } from '../parser/index.js';
+import { applyChanges } from '../applier/index.js';
+import { logger } from '../utils/logger.js';
+import type { StreamCallback, AgentResult, StreamEvent } from './types.js';
+
+createDefaultProviders();
+createDefaultStrategies();
+
+export interface ExecutorOptions {
+  prompt: string;
+  provider: string;
+  projectPath: string;
+  contextOptions?: {
+    maxDepth?: number;
+    ignorePatterns?: string[];
+  };
+}
+
+export async function executePromptCycle(
+  options: ExecutorOptions,
+  onStream?: StreamCallback
+): Promise<AgentResult> {
+  const { prompt, provider, projectPath, contextOptions } = options;
+  const errors: string[] = [];
+
+  const providerDef = getProvider(provider);
+  if (!providerDef) {
+    return { success: false, filesCreated: 0, errors: [`Unknown provider: ${provider}`] };
+  }
+
+  const controller = new PlaywrightBrowserController();
+
+  const emit = (event: StreamEvent) => {
+    onStream?.(event);
+  };
+
+  try {
+    emit({ type: 'status', content: 'Connecting to browser...' });
+    await controller.connect();
+    emit({ type: 'status', content: 'Browser connected' });
+
+    emit({ type: 'status', content: `Loading ${providerDef.name}...` });
+    await controller.navigate(providerDef);
+    emit({ type: 'status', content: `${providerDef.name} loaded` });
+
+    emit({ type: 'status', content: 'Collecting project context...' });
+    const contextResult = await collectContext(projectPath, 'file-tree', contextOptions);
+
+    if (!contextResult.success) {
+      errors.push(`Context collection failed: ${contextResult.error}`);
+      return { success: false, filesCreated: 0, errors };
+    }
+
+    const context = contextResult.value;
+
+    const fullPrompt = `Project: ${context.name}
+Path: ${context.projectPath}
+
+File tree:
+${context.tree}
+
+Task: ${prompt}
+
+IMPORTANT: Respond with file operations in this EXACT format:
+FILE: <relative-path>
+\`\`\`
+<file-content>
+\`\`\`
+
+Create or modify files as needed to complete the task.`;
+
+    emit({ type: 'status', content: 'Sending to AI...' });
+    await controller.sendPrompt(fullPrompt);
+    emit({ type: 'status', content: 'Waiting for response...' });
+
+    const response = await controller.waitForResponse();
+    emit({ type: 'status', content: 'Response received' });
+
+    logger.info('Raw response length', { length: response.length });
+
+    if (response.length < 50) {
+      errors.push(`Response too short (${response.length} chars): ${response}`);
+      emit({ type: 'error', content: `Response too short: ${response}` });
+      return { success: false, filesCreated: 0, errors };
+    }
+
+    const parseResult = parse(response);
+
+    if (!parseResult.success) {
+      errors.push(`Parse failed: ${parseResult.error}`);
+      emit({ type: 'error', content: 'Could not parse response' });
+      emit({ type: 'text', content: response.slice(0, 500) + '...' });
+      return { success: false, filesCreated: 0, errors };
+    }
+
+    const parsedResponse = parseResult.response!;
+    emit({ type: 'status', content: `Summary: ${parsedResponse.summary}` });
+
+    const fileChanges = parsedResponse.changes;
+    emit({ type: 'status', content: `Applying ${fileChanges.length} file(s)...` });
+
+    const applyResults = await applyChanges(fileChanges, projectPath);
+    const succeeded = applyResults.filter(r => r.success).length;
+    const failed = applyResults.filter(r => !r.success);
+
+    if (failed.length > 0) {
+      failed.forEach(f => {
+        if (f.error) errors.push(f.error);
+      });
+    }
+
+    emit({ type: 'done', content: `Done! Created ${succeeded}/${fileChanges.length} files` });
+
+    return {
+      success: errors.length === 0,
+      summary: parsedResponse.summary,
+      filesCreated: succeeded,
+      errors,
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    logger.error('Executor failed', { error: errorMessage });
+    errors.push(errorMessage);
+    emit({ type: 'error', content: errorMessage });
+    return { success: false, filesCreated: 0, errors };
+  } finally {
+    await controller.disconnect();
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/agent/types.ts b/apps/cli/src/agent/types.ts
new file mode 100644
index 00000000..4d31d71e
--- /dev/null
+++ b/apps/cli/src/agent/types.ts
@@ -0,0 +1,40 @@
+// =============================================================================
+// Agent Types
+// =============================================================================
+
+import type { FileChange } from '../parser/types.js';
+
+export interface AgentConfig {
+  projectPath: string;
+  provider: string;
+}
+
+export interface ExecutorOptions {
+  prompt: string;
+  provider: string;
+  projectPath: string;
+  contextOptions?: {
+    maxDepth?: number;
+    ignorePatterns?: string[];
+  };
+}
+
+export interface AgentResult {
+  success: boolean;
+  summary?: string;
+  filesCreated: number;
+  errors: string[];
+}
+
+export interface StreamCallback {
+  (event: StreamEvent): void;
+}
+
+export type StreamEvent =
+  | { type: 'status'; content: string }
+  | { type: 'text'; content: string }
+  | { type: 'code'; content: string; language?: string }
+  | { type: 'tool'; toolName: string; args: unknown }
+  | { type: 'tool_result'; toolName: string; result: string }
+  | { type: 'done'; content: string }
+  | { type: 'error'; content: string };
\ No newline at end of file
diff --git a/apps/cli/src/applier/index.ts b/apps/cli/src/applier/index.ts
new file mode 100644
index 00000000..f9b1f16f
--- /dev/null
+++ b/apps/cli/src/applier/index.ts
@@ -0,0 +1,63 @@
+// =============================================================================
+// File Applicator
+// Applies file changes to disk with diff preview
+// =============================================================================
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { logger } from '../utils/logger.js';
+import { ok, err, type Result } from '../utils/result.js';
+import type { FileChange } from '../parser/types.js';
+
+export interface ApplyResult {
+  path: string;
+  success: boolean;
+  error?: string;
+}
+
+export async function applyFileChange(
+  change: FileChange,
+  basePath: string
+): Promise<Result<ApplyResult, string>> {
+  const fullPath = change.path.startsWith('/') ? change.path : `${basePath}/${change.path}`;
+
+  try {
+    if (change.action === 'delete') {
+      if (fs.existsSync(fullPath)) {
+        fs.unlinkSync(fullPath);
+        logger.info('File deleted', { path: change.path });
+      }
+      return ok({ path: change.path, success: true });
+    }
+
+    if (change.content !== undefined) {
+      const dir = path.dirname(fullPath);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+      fs.writeFileSync(fullPath, change.content, 'utf-8');
+      logger.info('File written', { path: change.path, size: change.content.length });
+      return ok({ path: change.path, success: true });
+    }
+
+    return err('No content provided for write/create');
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    logger.error('Failed to apply change', { path: change.path, error: errorMessage });
+    return err(`Failed to ${change.action} ${change.path}: ${errorMessage}`);
+  }
+}
+
+export async function applyChanges(
+  changes: FileChange[],
+  basePath: string
+): Promise<ApplyResult[]> {
+  const results: ApplyResult[] = [];
+
+  for (const change of changes) {
+    const result = await applyFileChange(change, basePath);
+    results.push(result.success ? result.value : { path: change.path, success: false, error: result.error });
+  }
+
+  return results;
+}
\ No newline at end of file
diff --git a/apps/cli/src/browser/controller.ts b/apps/cli/src/browser/controller.ts
new file mode 100644
index 00000000..73d05077
--- /dev/null
+++ b/apps/cli/src/browser/controller.ts
@@ -0,0 +1,125 @@
+// =============================================================================
+// Playwright Browser Controller
+// =============================================================================
+
+import { chromium, type Browser, type Page } from 'playwright';
+import type { BrowserController, BrowserConfig } from './types.js';
+import type { PageAdapter, ProviderDefinition } from './providers/index.js';
+import { logger } from '../utils/logger.js';
+
+export class PlaywrightBrowserController implements BrowserController {
+  private browser: Browser | null = null;
+  private page: Page | null = null;
+  private adapter: PageAdapter | null = null;
+  private config: Required<BrowserConfig>;
+
+  constructor(config: BrowserConfig = {}) {
+    this.config = {
+      cdpUrl: config.cdpUrl || process.env.CDP_URL || 'http://localhost:9222',
+      headless: config.headless ?? false,
+    };
+  }
+
+  setAdapter(adapter: PageAdapter): void {
+    this.adapter = adapter;
+  }
+
+  async connect(): Promise<void> {
+    try {
+      logger.info('Connecting to Chrome via CDP', { url: this.config.cdpUrl });
+      this.browser = await chromium.connectOverCDP(this.config.cdpUrl);
+      const context = this.browser.contexts()[0];
+      this.page = context.pages()[0] || await context.newPage();
+      logger.info('Browser connected successfully');
+    } catch (error) {
+      logger.error('Failed to connect to Chrome', { error: String(error) });
+      throw new Error(
+        `Failed to connect to Chrome at ${this.config.cdpUrl}. ` +
+        'Ensure Chrome is running with: chrome --remote-debugging-port=9222'
+      );
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    if (this.browser) {
+      logger.info('Disconnecting browser');
+      await this.browser.close();
+      this.browser = null;
+      this.page = null;
+    }
+  }
+
+  isConnected(): boolean {
+    return this.browser !== null && this.page !== null;
+  }
+
+  getPage(): Page | null {
+    return this.page;
+  }
+
+  async navigate(provider: ProviderDefinition): Promise<void> {
+    if (!this.page) throw new Error('Not connected');
+    await this.page.goto(provider.config.url);
+    await provider.adapter.waitForLoadState(this.page);
+    this.adapter = provider.adapter;
+  }
+
+  async sendPrompt(prompt: string): Promise<void> {
+    if (!this.page || !this.adapter) {
+      throw new Error('Not connected or adapter not set');
+    }
+
+    if (this.adapter.waitForInput) {
+      await this.adapter.waitForInput(this.page);
+    }
+
+    const input = this.adapter.getInputLocator(this.page);
+    await input.fill(prompt);
+    const submitButton = this.adapter.getSubmitButton(this.page);
+    await submitButton.click();
+  }
+
+  async waitForResponse(): Promise<string> {
+    if (!this.page || !this.adapter) {
+      throw new Error('Not connected or adapter not set');
+    }
+
+    const responseLocator = this.adapter.getResponseLocator(this.page);
+
+    // Wait for streaming to finish
+    let streaming = await this.adapter.isStreaming(this.page);
+    while (streaming) {
+      logger.debug('Streaming in progress...');
+      await this.page.waitForTimeout(1000);
+      streaming = await this.adapter.isStreaming(this.page);
+    }
+
+    // Wait for response to appear and have content
+    logger.debug('Waiting for response to have content');
+    try {
+      await responseLocator.last().waitFor({ state: 'visible', timeout: 60000 });
+      // Wait a bit for content to populate
+      await this.page.waitForTimeout(3000);
+
+      // Try multiple times to get text
+      let text = '';
+      for (let i = 0; i < 5; i++) {
+        text = await responseLocator.last().innerText({ timeout: 5000 }).catch(() => '');
+        if (text.length > 0) break;
+        logger.debug('Retrying get text', { attempt: i + 1 });
+        await this.page.waitForTimeout(1000);
+      }
+
+      logger.debug('Response received', { length: text.length });
+      return text;
+    } catch (e) {
+      logger.error('Timeout waiting for response content');
+      throw new Error('Timeout waiting for ChatGPT response content');
+    }
+  }
+
+  async executePrompt(prompt: string): Promise<string> {
+    await this.sendPrompt(prompt);
+    return this.waitForResponse();
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/browser/providers/chatgpt.ts b/apps/cli/src/browser/providers/chatgpt.ts
new file mode 100644
index 00000000..12804356
--- /dev/null
+++ b/apps/cli/src/browser/providers/chatgpt.ts
@@ -0,0 +1,35 @@
+// =============================================================================
+// ChatGPT Provider Adapter
+// =============================================================================
+
+import type { Page, Locator } from 'playwright';
+import type { PageAdapter } from './types.js';
+
+export class ChatGPTAdapter implements PageAdapter {
+  name = 'chatgpt';
+
+  getInputLocator(page: Page): Locator {
+    return page.getByRole('textbox', { name: 'Chat with ChatGPT' }).first();
+  }
+
+  async waitForInput(page: Page): Promise<void> {
+    await page.getByRole('textbox', { name: 'Chat with ChatGPT' }).first().waitFor({ state: 'visible', timeout: 10000 });
+  }
+
+  getSubmitButton(page: Page): Locator {
+    return page.locator('button[data-testid="send-button"]').first();
+  }
+
+  getResponseLocator(page: Page): Locator {
+    return page.locator('div[data-message-author-role="assistant"]').last();
+  }
+
+  async isStreaming(page: Page): Promise<boolean> {
+    const stopButton = page.locator('button[aria-label="Stop generating"]');
+    return stopButton.isVisible().catch(() => false);
+  }
+
+  async waitForLoadState(page: Page): Promise<void> {
+    await page.waitForLoadState('networkidle');
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/browser/providers/index.ts b/apps/cli/src/browser/providers/index.ts
new file mode 100644
index 00000000..f28a8aa6
--- /dev/null
+++ b/apps/cli/src/browser/providers/index.ts
@@ -0,0 +1,40 @@
+// =============================================================================
+// Provider Registry
+// =============================================================================
+
+import type { PageAdapter, ProviderConfig } from './types.js';
+export type { PageAdapter, ProviderConfig } from './types.js';
+
+import { ChatGPTAdapter } from './chatgpt.js';
+
+export interface ProviderDefinition {
+  id: string;
+  name: string;
+  adapter: PageAdapter;
+  config: ProviderConfig;
+}
+
+const providers: Map<string, ProviderDefinition> = new Map();
+
+export function registerProvider(definition: ProviderDefinition): void {
+  providers.set(definition.id, definition);
+}
+
+export function getProvider(id: string): ProviderDefinition | undefined {
+  return providers.get(id);
+}
+
+export function listProviders(): ProviderDefinition[] {
+  return Array.from(providers.values());
+}
+
+export function createDefaultProviders(): void {
+  registerProvider({
+    id: 'chatgpt',
+    name: 'ChatGPT',
+    adapter: new ChatGPTAdapter(),
+    config: {
+      url: 'https://chatgpt.com',
+    },
+  });
+}
\ No newline at end of file
diff --git a/apps/cli/src/browser/providers/types.ts b/apps/cli/src/browser/providers/types.ts
new file mode 100644
index 00000000..bd6552a8
--- /dev/null
+++ b/apps/cli/src/browser/providers/types.ts
@@ -0,0 +1,20 @@
+// =============================================================================
+// Page Adapter Interface
+// =============================================================================
+
+import type { Locator, Page } from 'playwright';
+
+export interface PageAdapter {
+  name: string;
+  getInputLocator(page: Page): Locator;
+  waitForInput?(page: Page): Promise<void>;
+  getSubmitButton(page: Page): Locator;
+  getResponseLocator(page: Page): Locator;
+  isStreaming(page: Page): Promise<boolean>;
+  waitForLoadState(page: Page): Promise<void>;
+}
+
+export interface ProviderConfig {
+  url: string;
+  waitForNetworkIdle?: boolean;
+}
\ No newline at end of file
diff --git a/apps/cli/src/browser/types.ts b/apps/cli/src/browser/types.ts
new file mode 100644
index 00000000..a66ffde0
--- /dev/null
+++ b/apps/cli/src/browser/types.ts
@@ -0,0 +1,21 @@
+// =============================================================================
+// Browser Controller Interface
+// =============================================================================
+
+import type { Page, Browser } from 'playwright';
+
+export interface BrowserController {
+  connect(): Promise<void>;
+  disconnect(): Promise<void>;
+  isConnected(): boolean;
+  getPage(): Page | null;
+  navigate(provider: unknown): Promise<void>;
+  sendPrompt(prompt: string): Promise<void>;
+  waitForResponse(): Promise<string>;
+  executePrompt(prompt: string): Promise<string>;
+}
+
+export interface BrowserConfig {
+  cdpUrl?: string;
+  headless?: boolean;
+}
\ No newline at end of file
diff --git a/apps/cli/src/context/collector.ts b/apps/cli/src/context/collector.ts
new file mode 100644
index 00000000..1bbcc393
--- /dev/null
+++ b/apps/cli/src/context/collector.ts
@@ -0,0 +1,28 @@
+// =============================================================================
+// Context Collector
+// Orchestrates context collection using registered strategies
+// =============================================================================
+
+import type { ProjectContext, ContextOptions } from './types.js';
+import { getStrategy } from './strategies/index.js';
+import { logger } from '../utils/logger.js';
+import { ok, err, type Result } from '../utils/result.js';
+
+export async function collectContext(
+  projectPath: string,
+  strategyName = 'file-tree',
+  options?: ContextOptions
+): Promise<Result<ProjectContext, string>> {
+  try {
+    const strategy = getStrategy(strategyName);
+    if (!strategy) {
+      return err(`Unknown context strategy: ${strategyName}`);
+    }
+
+    const context = await strategy.collect(projectPath, options);
+    return ok(context);
+  } catch (error) {
+    logger.error('Context collection failed', { error: String(error) });
+    return err(`Failed to collect context: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/context/strategies/file-tree.ts b/apps/cli/src/context/strategies/file-tree.ts
new file mode 100644
index 00000000..03509e62
--- /dev/null
+++ b/apps/cli/src/context/strategies/file-tree.ts
@@ -0,0 +1,99 @@
+// =============================================================================
+// File Tree Context Strategy
+// Collects file tree and file contents up to maxDepth
+// =============================================================================
+
+import * as fs from 'fs';
+import * as path from 'path';
+import type { ContextStrategy, ContextOptions, ProjectContext, ContextMetadata } from '../types.js';
+import { logger } from '../../utils/logger.js';
+
+const DEFAULT_IGNORE = [
+  'node_modules', '.git', 'dist', 'build', '.next', '.turbo',
+  '.vscode', '.idea', '*.lock', '*.log', '.cache', '.temp',
+];
+
+export class FileTreeStrategy implements ContextStrategy {
+  name = 'file-tree';
+
+  async collect(projectPath: string, options: ContextOptions = {}): Promise<ProjectContext> {
+    const {
+      maxDepth = 3,
+      ignorePatterns = DEFAULT_IGNORE,
+    } = options;
+
+    logger.info('Collecting project context', { projectPath, maxDepth });
+
+    const { tree, files } = this.gatherContext(projectPath, ignorePatterns, maxDepth);
+
+    const metadata: ContextMetadata = {
+      collectedAt: Date.now(),
+      fileCount: Object.keys(files).length,
+      totalSize: Object.values(files).reduce((acc, content) => acc + content.length, 0),
+    };
+
+    logger.info('Context collected', { fileCount: metadata.fileCount });
+
+    return {
+      projectPath,
+      name: path.basename(projectPath),
+      tree,
+      files,
+      metadata,
+    };
+  }
+
+  private gatherContext(
+    dirPath: string,
+    patterns: string[],
+    maxDepth: number,
+    currentDepth = 0
+  ): { tree: string; files: Record<string, string> } {
+    let tree = '';
+    const files: Record<string, string> = {};
+
+    if (currentDepth > maxDepth) return { tree, files };
+
+    try {
+      const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        const fullPath = path.join(dirPath, entry.name);
+        if (this.shouldIgnore(fullPath, patterns)) continue;
+
+        const indent = currentDepth > 0 ? '  '.repeat(currentDepth) : '';
+        const icon = entry.isDirectory() ? '📁 ' : '📄 ';
+        tree += `${indent}${icon}${entry.name}${entry.isDirectory() ? '/' : ''}\n`;
+
+        if (entry.isFile()) {
+          const relativePath = path.relative(process.cwd(), fullPath);
+          files[relativePath] = this.readFile(fullPath);
+        } else if (entry.isDirectory()) {
+          const childContext = this.gatherContext(fullPath, patterns, maxDepth, currentDepth + 1);
+          tree += childContext.tree;
+          Object.assign(files, childContext.files);
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+
+    return { tree, files };
+  }
+
+  private shouldIgnore(filePath: string, patterns: string[]): boolean {
+    const basename = path.basename(filePath);
+    return patterns.some((pattern) => {
+      if (pattern.startsWith('*')) return basename.endsWith(pattern.slice(1));
+      return basename === pattern;
+    });
+  }
+
+  private readFile(filePath: string): string {
+    try {
+      return fs.readFileSync(filePath, 'utf-8');
+    } catch {
+      return `// Error reading: ${filePath}`;
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/context/strategies/index.ts b/apps/cli/src/context/strategies/index.ts
new file mode 100644
index 00000000..7f722cef
--- /dev/null
+++ b/apps/cli/src/context/strategies/index.ts
@@ -0,0 +1,22 @@
+// =============================================================================
+// Context Strategies Registry
+// =============================================================================
+
+export { FileTreeStrategy } from './file-tree.js';
+
+import type { ContextStrategy } from '../types.js';
+import { FileTreeStrategy } from './file-tree.js';
+
+const strategies: Map<string, ContextStrategy> = new Map();
+
+export function registerStrategy(strategy: ContextStrategy): void {
+  strategies.set(strategy.name, strategy);
+}
+
+export function getStrategy(name: string): ContextStrategy | undefined {
+  return strategies.get(name);
+}
+
+export function createDefaultStrategies(): void {
+  registerStrategy(new FileTreeStrategy());
+}
\ No newline at end of file
diff --git a/apps/cli/src/context/types.ts b/apps/cli/src/context/types.ts
new file mode 100644
index 00000000..26819514
--- /dev/null
+++ b/apps/cli/src/context/types.ts
@@ -0,0 +1,28 @@
+// =============================================================================
+// Context Types
+// =============================================================================
+
+export interface ProjectContext {
+  projectPath: string;
+  name: string;
+  tree: string;
+  files: Record<string, string>;
+  metadata: ContextMetadata;
+}
+
+export interface ContextMetadata {
+  collectedAt: number;
+  fileCount: number;
+  totalSize: number;
+}
+
+export interface ContextStrategy {
+  name: string;
+  collect(projectPath: string, options?: ContextOptions): Promise<ProjectContext>;
+}
+
+export interface ContextOptions {
+  maxDepth?: number;
+  ignorePatterns?: string[];
+  includePatterns?: string[];
+}
\ No newline at end of file
diff --git a/apps/cli/src/parser/extractors/index.ts b/apps/cli/src/parser/extractors/index.ts
new file mode 100644
index 00000000..b2a11460
--- /dev/null
+++ b/apps/cli/src/parser/extractors/index.ts
@@ -0,0 +1,28 @@
+// =============================================================================
+// Parser Extractors Registry
+// =============================================================================
+
+export { StructuredExtractor } from './structured.js';
+export { MarkdownExtractor } from './markdown.js';
+export { JsonExtractor } from './json.js';
+
+import type { ParserStrategy } from '../types.js';
+import { StructuredExtractor } from './structured.js';
+import { MarkdownExtractor } from './markdown.js';
+import { JsonExtractor } from './json.js';
+
+const extractors: Map<string, ParserStrategy> = new Map();
+
+export function registerExtractor(extractor: ParserStrategy): void {
+  extractors.set(extractor.name, extractor);
+}
+
+export function getExtractor(name: string): ParserStrategy | undefined {
+  return extractors.get(name);
+}
+
+export function createDefaultExtractors(): void {
+  registerExtractor(new StructuredExtractor());
+  registerExtractor(new MarkdownExtractor());
+  registerExtractor(new JsonExtractor());
+}
\ No newline at end of file
diff --git a/apps/cli/src/parser/extractors/json.ts b/apps/cli/src/parser/extractors/json.ts
new file mode 100644
index 00000000..8718212b
--- /dev/null
+++ b/apps/cli/src/parser/extractors/json.ts
@@ -0,0 +1,51 @@
+// =============================================================================
+// JSON Extractor
+// Matches { "changes": [{ "path": "...", "content": "..." }] }
+// =============================================================================
+
+import type { ParserStrategy, ParserResult, FileChange } from '../types.js';
+
+export class JsonExtractor implements ParserStrategy {
+  name = 'json';
+
+  parse(raw: string): ParserResult {
+    // Try to find a JSON object with changes array
+    const jsonMatch = raw.match(/\{[\s\S]*"changes"\s*:\s*\[[\s\S]*\]/);
+    if (!jsonMatch) {
+      return { success: false, error: 'No JSON changes structure found' };
+    }
+
+    try {
+      const parsed = JSON.parse(jsonMatch[0]);
+      const changes: FileChange[] = [];
+
+      if (Array.isArray(parsed.changes)) {
+        for (const item of parsed.changes) {
+          if (item.path) {
+            changes.push({
+              path: item.path,
+              action: item.action || 'create',
+              content: item.content,
+            });
+          }
+        }
+      }
+
+      if (changes.length === 0) {
+        return { success: false, error: 'No valid changes found in JSON' };
+      }
+
+      return {
+        success: true,
+        response: {
+          summary: parsed.summary || 'Files from JSON',
+          changes,
+          raw,
+          parserUsed: this.name,
+        },
+      };
+    } catch {
+      return { success: false, error: 'Failed to parse JSON' };
+    }
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/parser/extractors/markdown.ts b/apps/cli/src/parser/extractors/markdown.ts
new file mode 100644
index 00000000..9cc68b48
--- /dev/null
+++ b/apps/cli/src/parser/extractors/markdown.ts
@@ -0,0 +1,41 @@
+// =============================================================================
+// Markdown Extractor
+// Matches code blocks without FILE: prefix
+// =============================================================================
+
+import type { ParserStrategy, ParserResult, FileChange } from '../types.js';
+
+export class MarkdownExtractor implements ParserStrategy {
+  name = 'markdown';
+
+  parse(raw: string): ParserResult {
+    const changes: FileChange[] = [];
+
+    // Match code blocks with language hint (e.g. ```typescript filename.ts)
+    const namedCodeBlock = /```[\w]*\s*([^\n\t]+?)\n([\s\S]*?)```/g;
+    let match;
+    while ((match = namedCodeBlock.exec(raw)) !== null) {
+      const filename = match[1].trim();
+      const content = match[2].trim();
+
+      // Skip if it doesn't look like a filename
+      if (filename && !filename.startsWith('#') && content.length > 5) {
+        changes.push({ path: filename, action: 'create', content });
+      }
+    }
+
+    if (changes.length === 0) {
+      return { success: false, error: 'No markdown code blocks found' };
+    }
+
+    return {
+      success: true,
+      response: {
+        summary: 'Files from markdown code blocks',
+        changes,
+        raw,
+        parserUsed: this.name,
+      },
+    };
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/parser/extractors/structured.ts b/apps/cli/src/parser/extractors/structured.ts
new file mode 100644
index 00000000..12c8546a
--- /dev/null
+++ b/apps/cli/src/parser/extractors/structured.ts
@@ -0,0 +1,70 @@
+// =============================================================================
+// Structured Extractor
+// Matches FILE: path followed by code blocks
+// =============================================================================
+
+import type { ParserStrategy, ParserResult, FileChange } from '../types.js';
+
+export class StructuredExtractor implements ParserStrategy {
+  name = 'structured';
+
+  parse(raw: string): ParserResult {
+    const changes: FileChange[] = [];
+
+    // Pattern 1: FILE: path followed by code block ```...```
+    const codeBlockPattern = /FILE:\s*(.+?)\n```[\w]*\n([\s\S]*?)```/g;
+    let match;
+    while ((match = codeBlockPattern.exec(raw)) !== null) {
+      const path = match[1].trim();
+      const content = match[2].trim();
+      if (path && content && !changes.some(c => c.path === path)) {
+        changes.push({ path, action: 'create', content });
+      }
+    }
+
+    // Pattern 2: FILE: path followed by content (no code block)
+    const noCodeBlockPattern = /FILE:\s*([^\n]+)\n\n([\s\S]*?)(?=\nFILE:|$)/g;
+    while ((match = noCodeBlockPattern.exec(raw)) !== null) {
+      const path = match[1].trim();
+      let content = match[2];
+
+      // Skip if content starts with header-like text that indicates bad match
+      if (content.startsWith('Markdown\n') || content.startsWith('markdown\n') ||
+          content.startsWith('Json\n') || content.startsWith('json\n')) {
+        content = content.replace(/^(?:Markdown|Json)\n*/i, '');
+      }
+
+      if (path && content && content.length > 5 && !changes.some(c => c.path === path)) {
+        changes.push({ path, action: 'create', content: content.trim() });
+      }
+    }
+
+    if (changes.length === 0) {
+      return { success: false, error: 'No structured file blocks found' };
+    }
+
+    return {
+      success: true,
+      response: {
+        summary: this.extractSummary(raw),
+        changes,
+        raw,
+        parserUsed: this.name,
+      },
+    };
+  }
+
+  private extractSummary(raw: string): string {
+    const cleaned = raw
+      .replace(/FILE:\s*[^\n]+\n?/g, '')
+      .replace(/```[\s\S]*?```/g, '')
+      .replace(/^#+\s*/gm, '')
+      .trim();
+
+    const lines = cleaned.split('\n').filter(l => l.trim().length > 10);
+    if (lines.length > 0) {
+      return lines[0].slice(0, 200);
+    }
+    return 'Generated file structure';
+  }
+}
\ No newline at end of file
diff --git a/apps/cli/src/parser/index.ts b/apps/cli/src/parser/index.ts
new file mode 100644
index 00000000..9f6085c7
--- /dev/null
+++ b/apps/cli/src/parser/index.ts
@@ -0,0 +1,6 @@
+// =============================================================================
+// Parser Module
+// =============================================================================
+
+export * from './types.js';
+export { parse, parseWithStrategy, parseWithChain, DEFAULT_PARSER_CHAIN } from './registry.js';
\ No newline at end of file
diff --git a/apps/cli/src/parser/registry.ts b/apps/cli/src/parser/registry.ts
new file mode 100644
index 00000000..66b96c7f
--- /dev/null
+++ b/apps/cli/src/parser/registry.ts
@@ -0,0 +1,50 @@
+// =============================================================================
+// Parser Registry
+// =============================================================================
+
+import type { ParserResult } from './types.js';
+import { getExtractor, createDefaultExtractors } from './extractors/index.js';
+import { logger } from '../utils/logger.js';
+
+createDefaultExtractors();
+
+export interface ParserRegistryOptions {
+  maxAttempts?: number;
+}
+
+export function parseWithStrategy(
+  raw: string,
+  strategyName: string
+): ParserResult {
+  const extractor = getExtractor(strategyName);
+  if (!extractor) {
+    return { success: false, error: `Unknown strategy: ${strategyName}` };
+  }
+
+  const result = extractor.parse(raw);
+  if (result.success) {
+    logger.debug('Parsing succeeded', { strategy: strategyName });
+  }
+  return result;
+}
+
+export function parseWithChain(raw: string, strategies: string[]): ParserResult {
+  for (const strategy of strategies) {
+    const result = parseWithStrategy(raw, strategy);
+    if (result.success) {
+      return result;
+    }
+  }
+
+  return {
+    success: false,
+    error: 'No parser succeeded',
+  };
+}
+
+export const DEFAULT_PARSER_CHAIN = ['structured', 'markdown', 'json'];
+
+export function parse(raw: string, chain = DEFAULT_PARSER_CHAIN): ParserResult {
+  logger.debug('Parsing response', { chain });
+  return parseWithChain(raw, chain);
+}
\ No newline at end of file
diff --git a/apps/cli/src/parser/types.ts b/apps/cli/src/parser/types.ts
new file mode 100644
index 00000000..8f939c57
--- /dev/null
+++ b/apps/cli/src/parser/types.ts
@@ -0,0 +1,29 @@
+// =============================================================================
+// Parser Types
+// =============================================================================
+
+export type FileAction = 'create' | 'write' | 'delete';
+
+export interface FileChange {
+  path: string;
+  action: FileAction;
+  content?: string;
+}
+
+export interface ParsedResponse {
+  summary: string;
+  changes: FileChange[];
+  raw: string;
+  parserUsed: string;
+}
+
+export interface ParserStrategy {
+  name: string;
+  parse(raw: string): ParserResult;
+}
+
+export interface ParserResult {
+  success: boolean;
+  response?: ParsedResponse;
+  error?: string;
+}
\ No newline at end of file
diff --git a/apps/cli/src/server.ts b/apps/cli/src/server.ts
new file mode 100644
index 00000000..ba498cdc
--- /dev/null
+++ b/apps/cli/src/server.ts
@@ -0,0 +1,215 @@
+// =============================================================================
+// JSON-RPC Server — CLI Backend
+// Handles tools.list, tools.call, session.start, session.send, session.stop, providers.list
+// =============================================================================
+
+import { getTool, listTools } from "./tools/index.js";
+import { executePromptCycle } from "./agent/loop.js";
+import { createDefaultProviders, listProviders } from "./browser/providers/index.js";
+import { logger } from "./utils/logger.js";
+import type { ToolContext } from "./tools/types.js";
+import type { JsonRpcRequest, JsonRpcResponse, SessionConfig } from "@freecode/shared";
+
+// =============================================================================
+// Type Imports
+// =============================================================================
+
+interface ToolListItem {
+  id: string;
+  description: string;
+}
+
+interface ToolCallResult {
+  title: string;
+  output: string;
+  metadata?: Record<string, unknown>;
+}
+
+interface SessionStartResult {
+  sessionId: string;
+}
+
+interface SessionInfo {
+  id: string;
+  projectPath: string;
+  provider: string;
+}
+
+// =============================================================================
+// Session Management
+// =============================================================================
+
+const sessions: Map<string, SessionInfo> = new Map();
+let sessionCounter = 0;
+
+function createSession(config: SessionConfig): SessionInfo {
+  const id = `session-${++sessionCounter}`;
+  const session: SessionInfo = {
+    id,
+    projectPath: config.projectPath,
+    provider: config.provider || "chatgpt",
+  };
+  sessions.set(id, session);
+  return session;
+}
+
+function getSession(id: string): SessionInfo | undefined {
+  return sessions.get(id);
+}
+
+// =============================================================================
+// Response Helpers
+// =============================================================================
+
+function createResponse(id: number | string, result: unknown): JsonRpcResponse {
+  return { jsonrpc: "2.0", id, result };
+}
+
+function createError(
+  id: number | string,
+  code: number,
+  message: string,
+  data?: unknown
+): JsonRpcResponse {
+  return { jsonrpc: "2.0", id, error: { code, message, data } };
+}
+
+// =============================================================================
+// Method Handlers
+// =============================================================================
+
+const methodHandlers: Record<
+  string,
+  (params: Record<string, unknown>) => Promise<unknown>
+> = {
+  // Tool methods
+  "tools.list": async (): Promise<ToolListItem[]> => {
+    return listTools();
+  },
+
+  "tools.call": async (params: Record<string, unknown>): Promise<ToolCallResult> => {
+    const { name, args } = params as { name: string; args: Record<string, unknown> };
+    const tool = getTool(name as string);
+    if (!tool) {
+      throw new Error(`Tool not found: ${name}`);
+    }
+    const ctx: ToolContext = { cwd: process.cwd() };
+    return tool.execute(args, ctx);
+  },
+
+  // Session methods
+  "session.start": async (params: Record<string, unknown>): Promise<SessionStartResult> => {
+    const config = params as unknown as SessionConfig;
+    const session = createSession(config);
+    logger.info("Session started", { sessionId: session.id, provider: session.provider });
+    return { sessionId: session.id };
+  },
+
+  "session.send": async (params: Record<string, unknown>): Promise<unknown> => {
+    const { sessionId, message } = params as { sessionId: string; message: string };
+    const session = getSession(sessionId);
+
+    if (!session) {
+      throw new Error(`Session not found: ${sessionId}`);
+    }
+
+    logger.info("Session send", { sessionId, messageLength: message.length });
+
+    const result = await executePromptCycle(
+      {
+        prompt: message,
+        provider: session.provider,
+        projectPath: session.projectPath,
+      },
+      undefined // TODO: wire up streaming in future
+    );
+
+    return result;
+  },
+
+  "session.stop": async (params: Record<string, unknown>): Promise<void> => {
+    const { sessionId } = params as { sessionId: string };
+    const session = getSession(sessionId);
+    if (session) {
+      sessions.delete(sessionId);
+      logger.info("Session stopped", { sessionId });
+    }
+  },
+
+  // Provider methods
+  "providers.list": async (): Promise<unknown[]> => {
+    return listProviders().map((p) => ({
+      id: p.id,
+      name: p.name,
+      description: `AI provider via ${p.name}`,
+    }));
+  },
+};
+
+// =============================================================================
+// Request Handler
+// =============================================================================
+
+async function handleRequest(request: JsonRpcRequest): Promise<JsonRpcResponse> {
+  try {
+    const handler = methodHandlers[request.method];
+    if (!handler) {
+      return createError(request.id, -32601, `Method not found: ${request.method}`);
+    }
+    const result = await handler(request.params ?? {});
+    return createResponse(request.id, result);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return createError(request.id, -32603, message);
+  }
+}
+
+// =============================================================================
+// Main Server Loop
+// =============================================================================
+
+async function main() {
+  // Initialize providers
+  createDefaultProviders();
+
+  let buffer = "";
+
+  process.stdin.setEncoding("utf-8");
+
+  process.stdin.on("data", async (chunk: string) => {
+    buffer += chunk;
+
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+
+    for (const line of lines) {
+      if (!line.trim()) continue;
+      try {
+        const request = JSON.parse(line) as JsonRpcRequest;
+        const response = await handleRequest(request);
+        process.stdout.write(JSON.stringify(response) + "\n");
+      } catch (e) {
+        const error = e instanceof Error ? e.message : String(e);
+        process.stderr.write(`Parse error: ${error}\n`);
+      }
+    }
+  });
+
+  process.stdin.on("end", () => {
+    if (buffer.trim()) {
+      try {
+        const request = JSON.parse(buffer) as JsonRpcRequest;
+        handleRequest(request).then((r) => {
+          process.stdout.write(JSON.stringify(r) + "\n");
+        });
+      } catch (e) {
+        process.stderr.write(`Final parse error: ${e}\n`);
+      }
+    }
+  });
+}
+
+main().catch((e) => {
+  process.stderr.write(`Server error: ${e}\n`);
+  process.exit(1);
+});
\ No newline at end of file
diff --git a/apps/cli/src/tools/index.ts b/apps/cli/src/tools/index.ts
new file mode 100644
index 00000000..b76546ec
--- /dev/null
+++ b/apps/cli/src/tools/index.ts
@@ -0,0 +1,21 @@
+import { ReadTool } from "./read"
+import { WriteTool } from "./write"
+import type { ToolDef } from "./types"
+
+export type { ToolContext, ToolResult, JsonSchema } from "./types"
+export type { ToolDef }
+
+export const tools = {
+  read: ReadTool,
+  write: WriteTool,
+} as const
+
+export type ToolId = keyof typeof tools
+
+export function getTool(id: string): ToolDef | undefined {
+  return tools[id as ToolId] as ToolDef | undefined
+}
+
+export function listTools(): { id: string; description: string }[] {
+  return Object.values(tools).map((t) => ({ id: t.id, description: t.description }))
+}
\ No newline at end of file
diff --git a/apps/cli/src/tools/read.ts b/apps/cli/src/tools/read.ts
new file mode 100644
index 00000000..c1abcb68
--- /dev/null
+++ b/apps/cli/src/tools/read.ts
@@ -0,0 +1,118 @@
+import * as fs from "fs"
+import * as path from "path"
+import type { ToolDef, ToolContext, ToolResult } from "./types"
+
+interface ReadParams {
+  filePath: string
+  offset?: number
+  limit?: number
+}
+
+const DEFAULT_LIMIT = 2000
+const MAX_LINE_LENGTH = 2000
+const MAX_BYTES = 50 * 1024
+const MAX_BYTES_LABEL = `${MAX_BYTES / 1024} KB`
+
+function isBinaryFile(bytes: Uint8Array): boolean {
+  if (bytes.length === 0) return false
+  let nonPrintableCount = 0
+  for (let i = 0; i < bytes.length; i++) {
+    if (bytes[i] === 0) return true
+    if (bytes[i] < 9 || (bytes[i] > 13 && bytes[i] < 32)) {
+      nonPrintableCount++
+    }
+  }
+  return nonPrintableCount / bytes.length > 0.3
+}
+
+function readLines(
+  filepath: string,
+  opts: { limit: number; offset: number },
+): { raw: string[]; count: number; cut: boolean; more: boolean } {
+  const content = fs.readFileSync(filepath, "utf-8")
+  const allLines = content.split("\n")
+  const start = opts.offset - 1
+  const raw = allLines.slice(start, start + opts.limit)
+  const count = allLines.length
+  const more = start + opts.limit < count
+  const cut = raw.join("\n").length > MAX_BYTES || raw.length >= opts.limit
+
+  return { raw, count, cut, more }
+}
+
+export const ReadTool: ToolDef<ReadParams> = {
+  id: "read",
+  description: "Read file contents",
+  parameters: {
+    type: "object",
+    properties: {
+      filePath: { description: "The absolute path to the file or directory to read" },
+      offset: { description: "The line number to start reading from (1-indexed)" },
+      limit: { description: "The maximum number of lines to read (defaults to 2000)" },
+    },
+    required: ["filePath"],
+  },
+  execute: async (params: ReadParams, ctx: ToolContext): Promise<ToolResult> => {
+    let filepath = params.filePath
+    if (!path.isAbsolute(filepath)) {
+      filepath = path.resolve(ctx.cwd, filepath)
+    }
+
+    const stat = fs.statSync(filepath)
+
+    if (stat.isDirectory()) {
+      const items = fs.readdirSync(filepath).sort()
+      const offset = params.offset || 1
+      const limit = params.limit ?? DEFAULT_LIMIT
+      const start = offset - 1
+      const sliced = items.slice(start, start + limit)
+      const truncated = start + sliced.length < items.length
+
+      return {
+        title: path.basename(filepath),
+        output: [
+          `<path>${filepath}</path>`,
+          `<type>directory</type>`,
+          `<entries>`,
+          sliced.join("\n"),
+          truncated
+            ? `\n(Showing ${sliced.length} of ${items.length} entries)`
+            : `\n(${items.length} entries)`,
+          `</entries>`,
+        ].join("\n"),
+        metadata: { truncated },
+      }
+    }
+
+    const sample = fs.readFileSync(filepath)
+    if (isBinaryFile(sample)) {
+      return { title: path.basename(filepath), output: `Cannot read binary file: ${filepath}` }
+    }
+
+    const lines = readLines(filepath, {
+      limit: params.limit ?? DEFAULT_LIMIT,
+      offset: params.offset || 1,
+    })
+
+    let output = [`<path>${filepath}</path>`, `<type>file</type>`, "<content>\n"].join("\n")
+    output += lines.raw.map((line, i) => `${i + (params.offset || 1)}: ${line}`).join("\n")
+
+    const last = (params.offset || 1) + lines.raw.length - 1
+    const next = last + 1
+
+    if (lines.cut) {
+      output += `\n\n(Output capped at ${MAX_BYTES_LABEL}. Showing lines ${params.offset || 1}-${last}. Use offset=${next} to continue.)`
+    } else if (lines.more) {
+      output += `\n\n(Showing lines ${params.offset || 1}-${last} of ${lines.count}. Use offset=${next} to continue.)`
+    } else {
+      output += `\n\n(End of file - total ${lines.count} lines)`
+    }
+    output += "\n</content>"
+
+    return {
+      title: path.basename(filepath),
+      output,
+      metadata: { truncated: lines.cut || lines.more, lines: lines.count },
+    }
+  },
+}
\ No newline at end of file
diff --git a/apps/cli/src/tools/types.ts b/apps/cli/src/tools/types.ts
new file mode 100644
index 00000000..293e10ea
--- /dev/null
+++ b/apps/cli/src/tools/types.ts
@@ -0,0 +1,25 @@
+export interface ToolContext {
+  cwd: string
+  abort?: AbortSignal
+}
+
+export interface ToolResult {
+  title: string
+  output: string
+  metadata?: Record<string, unknown>
+}
+
+export interface ToolDef<P = unknown, R extends ToolResult = ToolResult> {
+  id: string
+  description: string
+  parameters: JsonSchema
+  execute: (params: P, ctx: ToolContext) => Promise<R>
+}
+
+export type ToolRegistry = Record<string, ToolDef>
+
+export interface JsonSchema {
+  type: string
+  properties?: Record<string, { description?: string; type?: string }>
+  required?: string[]
+}
\ No newline at end of file
diff --git a/apps/cli/src/tools/write.ts b/apps/cli/src/tools/write.ts
new file mode 100644
index 00000000..9a6cac11
--- /dev/null
+++ b/apps/cli/src/tools/write.ts
@@ -0,0 +1,49 @@
+import * as fs from "fs"
+import * as path from "path"
+import type { ToolDef, ToolContext, ToolResult } from "./types"
+
+interface WriteParams {
+  content: string
+  filePath: string
+}
+
+export const WriteTool: ToolDef<WriteParams> = {
+  id: "write",
+  description: "Create or overwrite files",
+  parameters: {
+    type: "object",
+    properties: {
+      content: { description: "The content to write to the file" },
+      filePath: { description: "The absolute path to the file to write" },
+    },
+    required: ["content", "filePath"],
+  },
+  execute: async (params: WriteParams, ctx: ToolContext): Promise<ToolResult> => {
+    let filepath = params.filePath
+    if (!path.isAbsolute(filepath)) {
+      filepath = path.resolve(ctx.cwd, filepath)
+    }
+
+    const dir = path.dirname(filepath)
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true })
+    }
+
+    if (params.content === '') {
+      if (fs.existsSync(filepath)) {
+        fs.unlinkSync(filepath)
+        return { title: path.basename(filepath), output: 'File deleted.', metadata: { filepath } }
+      }
+      return { title: path.basename(filepath), output: 'File not found.', metadata: { filepath } }
+    }
+
+    const exists = fs.existsSync(filepath)
+    fs.writeFileSync(filepath, params.content, 'utf-8')
+
+    return {
+      title: path.basename(filepath),
+      output: exists ? 'File updated successfully.' : 'File created successfully.',
+      metadata: { filepath, exists },
+    }
+  },
+}
\ No newline at end of file
diff --git a/apps/cli/src/utils/logger.ts b/apps/cli/src/utils/logger.ts
new file mode 100644
index 00000000..d8923c9d
--- /dev/null
+++ b/apps/cli/src/utils/logger.ts
@@ -0,0 +1,43 @@
+// =============================================================================
+// Logger
+// =============================================================================
+
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface Logger {
+  debug(message: string, meta?: Record<string, unknown>): void;
+  info(message: string, meta?: Record<string, unknown>): void;
+  warn(message: string, meta?: Record<string, unknown>): void;
+  error(message: string, meta?: Record<string, unknown>): void;
+}
+
+export class ConsoleLogger implements Logger {
+  private prefix: string;
+
+  constructor(prefix = '') {
+    this.prefix = prefix ? `[${prefix}] ` : '';
+  }
+
+  private log(level: LogLevel, message: string, meta?: Record<string, unknown>): void {
+    const metaStr = meta ? ` ${JSON.stringify(meta)}` : '';
+    console.log(`${this.prefix}${level.toUpperCase()}: ${message}${metaStr}`);
+  }
+
+  debug(message: string, meta?: Record<string, unknown>): void {
+    this.log('debug', message, meta);
+  }
+
+  info(message: string, meta?: Record<string, unknown>): void {
+    this.log('info', message, meta);
+  }
+
+  warn(message: string, meta?: Record<string, unknown>): void {
+    this.log('warn', message, meta);
+  }
+
+  error(message: string, meta?: Record<string, unknown>): void {
+    this.log('error', message, meta);
+  }
+}
+
+export const logger = new ConsoleLogger('freecode');
\ No newline at end of file
diff --git a/apps/cli/src/utils/result.ts b/apps/cli/src/utils/result.ts
new file mode 100644
index 00000000..5cf9fb1b
--- /dev/null
+++ b/apps/cli/src/utils/result.ts
@@ -0,0 +1,23 @@
+// =============================================================================
+// Result Type
+// =============================================================================
+
+export type Result<T, E = string> =
+  | { success: true; value: T }
+  | { success: false; error: E };
+
+export function ok<T>(value: T): Result<T, never> {
+  return { success: true, value };
+}
+
+export function err<E>(error: E): Result<never, E> {
+  return { success: false, error };
+}
+
+export function isOk<T, E>(result: Result<T, E>): result is { success: true; value: T } {
+  return result.success === true;
+}
+
+export function isErr<T, E>(result: Result<T, E>): result is { success: false; error: E } {
+  return result.success === false;
+}
\ No newline at end of file
diff --git a/apps/cli/tsconfig.json b/apps/cli/tsconfig.json
new file mode 100644
index 00000000..51089f23
--- /dev/null
+++ b/apps/cli/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2022"],
+    "types": ["node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file
diff --git a/apps/tui/README.md b/apps/tui/README.md
new file mode 100644
index 00000000..24e9b876
--- /dev/null
+++ b/apps/tui/README.md
@@ -0,0 +1,32 @@
+# FreeCode TUI
+
+Terminal UI that drives ChatGPT via Playwright/CDP.
+
+## Setup
+
+```sh
+cd apps/tui
+pnpm build
+npm link
+```
+
+## Run
+
+```sh
+freecode
+```
+
+## Development
+
+```sh
+cd apps/tui
+pnpm dev
+```
+
+## Usage
+this is the command for arch linux - 
+```sh
+chromium --remote-debugging-port=9222
+```
+
+- use /freecode <text>
\ No newline at end of file
diff --git a/apps/tui/package.json b/apps/tui/package.json
index 296f65e5..2038065a 100644
--- a/apps/tui/package.json
+++ b/apps/tui/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@earendil-works/pi-tui": "^0.74.0",
+    "@freecode/shared": "workspace:*",
     "chalk": "^5.5.0"
   },
   "devDependencies": {
diff --git a/apps/tui/src/commands/built-in.ts b/apps/tui/src/commands/built-in.ts
index 5ace6aaf..d59a0709 100644
--- a/apps/tui/src/commands/built-in.ts
+++ b/apps/tui/src/commands/built-in.ts
@@ -1,5 +1,6 @@
 import { registerCommand, type Command, type CommandContext } from "./index.js";
 import { AVAILABLE_MODELS } from "../models.js";
+import { registerFreecodeCommand } from "./freecode/index.js";
 
 const helpCommand: Command = {
 	name: "help",
@@ -10,7 +11,8 @@ const helpCommand: Command = {
 - **/help** - Show this help message
 - **/clear** - Clear all messages
 - **/model** - Select AI model
-- **/exit** - Exit FreeCode`);
+- **/exit** - Exit FreeCode
+- **/freecode** - Send prompt to ChatGPT and apply file changes`);
 	},
 };
 
@@ -44,4 +46,5 @@ export function registerBuiltInCommands(): void {
 	registerCommand(clearCommand);
 	registerCommand(exitCommand);
 	registerCommand(modelCommand);
+	registerFreecodeCommand();
 }
\ No newline at end of file
diff --git a/apps/tui/src/commands/freecode/index.ts b/apps/tui/src/commands/freecode/index.ts
new file mode 100644
index 00000000..220c816d
--- /dev/null
+++ b/apps/tui/src/commands/freecode/index.ts
@@ -0,0 +1,104 @@
+// =============================================================================
+// Freecode Command — sends prompt to CLI via IPC
+// =============================================================================
+
+import { registerCommand, type Command, type CommandContext } from "../index.js";
+import {
+  startCli,
+  stopCli,
+  sessionStart,
+  sessionStop,
+  sessionStart as startSession,
+  listProviders,
+  type SessionInfo,
+} from "../../ipc/client.js";
+
+// State
+let currentSession: SessionInfo | null = null;
+let providersLoaded = false;
+let cachedProviders: Array<{ id: string; name: string }> = [];
+
+async function ensureProviders(): Promise<void> {
+  if (!providersLoaded) {
+    try {
+      const providers = await listProviders();
+      cachedProviders = providers.map((p: { id: string; name: string }) => ({
+        id: p.id,
+        name: p.name,
+      }));
+    } catch {
+      cachedProviders = [{ id: "chatgpt", name: "ChatGPT" }];
+    }
+    providersLoaded = true;
+  }
+}
+
+function formatProviderList(): string {
+  return cachedProviders
+    .map((p) => `- **${p.name}** (${p.id})`)
+    .join("\n");
+}
+
+async function ensureSession(ctx: CommandContext): Promise<boolean> {
+  if (currentSession) return true;
+
+  startCli();
+
+  // Small delay to let CLI start
+  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  try {
+    currentSession = await sessionStart({
+      projectPath: process.cwd(),
+      provider: "chatgpt",
+    });
+    return true;
+  } catch (error) {
+    ctx.showMessage(
+      `❌ **Failed to start session:** ${error instanceof Error ? error.message : String(error)}`
+    );
+    return false;
+  }
+}
+
+const freecodeCommand: Command = {
+  name: "freecode",
+  description: "Send prompt to AI and apply file changes",
+  execute: async (args, ctx) => {
+    const userPrompt = args.join(" ");
+
+    if (!userPrompt.trim()) {
+      await ensureProviders();
+      ctx.showMessage(`**Usage:** /freecode <your prompt>
+
+**Example:** /freecode summarize this project and write at project.md
+
+**Available providers:**
+${formatProviderList()}`);
+      return;
+    }
+
+    ctx.showMessage(`**You:** ${userPrompt}`);
+    ctx.showMessage("🔄 **Processing...**");
+
+    // Ensure CLI is running and we have a session
+    const ready = await ensureSession(ctx);
+    if (!ready) return;
+
+    try {
+      // TODO: Wire up session.send when CLI supports streaming
+      // For now, just show a placeholder
+      ctx.showMessage(
+        "⏳ **AI processing...**\n\n(Full CLI integration coming in next step)"
+      );
+    } catch (error) {
+      ctx.showMessage(
+        `❌ **Error:** ${error instanceof Error ? error.message : String(error)}`
+      );
+    }
+  },
+};
+
+export function registerFreecodeCommand(): void {
+  registerCommand(freecodeCommand);
+}
\ No newline at end of file
diff --git a/apps/tui/src/ipc/client.ts b/apps/tui/src/ipc/client.ts
new file mode 100644
index 00000000..255da4a6
--- /dev/null
+++ b/apps/tui/src/ipc/client.ts
@@ -0,0 +1,144 @@
+// =============================================================================
+// IPC Client — JSON-RPC bridge to CLI backend
+// =============================================================================
+
+import { spawn, type ChildProcess } from "child_process";
+import type {
+  JsonRpcRequest,
+  JsonRpcResponse,
+  ToolListItem,
+  ToolResult,
+  SessionConfig,
+  ProviderInfo,
+} from "@freecode/shared";
+
+// =============================================================================
+// IPC Transport
+// =============================================================================
+
+let requestId = 0;
+let cliProcess: ChildProcess | null = null;
+let messageBuffer = "";
+let pendingRequests = new Map<
+  number | string,
+  { resolve: (value: unknown) => void; reject: (error: Error) => void }
+>();
+
+function generateId(): number {
+  return ++requestId;
+}
+
+function parseResponse(data: string): JsonRpcResponse[] {
+  const responses: JsonRpcResponse[] = [];
+  const lines = data.split("\n");
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    try {
+      responses.push(JSON.parse(line) as JsonRpcResponse);
+    } catch {
+      // Skip malformed lines
+    }
+  }
+  return responses;
+}
+
+export function startCli(cwd?: string): void {
+  if (cliProcess) return;
+
+  cliProcess = spawn("node", ["apps/cli/src/server.ts"], {
+    cwd: cwd || process.cwd(),
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+
+  cliProcess.stdout?.setEncoding("utf-8");
+
+  cliProcess.stderr?.on("data", (data) => {
+    console.error("[CLI stderr]", data.toString());
+  });
+
+  cliProcess.stdout?.on("data", (data: string) => {
+    messageBuffer += data;
+    const responses = parseResponse(messageBuffer);
+    messageBuffer = "";
+
+    for (const response of responses) {
+      const pending = pendingRequests.get(response.id);
+      if (pending) {
+        pendingRequests.delete(response.id);
+        if (response.error) {
+          pending.reject(new Error(response.error.message));
+        } else {
+          pending.resolve(response.result);
+        }
+      }
+    }
+  });
+
+  cliProcess.on("error", (err) => {
+    console.error("[CLI process error]", err);
+    cliProcess = null;
+  });
+
+  cliProcess.on("exit", (code) => {
+    console.log("[CLI exited]", code);
+    cliProcess = null;
+  });
+}
+
+function sendRequest(method: string, params?: Record<string, unknown>): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    if (!cliProcess || !cliProcess.stdin) {
+      reject(new Error("CLI not running"));
+      return;
+    }
+
+    const id = generateId();
+    const request: JsonRpcRequest = { jsonrpc: "2.0", id, method, params };
+    pendingRequests.set(id, { resolve: resolve as (value: unknown) => void, reject });
+
+    cliProcess.stdin.write(JSON.stringify(request) + "\n");
+  });
+}
+
+export function stopCli(): void {
+  if (cliProcess) {
+    cliProcess.kill();
+    cliProcess = null;
+  }
+}
+
+// =============================================================================
+// Tool Methods
+// =============================================================================
+
+export async function listTools(): Promise<ToolListItem[]> {
+  return (await sendRequest("tools.list")) as ToolListItem[];
+}
+
+export async function callTool(name: string, args: Record<string, unknown>): Promise<ToolResult> {
+  return (await sendRequest("tools.call", { name, args })) as ToolResult;
+}
+
+// =============================================================================
+// Session Methods
+// =============================================================================
+
+export interface SessionInfo {
+  sessionId: string;
+}
+
+export async function sessionStart(config: SessionConfig): Promise<SessionInfo> {
+  return (await sendRequest("session.start", config as unknown as Record<string, unknown>)) as SessionInfo;
+}
+
+export async function sessionStop(sessionId: string): Promise<void> {
+  await sendRequest("session.stop", { sessionId });
+}
+
+// =============================================================================
+// Provider Methods
+// =============================================================================
+
+export async function listProviders(): Promise<ProviderInfo[]> {
+  return (await sendRequest("providers.list")) as ProviderInfo[];
+}
\ No newline at end of file
diff --git a/apps/tui/src/lib/utils/logger.ts b/apps/tui/src/lib/utils/logger.ts
new file mode 100644
index 00000000..8a2a7e9a
--- /dev/null
+++ b/apps/tui/src/lib/utils/logger.ts
@@ -0,0 +1,39 @@
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface Logger {
+  debug(message: string, meta?: Record<string, unknown>): void;
+  info(message: string, meta?: Record<string, unknown>): void;
+  warn(message: string, meta?: Record<string, unknown>): void;
+  error(message: string, meta?: Record<string, unknown>): void;
+}
+
+export class ConsoleLogger implements Logger {
+  private prefix: string;
+
+  constructor(prefix = '') {
+    this.prefix = prefix ? `[${prefix}] ` : '';
+  }
+
+  private log(level: LogLevel, message: string, meta?: Record<string, unknown>): void {
+    const metaStr = meta ? ` ${JSON.stringify(meta)}` : '';
+    console.log(`${this.prefix}${level.toUpperCase()}: ${message}${metaStr}`);
+  }
+
+  debug(message: string, meta?: Record<string, unknown>): void {
+    this.log('debug', message, meta);
+  }
+
+  info(message: string, meta?: Record<string, unknown>): void {
+    this.log('info', message, meta);
+  }
+
+  warn(message: string, meta?: Record<string, unknown>): void {
+    this.log('warn', message, meta);
+  }
+
+  error(message: string, meta?: Record<string, unknown>): void {
+    this.log('error', message, meta);
+  }
+}
+
+export const logger = new ConsoleLogger('freecode');
diff --git a/apps/tui/src/lib/utils/result.ts b/apps/tui/src/lib/utils/result.ts
new file mode 100644
index 00000000..ac345013
--- /dev/null
+++ b/apps/tui/src/lib/utils/result.ts
@@ -0,0 +1,39 @@
+export type Result<T, E = string> =
+  | { success: true; value: T }
+  | { success: false; error: E };
+
+export function ok<T>(value: T): Result<T, never> {
+  return { success: true, value };
+}
+
+export function err<E>(error: E): Result<never, E> {
+  return { success: false, error };
+}
+
+export function isOk<T, E>(result: Result<T, E>): result is { success: true; value: T } {
+  return result.success === true;
+}
+
+export function isErr<T, E>(result: Result<T, E>): result is { success: false; error: E } {
+  return result.success === false;
+}
+
+export function map<T, U, E>(
+  result: Result<T, E>,
+  fn: (value: T) => U
+): Result<U, E> {
+  if (isOk(result)) {
+    return ok(fn(result.value));
+  }
+  return result as Result<never, E>;
+}
+
+export function flatMap<T, U, E>(
+  result: Result<T, E>,
+  fn: (value: T) => Result<U, E>
+): Result<U, E> {
+  if (isOk(result)) {
+    return fn(result.value);
+  }
+  return result as Result<never, E>;
+}
diff --git a/apps/vscode/.vscode/launch.json b/apps/vscode/.vscode/launch.json
new file mode 100644
index 00000000..3cddd095
--- /dev/null
+++ b/apps/vscode/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/vscode/package-lock.json b/apps/vscode/package-lock.json
new file mode 100644
index 00000000..723d8e7b
--- /dev/null
+++ b/apps/vscode/package-lock.json
@@ -0,0 +1,674 @@
+{
+  "name": "freecode",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "freecode",
+      "version": "0.1.0",
+      "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "zustand": "^4.5.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "@types/vscode": "^1.88.0",
+        "esbuild": "^0.28.0",
+        "typescript": "^5.4.0"
+      },
+      "engines": {
+        "vscode": "^1.88.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
+      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
+      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
+      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
+      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
+      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
+      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
+      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
+      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
+      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
+      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
+      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
+      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
+      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
+      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
+      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
+      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
+      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
+      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
+      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
+      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
+      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
+      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
+      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
+      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
+      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
+      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.41",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.41.tgz",
+      "integrity": "sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.29",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.29.tgz",
+      "integrity": "sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/vscode": {
+      "version": "1.120.0",
+      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.120.0.tgz",
+      "integrity": "sha512-feaT4Rst+FkTch5zz/ZbNCxoIvo55YU80Be2kiL7OJcod4+CUYf2lUBPdIJzozNnSEMq1VRTGrWEcCGFB3fBmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
+      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.0",
+        "@esbuild/android-arm": "0.28.0",
+        "@esbuild/android-arm64": "0.28.0",
+        "@esbuild/android-x64": "0.28.0",
+        "@esbuild/darwin-arm64": "0.28.0",
+        "@esbuild/darwin-x64": "0.28.0",
+        "@esbuild/freebsd-arm64": "0.28.0",
+        "@esbuild/freebsd-x64": "0.28.0",
+        "@esbuild/linux-arm": "0.28.0",
+        "@esbuild/linux-arm64": "0.28.0",
+        "@esbuild/linux-ia32": "0.28.0",
+        "@esbuild/linux-loong64": "0.28.0",
+        "@esbuild/linux-mips64el": "0.28.0",
+        "@esbuild/linux-ppc64": "0.28.0",
+        "@esbuild/linux-riscv64": "0.28.0",
+        "@esbuild/linux-s390x": "0.28.0",
+        "@esbuild/linux-x64": "0.28.0",
+        "@esbuild/netbsd-arm64": "0.28.0",
+        "@esbuild/netbsd-x64": "0.28.0",
+        "@esbuild/openbsd-arm64": "0.28.0",
+        "@esbuild/openbsd-x64": "0.28.0",
+        "@esbuild/openharmony-arm64": "0.28.0",
+        "@esbuild/sunos-x64": "0.28.0",
+        "@esbuild/win32-arm64": "0.28.0",
+        "@esbuild/win32-ia32": "0.28.0",
+        "@esbuild/win32-x64": "0.28.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/apps/vscode/package.json b/apps/vscode/package.json
new file mode 100644
index 00000000..10e42fe4
--- /dev/null
+++ b/apps/vscode/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "freecode-chat",
+  "displayName": "FreeCode",
+  "description": "AI coding assistant with chat interface",
+  "version": "0.1.0",
+  "publisher": "freecode",
+  "engines": {
+    "vscode": "^1.88.0"
+  },
+  "activationEvents": [
+    "onView:freecode.chat"
+  ],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "freecode.sidebar",
+          "title": "FreeCode",
+          "icon": "$(terminal)"
+        }
+      ]
+    },
+    "views": {
+      "freecode.sidebar": [
+        {
+          "id": "freecode.chat",
+          "type": "webview",
+          "title": "Chat"
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsc && npm run build:webview",
+    "build:webview": "esbuild src/webview/main.tsx --bundle --outfile=dist/webview/bundle.js --platform=browser --format=iife && cp src/webview/index.html dist/webview/",
+    "watch": "tsc -w",
+    "watch:webview": "esbuild src/webview/main.tsx --bundle --outfile=dist/webview/bundle.js --platform=browser --format=iife --watch"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/vscode": "^1.88.0",
+    "esbuild": "^0.28.0",
+    "typescript": "^5.4.0"
+  },
+  "dependencies": {
+    "@freecode/shared": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.0"
+  }
+}
\ No newline at end of file
diff --git a/apps/vscode/src/chat/ChatView.tsx b/apps/vscode/src/chat/ChatView.tsx
new file mode 100644
index 00000000..4755f15d
--- /dev/null
+++ b/apps/vscode/src/chat/ChatView.tsx
@@ -0,0 +1,26 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import * as fs from 'fs';
+
+export class ChatView implements vscode.WebviewViewProvider {
+  constructor(private context: vscode.ExtensionContext) {}
+
+  resolveWebviewView(webviewView: vscode.WebviewView): void {
+    webviewView.webview.options = {
+      enableScripts: true,
+    };
+
+    const htmlPath = path.join(this.context.extensionPath, 'dist', 'webview', 'index.html');
+    let html = fs.readFileSync(htmlPath, 'utf-8');
+
+    // Replace relative URLs with webview URIs
+    html = html.replace(
+      'bundle.js',
+      webviewView.webview.asWebviewUri(
+        vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'webview', 'bundle.js')
+      ).toString()
+    );
+
+    webviewView.webview.html = html;
+  }
+}
\ No newline at end of file
diff --git a/apps/vscode/src/chat/Message.tsx b/apps/vscode/src/chat/Message.tsx
new file mode 100644
index 00000000..199b1adc
--- /dev/null
+++ b/apps/vscode/src/chat/Message.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Message } from '../lib/types.js';
+import { TextPart } from './parts/TextPart.js';
+import { CodePart } from './parts/CodePart.js';
+import { ToolPart } from './parts/ToolPart.js';
+
+interface MessageProps {
+  message: Message;
+}
+
+export const ChatMessage: React.FC<MessageProps> = ({ message }) => {
+  const isUser = message.role === 'user';
+
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: isUser ? 'flex-end' : 'flex-start',
+      marginBottom: '16px'
+    }}>
+      <div style={{
+        maxWidth: '80%',
+        background: isUser ? '#0e639c' : '#2d2d2d',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        color: '#d4d4d4'
+      }}>
+        {message.parts.map((part, i) => {
+          switch (part.type) {
+            case 'text':
+              return <TextPart key={i} content={part.content} />;
+            case 'code':
+              return <CodePart key={i} language={part.language} content={part.content} />;
+            case 'tool':
+              return <ToolPart key={i} tool={part.tool} result={part.result} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/chat/MessageInput.tsx b/apps/vscode/src/chat/MessageInput.tsx
new file mode 100644
index 00000000..f81425e8
--- /dev/null
+++ b/apps/vscode/src/chat/MessageInput.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useCallback } from 'react';
+
+interface MessageInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+}
+
+export const MessageInput: React.FC<MessageInputProps> = ({ onSend, disabled }) => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = useCallback(() => {
+    if (!value.trim() || disabled) return;
+    onSend(value.trim());
+    setValue('');
+  }, [value, disabled, onSend]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div style={{
+      padding: '12px 16px',
+      borderTop: '1px solid #404040',
+      background: '#1e1e1e'
+    }}>
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        placeholder="Type your message... (Cmd+Enter to send)"
+        style={{
+          width: '100%',
+          minHeight: '60px',
+          padding: '8px 12px',
+          borderRadius: '4px',
+          border: '1px solid #404040',
+          background: '#2d2d2d',
+          color: '#d4d4d4',
+          fontSize: '14px',
+          fontFamily: 'inherit',
+          resize: 'none',
+          outline: 'none'
+        }}
+      />
+      <div style={{ marginTop: '8px', display: 'flex', justifyContent: 'flex-end' }}>
+        <button
+          onClick={handleSubmit}
+          disabled={disabled || !value.trim()}
+          style={{
+            padding: '6px 16px',
+            borderRadius: '4px',
+            border: 'none',
+            background: disabled ? '#404040' : '#0e639c',
+            color: '#fff',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            fontSize: '13px'
+          }}
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/chat/MessageList.tsx b/apps/vscode/src/chat/MessageList.tsx
new file mode 100644
index 00000000..b84a93ed
--- /dev/null
+++ b/apps/vscode/src/chat/MessageList.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import { useChatStore } from '../stores/index.js';
+import { ChatMessage } from './Message.js';
+
+export const MessageList: React.FC = () => {
+  const messages = useChatStore((state) => state.messages);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div style={{
+      flex: 1,
+      overflow: 'auto',
+      padding: '16px',
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+      {messages.map((msg) => (
+        <ChatMessage key={msg.id} message={msg} />
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/chat/parts/CodePart.tsx b/apps/vscode/src/chat/parts/CodePart.tsx
new file mode 100644
index 00000000..2f22c143
--- /dev/null
+++ b/apps/vscode/src/chat/parts/CodePart.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+interface CodePartProps {
+  language: string;
+  content: string;
+}
+
+export const CodePart: React.FC<CodePartProps> = ({ language, content }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div style={{
+      background: '#1e1e1e',
+      borderRadius: '4px',
+      margin: '8px 0',
+      overflow: 'hidden'
+    }}>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '4px 12px',
+        background: '#2d2d2d',
+        fontSize: '12px',
+        color: '#888'
+      }}>
+        <span>{language}</span>
+        <button
+          onClick={handleCopy}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: copied ? '#4caf50' : '#888',
+            cursor: 'pointer',
+            fontSize: '12px'
+          }}
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      <pre style={{
+        margin: 0,
+        padding: '12px',
+        overflow: 'auto',
+        fontSize: '13px',
+        fontFamily: 'monaco, Consolas, monospace'
+      }}>
+        <code>{content}</code>
+      </pre>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/chat/parts/TextPart.tsx b/apps/vscode/src/chat/parts/TextPart.tsx
new file mode 100644
index 00000000..9c3159b0
--- /dev/null
+++ b/apps/vscode/src/chat/parts/TextPart.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+interface TextPartProps {
+  content: string;
+}
+
+export const TextPart: React.FC<TextPartProps> = ({ content }) => {
+  return (
+    <div style={{ whiteSpace: 'pre-wrap', lineHeight: '1.5' }}>
+      {content}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/chat/parts/ToolPart.tsx b/apps/vscode/src/chat/parts/ToolPart.tsx
new file mode 100644
index 00000000..8600be45
--- /dev/null
+++ b/apps/vscode/src/chat/parts/ToolPart.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+interface ToolPartProps {
+  tool: { name: string; args: Record<string, unknown> };
+  result?: string;
+}
+
+export const ToolPart: React.FC<ToolPartProps> = ({ tool, result }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div style={{
+      background: '#2d2d2d',
+      borderRadius: '4px',
+      margin: '8px 0',
+      border: '1px solid #404040'
+    }}>
+      <div
+        onClick={() => setExpanded(!expanded)}
+        style={{
+          padding: '8px 12px',
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <span style={{ color: '#4fc3f7', fontWeight: 500 }}>
+          🔧 {tool.name}
+        </span>
+        <span style={{ color: '#888' }}>
+          {expanded ? '▼' : '▶'}
+        </span>
+      </div>
+      {expanded && (
+        <div style={{ padding: '8px 12px', borderTop: '1px solid #404040' }}>
+          <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
+            Arguments: {JSON.stringify(tool.args)}
+          </div>
+          {result && (
+            <pre style={{
+              margin: 0,
+              fontSize: '12px',
+              fontFamily: 'monaco, Consolas, monospace',
+              whiteSpace: 'pre-wrap'
+            }}>
+              {result}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/extension.ts b/apps/vscode/src/extension.ts
new file mode 100644
index 00000000..8965f133
--- /dev/null
+++ b/apps/vscode/src/extension.ts
@@ -0,0 +1,15 @@
+import * as vscode from 'vscode';
+import { ChatView } from './chat/ChatView.js';
+
+export function activate(context: vscode.ExtensionContext) {
+  const chatView = new ChatView(context);
+
+  context.subscriptions.push(
+    vscode.window.registerWebviewViewProvider(
+      'freecode.chat',
+      chatView
+    )
+  );
+}
+
+export function deactivate() {}
\ No newline at end of file
diff --git a/apps/vscode/src/ipc/client.ts b/apps/vscode/src/ipc/client.ts
new file mode 100644
index 00000000..44950951
--- /dev/null
+++ b/apps/vscode/src/ipc/client.ts
@@ -0,0 +1,143 @@
+// =============================================================================
+// IPC Client — JSON-RPC bridge to CLI backend
+// =============================================================================
+
+import { spawn, type ChildProcess } from "child_process";
+import type {
+  JsonRpcRequest,
+  JsonRpcResponse,
+  ToolListItem,
+  ToolResult,
+  SessionConfig,
+  ProviderInfo,
+} from "@freecode/shared";
+
+// =============================================================================
+// IPC Transport
+// =============================================================================
+
+let requestId = 0;
+let cliProcess: ChildProcess | null = null;
+let messageBuffer = "";
+let pendingRequests = new Map<
+  number | string,
+  { resolve: (value: unknown) => void; reject: (error: Error) => void }
+>();
+
+function generateId(): number {
+  return ++requestId;
+}
+
+function parseResponse(data: string): JsonRpcResponse[] {
+  const responses: JsonRpcResponse[] = [];
+  const lines = data.split("\n");
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    try {
+      responses.push(JSON.parse(line) as JsonRpcResponse);
+    } catch {
+      // Skip malformed lines
+    }
+  }
+  return responses;
+}
+
+export function startCli(cwd?: string): void {
+  if (cliProcess) return;
+
+  cliProcess = spawn("node", ["apps/cli/src/server.ts"], {
+    cwd: cwd || process.cwd(),
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+
+  cliProcess.stdout?.setEncoding("utf-8");
+
+  cliProcess.stderr?.on("data", (data) => {
+    console.error("[CLI stderr]", data.toString());
+  });
+
+  cliProcess.stdout?.on("data", (data: string) => {
+    messageBuffer += data;
+    const responses = parseResponse(messageBuffer);
+    messageBuffer = "";
+
+    for (const response of responses) {
+      const pending = pendingRequests.get(response.id);
+      if (pending) {
+        pendingRequests.delete(response.id);
+        if (response.error) {
+          pending.reject(new Error(response.error.message));
+        } else {
+          pending.resolve(response.result);
+        }
+      }
+    }
+  });
+
+  cliProcess.on("error", (err) => {
+    console.error("[CLI process error]", err);
+    cliProcess = null;
+  });
+
+  cliProcess.on("exit", () => {
+    cliProcess = null;
+  });
+}
+
+function sendRequest(method: string, params?: Record<string, unknown>): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    if (!cliProcess || !cliProcess.stdin) {
+      reject(new Error("CLI not running"));
+      return;
+    }
+
+    const id = generateId();
+    const request: JsonRpcRequest = { jsonrpc: "2.0", id, method, params };
+    pendingRequests.set(id, { resolve: resolve as (value: unknown) => void, reject });
+
+    cliProcess.stdin.write(JSON.stringify(request) + "\n");
+  });
+}
+
+export function stopCli(): void {
+  if (cliProcess) {
+    cliProcess.kill();
+    cliProcess = null;
+  }
+}
+
+// =============================================================================
+// Tool Methods
+// =============================================================================
+
+export async function listTools(): Promise<ToolListItem[]> {
+  return (await sendRequest("tools.list")) as ToolListItem[];
+}
+
+export async function callTool(name: string, args: Record<string, unknown>): Promise<ToolResult> {
+  return (await sendRequest("tools.call", { name, args })) as ToolResult;
+}
+
+// =============================================================================
+// Session Methods
+// =============================================================================
+
+export interface SessionInfo {
+  sessionId: string;
+}
+
+export async function sessionStart(config: SessionConfig): Promise<SessionInfo> {
+  return (await sendRequest("session.start", config as unknown as Record<string, unknown>)) as SessionInfo;
+}
+
+export async function sessionStop(sessionId: string): Promise<void> {
+  await sendRequest("session.stop", { sessionId });
+}
+
+// =============================================================================
+// Provider Methods
+// =============================================================================
+
+export async function listProviders(): Promise<ProviderInfo[]> {
+  return (await sendRequest("providers.list")) as ProviderInfo[];
+}
\ No newline at end of file
diff --git a/apps/vscode/src/ipc/protocol.ts b/apps/vscode/src/ipc/protocol.ts
new file mode 100644
index 00000000..8cf1bf94
--- /dev/null
+++ b/apps/vscode/src/ipc/protocol.ts
@@ -0,0 +1,6 @@
+// =============================================================================
+// IPC Protocol — JSON-RPC types for VS Code extension
+// Types imported from @freecode/shared, local types here for convenience
+// =============================================================================
+
+export type { JsonRpcRequest, JsonRpcResponse, StreamResponse } from "@freecode/shared";
\ No newline at end of file
diff --git a/apps/vscode/src/lib/types.ts b/apps/vscode/src/lib/types.ts
new file mode 100644
index 00000000..582b4529
--- /dev/null
+++ b/apps/vscode/src/lib/types.ts
@@ -0,0 +1,5 @@
+// =============================================================================
+// Shared Types — re-exported from @freecode/shared
+// =============================================================================
+
+export type { Message, MessagePart } from "@freecode/shared";
\ No newline at end of file
diff --git a/apps/vscode/src/stores/chat-store.ts b/apps/vscode/src/stores/chat-store.ts
new file mode 100644
index 00000000..7b07a39b
--- /dev/null
+++ b/apps/vscode/src/stores/chat-store.ts
@@ -0,0 +1,69 @@
+// =============================================================================
+// Chat Store — UI state management for VS Code extension
+// =============================================================================
+
+import { create } from "zustand";
+import type { Message, MessagePart } from "@freecode/shared";
+
+interface ChatStore {
+  messages: Message[];
+  status: "idle" | "streaming" | "error";
+  error: string | null;
+  addMessage: (role: "user" | "assistant", parts: MessagePart[]) => void;
+  addPartToLastMessage: (part: MessagePart) => void;
+  updateLastMessagePart: (index: number, part: MessagePart) => void;
+  setStatus: (status: "idle" | "streaming" | "error") => void;
+  setError: (error: string | null) => void;
+  clearMessages: () => void;
+}
+
+let messageCounter = 0;
+
+export const useChatStore = create<ChatStore>((set) => ({
+  messages: [],
+  status: "idle",
+  error: null,
+
+  addMessage: (role, parts) =>
+    set((state) => ({
+      messages: [
+        ...state.messages,
+        {
+          id: `msg-${++messageCounter}`,
+          role,
+          parts,
+          timestamp: Date.now(),
+        },
+      ],
+    })),
+
+  addPartToLastMessage: (part) =>
+    set((state) => {
+      if (state.messages.length === 0) return state;
+      const lastMessage = state.messages[state.messages.length - 1];
+      return {
+        messages: [
+          ...state.messages.slice(0, -1),
+          { ...lastMessage, parts: [...lastMessage.parts, part] },
+        ],
+      };
+    }),
+
+  updateLastMessagePart: (index, part) =>
+    set((state) => {
+      if (state.messages.length === 0) return state;
+      const lastMessage = state.messages[state.messages.length - 1];
+      const newParts = [...lastMessage.parts];
+      newParts[index] = part;
+      return {
+        messages: [
+          ...state.messages.slice(0, -1),
+          { ...lastMessage, parts: newParts },
+        ],
+      };
+    }),
+
+  setStatus: (status) => set({ status }),
+  setError: (error) => set({ error }),
+  clearMessages: () => set({ messages: [], status: "idle", error: null }),
+}));
\ No newline at end of file
diff --git a/apps/vscode/src/stores/index.ts b/apps/vscode/src/stores/index.ts
new file mode 100644
index 00000000..99f62ee4
--- /dev/null
+++ b/apps/vscode/src/stores/index.ts
@@ -0,0 +1,2 @@
+export { useChatStore } from './chat-store.js';
+export type { Message, MessagePart } from '../lib/types.js';
\ No newline at end of file
diff --git a/apps/vscode/src/webview/App.tsx b/apps/vscode/src/webview/App.tsx
new file mode 100644
index 00000000..d88b4b88
--- /dev/null
+++ b/apps/vscode/src/webview/App.tsx
@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { useChatStore } from '../stores/index.js';
+import { MessageList } from '../chat/MessageList.js';
+import { MessageInput } from '../chat/MessageInput.js';
+import { startCli, listTools, callTool } from './ipc-stub.js';
+
+export const App: React.FC = () => {
+  const status = useChatStore((s) => s.status);
+  const addMessage = useChatStore((s) => s.addMessage);
+  const setStatus = useChatStore((s) => s.setStatus);
+  const setError = useChatStore((s) => s.setError);
+
+  const handleSend = useCallback(async (message: string) => {
+    addMessage('user', [{ type: 'text', content: message }]);
+    setStatus('streaming');
+
+    try {
+      startCli();
+      const tools = await listTools();
+
+      addMessage('assistant', [{
+        type: 'text',
+        content: `Connected to CLI. Found ${tools.length} tools.`
+      }]);
+
+      setStatus('idle');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setStatus('error');
+    }
+  }, [addMessage, setStatus, setError]);
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100vh',
+      background: '#1e1e1e',
+      color: '#d4d4d4'
+    }}>
+      <div style={{
+        padding: '8px 16px',
+        background: '#2d2d2d',
+        borderBottom: '1px solid #404040',
+        fontWeight: 500
+      }}>
+        FreeCode Chat
+      </div>
+      <MessageList />
+      <MessageInput onSend={handleSend} disabled={status === 'streaming'} />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/vscode/src/webview/index.html b/apps/vscode/src/webview/index.html
new file mode 100644
index 00000000..b15d2e2c
--- /dev/null
+++ b/apps/vscode/src/webview/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FreeCode Chat</title>
+  <style>
+    body { margin: 0; padding: 0; background: #1e1e1e; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="bundle.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/apps/vscode/src/webview/ipc-stub.ts b/apps/vscode/src/webview/ipc-stub.ts
new file mode 100644
index 00000000..5e643bcd
--- /dev/null
+++ b/apps/vscode/src/webview/ipc-stub.ts
@@ -0,0 +1,34 @@
+// Browser-compatible stub for IPC client
+// The actual child_process-based client runs in the extension host, not the webview
+
+export interface ToolListItem {
+  name: string;
+  description?: string;
+}
+
+export interface ToolCallResult {
+  success: boolean;
+  output?: string;
+  error?: string;
+}
+
+export function startCli(): void {
+  console.log('[IPC Stub] startCli called - extension host handles CLI');
+}
+
+export async function listTools(): Promise<ToolListItem[]> {
+  console.log('[IPC Stub] listTools called');
+  return [
+    { name: 'read_file', description: 'Read a file' },
+    { name: 'write_file', description: 'Write a file' },
+  ];
+}
+
+export async function callTool(name: string, args: Record<string, unknown>): Promise<ToolCallResult> {
+  console.log('[IPC Stub] callTool called:', name, args);
+  return { success: true, output: 'Tool called (stub)' };
+}
+
+export function stopCli(): void {
+  console.log('[IPC Stub] stopCli called');
+}
\ No newline at end of file
diff --git a/apps/vscode/src/webview/main.tsx b/apps/vscode/src/webview/main.tsx
new file mode 100644
index 00000000..4d90f7cd
--- /dev/null
+++ b/apps/vscode/src/webview/main.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { App } from './App.js';
+
+const container = document.getElementById('root');
+if (container) {
+  const root: Root = createRoot(container);
+  root.render(React.createElement(App));
+}
\ No newline at end of file
diff --git a/apps/vscode/tsconfig.json b/apps/vscode/tsconfig.json
new file mode 100644
index 00000000..590acfaf
--- /dev/null
+++ b/apps/vscode/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "types": ["node"]
+  },
+  "include": ["src/**/*"]
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/containers/ArchitectureContent.module.css b/apps/web/app/internal/components/containers/ArchitectureContent.module.css
new file mode 100644
index 00000000..00900b46
--- /dev/null
+++ b/apps/web/app/internal/components/containers/ArchitectureContent.module.css
@@ -0,0 +1,189 @@
+.container {
+  padding: 24px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+
+.section {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.sectionTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.table {
+  overflow-x: auto;
+}
+
+.ipcTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.ipcTable th,
+.ipcTable td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.ipcTable th {
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.methodName {
+  color: rgba(99, 102, 241, 0.9);
+  font-family: monospace;
+  font-weight: 600;
+}
+
+.methodParams {
+  color: rgba(168, 85, 247, 0.8);
+  font-family: monospace;
+}
+
+.methodReturns {
+  color: rgba(34, 211, 238, 0.8);
+  font-family: monospace;
+}
+
+.flowContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.flowStep {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  background: rgba(10, 10, 20, 0.5);
+  border-radius: 12px;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.flowNumber {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: white;
+}
+
+.flowContent {
+  flex: 1;
+}
+
+.flowTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 4px;
+}
+
+.flowDescription {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 8px;
+}
+
+.flowDetails {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.flowDetails li {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  background: rgba(99, 102, 241, 0.1);
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+@media (max-width: 900px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section {
+    grid-column: 1;
+  }
+}
+
+.introSection {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+.introTitle {
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 8px;
+}
+
+.introText {
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+}
+
+.introText strong {
+  color: #f97316;
+}
+
+.fullWidthDiagram {
+  width: 100%;
+  margin-bottom: 24px;
+  min-width: 0;
+}
+
+.bottomExplorer {
+  width: 100%;
+  margin-top: 24px;
+  position: relative;
+  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/containers/ArchitectureContent.tsx b/apps/web/app/internal/components/containers/ArchitectureContent.tsx
new file mode 100644
index 00000000..9329cf16
--- /dev/null
+++ b/apps/web/app/internal/components/containers/ArchitectureContent.tsx
@@ -0,0 +1,245 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { ArchitectureDiagram, BoundaryDiagram, FreeCodeInternalDiagram, type NodeType } from '../diagrams';
+import { ArchitectureExplorer } from '../presentation';
+import styles from './ArchitectureContent.module.css';
+
+const BOUNDARY_LAYERS = [
+  {
+    name: 'CLI (All Intelligence)',
+    components: ['Browser Controller', 'Agent Loop', 'Parser', 'Tools', 'Context Engine'],
+    color: 'rgba(99, 102, 241, 0.4)',
+  },
+  {
+    name: 'TUI & VSCode (Presentation)',
+    components: ['Rendering', 'IPC Client', 'State Management'],
+    color: 'rgba(168, 85, 247, 0.4)',
+  },
+  {
+    name: 'Providers (External)',
+    components: ['ChatGPT', 'Claude', 'Gemini'],
+    color: 'rgba(34, 211, 238, 0.4)',
+  },
+];
+
+export function OverviewContainer() {
+  const [selectedNode, setSelectedNode] = useState<NodeType | null>(null);
+  const explorerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (selectedNode) {
+      const timer = setTimeout(() => {
+        explorerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 80);
+      return () => clearTimeout(timer);
+    }
+  }, [selectedNode]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.introSection}>
+        <h3 className={styles.introTitle}>Interactive Blueprint & Execution Engine</h3>
+        <p className={styles.introText}>
+          FreeCode operates as a persistent CLI daemon coordinating a stateful <strong>Agent Loop</strong>, pluggable <strong>Safety Hooks</strong>, a local <strong>Context Engine</strong>, and parallelized <strong>Sub-Agents</strong>. Select any card or node in the interactive blueprint below to explore deep architectural insights, links to source code files, and simulated execution logs!
+        </p>
+      </div>
+
+      <div className={styles.fullWidthDiagram}>
+        <FreeCodeInternalDiagram
+          selectedNode={selectedNode}
+          onSelectNode={(node) => setSelectedNode(node)}
+        />
+      </div>
+
+      {selectedNode && (
+        <div ref={explorerRef} className={styles.bottomExplorer}>
+          <ArchitectureExplorer
+            selectedNode={selectedNode}
+            onClose={() => setSelectedNode(null)}
+          />
+        </div>
+      )}
+
+      <div className={styles.grid} style={{ marginTop: '32px' }}>
+        <div className={styles.section} style={{ gridColumn: '1 / -1' }}>
+          <h3 className={styles.sectionTitle}>System Domain Boundaries</h3>
+          <BoundaryDiagram layers={BOUNDARY_LAYERS} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const CLI_NODES = [
+  { id: 'server', label: 'Server', sublabel: 'JSON-RPC' },
+  { id: 'agent', label: 'Agent Loop', sublabel: 'Session Mgmt' },
+  { id: 'browser', label: 'Browser', sublabel: 'Playwright/CDP' },
+  { id: 'context', label: 'Context', sublabel: 'File Tree' },
+  { id: 'parser', label: 'Parser', sublabel: 'Response' },
+  { id: 'tools', label: 'Tools', sublabel: 'Execution' },
+  { id: 'applier', label: 'Applier', sublabel: 'File Diff' },
+];
+
+const CLI_CONNECTIONS = [
+  { from: 'server', to: 'agent', label: 'RPC' },
+  { from: 'agent', to: 'browser', label: 'CDP' },
+  { from: 'agent', to: 'context', label: 'query' },
+  { from: 'agent', to: 'parser', label: 'parse' },
+  { from: 'parser', to: 'tools', label: 'call' },
+  { from: 'tools', to: 'applier', label: 'diff' },
+];
+
+export function CLIContainer() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid}>
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>CLI Backend Architecture</h3>
+          <ArchitectureDiagram nodes={CLI_NODES} connections={CLI_CONNECTIONS} />
+        </div>
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Module Responsibilities</h3>
+          <BoundaryDiagram
+            layers={[
+              {
+                name: 'Core Modules',
+                components: ['server.ts - IPC Server', 'agent/loop.ts - Agent Loop', 'browser/ - Playwright/CDP'],
+                color: 'rgba(99, 102, 241, 0.4)',
+              },
+              {
+                name: 'Supporting Modules',
+                components: ['context/ - File tree', 'parser/ - Multi-strategy', 'tools/ - Tool execution', 'applier/ - Diff preview'],
+                color: 'rgba(168, 85, 247, 0.4)',
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const IPC_METHODS = [
+  { name: 'tools.list', params: '—', returns: 'ToolListItem[]' },
+  { name: 'tools.call', params: '{ name, args }', returns: 'ToolResult' },
+  { name: 'session.start', params: '{ projectPath, provider? }', returns: '{ sessionId }' },
+  { name: 'session.send', params: '{ sessionId, message }', returns: 'StreamResponse' },
+  { name: 'session.stop', params: '{ sessionId }', returns: 'void' },
+  { name: 'providers.list', params: '—', returns: 'ProviderInfo[]' },
+];
+
+const FLOW_STEPS = [
+  {
+    id: 'phase1',
+    title: 'Phase 1: Context Collection',
+    description: 'LLM determines which files are needed for the task',
+    details: ['Send prompt + file tree to LLM', 'LLM returns list of needed files', 'CLI reads only those files'],
+  },
+  {
+    id: 'phase2',
+    title: 'Phase 2: Response Generation',
+    description: 'LLM generates structured file changes with full context',
+    details: ['Send files + prompt to LLM', 'LLM returns structured response', 'Parser extracts code changes'],
+  },
+  {
+    id: 'phase3',
+    title: 'Phase 3: Review & Apply',
+    description: 'Changes are previewed for user approval before writing',
+    details: ['Show diff to user', 'User approves or rejects', 'Applier writes changes to filesystem'],
+  },
+];
+
+export function IPCContainer() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid}>
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>IPC Protocol Methods</h3>
+          <div className={styles.table}>
+            <table className={styles.ipcTable}>
+              <thead>
+                <tr>
+                  <th>Method</th>
+                  <th>Params</th>
+                  <th>Returns</th>
+                </tr>
+              </thead>
+              <tbody>
+                {IPC_METHODS.map((method) => (
+                  <tr key={method.name}>
+                    <td className={styles.methodName}>{method.name}</td>
+                    <td className={styles.methodParams}>{method.params}</td>
+                    <td className={styles.methodReturns}>{method.returns}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Protocol Characteristics</h3>
+          <BoundaryDiagram
+            layers={[
+              {
+                name: 'Transport',
+                components: ['stdin/stdout', 'JSON-RPC 2.0', 'Streaming'],
+                color: 'rgba(99, 102, 241, 0.4)',
+              },
+              {
+                name: 'Message Types',
+                components: ['request', 'response', 'error', 'notification'],
+                color: 'rgba(168, 85, 247, 0.4)',
+              },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FlowContainer() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.grid}>
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Two-Phase Context Collection</h3>
+          <BoundaryDiagram
+            layers={[
+              {
+                name: 'Traditional Approach',
+                components: ['Send entire codebase', 'High token cost', 'Slow response', 'Context overflow'],
+                color: 'rgba(236, 72, 153, 0.4)',
+              },
+              {
+                name: 'FreeCode Approach',
+                components: ['Send file tree only', 'LLM requests specific files', 'Read only needed files', 'Full context with less tokens'],
+                color: 'rgba(34, 211, 238, 0.4)',
+              },
+            ]}
+          />
+        </div>
+        <div className={styles.section} style={{ gridColumn: '1 / -1' }}>
+          <h3 className={styles.sectionTitle}>Data Flow Steps</h3>
+          <div className={styles.flowContainer}>
+            {FLOW_STEPS.map((step, i) => (
+              <div key={step.id} className={styles.flowStep}>
+                <div className={styles.flowNumber}>{i + 1}</div>
+                <div className={styles.flowContent}>
+                  <h4 className={styles.flowTitle}>{step.title}</h4>
+                  <p className={styles.flowDescription}>{step.description}</p>
+                  <ul className={styles.flowDetails}>
+                    {step.details?.map((d, j) => (
+                      <li key={j}>{d}</li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/containers/index.ts b/apps/web/app/internal/components/containers/index.ts
new file mode 100644
index 00000000..c45c942a
--- /dev/null
+++ b/apps/web/app/internal/components/containers/index.ts
@@ -0,0 +1,6 @@
+export {
+  OverviewContainer,
+  CLIContainer,
+  IPCContainer,
+  FlowContainer,
+} from './ArchitectureContent';
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/ArchitectureDiagram.module.css b/apps/web/app/internal/components/diagrams/ArchitectureDiagram.module.css
new file mode 100644
index 00000000..3b6d67f5
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/ArchitectureDiagram.module.css
@@ -0,0 +1,77 @@
+.container {
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.diagram {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.svg {
+  width: 100%;
+  min-width: 600px;
+  height: 300px;
+}
+
+.nodeBox {
+  fill: rgba(30, 30, 40, 0.9);
+  stroke: rgba(99, 102, 241, 0.4);
+  stroke-width: 1;
+  transition: all 0.3s ease;
+}
+
+.nodeBox:hover {
+  stroke: rgba(99, 102, 241, 0.8);
+  filter: brightness(1.2);
+}
+
+.nodeLabel {
+  fill: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 600;
+  text-anchor: middle;
+}
+
+.nodeSublabel {
+  fill: rgba(255, 255, 255, 0.5);
+  font-size: 11px;
+  text-anchor: middle;
+}
+
+.connectionLine {
+  stroke-dasharray: 8 4;
+  animation: flowAnimation 1s linear infinite;
+}
+
+.connectionLabel {
+  fill: rgba(168, 85, 247, 0.8);
+  font-size: 11px;
+  text-anchor: middle;
+}
+
+@keyframes flowAnimation {
+  from {
+    stroke-dashoffset: 24;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/ArchitectureDiagram.tsx b/apps/web/app/internal/components/diagrams/ArchitectureDiagram.tsx
new file mode 100644
index 00000000..932091ae
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/ArchitectureDiagram.tsx
@@ -0,0 +1,105 @@
+import styles from './ArchitectureDiagram.module.css';
+
+interface NodeData {
+  id: string;
+  label: string;
+  sublabel?: string;
+  icon?: string;
+}
+
+interface ArchitectureDiagramProps {
+  nodes: NodeData[];
+  connections: Array<{ from: string; to: string; label?: string }>;
+  title?: string;
+  subtitle?: string;
+}
+
+export function ArchitectureDiagram({
+  nodes,
+  connections,
+  title,
+  subtitle,
+}: ArchitectureDiagramProps) {
+  return (
+    <div className={styles.container}>
+      {title && <h3 className={styles.title}>{title}</h3>}
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+      <div className={styles.diagram}>
+        <svg className={styles.svg} viewBox="0 0 800 400">
+          <defs>
+            <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="rgba(99, 102, 241, 0.5)" />
+              <stop offset="100%" stopColor="rgba(168, 85, 247, 0.5)" />
+            </linearGradient>
+            <filter id="glow">
+              <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+              <feMerge>
+                <feMergeNode in="coloredBlur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          {connections.map((conn, i) => {
+            const fromNode = nodes.find((n) => n.id === conn.from);
+            const toNode = nodes.find((n) => n.id === conn.to);
+            if (!fromNode || !toNode) return null;
+            const fromIndex = nodes.indexOf(fromNode);
+            const toIndex = nodes.indexOf(toNode);
+            const x1 = 100 + fromIndex * 200;
+            const y1 = 200;
+            const x2 = 100 + toIndex * 200;
+            const y2 = 200;
+            return (
+              <g key={i}>
+                <line
+                  x1={x1}
+                  y1={y1}
+                  x2={x2}
+                  y2={y2}
+                  stroke="url(#lineGradient)"
+                  strokeWidth="2"
+                  filter="url(#glow)"
+                  className={styles.connectionLine}
+                />
+                <polygon
+                  points={`${x2 - 10},${y2 - 5} ${x2},${y2} ${x2 - 10},${y2 + 5}`}
+                  fill="rgba(168, 85, 247, 0.7)"
+                />
+                {conn.label && (
+                  <text
+                    x={(x1 + x2) / 2}
+                    y={y1 - 15}
+                    className={styles.connectionLabel}
+                  >
+                    {conn.label}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+          {nodes.map((node, i) => (
+            <g key={node.id} transform={`translate(${100 + i * 200}, 160)`}>
+              <rect
+                x="-60"
+                y="-40"
+                width="120"
+                height="80"
+                rx="12"
+                className={styles.nodeBox}
+                filter="url(#glow)"
+              />
+              <text x="0" y="-10" className={styles.nodeLabel}>
+                {node.label}
+              </text>
+              {node.sublabel && (
+                <text x="0" y="10" className={styles.nodeSublabel}>
+                  {node.sublabel}
+                </text>
+              )}
+            </g>
+          ))}
+        </svg>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/BoundaryDiagram.module.css b/apps/web/app/internal/components/diagrams/BoundaryDiagram.module.css
new file mode 100644
index 00000000..93ee794e
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/BoundaryDiagram.module.css
@@ -0,0 +1,79 @@
+.container {
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.diagram {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.layer {
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid;
+  background: rgba(10, 10, 20, 0.5);
+}
+
+.layerHeader {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+
+.layerName {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  padding: 4px 12px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.components {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.component {
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+}
+
+.component:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 768px) {
+  .layer {
+    padding: 12px;
+  }
+
+  .components {
+    flex-direction: column;
+  }
+
+  .component {
+    width: 100%;
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/BoundaryDiagram.tsx b/apps/web/app/internal/components/diagrams/BoundaryDiagram.tsx
new file mode 100644
index 00000000..44692d02
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/BoundaryDiagram.tsx
@@ -0,0 +1,55 @@
+import styles from './BoundaryDiagram.module.css';
+
+interface Layer {
+  name: string;
+  components: string[];
+  color?: string;
+}
+
+interface BoundaryDiagramProps {
+  layers: Layer[];
+  title?: string;
+}
+
+const DEFAULT_COLORS = [
+  'rgba(99, 102, 241, 0.3)',
+  'rgba(168, 85, 247, 0.3)',
+  'rgba(236, 72, 153, 0.3)',
+  'rgba(34, 211, 238, 0.3)',
+];
+
+export function BoundaryDiagram({ layers, title }: BoundaryDiagramProps) {
+  return (
+    <div className={styles.container}>
+      {title && <h3 className={styles.title}>{title}</h3>}
+      <div className={styles.diagram}>
+        {layers.map((layer, layerIndex) => (
+          <div
+            key={layerIndex}
+            className={styles.layer}
+            style={{
+              borderColor: layer.color || DEFAULT_COLORS[layerIndex % DEFAULT_COLORS.length],
+            }}
+          >
+            <div className={styles.layerHeader}>
+              <span className={styles.layerName}>{layer.name}</span>
+            </div>
+            <div className={styles.components}>
+              {layer.components.map((comp, compIndex) => (
+                <div
+                  key={compIndex}
+                  className={styles.component}
+                  style={{
+                    borderColor: layer.color || DEFAULT_COLORS[layerIndex % DEFAULT_COLORS.length],
+                  }}
+                >
+                  {comp}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/FlowDiagram.module.css b/apps/web/app/internal/components/diagrams/FlowDiagram.module.css
new file mode 100644
index 00000000..56b1cf76
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/FlowDiagram.module.css
@@ -0,0 +1,104 @@
+.container {
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.step {
+  position: relative;
+  display: flex;
+  gap: 20px;
+  padding: 16px 0;
+}
+
+.stepNumber {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: white;
+  z-index: 1;
+}
+
+.stepContent {
+  flex: 1;
+  padding-top: 8px;
+}
+
+.stepTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  margin-bottom: 4px;
+}
+
+.stepDescription {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 8px;
+}
+
+.details {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.details li {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.5);
+  padding-left: 16px;
+  position: relative;
+}
+
+.details li::before {
+  content: '→';
+  position: absolute;
+  left: 0;
+  color: rgba(99, 102, 241, 0.8);
+}
+
+.connector {
+  position: absolute;
+  left: 20px;
+  top: 56px;
+  width: 2px;
+  height: calc(100% - 40px);
+  background: linear-gradient(180deg, rgba(99, 102, 241, 0.6), rgba(168, 85, 247, 0.6));
+}
+
+@media (max-width: 768px) {
+  .step {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .connector {
+    left: 20px;
+    top: 56px;
+  }
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/FlowDiagram.tsx b/apps/web/app/internal/components/diagrams/FlowDiagram.tsx
new file mode 100644
index 00000000..d033eff4
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/FlowDiagram.tsx
@@ -0,0 +1,40 @@
+import styles from './FlowDiagram.module.css';
+
+interface Step {
+  id: string;
+  title: string;
+  description: string;
+  details?: string[];
+}
+
+interface FlowDiagramProps {
+  steps: Step[];
+  title?: string;
+}
+
+export function FlowDiagram({ steps, title }: FlowDiagramProps) {
+  return (
+    <div className={styles.container}>
+      {title && <h3 className={styles.title}>{title}</h3>}
+      <div className={styles.steps}>
+        {steps.map((step, index) => (
+          <div key={step.id} className={styles.step}>
+            <div className={styles.stepNumber}>{index + 1}</div>
+            <div className={styles.stepContent}>
+              <h4 className={styles.stepTitle}>{step.title}</h4>
+              <p className={styles.stepDescription}>{step.description}</p>
+              {step.details && step.details.length > 0 && (
+                <ul className={styles.details}>
+                  {step.details.map((detail, i) => (
+                    <li key={i}>{detail}</li>
+                  ))}
+                </ul>
+              )}
+            </div>
+            {index < steps.length - 1 && <div className={styles.connector} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/diagrams/FreeCodeInternalDiagram.module.css b/apps/web/app/internal/components/diagrams/FreeCodeInternalDiagram.module.css
new file mode 100644
index 00000000..2e2c3704
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/FreeCodeInternalDiagram.module.css
@@ -0,0 +1,415 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background: rgba(8, 8, 16, 0.7);
+  backdrop-filter: blur(16px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 24px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.diagramHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding-bottom: 12px;
+}
+
+.pulseDot {
+  width: 8px;
+  height: 8px;
+  background-color: #f97316;
+  border-radius: 50%;
+  box-shadow: 0 0 10px #f97316;
+  animation: pulse 1.8s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(0.9);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+    box-shadow: 0 0 14px #f97316;
+  }
+}
+
+.diagramLabel {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 2px;
+  color: rgba(255, 255, 255, 0.4);
+  font-family: monospace;
+}
+
+.diagramWrapper {
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 16px;
+}
+
+.svg {
+  width: 100%;
+  height: auto;
+  min-width: 850px;
+  display: block;
+}
+
+/* Connection line effects */
+.flowLine {
+  stroke-dasharray: 8 6;
+  animation: dashFlow 15s linear infinite;
+}
+
+.flowLineSlow {
+  stroke-dasharray: 6 8;
+  animation: dashFlow 25s linear infinite;
+}
+
+@keyframes dashFlow {
+  to {
+    stroke-dashoffset: -1000;
+  }
+}
+
+.connectionLabel {
+  font-size: 9px;
+  font-family: monospace;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+/* Outer Sandbox CLI Container style */
+.outerSandbox {
+  fill: rgba(6, 6, 12, 0.4);
+  stroke: rgba(255, 255, 255, 0.05);
+  stroke-width: 1.5;
+  stroke-dasharray: 10 5;
+}
+
+.outerSandboxTitle {
+  fill: rgba(255, 255, 255, 0.35);
+  font-size: 10px;
+  font-weight: 900;
+  font-family: monospace;
+  letter-spacing: 1.5px;
+}
+
+/* ==================== NODE STYLINGS ==================== */
+
+.nodeGroup {
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nodeGroup:hover {
+  transform: translateY(-2px);
+}
+
+/* Clients Box */
+.nodeBoxClients {
+  fill: rgba(15, 17, 28, 0.85);
+  stroke: rgba(129, 140, 248, 0.3);
+  stroke-width: 1.5;
+  transition: all 0.3s ease;
+}
+
+.nodeGroup:hover .nodeBoxClients {
+  stroke: rgba(129, 140, 248, 0.8);
+  fill: rgba(20, 23, 40, 0.9);
+}
+
+/* Agent Loop Box */
+.nodeBoxAgent {
+  fill: rgba(30, 16, 8, 0.85);
+  stroke: rgba(249, 115, 22, 0.4);
+  stroke-width: 2;
+  transition: all 0.3s ease;
+}
+
+.nodeGroup:hover .nodeBoxAgent {
+  stroke: rgba(249, 115, 22, 0.9);
+  fill: rgba(42, 20, 8, 0.9);
+}
+
+/* Sub-agents Box */
+.nodeBoxSubagents {
+  fill: rgba(20, 12, 22, 0.85);
+  stroke: rgba(236, 72, 153, 0.3);
+  stroke-width: 1.5;
+  transition: all 0.3s ease;
+}
+
+.nodeGroup:hover .nodeBoxSubagents {
+  stroke: rgba(236, 72, 153, 0.8);
+  fill: rgba(30, 16, 32, 0.9);
+}
+
+/* Context Box */
+.nodeBoxContext {
+  fill: rgba(8, 22, 18, 0.85);
+  stroke: rgba(16, 185, 129, 0.3);
+  stroke-width: 1.5;
+  transition: all 0.3s ease;
+}
+
+.nodeGroup:hover .nodeBoxContext {
+  stroke: rgba(16, 185, 129, 0.8);
+  fill: rgba(10, 32, 24, 0.9);
+}
+
+/* Tools Box */
+.nodeBoxTools {
+  fill: rgba(18, 12, 28, 0.85);
+  stroke: rgba(168, 85, 247, 0.3);
+  stroke-width: 2;
+  transition: all 0.3s ease;
+}
+
+.nodeGroup:hover .nodeBoxTools {
+  stroke: rgba(168, 85, 247, 0.8);
+  fill: rgba(28, 16, 42, 0.9);
+}
+
+/* Hooks Circle */
+.hooksCircle {
+  fill: rgba(16, 185, 129, 0.15);
+  stroke: rgba(16, 185, 129, 0.4);
+  stroke-width: 2;
+  transition: all 0.3s ease;
+}
+
+.nodeGroup:hover .hooksCircle {
+  stroke: rgba(16, 185, 129, 0.9);
+  fill: rgba(16, 185, 129, 0.3);
+  transform: scale(1.1);
+  transform-origin: 635px 200px;
+}
+
+.hooksLightning {
+  transition: transform 0.3s ease;
+}
+
+.nodeGroup:hover .hooksLightning {
+  transform: scale(1.15);
+  transform-origin: 635px 200px;
+}
+
+.hooksLabel {
+  fill: #10b981;
+  font-size: 11px;
+  font-weight: 800;
+  font-family: monospace;
+}
+
+.hooksSublabel {
+  fill: rgba(16, 185, 129, 0.6);
+  font-size: 8px;
+  font-family: monospace;
+}
+
+/* Selection State Rings */
+.activeNode .nodeBoxClients {
+  stroke: #818cf8;
+  stroke-width: 3;
+  fill: rgba(24, 28, 50, 0.95);
+  filter: drop-shadow(0 0 12px rgba(129, 140, 248, 0.4));
+}
+
+.activeNode .nodeBoxAgent {
+  stroke: #f97316;
+  stroke-width: 3.5;
+  fill: rgba(50, 24, 10, 0.95);
+  filter: drop-shadow(0 0 16px rgba(249, 115, 22, 0.5));
+}
+
+.activeNode .nodeBoxSubagents {
+  stroke: #ec4899;
+  stroke-width: 3;
+  fill: rgba(36, 18, 40, 0.95);
+  filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.4));
+}
+
+.activeNode .nodeBoxContext {
+  stroke: #10b981;
+  stroke-width: 3;
+  fill: rgba(12, 38, 28, 0.95);
+  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4));
+}
+
+.activeNode .nodeBoxTools {
+  stroke: #a855f7;
+  stroke-width: 3.5;
+  fill: rgba(34, 18, 52, 0.95);
+  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.5));
+}
+
+.activeNode .hooksCircle {
+  stroke: #10b981;
+  stroke-width: 3.5;
+  fill: rgba(16, 185, 129, 0.35);
+  filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.6));
+}
+
+/* Headers & Labels */
+.nodeHeader {
+  fill: rgba(255, 255, 255, 0.85);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+  font-family: monospace;
+}
+
+.nodeHeaderTools {
+  fill: #d8b4fe;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 2px;
+  font-family: monospace;
+}
+
+.nodeInfoLabel {
+  fill: rgba(255, 255, 255, 0.3);
+  font-size: 9px;
+  font-family: monospace;
+  letter-spacing: 0.5px;
+}
+
+/* Sub-card texts inside frontend/clients */
+.subCardText {
+  fill: rgba(255, 255, 255, 0.85);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.subCardDesc {
+  fill: rgba(255, 255, 255, 0.4);
+  font-size: 8px;
+  font-family: monospace;
+}
+
+/* Agent Loop Spinner animations */
+.gearGroup {
+  animation: spinGear 12s linear infinite;
+  transform-origin: 0px 0px;
+}
+
+@keyframes spinGear {
+  from {
+    transform: translate(480px, 270px) rotate(0deg);
+  }
+  to {
+    transform: translate(480px, 270px) rotate(360deg);
+  }
+}
+
+.pulsingCore {
+  animation: corePulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes corePulse {
+  0% {
+    r: 10px;
+    opacity: 0.7;
+    fill: #f97316;
+  }
+  100% {
+    r: 16px;
+    opacity: 1;
+    fill: #ff8838;
+    filter: drop-shadow(0 0 10px #ff8838);
+  }
+}
+
+.agentTag {
+  fill: #ffd8a8;
+  font-size: 9px;
+  font-weight: 900;
+  font-family: monospace;
+}
+
+.agentLoopLabel {
+  fill: rgba(255, 255, 255, 0.85);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+/* Sub-agent chip text */
+.miniCardTitle {
+  fill: #f472b6;
+  font-size: 8px;
+  font-weight: 800;
+}
+
+.miniCardSub {
+  fill: rgba(255, 255, 255, 0.5);
+  font-size: 7px;
+  font-family: monospace;
+}
+
+/* Context documents */
+.docLabel {
+  fill: rgba(255, 255, 255, 0.7);
+  font-size: 8px;
+  font-weight: 700;
+  font-family: monospace;
+}
+
+/* Memory database label */
+.dbLabel {
+  fill: #ffd43b;
+  font-size: 11px;
+  font-weight: 800;
+  font-family: monospace;
+}
+
+.dbCompactLabel {
+  fill: rgba(245, 158, 11, 0.6);
+  font-size: 8px;
+  font-family: monospace;
+}
+
+/* Tool grids */
+.toolGridLabel {
+  fill: rgba(255, 255, 255, 0.85);
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.toolGridDesc {
+  fill: rgba(255, 255, 255, 0.45);
+  font-size: 7.5px;
+  font-family: monospace;
+}
+
+.terminalIconPrompt {
+  fill: #a855f7;
+  font-size: 12px;
+  font-weight: 800;
+  font-family: monospace;
+}
+
+/* Guide box under diagram */
+.interactiveGuide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+}
+
+.interactiveGuide span {
+  color: rgba(255, 255, 255, 0.8);
+}
diff --git a/apps/web/app/internal/components/diagrams/FreeCodeInternalDiagram.tsx b/apps/web/app/internal/components/diagrams/FreeCodeInternalDiagram.tsx
new file mode 100644
index 00000000..aba38dcf
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/FreeCodeInternalDiagram.tsx
@@ -0,0 +1,526 @@
+'use client';
+
+import React from 'react';
+import styles from './FreeCodeInternalDiagram.module.css';
+
+export type NodeType =
+  | 'clients'
+  | 'agent'
+  | 'subagents'
+  | 'context'
+  | 'memory'
+  | 'hooks'
+  | 'tools';
+
+interface FreeCodeInternalDiagramProps {
+  selectedNode: NodeType | null;
+  onSelectNode: (node: NodeType) => void;
+}
+
+export function FreeCodeInternalDiagram({
+  selectedNode,
+  onSelectNode,
+}: FreeCodeInternalDiagramProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.diagramHeader}>
+        <span className={styles.pulseDot}></span>
+        <span className={styles.diagramLabel}>INTERACTIVE SYSTEM BLUEPRINT</span>
+      </div>
+
+      <div className={styles.diagramWrapper}>
+        <svg
+          className={styles.svg}
+          viewBox="0 0 1000 650"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          {/* DEFINITIONS FOR GRADIENTS AND GLOWS */}
+          <defs>
+            {/* Core glows */}
+            <filter id="glow-orange" x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="6" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+            <filter id="glow-purple" x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="6" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+            <filter id="glow-green" x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="8" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+            <filter id="glow-cyan" x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="6" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+            <filter id="glow-amber" x="-20%" y="-20%" width="140%" height="140%">
+              <feGaussianBlur stdDeviation="6" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+
+            {/* Line Gradients */}
+            <linearGradient id="grad-task" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#818cf8" />
+              <stop offset="100%" stopColor="#f97316" />
+            </linearGradient>
+            <linearGradient id="grad-call" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#f97316" />
+              <stop offset="50%" stopColor="#10b981" />
+              <stop offset="100%" stopColor="#a855f7" />
+            </linearGradient>
+            <linearGradient id="grad-result" x1="100%" y1="0%" x2="0%" y2="0%">
+              <stop offset="0%" stopColor="#a855f7" />
+              <stop offset="100%" stopColor="#f97316" />
+            </linearGradient>
+            <linearGradient id="grad-subagent" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#ec4899" />
+              <stop offset="100%" stopColor="#f97316" />
+            </linearGradient>
+            <linearGradient id="grad-context" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#10b981" />
+              <stop offset="100%" stopColor="#f97316" />
+            </linearGradient>
+            <linearGradient id="grad-memory" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#f59e0b" />
+              <stop offset="100%" stopColor="#f97316" />
+            </linearGradient>
+          </defs>
+
+          {/* BACKGROUND GRID PATTERN (Subtle Tech Look) */}
+          <g opacity="0.05">
+            <path d="M 0,50 L 1000,50 M 0,100 L 1000,100 M 0,150 L 1000,150 M 0,200 L 1000,200 M 0,250 L 1000,250 M 0,300 L 1000,300 M 0,350 L 1000,350 M 0,400 L 1000,400 M 0,450 L 1000,450 M 0,500 L 1000,500 M 0,550 L 1000,550 M 0,600 L 1000,600" stroke="rgba(255,255,255,0.4)" strokeWidth="0.5" />
+            <path d="M 100,0 L 100,650 M 200,0 L 200,650 M 300,0 L 300,650 M 400,0 L 400,650 M 500,0 L 500,650 M 600,0 L 600,650 M 700,0 L 700,650 M 800,0 L 800,650 M 900,0 L 900,650" stroke="rgba(255,255,255,0.4)" strokeWidth="0.5" />
+          </g>
+
+          {/* ==================== CONNECTIONS / FLOWS ==================== */}
+
+          {/* 1. You/Clients -> Agent (Task) */}
+          <g className={styles.flowLineGroup}>
+            <path
+              id="flow-task"
+              d="M 150 300 H 400"
+              stroke="url(#grad-task)"
+              strokeWidth="2.5"
+              className={styles.flowLine}
+            />
+            <polygon points="400,300 390,295 390,305" fill="#f97316" />
+            <rect x="235" y="278" width="80" height="18" rx="4" fill="#0b0b14" stroke="rgba(255,255,255,0.1)" strokeWidth="1" />
+            <text x="275" y="291" className={styles.connectionLabel} fill="rgba(255,255,255,0.7)">JSON-RPC Task</text>
+          </g>
+
+          {/* 2. Agent -> Sub-agents (Delegate / Bidirectional) */}
+          <g className={styles.flowLineGroup}>
+            <path
+              id="flow-subagent-out"
+              d="M 440 220 Q 380 180 370 150"
+              stroke="url(#grad-subagent)"
+              strokeWidth="2"
+              strokeDasharray="6 4"
+              className={styles.flowLineSlow}
+            />
+            <polygon points="370,150 378,155 370,161" fill="#ec4899" />
+            <text x="345" y="210" className={styles.connectionLabel} fill="#ec4899" textAnchor="end">delegate subtasks</text>
+
+            <path
+              id="flow-subagent-in"
+              d="M 370 120 Q 400 120 440 240"
+              stroke="url(#grad-subagent)"
+              strokeWidth="2"
+              strokeDasharray="6 4"
+              className={styles.flowLineSlow}
+            />
+            <polygon points="440,240 435,231 443,233" fill="#f97316" />
+            <text x="430" y="115" className={styles.connectionLabel} fill="#f97316" textAnchor="start">results</text>
+          </g>
+
+          {/* 3. Context -> Agent (Pre-loaded on startup) */}
+          <g className={styles.flowLineGroup}>
+            <path
+              id="flow-context"
+              d="M 370 500 Q 420 500 450 380"
+              stroke="url(#grad-context)"
+              strokeWidth="2"
+              className={styles.flowLine}
+            />
+            <polygon points="450,380 443,388 451,388" fill="#f97316" />
+            <text x="445" y="475" className={styles.connectionLabel} fill="#10b981" textAnchor="end">on startup</text>
+          </g>
+
+          {/* 4. Agent <-> Memory (Read/Write session state) */}
+          <g className={styles.flowLineGroup}>
+            <path
+              id="flow-memory-out"
+              d="M 540 380 Q 640 450 710 470"
+              stroke="url(#grad-memory)"
+              strokeWidth="2"
+              strokeDasharray="6 4"
+              className={styles.flowLineSlow}
+            />
+            <polygon points="710,470 701,466 705,474" fill="#f59e0b" />
+
+            <path
+              id="flow-memory-in"
+              d="M 710 490 Q 610 470 520 380"
+              stroke="url(#grad-memory)"
+              strokeWidth="2"
+              strokeDasharray="6 4"
+              className={styles.flowLineSlow}
+            />
+            <polygon points="520,380 528,386 521,389" fill="#f97316" />
+            <text x="640" y="420" className={styles.connectionLabel} fill="#f59e0b" textAnchor="middle">read / write context</text>
+          </g>
+
+          {/* 5. Agent -> Hooks -> Tools (Execution pipeline) */}
+          <g className={styles.flowLineGroup}>
+            {/* Agent -> Hooks */}
+            <path
+              id="flow-to-hooks"
+              d="M 560 280 Q 600 240 625 210"
+              stroke="url(#grad-call)"
+              strokeWidth="2"
+              className={styles.flowLine}
+            />
+            <text x="590" y="240" className={styles.connectionLabel} fill="#f97316" textAnchor="end">call</text>
+
+            {/* Hooks -> Tools */}
+            <path
+              id="flow-hooks-to-tools"
+              d="M 645 190 Q 660 170 690 160"
+              stroke="#10b981"
+              strokeWidth="2"
+              className={styles.flowLine}
+            />
+            <polygon points="690,160 681,158 684,166" fill="#10b981" />
+          </g>
+
+          {/* 6. Tools -> Agent (Result callback) */}
+          <g className={styles.flowLineGroup}>
+            <path
+              id="flow-result"
+              d="M 690 320 H 560"
+              stroke="url(#grad-result)"
+              strokeWidth="2"
+              className={styles.flowLine}
+            />
+            <polygon points="560,320 570,315 570,325" fill="#f97316" />
+            <text x="625" y="340" className={styles.connectionLabel} fill="#a855f7" textAnchor="middle">result</text>
+          </g>
+
+
+          {/* ==================== SANDBOX / SYSTEM CONTAINER ==================== */}
+          <g className={styles.sandboxContainer}>
+            <rect
+              x="180"
+              y="20"
+              width="800"
+              height="605"
+              rx="16"
+              className={styles.outerSandbox}
+            />
+            <rect x="200" y="35" width="220" height="24" rx="6" fill="#121225" />
+            <text x="215" y="52" className={styles.outerSandboxTitle}>
+              &gt;_ FREECODE CLI BACKEND (DAEMON)
+            </text>
+          </g>
+
+
+          {/* ==================== NODES / INTERACTIVE CARDS ==================== */}
+
+          {/* 1. YOU / CLIENTS FRONTEND */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'clients' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('clients')}
+          >
+            <rect
+              x="10"
+              y="200"
+              width="140"
+              height="200"
+              rx="12"
+              className={styles.nodeBoxClients}
+            />
+            {/* Header / Title */}
+            <text x="80" y="235" className={styles.nodeHeader} textAnchor="middle">
+              YOU / CLIENTS
+            </text>
+            <line x1="25" y1="245" x2="135" y2="245" stroke="rgba(255,255,255,0.1)" />
+
+            {/* Sub-cards */}
+            {/* TUI */}
+            <rect x="25" y="260" width="110" height="45" rx="6" fill="rgba(129, 140, 248, 0.15)" stroke="rgba(129, 140, 248, 0.4)" />
+            <text x="80" y="280" className={styles.subCardText} textAnchor="middle">Terminal TUI</text>
+            <text x="80" y="293" className={styles.subCardDesc} textAnchor="middle">pi-tui rendering</text>
+
+            {/* VS Code Extension */}
+            <rect x="25" y="315" width="110" height="45" rx="6" fill="rgba(129, 140, 248, 0.15)" stroke="rgba(129, 140, 248, 0.4)" />
+            <text x="80" y="335" className={styles.subCardText} textAnchor="middle">VSCode Ext</text>
+            <text x="80" y="348" className={styles.subCardDesc} textAnchor="middle">React webview</text>
+
+            <text x="80" y="382" className={styles.nodeInfoLabel} textAnchor="middle">
+              Thin clients
+            </text>
+          </g>
+
+
+          {/* 2. AGENT reasoning loop (Center) */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'agent' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('agent')}
+          >
+            <rect
+              x="400"
+              y="220"
+              width="160"
+              height="160"
+              rx="14"
+              className={styles.nodeBoxAgent}
+              filter="url(#glow-orange)"
+            />
+
+            {/* Orange spinner in background */}
+            <g transform="translate(480, 290)" className={styles.gearGroup}>
+              <circle r="30" stroke="#f97316" strokeWidth="2.5" strokeDasharray="10 5" fill="none" />
+              <path d="M 0,-30 L 0,-25 M 0,30 L 0,25 M -30,0 L -25,0 M 30,0 L 25,0 M -21,-21 L -17,-17 M 21,21 L 17,17 M -21,21 L -17,17 M 21,-21 L 17,-17" stroke="#f97316" strokeWidth="3" />
+              {/* Internal pulsing starburst */}
+              <circle r="15" fill="#f97316" className={styles.pulsingCore} />
+            </g>
+
+            <rect x="445" y="335" width="70" height="16" rx="4" fill="#0b0b14" stroke="rgba(249,115,22,0.5)" />
+            <text x="480" y="347" className={styles.agentTag} textAnchor="middle">⚙️ AGENT</text>
+            <text x="480" y="367" className={styles.agentLoopLabel} textAnchor="middle">Reasoning Loop</text>
+          </g>
+
+
+          {/* 3. SUB-AGENTS box (Top Left) */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'subagents' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('subagents')}
+          >
+            <rect
+              x="210"
+              y="60"
+              width="160"
+              height="140"
+              rx="12"
+              className={styles.nodeBoxSubagents}
+            />
+            <text x="290" y="85" className={styles.nodeHeader} textAnchor="middle">
+              💾 SUB-AGENTS
+            </text>
+            <line x1="225" y1="95" x2="355" y2="95" stroke="rgba(255,255,255,0.1)" />
+
+            {/* Mini chip sub-agent cards */}
+            <g transform="translate(225, 108)">
+              <rect width="60" height="42" rx="4" fill="rgba(236,72,153,0.1)" stroke="rgba(236,72,153,0.3)" />
+              <rect x="5" y="5" width="10" height="10" rx="2" fill="#ec4899" />
+              <text x="8" y="27" className={styles.miniCardTitle}>Sub-Agent</text>
+              <text x="8" y="36" className={styles.miniCardSub}>Tasker</text>
+            </g>
+
+            <g transform="translate(295, 108)">
+              <rect width="60" height="42" rx="4" fill="rgba(236,72,153,0.1)" stroke="rgba(236,72,153,0.3)" />
+              <rect x="5" y="5" width="10" height="10" rx="2" fill="#ec4899" />
+              <text x="8" y="27" className={styles.miniCardTitle}>Sub-Agent</text>
+              <text x="8" y="36" className={styles.miniCardSub}>Tester</text>
+            </g>
+
+            <text x="290" y="185" className={styles.nodeInfoLabel} textAnchor="middle">
+              Parallel execution
+            </text>
+          </g>
+
+
+          {/* 4. CONTEXT Engine (Bottom Left) */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'context' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('context')}
+          >
+            <rect
+              x="210"
+              y="420"
+              width="160"
+              height="160"
+              rx="12"
+              className={styles.nodeBoxContext}
+            />
+            <text x="290" y="445" className={styles.nodeHeader} textAnchor="middle">
+              📄 CONTEXT
+            </text>
+            <line x1="225" y1="455" x2="355" y2="455" stroke="rgba(255,255,255,0.1)" />
+
+            {/* AGENTS.md document icon */}
+            <g transform="translate(230, 468)">
+              <rect width="55" height="60" rx="5" fill="#111827" stroke="rgba(16,185,129,0.4)" />
+              <path d="M 12 15 H 43 M 12 25 H 43 M 12 35 H 30 M 12 45 H 25" stroke="rgba(16,185,129,0.5)" strokeWidth="2.5" />
+              <text x="27.5" y="52" className={styles.docLabel} textAnchor="middle">AGENTS.md</text>
+            </g>
+
+            {/* Skills lightning icon */}
+            <g transform="translate(300, 468)">
+              <rect width="55" height="60" rx="5" fill="#111827" stroke="rgba(16,185,129,0.4)" />
+              <path d="M 28 8 L 18 32 L 28 32 L 24 52 L 40 24 L 28 24 Z" fill="#10b981" />
+              <text x="27.5" y="52" className={styles.docLabel} textAnchor="middle">Skills</text>
+            </g>
+
+            <text x="290" y="565" className={styles.nodeInfoLabel} textAnchor="middle">
+              Project conventions
+            </text>
+          </g>
+
+
+          {/* 5. MEMORY Cylinder (Bottom Right) */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'memory' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('memory')}
+          >
+            {/* Database cylinders */}
+            <g transform="translate(710, 440)">
+              <rect x="0" y="0" width="100" height="130" rx="8" fill="rgba(11, 11, 20, 0.7)" stroke="rgba(245,158,11,0.2)" />
+              
+              <ellipse cx="50" cy="25" rx="35" ry="12" fill="rgba(245,158,11,0.2)" stroke="#f59e0b" strokeWidth="2" filter="url(#glow-amber)" />
+              
+              <path d="M 15 25 V 60 A 35 12 0 0 0 85 60 V 25" fill="none" stroke="#f59e0b" strokeWidth="2" />
+              <ellipse cx="50" cy="60" rx="35" ry="12" fill="rgba(245,158,11,0.1)" stroke="#f59e0b" strokeWidth="1.5" />
+              
+              <path d="M 15 60 V 95 A 35 12 0 0 0 85 95 V 60" fill="none" stroke="#f59e0b" strokeWidth="2" />
+              <ellipse cx="50" cy="95" rx="35" ry="12" fill="rgba(245,158,11,0.1)" stroke="#f59e0b" strokeWidth="1.5" />
+
+              <text x="50" y="120" className={styles.dbLabel} textAnchor="middle">Memory</text>
+            </g>
+
+            {/* Compaction arrows */}
+            <g transform="translate(825, 475)">
+              <circle r="22" fill="rgba(245,158,11,0.08)" stroke="rgba(245,158,11,0.3)" strokeWidth="1" strokeDasharray="3 3" />
+              {/* compacting arrows */}
+              <path d="M -10,-10 L 0,-3 L 10,-10 M -10,10 L 0,3 L 10,10 M -12,0 H 12" stroke="#f59e0b" strokeWidth="2" fill="none" />
+              <text x="0" y="-28" className={styles.dbCompactLabel} textAnchor="middle">auto-compacts</text>
+              <text x="0" y="34" className={styles.dbCompactLabel} textAnchor="middle">when full</text>
+            </g>
+          </g>
+
+
+          {/* 6. HOOKS Lightning Middleware */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'hooks' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('hooks')}
+          >
+            <circle
+              cx="635"
+              cy="200"
+              r="26"
+              className={styles.hooksCircle}
+              filter="url(#glow-green)"
+            />
+            {/* Green glowing lightning bolt */}
+            <path
+              d="M 638 184 L 626 202 H 635 L 632 216 L 644 198 H 635 Z"
+              fill="#10b981"
+              className={styles.hooksLightning}
+            />
+            <text x="635" y="165" className={styles.hooksLabel} textAnchor="middle">
+              Hooks
+            </text>
+            <text x="635" y="240" className={styles.hooksSublabel} textAnchor="middle">
+              (Safety Middleware)
+            </text>
+          </g>
+
+
+          {/* 7. TOOLS Box (Right/Top Right) */}
+          <g
+            className={`${styles.nodeGroup} ${
+              selectedNode === 'tools' ? styles.activeNode : ''
+            }`}
+            onClick={() => onSelectNode('tools')}
+          >
+            <rect
+              x="690"
+              y="60"
+              width="250"
+              height="320"
+              rx="16"
+              className={styles.nodeBoxTools}
+              filter="url(#glow-purple)"
+            />
+            <text x="815" y="90" className={styles.nodeHeaderTools} textAnchor="middle">
+              🛠️ TOOLS
+            </text>
+            <line x1="710" y1="102" x2="920" y2="102" stroke="rgba(168,85,247,0.3)" />
+
+            {/* Interactive inner tool grids */}
+            {/* Tool 1: FileRead / Write */}
+            <g transform="translate(715, 115)">
+              <rect width="95" height="85" rx="8" fill="rgba(168,85,247,0.08)" stroke="rgba(168,85,247,0.3)" />
+              <path d="M 47.5,20 V 45 M 35,32 H 60 M 32,58 H 63" stroke="#a855f7" strokeWidth="2.5" fill="none" />
+              <text x="47.5" y="70" className={styles.toolGridLabel} textAnchor="middle">File Read/Write</text>
+              <text x="47.5" y="79" className={styles.toolGridDesc} textAnchor="middle">read.ts, write.ts</text>
+            </g>
+
+            {/* Tool 2: Bash Executor */}
+            <g transform="translate(830, 115)">
+              <rect width="95" height="85" rx="8" fill="rgba(168,85,247,0.08)" stroke="rgba(168,85,247,0.3)" />
+              <rect x="25" y="22" width="45" height="30" rx="4" fill="#0b0b14" stroke="rgba(168,85,247,0.4)" />
+              <text x="47.5" y="42" className={styles.terminalIconPrompt} textAnchor="middle">&gt;_</text>
+              <text x="47.5" y="70" className={styles.toolGridLabel} textAnchor="middle">Bash Shell</text>
+              <text x="47.5" y="79" className={styles.toolGridDesc} textAnchor="middle">bash.ts</text>
+            </g>
+
+            {/* Tool 3: Web Search */}
+            <g transform="translate(715, 215)">
+              <rect width="95" height="85" rx="8" fill="rgba(168,85,247,0.08)" stroke="rgba(168,85,247,0.3)" />
+              <circle cx="47.5" cy="35" r="14" fill="none" stroke="#a855f7" strokeWidth="2.5" />
+              <line x1="56" y1="44" x2="68" y2="56" stroke="#a855f7" strokeWidth="2.5" strokeLinecap="round" />
+              <text x="47.5" y="70" className={styles.toolGridLabel} textAnchor="middle">Grep Search</text>
+              <text x="47.5" y="79" className={styles.toolGridDesc} textAnchor="middle">grep.ts, find.ts</text>
+            </g>
+
+            {/* Tool 4: Glob Match */}
+            <g transform="translate(830, 215)">
+              <rect width="95" height="85" rx="8" fill="rgba(168,85,247,0.08)" stroke="rgba(168,85,247,0.3)" />
+              <path d="M 47.5,20 L 47.5,50 M 32.5,35 H 62.5 M 37,24.5 L 58,45.5 M 37,45.5 L 58,24.5" stroke="#a855f7" strokeWidth="2" />
+              <circle cx="47.5" cy="35" r="5" fill="#a855f7" />
+              <text x="47.5" y="70" className={styles.toolGridLabel} textAnchor="middle">Glob Match</text>
+              <text x="47.5" y="79" className={styles.toolGridDesc} textAnchor="middle">glob.ts</text>
+            </g>
+
+            <text x="815" y="322" className={styles.nodeInfoLabel} textAnchor="middle">
+              Action handler suite
+            </text>
+          </g>
+        </svg>
+      </div>
+
+      <div className={styles.interactiveGuide}>
+        💡 <span>Click on any system component above to inspect its architecture, source code files, and execution logs.</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/internal/components/diagrams/index.ts b/apps/web/app/internal/components/diagrams/index.ts
new file mode 100644
index 00000000..563d6163
--- /dev/null
+++ b/apps/web/app/internal/components/diagrams/index.ts
@@ -0,0 +1,4 @@
+export { ArchitectureDiagram } from './ArchitectureDiagram';
+export { BoundaryDiagram } from './BoundaryDiagram';
+export { FlowDiagram } from './FlowDiagram';
+export { FreeCodeInternalDiagram, type NodeType } from './FreeCodeInternalDiagram';
\ No newline at end of file
diff --git a/apps/web/app/internal/components/presentation/ArchitectureExplorer.module.css b/apps/web/app/internal/components/presentation/ArchitectureExplorer.module.css
new file mode 100644
index 00000000..97c766b9
--- /dev/null
+++ b/apps/web/app/internal/components/presentation/ArchitectureExplorer.module.css
@@ -0,0 +1,541 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  background: rgba(8, 8, 16, 0.7);
+  backdrop-filter: blur(16px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 24px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  min-height: 480px;
+  justify-content: flex-start;
+  transition: all 0.3s ease;
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex: 1;
+  padding: 40px 20px;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.emptyIcon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+  animation: floatIcon 3s ease-in-out infinite alternate;
+}
+
+@keyframes floatIcon {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-10px); }
+}
+
+.emptyState h4 {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85);
+  margin-bottom: 8px;
+}
+
+.emptyState p {
+  font-size: 13px;
+  line-height: 1.6;
+  max-width: 320px;
+}
+
+/* ==================== CONTENT ELEMENTS ==================== */
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.icon {
+  font-size: 28px;
+  width: 48px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.95);
+  margin: 0;
+}
+
+.subtext {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: monospace;
+  margin: 2px 0 0 0;
+}
+
+.description {
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 20px;
+}
+
+.description strong {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+/* Key Files List */
+.filesBox {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.filesTitle {
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: rgba(255, 255, 255, 0.4);
+  margin: 0 0 12px 0;
+}
+
+.filesList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.filesList li {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.fileBadge {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  width: 90px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.fileLink {
+  color: rgba(129, 140, 248, 0.9);
+  font-family: monospace;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+  word-break: break-all;
+}
+
+.fileLink:hover {
+  color: rgba(129, 140, 248, 1);
+  text-shadow: 0 0 8px rgba(129, 140, 248, 0.4);
+}
+
+/* ==================== SIMULATION PANELS ==================== */
+
+.simContainer {
+  background: #06060c;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+  margin-top: auto;
+}
+
+.simHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 10px 16px;
+  font-size: 11px;
+  font-weight: 800;
+  font-family: monospace;
+  letter-spacing: 0.5px;
+  color: rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.greenPulse, .orangePulse, .pinkPulse, .emeraldPulse, .amberPulse, .yellowPulse, .purplePulse {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  box-shadow: 0 0 6px currentColor;
+  opacity: 0.8;
+}
+
+.greenPulse { color: #10b981; background: #10b981; animation: blinkPulse 1.5s infinite; }
+.orangePulse { color: #f97316; background: #f97316; animation: blinkPulse 1.5s infinite; }
+.pinkPulse { color: #ec4899; background: #ec4899; animation: blinkPulse 1.5s infinite; }
+.emeraldPulse { color: #10b981; background: #10b981; animation: blinkPulse 1.5s infinite; }
+.amberPulse { color: #f59e0b; background: #f59e0b; animation: blinkPulse 2s infinite; }
+.yellowPulse { color: #ffd43b; background: #ffd43b; animation: fastPulse 0.5s infinite; }
+.purplePulse { color: #a855f7; background: #a855f7; animation: blinkPulse 1.5s infinite; }
+
+@keyframes blinkPulse {
+  0%, 100% { opacity: 0.3; transform: scale(0.9); }
+  50% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 10px currentColor; }
+}
+
+@keyframes fastPulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; box-shadow: 0 0 12px currentColor; }
+}
+
+.simConsole {
+  padding: 16px;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.jsonCode {
+  font-family: monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+/* Terminal simulation inside Agent */
+.simTerminal {
+  padding: 16px;
+  font-family: monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  max-height: 220px;
+  overflow-y: auto;
+  color: rgba(255, 255, 255, 0.85);
+  background: #030307;
+}
+
+.terminalLine {
+  margin-bottom: 6px;
+}
+
+.promptArrow {
+  color: #f97316;
+  font-weight: 800;
+  margin-right: 4px;
+}
+
+/* Threads Manager inside Sub-Agents */
+.threadsDashboard {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.threadRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 12px;
+  transition: all 0.3s ease;
+}
+
+.threadRunning {
+  border-color: rgba(236, 72, 153, 0.3);
+  background: rgba(236, 72, 153, 0.04);
+}
+
+.threadName {
+  color: rgba(255, 255, 255, 0.85);
+  font-family: monospace;
+}
+
+.statusLabel {
+  font-family: monospace;
+  font-size: 9px;
+  font-weight: 800;
+  padding: 3px 8px;
+  border-radius: 4px;
+}
+
+.statusIdle { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }
+.statusWorking { background: rgba(249,115,22,0.15); color: #f97316; border: 1px solid rgba(249,115,22,0.3); }
+.statusSpawning { background: rgba(236,72,153,0.15); color: #ec4899; border: 1px solid rgba(236,72,153,0.3); }
+.statusActive { background: rgba(236,72,153,0.25); color: #ec4899; border: 1px solid #ec4899; animation: threadPulse 1s infinite alternate; }
+.statusSuccess { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
+
+@keyframes threadPulse {
+  0% { opacity: 0.7; }
+  100% { opacity: 1; box-shadow: 0 0 6px rgba(236,72,153,0.4); }
+}
+
+/* Context compilation */
+.contextCompiler {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.compilerStep {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.stepIndicator {
+  background: rgba(16, 185, 129, 0.15);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  color: #10b981;
+  font-size: 8px;
+  font-weight: 800;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: monospace;
+}
+
+.greenText {
+  color: #10b981;
+  font-weight: 700;
+}
+
+.compilerSystemPrompt {
+  margin-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding-top: 10px;
+}
+
+.promptHeader {
+  font-size: 9px;
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.4);
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.promptCode {
+  margin: 0;
+  font-family: monospace;
+  font-size: 10px;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.6);
+  background: rgba(0, 0, 0, 0.4);
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+/* Memory & compaction dashboard */
+.memoryBarContainer {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.memoryBarLabel {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: monospace;
+}
+
+.memoryProgressBar {
+  height: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+
+.memoryFill {
+  height: 100%;
+  background: linear-gradient(90deg, #f59e0b, #f97316);
+  box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
+  border-radius: 5px;
+  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memoryHigh {
+  background: linear-gradient(90deg, #f97316, #ef4444);
+  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
+  animation: glowHigh 0.5s infinite alternate;
+}
+
+@keyframes glowHigh {
+  0% { filter: brightness(1); }
+  100% { filter: brightness(1.2); }
+}
+
+.memoryFillCompacting {
+  background: #ffd43b !important;
+  animation: compactionStrobe 0.15s infinite;
+}
+
+@keyframes compactionStrobe {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+.compactAlert {
+  font-size: 9px;
+  font-weight: 800;
+  color: #ffd43b;
+  background: rgba(255, 212, 59, 0.1);
+  border: 1px solid rgba(255, 212, 59, 0.3);
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-family: monospace;
+}
+
+.warningAlert {
+  font-size: 9px;
+  font-weight: 800;
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-family: monospace;
+}
+
+.successAlert {
+  font-size: 9px;
+  font-weight: 800;
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+  padding: 8px;
+  border-radius: 6px;
+  text-align: center;
+  font-family: monospace;
+}
+
+/* Hooks Sandbox */
+.hooksSandbox {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hooksToggle {
+  display: flex;
+  gap: 8px;
+}
+
+.toggleBtn {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.6);
+  padding: 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.toggleBtn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: white;
+}
+
+.toggleActiveSafe {
+  background: rgba(16, 185, 129, 0.15) !important;
+  border-color: rgba(16, 185, 129, 0.5) !important;
+  color: #10b981 !important;
+}
+
+.toggleActiveUnsafe {
+  background: rgba(239, 68, 68, 0.15) !important;
+  border-color: rgba(239, 68, 68, 0.5) !important;
+  color: #ef4444 !important;
+}
+
+.sandboxOutput {
+  background: #030307;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  padding: 12px;
+  min-height: 110px;
+}
+
+.hookConsoleLog {
+  font-family: monospace;
+  font-size: 10.5px;
+  line-height: 1.5;
+}
+
+.hookLogLine {
+  margin-bottom: 5px;
+}
+
+.hookInfo { color: rgba(255,255,255,0.4); }
+.hookPre { color: #f97316; font-weight: 700; }
+.hookSuccess { color: #10b981; font-weight: 700; }
+.hookPost { color: #a855f7; font-weight: 700; }
+.errorText { color: #ef4444; font-weight: 700; }
+
+.hookLogBlockAlert {
+  background: rgba(239, 68, 68, 0.15);
+  border: 1px solid #ef4444;
+  color: #ef4444;
+  font-weight: 700;
+  padding: 10px;
+  border-radius: 6px;
+  margin-top: 8px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.6);
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.closeButton:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.4);
+  color: #ef4444;
+  transform: rotate(90deg);
+}
diff --git a/apps/web/app/internal/components/presentation/ArchitectureExplorer.tsx b/apps/web/app/internal/components/presentation/ArchitectureExplorer.tsx
new file mode 100644
index 00000000..dd4cd283
--- /dev/null
+++ b/apps/web/app/internal/components/presentation/ArchitectureExplorer.tsx
@@ -0,0 +1,676 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import styles from './ArchitectureExplorer.module.css';
+import { type NodeType } from '../diagrams/FreeCodeInternalDiagram';
+
+interface ArchitectureExplorerProps {
+  selectedNode: NodeType | null;
+  onClose?: () => void;
+}
+
+export function ArchitectureExplorer({ selectedNode, onClose }: ArchitectureExplorerProps) {
+  const [activeHookSafety, setActiveHookSafety] = useState<'safe' | 'unsafe'>('safe');
+  const [memoryCapacity, setMemoryCapacity] = useState(35);
+  const [isCompacting, setIsCompacting] = useState(false);
+  const [agentLogs, setAgentLogs] = useState<string[]>([]);
+  const [ipcStep, setIpcStep] = useState(0);
+  const [subAgentState, setSubAgentState] = useState<'idle' | 'spawning' | 'running' | 'done'>('idle');
+
+  // References for timeouts
+  const timersRef = useRef<NodeJS.Timeout[]>([]);
+
+  const clearAllTimers = () => {
+    timersRef.current.forEach(clearTimeout);
+    timersRef.current = [];
+  };
+
+  // 1. Agent Loop Simulation
+  useEffect(() => {
+    if (selectedNode !== 'agent') {
+      setAgentLogs([]);
+      return;
+    }
+    clearAllTimers();
+
+    const logs = [
+      '🤖 Starting agent turn (Sequence #4)...',
+      '🔍 Querying ContextEngine for updated file list...',
+      '📡 Querying AI Provider (ChatGPT/Claude)...',
+      '💭 AI Thinking: "We need to fix the typo in database client..."',
+      '🛠️ AI Decided to call tool: grep_search({ query: "DB_CONNECTION_LIMIT" })',
+      '⚡ Intercepting tool call with Pre-Execute Hooks...',
+      '✅ Safety check passed. Executing grep_search...',
+      '📤 Tool returned: "Found 1 match in src/db.ts:45"',
+      '📡 Sending tool results back to AI Provider...',
+      '💭 AI Thinking: "I will now edit line 45 using replace_file_content..."',
+      '🛠️ AI Decided to call tool: replace_file_content(...)',
+      '⚡ Intercepting tool call with Pre-Execute Hooks...',
+      '✅ Safety check passed. Writing diff preview...',
+      '📝 Applied code change successfully! User approved diff.',
+      '🏁 Turn complete! Task fully accomplished.'
+    ];
+
+    setAgentLogs([logs[0] || '']);
+    let currentIdx = 0;
+
+    const streamLogs = () => {
+      if (currentIdx >= logs.length - 1) {
+        const resetTimer = setTimeout(() => {
+          currentIdx = 0;
+          setAgentLogs([logs[0] || '']);
+          streamLogs();
+        }, 4000);
+        timersRef.current.push(resetTimer);
+        return;
+      }
+
+      currentIdx++;
+      const nextLog = logs[currentIdx];
+      if (nextLog) {
+        setAgentLogs(prev => [...prev, nextLog]);
+      }
+      const logTimer = setTimeout(streamLogs, 1500);
+      timersRef.current.push(logTimer);
+    };
+
+    const initialTimer = setTimeout(streamLogs, 1500);
+    timersRef.current.push(initialTimer);
+
+    return () => clearAllTimers();
+  }, [selectedNode]);
+
+  // 2. Memory Compaction Simulation
+  useEffect(() => {
+    if (selectedNode !== 'memory') return;
+    clearAllTimers();
+    setIsCompacting(false);
+    setMemoryCapacity(35);
+
+    const runMemoryCycle = () => {
+      let currentVal = 35;
+      const interval = setInterval(() => {
+        currentVal += 15;
+        if (currentVal >= 95) {
+          clearInterval(interval);
+          setMemoryCapacity(98);
+          setIsCompacting(true);
+
+          // Compaction phase
+          const compactTimer = setTimeout(() => {
+            setIsCompacting(false);
+            setMemoryCapacity(15);
+            // Run again
+            const loopAgainTimer = setTimeout(runMemoryCycle, 2000);
+            timersRef.current.push(loopAgainTimer);
+          }, 3000);
+          timersRef.current.push(compactTimer);
+        } else {
+          setMemoryCapacity(currentVal);
+        }
+      }, 1000);
+
+      // Track interval so we can clear it
+      const pushInterval = {
+        ref: interval,
+        close: () => clearInterval(interval)
+      };
+      // We manually clear intervals using our ref
+      timersRef.current.push(setTimeout(() => pushInterval.close(), 10000));
+    };
+
+    runMemoryCycle();
+
+    return () => clearAllTimers();
+  }, [selectedNode]);
+
+  // 3. IPC Step simulation
+  useEffect(() => {
+    if (selectedNode !== 'clients') return;
+    clearAllTimers();
+
+    const cycleIpc = () => {
+      setIpcStep(prev => (prev + 1) % 4);
+      const timer = setTimeout(cycleIpc, 3000);
+      timersRef.current.push(timer);
+    };
+
+    const timer = setTimeout(cycleIpc, 3000);
+    timersRef.current.push(timer);
+
+    return () => clearAllTimers();
+  }, [selectedNode]);
+
+  // 4. Sub-Agent Simulation
+  useEffect(() => {
+    if (selectedNode !== 'subagents') return;
+    clearAllTimers();
+    setSubAgentState('idle');
+
+    const cycleSubAgents = () => {
+      setSubAgentState('spawning');
+      
+      const t1 = setTimeout(() => {
+        setSubAgentState('running');
+      }, 2000);
+      timersRef.current.push(t1);
+
+      const t2 = setTimeout(() => {
+        setSubAgentState('done');
+      }, 6000);
+      timersRef.current.push(t2);
+
+      const t3 = setTimeout(() => {
+        setSubAgentState('idle');
+        const loopTimer = setTimeout(cycleSubAgents, 2000);
+        timersRef.current.push(loopTimer);
+      }, 9500);
+      timersRef.current.push(t3);
+    };
+
+    const delayStart = setTimeout(cycleSubAgents, 1000);
+    timersRef.current.push(delayStart);
+
+    return () => clearAllTimers();
+  }, [selectedNode]);
+
+  const renderContent = () => {
+    switch (selectedNode) {
+      case 'clients':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>💻</span>
+              <div>
+                <h4 className={styles.title}>You / Clients Frontends</h4>
+                <p className={styles.subtext}>Thin Client UI Presentation</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              FreeCode is designed with a **strict separation of concerns**. The TUI (Terminal User Interface) and VS Code extensions contain <strong>zero business logic</strong>. They do not handle browser automation, file reading/writing, or AI reasoning. They act purely as rendering engines and user interaction captures.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>TUI Shell</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/tui/src/index.ts" className={styles.fileLink}>apps/tui/src/index.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>VSCode Ext</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/vscode/src/extension.ts" className={styles.fileLink}>apps/vscode/src/extension.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>Types/IPC</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/packages/shared/src/ipc/protocol.ts" className={styles.fileLink}>packages/shared/src/ipc/protocol.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>JSON-RPC Live Communication Stream</span>
+                <span className={styles.greenPulse}></span>
+              </div>
+              <div className={styles.simConsole}>
+                {ipcStep === 0 && (
+                  <pre className={styles.jsonCode}>
+{`// 1. Client connects and starts a new project session
+--> WRITE stdin (Request):
+{
+  "jsonrpc": "2.0",
+  "id": 101,
+  "method": "session.start",
+  "params": {
+    "projectPath": "/home/user/my-app",
+    "provider": "chatgpt"
+  }
+}`}
+                  </pre>
+                )}
+                {ipcStep === 1 && (
+                  <pre className={styles.jsonCode}>
+{`<-- READ stdout (Response):
+{
+  "jsonrpc": "2.0",
+  "id": 101,
+  "result": {
+    "sessionId": "sess_8f3d12c6"
+  }
+}`}
+                  </pre>
+                )}
+                {ipcStep === 2 && (
+                  <pre className={styles.jsonCode}>
+{`// 2. User sends prompt to the Agent
+--> WRITE stdin (Request):
+{
+  "jsonrpc": "2.0",
+  "id": 102,
+  "method": "session.send",
+  "params": {
+    "sessionId": "sess_8f3d12c6",
+    "message": "Fix database connection limits in db.ts"
+  }
+}`}
+                  </pre>
+                )}
+                {ipcStep === 3 && (
+                  <pre className={styles.jsonCode}>
+{`<-- READ stdout (Streaming MessagePart):
+{
+  "jsonrpc": "2.0",
+  "id": 102,
+  "result": {
+    "type": "text",
+    "content": "Searching for database connection files..."
+  }
+}`}
+                  </pre>
+                )}
+              </div>
+            </div>
+          </>
+        );
+
+      case 'agent':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>⚙️</span>
+              <div>
+                <h4 className={styles.title}>Agent Orchestrator Loop</h4>
+                <p className={styles.subtext}>Stateful Turning Loop</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              The <strong>Agent Loop</strong> is the intelligence core. It operates in cyclic turns: instead of a single completion request, it repeatedly queries the AI provider, evaluates what tool to run next, invokes the tools safely, appends results to session history, and loops again until the goal is fully accomplished.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>Loop Engine</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/agent/loop.ts" className={styles.fileLink}>apps/cli/src/agent/loop.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>Session Store</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/agent/session.ts" className={styles.fileLink}>apps/cli/src/agent/session.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>Live Orchestrator Trace logs</span>
+                <span className={styles.orangePulse}></span>
+              </div>
+              <div className={styles.simTerminal} ref={el => { if (el) el.scrollTop = el.scrollHeight; }}>
+                {agentLogs.map((log, idx) => (
+                  <div key={idx} className={styles.terminalLine}>
+                    <span className={styles.promptArrow}>&gt;</span> {log}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </>
+        );
+
+      case 'subagents':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>🤖</span>
+              <div>
+                <h4 className={styles.title}>Parallel Sub-Agents</h4>
+                <p className={styles.subtext}>Distributed AI Workforces</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              For large or complex tasks, the main agent orchestrator can delegate discrete tasks to <strong>Sub-Agents</strong>. Each sub-agent runs in its own isolated browser context, executing specialized tasks concurrently (like generating tests or scanning for security) and aggregates the code changes back to the main thread.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>Sub-Agent Spawner</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/tools/index.ts" className={styles.fileLink}>apps/cli/src/tools/index.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>Agent Router</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/agent/loop.ts" className={styles.fileLink}>apps/cli/src/agent/loop.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>Parallel Thread Manager</span>
+                <span className={styles.pinkPulse}></span>
+              </div>
+              <div className={styles.threadsDashboard}>
+                <div className={styles.threadRow}>
+                  <span className={styles.threadName}>Parent Orchestrator</span>
+                  {subAgentState === 'idle' && <span className={`${styles.statusLabel} ${styles.statusIdle}`}>IDLE</span>}
+                  {subAgentState === 'spawning' && <span className={`${styles.statusLabel} ${styles.statusWorking}`}>DIVIDING TASK...</span>}
+                  {subAgentState === 'running' && <span className={`${styles.statusLabel} ${styles.statusWorking}`}>MONITORING THREADS...</span>}
+                  {subAgentState === 'done' && <span className={`${styles.statusLabel} ${styles.statusSuccess}`}>AGGRAGATING CHANGELIST</span>}
+                </div>
+
+                <div className={`${styles.threadRow} ${subAgentState === 'running' ? styles.threadRunning : ''}`}>
+                  <span className={styles.threadName}>🧵 Thread #1 (Code Reviewer)</span>
+                  {subAgentState === 'idle' && <span className={`${styles.statusLabel} ${styles.statusIdle}`}>OFFLINE</span>}
+                  {subAgentState === 'spawning' && <span className={`${styles.statusLabel} ${styles.statusSpawning}`}>SPAWNING BROWSER...</span>}
+                  {subAgentState === 'running' && <span className={`${styles.statusLabel} ${styles.statusActive}`}>RUNNING STATIC ANALYSIS</span>}
+                  {subAgentState === 'done' && <span className={`${styles.statusLabel} ${styles.statusSuccess}`}>COMPLETED (3 findings)</span>}
+                </div>
+
+                <div className={`${styles.threadRow} ${subAgentState === 'running' ? styles.threadRunning : ''}`}>
+                  <span className={styles.threadName}>🧵 Thread #2 (Unit Tester)</span>
+                  {subAgentState === 'idle' && <span className={`${styles.statusLabel} ${styles.statusIdle}`}>OFFLINE</span>}
+                  {subAgentState === 'spawning' && <span className={`${styles.statusLabel} ${styles.statusSpawning}`}>SPAWNING BROWSER...</span>}
+                  {subAgentState === 'running' && <span className={`${styles.statusLabel} ${styles.statusActive}`}>WRITING db.test.ts</span>}
+                  {subAgentState === 'done' && <span className={`${styles.statusLabel} ${styles.statusSuccess}`}>COMPLETED (4 tests written)</span>}
+                </div>
+              </div>
+            </div>
+          </>
+        );
+
+      case 'context':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>📄</span>
+              <div>
+                <h4 className={styles.title}>Context Engine</h4>
+                <p className={styles.subtext}>Convention Rules & Custom Skills</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              FreeCode is project-aware! On session startup, the Context Engine loads <strong>AGENTS.md</strong> (prioritized) or falls back to <strong>CLAUDE.md</strong>. These files contain rules (file directories, styles, testing frameworks). It also loads reusable files called **Skills** from `.claude/skills/`.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>Context Collector</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/context/collector.ts" className={styles.fileLink}>apps/cli/src/context/collector.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>File Tree generator</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/context/file-tree.ts" className={styles.fileLink}>apps/cli/src/context/file-tree.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>Startup Context Compilation Simulation</span>
+                <span className={styles.emeraldPulse}></span>
+              </div>
+              <div className={styles.contextCompiler}>
+                <div className={styles.compilerStep}>
+                  <span className={styles.stepIndicator}>PASS 1</span>
+                  <span>Scanning Workspace root for <strong>AGENTS.md</strong>... <span className={styles.greenText}>FOUND (Priority)</span></span>
+                </div>
+                <div className={styles.compilerStep}>
+                  <span className={styles.stepIndicator}>PASS 2</span>
+                  <span>Scanning <strong>.claude/skills/</strong> for custom behaviors... <span className={styles.greenText}>LOADED (2 skills)</span></span>
+                </div>
+                <div className={styles.compilerStep}>
+                  <span className={styles.stepIndicator}>PASS 3</span>
+                  <span>Constructing <strong>File Tree Map</strong> (excluding node_modules)... <span className={styles.greenText}>OK (18 nodes mapped)</span></span>
+                </div>
+                <div className={styles.compilerSystemPrompt}>
+                  <div className={styles.promptHeader}>COMPRESSED SYSTEM PROMPT:</div>
+                  <pre className={styles.promptCode}>
+{`You are FreeCode, an AI coding assistant.
+[CONVENTIONS LOADED FROM AGENTS.md]:
+- Use React 19 and Next.js App Router for apps/web.
+- Always write Vanilla CSS modules; avoid Tailwind.
+- Verify changes using "npm run build" before turn complete.
+
+[ACTIVE SKILLS IMPLEMENTED]:
+- CodeReviewer (v1.2) - static scan guidelines.
+- TestGenerator (v2.0) - mock db rules.`}
+                  </pre>
+                </div>
+              </div>
+            </div>
+          </>
+        );
+
+      case 'memory':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>💾</span>
+              <div>
+                <h4 className={styles.title}>Memory & Log Compaction</h4>
+                <p className={styles.subtext}>Handling Long-Running Sessions</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              When agent cycles run for dozens of turns, LLM context windows overflow. To prevent crashes, FreeCode accumulates session logs, and dynamically runs **Memory Compaction**. It condenses conversations into a compressed historical synopsis while maintaining working memory of the goals.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>Session History</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/agent/session.ts" className={styles.fileLink}>apps/cli/src/agent/session.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>History Buffer Status</span>
+                <span className={isCompacting ? styles.yellowPulse : styles.amberPulse}></span>
+              </div>
+              <div className={styles.memoryBarContainer}>
+                <div className={styles.memoryBarLabel}>
+                  <span>Context window capacity:</span>
+                  <span><strong>{memoryCapacity}%</strong> ({memoryCapacity * 100} / 10000 tokens)</span>
+                </div>
+                <div className={styles.memoryProgressBar}>
+                  <div 
+                    className={`${styles.memoryFill} ${isCompacting ? styles.memoryFillCompacting : ''} ${memoryCapacity > 80 ? styles.memoryHigh : ''}`}
+                    style={{ width: `${memoryCapacity}%` }}
+                  />
+                </div>
+                {isCompacting && (
+                  <div className={styles.compactAlert}>
+                    ⚠️ BUFFER FULL! RUNNING BACKGROUND SUMMARIZATION DEAMON...
+                  </div>
+                )}
+                {!isCompacting && memoryCapacity > 80 && (
+                  <div className={styles.warningAlert}>
+                    🚨 CRITICAL LIMIT NEARING! PREPARING FOR COMPACTION CYCLE...
+                  </div>
+                )}
+                {!isCompacting && memoryCapacity <= 35 && (
+                  <div className={styles.successAlert}>
+                    ✅ HISTORY COMPRESSED! Synced context window cleared.
+                  </div>
+                )}
+              </div>
+            </div>
+          </>
+        );
+
+      case 'hooks':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>⚡</span>
+              <div>
+                <h4 className={styles.title}>Hooks Safety Middleware</h4>
+                <p className={styles.subtext}>Pre & Post Execution Interceptors</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              To protect the user&apos;s computer, FreeCode pipes every tool call through a strict **Hooks Middleware Pipeline**. Pre-hooks inspect the command and can completely block malicious queries (like destructive bash scripts). Post-hooks capture results for real-time observability logs.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>Middleware Loop</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/agent/loop.ts" className={styles.fileLink}>apps/cli/src/agent/loop.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>Safety Middleware Simulator Playground</span>
+                <span className={styles.emeraldPulse}></span>
+              </div>
+              <div className={styles.hooksSandbox}>
+                <div className={styles.hooksToggle}>
+                  <button 
+                    className={`${styles.toggleBtn} ${activeHookSafety === 'safe' ? styles.toggleActiveSafe : ''}`}
+                    onClick={() => setActiveHookSafety('safe')}
+                  >
+                    Test Safe Command
+                  </button>
+                  <button 
+                    className={`${styles.toggleBtn} ${activeHookSafety === 'unsafe' ? styles.toggleActiveUnsafe : ''}`}
+                    onClick={() => setActiveHookSafety('unsafe')}
+                  >
+                    Test Dangerous Command
+                  </button>
+                </div>
+
+                <div className={styles.sandboxOutput}>
+                  {activeHookSafety === 'safe' ? (
+                    <div className={styles.hookConsoleLog}>
+                      <div className={styles.hookLogLine}><span className={styles.hookInfo}>[INFO]</span> Intercepting tool request: <code>read_file(&quot;src/db.ts&quot;)</code></div>
+                      <div className={styles.hookLogLine}><span className={styles.hookPre}>[PRE-EXEC]</span> Scanning parameters... Safe action verified.</div>
+                      <div className={styles.hookLogLine}><span className={styles.hookSuccess}>[STATUS]</span> Executing tool read_file...</div>
+                      <div className={styles.hookLogLine}><span className={styles.hookPost}>[POST-EXEC]</span> Action logged. Returning output chunk (142 bytes) to AI loop.</div>
+                    </div>
+                  ) : (
+                    <div className={styles.hookConsoleLog}>
+                      <div className={styles.hookLogLine}><span className={styles.hookInfo}>[INFO]</span> Intercepting tool request: <code>run_bash(&quot;rm -rf /&quot;)</code></div>
+                      <div className={styles.hookLogLine}><span className={styles.hookPre}>[PRE-EXEC]</span> Scanning parameters... <span className={styles.errorText}>DANGEROUS PATTERN MATCHED!</span></div>
+                      <div className={styles.hookLogBlockAlert}>
+                        🛑 ERROR: COMMAND BLOCKED!
+                        <div style={{ fontSize: '11px', marginTop: '4px', fontWeight: 'normal', color: 'rgba(255, 255, 255, 0.7)' }}>
+                          The PreExecute Hooks daemon has terminated the execution. Reason: Command contains prohibited system alterations.
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </>
+        );
+
+      case 'tools':
+        return (
+          <>
+            <div className={styles.header}>
+              <span className={styles.icon}>🛠️</span>
+              <div>
+                <h4 className={styles.title}>The Tools Execution Suite</h4>
+                <p className={styles.subtext}>CLI Capabilities Catalog</p>
+              </div>
+            </div>
+
+            <p className={styles.description}>
+              The AI provider cannot interact with the operating system itself. It must select and invoke specialized **Tools** exposed by the CLI backend. These modules implement strict validation schemas so the AI knows exactly what properties are required.
+            </p>
+
+            <div className={styles.filesBox}>
+              <h5 className={styles.filesTitle}>🔑 Key Codebase Implementations:</h5>
+              <ul className={styles.filesList}>
+                <li>
+                  <span className={styles.fileBadge}>Tools Registry</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/tools/index.ts" className={styles.fileLink}>apps/cli/src/tools/index.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>Bash Executor</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/tools/bash.ts" className={styles.fileLink}>apps/cli/src/tools/bash.ts</a>
+                </li>
+                <li>
+                  <span className={styles.fileBadge}>File Editor</span>
+                  <a href="file:///home/ayan-de/Projects/freecode/apps/cli/src/tools/edit.ts" className={styles.fileLink}>apps/cli/src/tools/edit.ts</a>
+                </li>
+              </ul>
+            </div>
+
+            <div className={styles.simContainer}>
+              <div className={styles.simHeader}>
+                <span>Standard Tool JSON-Schema Contract</span>
+                <span className={styles.purplePulse}></span>
+              </div>
+              <div className={styles.simConsole}>
+                <pre className={styles.jsonCode}>
+{`// apps/cli/src/tools/write.ts - Tool schema exposed to AI
+{
+  "id": "write_file",
+  "description": "Create a new file or overwrite an existing file",
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "filePath": {
+        "type": "string",
+        "description": "Absolute destination filepath inside workspace"
+      },
+      "content": {
+        "type": "string",
+        "description": "Raw file code content payload"
+      }
+    },
+    "required": ["filePath", "content"]
+  }
+}`}
+                </pre>
+              </div>
+            </div>
+          </>
+        );
+
+      default:
+        return (
+          <div className={styles.emptyState}>
+            <span className={styles.emptyIcon}>🔍</span>
+            <h4>Interactive Blueprints Explorer</h4>
+            <p>Click on any component card inside the system architecture diagram to explore details, hyperlinks to key source files, and live execution simulations.</p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      {selectedNode && onClose && (
+        <button
+          onClick={onClose}
+          className={styles.closeButton}
+          aria-label="Close details"
+          title="Close details"
+        >
+          ✕
+        </button>
+      )}
+      {renderContent()}
+    </div>
+  );
+}
diff --git a/apps/web/app/internal/components/presentation/TabNavigation.module.css b/apps/web/app/internal/components/presentation/TabNavigation.module.css
new file mode 100644
index 00000000..3ec64ac6
--- /dev/null
+++ b/apps/web/app/internal/components/presentation/TabNavigation.module.css
@@ -0,0 +1,57 @@
+.nav {
+  display: flex;
+  gap: 8px;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.tab:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.active {
+  background: rgba(99, 102, 241, 0.2);
+  border: 1px solid rgba(99, 102, 241, 0.4);
+}
+
+.active:hover {
+  background: rgba(99, 102, 241, 0.3);
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.description {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 768px) {
+  .nav {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .tab {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/presentation/TabNavigation.tsx b/apps/web/app/internal/components/presentation/TabNavigation.tsx
new file mode 100644
index 00000000..95a9517f
--- /dev/null
+++ b/apps/web/app/internal/components/presentation/TabNavigation.tsx
@@ -0,0 +1,32 @@
+import styles from './TabNavigation.module.css';
+
+interface Tab {
+  id: string;
+  label: string;
+  description: string;
+}
+
+interface TabNavigationProps {
+  tabs: Tab[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
+
+export function TabNavigation({ tabs, activeTab, onTabChange }: TabNavigationProps) {
+  return (
+    <nav className={styles.nav} role="tablist">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          role="tab"
+          aria-selected={activeTab === tab.id}
+          className={`${styles.tab} ${activeTab === tab.id ? styles.active : ''}`}
+          onClick={() => onTabChange(tab.id)}
+        >
+          <span className={styles.label}>{tab.label}</span>
+          <span className={styles.description}>{tab.description}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/components/presentation/index.ts b/apps/web/app/internal/components/presentation/index.ts
new file mode 100644
index 00000000..1c3af765
--- /dev/null
+++ b/apps/web/app/internal/components/presentation/index.ts
@@ -0,0 +1,2 @@
+export { TabNavigation } from './TabNavigation';
+export { ArchitectureExplorer } from './ArchitectureExplorer';
\ No newline at end of file
diff --git a/apps/web/app/internal/hooks/index.ts b/apps/web/app/internal/hooks/index.ts
new file mode 100644
index 00000000..62fbf700
--- /dev/null
+++ b/apps/web/app/internal/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useArchitectureTabs, type TabId } from './useArchitectureTabs';
+export { useDiagramAnimation } from './useDiagramAnimation';
\ No newline at end of file
diff --git a/apps/web/app/internal/hooks/useArchitectureTabs.ts b/apps/web/app/internal/hooks/useArchitectureTabs.ts
new file mode 100644
index 00000000..c6fa6c15
--- /dev/null
+++ b/apps/web/app/internal/hooks/useArchitectureTabs.ts
@@ -0,0 +1,32 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+export type TabId = 'overview' | 'cli' | 'ipc' | 'flow';
+
+interface Tab {
+  id: TabId;
+  label: string;
+  description: string;
+}
+
+const TABS: Tab[] = [
+  { id: 'overview', label: 'Overview', description: 'High-level system architecture' },
+  { id: 'cli', label: 'CLI Backend', description: 'All intelligence lives here' },
+  { id: 'ipc', label: 'IPC Protocol', description: 'JSON-RPC communication' },
+  { id: 'flow', label: 'Data Flow', description: 'Two-phase context collection' },
+];
+
+export function useArchitectureTabs() {
+  const [activeTab, setActiveTab] = useState<TabId>('overview');
+
+  const handleTabChange = useCallback((tabId: TabId) => {
+    setActiveTab(tabId);
+  }, []);
+
+  return {
+    tabs: TABS,
+    activeTab,
+    onTabChange: handleTabChange,
+  };
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/hooks/useDiagramAnimation.ts b/apps/web/app/internal/hooks/useDiagramAnimation.ts
new file mode 100644
index 00000000..9befc9d7
--- /dev/null
+++ b/apps/web/app/internal/hooks/useDiagramAnimation.ts
@@ -0,0 +1,59 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface AnimationConfig {
+  autoPlay?: boolean;
+  loop?: boolean;
+  duration?: number;
+  delay?: number;
+}
+
+export function useDiagramAnimation<T>(
+  sequence: T[],
+  config: AnimationConfig = {}
+) {
+  const { autoPlay = true, loop = true, duration = 500, delay = 100 } = config;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+
+  const play = useCallback(() => setIsPlaying(true), []);
+  const pause = useCallback(() => setIsPlaying(false), []);
+  const reset = useCallback(() => setCurrentIndex(0), []);
+  const next = useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % sequence.length);
+  }, [sequence.length]);
+  const prev = useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + sequence.length) % sequence.length);
+  }, [sequence.length]);
+
+  useEffect(() => {
+    if (!isPlaying || sequence.length === 0) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => {
+        const nextIndex = prev + 1;
+        if (nextIndex >= sequence.length) {
+          if (loop) return 0;
+          setIsPlaying(false);
+          return prev;
+        }
+        return nextIndex;
+      });
+    }, duration + delay);
+
+    return () => clearInterval(interval);
+  }, [isPlaying, sequence.length, duration, delay, loop]);
+
+  return {
+    currentItem: sequence[currentIndex],
+    currentIndex,
+    totalItems: sequence.length,
+    isPlaying,
+    play,
+    pause,
+    reset,
+    next,
+    prev,
+  };
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/page.module.css b/apps/web/app/internal/page.module.css
new file mode 100644
index 00000000..e6796680
--- /dev/null
+++ b/apps/web/app/internal/page.module.css
@@ -0,0 +1,85 @@
+.page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
+  color: rgba(255, 255, 255, 0.9);
+  padding: 48px 24px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 48px;
+}
+
+.title {
+  font-size: 48px;
+  font-weight: 800;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(168, 85, 247, 1) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 16px;
+  letter-spacing: -1px;
+}
+
+.subtitle {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.6);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.navigation {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 32px;
+}
+
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer {
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+}
+
+.footerContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.footerLabel {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.footerDot {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.footerVersion {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.4);
+  font-family: monospace;
+}
+
+@media (max-width: 768px) {
+  .page {
+    padding: 32px 16px;
+  }
+
+  .title {
+    font-size: 32px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+  }
+}
\ No newline at end of file
diff --git a/apps/web/app/internal/page.tsx b/apps/web/app/internal/page.tsx
new file mode 100644
index 00000000..27bd7bd2
--- /dev/null
+++ b/apps/web/app/internal/page.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { TabNavigation } from './components/presentation/TabNavigation';
+import {
+  OverviewContainer,
+  CLIContainer,
+  IPCContainer,
+  FlowContainer,
+} from './components/containers';
+import { useArchitectureTabs, type TabId } from './hooks';
+import styles from './page.module.css';
+
+export default function InternalPage() {
+  const { tabs, activeTab, onTabChange } = useArchitectureTabs();
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'overview':
+        return <OverviewContainer />;
+      case 'cli':
+        return <CLIContainer />;
+      case 'ipc':
+        return <IPCContainer />;
+      case 'flow':
+        return <FlowContainer />;
+      default:
+        return <OverviewContainer />;
+    }
+  };
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <h1 className={styles.title}>Internal Architecture</h1>
+        <p className={styles.subtitle}>
+          Explore how FreeCode&apos;s thin-client architecture enables scalable AI-assisted coding
+        </p>
+      </header>
+
+      <div className={styles.navigation}>
+        <TabNavigation
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={(id) => onTabChange(id as TabId)}
+        />
+      </div>
+
+      <main className={styles.content}>
+        {renderContent()}
+      </main>
+
+      <footer className={styles.footer}>
+        <div className={styles.footerContent}>
+          <span className={styles.footerLabel}>FreeCode Architecture</span>
+          <span className={styles.footerDot}>·</span>
+          <span className={styles.footerVersion}>CLI-driven thin clients</span>
+        </div>
+      </footer>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 593833ba..7df125b4 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -41,18 +41,9 @@ export default function Home() {
         <div className={styles.ctas}>
           <a
             className={styles.primary}
-            href="https://vercel.com/new/clone?demo-description=Learn+to+implement+a+monorepo+with+a+two+Next.js+sites+that+has+installed+three+local+packages.&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4K8ZISWAzJ8X1504ca0zmC%2F0b21a1c6246add355e55816278ef54bc%2FBasic.png&demo-title=Monorepo+with+Turborepo&demo-url=https%3A%2F%2Fexamples-basic-web.vercel.sh%2F&from=templates&project-name=Monorepo+with+Turborepo&repository-name=monorepo-turborepo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fturborepo%2Ftree%2Fmain%2Fexamples%2Fbasic&root-directory=apps%2Fdocs&skippable-integrations=1&teamSlug=vercel&utm_source=create-turbo"
-            target="_blank"
-            rel="noopener noreferrer"
+            href="/internal"
           >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
+            View Architecture
           </a>
           <a
             href="https://turborepo.dev/docs?utm_source"
diff --git a/docs/superpowers/plans/2026-05-10-freecode-mvp.md b/docs/superpowers/plans/2026-05-10-freecode-mvp.md
new file mode 100644
index 00000000..5ab60206
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-10-freecode-mvp.md
@@ -0,0 +1,1355 @@
+# FreeCode MVP: Scalable Architecture
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build MVP with architecture that can scale to multiple providers (ChatGPT, Claude, Gemini), multiple parsers, and easy feature additions.
+
+**Architecture:** Interface-based design with clear boundaries — Browser Layer (provider-agnostic), Context Layer (configurable collectors), Parser Layer (strategy pattern), Command Layer (composable).
+
+**Tech Stack:** TypeScript, Playwright, pi-tui, Node.js
+
+---
+
+## Scalable File Structure
+
+```
+apps/tui/src/
+├── index.ts                      # Entry point (existing)
+├── commands/
+│   ├── index.ts                  # Command registry (existing)
+│   ├── built-in.ts               # Built-in commands (existing)
+│   └── freecode/
+│       ├── index.ts              # /freecode orchestrator
+│       ├── provider-mgr.ts       # Provider selection & management
+│       ├── executor.ts           # Execute prompt cycle
+│       └── file-applier.ts       # Apply parsed file changes
+├── lib/
+│   ├── browser/
+│   │   ├── types.ts              # Browser interfaces
+│   │   ├── controller.ts         # CDP connection manager
+│   │   └── providers/
+│   │       ├── index.ts          # Provider registry
+│   │       ├── chatgpt.ts        # ChatGPT adapter
+│   │       └── types.ts          # Provider interface
+│   ├── context/
+│   │   ├── types.ts              # Context interfaces
+│   │   ├── collector.ts          # File tree collector
+│   │   └── strategies/
+│   │       ├── index.ts          # Strategy registry
+│   │       └── file-tree.ts      # File tree strategy
+│   ├── parser/
+│   │   ├── types.ts              # Parser interfaces
+│   │   ├── registry.ts           # Parser registry (strategy pattern)
+│   │   ├── extractors/
+│   │   │   ├── index.ts          # Extractor registry
+│   │   │   ├── markdown.ts       # Markdown file block extractor
+│   │   │   ├── json.ts           # JSON extractor
+│   │   │   └── structured.ts     # Structured output extractor
+│   │   └── index.ts              # Main parser orchestrator
+│   └── utils/
+│       ├── result.ts             # Result/Either type for error handling
+│       └── logger.ts             # Structured logging
+└── models.ts                     # Model definitions (existing)
+```
+
+---
+
+## Scalability Principles Applied
+
+| Principle | Implementation |
+|-----------|----------------|
+| **Interface Segregation** | `BrowserProvider`, `ParserStrategy`, `ContextStrategy` — small focused interfaces |
+| **Dependency Inversion** | High-level modules (executor) depend on abstractions, not concretions |
+| **Single Responsibility** | Each file does one thing — controller handles CDP, provider handles DOM, parser handles parsing |
+| **Strategy Pattern** | Parser registry lets you chain multiple parsing strategies |
+| **Factory Pattern** | Provider registry creates providers without coupling to concrete classes |
+| **Result Type** | No exceptions thrown across module boundaries — explicit `Result<T, E>` types |
+
+---
+
+## Task 1: Add Playwright Dependency
+
+**Files:**
+- Modify: `apps/tui/package.json`
+
+- [ ] **Step 1: Add Playwright to dependencies**
+
+Modify `apps/tui/package.json`:
+
+```json
+"dependencies": {
+  "@earendil-works/pi-tui": "^0.74.0",
+  "chalk": "^5.5.0",
+  "playwright": "^1.42.0"
+}
+```
+
+- [ ] **Step 2: Install dependencies**
+
+Run: `cd apps/tui && pnpm install`
+
+- [ ] **Step 3: Install Chromium browser**
+
+Run: `cd apps/tui && npx playwright install chromium`
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add playwright dependency"
+```
+
+---
+
+## Task 2: Utility Types (Result, Logger)
+
+**Files:**
+- Create: `apps/tui/src/lib/utils/result.ts`
+- Create: `apps/tui/src/lib/utils/logger.ts`
+
+- [ ] **Step 1: Create Result type**
+
+```typescript
+// apps/tui/src/lib/utils/result.ts
+export type Result<T, E = string> =
+  | { success: true; value: T }
+  | { success: false; error: E };
+
+export function ok<T>(value: T): Result<T, never> {
+  return { success: true, value };
+}
+
+export function err<E>(error: E): Result<never, E> {
+  return { success: false, error };
+}
+
+export function isOk<T, E>(result: Result<T, E>): result is { success: true; value: T } {
+  return result.success === true;
+}
+
+export function isErr<T, E>(result: Result<T, E>): result is { success: false; error: E } {
+  return result.success === false;
+}
+
+export function map<T, U, E>(
+  result: Result<T, E>,
+  fn: (value: T) => U
+): Result<U, E> {
+  if (isOk(result)) {
+    return ok(fn(result.value));
+  }
+  return result as Result<never, E>;
+}
+
+export function flatMap<T, U, E>(
+  result: Result<T, E>,
+  fn: (value: T) => Result<U, E>
+): Result<U, E> {
+  if (isOk(result)) {
+    return fn(result.value);
+  }
+  return result as Result<never, E>;
+}
+```
+
+- [ ] **Step 2: Create Logger utility**
+
+```typescript
+// apps/tui/src/lib/utils/logger.ts
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export interface Logger {
+  debug(message: string, meta?: Record<string, unknown>): void;
+  info(message: string, meta?: Record<string, unknown>): void;
+  warn(message: string, meta?: Record<string, unknown>): void;
+  error(message: string, meta?: Record<string, unknown>): void;
+}
+
+export class ConsoleLogger implements Logger {
+  private prefix: string;
+
+  constructor(prefix = '') {
+    this.prefix = prefix ? `[${prefix}] ` : '';
+  }
+
+  private log(level: LogLevel, message: string, meta?: Record<string, unknown>): void {
+    const metaStr = meta ? ` ${JSON.stringify(meta)}` : '';
+    console.log(`${this.prefix}${level.toUpperCase()}: ${message}${metaStr}`);
+  }
+
+  debug(message: string, meta?: Record<string, unknown>): void {
+    this.log('debug', message, meta);
+  }
+
+  info(message: string, meta?: Record<string, unknown>): void {
+    this.log('info', message, meta);
+  }
+
+  warn(message: string, meta?: Record<string, unknown>): void {
+    this.log('warn', message, meta);
+  }
+
+  error(message: string, meta?: Record<string, unknown>): void {
+    this.log('error', message, meta);
+  }
+}
+
+export const logger = new ConsoleLogger('freecode');
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add Result type and Logger utility"
+```
+
+---
+
+## Task 3: Browser Layer (Scalable Provider System)
+
+**Files:**
+- Create: `apps/tui/src/lib/browser/types.ts`
+- Create: `apps/tui/src/lib/browser/providers/types.ts`
+- Create: `apps/tui/src/lib/browser/providers/chatgpt.ts`
+- Create: `apps/tui/src/lib/browser/providers/index.ts`
+- Create: `apps/tui/src/lib/browser/controller.ts`
+
+- [ ] **Step 1: Create browser types (interfaces)**
+
+```typescript
+// apps/tui/src/lib/browser/types.ts
+import type { Page, Browser } from 'playwright';
+
+export interface BrowserController {
+  connect(): Promise<void>;
+  disconnect(): Promise<void>;
+  isConnected(): boolean;
+  getPage(): Page | null;
+}
+
+export interface BrowserConfig {
+  cdpUrl?: string;
+  headless?: boolean;
+}
+```
+
+- [ ] **Step 2: Create provider interface**
+
+```typescript
+// apps/tui/src/lib/browser/providers/types.ts
+export interface PageAdapter {
+  name: string;
+  getInputLocator(page: Page): any;
+  getSubmitButton(page: Page): any;
+  getResponseLocator(page: Page): any;
+  isStreaming(page: Page): Promise<boolean>;
+  waitForLoadState(page: Page): Promise<void>;
+}
+
+export interface ProviderConfig {
+  url: string;
+  waitForNetworkIdle?: boolean;
+}
+```
+
+- [ ] **Step 3: Create ChatGPT provider adapter**
+
+```typescript
+// apps/tui/src/lib/browser/providers/chatgpt.ts
+import type { Page, Locator } from 'playwright';
+import type { PageAdapter } from './types.js';
+
+export class ChatGPTAdapter implements PageAdapter {
+  name = 'chatgpt';
+
+  getInputLocator(page: Page): Locator {
+    return page.locator('textarea');
+  }
+
+  getSubmitButton(page: Page): Locator {
+    return page.locator('button[data-testid="send-button"]');
+  }
+
+  getResponseLocator(page: Page): Locator {
+    return page.locator('[data-testid="turn"]').last();
+  }
+
+  async isStreaming(page: Page): Promise<boolean> {
+    const stopButton = page.locator('button[aria-label="Stop generating"]');
+    return stopButton.isVisible().catch(() => false);
+  }
+
+  async waitForLoadState(page: Page): Promise<void> {
+    await page.waitForLoadState('networkidle');
+  }
+}
+```
+
+- [ ] **Step 4: Create provider registry**
+
+```typescript
+// apps/tui/src/lib/browser/providers/index.ts
+import type { PageAdapter } from './types.js';
+import { ChatGPTAdapter } from './chatgpt.js';
+
+export interface ProviderDefinition {
+  id: string;
+  name: string;
+  adapter: PageAdapter;
+  config: {
+    url: string;
+  };
+}
+
+const providers: Map<string, ProviderDefinition> = new Map();
+
+export function registerProvider(definition: ProviderDefinition): void {
+  providers.set(definition.id, definition);
+}
+
+export function getProvider(id: string): ProviderDefinition | undefined {
+  return providers.get(id);
+}
+
+export function listProviders(): ProviderDefinition[] {
+  return Array.from(providers.values());
+}
+
+export function createDefaultProviders(): void {
+  registerProvider({
+    id: 'chatgpt',
+    name: 'ChatGPT',
+    adapter: new ChatGPTAdapter(),
+    config: {
+      url: 'https://chatgpt.com',
+    },
+  });
+}
+```
+
+- [ ] **Step 5: Create browser controller**
+
+```typescript
+// apps/tui/src/lib/browser/controller.ts
+import { chromium, type Browser, type Page } from 'playwright';
+import type { BrowserController, BrowserConfig } from './types.js';
+import type { PageAdapter } from './providers/types.js';
+import { logger } from '../utils/logger.js';
+
+export class PlaywrightBrowserController implements BrowserController {
+  private browser: Browser | null = null;
+  private page: Page | null = null;
+  private adapter: PageAdapter | null = null;
+  private config: Required<BrowserConfig>;
+
+  constructor(config: BrowserConfig = {}) {
+    this.config = {
+      cdpUrl: config.cdpUrl || process.env.CDP_URL || 'http://localhost:9222',
+      headless: config.headless ?? false,
+    };
+  }
+
+  setAdapter(adapter: PageAdapter): void {
+    this.adapter = adapter;
+  }
+
+  async connect(): Promise<void> {
+    try {
+      logger.info('Connecting to Chrome via CDP', { url: this.config.cdpUrl });
+      this.browser = await chromium.connectOverCDP(this.config.cdpUrl);
+      const context = this.browser.contexts()[0];
+      this.page = context.pages()[0] || await context.newPage();
+      logger.info('Browser connected successfully');
+    } catch (error) {
+      logger.error('Failed to connect to Chrome', { error: String(error) });
+      throw new Error(
+        `Failed to connect to Chrome at ${this.config.cdpUrl}. ` +
+        'Ensure Chrome is running with: chrome --remote-debugging-port=9222'
+      );
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    if (this.browser) {
+      logger.info('Disconnecting browser');
+      await this.browser.close();
+      this.browser = null;
+      this.page = null;
+    }
+  }
+
+  isConnected(): boolean {
+    return this.browser !== null && this.page !== null;
+  }
+
+  getPage(): Page | null {
+    return this.page;
+  }
+
+  async navigate(provider: PageAdapter): Promise<void> {
+    if (!this.page) throw new Error('Not connected');
+    await this.page.goto(provider.config.url);
+    await provider.waitForLoadState(this.page);
+    this.adapter = provider;
+  }
+
+  async sendPrompt(prompt: string): Promise<void> {
+    if (!this.page || !this.adapter) {
+      throw new Error('Not connected or adapter not set');
+    }
+    const input = this.adapter.getInputLocator(this.page);
+    await input.fill(prompt);
+    const submitButton = this.adapter.getSubmitButton(this.page);
+    await submitButton.click();
+  }
+
+  async waitForResponse(): Promise<string> {
+    if (!this.page || !this.adapter) {
+      throw new Error('Not connected or adapter not set');
+    }
+
+    logger.debug('Waiting for streaming to complete');
+    while (await this.adapter.isStreaming(this.page)) {
+      await this.page.waitForTimeout(500);
+    }
+
+    await this.page.waitForTimeout(1000);
+
+    const responseLocator = this.adapter.getResponseLocator(this.page);
+    return responseLocator.innerText();
+  }
+
+  async executePrompt(prompt: string): Promise<string> {
+    await this.sendPrompt(prompt);
+    return this.waitForResponse();
+  }
+}
+```
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add scalable browser layer with provider system"
+```
+
+---
+
+## Task 4: Context Layer (Strategy Pattern)
+
+**Files:**
+- Create: `apps/tui/src/lib/context/types.ts`
+- Create: `apps/tui/src/lib/context/collector.ts`
+- Create: `apps/tui/src/lib/context/strategies/file-tree.ts`
+- Create: `apps/tui/src/lib/context/strategies/index.ts`
+
+- [ ] **Step 1: Create context types**
+
+```typescript
+// apps/tui/src/lib/context/types.ts
+export interface ProjectContext {
+  projectPath: string;
+  name: string;
+  tree: string;
+  files: Record<string, string>;
+  metadata: ContextMetadata;
+}
+
+export interface ContextMetadata {
+  collectedAt: number;
+  fileCount: number;
+  totalSize: number;
+}
+
+export interface ContextStrategy {
+  name: string;
+  collect(projectPath: string, options?: ContextOptions): Promise<ProjectContext>;
+}
+
+export interface ContextOptions {
+  maxDepth?: number;
+  ignorePatterns?: string[];
+  includePatterns?: string[];
+}
+```
+
+- [ ] **Step 2: Create base collector with file tree strategy**
+
+```typescript
+// apps/tui/src/lib/context/strategies/file-tree.ts
+import * as fs from 'fs';
+import * as path from 'path';
+import type { ContextStrategy, ContextOptions, ProjectContext } from '../types.js';
+import { logger } from '../../utils/logger.js';
+
+const DEFAULT_IGNORE = [
+  'node_modules', '.git', 'dist', 'build', '.next', '.turbo',
+  '.vscode', '.idea', '*.lock', '*.log', '.cache', '.temp',
+];
+
+export class FileTreeStrategy implements ContextStrategy {
+  name = 'file-tree';
+
+  async collect(projectPath: string, options: ContextOptions = {}): Promise<ProjectContext> {
+    const {
+      maxDepth = 3,
+      ignorePatterns = DEFAULT_IGNORE,
+    } = options;
+
+    logger.info('Collecting project context', { projectPath, maxDepth });
+
+    const tree = this.generateTree(projectPath, ignorePatterns, maxDepth);
+    const files = this.collectFiles(projectPath, ignorePatterns, maxDepth);
+
+    const metadata: ContextMetadata = {
+      collectedAt: Date.now(),
+      fileCount: Object.keys(files).length,
+      totalSize: Object.values(files).reduce((acc, content) => acc + content.length, 0),
+    };
+
+    logger.info('Context collected', { fileCount: metadata.fileCount });
+
+    return {
+      projectPath,
+      name: path.basename(projectPath),
+      tree,
+      files,
+      metadata,
+    };
+  }
+
+  private generateTree(
+    dirPath: string,
+    patterns: string[],
+    maxDepth: number,
+    currentDepth = 0
+  ): string {
+    if (currentDepth > maxDepth) return '';
+
+    let tree = '';
+    try {
+      const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        const fullPath = path.join(dirPath, entry.name);
+        if (this.shouldIgnore(fullPath, patterns)) continue;
+
+        const indent = currentDepth > 0 ? '  '.repeat(currentDepth) : '';
+        const icon = entry.isDirectory() ? '📁 ' : '📄 ';
+        tree += `${indent}${icon}${entry.name}${entry.isDirectory() ? '/' : ''}\n`;
+
+        if (entry.isDirectory()) {
+          tree += this.generateTree(fullPath, patterns, maxDepth, currentDepth + 1);
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+
+    return tree;
+  }
+
+  private shouldIgnore(filePath: string, patterns: string[]): boolean {
+    const basename = path.basename(filePath);
+    return patterns.some((pattern) => {
+      if (pattern.startsWith('*')) return basename.endsWith(pattern.slice(1));
+      return basename === pattern;
+    });
+  }
+
+  private collectFiles(
+    dirPath: string,
+    patterns: string[],
+    maxDepth: number,
+    currentDepth = 0
+  ): Record<string, string> {
+    const files: Record<string, string> = {};
+
+    if (currentDepth > maxDepth) return files;
+
+    try {
+      const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        const fullPath = path.join(dirPath, entry.name);
+        if (this.shouldIgnore(fullPath, patterns)) continue;
+
+        if (entry.isFile()) {
+          const relativePath = path.relative(process.cwd(), fullPath);
+          files[relativePath] = this.readFile(fullPath);
+        } else if (entry.isDirectory()) {
+          const childFiles = this.collectFiles(fullPath, patterns, maxDepth, currentDepth + 1);
+          Object.assign(files, childFiles);
+        }
+      }
+    } catch {
+      // Skip unreadable directories
+    }
+
+    return files;
+  }
+
+  private readFile(filePath: string): string {
+    try {
+      return fs.readFileSync(filePath, 'utf-8');
+    } catch {
+      return `// Error reading: ${filePath}`;
+    }
+  }
+}
+```
+
+- [ ] **Step 3: Create strategy registry and main collector**
+
+```typescript
+// apps/tui/src/lib/context/strategies/index.ts
+export * from './file-tree.js';
+
+import type { ContextStrategy } from '../types.js';
+import { FileTreeStrategy } from './file-tree.js';
+
+const strategies: Map<string, ContextStrategy> = new Map();
+
+export function registerStrategy(strategy: ContextStrategy): void {
+  strategies.set(strategy.name, strategy);
+}
+
+export function getStrategy(name: string): ContextStrategy | undefined {
+  return strategies.get(name);
+}
+
+export function createDefaultStrategies(): void {
+  registerStrategy(new FileTreeStrategy());
+}
+```
+
+```typescript
+// apps/tui/src/lib/context/collector.ts
+import type { ProjectContext, ContextOptions } from './types.js';
+import { getStrategy } from './strategies/index.js';
+import { logger } from '../utils/logger.js';
+import { ok, err, type Result } from '../utils/result.js';
+
+export async function collectContext(
+  projectPath: string,
+  strategyName = 'file-tree',
+  options?: ContextOptions
+): Promise<Result<ProjectContext, string>> {
+  try {
+    const strategy = getStrategy(strategyName);
+    if (!strategy) {
+      return err(`Unknown context strategy: ${strategyName}`);
+    }
+
+    const context = await strategy.collect(projectPath, options);
+    return ok(context);
+  } catch (error) {
+    logger.error('Context collection failed', { error: String(error) });
+    return err(`Failed to collect context: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add context layer with strategy pattern"
+```
+
+---
+
+## Task 5: Parser Layer (Strategy Chain)
+
+**Files:**
+- Create: `apps/tui/src/lib/parser/types.ts`
+- Create: `apps/tui/src/lib/parser/extractors/markdown.ts`
+- Create: `apps/tui/src/lib/parser/extractors/json.ts`
+- Create: `apps/tui/src/lib/parser/extractors/structured.ts`
+- Create: `apps/tui/src/lib/parser/extractors/index.ts`
+- Create: `apps/tui/src/lib/parser/registry.ts`
+- Create: `apps/tui/src/lib/parser/index.ts`
+
+- [ ] **Step 1: Create parser types**
+
+```typescript
+// apps/tui/src/lib/parser/types.ts
+export type FileAction = 'create' | 'write' | 'delete';
+
+export interface FileChange {
+  path: string;
+  action: FileAction;
+  content?: string;
+}
+
+export interface ParsedResponse {
+  summary: string;
+  changes: FileChange[];
+  raw: string;
+  parserUsed: string;
+}
+
+export interface ParserStrategy {
+  name: string;
+  parse(raw: string): ParserResult;
+}
+
+export interface ParserResult {
+  success: boolean;
+  response?: ParsedResponse;
+  error?: string;
+}
+```
+
+- [ ] **Step 2: Create markdown extractor**
+
+```typescript
+// apps/tui/src/lib/parser/extractors/markdown.ts
+import type { ParserStrategy, ParserResult, ParsedResponse, FileChange } from '../types.js';
+
+export class MarkdownExtractor implements ParserStrategy {
+  name = 'markdown';
+
+  parse(raw: string): ParserResult {
+    const changes: FileChange[] = [];
+    const fileBlockRegex = /FILE:\s*(.+?)\n```[\w]*\n([\s\S]*?)```/g;
+
+    let match;
+    while ((match = fileBlockRegex.exec(raw)) !== null) {
+      changes.push({
+        path: match[1].trim(),
+        action: 'create',
+        content: match[2].trim(),
+      });
+    }
+
+    if (changes.length === 0) {
+      return { success: false, error: 'No file blocks found' };
+    }
+
+    const summary = this.extractSummary(raw);
+
+    return {
+      success: true,
+      response: {
+        summary,
+        changes,
+        raw,
+        parserUsed: this.name,
+      },
+    };
+  }
+
+  private extractSummary(raw: string): string {
+    const lines = raw.split('\n');
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed && !trimmed.startsWith('```') && !trimmed.startsWith('FILE:')) {
+        const cleaned = trimmed.replace(/^#+\s*/, '').replace(/\*\*/g, '');
+        if (cleaned.length > 10) {
+          return cleaned.slice(0, 200);
+        }
+      }
+    }
+    return 'Generated file structure';
+  }
+}
+```
+
+- [ ] **Step 3: Create JSON extractor**
+
+```typescript
+// apps/tui/src/lib/parser/extractors/json.ts
+import type { ParserStrategy, ParserResult, ParsedResponse, FileChange } from '../types.js';
+
+export class JsonExtractor implements ParserStrategy {
+  name = 'json';
+
+  parse(raw: string): ParserResult {
+    try {
+      const match = raw.match(/\{[\s\S]*\}/);
+      if (!match) {
+        return { success: false, error: 'No JSON found' };
+      }
+
+      const parsed = JSON.parse(match[0]);
+      const changes: FileChange[] = (parsed.changes || []).map((c: any) => ({
+        path: c.file || c.path,
+        action: (c.action || 'create') as FileChange['action'],
+        content: c.content || c.code,
+      }));
+
+      if (changes.length === 0) {
+        return { success: false, error: 'No changes in JSON' };
+      }
+
+      return {
+        success: true,
+        response: {
+          summary: parsed.summary || parsed.description || 'Generated structure',
+          changes,
+          raw,
+          parserUsed: this.name,
+        },
+      };
+    } catch (error) {
+      return { success: false, error: `JSON parse error: ${error}` };
+    }
+  }
+}
+```
+
+- [ ] **Step 4: Create structured output extractor**
+
+```typescript
+// apps/tui/src/lib/parser/extractors/structured.ts
+import type { ParserStrategy, ParserResult, FileChange } from '../types.js';
+
+export class StructuredExtractor implements ParserStrategy {
+  name = 'structured';
+
+  parse(raw: string): ParserResult {
+    const changes: FileChange[] = [];
+
+    const patterns = [
+      /FILE:\s*(.+?)\n```[\w]*\n([\s\S]*?)```/g,
+      /<file\s+path="(.+?)"[^>]*>([\s\S]*?)<\/file>/gi,
+      /^(.+?\.ts)\n```[\w]*\n([\s\S]*?)```/gm,
+    ];
+
+    for (const pattern of patterns) {
+      let match;
+      while ((match = pattern.exec(raw)) !== null) {
+        const path = match[1].trim();
+        const content = match[2].trim();
+
+        if (path && content && !changes.some(c => c.path === path)) {
+          changes.push({ path, action: 'create', content });
+        }
+      }
+    }
+
+    if (changes.length === 0) {
+      return { success: false, error: 'No structured file blocks found' };
+    }
+
+    return {
+      success: true,
+      response: {
+        summary: this.extractSummary(raw),
+        changes,
+        raw,
+        parserUsed: this.name,
+      },
+    };
+  }
+
+  private extractSummary(raw: string): string {
+    const match = raw.match(/^(?!```|FILE:|>|\s)(.+)/m);
+    return match ? match[1].trim().slice(0, 200) : 'Generated file structure';
+  }
+}
+```
+
+- [ ] **Step 5: Create extractor registry**
+
+```typescript
+// apps/tui/src/lib/parser/extractors/index.ts
+export { MarkdownExtractor } from './markdown.js';
+export { JsonExtractor } from './json.js';
+export { StructuredExtractor } from './structured.js';
+
+import type { ParserStrategy } from '../types.js';
+import { MarkdownExtractor, JsonExtractor, StructuredExtractor } from './index.js';
+
+const extractors: Map<string, ParserStrategy> = new Map();
+
+export function registerExtractor(extractor: ParserStrategy): void {
+  extractors.set(extractor.name, extractor);
+}
+
+export function getExtractor(name: string): ParserStrategy | undefined {
+  return extractors.get(name);
+}
+
+export function createDefaultExtractors(): void {
+  registerExtractor(new MarkdownExtractor());
+  registerExtractor(new JsonExtractor());
+  registerExtractor(new StructuredExtractor());
+}
+```
+
+- [ ] **Step 6: Create parser registry (chains extractors)**
+
+```typescript
+// apps/tui/src/lib/parser/registry.ts
+import type { ParserResult, ParsedResponse } from './types.js';
+import { getExtractor, createDefaultExtractors } from './extractors/index.js';
+import { logger } from '../utils/logger.js';
+
+createDefaultExtractors();
+
+export interface ParserRegistryOptions {
+  maxAttempts?: number;
+}
+
+export function parseWithStrategy(
+  raw: string,
+  strategyName: string
+): ParserResult {
+  const extractor = getExtractor(strategyName);
+  if (!extractor) {
+    return { success: false, error: `Unknown strategy: ${strategyName}` };
+  }
+
+  const result = extractor.parse(raw);
+  if (result.success) {
+    logger.debug('Parsing succeeded', { strategy: strategyName });
+  }
+  return result;
+}
+
+export function parseWithChain(raw: string, strategies: string[]): ParserResult {
+  for (const strategy of strategies) {
+    const result = parseWithStrategy(raw, strategy);
+    if (result.success) {
+      return result;
+    }
+  }
+
+  return {
+    success: false,
+    error: 'No parser succeeded',
+  };
+}
+
+export const DEFAULT_PARSER_CHAIN = ['structured', 'markdown', 'json'];
+
+export function parse(raw: string, chain = DEFAULT_PARSER_CHAIN): ParserResult {
+  logger.debug('Parsing response', { chain });
+  return parseWithChain(raw, chain);
+}
+```
+
+- [ ] **Step 7: Create parser index**
+
+```typescript
+// apps/tui/src/lib/parser/index.ts
+export * from './types.js';
+export { parse, parseWithStrategy, parseWithChain } from './registry.js';
+```
+
+- [ ] **Step 8: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add parser layer with strategy chain"
+```
+
+---
+
+## Task 6: File Applicator
+
+**Files:**
+- Create: `apps/tui/src/commands/freecode/file-applier.ts`
+
+- [ ] **Step 1: Create file applicator**
+
+```typescript
+// apps/tui/src/commands/freecode/file-applier.ts
+import * as fs from 'fs';
+import * as path from 'path';
+import type { FileChange } from '../../lib/parser/types.js';
+import { logger } from '../../lib/utils/logger.js';
+import { ok, err, type Result } from '../../lib/utils/result.js';
+
+export interface ApplyResult {
+  path: string;
+  success: boolean;
+  error?: string;
+}
+
+export async function applyFileChange(
+  change: FileChange,
+  basePath: string
+): Promise<Result<ApplyResult, string>> {
+  const fullPath = path.join(basePath, change.path);
+
+  try {
+    if (change.action === 'delete') {
+      if (fs.existsSync(fullPath)) {
+        fs.unlinkSync(fullPath);
+        logger.info('Deleted file', { path: change.path });
+      }
+      return ok({ path: change.path, success: true });
+    }
+
+    const dir = path.dirname(fullPath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    if (change.content !== undefined) {
+      fs.writeFileSync(fullPath, change.content, 'utf-8');
+      logger.info('Wrote file', { path: change.path, size: change.content.length });
+      return ok({ path: change.path, success: true });
+    }
+
+    return err('No content provided for write/create');
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    logger.error('Failed to apply change', { path: change.path, error: errorMessage });
+    return err(`Failed to ${change.action} ${change.path}: ${errorMessage}`);
+  }
+}
+
+export async function applyChanges(
+  changes: FileChange[],
+  basePath: string
+): Promise<ApplyResult[]> {
+  const results: ApplyResult[] = [];
+
+  for (const change of changes) {
+    const result = await applyFileChange(change, basePath);
+    results.push(result.success ? result.value : { path: change.path, success: false, error: result.error });
+  }
+
+  return results;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add file applicator"
+```
+
+---
+
+## Task 7: Freecode Command (Composable Orchestration)
+
+**Files:**
+- Create: `apps/tui/src/commands/freecode/provider-mgr.ts`
+- Create: `apps/tui/src/commands/freecode/executor.ts`
+- Create: `apps/tui/src/commands/freecode/index.ts`
+
+- [ ] **Step 1: Create provider manager**
+
+```typescript
+// apps/tui/src/commands/freecode/provider-mgr.ts
+import { listProviders, type ProviderDefinition } from '../../lib/browser/providers/index.js';
+import { logger } from '../../lib/utils/logger.js';
+
+export interface SelectedProvider {
+  id: string;
+  name: string;
+  definition: ProviderDefinition;
+}
+
+export function selectProvider(providerId?: string): SelectedProvider | null {
+  const providers = listProviders();
+
+  if (providers.length === 0) {
+    logger.error('No providers registered');
+    return null;
+  }
+
+  if (providerId) {
+    const found = providers.find(p => p.id === providerId);
+    if (found) {
+      return { id: found.id, name: found.name, definition: found };
+    }
+    logger.warn(`Provider ${providerId} not found, using default`);
+  }
+
+  const defaultProvider = providers[0];
+  return { id: defaultProvider.id, name: defaultProvider.name, definition: defaultProvider };
+}
+
+export function formatProviderList(): string {
+  const providers = listProviders();
+  return providers.map(p => `- **${p.id}** - ${p.name}`).join('\n');
+}
+```
+
+- [ ] **Step 2: Create executor (the main orchestration logic)**
+
+```typescript
+// apps/tui/src/commands/freecode/executor.ts
+import { PlaywrightBrowserController } from '../../lib/browser/controller.js';
+import { collectContext } from '../../lib/context/collector.js';
+import { parse } from '../../lib/parser/index.js';
+import { applyChanges } from './file-applier.js';
+import { type SelectedProvider } from './provider-mgr.js';
+import { logger } from '../../lib/utils/logger.js';
+
+export interface ExecutorOptions {
+  prompt: string;
+  provider: SelectedProvider;
+  projectPath: string;
+  contextOptions?: {
+    maxDepth?: number;
+    ignorePatterns?: string[];
+  };
+}
+
+export interface ExecutorResult {
+  success: boolean;
+  summary?: string;
+  filesCreated: number;
+  errors: string[];
+}
+
+export async function executePromptCycle(
+  options: ExecutorOptions,
+  onStatus: (message: string) => void
+): Promise<ExecutorResult> {
+  const { prompt, provider, projectPath, contextOptions } = options;
+  const errors: string[] = [];
+
+  const controller = new PlaywrightBrowserController();
+
+  try {
+    onStatus('🔄 **Connecting to browser...**');
+    await controller.connect();
+    onStatus('✅ **Browser connected**');
+
+    onStatus('✅ **Loading ChatGPT...**');
+    await controller.navigate(provider.definition.adapter);
+    onStatus(`✅ **${provider.name} loaded**`);
+
+    onStatus('📁 **Collecting project context...**');
+    const contextResult = await collectContext(projectPath, 'file-tree', contextOptions);
+
+    if (!contextResult.success) {
+      errors.push(`Context collection failed: ${contextResult.error}`);
+      return { success: false, filesCreated: 0, errors };
+    }
+
+    const context = contextResult.value;
+
+    const fullPrompt = `Project: ${context.name}
+Path: ${context.projectPath}
+
+File tree:
+${context.tree}
+
+Task: ${prompt}
+
+IMPORTANT: Respond with file operations in this EXACT format:
+FILE: <relative-path>
+\`\`\`
+<file-content>
+\`\`\`
+
+Create or modify files as needed to complete the task.`;
+
+    onStatus('📤 **Sending to ChatGPT...**');
+    await controller.sendPrompt(fullPrompt);
+    onStatus('⏳ **Waiting for response...**');
+
+    const response = await controller.waitForResponse();
+    onStatus('✅ **Response received**');
+
+    const parseResult = parse(response);
+
+    if (!parseResult.success) {
+      errors.push(`Parse failed: ${parseResult.error}`);
+      onStatus('⚠️ **Could not parse response**');
+      onStatus('```\n' + response.slice(0, 500) + '...\n```');
+      return { success: false, filesCreated: 0, errors };
+    }
+
+    const parsedResponse = parseResult.response!;
+    onStatus(`📝 **Summary:** ${parsedResponse.summary}`);
+
+    const fileChanges = parsedResponse.changes;
+    onStatus(`📋 **Applying ${fileChanges.length} file(s)...**`);
+
+    const applyResults = await applyChanges(fileChanges, projectPath);
+    const succeeded = applyResults.filter(r => r.success).length;
+    const failed = applyResults.filter(r => !r.success);
+
+    if (failed.length > 0) {
+      failed.forEach(f => {
+        if (f.error) errors.push(f.error);
+      });
+    }
+
+    onStatus(`✨ **Done!** Created ${succeeded}/${fileChanges.length} files`);
+
+    return {
+      success: errors.length === 0,
+      summary: parsedResponse.summary,
+      filesCreated: succeeded,
+      errors,
+    };
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    logger.error('Executor failed', { error: errorMessage });
+    errors.push(errorMessage);
+    return { success: false, filesCreated: 0, errors };
+  } finally {
+    await controller.disconnect();
+  }
+}
+```
+
+- [ ] **Step 3: Create /freecode command**
+
+```typescript
+// apps/tui/src/commands/freecode/index.ts
+import { registerCommand, type Command, type CommandContext } from '../index.js';
+import { selectProvider, formatProviderList } from './provider-mgr.js';
+import { executePromptCycle } from './executor.js';
+import { createDefaultProviders } from '../../lib/browser/providers/index.js';
+
+createDefaultProviders();
+
+const freecodeCommand: Command = {
+  name: 'freecode',
+  description: 'Send prompt to ChatGPT and apply file changes',
+  execute: async (args, ctx) => {
+    const userPrompt = args.join(' ');
+
+    if (!userPrompt.trim()) {
+      ctx.showMessage(`**Usage:** /freecode <your prompt>
+
+**Example:** /freecode summarize this project and write at project.md
+
+**Available providers:**
+${formatProviderList()}`);
+      return;
+    }
+
+    const provider = selectProvider();
+    if (!provider) {
+      ctx.showMessage('❌ **No provider available**');
+      return;
+    }
+
+    const projectPath = process.cwd();
+
+    const result = await executePromptCycle(
+      { prompt: userPrompt, provider, projectPath },
+      (status) => ctx.showMessage(status)
+    );
+
+    if (!result.success && result.errors.length > 0) {
+      ctx.showMessage(`❌ **Errors:**\n${result.errors.map(e => `- ${e}`).join('\n')}`);
+    }
+  },
+};
+
+export function registerFreecodeCommand(): void {
+  registerCommand(freecodeCommand);
+}
+```
+
+- [ ] **Step 4: Wire into built-in commands**
+
+Modify `apps/tui/src/commands/built-in.ts`:
+
+```typescript
+import { registerCommand, type Command, type CommandContext } from "./index.js";
+import { AVAILABLE_MODELS } from "../models.js";
+import { registerFreecodeCommand } from "./freecode/index.js";
+
+export function registerBuiltInCommands(): void {
+  registerCommand(helpCommand);
+  registerCommand(clearCommand);
+  registerCommand(exitCommand);
+  registerCommand(modelCommand);
+  registerFreecodeCommand();
+}
+```
+
+Also update the help text to include `/freecode`:
+
+```typescript
+const helpCommand: Command = {
+  name: "help",
+  description: "Show available commands",
+  execute: (_args, ctx) => {
+    ctx.showMessage(`**Available Commands:**
+
+- **/help** - Show this help message
+- **/clear** - Clear all messages
+- **/model** - Select AI model
+- **/exit** - Exit FreeCode
+- **/freecode** <prompt> - Send prompt to ChatGPT and apply file changes`);
+  },
+};
+```
+
+- [ ] **Step 5: Build and verify**
+
+Run: `cd apps/tui && pnpm build`
+Expected: Compiles without errors
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd apps/tui && git add -A && git commit -m "feat: add scalable /freecode command with provider system"
+```
+
+---
+
+## Task 8: Test MVP Flow
+
+**Prerequisites:**
+- Chrome running with: `chrome --remote-debugging-port=9222`
+- User logged into chatgpt.com
+
+- [ ] **Step 1: Start TUI**
+
+Run: `cd apps/tui && pnpm dev`
+
+- [ ] **Step 2: Test /freecode**
+
+Type: `/freecode summarize this project and write at project.md`
+
+Expected flow:
+1. Connecting to browser... ✅
+2. Browser connected ✅
+3. Loading ChatGPT... ✅
+4. Collecting project context... (shows file count)
+5. Sending to ChatGPT... ✅
+6. Waiting for response... ✅
+7. Response received ✅
+8. Applying files... ✅
+9. Done! Created N files ✅
+
+- [ ] **Step 3: Verify project.md exists**
+
+Run: `cat project.md`
+
+---
+
+## Scalability Verification
+
+| Scalability Concern | How Addressed |
+|---------------------|---------------|
+| Add new provider (Claude, Gemini) | Implement `PageAdapter`, call `registerProvider()` |
+| Add new parser | Implement `ParserStrategy`, call `registerExtractor()` |
+| Add new context strategy | Implement `ContextStrategy`, call `registerStrategy()` |
+| Change file operations | Modify only `file-applier.ts` |
+| Test components | Each module has single responsibility, easy to mock |
+
+---
+
+## Self-Review Checklist
+
+1. **Spec coverage:** MVP works — browser connection, context, prompt, parsing, file apply
+2. **Placeholder scan:** No TBD/TODO, all steps have complete code
+3. **Type consistency:** `FileChange`, `ParserResult`, `Result<T,E>` used consistently
+4. **Interface boundaries:** Each layer has clear interface, no cross-layer dependencies
+5. **Error handling:** `Result<T, E>` used throughout, no exceptions across module boundaries
+
+---
+
+**Plan complete and saved to `docs/superpowers/plans/2026-05-10-freecode-mvp.md`.**
+
+**Two execution options:**
+
+1. **Subagent-Driven (recommended)** - I dispatch a fresh subagent per task, review between tasks, fast iteration
+
+2. **Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints
+
+Which approach?
\ No newline at end of file
diff --git a/docs/superpowers/plans/2026-05-21-vscode-chat-plan.md b/docs/superpowers/plans/2026-05-21-vscode-chat-plan.md
new file mode 100644
index 00000000..3dc16046
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-21-vscode-chat-plan.md
@@ -0,0 +1,893 @@
+# VS Code Chat Extension Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Create a VS Code extension with chat interface that connects to the CLI backend via JSON-RPC, similar to how the TUI connects.
+
+**Architecture:** VS Code extension uses VS Code Webview API to render a React-based chat UI. Communication with CLI backend happens via JSON-RPC over stdin/stdout (same pattern as TUI). The CLI handles browser automation and AI interaction.
+
+**Tech Stack:** VS Code API, React 18, TypeScript, Zustand
+
+---
+
+## File Structure
+
+```
+apps/vscode/
+├── package.json
+├── tsconfig.json
+├── src/
+│   ├── extension.ts          # Entry point, activates extension
+│   ├── lib/
+│   │   └── types.ts          # Shared types
+│   ├── ipc/
+│   │   ├── client.ts         # JSON-RPC client to CLI
+│   │   └── protocol.ts        # IPC protocol types
+│   ├── stores/
+│   │   ├── chat-store.ts      # Zustand store
+│   │   └── index.ts
+│   ├── chat/
+│   │   ├── ChatView.tsx       # Main chat panel (webview)
+│   │   ├── MessageList.tsx
+│   │   ├── MessageInput.tsx
+│   │   ├── Message.tsx
+│   │   └── parts/
+│   │       ├── TextPart.tsx
+│   │       ├── CodePart.tsx
+│   │       └── ToolPart.tsx
+│   └── webview/
+│       └── App.tsx            # Webview root component
+```
+
+---
+
+## Task 1: Scaffold VS Code Extension
+
+**Files:**
+- Create: `apps/vscode/package.json`
+- Create: `apps/vscode/tsconfig.json`
+- Create: `apps/vscode/src/extension.ts`
+- Create: `apps/vscode/src/lib/types.ts`
+
+- [ ] **Step 1: Create package.json**
+
+```json
+{
+  "name": "freecode",
+  "displayName": "FreeCode",
+  "description": "AI coding assistant with chat interface",
+  "version": "0.1.0",
+  "engines": {
+    "vscode": "^1.88.0"
+  },
+  "activationEvents": ["onView:freecode.chat"],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "viewsContainers": {
+      "panel": [
+        {
+          "id": "freecode.chat",
+          "title": "FreeCode Chat",
+          "icon": "$(chat)"
+        }
+      ]
+    },
+    "views": {
+      "panel": [
+        {
+          "id": "freecode.chat",
+          "type": "webview",
+          "屏领": "Chat"
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/vscode": "^1.88.0",
+    "typescript": "^5.4.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "zustand": "^4.5.0"
+  }
+}
+```
+
+- [ ] **Step 2: Create tsconfig.json**
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"]
+}
+```
+
+- [ ] **Step 3: Create src/lib/types.ts**
+
+```typescript
+export interface ToolListItem {
+  id: string;
+  description: string;
+}
+
+export interface ToolCallResult {
+  title: string;
+  output: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  parts: MessagePart[];
+  timestamp: number;
+}
+
+export type MessagePart =
+  | { type: 'text'; content: string }
+  | { type: 'code'; language: string; content: string }
+  | { type: 'tool'; tool: { name: string; args: Record<string, unknown> }; result?: string };
+```
+
+- [ ] **Step 4: Create src/extension.ts**
+
+```typescript
+import * as vscode from 'vscode';
+import { ChatView } from './chat/ChatView.js';
+
+export function activate(context: vscode.ExtensionContext) {
+  const chatView = new ChatView(context);
+
+  context.subscriptions.push(
+    vscode.window.registerWebviewViewProvider(
+      'freecode.chat',
+      chatView
+    )
+  );
+}
+
+export function deactivate() {}
+```
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add apps/vscode/package.json apps/vscode/tsconfig.json apps/vscode/src/
+git commit -m "feat(vscode): scaffold extension with basic manifest and types"
+```
+
+---
+
+## Task 2: IPC Client
+
+**Files:**
+- Create: `apps/vscode/src/ipc/protocol.ts`
+- Create: `apps/vscode/src/ipc/client.ts`
+
+- [ ] **Step 1: Create src/ipc/protocol.ts**
+
+```typescript
+export interface JsonRpcRequest {
+  jsonrpc: '2.0';
+  id: number | string;
+  method: string;
+  params?: Record<string, unknown>;
+}
+
+export interface JsonRpcResponse {
+  jsonrpc: '2.0';
+  id: number | string;
+  result?: unknown;
+  error?: { code: number; message: string; data?: unknown };
+}
+
+export interface StreamResponse {
+  type: 'text' | 'code' | 'tool' | 'done' | 'error';
+  content: string;
+}
+```
+
+- [ ] **Step 2: Create src/ipc/client.ts** (adapted from TUI)
+
+```typescript
+import { spawn, type ChildProcess } from 'child_process';
+import type { JsonRpcRequest, JsonRpcResponse, ToolListItem, ToolCallResult } from './protocol.js';
+
+let requestId = 0;
+let cliProcess: ChildProcess | null = null;
+let messageBuffer = '';
+let pendingRequests = new Map<number | string, { resolve: (value: unknown) => void; reject: (error: Error) => void }>();
+
+function generateId(): number {
+  return ++requestId;
+}
+
+function parseResponse(data: string): JsonRpcResponse[] {
+  const responses: JsonRpcResponse[] = [];
+  const lines = data.split('\n');
+  for (const line of lines) {
+    if (!line.trim()) continue;
+    try {
+      responses.push(JSON.parse(line) as JsonRpcResponse);
+    } catch {}
+  }
+  return responses;
+}
+
+export function startCli(): void {
+  if (cliProcess) return;
+
+  cliProcess = spawn('node', ['apps/cli/src/server.ts'], {
+    cwd: '/home/ayande/Project/freecode',
+    stdio: ['pipe', 'pipe', 'pipe'],
+  });
+
+  cliProcess.stdout?.setEncoding('utf-8');
+  cliProcess.stderr?.on('data', (data) => {
+    console.error('[CLI stderr]', data.toString());
+  });
+
+  cliProcess.stdout?.on('data', (data: string) => {
+    messageBuffer += data;
+    const responses = parseResponse(messageBuffer);
+    messageBuffer = '';
+
+    for (const response of responses) {
+      const pending = pendingRequests.get(response.id);
+      if (pending) {
+        pendingRequests.delete(response.id);
+        if (response.error) {
+          pending.reject(new Error(response.error.message));
+        } else {
+          pending.resolve(response.result);
+        }
+      }
+    }
+  });
+
+  cliProcess.on('error', (err) => {
+    console.error('[CLI process error]', err);
+    cliProcess = null;
+  });
+
+  cliProcess.on('exit', () => {
+    cliProcess = null;
+  });
+}
+
+function sendRequest(method: string, params?: Record<string, unknown>): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    if (!cliProcess || !cliProcess.stdin) {
+      reject(new Error('CLI not running'));
+      return;
+    }
+
+    const id = generateId();
+    const request: JsonRpcRequest = { jsonrpc: '2.0', id, method, params };
+    pendingRequests.set(id, { resolve: resolve as (value: unknown) => void, reject });
+
+    cliProcess.stdin.write(JSON.stringify(request) + '\n');
+  });
+}
+
+export async function listTools(): Promise<ToolListItem[]> {
+  return (await sendRequest('tools.list')) as ToolListItem[];
+}
+
+export async function callTool(name: string, args: Record<string, unknown>): Promise<ToolCallResult> {
+  return (await sendRequest('tools.call', { name, args })) as ToolCallResult;
+}
+
+export function stopCli(): void {
+  if (cliProcess) {
+    cliProcess.kill();
+    cliProcess = null;
+  }
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add apps/vscode/src/ipc/
+git commit -m "feat(vscode): add IPC client for CLI communication"
+```
+
+---
+
+## Task 3: Chat Store
+
+**Files:**
+- Create: `apps/vscode/src/stores/chat-store.ts`
+- Create: `apps/vscode/src/stores/index.ts`
+
+- [ ] **Step 1: Create src/stores/chat-store.ts**
+
+```typescript
+import { create } from 'zustand';
+import type { Message, MessagePart } from '../lib/types.js';
+
+interface ChatStore {
+  messages: Message[];
+  status: 'idle' | 'streaming' | 'error';
+  error: string | null;
+  addMessage: (role: 'user' | 'assistant', parts: MessagePart[]) => void;
+  addPartToLastMessage: (part: MessagePart) => void;
+  updateLastMessagePart: (index: number, part: MessagePart) => void;
+  setStatus: (status: 'idle' | 'streaming' | 'error') => void;
+  setError: (error: string | null) => void;
+  clearMessages: () => void;
+}
+
+let messageCounter = 0;
+
+export const useChatStore = create<ChatStore>((set) => ({
+  messages: [],
+  status: 'idle',
+  error: null,
+
+  addMessage: (role, parts) =>
+    set((state) => ({
+      messages: [
+        ...state.messages,
+        {
+          id: `msg-${++messageCounter}`,
+          role,
+          parts,
+          timestamp: Date.now(),
+        },
+      ],
+    })),
+
+  addPartToLastMessage: (part) =>
+    set((state) => {
+      if (state.messages.length === 0) return state;
+      const lastMessage = state.messages[state.messages.length - 1];
+      return {
+        messages: [
+          ...state.messages.slice(0, -1),
+          { ...lastMessage, parts: [...lastMessage.parts, part] },
+        ],
+      };
+    }),
+
+  updateLastMessagePart: (index, part) =>
+    set((state) => {
+      if (state.messages.length === 0) return state;
+      const lastMessage = state.messages[state.messages.length - 1];
+      const newParts = [...lastMessage.parts];
+      newParts[index] = part;
+      return {
+        messages: [
+          ...state.messages.slice(0, -1),
+          { ...lastMessage, parts: newParts },
+        ],
+      };
+    }),
+
+  setStatus: (status) => set({ status }),
+  setError: (error) => set({ error }),
+  clearMessages: () => set({ messages: [], status: 'idle', error: null }),
+}));
+```
+
+- [ ] **Step 2: Create src/stores/index.ts**
+
+```typescript
+export { useChatStore } from './chat-store.js';
+export type { Message, MessagePart } from '../lib/types.js';
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add apps/vscode/src/stores/
+git commit -m "feat(vscode): add chat store with Zustand"
+```
+
+---
+
+## Task 4: Message Part Components
+
+**Files:**
+- Create: `apps/vscode/src/chat/parts/TextPart.tsx`
+- Create: `apps/vscode/src/chat/parts/CodePart.tsx`
+- Create: `apps/vscode/src/chat/parts/ToolPart.tsx`
+
+- [ ] **Step 1: Create src/chat/parts/TextPart.tsx**
+
+```typescript
+import React from 'react';
+
+interface TextPartProps {
+  content: string;
+}
+
+export const TextPart: React.FC<TextPartProps> = ({ content }) => {
+  return (
+    <div style={{ whiteSpace: 'pre-wrap', lineHeight: '1.5' }}>
+      {content}
+    </div>
+  );
+};
+```
+
+- [ ] **Step 2: Create src/chat/parts/CodePart.tsx**
+
+```typescript
+import React, { useState } from 'react';
+
+interface CodePartProps {
+  language: string;
+  content: string;
+}
+
+export const CodePart: React.FC<CodePartProps> = ({ language, content }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(content);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div style={{
+      background: '#1e1e1e',
+      borderRadius: '4px',
+      margin: '8px 0',
+      overflow: 'hidden'
+    }}>
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '4px 12px',
+        background: '#2d2d2d',
+        fontSize: '12px',
+        color: '#888'
+      }}>
+        <span>{language}</span>
+        <button
+          onClick={handleCopy}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: copied ? '#4caf50' : '#888',
+            cursor: 'pointer',
+            fontSize: '12px'
+          }}
+        >
+          {copied ? 'Copied!' : 'Copy'}
+        </button>
+      </div>
+      <pre style={{
+        margin: 0,
+        padding: '12px',
+        overflow: 'auto',
+        fontSize: '13px',
+        fontFamily: 'monaco, Consolas, monospace'
+      }}>
+        <code>{content}</code>
+      </pre>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 3: Create src/chat/parts/ToolPart.tsx**
+
+```typescript
+import React, { useState } from 'react';
+
+interface ToolPartProps {
+  tool: { name: string; args: Record<string, unknown> };
+  result?: string;
+}
+
+export const ToolPart: React.FC<ToolPartProps> = ({ tool, result }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div style={{
+      background: '#2d2d2d',
+      borderRadius: '4px',
+      margin: '8px 0',
+      border: '1px solid #404040'
+    }}>
+      <div
+        onClick={() => setExpanded(!expanded)}
+        style={{
+          padding: '8px 12px',
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}
+      >
+        <span style={{ color: '#4fc3f7', fontWeight: 500 }}>
+          🔧 {tool.name}
+        </span>
+        <span style={{ color: '#888' }}>
+          {expanded ? '▼' : '▶'}
+        </span>
+      </div>
+      {expanded && (
+        <div style={{ padding: '8px 12px', borderTop: '1px solid #404040' }}>
+          <div style={{ fontSize: '12px', color: '#888', marginBottom: '4px' }}>
+            Arguments: {JSON.stringify(tool.args)}
+          </div>
+          {result && (
+            <pre style={{
+              margin: 0,
+              fontSize: '12px',
+              fontFamily: 'monaco, Consolas, monospace',
+              whiteSpace: 'pre-wrap'
+            }}>
+              {result}
+            </pre>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add apps/vscode/src/chat/parts/
+git commit -m "feat(vscode): add message part components"
+```
+
+---
+
+## Task 5: Message Components
+
+**Files:**
+- Create: `apps/vscode/src/chat/Message.tsx`
+- Create: `apps/vscode/src/chat/MessageList.tsx`
+- Create: `apps/vscode/src/chat/MessageInput.tsx`
+
+- [ ] **Step 1: Create src/chat/Message.tsx**
+
+```typescript
+import React from 'react';
+import type { Message, MessagePart } from '../lib/types.js';
+import { TextPart } from './parts/TextPart.js';
+import { CodePart } from './parts/CodePart.js';
+import { ToolPart } from './parts/ToolPart.js';
+
+interface MessageProps {
+  message: Message;
+}
+
+export const Message: React.FC<MessageProps> = ({ message }) => {
+  const isUser = message.role === 'user';
+
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: isUser ? 'flex-end' : 'flex-start',
+      marginBottom: '16px'
+    }}>
+      <div style={{
+        maxWidth: '80%',
+        background: isUser ? '#0e639c' : '#2d2d2d',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        color: '#d4d4d4'
+      }}>
+        {message.parts.map((part, i) => {
+          switch (part.type) {
+            case 'text':
+              return <TextPart key={i} content={part.content} />;
+            case 'code':
+              return <CodePart key={i} language={part.language} content={part.content} />;
+            case 'tool':
+              return <ToolPart key={i} tool={part.tool} result={part.result} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 2: Create src/chat/MessageList.tsx**
+
+```typescript
+import React, { useEffect, useRef } from 'react';
+import { useChatStore } from '../stores/index.js';
+import { Message } from './Message.js';
+
+export const MessageList: React.FC = () => {
+  const messages = useChatStore((state) => state.messages);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div style={{
+      flex: 1,
+      overflow: 'auto',
+      padding: '16px',
+      display: 'flex',
+      flexDirection: 'column'
+    }}>
+      {messages.map((msg) => (
+        <Message key={msg.id} message={msg} />
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+};
+```
+
+- [ ] **Step 3: Create src/chat/MessageInput.tsx**
+
+```typescript
+import React, { useState, useCallback } from 'react';
+
+interface MessageInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+}
+
+export const MessageInput: React.FC<MessageInputProps> = ({ onSend, disabled }) => {
+  const [value, setValue] = useState('');
+
+  const handleSubmit = useCallback(() => {
+    if (!value.trim() || disabled) return;
+    onSend(value.trim());
+    setValue('');
+  }, [value, disabled, onSend]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div style={{
+      padding: '12px 16px',
+      borderTop: '1px solid #404040',
+      background: '#1e1e1e'
+    }}>
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+        placeholder="Type your message... (Cmd+Enter to send)"
+        style={{
+          width: '100%',
+          minHeight: '60px',
+          padding: '8px 12px',
+          borderRadius: '4px',
+          border: '1px solid #404040',
+          background: '#2d2d2d',
+          color: '#d4d4d4',
+          fontSize: '14px',
+          fontFamily: 'inherit',
+          resize: 'none',
+          outline: 'none'
+        }}
+      />
+      <div style={{ marginTop: '8px', display: 'flex', justifyContent: 'flex-end' }}>
+        <button
+          onClick={handleSubmit}
+          disabled={disabled || !value.trim()}
+          style={{
+            padding: '6px 16px',
+            borderRadius: '4px',
+            border: 'none',
+            background: disabled ? '#404040' : '#0e639c',
+            color: '#fff',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            fontSize: '13px'
+          }}
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  );
+};
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add apps/vscode/src/chat/Message.tsx apps/vscode/src/chat/MessageList.tsx apps/vscode/src/chat/MessageInput.tsx
+git commit -m "feat(vscode): add Message, MessageList, MessageInput components"
+```
+
+---
+
+## Task 6: ChatView (Main Webview Provider)
+
+**Files:**
+- Create: `apps/vscode/src/chat/ChatView.tsx`
+
+- [ ] **Step 1: Create src/chat/ChatView.tsx**
+
+```typescript
+import * as vscode from 'vscode';
+import * as React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { App } from '../webview/App.js';
+
+export class ChatView implements vscode.WebviewViewProvider {
+  private webviewView: vscode.WebviewView | undefined;
+  private root: Root | null = null;
+
+  constructor(private context: vscode.ExtensionContext) {}
+
+  resolveWebviewView(webviewView: vscode.WebviewView): void {
+    this.webviewView = webviewView;
+
+    webviewView.webview.options = {
+      enableScripts: true,
+    };
+
+    webviewView.webview.html = this.getHtml();
+
+    this.root = createRoot(webviewView.webview.element!);
+    this.root.render(React.createElement(App));
+  }
+
+  private getHtml(): string {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FreeCode Chat</title>
+  <style>
+    body { margin: 0; padding: 0; background: #1e1e1e; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>`;
+  }
+}
+```
+
+- [ ] **Step 2: Create src/webview/App.tsx**
+
+```typescript
+import React, { useCallback } from 'react';
+import { useChatStore } from '../stores/index.js';
+import { MessageList } from '../chat/MessageList.js';
+import { MessageInput } from '../chat/MessageInput.js';
+import { startCli, listTools, callTool } from '../ipc/client.js';
+
+export const App: React.FC = () => {
+  const status = useChatStore((s) => s.status);
+  const addMessage = useChatStore((s) => s.addMessage);
+  const setStatus = useChatStore((s) => s.setStatus);
+  const setError = useChatStore((s) => s.setError);
+
+  const handleSend = useCallback(async (message: string) => {
+    addMessage('user', [{ type: 'text', content: message }]);
+    setStatus('streaming');
+
+    try {
+      startCli();
+      const tools = await listTools();
+
+      addMessage('assistant', [{
+        type: 'text',
+        content: `Connected to CLI. Found ${tools.length} tools.`
+      }]);
+
+      setStatus('idle');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setStatus('error');
+    }
+  }, [addMessage, setStatus, setError]);
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100vh',
+      background: '#1e1e1e',
+      color: '#d4d4d4'
+    }}>
+      <div style={{
+        padding: '8px 16px',
+        background: '#2d2d2d',
+        borderBottom: '1px solid #404040',
+        fontWeight: 500
+      }}>
+        FreeCode Chat
+      </div>
+      <MessageList />
+      <MessageInput onSend={handleSend} disabled={status === 'streaming'} />
+    </div>
+  );
+};
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add apps/vscode/src/chat/ChatView.tsx apps/vscode/src/webview/App.tsx
+git commit -m "feat(vscode): add ChatView webview provider and App root"
+```
+
+---
+
+## Task 7: Verify Build
+
+- [ ] **Step 1: Run build**
+
+Run: `cd /home/ayande/Project/freecode/apps/vscode && npm install && npm run build`
+Expected: Compiles without errors
+
+- [ ] **Step 2: Verify output**
+
+Run: `ls -la /home/ayande/Project/freecode/apps/vscode/dist/`
+Expected: Contains compiled JavaScript files
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /home/ayande/Project/freecode
+git add -A
+git commit -m "feat(vscode): add build configuration and verify compilation"
+```
+
+---
+
+## Plan Self-Review
+
+1. **Spec coverage:** Chat UI, IPC client, message rendering, store - all covered
+2. **Placeholder scan:** No TODOs, all code is complete
+3. **Type consistency:** Types flow from `lib/types.ts` through stores, components
+
+---
+
+## Next Steps
+
+**Plan complete and saved to `docs/superpowers/plans/2026-05-21-vscode-chat-plan.md`.**
+
+Two execution options:
+
+**1. Subagent-Driven (recommended)** - I dispatch a fresh subagent per task, review between tasks, fast iteration
+
+**2. Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints
+
+**Which approach?**
\ No newline at end of file
diff --git a/docs/superpowers/plans/2026-05-24-architecture-migration.md b/docs/superpowers/plans/2026-05-24-architecture-migration.md
new file mode 100644
index 00000000..a2e03200
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-24-architecture-migration.md
@@ -0,0 +1,376 @@
+# FreeCode — Architecture Migration Plan
+
+**Date:** 2026-05-24
+**Status:** Draft
+**Based on:** `2026-05-23-architecture.md`
+
+---
+
+## Overview
+
+Migrate business logic from TUI into CLI, establishing the thin-client architecture. TUI and VSCode become pure UI shells. CLI becomes the single source of truth for all intelligence.
+
+**Order:** `packages/shared` → `apps/cli` → `apps/tui` → `apps/vscode`
+
+Each step is independent and can be tested in isolation.
+
+---
+
+## Step 1: Create `packages/shared`
+
+**Goal:** Define types and IPC protocol in one place. No duplicate type definitions.
+
+### Files to create
+
+```
+packages/shared/
+├── package.json
+├── tsconfig.json
+└── src/
+    ├── types.ts           # Message, MessagePart, ToolResult, FileChange, etc.
+    ├── ipc/
+    │   └── protocol.ts    # JsonRpcRequest, JsonRpcResponse, StreamResponse, method sigs
+    └── index.ts
+```
+
+### Types to define
+
+```typescript
+// types.ts
+export interface Message { id: string; role: "user" | "assistant"; parts: MessagePart[]; timestamp: number }
+export type MessagePart = { type: "text"; content: string } | { type: "code"; language: string; content: string } | { type: "tool"; tool: { name: string; args: Record<string, unknown> }; result?: string }
+export interface ToolDef { id: string; description: string; parameters: JsonSchema }
+export interface ToolResult { title: string; output: string; metadata?: Record<string, unknown> }
+export interface ToolContext { cwd: string; abort?: AbortSignal }
+export interface FileChange { path: string; action: "create" | "update" | "delete"; content?: string; diff?: string }
+export interface JsonSchema { type: string; properties?: Record<string, { description?: string; type?: string }>; required?: string[] }
+```
+
+```typescript
+// ipc/protocol.ts
+export interface JsonRpcRequest { jsonrpc: "2.0"; id: number | string; method: string; params?: Record<string, unknown> }
+export interface JsonRpcResponse { jsonrpc: "2.0"; id: number | string; result?: unknown; error?: { code: number; message: string; data?: unknown } }
+export interface StreamResponse { type: "text" | "code" | "tool" | "done" | "error"; content: string; toolName?: string; toolArgs?: unknown; toolResult?: string }
+```
+
+### Methods to define
+
+```typescript
+// ipc/protocol.ts (method signatures)
+export const METHODS = {
+  "tools.list": {} as { params: undefined; result: ToolListItem[] },
+  "tools.call": { params: { name: string; args: Record<string, unknown> }, result: ToolResult },
+  "session.start": { params: { projectPath: string; provider?: string }, result: { sessionId: string } },
+  "session.send": { params: { sessionId: string; message: string }, result: StreamResponse },
+  "session.stop": { params: { sessionId: string }, result: void },
+  "providers.list": { params: undefined; result: ProviderInfo[] },
+} as const;
+```
+
+### Verification
+
+- [ ] `npm run build` in `packages/shared` succeeds
+- [ ] Can import types in both TUI and CLI
+
+---
+
+## Step 2: Build out `apps/cli`
+
+**Goal:** CLI becomes the full backend. Move browser, parser, context, tools, applier from TUI.
+
+### 2.1 Create directory structure
+
+```
+apps/cli/src/
+├── server.ts                # (exists — may need updates)
+├── agent/                   # NEW
+│   ├── loop.ts              # Main agent turn loop
+│   ├── session.ts           # Session state
+│   └── index.ts
+├── browser/                 # MOVE from TUI
+│   ├── controller.ts
+│   ├── providers/
+│   │   ├── index.ts
+│   │   ├── chatgpt.ts
+│   │   └── types.ts
+│   └── types.ts
+├── context/                 # MOVE from TUI
+│   ├── collector.ts
+│   ├── strategies/
+│   │   └── index.ts
+│   └── types.ts
+├── parser/                  # MOVE from TUI
+│   ├── registry.ts
+│   ├── extractors/
+│   │   ├── index.ts
+│   │   ├── structured.ts
+│   │   ├── markdown.ts
+│   │   └── json.ts
+│   └── types.ts
+├── tools/                   # EXISTS (read, write) — add more
+│   ├── index.ts
+│   ├── read.ts
+│   ├── write.ts
+│   ├── bash.ts              # ADD
+│   ├── edit.ts              # ADD
+│   ├── grep.ts              # ADD
+│   ├── find.ts              # ADD
+│   └── glob.ts              # ADD
+└── applier/                 # MOVE from TUI commands/freecode
+    ├── index.ts
+    ├── differ.ts
+    └── writer.ts
+```
+
+### 2.2 Copy/move code from TUI
+
+**From `apps/tui/src/lib/browser/` → `apps/cli/src/browser/`**
+- `controller.ts`
+- `providers/index.ts`
+- `providers/chatgpt.ts`
+- `providers/types.ts`
+- `types.ts`
+
+**From `apps/tui/src/lib/parser/` → `apps/cli/src/parser/`**
+- `registry.ts`
+- `extractors/index.ts`
+- `extractors/structured.ts`
+- `extractors/markdown.ts`
+- `extractors/json.ts`
+- `types.ts`
+
+**From `apps/tui/src/lib/context/` → `apps/cli/src/context/`**
+- `collector.ts`
+- `strategies/index.ts`
+- `types.ts`
+
+**From `apps/tui/src/commands/freecode/` → `apps/cli/src/agent/`**
+- Move `executor.ts` logic to `agent/loop.ts`
+- Move `file-applier.ts` logic to `applier/`
+
+### 2.3 Add missing tools
+
+Add `bash`, `edit`, `grep`, `find`, `glob` tools to match spec.
+
+### 2.4 Update `server.ts`
+
+Expand from simple tool executor to full agent server:
+
+```typescript
+const methodHandlers: Record<string, (params: Record<string, unknown>) => Promise<unknown>> = {
+  "tools.list": async () => listTools(),
+  "tools.call": async (params) => { /* existing */ },
+  "session.start": async (params) => startSession(params),
+  "session.send": async (params) => sendMessage(params),  // streams responses
+  "session.stop": async (params) => stopSession(params),
+  "providers.list": async () => listProviders(),
+};
+```
+
+### 2.5 Wire up the agent loop
+
+`agent/loop.ts` orchestrates:
+1. Collect context (file tree)
+2. Send prompt to browser
+3. Parse response
+4. Apply file changes
+5. Stream results back via IPC
+
+### Verification
+
+- [ ] `apps/cli/src/server.ts` handles all IPC methods
+- [ ] Can run `node apps/cli/src/server.ts` and communicate via JSON-RPC
+- [ ] Browser controller connects to Chrome via CDP
+- [ ] Parser handles structured, markdown, json formats
+- [ ] Tools execute correctly (read, write, bash, etc.)
+- [ ] Agent loop completes a full turn: context → prompt → parse → apply
+
+---
+
+## Step 3: Refactor `apps/tui`
+
+**Goal:** TUI becomes pure UI shell. Strips all business logic.
+
+### 3.1 Remove moved code
+
+Delete:
+- `apps/tui/src/lib/browser/` (moved to CLI)
+- `apps/tui/src/lib/parser/` (moved to CLI)
+- `apps/tui/src/lib/context/` (moved to CLI)
+- `apps/tui/src/commands/freecode/` (moved to CLI)
+
+### 3.2 Refactor IPC client
+
+Update `apps/tui/src/ipc/client.ts`:
+- Remove duplicate protocol types — import from `@freecode/shared`
+- Methods stay the same (already JSON-RPC based)
+
+### 3.3 Refactor `index.ts` (TUI entry point)
+
+Current: creates browser, navigates, sends prompt, parses, applies
+Target: spawns CLI → sends IPC messages → renders responses
+
+```typescript
+// Target behavior
+startCli();  // spawn node apps/cli/src/server.ts
+
+editor.onSubmit = async (value) => {
+  const response = await sendMessage(sessionId, value);
+  // stream response to TUI components
+  for await (const chunk of streamResponse(response)) {
+    renderChunk(chunk);
+  }
+};
+```
+
+### 3.4 Commands
+
+Keep `apps/tui/src/commands/` for TUI-only commands:
+- Model selection
+- Theme switching
+- Help, exit
+
+Remove `/freecode` command — this logic moves to CLI `session.send`.
+
+### Verification
+
+- [ ] TUI connects to CLI via IPC
+- [ ] Sends messages and receives streamed responses
+- [ ] Renders text, code, tool result parts correctly
+- [ ] No browser, parser, or file system code in TUI
+
+---
+
+## Step 4: Refactor `apps/vscode`
+
+**Goal:** Same as TUI — pure UI shell.
+
+### 4.1 Remove duplicated logic
+
+Delete/empty:
+- Any browser code
+- Any parser code
+- Any context collection code
+
+### 4.2 Import types from `@freecode/shared`
+
+Replace local `types.ts` with import from shared package.
+
+### 4.3 Update IPC client
+
+Same pattern as TUI — import protocol from shared, keep client implementation.
+
+### 4.4 Wire to CLI
+
+VSCode extension spawns CLI on startup, communicates via IPC.
+
+### Verification
+
+- [ ] VSCode extension connects to CLI
+- [ ] Sends messages, receives streamed responses
+- [ ] Renders chat messages correctly
+- [ ] No business logic in extension
+
+---
+
+## Step 5: Test End-to-End
+
+### Full flow test
+
+1. Start TUI: `node apps/tui/src/index.ts`
+2. Submit a prompt: `add a hello world function to src/hello.ts`
+3. CLI connects to browser, navigates to ChatGPT
+4. CLI collects context, sends prompt
+5. ChatGPT returns response with file operations
+6. CLI parses response
+7. CLI shows diff preview (in TUI)
+8. User approves
+9. File is written to disk
+
+### VSCode flow
+
+1. Open VSCode, activate FreeCode extension
+2. Chat panel opens
+3. Submit prompt
+4. Same CLI flow, result shown in chat
+
+---
+
+## Order of Implementation
+
+```
+Week 1:
+  └─ Step 1: packages/shared (types + protocol)
+
+Week 2-3:
+  └─ Step 2: apps/cli (full backend)
+
+Week 4:
+  └─ Step 3: apps/tui (refactor to thin client)
+  └─ Step 4: apps/vscode (refactor to thin client)
+
+Week 5:
+  └─ Step 5: End-to-end testing
+```
+
+---
+
+## Rollout Strategy
+
+Since TUI currently works end-to-end, migrate piece by piece:
+
+1. **Create shared types** (no behavior change) — safest first step
+2. **Duplicate code to CLI** (both TUI and CLI have same code) — verify CLI works standalone
+3. **Switch TUI to use CLI** (TUI still renders, but CLI does all logic) — cutover
+4. **Remove duplicated code from TUI** — cleanup
+5. **Apply same pattern to VSCode**
+
+This way you always have a working version at each milestone.
+
+---
+
+## Files Summary
+
+### Create new
+
+```
+packages/shared/全部
+apps/cli/src/agent/全部
+apps/cli/src/browser/全部 (from TUI)
+apps/cli/src/context/全部 (from TUI)
+apps/cli/src/parser/全部 (from TUI)
+apps/cli/src/applier/全部
+apps/cli/src/tools/bash.ts (new)
+apps/cli/src/tools/edit.ts (new)
+apps/cli/src/tools/grep.ts (new)
+apps/cli/src/tools/find.ts (new)
+apps/cli/src/tools/glob.ts (new)
+```
+
+### Move (copy + delete source)
+
+```
+apps/tui/src/lib/browser/ → apps/cli/src/browser/
+apps/tui/src/lib/parser/ → apps/cli/src/parser/
+apps/tui/src/lib/context/ → apps/cli/src/context/
+apps/tui/src/commands/freecode/executor.ts → apps/cli/src/agent/loop.ts
+apps/tui/src/commands/freecode/file-applier.ts → apps/cli/src/applier/
+```
+
+### Delete from TUI
+
+```
+apps/tui/src/lib/browser/
+apps/tui/src/lib/parser/
+apps/tui/src/lib/context/
+apps/tui/src/commands/freecode/
+```
+
+### Update in place
+
+```
+apps/tui/src/ipc/client.ts (use shared types)
+apps/vscode/src/ipc/client.ts (use shared types)
+apps/vscode/src/lib/types.ts (use shared types)
+apps/tui/src/commands/freecode/index.ts (remove — logic now in CLI)
+```
\ No newline at end of file
diff --git a/docs/superpowers/specs/2026-05-21-vscode-chat-design.md b/docs/superpowers/specs/2026-05-21-vscode-chat-design.md
new file mode 100644
index 00000000..a1a0ab02
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-21-vscode-chat-design.md
@@ -0,0 +1,183 @@
+# VS Code Extension — Chat Interface
+
+## Context
+
+FreeCode has two apps:
+- **CLI** (`apps/cli/`) — JSON-RPC server over stdin/stdout exposing `tools.list` and `tools.call`
+- **TUI** (`apps/tui/`) — React terminal UI that spawns CLI as child process and communicates via JSON-RPC
+
+The CLI backend handles browser automation (Playwright), context collection, response parsing, and file application. TUI delegates all AI interaction to CLI via IPC.
+
+**Goal:** Create a VS Code extension (`apps/vscode/`) with a chat interface similar to the Claude VS Code extension. The extension will connect to the CLI backend via IPC (same pattern as TUI) and render messages with code blocks, tool results, etc.
+
+---
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                     VS Code Extension                        │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
+│  │   Chat UI   │  │   Stores    │  │   IPC Client        │  │
+│  │  (React)    │  │ (Zustand)   │  │ (JSON-RPC to CLI)   │  │
+│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
+└──────────────────────────┬──────────────────────────────────┘
+                           │ spawn / connect
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                     CLI Backend                             │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
+│  │ JSON-RPC    │  │  Browser    │  │   Parser / Applier  │  │
+│  │  Server     │  │ Controller  │  │                     │  │
+│  └─────────────┘  └─────────────┘  └─────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+                           │
+                           ▼
+┌─────────────────────────────────────────────────────────────┐
+│                  ChatGPT (Browser)                          │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Project Structure
+
+```
+apps/
+└── vscode/
+    ├── package.json          # VS Code extension manifest
+    ├── src/
+    │   ├── extension.ts      # Entry point, activates extension
+    │   ├── chat/
+    │   │   ├── ChatView.tsx  # Main chat panel component
+    │   │   ├── MessageList.tsx
+    │   │   ├── MessageInput.tsx
+    │   │   └── parts/        # Message part renderers
+    │   │       ├── TextPart.tsx
+    │   │       ├── CodePart.tsx
+    │   │       └── ToolPart.tsx
+    │   ├── stores/
+    │   │   ├── chat-store.ts
+    │   │   └── index.ts
+    │   ├── ipc/
+    │   │   ├── client.ts     # JSON-RPC client to CLI
+    │   │   └── protocol.ts
+    │   └── lib/
+    │       └── types.ts
+    └── webview/
+        └── App.tsx           # Webview entry point
+```
+
+---
+
+## IPC Protocol
+
+The VS Code extension communicates with CLI using JSON-RPC 2.0 over stdin/stdout (same as TUI):
+
+### Methods
+
+| Method | Params | Returns | Description |
+|--------|--------|---------|-------------|
+| `tools.list` | — | `ToolListItem[]` | List available tools |
+| `tools.call` | `{ name: string, args: Record<string, unknown> }` | `ToolCallResult` | Execute a tool |
+| `session.start` | `{ projectPath: string }` | `{ sessionId: string }` | Start a new session |
+| `session.send` | `{ sessionId: string, prompt: string }` | `StreamResponse` | Send prompt, stream response |
+
+### Types
+
+```typescript
+interface ToolListItem {
+  id: string;
+  description: string;
+}
+
+interface ToolCallResult {
+  title: string;
+  output: string;
+  metadata?: Record<string, unknown>;
+}
+
+interface StreamResponse {
+  type: 'text' | 'code' | 'tool' | 'done' | 'error';
+  content: string;
+}
+```
+
+---
+
+## Chat UI Components
+
+### ChatView (Main Panel)
+- Container for the entire chat interface
+- Registers with VS Code's ViewContainer
+- Manages webview lifecycle
+
+### MessageList
+- Renders array of `Message` objects
+- Auto-scrolls to bottom on new messages
+- Supports streaming updates
+
+### MessageInput
+- Multi-line text input (textarea)
+- Submit on Cmd/Ctrl+Enter
+- Disabled during streaming
+
+### Message Part Renderers
+- `TextPart` — Plain text with markdown rendering
+- `CodePart` — Syntax highlighted code blocks with copy button
+- `ToolPart` — Tool execution result with expand/collapse
+
+---
+
+## Data Flow
+
+1. **User types prompt** → MessageInput
+2. **User submits** (Cmd+Enter) → IPC client sends to CLI
+3. **CLI parses response** → streams parts via JSON-RPC
+4. **IPC client receives** → updates chat store
+5. **React re-renders** → MessageList shows new content
+6. **CLI applies file changes** → writes to disk
+7. **Tool result** → shown as ToolPart in message
+
+---
+
+## Implementation Steps
+
+1. **Scaffold VS Code extension** with `vscode.packagejson` and TypeScript config
+2. **Create IPC client** (adapt from TUI's `apps/tui/src/ipc/client.ts`)
+3. **Build chat UI** with React webview
+4. **Implement stores** with Zustand
+5. **Wire up message rendering** with part components
+6. **Add streaming support** for real-time updates
+7. **Test end-to-end** with CLI backend
+
+---
+
+## Tech Stack
+
+- **VS Code API** — Extension activation, ViewContainer, Webview
+- **React 18** — UI components
+- **Zustand** — State management
+- **@vscode/webview-ui-toolkit** — UI components (optional)
+- **TypeScript** — Throughout
+
+---
+
+## Key Differences from TUI
+
+| Aspect | TUI | VS Code |
+|--------|-----|---------|
+| Terminal | xterm.js + React DOM overlay | VS Code Webview API |
+| Input | Single-line REPL | Multi-line textarea |
+| Output | Stream to terminal | Render in chat panel |
+| File changes | CLI applies directly | CLI applies, VS Code shows diff |
+| Session | Ephemeral | Persisted in workspace |
+
+---
+
+## Not in Scope (v1)
+
+- Inline completions / ghost text
+- CMD+K quick prompt
+- Multiple chat sessions
+- Voice input
\ No newline at end of file
diff --git a/docs/superpowers/specs/2026-05-23-architecture.md b/docs/superpowers/specs/2026-05-23-architecture.md
new file mode 100644
index 00000000..83b3653e
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-23-architecture.md
@@ -0,0 +1,463 @@
+# FreeCode — Architecture Specification
+
+**Date:** 2026-05-23 (updated 2026-05-24)
+**Status:** Draft
+**Supersedes:** `2026-05-08-freecode-design.md`
+
+---
+
+## Overview
+
+FreeCode is a CLI tool that drives AI coding assistants (ChatGPT, Claude, Gemini) via browser automation to assist with coding tasks. It uses a **thin-client architecture**: multiple frontends (TUI, VS Code extension) delegate all intelligence to a shared CLI backend via JSON-RPC over stdin/stdout.
+
+The design is inspired by the agent patterns popularized by Anthropic's Claude Code: an **agent loop** that repeatedly calls tools, a **hook middleware** system for safety and observability, **memory compaction** for long sessions, **context loading** for project conventions, and **sub-agents** for parallel task distribution.
+
+---
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                              User                                           │
+└──────────────────┬──────────────────────────────────────────────────────────┘
+                   │
+         ┌─────────┴─────────┐
+         │                   │
+         ▼                   ▼
+┌─────────────────┐   ┌─────────────────┐
+│      TUI        │   │    VS Code      │
+│  (apps/tui)     │   │  (apps/vscode)  │
+│                 │   │                 │
+│ Pure UI shell   │   │ Pure UI shell   │
+│ - Renders TUI   │   │ - React webview │
+│ - IPC to CLI    │   │ - IPC to CLI    │
+│ - Zero business │   │ - Zero business │
+│   logic         │   │   logic         │
+└────────┬────────┘   └────────┬────────┘
+         │                     │
+         │   JSON-RPC          │
+         └────────┬─────────── ┘
+                  │ stdin/stdout
+                  ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                              CLI Backend (apps/cli)                         │
+│                                                                             │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐ │
+│  │    Agent    │  │   Browser   │  │   Context   │  │      Tools          │ │
+│  │    Loop     │  │  Controller │  │   Engine    │  │  read write edit    │ │
+│  │             │  │  +providers │  │  (file tree │  │  bash grep find     │ │
+│  │  - session  │  │             │  │  + collect) │  │                     │ │
+│  │  - LLM orch │  │  Playwright │  │             │  │                     │ │
+│  │  - streaming│  │  + CDP      │  │             │  │                     │ │
+│  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────────────┘ │
+│                                                                             │
+│  ┌─────────────────┐  ┌─────────────────────────────────────────────────┐   │
+│  │     Parser      │  │                  Applier                        │   │
+│  │  structured     │  │  - Diff generation                              │   │
+│  │  markdown       │  │  - File writing                                 │   │
+│  │  json           │  │  - Diff preview                                 │   │
+│  └─────────────────┘  └─────────────────────────────────────────────────┘   │
+│                                                                             │
+│                           JSON-RPC Server (stdin/stdout)                    │
+└─────────────────────────────────────────────────────────────────────────────┘
+                   │
+                   ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                         AI Provider (Browser)                               │
+│                   ChatGPT / Claude / Gemini                                 │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Agent Loop
+
+The core of FreeCode is an **agent loop**: instead of a single request-response, the agent cycles through decisions until the task is complete.
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                         Agent Loop (per turn)                               │
+│                                                                             │
+│   ┌───────┐    ┌─────────┐    ┌──────┐    ┌─────────┐                       │
+│   │ Model │───▶│ Decide  │───▶│ Tool │───▶│ Result  │                       │
+│   │       │◀───│         │◀───│ Runs │◀───│  comes  │                       │
+│   └───────┘    └─────────┘    └──────┘    └─────────┘                       │
+│       ▲                                                                     │
+│       │                                                                     │
+│   ┌───┴───┐                                                                 │
+│   │Memory │  ◀── Hooks intercept every tool call (before + after)           │
+│   └───────┘                                                                 │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+**Flow:**
+1. Model decides what tool to call (read, write, bash, grep, etc.)
+2. **Hooks intercept** — pre-check input, post-check output, can block/modify
+3. Tool executes (file system, shell, search)
+4. Result flows back through hooks → model
+5. Model decides next step or signals completion
+
+### Hooks System
+
+Every tool call passes through hooks before and after execution:
+
+- **Pre-hook:** Inspect/modify input, or **block dangerous commands** before execution
+- **Post-hook:** Inspect/modify output, log for observability
+
+```typescript
+interface Hook {
+  name: string;
+  preExecute?: (tool: ToolCall) => ToolCall | null;  // null = blocked
+  postExecute?: (tool: ToolCall, result: ToolResult) => ToolResult;
+}
+```
+
+This is how safety (block harmful commands) and observability (log every tool call) are built into the agent.
+
+### Memory System
+
+Tasks can run for hundreds of steps. To avoid hitting context limits:
+
+- **Session memory:** Full conversation history accumulates
+- **Compaction:** When history exceeds a threshold, it is summarized and replaced with a compressed version
+- **Working memory:** Agent maintains orientation across long tasks
+
+### Context Loading (Before Loop Starts)
+
+Before the agent loop begins, context is loaded from the project:
+
+1. **AGENTS.md** (priority) or **CLAUDE.md** — Project conventions, preferences, folder conventions, test preferences. AGENTS.md is checked first; if present it is used, otherwise CLAUDE.md is loaded as fallback.
+2. **Skills** — Reusable instruction sets for specific tasks (code review, documentation, etc.) from `.claude/skills/`
+
+```typescript
+interface PreLoopContext {
+  projectConventions: string;   // from AGENTS.md (priority) or CLAUDE.md
+  skills: Skill[];            // from .claude/skills/
+}
+```
+
+### Sub-Agents
+
+For complex tasks, the main agent can spawn **sub-agents** to handle pieces in parallel:
+
+```
+┌─────────────────┐
+│ Orchestrator    │
+│    Agent        │──▶ Sub-agent: Code review
+│                 ├──▶ Sub-agent: Test generation
+└────────┬────────┘   └──▶ Sub-agent: Security scan
+         │
+         ▼
+   [Results aggregated]
+```
+
+Sub-agents run their own mini-loop focused on one specific task. Spawning is just another tool call (`agent` tool) — the system stays consistent.
+
+---
+
+## Key Design Principle
+
+**TUI and VS Code are pure presentation layers. All business logic lives in CLI.**
+
+This means:
+- No browser automation code in TUI or VSCode
+- No file reading/writing in TUI or VSCode
+- No parsing logic in TUI or VSCode
+- No agent loop or session state in TUI or VSCode
+
+Both frontends connect to CLI via JSON-RPC and only render what CLI returns.
+
+---
+
+## Package Structure
+
+```
+freecode/
+├── packages/
+│   └── shared/                          # Shared types + IPC protocol only
+│       ├── src/
+│       │   ├── types.ts                 # Message, MessagePart, ToolResult,
+│       │   │                             # FileChange, SessionConfig
+│       │   ├── ipc/
+│       │   │   └── protocol.ts          # JsonRpcRequest, JsonRpcResponse,
+│       │   │                             # StreamResponse, method signatures
+│       │   └── index.ts
+│       └── package.json
+│
+├── apps/
+│   ├── cli/                             # ALL intelligence lives here
+│   │   └── src/
+│   │       ├── server.ts                # JSON-RPC stdin/stdout server
+│   │       │
+│   │       ├── agent/                   # Agent loop + session management
+│   │       │   ├── loop.ts              # Main agent turn loop
+│   │       │   ├── session.ts          # Session state + history
+│   │       │   └── index.ts
+│   │       │
+│   │       ├── browser/                 # Playwright + CDP + provider adapters
+│   │       │   ├── controller.ts        # PlaywrightBrowserController
+│   │       │   ├── providers/
+│   │       │   │   ├── index.ts         # Provider registry
+│   │       │   │   ├── chatgpt.ts       # ChatGPT adapter
+│   │       │   │   ├── claude.ts        # Claude adapter (future)
+│   │       │   │   └── types.ts         # PageAdapter, ProviderDefinition
+│   │       │   └── types.ts            # BrowserController interface
+│   │       │
+│   │       ├── context/                 # File tree + context collection
+│   │       │   ├── collector.ts         # Context collection engine
+│   │       │   ├── file-tree.ts         # File tree generation
+│   │       │   └── types.ts
+│   │       │
+│   │       ├── parser/                  # Response parsing
+│   │       │   ├── registry.ts          # Parser registry + chain
+│   │       │   ├── extractors/
+│   │       │   │   ├── index.ts
+│   │       │   │   ├── structured.ts    # FILE: path + code blocks
+│   │       │   │   ├── markdown.ts      # Markdown code blocks
+│   │       │   │   └── json.ts          # JSON { changes: [] }
+│   │       │   └── types.ts
+│   │       │
+│   │       ├── tools/                   # Tool definitions + execution
+│   │       │   ├── index.ts             # Tool registry
+│   │       │   ├── types.ts            # ToolDef, ToolContext, ToolResult
+│   │       │   ├── read.ts
+│   │       │   ├── write.ts
+│   │       │   ├── edit.ts
+│   │       │   ├── bash.ts
+│   │       │   ├── grep.ts
+│   │       │   ├── find.ts
+│   │       │   └── glob.ts
+│   │       │
+│   │       └── applier/                 # File diff + write
+│   │           ├── index.ts             # Diff + apply logic
+│   │           ├── differ.ts            # Generate diffs
+│   │           └── writer.ts            # File system operations
+│   │
+│   ├── tui/                             # Pure UI shell — no business logic
+│   │   └── src/
+│   │       ├── index.ts                # Entry point: mounts TUI, connects IPC
+│   │       ├── commands/               # TUI-specific commands (model select, etc.)
+│   │       │   ├── index.ts
+│   │       │   └── built-in.ts
+│   │       ├── ipc/
+│   │       │   └── client.ts           # JSON-RPC client to CLI
+│   │       └── assets/
+│   │           └── logo.ts
+│   │
+│   └── vscode/                          # Pure UI shell — no business logic
+│       └── src/
+│           ├── extension.ts            # VS Code extension entry point
+│           ├── chat/
+│           │   ├── ChatView.tsx        # Main webview panel
+│           │   ├── MessageList.tsx
+│           │   ├── MessageInput.tsx
+│           │   └── parts/              # Message part renderers
+│           │       ├── TextPart.tsx
+│           │       ├── CodePart.tsx
+│           │       └── ToolPart.tsx
+│           ├── stores/
+│           │   └── chat-store.ts       # UI state only (messages, status)
+│           └── ipc/
+│               └── client.ts           # JSON-RPC client to CLI
+```
+
+---
+
+## IPC Protocol
+
+CLI exposes a JSON-RPC 2.0 interface over stdin/stdout. Both TUI and VSCode use the same protocol.
+
+### Request/Response
+
+```typescript
+interface JsonRpcRequest {
+  jsonrpc: "2.0";
+  id: number | string;
+  method: string;
+  params?: Record<string, unknown>;
+}
+
+interface JsonRpcResponse {
+  jsonrpc: "2.0";
+  id: number | string;
+  result?: unknown;
+  error?: { code: number; message: string; data?: unknown };
+}
+```
+
+### Methods
+
+| Method | Params | Returns | Description |
+|--------|--------|---------|-------------|
+| `tools.list` | — | `ToolListItem[]` | List available tools |
+| `tools.call` | `{ name: string, args: Record<string, unknown> }` | `ToolResult` | Execute a tool |
+| `session.start` | `{ projectPath: string, provider?: string }` | `{ sessionId: string }` | Start a new session |
+| `session.send` | `{ sessionId: string, message: string }` | `StreamResponse` (streaming) | Send a message |
+| `session.stop` | `{ sessionId: string }` | `void` | Abort current turn |
+| `providers.list` | — | `ProviderInfo[]` | List available AI providers |
+
+### Streaming Response
+
+```typescript
+interface StreamResponse {
+  type: "text" | "code" | "tool" | "done" | "error";
+  content: string;
+  toolName?: string;      // when type === "tool"
+  toolArgs?: unknown;     // when type === "tool"
+  toolResult?: string;   // when type === "tool" (after execution)
+}
+```
+
+### Types (from `packages/shared`)
+
+```typescript
+// packages/shared/src/types.ts
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  parts: MessagePart[];
+  timestamp: number;
+}
+
+export type MessagePart =
+  | { type: "text"; content: string }
+  | { type: "code"; language: string; content: string }
+  | { type: "tool"; tool: { name: string; args: Record<string, unknown> }; result?: string };
+
+export interface ToolDef {
+  id: string;
+  description: string;
+  parameters: JsonSchema;
+}
+
+export interface ToolResult {
+  title: string;
+  output: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface FileChange {
+  path: string;
+  action: "create" | "update" | "delete";
+  content?: string;
+  diff?: string;
+}
+
+export interface ParsedResponse {
+  success: boolean;
+  response?: {
+    summary: string;
+    changes: FileChange[];
+    raw: string;
+    parserUsed: string;
+  };
+  error?: string;
+}
+```
+
+---
+
+## Boundary: What Lives Where
+
+| Concern | CLI | TUI | VSCode |
+|---------|-----|-----|--------|
+| Browser automation (Playwright/CDP) | ✅ | ❌ | ❌ |
+| Provider adapters (ChatGPT, Claude) | ✅ | ❌ | ❌ |
+| Agent loop + session management | ✅ | ❌ | ❌ |
+| Context collection (file tree) | ✅ | ❌ | ❌ |
+| Response parsing | ✅ | ❌ | ❌ |
+| Tool execution | ✅ | ❌ | ❌ |
+| File diff + writing | ✅ | ❌ | ❌ |
+| TUI rendering (pi-tui) | ❌ | ✅ | ❌ |
+| VS Code webview | ❌ | ❌ | ✅ |
+| UI state (messages, status, theme) | ❌ | ✅ (Zustand) | ✅ (Zustand) |
+| IPC client | ❌ | ✅ | ✅ |
+
+---
+
+## Key Design Decisions
+
+### 1. Thin Client Architecture
+
+**Decision:** TUI and VSCode are pure presentation layers. All intelligence is in CLI.
+
+**Rationale:** Avoids code duplication across frontends. Adding a new provider, parser, or tool only requires changing one place.
+
+**Alternatives considered:**
+- TUI owns business logic, VSCode delegates to it (couples TUI to backend)
+- Each frontend re-implements everything (duplication, maintenance burden)
+
+### 2. Long-Running CLI Daemon
+
+**Decision:** CLI stays alive between turns, maintaining browser connection and session state.
+
+**Rationale:** Starting a new browser + logging in per prompt is slow (5-15 seconds). A persistent connection enables sub-second response for subsequent turns.
+
+**Trade-off:** If CLI crashes, session is lost. Acceptable for MVP.
+
+### 3. Two-Phase Context Collection
+
+**Decision:** Before sending a prompt, CLI first asks the LLM which files it needs, then reads only those files.
+
+**Rationale:** Token-efficient. Only sends relevant context. Allows LLM to reason about the full codebase before diving into specifics.
+
+**Sequence:**
+1. Send prompt + file tree to LLM → LLM returns list of needed files
+2. CLI reads those files
+3. Send files + prompt to LLM → LLM returns structured response
+
+### 4. Format-Agnostic Parser
+
+**Decision:** Parser tries multiple strategies: structured (FILE: path...), markdown, JSON — in chain until one succeeds.
+
+**Rationale:** LLMs are inconsistent in their output format. No single parser handles all cases reliably.
+
+### 5. Diff Preview Before Apply
+
+**Decision:** File changes are shown as a diff to the user for approval before writing.
+
+**Rationale:** Prevents accidental data loss. Builds trust. CLI shows diff, user approves or rejects.
+
+---
+
+## Design Pattern Origins
+
+Every pattern in FreeCode has roots in familiar systems:
+
+| FreeCode Pattern | Analogous System | Why It Matters |
+|-----------------|------------------|----------------|
+| Agent loop | Worker processing a task queue | Model drives workflow decisions |
+| Tools | Service interface layer | Separation of thinking vs doing |
+| Hooks | Web middleware | Safety + observability on every call |
+| Memory compaction | Log rotation | Handles unbounded session length |
+| Sub-agents | Worker nodes / map-reduce | Parallel distributed processing |
+| CLAUDE.md | Project configuration | Agent understands your project |
+| Skills | Reusable scripts / templates | Pre-packaged behaviors |
+
+None of this is novel. The innovation is applying these patterns to an agent that drives browser automation for coding tasks.
+
+---
+
+## Deferred Items
+
+- **MCP server integration** — Expose tools via Model Context Protocol
+- **Storage layer** — Persistent session history across restarts
+- **Rust TUI** — Higher-fidelity terminal rendering (only if performance demands)
+- **Sub-agent implementation** — Parallel task distribution for complex tasks
+- **Memory compaction** — Automatic summarization of long conversation histories
+- **Hook middleware** — Pluggable pre/post tool execution hooks
+
+---
+
+## Success Criteria (Architecture v1)
+
+- [ ] TUI renders correctly using pi-tui, sends/receives JSON-RPC
+- [ ] VSCode extension renders correctly in webview, sends/receives JSON-RPC
+- [ ] CLI implements all methods in IPC protocol
+- [ ] Browser controller connects via CDP to existing Chrome
+- [ ] Provider adapters are swappable (ChatGPT, etc.)
+- [ ] Parser handles structured, markdown, and JSON formats
+- [ ] Tools (read, write, bash, grep, find) execute correctly
+- [ ] Context engine generates file tree and collects files
+- [ ] Applier shows diff preview before writing
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..8dca560e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,150 @@
+{
+  "name": "freecode",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "freecode",
+      "devDependencies": {
+        "prettier": "^3.7.4",
+        "turbo": "^2.9.9",
+        "typescript": "5.9.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@turbo/darwin-64": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/@turbo/darwin-64/-/darwin-64-2.9.14.tgz",
+      "integrity": "sha512-t7QiPflaEyBE4oayeZtSmu4mEfjgIrcNlNNl1z1dmIVPqEdtA7+CfTf8d7KXsOGPh6aNgWjKxyvQg9uGfDQF+A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@turbo/darwin-arm64": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/@turbo/darwin-arm64/-/darwin-arm64-2.9.14.tgz",
+      "integrity": "sha512-d23147mC9BsCPA9mJ0h/ubcpbRgcJBXbcG3+Vq7YLhjz3IXuvQsJ1UXH8f4MD76ZjJ4m/E4aRdJV+MW88CDfbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@turbo/linux-64": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/@turbo/linux-64/-/linux-64-2.9.14.tgz",
+      "integrity": "sha512-P3ZKB5tuUDdDQWuAsACGUR1qv9W7BNWxdxqVJ0kZNuNNPRaVYTPPikLcp79+GiEcW3npsR+KyP38lnQiBc5aSA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@turbo/linux-arm64": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/@turbo/linux-arm64/-/linux-arm64-2.9.14.tgz",
+      "integrity": "sha512-ZRTlzcUMrrPv9ZuDzRF9n60Ym13bKeG9jDB8WjxyLhWNzV+AJQN+zdpIk3NJYf2zQsGUm1mNar2P0elRzLw25g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@turbo/windows-64": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/@turbo/windows-64/-/windows-64-2.9.14.tgz",
+      "integrity": "sha512-exanwN6sIduZwykYeiTQj8kCmOhazP5WOz3bvXMcYtjhL6Z3iRWLewKrXCBq0bqwSP3iBMb/AerRCnHI4lx46A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@turbo/windows-arm64": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/@turbo/windows-arm64/-/windows-arm64-2.9.14.tgz",
+      "integrity": "sha512-fVdCsnmYoKICsycbWuuGp6Jvi51/3G/UluFWuAUCvR8PIW5IJkAk5BM9UF8PSm0Q2IphWHFZjYEgjHsh3B9y/g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/prettier": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/turbo": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/turbo/-/turbo-2.9.14.tgz",
+      "integrity": "sha512-BQqXRr4UoWI3UPFrtznCLykYHxwxWh53iCB57x092jPMjIlW1wnm3N895g5irpiXmnxUhREBB0n6+y8BHhs4nw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "turbo": "bin/turbo"
+      },
+      "optionalDependencies": {
+        "@turbo/darwin-64": "2.9.14",
+        "@turbo/darwin-arm64": "2.9.14",
+        "@turbo/linux-64": "2.9.14",
+        "@turbo/linux-arm64": "2.9.14",
+        "@turbo/windows-64": "2.9.14",
+        "@turbo/windows-arm64": "2.9.14"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}
diff --git a/packages/shared/package.json b/packages/shared/package.json
new file mode 100644
index 00000000..38ca0035
--- /dev/null
+++ b/packages/shared/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@freecode/shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./ipc": {
+      "types": "./dist/ipc/protocol.d.ts",
+      "import": "./dist/ipc/protocol.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "typescript": "5.9.2"
+  }
+}
\ No newline at end of file
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
new file mode 100644
index 00000000..255340d6
--- /dev/null
+++ b/packages/shared/src/index.ts
@@ -0,0 +1,33 @@
+// Shared types — re-exported explicitly to avoid empty export * issues with isolatedModules
+
+// Types
+export type {
+  Message,
+  MessagePart,
+  ToolContext,
+  ToolResult,
+  ToolDef,
+  ToolRegistry,
+  JsonSchema,
+  ToolListItem,
+  FileChange,
+  FileChangeAction,
+  DiffResult,
+  ParsedResponse,
+  ProviderInfo,
+  ProviderDefinition,
+  SessionConfig,
+  SessionInfo,
+} from "./types.js";
+
+// IPC Protocol
+export type {
+  JsonRpcRequest,
+  JsonRpcResponse,
+  StreamResponse,
+  MethodName,
+  MethodParams,
+  MethodResult,
+} from "./ipc/protocol.js";
+
+export { METHODS } from "./ipc/protocol.js";
\ No newline at end of file
diff --git a/packages/shared/src/ipc/protocol.ts b/packages/shared/src/ipc/protocol.ts
new file mode 100644
index 00000000..9ac73d15
--- /dev/null
+++ b/packages/shared/src/ipc/protocol.ts
@@ -0,0 +1,63 @@
+// =============================================================================
+// JSON-RPC Types
+// =============================================================================
+
+export interface JsonRpcRequest {
+  jsonrpc: "2.0";
+  id: number | string;
+  method: string;
+  params?: Record<string, unknown>;
+}
+
+export interface JsonRpcResponse {
+  jsonrpc: "2.0";
+  id: number | string;
+  result?: unknown;
+  error?: { code: number; message: string; data?: unknown };
+}
+
+// =============================================================================
+// Streaming Response
+// =============================================================================
+
+export type StreamResponse =
+  | { type: "text"; content: string; toolName?: undefined; toolArgs?: undefined; toolResult?: undefined }
+  | { type: "code"; content: string; toolName?: undefined; toolArgs?: undefined; toolResult?: undefined }
+  | { type: "tool"; content: string; toolName: string; toolArgs: unknown; toolResult?: string }
+  | { type: "done"; content: string; toolName?: undefined; toolArgs?: undefined; toolResult?: undefined }
+  | { type: "error"; content: string; toolName?: undefined; toolArgs?: undefined; toolResult?: undefined };
+
+// =============================================================================
+// IPC Method Signatures
+// =============================================================================
+
+export const METHODS = {
+  "tools.list": {
+    params: undefined,
+    result: [] as import("../types.js").ToolListItem[],
+  },
+  "tools.call": {
+    params: { name: "", args: {} as Record<string, unknown> },
+    result: {} as import("../types.js").ToolResult,
+  },
+  "session.start": {
+    params: { projectPath: "", provider: "" },
+    result: { sessionId: "" },
+  },
+  "session.send": {
+    params: { sessionId: "", message: "" },
+    result: {} as StreamResponse,
+  },
+  "session.stop": {
+    params: { sessionId: "" },
+    result: undefined as void,
+  },
+  "providers.list": {
+    params: undefined,
+    result: [] as import("../types.js").ProviderInfo[],
+  },
+} as const;
+
+export type MethodName = keyof typeof METHODS;
+export type MethodParams<M extends MethodName> = (typeof METHODS)[M]["params"];
+export type MethodResult<M extends MethodName> = (typeof METHODS)[M]["result"];
\ No newline at end of file
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
new file mode 100644
index 00000000..4daba7a4
--- /dev/null
+++ b/packages/shared/src/types.ts
@@ -0,0 +1,125 @@
+// =============================================================================
+// Core Domain Types
+// =============================================================================
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  parts: MessagePart[];
+  timestamp: number;
+}
+
+export type MessagePart =
+  | { type: "text"; content: string }
+  | { type: "code"; language: string; content: string }
+  | {
+      type: "tool";
+      tool: { name: string; args: Record<string, unknown> };
+      result?: string;
+    };
+
+// =============================================================================
+// Tool Types
+// =============================================================================
+
+export interface ToolContext {
+  cwd: string;
+  abort?: AbortSignal;
+}
+
+export interface ToolResult {
+  title: string;
+  output: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface ToolDef<P = unknown, R extends ToolResult = ToolResult> {
+  id: string;
+  description: string;
+  parameters: JsonSchema;
+  execute: (params: P, ctx: ToolContext) => Promise<R>;
+}
+
+export type ToolRegistry = Record<string, ToolDef>;
+
+export interface JsonSchema {
+  type: string;
+  properties?: Record<string, { description?: string; type?: string }>;
+  required?: string[];
+}
+
+export interface ToolListItem {
+  id: string;
+  description: string;
+}
+
+// =============================================================================
+// File Change Types
+// =============================================================================
+
+export type FileChangeAction = "create" | "update" | "delete";
+
+export interface FileChange {
+  path: string;
+  action: FileChangeAction;
+  content?: string;
+  diff?: string;
+}
+
+export interface DiffResult {
+  path: string;
+  action: FileChangeAction;
+  diff: string;
+  success: boolean;
+  error?: string;
+}
+
+// =============================================================================
+// Parser Types
+// =============================================================================
+
+export interface ParsedResponse {
+  success: boolean;
+  response?: {
+    summary: string;
+    changes: FileChange[];
+    raw: string;
+    parserUsed: string;
+  };
+  error?: string;
+}
+
+// =============================================================================
+// Provider Types
+// =============================================================================
+
+export interface ProviderInfo {
+  id: string;
+  name: string;
+  description: string;
+}
+
+export interface ProviderDefinition {
+  id: string;
+  name: string;
+  adapter: unknown;
+  config: {
+    url: string;
+  };
+}
+
+// =============================================================================
+// Session Types
+// =============================================================================
+
+export interface SessionConfig {
+  projectPath: string;
+  provider?: string;
+}
+
+export interface SessionInfo {
+  id: string;
+  projectPath: string;
+  provider: string;
+  startedAt: number;
+}
\ No newline at end of file
diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json
new file mode 100644
index 00000000..e3e82ad1
--- /dev/null
+++ b/packages/shared/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../packages/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4a8fd0dc..47b4fec8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,25 @@ importers:
         specifier: 5.9.2
         version: 5.9.2
 
+  apps/cli:
+    dependencies:
+      '@freecode/shared':
+        specifier: workspace:*
+        version: link:../../packages/shared
+      playwright:
+        specifier: ^1.42.0
+        version: 1.59.1
+    devDependencies:
+      '@types/node':
+        specifier: ^22.15.3
+        version: 22.15.3
+      tsx:
+        specifier: ^4.0.0
+        version: 4.21.0
+      typescript:
+        specifier: ^5.7.0
+        version: 5.9.2
+
   apps/docs:
     dependencies:
       '@repo/ui':
@@ -60,6 +79,9 @@ importers:
       '@earendil-works/pi-tui':
         specifier: ^0.74.0
         version: 0.74.0
+      '@freecode/shared':
+        specifier: workspace:*
+        version: link:../../packages/shared
       chalk:
         specifier: ^5.5.0
         version: 5.6.2
@@ -77,6 +99,40 @@ importers:
         specifier: ^5.7.0
         version: 5.9.2
 
+  apps/vscode:
+    dependencies:
+      '@freecode/shared':
+        specifier: workspace:*
+        version: link:../../packages/shared
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+      zustand:
+        specifier: ^4.5.0
+        version: 4.5.7(@types/react@18.3.29)(react@18.3.1)
+    devDependencies:
+      '@types/node':
+        specifier: ^20.0.0
+        version: 20.19.41
+      '@types/react':
+        specifier: ^18.2.0
+        version: 18.3.29
+      '@types/react-dom':
+        specifier: ^18.2.0
+        version: 18.3.7(@types/react@18.3.29)
+      '@types/vscode':
+        specifier: ^1.88.0
+        version: 1.120.0
+      esbuild:
+        specifier: ^0.28.0
+        version: 0.28.0
+      typescript:
+        specifier: ^5.4.0
+        version: 5.9.2
+
   apps/web:
     dependencies:
       '@repo/ui':
@@ -150,6 +206,12 @@ importers:
         specifier: ^8.50.0
         version: 8.50.0(eslint@9.39.1)(typescript@5.9.2)
 
+  packages/shared:
+    devDependencies:
+      typescript:
+        specifier: 5.9.2
+        version: 5.9.2
+
   packages/typescript-config: {}
 
   packages/ui:
@@ -198,156 +260,312 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.28.0':
+    resolution: {integrity: sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.27.7':
     resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.28.0':
+    resolution: {integrity: sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.27.7':
     resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.28.0':
+    resolution: {integrity: sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.27.7':
     resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.28.0':
+    resolution: {integrity: sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.27.7':
     resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.28.0':
+    resolution: {integrity: sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.27.7':
     resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.28.0':
+    resolution: {integrity: sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.27.7':
     resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.28.0':
+    resolution: {integrity: sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.27.7':
     resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.28.0':
+    resolution: {integrity: sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.27.7':
     resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.28.0':
+    resolution: {integrity: sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.27.7':
     resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.28.0':
+    resolution: {integrity: sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.27.7':
     resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.28.0':
+    resolution: {integrity: sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.27.7':
     resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.28.0':
+    resolution: {integrity: sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.27.7':
     resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.28.0':
+    resolution: {integrity: sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.27.7':
     resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.28.0':
+    resolution: {integrity: sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.27.7':
     resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.28.0':
+    resolution: {integrity: sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.27.7':
     resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.28.0':
+    resolution: {integrity: sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.27.7':
     resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.28.0':
+    resolution: {integrity: sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-arm64@0.27.7':
     resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-arm64@0.28.0':
+    resolution: {integrity: sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.27.7':
     resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.28.0':
+    resolution: {integrity: sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.27.7':
     resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.28.0':
+    resolution: {integrity: sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.27.7':
     resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.28.0':
+    resolution: {integrity: sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openharmony-arm64@0.27.7':
     resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/openharmony-arm64@0.28.0':
+    resolution: {integrity: sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@esbuild/sunos-x64@0.27.7':
     resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.28.0':
+    resolution: {integrity: sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.27.7':
     resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.28.0':
+    resolution: {integrity: sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.27.7':
     resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.28.0':
+    resolution: {integrity: sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.27.7':
     resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.28.0':
+    resolution: {integrity: sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.9.0':
     resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -647,17 +865,34 @@ packages:
   '@types/mime-types@2.1.4':
     resolution: {integrity: sha512-lfU4b34HOri+kAY5UheuFMWPDOI+OPceBSHZKp69gEyTL/mmJ4cnU6Y/rlme3UL3GyOn6Y42hyIEw0/q8sWx5w==}
 
+  '@types/node@20.19.41':
+    resolution: {integrity: sha512-ECymXOukMnOoVkC2bb1Vc/w/836DXncOg5m8Xj1RH7xSHZJWNYY6Zh7EH477vcnD5egKNNfy2RpNOmuChhFPgQ==}
+
   '@types/node@22.15.3':
     resolution: {integrity: sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==}
 
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
   '@types/react-dom@19.2.2':
     resolution: {integrity: sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==}
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react@18.3.29':
+    resolution: {integrity: sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==}
+
   '@types/react@19.2.2':
     resolution: {integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==}
 
+  '@types/vscode@1.120.0':
+    resolution: {integrity: sha512-feaT4Rst+FkTch5zz/ZbNCxoIvo55YU80Be2kiL7OJcod4+CUYf2lUBPdIJzozNnSEMq1VRTGrWEcCGFB3fBmA==}
+
   '@typescript-eslint/eslint-plugin@8.50.0':
     resolution: {integrity: sha512-O7QnmOXYKVtPrfYzMolrCTfkezCJS9+ljLdKW/+DCvRsc3UAz+sbH6Xcsv7p30+0OwUbeWfUDAQE0vpabZ3QLg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -836,6 +1071,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -921,6 +1159,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.28.0:
+    resolution: {integrity: sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1043,6 +1286,11 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1296,6 +1544,7 @@ packages:
 
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
 
   marked@15.0.12:
     resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
@@ -1430,6 +1679,16 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  playwright-core@1.59.1:
+    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.59.1:
+    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -1456,6 +1715,11 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
   react-dom@19.2.0:
     resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
     peerDependencies:
@@ -1464,6 +1728,10 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   react@19.2.0:
     resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
     engines: {node: '>=0.10.0'}
@@ -1505,6 +1773,9 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -1664,6 +1935,7 @@ packages:
   typescript@5.9.2:
     resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
     engines: {node: '>=14.17'}
+    hasBin: true
 
   unbox-primitive@1.1.0:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
@@ -1675,6 +1947,11 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -1703,6 +1980,21 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
 snapshots:
 
   '@earendil-works/pi-tui@0.74.0':
@@ -1723,81 +2015,159 @@ snapshots:
   '@esbuild/aix-ppc64@0.27.7':
     optional: true
 
+  '@esbuild/aix-ppc64@0.28.0':
+    optional: true
+
   '@esbuild/android-arm64@0.27.7':
     optional: true
 
+  '@esbuild/android-arm64@0.28.0':
+    optional: true
+
   '@esbuild/android-arm@0.27.7':
     optional: true
 
+  '@esbuild/android-arm@0.28.0':
+    optional: true
+
   '@esbuild/android-x64@0.27.7':
     optional: true
 
+  '@esbuild/android-x64@0.28.0':
+    optional: true
+
   '@esbuild/darwin-arm64@0.27.7':
     optional: true
 
+  '@esbuild/darwin-arm64@0.28.0':
+    optional: true
+
   '@esbuild/darwin-x64@0.27.7':
     optional: true
 
+  '@esbuild/darwin-x64@0.28.0':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.27.7':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.28.0':
+    optional: true
+
   '@esbuild/freebsd-x64@0.27.7':
     optional: true
 
+  '@esbuild/freebsd-x64@0.28.0':
+    optional: true
+
   '@esbuild/linux-arm64@0.27.7':
     optional: true
 
+  '@esbuild/linux-arm64@0.28.0':
+    optional: true
+
   '@esbuild/linux-arm@0.27.7':
     optional: true
 
+  '@esbuild/linux-arm@0.28.0':
+    optional: true
+
   '@esbuild/linux-ia32@0.27.7':
     optional: true
 
+  '@esbuild/linux-ia32@0.28.0':
+    optional: true
+
   '@esbuild/linux-loong64@0.27.7':
     optional: true
 
+  '@esbuild/linux-loong64@0.28.0':
+    optional: true
+
   '@esbuild/linux-mips64el@0.27.7':
     optional: true
 
+  '@esbuild/linux-mips64el@0.28.0':
+    optional: true
+
   '@esbuild/linux-ppc64@0.27.7':
     optional: true
 
+  '@esbuild/linux-ppc64@0.28.0':
+    optional: true
+
   '@esbuild/linux-riscv64@0.27.7':
     optional: true
 
+  '@esbuild/linux-riscv64@0.28.0':
+    optional: true
+
   '@esbuild/linux-s390x@0.27.7':
     optional: true
 
+  '@esbuild/linux-s390x@0.28.0':
+    optional: true
+
   '@esbuild/linux-x64@0.27.7':
     optional: true
 
+  '@esbuild/linux-x64@0.28.0':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.27.7':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.28.0':
+    optional: true
+
   '@esbuild/netbsd-x64@0.27.7':
     optional: true
 
+  '@esbuild/netbsd-x64@0.28.0':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.27.7':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.28.0':
+    optional: true
+
   '@esbuild/openbsd-x64@0.27.7':
     optional: true
 
+  '@esbuild/openbsd-x64@0.28.0':
+    optional: true
+
   '@esbuild/openharmony-arm64@0.27.7':
     optional: true
 
+  '@esbuild/openharmony-arm64@0.28.0':
+    optional: true
+
   '@esbuild/sunos-x64@0.27.7':
     optional: true
 
+  '@esbuild/sunos-x64@0.28.0':
+    optional: true
+
   '@esbuild/win32-arm64@0.27.7':
     optional: true
 
+  '@esbuild/win32-arm64@0.28.0':
+    optional: true
+
   '@esbuild/win32-ia32@0.27.7':
     optional: true
 
+  '@esbuild/win32-ia32@0.28.0':
+    optional: true
+
   '@esbuild/win32-x64@0.27.7':
     optional: true
 
+  '@esbuild/win32-x64@0.28.0':
+    optional: true
+
   '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1)':
     dependencies:
       eslint: 9.39.1
@@ -2022,18 +2392,35 @@ snapshots:
 
   '@types/mime-types@2.1.4': {}
 
+  '@types/node@20.19.41':
+    dependencies:
+      undici-types: 6.21.0
+
   '@types/node@22.15.3':
     dependencies:
       undici-types: 6.21.0
 
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-dom@18.3.7(@types/react@18.3.29)':
+    dependencies:
+      '@types/react': 18.3.29
+
   '@types/react-dom@19.2.2(@types/react@19.2.2)':
     dependencies:
       '@types/react': 19.2.2
 
+  '@types/react@18.3.29':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.2.3
+
   '@types/react@19.2.2':
     dependencies:
       csstype: 3.1.3
 
+  '@types/vscode@1.120.0': {}
+
   '@typescript-eslint/eslint-plugin@8.50.0(@typescript-eslint/parser@8.50.0(eslint@9.39.1)(typescript@5.9.2))(eslint@9.39.1)(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -2270,6 +2657,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  csstype@3.2.3: {}
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -2451,6 +2840,35 @@ snapshots:
       '@esbuild/win32-ia32': 0.27.7
       '@esbuild/win32-x64': 0.27.7
 
+  esbuild@0.28.0:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.28.0
+      '@esbuild/android-arm': 0.28.0
+      '@esbuild/android-arm64': 0.28.0
+      '@esbuild/android-x64': 0.28.0
+      '@esbuild/darwin-arm64': 0.28.0
+      '@esbuild/darwin-x64': 0.28.0
+      '@esbuild/freebsd-arm64': 0.28.0
+      '@esbuild/freebsd-x64': 0.28.0
+      '@esbuild/linux-arm': 0.28.0
+      '@esbuild/linux-arm64': 0.28.0
+      '@esbuild/linux-ia32': 0.28.0
+      '@esbuild/linux-loong64': 0.28.0
+      '@esbuild/linux-mips64el': 0.28.0
+      '@esbuild/linux-ppc64': 0.28.0
+      '@esbuild/linux-riscv64': 0.28.0
+      '@esbuild/linux-s390x': 0.28.0
+      '@esbuild/linux-x64': 0.28.0
+      '@esbuild/netbsd-arm64': 0.28.0
+      '@esbuild/netbsd-x64': 0.28.0
+      '@esbuild/openbsd-arm64': 0.28.0
+      '@esbuild/openbsd-x64': 0.28.0
+      '@esbuild/openharmony-arm64': 0.28.0
+      '@esbuild/sunos-x64': 0.28.0
+      '@esbuild/win32-arm64': 0.28.0
+      '@esbuild/win32-ia32': 0.28.0
+      '@esbuild/win32-x64': 0.28.0
+
   escape-string-regexp@4.0.0: {}
 
   eslint-config-prettier@10.1.1(eslint@9.39.1):
@@ -2603,6 +3021,9 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -2998,6 +3419,14 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  playwright-core@1.59.1: {}
+
+  playwright@1.59.1:
+    dependencies:
+      playwright-core: 1.59.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   possible-typed-array-names@1.1.0: {}
 
   postcss@8.4.31:
@@ -3020,6 +3449,12 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
   react-dom@19.2.0(react@19.2.0):
     dependencies:
       react: 19.2.0
@@ -3027,6 +3462,10 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
   react@19.2.0: {}
 
   reflect.getprototypeof@1.0.10:
@@ -3084,6 +3523,10 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+
   scheduler@0.27.0: {}
 
   semver@6.3.1: {}
@@ -3336,6 +3779,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-sync-external-store@1.6.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -3384,3 +3831,10 @@ snapshots:
   word-wrap@1.2.5: {}
 
   yocto-queue@0.1.0: {}
+
+  zustand@4.5.7(@types/react@18.3.29)(react@18.3.1):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.29
+      react: 18.3.1
diff --git a/turbo.json b/turbo.json
index 452ba54c..3a820e43 100644
--- a/turbo.json
+++ b/turbo.json
@@ -5,7 +5,7 @@
     "build": {
       "dependsOn": ["^build"],
       "inputs": ["$TURBO_DEFAULT$", ".env*"],
-      "outputs": [".next/**", "!.next/cache/**"]
+      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
     },
     "lint": {
       "dependsOn": ["^lint"]