refactor(explorer): improve file history state management

Adjusts the logic governing when file history views are refreshed or displayed. This ensures that selecting a file via the explorer correctly hides any active file history view, and prevents unnecessary refreshes of history data if the view is already collapsed or if the repository path is not yet set.

- Added explicit function to reset file history state
- Prevents automatic display of file history upon file selection
- Refines conditions for refreshing file history during repo updates

src-tauri/crates/commit_ai/src/cloud.rs

@@ -2,7 +2,7 @@ use std::time::Duration;
 
 use serde::{Deserialize, Serialize};
 
-use crate::{build_messages, looks_like_diff_echo, sanitize_message};
+use crate::{build_messages, build_review_messages, looks_like_diff_echo, sanitize_message};
 
 // Generous sizing so a detailed body with bullet points isn't cut off.
 const DEFAULT_MAX_TOKENS: u32 = 1500;
@@ -139,6 +139,82 @@ pub async fn generate_custom(
     openai_compatible_request(url, api_key, model, diff, notes).await
 }
 
+async fn openai_compatible_review_request(
+    url: String,
+    bearer: Option<&str>,
+    model: &str,
+    diff: &str,
+) -> Result<String, String> {
+    let (system, user) = build_review_messages(diff)?;
+    let body = OpenAiRequest {
+        model: model.to_string(),
+        messages: vec![
+            OpenAiMessage {
+                role: "system",
+                content: system,
+            },
+            OpenAiMessage {
+                role: "user",
+                content: user,
+            },
+        ],
+        temperature: 0.1,
+    };
+    let client = http_client()?;
+    let mut request = client.post(url).json(&body);
+    if let Some(key) = bearer.filter(|key| !key.trim().is_empty()) {
+        request = request.bearer_auth(key);
+    }
+    let response = request
+        .send()
+        .await
+        .map_err(|err| format!("Request to the AI model failed: {err}"))?;
+    let status = response.status();
+    let text = response
+        .text()
+        .await
+        .map_err(|err| format!("Could not read response: {err}"))?;
+    if !status.is_success() {
+        return Err(format!("API error ({status}): {text}"));
+    }
+    let parsed: OpenAiResponse =
+        serde_json::from_str(&text).map_err(|err| format!("Could not process response: {err}"))?;
+    parsed
+        .choices
+        .into_iter()
+        .next()
+        .and_then(|choice| choice.message.content)
+        .map(|content| sanitize_message(&content))
+        .filter(|content| !content.is_empty())
+        .ok_or_else(|| "The model did not return a review.".to_string())
+}
+
+pub async fn review_openai(api_key: &str, model: &str, diff: &str) -> Result<String, String> {
+    if api_key.trim().is_empty() {
+        return Err("OpenAI API key is missing.".to_string());
+    }
+    openai_compatible_review_request(
+        "https://api.openai.com/v1/chat/completions".to_string(),
+        Some(api_key),
+        model,
+        diff,
+    )
+    .await
+}
+
+pub async fn review_custom(
+    base_url: &str,
+    api_key: Option<&str>,
+    model: &str,
+    diff: &str,
+) -> Result<String, String> {
+    if base_url.trim().is_empty() {
+        return Err("Endpoint URL is missing.".to_string());
+    }
+    let url = format!("{}/chat/completions", base_url.trim_end_matches('/'));
+    openai_compatible_review_request(url, api_key, model, diff).await
+}
+
 #[derive(Serialize)]
 struct AnthropicMessage {
     role: &'static str,
@@ -220,3 +296,45 @@ pub async fn generate_anthropic(
     }
     Ok(message)
 }
+
+pub async fn review_anthropic(api_key: &str, model: &str, diff: &str) -> Result<String, String> {
+    if api_key.trim().is_empty() {
+        return Err("Anthropic API key is missing.".to_string());
+    }
+    let (system, user) = build_review_messages(diff)?;
+    let body = AnthropicRequest {
+        model: model.to_string(),
+        max_tokens: 2400,
+        system,
+        messages: vec![AnthropicMessage {
+            role: "user",
+            content: user,
+        }],
+    };
+    let client = http_client()?;
+    let response = client
+        .post("https://api.anthropic.com/v1/messages")
+        .header("x-api-key", api_key)
+        .header("anthropic-version", "2023-06-01")
+        .json(&body)
+        .send()
+        .await
+        .map_err(|err| format!("Request to Anthropic failed: {err}"))?;
+    let status = response.status();
+    let text = response
+        .text()
+        .await
+        .map_err(|err| format!("Could not read response: {err}"))?;
+    if !status.is_success() {
+        return Err(format!("API error ({status}): {text}"));
+    }
+    let parsed: AnthropicResponse =
+        serde_json::from_str(&text).map_err(|err| format!("Could not process response: {err}"))?;
+    parsed
+        .content
+        .into_iter()
+        .find_map(|block| block.text)
+        .map(|text| sanitize_message(&text))
+        .filter(|text| !text.is_empty())
+        .ok_or_else(|| "The model did not return a review.".to_string())
+}

src-tauri/crates/commit_ai/src/lib.rs

@@ -1,6 +1,9 @@
 mod cloud;
 
-pub use cloud::{generate_anthropic, generate_custom, generate_openai};
+pub use cloud::{
+    generate_anthropic, generate_custom, generate_openai, review_anthropic, review_custom,
+    review_openai,
+};
 
 use std::{
     collections::hash_map::DefaultHasher,
@@ -443,3 +446,27 @@ instead of a direct string comparison.\n\n\
     user.push_str(&format!("Staged diff:\n{diff}"));
     Ok((system, user))
 }
+
+pub(crate) fn build_review_messages(diff: &str) -> Result<(String, String), String> {
+    if diff.trim().is_empty() {
+        return Err("No staged changes available for review.".to_string());
+    }
+
+    const MAX_CHARS: usize = 36_000;
+    let diff = truncate_at_char_boundary(diff, MAX_CHARS);
+    let system = r#"You are a senior software engineer performing a focused pre-commit review.
+Review only the supplied staged Git diff. Look for concrete correctness bugs, security issues,
+data loss, regressions, broken edge cases, unsafe error handling, and meaningful performance or
+maintainability risks. Do not report formatting preferences or speculative nitpicks.
+
+Return ONLY valid JSON with this exact shape:
+{"summary":"one concise overall assessment","risk":"low|medium|high","findings":[{"severity":"critical|warning|info","title":"short title","description":"clear evidence and impact","file":"path or null","line":123,"suggestion":"specific safe next step"}]}
+
+Use the new-file line number from the diff when it is known; otherwise use null. Use null for file
+when the issue is repository-wide. Maximum 12 findings, ordered critical then warning then info.
+If no actionable issue exists, return an empty findings array and risk low. Never use markdown,
+code fences, commentary outside the JSON, or claim that tests were executed."#
+        .to_string();
+    let user = format!("Staged diff to review:\n{diff}");
+    Ok((system, user))
+}

src-tauri/src/git.rs

