Merge pull request 'Improve global search: Add diffing from results with query highlighting' (#1) from FixSearch into master

Reviewed-on: #1

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tauri-git-lite",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tauri-git-lite",
-      "version": "0.0.1",
+      "version": "0.0.6",
       "dependencies": {
         "@lucide/svelte": "^1.21.0",
         "@tailwindcss/vite": "^4.3.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-lite",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "private": true,
   "type": "module",
   "scripts": {

src-tauri/src/git.rs

@@ -12,6 +12,12 @@ use std::{
     time::Duration,
 };
 
+#[cfg(windows)]
+use std::os::windows::process::CommandExt;
+
+#[cfg(windows)]
+const CREATE_NO_WINDOW: u32 = 0x08000000;
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize)]
 #[serde(rename_all = "lowercase")]
 pub enum FileStatusKind {
@@ -143,6 +149,13 @@ const EMPTY_TREE_HASH: &str = "4b825dc642cb6eb9a060e54bf8d69288fbee4904";
 const SEARCH_CANCELLED_MESSAGE: &str = "Suche wurde abgebrochen.";
 static CANCELLABLE_GIT_OUTPUT_COUNTER: AtomicU64 = AtomicU64::new(0);
 
+fn git_command() -> Command {
+    let mut command = Command::new("git");
+    #[cfg(windows)]
+    command.creation_flags(CREATE_NO_WINDOW);
+    command
+}
+
 #[derive(Debug, Default, Clone)]
 pub struct SearchCancellationState {
     cancelled: Arc<Mutex<BTreeSet<String>>>,
@@ -342,7 +355,7 @@ pub fn pull(
         (Some(u), Some(p)) if !u.is_empty() || !p.is_empty() => {
             run_git_authenticated_output(&repo, pull_args, u, p)?
         }
-        _ => Command::new("git")
+        _ => git_command()
             .arg("-C")
             .arg(&repo)
             .args(pull_args)
@@ -429,7 +442,7 @@ pub fn get_remote_url(path: String) -> Result<Option<String>, String> {
 }
 
 fn remote_url_for(repo: &Path, remote: &str) -> Option<String> {
-    let out = Command::new("git")
+    let out = git_command()
         .arg("-C")
         .arg(repo)
         .args(["remote", "get-url", remote])
@@ -452,7 +465,7 @@ fn upstream_remote_name(repo: &Path) -> Option<String> {
     if branch.is_empty() || branch == "HEAD" {
         return None;
     }
-    let out = Command::new("git")
+    let out = git_command()
         .arg("-C")
         .arg(repo)
         .args(["config", &format!("branch.{branch}.remote")])
@@ -530,7 +543,7 @@ pub fn merge_branch(path: String, branch: String) -> Result<GitStatus, String> {
         return Err("Branch-Name darf nicht leer sein.".to_string());
     }
 
-    let output = Command::new("git")
+    let output = git_command()
         .arg("-C")
         .arg(&repo)
         .args(["merge", "--no-edit", branch])
@@ -1106,7 +1119,7 @@ fn is_binary_bytes(bytes: &[u8]) -> bool {
 
 fn index_stage_size(repo: &Path, stage: u8, file: &str) -> Option<u64> {
     let spec = format!(":{stage}:{file}");
-    let output = Command::new("git")
+    let output = git_command()
         .arg("-C")
         .arg(repo)
         .args(["cat-file", "-s", spec.as_str()])
@@ -1139,7 +1152,7 @@ pub fn resolve_conflict(path: String, file: String, content: String) -> Result<G
 
 fn read_index_stage(repo: &Path, stage: u8, file: &str) -> Option<String> {
     let spec = format!(":{stage}:{file}");
-    let output = Command::new("git")
+    let output = git_command()
         .arg("-C")
         .arg(repo)
         .args(["show", spec.as_str()])
@@ -1325,6 +1338,10 @@ fn search_candidate_commits(
             OsString::from("--all"),
             OsString::from("--reverse"),
             OsString::from("--format=%H"),
+            // Skip textconv diff drivers so git does not extract binary files
+            // (e.g. .docx / Office temp "~$" lock files) to temp files, which can
+            // fail with "unsupported filetype" and abort the whole search.
+            OsString::from("--no-textconv"),
         ];
         if !case_sensitive {
             args.push(OsString::from("-i"));
@@ -1369,7 +1386,7 @@ fn max_parent_match_count(
 
 fn read_text_blob(repo: &Path, commit: &str, file: &str) -> Result<Option<String>, String> {
     let spec = format!("{commit}:{file}");
-    let output = Command::new("git")
+    let output = git_command()
         .arg("-C")
         .arg(repo)
         .args(["show", spec.as_str()])
@@ -1434,7 +1451,7 @@ fn first_added_match_line(
     check_search_cancelled(cancellation)?;
     let output = run_git_with_paths_cancellable(
         repo,
-        &["diff", "--unified=0", parent, commit],
+        &["diff", "--no-textconv", "--unified=0", parent, commit],
         &[file.to_string()],
         cancellation,
         "Git-Diff fuer Suchtreffer fehlgeschlagen",
@@ -1823,7 +1840,7 @@ fn local_branch_name_for_remote(remote_branch: &str) -> Option<&str> {
 }
 
 fn ref_exists(repo: &Path, ref_name: &str) -> Result<bool, String> {
-    let output = Command::new("git")
+    let output = git_command()
         .arg("-C")
         .arg(repo)
         .args(["show-ref", "--verify", "--quiet", ref_name])
@@ -2048,7 +2065,7 @@ where
 {
     let askpass = write_askpass_script()?;
 
-    let result = Command::new("git")
+    let result = git_command()
         .arg("-C")
         .arg(repo)
         .args(args)
@@ -2157,7 +2174,7 @@ where
     let stderr_file = std::fs::File::create(&stderr_path)
         .map_err(|err| format!("Git-Fehlerdatei konnte nicht erstellt werden: {err}"))?;
 
-    let mut child = Command::new("git")
+    let mut child = git_command()
         .arg("-C")
         .arg(repo)
         .args(args)
@@ -2218,7 +2235,7 @@ where
     I: IntoIterator<Item = S>,
     S: AsRef<OsStr>,
 {
-    let output = Command::new("git")
+    let output = git_command()
         .arg("-C")
         .arg(path)
         .args(args)
@@ -2442,7 +2459,7 @@ mod tests {
         I: IntoIterator<Item = S>,
         S: AsRef<OsStr>,
     {
-        let output = Command::new("git")
+        let output = git_command()
             .arg("-C")
             .arg(repo)
             .args(args)
@@ -2463,7 +2480,7 @@ mod tests {
         I: IntoIterator<Item = S>,
         S: AsRef<OsStr>,
     {
-        let output = Command::new("git")
+        let output = git_command()
             .arg("-C")
             .arg(repo)
             .args(args)
@@ -2971,7 +2988,7 @@ mod tests {
         run_git_test(&repo.path, ["commit", "-q", "-am", "main change"]);
 
         // The merge is expected to fail with a conflict, so run git directly.
-        let _ = Command::new("git")
+        let _ = git_command()
             .arg("-C")
             .arg(&repo.path)
             .args(["merge", "--no-edit", "feature"])
@@ -3024,7 +3041,7 @@ mod tests {
         fs::write(repo.path.join("file.txt"), "ours change\n").expect("main change");
         run_git_test(&repo.path, ["commit", "-q", "-am", "main change"]);
 
-        let _ = Command::new("git")
+        let _ = git_command()
             .arg("-C")
             .arg(&repo.path)
             .args(["merge", "--no-edit", "feature"])
@@ -3065,7 +3082,7 @@ mod tests {
         fs::write(repo.path.join("img.bin"), [0u8, 7, 7]).expect("main binary");
         run_git_test(&repo.path, ["commit", "-q", "-am", "main bin"]);
 
-        let _ = Command::new("git")
+        let _ = git_command()
             .arg("-C")
             .arg(&repo.path)
             .args(["merge", "--no-edit", "feature"])

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "GitLite",
-  "version": "0.0.1",
+  "version": "0.0.6",
   "identifier": "com.git-lite",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
   import { open as openDialog } from "@tauri-apps/plugin-dialog";
+  import { check, type DownloadEvent, type Update } from "@tauri-apps/plugin-updater";
   import { AlertCircle, Check, FolderOpen, GitBranch, GitMerge, LoaderCircle } from "@lucide/svelte";
 
   import TitleBar from "./lib/TitleBar.svelte";
@@ -15,6 +16,7 @@
   import HistoryPanel from "./lib/components/HistoryPanel.svelte";
   import ResolveDialog from "./lib/components/ResolveDialog.svelte";
   import StatusPanel from "./lib/components/StatusPanel.svelte";
+  import UpdateToast from "./lib/components/UpdateToast.svelte";
 
   import {
     checkoutBranch,
@@ -71,6 +73,8 @@
     stripAuthPrefix,
   } from "./lib/credentials";
 
+  type UpdateToastState = "available" | "downloading" | "installed" | "error";
+
   // ── State ──────────────────────────────────────────────────────────────────
 
   let repoPath = "";
@@ -92,8 +96,10 @@
   let comparison: GitCommitComparison | null = null;
   let compareDialogOpen = false;
   let selectedDiffPath = "";
+  let diffHighlightQuery = "";
   let pendingRestoreFile: { commit: GitCommit; file: GitCommitFile } | null = null;
   let globalSearchOpen = false;
+  let lastSearchQuery = "";
   let globalSearchResults: GitSearchHit[] = [];
   let globalSearchBusy = false;
   let globalSearchError = "";
@@ -111,6 +117,16 @@
   let lastStatusFingerprint = "";
   const AUTO_REFRESH_INTERVAL = 4000;
   let autoRefreshTimer: ReturnType<typeof setInterval> | undefined;
+  let updateToastOpen = false;
+  let updateToastState: UpdateToastState = "available";
+  let pendingUpdate: Update | null = null;
+  let updateVersion = "";
+  let updateCurrentVersion = "";
+  let updateProgress = 0;
+  let updateError = "";
+  let updateCheckInFlight = false;
+  let updateDownloadTotal = 0;
+  let updateDownloadedBytes = 0;
 
   // ── Derived ────────────────────────────────────────────────────────────────
 
@@ -133,6 +149,7 @@
 
   onMount(() => {
     autoRefreshTimer = setInterval(() => { void autoRefreshTick(); }, AUTO_REFRESH_INTERVAL);
+    void checkForUpdates();
   });
 
   onDestroy(() => {
@@ -166,6 +183,78 @@
     if (autoRefreshEnabled) void autoRefreshTick();
   }
 
+  // ── Updates ────────────────────────────────────────────────────────────────
+
+  async function checkForUpdates() {
+    if (updateCheckInFlight || updateToastState === "downloading") return;
+    updateCheckInFlight = true;
+
+    try {
+      const update = await check();
+      if (!update) return;
+
+      if (pendingUpdate && pendingUpdate !== update) {
+        void pendingUpdate.close().catch(() => {});
+      }
+
+      pendingUpdate = update;
+      updateVersion = update.version;
+      updateCurrentVersion = update.currentVersion;
+      updateProgress = 0;
+      updateError = "";
+      updateToastState = "available";
+      updateToastOpen = true;
+    } catch {
+      // Update checks should be quiet when offline or when the endpoint is unavailable.
+    } finally {
+      updateCheckInFlight = false;
+    }
+  }
+
+  function updateDownloadProgress(event: DownloadEvent) {
+    if (event.event === "Started") {
+      updateProgress = 0;
+      updateDownloadTotal = event.data.contentLength ?? 0;
+      updateDownloadedBytes = 0;
+      return;
+    }
+
+    if (event.event === "Progress") {
+      updateDownloadedBytes += event.data.chunkLength;
+      updateProgress = updateDownloadTotal > 0
+        ? Math.min(99, Math.round((updateDownloadedBytes / updateDownloadTotal) * 100))
+        : 0;
+      return;
+    }
+
+    updateProgress = 100;
+  }
+
+  async function installPendingUpdate() {
+    if (!pendingUpdate || updateToastState === "downloading") return;
+
+    updateToastState = "downloading";
+    updateProgress = 0;
+    updateError = "";
+    updateToastOpen = true;
+    updateDownloadTotal = 0;
+    updateDownloadedBytes = 0;
+
+    try {
+      await pendingUpdate.downloadAndInstall(updateDownloadProgress);
+      updateProgress = 100;
+      updateToastState = "installed";
+    } catch (error) {
+      updateToastState = "error";
+      updateError = errorToMessage(error);
+    }
+  }
+
+  function dismissUpdateToast() {
+    if (updateToastState === "downloading") return;
+    updateToastOpen = false;
+  }
+
   // ── Utilities ──────────────────────────────────────────────────────────────
 
   function applyStatus(nextStatus: GitStatus) {
@@ -659,6 +748,7 @@
       const result = await compareCommits(activeRepoPath, compareFrom, compareTo);
       comparison = result;
       selectedDiffPath = result.files[0]?.path ?? "";
+      diffHighlightQuery = "";
       pendingRestoreFile = null;
       compareDialogOpen = true;
     });
@@ -670,6 +760,19 @@
       const result = await diffFileAgainstWorkingTree(activeRepoPath, historyCommit.hash, selectedExplorerPath);
       comparison = result;
       selectedDiffPath = result.files[0]?.path ?? selectedExplorerPath;
+      diffHighlightQuery = "";
+      pendingRestoreFile = null;
+      compareDialogOpen = true;
+    });
+  }
+
+  async function diffSearchHit(hit: GitSearchHit) {
+    if (!activeRepoPath) return;
+    await runOperation(`Diffing ${hit.file}`, async () => {
+      const result = await diffFileAgainstWorkingTree(activeRepoPath, hit.commit_hash, hit.file);
+      comparison = result;
+      selectedDiffPath = result.files[0]?.path ?? hit.file;
+      diffHighlightQuery = lastSearchQuery;
       pendingRestoreFile = null;
       compareDialogOpen = true;
     });
@@ -698,6 +801,7 @@
     if (!activeRepoPath || globalSearchBusy) return;
     const searchId = `search-${Date.now()}-${Math.random().toString(36).slice(2)}`;
     globalSearchId = searchId;
+    lastSearchQuery = query;
     globalSearchBusy = true;
     globalSearchError = "";
     globalSearchResults = [];
@@ -1009,16 +1113,16 @@
   </div>
 </main>
 
-<!-- Compare diff dialog -->
-{#if compareDialogOpen && comparison}
-  <CompareDialog
-    {comparison}
-    {selectedDiffPath}
-    {isBusy}
-    restoreLabel={pendingRestoreFile ? "Restore file" : ""}
-    onClose={closeCompareDialog}
-    onRestore={restorePreviewedCommitFile}
-    onSelectFile={selectDiffFile}
+{#if updateToastOpen}
+  <UpdateToast
+    state={updateToastState}
+    version={updateVersion}
+    currentVersion={updateCurrentVersion}
+    progress={updateProgress}
+    error={updateError}
+    onInstall={installPendingUpdate}
+    onLater={dismissUpdateToast}
+    onDismiss={dismissUpdateToast}
   />
 {/if}
 
@@ -1032,6 +1136,21 @@
     onClose={closeGlobalSearchDialog}
     onSearch={runGlobalSearch}
     onCancel={cancelGlobalSearch}
+    onDiff={diffSearchHit}
+  />
+{/if}
+
+<!-- Compare diff dialog (rendered last so it overlays the search dialog when opened from a hit) -->
+{#if compareDialogOpen && comparison}
+  <CompareDialog
+    {comparison}
+    {selectedDiffPath}
+    {isBusy}
+    highlightQuery={diffHighlightQuery}
+    restoreLabel={pendingRestoreFile ? "Restore file" : ""}
+    onClose={closeCompareDialog}
+    onRestore={restorePreviewedCommitFile}
+    onSelectFile={selectDiffFile}
   />
 {/if}
 

src/app.css

@@ -397,6 +397,179 @@
     color: #f0c070;
   }
 
+  /* --- Update toast --- */
+
+  .update-toast {
+    position: fixed;
+    right: 18px;
+    bottom: 18px;
+    z-index: 70;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 12px;
+    width: min(430px, calc(100vw - 32px));
+    padding: 14px;
+    overflow: hidden;
+    border: 1px solid rgba(100, 108, 255, 0.42);
+    border-radius: 14px;
+    color: var(--color-ink);
+    background:
+      linear-gradient(135deg, rgba(100,108,255,0.22), rgba(189,52,254,0.12) 42%, rgba(65,209,255,0.08)),
+      rgba(12, 13, 24, 0.96);
+    box-shadow: 0 24px 72px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04) inset;
+    backdrop-filter: blur(18px);
+  }
+  .update-toast.error {
+    border-color: rgba(232,96,96,0.45);
+    background:
+      linear-gradient(135deg, rgba(232,96,96,0.16), rgba(100,108,255,0.11)),
+      rgba(12, 13, 24, 0.96);
+  }
+  .update-toast.installed {
+    border-color: rgba(78,202,118,0.38);
+    background:
+      linear-gradient(135deg, rgba(78,202,118,0.15), rgba(65,209,255,0.1), rgba(100,108,255,0.12)),
+      rgba(12, 13, 24, 0.96);
+  }
+
+  .update-toast-glow {
+    position: absolute;
+    inset: auto 18px -46px auto;
+    width: 170px;
+    height: 95px;
+    border-radius: 999px;
+    background: rgba(65,209,255,0.18);
+    filter: blur(34px);
+    pointer-events: none;
+  }
+
+  .update-toast-icon {
+    display: grid;
+    place-items: center;
+    width: 42px;
+    height: 42px;
+    flex: 0 0 auto;
+    border: 1px solid rgba(255,255,255,0.14);
+    border-radius: 12px;
+    color: #ffffff;
+    background: linear-gradient(135deg, rgba(65,209,255,0.28), rgba(100,108,255,0.54), rgba(189,52,254,0.42));
+    box-shadow: 0 14px 32px rgba(100,108,255,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
+  }
+  .update-toast-icon.busy { color: #bfefff; }
+
+  .update-toast-content {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: 9px;
+    min-width: 0;
+  }
+
+  .update-toast-top {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .update-toast-copy { min-width: 0; }
+  .update-toast-kicker {
+    display: block;
+    overflow: hidden;
+    color: var(--color-accent);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 800;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .update-toast h2 {
+    margin: 2px 0 0;
+    color: #ffffff;
+    font-size: 15px;
+    font-weight: 800;
+    line-height: 1.2;
+  }
+  .update-toast p {
+    margin: 0;
+    color: var(--color-ink-muted);
+    font-size: 12.5px;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .update-toast-close {
+    width: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    padding: 0;
+    border-color: rgba(255,255,255,0.1);
+    border-radius: 8px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,0.04);
+  }
+  .update-toast-close:hover:not(:disabled) {
+    border-color: rgba(255,255,255,0.2);
+    color: #ffffff;
+    background: rgba(255,255,255,0.1);
+  }
+
+  .update-progress {
+    position: relative;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.09);
+  }
+  .update-progress span {
+    position: absolute;
+    inset: 0 auto 0 0;
+    min-width: 0;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #41d1ff, #646cff, #bd34fe);
+    transition: width 160ms ease;
+  }
+  .update-progress.indeterminate span {
+    width: 42% !important;
+    animation: update-progress-slide 1.1s ease-in-out infinite;
+  }
+  .update-progress-label {
+    margin-top: -3px;
+    color: var(--color-ink-faint);
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  .update-toast-actions {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .update-toast-primary,
+  .update-toast-secondary {
+    min-height: 32px;
+    border-radius: 8px;
+    font-size: 12.5px;
+    font-weight: 800;
+  }
+  .update-toast-primary {
+    border-color: rgba(100,108,255,0.72);
+    color: #ffffff;
+    background: linear-gradient(135deg, #646cff, #bd34fe);
+  }
+  .update-toast-primary:hover:not(:disabled) {
+    border-color: rgba(65,209,255,0.74);
+    color: #ffffff;
+    background: linear-gradient(135deg, #747bff, #c966ff);
+  }
+  .update-toast-secondary {
+    border-color: rgba(255,255,255,0.1);
+    color: var(--color-ink-muted);
+    background: rgba(255,255,255,0.05);
+  }
+
   /* --- Workspace layout --- */
 
   .workspace {
@@ -950,6 +1123,19 @@
   .split-cell.add   { background: rgba(78,202,118,0.09); color: #5dd88a; }
   .split-cell.empty { background: rgba(0,0,0,0.06); }
 
+  /* Search-hit highlight: amber, distinct from add (green) / del (red).
+     Higher specificity so it overrides the add/del backgrounds on a matched line. */
+  .split-diff .split-cell.match {
+    background: rgba(240,182,72,0.22);
+    color: #f3c969;
+    box-shadow: inset 2px 0 0 rgba(240,182,72,0.9);
+  }
+  .split-diff .split-num.match {
+    background: rgba(240,182,72,0.2);
+    color: rgba(240,182,72,0.9);
+    border-right-color: rgba(240,182,72,0.35);
+  }
+
   .split-col-headers {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -1081,11 +1267,21 @@
   }
   .search-hit-top {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
     align-items: center;
     gap: 8px;
     min-width: 0;
   }
+  .search-hit-diff {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 9px;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+  }
   .search-hit-top .hash {
     padding: 2px 7px;
     border: 1px solid rgba(90,140,248,0.22);
@@ -1677,6 +1873,11 @@
 }
 
 @keyframes spin { to { transform: rotate(360deg); } }
+@keyframes update-progress-slide {
+  0% { transform: translateX(-120%); }
+  50% { transform: translateX(120%); }
+  100% { transform: translateX(320%); }
+}
 
 /* --- Responsive breakpoints --- */
 

src/lib/components/CompareDialog.svelte

@@ -15,6 +15,8 @@
     selectedDiffPath: string;
     isBusy: boolean;
     restoreLabel?: string;
+    /** When opened from a search hit, the term to highlight on matching lines. */
+    highlightQuery?: string;
     onClose: () => void;
     onRestore?: () => void;
     onSelectFile: (file: GitDiffFile) => void;
@@ -25,11 +27,25 @@
     selectedDiffPath = "",
     isBusy = false,
     restoreLabel = "",
+    highlightQuery = "",
     onClose = () => {},
     onRestore = undefined,
     onSelectFile = () => {},
   }: Props = $props();
 
+  // Needle = first non-empty line of the search query, lowercased for matching.
+  let highlightNeedle = $derived(
+    highlightQuery
+      .split("\n")
+      .map((line) => line.trim())
+      .find((line) => line.length > 0)
+      ?.toLowerCase() ?? ""
+  );
+
+  function isMatch(text?: string): boolean {
+    return highlightNeedle.length > 0 && !!text && text.toLowerCase().includes(highlightNeedle);
+  }
+
   let beforePane = $state<HTMLDivElement | null>(null);
   let afterPane = $state<HTMLDivElement | null>(null);
   let isSyncingSplitScroll = false;
@@ -259,8 +275,8 @@
                     {#if row.type === "span"}
                       <div class="split-span split-{row.kind}">{row.text}</div>
                     {:else}
-                      <div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
-                      <div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
+                      <div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"} class:match={isMatch(row.leftText)}>{row.leftNum ?? ""}</div>
+                      <div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"} class:match={isMatch(row.leftText)}>{row.leftText ?? " "}</div>
                     {/if}
                   {/each}
                 </div>
@@ -276,8 +292,8 @@
                     {#if row.type === "span"}
                       <div class="split-span split-{row.kind}">{row.text}</div>
                     {:else}
-                      <div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
-                      <div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
+                      <div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"} class:match={isMatch(row.rightText)}>{row.rightNum ?? ""}</div>
+                      <div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"} class:match={isMatch(row.rightText)}>{row.rightText ?? " "}</div>
                     {/if}
                   {/each}
                 </div>

src/lib/components/GlobalSearchDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { CalendarDays, FileCode, LoaderCircle, Search, User, X } from "@lucide/svelte";
+  import { CalendarDays, FileCode, GitCompare, LoaderCircle, Search, User, X } from "@lucide/svelte";
   import type { GitSearchHit } from "../types";
 
   interface Props {
@@ -11,6 +11,7 @@
     onClose: () => void;
     onSearch: (query: string, caseSensitive: boolean, limit: number) => void | Promise<void>;
     onCancel: () => void | Promise<void>;
+    onDiff: (hit: GitSearchHit) => void | Promise<void>;
   }
 
   let {
@@ -22,6 +23,7 @@
     onClose = () => {},
     onSearch = () => {},
     onCancel = () => {},
+    onDiff = () => {},
   }: Props = $props();
 
   let query = $state("");
@@ -148,6 +150,16 @@
                   {#if hit.matches_added > 1}
                     <span class="pill pill-active">+{hit.matches_added} matches</span>
                   {/if}
+                  <button
+                    class="btn-secondary search-hit-diff"
+                    type="button"
+                    disabled={isBusy}
+                    title={`Compare this version of ${hit.file} with the current version`}
+                    onclick={() => onDiff(hit)}
+                  >
+                    <GitCompare size={14} aria-hidden="true" />
+                    DIFF
+                  </button>
                 </header>
 
                 <div class="search-hit-meta">

src/lib/components/UpdateToast.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import {
+    AlertCircle,
+    Download,
+    LoaderCircle,
+    PackageCheck,
+    Sparkles,
+    X,
+  } from "@lucide/svelte";
+
+  type UpdateToastState = "available" | "downloading" | "installed" | "error";
+
+  interface Props {
+    state: UpdateToastState;
+    version: string;
+    currentVersion: string;
+    progress: number;
+    error: string;
+    onInstall: () => void;
+    onLater: () => void;
+    onDismiss: () => void;
+  }
+
+  let {
+    state,
+    version,
+    currentVersion = "",
+    progress = 0,
+    error = "",
+    onInstall,
+    onLater,
+    onDismiss,
+  }: Props = $props();
+
+  const clampedProgress = $derived(Math.max(0, Math.min(100, Math.round(progress))));
+  const title = $derived(
+    state === "installed"
+      ? "Update installed"
+      : state === "downloading"
+        ? "Installing update"
+        : state === "error"
+          ? "Update failed"
+          : "Update available",
+  );
+  const description = $derived(
+    state === "installed"
+      ? "Restart GitLite to use the new version."
+      : state === "downloading"
+        ? "Download and installation are running in the background."
+        : state === "error"
+          ? (error || "The update could not be installed.")
+          : "Do you want to install this version now?",
+  );
+  const versionLabel = $derived(
+    version && currentVersion
+      ? `${currentVersion} -> ${version}`
+      : version
+        ? `Version ${version}`
+        : "New version",
+  );
+  const showProgress = $derived(state === "downloading" || state === "installed");
+  const isBusy = $derived(state === "downloading");
+</script>
+
+<section
+  class="update-toast"
+  class:error={state === "error"}
+  class:installed={state === "installed"}
+  role={state === "error" ? "alert" : "status"}
+  aria-live={state === "error" ? "assertive" : "polite"}
+>
+  <div class="update-toast-glow" aria-hidden="true"></div>
+
+  <div class="update-toast-icon" class:busy={isBusy}>
+    {#if state === "downloading"}
+      <LoaderCircle class="spin" size={21} aria-hidden="true" />
+    {:else if state === "installed"}
+      <PackageCheck size={21} aria-hidden="true" />
+    {:else if state === "error"}
+      <AlertCircle size={21} aria-hidden="true" />
+    {:else}
+      <Sparkles size={21} aria-hidden="true" />
+    {/if}
+  </div>
+
+  <div class="update-toast-content">
+    <div class="update-toast-top">
+      <div class="update-toast-copy">
+        <span class="update-toast-kicker">{versionLabel}</span>
+        <h2>{title}</h2>
+      </div>
+
+      {#if !isBusy}
+        <button class="update-toast-close" type="button" onclick={onDismiss} title="Close" aria-label="Close">
+          <X size={15} aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+
+    <p>{description}</p>
+
+    {#if showProgress}
+      <div
+        class="update-progress"
+        class:indeterminate={state === "downloading" && clampedProgress === 0}
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow={clampedProgress}
+      >
+        <span style={`width: ${clampedProgress}%`}></span>
+      </div>
+      <div class="update-progress-label">
+        {state === "installed" ? "100% complete" : clampedProgress > 0 ? `${clampedProgress}%` : "Waiting for download size"}
+      </div>
+    {/if}
+
+    <div class="update-toast-actions">
+      {#if state === "installed"}
+        <button class="update-toast-secondary" type="button" onclick={onDismiss}>
+          Got it
+        </button>
+      {:else if state === "error"}
+        <button class="update-toast-secondary" type="button" onclick={onDismiss}>
+          Close
+        </button>
+        <button class="update-toast-primary" type="button" onclick={onInstall}>
+          <Download size={14} aria-hidden="true" />
+          Try again
+        </button>
+      {:else}
+        <button class="update-toast-secondary" type="button" onclick={onLater} disabled={isBusy}>
+          Later
+        </button>
+        <button class="update-toast-primary" type="button" onclick={onInstall} disabled={isBusy}>
+          {#if isBusy}
+            <LoaderCircle class="spin" size={14} aria-hidden="true" />
+            Installing
+          {:else}
+            <Download size={14} aria-hidden="true" />
+            Install
+          {/if}
+        </button>
+      {/if}
+    </div>
+  </div>
+</section>