diff --git a/frontend/src/components/AppUpdateGate.tsx b/frontend/src/components/AppUpdateGate.tsx
index 78d7c6f28..c2f3e9d09 100644
--- a/frontend/src/components/AppUpdateGate.tsx
+++ b/frontend/src/components/AppUpdateGate.tsx
@@ -10,6 +10,7 @@ import {
 import { AppUpdate, System } from "@/lib/rpc"
 import { useProjects } from "@/providers/projects"
 import { queuePaste } from "@/lib/terminal/paste-queue"
+import { readPref, writePref } from "@/lib/prefs"
 import { registerUpdateChecker } from "@/lib/update/update-check"
 import { errorText } from "@/lib/utils"
 
@@ -42,11 +43,6 @@ export function AppUpdateGate() {
     return () => clearInterval(id)
   }, [])
 
-  useEffect(() => {
-    registerUpdateChecker(checkNow)
-    return () => registerUpdateChecker(null)
-  })
-
   const prompt = (action: UpdateAction & { kind: "update" }) => {
     promptedVersion.current = action.version
     if (action.canSelfApply) {
@@ -60,7 +56,7 @@ export function AppUpdateGate() {
     let action: UpdateAction
     try {
       const status = await AppUpdate.Status()
-      action = decideUpdateAction(status, localStorage.getItem(UPDATE_DISMISSED_KEY))
+      action = decideUpdateAction(status, readPref(UPDATE_DISMISSED_KEY))
     } catch {
       return
     }
@@ -79,7 +75,19 @@ export function AppUpdateGate() {
     return status
   }
 
-  const dismiss = (version: string) => localStorage.setItem(UPDATE_DISMISSED_KEY, version)
+  // The manual check closes over this render's state, so it rides a ref and the
+  // registration runs once. Declared here rather than beside the poll above:
+  // it reads checkNow, and an effect with no dependency array — what this was —
+  // re-registered on every render to the same effect.
+  const checkNowRef = useRef(checkNow)
+  checkNowRef.current = checkNow
+
+  useEffect(() => {
+    registerUpdateChecker(() => checkNowRef.current())
+    return () => registerUpdateChecker(null)
+  }, [])
+
+  const dismiss = (version: string) => writePref(UPDATE_DISMISSED_KEY, version)
 
   // Windows/macOS: swap the binary in place, then offer a one-click restart.
   const promptSelfApply = (version: string) => {
diff --git a/frontend/src/components/ClaudePluginGate.tsx b/frontend/src/components/ClaudePluginGate.tsx
index f7aaa4010..f28c1051a 100644
--- a/frontend/src/components/ClaudePluginGate.tsx
+++ b/frontend/src/components/ClaudePluginGate.tsx
@@ -19,6 +19,7 @@ import {
 } from "@/lib/update/plugin-gate"
 import { ClaudePlugin } from "@/lib/rpc"
 import { errorText } from "@/lib/utils"
+import { readPref, writePref } from "@/lib/prefs"
 import { runWithToast } from "@/lib/toast-async"
 
 // ClaudePluginGate checks on startup whether the lich Claude Code plugin is
@@ -44,8 +45,8 @@ export function ClaudePluginGate() {
       const status = await ClaudePlugin.Status()
       action = decidePluginAction(
         status,
-        localStorage.getItem(INSTALL_DISMISSED_KEY) === DISMISSED_FLAG,
-        localStorage.getItem(UPDATE_DISMISSED_KEY),
+        readPref(INSTALL_DISMISSED_KEY) === DISMISSED_FLAG,
+        readPref(UPDATE_DISMISSED_KEY),
       )
     } catch {
       return
@@ -63,7 +64,7 @@ export function ClaudePluginGate() {
       action: { label: "Update", onClick: () => void runUpdate() },
       cancel: {
         label: "Later",
-        onClick: () => localStorage.setItem(UPDATE_DISMISSED_KEY, version),
+        onClick: () => writePref(UPDATE_DISMISSED_KEY, version),
       },
     })
   }
@@ -90,7 +91,7 @@ export function ClaudePluginGate() {
   }
 
   const dismissForever = () => {
-    localStorage.setItem(INSTALL_DISMISSED_KEY, DISMISSED_FLAG)
+    writePref(INSTALL_DISMISSED_KEY, DISMISSED_FLAG)
     setInstallOpen(false)
   }
 
diff --git a/frontend/src/components/FooterBar.tsx b/frontend/src/components/FooterBar.tsx
index 317f1afe4..fc39e7043 100644
--- a/frontend/src/components/FooterBar.tsx
+++ b/frontend/src/components/FooterBar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState, type ReactNode } from "react"
 import { useNavigate } from "react-router-dom"
 import { openPulls } from "@/lib/pulls-card-store"
 import { toast } from "sonner"
@@ -32,6 +32,48 @@ function useNow(): Date {
 
 const two = (n: number): string => String(n).padStart(2, "0")
 
+interface FooterButtonProps {
+  /** Both the tooltip and the accessible name — one string, one meaning. */
+  label: string
+  onClick: () => void
+  /** Set for a button that toggles a dock panel: it reads as pressed while
+   * that panel is open. Left off for a plain action. */
+  pressed?: boolean
+  disabled?: boolean
+  /** Roomier padding for a button carrying text beside its glyph. */
+  wide?: boolean
+  children: ReactNode
+}
+
+// One segment of the status strip: a glyph (sometimes with a readout beside
+// it), its meaning in a tooltip, and the accent fill that marks the dock panel
+// it opens as the one on screen.
+function FooterButton({ label, onClick, pressed, disabled, wide, children }: FooterButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            aria-pressed={pressed}
+            aria-label={label}
+            className={cn(
+              "flex items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40",
+              wide ? "gap-1.5 px-1.5 py-1" : "justify-center p-1",
+              pressed && "bg-accent text-accent-foreground",
+            )}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  )
+}
+
 interface FooterBarProps {
   dock: DockTab | null
   onDock: (tab: DockTab) => void
@@ -104,91 +146,51 @@ export function FooterBar({ dock, onDock }: FooterBarProps) {
 
   return (
     <footer className="flex h-9 shrink-0 items-center gap-2 border-t border-border bg-sidebar px-3 text-xs text-muted-foreground">
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <button
-              type="button"
-              onClick={() => void attachFile()}
-              disabled={!sessionId}
-              aria-label="Attach file"
-              className="flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
-            />
-          }
-        >
-          <Plus className="size-4" />
-        </TooltipTrigger>
-        <TooltipContent>Attach file</TooltipContent>
-      </Tooltip>
+      <FooterButton label="Attach file" onClick={() => void attachFile()} disabled={!sessionId}>
+        <Plus className="size-4" />
+      </FooterButton>
       {path && (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <button
-                type="button"
-                onClick={() => onDock("files")}
-                aria-pressed={dock === "files"}
-                aria-label="Browse code"
-                className={`flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground ${
-                  dock === "files" ? "bg-accent text-accent-foreground" : ""
-                }`}
-              />
-            }
-          >
-            <Code className="size-4" />
-          </TooltipTrigger>
-          <TooltipContent>Browse code</TooltipContent>
-        </Tooltip>
+        <FooterButton
+          label="Browse code"
+          onClick={() => onDock("files")}
+          pressed={dock === "files"}
+        >
+          <Code className="size-4" />
+        </FooterButton>
       )}
       {status && (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <button
-                type="button"
-                onClick={() => onDock("review")}
-                aria-pressed={dock === "review"}
-                className={`flex items-center gap-1.5 rounded-md px-1.5 py-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground ${
-                  dock === "review" ? "bg-accent text-accent-foreground" : ""
-                }`}
-              />
-            }
-          >
-            {status.files === 0 ? (
-              <>
-                <Diff className="size-3.5" /> 0
-              </>
-            ) : (
-              <>
-                <FileText className="size-3.5" />
-                {status.files}
-                <span className="opacity-50">·</span>
-                <DiffStat added={status.added} deleted={status.deleted} />
-              </>
-            )}
-          </TooltipTrigger>
-          <TooltipContent>Review changes</TooltipContent>
-        </Tooltip>
+        <FooterButton
+          label="Review changes"
+          onClick={() => onDock("review")}
+          pressed={dock === "review"}
+          wide
+        >
+          {status.files === 0 ? (
+            <>
+              <Diff className="size-3.5" /> 0
+            </>
+          ) : (
+            <>
+              <FileText className="size-3.5" />
+              {status.files}
+              <span className="opacity-50">·</span>
+              <DiffStat added={status.added} deleted={status.deleted} />
+            </>
+          )}
+        </FooterButton>
       )}
 
       {pr && projectId && (
-        <Tooltip>
-          <TooltipTrigger
-            render={
-              <button
-                type="button"
-                onClick={() => {
-                  openPulls(basePath)
-                  navigate(`/projects/${projectId}/pulls`)
-                }}
-                className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
-              />
-            }
-          >
-            <GitPullRequestArrow className="size-3.5" /> PR #{pr.number}
-          </TooltipTrigger>
-          <TooltipContent>View pull request</TooltipContent>
-        </Tooltip>
+        <FooterButton
+          label="View pull request"
+          onClick={() => {
+            openPulls(basePath)
+            navigate(`/projects/${projectId}/pulls`)
+          }}
+          wide
+        >
+          <GitPullRequestArrow className="size-3.5" /> PR #{pr.number}
+        </FooterButton>
       )}
 
       <span className="ml-auto flex items-center gap-4">
diff --git a/frontend/src/components/PatchNotesDialog.tsx b/frontend/src/components/PatchNotesDialog.tsx
index 4c998d7ba..acb449f9a 100644
--- a/frontend/src/components/PatchNotesDialog.tsx
+++ b/frontend/src/components/PatchNotesDialog.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dialog"
 import { System } from "@/lib/rpc"
 import type { PatchNotes } from "@/lib/api-types"
+import { cn } from "@/lib/utils"
 
 const RELEASE_TAG_BASE = "https://github.com/omartelo/lich/releases/tag/v"
 
@@ -85,7 +86,7 @@ export function PatchNotesDialog({ notes, onClose }: PatchNotesDialogProps) {
           {groups.map((group) => (
             <div key={group.label} className="border-t py-3.5 first:border-t-0 first:pt-1">
               <div className="mb-2.5 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                <span className={`size-2 rounded-full ${dotColor(group.label)}`} />
+                <span className={cn("size-2 rounded-full", dotColor(group.label))} />
                 {group.label}
               </div>
               <ul className="flex flex-col gap-2.5">
diff --git a/frontend/src/components/PatchNotesGate.tsx b/frontend/src/components/PatchNotesGate.tsx
index 4c2f9b5c4..0a7f5809c 100644
--- a/frontend/src/components/PatchNotesGate.tsx
+++ b/frontend/src/components/PatchNotesGate.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react"
 import { PatchNotesDialog } from "./PatchNotesDialog"
 import { decidePatchNotes, PATCH_NOTES_SEEN_KEY } from "@/lib/update/patch-notes-gate"
 import { PatchNotes } from "@/lib/rpc"
+import { readPref, writePref } from "@/lib/prefs"
 import type { PatchNotes as PatchNotesData } from "@/lib/api-types"
 
 // PatchNotesGate shows lich's "what's new" popup once per release, right after
@@ -16,9 +17,9 @@ export function PatchNotesGate() {
     void PatchNotes.Current()
       .then((current) => {
         if (!alive) return
-        const action = decidePatchNotes(current, localStorage.getItem(PATCH_NOTES_SEEN_KEY))
+        const action = decidePatchNotes(current, readPref(PATCH_NOTES_SEEN_KEY))
         if (action.kind === "record") {
-          localStorage.setItem(PATCH_NOTES_SEEN_KEY, action.version)
+          writePref(PATCH_NOTES_SEEN_KEY, action.version)
         } else if (action.kind === "show") {
           setNotes(action.notes)
         }
@@ -32,7 +33,7 @@ export function PatchNotesGate() {
   if (!notes) return null
 
   const close = () => {
-    localStorage.setItem(PATCH_NOTES_SEEN_KEY, notes.version)
+    writePref(PATCH_NOTES_SEEN_KEY, notes.version)
     setNotes(null)
   }
 
diff --git a/frontend/src/components/common/IconAction.tsx b/frontend/src/components/common/IconAction.tsx
index 1679b330d..7d9a04091 100644
--- a/frontend/src/components/common/IconAction.tsx
+++ b/frontend/src/components/common/IconAction.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from "react"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 
-interface IconAction {
+interface IconActionProps {
   /** Both the tooltip and the accessible name — one string, one meaning. */
   label: string
   onClick: () => void
@@ -11,7 +11,7 @@ interface IconAction {
 // A bare icon button for a panel's header strip: no border, no fill at rest,
 // its meaning carried by a tooltip. Attach as context, discard changes, collapse
 // all, full screen, hide the tree.
-export function IconAction({ label, onClick, children }: IconAction) {
+export function IconAction({ label, onClick, children }: IconActionProps) {
   return (
     <Tooltip>
       <TooltipTrigger
diff --git a/frontend/src/components/common/SkeletonLines.tsx b/frontend/src/components/common/SkeletonLines.tsx
new file mode 100644
index 000000000..f213a15f2
--- /dev/null
+++ b/frontend/src/components/common/SkeletonLines.tsx
@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
+
+interface SkeletonLinesProps {
+  /** Tailwind width classes, one per line. Ragged on purpose — see below. */
+  widths: readonly string[]
+  /** Line height class; the default is a line of prose. */
+  height?: string
+  className?: string
+}
+
+// A stack of placeholder bars at ragged widths. The raggedness is the whole
+// point: equal bars read as a loading widget, uneven ones read as the text
+// that is coming — which is what keeps a screen-sized wait from looking like a
+// failure. Each caller brings its own widths, because what is arriving differs
+// (prose, file names, code).
+export function SkeletonLines({ widths, height = "h-3", className }: SkeletonLinesProps) {
+  return (
+    <>
+      {widths.map((width) => (
+        <Skeleton key={width} className={cn(height, width, className)} />
+      ))}
+    </>
+  )
+}
diff --git a/frontend/src/components/diff/FileDiff.tsx b/frontend/src/components/diff/FileDiff.tsx
index f463bdced..d727f5098 100644
--- a/frontend/src/components/diff/FileDiff.tsx
+++ b/frontend/src/components/diff/FileDiff.tsx
@@ -65,9 +65,10 @@ export function FileDiff({ file, onInject, onDiscard, bulk, viewed, onViewed }:
   return (
     <section>
       <div
-        className={`sticky top-0 z-10 flex w-full items-center gap-2 bg-sidebar px-2 py-1 text-xs ${
-          expanded ? "border-b border-border/60" : ""
-        }`}
+        className={cn(
+          "sticky top-0 z-10 flex w-full items-center gap-2 bg-sidebar px-2 py-1 text-xs",
+          expanded && "border-b border-border/60",
+        )}
       >
         <button
           type="button"
@@ -80,7 +81,10 @@ export function FileDiff({ file, onInject, onDiscard, bulk, viewed, onViewed }:
         >
           <Chevron className="size-3.5 shrink-0 text-muted-foreground" />
           <span
-            className={`flex size-5 shrink-0 items-center justify-center rounded text-[0.5625rem] font-bold ${badge.className}`}
+            className={cn(
+              "flex size-5 shrink-0 items-center justify-center rounded text-[0.5625rem] font-bold",
+              badge.className,
+            )}
           >
             {badge.abbr}
           </span>
diff --git a/frontend/src/components/diff/useDiffEditor.ts b/frontend/src/components/diff/useDiffEditor.ts
index 6b7fe9ece..f9a967d98 100644
--- a/frontend/src/components/diff/useDiffEditor.ts
+++ b/frontend/src/components/diff/useDiffEditor.ts
@@ -1,15 +1,7 @@
-import { useEffect, useRef } from "react"
+import { useMemo } from "react"
 import type { RefObject } from "react"
-import { EditorState } from "@codemirror/state"
-import { EditorView } from "@codemirror/view"
-import {
-  buildLineDecorations,
-  diffGutter,
-  loadLanguage,
-  readOnlyCodeExtensions,
-  selectedDocLines,
-  type DocLineSelection,
-} from "@/lib/codemirror"
+import { buildLineDecorations, diffGutter, type DocLineSelection } from "@/lib/codemirror"
+import { useCodeMirrorView } from "@/lib/use-codemirror-view"
 import type { FileDoc } from "@/lib/git/diff"
 
 export interface DiffEditor {
@@ -18,38 +10,19 @@ export interface DiffEditor {
   getSelectedDocLines: () => DocLineSelection | null
 }
 
-// useDiffEditor owns one read-only CodeMirror view: created when the container
-// mounts, destroyed on unmount or when the doc is replaced by a refresh.
+// useDiffEditor is the diff card's read-only CodeMirror view: the shared editor
+// plus the two extensions that make it a diff — the +/- gutter and the per-line
+// background. Its selection lands on *doc* lines, which are the diff's own
+// interleaving of added and deleted, not the file's numbering; mapping them
+// back is newLineRange's job at the call site.
 export function useDiffEditor(doc: FileDoc, filename: string): DiffEditor {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const viewRef = useRef<EditorView | null>(null)
-
-  useEffect(() => {
-    const parent = containerRef.current
-    if (!parent) {
-      return
-    }
-    const view = new EditorView({
-      state: EditorState.create({
-        doc: doc.text,
-        extensions: [
-          ...readOnlyCodeExtensions(),
-          diffGutter(doc.lineMeta),
-          buildLineDecorations(doc.lineMeta),
-        ],
-      }),
-      parent,
-    })
-    viewRef.current = view
-    loadLanguage(view, filename, () => viewRef.current === view)
-    return () => {
-      viewRef.current = null
-      view.destroy()
-    }
-  }, [doc, filename])
-
-  const getSelectedDocLines = (): DocLineSelection | null =>
-    viewRef.current ? selectedDocLines(viewRef.current) : null
-
-  return { containerRef, getSelectedDocLines }
+  const source = useMemo(
+    () => ({
+      text: doc.text,
+      extensions: [diffGutter(doc.lineMeta), buildLineDecorations(doc.lineMeta)],
+    }),
+    [doc],
+  )
+  const { containerRef, getSelectedLines } = useCodeMirrorView(source, filename)
+  return { containerRef, getSelectedDocLines: getSelectedLines }
 }
diff --git a/frontend/src/components/dock/useFileEditor.ts b/frontend/src/components/dock/useFileEditor.ts
index b7fad282e..b25c0cc5d 100644
--- a/frontend/src/components/dock/useFileEditor.ts
+++ b/frontend/src/components/dock/useFileEditor.ts
@@ -1,13 +1,8 @@
-import { useEffect, useRef } from "react"
+import { useMemo } from "react"
 import type { RefObject } from "react"
-import { EditorState } from "@codemirror/state"
-import { EditorView, lineNumbers } from "@codemirror/view"
-import {
-  loadLanguage,
-  readOnlyCodeExtensions,
-  selectedDocLines,
-  type DocLineSelection,
-} from "@/lib/codemirror"
+import { lineNumbers } from "@codemirror/view"
+import type { DocLineSelection } from "@/lib/codemirror"
+import { useCodeMirrorView } from "@/lib/use-codemirror-view"
 
 export interface FileEditor {
   containerRef: RefObject<HTMLDivElement>
@@ -15,37 +10,12 @@ export interface FileEditor {
   getSelectedLines: () => DocLineSelection | null
 }
 
-// useFileEditor owns one read-only CodeMirror view over a whole file's text —
-// the file-browser preview. Unlike the diff viewer there is no interleaving of
-// added/deleted lines, so the plain line gutter is identity: doc line N is
-// file line N, and a selection maps straight to file line numbers with no
-// remap. Created on mount, destroyed on unmount or when the text is replaced.
+// useFileEditor is the file-browser preview's read-only CodeMirror view: the
+// shared editor plus a plain line gutter. Unlike the diff beside it there is no
+// interleaving of added and deleted lines, so that gutter is identity — doc
+// line N is file line N, and a selection maps straight to file line numbers
+// with no remap.
 export function useFileEditor(text: string, filename: string): FileEditor {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const viewRef = useRef<EditorView | null>(null)
-
-  useEffect(() => {
-    const parent = containerRef.current
-    if (!parent) {
-      return
-    }
-    const view = new EditorView({
-      state: EditorState.create({
-        doc: text,
-        extensions: [...readOnlyCodeExtensions(), lineNumbers()],
-      }),
-      parent,
-    })
-    viewRef.current = view
-    loadLanguage(view, filename, () => viewRef.current === view)
-    return () => {
-      viewRef.current = null
-      view.destroy()
-    }
-  }, [text, filename])
-
-  const getSelectedLines = (): DocLineSelection | null =>
-    viewRef.current ? selectedDocLines(viewRef.current) : null
-
-  return { containerRef, getSelectedLines }
+  const source = useMemo(() => ({ text, extensions: [lineNumbers()] }), [text])
+  return useCodeMirrorView(source, filename)
 }
diff --git a/frontend/src/components/pulls/MergeMessageDialog.tsx b/frontend/src/components/pulls/MergeMessageDialog.tsx
new file mode 100644
index 000000000..653bf333d
--- /dev/null
+++ b/frontend/src/components/pulls/MergeMessageDialog.tsx
@@ -0,0 +1,105 @@
+import { GitMerge } from "lucide-react"
+import type { MergeMethod } from "@/lib/api-types"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+// MergeEdit carries a pending "edit commit message" merge: which method to run
+// and the message the dialog is editing. The screen holds it as null while the
+// dialog is closed.
+export interface MergeEdit {
+  method: MergeMethod
+  title: string
+  subject: string
+  body: string
+}
+
+// mergeEditFor seeds the dialog with what GitHub would have written by itself,
+// which is what the user is here to adjust rather than to compose: a squash
+// takes the pull request's title and body, a merge commit takes git's own
+// "Merge pull request #N from branch" and no body.
+export function mergeEditFor(
+  method: Extract<MergeMethod, "squash" | "merge">,
+  detail: { number: number; title: string; body: string; headRefName: string },
+): MergeEdit {
+  if (method === "squash") {
+    return {
+      method,
+      title: "Squash and merge",
+      subject: `${detail.title} (#${detail.number})`,
+      body: detail.body,
+    }
+  }
+  return {
+    method,
+    title: "Create a merge commit",
+    subject: `Merge pull request #${detail.number} from ${detail.headRefName}`,
+    body: "",
+  }
+}
+
+interface MergeMessageDialogProps {
+  edit: MergeEdit
+  merging: boolean
+  onChange: (next: MergeEdit) => void
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export function MergeMessageDialog({
+  edit,
+  merging,
+  onChange,
+  onCancel,
+  onConfirm,
+}: MergeMessageDialogProps) {
+  return (
+    <Dialog open onOpenChange={(next) => !next && onCancel()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{edit.title}</DialogTitle>
+          <DialogDescription>Edit the commit message, then merge.</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="merge-subject">Commit message</Label>
+            <Input
+              id="merge-subject"
+              value={edit.subject}
+              onChange={(e) => onChange({ ...edit, subject: e.target.value })}
+              autoFocus
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="merge-body">Extended description</Label>
+            <textarea
+              id="merge-body"
+              value={edit.body}
+              onChange={(e) => onChange({ ...edit, body: e.target.value })}
+              rows={6}
+              placeholder="Optional"
+              className="min-h-24 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-1.5 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} disabled={merging || edit.subject.trim() === ""}>
+            <GitMerge />
+            {merging ? "Merging…" : edit.method === "squash" ? "Squash and merge" : "Merge"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontend/src/components/pulls/PullRequestView.tsx b/frontend/src/components/pulls/PullRequestView.tsx
new file mode 100644
index 000000000..e30ab99ce
--- /dev/null
+++ b/frontend/src/components/pulls/PullRequestView.tsx
@@ -0,0 +1,319 @@
+import { useState, type ReactNode } from "react"
+import { toast } from "sonner"
+import {
+  Check,
+  ChevronDown,
+  ExternalLink,
+  GitBranch,
+  GitMerge,
+  RefreshCw,
+  SquareTerminal,
+} from "lucide-react"
+import { ProjectService, System } from "@/lib/rpc"
+import type { MergeMethod, PullRequestDetail } from "@/lib/api-types"
+import { cn, errorText } from "@/lib/utils"
+import { Markdown } from "@/components/Markdown"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { MergeMessageDialog, mergeEditFor, type MergeEdit } from "./MergeMessageDialog"
+import { PullsChecks } from "./PullsChecks"
+import { PullsCommits } from "./PullsCommits"
+import { PullsFiles } from "./PullsFiles"
+import { ChecksStat, MergeableStat, ReviewStat, StateStat } from "./PullsStats"
+
+// SessionAction is the header's "work on this pull request" button, resolved by
+// the screen: what it should say, whether it can run at all, and what it does.
+export interface SessionAction {
+  /** "Open in Session", or "Go to session" once one is live on the branch. */
+  label: string
+  /** Why it cannot run (a fork PR), or null when it can. */
+  blocked: string | null
+  busy: boolean
+  run: () => void
+}
+
+type Tab = "overview" | "commits" | "files" | "checks"
+
+interface PullRequestViewProps {
+  path: string
+  /** The checkout's HEAD; changing it refetches the diff under the Files tab. */
+  head: string
+  detail: PullRequestDetail
+  session: SessionAction
+  /** Re-run the lookup — the manual reload, for what HEAD can't announce. */
+  onRefresh: () => void
+  /** The merge landed; the screen decides what follows (a toast, the worktree). */
+  onMerged: () => void
+  onInject: (text: string) => void
+}
+
+// PullRequestView is one pull request in full: the header (title, the actions
+// that change it, its status line) over the four tabs that read it. It owns the
+// actions' in-flight state and nothing else — which pull request to show, and
+// what a merge means for the worktree it lives in, stay the screen's.
+export function PullRequestView({
+  path,
+  head,
+  detail,
+  session,
+  onRefresh,
+  onMerged,
+  onInject,
+}: PullRequestViewProps) {
+  const [merging, setMerging] = useState(false)
+  const [approving, setApproving] = useState(false)
+  const [edit, setEdit] = useState<MergeEdit | null>(null)
+  const [tab, setTab] = useState<Tab>("overview")
+  const commitCount = detail.commits?.length ?? 0
+  // A pull request the list reached by number may be over already, in which
+  // case there is nothing to merge and gh would refuse anyway.
+  const blocked =
+    detail.state !== "OPEN"
+      ? `Pull request is ${detail.state.toLowerCase()}`
+      : detail.isDraft
+        ? "Pull request is a draft"
+        : detail.mergeable === "CONFLICTING"
+          ? `Conflicts with ${detail.baseRefName}`
+          : null
+
+  const merge = async (method: MergeMethod, subject = "", body = "") => {
+    setMerging(true)
+    try {
+      await ProjectService.MergePullRequest(path, detail.number, method, subject, body)
+      setEdit(null)
+      onMerged()
+    } catch (err: unknown) {
+      toast.error(`Merge failed: ${errorText(err)}`)
+    } finally {
+      setMerging(false)
+    }
+  }
+
+  // A draft or a conflicting pull request can still be reviewed — only one that
+  // is already over cannot, which is why this does not reuse the merge gate.
+  const reviewBlocked =
+    detail.state !== "OPEN" ? `Pull request is ${detail.state.toLowerCase()}` : null
+
+  const approve = async () => {
+    setApproving(true)
+    try {
+      await ProjectService.ApprovePullRequest(path, detail.number)
+      toast.success(`Approved #${detail.number}`)
+      onRefresh()
+    } catch (err: unknown) {
+      toast.error(`Approve failed: ${errorText(err)}`)
+    } finally {
+      setApproving(false)
+    }
+  }
+
+  return (
+    <>
+      <div className="flex-none border-b border-border px-6 pt-5">
+        <div className="flex items-start gap-4">
+          <h1 className="min-w-0 flex-1 text-lg font-semibold leading-snug">
+            <span className="text-muted-foreground">#{detail.number}</span> {detail.title}
+          </h1>
+          <div className="flex flex-none items-center gap-2">
+            {/* The same wrapper trick as the merge button below: a disabled
+                button takes no pointer events, so its own title never shows. */}
+            <span title={session.blocked ?? undefined}>
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={session.busy || session.blocked !== null}
+                onClick={session.run}
+                className="bg-accent/55 text-foreground hover:bg-accent"
+              >
+                <SquareTerminal />
+                {session.busy ? "Opening…" : session.label}
+              </Button>
+            </span>
+            {/* Approving twice is something GitHub allows and nobody means to
+                do, so an approved pull request says so instead of offering it
+                again — the verdict is in ReviewStat below either way. */}
+            <span title={reviewBlocked ?? undefined}>
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled={
+                  approving || reviewBlocked !== null || detail.reviewDecision === "APPROVED"
+                }
+                onClick={() => void approve()}
+              >
+                <Check />
+                {approving
+                  ? "Approving…"
+                  : detail.reviewDecision === "APPROVED"
+                    ? "Approved"
+                    : "Approve"}
+              </Button>
+            </span>
+            {/* The reason rides on a wrapper: a disabled button takes no pointer
+                events, so its own title would never surface. */}
+            <span title={blocked ?? undefined}>
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  render={
+                    <Button size="sm" disabled={merging || blocked !== null}>
+                      <GitMerge />
+                      {merging ? "Merging…" : "Merge"}
+                      <ChevronDown />
+                    </Button>
+                  }
+                />
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => void merge("squash")}>
+                    Squash and merge
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => void merge("merge")}>
+                    Create a merge commit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => void merge("rebase")}>
+                    Rebase and merge
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => setEdit(mergeEditFor("squash", detail))}>
+                    Squash and merge, edit message…
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => setEdit(mergeEditFor("merge", detail))}>
+                    Create a merge commit, edit message…
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </span>
+            {/* HEAD moving refetches on its own; this covers what it can't see —
+                a review, a check finishing, a PR opened from the terminal. */}
+            <Button variant="ghost" size="sm" onClick={onRefresh} aria-label="Refresh">
+              <RefreshCw />
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => void System.OpenExternal(detail.url)}>
+              <ExternalLink />
+              Open
+            </Button>
+          </div>
+        </div>
+
+        <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs">
+          <StateStat state={detail.state} isDraft={detail.isDraft} />
+          <span className="flex items-center gap-1.5 font-mono text-muted-foreground">
+            <GitBranch className="size-3.5" />
+            {detail.headRefName} → {detail.baseRefName}
+          </span>
+          {/* The counter is where the eye lands when CI is red; make it the way
+              into the list instead of a dead readout. */}
+          {detail.checks.total > 0 ? (
+            <button
+              type="button"
+              onClick={() => setTab("checks")}
+              className="rounded-sm transition-opacity hover:opacity-80"
+            >
+              <ChecksStat checks={detail.checks} />
+            </button>
+          ) : (
+            <ChecksStat checks={detail.checks} />
+          )}
+          <MergeableStat
+            mergeable={detail.mergeable}
+            base={detail.baseRefName}
+            state={detail.state}
+          />
+          <ReviewStat decision={detail.reviewDecision} />
+        </div>
+
+        <div role="tablist" className="mt-4 flex gap-1">
+          <TabButton active={tab === "overview"} onClick={() => setTab("overview")}>
+            Overview
+          </TabButton>
+          <TabButton active={tab === "commits"} onClick={() => setTab("commits")}>
+            Commits
+            {commitCount > 0 && (
+              <span className="tabular-nums text-muted-foreground">{commitCount}</span>
+            )}
+          </TabButton>
+          <TabButton active={tab === "files"} onClick={() => setTab("files")}>
+            Files changed
+            {detail.changedFiles > 0 && (
+              <span className="tabular-nums text-muted-foreground">{detail.changedFiles}</span>
+            )}
+          </TabButton>
+          {detail.checks.total > 0 && (
+            <TabButton active={tab === "checks"} onClick={() => setTab("checks")}>
+              Checks
+              <span className="tabular-nums text-muted-foreground">{detail.checks.total}</span>
+            </TabButton>
+          )}
+        </div>
+      </div>
+
+      <div role="tabpanel" className="flex-1 overflow-hidden">
+        {tab === "files" ? (
+          <PullsFiles
+            path={path}
+            number={detail.number}
+            head={head}
+            pullRequest={detail.url}
+            onInject={onInject}
+          />
+        ) : (
+          <div className="h-full overflow-y-auto">
+            {tab === "checks" && <PullsChecks checks={detail.checkRuns} />}
+            {tab === "commits" && <PullsCommits commits={detail.commits} />}
+            {tab === "overview" && (
+              <div className="max-w-3xl px-6 py-5">
+                {detail.body.trim() !== "" ? (
+                  <Markdown>{detail.body}</Markdown>
+                ) : (
+                  <p className="text-sm text-muted-foreground">No description.</p>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {edit && (
+        <MergeMessageDialog
+          edit={edit}
+          merging={merging}
+          onChange={setEdit}
+          onCancel={() => setEdit(null)}
+          onConfirm={() => void merge(edit.method, edit.subject, edit.body)}
+        />
+      )}
+    </>
+  )
+}
+
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      className={cn(
+        "-mb-px inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors",
+        active
+          ? "border-primary text-foreground"
+          : "border-transparent text-muted-foreground hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/frontend/src/components/pulls/PullSkeleton.tsx b/frontend/src/components/pulls/PullSkeleton.tsx
new file mode 100644
index 000000000..311344933
--- /dev/null
+++ b/frontend/src/components/pulls/PullSkeleton.tsx
@@ -0,0 +1,39 @@
+import { SkeletonLines } from "@/components/common/SkeletonLines"
+import { Skeleton } from "@/components/ui/skeleton"
+
+// Ragged widths, so the body placeholder reads as prose instead of a block.
+const BODY_ROWS = ["w-full", "w-11/12", "w-4/5", "w-2/3", "w-5/6", "w-1/2"]
+
+// Looking the pull request up is a gh round-trip, and the screen covers the
+// whole app while it runs — a lone "Loading…" in the middle of that much empty
+// space reads as a failure. The skeleton holds the header the answer will fill:
+// title, actions, status line, tabs, then the body.
+export function PullSkeleton() {
+  return (
+    <div aria-busy>
+      <div className="border-b border-border px-6 pt-5">
+        <div className="flex items-start gap-4">
+          <Skeleton className="h-6 w-80 max-w-full" />
+          <div className="ml-auto flex flex-none items-center gap-2">
+            <Skeleton className="h-8 w-28" />
+            <Skeleton className="size-8" />
+            <Skeleton className="h-8 w-24" />
+          </div>
+        </div>
+        <div className="mt-4 flex items-center gap-4">
+          <Skeleton className="h-3 w-14" />
+          <Skeleton className="h-3 w-56" />
+          <Skeleton className="h-3 w-36" />
+        </div>
+        <div className="mt-5 flex gap-6 pb-3">
+          <Skeleton className="h-3 w-16" />
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-3 w-14" />
+        </div>
+      </div>
+      <div className="flex max-w-3xl flex-col gap-3 px-6 py-6">
+        <SkeletonLines widths={BODY_ROWS} />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/pulls/Pulls.tsx b/frontend/src/components/pulls/Pulls.tsx
index 8a69ed849..8e6eaa8d4 100644
--- a/frontend/src/components/pulls/Pulls.tsx
+++ b/frontend/src/components/pulls/Pulls.tsx
@@ -1,18 +1,7 @@
 import { useMemo, useState, type ReactNode } from "react"
 import { useNavigate, useParams } from "react-router-dom"
 import { toast } from "sonner"
-import {
-  Check,
-  ChevronDown,
-  ExternalLink,
-  GitBranch,
-  GitMerge,
-  GitPullRequestArrow,
-  RefreshCw,
-  SquareTerminal,
-} from "lucide-react"
-import { ProjectService, Store, System } from "@/lib/rpc"
-import type { MergeMethod, PullRequestDetail } from "@/lib/api-types"
+import { ProjectService, Store } from "@/lib/rpc"
 import { useProjects } from "@/providers/projects"
 import { baseName } from "@/lib/paths"
 import { Notice } from "@/components/common/Notice"
@@ -26,35 +15,11 @@ import { parsePullsQuery, readPullsSort, type PullsSort } from "@/lib/pulls/pull
 import { usePullRequestDetail } from "@/lib/pulls/use-pull-request-detail"
 import { usePullRequests } from "@/lib/pulls/use-pull-requests"
 import { useInject } from "@/lib/use-inject"
-import { cn, errorText } from "@/lib/utils"
-import { Markdown } from "@/components/Markdown"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Skeleton } from "@/components/ui/skeleton"
-import { PullsChecks } from "./PullsChecks"
-import { PullsCommits } from "./PullsCommits"
-import { PullsFiles } from "./PullsFiles"
+import { errorText } from "@/lib/utils"
+import { PullRequestView, type SessionAction } from "./PullRequestView"
+import { PullSkeleton } from "./PullSkeleton"
+import { PullsEmptyState } from "./PullsEmptyState"
 import { PullsList } from "./PullsList"
-import { ChecksStat, MergeableStat, ReviewStat, StateStat } from "./PullsStats"
-
-// Ragged widths, so the body placeholder reads as prose instead of a block.
-const BODY_ROWS = ["w-full", "w-11/12", "w-4/5", "w-2/3", "w-5/6", "w-1/2"]
 
 // The merge toast carries the only offer to remove the branch's worktree, so it
 // outstays the default: long enough to be read and acted on after the eye goes
@@ -75,6 +40,10 @@ interface PullsProps {
 // the PR's own branch. It resolves its path from the route's project id plus the
 // active session (the exact-match useActiveSession returns empty on this
 // subroute).
+//
+// The pull request itself is PullRequestView's; what this owns is everything
+// around it — which one is in view, and what an action there means for the
+// checkout it lives in.
 export function Pulls({ list = false }: PullsProps) {
   const { projectId, number } = useParams()
   const navigate = useNavigate()
@@ -250,7 +219,7 @@ export function Pulls({ list = false }: PullsProps) {
   } else if (loading) {
     body = <PullSkeleton />
   } else {
-    body = <EmptyState path={path} branch={branch} onOpened={reload} />
+    body = <PullsEmptyState path={path} branch={branch} onOpened={reload} />
   }
 
   return (
@@ -275,452 +244,6 @@ export function Pulls({ list = false }: PullsProps) {
   )
 }
 
-// Looking the pull request up is a gh round-trip, and the screen covers the
-// whole app while it runs — a lone "Loading…" in the middle of that much empty
-// space reads as a failure. The skeleton holds the header the answer will fill:
-// title, actions, status line, tabs, then the body.
-function PullSkeleton() {
-  return (
-    <div aria-busy>
-      <div className="border-b border-border px-6 pt-5">
-        <div className="flex items-start gap-4">
-          <Skeleton className="h-6 w-80 max-w-full" />
-          <div className="ml-auto flex flex-none items-center gap-2">
-            <Skeleton className="h-8 w-28" />
-            <Skeleton className="size-8" />
-            <Skeleton className="h-8 w-24" />
-          </div>
-        </div>
-        <div className="mt-4 flex items-center gap-4">
-          <Skeleton className="h-3 w-14" />
-          <Skeleton className="h-3 w-56" />
-          <Skeleton className="h-3 w-36" />
-        </div>
-        <div className="mt-5 flex gap-6 pb-3">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-3 w-24" />
-          <Skeleton className="h-3 w-14" />
-        </div>
-      </div>
-      <div className="flex max-w-3xl flex-col gap-3 px-6 py-6">
-        {BODY_ROWS.map((width) => (
-          <Skeleton key={width} className={`h-3 ${width}`} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// EditState carries a pending "edit commit message" merge: which method to run
-// and the message the dialog is editing. null when the dialog is closed.
-interface EditState {
-  method: MergeMethod
-  title: string
-  subject: string
-  body: string
-}
-
-// SessionAction is the header's "work on this pull request" button, resolved by
-// the screen: what it should say, whether it can run at all, and what it does.
-interface SessionAction {
-  /** "Open in Session", or "Go to session" once one is live on the branch. */
-  label: string
-  /** Why it cannot run (a fork PR), or null when it can. */
-  blocked: string | null
-  busy: boolean
-  run: () => void
-}
-
-interface PullRequestViewProps {
-  path: string
-  /** The checkout's HEAD; changing it refetches the diff under the Files tab. */
-  head: string
-  detail: PullRequestDetail
-  session: SessionAction
-  /** Re-run the lookup — the manual reload, for what HEAD can't announce. */
-  onRefresh: () => void
-  /** The merge landed; the screen decides what follows (a toast, the worktree). */
-  onMerged: () => void
-  onInject: (text: string) => void
-}
-
-function PullRequestView({
-  path,
-  head,
-  detail,
-  session,
-  onRefresh,
-  onMerged,
-  onInject,
-}: PullRequestViewProps) {
-  const [merging, setMerging] = useState(false)
-  const [approving, setApproving] = useState(false)
-  const [edit, setEdit] = useState<EditState | null>(null)
-  const [tab, setTab] = useState<"overview" | "commits" | "files" | "checks">("overview")
-  const commitCount = detail.commits?.length ?? 0
-  // A pull request the list reached by number may be over already, in which
-  // case there is nothing to merge and gh would refuse anyway.
-  const blocked =
-    detail.state !== "OPEN"
-      ? `Pull request is ${detail.state.toLowerCase()}`
-      : detail.isDraft
-        ? "Pull request is a draft"
-        : detail.mergeable === "CONFLICTING"
-          ? `Conflicts with ${detail.baseRefName}`
-          : null
-
-  const merge = async (method: MergeMethod, subject = "", body = "") => {
-    setMerging(true)
-    try {
-      await ProjectService.MergePullRequest(path, detail.number, method, subject, body)
-      setEdit(null)
-      onMerged()
-    } catch (err: unknown) {
-      toast.error(`Merge failed: ${errorText(err)}`)
-    } finally {
-      setMerging(false)
-    }
-  }
-
-  // A draft or a conflicting pull request can still be reviewed — only one that
-  // is already over cannot, which is why this does not reuse the merge gate.
-  const reviewBlocked =
-    detail.state !== "OPEN" ? `Pull request is ${detail.state.toLowerCase()}` : null
-
-  const approve = async () => {
-    setApproving(true)
-    try {
-      await ProjectService.ApprovePullRequest(path, detail.number)
-      toast.success(`Approved #${detail.number}`)
-      onRefresh()
-    } catch (err: unknown) {
-      toast.error(`Approve failed: ${errorText(err)}`)
-    } finally {
-      setApproving(false)
-    }
-  }
-
-  const openEdit = (method: Extract<MergeMethod, "squash" | "merge">) => {
-    setEdit(
-      method === "squash"
-        ? {
-            method,
-            title: "Squash and merge",
-            subject: `${detail.title} (#${detail.number})`,
-            body: detail.body,
-          }
-        : {
-            method,
-            title: "Create a merge commit",
-            subject: `Merge pull request #${detail.number} from ${detail.headRefName}`,
-            body: "",
-          },
-    )
-  }
-
-  return (
-    <>
-      <div className="flex-none border-b border-border px-6 pt-5">
-        <div className="flex items-start gap-4">
-          <h1 className="min-w-0 flex-1 text-lg font-semibold leading-snug">
-            <span className="text-muted-foreground">#{detail.number}</span> {detail.title}
-          </h1>
-          <div className="flex flex-none items-center gap-2">
-            {/* The same wrapper trick as the merge button below: a disabled
-                button takes no pointer events, so its own title never shows. */}
-            <span title={session.blocked ?? undefined}>
-              <Button
-                variant="ghost"
-                size="sm"
-                disabled={session.busy || session.blocked !== null}
-                onClick={session.run}
-                className="bg-accent/55 text-foreground hover:bg-accent"
-              >
-                <SquareTerminal />
-                {session.busy ? "Opening…" : session.label}
-              </Button>
-            </span>
-            {/* Approving twice is something GitHub allows and nobody means to
-                do, so an approved pull request says so instead of offering it
-                again — the verdict is in ReviewStat below either way. */}
-            <span title={reviewBlocked ?? undefined}>
-              <Button
-                variant="ghost"
-                size="sm"
-                disabled={
-                  approving || reviewBlocked !== null || detail.reviewDecision === "APPROVED"
-                }
-                onClick={() => void approve()}
-              >
-                <Check />
-                {approving
-                  ? "Approving…"
-                  : detail.reviewDecision === "APPROVED"
-                    ? "Approved"
-                    : "Approve"}
-              </Button>
-            </span>
-            {/* The reason rides on a wrapper: a disabled button takes no pointer
-                events, so its own title would never surface. */}
-            <span title={blocked ?? undefined}>
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  render={
-                    <Button size="sm" disabled={merging || blocked !== null}>
-                      <GitMerge />
-                      {merging ? "Merging…" : "Merge"}
-                      <ChevronDown />
-                    </Button>
-                  }
-                />
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem onClick={() => void merge("squash")}>
-                    Squash and merge
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => void merge("merge")}>
-                    Create a merge commit
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => void merge("rebase")}>
-                    Rebase and merge
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => openEdit("squash")}>
-                    Squash and merge, edit message…
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => openEdit("merge")}>
-                    Create a merge commit, edit message…
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </span>
-            {/* HEAD moving refetches on its own; this covers what it can't see —
-                a review, a check finishing, a PR opened from the terminal. */}
-            <Button variant="ghost" size="sm" onClick={onRefresh} aria-label="Refresh">
-              <RefreshCw />
-            </Button>
-            <Button variant="ghost" size="sm" onClick={() => void System.OpenExternal(detail.url)}>
-              <ExternalLink />
-              Open
-            </Button>
-          </div>
-        </div>
-
-        <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs">
-          <StateStat state={detail.state} isDraft={detail.isDraft} />
-          <span className="flex items-center gap-1.5 font-mono text-muted-foreground">
-            <GitBranch className="size-3.5" />
-            {detail.headRefName} → {detail.baseRefName}
-          </span>
-          {/* The counter is where the eye lands when CI is red; make it the way
-              into the list instead of a dead readout. */}
-          {detail.checks.total > 0 ? (
-            <button
-              type="button"
-              onClick={() => setTab("checks")}
-              className="rounded-sm transition-opacity hover:opacity-80"
-            >
-              <ChecksStat checks={detail.checks} />
-            </button>
-          ) : (
-            <ChecksStat checks={detail.checks} />
-          )}
-          <MergeableStat
-            mergeable={detail.mergeable}
-            base={detail.baseRefName}
-            state={detail.state}
-          />
-          <ReviewStat decision={detail.reviewDecision} />
-        </div>
-
-        <div role="tablist" className="mt-4 flex gap-1">
-          <TabButton active={tab === "overview"} onClick={() => setTab("overview")}>
-            Overview
-          </TabButton>
-          <TabButton active={tab === "commits"} onClick={() => setTab("commits")}>
-            Commits
-            {commitCount > 0 && (
-              <span className="tabular-nums text-muted-foreground">{commitCount}</span>
-            )}
-          </TabButton>
-          <TabButton active={tab === "files"} onClick={() => setTab("files")}>
-            Files changed
-            {detail.changedFiles > 0 && (
-              <span className="tabular-nums text-muted-foreground">{detail.changedFiles}</span>
-            )}
-          </TabButton>
-          {detail.checks.total > 0 && (
-            <TabButton active={tab === "checks"} onClick={() => setTab("checks")}>
-              Checks
-              <span className="tabular-nums text-muted-foreground">{detail.checks.total}</span>
-            </TabButton>
-          )}
-        </div>
-      </div>
-
-      <div role="tabpanel" className="flex-1 overflow-hidden">
-        {tab === "files" ? (
-          <PullsFiles
-            path={path}
-            number={detail.number}
-            head={head}
-            pullRequest={detail.url}
-            onInject={onInject}
-          />
-        ) : (
-          <div className="h-full overflow-y-auto">
-            {tab === "checks" && <PullsChecks checks={detail.checkRuns} />}
-            {tab === "commits" && <PullsCommits commits={detail.commits} />}
-            {tab === "overview" && (
-              <div className="max-w-3xl px-6 py-5">
-                {detail.body.trim() !== "" ? (
-                  <Markdown>{detail.body}</Markdown>
-                ) : (
-                  <p className="text-sm text-muted-foreground">No description.</p>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {edit && (
-        <MergeMessageDialog
-          edit={edit}
-          merging={merging}
-          onChange={setEdit}
-          onCancel={() => setEdit(null)}
-          onConfirm={() => void merge(edit.method, edit.subject, edit.body)}
-        />
-      )}
-    </>
-  )
-}
-
-function TabButton({
-  active,
-  onClick,
-  children,
-}: {
-  active: boolean
-  onClick: () => void
-  children: ReactNode
-}) {
-  return (
-    <button
-      type="button"
-      role="tab"
-      aria-selected={active}
-      onClick={onClick}
-      className={cn(
-        "-mb-px inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors",
-        active
-          ? "border-primary text-foreground"
-          : "border-transparent text-muted-foreground hover:text-foreground",
-      )}
-    >
-      {children}
-    </button>
-  )
-}
-
-interface MergeMessageDialogProps {
-  edit: EditState
-  merging: boolean
-  onChange: (next: EditState) => void
-  onCancel: () => void
-  onConfirm: () => void
-}
-
-function MergeMessageDialog({
-  edit,
-  merging,
-  onChange,
-  onCancel,
-  onConfirm,
-}: MergeMessageDialogProps) {
-  return (
-    <Dialog open onOpenChange={(next) => !next && onCancel()}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{edit.title}</DialogTitle>
-          <DialogDescription>Edit the commit message, then merge.</DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-3">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="merge-subject">Commit message</Label>
-            <Input
-              id="merge-subject"
-              value={edit.subject}
-              onChange={(e) => onChange({ ...edit, subject: e.target.value })}
-              autoFocus
-            />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="merge-body">Extended description</Label>
-            <textarea
-              id="merge-body"
-              value={edit.body}
-              onChange={(e) => onChange({ ...edit, body: e.target.value })}
-              rows={6}
-              placeholder="Optional"
-              className="min-h-24 w-full resize-y rounded-md border border-input bg-transparent px-2.5 py-1.5 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30"
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="ghost" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button onClick={onConfirm} disabled={merging || edit.subject.trim() === ""}>
-            <GitMerge />
-            {merging ? "Merging…" : edit.method === "squash" ? "Squash and merge" : "Merge"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-interface EmptyStateProps {
-  path: string
-  branch: string
-  onOpened: () => void
-}
-
-function EmptyState({ path, branch, onOpened }: EmptyStateProps) {
-  const [opening, setOpening] = useState(false)
-  const openPR = async () => {
-    setOpening(true)
-    try {
-      await ProjectService.CreatePullRequest(path)
-      onOpened()
-    } catch (err: unknown) {
-      toast.error(`Couldn’t open a pull request: ${errorText(err)}`)
-    } finally {
-      setOpening(false)
-    }
-  }
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
-      <GitPullRequestArrow className="size-8 text-muted-foreground" />
-      <p className="text-sm text-muted-foreground">
-        {branch ? (
-          <>
-            No open pull request for <span className="font-medium text-foreground">{branch}</span>.
-          </>
-        ) : (
-          "No open pull request."
-        )}
-      </p>
-      <Button variant="outline" size="sm" onClick={() => void openPR()} disabled={opening}>
-        <GitPullRequestArrow />
-        {opening ? "Opening…" : "Open pull request"}
-        <ExternalLink />
-      </Button>
-    </div>
-  )
-}
-
 // The screen-sized variant: the same muted line, centred in the whole area
 // rather than sitting at the top of a panel.
 function CentredNotice({ children }: { children: ReactNode }) {
diff --git a/frontend/src/components/pulls/PullsEmptyState.tsx b/frontend/src/components/pulls/PullsEmptyState.tsx
new file mode 100644
index 000000000..c4bb3cf53
--- /dev/null
+++ b/frontend/src/components/pulls/PullsEmptyState.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react"
+import { toast } from "sonner"
+import { ExternalLink, GitPullRequestArrow } from "lucide-react"
+import { ProjectService } from "@/lib/rpc"
+import { Button } from "@/components/ui/button"
+import { errorText } from "@/lib/utils"
+
+interface PullsEmptyStateProps {
+  path: string
+  branch: string
+  /** A pull request was opened on GitHub; the screen re-runs its lookup. */
+  onOpened: () => void
+}
+
+// What the Pulls screen shows for a checkout whose branch has no open pull
+// request: the fact, and the one action that changes it. `gh pr create --web`
+// hands the composing off to GitHub rather than growing a form here.
+export function PullsEmptyState({ path, branch, onOpened }: PullsEmptyStateProps) {
+  const [opening, setOpening] = useState(false)
+  const openPR = async () => {
+    setOpening(true)
+    try {
+      await ProjectService.CreatePullRequest(path)
+      onOpened()
+    } catch (err: unknown) {
+      toast.error(`Couldn’t open a pull request: ${errorText(err)}`)
+    } finally {
+      setOpening(false)
+    }
+  }
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+      <GitPullRequestArrow className="size-8 text-muted-foreground" />
+      <p className="text-sm text-muted-foreground">
+        {branch ? (
+          <>
+            No open pull request for <span className="font-medium text-foreground">{branch}</span>.
+          </>
+        ) : (
+          "No open pull request."
+        )}
+      </p>
+      <Button variant="outline" size="sm" onClick={() => void openPR()} disabled={opening}>
+        <GitPullRequestArrow />
+        {opening ? "Opening…" : "Open pull request"}
+        <ExternalLink />
+      </Button>
+    </div>
+  )
+}
diff --git a/frontend/src/components/pulls/PullsFiles.tsx b/frontend/src/components/pulls/PullsFiles.tsx
index 087d2a4c0..a2571d419 100644
--- a/frontend/src/components/pulls/PullsFiles.tsx
+++ b/frontend/src/components/pulls/PullsFiles.tsx
@@ -6,6 +6,7 @@ import { CollapseAllAction, useDiffBulk } from "@/components/diff/diff-bulk"
 import { FileDiff } from "@/components/diff/FileDiff"
 import { DiffStat } from "@/components/DiffStat"
 import { FileTree } from "@/components/FileTree"
+import { SkeletonLines } from "@/components/common/SkeletonLines"
 import { Skeleton } from "@/components/ui/skeleton"
 import { buildTree } from "@/lib/git/file-tree"
 import {
@@ -16,6 +17,7 @@ import {
   viewedFiles,
 } from "@/lib/pulls/pull-request-viewed"
 import { usePullRequestDiff } from "@/lib/pulls/use-pull-request-diff"
+import { usePanelVisible } from "@/lib/use-panel-visible"
 
 // The file tree is a navigator, not the review itself: hiding it hands the
 // whole width to the diff. Remembered in localStorage like every other UI pref,
@@ -35,9 +37,7 @@ function FilesSkeleton({ tree }: { tree: boolean }) {
     <div className="flex h-full" aria-busy>
       {tree && (
         <div className="flex w-60 shrink-0 flex-col gap-3 border-r border-border p-3">
-          {TREE_ROWS.map((width) => (
-            <Skeleton key={width} className={`h-3 ${width}`} />
-          ))}
+          <SkeletonLines widths={TREE_ROWS} />
         </div>
       )}
       <div className="flex flex-1 flex-col overflow-hidden">
@@ -56,9 +56,7 @@ function FilesSkeleton({ tree }: { tree: boolean }) {
                 <Skeleton className="ml-auto h-3 w-14" />
               </div>
               <div className="flex max-w-3xl flex-col gap-2 pl-9">
-                {CODE_ROWS.map((width) => (
-                  <Skeleton key={width} className={`h-2.5 ${width}`} />
-                ))}
+                <SkeletonLines widths={CODE_ROWS} height="h-2.5" />
               </div>
             </div>
           ))}
@@ -92,7 +90,7 @@ export function PullsFiles({ path, number, head, pullRequest, onInject }: PullsF
   // Every file mounts its own CodeMirror, so a wide PR earns a way to fold them
   // all at once — same directive the Review dock hands its panel.
   const [bulk, toggleAll] = useDiffBulk()
-  const [treeOpen, setTreeOpen] = useState(() => localStorage.getItem(TREE_HIDDEN_KEY) !== "1")
+  const [treeOpen, toggleTree] = usePanelVisible(TREE_HIDDEN_KEY)
   const viewed = useSyncExternalStore(subscribeViewed, () => viewedFiles(pullRequest))
   // A tick is against the file's content, so a new commit unticks exactly the
   // files it rewrote. Recomputed only when the diff itself changes.
@@ -125,12 +123,6 @@ export function PullsFiles({ path, number, head, pullRequest, onInject }: PullsF
     rows.current.get(target)?.scrollIntoView({ block: "start", behavior: "smooth" })
   }
 
-  const toggleTree = () => {
-    const next = !treeOpen
-    setTreeOpen(next)
-    localStorage.setItem(TREE_HIDDEN_KEY, next ? "0" : "1")
-  }
-
   return (
     <div className="flex h-full">
       {treeOpen && (
diff --git a/frontend/src/components/pulls/PullsList.tsx b/frontend/src/components/pulls/PullsList.tsx
index dcd3e07ae..0f10242f6 100644
--- a/frontend/src/components/pulls/PullsList.tsx
+++ b/frontend/src/components/pulls/PullsList.tsx
@@ -37,6 +37,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { usePanelVisible } from "@/lib/use-panel-visible"
 import { cn } from "@/lib/utils"
 
 // The dot's colour is the only chroma in a row, so it has to mean something: a
@@ -97,7 +98,7 @@ export function PullsList({
   parsed,
   checkedOutBranches,
 }: PullsListProps) {
-  const [open, setOpen] = useState(() => localStorage.getItem(LIST_HIDDEN_KEY) !== "1")
+  const [open, toggle] = usePanelVisible(LIST_HIDDEN_KEY)
   const [filter, setFilter] = useState<PullsFilter>("all")
   const counts = useMemo(() => filterCounts(list, parsed), [list, parsed])
   const rows = useMemo(
@@ -110,13 +111,6 @@ export function PullsList({
     onSortChange(next)
   }
 
-  const toggle = () => {
-    setOpen((wasOpen) => {
-      localStorage.setItem(LIST_HIDDEN_KEY, wasOpen ? "1" : "0")
-      return !wasOpen
-    })
-  }
-
   // Collapsed, the column keeps a rail: the toggle has to survive its own
   // click, and the seam keeps the pull request from running to the window edge.
   if (!open) {
@@ -319,7 +313,7 @@ function ListSkeleton() {
     <div aria-busy className="flex flex-col gap-3 px-2 py-2">
       {SKELETON_ROWS.map((width) => (
         <div key={width} className="flex flex-col gap-1.5">
-          <Skeleton className={`h-3 ${width}`} />
+          <Skeleton className={cn("h-3", width)} />
           <Skeleton className="h-2.5 w-1/3" />
         </div>
       ))}
diff --git a/frontend/src/components/settings/AppearanceSettings.tsx b/frontend/src/components/settings/AppearanceSettings.tsx
index 9e9bff6cb..42e18e458 100644
--- a/frontend/src/components/settings/AppearanceSettings.tsx
+++ b/frontend/src/components/settings/AppearanceSettings.tsx
@@ -17,6 +17,8 @@ import {
   TERMINAL_FONT_SIZE_STEP,
   ZOOM_MAX,
   ZOOM_MIN,
+  THEMES,
+  TERMINAL_THEMES,
   ZOOM_STEP,
   useSettings,
 } from "@/providers/settings"
@@ -26,21 +28,27 @@ import { SegmentedControl } from "./SegmentedControl"
 import { SettingBlock, SettingGroup } from "./SettingBlock"
 import { FontSetting } from "./FontSetting"
 
-const THEME_OPTIONS: ReadonlyArray<{ value: Theme; label: string; icon: JSX.Element }> = [
-  { value: "system", label: "System", icon: <Monitor /> },
-  { value: "light", label: "Light", icon: <Sun /> },
-  { value: "dark", label: "Dark", icon: <Moon /> },
-]
+// How each theme value presents itself. Built off THEMES/TERMINAL_THEMES so the
+// picker cannot drift from what the provider persists — adding a theme there
+// is what puts it on screen, and forgetting an entry here is a type error.
+const THEME_LABELS: Record<Theme, { label: string; icon: JSX.Element }> = {
+  system: { label: "System", icon: <Monitor /> },
+  light: { label: "Light", icon: <Sun /> },
+  dark: { label: "Dark", icon: <Moon /> },
+}
+
+const TERMINAL_THEME_LABELS: Record<TerminalTheme, { label: string; icon: JSX.Element }> = {
+  match: { label: "Match app", icon: <Monitor /> },
+  light: { label: "Light", icon: <Sun /> },
+  dark: { label: "Dark", icon: <Moon /> },
+}
+
+const THEME_OPTIONS = THEMES.map((value) => ({ value, ...THEME_LABELS[value] }))
 
-const TERMINAL_THEME_OPTIONS: ReadonlyArray<{
-  value: TerminalTheme
-  label: string
-  icon: JSX.Element
-}> = [
-  { value: "match", label: "Match app", icon: <Monitor /> },
-  { value: "light", label: "Light", icon: <Sun /> },
-  { value: "dark", label: "Dark", icon: <Moon /> },
-]
+const TERMINAL_THEME_OPTIONS = TERMINAL_THEMES.map((value) => ({
+  value,
+  ...TERMINAL_THEME_LABELS[value],
+}))
 
 // Appearance holds every look-and-feel control, split into an Interface group
 // (theme, zoom) and a Terminal group (background, text size, font) so the two
diff --git a/frontend/src/components/settings/VersionControlSettings.tsx b/frontend/src/components/settings/VersionControlSettings.tsx
index 4b2db5f06..65e531d1e 100644
--- a/frontend/src/components/settings/VersionControlSettings.tsx
+++ b/frontend/src/components/settings/VersionControlSettings.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react"
 import { ProjectService, Store } from "@/lib/rpc"
 import { accountLabel, upgradeAccount } from "@/lib/gh-account"
+import { GH_ACCOUNT_KEY } from "@/lib/project-settings"
+import { errorText } from "@/lib/utils"
 import { invalidatePullRequests } from "@/lib/pulls/pull-request-lookup"
 import { useProjects } from "@/providers/projects"
 import {
@@ -13,9 +15,6 @@ import {
 } from "@/components/ui/select"
 import { SettingBlock } from "./SettingBlock"
 
-// Same key the Go store resolves (internal/store ghAccountKey).
-export const GH_ACCOUNT_KEY = "vcs.account"
-
 // The stored value for "no override" is "", which a Select item cannot carry —
 // this stands in for it in the picker only.
 const ACTIVE_ACCOUNT = "__active__"
@@ -38,7 +37,7 @@ export function VersionControlSettings({ projectId }: { projectId?: string }) {
         setAccounts(list ?? [])
         setError("")
       })
-      .catch((err: unknown) => setError(err instanceof Error ? err.message : String(err)))
+      .catch((err: unknown) => setError(errorText(err)))
   }, [])
 
   useEffect(() => {
diff --git a/frontend/src/components/settings/WorktreeSetupSettings.tsx b/frontend/src/components/settings/WorktreeSetupSettings.tsx
index 1d87db40d..c8929434d 100644
--- a/frontend/src/components/settings/WorktreeSetupSettings.tsx
+++ b/frontend/src/components/settings/WorktreeSetupSettings.tsx
@@ -1,12 +1,10 @@
 import { useEffect, useState } from "react"
 import { Store } from "@/lib/rpc"
+import { WORKTREE_SETUP_KEY } from "@/lib/project-settings"
 import { useProjects } from "@/providers/projects"
 import { Input } from "@/components/ui/input"
 import { SettingBlock } from "./SettingBlock"
 
-// Same key the Go store resolves (internal/store worktreeSetupKey).
-export const WORKTREE_SETUP_KEY = "worktree.setup"
-
 // WorktreeSetupSettings edits the project's worktree setup script: a shell
 // command run in a new worktree session's terminal ahead of the provider,
 // right after the worktree is created — dependency installs and generated
diff --git a/frontend/src/components/sidebar/SessionGroup.tsx b/frontend/src/components/sidebar/SessionGroup.tsx
index e56ca3521..eba788930 100644
--- a/frontend/src/components/sidebar/SessionGroup.tsx
+++ b/frontend/src/components/sidebar/SessionGroup.tsx
@@ -1,30 +1,32 @@
 import { useSyncExternalStore } from "react"
+import { useNavigate } from "react-router-dom"
 import { DndContext, closestCenter } from "@dnd-kit/core"
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { useSortableList, verticalAxis } from "@/lib/use-sortable-list"
 import { baseName } from "@/lib/paths"
 import type { Session } from "@/lib/session/sessions"
+import { useProjects } from "@/providers/projects"
 import { SessionCard } from "./SessionCard"
 import { PullRequestCard } from "./PullRequestCard"
 import { isPullsOpen, subscribePullsCard } from "@/lib/pulls-card-store"
 
 interface SessionGroupProps {
+  projectId: string
   // "" for the project's own root, else the worktree checkout path.
   path: string
   sessions: Session[]
   projectPath: string
-  projectName: string
   activeId: string
   // A divider label is drawn only when the sidebar holds more than one group; a
   // lone project with no worktrees keeps its old flat, header-less list.
   showHeader: boolean
   // Commits a new order for this group's sessions; a drag can only ever produce
-  // one, since each group owns an isolated DndContext.
+  // one, since each group owns an isolated DndContext. Not derivable here: the
+  // sidebar splices it back into the flat list its siblings share.
   onReorder: (ids: string[]) => void
-  onSelect: (id: string) => void
+  // Closing stays the sidebar's: the last session of a worktree raises the
+  // keep-or-remove dialog it owns (useWorktreeClose).
   onClose: (session: Session) => void
-  onRename: (id: string, label: string) => void
-  onOpenTerminal: (cwd: string) => void
   // The worktree's pull-request entry: opens the Pulls screen for this branch.
   // pullsActive marks it when that screen is showing this group's PR. Rendered
   // only for worktree groups (a truthy path).
@@ -38,31 +40,41 @@ interface SessionGroupProps {
 // the group's own checkout path, never a session's live cwd, so a `cd` deeper
 // into the tree never re-buckets the group. The isolated DndContext is what
 // confines a drag to reordering within the group.
+//
+// The card actions needing nothing but a session id — select, rename, open a
+// terminal beside it — are wired here rather than threaded down from the
+// sidebar, which keeps only the ones carrying its own state.
 export function SessionGroup({
+  projectId,
   path,
   sessions,
   projectPath,
-  projectName,
   activeId,
   showHeader,
   onReorder,
-  onSelect,
   onClose,
-  onRename,
-  onOpenTerminal,
   pullsActive,
   onPulls,
   onClosePulls,
 }: SessionGroupProps) {
+  const { activateSession, renameSession, newSession } = useProjects()
+  const navigate = useNavigate()
   const ids = sessions.map((session) => session.id)
   const { sensors, onDragEnd } = useSortableList(ids, onReorder)
-  const name = path ? baseName(path) : projectName
+  const name = baseName(path || projectPath)
   // The PR card keys off the group's real checkout — the project root for the
   // root group (empty path), else the worktree — so a root project on a feature
   // branch parks its card too, not only worktrees.
   const checkout = path || projectPath
   const pullsOpen = useSyncExternalStore(subscribePullsCard, () => isPullsOpen(checkout))
 
+  const select = (id: string) => {
+    activateSession(projectId, id)
+    // From the settings screen this returns to the terminal; on the project
+    // route it is a no-op.
+    navigate(`/projects/${projectId}`)
+  }
+
   return (
     <div className="flex flex-col gap-1.5">
       {showHeader && (
@@ -87,10 +99,10 @@ export function SessionGroup({
                 session={session}
                 path={projectPath}
                 active={session.id === activeId}
-                onSelect={() => onSelect(session.id)}
+                onSelect={() => select(session.id)}
                 onClose={() => onClose(session)}
-                onRename={(label) => onRename(session.id, label)}
-                onOpenTerminal={onOpenTerminal}
+                onRename={(label) => renameSession(projectId, session.id, label)}
+                onOpenTerminal={(cwd) => newSession(projectId, "shell", cwd)}
                 onPulls={onPulls}
               />
             ))}
diff --git a/frontend/src/components/sidebar/SessionSidebar.tsx b/frontend/src/components/sidebar/SessionSidebar.tsx
index 424793f80..1bc14582a 100644
--- a/frontend/src/components/sidebar/SessionSidebar.tsx
+++ b/frontend/src/components/sidebar/SessionSidebar.tsx
@@ -1,8 +1,7 @@
 import { useState, useSyncExternalStore } from "react"
 import { useMatch, useNavigate } from "react-router-dom"
 import { GitBranch, GitPullRequestArrow, Plus, Terminal } from "lucide-react"
-import { toast } from "sonner"
-import { ProjectService, Store } from "@/lib/rpc"
+import { ProjectService } from "@/lib/rpc"
 import { closeSettings, isSettingsOpen, subscribeSettingsCard } from "@/lib/settings-card-store"
 import { closePulls, openPulls } from "@/lib/pulls-card-store"
 import {
@@ -26,20 +25,13 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { useProjects } from "@/providers/projects"
 import { queueSetup } from "@/lib/terminal/setup-queue"
-import {
-  activeSessionId,
-  groupByWorktree,
-  isLastWorktreeSession,
-  sessionsOf,
-  type Session,
-} from "@/lib/session/sessions"
-import { baseName } from "@/lib/paths"
+import { activeSessionId, groupByWorktree, sessionsOf } from "@/lib/session/sessions"
 import { CloseWorktreeDialog, ForceRemoveWorktreeDialog } from "./CloseWorktreeDialog"
 import { SessionGroup } from "./SessionGroup"
 import { WorktreeDialog } from "./WorktreeDialog"
+import { useWorktreeClose } from "./useWorktreeClose"
 import { useGitStatus } from "@/lib/git/use-git-status"
 import { usePanelWidth } from "@/lib/use-panel-width"
-import { errorText } from "@/lib/utils"
 
 // SessionSidebar lists the active project's sessions and can be drag-resized
 // within a fixed pixel range. Width persists across restarts. It renders nothing
@@ -55,10 +47,7 @@ export function SessionSidebar() {
     newSession,
     newWorktreeSession,
     reopenWorktreeSession,
-    closeSession,
-    keepSession,
     activateSession,
-    renameSession,
     reorderSessions,
   } = useProjects()
   // Match the project subtree ("/*") so the sidebar stays mounted — and keeps
@@ -88,10 +77,9 @@ export function SessionSidebar() {
     edge: "right",
   })
   const [worktreeOpen, setWorktreeOpen] = useState(false)
-  const [pendingClose, setPendingClose] = useState<Session | null>(null)
-  const [pendingForce, setPendingForce] = useState<Session | null>(null)
   // Resolved ahead of the no-project bail below: hooks cannot sit behind it.
   const list = sessionsOf(sessions, projectId ?? "")
+  const worktreeClose = useWorktreeClose(projectId ?? "", path, list)
 
   if (!projectId) {
     return null
@@ -102,7 +90,6 @@ export function SessionSidebar() {
   // the view; its own sidebar entry reads as active instead.
   const activeId = onSettings || onPullsRoute ? "" : realActiveId
   const groups = groupByWorktree(list)
-  const projectName = baseName(path)
 
   // A drag reorders one group only; splice its new order back into the flat list
   // in group order and persist the whole thing. reorderSessions bails on any
@@ -129,59 +116,6 @@ export function SessionSidebar() {
     setWorktreeOpen(false)
   }
 
-  const requestClose = (session: Session) => {
-    if (isLastWorktreeSession(list, session)) {
-      setPendingClose(session)
-      return
-    }
-    closeSession(projectId, session.id)
-  }
-
-  const keepAndClose = () => {
-    if (pendingClose) {
-      keepSession(projectId, pendingClose.id)
-    }
-    setPendingClose(null)
-  }
-
-  // Close first so the PTY running inside the worktree dies before git tries
-  // to remove it. A refused removal surfaces as a toast; the checkout stays on
-  // disk and reappears in the new-worktree picker.
-  const closeAndRemove = (session: Session, force: boolean) => {
-    closeSession(projectId, session.id)
-    // The checkout is going away, so no parked row for it may linger — one would
-    // otherwise resurface a resume against a worktree that no longer exists.
-    void Store.PurgeWorktreeSessions(projectId, session.path ?? "")
-    ProjectService.RemoveWorktree(path, session.path ?? "", force).catch((err: unknown) => {
-      toast.error(`Failed to remove worktree: ${errorText(err)}`)
-    })
-  }
-
-  const removeAndClose = async () => {
-    const session = pendingClose
-    setPendingClose(null)
-    if (!session?.path) {
-      return
-    }
-    // A dirty worktree needs a second confirmation before --force discards its
-    // changes. A failed check falls through to the plain remove, whose own
-    // refusal surfaces as a toast.
-    const dirty = await ProjectService.WorktreeDirty(session.path).catch(() => false)
-    if (dirty) {
-      setPendingForce(session)
-      return
-    }
-    closeAndRemove(session, false)
-  }
-
-  const forceRemoveAndClose = () => {
-    const session = pendingForce
-    setPendingForce(null)
-    if (session?.path) {
-      closeAndRemove(session, true)
-    }
-  }
-
   return (
     <aside
       className="relative flex shrink-0 flex-col border-r border-border bg-sidebar p-2"
@@ -263,24 +197,16 @@ export function SessionSidebar() {
           return (
             <SessionGroup
               key={group.path || "__root__"}
+              projectId={projectId}
               path={group.path}
               sessions={group.sessions}
               projectPath={path}
-              projectName={projectName}
               activeId={activeId}
               // The divider only earns its place once a worktree splits the list;
               // a lone group keeps the old flat, header-less look.
               showHeader={groups.length > 1}
               onReorder={(ids) => commitGroupOrder(group.path, ids)}
-              onSelect={(id) => {
-                activateSession(projectId, id)
-                // From the settings screen this returns to the terminal; on the
-                // project route it is a no-op.
-                navigate(`/projects/${projectId}`)
-              }}
-              onClose={(session) => requestClose(session)}
-              onRename={(id, label) => renameSession(projectId, id, label)}
-              onOpenTerminal={(cwd) => newSession(projectId, "shell", cwd)}
+              onClose={worktreeClose.requestClose}
               pullsActive={onPullsRoute && groupActive}
               onPulls={() => {
                 openPulls(group.path || path)
@@ -310,15 +236,15 @@ export function SessionSidebar() {
         onResume={resumeWorktree}
       />
       <CloseWorktreeDialog
-        session={pendingClose}
-        onCancel={() => setPendingClose(null)}
-        onKeep={keepAndClose}
-        onRemove={removeAndClose}
+        session={worktreeClose.pendingClose}
+        onCancel={worktreeClose.cancel}
+        onKeep={worktreeClose.keep}
+        onRemove={worktreeClose.remove}
       />
       <ForceRemoveWorktreeDialog
-        session={pendingForce}
-        onCancel={() => setPendingForce(null)}
-        onForceRemove={forceRemoveAndClose}
+        session={worktreeClose.pendingForce}
+        onCancel={worktreeClose.cancel}
+        onForceRemove={worktreeClose.forceRemove}
       />
 
       <ResizeHandle edge="right" label="Resize sidebar" handleProps={handleProps} />
diff --git a/frontend/src/components/sidebar/useWorktreeClose.ts b/frontend/src/components/sidebar/useWorktreeClose.ts
new file mode 100644
index 000000000..3993d19d5
--- /dev/null
+++ b/frontend/src/components/sidebar/useWorktreeClose.ts
@@ -0,0 +1,108 @@
+import { useState } from "react"
+import { toast } from "sonner"
+import { ProjectService, Store } from "@/lib/rpc"
+import { isLastWorktreeSession, type Session } from "@/lib/session/sessions"
+import { useProjects } from "@/providers/projects"
+import { errorText } from "@/lib/utils"
+
+export interface WorktreeClose {
+  /** Close a session. The last one in a worktree opens the keep-or-remove
+   * question instead, since it is the last thing holding that checkout. */
+  requestClose: (session: Session) => void
+  /** The session whose keep-or-remove dialog is open, or null. */
+  pendingClose: Session | null
+  /** The dirty worktree waiting on a --force confirmation, or null. */
+  pendingForce: Session | null
+  /** Dismiss whichever dialog is open, changing nothing. */
+  cancel: () => void
+  /** Close the session but park its row, so the worktree can be resumed. */
+  keep: () => void
+  /** Close the session and remove the checkout; a dirty one asks again first. */
+  remove: () => void
+  /** Confirmed: remove the dirty checkout, discarding what was never committed. */
+  forceRemove: () => void
+}
+
+// useWorktreeClose owns the two-step question closing a worktree's last session
+// raises — keep the checkout for later, or remove it, and if it is dirty, say so
+// once more before --force discards work that lives nowhere else. Every step
+// past the first is a dialog, which is why this is a state machine and not a
+// handler: the answer arrives renders later than the click.
+//
+// Closing a session that is not the last of its worktree never gets here; it
+// goes straight through, because nothing is at stake.
+export function useWorktreeClose(
+  projectId: string,
+  projectPath: string,
+  sessions: Session[],
+): WorktreeClose {
+  const { closeSession, keepSession } = useProjects()
+  const [pendingClose, setPendingClose] = useState<Session | null>(null)
+  const [pendingForce, setPendingForce] = useState<Session | null>(null)
+
+  // Close first so the PTY running inside the worktree dies before git tries
+  // to remove it. A refused removal surfaces as a toast; the checkout stays on
+  // disk and reappears in the new-worktree picker.
+  const closeAndRemove = (session: Session, force: boolean) => {
+    closeSession(projectId, session.id)
+    // The checkout is going away, so no parked row for it may linger — one would
+    // otherwise resurface a resume against a worktree that no longer exists.
+    void Store.PurgeWorktreeSessions(projectId, session.path ?? "")
+    ProjectService.RemoveWorktree(projectPath, session.path ?? "", force).catch((err: unknown) => {
+      toast.error(`Failed to remove worktree: ${errorText(err)}`)
+    })
+  }
+
+  return {
+    pendingClose,
+    pendingForce,
+
+    requestClose(session) {
+      if (isLastWorktreeSession(sessions, session)) {
+        setPendingClose(session)
+        return
+      }
+      closeSession(projectId, session.id)
+    },
+
+    cancel() {
+      setPendingClose(null)
+      setPendingForce(null)
+    },
+
+    keep() {
+      if (pendingClose) {
+        keepSession(projectId, pendingClose.id)
+      }
+      setPendingClose(null)
+    },
+
+    remove() {
+      const session = pendingClose
+      setPendingClose(null)
+      if (!session?.path) {
+        return
+      }
+      // A dirty worktree needs a second confirmation before --force discards its
+      // changes. A failed check falls through to the plain remove, whose own
+      // refusal surfaces as a toast.
+      void ProjectService.WorktreeDirty(session.path)
+        .catch(() => false)
+        .then((dirty) => {
+          if (dirty) {
+            setPendingForce(session)
+            return
+          }
+          closeAndRemove(session, false)
+        })
+    },
+
+    forceRemove() {
+      const session = pendingForce
+      setPendingForce(null)
+      if (session?.path) {
+        closeAndRemove(session, true)
+      }
+    },
+  }
+}
diff --git a/frontend/src/components/tabs/NotificationsButton.tsx b/frontend/src/components/tabs/NotificationsButton.tsx
index f7a1b0944..ca8dd933e 100644
--- a/frontend/src/components/tabs/NotificationsButton.tsx
+++ b/frontend/src/components/tabs/NotificationsButton.tsx
@@ -44,7 +44,10 @@ export function NotificationsButton() {
     <DropdownMenu>
       <DropdownMenuTrigger
         title="Notifications"
-        aria-label="Notifications"
+        // The count belongs in the trigger's own name: it rode an aria-label on
+        // the dot below, which is a plain span with no role, so nothing
+        // announced it.
+        aria-label={items.length > 0 ? `Notifications, ${items.length} pending` : "Notifications"}
         render={
           <Button
             variant="ghost"
@@ -56,7 +59,7 @@ export function NotificationsButton() {
         <Bell className="size-4" />
         {items.length > 0 && (
           <span
-            aria-label={`${items.length} pending`}
+            aria-hidden
             className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-red-500 ring-2 ring-sidebar"
           />
         )}
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
deleted file mode 100644
index 73234c87d..000000000
--- a/frontend/src/components/ui/card.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        "font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
diff --git a/frontend/src/lib/git/use-checkouts.ts b/frontend/src/lib/git/use-checkouts.ts
index 2d1427f26..ee1c4d5a3 100644
--- a/frontend/src/lib/git/use-checkouts.ts
+++ b/frontend/src/lib/git/use-checkouts.ts
@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react"
 import { ProjectService } from "@/lib/rpc"
 import type { Worktree } from "@/lib/api-types"
+import { useRemoteResource } from "@/lib/use-remote-resource"
+
+const NO_CHECKOUTS: Worktree[] = []
 
 // useCheckouts lists every checkout of the project that holds a branch — its
 // own directory as much as its linked worktrees. It answers the question the
@@ -13,37 +15,15 @@ import type { Worktree } from "@/lib/api-types"
 // — a worktree can be created or a branch switched from a terminal — and
 // through refresh() right after this screen creates one itself. An error yields
 // an empty list: the worst it costs is a checkout attempt that gh refuses with
-// its own message.
+// its own message, which is why the error itself is dropped here.
 export function useCheckouts(projectPath: string): {
   checkouts: Worktree[]
   refresh: () => void
 } {
-  const [checkouts, setCheckouts] = useState<Worktree[]>([])
-  const seq = useRef(0)
-
-  const refresh = useCallback(() => {
-    if (!projectPath) {
-      setCheckouts([])
-      return
-    }
-    const mine = ++seq.current
-    ProjectService.ListCheckouts(projectPath)
-      .then((list) => {
-        if (mine === seq.current) setCheckouts(list ?? [])
-      })
-      .catch(() => {
-        if (mine === seq.current) setCheckouts([])
-      })
-  }, [projectPath])
-
-  useEffect(() => {
-    refresh()
-    window.addEventListener("focus", refresh)
-    return () => {
-      seq.current++
-      window.removeEventListener("focus", refresh)
-    }
-  }, [refresh])
-
-  return { checkouts, refresh }
+  const { data, refresh } = useRemoteResource(
+    projectPath,
+    () => ProjectService.ListCheckouts(projectPath).then((list) => list ?? NO_CHECKOUTS),
+    { empty: NO_CHECKOUTS, refetchOnFocus: true },
+  )
+  return { checkouts: data, refresh }
 }
diff --git a/frontend/src/lib/hotkeys.ts b/frontend/src/lib/hotkeys.ts
index 49d6280ea..5478123a5 100644
--- a/frontend/src/lib/hotkeys.ts
+++ b/frontend/src/lib/hotkeys.ts
@@ -1,3 +1,5 @@
+import { readPref, writePref } from "@/lib/prefs"
+
 // Global keyboard shortcuts. Combos are user-configurable and persisted to
 // localStorage, matching every other setting (see settings.tsx). `mod` is the
 // platform primary modifier — Ctrl on Windows/Linux, Cmd on macOS — so a single
@@ -141,7 +143,7 @@ export function mergeHotkeys(overrides: unknown): Hotkeys {
 
 export function loadHotkeys(): Hotkeys {
   try {
-    const raw = localStorage.getItem(STORAGE_KEY)
+    const raw = readPref(STORAGE_KEY)
     return raw ? mergeHotkeys(JSON.parse(raw)) : DEFAULT_HOTKEYS
   } catch {
     return DEFAULT_HOTKEYS
@@ -149,5 +151,5 @@ export function loadHotkeys(): Hotkeys {
 }
 
 export function saveHotkeys(hotkeys: Hotkeys): void {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(hotkeys))
+  writePref(STORAGE_KEY, JSON.stringify(hotkeys))
 }
diff --git a/frontend/src/lib/prefs.test.ts b/frontend/src/lib/prefs.test.ts
new file mode 100644
index 000000000..5fc7f9358
--- /dev/null
+++ b/frontend/src/lib/prefs.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest"
+import { parseBoolPref, parseEnumPref, parseNumberPref } from "./prefs"
+
+const THEMES = ["system", "light", "dark"] as const
+
+describe("parseEnumPref", () => {
+  it("keeps a value the build knows", () => {
+    expect(parseEnumPref("dark", THEMES, "system")).toBe("dark")
+  })
+
+  it("falls back for an absent key", () => {
+    expect(parseEnumPref(null, THEMES, "system")).toBe("system")
+  })
+
+  it("falls back for a value from another build", () => {
+    expect(parseEnumPref("solarized", THEMES, "system")).toBe("system")
+  })
+
+  it("does not accept a value that only looks like one", () => {
+    expect(parseEnumPref("Dark", THEMES, "system")).toBe("system")
+    expect(parseEnumPref("", THEMES, "system")).toBe("system")
+  })
+})
+
+describe("parseNumberPref", () => {
+  const clamp = (value: number) => Math.min(32, Math.max(8, Math.round(value)))
+
+  it("clamps a stored value into this build's bounds", () => {
+    expect(parseNumberPref("14", 14, clamp)).toBe(14)
+    expect(parseNumberPref("999", 14, clamp)).toBe(32)
+    expect(parseNumberPref("2", 14, clamp)).toBe(8)
+  })
+
+  it("falls back for an absent key", () => {
+    expect(parseNumberPref(null, 14, clamp)).toBe(14)
+  })
+
+  it("falls back for anything that is not a number", () => {
+    expect(parseNumberPref("large", 14, clamp)).toBe(14)
+    expect(parseNumberPref("", 14, clamp)).toBe(14)
+    expect(parseNumberPref("Infinity", 14, clamp)).toBe(14)
+  })
+
+  // A magnitude of zero or less is garbage, not a small setting: clamping it to
+  // the minimum would silently accept it.
+  it("falls back rather than clamping a non-positive value", () => {
+    expect(parseNumberPref("0", 14, clamp)).toBe(14)
+    expect(parseNumberPref("-3", 14, clamp)).toBe(14)
+  })
+})
+
+describe("parseBoolPref", () => {
+  it("reads what writePref emits", () => {
+    expect(parseBoolPref("true", false)).toBe(true)
+    expect(parseBoolPref("false", true)).toBe(false)
+  })
+
+  it("falls back for an absent key", () => {
+    expect(parseBoolPref(null, true)).toBe(true)
+    expect(parseBoolPref(null, false)).toBe(false)
+  })
+
+  it("falls back for a value it did not write", () => {
+    expect(parseBoolPref("1", true)).toBe(true)
+    expect(parseBoolPref("1", false)).toBe(false)
+    expect(parseBoolPref("yes", false)).toBe(false)
+  })
+})
diff --git a/frontend/src/lib/prefs.ts b/frontend/src/lib/prefs.ts
new file mode 100644
index 000000000..eed3fb12b
--- /dev/null
+++ b/frontend/src/lib/prefs.ts
@@ -0,0 +1,52 @@
+// UI preferences live in the page's localStorage (see the root CLAUDE.md:
+// the workspace is SQLite, the prefs are not). What each stored string means
+// is the parsing half, kept pure so the suite owns it; reading and writing the
+// key itself is the boundary half, and stays a two-line wrapper — the same
+// split parsePullsSort/readPullsSort already uses.
+//
+// Every reader answers with the fallback for a key that is absent, or that
+// holds something this build no longer understands. A pref is a convenience:
+// it must never be able to break a launch.
+
+export function readPref(key: string): string | null {
+  return localStorage.getItem(key)
+}
+
+export function writePref(key: string, value: string | number | boolean): void {
+  localStorage.setItem(key, String(value))
+}
+
+/** One of a known set — a theme, a sort. Anything else is a value from another
+ * build (or a hand-edited store) and reads as the fallback. */
+export function parseEnumPref<T extends string>(
+  raw: string | null,
+  allowed: readonly T[],
+  fallback: T,
+): T {
+  return allowed.find((value) => value === raw) ?? fallback
+}
+
+/** A numeric pref, put through the setting's own clamp so a value from a build
+ * with different bounds lands inside this one's. A non-positive number is
+ * treated as absent rather than clamped: both numeric prefs are magnitudes, so
+ * a 0 is garbage, and clamping it to the minimum would hide that. */
+export function parseNumberPref(
+  raw: string | null,
+  fallback: number,
+  clamp: (value: number) => number,
+): number {
+  const value = Number(raw)
+  return raw !== null && Number.isFinite(value) && value > 0 ? clamp(value) : fallback
+}
+
+/** A flag. Only what writePref emits for a boolean counts; anything else is
+ * the fallback, so a half-written or foreign value cannot pin a toggle. */
+export function parseBoolPref(raw: string | null, fallback: boolean): boolean {
+  if (raw === "true") {
+    return true
+  }
+  if (raw === "false") {
+    return false
+  }
+  return fallback
+}
diff --git a/frontend/src/lib/project-settings.ts b/frontend/src/lib/project-settings.ts
new file mode 100644
index 000000000..e915b0f88
--- /dev/null
+++ b/frontend/src/lib/project-settings.ts
@@ -0,0 +1,13 @@
+// The per-project settings keys, mirroring internal/store/settings.go. Hand-
+// owned like api-types.ts: the Go side resolves these same strings on its own
+// (it reads them for the gh token and the worktree spawn, not only when the UI
+// asks), so a rename there is a rename here in the same change.
+//
+// They live in lib rather than beside the settings panes that write them
+// because the contract is the backend's, not the pane's.
+
+/** Which authenticated GitHub account lich's gh calls run as for a project. */
+export const GH_ACCOUNT_KEY = "vcs.account"
+
+/** The script a fresh worktree runs before its provider starts. */
+export const WORKTREE_SETUP_KEY = "worktree.setup"
diff --git a/frontend/src/lib/pulls/pull-request-list.ts b/frontend/src/lib/pulls/pull-request-list.ts
index f415ab9c6..952f016d4 100644
--- a/frontend/src/lib/pulls/pull-request-list.ts
+++ b/frontend/src/lib/pulls/pull-request-list.ts
@@ -1,4 +1,5 @@
 import type { PullRequestSummary } from "@/lib/api-types"
+import { parseEnumPref, readPref, writePref } from "@/lib/prefs"
 
 // The list column's own logic: which rows a quick filter and the search box
 // leave standing, and in what order. Kept out of the component because this is
@@ -258,13 +259,13 @@ const SORT_KEY = "lich.pulls.sort"
 
 /** Reads a stored sort, falling back for anything this build does not know. */
 export function parsePullsSort(raw: string | null): PullsSort {
-  return PULLS_SORTS.find((sort) => sort === raw) ?? "updated"
+  return parseEnumPref(raw, PULLS_SORTS, "updated")
 }
 
 export function readPullsSort(): PullsSort {
-  return parsePullsSort(localStorage.getItem(SORT_KEY))
+  return parsePullsSort(readPref(SORT_KEY))
 }
 
 export function writePullsSort(sort: PullsSort): void {
-  localStorage.setItem(SORT_KEY, sort)
+  writePref(SORT_KEY, sort)
 }
diff --git a/frontend/src/lib/pulls/use-pull-request-detail.ts b/frontend/src/lib/pulls/use-pull-request-detail.ts
index 50e783c2f..3e7bdf6fb 100644
Binary files a/frontend/src/lib/pulls/use-pull-request-detail.ts and b/frontend/src/lib/pulls/use-pull-request-detail.ts differ
diff --git a/frontend/src/lib/pulls/use-pull-request-diff.ts b/frontend/src/lib/pulls/use-pull-request-diff.ts
index 1a578f276..e2c1076b4 100644
--- a/frontend/src/lib/pulls/use-pull-request-diff.ts
+++ b/frontend/src/lib/pulls/use-pull-request-diff.ts
@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from "react"
 import { ProjectService } from "@/lib/rpc"
 import { parseDiff, type DiffFile } from "@/lib/git/diff"
-import { errorText } from "@/lib/utils"
+import { useRemoteResource } from "@/lib/use-remote-resource"
+
+const NO_FILES: DiffFile[] | null = null
 
 export interface PullRequestDiffState {
   files: DiffFile[] | null
@@ -19,36 +20,10 @@ export function usePullRequestDiff(
   head: string,
   number: number,
 ): PullRequestDiffState {
-  const [files, setFiles] = useState<DiffFile[] | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const seq = useRef(0)
-
-  const refresh = useCallback(() => {
-    if (!path) {
-      setFiles(null)
-      setError(null)
-      return
-    }
-    const mine = ++seq.current
-    ProjectService.PullRequestDiff(path, number)
-      .then((text) => {
-        if (mine !== seq.current) return
-        setFiles(parseDiff(text))
-        setError(null)
-      })
-      .catch((err: unknown) => {
-        if (mine !== seq.current) return
-        setFiles(null)
-        setError(errorText(err))
-      })
-  }, [path, number])
-
-  useEffect(() => {
-    refresh()
-    return () => {
-      seq.current++
-    }
-  }, [refresh, head])
-
-  return { files, error }
+  const { data, error } = useRemoteResource(
+    path && `${path} ${number} ${head}`,
+    () => ProjectService.PullRequestDiff(path, number).then(parseDiff),
+    { empty: NO_FILES },
+  )
+  return { files: data, error }
 }
diff --git a/frontend/src/lib/pulls/use-pull-request.ts b/frontend/src/lib/pulls/use-pull-request.ts
index c96653794..3a254b6dc 100644
--- a/frontend/src/lib/pulls/use-pull-request.ts
+++ b/frontend/src/lib/pulls/use-pull-request.ts
@@ -1,9 +1,12 @@
-import { useEffect, useState } from "react"
+import { useEffect } from "react"
 import { lookupPullRequest, onPullRequestInvalidated } from "./pull-request-lookup"
 import type { PullRequest } from "@/lib/api-types"
+import { useRemoteResource } from "@/lib/use-remote-resource"
 
 export type { PullRequest }
 
+const NO_PULL_REQUEST: PullRequest | null = null
+
 // usePullRequest resolves the open GitHub PR for a path's current branch via the
 // gh CLI. Unlike git status it is not polled — each lookup is a network
 // round-trip — but it refetches whenever the checkout's HEAD moves, so a PR the
@@ -15,34 +18,20 @@ export type { PullRequest }
 // on any error, or when the branch has no open PR (a merged or closed one is
 // filtered server-side), so the caller hides the badge.
 export function usePullRequest(path: string, branch: string, head: string): PullRequest | null {
-  const [pr, setPr] = useState<PullRequest | null>(null)
-
-  // A different checkout is a different PR: drop the old badge at once rather
-  // than showing it against the new branch. A new commit on the same branch
-  // keeps it, so the badge does not blink on every commit.
-  useEffect(() => {
-    setPr(null)
-  }, [path, branch])
+  const { data, refresh } = useRemoteResource(
+    path && `${path} ${branch} ${head}`,
+    () => lookupPullRequest(path, branch, head),
+    {
+      empty: NO_PULL_REQUEST,
+      refetchOnFocus: true,
+      // A different checkout is a different PR: drop the old badge at once
+      // rather than showing it against the new branch. A new commit on the same
+      // branch keeps it, so the badge does not blink on every commit.
+      resetOn: `${path} ${branch}`,
+    },
+  )
 
-  useEffect(() => {
-    if (!path) {
-      return
-    }
-    let alive = true
-    const load = () => {
-      void lookupPullRequest(path, branch, head).then((result) => {
-        if (alive) setPr(result)
-      })
-    }
-    load()
-    window.addEventListener("focus", load)
-    const unsubscribe = onPullRequestInvalidated(load)
-    return () => {
-      alive = false
-      window.removeEventListener("focus", load)
-      unsubscribe()
-    }
-  }, [path, branch, head])
+  useEffect(() => onPullRequestInvalidated(refresh), [refresh])
 
-  return pr
+  return data
 }
diff --git a/frontend/src/lib/pulls/use-pull-requests.ts b/frontend/src/lib/pulls/use-pull-requests.ts
index 2d7c0113d..4ab786feb 100644
--- a/frontend/src/lib/pulls/use-pull-requests.ts
+++ b/frontend/src/lib/pulls/use-pull-requests.ts
@@ -1,9 +1,11 @@
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useEffect } from "react"
 import { ProjectService } from "@/lib/rpc"
 import type { PullRequestSummary } from "@/lib/api-types"
 import { onPullRequestInvalidated } from "@/lib/pulls/pull-request-lookup"
 import type { PullsState } from "@/lib/pulls/pull-request-list"
-import { errorText } from "@/lib/utils"
+import { useRemoteResource } from "@/lib/use-remote-resource"
+
+const NO_PULL_REQUESTS: PullRequestSummary[] = []
 
 export interface PullRequestListState {
   list: PullRequestSummary[]
@@ -18,58 +20,20 @@ export interface PullRequestListState {
 // retires the badges (a merge, a PR opened from the terminal). An empty list
 // with no error is a repository whose pull requests are all closed.
 export function usePullRequests(path: string, state: PullsState): PullRequestListState {
-  const [list, setList] = useState<PullRequestSummary[]>([])
-  // Starts true so the first paint reads as loading rather than as "no pull
-  // requests", the same contract as the detail hook.
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const seq = useRef(0)
-  const loaded = useRef(state)
-
-  const refresh = useCallback(() => {
-    if (!path) {
-      setList([])
-      setError(null)
-      setLoading(false)
-      return
-    }
-    const mine = ++seq.current
-    setLoading(true)
-    // Rows of the state being left have to go before the new ones arrive: the
-    // column labels itself from the query, so keeping them would caption open
-    // pull requests as merged for as long as gh takes to answer.
-    if (loaded.current !== state) {
-      loaded.current = state
-      setList([])
-    }
-    ProjectService.ListPullRequests(path, state)
-      .then((result) => {
-        if (mine !== seq.current) return
-        setList(result ?? [])
-        setError(null)
-      })
-      .catch((err: unknown) => {
-        if (mine !== seq.current) return
-        setList([])
-        setError(errorText(err))
-      })
-      .finally(() => {
-        if (mine === seq.current) setLoading(false)
-      })
-  }, [path, state])
+  const { data, loading, error, refresh } = useRemoteResource(
+    path && `${path} ${state}`,
+    () => ProjectService.ListPullRequests(path, state).then((list) => list ?? NO_PULL_REQUESTS),
+    {
+      empty: NO_PULL_REQUESTS,
+      refetchOnFocus: true,
+      // Rows of the state being left have to go before the new ones arrive: the
+      // column labels itself from the query, so keeping them would caption open
+      // pull requests as merged for as long as gh takes to answer.
+      resetOn: state,
+    },
+  )
 
-  useEffect(() => {
-    refresh()
-    window.addEventListener("focus", refresh)
-    const unsubscribe = onPullRequestInvalidated(refresh)
-    return () => {
-      // Invalidate any in-flight call so a late response cannot land on the
-      // next path or after unmount.
-      seq.current++
-      window.removeEventListener("focus", refresh)
-      unsubscribe()
-    }
-  }, [refresh])
+  useEffect(() => onPullRequestInvalidated(refresh), [refresh])
 
-  return { list, loading, error, refresh }
+  return { list: data, loading, error, refresh }
 }
diff --git a/frontend/src/lib/use-codemirror-view.ts b/frontend/src/lib/use-codemirror-view.ts
new file mode 100644
index 000000000..59aee1587
--- /dev/null
+++ b/frontend/src/lib/use-codemirror-view.ts
@@ -0,0 +1,61 @@
+import { useEffect, useRef } from "react"
+import type { RefObject } from "react"
+import type { Extension } from "@codemirror/state"
+import { EditorState } from "@codemirror/state"
+import { EditorView } from "@codemirror/view"
+import { loadLanguage, readOnlyCodeExtensions, selectedDocLines } from "@/lib/codemirror"
+import type { DocLineSelection } from "@/lib/codemirror"
+
+// What a view is built from. The two together are the view's identity: a new
+// object rebuilds it, so callers hand over a memoised one and the editor
+// survives every render that changed neither.
+export interface CodeMirrorSource {
+  text: string
+  /** Laid on top of the shared read-only base — a diff's gutter and line
+   * decorations, a plain file's line numbers. */
+  extensions: Extension[]
+}
+
+export interface CodeMirrorView {
+  containerRef: RefObject<HTMLDivElement>
+  /** 1-based doc line span of the current selection, or null when empty. */
+  getSelectedLines: () => DocLineSelection | null
+}
+
+// useCodeMirrorView owns one read-only CodeMirror view for its container:
+// created on mount, destroyed on unmount or when the source is replaced by a
+// refresh. The diff cards and the file-browser preview are the same editor —
+// they differ only in the extensions they layer on and in what a selection's
+// doc lines mean afterwards, which is the wrapping hook's business, not this
+// one's.
+export function useCodeMirrorView(source: CodeMirrorSource, filename: string): CodeMirrorView {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+
+  useEffect(() => {
+    const parent = containerRef.current
+    if (!parent) {
+      return
+    }
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: source.text,
+        extensions: [...readOnlyCodeExtensions(), ...source.extensions],
+      }),
+      parent,
+    })
+    viewRef.current = view
+    // Async: the language may still be loading when the view is replaced, so
+    // the callback checks it is still the live one before touching it.
+    loadLanguage(view, filename, () => viewRef.current === view)
+    return () => {
+      viewRef.current = null
+      view.destroy()
+    }
+  }, [source, filename])
+
+  const getSelectedLines = (): DocLineSelection | null =>
+    viewRef.current ? selectedDocLines(viewRef.current) : null
+
+  return { containerRef, getSelectedLines }
+}
diff --git a/frontend/src/lib/use-panel-visible.ts b/frontend/src/lib/use-panel-visible.ts
new file mode 100644
index 000000000..27380a610
--- /dev/null
+++ b/frontend/src/lib/use-panel-visible.ts
@@ -0,0 +1,26 @@
+import { useState } from "react"
+import { readPref, writePref } from "@/lib/prefs"
+
+// What a hidden panel stores. Not a boolean through writePref: these keys are
+// named "…hidden" and already hold "1" in every install, so the encoding is
+// kept rather than migrated for a cosmetic gain.
+const HIDDEN = "1"
+const SHOWN = "0"
+
+// A navigator panel the user can collapse — the pull request list, the changed
+// files tree. Both are a way into the thing being reviewed rather than the
+// review itself, so hiding one hands its width to the diff, and the choice
+// survives leaving the screen (localStorage, like the panel widths beside it).
+//
+// Shown is the default: a key nobody has written yet means a user who has
+// never hidden the panel.
+export function usePanelVisible(storageKey: string): [boolean, () => void] {
+  const [visible, setVisible] = useState(() => readPref(storageKey) !== HIDDEN)
+  const toggle = () => {
+    setVisible((wasVisible) => {
+      writePref(storageKey, wasVisible ? HIDDEN : SHOWN)
+      return !wasVisible
+    })
+  }
+  return [visible, toggle]
+}
diff --git a/frontend/src/lib/use-panel-width.ts b/frontend/src/lib/use-panel-width.ts
index 3cc1f42c1..1ec39352c 100644
--- a/frontend/src/lib/use-panel-width.ts
+++ b/frontend/src/lib/use-panel-width.ts
@@ -1,5 +1,6 @@
 import { useRef, useState } from "react"
 import type { PointerEvent as ReactPointerEvent } from "react"
+import { readPref, writePref } from "@/lib/prefs"
 import { dragWidth, parseStoredWidth, type PanelEdge, type WidthBounds } from "./panel-width"
 
 export interface PanelWidthOptions extends WidthBounds {
@@ -26,7 +27,7 @@ export interface PanelWidth {
 export function usePanelWidth(options: PanelWidthOptions): PanelWidth {
   const { storageKey, defaultRem, edge } = options
   const [width, setWidth] = useState(() =>
-    parseStoredWidth(localStorage.getItem(storageKey), options, defaultRem),
+    parseStoredWidth(readPref(storageKey), options, defaultRem),
   )
   const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
 
@@ -53,7 +54,7 @@ export function usePanelWidth(options: PanelWidthOptions): PanelWidth {
     dragRef.current = null
     event.currentTarget.releasePointerCapture(event.pointerId)
     setWidth(finalWidth)
-    localStorage.setItem(storageKey, String(finalWidth))
+    writePref(storageKey, finalWidth)
   }
 
   return { width, handleProps: { onPointerDown, onPointerMove, onPointerUp } }
diff --git a/frontend/src/lib/use-remote-resource.ts b/frontend/src/lib/use-remote-resource.ts
new file mode 100644
index 000000000..071b7dea2
--- /dev/null
+++ b/frontend/src/lib/use-remote-resource.ts
@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { errorText } from "@/lib/utils"
+
+// The read side of a backend lookup: what came back, whether a call is in
+// flight, why the last one failed, and the way to run it again.
+export interface RemoteResource<T> {
+  data: T
+  loading: boolean
+  error: string | null
+  refresh: () => void
+}
+
+export interface RemoteResourceOptions<T> {
+  /** What `data` holds before the first answer, and after a failed or skipped
+   * lookup. Pass a module-level constant for arrays and objects — a fresh one
+   * per render would notify subscribers on every failure. */
+  empty: T
+  /** Re-read when the window regains focus. On for anything the user can
+   * change outside lich (a branch pushed, a review left); off where re-reading
+   * is expensive enough that an alt-tab must not pay for it. */
+  refetchOnFocus?: boolean
+  /** Blank `data` back to `empty` the moment this value changes, ahead of the
+   * answer. For a readout that captions itself from the request — the pull
+   * request column labels its rows with the state it asked for — where holding
+   * the old rows would mislabel them for as long as the call takes. Off by
+   * default: a plain refetch keeps what it has, so a moved HEAD refreshes a
+   * screen in place instead of flashing it back to a skeleton. */
+  resetOn?: string
+}
+
+// useRemoteResource is the one lookup skeleton behind the screens' backend
+// reads: a sequence-guarded call whose late answer can never land on a newer
+// request or on an unmounted component, plus the loading/error pair every
+// caller was otherwise rebuilding by hand.
+//
+// `key` is the contract. It stands for the whole request — every path, number
+// and revision the call closes over — because `load` itself is read through a
+// ref and is deliberately not a dependency: callers pass an inline closure
+// rather than memoising one, and a key that leaves out an argument is a hook
+// that answers with the previous request's data.
+//
+// An empty key is "nothing to look up", not a failure: the lookup is skipped,
+// `data` holds `empty` and `loading` is false. That is what an absent path
+// means everywhere in the app, and it keeps a screen with no repository from
+// spending a round-trip.
+export function useRemoteResource<T>(
+  key: string,
+  load: () => Promise<T>,
+  options: RemoteResourceOptions<T>,
+): RemoteResource<T> {
+  const { empty, refetchOnFocus = false, resetOn } = options
+  const [data, setData] = useState<T>(empty)
+  // Starts true so the first paint of a real request reads as loading rather
+  // than as an answered "there is nothing here".
+  const [loading, setLoading] = useState(key !== "")
+  const [error, setError] = useState<string | null>(null)
+  // Sequence number of the newest request; a reply carrying an older one is
+  // dropped. The cleanup bumps it, which is also how unmount invalidates.
+  const seq = useRef(0)
+  const loadRef = useRef(load)
+  loadRef.current = load
+  const emptyRef = useRef(empty)
+  emptyRef.current = empty
+
+  const refresh = useCallback(() => {
+    if (!key) {
+      seq.current++
+      setData(emptyRef.current)
+      setError(null)
+      setLoading(false)
+      return
+    }
+    const mine = ++seq.current
+    setLoading(true)
+    loadRef
+      .current()
+      .then((result) => {
+        if (mine !== seq.current) return
+        setData(result)
+        setError(null)
+      })
+      .catch((err: unknown) => {
+        if (mine !== seq.current) return
+        setData(emptyRef.current)
+        setError(errorText(err))
+      })
+      .finally(() => {
+        if (mine === seq.current) setLoading(false)
+      })
+  }, [key])
+
+  // Blanking during render, not in an effect: the old data must never reach
+  // the screen once the request behind it has been abandoned, and an effect
+  // would paint it one frame first.
+  const lastReset = useRef(resetOn)
+  if (resetOn !== undefined && resetOn !== lastReset.current) {
+    lastReset.current = resetOn
+    setData(emptyRef.current)
+  }
+
+  useEffect(() => {
+    refresh()
+    if (refetchOnFocus) {
+      window.addEventListener("focus", refresh)
+    }
+    return () => {
+      // Invalidate any in-flight call so a late answer cannot land on the next
+      // request or after unmount.
+      seq.current++
+      window.removeEventListener("focus", refresh)
+    }
+  }, [refresh, refetchOnFocus])
+
+  return { data, loading, error, refresh }
+}
diff --git a/frontend/src/providers/settings.tsx b/frontend/src/providers/settings.tsx
index 92adc04b8..6bba77bda 100644
--- a/frontend/src/providers/settings.tsx
+++ b/frontend/src/providers/settings.tsx
@@ -10,6 +10,7 @@ import {
   type Hotkeys,
 } from "@/lib/hotkeys"
 import { zoomIntent } from "@/lib/terminal/zoom-keys"
+import { parseBoolPref, parseEnumPref, parseNumberPref, readPref, writePref } from "@/lib/prefs"
 
 const FONT_STORAGE_KEY = "lich.terminal.font"
 const TERMINAL_FONT_SIZE_STORAGE_KEY = "lich.terminal.fontSize"
@@ -62,34 +63,24 @@ export function clampTerminalFontSize(value: number): number {
   return Math.round(bounded)
 }
 
-function readTerminalFontSize(): number {
-  const stored = Number(localStorage.getItem(TERMINAL_FONT_SIZE_STORAGE_KEY))
-  return Number.isFinite(stored) && stored > 0
-    ? clampTerminalFontSize(stored)
-    : DEFAULT_TERMINAL_FONT_SIZE
-}
+const readFont = (): string => readPref(FONT_STORAGE_KEY) ?? DEFAULT_FONT
 
-function readTheme(): Theme {
-  const stored = localStorage.getItem(THEME_STORAGE_KEY)
-  return THEMES.includes(stored as Theme) ? (stored as Theme) : DEFAULT_THEME
-}
+const readTerminalFontSize = (): number =>
+  parseNumberPref(
+    readPref(TERMINAL_FONT_SIZE_STORAGE_KEY),
+    DEFAULT_TERMINAL_FONT_SIZE,
+    clampTerminalFontSize,
+  )
 
-function readTerminalTheme(): TerminalTheme {
-  const stored = localStorage.getItem(TERMINAL_THEME_STORAGE_KEY)
-  return TERMINAL_THEMES.includes(stored as TerminalTheme)
-    ? (stored as TerminalTheme)
-    : DEFAULT_TERMINAL_THEME
-}
+const readTheme = (): Theme => parseEnumPref(readPref(THEME_STORAGE_KEY), THEMES, DEFAULT_THEME)
 
-function readZoom(): number {
-  const stored = Number(localStorage.getItem(ZOOM_STORAGE_KEY))
-  return Number.isFinite(stored) && stored > 0 ? clampZoom(stored) : DEFAULT_ZOOM
-}
+const readTerminalTheme = (): TerminalTheme =>
+  parseEnumPref(readPref(TERMINAL_THEME_STORAGE_KEY), TERMINAL_THEMES, DEFAULT_TERMINAL_THEME)
+
+const readZoom = (): number => parseNumberPref(readPref(ZOOM_STORAGE_KEY), DEFAULT_ZOOM, clampZoom)
 
 // Default on: the footer context readout shows unless the user turned it off.
-function readContextUsage(): boolean {
-  return localStorage.getItem(CONTEXT_USAGE_STORAGE_KEY) !== "false"
-}
+const readContextUsage = (): boolean => parseBoolPref(readPref(CONTEXT_USAGE_STORAGE_KEY), true)
 
 interface SettingsValue {
   /** Terminal font family, applied globally across all project terminals. */
@@ -123,9 +114,7 @@ interface SettingsValue {
 const SettingsContext = createContext<SettingsValue | null>(null)
 
 export function SettingsProvider({ children }: { children: ReactNode }) {
-  const [font, setFontState] = useState<string>(
-    () => localStorage.getItem(FONT_STORAGE_KEY) ?? DEFAULT_FONT,
-  )
+  const [font, setFontState] = useState<string>(readFont)
   const [terminalFontSize, setTerminalFontSizeState] = useState<number>(readTerminalFontSize)
   const [theme, setThemeState] = useState<Theme>(readTheme)
   const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>("light")
@@ -136,24 +125,24 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
 
   const setFont = useCallback((next: string) => {
     setFontState(next)
-    localStorage.setItem(FONT_STORAGE_KEY, next)
+    writePref(FONT_STORAGE_KEY, next)
   }, [])
 
   const setTerminalFontSize = useCallback((next: number) => {
     const clamped = clampTerminalFontSize(next)
     setTerminalFontSizeState(clamped)
-    localStorage.setItem(TERMINAL_FONT_SIZE_STORAGE_KEY, String(clamped))
+    writePref(TERMINAL_FONT_SIZE_STORAGE_KEY, clamped)
   }, [])
 
   const setTheme = useCallback((next: Theme) => {
     setThemeState(next)
-    localStorage.setItem(THEME_STORAGE_KEY, next)
+    writePref(THEME_STORAGE_KEY, next)
   }, [])
 
   const setZoom = useCallback((next: number) => {
     const clamped = clampZoom(next)
     setZoomState(clamped)
-    localStorage.setItem(ZOOM_STORAGE_KEY, String(clamped))
+    writePref(ZOOM_STORAGE_KEY, clamped)
   }, [])
 
   // zoomBy applies a relative step off the latest value so rapid wheel ticks
@@ -161,14 +150,14 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
   const zoomBy = useCallback((delta: number) => {
     setZoomState((prev) => {
       const clamped = clampZoom(prev + delta)
-      localStorage.setItem(ZOOM_STORAGE_KEY, String(clamped))
+      writePref(ZOOM_STORAGE_KEY, clamped)
       return clamped
     })
   }, [])
 
   const setTerminalTheme = useCallback((next: TerminalTheme) => {
     setTerminalThemeState(next)
-    localStorage.setItem(TERMINAL_THEME_STORAGE_KEY, next)
+    writePref(TERMINAL_THEME_STORAGE_KEY, next)
   }, [])
 
   const setHotkey = useCallback((id: HotkeyId, combo: Combo) => {
@@ -189,7 +178,7 @@ export function SettingsProvider({ children }: { children: ReactNode }) {
 
   const setShowContextUsage = useCallback((next: boolean) => {
     setShowContextUsageState(next)
-    localStorage.setItem(CONTEXT_USAGE_STORAGE_KEY, String(next))
+    writePref(CONTEXT_USAGE_STORAGE_KEY, next)
   }, [])
 
   // Toggle the `.dark` class on <html> and track the resolved scheme. For
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index daa419317..372065433 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -17,12 +17,38 @@ export default defineConfig({
       provider: "v8",
       reporter: ["text-summary", "json-summary"],
       reportsDirectory: "coverage",
-      // The suite owns the pure logic layer (`.ts`: lib, hooks, stores); the
-      // `.tsx` components are the DOM/xterm boundary invariant #1 exempts, so
-      // they stay out of the denominator — including them would report a
-      // misleadingly low number against a suite that never targeted them.
+      // The denominator is the logic this suite can actually target: pure
+      // modules under `lib` — stores, parsers, reducers, gates. Everything the
+      // node environment cannot reach is excluded rather than counted as
+      // uncovered, because the number is read in review (invariant #1) and a
+      // denominator full of unreachable files reports a failing bar against a
+      // suite that is doing its job.
+      //
+      // `include` alone does not do this: a file loaded by a test is measured
+      // whether or not it matches, which is how the `.tsx` the comment here
+      // once claimed to exclude ended up in the report anyway. The exclusions
+      // below are what actually holds the line.
       include: ["src/**/*.ts"],
-      exclude: ["src/**/*.test.ts", "src/**/*.d.ts"],
+      exclude: [
+        "src/**/*.test.ts",
+        "src/**/*.d.ts",
+        // Components: the DOM/xterm boundary invariant #1 exempts. Pulled in
+        // transitively by the tests that import their pure helpers.
+        "src/**/*.tsx",
+        // React hooks. Rendering one needs a renderer, and there is no jsdom
+        // here by design — the store behind each hook is what carries the
+        // tests. `useDiffEditor`/`useFileEditor` are hooks too, misfiled under
+        // components because they own a CodeMirror view.
+        "src/**/use-*.ts",
+        "src/components/**/use*.ts",
+        // OS/framework boundaries: fetch, EventSource, WebSocket, CodeMirror
+        // wiring, and the DEV-only paint reporter that production drops.
+        "src/lib/rpc.ts",
+        "src/lib/app-events.ts",
+        "src/lib/codemirror.ts",
+        "src/lib/terminal/term-transport.ts",
+        "src/lib/terminal/term-perf.ts",
+      ],
     },
   },
 })