Deploy from c4b1af84

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,1229 @@
+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,
+} 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.
+   */
+  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);
+    if (session.branch && session.branch !== currentBranch) {
+      handleBranchChange(session.branch);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchSessionMessages, currentBranch]);
+
+  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(
+        "Waiting for the server to be ready. This may take a few seconds on first start."
+      );
+
+      // 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", "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 === "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/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,9 @@
+// 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";

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,167 @@
+import React from "react";
+import PlanView from "./PlanView.jsx";
+
+export default function AssistantMessage({ answer, plan, executionLog, planStatus }) {
+  // ``planStatus`` is optional metadata about the lifecycle of the plan
+  // attached to this message: "executed" | "rejected" | null.  It drives
+  // the badge next to the Action Plan header so the user can tell at a
+  // glance, in chat history, whether a previous plan was approved or
+  // dismissed.  Defaults to null (no badge) to keep the legacy render
+  // path untouched.
+  const styles = {
+    container: {
+      marginBottom: "20px",
+      padding: "20px",
+      backgroundColor: "#18181B", // Zinc-900
+      borderRadius: "12px",
+      border: "1px solid #27272A", // Zinc-800
+      color: "#F4F4F5", // Zinc-100
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    },
+    section: {
+      marginBottom: "20px",
+    },
+    lastSection: {
+      marginBottom: "0",
+    },
+    header: {
+      display: "flex",
+      alignItems: "center",
+      marginBottom: "12px",
+      paddingBottom: "8px",
+      borderBottom: "1px solid #3F3F46", // Zinc-700
+    },
+    title: {
+      fontSize: "12px",
+      fontWeight: "600",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      color: "#A1A1AA", // Zinc-400
+      margin: 0,
+    },
+    content: {
+      fontSize: "14px",
+      lineHeight: "1.6",
+      whiteSpace: "pre-wrap",
+    },
+    executionList: {
+      listStyle: "none",
+      padding: 0,
+      margin: 0,
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+    },
+    executionStep: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      padding: "10px",
+      backgroundColor: "#09090B", // Zinc-950
+      borderRadius: "6px",
+      border: "1px solid #27272A",
+      fontSize: "13px",
+    },
+    stepNumber: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#10B981", // Emerald-500
+      textTransform: "uppercase",
+    },
+    stepSummary: {
+      color: "#D4D4D8", // Zinc-300
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    },
+  };
+
+  // Only show Action Plan section when there are actual file actions.
+  // For Lite Mode Q&A responses (all steps have 0 files), the plan
+  // just duplicates the answer — hiding it avoids showing the same text 3x.
+  const hasFileActions = plan?.steps?.some(s => s.files?.length > 0);
+
+  return (
+    <div className="chat-message-ai" style={styles.container}>
+      {/* Answer section */}
+      <section style={styles.section}>
+        <header style={styles.header}>
+          <h3 style={styles.title}>Answer</h3>
+        </header>
+        <div style={styles.content}>
+          <p style={{ margin: 0 }}>{answer}</p>
+        </div>
+      </section>
+
+      {/* Action Plan section — only when there are file changes */}
+      {plan && hasFileActions && (
+        <section style={styles.section}>
+          <header style={{ ...styles.header, display: "flex", alignItems: "center", gap: "10px" }}>
+            <h3 style={{ ...styles.title, color: "#D95C3D", margin: 0 }}>Action Plan</h3>
+            {planStatus === "executed" && (
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#10B981",
+                  border: "1px solid rgba(16, 185, 129, 0.35)",
+                  background: "rgba(16, 185, 129, 0.08)",
+                  borderRadius: "6px",
+                  padding: "2px 6px",
+                  letterSpacing: "0.02em",
+                }}
+                title="This plan was approved and executed."
+              >
+                ✓ Executed
+              </span>
+            )}
+            {planStatus === "rejected" && (
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#9CA3AF",
+                  border: "1px solid rgba(156, 163, 175, 0.35)",
+                  background: "rgba(156, 163, 175, 0.08)",
+                  borderRadius: "6px",
+                  padding: "2px 6px",
+                  letterSpacing: "0.02em",
+                }}
+                title="This plan was rejected. No files were changed."
+              >
+                ✕ Rejected
+              </span>
+            )}
+          </header>
+          <div>
+            <PlanView plan={plan} />
+          </div>
+        </section>
+      )}
+
+      {/* Execution Log section (shown after execution) */}
+      {executionLog && (
+        <section style={styles.lastSection}>
+          <header style={styles.header}>
+            <h3 style={{ ...styles.title, color: "#10B981" }}>Execution Log</h3>
+          </header>
+          <div>
+            <ul style={styles.executionList}>
+              {executionLog.steps.map((s) => (
+                <li key={s.step_number} style={styles.executionStep}>
+                  <span style={styles.stepNumber}>Step {s.step_number}</span>
+                  <span style={styles.stepSummary}>{s.summary}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+      )}
+    </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,940 @@
+// 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 DiffStats from "./DiffStats.jsx";
+import DiffViewer from "./DiffViewer.jsx";
+import CreatePRButton from "./CreatePRButton.jsx";
+import StreamingMessage from "./StreamingMessage.jsx";
+import { SessionWebSocket } from "../utils/ws.js";
+
+// 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("");
+
+  // 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);
+  const wsRef = useRef(null);
+
+  // Ref mirrors streamingEvents so WS callbacks avoid stale closures
+  const streamingEventsRef = useRef([]);
+  useEffect(() => { streamingEventsRef.current = streamingEvents; }, [streamingEvents]);
+
+  // 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]);
+
+  // ---------------------------------------------------------------------------
+  // 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;
+    return Object.keys(meta).length > 0 ? meta : null;
+  };
+
+  const send = async () => {
+    if (!repo || !goal.trim()) return;
+
+    const text = goal.trim();
+
+    // Clear input immediately (Claude Code behavior)
+    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,
+          }),
+          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");
+      }
+
+      // Guard: a plan with no executable file actions is not a plan we
+      // can approve.  This happens when the planner/explorer agents
+      // refused (tool-loop hallucination or a real safety refusal) and
+      // CrewAI returned a schema-valid but empty payload.  Without
+      // this guard the Approve & execute / Reject plan buttons would
+      // render against a payload that can't actually be executed.
+      const planSteps = Array.isArray(data?.steps)
+        ? data.steps
+        : Array.isArray(data?.plan?.steps)
+        ? data.plan.steps
+        : [];
+      const hasExecutableFiles = planSteps.some(
+        (s) =>
+          Array.isArray(s?.files) &&
+          s.files.some((f) => ["CREATE", "MODIFY", "DELETE"].includes(f?.action)),
+      );
+
+      // Extract summary from nested plan structure or top-level
+      const summary =
+        data.plan?.summary || data.summary || data.message ||
+        "Here is the proposed plan for your request.";
+
+      if (hasExecutableFiles) {
+        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 {
+        // No executable steps — surface a clear failure to the user
+        // instead of half-rendering a plan card and dangling buttons.
+        // The most common cause is the explorer/planner agent loop
+        // (CrewAI same-input limiter blocks repeat tool calls, the
+        // agent panics and "refuses").  Encourage a retry rather than
+        // letting the user click Approve on nothing.
+        setPlan(null);
+        const failureText =
+          "I couldn't produce a plan for that request. The agent may have " +
+          "got stuck reading the same file twice. Try rephrasing, or " +
+          "switch to a stronger model in Settings → Provider.";
+        const failureMsg = {
+          from: "ai",
+          role: "system",
+          content: failureText,
+        };
+        setMessages((prev) => [...prev, failureMsg]);
+        persistMessage(sid, "system", failureText);
+        setStatus("No executable 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;
+    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);
+    }
+  };
+
+  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,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.detail || "Execution failed");
+
+      setStatus(data.message || "Execution completed.");
+
+      const completionMsg = {
+        from: "ai",
+        role: "assistant",
+        answer: data.message || "Execution completed.",
+        content: data.message || "Execution completed.",
+        executionLog: data.executionLog,
+        diff: data.diff,
+      };
+
+      // 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";
+            }
+          }
+
+          return (
+            <div key={idx}>
+              <AssistantMessage
+                answer={m.answer || m.content}
+                plan={m.plan}
+                executionLog={m.executionLog}
+                planStatus={planStatus}
+              />
+              {/* 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>
+
+      {/* 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>
+          <ContextMeter sessionId={sessionId} />
+        </div>
+      </div>
+
+      {/* Diff Viewer overlay */}
+      {showDiffViewer && (
+        <DiffViewer
+          diff={diffData}
+          onClose={() => setShowDiffViewer(false)}
+        />
+      )}
+    </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/FileTree.jsx

@@ -0,0 +1,307 @@
+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);
+
+  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 && (
+        <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} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Recursive Node Component
+function TreeNode({ node, level }) {
+  const [expanded, setExpanded] = useState(false);
+  const isFolder = node.children && node.children.length > 0;
+  
+  const icon = isFolder ? (expanded ? "📂" : "📁") : "📄";
+
+  return (
+    <div>
+      <div 
+        onClick={() => isFolder && setExpanded(!expanded)}
+        style={{ 
+          padding: "4px 0", 
+          paddingLeft: `${level * 12}px`,
+          cursor: isFolder ? "pointer" : "default",
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          color: isFolder ? "#EDEDED" : "#A1A1AA",
+          whiteSpace: "nowrap"
+        }}
+      >
+        <span style={{ fontSize: "14px", opacity: 0.7 }}>{icon}</span>
+        <span>{node.name}</span>
+      </div>
+      
+      {isFolder && expanded && (
+        <div>
+          {node.children.map(child => (
+            <TreeNode key={child.path} node={child} level={level + 1} />
+          ))}
+        </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,231 @@
+import React from "react";
+
+export default function PlanView({ plan }) {
+  if (!plan) return null;
+
+  // Calculate totals for each action type
+  const totals = { CREATE: 0, MODIFY: 0, DELETE: 0 };
+  plan.steps.forEach((step) => {
+    step.files.forEach((file) => {
+      totals[file.action] = (totals[file.action] || 0) + 1;
+    });
+  });
+
+  const theme = {
+    bg: "#18181B",
+    border: "#27272A",
+    textPrimary: "#EDEDED",
+    textSecondary: "#A1A1AA",
+    successBg: "rgba(16, 185, 129, 0.1)",
+    successText: "#10B981",
+    warningBg: "rgba(245, 158, 11, 0.1)",
+    warningText: "#F59E0B",
+    dangerBg: "rgba(239, 68, 68, 0.1)",
+    dangerText: "#EF4444",
+  };
+
+  const styles = {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "20px",
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    },
+    header: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      paddingBottom: "16px",
+      borderBottom: `1px solid ${theme.border}`,
+    },
+    goal: {
+      fontSize: "14px",
+      fontWeight: "600",
+      color: theme.textPrimary,
+    },
+    summary: {
+      fontSize: "13px",
+      color: theme.textSecondary,
+      lineHeight: "1.5",
+    },
+    totals: {
+      display: "flex",
+      gap: "12px",
+      flexWrap: "wrap",
+    },
+    totalBadge: {
+      fontSize: "11px",
+      fontWeight: "500",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      border: "1px solid transparent",
+    },
+    totalCreate: {
+      backgroundColor: theme.successBg,
+      color: theme.successText,
+      borderColor: "rgba(16, 185, 129, 0.2)",
+    },
+    totalModify: {
+      backgroundColor: theme.warningBg,
+      color: theme.warningText,
+      borderColor: "rgba(245, 158, 11, 0.2)",
+    },
+    totalDelete: {
+      backgroundColor: theme.dangerBg,
+      color: theme.dangerText,
+      borderColor: "rgba(239, 68, 68, 0.2)",
+    },
+    stepsList: {
+      listStyle: "none",
+      padding: 0,
+      margin: 0,
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px",
+    },
+    step: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      position: "relative",
+    },
+    stepHeader: {
+      display: "flex",
+      alignItems: "baseline",
+      gap: "8px",
+      fontSize: "13px",
+      fontWeight: "600",
+      color: theme.textPrimary,
+    },
+    stepNumber: {
+      color: theme.textSecondary,
+      fontSize: "11px",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+    },
+    stepDescription: {
+      fontSize: "13px",
+      color: theme.textSecondary,
+      lineHeight: "1.5",
+      margin: 0,
+    },
+    fileList: {
+      marginTop: "8px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      backgroundColor: "#131316",
+      padding: "8px 12px",
+      borderRadius: "6px",
+      border: `1px solid ${theme.border}`,
+    },
+    fileItem: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      fontSize: "12px",
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    },
+    actionBadge: {
+      padding: "2px 6px",
+      borderRadius: "4px",
+      fontSize: "10px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      minWidth: "55px",
+      textAlign: "center",
+      letterSpacing: "0.02em",
+    },
+    path: {
+      color: "#D4D4D8",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+    },
+    risks: {
+      marginTop: "8px",
+      fontSize: "12px",
+      color: theme.warningText,
+      backgroundColor: "rgba(245, 158, 11, 0.05)",
+      padding: "8px 12px",
+      borderRadius: "6px",
+      border: "1px solid rgba(245, 158, 11, 0.1)",
+      display: "flex",
+      gap: "6px",
+      alignItems: "flex-start",
+    },
+  };
+
+  const getActionStyle = (action) => {
+    switch (action) {
+      case "CREATE": return styles.totalCreate;
+      case "MODIFY": return styles.totalModify;
+      case "DELETE": return styles.totalDelete;
+      default: return {};
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      {/* Header & Summary */}
+      <div style={styles.header}>
+        <div style={styles.goal}>Goal: {plan.goal}</div>
+        <div style={styles.summary}>{plan.summary}</div>
+      </div>
+
+      {/* Totals Summary */}
+      <div style={styles.totals}>
+        {totals.CREATE > 0 && (
+          <span style={{ ...styles.totalBadge, ...styles.totalCreate }}>
+            {totals.CREATE} to create
+          </span>
+        )}
+        {totals.MODIFY > 0 && (
+          <span style={{ ...styles.totalBadge, ...styles.totalModify }}>
+            {totals.MODIFY} to modify
+          </span>
+        )}
+        {totals.DELETE > 0 && (
+          <span style={{ ...styles.totalBadge, ...styles.totalDelete }}>
+            {totals.DELETE} to delete
+          </span>
+        )}
+      </div>
+
+      {/* Steps List */}
+      <ol style={styles.stepsList}>
+        {plan.steps.map((s) => (
+          <li key={s.step_number} style={styles.step}>
+            <div style={styles.stepHeader}>
+              <span style={styles.stepNumber}>Step {s.step_number}</span>
+              <span>{s.title}</span>
+            </div>
+            <p style={styles.stepDescription}>{s.description}</p>
+
+            {/* Files List */}
+            {s.files && s.files.length > 0 && (
+              <div style={styles.fileList}>
+                {s.files.map((file, idx) => (
+                  <div key={idx} style={styles.fileItem}>
+                    <span style={{ ...styles.actionBadge, ...getActionStyle(file.action) }}>
+                      {file.action}
+                    </span>
+                    <span style={styles.path}>{file.path}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Risks */}
+            {s.risks && (
+              <div style={styles.risks}>
+                <span>⚠️</span>
+                <span>{s.risks}</span>
+              </div>
+            )}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

frontend/components/ProjectContextPanel.jsx

@@ -0,0 +1,572 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import FileTree from "./FileTree.jsx";
+import BranchPicker from "./BranchPicker.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>
+    </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/SessionItem.jsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+
+/**
+ * SessionItem — a single row in the sessions sidebar.
+ *
+ * Shows status dot (pulsing/static), title, timestamp, message count.
+ * Claude-Code-on-Web parity: active=amber pulse, completed=green,
+ * failed=red, waiting=blue.
+ */
+export default function SessionItem({ session, isActive, onSelect, onDelete }) {
+  const [hovering, setHovering] = useState(false);
+
+  const status = session.status || "active";
+
+  const dotColor = {
+    active: "#F59E0B",
+    completed: "#10B981",
+    failed: "#EF4444",
+    waiting: "#3B82F6",
+    paused: "#6B7280",
+  }[status] || "#6B7280";
+
+  const isPulsing = status === "active";
+
+  const timeAgo = formatTimeAgo(session.updated_at);
+
+  // Prefer name (set from first user prompt) over generic fallback
+  const title =
+    session.name ||
+    (session.branch ? `${session.branch}` : `Session ${session.id?.slice(0, 8)}`);
+
+  return (
+    <div
+      style={{
+        ...styles.row,
+        backgroundColor: isActive
+          ? "rgba(59, 130, 246, 0.08)"
+          : hovering
+          ? "rgba(255,255,255,0.03)"
+          : "transparent",
+        borderLeft: isActive ? "2px solid #3B82F6" : "2px solid transparent",
+      }}
+      onClick={onSelect}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+    >
+      <style>{`
+        @keyframes session-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.4; }
+        }
+      `}</style>
+
+      {/* Status dot */}
+      <div
+        style={{
+          ...styles.dot,
+          backgroundColor: dotColor,
+          animation: isPulsing ? "session-pulse 1.5s ease-in-out infinite" : "none",
+        }}
+      />
+
+      {/* Content */}
+      <div style={styles.content}>
+        <div style={styles.title}>{title}</div>
+        <div style={styles.meta}>
+          {timeAgo}
+          {session.mode && (
+            <span style={{
+              ...styles.badge,
+              background: session.mode === "github" ? "#1e3a5f" : "#2d2d1f",
+              color: session.mode === "github" ? "#60a5fa" : "#d4d48a",
+            }}>
+              {session.mode === "github" ? "GH" : session.mode === "local-git" ? "Git" : "Dir"}
+            </span>
+          )}
+          {session.message_count > 0 && (
+            <span style={styles.badge}>{session.message_count} msgs</span>
+          )}
+        </div>
+      </div>
+
+      {/* Delete button (on hover) */}
+      {hovering && (
+        <button
+          type="button"
+          style={styles.deleteBtn}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete?.();
+          }}
+          title="Delete session"
+        >
+          &times;
+        </button>
+      )}
+    </div>
+  );
+}
+
+function formatTimeAgo(isoStr) {
+  if (!isoStr) return "";
+  try {
+    const date = new Date(isoStr);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMin = Math.floor(diffMs / 60000);
+    if (diffMin < 1) return "just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    return `${diffDay}d ago`;
+  } catch {
+    return "";
+  }
+}
+
+const styles = {
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "8px 10px",
+    borderRadius: 6,
+    cursor: "pointer",
+    transition: "background-color 0.15s",
+    position: "relative",
+    marginBottom: 2,
+    animation: "session-fade-in 0.25s ease-out",
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    flexShrink: 0,
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+    overflow: "hidden",
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: 500,
+    color: "#E4E4E7",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  meta: {
+    fontSize: 10,
+    color: "#71717A",
+    marginTop: 2,
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+  },
+  badge: {
+    fontSize: 9,
+    background: "#27272A",
+    padding: "1px 5px",
+    borderRadius: 8,
+    color: "#A1A1AA",
+  },
+  deleteBtn: {
+    position: "absolute",
+    right: 6,
+    top: 6,
+    width: 18,
+    height: 18,
+    borderRadius: 3,
+    border: "none",
+    background: "rgba(239, 68, 68, 0.15)",
+    color: "#EF4444",
+    fontSize: 14,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 1,
+  },
+};

frontend/components/SessionSidebar.jsx

@@ -0,0 +1,181 @@
+import React, { useEffect, useRef, useState } from "react";
+import SessionItem from "./SessionItem.jsx";
+
+/**
+ * SessionSidebar — Claude-Code-on-Web parity.
+ *
+ * Shows a scrollable list of coding sessions with status indicators,
+ * timestamps, and a "New Session" button. Additive — does not modify
+ * any existing component.
+ */
+export default function SessionSidebar({
+  repo,
+  activeSessionId,
+  onSelectSession,
+  onNewSession,
+  onDeleteSession,
+  refreshNonce = 0,
+}) {
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const pollRef = useRef(null);
+
+  const repoFullName = repo?.full_name || (repo ? `${repo.owner}/${repo.name}` : null);
+
+  // Fetch sessions
+  useEffect(() => {
+    if (!repoFullName) {
+      setSessions([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchSessions = async () => {
+      setLoading(true);
+      try {
+        const token = localStorage.getItem("github_token");
+        const headers = token ? { Authorization: `Bearer ${token}` } : {};
+        const res = await fetch(`/api/sessions`, { headers, cache: "no-cache" });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (cancelled) return;
+
+        // Filter to current repo
+        const filtered = (data.sessions || []).filter(
+          (s) => s.repo === repoFullName
+        );
+        setSessions(filtered);
+      } catch (err) {
+        console.warn("Failed to fetch sessions:", err);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+
+    fetchSessions();
+
+    // Poll every 15s for status updates
+    pollRef.current = setInterval(fetchSessions, 15000);
+
+    return () => {
+      cancelled = true;
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [repoFullName, refreshNonce]);
+
+  const handleDelete = async (sessionId) => {
+    try {
+      const token = localStorage.getItem("github_token");
+      const headers = token ? { Authorization: `Bearer ${token}` } : {};
+      await fetch(`/api/sessions/${sessionId}`, { method: "DELETE", headers });
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+      // Notify parent so it can clear the chat if this was the active session
+      onDeleteSession?.(sessionId);
+    } catch (err) {
+      console.warn("Failed to delete session:", err);
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <style>{animStyles}</style>
+
+      {/* Header */}
+      <div style={styles.header}>
+        <span style={styles.label}>SESSIONS</span>
+        <button
+          type="button"
+          style={styles.newBtn}
+          onClick={onNewSession}
+          title="New session"
+        >
+          +
+        </button>
+      </div>
+
+      {/* Session list */}
+      <div style={styles.list}>
+        {loading && sessions.length === 0 && (
+          <div style={styles.empty}>Loading...</div>
+        )}
+
+        {!loading && sessions.length === 0 && (
+          <div style={styles.empty}>
+            No sessions yet.
+            <br />
+            <span style={{ fontSize: 11, opacity: 0.6 }}>
+              Your first message will create one automatically.
+            </span>
+          </div>
+        )}
+
+        {sessions.map((s) => (
+          <SessionItem
+            key={s.id}
+            session={s}
+            isActive={s.id === activeSessionId}
+            onSelect={() => onSelectSession?.(s)}
+            onDelete={() => handleDelete(s.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const animStyles = `
+  @keyframes session-fade-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+`;
+
+const styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    borderTop: "1px solid #27272A",
+    flex: 1,
+    minHeight: 0,
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "10px 14px 6px",
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: "0.08em",
+    color: "#71717A",
+    textTransform: "uppercase",
+  },
+  newBtn: {
+    width: 22,
+    height: 22,
+    borderRadius: 4,
+    border: "1px dashed #3F3F46",
+    background: "transparent",
+    color: "#A1A1AA",
+    fontSize: 14,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 1,
+  },
+  list: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "0 6px 8px",
+  },
+  empty: {
+    textAlign: "center",
+    color: "#52525B",
+    fontSize: 12,
+    padding: "20px 8px",
+    lineHeight: 1.5,
+  },
+};

frontend/components/SettingsModal.jsx

@@ -0,0 +1,333 @@
+import React, { useEffect, useState } from "react";
+
+export default function SettingsModal({ onClose }) {
+  const [settings, setSettings] = useState(null);
+  const [models, setModels] = useState([]);
+  const [modelsError, setModelsError] = useState(null);
+  const [loadingModels, setLoadingModels] = useState(false);
+  const [testResult, setTestResult] = useState(null); // { ok: bool, message: string }
+  const [testing, setTesting] = useState(false);
+
+  const loadSettings = async () => {
+    const res = await fetch("/api/settings");
+    const data = await res.json();
+    setSettings(data);
+  };
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const changeProvider = async (provider) => {
+    const res = await fetch("/api/settings/provider", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ provider }),
+    });
+    const data = await res.json();
+    setSettings(data);
+
+    // Reset models state when provider changes
+    setModels([]);
+    setModelsError(null);
+  };
+
+  const loadModels = async () => {
+    if (!settings) return;
+    setLoadingModels(true);
+    setModelsError(null);
+    try {
+      const res = await fetch(
+        `/api/settings/models?provider=${settings.provider}`
+      );
+      const data = await res.json();
+      if (data.error) {
+        setModelsError(data.error);
+        setModels([]);
+      } else {
+        setModels(data.models || []);
+      }
+    } catch (err) {
+      console.error(err);
+      setModelsError("Failed to load models");
+      setModels([]);
+    } finally {
+      setLoadingModels(false);
+    }
+  };
+
+  const currentModelForActiveProvider = () => {
+    if (!settings) return "";
+    const p = settings.provider;
+    if (p === "openai") return settings.openai?.model || "";
+    if (p === "claude") return settings.claude?.model || "";
+    if (p === "watsonx") return settings.watsonx?.model_id || "";
+    if (p === "ollama") return settings.ollama?.model || "";
+    return "";
+  };
+
+  const changeModel = async (model) => {
+    if (!settings) return;
+    const provider = settings.provider;
+
+    let payload = {};
+    if (provider === "openai") {
+      payload = {
+        openai: {
+          ...settings.openai,
+          model,
+        },
+      };
+    } else if (provider === "claude") {
+      payload = {
+        claude: {
+          ...settings.claude,
+          model,
+        },
+      };
+    } else if (provider === "watsonx") {
+      payload = {
+        watsonx: {
+          ...settings.watsonx,
+          model_id: model,
+        },
+      };
+    } else if (provider === "ollama") {
+      payload = {
+        ollama: {
+          ...settings.ollama,
+          model,
+        },
+      };
+    }
+
+    const res = await fetch("/api/settings/llm", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const data = await res.json();
+    setSettings(data);
+  };
+
+  const testConnection = async () => {
+    if (!settings) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const res = await fetch(`/api/settings/test?provider=${settings.provider}`);
+      const data = await res.json();
+      if (!res.ok || data.error) {
+        setTestResult({ ok: false, message: data.error || data.detail || "Connection failed" });
+      } else {
+        setTestResult({ ok: true, message: data.message || "Connection successful" });
+      }
+    } catch (err) {
+      setTestResult({ ok: false, message: err.message || "Connection test failed" });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const toggleLiteMode = async () => {
+    if (!settings) return;
+    const newValue = !settings.lite_mode;
+    try {
+      const res = await fetch("/api/settings/lite-mode", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ lite_mode: newValue }),
+      });
+      if (res.ok) {
+        setSettings((prev) => ({ ...prev, lite_mode: newValue }));
+      }
+    } catch (err) {
+      console.error("Failed to toggle lite mode:", err);
+    }
+  };
+
+  if (!settings) return null;
+
+  const activeModel = currentModelForActiveProvider();
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <div className="modal-title">Settings</div>
+          <button className="modal-close" type="button" onClick={onClose}>
+            ✕
+          </button>
+        </div>
+
+        <div style={{ fontSize: 13, color: "#c3c5dd" }}>
+          Select which LLM provider GitPilot should use for planning and chat.
+        </div>
+
+        <div className="provider-list">
+          {settings.providers.map((p) => (
+            <div
+              key={p}
+              className={
+                "provider-item" + (settings.provider === p ? " active" : "")
+              }
+            >
+              <div className="provider-name">{p}</div>
+              <button
+                type="button"
+                className="chat-btn secondary"
+                style={{ padding: "4px 8px", fontSize: 11 }}
+                onClick={() => changeProvider(p)}
+                disabled={settings.provider === p}
+              >
+                {settings.provider === p ? "Active" : "Use"}
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {/* Models section */}
+        <div
+          style={{
+            marginTop: 16,
+            paddingTop: 12,
+            borderTop: "1px solid #2c2d46",
+            fontSize: 13,
+          }}
+        >
+          <div style={{ marginBottom: 6, color: "#c3c5dd" }}>
+            Active provider: <strong>{settings.provider}</strong>
+          </div>
+
+          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
+            <button
+              type="button"
+              className="chat-btn secondary"
+              style={{ padding: "4px 8px", fontSize: 11 }}
+              onClick={testConnection}
+              disabled={testing}
+            >
+              {testing ? "Testing…" : "Test Connection"}
+            </button>
+            <button
+              type="button"
+              className="chat-btn secondary"
+              style={{ padding: "4px 8px", fontSize: 11 }}
+              onClick={loadModels}
+              disabled={loadingModels}
+            >
+              {loadingModels ? "Loading…" : "Display models"}
+            </button>
+
+            {activeModel && (
+              <span style={{ fontSize: 12, color: "#9092b5" }}>
+                Current model: <code>{activeModel}</code>
+              </span>
+            )}
+          </div>
+
+          {modelsError && (
+            <div style={{ marginTop: 8, color: "#ff8080", fontSize: 12 }}>
+              {modelsError}
+            </div>
+          )}
+
+          {testResult && (
+            <div style={{
+              marginTop: 8,
+              padding: "6px 10px",
+              borderRadius: 6,
+              background: testResult.ok ? "#0d3320" : "#3d1111",
+              border: `1px solid ${testResult.ok ? "#166534" : "#7f1d1d"}`,
+              color: testResult.ok ? "#86efac" : "#fca5a5",
+              fontSize: 12,
+            }}>
+              {testResult.ok ? "✓ " : "✗ "}{testResult.message}
+            </div>
+          )}
+
+          {models.length > 0 && (
+            <div style={{ marginTop: 10 }}>
+              <label
+                style={{
+                  display: "block",
+                  marginBottom: 4,
+                  fontSize: 12,
+                  color: "#c3c5dd",
+                }}
+              >
+                Select model for {settings.provider}:
+              </label>
+              <select
+                style={{
+                  width: "100%",
+                  fontSize: 12,
+                  padding: "4px 6px",
+                  background: "#14152a",
+                  color: "#e6e8ff",
+                  border: "1px solid #2c2d46",
+                  borderRadius: 4,
+                }}
+                value={activeModel}
+                onChange={(e) => changeModel(e.target.value)}
+              >
+                <option value="">-- select a model --</option>
+                {models.map((m) => (
+                  <option key={m} value={m}>
+                    {m}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </div>
+
+        {/* Lite Mode section */}
+        <div
+          style={{
+            marginTop: 16,
+            paddingTop: 12,
+            borderTop: "1px solid #2c2d46",
+            fontSize: 13,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: 6,
+            }}
+          >
+            <div style={{ color: "#c3c5dd", fontWeight: 600 }}>
+              Lite Mode
+            </div>
+            <button
+              type="button"
+              onClick={toggleLiteMode}
+              style={{
+                padding: "4px 14px",
+                fontSize: 11,
+                fontWeight: 600,
+                borderRadius: 12,
+                border: "none",
+                cursor: "pointer",
+                background: settings.lite_mode ? "#166534" : "#2c2d46",
+                color: settings.lite_mode ? "#86efac" : "#9092b5",
+                transition: "background 0.2s, color 0.2s",
+              }}
+            >
+              {settings.lite_mode ? "ON" : "OFF"}
+            </button>
+          </div>
+          <div style={{ fontSize: 11, color: "#9092b5", lineHeight: 1.5 }}>
+            Optimized for small models (under 7B parameters).
+            Uses simplified prompts and single-agent execution instead
+            of multi-agent pipelines. Recommended for: qwen2.5:1.5b,
+            phi-3-mini, gemma-2b, tinyllama, etc.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/StartupScreen.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+
+function normalizeProvider(provider) {
+  if (!provider) return "Checking...";
+  if (typeof provider === "string") return provider.toUpperCase();
+  if (typeof provider === "object") {
+    return (
+      provider.name ||
+      provider.provider ||
+      provider.type ||
+      provider.label ||
+      "Checking..."
+    );
+  }
+  return "Checking...";
+}
+
+function normalizeVersion(version) {
+  if (!version) return "Checking...";
+  return String(version);
+}
+
+export default function StartupScreen({
+  appName = "GitPilot",
+  subtitle = "Enterprise Workspace Copilot",
+  frontendVersion = "Checking...",
+  backendVersion = "Checking...",
+  provider = "Checking...",
+  statusMessage = "Starting application...",
+  detailMessage = "Initializing authentication, provider, and workspace context.",
+  phase = "booting",
+}) {
+  const providerLabel = normalizeProvider(provider);
+  const frontendLabel = normalizeVersion(frontendVersion);
+  const backendLabel = normalizeVersion(backendVersion);
+
+  return (
+    <div className="startup-screen" role="status" aria-live="polite">
+      <div className="startup-card">
+        <div className="startup-brand-row">
+          <div className="startup-brand-mark" aria-hidden="true">
+            <div className="startup-brand-ring" />
+            <div className="startup-brand-core" />
+          </div>
+
+          <div className="startup-brand-copy">
+            <div className="startup-title">{appName}</div>
+            <div className="startup-subtitle">{subtitle}</div>
+          </div>
+        </div>
+
+        <div className="startup-loader-wrap" aria-hidden="true">
+          <div className="startup-loader">
+            <div className="startup-loader-ring startup-loader-ring-outer" />
+            <div className="startup-loader-ring startup-loader-ring-inner" />
+          </div>
+        </div>
+
+        <div className="startup-status-block">
+          <div className="startup-status">{statusMessage}</div>
+          <div className="startup-detail">{detailMessage}</div>
+        </div>
+
+        <div className="startup-phase-row">
+          <span className="startup-phase-badge">{phase}</span>
+        </div>
+
+        <div className="startup-meta-grid">
+          <div className="startup-meta-item">
+            <div className="startup-meta-label">Frontend</div>
+            <div className="startup-meta-value">v{frontendLabel}</div>
+          </div>
+
+          <div className="startup-meta-item">
+            <div className="startup-meta-label">Backend</div>
+            <div className="startup-meta-value">v{backendLabel}</div>
+          </div>
+
+          <div className="startup-meta-item startup-meta-item-wide">
+            <div className="startup-meta-label">Provider</div>
+            <div className="startup-meta-value">{providerLabel}</div>
+          </div>
+        </div>
+
+        <div className="startup-footer">
+          Preparing workspace services, restoring session state, and checking
+          platform readiness.
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/StreamingMessage.jsx

@@ -0,0 +1,182 @@
+import React from "react";
+
+/**
+ * StreamingMessage — Claude-Code-on-Web parity streaming renderer.
+ *
+ * Renders agent messages incrementally as they arrive via WebSocket.
+ * Shows tool use blocks (bash commands + output), explanatory text,
+ * and status indicators.
+ */
+export default function StreamingMessage({ events }) {
+  if (!events || events.length === 0) return null;
+
+  return (
+    <div style={styles.container}>
+      {events.map((evt, idx) => (
+        <StreamingEvent key={idx} event={evt} isLast={idx === events.length - 1} />
+      ))}
+    </div>
+  );
+}
+
+function StreamingEvent({ event, isLast }) {
+  const { type } = event;
+
+  if (type === "agent_message") {
+    return (
+      <div style={styles.textBlock}>
+        <span>{event.content}</span>
+        {isLast && <span style={styles.cursor}>|</span>}
+      </div>
+    );
+  }
+
+  if (type === "tool_use") {
+    return (
+      <div style={styles.toolBlock}>
+        <div style={styles.toolHeader}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="4 17 10 11 4 5" />
+            <line x1="12" y1="19" x2="20" y2="19" />
+          </svg>
+          <span style={styles.toolName}>{event.tool || "terminal"}</span>
+        </div>
+        <div style={styles.toolInput}>
+          <code>$ {event.input}</code>
+        </div>
+      </div>
+    );
+  }
+
+  if (type === "tool_result") {
+    return (
+      <div style={styles.toolBlock}>
+        <div style={styles.toolOutput}>
+          <pre style={styles.toolOutputPre}>{event.output}</pre>
+        </div>
+      </div>
+    );
+  }
+
+  if (type === "status_change") {
+    const statusLabels = {
+      active: "Working...",
+      waiting: "Waiting for input",
+      completed: "Completed",
+      failed: "Failed",
+    };
+    return (
+      <div style={styles.statusLine}>
+        <div style={{
+          ...styles.statusDot,
+          backgroundColor: {
+            active: "#F59E0B",
+            waiting: "#3B82F6",
+            completed: "#10B981",
+            failed: "#EF4444",
+          }[event.status] || "#6B7280",
+        }} />
+        <span>{statusLabels[event.status] || event.status}</span>
+      </div>
+    );
+  }
+
+  if (type === "diff_update") {
+    return null; // Handled by DiffStats in parent
+  }
+
+  if (type === "error") {
+    return (
+      <div style={styles.errorBlock}>
+        {event.message}
+      </div>
+    );
+  }
+
+  return null;
+}
+
+const styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+  },
+  textBlock: {
+    fontSize: 14,
+    lineHeight: 1.6,
+    color: "#D4D4D8",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+  },
+  cursor: {
+    display: "inline-block",
+    animation: "blink 1s step-end infinite",
+    color: "#3B82F6",
+    fontWeight: 700,
+  },
+  toolBlock: {
+    margin: "4px 0",
+    borderRadius: 6,
+    border: "1px solid #27272A",
+    overflow: "hidden",
+  },
+  toolHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    backgroundColor: "#18181B",
+    fontSize: 11,
+    color: "#71717A",
+    fontFamily: "monospace",
+  },
+  toolName: {
+    fontWeight: 600,
+  },
+  toolInput: {
+    padding: "8px 10px",
+    backgroundColor: "#0D0D0F",
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: "#10B981",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+  },
+  toolOutput: {
+    padding: "8px 10px",
+    backgroundColor: "#0D0D0F",
+    maxHeight: 300,
+    overflowY: "auto",
+  },
+  toolOutputPre: {
+    margin: 0,
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: "#A1A1AA",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+  },
+  statusLine: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "4px 0",
+    fontSize: 12,
+    color: "#71717A",
+    fontStyle: "italic",
+  },
+  statusDot: {
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+  },
+  errorBlock: {
+    padding: "8px 12px",
+    borderRadius: 6,
+    backgroundColor: "rgba(239, 68, 68, 0.08)",
+    border: "1px solid rgba(239, 68, 68, 0.2)",
+    color: "#FCA5A5",
+    fontSize: 13,
+  },
+};

frontend/components/ThinkingIndicator.jsx

@@ -0,0 +1,151 @@
+// frontend/components/ThinkingIndicator.jsx
+//
+// Compact, enterprise-grade thinking state.  Sits inline in the chat
+// timeline as a small assistant-style bubble:
+//
+//     ● Reading repository...    · · ·
+//
+// Design goals (from the bug report):
+//   * Calm, precise, technical — no large card, no big glow, no
+//     all-caps "THINKING" label.
+//   * Sits inline next to other chat messages; ~36 px tall, auto width.
+//   * Tiny pulsing brand-orange dot as the only accent (no rings,
+//     no progress sweep, no nested animated panels).
+//   * Muted text, sentence case, task-specific labels that rotate
+//     ("Reading repository", "Building plan", "Checking context",
+//     "Preparing response").
+//   * Three tiny fading dots on the right as a generic "still working"
+//     signal.
+//
+// Implementation constraints (this codebase, not the proposal's):
+//   * No Tailwind — uses plain inline-style objects.
+//   * No framer-motion — uses CSS @keyframes in one scoped <style> tag.
+//   * No icon library — there are no glyphs in the final design.
+//   * Brand-correct colour — GitPilot orange ``#D95C3D`` (matches the
+//     Action Plan header and README badges), not Claude's ``#D97757``.
+//
+// API: accepts ``labels: string[]`` (defaults to the standard set)
+// and an optional ``label`` to force a single non-rotating message.
+
+import React, { useEffect, useState } from "react";
+
+const BRAND_ORANGE = "#D95C3D";
+
+const DEFAULT_LABELS = [
+  "Reading repository",
+  "Building plan",
+  "Checking context",
+  "Preparing response",
+];
+
+const ROTATION_MS = 1800;
+
+// Scoped keyframes.  One <style> tag per mount; tiny enough that it
+// would not be worth lifting to a global stylesheet.
+const KEYFRAMES = `
+@keyframes gp-thinking-mount {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes gp-thinking-label {
+  from { opacity: 0; transform: translateY(1px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes gp-thinking-dot-pulse {
+  0%, 100% { opacity: 0.50; transform: scale(1); }
+  50%      { opacity: 1.00; transform: scale(1.18); }
+}
+@keyframes gp-thinking-trail {
+  0%, 100% { opacity: 0.25; }
+  50%      { opacity: 0.90; }
+}
+`;
+
+export default function ThinkingIndicator({ label, labels = DEFAULT_LABELS }) {
+  const [step, setStep] = useState(0);
+
+  // Honour an explicit ``label`` prop (callers that already know what
+  // the agent is doing — e.g. "Planning changes…" during the plan
+  // round-trip) — otherwise rotate through the generic set.
+  const useRotation = !label && Array.isArray(labels) && labels.length > 1;
+
+  useEffect(() => {
+    if (!useRotation) return undefined;
+    const id = setInterval(
+      () => setStep((prev) => (prev + 1) % labels.length),
+      ROTATION_MS,
+    );
+    return () => clearInterval(id);
+  }, [labels, useRotation]);
+
+  const currentLabel = label || labels[step] || labels[0] || "Thinking";
+
+  // Width budget: long-form labels like "Preparing response" wrap to
+  // ~140 px at 13 px font.  Pin a min-width so the bubble does not
+  // jitter as labels rotate.
+  const styles = {
+    bubble: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      height: "32px",
+      padding: "0 12px",
+      borderRadius: "10px",
+      border: "1px solid rgba(255, 255, 255, 0.08)",
+      background: "rgba(255, 255, 255, 0.035)",
+      color: "rgba(255, 255, 255, 0.72)",
+      fontSize: "13px",
+      fontWeight: 500,
+      letterSpacing: "normal",
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      animation: "gp-thinking-mount 220ms ease-out both",
+    },
+    brandDot: {
+      flex: "0 0 auto",
+      width: "6px",
+      height: "6px",
+      borderRadius: "999px",
+      background: BRAND_ORANGE,
+      animation: "gp-thinking-dot-pulse 1.35s ease-in-out infinite",
+    },
+    label: {
+      minWidth: "120px",                 // stops bubble width jitter on rotation
+      animation: "gp-thinking-label 180ms ease-out both",
+    },
+    trailRow: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "3px",
+      paddingLeft: "2px",
+    },
+    trailDot: {
+      width: "4px",
+      height: "4px",
+      borderRadius: "999px",
+      background: "currentColor",
+      animation: "gp-thinking-trail 1.2s ease-in-out infinite",
+    },
+  };
+
+  return (
+    <div
+      className="gitpilot-thinking-indicator"
+      role="status"
+      aria-live="polite"
+      aria-label={`${currentLabel} in progress`}
+      style={styles.bubble}
+    >
+      <style>{KEYFRAMES}</style>
+      <span style={styles.brandDot} aria-hidden="true" />
+      {/* keyed on the label so the fade-in plays each rotation */}
+      <span key={currentLabel} style={styles.label}>
+        {currentLabel}
+      </span>
+      <span style={styles.trailRow} aria-hidden="true">
+        <span style={{ ...styles.trailDot, animationDelay: "0s" }} />
+        <span style={{ ...styles.trailDot, animationDelay: "0.18s" }} />
+        <span style={{ ...styles.trailDot, animationDelay: "0.36s" }} />
+      </span>
+    </div>
+  );
+}

frontend/components/UserMenu.jsx

@@ -0,0 +1,424 @@
+// frontend/components/UserMenu.jsx
+import React, { useEffect, useRef, useState, useCallback } from "react";
+
+/**
+ * UserMenu — account dropdown attached to the profile avatar in the
+ * bottom-left of the sidebar. Follows the Claude Code / ChatGPT pattern:
+ * click avatar → popover with Settings, About, Logout.
+ *
+ * Best practices applied:
+ * - Click outside to close (mousedown listener on document)
+ * - Escape key closes
+ * - ARIA: role="menu" + aria-haspopup + aria-expanded on trigger
+ * - Keyboard navigation (Tab / Shift+Tab cycles items, Enter activates)
+ * - Position: absolute popover anchored to trigger, opens upward
+ * - Brand palette: #D95C3D accent, #1C1C1F card, #27272A border
+ * - Respects sidebarCollapsed: when collapsed, only avatar is shown
+ * - Animation: subtle fade+translate for polish
+ */
+
+export default function UserMenu({
+  userInfo,
+  sidebarCollapsed = false,
+  onOpenSettings,
+  onOpenAbout,
+  onLogout,
+}) {
+  const [open, setOpen] = useState(false);
+  const [fixedPos, setFixedPos] = useState(null);
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+
+  // When the sidebar is collapsed, the parent .sidebar has overflow-x:hidden
+  // which clips an absolutely-positioned popover. Escape the clip by using
+  // position:fixed with coordinates measured from the trigger's bounding
+  // rect. Recompute on open, window resize, and scroll.
+  useEffect(() => {
+    if (!open || !sidebarCollapsed) {
+      setFixedPos(null);
+      return;
+    }
+    const compute = () => {
+      const el = triggerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setFixedPos({
+        left: Math.round(rect.right + 8),
+        bottom: Math.round(window.innerHeight - rect.bottom),
+      });
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    window.addEventListener("scroll", compute, true);
+    return () => {
+      window.removeEventListener("resize", compute);
+      window.removeEventListener("scroll", compute, true);
+    };
+  }, [open, sidebarCollapsed]);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!open) return;
+    const handleDocMouseDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleDocMouseDown);
+    return () => document.removeEventListener("mousedown", handleDocMouseDown);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+
+  // Focus the first menu item when opened
+  useEffect(() => {
+    if (open && menuRef.current) {
+      const firstItem = menuRef.current.querySelector('[role="menuitem"]');
+      firstItem?.focus();
+    }
+  }, [open]);
+
+  const handleItemClick = useCallback((action) => {
+    setOpen(false);
+    // Defer to next tick so the dropdown close animation doesn't jitter
+    // against the modal open animation.
+    window.setTimeout(() => action?.(), 0);
+  }, []);
+
+  if (!userInfo) return null;
+
+  const displayName = userInfo.name || userInfo.login;
+  const login = userInfo.login || "";
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ position: "relative", width: "100%" }}
+    >
+      {/* Trigger: avatar + optional name */}
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={`Account menu for ${displayName}`}
+        className="user-menu-trigger"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: sidebarCollapsed ? 0 : 10,
+          width: "100%",
+          padding: sidebarCollapsed ? "6px" : "8px 10px",
+          background: open ? "#27272A" : "transparent",
+          border: "1px solid",
+          borderColor: open ? "#D95C3D" : "transparent",
+          borderRadius: 10,
+          cursor: "pointer",
+          color: "#EDEDED",
+          textAlign: "left",
+          transition: "background 120ms ease, border-color 120ms ease",
+          fontFamily: "inherit",
+        }}
+        onMouseEnter={(e) => {
+          if (!open) e.currentTarget.style.background = "#1C1C1F";
+        }}
+        onMouseLeave={(e) => {
+          if (!open) e.currentTarget.style.background = "transparent";
+        }}
+      >
+        {userInfo.avatar_url ? (
+          <img
+            src={userInfo.avatar_url}
+            alt=""
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              flexShrink: 0,
+              border: "1px solid #27272A",
+            }}
+          />
+        ) : (
+          <div
+            aria-hidden="true"
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              flexShrink: 0,
+              background: "rgba(217, 92, 61, 0.15)",
+              color: "#D95C3D",
+              border: "1px solid rgba(217, 92, 61, 0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontWeight: 700,
+              fontSize: 13,
+            }}
+          >
+            {(displayName || "?").slice(0, 2).toUpperCase()}
+          </div>
+        )}
+
+        {!sidebarCollapsed && (
+          <div style={{ flex: 1, minWidth: 0, lineHeight: 1.25 }}>
+            <div
+              style={{
+                fontSize: 13,
+                fontWeight: 600,
+                color: "#EDEDED",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {displayName}
+            </div>
+            {login && (
+              <div
+                style={{
+                  fontSize: 11,
+                  color: "#A1A1AA",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                @{login}
+              </div>
+            )}
+          </div>
+        )}
+
+        {!sidebarCollapsed && (
+          <svg
+            aria-hidden="true"
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            style={{
+              flexShrink: 0,
+              color: "#A1A1AA",
+              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              transition: "transform 120ms ease",
+            }}
+          >
+            <path
+              d="M4 6l4 4 4-4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </button>
+
+      {/* Dropdown popover */}
+      {open && (
+        <div
+          ref={menuRef}
+          role="menu"
+          aria-label="Account actions"
+          style={
+            sidebarCollapsed && fixedPos
+              ? {
+                  position: "fixed",
+                  left: fixedPos.left,
+                  bottom: fixedPos.bottom,
+                  width: 240,
+                  minWidth: 220,
+                  background: "#1C1C1F",
+                  border: "1px solid #27272A",
+                  borderRadius: 12,
+                  boxShadow:
+                    "0 18px 38px -12px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4)",
+                  padding: 6,
+                  zIndex: 1000,
+                  animation: "userMenuFadeIn 140ms ease-out",
+                }
+              : {
+                  position: "absolute",
+                  bottom: "calc(100% + 8px)",
+                  left: 0,
+                  right: 0,
+                  minWidth: 220,
+                  background: "#1C1C1F",
+                  border: "1px solid #27272A",
+                  borderRadius: 12,
+                  boxShadow:
+                    "0 18px 38px -12px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4)",
+                  padding: 6,
+                  zIndex: 1000,
+                  animation: "userMenuFadeIn 140ms ease-out",
+                }
+          }
+        >
+          {/* Header: show full email/username for context */}
+          <div
+            style={{
+              padding: "8px 12px 10px",
+              borderBottom: "1px solid #27272A",
+              marginBottom: 6,
+            }}
+          >
+            <div
+              style={{
+                fontSize: 12,
+                color: "#A1A1AA",
+                fontWeight: 500,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              Signed in as
+            </div>
+            <div
+              style={{
+                fontSize: 13,
+                color: "#EDEDED",
+                fontWeight: 600,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                marginTop: 2,
+              }}
+              title={displayName}
+            >
+              {displayName}
+            </div>
+          </div>
+
+          <MenuItem
+            icon={<SettingsIcon />}
+            label="Settings"
+            onClick={() => handleItemClick(onOpenSettings)}
+          />
+          <MenuItem
+            icon={<InfoIcon />}
+            label="About GitPilot"
+            onClick={() => handleItemClick(onOpenAbout)}
+          />
+
+          <div
+            role="separator"
+            style={{
+              height: 1,
+              background: "#27272A",
+              margin: "6px 4px",
+            }}
+          />
+
+          <MenuItem
+            icon={<LogoutIcon />}
+            label="Log out"
+            onClick={() => handleItemClick(onLogout)}
+            danger
+          />
+        </div>
+      )}
+
+      {/* Scoped keyframe animation */}
+      <style>{`
+        @keyframes userMenuFadeIn {
+          from { opacity: 0; transform: translateY(4px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+// ── Menu item primitive ────────────────────────────────────────────
+function MenuItem({ icon, label, onClick, danger = false }) {
+  const [hover, setHover] = useState(false);
+  const color = danger ? "#f87171" : "#EDEDED";
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        width: "100%",
+        padding: "9px 12px",
+        background: hover ? "#27272A" : "transparent",
+        border: "none",
+        borderRadius: 8,
+        cursor: "pointer",
+        color: color,
+        fontSize: 13,
+        fontWeight: 500,
+        textAlign: "left",
+        fontFamily: "inherit",
+        transition: "background 80ms ease",
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 16,
+          height: 16,
+          color: hover && !danger ? "#D95C3D" : color,
+          flexShrink: 0,
+          transition: "color 80ms ease",
+        }}
+      >
+        {icon}
+      </span>
+      <span>{label}</span>
+    </button>
+  );
+}
+
+// ── Inline icons (no extra asset loads) ────────────────────────────
+function SettingsIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <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-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 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.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 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.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 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 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  );
+}
+
+function InfoIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+
+function LogoutIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </svg>
+  );
+}