diff --git a/apps/staged/package.json b/apps/staged/package.json
index 9b8ffbac..9d7e0e50 100644
--- a/apps/staged/package.json
+++ b/apps/staged/package.json
@@ -17,6 +17,7 @@
     "@tauri-apps/cli": "^2.10.0",
     "@tsconfig/svelte": "^5.0.6",
     "@types/node": "^24.10.1",
+    "@types/sanitize-html": "^2.13.0",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
     "svelte": "^5.46.4",
@@ -25,6 +26,13 @@
     "vite": "^7.2.4"
   },
   "dependencies": {
-    "@tauri-apps/api": "^2.10.0"
+    "@builderbot/diff-viewer": "workspace:*",
+    "@tauri-apps/api": "^2.10.0",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-store": "^2.2.0",
+    "lucide-svelte": "^0.575.0",
+    "marked": "^17.0.1",
+    "sanitize-html": "^2.17.0",
+    "shiki": "^3.20.0"
   }
 }
diff --git a/apps/staged/src-tauri/Cargo.lock b/apps/staged/src-tauri/Cargo.lock
index 557404c8..26e2afb1 100644
--- a/apps/staged/src-tauri/Cargo.lock
+++ b/apps/staged/src-tauri/Cargo.lock
@@ -2,58 +2,12 @@
 # It is not intended for manual editing.
 version = 3
 
-[[package]]
-name = "acp-client"
-version = "0.1.0"
-dependencies = [
- "agent-client-protocol",
- "anyhow",
- "async-trait",
- "blox-cli",
- "log",
- "serde",
- "serde_json",
- "tokio",
- "tokio-util",
-]
-
 [[package]]
 name = "adler2"
 version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
 
-[[package]]
-name = "agent-client-protocol"
-version = "0.9.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2659b1089101b15db31137710159421cb44785ecdb5ba784be3b4a6f8cb8a475"
-dependencies = [
- "agent-client-protocol-schema",
- "anyhow",
- "async-broadcast",
- "async-trait",
- "derive_more 2.1.1",
- "futures",
- "log",
- "serde",
- "serde_json",
-]
-
-[[package]]
-name = "agent-client-protocol-schema"
-version = "0.10.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44bc1fef9c32f03bce2ab44af35b6f483bfd169bf55cc59beeb2e3b1a00ae4d1"
-dependencies = [
- "anyhow",
- "derive_more 2.1.1",
- "schemars 1.2.1",
- "serde",
- "serde_json",
- "strum",
-]
-
 [[package]]
 name = "aho-corasick"
 version = "1.1.4"
@@ -93,29 +47,6 @@ version = "1.0.102"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
-[[package]]
-name = "async-broadcast"
-version = "0.7.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
-dependencies = [
- "event-listener",
- "event-listener-strategy",
- "futures-core",
- "pin-project-lite",
-]
-
-[[package]]
-name = "async-trait"
-version = "0.1.89"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.117",
-]
-
 [[package]]
 name = "atk"
 version = "0.18.2"
@@ -196,16 +127,6 @@ dependencies = [
  "objc2",
 ]
 
-[[package]]
-name = "blox-cli"
-version = "0.1.0"
-dependencies = [
- "serde",
- "serde_json",
- "thiserror 2.0.18",
- "wait-timeout",
-]
-
 [[package]]
 name = "brotli"
 version = "8.0.2"
@@ -227,20 +148,6 @@ dependencies = [
  "alloc-stdlib",
 ]
 
-[[package]]
-name = "builderbot-actions"
-version = "0.1.0"
-dependencies = [
- "acp-client",
- "anyhow",
- "async-trait",
- "libc",
- "serde",
- "serde_json",
- "tokio",
- "uuid",
-]
-
 [[package]]
 name = "bumpalo"
 version = "3.20.2"
@@ -342,6 +249,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "aebf35691d1bfb0ac386a69bac2fde4dd276fb618cf8bf4f5318fe285e821bb2"
 dependencies = [
  "find-msvc-tools",
+ "jobserver",
+ "libc",
  "shlex",
 ]
 
@@ -400,30 +309,12 @@ dependencies = [
  "memchr",
 ]
 
-[[package]]
-name = "concurrent-queue"
-version = "2.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ca0197aee26d1ae37445ee532fefce43251d24cc7c166799f4d46817f1d3973"
-dependencies = [
- "crossbeam-utils",
-]
-
 [[package]]
 name = "convert_case"
 version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6245d59a3e82a7fc217c5828a6692dbc6dfb63a0c8c90495621f7b9d79704a0e"
 
-[[package]]
-name = "convert_case"
-version = "0.10.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "633458d4ef8c78b72454de2d54fd6ab2e60f9e02be22f3c6104cdc8a4e0fceb9"
-dependencies = [
- "unicode-segmentation",
-]
-
 [[package]]
 name = "cookie"
 version = "0.18.1"