@@ -1145,6 +1145,143 @@ pub async fn commit_ai_generate(
     }
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize)]
+#[serde(rename_all = "lowercase")]
+pub enum AiReviewRisk {
+    Low,
+    Medium,
+    High,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize)]
+#[serde(rename_all = "lowercase")]
+pub enum AiReviewSeverity {
+    Critical,
+    Warning,
+    Info,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct AiReviewFinding {
+    pub severity: AiReviewSeverity,
+    pub title: String,
+    pub description: String,
+    pub file: Option<String>,
+    pub line: Option<u32>,
+    pub suggestion: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct AiReviewResult {
+    pub summary: String,
+    pub risk: AiReviewRisk,
+    pub findings: Vec<AiReviewFinding>,
+}
+
+#[derive(Deserialize)]
+struct AiReviewWireFinding {
+    severity: String,
+    title: String,
+    description: String,
+    file: Option<String>,
+    line: Option<u32>,
+    suggestion: String,
+}
+
+#[derive(Deserialize)]
+struct AiReviewWireResult {
+    summary: String,
+    risk: String,
+    #[serde(default)]
+    findings: Vec<AiReviewWireFinding>,
+}
+
+fn parse_ai_review(raw: &str) -> Result<AiReviewResult, String> {
+    let trimmed = raw.trim().trim_matches('`').trim();
+    let json = match (trimmed.find('{'), trimmed.rfind('}')) {
+        (Some(start), Some(end)) if start <= end => &trimmed[start..=end],
+        _ => return Err("The AI review did not contain valid JSON.".to_string()),
+    };
+    let wire: AiReviewWireResult = serde_json::from_str(json)
+        .map_err(|error| format!("Could not process the AI review: {error}"))?;
+    let risk = match wire.risk.trim().to_ascii_lowercase().as_str() {
+        "high" => AiReviewRisk::High,
+        "medium" => AiReviewRisk::Medium,
+        _ => AiReviewRisk::Low,
+    };
+    let mut findings = wire
+        .findings
+        .into_iter()
+        .filter(|finding| {
+            !finding.title.trim().is_empty() && !finding.description.trim().is_empty()
+        })
+        .map(|finding| AiReviewFinding {
+            severity: match finding.severity.trim().to_ascii_lowercase().as_str() {
+                "critical" | "error" | "high" => AiReviewSeverity::Critical,
+                "warning" | "warn" | "medium" => AiReviewSeverity::Warning,
+                _ => AiReviewSeverity::Info,
+            },
+            title: finding.title.trim().to_string(),
+            description: finding.description.trim().to_string(),
+            file: finding.file.filter(|file| !file.trim().is_empty()),
+            line: finding.line,
+            suggestion: finding.suggestion.trim().to_string(),
+        })
+        .collect::<Vec<_>>();
+    findings.sort_by_key(|finding| match finding.severity {
+        AiReviewSeverity::Critical => 0,
+        AiReviewSeverity::Warning => 1,
+        AiReviewSeverity::Info => 2,
+    });
+    findings.truncate(12);
+    Ok(AiReviewResult {
+        summary: if wire.summary.trim().is_empty() {
+            "Review completed.".to_string()
+        } else {
+            wire.summary.trim().to_string()
+        },
+        risk,
+        findings,
+    })
+}
+
+#[tauri::command]
+pub async fn commit_ai_review(
+    path: String,
+    provider: String,
+    model: Option<String>,
+    api_key: Option<String>,
+    base_url: Option<String>,
+) -> Result<AiReviewResult, String> {
+    let repo = resolve_repo(&path)?;
+    let diff = staged_diff(&repo)?;
+    let model = model.filter(|value| !value.trim().is_empty());
+    let api_key = api_key.filter(|value| !value.trim().is_empty());
+    let base_url = base_url.filter(|value| !value.trim().is_empty());
+    let raw = match provider.as_str() {
+        "openai" => {
+            let api_key = api_key.ok_or_else(|| "OpenAI API key is missing.".to_string())?;
+            let model = model.unwrap_or_else(|| "gpt-4o-mini".to_string());
+            commit_ai::review_openai(&api_key, &model, &diff).await?
+        }
+        "anthropic" => {
+            let api_key = api_key.ok_or_else(|| "Anthropic API key is missing.".to_string())?;
+            let model = model.unwrap_or_else(|| "claude-3-5-haiku-latest".to_string());
+            commit_ai::review_anthropic(&api_key, &model, &diff).await?
+        }
+        "custom" => {
+            let base_url = base_url.ok_or_else(|| "Endpoint URL is missing.".to_string())?;
+            let model = model.ok_or_else(|| "Model name is missing.".to_string())?;
+            commit_ai::review_custom(&base_url, api_key.as_deref(), &model, &diff).await?
+        }
+        "local" => return Err("Pre-commit review currently requires an API provider.".to_string()),
+        other => return Err(format!("Unknown AI provider: {other}")),
+    };
+    parse_ai_review(&raw)
+}
+
 #[tauri::command]
 pub fn apply_file_patch(
     path: String,
@@ -6213,4 +6350,19 @@ mod tests {
         assert_eq!(result.lines.len(), 1);
         assert!(result.lines[0].is_uncommitted);
     }
+
+    #[test]
+    fn parse_ai_review_accepts_fenced_json_and_normalizes_findings() {
+        let raw = r#"```json
+{"summary":"One issue found","risk":"HIGH","findings":[{"severity":"warn","title":"Unchecked result","description":"The new call ignores an error.","file":"src/main.rs","line":42,"suggestion":"Propagate the error."}]}
+```"#;
+
+        let review = parse_ai_review(raw).expect("review JSON should parse");
+
+        assert_eq!(review.risk, AiReviewRisk::High);
+        assert_eq!(review.findings.len(), 1);
+        assert_eq!(review.findings[0].severity, AiReviewSeverity::Warning);
+        assert_eq!(review.findings[0].file.as_deref(), Some("src/main.rs"));
+        assert_eq!(review.findings[0].line, Some(42));
+    }
 }

src-tauri/src/main.rs

@@ -8,14 +8,14 @@ use git::{
     SearchCancellationState, amend_commit, apply_file_patch, cancel_code_search,
     cancel_file_history, checkout_branch, cherry_pick_abort, cherry_pick_commit,
     cherry_pick_continue, clone_repository, commit, commit_ai_generate, commit_ai_load,
-    commit_ai_local_models, commit_ai_status, compare_commits, compare_file_to_head,
-    compare_file_to_parent, create_branch, create_tag, cred_delete, cred_load, cred_save,
-    delete_branch, delete_tag, diff_file_against_working_tree, fetch, get_file_blame,
-    get_file_patch, get_remote_url, get_status, last_commit_message, list_branches, list_commits,
-    list_file_history, list_interactive_rebase_commits, list_reflog, list_repository_files,
-    list_stashes, list_tags, merge_branch, open_repo_in_explorer, open_repository,
-    open_repository_bundle, open_repository_file, pull, push, push_tag, read_conflict,
-    rebase_abort, rebase_branch, rebase_continue, rename_branch, resolve_conflict,
+    commit_ai_local_models, commit_ai_review, commit_ai_status, compare_commits,
+    compare_file_to_head, compare_file_to_parent, create_branch, create_tag, cred_delete,
+    cred_load, cred_save, delete_branch, delete_tag, diff_file_against_working_tree, fetch,
+    get_file_blame, get_file_patch, get_remote_url, get_status, last_commit_message, list_branches,
+    list_commits, list_file_history, list_interactive_rebase_commits, list_reflog,
+    list_repository_files, list_stashes, list_tags, merge_branch, open_repo_in_explorer,
+    open_repository, open_repository_bundle, open_repository_file, pull, push, push_tag,
+    read_conflict, rebase_abort, rebase_branch, rebase_continue, rename_branch, resolve_conflict,
     resolve_conflict_side, restore_file_from_commit, restore_files, restore_reflog_entry,
     restore_to_commit, run_sequence_editor_if_requested, search_code_introductions, stage_files,
     start_interactive_rebase, stash_apply, stash_drop, stash_pop, stash_push, undo_last_commit,
@@ -53,7 +53,7 @@ async fn main() {
         return;
     }
 
-    let builder =tauri::Builder::default()
+    let builder = tauri::Builder::default()
         .plugin(tauri_plugin_single_instance::init(|app, _, _| {
             #[cfg(desktop)]
             let _ = app
@@ -116,6 +116,7 @@ async fn main() {
             commit_ai_load,
             commit_ai_local_models,
             commit_ai_generate,
+            commit_ai_review,
             pull,
             push,
             fetch,

src/App.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
+  import { getVersion } from "@tauri-apps/api/app";
   import { invoke } from "@tauri-apps/api/core";
   import { open as openDialog } from "@tauri-apps/plugin-dialog";
   import { check, type DownloadEvent, type Update } from "@tauri-apps/plugin-updater";
-  import { AlertCircle, BookOpen, Cherry, Download, FolderOpen, GitBranch, GitMerge, LoaderCircle, Plus, Search, Star, X } from "@lucide/svelte";
+  import { AlertCircle, Cherry, Download, FolderOpen, GitBranch, GitMerge, LoaderCircle, Plus, Search, Star, X } from "@lucide/svelte";
 
   import TitleBar from "./lib/TitleBar.svelte";
   import RepoToolbar from "./lib/RepoToolbar.svelte";
+  import RepoTabs from "./lib/RepoTabs.svelte";
   import AiSettingsDialog from "./lib/components/AiSettingsDialog.svelte";
+  import AiReviewDialog from "./lib/components/AiReviewDialog.svelte";
   import AnalyticsNoticeDialog from "./lib/components/AnalyticsNoticeDialog.svelte";
   import AppSettingsDialog from "./lib/components/AppSettingsDialog.svelte";
   import BranchDeleteConfirmDialog from "./lib/components/BranchDeleteConfirmDialog.svelte";
@@ -44,6 +47,7 @@
     cloneRepository,
     commit,
     commitAiGenerate,
+    commitAiReview,
     commitAiLoad,
     commitAiLocalModels,
     commitAiStatus,
@@ -105,6 +109,7 @@
   } from "./lib/git";
 
   import type {
+    AiReviewResult,
     AiSettings,
     AppLanguage,
     AppTheme,
@@ -180,6 +185,7 @@
   const ANALYTICS_SETTINGS_KEY = "gitlite.analyticsSettings.v1";
   const APP_THEME_KEY = "gitlite.theme.v1";
   const APP_LANGUAGE_KEY = "gitlite.language.v1";
+  const AUTO_REFRESH_ENABLED_KEY = "gitlite.autoRefreshEnabled.v1";
   const COMMIT_PANEL_HEIGHT_KEY = "gitlite.commitPanelHeight.v1";
   const LEFT_SIDEBAR_WIDTH_KEY = "gitlite.leftSidebarWidth.v1";
   const LEFT_BRANCH_PANEL_HEIGHT_KEY = "gitlite.leftBranchPanelHeight.v1";
@@ -248,6 +254,9 @@
   let lastLocalAiGeneratedMessage = "";
   let commitAiPhase: CommitAiPhase = "idle";
   let commitAiGenerating = false;
+  let commitAiReviewing = false;
+  let aiReviewResult: AiReviewResult | null = null;
+  let aiReviewOpen = false;
   let commitAiPollTimer: ReturnType<typeof setInterval> | undefined;
   let aiSettings: AiSettings = defaultAiSettings();
   let aiSettingsOpen = false;
@@ -303,7 +312,7 @@
   let conflictTarget = "";
   let conflict: ConflictFile | null = null;
   let preparedResolutions: Record<string, PreparedResolution> = {};
-  let autoRefreshEnabled = true;
+  let autoRefreshEnabled = loadStoredBoolean(AUTO_REFRESH_ENABLED_KEY, true);
   let autoRefreshInFlight = false;
   let credDialogOpen = false;
   let credDialogAction: CredentialAction | null = null;
@@ -365,6 +374,7 @@
   let fileHistoryResizeStartWidth = 0;
   let fileHistoryCollapsed = true;
   let themeMediaQuery: MediaQueryList | undefined;
+  let appVersion = "";
 
   // ── Derived ────────────────────────────────────────────────────────────────
 
@@ -426,6 +436,7 @@
     themeMediaQuery = window.matchMedia("(prefers-color-scheme: light)");
     themeMediaQuery.addEventListener("change", handleSystemThemeChange);
     void runStartupSequence();
+    void getVersion().then((version) => { appVersion = version; }).catch(() => { appVersion = ""; });
   });
 
   onDestroy(() => {
@@ -858,15 +869,19 @@
     if (appTheme === "system") applyThemePreference(appTheme);
   }
 
-  function saveAppSettings(next: AnalyticsSettings, nextTheme: AppTheme, nextLanguage: AppLanguage) {
+  function saveAppSettings(next: AnalyticsSettings, nextTheme: AppTheme, nextLanguage: AppLanguage, nextAutoRefresh: boolean) {
+    const autoRefreshWasEnabled = autoRefreshEnabled;
     analyticsSettings = next;
     appTheme = nextTheme;
     appLanguage = nextLanguage;
+    autoRefreshEnabled = nextAutoRefresh;
     persistAnalyticsSettings(next);
     persistThemePreference(nextTheme);
     persistLanguagePreference(nextLanguage);
+    persistStoredBoolean(AUTO_REFRESH_ENABLED_KEY, nextAutoRefresh);
     appSettingsOpen = false;
-    if (next.enabled) trackEvent("settings_saved", { analytics_enabled: 1, theme: nextTheme, language: nextLanguage });
+    if (nextAutoRefresh && !autoRefreshWasEnabled) void autoRefreshTick();
+    if (next.enabled) trackEvent("settings_saved", { analytics_enabled: 1, theme: nextTheme, language: nextLanguage, auto_refresh: nextAutoRefresh ? 1 : 0 });
   }
 
   function updateCommitMessage(message: string) {
@@ -927,9 +942,49 @@
     }
   }
 
-  function toggleAutoRefresh() {
-    autoRefreshEnabled = !autoRefreshEnabled;
-    if (autoRefreshEnabled) void autoRefreshTick();
+  async function reviewStagedWithAi() {
+    if (!activeRepoPath || commitAiReviewing || stagedCount === 0) return;
+    if (aiSettings.provider === "local") {
+      errorMessage = "Pre-commit review currently requires OpenAI, Anthropic, or a custom endpoint.";
+      return;
+    }
+    commitAiReviewing = true;
+    errorMessage = "";
+    try {
+      if (aiSettings.provider === "openai") {
+        const cred = await credLoad("ai:openai");
+        aiReviewResult = await commitAiReview(activeRepoPath, {
+          provider: "openai",
+          model: aiSettings.openaiModel,
+          apiKey: cred?.password,
+        });
+      } else if (aiSettings.provider === "anthropic") {
+        const cred = await credLoad("ai:anthropic");
+        aiReviewResult = await commitAiReview(activeRepoPath, {
+          provider: "anthropic",
+          model: aiSettings.anthropicModel,
+          apiKey: cred?.password,
+        });
+      } else {
+        const cred = await credLoad("ai:custom");
+        aiReviewResult = await commitAiReview(activeRepoPath, {
+          provider: "custom",
+          model: aiSettings.customModel,
+          baseUrl: aiSettings.customBaseUrl,
+          apiKey: cred?.password,
+        });
+      }
+      aiReviewOpen = true;
+      trackEvent("ai_precommit_review", {
+        provider: aiSettings.provider,
+        findings: aiReviewResult.findings.length,
+        risk: aiReviewResult.risk,
+      });
+    } catch (error) {
+      errorMessage = errorToMessage(error);
+    } finally {
+      commitAiReviewing = false;
+    }
   }
 
   // ── Updates ────────────────────────────────────────────────────────────────
@@ -1557,6 +1612,15 @@
     fileHistoryCollapsed = false;
   }
 
+  function hideAndResetFileHistory() {
+    fileHistoryRequestId += 1;
+    cancelActiveFileHistoryLoad();
+    activeFileHistoryRequestId = "";
+    fileHistoryLoading = false;
+    fileHistory = [];
+    fileHistoryCollapsed = true;
+  }
+
   function rememberRecentRepo(path: string) {
     recentRepoPaths = uniqueRepoPaths([path, ...recentRepoPaths]).slice(0, 40);
     persistRepoLists();
@@ -1763,7 +1827,7 @@
     await refreshBranchList(path);
     await refreshTags(path);
     await refreshCommitHistory(path);
-    if (lastFileHistoryHeadHash !== previousHeadHash) {
+    if (lastFileHistoryHeadHash !== previousHeadHash && !fileHistoryCollapsed) {
       await refreshFileHistory(path);
     }
   }
@@ -3207,7 +3271,7 @@
   }
 
   async function selectExplorerNode(node: ExplorerNode) {
-    if (!activeRepoPath || (selectedExplorerPath === node.path && selectedExplorerKind === node.kind)) return;
+    if (!activeRepoPath) return;
     selectedExplorerPath = node.path;
     selectedExplorerKind = node.kind;
     revealFileHistory();
@@ -3237,9 +3301,7 @@
     selectedExplorerPath = file.path;
     selectedExplorerKind = "file";
     expandedExplorerPaths = new Set([...expandedExplorerPaths, ...explorerParentFolders(file.path)]);
-    revealFileHistory();
-
-    void loadSelectedFileHistory(file.path);
+    hideAndResetFileHistory();
     trackEvent("explorer_file_selected", {
       source: "status",
       status: file.unstaged ?? file.staged ?? "unknown",
@@ -3525,11 +3587,6 @@
 
 <main class="shell">
   <TitleBar
-    branch={status?.current_branch ?? ""}
-    ahead={status?.ahead ?? 0}
-    behind={status?.behind ?? 0}
-    repoName={activeRepoPath ? (activeRepoPath.split(/[\\/]/).filter(Boolean).slice(-1)[0] ?? "") : ""}
-    hasRepository={workspaceActive}
     onOpenSettings={() => { appSettingsOpen = true; }}
     onOpenHelp={openHelp}
     language={appLanguage}
@@ -3537,65 +3594,18 @@
 
   <div class="shell-body">
 
-    <header class="repo-tabbar" aria-label="Repository tabs">
-      <button
-        class="repo-tab management"
-        class:active={activeView === "management"}
-        type="button"
-        onclick={openRepoManagement}
-        disabled={isBusy}
-        title="Repository Management"
-      >
-        <BookOpen size={14} aria-hidden="true" />
-        Repository Management
-      </button>
-
-      <div class="repo-tabs-scroll">
-        {#each repoTabs as repo (repo.path)}
-          <div
-            class="repo-tab-wrap"
-            class:active={activeView === "repository" && sameRepoPath(activeRepoPath, repo.path)}
-            role="presentation"
-            oncontextmenu={(event) => openRepoTabContextMenu(repo.path, event)}
-          >
-            <button
-              class="repo-tab"
-              type="button"
-              onclick={() => selectRepoTab(repo.path)}
-              disabled={isBusy}
-              title={repo.path}
-            >
-              <FolderOpen size={14} aria-hidden="true" />
-              <span>{repo.name}</span>
-              {#if repo.branch}
-                <strong>{repo.branch}</strong>
-              {/if}
-            </button>
-            <button
-              class="repo-tab-close"
-              type="button"
-              onclick={(event) => closeRepoTab(repo.path, event)}
-              disabled={isBusy}
-              aria-label={`Close ${repo.name}`}
-              title="Close repository tab"
-            >
-              <X size={13} aria-hidden="true" />
-            </button>
-          </div>
-        {/each}
-      </div>
-
-      <button
-        class="repo-tab-add"
-        type="button"
-        onclick={chooseRepositoryFolder}
-        disabled={isBusy}
-        title="Open repository folder"
-        aria-label="Open repository folder"
-      >
-        <Plus size={15} aria-hidden="true" />
-      </button>
-    </header>
+    <RepoTabs
+      {activeView}
+      {repoTabs}
+      {isBusy}
+      language={appLanguage}
+      onOpenManagement={openRepoManagement}
+      isActive={(path) => activeView === "repository" && sameRepoPath(activeRepoPath, path)}
+      onSelect={selectRepoTab}
+      onClose={closeRepoTab}
+      onContextMenu={openRepoTabContextMenu}
+      onAdd={chooseRepositoryFolder}
+    />
 
     <!-- Repo actions live under the tab bar and disappear in Repository
          Management, where none of them are applicable. -->
@@ -3606,8 +3616,6 @@
         {operation}
         ahead={status?.ahead ?? 0}
         behind={status?.behind ?? 0}
-        {autoRefreshEnabled}
-        {autoRefreshInFlight}
         language={appLanguage}
         onFetch={fetchRepo}
         onPull={pullRepo}
@@ -3618,7 +3626,6 @@
         onInteractiveRebase={openInteractiveRebase}
         onReflog={openReflog}
         onOpenInExplorer={openActiveRepoInExplorer}
-        onToggleAutoRefresh={toggleAutoRefresh}
       />
     {/if}
 
@@ -4060,11 +4067,13 @@
             commitAiProvider={aiSettings.provider}
             {commitAiPhase}
             {commitAiGenerating}
+            {commitAiReviewing}
             {canAmend}
             {amendMode}
             onCommit={commitChanges}
             onCommitMessageChange={updateCommitMessage}
             onGenerateCommitMessage={generateCommitMessageWithAi}
+            onReviewStaged={reviewStagedWithAi}
             onOpenAiSettings={() => { aiSettingsOpen = true; }}
             onToggleAmend={toggleAmendMode}
             onUndoLastCommit={undoLastCommitChange}
@@ -4145,6 +4154,19 @@
       </aside>
     </section>
     {/if}
+    <footer class="workspace-statusbar" aria-label="Application status summary">
+      {#if workspaceActive}
+        <span class:clean={status?.clean} class="workspace-health"><span aria-hidden="true"></span>{status?.clean ? "Working tree clean" : `${changedFiles.length} changed ${changedFiles.length === 1 ? "file" : "files"}`}</span>
+      {/if}
+      <span class="workspace-status-spacer"></span>
+      {#if workspaceActive}
+        <span class="workspace-branch"><GitBranch size={12} aria-hidden="true" />{status?.current_branch ?? "No branch"}</span>
+        <span class="ahead">↑ {status?.ahead ?? 0}</span>
+        <span class="behind">↓ {status?.behind ?? 0}</span>
+        <span class:active={autoRefreshEnabled} class="workspace-auto">Auto <i aria-hidden="true"></i></span>
+      {/if}
+      {#if appVersion}<span class="app-version" title={`Gitty version ${appVersion}`}>Gitty v{appVersion}</span>{/if}
+    </footer>
   </div>
 </main>
 
@@ -4173,6 +4195,7 @@
     analytics={analyticsSettings}
     theme={appTheme}
     language={appLanguage}
+    autoRefresh={autoRefreshEnabled}
     onSave={saveAppSettings}
     onClose={() => { appSettingsOpen = false; }}
   />
@@ -4182,6 +4205,16 @@
   <HelpOverlay language={appLanguage} onClose={() => { helpOpen = false; }} />
 {/if}
 
+{#if aiReviewOpen && aiReviewResult}
+  <AiReviewDialog
+    result={aiReviewResult}
+    provider={aiSettings.provider}
+    isReviewing={commitAiReviewing}
+    onRerun={reviewStagedWithAi}
+    onClose={() => { aiReviewOpen = false; }}
+  />
+{/if}
+
 {#if linePatchOpen && linePatchFile}
   <LinePatchDialog
     file={linePatchFile}

src/app.css

@@ -896,10 +896,10 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: stretch;
-    min-height: 40px;
+    min-height: 44px;
     border: 1px solid var(--color-border-subtle);
     border-radius: 10px;
-    background: rgba(16, 17, 29, 0.9);
+    background: rgba(13, 15, 25, 0.92);
     overflow: hidden;
   }
 
@@ -907,76 +907,89 @@
     display: flex;
     align-items: stretch;
     min-width: 0;
+    border-left: 1px solid var(--color-border-subtle);
     overflow-x: auto;
     overflow-y: hidden;
+    scrollbar-width: thin;
   }
 
   .repo-tab-wrap {
     display: flex;
     align-items: stretch;
-    min-width: 0;
+    flex: 0 1 230px;
+    min-width: 150px;
+    max-width: 260px;
+    position: relative;
     border-right: 1px solid var(--color-border-subtle);
-    background: rgba(255,255,255,0.015);
+    background: rgba(255,255,255,0.012);
+    transition: background 120ms ease;
   }
+  .repo-tab-wrap:hover { background: rgba(255,255,255,0.035); }
   .repo-tab-wrap.active {
-    background: rgba(90, 140, 248, 0.16);
-    box-shadow: inset 0 -2px 0 var(--color-primary);
+    background: linear-gradient(180deg, rgba(90,140,248,0.14), rgba(23,29,43,0.96));
+    box-shadow: inset 0 -3px 0 var(--color-primary);
   }
 
   .repo-tab {
-    min-height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    flex: 1 1 auto;
+    min-height: 42px;
     min-width: 0;
-    max-width: 250px;
-    padding: 0 10px;
+    max-width: none;
+    padding: 0 8px 0 13px;
     border: 0;
-    border-right: 1px solid var(--color-border-subtle);
     border-radius: 0;
     background: transparent;
     color: var(--color-ink-muted);
     font-size: 12px;
-    font-weight: 700;
+    font-weight: 720;
+    text-align: left;
   }
+  .repo-tab > svg { flex: 0 0 auto; color: var(--color-ink-faint); }
   .repo-tab.management {
-    max-width: none;
-    min-width: 190px;
+    min-width: 184px;
+    border: 0;
+    box-shadow: inset 0 -3px 0 transparent;
   }
-  .repo-tab.active,
+  .repo-tab.management.active {
+    color: var(--color-ink);
+    background: linear-gradient(180deg, rgba(90,140,248,0.14), rgba(23,29,43,0.96));
+    box-shadow: inset 0 -3px 0 var(--color-primary);
+  }
+  .repo-tab.management:hover:not(:disabled) { background: var(--color-surface-hover); }
   .repo-tab-wrap.active .repo-tab {
     color: var(--color-ink);
   }
+  .repo-tab-wrap.active .repo-tab > svg,
+  .repo-tab.management.active > svg { color: var(--color-accent); }
   .repo-tab span {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .repo-tab strong {
-    flex: 0 0 auto;
-    max-width: 90px;
-    overflow: hidden;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: rgba(94, 110, 156, 0.18);
-    color: var(--color-ink-dim);
-    font-size: 10.5px;
-    font-family: var(--font-mono);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .repo-tab-close,
   .repo-tab-add {
-    min-height: 38px;
-    min-width: 38px;
+    min-height: 42px;
+    min-width: 36px;
     padding: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
     color: var(--color-ink-faint);
   }
+  .repo-tab-close { opacity: 0.58; transition: opacity 120ms ease, color 120ms ease, background 120ms ease; }
+  .repo-tab-wrap:hover .repo-tab-close,
+  .repo-tab-wrap.active .repo-tab-close { opacity: 1; }
+  .repo-tab-close:hover:not(:disabled) { color: var(--color-ink); background: var(--color-surface-hover); }
   .repo-tab-add {
+    min-width: 44px;
     border-left: 1px solid var(--color-border-subtle);
   }
+  .repo-tab-add:hover:not(:disabled) { color: var(--color-accent); background: var(--color-surface-hover); }
 
   .repo-management {
     display: grid;
@@ -2132,15 +2145,15 @@
     align-items: center;
     gap: 6px;
     width: 100%;
-    min-height: 32px;
-    padding: 4px 8px 4px calc(8px + var(--depth, 0) * 14px);
+    min-height: 28px;
+    padding: 2px 7px 2px calc(7px + var(--depth, 0) * 14px);
     border: 1px solid transparent;
     border-radius: 6px;
     background: transparent;
     text-align: left;
     transition: background 120ms ease, border-color 120ms ease;
   }
-  .explorer-row + .explorer-row { margin-top: 2px; }
+  .explorer-row + .explorer-row { margin-top: 0; }
   .explorer-row:hover { background: var(--color-surface-hover); border-color: var(--color-border-subtle); }
   .explorer-row.active { background: rgba(90,140,248,0.1); border-color: rgba(90,140,248,0.28); }
   .explorer-row.folder { font-weight: 700; }
@@ -4958,15 +4971,308 @@
 
 :root[data-theme="light"] .repo-tabbar,
 :root[data-theme="light"] .repo-management-tools {
-  background: rgba(255,255,255,0.78);
+  background: rgba(247,249,252,0.96);
+}
+
+/* 2026 workspace refresh --------------------------------------------------
+   A single, quiet product system shared by management, repository workspace,
+   dialogs and both color themes. Kept as an override layer so existing Git
+   behavior and component ownership stay unchanged. */
+:root {
+  --ui-radius: 7px;
+  --ui-radius-sm: 5px;
+  --ui-control-height: 32px;
+  --ui-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
+  --app-bg: #0d1118;
+  --app-button-bg: #171d27;
+  --app-input-bg: #101620;
+  --app-panel-highlight: none;
+  --app-panel-shadow: none;
+  --color-surface: #111720;
+  --color-surface-alt: #0d121a;
+  --color-surface-dim: #141b25;
+  --color-surface-hover: #1b2431;
+  --color-surface-raised: #151c27;
+  --color-surface-solid: #111720;
+  --color-border: #2a3546;
+  --color-border-subtle: #222c3a;
+  --color-primary: #4d8dff;
+  --color-primary-dark: #3477ed;
+  --color-accent: #65a2ff;
+}
+
+:root[data-theme="light"] {
+  --ui-shadow: 0 10px 28px rgba(23, 40, 72, 0.09);
+  --app-bg: #f4f6f9;
+  --app-button-bg: #ffffff;
+  --app-input-bg: #ffffff;
+  --app-panel-highlight: none;
+  --app-panel-shadow: none;
+  --color-surface: #ffffff;
+  --color-surface-alt: #f7f8fa;
+  --color-surface-dim: #f8f9fb;
+  --color-surface-hover: #f0f4fa;
+  --color-surface-raised: #ffffff;
+  --color-surface-solid: #ffffff;
+  --color-border: #cfd6e1;
+  --color-border-subtle: #e3e7ed;
+  --color-border-input: #c9d1dd;
+  --color-primary: #0b63e6;
+  --color-primary-dark: #0755c8;
+  --color-accent: #0b63e6;
+}
+
+body { background: var(--app-bg); }
+
+button {
+  min-height: var(--ui-control-height);
+  border-radius: var(--ui-radius-sm);
+  box-shadow: none;
+  font-size: 12px;
+  font-weight: 650;
+}
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
+  outline-offset: 1px;
+}
+input, textarea, select { border-radius: var(--ui-radius-sm); }
+input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
+
+.shell { --app-titlebar-height: 40px; --app-toolbar-height: 64px; background: var(--app-bg); }
+.shell-body { gap: 0; padding: 0; }
+.titlebar {
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: var(--color-surface-solid);
+}
+.titlebar-brand { min-width: 140px; padding-left: 14px; border-right: 0; font-size: 14px; }
+.titlebar-brand-icon,
+.titlebar-brand-icon img { width: 22px; height: 22px; }
+.titlebar-brand-icon { flex-basis: 22px; }
+.titlebar-drag { align-self: stretch; min-width: 0; }
+.titlebar-info { justify-self: center; width: min(480px, 100%); }
+.titlebar-context { justify-content: center; }
+.tb-repo, .tb-branch { color: var(--color-ink); font-size: 13px; }
+.tb-version { color: var(--color-ink-faint); }
+.titlebar-globals { margin-left: auto; }
+.titlebar-divider { background: var(--color-border-subtle); }
+
+.repo-tabbar {
+  min-height: 46px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0;
+  background: var(--color-surface-dim);
+}
+.repo-tab-wrap { min-height: 45px; border-right: 1px solid var(--color-border-subtle); border-radius: 0; }
+.repo-tab-wrap:first-child { border-left: 1px solid var(--color-border-subtle); }
+.repo-tab-wrap.active { background: var(--color-surface-solid); box-shadow: inset 0 -3px 0 var(--color-primary); }
+.repo-tab { min-height: 45px; padding-left: 14px; font-size: 12.5px; }
+.repo-tab-add { min-height: 45px; }
+
+.repo-toolbar {
+  height: var(--app-toolbar-height);
+  padding: 7px 18px 8px;
+  border: 0;
+  border-bottom: 1px solid var(--color-border);
+  border-radius: 0;
+  background: var(--color-surface-solid);
+}
+.repo-toolbar-sync { grid-template-rows: 10px 36px; }
+.repo-toolbar-group-label { padding-left: 1px; font-size: 8.5px; letter-spacing: .13em; }
+.repo-action-group { height: 36px; border-color: var(--color-border); background: transparent; }
+.repo-action { height: 34px; min-height: 34px; padding-inline: 15px; font-weight: 650; }
+.repo-action.sync-primary { color: var(--color-primary); }
+.repo-toolbar-divider { height: 34px; margin-inline: 6px; }
+
+.workspace {
+  grid-template-columns: minmax(220px, var(--left-sidebar-width, 280px)) 7px minmax(360px, 1fr) 7px minmax(560px, var(--history-aside-width, 620px));
+  flex: 1 1 0;
+  padding: 0;
+  background: var(--color-border-subtle);
+  row-gap: 0;
+}
+.left-sidebar { background: var(--color-surface-solid); }
+.main-panel { border: 0; border-radius: 0; background: var(--color-surface-solid); }
+.history-aside { background: var(--color-border-subtle); row-gap: 0; }
+
+.panel {
+  border: 0;
+  border-radius: 0;
+  background: var(--color-surface-solid);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+.left-sidebar .panel + .panel { border-top: 1px solid var(--color-border); }
+.section-head {
+  min-height: 50px;
+  padding: 8px 12px;
+  border-bottom-color: var(--color-border-subtle);
+  background: var(--color-surface-solid);
+}
+.section-head h2 { font-size: 14px; font-weight: 750; }
+.eyebrow { font-size: 9px; font-weight: 750; letter-spacing: .11em; }
+.pill { min-height: 19px; padding-inline: 6px; border-radius: 5px; }
+.pill-count { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
+
+.repo-summary { height: 48px; padding-inline: 16px; background: var(--color-surface-dim); }
+.repo-branch { font-size: 14px; }
+.repo-path { opacity: .82; }
+.sync-stats strong, .sync-stats span { border-radius: 5px; background: transparent !important; }
+.top-section { grid-template-rows: minmax(160px, 1fr) 7px var(--commit-panel-height, 220px); padding: 0; }
+
+.left-sidebar-resize-handle,
+.history-resize-handle,
+.file-history-resize-handle,
+.panel-resize-handle,
+.left-panel-resize-handle { background: var(--color-border-subtle); }
+.left-sidebar-resize-handle::before,
+.history-resize-handle::before,
+.file-history-resize-handle::before { width: 1px; height: 48px; background: var(--color-border); }
+.panel-resize-handle::before { width: 44px; height: 2px; }
+
+.status-toolbar {
+  min-height: 40px;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: var(--color-surface-dim);
+}
+.status-toolbar .danger { margin-left: auto; }
+.status-lanes { display: grid; align-content: start; min-height: 0; }
+.status-lane + .status-lane { border-top: 1px solid var(--color-border); }
+.status-lane-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 42px;
+  padding: 5px 12px;
+  background: var(--color-surface-dim);
+}
+.status-lane-head > div { display: flex; align-items: center; gap: 7px; }
+.status-lane-head strong { color: var(--color-ink); font-size: 12px; }
+.status-lane-head span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 5px; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); font-size: 10.5px; font-weight: 750; }
+.status-file-list { padding: 5px 0; }
+.status-file-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  min-height: 42px;
+  padding: 3px 8px 3px 12px;
+  border-left: 3px solid transparent;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+.status-file-row:last-child { border-bottom: 0; }
+.status-file-row:hover { background: var(--color-surface-hover); }
+.status-file-row.selected { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-solid)); }
+.status-file-row.active { border-left-color: var(--color-primary); }
+.status-file-main { display: grid; justify-content: start; gap: 1px; min-width: 0; padding: 3px 8px; border: 0; background: transparent; text-align: left; }
+.status-file-main:hover:not(:disabled) { background: transparent; }
+.status-file-main strong, .status-file-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.status-file-main strong { color: var(--color-ink); font: 650 12px/1.3 var(--font-mono); }
+.status-file-main span { color: var(--color-ink-faint); font: 10px/1.2 var(--font-mono); }
+.status-file-actions { display: flex; margin-left: 5px; opacity: 0; transition: opacity 120ms ease; }
+.status-file-row:hover .status-file-actions, .status-file-row:focus-within .status-file-actions { opacity: 1; }
+.status-file-actions button { width: 28px; min-width: 28px; min-height: 28px; padding: 0; border-color: transparent; background: transparent; }
+.status-file-actions .danger:hover:not(:disabled) { color: #e86060; background: rgba(232,96,96,.1); }
+.status-lane-empty { margin: 0; padding: 14px 16px; color: var(--color-ink-faint); font-size: 11.5px; }
+.status-badge { min-width: 58px; padding-inline: 5px; border: 0; border-radius: 4px; font-size: 9px; letter-spacing: .04em; }
+
+.commit-panel { border-top: 1px solid var(--color-border); }
+.commit-head-actions { display: flex; align-items: center; gap: 5px; }
+.commit-generate-button { color: var(--color-primary); background: transparent; }
+.commit-settings-button { width: 30px; min-width: 30px; padding: 0; background: transparent; }
+.commit-form { padding: 10px 12px 12px; }
+.commit-form textarea { min-height: 72px; resize: none; }
+.commit-amend-row { min-height: 34px; }
+.commit-actions-row .btn-primary { min-height: 38px; border-radius: var(--ui-radius-sm); background: var(--color-primary); box-shadow: none; }
+.commit-actions-row .btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
+
+.branch-list, .explorer-list, .stash-list { padding: 5px !important; }
+.branch-row, .explorer-row, .stash-row { border-radius: var(--ui-radius-sm); }
+.branch-row.current, .explorer-row.active { background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface-solid)); box-shadow: inset 3px 0 0 var(--color-primary); }
+.branch-group-toggle { background: transparent; }
+.explorer-row .status-badge { min-width: 18px; overflow: hidden; color: #d9891b; background: transparent; text-indent: -999px; }
+.explorer-row .status-badge::after { content: "M"; float: right; text-indent: 0; }
+
+.history-panel, .file-history-panel { min-height: 0; }
+.graph-list { background: var(--color-surface-solid); }
+.graph-gutter { background: var(--color-surface-dim); }
+.commit-body { border-radius: var(--ui-radius-sm); background: transparent; box-shadow: none; }
+.graph-row + .graph-row .commit-body { border-top: 1px solid var(--color-border-subtle); }
+.graph-row:hover .commit-body { background: var(--color-surface-hover); }
+.graph-row.tip-row .commit-body { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface-solid)); }
+.commit-avatar { border-radius: 50%; }
+.commit-kind, .commit-branch-chip, .ref-chip { border-radius: 4px !important; }
+.file-history-row { margin: 0; border: 0; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0; background: transparent; }
+
+.workspace-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 30px;
+  padding: 0 14px;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-ink-faint);
+  background: var(--color-surface-solid);
+  font-size: 10.5px;
+}
+.workspace-statusbar > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
+.workspace-status-spacer { flex: 1 1 auto; }
+.workspace-health > span { width: 8px; height: 8px; border-radius: 50%; background: #d9891b; }
+.workspace-health.clean > span { background: #2da44e; }
+.workspace-statusbar .ahead { color: #d9891b; }
+.workspace-statusbar .behind { color: var(--color-primary); }
+.workspace-auto i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink-faint); }
+.workspace-auto.active i { background: #2da44e; }
+.app-version {
+  padding-left: 12px;
+  border-left: 1px solid var(--color-border-subtle);
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
+  font-size: 9.5px;
+}
+
+.repo-management { margin: 14px; border-radius: var(--ui-radius); background: var(--color-surface-solid); box-shadow: var(--ui-shadow); }
+.repo-management-head, .repo-management-tools { background: var(--color-surface-solid); }
+.repo-section { border-radius: var(--ui-radius-sm); background: var(--color-surface-solid); }
+.repo-section > header { background: var(--color-surface-dim); }
+.repo-row-main:hover:not(:disabled) { background: var(--color-surface-hover); }
+
+@media (max-width: 1180px) {
+  .repo-action { padding-inline: 10px; }
+  .repo-toolbar-divider { margin-inline: 2px; }
+  .repo-action-label { display: none; }
+  .repo-action.sync-primary .repo-action-label { display: inline; }
+}
+
+@media (max-width: 900px) {
+  .shell-body { overflow: auto; }
+  .workspace { grid-template-columns: minmax(190px, 230px) 7px minmax(420px, 1fr); min-height: 760px; }
+  .history-resize-handle, .history-aside { display: none; }
+  .workspace-statusbar { position: sticky; bottom: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
 }
 
 :root[data-theme="light"] .repo-tab-wrap {
-  background: rgba(244,247,252,0.72);
+  background: rgba(255,255,255,0.5);
 }
 
 :root[data-theme="light"] .repo-tab-wrap.active {
-  background: rgba(49,95,214,0.1);
+  background: #ffffff;
+}
+
+:root[data-theme="light"] .repo-tab-wrap:hover,
+:root[data-theme="light"] .repo-tab.management:hover:not(:disabled) {
+  background: rgba(255,255,255,0.9);
+}
+
+:root[data-theme="light"] .repo-tab.management.active {
+  background: #ffffff;
 }
 
 :root[data-theme="light"] .repo-row {
@@ -5419,9 +5725,10 @@
   }
   .top-section    { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 14px var(--commit-panel-height, 190px); }
   .repo-form      { grid-template-columns: 1fr; }
-  .repo-tabbar    { grid-template-columns: minmax(0, 1fr) auto; }
-  .repo-tab.management { min-width: 0; }
-  .repo-tabs-scroll { grid-column: 1 / -1; order: 2; border-top: 1px solid var(--color-border-subtle); }
+  .repo-tabbar { grid-template-columns: auto minmax(0, 1fr) auto; }
+  .repo-tab.management { min-width: 44px; width: 44px; padding: 0; justify-content: center; }
+  .repo-tab.management span { display: none; }
+  .repo-tabs-scroll { grid-column: auto; order: initial; border-top: 0; }
   .repo-management-head,
   .repo-management-tools { align-items: stretch; flex-direction: column; }
   .repo-management-actions { justify-content: flex-start; }
@@ -5457,3 +5764,307 @@
   .repo-toolbar-divider { margin-inline: 0; }
   .repo-auto-toggle { padding-left: 7px; gap: 6px; }
 }
+
+/* Keep the refreshed workspace rules authoritative after legacy theme/media
+   compatibility declarations above. */
+.commit-actions-row .btn-primary,
+:root[data-theme="light"] .commit-actions-row .btn-primary {
+  border-color: var(--color-primary);
+  color: #fff;
+  background: var(--color-primary);
+  box-shadow: none;
+}
+.commit-actions-row .btn-primary:hover:not(:disabled),
+:root[data-theme="light"] .commit-actions-row .btn-primary:hover:not(:disabled) {
+  border-color: var(--color-primary-dark);
+  color: #fff;
+  background: var(--color-primary-dark);
+}
+:root[data-theme="light"] .panel,
+:root[data-theme="light"] .main-panel,
+:root[data-theme="light"] .graph-list,
+:root[data-theme="light"] .commit-body { box-shadow: none; }
+
+@media (max-width: 1100px) {
+  .shell-body { overflow: auto; }
+  .workspace {
+    grid-template-columns: minmax(200px, 250px) 7px minmax(480px, 1fr);
+    min-width: 760px;
+    min-height: 680px;
+  }
+  .history-resize-handle,
+  .history-aside { display: none; }
+  .workspace-statusbar { position: sticky; bottom: 0; z-index: 20; }
+}
+
+/* Repository workflow order: inspect first, then remote synchronization. */
+.repo-toolbar > .repo-inspect-actions { order: 1; }
+.repo-toolbar > .repo-toolbar-divider:not(.utility) { order: 2; }
+.repo-toolbar > .repo-toolbar-sync {
+  order: 3;
+  display: block;
+  align-self: auto;
+  margin-bottom: 1px;
+}
+.repo-toolbar > .repo-toolbar-spacer { order: 4; }
+.repo-toolbar > .repo-toolbar-divider.utility { order: 5; }
+.repo-toolbar > .repo-utility-actions { order: 6; }
+
+/* Center every toolbar group with the same breathing room above and below. */
+.repo-toolbar {
+  align-items: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.repo-toolbar > .repo-toolbar-sync,
+.repo-toolbar > .repo-inspect-actions,
+.repo-toolbar > .repo-utility-actions { margin-bottom: 0; }
+.repo-toolbar > .repo-toolbar-divider { margin-top: 0; margin-bottom: 0; }
+
+/* Compact change map for long compare and line-patch views. */
+.split-diff-shell,
+.line-patch-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 16px;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.split-diff-shell .split-diff { min-height: 0; }
+.line-patch-workspace .line-patch-scroll { min-height: 0; }
+.diff-overview {
+  position: relative;
+  min-width: 16px;
+  min-height: 0;
+  overflow: hidden;
+  border-left: 1px solid var(--color-border-subtle);
+  background: var(--code-surface-subtle);
+}
+.diff-overview::before {
+  content: "";
+  position: absolute;
+  inset: 5px 6px;
+  border-radius: 999px;
+  background: var(--color-border-subtle);
+}
+.diff-overview-marker {
+  position: absolute;
+  z-index: 1;
+  top: var(--marker-position);
+  left: 2px;
+  width: 11px;
+  min-width: 11px;
+  height: 5px;
+  min-height: 5px;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  transform: translateY(-50%);
+  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
+  appearance: none;
+}
+.diff-overview-marker.add { color: var(--code-add-strong); background: var(--code-add-strong); }
+.diff-overview-marker.delete { color: var(--code-delete-strong); background: var(--code-delete-strong); }
+.diff-overview-marker.mixed {
+  color: var(--color-accent);
+  background: linear-gradient(90deg, var(--code-delete-strong) 0 48%, var(--code-add-strong) 52% 100%);
+}
+.diff-overview-marker:hover:not(:disabled),
+.diff-overview-marker:focus-visible {
+  filter: brightness(1.18);
+  outline: 0;
+  box-shadow: 0 0 0 1px currentColor, 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
+}
+
+/* Preserve semantic diff colors against global button hover rules. */
+.diff-overview .diff-overview-marker.add:hover:not(:disabled),
+.diff-overview .diff-overview-marker.add:focus-visible {
+  border: 0 !important;
+  color: var(--code-add-strong) !important;
+  background-color: var(--code-add-strong) !important;
+  background-image: none !important;
+}
+.diff-overview .diff-overview-marker.delete:hover:not(:disabled),
+.diff-overview .diff-overview-marker.delete:focus-visible {
+  border: 0 !important;
+  color: var(--code-delete-strong) !important;
+  background-color: var(--code-delete-strong) !important;
+  background-image: none !important;
+}
+.diff-overview .diff-overview-marker.mixed:hover:not(:disabled),
+.diff-overview .diff-overview-marker.mixed:focus-visible {
+  border: 0 !important;
+  color: var(--color-accent) !important;
+  background-color: transparent !important;
+  background-image: linear-gradient(90deg, var(--code-delete-strong) 0 48%, var(--code-add-strong) 52% 100%) !important;
+}
+.line-patch-hunk-button.stage:hover:not(:disabled),
+.line-patch-hunk-button.unstage:hover:not(:disabled) {
+  border-color: var(--code-add-strong);
+  color: var(--code-add-strong);
+  background: var(--code-add-bg);
+}
+.line-patch-hunk-button.discard:hover:not(:disabled) {
+  border-color: var(--code-delete-strong);
+  color: var(--code-delete-strong);
+  background: var(--code-delete-bg);
+}
+
+/* Footer status must stay readable on the bright theme. */
+:root[data-theme="light"] .workspace-statusbar { color: #526078; }
+:root[data-theme="light"] .workspace-branch {
+  color: #172033;
+  font-weight: 750;
+}
+:root[data-theme="light"] .workspace-branch svg { color: #0b63e6; }
+:root[data-theme="light"] .workspace-statusbar .ahead {
+  color: #9a5200;
+  font-weight: 800;
+}
+:root[data-theme="light"] .workspace-statusbar .behind {
+  color: #0755c8;
+  font-weight: 800;
+}
+
+/* AI pre-commit review --------------------------------------------------- */
+.commit-review-button {
+  border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+}
+.commit-review-button:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
+  color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+}
+.ai-review-dialog {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  width: min(920px, calc(100vw - 40px));
+  height: min(780px, calc(100vh - 40px));
+  overflow: hidden;
+}
+.ai-review-header h2 { margin: 2px 0 0; color: var(--color-ink); font-size: 16px; }
+.ai-review-provider {
+  padding: 3px 7px;
+  border-radius: 5px;
+  color: var(--color-ink-dim);
+  background: var(--color-surface-hover);
+  font-size: 10.5px;
+  font-weight: 750;
+}
+.ai-review-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: var(--color-surface-dim);
+}
+.ai-review-summary-icon {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 9px;
+  color: #d9891b;
+  background: color-mix(in srgb, #d9891b 12%, transparent);
+}
+.ai-review-summary-icon.clean { color: #2da44e; background: color-mix(in srgb, #2da44e 12%, transparent); }
+.ai-review-summary-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ai-review-summary-line > strong { color: var(--color-ink); font-size: 14px; }
+.ai-review-summary p { margin: 5px 0 0; color: var(--color-ink-muted); font-size: 12.5px; line-height: 1.45; }
+.ai-review-risk {
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 9px;
+  font-weight: 850;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.ai-review-risk.low { color: #2da44e; background: color-mix(in srgb, #2da44e 12%, transparent); }
+.ai-review-risk.medium { color: #b96500; background: color-mix(in srgb, #d9891b 13%, transparent); }
+.ai-review-risk.high { color: #d1242f; background: color-mix(in srgb, #d1242f 12%, transparent); }
+.ai-review-findings { min-height: 0; padding: 10px; overflow: auto; background: var(--app-dialog-bg); }
+.ai-review-finding {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--color-border-subtle);
+  border-left: 3px solid var(--color-border);
+  border-radius: 7px;
+  background: var(--color-surface-solid);
+}
+.ai-review-finding + .ai-review-finding { margin-top: 8px; }
+.ai-review-finding.critical { border-left-color: #d1242f; }
+.ai-review-finding.warning { border-left-color: #d9891b; }
+.ai-review-finding.info { border-left-color: var(--color-primary); }
+.ai-review-finding-icon { display: grid; place-items: start center; padding-top: 1px; color: var(--color-primary); }
+.ai-review-finding.critical .ai-review-finding-icon { color: #d1242f; }
+.ai-review-finding.warning .ai-review-finding-icon { color: #d9891b; }
+.ai-review-finding-title { display: flex; align-items: center; gap: 7px; }
+.ai-review-finding-title span { color: var(--color-ink-faint); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
+.ai-review-finding-title strong { color: var(--color-ink); font-size: 12.5px; }
+.ai-review-finding-body > p { margin: 6px 0 8px; color: var(--color-ink-muted); font-size: 12px; line-height: 1.5; }
+.ai-review-location { display: flex; align-items: center; gap: 5px; color: var(--color-primary); }
+.ai-review-location code { overflow-wrap: anywhere; font: 10.5px/1.4 var(--font-mono); }
+.ai-review-suggestion { display: grid; gap: 3px; margin-top: 9px; padding: 8px 9px; border-radius: 5px; background: var(--color-surface-dim); }
+.ai-review-suggestion strong { color: var(--color-ink-dim); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
+.ai-review-suggestion span { color: var(--color-ink-muted); font-size: 11.5px; line-height: 1.45; }
+.ai-review-clean-state { display: grid; place-items: center; align-content: center; min-height: 280px; gap: 8px; color: #2da44e; text-align: center; }
+.ai-review-clean-state strong { color: var(--color-ink); font-size: 14px; }
+.ai-review-clean-state span { color: var(--color-ink-faint); font-size: 12px; }
+.ai-review-footer p { margin: 0; color: var(--color-ink-faint); font-size: 10.5px; }
+.ai-review-footer > div { display: flex; gap: 7px; }
+
+@media (max-width: 720px) {
+  .commit-head-actions .pill-count { display: none; }
+  .commit-review-button,
+  .commit-generate-button { padding-inline: 8px; }
+  .ai-review-dialog { width: calc(100vw - 16px); height: calc(100vh - 16px); }
+  .ai-review-footer { align-items: stretch; flex-direction: column; }
+  .ai-review-footer > div { justify-content: flex-end; }
+}
+
+/* Contextual status actions: global discard in the panel header, selection
+   actions beside their matching Stage/Unstage command. */
+.status-head-actions,
+.status-lane-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 5px;
+  min-width: 0;
+}
+.status-head-actions { flex-wrap: wrap; }
+.status-discard-all {
+  margin-left: 3px;
+  border-color: color-mix(in srgb, var(--code-delete-strong) 30%, var(--color-border));
+  color: var(--code-delete-strong);
+  background: color-mix(in srgb, var(--code-delete-strong) 8%, transparent);
+}
+.status-discard-all:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--code-delete-strong) 52%, var(--color-border));
+  color: var(--code-delete-strong);
+  background: color-mix(in srgb, var(--code-delete-strong) 14%, transparent);
+}
+.status-lane-title { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
+.status-lane-actions { flex-wrap: wrap; }
+.status-lane-actions .status-selection-count {
+  display: inline-flex;
+  width: auto;
+  min-width: 0;
+  height: 22px;
+  padding: 0 5px;
+  color: var(--color-ink-dim);
+  background: transparent;
+  font-size: 9.5px;
+}
+
+@media (max-width: 760px) {
+  .status-lane-head { align-items: flex-start; flex-direction: column; }
+  .status-lane-actions { width: 100%; justify-content: flex-start; }
+}

src/lib/RepoTabs.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { BookOpen, Database, Plus, X } from "@lucide/svelte";
+
+  interface RepositoryTabItem {
+    path: string;
+    name: string;
+    branch: string | null;
+  }
+
+  export let activeView: "management" | "repository" = "management";
+  export let repoTabs: RepositoryTabItem[] = [];
+  export let isBusy: boolean = false;
+  export let language: "en" | "de" = "en";
+  export let onOpenManagement: () => void = () => {};
+  export let isActive: (path: string) => boolean = () => false;
+  export let onSelect: (path: string) => void | Promise<void> = () => {};
+  export let onClose: (path: string, event: MouseEvent) => void | Promise<void> = () => {};
+  export let onContextMenu: (path: string, event: MouseEvent) => void = () => {};
+  export let onAdd: () => void | Promise<void> = () => {};
+</script>
+
+<header class="repo-tabbar" aria-label={language === "de" ? "Repository-Reiter" : "Repository tabs"}>
+  <button
+    class="repo-tab management"
+    class:active={activeView === "management"}
+    type="button"
+    onclick={onOpenManagement}
+    disabled={isBusy}
+    title={language === "de" ? "Repository-Verwaltung" : "Repository Management"}
+  >
+    <BookOpen size={14} aria-hidden="true" />
+    <span>{language === "de" ? "Repository-Verwaltung" : "Repository Management"}</span>
+  </button>
+
+  <div class="repo-tabs-scroll">
+    {#each repoTabs as repo (repo.path)}
+      <div
+        class="repo-tab-wrap"
+        class:active={isActive(repo.path)}
+        role="presentation"
+        oncontextmenu={(event) => onContextMenu(repo.path, event)}
+      >
+        <button
+          class="repo-tab"
+          type="button"
+          onclick={() => onSelect(repo.path)}
+          disabled={isBusy}
+          title={repo.path}
+        >
+          <Database size={15} aria-hidden="true" />
+          <span>{repo.name}</span>
+        </button>
+        <button
+          class="repo-tab-close"
+          type="button"
+          onclick={(event) => onClose(repo.path, event)}
+          disabled={isBusy}
+          aria-label={language === "de" ? `${repo.name} schließen` : `Close ${repo.name}`}
+          title={language === "de" ? "Repository-Tab schließen" : "Close repository tab"}
+        >
+          <X size={13} aria-hidden="true" />
+        </button>
+      </div>
+    {/each}
+  </div>
+
+  <button
+    class="repo-tab-add"
+    type="button"
+    onclick={onAdd}
+    disabled={isBusy}
+    title={language === "de" ? "Repository-Ordner öffnen" : "Open repository folder"}
+    aria-label={language === "de" ? "Repository-Ordner öffnen" : "Open repository folder"}
+  >
+    <Plus size={15} aria-hidden="true" />
+  </button>
+</header>

src/lib/RepoToolbar.svelte

@@ -18,8 +18,6 @@
   export let operation: string = "";
   export let ahead: number = 0;
   export let behind: number = 0;
-  export let autoRefreshEnabled: boolean = true;
-  export let autoRefreshInFlight: boolean = false;
   export let language: "en" | "de" = "en";
   export let onFetch: () => void = () => {};
   export let onPull: () => void = () => {};
@@ -30,7 +28,6 @@
   export let onInteractiveRebase: () => void = () => {};
   export let onReflog: () => void = () => {};
   export let onOpenInExplorer: () => void = () => {};
-  export let onToggleAutoRefresh: () => void = () => {};
 
   let historyOpen = false;
   let toolbarElement: HTMLDivElement;
@@ -60,7 +57,6 @@
 
 <div bind:this={toolbarElement} class="repo-toolbar" role="toolbar" aria-label={isGerman ? "Repository-Aktionen" : "Repository actions"}>
   <div class="repo-toolbar-sync">
-    <span class="repo-toolbar-group-label">Sync</span>
     <div class="repo-action-group repo-sync-actions">
       <button
         class="repo-action fetch"
@@ -193,26 +189,14 @@
     </button>
 
     <button
-      class="repo-action icon-action"
+      class="repo-action"
       onclick={onRefresh}
       disabled={isBusy || !hasRepository}
       title={isGerman ? "Manuell aktualisieren" : "Refresh now"}
       aria-label={isGerman ? "Manuell aktualisieren" : "Refresh now"}
     >
-      <RefreshCw class={operation === "Refreshing" ? "spin" : ""} size={15} aria-hidden="true" />
-    </button>
-
-    <button
-      class="repo-auto-toggle"
-      class:active={autoRefreshEnabled}
-      onclick={onToggleAutoRefresh}
-      aria-pressed={autoRefreshEnabled}
-      title={autoRefreshEnabled
-        ? (isGerman ? "Auto-Aktualisierung ausschalten" : "Turn auto-refresh off")
-        : (isGerman ? "Auto-Aktualisierung einschalten" : "Turn auto-refresh on")}
-    >
-      <span>{isGerman ? "Auto" : "Auto"}</span>
-      <span class="repo-switch" class:busy={autoRefreshInFlight} aria-hidden="true"><span></span></span>
+      <RefreshCw class={operation === "Refreshing" ? "spin" : ""} size={16} aria-hidden="true" />
+      <span class="repo-action-label utility-label">{isGerman ? "Aktualisieren" : "Refresh"}</span>
     </button>
   </div>
 </div>

src/lib/TitleBar.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
-  import { getVersion } from "@tauri-apps/api/app";
   import { getCurrentWindow } from "@tauri-apps/api/window";
-  import { CircleHelp, GitBranch, Minus, Settings, X } from "@lucide/svelte";
+  import { CircleHelp, Minus, Settings, X } from "@lucide/svelte";
   import iconUrl from "../../src-tauri/icons/icon.png";
 
-  export let branch: string = "";
-  export let ahead: number = 0;
-  export let behind: number = 0;
-  export let repoName: string = "";
-  export let hasRepository: boolean = false;
   export let onOpenHelp: () => void = () => {};
   export let onOpenSettings: () => void = () => {};
   export let language: "en" | "de" = "en";
@@ -17,7 +11,6 @@
   let win: ReturnType<typeof getCurrentWindow> | null = null;
   let isMaximized = false;
   let unlisten: (() => void) | undefined;
-  let appVersion = "";
 
   onMount(async () => {
     try {
@@ -29,12 +22,6 @@
     } catch {
       win = null;
     }
-
-    try {
-      appVersion = await getVersion();
-    } catch {
-      appVersion = "";
-    }
   });
 
   onDestroy(() => {
@@ -61,36 +48,9 @@
       <img src={iconUrl} alt="" data-tauri-drag-region />
     </span>
     <span data-tauri-drag-region>Gitty</span>
-    {#if appVersion}
-      <span class="tb-version" data-tauri-drag-region title="Version {appVersion}">v{appVersion}</span>
-    {/if}
   </div>
 
-  <!-- Center: repo + branch info -->
-  <div class="titlebar-info" data-tauri-drag-region>
-    {#if hasRepository}
-      <div class="titlebar-context" data-tauri-drag-region>
-        {#if repoName}
-          <span class="tb-repo" data-tauri-drag-region>{repoName}</span>
-          <span class="tb-sep" data-tauri-drag-region aria-hidden="true">/</span>
-        {/if}
-        <GitBranch size={12} aria-hidden="true" />
-        <span class="tb-branch" data-tauri-drag-region title={branch}>{branch}</span>
-      </div>
-      {#if ahead > 0 || behind > 0}
-        <div class="tb-sync-group" aria-label="Branch synchronization status">
-          {#if ahead > 0}
-            <span class="tb-sync ahead" title="{ahead} commits ahead">↑{ahead}</span>
-          {/if}
-          {#if behind > 0}
-            <span class="tb-sync behind" title="{behind} commits behind">↓{behind}</span>
-          {/if}
-        </div>
-      {/if}
-    {:else}
-      <span class="tb-no-repo" data-tauri-drag-region>No repository open</span>
-    {/if}
-  </div>
+  <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true"></div>
 
   <!-- Right: app-global actions + window controls -->
   <div class="titlebar-globals">

src/lib/components/AiReviewDialog.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { AlertTriangle, CircleAlert, FileCode, Info, LoaderCircle, RotateCw, ShieldCheck, X } from "@lucide/svelte";
+  import type { AiReviewFinding, AiReviewResult, CommitAiProvider } from "../types";
+
+  interface Props {
+    result: AiReviewResult;
+    provider: CommitAiProvider;
+    isReviewing: boolean;
+    onRerun: () => void;
+    onClose: () => void;
+  }
+
+  let { result, provider, isReviewing = false, onRerun, onClose }: Props = $props();
+
+  function providerLabel(value: CommitAiProvider): string {
+    if (value === "openai") return "OpenAI";
+    if (value === "anthropic") return "Anthropic";
+    if (value === "custom") return "Custom endpoint";
+    return "Local AI";
+  }
+
+  function locationLabel(finding: AiReviewFinding): string {
+    if (!finding.file) return "Repository-wide";
+    return finding.line ? `${finding.file}:${finding.line}` : finding.file;
+  }
+</script>
+
+<svelte:window onkeydown={(event) => { if (event.key === "Escape" && !isReviewing) onClose(); }} />
+
+<div class="dialog-backdrop" role="presentation">
+  <div class="dialog ai-review-dialog" role="dialog" aria-modal="true" aria-label="AI pre-commit review" tabindex="-1">
+    <header class="dialog-header ai-review-header">
+      <div>
+        <span class="eyebrow">Staged changes</span>
+        <h2>AI pre-commit review</h2>
+      </div>
+      <div class="dialog-header-actions">
+        <span class="ai-review-provider">{providerLabel(provider)}</span>
+        <button class="dialog-close" type="button" onclick={onClose} disabled={isReviewing} aria-label="Close review"><X size={18} aria-hidden="true" /></button>
+      </div>
+    </header>
+
+    <div class="ai-review-summary">
+      <div class="ai-review-summary-icon" class:clean={result.findings.length === 0}>
+        {#if result.findings.length === 0}<ShieldCheck size={22} aria-hidden="true" />{:else}<AlertTriangle size={22} aria-hidden="true" />{/if}
+      </div>
+      <div>
+        <div class="ai-review-summary-line">
+          <strong>{result.findings.length === 0 ? "No actionable issues found" : `${result.findings.length} review ${result.findings.length === 1 ? "finding" : "findings"}`}</strong>
+          <span class="ai-review-risk {result.risk}">{result.risk} risk</span>
+        </div>
+        <p>{result.summary}</p>
+      </div>
+    </div>
+
+    <div class="ai-review-findings">
+      {#if result.findings.length === 0}
+        <div class="ai-review-clean-state">
+          <ShieldCheck size={30} aria-hidden="true" />
+          <strong>The staged diff looks ready for human verification.</strong>
+          <span>AI reviews can miss issues. Run the relevant tests before committing.</span>
+        </div>
+      {:else}
+        {#each result.findings as finding, index (`${finding.file ?? "repo"}:${finding.line ?? 0}:${finding.title}:${index}`)}
+          <article class="ai-review-finding {finding.severity}">
+            <div class="ai-review-finding-icon">
+              {#if finding.severity === "critical"}<CircleAlert size={17} aria-hidden="true" />{:else if finding.severity === "warning"}<AlertTriangle size={17} aria-hidden="true" />{:else}<Info size={17} aria-hidden="true" />{/if}
+            </div>
+            <div class="ai-review-finding-body">
+              <div class="ai-review-finding-title">
+                <span>{finding.severity}</span>
+                <strong>{finding.title}</strong>
+              </div>
+              <p>{finding.description}</p>
+              <div class="ai-review-location"><FileCode size={13} aria-hidden="true" /><code>{locationLabel(finding)}</code></div>
+              {#if finding.suggestion}<div class="ai-review-suggestion"><strong>Suggested next step</strong><span>{finding.suggestion}</span></div>{/if}
+            </div>
+          </article>
+        {/each}
+      {/if}
+    </div>
+
+    <footer class="dialog-footer ai-review-footer">
+      <p>Review suggestions are advisory and never modify files automatically.</p>
+      <div>
+        <button class="btn-secondary" type="button" onclick={onRerun} disabled={isReviewing}>
+          {#if isReviewing}<LoaderCircle class="spin" size={14} aria-hidden="true" />{:else}<RotateCw size={14} aria-hidden="true" />{/if}
+          Review again
+        </button>
+        <button class="btn-primary" type="button" onclick={onClose} disabled={isReviewing}>Done</button>
+      </div>
+    </footer>
+  </div>
+</div>

src/lib/components/AppSettingsDialog.svelte

@@ -1,26 +1,29 @@
 <script lang="ts">
-  import { Check, Languages, Settings, X } from "@lucide/svelte";
+  import { Check, Languages, RefreshCw, Settings, X } from "@lucide/svelte";
   import type { AnalyticsSettings, AppLanguage, AppTheme } from "../types";
 
   interface Props {
     analytics: AnalyticsSettings;
     theme: AppTheme;
     language: AppLanguage;
-    onSave: (settings: AnalyticsSettings, theme: AppTheme, language: AppLanguage) => void;
+    autoRefresh: boolean;
+    onSave: (settings: AnalyticsSettings, theme: AppTheme, language: AppLanguage, autoRefresh: boolean) => void;
     onClose: () => void;
   }
 
-  let { analytics, theme = "system", language = "en", onSave = () => {}, onClose = () => {} }: Props = $props();
+  let { analytics, theme = "system", language = "en", autoRefresh = true, onSave = () => {}, onClose = () => {} }: Props = $props();
 
   let analyticsEnabled = $state(true);
   let selectedTheme = $state<AppTheme>("system");
   let selectedLanguage = $state<AppLanguage>("en");
+  let autoRefreshEnabled = $state(true);
   const isGerman = $derived(selectedLanguage === "de");
 
   $effect(() => {
     analyticsEnabled = analytics.enabled;
     selectedTheme = theme;
     selectedLanguage = language;
+    autoRefreshEnabled = autoRefresh;
   });
 
   function save() {
@@ -28,7 +31,7 @@
       ...analytics,
       enabled: analyticsEnabled,
       noticeSeen: true,
-    }, selectedTheme, selectedLanguage);
+    }, selectedTheme, selectedLanguage, autoRefreshEnabled);
   }
 </script>
 
@@ -70,6 +73,24 @@
         </div>
       </section>
 
+      <section class="settings-section">
+        <header>
+          <RefreshCw size={16} aria-hidden="true" />
+          <div>
+            <span class="eyebrow">Repository</span>
+            <h3>{isGerman ? "Automatische Aktualisierung" : "Auto refresh"}</h3>
+          </div>
+        </header>
+
+        <label class="settings-toggle-row">
+          <input type="checkbox" bind:checked={autoRefreshEnabled} />
+          <span>
+            <strong>{isGerman ? "Repositories automatisch aktualisieren" : "Refresh repositories automatically"}</strong>
+            <small>{isGerman ? "Aktualisiert Arbeitsbereich, Branch-Status und Remotes regelmäßig im Hintergrund." : "Periodically refreshes the working tree, branch status, and remotes in the background."}</small>
+          </span>
+        </label>
+      </section>
+
       <section class="settings-section">
         <header>
           <Languages size={16} aria-hidden="true" />

src/lib/components/CommitPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Check, LoaderCircle, RotateCcw, Settings, Sparkles } from "@lucide/svelte";
+  import { Check, LoaderCircle, RotateCcw, Settings, ShieldCheck, Sparkles } from "@lucide/svelte";
   import type { CommitAiPhase, CommitAiProvider } from "../types";
 
   interface Props {
@@ -13,11 +13,13 @@
     commitAiProvider: CommitAiProvider;
     commitAiPhase: CommitAiPhase;
     commitAiGenerating: boolean;
+    commitAiReviewing: boolean;
     canAmend: boolean;
     amendMode: boolean;
     onCommit: () => void;
     onCommitMessageChange: (msg: string) => void;
     onGenerateCommitMessage: () => void;
+    onReviewStaged: () => void;
     onOpenAiSettings: () => void;
     onToggleAmend: (checked: boolean) => void;
     onUndoLastCommit: () => void;
@@ -34,11 +36,13 @@
     commitAiProvider = "local",
     commitAiPhase = "idle",
     commitAiGenerating = false,
+    commitAiReviewing = false,
     canAmend = false,
     amendMode = false,
     onCommit = () => {},
     onCommitMessageChange = () => {},
     onGenerateCommitMessage = () => {},
+    onReviewStaged = () => {},
     onOpenAiSettings = () => {},
     onToggleAmend = () => {},
     onUndoLastCommit = () => {},
@@ -61,25 +65,52 @@
     hasRepository &&
     !isBusy &&
     !commitAiGenerating &&
+    !commitAiReviewing &&
     stagedCount > 0 &&
     (commitAiProvider !== "local" || commitAiPhase === "ready"),
   );
+  let canReview = $derived(canGenerate && commitAiProvider !== "local");
 </script>
 
 <section class="panel commit-panel" aria-label="Commit">
   <div class="section-head">
     <div>
-      <span class="eyebrow">Commit</span>
-      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Message</h2>
+      <span class="eyebrow">Create revision</span>
+      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Commit</h2>
+    </div>
+    <div class="commit-head-actions">
+      <span class="pill pill-count">{stagedCount} staged</span>
+      <button
+        class="commit-review-button"
+        type="button"
+        onclick={onReviewStaged}
+        disabled={!canReview}
+        title={commitAiProvider === "local" ? "Pre-commit review currently requires an API provider" : stagedCount === 0 ? "Stage changes first" : "Review staged changes for bugs and risks"}
+      >
+        {#if commitAiReviewing}<LoaderCircle class="spin" size={14} aria-hidden="true" />{:else}<ShieldCheck size={14} aria-hidden="true" />{/if}
+        Review
+      </button>
+      <button
+        class="commit-generate-button"
+        type="button"
+        onclick={onGenerateCommitMessage}
+        disabled={!canGenerate}
+        title={aiButtonTitle(commitAiProvider, commitAiPhase, stagedCount)}
+      >
+        {#if commitAiGenerating || localModelLoading}<LoaderCircle class="spin" size={14} aria-hidden="true" />{:else}<Sparkles size={14} aria-hidden="true" />{/if}
+        Generate
+      </button>
+      <button class="commit-settings-button" type="button" onclick={onOpenAiSettings} disabled={isBusy} title="AI settings" aria-label="AI settings">
+        <Settings size={14} aria-hidden="true" />
+      </button>
     </div>
-    <span class="pill pill-count">{stagedCount} staged</span>
   </div>
 
   <form class="commit-form" onsubmit={handleSubmit}>
     <textarea
       value={commitMessage}
       oninput={(e) => onCommitMessageChange((e.target as HTMLTextAreaElement).value)}
-      placeholder="Commit message..."
+      placeholder="Commit message"
       disabled={!hasRepository || isBusy}
     ></textarea>
     {#if commitBlockReason}
@@ -117,30 +148,6 @@
         {/if}
         {amendMode ? "Amend" : "Commit"}
       </button>
-      <button
-        class="btn-secondary commit-ai-button"
-        type="button"
-        onclick={onGenerateCommitMessage}
-        disabled={!canGenerate}
-        title={aiButtonTitle(commitAiProvider, commitAiPhase, stagedCount)}
-      >
-        {#if commitAiGenerating || localModelLoading}
-          <LoaderCircle class="spin" size={16} aria-hidden="true" />
-        {:else}
-          <Sparkles size={16} aria-hidden="true" />
-        {/if}
-        AI
-      </button>
-      <button
-        class="btn-secondary commit-ai-settings-button"
-        type="button"
-        onclick={onOpenAiSettings}
-        disabled={isBusy}
-        title="AI settings"
-        aria-label="AI settings"
-      >
-        <Settings size={16} aria-hidden="true" />
-      </button>
     </div>
   </form>
 </section>

src/lib/components/CompareDialog.svelte

@@ -10,6 +10,12 @@
         rightNum?: number; rightText?: string; rightKind: "add" | "context" | "empty";
       };
 
+  interface DiffMarker {
+    start: number;
+    end: number;
+    kind: "add" | "delete" | "mixed";
+  }
+
   interface Props {
     comparison: GitCommitComparison;
     selectedDiffPath: string;
@@ -173,10 +179,40 @@
     return rows;
   }
 
+  function buildDiffMarkers(rows: SplitRow[]): DiffMarker[] {
+    const markers: DiffMarker[] = [];
+    let current: DiffMarker | null = null;
+    for (let index = 0; index < rows.length; index++) {
+      const row = rows[index];
+      if (row.type !== "pair" || (row.leftKind === "context" && row.rightKind === "context")) {
+        current = null;
+        continue;
+      }
+      const kind = row.leftKind === "del" && row.rightKind === "add"
+        ? "mixed"
+        : row.rightKind === "add" ? "add" : "delete";
+      if (current && current.end === index - 1 && current.kind === kind) {
+        current.end = index;
+      } else {
+        current = { start: index, end: index, kind };
+        markers.push(current);
+      }
+    }
+    return markers;
+  }
+
+  function scrollToDiffMarker(rowIndex: number) {
+    const ratio = rowIndex / Math.max(splitRows.length - 1, 1);
+    for (const pane of [beforePane, afterPane]) {
+      if (pane) pane.scrollTop = ratio * Math.max(pane.scrollHeight - pane.clientHeight, 0);
+    }
+  }
+
   let diffByPath      = $derived(buildDiffByPath(comparison.patch));
   let selectedFile    = $derived(comparison.files.find((f) => f.path === selectedDiffPath) ?? null);
   let selectedPatch   = $derived(selectedFile ? (diffByPath.get(selectedFile.path) ?? "") : "");
   let splitRows       = $derived(buildSplitRows(selectedPatch));
+  let diffMarkers     = $derived(buildDiffMarkers(splitRows));
 </script>
 
 <div
@@ -262,6 +298,7 @@
             </div>
 
             <!-- Split diff grid -->
+            <div class="split-diff-shell">
             <div class="split-diff" role="table" aria-label="Side-by-side diff">
               <div
                 class="split-pane"
@@ -298,6 +335,19 @@
                 </div>
               </div>
             </div>
+            <nav class="diff-overview" aria-label="Change overview">
+              {#each diffMarkers as marker, index (`${marker.start}-${marker.end}-${marker.kind}`)}
+                <button
+                  class="diff-overview-marker {marker.kind}"
+                  type="button"
+                  style={`--marker-position: ${(marker.start / Math.max(splitRows.length - 1, 1)) * 100}%`}
+                  onclick={() => scrollToDiffMarker(marker.start)}
+                  title={`Jump to change ${index + 1} of ${diffMarkers.length}`}
+                  aria-label={`Jump to change ${index + 1} of ${diffMarkers.length}`}
+                ></button>
+              {/each}
+            </nav>
+            </div>
           {/if}
         </div>
 

src/lib/components/LinePatchDialog.svelte

@@ -47,6 +47,7 @@
   }: Props = $props();
 
   let parsed = $state<ParsedPatch>({ headerLines: [], hunks: [], binary: false });
+  let patchScroll = $state<HTMLDivElement | null>(null);
 
   let scopeLabel = $derived(staged ? "Staged changes" : "Unstaged changes");
   let displayPath = $derived(file.old_path ? `${file.old_path} -> ${file.path}` : file.path);
@@ -118,6 +119,23 @@
     if (isBusy || isLoading) return;
     await onApply(action, buildHunkPatch(hunk));
   }
+
+  function hunkPosition(index: number): number {
+    const totalLines = parsed.hunks.reduce((sum, hunk) => sum + Math.max(hunk.lines.length, 1), 0);
+    const precedingLines = parsed.hunks.slice(0, index).reduce((sum, hunk) => sum + Math.max(hunk.lines.length, 1), 0);
+    return (precedingLines / Math.max(totalLines - 1, 1)) * 100;
+  }
+
+  function hunkKind(hunk: PatchHunk): "add" | "delete" | "mixed" {
+    const hasAdd = hunk.lines.some((line) => line.kind === "add");
+    const hasDelete = hunk.lines.some((line) => line.kind === "delete");
+    return hasAdd && hasDelete ? "mixed" : hasAdd ? "add" : "delete";
+  }
+
+  function scrollToHunk(hunkId: string) {
+    const target = patchScroll?.querySelector<HTMLElement>(`[data-hunk-id="${hunkId}"]`);
+    if (patchScroll && target) patchScroll.scrollTop = Math.max(target.offsetTop - 8, 0);
+  }
 </script>
 
 <div class="dialog-backdrop" role="presentation">
@@ -148,9 +166,10 @@
       {:else if parsed.binary || parsed.hunks.length === 0}
         <div class="blank-state">This change cannot be split into text lines.</div>
       {:else}
-        <div class="line-patch-scroll">
+        <div class="line-patch-workspace">
+        <div class="line-patch-scroll" bind:this={patchScroll}>
           {#each parsed.hunks as hunk (hunk.id)}
-            <section class="line-patch-hunk">
+            <section class="line-patch-hunk" data-hunk-id={hunk.id}>
               <div class="line-patch-hunk-head">
                 <code>{hunk.header}</code>
                 <div class="line-patch-hunk-actions">
@@ -183,6 +202,19 @@
             </section>
           {/each}
         </div>
+        <nav class="diff-overview line-patch-overview" aria-label="Change overview">
+          {#each parsed.hunks as hunk, index (hunk.id)}
+            <button
+              class="diff-overview-marker {hunkKind(hunk)}"
+              type="button"
+              style={`--marker-position: ${hunkPosition(index)}%`}
+              onclick={() => scrollToHunk(hunk.id)}
+              title={`Jump to hunk ${index + 1} of ${parsed.hunks.length}`}
+              aria-label={`Jump to hunk ${index + 1} of ${parsed.hunks.length}`}
+            ></button>
+          {/each}
+        </nav>
+        </div>
       {/if}
     </div>
   </div>

src/lib/components/StatusPanel.svelte

@@ -144,7 +144,6 @@
 
   let hasUnstaged = $derived(changedFiles.some((f) => f.unstaged !== null));
   let hasStaged = $derived(changedFiles.some((f) => f.staged !== null));
-  let selectedCount = $derived(changedFiles.filter((f) => selectedStatusPaths.has(fileKey(f))).length);
   let selectedUnstagedCount = $derived(changedFiles.filter((f) => selectedStatusPaths.has(fileKey(f)) && f.unstaged !== null).length);
   let selectedStagedCount = $derived(changedFiles.filter((f) => selectedStatusPaths.has(fileKey(f)) && f.staged !== null).length);
 
@@ -156,85 +155,22 @@
   });
 </script>
 
-<section class="panel relative grid grid-rows-[auto_auto_1fr] overflow-hidden" aria-label="Working tree status">
+<section class="panel status-panel relative grid grid-rows-[auto_1fr] overflow-hidden" aria-label="Working tree status">
   <div class="section-head">
     <div>
-      <span class="eyebrow">Working tree</span>
-      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Status</h2>
+      <span class="eyebrow">Workspace</span>
+      <h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Changes</h2>
     </div>
-    <div class="flex items-center gap-1.5">
+    <div class="status-head-actions">
       <span class="pill pill-count">{stagedCount} staged</span>
       <span class="pill pill-count">{unstagedCount} unstaged</span>
-    </div>
-  </div>
-
-  {#if hasRepository && changedFiles.length > 0}
-    <div class="status-toolbar">
-      <button
-        class="btn-sm"
-        type="button"
-        onclick={onStageAll}
-        disabled={isBusy || !hasUnstaged}
-        title="Stage all unstaged files"
-      >
-        <Check size={14} aria-hidden="true" />
-        Stage all
-      </button>
-      <button
-        class="btn-sm"
-        type="button"
-        onclick={onUnstageAll}
-        disabled={isBusy || !hasStaged}
-        title="Unstage all staged files"
-      >
-        <Undo2 size={14} aria-hidden="true" />
-        Unstage all
-      </button>
-      <button
-        class="btn-sm danger"
-        type="button"
-        onclick={() => onDiscardMany(changedFiles)}
-        disabled={isBusy || changedFiles.length === 0}
-        title="Discard all changes"
-      >
-        <RotateCcw size={14} aria-hidden="true" />
-        Discard all
-      </button>
-      {#if selectedCount > 1}
-        <span class="status-selection-count">{selectedCount} selected</span>
-        <button
-          class="btn-sm"
-          type="button"
-          onclick={() => onStage(changedFiles.filter((file) => selectedStatusPaths.has(fileKey(file)) && file.unstaged !== null))}
-          disabled={isBusy || selectedUnstagedCount === 0}
-          title="Stage selected unstaged files"
-        >
-          <Check size={14} aria-hidden="true" />
-          Stage selected
-        </button>
-        <button
-          class="btn-sm"
-          type="button"
-          onclick={() => onUnstage(changedFiles.filter((file) => selectedStatusPaths.has(fileKey(file)) && file.staged !== null))}
-          disabled={isBusy || selectedStagedCount === 0}
-          title="Unstage selected staged files"
-        >
-          <Undo2 size={14} aria-hidden="true" />
-          Unstage selected
-        </button>
-        <button
-          class="btn-sm danger"
-          type="button"
-          onclick={() => onDiscardMany(selectedFiles())}
-          disabled={isBusy || selectedCount === 0}
-          title="Discard changes in selected files"
-        >
-          <RotateCcw size={14} aria-hidden="true" />
-          Discard selected
+      {#if hasRepository && changedFiles.length > 0}
+        <button class="btn-sm status-discard-all" type="button" onclick={() => onDiscardMany(changedFiles)} disabled={isBusy} title="Discard all staged and unstaged changes">
+          <RotateCcw size={13} aria-hidden="true" /> Discard all
         </button>
       {/if}
     </div>
-  {/if}
+  </div>
 
   {#if !hasRepository}
     <div class="blank-state">No repository loaded.</div>
@@ -243,79 +179,86 @@
   {:else if changedFiles.length === 0}
     <div class="blank-state">No file changes returned.</div>
   {:else}
-    <div class="overflow-auto p-2">
-      {#each changedFiles as file (`${file.old_path ?? ""}:${file.path}`)}
-        <article
-          class="file-row"
-          class:selected={isStatusSelected(file)}
-          class:active={selectedFilePath === file.path}
-        >
-          <div class="file-title">
-            <button
-              class="file-title-button"
-              type="button"
-              onclick={(event) => handleFileSelect(event, file)}
-              title={`Select ${displayPath(file)} in Explorer`}
-            >
-              <strong>{fileName(file)}</strong>
+    <div class="status-lanes overflow-auto">
+      <section class="status-lane" aria-label="Unstaged changes">
+        <header class="status-lane-head">
+          <div class="status-lane-title"><strong>Unstaged</strong><span>{unstagedCount}</span></div>
+          <div class="status-lane-actions">
+            {#if selectedUnstagedCount > 1}
+              <span class="status-selection-count">{selectedUnstagedCount} selected</span>
+              <button class="btn-sm" type="button" onclick={() => onStage(changedFiles.filter((file) => selectedStatusPaths.has(fileKey(file)) && file.unstaged !== null))} disabled={isBusy} title={`Stage ${selectedUnstagedCount} selected files`}>
+                <Check size={13} aria-hidden="true" /> Stage {selectedUnstagedCount}
+              </button>
+            {/if}
+            <button class="btn-sm" type="button" onclick={onStageAll} disabled={isBusy || !hasUnstaged} title="Stage all unstaged files">
+              <Check size={13} aria-hidden="true" /> Stage all
             </button>
+            {#if selectedUnstagedCount > 1}
+              <button class="btn-sm danger" type="button" onclick={() => onDiscard(changedFiles.filter((file) => selectedStatusPaths.has(fileKey(file)) && file.unstaged !== null), false)} disabled={isBusy} title={`Discard unstaged changes in ${selectedUnstagedCount} selected files`}>
+                <RotateCcw size={13} aria-hidden="true" /> Discard {selectedUnstagedCount}
+              </button>
+            {/if}
           </div>
+        </header>
+        <div class="status-file-list">
+          {#each changedFiles.filter((file) => file.unstaged !== null) as file (`unstaged:${fileKey(file)}`)}
+            {@const stageTargets = selectedStageTargets(file)}
+            <article class="status-file-row" class:selected={isStatusSelected(file)} class:active={selectedFilePath === file.path}>
+              <button class="status-file-main" type="button" onclick={(event) => handleFileSelect(event, file)} title={`Select ${displayPath(file)} in Explorer`}>
+                <strong>{fileName(file)}</strong>
+                <span>{displayPath(file)}</span>
+              </button>
+              <span class={`status-badge ${file.unstaged ?? "none"}`}>{statusLabel(file.unstaged)}</span>
+              <div class="status-file-actions">
+                <button type="button" onclick={() => stageFromFile(file)} disabled={isBusy || stageTargets.length === 0} title="Stage file"><Check size={14} aria-hidden="true" /></button>
+                <button type="button" onclick={() => onPatch(file, false)} disabled={isBusy || !canPatch(file.unstaged)} title="Show unstaged details"><FileDiff size={14} aria-hidden="true" /></button>
+                <button class="danger" type="button" onclick={() => discardUnstagedFromFile(file)} disabled={isBusy || stageTargets.length === 0} title="Discard unstaged changes"><RotateCcw size={14} aria-hidden="true" /></button>
+              </div>
+            </article>
+          {/each}
+          {#if unstagedCount === 0}<p class="status-lane-empty">No unstaged changes.</p>{/if}
+        </div>
+      </section>
 
-          <div class="change-lanes">
-            <div class="change-lane" class:inactive={!file.staged}>
-              <div class="lane-header">
-                <span class="lane-name">Staged</span>
-                <span class={`status-badge ${file.staged ?? "none"}`}>{statusLabel(file.staged)}</span>
-              </div>
-              <div class="lane-actions">
-                {#if file.staged}
-                  {@const unstageTargets = selectedUnstageTargets(file)}
-                  <button class="btn-sm" type="button" onclick={() => unstageFromFile(file)} disabled={isBusy || unstageTargets.length === 0} title={unstageTargets.length > 1 ? `Unstage ${unstageTargets.length} selected files` : "Unstage file"}>
-                    <Undo2 size={14} aria-hidden="true" />
-                    {unstageTargets.length > 1 ? `Unstage ${unstageTargets.length}` : "Unstage"}
-                  </button>
-                  <button class="btn-sm" type="button" onclick={() => onPatch(file, true)} disabled={isBusy || !canPatch(file.staged)} title="Stage, unstage, or discard selected lines">
-                    <FileDiff size={14} aria-hidden="true" />
-                    Details
-                  </button>
-                  <button class="btn-sm" type="button" onclick={() => discardStagedFromFile(file)} disabled={isBusy || unstageTargets.length === 0} title={unstageTargets.length > 1 ? `Discard staged changes in ${unstageTargets.length} selected files` : "Discard staged changes"}>
-                    <RotateCcw size={14} aria-hidden="true" />
-                    {unstageTargets.length > 1 ? `Discard ${unstageTargets.length}` : "Discard"}
-                  </button>
-                {:else}
-                  <span class="quiet">No staged change</span>
-                {/if}
-              </div>
-            </div>
-
-            <div class="change-lane" class:inactive={!file.unstaged}>
-              <div class="lane-header">
-                <span class="lane-name">Unstaged</span>
-                <span class={`status-badge ${file.unstaged ?? "none"}`}>{statusLabel(file.unstaged)}</span>
-              </div>
-              <div class="lane-actions">
-                {#if file.unstaged}
-                  {@const stageTargets = selectedStageTargets(file)}
-                  <button class="btn-sm" type="button" onclick={() => stageFromFile(file)} disabled={isBusy || stageTargets.length === 0} title={stageTargets.length > 1 ? `Stage ${stageTargets.length} selected files` : "Stage file"}>
-                    <Check size={14} aria-hidden="true" />
-                    {stageTargets.length > 1 ? `Stage ${stageTargets.length}` : "Stage"}
-                  </button>
-                  <button class="btn-sm" type="button" onclick={() => onPatch(file, false)} disabled={isBusy || !canPatch(file.unstaged)} title="Stage or discard selected lines">
-                    <FileDiff size={14} aria-hidden="true" />
-                    Details
-                  </button>
-                  <button class="btn-sm" type="button" onclick={() => discardUnstagedFromFile(file)} disabled={isBusy || stageTargets.length === 0} title={stageTargets.length > 1 ? `Discard unstaged changes in ${stageTargets.length} selected files` : "Discard unstaged changes"}>
-                    <RotateCcw size={14} aria-hidden="true" />
-                    {stageTargets.length > 1 ? `Discard ${stageTargets.length}` : "Discard"}
-                  </button>
-                {:else}
-                  <span class="quiet">No unstaged change</span>
-                {/if}
-              </div>
-            </div>
+      <section class="status-lane" aria-label="Staged changes">
+        <header class="status-lane-head">
+          <div class="status-lane-title"><strong>Staged</strong><span>{stagedCount}</span></div>
+          <div class="status-lane-actions">
+            {#if selectedStagedCount > 1}
+              <span class="status-selection-count">{selectedStagedCount} selected</span>
+              <button class="btn-sm" type="button" onclick={() => onUnstage(changedFiles.filter((file) => selectedStatusPaths.has(fileKey(file)) && file.staged !== null))} disabled={isBusy} title={`Unstage ${selectedStagedCount} selected files`}>
+                <Undo2 size={13} aria-hidden="true" /> Unstage {selectedStagedCount}
+              </button>
+            {/if}
+            <button class="btn-sm" type="button" onclick={onUnstageAll} disabled={isBusy || !hasStaged} title="Unstage all staged files">
+              <Undo2 size={13} aria-hidden="true" /> Unstage all
+            </button>
+            {#if selectedStagedCount > 1}
+              <button class="btn-sm danger" type="button" onclick={() => onDiscard(changedFiles.filter((file) => selectedStatusPaths.has(fileKey(file)) && file.staged !== null), true)} disabled={isBusy} title={`Discard staged changes in ${selectedStagedCount} selected files`}>
+                <RotateCcw size={13} aria-hidden="true" /> Discard {selectedStagedCount}
+              </button>
+            {/if}
           </div>
-        </article>
-      {/each}
+        </header>
+        <div class="status-file-list">
+          {#each changedFiles.filter((file) => file.staged !== null) as file (`staged:${fileKey(file)}`)}
+            {@const unstageTargets = selectedUnstageTargets(file)}
+            <article class="status-file-row" class:selected={isStatusSelected(file)} class:active={selectedFilePath === file.path}>
+              <button class="status-file-main" type="button" onclick={(event) => handleFileSelect(event, file)} title={`Select ${displayPath(file)} in Explorer`}>
+                <strong>{fileName(file)}</strong>
+                <span>{displayPath(file)}</span>
+              </button>
+              <span class={`status-badge ${file.staged ?? "none"}`}>{statusLabel(file.staged)}</span>
+              <div class="status-file-actions">
+                <button type="button" onclick={() => unstageFromFile(file)} disabled={isBusy || unstageTargets.length === 0} title="Unstage file"><Undo2 size={14} aria-hidden="true" /></button>
+                <button type="button" onclick={() => onPatch(file, true)} disabled={isBusy || !canPatch(file.staged)} title="Show staged details"><FileDiff size={14} aria-hidden="true" /></button>
+                <button class="danger" type="button" onclick={() => discardStagedFromFile(file)} disabled={isBusy || unstageTargets.length === 0} title="Discard staged changes"><RotateCcw size={14} aria-hidden="true" /></button>
+              </div>
+            </article>
+          {/each}
+          {#if stagedCount === 0}<p class="status-lane-empty">Stage files to include them in the next commit.</p>{/if}
+        </div>
+      </section>
     </div>
   {/if}
 

src/lib/git.ts

@@ -1,6 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
 
 import type {
+  AiReviewResult,
   CommitAiLocalProfile,
   CommitAiProvider,
   CommitAiStatus,
@@ -244,6 +245,16 @@ export function commitAiGenerate(path: string, options: CommitAiGenerateOptions)
   });
 }
 
+export function commitAiReview(path: string, options: CommitAiGenerateOptions): Promise<AiReviewResult> {
+  return invoke<AiReviewResult>("commit_ai_review", {
+    path,
+    provider: options.provider,
+    model: options.model,
+    apiKey: options.apiKey,
+    baseUrl: options.baseUrl,
+  });
+}
+
 export function pull(path: string, username?: string, password?: string): Promise<GitStatus> {
   return invoke<GitStatus>("pull", { path, username: username ?? null, password: password ?? null });
 }

src/lib/types.ts

@@ -19,6 +19,24 @@ export interface CommitAiStatus {
   error: string | null;
 }
 
+export type AiReviewRisk = "low" | "medium" | "high";
+export type AiReviewSeverity = "critical" | "warning" | "info";
+
+export interface AiReviewFinding {
+  severity: AiReviewSeverity;
+  title: string;
+  description: string;
+  file: string | null;
+  line: number | null;
+  suggestion: string;
+}
+
+export interface AiReviewResult {
+  summary: string;
+  risk: AiReviewRisk;
+  findings: AiReviewFinding[];
+}
+
 export interface LocalModelOption {
   id: string;
   label: string;