diff --git a/apps/differ/src-tauri/src/lib.rs b/apps/differ/src-tauri/src/lib.rs
index 3b317719c..20b828664 100644
--- a/apps/differ/src-tauri/src/lib.rs
+++ b/apps/differ/src-tauri/src/lib.rs
@@ -300,8 +300,8 @@ fn list_directory(path: String) -> Result<Vec<DirEntry>, String> {
         }
     }
 
-    dirs.sort_by(|a, b| a.name.to_lowercase().cmp(&b.name.to_lowercase()));
-    files.sort_by(|a, b| a.name.to_lowercase().cmp(&b.name.to_lowercase()));
+    dirs.sort_by_key(|a| a.name.to_lowercase());
+    files.sort_by_key(|a| a.name.to_lowercase());
     dirs.extend(files);
     Ok(dirs)
 }
diff --git a/apps/staged/src-tauri/src/blox.rs b/apps/staged/src-tauri/src/blox.rs
index d2d2a0ceb..e1af64645 100644
--- a/apps/staged/src-tauri/src/blox.rs
+++ b/apps/staged/src-tauri/src/blox.rs
@@ -3,11 +3,18 @@
 //! Thin wrappers around shared `blox-cli` helpers so existing Staged code can
 //! keep using `crate::blox::*`.
 
+use std::sync::OnceLock;
+
 pub use blox_cli::{BloxError, WorkspaceCommand, WorkspaceInfo, WorkspaceListEntry};
 
+static SQ_AVAILABLE: OnceLock<bool> = OnceLock::new();
+
 /// Check whether the `sq` CLI is available on this system.
+///
+/// The result is cached for the lifetime of the process since the PATH
+/// won't change mid-session.
 pub fn is_sq_available() -> bool {
-    blox_cli::is_sq_available()
+    *SQ_AVAILABLE.get_or_init(blox_cli::is_sq_available)
 }
 
 /// Start a new Blox workspace.
