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/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'}")
diff --git a/api/tests/test_server_branches.py b/api/tests/test_server_branches.py
new file mode 100644
index 00000000..604857d7
--- /dev/null
+++ b/api/tests/test_server_branches.py
@@ -0,0 +1,38 @@
+"""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/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/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/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/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/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/hooks/useManifestSource.ts b/app/src/hooks/useManifestSource.ts
index f3d5703a..96256cdb 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,14 +124,21 @@ 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,
     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({
@@ -136,10 +148,27 @@ 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);
-    });
-    if (myGen !== loadGeneration) return; // a newer load superseded this one
+    const manifest = await pumpManifestStream(
+      url,
+      meta,
+      (m, phase) => {
+        if (phase === ScanPhase.PartialManifest && myGen === loadGeneration) setManifest(m);
+      },
+      controller.signal
+    );
+    // 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
@@ -148,6 +177,10 @@ 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) {
+      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 },
@@ -158,10 +191,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
@@ -273,12 +316,18 @@ 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. RETURNS the source-picker submit handler so App can pass
- * it down to <SourcePicker> as a prop (no global register/invoke channel).
+ * 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 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(): (payload: SourcePayload) => void {
+export function useManifestSource(): {
+  submitSource: (payload: SourcePayload) => void;
+  cancelLoad: () => void;
+} {
   const submitSource = useCallback((payload: SourcePayload) => {
     void loadSource(payload);
   }, []);
@@ -311,5 +360,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 aa8e2279..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 SOURCE_PICKER + 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';
@@ -38,9 +39,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';
@@ -52,38 +53,43 @@ 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 = () => {
-    closeSourcePicker();
+  // App coordinates the projects view; the fetch hook only reports outcomes.
+  const dismissView = () => {
+    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 });
     }
   }, []);
 
-  // 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(() => {
     const err = SOURCE_ERROR.value;
     if (!err) return;
-    openSourcePicker({
+    openProjectsView({
       dismissible: !isEmptyManifest(MANIFEST.peek()),
       prefill: err.prefill,
       error: err.error,
@@ -94,7 +100,7 @@ export function App() {
     <>
       <AppHeader
         onSegmentClick={selectPath}
-        onSwitchSource={openSourcePickerForCurrentSource}
+        onSwitchSource={openProjectsViewForCurrentSource}
         onResetView={resetView}
         onFocus={focusCurrentSelection}
       />
@@ -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/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/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/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/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/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/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/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: {
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/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..ec2dc85e
--- /dev/null
+++ b/app/src/views/ProjectsView/NewProjectForm.css
@@ -0,0 +1,55 @@
+/* ── New project form ── */
+
+.new-project {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cc-space-6);
+}
+
+.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
new file mode 100644
index 00000000..4989ed04
--- /dev/null
+++ b/app/src/views/ProjectsView/NewProjectForm.tsx
@@ -0,0 +1,161 @@
+// 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.
+//
+// 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';
+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;
+  prefill?: SourcePayload;
+  onSubmit: (payload: SourcePayload) => void;
+}
+
+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 }: 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;
+    // 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
+      // 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,
+    });
+  }
+
+  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}
+        aria-controls="new-project-advanced"
+        onClick={() => setAdvanced((a) => !a)}
+      >
+        Advanced
+      </button>
+      {advanced && (
+        <label id="new-project-advanced" 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/src/views/ProjectsView/ProjectsView.css b/app/src/views/ProjectsView/ProjectsView.css
new file mode 100644
index 00000000..f7a0fb1e
--- /dev/null
+++ b/app/src/views/ProjectsView/ProjectsView.css
@@ -0,0 +1,51 @@
+/* ── 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;
+}
+
+/* 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
new file mode 100644
index 00000000..b338c31c
--- /dev/null
+++ b/app/src/views/ProjectsView/ProjectsView.tsx
@@ -0,0 +1,90 @@
+// 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.
+//
+// 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';
+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';
+
+export interface ProjectsViewProps {
+  onSubmit: (payload: SourcePayload) => void;
+  onCancel: () => void;
+  onClose: () => void;
+}
+
+export function ProjectsView({ onSubmit, onCancel, onClose }: ProjectsViewProps) {
+  const pv = PROJECTS_VIEW.value;
+  const scan = SCAN_PROGRESS.value;
+  const loading = scan !== 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">
+          {/* 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/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..97d1ab73
--- /dev/null
+++ b/app/src/views/ProjectsView/RecentsList.css
@@ -0,0 +1,139 @@
+/* ── Recents hero ────────────────────────────────────────────────────────
+   Filter box + keyboard-navigable list (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/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 2873d9fa..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 { SOURCE_PICKER, 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 SOURCE_PICKER + 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
-// 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 = SOURCE_PICKER.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
new file mode 100644
index 00000000..19cd309e
--- /dev/null
+++ b/app/tests/api/branches.test.ts
@@ -0,0 +1,32 @@
+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);
+  });
+});
diff --git a/app/tests/api/manifest.test.ts b/app/tests/api/manifest.test.ts
index 69b54854..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', 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 +59,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 +72,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 +82,45 @@ 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
+  });
+
+  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/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/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/hooks/useManifestSource.test.ts b/app/tests/hooks/useManifestSource.test.ts
new file mode 100644
index 00000000..35068572
--- /dev/null
+++ b/app/tests/hooks/useManifestSource.test.ts
@@ -0,0 +1,103 @@
+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
+// 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(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;
+
+  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);
+  });
+
+  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);
+  });
+
+  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
+  });
+});
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);
+  });
+});
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..bb054725
--- /dev/null
+++ b/app/tests/views/ProjectsView/NewProjectForm.test.tsx
@@ -0,0 +1,189 @@
+// 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={() => {}} />, 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} />, 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} />, 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={() => {}} />, 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={() => {}} />, 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={() => {}} />, 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(/—/);
+  });
+
+  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={() => {}} />, 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');
+    }
+  });
+});
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);
+  });
+});
diff --git a/app/tests/views/ProjectsView/RecentsList.test.tsx b/app/tests/views/ProjectsView/RecentsList.test.tsx
new file mode 100644
index 00000000..e28cbdaa
--- /dev/null
+++ b/app/tests/views/ProjectsView/RecentsList.test.tsx
@@ -0,0 +1,109 @@
+// 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');
+  });
+});
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');
-  });
-});