Deploy from 900d69de

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,293 @@
+<div align="center">
+
+<img src="docs/logo.svg" alt="GitPilot" width="140" />
+
+# GitPilot
+
+### The open-source AI coding companion your team can actually trust.
+
+**Ask. Plan. Code. Ship.** &nbsp;·&nbsp; You approve every change.
+
+
+
+[![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: MIT](https://img.shields.io/badge/license-MIT-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?
+
+GitPilot is the AI pair programmer built for teams that take code seriously. It reads your repository, drafts a safe plan, writes the code, runs your tests — and **waits for your approval before touching a single file**. No surprises, no silent commits, no lock-in.
+
+- 🧭 **Works where you work** — the same experience in VS Code, on the web, and from the terminal. One login, one history, one set of approvals.
+- 🔐 **Safe by default** — every file edit, shell command, and git operation asks for permission first. Diffs are shown before they're applied, tests run before anything is committed.
+- 🧠 **Your model, your rules** — drop in OpenAI, Anthropic Claude, IBM Watsonx, Ollama (local) or OllaBridge (free cloud). Switch providers in settings without changing a line of code.
+- 🏢 **Enterprise-ready, open source** — MIT licensed, 854 passing tests, Docker & Hugging Face deployment recipes, no telemetry, no vendor lock-in.
+- 🌍 **Runs anywhere** — your laptop, your private cloud, air-gapped environments, or a managed host. Your repo stays your repo.
+
+---
+
+## 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 (Allow? [Yes] [No])
+  4. Running npm test... 3 passed
+  5. Done.
+```
+
+---
+
+## 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
+
+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.
+
+### 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
+
+The sidebar panel gives you everything in one place:
+
+| Feature | What it does |
+|---|---|
+| **Chat** | Ask questions, request changes, review code |
+| **Plan View** | See the step-by-step plan before changes are made |
+| **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 |
+
+### 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
+
+---
+
+## 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
+
+You approve every change before it's applied.
+
+---
+
+## 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) |
+| `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 |
+
+Full API docs at `http://localhost:8000/docs` (Swagger UI).
+
+---
+
+## Deployment
+
+### Hugging Face Spaces <p>
+  <a href="https://huggingface.co/spaces/ruslanmv/gitpilot">
+    <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Space" width="28" />
+  </a>
+</p>
+
+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
+# Backend
+cd gitpilot
+pip install -e ".[dev]"
+pytest
+
+# Frontend
+cd frontend
+npm install
+npm run dev
+
+# VS Code Extension
+cd extensions/vscode
+npm install
+make compile
+# Press F5 in VS Code to launch debug host
+```
+
+---
+
+## License
+
+MIT License. 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>

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,1173 @@
+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,
+  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;
+
+    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", "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 === "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: MIT 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.2.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 · MIT
+          </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="MIT" />
+            <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/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,8 @@
+// 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 SkillsTab } from "./SkillsTab.jsx";
+export { default as SessionsTab } from "./SessionsTab.jsx";
+export { default as AdvancedTab } from "./AdvancedTab.jsx";

frontend/components/AssistantMessage.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import PlanView from "./PlanView.jsx";
+
+export default function AssistantMessage({ answer, plan, executionLog }) {
+  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}>
+            <h3 style={{ ...styles.title, color: "#D95C3D" }}>Action Plan</h3>
+          </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,719 @@
+// frontend/components/ChatPanel.jsx
+import React, { useEffect, useRef, useState } from "react";
+import AssistantMessage from "./AssistantMessage.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;
+
+    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)
+          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]);
+            }
+            setStreamingEvents([]);
+          }
+        }
+      },
+      onError: (err) => {
+        console.warn("[ws] Error:", err);
+        setLoadingPlan(false);
+      },
+    });
+
+    ws.connect();
+    wsRef.current = ws;
+
+    return () => {
+      ws.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)
+  // ---------------------------------------------------------------------------
+  const persistMessage = (sid, role, content) => {
+    if (!sid) return;
+    fetch(`/api/sessions/${sid}/message`, {
+      method: "POST",
+      headers: getHeaders(),
+      body: JSON.stringify({ role, content }),
+    }).catch(() => {}); // best-effort
+  };
+
+  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");
+      }
+
+      setPlan(data);
+
+      // 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.";
+
+      // Assistant response (Answer + Action Plan)
+      setMessages((prev) => [
+        ...prev,
+        {
+          from: "ai",
+          role: "assistant",
+          answer: summary,
+          content: summary,
+          plan: data,
+        },
+      ]);
+
+      // Persist assistant response to backend session
+      persistMessage(sid, "assistant", summary);
+    } 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);
+    }
+  };
+
+  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,
+      };
+
+      // Show completion immediately (keeps old "Execution Log" section)
+      setMessages((prev) => [...prev, 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)
+          return (
+            <div key={idx}>
+              <AssistantMessage
+                answer={m.answer || m.content}
+                plan={m.plan}
+                executionLog={m.executionLog}
+              />
+              {/* 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>
+        )}
+
+        {loadingPlan && streamingEvents.length === 0 && (
+          <div className="chat-message-ai" style={{ color: "#A1A1AA", fontStyle: "italic", padding: "10px" }}>
+            Thinking...
+          </div>
+        )}
+
+        {!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>
+
+          <button
+            className="chat-btn secondary"
+            type="button"
+            onClick={execute}
+            disabled={!plan || executing || loadingPlan}
+          >
+            {executing ? "Executing..." : "Approve & execute"}
+          </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 */}
+        {sessionId && (
+          <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 8 }}>
+            <span className="ws-indicator">
+              <span className="ws-dot" style={{
+                backgroundColor: wsConnected ? "#10B981" : "#EF4444",
+              }} />
+              {wsConnected ? "Live" : "Connecting..."}
+            </span>
+          </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/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/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>
+  );
+}

frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>GitPilot</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="main.jsx"></script>
+  </body>
+</html>

frontend/main.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./styles.css";
+import "./ollabridge.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/nginx.conf

@@ -0,0 +1,58 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # DNS resolver for dynamic upstream resolution
+    # This allows nginx to start even if backend doesn't exist yet
+    resolver 127.0.0.11 valid=30s ipv6=off;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Handle API requests - proxy to backend (docker-compose only)
+    # Uses variables to force runtime DNS resolution instead of startup
+    location /api/ {
+        # Use variable to force runtime DNS resolution
+        set $backend "backend:8000";
+        proxy_pass http://$backend;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+
+        # Handle backend connection errors gracefully
+        proxy_intercept_errors on;
+        error_page 502 503 504 = @backend_unavailable;
+    }
+
+    # Fallback for when backend is unavailable
+    location @backend_unavailable {
+        add_header Content-Type application/json;
+        return 503 '{"error": "Backend service unavailable. Configure VITE_BACKEND_URL in frontend or ensure backend container is running."}';
+    }
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}

frontend/ollabridge.css

@@ -0,0 +1,222 @@
+/* ============================================================================
+   OLLABRIDGE CLOUD - Provider Tabs & Pairing UI
+   ============================================================================ */
+
+/* Provider selection tabs (replaces dropdown) */
+.settings-provider-tabs {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.settings-provider-tab {
+  border: 1px solid #272832;
+  outline: none;
+  background: #0a0b0f;
+  color: #9a9bb0;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.settings-provider-tab:hover {
+  background: #1a1b26;
+  color: #c3c5dd;
+  border-color: #3a3b4d;
+}
+
+.settings-provider-tab-active {
+  background: rgba(255, 122, 60, 0.12);
+  color: #ff7a3c;
+  border-color: #ff7a3c;
+  font-weight: 600;
+}
+
+.settings-provider-tab-active:hover {
+  background: rgba(255, 122, 60, 0.18);
+  color: #ff8b52;
+}
+
+/* Auth mode tabs (Device Pairing / API Key / Local Trust) */
+.ob-auth-tabs {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+}
+
+.ob-auth-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #272832;
+  outline: none;
+  background: #0a0b0f;
+  color: #9a9bb0;
+  border-radius: 8px;
+  padding: 7px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.ob-auth-tab:hover {
+  background: #1a1b26;
+  color: #c3c5dd;
+  border-color: #3a3b4d;
+}
+
+.ob-auth-tab-active {
+  background: rgba(59, 130, 246, 0.1);
+  color: #60a5fa;
+  border-color: #3B82F6;
+  font-weight: 600;
+}
+
+.ob-auth-tab-active:hover {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+.ob-auth-tab-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+/* Auth panel (content below tabs) */
+.ob-auth-panel {
+  padding: 12px;
+  background: #0a0b0f;
+  border: 1px solid #1e1f30;
+  border-radius: 8px;
+  margin-bottom: 4px;
+}
+
+.ob-auth-desc {
+  font-size: 12px;
+  color: #9a9bb0;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+/* Pairing row */
+.ob-pair-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ob-pair-input {
+  flex: 1;
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  font-size: 16px !important;
+  letter-spacing: 2px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.ob-pair-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  outline: none;
+  background: #3B82F6;
+  color: #fff;
+  border-radius: 8px;
+  padding: 9px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.ob-pair-btn:hover:not(:disabled) {
+  background: #4d93f7;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.ob-pair-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Pair spinner */
+.ob-pair-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Pair result feedback */
+.ob-pair-result {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  animation: fadeIn 0.3s ease;
+}
+
+.ob-pair-result-ok {
+  background: rgba(76, 175, 136, 0.12);
+  border: 1px solid rgba(76, 175, 136, 0.3);
+  color: #7cffb3;
+}
+
+.ob-pair-result-err {
+  background: rgba(255, 82, 82, 0.1);
+  border: 1px solid rgba(255, 82, 82, 0.3);
+  color: #ff8a8a;
+}
+
+/* Model row (input + fetch button) */
+.ob-model-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.ob-fetch-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  border: 1px solid #272832;
+  outline: none;
+  background: #1a1b26;
+  color: #c3c5dd;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  font-family: inherit;
+}
+
+.ob-fetch-btn:hover:not(:disabled) {
+  background: #222335;
+  border-color: #3a3b4d;
+  color: #f5f5f7;
+  transform: translateY(-1px);
+}
+
+.ob-fetch-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "gitpilot-frontend",
+  "version": "0.2.5",
+  "private": true,
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "vercel-build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^10.1.0",
+    "reactflow": "^11.11.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^5.0.0"
+  }
+}

frontend/styles.css

@@ -0,0 +1,3288 @@
+:root {
+  color-scheme: dark;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
+    sans-serif;
+  background: #050608;
+  color: #f5f5f7;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+/* Custom scrollbar styling - Claude Code style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #272832;
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3a3b4d;
+}
+
+/* App Root - Fixed height with footer accommodation */
+.app-root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: radial-gradient(circle at top, #171823 0, #050608 55%);
+  color: #f5f5f7;
+  overflow: hidden;
+}
+
+/* Main content wrapper (sidebar + workspace) */
+.main-wrapper {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 320px;
+  min-width: 320px;
+  padding: 16px 14px;
+  border-right: 1px solid #272832;
+  background: linear-gradient(180deg, #101117 0, #050608 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+              padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar--collapsed {
+  width: 52px;
+  min-width: 52px;
+  padding: 16px 8px;
+  gap: 8px;
+}
+
+/* ---- Sidebar top row: logo + toggle ---- */
+.sidebar-top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  min-height: 32px;
+}
+
+.sidebar--collapsed .sidebar-top-row {
+  justify-content: center;
+}
+
+.sidebar-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #6b6d82;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+.sidebar-toggle-btn:hover {
+  background: #1e1f2e;
+  color: #e0e1eb;
+}
+
+.sidebar--collapsed .sidebar-toggle-btn {
+  display: none;
+}
+
+/* ---- Nav buttons: icon + label layout ---- */
+.sidebar .nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sidebar .nav-btn svg {
+  flex-shrink: 0;
+}
+
+.sidebar--collapsed .nav-btn {
+  justify-content: center;
+  padding: 8px;
+}
+
+/* ---- User profile in collapsed state ---- */
+.sidebar--collapsed .user-profile {
+  align-items: center;
+}
+
+.sidebar--collapsed .user-avatar {
+  width: 28px;
+  height: 28px;
+}
+
+/* User Profile Section */
+.user-profile {
+  margin-top: auto;
+  padding-top: 16px;
+  border-top: 1px solid #272832;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  animation: fadeIn 0.3s ease;
+}
+
+.user-profile-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  border: 2px solid #272832;
+  transition: all 0.2s ease;
+}
+
+.user-avatar:hover {
+  border-color: #ff7a3c;
+  transform: scale(1.05);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f5f5f7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.user-login {
+  font-size: 11px;
+  color: #9a9bb0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.btn-logout {
+  border: none;
+  outline: none;
+  background: #1a1b26;
+  color: #c3c5dd;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid #272832;
+}
+
+.btn-logout:hover {
+  background: #2a2b3c;
+  border-color: #ff7a3c;
+  color: #ff7a3c;
+  transform: translateY(-1px);
+}
+
+.logo-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.logo-square {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #ff7a3c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: #050608;
+  transition: transform 0.2s ease;
+}
+
+.logo-square:hover {
+  transform: scale(1.05);
+}
+
+.logo-title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.logo-subtitle {
+  font-size: 12px;
+  color: #a1a2b3;
+}
+
+/* Active context card */
+.sidebar-context-card {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #151622;
+  border: 1px solid #272832;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  animation: slideIn 0.3s ease;
+}
+
+.sidebar-context-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-context-close {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: #71717a;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: all 0.15s ease;
+}
+
+.sidebar-context-close:hover {
+  background: #272832;
+  color: #f5f5f7;
+}
+
+.sidebar-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #71717a;
+  text-transform: uppercase;
+}
+
+.sidebar-context-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-context-repo {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f5f5f7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-context-meta {
+  font-size: 11px;
+  color: #9a9bb0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sidebar-context-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #4a4b5e;
+  display: inline-block;
+}
+
+.sidebar-context-actions {
+  display: flex;
+  gap: 6px;
+  margin-top: 2px;
+}
+
+.sidebar-context-btn {
+  border: none;
+  outline: none;
+  background: #1a1b26;
+  color: #9a9bb0;
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid #272832;
+}
+
+.sidebar-context-btn:hover {
+  background: #222335;
+  color: #c3c5dd;
+  border-color: #3a3b4d;
+}
+
+/* Per-repo chip list in sidebar context card */
+.sidebar-repo-chips {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.sidebar-repo-chip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 6px 5px 8px;
+  border-radius: 6px;
+  border: 1px solid #272832;
+  background: #111220;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.sidebar-repo-chip:hover {
+  border-color: #3a3b4d;
+  background: #1a1b2e;
+}
+
+.sidebar-repo-chip-active {
+  border-color: #3B82F6;
+  background: rgba(59, 130, 246, 0.06);
+}
+
+.sidebar-chip-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #c3c5dd;
+  font-family: monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-repo-chip-active .sidebar-chip-name {
+  color: #f5f5f7;
+}
+
+.sidebar-chip-dot {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: #4a4b5e;
+  flex-shrink: 0;
+}
+
+.sidebar-chip-branch {
+  font-size: 10px;
+  color: #71717a;
+  font-family: monospace;
+  flex-shrink: 0;
+}
+
+.sidebar-repo-chip-active .sidebar-chip-branch {
+  color: #60a5fa;
+}
+
+.sidebar-chip-write-badge {
+  font-size: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #4caf88;
+  padding: 0 4px;
+  border-radius: 3px;
+  border: 1px solid rgba(76, 175, 136, 0.25);
+  flex-shrink: 0;
+}
+
+/* Per-chip remove button: subtle by default, visible on hover */
+.sidebar-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: none;
+  background: transparent;
+  color: #52525B;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+
+.sidebar-repo-chip:hover .sidebar-chip-remove {
+  opacity: 1;
+}
+
+.sidebar-chip-remove:hover {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.1);
+}
+
+/* "clear all" link-style button */
+.sidebar-clear-all {
+  font-size: 9px;
+  color: #52525B;
+  width: auto;
+  height: auto;
+  padding: 2px 6px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.sidebar-clear-all:hover {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.08);
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ContextBar — horizontal chip bar above workspace */
+.ctxbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid #1E1F23;
+  background-color: #0D0D10;
+  min-height: 40px;
+}
+
+.ctxbar-scroll {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ctxbar-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.ctxbar-chip {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 6px 4px 8px;
+  border-radius: 6px;
+  border: 1px solid #27272A;
+  background: #18181B;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+  flex-shrink: 0;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.ctxbar-chip:hover {
+  border-color: #3a3b4d;
+  background: #1e1f30;
+}
+
+.ctxbar-chip-active {
+  border-color: #3B82F6;
+  background: rgba(59, 130, 246, 0.08);
+}
+
+.ctxbar-chip-indicator {
+  position: absolute;
+  left: 0;
+  top: 25%;
+  bottom: 25%;
+  width: 2px;
+  border-radius: 1px;
+  background-color: #3B82F6;
+}
+
+.ctxbar-chip-name {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: monospace;
+  color: #A1A1AA;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ctxbar-chip-active .ctxbar-chip-name {
+  color: #E4E4E7;
+}
+
+.ctxbar-chip-dot {
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: #4a4b5e;
+  flex-shrink: 0;
+}
+
+.ctxbar-chip-branch {
+  font-size: 10px;
+  font-family: monospace;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 1px 4px;
+  cursor: pointer;
+  color: #71717A;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.ctxbar-chip-branch:hover {
+  border-color: #3a3b4d;
+}
+
+.ctxbar-chip-branch-active {
+  color: #60a5fa;
+}
+
+.ctxbar-chip-write {
+  font-size: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #4caf88;
+  padding: 0 4px;
+  border-radius: 3px;
+  border: 1px solid rgba(76, 175, 136, 0.25);
+  flex-shrink: 0;
+}
+
+/* Hover-reveal remove button (Claude-style: hidden → visible on chip hover → red on X hover) */
+.ctxbar-chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: none;
+  background: transparent;
+  color: #52525B;
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.15s, color 0.15s, background 0.15s;
+}
+
+.ctxbar-chip-remove-visible,
+.ctxbar-chip:hover .ctxbar-chip-remove {
+  opacity: 1;
+}
+
+.ctxbar-chip-remove:hover {
+  color: #f87171;
+  background: rgba(248, 113, 113, 0.1);
+}
+
+.ctxbar-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px dashed #3F3F46;
+  background: transparent;
+  color: #71717A;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.ctxbar-add:hover {
+  border-color: #60a5fa;
+  color: #60a5fa;
+}
+
+.ctxbar-meta {
+  font-size: 10px;
+  color: #52525B;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ctxbar-branch-picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  margin-top: 4px;
+}
+
+/* Legacy compat — kept for other uses */
+.sidebar-repo-info {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #151622;
+  border: 1px solid #272832;
+  animation: slideIn 0.3s ease;
+}
+
+.sidebar-repo-name {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.sidebar-repo-meta {
+  font-size: 11px;
+  color: #9a9bb0;
+  margin-top: 2px;
+}
+
+.settings-button {
+  border: none;
+  outline: none;
+  background: #1a1b26;
+  color: #f5f5f7;
+  border-radius: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.settings-button:hover {
+  background: #222335;
+  transform: translateY(-1px);
+}
+
+/* Repo search */
+.repo-search-box {
+  border-radius: 12px;
+  background: #101117;
+  border: 1px solid #272832;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Search header wrapper */
+.repo-search-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Search row with input and button */
+.repo-search-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+/* Search input */
+.repo-search-input {
+  flex: 1;
+  border-radius: 7px;
+  padding: 8px 10px;
+  border: 1px solid #272832;
+  background: #050608;
+  color: #f5f5f7;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.repo-search-input:focus {
+  outline: none;
+  border-color: #ff7a3c;
+  background: #0a0b0f;
+  box-shadow: 0 0 0 3px rgba(255, 122, 60, 0.08);
+}
+
+.repo-search-input::placeholder {
+  color: #676883;
+}
+
+.repo-search-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Search button */
+.repo-search-btn {
+  border-radius: 7px;
+  border: none;
+  outline: none;
+  padding: 8px 14px;
+  background: #1a1b26;
+  color: #f5f5f7;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.repo-search-btn:hover:not(:disabled) {
+  background: #222335;
+  transform: translateY(-1px);
+}
+
+.repo-search-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.repo-search-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Info bar (shows count and clear button) */
+.repo-info-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 10px;
+  background: #0a0b0f;
+  border: 1px solid #272832;
+  border-radius: 7px;
+  font-size: 11px;
+}
+
+.repo-count {
+  color: #9a9bb0;
+  font-weight: 500;
+}
+
+.repo-clear-btn {
+  padding: 3px 10px;
+  background: transparent;
+  border: 1px solid #272832;
+  border-radius: 5px;
+  color: #9a9bb0;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.repo-clear-btn:hover:not(:disabled) {
+  background: #1a1b26;
+  color: #c3c5dd;
+  border-color: #3a3b4d;
+}
+
+.repo-clear-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Status message */
+.repo-status {
+  padding: 8px 10px;
+  background: #1a1b26;
+  border: 1px solid #272832;
+  border-radius: 7px;
+  color: #9a9bb0;
+  font-size: 11px;
+  text-align: center;
+}
+
+/* Repository list */
+.repo-list {
+  max-height: 220px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Custom scrollbar for repo list */
+.repo-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.repo-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.repo-list::-webkit-scrollbar-thumb {
+  background: #272832;
+  border-radius: 3px;
+}
+
+.repo-list::-webkit-scrollbar-thumb:hover {
+  background: #3a3b4d;
+}
+
+/* Repository item */
+.repo-item {
+  width: 100%;
+  text-align: left;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #f5f5f7;
+  padding: 8px 8px;
+  border-radius: 7px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+}
+
+.repo-item:hover {
+  background: #1a1b26;
+  border-color: #272832;
+  transform: translateX(2px);
+}
+
+.repo-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+
+.repo-name {
+  font-size: 13px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repo-owner {
+  font-size: 11px;
+  color: #8e8fac;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Private badge */
+.repo-badge-private {
+  padding: 2px 6px;
+  background: #1a1b26;
+  border: 1px solid #3a3b4d;
+  border-radius: 4px;
+  color: #9a9bb0;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Loading states */
+.repo-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 30px 20px;
+  color: #9a9bb0;
+  font-size: 12px;
+}
+
+.repo-loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #272832;
+  border-top-color: #ff7a3c;
+  border-radius: 50%;
+  animation: repo-spin 0.8s linear infinite;
+}
+
+.repo-loading-spinner-small {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 122, 60, 0.3);
+  border-top-color: #ff7a3c;
+  border-radius: 50%;
+  animation: repo-spin 0.8s linear infinite;
+}
+
+@keyframes repo-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Load more button */
+.repo-load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  margin: 4px 0;
+  background: #0a0b0f;
+  border: 1px solid #272832;
+  border-radius: 7px;
+  color: #c3c5dd;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.repo-load-more:hover:not(:disabled) {
+  background: #1a1b26;
+  border-color: #3a3b4d;
+  transform: translateY(-1px);
+}
+
+.repo-load-more:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.repo-load-more:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.repo-load-more-count {
+  color: #7779a0;
+  font-weight: 400;
+}
+
+/* All loaded message */
+.repo-all-loaded {
+  padding: 10px 12px;
+  margin: 4px 0;
+  background: rgba(124, 255, 179, 0.08);
+  border: 1px solid rgba(124, 255, 179, 0.2);
+  border-radius: 7px;
+  color: #7cffb3;
+  font-size: 11px;
+  text-align: center;
+  font-weight: 500;
+}
+
+/* GitHub App installation notice */
+.repo-github-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #0a0b0f;
+  border: 1px solid #272832;
+  border-radius: 7px;
+  font-size: 11px;
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+.repo-github-icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  opacity: 0.6;
+  color: #9a9bb0;
+  width: 16px;
+  height: 16px;
+}
+
+.repo-github-notice-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.repo-github-notice-title {
+  color: #c3c5dd;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.repo-github-notice-text {
+  color: #9a9bb0;
+}
+
+.repo-github-link {
+  color: #ff7a3c;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.repo-github-link:hover {
+  color: #ff8b52;
+  text-decoration: underline;
+}
+
+/* Focus visible for accessibility */
+.repo-item:focus-visible,
+.repo-search-btn:focus-visible,
+.repo-load-more:focus-visible,
+.repo-clear-btn:focus-visible {
+  outline: 2px solid #ff7a3c;
+  outline-offset: 2px;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .repo-item,
+  .repo-search-btn,
+  .repo-load-more,
+  .repo-clear-btn {
+    transition: none;
+  }
+
+  .repo-loading-spinner,
+  .repo-loading-spinner-small {
+    animation: none;
+  }
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+  .repo-search-input {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+
+  .repo-item {
+    padding: 7px 7px;
+  }
+
+  .repo-name {
+    font-size: 12px;
+  }
+
+  .repo-owner {
+    font-size: 10px;
+  }
+}
+
+/* Workspace */
+.workspace {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.empty-state {
+  margin: auto;
+  max-width: 420px;
+  text-align: center;
+  color: #c3c5dd;
+  animation: fadeIn 0.5s ease;
+}
+
+.empty-bot {
+  font-size: 36px;
+  margin-bottom: 12px;
+  animation: bounce 2s ease infinite;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.empty-state h1 {
+  font-size: 24px;
+  margin-bottom: 6px;
+}
+
+.empty-state p {
+  font-size: 14px;
+  color: #9a9bb0;
+}
+
+/* Workspace grid - Properly constrained */
+.workspace-grid {
+  display: grid;
+  grid-template-columns: 320px minmax(340px, 1fr);
+  height: 100%;
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Panels */
+.panel-header {
+  height: 40px;
+  padding: 0 16px;
+  border-bottom: 1px solid #272832;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 500;
+  color: #c3c5dd;
+  background: #0a0b0f;
+  flex-shrink: 0;
+}
+
+.badge {
+  padding: 2px 6px;
+  border-radius: 999px;
+  border: 1px solid #3a3b4d;
+  font-size: 10px;
+}
+
+/* Files */
+.files-panel {
+  border-right: 1px solid #272832;
+  background: #101117;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.files-list {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 6px 4px;
+  min-height: 0;
+}
+
+.files-item {
+  border: none;
+  outline: none;
+  width: 100%;
+  background: transparent;
+  color: #f5f5f7;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.15s ease;
+}
+
+.files-item:hover {
+  background: #1a1b26;
+  transform: translateX(2px);
+}
+
+.files-item-active {
+  background: #2a2b3c;
+}
+
+.file-icon {
+  width: 16px;
+  flex-shrink: 0;
+}
+
+.file-path {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.files-empty {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: #9a9bb0;
+}
+
+/* Chat panel */
+.editor-panel {
+  display: flex;
+  flex-direction: column;
+  background: #050608;
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chat-messages {
+  flex: 1;
+  padding: 12px 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 13px;
+  min-height: 0;
+  scroll-behavior: smooth;
+}
+
+.chat-message-user {
+  margin-bottom: 16px;
+  animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.chat-message-ai {
+  margin-bottom: 16px;
+  animation: slideInLeft 0.3s ease;
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.chat-message-ai span {
+  display: inline-block;
+  padding: 10px 14px;
+  border-radius: 12px;
+  max-width: 80%;
+  line-height: 1.5;
+}
+
+.chat-message-user span {
+  display: inline;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  border: none;
+  max-width: none;
+  line-height: inherit;
+}
+
+.chat-message-ai span {
+  background: #151622;
+  border: 1px solid #272832;
+}
+
+.chat-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.chat-empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.6;
+  animation: pulse 2s ease infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.chat-empty-state p {
+  margin: 0;
+  font-size: 13px;
+  color: #9a9bb0;
+  max-width: 400px;
+}
+
+.chat-input-box {
+  padding: 12px 16px;
+  border-top: 1px solid #272832;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #050608;
+  flex-shrink: 0;
+  min-height: fit-content;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.chat-input-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.chat-input {
+  flex: 1;
+  min-width: 200px;
+  border-radius: 8px;
+  padding: 10px 12px;
+  border: 1px solid #272832;
+  background: #0a0b0f;
+  color: #f5f5f7;
+  font-size: 13px;
+  line-height: 1.5;
+  transition: all 0.2s ease;
+}
+
+.chat-input:focus {
+  outline: none;
+  border-color: #ff7a3c;
+  background: #101117;
+  box-shadow: 0 0 0 3px rgba(255, 122, 60, 0.1);
+}
+
+.chat-input::placeholder {
+  color: #676883;
+}
+
+.chat-btn {
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  padding: 10px 16px;
+  background: #ff7a3c;
+  color: #050608;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  min-height: 40px;
+}
+
+.chat-btn:hover:not(:disabled) {
+  background: #ff8c52;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 122, 60, 0.3);
+}
+
+.chat-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.chat-btn.secondary {
+  background: #1a1b26;
+  color: #f5f5f7;
+  border: 1px solid #272832;
+}
+
+.chat-btn.secondary:hover:not(:disabled) {
+  background: #222335;
+  border-color: #3a3b4d;
+}
+
+.chat-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Plan rendering */
+.plan-card {
+  border-radius: 12px;
+  background: #101117;
+  border: 1px solid #272832;
+  padding: 10px 12px;
+  margin-top: 6px;
+  animation: fadeIn 0.3s ease;
+}
+
+.plan-steps {
+  margin: 6px 0 0;
+  padding-left: 18px;
+  font-size: 12px;
+}
+
+.plan-steps li {
+  margin-bottom: 4px;
+}
+
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+  animation: fadeIn 0.2s ease;
+}
+
+.modal {
+  background: #101117;
+  border-radius: 16px;
+  border: 1px solid #272832;
+  padding: 16px 18px;
+  width: 360px;
+  animation: scaleIn 0.3s ease;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modal-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.modal-close {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #9a9bb0;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.modal-close:hover {
+  color: #ff7a3c;
+}
+
+.provider-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.provider-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: #151622;
+  border: 1px solid #272832;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.provider-item:hover {
+  border-color: #3a3b4d;
+}
+
+.provider-item.active {
+  border-color: #ff7a3c;
+  background: rgba(255, 122, 60, 0.1);
+}
+
+.provider-name {
+  font-weight: 500;
+}
+
+.provider-badge {
+  font-size: 11px;
+  color: #9a9bb0;
+}
+
+/* Navigation */
+.main-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.nav-btn {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #9a9bb0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 8px 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.nav-btn:hover {
+  background: #1a1b26;
+  color: #c3c5dd;
+}
+
+.nav-btn-active {
+  background: #1a1b26;
+  color: #f5f5f7;
+  font-weight: 600;
+  border-left: 2px solid #ff7a3c;
+  padding-left: 10px;
+}
+
+/* Settings page */
+.settings-root {
+  padding: 20px 24px;
+  overflow-y: auto;
+  max-width: 800px;
+}
+
+.settings-root h1 {
+  margin-top: 0;
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.settings-muted {
+  font-size: 13px;
+  color: #9a9bb0;
+  margin-bottom: 20px;
+  line-height: 1.5;
+}
+
+.settings-card {
+  background: #101117;
+  border-radius: 12px;
+  border: 1px solid #272832;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.settings-card:hover {
+  border-color: #3a3b4d;
+}
+
+.settings-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.settings-label {
+  font-size: 12px;
+  color: #9a9bb0;
+  font-weight: 500;
+  margin-top: 4px;
+}
+
+.settings-input,
+.settings-select {
+  background: #050608;
+  border-radius: 8px;
+  border: 1px solid #272832;
+  padding: 8px 10px;
+  color: #f5f5f7;
+  font-size: 13px;
+  font-family: inherit;
+  transition: all 0.2s ease;
+}
+
+.settings-input:focus,
+.settings-select:focus {
+  outline: none;
+  border-color: #ff7a3c;
+  box-shadow: 0 0 0 3px rgba(255, 122, 60, 0.1);
+}
+
+.settings-input::placeholder {
+  color: #676883;
+}
+
+.settings-hint {
+  font-size: 11px;
+  color: #7a7b8e;
+  margin-top: -2px;
+}
+
+.settings-actions {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.settings-save-btn {
+  background: #ff7a3c;
+  border-radius: 999px;
+  border: none;
+  outline: none;
+  padding: 9px 18px;
+  font-size: 13px;
+  cursor: pointer;
+  color: #050608;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.settings-save-btn:hover {
+  background: #ff8b52;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 122, 60, 0.3);
+}
+
+.settings-save-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.settings-success {
+  font-size: 12px;
+  color: #7cffb3;
+  font-weight: 500;
+}
+
+.settings-error {
+  font-size: 12px;
+  color: #ff8a8a;
+  font-weight: 500;
+}
+
+/* Flow viewer */
+.flow-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.flow-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #272832;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flow-header h1 {
+  margin: 0;
+  font-size: 22px;
+  margin-bottom: 4px;
+}
+
+.flow-header p {
+  margin: 0;
+  font-size: 12px;
+  color: #9a9bb0;
+  max-width: 600px;
+  line-height: 1.5;
+}
+
+.flow-canvas {
+  flex: 1;
+  background: #050608;
+  position: relative;
+}
+
+.flow-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.error-icon {
+  font-size: 48px;
+}
+
+.error-text {
+  font-size: 14px;
+  color: #ff8a8a;
+}
+
+/* Assistant Message Sections */
+.gp-section {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  background: #101117;
+  border: 1px solid #272832;
+  overflow: hidden;
+  animation: fadeIn 0.3s ease;
+}
+
+.gp-section-header {
+  padding: 8px 12px;
+  background: #151622;
+  border-bottom: 1px solid #272832;
+}
+
+.gp-section-header h3 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #c3c5dd;
+}
+
+.gp-section-content {
+  padding: 12px;
+}
+
+.gp-section-answer .gp-section-content p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #f5f5f7;
+}
+
+.gp-section-plan {
+  background: #0a0b0f;
+}
+
+/* Plan View Enhanced */
+.plan-header {
+  margin-bottom: 12px;
+}
+
+.plan-goal {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: #f5f5f7;
+}
+
+.plan-summary {
+  font-size: 12px;
+  color: #c3c5dd;
+  line-height: 1.5;
+}
+
+.plan-totals {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.plan-total {
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  animation: fadeIn 0.3s ease;
+}
+
+.plan-total-create {
+  background: rgba(76, 175, 80, 0.15);
+  color: #81c784;
+  border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.plan-total-modify {
+  background: rgba(33, 150, 243, 0.15);
+  color: #64b5f6;
+  border: 1px solid rgba(33, 150, 243, 0.3);
+}
+
+.plan-total-delete {
+  background: rgba(244, 67, 54, 0.15);
+  color: #e57373;
+  border: 1px solid rgba(244, 67, 54, 0.3);
+}
+
+.plan-step {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #1a1b26;
+}
+
+.plan-step:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.plan-step-header {
+  margin-bottom: 6px;
+}
+
+.plan-step-description {
+  font-size: 12px;
+  color: #9a9bb0;
+  margin-bottom: 8px;
+}
+
+.plan-files {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0;
+}
+
+.plan-file {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.gp-pill {
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.gp-pill-create {
+  background: rgba(76, 175, 80, 0.2);
+  color: #81c784;
+  border: 1px solid rgba(76, 175, 80, 0.4);
+}
+
+.gp-pill-modify {
+  background: rgba(33, 150, 243, 0.2);
+  color: #64b5f6;
+  border: 1px solid rgba(33, 150, 243, 0.4);
+}
+
+.gp-pill-delete {
+  background: rgba(244, 67, 54, 0.2);
+  color: #e57373;
+  border: 1px solid rgba(244, 67, 54, 0.4);
+}
+
+.plan-file-path {
+  font-size: 11px;
+  color: #c3c5dd;
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  background: #0a0b0f;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.plan-step-risks {
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: rgba(255, 152, 0, 0.1);
+  border-left: 2px solid #ff9800;
+  border-radius: 4px;
+  font-size: 11px;
+  color: #ffb74d;
+}
+
+.plan-risk-label {
+  font-weight: 600;
+}
+
+/* Execution Log */
+.execution-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.execution-step {
+  padding: 8px;
+  margin-bottom: 6px;
+  background: #0a0b0f;
+  border-radius: 6px;
+  font-size: 11px;
+  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
+  white-space: pre-wrap;
+}
+
+.execution-step-number {
+  color: #ff7a3c;
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.execution-step-summary {
+  color: #c3c5dd;
+}
+
+/* Project Context Panel - Properly constrained */
+.gp-context {
+  padding: 12px;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.gp-context-column {
+  background: #0a0b0f;
+  border-right: 1px solid #272832;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.gp-chat-column {
+  display: flex;
+  flex-direction: column;
+  background: #050608;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.gp-card {
+  background: #101117;
+  border-radius: 12px;
+  border: 1px solid #272832;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.gp-card-header {
+  padding: 10px 12px;
+  background: #151622;
+  border-bottom: 1px solid #272832;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+.gp-card-header h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #f5f5f7;
+}
+
+.gp-badge {
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: #2a2b3c;
+  border: 1px solid #3a3b4d;
+  font-size: 11px;
+  color: #c3c5dd;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.gp-badge:hover {
+  border-color: #ff7a3c;
+}
+
+.gp-context-meta {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-bottom: 1px solid #272832;
+  flex-shrink: 0;
+  background: #0a0b0f;
+}
+
+.gp-context-meta-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.gp-context-meta-label {
+  color: #9a9bb0;
+  min-width: 60px;
+}
+
+.gp-context-meta-item strong {
+  color: #f5f5f7;
+  font-weight: 500;
+}
+
+/* File tree - Properly scrollable */
+.gp-context-tree {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  padding: 4px;
+}
+
+.gp-context-empty {
+  padding: 20px 12px;
+  text-align: center;
+  color: #9a9bb0;
+  font-size: 12px;
+}
+
+/* Footer - Fixed at bottom */
+.gp-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid #272832;
+  padding: 8px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  color: #9a9bb0;
+  background: #0a0b0f;
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.gp-footer-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+  color: #c3c5dd;
+}
+
+.gp-footer-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.gp-footer-right a {
+  color: #9a9bb0;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.gp-footer-right a:hover {
+  color: #ff7a3c;
+  transform: translateY(-1px);
+}
+
+/* Adjust app-root to account for fixed footer */
+.app-root > .main-wrapper {
+  padding-bottom: 32px; /* Space for fixed footer */
+}
+
+/* ============================================================================
+   LOGIN PAGE - Enterprise GitHub Authentication
+   ============================================================================ */
+
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at center, #171823 0%, #050608 70%);
+  padding: 20px;
+  animation: fadeIn 0.4s ease;
+}
+
+.login-container {
+  width: 100%;
+  max-width: 480px;
+  background: #101117;
+  border: 1px solid #272832;
+  border-radius: 24px;
+  padding: 40px 36px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  animation: slideUp 0.5s ease;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Header */
+.login-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.logo-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #ff7a3c 0%, #ff6b2b 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 28px;
+  color: #050608;
+  box-shadow: 0 8px 24px rgba(255, 122, 60, 0.3);
+  transition: transform 0.3s ease;
+}
+
+.logo-icon:hover {
+  transform: scale(1.05) rotate(3deg);
+}
+
+.login-title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: #f5f5f7;
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+}
+
+.login-subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #9a9bb0;
+  font-weight: 500;
+}
+
+/* Welcome Section */
+.login-welcome {
+  margin-bottom: 28px;
+  padding-bottom: 28px;
+  border-bottom: 1px solid #272832;
+}
+
+.login-welcome h2 {
+  margin: 0 0 12px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #f5f5f7;
+}
+
+.login-welcome p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #c3c5dd;
+}
+
+/* Error Message */
+.login-error {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  background: rgba(255, 82, 82, 0.1);
+  border: 1px solid rgba(255, 82, 82, 0.3);
+  border-radius: 10px;
+  color: #ff8a8a;
+  font-size: 13px;
+  margin-bottom: 20px;
+  animation: shake 0.4s ease;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+.login-error svg {
+  flex-shrink: 0;
+}
+
+/* Login Actions */
+.login-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 28px;
+}
+
+/* Buttons */
+.btn-primary,
+.btn-secondary,
+.btn-text {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.btn-large {
+  padding: 14px 24px;
+  font-size: 15px;
+  border-radius: 12px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #ff7a3c 0%, #ff6b2b 100%);
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(255, 122, 60, 0.25);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(255, 122, 60, 0.35);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: #1a1b26;
+  color: #f5f5f7;
+  border: 1px solid #3a3b4d;
+}
+
+.btn-secondary:hover {
+  background: #2a2b3c;
+  border-color: #4a4b5d;
+  transform: translateY(-1px);
+}
+
+.btn-text {
+  background: transparent;
+  color: #9a9bb0;
+  padding: 10px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.btn-text:hover {
+  color: #ff7a3c;
+}
+
+/* Button Spinner */
+.btn-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Loading Spinner (Page) */
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid #272832;
+  border-top-color: #ff7a3c;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin: 0 auto;
+}
+
+/* Divider */
+.login-divider {
+  position: relative;
+  text-align: center;
+  margin: 8px 0;
+}
+
+.login-divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #272832;
+}
+
+.login-divider span {
+  position: relative;
+  display: inline-block;
+  padding: 0 16px;
+  background: #101117;
+  color: #9a9bb0;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* Form */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  margin-bottom: 28px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f5f5f7;
+}
+
+.form-input {
+  background: #0a0b0f;
+  border: 1px solid #272832;
+  border-radius: 10px;
+  padding: 12px 14px;
+  color: #f5f5f7;
+  font-size: 14px;
+  font-family: "SF Mono", Monaco, monospace;
+  transition: all 0.2s ease;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #ff7a3c;
+  box-shadow: 0 0 0 4px rgba(255, 122, 60, 0.1);
+}
+
+.form-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-input::placeholder {
+  color: #676883;
+}
+
+.form-hint {
+  font-size: 12px;
+  color: #9a9bb0;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.form-link {
+  color: #ff7a3c;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.form-link:hover {
+  color: #ff8b52;
+  text-decoration: underline;
+}
+
+.form-hint code {
+  background: #1a1b26;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: "SF Mono", Monaco, monospace;
+  font-size: 11px;
+  color: #ff7a3c;
+}
+
+/* Notice (for no auth configured) */
+.login-notice {
+  padding: 20px;
+  background: rgba(255, 152, 0, 0.1);
+  border: 1px solid rgba(255, 152, 0, 0.3);
+  border-radius: 12px;
+  margin-bottom: 28px;
+}
+
+.login-notice h3 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  color: #ffb74d;
+}
+
+.login-notice p {
+  margin: 0 0 12px 0;
+  font-size: 13px;
+  color: #c3c5dd;
+  line-height: 1.6;
+}
+
+.login-notice ul {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: #c3c5dd;
+  line-height: 1.8;
+}
+
+.login-notice code {
+  background: #1a1b26;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: "SF Mono", Monaco, monospace;
+  font-size: 12px;
+  color: #ff7a3c;
+}
+
+/* Features List */
+.login-features {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px 0;
+  border-top: 1px solid #272832;
+  border-bottom: 1px solid #272832;
+  margin-bottom: 20px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.feature-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #7cffb3;
+}
+
+.feature-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.feature-text strong {
+  font-size: 13px;
+  font-weight: 600;
+  color: #f5f5f7;
+}
+
+.feature-text span {
+  font-size: 12px;
+  color: #9a9bb0;
+}
+
+/* Footer */
+.login-footer {
+  text-align: center;
+}
+
+.login-footer p {
+  margin: 0;
+  font-size: 11px;
+  color: #7a7b8e;
+  line-height: 1.6;
+}/* ============================================================================
+   INSTALLATION MODAL - Claude Code Style
+   ============================================================================ */
+
+.install-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+  z-index: 9999;
+  animation: fadeIn 0.2s ease;
+}
+
+.install-modal {
+  width: 480px;
+  max-width: 90vw;
+  background: #101117;
+  border: 1px solid #272832;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  animation: modalSlideIn 0.3s ease;
+  overflow: hidden;
+}
+
+@keyframes modalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Modal Header */
+.install-modal-header {
+  padding: 32px 32px 24px;
+  text-align: center;
+  border-bottom: 1px solid #272832;
+}
+
+.install-modal-logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.logo-icon-large {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ff7a3c 0%, #ff6b2b 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 24px;
+  color: #050608;
+  box-shadow: 0 4px 16px rgba(255, 122, 60, 0.3);
+}
+
+.install-modal-title {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #f5f5f7;
+}
+
+.install-modal-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #9a9bb0;
+  line-height: 1.5;
+}
+
+/* Status Indicator */
+.install-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  margin: 16px 24px;
+  border-radius: 8px;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.install-status-error {
+  background: rgba(255, 82, 82, 0.1);
+  border: 1px solid rgba(255, 82, 82, 0.3);
+  color: #ff8a8a;
+}
+
+.install-status-pending {
+  background: rgba(255, 152, 0, 0.1);
+  border: 1px solid rgba(255, 152, 0, 0.3);
+  color: #ffb74d;
+}
+
+.status-icon {
+  flex-shrink: 0;
+}
+
+.status-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 180, 77, 0.3);
+  border-top-color: #ffb74d;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Installation Steps */
+.install-steps {
+  padding: 24px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.install-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.step-number {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: #1a1b26;
+  border: 1px solid #3a3b4d;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: #ff7a3c;
+}
+
+.step-content h3 {
+  margin: 0 0 4px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #f5f5f7;
+}
+
+.step-content p {
+  margin: 0;
+  font-size: 12px;
+  color: #9a9bb0;
+  line-height: 1.5;
+}
+
+/* Action Buttons */
+.install-modal-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 24px;
+  border-top: 1px solid #272832;
+  background: #0a0b0f;
+}
+
+.btn-install-primary {
+  border: none;
+  outline: none;
+  background: #000;
+  color: #fff;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.btn-install-primary:hover:not(:disabled) {
+  background: #1a1a1a;
+  transform: translateY(-1px);
+}
+
+.btn-install-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-install-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-check-status {
+  border: 1px solid #3a3b4d;
+  outline: none;
+  background: #1a1b26;
+  color: #f5f5f7;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.btn-check-status:hover:not(:disabled) {
+  background: #2a2b3c;
+  border-color: #4a4b5d;
+}
+
+.btn-check-status:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-install-secondary {
+  border: 1px solid #3a3b4d;
+  outline: none;
+  background: transparent;
+  color: #c3c5dd;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.btn-install-secondary:hover:not(:disabled) {
+  background: #1a1b26;
+  border-color: #4a4b5d;
+}
+
+.btn-install-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Footer */
+.install-modal-footer {
+  padding: 16px 32px 24px;
+  text-align: center;
+}
+
+.install-modal-footer p {
+  margin: 0;
+  font-size: 12px;
+  color: #7a7b8e;
+  line-height: 1.6;
+}
+
+.install-modal-footer strong {
+  color: #c3c5dd;
+  font-weight: 600;
+}
+
+/* Button spinner */
+.btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Secondary primary-style button for "Load available models" */
+.settings-load-btn {
+  margin-top: 8px;
+
+  /* Make it hug the text, not full width */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto !important;
+  min-width: 0;
+  align-self: flex-start;
+
+  /* Size: slightly smaller than Save but same family */
+  padding: 7px 14px;
+  border-radius: 999px;
+
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+
+  border: none;
+  outline: none;
+  cursor: pointer;
+
+  /* Match Save button color palette */
+  background: #ff7a3c;
+  color: #050608;
+
+  transition:
+    background 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.15s ease,
+    opacity 0.2s ease;
+}
+
+.settings-load-btn:hover {
+  background: #ff8b52;
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(255, 122, 60, 0.28);
+}
+
+.settings-load-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(255, 122, 60, 0.25);
+}
+
+.settings-load-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* ------------------------------
+   LLM Settings Loading Experience
+   ------------------------------ */
+
+.settings-loading-shell {
+  min-height: calc(100vh - 32px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 24px;
+}
+
+.settings-loading-card {
+  width: 100%;
+  max-width: 520px;
+  background: #101117;
+  border: 1px solid #272832;
+  border-radius: 20px;
+  padding: 40px 28px;
+  text-align: center;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+}
+
+.settings-loading-card h1 {
+  margin: 0 0 6px 0;
+  font-size: 28px;
+  line-height: 1.1;
+}
+
+.settings-loading-subtitle {
+  font-size: 13px;
+  color: #9a9bb0;
+  margin-bottom: 18px;
+}
+
+.settings-loading-text {
+  font-size: 14px;
+  color: #d4d7e1;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.settings-loading-spinner {
+  width: 56px;
+  height: 56px;
+  border: 4px solid #272832;
+  border-top-color: #ff7a3c;
+  border-right-color: rgba(255, 122, 60, 0.7);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin: 0 auto 18px;
+}
+
+.settings-loading-slow {
+  margin-top: 18px;
+  padding: 14px 16px;
+  background: #0b0c11;
+  border: 1px solid #272832;
+  border-radius: 12px;
+}
+
+.settings-loading-slow p {
+  margin: 0 0 12px 0;
+  color: #9a9bb0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.settings-inline-error-card {
+  width: 100%;
+  max-width: 620px;
+  margin: 60px auto 0;
+  background: #101117;
+  border: 1px solid #272832;
+  border-radius: 16px;
+  padding: 28px 24px;
+}
+
+.settings-error-banner,
+.settings-success-banner {
+  border-radius: 12px;
+  padding: 12px 14px;
+  margin-bottom: 14px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.settings-error-banner {
+  background: rgba(255, 87, 87, 0.08);
+  border: 1px solid rgba(255, 87, 87, 0.24);
+  color: #ffb0b0;
+}
+
+.settings-success-banner {
+  background: rgba(67, 181, 129, 0.08);
+  border: 1px solid rgba(67, 181, 129, 0.24);
+  color: #9ce7c2;
+}
+
+.settings-error-text {
+  color: #ffb0b0;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 12px 0 18px;
+}
+
+.settings-secondary-btn {
+  background: transparent;
+  border: 1px solid #313244;
+  color: #f5f5f7;
+  border-radius: 999px;
+  padding: 9px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.settings-secondary-btn:hover {
+  border-color: #ff7a3c;
+  color: #fff;
+  background: rgba(255, 122, 60, 0.08);
+}
+
+.settings-inline-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.settings-inline-row .settings-input {
+  flex: 1;
+}
+
+.settings-model-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.settings-model-chip {
+  background: #090a0e;
+  border: 1px solid #2b2c36;
+  border-radius: 999px;
+  color: #f5f5f7;
+  padding: 8px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+}
+
+.settings-model-chip:hover {
+  border-color: #ff7a3c;
+  background: rgba(255, 122, 60, 0.08);
+}
+
+/* =========================================================
+   Startup Screen — Enterprise Loader
+   ========================================================= */
+
+.startup-screen {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  box-sizing: border-box;
+  background:
+    radial-gradient(circle at top center, rgba(255, 122, 60, 0.10), transparent 18%),
+    linear-gradient(180deg, #050814 0%, #03060f 100%);
+}
+
+.startup-card {
+  width: min(100%, 520px);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 28px 28px 24px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(180deg, rgba(18, 24, 42, 0.94) 0%, rgba(10, 15, 28, 0.96) 100%);
+  box-shadow:
+    0 10px 40px rgba(0, 0, 0, 0.45),
+    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
+  backdrop-filter: blur(12px);
+}
+
+.startup-brand-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.startup-brand-mark {
+  position: relative;
+  width: 52px;
+  height: 52px;
+  flex: 0 0 52px;
+}
+
+.startup-brand-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 122, 60, 0.22);
+  border-top-color: #ff7a3c;
+  animation: startup-spin 1.1s linear infinite;
+}
+
+.startup-brand-core {
+  position: absolute;
+  inset: 11px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 122, 60, 0.95) 0%, rgba(255, 122, 60, 0.25) 72%, transparent 100%);
+  box-shadow: 0 0 24px rgba(255, 122, 60, 0.28);
+}
+
+.startup-brand-copy {
+  min-width: 0;
+}
+
+.startup-title {
+  font-size: 26px;
+  line-height: 1.1;
+  font-weight: 700;
+  color: #f8fafc;
+  letter-spacing: 0.01em;
+}
+
+.startup-subtitle {
+  margin-top: 4px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #94a3b8;
+}
+
+.startup-loader-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 4px;
+}
+
+.startup-loader {
+  position: relative;
+  width: 72px;
+  height: 72px;
+}
+
+.startup-loader-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+
+.startup-loader-ring-outer {
+  border: 4px solid rgba(255, 255, 255, 0.08);
+  border-top-color: #ff7a3c;
+  animation: startup-spin 1s linear infinite;
+}
+
+.startup-loader-ring-inner {
+  inset: 10px;
+  border: 3px solid rgba(255, 122, 60, 0.14);
+  border-bottom-color: rgba(255, 122, 60, 0.9);
+  animation: startup-spin-reverse 1.4s linear infinite;
+}
+
+.startup-status-block {
+  text-align: center;
+}
+
+.startup-status {
+  font-size: 18px;
+  font-weight: 600;
+  color: #f8fafc;
+  letter-spacing: 0.01em;
+}
+
+.startup-detail {
+  margin-top: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #94a3b8;
+}
+
+.startup-phase-row {
+  display: flex;
+  justify-content: center;
+}
+
+.startup-phase-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgba(255, 122, 60, 0.12);
+  border: 1px solid rgba(255, 122, 60, 0.24);
+  color: #ffb089;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.startup-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.startup-meta-item {
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.035);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.startup-meta-item-wide {
+  grid-column: 1 / -1;
+}
+
+.startup-meta-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.startup-meta-value {
+  margin-top: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #e2e8f0;
+  word-break: break-word;
+}
+
+.startup-footer {
+  font-size: 12px;
+  line-height: 1.6;
+  color: #64748b;
+  text-align: center;
+}
+
+@keyframes startup-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes startup-spin-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+@media (max-width: 640px) {
+  .startup-screen {
+    padding: 20px;
+  }
+
+  .startup-card {
+    padding: 22px 20px 20px;
+    border-radius: 18px;
+  }
+
+  .startup-title {
+    font-size: 22px;
+  }
+
+  .startup-meta-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .startup-meta-item-wide {
+    grid-column: auto;
+  }
+}

frontend/utils/api.js

@@ -0,0 +1,251 @@
+/**
+ * API utilities for authenticated requests
+ */
+
+/**
+ * Get backend URL from environment or use relative path (for local dev)
+ * - Production (Vercel): Uses VITE_BACKEND_URL env var (e.g., https://gitpilot-backend.onrender.com)
+ * - Development (local): Uses relative paths (proxied by Vite to localhost:8000)
+ */
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || '';
+
+/**
+ * Check if backend URL is configured
+ * @returns {boolean} True if backend URL is set
+ */
+export function isBackendConfigured() {
+  return BACKEND_URL !== '' && BACKEND_URL !== undefined;
+}
+
+/**
+ * Get the configured backend URL
+ * @returns {string} Backend URL or empty string
+ */
+export function getBackendUrl() {
+  return BACKEND_URL;
+}
+
+/**
+ * Construct full API URL
+ * @param {string} path - API endpoint path (e.g., '/api/chat/plan')
+ * @returns {string} Full URL to API endpoint
+ */
+export function apiUrl(path) {
+  // Ensure path starts with /
+  const cleanPath = path.startsWith('/') ? path : `/${path}`;
+  return `${BACKEND_URL}${cleanPath}`;
+}
+
+/**
+ * Enhanced fetch with better error handling for JSON parsing
+ * @param {string} url - URL to fetch
+ * @param {Object} options - Fetch options
+ * @returns {Promise<any>} Parsed JSON response
+ */
+export async function safeFetchJSON(url, options = {}) {
+  try {
+    // Add timeout to prevent hanging when backend is starting up.
+    // Default raised to 15s to tolerate first-load GitHub API checks.
+    const timeout = options.timeout || 15000;
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeout);
+    const fetchOptions = { ...options, signal: options.signal || controller.signal };
+    delete fetchOptions.timeout;
+
+    let response;
+    try {
+      response = await fetch(url, fetchOptions);
+    } finally {
+      clearTimeout(timer);
+    }
+    const contentType = response.headers.get('content-type');
+
+    // Check if response is actually JSON
+    if (!contentType || !contentType.includes('application/json')) {
+      // If not JSON, it might be an HTML error page
+      const text = await response.text();
+
+      // Check if it looks like HTML (starts with <!doctype or <html)
+      if (text.trim().toLowerCase().startsWith('<!doctype') ||
+          text.trim().toLowerCase().startsWith('<html')) {
+        throw new Error(
+          `Backend not reachable. Received HTML instead of JSON. ` +
+          `${!isBackendConfigured() ? 'VITE_BACKEND_URL environment variable is not configured. ' : ''}` +
+          `Please check your backend configuration.`
+        );
+      }
+
+      // Try to return the text as-is if not HTML
+      throw new Error(`Unexpected response type: ${contentType || 'unknown'}. Response: ${text.substring(0, 100)}`);
+    }
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.detail || data.error || data.message || `Request failed with status ${response.status}`);
+    }
+
+    return data;
+  } catch (error) {
+    // Re-throw with better error message
+    if (error.name === 'AbortError') {
+      throw new Error(
+        `Backend server did not respond in time. ` +
+        `Please check that the backend is running at ${BACKEND_URL || 'localhost:8000'}.`
+      );
+    }
+    if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
+      throw new Error(
+        `Cannot connect to backend server. ` +
+        `${!isBackendConfigured() ? 'VITE_BACKEND_URL environment variable is not configured. ' : ''}` +
+        `Please check that the backend is running and accessible.`
+      );
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get authorization headers with GitHub token
+ * @returns {Object} Headers object with Authorization if token exists
+ */
+export function getAuthHeaders() {
+  const token = localStorage.getItem('github_token');
+
+  if (!token) {
+    return {};
+  }
+
+  return {
+    'Authorization': `Bearer ${token}`,
+  };
+}
+
+/**
+ * Make an authenticated fetch request
+ * @param {string} url - API endpoint URL
+ * @param {Object} options - Fetch options
+ * @returns {Promise<Response>} Fetch response
+ */
+export async function authFetch(url, options = {}) {
+  const headers = {
+    ...getAuthHeaders(),
+    ...options.headers,
+  };
+
+  return fetch(url, {
+    ...options,
+    headers,
+  });
+}
+
+/**
+ * Make an authenticated JSON request
+ * @param {string} url - API endpoint URL
+ * @param {Object} options - Fetch options
+ * @returns {Promise<any>} Parsed JSON response
+ */
+export async function authFetchJSON(url, options = {}) {
+  const headers = {
+    'Content-Type': 'application/json',
+    ...getAuthHeaders(),
+    ...options.headers,
+  };
+
+  const response = await fetch(url, {
+    ...options,
+    headers,
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: 'Request failed' }));
+    throw new Error(error.detail || error.message || 'Request failed');
+  }
+
+  return response.json();
+}
+
+// ─── Redesigned API Endpoints ────────────────────────────
+
+/**
+ * Get normalized server status
+ */
+export async function fetchStatus() {
+  return safeFetchJSON(apiUrl("/api/status"));
+}
+
+/**
+ * Get server status with retry (for startup when backend may still be booting).
+ * Retries up to `maxRetries` times with `delayMs` between attempts.
+ * @param {number} maxRetries - Maximum retry attempts (default: 8)
+ * @param {number} delayMs - Delay between retries in ms (default: 2000)
+ * @returns {Promise<any>} Parsed status response or null
+ */
+export async function fetchStatusWithRetry(maxRetries = 8, delayMs = 2000) {
+  for (let i = 0; i < maxRetries; i++) {
+    try {
+      return await safeFetchJSON(apiUrl("/api/status"), { timeout: 5000 });
+    } catch {
+      if (i < maxRetries - 1) {
+        await new Promise((r) => setTimeout(r, delayMs));
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Get detailed provider status
+ */
+export async function fetchProviderStatus() {
+  return safeFetchJSON(apiUrl("/api/providers/status"));
+}
+
+/**
+ * Test a provider configuration
+ */
+export async function testProvider(providerConfig) {
+  return safeFetchJSON(apiUrl("/api/providers/test"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(providerConfig),
+  });
+}
+
+/**
+ * Start a session by mode
+ */
+export async function startSession(sessionConfig) {
+  return safeFetchJSON(apiUrl("/api/session/start"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(sessionConfig),
+  });
+}
+
+/**
+ * Send a chat message (redesigned endpoint)
+ */
+export async function sendChatMessage(messageConfig) {
+  return safeFetchJSON(apiUrl("/api/chat/send"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(messageConfig),
+  });
+}
+
+/**
+ * Get workspace summary
+ */
+export async function fetchWorkspaceSummary(folderPath) {
+  const query = folderPath ? `?folder_path=${encodeURIComponent(folderPath)}` : "";
+  return safeFetchJSON(apiUrl(`/api/workspace/summary${query}`));
+}
+
+/**
+ * Run security scan on workspace
+ */
+export async function scanWorkspace(path) {
+  const query = path ? `?path=${encodeURIComponent(path)}` : "";
+  return safeFetchJSON(apiUrl(`/api/security/scan-workspace${query}`));
+}

frontend/utils/appInit.js

@@ -0,0 +1,157 @@
+/**
+ * GitPilot App Initialization — Single Source of Truth.
+ *
+ * Best-practice bootstrap pattern:
+ * - Runs EXACTLY ONCE per page load (even with React StrictMode)
+ * - Two-phase strategy: fast ping → then parallel status fetch
+ * - Long retry budget for slow backends (WSL, HF Spaces cold start)
+ * - Shared result between App.jsx and LoginPage.jsx
+ * - No duplicate polling, no race conditions
+ *
+ * Phase 1 — Readiness probe (/api/ping):
+ *   /api/ping is a zero-dependency endpoint that responds instantly
+ *   once uvicorn is listening. We poll it with short timeouts and many
+ *   retries to detect backend readiness WITHOUT wasting time on the
+ *   heavy /api/status endpoint (which does GitHub API checks).
+ *
+ * Phase 2 — Data fetch (/api/status + /api/auth/status):
+ *   Only after ping succeeds, we fetch the real status data in parallel.
+ *   These can still be slow (GitHub API, LLM provider probes) but the
+ *   user already sees the login page.
+ *
+ * API call budget per page load:
+ *   - Best case:  2-3 × /api/ping + 1 × /api/status + 1 × /api/auth/status
+ *   - Worst case: up to 30 × /api/ping + 1 + 1  (60s timeout budget)
+ */
+import { safeFetchJSON, apiUrl } from './api.js';
+
+// Module-level singleton — survives React StrictMode double-mount
+let _initPromise = null;
+let _initResult = null;
+
+const PING_MAX_ATTEMPTS = 30;     // up to ~60s of readiness polling
+const PING_INTERVAL_MS = 2000;    // 2s between pings
+const PING_TIMEOUT_MS = 4000;     // each ping gives up after 4s
+const STATUS_TIMEOUT_MS = 15000;  // once ready, status fetch has 15s
+
+/**
+ * Wait for the backend to become reachable by polling /api/ping.
+ * This is a zero-dependency endpoint that responds instantly once
+ * uvicorn is listening — much faster than /api/status which does
+ * GitHub API checks.
+ *
+ * @returns {Promise<boolean>} true if backend became reachable, false otherwise
+ */
+async function waitForBackend() {
+  for (let i = 0; i < PING_MAX_ATTEMPTS; i++) {
+    try {
+      const result = await safeFetchJSON(
+        apiUrl('/api/ping'),
+        { timeout: PING_TIMEOUT_MS }
+      );
+      if (result && (result.ok === true || result.service)) {
+        console.log(
+          `[initApp] ✅ Backend reachable after ${i + 1} ping attempt(s) ` +
+          `(${(i * PING_INTERVAL_MS) / 1000}s elapsed)`
+        );
+        return true;
+      }
+    } catch (err) {
+      // Silent — we expect failures during cold start
+      if (i === 0 || i % 5 === 0) {
+        console.log(
+          `[initApp] Waiting for backend... ` +
+          `attempt ${i + 1}/${PING_MAX_ATTEMPTS}`
+        );
+      }
+    }
+    // Wait before next ping (except after last attempt)
+    if (i < PING_MAX_ATTEMPTS - 1) {
+      await new Promise((r) => setTimeout(r, PING_INTERVAL_MS));
+    }
+  }
+  return false;
+}
+
+/**
+ * Initialize the app.
+ * Phase 1: poll /api/ping until backend is reachable
+ * Phase 2: fetch /api/status and /api/auth/status in parallel
+ *
+ * @returns {Promise<{status: object|null, authMode: string, ready: boolean, error: string|null}>}
+ */
+export function initApp() {
+  if (_initPromise) {
+    return _initPromise;
+  }
+
+  _initPromise = (async () => {
+    // ── Phase 1: wait for backend to be reachable ──
+    const reachable = await waitForBackend();
+
+    if (!reachable) {
+      console.error(
+        `[initApp] ❌ Backend did not respond after ${PING_MAX_ATTEMPTS} ping attempts ` +
+        `(${(PING_MAX_ATTEMPTS * PING_INTERVAL_MS) / 1000}s). Giving up.`
+      );
+      _initResult = {
+        status: null,
+        authMode: 'device',
+        ready: false,
+        error: 'Backend did not become reachable. Please check that the server is running.',
+      };
+      return _initResult;
+    }
+
+    // ── Phase 2: fetch real data in parallel ──
+    try {
+      console.log('[initApp] Fetching /api/status + /api/auth/status in parallel...');
+      const [status, authStatus] = await Promise.all([
+        safeFetchJSON(apiUrl('/api/status'), { timeout: STATUS_TIMEOUT_MS }),
+        safeFetchJSON(apiUrl('/api/auth/status'), { timeout: STATUS_TIMEOUT_MS })
+          .catch(() => null),
+      ]);
+
+      console.log('[initApp] ✅ Init complete');
+      _initResult = {
+        status,
+        authMode: (authStatus && authStatus.mode) || 'device',
+        ready: true,
+        error: null,
+      };
+      return _initResult;
+    } catch (err) {
+      // Backend was reachable via ping but status fetch failed
+      // Still return ready:true so UI can proceed with limited state
+      console.warn(
+        `[initApp] Status fetch failed after ping succeeded: ${err.message || err}. ` +
+        `Proceeding with limited state.`
+      );
+      _initResult = {
+        status: null,
+        authMode: 'device',
+        ready: true,  // backend is up, just slow
+        error: null,
+      };
+      return _initResult;
+    }
+  })();
+
+  return _initPromise;
+}
+
+/**
+ * Get the cached init result (null if init hasn't completed yet).
+ */
+export function getInitResult() {
+  return _initResult;
+}
+
+/**
+ * Reset the init singleton. Call this only when you need to force
+ * a re-initialization (e.g., after the user manually clicks "Retry").
+ */
+export function resetInit() {
+  _initPromise = null;
+  _initResult = null;
+}