diff --git a/apps/staged/src-tauri/src/session_runner.rs b/apps/staged/src-tauri/src/session_runner.rs
index 8ac6e68f6..af8704d37 100644
--- a/apps/staged/src-tauri/src/session_runner.rs
+++ b/apps/staged/src-tauri/src/session_runner.rs
@@ -429,7 +429,23 @@ pub fn start_session(
                             log::info!("Drained next queued session for branch {branch_id}");
                         }
                         Ok(false) => {
-                            if let Some(auto_review_branch_id) = auto_review_branch_id {
+                            // Check if auto-review is enabled in user preferences
+                            let auto_review_enabled = crate::preferences_store_path_buf()
+                                .and_then(|path| std::fs::read_to_string(&path).ok())
+                                .and_then(|contents| {
+                                    serde_json::from_str::<serde_json::Value>(&contents).ok()
+                                })
+                                .and_then(|json| {
+                                    json.get("auto-start-code-reviews")?
+                                        .as_str()
+                                        .map(String::from)
+                                })
+                                .map(|mode| mode != "never")
+                                .unwrap_or_else(crate::blox::is_sq_available);
+
+                            if let Some(auto_review_branch_id) =
+                                auto_review_branch_id.filter(|_| auto_review_enabled)
+                            {
                                 match crate::session_commands::trigger_auto_review(
                                     store_for_follow_up,
                                     registry_for_follow_up,
diff --git a/apps/staged/src/lib/features/diff/highlighter.ts b/apps/staged/src/lib/features/diff/highlighter.ts
index 15af20077..76333ffb9 100644
--- a/apps/staged/src/lib/features/diff/highlighter.ts
+++ b/apps/staged/src/lib/features/diff/highlighter.ts
@@ -9,8 +9,10 @@ export {
   getSyntaxThemeName,
   setSyntaxTheme,
   isLightTheme,
+  loadAllThemePreviewColors,
   SYNTAX_THEMES,
   type Token,
   type HighlighterTheme,
+  type ThemePreviewColors,
   type SyntaxThemeName,
 } from '@builderbot/diff-viewer/utils';
diff --git a/apps/staged/src/lib/features/layout/TopBar.svelte b/apps/staged/src/lib/features/layout/TopBar.svelte
index e9d857d3c..76f71a474 100644
--- a/apps/staged/src/lib/features/layout/TopBar.svelte
+++ b/apps/staged/src/lib/features/layout/TopBar.svelte
@@ -1,14 +1,13 @@
 <!--
-  TopBar.svelte - Minimal top bar with drag region, theme selector, and new project button
+  TopBar.svelte - Minimal top bar with drag region, settings, and new project button
 
-  Provides a drag region for window movement, a theme picker, and a "+" button
-  for adding new projects.
+  Provides a drag region for window movement, a "+" button for adding new
+  projects, and a settings button.
 -->
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Palette, PanelLeftClose, PanelLeftOpen, Plus, SlidersHorizontal } from 'lucide-svelte';
+  import { PanelLeftClose, PanelLeftOpen, Plus, SlidersHorizontal } from 'lucide-svelte';
   import { getCurrentWindow } from '@tauri-apps/api/window';
-  import ThemeSelectorModal from '../settings/ThemeSelectorModal.svelte';
   import { navigation, openSettings } from './navigation.svelte';
   import {
     hydrateProjectsSidebarState,
@@ -16,8 +15,6 @@
     setProjectsSidebarCollapsed,
   } from '../projects/projectsSidebarState.svelte';
 
-  let showThemeModal = $state(false);
-
   onMount(() => {
     void hydrateProjectsSidebarState();
   });
@@ -68,21 +65,9 @@
       <Plus size={14} />
     </button>
 
-    <button
-      class="icon-btn theme-btn"
-      onclick={() => (showThemeModal = !showThemeModal)}
-      title="Select theme"
-    >
-      <Palette size={14} />
-    </button>
-
     <button class="icon-btn" onclick={() => openSettings()} title="Settings (⌘,)">
       <SlidersHorizontal size={14} />
     </button>
-
-    {#if showThemeModal}
-      <ThemeSelectorModal onClose={() => (showThemeModal = false)} />
-    {/if}
   </div>
 </div>
 
diff --git a/apps/staged/src/lib/features/layout/navigation.svelte.ts b/apps/staged/src/lib/features/layout/navigation.svelte.ts
index 0dd372cd8..fe3bb9623 100644
--- a/apps/staged/src/lib/features/layout/navigation.svelte.ts
+++ b/apps/staged/src/lib/features/layout/navigation.svelte.ts
@@ -17,12 +17,12 @@ import { projectsList } from '../projects/projectsSidebarState.svelte';
 
 const LAST_PROJECT_STORE_KEY = 'last-viewed-project';
 
-export type SettingsSection = 'repo' | 'keyboard' | 'doctor';
+export type SettingsSection = 'general' | 'repo' | 'keyboard' | 'doctor';
 
 export const navigation = $state({
   activeView: 'workspace' as 'workspace' | 'settings',
   selectedProjectId: null as string | null,
-  settingsSection: 'repo' as SettingsSection,
+  settingsSection: 'general' as SettingsSection,
 });
 
 function showWorkspaceView(): void {
@@ -134,7 +134,7 @@ export function goHome(): void {
 }
 
 /** Show the dedicated settings view and select a settings section. */
-export function openSettings(section: SettingsSection = 'repo'): void {
+export function openSettings(section: SettingsSection = 'general'): void {
   navigation.settingsSection = section;
   navigation.activeView = 'settings';
 }
diff --git a/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte b/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
index 652f3b777..2f1d7b223 100644
--- a/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
+++ b/apps/staged/src/lib/features/settings/ActionsSettingsPanel.svelte
@@ -503,7 +503,7 @@
   <div class="panel-intro">
     <h2>
       <FolderGit2 size={16} />
-      Repo
+      Repos
     </h2>
     <p>Manage per-repo actions and remove repos from Staged when they are no longer needed.</p>
   </div>
diff --git a/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
new file mode 100644
index 000000000..8e448a79d
--- /dev/null
+++ b/apps/staged/src/lib/features/settings/GeneralSettingsPanel.svelte
@@ -0,0 +1,371 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Settings2, Info, Check, ChevronDown } from 'lucide-svelte';
+  import {
+    preferences,
+    getAvailableSyntaxThemes,
+    selectSyntaxTheme,
+    setAutoReviewMode,
+    loadAllThemePreviewColors,
+    isLightTheme,
+    type AutoReviewMode,
+    type ThemePreviewColors,
+  } from './preferences.svelte';
+
+  const autoReviewOptions: { value: AutoReviewMode; label: string }[] = [
+    { value: 'never', label: 'Never' },
+    { value: 'after-changes', label: 'After changes' },
+  ];
+
+  type ThemeFilter = 'all' | 'light' | 'dark';
+
+  const allThemes = $derived(getAvailableSyntaxThemes());
+
+  let themeFilter = $state<ThemeFilter>('all');
+  let previewColors = $state<Map<string, ThemePreviewColors>>(new Map());
+  let dropdownOpen = $state(false);
+
+  const themes = $derived(
+    themeFilter === 'all'
+      ? allThemes
+      : allThemes.filter((t) =>
+          themeFilter === 'light' ? isLightTheme(t.name) : !isLightTheme(t.name)
+        )
+  );
+  let dropdownRef = $state<HTMLDivElement | null>(null);
+
+  const activeColors = $derived(previewColors.get(preferences.syntaxTheme));
+
+  onMount(() => {
+    loadAllThemePreviewColors().then((colors) => {
+      previewColors = colors;
+    });
+
+    function handleClickOutside(e: MouseEvent) {
+      if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
+        dropdownOpen = false;
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  });
+
+  function handleAutoReviewChange(e: Event) {
+    const select = e.target as HTMLSelectElement;
+    setAutoReviewMode(select.value as AutoReviewMode);
+  }
+
+  function handleThemeSelect(name: string) {
+    selectSyntaxTheme(name);
+    dropdownOpen = false;
+  }
+</script>
+
+<div class="general-settings-panel">
+  <div class="panel-intro">
+    <div class="intro-copy">
+      <h2>
+        <Settings2 size={16} />
+        General
+      </h2>
+      <p>Appearance and app behaviour.</p>
+    </div>
+  </div>
+
+  <div class="panel-body">
+    <div class="field">
+      <span class="field-label">Theme</span>
+      <div class="theme-dropdown" bind:this={dropdownRef}>
+        <button class="theme-dropdown-trigger" onclick={() => (dropdownOpen = !dropdownOpen)}>
+          <span class="trigger-swatch" style:background={activeColors?.bg ?? 'var(--bg-primary)'}>
+            <span style:color={activeColors?.fg ?? 'var(--text-primary)'}
+              >{preferences.syntaxTheme}</span
+            >
+          </span>
+          <ChevronDown size={14} />
+        </button>
+
+        {#if dropdownOpen}
+          <div class="theme-dropdown-panel">
+            <div class="theme-filters">
+              {#each ['all', 'light', 'dark'] as filter (filter)}
+                <button
+                  class="theme-filter-btn"
+                  class:active={themeFilter === filter}
+                  onclick={() => (themeFilter = filter as ThemeFilter)}
+                >
+                  {filter.charAt(0).toUpperCase() + filter.slice(1)}
+                </button>
+              {/each}
+            </div>
+            {#each themes as theme (theme.name)}
+              {@const colors = previewColors.get(theme.name)}
+              {@const isActive = preferences.syntaxTheme === theme.name}
+              <button
+                class="theme-swatch"
+                class:active={isActive}
+                style:background={colors?.bg ?? 'var(--bg-primary)'}
+                style:border-color={isActive
+                  ? (colors?.comment ?? 'var(--border-emphasis)')
+                  : 'transparent'}
+                onclick={() => handleThemeSelect(theme.name)}
+              >
+                <span class="swatch-name" style:color={colors?.fg ?? 'var(--text-primary)'}
+                  >{theme.name}</span
+                >
+                {#if isActive}
+                  <span class="swatch-check" style:color={colors?.comment ?? 'var(--text-muted)'}>
+                    <Check size={14} />
+                  </span>
+                {/if}
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <div class="field">
+      <label class="field-label" for="auto-review-select">Auto start code reviews</label>
+      <select
+        id="auto-review-select"
+        class="theme-select"
+        value={preferences.autoReviewMode}
+        onchange={handleAutoReviewChange}
+      >
+        {#each autoReviewOptions as opt (opt.value)}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
+      <p class="field-description">
+        <Info size={12} />
+        {#if preferences.autoReviewMode === 'after-changes'}
+          A code review will automatically start after each commit session completes.
+        {:else}
+          Code reviews will only start when you manually request them.
+        {/if}
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .general-settings-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background: var(--bg-chrome);
+  }
+
+  .panel-intro {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .intro-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .panel-intro h2 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--size-base);
+    font-weight: 600;
+  }
+
+  .panel-intro p {
+    margin: 0;
+    font-size: var(--size-sm);
+    color: var(--text-muted);
+  }
+
+  .panel-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .field-description {
+    margin: 0;
+    font-size: var(--size-xs);
+    color: var(--text-muted);
+    line-height: 1.4;
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+  }
+
+  .field-label {
+    font-size: var(--size-sm);
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .theme-select {
+    width: 100%;
+    max-width: 320px;
+    padding: 6px 10px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-muted);
+    border-radius: 5px;
+    color: var(--text-primary);
+    font-size: var(--size-xs);
+    cursor: pointer;
+    transition:
+      border-color 0.1s,
+      background-color 0.1s;
+  }
+
+  .theme-select:focus {
+    outline: none;
+    border-color: var(--border-emphasis);
+    background-color: var(--bg-hover);
+  }
+
+  .theme-dropdown {
+    position: relative;
+    max-width: 320px;
+  }
+
+  .theme-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 0;
+    background: none;
+    border: 1px solid var(--border-muted);
+    border-radius: 5px;
+    color: var(--text-primary);
+    font-size: var(--size-xs);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+      border-color 0.1s,
+      background-color 0.1s;
+  }
+
+  .theme-dropdown-trigger:hover {
+    border-color: var(--border-emphasis);
+  }
+
+  .trigger-swatch {
+    flex: 1;
+    padding: 6px 10px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: 4px 0 0 4px;
+  }
+
+  .theme-dropdown-trigger :global(svg) {
+    flex-shrink: 0;
+    margin-right: 8px;
+    color: var(--text-muted);
+  }
+
+  .theme-dropdown-panel {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    max-height: 320px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-muted);
+    border-radius: 5px;
+    box-shadow: var(--shadow-elevated);
+    z-index: 10;
+  }
+
+  .theme-filters {
+    display: flex;
+    gap: 2px;
+    padding: 0 0 4px;
+    border-bottom: 1px solid var(--border-subtle);
+    margin-bottom: 2px;
+  }
+
+  .theme-filter-btn {
+    flex: 1;
+    padding: 4px 8px;
+    background: none;
+    border: none;
+    border-radius: 3px;
+    color: var(--text-muted);
+    font-size: var(--size-xs);
+    font-family: inherit;
+    cursor: pointer;
+    transition:
+      background-color 0.1s,
+      color 0.1s;
+  }
+
+  .theme-filter-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .theme-filter-btn.active {
+    background: var(--bg-active);
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+
+  .theme-swatch {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 8px;
+    border: 1.5px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    transition: border-color 0.1s;
+  }
+
+  .theme-swatch:hover {
+    filter: brightness(1.08);
+  }
+
+  .theme-swatch.active {
+    border-style: solid;
+  }
+
+  .swatch-name {
+    font-size: var(--size-xs);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .swatch-check {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+</style>
diff --git a/apps/staged/src/lib/features/settings/SettingsPage.svelte b/apps/staged/src/lib/features/settings/SettingsPage.svelte
index c6e447ea1..a0daf2840 100644
--- a/apps/staged/src/lib/features/settings/SettingsPage.svelte
+++ b/apps/staged/src/lib/features/settings/SettingsPage.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { ArrowLeft, FolderGit2, Keyboard, Stethoscope } from 'lucide-svelte';
+  import { ArrowLeft, FolderGit2, Keyboard, Settings2, Stethoscope } from 'lucide-svelte';
   import { closeSettings, navigation } from '../layout/navigation.svelte';
   import ActionsSettingsPanel from './ActionsSettingsPanel.svelte';
   import DoctorSettingsPanel from './DoctorSettingsPanel.svelte';
+  import GeneralSettingsPanel from './GeneralSettingsPanel.svelte';
   import KeyboardSettingsPanel from './KeyboardSettingsPanel.svelte';
 
   let appVersion = $state(__APP_VERSION__);
@@ -38,11 +39,20 @@
 
   <div class="settings-body">
     <aside class="settings-nav" aria-label="Settings sections">
-      <div class="settings-nav-header">
-        <span class="settings-nav-title">Sections</span>
-      </div>
-
       <div class="settings-nav-list">
+        <button
+          class="nav-item"
+          class:active={navigation.settingsSection === 'general'}
+          onclick={() => (navigation.settingsSection = 'general')}
+        >
+          <div class="nav-main">
+            <Settings2 size={14} />
+            <div class="nav-text">
+              <span class="nav-name">General</span>
+              <span class="nav-meta">Theme and appearance</span>
+            </div>
+          </div>
+        </button>
         <button
           class="nav-item"
           class:active={navigation.settingsSection === 'repo'}
@@ -51,7 +61,7 @@
           <div class="nav-main">
             <FolderGit2 size={14} />
             <div class="nav-text">
-              <span class="nav-name">Repo</span>
+              <span class="nav-name">Repos</span>
               <span class="nav-meta">Per-repo actions and cleanup</span>
             </div>
           </div>
@@ -86,7 +96,9 @@
     </aside>
 
     <section class="settings-content">
-      {#if navigation.settingsSection === 'repo'}
+      {#if navigation.settingsSection === 'general'}
+        <GeneralSettingsPanel />
+      {:else if navigation.settingsSection === 'repo'}
         <ActionsSettingsPanel />
       {:else if navigation.settingsSection === 'keyboard'}
         <KeyboardSettingsPanel />
@@ -172,19 +184,6 @@
     background: color-mix(in srgb, var(--bg-chrome) 75%, transparent);
   }
 
-  .settings-nav-header {
-    padding: 14px 12px 8px;
-  }
-
-  .settings-nav-title {
-    display: inline-block;
-    font-size: calc(var(--size-xs) - 1px);
-    font-weight: 600;
-    color: var(--text-faint);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
   .settings-nav-list {
     display: flex;
     flex-direction: column;
@@ -286,10 +285,6 @@
       background: color-mix(in srgb, var(--bg-chrome) 65%, transparent);
     }
 
-    .settings-nav-header {
-      display: none;
-    }
-
     .settings-nav-list {
       flex-direction: row;
       align-items: center;
diff --git a/apps/staged/src/lib/features/settings/preferences.svelte.ts b/apps/staged/src/lib/features/settings/preferences.svelte.ts
index 5a7279379..8d219e056 100644
--- a/apps/staged/src/lib/features/settings/preferences.svelte.ts
+++ b/apps/staged/src/lib/features/settings/preferences.svelte.ts
@@ -14,13 +14,15 @@ import {
   setSyntaxTheme,
   getTheme,
   isLightTheme,
+  loadAllThemePreviewColors,
   type SyntaxThemeName,
+  type ThemePreviewColors,
 } from '../diff/highlighter';
 import { initPersistentStore, getStoreValue, setStoreValue } from '../../shared/persistentStore';
 import { createAdaptiveTheme, themeToVarMap } from '../../theme';
 
 // Re-export for convenience
-export { isLightTheme };
+export { isLightTheme, loadAllThemePreviewColors, type ThemePreviewColors };
 
 // =============================================================================
 // Constants
@@ -35,11 +37,14 @@ const SIZE_STORE_KEY = 'size-base';
 const SYNTAX_THEME_STORE_KEY = 'syntax-theme';
 const RECENT_AGENTS_STORE_KEY = 'recent-agents';
 const PROJECT_AGENTS_STORE_KEY = 'project-agents';
+const AUTO_REVIEW_STORE_KEY = 'auto-start-code-reviews';
 /** Maximum number of recent agents to remember. */
 const RECENT_AGENTS_MAX = 10;
 
 const DEFAULT_SYNTAX_THEME: SyntaxThemeName = 'laserwave';
 
+export type AutoReviewMode = 'never' | 'after-changes';
+
 // =============================================================================
 // Reactive State
 // =============================================================================
@@ -71,6 +76,8 @@ export const preferences = $state({
    * Used by project-level chat so changing one project does not affect others.
    */
   projectAgents: {} as Record<string, string>,
+  /** Whether auto code reviews are triggered after commits */
+  autoReviewMode: 'after-changes' as AutoReviewMode,
   /** Whether all preferences have been loaded from storage */
   loaded: false,
 });
@@ -144,6 +151,15 @@ export async function initPreferences(): Promise<void> {
     preferences.projectAgents = savedProjectAgents;
   }
 
+  // Load auto-review mode
+  const savedAutoReview = await getStoreValue<AutoReviewMode>(AUTO_REVIEW_STORE_KEY);
+  if (savedAutoReview === 'never' || savedAutoReview === 'after-changes') {
+    preferences.autoReviewMode = savedAutoReview;
+  } else {
+    const { isSqAvailable } = await import('../../commands');
+    preferences.autoReviewMode = (await isSqAvailable()) ? 'after-changes' : 'never';
+  }
+
   preferences.loaded = true;
 }
 
@@ -168,6 +184,15 @@ export async function selectSyntaxTheme(name: string): Promise<void> {
   applyAdaptiveTheme();
 }
 
+// =============================================================================
+// Auto Review Actions
+// =============================================================================
+
+export function setAutoReviewMode(mode: AutoReviewMode): void {
+  preferences.autoReviewMode = mode;
+  setStoreValue(AUTO_REVIEW_STORE_KEY, mode);
+}
+
 // =============================================================================
 // Size Actions
 // =============================================================================
diff --git a/packages/diff-viewer/src/lib/utils/highlighter.ts b/packages/diff-viewer/src/lib/utils/highlighter.ts
index 2e0685732..6512ea9d7 100644
--- a/packages/diff-viewer/src/lib/utils/highlighter.ts
+++ b/packages/diff-viewer/src/lib/utils/highlighter.ts
@@ -698,6 +698,63 @@ function extractGitColors(colors: Record<string, string> | undefined): {
   };
 }
 
+/**
+ * Preview colors for a theme swatch (extracted from raw theme data).
+ */
+export interface ThemePreviewColors {
+  bg: string;
+  fg: string;
+  comment: string;
+}
+
+/**
+ * Extract preview colors from a raw theme definition without loading it into the highlighter.
+ */
+function extractPreviewColors(raw: ThemeRegistrationRaw): ThemePreviewColors {
+  const rawObj = raw as unknown as Record<string, unknown>;
+  const bg =
+    (raw.colors?.['editor.background'] as string) ||
+    rawObj.bg as string ||
+    '#1e1e1e';
+  const fg =
+    (raw.colors?.['editor.foreground'] as string) ||
+    rawObj.fg as string ||
+    '#d4d4d4';
+
+  const settings = rawObj.tokenColors as ThemeSetting[] | undefined ||
+    rawObj.settings as ThemeSetting[] | undefined ||
+    [];
+  const comment = extractCommentColor(settings, fg);
+
+  return { bg, fg, comment };
+}
+
+/**
+ * Load preview colors for all registered themes.
+ * Loads raw theme data in parallel without registering them in the highlighter.
+ */
+export async function loadAllThemePreviewColors(): Promise<Map<string, ThemePreviewColors>> {
+  const results = new Map<string, ThemePreviewColors>();
+  const entries = [...themeRegistry.entries()];
+
+  const loaded = await Promise.all(
+    entries.map(async ([name, desc]) => {
+      try {
+        const raw = await desc.load();
+        return [name, extractPreviewColors(raw)] as const;
+      } catch {
+        return null;
+      }
+    })
+  );
+
+  for (const entry of loaded) {
+    if (entry) results.set(entry[0], entry[1]);
+  }
+
+  return results;
+}
+
 /**
  * Extract theme info from a loaded Shiki theme.
  */
diff --git a/packages/diff-viewer/src/lib/utils/index.ts b/packages/diff-viewer/src/lib/utils/index.ts
index 87379b2ae..c2a1e36f5 100644
--- a/packages/diff-viewer/src/lib/utils/index.ts
+++ b/packages/diff-viewer/src/lib/utils/index.ts
@@ -56,8 +56,10 @@ export {
   getRegisteredThemes,
   hasTheme,
   SYNTAX_THEMES,
+  loadAllThemePreviewColors,
   type Token,
   type HighlighterTheme,
+  type ThemePreviewColors,
   type SyntaxThemeName,
 } from './highlighter';