From 8f5980d1e7a5d0bc9cd6bc659fcec79e6cb10d07 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:08:33 -0400
Subject: [PATCH 01/12] feat(api): list_remote_branches via git ls-remote (#77)

---
 api/services/clone.py              | 48 ++++++++++++++++++++++++++++++
 api/tests/test_branches_service.py | 24 +++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 api/tests/test_branches_service.py

diff --git a/api/services/clone.py b/api/services/clone.py
index 0f698885..023d137b 100644
--- a/api/services/clone.py
+++ b/api/services/clone.py
@@ -61,6 +61,7 @@ class HostUnreachableError(CloneError):
     "RepoNotFoundError",
     "clone_dir_for",
     "ensure_clone",
+    "list_remote_branches",
     "remove_clone",
 ]
 
@@ -569,3 +570,50 @@ def remove_clone(url: str, branch: str | None) -> bool:
         return False
     shutil.rmtree(target, ignore_errors=True)
     return True
+
+
+# ls-remote timeout: bounded so a black-holed remote can't wedge a request.
+# 20s covers a slow-but-live remote; a real hang trips it and surfaces a clean
+# HostUnreachableError to the caller.
+_LS_REMOTE_TIMEOUT_S = 20
+
+
+def list_remote_branches(url: str) -> tuple[list[str], str | None]:
+    """Return ``(branch_names, default_branch)`` for a remote git URL via
+    ``git ls-remote --symref`` — no clone required (strictly less capability
+    than the clone the server already does for the same URL).
+
+    ``default_branch`` is the name HEAD points at (None if the remote has no
+    symbolic HEAD, e.g. an empty repo). Raises the same clean CloneError
+    subclasses ``ensure_clone`` raises so routers reuse one error taxonomy."""
+    try:
+        proc = subprocess.run(
+            ["git", "ls-remote", "--symref", "--", url],
+            capture_output=True,
+            text=True,
+            check=False,
+            env=_git_env(),
+            timeout=_LS_REMOTE_TIMEOUT_S,
+        )
+    except FileNotFoundError as e:
+        raise CloneError("git executable not found on PATH") from e
+    except subprocess.TimeoutExpired as e:
+        raise HostUnreachableError("timed out reaching remote") from e
+    if proc.returncode != 0:
+        _maybe_raise_clean_clone_error(url, None, proc.stderr)
+        raise CloneError(f"git ls-remote failed: {proc.stderr.strip()}")
+
+    default: str | None = None
+    branches: list[str] = []
+    for line in proc.stdout.splitlines():
+        # Symref line: "ref: refs/heads/main\tHEAD"
+        if line.startswith("ref: ") and line.endswith("\tHEAD"):
+            target = line[len("ref: ") :].split("\t", 1)[0]
+            if target.startswith("refs/heads/"):
+                default = target[len("refs/heads/") :]
+            continue
+        # Ref line: "<sha>\trefs/heads/<name>"
+        parts = line.split("\t")
+        if len(parts) == 2 and parts[1].startswith("refs/heads/"):
+            branches.append(parts[1][len("refs/heads/") :])
+    return branches, default
diff --git a/api/tests/test_branches_service.py b/api/tests/test_branches_service.py
new file mode 100644
index 00000000..ccbb93db
--- /dev/null
+++ b/api/tests/test_branches_service.py
@@ -0,0 +1,24 @@
+"""Unit coverage for list_remote_branches (git ls-remote parsing)."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+import pytest
+
+from api.services.clone import RepoNotFoundError, list_remote_branches
+
+
+def test_lists_heads_and_default(make_fake_remote, tmp_path: Path) -> None:
+    bare, _ = make_fake_remote(tmp_path)  # bare repo, HEAD → main, has 'feature' too
+    branches, resolved_default = list_remote_branches(f"file://{bare}")
+    assert "main" in branches
+    assert "feature" in branches
+    assert resolved_default == "main"
+    # Only heads, no tags/HEAD pseudo-refs leak in.
+    assert all("/" not in b for b in branches)
+
+
+def test_bogus_url_raises(tmp_path: Path) -> None:
+    with pytest.raises((RepoNotFoundError, Exception)):
+        list_remote_branches(f"file://{tmp_path / 'nope.git'}")

From 908bacbd396b87c5828a33befec0821e692ef352 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:18:40 -0400
Subject: [PATCH 02/12] feat(app): fetchBranches client for /api/branches (#77)

---
 app/src/api/branches.ts        | 28 ++++++++++++++++++++++++++++
 app/tests/api/branches.test.ts | 22 ++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 app/src/api/branches.ts
 create mode 100644 app/tests/api/branches.test.ts

diff --git a/app/src/api/branches.ts b/app/src/api/branches.ts
new file mode 100644
index 00000000..67c6b8ab
--- /dev/null
+++ b/app/src/api/branches.ts
@@ -0,0 +1,28 @@
+// api/branches.ts — Client for GET /api/branches. Fetches the remote branch
+// list for a git URL so the picker can offer a valid-for-this-repo dropdown
+// instead of a free-text field. Remote URLs only (local sources have no branch).
+
+import { URL_PARAMS } from '@/constants/urlParams';
+
+export interface BranchList {
+  branches: string[];
+  default: string | null;
+}
+
+export async function fetchBranches(src: string): Promise<BranchList> {
+  const url = new URL('/api/branches', window.location.origin);
+  url.searchParams.set(URL_PARAMS.SRC, src);
+  const resp = await fetch(url.toString());
+  if (!resp.ok) {
+    let message = `branch lookup failed (${resp.status})`;
+    try {
+      const body = (await resp.json()) as { detail?: string };
+      if (body?.detail) message = body.detail;
+    } catch (_) {
+      /* non-JSON error body: keep the status-based message */
+    }
+    throw new Error(message);
+  }
+  const body = (await resp.json()) as BranchList;
+  return { branches: body.branches ?? [], default: body.default ?? null };
+}
diff --git a/app/tests/api/branches.test.ts b/app/tests/api/branches.test.ts
new file mode 100644
index 00000000..a91f8d1c
--- /dev/null
+++ b/app/tests/api/branches.test.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { fetchBranches } from '@/api/branches';
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('fetchBranches', () => {
+  it('returns branches + default on ok', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () =>
+      new Response(JSON.stringify({ branches: ['main', 'dev'], default: 'main' }), { status: 200 })
+    ));
+    const r = await fetchBranches('https://github.com/o/r');
+    expect(r.branches).toEqual(['main', 'dev']);
+    expect(r.default).toBe('main');
+  });
+
+  it('rejects with the server error on non-2xx', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () =>
+      new Response(JSON.stringify({ detail: 'repository not found' }), { status: 404 })
+    ));
+    await expect(fetchBranches('https://github.com/o/nope')).rejects.toThrow(/not found/i);
+  });
+});

From 66a85da2b1fcc9af46348e33c4911427d5aa9f10 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:21:05 -0400
Subject: [PATCH 03/12] feat(api): GET /api/branches endpoint (#77)

Recovered onto the branch after the original commit (f298e939) was orphaned
by a HEAD reset during subagent execution.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 api/app.py                          |  3 +-
 api/models/responses.py             |  5 +++
 api/routers/branches.py             | 35 ++++++++++++++++++
 api/tests/test_server_branches.py   | 36 +++++++++++++++++++
 app/src/types/manifest.generated.ts | 55 +++++++++++++++++++++++++++++
 5 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 api/routers/branches.py
 create mode 100644 api/tests/test_server_branches.py

diff --git a/api/app.py b/api/app.py
index fdb81068..0f19a734 100644
--- a/api/app.py
+++ b/api/app.py
@@ -16,7 +16,7 @@
 
 from api.config import GZIP_MIN_BYTES
 from api.models.responses import ErrorResponse
-from api.routers import commit, file, manifest, meta
+from api.routers import branches, commit, file, manifest, meta
 from api.sse_compression import SSEGZipMiddleware
 from api.static import make_static_router
 
@@ -84,6 +84,7 @@ def create_app(static_dir: Path | None = None) -> FastAPI:
     app.include_router(meta.router)
     app.include_router(file.router)
     app.include_router(commit.router)
+    app.include_router(branches.router)
     app.include_router(manifest.router)
     app.include_router(make_static_router(static_dir or DEFAULT_STATIC_DIR))
     return app
diff --git a/api/models/responses.py b/api/models/responses.py
index 6cd6c0ed..469ab2fc 100644
--- a/api/models/responses.py
+++ b/api/models/responses.py
@@ -41,3 +41,8 @@ class CommitDetailResponse(BaseModel):
     date: str  # YYYY-MM-DD
     subject: str
     body: str
+
+
+class BranchListResponse(BaseModel):
+    branches: list[str]
+    default: str | None
diff --git a/api/routers/branches.py b/api/routers/branches.py
new file mode 100644
index 00000000..37228bdd
--- /dev/null
+++ b/api/routers/branches.py
@@ -0,0 +1,35 @@
+"""GET /api/branches?src=<git-url> — remote branch list for the branch picker.
+
+Remote git URLs only: local sources scan the working tree in place and ignore
+branch, so there is nothing to choose. Uses git ls-remote (no clone) and reuses
+the clone error taxonomy so failures map to clean HTTP statuses."""
+
+from __future__ import annotations
+
+from fastapi import APIRouter, HTTPException, Query
+
+from api.models.responses import BranchListResponse
+from api.services.clone import (
+    CloneError,
+    HostUnreachableError,
+    RepoNotFoundError,
+    list_remote_branches,
+)
+from api.services.source import SourceKind, classify
+
+router = APIRouter(prefix="/api", tags=["branches"])
+
+
+@router.get("/branches", response_model=BranchListResponse)
+def get_branches(src: str = Query(...)) -> BranchListResponse:
+    if classify(src) is not SourceKind.REMOTE:
+        raise HTTPException(400, "branches are only available for remote git URLs")
+    try:
+        branches, default = list_remote_branches(src)
+    except RepoNotFoundError as e:
+        raise HTTPException(404, str(e)) from e
+    except HostUnreachableError as e:
+        raise HTTPException(502, str(e)) from e
+    except CloneError as e:
+        raise HTTPException(400, str(e)) from e
+    return BranchListResponse(branches=branches, default=default)
diff --git a/api/tests/test_server_branches.py b/api/tests/test_server_branches.py
new file mode 100644
index 00000000..a5d92717
--- /dev/null
+++ b/api/tests/test_server_branches.py
@@ -0,0 +1,36 @@
+"""TestClient coverage for GET /api/branches."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+import pytest
+from fastapi.testclient import TestClient
+
+from api.app import create_app
+
+
+@pytest.fixture()
+def client(tmp_path: Path) -> TestClient:
+    static = tmp_path / "static"
+    static.mkdir()
+    (static / "index.html").write_text("x")
+    return TestClient(create_app(static_dir=static))
+
+
+def test_branches_happy_path(client: TestClient, make_fake_remote, tmp_path: Path) -> None:
+    bare, _ = make_fake_remote(tmp_path)
+    r = client.get("/api/branches", params={"src": f"file://{bare}"})
+    assert r.status_code == 200
+    body = r.json()
+    assert "main" in body["branches"]
+    assert body["default"] == "main"
+
+
+def test_branches_rejects_local_path(client: TestClient) -> None:
+    r = client.get("/api/branches", params={"src": "/tmp/some/local/path"})
+    assert r.status_code == 400
+
+
+def test_branches_missing_src(client: TestClient) -> None:
+    assert client.get("/api/branches").status_code == 422  # FastAPI required-query
diff --git a/app/src/types/manifest.generated.ts b/app/src/types/manifest.generated.ts
index f0e119b9..569a0d3b 100644
--- a/app/src/types/manifest.generated.ts
+++ b/app/src/types/manifest.generated.ts
@@ -100,6 +100,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/branches": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get Branches */
+        get: operations["get_branches_api_branches_get"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/manifest/signature": {
         parameters: {
             query?: never;
@@ -162,6 +179,13 @@ export interface components {
             /** Commits */
             commits: number;
         };
+        /** BranchListResponse */
+        BranchListResponse: {
+            /** Branches */
+            branches: string[];
+            /** Default */
+            default: string | null;
+        };
         /** BusynessThresholds */
         BusynessThresholds: {
             /** Avg */
@@ -700,6 +724,37 @@ export interface operations {
             };
         };
     };
+    get_branches_api_branches_get: {
+        parameters: {
+            query: {
+                src: string;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["BranchListResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     signature_api_manifest_signature_get: {
         parameters: {
             query: {

From 50b94ccd856de7d4c86ccee7e5a4184d4ab7786b Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:27:06 -0400
Subject: [PATCH 04/12] refactor(app): SOURCE_PICKER -> PROJECTS_VIEW store
 (#77)

---
 app/src/layout/App/App.tsx                  | 16 +++++------
 app/src/layout/AppHeader/AppHeader.tsx      |  4 +--
 app/src/state/stores/ui.ts                  | 30 ++++++++++-----------
 app/src/views/SourcePicker/SourcePicker.tsx |  8 +++---
 app/tests/state/stores/ui.test.ts           | 14 ++++++++++
 5 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 app/tests/state/stores/ui.test.ts

diff --git a/app/src/layout/App/App.tsx b/app/src/layout/App/App.tsx
index aa8e2279..62d173a6 100644
--- a/app/src/layout/App/App.tsx
+++ b/app/src/layout/App/App.tsx
@@ -10,7 +10,7 @@
 //     <RightSidebar>     — self-subscribes to SCENE_HANDLE + picker
 //   </main>
 //   <AppFooter>          — reads signals directly
-//   <SourcePicker />     — reads SOURCE_PICKER + SERVER_CONFIG directly
+//   <SourcePicker />     — reads PROJECTS_VIEW + SERVER_CONFIG directly
 //   <LoadingOverlay />   — reads LOADING_OVERLAY directly
 //   <ShortcutsModal />   — reads SHORTCUTS_OPEN directly
 //   <DebugModal />       — reads DEBUG_OPEN directly; scene commands passed as props
@@ -38,9 +38,9 @@ import {
   runStemDiagnostic,
 } from '@/state/stores/scene';
 import {
-  openSourcePicker,
-  openSourcePickerForCurrentSource,
-  closeSourcePicker,
+  openProjectsView,
+  openProjectsViewForCurrentSource,
+  closeProjectsView,
 } from '@/state/stores/ui';
 import { SOURCE_ERROR, CURRENT_SOURCE } from '@/state/stores/source';
 import { MANIFEST } from '@/state/stores/manifest';
@@ -66,14 +66,14 @@ export function App() {
 
   // App coordinates the source picker; the fetch hook only reports outcomes.
   const dismissPicker = () => {
-    closeSourcePicker();
+    closeProjectsView();
     SOURCE_ERROR.value = null;
   };
 
   // Cold boot with no ?src → prompt for a source (non-dismissible).
   useEffect(() => {
     if (!new URLSearchParams(window.location.search).has(URL_PARAMS.SRC)) {
-      openSourcePicker({ dismissible: false });
+      openProjectsView({ dismissible: false });
     }
   }, []);
 
@@ -83,7 +83,7 @@ export function App() {
   useSignalEffect(() => {
     const err = SOURCE_ERROR.value;
     if (!err) return;
-    openSourcePicker({
+    openProjectsView({
       dismissible: !isEmptyManifest(MANIFEST.peek()),
       prefill: err.prefill,
       error: err.error,
@@ -94,7 +94,7 @@ export function App() {
     <>
       <AppHeader
         onSegmentClick={selectPath}
-        onSwitchSource={openSourcePickerForCurrentSource}
+        onSwitchSource={openProjectsViewForCurrentSource}
         onResetView={resetView}
         onFocus={focusCurrentSelection}
       />
diff --git a/app/src/layout/AppHeader/AppHeader.tsx b/app/src/layout/AppHeader/AppHeader.tsx
index cef64cd0..e28e5ee4 100644
--- a/app/src/layout/AppHeader/AppHeader.tsx
+++ b/app/src/layout/AppHeader/AppHeader.tsx
@@ -15,7 +15,7 @@ import { SCENE_HANDLE } from '@/state/stores/scene';
 import { MANIFEST } from '@/state/stores/manifest';
 import { ROOT_PATH } from '@/constants/manifest';
 import { SOURCE_INFO } from '@/state/stores/source';
-import { openSourcePicker, openShortcuts, openDebug } from '@/state/stores/ui';
+import { openProjectsView, openShortcuts, openDebug } from '@/state/stores/ui';
 import { isDebugMode } from '@/utils/debugMode';
 import { NodeKind, type Manifest } from '@/types';
 import { ResetViewButton } from '@/components/ResetViewButton';
@@ -86,7 +86,7 @@ export function AppHeader({
         <ProjectSwitcher
           rootLabel={si.label}
           branch={si.branch}
-          onSwitchSource={onSwitchSource ?? (() => openSourcePicker({ dismissible: true }))}
+          onSwitchSource={onSwitchSource ?? (() => openProjectsView({ dismissible: true }))}
         />
         <RepoLink sourceUrl={si.sourceUrl} branch={si.branch} />
       </div>
diff --git a/app/src/state/stores/ui.ts b/app/src/state/stores/ui.ts
index a48716c6..21fab20b 100644
--- a/app/src/state/stores/ui.ts
+++ b/app/src/state/stores/ui.ts
@@ -8,7 +8,7 @@ import { SourceKind } from '@/utils/sources';
 import { URL_PARAMS } from '@/constants/urlParams';
 
 // These are the UI-state CONTRACTS the views render against. They live here (in
-// state) so state/ stays view-independent — the SourcePicker / LoadingOverlay
+// state) so state/ stays view-independent — the ProjectsView / LoadingOverlay
 // components import them from here, not the other way around.
 
 /** What the source picker submits when the user opens a project. */
@@ -34,33 +34,33 @@ export interface LoadingOverlayShowOpts {
   branch?: string;
 }
 
-// ── Source picker ────────────────────────────────────────────────────────────
+// ── Projects view ────────────────────────────────────────────────────────────
 
-export interface SourcePickerState {
+export interface ProjectsViewState {
   visible: boolean;
   opts: OpenOpts;
 }
 
-export const SOURCE_PICKER = signal<SourcePickerState>({
+export const PROJECTS_VIEW = signal<ProjectsViewState>({
   visible: false,
   opts: {},
 });
 
-/** Open the source picker modal. */
-export function openSourcePicker(opts: OpenOpts = {}): void {
-  SOURCE_PICKER.value = { visible: true, opts };
+/** Open the projects view. */
+export function openProjectsView(opts: OpenOpts = {}): void {
+  PROJECTS_VIEW.value = { visible: true, opts };
 }
 
-/** Close the source picker modal. */
-export function closeSourcePicker(): void {
-  SOURCE_PICKER.value = { ...SOURCE_PICKER.value, visible: false };
+/** Close the projects view. */
+export function closeProjectsView(): void {
+  PROJECTS_VIEW.value = { ...PROJECTS_VIEW.value, visible: false };
 }
 
-/** Open the picker pre-filled with the current `?src`/`?branch` — the
+/** Open the view pre-filled with the current `?src`/`?branch` — the
  *  header's "switch source" affordance. Always dismissible. */
-export function openSourcePickerForCurrentSource(): void {
+export function openProjectsViewForCurrentSource(): void {
   const cur = new URLSearchParams(window.location.search);
-  openSourcePicker({
+  openProjectsView({
     dismissible: true,
     prefill: cur.has(URL_PARAMS.SRC)
       ? { src: cur.get(URL_PARAMS.SRC)!, branch: cur.get(URL_PARAMS.BRANCH) ?? undefined }
@@ -151,8 +151,8 @@ export function closeDebug(): void {
   DEBUG_OPEN.value = false;
 }
 
-/** True while any modal (source picker, shortcuts, debug) is open. Scene input
+/** True while any modal (projects view, shortcuts, debug) is open. Scene input
  *  handlers read this so keyboard shortcuts don't fire underneath a modal. */
 export const MODAL_OPEN = computed(
-  () => SOURCE_PICKER.value.visible || SHORTCUTS_OPEN.value || DEBUG_OPEN.value
+  () => PROJECTS_VIEW.value.visible || SHORTCUTS_OPEN.value || DEBUG_OPEN.value
 );
diff --git a/app/src/views/SourcePicker/SourcePicker.tsx b/app/src/views/SourcePicker/SourcePicker.tsx
index 2873d9fa..d4c1ba81 100644
--- a/app/src/views/SourcePicker/SourcePicker.tsx
+++ b/app/src/views/SourcePicker/SourcePicker.tsx
@@ -12,7 +12,7 @@ import { clearManifestCache } from '@/api/manifest';
 import { srcKind, SourceKind } from '@/utils/sources';
 import { URL_PARAMS } from '@/constants/urlParams';
 import { Folder, Trash2, TriangleAlert, X } from 'lucide-preact';
-import { SOURCE_PICKER, type SourcePayload } from '@/state/stores/ui';
+import { PROJECTS_VIEW, type SourcePayload } from '@/state/stores/ui';
 import { SERVER_CONFIG } from '@/state/stores/serverConfig';
 
 // ── Hosting-site SVG icons ───────────────────────────────────────────────────
@@ -317,9 +317,9 @@ export function SourcePickerModal({ state, onSubmit, onClose }: SourcePickerModa
 }
 
 // ── Signal-driven top-level component ──────────────────────────────────────
-// Reads SOURCE_PICKER + SERVER_CONFIG directly for open-state/prefill, but takes
+// Reads PROJECTS_VIEW + SERVER_CONFIG directly for open-state/prefill, but takes
 // onSubmit/onClose via props from App (App owns the stateful submit handler from
-// useManifestSource and the pure closeSourcePicker store action). Returns null
+// useManifestSource and the pure closeProjectsView store action). Returns null
 // when the picker is closed so SourcePickerModal fully unmounts — its
 // useState-backed form inputs reset on the next open.
 
@@ -329,7 +329,7 @@ export interface SourcePickerProps {
 }
 
 export function SourcePicker({ onSubmit, onClose }: SourcePickerProps) {
-  const sp = SOURCE_PICKER.value;
+  const sp = PROJECTS_VIEW.value;
   if (!sp.visible) return null;
 
   const serverCfg = SERVER_CONFIG.value;
diff --git a/app/tests/state/stores/ui.test.ts b/app/tests/state/stores/ui.test.ts
new file mode 100644
index 00000000..62ae0d77
--- /dev/null
+++ b/app/tests/state/stores/ui.test.ts
@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { PROJECTS_VIEW, openProjectsView, closeProjectsView, MODAL_OPEN } from '@/state/stores/ui';
+
+describe('PROJECTS_VIEW', () => {
+  it('opens with opts and closes', () => {
+    openProjectsView({ dismissible: true });
+    expect(PROJECTS_VIEW.value.visible).toBe(true);
+    expect(PROJECTS_VIEW.value.opts.dismissible).toBe(true);
+    expect(MODAL_OPEN.value).toBe(true);
+    closeProjectsView();
+    expect(PROJECTS_VIEW.value.visible).toBe(false);
+    expect(MODAL_OPEN.value).toBe(false);
+  });
+});

From 552db162a15be82cd4dc1aabad9a6a8d555d6f6e Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:34:07 -0400
Subject: [PATCH 05/12] feat(app): abortable loads + cancelLoad (abort is not
 an error) (#77)

streamManifest now accepts an options bag ({ signal, EventSourceImpl })
instead of a positional ctor; useManifestSource threads an
AbortController through loadSource/pumpManifestStream so a new load or
an explicit cancelLoad() aborts the in-flight one. A user-canceled load
is treated as a clean no-op (no SOURCE_ERROR write), since that signal
drives App's picker-reopen reaction. The hook now returns
{ submitSource, cancelLoad }.
---
 app/src/api/manifest.ts                   | 11 ++++-
 app/src/hooks/useManifestSource.ts        | 50 ++++++++++++++++++-----
 app/src/layout/App/App.tsx                |  2 +-
 app/tests/api/manifest.test.ts            | 24 ++++++++---
 app/tests/hooks/useManifestSource.test.ts | 46 +++++++++++++++++++++
 5 files changed, 116 insertions(+), 17 deletions(-)
 create mode 100644 app/tests/hooks/useManifestSource.test.ts

diff --git a/app/src/api/manifest.ts b/app/src/api/manifest.ts
index bdf6fb8b..c3d0b8c6 100644
--- a/app/src/api/manifest.ts
+++ b/app/src/api/manifest.ts
@@ -148,8 +148,9 @@ export type ScanProgressEvent = Extract<
  */
 export function streamManifest(
   url: string,
-  EventSourceImpl: typeof EventSource = EventSource
+  opts: { signal?: AbortSignal; EventSourceImpl?: typeof EventSource } = {}
 ): AsyncIterable<ScanStreamEvent> {
+  const EventSourceImpl = opts.EventSourceImpl ?? EventSource;
   return {
     [Symbol.asyncIterator](): AsyncIterator<ScanStreamEvent> {
       const es = new EventSourceImpl(url);
@@ -188,6 +189,14 @@ export function streamManifest(
         }
       };
 
+      // Abort: close the stream cleanly (done, not error) so the consumer's
+      // for-await exits without a manifest. loadSource treats signal.aborted as
+      // a user cancel, not a failure.
+      if (opts.signal) {
+        if (opts.signal.aborted) finish();
+        else opts.signal.addEventListener('abort', () => finish(), { once: true });
+      }
+
       // Parse an event's JSON data, ending the stream with an error (rather
       // than throwing into the swallowed event listener, which would leave the
       // iterator hanging forever) if the payload is malformed/truncated.
diff --git a/app/src/hooks/useManifestSource.ts b/app/src/hooks/useManifestSource.ts
index f3d5703a..9edbe0f5 100644
--- a/app/src/hooks/useManifestSource.ts
+++ b/app/src/hooks/useManifestSource.ts
@@ -61,11 +61,12 @@ async function pumpManifestStream(
   onManifest: (
     manifest: Manifest,
     phase: ScanPhase.PartialManifest | ScanPhase.CompleteManifest
-  ) => Promise<void> | void
+  ) => Promise<void> | void,
+  signal?: AbortSignal
 ): Promise<Manifest> {
   let lastManifest: Manifest | null = null;
 
-  for await (const event of streamManifest(url)) {
+  for await (const event of streamManifest(url, { signal })) {
     if (event.phase === ScanPhase.Error) throw new Error(event.error);
 
     if ('display_root' in event && event.display_root) {
@@ -111,6 +112,10 @@ async function pumpManifestStream(
 // applyManifest already uses one layer down.
 let loadGeneration = 0;
 
+// The AbortController for the current foreground load, so the UI can cancel a
+// slow clone/scan. A new load or a cancel aborts the previous one.
+let loadController: AbortController | null = null;
+
 // ── Canonical source load (cold-boot + user switch) ──────────────────
 // The one way to load a source: claim the generation → overlay → stream
 // skeleton+final into MANIFEST → on success commit the source (CURRENT_SOURCE +
@@ -119,8 +124,11 @@ let loadGeneration = 0;
 // camera, App coordinates the picker off SOURCE_ERROR. (The live-update poll
 // below is a SEPARATE op — a background refresh of the current source that
 // shares only the MANIFEST sink, and yields to a foreground load via the gen.)
-async function loadSource(payload: SourcePayload): Promise<void> {
+export async function loadSource(payload: SourcePayload): Promise<void> {
   const myGen = ++loadGeneration; // claim authority; supersedes any in-flight load/poll
+  loadController?.abort(); // supersede any in-flight load
+  const controller = new AbortController();
+  loadController = controller;
   const meta = {
     kind: srcKind(payload.src),
     label: labelFromSource(payload.src) ?? payload.src,
@@ -136,9 +144,14 @@ async function loadSource(payload: SourcePayload): Promise<void> {
     });
     // Publish the skeleton as it streams (early structure, behind the overlay);
     // the final is published below, AFTER committing the source.
-    const manifest = await pumpManifestStream(url, meta, (m, phase) => {
-      if (phase === ScanPhase.PartialManifest && myGen === loadGeneration) setManifest(m);
-    });
+    const manifest = await pumpManifestStream(
+      url,
+      meta,
+      (m, phase) => {
+        if (phase === ScanPhase.PartialManifest && myGen === loadGeneration) setManifest(m);
+      },
+      controller.signal
+    );
     if (myGen !== loadGeneration) return; // a newer load superseded this one
     // Commit the source BEFORE publishing the final manifest. The render layer's
     // camera-reframe reaction keys off CURRENT_SOURCE captured at apply-START, so
@@ -148,6 +161,7 @@ async function loadSource(payload: SourcePayload): Promise<void> {
     setManifest(manifest);
   } catch (err) {
     if (myGen !== loadGeneration) return; // superseded — its error isn't current
+    if (controller.signal.aborted) return; // user canceled: not an error, no SOURCE_ERROR
     SOURCE_ERROR.value = {
       error: err instanceof Error ? err.message : String(err),
       prefill: { src: payload.src, branch: payload.branch },
@@ -158,10 +172,20 @@ async function loadSource(payload: SourcePayload): Promise<void> {
     if (myGen === loadGeneration) {
       SCAN_PROGRESS.value = null;
       PENDING_SOURCE_LABEL.value = null;
+      if (loadController === controller) loadController = null;
     }
   }
 }
 
+/**
+ * Abort the in-flight foreground load, if any. Exposed to the UI (a cancel
+ * button on the loading overlay) via the hook's return; the abort is treated
+ * as a clean user cancel, not a failure — see the `catch` branch above.
+ */
+export function cancelLoad(): void {
+  loadController?.abort();
+}
+
 // ── Live-update poll loop ────────────────────────────────────────────
 
 // Hard bounds for the user-set poll interval. 1s floor — the server does a real
@@ -275,10 +299,16 @@ function setupLiveUpdates(): () => void {
  * Scene-free — the render layer (the City component) consumes MANIFEST and paints the
  * scene. UI-free too: it never opens/closes the source picker; on a load failure
  * (boot or submit) it WRITES the canonical SOURCE_ERROR signal and App reacts to
- * coordinate the picker. RETURNS the source-picker submit handler so App can pass
- * it down to <SourcePicker> as a prop (no global register/invoke channel).
+ * coordinate the picker. A user-initiated cancel (`cancelLoad`) aborts the
+ * in-flight stream but is NOT surfaced as a load failure — no SOURCE_ERROR write.
+ * RETURNS the source-picker submit handler and a cancel handler so App can pass
+ * them down to <SourcePicker>/the loading overlay as props (no global
+ * register/invoke channel).
  */
-export function useManifestSource(): (payload: SourcePayload) => void {
+export function useManifestSource(): {
+  submitSource: (payload: SourcePayload) => void;
+  cancelLoad: () => void;
+} {
   const submitSource = useCallback((payload: SourcePayload) => {
     void loadSource(payload);
   }, []);
@@ -311,5 +341,5 @@ export function useManifestSource(): (payload: SourcePayload) => void {
     };
   }, []);
 
-  return submitSource;
+  return { submitSource, cancelLoad };
 }
diff --git a/app/src/layout/App/App.tsx b/app/src/layout/App/App.tsx
index 62d173a6..f3384801 100644
--- a/app/src/layout/App/App.tsx
+++ b/app/src/layout/App/App.tsx
@@ -52,7 +52,7 @@ import { attachLoadingReactions } from '@/state/loadingReactions';
 
 export function App() {
   useDocumentTitle();
-  const submitSource = useManifestSource();
+  const { submitSource } = useManifestSource();
 
   useEffect(() => attachLoadingReactions(), []);
 
diff --git a/app/tests/api/manifest.test.ts b/app/tests/api/manifest.test.ts
index 69b54854..b5db715e 100644
--- a/app/tests/api/manifest.test.ts
+++ b/app/tests/api/manifest.test.ts
@@ -38,7 +38,7 @@ const fakeManifest = { root: '/r', tree: { type: 'directory' } };
 describe('streamManifest (EventSource)', () => {
   it('maps named SSE events to ScanStreamEvents in order and stops after manifest-complete', async () => {
     const { ctor, last } = makeES();
-    const it = streamManifest('/api/manifest?src=x', ctor)[Symbol.asyncIterator]();
+    const it = streamManifest('/api/manifest?src=x', { EventSourceImpl: ctor })[Symbol.asyncIterator]();
     const es = last();
     es.emit('scan-progress', JSON.stringify({ display_root: 'x', files_scanned: 3 }));
     es.emit('manifest-partial', JSON.stringify({ manifest: fakeManifest }));
@@ -57,7 +57,7 @@ describe('streamManifest (EventSource)', () => {
 
   it('maps a clone-progress event with display_root', async () => {
     const { ctor, last } = makeES();
-    const it = streamManifest('/api/manifest', ctor)[Symbol.asyncIterator]();
+    const it = streamManifest('/api/manifest', { EventSourceImpl: ctor })[Symbol.asyncIterator]();
     last().emit('clone-progress', JSON.stringify({ display_root: 'https://example.com/foo.git' }));
     const a = await it.next();
     const ev = a.value as ScanStreamEvent;
@@ -70,7 +70,7 @@ describe('streamManifest (EventSource)', () => {
 
   it('emits a terminal Error event for a server-sent error', async () => {
     const { ctor, last } = makeES();
-    const it = streamManifest('/api/manifest', ctor)[Symbol.asyncIterator]();
+    const it = streamManifest('/api/manifest', { EventSourceImpl: ctor })[Symbol.asyncIterator]();
     last().emit('error', JSON.stringify({ error: 'boom' }));
     const a = await it.next();
     expect(a.value).toEqual({ phase: ScanPhase.Error, error: 'boom' });
@@ -80,15 +80,29 @@ describe('streamManifest (EventSource)', () => {
 
   it('rejects on a transport-level error (bare error event, no data)', async () => {
     const { ctor, last } = makeES();
-    const it = streamManifest('/api/manifest', ctor)[Symbol.asyncIterator]();
+    const it = streamManifest('/api/manifest', { EventSourceImpl: ctor })[Symbol.asyncIterator]();
     last().emit('error'); // no data → connection failure
     await expect(it.next()).rejects.toThrow(/connection failed/i);
   });
 
   it('rejects on a malformed event payload instead of hanging forever', async () => {
     const { ctor, last } = makeES();
-    const it = streamManifest('/api/manifest', ctor)[Symbol.asyncIterator]();
+    const it = streamManifest('/api/manifest', { EventSourceImpl: ctor })[Symbol.asyncIterator]();
     last().emit('manifest-partial', '{not valid json'); // truncated/garbage frame
     await expect(it.next()).rejects.toThrow(/malformed/i);
   });
+
+  it('ends iteration when the signal aborts (no more events delivered)', async () => {
+    const { ctor, last } = makeES();
+    const ac = new AbortController();
+    const it = streamManifest('/api/manifest', {
+      signal: ac.signal,
+      EventSourceImpl: ctor,
+    })[Symbol.asyncIterator]();
+    const next = it.next(); // pending — no events yet
+    ac.abort();
+    const r = await next;
+    expect(r.done).toBe(true);
+    expect(last().closed).toBe(true); // EventSource was closed on abort
+  });
 });
diff --git a/app/tests/hooks/useManifestSource.test.ts b/app/tests/hooks/useManifestSource.test.ts
new file mode 100644
index 00000000..6ab0e4b1
--- /dev/null
+++ b/app/tests/hooks/useManifestSource.test.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { loadSource, cancelLoad } from '@/hooks/useManifestSource';
+import { SOURCE_ERROR, CURRENT_SOURCE } from '@/state/stores/source';
+
+// Minimal EventSource stub that never emits — the load stays pending until
+// canceled, so this test exercises exactly the abort path (no manifest ever
+// arrives) rather than racing a real network response.
+class StubEventSource {
+  static instances: StubEventSource[] = [];
+  closed = false;
+  constructor(public url: string) {
+    StubEventSource.instances.push(this);
+  }
+  addEventListener(): void {}
+  close(): void {
+    this.closed = true;
+  }
+}
+
+describe('useManifestSource loadSource cancellation', () => {
+  let originalEventSource: typeof EventSource;
+
+  beforeEach(() => {
+    originalEventSource = globalThis.EventSource;
+    StubEventSource.instances = [];
+    (globalThis as unknown as { EventSource: unknown }).EventSource = StubEventSource;
+    SOURCE_ERROR.value = null;
+  });
+
+  afterEach(() => {
+    (globalThis as unknown as { EventSource: unknown }).EventSource = originalEventSource;
+  });
+
+  it('canceling a load leaves SOURCE_ERROR null and CURRENT_SOURCE unchanged', async () => {
+    const before = CURRENT_SOURCE.value;
+
+    const p = loadSource({ src: 'https://github.com/o/r' }); // starts the load
+    cancelLoad(); // aborts via loadController before any event arrives
+
+    await p;
+
+    expect(SOURCE_ERROR.value).toBeNull();
+    expect(CURRENT_SOURCE.value).toBe(before);
+    expect(StubEventSource.instances[0]?.closed).toBe(true);
+  });
+});

From 200ed910d5e6736e962e302cce3dbae2ec9fb62d Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:44:35 -0400
Subject: [PATCH 06/12] fix(app): don't commit a skeleton manifest on
 cancel-after-skeleton (#77)

streamManifest ends an aborted stream as done (not a throw), so a cancel
landing after the skeleton but before the final made pumpManifestStream
return the partial manifest and loadSource's success path committed it as
CURRENT_SOURCE. Guard the commit with the abort signal, mirroring the
catch-branch guard, so a user cancel never mutates CURRENT_SOURCE. Adds a
cancel-after-skeleton regression test plus an already-aborted-at-iterator
test that locks in the abort-wiring placement.
---
 app/src/hooks/useManifestSource.ts        |  6 +++-
 app/tests/api/manifest.test.ts            | 16 ++++++++++
 app/tests/hooks/useManifestSource.test.ts | 39 ++++++++++++++++++++---
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/app/src/hooks/useManifestSource.ts b/app/src/hooks/useManifestSource.ts
index 9edbe0f5..018d13d1 100644
--- a/app/src/hooks/useManifestSource.ts
+++ b/app/src/hooks/useManifestSource.ts
@@ -152,7 +152,11 @@ export async function loadSource(payload: SourcePayload): Promise<void> {
       },
       controller.signal
     );
-    if (myGen !== loadGeneration) return; // a newer load superseded this one
+    // A newer load superseded this one, OR the user canceled after a skeleton
+    // arrived: streamManifest ends an aborted stream as done (not a throw), so
+    // pumpManifestStream RETURNS the partial manifest here. Guard the commit so
+    // a canceled load never writes CURRENT_SOURCE (mirrors the catch guard).
+    if (myGen !== loadGeneration || controller.signal.aborted) return;
     // Commit the source BEFORE publishing the final manifest. The render layer's
     // camera-reframe reaction keys off CURRENT_SOURCE captured at apply-START, so
     // the new key must be live for the FINAL apply (the one to frame on) and NOT
diff --git a/app/tests/api/manifest.test.ts b/app/tests/api/manifest.test.ts
index b5db715e..a539b4e6 100644
--- a/app/tests/api/manifest.test.ts
+++ b/app/tests/api/manifest.test.ts
@@ -105,4 +105,20 @@ describe('streamManifest (EventSource)', () => {
     expect(r.done).toBe(true);
     expect(last().closed).toBe(true); // EventSource was closed on abort
   });
+
+  it('ends immediately when the signal is already aborted before iteration', async () => {
+    const { ctor, last } = makeES();
+    const ac = new AbortController();
+    ac.abort(); // aborted BEFORE the iterator is created
+    const it = streamManifest('/api/manifest', {
+      signal: ac.signal,
+      EventSourceImpl: ctor,
+    })[Symbol.asyncIterator]();
+    // The abort-wiring block runs after finish() is declared, so an
+    // already-aborted signal closes the stream at iterator-creation time
+    // without a TDZ ReferenceError.
+    expect(last().closed).toBe(true);
+    const r = await it.next();
+    expect(r.done).toBe(true);
+  });
 });
diff --git a/app/tests/hooks/useManifestSource.test.ts b/app/tests/hooks/useManifestSource.test.ts
index 6ab0e4b1..1d874040 100644
--- a/app/tests/hooks/useManifestSource.test.ts
+++ b/app/tests/hooks/useManifestSource.test.ts
@@ -2,21 +2,29 @@ import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { loadSource, cancelLoad } from '@/hooks/useManifestSource';
 import { SOURCE_ERROR, CURRENT_SOURCE } from '@/state/stores/source';
 
-// Minimal EventSource stub that never emits — the load stays pending until
-// canceled, so this test exercises exactly the abort path (no manifest ever
-// arrives) rather than racing a real network response.
+// EventSource stub with driveable events: records listeners so a test can emit
+// a named SSE event (e.g. a `manifest-partial` skeleton), and records
+// instances so a test can assert the stream was closed on abort.
 class StubEventSource {
   static instances: StubEventSource[] = [];
   closed = false;
+  private listeners: Record<string, ((e: unknown) => void)[]> = {};
   constructor(public url: string) {
     StubEventSource.instances.push(this);
   }
-  addEventListener(): void {}
+  addEventListener(name: string, handler: (e: unknown) => void): void {
+    (this.listeners[name] ??= []).push(handler);
+  }
   close(): void {
     this.closed = true;
   }
+  emit(name: string, data: string): void {
+    for (const h of this.listeners[name] ?? []) h({ data });
+  }
 }
 
+const flush = (): Promise<void> => new Promise((r) => setTimeout(r, 0));
+
 describe('useManifestSource loadSource cancellation', () => {
   let originalEventSource: typeof EventSource;
 
@@ -43,4 +51,27 @@ describe('useManifestSource loadSource cancellation', () => {
     expect(CURRENT_SOURCE.value).toBe(before);
     expect(StubEventSource.instances[0]?.closed).toBe(true);
   });
+
+  it('canceling AFTER a skeleton manifest does not commit it as CURRENT_SOURCE', async () => {
+    const before = CURRENT_SOURCE.value;
+
+    const p = loadSource({ src: 'https://github.com/o/r' });
+    await flush(); // let the for-await attach its event listeners
+
+    // Skeleton arrives, then the user cancels before the final manifest. An
+    // aborted stream ends done (not a throw), so pumpManifestStream RETURNS the
+    // skeleton — the success path must still refuse to commit it.
+    StubEventSource.instances[0]!.emit(
+      'manifest-partial',
+      JSON.stringify({ manifest: { root: '/r', tree: { type: 'directory' }, signature: 'sig' } })
+    );
+    await flush();
+    cancelLoad();
+
+    await p;
+
+    expect(CURRENT_SOURCE.value).toBe(before); // NOT committed
+    expect(SOURCE_ERROR.value).toBeNull(); // cancel is not an error
+    expect(StubEventSource.instances[0]?.closed).toBe(true);
+  });
 });

From 483dbf6c9d54ff4e9ef7e1948bc2288b5395a73b Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 17:51:25 -0400
Subject: [PATCH 07/12] feat(app): ProjectsView shell + recents-forward list
 (#77)

---
 app/src/views/ProjectsView/NewProjectForm.tsx |  17 +++
 app/src/views/ProjectsView/ProjectsView.css   |  39 +++++
 app/src/views/ProjectsView/ProjectsView.tsx   |  61 ++++++++
 app/src/views/ProjectsView/RecentRow.tsx      |  89 +++++++++++
 app/src/views/ProjectsView/RecentsList.css    | 141 ++++++++++++++++++
 app/src/views/ProjectsView/RecentsList.tsx    |  92 ++++++++++++
 .../views/ProjectsView/RecentsList.test.tsx   | 101 +++++++++++++
 7 files changed, 540 insertions(+)
 create mode 100644 app/src/views/ProjectsView/NewProjectForm.tsx
 create mode 100644 app/src/views/ProjectsView/ProjectsView.css
 create mode 100644 app/src/views/ProjectsView/ProjectsView.tsx
 create mode 100644 app/src/views/ProjectsView/RecentRow.tsx
 create mode 100644 app/src/views/ProjectsView/RecentsList.css
 create mode 100644 app/src/views/ProjectsView/RecentsList.tsx
 create mode 100644 app/tests/views/ProjectsView/RecentsList.test.tsx

diff --git a/app/src/views/ProjectsView/NewProjectForm.tsx b/app/src/views/ProjectsView/NewProjectForm.tsx
new file mode 100644
index 00000000..1e89e369
--- /dev/null
+++ b/app/src/views/ProjectsView/NewProjectForm.tsx
@@ -0,0 +1,17 @@
+// views/ProjectsView/NewProjectForm.tsx — stub; real form (Git URL / local path
+// tabs, branch select, skip-cache) arrives in Task 8. Props are typed to match
+// what ProjectsView already passes so the shell compiles against the real
+// contract, not a loosened placeholder.
+
+import type { SourcePayload } from '@/state/stores/ui';
+
+export interface NewProjectFormProps {
+  allowLocalRepos: boolean;
+  prefill?: SourcePayload;
+  onSubmit: (payload: SourcePayload) => void;
+  onCancel: () => void;
+}
+
+export function NewProjectForm(_props: NewProjectFormProps) {
+  return null;
+}
diff --git a/app/src/views/ProjectsView/ProjectsView.css b/app/src/views/ProjectsView/ProjectsView.css
new file mode 100644
index 00000000..cb3cb725
--- /dev/null
+++ b/app/src/views/ProjectsView/ProjectsView.css
@@ -0,0 +1,39 @@
+/* ── Projects view ──────────────────────────────────────────────────────────
+   Full-viewport surface (replaces the old .modal-backdrop overlay): opaque,
+   fixed, above the app shell, flex-centered panel. Panel surface (bg + radius
+   + shadow + color) comes from .card-overlay; this file adds size + layout. */
+
+.projects-view {
+  position: fixed;
+  inset: 0;
+  background: var(--cc-bg-app);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.projects-view-panel {
+  width: 640px;
+  max-width: 92vw;
+  max-height: 86vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: inherit;
+}
+
+.projects-view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cc-space-5) var(--cc-space-6);
+  border-bottom: 1px solid var(--cc-border-subtle);
+  font-weight: var(--cc-fw-semibold);
+}
+
+.projects-view-body {
+  padding: var(--cc-space-5) var(--cc-space-6);
+  overflow-y: auto;
+  flex: 1;
+}
diff --git a/app/src/views/ProjectsView/ProjectsView.tsx b/app/src/views/ProjectsView/ProjectsView.tsx
new file mode 100644
index 00000000..b8ca2c19
--- /dev/null
+++ b/app/src/views/ProjectsView/ProjectsView.tsx
@@ -0,0 +1,61 @@
+// views/ProjectsView/ProjectsView.tsx — full-viewport project switcher. Reads
+// PROJECTS_VIEW + SERVER_CONFIG for open-state/prefill; App owns
+// onSubmit/onCancel/onClose. Renders null when closed so the form/list state
+// resets on next open. Replaces the old modal SourcePicker.
+
+import './ProjectsView.css';
+import { useEffect } from 'preact/hooks';
+import { X } from 'lucide-preact';
+import { PROJECTS_VIEW, type SourcePayload } from '@/state/stores/ui';
+import { SERVER_CONFIG } from '@/state/stores/serverConfig';
+import { SCAN_PROGRESS } from '@/state/stores/scanProgress';
+import { NewProjectForm } from './NewProjectForm';
+import { RecentsList } from './RecentsList';
+
+export interface ProjectsViewProps {
+  onSubmit: (payload: SourcePayload) => void;
+  onCancel: () => void;
+  onClose: () => void;
+}
+
+export function ProjectsView({ onSubmit, onCancel, onClose }: ProjectsViewProps) {
+  const pv = PROJECTS_VIEW.value;
+  const loading = SCAN_PROGRESS.value !== null;
+
+  // Escape closes the view when dismissible and not mid-load.
+  useEffect(() => {
+    if (!pv.visible || !pv.opts.dismissible) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !loading) onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [pv.visible, pv.opts.dismissible, loading, onClose]);
+
+  if (!pv.visible) return null;
+
+  return (
+    <div class="projects-view" role="dialog" aria-modal="true" aria-label="Open project">
+      <div class="projects-view-panel card-overlay">
+        <div class="projects-view-header surface-chrome">
+          <span>Open project</span>
+          {pv.opts.dismissible && !loading && (
+            <button class="btn-icon btn-icon--lg" aria-label="Close" onClick={onClose}>
+              <X class="lucide-icon" />
+            </button>
+          )}
+        </div>
+        <div class="projects-view-body">
+          {pv.opts.error && <div class="card-error">{pv.opts.error}</div>}
+          <NewProjectForm
+            allowLocalRepos={SERVER_CONFIG.value.allowLocalRepos}
+            prefill={pv.opts.prefill}
+            onSubmit={onSubmit}
+            onCancel={onCancel}
+          />
+          <RecentsList onOpen={onSubmit} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/views/ProjectsView/RecentRow.tsx b/app/src/views/ProjectsView/RecentRow.tsx
new file mode 100644
index 00000000..d18cfb4e
--- /dev/null
+++ b/app/src/views/ProjectsView/RecentRow.tsx
@@ -0,0 +1,89 @@
+// views/ProjectsView/RecentRow.tsx — one recent-source row: kind glyph, label,
+// sub (src + branch pill + "(default)" tag), active badge, inline-confirm
+// remove.
+
+import { Folder, Trash2, TriangleAlert } from 'lucide-preact';
+import { HostingIcon } from '@/components/HostingIcon';
+import { srcKind, SourceKind } from '@/utils/sources';
+import type { RecentSource } from '@/state/stores/source';
+
+export interface RecentRowProps {
+  recent: RecentSource;
+  active: boolean;
+  disabled: boolean; // local row while local repos are off
+  highlighted: boolean; // keyboard cursor
+  confirmingRemove: boolean;
+  onOpen: () => void;
+  onAskRemove: () => void;
+  onConfirmRemove: () => void;
+  onCancelRemove: () => void;
+}
+
+export function RecentRow(props: RecentRowProps) {
+  const { recent: r, active, disabled, highlighted, confirmingRemove } = props;
+  const isLocal = srcKind(r.src) === SourceKind.Local;
+  const rowClass = [
+    'row recent-row',
+    active && 'recent-row--active',
+    disabled && 'recent-row--disabled',
+    highlighted && 'recent-row--highlighted',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div class="recent-item">
+      <button
+        type="button"
+        class={rowClass}
+        disabled={active || disabled}
+        title={
+          disabled
+            ? 'Local repos are disabled. Restart codecity with CODECITY_ALLOW_LOCAL_REPOS=1 to load this.'
+            : undefined
+        }
+        onClick={props.onOpen}
+      >
+        <span class="recent-icon">
+          {disabled ? (
+            <TriangleAlert class="lucide-icon" />
+          ) : isLocal ? (
+            <Folder class="lucide-icon" />
+          ) : (
+            <HostingIcon src={r.src} />
+          )}
+        </span>
+        <div class="recent-row-body">
+          <div class="recent-label">{r.label}</div>
+          <div class="recent-sub">
+            <span class="recent-src">{r.src}</span>
+            {r.branch && <span class="app-header-branch-pill">@{r.branch}</span>}
+            {r.branchIsDefault && <span class="recent-default-tag">(default)</span>}
+          </div>
+        </div>
+        {active && <span class="recent-row-badge">Active</span>}
+      </button>
+
+      {confirmingRemove ? (
+        <span class="recent-remove-confirm">
+          <span class="text-label">Remove?</span>
+          <button type="button" class="btn-icon btn-icon--text" onClick={props.onCancelRemove}>
+            Cancel
+          </button>
+          <button type="button" class="btn-icon btn-icon--text" onClick={props.onConfirmRemove}>
+            Remove
+          </button>
+        </span>
+      ) : (
+        <button
+          type="button"
+          class="btn-icon btn-icon--text"
+          aria-label="Remove from recents"
+          onClick={props.onAskRemove}
+        >
+          <Trash2 class="lucide-icon" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/src/views/ProjectsView/RecentsList.css b/app/src/views/ProjectsView/RecentsList.css
new file mode 100644
index 00000000..aadd8087
--- /dev/null
+++ b/app/src/views/ProjectsView/RecentsList.css
@@ -0,0 +1,141 @@
+/* ── Recents hero ────────────────────────────────────────────────────────
+   Filter box + keyboard-navigable list. Rules ported from the old
+   SourcePicker's .recents-list block; renamed to the new recents-forward
+   structure (filter input, .recent-row--highlighted keyboard cursor,
+   inline remove-confirm). */
+
+.recents {
+  margin-top: var(--cc-space-7);
+  border-top: 1px solid var(--cc-border-subtle);
+  padding-top: var(--cc-space-5);
+}
+
+.recents-filter {
+  width: 100%;
+  background-color: var(--cc-bg-chrome);
+  border: 1px solid var(--cc-border-input);
+  border-radius: var(--cc-radius-sm);
+  color: var(--cc-text-primary);
+  font: inherit;
+  font-size: var(--cc-font-lg);
+  padding: var(--cc-space-2) var(--cc-space-4);
+  outline: none;
+  margin-bottom: var(--cc-space-4);
+}
+.recents-filter::placeholder {
+  color: var(--cc-text-faint);
+}
+.recents-filter:focus {
+  border-color: var(--cc-accent-border);
+}
+
+.recents-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cc-space-1);
+}
+
+/* Each recent project is a .recent-item row: a .recent-row click target that
+   opens the project, plus a sibling remove control. Kept as siblings (not
+   parent/child) so the row's hover highlight has symmetric padding and the
+   remove control has its own independent hit area. */
+.recent-item {
+  display: flex;
+  align-items: center;
+  gap: var(--cc-space-2);
+}
+
+.recent-row {
+  flex: 1 1 auto;
+  min-width: 0;
+  appearance: none;
+  background: none;
+  border: none;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  gap: var(--cc-space-5);
+  padding: var(--cc-space-3) var(--cc-space-4);
+  border-radius: var(--cc-radius-md);
+}
+.recent-row:hover {
+  background: var(--cc-overlay-bg);
+}
+.recent-row-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.recent-row .recent-label {
+  font-weight: var(--cc-fw-medium);
+}
+.recent-row .recent-sub {
+  display: flex;
+  align-items: center;
+  gap: var(--cc-space-2);
+  font-size: var(--cc-font-md);
+  color: var(--cc-text-muted);
+}
+.recent-row .recent-src {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.recent-default-tag {
+  flex: 0 0 auto;
+  color: var(--cc-text-faint);
+}
+
+.recent-row--active {
+  background: var(--cc-accent-bg-soft);
+  cursor: default;
+}
+.recent-row--active:hover {
+  background: var(--cc-accent-bg);
+}
+
+.recent-row--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.recent-row--disabled:hover {
+  background: transparent;
+}
+
+/* Keyboard cursor — accent inset ring, distinct from hover/active fills so
+   arrow-key navigation stays visible even over an active/disabled row. */
+.recent-row--highlighted {
+  box-shadow: inset 0 0 0 1px var(--cc-accent-border);
+}
+
+.recent-row-badge {
+  margin-left: auto;
+  font-size: var(--cc-font-sm);
+  font-weight: var(--cc-fw-semibold);
+  letter-spacing: var(--cc-track-label);
+  color: var(--cc-accent);
+  background: var(--cc-accent-bg);
+  border: 1px solid var(--cc-accent-border);
+  border-radius: var(--cc-radius-lg);
+  padding: var(--cc-space-1) var(--cc-space-3);
+  white-space: nowrap;
+}
+
+/* Destructive trash button next to each recent. */
+.recent-item > .btn-icon[aria-label='Remove from recents'] {
+  padding: var(--cc-space-4) var(--cc-space-2);
+  color: var(--cc-error);
+}
+.recent-item > .btn-icon[aria-label='Remove from recents']:hover {
+  color: var(--cc-error-light);
+  background: var(--cc-error-bg);
+}
+
+/* Inline "Remove? [Cancel] [Remove]" confirm — swaps in for the trash button
+   so removing is a two-step, low-risk action rather than a native confirm(). */
+.recent-remove-confirm {
+  display: flex;
+  align-items: center;
+  gap: var(--cc-space-2);
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
diff --git a/app/src/views/ProjectsView/RecentsList.tsx b/app/src/views/ProjectsView/RecentsList.tsx
new file mode 100644
index 00000000..31a4319b
--- /dev/null
+++ b/app/src/views/ProjectsView/RecentsList.tsx
@@ -0,0 +1,92 @@
+// views/ProjectsView/RecentsList.tsx — the recents hero: filter box + keyboard-
+// navigable list. Active state derives from CURRENT_SOURCE (single source of
+// truth, not the URL). Remove is non-destructive: it forgets the entry only,
+// it does not clear the scan cache (that's the skip-cache control's job).
+
+import './RecentsList.css';
+import { useMemo, useState } from 'preact/hooks';
+import { listRecents, removeRecent, CURRENT_SOURCE } from '@/state/stores/source';
+import { SERVER_CONFIG } from '@/state/stores/serverConfig';
+import { srcKind, SourceKind } from '@/utils/sources';
+import type { SourcePayload } from '@/state/stores/ui';
+import { RecentRow } from './RecentRow';
+
+export interface RecentsListProps {
+  onOpen: (payload: SourcePayload) => void;
+}
+
+export function RecentsList({ onOpen }: RecentsListProps) {
+  const recents = listRecents(); // reads RECENTS signal
+  const cur = CURRENT_SOURCE.value;
+  const allowLocal = SERVER_CONFIG.value.allowLocalRepos;
+  const [filter, setFilter] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const [confirming, setConfirming] = useState<string | null>(null); // key of row
+
+  const q = filter.trim().toLowerCase();
+  const shown = useMemo(
+    () =>
+      recents.filter(
+        (r) => !q || r.label.toLowerCase().includes(q) || r.src.toLowerCase().includes(q)
+      ),
+    [recents, q]
+  );
+
+  const keyOf = (r: { src: string; branch?: string }) => `${r.src}:${r.branch ?? ''}`;
+  const isActive = (r: { src: string; branch?: string }) =>
+    !!cur && r.src === cur.src && (r.branch ?? '') === (cur.branch ?? '');
+  const isDisabled = (r: { src: string }) => srcKind(r.src) === SourceKind.Local && !allowLocal;
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setCursor((c) => Math.min(c + 1, shown.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setCursor((c) => Math.max(c - 1, 0));
+    } else if (e.key === 'Enter') {
+      const r = shown[cursor];
+      if (r && !isActive(r) && !isDisabled(r)) onOpen({ src: r.src, branch: r.branch });
+    }
+  };
+
+  if (recents.length === 0) return null;
+
+  return (
+    <div class="recents" onKeyDown={onKeyDown}>
+      <input
+        class="recents-filter"
+        type="text"
+        placeholder="Filter recent projects"
+        value={filter}
+        onInput={(e) => {
+          setFilter((e.target as HTMLInputElement).value);
+          setCursor(0);
+        }}
+        autoComplete="off"
+        spellcheck={false}
+      />
+      <div class="recents-list" role="listbox">
+        {shown.map((r, i) => (
+          <RecentRow
+            key={keyOf(r)}
+            recent={r}
+            active={isActive(r)}
+            disabled={isDisabled(r)}
+            highlighted={i === cursor}
+            confirmingRemove={confirming === keyOf(r)}
+            onOpen={() => {
+              if (!isActive(r) && !isDisabled(r)) onOpen({ src: r.src, branch: r.branch });
+            }}
+            onAskRemove={() => setConfirming(keyOf(r))}
+            onCancelRemove={() => setConfirming(null)}
+            onConfirmRemove={() => {
+              removeRecent(r.src, r.branch);
+              setConfirming(null);
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/tests/views/ProjectsView/RecentsList.test.tsx b/app/tests/views/ProjectsView/RecentsList.test.tsx
new file mode 100644
index 00000000..8c250577
--- /dev/null
+++ b/app/tests/views/ProjectsView/RecentsList.test.tsx
@@ -0,0 +1,101 @@
+// Native-harness tests for RecentsList — mirrors app/tests/layout/leftSidebar.test.tsx's
+// render/flush/container pattern (this repo has no @testing-library/preact dependency).
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'preact';
+import { RECENTS, CURRENT_SOURCE } from '@/state/stores/source';
+import { SERVER_CONFIG } from '@/state/stores/serverConfig';
+import { RecentsList } from '@/views/ProjectsView/RecentsList';
+import * as manifestApi from '@/api/manifest';
+import { flush } from '../../_helpers/preact';
+
+describe('RecentsList', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    RECENTS.value = [
+      { src: 'https://github.com/o/alpha', branch: 'main', branchIsDefault: true, label: 'o/alpha', lastOpenedAt: 2 },
+      { src: 'https://github.com/o/beta', branch: 'dev', label: 'o/beta', lastOpenedAt: 1 },
+    ];
+    CURRENT_SOURCE.value = { src: 'https://github.com/o/alpha', branch: 'main' };
+  });
+
+  afterEach(() => {
+    render(null, container);
+    document.body.removeChild(container);
+    RECENTS.value = [];
+    CURRENT_SOURCE.value = null;
+    SERVER_CONFIG.value = { allowLocalRepos: false };
+  });
+
+  it('marks the CURRENT_SOURCE row active and tags default branches', async () => {
+    render(<RecentsList onOpen={() => {}} />, container);
+    await flush();
+
+    const activeRow = container.querySelector('.recent-row--active');
+    expect(activeRow).toBeTruthy();
+    expect(activeRow?.textContent).toContain('o/alpha');
+    expect(container.textContent).toContain('(default)');
+  });
+
+  it('filters by label/src as you type', async () => {
+    render(<RecentsList onOpen={() => {}} />, container);
+    await flush();
+
+    const filterInput = container.querySelector<HTMLInputElement>('.recents-filter')!;
+    filterInput.value = 'beta';
+    filterInput.dispatchEvent(new Event('input', { bubbles: true }));
+    await flush();
+
+    const labels = Array.from(container.querySelectorAll('.recent-label')).map((el) => el.textContent);
+    expect(labels).not.toContain('o/alpha');
+    expect(labels).toContain('o/beta');
+  });
+
+  it('remove is non-destructive: forgets the entry, does not touch the cache', async () => {
+    const spy = vi.spyOn(manifestApi, 'clearManifestCache');
+    render(<RecentsList onOpen={() => {}} />, container);
+    await flush();
+
+    const removeButtons = container.querySelectorAll<HTMLButtonElement>(
+      '[aria-label="Remove from recents"]'
+    );
+    removeButtons[0].click(); // alpha row -> ask
+    await flush();
+
+    const confirmButtons = Array.from(container.querySelectorAll('button')).filter(
+      (b) => b.textContent === 'Remove'
+    );
+    expect(confirmButtons.length).toBeGreaterThan(0);
+    (confirmButtons[0] as HTMLButtonElement).click();
+    await flush();
+
+    expect(RECENTS.value.find((r) => r.label === 'o/alpha')).toBeUndefined();
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('supports keyboard navigation: arrow keys move the highlight, Enter opens it', async () => {
+    const onOpen = vi.fn();
+    render(<RecentsList onOpen={onOpen} />, container);
+    await flush();
+
+    const list = container.querySelector<HTMLDivElement>('.recents')!;
+    // Cursor starts at 0 (alpha, which is active/disabled-for-open); move down to beta.
+    list.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    await flush();
+
+    const highlighted = container.querySelector('.recent-row--highlighted');
+    expect(highlighted?.textContent).toContain('o/beta');
+
+    list.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    await flush();
+
+    expect(onOpen).toHaveBeenCalledWith({ src: 'https://github.com/o/beta', branch: 'dev' });
+
+    list.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    await flush();
+    expect(container.querySelector('.recent-row--highlighted')?.textContent).toContain('o/alpha');
+  });
+});

From 1c258d3b6667fc8b2e4ac53c66529059998b4d27 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 18:07:09 -0400
Subject: [PATCH 08/12] feat(app): new-project form + repo-resolved branch
 dropdown (#77)

---
 app/src/views/ProjectsView/BranchSelect.css   |  18 ++
 app/src/views/ProjectsView/BranchSelect.tsx   |  87 +++++++++
 app/src/views/ProjectsView/NewProjectForm.css |  61 +++++++
 app/src/views/ProjectsView/NewProjectForm.tsx | 165 ++++++++++++++++-
 .../views/ProjectsView/BranchSelect.test.tsx  |  98 ++++++++++
 .../ProjectsView/NewProjectForm.test.tsx      | 172 ++++++++++++++++++
 6 files changed, 595 insertions(+), 6 deletions(-)
 create mode 100644 app/src/views/ProjectsView/BranchSelect.css
 create mode 100644 app/src/views/ProjectsView/BranchSelect.tsx
 create mode 100644 app/src/views/ProjectsView/NewProjectForm.css
 create mode 100644 app/tests/views/ProjectsView/BranchSelect.test.tsx
 create mode 100644 app/tests/views/ProjectsView/NewProjectForm.test.tsx

diff --git a/app/src/views/ProjectsView/BranchSelect.css b/app/src/views/ProjectsView/BranchSelect.css
new file mode 100644
index 00000000..4769012e
--- /dev/null
+++ b/app/src/views/ProjectsView/BranchSelect.css
@@ -0,0 +1,18 @@
+/* ── Branch select ── */
+
+.branch-select-status {
+  display: flex;
+  align-items: center;
+  gap: var(--cc-space-3);
+  font-size: var(--cc-font-lg);
+  color: var(--cc-text-muted);
+}
+
+.branch-select-spinner {
+  animation: branch-select-spin 0.8s linear infinite;
+}
+@keyframes branch-select-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/src/views/ProjectsView/BranchSelect.tsx b/app/src/views/ProjectsView/BranchSelect.tsx
new file mode 100644
index 00000000..92e1489c
--- /dev/null
+++ b/app/src/views/ProjectsView/BranchSelect.tsx
@@ -0,0 +1,87 @@
+// views/ProjectsView/BranchSelect.tsx — repo-resolved branch dropdown. Fetches
+// the branch list for `url` and preselects the repo default. Owns no
+// url-change tracking of its own: the parent re-keys it per resolved url
+// (key={url}), so a branch pick from a previous repo can never leak into the
+// next one — that remount is the actual fix for bug #2, not anything here.
+
+import './BranchSelect.css';
+import { useEffect, useState } from 'preact/hooks';
+import { LoaderCircle } from 'lucide-preact';
+import { fetchBranches } from '@/api/branches';
+
+export interface BranchSelectProps {
+  url: string; // a resolvable git URL, or '' to stay idle
+  value: string; // '' means "use the repo default"
+  onChange: (branch: string) => void;
+}
+
+type State =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'ready'; branches: string[]; def: string | null }
+  | { status: 'error'; message: string };
+
+export function BranchSelect({ url, value, onChange }: BranchSelectProps) {
+  const [state, setState] = useState<State>({ status: 'idle' });
+
+  useEffect(() => {
+    if (!url) {
+      setState({ status: 'idle' });
+      return;
+    }
+    let live = true;
+    setState({ status: 'loading' });
+    fetchBranches(url).then(
+      (r) => {
+        if (!live) return;
+        setState({ status: 'ready', branches: r.branches, def: r.default });
+        if (r.default) onChange(r.default); // preselect the repo default
+      },
+      (e: unknown) => {
+        if (!live) return;
+        setState({ status: 'error', message: e instanceof Error ? e.message : String(e) });
+      }
+    );
+    return () => {
+      live = false;
+    };
+    // url is the only trigger here — the parent remounts this component per
+    // repo (key={url}), so there's no stale-onChange/value closure risk to
+    // guard against by widening this dependency list.
+  }, [url]);
+
+  if (state.status === 'idle') return null;
+
+  // .new-project-field is the shared field-wrapper layout from
+  // NewProjectForm.css — safe to reuse because this component only ever
+  // renders inside <NewProjectForm>, never standalone.
+  return (
+    <div class="new-project-field branch-select">
+      <label>Branch</label>
+      {state.status === 'loading' && (
+        <div class="branch-select-status">
+          <LoaderCircle class="lucide-icon branch-select-spinner" />
+          Resolving branches…
+        </div>
+      )}
+      {state.status === 'error' && (
+        <div class="branch-select-status text-error">{state.message}</div>
+      )}
+      {state.status === 'ready' && (
+        <select
+          class="form-input form-input--select"
+          aria-label="Branch"
+          value={value || state.def || ''}
+          onChange={(e) => onChange((e.target as HTMLSelectElement).value)}
+        >
+          {state.branches.map((b) => (
+            <option value={b} key={b}>
+              {b}
+              {b === state.def ? ' (default)' : ''}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}
diff --git a/app/src/views/ProjectsView/NewProjectForm.css b/app/src/views/ProjectsView/NewProjectForm.css
new file mode 100644
index 00000000..591cfa02
--- /dev/null
+++ b/app/src/views/ProjectsView/NewProjectForm.css
@@ -0,0 +1,61 @@
+/* ── New project form ── */
+
+.new-project {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cc-space-6);
+}
+
+.new-project--loading {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.new-project-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cc-space-3);
+}
+.new-project-field label {
+  font-size: var(--cc-font-lg);
+  color: var(--cc-text-muted);
+}
+.new-project-field .form-input {
+  width: 100%;
+}
+
+/* Inline notice for the disabled-local state. Quieter than .card-error:
+   subtle amber tint, no border, single line — the old modal's version was a
+   multi-paragraph wall, this one stays scannable. */
+.new-project-note {
+  background: var(--cc-warning-bg);
+  color: var(--cc-text-secondary);
+  border-radius: var(--cc-radius-md);
+  padding: var(--cc-space-4) var(--cc-space-5);
+  font-size: var(--cc-font-lg);
+}
+
+.new-project-advanced-toggle {
+  appearance: none;
+  background: none;
+  border: none;
+  align-self: flex-start;
+  color: var(--cc-text-faint);
+  font: inherit;
+  font-size: var(--cc-font-md);
+  cursor: pointer;
+  padding: 0;
+}
+.new-project-advanced-toggle:hover {
+  color: var(--cc-text-secondary);
+}
+
+.new-project-skip-cache {
+  display: flex;
+  align-items: center;
+  gap: var(--cc-space-3);
+  font-size: var(--cc-font-lg);
+  color: var(--cc-text-secondary);
+  margin-top: calc(var(--cc-space-4) * -1);
+}
diff --git a/app/src/views/ProjectsView/NewProjectForm.tsx b/app/src/views/ProjectsView/NewProjectForm.tsx
index 1e89e369..7559c439 100644
--- a/app/src/views/ProjectsView/NewProjectForm.tsx
+++ b/app/src/views/ProjectsView/NewProjectForm.tsx
@@ -1,9 +1,16 @@
-// views/ProjectsView/NewProjectForm.tsx — stub; real form (Git URL / local path
-// tabs, branch select, skip-cache) arrives in Task 8. Props are typed to match
-// what ProjectsView already passes so the shell compiles against the real
-// contract, not a loosened placeholder.
+// views/ProjectsView/NewProjectForm.tsx — new-source entry. A single source
+// field that classifies itself as you type (srcKind) and drives a Git URL /
+// Local path segment — manual override still works via the segment itself.
+// Git sources get a repo-resolved branch dropdown; skip-cache is tucked
+// behind an Advanced disclosure so the common path stays a one-field form.
 
+import './NewProjectForm.css';
+import { useState } from 'preact/hooks';
+import { SegmentedSelect } from '@/components/SegmentedSelect/SegmentedSelect';
+import { srcKind, SourceKind } from '@/utils/sources';
 import type { SourcePayload } from '@/state/stores/ui';
+import { SCAN_PROGRESS } from '@/state/stores/scanProgress';
+import { BranchSelect } from './BranchSelect';
 
 export interface NewProjectFormProps {
   allowLocalRepos: boolean;
@@ -12,6 +19,152 @@ export interface NewProjectFormProps {
   onCancel: () => void;
 }
 
-export function NewProjectForm(_props: NewProjectFormProps) {
-  return null;
+const KIND_OPTIONS = [
+  { value: SourceKind.Remote, label: 'Git URL' },
+  { value: SourceKind.Local, label: 'Local path' },
+];
+
+// A source string worth resolving branches for: has a scheme (https://,
+// ssh://, ...) or the scp-form host (user@host:path). Guards against firing
+// /api/branches on every keystroke of a half-typed URL.
+function looksResolvable(v: string): boolean {
+  return srcKind(v) === SourceKind.Remote && (/:\/\/.+\/.+/.test(v) || /^[^@]+@[^:]+:.+/.test(v));
+}
+
+export function NewProjectForm({
+  allowLocalRepos,
+  prefill,
+  onSubmit,
+  onCancel,
+}: NewProjectFormProps) {
+  const initialKind = prefill?.src && allowLocalRepos ? srcKind(prefill.src) : SourceKind.Remote;
+  const [kind, setKind] = useState<SourceKind>(initialKind);
+  const [source, setSource] = useState(prefill?.src ?? '');
+  const [branch, setBranch] = useState(prefill?.branch ?? '');
+  const [resolvedUrl, setResolvedUrl] = useState(
+    initialKind === SourceKind.Remote && prefill?.src && looksResolvable(prefill.src)
+      ? prefill.src
+      : ''
+  );
+  const [skipCache, setSkipCache] = useState(false);
+  const [advanced, setAdvanced] = useState(false);
+
+  const loading = SCAN_PROGRESS.value !== null;
+  const localOff = kind === SourceKind.Local && !allowLocalRepos;
+
+  // Smart kind auto-select: reclassify on every keystroke, in either
+  // direction (a URL pasted into what was the Local tab flips back to Git).
+  // A full clear keeps the current kind rather than snapping to Local on
+  // empty input. Clicking the segment directly (onCommit below) is a manual
+  // override that bypasses this — it always wins until the next keystroke.
+  function onSourceInput(v: string) {
+    setSource(v);
+    const k = v.trim() ? srcKind(v) : kind;
+    if (k !== kind) setKind(k);
+    if (k === SourceKind.Remote) {
+      // Branch reset on URL change (bug #2): a stale pick from a previous
+      // repo must never ride along to whatever's typed now. BranchSelect is
+      // also remounted below (key={resolvedUrl}), so its internal fetch
+      // state can't straddle two repos either.
+      setBranch('');
+      setResolvedUrl(looksResolvable(v) ? v : '');
+    }
+  }
+
+  const activeSrc = source.trim();
+  const canSubmit = !loading && !localOff && activeSrc.length > 0;
+
+  function submit() {
+    if (!canSubmit) return;
+    onSubmit({
+      src: activeSrc,
+      branch: kind === SourceKind.Remote ? branch.trim() || undefined : undefined,
+      skipCache: skipCache || undefined,
+    });
+  }
+
+  if (loading) {
+    // Inline scan progress lives at the ProjectsView level (Task 9); the form
+    // collapses to just a cancel affordance while a load is in flight.
+    return (
+      <div class="new-project new-project--loading">
+        <span class="text-label">Opening project…</span>
+        <button type="button" class="btn-icon btn-icon--text" onClick={onCancel}>
+          Cancel
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div class="new-project">
+      <SegmentedSelect
+        value={kind}
+        options={KIND_OPTIONS}
+        onCommit={(v) => setKind(v as SourceKind)}
+      />
+
+      {!localOff && (
+        <div class="new-project-field">
+          <label>{kind === SourceKind.Remote ? 'URL' : 'Path'}</label>
+          <input
+            class="form-input"
+            type="text"
+            aria-label={kind === SourceKind.Remote ? 'URL' : 'Path'}
+            autoComplete="off"
+            spellcheck={false}
+            value={source}
+            onInput={(e) => onSourceInput((e.target as HTMLInputElement).value)}
+          />
+        </div>
+      )}
+
+      {kind === SourceKind.Remote && (
+        <BranchSelect url={resolvedUrl} value={branch} onChange={setBranch} key={resolvedUrl} />
+      )}
+
+      {localOff && (
+        <div class="new-project-note">
+          Local repos are off.{' '}
+          <a
+            class="link--chrome"
+            href="https://github.com/thalida/codecity#local-directories"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            How to enable
+          </a>
+        </div>
+      )}
+
+      <button
+        type="button"
+        class="new-project-advanced-toggle"
+        aria-expanded={advanced}
+        onClick={() => setAdvanced((a) => !a)}
+      >
+        Advanced
+      </button>
+      {advanced && (
+        <label class="new-project-skip-cache">
+          <input
+            type="checkbox"
+            checked={skipCache}
+            onChange={(e) => setSkipCache((e.target as HTMLInputElement).checked)}
+          />
+          Skip cache (fresh scan)
+        </label>
+      )}
+
+      <button
+        type="button"
+        class="btn-primary"
+        aria-label="Open project"
+        disabled={!canSubmit}
+        onClick={submit}
+      >
+        Open project
+      </button>
+    </div>
+  );
 }
diff --git a/app/tests/views/ProjectsView/BranchSelect.test.tsx b/app/tests/views/ProjectsView/BranchSelect.test.tsx
new file mode 100644
index 00000000..06da84a8
--- /dev/null
+++ b/app/tests/views/ProjectsView/BranchSelect.test.tsx
@@ -0,0 +1,98 @@
+// Native-harness tests for BranchSelect — mirrors app/tests/layout/leftSidebar.test.tsx's
+// render/flush/container pattern (this repo has no @testing-library/preact dependency).
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'preact';
+import { BranchSelect } from '@/views/ProjectsView/BranchSelect';
+import * as branchesApi from '@/api/branches';
+import { flush, drainAsync } from '../../_helpers/preact';
+
+describe('BranchSelect', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    render(null, container);
+    document.body.removeChild(container);
+    vi.restoreAllMocks();
+  });
+
+  it('renders nothing while idle (no url)', async () => {
+    render(<BranchSelect url="" value="" onChange={() => {}} />, container);
+    await flush();
+    expect(container.querySelector('.branch-select')).toBeNull();
+  });
+
+  it('shows a resolving state, then the dropdown with the repo default preselected and marked', async () => {
+    // Manually-controlled promise (rather than mockResolvedValue) so the
+    // loading assertion below can't race past the resolution on the
+    // microtask queue — it only settles once resolveFetch is called.
+    let resolveFetch!: (r: { branches: string[]; default: string | null }) => void;
+    vi.spyOn(branchesApi, 'fetchBranches').mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveFetch = resolve;
+        })
+    );
+    const onChange = vi.fn();
+
+    render(<BranchSelect url="https://github.com/o/r" value="" onChange={onChange} />, container);
+    // The mocked fetch never settles until resolveFetch() runs below, so it's
+    // safe to drain generously here — the component can only be idle or
+    // loading, never past it (Preact's effect scheduling has a real-timer
+    // hop, so a single microtask flush() is not enough to observe this).
+    await drainAsync();
+    expect(container.querySelector('.branch-select-status')?.textContent).toMatch(/resolving/i);
+
+    resolveFetch({ branches: ['main', 'dev'], default: 'main' });
+    await drainAsync();
+
+    // The repo default is preselected via onChange (the parent owns `value`).
+    expect(onChange).toHaveBeenCalledWith('main');
+    const select = container.querySelector<HTMLSelectElement>('select')!;
+    expect(select).not.toBeNull();
+    const optionTexts = Array.from(select.options).map((o) => o.textContent);
+    expect(optionTexts).toContain('main (default)');
+    expect(optionTexts).toContain('dev');
+  });
+
+  it('shows the server error message inline on resolution failure, with no dropdown', async () => {
+    vi.spyOn(branchesApi, 'fetchBranches').mockRejectedValue(new Error('repository not found'));
+
+    render(
+      <BranchSelect url="https://github.com/o/nope" value="" onChange={() => {}} />,
+      container
+    );
+    await drainAsync();
+
+    expect(container.textContent).toMatch(/repository not found/i);
+    expect(container.querySelector('select')).toBeNull();
+  });
+
+  it('re-resolves when the url prop changes (parent typically remounts via key instead)', async () => {
+    const resolve = vi.spyOn(branchesApi, 'fetchBranches');
+    resolve.mockResolvedValueOnce({ branches: ['main'], default: 'main' });
+    const onChange = vi.fn();
+
+    render(
+      <BranchSelect url="https://github.com/o/first" value="" onChange={onChange} />,
+      container
+    );
+    await drainAsync();
+    expect(resolve).toHaveBeenCalledWith('https://github.com/o/first');
+
+    resolve.mockResolvedValueOnce({ branches: ['trunk'], default: 'trunk' });
+    render(
+      <BranchSelect url="https://github.com/o/second" value="" onChange={onChange} />,
+      container
+    );
+    await drainAsync();
+
+    expect(resolve).toHaveBeenCalledWith('https://github.com/o/second');
+    expect(onChange).toHaveBeenCalledWith('trunk');
+  });
+});
diff --git a/app/tests/views/ProjectsView/NewProjectForm.test.tsx b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
new file mode 100644
index 00000000..f0e0c29d
--- /dev/null
+++ b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
@@ -0,0 +1,172 @@
+// Native-harness tests for NewProjectForm — mirrors app/tests/layout/leftSidebar.test.tsx's
+// render/flush/container pattern (this repo has no @testing-library/preact dependency).
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'preact';
+import { NewProjectForm } from '@/views/ProjectsView/NewProjectForm';
+import * as branchesApi from '@/api/branches';
+import { SCAN_PROGRESS } from '@/state/stores/scanProgress';
+import { flush, drainAsync } from '../../_helpers/preact';
+
+function setInput(el: HTMLInputElement, value: string) {
+  el.value = value;
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function activeSegment(container: HTMLElement): string | undefined {
+  return container.querySelector('.btn-toggle.is-active')?.textContent ?? undefined;
+}
+
+describe('NewProjectForm', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    render(null, container);
+    document.body.removeChild(container);
+    SCAN_PROGRESS.value = null;
+    vi.restoreAllMocks();
+  });
+
+  it('auto-selects Git for a URL and Local for a bare path, but a manual click still overrides it', async () => {
+    render(<NewProjectForm allowLocalRepos onSubmit={() => {}} onCancel={() => {}} />, container);
+    await flush();
+    expect(activeSegment(container)).toBe('Git URL');
+
+    const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
+    setInput(urlInput, '/Users/thalida/repo');
+    await flush();
+    expect(activeSegment(container)).toBe('Local path');
+
+    const pathInput = container.querySelector<HTMLInputElement>('input[aria-label="Path"]')!;
+    setInput(pathInput, 'https://github.com/o/r');
+    await flush();
+    expect(activeSegment(container)).toBe('Git URL');
+
+    // Manual override: force Local even though the typed text still looks remote.
+    const localTab = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Local path'
+    )!;
+    localTab.click();
+    await flush();
+    expect(activeSegment(container)).toBe('Local path');
+  });
+
+  it('resets the branch when the URL changes to a different repo (bug #2)', async () => {
+    const resolve = vi.spyOn(branchesApi, 'fetchBranches');
+    resolve.mockResolvedValueOnce({ branches: ['main', 'feat'], default: 'main' });
+    const onSubmit = vi.fn();
+
+    render(<NewProjectForm allowLocalRepos onSubmit={onSubmit} onCancel={() => {}} />, container);
+    await flush();
+
+    const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
+    setInput(urlInput, 'https://github.com/o/first');
+    await drainAsync();
+
+    // User picks the non-default branch on the first repo.
+    const select = container.querySelector<HTMLSelectElement>('select')!;
+    select.value = 'feat';
+    select.dispatchEvent(new Event('change', { bubbles: true }));
+    await flush();
+    expect(select.value).toBe('feat');
+
+    // Now point the field at a different repo entirely. This repo has no
+    // detectable default (default: null), so nothing auto-preselects a
+    // branch for it — if the stale 'feat' pick isn't explicitly cleared,
+    // it's the only branch value left standing and rides along unnoticed.
+    resolve.mockResolvedValueOnce({ branches: ['main'], default: null });
+    setInput(urlInput, 'https://github.com/o/second');
+    await drainAsync();
+
+    const submitBtn = container.querySelector<HTMLButtonElement>('[aria-label="Open project"]')!;
+    submitBtn.click();
+    await flush();
+
+    const payload = onSubmit.mock.calls.at(-1)?.[0];
+    expect(payload.src).toBe('https://github.com/o/second');
+    // The load-bearing assertion: 'feat' (the FIRST repo's pick) must never
+    // ride along to the second repo's submit.
+    expect(payload.branch).not.toBe('feat');
+    expect(payload.branch).toBeUndefined();
+  });
+
+  it('stays submit-enabled when branch resolution fails (forgiving — server resolves default)', async () => {
+    vi.spyOn(branchesApi, 'fetchBranches').mockRejectedValue(new Error('repository not found'));
+    const onSubmit = vi.fn();
+
+    render(<NewProjectForm allowLocalRepos onSubmit={onSubmit} onCancel={() => {}} />, container);
+    await flush();
+
+    const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
+    setInput(urlInput, 'https://github.com/o/nope');
+    await drainAsync();
+
+    expect(container.textContent).toMatch(/repository not found/i);
+    const submitBtn = container.querySelector<HTMLButtonElement>('[aria-label="Open project"]')!;
+    expect(submitBtn.disabled).toBe(false);
+
+    submitBtn.click();
+    await flush();
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ src: 'https://github.com/o/nope' })
+    );
+  });
+
+  it('demotes skip-cache to an off-by-default Advanced disclosure', async () => {
+    render(<NewProjectForm allowLocalRepos onSubmit={() => {}} onCancel={() => {}} />, container);
+    await flush();
+
+    expect(container.querySelector('input[type="checkbox"]')).toBeNull();
+
+    const toggle = container.querySelector<HTMLButtonElement>('.new-project-advanced-toggle')!;
+    expect(toggle.getAttribute('aria-expanded')).toBe('false');
+    toggle.click();
+    await flush();
+
+    expect(toggle.getAttribute('aria-expanded')).toBe('true');
+    const checkbox = container.querySelector<HTMLInputElement>('input[type="checkbox"]')!;
+    expect(checkbox).not.toBeNull();
+    expect(checkbox.checked).toBe(false);
+  });
+
+  it('shows a concise disabled-local note and blocks submit when local repos are off', async () => {
+    render(
+      <NewProjectForm allowLocalRepos={false} onSubmit={() => {}} onCancel={() => {}} />,
+      container
+    );
+    await flush();
+
+    const localTab = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Local path'
+    )!;
+    localTab.click();
+    await flush();
+
+    expect(container.textContent).toMatch(/local repos are off/i);
+    // Concise, not a wall: no leftover path input competing with the note.
+    expect(container.querySelector('input[aria-label="Path"]')).toBeNull();
+
+    const submitBtn = container.querySelector<HTMLButtonElement>('[aria-label="Open project"]')!;
+    expect(submitBtn.disabled).toBe(true);
+  });
+
+  it('never uses an em-dash in the disabled-local copy', async () => {
+    render(
+      <NewProjectForm allowLocalRepos={false} onSubmit={() => {}} onCancel={() => {}} />,
+      container
+    );
+    await flush();
+    const localTab = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Local path'
+    )!;
+    localTab.click();
+    await flush();
+
+    expect(container.querySelector('.new-project-note')?.textContent).not.toMatch(/—/);
+  });
+});

From 83313b9a9892c7a0374f6ca8dfba7617790ac9c6 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 18:15:03 -0400
Subject: [PATCH 09/12] fix(app): pin Remote when local repos off so URL field
 survives typing (#77)

The single-field NewProjectForm unmounted the source input on the first
keystroke of a git URL when allowLocalRepos=false: srcKind classifies a
half-typed URL ("h") as Local, flipping kind->Local -> localOff true ->
the {!localOff && <input/>} branch dropped the field and focus. Pin Remote
when local repos are disabled (Local is unreachable there). Adds a
char-by-char typing regression test, plus aria-controls on the Advanced
toggle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/views/ProjectsView/NewProjectForm.tsx | 12 ++++++---
 .../ProjectsView/NewProjectForm.test.tsx      | 26 +++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/app/src/views/ProjectsView/NewProjectForm.tsx b/app/src/views/ProjectsView/NewProjectForm.tsx
index 7559c439..fb6daa7c 100644
--- a/app/src/views/ProjectsView/NewProjectForm.tsx
+++ b/app/src/views/ProjectsView/NewProjectForm.tsx
@@ -60,8 +60,13 @@ export function NewProjectForm({
   function onSourceInput(v: string) {
     setSource(v);
     const k = v.trim() ? srcKind(v) : kind;
-    if (k !== kind) setKind(k);
-    if (k === SourceKind.Remote) {
+    // Never reclassify to Local when local repos are disabled: Local isn't a
+    // reachable destination there, and doing so mid-keystroke (srcKind treats a
+    // half-typed URL like "h" as Local) would flip localOff true and unmount
+    // the very field the user is typing into, dropping focus. Pin Remote.
+    const nextKind = k === SourceKind.Local && !allowLocalRepos ? SourceKind.Remote : k;
+    if (nextKind !== kind) setKind(nextKind);
+    if (nextKind === SourceKind.Remote) {
       // Branch reset on URL change (bug #2): a stale pick from a previous
       // repo must never ride along to whatever's typed now. BranchSelect is
       // also remounted below (key={resolvedUrl}), so its internal fetch
@@ -141,12 +146,13 @@ export function NewProjectForm({
         type="button"
         class="new-project-advanced-toggle"
         aria-expanded={advanced}
+        aria-controls="new-project-advanced"
         onClick={() => setAdvanced((a) => !a)}
       >
         Advanced
       </button>
       {advanced && (
-        <label class="new-project-skip-cache">
+        <label id="new-project-advanced" class="new-project-skip-cache">
           <input
             type="checkbox"
             checked={skipCache}
diff --git a/app/tests/views/ProjectsView/NewProjectForm.test.tsx b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
index f0e0c29d..f40a0d2e 100644
--- a/app/tests/views/ProjectsView/NewProjectForm.test.tsx
+++ b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
@@ -169,4 +169,30 @@ describe('NewProjectForm', () => {
 
     expect(container.querySelector('.new-project-note')?.textContent).not.toMatch(/—/);
   });
+
+  it('keeps the URL field mounted while typing a git URL char-by-char when local repos are off', async () => {
+    // Regression guard: srcKind() classifies any string without "://" or a
+    // user@host: prefix as Local, so the very first keystroke of a URL ("h")
+    // used to flip kind→Local. With local repos off that made localOff true,
+    // which unmounted the shared source input mid-keystroke and dropped focus.
+    // With local disabled, Local isn't a reachable destination, so kind must
+    // pin to Git and the field must never disappear while the user types.
+    render(
+      <NewProjectForm allowLocalRepos={false} onSubmit={() => {}} onCancel={() => {}} />,
+      container
+    );
+    await flush();
+
+    const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
+    expect(urlInput).not.toBeNull();
+
+    for (const chunk of ['h', 'ht', 'htt', 'http']) {
+      setInput(urlInput, chunk);
+      await flush();
+      // The input the user is typing into must stay in the DOM at every step.
+      expect(container.querySelector('input[aria-label="URL"]')).not.toBeNull();
+      // ...and kind stays Git, never flipping to the unreachable Local.
+      expect(activeSegment(container)).toBe('Git URL');
+    }
+  });
 });

From 00d1c1bcdc5c38cf075468264c661b6de74b33f6 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 18:31:40 -0400
Subject: [PATCH 10/12] feat(app): mount ProjectsView, keep it open through
 load + auto-close on commit (#77)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cuts App over from the modal <SourcePicker> to <ProjectsView>: the view stays
mounted through a submit (no dismiss-then-submit), renders inline load
progress (pending label + step + Cancel) in place of the form/recents, and
closes itself via the existing CURRENT_SOURCE effect (written only on a
committed success) rather than any ordering of signal writes.

LoadingOverlay now suppresses itself while ProjectsView is open, per the
design's "two loading surfaces, each with a crisp job" split — otherwise a
switch would show the overlay's no-controls backdrop stacked on top of the
view's own Cancel button. Its narrow remaining job is deep-link cold boot.

Extracted the phase→step mapping shared by both surfaces into
constants/loadingSteps.stepForPhase (behavior-preserving refactor of
loadingReactions.ts) instead of duplicating it in ProjectsView.

NewProjectForm's own collapsed "Opening project… / Cancel" affordance is now
unreachable (ProjectsView unmounts it during a load) and is removed along with
its onCancel prop and dead CSS.
---
 .../LoadingOverlay/LoadingOverlay.tsx         |  10 +-
 app/src/constants/loadingSteps.ts             |  25 ++++
 app/src/layout/App/App.tsx                    |  38 ++---
 app/src/state/loadingReactions.ts             |   8 +-
 app/src/views/ProjectsView/NewProjectForm.css |   6 -
 app/src/views/ProjectsView/NewProjectForm.tsx |  25 +---
 app/src/views/ProjectsView/ProjectsView.css   |  12 ++
 app/src/views/ProjectsView/ProjectsView.tsx   |  47 ++++--
 app/tests/components/loadingOverlay.test.tsx  |  16 +++
 .../ProjectsView/NewProjectForm.test.tsx      |  23 +--
 .../views/ProjectsView/ProjectsView.test.tsx  | 135 ++++++++++++++++++
 11 files changed, 268 insertions(+), 77 deletions(-)
 create mode 100644 app/tests/views/ProjectsView/ProjectsView.test.tsx

diff --git a/app/src/components/LoadingOverlay/LoadingOverlay.tsx b/app/src/components/LoadingOverlay/LoadingOverlay.tsx
index ba876c92..4974c24e 100644
--- a/app/src/components/LoadingOverlay/LoadingOverlay.tsx
+++ b/app/src/components/LoadingOverlay/LoadingOverlay.tsx
@@ -13,9 +13,16 @@
 // visible advancement maps to a real NDJSON phase event (cloning, scanning,
 // skeleton, building) or the client-side decoration pass — no wall-clock timers.
 // The step vocabulary lives in constants/loadingSteps.
+//
+// Narrow role by design: a load driven from <ProjectsView> (every switch)
+// renders its OWN inline progress and this overlay stays hidden — two
+// full-viewport surfaces stacking on the same load would leave the user
+// looking at this overlay's no-controls backdrop on top of the view's Cancel
+// button. This overlay now only ever shows for a deep-link cold boot (no
+// view open yet).
 
 import './LoadingOverlay.css';
-import { LOADING_OVERLAY } from '@/state/stores/ui';
+import { LOADING_OVERLAY, PROJECTS_VIEW } from '@/state/stores/ui';
 import { PENDING_SOURCE_LABEL } from '@/state/stores/source';
 import { SourceKind } from '@/utils/sources';
 import {
@@ -52,6 +59,7 @@ export function LoadingOverlay() {
     stepTails: lo.stepTails,
   };
   if (!s.visible || !s.activeStep) return null;
+  if (PROJECTS_VIEW.value.visible) return null;
 
   const activeStep = s.activeStep;
   const activeIdx = LOADING_STEPS.indexOf(activeStep);
diff --git a/app/src/constants/loadingSteps.ts b/app/src/constants/loadingSteps.ts
index 42a6f085..456d78df 100644
--- a/app/src/constants/loadingSteps.ts
+++ b/app/src/constants/loadingSteps.ts
@@ -4,6 +4,9 @@
 // sites and the data-step attribute stay self-documenting; the overlay and the
 // uiState setters both render/advance from these.
 
+import { ScanPhase } from '@/api/manifest';
+import { SourceKind } from '@/utils/sources';
+
 export enum LoadingStep {
   Resolving = 'resolving',
   Cloning = 'cloning',
@@ -46,3 +49,25 @@ export const LOADING_STEP_LABELS: Record<LoadingStep, string> = {
   [LoadingStep.Building]: 'Building city',
   [LoadingStep.Decorating]: 'Adding decorations',
 };
+
+/**
+ * Map a scan-stream phase to the step it represents, given the source kind
+ * (local skips resolving/cloning — see LoadingOverlay's kind-based hiding).
+ * Shared by the loading-overlay reactions and ProjectsView's inline progress
+ * so the phase→step mapping has exactly one definition.
+ */
+export function stepForPhase(phase: ScanPhase | null, kind: SourceKind): LoadingStep {
+  switch (phase) {
+    case ScanPhase.CloneProgress:
+      return LoadingStep.Cloning;
+    case ScanPhase.ScanProgress:
+      return LoadingStep.Scanning;
+    case ScanPhase.PartialManifest:
+      return LoadingStep.Skeleton;
+    case ScanPhase.CompleteManifest:
+      return LoadingStep.Building;
+    default:
+      // phase === null: just-started, no stream event yet.
+      return kind === SourceKind.Local ? LoadingStep.Scanning : LoadingStep.Resolving;
+  }
+}
diff --git a/app/src/layout/App/App.tsx b/app/src/layout/App/App.tsx
index f3384801..d448290b 100644
--- a/app/src/layout/App/App.tsx
+++ b/app/src/layout/App/App.tsx
@@ -10,8 +10,9 @@
 //     <RightSidebar>     — self-subscribes to SCENE_HANDLE + picker
 //   </main>
 //   <AppFooter>          — reads signals directly
-//   <SourcePicker />     — reads PROJECTS_VIEW + SERVER_CONFIG directly
-//   <LoadingOverlay />   — reads LOADING_OVERLAY directly
+//   <ProjectsView />     — reads PROJECTS_VIEW + SERVER_CONFIG directly; owns
+//                          inline progress for a switch it initiates
+//   <LoadingOverlay />   — reads LOADING_OVERLAY directly; deep-link boot only
 //   <ShortcutsModal />   — reads SHORTCUTS_OPEN directly
 //   <DebugModal />       — reads DEBUG_OPEN directly; scene commands passed as props
 
@@ -24,7 +25,7 @@ import { AppFooter } from '../AppFooter/AppFooter';
 import { CenterPane } from '../CenterPane/CenterPane';
 import { LeftSidebar } from '../LeftSidebar/LeftSidebar';
 import { RightSidebar } from '../RightSidebar/RightSidebar';
-import { SourcePicker } from '@/views/SourcePicker/SourcePicker';
+import { ProjectsView } from '@/views/ProjectsView/ProjectsView';
 import { ShortcutsModal } from '@/views/ShortcutsModal/ShortcutsModal';
 import { DebugModal } from '@/views/DebugModal/DebugModal';
 import { LoadingOverlay } from '@/components/LoadingOverlay/LoadingOverlay';
@@ -52,20 +53,25 @@ import { attachLoadingReactions } from '@/state/loadingReactions';
 
 export function App() {
   useDocumentTitle();
-  const { submitSource } = useManifestSource();
+  const { submitSource, cancelLoad } = useManifestSource();
 
   useEffect(() => attachLoadingReactions(), []);
 
-  // Reset the picker selection whenever a world commits, so panes derived from
-  // it (the right sidebar, tree highlight) don't carry a stale node into the
-  // new world. Keyed on CURRENT_SOURCE — live-reloads don't rewrite it, so an
-  // in-place refresh keeps your selection.
+  // A committed switch: CURRENT_SOURCE is written ONLY on a successful load,
+  // so reacting here both resets the picker selection (panes derived from it —
+  // the right sidebar, tree highlight — must not carry a stale node into the
+  // new world) and auto-closes the view to reveal the new city. One reaction,
+  // one concern: "a world committed". No-op on deep-link boot (view already
+  // closed) and on live-updates (they don't rewrite CURRENT_SOURCE).
   useSignalEffect(() => {
-    if (CURRENT_SOURCE.value) clearSelection();
+    if (CURRENT_SOURCE.value) {
+      clearSelection();
+      closeProjectsView();
+    }
   });
 
-  // App coordinates the source picker; the fetch hook only reports outcomes.
-  const dismissPicker = () => {
+  // App coordinates the projects view; the fetch hook only reports outcomes.
+  const dismissView = () => {
     closeProjectsView();
     SOURCE_ERROR.value = null;
   };
@@ -77,7 +83,7 @@ export function App() {
     }
   }, []);
 
-  // A source-load failure (boot or submit) reopens the picker. Dismissible only
+  // A source-load failure (boot or submit) reopens the view. Dismissible only
   // when a city is already loaded to fall back to (a failed FIRST pick stays
   // non-dismissible so the app can't end up blank).
   useSignalEffect(() => {
@@ -104,13 +110,7 @@ export function App() {
         <RightSidebar />
       </main>
       <AppFooter />
-      <SourcePicker
-        onSubmit={(p) => {
-          dismissPicker();
-          submitSource(p);
-        }}
-        onClose={dismissPicker}
-      />
+      <ProjectsView onSubmit={(p) => submitSource(p)} onCancel={cancelLoad} onClose={dismissView} />
       <LoadingOverlay />
       <ShortcutsModal />
       <DebugModal onRunCollisionCheck={runCollisionCheck} onRunStemDiagnostic={runStemDiagnostic} />
diff --git a/app/src/state/loadingReactions.ts b/app/src/state/loadingReactions.ts
index f44dab29..cbd4763c 100644
--- a/app/src/state/loadingReactions.ts
+++ b/app/src/state/loadingReactions.ts
@@ -13,7 +13,7 @@ import {
   setLoadingStepTail,
 } from '@/state/stores/ui';
 import { ScanPhase } from '@/api/manifest';
-import { LoadingStep } from '@/constants/loadingSteps';
+import { LoadingStep, stepForPhase } from '@/constants/loadingSteps';
 
 export function attachLoadingReactions(): () => void {
   let wasActive = false;
@@ -30,8 +30,8 @@ export function attachLoadingReactions(): () => void {
       showLoadingOverlay({ kind: p.kind, label: p.label, branch: p.branch });
       wasActive = true;
     }
+    setLoadingStep(stepForPhase(p.phase, p.kind));
     if (p.phase === ScanPhase.CloneProgress) {
-      setLoadingStep(LoadingStep.Cloning);
       // A normal tick shows "{percent}% ({stage})"; a heartbeat during the
       // silent promisor blob fetch (no percent) shows the working tree growing
       // on disk so the step doesn't look frozen.
@@ -43,7 +43,6 @@ export function attachLoadingReactions(): () => void {
       }
       setLoadingStepTail(LoadingStep.Cloning, tail);
     } else if (p.phase === ScanPhase.ScanProgress) {
-      setLoadingStep(LoadingStep.Scanning);
       setLoadingStepTail(
         LoadingStep.Scanning,
         p.filesScanned !== undefined ? `${p.filesScanned.toLocaleString()} files` : null
@@ -52,9 +51,6 @@ export function attachLoadingReactions(): () => void {
       // Progress tails done.
       setLoadingStepTail(LoadingStep.Cloning, null);
       setLoadingStepTail(LoadingStep.Scanning, null);
-      setLoadingStep(
-        p.phase === ScanPhase.PartialManifest ? LoadingStep.Skeleton : LoadingStep.Building
-      );
     }
     // p.phase === null: just-started; showLoadingOverlay already set the
     // kind-based initial step — nothing more to do until a real event.
diff --git a/app/src/views/ProjectsView/NewProjectForm.css b/app/src/views/ProjectsView/NewProjectForm.css
index 591cfa02..ec2dc85e 100644
--- a/app/src/views/ProjectsView/NewProjectForm.css
+++ b/app/src/views/ProjectsView/NewProjectForm.css
@@ -6,12 +6,6 @@
   gap: var(--cc-space-6);
 }
 
-.new-project--loading {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .new-project-field {
   display: flex;
   flex-direction: column;
diff --git a/app/src/views/ProjectsView/NewProjectForm.tsx b/app/src/views/ProjectsView/NewProjectForm.tsx
index fb6daa7c..4989ed04 100644
--- a/app/src/views/ProjectsView/NewProjectForm.tsx
+++ b/app/src/views/ProjectsView/NewProjectForm.tsx
@@ -3,6 +3,10 @@
 // Local path segment — manual override still works via the segment itself.
 // Git sources get a repo-resolved branch dropdown; skip-cache is tucked
 // behind an Advanced disclosure so the common path stays a one-field form.
+//
+// ProjectsView unmounts this component while a load is in flight (its own
+// inline progress block + Cancel take over) — `loading` here only guards
+// submit against a stray double-fire in the render that flips it true.
 
 import './NewProjectForm.css';
 import { useState } from 'preact/hooks';
@@ -16,7 +20,6 @@ export interface NewProjectFormProps {
   allowLocalRepos: boolean;
   prefill?: SourcePayload;
   onSubmit: (payload: SourcePayload) => void;
-  onCancel: () => void;
 }
 
 const KIND_OPTIONS = [
@@ -31,12 +34,7 @@ function looksResolvable(v: string): boolean {
   return srcKind(v) === SourceKind.Remote && (/:\/\/.+\/.+/.test(v) || /^[^@]+@[^:]+:.+/.test(v));
 }
 
-export function NewProjectForm({
-  allowLocalRepos,
-  prefill,
-  onSubmit,
-  onCancel,
-}: NewProjectFormProps) {
+export function NewProjectForm({ allowLocalRepos, prefill, onSubmit }: NewProjectFormProps) {
   const initialKind = prefill?.src && allowLocalRepos ? srcKind(prefill.src) : SourceKind.Remote;
   const [kind, setKind] = useState<SourceKind>(initialKind);
   const [source, setSource] = useState(prefill?.src ?? '');
@@ -88,19 +86,6 @@ export function NewProjectForm({
     });
   }
 
-  if (loading) {
-    // Inline scan progress lives at the ProjectsView level (Task 9); the form
-    // collapses to just a cancel affordance while a load is in flight.
-    return (
-      <div class="new-project new-project--loading">
-        <span class="text-label">Opening project…</span>
-        <button type="button" class="btn-icon btn-icon--text" onClick={onCancel}>
-          Cancel
-        </button>
-      </div>
-    );
-  }
-
   return (
     <div class="new-project">
       <SegmentedSelect
diff --git a/app/src/views/ProjectsView/ProjectsView.css b/app/src/views/ProjectsView/ProjectsView.css
index cb3cb725..f7a0fb1e 100644
--- a/app/src/views/ProjectsView/ProjectsView.css
+++ b/app/src/views/ProjectsView/ProjectsView.css
@@ -37,3 +37,15 @@
   overflow-y: auto;
   flex: 1;
 }
+
+/* Inline load progress, replacing the form + recents while SCAN_PROGRESS is
+   non-null. Spinner + pending-label look reuse LoadingOverlay's classes
+   (LoadingOverlay.css is loaded globally via App), so the switch flow and the
+   deep-link-boot flow read as one system. */
+.projects-view-progress {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--cc-space-6);
+  padding: var(--cc-space-8) 0;
+}
diff --git a/app/src/views/ProjectsView/ProjectsView.tsx b/app/src/views/ProjectsView/ProjectsView.tsx
index b8ca2c19..907a2e26 100644
--- a/app/src/views/ProjectsView/ProjectsView.tsx
+++ b/app/src/views/ProjectsView/ProjectsView.tsx
@@ -2,6 +2,12 @@
 // PROJECTS_VIEW + SERVER_CONFIG for open-state/prefill; App owns
 // onSubmit/onCancel/onClose. Renders null when closed so the form/list state
 // resets on next open. Replaces the old modal SourcePicker.
+//
+// This view is the loading surface for every switch it initiates (design
+// invariant): while SCAN_PROGRESS is non-null it renders inline progress in
+// place of the form + recents, and <LoadingOverlay> (App-level) suppresses
+// itself whenever this view is visible, so the two never stack. LoadingOverlay
+// keeps its narrow role of deep-link cold boot (no view open yet).
 
 import './ProjectsView.css';
 import { useEffect } from 'preact/hooks';
@@ -9,6 +15,8 @@ import { X } from 'lucide-preact';
 import { PROJECTS_VIEW, type SourcePayload } from '@/state/stores/ui';
 import { SERVER_CONFIG } from '@/state/stores/serverConfig';
 import { SCAN_PROGRESS } from '@/state/stores/scanProgress';
+import { PENDING_SOURCE_LABEL } from '@/state/stores/source';
+import { LOADING_STEP_LABELS, stepForPhase } from '@/constants/loadingSteps';
 import { NewProjectForm } from './NewProjectForm';
 import { RecentsList } from './RecentsList';
 
@@ -20,7 +28,8 @@ export interface ProjectsViewProps {
 
 export function ProjectsView({ onSubmit, onCancel, onClose }: ProjectsViewProps) {
   const pv = PROJECTS_VIEW.value;
-  const loading = SCAN_PROGRESS.value !== null;
+  const scan = SCAN_PROGRESS.value;
+  const loading = scan !== null;
 
   // Escape closes the view when dismissible and not mid-load.
   useEffect(() => {
@@ -46,14 +55,34 @@ export function ProjectsView({ onSubmit, onCancel, onClose }: ProjectsViewProps)
           )}
         </div>
         <div class="projects-view-body">
-          {pv.opts.error && <div class="card-error">{pv.opts.error}</div>}
-          <NewProjectForm
-            allowLocalRepos={SERVER_CONFIG.value.allowLocalRepos}
-            prefill={pv.opts.prefill}
-            onSubmit={onSubmit}
-            onCancel={onCancel}
-          />
-          <RecentsList onOpen={onSubmit} />
+          {/* A stale error from a prior attempt is no longer current once a
+              new load starts — drop it rather than showing it next to the
+              new attempt's progress. */}
+          {pv.opts.error && !loading && <div class="card-error">{pv.opts.error}</div>}
+          {loading && scan ? (
+            <div class="projects-view-progress" role="status" aria-live="polite">
+              {PENDING_SOURCE_LABEL.value && (
+                <div class="loading-pending-label">{PENDING_SOURCE_LABEL.value}</div>
+              )}
+              <div class="loading-spinner" />
+              <div class="text-card-title is-loading">
+                {LOADING_STEP_LABELS[stepForPhase(scan.phase, scan.kind)]}
+                {'…'}
+              </div>
+              <button type="button" class="btn-primary" onClick={onCancel}>
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <>
+              <NewProjectForm
+                allowLocalRepos={SERVER_CONFIG.value.allowLocalRepos}
+                prefill={pv.opts.prefill}
+                onSubmit={onSubmit}
+              />
+              <RecentsList onOpen={onSubmit} />
+            </>
+          )}
         </div>
       </div>
     </div>
diff --git a/app/tests/components/loadingOverlay.test.tsx b/app/tests/components/loadingOverlay.test.tsx
index d0648b32..a0b3104f 100644
--- a/app/tests/components/loadingOverlay.test.tsx
+++ b/app/tests/components/loadingOverlay.test.tsx
@@ -3,6 +3,7 @@ import { render } from 'preact';
 import { LoadingOverlay } from '@/components/LoadingOverlay/LoadingOverlay';
 import {
   LOADING_OVERLAY,
+  PROJECTS_VIEW,
   showLoadingOverlay,
   hideLoadingOverlay,
   setLoadingStep,
@@ -38,6 +39,7 @@ afterEach(() => {
   render(null, container);
   container.remove();
   PENDING_SOURCE_LABEL.value = null;
+  PROJECTS_VIEW.value = { visible: false, opts: {} };
 });
 
 describe('LoadingOverlay', () => {
@@ -45,6 +47,20 @@ describe('LoadingOverlay', () => {
     expect(container.querySelector('.loading-backdrop')).toBeNull();
   });
 
+  // <ProjectsView> is the loading surface for any switch it initiates; this
+  // overlay's narrow remaining job is a deep-link cold boot with no view
+  // open. Two full-viewport surfaces stacking would leave the overlay's
+  // no-controls backdrop on top of the view's Cancel button.
+  it('stays hidden while the projects view is open, even mid-load', async () => {
+    showLoadingOverlay({ kind: SourceKind.Remote, label: 'owner/repo' });
+    await flush();
+    expect(container.querySelector('.loading-backdrop')).not.toBeNull();
+
+    PROJECTS_VIEW.value = { visible: true, opts: {} };
+    await flush();
+    expect(container.querySelector('.loading-backdrop')).toBeNull();
+  });
+
   it('show reveals the overlay', async () => {
     showLoadingOverlay({ kind: SourceKind.Local, label: 'foo' });
     await flush();
diff --git a/app/tests/views/ProjectsView/NewProjectForm.test.tsx b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
index f40a0d2e..bb054725 100644
--- a/app/tests/views/ProjectsView/NewProjectForm.test.tsx
+++ b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
@@ -33,7 +33,7 @@ describe('NewProjectForm', () => {
   });
 
   it('auto-selects Git for a URL and Local for a bare path, but a manual click still overrides it', async () => {
-    render(<NewProjectForm allowLocalRepos onSubmit={() => {}} onCancel={() => {}} />, container);
+    render(<NewProjectForm allowLocalRepos onSubmit={() => {}} />, container);
     await flush();
     expect(activeSegment(container)).toBe('Git URL');
 
@@ -61,7 +61,7 @@ describe('NewProjectForm', () => {
     resolve.mockResolvedValueOnce({ branches: ['main', 'feat'], default: 'main' });
     const onSubmit = vi.fn();
 
-    render(<NewProjectForm allowLocalRepos onSubmit={onSubmit} onCancel={() => {}} />, container);
+    render(<NewProjectForm allowLocalRepos onSubmit={onSubmit} />, container);
     await flush();
 
     const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
@@ -99,7 +99,7 @@ describe('NewProjectForm', () => {
     vi.spyOn(branchesApi, 'fetchBranches').mockRejectedValue(new Error('repository not found'));
     const onSubmit = vi.fn();
 
-    render(<NewProjectForm allowLocalRepos onSubmit={onSubmit} onCancel={() => {}} />, container);
+    render(<NewProjectForm allowLocalRepos onSubmit={onSubmit} />, container);
     await flush();
 
     const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
@@ -118,7 +118,7 @@ describe('NewProjectForm', () => {
   });
 
   it('demotes skip-cache to an off-by-default Advanced disclosure', async () => {
-    render(<NewProjectForm allowLocalRepos onSubmit={() => {}} onCancel={() => {}} />, container);
+    render(<NewProjectForm allowLocalRepos onSubmit={() => {}} />, container);
     await flush();
 
     expect(container.querySelector('input[type="checkbox"]')).toBeNull();
@@ -135,10 +135,7 @@ describe('NewProjectForm', () => {
   });
 
   it('shows a concise disabled-local note and blocks submit when local repos are off', async () => {
-    render(
-      <NewProjectForm allowLocalRepos={false} onSubmit={() => {}} onCancel={() => {}} />,
-      container
-    );
+    render(<NewProjectForm allowLocalRepos={false} onSubmit={() => {}} />, container);
     await flush();
 
     const localTab = Array.from(container.querySelectorAll('button')).find(
@@ -156,10 +153,7 @@ describe('NewProjectForm', () => {
   });
 
   it('never uses an em-dash in the disabled-local copy', async () => {
-    render(
-      <NewProjectForm allowLocalRepos={false} onSubmit={() => {}} onCancel={() => {}} />,
-      container
-    );
+    render(<NewProjectForm allowLocalRepos={false} onSubmit={() => {}} />, container);
     await flush();
     const localTab = Array.from(container.querySelectorAll('button')).find(
       (b) => b.textContent === 'Local path'
@@ -177,10 +171,7 @@ describe('NewProjectForm', () => {
     // which unmounted the shared source input mid-keystroke and dropped focus.
     // With local disabled, Local isn't a reachable destination, so kind must
     // pin to Git and the field must never disappear while the user types.
-    render(
-      <NewProjectForm allowLocalRepos={false} onSubmit={() => {}} onCancel={() => {}} />,
-      container
-    );
+    render(<NewProjectForm allowLocalRepos={false} onSubmit={() => {}} />, container);
     await flush();
 
     const urlInput = container.querySelector<HTMLInputElement>('input[aria-label="URL"]')!;
diff --git a/app/tests/views/ProjectsView/ProjectsView.test.tsx b/app/tests/views/ProjectsView/ProjectsView.test.tsx
new file mode 100644
index 00000000..92b7e2fb
--- /dev/null
+++ b/app/tests/views/ProjectsView/ProjectsView.test.tsx
@@ -0,0 +1,135 @@
+// Native-harness tests for ProjectsView — mirrors app/tests/layout/leftSidebar.test.tsx's
+// render/flush/container pattern (this repo has no @testing-library/preact dependency).
+//
+// Focus: the inline-load-progress cutover (#77 Task 9) — while SCAN_PROGRESS is
+// non-null the view shows progress + a working Cancel and the form/recents (the
+// "second load" surface) are unmounted, not just visually disabled.
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'preact';
+import { ProjectsView } from '@/views/ProjectsView/ProjectsView';
+import { PROJECTS_VIEW, openProjectsView, closeProjectsView } from '@/state/stores/ui';
+import { SCAN_PROGRESS } from '@/state/stores/scanProgress';
+import { PENDING_SOURCE_LABEL } from '@/state/stores/source';
+import { SERVER_CONFIG } from '@/state/stores/serverConfig';
+import { RECENTS } from '@/state/stores/source';
+import { ScanPhase } from '@/api/manifest';
+import { SourceKind } from '@/utils/sources';
+import { flush, drainAsync } from '../../_helpers/preact';
+
+describe('ProjectsView', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    SERVER_CONFIG.value = { allowLocalRepos: true };
+  });
+
+  afterEach(() => {
+    render(null, container);
+    document.body.removeChild(container);
+    closeProjectsView();
+    SCAN_PROGRESS.value = null;
+    PENDING_SOURCE_LABEL.value = null;
+    RECENTS.value = [];
+    vi.restoreAllMocks();
+  });
+
+  it('renders nothing when closed', async () => {
+    render(<ProjectsView onSubmit={() => {}} onCancel={() => {}} onClose={() => {}} />, container);
+    await flush();
+    expect(container.querySelector('.projects-view')).toBeNull();
+  });
+
+  it('renders the new-project form when open and idle', async () => {
+    openProjectsView({ dismissible: true });
+    render(<ProjectsView onSubmit={() => {}} onCancel={() => {}} onClose={() => {}} />, container);
+    await flush();
+    expect(container.querySelector('.new-project')).not.toBeNull();
+    expect(container.querySelector('.projects-view-progress')).toBeNull();
+  });
+
+  it('shows inline progress and hides the form/recents while a load is in flight', async () => {
+    openProjectsView({ dismissible: true });
+    RECENTS.value = [
+      { src: 'https://github.com/o/r', branch: 'main', label: 'o/r', lastOpenedAt: 1 },
+    ];
+    render(<ProjectsView onSubmit={() => {}} onCancel={() => {}} onClose={() => {}} />, container);
+    await flush();
+    expect(container.querySelector('.recents')).not.toBeNull();
+
+    SCAN_PROGRESS.value = { kind: SourceKind.Remote, label: 'o/r', phase: ScanPhase.CloneProgress };
+    PENDING_SOURCE_LABEL.value = 'o/r';
+    await flush();
+
+    // The "second load" surface is gone, not just disabled — nothing left to
+    // click into while the current load streams.
+    expect(container.querySelector('.new-project')).toBeNull();
+    expect(container.querySelector('.recents')).toBeNull();
+
+    const progress = container.querySelector('.projects-view-progress');
+    expect(progress).not.toBeNull();
+    expect(progress?.textContent).toContain('o/r');
+    expect(progress?.textContent).toMatch(/Cloning/i);
+    expect(container.querySelector('.loading-spinner')).not.toBeNull();
+  });
+
+  it('wires the Cancel button to onCancel', async () => {
+    openProjectsView({ dismissible: true });
+    const onCancel = vi.fn();
+    render(<ProjectsView onSubmit={() => {}} onCancel={onCancel} onClose={() => {}} />, container);
+    SCAN_PROGRESS.value = { kind: SourceKind.Local, label: 'proj', phase: null };
+    await flush();
+
+    const cancelBtn = Array.from(container.querySelectorAll('button')).find(
+      (b) => b.textContent === 'Cancel'
+    )!;
+    expect(cancelBtn).toBeTruthy();
+    cancelBtn.click();
+    expect(onCancel).toHaveBeenCalledOnce();
+  });
+
+  it('does not show a close button while loading, even when dismissible', async () => {
+    openProjectsView({ dismissible: true });
+    render(<ProjectsView onSubmit={() => {}} onCancel={() => {}} onClose={() => {}} />, container);
+    SCAN_PROGRESS.value = { kind: SourceKind.Local, label: 'proj', phase: null };
+    await flush();
+    expect(container.querySelector('[aria-label="Close"]')).toBeNull();
+  });
+
+  it('drops a stale error banner once a new load starts', async () => {
+    openProjectsView({ dismissible: true, error: 'repository not found' });
+    render(<ProjectsView onSubmit={() => {}} onCancel={() => {}} onClose={() => {}} />, container);
+    await flush();
+    expect(container.textContent).toMatch(/repository not found/i);
+
+    SCAN_PROGRESS.value = { kind: SourceKind.Remote, label: 'o/r', phase: null };
+    await flush();
+    expect(container.textContent).not.toMatch(/repository not found/i);
+  });
+
+  it('closes on Escape only when dismissible and not loading', async () => {
+    openProjectsView({ dismissible: true });
+    const onClose = vi.fn();
+    render(<ProjectsView onSubmit={() => {}} onCancel={() => {}} onClose={onClose} />, container);
+    await flush();
+
+    // The Escape listener rebinds via a useEffect keyed on `loading`; that
+    // commit needs an rAF-scale tick in jsdom (see _helpers/preact.ts), not
+    // just a microtask flush, so drainAsync rather than flush() here.
+    SCAN_PROGRESS.value = { kind: SourceKind.Local, label: 'proj', phase: null };
+    await drainAsync();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(onClose).not.toHaveBeenCalled();
+
+    SCAN_PROGRESS.value = null;
+    await drainAsync();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('reflects the PROJECTS_VIEW signal directly', () => {
+    expect(PROJECTS_VIEW.value.visible).toBe(false);
+  });
+});

From 3a8064c311b266c43c2e014376c5665f7499d3d4 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 18:44:51 -0400
Subject: [PATCH 11/12] chore(app): remove old SourcePicker view (#77)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Delete the dead SourcePicker view/test now that ProjectsView fully
replaces it, and clean up stale comment references. Also recover the
.modal-backdrop/.modal-card/.modal-header/.modal-body chrome that
DebugModal, ShortcutsModal, and LoadingOverlay depended on from
SourcePicker.css into a new shared styles/modal.css — SourcePicker.tsx
was already unmounted so that CSS was dead weight, silently leaving
those three surfaces unstyled.

Includes incidental just fmt/prettier fixes for pre-existing drift in
api/tests/test_server_branches.py and three app test files, needed to
get just lint clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 api/tests/test_server_branches.py             |   4 +-
 app/src/hooks/useManifestSource.ts            |   8 +-
 app/src/state/stores/serverConfig.ts          |   2 +-
 app/src/styles/index.css                      |   1 +
 app/src/styles/modal.css                      |  49 +++
 app/src/views/DebugModal/DebugModal.tsx       |   7 +-
 app/src/views/ProjectsView/ProjectsView.tsx   |   2 +-
 app/src/views/ProjectsView/RecentsList.css    |   6 +-
 .../views/ShortcutsModal/ShortcutsModal.tsx   |   5 +-
 app/src/views/SourcePicker/SourcePicker.css   | 248 ------------
 app/src/views/SourcePicker/SourcePicker.tsx   | 365 -----------------
 app/tests/api/branches.test.ts                |  22 +-
 app/tests/api/manifest.test.ts                |   4 +-
 .../city/interaction/inputHandlers.test.ts    |   2 +-
 .../views/ProjectsView/RecentsList.test.tsx   |  12 +-
 app/tests/views/sourcePicker.test.tsx         | 375 ------------------
 16 files changed, 96 insertions(+), 1016 deletions(-)
 create mode 100644 app/src/styles/modal.css
 delete mode 100644 app/src/views/SourcePicker/SourcePicker.css
 delete mode 100644 app/src/views/SourcePicker/SourcePicker.tsx
 delete mode 100644 app/tests/views/sourcePicker.test.tsx

diff --git a/api/tests/test_server_branches.py b/api/tests/test_server_branches.py
index a5d92717..604857d7 100644
--- a/api/tests/test_server_branches.py
+++ b/api/tests/test_server_branches.py
@@ -18,7 +18,9 @@ def client(tmp_path: Path) -> TestClient:
     return TestClient(create_app(static_dir=static))
 
 
-def test_branches_happy_path(client: TestClient, make_fake_remote, tmp_path: Path) -> None:
+def test_branches_happy_path(
+    client: TestClient, make_fake_remote, tmp_path: Path
+) -> None:
     bare, _ = make_fake_remote(tmp_path)
     r = client.get("/api/branches", params={"src": f"file://{bare}"})
     assert r.status_code == 200
diff --git a/app/src/hooks/useManifestSource.ts b/app/src/hooks/useManifestSource.ts
index 018d13d1..dae1910c 100644
--- a/app/src/hooks/useManifestSource.ts
+++ b/app/src/hooks/useManifestSource.ts
@@ -301,12 +301,12 @@ function setupLiveUpdates(): () => void {
  * Boot the manifest FETCH pipeline on mount: stream the initial manifest from
  * ?src into MANIFEST, fetch the server config, and start live updates.
  * Scene-free — the render layer (the City component) consumes MANIFEST and paints the
- * scene. UI-free too: it never opens/closes the source picker; on a load failure
+ * scene. UI-free too: it never opens/closes ProjectsView; on a load failure
  * (boot or submit) it WRITES the canonical SOURCE_ERROR signal and App reacts to
- * coordinate the picker. A user-initiated cancel (`cancelLoad`) aborts the
+ * coordinate ProjectsView. A user-initiated cancel (`cancelLoad`) aborts the
  * in-flight stream but is NOT surfaced as a load failure — no SOURCE_ERROR write.
- * RETURNS the source-picker submit handler and a cancel handler so App can pass
- * them down to <SourcePicker>/the loading overlay as props (no global
+ * RETURNS the submit handler and a cancel handler so App can pass
+ * them down to <ProjectsView>/the loading overlay as props (no global
  * register/invoke channel).
  */
 export function useManifestSource(): {
diff --git a/app/src/state/stores/serverConfig.ts b/app/src/state/stores/serverConfig.ts
index 65b41433..11cd4e0f 100644
--- a/app/src/state/stores/serverConfig.ts
+++ b/app/src/state/stores/serverConfig.ts
@@ -1,6 +1,6 @@
 // state/stores/serverConfig.ts — Runtime signal holding server capabilities
 // fetched once during app boot. Written by useManifestSource after getServerConfig().
-// Read by SourcePicker to decide whether to show the local-repos tab.
+// Read by ProjectsView to decide whether to show the local-repos tab.
 
 import { signal } from '@preact/signals';
 
diff --git a/app/src/styles/index.css b/app/src/styles/index.css
index 7cb14e37..37d92be5 100644
--- a/app/src/styles/index.css
+++ b/app/src/styles/index.css
@@ -9,6 +9,7 @@
 @import './panes.css';
 @import './rows.css';
 @import './cards.css';
+@import './modal.css';
 @import './surfaces.css';
 @import './forms.css';
 @import './buttons.css';
diff --git a/app/src/styles/modal.css b/app/src/styles/modal.css
new file mode 100644
index 00000000..eb1db138
--- /dev/null
+++ b/app/src/styles/modal.css
@@ -0,0 +1,49 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   LAYER-2 COMPONENTS — Modal chrome
+   ═══════════════════════════════════════════════════════════════════════════
+   Shared backdrop + card layout for DebugModal, ShortcutsModal, and
+   LoadingOverlay (ProjectsView is a full-viewport surface, not a modal, so it
+   doesn't use these). Surface fill/radius/shadow comes from .card-overlay;
+   this file only adds backdrop positioning + the header/body column layout.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.modal-backdrop,
+.loading-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--cc-bg-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-card {
+  width: 560px;
+  max-width: 92vw;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: inherit;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--cc-space-5) var(--cc-space-6);
+  border-bottom: 1px solid var(--cc-border-subtle);
+  font-weight: var(--cc-fw-semibold);
+}
+/* Modal-close × is a .btn-icon + .btn-icon--lg; this hover uses a stronger
+   overlay than other icon buttons, with no color change. */
+.modal-header .btn-icon:not(:disabled):hover {
+  background: var(--cc-overlay-bg-strong);
+}
+
+.modal-body {
+  padding: var(--cc-space-5) var(--cc-space-6);
+  overflow-y: auto;
+  flex: 1;
+}
diff --git a/app/src/views/DebugModal/DebugModal.tsx b/app/src/views/DebugModal/DebugModal.tsx
index d83d5f52..f3043fd6 100644
--- a/app/src/views/DebugModal/DebugModal.tsx
+++ b/app/src/views/DebugModal/DebugModal.tsx
@@ -2,10 +2,9 @@
 // the header's flag-gated bug icon (see utils/debugMode). Signal-driven like
 // ShortcutsModal: App mounts one instance unconditionally, it reads
 // DEBUG_OPEN directly and renders null when closed. Chrome
-// (.modal-backdrop/.modal-card/.modal-header/.modal-body) reuses the classes
-// defined in views/SourcePicker/SourcePicker.css — that component is always
-// mounted, so the rules are already global; this file only adds the
-// action-button layout.
+// (.modal-backdrop/.modal-card/.modal-header/.modal-body) reuses the global
+// classes defined in styles/modal.css; this file only adds the action-button
+// layout.
 
 import './DebugModal.css';
 import { useEffect, useRef } from 'preact/hooks';
diff --git a/app/src/views/ProjectsView/ProjectsView.tsx b/app/src/views/ProjectsView/ProjectsView.tsx
index 907a2e26..b338c31c 100644
--- a/app/src/views/ProjectsView/ProjectsView.tsx
+++ b/app/src/views/ProjectsView/ProjectsView.tsx
@@ -1,7 +1,7 @@
 // views/ProjectsView/ProjectsView.tsx — full-viewport project switcher. Reads
 // PROJECTS_VIEW + SERVER_CONFIG for open-state/prefill; App owns
 // onSubmit/onCancel/onClose. Renders null when closed so the form/list state
-// resets on next open. Replaces the old modal SourcePicker.
+// resets on next open.
 //
 // This view is the loading surface for every switch it initiates (design
 // invariant): while SCAN_PROGRESS is non-null it renders inline progress in
diff --git a/app/src/views/ProjectsView/RecentsList.css b/app/src/views/ProjectsView/RecentsList.css
index aadd8087..97d1ab73 100644
--- a/app/src/views/ProjectsView/RecentsList.css
+++ b/app/src/views/ProjectsView/RecentsList.css
@@ -1,8 +1,6 @@
 /* ── Recents hero ────────────────────────────────────────────────────────
-   Filter box + keyboard-navigable list. Rules ported from the old
-   SourcePicker's .recents-list block; renamed to the new recents-forward
-   structure (filter input, .recent-row--highlighted keyboard cursor,
-   inline remove-confirm). */
+   Filter box + keyboard-navigable list (filter input,
+   .recent-row--highlighted keyboard cursor, inline remove-confirm). */
 
 .recents {
   margin-top: var(--cc-space-7);
diff --git a/app/src/views/ShortcutsModal/ShortcutsModal.tsx b/app/src/views/ShortcutsModal/ShortcutsModal.tsx
index 6f1c3566..a508f995 100644
--- a/app/src/views/ShortcutsModal/ShortcutsModal.tsx
+++ b/app/src/views/ShortcutsModal/ShortcutsModal.tsx
@@ -2,9 +2,8 @@
 // and mouse shortcuts, opened from the header's `?` icon. Signal-driven like
 // LoadingOverlay: App mounts one instance unconditionally, it reads
 // SHORTCUTS_OPEN directly and renders null when closed (no props). Chrome
-// (.modal-backdrop/.modal-card/.modal-header/.modal-body) reuses the classes
-// defined in views/SourcePicker/SourcePicker.css — that component is always
-// mounted, so the rules are already global; this file only adds the
+// (.modal-backdrop/.modal-card/.modal-header/.modal-body) reuses the global
+// classes defined in styles/modal.css; this file only adds the
 // shortcuts-list layout.
 
 import './ShortcutsModal.css';
diff --git a/app/src/views/SourcePicker/SourcePicker.css b/app/src/views/SourcePicker/SourcePicker.css
deleted file mode 100644
index e83b2485..00000000
--- a/app/src/views/SourcePicker/SourcePicker.css
+++ /dev/null
@@ -1,248 +0,0 @@
-/* ── Source picker ── */
-
-.modal-field input,
-.modal-field select {
-  background-color: var(--cc-bg-chrome);
-  border: 1px solid var(--cc-border-input);
-  border-radius: var(--cc-radius-sm);
-  color: var(--cc-text-primary);
-  font: inherit;
-  font-size: var(--cc-font-lg);
-  padding: var(--cc-space-2) var(--cc-space-4);
-  outline: none;
-}
-.modal-field input::placeholder {
-  color: var(--cc-text-faint);
-}
-.modal-field input:focus,
-.modal-field select:focus {
-  border-color: var(--cc-accent-border);
-}
-
-/* Modal-close uses a stronger hover overlay than other btn-icons. */
-.modal-header .btn-icon:not(:disabled):hover {
-  background: var(--cc-overlay-bg-strong);
-}
-
-/* ── Source picker modal + loading overlay ───────────────────────────────
-   Radius convention (per docs/ui-styleguide-audit.md §6 Inconsistency 3):
-   outer .modal-card uses --cc-radius-lg; every interactive child (close button,
-   tabs, input, error, submit button) uses --cc-radius-md. Keep new modal
-   children at --cc-radius-md. */
-
-.modal-backdrop,
-.loading-backdrop {
-  position: fixed;
-  inset: 0;
-  background: var(--cc-bg-backdrop);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-#source-picker-root,
-#loading-overlay-root {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
-/* Surface (bg + radius + shadow + color) from .card-overlay; this adds the
-   modal's own size + column layout. */
-.modal-card {
-  width: 560px;
-  max-width: 92vw;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  font-family: inherit;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--cc-space-5) var(--cc-space-6);
-  border-bottom: 1px solid var(--cc-border-subtle);
-  font-weight: var(--cc-fw-semibold);
-}
-
-/* Modal-close × is a .btn-icon + .btn-icon--lg (button selector + data-action).
-   The hover override (stronger overlay, no color change) lives near the
-   icon-button component definition: .modal-header .btn-icon:not(:disabled):hover. */
-
-.modal-body {
-  padding: var(--cc-space-5) var(--cc-space-6);
-  overflow-y: auto;
-  flex: 1;
-}
-
-.modal-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cc-space-3);
-  margin-bottom: var(--cc-space-6);
-}
-.modal-field label {
-  font-size: var(--cc-font-lg);
-  color: var(--cc-text-muted);
-}
-/* Checkbox labels wrap a checkbox + text on one line — flex-center
-   so the box sits on the text baseline instead of riding above it. */
-.modal-field label:has(> input[type='checkbox']) {
-  display: flex;
-  align-items: center;
-  gap: var(--cc-space-2);
-}
-/* Visual style consolidated in the .modal-field input rule near the top
-   of the file (next to .form-input). */
-
-/* Surface (bg + border + radius + padding) from .card-error; this adds the
-   error text color + spacing below. */
-.modal-error {
-  color: var(--cc-error-light);
-  margin-bottom: var(--cc-space-6);
-  font-size: var(--cc-font-lg);
-}
-
-/* Inline notice for a non-blocking advisory state (e.g. "local repos
-   are disabled"). Quieter than .modal-error: subtle amber background
-   tint, no outline border, body text uses the normal high-contrast
-   color so it's readable. The amber accent lives in the title + link. */
-.modal-warning {
-  background: var(--cc-warning-bg);
-  color: var(--cc-text-secondary);
-  padding: var(--cc-space-4) var(--cc-space-5);
-  border-radius: var(--cc-radius-md);
-  margin: var(--cc-space-3) 0 var(--cc-space-6);
-  font-size: var(--cc-font-lg);
-  line-height: 1.5;
-}
-.modal-warning strong {
-  display: block;
-  margin-bottom: var(--cc-space-2);
-  font-weight: var(--cc-fw-semibold);
-  color: var(--cc-warning);
-}
-.modal-warning p {
-  margin: var(--cc-space-2) 0;
-}
-.modal-warning code {
-  background: rgba(255, 255, 255, 0.08);
-  padding: 0 var(--cc-space-2);
-  border-radius: var(--cc-radius-sm);
-  font-size: var(--cc-font-md);
-  color: var(--cc-text-primary);
-}
-.modal-warning a {
-  color: var(--cc-warning);
-  text-decoration: underline;
-}
-
-.modal-actions {
-  display: flex;
-  margin-top: var(--cc-space-3);
-}
-.modal-actions button {
-  /* Primary action stretches the full row width in the modal. */
-  flex: 1 1 auto;
-}
-
-.recents-list {
-  margin-top: var(--cc-space-7);
-  border-top: 1px solid var(--cc-border-subtle);
-  padding-top: var(--cc-space-5);
-}
-/* Typography in .text-label. */
-.recents-list h3 {
-  margin: 0 0 var(--cc-space-4);
-}
-/* Each recent project is a .recent-item row: a .recent-row click target
-   that opens the project, plus a sibling .btn-icon that removes it.
-   Keeping them as siblings (not parent/child) means the row's hover
-   highlight has symmetric left/right padding, and the remove button has
-   its own independent hit area outside the highlighted region. */
-.recent-item {
-  display: flex;
-  align-items: center;
-  gap: var(--cc-space-2);
-}
-/* Recent button — composes the .row base for the flex/cursor shell; adds the
-   recents-specific size (looser gap, symmetric padding, medium radius) plus the
-   <button> reset and the flex-fill within .recent-item. */
-.recent-row {
-  flex: 1 1 auto;
-  min-width: 0;
-  appearance: none;
-  background: none;
-  border: none;
-  text-align: left;
-  color: inherit;
-  font: inherit;
-  gap: var(--cc-space-5);
-  padding: var(--cc-space-3) var(--cc-space-4);
-  border-radius: var(--cc-radius-md); /* base row radius is sm */
-}
-.recent-row:hover {
-  background: var(--cc-overlay-bg); /* a touch stronger than the base soft hover */
-}
-.recent-row-body {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.recent-row .recent-label {
-  font-weight: var(--cc-fw-medium);
-}
-.recent-row .recent-sub {
-  font-size: var(--cc-font-md);
-  color: var(--cc-text-muted);
-}
-
-.recent-row--active {
-  background: var(--cc-accent-bg-soft);
-  cursor: default;
-}
-.recent-row--active:hover {
-  background: var(--cc-accent-bg);
-}
-
-.recent-row--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-.recent-row--disabled:hover {
-  /* Suppress the hover affordance — the row is inert. */
-  background: transparent;
-}
-
-/* Destructive trash button next to each recent — red icon at rest and
-   on hover, with a red-tinted hover background. Vertical padding gives
-   the icon breathing room and a generous vertical click target. */
-.recent-item .btn-icon[data-action='recent-remove'] {
-  padding: var(--cc-space-4) var(--cc-space-2);
-  color: var(--cc-error);
-}
-.recent-item .btn-icon[data-action='recent-remove']:hover {
-  color: var(--cc-error-light);
-  background: var(--cc-error-bg);
-}
-.recent-row-badge {
-  margin-left: auto;
-  font-size: var(--cc-font-sm);
-  font-weight: var(--cc-fw-semibold);
-  letter-spacing: var(--cc-track-label);
-  color: var(--cc-accent);
-  background: var(--cc-accent-bg);
-  border: 1px solid var(--cc-accent-border);
-  border-radius: var(--cc-radius-lg);
-  padding: var(--cc-space-1) var(--cc-space-3);
-  white-space: nowrap;
-}
-
-.modal-field-help {
-  font-size: var(--cc-font-md);
-  color: var(--cc-text-muted); /* was 0.45 (3.82:1 → now 5.70:1, WCAG AA) */
-  margin-top: var(--cc-space-2);
-}
diff --git a/app/src/views/SourcePicker/SourcePicker.tsx b/app/src/views/SourcePicker/SourcePicker.tsx
deleted file mode 100644
index d4c1ba81..00000000
--- a/app/src/views/SourcePicker/SourcePicker.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-// views/SourcePicker.tsx — Modal for picking the active source (local path or
-// git URL). Owns its own DOM, mounted into #source-picker-root. Recents
-// are pulled from state/stores/source.ts each time the modal renders.
-//
-// Preact component: SourcePicker (signal-driven).
-
-import './SourcePicker.css';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import type { Signal } from '@preact/signals';
-import { listRecents, removeRecent } from '@/state/stores/source';
-import { clearManifestCache } from '@/api/manifest';
-import { srcKind, SourceKind } from '@/utils/sources';
-import { URL_PARAMS } from '@/constants/urlParams';
-import { Folder, Trash2, TriangleAlert, X } from 'lucide-preact';
-import { PROJECTS_VIEW, type SourcePayload } from '@/state/stores/ui';
-import { SERVER_CONFIG } from '@/state/stores/serverConfig';
-
-// ── Hosting-site SVG icons ───────────────────────────────────────────────────
-
-import { HostingIcon } from '@/components/HostingIcon';
-import { PaneTabs } from '@/components/PaneTabs/PaneTabs';
-
-// ── Public types ────────────────────────────────────────────────────────────
-
-/** Which tab of the picker is active. Matches NodeKind-style enum convention. */
-export enum SourceTab {
-  Remote = 'remote',
-  Local = 'local',
-}
-
-/** Infer which tab a source string belongs to: git-like URLs / SCP syntax
- *  → Remote, anything else (filesystem paths) → Local. UX-only tab defaulting
- *  and recents icon selection — the backend is the source of truth for what
- *  a source actually is. */
-export function inferSourceTab(src: string): SourceTab {
-  return srcKind(src) === SourceKind.Remote ? SourceTab.Remote : SourceTab.Local;
-}
-
-// SourcePayload / OpenOpts (the picker's submit + open contracts) live in
-// state/stores/ui — see the import above — so state stays view-independent.
-
-// ── Preact component state shape ────────────────────────────────────────────
-
-export interface SourcePickerState {
-  dismissible: boolean;
-  activeTab: SourceTab;
-  prefillSrc: string;
-  prefillBranch: string;
-  error: string | null;
-  allowLocalRepos: boolean;
-}
-
-export interface SourcePickerModalProps {
-  state: Signal<SourcePickerState>;
-  onSubmit: (s: SourcePayload) => void;
-  onClose: () => void;
-}
-
-// ── Preact component ────────────────────────────────────────────────────────
-
-export function SourcePickerModal({ state, onSubmit, onClose }: SourcePickerModalProps) {
-  const s = state.value;
-
-  // This component is only mounted while the picker is visible — the parent
-  // (<SourcePicker> / the signal wrapper) renders null when closed, which
-  // unmounts us and resets these useState inputs on the next open. So there is
-  // no `open` flag and no conditional early return: hooks always run.
-  const [activeTab, setActiveTab] = useState<SourceTab>(s.activeTab);
-  const [urlValue, setUrlValue] = useState(s.activeTab === SourceTab.Remote ? s.prefillSrc : '');
-  const [branchValue, setBranchValue] = useState(s.prefillBranch);
-  const [pathValue, setPathValue] = useState(s.activeTab === SourceTab.Local ? s.prefillSrc : '');
-  const [skipCache, setSkipCache] = useState(false);
-  const urlInputRef = useRef<HTMLInputElement>(null);
-  const pathInputRef = useRef<HTMLInputElement>(null);
-
-  // Escape dismisses the modal when it's dismissible.
-  useEffect(() => {
-    if (!s.dismissible) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [s.dismissible, onClose]);
-
-  // Focus (and select) the active tab's input on mount and on tab switch, so
-  // the user can type/paste immediately.
-  useEffect(() => {
-    const el = activeTab === SourceTab.Local ? pathInputRef.current : urlInputRef.current;
-    el?.focus();
-    el?.select();
-  }, [activeTab]);
-
-  const urlParams = new URLSearchParams(window.location.search);
-  const currentSrc = urlParams.get(URL_PARAMS.SRC) ?? '';
-  const currentBranch = urlParams.get(URL_PARAMS.BRANCH) ?? '';
-  const recents = listRecents();
-
-  function handleSubmit() {
-    const src = activeTab === SourceTab.Local ? pathValue.trim() : urlValue.trim();
-    if (!src) return;
-    const branch = activeTab === SourceTab.Remote ? branchValue.trim() || undefined : undefined;
-    onSubmit({ src, branch, skipCache: skipCache || undefined });
-  }
-
-  function handleRecentClick(src: string, branch: string | undefined) {
-    onSubmit({ src, branch });
-  }
-
-  function handleRecentRemove(src: string, branch: string | undefined) {
-    const branchSuffix = branch ? ` (${branch})` : '';
-    const confirmed = window.confirm(
-      `Remove "${src}"${branchSuffix} from recents?\n\n` +
-        `This also clears its scan cache — re-adding it will trigger ` +
-        `a fresh scan.`
-    );
-    if (!confirmed) return;
-    removeRecent(src, branch);
-    clearManifestCache(src, branch);
-    // No manual re-render needed: removeRecent mutates the RECENTS signal, which
-    // this component reads via listRecents(), so the list re-renders on its own.
-  }
-
-  const showFormFields = !(!s.allowLocalRepos && activeTab === SourceTab.Local);
-
-  return (
-    <div
-      class="modal-backdrop"
-      onClick={(e) => {
-        if (s.dismissible && e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        class="modal-card card-overlay"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Open project"
-      >
-        <div class="modal-header surface-chrome">
-          <span>Open project</span>
-          {s.dismissible && (
-            <button
-              class="btn-icon btn-icon--lg"
-              data-action="close"
-              aria-label="Close"
-              onClick={onClose}
-            >
-              <X class="lucide-icon" />
-            </button>
-          )}
-        </div>
-        <div class="modal-body">
-          {s.error && <div class="modal-error card-error">{s.error}</div>}
-          <PaneTabs
-            class="pane-tabs--modal"
-            tabs={[
-              { id: SourceTab.Remote, label: 'Git URL' },
-              { id: SourceTab.Local, label: 'Local path' },
-            ]}
-            active={activeTab}
-            onSelect={(id) => setActiveTab(id as SourceTab)}
-          />
-
-          <div
-            data-pane="remote"
-            style={{ display: activeTab === SourceTab.Remote ? 'block' : 'none' }}
-          >
-            <div class="modal-field">
-              <label>URL</label>
-              <input
-                ref={urlInputRef}
-                data-field="url"
-                type="text"
-                autoComplete="off"
-                spellcheck={false}
-                value={urlValue}
-                onInput={(e) => setUrlValue((e.target as HTMLInputElement).value)}
-              />
-            </div>
-            <div class="modal-field">
-              <label>Branch</label>
-              <input
-                data-field="branch"
-                type="text"
-                autoComplete="off"
-                spellcheck={false}
-                placeholder="default"
-                value={branchValue}
-                onInput={(e) => setBranchValue((e.target as HTMLInputElement).value)}
-              />
-            </div>
-          </div>
-
-          <div
-            data-pane="local"
-            style={{ display: activeTab === SourceTab.Local ? 'block' : 'none' }}
-          >
-            {s.allowLocalRepos ? (
-              <div class="modal-field">
-                <label>Path</label>
-                <input
-                  ref={pathInputRef}
-                  data-field="path"
-                  type="text"
-                  autoComplete="off"
-                  spellcheck={false}
-                  value={pathValue}
-                  onInput={(e) => setPathValue((e.target as HTMLInputElement).value)}
-                />
-              </div>
-            ) : (
-              <div class="modal-warning">
-                <strong>Local repositories are disabled</strong>
-                <p>
-                  codecity is running without <code>CODECITY_ALLOW_LOCAL_REPOS=1</code>. Restart the
-                  container with the env var set and a read-only mount of the directory you want to
-                  load.
-                </p>
-                <p>
-                  <a
-                    href="https://github.com/thalida/codecity#local-directories"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    How to enable local repositories →
-                  </a>
-                </p>
-              </div>
-            )}
-          </div>
-
-          <div data-form-fields style={{ display: showFormFields ? '' : 'none' }}>
-            <div class="modal-field">
-              <label>
-                <input
-                  data-field="skip_cache"
-                  type="checkbox"
-                  checked={skipCache}
-                  onChange={(e) => setSkipCache((e.target as HTMLInputElement).checked)}
-                />{' '}
-                Skip cache (fresh scan)
-              </label>
-            </div>
-            <div class="modal-actions">
-              <button type="button" class="submit btn-primary" onClick={handleSubmit}>
-                Open project
-              </button>
-            </div>
-          </div>
-
-          {recents.length > 0 && (
-            <div class="recents-list">
-              <h3 class="text-label">Recent</h3>
-              {recents.map((r) => {
-                const isActive = r.src === currentSrc && (r.branch ?? '') === (currentBranch ?? '');
-                const isLocal = inferSourceTab(r.src) === SourceTab.Local;
-                const isDisabled = isLocal && !s.allowLocalRepos;
-                const disabledTitle = isDisabled
-                  ? 'Local repos are disabled. Restart codecity with CODECITY_ALLOW_LOCAL_REPOS=1 to load this.'
-                  : '';
-                const rowClasses = [
-                  'row recent-row',
-                  isActive && 'recent-row--active',
-                  isDisabled && 'recent-row--disabled',
-                ]
-                  .filter(Boolean)
-                  .join(' ');
-                const subParts = [r.src];
-                if (r.branch) subParts.push(r.branch);
-                return (
-                  <div key={`${r.src}:${r.branch ?? ''}`} class="recent-item">
-                    <button
-                      type="button"
-                      class={rowClasses}
-                      title={disabledTitle || undefined}
-                      data-src={r.src}
-                      data-branch={r.branch ?? ''}
-                      data-disabled={isDisabled ? '1' : ''}
-                      onClick={() => {
-                        if (isActive || isDisabled) return;
-                        handleRecentClick(r.src, r.branch);
-                      }}
-                    >
-                      <span class="recent-icon">
-                        {isDisabled ? (
-                          <TriangleAlert class="lucide-icon" />
-                        ) : isLocal ? (
-                          <Folder class="lucide-icon" />
-                        ) : (
-                          <HostingIcon src={r.src} />
-                        )}
-                      </span>
-                      <div class="recent-row-body">
-                        <div class="recent-label">{r.label}</div>
-                        <div class="recent-sub">{subParts.join(' · ')}</div>
-                      </div>
-                      {isActive && <span class="recent-row-badge">Active</span>}
-                    </button>
-                    <button
-                      type="button"
-                      class="btn-icon btn-icon--text"
-                      data-action="recent-remove"
-                      aria-label="Remove from recents"
-                      onClick={() => handleRecentRemove(r.src, r.branch)}
-                    >
-                      <Trash2 class="lucide-icon" />
-                    </button>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Signal-driven top-level component ──────────────────────────────────────
-// Reads PROJECTS_VIEW + SERVER_CONFIG directly for open-state/prefill, but takes
-// onSubmit/onClose via props from App (App owns the stateful submit handler from
-// useManifestSource and the pure closeProjectsView store action). Returns null
-// when the picker is closed so SourcePickerModal fully unmounts — its
-// useState-backed form inputs reset on the next open.
-
-export interface SourcePickerProps {
-  onSubmit: (payload: SourcePayload) => void;
-  onClose: () => void;
-}
-
-export function SourcePicker({ onSubmit, onClose }: SourcePickerProps) {
-  const sp = PROJECTS_VIEW.value;
-  if (!sp.visible) return null;
-
-  const serverCfg = SERVER_CONFIG.value;
-  const opts = sp.opts ?? {};
-  const prefill = opts.prefill;
-  const prefillSrc = prefill?.src ?? '';
-
-  const pickerState: SourcePickerState = {
-    dismissible: opts.dismissible ?? false,
-    // Only default to the Local tab when local repos are enabled — otherwise a
-    // local-path prefill would land on the disabled-Local dead-end view.
-    activeTab:
-      prefillSrc && serverCfg.allowLocalRepos ? inferSourceTab(prefillSrc) : SourceTab.Remote,
-    prefillSrc,
-    prefillBranch: prefill?.branch ?? '',
-    error: opts.error ?? null,
-    allowLocalRepos: serverCfg.allowLocalRepos,
-  };
-
-  // Wrap pickerState in a minimal signal-like object so SourcePickerModal's
-  // `state.value` read works. The force-re-render write (on recent-remove) is
-  // no longer needed: removeRecent writes to RECENTS signal which Preact tracks.
-  const stateSignal = {
-    get value() {
-      return pickerState;
-    },
-    set value(_: SourcePickerState) {
-      /* re-renders via RECENTS signal */
-    },
-  } as Signal<SourcePickerState>;
-
-  return <SourcePickerModal state={stateSignal} onSubmit={onSubmit} onClose={onClose} />;
-}
diff --git a/app/tests/api/branches.test.ts b/app/tests/api/branches.test.ts
index a91f8d1c..19cd309e 100644
--- a/app/tests/api/branches.test.ts
+++ b/app/tests/api/branches.test.ts
@@ -5,18 +5,28 @@ afterEach(() => vi.restoreAllMocks());
 
 describe('fetchBranches', () => {
   it('returns branches + default on ok', async () => {
-    vi.stubGlobal('fetch', vi.fn(async () =>
-      new Response(JSON.stringify({ branches: ['main', 'dev'], default: 'main' }), { status: 200 })
-    ));
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(
+        async () =>
+          new Response(JSON.stringify({ branches: ['main', 'dev'], default: 'main' }), {
+            status: 200,
+          })
+      )
+    );
     const r = await fetchBranches('https://github.com/o/r');
     expect(r.branches).toEqual(['main', 'dev']);
     expect(r.default).toBe('main');
   });
 
   it('rejects with the server error on non-2xx', async () => {
-    vi.stubGlobal('fetch', vi.fn(async () =>
-      new Response(JSON.stringify({ detail: 'repository not found' }), { status: 404 })
-    ));
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(
+        async () =>
+          new Response(JSON.stringify({ detail: 'repository not found' }), { status: 404 })
+      )
+    );
     await expect(fetchBranches('https://github.com/o/nope')).rejects.toThrow(/not found/i);
   });
 });
diff --git a/app/tests/api/manifest.test.ts b/app/tests/api/manifest.test.ts
index a539b4e6..27d9888f 100644
--- a/app/tests/api/manifest.test.ts
+++ b/app/tests/api/manifest.test.ts
@@ -38,7 +38,9 @@ const fakeManifest = { root: '/r', tree: { type: 'directory' } };
 describe('streamManifest (EventSource)', () => {
   it('maps named SSE events to ScanStreamEvents in order and stops after manifest-complete', async () => {
     const { ctor, last } = makeES();
-    const it = streamManifest('/api/manifest?src=x', { EventSourceImpl: ctor })[Symbol.asyncIterator]();
+    const it = streamManifest('/api/manifest?src=x', { EventSourceImpl: ctor })[
+      Symbol.asyncIterator
+    ]();
     const es = last();
     es.emit('scan-progress', JSON.stringify({ display_root: 'x', files_scanned: 3 }));
     es.emit('manifest-partial', JSON.stringify({ manifest: fakeManifest }));
diff --git a/app/tests/city/interaction/inputHandlers.test.ts b/app/tests/city/interaction/inputHandlers.test.ts
index 29aebf08..181326b7 100644
--- a/app/tests/city/interaction/inputHandlers.test.ts
+++ b/app/tests/city/interaction/inputHandlers.test.ts
@@ -1,6 +1,6 @@
 // city/interaction/inputHandlers.test.ts — the scene's document-level keydown
 // handler must not fire scene keybindings (Esc-deselect, R, F) while a modal
-// (Shortcuts/Debug/SourcePicker) is open. The handler bails out early when the
+// (Shortcuts/Debug/ProjectsView) is open. The handler bails out early when the
 // MODAL_OPEN signal is set — see the "modal owns keyboard input" guard in
 // inputHandlers.ts, right after the text-input early-return.
 //
diff --git a/app/tests/views/ProjectsView/RecentsList.test.tsx b/app/tests/views/ProjectsView/RecentsList.test.tsx
index 8c250577..e28cbdaa 100644
--- a/app/tests/views/ProjectsView/RecentsList.test.tsx
+++ b/app/tests/views/ProjectsView/RecentsList.test.tsx
@@ -16,7 +16,13 @@ describe('RecentsList', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
     RECENTS.value = [
-      { src: 'https://github.com/o/alpha', branch: 'main', branchIsDefault: true, label: 'o/alpha', lastOpenedAt: 2 },
+      {
+        src: 'https://github.com/o/alpha',
+        branch: 'main',
+        branchIsDefault: true,
+        label: 'o/alpha',
+        lastOpenedAt: 2,
+      },
       { src: 'https://github.com/o/beta', branch: 'dev', label: 'o/beta', lastOpenedAt: 1 },
     ];
     CURRENT_SOURCE.value = { src: 'https://github.com/o/alpha', branch: 'main' };
@@ -49,7 +55,9 @@ describe('RecentsList', () => {
     filterInput.dispatchEvent(new Event('input', { bubbles: true }));
     await flush();
 
-    const labels = Array.from(container.querySelectorAll('.recent-label')).map((el) => el.textContent);
+    const labels = Array.from(container.querySelectorAll('.recent-label')).map(
+      (el) => el.textContent
+    );
     expect(labels).not.toContain('o/alpha');
     expect(labels).toContain('o/beta');
   });
diff --git a/app/tests/views/sourcePicker.test.tsx b/app/tests/views/sourcePicker.test.tsx
deleted file mode 100644
index f16affc2..00000000
--- a/app/tests/views/sourcePicker.test.tsx
+++ /dev/null
@@ -1,375 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { render } from 'preact';
-import { act } from 'preact/test-utils';
-import { signal } from '@preact/signals';
-import { SourcePickerModal, SourceTab, inferSourceTab } from '@/views/SourcePicker/SourcePicker';
-import type { SourcePickerState } from '@/views/SourcePicker/SourcePicker';
-import type { SourcePayload, OpenOpts } from '@/state/stores/ui';
-import { pushRecent, RECENTS } from '@/state/stores/source';
-import { flush } from '../_helpers/preact';
-
-describe('SourcePicker', () => {
-  let container: HTMLDivElement;
-  let onSubmit: (s: SourcePayload) => void;
-  let onClose: () => void;
-  let state: ReturnType<typeof signal<SourcePickerState>>;
-  let allowLocalRepos = true;
-
-  // Mirrors the factory's createSourcePicker({ onSubmit, allowLocalRepos }):
-  // build a fresh state signal (closed) and render the component into a
-  // container. The factory mounted into #source-picker-root; the component
-  // takes a container we own here.
-  function createPicker(opts: { allowLocalRepos: boolean }): void {
-    allowLocalRepos = opts.allowLocalRepos;
-    // "Closed" = nothing mounted, mirroring the production wrapper which renders
-    // null when the picker isn't visible. open() mounts the component.
-    state = signal<SourcePickerState>({
-      dismissible: false,
-      activeTab: SourceTab.Remote,
-      prefillSrc: '',
-      prefillBranch: '',
-      error: null,
-      allowLocalRepos,
-    });
-  }
-
-  // Maps the factory's `.open(opts)` onto a mount. The component's form inputs
-  // are useState-backed and seeded on MOUNT from state, so to get fresh inputs
-  // each open() we unmount (render null) then mount fresh — mirroring the
-  // production wrapper, which renders null when the picker is closed.
-  async function open(opts: OpenOpts = {}): Promise<void> {
-    const prefillSrc = opts.prefill?.src ?? '';
-    // Tab derivation mirrors the factory's deriveTabFromPrefill: a prefill
-    // source picks its tab via inferSourceTab, BUT when local repos are
-    // disabled we never default to the Local tab.
-    let activeTab: SourceTab;
-    if (!prefillSrc) {
-      activeTab = SourceTab.Remote;
-    } else if (!allowLocalRepos) {
-      activeTab = SourceTab.Remote;
-    } else {
-      activeTab = inferSourceTab(prefillSrc);
-    }
-
-    // Unmount any prior render so useState re-initialises on re-open (mirrors
-    // the production wrapper returning null when closed), then mount fresh.
-    act(() => render(null, container));
-    await flush();
-    state.value = {
-      dismissible: opts.dismissible ?? false,
-      activeTab,
-      prefillSrc,
-      prefillBranch: opts.prefill?.branch ?? '',
-      error: opts.error ?? null,
-      allowLocalRepos,
-    };
-    act(() => {
-      render(<SourcePickerModal state={state} onSubmit={onSubmit} onClose={onClose} />, container);
-    });
-    await flush();
-  }
-
-  // PaneTabs renders `<button role="tab">` in the order tabs are passed:
-  // index 0 = Remote ("Git URL"), index 1 = Local ("Local path"). It exposes
-  // no data-* hooks, so address tabs by their PaneTabs position and read the
-  // active state off the contractual `aria-selected` attribute.
-  const TAB_INDEX: Record<SourceTab, number> = {
-    [SourceTab.Remote]: 0,
-    [SourceTab.Local]: 1,
-  };
-  function tabButton(tab: SourceTab): HTMLButtonElement {
-    const tabs = container.querySelectorAll('.pane-tab');
-    return tabs[TAB_INDEX[tab]] as HTMLButtonElement;
-  }
-  function isTabActive(tab: SourceTab): boolean {
-    return tabButton(tab).getAttribute('aria-selected') === 'true';
-  }
-
-  // Set a controlled input's value the way the component expects: write the
-  // DOM value then dispatch an `input` event so the onInput handler updates
-  // the backing useState. act() flushes that state update synchronously.
-  function setInput(sel: string, value: string): void {
-    const input = container.querySelector(sel) as HTMLInputElement;
-    input.value = value;
-    act(() => {
-      input.dispatchEvent(new Event('input', { bubbles: true }));
-    });
-  }
-
-  beforeEach(() => {
-    localStorage.clear();
-    // RECENTS persists at module load — reset in-memory value so each
-    // test starts from an empty list.
-    RECENTS.value = [];
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    history.replaceState(null, '', '/');
-    onSubmit = vi.fn();
-    onClose = vi.fn();
-  });
-
-  afterEach(() => {
-    render(null, container);
-    container.remove();
-  });
-
-  it('starts hidden', () => {
-    createPicker({ allowLocalRepos: true });
-    // Factory toggled root.style.display; the component returns null when
-    // closed, so "hidden" means nothing was rendered.
-    expect(container.querySelector('.modal-backdrop')).toBeNull();
-  });
-
-  it('open() renders the modal', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open();
-    expect(container.querySelector('.modal-backdrop')).not.toBeNull();
-    expect(container.textContent).toContain('Open project');
-  });
-
-  it('switches tabs', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open();
-    const gitTab = tabButton(SourceTab.Remote);
-    act(() => gitTab.click());
-    await flush();
-    expect(isTabActive(SourceTab.Remote)).toBe(true);
-    // Git URL input visible
-    expect(container.querySelector('[data-field="url"]')).toBeTruthy();
-    // Branch input visible
-    expect(container.querySelector('[data-field="branch"]')).toBeTruthy();
-  });
-
-  it('submit fires onSubmit with the typed src', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open();
-    // Default tab is "git"; switch to local before setting the path field.
-    act(() => tabButton(SourceTab.Local).click());
-    await flush();
-    setInput('[data-field="path"]', '/Users/foo/bar');
-    act(() => (container.querySelector('button.submit') as HTMLButtonElement).click());
-    // Full payload: handleSubmit always emits all three keys (undefined
-    // for absent inputs). Asserting the complete shape catches regressions
-    // where a future change accidentally starts including extra fields.
-    expect(onSubmit).toHaveBeenCalledWith({
-      src: '/Users/foo/bar',
-      branch: undefined,
-      skipCache: undefined,
-    });
-  });
-
-  it('git-tab submit includes branch', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open();
-    act(() => tabButton(SourceTab.Remote).click());
-    await flush();
-    setInput('[data-field="url"]', 'https://github.com/o/r');
-    setInput('[data-field="branch"]', 'main');
-    act(() => (container.querySelector('button.submit') as HTMLButtonElement).click());
-    expect(onSubmit).toHaveBeenCalledWith({
-      src: 'https://github.com/o/r',
-      branch: 'main',
-      skipCache: undefined,
-    });
-  });
-
-  it('renders recents', async () => {
-    pushRecent({ src: '/foo', label: 'foo' });
-    pushRecent({ src: 'https://x/r', branch: 'main', label: 'x/r' });
-    createPicker({ allowLocalRepos: true });
-    await open();
-    const rows = container.querySelectorAll('.recent-row');
-    expect(rows.length).toBe(2);
-    expect(rows[0].textContent).toContain('x/r'); // MRU first
-  });
-
-  it('recent-row click submits with the row payload', async () => {
-    pushRecent({ src: '/foo', label: 'foo' });
-    createPicker({ allowLocalRepos: true });
-    await open();
-    act(() => (container.querySelector('.recent-row') as HTMLElement).click());
-    // Recent-row clicks omit skipCache entirely (handleRecentClick only
-    // passes src + branch), so the payload has 2 keys.
-    expect(onSubmit).toHaveBeenCalledWith({
-      src: '/foo',
-      branch: undefined,
-    });
-  });
-
-  it('shows error banner when open() includes error', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open({ error: 'repository not found at xyz' });
-    expect(container.textContent).toContain('repository not found at xyz');
-  });
-
-  it('non-dismissible: no × button, Escape ignored, backdrop click ignored', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open({ dismissible: false });
-    expect(container.querySelector('[data-action="close"]')).toBeNull();
-
-    // The component has no document keydown handler (the factory added one);
-    // Escape simply does nothing. Assert the modal stays mounted.
-    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    await flush();
-    expect(container.querySelector('.modal-backdrop')).not.toBeNull();
-
-    // Backdrop click on a non-dismissible modal is ignored (guarded by
-    // s.dismissible in the onClick). The component closes via onClose rather
-    // than toggling display, so assert onClose was NOT called.
-    act(() => (container.querySelector('.modal-backdrop') as HTMLElement).click());
-    await flush();
-    expect(onClose).not.toHaveBeenCalled();
-    expect(container.querySelector('.modal-backdrop')).not.toBeNull();
-  });
-
-  it('dismissible: × / backdrop both close', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open({ dismissible: true });
-    expect(container.querySelector('[data-action="close"]')).toBeTruthy();
-
-    // The component delegates closing to the onClose callback rather than
-    // hiding the root itself (the factory set root.style.display='none').
-    // Each close path is asserted by checking onClose fired.
-    act(() => (container.querySelector('[data-action="close"]') as HTMLButtonElement).click());
-    expect(onClose).toHaveBeenCalledTimes(1);
-
-    await open({ dismissible: true });
-    act(() => {
-      const backdrop = container.querySelector('.modal-backdrop') as HTMLElement;
-      backdrop.click(); // target === currentTarget → triggers close
-    });
-    expect(onClose).toHaveBeenCalledTimes(2);
-    // NOTE: the factory also closed on Escape; SourcePickerModal has no
-    // keydown listener, so the Escape branch of the original test is dropped
-    // — there is no component behaviour to assert.
-  });
-
-  it('prefill populates inputs', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open({ prefill: { src: 'https://github.com/o/r', branch: 'develop' } });
-    expect(isTabActive(SourceTab.Remote)).toBe(true);
-    expect((container.querySelector('[data-field="url"]') as HTMLInputElement).value).toBe(
-      'https://github.com/o/r'
-    );
-    expect((container.querySelector('[data-field="branch"]') as HTMLInputElement).value).toBe(
-      'develop'
-    );
-  });
-
-  it('marks the currently-loaded recent as active', async () => {
-    history.replaceState(null, '', '?src=%2Ffoo');
-    pushRecent({ src: '/foo', label: 'foo' });
-    pushRecent({ src: '/bar', label: 'bar' });
-    createPicker({ allowLocalRepos: true });
-    await open();
-    const activeRow = container.querySelector('.recent-row--active');
-    expect(activeRow).toBeTruthy();
-    expect(activeRow?.textContent).toContain('/foo');
-  });
-
-  it('active row click is a no-op', async () => {
-    history.replaceState(null, '', '?src=%2Ffoo');
-    pushRecent({ src: '/foo', label: 'foo' });
-    createPicker({ allowLocalRepos: true });
-    await open();
-    act(() => (container.querySelector('.recent-row--active') as HTMLElement).click());
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  // ── allowLocalRepos: false ──────────────────────────────────────────
-
-  it('disabled: renders a warning card in the Local pane instead of the input', async () => {
-    createPicker({ allowLocalRepos: false });
-    await open();
-    act(() => tabButton(SourceTab.Local).click());
-    await flush();
-    // Path input is GONE.
-    expect(container.querySelector('[data-field="path"]')).toBeNull();
-    // Warning card is present, with the env-var name and the docs link.
-    const warning = container.querySelector('[data-pane="local"] .modal-warning');
-    expect(warning).toBeTruthy();
-    expect(warning?.textContent).toContain('CODECITY_ALLOW_LOCAL_REPOS');
-    const link = warning?.querySelector('a') as HTMLAnchorElement | null;
-    expect(link?.href).toContain('github.com/thalida/codecity');
-  });
-
-  it('disabled: default tab is git even when prefill is a local path', async () => {
-    createPicker({ allowLocalRepos: false });
-    await open({ prefill: { src: '/Users/foo/bar' } });
-    expect(isTabActive(SourceTab.Remote)).toBe(true);
-  });
-
-  it('disabled: local recents render with warning badge + dimmed class', async () => {
-    pushRecent({ src: '/foo', label: 'foo' });
-    pushRecent({ src: 'https://github.com/o/r', branch: 'main', label: 'o/r' });
-    createPicker({ allowLocalRepos: false });
-    await open();
-    const rows = container.querySelectorAll('.recent-row');
-    // Order is MRU: o/r first (git, normal), /foo second (local, disabled).
-    expect(rows[0].classList.contains('recent-row--disabled')).toBe(false);
-    expect(rows[1].classList.contains('recent-row--disabled')).toBe(true);
-    // Disabled (local) rows render the Lucide alert glyph (a mask-painted
-    // .lucide-icon span); git rows render an inline brand <svg>.
-    expect(rows[1].querySelector('.recent-icon .lucide-icon')).not.toBeNull();
-    expect(rows[0].querySelector('.recent-icon svg')).not.toBeNull();
-    expect((rows[1] as HTMLElement).title).toContain('Local repos are disabled');
-  });
-
-  it('disabled: clicking a disabled local recent is a no-op', async () => {
-    pushRecent({ src: '/foo', label: 'foo' });
-    createPicker({ allowLocalRepos: false });
-    await open();
-    act(() => (container.querySelector('.recent-row--disabled') as HTMLElement).click());
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('disabled: trash on a disabled local recent still works', async () => {
-    pushRecent({ src: '/foo', label: 'foo' });
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
-    // Stub fetch so the best-effort cache-clear DELETE doesn't blow up.
-    vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(null, { status: 204 }));
-    createPicker({ allowLocalRepos: false });
-    await open();
-    const removeBtn = container.querySelector('[data-action="recent-remove"]') as HTMLButtonElement;
-    // handleRecentRemove calls removeRecent (mutates RECENTS signal) then
-    // writes state.value to force a re-render; flush lets Preact re-render.
-    act(() => removeBtn.click());
-    await flush();
-    // Row should be gone after re-render.
-    expect(container.querySelectorAll('.recent-row').length).toBe(0);
-    confirmSpy.mockRestore();
-  });
-
-  it('disabled: form fields (history/skip/submit) are hidden on the Local pane', async () => {
-    createPicker({ allowLocalRepos: false });
-    await open();
-    // Default opens on Git tab; switch to Local.
-    act(() => tabButton(SourceTab.Local).click());
-    await flush();
-    const formFields = container.querySelector('[data-form-fields]') as HTMLElement;
-    expect(formFields).toBeTruthy();
-    expect(formFields.style.display).toBe('none');
-  });
-
-  it('disabled: switching back to Git tab reveals the form fields again', async () => {
-    createPicker({ allowLocalRepos: false });
-    await open();
-    act(() => tabButton(SourceTab.Local).click());
-    await flush();
-    act(() => tabButton(SourceTab.Remote).click());
-    await flush();
-    const formFields = container.querySelector('[data-form-fields]') as HTMLElement;
-    expect(formFields.style.display).not.toBe('none');
-    // Submit button is back in the DOM and clickable.
-    expect(container.querySelector('button.submit')).toBeTruthy();
-  });
-
-  it('enabled: form fields render on the Local pane (regression guard)', async () => {
-    createPicker({ allowLocalRepos: true });
-    await open();
-    act(() => tabButton(SourceTab.Local).click());
-    await flush();
-    const formFields = container.querySelector('[data-form-fields]') as HTMLElement;
-    expect(formFields.style.display).not.toBe('none');
-  });
-});

From 06633643c0eee6af957aa7d6131eea9436f3b454 Mon Sep 17 00:00:00 2001
From: Thalida Noel <thalida.c.noel@gmail.com>
Date: Sat, 4 Jul 2026 18:58:26 -0400
Subject: [PATCH 12/12] fix(app): roll back a streamed skeleton on cancel +
 drop dead .pane-tabs--modal (#77)

A cancel landing in the skeleton->complete window left the canceled repo's
partial manifest in MANIFEST while CURRENT_SOURCE stayed put, so its geometry
lingered under the prior source's header. Snapshot MANIFEST at load start and
restore it on an aborted load (both success and catch abort paths), ordered
after the supersede guard so a newer load's MANIFEST is never clobbered.
Aligns setManifest's param with the signal's ManifestValue union so the
rollback typechecks without a cast. Also drops the orphaned .pane-tabs--modal
CSS rule (only consumer was the deleted SourcePicker).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/components/PaneTabs/PaneTabs.css  |  6 -----
 app/src/hooks/useManifestSource.ts        | 27 ++++++++++++++++++-----
 app/src/state/stores/manifest.ts          | 16 +++++++++-----
 app/tests/hooks/useManifestSource.test.ts | 26 ++++++++++++++++++++++
 4 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/app/src/components/PaneTabs/PaneTabs.css b/app/src/components/PaneTabs/PaneTabs.css
index f4102072..857693d9 100644
--- a/app/src/components/PaneTabs/PaneTabs.css
+++ b/app/src/components/PaneTabs/PaneTabs.css
@@ -9,12 +9,6 @@
   display: none;
 }
 
-/* Modal context (source picker): the strip sits above form fields and needs a
-   gap below that the in-pane usage doesn't. */
-.pane-tabs--modal {
-  margin-bottom: 10px;
-}
-
 .pane-tab {
   display: inline-flex;
   align-items: center;
diff --git a/app/src/hooks/useManifestSource.ts b/app/src/hooks/useManifestSource.ts
index dae1910c..96256cdb 100644
--- a/app/src/hooks/useManifestSource.ts
+++ b/app/src/hooks/useManifestSource.ts
@@ -135,6 +135,10 @@ export async function loadSource(payload: SourcePayload): Promise<void> {
     branch: payload.branch,
   };
   SCAN_PROGRESS.value = { ...meta, phase: null }; // show overlay immediately
+  // Snapshot the applied manifest so a cancel that lands after a skeleton was
+  // streamed into MANIFEST can roll it back — otherwise the canceled repo's
+  // partial geometry lingers under the unchanged CURRENT_SOURCE's header.
+  const prevManifest = MANIFEST.peek();
 
   try {
     const url = manifestUrlFor({
@@ -152,11 +156,19 @@ export async function loadSource(payload: SourcePayload): Promise<void> {
       },
       controller.signal
     );
-    // A newer load superseded this one, OR the user canceled after a skeleton
-    // arrived: streamManifest ends an aborted stream as done (not a throw), so
-    // pumpManifestStream RETURNS the partial manifest here. Guard the commit so
-    // a canceled load never writes CURRENT_SOURCE (mirrors the catch guard).
-    if (myGen !== loadGeneration || controller.signal.aborted) return;
+    // A newer load superseded this one: it owns MANIFEST now, don't touch.
+    if (myGen !== loadGeneration) return;
+    // The user canceled after a skeleton arrived: streamManifest ends an aborted
+    // stream as done (not a throw), so pumpManifestStream RETURNED the partial
+    // manifest. Never commit it (CURRENT_SOURCE stays put) and roll MANIFEST back
+    // to the pre-load snapshot so the canceled repo's skeleton doesn't linger
+    // under the unchanged source. Same-source apply (CURRENT_SOURCE unchanged) →
+    // the render layer's camera-reframe reaction, keyed off CURRENT_SOURCE at
+    // apply-start, correctly does NOT reframe.
+    if (controller.signal.aborted) {
+      setManifest(prevManifest);
+      return;
+    }
     // Commit the source BEFORE publishing the final manifest. The render layer's
     // camera-reframe reaction keys off CURRENT_SOURCE captured at apply-START, so
     // the new key must be live for the FINAL apply (the one to frame on) and NOT
@@ -165,7 +177,10 @@ export async function loadSource(payload: SourcePayload): Promise<void> {
     setManifest(manifest);
   } catch (err) {
     if (myGen !== loadGeneration) return; // superseded — its error isn't current
-    if (controller.signal.aborted) return; // user canceled: not an error, no SOURCE_ERROR
+    if (controller.signal.aborted) {
+      setManifest(prevManifest); // user canceled: not an error; roll back any skeleton
+      return;
+    }
     SOURCE_ERROR.value = {
       error: err instanceof Error ? err.message : String(err),
       prefill: { src: payload.src, branch: payload.branch },
diff --git a/app/src/state/stores/manifest.ts b/app/src/state/stores/manifest.ts
index 4d38c3cb..9397fa3b 100644
--- a/app/src/state/stores/manifest.ts
+++ b/app/src/state/stores/manifest.ts
@@ -19,13 +19,17 @@ import { isEmptyManifest } from '@/utils/manifest';
 // Source of truth written by the fetch layer (useManifestSource). The scene
 // (the City component's render effect) is a CONSUMER of this signal — it is not
 // derived from world.onChange.
-export const MANIFEST = signal<
-  Manifest | DirNode | { tree?: unknown; [k: string]: unknown } | null
->(EMPTY_MANIFEST);
+//
+// The value union spans a fully-typed final Manifest, a bare DirNode, and the
+// loose skeleton/live-update shape the stream can emit before it's fully typed.
+export type ManifestValue = Manifest | DirNode | { tree?: unknown; [k: string]: unknown } | null;
+
+export const MANIFEST = signal<ManifestValue>(EMPTY_MANIFEST);
 
-/** Set the current manifest (skeleton, final, or live-update). Single writer
- *  used by the fetch layer; views + the scene render-effect read MANIFEST. */
-export function setManifest(m: Manifest | DirNode | null): void {
+/** Set the current manifest (skeleton, final, live-update, or a rollback to a
+ *  previously-applied value). Single writer used by the fetch layer; views +
+ *  the scene render-effect read MANIFEST. */
+export function setManifest(m: ManifestValue): void {
   MANIFEST.value = m ?? EMPTY_MANIFEST;
 }
 
diff --git a/app/tests/hooks/useManifestSource.test.ts b/app/tests/hooks/useManifestSource.test.ts
index 1d874040..35068572 100644
--- a/app/tests/hooks/useManifestSource.test.ts
+++ b/app/tests/hooks/useManifestSource.test.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { loadSource, cancelLoad } from '@/hooks/useManifestSource';
 import { SOURCE_ERROR, CURRENT_SOURCE } from '@/state/stores/source';
+import { MANIFEST } from '@/state/stores/manifest';
 
 // EventSource stub with driveable events: records listeners so a test can emit
 // a named SSE event (e.g. a `manifest-partial` skeleton), and records
@@ -74,4 +75,29 @@ describe('useManifestSource loadSource cancellation', () => {
     expect(SOURCE_ERROR.value).toBeNull(); // cancel is not an error
     expect(StubEventSource.instances[0]?.closed).toBe(true);
   });
+
+  it('canceling AFTER a skeleton rolls MANIFEST back to the prior city', async () => {
+    // City A is already applied (source unchanged throughout this load of B).
+    const cityA = { root: '/a', tree: { type: 'directory' }, signature: 'sig-a' };
+    MANIFEST.value = cityA;
+    const before = CURRENT_SOURCE.value;
+
+    const p = loadSource({ src: 'https://github.com/o/b' });
+    await flush(); // let the for-await attach its event listeners
+
+    // B's skeleton streams into MANIFEST (behind the overlay)...
+    StubEventSource.instances[0]!.emit(
+      'manifest-partial',
+      JSON.stringify({ manifest: { root: '/b', tree: { type: 'directory' }, signature: 'sig-b' } })
+    );
+    await flush();
+    expect(MANIFEST.value).not.toBe(cityA); // sanity: B's skeleton IS applied mid-load
+
+    cancelLoad(); // ...then the user cancels before B's final arrives
+    await p;
+
+    expect(MANIFEST.value).toBe(cityA); // rolled back to city A
+    expect(CURRENT_SOURCE.value).toBe(before); // never committed B
+    expect(SOURCE_ERROR.value).toBeNull(); // cancel is not an error
+  });
 });