@@ -605,7 +496,7 @@ version = "0.99.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6edb4b64a43d977b8e99788fe3a04d483834fba1215a7e02caa415b626497f7f"
 dependencies = [
- "convert_case 0.4.0",
+ "convert_case",
  "proc-macro2",
  "quote",
  "rustc_version",
@@ -613,45 +504,43 @@ dependencies = [
 ]
 
 [[package]]
-name = "derive_more"
-version = "2.1.1"
+name = "digest"
+version = "0.10.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d751e9e49156b02b44f9c1815bcb94b984cdcc4396ecc32521c739452808b134"
+checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
 dependencies = [
- "derive_more-impl",
+ "block-buffer",
+ "crypto-common",
 ]
 
 [[package]]
-name = "derive_more-impl"
-version = "2.1.1"
+name = "dirs"
+version = "5.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "799a97264921d8623a957f6c3b9011f3b5492f557bbb7a5a19b7fa6d06ba8dcb"
+checksum = "44c45a9d03d6676652bcb5e724c7e988de1acad23a711b5217ab9cbecbec2225"
 dependencies = [
- "convert_case 0.10.0",
- "proc-macro2",
- "quote",
- "rustc_version",
- "syn 2.0.117",
- "unicode-xid",
+ "dirs-sys 0.4.1",
 ]
 
 [[package]]
-name = "digest"
-version = "0.10.7"
+name = "dirs"
+version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
+checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
 dependencies = [
- "block-buffer",
- "crypto-common",
+ "dirs-sys 0.5.0",
 ]
 
 [[package]]
-name = "dirs"
-version = "6.0.0"
+name = "dirs-sys"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3e8aa94d75141228480295a7d0e7feb620b1a5ad9f12bc40be62411e38cce4e"
+checksum = "520f05a5cbd335fae5a99ff7a6ab8627577660ee5cfd6a94a6a929b52ff0321c"
 dependencies = [
- "dirs-sys",
+ "libc",
+ "option-ext",
+ "redox_users 0.4.6",
+ "windows-sys 0.48.0",
 ]
 
 [[package]]
@@ -662,7 +551,7 @@ checksum = "e01a3366d27ee9890022452ee61b2b63a67e6f13f58900b651ff5665f0bb1fab"
 dependencies = [
  "libc",
  "option-ext",
- "redox_users",
+ "redox_users 0.5.2",
  "windows-sys 0.61.2",
 ]
 
@@ -679,6 +568,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "89a09f22a6c6069a18470eb92d2298acf25463f14256d24778e1230d789a2aec"
 dependencies = [
  "bitflags 2.11.0",
+ "block2",
+ "libc",
  "objc2",
 ]
 
@@ -789,37 +680,6 @@ dependencies = [
  "typeid",
 ]
 
-[[package]]
-name = "errno"
-version = "0.3.14"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
-dependencies = [
- "libc",
- "windows-sys 0.61.2",
-]
-
-[[package]]
-name = "event-listener"
-version = "5.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e13b66accf52311f30a0db42147dadea9850cb48cd070028831ae5f5d4b856ab"
-dependencies = [
- "concurrent-queue",
- "parking",
- "pin-project-lite",
-]
-
-[[package]]
-name = "event-listener-strategy"
-version = "0.5.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8be9f3dfaaffdae2972880079a491a1a8bb7cbed0b8dd7a347f668b4150a3b93"
-dependencies = [
- "event-listener",
- "pin-project-lite",
-]
-
 [[package]]
 name = "fdeflate"
 version = "0.3.7"
@@ -913,21 +773,6 @@ dependencies = [
  "new_debug_unreachable",
 ]
 
-[[package]]
-name = "futures"
-version = "0.3.32"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8b147ee9d1f6d097cef9ce628cd2ee62288d963e16fb287bd9286455b241382d"
-dependencies = [
- "futures-channel",
- "futures-core",
- "futures-executor",
- "futures-io",
- "futures-sink",
- "futures-task",
- "futures-util",
-]
-
 [[package]]
 name = "futures-channel"
 version = "0.3.32"
@@ -935,7 +780,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
 dependencies = [
  "futures-core",
- "futures-sink",
 ]
 
 [[package]]
@@ -990,7 +834,6 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
 dependencies = [
- "futures-channel",
  "futures-core",
  "futures-io",
  "futures-macro",
@@ -1198,6 +1041,30 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "git-diff"
+version = "0.1.0"
+dependencies = [
+ "git2",
+ "serde",
+ "thiserror 2.0.18",
+]
+
+[[package]]
+name = "git2"
+version = "0.20.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7b88256088d75a56f8ecfa070513a775dd9107f6530ef14919dac831af9cfe2b"
+dependencies = [
+ "bitflags 2.11.0",
+ "libc",
+ "libgit2-sys",
+ "log",
+ "openssl-probe",
+ "openssl-sys",
+ "url",
+]
+
 [[package]]
 name = "glib"
 version = "0.18.5"
@@ -1695,6 +1562,16 @@ version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8eaf4bc02d17cbdd7ff4c7438cafcdf7fb9a4613313ad11b4f8fefe7d3fa0130"
 
+[[package]]
+name = "jobserver"
+version = "0.1.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9afb3de4395d6b3e67a780b6de64b51c978ecf11cb9a462c66be7d4ca9039d33"
+dependencies = [
+ "getrandom 0.3.4",
+ "libc",
+]
+
 [[package]]
 name = "js-sys"
 version = "0.3.88"
@@ -1792,6 +1669,20 @@ version = "0.2.182"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6800badb6cb2082ffd7b6a67e6125bb39f18782f793520caee8cb8846be06112"
 
+[[package]]
+name = "libgit2-sys"
+version = "0.18.3+1.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c9b3acc4b91781bb0b3386669d325163746af5f6e4f73e6d2d630e09a35f3487"
+dependencies = [
+ "cc",
+ "libc",
+ "libssh2-sys",
+ "libz-sys",
+ "openssl-sys",
+ "pkg-config",
+]
+
 [[package]]
 name = "libloading"
 version = "0.7.4"
@@ -1812,6 +1703,32 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "libssh2-sys"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "220e4f05ad4a218192533b300327f5150e809b54c4ec83b5a1d91833601811b9"
+dependencies = [
+ "cc",
+ "libc",
+ "libz-sys",
+ "openssl-sys",
+ "pkg-config",
+ "vcpkg",
+]
+
+[[package]]
+name = "libz-sys"
+version = "1.1.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15d118bbf3771060e7311cc7bb0545b01d08a8b4a7de949198dec1fa0ca1c0f7"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "litemap"
 version = "0.8.1"
@@ -2230,6 +2147,24 @@ version = "1.21.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d"
 
+[[package]]
+name = "openssl-probe"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d05e27ee213611ffe7d6348b942e8f942b37114c00cc03cec254295a4a17852e"
+
+[[package]]
+name = "openssl-sys"
+version = "0.9.111"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82cab2d520aa75e3c58898289429321eb788c3106963d0dc886ec7a5f4adc321"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "option-ext"
 version = "0.2.0"
@@ -2261,12 +2196,6 @@ dependencies = [
  "system-deps",
 ]
 
-[[package]]
-name = "parking"
-version = "2.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f38d5652c16fde515bb1ecef450ab0f6a219d619a7274976324d5e377f7dceba"
-
 [[package]]
 name = "parking_lot"
 version = "0.12.5"
@@ -2702,6 +2631,17 @@ dependencies = [
  "bitflags 2.11.0",
 ]
 
+[[package]]
+name = "redox_users"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba009ff324d1fc1b900bd1fdb31564febe58a8ccc8a6fdbb93b543d33b13ca43"
+dependencies = [
+ "getrandom 0.2.17",
+ "libredox",
+ "thiserror 1.0.69",
+]
+
 [[package]]
 name = "redox_users"
 version = "0.5.2"
@@ -2796,6 +2736,30 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "rfd"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a15ad77d9e70a92437d8f74c35d99b4e4691128df018833e99f90bcd36152672"
+dependencies = [
+ "block2",
+ "dispatch2",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "js-sys",
+ "log",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation",
+ "raw-window-handle",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "windows-sys 0.60.2",
+]
+
 [[package]]
 name = "rustc_version"
 version = "0.4.1"
@@ -2828,7 +2792,7 @@ checksum = "3fbf2ae1b8bc8e02df939598064d22402220cd5bbcca1c76f7d6a310974d5615"
 dependencies = [
  "dyn-clone",
  "indexmap 1.9.3",
- "schemars_derive 0.8.22",
+ "schemars_derive",
  "serde",
  "serde_json",
  "url",
@@ -2855,7 +2819,6 @@ checksum = "a2b42f36aa1cd011945615b92222f6bf73c599a102a300334cd7f8dbeec726cc"
 dependencies = [
  "dyn-clone",
  "ref-cast",
- "schemars_derive 1.2.1",
  "serde",
  "serde_json",
 ]
@@ -2872,18 +2835,6 @@ dependencies = [
  "syn 2.0.117",
 ]
 
-[[package]]
-name = "schemars_derive"
-version = "1.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7d115b50f4aaeea07e79c1912f645c7513d81715d0420f8bc77a18c6260b307f"
-dependencies = [
- "proc-macro2",
- "quote",
- "serde_derive_internals",
- "syn 2.0.117",
-]
-
 [[package]]
 name = "scopeguard"
 version = "1.2.0"
@@ -2898,7 +2849,7 @@ checksum = "0c37578180969d00692904465fb7f6b3d50b9a2b952b87c23d0e2e5cb5013416"
 dependencies = [
  "bitflags 1.3.2",
  "cssparser",
- "derive_more 0.99.20",
+ "derive_more",
  "fxhash",
  "log",
  "phf 0.8.0",
@@ -3093,16 +3044,6 @@ version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
 
-[[package]]
-name = "signal-hook-registry"
-version = "1.4.8"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c4db69cba1110affc0e9f7bcd48bbf87b3f4fc7c61fc9155afd4c469eb3d6c1b"
-dependencies = [
- "errno",
- "libc",
-]
-
 [[package]]
 name = "simd-adler32"
 version = "0.3.8"
@@ -3201,13 +3142,14 @@ checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
 name = "staged"
 version = "0.1.0"
 dependencies = [
- "acp-client",
- "blox-cli",
- "builderbot-actions",
+ "dirs 5.0.1",
+ "git-diff",
  "serde",
  "serde_json",
  "tauri",
  "tauri-build",
+ "tauri-plugin-dialog",
+ "tauri-plugin-store",
 ]
 
 [[package]]
@@ -3241,27 +3183,6 @@ version = "0.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
 
-[[package]]
-name = "strum"
-version = "0.27.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "af23d6f6c1a224baef9d3f61e287d2761385a5b88fdab4eb4c6f11aeb54c4bcf"
-dependencies = [
- "strum_macros",
-]
-
-[[package]]
-name = "strum_macros"
-version = "0.27.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7695ce3845ea4b33927c055a39dc438a45b059f7c1b3d91d38d10355fb8cbca7"
-dependencies = [
- "heck 0.5.0",
- "proc-macro2",
- "quote",
- "syn 2.0.117",
-]
-
 [[package]]
 name = "swift-rs"
 version = "1.0.7"
@@ -3394,7 +3315,7 @@ dependencies = [
  "anyhow",
  "bytes",
  "cookie",
- "dirs",
+ "dirs 6.0.0",
  "dunce",
  "embed_plist",
  "getrandom 0.3.4",
@@ -3444,7 +3365,7 @@ checksum = "ca7bd893329425df750813e95bd2b643d5369d929438da96d5bbb7cc2c918f74"
 dependencies = [
  "anyhow",
  "cargo_toml",
- "dirs",
+ "dirs 6.0.0",
  "glob",
  "heck 0.5.0",
  "json-patch",
@@ -3499,6 +3420,79 @@ dependencies = [
  "tauri-utils",
 ]
 
+[[package]]
+name = "tauri-plugin"
+version = "2.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "692a77abd8b8773e107a42ec0e05b767b8d2b7ece76ab36c6c3947e34df9f53f"
+dependencies = [
+ "anyhow",
+ "glob",
+ "plist",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "tauri-utils",
+ "toml 0.9.12+spec-1.1.0",
+ "walkdir",
+]
+
+[[package]]
+name = "tauri-plugin-dialog"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9204b425d9be8d12aa60c2a83a289cf7d1caae40f57f336ed1155b3a5c0e359b"
+dependencies = [
+ "log",
+ "raw-window-handle",
+ "rfd",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "tauri-plugin-fs",
+ "thiserror 2.0.18",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-fs"
+version = "2.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed390cc669f937afeb8b28032ce837bac8ea023d975a2e207375ec05afaf1804"
+dependencies = [
+ "anyhow",
+ "dunce",
+ "glob",
+ "percent-encoding",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "tauri-utils",
+ "thiserror 2.0.18",
+ "toml 0.9.12+spec-1.1.0",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-store"
+version = "2.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5ca1a8ff83c269b115e98726ffc13f9e548a10161544a92ad121d6d0a96e16ea"
+dependencies = [
+ "dunce",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.18",
+ "tokio",
+ "tracing",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "2.10.0"
@@ -3702,7 +3696,6 @@ dependencies = [
  "libc",
  "mio",
  "pin-project-lite",
- "signal-hook-registry",
  "socket2",
  "tokio-macros",
  "windows-sys 0.61.2",
@@ -3727,7 +3720,6 @@ checksum = "9ae9cec805b01e8fc3fd2fe289f89149a9b66dd16786abd8b19cfa7b48cb0098"
 dependencies = [
  "bytes",
  "futures-core",
- "futures-io",
  "futures-sink",
  "pin-project-lite",
  "tokio",
@@ -3881,9 +3873,21 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
 dependencies = [
  "pin-project-lite",
+ "tracing-attributes",
  "tracing-core",
 ]
 
+[[package]]
+name = "tracing-attributes"
+version = "0.1.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
 [[package]]
 name = "tracing-core"
 version = "0.1.36"
@@ -3900,7 +3904,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a5e85aa143ceb072062fc4d6356c1b520a51d636e7bc8e77ec94be3608e5e80c"
 dependencies = [
  "crossbeam-channel",
- "dirs",
+ "dirs 6.0.0",
  "libappindicator",
  "muda",
  "objc2",
@@ -4041,6 +4045,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "vcpkg"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
+
 [[package]]
 name = "version-compare"
 version = "0.2.1"
@@ -4073,15 +4083,6 @@ dependencies = [
  "libc",
 ]
 
-[[package]]
-name = "wait-timeout"
-version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09ac3b126d3914f9849036f826e054cbabdc8519970b8998ddaf3b5bd3c65f11"
-dependencies = [
- "libc",
-]
-
 [[package]]
 name = "walkdir"
 version = "2.5.0"
@@ -4521,6 +4522,15 @@ dependencies = [
  "windows-targets 0.42.2",
 ]
 
+[[package]]
+name = "windows-sys"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+dependencies = [
+ "windows-targets 0.48.5",
+]
+
 [[package]]
 name = "windows-sys"
 version = "0.59.0"
@@ -4563,6 +4573,21 @@ dependencies = [
  "windows_x86_64_msvc 0.42.2",
 ]
 
+[[package]]
+name = "windows-targets"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a2fa6e2155d7247be68c096456083145c183cbbbc2764150dda45a87197940c"
+dependencies = [
+ "windows_aarch64_gnullvm 0.48.5",
+ "windows_aarch64_msvc 0.48.5",
+ "windows_i686_gnu 0.48.5",
+ "windows_i686_msvc 0.48.5",
+ "windows_x86_64_gnu 0.48.5",
+ "windows_x86_64_gnullvm 0.48.5",
+ "windows_x86_64_msvc 0.48.5",
+]
+
 [[package]]
 name = "windows-targets"
 version = "0.52.6"
@@ -4620,6 +4645,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.52.6"
@@ -4638,6 +4669,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.52.6"
@@ -4656,6 +4693,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.52.6"
@@ -4686,6 +4729,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.52.6"
@@ -4704,6 +4753,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.52.6"
@@ -4722,6 +4777,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.52.6"
@@ -4740,6 +4801,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.52.6"
@@ -4884,7 +4951,7 @@ dependencies = [
  "block2",
  "cookie",
  "crossbeam-channel",
- "dirs",
+ "dirs 6.0.0",
  "dpi",
  "dunce",
  "gdkx11",
diff --git a/apps/staged/src-tauri/Cargo.toml b/apps/staged/src-tauri/Cargo.toml
index dabb7351..0e9519a6 100644
--- a/apps/staged/src-tauri/Cargo.toml
+++ b/apps/staged/src-tauri/Cargo.toml
@@ -19,8 +19,9 @@ tauri-build = { version = "2.5.5", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2.10.2", features = [] }
+tauri-plugin-dialog = "2"
+tauri-plugin-store = "2"
+dirs = "5.0"
 
-# Shared crates (proves the split works)
-builderbot-actions = { path = "../../../crates/builderbot-actions" }
-acp-client = { path = "../../../crates/acp-client" }
-blox-cli = { path = "../../../crates/blox-cli" }
+# Shared crate for diff computation
+git-diff = { path = "../../../crates/git-diff" }
diff --git a/apps/staged/src-tauri/capabilities/default.json b/apps/staged/src-tauri/capabilities/default.json
index 8e906f70..c74bb83a 100644
--- a/apps/staged/src-tauri/capabilities/default.json
+++ b/apps/staged/src-tauri/capabilities/default.json
@@ -3,5 +3,11 @@
   "identifier": "default",
   "description": "enables the default permissions",
   "windows": ["main"],
-  "permissions": ["core:default"]
+  "permissions": [
+    "core:default",
+    "core:window:allow-start-dragging",
+    "dialog:default",
+    "dialog:allow-open",
+    "store:default"
+  ]
 }
diff --git a/apps/staged/src-tauri/src/lib.rs b/apps/staged/src-tauri/src/lib.rs
index da7f6a5a..37100434 100644
--- a/apps/staged/src-tauri/src/lib.rs
+++ b/apps/staged/src-tauri/src/lib.rs
@@ -1,14 +1,658 @@
 //! Staged — standalone diff viewer.
+//!
+//! A focused diff viewer that opens a git repository and shows diffs
+//! using the shared git-diff crate and @builderbot/diff-viewer package.
 
+use serde::Serialize;
+use std::collections::HashSet;
+use std::path::{Path, PathBuf};
+use std::process::Command;
+use std::sync::Mutex;
+
+// =============================================================================
+// App state
+// =============================================================================
+
+struct AppState {
+    repo_path: PathBuf,
+}
+
+// =============================================================================
+// Types
+// =============================================================================
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct RepoInfo {
+    path: String,
+    branch: String,
+    default_branch: String,
+    commits_ahead: u32,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct CommitInfo {
+    sha: String,
+    short_sha: String,
+    message: String,
+    author: String,
+    timestamp: i64,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct DiffFilesResponse {
+    files: Vec<git_diff::FileDiffSummary>,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct LaunchArgs {
+    repo_path: String,
+    mode: Option<String>,
+    commit: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct DirEntry {
+    name: String,
+    path: String,
+    is_dir: bool,
+    is_repo: bool,
+}
+
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct RecentRepo {
+    name: String,
+    path: String,
+}
+
+// =============================================================================
+// Commands: Git info
+// =============================================================================
+
+#[tauri::command(rename_all = "camelCase")]
+fn get_repo_info(state: tauri::State<'_, Mutex<AppState>>) -> Result<RepoInfo, String> {
+    let state = state.lock().unwrap();
+    let repo = &state.repo_path;
+
+    let branch = run_git(repo, &["rev-parse", "--abbrev-ref", "HEAD"])
+        .unwrap_or_else(|_| "HEAD".to_string());
+
+    let default_branch =
+        git_diff::detect_default_branch(repo).unwrap_or_else(|_| "origin/main".to_string());
+
+    let commits_ahead = run_git(
+        repo,
+        &["rev-list", "--count", &format!("{default_branch}..HEAD")],
+    )
+    .ok()
+    .and_then(|s| s.trim().parse::<u32>().ok())
+    .unwrap_or(0);
+
+    Ok(RepoInfo {
+        path: repo.display().to_string(),
+        branch: branch.trim().to_string(),
+        default_branch,
+        commits_ahead,
+    })
+}
+
+#[tauri::command(rename_all = "camelCase")]
+fn list_recent_commits(
+    state: tauri::State<'_, Mutex<AppState>>,
+    count: Option<u32>,
+) -> Result<Vec<CommitInfo>, String> {
+    let state = state.lock().unwrap();
+    let repo = &state.repo_path;
+    let count = count.unwrap_or(20);
+
+    let output = run_git(
+        repo,
+        &[
+            "log",
+            &format!("-{count}"),
+            "--format=%H%n%h%n%s%n%an%n%at",
+            "--no-merges",
+        ],
+    )
+    .map_err(|e| e.to_string())?;
+
+    let mut commits = Vec::new();
+    let lines: Vec<&str> = output.lines().collect();
+
+    for chunk in lines.chunks(5) {
+        if chunk.len() == 5 {
+            commits.push(CommitInfo {
+                sha: chunk[0].to_string(),
+                short_sha: chunk[1].to_string(),
+                message: chunk[2].to_string(),
+                author: chunk[3].to_string(),
+                timestamp: chunk[4].parse().unwrap_or(0),
+            });
+        }
+    }
+
+    Ok(commits)
+}
+
+// =============================================================================
+// Commands: Diff operations
+// =============================================================================
+
+#[tauri::command(rename_all = "camelCase")]
+fn list_diff_files(
+    state: tauri::State<'_, Mutex<AppState>>,
+    spec: git_diff::DiffSpec,
+) -> Result<DiffFilesResponse, String> {
+    let state = state.lock().unwrap();
+    let repo = &state.repo_path;
+
+    let files = git_diff::list_diff_files(repo, &spec).map_err(|e| e.to_string())?;
+    Ok(DiffFilesResponse { files })
+}
+
+#[tauri::command(rename_all = "camelCase")]
+fn get_file_diff(
+    state: tauri::State<'_, Mutex<AppState>>,
+    spec: git_diff::DiffSpec,
+    path: String,
+) -> Result<git_diff::FileDiff, String> {
+    let state = state.lock().unwrap();
+    let repo = &state.repo_path;
+    let file_path = Path::new(&path);
+
+    git_diff::get_file_diff(repo, &spec, file_path).map_err(|e| e.to_string())
+}
+
+#[tauri::command(rename_all = "camelCase")]
+fn get_file_at_ref(
+    state: tauri::State<'_, Mutex<AppState>>,
+    ref_name: String,
+    path: String,
+) -> Result<git_diff::File, String> {
+    let state = state.lock().unwrap();
+    let repo = &state.repo_path;
+
+    git_diff::get_file_at_ref(repo, &ref_name, &path).map_err(|e| e.to_string())
+}
+
+// =============================================================================
+// Commands: Launch args
+// =============================================================================
+
+#[tauri::command(rename_all = "camelCase")]
+fn get_launch_args(state: tauri::State<'_, Mutex<AppState>>) -> LaunchArgs {
+    let state = state.lock().unwrap();
+
+    let args: Vec<String> = std::env::args().collect();
+    let mut mode: Option<String> = None;
+    let mut commit: Option<String> = None;
+
+    let mut i = 1;
+    while i < args.len() {
+        match args[i].as_str() {
+            "--staged" | "-s" => mode = Some("staged".to_string()),
+            "--branch" | "-b" => mode = Some("branch".to_string()),
+            "--commit" | "-c" => {
+                mode = Some("commit".to_string());
+                if i + 1 < args.len() && !args[i + 1].starts_with('-') {
+                    i += 1;
+                    commit = Some(args[i].clone());
+                }
+            }
+            "--all" | "-a" => mode = Some("all".to_string()),
+            _ => {}
+        }
+        i += 1;
+    }
+
+    LaunchArgs {
+        repo_path: state.repo_path.display().to_string(),
+        mode,
+        commit,
+    }
+}
+
+// =============================================================================
+// Commands: Repo selection
+// =============================================================================
+
+#[tauri::command(rename_all = "camelCase")]
+fn set_repo_path(state: tauri::State<'_, Mutex<AppState>>, path: String) -> Result<(), String> {
+    let p = PathBuf::from(&path);
+    if !p.join(".git").exists() && run_git(&p, &["rev-parse", "--git-dir"]).is_err() {
+        return Err(format!("{path} is not a git repository"));
+    }
+    let mut s = state.lock().unwrap();
+    s.repo_path = p;
+    Ok(())
+}
+
+// =============================================================================
+// Commands: Directory browsing
+// =============================================================================
+
+/// List contents of a directory.
+/// Returns directories first (sorted), then files (sorted).
+/// Hidden files (starting with .) are excluded.
+#[tauri::command(rename_all = "camelCase")]
+fn list_directory(path: String) -> Result<Vec<DirEntry>, String> {
+    let dir = Path::new(&path);
+
+    if !dir.exists() {
+        return Err(format!("Directory does not exist: {path}"));
+    }
+    if !dir.is_dir() {
+        return Err(format!("Not a directory: {path}"));
+    }
+
+    let mut dirs = Vec::new();
+    let mut files = Vec::new();
+
+    let entries = std::fs::read_dir(dir).map_err(|e| format!("Failed to read directory: {e}"))?;
+
+    for entry in entries.flatten() {
+        let name = entry.file_name().to_string_lossy().to_string();
+        if name.starts_with('.') {
+            continue;
+        }
+
+        let entry_path = entry.path();
+        let is_dir = entry_path.is_dir();
+        let is_repo = is_dir && entry_path.join(".git").exists();
+
+        let item = DirEntry {
+            name,
+            path: entry_path.to_string_lossy().to_string(),
+            is_dir,
+            is_repo,
+        };
+
+        if is_dir {
+            dirs.push(item);
+        } else {
+            files.push(item);
+        }
+    }
+
+    dirs.sort_by(|a, b| a.name.to_lowercase().cmp(&b.name.to_lowercase()));
+    files.sort_by(|a, b| a.name.to_lowercase().cmp(&b.name.to_lowercase()));
+    dirs.extend(files);
+    Ok(dirs)
+}
+
+/// Folders to skip during search.
+const SKIP_FOLDERS: &[&str] = &[
+    "Library",
+    "Applications",
+    "System",
+    "Volumes",
+    "cores",
+    "private",
+    "node_modules",
+    "target",
+    "build",
+    "dist",
+    "vendor",
+    ".git",
+    "__pycache__",
+    "venv",
+    ".venv",
+    "env",
+    ".cargo",
+    ".rustup",
+    ".npm",
+    ".cache",
+    "Caches",
+    "Movies",
+    "Music",
+    "Pictures",
+    "Photos Library.photoslibrary",
+];
+
+/// Common development folder names.
+const DEV_FOLDERS: &[&str] = &[
+    "dev",
+    "projects",
+    "code",
+    "repos",
+    "src",
+    "workspace",
+    "work",
+    "github",
+    "gitlab",
+    "Development",
+    "Documents",
+    "Desktop",
+];
+
+/// Search for git repositories matching a query.
+#[tauri::command(rename_all = "camelCase")]
+fn search_directories(
+    path: String,
+    query: String,
+    max_depth: Option<u32>,
+    limit: Option<usize>,
+) -> Result<Vec<DirEntry>, String> {
+    let dir = Path::new(&path);
+    let max_depth = max_depth.unwrap_or(6);
+    let limit = limit.unwrap_or(20);
+    let query_lower = query.to_lowercase();
+
+    if !dir.exists() || !dir.is_dir() {
+        return Err(format!("Invalid directory: {path}"));
+    }
+
+    let mut results = Vec::new();
+    let collect_limit = limit * 3;
+
+    let home_dir = dirs::home_dir();
+    let is_home = home_dir.as_ref().is_some_and(|h| h == dir);
+
+    if is_home {
+        for dev_folder in DEV_FOLDERS {
+            let dev_path = dir.join(dev_folder);
+            if dev_path.exists() && dev_path.is_dir() {
+                search_repos_recursive(
+                    &dev_path,
+                    &query_lower,
+                    0,
+                    max_depth,
+                    &mut results,
+                    collect_limit,
+                );
+                if results.len() >= collect_limit {
+                    break;
+                }
+            }
+        }
+    } else {
+        search_repos_recursive(dir, &query_lower, 0, max_depth, &mut results, collect_limit);
+    }
+
+    results.sort_by(|a, b| {
+        let a_exact = a.name.to_lowercase() == query_lower;
+        let b_exact = b.name.to_lowercase() == query_lower;
+        if a_exact != b_exact {
+            return b_exact.cmp(&a_exact);
+        }
+        let a_depth = a.path.matches('/').count();
+        let b_depth = b.path.matches('/').count();
+        a_depth.cmp(&b_depth)
+    });
+    results.truncate(limit);
+
+    Ok(results)
+}
+
+fn search_repos_recursive(
+    dir: &Path,
+    query: &str,
+    depth: u32,
+    max_depth: u32,
+    results: &mut Vec<DirEntry>,
+    limit: usize,
+) -> bool {
+    if depth > max_depth || results.len() >= limit {
+        return results.len() >= limit;
+    }
+
+    let entries = match std::fs::read_dir(dir) {
+        Ok(e) => e,
+        Err(_) => return false,
+    };
+
+    for entry in entries.flatten() {
+        let name = entry.file_name().to_string_lossy().to_string();
+        if name.starts_with('.') {
+            continue;
+        }
+        if SKIP_FOLDERS.contains(&name.as_str()) {
+            continue;
+        }
+
+        let entry_path = entry.path();
+        if !entry_path.is_dir() {
+            continue;
+        }
+
+        let is_repo = entry_path.join(".git").exists();
+
+        if is_repo {
+            let name_lower = name.to_lowercase();
+            if query.is_empty() || name_lower.starts_with(query) || name_lower.contains(query) {
+                results.push(DirEntry {
+                    name: name.clone(),
+                    path: entry_path.to_string_lossy().to_string(),
+                    is_dir: true,
+                    is_repo: true,
+                });
+                if results.len() >= limit {
+                    return true;
+                }
+            }
+        } else if search_repos_recursive(&entry_path, query, depth + 1, max_depth, results, limit) {
+            return true;
+        }
+    }
+
+    false
+}
+
+/// Get the user's home directory.
 #[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! Welcome to Staged.", name)
+fn get_home_dir() -> Result<String, String> {
+    dirs::home_dir()
+        .map(|p| p.to_string_lossy().to_string())
+        .ok_or_else(|| "Could not determine home directory".to_string())
+}
+
+// =============================================================================
+// Commands: Recent repos (Spotlight)
+// =============================================================================
+
+/// Directories to scan for recent activity.
+const SCAN_DIRS: &[&str] = &[
+    "Documents",
+    "Downloads",
+    "Desktop",
+    "Development",
+    "dev",
+    "projects",
+    "code",
+    "repos",
+    "src",
+    "workspace",
+    "work",
+    "github",
+    "gitlab",
+];
+
+/// Paths to exclude from results.
+const EXCLUDE_PATTERNS: &[&str] = &[
+    "node_modules",
+    "/target/",
+    "/.git/",
+    "/.cargo/",
+    "/.rustup/",
+    "/Library/",
+    "/.Trash/",
+    "/__pycache__/",
+    "/venv/",
+    "/.venv/",
+];
+
+#[tauri::command(rename_all = "camelCase")]
+fn find_recent_repos(hours_ago: Option<u32>, limit: Option<usize>) -> Vec<RecentRepo> {
+    let hours_ago = hours_ago.unwrap_or(24);
+    let limit = limit.unwrap_or(10);
+
+    let home = match dirs::home_dir() {
+        Some(h) => h,
+        None => return Vec::new(),
+    };
+
+    let scan_dirs: Vec<PathBuf> = SCAN_DIRS
+        .iter()
+        .map(|d| home.join(d))
+        .filter(|p| p.exists())
+        .collect();
+
+    if scan_dirs.is_empty() {
+        return Vec::new();
+    }
+
+    let files = match find_recent_files_mdfind(&scan_dirs, hours_ago) {
+        Some(f) => f,
+        None => return Vec::new(),
+    };
+
+    let mut seen_repos: HashSet<PathBuf> = HashSet::new();
+    let mut repos: Vec<RecentRepo> = Vec::new();
+
+    for file in files {
+        if EXCLUDE_PATTERNS.iter().any(|p| file.contains(p)) {
+            continue;
+        }
+
+        if let Some(repo_path) = find_git_root(Path::new(&file), &home) {
+            if seen_repos.insert(repo_path.clone()) {
+                let name = repo_path
+                    .file_name()
+                    .map(|n| n.to_string_lossy().to_string())
+                    .unwrap_or_else(|| "Repository".to_string());
+
+                repos.push(RecentRepo {
+                    name,
+                    path: repo_path.to_string_lossy().to_string(),
+                });
+
+                if repos.len() >= limit {
+                    break;
+                }
+            }
+        }
+    }
+
+    repos
 }
 
+fn find_recent_files_mdfind(scan_dirs: &[PathBuf], hours_ago: u32) -> Option<Vec<String>> {
+    let seconds = hours_ago * 3600;
+
+    let mut args: Vec<String> = Vec::new();
+    for dir in scan_dirs {
+        args.push("-onlyin".to_string());
+        args.push(dir.to_string_lossy().to_string());
+    }
+
+    args.push(format!(
+        "kMDItemFSContentChangeDate >= $time.now(-{seconds})"
+    ));
+
+    let output = Command::new("mdfind").args(&args).output().ok()?;
+
+    if !output.status.success() {
+        return None;
+    }
+
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let files: Vec<String> = stdout
+        .lines()
+        .filter(|s| !s.is_empty())
+        .map(|s| s.to_string())
+        .collect();
+
+    Some(files)
+}
+
+fn find_git_root(path: &Path, home: &Path) -> Option<PathBuf> {
+    let mut current = if path.is_file() {
+        path.parent()?.to_path_buf()
+    } else {
+        path.to_path_buf()
+    };
+
+    while current.starts_with(home) && current != *home {
+        if current.join(".git").exists() {
+            return Some(current);
+        }
+        current = current.parent()?.to_path_buf();
+    }
+
+    None
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+fn run_git(repo: &Path, args: &[&str]) -> Result<String, String> {
+    let output = std::process::Command::new("git")
+        .args(["-C", &repo.display().to_string()])
+        .args(args)
+        .output()
+        .map_err(|e| e.to_string())?;
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        return Err(stderr.into_owned());
+    }
+
+    String::from_utf8(output.stdout).map_err(|e| e.to_string())
+}
+
+fn resolve_repo_path() -> PathBuf {
+    let args: Vec<String> = std::env::args().collect();
+    let mut iter = args.iter().skip(1);
+
+    while let Some(arg) = iter.next() {
+        match arg.as_str() {
+            "--commit" | "-c" => {
+                iter.next();
+            }
+            s if s.starts_with('-') => {}
+            path => {
+                let p = PathBuf::from(path);
+                if p.exists() {
+                    return std::fs::canonicalize(&p).unwrap_or(p);
+                }
+            }
+        }
+    }
+
+    std::env::current_dir().unwrap_or_else(|_| PathBuf::from("."))
+}
+
+// =============================================================================
+// App entry point
+// =============================================================================
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
+    let repo_path = resolve_repo_path();
+
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![greet])
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_store::Builder::default().build())
+        .manage(Mutex::new(AppState { repo_path }))
+        .invoke_handler(tauri::generate_handler![
+            get_repo_info,
+            list_recent_commits,
+            list_diff_files,
+            get_file_diff,
+            get_file_at_ref,
+            get_launch_args,
+            set_repo_path,
+            list_directory,
+            search_directories,
+            get_home_dir,
+            find_recent_repos,
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
diff --git a/apps/staged/src-tauri/tauri.conf.json b/apps/staged/src-tauri/tauri.conf.json
index b0247abe..981f2941 100644
--- a/apps/staged/src-tauri/tauri.conf.json
+++ b/apps/staged/src-tauri/tauri.conf.json
@@ -12,9 +12,13 @@
   "app": {
     "windows": [
       {
-        "title": "Staged — Diff Viewer",
-        "width": 1200,
-        "height": 800
+        "title": "Staged",
+        "width": 1400,
+        "height": 900,
+        "minWidth": 900,
+        "minHeight": 600,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true
       }
     ],
     "security": {
diff --git a/apps/staged/src/App.svelte b/apps/staged/src/App.svelte
index 7754f586..4d245322 100644
--- a/apps/staged/src/App.svelte
+++ b/apps/staged/src/App.svelte
@@ -1,26 +1,1378 @@
-<main>
-  <h1>Staged</h1>
-  <p>Diff Viewer — placeholder application.</p>
-</main>
+<!--
+  App.svelte — Single-page diff viewer for Staged.
+
+  Opens directly to the diff view with all controls in the titlebar:
+  - Left: traffic-light padding (macOS close/min/max buttons)
+  - Center: diff mode selector (All Changes / Branch / Commit dropdown)
+  - Right: theme picker, repo name + folder picker
+
+  No separate home page — the diff selection lives in the top bar.
+-->
+<script lang="ts">
+  import {
+    GitBranch,
+    FolderOpen,
+    ChevronDown,
+    FileEdit,
+    GitCommitHorizontal,
+    Palette,
+    ChevronRight,
+    Folder,
+    CirclePlus,
+    CircleMinus,
+    CircleArrowUp,
+    MessageSquare,
+    Copy,
+    Check,
+    Trash2,
+    ListChecks,
+  } from 'lucide-svelte';
+  import { DiffViewer } from '@builderbot/diff-viewer/components';
+  import {
+    buildFileEntries,
+    buildTree,
+    compactTree,
+    formatLineRange,
+    truncateText,
+    type FileEntry,
+    type TreeNode,
+  } from '@builderbot/diff-viewer/utils';
+  import type { FileDiff, FileDiffSummary, Comment, Span } from '@builderbot/diff-viewer/types';
+  import { getCurrentWindow } from '@tauri-apps/api/window';
+  import * as commands from './lib/commands';
+  import type { DiffSpec, RepoInfo, CommitInfo, RecentRepo } from './lib/commands';
+  import FolderPickerModal from './lib/FolderPickerModal.svelte';
+  import ThemePicker from './lib/ThemePicker.svelte';
+  import GitTreeAnimation from './lib/GitTreeAnimation.svelte';
+  import MarkIcon from './lib/MarkIcon.svelte';
+  import { initPreferences } from './lib/preferences.svelte';
+
+  // ==========================================================================
+  // State: App initialization
+  // ==========================================================================
+
+  let initialized = $state(false);
+
+  // ==========================================================================
+  // State: Repo info
+  // ==========================================================================
+
+  let repoInfo = $state<RepoInfo | null>(null);
+  let repoError = $state<string | null>(null);
+
+  // ==========================================================================
+  // State: Diff mode
+  // ==========================================================================
+
+  type DiffMode = 'all' | 'staged' | 'branch' | 'commit';
+
+  let diffMode = $state<DiffMode>('all');
+  let diffSpec = $state<DiffSpec>(commands.specUncommitted());
+  let diffLabel = $state('All Changes');
+
+  // Commit picker
+  let commits = $state<CommitInfo[]>([]);
+  let showCommitPicker = $state(false);
+  let loadingCommits = $state(false);
+  let selectedCommit = $state<CommitInfo | null>(null);
+
+  // ==========================================================================
+  // State: Diff viewer
+  // ==========================================================================
+
+  let files = $state<FileDiffSummary[]>([]);
+  let diffCache = $state(new Map<string, FileDiff>());
+  let selectedFile = $state<string | null>(null);
+  let loading = $state(true);
+  let loadingFile = $state<string | null>(null);
+  let error = $state<string | null>(null);
+
+  let localComments = $state<Comment[]>([]);
+  let copiedFeedback = $state(false);
+
+  let collapsedDirs = $state(new Set<string>());
+
+  let selectionGeneration = 0;
+
+  // ==========================================================================
+  // State: Modals
+  // ==========================================================================
+
+  let showFolderPicker = $state(false);
+  let showThemePicker = $state(false);
+  let suggestedRepos = $state<RecentRepo[]>([]);
+
+  // ==========================================================================
+  // Derived
+  // ==========================================================================
+
+  let currentDiff = $derived(selectedFile ? (diffCache.get(selectedFile) ?? null) : null);
+  let fileEntries = $derived(buildFileEntries(files, [], localComments));
+  let fileTree = $derived(compactTree(buildTree(fileEntries)));
+
+  let repoName = $derived(repoInfo ? repoInfo.path.split('/').pop() || repoInfo.path : '');
+
+  // ==========================================================================
+  // Initialization
+  // ==========================================================================
+
+  async function init() {
+    try {
+      await initPreferences();
+
+      // Pre-load suggested repos in background
+      commands
+        .findRecentRepos(24, 10)
+        .then((repos) => {
+          suggestedRepos = repos;
+        })
+        .catch(() => {});
+
+      // Check CLI launch args
+      const args = await commands.getLaunchArgs();
+      if (args.mode) {
+        switch (args.mode) {
+          case 'all':
+            setMode('all');
+            break;
+          case 'staged':
+            setMode('staged');
+            break;
+          case 'branch':
+            setMode('branch');
+            break;
+          case 'commit':
+            if (args.commit) {
+              selectCommitBySha(args.commit);
+            } else {
+              selectCommitBySha('HEAD');
+            }
+            break;
+          default:
+            setMode('all');
+        }
+      }
+
+      await loadRepoInfo();
+    } catch (e) {
+      console.error('Failed to initialize:', e);
+    } finally {
+      initialized = true;
+    }
+  }
+
+  init();
+
+  // ==========================================================================
+  // Repo info
+  // ==========================================================================
+
+  async function loadRepoInfo() {
+    repoError = null;
+    try {
+      repoInfo = await commands.getRepoInfo();
+      loadDiff();
+    } catch (e) {
+      repoError = e instanceof Error ? e.message : String(e);
+      loading = false;
+    }
+  }
+
+  // ==========================================================================
+  // Diff mode switching
+  // ==========================================================================
+
+  function setMode(mode: DiffMode, commit?: CommitInfo) {
+    showCommitPicker = false;
+    diffMode = mode;
+
+    switch (mode) {
+      case 'all':
+        diffSpec = commands.specUncommitted();
+        diffLabel = 'All Changes';
+        selectedCommit = null;
+        break;
+      case 'staged':
+        diffSpec = commands.specStaged();
+        diffLabel = 'Staged';
+        selectedCommit = null;
+        break;
+      case 'branch':
+        diffSpec = commands.specBranch();
+        diffLabel = repoInfo
+          ? `Branch vs ${repoInfo.defaultBranch.replace('origin/', '')}`
+          : 'Full Branch';
+        selectedCommit = null;
+        break;
+      case 'commit':
+        if (commit) {
+          diffSpec = commands.specCommit(commit.sha);
+          diffLabel = `Commit ${commit.shortSha}`;
+          selectedCommit = commit;
+        }
+        break;
+    }
+
+    files = [];
+    diffCache = new Map();
+    selectedFile = null;
+    localComments = [];
+    error = null;
+    loadDiff();
+  }
+
+  function selectCommitBySha(sha: string) {
+    diffMode = 'commit';
+    diffSpec = commands.specCommit(sha);
+    diffLabel = `Commit ${sha.slice(0, 7)}`;
+    selectedCommit = null;
+
+    files = [];
+    diffCache = new Map();
+    selectedFile = null;
+    localComments = [];
+    error = null;
+    loadDiff();
+  }
+
+  async function toggleCommitPicker() {
+    showCommitPicker = !showCommitPicker;
+    if (showCommitPicker && commits.length === 0) {
+      loadingCommits = true;
+      try {
+        commits = await commands.listRecentCommits(20);
+      } catch (e) {
+        console.error('Failed to load commits:', e);
+      } finally {
+        loadingCommits = false;
+      }
+    }
+  }
+
+  // ==========================================================================
+  // Load diff
+  // ==========================================================================
+
+  async function loadDiff() {
+    loading = true;
+    error = null;
+    try {
+      const response = await commands.listDiffFiles(diffSpec);
+      files = response.files;
+      if (files.length > 0) {
+        const firstPath = files[0].after ?? files[0].before ?? '';
+        await selectFile(firstPath);
+      }
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+      files = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function selectFile(path: string | null) {
+    const thisGeneration = ++selectionGeneration;
+    selectedFile = path;
+
+    if (path && !diffCache.has(path)) {
+      loadingFile = path;
+      try {
+        const diff = await commands.getFileDiff(diffSpec, path);
+        if (selectionGeneration !== thisGeneration) return;
+        const newCache = new Map(diffCache);
+        newCache.set(path, diff);
+        diffCache = newCache;
+      } catch (e) {
+        console.error(`Failed to load diff for ${path}:`, e);
+      } finally {
+        loadingFile = null;
+      }
+    }
+  }
+
+  // ==========================================================================
+  // Comment handling
+  // ==========================================================================
+
+  let nextCommentId = 0;
+
+  async function handleAddComment(path: string, span: Span, content: string): Promise<void> {
+    const comment: Comment = {
+      id: `local-${++nextCommentId}`,
+      path,
+      span,
+      content,
+      author: 'user',
+      commentType: null,
+      createdAt: Date.now(),
+    };
+    localComments = [...localComments, comment];
+  }
+
+  async function handleUpdateComment(commentId: string, content: string): Promise<void> {
+    localComments = localComments.map((c) => (c.id === commentId ? { ...c, content } : c));
+  }
+
+  async function handleDeleteComment(commentId: string): Promise<void> {
+    localComments = localComments.filter((c) => c.id !== commentId);
+  }
+
+  async function handleCopyComments() {
+    if (!localComments.length) return;
+    const lines: string[] = [];
+    for (const c of localComments) {
+      lines.push(`**${c.path}** ${formatLineRange(c.span)}`);
+      lines.push(c.content);
+      lines.push('');
+    }
+    try {
+      await navigator.clipboard.writeText(lines.join('\n'));
+      copiedFeedback = true;
+      setTimeout(() => (copiedFeedback = false), 1500);
+    } catch (e) {
+      console.error('Failed to copy:', e);
+    }
+  }
+
+  // ==========================================================================
+  // Sidebar helpers
+  // ==========================================================================
+
+  function handleSelectFile(file: FileEntry) {
+    selectFile(file.path);
+  }
+
+  function toggleDir(path: string) {
+    const newSet = new Set(collapsedDirs);
+    if (newSet.has(path)) newSet.delete(path);
+    else newSet.add(path);
+    collapsedDirs = newSet;
+  }
+
+  function isCollapsed(path: string): boolean {
+    return collapsedDirs.has(path);
+  }
+
+  // ==========================================================================
+  // Folder picker
+  // ==========================================================================
+
+  async function handleFolderSelect(path: string) {
+    showFolderPicker = false;
+    try {
+      await commands.setRepoPath(path);
+      repoInfo = null;
+      commits = [];
+      showCommitPicker = false;
+      selectedCommit = null;
+      diffMode = 'all';
+      diffSpec = commands.specUncommitted();
+      diffLabel = 'All Changes';
+      files = [];
+      diffCache = new Map();
+      selectedFile = null;
+      localComments = [];
+      error = null;
+      await loadRepoInfo();
+    } catch (e) {
+      console.error('Failed to open repo:', e);
+    }
+  }
+
+  // ==========================================================================
+  // Helpers
+  // ==========================================================================
+
+  function startDrag(e: PointerEvent) {
+    if (e.button !== 0) return;
+    const target = e.target as HTMLElement;
+    const isInteractive = target.closest('button, a, input, [role="button"]');
+    if (!isInteractive) {
+      e.preventDefault();
+      getCurrentWindow().startDragging();
+    }
+  }
+
+  function timeAgo(timestamp: number): string {
+    const now = Date.now() / 1000;
+    const diff = now - timestamp;
+    if (diff < 60) return 'just now';
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return `${Math.floor(diff / 86400)}d ago`;
+  }
+</script>
+
+{#if initialized}
+  <div class="app">
+    <!-- Titlebar -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="titlebar" onpointerdown={startDrag}>
+      <div class="titlebar-left"></div>
+
+      <div class="titlebar-center">
+        <div class="mode-segmented">
+          <button
+            class="mode-seg"
+            class:active={diffMode === 'all'}
+            onclick={() => setMode('all')}
+            title="All uncommitted changes"
+          >
+            <FileEdit size={12} />
+            <span>All</span>
+          </button>
+          <button
+            class="mode-seg"
+            class:active={diffMode === 'staged'}
+            onclick={() => setMode('staged')}
+            title="Staged changes only"
+          >
+            <ListChecks size={12} />
+            <span>Staged</span>
+          </button>
+          <button
+            class="mode-seg"
+            class:active={diffMode === 'branch'}
+            onclick={() => setMode('branch')}
+            title="Full branch diff"
+          >
+            <GitBranch size={12} />
+            <span>Branch</span>
+          </button>
+
+          <div class="commit-picker-wrap">
+            <button
+              class="mode-seg last"
+              class:active={diffMode === 'commit'}
+              onclick={toggleCommitPicker}
+              title="Pick a commit"
+            >
+              <GitCommitHorizontal size={12} />
+              <span>{selectedCommit ? selectedCommit.shortSha : 'Commit'}</span>
+              <ChevronDown size={11} class="chevron" />
+            </button>
+
+            {#if showCommitPicker}
+              <div class="commit-dropdown">
+                {#if loadingCommits}
+                  <div class="commit-loading">
+                    <span class="spinner small"></span>
+                    Loading commits...
+                  </div>
+                {:else if commits.length === 0}
+                  <div class="commit-empty">No commits found</div>
+                {:else}
+                  {#each commits as commit (commit.sha)}
+                    <button
+                      class="commit-row"
+                      class:active={selectedCommit?.sha === commit.sha}
+                      onclick={() => setMode('commit', commit)}
+                    >
+                      <span class="commit-sha">{commit.shortSha}</span>
+                      <span class="commit-message">{commit.message}</span>
+                      <span class="commit-time">{timeAgo(commit.timestamp)}</span>
+                    </button>
+                  {/each}
+                {/if}
+              </div>
+            {/if}
+          </div>
+        </div>
+
+        {#if files.length > 0}
+          <span class="file-count">{files.length} file{files.length === 1 ? '' : 's'}</span>
+        {/if}
+      </div>
+
+      <div class="titlebar-right">
+        {#if repoInfo}
+          <span class="repo-info">
+            <GitBranch size={12} />
+            <span class="branch-name">{repoInfo.branch}</span>
+          </span>
+          <button
+            class="repo-btn"
+            onclick={() => (showFolderPicker = true)}
+            title="Switch repository"
+          >
+            <FolderOpen size={13} />
+            <span>{repoName}</span>
+          </button>
+        {/if}
+        <button
+          class="theme-btn"
+          onclick={() => (showThemePicker = !showThemePicker)}
+          title="Change theme"
+        >
+          <Palette size={14} />
+        </button>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="body">
+      <div class="diff-viewer-container">
+        {#if loading}
+          <div class="center-message">
+            <span class="spinner"></span>
+            <span>Loading diff...</span>
+          </div>
+        {:else if error}
+          <div class="center-message error">
+            <span>{error}</span>
+          </div>
+        {:else if repoError}
+          <div class="center-message error">
+            <span>{repoError}</span>
+            <button class="open-btn" onclick={() => (showFolderPicker = true)}>
+              Open Repository...
+            </button>
+          </div>
+        {:else if files.length === 0}
+          <div class="empty-state">
+            <div class="empty-content">
+              <div class="empty-icon">
+                <MarkIcon size={52} />
+              </div>
+              <h2 class="empty-heading">No changes found</h2>
+              <p class="empty-hint">Choose a change set from the toolbar above</p>
+            </div>
+            <div class="empty-tree">
+              <GitTreeAnimation />
+            </div>
+          </div>
+        {:else}
+          <DiffViewer
+            diff={currentDiff}
+            comments={localComments.filter((c) => c.path === selectedFile)}
+            loading={loadingFile !== null}
+            beforeLabel="before"
+            afterLabel="after"
+            onAddComment={handleAddComment}
+            onUpdateComment={handleUpdateComment}
+            onDeleteComment={handleDeleteComment}
+          />
+        {/if}
+      </div>
+
+      {#if files.length > 0}
+        <div class="file-sidebar">
+          <div class="sidebar-content">
+            <div class="section-header">
+              <div class="section-left"></div>
+              <div class="section-divider">
+                <span class="divider-label">CHANGED</span>
+                <span class="count-capsule">{fileEntries.length}</span>
+              </div>
+              <div class="section-right"></div>
+            </div>
+            <ul class="tree-section">
+              {#snippet treeNodes(nodes: TreeNode[], depth: number)}
+                {#each nodes as node (node.path)}
+                  {#if node.isDir}
+                    <li class="tree-item-wrapper">
+                      <button
+                        class="tree-item dir-item"
+                        style="padding-left: {8 + depth * 12}px"
+                        onclick={() => toggleDir(node.path)}
+                      >
+                        <span class="dir-chevron">
+                          {#if isCollapsed(node.path)}
+                            <ChevronRight size={14} />
+                          {:else}
+                            <ChevronDown size={14} />
+                          {/if}
+                        </span>
+                        <span class="dir-icon"><Folder size={14} /></span>
+                        <span class="dir-name">{node.name}</span>
+                      </button>
+                      {#if !isCollapsed(node.path)}
+                        <ul class="tree-children">
+                          {@render treeNodes(node.children, depth + 1)}
+                        </ul>
+                      {/if}
+                    </li>
+                  {:else if node.file}
+                    <li class="tree-item-wrapper">
+                      <button
+                        class="tree-item file-item"
+                        class:selected={selectedFile === node.file.path}
+                        style="padding-left: {8 + depth * 12}px"
+                        onclick={() => handleSelectFile(node.file!)}
+                      >
+                        <span class="status-icon">
+                          {#if node.file.status === 'added'}
+                            <CirclePlus size={16} />
+                          {:else if node.file.status === 'deleted'}
+                            <CircleMinus size={16} />
+                          {:else}
+                            <CircleArrowUp size={16} />
+                          {/if}
+                        </span>
+                        <span class="file-name">{node.name}</span>
+                        {#if node.file.commentCount > 0}
+                          <span class="comment-indicator">
+                            <MessageSquare size={12} />
+                          </span>
+                        {/if}
+                      </button>
+                    </li>
+                  {/if}
+                {/each}
+              {/snippet}
+              {@render treeNodes(fileTree, 0)}
+            </ul>
+
+            {#if localComments.length > 0}
+              <div class="section-header">
+                <div class="section-left"></div>
+                <div class="section-divider">
+                  <span class="divider-label">COMMENTS</span>
+                  <span class="count-capsule">{localComments.length}</span>
+                </div>
+                <div class="section-right">
+                  <button
+                    class="copy-btn"
+                    class:copied={copiedFeedback}
+                    onclick={handleCopyComments}
+                    title="Copy all comments"
+                  >
+                    {#if copiedFeedback}
+                      <Check size={12} />
+                    {:else}
+                      <Copy size={12} />
+                    {/if}
+                  </button>
+                </div>
+              </div>
+              <ul class="tree-section comments-section">
+                {#each localComments as comment (comment.id)}
+                  <li class="tree-item-wrapper">
+                    <div class="comment-item-container">
+                      <button
+                        class="tree-item comment-item"
+                        onclick={() => selectFile(comment.path)}
+                      >
+                        <span class="comment-icon">
+                          <MessageSquare size={12} />
+                        </span>
+                        <span class="comment-details">
+                          <span class="comment-location">
+                            <span class="comment-file"
+                              >{comment.path.split('/').pop() || comment.path}</span
+                            >
+                            <span class="comment-line">{formatLineRange(comment.span)}</span>
+                          </span>
+                          <span class="comment-preview">{truncateText(comment.content)}</span>
+                        </span>
+                      </button>
+                      <button
+                        class="comment-delete-btn"
+                        onclick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteComment(comment.id);
+                        }}
+                        title="Delete comment"
+                      >
+                        <Trash2 size={12} />
+                      </button>
+                    </div>
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Modals -->
+  {#if showFolderPicker}
+    <FolderPickerModal
+      {suggestedRepos}
+      currentPath={repoInfo?.path}
+      onSelect={handleFolderSelect}
+      onClose={() => (showFolderPicker = false)}
+    />
+  {/if}
+
+  {#if showThemePicker}
+    <ThemePicker onClose={() => (showThemePicker = false)} />
+  {/if}
+{/if}
 
 <style>
-  main {
+  .app {
     display: flex;
     flex-direction: column;
+    height: 100vh;
+    background-color: var(--bg-chrome);
+  }
+
+  /* Titlebar */
+  .titlebar {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border-subtle);
+    padding: 0 8px;
+    gap: 8px;
+  }
+
+  .titlebar-left {
+    width: 72px;
+    flex-shrink: 0;
+  }
+
+  .titlebar-center {
+    flex: 1;
+    display: flex;
     align-items: center;
     justify-content: center;
-    height: 100vh;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    color: #e0e0e0;
-    background-color: #1a1a2e;
+    gap: 8px;
+  }
+
+  .titlebar-right {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  /* Segmented control */
+  .mode-segmented {
+    display: flex;
+    align-items: center;
+    background-color: var(--bg-deepest);
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    padding: 2px;
+    gap: 1px;
+  }
+
+  .mode-seg {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 10px;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    color: var(--text-faint);
+    cursor: pointer;
+    font-size: var(--size-xs);
+    font-family: inherit;
+    transition:
+      color 0.15s,
+      background-color 0.15s,
+      border-color 0.15s,
+      box-shadow 0.15s;
+    white-space: nowrap;
+  }
+
+  .mode-seg:hover {
+    color: var(--text-muted);
+  }
+
+  .mode-seg.active {
+    color: var(--text-primary);
+    background-color: var(--bg-elevated);
+    border-color: var(--border-muted);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  .mode-seg :global(.chevron) {
+    color: var(--text-faint);
+    margin-left: -2px;
+  }
+
+  .file-count {
+    color: var(--text-faint);
+    font-size: var(--size-xs);
+  }
+
+  /* Commit picker */
+  .commit-picker-wrap {
+    position: relative;
+    display: flex;
+  }
+
+  .commit-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 400px;
+    max-height: 320px;
+    overflow-y: auto;
+    background: var(--bg-chrome);
+    border: 1px solid var(--border-muted);
+    border-radius: 8px;
+    box-shadow: var(--shadow-elevated);
+    z-index: 100;
+  }
+
+  .commit-loading,
+  .commit-empty {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px;
+    color: var(--text-muted);
+    font-size: var(--size-sm);
+  }
+
+  .commit-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 8px 12px;
+    background: none;
+    border: none;
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--size-sm);
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.1s;
+  }
+
+  .commit-row:last-child {
+    border-bottom: none;
+  }
+
+  .commit-row:hover {
+    background-color: var(--bg-hover);
+  }
+
+  .commit-row.active {
+    background-color: var(--ui-selection);
+  }
+
+  .commit-sha {
+    flex-shrink: 0;
+    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
+    font-size: calc(var(--size-xs) - 1px);
+    color: var(--text-accent);
+    min-width: 60px;
+  }
+
+  .commit-message {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .commit-time {
+    flex-shrink: 0;
+    font-size: var(--size-xs);
+    color: var(--text-faint);
+  }
+
+  /* Repo info */
+  .repo-info {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--text-muted);
+    font-size: var(--size-xs);
+  }
+
+  .branch-name {
+    color: var(--text-accent);
+  }
+
+  .repo-btn {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 8px;
+    background: none;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: var(--size-xs);
+    font-family: inherit;
+    transition:
+      color 0.1s,
+      background-color 0.1s;
+  }
+
+  .repo-btn:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-hover);
+  }
+
+  .theme-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-faint);
+    cursor: pointer;
+    transition:
+      color 0.1s,
+      background-color 0.1s;
+  }
+
+  .theme-btn:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-hover);
+  }
+
+  /* Body */
+  .body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .diff-viewer-container {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .center-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    height: 100%;
+    color: var(--text-muted);
+    font-size: var(--size-md);
+  }
+
+  .center-message.error {
+    color: var(--ui-danger);
+  }
+
+  /* Empty state */
+  .empty-state {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+    animation: empty-fade-in 0.4s ease both;
+  }
+
+  @keyframes empty-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .empty-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    z-index: 1;
+  }
+
+  .empty-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 104px;
+    height: 104px;
+    border-radius: 26px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-subtle);
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.2),
+      0 0 0 1px var(--border-subtle);
+  }
+
+  .empty-heading {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin: 0;
+    letter-spacing: -0.01em;
+  }
+
+  .empty-hint {
+    font-size: var(--size-sm);
+    color: var(--text-faint);
+    margin: 0;
+  }
+
+  .empty-tree {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  .empty-tree :global(.animation-wrapper) {
+    width: 100%;
+  }
+
+  .open-btn {
+    padding: 8px 16px;
+    background-color: var(--bg-elevated);
+    border: 1px solid var(--border-muted);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--size-md);
+    cursor: pointer;
+    transition:
+      background-color 0.1s,
+      border-color 0.1s;
+  }
+
+  .open-btn:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--border-emphasis);
+  }
+
+  /* Spinner */
+  .spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--border-muted);
+    border-top-color: var(--text-accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  .spinner.small {
+    width: 14px;
+    height: 14px;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* File sidebar */
+  .file-sidebar {
+    width: 240px;
+    flex-shrink: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .sidebar-content {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .section-header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    margin: 16px 12px 8px;
+    gap: 6px;
+  }
+
+  .section-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .section-left::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border-muted);
+  }
+
+  .section-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+  }
+
+  .section-right::before {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border-muted);
+  }
+
+  .section-divider {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .divider-label {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+  }
+
+  .count-capsule {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 14px;
+    padding: 0 4px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    border-radius: 7px;
+    font-size: 9px;
+    font-weight: 600;
+  }
+
+  .tree-section {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .tree-children {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .tree-item-wrapper {
+    margin: 0;
+    padding: 0;
+  }
+
+  .tree-item {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 8px);
+    padding: 3px 8px;
+    font-size: var(--size-md);
+    gap: 4px;
+    cursor: pointer;
+    position: relative;
+    border-radius: 6px;
+    margin: 0 4px;
+    background: none;
+    border: none;
+    text-align: left;
+    color: inherit;
+    font-family: inherit;
+    transition:
+      background-color 0.1s,
+      box-shadow 0.1s;
+  }
+
+  .tree-item:hover {
+    background-color: var(--bg-hover);
+  }
+
+  .tree-item.selected {
+    background-color: var(--bg-primary);
+    box-shadow: inset 2px 0 0 var(--accent-primary);
+  }
+
+  .tree-item.selected .file-name {
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .dir-item {
+    color: var(--text-muted);
+  }
+
+  .dir-chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 14px;
+  }
+
+  .dir-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--text-muted);
+  }
+
+  .dir-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-item {
+    gap: 6px;
+  }
+
+  .file-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    color: var(--text-primary);
+  }
+
+  .status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--text-muted);
+  }
+
+  .comment-indicator {
+    display: flex;
+    align-items: center;
+    color: var(--text-muted);
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: 4px;
+  }
+
+  .comments-section {
+    margin-bottom: 8px;
+  }
+
+  .comment-item-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .comment-item {
+    position: relative;
+    flex-direction: column;
+    align-items: flex-start !important;
+    gap: 2px !important;
+    padding-top: 6px !important;
+    padding-bottom: 6px !important;
+    padding-left: 28px !important;
+    width: 100%;
+  }
+
+  .comment-icon {
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    color: var(--text-faint);
+  }
+
+  .comment-details {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+    min-width: 0;
+    padding-right: 32px;
+  }
+
+  .comment-location {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--size-xs);
+  }
+
+  .comment-file {
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .comment-line {
+    flex-shrink: 0;
+    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-size: calc(var(--size-xs) - 1px);
+    color: var(--text-faint);
+  }
+
+  .comment-preview {
+    font-size: calc(var(--size-xs) - 1px);
+    color: var(--text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .comment-delete-btn {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    color: var(--text-faint);
+    cursor: pointer;
+    opacity: 0;
+    transition:
+      opacity 0.1s,
+      color 0.1s;
+    z-index: 1;
+  }
+
+  .comment-item-container:hover .comment-delete-btn {
+    opacity: 1;
+  }
+
+  .comment-delete-btn:hover {
+    color: var(--status-deleted);
+  }
+
+  .copy-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    background: none;
+    border: none;
+    border-radius: 3px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition:
+      background-color 0.1s,
+      color 0.1s;
   }
 
-  h1 {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
+  .copy-btn:hover {
+    background-color: var(--bg-hover);
+    color: var(--text-primary);
   }
 
-  p {
-    opacity: 0.7;
+  .copy-btn.copied {
+    color: var(--status-added);
   }
 </style>
diff --git a/apps/staged/src/app.css b/apps/staged/src/app.css
index 19fc4a69..927517b0 100644
--- a/apps/staged/src/app.css
+++ b/apps/staged/src/app.css
@@ -1,10 +1,103 @@
+* {
+  box-sizing: border-box;
+}
+
 :root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  color: #e0e0e0;
-  background-color: #1a1a2e;
+  --bg-primary: #27212e;
+  --bg-chrome: #18151d;
+  --bg-deepest: #020203;
+  --bg-elevated: #38333f;
+  --bg-hover: #342e3b;
+
+  --border-subtle: #38333f;
+  --border-muted: #47424d;
+  --border-emphasis: #5d5962;
+
+  --text-primary: #ffffff;
+  --text-muted: #91889b;
+  --text-faint: #5c5565;
+  --text-accent: #58a6ff;
+
+  --status-modified: #d29922;
+  --status-added: #3fb950;
+  --status-deleted: #f85149;
+  --status-renamed: #58a6ff;
+  --status-untracked: #91889b;
+
+  --diff-added-bg: rgba(63, 185, 80, 0.08);
+  --diff-removed-bg: rgba(248, 81, 73, 0.08);
+  --diff-changed-bg: rgba(255, 255, 255, 0.04);
+  --diff-range-border: #524d58;
+  --diff-comment-highlight: rgba(88, 166, 255, 0.5);
+
+  --search-match-bg: rgba(250, 200, 50, 0.35);
+  --search-current-match-bg: rgba(255, 150, 50, 0.5);
+
+  --annotation-overlay-bg: rgba(0, 0, 0, 0.5);
+  --annotation-border: rgba(255, 255, 255, 0.1);
+
+  --ui-accent: #3fb950;
+  --ui-accent-hover: #2ea043;
+  --ui-success: #3fb950;
+  --ui-danger: #f85149;
+  --ui-danger-bg: rgba(248, 81, 73, 0.1);
+  --ui-selection: rgba(255, 255, 255, 0.08);
+
+  --scrollbar-thumb: #47424d;
+  --scrollbar-thumb-hover: #5d5962;
+  --scrollbar-thumb-transparent: rgba(255, 255, 255, 0.15);
+  --scrollbar-thumb-hover-transparent: rgba(255, 255, 255, 0.25);
+
+  --shadow-overlay: rgba(0, 0, 0, 0.6);
+  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+  --size-base: 13px;
+  --size-xs: calc(var(--size-base) * 0.846);
+  --size-sm: calc(var(--size-base) * 0.923);
+  --size-md: var(--size-base);
+  --size-lg: calc(var(--size-base) * 1.077);
+  --size-xl: calc(var(--size-base) * 1.231);
+
+  --accent-primary: #58a6ff;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  font-size: var(--size-md);
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
   margin: 0;
   padding: 0;
+  min-height: 100vh;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
 }
diff --git a/apps/staged/src/lib/FolderPickerModal.svelte b/apps/staged/src/lib/FolderPickerModal.svelte
new file mode 100644
index 00000000..3d061f86
--- /dev/null
+++ b/apps/staged/src/lib/FolderPickerModal.svelte
@@ -0,0 +1,734 @@
+<!--
+  FolderPickerModal — Spotlight-style folder picker for opening repositories.
+
+  - Type to search for git repos recursively
+  - Browse filesystem with breadcrumbs
+  - Recently active repos via macOS Spotlight
+  - Full keyboard navigation
+-->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Folder, X, ChevronRight, Home, GitBranch, Search, Loader2 } from 'lucide-svelte';
+  import * as commands from './commands';
+  import type { DirEntry, RecentRepo } from './commands';
+
+  interface Props {
+    suggestedRepos?: RecentRepo[];
+    onSelect: (path: string) => void;
+    onClose: () => void;
+    currentPath?: string | null;
+  }
+
+  let {
+    suggestedRepos: suggestedReposProp = [],
+    onSelect,
+    onClose,
+    currentPath = null,
+  }: Props = $props();
+
+  let query = $state('');
+  let currentDir = $state('');
+  let entries = $state<DirEntry[]>([]);
+  let searchResults = $state<DirEntry[]>([]);
+  let loading = $state(false);
+  let searching = $state(false);
+  let error = $state<string | null>(null);
+  let homeDir = $state('');
+  let selectedIndex = $state(0);
+  let inputEl: HTMLInputElement | null = $state(null);
+  let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  let isSearching = $derived(query.length > 0);
+
+  let suggestedRepos = $derived(suggestedReposProp);
+
+  onMount(() => {
+    commands.getHomeDir().then((dir) => {
+      homeDir = dir;
+      currentDir = dir;
+    });
+  });
+
+  $effect(() => {
+    if (inputEl) {
+      inputEl.focus();
+    }
+  });
+
+  $effect(() => {
+    if (currentDir && !isSearching) {
+      loadDirectory(currentDir);
+    }
+  });
+
+  $effect(() => {
+    if (searchTimeout) {
+      clearTimeout(searchTimeout);
+    }
+
+    if (!query || query.length < 2) {
+      searchResults = [];
+      searching = false;
+      return;
+    }
+
+    searching = true;
+
+    searchTimeout = setTimeout(async () => {
+      try {
+        const depth = currentDir === homeDir ? 4 : 3;
+        const results = await commands.searchDirectories(currentDir, query, depth, 20);
+        searchResults = results;
+        selectedIndex = 0;
+      } catch (e) {
+        console.error('Search failed:', e);
+        searchResults = [];
+      } finally {
+        searching = false;
+      }
+    }, 150);
+  });
+
+  $effect(() => {
+    if (!isSearching) {
+      const _ = entries;
+      selectedIndex = 0;
+    }
+  });
+
+  async function loadDirectory(path: string) {
+    loading = true;
+    error = null;
+    try {
+      const allEntries = await commands.listDirectory(path);
+      entries = allEntries.filter((e) => e.isDir);
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+      entries = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  let filteredSuggested = $derived.by(() => {
+    if (!query) return suggestedRepos.slice(0, 5);
+    const q = query.toLowerCase();
+    return suggestedRepos
+      .filter((r) => r.name.toLowerCase().includes(q) || r.path.toLowerCase().includes(q))
+      .slice(0, 5);
+  });
+
+  let allItems = $derived.by(() => {
+    if (isSearching) {
+      return [
+        ...filteredSuggested.map((r) => ({ type: 'suggested' as const, ...r })),
+        ...searchResults.map((e) => ({ type: 'search' as const, ...e })),
+      ];
+    } else {
+      const showSpecial = currentDir === homeDir;
+      return [
+        ...(showSpecial
+          ? filteredSuggested.map((r) => ({ type: 'suggested' as const, ...r }))
+          : []),
+        ...entries.map((e) => ({ type: 'entry' as const, ...e })),
+      ];
+    }
+  });
+
+  let firstNonSuggestedIndex = $derived(
+    isSearching ? filteredSuggested.length : currentDir === homeDir ? filteredSuggested.length : 0
+  );
+
+  function navigateTo(path: string) {
+    query = '';
+    currentDir = path;
+  }
+
+  function navigateUp() {
+    if (currentDir === '/') return;
+    const parent = currentDir.split('/').slice(0, -1).join('/') || '/';
+    navigateTo(parent);
+  }
+
+  function navigateHome() {
+    if (homeDir) {
+      navigateTo(homeDir);
+    }
+  }
+
+  function selectCurrent() {
+    onSelect(currentDir);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      if (query) {
+        query = '';
+        event.preventDefault();
+      } else {
+        onClose();
+        event.preventDefault();
+      }
+    } else if (event.key === 'Enter') {
+      const item = allItems[selectedIndex];
+      if (item) {
+        if (item.type === 'suggested' || item.type === 'search') {
+          if (item.path !== currentPath) {
+            onSelect(item.path);
+          }
+        } else if (item.type === 'entry') {
+          if (item.isRepo) {
+            onSelect(item.path);
+          } else {
+            navigateTo(item.path);
+          }
+        }
+      }
+      event.preventDefault();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, allItems.length - 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+    } else if (event.key === 'ArrowLeft' && !isSearching) {
+      event.preventDefault();
+      navigateUp();
+    } else if (event.key === 'ArrowRight' || event.key === 'Tab') {
+      const item = allItems[selectedIndex];
+      if (item && item.type !== 'suggested') {
+        event.preventDefault();
+        navigateTo(item.path);
+      } else if (event.key === 'Tab') {
+        event.preventDefault();
+      }
+    } else if (event.key === 'Backspace' && !query && !isSearching) {
+      event.preventDefault();
+      navigateUp();
+    }
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  }
+
+  function highlightMatch(text: string, q: string): string {
+    if (!q) return escapeHtml(text);
+    const textLower = text.toLowerCase();
+    const queryLower = q.toLowerCase();
+    const idx = textLower.indexOf(queryLower);
+    if (idx === -1) return escapeHtml(text);
+    const before = escapeHtml(text.slice(0, idx));
+    const match = escapeHtml(text.slice(idx, idx + q.length));
+    const after = escapeHtml(text.slice(idx + q.length));
+    return `${before}<mark>${match}</mark>${after}`;
+  }
+
+  function escapeHtml(str: string): string {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function formatPath(path: string): string {
+    if (homeDir && path.startsWith(homeDir)) {
+      return '~' + path.slice(homeDir.length);
+    }
+    return path;
+  }
+
+  function getBreadcrumbs(path: string): { name: string; path: string }[] {
+    const parts = path.split('/').filter(Boolean);
+    const crumbs: { name: string; path: string }[] = [];
+    let currentPath = '';
+    for (const part of parts) {
+      currentPath += '/' + part;
+      crumbs.push({ name: part, path: currentPath });
+    }
+    return crumbs;
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="modal-backdrop"
+  role="dialog"
+  aria-modal="true"
+  tabindex="-1"
+  onclick={handleBackdropClick}
+  onkeydown={(e) => e.key === 'Escape' && onClose()}
+>
+  <div class="modal">
+    <div class="header">
+      <div class="breadcrumbs">
+        <button class="breadcrumb home" onclick={navigateHome} title="Home (~)">
+          <Home size={14} />
+        </button>
+        {#each getBreadcrumbs(currentDir) as crumb, i}
+          <ChevronRight size={12} class="separator" />
+          <button
+            class="breadcrumb"
+            class:current={i === getBreadcrumbs(currentDir).length - 1}
+            onclick={() => navigateTo(crumb.path)}
+          >
+            {crumb.name}
+          </button>
+        {/each}
+      </div>
+      <button class="close-btn" onclick={onClose} title="Close (Esc)">
+        <X size={18} />
+      </button>
+    </div>
+
+    <div class="search-container">
+      <div class="search-icon">
+        {#if searching}
+          <Loader2 size={16} class="spinner" />
+        {:else}
+          <Search size={16} />
+        {/if}
+      </div>
+      <input
+        bind:this={inputEl}
+        type="text"
+        class="search-input"
+        placeholder="Search folders..."
+        bind:value={query}
+        autocomplete="off"
+        spellcheck="false"
+      />
+      {#if query}
+        <button class="clear-btn" onclick={() => (query = '')} title="Clear">
+          <X size={14} />
+        </button>
+      {/if}
+    </div>
+
+    <div class="results">
+      {#if loading && !isSearching}
+        <div class="empty-state">Loading...</div>
+      {:else if error && !isSearching}
+        <div class="empty-state error">{error}</div>
+      {:else}
+        {#if filteredSuggested.length > 0 && (isSearching || currentDir === homeDir)}
+          <div class="section-header">
+            <GitBranch size={12} />
+            <span>Suggested</span>
+          </div>
+          {#each filteredSuggested as repo, i (repo.path)}
+            {@const isCurrent = repo.path === currentPath}
+            {@const isSelected = i === selectedIndex}
+            <button
+              class="result suggested-result"
+              class:selected={isSelected}
+              class:current={isCurrent}
+              onclick={() => !isCurrent && onSelect(repo.path)}
+              disabled={isCurrent}
+              onmouseenter={() => (selectedIndex = i)}
+            >
+              <GitBranch size={16} class="suggested-icon" />
+              <div class="result-info">
+                <span class="result-name">{@html highlightMatch(repo.name, query)}</span>
+                <span class="result-path">{@html highlightMatch(formatPath(repo.path), query)}</span
+                >
+              </div>
+              {#if isCurrent}
+                <span class="badge">Current</span>
+              {:else}
+                <ChevronRight size={14} class="action-hint" />
+              {/if}
+            </button>
+          {/each}
+        {/if}
+
+        {#if isSearching}
+          {#if searchResults.length > 0}
+            <div class="section-header">
+              <Search size={12} />
+              <span>Folders</span>
+            </div>
+            {#each searchResults as entry, i (entry.path)}
+              {@const isSelected = i + firstNonSuggestedIndex === selectedIndex}
+              <button
+                class="result"
+                class:selected={isSelected}
+                onclick={() => onSelect(entry.path)}
+                onmouseenter={() => (selectedIndex = i + firstNonSuggestedIndex)}
+              >
+                <Folder size={16} />
+                <div class="result-info">
+                  <span class="result-name">{@html highlightMatch(entry.name, query)}</span>
+                  <span class="result-path"
+                    >{@html highlightMatch(formatPath(entry.path), query)}</span
+                  >
+                </div>
+                <ChevronRight size={14} class="action-hint" />
+              </button>
+            {/each}
+          {:else if !searching && filteredSuggested.length === 0}
+            <div class="empty-state">No matching folders</div>
+          {/if}
+        {:else if entries.length > 0}
+          {#if currentDir === homeDir && filteredSuggested.length > 0}
+            <div class="section-header">
+              <Folder size={12} />
+              <span>Folders</span>
+            </div>
+          {/if}
+          {#each entries as entry, i (entry.path)}
+            {@const isSelected = i + firstNonSuggestedIndex === selectedIndex}
+            <button
+              class="result"
+              class:selected={isSelected}
+              class:is-repo={entry.isRepo}
+              onclick={() => (entry.isRepo ? onSelect(entry.path) : navigateTo(entry.path))}
+              onmouseenter={() => (selectedIndex = i + firstNonSuggestedIndex)}
+            >
+              {#if entry.isRepo}
+                <GitBranch size={16} class="repo-icon" />
+              {:else}
+                <Folder size={16} />
+              {/if}
+              <span class="result-name">{entry.name}</span>
+              <ChevronRight size={14} class="action-hint" />
+            </button>
+          {/each}
+        {:else if !loading && filteredSuggested.length === 0}
+          <div class="empty-state">Empty directory</div>
+        {/if}
+      {/if}
+    </div>
+
+    <div class="footer">
+      <span class="hint">
+        <kbd>↑↓</kbd> navigate
+        <kbd>Enter</kbd> open
+        <kbd>Tab</kbd> drill in
+        <kbd>←</kbd> back
+      </span>
+      <button class="select-btn" onclick={selectCurrent}>
+        Open {formatPath(currentDir)}
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--shadow-overlay);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 12vh;
+    z-index: 1000;
+  }
+
+  .modal {
+    background: var(--bg-chrome);
+    border-radius: 12px;
+    box-shadow: var(--shadow-elevated);
+    width: 520px;
+    max-width: 90vw;
+    max-height: 65vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px 10px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .breadcrumbs {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .breadcrumbs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    padding: 4px 6px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    color: var(--text-muted);
+    font-size: var(--size-sm);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color 0.1s,
+      background-color 0.1s;
+  }
+
+  .breadcrumb:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-hover);
+  }
+
+  .breadcrumb.current {
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .breadcrumbs :global(.separator) {
+    color: var(--text-faint);
+    flex-shrink: 0;
+  }
+
+  .close-btn,
+  .clear-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition:
+      color 0.1s,
+      background-color 0.1s;
+  }
+
+  .close-btn:hover,
+  .clear-btn:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-hover);
+  }
+
+  .search-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+  }
+
+  :global(.spinner) {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .search-input {
+    flex: 1;
+    padding: 4px 0;
+    background: none;
+    border: none;
+    font-size: var(--size-base);
+    color: var(--text-primary);
+    outline: none;
+    font-family: inherit;
+  }
+
+  .search-input::placeholder {
+    color: var(--text-faint);
+  }
+
+  .results {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px 4px;
+    font-size: var(--size-xs);
+    color: var(--text-faint);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .empty-state {
+    padding: 24px 16px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: var(--size-sm);
+  }
+
+  .empty-state.error {
+    color: var(--ui-danger);
+  }
+
+  .result {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 8px 16px;
+    background: none;
+    border: none;
+    text-align: left;
+    color: var(--text-primary);
+    font-size: var(--size-sm);
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 0.1s;
+  }
+
+  .result:hover,
+  .result.selected {
+    background-color: var(--bg-hover);
+  }
+
+  .result.current {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .result :global(svg) {
+    flex-shrink: 0;
+    color: var(--text-muted);
+  }
+
+  .result.is-repo :global(.repo-icon) {
+    color: var(--text-accent);
+  }
+
+  .result.suggested-result :global(.suggested-icon) {
+    color: var(--text-accent);
+  }
+
+  .result-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  .result-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .result-name :global(mark) {
+    background: var(--bg-primary);
+    color: var(--text-accent);
+    border-radius: 2px;
+    padding: 0 1px;
+  }
+
+  .result-path {
+    font-size: var(--size-xs);
+    color: var(--text-muted);
+    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .result-path :global(mark) {
+    background: var(--bg-primary);
+    color: var(--text-accent);
+    border-radius: 2px;
+    padding: 0 1px;
+  }
+
+  .badge {
+    font-size: calc(var(--size-xs) - 1px);
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: var(--bg-elevated);
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .result :global(.action-hint) {
+    color: var(--text-faint);
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
+
+  .result:hover :global(.action-hint),
+  .result.selected :global(.action-hint) {
+    opacity: 1;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .hint {
+    font-size: var(--size-xs);
+    color: var(--text-faint);
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 0 2px;
+    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-size: calc(var(--size-xs) - 1px);
+    background: var(--bg-chrome);
+    border: 1px solid var(--border-subtle);
+    border-radius: 3px;
+  }
+
+  .select-btn {
+    padding: 6px 12px;
+    background: var(--ui-accent);
+    border: none;
+    border-radius: 6px;
+    color: var(--bg-primary);
+    font-size: var(--size-sm);
+    font-family: inherit;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.1s;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .select-btn:hover {
+    background: var(--ui-accent-hover);
+  }
+</style>
diff --git a/apps/staged/src/lib/GitTreeAnimation.svelte b/apps/staged/src/lib/GitTreeAnimation.svelte
new file mode 100644
index 00000000..0f44fa90
--- /dev/null
+++ b/apps/staged/src/lib/GitTreeAnimation.svelte
@@ -0,0 +1,554 @@
+<!--
+  GitTreeAnimation.svelte - Generative git tree animation
+
+  Shows a git tree growing organically one commit at a time,
+  scrolling left as it grows. Branches spawn from parent branches
+  and merge back to them, simulating idealized git behavior.
+
+  Adapted from Mark's shared GitTreeAnimation component.
+-->
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+
+  let canvas: HTMLCanvasElement | null = $state(null);
+  let animationId: number | null = null;
+
+  const CONFIG = {
+    commitInterval: 600,
+    circleRadius: 6,
+    lineWidth: 2,
+    laneSpacing: 28,
+    commitSpacing: 44,
+    maxDepth: 4,
+    branchProbability: 0.2,
+    branchUpProbability: 0.25,
+    minBranchLength: 2,
+    maxBranchLength: 6,
+    workOnBranchProbability: 0.6,
+    eventPulseDurationMs: 1600,
+    eventGlowRadius: 8,
+  };
+
+  const SCROLL_SPEED_PER_MS = CONFIG.commitSpacing / CONFIG.commitInterval;
+
+  let strokeColor = 'rgba(128, 128, 128, 0.6)';
+  let bgColor = '#1a1a1a';
+  let branchEventColor = '#60a5fa';
+  let mergeEventColor = '#22c55e';
+
+  type CommitEventType = 'normal' | 'branch' | 'merge';
+
+  interface Commit {
+    id: number;
+    lane: number;
+    x: number;
+    appearProgress: number;
+    eventType: CommitEventType;
+    eventPulse: number;
+    parentId: number | null;
+    mergeParentId: number | null;
+    mergeParentLane: number | null;
+    branchFromId: number | null;
+    branchFromLane: number | null;
+    frozenParentX?: number;
+    frozenMergeParentX?: number;
+    frozenBranchFromX?: number;
+  }
+
+  interface Branch {
+    lane: number;
+    active: boolean;
+    headCommitId: number | null;
+    commitCount: number;
+    parentBranchLane: number;
+    depth: number;
+  }
+
+  let commits: Commit[] = [];
+  let branches: Branch[] = [];
+  let nextCommitId = 0;
+  let nextCommitX = 0;
+  let scrollOffset = 0;
+  let lastCommitTime = 0;
+  let lastFrameTime = 0;
+  let scrolling = false;
+  let canvasWidth = 0;
+
+  function updateColors() {
+    if (typeof window === 'undefined') return;
+    const style = getComputedStyle(document.documentElement);
+    strokeColor = style.getPropertyValue('--text-muted').trim() || '#6b7280';
+    bgColor = style.getPropertyValue('--bg-chrome').trim() || '#1a1a1a';
+    branchEventColor =
+      style.getPropertyValue('--review-color').trim() ||
+      style.getPropertyValue('--branch-color').trim() ||
+      '#a78bfa';
+    mergeEventColor =
+      style.getPropertyValue('--commit-color').trim() ||
+      style.getPropertyValue('--review-color').trim() ||
+      '#3fb950';
+  }
+
+  function getActiveBranches(): Branch[] {
+    return branches.filter((b) => b.active);
+  }
+
+  function getBranchByLane(lane: number): Branch | undefined {
+    return branches.find((b) => b.lane === lane);
+  }
+
+  function getLaneY(lane: number, height: number): number {
+    const totalHeight = CONFIG.maxDepth * CONFIG.laneSpacing;
+    return (height - totalHeight) / 2 + lane * CONFIG.laneSpacing;
+  }
+
+  function getCommitById(id: number | null): Commit | undefined {
+    if (id === null) return undefined;
+    return commits.find((c) => c.id === id);
+  }
+
+  function findAvailableLane(parentLane: number): number | null {
+    const usedLanes = new Set(getActiveBranches().map((b) => b.lane));
+
+    const laneBelow = parentLane + 1;
+    if (laneBelow <= CONFIG.maxDepth && !usedLanes.has(laneBelow)) {
+      const laneAbove = parentLane - 1;
+      if (
+        laneAbove >= 0 &&
+        !usedLanes.has(laneAbove) &&
+        Math.random() < CONFIG.branchUpProbability
+      ) {
+        return laneAbove;
+      }
+      return laneBelow;
+    }
+
+    const laneAbove = parentLane - 1;
+    if (laneAbove >= 0 && !usedLanes.has(laneAbove)) return laneAbove;
+
+    return null;
+  }
+
+  function canBranchFrom(branch: Branch): boolean {
+    return (
+      !getActiveBranches().some((b) => b.parentBranchLane === branch.lane) &&
+      branch.depth < CONFIG.maxDepth
+    );
+  }
+
+  function canMerge(branch: Branch): boolean {
+    if (branch.depth === 0) return false;
+    return !getActiveBranches().some((b) => b.parentBranchLane === branch.lane);
+  }
+
+  function addCommit(
+    lane: number,
+    parentId: number | null,
+    opts: {
+      mergeParentId?: number | null;
+      branchFromId?: number | null;
+      branchFromLane?: number | null;
+      eventType?: CommitEventType;
+    } = {}
+  ): Commit {
+    let mergeParentLane: number | null = null;
+    if (opts.mergeParentId != null) {
+      const mp = getCommitById(opts.mergeParentId);
+      if (mp) mergeParentLane = mp.lane;
+    }
+
+    const commit: Commit = {
+      id: nextCommitId++,
+      lane,
+      x: nextCommitX,
+      appearProgress: 0,
+      eventType: opts.eventType ?? 'normal',
+      eventPulse: opts.eventType && opts.eventType !== 'normal' ? 1 : 0,
+      parentId,
+      mergeParentId: opts.mergeParentId ?? null,
+      mergeParentLane,
+      branchFromId: opts.branchFromId ?? null,
+      branchFromLane: opts.branchFromLane ?? null,
+    };
+    commits.push(commit);
+
+    const branch = getBranchByLane(lane);
+    if (branch) {
+      branch.headCommitId = commit.id;
+      branch.commitCount++;
+    }
+
+    return commit;
+  }
+
+  function createBranch(source: Branch): boolean {
+    const newLane = findAvailableLane(source.lane);
+    if (newLane === null || source.headCommitId === null) return false;
+
+    let branch = getBranchByLane(newLane);
+    if (!branch) {
+      branch = {
+        lane: newLane,
+        active: true,
+        headCommitId: null,
+        commitCount: 0,
+        parentBranchLane: source.lane,
+        depth: source.depth + 1,
+      };
+      branches.push(branch);
+    } else {
+      branch.active = true;
+      branch.commitCount = 0;
+      branch.parentBranchLane = source.lane;
+      branch.depth = source.depth + 1;
+    }
+
+    addCommit(newLane, null, {
+      branchFromId: source.headCommitId,
+      branchFromLane: source.lane,
+      eventType: 'branch',
+    });
+
+    return true;
+  }
+
+  function mergeBranch(branch: Branch): boolean {
+    const parent = getBranchByLane(branch.parentBranchLane);
+    if (!parent?.active || branch.headCommitId === null) return false;
+
+    addCommit(parent.lane, parent.headCommitId, {
+      mergeParentId: branch.headCommitId,
+      eventType: 'merge',
+    });
+
+    branch.active = false;
+    branch.headCommitId = null;
+    branch.commitCount = 0;
+    return true;
+  }
+
+  function generateNextCommit() {
+    const active = getActiveBranches();
+    const leaves = active.filter((b) => canMerge(b) || canBranchFrom(b));
+
+    for (const b of leaves) {
+      if (canMerge(b) && b.commitCount >= CONFIG.maxBranchLength) {
+        if (mergeBranch(b)) {
+          nextCommitX += CONFIG.commitSpacing;
+          return;
+        }
+      }
+    }
+
+    for (const b of leaves) {
+      if (canMerge(b) && b.commitCount >= CONFIG.minBranchLength) {
+        const t =
+          (b.commitCount - CONFIG.minBranchLength) /
+          (CONFIG.maxBranchLength - CONFIG.minBranchLength);
+        if (Math.random() < 0.15 + t * 0.4) {
+          if (mergeBranch(b)) {
+            nextCommitX += CONFIG.commitSpacing;
+            return;
+          }
+        }
+      }
+    }
+
+    const branchable = leaves.filter((b) => canBranchFrom(b));
+    if (branchable.length > 0 && Math.random() < CONFIG.branchProbability) {
+      const src = branchable[Math.floor(Math.random() * branchable.length)];
+      if (createBranch(src)) {
+        nextCommitX += CONFIG.commitSpacing;
+        return;
+      }
+    }
+
+    const weights = active.map((b) => 1 + b.depth * CONFIG.workOnBranchProbability);
+    const total = weights.reduce((a, b) => a + b, 0);
+    let r = Math.random() * total;
+    let target = active[0];
+    for (let i = 0; i < active.length; i++) {
+      r -= weights[i];
+      if (r <= 0) {
+        target = active[i];
+        break;
+      }
+    }
+
+    addCommit(target.lane, target.headCommitId);
+    nextCommitX += CONFIG.commitSpacing;
+  }
+
+  function pruneOldCommits() {
+    const cutoff = scrollOffset - CONFIG.circleRadius;
+
+    for (const c of commits) {
+      if (c.parentId !== null && c.frozenParentX === undefined) {
+        const p = getCommitById(c.parentId);
+        if (p && p.x <= cutoff) c.frozenParentX = p.x;
+      }
+      if (c.mergeParentId !== null && c.frozenMergeParentX === undefined) {
+        const mp = getCommitById(c.mergeParentId);
+        if (mp && mp.x <= cutoff) c.frozenMergeParentX = mp.x;
+      }
+      if (c.branchFromId !== null && c.frozenBranchFromX === undefined) {
+        const bf = getCommitById(c.branchFromId);
+        if (bf && bf.x <= cutoff) c.frozenBranchFromX = bf.x;
+      }
+    }
+
+    commits = commits.filter((c) => c.x > cutoff);
+  }
+
+  function drawCurve(
+    ctx: CanvasRenderingContext2D,
+    fromX: number,
+    fromY: number,
+    toX: number,
+    toY: number,
+    progress: number
+  ) {
+    if (progress <= 0) return;
+
+    ctx.beginPath();
+    ctx.moveTo(fromX, fromY);
+
+    if (fromY === toY) {
+      ctx.lineTo(fromX + (toX - fromX) * progress, toY);
+    } else {
+      const midX = fromX + (toX - fromX) / 2;
+      const endX = fromX + (toX - fromX) * progress;
+      const endY = fromY + (toY - fromY) * progress;
+      ctx.bezierCurveTo(midX, fromY, midX, endY, endX, endY);
+    }
+
+    ctx.stroke();
+  }
+
+  function drawConnection(
+    ctx: CanvasRenderingContext2D,
+    fromX: number,
+    fromY: number,
+    toX: number,
+    toY: number,
+    progress: number,
+    color: string,
+    alpha: number
+  ) {
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = alpha;
+    drawCurve(ctx, fromX, fromY, toX, toY, progress);
+  }
+
+  function draw(ctx: CanvasRenderingContext2D, width: number, height: number, dt: number) {
+    ctx.clearRect(0, 0, width, height);
+
+    for (const c of commits) {
+      if (c.appearProgress < 1) c.appearProgress = Math.min(1, c.appearProgress + 0.08);
+      if (c.eventPulse > 0) {
+        c.eventPulse = Math.max(0, c.eventPulse - dt / CONFIG.eventPulseDurationMs);
+      }
+    }
+
+    ctx.lineWidth = CONFIG.lineWidth;
+    ctx.lineCap = 'round';
+
+    for (const c of commits) {
+      const cx = c.x - scrollOffset;
+      const cy = getLaneY(c.lane, height);
+      if (cx > width + CONFIG.commitSpacing) continue;
+
+      const progress = Math.min(1, c.appearProgress / 0.7);
+
+      if (c.parentId !== null) {
+        const parent = getCommitById(c.parentId);
+        const px =
+          c.frozenParentX !== undefined
+            ? c.frozenParentX - scrollOffset
+            : parent
+              ? parent.x - scrollOffset
+              : -CONFIG.commitSpacing;
+        const py = parent ? getLaneY(parent.lane, height) : cy;
+        drawConnection(ctx, px, py, cx, cy, progress, strokeColor, 0.5);
+      }
+
+      if (c.mergeParentId !== null && c.mergeParentLane !== null) {
+        const mp = getCommitById(c.mergeParentId);
+        const mpx =
+          c.frozenMergeParentX !== undefined
+            ? c.frozenMergeParentX - scrollOffset
+            : mp
+              ? mp.x - scrollOffset
+              : -CONFIG.commitSpacing;
+        drawConnection(
+          ctx,
+          mpx,
+          getLaneY(c.mergeParentLane, height),
+          cx,
+          cy,
+          progress,
+          strokeColor,
+          0.5
+        );
+      }
+
+      if (c.branchFromId !== null && c.branchFromLane !== null) {
+        const bf = getCommitById(c.branchFromId);
+        const bfx =
+          c.frozenBranchFromX !== undefined
+            ? c.frozenBranchFromX - scrollOffset
+            : bf
+              ? bf.x - scrollOffset
+              : -CONFIG.commitSpacing;
+        drawConnection(
+          ctx,
+          bfx,
+          getLaneY(c.branchFromLane, height),
+          cx,
+          cy,
+          progress,
+          strokeColor,
+          0.5
+        );
+      }
+    }
+
+    ctx.lineWidth = CONFIG.lineWidth;
+
+    for (const c of commits) {
+      const sx = c.x - scrollOffset;
+      const sy = getLaneY(c.lane, height);
+      if (sx < -CONFIG.circleRadius || sx > width + CONFIG.circleRadius) continue;
+      if (c.appearProgress === 0) continue;
+
+      const radius = CONFIG.circleRadius * c.appearProgress;
+      const isBranchEvent = c.eventType === 'branch';
+      const isMergeEvent = c.eventType === 'merge';
+      const eventColor = isBranchEvent
+        ? branchEventColor
+        : isMergeEvent
+          ? mergeEventColor
+          : strokeColor;
+
+      if ((isBranchEvent || isMergeEvent) && c.eventPulse > 0) {
+        ctx.globalAlpha = c.eventPulse * 0.3;
+        ctx.fillStyle = eventColor;
+        ctx.beginPath();
+        ctx.arc(
+          sx,
+          sy,
+          radius + CONFIG.eventGlowRadius * c.eventPulse * c.appearProgress,
+          0,
+          Math.PI * 2
+        );
+        ctx.fill();
+      }
+
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = bgColor;
+      ctx.beginPath();
+      ctx.arc(sx, sy, radius, 0, Math.PI * 2);
+      ctx.fill();
+
+      const strokeAlpha = isBranchEvent || isMergeEvent ? c.appearProgress : c.appearProgress * 0.8;
+      ctx.globalAlpha = strokeAlpha;
+      ctx.strokeStyle = eventColor;
+      ctx.stroke();
+    }
+
+    ctx.globalAlpha = 1;
+  }
+
+  function startAnimation() {
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    commits = [];
+    branches = [
+      { lane: 0, active: true, headCommitId: null, commitCount: 0, parentBranchLane: -1, depth: 0 },
+    ];
+    nextCommitId = 0;
+    scrollOffset = 0;
+    scrolling = false;
+
+    nextCommitX = CONFIG.commitSpacing;
+    addCommit(0, null);
+    nextCommitX += CONFIG.commitSpacing;
+
+    lastCommitTime = performance.now();
+    lastFrameTime = performance.now();
+
+    function animate(now: number) {
+      if (!canvas || !ctx) return;
+
+      const dt = now - lastFrameTime;
+      lastFrameTime = now;
+
+      const dpr = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) {
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        canvasWidth = rect.width;
+      }
+
+      if (now - lastCommitTime > CONFIG.commitInterval) {
+        generateNextCommit();
+        lastCommitTime = now;
+      }
+
+      const rightmost = nextCommitX - CONFIG.commitSpacing;
+      const target = Math.max(0, rightmost - canvasWidth * 0.75);
+      if (target > 0) {
+        if (!scrolling) {
+          scrolling = true;
+          scrollOffset = target;
+        } else {
+          scrollOffset = Math.min(scrollOffset + SCROLL_SPEED_PER_MS * dt, target);
+        }
+      }
+
+      pruneOldCommits();
+      draw(ctx, rect.width, rect.height, dt);
+      animationId = requestAnimationFrame(animate);
+    }
+
+    animationId = requestAnimationFrame(animate);
+  }
+
+  onMount(() => {
+    updateColors();
+    startAnimation();
+
+    const observer = new MutationObserver(() => updateColors());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    });
+
+    return () => observer.disconnect();
+  });
+
+  onDestroy(() => {
+    if (animationId !== null) cancelAnimationFrame(animationId);
+  });
+</script>
+
+<div class="animation-wrapper">
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+  .animation-wrapper {
+    width: 100%;
+    height: 140px;
+    overflow: hidden;
+  }
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/apps/staged/src/lib/MarkIcon.svelte b/apps/staged/src/lib/MarkIcon.svelte
new file mode 100644
index 00000000..71c61269
--- /dev/null
+++ b/apps/staged/src/lib/MarkIcon.svelte
@@ -0,0 +1,45 @@
+<!--
+  MarkIcon.svelte - The Mark app icon as an inline SVG
+
+  Renders the rounded-rect icon with the branch path inside.
+  Uses currentColor for the path and a theme-derived background,
+  so it works across light and dark themes.
+
+  Props:
+    size - icon dimensions in px (default 32)
+-->
+<script lang="ts">
+  let { size = 32 }: { size?: number } = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 442 442"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+>
+  <g clip-path="url(#mark-icon-clip)">
+    <rect width="442" height="442" rx="143" class="icon-bg" />
+    <path
+      d="M144.621 257C177.415 257 204.001 283.585 204.001 316.38C204.001 349.174 177.415 375.759 144.621 375.759C122.332 375.759 102.911 363.478 92.7566 345.313C86.3324 333.822 75.7553 323.505 62.5901 323.505H-198.5C-202.09 323.505 -205 320.595 -205 317.005C-205 313.415 -202.09 310.505 -198.5 310.505H61.9577C75.3329 310.505 86.0125 299.871 92.3884 288.114C102.437 269.583 122.06 257 144.621 257Z"
+      class="icon-path"
+    />
+  </g>
+  <defs>
+    <clipPath id="mark-icon-clip">
+      <rect width="442" height="442" rx="143" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
+
+<style>
+  .icon-bg {
+    fill: var(--text-primary);
+  }
+
+  .icon-path {
+    fill: var(--bg-chrome);
+  }
+</style>
diff --git a/apps/staged/src/lib/ThemePicker.svelte b/apps/staged/src/lib/ThemePicker.svelte
new file mode 100644
index 00000000..6f7f2529
--- /dev/null
+++ b/apps/staged/src/lib/ThemePicker.svelte
@@ -0,0 +1,247 @@
+<!--
+  ThemePicker — Theme selector dropdown for the titlebar.
+
+  Reuses the same adaptive theme system as Mark. Shows all available
+  syntax themes with search, keyboard navigation, and light/dark indicators.
+-->
+<script lang="ts">
+  import { Search, Sun, Moon } from 'lucide-svelte';
+  import {
+    preferences,
+    getAvailableSyntaxThemes,
+    selectSyntaxTheme,
+    isLightTheme,
+  } from './preferences.svelte';
+
+  interface Props {
+    onClose: () => void;
+  }
+
+  let { onClose }: Props = $props();
+
+  let searchQuery = $state('');
+  let selectedIndex = $state(-1);
+  let searchInputRef = $state<HTMLInputElement | null>(null);
+  let dropdownRef = $state<HTMLDivElement | null>(null);
+  let themeListRef = $state<HTMLDivElement | null>(null);
+
+  $effect(() => {
+    searchInputRef?.focus();
+
+    if (themeListRef) {
+      const activeItem = themeListRef.querySelector('.theme-item.active');
+      activeItem?.scrollIntoView({ block: 'center' });
+    }
+  });
+
+  let filteredThemes = $derived.by(() => {
+    const themes = getAvailableSyntaxThemes();
+    if (!searchQuery.trim()) return themes;
+    const query = searchQuery.toLowerCase();
+    return themes.filter((t) => t.name.toLowerCase().includes(query));
+  });
+
+  $effect(() => {
+    const _ = filteredThemes;
+    selectedIndex = -1;
+  });
+
+  function handleThemeSelect(themeName: string) {
+    selectSyntaxTheme(themeName);
+    onClose();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      onClose();
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (event.key === 'Enter') {
+      if (
+        filteredThemes.length > 0 &&
+        selectedIndex >= 0 &&
+        selectedIndex < filteredThemes.length
+      ) {
+        handleThemeSelect(filteredThemes[selectedIndex].name);
+        event.preventDefault();
+      }
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, filteredThemes.length - 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (selectedIndex > 0) {
+        selectedIndex = selectedIndex - 1;
+      }
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (dropdownRef && !dropdownRef.contains(target) && !target.closest('.theme-btn')) {
+      onClose();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} onclick={handleClickOutside} />
+
+<div class="theme-dropdown" bind:this={dropdownRef}>
+  <div class="search-container">
+    <Search size={14} class="search-icon" />
+    <input
+      bind:this={searchInputRef}
+      type="text"
+      class="search-input"
+      placeholder="Search themes..."
+      bind:value={searchQuery}
+      autocomplete="off"
+      spellcheck="false"
+    />
+  </div>
+
+  <div class="theme-list" bind:this={themeListRef}>
+    {#each filteredThemes as theme, i (theme.name)}
+      <button
+        class="theme-item"
+        class:active={theme.name === preferences.syntaxTheme}
+        class:selected={i === selectedIndex}
+        onclick={() => handleThemeSelect(theme.name)}
+      >
+        <span class="theme-indicator">
+          {#if isLightTheme(theme.name)}
+            <Sun size={12} />
+          {:else}
+            <Moon size={12} />
+          {/if}
+        </span>
+        <span class="theme-name">{theme.name}</span>
+      </button>
+    {:else}
+      <div class="no-results">No themes match "{searchQuery}"</div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .theme-dropdown {
+    position: fixed;
+    top: 40px;
+    right: 8px;
+    z-index: 1000;
+    background: var(--bg-chrome);
+    border: 1px solid var(--border-muted);
+    border-radius: 8px;
+    box-shadow: var(--shadow-elevated);
+    width: 260px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .search-container {
+    position: relative;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .search-container :global(.search-icon) {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-faint);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 6px 8px 6px 30px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-muted);
+    border-radius: 5px;
+    color: var(--text-primary);
+    font-size: var(--size-xs);
+    font-family: inherit;
+    box-sizing: border-box;
+    transition:
+      border-color 0.1s,
+      background-color 0.1s;
+  }
+
+  .search-input::placeholder {
+    color: var(--text-faint);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--border-emphasis);
+    background-color: var(--bg-hover);
+  }
+
+  .theme-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    max-height: 320px;
+    padding: 4px 0;
+  }
+
+  .theme-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 6px 12px;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: var(--size-xs);
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.1s;
+  }
+
+  .theme-item:hover,
+  .theme-item.selected {
+    background-color: var(--bg-hover);
+  }
+
+  .theme-item.active {
+    background-color: var(--ui-selection);
+    border-left: 2px solid var(--text-primary);
+    padding-left: 10px;
+  }
+
+  .theme-item.active .theme-name {
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .theme-item.active .theme-indicator {
+    color: var(--text-primary);
+  }
+
+  .theme-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-faint);
+    flex-shrink: 0;
+  }
+
+  .theme-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .no-results {
+    padding: 16px 12px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: var(--size-xs);
+  }
+</style>
diff --git a/apps/staged/src/lib/commands.ts b/apps/staged/src/lib/commands.ts
new file mode 100644
index 00000000..c8252a19
--- /dev/null
+++ b/apps/staged/src/lib/commands.ts
@@ -0,0 +1,166 @@
+/**
+ * Typed invoke wrappers for Staged's Tauri commands.
+ */
+
+import { invoke } from '@tauri-apps/api/core';
+import type { FileDiffSummary, FileDiff, File } from '@builderbot/diff-viewer/types';
+
+// =============================================================================
+// Types (matching Rust backend)
+// =============================================================================
+
+export interface RepoInfo {
+  path: string;
+  branch: string;
+  defaultBranch: string;
+  commitsAhead: number;
+}
+
+export interface CommitInfo {
+  sha: string;
+  shortSha: string;
+  message: string;
+  author: string;
+  timestamp: number;
+}
+
+export interface DiffFilesResponse {
+  files: FileDiffSummary[];
+}
+
+export interface LaunchArgs {
+  repoPath: string;
+  mode: string | null;
+  commit: string | null;
+}
+
+export interface DirEntry {
+  name: string;
+  path: string;
+  isDir: boolean;
+  isRepo: boolean;
+}
+
+export interface RecentRepo {
+  name: string;
+  path: string;
+}
+
+/** Matches the git-diff crate's GitRef enum (tagged union). */
+export type GitRef =
+  | { type: 'WorkingTree' }
+  | { type: 'Index' }
+  | { type: 'Rev'; value: string }
+  | { type: 'MergeBase' }
+  | { type: 'MergeBaseOf'; value: [string, string] };
+
+export interface DiffSpec {
+  base: GitRef;
+  head: GitRef;
+}
+
+// =============================================================================
+// Diff spec builders
+// =============================================================================
+
+/** All uncommitted changes: HEAD -> working tree */
+export function specUncommitted(): DiffSpec {
+  return {
+    base: { type: 'Rev', value: 'HEAD' },
+    head: { type: 'WorkingTree' },
+  };
+}
+
+/** Staged changes only: HEAD -> index */
+export function specStaged(): DiffSpec {
+  return {
+    base: { type: 'Rev', value: 'HEAD' },
+    head: { type: 'Index' },
+  };
+}
+
+/** Full branch diff: merge-base -> HEAD */
+export function specBranch(): DiffSpec {
+  return {
+    base: { type: 'MergeBase' },
+    head: { type: 'Rev', value: 'HEAD' },
+  };
+}
+
+/** Single commit: parent -> commit */
+export function specCommit(sha: string): DiffSpec {
+  return {
+    base: { type: 'Rev', value: `${sha}~1` },
+    head: { type: 'Rev', value: sha },
+  };
+}
+
+/** Range from a commit to HEAD */
+export function specRange(fromSha: string): DiffSpec {
+  return {
+    base: { type: 'Rev', value: fromSha },
+    head: { type: 'Rev', value: 'HEAD' },
+  };
+}
+
+// =============================================================================
+// Commands
+// =============================================================================
+
+export function getRepoInfo(): Promise<RepoInfo> {
+  return invoke('get_repo_info');
+}
+
+export function listRecentCommits(count?: number): Promise<CommitInfo[]> {
+  return invoke('list_recent_commits', { count: count ?? null });
+}
+
+export function listDiffFiles(spec: DiffSpec): Promise<DiffFilesResponse> {
+  return invoke('list_diff_files', { spec });
+}
+
+export function getFileDiff(spec: DiffSpec, path: string): Promise<FileDiff> {
+  return invoke('get_file_diff', { spec, path });
+}
+
+export function getFileAtRef(refName: string, path: string): Promise<File> {
+  return invoke('get_file_at_ref', { refName, path });
+}
+
+export function getLaunchArgs(): Promise<LaunchArgs> {
+  return invoke('get_launch_args');
+}
+
+export function setRepoPath(path: string): Promise<void> {
+  return invoke('set_repo_path', { path });
+}
+
+// =============================================================================
+// Directory browsing
+// =============================================================================
+
+export function listDirectory(path: string): Promise<DirEntry[]> {
+  return invoke('list_directory', { path });
+}
+
+export function searchDirectories(
+  path: string,
+  query: string,
+  maxDepth?: number,
+  limit?: number
+): Promise<DirEntry[]> {
+  return invoke('search_directories', {
+    path,
+    query,
+    maxDepth: maxDepth ?? 3,
+    limit: limit ?? 20,
+  });
+}
+
+export function getHomeDir(): Promise<string> {
+  return invoke('get_home_dir');
+}
+
+export function findRecentRepos(hoursAgo?: number, limit?: number): Promise<RecentRepo[]> {
+  return invoke('find_recent_repos', { hoursAgo, limit });
+}
diff --git a/apps/staged/src/lib/preferences.svelte.ts b/apps/staged/src/lib/preferences.svelte.ts
new file mode 100644
index 00000000..c069a10c
--- /dev/null
+++ b/apps/staged/src/lib/preferences.svelte.ts
@@ -0,0 +1,118 @@
+/**
+ * User Preferences Store for Staged
+ *
+ * Manages persistent user preferences (Tauri store-backed).
+ * Handles syntax theme selection with adaptive UI theming.
+ */
+
+import {
+  SYNTAX_THEMES,
+  setSyntaxTheme,
+  getTheme,
+  isLightTheme,
+  initHighlighter,
+  type SyntaxThemeName,
+} from '@builderbot/diff-viewer/utils';
+import { load, type Store } from '@tauri-apps/plugin-store';
+import { createAdaptiveTheme, themeToVarMap } from '../../../mark/src/lib/theme';
+
+// Re-export for convenience
+export { isLightTheme };
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const SYNTAX_THEME_STORE_KEY = 'syntax-theme';
+const DEFAULT_SYNTAX_THEME: SyntaxThemeName = 'laserwave';
+
+// =============================================================================
+// Store
+// =============================================================================
+
+let store: Store | null = null;
+
+async function initStore(): Promise<void> {
+  if (store) return;
+  store = await load('preferences.json', {
+    defaults: {},
+    autoSave: true,
+    overrideDefaults: true,
+  });
+}
+
+async function getStoreValue<T>(key: string): Promise<T | undefined> {
+  if (!store) return undefined;
+  return store.get<T>(key);
+}
+
+async function setStoreValue<T>(key: string, value: T): Promise<void> {
+  if (!store) return;
+  await store.set(key, value);
+}
+
+// =============================================================================
+// Reactive State
+// =============================================================================
+
+export interface ThemeEntry {
+  name: string;
+}
+
+export const preferences = $state({
+  syntaxTheme: DEFAULT_SYNTAX_THEME as string,
+  loaded: false,
+});
+
+// =============================================================================
+// CSS Application
+// =============================================================================
+
+function applyAdaptiveTheme() {
+  const themeInfo = getTheme();
+  if (themeInfo) {
+    const adaptiveTheme = createAdaptiveTheme(themeInfo.bg, themeInfo.fg, themeInfo.comment, {
+      added: themeInfo.added,
+      deleted: themeInfo.deleted,
+      modified: themeInfo.modified,
+    });
+    const varMap = themeToVarMap(adaptiveTheme);
+    const style = document.documentElement.style;
+    for (const [prop, value] of Object.entries(varMap)) {
+      style.setProperty(prop, value);
+    }
+  }
+}
+
+// =============================================================================
+// Initialization
+// =============================================================================
+
+export async function initPreferences(): Promise<void> {
+  await initStore();
+
+  const savedTheme = await getStoreValue<string>(SYNTAX_THEME_STORE_KEY);
+  if (savedTheme && SYNTAX_THEMES.includes(savedTheme as SyntaxThemeName)) {
+    preferences.syntaxTheme = savedTheme;
+  }
+
+  await initHighlighter(preferences.syntaxTheme as SyntaxThemeName);
+  applyAdaptiveTheme();
+
+  preferences.loaded = true;
+}
+
+// =============================================================================
+// Theme Actions
+// =============================================================================
+
+export function getAvailableSyntaxThemes(): ThemeEntry[] {
+  return SYNTAX_THEMES.map((name) => ({ name }));
+}
+
+export async function selectSyntaxTheme(name: string): Promise<void> {
+  await setSyntaxTheme(name as SyntaxThemeName);
+  preferences.syntaxTheme = name;
+  await setStoreValue(SYNTAX_THEME_STORE_KEY, name);
+  applyAdaptiveTheme();
+}
diff --git a/apps/staged/src/types/sanitize-html.d.ts b/apps/staged/src/types/sanitize-html.d.ts
new file mode 100644
index 00000000..93270031
--- /dev/null
+++ b/apps/staged/src/types/sanitize-html.d.ts
@@ -0,0 +1,20 @@
+declare module 'sanitize-html' {
+  type AllowedAttributes = Record<string, string[]>;
+
+  interface SanitizeHtmlOptions {
+    allowedTags?: string[];
+    allowedAttributes?: AllowedAttributes;
+    allowedSchemes?: string[];
+  }
+
+  interface SanitizeHtmlFn {
+    (dirty: string, options?: SanitizeHtmlOptions): string;
+    defaults: {
+      allowedTags: string[];
+      allowedAttributes: AllowedAttributes;
+    };
+  }
+
+  const sanitizeHtml: SanitizeHtmlFn;
+  export default sanitizeHtml;
+}
diff --git a/apps/staged/tsconfig.app.json b/apps/staged/tsconfig.app.json
index 90ed3c78..6e2c2f19 100644
--- a/apps/staged/tsconfig.app.json
+++ b/apps/staged/tsconfig.app.json
@@ -9,7 +9,8 @@
     "noEmit": true,
     "allowJs": true,
     "checkJs": true,
-    "moduleDetection": "force"
+    "moduleDetection": "force",
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }
diff --git a/crates/git-diff/src/diff.rs b/crates/git-diff/src/diff.rs
index 5bf335b1..5f192ad0 100644
--- a/crates/git-diff/src/diff.rs
+++ b/crates/git-diff/src/diff.rs
@@ -46,6 +46,10 @@ pub fn get_unified_diff(repo: &Path, spec: &DiffSpec, path: &Path) -> Result<Str
             // Diff from commit to working tree
             cli::run(repo, &["diff", base.as_str(), "--", path_str])
         }
+        (GitRef::Rev(base), GitRef::Index) => {
+            // Diff from commit to staging area
+            cli::run(repo, &["diff", "--cached", base.as_str(), "--", path_str])
+        }
         (GitRef::Rev(base), GitRef::Rev(head)) => {
             // Diff between two commits
             cli::run(
@@ -53,8 +57,8 @@ pub fn get_unified_diff(repo: &Path, spec: &DiffSpec, path: &Path) -> Result<Str
                 &["diff", base.as_str(), head.as_str(), "--", path_str],
             )
         }
-        (GitRef::WorkingTree, _) => Err(GitError::CommandFailed(
-            "Cannot use working tree as base".to_string(),
+        (GitRef::WorkingTree, _) | (GitRef::Index, _) => Err(GitError::CommandFailed(
+            "Cannot use working tree or index as base".to_string(),
         )),
         (GitRef::MergeBase | GitRef::MergeBaseOf(_), _)
         | (_, GitRef::MergeBase | GitRef::MergeBaseOf(_)) => {
@@ -92,14 +96,20 @@ pub fn list_diff_files(repo: &Path, spec: &DiffSpec) -> Result<Vec<FileDiffSumma
             // Working tree diff - use git status for fsmonitor support
             list_working_tree_changes(repo, base)
         }
+        (GitRef::Rev(base), GitRef::Index) => {
+            // Staged changes: diff between a rev and the index
+            let args = ["diff", "--cached", "--name-status", "-z", base.as_str()];
+            let output = cli::run(repo, &args)?;
+            parse_name_status(&output)
+        }
         (GitRef::Rev(base), GitRef::Rev(head)) => {
             // Commit range - use git diff
             let args = ["diff", "--name-status", "-z", base.as_str(), head.as_str()];
             let output = cli::run(repo, &args)?;
             parse_name_status(&output)
         }
-        (GitRef::WorkingTree, _) => Err(GitError::CommandFailed(
-            "Cannot use working tree as base".to_string(),
+        (GitRef::WorkingTree, _) | (GitRef::Index, _) => Err(GitError::CommandFailed(
+            "Cannot use working tree or index as base".to_string(),
         )),
         (GitRef::MergeBase | GitRef::MergeBaseOf(_), _)
         | (_, GitRef::MergeBase | GitRef::MergeBaseOf(_)) => {
@@ -322,13 +332,20 @@ pub fn get_file_diff(repo_path: &Path, spec: &DiffSpec, path: &Path) -> Result<F
 
     // Resolve trees
     let base_tree = resolve_to_tree(&repo, &spec.base)?;
-    let head_tree = resolve_to_tree(&repo, &spec.head)?;
     let is_working_tree = matches!(spec.head, GitRef::WorkingTree);
+    let is_index = matches!(spec.head, GitRef::Index);
+    let head_tree = if is_index {
+        None
+    } else {
+        resolve_to_tree(&repo, &spec.head)?
+    };
 
     // Load file content
     let before = load_file_from_tree(&repo, base_tree.as_ref(), path)?;
     let after = if is_working_tree {
         load_file_from_workdir(&repo, path)?
+    } else if is_index {
+        load_file_from_index(&repo, path)?
     } else {
         load_file_from_tree(&repo, head_tree.as_ref(), path)?
     };
@@ -339,6 +356,7 @@ pub fn get_file_diff(repo_path: &Path, spec: &DiffSpec, path: &Path) -> Result<F
         base_tree.as_ref(),
         head_tree.as_ref(),
         is_working_tree,
+        is_index,
         path,
     )?;
 
@@ -359,7 +377,7 @@ fn resolve_to_tree<'a>(
     git_ref: &GitRef,
 ) -> Result<Option<git2::Tree<'a>>, GitError> {
     match git_ref {
-        GitRef::WorkingTree => Ok(None),
+        GitRef::WorkingTree | GitRef::Index => Ok(None),
         GitRef::Rev(rev) => {
             let obj = repo
                 .revparse_single(rev)
@@ -410,6 +428,29 @@ fn load_file_from_tree(
     }))
 }
 
+/// Load file content from the git index (staging area)
+fn load_file_from_index(repo: &Repository, path: &Path) -> Result<Option<File>, GitError> {
+    let index = repo
+        .index()
+        .map_err(|e| GitError::CommandFailed(format!("Cannot read index: {e}")))?;
+
+    let entry = match index.get_path(path, 0) {
+        Some(e) => e,
+        None => return Ok(None),
+    };
+
+    let blob = repo
+        .find_blob(entry.id)
+        .map_err(|e| GitError::CommandFailed(format!("Cannot load blob from index: {e}")))?;
+
+    let content = bytes_to_content(blob.content());
+
+    Ok(Some(File {
+        path: path.to_string_lossy().to_string(),
+        content,
+    }))
+}
+
 /// Load file content from the working directory
 fn load_file_from_workdir(repo: &Repository, path: &Path) -> Result<Option<File>, GitError> {
     let workdir = repo
@@ -455,13 +496,17 @@ fn get_hunks_libgit2(
     base_tree: Option<&git2::Tree>,
     head_tree: Option<&git2::Tree>,
     is_working_tree: bool,
+    is_index: bool,
     path: &Path,
 ) -> Result<Vec<Hunk>, GitError> {
     let mut opts = DiffOptions::new();
     opts.context_lines(0); // No context, just the changes
     opts.pathspec(path);
 
-    let diff = if is_working_tree {
+    let diff = if is_index {
+        // Staged changes: tree → index
+        repo.diff_tree_to_index(base_tree, None, Some(&mut opts))
+    } else if is_working_tree {
         repo.diff_tree_to_workdir_with_index(base_tree, Some(&mut opts))
     } else {
         repo.diff_tree_to_tree(base_tree, head_tree, Some(&mut opts))
diff --git a/crates/git-diff/src/types.rs b/crates/git-diff/src/types.rs
index 9de54726..bcff90ae 100644
--- a/crates/git-diff/src/types.rs
+++ b/crates/git-diff/src/types.rs
@@ -10,6 +10,8 @@ pub const WORKDIR: &str = "WORKDIR";
 pub enum GitRef {
     /// The working tree (uncommitted changes)
     WorkingTree,
+    /// The staging area / index (what has been `git add`'d)
+    Index,
     /// Anything that resolves to a commit: SHA, branch, tag, origin/main, HEAD~3, etc.
     Rev(String),
     /// Merge-base between the default branch and HEAD.
@@ -27,6 +29,7 @@ impl GitRef {
     pub fn as_git_arg(&self) -> Option<&str> {
         match self {
             GitRef::WorkingTree => None,
+            GitRef::Index => None,
             GitRef::Rev(s) => Some(s),
             GitRef::MergeBase => panic!("MergeBase must be resolved before use"),
             GitRef::MergeBaseOf(_) => panic!("MergeBaseOf must be resolved before use"),
@@ -37,6 +40,7 @@ impl GitRef {
     pub fn display(&self) -> &str {
         match self {
             GitRef::WorkingTree => "@",
+            GitRef::Index => "index",
             GitRef::Rev(s) => s,
             GitRef::MergeBase => "merge-base",
             GitRef::MergeBaseOf(_) => "merge-base",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7eed3cdf..f2b4ae94 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,9 +71,30 @@ importers:
 
   apps/staged:
     dependencies:
+      '@builderbot/diff-viewer':
+        specifier: workspace:*
+        version: link:../../packages/diff-viewer
       '@tauri-apps/api':
         specifier: ^2.10.0
         version: 2.10.1
+      '@tauri-apps/plugin-dialog':
+        specifier: ^2.2.0
+        version: 2.6.0
+      '@tauri-apps/plugin-store':
+        specifier: ^2.2.0
+        version: 2.4.2
+      lucide-svelte:
+        specifier: ^0.575.0
+        version: 0.575.0(svelte@5.53.2)
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.3
+      sanitize-html:
+        specifier: ^2.17.0
+        version: 2.17.1
+      shiki:
+        specifier: ^3.20.0
+        version: 3.22.0
     devDependencies:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.1
@@ -87,6 +108,9 @@ importers:
       '@types/node':
         specifier: ^24.10.1
         version: 24.10.13
+      '@types/sanitize-html':
+        specifier: ^2.13.0
+        version: 2.16.0
       prettier:
         specifier: ^3.7.4
         version: 3.8.1
@@ -384,7 +408,6 @@ packages:
     resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.59.0':
     resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
@@ -563,6 +586,9 @@ packages:
   '@tauri-apps/plugin-clipboard-manager@2.3.2':
     resolution: {integrity: sha512-CUlb5Hqi2oZbcZf4VUyUH53XWPPdtpw43EUpCza5HWZJwxEoDowFzNUDt1tRUXA8Uq+XPn17Ysfptip33sG4eQ==}
 
+  '@tauri-apps/plugin-dialog@2.6.0':
+    resolution: {integrity: sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg==}
+
   '@tauri-apps/plugin-store@2.4.2':
     resolution: {integrity: sha512-0ClHS50Oq9HEvLPhNzTNFxbWVOqoAp3dRvtewQBeqfIQ0z5m3JRnOISIn2ZVPCrQC0MyGyhTS9DWhHjpigQE7A==}
 
@@ -581,6 +607,9 @@ packages:
   '@types/node@24.10.13':
     resolution: {integrity: sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==}
 
+  '@types/sanitize-html@2.16.0':
+    resolution: {integrity: sha512-l6rX1MUXje5ztPT0cAFtUayXF06DqPhRyfVXareEN5gGCFaP/iwsxIyKODr9XDhfxPpN6vXUFNfo5kZMXCxBtw==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -1216,6 +1245,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.10.1
 
+  '@tauri-apps/plugin-dialog@2.6.0':
+    dependencies:
+      '@tauri-apps/api': 2.10.1
+
   '@tauri-apps/plugin-store@2.4.2':
     dependencies:
       '@tauri-apps/api': 2.10.1
@@ -1236,6 +1269,10 @@ snapshots:
     dependencies:
       undici-types: 7.16.0
 
+  '@types/sanitize-html@2.16.0':
+    dependencies:
+      htmlparser2: 8.0.2
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/unist@3.0.3': {}