Deploy from f861358f

Dockerfile

@@ -0,0 +1,92 @@
+# =============================================================================
+# GitPilot - Hugging Face Spaces Dockerfile
+# =============================================================================
+# Follows the official HF Docker Spaces pattern:
+#   https://huggingface.co/docs/hub/spaces-sdks-docker
+#
+# Architecture:
+#   React UI (Vite build) -> FastAPI backend -> OllaBridge Cloud / any LLM
+# =============================================================================
+
+# -- Stage 1: Build React frontend -------------------------------------------
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /build
+
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci --production=false
+
+COPY frontend/ ./
+RUN npm run build
+
+# -- Stage 2: Python runtime -------------------------------------------------
+FROM python:3.12-slim
+
+# System deps needed at runtime
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        git curl ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+
+# HF Spaces runs containers as UID 1000 — create user early (official pattern)
+RUN useradd -m -u 1000 user
+
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONUNBUFFERED=1 \
+    GITPILOT_PROVIDER=ollabridge \
+    OLLABRIDGE_BASE_URL=https://ruslanmv-ollabridge.hf.space \
+    GITPILOT_OLLABRIDGE_MODEL=qwen2.5:1.5b \
+    CORS_ORIGINS="*" \
+    GITPILOT_CONFIG_DIR=/tmp/gitpilot
+
+WORKDIR $HOME/app
+
+# ── Install Python dependencies BEFORE copying source code ──────────
+# This ensures pip install layers are cached even when code changes.
+COPY --chown=user pyproject.toml README.md ./
+
+# Step 1: lightweight deps (cached layer)
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir \
+        "fastapi>=0.111.0" \
+        "uvicorn[standard]>=0.30.0" \
+        "httpx>=0.27.0" \
+        "python-dotenv>=1.1.0,<1.2.0" \
+        "typer>=0.12.0,<0.24.0" \
+        "pydantic>=2.7.0,<2.12.0" \
+        "rich>=13.0.0" \
+        "pyjwt[crypto]>=2.8.0"
+
+# Step 2: heavy ML/agent deps (separate layer for better caching)
+RUN pip install --no-cache-dir \
+        "litellm" \
+        "crewai[anthropic]>=0.76.9" \
+        "crewai-tools>=0.13.4" \
+        "anthropic>=0.39.0" \
+        "ibm-watsonx-ai>=1.1.0" \
+        "langchain-ibm>=0.3.0"
+
+# ── Now copy source code (cache-busting only affects layers below) ──
+COPY --chown=user gitpilot ./gitpilot
+
+# Copy built frontend into gitpilot/web/
+COPY --chown=user --from=frontend-builder /build/dist/ ./gitpilot/web/
+
+# Step 3: editable install of gitpilot itself (deps already satisfied)
+RUN pip install --no-cache-dir --no-deps -e .
+
+EXPOSE 7860
+
+# NOTE: Do NOT add a Docker HEALTHCHECK here.
+# HF Spaces has its own HTTP probe on app_port (7860) and ignores the
+# Docker HEALTHCHECK directive.
+
+# Direct CMD — no shell script, fewer failure points.
+CMD ["python", "-m", "uvicorn", "gitpilot.api:app", \
+     "--host", "0.0.0.0", \
+     "--port", "7860", \
+     "--workers", "2", \
+     "--limit-concurrency", "10", \
+     "--timeout-keep-alive", "120"]

README.md

@@ -0,0 +1,80 @@
+---
+title: GitPilot
+emoji: "\U0001F916"
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+startup_duration_timeout: 5m
+pinned: true
+license: mit
+short_description: Enterprise AI Coding Assistant for GitHub Repositories
+---
+
+# GitPilot — Hugging Face Spaces
+
+**Enterprise-grade AI coding assistant** for GitHub repositories with multi-LLM support, visual workflow insights, and intelligent code analysis.
+
+## What This Does
+
+This Space runs the full GitPilot stack:
+1. **React Frontend** — Professional dark-theme UI with chat, file browser, and workflow visualization
+2. **FastAPI Backend** — 80+ API endpoints for repository management, AI chat, planning, and execution
+3. **Multi-Agent AI** — CrewAI orchestration with 7 switchable agent topologies
+
+## LLM Providers
+
+GitPilot connects to your favorite LLM provider. Configure in **Admin / LLM Settings**:
+
+| Provider | Default | API Key Required |
+|---|---|---|
+| **OllaBridge Cloud** (default) | `qwen2.5:1.5b` | No |
+| OpenAI | `gpt-4o-mini` | Yes |
+| Anthropic Claude | `claude-sonnet-4-5` | Yes |
+| Ollama (local) | `llama3` | No |
+| Custom endpoint | Any model | Optional |
+
+## Quick Start
+
+1. Open the Space UI
+2. Enter your **GitHub Token** (Settings -> GitHub)
+3. Select a repository from the sidebar
+4. Start chatting with your AI coding assistant
+
+## API Endpoints
+
+| Endpoint | Description |
+|---|---|
+| `GET /api/health` | Health check |
+| `POST /api/chat/message` | Chat with AI assistant |
+| `POST /api/chat/plan` | Generate implementation plan |
+| `GET /api/repos` | List repositories |
+| `GET /api/settings` | View/update settings |
+| `GET /docs` | Interactive API docs (Swagger) |
+
+## Connect to OllaBridge Cloud
+
+By default, GitPilot connects to [OllaBridge Cloud](https://huggingface.co/spaces/ruslanmv/ollabridge) for LLM inference. This provides free access to open-source models without needing API keys.
+
+To use your own OllaBridge instance:
+1. Go to **Admin / LLM Settings**
+2. Select **OllaBridge** provider
+3. Enter your OllaBridge URL and model
+
+## Environment Variables
+
+Configure via HF Spaces secrets:
+
+| Variable | Description | Default |
+|---|---|---|
+| `GITPILOT_PROVIDER` | LLM provider | `ollabridge` |
+| `OLLABRIDGE_BASE_URL` | OllaBridge Cloud URL | `https://ruslanmv-ollabridge.hf.space` |
+| `GITHUB_TOKEN` | GitHub personal access token | - |
+| `OPENAI_API_KEY` | OpenAI API key (if using OpenAI) | - |
+| `ANTHROPIC_API_KEY` | Anthropic API key (if using Claude) | - |
+
+## Links
+
+- [GitPilot Repository](https://github.com/ruslanmv/gitpilot)
+- [OllaBridge Cloud](https://huggingface.co/spaces/ruslanmv/ollabridge)
+- [Documentation](https://github.com/ruslanmv/gitpilot#readme)

REPO_README.md

@@ -0,0 +1,418 @@
+<div align="center">
+
+<img src="docs/logo.svg" alt="GitPilot" width="140" />
+
+# GitPilot
+
+### The first open-source multi-agent AI coding assistant.
+
+Multiple specialized agents — including Explorer, Planner, Coder, and Reviewer — collaborate seamlessly on every task. By default, GitPilot requests confirmation before executing high-impact actions. Switch to Auto or Plan mode at any time.
+
+[![PyPI](https://img.shields.io/pypi/v/gitcopilot?style=flat-square&color=D95C3D&labelColor=1C1C1F&label=pypi)](https://pypi.org/project/gitcopilot/)
+[![Python](https://img.shields.io/badge/python-3.11%20%7C%203.12-D95C3D?style=flat-square&labelColor=1C1C1F)](https://www.python.org/)
+[![License](https://img.shields.io/badge/license-Apache%202.0-D95C3D?style=flat-square&labelColor=1C1C1F)](LICENSE)
+[![VS Code](https://img.shields.io/badge/VS%20Code-Extension-D95C3D?style=flat-square&labelColor=1C1C1F)](https://marketplace.visualstudio.com/)
+[![Tests](https://img.shields.io/badge/tests-854%20passing-D95C3D?style=flat-square&labelColor=1C1C1F)](#contributing)
+
+[**Get Started**](#get-started) &nbsp;·&nbsp; [VS Code](#vs-code-extension) &nbsp;·&nbsp; [Web App](#web-app) &nbsp;·&nbsp; [How It Works](#how-it-works) &nbsp;·&nbsp; [Providers](#supported-ai-providers)
+
+</div>
+
+---
+
+<p align="center">
+  <picture>
+    <source srcset="docs/assets/flow.svg" type="image/svg+xml" />
+    <img src="docs/assets/flow.png" alt="GitPilot loop: Ask, Plan, Code, Ship — you approve every change." width="900" />
+  </picture>
+</p>
+
+## Why GitPilot?
+
+Most AI coding tools are a **single model behind a chat box**. GitPilot is fundamentally different: it deploys a **team of four specialized AI agents** that collaborate on every task — just like a real engineering team.
+
+| Agent | Role | What it does |
+|---|---|---|
+| **Explorer** | Context | Reads your full repo, git log, test suite, and dependencies so the plan starts with real knowledge — not guesses |
+| **Planner** | Strategy | Drafts a safe, step-by-step plan with diffs and surfaces risks before any file is touched |
+| **Coder** | Execution | Writes code, runs your tests, and self-corrects on failure — iterating until the suite passes |
+| **Reviewer** | Quality | Validates the output, re-runs the suite, and drafts a commit message and PR summary |
+
+**You control how the agent runs.** Three execution modes — selectable per session from the VS Code compose bar or backend API:
+
+| Mode | Default? | Behavior |
+|---|---|---|
+| **Ask** | Yes | Prompts you before each dangerous action (write, edit, run, commit). You see the diff and click Allow / Deny. |
+| **Auto** | | Executes all tools automatically. Fastest for experienced users who trust the plan. |
+| **Plan** | | Read-only. Generates and displays the plan but blocks all file writes and commands. |
+
+Diffs are shown before they're applied. Tests run before anything is committed. No surprises.
+
+### What else sets GitPilot apart
+
+- 🧭 **Works where you work** — VS Code, web app, and CLI share one login, one history, and one set of approvals.
+- 🧠 **Any LLM, zero lock-in** — OpenAI, Anthropic Claude, IBM Watsonx, Ollama (local & free) or OllaBridge. Switch in settings, no code change.
+- 🔐 **Private by default** — run the entire stack locally with Ollama. No telemetry, no data leaves your machine.
+- 🏢 **Enterprise-ready, Apache 2.0 open source** — 854 passing tests, Docker & Hugging Face deployment recipes, audit the code yourself.
+- 🌍 **Runs anywhere** — laptop, private cloud, air-gapped environments, or managed hosting. Your repo, your rules.
+
+---
+
+## What is GitPilot?
+
+GitPilot is an AI assistant that helps you ship better code, faster — without giving up control. It understands your project, plans changes you can read before they happen, writes the code, runs your tests, and drafts the commit message and pull request for you.
+
+**Works with any language. Runs on any LLM.** Start free and local with Ollama, or bring your own OpenAI, Claude, or Watsonx key.
+
+```
+You: "Add input validation to the login form"
+
+GitPilot:
+  1. Reading src/auth/login.ts...
+  2. Planning 3 changes...
+  3. Editing login.ts → [Apply Patch] [Revert]
+  4. Running npm test... 3 passed
+  5. Done — files written to your workspace.
+```
+
+---
+
+## Get Started
+
+### Option 1: VS Code Extension (recommended)
+
+Install the extension, configure your LLM, and start chatting:
+
+```
+1. Open VS Code
+2. Install "GitPilot Workspace" from Extensions
+3. Click the GitPilot icon in the sidebar
+4. Choose your AI provider (OpenAI, Claude, Ollama...)
+5. Start asking questions about your code
+```
+
+### Option 2: Web App
+![assets/2026-04-07-14-22-32.png](assets/2026-04-07-14-22-32.png)
+Run the full web interface with Docker:
+
+```bash
+git clone https://github.com/ruslanmv/gitpilot.git
+cd gitpilot
+docker compose up
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Live Demo on Hugging Face
+
+Experience the application in action through our hosted demo environment:
+
+[![Live Demo Preview](assets/2026-04-07-16-17-56.png)](https://huggingface.co/spaces/ruslanmv/gitpilot)
+
+🔗 **Access the live demo:**  
+[https://huggingface.co/spaces/ruslanmv/gitpilot](https://huggingface.co/spaces/ruslanmv/gitpilot)
+
+### Option 3: Python CLI (fastest)
+
+```bash
+pip install gitcopilot
+gitpilot serve
+```
+
+Open [http://localhost:8000](http://localhost:8000) and you're done.
+
+> **Heads up:** the PyPI package is published as **`gitcopilot`** (the name `gitpilot` was already taken) but the command you run is `gitpilot`. Python **3.11** or **3.12** required.
+
+---
+
+## VS Code Extension
+![assets/2026-04-07-14-15-33.png](assets/2026-04-07-14-15-33.png)
+The sidebar panel gives you everything in one place:
+
+| Feature | What it does |
+|---|---|
+| **Chat** | Ask questions, request changes, review code |
+| **Execution Modes** | Bottom bar: `Auto` / `Ask` / `Plan` — controls agent permissions per session |
+| **Plan View** | See the step-by-step plan before changes are made |
+| **Plan Approval** | "Approve & Execute" / "Dismiss" bar — execution waits for your OK |
+| **Tool Approvals** | Per-action Allow / Allow for session / Deny cards (Ask mode) |
+| **Diff Preview** | Review proposed edits in VS Code's native diff viewer |
+| **Apply / Revert** | One click to apply changes, one click to undo |
+| **Quick Actions** | Explain, Review, Fix, Generate Tests, Security Scan |
+| **Smart Commit** | AI-generated commit messages |
+| **Code Lens** | Inline "Explain / Review" hints on functions |
+| **Settings Tab** | Branded settings page (General, Provider, Agent, Editor) |
+| **New Chat** | One click to clear chat and start a fresh session |
+
+### Execution modes
+
+The compose bar includes a mode selector that controls how the multi-agent pipeline runs:
+
+```
+[ Auto | Ask | Plan ]    [ Send ]    [ New Chat ]
+```
+
+| Mode | VS Code setting | Backend value | What happens |
+|---|---|---|---|
+| **Ask** (default) | `gitpilot.permissionMode: "normal"` | `"normal"` | Each dangerous tool (write, edit, run, commit) shows an approval card |
+| **Auto** | `gitpilot.permissionMode: "auto"` | `"auto"` | Tools execute automatically — no approval prompts |
+| **Plan** | `gitpilot.permissionMode: "plan"` | `"plan"` | Plan is generated and displayed, all writes/commands blocked |
+
+Mode changes are persisted to VS Code settings and synced to the backend via `PUT /api/permissions/mode`.
+
+### How approvals work
+
+```
+You send a request
+  → Explorer reads repo context
+  → Planner drafts step-by-step plan
+  → Plan appears in sidebar (Approve & Execute / Dismiss)
+  → You click Approve
+  → Coder begins execution
+  → Dangerous tool requested (e.g. write_file)
+    → Ask mode: approval card shown (Allow / Allow for session / Deny)
+    → Auto mode: executes immediately
+    → Plan mode: blocked
+  → Tests run, Reviewer validates
+  → Done — Apply Patch or Revert
+```
+
+> **Note:** Simple questions (e.g. "explain this code") may return a direct answer without generating a multi-step plan. This is expected — the planner activates for tasks that require file changes or multi-step execution.
+
+### Code generation and Apply Patch
+
+When you ask GitPilot to create or edit files, the response includes structured `edits` — not just text. The **Apply Patch** button writes them directly to your workspace.
+
+```
+You: "Create a Flask app with app.py, requirements.txt, and README.md"
+
+GitPilot:
+  → LLM generates 3 files with content
+  → Backend extracts structured edits (path + content)
+  → VS Code shows [Apply Patch] [Revert]
+  → You click Apply Patch
+  → 3 files written to disk
+  → Project context refreshes automatically
+  → First file opens in the editor
+```
+
+How it works under the hood:
+- The LLM is instructed to output code blocks with the filename on the fence line (` ```python hello.py`)
+- The backend parses these blocks into `ProposedEdit` objects with file path, kind, and content
+- All paths are sanitized (rejects `../` traversal, absolute paths, drive letters)
+- The extension stores edits in `activeTask.edits` and shows Apply / Revert
+- `PatchApplier` writes files via `vscode.workspace.fs.writeFile`
+- After apply, project context refreshes and the first file opens
+
+> **Note:** For folder-only sessions (no GitHub remote), code generation uses the LLM directly with structured output instructions. For GitHub-connected sessions, the full CrewAI multi-agent pipeline (Explorer → Planner → Coder → Reviewer) handles planning and execution.
+
+### Supported AI Providers
+
+| Provider | Setup | Free? |
+|---|---|---|
+| **Ollama** | Install Ollama, run `ollama pull llama3` | Yes |
+| **OllaBridge** | Works out of the box (cloud Ollama) | Yes |
+| **OpenAI** | Add your API key in settings | Paid |
+| **Claude** | Add your Anthropic API key | Paid |
+| **Watsonx** | Add IBM credentials | Paid |
+
+---
+
+## Web App
+
+The web interface includes:
+
+- Chat with real-time responses
+- GitHub integration (connect your repos)
+- File tree browser
+- Diff viewer with line-by-line changes
+- Pull request creation
+- Session history with checkpoints
+- Multi-repo support
+
+
+
+### Example: File Deletion
+![](assets/2025-11-16-00-25-49.png)
+
+### Example: Content Generation
+![](assets/2025-11-16-00-29-47.png)
+
+### Example: File Creation
+![](assets/2025-11-16-01-01-40.png)
+
+### Example multiple operations
+![](assets/2025-11-27-00-25-53.png)
+
+### Example of multiagent topologies
+![](assets/2026-04-07-16-11-47.png)
+
+---
+
+## How It Works
+
+<p align="center">
+  <picture>
+    <source srcset="docs/assets/architecture.svg" type="image/svg+xml" />
+    <img src="docs/assets/architecture.png" alt="GitPilot architecture: Web, VS Code and CLI share one FastAPI backend that orchestrates a CrewAI multi-agent pipeline (Explorer, Planner, Executor, Reviewer) over any LLM provider." width="100%" />
+  </picture>
+</p>
+
+GitPilot uses a multi-agent system powered by CrewAI:
+
+1. **Explorer** reads your repo structure, git log, and key files
+2. **Planner** creates a safe step-by-step plan with diffs
+3. **Executor** writes code and runs tests, self-correcting on failure
+4. **Reviewer** validates the output and summarises what changed
+
+In **Ask** mode (default), you approve every change before it's applied. In **Auto** mode, tools execute without prompts. In **Plan** mode, only the plan is generated — no files are touched.
+
+---
+
+## Project Structure
+
+```
+gitpilot/
+  gitpilot/           Python backend (FastAPI)
+  frontend/           React web app
+  extensions/vscode/  VS Code extension
+  docs/               Documentation and assets
+  tests/              Test suite
+```
+
+---
+
+## Configuration
+
+GitPilot works with environment variables or the settings UI.
+
+**Minimal setup** (Ollama, free, local):
+
+```bash
+# .env
+GITPILOT_PROVIDER=ollama
+OLLAMA_BASE_URL=http://localhost:11434
+GITPILOT_OLLAMA_MODEL=llama3
+```
+
+**Cloud setup** (OpenAI):
+
+```bash
+# .env
+GITPILOT_PROVIDER=openai
+OPENAI_API_KEY=sk-...
+GITPILOT_OPENAI_MODEL=gpt-4o-mini
+```
+
+**Cloud setup** (Claude):
+
+```bash
+# .env
+GITPILOT_PROVIDER=claude
+ANTHROPIC_API_KEY=sk-ant-...
+GITPILOT_CLAUDE_MODEL=claude-sonnet-4-5
+```
+
+All settings can also be changed from the VS Code extension or web UI without editing files.
+
+---
+
+## API
+
+GitPilot exposes a REST + WebSocket API:
+
+| Endpoint | What it does |
+|---|---|
+| `GET /api/status` | Server health check |
+| `POST /api/chat/send` | Send a message, get a response |
+| `POST /api/v2/chat/stream` | Stream agent events (SSE) — accepts `permission_mode` |
+| `WS /ws/v2/sessions/{id}` | Real-time WebSocket streaming |
+| `POST /api/chat/plan` | Generate an execution plan |
+| `POST /api/chat/execute` | Execute a plan |
+| `GET /api/repos` | List connected repositories |
+| `GET /api/sessions` | List chat sessions |
+| `GET /api/permissions` | Current permission policy |
+| `PUT /api/permissions/mode` | Set execution mode: `normal` / `auto` / `plan` |
+| `POST /api/v2/approval/respond` | Approve or deny a tool execution request |
+
+Full API docs at `http://localhost:8000/docs` (Swagger UI).
+
+---
+
+## Deployment
+
+### Hugging Face Spaces
+
+GitPilot runs on Hugging Face Spaces with OllaBridge (free):
+
+```
+Runtime: Docker
+Port: 7860
+Provider: OllaBridge (cloud Ollama)
+```
+
+### Docker Compose
+
+```bash
+docker compose up -d
+# Backend: http://localhost:8000
+# Frontend: http://localhost:3000
+```
+
+### Vercel
+
+The frontend deploys to Vercel. Set `VITE_BACKEND_URL` to your backend.
+
+---
+
+## Contributing
+
+```bash
+# Standard install: runtime backend + frontend + MCP stack
+make install
+# WSL note: the Makefile defaults uv to UV_LINK_MODE=copy to avoid
+# hardlink fallback warnings on /mnt/c checkouts. For best install speed,
+# clone the repo inside the native WSL filesystem (for example ~/workspace).
+
+# Developer/test tooling
+make install-dev
+make test
+
+# Frontend only
+cd frontend
+npm ci
+npm run dev
+
+# VS Code Extension
+cd extensions/vscode
+npm install
+make compile
+# Press F5 in VS Code to launch debug host
+```
+
+---
+
+## License
+
+Apache License 2.0. See [LICENSE](LICENSE).
+
+---
+
+<div align="center">
+
+**GitPilot** is made by [Ruslan Magana Vsevolodovna](https://github.com/ruslanmv)
+
+[Star on GitHub](https://github.com/ruslanmv/gitpilot) &#8226; [Report a Bug](https://github.com/ruslanmv/gitpilot/issues) &#8226; [Request a Feature](https://github.com/ruslanmv/gitpilot/issues)
+
+</div>
+
+---
+**MCP Context Forge integration** — GitPilot ships a default MCP stack (Forge + PostgreSQL / Milvus / Inspector servers) wired into the agents like Claude Code's built-ins; `make run` brings everything up. No Docker?  Use `make run-bare` to start GitPilot core without MCP. See [docs/deploy/install-mcp.md](./docs/deploy/install-mcp.md) and [docs/deploy/production-mcp.md](./docs/deploy/production-mcp.md).
+
+---
+
+## What's New
+
+> **Enterprise-ready foundation:** GitPilot now ships with safer defaults and production-grade controls, including thread-safe feature flags, strict typing, CI coverage enforcement, structured error handling, and a fast `gitpilot doctor` health check. All upgrades are additive, flag-gated, and disabled by default, so existing installations remain stable while teams can adopt new capabilities gradually.
+
+> **Performance, onboarding, and release confidence:** GitPilot now improves runtime efficiency with prompt caching, lazy tool loading, context memoisation, SSE streaming, and safe model warmup. First-time setup is easier with `gitpilot init --wizard`, which creates configuration files atomically with rollback protection and no secret exposure. The platform also adds a stable public API, deprecation handling, MkDocs documentation, broken-link checks, SBOM generation, npm auditing, and Sigstore-based release signing.

frontend/.dockerignore

@@ -0,0 +1,39 @@
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# Build
+dist/
+build/
+
+# Environment
+.env
+.env.local
+.env.development
+.env.test
+.env.production.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+
+# Testing
+coverage/
+.nyc_output/
+
+# Misc
+*.log

frontend/App.jsx

@@ -0,0 +1,1295 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import StartupScreen from "./components/StartupScreen.jsx";
+import LoginPage from "./components/LoginPage.jsx";
+import RepoSelector from "./components/RepoSelector.jsx";
+import ProjectContextPanel from "./components/ProjectContextPanel.jsx";
+import ChatPanel from "./components/ChatPanel.jsx";
+import LlmSettings from "./components/LlmSettings.jsx";
+import FlowViewer from "./components/FlowViewer.jsx";
+import Footer from "./components/Footer.jsx";
+import ProjectSettingsModal from "./components/ProjectSettingsModal.jsx";
+import SessionSidebar from "./components/SessionSidebar.jsx";
+import ContextBar from "./components/ContextBar.jsx";
+import AddRepoModal from "./components/AddRepoModal.jsx";
+import UserMenu from "./components/UserMenu.jsx";
+import AboutModal from "./components/AboutModal.jsx";
+import {
+  WorkspaceModesTab,
+  SecurityTab,
+  IntegrationsTab,
+  MCPServersTab,
+  SkillsTab,
+  SessionsTab,
+  AdvancedTab,
+  SandboxTab,
+} from "./components/AdminTabs";
+import { apiUrl, safeFetchJSON, fetchStatus } from "./utils/api.js";
+import { initApp } from "./utils/appInit.js";
+
+function makeRepoKey(repo) {
+  if (!repo) return null;
+  return repo.full_name || `${repo.owner}/${repo.name}`;
+}
+
+function uniq(arr) {
+  return Array.from(new Set((arr || []).filter(Boolean)));
+}
+
+function getProviderLabel(status) {
+  if (!status) return "Checking...";
+  return (
+    status?.provider?.name ||
+    status?.provider_name ||
+    status?.provider?.provider ||
+    "Checking..."
+  );
+}
+
+function getBackendVersion(status) {
+  if (!status) return "Checking...";
+  return status?.version || status?.app_version || "Checking...";
+}
+
+export default function App() {
+  const frontendVersion = __APP_VERSION__ || "unknown";
+
+  // ---- Multi-repo context state ----
+  const [contextRepos, setContextRepos] = useState([]);
+  // Each entry: { repoKey: "owner/repo", repo: {...}, branch: "main" }
+  const [activeRepoKey, setActiveRepoKey] = useState(null);
+  const [addRepoOpen, setAddRepoOpen] = useState(false);
+
+  const [activePage, setActivePage] = useState("workspace");
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [userInfo, setUserInfo] = useState(null);
+
+  // Startup / enterprise loader state
+  const [startupPhase, setStartupPhase] = useState("booting");
+  const [startupStatusMessage, setStartupStatusMessage] = useState("Starting application...");
+  const [startupDetailMessage, setStartupDetailMessage] = useState(
+    "Initializing authentication, provider, and workspace context."
+  );
+  const [startupStatusSnapshot, setStartupStatusSnapshot] = useState(null);
+
+  // Repo + Session State Machine
+  const [repoStateByKey, setRepoStateByKey] = useState({});
+  const [toast, setToast] = useState(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [aboutOpen, setAboutOpen] = useState(false);
+  const [adminTab, setAdminTab] = useState("overview");
+  const [adminStatus, setAdminStatus] = useState(null);
+
+  // Fetch admin status when overview tab is active
+  useEffect(() => {
+    if (activePage === "admin" && adminTab === "overview") {
+      fetchStatus()
+        .then((data) => setAdminStatus(data))
+        .catch(() => setAdminStatus(null));
+    }
+  }, [activePage, adminTab]);
+
+  // Claude-Code-on-Web: Session sidebar + Environment state
+  const [activeSessionId, setActiveSessionId] = useState(null);
+  const [activeEnvId, setActiveEnvId] = useState("default");
+  const [sessionRefreshNonce, setSessionRefreshNonce] = useState(0);
+
+  // Sidebar collapse state (persisted in localStorage)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem("gitpilot_sidebar_collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarCollapsed((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem("gitpilot_sidebar_collapsed", String(next));
+      } catch {}
+      return next;
+    });
+  }, []);
+
+  // Keyboard shortcut: Cmd/Ctrl + B to toggle sidebar
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "b") {
+        e.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [toggleSidebar]);
+
+  // ---- Derived `repo` — keeps all downstream consumers unchanged ----
+  const repo = useMemo(() => {
+    const entry = contextRepos.find((r) => r.repoKey === activeRepoKey);
+    return entry?.repo || null;
+  }, [contextRepos, activeRepoKey]);
+
+  const repoKey = activeRepoKey;
+
+  // Convenient selectors
+  const currentRepoState = repoKey ? repoStateByKey[repoKey] : null;
+
+  const defaultBranch = currentRepoState?.defaultBranch || repo?.default_branch || "main";
+  const currentBranch = currentRepoState?.currentBranch || defaultBranch;
+  const sessionBranches = currentRepoState?.sessionBranches || [];
+  const lastExecution = currentRepoState?.lastExecution || null;
+  const pulseNonce = currentRepoState?.pulseNonce || 0;
+  const chatByBranch = currentRepoState?.chatByBranch || {};
+
+  // ---------------------------------------------------------------------------
+  // Multi-repo context management
+  // ---------------------------------------------------------------------------
+  const addRepoToContext = useCallback((r) => {
+    const key = makeRepoKey(r);
+    if (!key) return;
+
+    setContextRepos((prev) => {
+      if (prev.some((e) => e.repoKey === key)) {
+        setActiveRepoKey(key);
+        return prev;
+      }
+      const entry = { repoKey: key, repo: r, branch: r.default_branch || "main" };
+      return [...prev, entry];
+    });
+
+    setActiveRepoKey(key);
+    setAddRepoOpen(false);
+  }, []);
+
+  const removeRepoFromContext = useCallback((key) => {
+    setContextRepos((prev) => {
+      const next = prev.filter((e) => e.repoKey !== key);
+      setActiveRepoKey((curActive) => {
+        if (curActive === key) {
+          return next.length > 0 ? next[0].repoKey : null;
+        }
+        return curActive;
+      });
+      return next;
+    });
+  }, []);
+
+  const clearAllContext = useCallback(() => {
+    setContextRepos([]);
+    setActiveRepoKey(null);
+  }, []);
+
+  const handleContextBranchChange = useCallback((targetRepoKey, newBranch) => {
+    setContextRepos((prev) =>
+      prev.map((e) =>
+        e.repoKey === targetRepoKey ? { ...e, branch: newBranch } : e
+      )
+    );
+
+    setRepoStateByKey((prev) => {
+      const cur = prev[targetRepoKey];
+      if (!cur) return prev;
+      return {
+        ...prev,
+        [targetRepoKey]: { ...cur, currentBranch: newBranch },
+      };
+    });
+  }, []);
+
+  // Init / reconcile repo state when active repo changes
+  useEffect(() => {
+    if (!repoKey || !repo) return;
+
+    setRepoStateByKey((prev) => {
+      const existing = prev[repoKey];
+      const d = repo.default_branch || "main";
+
+      if (!existing) {
+        return {
+          ...prev,
+          [repoKey]: {
+            defaultBranch: d,
+            currentBranch: d,
+            sessionBranches: [],
+            lastExecution: null,
+            pulseNonce: 0,
+            chatByBranch: {
+              [d]: { messages: [], plan: null },
+            },
+          },
+        };
+      }
+
+      const next = { ...existing };
+      next.defaultBranch = d;
+
+      if (!next.chatByBranch?.[d]) {
+        next.chatByBranch = {
+          ...(next.chatByBranch || {}),
+          [d]: { messages: [], plan: null },
+        };
+      }
+
+      if (!next.currentBranch) next.currentBranch = d;
+
+      return { ...prev, [repoKey]: next };
+    });
+  }, [repoKey, repo?.id, repo?.default_branch]);
+
+  const showToast = (title, message) => {
+    setToast({ title, message });
+    window.setTimeout(() => setToast(null), 5000);
+  };
+
+  // ---------------------------------------------------------------------------
+  // Session management — every chat is backed by a Session (Claude Code parity)
+  // ---------------------------------------------------------------------------
+
+  const _creatingSessionRef = useRef(false);
+
+  const [chatBySession, setChatBySession] = useState({});
+
+  const ensureSession = useCallback(
+    async (sessionName, seedMessages) => {
+      if (activeSessionId) return activeSessionId;
+      if (!repo) return null;
+      if (_creatingSessionRef.current) return null;
+      _creatingSessionRef.current = true;
+
+      try {
+        const token = localStorage.getItem("github_token");
+        const headers = {
+          "Content-Type": "application/json",
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        };
+
+        const res = await fetch("/api/sessions", {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            repo_full_name: repoKey,
+            branch: currentBranch,
+            name: sessionName || undefined,
+            repos: contextRepos.map((e) => ({
+              full_name: e.repoKey,
+              branch: e.branch,
+              mode: e.repoKey === activeRepoKey ? "write" : "read",
+            })),
+            active_repo: activeRepoKey,
+          }),
+        });
+
+        if (!res.ok) return null;
+        const data = await res.json();
+        const newId = data.session_id;
+
+        if (seedMessages && seedMessages.length > 0) {
+          setChatBySession((prev) => ({
+            ...prev,
+            [newId]: { messages: seedMessages, plan: null },
+          }));
+        }
+
+        setActiveSessionId(newId);
+        setSessionRefreshNonce((n) => n + 1);
+        return newId;
+      } catch (err) {
+        console.warn("Failed to create session:", err);
+        return null;
+      } finally {
+        _creatingSessionRef.current = false;
+      }
+    },
+    [activeSessionId, repo, repoKey, currentBranch, contextRepos, activeRepoKey]
+  );
+
+  const handleNewSession = async () => {
+    setActiveSessionId(null);
+
+    try {
+      const token = localStorage.getItem("github_token");
+      const headers = {
+        "Content-Type": "application/json",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      };
+
+      const res = await fetch("/api/sessions", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          repo_full_name: repoKey,
+          branch: currentBranch,
+          repos: contextRepos.map((e) => ({
+            full_name: e.repoKey,
+            branch: e.branch,
+            mode: e.repoKey === activeRepoKey ? "write" : "read",
+          })),
+          active_repo: activeRepoKey,
+        }),
+      });
+
+      if (!res.ok) return;
+      const data = await res.json();
+      setActiveSessionId(data.session_id);
+      setSessionRefreshNonce((n) => n + 1);
+      showToast("Session Created", "New session started.");
+    } catch (err) {
+      console.warn("Failed to create session:", err);
+    }
+  };
+
+  /**
+   * Convert a backend Message object to the frontend chat UI shape.
+   * Backend:  { role: "user|assistant|system", content: "...", timestamp, metadata }
+   * Frontend: { from: "user|ai", role: "user|assistant|system", content, answer, ... }
+   */
+  const normalizeBackendMessage = (m) => {
+    const role = m.role || "assistant";
+    const content = m.content || "";
+    if (role === "user") {
+      return { from: "user", role: "user", content, text: content };
+    }
+    if (role === "system") {
+      return { from: "ai", role: "system", content };
+    }
+    // assistant
+    return {
+      from: "ai",
+      role: "assistant",
+      content,
+      answer: content,
+      // Preserve any structured metadata the backend stored (plan, diff, etc.)
+      ...(m.metadata && typeof m.metadata === "object" ? m.metadata : {}),
+    };
+  };
+
+  /**
+   * Fetch persisted messages for a session from the backend.
+   * Returns an array of normalized frontend messages (ready for ChatPanel),
+   * or an empty array on failure.
+   */
+  const fetchSessionMessages = useCallback(async (sessionId) => {
+    if (!sessionId) return [];
+    try {
+      const token = localStorage.getItem("github_token");
+      const headers = { "Content-Type": "application/json" };
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+
+      const res = await fetch(apiUrl(`/api/sessions/${sessionId}/messages`), {
+        headers,
+      });
+      if (!res.ok) {
+        console.warn(`[fetchSessionMessages] ${res.status} for ${sessionId}`);
+        return [];
+      }
+      const data = await res.json();
+      const backendMessages = Array.isArray(data.messages) ? data.messages : [];
+      return backendMessages.map(normalizeBackendMessage);
+    } catch (err) {
+      console.warn(`[fetchSessionMessages] Failed to fetch ${sessionId}:`, err);
+      return [];
+    }
+  }, []);
+
+  /**
+   * Handle click on a session in the sidebar.
+   *
+   * Critical ordering: we must hydrate chatBySession BEFORE setting
+   * activeSessionId, because ChatPanel's session-sync useEffect reads
+   * sessionChatState only when sessionId changes (it does NOT depend on
+   * chatBySession to avoid prop/state loops). If we set activeSessionId
+   * first, ChatPanel would see an empty messages array, then our async
+   * hydration would complete but ChatPanel wouldn't re-sync.
+   */
+  // Resolve the branch we should jump to when reopening a session.
+  // Preference order:
+  //   1. session.repos[i].branch for the active_repo (multi-repo)
+  //   2. session.branch (legacy single-repo field)
+  // Returns ``null`` when nothing is recorded.
+  const resolveSessionBranch = (session) => {
+    if (!session) return null;
+    if (Array.isArray(session.repos) && session.repos.length > 0) {
+      const target =
+        session.repos.find(
+          (r) => session.active_repo && r?.full_name === session.active_repo,
+        ) || session.repos[0];
+      if (target?.branch) return target.branch;
+    }
+    return session.branch || null;
+  };
+
+  // Probe whether a branch still exists on GitHub.  We deliberately
+  // reuse the existing tree endpoint instead of adding a new one — a
+  // 200 means the ref resolves, anything else (most importantly 404)
+  // means the branch is gone or otherwise unreachable.  Failure
+  // degrades to "branch unknown" so a transient network blip falls
+  // back gracefully rather than misleading the user.
+  const probeBranchExists = async (repoFullName, branch) => {
+    if (!repoFullName || !branch) return false;
+    try {
+      const token = localStorage.getItem("github_token");
+      const headers = {};
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const res = await fetch(
+        apiUrl(
+          `/api/repos/${repoFullName}/tree?ref=${encodeURIComponent(branch)}`,
+        ),
+        { headers },
+      );
+      return res.ok;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleSelectSession = useCallback(async (session) => {
+    // 1. Fetch persisted messages first
+    const messages = await fetchSessionMessages(session.id);
+
+    // 2. Seed the chat cache (ChatPanel will read this via sessionChatState)
+    setChatBySession((prev) => ({
+      ...prev,
+      [session.id]: {
+        ...(prev[session.id] || { plan: null }),
+        messages,
+      },
+    }));
+
+    // 3. NOW activate the session — ChatPanel's sync effect will read
+    //    the hydrated messages from chatBySession[session.id]
+    setActiveSessionId(session.id);
+
+    // 4. Jump to the branch this session last published to, but verify
+    //    it still exists on GitHub first.  When the branch was deleted
+    //    (rebased away, merged-and-pruned, …) fall back to the
+    //    repository's default branch and tell the user what happened —
+    //    silently landing on the default would mask data loss.
+    const target = resolveSessionBranch(session);
+    if (target && target !== currentBranch) {
+      const repoFullName =
+        session.repo ||
+        (Array.isArray(session.repos) && session.repos[0]?.full_name);
+      const exists = await probeBranchExists(repoFullName, target);
+      if (exists) {
+        handleBranchChange(target);
+      } else {
+        const fallback = defaultBranch || "main";
+        showToast(
+          "Branch not found",
+          `'${target}' was not found on GitHub. Switched to ${fallback}.`,
+        );
+        if (fallback !== currentBranch) handleBranchChange(fallback);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchSessionMessages, currentBranch, defaultBranch]);
+
+  const handleDeleteSession = useCallback(
+    (deletedId) => {
+      if (deletedId === activeSessionId) {
+        setActiveSessionId(null);
+
+        setChatBySession((prev) => {
+          const next = { ...prev };
+          delete next[deletedId];
+          return next;
+        });
+
+        if (repoKey) {
+          setRepoStateByKey((prev) => {
+            const cur = prev[repoKey];
+            if (!cur) return prev;
+            const branchKey = cur.currentBranch || cur.defaultBranch || defaultBranch;
+            return {
+              ...prev,
+              [repoKey]: {
+                ...cur,
+                chatByBranch: {
+                  ...(cur.chatByBranch || {}),
+                  [branchKey]: { messages: [], plan: null },
+                },
+              },
+            };
+          });
+        }
+      }
+    },
+    [activeSessionId, repoKey, defaultBranch]
+  );
+
+  // ---------------------------------------------------------------------------
+  // Chat persistence helpers
+  // ---------------------------------------------------------------------------
+  const updateChatForCurrentBranch = (patch) => {
+    if (!repoKey) return;
+
+    setRepoStateByKey((prev) => {
+      const cur = prev[repoKey];
+      if (!cur) return prev;
+
+      const branchKey = cur.currentBranch || cur.defaultBranch || defaultBranch;
+
+      const existing = cur.chatByBranch?.[branchKey] || {
+        messages: [],
+        plan: null,
+      };
+
+      return {
+        ...prev,
+        [repoKey]: {
+          ...cur,
+          chatByBranch: {
+            ...(cur.chatByBranch || {}),
+            [branchKey]: { ...existing, ...patch },
+          },
+        },
+      };
+    });
+  };
+
+  const currentChatState = useMemo(() => {
+    const b = currentBranch || defaultBranch;
+    return chatByBranch[b] || { messages: [], plan: null };
+  }, [chatByBranch, currentBranch, defaultBranch]);
+
+  const sessionChatState = useMemo(() => {
+    if (!activeSessionId) {
+      return currentChatState;
+    }
+    return chatBySession[activeSessionId] || { messages: [], plan: null };
+  }, [activeSessionId, chatBySession, currentChatState]);
+
+  const updateSessionChat = (patch) => {
+    if (activeSessionId) {
+      setChatBySession((prev) => ({
+        ...prev,
+        [activeSessionId]: {
+          ...(prev[activeSessionId] || { messages: [], plan: null }),
+          ...patch,
+        },
+      }));
+    } else {
+      updateChatForCurrentBranch(patch);
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Branch change (manual — for active repo)
+  // ---------------------------------------------------------------------------
+  const handleBranchChange = (nextBranch) => {
+    if (!repoKey) return;
+    if (!nextBranch || nextBranch === currentBranch) return;
+
+    setRepoStateByKey((prev) => {
+      const cur = prev[repoKey];
+      if (!cur) return prev;
+
+      const nextState = { ...cur, currentBranch: nextBranch };
+
+      if (nextBranch === cur.defaultBranch) {
+        nextState.chatByBranch = {
+          ...nextState.chatByBranch,
+          [nextBranch]: { messages: [], plan: null },
+        };
+      }
+
+      return { ...prev, [repoKey]: nextState };
+    });
+
+    setContextRepos((prev) =>
+      prev.map((e) =>
+        e.repoKey === repoKey ? { ...e, branch: nextBranch } : e
+      )
+    );
+
+    if (nextBranch === defaultBranch) {
+      showToast("New Session", `Switched to ${defaultBranch}. Chat cleared.`);
+    } else {
+      showToast("Context Switched", `Now viewing ${nextBranch}.`);
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Execution complete
+  // ---------------------------------------------------------------------------
+  const handleExecutionComplete = ({
+    branch,
+    mode,
+    commit_url,
+    completionMsg,
+    sourceBranch,
+  }) => {
+    if (!repoKey || !branch) return;
+
+    // Clear the session-keyed chat cache's ``plan`` AND append the
+    // completion message synchronously, before any branch change can
+    // trigger ChatPanel's session-sync effect.  Two bugs need to be
+    // fixed in the same write:
+    //
+    // 1. Stale plan: without clearing, the sync effect re-reads the
+    //    old approved plan and restores the Approve & execute / Reject
+    //    plan buttons, enabling accidental double-execution.
+    //
+    // 2. Wiped completion: in hard-switch mode the sync effect runs
+    //    BEFORE the persistence effect (declared earlier in
+    //    ChatPanel), so it overwrites local ``messages`` with
+    //    ``sessionChatState.messages`` — which doesn't yet contain
+    //    completionMsg.  The user's "Answer / Execution Log" block
+    //    then vanishes from the session view.
+    //
+    // By appending normalizedCompletion here, sessionChatState already
+    // carries the completion when the sync effect reads it.  No
+    // duplicate is introduced: local ``messages`` already has the same
+    // entry, so the subsequent persistence pass is a no-op write.
+    if (activeSessionId) {
+      const normalizedCompletion =
+        completionMsg &&
+        (completionMsg.answer || completionMsg.content || completionMsg.executionLog)
+          ? {
+              from: completionMsg.from || "ai",
+              role: completionMsg.role || "assistant",
+              answer: completionMsg.answer,
+              content: completionMsg.content,
+              executionLog: completionMsg.executionLog,
+              diff: completionMsg.diff,
+            }
+          : null;
+      setChatBySession((prev) => {
+        const existing = prev[activeSessionId];
+        if (!existing) return prev;
+        const noPlanChange = existing.plan == null;
+        if (noPlanChange && !normalizedCompletion) return prev;
+        return {
+          ...prev,
+          [activeSessionId]: {
+            ...existing,
+            messages: normalizedCompletion
+              ? [...(existing.messages || []), normalizedCompletion]
+              : existing.messages,
+            plan: null,
+          },
+        };
+      });
+    }
+
+    setRepoStateByKey((prev) => {
+      const cur =
+        prev[repoKey] || {
+          defaultBranch,
+          currentBranch: defaultBranch,
+          sessionBranches: [],
+          lastExecution: null,
+          pulseNonce: 0,
+          chatByBranch: { [defaultBranch]: { messages: [], plan: null } },
+        };
+
+      const next = { ...cur };
+      next.lastExecution = { mode, branch, ts: Date.now() };
+
+      if (!next.chatByBranch) next.chatByBranch = {};
+
+      const prevBranchKey =
+        sourceBranch || cur.currentBranch || cur.defaultBranch || defaultBranch;
+
+      const successSystemMsg = {
+        role: "system",
+        isSuccess: true,
+        link: commit_url,
+        content:
+          mode === "hard-switch"
+            ? `🌱 **Session Started:** Created branch \`${branch}\`.`
+            : `✅ **Update Published:** Commits pushed to \`${branch}\`.`,
+      };
+
+      const normalizedCompletion =
+        completionMsg &&
+        (completionMsg.answer || completionMsg.content || completionMsg.executionLog)
+          ? {
+              from: completionMsg.from || "ai",
+              role: completionMsg.role || "assistant",
+              answer: completionMsg.answer,
+              content: completionMsg.content,
+              executionLog: completionMsg.executionLog,
+            }
+          : null;
+
+      if (mode === "hard-switch") {
+        next.sessionBranches = uniq([...(next.sessionBranches || []), branch]);
+        next.currentBranch = branch;
+        next.pulseNonce = (next.pulseNonce || 0) + 1;
+
+        const existingTargetChat = next.chatByBranch[branch];
+        const isExistingSession =
+          existingTargetChat && (existingTargetChat.messages || []).length > 0;
+
+        if (isExistingSession) {
+          const appended = [
+            ...(existingTargetChat.messages || []),
+            ...(normalizedCompletion ? [normalizedCompletion] : []),
+            successSystemMsg,
+          ];
+
+          next.chatByBranch[branch] = {
+            ...existingTargetChat,
+            messages: appended,
+            plan: null,
+          };
+        } else {
+          const prevChat =
+            (cur.chatByBranch && cur.chatByBranch[prevBranchKey]) || {
+              messages: [],
+              plan: null,
+            };
+
+          next.chatByBranch[branch] = {
+            messages: [
+              ...(prevChat.messages || []),
+              ...(normalizedCompletion ? [normalizedCompletion] : []),
+              successSystemMsg,
+            ],
+            plan: null,
+          };
+        }
+
+        if (!next.chatByBranch[next.defaultBranch]) {
+          next.chatByBranch[next.defaultBranch] = { messages: [], plan: null };
+        }
+      } else if (mode === "sticky") {
+        next.currentBranch = cur.currentBranch || branch;
+
+        const targetChat = next.chatByBranch[branch] || { messages: [], plan: null };
+
+        next.chatByBranch[branch] = {
+          messages: [
+            ...(targetChat.messages || []),
+            ...(normalizedCompletion ? [normalizedCompletion] : []),
+            successSystemMsg,
+          ],
+          plan: null,
+        };
+      }
+
+      return { ...prev, [repoKey]: next };
+    });
+
+    if (mode === "hard-switch") {
+      showToast("Context Switched", `Active on ${branch}.`);
+    } else {
+      showToast("Changes Committed", `Updated ${branch}.`);
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Auth & startup render
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    checkAuthentication();
+  }, []);
+
+  const checkAuthentication = async () => {
+    setStartupPhase("booting");
+    setStartupStatusMessage("Starting application...");
+    setStartupDetailMessage(
+      "Initializing authentication, provider, and workspace context."
+    );
+
+    try {
+      setStartupPhase("checking-backend");
+      setStartupStatusMessage("Connecting to backend...");
+      setStartupDetailMessage(
+        "Preparing your workspace. First launch may take a few seconds."
+      );
+
+      // Single-source-of-truth init: combines /api/status + /api/auth/status
+      // in one request. Runs exactly once per page load (StrictMode-safe).
+      const initResult = await initApp();
+      const status = initResult.status;
+      if (status) {
+        setStartupStatusSnapshot(status);
+        setAdminStatus(status);
+      }
+
+      const token = localStorage.getItem("github_token");
+      const user = localStorage.getItem("github_user");
+
+      if (token && user) {
+        setStartupPhase("validating-auth");
+        setStartupStatusMessage("Validating authentication...");
+        setStartupDetailMessage(
+          "Restoring your GitHub session and confirming access."
+        );
+
+        try {
+          const data = await safeFetchJSON(apiUrl("/api/auth/validate"), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ access_token: token }),
+            timeout: 20000, // 20s — first-load GitHub API validation can be slow
+          });
+
+          if (data.authenticated) {
+            setStartupPhase("restoring-session");
+            setStartupStatusMessage("Restoring workspace...");
+            setStartupDetailMessage(
+              "Loading user profile, reconnecting provider state, and preparing the workspace."
+            );
+
+            setIsAuthenticated(true);
+            setUserInfo(JSON.parse(user));
+            setIsLoading(false);
+            return;
+          }
+        } catch (err) {
+          console.error(err);
+        }
+
+        localStorage.removeItem("github_token");
+        localStorage.removeItem("github_user");
+      }
+
+      setStartupPhase("ready");
+      setStartupStatusMessage("Preparing sign-in...");
+      setStartupDetailMessage(
+        "GitPilot is ready. Please authenticate to continue."
+      );
+
+      setIsAuthenticated(false);
+      setIsLoading(false);
+    } catch (err) {
+      console.error(err);
+      setStartupPhase("fallback");
+      setStartupStatusMessage("Starting application...");
+      setStartupDetailMessage(
+        "Continuing with basic startup while backend status is still loading."
+      );
+      setIsAuthenticated(false);
+      setIsLoading(false);
+    }
+  };
+
+  const handleAuthenticated = (session) => {
+    setIsAuthenticated(true);
+    setUserInfo(session.user);
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem("github_token");
+    localStorage.removeItem("github_user");
+    setIsAuthenticated(false);
+    setUserInfo(null);
+    clearAllContext();
+  };
+
+  if (isLoading) {
+    return (
+      <StartupScreen
+        appName="GitPilot"
+        subtitle="Enterprise Workspace Copilot"
+        frontendVersion={frontendVersion}
+        backendVersion={getBackendVersion(startupStatusSnapshot)}
+        provider={getProviderLabel(startupStatusSnapshot)}
+        statusMessage={startupStatusMessage}
+        detailMessage={startupDetailMessage}
+        phase={startupPhase}
+      />
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <LoginPage
+        onAuthenticated={handleAuthenticated}
+        backendReady={!!startupStatusSnapshot}
+      />
+    );
+  }
+
+  const hasContext = contextRepos.length > 0;
+
+  return (
+    <div className="app-root">
+      <div className="main-wrapper">
+        <aside className={`sidebar${sidebarCollapsed ? " sidebar--collapsed" : ""}`}>
+          <div
+            className="sidebar-top-row"
+          >
+            <div
+              className="logo-row"
+              onClick={sidebarCollapsed ? toggleSidebar : undefined}
+              style={sidebarCollapsed ? { cursor: "pointer" } : undefined}
+            >
+              <div className="logo-square">GP</div>
+              {!sidebarCollapsed && (
+                <div>
+                  <div className="logo-title">GitPilot</div>
+                  <div className="logo-subtitle">Agentic GitHub Copilot</div>
+                </div>
+              )}
+            </div>
+
+            {!sidebarCollapsed && (
+              <button
+                className="sidebar-toggle-btn"
+                onClick={toggleSidebar}
+                title="Collapse sidebar (Ctrl+B)"
+              >
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M10 3L5 8L10 13"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          <div className="main-nav">
+            <button
+              className={"nav-btn" + (activePage === "workspace" ? " nav-btn-active" : "")}
+              onClick={() => setActivePage("workspace")}
+              title="Workspace"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+                <rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+                <rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+                <rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.3" />
+              </svg>
+              {!sidebarCollapsed && <span>Workspace</span>}
+            </button>
+
+            <button
+              className={"nav-btn" + (activePage === "flow" ? " nav-btn-active" : "")}
+              onClick={() => setActivePage("flow")}
+              title="Agent Workflow"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <circle cx="4" cy="4" r="2" stroke="currentColor" strokeWidth="1.3" />
+                <circle cx="12" cy="4" r="2" stroke="currentColor" strokeWidth="1.3" />
+                <circle cx="8" cy="12" r="2" stroke="currentColor" strokeWidth="1.3" />
+                <path d="M5.5 5.5L7 10.5" stroke="currentColor" strokeWidth="1.3" />
+                <path d="M10.5 5.5L9 10.5" stroke="currentColor" strokeWidth="1.3" />
+              </svg>
+              {!sidebarCollapsed && <span>Agent Workflow</span>}
+            </button>
+
+            <button
+              className={"nav-btn" + (activePage === "admin" ? " nav-btn-active" : "")}
+              onClick={() => setActivePage("admin")}
+              title="Admin"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path
+                  d="M8 2C8 2 9.5 4 9.5 6C9.5 6.8 9.2 7.5 8.7 8L10 14H6L7.3 8C6.8 7.5 6.5 6.8 6.5 6C6.5 4 8 2 8 2Z"
+                  stroke="currentColor"
+                  strokeWidth="1.3"
+                  strokeLinejoin="round"
+                />
+                <circle cx="8" cy="6" r="1.5" stroke="currentColor" strokeWidth="1.3" />
+              </svg>
+              {!sidebarCollapsed && <span>Admin</span>}
+            </button>
+          </div>
+
+          {!sidebarCollapsed && (
+            <>
+              {!hasContext && (
+                <RepoSelector onSelect={(r) => addRepoToContext(r)} />
+              )}
+
+              {repo && (
+                <SessionSidebar
+                  repo={repo}
+                  activeSessionId={activeSessionId}
+                  onSelectSession={handleSelectSession}
+                  onNewSession={handleNewSession}
+                  onDeleteSession={handleDeleteSession}
+                  refreshNonce={sessionRefreshNonce}
+                />
+              )}
+            </>
+          )}
+
+          {userInfo && (
+            <div className="user-profile">
+              <UserMenu
+                userInfo={userInfo}
+                sidebarCollapsed={sidebarCollapsed}
+                onOpenSettings={() => {
+                  setActivePage("admin");
+                  setAdminTab("advanced");
+                }}
+                onOpenAbout={() => setAboutOpen(true)}
+                onLogout={handleLogout}
+              />
+            </div>
+          )}
+        </aside>
+
+        <main className="workspace">
+          {activePage === "admin" && (
+            <div style={{ padding: "24px", maxWidth: "960px", margin: "0 auto" }}>
+              <div style={{ display: "flex", gap: "8px", marginBottom: "24px", flexWrap: "wrap" }}>
+                {["overview", "providers", "workspace-modes", "integrations", "mcp-servers", "sandbox", "sessions", "skills", "security", "advanced"].map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => setAdminTab(tab)}
+                    style={{
+                      padding: "8px 16px",
+                      borderRadius: "6px",
+                      border: adminTab === tab ? "1px solid #3B82F6" : "1px solid #333",
+                      background: adminTab === tab ? "#1e3a5f" : "#1a1b26",
+                      color: adminTab === tab ? "#93c5fd" : "#a0a0b0",
+                      cursor: "pointer",
+                      fontSize: "13px",
+                      textTransform: "capitalize",
+                    }}
+                  >
+                    {tab.replace("-", " ")}
+                  </button>
+                ))}
+              </div>
+
+              {adminTab === "overview" && (
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "16px" }}>
+                  <div style={{ background: "#1a1b26", borderRadius: "8px", padding: "16px", border: "1px solid #2a2b36" }}>
+                    <div style={{ fontSize: "12px", opacity: 0.6, marginBottom: "8px" }}>Server</div>
+                    <div style={{ fontSize: "16px", fontWeight: 600 }}>
+                      {adminStatus?.server_ready ? "Connected" : "Checking..."}
+                    </div>
+                    <div style={{ fontSize: "12px", opacity: 0.5 }}>127.0.0.1:8000</div>
+                  </div>
+
+                  <div style={{ background: "#1a1b26", borderRadius: "8px", padding: "16px", border: "1px solid #2a2b36" }}>
+                    <div style={{ fontSize: "12px", opacity: 0.6, marginBottom: "8px" }}>Provider</div>
+                    <div style={{ fontSize: "16px", fontWeight: 600 }}>
+                      {adminStatus?.provider?.name || "Loading..."}
+                    </div>
+                    <div style={{ fontSize: "12px", opacity: 0.5 }}>
+                      {adminStatus?.provider?.configured
+                        ? `${adminStatus.provider.model || "Ready"}`
+                        : "Not configured"}
+                    </div>
+                  </div>
+
+                  <div style={{ background: "#1a1b26", borderRadius: "8px", padding: "16px", border: "1px solid #2a2b36" }}>
+                    <div style={{ fontSize: "12px", opacity: 0.6, marginBottom: "8px" }}>Workspace Modes</div>
+                    <div style={{ fontSize: "12px" }}>
+                      Folder: {adminStatus?.workspace?.folder_mode_available ? "Yes" : "—"}
+                    </div>
+                    <div style={{ fontSize: "12px" }}>
+                      Local Git: {adminStatus?.workspace?.local_git_available ? "Yes" : "—"}
+                    </div>
+                    <div style={{ fontSize: "12px" }}>
+                      GitHub: {adminStatus?.workspace?.github_mode_available ? "Yes" : "Optional"}
+                    </div>
+                  </div>
+
+                  <div style={{ background: "#1a1b26", borderRadius: "8px", padding: "16px", border: "1px solid #2a2b36" }}>
+                    <div style={{ fontSize: "12px", opacity: 0.6, marginBottom: "8px" }}>GitHub</div>
+                    <div style={{ fontSize: "14px" }}>
+                      {adminStatus?.github?.connected ? "Connected" : "Optional"}
+                    </div>
+                    <div style={{ fontSize: "12px", opacity: 0.5 }}>
+                      {adminStatus?.github?.username || "Not linked"}
+                    </div>
+                  </div>
+
+                  <div style={{ background: "#1a1b26", borderRadius: "8px", padding: "16px", border: "1px solid #2a2b36" }}>
+                    <div style={{ fontSize: "12px", opacity: 0.6, marginBottom: "8px" }}>Sessions</div>
+                    <div style={{ fontSize: "14px" }}>—</div>
+                  </div>
+
+                  <div style={{ background: "#1a1b26", borderRadius: "8px", padding: "16px", border: "1px solid #2a2b36" }}>
+                    <div style={{ fontSize: "12px", opacity: 0.6, marginBottom: "8px" }}>Get Started</div>
+                    <button
+                      onClick={() => setAdminTab("providers")}
+                      style={{
+                        padding: "6px 12px",
+                        background: "#3B82F6",
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        fontSize: "12px",
+                        marginRight: "4px",
+                      }}
+                    >
+                      Configure Provider
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {adminTab === "providers" && (
+                <div>
+                  <h3 style={{ marginBottom: "16px" }}>AI Providers</h3>
+                  <LlmSettings />
+                </div>
+              )}
+
+              {adminTab === "workspace-modes" && (
+                <WorkspaceModesTab
+                  showToast={showToast}
+                  onSessionStarted={(result) => {
+                    setActiveSessionId(result.session_id);
+                    setSessionRefreshNonce((n) => n + 1);
+                    setActivePage("workspace");
+                  }}
+                />
+              )}
+
+              {adminTab === "integrations" && (
+                <IntegrationsTab
+                  userInfo={userInfo}
+                  onDisconnect={handleLogout}
+                  showToast={showToast}
+                />
+              )}
+
+              {adminTab === "mcp-servers" && (
+                <MCPServersTab showToast={showToast} />
+              )}
+
+              {adminTab === "sandbox" && (
+                <SandboxTab showToast={showToast} />
+              )}
+
+              {adminTab === "security" && (
+                <SecurityTab showToast={showToast} />
+              )}
+
+              {adminTab === "sessions" && (
+                <SessionsTab
+                  showToast={showToast}
+                  onSelectSession={(s) => {
+                    handleSelectSession(s);
+                    setActivePage("workspace");
+                  }}
+                />
+              )}
+
+              {adminTab === "skills" && <SkillsTab showToast={showToast} />}
+
+              {adminTab === "advanced" && (
+                <AdvancedTab
+                  showToast={showToast}
+                  onOpenFullSettings={() => setSettingsOpen(true)}
+                />
+              )}
+            </div>
+          )}
+
+          {activePage === "flow" && <FlowViewer />}
+
+          {activePage === "workspace" &&
+            (repo ? (
+              <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+                <ContextBar
+                  contextRepos={contextRepos}
+                  activeRepoKey={activeRepoKey}
+                  repoStateByKey={repoStateByKey}
+                  onActivate={setActiveRepoKey}
+                  onRemove={removeRepoFromContext}
+                  onAdd={() => setAddRepoOpen(true)}
+                  onBranchChange={handleContextBranchChange}
+                />
+
+                <div className="workspace-grid" style={{ flex: 1 }}>
+                  <aside className="gp-context-column">
+                    <ProjectContextPanel
+                      repo={repo}
+                      defaultBranch={defaultBranch}
+                      currentBranch={currentBranch}
+                      sessionBranches={sessionBranches}
+                      onBranchChange={handleBranchChange}
+                      pulseNonce={pulseNonce}
+                      lastExecution={lastExecution}
+                      onSettingsClick={() => setSettingsOpen(true)}
+                    />
+                  </aside>
+
+                  <main className="gp-chat-column">
+                    <div className="panel-header">
+                      <span>GitPilot chat</span>
+                    </div>
+
+                    <ChatPanel
+                      repo={repo}
+                      defaultBranch={defaultBranch}
+                      currentBranch={currentBranch}
+                      onExecutionComplete={handleExecutionComplete}
+                      sessionChatState={sessionChatState}
+                      onSessionChatStateChange={updateSessionChat}
+                      sessionId={activeSessionId}
+                      onEnsureSession={ensureSession}
+                    />
+                  </main>
+                </div>
+              </div>
+            ) : (
+              <div className="empty-state">
+                <div className="empty-bot">🤖</div>
+                <h1>Select a repository</h1>
+                <p>Select a repo to begin agentic workflow.</p>
+              </div>
+            ))}
+        </main>
+      </div>
+
+      <Footer />
+
+      {repo && (
+        <ProjectSettingsModal
+          owner={repo.full_name?.split("/")[0] || repo.owner}
+          repo={repo.full_name?.split("/")[1] || repo.name}
+          isOpen={settingsOpen}
+          onClose={() => setSettingsOpen(false)}
+          activeEnvId={activeEnvId}
+          onEnvChange={setActiveEnvId}
+        />
+      )}
+
+      <AddRepoModal
+        isOpen={addRepoOpen}
+        onSelect={addRepoToContext}
+        onClose={() => setAddRepoOpen(false)}
+        excludeKeys={contextRepos.map((e) => e.repoKey)}
+      />
+
+      <AboutModal
+        isOpen={aboutOpen}
+        onClose={() => setAboutOpen(false)}
+      />
+
+      {toast && (
+        <div className="toast-notification">
+          <div style={{ fontSize: 12, fontWeight: 700 }}>{toast.title}</div>
+          <div style={{ fontSize: 12, opacity: 0.82 }}>{toast.message}</div>
+        </div>
+      )}
+
+      <style>{`
+        .toast-notification {
+          position: fixed;
+          top: 72px;
+          right: 18px;
+          z-index: 9999;
+          background: #0b0b0d;
+          color: #EDEDED;
+          border: 1px solid rgba(255,255,255,0.12);
+          border-left: 3px solid #3B82F6;
+          border-radius: 10px;
+          padding: 12px 14px;
+          min-width: 320px;
+          box-shadow: 0 10px 30px rgba(0,0,0,0.4);
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/components/AboutModal.jsx

@@ -0,0 +1,488 @@
+// frontend/components/AboutModal.jsx
+import React, { useEffect, useCallback, useState } from "react";
+import { apiUrl, safeFetchJSON } from "../utils/api.js";
+
+/**
+ * AboutModal — "About GitPilot" dialog shown from the user menu.
+ *
+ * Enterprise design goals:
+ * - Prominent brand mark matching docs/logo.svg (orange ring + GP monogram)
+ * - Clear identity: name, tagline, version (frontend + backend)
+ * - Credits the creator (Ruslan Magana Vsevolodovna) as a link to GitHub
+ * - Open-source positioning: Apache 2.0 license + GitHub repo link
+ * - Action row: View on GitHub, Report Issue, Documentation
+ * - Accessible: role="dialog", aria-modal, aria-labelledby, Escape to close,
+ *   focus trap via initial focus on close button
+ * - Brand palette: #D95C3D accent, #1C1C1F card, #27272A border, #EDEDED text
+ */
+
+const FRONTEND_VERSION =
+  typeof __APP_VERSION__ !== "undefined" ? __APP_VERSION__ : "0.1.5";
+
+export default function AboutModal({ isOpen, onClose }) {
+  const [backendVersion, setBackendVersion] = useState(null);
+
+  // Fetch backend version when opened
+  useEffect(() => {
+    if (!isOpen) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = await safeFetchJSON(apiUrl("/api/ping"), { timeout: 4000 });
+        if (!cancelled) {
+          setBackendVersion(data?.version || null);
+        }
+      } catch {
+        if (!cancelled) setBackendVersion(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen]);
+
+  // Escape to close
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+
+  // Lock body scroll while open
+  useEffect(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
+
+  const handleBackdropClick = useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) onClose?.();
+    },
+    [onClose]
+  );
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="about-modal-title"
+      onClick={handleBackdropClick}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 2000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 20,
+        background: "rgba(0, 0, 0, 0.65)",
+        backdropFilter: "blur(4px)",
+        WebkitBackdropFilter: "blur(4px)",
+        animation: "aboutBackdropIn 180ms ease-out",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          maxWidth: 520,
+          background: "#1C1C1F",
+          border: "1px solid #27272A",
+          borderRadius: 16,
+          boxShadow:
+            "0 32px 64px -16px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.4)",
+          color: "#EDEDED",
+          fontFamily:
+            '"Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+          letterSpacing: "-0.01em",
+          overflow: "hidden",
+          animation: "aboutCardIn 220ms cubic-bezier(0.16, 1, 0.3, 1)",
+        }}
+      >
+        {/* Close button */}
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close About dialog"
+          autoFocus
+          style={{
+            position: "absolute",
+            top: 14,
+            right: 14,
+            width: 32,
+            height: 32,
+            background: "transparent",
+            border: "1px solid transparent",
+            borderRadius: 8,
+            color: "#A1A1AA",
+            cursor: "pointer",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "all 120ms ease",
+            zIndex: 1,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "#27272A";
+            e.currentTarget.style.color = "#EDEDED";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "transparent";
+            e.currentTarget.style.color = "#A1A1AA";
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M4 4l8 8M12 4l-8 8"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+
+        {/* Hero: brand mark + name */}
+        <div
+          style={{
+            padding: "40px 32px 24px",
+            textAlign: "center",
+            background:
+              "radial-gradient(circle at 50% 0%, rgba(217, 92, 61, 0.12), transparent 70%)",
+          }}
+        >
+          <BrandMark />
+
+          <h2
+            id="about-modal-title"
+            style={{
+              margin: "20px 0 6px",
+              fontSize: 24,
+              fontWeight: 700,
+              color: "#EDEDED",
+              letterSpacing: "-0.02em",
+            }}
+          >
+            GitPilot
+          </h2>
+          <div
+            style={{
+              fontSize: 13,
+              color: "#A1A1AA",
+              marginBottom: 10,
+            }}
+          >
+            Enterprise Workspace Copilot
+          </div>
+
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "4px 12px",
+              background: "rgba(217, 92, 61, 0.12)",
+              border: "1px solid rgba(217, 92, 61, 0.25)",
+              borderRadius: 999,
+              fontSize: 11,
+              fontWeight: 600,
+              color: "#ff7a3c",
+              letterSpacing: "0.04em",
+              textTransform: "uppercase",
+            }}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: "#ff7a3c",
+                boxShadow: "0 0 8px rgba(255, 122, 60, 0.8)",
+              }}
+            />
+            Open Source · Apache 2.0
+          </div>
+        </div>
+
+        {/* Body */}
+        <div style={{ padding: "8px 32px 0" }}>
+          <p
+            style={{
+              fontSize: 14,
+              lineHeight: 1.6,
+              color: "#A1A1AA",
+              textAlign: "center",
+              margin: "0 0 24px",
+            }}
+          >
+            An agentic AI coding companion for your repositories. Ask, plan,
+            code, and ship — with multi-LLM support, security scanning, and
+            VS Code integration.
+          </p>
+
+          {/* Meta table */}
+          <div
+            style={{
+              background: "#131316",
+              border: "1px solid #27272A",
+              borderRadius: 10,
+              padding: "4px 0",
+              marginBottom: 24,
+            }}
+          >
+            <MetaRow label="Version" value={`v${FRONTEND_VERSION}`} />
+            <MetaRow
+              label="Backend"
+              value={backendVersion ? `v${backendVersion}` : "—"}
+            />
+            <MetaRow label="License" value="Apache 2.0" />
+            <MetaRow
+              label="Created by"
+              value={
+                <a
+                  href="https://github.com/ruslanmv"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    color: "#ff7a3c",
+                    textDecoration: "none",
+                    fontWeight: 600,
+                  }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.textDecoration = "underline")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.textDecoration = "none")
+                  }
+                >
+                  Ruslan Magana Vsevolodovna
+                </a>
+              }
+              isLast
+            />
+          </div>
+        </div>
+
+        {/* Action row */}
+        <div
+          style={{
+            padding: "0 32px 32px",
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr",
+            gap: 8,
+          }}
+        >
+          <ActionButton
+            href="https://github.com/ruslanmv/gitpilot"
+            icon={<GitHubIcon />}
+            label="GitHub"
+          />
+          <ActionButton
+            href="https://github.com/ruslanmv/gitpilot#readme"
+            icon={<DocsIcon />}
+            label="Docs"
+          />
+          <ActionButton
+            href="https://github.com/ruslanmv/gitpilot/issues"
+            icon={<BugIcon />}
+            label="Report"
+          />
+        </div>
+
+        {/* Footer */}
+        <div
+          style={{
+            padding: "16px 32px",
+            background: "#131316",
+            borderTop: "1px solid #27272A",
+            fontSize: 11,
+            color: "#71717a",
+            textAlign: "center",
+            lineHeight: 1.5,
+          }}
+        >
+          &copy; {new Date().getFullYear()} GitPilot · Made with care for
+          developers everywhere
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes aboutBackdropIn {
+          from { opacity: 0; }
+          to   { opacity: 1; }
+        }
+        @keyframes aboutCardIn {
+          from { opacity: 0; transform: translateY(12px) scale(0.97); }
+          to   { opacity: 1; transform: translateY(0) scale(1); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// ── Brand mark (mirrors docs/logo.svg) ──────────────────────────────
+function BrandMark() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{
+        position: "relative",
+        width: 88,
+        height: 88,
+        margin: "0 auto",
+      }}
+    >
+      {/* Outer subtle ring */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          borderRadius: "50%",
+          border: "2px solid rgba(255, 122, 60, 0.22)",
+        }}
+      />
+      {/* Active arc (top-right, uses conic gradient for smooth arc) */}
+      <div
+        style={{
+          position: "absolute",
+          inset: -2,
+          borderRadius: "50%",
+          background:
+            "conic-gradient(from -90deg, #ff7a3c 0deg, #D95C3D 90deg, transparent 91deg, transparent 360deg)",
+          mask: "radial-gradient(circle, transparent 40px, black 42px, black 44px, transparent 46px)",
+          WebkitMask:
+            "radial-gradient(circle, transparent 40px, black 42px, black 44px, transparent 46px)",
+        }}
+      />
+      {/* Soft core glow */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 14,
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(255, 122, 60, 0.22) 0%, rgba(255, 122, 60, 0.06) 60%, transparent 100%)",
+        }}
+      />
+      {/* GP monogram */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 28,
+          fontWeight: 700,
+          color: "#EDEDED",
+          letterSpacing: "-1px",
+        }}
+      >
+        GP
+      </div>
+    </div>
+  );
+}
+
+// ── Meta row ────────────────────────────────────────────────────────
+function MetaRow({ label, value, isLast = false }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "10px 16px",
+        borderBottom: isLast ? "none" : "1px solid #27272A",
+        fontSize: 13,
+      }}
+    >
+      <span style={{ color: "#71717a", fontWeight: 500 }}>{label}</span>
+      <span style={{ color: "#EDEDED", fontWeight: 600, textAlign: "right" }}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+// ── Action button ───────────────────────────────────────────────────
+function ActionButton({ href, icon, label }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6,
+        padding: "12px 8px",
+        background: "#131316",
+        border: "1px solid #27272A",
+        borderRadius: 10,
+        color: "#EDEDED",
+        fontSize: 12,
+        fontWeight: 600,
+        textDecoration: "none",
+        transition: "all 140ms ease",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = "#D95C3D";
+        e.currentTarget.style.background = "rgba(217, 92, 61, 0.08)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = "#27272A";
+        e.currentTarget.style.background = "#131316";
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          color: "#ff7a3c",
+          display: "inline-flex",
+        }}
+      >
+        {icon}
+      </span>
+      <span>{label}</span>
+    </a>
+  );
+}
+
+// ── Icons ───────────────────────────────────────────────────────────
+function GitHubIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405 1.02 0 2.04.135 3 .405 2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  );
+}
+
+function DocsIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+    </svg>
+  );
+}
+
+function BugIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <rect x="8" y="6" width="8" height="14" rx="4" />
+      <path d="M19 7l-3 2M5 7l3 2M19 13h-3M5 13h3M19 19l-3-2M5 19l3-2M12 6V2" />
+    </svg>
+  );
+}

frontend/components/AddRepoModal.jsx

@@ -0,0 +1,256 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { authFetch } from "../utils/api.js";
+
+/**
+ * AddRepoModal — lightweight portal modal for adding repos to context.
+ *
+ * Embeds a minimal repo search/list (not the full RepoSelector) to keep
+ * the modal focused. Filters out repos already in context.
+ */
+export default function AddRepoModal({ isOpen, onSelect, onClose, excludeKeys = [] }) {
+  const [query, setQuery] = useState("");
+  const [repos, setRepos] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchRepos = useCallback(
+    async (searchQuery) => {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams({ per_page: "50" });
+        if (searchQuery) params.set("query", searchQuery);
+        const res = await authFetch(`/api/repos?${params}`);
+        if (!res.ok) return;
+        const data = await res.json();
+        setRepos(data.repositories || []);
+      } catch (err) {
+        console.warn("AddRepoModal: fetch failed:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery("");
+      fetchRepos("");
+    }
+  }, [isOpen, fetchRepos]);
+
+  // Debounced search
+  useEffect(() => {
+    if (!isOpen) return;
+    const t = setTimeout(() => fetchRepos(query), 300);
+    return () => clearTimeout(t);
+  }, [query, isOpen, fetchRepos]);
+
+  const excludeSet = new Set(excludeKeys);
+  const filtered = repos.filter((r) => {
+    const key = r.full_name || `${r.owner}/${r.name}`;
+    return !excludeSet.has(key);
+  });
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      style={styles.overlay}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div style={styles.modal} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.header}>
+          <span style={styles.headerTitle}>Add Repository</span>
+          <button type="button" style={styles.closeBtn} onClick={onClose}>
+            &times;
+          </button>
+        </div>
+
+        <div style={styles.searchBox}>
+          <input
+            type="text"
+            placeholder="Search repositories..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            style={styles.searchInput}
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Escape") onClose();
+            }}
+          />
+        </div>
+
+        <div style={styles.list}>
+          {loading && filtered.length === 0 && (
+            <div style={styles.statusRow}>Loading...</div>
+          )}
+          {!loading && filtered.length === 0 && (
+            <div style={styles.statusRow}>
+              {excludeKeys.length > 0 && repos.length > 0
+                ? "All matching repos are already in context"
+                : "No repositories found"}
+            </div>
+          )}
+          {filtered.map((r) => {
+            const key = r.full_name || `${r.owner}/${r.name}`;
+            return (
+              <button
+                key={r.id || key}
+                type="button"
+                style={styles.repoRow}
+                onClick={() => onSelect(r)}
+              >
+                <div style={styles.repoInfo}>
+                  <span style={styles.repoName}>{r.name}</span>
+                  <span style={styles.repoOwner}>{r.owner}</span>
+                </div>
+                <div style={styles.repoMeta}>
+                  {r.private && <span style={styles.privateBadge}>Private</span>}
+                  <span style={styles.branchHint}>{r.default_branch || "main"}</span>
+                </div>
+              </button>
+            );
+          })}
+          {loading && filtered.length > 0 && (
+            <div style={styles.statusRow}>Updating...</div>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+const styles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    zIndex: 10000,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  modal: {
+    width: 440,
+    maxHeight: "70vh",
+    backgroundColor: "#131316",
+    border: "1px solid #27272A",
+    borderRadius: 12,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    boxShadow: "0 12px 40px rgba(0,0,0,0.5)",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 14px",
+    borderBottom: "1px solid #27272A",
+    backgroundColor: "#18181B",
+  },
+  headerTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#E4E4E7",
+  },
+  closeBtn: {
+    width: 26,
+    height: 26,
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "transparent",
+    color: "#A1A1AA",
+    fontSize: 16,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  searchBox: {
+    padding: "10px 12px",
+    borderBottom: "1px solid #27272A",
+  },
+  searchInput: {
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "#18181B",
+    color: "#E4E4E7",
+    fontSize: 13,
+    outline: "none",
+    fontFamily: "monospace",
+    boxSizing: "border-box",
+  },
+  list: {
+    flex: 1,
+    overflowY: "auto",
+    maxHeight: 360,
+  },
+  statusRow: {
+    padding: "16px 12px",
+    textAlign: "center",
+    fontSize: 12,
+    color: "#71717A",
+  },
+  repoRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "10px 14px",
+    border: "none",
+    borderBottom: "1px solid rgba(39, 39, 42, 0.5)",
+    background: "transparent",
+    color: "#E4E4E7",
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.1s",
+  },
+  repoInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    minWidth: 0,
+  },
+  repoName: {
+    fontSize: 13,
+    fontWeight: 600,
+    fontFamily: "monospace",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  repoOwner: {
+    fontSize: 11,
+    color: "#71717A",
+  },
+  repoMeta: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 0,
+  },
+  privateBadge: {
+    fontSize: 9,
+    padding: "1px 5px",
+    borderRadius: 8,
+    backgroundColor: "rgba(239, 68, 68, 0.12)",
+    color: "#F87171",
+    fontWeight: 600,
+    textTransform: "uppercase",
+  },
+  branchHint: {
+    fontSize: 10,
+    color: "#52525B",
+    fontFamily: "monospace",
+  },
+};

frontend/components/AdminTabs/AdvancedTab.jsx

@@ -0,0 +1,360 @@
+// frontend/components/AdminTabs/AdvancedTab.jsx
+import React, { useEffect, useState, useCallback } from "react";
+import { apiUrl, safeFetchJSON } from "../../utils/api.js";
+
+/**
+ * Advanced tab — inline toggles for:
+ *   - Lite Mode (via /api/settings/topology — sets topology to "lite_mode")
+ *   - Permission Mode (normal | auto | plan via /api/permissions/mode)
+ *   - Link to full Settings modal for power users
+ *
+ * Best practices applied:
+ * - Optimistic UI with rollback on error
+ * - Each setting has its own loading indicator (no global lock)
+ * - Descriptions explain what each mode does
+ * - ARIA-labeled toggle switches for accessibility
+ */
+
+const PERMISSION_MODES = [
+  {
+    value: "normal",
+    label: "Normal",
+    description:
+      "Ask before writing files or running commands (recommended).",
+  },
+  {
+    value: "auto",
+    label: "Auto",
+    description:
+      "Approve all tool calls automatically. Use only when you trust the agent.",
+  },
+  {
+    value: "plan",
+    label: "Plan Only",
+    description:
+      "Read-only mode. Agent cannot write files or run commands.",
+  },
+];
+
+function ToggleSwitch({ checked, onChange, disabled, ariaLabel }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      onClick={() => !disabled && onChange(!checked)}
+      disabled={disabled}
+      style={{
+        position: "relative",
+        width: "44px",
+        height: "24px",
+        borderRadius: "12px",
+        background: checked ? "#3B82F6" : "#374151",
+        border: "none",
+        cursor: disabled ? "not-allowed" : "pointer",
+        transition: "background 150ms ease",
+        padding: 0,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: "2px",
+          left: checked ? "22px" : "2px",
+          width: "20px",
+          height: "20px",
+          borderRadius: "50%",
+          background: "#fff",
+          transition: "left 150ms ease",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+        }}
+      />
+    </button>
+  );
+}
+
+export default function AdvancedTab({ showToast, onOpenFullSettings }) {
+  const [liteMode, setLiteMode] = useState(false);
+  const [permissionMode, setPermissionMode] = useState("normal");
+  const [loading, setLoading] = useState(true);
+  const [updatingLite, setUpdatingLite] = useState(false);
+  const [updatingPerm, setUpdatingPerm] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Initial fetch: topology preference + permission mode
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const [topo, perms] = await Promise.all([
+          safeFetchJSON(apiUrl("/api/settings/topology"), { timeout: 5000 })
+            .catch(() => ({ topology: null })),
+          safeFetchJSON(apiUrl("/api/permissions"), { timeout: 5000 })
+            .catch(() => ({ mode: "normal" })),
+        ]);
+        if (cancelled) return;
+        setLiteMode(topo?.topology === "lite_mode");
+        setPermissionMode(perms?.mode || perms?.policy?.mode || "normal");
+      } catch (err) {
+        if (!cancelled) setError(err?.message || "Failed to load settings");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleLiteToggle = useCallback(async (next) => {
+    setUpdatingLite(true);
+    setError(null);
+    const previous = liteMode;
+    setLiteMode(next); // optimistic
+    try {
+      await safeFetchJSON(apiUrl("/api/settings/topology"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ topology: next ? "lite_mode" : null }),
+        timeout: 5000,
+      });
+      showToast?.(
+        "Lite Mode " + (next ? "enabled" : "disabled"),
+        next
+          ? "Single-agent path — better for small local models."
+          : "Multi-agent path — uses full CrewAI orchestration."
+      );
+    } catch (err) {
+      setLiteMode(previous); // rollback
+      setError(err?.message || "Failed to update lite mode");
+    } finally {
+      setUpdatingLite(false);
+    }
+  }, [liteMode, showToast]);
+
+  const handlePermissionChange = useCallback(async (next) => {
+    setUpdatingPerm(true);
+    setError(null);
+    const previous = permissionMode;
+    setPermissionMode(next); // optimistic
+    try {
+      const res = await fetch(apiUrl("/api/permissions/mode"), {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mode: next }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.detail || `HTTP ${res.status}`);
+      }
+      showToast?.(
+        "Permission mode updated",
+        `Set to ${next}.`
+      );
+    } catch (err) {
+      setPermissionMode(previous); // rollback
+      setError(err?.message || "Failed to update permission mode");
+    } finally {
+      setUpdatingPerm(false);
+    }
+  }, [permissionMode, showToast]);
+
+  if (loading) {
+    return (
+      <div>
+        <h3 style={{ marginBottom: "16px" }}>Advanced</h3>
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "40px 20px",
+            textAlign: "center",
+            border: "1px solid #2a2b36",
+            fontSize: "12px",
+            opacity: 0.6,
+          }}
+        >
+          Loading advanced settings...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h3 style={{ marginBottom: "16px" }}>Advanced</h3>
+      <p style={{ fontSize: "12px", opacity: 0.7, marginBottom: "16px" }}>
+        Fine-tune GitPilot's agent behavior and safety settings.
+      </p>
+
+      {error && (
+        <div
+          role="alert"
+          style={{
+            background: "#7f1d1d",
+            color: "#fecaca",
+            border: "1px solid #991b1b",
+            borderRadius: "8px",
+            padding: "12px",
+            fontSize: "12px",
+            marginBottom: "16px",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* Lite Mode toggle */}
+      <div
+        style={{
+          background: "#1a1b26",
+          borderRadius: "8px",
+          padding: "16px",
+          border: "1px solid #2a2b36",
+          marginBottom: "12px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            gap: "16px",
+          }}
+        >
+          <div style={{ flex: 1 }}>
+            <h4 style={{ marginBottom: "4px", fontSize: "14px" }}>Lite Mode</h4>
+            <p style={{ fontSize: "12px", opacity: 0.7, lineHeight: 1.5 }}>
+              Use a simplified single-agent prompt instead of the multi-agent
+              CrewAI pipeline. Recommended for small local models
+              (qwen2.5:1.5b, deepseek-r1, phi3:mini) that struggle with the
+              ReAct format.
+            </p>
+          </div>
+          <ToggleSwitch
+            checked={liteMode}
+            onChange={handleLiteToggle}
+            disabled={updatingLite}
+            ariaLabel="Toggle Lite Mode"
+          />
+        </div>
+      </div>
+
+      {/* Permission Mode selector */}
+      <div
+        style={{
+          background: "#1a1b26",
+          borderRadius: "8px",
+          padding: "16px",
+          border: "1px solid #2a2b36",
+          marginBottom: "12px",
+        }}
+      >
+        <h4 style={{ marginBottom: "4px", fontSize: "14px" }}>Permission Mode</h4>
+        <p style={{ fontSize: "12px", opacity: 0.7, marginBottom: "12px" }}>
+          Controls when the agent needs your approval before writing files or
+          running commands.
+        </p>
+
+        <div style={{ display: "grid", gap: "8px" }}>
+          {PERMISSION_MODES.map((mode) => {
+            const selected = permissionMode === mode.value;
+            return (
+              <label
+                key={mode.value}
+                style={{
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "10px",
+                  padding: "10px 12px",
+                  background: selected ? "#1e3a5f" : "#0d0e15",
+                  border: selected ? "1px solid #3B82F6" : "1px solid #2a2b36",
+                  borderRadius: "6px",
+                  cursor: updatingPerm ? "not-allowed" : "pointer",
+                  opacity: updatingPerm && !selected ? 0.5 : 1,
+                }}
+              >
+                <input
+                  type="radio"
+                  name="permission-mode"
+                  value={mode.value}
+                  checked={selected}
+                  onChange={() => handlePermissionChange(mode.value)}
+                  disabled={updatingPerm}
+                  style={{ marginTop: "2px", cursor: "inherit" }}
+                />
+                <div>
+                  <div
+                    style={{
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      color: selected ? "#93c5fd" : "#fff",
+                    }}
+                  >
+                    {mode.label}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: "11px",
+                      opacity: 0.7,
+                      marginTop: "2px",
+                    }}
+                  >
+                    {mode.description}
+                  </div>
+                </div>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Link to full settings modal */}
+      <div
+        style={{
+          background: "#1a1b26",
+          borderRadius: "8px",
+          padding: "16px",
+          border: "1px solid #2a2b36",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "16px",
+          }}
+        >
+          <div>
+            <h4 style={{ marginBottom: "4px", fontSize: "14px" }}>
+              Full Settings
+            </h4>
+            <p style={{ fontSize: "12px", opacity: 0.7 }}>
+              Server URL, telemetry, debug logs, environment variables, and more.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onOpenFullSettings}
+            style={{
+              padding: "8px 16px",
+              background: "transparent",
+              color: "#93c5fd",
+              border: "1px solid #3B82F6",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "12px",
+              fontWeight: 600,
+              whiteSpace: "nowrap",
+            }}
+          >
+            Open Settings Modal
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/AdminTabs/IntegrationsTab.jsx

@@ -0,0 +1,238 @@
+// frontend/components/AdminTabs/IntegrationsTab.jsx
+import React, { useEffect, useState } from "react";
+import { apiUrl, safeFetchJSON } from "../../utils/api.js";
+
+/**
+ * Integrations tab — shows connection status for GitHub (and future
+ * third-party integrations) with Connect/Disconnect actions.
+ *
+ * Best practices applied:
+ * - Fetch current status on mount via /api/auth/status
+ * - Show connected user info if already authenticated
+ * - "Connect GitHub" button opens /api/auth/url in the same window
+ *   (OAuth flow will redirect back with ?code=...)
+ * - Disconnect clears localStorage token and re-fetches status
+ * - Handles both Web OAuth and Device Flow modes
+ */
+
+export default function IntegrationsTab({ userInfo, onDisconnect, showToast }) {
+  const [authStatus, setAuthStatus] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [connecting, setConnecting] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = await safeFetchJSON(apiUrl("/api/auth/status"), { timeout: 5000 });
+        if (!cancelled) setAuthStatus(data);
+      } catch (err) {
+        if (!cancelled) setError(err?.message || "Failed to check auth status");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleConnect = async () => {
+    setConnecting(true);
+    setError(null);
+    try {
+      if (authStatus?.mode === "web") {
+        // Web OAuth flow — redirect to GitHub authorization URL
+        const { authorization_url, state } = await safeFetchJSON(
+          apiUrl("/api/auth/url"),
+          { timeout: 5000 }
+        );
+        if (state) {
+          sessionStorage.setItem("gitpilot_oauth_state", state);
+        }
+        // Full page redirect (OAuth providers don't support iframes)
+        window.location.href = authorization_url;
+      } else {
+        // Device flow — the LoginPage already handles this.
+        showToast?.(
+          "Device flow",
+          "GitHub device flow is configured. Sign out and sign in again to reconnect."
+        );
+      }
+    } catch (err) {
+      setError(err?.message || "Failed to start OAuth flow");
+      setConnecting(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    if (!window.confirm("Disconnect GitHub? You will be signed out.")) return;
+    localStorage.removeItem("github_token");
+    localStorage.removeItem("github_user");
+    onDisconnect?.();
+    showToast?.("Disconnected", "GitHub token removed.");
+  };
+
+  const isConnected = !!(userInfo && userInfo.login);
+
+  return (
+    <div>
+      <h3 style={{ marginBottom: "16px" }}>Integrations</h3>
+      <p style={{ fontSize: "12px", opacity: 0.7, marginBottom: "16px" }}>
+        Connect third-party services to unlock additional GitPilot features.
+      </p>
+
+      {/* GitHub integration card */}
+      <div
+        style={{
+          background: "#1a1b26",
+          borderRadius: "8px",
+          padding: "20px",
+          border: "1px solid #2a2b36",
+          marginBottom: "16px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            marginBottom: "12px",
+          }}
+        >
+          <div>
+            <h4 style={{ marginBottom: "4px" }}>GitHub</h4>
+            <p style={{ fontSize: "12px", opacity: 0.7 }}>
+              Pull requests, issues, and remote repository workflows.
+            </p>
+          </div>
+          <span
+            style={{
+              padding: "2px 10px",
+              borderRadius: "10px",
+              fontSize: "11px",
+              fontWeight: 600,
+              background: isConnected ? "#064e3b" : "#374151",
+              color: isConnected ? "#a7f3d0" : "#9ca3af",
+              border: `1px solid ${isConnected ? "#065f46" : "#4b5563"}`,
+            }}
+          >
+            {loading ? "CHECKING..." : isConnected ? "CONNECTED" : "NOT CONNECTED"}
+          </span>
+        </div>
+
+        {isConnected && userInfo && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              padding: "12px",
+              background: "#0d0e15",
+              borderRadius: "6px",
+              marginBottom: "12px",
+            }}
+          >
+            {userInfo.avatar_url && (
+              <img
+                src={userInfo.avatar_url}
+                alt={userInfo.login}
+                style={{ width: "36px", height: "36px", borderRadius: "50%" }}
+              />
+            )}
+            <div>
+              <div style={{ fontSize: "13px", fontWeight: 600 }}>
+                {userInfo.name || userInfo.login}
+              </div>
+              <div style={{ fontSize: "11px", opacity: 0.6 }}>@{userInfo.login}</div>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div
+            role="alert"
+            style={{
+              padding: "8px 12px",
+              background: "#7f1d1d",
+              color: "#fecaca",
+              border: "1px solid #991b1b",
+              borderRadius: "4px",
+              fontSize: "11px",
+              marginBottom: "12px",
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        <div style={{ display: "flex", gap: "8px" }}>
+          {isConnected ? (
+            <button
+              type="button"
+              onClick={handleDisconnect}
+              style={{
+                padding: "8px 16px",
+                background: "transparent",
+                color: "#f87171",
+                border: "1px solid #991b1b",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "12px",
+                fontWeight: 600,
+              }}
+            >
+              Disconnect
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={handleConnect}
+              disabled={connecting || loading}
+              style={{
+                padding: "8px 16px",
+                background: connecting ? "#555" : "#3B82F6",
+                color: "#fff",
+                border: "none",
+                borderRadius: "4px",
+                cursor: connecting || loading ? "not-allowed" : "pointer",
+                fontSize: "12px",
+                fontWeight: 600,
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "6px",
+              }}
+            >
+              {connecting ? "Connecting..." : "Connect GitHub"}
+            </button>
+          )}
+        </div>
+
+        {authStatus && !isConnected && (
+          <div style={{ fontSize: "10px", opacity: 0.5, marginTop: "10px" }}>
+            Auth mode: {authStatus.mode || "unknown"}
+            {authStatus.oauth_configured && " (Web OAuth)"}
+            {authStatus.pat_configured && " (Personal Access Token)"}
+          </div>
+        )}
+      </div>
+
+      {/* Placeholder for future integrations */}
+      <div
+        style={{
+          background: "#1a1b26",
+          borderRadius: "8px",
+          padding: "20px",
+          border: "1px dashed #2a2b36",
+          opacity: 0.5,
+          textAlign: "center",
+        }}
+      >
+        <p style={{ fontSize: "12px", margin: 0 }}>
+          More integrations coming soon (GitLab, Bitbucket, Jira, Slack)
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/components/AdminTabs/MCPServersTab.jsx

@@ -0,0 +1,337 @@
+// frontend/components/AdminTabs/MCPServersTab.jsx
+//
+// Settings tab for managing MCP Context Forge servers.
+//
+// UX layout (mirrors industry-standard plugin/extension managers):
+//
+//   ┌─ Header ─ gateway pill, totals, global "MCP enabled" toggle ─┐
+//   ├─ Sub-tabs: Installed · Catalog · Custom ────────────────────┤
+//   ├─ ServerCard list (Installed)                                 │
+//   │     ▸ status / description / tags / tool count               │
+//   │     ▸ Test · Configure · Disable · Uninstall                 │
+//   │     ▸ Expandable per-tool list with risk badges + toggles    │
+//   └──────────────────────────────────────────────────────────────┘
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { apiUrl, safeFetchJSON } from "../../utils/api.js";
+
+import ServerCard from "./mcp/ServerCard.jsx";
+import CatalogList from "./mcp/CatalogList.jsx";
+import CustomInstallForm from "./mcp/CustomInstallForm.jsx";
+import GatewayHeader from "./mcp/GatewayHeader.jsx";
+import SyncReport from "./mcp/SyncReport.jsx";
+
+const TAB_INSTALLED = "installed";
+const TAB_CATALOG = "catalog";
+const TAB_CUSTOM = "custom";
+
+export default function MCPServersTab({ showToast }) {
+  const [activeSubTab, setActiveSubTab] = useState(TAB_INSTALLED);
+  const [status, setStatus] = useState(null);
+  const [servers, setServers] = useState([]);
+  const [catalog, setCatalog] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [syncing, setSyncing] = useState(false);
+  const [syncReport, setSyncReport] = useState(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [statusData, serversData, catalogData] = await Promise.all([
+        safeFetchJSON(apiUrl("/api/mcp/status"), { timeout: 5000 }),
+        safeFetchJSON(apiUrl("/api/mcp/servers"), { timeout: 5000 }),
+        safeFetchJSON(apiUrl("/api/mcp/catalog"), { timeout: 5000 }),
+      ]);
+      setStatus(statusData);
+      setServers(serversData?.servers || []);
+      setCatalog(catalogData?.items || []);
+    } catch (err) {
+      setError(err?.message || "Failed to load MCP server state");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const post = useCallback(
+    async (path, body) => {
+      try {
+        const res = await fetch(apiUrl(path), {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: body ? JSON.stringify(body) : undefined,
+        });
+        if (!res.ok) {
+          const detail = await res.json().catch(() => ({}));
+          throw new Error(detail?.detail || `HTTP ${res.status}`);
+        }
+        return await res.json();
+      } catch (err) {
+        showToast?.("MCP error", err?.message || String(err));
+        throw err;
+      }
+    },
+    [showToast]
+  );
+
+  // ---- Server actions -----------------------------------------------------
+  const onEnableServer = async (id) => {
+    await post(`/api/mcp/servers/${id}/enable`);
+    showToast?.("Server enabled", id);
+    await refresh();
+  };
+  const onDisableServer = async (id) => {
+    await post(`/api/mcp/servers/${id}/disable`);
+    showToast?.("Server disabled", id);
+    await refresh();
+  };
+  const onUninstallServer = async (id) => {
+    if (
+      !window.confirm(
+        `Uninstall ${id}? GitPilot will stop calling its tools immediately.`
+      )
+    )
+      return;
+    await post(`/api/mcp/servers/${id}/uninstall`);
+    showToast?.("Server uninstalled", id);
+    await refresh();
+  };
+  const onTestServer = async (id) => {
+    const result = await post(`/api/mcp/servers/${id}/test`);
+    if (result?.ok) {
+      showToast?.("Server healthy", id);
+    } else {
+      showToast?.(
+        "Server unreachable",
+        result?.reason || result?.error || "Unknown error"
+      );
+    }
+    return result;
+  };
+  const onSync = useCallback(async () => {
+    setSyncing(true);
+    setSyncReport(null);
+    try {
+      const report = await post("/api/mcp/sync", {});
+      setSyncReport(report);
+      const total =
+        (report.added?.length || 0) +
+        (report.kept?.length || 0) +
+        (report.orphaned?.length || 0);
+      showToast?.(
+        report.forge_unreachable ? "Sync failed" : "Sync complete",
+        report.forge_unreachable
+          ? report.error || "forge unreachable"
+          : `+${report.added?.length || 0} added · ${total} total`
+      );
+      await refresh();
+    } catch {
+      // post() already toasted; nothing more to do.
+    } finally {
+      setSyncing(false);
+    }
+  }, [post, refresh, showToast]);
+
+  const onForgetOrphan = async (id) => {
+    if (
+      !window.confirm(
+        `Forget ${id}? It will be removed from the local list.\n` +
+          "Re-attach it to MCP Context Forge then click Sync to bring it back."
+      )
+    )
+      return;
+    await post(`/api/mcp/servers/${id}/forget`);
+    showToast?.("Server forgotten", id);
+    await refresh();
+  };
+
+  const onToggleTool = async (serverId, toolName, enabled) => {
+    await post(
+      `/api/mcp/servers/${serverId}/tools/${encodeURIComponent(
+        toolName
+      )}/toggle`,
+      { enabled }
+    );
+    await refresh();
+  };
+
+  const onInstallFromCatalog = async (serverId) => {
+    await post("/api/mcp/servers/install", { server_id: serverId });
+    showToast?.("Installed", `${serverId} (disabled until you enable it)`);
+    await refresh();
+    setActiveSubTab(TAB_INSTALLED);
+  };
+
+  const onInstallCustom = async (registerJson) => {
+    await post("/api/mcp/servers/install-custom", {
+      register_json: registerJson,
+    });
+    showToast?.("Custom server added", registerJson.name);
+    await refresh();
+    setActiveSubTab(TAB_INSTALLED);
+  };
+
+  // ---- Derived totals -----------------------------------------------------
+  const installedCount = servers.filter((s) => s.installed).length;
+  const enabledCount = servers.filter((s) => s.installed && s.enabled).length;
+  const totalTools = useMemo(
+    () => servers.reduce((acc, s) => acc + (s.tool_count || 0), 0),
+    [servers]
+  );
+
+  return (
+    <div>
+      <GatewayHeader
+        status={status}
+        installedCount={installedCount}
+        enabledCount={enabledCount}
+        totalTools={totalTools}
+        onRefresh={refresh}
+        onSync={onSync}
+        syncing={syncing}
+      />
+
+      {syncReport && (
+        <SyncReport
+          report={syncReport}
+          onDismiss={() => setSyncReport(null)}
+        />
+      )}
+
+      {/* Sub-tab strip */}
+      <div
+        role="tablist"
+        style={{
+          display: "flex",
+          gap: "4px",
+          marginBottom: "16px",
+          borderBottom: "1px solid #2a2b36",
+        }}
+      >
+        {[
+          { id: TAB_INSTALLED, label: `Installed (${installedCount})` },
+          { id: TAB_CATALOG, label: `Catalog (${catalog.length})` },
+          { id: TAB_CUSTOM, label: "Custom" },
+        ].map((t) => (
+          <button
+            key={t.id}
+            role="tab"
+            aria-selected={activeSubTab === t.id}
+            onClick={() => setActiveSubTab(t.id)}
+            style={{
+              padding: "10px 16px",
+              border: "none",
+              background: "transparent",
+              color: activeSubTab === t.id ? "#93c5fd" : "#a0a0b0",
+              borderBottom:
+                activeSubTab === t.id
+                  ? "2px solid #3B82F6"
+                  : "2px solid transparent",
+              cursor: "pointer",
+              fontSize: "13px",
+              fontWeight: activeSubTab === t.id ? 600 : 400,
+            }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {error && (
+        <div
+          role="alert"
+          style={{
+            padding: "12px",
+            background: "#5c1a1a",
+            border: "1px solid #8a2a2a",
+            borderRadius: "6px",
+            marginBottom: "16px",
+            color: "#fecaca",
+            fontSize: "13px",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {loading && !servers.length && (
+        <p style={{ color: "#a0a0b0", fontSize: "13px" }}>Loading…</p>
+      )}
+
+      {activeSubTab === TAB_INSTALLED && !loading && (
+        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+          {servers.length === 0 && (
+            <EmptyState
+              title="No MCP servers installed"
+              hint="Browse the catalog or paste a register.json under Custom."
+              actionLabel="Browse catalog"
+              onAction={() => setActiveSubTab(TAB_CATALOG)}
+            />
+          )}
+          {servers.map((s) => (
+            <ServerCard
+              key={s.id}
+              server={s}
+              onEnable={() => onEnableServer(s.id)}
+              onDisable={() => onDisableServer(s.id)}
+              onUninstall={() => onUninstallServer(s.id)}
+              onTest={() => onTestServer(s.id)}
+              onForget={s.orphan ? () => onForgetOrphan(s.id) : undefined}
+              onToggleTool={(tool, enabled) =>
+                onToggleTool(s.id, tool, enabled)
+              }
+            />
+          ))}
+        </div>
+      )}
+
+      {activeSubTab === TAB_CATALOG && !loading && (
+        <CatalogList items={catalog} onInstall={onInstallFromCatalog} />
+      )}
+
+      {activeSubTab === TAB_CUSTOM && (
+        <CustomInstallForm onSubmit={onInstallCustom} />
+      )}
+    </div>
+  );
+}
+
+function EmptyState({ title, hint, actionLabel, onAction }) {
+  return (
+    <div
+      style={{
+        padding: "32px",
+        background: "#1a1b26",
+        border: "1px dashed #2a2b36",
+        borderRadius: "8px",
+        textAlign: "center",
+      }}
+    >
+      <h4 style={{ margin: "0 0 8px 0", color: "#e0e0e7" }}>{title}</h4>
+      <p style={{ margin: "0 0 16px 0", color: "#a0a0b0", fontSize: "13px" }}>
+        {hint}
+      </p>
+      {actionLabel && (
+        <button
+          onClick={onAction}
+          style={{
+            padding: "8px 16px",
+            background: "#3B82F6",
+            color: "#fff",
+            border: "none",
+            borderRadius: "6px",
+            cursor: "pointer",
+            fontSize: "13px",
+          }}
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}

frontend/components/AdminTabs/MatrixLabInstallModal.jsx

@@ -0,0 +1,1013 @@
+// frontend/components/AdminTabs/MatrixLabInstallModal.jsx
+import React, { useCallback, useEffect, useState } from "react";
+import { apiUrl } from "../../utils/api.js";
+
+/**
+ * MatrixLab install modal — the "addon store" experience.
+ *
+ * Drives a single state machine off /api/matrixlab/* so the user sees
+ * one coherent state at a time (not "Unreachable" + "Running" + raw
+ * stack-trace at once). Default view exposes a single primary button;
+ * Runner URL / token / image / network / timeout live behind an
+ * Advanced disclosure.
+ *
+ * Status names mirror the backend MatrixLabStatus enum:
+ *   not_installed | installing | starting | stopping | checking |
+ *   ready | needs_attention | failed
+ */
+
+// Progress checklists vary by which lifecycle the operator launched.
+// The active "current step" key is set on the busy state so the
+// checklist tracks the user's chosen journey, not a generic install.
+const PROGRESS_STEPS = {
+  install: [
+    { key: "system",   label: "Checking system" },
+    { key: "install",  label: "Downloading MatrixLab" },
+    { key: "start",    label: "Starting runner" },
+    { key: "test",     label: "Testing connection" },
+    { key: "activate", label: "Activating MatrixLab" },
+  ],
+  repair: [
+    { key: "system",   label: "Checking runner URL" },
+    { key: "repair",   label: "Restarting runner" },
+    { key: "test",     label: "Testing connection" },
+    { key: "activate", label: "Activating MatrixLab" },
+  ],
+  reinstall: [
+    { key: "system",   label: "Stopping current runner" },
+    { key: "remove",   label: "Removing old addon" },
+    { key: "install",  label: "Downloading fresh version" },
+    { key: "start",    label: "Starting runner" },
+    { key: "test",     label: "Testing connection" },
+    { key: "activate", label: "Activating MatrixLab" },
+  ],
+};
+
+// Primary action label and the journey it triggers, keyed by the
+// addon's normalised status.  Mapping is exhaustive so the modal
+// always has a clear "next thing to do" button.
+const PRIMARY_BY_STATUS = {
+  not_installed:   { label: "Install and Start",  action: "install"  },
+  installing:      { label: "Installing…",        action: null       },
+  starting:        { label: "Starting…",          action: null       },
+  stopping:        { label: "Stopping…",          action: null       },
+  checking:        { label: "Checking…",          action: null       },
+  needs_attention: { label: "Repair connection",  action: "repair"   },
+  failed:          { label: "Retry installation", action: "install"  },
+  ready:           { label: "Done",               action: "done"     },
+};
+
+function statusPill(status) {
+  const map = {
+    not_installed: { label: "Not installed", bg: "#374151", fg: "#d1d5db" },
+    installing:    { label: "Installing",    bg: "#0d3320", fg: "#86efac" },
+    starting:      { label: "Starting",      bg: "#0d3320", fg: "#86efac" },
+    stopping:      { label: "Stopping",      bg: "#3d2d11", fg: "#fde68a" },
+    checking:      { label: "Checking",      bg: "#0d3320", fg: "#86efac" },
+    ready:         { label: "Ready",         bg: "#0d3320", fg: "#86efac" },
+    needs_attention: { label: "Needs attention", bg: "#3d2d11", fg: "#fde68a" },
+    failed:        { label: "Failed",        bg: "#3d1111", fg: "#fca5a5" },
+  };
+  return map[status] || map.not_installed;
+}
+
+export default function MatrixLabInstallModal({ onClose, onActivated }) {
+  const [status, setStatus] = useState(null);   // MatrixLabStatus from backend
+  const [busy, setBusy] = useState(false);
+  // Which journey is currently in flight ("install" | "repair" |
+  // "reinstall") — drives the progress checklist's stage list.
+  const [journey, setJourney] = useState(null);
+  const [progressStep, setProgressStep] = useState(null);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+  const [logs, setLogs] = useState(null);
+  const [showLogs, setShowLogs] = useState(false);
+  // Reinstall confirmation prompt + the destructive "wipe images" opt-in.
+  const [reinstallConfirm, setReinstallConfirm] = useState(false);
+  const [reinstallWipe, setReinstallWipe] = useState(false);
+
+  // Mirror of /api/sandbox/status for the Advanced panel.
+  const [advanced, setAdvanced] = useState(null);
+  const [tokenInput, setTokenInput] = useState("");
+
+  const refresh = useCallback(async () => {
+    try {
+      const r = await fetch(apiUrl("/api/matrixlab/status"));
+      const data = await r.json();
+      setStatus(data);
+    } catch (err) {
+      setStatus({
+        status: "failed",
+        message: "GitPilot backend could not return a MatrixLab status.",
+        errorCode: "BACKEND_UNREACHABLE",
+        technicalDetails: { rawError: err?.message || String(err) },
+      });
+    }
+  }, []);
+
+  const refreshAdvanced = useCallback(async () => {
+    try {
+      const r = await fetch(apiUrl("/api/sandbox/status"));
+      const data = await r.json();
+      setAdvanced(data);
+    } catch (err) {
+      // Non-fatal — Advanced just stays empty.
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    refreshAdvanced();
+  }, [refresh, refreshAdvanced]);
+
+  // Run a sequence of phased POSTs against /api/matrixlab/* and walk
+  // the progress checklist as each one returns.  Used for install,
+  // repair, and reinstall — they differ only in which endpoint kicks
+  // off the journey.
+  const runJourney = useCallback(async (journeyKey, kickoffPath, kickoffBody) => {
+    setBusy(true);
+    setJourney(journeyKey);
+    setShowDetails(false);
+    try {
+      // Phase 1: kickoff (install / repair / reinstall).  Each backend
+      // endpoint is itself idempotent and aggregates several docker
+      // commands; the modal walks the checklist on the way.
+      setProgressStep(journeyKey === "reinstall" ? "system" : journeyKey);
+      let r = await fetch(apiUrl(kickoffPath), {
+        method: "POST",
+        headers: kickoffBody ? { "Content-Type": "application/json" } : undefined,
+        body: kickoffBody ? JSON.stringify(kickoffBody) : undefined,
+      });
+      let data = await r.json();
+      setStatus(data);
+      if (data.status === "failed") return;
+
+      // Phase 2: explicit connection test so we never claim "ready"
+      // without a green health probe.
+      setProgressStep("test");
+      r = await fetch(apiUrl("/api/matrixlab/test"), { method: "POST" });
+      data = await r.json();
+      setStatus(data);
+      if (data.status !== "ready") return;
+
+      // Phase 3: activate (always safe to call when ready).
+      setProgressStep("activate");
+      r = await fetch(apiUrl("/api/matrixlab/activate"), { method: "POST" });
+      data = await r.json();
+      setStatus(data);
+      if (data.status === "ready" && data.activeSandbox === "matrixlab") {
+        onActivated?.(data);
+      }
+    } catch (err) {
+      setStatus({
+        status: "failed",
+        message: `MatrixLab ${journeyKey} could not complete.`,
+        errorCode: "NETWORK_ERROR",
+        technicalDetails: { rawError: err?.message || String(err) },
+      });
+    } finally {
+      setBusy(false);
+      setProgressStep(null);
+      setJourney(null);
+      refreshAdvanced();
+    }
+  }, [onActivated, refreshAdvanced]);
+
+  const runInstall   = useCallback(() => runJourney("install",   "/api/matrixlab/install"), [runJourney]);
+  const runRepair    = useCallback(() => runJourney("repair",    "/api/matrixlab/repair"),  [runJourney]);
+  const runReinstall = useCallback((removeData) => runJourney(
+    "reinstall", "/api/matrixlab/reinstall", { remove_data: !!removeData },
+  ), [runJourney]);
+  // Cheap recovery: persist the discovered URL without restarting the
+  // runner.  Most "needs_attention" cases are stale URLs from the
+  // :8000 → :8765 port move, and this resolves them in <1s.
+  const runUrlAutoDetect = useCallback(
+    () => runJourney("repair", "/api/matrixlab/url/auto-detect"),
+    [runJourney],
+  );
+
+  const openLogs = useCallback(async () => {
+    setShowLogs(true);
+    try {
+      const r = await fetch(apiUrl("/api/matrixlab/logs?tail=200"));
+      const data = await r.json();
+      setLogs(data);
+    } catch (err) {
+      setLogs({ ok: false, error: err?.message || String(err), lines: [] });
+    }
+  }, []);
+
+  const onPrimary = () => {
+    if (!status) return;
+    const next = (PRIMARY_BY_STATUS[status.status] || PRIMARY_BY_STATUS.not_installed).action;
+    if (!next) return; // in-flight states have no primary action
+    if (next === "done")    return onClose?.();
+    if (next === "install") return runInstall();
+    if (next === "repair")  return runRepair();
+  };
+
+  const updateAdvanced = async (patch) => {
+    try {
+      const r = await fetch(apiUrl("/api/sandbox/config"), {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch),
+      });
+      const data = await r.json();
+      if (r.ok) {
+        setAdvanced((prev) => ({ ...(prev || {}), ...data }));
+        if ("matrixlab_token" in patch) setTokenInput("");
+        // Re-probe the addon status — URL / token changes may make us
+        // reachable again.
+        refresh();
+      }
+    } catch (err) {
+      // surfaced through the next refresh
+    }
+  };
+
+  if (!status) {
+    return (
+      <Backdrop onClose={onClose}>
+        <ModalShell title="Install MatrixLab Addon" subtitle="Loading…" onClose={onClose}>
+          <div style={{ padding: 40, textAlign: "center", opacity: 0.6 }}>
+            Checking MatrixLab status…
+          </div>
+        </ModalShell>
+      </Backdrop>
+    );
+  }
+
+  const pill = statusPill(status.status);
+
+  return (
+    <Backdrop onClose={onClose}>
+      <ModalShell
+        title="Install MatrixLab Addon"
+        subtitle="Run code safely in isolated, temporary containers."
+        onClose={onClose}
+      >
+        {/* Status row */}
+        <div style={{
+          display: "flex", alignItems: "center", gap: 10,
+          padding: "12px 14px", background: "#0e0f24",
+          border: "1px solid #2c2d46", borderRadius: 6, marginBottom: 14,
+        }}>
+          <span style={{
+            display: "inline-flex", alignItems: "center", gap: 6,
+            fontSize: 11, fontWeight: 600, padding: "2px 10px", borderRadius: 12,
+            background: pill.bg, color: pill.fg,
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: "50%", background: pill.fg }} />
+            {pill.label}
+          </span>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: 13, color: "#e6e8ff" }}>{status.message}</div>
+            {status.runnerUrl && status.status !== "ready" && (
+              <div style={{ fontSize: 11, color: "#9092b5", marginTop: 2 }}>
+                Runner URL: <code style={{ color: "#c3c5dd" }}>{status.runnerUrl}</code>
+              </div>
+            )}
+            {/* Stale-URL recovery: backend probes candidate ports
+                when the configured URL is down. When a live one is
+                found we offer a one-click switch — this fixes the
+                very common "MatrixLab is installed but GitPilot
+                cannot connect" after the :8000 → :8765 port move. */}
+            {status.discoveredUrl && status.discoveredUrl !== status.runnerUrl && (
+              <div style={{
+                marginTop: 6, padding: "6px 10px", fontSize: 12,
+                background: "#0d3320", color: "#86efac",
+                border: "1px solid #166534", borderRadius: 4,
+                display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap",
+              }}>
+                <span>
+                  Found a live runner at{" "}
+                  <code style={{ background: "#000", padding: "1px 4px", borderRadius: 3 }}>
+                    {status.discoveredUrl}
+                  </code>
+                </span>
+                <button
+                  type="button"
+                  onClick={runUrlAutoDetect}
+                  disabled={busy}
+                  style={{
+                    padding: "3px 10px", fontSize: 11, fontWeight: 600,
+                    background: "#10B981", color: "#052e1c",
+                    border: "0", borderRadius: 4, cursor: "pointer",
+                  }}
+                >
+                  Use this URL
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Inline body — copy depends on state */}
+        {status.status === "not_installed" && (
+          <p style={{ fontSize: 13, opacity: 0.8, lineHeight: 1.55, marginBottom: 16 }}>
+            MatrixLab gives GitPilot an isolated sandbox for running code,
+            testing snippets, and executing agent actions safely. It will be
+            downloaded, started, and connected automatically.
+          </p>
+        )}
+
+        {(busy || progressStep) && (
+          <ProgressChecklist journey={journey} current={progressStep} />
+        )}
+
+        {status.status === "ready" && (
+          <Checklist
+            items={[
+              ["Installed", true],
+              ["Running", true],
+              ["Connection verified", true],
+              ["Set as active sandbox", status.activeSandbox === "matrixlab"],
+            ]}
+          />
+        )}
+
+        {/* Lifecycle disabled hint — friendly copy, admin detail under disclosure */}
+        {status.errorCode === "LIFECYCLE_DISABLED" && (
+          <div style={{
+            background: "#2a210d", border: "1px solid #854d0e",
+            borderRadius: 6, padding: 10, fontSize: 12,
+            color: "#fde68a", marginBottom: 12,
+          }}>
+            MatrixLab lifecycle automation is disabled. This GitPilot backend
+            was started with{" "}
+            <code style={{ background: "#1a1b26", padding: "1px 4px", borderRadius: 3 }}>
+              GITPILOT_ENABLE_MATRIXLAB_LIFECYCLE=0
+            </code>{" "}
+            — restart it without that variable (the default is enabled), or
+            use Manual setup under Advanced options.
+          </div>
+        )}
+
+        {/* Technical details disclosure — only visible when there's an error */}
+        {status.technicalDetails && (status.status === "needs_attention" || status.status === "failed") && (
+          <details
+            open={showDetails}
+            onToggle={(e) => setShowDetails(e.target.open)}
+            style={{ marginBottom: 12 }}
+          >
+            <summary style={{ cursor: "pointer", fontSize: 12, color: "#9092b5" }}>
+              Technical details
+            </summary>
+            <pre style={{
+              marginTop: 8, padding: 10, background: "#000",
+              border: "1px solid #2c2d46", borderRadius: 4,
+              fontSize: 11, color: "#fca5a5",
+              fontFamily: "ui-monospace, monospace",
+              whiteSpace: "pre-wrap", overflow: "auto", maxHeight: 200,
+            }}>
+              {status.technicalDetails.expected &&
+                `Expected: ${status.technicalDetails.expected}\n`}
+              {status.technicalDetails.actual &&
+                `Actual:   ${status.technicalDetails.actual}\n`}
+              {status.technicalDetails.rawError &&
+                `\n${status.technicalDetails.rawError}`}
+            </pre>
+          </details>
+        )}
+
+        {/* Action buttons — state-aware. Reinstall is offered as a
+            normal recovery action (not buried in Advanced) once the
+            addon exists in some form; Open logs surfaces only when
+            there's something to diagnose. */}
+        {(() => {
+          const primary = PRIMARY_BY_STATUS[status.status] || PRIMARY_BY_STATUS.not_installed;
+          const canReinstall = status.installed === true ||
+            ["needs_attention", "failed", "ready"].includes(status.status);
+          const canSeeLogs = ["needs_attention", "failed"].includes(status.status);
+          return (
+            <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
+              <button
+                type="button"
+                onClick={onPrimary}
+                disabled={busy || primary.action === null}
+                style={{
+                  padding: "10px 20px", fontSize: 13, fontWeight: 600,
+                  background: busy ? "#1e3a5f" : "#3B82F6",
+                  color: "#fff", border: "none", borderRadius: 6,
+                  cursor: busy ? "wait" : "pointer",
+                  minWidth: 180,
+                }}
+              >
+                {primary.label}
+              </button>
+
+              {canReinstall && (
+                <button
+                  type="button"
+                  onClick={() => setReinstallConfirm(true)}
+                  disabled={busy}
+                  style={status.status === "ready" ? btnDanger : btnSecondary}
+                  title="Stop, remove, and pull a fresh copy of MatrixLab"
+                >
+                  Reinstall addon
+                </button>
+              )}
+
+              {canSeeLogs && (
+                <button type="button" onClick={openLogs} disabled={busy} style={btnSecondary}>
+                  Open logs
+                </button>
+              )}
+
+              {status.status === "ready" && (
+                <button type="button" onClick={runRepair} disabled={busy} style={btnSecondary}>
+                  Run test snippet
+                </button>
+              )}
+            </div>
+          );
+        })()}
+
+        {/* Logs viewer */}
+        {showLogs && (
+          <div style={{ marginTop: 14 }}>
+            <div style={{
+              display: "flex", justifyContent: "space-between",
+              alignItems: "baseline", marginBottom: 6,
+            }}>
+              <div style={{ fontSize: 12, fontWeight: 600, color: "#c3c5dd" }}>
+                MatrixLab logs
+                {logs?.container && (
+                  <span style={{
+                    marginLeft: 8, fontSize: 11, color: "#9092b5",
+                    fontFamily: "ui-monospace, monospace", fontWeight: 400,
+                  }}>
+                    · {logs.container}
+                  </span>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={openLogs}
+                disabled={busy}
+                style={{
+                  fontSize: 11, padding: "2px 8px",
+                  background: "transparent", color: "#9092b5",
+                  border: "1px solid #2c2d46", borderRadius: 4, cursor: "pointer",
+                }}
+              >
+                ↻ Refresh
+              </button>
+            </div>
+
+            {/* Friendly error + hint when the backend can't read logs.
+                We show the hint as an actionable next step (run
+                "make install-matrixlab") and list any matrixlab-
+                shaped containers we found so the user can see whether
+                the runner is up under a different name. */}
+            {logs?.ok === false && (
+              <div style={{
+                marginBottom: 6, padding: 10,
+                background: "#2a210d", border: "1px solid #854d0e",
+                borderRadius: 4, fontSize: 12, color: "#fde68a",
+              }}>
+                <div style={{ fontWeight: 600 }}>{logs.error || "Could not read MatrixLab logs."}</div>
+                {logs.hint && (
+                  <div style={{ marginTop: 4, fontSize: 11, color: "#fcd34d" }}>
+                    Next step:{" "}
+                    <code style={{
+                      background: "#000", padding: "1px 6px",
+                      borderRadius: 3, color: "#86efac",
+                    }}>
+                      {logs.hint}
+                    </code>
+                  </div>
+                )}
+                {Array.isArray(logs.candidates) && logs.candidates.length > 0 && (
+                  <div style={{ marginTop: 6, fontSize: 11 }}>
+                    Found other matrixlab-shaped containers:
+                    <ul style={{ margin: "4px 0 0", paddingLeft: 18 }}>
+                      {logs.candidates.map((c, i) => (
+                        <li key={i}>
+                          <code style={{ color: "#c3c5dd" }}>{c}</code>
+                        </li>
+                      ))}
+                    </ul>
+                    <div style={{ marginTop: 4, fontSize: 10, color: "#a1a1aa" }}>
+                      Set <code>GITPILOT_MATRIXLAB_CONTAINER</code> to use one of these,
+                      or run Reinstall to recreate the expected container.
+                    </div>
+                  </div>
+                )}
+                {logs.rawError && (
+                  <details style={{ marginTop: 6 }}>
+                    <summary style={{ cursor: "pointer", fontSize: 11, color: "#fbbf24" }}>
+                      docker stderr
+                    </summary>
+                    <pre style={{
+                      marginTop: 4, padding: 6, fontSize: 10,
+                      background: "#000", color: "#fca5a5",
+                      borderRadius: 4, whiteSpace: "pre-wrap",
+                    }}>
+                      {logs.rawError}
+                    </pre>
+                  </details>
+                )}
+              </div>
+            )}
+
+            <pre style={{
+              margin: 0, padding: 10, background: "#000",
+              border: "1px solid #2c2d46", borderRadius: 4,
+              fontSize: 11, color: "#D4D4D8",
+              fontFamily: "ui-monospace, monospace",
+              maxHeight: 220, overflow: "auto", whiteSpace: "pre-wrap",
+            }}>
+              {logs == null
+                ? "Loading logs…"
+                : (logs.lines && logs.lines.length > 0)
+                  ? logs.lines.join("\n")
+                  : (logs.ok === false ? "(no log output captured)" : "Loading logs…")}
+            </pre>
+          </div>
+        )}
+
+        {/* Advanced options — collapsed by default so first-time
+            users see the install/repair flow, not a wall of knobs.
+            Operators who need runner URL / token / image / network /
+            timeout / manual setup / local clone install / unsafe
+            modes click the disclosure to expand. */}
+        <details
+          open={showAdvanced}
+          onToggle={(e) => setShowAdvanced(e.target.open)}
+          style={{ marginTop: 14 }}
+        >
+          <summary style={{
+            cursor: "pointer", fontSize: 12, color: "#9092b5",
+            padding: "6px 0", listStyle: "none",
+          }}>
+            Advanced options
+          </summary>
+          <AdvancedOptions
+            advanced={advanced}
+            tokenInput={tokenInput}
+            setTokenInput={setTokenInput}
+            onUpdate={updateAdvanced}
+            disabled={busy}
+            onLocalStatus={(data) => {
+              setStatus(data);
+              refreshAdvanced();
+            }}
+          />
+        </details>
+
+        {reinstallConfirm && (
+          <ReinstallConfirm
+            wipe={reinstallWipe}
+            setWipe={setReinstallWipe}
+            onCancel={() => {
+              setReinstallConfirm(false);
+              setReinstallWipe(false);
+            }}
+            onConfirm={() => {
+              const wipe = reinstallWipe;
+              setReinstallConfirm(false);
+              setReinstallWipe(false);
+              runReinstall(wipe);
+            }}
+          />
+        )}
+      </ModalShell>
+    </Backdrop>
+  );
+}
+
+function ReinstallConfirm({ wipe, setWipe, onCancel, onConfirm }) {
+  // Modal-in-modal stacked at zIndex 110 (Backdrop is 100).  Apes
+  // GitHub's "Are you absolutely sure?" pattern: explicit destructive
+  // checkbox stays off by default so a misclick can't wipe images.
+  return (
+    <div onClick={onCancel} style={{
+      position: "fixed", inset: 0, background: "rgba(0,0,0,0.65)",
+      display: "flex", alignItems: "center", justifyContent: "center",
+      zIndex: 110,
+    }}>
+      <div onClick={(e) => e.stopPropagation()} style={{
+        width: "min(440px, 92vw)", background: "#1a1b26",
+        border: "1px solid #2a2b36", borderRadius: 10, padding: 20,
+        color: "#e6e8ff",
+      }}>
+        <h4 style={{ margin: "0 0 6px", fontSize: 15 }}>Reinstall MatrixLab Addon?</h4>
+        <p style={{ fontSize: 13, opacity: 0.8, lineHeight: 1.55, marginBottom: 14 }}>
+          This will stop MatrixLab, remove the current addon container, download a
+          fresh copy, start it again, and reconnect GitPilot. Your GitPilot
+          settings will be kept.
+        </p>
+        <label style={{
+          display: "flex", gap: 8, alignItems: "flex-start",
+          padding: "8px 10px", borderRadius: 6, marginBottom: 14,
+          border: "1px solid #2c2d46", background: "#0e0f24",
+          fontSize: 12, cursor: "pointer",
+        }}>
+          <input
+            type="checkbox"
+            checked={wipe}
+            onChange={(e) => setWipe(e.target.checked)}
+            style={{ marginTop: 2 }}
+          />
+          <span>
+            <strong style={{ color: "#fde68a" }}>Also remove local MatrixLab data</strong>
+            <span style={{ display: "block", color: "#9092b5", marginTop: 2 }}>
+              Deletes the cached MatrixLab runner image. Sandbox images and
+              workspace data are preserved.
+            </span>
+          </span>
+        </label>
+        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+          <button type="button" onClick={onCancel} style={btnSecondary}>Cancel</button>
+          <button type="button" onClick={onConfirm} style={wipe ? btnDanger : btnPrimary}>
+            {wipe ? "Reinstall and remove data" : "Reinstall MatrixLab"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProgressChecklist({ journey, current }) {
+  // Pick the right stage list for the journey in flight; default to
+  // the install list (the most informative one) when no journey is
+  // active yet.  Once ``current`` advances past the kickoff key, the
+  // visited rows render with a ✓.
+  const steps = PROGRESS_STEPS[journey] || PROGRESS_STEPS.install;
+  const phaseIndex = current ? Math.max(0, steps.findIndex(s => s.key === current)) : 0;
+  return (
+    <div style={{ marginBottom: 14 }}>
+      {steps.map((s, i) => {
+        const done = i < phaseIndex;
+        const active = i === phaseIndex;
+        return (
+          <div key={s.key} style={{
+            display: "flex", alignItems: "center", gap: 8,
+            fontSize: 12, padding: "3px 0",
+            color: done ? "#86efac" : active ? "#e6e8ff" : "#9092b5",
+          }}>
+            <span style={{ width: 16, textAlign: "center" }}>
+              {done ? "✓" : active ? "⏳" : "○"}
+            </span>
+            {s.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function Checklist({ items }) {
+  return (
+    <div style={{ marginBottom: 14 }}>
+      {items.map(([label, ok]) => (
+        <div key={label} style={{
+          display: "flex", alignItems: "center", gap: 8,
+          fontSize: 12, padding: "3px 0",
+          color: ok ? "#86efac" : "#9092b5",
+        }}>
+          <span style={{ width: 16, textAlign: "center" }}>{ok ? "✓" : "○"}</span>
+          {label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function LocalCloneSection({ disabled, onStatus }) {
+  const [native, setNative] = useState(null);
+  const [busy, setBusy] = useState(null); // "install" | "start" | "stop"
+
+  const refresh = useCallback(async () => {
+    try {
+      const r = await fetch(apiUrl("/api/matrixlab/native/status"));
+      setNative(await r.json());
+    } catch (err) {
+      // non-fatal — leave section empty
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const runAction = useCallback(async (action) => {
+    setBusy(action);
+    try {
+      const path = {
+        install: "/api/matrixlab/install_local",
+        start: "/api/matrixlab/start_local",
+        stop: "/api/matrixlab/stop_local",
+      }[action];
+      const r = await fetch(apiUrl(path), { method: "POST" });
+      const data = await r.json();
+      onStatus?.(data);
+    } finally {
+      setBusy(null);
+      refresh();
+    }
+  }, [onStatus, refresh]);
+
+  if (!native) return null;
+
+  return (
+    <details style={{ marginTop: 12 }}>
+      <summary style={{ cursor: "pointer", fontSize: 11, color: "#9092b5" }}>
+        Local clone install (no Docker for the runner itself)
+      </summary>
+      <div style={{ marginTop: 8, fontSize: 11, color: "#9092b5", lineHeight: 1.6 }}>
+        Clones MatrixLab into <code style={{ color: "#c3c5dd" }}>{native.local_dir}</code>,
+        creates a dedicated Python virtualenv, and runs <code style={{ color: "#c3c5dd" }}>uvicorn app.main:app</code>
+        from the runner directory. The Runner still spawns per-language sandboxes
+        via Docker, so the host needs <code style={{ color: "#c3c5dd" }}>docker</code>{" "}
+        on PATH for code execution.
+      </div>
+      <div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", gap: 8 }}>
+        <span style={{
+          display: "inline-flex", alignItems: "center", gap: 6,
+          fontSize: 11, padding: "2px 10px", borderRadius: 10,
+          background: native.running ? "#0d3320" : native.installed ? "#3d2d11" : "#374151",
+          color:      native.running ? "#86efac" : native.installed ? "#fde68a" : "#d1d5db",
+        }}>
+          <span style={{
+            width: 6, height: 6, borderRadius: "50%",
+            background: native.running ? "#10B981" : native.installed ? "#f59e0b" : "#9ca3af",
+          }} />
+          {native.running ? "Running (PID " + native.pid + ")"
+            : native.installed ? "Installed · stopped"
+            : "Not installed"}
+        </span>
+        {!native.installed && (
+          <button
+            type="button"
+            disabled={disabled || busy != null || !native.lifecycleEnabled}
+            onClick={() => runAction("install")}
+            style={btnPrimarySmall}
+          >
+            {busy === "install" ? "Cloning + installing…" : "Clone and install"}
+          </button>
+        )}
+        {native.installed && !native.running && (
+          <button
+            type="button"
+            disabled={disabled || busy != null || !native.lifecycleEnabled}
+            onClick={() => runAction("start")}
+            style={btnPrimarySmall}
+          >
+            {busy === "start" ? "Starting…" : "Start runner"}
+          </button>
+        )}
+        {native.running && (
+          <button
+            type="button"
+            disabled={disabled || busy != null || !native.lifecycleEnabled}
+            onClick={() => runAction("stop")}
+            style={btnSecondarySmall}
+          >
+            {busy === "stop" ? "Stopping…" : "Stop runner"}
+          </button>
+        )}
+        <button
+          type="button"
+          disabled={busy != null}
+          onClick={refresh}
+          style={btnSecondarySmall}
+        >
+          Refresh
+        </button>
+      </div>
+      {!native.lifecycleEnabled && (
+        <div style={{
+          marginTop: 8, padding: "6px 8px",
+          background: "#2a210d", border: "1px solid #854d0e",
+          borderRadius: 4, fontSize: 11, color: "#fde68a",
+        }}>
+          Local clone install needs lifecycle automation enabled on the GitPilot
+          backend.
+        </div>
+      )}
+    </details>
+  );
+}
+
+function AdvancedOptions({ advanced, tokenInput, setTokenInput, onUpdate, disabled, onLocalStatus }) {
+  if (!advanced) return null;
+  return (
+    <div style={{
+      marginTop: 14, padding: 12,
+      background: "#0e0f24", border: "1px solid #2c2d46",
+      borderRadius: 6,
+    }}>
+      <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10, color: "#c3c5dd" }}>
+        Advanced options
+      </div>
+      <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 8, alignItems: "center" }}>
+        <label style={fieldLabel}>Runner URL</label>
+        <input
+          type="text"
+          defaultValue={advanced.matrixlab_url || ""}
+          onBlur={(e) => onUpdate({ matrixlab_url: e.target.value })}
+          placeholder="http://localhost:8765"
+          disabled={disabled}
+          style={fieldInput}
+        />
+
+        <label style={fieldLabel}>Bearer token</label>
+        <div style={{ display: "flex", gap: 6 }}>
+          <input
+            type="password"
+            value={tokenInput}
+            onChange={(e) => setTokenInput(e.target.value)}
+            placeholder={advanced.has_token ? "•••••••• (saved)" : "Optional"}
+            disabled={disabled}
+            style={{ ...fieldInput, flex: 1 }}
+          />
+          <button
+            type="button"
+            onClick={() => onUpdate({ matrixlab_token: tokenInput })}
+            disabled={disabled}
+            style={btnSecondary}
+          >
+            Save token
+          </button>
+        </div>
+
+        <label style={fieldLabel}>Default image</label>
+        <input
+          type="text"
+          defaultValue={advanced.matrixlab_image || ""}
+          onBlur={(e) => onUpdate({ matrixlab_image: e.target.value })}
+          placeholder="matrixlab-python"
+          disabled={disabled}
+          style={fieldInput}
+        />
+
+        <label style={fieldLabel}>Network access</label>
+        <label style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12, color: "#c3c5dd" }}>
+          <input
+            type="checkbox"
+            checked={!!advanced.allow_network}
+            disabled={disabled}
+            onChange={(e) => onUpdate({ allow_network: e.target.checked })}
+          />
+          Allow network egress
+        </label>
+
+        <label style={fieldLabel}>Timeout</label>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <input
+            type="number"
+            min={1}
+            max={600}
+            defaultValue={advanced.timeout_sec || 120}
+            onBlur={(e) => onUpdate({ timeout_sec: Number(e.target.value) || 120 })}
+            disabled={disabled}
+            style={{ ...fieldInput, width: 80 }}
+          />
+          <span style={{ fontSize: 11, color: "#9092b5" }}>seconds</span>
+        </div>
+      </div>
+
+      <LocalCloneSection disabled={disabled} onStatus={onLocalStatus} />
+
+      <details style={{ marginTop: 12 }}>
+        <summary style={{ cursor: "pointer", fontSize: 11, color: "#9092b5" }}>
+          Manual setup
+        </summary>
+        <pre style={{
+          margin: "8px 0 0", padding: 10, background: "#000",
+          border: "1px solid #2c2d46", borderRadius: 4,
+          fontSize: 11, color: "#D4D4D8",
+          fontFamily: "ui-monospace, monospace",
+        }}>{`# In a MatrixLab checkout:
+docker compose up -d
+
+# Or directly:
+docker run -d --name gitpilot-matrixlab \\
+  -p 8000:8000 \\
+  -v /var/run/docker.sock:/var/run/docker.sock \\
+  ruslanmv/matrixlab-runner:latest`}</pre>
+      </details>
+
+      <details style={{ marginTop: 12 }}>
+        <summary style={{ cursor: "pointer", fontSize: 11, color: "#9092b5" }}>
+          Developer options · Unsafe modes
+        </summary>
+        <div style={{ marginTop: 8, fontSize: 11, color: "#fca5a5" }}>
+          Pass-through runs code directly on the host without isolation. Use
+          only for local development.
+        </div>
+      </details>
+    </div>
+  );
+}
+
+function Backdrop({ children, onClose }) {
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed", inset: 0,
+        background: "rgba(0,0,0,0.6)",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        zIndex: 100,
+      }}
+    >
+      <div onClick={(e) => e.stopPropagation()}>{children}</div>
+    </div>
+  );
+}
+
+function ModalShell({ title, subtitle, onClose, children }) {
+  return (
+    <div style={{
+      width: "min(640px, 92vw)",
+      maxHeight: "90vh", overflow: "auto",
+      background: "#1a1b26",
+      border: "1px solid #2a2b36",
+      borderRadius: 10,
+      padding: 20,
+      color: "#e6e8ff",
+    }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 4 }}>
+        <h3 style={{ margin: 0, fontSize: 18 }}>{title}</h3>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{
+            background: "transparent", border: "none",
+            color: "#9092b5", cursor: "pointer", fontSize: 18,
+          }}
+          aria-label="Close"
+        >
+          ✕
+        </button>
+      </div>
+      <div style={{ fontSize: 12, color: "#9092b5", marginBottom: 16 }}>{subtitle}</div>
+      {children}
+    </div>
+  );
+}
+
+const btnSecondary = {
+  padding: "8px 14px",
+  fontSize: 12,
+  background: "transparent",
+  color: "#c3c5dd",
+  border: "1px solid #2c2d46",
+  borderRadius: 6,
+  cursor: "pointer",
+};
+
+const btnPrimary = {
+  padding: "8px 14px",
+  fontSize: 12,
+  fontWeight: 600,
+  background: "#3B82F6",
+  color: "#fff",
+  border: "none",
+  borderRadius: 6,
+  cursor: "pointer",
+};
+
+// "Reinstall and remove data" is destructive — surface it with a
+// danger tone so the operator pauses before clicking.
+const btnDanger = {
+  padding: "8px 14px",
+  fontSize: 12,
+  fontWeight: 600,
+  background: "#7f1d1d",
+  color: "#fecaca",
+  border: "1px solid #991b1b",
+  borderRadius: 6,
+  cursor: "pointer",
+};
+
+const btnGhost = {
+  padding: "8px 14px",
+  fontSize: 12,
+  background: "transparent",
+  color: "#9092b5",
+  border: "none",
+  cursor: "pointer",
+};
+
+const fieldLabel = { fontSize: 12, color: "#c3c5dd" };
+const fieldInput = {
+  fontSize: 12, padding: "4px 6px",
+  background: "#14152a", color: "#e6e8ff",
+  border: "1px solid #2c2d46", borderRadius: 4,
+};
+
+const btnPrimarySmall = {
+  padding: "4px 10px", fontSize: 11, fontWeight: 600,
+  background: "#3B82F6", color: "#fff",
+  border: "none", borderRadius: 4, cursor: "pointer",
+};
+const btnSecondarySmall = {
+  padding: "4px 10px", fontSize: 11,
+  background: "transparent", color: "#c3c5dd",
+  border: "1px solid #2c2d46", borderRadius: 4, cursor: "pointer",
+};

frontend/components/AdminTabs/SandboxTab.jsx

@@ -0,0 +1,218 @@
+// frontend/components/AdminTabs/SandboxTab.jsx
+import React, { useCallback, useEffect, useState } from "react";
+import { apiUrl } from "../../utils/api.js";
+import MatrixLabInstallModal from "./MatrixLabInstallModal.jsx";
+
+/**
+ * Sandbox tab — enterprise default view.
+ *
+ * Surfaces a single MatrixLab addon card plus a clean Local-sandbox
+ * card. Implementation knobs (Runner URL, token, image, network,
+ * timeout, pass-through, lifecycle env flag) live behind the install
+ * modal's Advanced disclosure — the primary view never shows them.
+ *
+ * Status pill is driven off /api/matrixlab/status so we never end up
+ * with the "Unreachable + Running" contradiction the legacy panel
+ * produced.
+ */
+
+function StatusPill({ status }) {
+  const map = {
+    not_installed:    { label: "Not installed",    bg: "#374151", fg: "#d1d5db" },
+    installing:       { label: "Installing",       bg: "#0d3320", fg: "#86efac" },
+    starting:         { label: "Starting",         bg: "#0d3320", fg: "#86efac" },
+    stopping:         { label: "Stopping",         bg: "#3d2d11", fg: "#fde68a" },
+    checking:         { label: "Checking",         bg: "#0d3320", fg: "#86efac" },
+    ready:            { label: "Ready",            bg: "#0d3320", fg: "#86efac" },
+    needs_attention:  { label: "Needs attention",  bg: "#3d2d11", fg: "#fde68a" },
+    failed:           { label: "Failed",           bg: "#3d1111", fg: "#fca5a5" },
+  };
+  const pill = map[status] || map.not_installed;
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 6,
+      fontSize: 11, fontWeight: 600, padding: "2px 10px", borderRadius: 12,
+      background: pill.bg, color: pill.fg,
+    }}>
+      <span style={{ width: 6, height: 6, borderRadius: "50%", background: pill.fg }} />
+      {pill.label}
+    </span>
+  );
+}
+
+export default function SandboxTab({ showToast }) {
+  const [matrixlab, setMatrixlab] = useState(null);  // /api/matrixlab/status payload
+  const [sandbox, setSandbox] = useState(null);      // /api/sandbox/status payload
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const [ml, sb] = await Promise.all([
+        fetch(apiUrl("/api/matrixlab/status")).then((r) => r.json()).catch(() => null),
+        fetch(apiUrl("/api/sandbox/status")).then((r) => r.json()).catch(() => null),
+      ]);
+      setMatrixlab(ml);
+      setSandbox(sb);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const useLocal = useCallback(async () => {
+    try {
+      const r = await fetch(apiUrl("/api/sandbox/config"), {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ backend: "subprocess" }),
+      });
+      const data = await r.json();
+      if (r.ok) {
+        setSandbox(data);
+        showToast?.("Switched to Local sandbox", "Code runs in a host subprocess with a workspace jail.");
+      }
+    } catch (err) {
+      // surfaced through the next load()
+    }
+  }, [showToast]);
+
+  if (loading) {
+    return (
+      <div>
+        <h3 style={{ marginBottom: 16 }}>Sandbox</h3>
+        <div style={{
+          background: "#1a1b26", borderRadius: 8,
+          padding: "40px 20px", textAlign: "center",
+          border: "1px solid #2a2b36", fontSize: 12, opacity: 0.6,
+        }}>
+          Loading sandbox status…
+        </div>
+      </div>
+    );
+  }
+
+  const activeBackend = (sandbox?.backend || "subprocess").toLowerCase();
+  const mlStatus = matrixlab?.status || "not_installed";
+
+  return (
+    <div>
+      <h3 style={{ marginBottom: 8 }}>Sandbox</h3>
+      <p style={{ fontSize: 12, opacity: 0.7, marginBottom: 20 }}>
+        Pick where GitPilot executes code: the local subprocess sandbox or
+        the MatrixLab Runner. The choice applies to the Run button on chat
+        code blocks and the agent's EXECUTE action.
+      </p>
+
+      {/* MatrixLab addon card */}
+      <div style={cardStyle}>
+        <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
+          <div style={{ flex: 1 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
+              <h4 style={{ margin: 0, fontSize: 15 }}>MatrixLab Addon</h4>
+              <StatusPill status={mlStatus} />
+              {activeBackend === "matrixlab" && (
+                <span style={{
+                  fontSize: 10, fontWeight: 600,
+                  padding: "1px 6px", borderRadius: 8,
+                  background: "#1e3a5f", color: "#93c5fd",
+                  border: "1px solid #3B82F6",
+                }}>ACTIVE</span>
+              )}
+            </div>
+            <p style={{ fontSize: 12, opacity: 0.75, margin: 0, lineHeight: 1.55 }}>
+              Run code safely in isolated, temporary containers. Recommended
+              for enterprise deployments and untrusted code.
+            </p>
+            {mlStatus !== "not_installed" && matrixlab?.message && (
+              <p style={{ fontSize: 11, opacity: 0.6, marginTop: 6, marginBottom: 0 }}>
+                {matrixlab.message}
+              </p>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={() => setModalOpen(true)}
+            style={{
+              padding: "8px 16px", fontSize: 12, fontWeight: 600,
+              background: mlStatus === "ready" ? "transparent" : "#3B82F6",
+              color: mlStatus === "ready" ? "#93c5fd" : "#fff",
+              border: mlStatus === "ready" ? "1px solid #3B82F6" : "none",
+              borderRadius: 6, cursor: "pointer",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {mlStatus === "ready" ? "Manage" :
+             mlStatus === "needs_attention" ? "Fix connection" :
+             mlStatus === "failed" ? "Retry install" :
+             "Install and Start"}
+          </button>
+        </div>
+      </div>
+
+      {/* Local sandbox card */}
+      <div style={cardStyle}>
+        <div style={{ display: "flex", alignItems: "flex-start", gap: 14 }}>
+          <div style={{ flex: 1 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
+              <h4 style={{ margin: 0, fontSize: 15 }}>Local sandbox</h4>
+              {activeBackend === "subprocess" && (
+                <span style={{
+                  fontSize: 10, fontWeight: 600,
+                  padding: "1px 6px", borderRadius: 8,
+                  background: "#1e3a5f", color: "#93c5fd",
+                  border: "1px solid #3B82F6",
+                }}>ACTIVE</span>
+              )}
+            </div>
+            <p style={{ fontSize: 12, opacity: 0.75, margin: 0, lineHeight: 1.55 }}>
+              Host subprocess with a workspace jail. No Docker required —
+              best for trying simple snippets quickly.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={useLocal}
+            disabled={activeBackend === "subprocess"}
+            style={{
+              padding: "8px 16px", fontSize: 12, fontWeight: 600,
+              background: activeBackend === "subprocess" ? "transparent" : "#374151",
+              color: activeBackend === "subprocess" ? "#9092b5" : "#fff",
+              border: activeBackend === "subprocess" ? "1px solid #2c2d46" : "none",
+              borderRadius: 6,
+              cursor: activeBackend === "subprocess" ? "default" : "pointer",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {activeBackend === "subprocess" ? "Active" : "Use Local"}
+          </button>
+        </div>
+      </div>
+
+      {modalOpen && (
+        <MatrixLabInstallModal
+          onClose={() => {
+            setModalOpen(false);
+            load();
+          }}
+          onActivated={(data) => {
+            showToast?.("MatrixLab ready", "Code now runs in MatrixLab sandboxes.");
+            // Refresh both panels so the ACTIVE badge moves to the addon card.
+            load();
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+const cardStyle = {
+  background: "#1a1b26",
+  borderRadius: 8,
+  padding: 16,
+  border: "1px solid #2a2b36",
+  marginBottom: 12,
+};

frontend/components/AdminTabs/SecurityTab.jsx

@@ -0,0 +1,341 @@
+// frontend/components/AdminTabs/SecurityTab.jsx
+import React, { useState } from "react";
+import { scanWorkspace } from "../../utils/api.js";
+
+/**
+ * Security tab — runs a workspace scan via /api/security/scan-workspace
+ * and renders findings grouped by severity.
+ *
+ * Best practices applied:
+ * - Custom path input (defaults to ".")
+ * - Loading spinner while scanning
+ * - Error state with retry
+ * - Empty state ("No findings") with green checkmark
+ * - Findings grouped by severity (critical → info)
+ * - Each finding shows file, line, CWE, recommendation
+ * - Color-coded severity badges
+ */
+
+const SEVERITY_ORDER = ["critical", "high", "medium", "low", "info"];
+
+const SEVERITY_COLORS = {
+  critical: { bg: "#7f1d1d", text: "#fecaca", border: "#991b1b" },
+  high:     { bg: "#9a3412", text: "#fed7aa", border: "#c2410c" },
+  medium:   { bg: "#78350f", text: "#fde68a", border: "#a16207" },
+  low:      { bg: "#164e63", text: "#a5f3fc", border: "#0e7490" },
+  info:     { bg: "#1e3a5f", text: "#93c5fd", border: "#3B82F6" },
+};
+
+function SeverityBadge({ severity }) {
+  const c = SEVERITY_COLORS[severity] || SEVERITY_COLORS.info;
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        padding: "2px 8px",
+        background: c.bg,
+        color: c.text,
+        border: `1px solid ${c.border}`,
+        borderRadius: "10px",
+        fontSize: "10px",
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px",
+      }}
+    >
+      {severity}
+    </span>
+  );
+}
+
+export default function SecurityTab({ showToast }) {
+  const [path, setPath] = useState(".");
+  const [scanning, setScanning] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleScan = async () => {
+    setScanning(true);
+    setError(null);
+    setResult(null);
+    try {
+      const data = await scanWorkspace(path.trim() || ".");
+      setResult(data);
+      const findingsCount = data.findings?.length || 0;
+      showToast?.(
+        "Scan complete",
+        findingsCount === 0
+          ? "No security findings."
+          : `Found ${findingsCount} issue${findingsCount !== 1 ? "s" : ""}.`
+      );
+    } catch (err) {
+      setError(err?.message || "Scan failed");
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  // Group findings by severity
+  const grouped = React.useMemo(() => {
+    const out = {};
+    if (result?.findings) {
+      for (const f of result.findings) {
+        const sev = f.severity || "info";
+        if (!out[sev]) out[sev] = [];
+        out[sev].push(f);
+      }
+    }
+    return out;
+  }, [result]);
+
+  const totalFindings = result?.findings?.length || 0;
+
+  return (
+    <div>
+      <h3 style={{ marginBottom: "16px" }}>Security Scanning</h3>
+      <p style={{ fontSize: "12px", opacity: 0.7, marginBottom: "16px" }}>
+        Scan your workspace for vulnerabilities, secrets, and insecure patterns (OWASP Top 10).
+      </p>
+
+      {/* Scan controls */}
+      <div
+        style={{
+          background: "#1a1b26",
+          borderRadius: "8px",
+          padding: "16px",
+          border: "1px solid #2a2b36",
+          marginBottom: "16px",
+          display: "flex",
+          gap: "8px",
+          alignItems: "flex-end",
+        }}
+      >
+        <div style={{ flex: 1 }}>
+          <label
+            htmlFor="security-scan-path"
+            style={{
+              fontSize: "11px",
+              opacity: 0.7,
+              display: "block",
+              marginBottom: "4px",
+            }}
+          >
+            Path to scan (relative or absolute)
+          </label>
+          <input
+            id="security-scan-path"
+            type="text"
+            value={path}
+            onChange={(e) => setPath(e.target.value)}
+            disabled={scanning}
+            placeholder="."
+            style={{
+              width: "100%",
+              padding: "8px 10px",
+              background: "#0d0e15",
+              border: "1px solid #2a2b36",
+              borderRadius: "4px",
+              color: "#fff",
+              fontSize: "12px",
+              fontFamily: "monospace",
+            }}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={handleScan}
+          disabled={scanning}
+          style={{
+            padding: "8px 16px",
+            background: scanning ? "#555" : "#3B82F6",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: scanning ? "not-allowed" : "pointer",
+            fontSize: "12px",
+            fontWeight: 600,
+            whiteSpace: "nowrap",
+          }}
+        >
+          {scanning ? "Scanning..." : "Scan Workspace"}
+        </button>
+      </div>
+
+      {/* Error state */}
+      {error && (
+        <div
+          role="alert"
+          style={{
+            background: "#7f1d1d",
+            color: "#fecaca",
+            border: "1px solid #991b1b",
+            borderRadius: "8px",
+            padding: "12px",
+            fontSize: "12px",
+            marginBottom: "16px",
+          }}
+        >
+          <strong>Scan failed: </strong>
+          {error}
+        </div>
+      )}
+
+      {/* Results summary */}
+      {result && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "16px",
+            border: "1px solid #2a2b36",
+            marginBottom: "16px",
+          }}
+        >
+          <div style={{ display: "flex", gap: "24px", fontSize: "12px" }}>
+            <div>
+              <div style={{ opacity: 0.6 }}>Files Scanned</div>
+              <div style={{ fontSize: "18px", fontWeight: 600 }}>
+                {result.files_scanned ?? 0}
+              </div>
+            </div>
+            <div>
+              <div style={{ opacity: 0.6 }}>Total Findings</div>
+              <div
+                style={{
+                  fontSize: "18px",
+                  fontWeight: 600,
+                  color: totalFindings === 0 ? "#4ade80" : "#fcd34d",
+                }}
+              >
+                {totalFindings}
+              </div>
+            </div>
+            <div>
+              <div style={{ opacity: 0.6 }}>Duration</div>
+              <div style={{ fontSize: "18px", fontWeight: 600 }}>
+                {result.scan_duration_ms ?? 0}ms
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Empty state — no findings */}
+      {result && totalFindings === 0 && (
+        <div
+          style={{
+            background: "#064e3b",
+            color: "#a7f3d0",
+            border: "1px solid #065f46",
+            borderRadius: "8px",
+            padding: "20px",
+            textAlign: "center",
+          }}
+        >
+          <div style={{ fontSize: "32px", marginBottom: "8px" }}>✓</div>
+          <div style={{ fontSize: "14px", fontWeight: 600 }}>
+            No security issues found
+          </div>
+          <div style={{ fontSize: "12px", opacity: 0.8, marginTop: "4px" }}>
+            Your workspace passed all {result.files_scanned ?? 0} file checks.
+          </div>
+        </div>
+      )}
+
+      {/* Findings grouped by severity */}
+      {totalFindings > 0 &&
+        SEVERITY_ORDER.filter((sev) => grouped[sev]?.length > 0).map((sev) => (
+          <div key={sev} style={{ marginBottom: "16px" }}>
+            <h4
+              style={{
+                fontSize: "13px",
+                marginBottom: "8px",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <SeverityBadge severity={sev} />
+              <span>
+                {grouped[sev].length} {sev} issue{grouped[sev].length !== 1 ? "s" : ""}
+              </span>
+            </h4>
+            <div style={{ display: "grid", gap: "8px" }}>
+              {grouped[sev].map((f, idx) => (
+                <div
+                  key={`${f.rule_id}-${f.file_path}-${f.line_number}-${idx}`}
+                  style={{
+                    background: "#1a1b26",
+                    borderRadius: "8px",
+                    padding: "12px",
+                    border: `1px solid ${SEVERITY_COLORS[sev]?.border || "#2a2b36"}`,
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "flex-start",
+                      marginBottom: "6px",
+                    }}
+                  >
+                    <div style={{ fontSize: "13px", fontWeight: 600 }}>{f.title}</div>
+                    {f.cwe_id && (
+                      <span
+                        style={{
+                          fontSize: "10px",
+                          opacity: 0.6,
+                          fontFamily: "monospace",
+                        }}
+                      >
+                        {f.cwe_id}
+                      </span>
+                    )}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: "11px",
+                      fontFamily: "monospace",
+                      opacity: 0.7,
+                      marginBottom: "6px",
+                    }}
+                  >
+                    {f.file_path}:{f.line_number}
+                  </div>
+                  {f.snippet && (
+                    <pre
+                      style={{
+                        fontSize: "11px",
+                        background: "#0d0e15",
+                        padding: "8px",
+                        borderRadius: "4px",
+                        overflowX: "auto",
+                        margin: "6px 0",
+                        color: "#e0e7ff",
+                      }}
+                    >
+                      {f.snippet}
+                    </pre>
+                  )}
+                  {f.recommendation && (
+                    <div
+                      style={{
+                        fontSize: "11px",
+                        opacity: 0.8,
+                        marginTop: "6px",
+                        paddingTop: "6px",
+                        borderTop: "1px solid #2a2b36",
+                      }}
+                    >
+                      <strong>Fix: </strong>
+                      {f.recommendation}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}

frontend/components/AdminTabs/SessionsTab.jsx

@@ -0,0 +1,362 @@
+// frontend/components/AdminTabs/SessionsTab.jsx
+import React, { useEffect, useMemo, useState, useCallback } from "react";
+import { apiUrl, safeFetchJSON } from "../../utils/api.js";
+
+/**
+ * Sessions tab — admin-level table view of all saved sessions with
+ * search, sort, and delete actions.
+ *
+ * Best practices applied:
+ * - Fetch all sessions on mount
+ * - Client-side search (useMemo for filtered list)
+ * - Confirmation dialog before delete
+ * - Row hover effect
+ * - Empty / loading / error states
+ * - Relative timestamps ("2 hours ago")
+ * - Click row to open in workspace view
+ */
+
+function formatRelativeTime(iso) {
+  if (!iso) return "—";
+  try {
+    const d = new Date(iso);
+    const diff = Date.now() - d.getTime();
+    if (diff < 60_000) return "just now";
+    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+    if (diff < 2_592_000_000) return `${Math.floor(diff / 86_400_000)}d ago`;
+    return d.toLocaleDateString();
+  } catch {
+    return "—";
+  }
+}
+
+export default function SessionsTab({ onSelectSession, showToast }) {
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [query, setQuery] = useState("");
+  const [deletingId, setDeletingId] = useState(null);
+
+  const fetchSessions = useCallback(async () => {
+    setError(null);
+    try {
+      const data = await safeFetchJSON(apiUrl("/api/sessions"), { timeout: 10000 });
+      setSessions(Array.isArray(data.sessions) ? data.sessions : []);
+    } catch (err) {
+      setError(err?.message || "Failed to load sessions");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSessions();
+  }, [fetchSessions]);
+
+  const handleDelete = async (session) => {
+    if (
+      !window.confirm(
+        `Delete session "${session.name || session.id?.slice(0, 8)}"? This cannot be undone.`
+      )
+    ) {
+      return;
+    }
+
+    setDeletingId(session.id);
+    try {
+      const res = await fetch(apiUrl(`/api/sessions/${session.id}`), {
+        method: "DELETE",
+      });
+      if (!res.ok) {
+        throw new Error(`Delete failed (${res.status})`);
+      }
+      showToast?.("Session deleted", session.name || session.id);
+      // Optimistic removal
+      setSessions((prev) => prev.filter((s) => s.id !== session.id));
+    } catch (err) {
+      setError(err?.message || "Failed to delete session");
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return sessions;
+    const q = query.toLowerCase();
+    return sessions.filter((s) => {
+      return (
+        (s.name || "").toLowerCase().includes(q) ||
+        (s.repo || "").toLowerCase().includes(q) ||
+        (s.branch || "").toLowerCase().includes(q) ||
+        (s.id || "").toLowerCase().includes(q)
+      );
+    });
+  }, [sessions, query]);
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "16px",
+          gap: "12px",
+          flexWrap: "wrap",
+        }}
+      >
+        <div>
+          <h3 style={{ marginBottom: "4px" }}>Sessions</h3>
+          <p style={{ fontSize: "12px", opacity: 0.7 }}>
+            All saved chat sessions ({sessions.length} total
+            {query ? `, ${filtered.length} matching` : ""}).
+          </p>
+        </div>
+        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search sessions..."
+            style={{
+              padding: "6px 10px",
+              background: "#0d0e15",
+              border: "1px solid #2a2b36",
+              borderRadius: "4px",
+              color: "#fff",
+              fontSize: "12px",
+              width: "220px",
+            }}
+          />
+          <button
+            type="button"
+            onClick={fetchSessions}
+            disabled={loading}
+            style={{
+              padding: "6px 12px",
+              background: "transparent",
+              color: "#a0a0b0",
+              border: "1px solid #2a2b36",
+              borderRadius: "4px",
+              cursor: loading ? "not-allowed" : "pointer",
+              fontSize: "12px",
+            }}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {/* Loading state */}
+      {loading && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "40px 20px",
+            textAlign: "center",
+            border: "1px solid #2a2b36",
+            fontSize: "12px",
+            opacity: 0.6,
+          }}
+        >
+          Loading sessions...
+        </div>
+      )}
+
+      {/* Error state */}
+      {error && !loading && (
+        <div
+          role="alert"
+          style={{
+            background: "#7f1d1d",
+            color: "#fecaca",
+            border: "1px solid #991b1b",
+            borderRadius: "8px",
+            padding: "12px",
+            fontSize: "12px",
+            marginBottom: "12px",
+          }}
+        >
+          <strong>Error: </strong>
+          {error}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && !error && sessions.length === 0 && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "40px 20px",
+            textAlign: "center",
+            border: "1px dashed #2a2b36",
+          }}
+        >
+          <div style={{ fontSize: "32px", marginBottom: "8px" }}>💬</div>
+          <div style={{ fontSize: "14px", fontWeight: 600, marginBottom: "4px" }}>
+            No sessions yet
+          </div>
+          <div style={{ fontSize: "12px", opacity: 0.6 }}>
+            Start chatting with GitPilot to create your first session.
+          </div>
+        </div>
+      )}
+
+      {/* Table */}
+      {!loading && filtered.length > 0 && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            border: "1px solid #2a2b36",
+            overflow: "hidden",
+          }}
+        >
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              fontSize: "12px",
+            }}
+          >
+            <thead>
+              <tr style={{ background: "#0d0e15" }}>
+                <th style={thStyle}>Name</th>
+                <th style={thStyle}>Repository</th>
+                <th style={thStyle}>Branch</th>
+                <th style={thStyle}>Messages</th>
+                <th style={thStyle}>Status</th>
+                <th style={thStyle}>Updated</th>
+                <th style={{ ...thStyle, textAlign: "right" }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((s) => (
+                <tr
+                  key={s.id}
+                  style={{
+                    borderTop: "1px solid #2a2b36",
+                    cursor: onSelectSession ? "pointer" : "default",
+                  }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.background = "#22232e")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.background = "transparent")
+                  }
+                  onClick={() => onSelectSession?.(s)}
+                >
+                  <td style={tdStyle}>
+                    <div style={{ fontWeight: 600 }}>
+                      {s.name || <span style={{ opacity: 0.4 }}>(unnamed)</span>}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: "10px",
+                        opacity: 0.4,
+                        fontFamily: "monospace",
+                      }}
+                    >
+                      {s.id?.slice(0, 12)}
+                    </div>
+                  </td>
+                  <td style={{ ...tdStyle, fontFamily: "monospace" }}>
+                    {s.repo || <span style={{ opacity: 0.4 }}>—</span>}
+                  </td>
+                  <td style={{ ...tdStyle, fontFamily: "monospace" }}>
+                    {s.branch || <span style={{ opacity: 0.4 }}>—</span>}
+                  </td>
+                  <td style={tdStyle}>{s.message_count ?? 0}</td>
+                  <td style={tdStyle}>
+                    <span
+                      style={{
+                        padding: "2px 8px",
+                        background:
+                          s.status === "active"
+                            ? "#064e3b"
+                            : s.status === "completed"
+                            ? "#1e3a5f"
+                            : "#374151",
+                        color:
+                          s.status === "active"
+                            ? "#a7f3d0"
+                            : s.status === "completed"
+                            ? "#93c5fd"
+                            : "#9ca3af",
+                        borderRadius: "10px",
+                        fontSize: "10px",
+                        fontWeight: 600,
+                        textTransform: "uppercase",
+                      }}
+                    >
+                      {s.status || "unknown"}
+                    </span>
+                  </td>
+                  <td style={{ ...tdStyle, opacity: 0.7 }}>
+                    {formatRelativeTime(s.updated_at)}
+                  </td>
+                  <td style={{ ...tdStyle, textAlign: "right" }}>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete(s);
+                      }}
+                      disabled={deletingId === s.id}
+                      style={{
+                        padding: "4px 10px",
+                        background: "transparent",
+                        color: "#f87171",
+                        border: "1px solid #991b1b",
+                        borderRadius: "4px",
+                        cursor: deletingId === s.id ? "not-allowed" : "pointer",
+                        fontSize: "11px",
+                      }}
+                    >
+                      {deletingId === s.id ? "..." : "Delete"}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* No matches for search */}
+      {!loading && sessions.length > 0 && filtered.length === 0 && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "20px",
+            textAlign: "center",
+            border: "1px dashed #2a2b36",
+            fontSize: "12px",
+            opacity: 0.7,
+          }}
+        >
+          No sessions match "{query}"
+        </div>
+      )}
+    </div>
+  );
+}
+
+const thStyle = {
+  padding: "10px 12px",
+  textAlign: "left",
+  fontSize: "11px",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  opacity: 0.7,
+};
+
+const tdStyle = {
+  padding: "10px 12px",
+  verticalAlign: "middle",
+};

frontend/components/AdminTabs/SkillsTab.jsx

@@ -0,0 +1,266 @@
+// frontend/components/AdminTabs/SkillsTab.jsx
+import React, { useEffect, useState, useCallback } from "react";
+import { apiUrl, safeFetchJSON } from "../../utils/api.js";
+
+/**
+ * Skills tab — lists all loaded skills from /api/skills and allows
+ * reloading them from disk via /api/skills/reload.
+ *
+ * Best practices applied:
+ * - Fetch on mount
+ * - Explicit reload button (skills are loaded from .md files on disk)
+ * - Loading / empty / error states
+ * - Auto-trigger indicator badge
+ * - Required tools list per skill
+ * - Source file path for debugging
+ */
+
+export default function SkillsTab({ showToast }) {
+  const [skills, setSkills] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [reloading, setReloading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchSkills = useCallback(async () => {
+    setError(null);
+    try {
+      const data = await safeFetchJSON(apiUrl("/api/skills"), { timeout: 10000 });
+      setSkills(Array.isArray(data.skills) ? data.skills : []);
+    } catch (err) {
+      setError(err?.message || "Failed to load skills");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSkills();
+  }, [fetchSkills]);
+
+  const handleReload = async () => {
+    setReloading(true);
+    setError(null);
+    try {
+      const data = await safeFetchJSON(apiUrl("/api/skills/reload"), {
+        method: "POST",
+        timeout: 10000,
+      });
+      showToast?.(
+        "Skills reloaded",
+        `${data.count ?? 0} skill${data.count !== 1 ? "s" : ""} loaded from disk.`
+      );
+      await fetchSkills();
+    } catch (err) {
+      setError(err?.message || "Failed to reload skills");
+    } finally {
+      setReloading(false);
+    }
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          marginBottom: "16px",
+        }}
+      >
+        <div>
+          <h3 style={{ marginBottom: "4px" }}>Skills</h3>
+          <p style={{ fontSize: "12px", opacity: 0.7 }}>
+            Reusable prompt templates loaded from{" "}
+            <code style={{ fontSize: "11px" }}>.gitpilot/skills/*.md</code> files.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={handleReload}
+          disabled={reloading || loading}
+          style={{
+            padding: "6px 12px",
+            background: reloading ? "#555" : "#3B82F6",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: reloading || loading ? "not-allowed" : "pointer",
+            fontSize: "12px",
+            fontWeight: 600,
+          }}
+        >
+          {reloading ? "Reloading..." : "Reload Skills"}
+        </button>
+      </div>
+
+      {/* Loading state */}
+      {loading && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "40px 20px",
+            textAlign: "center",
+            border: "1px solid #2a2b36",
+            fontSize: "12px",
+            opacity: 0.6,
+          }}
+        >
+          Loading skills...
+        </div>
+      )}
+
+      {/* Error state */}
+      {error && !loading && (
+        <div
+          role="alert"
+          style={{
+            background: "#7f1d1d",
+            color: "#fecaca",
+            border: "1px solid #991b1b",
+            borderRadius: "8px",
+            padding: "12px",
+            fontSize: "12px",
+          }}
+        >
+          <strong>Error: </strong>
+          {error}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && !error && skills.length === 0 && (
+        <div
+          style={{
+            background: "#1a1b26",
+            borderRadius: "8px",
+            padding: "40px 20px",
+            textAlign: "center",
+            border: "1px dashed #2a2b36",
+          }}
+        >
+          <div style={{ fontSize: "32px", marginBottom: "8px" }}>📚</div>
+          <div style={{ fontSize: "14px", fontWeight: 600, marginBottom: "4px" }}>
+            No skills loaded
+          </div>
+          <div style={{ fontSize: "12px", opacity: 0.6 }}>
+            Create a <code>.gitpilot/skills/my-skill.md</code> file with YAML
+            frontmatter to add custom skills.
+          </div>
+        </div>
+      )}
+
+      {/* Skills grid */}
+      {!loading && skills.length > 0 && (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: "12px",
+          }}
+        >
+          {skills.map((skill) => (
+            <div
+              key={skill.name}
+              style={{
+                background: "#1a1b26",
+                borderRadius: "8px",
+                padding: "16px",
+                border: "1px solid #2a2b36",
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "flex-start",
+                  gap: "8px",
+                }}
+              >
+                <h4
+                  style={{
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    margin: 0,
+                    color: "#fff",
+                  }}
+                >
+                  {skill.name}
+                </h4>
+                {skill.auto_trigger && (
+                  <span
+                    title="Auto-triggered by matching context"
+                    style={{
+                      padding: "2px 8px",
+                      background: "#1e3a5f",
+                      color: "#93c5fd",
+                      border: "1px solid #3B82F6",
+                      borderRadius: "10px",
+                      fontSize: "9px",
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    Auto
+                  </span>
+                )}
+              </div>
+
+              <p
+                style={{
+                  fontSize: "12px",
+                  opacity: 0.7,
+                  lineHeight: 1.5,
+                  margin: 0,
+                  minHeight: "36px",
+                }}
+              >
+                {skill.description || "No description"}
+              </p>
+
+              {Array.isArray(skill.required_tools) && skill.required_tools.length > 0 && (
+                <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
+                  {skill.required_tools.map((t) => (
+                    <span
+                      key={t}
+                      style={{
+                        padding: "2px 6px",
+                        background: "#0d0e15",
+                        border: "1px solid #2a2b36",
+                        borderRadius: "4px",
+                        fontSize: "10px",
+                        fontFamily: "monospace",
+                        opacity: 0.8,
+                      }}
+                    >
+                      {t}
+                    </span>
+                  ))}
+                </div>
+              )}
+
+              {skill.source && (
+                <div
+                  style={{
+                    fontSize: "10px",
+                    opacity: 0.4,
+                    fontFamily: "monospace",
+                    borderTop: "1px solid #2a2b36",
+                    paddingTop: "8px",
+                    wordBreak: "break-all",
+                  }}
+                >
+                  {skill.source}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/AdminTabs/WorkspaceModesTab.jsx

@@ -0,0 +1,254 @@
+// frontend/components/AdminTabs/WorkspaceModesTab.jsx
+import React, { useState } from "react";
+import { startSession } from "../../utils/api.js";
+
+/**
+ * Workspace Modes tab — allows the user to start a session in one of
+ * three modes (folder, local_git, github). Calls POST /api/session/start.
+ *
+ * Best practices applied:
+ * - Loading state while the request is in flight
+ * - Per-mode error state (not a global error)
+ * - Disabled card during submission to prevent double-click
+ * - ARIA role="button" + aria-disabled for accessibility
+ * - Toast notification on success
+ * - Success callback so App.jsx can set activeSessionId and switch to workspace view
+ */
+
+const MODES = [
+  {
+    id: "folder",
+    title: "Folder Mode",
+    description: "Work with any local folder. No Git required.",
+    requires: "A local folder path",
+    enables: "Chat, explain, review",
+    promptKey: "folder_path",
+    promptLabel: "Folder path (absolute)",
+    promptPlaceholder: "/home/you/myproject",
+    buildPayload: (value) => ({ mode: "folder", folder_path: value }),
+  },
+  {
+    id: "local_git",
+    title: "Local Git Mode",
+    description: "Full repo + branch context for AI assistance.",
+    requires: "A local Git repository",
+    enables: "All local features (branches, diff, commit)",
+    promptKey: "repo_root",
+    promptLabel: "Repository root (absolute path)",
+    promptPlaceholder: "/home/you/my-git-repo",
+    buildPayload: (value) => ({ mode: "local_git", repo_root: value }),
+  },
+  {
+    id: "github",
+    title: "GitHub Mode",
+    description: "PRs, issues, remote workflows via GitHub API.",
+    requires: "GitHub token (already signed in)",
+    enables: "Full platform features",
+    promptKey: "repo_full_name",
+    promptLabel: "Repository (owner/repo)",
+    promptPlaceholder: "octocat/hello-world",
+    buildPayload: (value) => ({ mode: "github", repo_full_name: value }),
+  },
+];
+
+export default function WorkspaceModesTab({ onSessionStarted, showToast }) {
+  const [activeModeId, setActiveModeId] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const [submittingId, setSubmittingId] = useState(null);
+  const [errorByMode, setErrorByMode] = useState({});
+
+  const handleCardClick = (mode) => {
+    if (submittingId) return;
+    setActiveModeId(mode.id);
+    setInputValue("");
+    setErrorByMode((prev) => ({ ...prev, [mode.id]: null }));
+  };
+
+  const handleStart = async (mode) => {
+    const trimmed = inputValue.trim();
+    if (!trimmed) {
+      setErrorByMode((prev) => ({
+        ...prev,
+        [mode.id]: `${mode.promptLabel} is required`,
+      }));
+      return;
+    }
+
+    setSubmittingId(mode.id);
+    setErrorByMode((prev) => ({ ...prev, [mode.id]: null }));
+
+    try {
+      const payload = mode.buildPayload(trimmed);
+      const result = await startSession(payload);
+
+      showToast?.(
+        `${mode.title} started`,
+        `Session ${result.session_id?.slice(0, 8) || ""} is now active.`
+      );
+
+      onSessionStarted?.(result);
+      setActiveModeId(null);
+      setInputValue("");
+    } catch (err) {
+      setErrorByMode((prev) => ({
+        ...prev,
+        [mode.id]: err?.message || "Failed to start session",
+      }));
+    } finally {
+      setSubmittingId(null);
+    }
+  };
+
+  const handleCancel = () => {
+    if (submittingId) return;
+    setActiveModeId(null);
+    setInputValue("");
+  };
+
+  return (
+    <div>
+      <h3 style={{ marginBottom: "16px" }}>Workspace Modes</h3>
+      <p style={{ fontSize: "12px", opacity: 0.7, marginBottom: "16px" }}>
+        Choose how you want GitPilot to interact with your code. You can switch modes at any time.
+      </p>
+
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "16px" }}>
+        {MODES.map((mode) => {
+          const isActive = activeModeId === mode.id;
+          const isSubmitting = submittingId === mode.id;
+          const error = errorByMode[mode.id];
+
+          return (
+            <div
+              key={mode.id}
+              role="button"
+              tabIndex={isSubmitting ? -1 : 0}
+              aria-disabled={!!submittingId && !isSubmitting}
+              onClick={() => !isActive && handleCardClick(mode)}
+              onKeyDown={(e) => {
+                if ((e.key === "Enter" || e.key === " ") && !isActive) {
+                  e.preventDefault();
+                  handleCardClick(mode);
+                }
+              }}
+              style={{
+                background: isActive ? "#1e3a5f" : "#1a1b26",
+                borderRadius: "8px",
+                padding: "20px",
+                border: isActive ? "1px solid #3B82F6" : "1px solid #2a2b36",
+                cursor: submittingId && !isSubmitting ? "not-allowed" : "pointer",
+                opacity: submittingId && !isSubmitting ? 0.5 : 1,
+                transition: "all 150ms ease",
+              }}
+            >
+              <h4 style={{ marginBottom: "8px", color: isActive ? "#93c5fd" : "#fff" }}>
+                {mode.title}
+              </h4>
+              <p style={{ fontSize: "12px", opacity: 0.7, marginBottom: "12px" }}>
+                {mode.description}
+              </p>
+              <div style={{ fontSize: "12px", marginBottom: "4px" }}>
+                <span style={{ opacity: 0.6 }}>Requires: </span>
+                {mode.requires}
+              </div>
+              <div style={{ fontSize: "12px", marginBottom: "12px" }}>
+                <span style={{ opacity: 0.6 }}>Enables: </span>
+                {mode.enables}
+              </div>
+
+              {isActive && (
+                <div onClick={(e) => e.stopPropagation()} style={{ marginTop: "12px" }}>
+                  <label
+                    htmlFor={`mode-input-${mode.id}`}
+                    style={{
+                      fontSize: "11px",
+                      opacity: 0.7,
+                      display: "block",
+                      marginBottom: "4px",
+                    }}
+                  >
+                    {mode.promptLabel}
+                  </label>
+                  <input
+                    id={`mode-input-${mode.id}`}
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.preventDefault();
+                        handleStart(mode);
+                      } else if (e.key === "Escape") {
+                        handleCancel();
+                      }
+                    }}
+                    placeholder={mode.promptPlaceholder}
+                    disabled={isSubmitting}
+                    autoFocus
+                    style={{
+                      width: "100%",
+                      padding: "6px 8px",
+                      background: "#0d0e15",
+                      border: "1px solid #2a2b36",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      fontSize: "12px",
+                      fontFamily: "monospace",
+                    }}
+                  />
+                  {error && (
+                    <div
+                      style={{
+                        fontSize: "11px",
+                        color: "#f87171",
+                        marginTop: "6px",
+                      }}
+                      role="alert"
+                    >
+                      {error}
+                    </div>
+                  )}
+                  <div style={{ display: "flex", gap: "6px", marginTop: "10px" }}>
+                    <button
+                      type="button"
+                      onClick={() => handleStart(mode)}
+                      disabled={isSubmitting || !inputValue.trim()}
+                      style={{
+                        padding: "6px 12px",
+                        background: isSubmitting ? "#555" : "#3B82F6",
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: isSubmitting || !inputValue.trim() ? "not-allowed" : "pointer",
+                        fontSize: "12px",
+                        fontWeight: 600,
+                      }}
+                    >
+                      {isSubmitting ? "Starting..." : "Start Session"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleCancel}
+                      disabled={isSubmitting}
+                      style={{
+                        padding: "6px 12px",
+                        background: "transparent",
+                        color: "#a0a0b0",
+                        border: "1px solid #2a2b36",
+                        borderRadius: "4px",
+                        cursor: isSubmitting ? "not-allowed" : "pointer",
+                        fontSize: "12px",
+                      }}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/components/AdminTabs/index.js

@@ -0,0 +1,10 @@
+// frontend/components/AdminTabs/index.js
+// Barrel export — all admin tab components in one place
+export { default as WorkspaceModesTab } from "./WorkspaceModesTab.jsx";
+export { default as SecurityTab } from "./SecurityTab.jsx";
+export { default as IntegrationsTab } from "./IntegrationsTab.jsx";
+export { default as MCPServersTab } from "./MCPServersTab.jsx";
+export { default as SkillsTab } from "./SkillsTab.jsx";
+export { default as SessionsTab } from "./SessionsTab.jsx";
+export { default as AdvancedTab } from "./AdvancedTab.jsx";
+export { default as SandboxTab } from "./SandboxTab.jsx";

frontend/components/AdminTabs/mcp/CatalogList.jsx

@@ -0,0 +1,101 @@
+// frontend/components/AdminTabs/mcp/CatalogList.jsx
+// Browse curated MCP servers shipped with GitPilot. Each item has a
+// one-click "Install" that lands the server in the Installed tab,
+// disabled by default.
+
+import React from "react";
+
+export default function CatalogList({ items, onInstall }) {
+  if (!items?.length) {
+    return (
+      <p style={{ color: "#a0a0b0", fontSize: "13px" }}>
+        No catalog entries shipped with this build.
+      </p>
+    );
+  }
+
+  return (
+    <div style={{ display: "grid", gap: "12px", gridTemplateColumns: "1fr" }}>
+      {items.map((item) => (
+        <div
+          key={item.id}
+          style={{
+            background: "#1a1b26",
+            border: "1px solid #2a2b36",
+            borderRadius: "8px",
+            padding: "16px 20px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "16px",
+          }}
+        >
+          <div style={{ flex: "1 1 auto", minWidth: 0 }}>
+            <div
+              style={{
+                display: "flex",
+                gap: "8px",
+                alignItems: "center",
+                marginBottom: "4px",
+              }}
+            >
+              <strong style={{ fontSize: "14px", color: "#e0e0e7" }}>
+                {item.id}
+              </strong>
+              {item.installed && (
+                <span
+                  style={{
+                    padding: "2px 8px",
+                    background: "#0f3a26",
+                    color: "#86efac",
+                    borderRadius: "4px",
+                    fontSize: "10px",
+                    fontWeight: 600,
+                  }}
+                >
+                  installed
+                </span>
+              )}
+            </div>
+            <div style={{ fontSize: "12px", color: "#a0a0b0", marginBottom: "6px" }}>
+              {item.description}
+            </div>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
+              {(item.tags || []).map((t) => (
+                <span
+                  key={t}
+                  style={{
+                    padding: "1px 6px",
+                    background: "#252634",
+                    border: "1px solid #2a2b36",
+                    borderRadius: "10px",
+                    fontSize: "10px",
+                    color: "#cdd0d8",
+                  }}
+                >
+                  {t}
+                </span>
+              ))}
+            </div>
+          </div>
+          <button
+            onClick={() => onInstall(item.id)}
+            disabled={item.installed}
+            style={{
+              padding: "6px 14px",
+              background: item.installed ? "#252634" : "#3B82F6",
+              color: item.installed ? "#7a7d8a" : "#fff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: item.installed ? "not-allowed" : "pointer",
+              fontSize: "12px",
+              fontWeight: 600,
+            }}
+          >
+            {item.installed ? "Installed" : "Install"}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/components/AdminTabs/mcp/CustomInstallForm.jsx

@@ -0,0 +1,134 @@
+// frontend/components/AdminTabs/mcp/CustomInstallForm.jsx
+// Paste-a-register.json form for installing a custom MCP server.
+
+import React, { useState } from "react";
+
+const SAMPLE = `{
+  "name": "mcp-neo4j-server",
+  "endpoint": "http://mcp-neo4j-server:8083/mcp",
+  "description": "Neo4j MCP server for graph schema discovery",
+  "tags": ["graph", "neo4j"],
+  "auth": { "type": "bearer", "env": "MCP_NEO4J_SERVER_TOKEN" }
+}`;
+
+export default function CustomInstallForm({ onSubmit }) {
+  const [text, setText] = useState(SAMPLE);
+  const [err, setErr] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    setErr(null);
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch (e) {
+      setErr("Invalid JSON: " + (e?.message || ""));
+      return;
+    }
+    if (!parsed.name || !parsed.endpoint) {
+      setErr("register.json must include 'name' and 'endpoint'.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await onSubmit(parsed);
+      setText(SAMPLE);
+    } catch (e) {
+      setErr(e?.message || "Install failed");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        background: "#1a1b26",
+        border: "1px solid #2a2b36",
+        borderRadius: "8px",
+        padding: "20px",
+      }}
+    >
+      <h4 style={{ margin: "0 0 6px 0", color: "#e0e0e7" }}>Install custom server</h4>
+      <p style={{ margin: "0 0 12px 0", fontSize: "12px", color: "#a0a0b0" }}>
+        Paste a Context Forge <code>register.json</code>. The server lands
+        disabled — turn it on from the Installed tab once you have set its
+        auth token.
+      </p>
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        rows={12}
+        spellCheck={false}
+        aria-label="register.json"
+        style={{
+          width: "100%",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+          fontSize: "12px",
+          background: "#0f1018",
+          color: "#cdd0d8",
+          border: "1px solid #2a2b36",
+          borderRadius: "6px",
+          padding: "12px",
+          resize: "vertical",
+          boxSizing: "border-box",
+        }}
+      />
+      {err && (
+        <div
+          role="alert"
+          style={{
+            marginTop: "8px",
+            padding: "8px 12px",
+            background: "#3a0f0f",
+            border: "1px solid #5a1f1f",
+            borderRadius: "6px",
+            color: "#fca5a5",
+            fontSize: "12px",
+          }}
+        >
+          {err}
+        </div>
+      )}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          gap: "8px",
+          marginTop: "12px",
+        }}
+      >
+        <button
+          onClick={() => setText(SAMPLE)}
+          style={{
+            padding: "6px 12px",
+            background: "transparent",
+            color: "#cdd0d8",
+            border: "1px solid #3a3b4a",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontSize: "12px",
+          }}
+        >
+          Reset
+        </button>
+        <button
+          onClick={handleSubmit}
+          disabled={submitting}
+          style={{
+            padding: "6px 14px",
+            background: "#3B82F6",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: submitting ? "not-allowed" : "pointer",
+            fontSize: "12px",
+            fontWeight: 600,
+          }}
+        >
+          {submitting ? "Installing…" : "Install server"}
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/components/AdminTabs/mcp/GatewayHeader.jsx

@@ -0,0 +1,145 @@
+// frontend/components/AdminTabs/mcp/GatewayHeader.jsx
+// Top strip of the MCP Servers tab: gateway pill + roll-up counters.
+
+import React from "react";
+
+export default function GatewayHeader({
+  status,
+  installedCount,
+  enabledCount,
+  totalTools,
+  onRefresh,
+  onSync,
+  syncing,
+}) {
+  const reachable = status?.gateway_reachable;
+  const dotColor = reachable ? "#10b981" : "#ef4444";
+  const dotLabel = reachable ? "Connected" : "Unreachable";
+  const gatewayUrl = status?.gateway_url || "—";
+
+  return (
+    <div
+      style={{
+        background: "#1a1b26",
+        border: "1px solid #2a2b36",
+        borderRadius: "8px",
+        padding: "16px 20px",
+        marginBottom: "16px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: "12px",
+      }}
+    >
+      <div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginBottom: "4px",
+          }}
+        >
+          <span
+            aria-hidden
+            style={{
+              width: "10px",
+              height: "10px",
+              background: dotColor,
+              borderRadius: "50%",
+              boxShadow: `0 0 8px ${dotColor}`,
+            }}
+          />
+          <strong style={{ fontSize: "14px", color: "#e0e0e7" }}>
+            MCP Context Forge — {dotLabel}
+          </strong>
+          {status?.plugin_enabled === false && (
+            <span
+              title="Set GITPILOT_MCP_ENABLED=true to let agents call MCP tools."
+              style={{
+                marginLeft: "8px",
+                padding: "2px 8px",
+                background: "#5c1a1a",
+                color: "#fecaca",
+                borderRadius: "4px",
+                fontSize: "11px",
+                fontWeight: 600,
+              }}
+            >
+              plugin disabled
+            </span>
+          )}
+        </div>
+        <div style={{ fontSize: "12px", color: "#a0a0b0" }}>
+          Gateway: <code>{gatewayUrl}</code>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          gap: "20px",
+          alignItems: "center",
+          fontSize: "12px",
+          color: "#cdd0d8",
+        }}
+      >
+        <Counter label="Installed" value={installedCount} />
+        <Counter label="Enabled" value={enabledCount} />
+        <Counter label="Tools" value={totalTools} />
+        <button
+          onClick={onRefresh}
+          style={{
+            padding: "6px 12px",
+            background: "#252634",
+            color: "#e0e0e7",
+            border: "1px solid #3a3b4a",
+            borderRadius: "4px",
+            cursor: "pointer",
+            fontSize: "12px",
+          }}
+        >
+          Refresh
+        </button>
+        {onSync && (
+          <button
+            onClick={onSync}
+            disabled={!reachable || syncing}
+            title={
+              reachable
+                ? "Pull the server registry from MCP Context Forge"
+                : "Gateway unreachable — start MCP Context Forge first (make run)"
+            }
+            style={{
+              padding: "6px 12px",
+              background: reachable ? "#1e3a5f" : "#252634",
+              color: reachable ? "#93c5fd" : "#7a7d8a",
+              border: `1px solid ${reachable ? "#3B82F6" : "#3a3b4a"}`,
+              borderRadius: "4px",
+              cursor: reachable && !syncing ? "pointer" : "not-allowed",
+              fontSize: "12px",
+              fontWeight: 600,
+              opacity: !reachable || syncing ? 0.6 : 1,
+            }}
+          >
+            {syncing ? "Syncing…" : "Sync"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Counter({ label, value }) {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <div style={{ fontSize: "18px", fontWeight: 700, color: "#e0e0e7" }}>
+        {value ?? "—"}
+      </div>
+      <div style={{ fontSize: "11px", color: "#7a7d8a", textTransform: "uppercase" }}>
+        {label}
+      </div>
+    </div>
+  );
+}

frontend/components/AdminTabs/mcp/ServerCard.jsx

@@ -0,0 +1,334 @@
+// frontend/components/AdminTabs/mcp/ServerCard.jsx
+// One installed MCP server. Collapsed shows summary + actions; expanded
+// reveals the per-tool list with risk badges and individual toggles.
+
+import React, { useState } from "react";
+import ToolRow from "./ToolRow.jsx";
+
+const RISK_PALETTE = {
+  low: { bg: "#0f3a26", border: "#1f5a3e", text: "#86efac" },
+  medium: { bg: "#3a2e0f", border: "#5a4a1f", text: "#fcd34d" },
+  high: { bg: "#3a0f0f", border: "#5a1f1f", text: "#fca5a5" },
+};
+
+export default function ServerCard({
+  server,
+  onEnable,
+  onDisable,
+  onUninstall,
+  onTest,
+  onToggleTool,
+  onForget,
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [testing, setTesting] = useState(false);
+
+  const handleTest = async () => {
+    setTesting(true);
+    try {
+      const result = await onTest();
+      setTestResult(result);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const statusDot = server.enabled ? "#10b981" : "#6b7280";
+  const statusLabel = server.enabled ? "Enabled" : "Disabled";
+
+  // Risk roll-up shown next to the tool count.
+  const riskCounts = server.tools?.reduce(
+    (acc, t) => ({ ...acc, [t.risk]: (acc[t.risk] || 0) + 1 }),
+    {}
+  ) || {};
+
+  return (
+    <div
+      style={{
+        background: "#1a1b26",
+        border: "1px solid #2a2b36",
+        borderRadius: "8px",
+        overflow: "hidden",
+      }}
+    >
+      <div style={{ padding: "16px 20px" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            gap: "16px",
+            flexWrap: "wrap",
+          }}
+        >
+          <div style={{ flex: "1 1 320px", minWidth: 0 }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                marginBottom: "6px",
+              }}
+            >
+              <span
+                aria-hidden
+                style={{
+                  width: "8px",
+                  height: "8px",
+                  background: statusDot,
+                  borderRadius: "50%",
+                }}
+              />
+              <strong
+                style={{
+                  fontSize: "15px",
+                  color: "#e0e0e7",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {server.id}
+              </strong>
+              <span
+                style={{
+                  padding: "2px 8px",
+                  background: server.enabled ? "#0f3a26" : "#252634",
+                  color: server.enabled ? "#86efac" : "#a0a0b0",
+                  borderRadius: "4px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                }}
+              >
+                {statusLabel}
+              </span>
+              {!server.is_known && (
+                <span
+                  title="Custom server (not part of the GitPilot catalog)"
+                  style={{
+                    padding: "2px 8px",
+                    background: "#1e3a5f",
+                    color: "#93c5fd",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                  }}
+                >
+                  custom
+                </span>
+              )}
+              {server.orphan && (
+                <span
+                  title="No longer registered in MCP Context Forge. Still works locally; click Forget to drop it, or re-attach it in Forge."
+                  style={{
+                    padding: "2px 8px",
+                    background: "#3a2e0f",
+                    color: "#fcd34d",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                    fontWeight: 600,
+                  }}
+                >
+                  orphan
+                </span>
+              )}
+              {server.source === "forge-sync" && !server.orphan && (
+                <span
+                  title="Added by the most recent forge sync."
+                  style={{
+                    padding: "2px 8px",
+                    background: "#1e3a5f",
+                    color: "#93c5fd",
+                    borderRadius: "4px",
+                    fontSize: "11px",
+                  }}
+                >
+                  via sync
+                </span>
+              )}
+            </div>
+            <div
+              style={{
+                fontSize: "12px",
+                color: "#a0a0b0",
+                marginBottom: "8px",
+              }}
+            >
+              {server.description || "—"}
+            </div>
+            <div
+              style={{
+                fontSize: "11px",
+                color: "#7a7d8a",
+                marginBottom: "8px",
+                wordBreak: "break-all",
+              }}
+            >
+              <code>{server.endpoint || "—"}</code>
+            </div>
+            <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>
+              {(server.tags || []).map((t) => (
+                <span
+                  key={t}
+                  style={{
+                    padding: "2px 8px",
+                    background: "#252634",
+                    border: "1px solid #2a2b36",
+                    borderRadius: "10px",
+                    fontSize: "11px",
+                    color: "#cdd0d8",
+                  }}
+                >
+                  {t}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              alignItems: "flex-end",
+            }}
+          >
+            <div style={{ display: "flex", gap: "6px" }}>
+              {server.enabled ? (
+                <Btn variant="ghost" onClick={onDisable}>
+                  Disable
+                </Btn>
+              ) : (
+                <Btn variant="primary" onClick={onEnable}>
+                  Enable
+                </Btn>
+              )}
+              <Btn onClick={handleTest} disabled={testing}>
+                {testing ? "Testing…" : "Test"}
+              </Btn>
+              {onForget ? (
+                <Btn variant="danger" onClick={onForget}>
+                  Forget
+                </Btn>
+              ) : (
+                <Btn variant="danger" onClick={onUninstall}>
+                  Uninstall
+                </Btn>
+              )}
+            </div>
+            <div style={{ fontSize: "11px", color: "#a0a0b0" }}>
+              {server.tool_count} tool{server.tool_count === 1 ? "" : "s"}
+              {Object.entries(riskCounts).map(([risk, count]) => (
+                <span
+                  key={risk}
+                  title={`${count} ${risk}-risk tools`}
+                  style={{
+                    marginLeft: "6px",
+                    padding: "1px 6px",
+                    borderRadius: "10px",
+                    background: RISK_PALETTE[risk]?.bg,
+                    color: RISK_PALETTE[risk]?.text,
+                    border: `1px solid ${RISK_PALETTE[risk]?.border}`,
+                    fontSize: "10px",
+                  }}
+                >
+                  {count} {risk}
+                </span>
+              ))}
+            </div>
+            <button
+              onClick={() => setExpanded((v) => !v)}
+              style={{
+                padding: "4px 8px",
+                background: "transparent",
+                color: "#93c5fd",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "12px",
+              }}
+            >
+              {expanded ? "Hide tools ▴" : "Show tools ▾"}
+            </button>
+          </div>
+        </div>
+
+        {testResult && (
+          <div
+            role="status"
+            style={{
+              marginTop: "12px",
+              padding: "8px 12px",
+              fontSize: "12px",
+              borderRadius: "6px",
+              background: testResult.ok ? "#0f3a26" : "#3a0f0f",
+              border: `1px solid ${testResult.ok ? "#1f5a3e" : "#5a1f1f"}`,
+              color: testResult.ok ? "#86efac" : "#fca5a5",
+            }}
+          >
+            {testResult.ok
+              ? "Healthy. Inspector confirmed the server is reachable and advertises its expected tools."
+              : `Failed: ${testResult.reason || testResult.error || "unknown error"}`}
+          </div>
+        )}
+      </div>
+
+      {expanded && (
+        <div
+          style={{
+            borderTop: "1px solid #2a2b36",
+            background: "#16171f",
+            padding: "8px 0",
+          }}
+        >
+          {server.tools?.length ? (
+            server.tools.map((t) => (
+              <ToolRow
+                key={t.name}
+                tool={t}
+                disabled={!server.enabled}
+                onToggle={(enabled) => onToggleTool(t.name, enabled)}
+              />
+            ))
+          ) : (
+            <div
+              style={{
+                padding: "12px 20px",
+                fontSize: "12px",
+                color: "#a0a0b0",
+              }}
+            >
+              No tools advertised by this server.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function Btn({ children, variant = "default", ...props }) {
+  const palettes = {
+    default: { bg: "#252634", color: "#e0e0e7", border: "#3a3b4a" },
+    primary: { bg: "#3B82F6", color: "#fff", border: "#3B82F6" },
+    ghost: { bg: "transparent", color: "#cdd0d8", border: "#3a3b4a" },
+    danger: { bg: "transparent", color: "#fca5a5", border: "#5a1f1f" },
+  };
+  const p = palettes[variant];
+  return (
+    <button
+      {...props}
+      style={{
+        padding: "6px 12px",
+        background: p.bg,
+        color: p.color,
+        border: `1px solid ${p.border}`,
+        borderRadius: "4px",
+        cursor: props.disabled ? "not-allowed" : "pointer",
+        fontSize: "12px",
+        opacity: props.disabled ? 0.6 : 1,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

frontend/components/AdminTabs/mcp/SyncReport.jsx

@@ -0,0 +1,152 @@
+// frontend/components/AdminTabs/mcp/SyncReport.jsx
+// Renders the SyncReport returned by POST /api/mcp/sync as a compact
+// dismissible banner. Best practices: structured + colour-coded counts,
+// truncated id lists with a "View" toggle, single primary "Dismiss"
+// action, ARIA "status" so a screen reader announces the result once.
+
+import React, { useState } from "react";
+
+export default function SyncReport({ report, onDismiss }) {
+  const [open, setOpen] = useState(false);
+  if (!report) return null;
+
+  const { added = [], kept = [], orphaned = [], forge_unreachable, error } = report;
+
+  if (forge_unreachable) {
+    return (
+      <Banner
+        kind="bad"
+        title="Sync failed: forge unreachable"
+        body={error || "Could not reach MCP Context Forge."}
+        onDismiss={onDismiss}
+      />
+    );
+  }
+
+  const noChanges = added.length === 0 && orphaned.length === 0;
+
+  return (
+    <Banner
+      kind={noChanges ? "info" : added.length ? "ok" : "warn"}
+      title={
+        noChanges
+          ? "Sync complete — no changes"
+          : `Sync complete · +${added.length} added · ${kept.length} refreshed · ${orphaned.length} orphan`
+      }
+      onDismiss={onDismiss}
+      footer={
+        <button
+          onClick={() => setOpen((v) => !v)}
+          style={{
+            background: "transparent",
+            border: "none",
+            color: "#93c5fd",
+            cursor: "pointer",
+            fontSize: 12,
+            padding: 0,
+          }}
+        >
+          {open ? "Hide details ▴" : "View details ▾"}
+        </button>
+      }
+    >
+      {open && (
+        <div
+          style={{ fontSize: 12, color: "#cdd0d8", marginTop: 6, lineHeight: 1.5 }}
+        >
+          {added.length > 0 && (
+            <Detail label="Added" items={added} colour="#86efac" />
+          )}
+          {kept.length > 0 && (
+            <Detail label="Refreshed" items={kept} colour="#93c5fd" />
+          )}
+          {orphaned.length > 0 && (
+            <Detail
+              label="Orphaned"
+              items={orphaned}
+              colour="#fcd34d"
+              hint="Still works locally — Forge no longer advertises them. Use 'Forget' to drop, or re-attach them in Forge."
+            />
+          )}
+          {report.correlation_id && (
+            <div style={{ marginTop: 6, color: "#7a7d8a" }}>
+              correlation_id: <code>{report.correlation_id}</code>
+            </div>
+          )}
+        </div>
+      )}
+    </Banner>
+  );
+}
+
+function Banner({ kind, title, body, footer, onDismiss, children }) {
+  const palette = {
+    ok: { bg: "#0f3a26", border: "#1f5a3e", text: "#86efac" },
+    info: { bg: "#1e3a5f", border: "#3B82F6", text: "#93c5fd" },
+    warn: { bg: "#3a2e0f", border: "#5a4a1f", text: "#fcd34d" },
+    bad: { bg: "#3a0f0f", border: "#5a1f1f", text: "#fca5a5" },
+  }[kind] || { bg: "#1a1b26", border: "#2a2b36", text: "#cdd0d8" };
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      style={{
+        background: palette.bg,
+        border: `1px solid ${palette.border}`,
+        borderRadius: 6,
+        padding: "10px 14px",
+        marginBottom: 12,
+        color: palette.text,
+        fontSize: 13,
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        <strong>{title}</strong>
+        <button
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          style={{
+            background: "transparent",
+            border: "none",
+            color: palette.text,
+            cursor: "pointer",
+            fontSize: 16,
+            lineHeight: 1,
+            padding: 0,
+          }}
+        >
+          ×
+        </button>
+      </div>
+      {body && <div>{body}</div>}
+      {children}
+      {footer && <div>{footer}</div>}
+    </div>
+  );
+}
+
+function Detail({ label, items, colour, hint }) {
+  return (
+    <div style={{ marginTop: 4 }}>
+      <span style={{ color: colour, fontWeight: 600 }}>{label}:</span>{" "}
+      <span>
+        {items.slice(0, 6).join(", ")}
+        {items.length > 6 ? ` … (+${items.length - 6} more)` : ""}
+      </span>
+      {hint && (
+        <div style={{ marginTop: 2, fontSize: 11, color: "#7a7d8a" }}>{hint}</div>
+      )}
+    </div>
+  );
+}

frontend/components/AdminTabs/mcp/ToolRow.jsx

@@ -0,0 +1,149 @@
+// frontend/components/AdminTabs/mcp/ToolRow.jsx
+// One row inside an expanded ServerCard. Tool name, risk badge,
+// "used by" agent chips, and a per-tool enable toggle.
+
+import React from "react";
+
+const RISK_PALETTE = {
+  low: { bg: "#0f3a26", text: "#86efac", label: "low" },
+  medium: { bg: "#3a2e0f", text: "#fcd34d", label: "med" },
+  high: { bg: "#3a0f0f", text: "#fca5a5", label: "high" },
+};
+
+export default function ToolRow({ tool, disabled, onToggle }) {
+  const risk = RISK_PALETTE[tool.risk] || RISK_PALETTE.low;
+
+  // Destructive tools cannot be toggled on by the UI; the backend's
+  // PolicyEngine will reject a toggle PUT anyway, but disabling the
+  // control surfaces the constraint up front.
+  const lockEnable = tool.destructive;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "12px",
+        padding: "8px 20px",
+        borderBottom: "1px solid #1a1b26",
+      }}
+    >
+      <div style={{ flex: "1 1 auto", minWidth: 0 }}>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginBottom: "2px",
+          }}
+        >
+          <code
+            style={{
+              fontSize: "12px",
+              color: "#e0e0e7",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {tool.name}
+          </code>
+          <span
+            title={`risk: ${tool.risk}`}
+            style={{
+              padding: "1px 6px",
+              borderRadius: "10px",
+              background: risk.bg,
+              color: risk.text,
+              fontSize: "10px",
+              fontWeight: 600,
+              textTransform: "uppercase",
+            }}
+          >
+            {risk.label}
+          </span>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: "4px",
+            flexWrap: "wrap",
+            fontSize: "10px",
+            color: "#7a7d8a",
+          }}
+        >
+          {(tool.used_by || []).length > 0 && <span>used by</span>}
+          {(tool.used_by || []).map((agent) => (
+            <span
+              key={agent}
+              style={{
+                padding: "1px 6px",
+                borderRadius: "10px",
+                background: "#1e3a5f",
+                color: "#93c5fd",
+              }}
+            >
+              {agent}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <Toggle
+        checked={tool.enabled}
+        disabled={disabled || lockEnable}
+        title={
+          lockEnable
+            ? "Destructive tool — blocked by policy"
+            : disabled
+            ? "Enable the server first"
+            : tool.enabled
+            ? "Disable this tool for GitPilot agents"
+            : "Allow GitPilot agents to call this tool"
+        }
+        onChange={(checked) => onToggle(checked)}
+      />
+    </div>
+  );
+}
+
+function Toggle({ checked, disabled, title, onChange }) {
+  return (
+    <label title={title} style={{ display: "inline-flex", alignItems: "center" }}>
+      <input
+        type="checkbox"
+        checked={!!checked}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.checked)}
+        style={{ position: "absolute", opacity: 0, pointerEvents: "none" }}
+        aria-label={title}
+      />
+      <span
+        style={{
+          width: "32px",
+          height: "18px",
+          borderRadius: "9px",
+          background: checked && !disabled ? "#3B82F6" : "#2a2b36",
+          position: "relative",
+          transition: "background 0.15s",
+          opacity: disabled ? 0.5 : 1,
+          cursor: disabled ? "not-allowed" : "pointer",
+        }}
+      >
+        <span
+          style={{
+            width: "14px",
+            height: "14px",
+            borderRadius: "50%",
+            background: "#fff",
+            position: "absolute",
+            top: "2px",
+            left: checked ? "16px" : "2px",
+            transition: "left 0.15s",
+          }}
+        />
+      </span>
+    </label>
+  );
+}

frontend/components/AssistantMessage.jsx

@@ -0,0 +1,429 @@
+import React, { useState } from "react";
+import PlanView from "./PlanView.jsx";
+import RunnableCodeBlock, { splitFences } from "./RunnableCodeBlock.jsx";
+import ExecutionPlanCard from "./ExecutionPlanCard.jsx";
+
+export default function AssistantMessage({
+  answer,
+  plan,
+  executionLog,
+  planStatus,
+  owner,
+  repo,
+  onApproveExecution,
+  nextActions,
+  relatedPlan,
+  diff,
+  branch,
+}) {
+  // Approval-first sandbox: when the planner returns an execution_plan,
+  // render the green ExecutionPlanCard instead of the orange Action Plan.
+  const executionPlan = plan?.execution_plan || null;
+  const [runResult, setRunResult] = useState(null);
+  const [runError, setRunError] = useState(null);
+  const [runBusy, setRunBusy] = useState(false);
+
+  const approveExecution = async (ep) => {
+    if (onApproveExecution) {
+      onApproveExecution(ep, plan);
+      return;
+    }
+    setRunBusy(true);
+    setRunError(null);
+    setRunResult(null);
+    try {
+      const body = ep.file
+        ? { language: ep.language, code: null }
+        : { language: ep.language, code: ep.inline_code, timeout_sec: ep.timeout_sec };
+      const res = await fetch("/api/sandbox/run", {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) setRunError(data.detail || `HTTP ${res.status}`);
+      else setRunResult(data);
+    } catch (e) { setRunError(e.message); }
+    finally { setRunBusy(false); }
+  };
+
+  const hasFileActions = plan?.steps?.some((s) => s.files?.length > 0);
+  const answerText = typeof answer === "string" ? answer.trim() : "";
+  // Suppress the answer prose when it would just duplicate what the
+  // plan card or success receipt already says.
+  const showAnswerProse =
+    answerText &&
+    !executionLog &&
+    !(plan && hasFileActions && !executionPlan && answerText === plan.summary);
+
+  return (
+    <div className="chat-message-ai assistant-card">
+      {/* Free-form answer prose. Rendered without a section header so
+          short answers feel like a chat reply, not a debug log. */}
+      {showAnswerProse && (
+        <div className="assistant-answer">
+          {splitFences(answerText).map((seg, i) =>
+            seg.type === "code" ? (
+              <RunnableCodeBlock
+                key={i}
+                language={seg.language}
+                code={seg.code}
+                owner={owner}
+                repo={repo}
+              />
+            ) : (
+              <p key={i} className="assistant-answer__p">
+                {seg.value}
+              </p>
+            ),
+          )}
+        </div>
+      )}
+
+      {/* Sandbox approval card. */}
+      {executionPlan && (
+        <div className="assistant-block">
+          <ExecutionPlanCard
+            plan={executionPlan}
+            variant="full"
+            busy={runBusy}
+            onApprove={approveExecution}
+            onCancel={() => { /* no-op */ }}
+          />
+          {runError && (
+            <div className="assistant-run-error">Run error: {runError}</div>
+          )}
+          {runResult && (
+            <pre className="assistant-run-output">
+              {runResult.stdout || runResult.stderr || "(no output)"}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {/* Proposed execution plan — only when there are file changes
+          and no execution log is present yet. */}
+      {plan && hasFileActions && !executionPlan && !executionLog && (
+        <div className="assistant-block">
+          <PlanView plan={plan} planStatus={planStatus} />
+        </div>
+      )}
+
+      {/* Completed execution receipt. */}
+      {executionLog && (
+        <SuccessReceipt
+          executionLog={executionLog}
+          relatedPlan={relatedPlan}
+          owner={owner}
+          repo={repo}
+          branch={branch}
+          diff={diff}
+          nextActions={nextActions}
+        />
+      )}
+
+      {/* Next actions when there is no execution log (e.g. simple answers). */}
+      {!executionLog && Array.isArray(nextActions) && nextActions.length > 0 && (
+        <div className="assistant-next-row">
+          {nextActions.map((a, i) => (
+            <NextActionButton key={i} action={a} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NextActionButton({ action }) {
+  const onClick = () => {
+    if (action.kind === "run_file" && action.payload?.file) {
+      window.dispatchEvent(
+        new CustomEvent("gitpilot:run-file", {
+          detail: { path: action.payload.file },
+        }),
+      );
+    } else if (action.kind === "open_workspace" && action.payload?.file) {
+      window.dispatchEvent(
+        new CustomEvent("gitpilot:open-workspace", {
+          detail: { path: action.payload.file },
+        }),
+      );
+    } else if (action.kind === "open_in_canvas" && action.payload?.file) {
+      window.dispatchEvent(
+        new CustomEvent("gitpilot:open-in-canvas", {
+          detail: { path: action.payload.file },
+        }),
+      );
+    }
+  };
+
+  const isPrimary = action.kind === "run_file";
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={
+        "next-action-btn" +
+        (isPrimary ? " next-action-btn--primary" : " next-action-btn--ghost")
+      }
+    >
+      <span className="next-action-btn__glyph" aria-hidden="true">
+        {action.kind === "run_file"
+          ? "▶"
+          : action.kind === "open_workspace"
+          ? "📂"
+          : "⊞"}
+      </span>
+      {action.label}
+    </button>
+  );
+}
+
+function SuccessReceipt({
+  executionLog,
+  relatedPlan,
+  owner,
+  repo,
+  branch,
+  diff,
+  nextActions,
+}) {
+  const steps = executionLog?.steps || [];
+  const totalSteps = steps.length;
+
+  // Aggregate every file action across steps so "Files changed (N)" can
+  // be a single top-level section instead of per-step duplication.
+  const allFiles = [];
+  if (relatedPlan?.steps?.length) {
+    for (const s of relatedPlan.steps) {
+      for (const f of s.files || []) {
+        if (f.action !== "INDEX") allFiles.push(f);
+      }
+    }
+  }
+  const totalDuration = steps.reduce((acc, s) => {
+    return acc + (s.executions || []).reduce(
+      (a, ex) => a + (typeof ex.duration_ms === "number" ? ex.duration_ms : 0),
+      0,
+    );
+  }, 0);
+
+  // Short headline outcome lines (max 2): "Created X", "Modified Y".
+  const headlines = [];
+  for (const action of ["CREATE", "MODIFY", "DELETE"]) {
+    for (const f of allFiles) {
+      if (f.action === action && headlines.length < 2) {
+        headlines.push({ verb: verbFor(action), path: f.path });
+      }
+    }
+  }
+
+  // The bottom-bar already owns Create PR. Only show a pointer text here
+  // when there is a meaningful PR path (branch + file changes).
+  const hasPRPath = Boolean(branch && allFiles.length > 0);
+
+  // Filter out create-PR-style next-actions (handled by bottom bar);
+  // keep ▶ run / 📂 open as inline buttons.
+  const inlineNextActions = (nextActions || []).filter(
+    (a) => a && a.kind && a.kind !== "create_pr",
+  );
+
+  const hasTechLog =
+    totalDuration > 0 ||
+    steps.some((s) => s.summary || (s.executions || []).length > 0);
+
+  return (
+    <div className="success-card">
+      <div className="success-card__head">
+        <div className="success-card__icon" aria-hidden="true">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"
+               strokeLinejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+        <div className="success-card__head-text">
+          <div className="success-card__title">Execution completed</div>
+          <div className="success-card__subtitle">
+            Successfully executed {totalSteps} step{totalSteps === 1 ? "" : "s"}
+            <span className="success-card__dot">·</span>
+            <span className="success-card__time-inline">Just now</span>
+          </div>
+        </div>
+        <span className="exec-status-badge exec-status-badge--ok success-card__badge">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" strokeWidth="3" strokeLinecap="round"
+               strokeLinejoin="round" aria-hidden="true">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          Executed
+        </span>
+      </div>
+
+      {headlines.length > 0 && (
+        <ul className="success-headlines">
+          {headlines.map((h, i) => (
+            <li key={i} className="success-headline">
+              <span className="success-headline__verb">{h.verb}</span>
+              <code className="success-headline__path">{h.path}</code>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {(owner || branch) && (
+        <div className="success-meta">
+          {owner && repo && (
+            <div className="success-meta__item">
+              <span className="success-meta__label">Repository</span>
+              <span className="success-meta__value">{owner}/{repo}</span>
+            </div>
+          )}
+          {branch && (
+            <div className="success-meta__item">
+              <span className="success-meta__label">Branch</span>
+              <span className="success-meta__value success-meta__value--mono">
+                {branch}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {allFiles.length > 0 && (
+        <div className="success-files">
+          <div className="success-files__label">
+            Files changed ({allFiles.length})
+          </div>
+          <ul className="success-action-list">
+            {allFiles.map((f, i) => (
+              <li key={i} className="success-action-row">
+                <span className="success-action__check" aria-hidden="true">✓</span>
+                <span
+                  className={`exec-badge exec-badge--${f.action.toLowerCase()}`}
+                >
+                  {f.action}
+                </span>
+                <code className="success-action__path">{f.path}</code>
+                <span className="success-action__meta">
+                  {actionMeta(f.action)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {inlineNextActions.length > 0 && (
+        <div className="success-next-row">
+          {inlineNextActions.map((a, i) => (
+            <NextActionButton key={i} action={a} />
+          ))}
+        </div>
+      )}
+
+      {hasTechLog && (
+        <details className="success-techlog">
+          <summary>
+            View execution log
+            {totalDuration > 0 && (
+              <span className="success-techlog__time">
+                · {(totalDuration / 1000).toFixed(1)}s
+              </span>
+            )}
+          </summary>
+          {steps.map((s) => (
+            <div key={s.step_number} className="success-techlog__step">
+              <div className="success-techlog__step-title">
+                Step {s.step_number}
+                {totalSteps > 1 ? ` of ${totalSteps}` : ""}
+              </div>
+              {s.summary && (
+                <pre className="success-techlog__pre">{s.summary}</pre>
+              )}
+              {Array.isArray(s.executions) && s.executions.map((ex, i) => (
+                <ExecutionCard key={i} ex={ex} />
+              ))}
+            </div>
+          ))}
+        </details>
+      )}
+
+      {hasPRPath && (
+        <div className="success-hint">
+          Next: Create a pull request when ready.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function actionMeta(action) {
+  switch (action) {
+    case "READ":   return "Read-only";
+    case "CREATE": return "Created";
+    case "MODIFY": return "Modified";
+    case "DELETE": return "Deleted";
+    case "INDEX":  return "Indexed";
+    default:       return "";
+  }
+}
+
+function verbFor(action) {
+  switch (action) {
+    case "CREATE": return "Created";
+    case "MODIFY": return "Modified";
+    case "DELETE": return "Deleted";
+    default:       return action;
+  }
+}
+
+function ExecutionCard({ ex }) {
+  const status = ex.status || "pending";
+  const statusClass =
+    status === "completed" ? "exec-card-inner--ok" :
+    status === "failed"    ? "exec-card-inner--bad" :
+    status === "skipped"   ? "exec-card-inner--warn" :
+                             "exec-card-inner--info";
+  return (
+    <div className={`exec-card-inner ${statusClass}`}>
+      <div className="exec-card-inner__head">
+        <div>
+          <strong className="exec-card-inner__path">{ex.path}</strong>
+          {ex.sandbox && (
+            <span className="exec-card-inner__sandbox">· {ex.sandbox}</span>
+          )}
+        </div>
+        <span className="exec-card-inner__status">
+          {status === "completed" && `Exit ${ex.exit_code} · ${ex.duration_ms} ms`}
+          {status === "failed" && (typeof ex.exit_code === "number"
+            ? `Failed · exit ${ex.exit_code}` : "Failed")}
+          {status === "skipped" && "Skipped"}
+          {status === "pending" && "Running…"}
+        </span>
+      </div>
+      {ex.command && (
+        <div className="exec-card-inner__cmd">$ {ex.command}</div>
+      )}
+      {ex.stdout && (
+        <details open style={{ marginTop: 4 }}>
+          <summary className="exec-card-inner__stdout-summary">stdout</summary>
+          <pre className="exec-card-inner__pre">{ex.stdout}</pre>
+        </details>
+      )}
+      {ex.stderr && (
+        <details open={status === "failed"} style={{ marginTop: 4 }}>
+          <summary className="exec-card-inner__stderr-summary">stderr</summary>
+          <pre className="exec-card-inner__pre exec-card-inner__pre--err">
+            {ex.stderr}
+          </pre>
+        </details>
+      )}
+      {ex.error && !ex.stderr && (
+        <div className="exec-card-inner__error">{ex.error}</div>
+      )}
+      {ex.reason && (
+        <div className="exec-card-inner__reason">{ex.reason}</div>
+      )}
+    </div>
+  );
+}

frontend/components/BranchPicker.jsx

@@ -0,0 +1,398 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * BranchPicker — Claude-Code-on-Web parity branch selector.
+ *
+ * Fetches branches from the new /api/repos/{owner}/{repo}/branches endpoint.
+ * Shows search, default branch badge, AI session branch highlighting.
+ *
+ * Fixes applied:
+ * - Dropdown portaled to document.body (avoids overflow:hidden clipping)
+ * - Branches cached per repo (no "No branches found" flash)
+ * - Shows "Loading..." only on first fetch, keeps stale data otherwise
+ */
+
+// Simple per-repo branch cache so reopening the dropdown is instant
+const branchCache = {};
+
+/**
+ * Props:
+ *   repo, currentBranch, defaultBranch, sessionBranches, onBranchChange
+ *     — standard branch-picker props
+ *
+ *   externalAnchorRef (optional) — a React ref pointing to an external DOM
+ *     element to anchor the dropdown to.  When provided:
+ *       - BranchPicker skips rendering its own trigger button
+ *       - the dropdown opens immediately on mount
+ *       - closing the dropdown calls onClose()
+ *
+ *   onClose (optional) — called when the dropdown is dismissed (outside
+ *     click or Escape).  Only meaningful with externalAnchorRef.
+ */
+export default function BranchPicker({
+  repo,
+  currentBranch,
+  defaultBranch,
+  sessionBranches = [],
+  onBranchChange,
+  externalAnchorRef,
+  onClose,
+}) {
+  const isExternalMode = !!externalAnchorRef;
+  const [open, setOpen] = useState(isExternalMode);
+  const [query, setQuery] = useState("");
+  const [branches, setBranches] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const branch = currentBranch || defaultBranch || "main";
+  const isAiSession = sessionBranches.includes(branch) && branch !== defaultBranch;
+
+  // The element used for dropdown positioning
+  const anchorRef = isExternalMode ? externalAnchorRef : triggerRef;
+
+  const cacheKey = repo ? `${repo.owner}/${repo.name}` : null;
+
+  // Seed from cache on mount / repo change
+  useEffect(() => {
+    if (cacheKey && branchCache[cacheKey]) {
+      setBranches(branchCache[cacheKey]);
+    }
+  }, [cacheKey]);
+
+  // Fetch branches from GitHub via backend
+  const fetchBranches = useCallback(async (searchQuery) => {
+    if (!repo) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem("github_token");
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      const params = new URLSearchParams({ per_page: "100" });
+      if (searchQuery) params.set("query", searchQuery);
+
+      const res = await fetch(
+        `/api/repos/${repo.owner}/${repo.name}/branches?${params}`,
+        { headers, cache: "no-cache" }
+      );
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({}));
+        const detail = errData.detail || `HTTP ${res.status}`;
+        console.warn("BranchPicker: fetch failed:", detail);
+        setError(detail);
+        return;
+      }
+      const data = await res.json();
+      const fetched = data.branches || [];
+      setBranches(fetched);
+
+      // Only cache the unfiltered result
+      if (!searchQuery && cacheKey) {
+        branchCache[cacheKey] = fetched;
+      }
+    } catch (err) {
+      console.warn("Failed to fetch branches:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [repo, cacheKey]);
+
+  // Fetch + focus when opened
+  useEffect(() => {
+    if (open) {
+      fetchBranches(query);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Debounced search
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => fetchBranches(query), 300);
+    return () => clearTimeout(t);
+  }, [query, open, fetchBranches]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const inAnchor = anchorRef.current && anchorRef.current.contains(e.target);
+      const inDropdown = dropdownRef.current && dropdownRef.current.contains(e.target);
+      if (!inAnchor && !inDropdown) {
+        handleClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    onClose?.();
+  }, [onClose]);
+
+  const handleSelect = (branchName) => {
+    handleClose();
+    if (branchName !== branch) {
+      onBranchChange?.(branchName);
+    }
+  };
+
+  // Merge API branches with session branches (AI branches might not show in GitHub API)
+  const allBranches = [...branches];
+  for (const sb of sessionBranches) {
+    if (!allBranches.find((b) => b.name === sb)) {
+      allBranches.push({ name: sb, is_default: false, protected: false });
+    }
+  }
+
+  // Calculate portal position from anchor element
+  const getDropdownPosition = () => {
+    if (!anchorRef.current) return { top: 0, left: 0 };
+    const rect = anchorRef.current.getBoundingClientRect();
+    return {
+      top: rect.bottom + 4,
+      left: rect.left,
+    };
+  };
+
+  const pos = open ? getDropdownPosition() : { top: 0, left: 0 };
+
+  return (
+    <div style={styles.container}>
+      {/* Trigger button — hidden when using external anchor */}
+      {!isExternalMode && (
+        <button
+          ref={triggerRef}
+          type="button"
+          style={{
+            ...styles.trigger,
+            borderColor: isAiSession ? "rgba(59, 130, 246, 0.3)" : "#3F3F46",
+            color: isAiSession ? "#60a5fa" : "#E4E4E7",
+            backgroundColor: isAiSession ? "rgba(59, 130, 246, 0.05)" : "transparent",
+          }}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="6" y1="3" x2="6" y2="15" />
+            <circle cx="18" cy="6" r="3" />
+            <circle cx="6" cy="18" r="3" />
+            <path d="M18 9a9 9 0 0 1-9 9" />
+          </svg>
+          <span style={styles.branchName}>{branch}</span>
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      )}
+
+      {/* Dropdown — portaled to document.body to escape overflow:hidden */}
+      {open && createPortal(
+        <div
+          ref={dropdownRef}
+          style={{
+            ...styles.dropdown,
+            top: pos.top,
+            left: pos.left,
+          }}
+        >
+          {/* Search input */}
+          <div style={styles.searchBox}>
+            <input
+              ref={inputRef}
+              type="text"
+              placeholder="Search branches..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              style={styles.searchInput}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") {
+                  handleClose();
+                }
+              }}
+            />
+          </div>
+
+          {/* Branch list */}
+          <div style={styles.branchList}>
+            {loading && allBranches.length === 0 && (
+              <div style={styles.loadingRow}>Loading...</div>
+            )}
+
+            {!loading && error && (
+              <div style={styles.errorRow}>{error}</div>
+            )}
+
+            {!loading && !error && allBranches.length === 0 && (
+              <div style={styles.loadingRow}>No branches found</div>
+            )}
+
+            {allBranches.map((b) => {
+              const isDefault = b.is_default || b.name === defaultBranch;
+              const isAi = sessionBranches.includes(b.name);
+              const isCurrent = b.name === branch;
+
+              return (
+                <div
+                  key={b.name}
+                  style={{
+                    ...styles.branchRow,
+                    backgroundColor: isCurrent
+                      ? isAi
+                        ? "rgba(59, 130, 246, 0.10)"
+                        : "#27272A"
+                      : "transparent",
+                  }}
+                  onMouseDown={() => handleSelect(b.name)}
+                >
+                  <span style={{ opacity: isCurrent ? 1 : 0, width: 16, flexShrink: 0 }}>
+                    &#10003;
+                  </span>
+                  <span
+                    style={{
+                      flex: 1,
+                      fontFamily: "monospace",
+                      fontSize: 12,
+                      color: isAi ? "#60a5fa" : "#E4E4E7",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {b.name}
+                  </span>
+                  {isDefault && (
+                    <span style={styles.defaultBadge}>default</span>
+                  )}
+                  {isAi && !isDefault && (
+                    <span style={styles.aiBadge}>AI</span>
+                  )}
+                  {b.protected && (
+                    <span style={styles.protectedBadge}>
+                      <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z" />
+                      </svg>
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+
+            {/* Subtle loading indicator when refreshing with cached data visible */}
+            {loading && allBranches.length > 0 && (
+              <div style={styles.loadingRow}>Updating...</div>
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    position: "relative",
+  },
+  trigger: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "4px 8px",
+    borderRadius: 4,
+    border: "1px solid #3F3F46",
+    background: "transparent",
+    fontSize: 13,
+    cursor: "pointer",
+    fontFamily: "monospace",
+    maxWidth: 200,
+  },
+  branchName: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: 140,
+  },
+  dropdown: {
+    position: "fixed",
+    width: 280,
+    backgroundColor: "#1F1F23",
+    border: "1px solid #27272A",
+    borderRadius: 8,
+    boxShadow: "0 8px 24px rgba(0,0,0,0.6)",
+    zIndex: 9999,
+    overflow: "hidden",
+  },
+  searchBox: {
+    padding: "8px 10px",
+    borderBottom: "1px solid #27272A",
+  },
+  searchInput: {
+    width: "100%",
+    padding: "6px 8px",
+    borderRadius: 4,
+    border: "1px solid #3F3F46",
+    background: "#131316",
+    color: "#E4E4E7",
+    fontSize: 12,
+    outline: "none",
+    fontFamily: "monospace",
+    boxSizing: "border-box",
+  },
+  branchList: {
+    maxHeight: 260,
+    overflowY: "auto",
+  },
+  branchRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "7px 10px",
+    cursor: "pointer",
+    transition: "background-color 0.1s",
+    borderBottom: "1px solid rgba(39, 39, 42, 0.5)",
+  },
+  loadingRow: {
+    padding: "12px 10px",
+    textAlign: "center",
+    fontSize: 12,
+    color: "#71717A",
+  },
+  errorRow: {
+    padding: "12px 10px",
+    textAlign: "center",
+    fontSize: 11,
+    color: "#F59E0B",
+  },
+  defaultBadge: {
+    fontSize: 9,
+    padding: "1px 5px",
+    borderRadius: 8,
+    backgroundColor: "rgba(16, 185, 129, 0.15)",
+    color: "#10B981",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    flexShrink: 0,
+  },
+  aiBadge: {
+    fontSize: 9,
+    padding: "1px 5px",
+    borderRadius: 8,
+    backgroundColor: "rgba(59, 130, 246, 0.15)",
+    color: "#60a5fa",
+    fontWeight: 700,
+    flexShrink: 0,
+  },
+  protectedBadge: {
+    color: "#F59E0B",
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+  },
+};

frontend/components/ChatPanel.jsx

@@ -0,0 +1,1370 @@
+// frontend/components/ChatPanel.jsx
+import React, { useEffect, useRef, useState } from "react";
+import AssistantMessage from "./AssistantMessage.jsx";
+import ThinkingIndicator from "./ThinkingIndicator.jsx";
+import ContextMeter from "./ContextMeter.jsx";
+import TasksPanel from "./TasksPanel.jsx";
+import DiffStats from "./DiffStats.jsx";
+import DiffViewer from "./DiffViewer.jsx";
+import CreatePRButton from "./CreatePRButton.jsx";
+import StreamingMessage from "./StreamingMessage.jsx";
+import SandboxCanvas from "./SandboxCanvas.jsx";
+import FilePreviewPanel from "./FilePreviewPanel.jsx";
+import { SessionWebSocket } from "../utils/ws.js";
+
+// Map a file extension to the canonical sandbox language tag.  Used
+// when "Open in Canvas" needs to seed SandboxCanvas with the right
+// language hint pulled straight from a repo file path.
+const _LANG_FROM_EXT = {
+  py: "python", js: "javascript", mjs: "javascript", cjs: "javascript",
+  sh: "bash", bash: "bash",
+};
+function languageFromPath(path) {
+  if (!path || !path.includes(".")) return "python";
+  return _LANG_FROM_EXT[path.split(".").pop().toLowerCase()] || "python";
+}
+
+// Helper to get headers (inline safety if utility is missing)
+const getHeaders = () => ({
+  "Content-Type": "application/json",
+  Authorization: `Bearer ${localStorage.getItem("github_token") || ""}`,
+});
+
+export default function ChatPanel({
+  repo,
+  defaultBranch = "main",
+  currentBranch, // do NOT default here; parent must pass the real one
+  onExecutionComplete,
+  sessionChatState,
+  onSessionChatStateChange,
+  sessionId,
+  onEnsureSession,
+  canChat = true, // readiness gate: false disables composer and shows blocker
+  chatBlocker = null, // { message: string, cta?: string, onCta?: () => void }
+}) {
+  // Initialize state from props or defaults
+  const [messages, setMessages] = useState(sessionChatState?.messages || []);
+  const [goal, setGoal] = useState("");
+  const [plan, setPlan] = useState(sessionChatState?.plan || null);
+
+  const [loadingPlan, setLoadingPlan] = useState(false);
+  const [executing, setExecuting] = useState(false);
+  const [status, setStatus] = useState("");
+  // Batch B9 — populated when a plan whose first step was INDEX is
+  // rejected.  Lets us render a small "Run with grep instead?" prompt
+  // so the user doesn't have to retype the goal.
+  const [retryAfterIndexReject, setRetryAfterIndexReject] = useState(null);
+
+  // Claude-Code-on-Web: WebSocket streaming + diff + PR
+  const [wsConnected, setWsConnected] = useState(false);
+  const [streamingEvents, setStreamingEvents] = useState([]);
+  const [diffData, setDiffData] = useState(null);
+  const [showDiffViewer, setShowDiffViewer] = useState(false);
+  // SandboxCanvas state — opened by the "Open in Canvas" CTA on
+  // post-CREATE next_actions and ExecutionCard footers. ``canvasSpec``
+  // is { filename, language, code } or null when closed.
+  const [canvasSpec, setCanvasSpec] = useState(null);
+  const [canvasError, setCanvasError] = useState(null);
+  // FilePreviewPanel state — opened by clicking a file row in the
+  // sidebar (gitpilot:open-file).  Read-first surface; users can pick
+  // "Prepare Run" / "Open Workspace" / "Ask GitPilot" from there.
+  const [previewPath, setPreviewPath] = useState(null);
+  const [previewContent, setPreviewContent] = useState(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewError, setPreviewError] = useState(null);
+  const [previewErrorCode, setPreviewErrorCode] = useState(null);
+  // "preview" (narrow drawer) or "workspace" (wide editor).
+  const [previewMode, setPreviewMode] = useState("preview");
+  const wsRef = useRef(null);
+
+  // Ref mirrors streamingEvents so WS callbacks avoid stale closures
+  const streamingEventsRef = useRef([]);
+  useEffect(() => { streamingEventsRef.current = streamingEvents; }, [streamingEvents]);
+
+  // Tracks files that were just CREATE'd / MODIFY'd by a fresh execution.
+  // Used to (a) auto-retry once on 404 (GitHub contents API has brief
+  // eventual-consistency lag) and (b) classify the file viewer's empty
+  // state as "still syncing" instead of a generic 404.
+  const fileWasJustCreatedRef = useRef(new Set());
+  const fileWasJustDeletedRef = useRef(new Set());
+
+  // Skip the session-sync useEffect reset when we just created a session
+  // (the parent already seeded the messages into chatBySession)
+  const skipNextSyncRef = useRef(false);
+
+  const messagesEndRef = useRef(null);
+  const prevMsgCountRef = useRef((sessionChatState?.messages || []).length);
+
+  // ---------------------------------------------------------------------------
+  // WebSocket connection management
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    // Clean up previous connection
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+      setWsConnected(false);
+    }
+
+    if (!sessionId) return;
+
+    // Wait for backend to be reachable before opening WebSocket.
+    // Without this, the WS connects immediately on session creation
+    // and fails repeatedly with "closed before established" when the
+    // backend is still starting up (common on WSL cold start).
+    let cancelled = false;
+    const backendUrl = import.meta.env.VITE_BACKEND_URL || '';
+    const pingUrl = backendUrl ? `${backendUrl}/api/ping` : '/api/ping';
+    const waitForBackend = async () => {
+      for (let i = 0; i < 10 && !cancelled; i++) {
+        try {
+          const res = await fetch(pingUrl, { method: 'GET', signal: AbortSignal.timeout(2000) });
+          if (res.ok) return true;
+        } catch { /* retry */ }
+        await new Promise(r => setTimeout(r, 1500));
+      }
+      return false;
+    };
+
+    waitForBackend().then((ok) => {
+      if (cancelled || !ok) return;
+      connectWs();
+    });
+
+    function connectWs() {
+    const ws = new SessionWebSocket(sessionId, {
+      onConnect: () => setWsConnected(true),
+      onDisconnect: () => setWsConnected(false),
+      onMessage: (data) => {
+        if (data.type === "agent_message") {
+          setStreamingEvents((prev) => [...prev, data]);
+        } else if (data.type === "tool_use" || data.type === "tool_result") {
+          setStreamingEvents((prev) => [...prev, data]);
+        } else if (data.type === "diff_update") {
+          setDiffData(data.stats || data);
+        } else if (data.type === "session_restored") {
+          // Session loaded
+        }
+      },
+      onStatusChange: (newStatus) => {
+        if (newStatus === "waiting") {
+          // Always clear loading state when agent finishes
+          setLoadingPlan(false);
+
+          // Consolidate streaming events into a chat message (use ref to
+          // avoid stale closure — streamingEvents state would be stale here).
+          //
+          // We also commit the FINAL consolidated text to the backend session
+          // here.  Previously this branch never called persistMessage, so the
+          // assistant turn looked correct in the live view but vanished on the
+          // next session reload — the canonical "streaming truncation" symptom.
+          const events = streamingEventsRef.current;
+          if (events.length > 0) {
+            const textParts = events
+              .filter((e) => e.type === "agent_message")
+              .map((e) => e.content);
+            if (textParts.length > 0) {
+              const consolidated = {
+                from: "ai",
+                role: "assistant",
+                answer: textParts.join(""),
+                content: textParts.join(""),
+              };
+              setMessages((prev) => [...prev, consolidated]);
+              persistMessage(sessionId, "assistant", consolidated.content);
+            }
+            setStreamingEvents([]);
+          }
+        }
+      },
+      onError: (err) => {
+        console.warn("[ws] Error:", err);
+        setLoadingPlan(false);
+      },
+    });
+
+    ws.connect();
+    wsRef.current = ws;
+    } // end connectWs
+
+    return () => {
+      cancelled = true;
+      if (wsRef.current) wsRef.current.close();
+    };
+  }, [sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ---------------------------------------------------------------------------
+  // 1) SESSION SYNC: Restore chat when branch, repo, OR session changes
+  // IMPORTANT: Do NOT depend on sessionChatState here (prevents prop/state loop)
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    // When send() just created a session, the parent seeded the messages
+    // into chatBySession already.  Skip the reset so we don't wipe
+    // the optimistic user message that was already rendered.
+    if (skipNextSyncRef.current) {
+      skipNextSyncRef.current = false;
+      return;
+    }
+
+    const nextMessages = sessionChatState?.messages || [];
+    const nextPlan = sessionChatState?.plan || null;
+
+    setMessages(nextMessages);
+    setPlan(nextPlan);
+
+    // Reset transient UI state on branch/repo/session switch
+    setGoal("");
+    setStatus("");
+    setLoadingPlan(false);
+    setExecuting(false);
+    setStreamingEvents([]);
+    setDiffData(null);
+
+    // Update msg count tracker so auto-scroll doesn't "jump" on switch
+    prevMsgCountRef.current = nextMessages.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentBranch, repo?.full_name, sessionId]);
+
+  // ---------------------------------------------------------------------------
+  // 1b) FILE ▶ RUN: listen for run-file events from the sidebar.
+  // ---------------------------------------------------------------------------
+  //
+  // FileTree dispatches ``gitpilot:run-file`` with the clicked file's
+  // path.  We turn that into a normal chat message ("run <path>")
+  // which goes through /api/chat/plan, hits the deterministic
+  // short-circuit, and renders an ExecutionPlanCard — exactly the
+  // same flow as typing the command. One handler, one approval surface,
+  // zero duplicated logic.
+  useEffect(() => {
+    const onRunFile = (e) => {
+      const path = e?.detail?.path;
+      if (!path || !repo) return;
+      send({ goal: `run ${path}` });
+    };
+    // "Open in Canvas" handler — fetches the file's content from the
+    // active branch and opens SandboxCanvas seeded with it.  Logs a
+    // friendly error banner when the fetch fails so a misconfigured
+    // token / wrong branch doesn't silently swallow the click.
+    const onOpenInCanvas = async (e) => {
+      const path = e?.detail?.path;
+      if (!path || !repo) return;
+      setCanvasError(null);
+      const branch = currentBranch || "HEAD";
+      try {
+        const url = `/api/repos/${repo.owner}/${repo.name}/file`
+                  + `?path=${encodeURIComponent(path)}`
+                  + `&ref=${encodeURIComponent(branch)}`;
+        const res = await fetch(url, { headers: getHeaders() });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          setCanvasError(data.detail || `Could not load ${path} (HTTP ${res.status})`);
+          // Still open the canvas with empty content so the user can
+          // paste something — better than nothing happening on click.
+          setCanvasSpec({
+            filename: path, language: languageFromPath(path), code: "",
+          });
+          return;
+        }
+        setCanvasSpec({
+          filename: path,
+          language: languageFromPath(path),
+          code: data.content || "",
+        });
+      } catch (err) {
+        setCanvasError(err?.message || "Could not load file for Canvas");
+        setCanvasSpec({
+          filename: path, language: languageFromPath(path), code: "",
+        });
+      }
+    };
+    // "Open file" — clicking a file row in the sidebar mounts the
+    // read-first FilePreviewPanel.  Calmer than dropping straight
+    // into Canvas: the user sees the file, can pick "Prepare Run"
+    // when they're ready (or "Open Workspace" for a wider editing
+    // surface).  The ``mode`` detail toggles the panel's geometry:
+    //   "preview"   ── narrow right drawer for a quick look
+    //   "workspace" ── wide right-side editor for serious review
+    const openFile = async (path, mode = "preview") => {
+      if (!path || !repo) return;
+      setPreviewPath(path);
+      setPreviewMode(mode);
+      setPreviewContent(null);
+      setPreviewError(null);
+      setPreviewErrorCode(null);
+      setPreviewLoading(true);
+      // Tell the sidebar which file is currently focused so it can
+      // light up the row with the ◄ marker.
+      try {
+        window.dispatchEvent(new CustomEvent("gitpilot:file-opened", { detail: { path } }));
+      } catch (_e) { /* old browser */ }
+      const branch = currentBranch || "HEAD";
+      const fetchOnce = async () => {
+        const url = `/api/repos/${repo.owner}/${repo.name}/file`
+                  + `?path=${encodeURIComponent(path)}`
+                  + `&ref=${encodeURIComponent(branch)}`;
+        const res = await fetch(url, { headers: getHeaders() });
+        const data = await res.json().catch(() => ({}));
+        return { res, data };
+      };
+      try {
+        let { res, data } = await fetchOnce();
+        // Auto-retry once on 404 for recently created files — GitHub
+        // contents API has brief eventual-consistency lag after a
+        // freshly published commit.
+        if (res.status === 404 && fileWasJustCreatedRef.current?.has(path)) {
+          await new Promise((r) => setTimeout(r, 900));
+          ({ res, data } = await fetchOnce());
+        }
+        if (!res.ok) {
+          setPreviewError(data.detail || `HTTP ${res.status}`);
+          setPreviewErrorCode(res.status);
+        } else {
+          setPreviewContent(data.content || "");
+        }
+      } catch (err) {
+        setPreviewError(err?.message || "Could not load file");
+        setPreviewErrorCode(null);
+      } finally {
+        setPreviewLoading(false);
+      }
+    };
+    const onOpenFile      = (e) => openFile(e?.detail?.path, "preview");
+    const onOpenWorkspace = (e) => openFile(e?.detail?.path, "workspace");
+    // "Ask GitPilot" — seed the chat input with a contextual question
+    // about the clicked file.  Pure additive: focuses the input and
+    // pre-fills it; the user can edit or send as-is.
+    const onAskAboutFile = (e) => {
+      const path = e?.detail?.path;
+      if (!path) return;
+      setGoal(`Tell me about ${path}.`);
+      const ta = document.querySelector(".chat-input");
+      if (ta) { ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length); }
+    };
+    window.addEventListener("gitpilot:run-file", onRunFile);
+    window.addEventListener("gitpilot:open-in-canvas", onOpenInCanvas);
+    window.addEventListener("gitpilot:open-file", onOpenFile);
+    window.addEventListener("gitpilot:open-workspace", onOpenWorkspace);
+    window.addEventListener("gitpilot:ask-about-file", onAskAboutFile);
+    return () => {
+      window.removeEventListener("gitpilot:run-file", onRunFile);
+      window.removeEventListener("gitpilot:open-in-canvas", onOpenInCanvas);
+      window.removeEventListener("gitpilot:open-file", onOpenFile);
+      window.removeEventListener("gitpilot:open-workspace", onOpenWorkspace);
+      window.removeEventListener("gitpilot:ask-about-file", onAskAboutFile);
+    };
+    // ``send`` is stable enough across renders for this use case —
+    // we don't want to re-bind on every keystroke.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [repo?.full_name, currentBranch, sessionId]);
+
+  // ---------------------------------------------------------------------------
+  // 2) PERSISTENCE: Save chat to Parent (no loop now because sync only on branch)
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    if (typeof onSessionChatStateChange === "function") {
+      // Avoid wiping parent state on mount
+      if (messages.length > 0 || plan) {
+        onSessionChatStateChange({ messages, plan });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages, plan]);
+
+  // ---------------------------------------------------------------------------
+  // 3) AUTO-SCROLL: Only scroll when a message is appended (reduces flicker)
+  // ---------------------------------------------------------------------------
+  useEffect(() => {
+    const curCount = messages.length + streamingEvents.length;
+    const prevCount = prevMsgCountRef.current;
+
+    // Only scroll when new messages are added
+    if (curCount > prevCount) {
+      prevMsgCountRef.current = curCount;
+      requestAnimationFrame(() => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+      });
+    } else {
+      prevMsgCountRef.current = curCount;
+    }
+  }, [messages.length, streamingEvents.length]);
+
+  // ---------------------------------------------------------------------------
+  // HANDLERS
+  // ---------------------------------------------------------------------------
+  // ---------------------------------------------------------------------------
+  // Persist a message to the backend session (fire-and-forget).
+  //
+  // The fourth argument carries the *structured* payload of the assistant
+  // response — the Action Plan, the Execution Log, diff stats, etc. The
+  // backend stores it on Message.metadata; on session reload App.jsx
+  // spreads metadata back into the local message via normalizeBackendMessage,
+  // so the same AssistantMessage renderer can re-draw the Plan / Steps /
+  // Create buttons identically to the live view.
+  //
+  // Before this fix the structured payload was dropped at persist time —
+  // the session reloaded as raw text, and the UI degraded to a plain
+  // paragraph. This is the canonical "state loss during hydration" bug.
+  // ---------------------------------------------------------------------------
+  const persistMessage = (sid, role, content, metadata = null) => {
+    if (!sid) return;
+    const body = { role, content };
+    if (metadata && typeof metadata === "object" && Object.keys(metadata).length > 0) {
+      body.metadata = metadata;
+    }
+    fetch(`/api/sessions/${sid}/message`, {
+      method: "POST",
+      headers: getHeaders(),
+      body: JSON.stringify(body),
+    }).catch(() => {}); // best-effort
+  };
+
+  // Pick the structured fields a message can carry across a reload.
+  // Keep this in one place so every call-site stores the same shape and
+  // the renderer never has to guess.
+  const pickAssistantMetadata = (m) => {
+    if (!m || typeof m !== "object") return null;
+    const meta = {};
+    if (m.plan)         meta.plan         = m.plan;
+    if (m.executionLog) meta.executionLog = m.executionLog;
+    if (m.diff)         meta.diff         = m.diff;
+    if (m.actions)      meta.actions      = m.actions;
+    if (m.nextActions)  meta.nextActions  = m.nextActions;
+    if (m.branch)       meta.branch       = m.branch;
+    // Informational plans (READ-only answers to "what does X do?" style
+    // questions) carry no Approve/Reject controls — pin the flag so the
+    // session reload re-renders the same shape.
+    if (m.informational) meta.informational = true;
+    return Object.keys(meta).length > 0 ? meta : null;
+  };
+
+  const send = async (overrides = {}) => {
+    if (!repo) return;
+    // Allow callers (e.g. the "Retry with grep" button on a rejected
+    // INDEX plan) to drive send() with a fixed goal and a router flag.
+    const overrideGoal = overrides.goal;
+    const force_no_rag = Boolean(overrides.force_no_rag);
+    const sourceText = overrideGoal != null ? overrideGoal : goal;
+    if (!sourceText || !sourceText.trim()) return;
+
+    const text = sourceText.trim();
+
+    // Clear input immediately (Claude Code behavior) — but only when
+    // the user typed; programmatic retries leave the input alone.
+    if (overrideGoal == null) setGoal("");
+    // Reset textarea height
+    const ta = document.querySelector(".chat-input");
+    if (ta) ta.style.height = "40px";
+
+    // Optimistic update (user bubble appears immediately)
+    const userMsg = { from: "user", role: "user", text, content: text };
+    setMessages((prev) => [...prev, userMsg]);
+
+    setLoadingPlan(true);
+    setStatus("");
+    setPlan(null);
+    setStreamingEvents([]);
+
+    // ------- Implicit session creation (Claude Code parity) -------
+    // Every chat must be backed by a session.  If none exists yet,
+    // create one on-demand before sending the plan request.
+    let sid = sessionId;
+    if (!sid && typeof onEnsureSession === "function") {
+      // Derive a short title from the first message
+      const sessionName = text.length > 60 ? text.slice(0, 57) + "..." : text;
+
+      // Tell the sync useEffect to skip the reset that would otherwise
+      // wipe the optimistic user message when activeSessionId changes.
+      skipNextSyncRef.current = true;
+
+      sid = await onEnsureSession(sessionName, [userMsg]);
+      if (!sid) {
+        // Session creation failed — continue without session
+        skipNextSyncRef.current = false;
+      }
+    }
+
+    // Persist user message to backend session
+    persistMessage(sid, "user", text);
+
+    // Always use HTTP for plan generation (the original reliable flow).
+    // WebSocket is only used for real-time streaming feedback display.
+    const effectiveBranch = currentBranch || defaultBranch || "HEAD";
+
+    try {
+      // Timeout after 5 minutes (CrewAI agent can be slow with small models)
+      const planController = new AbortController();
+      const planTimer = setTimeout(() => planController.abort(), 300000);
+
+      let res;
+      try {
+        res = await fetch("/api/chat/plan", {
+          method: "POST",
+          headers: getHeaders(),
+          body: JSON.stringify({
+            repo_owner: repo.owner,
+            repo_name: repo.name,
+            goal: text,
+            branch_name: effectiveBranch,
+            // Lets the backend record this plan as a Task on the
+            // session so the right-sidebar Tasks panel can trace it.
+            session_id: sid,
+            // Batch B9 — set on the "Retry with grep" path after the
+            // user rejects an INDEX-plan.  Tells the router to
+            // suppress RAG / INDEX recommendations.
+            force_no_rag,
+          }),
+          signal: planController.signal,
+        });
+      } catch (fetchErr) {
+        if (fetchErr.name === "AbortError") {
+          throw new Error("Request timed out after 5 minutes. The LLM may be too slow. Try a faster model.");
+        }
+        throw fetchErr;
+      } finally {
+        clearTimeout(planTimer);
+      }
+
+      let data;
+      try {
+        data = await res.json();
+      } catch {
+        throw new Error(`Server error (${res.status}). The LLM may have returned an invalid response. Try a different model or enable Lite Mode in Settings.`);
+      }
+      if (!res.ok) {
+        const detail = data?.detail || data?.error || data?.message || "";
+        // Friendly message for common LLM failures
+        if (detail.includes("None or empty") || detail.includes("Invalid response from LLM")) {
+          throw new Error(
+            "The LLM returned an empty response. This often happens with small models (deepseek, qwen 0.5b). " +
+            "Try a larger model (llama3, qwen2.5:7b) or enable Lite Mode in Settings."
+          );
+        }
+        throw new Error(detail || "Failed to generate plan");
+      }
+
+      // Classify the plan into one of three kinds so we can render the
+      // right shape — not just "valid or banner":
+      //
+      // * executable    — at least one CREATE/MODIFY/DELETE → plan card
+      //                   with Approve & execute / Reject controls.
+      // * informational — every file is READ (or no files at all on a
+      //                   step that still has a meaningful description)
+      //                   AND the summary is a real answer, not the
+      //                   placeholder.  This is what happens when the
+      //                   user asks "what do you think about this
+      //                   project?" — the planner correctly READs the
+      //                   relevant files and the summary IS the answer.
+      //                   Render the summary as a normal assistant
+      //                   message; do not show plan controls.
+      // * empty         — no steps OR no actionable signal at all →
+      //                   honest failure banner.
+      //
+      // Before this classifier the second case was treated as the
+      // third, surfacing "I couldn't produce a plan" on perfectly
+      // valid READ-only plans.
+      const planSteps = Array.isArray(data?.steps)
+        ? data.steps
+        : Array.isArray(data?.plan?.steps)
+        ? data.plan.steps
+        : [];
+      const PLACEHOLDER_SUMMARY = "Here is the proposed plan for your request.";
+      const summary =
+        data.plan?.summary || data.summary || data.message || PLACEHOLDER_SUMMARY;
+      const hasExecutable = planSteps.some(
+        (s) =>
+          Array.isArray(s?.files) &&
+          s.files.some((f) => ["CREATE", "MODIFY", "DELETE"].includes(f?.action)),
+      );
+      const isReadOnly =
+        planSteps.length > 0 &&
+        !hasExecutable &&
+        planSteps.every(
+          (s) =>
+            !Array.isArray(s?.files) ||
+            s.files.length === 0 ||
+            s.files.every((f) => f?.action === "READ"),
+        );
+      const hasRealSummary = Boolean(summary) && summary !== PLACEHOLDER_SUMMARY;
+      const planKind = hasExecutable
+        ? "executable"
+        : isReadOnly && hasRealSummary
+        ? "informational"
+        : "empty";
+
+      if (planKind === "executable") {
+        setPlan(data);
+        const assistantMsg = {
+          from: "ai",
+          role: "assistant",
+          answer: summary,
+          content: summary,
+          plan: data,
+        };
+        setMessages((prev) => [...prev, assistantMsg]);
+        persistMessage(sid, "assistant", summary, pickAssistantMetadata(assistantMsg));
+      } else if (planKind === "informational") {
+        // The summary is the answer.  No plan card, no Approve/Reject —
+        // there is nothing to execute.  We deliberately do NOT attach
+        // ``plan: data`` here so AssistantMessage renders this turn
+        // exactly like a chat reply.
+        setPlan(null);
+        const assistantMsg = {
+          from: "ai",
+          role: "assistant",
+          answer: summary,
+          content: summary,
+          informational: true,
+        };
+        setMessages((prev) => [...prev, assistantMsg]);
+        persistMessage(sid, "assistant", summary, pickAssistantMetadata(assistantMsg));
+      } else {
+        // empty — be honest about what we know.  The earlier wording
+        // ("got stuck reading the same file twice") was a guess from
+        // an older bug; for the cases that actually still hit this
+        // branch the real signal is just "no actionable steps".
+        setPlan(null);
+        const failureText =
+          "The model returned an empty plan. Try rephrasing more concretely, " +
+          "or pick a stronger model in Settings → Provider.";
+        const failureMsg = {
+          from: "ai",
+          role: "system",
+          content: failureText,
+        };
+        setMessages((prev) => [...prev, failureMsg]);
+        persistMessage(sid, "system", failureText);
+        setStatus("No actionable plan produced.");
+        return;
+      }
+    } catch (err) {
+      const msg = String(err?.message || err);
+      console.error(err);
+      setStatus(msg);
+      setMessages((prev) => [
+        ...prev,
+        { from: "ai", role: "system", content: `Error: ${msg}` },
+      ]);
+    } finally {
+      setLoadingPlan(false);
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Reject the active plan — minimal first cut.
+  //
+  // Industry rule we follow from the start: never write to disk on a path the
+  // user did not approve.  Rejecting is the cheapest expression of that —
+  // discard the proposed plan locally, leave the workspace untouched, record
+  // the rejection in chat history so the user sees it after a session reload.
+  //
+  // No backend endpoint is needed yet because plans are not persisted as
+  // first-class objects today; they ride along on the assistant message's
+  // metadata.  When we later add per-plan state tracking, this handler will
+  // also POST /api/chat/plan/{id}/reject — leaving that for a follow-up.
+  // ---------------------------------------------------------------------------
+  const rejectPlan = () => {
+    if (!plan || executing) return;
+
+    // Batch B9 — if the rejected plan contained an INDEX step, the
+    // user is implicitly saying "I don't want to build the semantic
+    // index right now".  Stash the original goal so we can offer a
+    // one-click "retry with grep" path on the next render.
+    const hadIndexStep = Array.isArray(plan?.steps) &&
+      plan.steps.some((s) =>
+        Array.isArray(s?.files) && s.files.some((f) => f?.action === "INDEX"),
+      );
+    const rejectedGoal = plan?.goal || "";
+
+    setPlan(null);
+    setStatus("Plan rejected. No files were changed.");
+
+    const rejectionMsg = {
+      from: "ai",
+      role: "system",
+      content: "Plan rejected. No files were changed.",
+    };
+    setMessages((prev) => [...prev, rejectionMsg]);
+
+    if (sessionId) {
+      persistMessage(sessionId, "system", rejectionMsg.content);
+    }
+
+    if (hadIndexStep && rejectedGoal) {
+      setRetryAfterIndexReject({ goal: rejectedGoal });
+    } else {
+      setRetryAfterIndexReject(null);
+    }
+  };
+
+  const execute = async () => {
+    if (!repo || !plan) return;
+
+    setExecuting(true);
+    setStatus("");
+
+    try {
+      // Guard: currentBranch might be missing if parent didn't pass it yet
+      const safeCurrent = currentBranch || defaultBranch || "HEAD";
+      const safeDefault = defaultBranch || "main";
+
+      // Sticky vs Hard Switch:
+      // - If on default branch -> undefined (backend creates new branch)
+      // - If already on AI branch -> currentBranch (backend updates existing)
+      const branch_name = safeCurrent === safeDefault ? undefined : safeCurrent;
+
+      const res = await fetch("/api/chat/execute", {
+        method: "POST",
+        headers: getHeaders(),
+        body: JSON.stringify({
+          repo_owner: repo.owner,
+          repo_name: repo.name,
+          plan,
+          branch_name,
+          // Lets the backend persist the new branch on the session
+          // record so reopening this session lands on the published
+          // branch, not the one it was created on.
+          session_id: sessionId,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Execution failed");
+
+      setStatus(data.message || "Execution completed.");
+
+      // Track files touched by this execution so the file viewer can
+      // give "still syncing" / "deleted" classifications and so the
+      // sidebar refreshes off the freshly-pushed branch tree.
+      if (plan?.steps) {
+        for (const step of plan.steps) {
+          for (const f of step.files || []) {
+            if (f.action === "CREATE" || f.action === "MODIFY") {
+              fileWasJustCreatedRef.current.add(f.path);
+            } else if (f.action === "DELETE") {
+              fileWasJustDeletedRef.current.add(f.path);
+            }
+          }
+        }
+      }
+      // Forget the marker after 30 s so older "syncing" badges don't
+      // stick around forever.
+      window.setTimeout(() => {
+        fileWasJustCreatedRef.current.clear();
+        fileWasJustDeletedRef.current.clear();
+      }, 30000);
+
+      // Ask the sidebar's file tree to refetch off the newly-published
+      // branch. Fires after a small delay so GitHub's contents API has
+      // a chance to catch up.
+      window.setTimeout(() => {
+        try {
+          window.dispatchEvent(new CustomEvent("gitpilot:refresh-tree"));
+        } catch (_e) { /* old browser */ }
+      }, 600);
+
+      const completionMsg = {
+        from: "ai",
+        role: "assistant",
+        answer: data.message || "Execution completed.",
+        content: data.message || "Execution completed.",
+        executionLog: data.executionLog,
+        diff: data.diff,
+        // Backend-suggested follow-ups (e.g. "Run demo.py" after CREATE
+        // of a runnable file).  Rendered as a button row in the
+        // completion message — one click, no typing.
+        nextActions: data.next_actions,
+        branch: data.branch || data.branch_name,
+      };
+
+      // Show completion immediately (keeps old "Execution Log" section)
+      setMessages((prev) => [...prev, completionMsg]);
+
+      // Persist the execution log + diff alongside the message text so
+      // the History view re-renders the green "Execution Log" panel and
+      // the "View diff" affordance.  Without this, reloading the session
+      // shows just the one-line "Execution completed." summary.
+      persistMessage(
+        sessionId,
+        "assistant",
+        completionMsg.content,
+        pickAssistantMetadata(completionMsg),
+      );
+
+      // Clear active plan UI
+      setPlan(null);
+
+      // Pass completionMsg upward for seeding branch history
+      if (typeof onExecutionComplete === "function") {
+        onExecutionComplete({
+          branch: data.branch || data.branch_name,
+          mode: data.mode,
+          commit_url: data.commit_url || data.html_url,
+          message: data.message,
+          completionMsg,
+          sourceBranch: safeCurrent,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+      setStatus(String(err?.message || err));
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // RENDER
+  // ---------------------------------------------------------------------------
+  const isOnSessionBranch = currentBranch && currentBranch !== defaultBranch;
+
+  return (
+    <div className="chat-container">
+      <style>{`
+        .chat-container { display: flex; flex-direction: column; height: 100%; }
+
+        .chat-messages {
+          flex: 1; overflow-y: auto;
+          padding: 20px;
+          display: flex; flex-direction: column; gap: 16px;
+        }
+
+        .chat-message-user {
+          align-self: flex-end;
+          background: #27272A;
+          color: #fff;
+          padding: 12px 16px;
+          border-radius: 10px;
+          max-width: 85%;
+          font-size: 14px;
+          line-height: 1.5;
+        }
+
+        /* Success System Message Styling */
+        .chat-msg-success {
+          align-self: flex-start;
+          width: 100%;
+          background: rgba(16, 185, 129, 0.10);
+          border: 1px solid rgba(16, 185, 129, 0.20);
+          color: #D1FAE5;
+          padding: 12px 16px;
+          border-radius: 10px;
+          display: flex;
+          gap: 12px;
+          font-size: 14px;
+        }
+        .success-icon { font-size: 18px; }
+        .success-link {
+          display: inline-block;
+          margin-top: 6px;
+          font-weight: 600;
+          color: #34D399;
+          text-decoration: none;
+        }
+        .success-link:hover { text-decoration: underline; }
+
+        .chat-input-box {
+          padding: 16px;
+          border-top: 1px solid #27272A;
+          background: #131316;
+        }
+
+        .chat-input-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+
+        .chat-input {
+          flex: 1;
+          min-width: 200px;
+          background: #18181B;
+          border: 1px solid #27272A;
+          color: white;
+          padding: 10px 12px;
+          border-radius: 8px;
+          outline: none;
+          font-size: 14px;
+          font-family: inherit;
+          resize: none;
+          min-height: 40px;
+          max-height: 160px;
+          line-height: 1.4;
+        }
+
+        /* Enterprise controls (restored) */
+        .chat-btn {
+          height: 38px;
+          padding: 0 14px;
+          border-radius: 8px;
+          font-weight: 700;
+          cursor: pointer;
+          border: 1px solid transparent;
+          font-size: 13px;
+          white-space: nowrap;
+        }
+
+        /* Orange primary (old style) */
+        .chat-btn.primary { background: #D95C3D; color: #fff; }
+        .chat-btn.primary:hover { filter: brightness(0.98); }
+        .chat-btn.primary:disabled { opacity: 0.55; cursor: not-allowed; }
+
+        /* Secondary outline */
+        .chat-btn.secondary {
+          background: transparent;
+          border: 1px solid #3F3F46;
+          color: #A1A1AA;
+        }
+        .chat-btn.secondary:hover { background: rgba(255,255,255,0.04); }
+        .chat-btn.secondary:disabled { opacity: 0.55; cursor: not-allowed; }
+
+        .chat-empty-state {
+          text-align: center;
+          color: #52525B;
+          margin-top: 40px;
+          font-size: 14px;
+        }
+
+        /* WebSocket connection indicator */
+        .ws-indicator {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 10px;
+          color: #71717A;
+          padding: 2px 6px;
+          border-radius: 4px;
+          background: rgba(24, 24, 27, 0.6);
+        }
+        .ws-dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+        }
+
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      `}</style>
+
+      <div className="chat-messages">
+        {messages.map((m, idx) => {
+          // Success message (App.jsx injected)
+          if (m.isSuccess) {
+            return (
+              <div key={idx} className="chat-msg-success">
+                <div className="success-icon">🚀</div>
+                <div>
+                  <div style={{ whiteSpace: "pre-wrap" }}>{m.content}</div>
+                  {m.link && (
+                    <a href={m.link} target="_blank" rel="noreferrer" className="success-link">
+                      View Changes on GitHub &rarr;
+                    </a>
+                  )}
+                </div>
+              </div>
+            );
+          }
+
+          // User message
+          if (m.from === "user" || m.role === "user") {
+            return (
+              <div key={idx} className="chat-message-user">
+                <span>{m.text || m.content}</span>
+              </div>
+            );
+          }
+
+          // Assistant message (Answer / Plan / Execution Log).
+          //
+          // Lifecycle audit signal: if this message carries a plan, look
+          // ahead in the timeline for any subsequent message that
+          // records an execution log (=> the plan was approved+executed)
+          // or a system "Plan rejected" entry (=> the plan was
+          // rejected).  The status is rendered as a small green/grey
+          // badge next to the Action Plan header so users can tell at a
+          // glance — in history — whether a previous plan was acted on.
+          let planStatus = null;
+          if (m.plan) {
+            const after = messages.slice(idx + 1);
+            if (after.some((later) => later.executionLog)) {
+              planStatus = "executed";
+            } else if (
+              after.some(
+                (later) =>
+                  later.role === "system" &&
+                  typeof later.content === "string" &&
+                  later.content.includes("Plan rejected"),
+              )
+            ) {
+              planStatus = "rejected";
+            }
+          }
+
+          // Find the plan that was approved for this completion, so the
+          // success receipt can label actions (READ/CREATE/...) instead of
+          // showing only an opaque execution dump.
+          let linkedPlan = null;
+          if (m.executionLog) {
+            for (let i = idx - 1; i >= 0; i--) {
+              if (messages[i].plan?.steps) {
+                linkedPlan = messages[i].plan;
+                break;
+              }
+            }
+          }
+
+          return (
+            <div key={idx}>
+              <AssistantMessage
+                answer={m.answer || m.content}
+                plan={m.plan}
+                executionLog={m.executionLog}
+                planStatus={planStatus}
+                owner={repo?.owner}
+                repo={repo?.name}
+                onApproveExecution={() => execute()}
+                nextActions={m.nextActions}
+                relatedPlan={linkedPlan}
+                diff={m.diff}
+                branch={m.branch || currentBranch}
+              />
+              {/* Diff stats indicator (Claude-Code-on-Web parity) */}
+              {m.diff && (
+                <DiffStats diff={m.diff} onClick={() => {
+                  setDiffData(m.diff);
+                  setShowDiffViewer(true);
+                }} />
+              )}
+            </div>
+          );
+        })}
+
+        {/* Streaming events (real-time agent output) */}
+        {streamingEvents.length > 0 && (
+          <div>
+            <StreamingMessage events={streamingEvents} />
+          </div>
+        )}
+
+        {/* Enterprise Pulse — agentic thinking state shown after the user
+            hits Send and before the first streamed/planned chunk arrives.
+            Falls back gracefully to nothing once streamingEvents start
+            flowing in (StreamingMessage takes over the live feedback). */}
+        {loadingPlan && streamingEvents.length === 0 && (
+          <ThinkingIndicator />
+        )}
+
+        {/* Live execution status — visible in the chat timeline while
+            ``executing`` is true, sits between the Action Plan card and
+            where the Execution Log (green panel in AssistantMessage)
+            will land once the backend returns.  Removes the "did the
+            app freeze?" feeling caused by only the bottom button
+            saying "Executing…".
+
+            Reuses the ThinkingIndicator with execution-specific labels.
+            When the executor finishes, ``setExecuting(false)`` removes
+            this bubble and the completionMsg lands in the timeline as
+            a normal assistant message with its green Execution Log
+            block — already rendered by AssistantMessage today. */}
+        {executing && (
+          <ThinkingIndicator
+            labels={[
+              "Executing plan",
+              "Applying changes",
+              "Verifying result",
+            ]}
+          />
+        )}
+
+        {!messages.length && !plan && !loadingPlan && streamingEvents.length === 0 && (
+          <div className="chat-empty-state">
+            <div className="chat-empty-icon">💬</div>
+            <p>Tell GitPilot what you want to do with this repository.</p>
+            <p style={{ fontSize: 12, color: "#676883", marginTop: 4 }}>
+              It will propose a safe step-by-step plan before any execution.
+            </p>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Batch B9 — post-Reject "retry with grep" prompt.  Renders
+          only when the user rejected a plan whose first step was an
+          INDEX action.  One click re-issues the same goal with
+          force_no_rag so the router falls back to grep. */}
+      {retryAfterIndexReject && !loadingPlan && (
+        <div
+          style={{
+            padding: "10px 16px",
+            borderTop: "1px solid #27272A",
+            background: "rgba(217, 92, 61, 0.06)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 12,
+            flexWrap: "wrap",
+          }}
+        >
+          <span style={{ fontSize: 13, color: "#D4D4D8" }}>
+            Index skipped.  Run the same goal with grep instead?
+          </span>
+          <span style={{ display: "inline-flex", gap: 8 }}>
+            <button
+              type="button"
+              className="chat-btn primary"
+              onClick={() => {
+                const g = retryAfterIndexReject.goal;
+                setRetryAfterIndexReject(null);
+                send({ goal: g, force_no_rag: true });
+              }}
+            >
+              Yes, use grep
+            </button>
+            <button
+              type="button"
+              className="chat-btn ghost"
+              onClick={() => setRetryAfterIndexReject(null)}
+              style={{
+                color: "#9CA3AF",
+                borderColor: "rgba(156, 163, 175, 0.35)",
+                background: "transparent",
+              }}
+            >
+              No, dismiss
+            </button>
+          </span>
+        </div>
+      )}
+
+      {/* Diff stats bar (when agent has made changes) */}
+      {diffData && (
+        <div style={{
+          padding: "8px 16px",
+          borderTop: "1px solid #27272A",
+          background: "#18181B",
+        }}>
+          <DiffStats diff={diffData} onClick={() => setShowDiffViewer(true)} />
+        </div>
+      )}
+
+      <div className="chat-input-box">
+        {/* Readiness blocker banner */}
+        {!canChat && chatBlocker && (
+          <div style={{
+            fontSize: 12,
+            color: "#F59E0B",
+            background: "rgba(245, 158, 11, 0.08)",
+            border: "1px solid rgba(245, 158, 11, 0.2)",
+            borderRadius: 6,
+            padding: "8px 12px",
+            marginBottom: 8,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}>
+            <span>{chatBlocker.message || "Chat is not ready yet."}</span>
+            {chatBlocker.cta && chatBlocker.onCta && (
+              <button
+                type="button"
+                onClick={chatBlocker.onCta}
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: "#F59E0B",
+                  background: "transparent",
+                  border: "1px solid rgba(245, 158, 11, 0.3)",
+                  borderRadius: 4,
+                  padding: "2px 8px",
+                  cursor: "pointer",
+                }}
+              >
+                {chatBlocker.cta}
+              </button>
+            )}
+          </div>
+        )}
+        {status && (
+          <div style={{ fontSize: 11, color: "#ffb3b7", marginBottom: 8 }}>
+            {status}
+          </div>
+        )}
+
+        <div className="chat-input-row">
+          <textarea
+            className="chat-input"
+            placeholder={wsConnected ? "Send feedback or instructions..." : "Describe the change you want to make..."}
+            value={goal}
+            rows={1}
+            onChange={(e) => {
+              setGoal(e.target.value);
+              e.target.style.height = "40px";
+              e.target.style.height = Math.min(e.target.scrollHeight, 160) + "px";
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                if (!loadingPlan && !executing) send();
+              }
+            }}
+            disabled={!canChat || loadingPlan || executing}
+          />
+
+          {/* Always show both buttons (old UX) */}
+          <button
+            className="chat-btn primary"
+            type="button"
+            onClick={send}
+            disabled={!canChat || loadingPlan || executing || !goal.trim()}
+          >
+            {loadingPlan ? "Planning..." : wsConnected ? "Send" : "Generate plan"}
+          </button>
+
+          {/* Approve & execute — visible only while a plan is awaiting
+              approval, or while an execution is already in flight (so
+              the user sees the "Executing…" label, not a missing
+              button).  Previously this was always rendered with
+              ``disabled={!plan}``, which meant after a successful
+              execute() the button stayed on screen as a dimmed ghost
+              and a second click could trigger a duplicate run —
+              causing the executor to re-write the same file with the
+              same content (~50 s of wasted LLM time per accidental
+              click).  Hiding the button entirely once ``plan`` is
+              null makes the bug impossible. */}
+          {(plan || executing) && (
+            <button
+              className="chat-btn secondary"
+              type="button"
+              onClick={execute}
+              disabled={executing || loadingPlan}
+            >
+              {executing ? "Executing..." : "Approve & execute"}
+            </button>
+          )}
+
+          {/* Reject plan — same visibility window as Approve. */}
+          {plan && !executing && !loadingPlan && (
+            <button
+              className="chat-btn ghost"
+              type="button"
+              onClick={rejectPlan}
+              title="Discard this plan. No files will be changed."
+              style={{
+                color: "#F87171",
+                borderColor: "rgba(248, 113, 113, 0.35)",
+                background: "transparent",
+              }}
+            >
+              Reject plan
+            </button>
+          )}
+
+          {/* Create PR button (Claude-Code-on-Web parity) */}
+          {isOnSessionBranch && (
+            <CreatePRButton
+              repo={repo}
+              sessionId={sessionId}
+              branch={currentBranch}
+              defaultBranch={defaultBranch}
+              disabled={executing || loadingPlan}
+            />
+          )}
+        </div>
+
+        {/* WebSocket connection indicator + context-window meter */}
+        <div style={{ marginTop: 6, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
+          <span>
+            {sessionId && (
+              <span className="ws-indicator">
+                <span className="ws-dot" style={{
+                  backgroundColor: wsConnected ? "#10B981" : "#EF4444",
+                }} />
+                {wsConnected ? "Live" : "Connecting..."}
+              </span>
+            )}
+          </span>
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+            <TasksPanel sessionId={sessionId} />
+            <ContextMeter sessionId={sessionId} />
+          </span>
+        </div>
+      </div>
+
+      {/* Diff Viewer overlay */}
+      {showDiffViewer && (
+        <DiffViewer
+          diff={diffData}
+          onClose={() => setShowDiffViewer(false)}
+        />
+      )}
+
+      {/* FilePreviewPanel — read-first viewer.  Opens on a file row
+          click in the sidebar.  Header carries Prepare Run (runnable
+          only), Open Workspace, and an overflow menu. */}
+      {previewPath && (
+        <FilePreviewPanel
+          path={previewPath}
+          content={previewContent}
+          loading={previewLoading}
+          error={previewError}
+          errorCode={previewErrorCode}
+          notFoundKind={
+            fileWasJustDeletedRef.current.has(previewPath)
+              ? "deleted"
+              : fileWasJustCreatedRef.current.has(previewPath)
+                ? "syncing"
+                : "unavailable"
+          }
+          mode={previewMode}
+          branch={currentBranch}
+          onModeChange={setPreviewMode}
+          onRefreshTree={() => {
+            try {
+              window.dispatchEvent(new CustomEvent("gitpilot:refresh-tree"));
+            } catch (_e) { /* old browser */ }
+          }}
+          onRetry={() => {
+            const p = previewPath;
+            const m = previewMode;
+            setPreviewPath(null);
+            // Fire the same window event we listened to — keeps the
+            // retry path identical to the original load and lets any
+            // future side-effects (e.g. analytics) see one event class.
+            setTimeout(() => window.dispatchEvent(new CustomEvent(
+              m === "workspace" ? "gitpilot:open-workspace" : "gitpilot:open-file",
+              { detail: { path: p } },
+            )), 0);
+          }}
+          onClose={() => {
+            try {
+              window.dispatchEvent(new CustomEvent("gitpilot:file-closed"));
+            } catch (_e) {/* old browser */}
+            setPreviewPath(null);
+            setPreviewContent(null);
+            setPreviewError(null);
+            setPreviewErrorCode(null);
+          }}
+        />
+      )}
+
+      {/* SandboxCanvas overlay — opened by "Open in Canvas" next_action
+          buttons and ExecutionCard footers via the
+          gitpilot:open-in-canvas window event. */}
+      {canvasSpec && (
+        <SandboxCanvas
+          initialLanguage={canvasSpec.language}
+          initialCode={canvasSpec.code}
+          filename={canvasSpec.filename}
+          onClose={() => { setCanvasSpec(null); setCanvasError(null); }}
+        />
+      )}
+      {canvasError && canvasSpec && (
+        <div style={{
+          position: "fixed", bottom: 16, right: 16, zIndex: 110,
+          padding: "8px 12px", maxWidth: 380, fontSize: 12,
+          color: "#fca5a5", background: "#3d1111",
+          border: "1px solid #7f1d1d", borderRadius: 6,
+        }}>
+          {canvasError}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/ContextBar.jsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useRef, useState } from "react";
+import BranchPicker from "./BranchPicker.jsx";
+
+/**
+ * ContextBar — horizontal repo chip bar for multi-repo workspace context.
+ *
+ * Uses CSS classes for hover-reveal X (Claude-style: subtle by default,
+ * visible on chip hover, red on X hover). Each chip owns its own remove
+ * button — removing one repo never affects the others.
+ */
+export default function ContextBar({
+  contextRepos,
+  activeRepoKey,
+  repoStateByKey,
+  onActivate,
+  onRemove,
+  onAdd,
+  onBranchChange,
+  mode, // workspace mode: "github", "local-git", "folder" (optional)
+}) {
+  if (!contextRepos || contextRepos.length === 0) return null;
+
+  return (
+    <div className="ctxbar">
+      {/* Workspace mode indicator */}
+      {mode && (
+        <span className="ctxbar-mode" title={`Workspace mode: ${mode}`}>
+          {mode === "github" ? "GH" : mode === "local-git" ? "Git" : "Dir"}
+        </span>
+      )}
+      <div className="ctxbar-scroll">
+        {contextRepos.map((entry) => {
+          const isActive = entry.repoKey === activeRepoKey;
+          return (
+            <RepoChip
+              key={entry.repoKey}
+              entry={entry}
+              isActive={isActive}
+              repoState={repoStateByKey?.[entry.repoKey]}
+              onActivate={() => onActivate(entry.repoKey)}
+              onRemove={() => onRemove(entry.repoKey)}
+              onBranchChange={(newBranch) =>
+                onBranchChange(entry.repoKey, newBranch)
+              }
+            />
+          );
+        })}
+
+        <button
+          type="button"
+          className="ctxbar-add"
+          onClick={onAdd}
+          title="Add repository to context"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="ctxbar-meta">
+        {contextRepos.length} {contextRepos.length === 1 ? "repo" : "repos"}
+      </div>
+    </div>
+  );
+}
+
+function RepoChip({ entry, isActive, repoState, onActivate, onRemove, onBranchChange }) {
+  const [branchOpen, setBranchOpen] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const branchBtnRef = useRef(null);
+  const repo = entry.repo;
+  const branch = repoState?.currentBranch || entry.branch || repo?.default_branch || "main";
+  const defaultBranch = repoState?.defaultBranch || repo?.default_branch || "main";
+  const sessionBranches = repoState?.sessionBranches || [];
+  const displayName = repo?.name || entry.repoKey?.split("/")[1] || entry.repoKey;
+
+  const handleChipClick = useCallback(
+    (e) => {
+      if (e.target.closest("[data-chip-action]")) return;
+      onActivate();
+    },
+    [onActivate]
+  );
+
+  return (
+    <div
+      className={"ctxbar-chip" + (isActive ? " ctxbar-chip-active" : "")}
+      onClick={handleChipClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      title={isActive ? `Active (write): ${entry.repoKey}` : `Click to activate ${entry.repoKey}`}
+    >
+      {/* Active indicator bar */}
+      {isActive && <div className="ctxbar-chip-indicator" />}
+
+      {/* Repo name */}
+      <span className="ctxbar-chip-name">{displayName}</span>
+
+      {/* Separator dot */}
+      <span className="ctxbar-chip-dot" />
+
+      {/* Branch name — single click opens GitHub branch list */}
+      <button
+        ref={branchBtnRef}
+        type="button"
+        data-chip-action="branch"
+        className={"ctxbar-chip-branch" + (isActive ? " ctxbar-chip-branch-active" : "")}
+        onClick={(e) => {
+          e.stopPropagation();
+          setBranchOpen((v) => !v);
+        }}
+      >
+        {branch}
+      </button>
+
+      {/* Write badge for active repo */}
+      {isActive && <span className="ctxbar-chip-write">write</span>}
+
+      {/* Remove button: hidden by default, revealed on hover */}
+      <button
+        type="button"
+        data-chip-action="remove"
+        className={"ctxbar-chip-remove" + (hovered ? " ctxbar-chip-remove-visible" : "")}
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove();
+        }}
+        title={`Remove ${displayName} from context`}
+      >
+        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+
+      {/* BranchPicker in external-anchor mode: dropdown opens immediately,
+          positioned from the branch button, fetches all branches from GitHub */}
+      {branchOpen && (
+        <BranchPicker
+          repo={repo}
+          currentBranch={branch}
+          defaultBranch={defaultBranch}
+          sessionBranches={sessionBranches}
+          externalAnchorRef={branchBtnRef}
+          onBranchChange={(newBranch) => {
+            onBranchChange(newBranch);
+            setBranchOpen(false);
+          }}
+          onClose={() => setBranchOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

frontend/components/ContextMeter.jsx

@@ -0,0 +1,410 @@
+// frontend/components/ContextMeter.jsx
+//
+// Small bottom-right control that shows the active LLM's context-window
+// utilisation.  Collapsed: a single ⓘ icon (no number — keeps the UI
+// quiet during normal use).  Expanded: a compact popover with the
+// breakdown, topology line, and a manual refresh button.
+//
+// Refresh model: lazy — fetched only when the popover opens, plus the
+// explicit ↻ button.  Zero idle traffic.
+//
+// Token-count estimate flag: when the backend reports is_estimate=true
+// (Ollama / OllaBridge — no real tokenizer available) every number is
+// prefixed with ≈ so the imprecision is visible.
+//
+// Colours: GitPilot orange #D95C3D for ≥60% (warning), red #B91C1C for
+// ≥85% (saturated).  No new dependencies; inline styles + a scoped
+// <style> block for animations / focus rings.
+
+import React, { useEffect, useRef, useState } from "react";
+
+const GITPILOT_ORANGE = "#D95C3D";
+const SATURATED_RED = "#B91C1C";
+const DIM = "#9aa0b4";
+const SLATE = "#6b7280";
+
+const fmt = (n) => {
+  if (n == null) return "—";
+  return new Intl.NumberFormat("en-US").format(n);
+};
+
+const pct = (used, total) => {
+  if (!total) return 0;
+  return Math.max(0, Math.min(100, (100 * used) / total));
+};
+
+const colourFor = (percent) => {
+  if (percent >= 85) return SATURATED_RED;
+  if (percent >= 60) return GITPILOT_ORANGE;
+  return SLATE;
+};
+
+function Bar({ percent, colour }) {
+  // 16-segment monochrome bar, matching the ASCII design.
+  const filled = Math.round((percent / 100) * 16);
+  const segs = [];
+  for (let i = 0; i < 16; i++) {
+    segs.push(
+      <span
+        key={i}
+        aria-hidden="true"
+        style={{
+          display: "inline-block",
+          width: 6,
+          height: 8,
+          marginRight: 1,
+          background: i < filled ? colour : "rgba(255,255,255,0.08)",
+          borderRadius: 1,
+        }}
+      />,
+    );
+  }
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", lineHeight: 1 }}>
+      {segs}
+    </span>
+  );
+}
+
+function Row({ label, tokens, total, estimate, accent }) {
+  const p = pct(tokens, total);
+  const prefix = estimate ? "≈ " : "";
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr auto auto",
+        gap: 12,
+        padding: "4px 0",
+        fontSize: 12,
+        color: accent ? "#e5e7eb" : DIM,
+        fontVariantNumeric: "tabular-nums",
+      }}
+    >
+      <span>{label}</span>
+      <span style={{ color: accent ? "#e5e7eb" : "#cbd1e3" }}>
+        {prefix}
+        {fmt(tokens)}
+      </span>
+      <span style={{ width: 48, textAlign: "right" }}>{p.toFixed(1)}%</span>
+    </div>
+  );
+}
+
+export default function ContextMeter({ sessionId = null }) {
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const popoverRef = useRef(null);
+  const triggerRef = useRef(null);
+
+  const fetchUsage = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const qs = sessionId ? `?session_id=${encodeURIComponent(sessionId)}` : "";
+      const r = await fetch(`/api/context/usage${qs}`);
+      if (!r.ok) {
+        // 404 means the feature flag is off — render nothing in that case.
+        if (r.status === 404) {
+          setError("disabled");
+          setData(null);
+        } else {
+          setError(`http ${r.status}`);
+        }
+      } else {
+        setData(await r.json());
+      }
+    } catch (e) {
+      setError(String(e?.message || e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Refetch every time the popover opens so the user sees the *current*
+  // numbers after each plan/execute cycle — not a frozen snapshot from
+  // first open.  The endpoint is cheap (single-digit-ms after the first
+  // provider probe), so re-fetch-on-open is the honest default.
+  useEffect(() => {
+    if (open) {
+      fetchUsage();
+    }
+  }, [open, sessionId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Invalidate the displayed snapshot when the active session changes
+  // so we don't briefly show another session's numbers.
+  useEffect(() => {
+    setData(null);
+  }, [sessionId]);
+
+  // Click-outside + Esc to close.
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target)
+      ) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  // Feature flag off — render nothing.
+  if (error === "disabled") return null;
+
+  const percent = data ? data.percent_used : 0;
+  const bar = colourFor(percent);
+  const estimate = data?.is_estimate;
+  const prefix = estimate ? "≈ " : "";
+
+  return (
+    <span
+      className="gitpilot-ctx-meter"
+      style={{ position: "relative", display: "inline-flex" }}
+    >
+      <style>{`
+        .gitpilot-ctx-meter .ctx-trigger {
+          background: transparent;
+          border: 1px solid rgba(255,255,255,0.12);
+          color: ${DIM};
+          width: 22px;
+          height: 22px;
+          border-radius: 11px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          line-height: 1;
+          cursor: pointer;
+          padding: 0;
+          transition: color 120ms ease, border-color 120ms ease;
+        }
+        .gitpilot-ctx-meter .ctx-trigger:hover,
+        .gitpilot-ctx-meter .ctx-trigger:focus-visible {
+          color: #e5e7eb;
+          border-color: rgba(255,255,255,0.28);
+          outline: none;
+        }
+        .gitpilot-ctx-meter .ctx-trigger[data-warn="1"] { color: ${GITPILOT_ORANGE}; border-color: ${GITPILOT_ORANGE}55; }
+        .gitpilot-ctx-meter .ctx-trigger[data-sat="1"]  { color: ${SATURATED_RED}; border-color: ${SATURATED_RED}55; }
+        .gitpilot-ctx-meter .ctx-popover {
+          position: absolute;
+          right: 0;
+          bottom: calc(100% + 8px);
+          width: 360px;
+          background: #1a1c25;
+          border: 1px solid rgba(255,255,255,0.10);
+          border-radius: 8px;
+          box-shadow: 0 8px 24px rgba(0,0,0,0.45);
+          padding: 14px 16px;
+          z-index: 50;
+          font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        }
+        .gitpilot-ctx-meter .ctx-popover h4 {
+          margin: 0 0 10px 0;
+          font-size: 12px;
+          font-weight: 600;
+          letter-spacing: 0.04em;
+          text-transform: uppercase;
+          color: ${DIM};
+        }
+        .gitpilot-ctx-meter .ctx-meta {
+          display: grid;
+          grid-template-columns: 84px 1fr;
+          gap: 2px 12px;
+          font-size: 12px;
+          color: #cbd1e3;
+          margin-bottom: 12px;
+          font-variant-numeric: tabular-nums;
+        }
+        .gitpilot-ctx-meter .ctx-meta .k { color: ${DIM}; }
+        .gitpilot-ctx-meter .ctx-divider {
+          height: 1px;
+          background: rgba(255,255,255,0.08);
+          margin: 6px 0;
+        }
+        .gitpilot-ctx-meter .ctx-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 10px;
+          font-size: 11px;
+          color: ${DIM};
+        }
+        .gitpilot-ctx-meter .ctx-refresh {
+          background: transparent;
+          border: 1px solid rgba(255,255,255,0.14);
+          color: #cbd1e3;
+          font-size: 11px;
+          padding: 2px 8px;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        .gitpilot-ctx-meter .ctx-refresh:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
+        .gitpilot-ctx-meter .ctx-refresh:disabled { opacity: 0.5; cursor: default; }
+        .gitpilot-ctx-meter .ctx-warn {
+          margin-top: 10px;
+          padding: 8px 10px;
+          border: 1px solid ${GITPILOT_ORANGE}55;
+          background: ${GITPILOT_ORANGE}14;
+          color: ${GITPILOT_ORANGE};
+          border-radius: 4px;
+          font-size: 11px;
+          line-height: 1.5;
+        }
+        .gitpilot-ctx-meter .ctx-warn[data-sat="1"] {
+          border-color: ${SATURATED_RED}66;
+          background: ${SATURATED_RED}14;
+          color: ${SATURATED_RED};
+        }
+        .gitpilot-ctx-meter .ctx-warn ul { margin: 4px 0 0 18px; padding: 0; }
+      `}</style>
+
+      <button
+        ref={triggerRef}
+        type="button"
+        className="ctx-trigger"
+        aria-label="Context window usage"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        data-warn={data && percent >= 60 && percent < 85 ? "1" : "0"}
+        data-sat={data && percent >= 85 ? "1" : "0"}
+        onClick={() => setOpen((v) => !v)}
+        title="Context window usage"
+      >
+        {"ⓘ"}
+      </button>
+
+      {open && (
+        <div
+          ref={popoverRef}
+          className="ctx-popover"
+          role="dialog"
+          aria-label="Context window usage details"
+        >
+          <h4>Context window</h4>
+
+          {loading && !data && (
+            <div style={{ color: DIM, fontSize: 12 }}>Loading…</div>
+          )}
+          {error && error !== "disabled" && (
+            <div style={{ color: "#ffb3b7", fontSize: 12 }}>
+              Couldn't load: {error}
+            </div>
+          )}
+
+          {data && (
+            <>
+              <div className="ctx-meta">
+                <span className="k">Provider</span>
+                <span>{data.provider}</span>
+                <span className="k">Model</span>
+                <span>{data.model || "—"}</span>
+                <span className="k">Topology</span>
+                <span>{data.topology}</span>
+              </div>
+
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  fontSize: 12,
+                  color: "#cbd1e3",
+                  fontVariantNumeric: "tabular-nums",
+                  marginBottom: 8,
+                }}
+              >
+                <Bar percent={percent} colour={bar} />
+                <span>
+                  {prefix}
+                  {fmt(data.used)} / {fmt(data.context_window)}{" "}
+                  <span style={{ color: bar }}>({percent.toFixed(1)}%)</span>
+                </span>
+              </div>
+
+              <Row
+                label="Conversation messages"
+                tokens={data.breakdown?.messages || 0}
+                total={data.context_window}
+                estimate={estimate}
+              />
+              <Row
+                label="Planner system prompt"
+                tokens={data.breakdown?.system_prompt || 0}
+                total={data.context_window}
+                estimate={estimate}
+              />
+              <Row
+                label="Repo context summary"
+                tokens={data.breakdown?.repo_context || 0}
+                total={data.context_window}
+                estimate={estimate}
+              />
+              <Row
+                label={`Tool schemas (${data.tool_count || 0})`}
+                tokens={data.breakdown?.tool_schemas || 0}
+                total={data.context_window}
+                estimate={estimate}
+              />
+              <Row
+                label="Reserved for response"
+                tokens={data.reserved_response}
+                total={data.context_window}
+                estimate={false}
+              />
+
+              <div className="ctx-divider" />
+
+              <Row
+                label="Free space"
+                tokens={data.free}
+                total={data.context_window}
+                estimate={estimate}
+                accent
+              />
+
+              {percent >= 85 && (
+                <div className="ctx-warn" data-sat={percent >= 95 ? "1" : "0"}>
+                  Context near saturation. Consider:
+                  <ul>
+                    <li>Resetting the conversation</li>
+                    <li>Switching to a larger-context model</li>
+                    <li>Reducing repository scope</li>
+                  </ul>
+                </div>
+              )}
+
+              <div className="ctx-footer">
+                <span>{estimate ? "Token counts are estimated" : "Token counts via tiktoken"}</span>
+                <button
+                  type="button"
+                  className="ctx-refresh"
+                  onClick={fetchUsage}
+                  disabled={loading}
+                  aria-label="Refresh context usage"
+                >
+                  {loading ? "…" : "↻ refresh"}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </span>
+  );
+}

frontend/components/CreatePRButton.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+
+/**
+ * CreatePRButton — Claude-Code-on-Web parity PR creation action.
+ *
+ * When clicked, pushes session changes to a new branch and opens a PR.
+ * Shows loading state and links to the created PR on GitHub.
+ */
+export default function CreatePRButton({
+  repo,
+  sessionId,
+  branch,
+  defaultBranch,
+  disabled,
+  onPRCreated,
+}) {
+  const [creating, setCreating] = useState(false);
+  const [prUrl, setPrUrl] = useState(null);
+  const [error, setError] = useState(null);
+
+  const handleCreate = async () => {
+    if (!repo || !branch || branch === defaultBranch) return;
+
+    setCreating(true);
+    setError(null);
+
+    try {
+      const token = localStorage.getItem("github_token");
+      const headers = {
+        "Content-Type": "application/json",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      };
+
+      const owner = repo.full_name?.split("/")[0] || repo.owner;
+      const name = repo.full_name?.split("/")[1] || repo.name;
+
+      const res = await fetch(`/api/repos/${owner}/${name}/pulls`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          title: `[GitPilot] Changes from session ${sessionId ? sessionId.slice(0, 8) : branch}`,
+          head: branch,
+          base: defaultBranch || "main",
+          body: [
+            "## Summary",
+            "",
+            `Changes created by GitPilot AI assistant on branch \`${branch}\`.`,
+            "",
+            sessionId ? `Session ID: \`${sessionId}\`` : "",
+            "",
+            "---",
+            "*This PR was generated by [GitPilot](https://github.com/ruslanmv/gitpilot).*",
+          ]
+            .filter(Boolean)
+            .join("\n"),
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Failed to create PR");
+
+      const url = data.html_url || data.url;
+      setPrUrl(url);
+      onPRCreated?.({ pr_url: url, pr_number: data.number, branch });
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  if (prUrl) {
+    return (
+      <a
+        href={prUrl}
+        target="_blank"
+        rel="noreferrer"
+        style={styles.prLink}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="18" cy="18" r="3" />
+          <circle cx="6" cy="6" r="3" />
+          <path d="M13 6h3a2 2 0 0 1 2 2v7" />
+          <line x1="6" y1="9" x2="6" y2="21" />
+        </svg>
+        View PR on GitHub &rarr;
+      </a>
+    );
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        style={{
+          ...styles.btn,
+          opacity: disabled || creating ? 0.55 : 1,
+          cursor: disabled || creating ? "not-allowed" : "pointer",
+        }}
+        onClick={handleCreate}
+        disabled={disabled || creating || !branch || branch === defaultBranch}
+        title={
+          !branch || branch === defaultBranch
+            ? "Create a session branch first"
+            : "Create a pull request from session changes"
+        }
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="18" cy="18" r="3" />
+          <circle cx="6" cy="6" r="3" />
+          <path d="M13 6h3a2 2 0 0 1 2 2v7" />
+          <line x1="6" y1="9" x2="6" y2="21" />
+        </svg>
+        {creating ? "Creating PR..." : "Create PR"}
+      </button>
+      {error && (
+        <div style={styles.error}>{error}</div>
+      )}
+    </div>
+  );
+}
+
+const styles = {
+  btn: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    height: 38,
+    padding: "0 14px",
+    borderRadius: 8,
+    border: "1px solid rgba(16, 185, 129, 0.3)",
+    background: "rgba(16, 185, 129, 0.08)",
+    color: "#10B981",
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    transition: "background-color 0.15s",
+  },
+  prLink: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    height: 38,
+    padding: "0 14px",
+    borderRadius: 8,
+    background: "rgba(16, 185, 129, 0.10)",
+    color: "#10B981",
+    fontSize: 13,
+    fontWeight: 600,
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+  },
+  error: {
+    fontSize: 11,
+    color: "#EF4444",
+    marginTop: 4,
+  },
+};

frontend/components/DiffStats.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+/**
+ * DiffStats — Claude-Code-on-Web parity inline diff indicator.
+ *
+ * Clickable "+N -N in M files" badge that appears in agent messages.
+ * Clicking opens the DiffViewer overlay.
+ */
+export default function DiffStats({ diff, onClick }) {
+  if (!diff || (!diff.additions && !diff.deletions && !diff.files_changed)) {
+    return null;
+  }
+
+  return (
+    <button type="button" style={styles.container} onClick={onClick}>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M12 3v18M3 12h18" opacity="0.3" />
+        <rect x="3" y="3" width="18" height="18" rx="2" />
+      </svg>
+      <span style={styles.additions}>+{diff.additions || 0}</span>
+      <span style={styles.deletions}>-{diff.deletions || 0}</span>
+      <span style={styles.files}>
+        in {diff.files_changed || (diff.files || []).length} file{(diff.files_changed || (diff.files || []).length) !== 1 ? "s" : ""}
+      </span>
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.5 }}>
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+    </button>
+  );
+}
+
+const styles = {
+  container: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "5px 10px",
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    backgroundColor: "rgba(24, 24, 27, 0.8)",
+    cursor: "pointer",
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: "#A1A1AA",
+    transition: "border-color 0.15s, background-color 0.15s",
+    marginTop: 8,
+  },
+  additions: {
+    color: "#10B981",
+    fontWeight: 600,
+  },
+  deletions: {
+    color: "#EF4444",
+    fontWeight: 600,
+  },
+  files: {
+    color: "#71717A",
+  },
+};

frontend/components/DiffViewer.jsx

@@ -0,0 +1,263 @@
+import React, { useState } from "react";
+
+/**
+ * DiffViewer — Claude-Code-on-Web parity diff overlay.
+ *
+ * Shows a file list on the left and unified diff on the right.
+ * Green = additions, red = deletions. Additive component.
+ */
+export default function DiffViewer({ diff, onClose }) {
+  const [selectedFile, setSelectedFile] = useState(0);
+
+  if (!diff || !diff.files || diff.files.length === 0) {
+    return (
+      <div style={styles.overlay}>
+        <div style={styles.panel}>
+          <div style={styles.header}>
+            <span style={styles.headerTitle}>Diff Viewer</span>
+            <button type="button" style={styles.closeBtn} onClick={onClose}>
+              &times;
+            </button>
+          </div>
+          <div style={styles.emptyState}>No changes to display.</div>
+        </div>
+      </div>
+    );
+  }
+
+  const files = diff.files || [];
+  const currentFile = files[selectedFile] || files[0];
+
+  return (
+    <div style={styles.overlay}>
+      <div style={styles.panel}>
+        {/* Header */}
+        <div style={styles.header}>
+          <div style={styles.headerLeft}>
+            <span style={styles.headerTitle}>Diff Viewer</span>
+            <span style={styles.statBadge}>
+              <span style={{ color: "#10B981" }}>+{diff.additions || 0}</span>
+              {" "}
+              <span style={{ color: "#EF4444" }}>-{diff.deletions || 0}</span>
+              {" in "}
+              {diff.files_changed || files.length} files
+            </span>
+          </div>
+          <button type="button" style={styles.closeBtn} onClick={onClose}>
+            &times;
+          </button>
+        </div>
+
+        {/* Body */}
+        <div style={styles.body}>
+          {/* File list */}
+          <div style={styles.fileList}>
+            {files.map((f, idx) => (
+              <div
+                key={f.path}
+                style={{
+                  ...styles.fileItem,
+                  backgroundColor:
+                    idx === selectedFile ? "rgba(59, 130, 246, 0.10)" : "transparent",
+                  borderLeft:
+                    idx === selectedFile
+                      ? "2px solid #3B82F6"
+                      : "2px solid transparent",
+                }}
+                onClick={() => setSelectedFile(idx)}
+              >
+                <span style={styles.fileName}>{f.path}</span>
+                <span style={styles.fileStats}>
+                  <span style={{ color: "#10B981" }}>+{f.additions || 0}</span>
+                  {" "}
+                  <span style={{ color: "#EF4444" }}>-{f.deletions || 0}</span>
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Diff content */}
+          <div style={styles.diffContent}>
+            <div style={styles.diffPath}>{currentFile.path}</div>
+            <div style={styles.diffCode}>
+              {(currentFile.hunks || []).map((hunk, hi) => (
+                <div key={hi}>
+                  <div style={styles.hunkHeader}>{hunk.header || `@@ hunk ${hi + 1} @@`}</div>
+                  {(hunk.lines || []).map((line, li) => {
+                    let bg = "transparent";
+                    let color = "#D4D4D8";
+                    if (line.startsWith("+")) {
+                      bg = "rgba(16, 185, 129, 0.10)";
+                      color = "#6EE7B7";
+                    } else if (line.startsWith("-")) {
+                      bg = "rgba(239, 68, 68, 0.10)";
+                      color = "#FCA5A5";
+                    }
+                    return (
+                      <div
+                        key={li}
+                        style={{
+                          ...styles.diffLine,
+                          backgroundColor: bg,
+                          color,
+                        }}
+                      >
+                        {line}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+
+              {(!currentFile.hunks || currentFile.hunks.length === 0) && (
+                <div style={styles.diffPlaceholder}>
+                  Diff content will appear here when the agent modifies files.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    zIndex: 200,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  panel: {
+    width: "90vw",
+    maxWidth: 1100,
+    height: "80vh",
+    backgroundColor: "#131316",
+    border: "1px solid #27272A",
+    borderRadius: 12,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "12px 16px",
+    borderBottom: "1px solid #27272A",
+    backgroundColor: "#18181B",
+  },
+  headerLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+  },
+  headerTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#E4E4E7",
+  },
+  statBadge: {
+    fontSize: 12,
+    color: "#A1A1AA",
+  },
+  closeBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "transparent",
+    color: "#A1A1AA",
+    fontSize: 18,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  body: {
+    flex: 1,
+    display: "flex",
+    overflow: "hidden",
+  },
+  fileList: {
+    width: 240,
+    borderRight: "1px solid #27272A",
+    overflowY: "auto",
+    flexShrink: 0,
+  },
+  fileItem: {
+    padding: "8px 10px",
+    cursor: "pointer",
+    borderBottom: "1px solid rgba(39, 39, 42, 0.5)",
+    transition: "background-color 0.1s",
+  },
+  fileName: {
+    display: "block",
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: "#E4E4E7",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  fileStats: {
+    display: "block",
+    fontSize: 10,
+    marginTop: 2,
+  },
+  diffContent: {
+    flex: 1,
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+  },
+  diffPath: {
+    padding: "8px 12px",
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: "#A1A1AA",
+    borderBottom: "1px solid #27272A",
+    backgroundColor: "#18181B",
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+  },
+  diffCode: {
+    padding: "4px 0",
+    fontFamily: "monospace",
+    fontSize: 12,
+    lineHeight: 1.6,
+  },
+  hunkHeader: {
+    padding: "4px 12px",
+    color: "#6B7280",
+    backgroundColor: "rgba(59, 130, 246, 0.05)",
+    fontSize: 11,
+    fontStyle: "italic",
+  },
+  diffLine: {
+    padding: "0 12px",
+    whiteSpace: "pre",
+  },
+  diffPlaceholder: {
+    padding: 20,
+    textAlign: "center",
+    color: "#52525B",
+    fontSize: 13,
+  },
+  emptyState: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#52525B",
+    fontSize: 14,
+  },
+};

frontend/components/EnvironmentEditor.jsx

@@ -0,0 +1,278 @@
+import React, { useState } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * EnvironmentEditor — Claude-Code-on-Web parity environment config modal.
+ *
+ * Allows setting name, network access level, and environment variables.
+ */
+export default function EnvironmentEditor({ environment, onSave, onDelete, onClose }) {
+  const [name, setName] = useState(environment?.name || "");
+  const [networkAccess, setNetworkAccess] = useState(environment?.network_access || "limited");
+  const [envVarsText, setEnvVarsText] = useState(
+    environment?.env_vars
+      ? Object.entries(environment.env_vars)
+          .map(([k, v]) => `${k}=${v}`)
+          .join("\n")
+      : ""
+  );
+
+  const handleSave = () => {
+    const envVars = {};
+    envVarsText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line && line.includes("="))
+      .forEach((line) => {
+        const idx = line.indexOf("=");
+        const key = line.slice(0, idx).trim();
+        const val = line.slice(idx + 1).trim();
+        if (key) envVars[key] = val;
+      });
+
+    onSave({
+      id: environment?.id || null,
+      name: name.trim() || "Default",
+      network_access: networkAccess,
+      env_vars: envVars,
+    });
+  };
+
+  return createPortal(
+    <div style={styles.overlay} onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div style={styles.modal} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.header}>
+          <span style={styles.headerTitle}>
+            {environment?.id ? "Edit Environment" : "New Environment"}
+          </span>
+          <button type="button" style={styles.closeBtn} onClick={onClose}>
+            &times;
+          </button>
+        </div>
+
+        <div style={styles.body}>
+          {/* Name */}
+          <label style={styles.label}>Environment Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. Development, Staging, Production"
+            style={styles.input}
+          />
+
+          {/* Network Access */}
+          <label style={styles.label}>Network Access</label>
+          <div style={styles.radioGroup}>
+            {[
+              { value: "limited", label: "Limited", desc: "Allowlisted domains only (package managers, APIs)" },
+              { value: "full", label: "Full", desc: "Unrestricted internet access" },
+              { value: "none", label: "None", desc: "Air-gapped — no external network" },
+            ].map((opt) => (
+              <label
+                key={opt.value}
+                style={{
+                  ...styles.radioItem,
+                  borderColor:
+                    networkAccess === opt.value ? "#3B82F6" : "#27272A",
+                  backgroundColor:
+                    networkAccess === opt.value
+                      ? "rgba(59, 130, 246, 0.05)"
+                      : "transparent",
+                }}
+              >
+                <input
+                  type="radio"
+                  name="network"
+                  value={opt.value}
+                  checked={networkAccess === opt.value}
+                  onChange={(e) => setNetworkAccess(e.target.value)}
+                  style={{ display: "none" }}
+                />
+                <div>
+                  <div style={{
+                    fontSize: 13,
+                    fontWeight: 500,
+                    color: networkAccess === opt.value ? "#E4E4E7" : "#A1A1AA",
+                  }}>
+                    {opt.label}
+                  </div>
+                  <div style={{ fontSize: 11, color: "#71717A", marginTop: 2 }}>
+                    {opt.desc}
+                  </div>
+                </div>
+              </label>
+            ))}
+          </div>
+
+          {/* Environment Variables */}
+          <label style={styles.label}>Environment Variables</label>
+          <textarea
+            value={envVarsText}
+            onChange={(e) => setEnvVarsText(e.target.value)}
+            placeholder={"NODE_ENV=development\nDEBUG=true\nAPI_KEY=your-key-here"}
+            rows={6}
+            style={styles.textarea}
+          />
+          <div style={{ fontSize: 10, color: "#52525B", marginTop: 4 }}>
+            One KEY=VALUE per line. Secrets are stored locally.
+          </div>
+        </div>
+
+        <div style={styles.footer}>
+          {onDelete && (
+            <button type="button" style={styles.deleteBtn} onClick={onDelete}>
+              Delete
+            </button>
+          )}
+          <div style={{ flex: 1 }} />
+          <button type="button" style={styles.cancelBtn} onClick={onClose}>
+            Cancel
+          </button>
+          <button type="button" style={styles.saveBtn} onClick={handleSave}>
+            Save
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+const styles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    zIndex: 10000,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  modal: {
+    width: 480,
+    maxHeight: "80vh",
+    backgroundColor: "#131316",
+    border: "1px solid #27272A",
+    borderRadius: 12,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "14px 16px",
+    borderBottom: "1px solid #27272A",
+    backgroundColor: "#18181B",
+  },
+  headerTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#E4E4E7",
+  },
+  closeBtn: {
+    width: 26,
+    height: 26,
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "transparent",
+    color: "#A1A1AA",
+    fontSize: 16,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  body: {
+    padding: "16px",
+    overflowY: "auto",
+    flex: 1,
+  },
+  label: {
+    display: "block",
+    fontSize: 12,
+    fontWeight: 600,
+    color: "#A1A1AA",
+    marginBottom: 6,
+    marginTop: 14,
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "#18181B",
+    color: "#E4E4E7",
+    fontSize: 13,
+    outline: "none",
+    boxSizing: "border-box",
+  },
+  radioGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+  },
+  radioItem: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 10,
+    padding: "8px 10px",
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    cursor: "pointer",
+    transition: "border-color 0.15s, background-color 0.15s",
+  },
+  textarea: {
+    width: "100%",
+    padding: "8px 10px",
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "#18181B",
+    color: "#E4E4E7",
+    fontSize: 12,
+    fontFamily: "monospace",
+    outline: "none",
+    resize: "vertical",
+    boxSizing: "border-box",
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "12px 16px",
+    borderTop: "1px solid #27272A",
+  },
+  cancelBtn: {
+    padding: "6px 14px",
+    borderRadius: 6,
+    border: "1px solid #3F3F46",
+    background: "transparent",
+    color: "#A1A1AA",
+    fontSize: 12,
+    cursor: "pointer",
+  },
+  saveBtn: {
+    padding: "6px 14px",
+    borderRadius: 6,
+    border: "none",
+    background: "#3B82F6",
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+  deleteBtn: {
+    padding: "6px 14px",
+    borderRadius: 6,
+    border: "1px solid rgba(239, 68, 68, 0.3)",
+    background: "transparent",
+    color: "#EF4444",
+    fontSize: 12,
+    cursor: "pointer",
+  },
+};

frontend/components/EnvironmentSelector.jsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from "react";
+import EnvironmentEditor from "./EnvironmentEditor.jsx";
+
+/**
+ * EnvironmentSelector — Claude-Code-on-Web parity environment dropdown.
+ *
+ * Shows current environment name + gear icon. Gear opens the editor modal.
+ * Fetches environments from /api/environments.
+ */
+export default function EnvironmentSelector({ activeEnvId, onEnvChange }) {
+  const [envs, setEnvs] = useState([]);
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingEnv, setEditingEnv] = useState(null);
+
+  const fetchEnvs = async () => {
+    try {
+      const res = await fetch("/api/environments", { cache: "no-cache" });
+      if (!res.ok) return;
+      const data = await res.json();
+      setEnvs(data.environments || []);
+    } catch (err) {
+      console.warn("Failed to fetch environments:", err);
+    }
+  };
+
+  useEffect(() => {
+    fetchEnvs();
+  }, []);
+
+  const activeEnv =
+    envs.find((e) => e.id === activeEnvId) || envs[0] || { name: "Default", id: "default" };
+
+  const handleSave = async (config) => {
+    try {
+      const method = config.id ? "PUT" : "POST";
+      const url = config.id ? `/api/environments/${config.id}` : "/api/environments";
+      await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(config),
+      });
+      await fetchEnvs();
+      setEditorOpen(false);
+      setEditingEnv(null);
+    } catch (err) {
+      console.warn("Failed to save environment:", err);
+    }
+  };
+
+  const handleDelete = async (envId) => {
+    try {
+      await fetch(`/api/environments/${envId}`, { method: "DELETE" });
+      await fetchEnvs();
+      if (activeEnvId === envId) {
+        onEnvChange?.(null);
+      }
+    } catch (err) {
+      console.warn("Failed to delete environment:", err);
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.label}>ENVIRONMENT</div>
+      <div style={styles.row}>
+        <div style={styles.envCard}>
+          {/* Env selector */}
+          <select
+            value={activeEnv.id || "default"}
+            onChange={(e) => onEnvChange?.(e.target.value)}
+            style={styles.select}
+          >
+            {envs.map((env) => (
+              <option key={env.id} value={env.id}>
+                {env.name}
+              </option>
+            ))}
+          </select>
+
+          {/* Network badge */}
+          <span style={{
+            ...styles.networkBadge,
+            color: activeEnv.network_access === "full"
+              ? "#10B981"
+              : activeEnv.network_access === "none"
+              ? "#EF4444"
+              : "#F59E0B",
+          }}>
+            {activeEnv.network_access || "limited"}
+          </span>
+        </div>
+
+        {/* Gear icon */}
+        <button
+          type="button"
+          style={styles.gearBtn}
+          onClick={() => {
+            setEditingEnv(activeEnv);
+            setEditorOpen(true);
+          }}
+          title="Configure environment"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="3" />
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+          </svg>
+        </button>
+
+        {/* Add new */}
+        <button
+          type="button"
+          style={styles.gearBtn}
+          onClick={() => {
+            setEditingEnv(null);
+            setEditorOpen(true);
+          }}
+          title="Add environment"
+        >
+          +
+        </button>
+      </div>
+
+      {/* Editor modal */}
+      {editorOpen && (
+        <EnvironmentEditor
+          environment={editingEnv}
+          onSave={handleSave}
+          onDelete={editingEnv?.id ? () => handleDelete(editingEnv.id) : null}
+          onClose={() => {
+            setEditorOpen(false);
+            setEditingEnv(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    padding: "10px 14px",
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: "0.08em",
+    color: "#71717A",
+    textTransform: "uppercase",
+    marginBottom: 6,
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+  },
+  envCard: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "4px 8px",
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    backgroundColor: "#18181B",
+    minWidth: 0,
+  },
+  select: {
+    flex: 1,
+    background: "transparent",
+    border: "none",
+    color: "#E4E4E7",
+    fontSize: 12,
+    fontWeight: 500,
+    outline: "none",
+    cursor: "pointer",
+    minWidth: 0,
+  },
+  networkBadge: {
+    fontSize: 9,
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    flexShrink: 0,
+  },
+  gearBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    background: "transparent",
+    color: "#71717A",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 14,
+    flexShrink: 0,
+  },
+};

frontend/components/ExecutionPlanCard.jsx

@@ -0,0 +1,275 @@
+// frontend/components/ExecutionPlanCard.jsx
+//
+// The approval-first surface for sandbox runs.  Renders a
+// deterministic ExecutionPlan returned by POST /api/sandbox/plan
+// and gates the actual run on an explicit user click.
+//
+// Two visual variants, same component:
+//
+//   variant = "full"    — used in chat for file-run and chat-command
+//                         plans.  Big card, every safety check / warning
+//                         visible, primary CTA "Run in Sandbox".
+//   variant = "compact" — used as a popover above a code-block ▶ click.
+//                         Same info, less chrome.
+//
+// The component is stateless about the run itself: it produces an
+// approval event (onApprove with the plan object) and lets the
+// parent decide how to execute.  This keeps the streaming/state
+// machine work for Batch 3 — here we only render and consent.
+
+import React from "react";
+
+const SEVERITY_STYLE = {
+  high:   { bg: "#3d1111", fg: "#fca5a5", border: "#7f1d1d", icon: "⛔" },
+  medium: { bg: "#3d2d11", fg: "#fde68a", border: "#854d0e", icon: "⚠" },
+  low:    { bg: "#1f2937", fg: "#a5b4fc", border: "#3730a3", icon: "ⓘ" },
+};
+
+const BACKEND_LABELS = {
+  subprocess: "Local",
+  matrixlab: "MatrixLab",
+  off: "Pass-through",
+};
+
+export default function ExecutionPlanCard({
+  plan,
+  variant = "full",
+  busy = false,
+  onApprove,
+  onCancel,
+  onOpenFile,
+}) {
+  if (!plan) return null;
+  const isCompact = variant === "compact";
+  const styles = isCompact ? compactStyles : fullStyles;
+
+  const commandStr = Array.isArray(plan.command)
+    ? plan.command.join(" ")
+    : String(plan.command || "");
+
+  return (
+    <div style={styles.card} role="region" aria-label="Execution plan">
+      <header style={styles.header}>
+        <span style={styles.badge}>EXECUTION PLAN</span>
+        <h3 style={styles.title}>{plan.goal || "Run in sandbox"}</h3>
+      </header>
+
+      <dl style={styles.fields}>
+        {plan.file && (
+          <Field label="File" value={<code>{plan.file}</code>} />
+        )}
+        <Field label="Command" value={<code>{commandStr}</code>} />
+        <Field
+          label="Sandbox"
+          value={BACKEND_LABELS[plan.sandbox] || plan.sandbox}
+        />
+        <Field label="Timeout" value={`${plan.timeout_sec}s`} />
+        <Field
+          label="Network"
+          value={plan.network ? "Enabled" : "Disabled"}
+        />
+        {plan.workdir && plan.workdir !== "." && (
+          <Field label="Working dir" value={<code>{plan.workdir}</code>} />
+        )}
+      </dl>
+
+      {/* Safety checks — always green, no opinion */}
+      {Array.isArray(plan.safety?.checks) && plan.safety.checks.length > 0 && (
+        <ul style={styles.checks}>
+          {plan.safety.checks.map((c, i) => (
+            <li key={i} style={styles.check}>
+              <span style={styles.checkIcon}>✓</span>
+              {c.label}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {/* Warnings — non-blocking, sorted high → low by the backend */}
+      {Array.isArray(plan.safety?.warnings) && plan.safety.warnings.length > 0 && (
+        <ul style={styles.warnings}>
+          {plan.safety.warnings.map((w, i) => {
+            const st = SEVERITY_STYLE[w.severity] || SEVERITY_STYLE.low;
+            return (
+              <li key={i} style={{
+                ...styles.warning,
+                background: st.bg, color: st.fg, borderColor: st.border,
+              }}>
+                <span style={styles.warnIcon}>{st.icon}</span>
+                <span>
+                  <strong>{w.label}</strong>
+                  {w.detail && <span style={styles.warnDetail}> — {w.detail}</span>}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {plan.inline_code && (
+        <details style={styles.snippetWrap}>
+          <summary style={styles.snippetLabel}>
+            Snippet to run ({plan.inline_code.length} chars)
+          </summary>
+          <pre style={styles.snippet}>{plan.inline_code}</pre>
+        </details>
+      )}
+
+      <footer style={styles.footer}>
+        <button
+          type="button"
+          style={{ ...styles.primary, opacity: busy ? 0.6 : 1 }}
+          onClick={() => onApprove?.(plan)}
+          disabled={busy}
+          autoFocus
+        >
+          {busy ? "Starting…" : "▶ Run in Sandbox"}
+        </button>
+        {plan.file && onOpenFile && (
+          <button type="button" style={styles.secondary}
+                  onClick={() => onOpenFile(plan.file)}>
+            Open {plan.file.split("/").pop()}
+          </button>
+        )}
+        <button
+          type="button"
+          style={styles.tertiary}
+          onClick={() => onCancel?.(plan)}
+          disabled={busy}
+        >
+          Cancel
+        </button>
+      </footer>
+    </div>
+  );
+}
+
+function Field({ label, value }) {
+  return (
+    <>
+      <dt style={dtStyle}>{label}</dt>
+      <dd style={ddStyle}>{value}</dd>
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Approve helper — single source of truth so chat, codeblock, canvas
+// all build the plan the same way.  Returns the plan object or throws.
+// ---------------------------------------------------------------------------
+
+export async function fetchExecutionPlan(payload) {
+  const res = await fetch("/api/sandbox/plan", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    throw new Error(data.detail || `Plan failed (HTTP ${res.status})`);
+  }
+  return data.plan;
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const dtStyle = {
+  fontSize: 11, color: "#9092b5", textTransform: "uppercase",
+  letterSpacing: "0.05em", margin: 0,
+};
+const ddStyle = { margin: "0 0 6px", fontSize: 13, color: "#e4e4e7" };
+
+const fullStyles = {
+  card: {
+    margin: "8px 0",
+    background: "#0d1117",
+    border: "1px solid #1f2937",
+    borderLeft: "3px solid #10B981",
+    borderRadius: 10,
+    padding: 16,
+    color: "#e4e4e7",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  header: { display: "flex", alignItems: "center", gap: 10, marginBottom: 10 },
+  badge: {
+    fontSize: 10, fontWeight: 700, letterSpacing: "0.06em",
+    padding: "2px 8px", borderRadius: 4,
+    background: "#0d3320", color: "#86efac", textTransform: "uppercase",
+  },
+  title: { margin: 0, fontSize: 15, fontWeight: 600 },
+  fields: {
+    display: "grid", gridTemplateColumns: "120px 1fr",
+    rowGap: 4, columnGap: 12, margin: "10px 0",
+  },
+  checks: {
+    listStyle: "none", padding: 0, margin: "8px 0",
+    display: "flex", flexWrap: "wrap", gap: 6,
+  },
+  check: {
+    fontSize: 11, color: "#86efac",
+    background: "rgba(16,185,129,0.08)",
+    border: "1px solid rgba(16,185,129,0.25)",
+    borderRadius: 4, padding: "2px 8px",
+  },
+  checkIcon: { marginRight: 4 },
+  warnings: { listStyle: "none", padding: 0, margin: "10px 0 4px" },
+  warning: {
+    fontSize: 12,
+    padding: "6px 10px", borderRadius: 4, border: "1px solid",
+    marginBottom: 4, display: "flex", gap: 8, alignItems: "flex-start",
+  },
+  warnIcon: { fontSize: 14, lineHeight: 1 },
+  warnDetail: { opacity: 0.8 },
+  snippetWrap: {
+    margin: "8px 0",
+    border: "1px solid #1f2937", borderRadius: 6, padding: "6px 10px",
+  },
+  snippetLabel: { fontSize: 11, color: "#9092b5", cursor: "pointer" },
+  snippet: {
+    margin: "6px 0 0", padding: 8, fontSize: 12,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    background: "#000", color: "#d4d4d8", borderRadius: 4,
+    maxHeight: 240, overflow: "auto", whiteSpace: "pre-wrap",
+  },
+  footer: { display: "flex", gap: 8, marginTop: 12 },
+  primary: {
+    background: "#10B981", color: "#052e1c", border: "0",
+    borderRadius: 6, padding: "8px 16px", fontSize: 13, fontWeight: 600,
+    cursor: "pointer",
+  },
+  secondary: {
+    background: "transparent", color: "#a1a1aa",
+    border: "1px solid #3F3F46", borderRadius: 6,
+    padding: "7px 14px", fontSize: 13, cursor: "pointer",
+  },
+  tertiary: {
+    background: "transparent", color: "#71717a",
+    border: "1px solid #27272a", borderRadius: 6,
+    padding: "7px 14px", fontSize: 13, cursor: "pointer",
+    marginLeft: "auto",
+  },
+};
+
+// Compact variant — same structure, denser padding, no inline snippet
+// expander.  Used for code-block Run confirmation popovers.
+const compactStyles = {
+  ...fullStyles,
+  card: {
+    ...fullStyles.card,
+    padding: 10,
+    margin: "6px 0",
+    borderRadius: 8,
+  },
+  title: { margin: 0, fontSize: 13, fontWeight: 600 },
+  fields: {
+    ...fullStyles.fields,
+    gridTemplateColumns: "90px 1fr",
+    rowGap: 2,
+    margin: "6px 0",
+  },
+  primary: { ...fullStyles.primary, padding: "6px 12px", fontSize: 12 },
+  secondary: { ...fullStyles.secondary, padding: "5px 10px", fontSize: 12 },
+  tertiary: { ...fullStyles.tertiary, padding: "5px 10px", fontSize: 12 },
+};

frontend/components/FilePreviewPanel.jsx

@@ -0,0 +1,463 @@
+// frontend/components/FilePreviewPanel.jsx
+//
+// Read-first file viewer with two density modes.
+//
+//   mode="preview"    Narrow right-side drawer for a quick look.
+//                     ~520px wide, primary CTA "Prepare Run".
+//   mode="workspace"  Wide right-side editor for serious review.
+//                     ~85vw, same actions, much more reading room.
+//
+// Header vocabulary follows the enterprise verbs the design review
+// nailed down:
+//
+//   [▶ Prepare Run]   only on runnable files (hidden on README etc.)
+//   [Open Workspace]  upgrades preview → workspace (or back)
+//   [⋯]               overflow: Ask GitPilot · Open Canvas ·
+//                     Copy path · Copy contents
+//
+// "Prepare Run" never runs anything directly — it dispatches the
+// gitpilot:run-file event which lands on the green ExecutionPlanCard
+// in chat, where the user approves before the sandbox starts.
+//
+// Error state: when the file content fetch fails we hide every action
+// that depends on having content (Prepare Run / Canvas / Ask).  Only
+// safe actions remain (Retry / Copy path).
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+const RUNNABLE_FILE_EXTS = new Set(["py", "js", "mjs", "cjs", "sh", "bash"]);
+
+const LANG_LABEL = {
+  py: "Python", js: "JavaScript", mjs: "JavaScript", cjs: "JavaScript",
+  sh: "Shell", bash: "Shell",
+  md: "Markdown", json: "JSON", yml: "YAML", yaml: "YAML", toml: "TOML",
+  html: "HTML", css: "CSS", ts: "TypeScript", tsx: "TypeScript",
+  rs: "Rust", go: "Go", java: "Java", c: "C", cpp: "C++", h: "C/C++",
+};
+
+function extOf(path) {
+  if (!path || !path.includes(".")) return "";
+  return path.split(".").pop().toLowerCase();
+}
+
+function bytesPretty(n) {
+  if (n == null) return "";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(2)} MB`;
+}
+
+// ---------------------------------------------------------------------------
+// Overflow menu — secondary actions live here so the header stays calm.
+// ---------------------------------------------------------------------------
+
+function OverflowMenu({ path, content, runnable, onClose }) {
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
+    const onDown = () => onClose?.();
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onDown);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onDown);
+    };
+  }, [onClose]);
+
+  const copy = (text) => {
+    if (navigator?.clipboard && text != null) navigator.clipboard.writeText(text).catch(() => {});
+  };
+  const items = [
+    { label: "Ask GitPilot",
+      onClick: () => window.dispatchEvent(new CustomEvent("gitpilot:ask-about-file", { detail: { path } })) },
+    { label: "Open in Canvas",  runnable: true,
+      onClick: () => window.dispatchEvent(new CustomEvent("gitpilot:open-in-canvas", { detail: { path } })) },
+    { divider: true },
+    { label: "Copy path",     onClick: () => copy(path) },
+    { label: "Copy contents", onClick: () => copy(content), disabled: !content },
+  ];
+
+  return (
+    <div role="menu"
+         onMouseDown={(e) => e.stopPropagation()}
+         style={{
+           position: "absolute", right: 6, top: 36, zIndex: 50,
+           minWidth: 200,
+           background: "#18181B", border: "1px solid #3F3F46",
+           borderRadius: 6, padding: "4px 0",
+           boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
+         }}>
+      {items.map((it, i) => {
+        if (it.divider) return <div key={i} style={{ height: 1, background: "#27272A", margin: "4px 0" }} />;
+        if (it.runnable && !runnable) return null;
+        return (
+          <button
+            key={i}
+            role="menuitem"
+            type="button"
+            disabled={!!it.disabled}
+            onClick={(e) => { e.stopPropagation(); it.onClick(); onClose?.(); }}
+            style={{
+              width: "100%", textAlign: "left",
+              background: "transparent",
+              color: it.disabled ? "#52525B" : "#E4E4E7",
+              border: "none",
+              padding: "6px 12px", fontSize: 12,
+              cursor: it.disabled ? "not-allowed" : "pointer",
+            }}
+            onMouseEnter={(e) => { if (!it.disabled) e.currentTarget.style.background = "#27272A"; }}
+            onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
+          >
+            {it.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main panel
+// ---------------------------------------------------------------------------
+
+export default function FilePreviewPanel({
+  path,
+  content,
+  loading,
+  error,
+  errorCode,            // numeric HTTP status when known (e.g. 404)
+  notFoundKind,         // "deleted" | "syncing" | "unavailable"
+  mode = "preview",     // "preview" | "workspace"
+  branch,
+  onModeChange,
+  onClose,
+  onRetry,
+  onRefreshTree,
+}) {
+  const ext = extOf(path);
+  const lang = LANG_LABEL[ext] || ext.toUpperCase() || "Text";
+  const runnable = RUNNABLE_FILE_EXTS.has(ext);
+  const size = content ? new Blob([content]).size : null;
+  const filename = path ? path.split("/").pop() : "";
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuBtnRef = useRef(null);
+
+  // Esc closes — keyboard contract every modal/drawer in GitPilot uses.
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const prepareRun = () => {
+    window.dispatchEvent(new CustomEvent("gitpilot:run-file", { detail: { path } }));
+    onClose?.();
+  };
+  const toggleWorkspace = () => {
+    if (onModeChange) onModeChange(mode === "workspace" ? "preview" : "workspace");
+  };
+
+  const lines = useMemo(() => (content || "").split("\n"), [content]);
+
+  // Width contract: preview = peek, workspace = serious reading.
+  const widthCss = mode === "workspace"
+    ? "min(1280px, 86vw)"
+    : "min(520px, 44vw)";
+
+  // Decide which actions to show.  Two rules:
+  //   1. While loading, secondary actions exist but disabled.
+  //   2. On error, hide every action that requires content; we show
+  //      Retry + Copy path only.
+  const showActions = !error;
+
+  return (
+    <aside style={{ ...s.shell, width: widthCss }} role="region" aria-label="File preview">
+      <header style={s.header}>
+        <div style={s.titleRow}>
+          <div style={{ minWidth: 0 }}>
+            <div style={s.filename}>{filename || "Untitled"}</div>
+            <div style={s.subpath}>
+              <span style={{ opacity: 0.8 }}>Path:</span> {path}
+              {branch && (
+                <>
+                  <span style={s.dot}>·</span>
+                  <span style={{ opacity: 0.8 }}>Branch:</span> {branch}
+                </>
+              )}
+            </div>
+          </div>
+          <div style={s.metaPills}>
+            <span style={s.pill}>{lang}</span>
+            {size != null && <span style={s.pillDim}>{bytesPretty(size)}</span>}
+            <button type="button" style={s.btnClose} onClick={onClose} aria-label="Close preview">
+              ✕
+            </button>
+          </div>
+        </div>
+
+        <div style={s.actions}>
+          {showActions && runnable && (
+            <button
+              type="button" style={s.btnPrimary} onClick={prepareRun}
+              disabled={loading || !content}
+              title="Build an Execution Plan you can review before running"
+            >
+              ▶ Prepare Run
+            </button>
+          )}
+          {showActions && (
+            <button type="button" style={s.btnSecondary} onClick={toggleWorkspace}
+                    title={mode === "workspace" ? "Collapse to preview" : "Open a wider editor view"}>
+              {mode === "workspace" ? "Collapse" : "Open Workspace"}
+            </button>
+          )}
+          {/* Error-only actions */}
+          {error && (
+            <button type="button" style={s.btnPrimary} onClick={onRetry}>
+              Retry
+            </button>
+          )}
+          {error && (
+            <button
+              type="button" style={s.btnSecondary}
+              onClick={() => {
+                if (navigator?.clipboard && path) navigator.clipboard.writeText(path).catch(() => {});
+              }}
+            >
+              Copy path
+            </button>
+          )}
+
+          {/* Overflow menu — only on the happy path; on error we
+              already trimmed the safe-only action set above. */}
+          {showActions && (
+            <div style={{ marginLeft: "auto", position: "relative" }}>
+              <button
+                type="button" ref={menuBtnRef}
+                style={s.btnSecondary}
+                aria-haspopup="menu" aria-expanded={menuOpen}
+                onMouseDown={(e) => e.stopPropagation()}
+                onClick={() => setMenuOpen((v) => !v)}
+                title="More actions"
+              >
+                ⋯
+              </button>
+              {menuOpen && (
+                <OverflowMenu
+                  path={path}
+                  content={content}
+                  runnable={runnable}
+                  onClose={() => setMenuOpen(false)}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </header>
+
+      <div style={s.body}>
+        {loading && <div style={s.empty}>Loading {path}…</div>}
+
+        {error && !loading && (
+          <NotAvailableCard
+            path={path}
+            branch={branch}
+            error={error}
+            errorCode={errorCode}
+            kind={notFoundKind}
+            onRetry={onRetry}
+            onRefreshTree={onRefreshTree}
+          />
+        )}
+
+        {!loading && !error && (
+          <pre style={s.code}>
+            {lines.map((line, i) => (
+              <div key={i} style={s.lineRow}>
+                <span style={s.lineNo}>{i + 1}</span>
+                <span style={s.lineCode}>{line || " "}</span>
+              </div>
+            ))}
+          </pre>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Calm empty state — replaces the harsh red "Couldn't load this file"
+// box. Same component, classifies the situation into one of:
+//   deleted     → execution removed the file from this branch
+//   syncing     → execution created the file but content isn't ready yet
+//   unavailable → file simply isn't on this branch
+// ---------------------------------------------------------------------------
+
+function NotAvailableCard({ path, branch, error, errorCode, kind, onRetry, onRefreshTree }) {
+  const isNotFound =
+    errorCode === 404 ||
+    /not\s*found/i.test(String(error || "")) ||
+    /HTTP\s*404/i.test(String(error || ""));
+
+  const effectiveKind = isNotFound ? (kind || "unavailable") : "error";
+
+  const copy = {
+    deleted: {
+      icon: "🗑",
+      title: "File deleted",
+      body: `${path ? path.split("/").pop() : "This file"} was removed by the latest execution. View the execution summary for details.`,
+      tone: "muted",
+    },
+    syncing: {
+      icon: "↻",
+      title: "File still syncing",
+      body: "GitPilot just created this file. Its content is being published to the active branch — try again in a moment.",
+      tone: "info",
+    },
+    unavailable: {
+      icon: "○",
+      title: "File unavailable",
+      body: "This file isn't available on the current branch. It may have been moved, renamed, or never committed here.",
+      tone: "muted",
+    },
+    error: {
+      icon: "!",
+      title: "Couldn't load this file",
+      body: "Something went wrong fetching the file content. Try again, or refresh the file tree.",
+      tone: "warn",
+    },
+  }[effectiveKind];
+
+  return (
+    <div
+      className={`file-notavail file-notavail--${copy.tone}`}
+      role="status"
+      aria-live="polite"
+    >
+      <div className="file-notavail__icon" aria-hidden="true">{copy.icon}</div>
+      <div className="file-notavail__title">{copy.title}</div>
+      <div className="file-notavail__body">{copy.body}</div>
+
+      <dl className="file-notavail__fields">
+        <dt>Path</dt>
+        <dd><code>{path}</code></dd>
+        {branch && (
+          <>
+            <dt>Branch</dt>
+            <dd><code>{branch}</code></dd>
+          </>
+        )}
+      </dl>
+
+      <div className="file-notavail__actions">
+        <button type="button" className="file-notavail__btn file-notavail__btn--primary" onClick={onRetry}>
+          Retry
+        </button>
+        {onRefreshTree && (
+          <button type="button" className="file-notavail__btn" onClick={onRefreshTree}>
+            Refresh files
+          </button>
+        )}
+        <button
+          type="button"
+          className="file-notavail__btn"
+          onClick={() => {
+            if (navigator?.clipboard && path) {
+              navigator.clipboard.writeText(path).catch(() => {});
+            }
+          }}
+        >
+          Copy path
+        </button>
+      </div>
+
+      {effectiveKind === "error" && error && (
+        <details className="file-notavail__details">
+          <summary>Technical details</summary>
+          <pre>{String(error)}</pre>
+        </details>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const s = {
+  shell: {
+    position: "fixed",
+    top: 0, right: 0, bottom: 0,
+    // ``width`` is set per-mode in the component.
+    background: "#0d0e17",
+    borderLeft: "1px solid #2a2b36",
+    display: "flex", flexDirection: "column",
+    zIndex: 90,
+    color: "#e4e4e7",
+    fontFamily: "system-ui, sans-serif",
+    boxShadow: "-12px 0 32px rgba(0,0,0,0.45)",
+    transition: "width 0.15s ease",
+  },
+  header: {
+    padding: "12px 16px 10px",
+    borderBottom: "1px solid #2a2b36",
+    background: "#14152a",
+  },
+  titleRow: { display: "flex", justifyContent: "space-between", gap: 12 },
+  filename: {
+    fontSize: 16, fontWeight: 600,
+    fontFamily: "ui-monospace, monospace",
+    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+  },
+  subpath: {
+    fontSize: 11, color: "#9092b5", marginTop: 2,
+    fontFamily: "ui-monospace, monospace",
+    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
+  },
+  dot: { margin: "0 6px", color: "#52525B" },
+  metaPills: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 },
+  pill: {
+    fontSize: 11, padding: "2px 8px", borderRadius: 4,
+    background: "#1e3a5f", color: "#93c5fd",
+    border: "1px solid #3B82F6",
+  },
+  pillDim: {
+    fontSize: 11, padding: "2px 8px", borderRadius: 4,
+    background: "#0d0e17", color: "#9092b5",
+    border: "1px solid #2c2d46",
+  },
+  actions: { display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap", alignItems: "center" },
+  btnPrimary: {
+    padding: "6px 14px", fontSize: 12, fontWeight: 600,
+    background: "#10B981", color: "#052e1c",
+    border: "0", borderRadius: 6, cursor: "pointer",
+  },
+  btnSecondary: {
+    padding: "6px 12px", fontSize: 12,
+    background: "transparent", color: "#c3c5dd",
+    border: "1px solid #2c2d46", borderRadius: 6, cursor: "pointer",
+  },
+  btnClose: {
+    marginLeft: 6,
+    padding: "2px 8px", fontSize: 14,
+    background: "transparent", color: "#9092b5",
+    border: "1px solid #2c2d46", borderRadius: 6, cursor: "pointer",
+  },
+  body: { flex: 1, overflow: "auto", padding: "12px 0" },
+  empty: { padding: 30, textAlign: "center", color: "#9092b5", fontSize: 13 },
+  code: {
+    margin: 0, padding: 0,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: 12.5, lineHeight: 1.55,
+    color: "#D4D4D8",
+    background: "transparent",
+    whiteSpace: "pre",
+  },
+  lineRow: { display: "grid", gridTemplateColumns: "48px 1fr", gap: 12, padding: "0 18px" },
+  lineNo: {
+    color: "#52525B", textAlign: "right",
+    userSelect: "none",
+    fontVariantNumeric: "tabular-nums",
+  },
+  lineCode: { whiteSpace: "pre-wrap", wordBreak: "break-word" },
+};

frontend/components/FileTree.jsx

@@ -0,0 +1,569 @@
+import React, { useState, useEffect } from "react";
+
+/**
+ * Simple recursive file tree viewer with refresh support
+ * Fetches tree data directly using the API.
+ */
+export default function FileTree({ repo, refreshTrigger, branch }) {
+  const [tree, setTree] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [isSwitchingBranch, setIsSwitchingBranch] = useState(false);
+  const [error, setError] = useState(null);
+  const [localRefresh, setLocalRefresh] = useState(0);
+  // Search query for the in-sidebar filter.  Empty string == no filter.
+  // Filter runs case-insensitively on path basenames *and* full paths
+  // so users can pinpoint a file even in deeply nested folders.
+  const [query, setQuery] = useState("");
+  // Which file is currently focused in the preview panel — populated
+  // by the ``gitpilot:file-opened`` event ChatPanel emits when the
+  // preview finishes loading.  Drives the ◄ marker + active row tint.
+  const [selectedPath, setSelectedPath] = useState(null);
+
+  useEffect(() => {
+    const onOpened = (e) => setSelectedPath(e?.detail?.path || null);
+    const onClosed = () => setSelectedPath(null);
+    const onRefresh = () => setLocalRefresh((n) => n + 1);
+    window.addEventListener("gitpilot:file-opened", onOpened);
+    window.addEventListener("gitpilot:file-closed", onClosed);
+    window.addEventListener("gitpilot:refresh-tree", onRefresh);
+    return () => {
+      window.removeEventListener("gitpilot:file-opened", onOpened);
+      window.removeEventListener("gitpilot:file-closed", onClosed);
+      window.removeEventListener("gitpilot:refresh-tree", onRefresh);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!repo) return;
+
+    // Determine if this is a branch switch (we already have data)
+    const hasExistingData = tree.length > 0;
+    if (hasExistingData) {
+      setIsSwitchingBranch(true);
+    } else {
+      setLoading(true);
+    }
+    setError(null);
+
+    // Construct headers manually
+    let headers = {};
+    try {
+      const token = localStorage.getItem("github_token");
+      if (token) {
+        headers = { Authorization: `Bearer ${token}` };
+      }
+    } catch (e) {
+      console.warn("Unable to read github_token", e);
+    }
+
+    // Add cache busting + selected branch ref
+    const refParam = branch ? `&ref=${encodeURIComponent(branch)}` : "";
+    const cacheBuster = `?_t=${Date.now()}${refParam}`;
+
+    let cancelled = false;
+
+    fetch(`/api/repos/${repo.owner}/${repo.name}/tree${cacheBuster}`, { headers })
+      .then(async (res) => {
+        if (!res.ok) {
+            const errData = await res.json().catch(() => ({}));
+            throw new Error(errData.detail || "Failed to load files");
+        }
+        return res.json();
+      })
+      .then((data) => {
+        if (cancelled) return;
+        if (data.files && Array.isArray(data.files)) {
+          setTree(buildTree(data.files));
+          setError(null);
+        } else {
+          setError("No files found in repository");
+        }
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err.message);
+        console.error("FileTree error:", err);
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setIsSwitchingBranch(false);
+        setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [repo, branch, refreshTrigger, localRefresh]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleRefresh = () => {
+    setLocalRefresh(prev => prev + 1);
+  };
+
+  // Theme matching parent component
+  const theme = {
+    border: "#27272A",
+    textPrimary: "#EDEDED",
+    textSecondary: "#A1A1AA",
+    accent: "#D95C3D",
+    warningText: "#F59E0B",
+    warningBg: "rgba(245, 158, 11, 0.1)",
+    warningBorder: "rgba(245, 158, 11, 0.2)",
+  };
+
+  const styles = {
+    header: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 20px 8px 10px",
+      marginBottom: "8px",
+      borderBottom: `1px solid ${theme.border}`,
+    },
+    headerTitle: {
+      fontSize: "12px",
+      fontWeight: "600",
+      color: theme.textSecondary,
+      textTransform: "uppercase",
+      letterSpacing: "0.5px",
+    },
+    refreshButton: {
+      backgroundColor: "transparent",
+      border: `1px solid ${theme.border}`,
+      color: theme.textSecondary,
+      padding: "4px 8px",
+      borderRadius: "4px",
+      fontSize: "11px",
+      cursor: loading ? "not-allowed" : "pointer",
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      transition: "all 0.2s",
+      opacity: loading ? 0.5 : 1,
+    },
+    switchingBar: {
+      padding: "6px 20px",
+      fontSize: "11px",
+      color: theme.textSecondary,
+      backgroundColor: "rgba(59, 130, 246, 0.06)",
+      borderBottom: `1px solid ${theme.border}`,
+    },
+    loadingText: {
+      padding: "0 20px",
+      color: theme.textSecondary,
+      fontSize: "13px",
+    },
+    errorBox: {
+      padding: "12px 20px",
+      color: theme.warningText,
+      fontSize: "12px",
+      backgroundColor: theme.warningBg,
+      border: `1px solid ${theme.warningBorder}`,
+      borderRadius: "6px",
+      margin: "0 10px",
+    },
+    emptyText: {
+      padding: "0 20px",
+      color: theme.textSecondary,
+      fontSize: "13px",
+    },
+    treeContainer: {
+      fontSize: "13px",
+      color: theme.textSecondary,
+      padding: "0 10px 20px 10px",
+    },
+  };
+
+  return (
+    <div>
+      {/* Header with Refresh Button */}
+      <div style={styles.header}>
+        <span style={styles.headerTitle}>Files</span>
+        <button
+          type="button"
+          style={styles.refreshButton}
+          onClick={handleRefresh}
+          disabled={loading}
+          onMouseOver={(e) => {
+            if (!loading) {
+              e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.05)";
+            }
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            style={{
+              transform: loading ? "rotate(360deg)" : "rotate(0deg)",
+              transition: "transform 0.6s ease",
+            }}
+          >
+            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
+          </svg>
+          {loading ? "..." : "Refresh"}
+        </button>
+      </div>
+
+      {/* Branch switch indicator (shown above existing tree, doesn't clear it) */}
+      {isSwitchingBranch && (
+        <div style={styles.switchingBar}>Loading branch...</div>
+      )}
+
+      {/* Content */}
+      {loading && tree.length === 0 && (
+        <div style={styles.loadingText}>Loading files...</div>
+      )}
+
+      {!loading && !isSwitchingBranch && error && (
+        <div style={styles.errorBox}>{error}</div>
+      )}
+
+      {!loading && !isSwitchingBranch && !error && tree.length === 0 && (
+        <div style={styles.emptyText}>No files found</div>
+      )}
+
+      {tree.length > 0 && (
+        <>
+          {/* In-sidebar file search.  Enterprise repos run to hundreds
+              of files; the explorer needs a quick narrowing affordance
+              before any of the contextual menus matter. */}
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="🔍 Search files…"
+            spellCheck={false}
+            style={{
+              width: "100%", boxSizing: "border-box",
+              margin: "4px 0 8px",
+              padding: "6px 10px", fontSize: 12,
+              background: "#0d0e17", color: "#e4e4e7",
+              border: "1px solid #27272A", borderRadius: 6,
+              outline: "none",
+              fontFamily: "system-ui, sans-serif",
+            }}
+          />
+
+          <div style={{
+            ...styles.treeContainer,
+            opacity: isSwitchingBranch ? 0.5 : 1,
+            transition: "opacity 0.15s ease",
+          }}>
+            {tree.map((node) => (
+              <TreeNode
+                key={node.path}
+                node={node}
+                level={0}
+                filter={query.trim().toLowerCase()}
+                selectedPath={selectedPath}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// Files with these extensions get a "Prepare Run" menu item.  Mirrors
+// the backend's _RUNNABLE_EXTENSIONS so the menu only offers a run
+// where the sandbox planner would actually accept the file.
+const RUNNABLE_FILE_EXTS = new Set(["py", "js", "mjs", "cjs", "sh", "bash"]);
+
+function isRunnableFile(name, type) {
+  if (type === "tree") return false;
+  if (!name || !name.includes(".")) return false;
+  const ext = name.split(".").pop().toLowerCase();
+  return RUNNABLE_FILE_EXTS.has(ext);
+}
+
+// Window-event dispatch helpers — keep FileTree decoupled from
+// ChatPanel.  Same pattern as the existing approval-flow events.
+function dispatchOpenFile(path) {
+  try {
+    window.dispatchEvent(new CustomEvent("gitpilot:open-file", { detail: { path } }));
+  } catch (_e) { /* old browser */ }
+}
+function dispatchOpenInCanvas(path) {
+  try {
+    window.dispatchEvent(new CustomEvent("gitpilot:open-in-canvas", { detail: { path } }));
+  } catch (_e) { /* old browser */ }
+}
+function dispatchRunFile(path) {
+  try {
+    window.dispatchEvent(new CustomEvent("gitpilot:run-file", { detail: { path } }));
+  } catch (_e) { /* old browser */ }
+}
+function dispatchAskAboutFile(path) {
+  try {
+    window.dispatchEvent(new CustomEvent("gitpilot:ask-about-file", { detail: { path } }));
+  } catch (_e) { /* old browser */ }
+}
+function copyToClipboard(text) {
+  if (navigator?.clipboard) navigator.clipboard.writeText(text).catch(() => {});
+}
+
+// Tiny dropdown — positioned absolutely below the row's ⋯ trigger.
+// Closes on outside click or Escape.  Built-in <select> would be
+// faster to write but the visual contract for an enterprise file
+// explorer demands a real menu (icons, separators, descriptions).
+function FileActionsMenu({ path, runnable, onClose }) {
+  React.useEffect(() => {
+    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
+    const onDown = () => onClose?.();
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("mousedown", onDown);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("mousedown", onDown);
+    };
+  }, [onClose]);
+
+  // Menu vocabulary maps 1:1 to the design's recommended verbs.  "Open
+  // Preview" is the calm default; "Open Workspace" widens the panel
+  // for serious reading/editing; "Prepare Run…" surfaces the
+  // ExecutionPlanCard.  Canvas (the runnable split editor) is moved
+  // to the overflow because it's the heaviest mode and shouldn't
+  // compete with Preview / Workspace for attention.
+  const items = [
+    { label: "Open Preview",   onClick: () => dispatchOpenFile(path) },
+    {
+      label: "Open Workspace",
+      onClick: () => window.dispatchEvent(
+        new CustomEvent("gitpilot:open-workspace", { detail: { path } })
+      ),
+    },
+    {
+      label: "Prepare Run…",
+      onClick: () => dispatchRunFile(path),
+      runnable: true,
+      primary: true,
+    },
+    { divider: true },
+    { label: "Ask GitPilot",   onClick: () => dispatchAskAboutFile(path) },
+    { label: "Open in Canvas", onClick: () => dispatchOpenInCanvas(path), runnable: true },
+    { label: "Copy path",      onClick: () => copyToClipboard(path) },
+  ];
+
+  return (
+    <div
+      role="menu"
+      onMouseDown={(e) => e.stopPropagation()}
+      style={{
+        position: "absolute", right: 4, top: 22, zIndex: 50,
+        minWidth: 180,
+        background: "#18181B", border: "1px solid #3F3F46",
+        borderRadius: 6, padding: "4px 0",
+        boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      {items.map((it, i) => {
+        if (it.divider) {
+          return <div key={i} style={{ height: 1, background: "#27272A", margin: "4px 0" }} />;
+        }
+        if (it.runnable && !runnable) return null;
+        return (
+          <button
+            key={i}
+            role="menuitem"
+            type="button"
+            onClick={(e) => { e.stopPropagation(); it.onClick(); onClose?.(); }}
+            style={{
+              width: "100%", textAlign: "left",
+              background: "transparent",
+              color: it.primary ? "#86efac" : "#E4E4E7",
+              border: "none",
+              padding: "6px 12px", fontSize: 12, cursor: "pointer",
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.background = "#27272A"}
+            onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
+          >
+            {it.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// True when ``node`` or any descendant path/basename contains ``filter``.
+// Folders are rendered if any descendant matches so the filter looks
+// like a flat search even though the tree is recursive.
+function _matchesFilter(node, filter) {
+  if (!filter) return true;
+  const inThis =
+    (node.path && node.path.toLowerCase().includes(filter)) ||
+    (node.name && node.name.toLowerCase().includes(filter));
+  if (inThis) return true;
+  if (!node.children) return false;
+  return node.children.some((c) => _matchesFilter(c, filter));
+}
+
+// Recursive Node Component
+function TreeNode({ node, level, filter = "", selectedPath = null }) {
+  const [userExpanded, setUserExpanded] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const isFolder = node.children && node.children.length > 0;
+  const runnable = !isFolder && isRunnableFile(node.name, node.type);
+  const isSelected = !isFolder && selectedPath === node.path;
+
+  // Honor the filter: drop subtrees that don't match anywhere.  When
+  // the filter is active, folders auto-expand so users see the matches
+  // without having to chase carets.
+  if (filter && !_matchesFilter(node, filter)) return null;
+  const expanded = userExpanded || Boolean(filter);
+
+  const icon = isFolder ? (expanded ? "📂" : "📁") : "📄";
+
+  const onRowClick = () => {
+    if (isFolder) setUserExpanded(!userExpanded);
+    else dispatchOpenFile(node.path);
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div
+        onClick={onRowClick}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => { setHovered(false); /* menu closes on outside-click */ }}
+        style={{
+          padding: "4px 0",
+          paddingLeft: `${level * 12}px`,
+          paddingRight: 6,
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          color: isFolder
+            ? "#EDEDED"
+            : (isSelected ? "#86efac" : "#D4D4D8"),
+          whiteSpace: "nowrap",
+          borderRadius: 4,
+          background: isSelected
+            ? "rgba(16,185,129,0.10)"
+            : (hovered ? "#1f1f23" : "transparent"),
+          borderLeft: isSelected ? "2px solid #10B981" : "2px solid transparent",
+        }}
+        title={isFolder ? "" : "Click to open · ⋯ for actions"}
+      >
+        <span style={{ fontSize: "14px", opacity: 0.7 }}>{icon}</span>
+        <span style={{
+          flex: 1, overflow: "hidden", textOverflow: "ellipsis",
+          fontWeight: isSelected ? 600 : 400,
+        }}>
+          {node.name}
+        </span>
+        {/* Selected marker — orient users when scanning a long list. */}
+        {isSelected && (
+          <span style={{ color: "#10B981", fontSize: 11 }}>◄</span>
+        )}
+
+        {/* Per-row ⋯ menu trigger — visible on hover only so the
+            list reads as a clean inventory at rest. */}
+        {!isFolder && hovered && (
+          <button
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              e.stopPropagation();
+              setMenuOpen((v) => !v);
+            }}
+            title="File actions"
+            style={{
+              background: "transparent",
+              border: "1px solid transparent",
+              color: "#A1A1AA",
+              cursor: "pointer",
+              fontSize: 14,
+              lineHeight: 1,
+              padding: "0 6px",
+              borderRadius: 4,
+            }}
+          >
+            ⋯
+          </button>
+        )}
+      </div>
+
+      {menuOpen && (
+        <FileActionsMenu
+          path={node.path}
+          runnable={runnable}
+          onClose={() => setMenuOpen(false)}
+        />
+      )}
+
+      {isFolder && expanded && (
+        <div>
+          {node.children.map(child => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              level={level + 1}
+              filter={filter}
+              selectedPath={selectedPath}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Helper to build tree structure from flat file list
+function buildTree(files) {
+  const root = [];
+  
+  files.forEach(file => {
+    const parts = file.path.split('/');
+    let currentLevel = root;
+    let currentPath = "";
+
+    parts.forEach((part, idx) => {
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+      
+      // Check if node exists at this level
+      let existingNode = currentLevel.find(n => n.name === part);
+      
+      if (!existingNode) {
+        const newNode = {
+          name: part,
+          path: currentPath,
+          type: idx === parts.length - 1 ? file.type : 'tree',
+          children: []
+        };
+        currentLevel.push(newNode);
+        existingNode = newNode;
+      }
+      
+      if (idx < parts.length - 1) {
+        currentLevel = existingNode.children;
+      }
+    });
+  });
+
+  // Sort folders first, then files
+  const sortNodes = (nodes) => {
+    nodes.sort((a, b) => {
+      const aIsFolder = a.children.length > 0;
+      const bIsFolder = b.children.length > 0;
+      if (aIsFolder && !bIsFolder) return -1;
+      if (!aIsFolder && bIsFolder) return 1;
+      return a.name.localeCompare(b.name);
+    });
+    nodes.forEach(n => {
+      if (n.children.length > 0) sortNodes(n.children);
+    });
+  };
+
+  sortNodes(root);
+  return root;
+}

frontend/components/FlowViewer.jsx

@@ -0,0 +1,659 @@
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import ReactFlow, { Background, Controls, MiniMap } from "reactflow";
+import "reactflow/dist/style.css";
+
+/* ------------------------------------------------------------------ */
+/*  Node type → colour mapping                                        */
+/* ------------------------------------------------------------------ */
+const NODE_COLOURS = {
+  agent:      { border: "#ff7a3c", bg: "#20141a" },
+  router:     { border: "#6c8cff", bg: "#141828" },
+  tool:       { border: "#3a3b4d", bg: "#141821" },
+  tool_group: { border: "#3a3b4d", bg: "#141821" },
+  user:       { border: "#4caf88", bg: "#14211a" },
+  output:     { border: "#9c6cff", bg: "#1a1428" },
+};
+const DEFAULT_COLOUR = { border: "#3a3b4d", bg: "#141821" };
+
+function colourFor(type) {
+  return NODE_COLOURS[type] || DEFAULT_COLOUR;
+}
+
+const STYLE_COLOURS = {
+  single_task: "#6c8cff",
+  react_loop: "#ff7a3c",
+  crew_pipeline: "#4caf88",
+};
+
+const STYLE_LABELS = {
+  single_task: "Dispatch",
+  react_loop: "ReAct Loop",
+  crew_pipeline: "Pipeline",
+};
+
+/* ------------------------------------------------------------------ */
+/*  TopologyCard — single clickable topology card                      */
+/* ------------------------------------------------------------------ */
+function TopologyCard({ topology, isActive, onClick }) {
+  const styleColor = STYLE_COLOURS[topology.execution_style] || "#9a9bb0";
+  const agentCount = topology.agents_used?.length || 0;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        ...cardStyles.card,
+        borderColor: isActive ? styleColor : "#1e1f30",
+        backgroundColor: isActive ? `${styleColor}0D` : "#0c0d14",
+      }}
+    >
+      <div style={cardStyles.cardTop}>
+        <span style={cardStyles.icon}>{topology.icon}</span>
+        <span
+          style={{
+            ...cardStyles.styleBadge,
+            color: styleColor,
+            borderColor: `${styleColor}40`,
+          }}
+        >
+          {STYLE_LABELS[topology.execution_style] || topology.execution_style}
+        </span>
+      </div>
+      <div
+        style={{
+          ...cardStyles.name,
+          color: isActive ? "#f5f5f7" : "#c3c5dd",
+        }}
+      >
+        {topology.name}
+      </div>
+      <div style={cardStyles.desc}>{topology.description}</div>
+      <div style={cardStyles.agentCount}>
+        {agentCount} agent{agentCount !== 1 ? "s" : ""}
+      </div>
+    </button>
+  );
+}
+
+const cardStyles = {
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    padding: "10px 12px",
+    borderRadius: 8,
+    border: "1px solid #1e1f30",
+    cursor: "pointer",
+    textAlign: "left",
+    minWidth: 170,
+    maxWidth: 200,
+    flexShrink: 0,
+    transition: "border-color 0.2s, background-color 0.2s",
+  },
+  cardTop: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 6,
+  },
+  icon: {
+    fontSize: 18,
+  },
+  styleBadge: {
+    fontSize: 9,
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    padding: "1px 6px",
+    borderRadius: 4,
+    border: "1px solid",
+  },
+  name: {
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 1.3,
+  },
+  desc: {
+    fontSize: 10,
+    color: "#71717A",
+    lineHeight: 1.3,
+    overflow: "hidden",
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+  },
+  agentCount: {
+    fontSize: 9,
+    color: "#52525B",
+    fontWeight: 600,
+    marginTop: 2,
+  },
+};
+
+/* ------------------------------------------------------------------ */
+/*  TopologyPanel — card grid grouped by category                      */
+/* ------------------------------------------------------------------ */
+function TopologyPanel({
+  topologies,
+  activeTopology,
+  autoMode,
+  autoResult,
+  onSelect,
+  onToggleAuto,
+}) {
+  const systems = topologies.filter((t) => t.category === "system");
+  const pipelines = topologies.filter((t) => t.category === "pipeline");
+
+  return (
+    <div style={panelStyles.root}>
+      {/* Auto-detect toggle */}
+      <div style={panelStyles.autoRow}>
+        <button
+          type="button"
+          onClick={onToggleAuto}
+          style={{
+            ...panelStyles.autoBtn,
+            borderColor: autoMode ? "#ff7a3c" : "#27272A",
+            color: autoMode ? "#ff7a3c" : "#71717A",
+            backgroundColor: autoMode ? "rgba(255, 122, 60, 0.06)" : "transparent",
+          }}
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 6v6l4 2" />
+          </svg>
+          Auto
+        </button>
+        {autoMode && autoResult && (
+          <span style={panelStyles.autoHint}>
+            Detected: {autoResult.icon} {autoResult.name}
+            {autoResult.confidence != null && (
+              <span style={{ opacity: 0.6 }}>
+                {" "}({Math.round(autoResult.confidence * 100)}%)
+              </span>
+            )}
+          </span>
+        )}
+      </div>
+
+      {/* System architectures */}
+      <div style={panelStyles.section}>
+        <div style={panelStyles.sectionLabel}>System Architectures</div>
+        <div style={panelStyles.cardRow}>
+          {systems.map((t) => (
+            <TopologyCard
+              key={t.id}
+              topology={t}
+              isActive={activeTopology === t.id}
+              onClick={() => onSelect(t.id)}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Task pipelines */}
+      <div style={panelStyles.section}>
+        <div style={panelStyles.sectionLabel}>Task Pipelines</div>
+        <div style={panelStyles.cardRow}>
+          {pipelines.map((t) => (
+            <TopologyCard
+              key={t.id}
+              topology={t}
+              isActive={activeTopology === t.id}
+              onClick={() => onSelect(t.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const panelStyles = {
+  root: {
+    padding: "8px 16px 12px",
+    borderBottom: "1px solid #1e1f30",
+    backgroundColor: "#08090e",
+  },
+  autoRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    marginBottom: 10,
+  },
+  autoBtn: {
+    display: "flex",
+    alignItems: "center",
+    gap: 5,
+    padding: "4px 10px",
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    background: "transparent",
+    fontSize: 11,
+    fontWeight: 600,
+    cursor: "pointer",
+    transition: "border-color 0.15s, color 0.15s",
+  },
+  autoHint: {
+    fontSize: 11,
+    color: "#9a9bb0",
+  },
+  section: {
+    marginBottom: 8,
+  },
+  sectionLabel: {
+    fontSize: 9,
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: "0.08em",
+    color: "#52525B",
+    marginBottom: 6,
+  },
+  cardRow: {
+    display: "flex",
+    gap: 8,
+    overflowX: "auto",
+    scrollbarWidth: "none",
+    paddingBottom: 2,
+  },
+};
+
+/* ------------------------------------------------------------------ */
+/*  Main FlowViewer component                                          */
+/* ------------------------------------------------------------------ */
+export default function FlowViewer() {
+  const [nodes, setNodes] = useState([]);
+  const [edges, setEdges] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  // Topology state
+  const [topologies, setTopologies] = useState([]);
+  const [activeTopology, setActiveTopology] = useState(null);
+  const [topologyMeta, setTopologyMeta] = useState(null);
+
+  // Auto-detection state
+  const [autoMode, setAutoMode] = useState(false);
+  const [autoResult, setAutoResult] = useState(null);
+  const [autoTestMessage, setAutoTestMessage] = useState("");
+
+  const initialLoadDone = useRef(false);
+
+  /* ---------- Load topology list on mount ---------- */
+  useEffect(() => {
+    (async () => {
+      try {
+        const [topoRes, prefRes] = await Promise.all([
+          fetch("/api/flow/topologies"),
+          fetch("/api/settings/topology"),
+        ]);
+        if (topoRes.ok) {
+          const data = await topoRes.json();
+          setTopologies(data);
+        }
+        if (prefRes.ok) {
+          const { topology } = await prefRes.json();
+          if (topology) {
+            setActiveTopology(topology);
+          }
+        }
+      } catch (e) {
+        console.warn("Failed to load topologies:", e);
+      }
+      initialLoadDone.current = true;
+    })();
+  }, []);
+
+  /* ---------- Load graph when topology changes ---------- */
+  const loadGraph = useCallback(async (topologyId) => {
+    setLoading(true);
+    setError("");
+    try {
+      const url = topologyId
+        ? `/api/flow/current?topology=${encodeURIComponent(topologyId)}`
+        : "/api/flow/current";
+      const res = await fetch(url);
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to load flow");
+
+      // Track topology metadata from response
+      if (data.topology_id) {
+        setTopologyMeta({
+          id: data.topology_id,
+          name: data.topology_name,
+          icon: data.topology_icon,
+          description: data.topology_description,
+          execution_style: data.execution_style,
+          agents_used: topologies.find((t) => t.id === data.topology_id)?.agents_used || [],
+        });
+      }
+
+      // Build ReactFlow nodes
+      const RFnodes = data.nodes.map((n, i) => {
+        const nodeType = n.type || "default";
+        const colour = colourFor(nodeType);
+        const d = n.data || {};
+
+        const label = d.label || n.label || n.id;
+        const description = d.description || n.description || "";
+        const model = d.model;
+        const mode = d.mode;
+
+        const pos = n.position || {
+          x: 50 + (i % 3) * 250,
+          y: 50 + Math.floor(i / 3) * 180,
+        };
+
+        return {
+          id: n.id,
+          data: {
+            label: (
+              <div style={{ textAlign: "center" }}>
+                <div style={{ fontWeight: 600, marginBottom: 2 }}>
+                  {label}
+                </div>
+                {model && (
+                  <div style={{ fontSize: 9, color: "#6c8cff", marginBottom: 2, fontFamily: "monospace" }}>
+                    {model}
+                  </div>
+                )}
+                {mode && (
+                  <div
+                    style={{
+                      fontSize: 9,
+                      color: mode === "read-only" ? "#4caf88" : mode === "git-ops" ? "#9c6cff" : "#ff7a3c",
+                      marginBottom: 2,
+                    }}
+                  >
+                    {mode}
+                  </div>
+                )}
+                <div style={{ fontSize: 10, color: "#9a9bb0", maxWidth: 160, lineHeight: 1.3 }}>
+                  {description}
+                </div>
+              </div>
+            ),
+          },
+          position: pos,
+          type: "default",
+          style: {
+            borderRadius: 12,
+            padding: "12px 16px",
+            border: `2px solid ${colour.border}`,
+            background: colour.bg,
+            color: "#f5f5f7",
+            fontSize: 13,
+            minWidth: 180,
+            maxWidth: 220,
+          },
+        };
+      });
+
+      // Build ReactFlow edges
+      const RFedges = data.edges.map((e) => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        label: e.label,
+        animated: e.animated !== false,
+        style: { stroke: "#7a7b8e", strokeWidth: 2 },
+        labelStyle: { fill: "#c3c5dd", fontSize: 11, fontWeight: 500 },
+        labelBgStyle: { fill: "#101117", fillOpacity: 0.9 },
+        ...(e.type === "bidirectional" && {
+          markerEnd: { type: "arrowclosed", color: "#7a7b8e" },
+          markerStart: { type: "arrowclosed", color: "#7a7b8e" },
+          animated: false,
+          style: { stroke: "#555670", strokeWidth: 1.5, strokeDasharray: "5 5" },
+        }),
+      }));
+
+      setNodes(RFnodes);
+      setEdges(RFedges);
+    } catch (e) {
+      console.error(e);
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [topologies]);
+
+  // Load graph whenever activeTopology changes
+  useEffect(() => {
+    loadGraph(activeTopology);
+  }, [activeTopology, loadGraph]);
+
+  /* ---------- Topology selection handler ---------- */
+  const handleTopologyChange = useCallback(
+    async (newTopologyId) => {
+      setActiveTopology(newTopologyId);
+      setAutoMode(false); // Manual selection disables auto
+      // Persist preference (fire-and-forget)
+      try {
+        await fetch("/api/settings/topology", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ topology: newTopologyId }),
+        });
+      } catch (e) {
+        console.warn("Failed to save topology preference:", e);
+      }
+    },
+    []
+  );
+
+  /* ---------- Auto-detection ---------- */
+  const handleToggleAuto = useCallback(() => {
+    setAutoMode((prev) => !prev);
+    if (!autoMode) {
+      setAutoResult(null);
+    }
+  }, [autoMode]);
+
+  const handleAutoClassify = useCallback(
+    async (message) => {
+      if (!message.trim()) return;
+      try {
+        const res = await fetch("/api/flow/classify", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message }),
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        const recommendedId = data.recommended_topology;
+        const topo = topologies.find((t) => t.id === recommendedId);
+        setAutoResult({
+          id: recommendedId,
+          name: topo?.name || recommendedId,
+          icon: topo?.icon || "",
+          confidence: data.confidence,
+          alternatives: data.alternatives || [],
+        });
+        setActiveTopology(recommendedId);
+      } catch (e) {
+        console.warn("Auto-classify failed:", e);
+      }
+    },
+    [topologies]
+  );
+
+  // Debounced auto-classify when test message changes
+  useEffect(() => {
+    if (!autoMode || !autoTestMessage.trim()) return;
+    const t = setTimeout(() => handleAutoClassify(autoTestMessage), 500);
+    return () => clearTimeout(t);
+  }, [autoTestMessage, autoMode, handleAutoClassify]);
+
+  /* ---------- Render ---------- */
+  const activeStyleColor = STYLE_COLOURS[topologyMeta?.execution_style] || "#9a9bb0";
+
+  return (
+    <div className="flow-root">
+      {/* Header */}
+      <div className="flow-header">
+        <div>
+          <h1>Agent Workflow</h1>
+          <p>
+            Visual view of the multi-agent system that GitPilot uses to
+            plan and apply changes to your repositories.
+          </p>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          {topologyMeta && (
+            <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "#9a9bb0" }}>
+              <span style={{ fontSize: 18 }}>{topologyMeta.icon}</span>
+              <span style={{ fontWeight: 600, color: "#e0e1f0" }}>{topologyMeta.name}</span>
+              <span
+                style={{
+                  padding: "2px 8px",
+                  borderRadius: 6,
+                  border: `1px solid ${activeStyleColor}40`,
+                  color: activeStyleColor,
+                  fontSize: 10,
+                  fontWeight: 700,
+                  textTransform: "uppercase",
+                }}
+              >
+                {STYLE_LABELS[topologyMeta.execution_style] || topologyMeta.execution_style}
+              </span>
+              <span>{topologyMeta.agents_used?.length || 0} agents</span>
+            </div>
+          )}
+          {loading && <span style={{ fontSize: 11, color: "#6c8cff" }}>Loading...</span>}
+        </div>
+      </div>
+
+      {/* Topology selector panel */}
+      {topologies.length > 0 && (
+        <TopologyPanel
+          topologies={topologies}
+          activeTopology={activeTopology}
+          autoMode={autoMode}
+          autoResult={autoResult}
+          onSelect={handleTopologyChange}
+          onToggleAuto={handleToggleAuto}
+        />
+      )}
+
+      {/* Auto-detection test input (shown when auto mode is on) */}
+      {autoMode && (
+        <div style={autoInputStyles.wrap}>
+          <div style={autoInputStyles.label}>
+            Test auto-detection: type a task description to see which topology is recommended
+          </div>
+          <input
+            type="text"
+            placeholder='e.g. "Fix the 403 error in auth middleware" or "Add a REST endpoint for users"'
+            value={autoTestMessage}
+            onChange={(e) => setAutoTestMessage(e.target.value)}
+            style={autoInputStyles.input}
+          />
+          {autoResult && autoResult.alternatives?.length > 0 && (
+            <div style={autoInputStyles.altRow}>
+              <span style={{ color: "#52525B", fontSize: 10 }}>Alternatives:</span>
+              {autoResult.alternatives.slice(0, 3).map((alt) => {
+                const altTopo = topologies.find((t) => t.id === alt.id);
+                return (
+                  <button
+                    key={alt.id}
+                    type="button"
+                    style={autoInputStyles.altBtn}
+                    onClick={() => handleTopologyChange(alt.id)}
+                  >
+                    {altTopo?.icon} {altTopo?.name || alt.id}
+                    <span style={{ opacity: 0.5 }}>
+                      {alt.confidence != null ? ` ${Math.round(alt.confidence * 100)}%` : ""}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Description bar */}
+      {topologyMeta && topologyMeta.description && !autoMode && (
+        <div
+          style={{
+            padding: "8px 16px",
+            fontSize: 12,
+            color: "#9a9bb0",
+            background: "#0a0b12",
+            borderBottom: "1px solid #1e1f30",
+          }}
+        >
+          {topologyMeta.icon} {topologyMeta.description}
+        </div>
+      )}
+
+      {/* ReactFlow canvas */}
+      <div className="flow-canvas">
+        {error ? (
+          <div className="flow-error">
+            <div className="error-icon">!!!</div>
+            <div className="error-text">{error}</div>
+          </div>
+        ) : (
+          <ReactFlow nodes={nodes} edges={edges} fitView>
+            <Background color="#272832" gap={16} />
+            <MiniMap
+              nodeColor={(node) => {
+                const border = node.style?.border || "";
+                if (border.includes("#ff7a3c")) return "#ff7a3c";
+                if (border.includes("#6c8cff")) return "#6c8cff";
+                if (border.includes("#4caf88")) return "#4caf88";
+                if (border.includes("#9c6cff")) return "#9c6cff";
+                return "#3a3b4d";
+              }}
+              maskColor="rgba(0, 0, 0, 0.6)"
+            />
+            <Controls />
+          </ReactFlow>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const autoInputStyles = {
+  wrap: {
+    padding: "8px 16px 10px",
+    borderBottom: "1px solid #1e1f30",
+    backgroundColor: "#0c0d14",
+  },
+  label: {
+    fontSize: 10,
+    color: "#71717A",
+    marginBottom: 6,
+  },
+  input: {
+    width: "100%",
+    padding: "8px 12px",
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    background: "#08090e",
+    color: "#e0e1f0",
+    fontSize: 12,
+    fontFamily: "monospace",
+    outline: "none",
+    boxSizing: "border-box",
+  },
+  altRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 6,
+    flexWrap: "wrap",
+  },
+  altBtn: {
+    padding: "2px 8px",
+    borderRadius: 4,
+    border: "1px solid #27272A",
+    background: "transparent",
+    color: "#9a9bb0",
+    fontSize: 10,
+    cursor: "pointer",
+  },
+};

frontend/components/Footer.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <footer className="gp-footer">
+      <div className="gp-footer-left">
+        <a
+          href="https://github.com/ruslanmv/gitpilot"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            color: "inherit",
+            textDecoration: "none",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            transition: "color 0.2s ease",
+          }}
+          onMouseOver={(e) => {
+            e.currentTarget.style.color = "#ff7a3c";
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.color = "#c3c5dd";
+          }}
+        >
+          ⭐ Star our GitHub project
+        </a>
+      </div>
+      <div className="gp-footer-right">
+        <span>© 2025 GitPilot</span>
+        <a
+          href="https://github.com/ruslanmv/gitpilot"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Docs
+        </a>
+        <a
+          href="https://github.com/ruslanmv/gitpilot"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          GitHub
+        </a>
+      </div>
+    </footer>
+  );
+}

frontend/components/LlmSettings.jsx

@@ -0,0 +1,623 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { testProvider } from "../utils/api";
+
+const PROVIDERS = ["ollabridge", "openai", "claude", "watsonx", "ollama"];
+
+const PROVIDER_LABELS = {
+  ollabridge: "OllaBridge Cloud",
+  openai: "OpenAI",
+  claude: "Claude",
+  watsonx: "Watsonx",
+  ollama: "Ollama",
+};
+
+const AUTH_MODES = [
+  { id: "device", label: "Device Pairing", icon: "📱" },
+  { id: "apikey", label: "API Key", icon: "🔑" },
+  { id: "local", label: "Local Trust", icon: "🏠" },
+];
+
+function LoadingState({ loadingMessage, loadingSlow, onRetry }) {
+  return (
+    <div className="settings-loading-shell">
+      <div className="settings-loading-card">
+        <div className="settings-loading-spinner" aria-hidden="true" />
+        <h1>AI Providers</h1>
+        <div className="settings-loading-subtitle">Admin / LLM Settings</div>
+        <p className="settings-loading-text">{loadingMessage}</p>
+
+        {loadingSlow && (
+          <div className="settings-loading-slow">
+            <p>
+              This is taking longer than expected. The backend may still be
+              starting or the settings endpoint may be slow.
+            </p>
+            <button
+              type="button"
+              className="settings-secondary-btn"
+              onClick={onRetry}
+            >
+              Retry
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function LlmSettings() {
+  const [settings, setSettings] = useState(null);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [loadingSlow, setLoadingSlow] = useState(false);
+
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [savedMsg, setSavedMsg] = useState("");
+
+  const [modelsByProvider, setModelsByProvider] = useState({});
+  const [modelsError, setModelsError] = useState("");
+  const [loadingModelsFor, setLoadingModelsFor] = useState("");
+
+  const [testResult, setTestResult] = useState(null);
+  const [testing, setTesting] = useState(false);
+
+  const [authMode, setAuthMode] = useState("local");
+  const [pairCode, setPairCode] = useState("");
+  const [pairing, setPairing] = useState(false);
+  const [pairResult, setPairResult] = useState(null);
+
+  const loadingMessage = useMemo(() => {
+    if (loadingSlow) {
+      return "Still loading provider configuration…";
+    }
+    return "Loading current configuration…";
+  }, [loadingSlow]);
+
+  const loadSettings = async () => {
+    setInitialLoading(true);
+    setError("");
+    setLoadingSlow(false);
+
+    let slowTimer;
+    try {
+      slowTimer = window.setTimeout(() => {
+        setLoadingSlow(true);
+      }, 1500);
+
+      const res = await fetch("/api/settings");
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to load settings");
+      }
+
+      setSettings(data);
+    } catch (e) {
+      console.error(e);
+      setError(e.message || "Failed to load settings");
+    } finally {
+      window.clearTimeout(slowTimer);
+      setInitialLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const updateField = (section, field, value) => {
+    setSettings((prev) => ({
+      ...prev,
+      [section]: {
+        ...prev[section],
+        [field]: value,
+      },
+    }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError("");
+    setSavedMsg("");
+
+    try {
+      const res = await fetch("/api/settings/llm", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(settings),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to save settings");
+
+      setSettings(data);
+      setSavedMsg("Settings saved successfully!");
+      setTimeout(() => setSavedMsg(""), 3000);
+    } catch (e) {
+      console.error(e);
+      setError(e.message || "Failed to save settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const loadModelsForProvider = async (provider) => {
+    setModelsError("");
+    setLoadingModelsFor(provider);
+
+    try {
+      const res = await fetch(`/api/settings/models?provider=${provider}`);
+      const data = await res.json();
+
+      if (!res.ok || data.error) {
+        throw new Error(data.error || "Failed to load models");
+      }
+
+      setModelsByProvider((prev) => ({
+        ...prev,
+        [provider]: data.models || [],
+      }));
+    } catch (e) {
+      console.error(e);
+      setModelsError(e.message || "Failed to load models");
+    } finally {
+      setLoadingModelsFor("");
+    }
+  };
+
+  const handlePair = async () => {
+    if (!pairCode.trim()) return;
+
+    setPairing(true);
+    setPairResult(null);
+
+    try {
+      const baseUrl =
+        settings?.ollabridge?.base_url || "https://ruslanmv-ollabridge.hf.space";
+
+      const res = await fetch("/api/ollabridge/pair", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ base_url: baseUrl, code: pairCode.trim() }),
+      });
+
+      const data = await res.json();
+
+      if (data.success) {
+        setPairResult({ ok: true, message: "Paired successfully!" });
+        if (data.token) {
+          updateField("ollabridge", "api_key", data.token);
+        }
+      } else {
+        setPairResult({
+          ok: false,
+          message: data.error || "Pairing failed",
+        });
+      }
+    } catch (e) {
+      setPairResult({ ok: false, message: e.message || "Pairing failed" });
+    } finally {
+      setPairing(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setTestResult(null);
+
+    try {
+      const activeProvider = settings?.provider || "ollama";
+      const config = { provider: activeProvider };
+
+      if (activeProvider === "openai" && settings?.openai) {
+        config.openai = {
+          api_key: settings.openai.api_key,
+          base_url: settings.openai.base_url,
+          model: settings.openai.model,
+        };
+      } else if (activeProvider === "claude" && settings?.claude) {
+        config.claude = {
+          api_key: settings.claude.api_key,
+          base_url: settings.claude.base_url,
+          model: settings.claude.model,
+        };
+      } else if (activeProvider === "watsonx" && settings?.watsonx) {
+        config.watsonx = {
+          api_key: settings.watsonx.api_key,
+          project_id: settings.watsonx.project_id,
+          base_url: settings.watsonx.base_url,
+          model_id: settings.watsonx.model_id,
+        };
+      } else if (activeProvider === "ollama" && settings?.ollama) {
+        config.ollama = {
+          base_url: settings.ollama.base_url,
+          model: settings.ollama.model,
+        };
+      } else if (activeProvider === "ollabridge" && settings?.ollabridge) {
+        config.ollabridge = {
+          base_url: settings.ollabridge.base_url,
+          model: settings.ollabridge.model,
+          api_key: settings.ollabridge.api_key,
+        };
+      }
+
+      const result = await testProvider(config);
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({
+        health: "error",
+        warning: err.message || "Test failed",
+      });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  if (initialLoading) {
+    return (
+      <LoadingState
+        loadingMessage={loadingMessage}
+        loadingSlow={loadingSlow}
+        onRetry={loadSettings}
+      />
+    );
+  }
+
+  if (!settings) {
+    return (
+      <div className="settings-root">
+        <div className="settings-inline-error-card">
+          <h1>AI Providers</h1>
+          <div className="settings-loading-subtitle">Admin / LLM Settings</div>
+          <p className="settings-error-text">
+            {error || "Unable to load current configuration."}
+          </p>
+          <button
+            type="button"
+            className="settings-secondary-btn"
+            onClick={loadSettings}
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const { provider } = settings;
+  const availableModels = modelsByProvider[provider] || [];
+
+  return (
+    <div className="settings-root">
+      <h1>AI Providers</h1>
+      <p className="settings-muted">
+        Choose which LLM provider GitPilot should use for planning and agent
+        workflows. Provider settings are stored on the server.
+      </p>
+
+      {error && <div className="settings-error-banner">{error}</div>}
+      {savedMsg && <div className="settings-success-banner">{savedMsg}</div>}
+
+      <div className="settings-card">
+        <label className="settings-label">Active provider</label>
+        <div className="settings-provider-tabs">
+          {PROVIDERS.map((p) => (
+            <button
+              key={p}
+              type="button"
+              className={
+                "settings-provider-tab" +
+                (provider === p ? " settings-provider-tab-active" : "")
+              }
+              onClick={() => setSettings((prev) => ({ ...prev, provider: p }))}
+            >
+              {PROVIDER_LABELS[p] || p}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {provider === "ollabridge" && (
+        <div className="settings-card">
+          <div className="settings-title">OllaBridge Cloud Configuration</div>
+          <div className="settings-hint" style={{ marginBottom: 12 }}>
+            Connect to OllaBridge Cloud or any OllaBridge instance for LLM
+            inference. No API key required for public endpoints.
+          </div>
+
+          <label className="settings-label">Authentication Mode</label>
+          <div className="ob-auth-tabs">
+            {AUTH_MODES.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                className={
+                  "ob-auth-tab" +
+                  (authMode === m.id ? " ob-auth-tab-active" : "")
+                }
+                onClick={() => setAuthMode(m.id)}
+              >
+                <span className="ob-auth-tab-icon">{m.icon}</span>
+                <span>{m.label}</span>
+              </button>
+            ))}
+          </div>
+
+          {authMode === "device" && (
+            <div className="ob-auth-panel">
+              <div className="ob-auth-desc">
+                Enter the pairing code from your OllaBridge console and click
+                Pair.
+              </div>
+              <div className="ob-pair-row">
+                <input
+                  className="settings-input ob-pair-input"
+                  type="text"
+                  maxLength={9}
+                  placeholder="ABCD-1234"
+                  value={pairCode}
+                  onChange={(e) => setPairCode(e.target.value.toUpperCase())}
+                  onKeyDown={(e) => e.key === "Enter" && handlePair()}
+                />
+                <button
+                  type="button"
+                  className="ob-pair-btn"
+                  onClick={handlePair}
+                  disabled={pairing || !pairCode.trim()}
+                >
+                  {pairing ? "Pairing…" : "Pair"}
+                </button>
+              </div>
+              {pairResult && (
+                <div
+                  className={
+                    pairResult.ok ? "settings-success-banner" : "settings-error-banner"
+                  }
+                >
+                  {pairResult.message}
+                </div>
+              )}
+            </div>
+          )}
+
+          <label className="settings-label">Base URL</label>
+          <input
+            className="settings-input"
+            value={settings.ollabridge?.base_url || ""}
+            onChange={(e) =>
+              updateField("ollabridge", "base_url", e.target.value)
+            }
+            placeholder="https://your-ollabridge-endpoint"
+          />
+
+          {(authMode === "apikey" || authMode === "local") && (
+            <>
+              <label className="settings-label">API Key</label>
+              <input
+                className="settings-input"
+                type="password"
+                value={settings.ollabridge?.api_key || ""}
+                onChange={(e) =>
+                  updateField("ollabridge", "api_key", e.target.value)
+                }
+                placeholder="Optional API key"
+              />
+            </>
+          )}
+
+          <label className="settings-label">Model</label>
+          <div className="settings-inline-row">
+            <input
+              className="settings-input"
+              value={settings.ollabridge?.model || ""}
+              onChange={(e) =>
+                updateField("ollabridge", "model", e.target.value)
+              }
+              placeholder="qwen2.5:1.5b"
+            />
+            <button
+              type="button"
+              className="settings-secondary-btn"
+              onClick={() => loadModelsForProvider("ollabridge")}
+              disabled={loadingModelsFor === "ollabridge"}
+            >
+              {loadingModelsFor === "ollabridge" ? "Loading…" : "Load Models"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {provider === "openai" && (
+        <div className="settings-card">
+          <div className="settings-title">OpenAI Configuration</div>
+
+          <label className="settings-label">API Key</label>
+          <input
+            className="settings-input"
+            type="password"
+            value={settings.openai?.api_key || ""}
+            onChange={(e) => updateField("openai", "api_key", e.target.value)}
+            placeholder="sk-..."
+          />
+
+          <label className="settings-label">Base URL</label>
+          <input
+            className="settings-input"
+            value={settings.openai?.base_url || ""}
+            onChange={(e) => updateField("openai", "base_url", e.target.value)}
+            placeholder="Optional custom base URL"
+          />
+
+          <label className="settings-label">Model</label>
+          <input
+            className="settings-input"
+            value={settings.openai?.model || ""}
+            onChange={(e) => updateField("openai", "model", e.target.value)}
+            placeholder="gpt-4o-mini"
+          />
+        </div>
+      )}
+
+      {provider === "claude" && (
+        <div className="settings-card">
+          <div className="settings-title">Claude Configuration</div>
+
+          <label className="settings-label">API Key</label>
+          <input
+            className="settings-input"
+            type="password"
+            value={settings.claude?.api_key || ""}
+            onChange={(e) => updateField("claude", "api_key", e.target.value)}
+            placeholder="Anthropic API key"
+          />
+
+          <label className="settings-label">Base URL</label>
+          <input
+            className="settings-input"
+            value={settings.claude?.base_url || ""}
+            onChange={(e) => updateField("claude", "base_url", e.target.value)}
+            placeholder="Optional custom base URL"
+          />
+
+          <label className="settings-label">Model</label>
+          <input
+            className="settings-input"
+            value={settings.claude?.model || ""}
+            onChange={(e) => updateField("claude", "model", e.target.value)}
+            placeholder="claude-sonnet-4-5"
+          />
+        </div>
+      )}
+
+      {provider === "watsonx" && (
+        <div className="settings-card">
+          <div className="settings-title">Watsonx Configuration</div>
+
+          <label className="settings-label">API Key</label>
+          <input
+            className="settings-input"
+            type="password"
+            value={settings.watsonx?.api_key || ""}
+            onChange={(e) => updateField("watsonx", "api_key", e.target.value)}
+            placeholder="Watsonx API key"
+          />
+
+          <label className="settings-label">Project ID</label>
+          <input
+            className="settings-input"
+            value={settings.watsonx?.project_id || ""}
+            onChange={(e) =>
+              updateField("watsonx", "project_id", e.target.value)
+            }
+            placeholder="Watsonx project ID"
+          />
+
+          <label className="settings-label">Base URL</label>
+          <input
+            className="settings-input"
+            value={settings.watsonx?.base_url || ""}
+            onChange={(e) => updateField("watsonx", "base_url", e.target.value)}
+            placeholder="https://api.watsonx.ai/v1"
+          />
+
+          <label className="settings-label">Model</label>
+          <input
+            className="settings-input"
+            value={settings.watsonx?.model_id || ""}
+            onChange={(e) =>
+              updateField("watsonx", "model_id", e.target.value)
+            }
+            placeholder="meta-llama/llama-3-3-70b-instruct"
+          />
+        </div>
+      )}
+
+      {provider === "ollama" && (
+        <div className="settings-card">
+          <div className="settings-title">Ollama Configuration</div>
+
+          <label className="settings-label">Base URL</label>
+          <input
+            className="settings-input"
+            value={settings.ollama?.base_url || ""}
+            onChange={(e) => updateField("ollama", "base_url", e.target.value)}
+            placeholder="http://localhost:11434"
+          />
+
+          <label className="settings-label">Model</label>
+          <div className="settings-inline-row">
+            <input
+              className="settings-input"
+              value={settings.ollama?.model || ""}
+              onChange={(e) => updateField("ollama", "model", e.target.value)}
+              placeholder="llama3"
+            />
+            <button
+              type="button"
+              className="settings-secondary-btn"
+              onClick={() => loadModelsForProvider("ollama")}
+              disabled={loadingModelsFor === "ollama"}
+            >
+              {loadingModelsFor === "ollama" ? "Loading…" : "Load Models"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {availableModels.length > 0 && (
+        <div className="settings-card">
+          <div className="settings-title">Available Models</div>
+          <div className="settings-model-list">
+            {availableModels.map((model) => (
+              <button
+                key={model}
+                type="button"
+                className="settings-model-chip"
+                onClick={() => updateField(provider, "model", model)}
+              >
+                {model}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {modelsError && <div className="settings-error-banner">{modelsError}</div>}
+
+      {testResult && (
+        <div
+          className={
+            testResult.health === "ok"
+              ? "settings-success-banner"
+              : "settings-error-banner"
+          }
+        >
+          {testResult.health === "ok"
+            ? testResult.details || "Provider connection successful."
+            : testResult.warning || "Provider connection failed."}
+        </div>
+      )}
+
+      <div className="settings-actions">
+        <button
+          type="button"
+          className="settings-save-btn"
+          onClick={handleSave}
+          disabled={saving}
+        >
+          {saving ? "Saving…" : "Save Settings"}
+        </button>
+
+        <button
+          type="button"
+          className="settings-secondary-btn"
+          onClick={handleTestConnection}
+          disabled={testing}
+        >
+          {testing ? "Testing…" : "Test Connection"}
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/components/LoginPage.jsx

@@ -0,0 +1,544 @@
+// frontend/components/LoginPage.jsx
+import React, { useState, useEffect, useRef } from "react";
+import { apiUrl, safeFetchJSON } from "../utils/api.js";
+import { initApp } from "../utils/appInit.js";
+
+/**
+ * GitPilot – Enterprise Agentic Login
+ * Theme: "Claude Code" / Anthropic Enterprise (Dark + Warm Orange)
+ */
+
+export default function LoginPage({ onAuthenticated, backendReady = false }) {
+  // Auth State
+  const [authProcessing, setAuthProcessing] = useState(false);
+  const [error, setError] = useState("");
+
+  // Mode State: 'loading' | 'web' (Has Secret) | 'device' (No Secret)
+  const [mode, setMode] = useState("loading");
+
+  // Device Flow State
+  const [deviceData, setDeviceData] = useState(null);
+  const pollTimer = useRef(null);
+  const stopPolling = useRef(false); // Flag to safely stop async polling
+
+  // Web Flow State
+  const [missingClientId, setMissingClientId] = useState(false);
+
+  // REF FIX: Prevents React StrictMode from running the auth exchange twice
+  const processingRef = useRef(false);
+  const authCheckDone = useRef(false);
+
+  // 1. Initialization Effect — runs once on mount AND when backendReady changes
+  useEffect(() => {
+    // Skip if already resolved
+    if (authCheckDone.current && mode !== "loading") return;
+
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get("code");
+    const state = params.get("state");
+
+    // A. If returning from GitHub (Web Flow Callback)
+    if (code) {
+      if (!processingRef.current) {
+        processingRef.current = true;
+        setMode("web");
+        consumeOAuthCallback(code, state);
+      }
+      return;
+    }
+
+    // B. Use the shared singleton init — reuses App.jsx's result.
+    // No duplicate /api/auth/status calls, no separate retry loops.
+    initApp().then((result) => {
+      authCheckDone.current = true;
+      if (result.ready) {
+        setError("");
+        setMode(result.authMode === "web" ? "web" : "device");
+      } else {
+        // Backend unreachable — allow device flow as fallback
+        setError(result.error || "Backend unavailable");
+        setMode("device");
+      }
+    });
+
+    // Cleanup polling on unmount
+    return () => {
+      stopPolling.current = true;
+      if (pollTimer.current) clearTimeout(pollTimer.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [backendReady]);
+
+  // ===========================================================================
+  // WEB FLOW LOGIC (Standard OAuth2)
+  // ===========================================================================
+
+  async function consumeOAuthCallback(code, state) {
+    const expectedState = sessionStorage.getItem("gitpilot_oauth_state");
+    if (state && expectedState && expectedState !== state) {
+      console.warn("OAuth state mismatch - proceeding with caution.");
+    }
+
+    setAuthProcessing(true);
+    setError("");
+    window.history.replaceState({}, document.title, window.location.pathname);
+
+    try {
+      const data = await safeFetchJSON(apiUrl("/api/auth/callback"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code, state: state || "" }),
+      });
+
+      handleSuccess(data);
+    } catch (err) {
+      console.error("Login Error:", err);
+      setError(err instanceof Error ? err.message : "Login failed.");
+      setAuthProcessing(false);
+    }
+  }
+
+  async function handleSignInWithGitHub() {
+    setError("");
+    setMissingClientId(false);
+    setAuthProcessing(true);
+
+    try {
+      const data = await safeFetchJSON(apiUrl("/api/auth/url"));
+
+      if (data.state) {
+        sessionStorage.setItem("gitpilot_oauth_state", data.state);
+      }
+
+      window.location.href = data.authorization_url;
+    } catch (err) {
+      console.error("Auth Start Error:", err);
+      // Check for missing client ID (404/500 errors)
+      if (err.message && (err.message.includes('404') || err.message.includes('500'))) {
+        setMissingClientId(true);
+      } else {
+        setError(err instanceof Error ? err.message : "Could not start sign-in.");
+      }
+      setAuthProcessing(false);
+    }
+  }
+
+  // ===========================================================================
+  // DEVICE FLOW LOGIC (No Client Secret Required)
+  // ===========================================================================
+
+  const startDeviceFlow = async () => {
+    setError("");
+    setAuthProcessing(true);
+    stopPolling.current = false; // Reset stop flag
+
+    try {
+      const data = await safeFetchJSON(apiUrl("/api/auth/device/code"), { method: "POST" });
+
+      // Handle Errors
+      if (data.error) {
+        if (data.error.includes("400") || data.error.includes("Bad Request")) {
+           throw new Error("Device Flow is disabled in GitHub. Please go to your GitHub App Settings > 'General' > 'Identifying and authorizing users' and check the box 'Enable Device Flow'.");
+        }
+        throw new Error(data.error);
+      }
+
+      if (!data.device_code) throw new Error("Invalid device code response");
+
+      setDeviceData(data);
+      setAuthProcessing(false);
+
+      // Start Polling (Recursive Timeout Pattern)
+      pollDeviceToken(data.device_code, data.interval || 5);
+
+    } catch (err) {
+      setError(err.message);
+      setAuthProcessing(false);
+    }
+  };
+
+  const pollDeviceToken = async (deviceCode, interval) => {
+    if (stopPolling.current) return;
+
+    try {
+      const response = await fetch(apiUrl("/api/auth/device/poll"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ device_code: deviceCode })
+      });
+
+      // 1. Success (200)
+      if (response.status === 200) {
+        const data = await response.json();
+        handleSuccess(data);
+        return;
+      }
+
+      // 2. Pending (202) -> Continue Polling
+      if (response.status === 202) {
+        // Schedule next poll
+        pollTimer.current = setTimeout(
+            () => pollDeviceToken(deviceCode, interval),
+            interval * 1000
+        );
+        return;
+      }
+
+      // 3. Error (4xx/5xx) -> Stop Polling & Show Error
+      const errData = await response.json().catch(() => ({ error: "Unknown polling error" }));
+
+      // Special case: If it's just a 'slow_down' warning (sometimes 400), we just wait longer
+      if (errData.error === "slow_down") {
+          pollTimer.current = setTimeout(
+            () => pollDeviceToken(deviceCode, interval + 5),
+            (interval + 5) * 1000
+          );
+          return;
+      }
+
+      // Terminal errors
+      throw new Error(errData.error || `Polling failed: ${response.status}`);
+
+    } catch (e) {
+      console.error("Poll error:", e);
+      if (!stopPolling.current) {
+        setError(e.message || "Failed to connect to authentication server.");
+        setDeviceData(null); // Return to initial state
+      }
+    }
+  };
+
+  const handleManualCheck = async () => {
+    if (!deviceData?.device_code) return;
+
+    try {
+        const response = await fetch(apiUrl("/api/auth/device/poll"), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ device_code: deviceData.device_code })
+        });
+
+        if (response.status === 200) {
+            const data = await response.json();
+            handleSuccess(data);
+        } else if (response.status === 202) {
+            // Visual feedback for pending state
+            const btn = document.getElementById("manual-check-btn");
+            if (btn) {
+                const originalText = btn.innerText;
+                btn.innerText = "Still Pending...";
+                btn.disabled = true;
+                setTimeout(() => {
+                    btn.innerText = originalText;
+                    btn.disabled = false;
+                }, 2000);
+            }
+        }
+    } catch (e) {
+        console.error("Manual check failed", e);
+    }
+  };
+
+  const handleCancelDeviceFlow = () => {
+    stopPolling.current = true;
+    if (pollTimer.current) clearTimeout(pollTimer.current);
+    setDeviceData(null);
+    setError("");
+  };
+
+  // ===========================================================================
+  // SHARED HELPERS
+  // ===========================================================================
+
+  function handleSuccess(data) {
+    stopPolling.current = true; // Ensure polling stops
+    if (pollTimer.current) clearTimeout(pollTimer.current);
+
+    if (!data.access_token || !data.user) {
+      setError("Server returned incomplete session data.");
+      return;
+    }
+
+    try {
+      localStorage.setItem("github_token", data.access_token);
+      localStorage.setItem("github_user", JSON.stringify(data.user));
+    } catch (e) {
+      console.warn("LocalStorage access denied:", e);
+    }
+
+    if (typeof onAuthenticated === "function") {
+      onAuthenticated({
+        access_token: data.access_token,
+        user: data.user,
+      });
+    }
+  }
+
+  // --- Design Token System ---
+  const theme = {
+    bg: "#131316",         
+    cardBg: "#1C1C1F",     
+    border: "#27272A",     
+    accent: "#D95C3D",     
+    accentHover: "#C44F32",
+    textPrimary: "#EDEDED",
+    textSecondary: "#A1A1AA",
+    font: '"Söhne", "Inter", -apple-system, sans-serif',
+  };
+
+  const styles = {
+    container: {
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: theme.bg,
+      fontFamily: theme.font,
+      color: theme.textPrimary,
+      letterSpacing: "-0.01em",
+    },
+    card: {
+      backgroundColor: theme.cardBg,
+      width: "100%",
+      maxWidth: "440px",
+      borderRadius: "12px",
+      border: `1px solid ${theme.border}`,
+      boxShadow: "0 24px 48px -12px rgba(0, 0, 0, 0.6)",
+      padding: "48px 40px",
+      textAlign: "center",
+      position: "relative",
+    },
+    logoBadge: {
+      width: "48px",
+      height: "48px",
+      backgroundColor: "rgba(217, 92, 61, 0.15)",
+      color: theme.accent,
+      borderRadius: "10px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "22px",
+      fontWeight: "700",
+      margin: "0 auto 32px auto",
+      border: "1px solid rgba(217, 92, 61, 0.2)",
+    },
+    h1: {
+      fontSize: "24px",
+      fontWeight: "600",
+      marginBottom: "12px",
+      color: theme.textPrimary,
+    },
+    p: {
+      fontSize: "14px",
+      color: theme.textSecondary,
+      lineHeight: "1.6",
+      marginBottom: "40px",
+    },
+    button: {
+      width: "100%",
+      height: "48px",
+      backgroundColor: theme.accent,
+      color: "#FFFFFF",
+      border: "none",
+      borderRadius: "8px",
+      fontSize: "14px",
+      fontWeight: "500",
+      cursor: (authProcessing || (mode === 'loading')) ? "not-allowed" : "pointer",
+      opacity: (authProcessing || (mode === 'loading')) ? 0.7 : 1,
+      transition: "background-color 0.2s ease",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      boxShadow: "0 4px 12px rgba(217, 92, 61, 0.25)",
+    },
+    secondaryButton: {
+        backgroundColor: "transparent",
+        color: "#A1A1AA",
+        border: "1px solid #3F3F46",
+        padding: "8px 16px",
+        borderRadius: "6px",
+        fontSize: "12px",
+        cursor: "pointer",
+        marginTop: "16px",
+        minWidth: "100px"
+    },
+    errorBox: {
+      backgroundColor: "rgba(185, 28, 28, 0.15)",
+      border: "1px solid rgba(185, 28, 28, 0.3)",
+      color: "#FCA5A5",
+      padding: "12px",
+      borderRadius: "8px",
+      fontSize: "13px",
+      marginBottom: "24px",
+      textAlign: "left",
+    },
+    configCard: {
+      textAlign: "left",
+      backgroundColor: "#111",
+      border: "1px solid #333",
+      padding: "24px",
+      borderRadius: "8px",
+      marginBottom: "24px",
+    },
+    codeDisplay: {
+      backgroundColor: "#27272A",
+      color: theme.accent,
+      fontSize: "20px",
+      fontWeight: "700",
+      padding: "12px",
+      borderRadius: "6px",
+      textAlign: "center",
+      letterSpacing: "2px",
+      margin: "12px 0",
+      border: `1px dashed ${theme.accent}`,
+      cursor: "pointer",
+    },
+    footer: {
+      marginTop: "48px",
+      fontSize: "12px",
+      color: "#52525B",
+    }
+  };
+
+  // --- RENDER: Device Flow UI ---
+  const renderDeviceFlow = () => {
+    if (!deviceData) {
+      return (
+        <button
+          onClick={startDeviceFlow}
+          disabled={authProcessing}
+          style={styles.button}
+          onMouseOver={(e) => !authProcessing && (e.currentTarget.style.backgroundColor = theme.accentHover)}
+          onMouseOut={(e) => !authProcessing && (e.currentTarget.style.backgroundColor = theme.accent)}
+        >
+           {authProcessing ? "Connecting..." : "Sign in with GitHub"}
+        </button>
+      );
+    }
+
+    return (
+      <div style={styles.configCard}>
+        <h3 style={{marginTop:0, color: '#FFF', fontSize: '16px'}}>Authorize Device</h3>
+        <p style={{color: '#AAA', fontSize: '13px', marginBottom:'16px'}}>
+          GitPilot needs authorization to access your repositories.
+        </p>
+
+        <div style={{marginBottom: '16px'}}>
+          <div style={{color: '#AAA', fontSize: '12px', marginBottom: '4px'}}>1. Copy code:</div>
+          <div 
+            style={styles.codeDisplay}
+            onClick={() => {
+                navigator.clipboard.writeText(deviceData.user_code);
+            }}
+            title="Click to copy"
+          >
+            {deviceData.user_code}
+          </div>
+        </div>
+
+        <div>
+          <div style={{color: '#AAA', fontSize: '12px', marginBottom: '4px'}}>2. Paste at GitHub:</div>
+          <a 
+            href={deviceData.verification_uri} 
+            target="_blank" 
+            rel="noreferrer"
+            style={{
+                display: 'block',
+                backgroundColor: '#FFF',
+                color: '#000',
+                textDecoration: 'none',
+                padding: '10px',
+                borderRadius: '6px',
+                textAlign: 'center',
+                fontWeight: '600',
+                fontSize: '14px'
+            }}
+          >
+            Open Activation Page ↗
+          </a>
+        </div>
+        
+        <div style={{marginTop: '20px', fontSize: '12px', color: '#666', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px'}}>
+           <span style={{animation: 'spin 1s linear infinite', display: 'inline-block'}}>↻</span> 
+           Waiting for authorization...
+           <style>{`@keyframes spin { 100% { transform: rotate(360deg); } }`}</style>
+        </div>
+
+        <div style={{textAlign: 'center', display: 'flex', gap: '10px', justifyContent: 'center'}}>
+            <button 
+                id="manual-check-btn"
+                onClick={handleManualCheck} 
+                style={styles.secondaryButton}
+            >
+                Check Status
+            </button>
+            <button 
+                onClick={handleCancelDeviceFlow} 
+                style={styles.secondaryButton}
+            >
+                Cancel
+            </button>
+        </div>
+      </div>
+    );
+  };
+
+  // --- RENDER: Config Error ---
+  if (missingClientId) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.card}>
+          <div style={{...styles.logoBadge, color: "#F59E0B", backgroundColor: "rgba(245, 158, 11, 0.1)", borderColor: "rgba(245, 158, 11, 0.2)"}}>⚠️</div>
+          <h1 style={styles.h1}>Configuration Error</h1>
+          <p style={styles.p}>Could not connect to GitHub Authentication services.</p>
+          <button onClick={() => setMissingClientId(false)} style={{...styles.button, backgroundColor: "#3F3F46"}}>Retry</button>
+        </div>
+      </div>
+    );
+  }
+
+  // --- RENDER: Main ---
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <div style={styles.logoBadge}>GP</div>
+        
+        <h1 style={styles.h1}>GitPilot Enterprise</h1>
+        <p style={styles.p}>
+          Agentic AI workflow for your repositories.<br/>
+          Secure. Context-aware. Automated.
+        </p>
+
+        {error && <div style={styles.errorBox}>{error}</div>}
+
+        {mode === "loading" && (
+           <div style={{color: '#666', fontSize: '14px'}}>Initializing...</div>
+        )}
+
+        {mode === "web" && (
+          <button
+            onClick={handleSignInWithGitHub}
+            disabled={authProcessing}
+            style={styles.button}
+            onMouseOver={(e) => !authProcessing && (e.currentTarget.style.backgroundColor = theme.accentHover)}
+            onMouseOut={(e) => !authProcessing && (e.currentTarget.style.backgroundColor = theme.accent)}
+          >
+            {authProcessing ? "Connecting..." : (
+               <>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405 1.02 0 2.04.135 3 .405 2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" /></svg>
+                Sign in with GitHub
+               </>
+            )}
+          </button>
+        )}
+
+        {mode === "device" && renderDeviceFlow()}
+
+        <div style={styles.footer}>
+          &copy; {new Date().getFullYear()} GitPilot Inc.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/PlanView.jsx

@@ -0,0 +1,143 @@
+import React from "react";
+
+/**
+ * PlanView — enterprise "Proposed execution plan" card.
+ *
+ * One main card. Subtle internal spacing instead of bordered nested boxes.
+ * Steps are rendered as a vertical numbered timeline; file actions become
+ * compact pill badges (READ / CREATE / MODIFY / DELETE / INDEX).
+ *
+ * The card itself is borderless — the surrounding AssistantMessage
+ * already provides the outer container.
+ */
+export default function PlanView({ plan, planStatus }) {
+  if (!plan) return null;
+
+  const totals = { CREATE: 0, MODIFY: 0, DELETE: 0, INDEX: 0, READ: 0 };
+  plan.steps.forEach((step) => {
+    step.files.forEach((file) => {
+      totals[file.action] = (totals[file.action] || 0) + 1;
+    });
+  });
+
+  return (
+    <div className="exec-card exec-card--plan">
+      <div className="exec-card__head">
+        <div className="exec-card__icon exec-card__icon--plan" aria-hidden="true">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
+               stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+               strokeLinejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+            <line x1="8" y1="13" x2="16" y2="13" />
+            <line x1="8" y1="17" x2="13" y2="17" />
+          </svg>
+        </div>
+        <div className="exec-card__head-text">
+          <div className="exec-card__eyebrow">Proposed execution plan</div>
+          <div className="exec-card__title">{plan.goal}</div>
+        </div>
+
+        <div className="exec-card__head-right">
+          {planStatus === "executed" && (
+            <span className="exec-status-badge exec-status-badge--ok">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
+                   stroke="currentColor" strokeWidth="3" strokeLinecap="round"
+                   strokeLinejoin="round" aria-hidden="true">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              Executed
+            </span>
+          )}
+          {planStatus === "rejected" && (
+            <span className="exec-status-badge exec-status-badge--muted">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+                   stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"
+                   strokeLinejoin="round" aria-hidden="true">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+              Rejected
+            </span>
+          )}
+
+          <div className="exec-card__totals">
+            {totals.CREATE > 0 && (
+              <span className="exec-total exec-total--create">
+                {totals.CREATE} create
+              </span>
+            )}
+            {totals.MODIFY > 0 && (
+              <span className="exec-total exec-total--modify">
+                {totals.MODIFY} modify
+              </span>
+            )}
+            {totals.DELETE > 0 && (
+              <span className="exec-total exec-total--delete">
+                {totals.DELETE} delete
+              </span>
+            )}
+            {totals.INDEX > 0 && (
+              <span className="exec-total exec-total--index">
+                {totals.INDEX === 1 ? "1 setup" : `${totals.INDEX} setup`}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <ol className="exec-timeline">
+        {plan.steps.map((s, idx) => (
+          <li key={s.step_number} className="exec-step">
+            <div className="exec-step__rail" aria-hidden="true">
+              <div className="exec-step__num">{s.step_number}</div>
+              {idx < plan.steps.length - 1 && (
+                <div className="exec-step__line" />
+              )}
+            </div>
+            <div className="exec-step__body">
+              <div className="exec-step__title">{s.title}</div>
+              {s.description && (
+                <p className="exec-step__desc">{s.description}</p>
+              )}
+
+              {s.files && s.files.length > 0 && (
+                <ul className="exec-actions">
+                  {s.files.map((file, fi) => (
+                    <li key={fi} className="exec-action-row">
+                      <span
+                        className={`exec-badge exec-badge--${file.action.toLowerCase()}`}
+                      >
+                        {file.action}
+                      </span>
+                      <code className="exec-action__path">
+                        {file.action === "INDEX"
+                          ? "Build semantic index for this repo"
+                          : file.path}
+                      </code>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {s.files && s.files.some((f) => f.action === "INDEX") && (
+                <div className="exec-notice">
+                  One-time semantic index build (~80 MB model, ~30 s, ~12 MB on
+                  disk). No cloud calls. Click <strong>Reject plan</strong> to
+                  skip — you'll be offered the grep fallback.
+                </div>
+              )}
+
+              {s.risks && (
+                <div className="exec-risk">
+                  <span aria-hidden="true">⚠</span>
+                  <span>{s.risks}</span>
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

frontend/components/ProjectContextPanel.jsx

@@ -0,0 +1,581 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import FileTree from "./FileTree.jsx";
+import BranchPicker from "./BranchPicker.jsx";
+import SandboxStatusWidget from "./SandboxStatusWidget.jsx";
+
+// --- INJECTED STYLES FOR ANIMATIONS ---
+const animationStyles = `
+  @keyframes highlight-pulse {
+    0% { background-color: rgba(59, 130, 246, 0.10); }
+    50% { background-color: rgba(59, 130, 246, 0.22); }
+    100% { background-color: transparent; }
+  }
+  .pulse-context {
+    animation: highlight-pulse 1.1s ease-out;
+  }
+`;
+
+/**
+ * ProjectContextPanel (Production-ready)
+ *
+ * Controlled component:
+ * - Branch source of truth is App.jsx:
+ * - defaultBranch (prod)
+ * - currentBranch (what user sees)
+ * - sessionBranches (list of all active AI session branches)
+ *
+ * Responsibilities:
+ * - Show project context + branch dropdown + AI badge/banner
+ * - Fetch access status + file count for the currentBranch
+ * - Trigger visual pulse on pulseNonce (Hard Switch)
+ */
+export default function ProjectContextPanel({
+  repo,
+  defaultBranch,
+  currentBranch,
+  sessionBranch, // Active session branch (optional, for specific highlighting)
+  sessionBranches = [], // List of all AI branches
+  onBranchChange,
+  pulseNonce,
+  onSettingsClick,
+}) {
+  const [appUrl, setAppUrl] = useState("");
+  const [fileCount, setFileCount] = useState(0);
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  // Data Loading State
+  const [analyzing, setAnalyzing] = useState(false);
+  const [accessInfo, setAccessInfo] = useState(null);
+  const [treeError, setTreeError] = useState(null);
+
+  // Retry / Refresh Logic
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [retryCount, setRetryCount] = useState(0);
+  const retryTimeoutRef = useRef(null);
+
+  // UX State
+  const [animateHeader, setAnimateHeader] = useState(false);
+  const [toast, setToast] = useState({ visible: false, title: "", msg: "" });
+
+  // Calculate effective default to prevent 'main' fallback errors
+  const effectiveDefaultBranch = defaultBranch || repo?.default_branch || "main";
+  const branch = currentBranch || effectiveDefaultBranch;
+
+  // Determine if we are currently viewing an AI Session branch
+  const isAiSession = (sessionBranches.includes(branch)) || (sessionBranch === branch && branch !== effectiveDefaultBranch);
+
+  // Fetch App URL on mount
+  useEffect(() => {
+    fetch("/api/auth/app-url")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.app_url) setAppUrl(data.app_url);
+      })
+      .catch((err) => console.error("Failed to fetch App URL:", err));
+  }, []);
+
+  // Hard Switch pulse: whenever App increments pulseNonce
+  useEffect(() => {
+    if (!pulseNonce) return;
+    setAnimateHeader(true);
+    const t = window.setTimeout(() => setAnimateHeader(false), 1100);
+    return () => window.clearTimeout(t);
+  }, [pulseNonce]);
+
+  // Main data fetcher (Access + Tree stats) for currentBranch
+  // Stale-while-revalidate: keep previous data visible during fetch
+  useEffect(() => {
+    if (!repo) return;
+
+    // Only show full "analyzing" spinner if we have no data yet
+    if (!accessInfo) setAnalyzing(true);
+    setTreeError(null);
+
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+
+    let headers = {};
+    try {
+      const token = localStorage.getItem("github_token");
+      if (token) headers = { Authorization: `Bearer ${token}` };
+    } catch (e) {
+      console.warn("Unable to read github_token:", e);
+    }
+
+    let cancelled = false;
+    const cacheBuster = `&_t=${Date.now()}&retry=${retryCount}`;
+
+    // A) Access Check (with Stale Cache Fix)
+    fetch(`/api/auth/repo-access?owner=${repo.owner}&repo=${repo.name}${cacheBuster}`, {
+      headers,
+      cache: "no-cache",
+    })
+      .then(async (res) => {
+        if (cancelled) return;
+        const data = await res.json().catch(() => ({}));
+
+        if (!res.ok) {
+          setAccessInfo({ can_write: false, app_installed: false, auth_type: "none" });
+          return;
+        }
+
+        setAccessInfo(data);
+
+        // Auto-retry if user has push access but App is not detected yet (Stale Cache)
+        if (data.can_write && !data.app_installed && retryCount === 0) {
+          retryTimeoutRef.current = setTimeout(() => {
+            setRetryCount(1);
+          }, 1000);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setAccessInfo({ can_write: false, app_installed: false, auth_type: "none" });
+      });
+
+    // B) Tree count for the selected branch
+    // Don't clear fileCount — keep stale value visible until new one arrives
+    const hadFileCount = fileCount > 0;
+    if (!hadFileCount) setAnalyzing(true);
+
+    fetch(`/api/repos/${repo.owner}/${repo.name}/tree?ref=${encodeURIComponent(branch)}&_t=${Date.now()}`, {
+      headers,
+      cache: "no-cache",
+    })
+      .then(async (res) => {
+        if (cancelled) return;
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          setTreeError(data.detail || "Failed to load tree");
+          setFileCount(0);
+          return;
+        }
+        setFileCount(Array.isArray(data.files) ? data.files.length : 0);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setTreeError(err.message);
+        setFileCount(0);
+      })
+      .finally(() => { if (!cancelled) setAnalyzing(false); });
+
+    return () => {
+      cancelled = true;
+      if (retryTimeoutRef.current) clearTimeout(retryTimeoutRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [repo?.owner, repo?.name, branch, refreshTrigger, retryCount]);
+
+  const showToast = (title, msg) => {
+    setToast({ visible: true, title, msg });
+    setTimeout(() => setToast((prev) => ({ ...prev, visible: false })), 3000);
+  };
+
+  const handleManualSwitch = (targetBranch) => {
+    if (!targetBranch || targetBranch === branch) {
+      setIsDropdownOpen(false);
+      return;
+    }
+
+    // Local UI feedback (App.jsx will handle the actual state change)
+    const goingAi = sessionBranches.includes(targetBranch);
+    showToast(
+      goingAi ? "Context Switched" : "Switched to Production",
+      goingAi ? `Viewing AI Session: ${targetBranch}` : `Viewing ${targetBranch}.`
+    );
+
+    setIsDropdownOpen(false);
+    if (onBranchChange) onBranchChange(targetBranch);
+  };
+
+  const handleRefresh = () => {
+    setAnalyzing(true);
+    setRetryCount(0);
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  const handleInstallClick = () => {
+    if (!appUrl) return;
+    const targetUrl = appUrl.endsWith("/") ? `${appUrl}installations/new` : `${appUrl}/installations/new`;
+    window.open(targetUrl, "_blank", "noopener,noreferrer");
+  };
+
+  // --- STYLES ---
+  const theme = useMemo(
+    () => ({
+      bg: "#131316",
+      border: "#27272A",
+      textPrimary: "#EDEDED",
+      textSecondary: "#A1A1AA",
+      accent: "#3b82f6",
+      warningBorder: "rgba(245, 158, 11, 0.2)",
+      warningText: "#F59E0B",
+      successColor: "#10B981",
+      cardBg: "#18181B",
+      aiBg: "rgba(59, 130, 246, 0.10)",
+      aiBorder: "rgba(59, 130, 246, 0.30)",
+      aiText: "#60a5fa",
+    }),
+    []
+  );
+
+  const styles = useMemo(
+    () => ({
+      container: {
+        height: "100%",
+        borderRight: `1px solid ${theme.border}`,
+        backgroundColor: theme.bg,
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: '"Söhne", "Inter", sans-serif',
+        position: "relative",
+        overflow: "hidden",
+      },
+      header: {
+        padding: "16px 20px",
+        borderBottom: `1px solid ${theme.border}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        transition: "background-color 0.3s ease",
+      },
+      titleGroup: { display: "flex", alignItems: "center", gap: "8px" },
+      title: { fontSize: "13px", fontWeight: "600", color: theme.textPrimary },
+      repoBadge: {
+        backgroundColor: "#27272A",
+        color: theme.textSecondary,
+        fontSize: "11px",
+        padding: "2px 8px",
+        borderRadius: "12px",
+        border: `1px solid ${theme.border}`,
+        fontFamily: "monospace",
+      },
+      aiBadge: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        backgroundColor: theme.aiBg,
+        color: theme.aiText,
+        fontSize: "10px",
+        fontWeight: "bold",
+        padding: "2px 8px",
+        borderRadius: "12px",
+        border: `1px solid ${theme.aiBorder}`,
+        textTransform: "uppercase",
+        letterSpacing: "0.5px",
+      },
+      content: {
+        padding: "16px 20px 12px 20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      },
+      statRow: { display: "flex", justifyContent: "space-between", fontSize: "13px", marginBottom: "4px" },
+      label: { color: theme.textSecondary },
+      value: { color: theme.textPrimary, fontWeight: "500" },
+      dropdownContainer: { position: "relative" },
+      branchButton: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "4px 8px",
+        borderRadius: "4px",
+        border: `1px solid ${isAiSession ? theme.aiBorder : theme.border}`,
+        backgroundColor: isAiSession ? "rgba(59, 130, 246, 0.05)" : "transparent",
+        color: isAiSession ? theme.aiText : theme.textPrimary,
+        fontSize: "13px",
+        cursor: "pointer",
+        fontFamily: "monospace",
+      },
+      dropdownMenu: {
+        position: "absolute",
+        top: "100%",
+        left: 0,
+        marginTop: "4px",
+        width: "240px",
+        backgroundColor: "#1F1F23",
+        border: `1px solid ${theme.border}`,
+        borderRadius: "6px",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
+        zIndex: 50,
+        display: isDropdownOpen ? "block" : "none",
+        overflow: "hidden",
+      },
+      dropdownItem: {
+        padding: "8px 12px",
+        fontSize: "13px",
+        color: theme.textSecondary,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        borderBottom: `1px solid ${theme.border}`,
+      },
+      contextBanner: {
+        backgroundColor: theme.aiBg,
+        borderTop: `1px solid ${theme.aiBorder}`,
+        padding: "8px 20px",
+        fontSize: "11px",
+        color: theme.aiText,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      },
+      toast: {
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        backgroundColor: "#18181B",
+        border: `1px solid ${theme.border}`,
+        borderLeft: `3px solid ${theme.accent}`,
+        borderRadius: "6px",
+        padding: "12px",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
+        zIndex: 100,
+        minWidth: "240px",
+        transition: "all 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+        transform: toast.visible ? "translateX(0)" : "translateX(120%)",
+        opacity: toast.visible ? 1 : 0,
+      },
+      toastTitle: { fontSize: "13px", fontWeight: "bold", color: theme.textPrimary, marginBottom: "2px" },
+      toastMsg: { fontSize: "11px", color: theme.textSecondary },
+      refreshButton: {
+        marginTop: "8px",
+        height: "32px",
+        padding: "0 12px",
+        backgroundColor: "transparent",
+        color: theme.textSecondary,
+        border: `1px solid ${theme.border}`,
+        borderRadius: "6px",
+        fontSize: "12px",
+        cursor: analyzing ? "not-allowed" : "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+      },
+      settingsBtn: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "28px",
+        height: "28px",
+        borderRadius: "6px",
+        border: `1px solid ${theme.border}`,
+        backgroundColor: "transparent",
+        color: theme.textSecondary,
+        cursor: "pointer",
+        padding: 0,
+        transition: "color 0.15s, border-color 0.15s",
+      },
+      treeWrapper: { flex: 1, overflow: "auto", borderTop: `1px solid ${theme.border}` },
+      installCard: {
+        marginTop: "8px",
+        padding: "12px",
+        borderRadius: "8px",
+        backgroundColor: theme.cardBg,
+        border: `1px solid ${theme.warningBorder}`,
+      },
+      installHeader: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        fontSize: "14px",
+        fontWeight: "600",
+        color: theme.textPrimary,
+      },
+      installText: {
+        fontSize: "13px",
+        color: theme.textSecondary,
+        lineHeight: "1.5",
+      },
+    }),
+    [analyzing, isAiSession, isDropdownOpen, theme, toast.visible]
+  );
+
+  // Determine status text
+  let statusText = "Checking...";
+  let statusColor = theme.textSecondary;
+  let showInstallCard = false;
+
+  if (!analyzing && accessInfo) {
+    if (accessInfo.app_installed) {
+      statusText = "Write Access ✓";
+      statusColor = theme.successColor;
+    } else if (accessInfo.can_write && retryCount === 0) {
+      statusText = "Verifying...";
+    } else if (accessInfo.can_write) {
+      statusText = "Push Access (No App)";
+      statusColor = theme.warningText;
+      showInstallCard = true;
+    } else {
+      statusText = "Read Only";
+      statusColor = theme.warningText;
+      showInstallCard = true;
+    }
+  }
+
+  if (!repo) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.content}>Select a Repo</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      <style>{animationStyles}</style>
+
+      {/* TOAST */}
+      <div style={styles.toast}>
+        <div style={styles.toastTitle}>{toast.title}</div>
+        <div style={styles.toastMsg}>{toast.msg}</div>
+      </div>
+
+      {/* HEADER */}
+      <div style={styles.header} className={animateHeader ? "pulse-context" : ""}>
+        <div style={styles.titleGroup}>
+          <span style={styles.title}>Project context</span>
+          {isAiSession && (
+            <span style={styles.aiBadge}>
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+              </svg>
+              AI Session
+            </span>
+          )}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+          {!isAiSession && <span style={styles.repoBadge}>{repo.name}</span>}
+          {onSettingsClick && (
+            <button
+              type="button"
+              onClick={onSettingsClick}
+              title="Project settings"
+              style={styles.settingsBtn}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* CONTENT */}
+      <div style={styles.content}>
+        {/* Branch selector (Claude-Code-on-Web parity — uses BranchPicker with search) */}
+        <div style={styles.statRow}>
+          <span style={styles.label}>Branch:</span>
+          <BranchPicker
+            repo={repo}
+            currentBranch={branch}
+            defaultBranch={effectiveDefaultBranch}
+            sessionBranches={sessionBranches}
+            onBranchChange={handleManualSwitch}
+          />
+        </div>
+
+        {/* Stats */}
+        <div style={styles.statRow}>
+          <span style={styles.label}>Files:</span>
+          <span style={styles.value}>{analyzing ? "…" : fileCount}</span>
+        </div>
+
+        <div style={styles.statRow}>
+          <span style={styles.label}>Status:</span>
+          <span style={{ ...styles.value, color: statusColor }}>{statusText}</span>
+        </div>
+
+        {/* Tree error (optional display) */}
+        {treeError && (
+          <div style={{ fontSize: 11, color: theme.warningText }}>
+            {treeError}
+          </div>
+        )}
+
+        {/* Refresh */}
+        <button type="button" style={styles.refreshButton} onClick={handleRefresh} disabled={analyzing}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            style={{
+              transform: analyzing ? "rotate(360deg)" : "rotate(0deg)",
+              transition: "transform 0.6s ease",
+            }}
+          >
+            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
+          </svg>
+          {analyzing ? "Refreshing..." : "Refresh"}
+        </button>
+
+        {/* Install card */}
+        {showInstallCard && (
+          <div style={styles.installCard}>
+            <div style={styles.installHeader}>
+              <span>⚡</span>
+              <span>Enable Write Access</span>
+            </div>
+            <p style={{ ...styles.installText, margin: "8px 0" }}>
+              Install the GitPilot App to enable AI agent operations.
+            </p>
+            <p style={{ ...styles.installText, margin: "0 0 8px 0", fontSize: "11px", opacity: 0.7 }}>
+              Alternatively, use Folder or Local Git mode for local-first workflows without GitHub.
+            </p>
+            <button
+              type="button"
+              style={{
+                ...styles.refreshButton,
+                width: "100%",
+                backgroundColor: theme.accent,
+                color: "#fff",
+                border: "none",
+              }}
+              onClick={handleInstallClick}
+            >
+              Install App
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Context banner */}
+      {isAiSession && (
+        <div style={styles.contextBanner}>
+          <span style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="16" x2="12" y2="12"></line>
+              <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </svg>
+            You are viewing an AI Session branch.
+          </span>
+          <span style={{ textDecoration: "underline", cursor: "pointer" }} onClick={() => handleManualSwitch(effectiveDefaultBranch)}>
+            Return to {effectiveDefaultBranch}
+          </span>
+        </div>
+      )}
+
+      {/* File tree (branch-aware) */}
+      <div style={styles.treeWrapper}>
+        <FileTree repo={repo} refreshTrigger={refreshTrigger} branch={branch} />
+      </div>
+
+      {/* Sandbox status — always visible.  Click "Change" / "Repair"
+          to open Settings (matches the existing settings affordance
+          at the top), or "Use Local" to one-click flip the backend
+          when MatrixLab is unreachable. */}
+      <div style={{ marginTop: 12 }}>
+        <SandboxStatusWidget onOpenSettings={onSettingsClick} />
+      </div>
+    </div>
+  );
+}

frontend/components/ProjectSettings/ContextTab.jsx

@@ -0,0 +1,352 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+export default function ContextTab({ owner, repo }) {
+  const [assets, setAssets] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [uploadHint, setUploadHint] = useState("");
+  const inputRef = useRef(null);
+
+  const canUse = useMemo(() => Boolean(owner && repo), [owner, repo]);
+
+  async function loadAssets() {
+    if (!canUse) return;
+    setError("");
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/context/assets`);
+      if (!res.ok) throw new Error(`Failed to list assets (${res.status})`);
+      const data = await res.json();
+      setAssets(data.assets || []);
+    } catch (e) {
+      setError(e?.message || "Failed to load assets");
+    }
+  }
+
+  useEffect(() => {
+    loadAssets();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [owner, repo]);
+
+  async function uploadFiles(fileList) {
+    if (!canUse) return;
+    const files = Array.from(fileList || []);
+    if (!files.length) return;
+
+    setBusy(true);
+    setError("");
+    setUploadHint(`Uploading ${files.length} file(s)...`);
+
+    try {
+      for (const f of files) {
+        const form = new FormData();
+        form.append("file", f);
+
+        const res = await fetch(
+          `/api/repos/${owner}/${repo}/context/assets/upload`,
+          { method: "POST", body: form }
+        );
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "");
+          throw new Error(`Upload failed (${res.status}) ${txt}`);
+        }
+      }
+      setUploadHint("Upload complete. Refreshing list...");
+      await loadAssets();
+      setUploadHint("");
+    } catch (e) {
+      setError(e?.message || "Upload failed");
+      setUploadHint("");
+    } finally {
+      setBusy(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+
+  async function deleteAsset(assetId) {
+    if (!canUse) return;
+    const ok = window.confirm("Delete this asset? This cannot be undone.");
+    if (!ok) return;
+
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/repos/${owner}/${repo}/context/assets/${assetId}`,
+        { method: "DELETE" }
+      );
+      if (!res.ok) throw new Error(`Delete failed (${res.status})`);
+      await loadAssets();
+    } catch (e) {
+      setError(e?.message || "Delete failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function downloadAsset(assetId) {
+    if (!canUse) return;
+    window.open(
+      `/api/repos/${owner}/${repo}/context/assets/${assetId}/download`,
+      "_blank"
+    );
+  }
+
+  const empty = !assets || assets.length === 0;
+
+  return (
+    <div style={styles.wrap}>
+      <div style={styles.topRow}>
+        <div style={styles.left}>
+          <div style={styles.h1}>Project Context</div>
+          <div style={styles.h2}>
+            Upload documents, transcripts, screenshots, etc. (non-destructive,
+            additive).
+          </div>
+        </div>
+
+        <div style={styles.right}>
+          <input
+            ref={inputRef}
+            type="file"
+            multiple
+            disabled={!canUse || busy}
+            onChange={(e) => uploadFiles(e.target.files)}
+            style={styles.fileInput}
+          />
+          <button
+            style={styles.btn}
+            disabled={!canUse || busy}
+            onClick={() => inputRef.current?.click()}
+          >
+            Upload
+          </button>
+          <button
+            style={styles.btn}
+            disabled={!canUse || busy}
+            onClick={loadAssets}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <div
+        style={styles.dropzone}
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (busy) return;
+          uploadFiles(e.dataTransfer.files);
+        }}
+      >
+        <div style={styles.dropText}>
+          Drag & drop files here, or click <b>Upload</b>.
+        </div>
+        <div style={styles.dropSub}>
+          Tip: For audio/video, upload a transcript file too.
+        </div>
+      </div>
+
+      {uploadHint ? <div style={styles.hint}>{uploadHint}</div> : null}
+      {error ? <div style={styles.error}>{error}</div> : null}
+
+      <div style={styles.tableWrap}>
+        <div style={styles.tableHeader}>
+          <div style={{ ...styles.col, ...styles.colName }}>File</div>
+          <div style={{ ...styles.col, ...styles.colMeta }}>Type</div>
+          <div style={{ ...styles.col, ...styles.colMeta }}>Size</div>
+          <div style={{ ...styles.col, ...styles.colMeta }}>Indexed</div>
+          <div style={{ ...styles.col, ...styles.colActions }}>Actions</div>
+        </div>
+
+        {empty ? (
+          <div style={styles.empty}>
+            No context assets yet. Upload docs, transcripts, and screenshots to
+            improve planning quality.
+          </div>
+        ) : (
+          assets.map((a) => (
+            <div key={a.asset_id} style={styles.row}>
+              <div style={{ ...styles.col, ...styles.colName }}>
+                <div style={styles.fileName}>{a.filename}</div>
+                <div style={styles.small}>
+                  Added: {a.created_at || "-"} | Extracted:{" "}
+                  {Number(a.extracted_chars || 0).toLocaleString()} chars
+                </div>
+              </div>
+
+              <div style={{ ...styles.col, ...styles.colMeta }}>
+                <span style={styles.badge}>{a.mime || "unknown"}</span>
+              </div>
+
+              <div style={{ ...styles.col, ...styles.colMeta }}>
+                {formatBytes(a.size_bytes || 0)}
+              </div>
+
+              <div style={{ ...styles.col, ...styles.colMeta }}>
+                {a.indexed_chunks || 0} chunks
+              </div>
+
+              <div style={{ ...styles.col, ...styles.colActions }}>
+                <button
+                  style={styles.smallBtn}
+                  disabled={busy}
+                  onClick={() => downloadAsset(a.asset_id)}
+                >
+                  Download
+                </button>
+                <button
+                  style={{ ...styles.smallBtn, ...styles.dangerBtn }}
+                  disabled={busy}
+                  onClick={() => deleteAsset(a.asset_id)}
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatBytes(bytes) {
+  const b = Number(bytes || 0);
+  if (!b) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let i = 0;
+  let v = b;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i += 1;
+  }
+  return `${v.toFixed(v >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+const styles = {
+  wrap: { display: "flex", flexDirection: "column", gap: 12 },
+  topRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: 12,
+    alignItems: "flex-start",
+    flexWrap: "wrap",
+  },
+  left: { minWidth: 280 },
+  right: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
+  h1: { fontSize: 14, fontWeight: 800, color: "#fff" },
+  h2: { fontSize: 12, color: "rgba(255,255,255,0.65)", marginTop: 4 },
+  fileInput: { display: "none" },
+  btn: {
+    background: "rgba(255,255,255,0.10)",
+    border: "1px solid rgba(255,255,255,0.18)",
+    color: "#fff",
+    borderRadius: 10,
+    padding: "8px 10px",
+    cursor: "pointer",
+    fontSize: 13,
+  },
+  dropzone: {
+    border: "1px dashed rgba(255,255,255,0.22)",
+    borderRadius: 12,
+    padding: 16,
+    background: "rgba(255,255,255,0.03)",
+  },
+  dropText: { color: "rgba(255,255,255,0.85)", fontSize: 13 },
+  dropSub: { color: "rgba(255,255,255,0.55)", fontSize: 12, marginTop: 6 },
+  hint: {
+    color: "rgba(255,255,255,0.75)",
+    fontSize: 12,
+    padding: "8px 10px",
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 10,
+    background: "rgba(255,255,255,0.03)",
+  },
+  error: {
+    color: "#ffb3b3",
+    fontSize: 12,
+    padding: "8px 10px",
+    border: "1px solid rgba(255,120,120,0.25)",
+    borderRadius: 10,
+    background: "rgba(255,80,80,0.08)",
+  },
+  tableWrap: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    overflow: "hidden",
+  },
+  tableHeader: {
+    display: "grid",
+    gridTemplateColumns: "1.6fr 1fr 0.6fr 0.6fr 0.8fr",
+    gap: 0,
+    padding: "10px 12px",
+    background: "rgba(255,255,255,0.03)",
+    borderBottom: "1px solid rgba(255,255,255,0.10)",
+    fontSize: 12,
+    color: "rgba(255,255,255,0.65)",
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "1.6fr 1fr 0.6fr 0.6fr 0.8fr",
+    padding: "10px 12px",
+    borderBottom: "1px solid rgba(255,255,255,0.08)",
+    alignItems: "center",
+  },
+  col: { minWidth: 0 },
+  colName: {},
+  colMeta: { color: "rgba(255,255,255,0.75)", fontSize: 12 },
+  colActions: { display: "flex", gap: 8, justifyContent: "flex-end" },
+  fileName: {
+    color: "#fff",
+    fontSize: 13,
+    fontWeight: 700,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  small: {
+    color: "rgba(255,255,255,0.55)",
+    fontSize: 11,
+    marginTop: 4,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 8px",
+    borderRadius: 999,
+    border: "1px solid rgba(255,255,255,0.16)",
+    background: "rgba(255,255,255,0.04)",
+    fontSize: 11,
+    color: "rgba(255,255,255,0.80)",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  smallBtn: {
+    background: "rgba(255,255,255,0.08)",
+    border: "1px solid rgba(255,255,255,0.16)",
+    color: "#fff",
+    borderRadius: 10,
+    padding: "6px 8px",
+    cursor: "pointer",
+    fontSize: 12,
+  },
+  dangerBtn: {
+    border: "1px solid rgba(255,90,90,0.35)",
+    background: "rgba(255,90,90,0.10)",
+  },
+  empty: {
+    padding: 14,
+    color: "rgba(255,255,255,0.65)",
+    fontSize: 13,
+  },
+};

frontend/components/ProjectSettings/ConventionsTab.jsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+export default function ConventionsTab({ owner, repo }) {
+  const [content, setContent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const canUse = useMemo(() => Boolean(owner && repo), [owner, repo]);
+
+  async function load() {
+    if (!canUse) return;
+    setError("");
+    setBusy(true);
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/context`);
+      if (!res.ok) throw new Error(`Failed to load conventions (${res.status})`);
+      const data = await res.json();
+      // backend may return { context: "..."} or { conventions: "..."} depending on implementation
+      setContent(data.context || data.conventions || data.memory || data.text || "");
+    } catch (e) {
+      setError(e?.message || "Failed to load conventions");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function initialize() {
+    if (!canUse) return;
+    setError("");
+    setBusy(true);
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/context/init`, {
+        method: "POST",
+      });
+      if (!res.ok) {
+        const txt = await res.text().catch(() => "");
+        throw new Error(`Init failed (${res.status}) ${txt}`);
+      }
+      await load();
+    } catch (e) {
+      setError(e?.message || "Init failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [owner, repo]);
+
+  return (
+    <div style={styles.wrap}>
+      <div style={styles.topRow}>
+        <div>
+          <div style={styles.h1}>Project Conventions</div>
+          <div style={styles.h2}>
+            This is the project memory/conventions file used by GitPilot.
+          </div>
+        </div>
+        <div style={styles.actions}>
+          <button style={styles.btn} disabled={!canUse || busy} onClick={load}>
+            Refresh
+          </button>
+          <button
+            style={styles.btn}
+            disabled={!canUse || busy}
+            onClick={initialize}
+          >
+            Initialize
+          </button>
+        </div>
+      </div>
+
+      {error ? <div style={styles.error}>{error}</div> : null}
+
+      <div style={styles.box}>
+        {content ? (
+          <pre style={styles.pre}>{content}</pre>
+        ) : (
+          <div style={styles.empty}>
+            No conventions found yet. Click <b>Initialize</b> to create default
+            project memory if supported.
+          </div>
+        )}
+      </div>
+
+      <div style={styles.note}>
+        Editing conventions is intentionally not included here to keep this
+        feature additive/non-destructive. You can extend this later with an
+        explicit &quot;Edit&quot; mode.
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  wrap: { display: "flex", flexDirection: "column", gap: 12 },
+  topRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: 12,
+    alignItems: "flex-start",
+    flexWrap: "wrap",
+  },
+  actions: { display: "flex", gap: 8, flexWrap: "wrap" },
+  h1: { fontSize: 14, fontWeight: 800, color: "#fff" },
+  h2: { fontSize: 12, color: "rgba(255,255,255,0.65)", marginTop: 4 },
+  btn: {
+    background: "rgba(255,255,255,0.10)",
+    border: "1px solid rgba(255,255,255,0.18)",
+    color: "#fff",
+    borderRadius: 10,
+    padding: "8px 10px",
+    cursor: "pointer",
+    fontSize: 13,
+  },
+  error: {
+    color: "#ffb3b3",
+    fontSize: 12,
+    padding: "8px 10px",
+    border: "1px solid rgba(255,120,120,0.25)",
+    borderRadius: 10,
+    background: "rgba(255,80,80,0.08)",
+  },
+  box: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    overflow: "hidden",
+    background: "rgba(0,0,0,0.22)",
+  },
+  pre: {
+    margin: 0,
+    padding: 12,
+    color: "rgba(255,255,255,0.85)",
+    fontSize: 12,
+    lineHeight: 1.35,
+    whiteSpace: "pre-wrap",
+    overflow: "auto",
+    maxHeight: 520,
+  },
+  empty: {
+    padding: 12,
+    color: "rgba(255,255,255,0.65)",
+    fontSize: 13,
+  },
+  note: {
+    color: "rgba(255,255,255,0.55)",
+    fontSize: 12,
+  },
+};

frontend/components/ProjectSettings/UseCaseTab.jsx

@@ -0,0 +1,637 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+export default function UseCaseTab({ owner, repo }) {
+  const [useCases, setUseCases] = useState([]);
+  const [selectedId, setSelectedId] = useState("");
+  const [useCase, setUseCase] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [draftTitle, setDraftTitle] = useState("New Use Case");
+  const [message, setMessage] = useState("");
+  const messagesEndRef = useRef(null);
+
+  const canUse = useMemo(() => Boolean(owner && repo), [owner, repo]);
+  const spec = useCase?.spec || {};
+
+  function scrollToBottom() {
+    requestAnimationFrame(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    });
+  }
+
+  async function loadUseCases() {
+    if (!canUse) return;
+    setError("");
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/use-cases`);
+      if (!res.ok) throw new Error(`Failed to list use cases (${res.status})`);
+      const data = await res.json();
+      const list = data.use_cases || [];
+      setUseCases(list);
+
+      // auto select active or first
+      const active = list.find((x) => x.is_active);
+      const nextId = active?.use_case_id || list[0]?.use_case_id || "";
+      if (!selectedId && nextId) setSelectedId(nextId);
+    } catch (e) {
+      setError(e?.message || "Failed to load use cases");
+    }
+  }
+
+  async function loadUseCase(id) {
+    if (!canUse || !id) return;
+    setError("");
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/use-cases/${id}`);
+      if (!res.ok) throw new Error(`Failed to load use case (${res.status})`);
+      const data = await res.json();
+      setUseCase(data.use_case || null);
+      scrollToBottom();
+    } catch (e) {
+      setError(e?.message || "Failed to load use case");
+    }
+  }
+
+  useEffect(() => {
+    loadUseCases();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [owner, repo]);
+
+  useEffect(() => {
+    if (!selectedId) return;
+    loadUseCase(selectedId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedId]);
+
+  async function createUseCase() {
+    if (!canUse) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/use-cases`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: draftTitle || "New Use Case" }),
+      });
+      if (!res.ok) {
+        const txt = await res.text().catch(() => "");
+        throw new Error(`Create failed (${res.status}) ${txt}`);
+      }
+      const data = await res.json();
+      const id = data?.use_case?.use_case_id;
+      await loadUseCases();
+      if (id) setSelectedId(id);
+      setDraftTitle("New Use Case");
+    } catch (e) {
+      setError(e?.message || "Create failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function sendMessage() {
+    if (!canUse || !selectedId) return;
+    const msg = (message || "").trim();
+    if (!msg) return;
+
+    setBusy(true);
+    setError("");
+
+    // optimistic UI: append user message immediately
+    setUseCase((prev) => {
+      if (!prev) return prev;
+      const next = { ...prev };
+      next.messages = Array.isArray(next.messages) ? [...next.messages] : [];
+      next.messages.push({ role: "user", content: msg, ts: new Date().toISOString() });
+      return next;
+    });
+    setMessage("");
+    scrollToBottom();
+
+    try {
+      const res = await fetch(
+        `/api/repos/${owner}/${repo}/use-cases/${selectedId}/chat`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: msg }),
+        }
+      );
+      if (!res.ok) {
+        const txt = await res.text().catch(() => "");
+        throw new Error(`Chat failed (${res.status}) ${txt}`);
+      }
+      const data = await res.json();
+      setUseCase(data.use_case || null);
+      await loadUseCases();
+      scrollToBottom();
+    } catch (e) {
+      setError(e?.message || "Chat failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function finalizeUseCase() {
+    if (!canUse || !selectedId) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await fetch(
+        `/api/repos/${owner}/${repo}/use-cases/${selectedId}/finalize`,
+        { method: "POST" }
+      );
+      if (!res.ok) {
+        const txt = await res.text().catch(() => "");
+        throw new Error(`Finalize failed (${res.status}) ${txt}`);
+      }
+      const data = await res.json();
+      setUseCase(data.use_case || null);
+      await loadUseCases();
+      alert(
+        "Use Case finalized and marked active.\n\nA Markdown export was saved in the repo workspace .gitpilot/context/use_cases/."
+      );
+    } catch (e) {
+      setError(e?.message || "Finalize failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const activeId = useCases.find((x) => x.is_active)?.use_case_id;
+
+  return (
+    <div style={styles.wrap}>
+      <div style={styles.topRow}>
+        <div style={styles.left}>
+          <div style={styles.h1}>Use Case</div>
+          <div style={styles.h2}>
+            Guided chat to clarify requirements and produce a versioned spec.
+          </div>
+        </div>
+
+        <div style={styles.right}>
+          <input
+            value={draftTitle}
+            onChange={(e) => setDraftTitle(e.target.value)}
+            placeholder="New use case title..."
+            style={styles.titleInput}
+            disabled={!canUse || busy}
+          />
+          <button
+            style={styles.btn}
+            onClick={createUseCase}
+            disabled={!canUse || busy}
+          >
+            New
+          </button>
+          <button
+            style={styles.btn}
+            onClick={finalizeUseCase}
+            disabled={!canUse || busy || !selectedId}
+          >
+            Finalize
+          </button>
+          <button
+            style={styles.btn}
+            onClick={loadUseCases}
+            disabled={!canUse || busy}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {error ? <div style={styles.error}>{error}</div> : null}
+
+      <div style={styles.grid}>
+        <div style={styles.sidebar}>
+          <div style={styles.sidebarTitle}>Use Cases</div>
+          <div style={styles.sidebarList}>
+            {useCases.length === 0 ? (
+              <div style={styles.sidebarEmpty}>
+                No use cases yet. Create one with <b>New</b>.
+              </div>
+            ) : (
+              useCases.map((uc) => (
+                <button
+                  key={uc.use_case_id}
+                  style={{
+                    ...styles.ucItem,
+                    ...(selectedId === uc.use_case_id ? styles.ucItemActive : {}),
+                  }}
+                  onClick={() => setSelectedId(uc.use_case_id)}
+                >
+                  <div style={styles.ucTitleRow}>
+                    <div style={styles.ucTitle}>
+                      {uc.title || "(untitled)"}
+                    </div>
+                    {uc.use_case_id === activeId ? (
+                      <span style={styles.activePill}>ACTIVE</span>
+                    ) : null}
+                  </div>
+                  <div style={styles.ucMeta}>
+                    Updated: {uc.updated_at || uc.created_at || "-"}
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+
+        <div style={styles.chatCol}>
+          <div style={styles.panelTitle}>Guided Chat</div>
+          <div style={styles.chatBox}>
+            {Array.isArray(useCase?.messages) && useCase.messages.length ? (
+              useCase.messages.map((m, idx) => (
+                <div
+                  key={idx}
+                  style={{
+                    ...styles.msg,
+                    ...(m.role === "user" ? styles.msgUser : styles.msgAsst),
+                  }}
+                >
+                  <div style={styles.msgRole}>
+                    {m.role === "user" ? "You" : "Assistant"}
+                  </div>
+                  <div style={styles.msgContent}>{m.content}</div>
+                </div>
+              ))
+            ) : (
+              <div style={styles.chatEmpty}>
+                Select a use case and start chatting. You can paste structured
+                info like:
+                <pre style={styles.pre}>
+{`Summary: ...
+Problem: ...
+Users: ...
+Requirements:
+- ...
+Acceptance Criteria:
+- ...`}
+                </pre>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          <div style={styles.composer}>
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Type your answer... (Shift+Enter for newline)"
+              style={styles.textarea}
+              disabled={!canUse || busy || !selectedId}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  sendMessage();
+                }
+              }}
+            />
+            <button
+              style={styles.sendBtn}
+              disabled={!canUse || busy || !selectedId}
+              onClick={sendMessage}
+            >
+              Send
+            </button>
+          </div>
+        </div>
+
+        <div style={styles.specCol}>
+          <div style={styles.panelTitle}>Spec Preview</div>
+          <div style={styles.specBox}>
+            <Section title="Title" value={spec.title || useCase?.title || ""} />
+            <Section title="Summary" value={spec.summary || ""} />
+            <Section title="Problem" value={spec.problem || ""} />
+            <Section title="Users / Personas" value={spec.users || ""} />
+            <ListSection title="Requirements" items={spec.requirements || []} />
+            <ListSection
+              title="Acceptance Criteria"
+              items={spec.acceptance_criteria || []}
+            />
+            <ListSection title="Constraints" items={spec.constraints || []} />
+            <ListSection title="Open Questions" items={spec.open_questions || []} />
+            <Section title="Notes" value={spec.notes || ""} />
+          </div>
+
+          <div style={styles.specFooter}>
+            <div style={styles.specHint}>
+              Finalize will save a Markdown spec and mark it ACTIVE for context.
+            </div>
+            <button
+              style={styles.primaryBtn}
+              disabled={!canUse || busy || !selectedId}
+              onClick={finalizeUseCase}
+            >
+              Finalize Spec
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, value }) {
+  return (
+    <div style={styles.section}>
+      <div style={styles.sectionTitle}>{title}</div>
+      <div style={styles.sectionBody}>
+        {String(value || "").trim() ? (
+          <div style={styles.sectionText}>{value}</div>
+        ) : (
+          <div style={styles.sectionEmpty}>(empty)</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ListSection({ title, items }) {
+  const list = Array.isArray(items) ? items : [];
+  return (
+    <div style={styles.section}>
+      <div style={styles.sectionTitle}>{title}</div>
+      <div style={styles.sectionBody}>
+        {list.length ? (
+          <ul style={styles.ul}>
+            {list.map((x, i) => (
+              <li key={i} style={styles.li}>
+                {x}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div style={styles.sectionEmpty}>(empty)</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  wrap: { display: "flex", flexDirection: "column", gap: 12 },
+  topRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: 12,
+    alignItems: "flex-start",
+    flexWrap: "wrap",
+  },
+  left: { minWidth: 280 },
+  right: { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" },
+  h1: { fontSize: 14, fontWeight: 800, color: "#fff" },
+  h2: { fontSize: 12, color: "rgba(255,255,255,0.65)", marginTop: 4 },
+  titleInput: {
+    width: 260,
+    maxWidth: "70vw",
+    padding: "8px 10px",
+    borderRadius: 10,
+    border: "1px solid rgba(255,255,255,0.18)",
+    background: "rgba(0,0,0,0.25)",
+    color: "#fff",
+    fontSize: 13,
+    outline: "none",
+  },
+  btn: {
+    background: "rgba(255,255,255,0.10)",
+    border: "1px solid rgba(255,255,255,0.18)",
+    color: "#fff",
+    borderRadius: 10,
+    padding: "8px 10px",
+    cursor: "pointer",
+    fontSize: 13,
+  },
+  primaryBtn: {
+    background: "rgba(255,255,255,0.12)",
+    border: "1px solid rgba(255,255,255,0.22)",
+    color: "#fff",
+    borderRadius: 10,
+    padding: "8px 12px",
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 700,
+  },
+  error: {
+    color: "#ffb3b3",
+    fontSize: 12,
+    padding: "8px 10px",
+    border: "1px solid rgba(255,120,120,0.25)",
+    borderRadius: 10,
+    background: "rgba(255,80,80,0.08)",
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "300px 1.2fr 0.9fr",
+    gap: 12,
+    alignItems: "stretch",
+  },
+  sidebar: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    overflow: "hidden",
+    background: "rgba(255,255,255,0.02)",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 520,
+  },
+  sidebarTitle: {
+    padding: 10,
+    borderBottom: "1px solid rgba(255,255,255,0.10)",
+    fontSize: 12,
+    fontWeight: 800,
+    color: "rgba(255,255,255,0.85)",
+  },
+  sidebarList: {
+    padding: 8,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    overflow: "auto",
+  },
+  sidebarEmpty: {
+    color: "rgba(255,255,255,0.65)",
+    fontSize: 12,
+    padding: 8,
+  },
+  ucItem: {
+    textAlign: "left",
+    background: "rgba(0,0,0,0.25)",
+    border: "1px solid rgba(255,255,255,0.12)",
+    color: "#fff",
+    borderRadius: 12,
+    padding: 10,
+    cursor: "pointer",
+  },
+  ucItemActive: {
+    border: "1px solid rgba(255,255,255,0.25)",
+    background: "rgba(255,255,255,0.06)",
+  },
+  ucTitleRow: { display: "flex", alignItems: "center", gap: 8 },
+  ucTitle: {
+    fontSize: 13,
+    fontWeight: 800,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+  },
+  activePill: {
+    fontSize: 10,
+    fontWeight: 800,
+    padding: "2px 8px",
+    borderRadius: 999,
+    border: "1px solid rgba(120,255,180,0.30)",
+    background: "rgba(120,255,180,0.10)",
+    color: "rgba(200,255,220,0.95)",
+  },
+  ucMeta: {
+    marginTop: 6,
+    fontSize: 11,
+    color: "rgba(255,255,255,0.60)",
+  },
+  chatCol: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    background: "rgba(255,255,255,0.02)",
+    minHeight: 520,
+  },
+  specCol: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    background: "rgba(255,255,255,0.02)",
+    minHeight: 520,
+  },
+  panelTitle: {
+    padding: 10,
+    borderBottom: "1px solid rgba(255,255,255,0.10)",
+    fontSize: 12,
+    fontWeight: 800,
+    color: "rgba(255,255,255,0.85)",
+  },
+  chatBox: {
+    flex: 1,
+    overflow: "auto",
+    padding: 10,
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+  },
+  chatEmpty: {
+    color: "rgba(255,255,255,0.65)",
+    fontSize: 12,
+    padding: 6,
+  },
+  pre: {
+    marginTop: 10,
+    padding: 10,
+    borderRadius: 10,
+    border: "1px solid rgba(255,255,255,0.12)",
+    background: "rgba(0,0,0,0.25)",
+    color: "rgba(255,255,255,0.8)",
+    overflow: "auto",
+    fontSize: 11,
+  },
+  msg: {
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    padding: 10,
+    background: "rgba(0,0,0,0.25)",
+  },
+  msgUser: {
+    border: "1px solid rgba(255,255,255,0.18)",
+    background: "rgba(255,255,255,0.04)",
+  },
+  msgAsst: {},
+  msgRole: {
+    fontSize: 11,
+    fontWeight: 800,
+    color: "rgba(255,255,255,0.70)",
+    marginBottom: 6,
+  },
+  msgContent: {
+    whiteSpace: "pre-wrap",
+    fontSize: 13,
+    color: "rgba(255,255,255,0.90)",
+    lineHeight: 1.35,
+  },
+  composer: {
+    borderTop: "1px solid rgba(255,255,255,0.10)",
+    padding: 10,
+    display: "flex",
+    gap: 10,
+    alignItems: "flex-end",
+  },
+  textarea: {
+    flex: 1,
+    minHeight: 52,
+    maxHeight: 120,
+    resize: "vertical",
+    padding: 10,
+    borderRadius: 12,
+    border: "1px solid rgba(255,255,255,0.18)",
+    background: "rgba(0,0,0,0.25)",
+    color: "#fff",
+    fontSize: 13,
+    outline: "none",
+  },
+  sendBtn: {
+    background: "rgba(255,255,255,0.12)",
+    border: "1px solid rgba(255,255,255,0.22)",
+    color: "#fff",
+    borderRadius: 12,
+    padding: "10px 12px",
+    cursor: "pointer",
+    fontSize: 13,
+    fontWeight: 800,
+  },
+  specBox: {
+    flex: 1,
+    overflow: "auto",
+    padding: 10,
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+  },
+  specFooter: {
+    borderTop: "1px solid rgba(255,255,255,0.10)",
+    padding: 10,
+    display: "flex",
+    gap: 10,
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  specHint: { fontSize: 12, color: "rgba(255,255,255,0.60)" },
+  section: {
+    border: "1px solid rgba(255,255,255,0.10)",
+    borderRadius: 12,
+    background: "rgba(0,0,0,0.22)",
+    overflow: "hidden",
+  },
+  sectionTitle: {
+    padding: "8px 10px",
+    borderBottom: "1px solid rgba(255,255,255,0.08)",
+    fontSize: 12,
+    fontWeight: 800,
+    color: "rgba(255,255,255,0.80)",
+    background: "rgba(255,255,255,0.02)",
+  },
+  sectionBody: { padding: "8px 10px" },
+  sectionText: {
+    whiteSpace: "pre-wrap",
+    fontSize: 12,
+    color: "rgba(255,255,255,0.90)",
+    lineHeight: 1.35,
+  },
+  sectionEmpty: { fontSize: 12, color: "rgba(255,255,255,0.45)" },
+  ul: { margin: 0, paddingLeft: 18 },
+  li: { color: "rgba(255,255,255,0.90)", fontSize: 12, lineHeight: 1.35 },
+};

frontend/components/ProjectSettingsModal.jsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useMemo, useState } from "react";
+import ContextTab from "./ProjectSettings/ContextTab.jsx";
+import UseCaseTab from "./ProjectSettings/UseCaseTab.jsx";
+import ConventionsTab from "./ProjectSettings/ConventionsTab.jsx";
+import EnvironmentSelector from "./EnvironmentSelector.jsx";
+
+export default function ProjectSettingsModal({
+  owner,
+  repo,
+  isOpen,
+  onClose,
+  activeEnvId,
+  onEnvChange,
+}) {
+  const [activeTab, setActiveTab] = useState("context");
+
+  useEffect(() => {
+    if (!isOpen) return;
+    // reset to Context each time opened (safe default)
+    setActiveTab("context");
+  }, [isOpen]);
+
+  const title = useMemo(() => {
+    const repoLabel = owner && repo ? `${owner}/${repo}` : "Project";
+    return `Project Settings — ${repoLabel}`;
+  }, [owner, repo]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      style={styles.backdrop}
+      onMouseDown={(e) => {
+        // click outside closes
+        if (e.target === e.currentTarget) onClose?.();
+      }}
+    >
+      <div style={styles.modal} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.header}>
+          <div style={styles.headerLeft}>
+            <div style={styles.title}>{title}</div>
+            <div style={styles.subtitle}>
+              Manage context, use cases, and project conventions (additive only).
+            </div>
+          </div>
+          <button style={styles.closeBtn} onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <div style={styles.tabsRow}>
+          <TabButton
+            label="Context"
+            isActive={activeTab === "context"}
+            onClick={() => setActiveTab("context")}
+          />
+          <TabButton
+            label="Use Case"
+            isActive={activeTab === "usecase"}
+            onClick={() => setActiveTab("usecase")}
+          />
+          <TabButton
+            label="Conventions"
+            isActive={activeTab === "conventions"}
+            onClick={() => setActiveTab("conventions")}
+          />
+          <TabButton
+            label="Environment"
+            isActive={activeTab === "environment"}
+            onClick={() => setActiveTab("environment")}
+          />
+        </div>
+
+        <div style={styles.body}>
+          {activeTab === "context" && <ContextTab owner={owner} repo={repo} />}
+          {activeTab === "usecase" && <UseCaseTab owner={owner} repo={repo} />}
+          {activeTab === "conventions" && (
+            <ConventionsTab owner={owner} repo={repo} />
+          )}
+          {activeTab === "environment" && (
+            <div style={{ maxWidth: 480 }}>
+              <div style={{ marginBottom: 12, fontSize: 13, color: "rgba(255,255,255,0.65)" }}>
+                Select and configure the execution environment for agent operations.
+              </div>
+              <EnvironmentSelector
+                activeEnvId={activeEnvId}
+                onEnvChange={onEnvChange}
+              />
+            </div>
+          )}
+        </div>
+
+        <div style={styles.footer}>
+          <div style={styles.footerHint}>
+            Tip: Upload meeting notes/transcripts in Context, then finalize a Use
+            Case spec.
+          </div>
+          <button style={styles.primaryBtn} onClick={onClose}>
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TabButton({ label, isActive, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        ...styles.tabBtn,
+        ...(isActive ? styles.tabBtnActive : {}),
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+const styles = {
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.45)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 9999,
+    padding: 16,
+  },
+  modal: {
+    width: "min(1100px, 96vw)",
+    height: "min(760px, 90vh)",
+    background: "#111",
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 12,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    boxShadow: "0 12px 40px rgba(0,0,0,0.35)",
+  },
+  header: {
+    padding: "14px 14px 10px",
+    display: "flex",
+    gap: 12,
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    borderBottom: "1px solid rgba(255,255,255,0.10)",
+    background: "linear-gradient(180deg, rgba(255,255,255,0.04), transparent)",
+  },
+  headerLeft: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    minWidth: 0,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 700,
+    color: "#fff",
+    lineHeight: 1.2,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "88vw",
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "rgba(255,255,255,0.65)",
+  },
+  closeBtn: {
+    background: "transparent",
+    border: "1px solid rgba(255,255,255,0.18)",
+    color: "rgba(255,255,255,0.85)",
+    borderRadius: 10,
+    padding: "6px 10px",
+    cursor: "pointer",
+  },
+  tabsRow: {
+    display: "flex",
+    gap: 8,
+    padding: 10,
+    borderBottom: "1px solid rgba(255,255,255,0.10)",
+    background: "rgba(255,255,255,0.02)",
+  },
+  tabBtn: {
+    background: "transparent",
+    border: "1px solid rgba(255,255,255,0.14)",
+    color: "rgba(255,255,255,0.75)",
+    borderRadius: 999,
+    padding: "8px 12px",
+    cursor: "pointer",
+    fontSize: 13,
+  },
+  tabBtnActive: {
+    border: "1px solid rgba(255,255,255,0.28)",
+    color: "#fff",
+    background: "rgba(255,255,255,0.06)",
+  },
+  body: {
+    flex: 1,
+    overflow: "auto",
+    padding: 12,
+  },
+  footer: {
+    padding: 12,
+    borderTop: "1px solid rgba(255,255,255,0.10)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    background: "rgba(255,255,255,0.02)",
+  },
+  footerHint: {
+    color: "rgba(255,255,255,0.6)",
+    fontSize: 12,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  primaryBtn: {
+    background: "rgba(255,255,255,0.10)",
+    border: "1px solid rgba(255,255,255,0.20)",
+    color: "#fff",
+    borderRadius: 10,
+    padding: "8px 12px",
+    cursor: "pointer",
+  },
+};

frontend/components/RepoSelector.jsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { authFetch } from "../utils/api.js";
+
+export default function RepoSelector({ onSelect }) {
+  const [query, setQuery] = useState("");
+  const [repos, setRepos] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [status, setStatus] = useState("");
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [totalCount, setTotalCount] = useState(null);
+
+  /**
+   * Fetch repositories with pagination and optional search
+   * @param {number} pageNum - Page number to fetch
+   * @param {boolean} append - Whether to append or replace results
+   * @param {string} searchQuery - Search query (uses current query if not provided)
+   */
+  const fetchRepos = useCallback(async (pageNum = 1, append = false, searchQuery = query) => {
+    // Set appropriate loading state
+    if (pageNum === 1) {
+      setLoading(true);
+      setStatus("");
+    } else {
+      setLoadingMore(true);
+    }
+
+    try {
+      // Build URL with query parameters
+      const params = new URLSearchParams();
+      params.append("page", pageNum);
+      params.append("per_page", "100");
+      if (searchQuery) {
+        params.append("query", searchQuery);
+      }
+
+      const url = `/api/repos?${params.toString()}`;
+      const res = await authFetch(url);
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.detail || data.error || "Failed to load repositories");
+      }
+
+      // Update repositories - append or replace
+      if (append) {
+        setRepos((prev) => [...prev, ...data.repositories]);
+      } else {
+        setRepos(data.repositories);
+      }
+
+      // Update pagination state
+      setPage(pageNum);
+      setHasMore(data.has_more);
+      setTotalCount(data.total_count);
+
+      // Show status if no results
+      if (!append && data.repositories.length === 0) {
+        if (searchQuery) {
+          setStatus(`No repositories matching "${searchQuery}"`);
+        } else {
+          setStatus("No repositories found");
+        }
+      } else {
+        setStatus("");
+      }
+    } catch (err) {
+      console.error("Error fetching repositories:", err);
+      setStatus(err.message || "Failed to load repositories");
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [query]);
+
+  /**
+   * Load more repositories (next page)
+   */
+  const loadMore = () => {
+    fetchRepos(page + 1, true);
+  };
+
+  /**
+   * Handle search - resets to page 1
+   */
+  const handleSearch = () => {
+    setPage(1);
+    fetchRepos(1, false, query);
+  };
+
+  /**
+   * Handle input change - trigger search on Enter key
+   */
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+
+  /**
+   * Clear search and show all repos
+   */
+  const clearSearch = () => {
+    setQuery("");
+    setPage(1);
+    fetchRepos(1, false, "");
+  };
+
+  // Initial load on mount
+  useEffect(() => {
+    fetchRepos(1, false, "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /**
+   * Format repository count for display
+   */
+  const getCountText = () => {
+    if (totalCount !== null) {
+      // Search mode - show filtered count
+      return `${repos.length} of ${totalCount} repositories`;
+    } else {
+      // Pagination mode - show loaded count
+      return `${repos.length} ${repos.length === 1 ? "repository" : "repositories"}${hasMore ? "+" : ""}`;
+    }
+  };
+
+  return (
+    <div className="repo-search-box">
+      <div style={{ fontSize: "11px", opacity: 0.6, padding: "4px 8px", marginBottom: "8px" }}>
+        GitHub repos are optional. Use Folder or Local Git mode for local-first workflows.
+      </div>
+      {/* Search Header */}
+      <div className="repo-search-header">
+        <div className="repo-search-row">
+          <input
+            className="repo-search-input"
+            placeholder="Search repositories..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={loading}
+          />
+          <button
+            className="repo-search-btn"
+            onClick={handleSearch}
+            type="button"
+            disabled={loading}
+          >
+            {loading ? "..." : "Search"}
+          </button>
+        </div>
+
+        {/* Search Info Bar */}
+        {(query || repos.length > 0) && (
+          <div className="repo-info-bar">
+            <span className="repo-count">{getCountText()}</span>
+            {query && (
+              <button
+                className="repo-clear-btn"
+                onClick={clearSearch}
+                type="button"
+                disabled={loading}
+              >
+                Clear search
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Status Message */}
+      {status && !loading && (
+        <div className="repo-status">
+          {status}
+        </div>
+      )}
+
+      {/* Repository List */}
+      <div className="repo-list">
+        {repos.map((r) => (
+          <button
+            key={r.id}
+            type="button"
+            className="repo-item"
+            onClick={() => onSelect(r)}
+          >
+            <div className="repo-item-content">
+              <span className="repo-name">{r.name}</span>
+              <span className="repo-owner">{r.owner}</span>
+            </div>
+            {r.private && (
+              <span className="repo-badge-private">Private</span>
+            )}
+          </button>
+        ))}
+
+        {/* Loading Indicator */}
+        {loading && repos.length === 0 && (
+          <div className="repo-loading">
+            <div className="repo-loading-spinner"></div>
+            <span>Loading repositories...</span>
+          </div>
+        )}
+
+        {/* Load More Button */}
+        {hasMore && !loading && repos.length > 0 && (
+          <button
+            type="button"
+            className="repo-load-more"
+            onClick={loadMore}
+            disabled={loadingMore}
+          >
+            {loadingMore ? (
+              <>
+                <div className="repo-loading-spinner-small"></div>
+                Loading more...
+              </>
+            ) : (
+              <>
+                Load more repositories
+                <span className="repo-load-more-count">({repos.length} loaded)</span>
+              </>
+            )}
+          </button>
+        )}
+
+        {/* All Loaded Message */}
+        {!hasMore && !loading && repos.length > 0 && (
+          <div className="repo-all-loaded">
+            ✓ All repositories loaded ({repos.length} total)
+          </div>
+        )}
+      </div>
+
+      {/* GitHub App Installation Notice */}
+      <div className="repo-github-notice">
+        <svg
+          className="repo-github-icon"
+          height="20"
+          width="20"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+        >
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+        </svg>
+
+        <div className="repo-github-notice-content">
+          <div className="repo-github-notice-title">
+            Repository missing?
+          </div>
+          <div className="repo-github-notice-text">
+            Install the{" "}
+            <a
+              href="https://github.com/apps/gitpilota"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="repo-github-link"
+            >
+              GitPilot GitHub App
+            </a>{" "}
+            to access private repositories.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/RunnableCodeBlock.jsx

@@ -0,0 +1,486 @@
+import React, { useState } from "react";
+import SandboxCanvas from "./SandboxCanvas.jsx";
+import ExecutionPlanCard, { fetchExecutionPlan } from "./ExecutionPlanCard.jsx";
+
+// Languages the Run button supports.  Anything not in this set still
+// renders as a normal code block (no button) — keeps the visual contract
+// honest: if there's a button, the snippet really is executable.
+const RUNNABLE = new Set([
+  "python", "py",
+  "javascript", "js", "node",
+  "bash", "sh", "shell",
+]);
+
+// Friendly badge text per backend, surfaced so the user always knows
+// which sandbox actually ran their code.  Mirrors the labels in
+// SettingsModal so the two views agree.
+const BACKEND_LABELS = {
+  subprocess: "Local",
+  matrixlab: "MatrixLab",
+  off: "Pass-through",
+};
+
+// Map "py" → "python" etc. so the badge always shows the canonical
+// language name rather than whatever alias the LLM tagged the fence
+// with.
+const LANG_DISPLAY = {
+  py: "python",
+  js: "javascript",
+  node: "javascript",
+  sh: "bash",
+  shell: "bash",
+};
+
+// Default file extension per language — used when the user clicks
+// "Save to repo" and we need to seed a plausible filename.
+const LANG_EXT = {
+  python: "py", py: "py",
+  javascript: "js", js: "js", node: "js",
+  bash: "sh", sh: "sh", shell: "sh",
+};
+
+// Mirror executor's _looks_like_matplotlib heuristic so plt.show()
+// snippets don't hang the headless sandbox.  False positives are
+// harmless (Agg is a valid backend for any Python script).
+function looksLikeMatplotlib(code) {
+  if (!code) return false;
+  const lower = code.toLowerCase();
+  return /import\s+matplotlib|from\s+matplotlib|plt\.show|pyplot/.test(lower);
+}
+
+function applyMatplotlibShim(language, code) {
+  if (language !== "python" && language !== "py") return code;
+  if (!looksLikeMatplotlib(code)) return code;
+  return (
+    "import os as _gp_os\n" +
+    '_gp_os.environ.setdefault("MPLBACKEND", "Agg")\n' +
+    code
+  );
+}
+
+/** A single fenced code block with a per-block Run button.
+ *
+ * Optional ``owner``/``repo`` props enable the "Save to repo" button by
+ * giving the save call a real target.  When absent the button is
+ * hidden — keeps the contract honest: no button without somewhere to
+ * save. */
+export default function RunnableCodeBlock({ language, code, owner, repo }) {
+  const lang = (language || "").trim().toLowerCase();
+  const canRun = RUNNABLE.has(lang);
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const [canvasOpen, setCanvasOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveMsg, setSaveMsg] = useState(null);
+  // Approval-first: clicking ▶ Run first fetches a deterministic
+  // ExecutionPlan and surfaces it inline.  The actual sandbox call
+  // is gated on the user clicking "Run in Sandbox" inside the plan.
+  const [pendingPlan, setPendingPlan] = useState(null);
+  const [planError, setPlanError] = useState(null);
+  const display = LANG_DISPLAY[lang] || lang || "text";
+
+  const onRunClick = async () => {
+    setPlanError(null);
+    setResult(null);
+    setError(null);
+    setBusy(true);
+    try {
+      const shipped = applyMatplotlibShim(lang, code);
+      const plan = await fetchExecutionPlan({
+        code: shipped,
+        language: lang,
+        source: "code_block",
+      });
+      setPendingPlan(plan);
+    } catch (err) {
+      setPlanError(err.message || "Could not build execution plan");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onApprovePlan = async (plan) => {
+    setBusy(true);
+    setResult(null);
+    setError(null);
+    try {
+      const res = await fetch("/api/sandbox/run", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          language: plan.language,
+          code: plan.inline_code,
+          timeout_sec: plan.timeout_sec,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.detail || `HTTP ${res.status}`);
+        return;
+      }
+      setResult(data);
+      setPendingPlan(null);
+    } catch (err) {
+      setError(err.message || "Run failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onCancelPlan = () => {
+    setPendingPlan(null);
+    setPlanError(null);
+  };
+
+  const copy = () => {
+    if (navigator?.clipboard) navigator.clipboard.writeText(code).catch(() => {});
+  };
+
+  // POST the snippet to /api/repos/{owner}/{repo}/file with a path
+  // chosen by the user.  Pure client-side prompt — no new backend
+  // wiring needed because the endpoint already exists.
+  const saveToRepo = async (snippet, snippetLang) => {
+    if (!owner || !repo) {
+      setSaveMsg("No repository context — open this chat inside a repo to save.");
+      return;
+    }
+    const ext = LANG_EXT[(snippetLang || lang).toLowerCase()] || "txt";
+    const suggested = `snippets/inline.${ext}`;
+    const path = window.prompt("Save snippet to path (inside repo):", suggested);
+    if (!path) return;
+    setSaving(true);
+    setSaveMsg(null);
+    try {
+      const res = await fetch(`/api/repos/${owner}/${repo}/file`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path,
+          content: snippet,
+          message: `Save snippet from chat (${path})`,
+        }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setSaveMsg(data.detail || `Save failed (HTTP ${res.status})`);
+        return;
+      }
+      setSaveMsg(`Saved to ${path}`);
+    } catch (err) {
+      setSaveMsg(err.message || "Save failed");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div style={styles.wrap}>
+      <div style={styles.head}>
+        <span style={styles.lang}>{display}</span>
+        <div style={styles.headRight}>
+          <button type="button" style={styles.iconBtn} onClick={copy} title="Copy code">
+            Copy
+          </button>
+          {canRun && (
+            <button
+              type="button"
+              style={styles.iconBtn}
+              onClick={() => setCanvasOpen(true)}
+              title="Open the snippet in the Canvas split-view editor"
+            >
+              ⊞ Canvas
+            </button>
+          )}
+          {canRun && owner && repo && (
+            <button
+              type="button"
+              style={{ ...styles.iconBtn, opacity: saving ? 0.6 : 1 }}
+              onClick={() => saveToRepo(code, lang)}
+              disabled={saving}
+              title="Save this snippet as a file in the current repository"
+            >
+              {saving ? "Saving…" : "Save"}
+            </button>
+          )}
+          {canRun && (
+            <button
+              type="button"
+              style={{ ...styles.runBtn, opacity: busy ? 0.6 : 1 }}
+              onClick={onRunClick}
+              disabled={busy || !!pendingPlan}
+              title="Review an execution plan before running this snippet"
+            >
+              {busy && !pendingPlan ? "Preparing…" : "▶ Run"}
+            </button>
+          )}
+        </div>
+      </div>
+      <pre style={styles.code}>{code}</pre>
+
+      {pendingPlan && (
+        <ExecutionPlanCard
+          plan={pendingPlan}
+          variant="compact"
+          busy={busy}
+          onApprove={onApprovePlan}
+          onCancel={onCancelPlan}
+        />
+      )}
+      {planError && (
+        <div style={styles.errorBanner}>Plan error: {planError}</div>
+      )}
+
+      {(result || error) && (
+        <div style={styles.output}>
+          <div style={styles.outputHead}>
+            <span style={styles.outputLabel}>Output</span>
+            {result && (
+              <span style={styles.metaRow}>
+                <span style={result.exit_code === 0 ? styles.okPill : styles.failPill}>
+                  exit {result.exit_code}
+                </span>
+                <span style={styles.backendPill}>
+                  {BACKEND_LABELS[result.backend] || result.backend}
+                </span>
+                {typeof result.duration_ms === "number" && (
+                  <span style={styles.dim}>{result.duration_ms} ms</span>
+                )}
+                {result.timed_out && <span style={styles.failPill}>timed out</span>}
+                {result.truncated && <span style={styles.warnPill}>truncated</span>}
+              </span>
+            )}
+          </div>
+          {error && <pre style={styles.stderr}>{error}</pre>}
+          {result?.stdout && <pre style={styles.stdout}>{result.stdout}</pre>}
+          {result?.stderr && <pre style={styles.stderr}>{result.stderr}</pre>}
+          {Array.isArray(result?.artifacts) && result.artifacts.length > 0 && (
+            <div style={styles.artifactsBox}>
+              <div style={styles.outputLabel}>Artifacts ({result.artifacts.length})</div>
+              <ul style={styles.artifactList}>
+                {result.artifacts.map((a, i) => (
+                  <li key={i} style={styles.artifactItem}>
+                    <code>{a.name || a.id}</code>
+                    {a.size && <span style={styles.dim}> · {a.size} bytes</span>}
+                    {a.mime && <span style={styles.dim}> · {a.mime}</span>}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {result && !result.stdout && !result.stderr && (
+            <div style={styles.dim}>(no output)</div>
+          )}
+        </div>
+      )}
+
+      {saveMsg && <div style={styles.saveBanner}>{saveMsg}</div>}
+
+      {canvasOpen && (
+        <SandboxCanvas
+          initialLanguage={lang}
+          initialCode={code}
+          onClose={() => setCanvasOpen(false)}
+          onSaveAsFile={owner && repo ? saveToRepo : undefined}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Split a markdown-ish string into text and fenced-code segments.
+ *
+ * Returned shape: ``[{type: 'text', value} | {type: 'code', language, code}]``.
+ *
+ * Kept deliberately small — full markdown rendering is out of scope; this
+ * only needs to recognise ```lang fences so the Run button can attach to
+ * code blocks the model emits. */
+export function splitFences(input) {
+  if (!input) return [];
+  const out = [];
+  const re = /```([a-zA-Z0-9_+-]*)\s*\n([\s\S]*?)```/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(input)) !== null) {
+    if (m.index > last) {
+      out.push({ type: "text", value: input.slice(last, m.index) });
+    }
+    out.push({ type: "code", language: m[1] || "", code: m[2].replace(/\s+$/, "") });
+    last = m.index + m[0].length;
+  }
+  if (last < input.length) {
+    out.push({ type: "text", value: input.slice(last) });
+  }
+  return out;
+}
+
+const styles = {
+  wrap: {
+    margin: "8px 0",
+    background: "#09090B",
+    border: "1px solid #27272A",
+    borderRadius: 8,
+    overflow: "hidden",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  head: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 12px",
+    background: "#18181B",
+    borderBottom: "1px solid #27272A",
+    fontSize: 11,
+  },
+  headRight: { display: "flex", gap: 6, alignItems: "center" },
+  lang: {
+    color: "#A1A1AA",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    fontSize: 10,
+  },
+  iconBtn: {
+    background: "transparent",
+    color: "#A1A1AA",
+    border: "1px solid #3F3F46",
+    borderRadius: 4,
+    padding: "2px 8px",
+    fontSize: 11,
+    cursor: "pointer",
+  },
+  runBtn: {
+    background: "#10B981",
+    color: "#052e1c",
+    border: "0",
+    borderRadius: 4,
+    padding: "2px 10px",
+    fontSize: 11,
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+  code: {
+    margin: 0,
+    padding: "12px 14px",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    fontSize: 12.5,
+    lineHeight: 1.55,
+    color: "#E4E4E7",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    overflowX: "auto",
+  },
+  output: {
+    background: "#0c0c10",
+    borderTop: "1px solid #27272A",
+    padding: "8px 14px 10px",
+  },
+  outputHead: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 6,
+  },
+  outputLabel: {
+    fontSize: 10,
+    fontWeight: 600,
+    color: "#A1A1AA",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+  },
+  metaRow: { display: "flex", gap: 6, alignItems: "center" },
+  okPill: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    borderRadius: 9,
+    background: "rgba(16, 185, 129, 0.12)",
+    color: "#10B981",
+    border: "1px solid rgba(16, 185, 129, 0.35)",
+  },
+  failPill: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    borderRadius: 9,
+    background: "rgba(239, 68, 68, 0.12)",
+    color: "#ef4444",
+    border: "1px solid rgba(239, 68, 68, 0.35)",
+  },
+  warnPill: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    borderRadius: 9,
+    background: "rgba(217, 119, 6, 0.12)",
+    color: "#f59e0b",
+    border: "1px solid rgba(217, 119, 6, 0.35)",
+  },
+  backendPill: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    borderRadius: 9,
+    background: "rgba(79, 70, 229, 0.12)",
+    color: "#a5b4fc",
+    border: "1px solid rgba(79, 70, 229, 0.35)",
+  },
+  dim: { color: "#71717A", fontSize: 11 },
+  stdout: {
+    margin: "4px 0 0",
+    padding: "6px 8px",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: 12,
+    color: "#D4D4D8",
+    background: "#000",
+    borderRadius: 4,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+  },
+  stderr: {
+    margin: "4px 0 0",
+    padding: "6px 8px",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: 12,
+    color: "#fca5a5",
+    background: "#0a0000",
+    borderRadius: 4,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+  },
+  artifactsBox: {
+    marginTop: 8,
+    padding: "6px 8px",
+    background: "#0a0a0f",
+    border: "1px solid #27272A",
+    borderRadius: 4,
+  },
+  artifactList: {
+    listStyle: "none",
+    padding: 0,
+    margin: "4px 0 0",
+  },
+  artifactItem: {
+    padding: "2px 0",
+    fontSize: 12,
+    color: "#D4D4D8",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  },
+  saveBanner: {
+    margin: "0",
+    padding: "6px 12px",
+    fontSize: 11,
+    color: "#A1A1AA",
+    background: "#0c0c10",
+    borderTop: "1px solid #27272A",
+  },
+  errorBanner: {
+    margin: "6px 0",
+    padding: "8px 10px",
+    fontSize: 12,
+    color: "#fca5a5",
+    background: "#3d1111",
+    border: "1px solid #7f1d1d",
+    borderRadius: 6,
+  },
+};

frontend/components/SandboxCanvas.jsx

@@ -0,0 +1,1052 @@
+// frontend/components/SandboxCanvas.jsx
+//
+// File-aware Canvas: a modal that adapts to the file type it was
+// opened with.  Three modes:
+//
+//   code      → split editor + sandbox output.  Prepare-Run flow.
+//                 Used for .py / .js / .sh / inline snippets.
+//   markdown  → split source + rendered preview.  No Run button.
+//                 Used for .md / .markdown.
+//   text      → source-only viewer (read-only by default).
+//                 Used for everything else: .json, .yml, .csv,
+//                 .html, .txt, ...
+//
+// Mode is computed from the ``filename`` prop's extension.  When
+// ``filename`` is null (an anonymous inline snippet from a chat code
+// block) we fall back to code mode using the ``initialLanguage`` tag.
+//
+// The sandbox approval contract is unchanged: Prepare Run dispatches
+// /api/sandbox/plan, the user approves a green ExecutionPlanCard,
+// only then /api/sandbox/run actually executes.
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { fetchExecutionPlan } from "./ExecutionPlanCard.jsx";
+
+const BACKEND_LABELS = {
+  subprocess: "Local",
+  matrixlab: "MatrixLab",
+  off: "Pass-through",
+};
+
+const LANG_DISPLAY = {
+  py: "python", js: "javascript", node: "javascript",
+  sh: "bash", shell: "bash",
+};
+
+// Extensions that route through the sandbox.  Everything else gets
+// a viewer-only canvas — README.md must NOT show a Python execution
+// plan, JSON must NOT pretend it can run.
+const RUNNABLE_EXTS = new Set(["py", "js", "mjs", "cjs", "sh", "bash"]);
+const MARKDOWN_EXTS = new Set(["md", "markdown", "mdx"]);
+
+// Map extension → canonical sandbox language tag used by the planner.
+const EXT_TO_LANG = {
+  py: "python", js: "javascript", mjs: "javascript", cjs: "javascript",
+  sh: "bash", bash: "bash",
+};
+
+// Display label per file type — keeps the header honest about what
+// the Canvas is showing.
+const TYPE_LABEL = {
+  python: "Python", javascript: "JavaScript", bash: "Shell",
+  markdown: "Markdown", json: "JSON", yaml: "YAML", csv: "CSV",
+  html: "HTML", text: "Text",
+};
+
+function extOf(name) {
+  if (!name || !name.includes(".")) return "";
+  return name.split(".").pop().toLowerCase();
+}
+
+// Decide which Canvas branch to render based on the opening context.
+// Pure function so tests can pin it.
+function resolveCanvasMode({ filename, initialLanguage }) {
+  const ext = extOf(filename || "");
+  if (filename && MARKDOWN_EXTS.has(ext)) {
+    return { kind: "markdown", typeLabel: "Markdown", language: "markdown" };
+  }
+  if (filename && RUNNABLE_EXTS.has(ext)) {
+    const lang = EXT_TO_LANG[ext];
+    return { kind: "code", typeLabel: TYPE_LABEL[lang], language: lang };
+  }
+  if (filename) {
+    // Known-but-non-runnable: json / yaml / csv / html / txt / etc.
+    const known = { json: "json", yml: "yaml", yaml: "yaml",
+                    csv: "csv", html: "html", txt: "text" }[ext];
+    if (known) {
+      return { kind: "text", typeLabel: TYPE_LABEL[known], language: known };
+    }
+    return { kind: "text", typeLabel: ext.toUpperCase() || "Text", language: "text" };
+  }
+  // No filename → inline snippet from a chat code block.  Honor the
+  // language tag the chat fence carried.
+  const tag = (initialLanguage || "python").toLowerCase();
+  if (tag === "py" || tag === "python") return { kind: "code", typeLabel: "Python snippet", language: "python" };
+  if (tag === "js" || tag === "javascript" || tag === "node")
+    return { kind: "code", typeLabel: "JavaScript snippet", language: "javascript" };
+  if (tag === "sh" || tag === "bash" || tag === "shell")
+    return { kind: "code", typeLabel: "Shell snippet", language: "bash" };
+  return { kind: "text", typeLabel: "Text", language: "text" };
+}
+
+// Minimal, dependency-free Markdown → HTML renderer.  Covers the
+// patterns that matter for README files: headings, bold, italic,
+// inline code, fenced code blocks, lists, links.  Escapes HTML to
+// avoid XSS when README contains <script> or similar.
+function escapeHtml(s) {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+function renderMarkdown(src) {
+  if (!src) return "";
+  let s = escapeHtml(src);
+  // Fenced code blocks first so their content isn't re-processed.
+  s = s.replace(/```([\w-]*)\n([\s\S]*?)```/g, (_m, _lang, code) =>
+    `<pre class="md-code"><code>${code}</code></pre>`,
+  );
+  // Headings — process before line-based replacements.
+  s = s.replace(/^######\s+(.+)$/gm, "<h6>$1</h6>");
+  s = s.replace(/^#####\s+(.+)$/gm, "<h5>$1</h5>");
+  s = s.replace(/^####\s+(.+)$/gm,  "<h4>$1</h4>");
+  s = s.replace(/^###\s+(.+)$/gm,   "<h3>$1</h3>");
+  s = s.replace(/^##\s+(.+)$/gm,    "<h2>$1</h2>");
+  s = s.replace(/^#\s+(.+)$/gm,     "<h1>$1</h1>");
+  // Bold / italic / inline code.
+  s = s.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");
+  s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+  s = s.replace(/`([^`\n]+)`/g, "<code>$1</code>");
+  // Links: [text](url) — only allow http(s) + mailto + relative paths.
+  s = s.replace(/\[([^\]]+)\]\(((?:https?:\/\/|mailto:|\/|\.)[^)\s]+)\)/g,
+                '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+  // Unordered list items.
+  s = s.replace(/^[ \t]*[-*]\s+(.+)$/gm, "<li>$1</li>");
+  s = s.replace(/(<li>[\s\S]*?<\/li>(?:\n<li>[\s\S]*?<\/li>)*)/g,
+                (m) => `<ul>${m.replace(/\n/g, "")}</ul>`);
+  // Paragraphs — blank-line separated runs that aren't already block-tagged.
+  s = s.split(/\n{2,}/).map((para) => {
+    if (/^<(h\d|ul|pre|p|blockquote)/.test(para.trim())) return para;
+    return `<p>${para.replace(/\n/g, " ")}</p>`;
+  }).join("\n");
+  return s;
+}
+
+// Mirrors the executor's _looks_like_matplotlib heuristic so plt.show()
+// snippets don't hang the headless sandbox.  False positives are
+// harmless (Agg is a valid backend for any Python script); false
+// negatives cause a hang on a plot window that never opens.
+function looksLikeMatplotlib(code) {
+  if (!code) return false;
+  const lower = code.toLowerCase();
+  return /import\s+matplotlib|from\s+matplotlib|plt\.show|pyplot/.test(lower);
+}
+
+function applyMatplotlibShim(language, code) {
+  if (language !== "python" && language !== "py") return code;
+  if (!looksLikeMatplotlib(code)) return code;
+  return (
+    "import os as _gp_os\n" +
+    '_gp_os.environ.setdefault("MPLBACKEND", "Agg")\n' +
+    code
+  );
+}
+
+export default function SandboxCanvas(props) {
+  // Branch by mode at the top so non-runnable file types never see
+  // the sandbox plumbing.  Each branch is a focused subcomponent —
+  // easier to read and easier to test than a single 400-line function
+  // with three conditional render paths.
+  const mode = resolveCanvasMode({
+    filename: props.filename,
+    initialLanguage: props.initialLanguage,
+  });
+  if (mode.kind === "markdown") return <MarkdownCanvas {...props} mode={mode} />;
+  if (mode.kind === "text") return <TextCanvas {...props} mode={mode} />;
+  return <CodeCanvas {...props} mode={mode} />;
+}
+
+// ---------------------------------------------------------------------------
+// CodeCanvas — the original sandbox-enabled Canvas, now scoped to
+// runnable code.  Uses ``filename`` (when present and not "inline.*")
+// as the ``display_filename`` on the ExecutionPlan so the command
+// reads ``python demo.py`` instead of ``python inline.py``.
+// ---------------------------------------------------------------------------
+
+function CodeCanvas({
+  initialCode,
+  filename,
+  onClose,
+  onSaveAsFile,
+  mode,
+}) {
+  const language = mode.language;
+  const [code, setCode] = useState(initialCode || "");
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+  const [startTime, setStartTime] = useState(null);
+  const [elapsed, setElapsed] = useState(0);
+  const tickRef = useRef(null);
+  // Approval-first: clicking Run fetches a deterministic plan first;
+  // the slim confirmation strip lets the user back out before any code
+  // actually executes in the sandbox.
+  const [pendingPlan, setPendingPlan] = useState(null);
+  const [planError, setPlanError] = useState(null);
+  const [showRunDetails, setShowRunDetails] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const [finishedAt, setFinishedAt] = useState(null);
+  const [phase, setPhase] = useState("idle"); // idle | preparing | running | done | failed
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    if (!busy || !startTime) return;
+    tickRef.current = setInterval(() => {
+      setElapsed(Date.now() - startTime);
+    }, 100);
+    return () => {
+      if (tickRef.current) clearInterval(tickRef.current);
+      tickRef.current = null;
+    };
+  }, [busy, startTime]);
+
+  useEffect(() => {
+    if (!showMenu) return;
+    const onDown = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setShowMenu(false);
+      }
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [showMenu]);
+
+  const requestPlan = useCallback(async () => {
+    setPlanError(null);
+    setError(null);
+    setBusy(true);
+    setPhase("preparing");
+    try {
+      const shipped = applyMatplotlibShim(language, code);
+      const isInlineName = (filename || "").toLowerCase().startsWith("inline.");
+      const displayFilename = filename && !isInlineName ? filename : undefined;
+      const plan = await fetchExecutionPlan({
+        code: shipped,
+        language,
+        source: "canvas",
+        display_filename: displayFilename,
+      });
+      setPendingPlan(plan);
+    } catch (err) {
+      setPlanError(err.message || "Could not build execution plan");
+      setPhase("failed");
+    } finally {
+      setBusy(false);
+    }
+  }, [language, code, filename]);
+
+  const approveRun = useCallback(async (plan) => {
+    setBusy(true);
+    setResult(null);
+    setError(null);
+    setStartTime(Date.now());
+    setElapsed(0);
+    setPhase("running");
+    try {
+      const res = await fetch("/api/sandbox/run", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          language: plan.language,
+          code: plan.inline_code,
+          timeout_sec: plan.timeout_sec,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.detail || `HTTP ${res.status}`);
+        setPhase("failed");
+        return;
+      }
+      setResult(data);
+      setPendingPlan(null);
+      setFinishedAt(Date.now());
+      setPhase(data.exit_code === 0 ? "done" : "failed");
+    } catch (err) {
+      setError(err.message || "Run failed");
+      setPhase("failed");
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  const run = requestPlan;
+  const cancelPending = () => { setPendingPlan(null); setPhase("idle"); };
+
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape" && !busy) onClose?.();
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") run();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [run, busy, onClose]);
+
+  const exitOk = result?.exit_code === 0;
+  const displayLang = LANG_DISPLAY[language] || language;
+  const headerFilename = filename
+    || `inline.${displayLang === "javascript" ? "js" : displayLang === "bash" ? "sh" : "py"}`;
+
+  const isPython = language === "python";
+  const showMplNotice = isPython && looksLikeMatplotlib(code);
+  // Crude but useful: flag scripts that read env vars so users can spot
+  // sandbox-scoped variable scoping issues before they run.
+  const readsEnvVars = /os\.environ|process\.env|getenv/.test(code || "");
+
+  const runCommand = useMemo(() => {
+    const base = headerFilename.split("/").pop();
+    if (language === "python") return `python ${base}`;
+    if (language === "javascript") return `node ${base}`;
+    if (language === "bash") return `bash ${base}`;
+    return base;
+  }, [headerFilename, language]);
+
+  const lineCount = (code || "").split("\n").length;
+  const charCount = (code || "").length;
+
+  const statusText =
+    phase === "preparing" ? "Preparing sandbox…" :
+    phase === "running"   ? `Running ${runCommand}…` :
+    phase === "done"      ? `Completed in ${((finishedAt - startTime) / 1000).toFixed(1)}s` :
+    phase === "failed"    ? "Execution failed" :
+                            "Ready to run";
+
+  const statusTone =
+    phase === "preparing" || phase === "running" ? "info" :
+    phase === "done"   ? "ok" :
+    phase === "failed" ? "bad" :
+                          "ok";
+
+  return (
+    <div style={s.backdrop} onClick={onClose}>
+      <div className="canvas-modal" style={s.modal} onClick={(e) => e.stopPropagation()}>
+        <header className="canvas-header">
+          <div className="canvas-header__left">
+            <div className="canvas-header__glyph" aria-hidden="true">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+                   stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                   strokeLinejoin="round">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
+              </svg>
+            </div>
+            <div className="canvas-header__title">{headerFilename.split("/").pop()}</div>
+            <span className="canvas-pill canvas-pill--lang">
+              <span className="canvas-pill__dot" />
+              {mode.typeLabel}
+            </span>
+            <span className="canvas-pill canvas-pill--sandbox">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+                   stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                   strokeLinejoin="round" aria-hidden="true">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+              </svg>
+              Local sandbox
+            </span>
+          </div>
+          <div className="canvas-header__right">
+            <button
+              type="button"
+              className="canvas-run-btn"
+              onClick={pendingPlan ? () => approveRun(pendingPlan) : requestPlan}
+              disabled={busy && phase !== "running"}
+            >
+              {phase === "running" ? (
+                <>
+                  <span className="canvas-run-btn__spinner" />
+                  Running {(elapsed / 1000).toFixed(1)}s
+                </>
+              ) : phase === "preparing" ? (
+                "Preparing…"
+              ) : pendingPlan ? (
+                <>▶ Confirm & run</>
+              ) : (
+                <>▶ Run</>
+              )}
+            </button>
+            <div className="canvas-menu" ref={menuRef}>
+              <button
+                type="button"
+                className="canvas-icon-btn"
+                onClick={() => setShowMenu((v) => !v)}
+                aria-label="More actions"
+                aria-haspopup="menu"
+                aria-expanded={showMenu}
+              >
+                ⋮
+              </button>
+              {showMenu && (
+                <div className="canvas-menu__panel" role="menu">
+                  {onSaveAsFile && (
+                    <button
+                      type="button"
+                      className="canvas-menu__item"
+                      onClick={() => { setShowMenu(false); onSaveAsFile(code, language); }}
+                    >
+                      Save to repo…
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="canvas-menu__item"
+                    onClick={() => {
+                      if (navigator?.clipboard) {
+                        navigator.clipboard.writeText(code).catch(() => {});
+                      }
+                      setShowMenu(false);
+                    }}
+                  >
+                    Copy source
+                  </button>
+                  <button
+                    type="button"
+                    className="canvas-menu__item"
+                    onClick={() => { setShowMenu(false); onClose?.(); }}
+                  >
+                    Close canvas
+                  </button>
+                </div>
+              )}
+            </div>
+            <button type="button" className="canvas-icon-btn canvas-icon-btn--close"
+                    onClick={onClose} aria-label="Close">
+              ✕
+            </button>
+          </div>
+        </header>
+
+        <div className="canvas-status">
+          <div className={`canvas-status__dot canvas-status__dot--${statusTone}`} aria-hidden="true">
+            {phase === "done" ? "✓" :
+             phase === "failed" ? "✕" :
+             phase === "preparing" || phase === "running" ? "" :
+             "▸"}
+          </div>
+          <div className="canvas-status__text">
+            <div className="canvas-status__title">{statusText}</div>
+            <div className="canvas-status__sub">
+              <code>{runCommand}</code>
+              <span className="canvas-status__sep">·</span>
+              Timeout 120s
+              <span className="canvas-status__sep">·</span>
+              Network disabled
+            </div>
+          </div>
+          <button
+            type="button"
+            className="canvas-status__details"
+            onClick={() => setShowRunDetails((v) => !v)}
+            aria-expanded={showRunDetails}
+          >
+            Details {showRunDetails ? "▴" : "▾"}
+          </button>
+        </div>
+
+        {showRunDetails && (
+          <div className="canvas-run-config">
+            <div className="canvas-run-config__row">
+              <span className="canvas-run-config__label">Command</span>
+              <code className="canvas-run-config__val">{runCommand}</code>
+            </div>
+            <div className="canvas-run-config__row">
+              <span className="canvas-run-config__label">Environment</span>
+              <span className="canvas-run-config__val">Local sandbox (isolated)</span>
+            </div>
+            <div className="canvas-run-config__row">
+              <span className="canvas-run-config__label">Timeout</span>
+              <span className="canvas-run-config__val">120s</span>
+            </div>
+            <div className="canvas-run-config__row">
+              <span className="canvas-run-config__label">Network</span>
+              <span className="canvas-run-config__val">Disabled</span>
+            </div>
+            <div className="canvas-run-config__row">
+              <span className="canvas-run-config__label">Snippet</span>
+              <span className="canvas-run-config__val">{lineCount} lines · {charCount} chars</span>
+            </div>
+          </div>
+        )}
+
+        {(showMplNotice || readsEnvVars) && (
+          <div className="canvas-notices">
+            <div className="canvas-notices__label">Notices</div>
+            <div className="canvas-notices__row">
+              {readsEnvVars && (
+                <div className="canvas-notice canvas-notice--info">
+                  <div className="canvas-notice__icon" aria-hidden="true">ⓘ</div>
+                  <div className="canvas-notice__body">
+                    <div className="canvas-notice__title">Reads environment variables</div>
+                    <div className="canvas-notice__desc">
+                      Script reads env vars — only sandbox-scoped variables are present.
+                    </div>
+                  </div>
+                </div>
+              )}
+              {showMplNotice && (
+                <div className="canvas-notice canvas-notice--accent">
+                  <div className="canvas-notice__icon" aria-hidden="true">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                         strokeLinejoin="round">
+                      <polyline points="3 17 9 11 13 15 21 7" />
+                    </svg>
+                  </div>
+                  <div className="canvas-notice__body">
+                    <div className="canvas-notice__title">Matplotlib detected</div>
+                    <div className="canvas-notice__desc">
+                      Plots will render inline in the sandbox output.
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {pendingPlan && (
+          <div className="canvas-confirm">
+            <div className="canvas-confirm__text">
+              GitPilot will run <code>{runCommand}</code> in the local sandbox.
+              Click <strong>Confirm & run</strong> to proceed.
+            </div>
+            <button type="button" className="canvas-confirm__cancel" onClick={cancelPending}>
+              Cancel
+            </button>
+          </div>
+        )}
+        {planError && (
+          <div className="canvas-plan-error">Plan error: {planError}</div>
+        )}
+
+        <div className="canvas-body">
+          <div className="canvas-pane canvas-pane--source">
+            <div className="canvas-pane__head">
+              <div className="canvas-pane__title">Source</div>
+              <div className="canvas-pane__head-right">
+                <span className="canvas-pane__meta">{mode.typeLabel}</span>
+                <button
+                  type="button"
+                  className="canvas-pane__icon"
+                  title="Copy source"
+                  onClick={() => {
+                    if (navigator?.clipboard) {
+                      navigator.clipboard.writeText(code).catch(() => {});
+                    }
+                  }}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                       strokeLinejoin="round">
+                    <rect x="9" y="9" width="13" height="13" rx="2" />
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div className="canvas-editor-wrap">
+              <pre className="canvas-editor-gutter" aria-hidden="true">
+                {Array.from({ length: Math.max(lineCount, 1) }, (_, i) => (
+                  <div key={i} className="canvas-editor-gutter__line">{i + 1}</div>
+                ))}
+              </pre>
+              <textarea
+                className="canvas-editor"
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                spellCheck={false}
+              />
+            </div>
+            <div className="canvas-statusbar">
+              <span>{lineCount} lines</span>
+              <span className="canvas-statusbar__sep">·</span>
+              <span>{mode.typeLabel}</span>
+              <span className="canvas-statusbar__spacer" />
+              <span className="canvas-statusbar__kbd">⌘/Ctrl+Enter to run · Esc to close</span>
+            </div>
+          </div>
+
+          <div className="canvas-pane canvas-pane--output">
+            <div className="canvas-pane__head">
+              <div className="canvas-pane__title">Sandbox output</div>
+              {result && (
+                <button
+                  type="button"
+                  className="canvas-pane__icon-btn"
+                  title="Clear output"
+                  onClick={() => { setResult(null); setError(null); setPhase("idle"); }}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+                       stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                       strokeLinejoin="round" aria-hidden="true">
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                  </svg>
+                  Clear
+                </button>
+              )}
+            </div>
+
+            <div className="canvas-output-body">
+              {!result && !error && phase === "idle" && (
+                <div className="canvas-output-empty">
+                  <div className="canvas-output-empty__title">Ready to run</div>
+                  <div className="canvas-output-empty__sub">
+                    Click <strong>▶ Run</strong> to execute this snippet in the local sandbox.
+                  </div>
+                </div>
+              )}
+
+              {(phase === "preparing" || phase === "running") && (
+                <div className="canvas-output-running">
+                  <span className="canvas-output-running__spinner" aria-hidden="true" />
+                  <span>
+                    {phase === "preparing" ? "Preparing sandbox…" : `Running… ${(elapsed / 1000).toFixed(1)}s`}
+                  </span>
+                </div>
+              )}
+
+              {error && phase === "failed" && (
+                <div className="canvas-result-head canvas-result-head--bad">
+                  <span className="canvas-result-icon">✕</span>
+                  <div>
+                    <div className="canvas-result-title">Execution failed</div>
+                    <pre className="canvas-result-err">{error}</pre>
+                  </div>
+                </div>
+              )}
+
+              {result && (
+                <>
+                  <div className={`canvas-result-head canvas-result-head--${exitOk ? "ok" : "bad"}`}>
+                    <span className="canvas-result-icon">{exitOk ? "✓" : "✕"}</span>
+                    <div className="canvas-result-headtext">
+                      <div className="canvas-result-title">
+                        {exitOk ? `Completed in ${((finishedAt - startTime) / 1000).toFixed(1)}s` : `Failed (exit ${result.exit_code})`}
+                      </div>
+                      <div className="canvas-result-sub">
+                        {BACKEND_LABELS[result.backend] || result.backend}
+                        {typeof result.duration_ms === "number" && ` · ${result.duration_ms} ms`}
+                        {result.timed_out && " · timed out"}
+                        {result.truncated && " · truncated"}
+                      </div>
+                    </div>
+                    <span className="canvas-result-time">
+                      {new Date(finishedAt || Date.now()).toLocaleTimeString([], {
+                        hour: "numeric", minute: "2-digit",
+                      })}
+                    </span>
+                  </div>
+
+                  {result.stdout && (
+                    <div className="canvas-output-section">
+                      <div className="canvas-output-section__label">
+                        <span>STDOUT</span>
+                      </div>
+                      <pre className="canvas-output-pre">{result.stdout}</pre>
+                    </div>
+                  )}
+
+                  {Array.isArray(result.artifacts) && result.artifacts.length > 0 && (
+                    <div className="canvas-output-section">
+                      <div className="canvas-output-section__label">
+                        Artifacts <span className="canvas-output-section__count">{result.artifacts.length}</span>
+                      </div>
+                      <ul className="canvas-artifacts">
+                        {result.artifacts.map((a, i) => (
+                          <ArtifactItem key={i} artifact={a} />
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+
+                  {result.stderr && (
+                    <div className="canvas-output-section">
+                      <div className="canvas-output-section__label canvas-output-section__label--err">
+                        STDERR
+                      </div>
+                      <pre className="canvas-output-pre canvas-output-pre--err">{result.stderr}</pre>
+                    </div>
+                  )}
+
+                  {!result.stdout && !result.stderr && (!result.artifacts || result.artifacts.length === 0) && (
+                    <div className="canvas-output-empty">
+                      <div className="canvas-output-empty__sub">
+                        {exitOk
+                          ? "The script completed without producing any output."
+                          : "The script failed without producing any output."}
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ArtifactItem({ artifact }) {
+  const name = artifact.name || artifact.id || "artifact";
+  const isImage =
+    (artifact.mime && artifact.mime.startsWith("image/")) ||
+    /\.(png|jpg|jpeg|gif|svg|webp)$/i.test(name);
+  const src =
+    artifact.data_url ||
+    artifact.url ||
+    (artifact.content_b64 && artifact.mime
+      ? `data:${artifact.mime};base64,${artifact.content_b64}`
+      : null);
+
+  return (
+    <li className="canvas-artifact">
+      {isImage && src && (
+        <img src={src} alt={name} className="canvas-artifact__img" />
+      )}
+      <div className="canvas-artifact__row">
+        <div className="canvas-artifact__icon" aria-hidden="true">
+          {isImage ? (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                 strokeLinejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <circle cx="8.5" cy="8.5" r="1.5" />
+              <polyline points="21 15 16 10 5 21" />
+            </svg>
+          ) : (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                 strokeLinejoin="round">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+          )}
+        </div>
+        <code className="canvas-artifact__name">{name}</code>
+        {isImage && src && (
+          <span className="canvas-artifact__badge">Plot rendered inline</span>
+        )}
+        {artifact.size != null && (
+          <span className="canvas-artifact__meta">
+            {typeof artifact.size === "number" ? `${artifact.size} bytes` : artifact.size}
+          </span>
+        )}
+        {src && (
+          <a
+            href={src}
+            download={name}
+            className="canvas-artifact__download"
+            title="Download artifact"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+                 stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                 strokeLinejoin="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </a>
+        )}
+      </div>
+    </li>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MarkdownCanvas — split source / rendered preview.  No Run button,
+// no execution plan.  Mode switch lets users pick Source / Preview /
+// Split.  Renderer is dependency-free (escapes HTML, then formats
+// the patterns README files actually use).
+// ---------------------------------------------------------------------------
+
+function MarkdownCanvas({ initialCode, filename, onClose, mode }) {
+  const [view, setView] = useState("split"); // "source" | "preview" | "split"
+  const html = useMemo(() => renderMarkdown(initialCode || ""), [initialCode]);
+  // Inject the rendered-markdown stylesheet once.  Cheaper than a
+  // styled-component dance and keeps the renderer dependency-free.
+  useEffect(() => {
+    const id = "gitpilot-md-style";
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = `
+      .gp-md h1 { font-size: 22px; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #2c2d46; color: #f4f4f5; }
+      .gp-md h2 { font-size: 18px; margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #1f2937; color: #f4f4f5; }
+      .gp-md h3 { font-size: 15px; margin: 14px 0 4px; color: #f4f4f5; }
+      .gp-md h4, .gp-md h5, .gp-md h6 { font-size: 13px; margin: 12px 0 4px; color: #e4e4e7; }
+      .gp-md p  { margin: 8px 0; color: #d4d4d8; }
+      .gp-md ul { margin: 6px 0 6px 18px; padding: 0; color: #d4d4d8; }
+      .gp-md li { margin: 3px 0; }
+      .gp-md a  { color: #93c5fd; }
+      .gp-md code { background: #000; color: #86efac; padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 12.5px; }
+      .gp-md pre.md-code { background: #000; color: #d4d4d8; padding: 10px 12px; border-radius: 6px; overflow: auto; }
+      .gp-md pre.md-code code { background: transparent; color: inherit; padding: 0; }
+      .gp-md strong { color: #f4f4f5; }
+    `;
+    document.head.appendChild(style);
+  }, []);
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const copy = () => {
+    if (navigator?.clipboard) navigator.clipboard.writeText(initialCode || "").catch(() => {});
+  };
+
+  return (
+    <div style={s.backdrop} onClick={onClose}>
+      <div style={s.modal} onClick={(e) => e.stopPropagation()}>
+        <header style={s.header}>
+          <div style={s.headerLeft}>
+            <span style={s.canvasBadge}>Canvas</span>
+            <span style={s.filename}>{filename || "untitled.md"}</span>
+            <span style={s.langPill}>{mode.typeLabel}</span>
+          </div>
+          <div style={s.headerRight}>
+            {/* Mode switch — Source / Preview / Split.  Default split
+                because users often want to compare raw markdown to
+                rendered output side-by-side. */}
+            <div style={s.segGroup} role="tablist">
+              {["source", "preview", "split"].map((v) => (
+                <button
+                  key={v}
+                  type="button"
+                  role="tab"
+                  aria-selected={view === v}
+                  onClick={() => setView(v)}
+                  style={view === v ? s.segActive : s.seg}
+                >
+                  {v[0].toUpperCase() + v.slice(1)}
+                </button>
+              ))}
+            </div>
+            <button type="button" style={s.btn} onClick={copy}>
+              Copy
+            </button>
+            <button type="button" style={s.btnClose} onClick={onClose} aria-label="Close">
+              ✕
+            </button>
+          </div>
+        </header>
+
+        <div style={view === "split" ? s.body : s.bodySingle}>
+          {(view === "source" || view === "split") && (
+            <div style={s.editorPane}>
+              <div style={s.paneLabel}>Markdown source</div>
+              <pre style={s.mdSource}>{initialCode || ""}</pre>
+            </div>
+          )}
+          {(view === "preview" || view === "split") && (
+            <div style={s.outputPane}>
+              <div style={s.paneLabel}>Rendered preview</div>
+              <div
+                className="gp-md"
+                style={s.mdRendered}
+                // Renderer escapes HTML before formatting, so the
+                // injected string is safe.  No <script>, no event
+                // handlers slip through.
+                dangerouslySetInnerHTML={{ __html: html }}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// TextCanvas — viewer-only Canvas for non-runnable, non-markdown
+// file types (JSON, YAML, CSV, HTML, plain text, ...).  No Run, no
+// plan, no markdown rendering.  Useful when a user clicks Open in
+// Canvas on, say, a config file just to read it.
+// ---------------------------------------------------------------------------
+
+function TextCanvas({ initialCode, filename, onClose, mode }) {
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === "Escape") onClose?.(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const copy = () => {
+    if (navigator?.clipboard) navigator.clipboard.writeText(initialCode || "").catch(() => {});
+  };
+
+  return (
+    <div style={s.backdrop} onClick={onClose}>
+      <div style={s.modal} onClick={(e) => e.stopPropagation()}>
+        <header style={s.header}>
+          <div style={s.headerLeft}>
+            <span style={s.canvasBadge}>Canvas</span>
+            <span style={s.filename}>{filename || "untitled"}</span>
+            <span style={s.langPill}>{mode.typeLabel}</span>
+          </div>
+          <div style={s.headerRight}>
+            <button type="button" style={s.btn} onClick={copy}>
+              Copy
+            </button>
+            <button type="button" style={s.btnClose} onClick={onClose} aria-label="Close">
+              ✕
+            </button>
+          </div>
+        </header>
+
+        <div style={s.bodySingle}>
+          <div style={s.editorPane}>
+            <div style={s.paneLabel}>Source</div>
+            <pre style={s.mdSource}>{initialCode || ""}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const s = {
+  backdrop: {
+    position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
+    display: "flex", alignItems: "center", justifyContent: "center",
+    zIndex: 100,
+  },
+  modal: {
+    width: "min(1200px, 96vw)", height: "min(800px, 92vh)",
+    background: "#1a1b26", border: "1px solid #2a2b36", borderRadius: 10,
+    display: "flex", flexDirection: "column",
+    color: "#e6e8ff", overflow: "hidden",
+  },
+  header: {
+    display: "flex", alignItems: "center", justifyContent: "space-between",
+    padding: "10px 14px", borderBottom: "1px solid #2a2b36",
+    background: "#14152a",
+  },
+  headerLeft:  { display: "flex", alignItems: "center", gap: 10 },
+  headerRight: { display: "flex", alignItems: "center", gap: 8 },
+  canvasBadge: {
+    fontSize: 10, fontWeight: 700, letterSpacing: "0.06em",
+    padding: "2px 8px", borderRadius: 4,
+    background: "#1e3a5f", color: "#93c5fd", textTransform: "uppercase",
+  },
+  filename: { fontFamily: "ui-monospace, monospace", fontSize: 13 },
+  langPill: {
+    fontSize: 11, color: "#9092b5",
+    padding: "1px 6px", borderRadius: 4, background: "#0e0f24",
+    border: "1px solid #2c2d46",
+  },
+  btn: {
+    padding: "6px 12px", fontSize: 12, fontWeight: 600,
+    background: "#3B82F6", color: "#fff",
+    border: "none", borderRadius: 6, cursor: "pointer",
+  },
+  btnClose: {
+    padding: "4px 10px", fontSize: 14,
+    background: "transparent", color: "#9092b5",
+    border: "1px solid #2c2d46", borderRadius: 6, cursor: "pointer",
+  },
+  body: { flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden" },
+  editorPane: {
+    display: "flex", flexDirection: "column",
+    borderRight: "1px solid #2a2b36", padding: 12, gap: 6,
+  },
+  outputPane: {
+    display: "flex", flexDirection: "column",
+    padding: 12, gap: 6, overflow: "auto",
+  },
+  paneLabel: { fontSize: 11, color: "#9092b5", textTransform: "uppercase", letterSpacing: "0.06em" },
+  editor: {
+    flex: 1, resize: "none",
+    background: "#0d0e17", color: "#e6e8ff",
+    border: "1px solid #2c2d46", borderRadius: 6, padding: 10,
+    fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 13, lineHeight: 1.5,
+  },
+  editorFoot: { display: "flex", justifyContent: "space-between", fontSize: 11, color: "#9092b5" },
+  shimHint:  { color: "#86efac" },
+  kbdHint:   { color: "#6b7280" },
+  empty: { color: "#9092b5", fontSize: 13, padding: "20px 8px", textAlign: "center" },
+  resultHead: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 8 },
+  outputSection: { marginTop: 6 },
+  outputLabel: { cursor: "pointer", fontSize: 11, color: "#9092b5" },
+  stdout: {
+    margin: "4px 0 0", padding: "8px 10px", borderRadius: 4,
+    background: "#000", color: "#d4d4d8", fontSize: 12,
+    fontFamily: "ui-monospace, monospace", whiteSpace: "pre-wrap",
+  },
+  stderr: {
+    margin: "4px 0 0", padding: "8px 10px", borderRadius: 4,
+    background: "#000", color: "#fca5a5", fontSize: 12,
+    fontFamily: "ui-monospace, monospace", whiteSpace: "pre-wrap",
+  },
+  errorBox: {
+    padding: "8px 10px", borderRadius: 6,
+    background: "#3d1111", border: "1px solid #7f1d1d", color: "#fca5a5", fontSize: 12,
+  },
+  errorPre: { margin: "4px 0 0", whiteSpace: "pre-wrap" },
+  okPill:      { padding: "2px 8px", borderRadius: 10, fontSize: 11, fontWeight: 600, background: "#0d3320", color: "#86efac", border: "1px solid #166534" },
+  failPill:    { padding: "2px 8px", borderRadius: 10, fontSize: 11, fontWeight: 600, background: "#3d1111", color: "#fca5a5", border: "1px solid #7f1d1d" },
+  warnPill:    { padding: "2px 8px", borderRadius: 10, fontSize: 11, fontWeight: 600, background: "#3d2d11", color: "#fde68a", border: "1px solid #854d0e" },
+  backendPill: { padding: "2px 8px", borderRadius: 10, fontSize: 11, color: "#c3c5dd", border: "1px solid #2c2d46" },
+  dim: { fontSize: 11, color: "#9092b5" },
+  artifactList: { listStyle: "none", padding: 0, margin: "6px 0 0" },
+  artifactItem: { padding: "3px 0", fontSize: 12 },
+  planStrip: {
+    padding: "8px 12px",
+    background: "#0d0e17",
+    borderBottom: "1px solid #2a2b36",
+  },
+  planErrorStrip: {
+    padding: "8px 12px",
+    fontSize: 12,
+    color: "#fca5a5",
+    background: "#3d1111",
+    borderBottom: "1px solid #7f1d1d",
+  },
+  // Single-pane layout used by MarkdownCanvas (when not in split) and
+  // TextCanvas.  Stretches the single child column across the full
+  // modal body width.
+  bodySingle: { flex: 1, display: "grid", gridTemplateColumns: "1fr", overflow: "hidden" },
+  // Source / Preview / Split segmented control.
+  segGroup: { display: "inline-flex", background: "#0d0e17", border: "1px solid #2c2d46", borderRadius: 6, overflow: "hidden" },
+  seg: {
+    padding: "5px 10px", fontSize: 11,
+    background: "transparent", color: "#9092b5",
+    border: "none", cursor: "pointer",
+  },
+  segActive: {
+    padding: "5px 10px", fontSize: 11, fontWeight: 600,
+    background: "#1e3a5f", color: "#fff",
+    border: "none", cursor: "pointer",
+  },
+  // Markdown source pane — read-only preformatted view, distinct from
+  // the editable <textarea> the CodeCanvas uses.
+  mdSource: {
+    flex: 1, margin: 0, padding: 12,
+    background: "#0d0e17", color: "#e6e8ff",
+    border: "1px solid #2c2d46", borderRadius: 6,
+    fontFamily: "ui-monospace, SFMono-Regular, monospace", fontSize: 13, lineHeight: 1.55,
+    whiteSpace: "pre-wrap", wordBreak: "break-word",
+    overflow: "auto",
+  },
+  // Rendered preview pane.  Subset of CSS that matches the look of
+  // GitHub's rendered README without pulling in a markdown library.
+  mdRendered: {
+    flex: 1, padding: "8px 16px 24px",
+    background: "#0d0e17", color: "#e6e8ff",
+    border: "1px solid #2c2d46", borderRadius: 6,
+    overflow: "auto",
+    fontSize: 14, lineHeight: 1.6,
+  },
+};

frontend/components/SandboxStatusWidget.jsx

@@ -0,0 +1,176 @@
+// frontend/components/SandboxStatusWidget.jsx
+//
+// Always-visible sandbox health pill for the sidebar.  Polls
+// /api/sandbox/status every 30s and surfaces:
+//
+//   ● MatrixLab Ready          (backend up, /health green)
+//   ⚠ MatrixLab unavailable     (network/timeout on /health)
+//   ● Local active              (using subprocess by choice)
+//
+// When degraded, offers two one-click recoveries:
+//   * Repair  — opens Settings → Sandbox to run the install/repair flow
+//   * Use Local — flips backend to subprocess via PUT /api/sandbox/config
+//
+// Purely informational: failures here never block the chat / planner.
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+const POLL_MS = 30_000;
+
+const BACKEND_LABEL = {
+  subprocess: "Local",
+  matrixlab: "MatrixLab",
+  off: "Pass-through",
+};
+
+export default function SandboxStatusWidget({ onOpenSettings }) {
+  const [status, setStatus] = useState(null);
+  const [error, setError] = useState(null);
+  const [switching, setSwitching] = useState(false);
+  const timerRef = useRef(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await fetch("/api/sandbox/status");
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.detail || `HTTP ${res.status}`);
+        return;
+      }
+      setStatus(data);
+      setError(null);
+    } catch (err) {
+      setError(err.message || "Unable to reach sandbox status");
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    timerRef.current = setInterval(refresh, POLL_MS);
+    return () => clearInterval(timerRef.current);
+  }, [refresh]);
+
+  const switchToLocal = async () => {
+    setSwitching(true);
+    try {
+      await fetch("/api/sandbox/config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ backend: "subprocess" }),
+      });
+      await refresh();
+    } finally {
+      setSwitching(false);
+    }
+  };
+
+  if (!status && !error) {
+    return (
+      <div style={s.shell}>
+        <div style={s.title}>Sandbox</div>
+        <div style={s.dim}>Checking…</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={s.shell}>
+        <div style={s.title}>Sandbox</div>
+        <div style={{ ...s.statusRow, color: "#fca5a5" }}>
+          <span>⚠</span> Status check failed
+        </div>
+        <div style={s.dim}>{error}</div>
+      </div>
+    );
+  }
+
+  const backend = status.backend || "subprocess";
+  const ok = !!status.ok;
+  const label = BACKEND_LABEL[backend] || backend;
+  const dot = ok ? "●" : "⚠";
+  const dotColor = ok ? "#10B981" : "#f59e0b";
+  const stateText = ok ? "Ready" : "Unavailable";
+
+  return (
+    <div style={s.shell}>
+      <div style={s.titleRow}>
+        <span style={s.title}>Sandbox</span>
+        <button type="button" onClick={refresh} style={s.refresh}
+                title="Refresh sandbox status">↻</button>
+      </div>
+      <div style={s.statusRow}>
+        <span style={{ color: dotColor, marginRight: 6 }}>{dot}</span>
+        <strong>{label}</strong>
+        <span style={s.dim}> · {stateText}</span>
+      </div>
+      {status.matrixlab_url && backend === "matrixlab" && (
+        <div style={s.metaRow}>
+          <span style={s.metaKey}>URL</span>
+          <span style={s.metaVal}>{status.matrixlab_url}</span>
+        </div>
+      )}
+      <div style={s.metaRow}>
+        <span style={s.metaKey}>Timeout</span>
+        <span style={s.metaVal}>{status.timeout_sec}s</span>
+      </div>
+      <div style={s.metaRow}>
+        <span style={s.metaKey}>Network</span>
+        <span style={s.metaVal}>
+          {status.allow_network ? "Enabled" : "Disabled"}
+        </span>
+      </div>
+
+      <div style={s.actions}>
+        {onOpenSettings && (
+          <button type="button" onClick={onOpenSettings} style={s.action}>
+            {ok ? "Change" : "Repair"}
+          </button>
+        )}
+        {!ok && backend === "matrixlab" && (
+          <button
+            type="button"
+            onClick={switchToLocal}
+            disabled={switching}
+            style={{ ...s.action, opacity: switching ? 0.6 : 1 }}
+            title="Switch the sandbox backend to Local subprocess"
+          >
+            {switching ? "Switching…" : "Use Local"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const s = {
+  shell: {
+    padding: "10px 12px",
+    background: "#0d0e17",
+    border: "1px solid #1f2937",
+    borderRadius: 8,
+    fontFamily: "system-ui, sans-serif",
+    fontSize: 12,
+    color: "#e4e4e7",
+  },
+  titleRow: { display: "flex", justifyContent: "space-between", alignItems: "center" },
+  title: {
+    fontSize: 10, fontWeight: 700, letterSpacing: "0.06em",
+    color: "#9092b5", textTransform: "uppercase",
+  },
+  refresh: {
+    background: "transparent", color: "#71717a", border: "none",
+    cursor: "pointer", fontSize: 14, padding: 0,
+  },
+  statusRow: { marginTop: 6, display: "flex", alignItems: "center" },
+  metaRow: { marginTop: 4, display: "flex", justifyContent: "space-between" },
+  metaKey: { color: "#9092b5", fontSize: 11 },
+  metaVal: { color: "#d4d4d8", fontSize: 11, fontFamily: "ui-monospace, monospace" },
+  actions: { display: "flex", gap: 6, marginTop: 8 },
+  action: {
+    flex: 1, padding: "4px 8px", fontSize: 11,
+    background: "transparent", color: "#a1a1aa",
+    border: "1px solid #3F3F46", borderRadius: 4, cursor: "pointer",
+  },
+  dim: { color: "#71717a", fontSize: 11 },
+};