Merge feat/whats-new-updater-ux: What's New screen + updater UX + light-theme fixes

Post-0.1.1 polish queued for the next release (0.1.2): - What's New: post-update toast that opens an in-app, offline release-notes screen (collapsible Added/Changed/Fixed sections) sourced from the bundled CHANGELOG.md, reopenable from Settings -> Updates. Backed by a last_seen_version settings file that tells upgrades from fresh installs. - Updater: the progress toast reappears when an update is started from the title-bar indicator or Settings after the prompt was dismissed; Settings gains a real download progress bar with a percentage. - Light theme: fix the recurring subtle-light breakage — neutral surfaces rely on the CSS-variable remap instead of light-theme:bg-white, and the green action buttons drop the broken light-theme:hover:bg-emerald-200 for an override-free emerald tint that auto-themes (updater, What's New, onboarding). - Debug panel: What's New triggers.
feat: What's New screen + updater progress, plus light-theme fixes
2026-06-23 21:36:35 +01:00 · 2026-06-23 21:33:08 +01:00 · 2026-06-23 20:26:25 +01:00 · 2026-06-23 20:00:08 +01:00 · 2026-06-23 08:55:08 +01:00 · 2026-06-22 20:43:46 +01:00
73 changed files with 5022 additions and 490 deletions
@@ -0,0 +1,20 @@
+# External CI
+
+CI and release builds run on the GitHub mirror because they require Windows
+runner capacity. The GitHub workflows report their state back to this Gitea
+repository through the commit status API.
+
+Keep this directory in the repository. Gitea checks `.gitea/workflows` before
+falling back to `.github/workflows`; an existing directory with no workflow
+files prevents the GitHub-only workflows from being queued by Gitea Actions.
+
+## Setup
+
+1. In Gitea, create an access token with `write:repository` permission for an
+   account that can update `JezzWTF/phokus`.
+2. In the GitHub repository, add that token as the Actions repository secret
+   `GITEA_STATUS_TOKEN`.
+
+The status steps are non-blocking. If Gitea is temporarily unavailable, the
+GitHub build result is preserved and the failed status update remains visible
+in the workflow log.
@@ -3,7 +3,13 @@ name: CI
 on:
  push:
    branches: [main]
+    paths:
+      - 'src/**'
+      - 'src-tauri/**'
  pull_request:
+    paths:
+      - 'src/**'
+      - 'src-tauri/**'
  workflow_dispatch:

 concurrency:
@@ -15,7 +21,33 @@ jobs:
    # windows-latest to match the release target — the ML crates (ort, candle)
    # and the NSIS bundle only ever ship from Windows.
    runs-on: windows-latest
+    env:
+      GITEA_STATUS_TOKEN: ${{ secrets.GITEA_STATUS_TOKEN }}
    steps:
+      - name: Report pending status to Gitea
+        if: github.event_name != 'pull_request' && env.GITEA_STATUS_TOKEN != ''
+        continue-on-error: true
+        shell: pwsh
+        env:
+          GITHUB_RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        run: |
+          $headers = @{
+            Authorization = "token $env:GITEA_STATUS_TOKEN"
+            Accept = "application/json"
+          }
+          $body = @{
+            state = "pending"
+            context = "github/actions/ci"
+            description = "GitHub Actions CI is running"
+            target_url = $env:GITHUB_RUN_URL
+          } | ConvertTo-Json
+          Invoke-RestMethod `
+            -Method Post `
+            -Uri "https://git.jezz.wtf/api/v1/repos/JezzWTF/phokus/statuses/$env:GITHUB_SHA" `
+            -Headers $headers `
+            -ContentType "application/json" `
+            -Body $body
+
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
@@ -52,3 +84,33 @@ jobs:
      - name: Clippy
        working-directory: src-tauri
        run: cargo clippy --all-targets --locked --no-default-features -- -D warnings
+
+      - name: Report final status to Gitea
+        if: always() && github.event_name != 'pull_request' && env.GITEA_STATUS_TOKEN != ''
+        continue-on-error: true
+        shell: pwsh
+        env:
+          GITHUB_RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+          JOB_STATUS: ${{ job.status }}
+        run: |
+          $state = switch ($env:JOB_STATUS) {
+            "success" { "success" }
+            "failure" { "failure" }
+            default { "error" }
+          }
+          $headers = @{
+            Authorization = "token $env:GITEA_STATUS_TOKEN"
+            Accept = "application/json"
+          }
+          $body = @{
+            state = $state
+            context = "github/actions/ci"
+            description = "GitHub Actions CI finished: $env:JOB_STATUS"
+            target_url = $env:GITHUB_RUN_URL
+          } | ConvertTo-Json
+          Invoke-RestMethod `
+            -Method Post `
+            -Uri "https://git.jezz.wtf/api/v1/repos/JezzWTF/phokus/statuses/$env:GITHUB_SHA" `
+            -Headers $headers `
+            -ContentType "application/json" `
+            -Body $body
@@ -14,7 +14,33 @@ jobs:
    permissions:
      contents: write
    runs-on: windows-latest
+    env:
+      GITEA_STATUS_TOKEN: ${{ secrets.GITEA_STATUS_TOKEN }}
    steps:
+      - name: Report pending status to Gitea
+        if: env.GITEA_STATUS_TOKEN != ''
+        continue-on-error: true
+        shell: pwsh
+        env:
+          GITHUB_RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+        run: |
+          $headers = @{
+            Authorization = "token $env:GITEA_STATUS_TOKEN"
+            Accept = "application/json"
+          }
+          $body = @{
+            state = "pending"
+            context = "github/actions/release"
+            description = "GitHub Actions release is running"
+            target_url = $env:GITHUB_RUN_URL
+          } | ConvertTo-Json
+          Invoke-RestMethod `
+            -Method Post `
+            -Uri "https://git.jezz.wtf/api/v1/repos/JezzWTF/phokus/statuses/$env:GITHUB_SHA" `
+            -Headers $headers `
+            -ContentType "application/json" `
+            -Body $body
+
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
@@ -55,3 +81,33 @@ jobs:
          # Cargo args after `--`: ship the CPU/DirectML build — default
          # features enable candle-cuda, which runners (and most users) lack.
          args: '-- --no-default-features'
+
+      - name: Report final status to Gitea
+        if: always() && env.GITEA_STATUS_TOKEN != ''
+        continue-on-error: true
+        shell: pwsh
+        env:
+          GITHUB_RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
+          JOB_STATUS: ${{ job.status }}
+        run: |
+          $state = switch ($env:JOB_STATUS) {
+            "success" { "success" }
+            "failure" { "failure" }
+            default { "error" }
+          }
+          $headers = @{
+            Authorization = "token $env:GITEA_STATUS_TOKEN"
+            Accept = "application/json"
+          }
+          $body = @{
+            state = $state
+            context = "github/actions/release"
+            description = "GitHub Actions release finished: $env:JOB_STATUS"
+            target_url = $env:GITHUB_RUN_URL
+          } | ConvertTo-Json
+          Invoke-RestMethod `
+            -Method Post `
+            -Uri "https://git.jezz.wtf/api/v1/repos/JezzWTF/phokus/statuses/$env:GITHUB_SHA" `
+            -Headers $headers `
+            -ContentType "application/json" `
+            -Body $body
@@ -32,17 +32,8 @@ dist-ssr

 # Misc
 *.py
-*.json
-
 *.pyc

 # Bundled CUDA runtime DLLs for the CUDA build (copied from the toolkit
 # locally; ~600 MB, never committed). See RELEASE_PLAN.md "CUDA release variant".
 src-tauri/cuda-redist/
-
-# Keep the Tauri configs tracked despite the *.json rule above. tauri.conf.json
-# must also be un-ignored so tauri-action can find it: it globs for the config
-# honoring .gitignore, and an ignored config makes the release build fail with
-# "Failed to resolve Tauri path".
-!src-tauri/tauri.conf.json
-!src-tauri/tauri.cuda.conf.json
@@ -5,7 +5,105 @@ All notable changes to Phokus are documented here. The format is based on
 aims to follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 (0.x: anything may change between minor versions).

-## [0.1.0] — Unreleased
+## [Unreleased]
+
+### Added
+
+- **What's New** — after updating, Phokus now greets you with a "What's new"
+  toast that opens an in-app release-notes screen for the new version, with the
+  changes grouped into collapsible Added / Changed / Fixed sections. It's
+  sourced from the bundled changelog (so it works offline) and can be reopened
+  any time from Settings → Updates → What's new.
+
+### Changed
+
+- The updater now shows a real download progress bar with a percentage in
+  Settings → Updates (previously it only said "Downloading").
+
+### Fixed
+
+- The update download/install progress toast now reappears when you start an
+  update from the title-bar indicator or Settings after dismissing the earlier
+  "Update available" prompt — previously progress only showed in Settings.
+- Subtle Light theme — fixed several surfaces and buttons that stayed dark or
+  became unreadable on hover, including new dialogs and the green action buttons
+  across the updater and onboarding.
+
+## [0.1.1] — 2026-06-23
+
+### Added
+
+- **Custom multi-folder picker** — replaces the native OS dialog with an
+  in-app folder browser that lets you navigate, stage folders from multiple
+  locations, and add them all in one go. Duplicate roots are skipped
+  automatically; partially-failed batches remove successfully-added entries
+  from the staging panel so only failed folders remain to retry.
+- **Rebuild semantic index** maintenance action in Settings — drops and
+  recreates the vector tables at the current model dimension, then re-queues
+  every image for embedding. Fixes "dimension mismatch" search errors that
+  occur after switching between CLIP models with different output sizes.
+- **Video playback settings** — new Video Playback group in Settings with two
+  persisted toggles: "Autoplay in lightbox" (default on) and "Start muted"
+  (default off). Settings apply to the next opened video rather than the
+  current one.
+- **Timeline scrubber** — a year/month rail on the Timeline view that jumps to
+  any period in the library. Timeline now loads the full filtered set so the
+  scrubber spans the whole library instead of just the first page.
+- **Folder reordering** in the sidebar — drag-and-drop (with edge auto-scroll)
+  or keyboard (↑/↓ on the drag handle), with the custom order persisted across
+  sessions; the Libraries list also gains A–Z / Z–A / Custom sort.
+- Failed AI-tagging jobs can now be located from the background worker prompt,
+  including a gallery filter for images with failed tags and an expanded list
+  of failed filenames/errors.
+- A new theme system adds Phokus, Subtle Light, and Conventional Dark chrome
+  options across the app.
+- First-run onboarding now includes an inline theme picker so new users can
+  choose their preferred app chrome before continuing the tour.
+
+### Changed
+
+- Settings sections are reordered — General is now the first and default
+  section instead of AI Workspace.
+- The Duplicate Finder group list is now virtualised — only on-screen cards
+  mount, so large result sets (e.g. 5,000+ pairs) scroll without lag rather
+  than mounting every thumbnail at once.
+- The gallery grid is now row-virtualised, so very large libraries scroll
+  smoothly and only on-screen thumbnails are rendered.
+- Polished the new theme surfaces before release, including readable
+  subtle-light secondary buttons, failed-worker action buttons, and onboarding
+  controls.
+- Onboarding preview media keeps the dark gallery/media surface regardless of
+  the active chrome theme.
+
+### Fixed
+
+- **AVIF thumbnails** — AVIF files are now processed correctly by routing
+  thumbnail generation through the bundled FFmpeg path instead of the Rust
+  image decoder (which has no dav1d dependency). Previously-failed AVIF jobs
+  are requeued on startup; JPEG derivatives are fed to the embedding and
+  tagging pipeline while the lightbox continues to display the original file.
+- Accent text is now readable in the Subtle Light theme.
+- Folder picker chevron tooltip now correctly shows "No subfolders" for leaf
+  entries instead of "Open folder" in both branches.
+- Folder picker Unix breadcrumb root now shows "/" instead of always "Home"
+  for non-home paths such as `/mnt/data`.
+- Video embedding jobs are no longer claimed before their thumbnail exists, and
+  any that previously failed for that reason are requeued on startup — videos no
+  longer churn through failed embeddings.
+- Subtle Light theme consistency — the lightbox metadata panel now follows the
+  light chrome while the image canvas stays dark (matching Conventional Dark),
+  and gallery/timeline media badges, duplicate-finder thumbnails, and the window
+  restore icon now theme correctly instead of staying Phokus-dark.
+- Timeline scrolling is now smooth on large libraries — it virtualizes per row
+  of tiles instead of per month, so a month with thousands of photos no longer
+  mounts every tile at once (thumbnails now load in incrementally as you scroll,
+  matching the All Media grid).
+- Background worker updates (thumbnails, metadata, embeddings, tags) no longer
+  re-sort the entire loaded image set on every batch. In Timeline, which loads
+  the whole library, this re-sort caused severe lag and could crash the app
+  during background indexing.
+
+## [0.1.0] — 2026-06-14

 First public release. Windows desktop, distributed as an unsigned NSIS
 installer with a built-in updater.
@@ -47,4 +145,5 @@ installer with a built-in updater.
  Settings, with live size/reclaimable stats.
 - **Window state** persistence and single-instance handling.

+[0.1.1]: https://github.com/JezzWTF/phokus/releases/tag/v0.1.1
 [0.1.0]: https://github.com/JezzWTF/phokus/releases/tag/v0.1.0
@@ -34,7 +34,7 @@ A local-first desktop media library for browsing, filtering, and curating image
 | Images | Videos |
 |--------|--------|
 | jpg, jpeg, png, gif, bmp | mp4, mov, m4v |
-| tiff, tif, webp, avif, heic, heif | webm |
+| tiff, tif, webp, avif | webm |

 ## Installation

@@ -0,0 +1,64 @@
+# Phokus v0.1.1
+
+> Draft for the GitHub Release body. Fill in the checksums and trim as needed.
+
+**Phokus is a local-first desktop media library for Windows** — point it at
+your image and video folders and it builds a fast, searchable gallery with
+thumbnails, semantic search, visual discovery, AI tagging, and duplicate
+cleanup. Everything is processed on your machine; nothing is uploaded.
+
+This is a quality-of-life release on top of 0.1.0: a new in-app folder
+picker, themes, smoother scrolling on large libraries, and a batch of fixes.
+If you're updating from 0.1.0, the built-in updater will fetch this for you.
+
+## Install / update
+
+- **Updating from 0.1.0:** the in-app updater will offer 0.1.1 on launch — one
+  click downloads, installs, and relaunches.
+- **Fresh install:** download `Phokus_0.1.1_x64-setup.exe` below and run it.
+  **Windows SmartScreen will warn** that the publisher is unrecognized — this
+  build is **not code-signed**. Click **More info → Run anyway**.
+- Requires **Windows 10/11**. WebView2 is fetched automatically if missing.
+
+NVIDIA users wanting GPU embedding speed can use the
+`Phokus_0.1.1_x64-cuda-setup.exe` variant instead (larger download; bundles the
+CUDA runtime DLLs).
+
+## Highlights
+
+### Added
+- **Custom multi-folder picker** — navigate and stage folders from multiple
+  locations and add them in one go, replacing the native OS dialog.
+- **Themes** — Phokus, Subtle Light, and Conventional Dark chrome, with an
+  inline theme picker in first-run onboarding.
+- **Timeline scrubber** — a year/month rail to jump anywhere in the library.
+- **Folder reordering** in the sidebar (drag-and-drop or keyboard), persisted,
+  plus A–Z / Z–A / Custom sort for the Libraries list.
+- **Video playback settings** — autoplay-in-lightbox and start-muted toggles.
+- **Rebuild semantic index** maintenance action — fixes "dimension mismatch"
+  search errors after switching CLIP models.
+- Locate and filter images with failed AI-tagging jobs.
+
+### Changed
+- Gallery grid and Duplicate Finder list are now row-virtualised — large
+  libraries and large result sets (5,000+ pairs) scroll without lag.
+- Settings now open on General by default.
+
+### Fixed
+- **AVIF thumbnails** now generate correctly (routed through bundled FFmpeg);
+  previously-failed AVIF jobs are requeued on startup.
+- Video embedding jobs no longer churn through failed states before their
+  thumbnail exists; previously-failed ones are requeued.
+- Timeline scrolling is smooth on large libraries (per-row virtualisation);
+  background batches no longer re-sort the whole loaded set.
+- Numerous Subtle Light theme readability/parity fixes.
+
+See the [changelog](https://github.com/JezzWTF/phokus/blob/main/CHANGELOG.md)
+for the full list.
+
+## Checksums
+
+```
+SHA-256 (Phokus_0.1.1_x64-setup.exe)      = 1c19cbeb77f38a44149380c42c76b633add65777d317e1f3ff7e45d96d12d287
+SHA-256 (Phokus_0.1.1_x64-cuda-setup.exe) = a7337ef5ee0478a785b48acc8012e8fc5c957341161d6103409213ad78eb845f
+```
@@ -1,17 +1,20 @@
 {
  "name": "phokus",
  "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "build:app": "tauri build",
    "build:vite": "tsc && vite build",
+    "build:web": "cd website && tsc && vite build",
    "clean:app": "cd src-tauri && cargo clean",
    "dev:app": "tauri dev",
    "dev:app:cpu": "tauri dev -- --no-default-features",
+    "dev:web": "cd website && pnpm dev",
    "build:app:cpu": "tauri build -- --no-default-features",
    "build:app:cuda": "tauri build --config src-tauri/tauri.cuda.conf.json",
+    "changelog:add": "node tools/changelog-add.mjs",
    "dev:vite": "vite",
    "preview": "vite preview",
    "tauri": "tauri"
@@ -76,6 +76,49 @@ importers:
        specifier: ^7.0.4
        version: 7.3.1(jiti@2.6.1)(lightningcss@1.32.0)

+  website:
+    dependencies:
+      '@fontsource-variable/inter':
+        specifier: 5.2.8
+        version: 5.2.8
+      '@fontsource-variable/space-grotesk':
+        specifier: 5.2.10
+        version: 5.2.10
+      framer-motion:
+        specifier: ^12.38.0
+        version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react:
+        specifier: ^19.1.0
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.1.0
+        version: 19.2.4(react@19.2.4)
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.2.2(vite@7.3.1(jiti@2.6.1)(lightningcss@1.32.0))
+      '@types/react':
+        specifier: ^19.1.8
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.1.6
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^4.6.0
+        version: 4.7.0(vite@7.3.1(jiti@2.6.1)(lightningcss@1.32.0))
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      vite:
+        specifier: ^7.0.4
+        version: 7.3.1(jiti@2.6.1)(lightningcss@1.32.0)
+      vite-imagetools:
+        specifier: ^10.0.0
+        version: 10.0.0(rollup@4.60.1)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.32.0))
+
 packages:

  '@babel/code-frame@7.29.0':
@@ -161,6 +204,9 @@ packages:
    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
    engines: {node: '>=6.9.0'}

+  '@emnapi/runtime@1.11.1':
+    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
+
  '@esbuild/aix-ppc64@0.27.7':
    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
    engines: {node: '>=18'}
@@ -317,6 +363,165 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+  '@fontsource-variable/space-grotesk@5.2.10':
+    resolution: {integrity: sha512-yJQO/o35/hAP3CFnpdFTwQku2yzJOae2HIpBmqkOVoxhhXJaQP3g+b6Jrz7u+eI7A5ZdCIf88uMWpBJdFiGr5w==}
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}

@@ -336,6 +541,15 @@ packages:
  '@rolldown/pluginutils@1.0.0-beta.27':
    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}

+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
  '@rollup/rollup-android-arm-eabi@4.60.1':
    resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==}
    cpu: [arm]
@@ -770,6 +984,9 @@ packages:
    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
    engines: {node: '>=6'}

+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
  fdir@6.5.0:
    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
    engines: {node: '>=12.0.0'}
@@ -805,6 +1022,10 @@ packages:
  graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}

+  imagetools-core@9.1.0:
+    resolution: {integrity: sha512-xQjs+2vrxLnAjCq+omuNkd5UQTld9/bP8+YT0LyYTlKfuSQtgUBvqhUwGugzSAh6sCdN+LnROMuLswn5hZ9Fhg==}
+    engines: {node: '>=20.0.0'}
+
  jiti@2.6.1:
    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
    hasBin: true
@@ -955,6 +1176,15 @@ packages:
    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
    hasBin: true

+  semver@7.8.4:
+    resolution: {integrity: sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}
@@ -984,6 +1214,12 @@ packages:
    peerDependencies:
      browserslist: '>= 4.21.0'

+  vite-imagetools@10.0.0:
+    resolution: {integrity: sha512-+83L32YPU/2BOHWhudO2+9T5HBvb3+0qHoUNN7fb0+XcAoXilx7aE25cDPWU5kBi5Yc750zYCvHxgfyR+tAuMA==}
+    engines: {node: '>=22.0.0'}
+    peerDependencies:
+      vite: '>=7.0.0'
+
  vite@7.3.1:
    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -1159,6 +1395,11 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.28.5

+  '@emnapi/runtime@1.11.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
  '@esbuild/aix-ppc64@0.27.7':
    optional: true

@@ -1237,6 +1478,106 @@ snapshots:
  '@esbuild/win32-x64@0.27.7':
    optional: true

+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@fontsource-variable/space-grotesk@5.2.10': {}
+
+  '@img/colour@1.1.0': {}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.11.1
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -1258,6 +1599,14 @@ snapshots:

  '@rolldown/pluginutils@1.0.0-beta.27': {}

+  '@rollup/pluginutils@5.4.0(rollup@4.60.1)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
+    optionalDependencies:
+      rollup: 4.60.1
+
  '@rollup/rollup-android-arm-eabi@4.60.1':
    optional: true

@@ -1599,6 +1948,8 @@ snapshots:

  escalade@3.2.0: {}

+  estree-walker@2.0.2: {}
+
  fdir@6.5.0(picomatch@4.0.4):
    optionalDependencies:
      picomatch: 4.0.4
@@ -1619,6 +1970,8 @@ snapshots:

  graceful-fs@4.2.11: {}

+  imagetools-core@9.1.0: {}
+
  jiti@2.6.1: {}

  js-tokens@4.0.0: {}
@@ -1750,6 +2103,39 @@ snapshots:

  semver@6.3.1: {}

+  semver@7.8.4: {}
+
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.4
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+
  source-map-js@1.2.1: {}

  tailwindcss@4.2.2: {}
@@ -1771,6 +2157,15 @@ snapshots:
      escalade: 3.2.0
      picocolors: 1.1.1

+  vite-imagetools@10.0.0(rollup@4.60.1)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.32.0)):
+    dependencies:
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      imagetools-core: 9.1.0
+      sharp: 0.34.5
+      vite: 7.3.1(jiti@2.6.1)(lightningcss@1.32.0)
+    transitivePeerDependencies:
+      - rollup
+
  vite@7.3.1(jiti@2.6.1)(lightningcss@1.32.0):
    dependencies:
      esbuild: 0.27.7
@@ -1,2 +1,6 @@
+packages:
+  - website
+
 allowBuilds:
  esbuild: true
+  sharp: true
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256" role="img" aria-label="Phokus">
+  <title>Phokus</title>
+
+  <!--
+    Phokus app mark — a camera iris.
+    The hexagon in the middle is the lens OPENING; each blade edge sweeps from a
+    corner of the opening out to the rim, all leaning the same way (the pinwheel).
+
+    Tuning knobs (edit and re-open in any browser/Figma):
+      * opening roundness  -> the "52" radius in the opening <path> arcs.
+          smaller (toward 30) = rounder/softer hole; larger (toward 90) = flatter, sharper.
+      * blade curve         -> the "110" radius in each blade <path>.
+          smaller = more pronounced curve; larger = straighter blade.
+      * blade sweep amount  -> the +40deg baked into the blade endpoint (70.71,-84.27).
+      * curve DIRECTION     -> the final flag in each "A r r 0 0 X" command (0<->1 flips the bow).
+      * weight              -> stroke-width on the <g>.
+      * color               -> stroke on the <g>; swap "#e9e9ec" for currentColor to inherit.
+    A brand-accent focal dot is provided at the bottom (commented out).
+  -->
+
+  <rect x="8" y="8" width="240" height="240" rx="52" fill="#0e0f14"/>
+
+  <g transform="translate(128 128)" fill="none" stroke="#e9e9ec" stroke-width="9"
+     stroke-linecap="round" stroke-linejoin="round">
+
+    <!-- outer rim -->
+    <circle r="110"/>
+
+    <!-- lens opening: soft, arc-rounded hexagon -->
+    <path d="M0,-46 A52,52 0 0 0 39.84,-23 A52,52 0 0 0 39.84,23 A52,52 0 0 0 0,46 A52,52 0 0 0 -39.84,23 A52,52 0 0 0 -39.84,-23 A52,52 0 0 0 0,-46 Z"/>
+
+    <!-- blades: one curved edge, swept six times -->
+    <g transform="rotate(0)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(60)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(120)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(180)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(240)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(300)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+  </g>
+
+  <!-- optional brand focal point -->
+  <!-- <circle cx="128" cy="128" r="9" fill="#e6a23c"/> -->
+</svg>
@@ -4595,7 +4595,7 @@ dependencies = [

 [[package]]
 name = "phokus"
-version = "0.1.0"
+version = "0.1.1"
 dependencies = [
 "anyhow",
 "candle-core",
@@ -1,6 +1,6 @@
 [package]
 name = "phokus"
-version = "0.1.0"
+version = "0.1.1"
 description = "Local-first desktop media library"
 authors = ["JezzWTF"]
 license = "MIT"
@@ -78,9 +78,10 @@ static ORT_RUNTIME_INIT: Mutex<bool> = Mutex::new(false);
 /// knows to drop its cached `FlorenceCaptioner` and reload with the new EP.
 pub static CAPTION_SESSION_DIRTY: AtomicBool = AtomicBool::new(false);

-#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
 #[serde(rename_all = "lowercase")]
 pub enum CaptionAcceleration {
+    #[default]
    Auto,
    Cpu,
    Directml,
@@ -96,17 +97,12 @@ impl CaptionAcceleration {
    }
 }

-impl Default for CaptionAcceleration {
-    fn default() -> Self {
-        Self::Auto
-    }
-}
-
-#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
 #[serde(rename_all = "lowercase")]
 pub enum CaptionDetail {
    Short,
    Detailed,
+    #[default]
    Paragraph,
 }

@@ -136,12 +132,6 @@ impl CaptionDetail {
    }
 }

-impl Default for CaptionDetail {
-    fn default() -> Self {
-        Self::Paragraph
-    }
-}
-
 #[derive(Serialize)]
 pub struct CaptionModelStatus {
    pub model_id: &'static str,
@@ -9,7 +9,8 @@ use crate::indexer::{self, WatcherHandle};
 use crate::tagger::{self, TaggerAcceleration, TaggerModelStatus, TaggerRuntimeProbe};
 use crate::vector;
 use serde::{Deserialize, Serialize};
-use std::path::PathBuf;
+use std::collections::HashSet;
+use std::path::{Path, PathBuf};
 use tauri::{AppHandle, Emitter, Manager, State};

 pub type DbState = DbPool;
@@ -38,6 +39,7 @@ pub struct GetImagesParams {
    pub favorites_only: Option<bool>,
    pub rating_min: Option<i64>,
    pub embedding_failed_only: Option<bool>,
+    pub tagging_failed_only: Option<bool>,
    pub sort: Option<String>,
    pub offset: Option<i64>,
    pub limit: Option<i64>,
@@ -214,19 +216,63 @@ pub struct GetImagesByIdsParams {
    pub image_ids: Vec<i64>,
 }

-#[tauri::command]
-pub async fn add_folder(
+#[derive(Serialize)]
+#[serde(tag = "status", content = "data", rename_all = "camelCase")]
+pub enum FolderAddResult {
+    Added(Folder),
+    Skipped(String),
+    Error(String),
+}
+
+enum AddOutcome {
+    Added(Folder),
+    Skipped(Folder),
+}
+
+fn paths_match(left: &str, right: &str) -> bool {
+    let left_path = PathBuf::from(left);
+    let right_path = PathBuf::from(right);
+    if let (Ok(left_canonical), Ok(right_canonical)) =
+        (left_path.canonicalize(), right_path.canonicalize())
+    {
+        return left_canonical == right_canonical;
+    }
+
+    #[cfg(windows)]
+    {
+        left.trim_end_matches(['\\', '/'])
+            .eq_ignore_ascii_case(right.trim_end_matches(['\\', '/']))
+    }
+
+    #[cfg(not(windows))]
+    {
+        left.trim_end_matches('/').eq(right.trim_end_matches('/'))
+    }
+}
+
+fn add_one_folder(
    app: AppHandle,
-    db: State<'_, DbState>,
-    watcher: State<'_, WatcherHandle>,
+    db: DbPool,
+    watcher: WatcherHandle,
    path: String,
-) -> Result<Folder, String> {
+) -> Result<AddOutcome, String> {
    let folder_path = PathBuf::from(&path);

    if !folder_path.exists() || !folder_path.is_dir() {
        return Err("Path is not a valid directory".into());
    }

+    {
+        let conn = db.get().map_err(|e| e.to_string())?;
+        if let Some(folder) = db::get_folders(&conn)
+            .map_err(|e| e.to_string())?
+            .into_iter()
+            .find(|folder| paths_match(&folder.path, &path))
+        {
+            return Ok(AddOutcome::Skipped(folder));
+        }
+    }
+
    // Let the webview load media from this folder via the asset protocol.
    if let Err(error) = app
        .asset_protocol_scope()
@@ -256,9 +302,46 @@ pub async fn add_folder(
        .ok_or("Folder not found after insert")?;

    watcher.add_folder(folder_path.clone(), folder_id);
-    indexer::index_folder(app, db.inner().clone(), folder_id, folder_path);
+    indexer::index_folder(app, db, folder_id, folder_path);

-    Ok(folder)
+    Ok(AddOutcome::Added(folder))
+}
+
+#[tauri::command]
+pub async fn add_folder(
+    app: AppHandle,
+    db: State<'_, DbState>,
+    watcher: State<'_, WatcherHandle>,
+    path: String,
+) -> Result<Folder, String> {
+    match add_one_folder(app, db.inner().clone(), watcher.inner().clone(), path)? {
+        AddOutcome::Added(folder) => Ok(folder),
+        AddOutcome::Skipped(folder) => Ok(folder),
+    }
+}
+
+#[tauri::command]
+pub async fn add_folders(
+    app: AppHandle,
+    db: State<'_, DbState>,
+    watcher: State<'_, WatcherHandle>,
+    paths: Vec<String>,
+) -> Result<Vec<FolderAddResult>, String> {
+    Ok(paths
+        .into_iter()
+        .map(|path| {
+            match add_one_folder(
+                app.clone(),
+                db.inner().clone(),
+                watcher.inner().clone(),
+                path,
+            ) {
+                Ok(AddOutcome::Added(folder)) => FolderAddResult::Added(folder),
+                Ok(AddOutcome::Skipped(folder)) => FolderAddResult::Skipped(folder.path),
+                Err(error) => FolderAddResult::Error(error),
+            }
+        })
+        .collect())
 }

 #[tauri::command]
@@ -267,6 +350,164 @@ pub async fn get_folders(db: State<'_, DbState>) -> Result<Vec<Folder>, String>
    db::get_folders(&conn).map_err(|e| e.to_string())
 }

+#[derive(Serialize)]
+pub struct DirListing {
+    pub current: Option<String>,
+    pub parent: Option<String>,
+    pub entries: Vec<DirEntry>,
+}
+
+#[derive(Serialize)]
+pub struct DirEntry {
+    pub name: String,
+    pub path: String,
+    pub has_children: bool,
+}
+
+fn path_to_string(path: &Path) -> String {
+    path.to_string_lossy().to_string()
+}
+
+fn directory_has_children(path: &Path) -> bool {
+    std::fs::read_dir(path)
+        .map(|mut entries| {
+            entries.any(|entry| {
+                entry
+                    .ok()
+                    .and_then(|entry| entry.file_type().ok())
+                    .map(|file_type| file_type.is_dir())
+                    .unwrap_or(false)
+            })
+        })
+        .unwrap_or(false)
+}
+
+fn common_root_candidates() -> Vec<PathBuf> {
+    let mut roots = Vec::new();
+
+    #[cfg(windows)]
+    {
+        for letter in b'A'..=b'Z' {
+            let drive = format!("{}:\\", letter as char);
+            let path = PathBuf::from(&drive);
+            if path.exists() {
+                roots.push(path);
+            }
+        }
+
+        if let Ok(profile) = std::env::var("USERPROFILE") {
+            let home = PathBuf::from(profile);
+            roots.push(home.clone());
+            for child in ["Pictures", "Videos", "Desktop", "Downloads"] {
+                roots.push(home.join(child));
+            }
+        }
+    }
+
+    #[cfg(not(windows))]
+    {
+        if let Ok(home) = std::env::var("HOME") {
+            roots.push(PathBuf::from(home));
+        }
+        roots.push(PathBuf::from("/"));
+    }
+
+    roots
+}
+
+fn list_roots() -> Vec<DirEntry> {
+    let mut seen = HashSet::new();
+    let mut entries: Vec<DirEntry> = common_root_candidates()
+        .into_iter()
+        .filter(|path| path.exists() && path.is_dir())
+        .filter_map(|path| {
+            let path_string = path_to_string(&path);
+            if !seen.insert(path_string.clone()) {
+                return None;
+            }
+            let name = path
+                .file_name()
+                .map(|name| name.to_string_lossy().to_string())
+                .filter(|name| !name.is_empty())
+                .unwrap_or_else(|| path_string.clone());
+            Some(DirEntry {
+                name,
+                path: path_string,
+                has_children: directory_has_children(&path),
+            })
+        })
+        .collect();
+    entries.sort_by_key(|entry| entry.name.to_lowercase());
+    entries
+}
+
+fn list_child_directories(path: &Path) -> Result<Vec<DirEntry>, String> {
+    let mut entries = Vec::new();
+    let read_dir = std::fs::read_dir(path).map_err(|e| e.to_string())?;
+
+    for entry in read_dir.flatten() {
+        let file_name = entry.file_name();
+        let name = file_name.to_string_lossy().to_string();
+        if name.starts_with('.') {
+            continue;
+        }
+
+        let child_path = entry.path();
+        let is_dir = entry
+            .file_type()
+            .map(|file_type| file_type.is_dir())
+            .unwrap_or(false);
+        if !is_dir {
+            continue;
+        }
+
+        entries.push(DirEntry {
+            name,
+            path: path_to_string(&child_path),
+            has_children: directory_has_children(&child_path),
+        });
+    }
+
+    entries.sort_by_key(|entry| entry.name.to_lowercase());
+    Ok(entries)
+}
+
+#[tauri::command]
+pub async fn list_directories(path: Option<String>) -> Result<DirListing, String> {
+    let trimmed = path.as_deref().map(str::trim).unwrap_or("");
+    if trimmed.is_empty() {
+        return Ok(DirListing {
+            current: None,
+            parent: None,
+            entries: list_roots(),
+        });
+    }
+
+    let current_path = PathBuf::from(trimmed);
+    let parent = current_path.parent().map(path_to_string);
+    let entries = list_child_directories(&current_path)?;
+
+    Ok(DirListing {
+        current: Some(path_to_string(&current_path)),
+        parent,
+        entries,
+    })
+}
+
+#[derive(Deserialize)]
+pub struct ReorderFoldersParams {
+    pub folder_ids: Vec<i64>,
+}
+
+#[tauri::command]
+pub async fn reorder_folders(
+    db: State<'_, DbState>,
+    params: ReorderFoldersParams,
+) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::reorder_folders(&conn, &params.folder_ids).map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 pub async fn get_background_job_progress(
    db: State<'_, DbState>,
@@ -315,6 +556,7 @@ pub async fn get_images(
    let favorites_only = params.favorites_only.unwrap_or(false);
    let rating_min = params.rating_min.unwrap_or(0);
    let embedding_failed_only = params.embedding_failed_only.unwrap_or(false);
+    let tagging_failed_only = params.tagging_failed_only.unwrap_or(false);

    let total = db::count_images(
        &conn,
@@ -324,6 +566,7 @@ pub async fn get_images(
        favorites_only,
        rating_min,
        embedding_failed_only,
+        tagging_failed_only,
    )
    .map_err(|e| e.to_string())?;

@@ -335,6 +578,7 @@ pub async fn get_images(
        favorites_only,
        rating_min,
        embedding_failed_only,
+        tagging_failed_only,
        sort,
        offset,
        limit,
@@ -580,6 +824,34 @@ pub async fn retry_failed_embeddings(
    db::retry_failed_embedding_jobs(&conn, params.folder_id).map_err(|e| e.to_string())
 }

+#[derive(Serialize)]
+pub struct FailedImageItem {
+    pub image_id: i64,
+    pub filename: String,
+    pub path: String,
+    pub error: Option<String>,
+}
+
+#[tauri::command]
+pub async fn get_failed_tagging_images(
+    db: State<'_, DbState>,
+    folder_id: i64,
+) -> Result<Vec<FailedImageItem>, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::get_failed_tagging_images(&conn, folder_id)
+        .map(|rows| {
+            rows.into_iter()
+                .map(|(image_id, filename, path, error)| FailedImageItem {
+                    image_id,
+                    filename,
+                    path,
+                    error,
+                })
+                .collect()
+        })
+        .map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 pub async fn semantic_search_images(
    db: State<'_, DbState>,
@@ -1080,7 +1352,7 @@ pub async fn find_duplicates(
                        }
                    };
                    let done = stat_counter.fetch_add(1, Ordering::Relaxed) + 1;
-                    if done % 100 == 0 || done == total {
+                    if done.is_multiple_of(100) || done == total {
                        let _ = app_hash.emit(
                            "duplicate_scan_progress",
                            DuplicateScanProgress {
@@ -1141,7 +1413,7 @@ pub async fn find_duplicates(
                        hash_skipped.fetch_add(1, Ordering::Relaxed);
                    }
                    let done = counter.fetch_add(1, Ordering::Relaxed) + 1;
-                    if done % 100 == 0 || done == c_total {
+                    if done.is_multiple_of(100) || done == c_total {
                        let _ = app_hash.emit(
                            "duplicate_scan_progress",
                            DuplicateScanProgress {
@@ -1230,7 +1502,7 @@ pub async fn find_duplicates(
                                confirm_skipped.fetch_add(1, Ordering::Relaxed);
                            }
                            let done = counter.fetch_add(1, Ordering::Relaxed) + 1;
-                            if done % 100 == 0 || done == confirming_total {
+                            if done.is_multiple_of(100) || done == confirming_total {
                                let _ = app_confirm.emit(
                                    "duplicate_scan_progress",
                                    DuplicateScanProgress {
@@ -1283,7 +1555,7 @@ pub async fn find_duplicates(
        .collect();

    // Largest duplicates first — wastes the most space
-    groups.sort_by(|a, b| b.file_size.cmp(&a.file_size));
+    groups.sort_by_key(|group| std::cmp::Reverse(group.file_size));

    // Persist results so they survive restart — best-effort, ignore errors.
    let folder_scope = match folder_id {
@@ -1468,6 +1740,7 @@ fn kmeans_cosine(
 pub struct FailedEmbeddingItem {
    pub image_id: i64,
    pub filename: String,
+    pub path: String,
    pub error: Option<String>,
 }

@@ -1480,9 +1753,10 @@ pub async fn get_failed_embedding_images(
    let rows = db::get_failed_embedding_images(&conn, folder_id).map_err(|e| e.to_string())?;
    Ok(rows
        .into_iter()
-        .map(|(image_id, filename, error)| FailedEmbeddingItem {
+        .map(|(image_id, filename, path, error)| FailedEmbeddingItem {
            image_id,
            filename,
+            path,
            error,
        })
        .collect())
@@ -1939,6 +2213,14 @@ pub async fn vacuum_database(
    })
 }

+#[tauri::command]
+pub async fn rebuild_semantic_index(db: State<'_, DbState>) -> Result<usize, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    // Serialize against the embedding worker (which writes under the same lock)
+    // so the rebuild can't interleave with an in-flight embedding batch.
+    indexer::with_db_write_lock(|| db::reset_all_embeddings(&conn)).map_err(|e| e.to_string())
+}
+
 #[derive(serde::Serialize)]
 pub struct OrphanedThumbnailsInfo {
    pub count: u64,
@@ -2148,3 +2430,33 @@ pub async fn set_onboarding_completed(app: AppHandle, completed: bool) -> Result
    )
    .map_err(|e| e.to_string())
 }
+
+const LAST_SEEN_VERSION_FILE: &str = "settings/last_seen_version.txt";
+
+/// The app version recorded on the previous launch. `None` when the file is
+/// absent (fresh install, or first launch since this was introduced) — the
+/// frontend uses that to decide whether to surface the "What's New" prompt.
+#[tauri::command]
+pub async fn get_last_seen_version(app: AppHandle) -> Result<Option<String>, String> {
+    let app_dir = app.path().app_data_dir().map_err(|e| e.to_string())?;
+    let path = app_dir.join(LAST_SEEN_VERSION_FILE);
+    if !path.exists() {
+        return Ok(None);
+    }
+    let content = std::fs::read_to_string(&path).map_err(|e| e.to_string())?;
+    let trimmed = content.trim();
+    Ok(if trimmed.is_empty() {
+        None
+    } else {
+        Some(trimmed.to_string())
+    })
+}
+
+#[tauri::command]
+pub async fn set_last_seen_version(app: AppHandle, version: String) -> Result<(), String> {
+    let app_dir = app.path().app_data_dir().map_err(|e| e.to_string())?;
+    let settings_dir = app_dir.join("settings");
+    std::fs::create_dir_all(&settings_dir).map_err(|e| e.to_string())?;
+    std::fs::write(settings_dir.join("last_seen_version.txt"), version.trim())
+        .map_err(|e| e.to_string())
+}
@@ -31,6 +31,7 @@ pub struct Folder {
    pub image_count: i64,
    pub indexed_at: Option<String>,
    pub scan_error: Option<String>,
+    pub sort_order: i64,
 }

 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -113,6 +114,7 @@ pub struct TaggingJob {
    pub image_id: i64,
    pub folder_id: i64,
    pub path: String,
+    pub thumbnail_path: Option<String>,
 }

 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -322,6 +324,11 @@ pub fn migrate(conn: &Connection) -> Result<()> {
    // on databases that predate Phase 1.
    conn.execute_batch("CREATE INDEX IF NOT EXISTS idx_images_taken_at ON images(taken_at);")?;
    ensure_column(conn, "folders", "scan_error", "TEXT")?;
+    ensure_column(conn, "folders", "sort_order", "INTEGER NOT NULL DEFAULT 0")?;
+    conn.execute(
+        "UPDATE folders SET sort_order = id WHERE sort_order = 0",
+        [],
+    )?;

    vector::migrate(conn)?;
    Ok(())
@@ -329,7 +336,8 @@ pub fn migrate(conn: &Connection) -> Result<()> {

 pub fn insert_folder(conn: &Connection, path: &str, name: &str) -> Result<i64> {
    conn.execute(
-        "INSERT OR IGNORE INTO folders (path, name) VALUES (?1, ?2)",
+        "INSERT OR IGNORE INTO folders (path, name, sort_order)
+         VALUES (?1, ?2, COALESCE((SELECT MAX(sort_order) + 1 FROM folders), 1))",
        params![path, name],
    )?;
    let id: i64 = conn.query_row(
@@ -489,6 +497,41 @@ pub fn repair_embedding_consistency(conn: &Connection) -> Result<(usize, usize)>
    Ok((orphaned_vectors, missing_vector_ids.len()))
 }

+/// Full semantic-index rebuild: recreate the vector tables at the current model
+/// dimension and re-queue every image for embedding. Used by the maintenance
+/// action when the index is stale or its dimension no longer matches the model
+/// (which otherwise surfaces as a "dimension mismatch" search error). Returns the
+/// number of images re-queued.
+pub fn reset_all_embeddings(conn: &Connection) -> Result<usize> {
+    // Recreate the vector tables at the current model dimension first (DDL, kept
+    // out of the transaction below). The caller holds the DB write lock, so the
+    // embedding worker can't interleave a write between this and the queue reset.
+    vector::rebuild_tables(conn)?;
+    let tx = conn.unchecked_transaction()?;
+    tx.execute(
+        "UPDATE images
+         SET embedding_status = 'pending',
+             embedding_model = NULL,
+             embedding_updated_at = NULL,
+             embedding_error = NULL",
+        [],
+    )?;
+    tx.execute("DELETE FROM embedding_jobs", [])?;
+    let queued = tx.execute(
+        "INSERT INTO embedding_jobs (image_id, status, attempts, last_error, created_at, updated_at)
+         SELECT id, 'pending', 0, NULL, datetime('now'), datetime('now')
+         FROM images",
+        [],
+    )?;
+    tx.execute(
+        "INSERT INTO app_kv (key, value) VALUES ('embedding_revision', 1)
+         ON CONFLICT(key) DO UPDATE SET value = value + 1",
+        [],
+    )?;
+    tx.commit()?;
+    Ok(queued)
+}
+
 pub fn retry_failed_embedding_jobs(conn: &Connection, folder_id: i64) -> Result<usize> {
    // Only re-queue images that are actually embeddable right now.
    // Videos without a thumbnail would just fail again immediately, so skip them —
@@ -814,6 +857,7 @@ pub fn get_pending_embedding_jobs(
         FROM embedding_jobs j
         JOIN images i ON i.id = j.image_id
         WHERE status = 'pending'
+           AND NOT (i.media_kind = 'video' AND i.thumbnail_path IS NULL)
           {}
         ORDER BY j.updated_at, j.image_id
         LIMIT ?1",
@@ -1159,14 +1203,14 @@ fn get_pending_thumbnail_jobs_excluding(
    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
 }

-/// Video jobs need FFmpeg; while it isn't provisioned they must be invisible
-/// to both claiming and the tier-priority checks, or pending video jobs would
-/// stall every lower tier indefinitely.
+/// Video and AVIF thumbnail jobs need FFmpeg; while it isn't provisioned they
+/// must be invisible to both claiming and tier-priority checks, or pending
+/// FFmpeg-backed jobs would stall every lower tier indefinitely.
 fn media_kind_clause(include_videos: bool) -> &'static str {
    if include_videos {
        ""
    } else {
-        "AND i.media_kind = 'image'"
+        "AND i.media_kind = 'image' AND lower(i.path) NOT GLOB '*.avif'"
    }
 }

@@ -1224,7 +1268,12 @@ pub fn has_claimable_embedding_jobs(
    conn: &Connection,
    excluded_folder_ids: &std::collections::HashSet<i64>,
 ) -> Result<bool> {
-    has_claimable_jobs(conn, "embedding_jobs", "", excluded_folder_ids)
+    has_claimable_jobs(
+        conn,
+        "embedding_jobs",
+        "AND NOT (i.media_kind = 'video' AND i.thumbnail_path IS NULL)",
+        excluded_folder_ids,
+    )
 }

 pub fn claim_thumbnail_jobs(
@@ -1507,7 +1556,9 @@ pub fn get_images_by_ids(conn: &Connection, image_ids: &[i64]) -> Result<Vec<Ima

 pub fn get_folders(conn: &Connection) -> Result<Vec<Folder>> {
    let mut stmt = conn.prepare(
-        "SELECT id, path, name, image_count, indexed_at, scan_error FROM folders ORDER BY name",
+        "SELECT id, path, name, image_count, indexed_at, scan_error, sort_order
+         FROM folders
+         ORDER BY sort_order, id",
    )?;
    let rows = stmt.query_map([], |row| {
        Ok(Folder {
@@ -1517,11 +1568,91 @@ pub fn get_folders(conn: &Connection) -> Result<Vec<Folder>> {
            image_count: row.get(3)?,
            indexed_at: row.get(4)?,
            scan_error: row.get(5)?,
+            sort_order: row.get(6)?,
        })
    })?;
    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
 }

+pub fn reorder_folders(conn: &Connection, folder_ids: &[i64]) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    for (index, folder_id) in folder_ids.iter().enumerate() {
+        tx.execute(
+            "UPDATE folders SET sort_order = ?2 WHERE id = ?1",
+            params![folder_id, index as i64 + 1],
+        )?;
+    }
+    tx.commit()?;
+    Ok(())
+}
+
+pub fn repair_deferred_embedding_jobs(conn: &Connection) -> Result<usize> {
+    let pattern = "No thumbnail available yet for%";
+    let repaired = conn.execute(
+        "UPDATE embedding_jobs
+         SET status = 'pending', last_error = NULL, updated_at = datetime('now')
+         WHERE status = 'failed'
+           AND last_error LIKE ?1
+           AND image_id IN (
+               SELECT id FROM images WHERE media_kind = 'video' OR lower(path) GLOB '*.avif'
+           )",
+        [pattern],
+    )?;
+    conn.execute(
+        "UPDATE images
+         SET embedding_status = 'pending', embedding_error = NULL
+         WHERE embedding_status = 'failed'
+           AND embedding_error LIKE ?1
+           AND (media_kind = 'video' OR lower(path) GLOB '*.avif')",
+        [pattern],
+    )?;
+    Ok(repaired)
+}
+
+pub fn repair_avif_jobs(conn: &Connection) -> Result<usize> {
+    let unsupported_pattern = "%Avif%not supported%";
+    let thumbnail_repaired = conn.execute(
+        "UPDATE thumbnail_jobs
+         SET status = 'pending', last_error = NULL, updated_at = datetime('now')
+         WHERE status = 'failed'
+           AND image_id IN (SELECT id FROM images WHERE lower(path) GLOB '*.avif')
+           AND last_error LIKE ?1",
+        [unsupported_pattern],
+    )?;
+    let embedding_repaired = conn.execute(
+        "UPDATE embedding_jobs
+         SET status = 'pending', last_error = NULL, updated_at = datetime('now')
+         WHERE status = 'failed'
+           AND image_id IN (SELECT id FROM images WHERE lower(path) GLOB '*.avif')
+           AND last_error LIKE ?1",
+        [unsupported_pattern],
+    )?;
+    conn.execute(
+        "UPDATE images
+         SET embedding_status = 'pending', embedding_error = NULL
+         WHERE embedding_status = 'failed'
+           AND lower(path) GLOB '*.avif'
+           AND embedding_error LIKE ?1",
+        [unsupported_pattern],
+    )?;
+    let tagging_repaired = conn.execute(
+        "UPDATE tagging_jobs
+         SET status = 'pending', last_error = NULL, updated_at = datetime('now')
+         WHERE status = 'failed'
+           AND image_id IN (SELECT id FROM images WHERE lower(path) GLOB '*.avif')
+           AND last_error LIKE ?1",
+        [unsupported_pattern],
+    )?;
+    conn.execute(
+        "UPDATE images
+         SET ai_tagger_error = NULL
+         WHERE lower(path) GLOB '*.avif'
+           AND ai_tagger_error LIKE ?1",
+        [unsupported_pattern],
+    )?;
+    Ok(thumbnail_repaired + embedding_repaired + tagging_repaired)
+}
+
 pub fn rename_folder(conn: &Connection, folder_id: i64, new_name: &str) -> Result<()> {
    conn.execute(
        "UPDATE folders SET name = ?2 WHERE id = ?1",
@@ -1581,6 +1712,7 @@ pub fn get_images(
    favorites_only: bool,
    rating_min: i64,
    embedding_failed_only: bool,
+    tagging_failed_only: bool,
    sort: &str,
    offset: i64,
    limit: i64,
@@ -1604,6 +1736,7 @@ pub fn get_images(
    let search_pattern = search.map(|value| format!("%{value}%"));
    let favorites_flag = i64::from(favorites_only);
    let embedding_failed_flag = i64::from(embedding_failed_only);
+    let tagging_failed_flag = i64::from(tagging_failed_only);
    let sql = format!(
        "SELECT id, folder_id, path, filename, thumbnail_path, width, height, file_size, created_at, modified_at, taken_at, mime_type,
                media_kind, duration_ms, video_codec, audio_codec, metadata_updated_at, metadata_error,
@@ -1617,8 +1750,9 @@ pub fn get_images(
           AND (?4 = 0 OR favorite = 1)
           AND rating >= ?5
           AND (?6 = 0 OR embedding_status = 'failed')
+           AND (?7 = 0 OR ai_tagger_error IS NOT NULL)
         ORDER BY {order}
-         LIMIT ?7 OFFSET ?8"
+         LIMIT ?8 OFFSET ?9"
    );
    let mut stmt = conn.prepare(&sql)?;
    let rows = stmt.query_map(
@@ -1629,6 +1763,7 @@ pub fn get_images(
            favorites_flag,
            rating_min,
            embedding_failed_flag,
+            tagging_failed_flag,
            limit,
            offset
        ],
@@ -1637,6 +1772,7 @@ pub fn get_images(
    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
 }

+#[allow(clippy::too_many_arguments)]
 pub fn count_images(
    conn: &Connection,
    folder_id: Option<i64>,
@@ -1645,11 +1781,13 @@ pub fn count_images(
    favorites_only: bool,
    rating_min: i64,
    embedding_failed_only: bool,
+    tagging_failed_only: bool,
 ) -> Result<i64> {
    let search_pattern = search.map(|value| format!("%{value}%"));

    let favorites_flag = i64::from(favorites_only);
    let embedding_failed_flag = i64::from(embedding_failed_only);
+    let tagging_failed_flag = i64::from(tagging_failed_only);
    let count = conn.query_row(
        "SELECT COUNT(*) FROM images
         WHERE (?1 IS NULL OR folder_id = ?1)
@@ -1657,14 +1795,16 @@ pub fn count_images(
           AND (?3 IS NULL OR media_kind = ?3)
           AND (?4 = 0 OR favorite = 1)
           AND rating >= ?5
-           AND (?6 = 0 OR embedding_status = 'failed')",
+           AND (?6 = 0 OR embedding_status = 'failed')
+           AND (?7 = 0 OR ai_tagger_error IS NOT NULL)",
        params![
            folder_id,
            search_pattern,
            media_kind,
            favorites_flag,
            rating_min,
-            embedding_failed_flag
+            embedding_failed_flag,
+            tagging_failed_flag
        ],
        |row| row.get(0),
    )?;
@@ -1876,12 +2016,14 @@ pub fn get_explore_tags(
    Ok(rows)
 }

+type FailedEmbeddingRow = (i64, String, String, Option<String>);
+
 pub fn get_failed_embedding_images(
    conn: &Connection,
    folder_id: i64,
-) -> Result<Vec<(i64, String, Option<String>)>> {
+) -> Result<Vec<FailedEmbeddingRow>> {
    let mut stmt = conn.prepare(
-        "SELECT id, filename, embedding_error
+        "SELECT id, filename, path, embedding_error
         FROM images
         WHERE folder_id = ?1 AND embedding_status = 'failed'
         ORDER BY filename",
@@ -1890,7 +2032,32 @@ pub fn get_failed_embedding_images(
        Ok((
            row.get::<_, i64>(0)?,
            row.get::<_, String>(1)?,
-            row.get::<_, Option<String>>(2)?,
+            row.get::<_, String>(2)?,
+            row.get::<_, Option<String>>(3)?,
+        ))
+    })?;
+    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
+}
+
+type FailedTaggingRow = (i64, String, String, Option<String>);
+
+pub fn get_failed_tagging_images(
+    conn: &Connection,
+    folder_id: i64,
+) -> Result<Vec<FailedTaggingRow>> {
+    let mut stmt = conn.prepare(
+        "SELECT i.id, i.filename, i.path, COALESCE(j.last_error, i.ai_tagger_error)
+         FROM images i
+         LEFT JOIN tagging_jobs j ON j.image_id = i.id AND j.status = 'failed'
+         WHERE i.folder_id = ?1 AND i.ai_tagger_error IS NOT NULL
+         ORDER BY i.filename",
+    )?;
+    let rows = stmt.query_map([folder_id], |row| {
+        Ok((
+            row.get::<_, i64>(0)?,
+            row.get::<_, String>(1)?,
+            row.get::<_, String>(2)?,
+            row.get::<_, Option<String>>(3)?,
        ))
    })?;
    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
@@ -1980,10 +2147,11 @@ fn get_pending_tagging_jobs_excluding(
    limit: usize,
 ) -> Result<Vec<TaggingJob>> {
    let sql = format!(
-        "SELECT j.image_id, i.folder_id, i.path
+        "SELECT j.image_id, i.folder_id, i.path, i.thumbnail_path
         FROM tagging_jobs j
         JOIN images i ON i.id = j.image_id
         WHERE j.status = 'pending'
+           AND NOT (lower(i.path) GLOB '*.avif' AND i.thumbnail_path IS NULL)
           {}
         ORDER BY j.created_at ASC
         LIMIT ?1",
@@ -1996,6 +2164,7 @@ fn get_pending_tagging_jobs_excluding(
                image_id: row.get(0)?,
                folder_id: row.get(1)?,
                path: row.get(2)?,
+                thumbnail_path: row.get(3)?,
            })
        })?
        .collect::<rusqlite::Result<Vec<_>>>()?;
@@ -220,19 +220,19 @@ fn load_images(paths: &[PathBuf], image_size: usize) -> Result<Tensor> {

 /// Returns the path that should be fed to the CLIP image embedder for a given media file.
 ///
-/// For videos the thumbnail image is used (because CLIP only understands still images).
-/// If a video has no thumbnail yet, an error is returned — the caller should mark the
-/// embedding job as failed rather than trying to decode the raw video file.
+/// For videos and AVIFs the thumbnail image is used because CLIP preprocessing
+/// only uses decoders from the `image` crate, while AVIF is decoded through
+/// FFmpeg into a JPEG thumbnail.
 pub fn embedding_source_path(
    path: &str,
    thumbnail_path: Option<&str>,
    media_kind: &str,
 ) -> Result<PathBuf> {
-    if media_kind == "video" {
+    if media_kind == "video" || is_avif_path(path) {
        match thumbnail_path {
            Some(thumb) => Ok(PathBuf::from(thumb)),
            None => Err(anyhow::anyhow!(
-                "No thumbnail available yet for video '{}' — embedding deferred until thumbnail is generated",
+                "No thumbnail available yet for '{}' — embedding deferred until thumbnail is generated",
                std::path::Path::new(path)
                    .file_name()
                    .map(|n| n.to_string_lossy())
@@ -243,3 +243,10 @@ pub fn embedding_source_path(
        Ok(PathBuf::from(path))
    }
 }
+
+fn is_avif_path(path: &str) -> bool {
+    std::path::Path::new(path)
+        .extension()
+        .and_then(|ext| ext.to_str())
+        .is_some_and(|ext| ext.eq_ignore_ascii_case("avif"))
+}
@@ -18,7 +18,7 @@ use tauri::{AppHandle, Emitter};
 use walkdir::WalkDir;

 const IMAGE_EXTENSIONS: &[&str] = &[
-    "jpg", "jpeg", "png", "gif", "bmp", "tiff", "tif", "webp", "avif", "heic", "heif",
+    "jpg", "jpeg", "png", "gif", "bmp", "tiff", "tif", "webp", "avif",
 ];

 const VIDEO_EXTENSIONS: &[&str] = &["mp4", "mov", "m4v", "webm"];
@@ -550,6 +550,9 @@ fn build_record(
    let filename = path.file_name()?.to_string_lossy().to_string();
    let metadata = std::fs::metadata(path).ok()?;
    let file_size = metadata.len() as i64;
+    if file_size == 0 {
+        return None;
+    }
    let modified_at = metadata.modified().ok().map(|time| {
        let date_time: chrono::DateTime<chrono::Utc> = time.into();
        date_time.to_rfc3339()
@@ -660,10 +663,13 @@ fn process_thumbnail_batch(

    let (image_jobs, video_jobs): (Vec<_>, Vec<_>) =
        jobs.into_iter().partition(|job| job.media_kind == "image");
+    let (avif_jobs, raster_jobs): (Vec<_>, Vec<_>) = image_jobs
+        .into_iter()
+        .partition(|job| is_avif_path(Path::new(&job.path)));

    // Images: parallel decode, committed as one batch.
-    if !image_jobs.is_empty() {
-        let results = image_jobs
+    if !raster_jobs.is_empty() {
+        let results = raster_jobs
            .par_iter()
            .map(|job| {
                (
@@ -675,6 +681,15 @@ fn process_thumbnail_batch(
        persist_thumbnail_results(app, pool, results)?;
    }

+    // AVIF: FFmpeg-backed decode, like videos. Keep this off the shared rayon
+    // pool because each subprocess blocks its worker thread.
+    for job in &avif_jobs {
+        let result =
+            thumbnail::generate_avif_thumbnail(media_tools, Path::new(&job.path), cache_dir)
+                .map(Some);
+        persist_thumbnail_results(app, pool, vec![(job.image_id, result)])?;
+    }
+
    // Videos: sequential, off the rayon pool — each ffmpeg call blocks its
    // thread, and a video-heavy batch on the shared pool would starve image
    // decoding across all workers. Committed per item so progress keeps
@@ -746,6 +761,12 @@ fn persist_thumbnail_results(
    Ok(())
 }

+fn is_avif_path(path: &Path) -> bool {
+    path.extension()
+        .and_then(|ext| ext.to_str())
+        .is_some_and(|ext| ext.eq_ignore_ascii_case("avif"))
+}
+
 /// Returns `Ok(true)` if a batch was claimed and processed, `Ok(false)` if
 /// the queue was empty.
 fn process_metadata_batch(
@@ -869,20 +890,20 @@ fn process_embedding_batch(
    let embedder = embedder.as_ref().expect("embedder should be initialized");

    let infer_started_at = Instant::now();
-    // Resolve the source path for each job. Videos without a thumbnail produce an Err
-    // here — those jobs are marked failed immediately without going to the embedder.
+    // Resolve each source path. Video jobs without thumbnails are not claimable, so an
+    // error here represents a real race or missing thumbnail rather than normal deferral.
    let source_results: Vec<Result<PathBuf>> = jobs
        .iter()
        .map(|job| embedding_source_path(&job.path, job.thumbnail_path.as_deref(), &job.media_kind))
        .collect();

-    // Separate jobs with a valid source from those that fail early (e.g. video with no thumbnail).
+    // Separate jobs with a valid source from genuine early failures.
    let mut embeddable_indices: Vec<usize> = Vec::new();
    let mut embeddable_paths: Vec<PathBuf> = Vec::new();
    // image_id -> early error message for jobs that cannot be embedded yet
    let mut pre_failed: HashMap<i64, String> = HashMap::new();

-    for (i, (job, result)) in jobs.iter().zip(source_results.into_iter()).enumerate() {
+    for (i, (job, result)) in jobs.iter().zip(source_results).enumerate() {
        match result {
            Ok(path) => {
                embeddable_indices.push(i);
@@ -904,16 +925,13 @@ fn process_embedding_batch(

        match embedder.embed_images(&embeddable_paths) {
            Ok(embeddings) => {
-                for (job, embedding) in embeddable_jobs.iter().zip(embeddings.into_iter()) {
+                for (job, embedding) in embeddable_jobs.iter().zip(embeddings) {
                    embed_results.insert(job.image_id, Ok(embedding));
                }
            }
            Err(batch_error) => {
                log::error!("Embedding batch fallback to per-image mode: {batch_error}");
-                for (job, source_path) in embeddable_jobs
-                    .into_iter()
-                    .zip(embeddable_paths.into_iter())
-                {
+                for (job, source_path) in embeddable_jobs.into_iter().zip(embeddable_paths) {
                    embed_results.insert(job.image_id, embedder.embed_image(&source_path));
                }
            }
@@ -1142,9 +1160,14 @@ fn process_tagging_batch(
    let tag_results = jobs
        .iter()
        .map(|job| {
+            let source_path = if is_avif_path(Path::new(&job.path)) {
+                job.thumbnail_path.as_deref().unwrap_or(&job.path)
+            } else {
+                &job.path
+            };
            (
                job.clone(),
-                tagger_ref.run(Path::new(&job.path), tagger::DEFAULT_MAX_TAGS),
+                tagger_ref.run(Path::new(source_path), tagger::DEFAULT_MAX_TAGS),
            )
        })
        .collect::<Vec<_>>();
@@ -1285,7 +1308,7 @@ fn max_worker_fetch_size(active_folders: &HashSet<i64>) -> usize {
        .unwrap_or(StorageProfile::Balanced.worker_fetch_size())
 }

-fn with_db_write_lock<T>(operation: impl FnOnce() -> Result<T>) -> Result<T> {
+pub fn with_db_write_lock<T>(operation: impl FnOnce() -> Result<T>) -> Result<T> {
    let lock = DB_WRITE_LOCK.get_or_init(|| Mutex::new(()));
    let _guard = lock.lock().unwrap();
    operation()
@@ -1372,7 +1395,6 @@ fn mime_for_ext(ext: &str) -> &'static str {
        "webp" => "image/webp",
        "tiff" | "tif" => "image/tiff",
        "avif" => "image/avif",
-        "heic" | "heif" => "image/heif",
        "mp4" | "m4v" => "video/mp4",
        "mov" => "video/quicktime",
        "webm" => "video/webm",
@@ -53,7 +53,7 @@ pub fn run() {
            std::fs::create_dir_all(&app_dir).expect("Failed to create app data dir");

            // FFmpeg provisioning happens in the background so the window
-            // appears immediately; workers gate video jobs on readiness and
+            // appears immediately; workers gate video/AVIF jobs on readiness and
            // the onboarding/Settings UI shows progress and retry.
            media::spawn_ffmpeg_provision(app.handle().clone());

@@ -65,6 +65,16 @@ pub fn run() {
                let conn = pool.get().expect("Failed to get connection for migration");
                db::migrate(&conn).expect("Failed to run migrations");
                db::reset_inflight_jobs(&conn).expect("Failed to reset inflight jobs");
+                let repaired_deferred = db::repair_deferred_embedding_jobs(&conn)
+                    .expect("Failed to repair deferred embedding jobs");
+                if repaired_deferred > 0 {
+                    log::info!("Requeued {repaired_deferred} deferred embedding jobs.");
+                }
+                let repaired_avif =
+                    db::repair_avif_jobs(&conn).expect("Failed to repair AVIF jobs");
+                if repaired_avif > 0 {
+                    log::info!("Requeued {repaired_avif} AVIF jobs.");
+                }
                let backfilled =
                    db::backfill_embedding_jobs(&conn).expect("Failed to backfill embedding jobs");
                if backfilled > 0 {
@@ -123,7 +133,10 @@ pub fn run() {
        })
        .invoke_handler(tauri::generate_handler![
            commands::add_folder,
+            commands::add_folders,
+            commands::list_directories,
            commands::get_folders,
+            commands::reorder_folders,
            commands::get_background_job_progress,
            commands::remove_folder,
            commands::get_images,
@@ -156,6 +169,7 @@ pub fn run() {
            commands::get_explore_tags,
            commands::get_images_by_ids,
            commands::get_failed_embedding_images,
+            commands::get_failed_tagging_images,
            commands::get_tagger_model_status,
            commands::get_tagger_acceleration,
            commands::set_tagger_acceleration,
@@ -185,6 +199,7 @@ pub fn run() {
            commands::open_app_data_folder,
            commands::get_database_info,
            commands::vacuum_database,
+            commands::rebuild_semantic_index,
            commands::get_orphaned_thumbnails_info,
            commands::cleanup_orphaned_thumbnails,
            commands::get_muted_folder_ids,
@@ -193,6 +208,8 @@ pub fn run() {
            commands::retry_ffmpeg_download,
            commands::get_onboarding_completed,
            commands::set_onboarding_completed,
+            commands::get_last_seen_version,
+            commands::set_last_seen_version,
            commands::get_notifications_paused,
            commands::set_notifications_paused,
        ])
@@ -45,9 +45,10 @@ pub static TAGGER_SESSION_DIRTY: AtomicBool = AtomicBool::new(false);
 // Settings types
 // ---------------------------------------------------------------------------

-#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
 #[serde(rename_all = "lowercase")]
 pub enum TaggerAcceleration {
+    #[default]
    Auto,
    Cpu,
    Directml,
@@ -63,12 +64,6 @@ impl TaggerAcceleration {
    }
 }

-impl Default for TaggerAcceleration {
-    fn default() -> Self {
-        Self::Auto
-    }
-}
-
 // ---------------------------------------------------------------------------
 // Status / probe types exposed to the frontend
 // ---------------------------------------------------------------------------
@@ -241,6 +241,90 @@ pub fn generate_video_thumbnail(
    ))
 }

+pub fn generate_avif_thumbnail(
+    tools: &MediaTools,
+    image_path: &Path,
+    cache_dir: &Path,
+) -> Result<GeneratedThumbnail> {
+    let path_str = image_path.to_string_lossy();
+    let out_path = thumb_path(cache_dir, &path_str);
+    let original_dimensions = ffprobe_dimensions(tools, image_path);
+
+    if out_path.exists() {
+        return Ok(GeneratedThumbnail {
+            path: out_path,
+            width: original_dimensions.0,
+            height: original_dimensions.1,
+        });
+    }
+
+    if let Some(parent) = out_path.parent() {
+        std::fs::create_dir_all(parent)?;
+    }
+
+    let output_path = out_path.to_string_lossy().into_owned();
+    let output = tools
+        .ffmpeg_command()
+        .args([
+            "-y",
+            "-threads",
+            "2",
+            "-i",
+            path_str.as_ref(),
+            "-frames:v",
+            "1",
+            "-vf",
+            "scale=320:-1:force_original_aspect_ratio=decrease",
+            "-q:v",
+            "4",
+            &output_path,
+        ])
+        .output()?;
+
+    if output.status.success() && out_path.exists() {
+        return Ok(GeneratedThumbnail {
+            path: out_path,
+            width: original_dimensions.0,
+            height: original_dimensions.1,
+        });
+    }
+
+    Err(anyhow!(
+        "ffmpeg failed generating AVIF thumbnail for {path_str}: {}",
+        String::from_utf8_lossy(&output.stderr)
+    ))
+}
+
+fn ffprobe_dimensions(tools: &MediaTools, image_path: &Path) -> (Option<i64>, Option<i64>) {
+    let output = tools
+        .ffprobe_command()
+        .args([
+            "-v",
+            "error",
+            "-select_streams",
+            "v:0",
+            "-show_entries",
+            "stream=width,height",
+            "-of",
+            "csv=p=0:s=x",
+            &image_path.to_string_lossy(),
+        ])
+        .output();
+    let Ok(output) = output else {
+        return (None, None);
+    };
+
+    if !output.status.success() {
+        return (None, None);
+    }
+
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let mut parts = stdout.trim().split('x');
+    let width = parts.next().and_then(|part| part.parse::<i64>().ok());
+    let height = parts.next().and_then(|part| part.parse::<i64>().ok());
+    (width, height)
+}
+
 pub fn thumb_path(cache_dir: &Path, image_path: &str) -> PathBuf {
    thumb_path_with_ext(cache_dir, image_path, "jpg")
 }
@@ -36,6 +36,18 @@ pub fn migrate(conn: &Connection) -> Result<()> {
    Ok(())
 }

+/// Drop and recreate the vector tables at the current `CLIP_VECTOR_DIM`. Used by
+/// the "Rebuild semantic index" maintenance action when stored vectors no longer
+/// match the active model's dimension (e.g. after switching embedding models),
+/// so the columns are rebuilt to the right size before embeddings regenerate.
+pub fn rebuild_tables(conn: &Connection) -> Result<()> {
+    conn.execute_batch(
+        "DROP TABLE IF EXISTS image_vec;
+         DROP TABLE IF EXISTS caption_vec;",
+    )?;
+    migrate(conn)
+}
+
 #[allow(dead_code)]
 pub fn delete_embedding(conn: &Connection, image_id: i64) -> Result<()> {
    conn.execute("DELETE FROM image_vec WHERE image_id = ?1", [image_id])?;
@@ -10,7 +10,10 @@ import { DuplicateFinder } from "./components/DuplicateFinder";
 import { Timeline } from "./components/Timeline";
 import { TitleBar } from "./components/TitleBar";
 import { SettingsModal } from "./components/SettingsModal";
+import { FolderPickerModal } from "./components/FolderPickerModal";
 import { UpdateToast } from "./components/UpdateToast";
+import { WhatsNewToast } from "./components/WhatsNewToast";
+import { WhatsNewModal } from "./components/WhatsNewModal";
 import { OnboardingOverlay } from "./components/onboarding/OnboardingOverlay";
 import { DemoPanel } from "./components/DemoPanel";
 import { initializeNotifications } from "./notifications";
@@ -28,15 +31,18 @@ export default function App() {
  const checkForUpdates = useGalleryStore((state) => state.checkForUpdates);
  const loadFfmpegStatus = useGalleryStore((state) => state.loadFfmpegStatus);
  const loadOnboardingCompleted = useGalleryStore((state) => state.loadOnboardingCompleted);
+  const initWhatsNew = useGalleryStore((state) => state.initWhatsNew);
  const activeView = useGalleryStore((state) => state.activeView);

  useEffect(() => {
    void initializeNotifications();
    void loadMutedFolderIds();
    void loadNotificationsPaused();
-    void loadAppVersion();
    void loadFfmpegStatus();
    void loadOnboardingCompleted();
+    // Load the app version first so the What's New toast/modal (which read
+    // appVersion from the store) have it before the greeting can appear.
+    void loadAppVersion().then(() => initWhatsNew());
    // Quiet launch check — dev builds have no signed artifacts to update to.
    if (import.meta.env.PROD) {
      void checkForUpdates({ quiet: true });
@@ -93,7 +99,10 @@ export default function App() {

      <Lightbox />
      <SettingsModal />
+      <FolderPickerModal />
      <UpdateToast />
+      <WhatsNewToast />
+      <WhatsNewModal />
      <OnboardingOverlay />
      {import.meta.env.DEV && <DemoPanel />}
    </div>
@@ -0,0 +1,112 @@
+// Parses the project CHANGELOG.md (imported raw at build time) into structured
+// data so the "What's New" UI can render it nicely instead of dumping markdown.
+// Keeping the changelog as the single source of truth means there's no separate
+// per-release copy to maintain — whatever ships in CHANGELOG.md is what users see.
+import changelogRaw from "../CHANGELOG.md?raw";
+
+export interface ChangelogItem {
+  /** The bold lead-in at the start of a bullet (e.g. "Custom multi-folder picker"), if any. */
+  lead: string | null;
+  /** The remaining descriptive text. May still contain inline `code` / **bold** markers. */
+  body: string;
+}
+
+export interface ChangelogSection {
+  /** "Added" | "Changed" | "Fixed" | "Removed" | "Deprecated" | "Security" */
+  title: string;
+  items: ChangelogItem[];
+}
+
+export interface ChangelogEntry {
+  version: string;
+  date: string | null;
+  sections: ChangelogSection[];
+}
+
+// "## [0.1.1] — 2026-06-23" / "## [Unreleased]"
+const VERSION_HEADING = /^##\s+\[([^\]]+)\]\s*(?:[—–-]\s*(.+?)\s*)?$/;
+// "### Added"
+const SECTION_HEADING = /^###\s+(.+?)\s*$/;
+// "- bullet text"
+const BULLET = /^[-*]\s+(.*)$/;
+// Leading "**Title**" optionally followed by an em dash, used as the item's lead-in.
+// (Item text is whitespace-collapsed before matching, so no dotAll flag needed.)
+const LEAD = /^\*\*(.+?)\*\*\s*(?:[—–-]\s*)?(.*)$/;
+
+function toItem(text: string): ChangelogItem {
+  const collapsed = text.replace(/\s+/g, " ").trim();
+  const match = collapsed.match(LEAD);
+  if (match) {
+    return { lead: match[1].trim(), body: match[2].trim() };
+  }
+  return { lead: null, body: collapsed };
+}
+
+function parseChangelog(raw: string): ChangelogEntry[] {
+  const lines = raw.split(/\r?\n/);
+  const entries: ChangelogEntry[] = [];
+
+  let entry: ChangelogEntry | null = null;
+  let section: ChangelogSection | null = null;
+  let buffer: string[] = [];
+
+  const flushItem = () => {
+    if (section && buffer.length > 0) {
+      section.items.push(toItem(buffer.join(" ")));
+    }
+    buffer = [];
+  };
+
+  for (const line of lines) {
+    const versionMatch = line.match(VERSION_HEADING);
+    if (versionMatch) {
+      flushItem();
+      section = null;
+      entry = { version: versionMatch[1].trim(), date: versionMatch[2]?.trim() ?? null, sections: [] };
+      entries.push(entry);
+      continue;
+    }
+
+    // Stop collecting once we leave the changelog body (e.g. link-reference defs at EOF).
+    if (!entry) continue;
+
+    const sectionMatch = line.match(SECTION_HEADING);
+    if (sectionMatch) {
+      flushItem();
+      section = { title: sectionMatch[1].trim(), items: [] };
+      entry.sections.push(section);
+      continue;
+    }
+
+    const bulletMatch = line.match(BULLET);
+    if (bulletMatch) {
+      flushItem();
+      buffer.push(bulletMatch[1]);
+      continue;
+    }
+
+    if (line.trim() === "") {
+      // A blank line ends a (possibly wrapped) multi-line bullet.
+      flushItem();
+      continue;
+    }
+
+    // Indented continuation of the current wrapped bullet.
+    if (buffer.length > 0) {
+      buffer.push(line.trim());
+    }
+  }
+
+  flushItem();
+  return entries.map((e) => ({ ...e, sections: e.sections.filter((s) => s.items.length > 0) }));
+}
+
+const ENTRIES = parseChangelog(changelogRaw);
+
+export function getChangelogForVersion(version: string | null | undefined): ChangelogEntry | null {
+  if (!version) return null;
+  const normalized = version.replace(/^v/, "");
+  // Never surface the in-progress [Unreleased] section to users.
+  if (normalized.toLowerCase() === "unreleased") return null;
+  return ENTRIES.find((e) => e.version.replace(/^v/, "") === normalized) ?? null;
+}
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
+import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { useGalleryStore, WorkerKey } from "../store";

 const WORKER_FOR_STAGE: Record<string, WorkerKey> = {
@@ -30,23 +31,52 @@ interface Task {
  snapshot: string;
 }

-interface FailedEmbeddingItem {
+interface FailedWorkerItem {
  image_id: number;
  filename: string;
+  path: string;
  error: string | null;
 }

+function FailedWorkerItemRow({ item }: { item: FailedWorkerItem }) {
+  return (
+    <div className="flex min-w-0 items-start gap-1.5">
+      <svg className="mt-px h-2.5 w-2.5 shrink-0 text-amber-500 light-theme:text-amber-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
+          d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+      </svg>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-[10px] font-medium text-amber-400/80 light-theme:text-amber-700">{item.filename}</p>
+        {item.error && (
+          <p className="truncate text-[9px] text-gray-600">{item.error}</p>
+        )}
+      </div>
+      <button
+        className="shrink-0 text-gray-700 transition-colors hover:text-gray-300 light-theme:text-gray-600 light-theme:hover:text-gray-100"
+        title="Reveal in Explorer"
+        onClick={() => void revealItemInDir(item.path)}
+      >
+        <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
 export function BackgroundTasks() {
  const folders = useGalleryStore((state) => state.folders);
  const indexingProgress = useGalleryStore((state) => state.indexingProgress);
  const mediaJobProgress = useGalleryStore((state) => state.mediaJobProgress);
  const retryFailedEmbeddings = useGalleryStore((state) => state.retryFailedEmbeddings);
  const queueTaggingJobs = useGalleryStore((state) => state.queueTaggingJobs);
+  const showFailedTagging = useGalleryStore((state) => state.showFailedTagging);
  const duplicateScanning = useGalleryStore((state) => state.duplicateScanning);
  const duplicateScanProgress = useGalleryStore((state) => state.duplicateScanProgress);
  const [expanded, setExpanded] = useState(false);
  const [dismissed, setDismissed] = useState<Record<number, string>>({});
-  const [failedItems, setFailedItems] = useState<Record<number, FailedEmbeddingItem[]>>({});
+  const [failedEmbeddingItems, setFailedEmbeddingItems] = useState<Record<number, FailedWorkerItem[]>>({});
+  const [failedTaggingItems, setFailedTaggingItems] = useState<Record<number, FailedWorkerItem[]>>({});

  const workerPaused = useGalleryStore((state) => state.workerPaused);
  const loadWorkerStates = useGalleryStore((state) => state.loadWorkerStates);
@@ -56,27 +86,43 @@ export function BackgroundTasks() {
    void loadWorkerStates();
  }, [folders, loadWorkerStates]);

-  // Fetch failed embedding filenames whenever the expanded panel opens or failure counts change.
-  const failedCounts = useMemo(
+  // Fetch failed filenames whenever the expanded panel opens or failure counts change.
+  const failedEmbeddingCounts = useMemo(
    () =>
      Object.fromEntries(
        Object.entries(mediaJobProgress).map(([id, p]) => [id, p?.embedding_failed ?? 0]),
      ),
    [mediaJobProgress],
  );
+  const failedTaggingCounts = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(mediaJobProgress).map(([id, p]) => [id, p?.tagging_failed ?? 0]),
+      ),
+    [mediaJobProgress],
+  );

  useEffect(() => {
    if (!expanded) return;
-    for (const [folderId, count] of Object.entries(failedCounts)) {
+    for (const [folderId, count] of Object.entries(failedEmbeddingCounts)) {
      if (count > 0) {
-        invoke<FailedEmbeddingItem[]>("get_failed_embedding_images", {
+        invoke<FailedWorkerItem[]>("get_failed_embedding_images", {
          folderId: Number(folderId),
        })
-          .then((items) => setFailedItems((prev) => ({ ...prev, [folderId]: items })))
+          .then((items) => setFailedEmbeddingItems((prev) => ({ ...prev, [folderId]: items })))
          .catch(() => undefined);
      }
    }
-  }, [expanded, failedCounts]);
+    for (const [folderId, count] of Object.entries(failedTaggingCounts)) {
+      if (count > 0) {
+        invoke<FailedWorkerItem[]>("get_failed_tagging_images", {
+          folderId: Number(folderId),
+        })
+          .then((items) => setFailedTaggingItems((prev) => ({ ...prev, [folderId]: items })))
+          .catch(() => undefined);
+      }
+    }
+  }, [expanded, failedEmbeddingCounts, failedTaggingCounts]);

  const isWorkerPaused = (folderId: number, worker: WorkerKey) => {
    return workerPaused[folderId]?.[worker] ?? false;
@@ -302,14 +348,14 @@ export function BackgroundTasks() {
                key={stage.label}
                className={`flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] shrink-0 ${
                  stage.failed
-                    ? "bg-amber-500/10 text-amber-400"
+                    ? "bg-amber-500/10 text-amber-400 light-theme:border light-theme:border-amber-500/40 light-theme:bg-amber-100 light-theme:text-amber-700"
                    : isPaused
                      ? "bg-white/4 text-gray-600"
                      : "bg-white/5 text-gray-400"
                }`}
              >
                <span>{stage.label}</span>
-                <span className={`tabular-nums ${stage.failed ? "text-amber-500" : isPaused ? "text-gray-700" : "text-gray-600"}`}>
+                <span className={`tabular-nums ${stage.failed ? "text-amber-500 light-theme:text-amber-700" : isPaused ? "text-gray-700" : "text-gray-600"}`}>
                  {stage.detail}
                </span>
                {workerKey && (
@@ -355,14 +401,27 @@ export function BackgroundTasks() {
          </span>
        )}

-        {/* Retry (failed embeddings only) */}
-        {primary.hasFailedEmbeddings && primary.pendingMediaWork === 0 && (
-          <button
-            className="rounded-lg border border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-[11px] text-amber-300 hover:bg-amber-500/20 transition-colors shrink-0"
-            onClick={(e) => { e.stopPropagation(); void retryFailedEmbeddings(primary.id); }}
-          >
-            Retry
-          </button>
+        {primary.pendingMediaWork === 0 && (primary.hasFailedEmbeddings || primary.hasFailedTagging) && (
+          <div className="flex shrink-0 items-center gap-1.5">
+            {primary.hasFailedTagging ? (
+              <button
+                className="rounded-lg border border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-[11px] text-amber-300 transition-colors hover:bg-amber-500/20 light-theme:border-amber-500/50 light-theme:bg-amber-100 light-theme:text-amber-700 light-theme:hover:bg-amber-200"
+                onClick={(e) => { e.stopPropagation(); showFailedTagging(primary.id); }}
+              >
+                Locate
+              </button>
+            ) : null}
+            <button
+              className="rounded-lg border border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-[11px] text-amber-300 transition-colors hover:bg-amber-500/20 light-theme:border-amber-500/50 light-theme:bg-amber-100 light-theme:text-amber-700 light-theme:hover:bg-amber-200"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (primary.hasFailedEmbeddings) void retryFailedEmbeddings(primary.id);
+                if (primary.hasFailedTagging) void queueTaggingJobs(primary.id);
+              }}
+            >
+              Retry
+            </button>
+          </div>
        )}

        {/* Expand chevron (only when multiple tasks) */}
@@ -414,7 +473,7 @@ export function BackgroundTasks() {
                          key={stage.label}
                          className={`flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] shrink-0 ${
                            stage.failed
-                              ? "bg-amber-500/10 text-amber-400"
+                              ? "bg-amber-500/10 text-amber-400 light-theme:border light-theme:border-amber-500/40 light-theme:bg-amber-100 light-theme:text-amber-700"
                              : isPaused
                                ? "bg-white/4 text-gray-600"
                                : "bg-white/5 text-gray-500"
@@ -426,7 +485,7 @@ export function BackgroundTasks() {
                            </svg>
                          )}
                          <span>{stage.label}</span>
-                          <span className={`tabular-nums ${stage.failed ? "text-amber-500" : "text-gray-600"}`}>
+                          <span className={`tabular-nums ${stage.failed ? "text-amber-500 light-theme:text-amber-700" : "text-gray-600"}`}>
                            {stage.detail}
                          </span>
                          {workerKey && (
@@ -465,15 +524,25 @@ export function BackgroundTasks() {
                  </div>

                  {taskHasFailed && (
-                    <button
-                      className="rounded-lg border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[11px] text-amber-300 hover:bg-amber-500/20 transition-colors shrink-0"
-                      onClick={() => {
-                        if (task.hasFailedEmbeddings) void retryFailedEmbeddings(task.id);
-                        if (task.hasFailedTagging) void queueTaggingJobs(task.id);
-                      }}
-                    >
-                      Retry
-                    </button>
+                    <div className="flex shrink-0 items-center gap-1.5">
+                      {task.hasFailedTagging ? (
+                        <button
+                          className="rounded-lg border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[11px] text-amber-300 transition-colors hover:bg-amber-500/20 light-theme:border-amber-500/50 light-theme:bg-amber-100 light-theme:text-amber-700 light-theme:hover:bg-amber-200"
+                          onClick={() => showFailedTagging(task.id)}
+                        >
+                          Locate
+                        </button>
+                      ) : null}
+                      <button
+                        className="rounded-lg border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-[11px] text-amber-300 transition-colors hover:bg-amber-500/20 light-theme:border-amber-500/50 light-theme:bg-amber-100 light-theme:text-amber-700 light-theme:hover:bg-amber-200"
+                        onClick={() => {
+                          if (task.hasFailedEmbeddings) void retryFailedEmbeddings(task.id);
+                          if (task.hasFailedTagging) void queueTaggingJobs(task.id);
+                        }}
+                      >
+                        Retry
+                      </button>
+                    </div>
                  )}

                  {task.id >= 0 && (
@@ -495,22 +564,18 @@ export function BackgroundTasks() {
                  </p>
                )}

-                {/* Failed embedding file list */}
-                {taskHasFailed && failedItems[task.id] && failedItems[task.id].length > 0 && (
+                {/* Failed worker file lists */}
+                {taskHasFailed && failedEmbeddingItems[task.id] && failedEmbeddingItems[task.id].length > 0 && (
                  <div className="mt-2 pl-[calc(7rem+0.75rem)] space-y-0.5">
-                    {failedItems[task.id].map((item) => (
-                      <div key={item.image_id} className="flex items-start gap-1.5 min-w-0">
-                        <svg className="h-2.5 w-2.5 text-amber-500 shrink-0 mt-px" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
-                            d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
-                        </svg>
-                        <div className="min-w-0">
-                          <p className="text-[10px] text-amber-400/80 truncate font-medium">{item.filename}</p>
-                          {item.error && (
-                            <p className="text-[9px] text-gray-600 truncate">{item.error}</p>
-                          )}
-                        </div>
-                      </div>
+                    {failedEmbeddingItems[task.id].map((item) => (
+                      <FailedWorkerItemRow key={item.image_id} item={item} />
+                    ))}
+                  </div>
+                )}
+                {taskHasFailed && failedTaggingItems[task.id] && failedTaggingItems[task.id].length > 0 && (
+                  <div className="mt-2 pl-[calc(7rem+0.75rem)] space-y-0.5">
+                    {failedTaggingItems[task.id].map((item) => (
+                      <FailedWorkerItemRow key={item.image_id} item={item} />
                    ))}
                  </div>
                )}
@@ -42,6 +42,7 @@ const DEMO_UPDATE_VERSION = "0.2.0";

 export function DemoPanel() {
  const folders = useGalleryStore((state) => state.folders);
+  const appVersion = useGalleryStore((state) => state.appVersion);
  const [open, setOpen] = useState(false);
  const downloadTimer = useRef<number | null>(null);

@@ -160,6 +161,18 @@ export function DemoPanel() {
    });
  };

+  // --- What's New flow ------------------------------------------------------
+  // Drives the post-update greeting without needing a real version change. The
+  // toast + modal pull their content from the bundled changelog for the running
+  // app version, so the current release's notes are what render.
+
+  const showWhatsNewToast = () =>
+    useGalleryStore.setState({ whatsNewToast: appVersion ?? DEMO_UPDATE_VERSION, whatsNewOpen: false });
+
+  const openWhatsNewModal = () => useGalleryStore.setState({ whatsNewOpen: true, whatsNewToast: null });
+
+  const resetWhatsNew = () => useGalleryStore.setState({ whatsNewOpen: false, whatsNewToast: null });
+
  if (!open) return null;

  const injectBtn =
@@ -215,6 +228,24 @@ export function DemoPanel() {
          Reset updater state
        </button>
      </div>
+
+      <div className="my-3 h-px bg-amber-400/20" />
+
+      <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-amber-200/60">What's new</p>
+      <p className="mb-2 text-[11px] leading-snug text-amber-200/70">
+        Post-update greeting for v{appVersion ?? "—"}, sourced from the bundled changelog.
+      </p>
+      <div className="flex flex-col gap-1.5">
+        <button className={injectBtn} onClick={showWhatsNewToast}>
+          Show "What's new" toast
+        </button>
+        <button className={injectBtn} onClick={openWhatsNewModal}>
+          Open "What's new" modal
+        </button>
+        <button className={neutralBtn} onClick={resetWhatsNew}>
+          Reset What's New state
+        </button>
+      </div>
    </div>
  );
 }
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { DuplicateGroup, useGalleryStore } from "../store";
 import { FolderScopeDropdown } from "./FolderScopeDropdown";
@@ -71,7 +72,7 @@ function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
          return (
            <button
              key={image.id}
-              className={`group relative overflow-hidden rounded-xl border transition-all ${
+              className={`media-dark-surface group relative overflow-hidden rounded-xl border transition-all ${
                isSelected
                  ? "border-red-400/50 ring-1 ring-red-400/30"
                  : "border-white/8 hover:border-white/20"
@@ -130,6 +131,17 @@ export function DuplicateFinder() {
  const [deleting, setDeleting] = useState(false);
  const [deleteResult, setDeleteResult] = useState<string | null>(null);

+  // Virtualize the group list so a large result set (e.g. thousands of pairs)
+  // only mounts the on-screen cards. Group cards vary in height (number of
+  // copies wraps across rows), so heights are measured dynamically.
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: duplicateGroups.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 220,
+    overscan: 4,
+  });
+
  const selectedCount = duplicateSelectedIds.size;
  const hasResults = duplicateGroups.length > 0;
  const hasScanned = hasResults || duplicateLastScanned !== null || (!duplicateScanning && duplicateScanProgress !== null);
@@ -165,7 +177,7 @@ export function DuplicateFinder() {
    : null;

  return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[#07080f]">
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-gray-950">
      {/* Header */}
      <div className="shrink-0 border-b border-white/[0.05] px-6 py-4">
        <div className="flex items-center justify-between gap-4">
@@ -193,7 +205,7 @@ export function DuplicateFinder() {
            {/* Batch select — only shown when there are groups and nothing is selected yet */}
            {hasResults && selectedCount === 0 && !deleting && (
              <button
-                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white"
+                className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                onClick={selectKeepFirstAllGroups}
                title={`Mark ${totalDuplicateImages} duplicate${totalDuplicateImages === 1 ? "" : "s"} for deletion across all groups (keeps first in each)`}
              >
@@ -204,7 +216,7 @@ export function DuplicateFinder() {
              <>
                <span className="text-[11px] text-white/40">{selectedCount} marked for deletion</span>
                <button
-                  className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white disabled:opacity-40"
+                  className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                  onClick={clearDuplicateSelection}
                  disabled={deleting}
                >
@@ -220,7 +232,7 @@ export function DuplicateFinder() {
              </>
            ) : null}
            <button
-              className="rounded-lg border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+              className="rounded-lg border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
              onClick={() => { setDeleteResult(null); void scanDuplicates(selectedFolderId); }}
              disabled={duplicateScanning}
            >
@@ -277,11 +289,29 @@ export function DuplicateFinder() {
          <p className="text-sm text-white/25">No duplicate files found.</p>
        </div>
      ) : (
-        <div className="overflow-y-auto px-6 py-5">
-          <div className="space-y-4">
-            {duplicateGroups.map((group) => (
-              <DuplicateGroupCard key={group.file_hash} group={group} />
-            ))}
+        <div ref={scrollRef} className="overflow-y-auto px-6 py-5">
+          <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const group = duplicateGroups[virtualItem.index];
+              if (!group) return null;
+              return (
+                <div
+                  key={group.file_hash}
+                  data-index={virtualItem.index}
+                  ref={virtualizer.measureElement}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    transform: `translateY(${virtualItem.start}px)`,
+                    paddingBottom: 16,
+                  }}
+                >
+                  <DuplicateGroupCard group={group} />
+                </div>
+              );
+            })}
          </div>
        </div>
      )}
@@ -0,0 +1,449 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { DirEntry, DirListing, FolderAddResult, useGalleryStore } from "../store";
+
+function normalizePath(path: string): string {
+  return path.replace(/\\/g, "/").replace(/\/+$/, "").toLowerCase();
+}
+
+function folderName(path: string): string {
+  const trimmed = path.replace(/[\\/]+$/, "");
+  const parts = trimmed.split(/[\\/]+/).filter(Boolean);
+  return parts.length > 0 ? parts[parts.length - 1] : path;
+}
+
+function buildBreadcrumbs(path: string | null): { label: string; path: string | null }[] {
+  if (!path) return [{ label: "This PC / Home", path: null }];
+
+  const separator = path.includes("\\") ? "\\" : "/";
+  const normalized = path.replace(/[\\/]+$/, "");
+  const windowsDrive = normalized.match(/^[A-Za-z]:/);
+
+  if (windowsDrive) {
+    const drive = windowsDrive[0] + "\\";
+    const rest = normalized.slice(2).split(/[\\/]+/).filter(Boolean);
+    let current = drive;
+    return [
+      { label: "This PC", path: null },
+      { label: drive, path: drive },
+      ...rest.map((part) => {
+        current = current.endsWith("\\") ? `${current}${part}` : `${current}\\${part}`;
+        return { label: part, path: current };
+      }),
+    ];
+  }
+
+  const parts = normalized.split(/[\\/]+/).filter(Boolean);
+  let current = separator === "/" ? "" : "";
+  return [
+    { label: "/", path: null },
+    ...parts.map((part) => {
+      current = `${current}/${part}`;
+      return { label: part, path: current };
+    }),
+  ];
+}
+
+function StatusLine({ results }: { results: FolderAddResult[] | null }) {
+  if (!results) return null;
+  const added = results.filter((result) => result.status === "added").length;
+  const skipped = results.filter((result) => result.status === "skipped").length;
+  const failed = results.filter((result) => result.status === "error").length;
+  return (
+    <p className="text-xs text-gray-500 light-theme:text-gray-600">
+      Added {added}, skipped {skipped}, failed {failed}.
+    </p>
+  );
+}
+
+function FolderRow({
+  entry,
+  selected,
+  alreadyAdded,
+  onToggle,
+  onNavigate,
+}: {
+  entry: DirEntry;
+  selected: boolean;
+  alreadyAdded: boolean;
+  onToggle: () => void;
+  onNavigate: () => void;
+}) {
+  return (
+    <div
+      className={`group flex h-11 items-center gap-3 rounded-md border px-3 transition-colors ${
+        alreadyAdded
+          ? "border-transparent bg-white/[0.025] text-gray-600 light-theme:bg-gray-900 light-theme:text-gray-500"
+          : selected
+            ? "border-white/15 bg-white/[0.085] text-white shadow-[inset_0_0_0_1px_rgb(255_255_255_/_0.035)] light-theme:border-gray-700/45 light-theme:bg-gray-800/55 light-theme:text-white"
+            : "border-transparent text-gray-300 hover:bg-white/[0.055] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+      }`}
+    >
+      <button
+        type="button"
+        className={`grid h-5 w-5 shrink-0 place-items-center rounded border transition-colors ${
+          selected
+            ? "border-white/30 bg-gray-200 text-gray-950 light-theme:border-gray-700/55 light-theme:bg-gray-700 light-theme:text-white"
+            : "border-white/15 bg-white/[0.035] text-transparent hover:border-white/30 light-theme:border-gray-700/50 light-theme:bg-gray-950"
+        } ${alreadyAdded ? "cursor-not-allowed opacity-40" : ""}`}
+        onClick={onToggle}
+        disabled={alreadyAdded}
+        aria-label={selected ? `Remove ${entry.name} from folders to add` : `Choose ${entry.name}`}
+      >
+        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        className="flex min-w-0 flex-1 items-center gap-2 text-left"
+        onClick={onNavigate}
+        title={entry.path}
+      >
+        <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
+        </svg>
+        <span className="truncate text-sm">{entry.name}</span>
+      </button>
+
+      {alreadyAdded ? (
+        <span className="rounded-md border border-white/10 bg-white/[0.04] px-2 py-0.5 text-[11px] text-gray-500 light-theme:border-gray-700/40 light-theme:bg-gray-950">
+          Added
+        </span>
+      ) : null}
+
+      <button
+        type="button"
+        className="rounded-md p-1 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+        onClick={onNavigate}
+        title={entry.has_children ? "Open folder" : "No subfolders"}
+      >
+        <svg className={`h-4 w-4 ${entry.has_children ? "" : "opacity-45"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+function StagedFoldersPanel({
+  stagedPaths,
+  onRemove,
+  onClear,
+}: {
+  stagedPaths: string[];
+  onRemove: (path: string) => void;
+  onClear: () => void;
+}) {
+  return (
+    <aside className="flex min-h-0 w-full flex-col border-t border-white/[0.07] bg-white/[0.018] light-theme:border-gray-300/70 light-theme:bg-gray-900/35 lg:w-80 lg:border-l lg:border-t-0">
+      <div className="flex items-center justify-between gap-3 border-b border-white/[0.07] px-5 py-4 light-theme:border-gray-300/70">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500">
+          Folders to add ({stagedPaths.length})
+        </p>
+        {stagedPaths.length > 0 ? (
+          <button
+            type="button"
+            className="rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+            onClick={onClear}
+          >
+            Clear all
+          </button>
+        ) : null}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {stagedPaths.length === 0 ? (
+          <div className="flex h-full min-h-40 flex-col items-center justify-center rounded-md border border-dashed border-white/[0.08] px-5 text-center light-theme:border-gray-700/35">
+            <p className="text-sm text-gray-500">No folders selected.</p>
+            <p className="mt-1 max-w-52 text-xs leading-relaxed text-gray-600 light-theme:text-gray-500">
+              Choose folders on the left and they will collect here.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {stagedPaths.map((path) => (
+              <div
+                key={path}
+                className="group flex min-h-12 items-center gap-2 rounded-md border border-white/[0.07] bg-white/[0.045] px-3 py-2 text-gray-200 transition-colors hover:border-white/15 hover:bg-white/[0.07] light-theme:border-gray-700/40 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
+                title={path}
+              >
+                <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
+                </svg>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium">{folderName(path)}</p>
+                  <p className="mt-0.5 truncate text-[11px] text-gray-600 light-theme:text-gray-500">{path}</p>
+                </div>
+                <button
+                  type="button"
+                  className="rounded-md p-1 text-gray-500 opacity-80 transition-colors hover:bg-white/[0.08] hover:text-white group-hover:opacity-100 light-theme:hover:bg-gray-700"
+                  onClick={() => onRemove(path)}
+                  aria-label={`Remove ${path} from folders to add`}
+                  title="Remove from folders to add"
+                >
+                  <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+export function FolderPickerModal() {
+  const folderPickerOpen = useGalleryStore((state) => state.folderPickerOpen);
+  const setFolderPickerOpen = useGalleryStore((state) => state.setFolderPickerOpen);
+  const folders = useGalleryStore((state) => state.folders);
+  const listDirectories = useGalleryStore((state) => state.listDirectories);
+  const addFolders = useGalleryStore((state) => state.addFolders);
+
+  const [listing, setListing] = useState<DirListing | null>(null);
+  const [currentPath, setCurrentPath] = useState<string | null>(null);
+  const [stagedPaths, setStagedPaths] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [results, setResults] = useState<FolderAddResult[] | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const libraryPaths = useMemo(() => new Set(folders.map((folder) => normalizePath(folder.path))), [folders]);
+  const stagedSet = useMemo(() => new Set(stagedPaths.map(normalizePath)), [stagedPaths]);
+  const breadcrumbs = useMemo(() => buildBreadcrumbs(listing?.current ?? null), [listing?.current]);
+
+  const virtualizer = useVirtualizer({
+    count: listing?.entries.length ?? 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 48,
+    overscan: 8,
+  });
+
+  useEffect(() => {
+    if (!folderPickerOpen) return;
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    void listDirectories(currentPath)
+      .then((nextListing) => {
+        if (cancelled) return;
+        setListing(nextListing);
+        scrollRef.current?.scrollTo({ top: 0, left: 0 });
+      })
+      .catch((loadError) => {
+        if (cancelled) return;
+        setListing({ current: currentPath, parent: null, entries: [] });
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [currentPath, folderPickerOpen, listDirectories]);
+
+  useEffect(() => {
+    if (!folderPickerOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setFolderPickerOpen(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [folderPickerOpen, setFolderPickerOpen]);
+
+  useEffect(() => {
+    if (folderPickerOpen) return;
+    setCurrentPath(null);
+    setListing(null);
+    setStagedPaths([]);
+    setError(null);
+    setResults(null);
+    setAdding(false);
+  }, [folderPickerOpen]);
+
+  if (!folderPickerOpen) return null;
+
+  const entries = listing?.entries ?? [];
+
+  const togglePath = (path: string) => {
+    const normalized = normalizePath(path);
+    if (libraryPaths.has(normalized)) return;
+    setResults(null);
+    setStagedPaths((current) => {
+      const exists = current.some((staged) => normalizePath(staged) === normalized);
+      return exists ? current.filter((staged) => normalizePath(staged) !== normalized) : [...current, path];
+    });
+  };
+
+  const removeStagedPath = (path: string) => {
+    const normalized = normalizePath(path);
+    setResults(null);
+    setStagedPaths((current) => current.filter((staged) => normalizePath(staged) !== normalized));
+  };
+
+  const clearStagedPaths = () => {
+    setResults(null);
+    setStagedPaths([]);
+  };
+
+  const confirmAdd = async () => {
+    if (stagedPaths.length === 0 || adding) return;
+    setAdding(true);
+    setError(null);
+    try {
+      const addResults = await addFolders(stagedPaths);
+      const failed = addResults.filter((result) => result.status === "error");
+      setResults(addResults);
+      if (failed.length > 0) {
+        setStagedPaths(stagedPaths.filter((_, i) => addResults[i]?.status === "error"));
+        setError(failed.map((failure) => failure.data).join("; "));
+        return;
+      }
+      setFolderPickerOpen(false);
+    } catch (addError) {
+      setError(addError instanceof Error ? addError.message : String(addError));
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[80] flex items-center justify-center bg-black/65 px-6 backdrop-blur-sm"
+      onClick={() => setFolderPickerOpen(false)}
+    >
+      <div
+        className="relative flex h-[min(82vh,760px)] w-[min(90vw,1180px)] flex-col overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60 light-theme:border-gray-300/70"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <header className="border-b border-white/[0.07] px-5 py-4 light-theme:border-gray-200">
+          <div className="flex items-start justify-between gap-6">
+            <div className="min-w-0">
+              <p className="text-base font-semibold text-white">Add media folders</p>
+              <p className="mt-1 text-xs text-gray-500 light-theme:text-gray-600">Choose folders from any location, then add them together.</p>
+            </div>
+            <button
+              type="button"
+              className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+              onClick={() => setFolderPickerOpen(false)}
+              title="Close folder picker"
+            >
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </header>
+
+        <div className="flex min-h-0 flex-1 flex-col lg:flex-row">
+          <main className="flex min-h-0 flex-1 flex-col px-5 py-4">
+            <div className="mb-4 flex items-center gap-2">
+              <button
+                type="button"
+                className="rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white disabled:cursor-not-allowed disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
+                onClick={() => setCurrentPath(listing?.parent ?? null)}
+                disabled={!listing?.current}
+              >
+                Up
+              </button>
+              <nav className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden rounded-md border border-white/10 bg-white/[0.025] px-2 py-1.5 light-theme:border-gray-300/70 light-theme:bg-gray-900">
+                {breadcrumbs.map((crumb, index) => (
+                  <span key={`${crumb.path ?? "root"}-${index}`} className="flex min-w-0 items-center gap-1">
+                    {index > 0 ? <span className="text-gray-700 light-theme:text-gray-400">/</span> : null}
+                    <button
+                      type="button"
+                      className="max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                      onClick={() => setCurrentPath(crumb.path)}
+                      title={crumb.path ?? "Roots"}
+                    >
+                      {crumb.label}
+                    </button>
+                  </span>
+                ))}
+              </nav>
+            </div>
+
+            {error ? (
+              <div className="mb-3 rounded-md border border-amber-400/25 bg-amber-500/10 px-3 py-2 text-xs text-amber-200 light-theme:border-amber-600/40 light-theme:bg-amber-100 light-theme:text-amber-800">
+                {error}
+              </div>
+            ) : null}
+
+            <div ref={scrollRef} className="min-h-0 flex-1 overflow-auto rounded-md border border-white/[0.07] bg-white/[0.018] p-2 light-theme:border-gray-300/70 light-theme:bg-gray-900/50">
+              {loading ? (
+                <div className="flex h-full items-center justify-center text-sm text-gray-500">Loading folders...</div>
+              ) : entries.length === 0 ? (
+                <div className="flex h-full items-center justify-center text-sm text-gray-500">No folders found here.</div>
+              ) : (
+                <div
+                  className="relative w-full"
+                  style={{ height: `${virtualizer.getTotalSize()}px` }}
+                >
+                  {virtualizer.getVirtualItems().map((virtualItem) => {
+                    const entry = entries[virtualItem.index];
+                    const normalized = normalizePath(entry.path);
+                    return (
+                      <div
+                        key={virtualItem.key}
+                        className="absolute left-0 top-0 w-full px-0.5"
+                        style={{
+                          height: `${virtualItem.size}px`,
+                          transform: `translateY(${virtualItem.start}px)`,
+                        }}
+                      >
+                        <FolderRow
+                          entry={entry}
+                          selected={stagedSet.has(normalized)}
+                          alreadyAdded={libraryPaths.has(normalized)}
+                          onToggle={() => togglePath(entry.path)}
+                          onNavigate={() => setCurrentPath(entry.path)}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </main>
+
+          <StagedFoldersPanel
+            stagedPaths={stagedPaths}
+            onRemove={removeStagedPath}
+            onClear={clearStagedPaths}
+          />
+        </div>
+
+        <footer className="border-t border-white/[0.07] px-5 py-4 light-theme:border-gray-200">
+          <div className="flex items-end justify-between gap-4">
+            <div className="min-w-0 flex-1">
+              <StatusLine results={results} />
+            </div>
+
+            <div className="flex shrink-0 items-center gap-2">
+              <button
+                type="button"
+                className="rounded-md border border-white/10 bg-white/[0.035] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
+                onClick={() => setFolderPickerOpen(false)}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="rounded-md border border-white/15 bg-white/[0.08] px-3 py-1.5 text-xs text-white transition-colors hover:bg-white/[0.12] disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
+                onClick={() => void confirmAdd()}
+                disabled={stagedPaths.length === 0 || adding}
+              >
+                {adding ? "Adding..." : `Add ${stagedPaths.length}`}
+              </button>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
@@ -33,13 +33,13 @@ export function FolderScopeDropdown() {
  };

  return (
-    <div ref={ref} className="relative">
+    <div ref={ref} className="feature-scope-dropdown relative">
      <button
        onClick={() => setOpen((v) => !v)}
-        className={`flex max-w-56 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors ${
+        className={`feature-scope-trigger flex max-w-56 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors ${
          open
-            ? "border-white/15 bg-white/8 text-white"
-            : "border-white/8 bg-transparent text-gray-400 hover:border-white/15 hover:text-gray-200"
+            ? "border-white/15 bg-white/8 text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white"
+            : "border-white/8 bg-transparent text-gray-400 hover:border-white/15 hover:text-gray-200 light-theme:border-gray-700/40 light-theme:text-gray-600 light-theme:hover:border-gray-700 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
        }`}
        title="Change folder scope"
      >
@@ -55,10 +55,10 @@ export function FolderScopeDropdown() {
        </svg>
      </button>
      {open ? (
-        <div className="absolute right-0 top-full z-30 mt-1.5 max-h-80 min-w-52 overflow-y-auto rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur">
+        <div className="feature-scope-menu absolute right-0 top-full z-30 mt-1.5 max-h-80 min-w-52 overflow-y-auto rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur light-theme:border-gray-700/50">
          <button
-            className={`flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
-              selectedFolderId === null ? "bg-white/6 text-white" : "text-gray-400 hover:bg-white/5 hover:text-white"
+            className={`feature-scope-option flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+              selectedFolderId === null ? "bg-white/6 text-white light-theme:bg-gray-900 light-theme:text-white" : "text-gray-400 hover:bg-white/5 hover:text-white light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
            }`}
            onClick={() => select(null)}
          >
@@ -74,8 +74,8 @@ export function FolderScopeDropdown() {
            return (
              <button
                key={folder.id}
-                className={`flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
-                  active ? "bg-white/6 text-white" : "text-gray-400 hover:bg-white/5 hover:text-white"
+                className={`feature-scope-option flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+                  active ? "bg-white/6 text-white light-theme:bg-gray-900 light-theme:text-white" : "text-gray-400 hover:bg-white/5 hover:text-white light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
                }`}
                onClick={() => select(folder.id)}
              >
@@ -1,4 +1,5 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useCallback, useMemo, useState } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { ImageRecord, parseSearchValue, tileSizeForZoom, useGalleryStore } from "../store";

@@ -119,15 +120,11 @@ export function ImageTile({
  const similarScope = useGalleryStore((state) => state.similarScope);
  const canFindSimilar = image.embedding_status === "ready";

-  const src = image.thumbnail_path
-    ? convertFileSrc(image.thumbnail_path)
-    : image.media_kind === "image" && image.path
-      ? convertFileSrc(image.path)
-      : null;
+  const src = image.thumbnail_path ? convertFileSrc(image.thumbnail_path) : null;

  return (
    <button
-      className="group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none"
+      className="media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none"
      style={{ width: "100%", aspectRatio: "1 / 1" }}
      onClick={onClick}
      onContextMenu={onContextMenu}
@@ -268,29 +265,62 @@ export function Gallery() {
  const parsedSearch = parseSearchValue(search);

  const parentRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; image: ImageRecord } | null>(null);

+  useLayoutEffect(() => {
+    const el = parentRef.current;
+    if (!el) return;
+    setContainerWidth(el.clientWidth);
+    const ro = new ResizeObserver((entries) => {
+      setContainerWidth(entries[0].contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const tileSize = tileSizeForZoom(zoomPreset);
+  const cols = useMemo(
+    () => Math.max(1, Math.floor((containerWidth - GAP) / (tileSize + GAP))),
+    [containerWidth, tileSize],
+  );
+  const rowCount = Math.ceil(images.length / cols);
+
+  const estimateSize = useCallback(() => tileSize + GAP, [tileSize]);
+
+  const virtualizer = useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize,
+    overscan: 3,
+    paddingStart: GAP,
+  });
+
+  useEffect(() => {
+    virtualizer.measure();
+  }, [cols, virtualizer]);
+
+  useEffect(() => {
+    parentRef.current?.scrollTo({ top: 0, left: 0 });
+  }, [galleryScrollResetKey]);
+
  const handleScroll = useCallback(() => {
-    const element = parentRef.current;
-    if (!element) return;
-    if (element.scrollTop < 24) return;
-    const nearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 600;
+    const el = parentRef.current;
+    if (!el) return;
+    if (el.scrollTop < 24) return;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 600;
    if (nearBottom && !loadingImages && images.length < totalImages) {
      void loadMoreImages();
    }
  }, [images.length, loadMoreImages, loadingImages, totalImages]);

  useEffect(() => {
-    const element = parentRef.current;
-    if (!element) return;
-    element.addEventListener("scroll", handleScroll, { passive: true });
-    return () => element.removeEventListener("scroll", handleScroll);
+    const el = parentRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
  }, [handleScroll]);

-  useEffect(() => {
-    parentRef.current?.scrollTo({ top: 0, left: 0 });
-  }, [galleryScrollResetKey]);
-
  useEffect(() => {
    const close = (event: PointerEvent) => {
      if ((event.target as HTMLElement | null)?.closest("[data-gallery-context-menu]")) return;
@@ -308,7 +338,7 @@ export function Gallery() {
  }, []);

  return (
-    <div ref={parentRef} className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-[#07080f]">
+    <div ref={parentRef} className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-gray-950">
      {images.length === 0 && loadingImages ? (
        <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
          <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8 min-w-72">
@@ -365,25 +395,41 @@ export function Gallery() {
          </div>
        </div>
      ) : (
-        <div
-          className="grid content-start"
-          style={{
-            padding: GAP,
-            gap: GAP,
-            gridTemplateColumns: `repeat(auto-fill, minmax(${tileSizeForZoom(zoomPreset)}px, 1fr))`,
-          }}
-        >
-          {images.map((image) => (
-            <ImageTile
-              key={image.id}
-              image={image}
-              onClick={() => openImage(image)}
-              onContextMenu={(event) => {
-                event.preventDefault();
-                setContextMenu({ x: event.clientX, y: event.clientY, image });
-              }}
-            />
-          ))}
+        <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
+          {virtualizer.getVirtualItems().map((virtualRow) => {
+            const startIndex = virtualRow.index * cols;
+            const rowImages = images.slice(startIndex, startIndex + cols);
+            return (
+              <div
+                key={virtualRow.key}
+                style={{
+                  position: "absolute",
+                  top: virtualRow.start,
+                  width: "100%",
+                  height: virtualRow.size,
+                  display: "grid",
+                  gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
+                  gap: GAP,
+                  paddingLeft: GAP,
+                  paddingRight: GAP,
+                  paddingBottom: GAP,
+                  boxSizing: "border-box",
+                }}
+              >
+                {rowImages.map((image) => (
+                  <ImageTile
+                    key={image.id}
+                    image={image}
+                    onClick={() => openImage(image)}
+                    onContextMenu={(event) => {
+                      event.preventDefault();
+                      setContextMenu({ x: event.clientX, y: event.clientY, image });
+                    }}
+                  />
+                ))}
+              </div>
+            );
+          })}
        </div>
      )}

@@ -1,6 +1,7 @@
 import { useEffect, useCallback, useRef, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { convertFileSrc } from "@tauri-apps/api/core";
+import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { useGalleryStore, ImageTag, AiRating } from "../store";
 import { VideoPlayer } from "./VideoPlayer";

@@ -377,7 +378,7 @@ export function Lightbox() {
      {selectedImage ? (
        <motion.div
          key="lightbox"
-          className="fixed inset-0 z-50 flex bg-black/90 backdrop-blur-sm"
+          className="media-dark-surface fixed inset-0 z-50 flex bg-black/90 backdrop-blur-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
@@ -495,7 +496,7 @@ export function Lightbox() {
                </AnimatePresence>
              </div>

-              <div className="flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95">
+              <div className="lightbox-panel flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95">
                <div className="flex shrink-0 items-center justify-between px-5 pt-5 pb-4">
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-white">{selectedImage.filename}</p>
@@ -780,7 +781,18 @@ export function Lightbox() {
                  </div>

                  <div>
-                    <p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Path</p>
+                    <div className="mb-1 flex items-center justify-between">
+                      <p className="text-xs uppercase tracking-wider text-gray-500">Path</p>
+                      <button
+                        className="rounded p-0.5 text-gray-600 transition-colors hover:text-gray-300"
+                        title="Reveal in Explorer"
+                        onClick={() => void revealItemInDir(selectedImage.path)}
+                      >
+                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
+                        </svg>
+                      </button>
+                    </div>
                    <p className="break-all text-xs text-gray-400">{selectedImage.path}</p>
                  </div>
                </div>
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-import { open } from "@tauri-apps/plugin-dialog";
 import { MediaFilter, ZoomPreset, useGalleryStore } from "../store";

 type MenuKey = "library" | "view" | "filter";
@@ -72,7 +71,7 @@ const FILTER_OPTIONS: { value: MediaFilter; label: string }[] = [
 export function MenuBar() {
  const [openMenu, setOpenMenu] = useState<MenuKey | null>(null);
  const rootRef = useRef<HTMLDivElement>(null);
-  const addFolder = useGalleryStore((state) => state.addFolder);
+  const setFolderPickerOpen = useGalleryStore((state) => state.setFolderPickerOpen);
  const reindexFolder = useGalleryStore((state) => state.reindexFolder);
  const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
  const zoomPreset = useGalleryStore((state) => state.zoomPreset);
@@ -93,11 +92,8 @@ export function MenuBar() {
    return () => window.removeEventListener("pointerdown", handlePointerDown);
  }, []);

-  const handleAddFolder = async () => {
-    const selected = await open({ directory: true, multiple: false, title: "Select Media Folder" });
-    if (selected && typeof selected === "string") {
-      await addFolder(selected);
-    }
+  const handleAddFolder = () => {
+    setFolderPickerOpen(true);
    setOpenMenu(null);
  };

@@ -1,12 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { CleanupOrphanedThumbnailsResult, DatabaseInfo, OrphanedThumbnailsInfo, TaggerAcceleration, TaggingQueueScope, VacuumResult, useGalleryStore } from "../store";
+import { AppTheme, CleanupOrphanedThumbnailsResult, DatabaseInfo, OrphanedThumbnailsInfo, TaggerAcceleration, TaggingQueueScope, VacuumResult, useGalleryStore } from "../store";
 import { FfmpegStatusRow } from "./onboarding/StepWelcome";
+import { ThemedDropdown } from "./ThemedDropdown";
+import { getChangelogForVersion } from "../changelog";

 type SettingsSection = "workspace" | "general";

 const SECTIONS: { id: SettingsSection; label: string; detail: string }[] = [
-  { id: "workspace", label: "AI Workspace", detail: "Tagging models and queue targets" },
  { id: "general", label: "General", detail: "App data and diagnostics" },
+  { id: "workspace", label: "AI Workspace", detail: "Tagging models and queue targets" },
 ];

 function formatBytesShort(bytes: number): string {
@@ -18,9 +20,9 @@ function formatBytesShort(bytes: number): string {
 function StatusPill({ children, tone }: { children: React.ReactNode; tone: "ready" | "muted" | "busy" }) {
  const className =
    tone === "ready"
-      ? "border-emerald-400/25 bg-emerald-500/10 text-emerald-300"
+      ? "border-emerald-400/25 bg-emerald-500/10 text-emerald-300 light-theme:border-emerald-600/40 light-theme:bg-emerald-100 light-theme:text-emerald-700"
      : tone === "busy"
-        ? "border-sky-400/25 bg-sky-500/10 text-sky-300"
+        ? "border-sky-400/25 bg-sky-500/10 text-sky-300 light-theme:border-sky-600/40 light-theme:bg-sky-100 light-theme:text-sky-700"
        : "border-white/10 bg-white/[0.04] text-gray-500";

  return <span className={`inline-flex rounded-md border px-2 py-0.5 text-[11px] font-medium ${className}`}>{children}</span>;
@@ -88,8 +90,8 @@ function ScopeButton({ scope, current, onSelect, children }: {
      type="button"
      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
        active
-          ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200"
-          : "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200"
+          ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700"
+          : "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
      }`}
      onClick={() => onSelect(scope)}
    >
@@ -110,8 +112,8 @@ function TaggerAccelerationButton({ acceleration, current, onSelect, children }:
      type="button"
      className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
        active
-          ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200"
-          : "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200"
+          ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700"
+          : "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
      }`}
      onClick={() => onSelect(acceleration)}
    >
@@ -121,7 +123,7 @@ function TaggerAccelerationButton({ acceleration, current, onSelect, children }:
 }

 export function SettingsModal() {
-  const [activeSection, setActiveSection] = useState<SettingsSection>("workspace");
+  const [activeSection, setActiveSection] = useState<SettingsSection>("general");
  const [taggerQueueStatus, setTaggerQueueStatus] = useState<string | null>(null);
  const [taggerQueueing, setTaggerQueueing] = useState(false);
  const [taggerClearing, setTaggerClearing] = useState(false);
@@ -137,6 +139,8 @@ export function SettingsModal() {
  const [dbInfo, setDbInfo] = useState<DatabaseInfo | null>(null);
  const [vacuuming, setVacuuming] = useState(false);
  const [vacuumResult, setVacuumResult] = useState<VacuumResult | null>(null);
+  const [rebuildingIndex, setRebuildingIndex] = useState(false);
+  const [rebuildIndexResult, setRebuildIndexResult] = useState<string | null>(null);
  const [thumbnailInfo, setThumbnailInfo] = useState<OrphanedThumbnailsInfo | null>(null);
  const [cleaningThumbnails, setCleaningThumbnails] = useState(false);
  const [thumbnailCleanupResult, setThumbnailCleanupResult] = useState<CleanupOrphanedThumbnailsResult | null>(null);
@@ -183,15 +187,24 @@ export function SettingsModal() {
  const setNotificationsPaused = useGalleryStore((state) => state.setNotificationsPaused);
  const getDatabaseInfo = useGalleryStore((state) => state.getDatabaseInfo);
  const vacuumDatabase = useGalleryStore((state) => state.vacuumDatabase);
+  const rebuildSemanticIndex = useGalleryStore((state) => state.rebuildSemanticIndex);
  const getOrphanedThumbnailsInfo = useGalleryStore((state) => state.getOrphanedThumbnailsInfo);
  const cleanupOrphanedThumbnails = useGalleryStore((state) => state.cleanupOrphanedThumbnails);
  const appVersion = useGalleryStore((state) => state.appVersion);
  const updateStatus = useGalleryStore((state) => state.updateStatus);
  const updateVersion = useGalleryStore((state) => state.updateVersion);
+  const updateProgress = useGalleryStore((state) => state.updateProgress);
  const updateError = useGalleryStore((state) => state.updateError);
  const checkForUpdates = useGalleryStore((state) => state.checkForUpdates);
  const installUpdate = useGalleryStore((state) => state.installUpdate);
+  const openWhatsNew = useGalleryStore((state) => state.openWhatsNew);
  const openOnboarding = useGalleryStore((state) => state.openOnboarding);
+  const theme = useGalleryStore((state) => state.theme);
+  const setTheme = useGalleryStore((state) => state.setTheme);
+  const lightboxAutoplay = useGalleryStore((state) => state.lightboxAutoplay);
+  const setLightboxAutoplay = useGalleryStore((state) => state.setLightboxAutoplay);
+  const lightboxAutoMute = useGalleryStore((state) => state.lightboxAutoMute);
+  const setLightboxAutoMute = useGalleryStore((state) => state.setLightboxAutoMute);

  useEffect(() => {
    if (!settingsOpen) return;
@@ -309,7 +322,7 @@ export function SettingsModal() {
  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/65 px-6 backdrop-blur-sm" onClick={() => setSettingsOpen(false)}>
      <div
-        className="relative flex h-[min(85vh,900px)] w-[min(85vw,1400px)] overflow-hidden rounded-lg border border-white/10 bg-[#07080f] shadow-2xl shadow-black/60"
+        className="relative flex h-[min(85vh,900px)] w-[min(85vw,1400px)] overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60"
        onClick={(event) => event.stopPropagation()}
      >
        <aside className="flex w-64 shrink-0 flex-col border-r border-white/[0.07] bg-white/[0.025]">
@@ -368,14 +381,14 @@ export function SettingsModal() {
                      {taggerReady ? (
                        <>
                          <button
-                            className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                            className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                            onClick={() => void probeTaggerRuntime()}
                            disabled={taggerRuntimeChecking}
                          >
                            {taggerRuntimeChecking ? "Checking runtime..." : "Check runtime"}
                          </button>
                          <button
-                            className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45"
+                            className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-red-400/50 light-theme:bg-red-50 light-theme:text-red-700 light-theme:hover:bg-red-100"
                            onClick={() => void deleteTaggerModel()}
                            disabled={taggerModelPreparing}
                          >
@@ -384,7 +397,7 @@ export function SettingsModal() {
                        </>
                      ) : (
                        <button
-                          className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                          className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                          onClick={() => void prepareTaggerModel()}
                          disabled={taggerModelPreparing}
                        >
@@ -397,7 +410,7 @@ export function SettingsModal() {

                  <SettingsItem label="Tagger acceleration" description="Use DirectML when available, or fall back to CPU for reliability.">
                    <div className="flex flex-col items-end gap-1.5">
-                      <div className="flex rounded-lg border border-white/[0.07] p-0.5">
+                      <div className="flex rounded-lg border border-white/[0.07] p-0.5 light-theme:border-gray-300/80">
                        {(["auto", "directml", "cpu"] as const).map((acceleration) => (
                          <TaggerAccelerationButton
                            key={acceleration}
@@ -519,7 +532,7 @@ export function SettingsModal() {

                <SettingsGroup title="Queue targets" description="Choose which folders to include when queuing tagging jobs.">
                  <SettingsItem label="Target scope" description="Queue across the full library, or choose a specific folder set and keep the modal open while you work through it.">
-                    <div className="flex rounded-lg border border-white/[0.07] p-0.5">
+                    <div className="flex rounded-lg border border-white/[0.07] p-0.5 light-theme:border-gray-300/80">
                      <ScopeButton scope="all" current={taggingQueueScope} onSelect={setTaggingQueueScope}>All media</ScopeButton>
                      <ScopeButton scope="selected" current={taggingQueueScope} onSelect={setTaggingQueueScope}>Selected folders</ScopeButton>
                    </div>
@@ -533,14 +546,14 @@ export function SettingsModal() {
                      </div>
                      <div className="flex gap-2">
                        <button
-                          className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
+                          className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                          onClick={() => setTaggingQueueFolderIds(folders.map((folder) => folder.id))}
                          disabled={taggingQueueScope === "all" || folders.length === 0}
                        >
                          Select all
                        </button>
                        <button
-                          className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
+                          className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                          onClick={() => setTaggingQueueFolderIds([])}
                          disabled={taggingQueueScope === "all" || taggingQueueFolderIds.length === 0}
                        >
@@ -579,14 +592,14 @@ export function SettingsModal() {
                  <SettingsItem label="Queue tagging jobs" description="Generate missing AI tags for the current target. Results flow back into the library as the background worker finishes.">
                    <div className="flex items-center gap-2">
                      <button
-                        className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                        className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                        onClick={() => runQueueAction("queue")}
                        disabled={!taggerReady || taggerQueueing || taggerClearing || (taggingQueueScope === "selected" && taggingQueueFolderIds.length === 0)}
                      >
                        {taggerQueueing ? "Queueing..." : "Queue tagging"}
                      </button>
                      <button
-                        className="rounded-md border border-amber-400/20 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-200 transition-colors hover:bg-amber-500/15 disabled:cursor-not-allowed disabled:opacity-45"
+                        className="rounded-md border border-amber-400/20 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-200 transition-colors hover:bg-amber-500/15 disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-amber-500/50 light-theme:bg-amber-50 light-theme:text-amber-700 light-theme:hover:bg-amber-100"
                        onClick={() => runQueueAction("clear")}
                        disabled={taggerQueueing || taggerClearing || (taggingQueueScope === "selected" && taggingQueueFolderIds.length === 0)}
                      >
@@ -600,6 +613,50 @@ export function SettingsModal() {
              </div>
            ) : (
              <div className="mt-8 space-y-9">
+                <SettingsGroup title="Appearance">
+                  <SettingsItem label="Theme" description="Choose the app palette. Subtle Light uses a warm, low-glare background.">
+                    <ThemedDropdown
+                      value={theme}
+                      onChange={(value) => setTheme(value as AppTheme)}
+                      ariaLabel="App theme"
+                      options={[
+                        { value: "phokus", label: "Phokus" },
+                        { value: "subtle-light", label: "Subtle Light" },
+                        { value: "conventional-dark", label: "Conventional Dark" },
+                      ]}
+                    />
+                  </SettingsItem>
+                </SettingsGroup>
+
+                <SettingsGroup title="Video playback">
+                  <SettingsItem
+                    label="Autoplay in lightbox"
+                    description="Start playing videos automatically when opened in the lightbox."
+                  >
+                    <button
+                      role="switch"
+                      aria-checked={lightboxAutoplay}
+                      className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none ${lightboxAutoplay ? "bg-sky-500" : "bg-white/15"}`}
+                      onClick={() => setLightboxAutoplay(!lightboxAutoplay)}
+                    >
+                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${lightboxAutoplay ? "translate-x-4" : "translate-x-0"}`} />
+                    </button>
+                  </SettingsItem>
+                  <SettingsItem
+                    label="Start muted"
+                    description="Open videos with their audio muted — unmute from the player controls."
+                  >
+                    <button
+                      role="switch"
+                      aria-checked={lightboxAutoMute}
+                      className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none ${lightboxAutoMute ? "bg-sky-500" : "bg-white/15"}`}
+                      onClick={() => setLightboxAutoMute(!lightboxAutoMute)}
+                    >
+                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${lightboxAutoMute ? "translate-x-4" : "translate-x-0"}`} />
+                    </button>
+                  </SettingsItem>
+                </SettingsGroup>
+
                <SettingsGroup title="Updates">
                  <SettingsItem
                    label={
@@ -616,7 +673,24 @@ export function SettingsModal() {
                      updateStatus === "error" ? (
                        <span className="text-amber-300/90">Update check failed: {updateError}</span>
                      ) : updateStatus === "downloading" || updateStatus === "installing" ? (
-                        "Downloading update — the app will restart when it finishes."
+                        <span className="block">
+                          <span className="text-gray-400">
+                            {updateStatus === "installing"
+                              ? "Installing update…"
+                              : updateProgress !== null
+                                ? `Downloading update — ${Math.round(updateProgress * 100)}%`
+                                : "Downloading update…"}
+                          </span>
+                          <span className="mt-2 block h-1 overflow-hidden rounded-full bg-white/10">
+                            <span
+                              className={`block h-full rounded-full bg-emerald-400/80 transition-[width] duration-200 ${
+                                updateProgress === null ? "w-full animate-pulse" : ""
+                              }`}
+                              style={updateProgress !== null ? { width: `${Math.round(updateProgress * 100)}%` } : undefined}
+                            />
+                          </span>
+                          <span className="mt-1 block text-gray-600">The app will restart when it finishes.</span>
+                        </span>
                      ) : (
                        "Updates are checked quietly at launch and installed only when you choose."
                      )
@@ -631,7 +705,7 @@ export function SettingsModal() {
                      </button>
                    ) : (
                      <button
-                        className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                        className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                        onClick={() => void checkForUpdates()}
                        disabled={updateStatus === "checking" || updateStatus === "downloading" || updateStatus === "installing"}
                      >
@@ -639,6 +713,19 @@ export function SettingsModal() {
                      </button>
                    )}
                  </SettingsItem>
+                  {getChangelogForVersion(appVersion) ? (
+                    <SettingsItem
+                      label="What's new"
+                      description={`See what changed in Phokus v${appVersion}.`}
+                    >
+                      <button
+                        className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                        onClick={openWhatsNew}
+                      >
+                        View changes
+                      </button>
+                    </SettingsItem>
+                  ) : null}
                </SettingsGroup>

                <SettingsGroup title="Setup">
@@ -648,7 +735,7 @@ export function SettingsModal() {
                    description="Replay the guided first-run tour — library setup, the background pipeline, search modes, and AI features."
                  >
                    <button
-                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
+                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                      onClick={() => {
                        setSettingsOpen(false);
                        openOnboarding();
@@ -665,7 +752,7 @@ export function SettingsModal() {
                    description="Open the folder in Explorer to inspect or back up the database, thumbnails, and models."
                  >
                    <button
-                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                      onClick={() => {
                        setOpeningDataFolder(true);
                        void openAppDataFolder().finally(() => setOpeningDataFolder(false));
@@ -730,7 +817,7 @@ export function SettingsModal() {
                    }
                  >
                    <button
-                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                      onClick={() => {
                        setVacuuming(true);
                        setVacuumResult(null);
@@ -748,6 +835,42 @@ export function SettingsModal() {
                    </button>
                  </SettingsItem>

+                  <SettingsItem
+                    label="Rebuild semantic index"
+                    description={
+                      <>
+                        <span>
+                          Recreates the visual-embedding index and re-embeds every image in the
+                          background. Use this if semantic or similar-image search reports a
+                          dimension-mismatch error (for example after experimenting with a
+                          different embedding model).
+                        </span>
+                        {rebuildIndexResult !== null ? (
+                          <span className="mt-2 block text-gray-600">{rebuildIndexResult}</span>
+                        ) : null}
+                      </>
+                    }
+                  >
+                    <button
+                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                      onClick={() => {
+                        setRebuildingIndex(true);
+                        setRebuildIndexResult(null);
+                        void rebuildSemanticIndex()
+                          .then((count) =>
+                            setRebuildIndexResult(
+                              `Re-queued ${count.toLocaleString()} image${count === 1 ? "" : "s"} for embedding.`,
+                            ),
+                          )
+                          .catch((error) => setRebuildIndexResult(String(error)))
+                          .finally(() => setRebuildingIndex(false));
+                      }}
+                      disabled={rebuildingIndex}
+                    >
+                      {rebuildingIndex ? "Rebuilding…" : "Rebuild index"}
+                    </button>
+                  </SettingsItem>
+
                  <SettingsItem
                    label="Thumbnail cache"
                    description={
@@ -791,7 +914,7 @@ export function SettingsModal() {
                    }
                  >
                    <button
-                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                      className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                      onClick={() => {
                        setCleaningThumbnails(true);
                        cleanupOrphanedThumbnails()
@@ -1,6 +1,8 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Reorder, useDragControls } from "framer-motion";
 import { open } from "@tauri-apps/plugin-dialog";
 import { useGalleryStore, Folder, IndexProgress } from "../store";
+import { ThemedDropdown } from "./ThemedDropdown";

 interface ContextMenuState {
  folderId: number;
@@ -8,6 +10,9 @@ interface ContextMenuState {
  y: number;
 }

+type LibrarySort = "az" | "za" | "custom";
+const LIBRARY_SORT_KEY = "phokus-library-sort";
+
 function FolderContextMenu({
  menu,
  folder,
@@ -82,11 +87,22 @@ function FolderItem({
  folder,
  selected,
  progress,
+  customOrdering,
+  dragging,
+  onDragStart,
+  onDragEnd,
+  onKeyboardMove,
 }: {
  folder: Folder;
  selected: boolean;
  progress: IndexProgress | undefined;
+  customOrdering: boolean;
+  dragging: boolean;
+  onDragStart: (pointerY: number) => void;
+  onDragEnd: () => void;
+  onKeyboardMove: (direction: -1 | 1) => void;
 }) {
+  const dragControls = useDragControls();
  const { selectFolder, removeFolder, reindexFolder, renameFolder, updateFolderPath, toggleMutedFolder } = useGalleryStore();
  const mutedFolderIds = useGalleryStore((state) => state.mutedFolderIds);
  const setAllWorkersPaused = useGalleryStore((state) => state.setAllWorkersPaused);
@@ -141,16 +157,57 @@ function FolderItem({
  };

  return (
-    <>
+    <Reorder.Item
+      as="div"
+      value={folder.id}
+      drag={customOrdering ? "y" : false}
+      dragControls={dragControls}
+      dragListener={false}
+      dragElastic={0.08}
+      onDragEnd={onDragEnd}
+      layout
+      transition={{ layout: { type: "spring", stiffness: 520, damping: 38, mass: 0.55 } }}
+      className={`relative z-0 ${dragging ? "z-20" : ""}`}
+      style={{ position: "relative" }}
+    >
      <div
        className={`group relative flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
          selected
            ? "bg-white/8 text-white"
            : "text-gray-500 hover:text-gray-200 hover:bg-white/5"
-        }`}
+        } ${dragging ? "scale-[1.02] bg-white/[0.11] text-white shadow-xl shadow-black/25 ring-1 ring-white/15" : ""}`}
        onClick={() => !renaming && selectFolder(folder.id)}
        onContextMenu={handleContextMenu}
      >
+        {customOrdering ? (
+          <button
+            type="button"
+            aria-label={`Reorder ${folder.name}`}
+            title={`Drag to reorder ${folder.name}`}
+            className={`-ml-1 flex h-7 w-5 shrink-0 touch-none items-center justify-center rounded-md transition-colors ${
+              dragging
+                ? "cursor-grabbing bg-white/10 text-gray-300"
+                : "cursor-grab text-gray-700 hover:bg-white/[0.06] hover:text-gray-400"
+            }`}
+            onPointerDown={(event) => {
+              event.stopPropagation();
+              onDragStart(event.clientY);
+              dragControls.start(event);
+            }}
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => {
+              if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onKeyboardMove(event.key === "ArrowUp" ? -1 : 1);
+            }}
+          >
+            <svg className="h-3 w-3" viewBox="0 0 12 12" fill="currentColor">
+              <circle cx="3" cy="3" r="1" /><circle cx="9" cy="3" r="1" />
+              <circle cx="3" cy="9" r="1" /><circle cx="9" cy="9" r="1" />
+            </svg>
+          </button>
+        ) : null}
        {isMissing ? (
          <span className="shrink-0 text-amber-400">
            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -278,26 +335,134 @@ function FolderItem({
          onRemove={() => setConfirmingRemoval(true)}
        />
      )}
-    </>
+    </Reorder.Item>
  );
 }

 export function Sidebar() {
  const folders = useGalleryStore((state) => state.folders);
  const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
-  const addFolder = useGalleryStore((state) => state.addFolder);
+  const setFolderPickerOpen = useGalleryStore((state) => state.setFolderPickerOpen);
  const indexingProgress = useGalleryStore((state) => state.indexingProgress);
  const selectFolder = useGalleryStore((state) => state.selectFolder);
  const activeView = useGalleryStore((state) => state.activeView);
  const setView = useGalleryStore((state) => state.setView);
+  const reorderFolders = useGalleryStore((state) => state.reorderFolders);
+  const [librarySort, setLibrarySortState] = useState<LibrarySort>(() => {
+    const saved = window.localStorage.getItem(LIBRARY_SORT_KEY);
+    return saved === "za" || saved === "custom" ? saved : "az";
+  });
+  const [customFolders, setCustomFolders] = useState(folders);
+  const [draggedFolderId, setDraggedFolderId] = useState<number | null>(null);
+  const folderListRef = useRef<HTMLDivElement>(null);
+  const customFoldersRef = useRef(folders);
+  const pointerYRef = useRef(0);
+  const autoScrollFrameRef = useRef<number | null>(null);
+  const keyboardPersistRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  const handleAddFolder = async () => {
-    const selected = await open({ directory: true, multiple: false, title: "Select Media Folder" });
-    if (selected && typeof selected === "string") {
-      await addFolder(selected);
+  useEffect(
+    () => () => {
+      if (keyboardPersistRef.current) clearTimeout(keyboardPersistRef.current);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (draggedFolderId !== null) return;
+    setCustomFolders(folders);
+    customFoldersRef.current = folders;
+  }, [folders, draggedFolderId]);
+
+  useEffect(() => {
+    if (draggedFolderId === null) return;
+
+    const handlePointerMove = (event: PointerEvent) => {
+      pointerYRef.current = event.clientY;
+    };
+
+    const autoScroll = () => {
+      const list = folderListRef.current;
+      if (list) {
+        const rect = list.getBoundingClientRect();
+        const edgeSize = Math.min(64, rect.height * 0.2);
+        const topDistance = pointerYRef.current - rect.top;
+        const bottomDistance = rect.bottom - pointerYRef.current;
+        let velocity = 0;
+
+        if (topDistance < edgeSize) {
+          velocity = -Math.pow((edgeSize - Math.max(0, topDistance)) / edgeSize, 1.6) * 14;
+        } else if (bottomDistance < edgeSize) {
+          velocity = Math.pow((edgeSize - Math.max(0, bottomDistance)) / edgeSize, 1.6) * 14;
+        }
+
+        if (velocity !== 0) list.scrollTop += velocity;
+      }
+      autoScrollFrameRef.current = requestAnimationFrame(autoScroll);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove, { passive: true });
+    autoScrollFrameRef.current = requestAnimationFrame(autoScroll);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      if (autoScrollFrameRef.current !== null) cancelAnimationFrame(autoScrollFrameRef.current);
+      autoScrollFrameRef.current = null;
+    };
+  }, [draggedFolderId]);
+
+  const displayedFolders = useMemo(() => {
+    if (librarySort === "custom") return customFolders;
+    return [...folders].sort((a, b) => {
+      const result = a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" });
+      return librarySort === "az" ? result : -result;
+    });
+  }, [customFolders, folders, librarySort]);
+
+  const setLibrarySort = (sort: LibrarySort) => {
+    window.localStorage.setItem(LIBRARY_SORT_KEY, sort);
+    setLibrarySortState(sort);
+  };
+
+  const handleReorder = (orderedIds: number[]) => {
+    const byId = new Map(customFoldersRef.current.map((folder) => [folder.id, folder]));
+    const next = orderedIds
+      .map((id) => byId.get(id))
+      .filter((folder): folder is Folder => folder !== undefined);
+    customFoldersRef.current = next;
+    setCustomFolders(next);
+  };
+
+  const finishReorder = () => {
+    const nextIds = customFoldersRef.current.map((folder) => folder.id);
+    setDraggedFolderId(null);
+    const currentIds = folders.map((folder) => folder.id);
+    if (nextIds.some((id, index) => id !== currentIds[index])) {
+      void reorderFolders(nextIds);
    }
  };

+  const moveFolderByKeyboard = (folderId: number, direction: -1 | 1) => {
+    const current = customFoldersRef.current;
+    const currentIndex = current.findIndex((folder) => folder.id === folderId);
+    const nextIndex = currentIndex + direction;
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= current.length) return;
+
+    const next = [...current];
+    [next[currentIndex], next[nextIndex]] = [next[nextIndex], next[currentIndex]];
+    customFoldersRef.current = next;
+    setCustomFolders(next);
+    // Debounce the DB write so a held arrow key doesn't fire one per keystroke;
+    // the local order updates immediately, only the persist waits to settle.
+    if (keyboardPersistRef.current) clearTimeout(keyboardPersistRef.current);
+    keyboardPersistRef.current = setTimeout(() => {
+      keyboardPersistRef.current = null;
+      void reorderFolders(customFoldersRef.current.map((folder) => folder.id));
+    }, 400);
+  };
+
+  const handleAddFolder = () => {
+    setFolderPickerOpen(true);
+  };
+
  return (
    <aside className="w-60 shrink-0 flex flex-col bg-gray-950 border-r border-white/[0.06]">
      {/* Header */}
@@ -387,28 +552,55 @@ export function Sidebar() {

      {/* Section label */}
      {folders.length > 0 && (
-        <div className="px-5 pt-3 pb-1">
+        <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-1">
          <span className="text-[10px] font-semibold uppercase tracking-[0.15em] text-gray-600">Libraries</span>
+          <ThemedDropdown
+            value={librarySort}
+            onChange={(value) => setLibrarySort(value as LibrarySort)}
+            ariaLabel="Library order"
+            compact
+            options={[
+              { value: "az", label: "A-Z" },
+              { value: "za", label: "Z-A" },
+              { value: "custom", label: "Custom" },
+            ]}
+          />
        </div>
      )}

      {/* Folder list */}
-      <div className="flex-1 overflow-y-auto px-2 pb-2 space-y-px min-h-0">
+      <Reorder.Group
+        ref={folderListRef}
+        as="div"
+        axis="y"
+        values={displayedFolders.map((folder) => folder.id)}
+        onReorder={librarySort === "custom" ? handleReorder : () => {}}
+        layoutScroll
+        className="flex-1 overflow-y-auto px-2 pb-2 space-y-px min-h-0"
+      >
        {folders.length === 0 ? (
          <p className="text-gray-700 text-xs px-3 py-6 text-center leading-relaxed">
            Add a folder to get started
          </p>
        ) : (
-          folders.map((folder) => (
+          displayedFolders.map((folder) => (
            <FolderItem
              key={folder.id}
              folder={folder}
              selected={selectedFolderId === folder.id}
              progress={indexingProgress[folder.id]}
+              customOrdering={librarySort === "custom"}
+              dragging={draggedFolderId === folder.id}
+              onDragStart={(pointerY) => {
+                pointerYRef.current = pointerY;
+                setDraggedFolderId(folder.id);
+              }}
+              onDragEnd={finishReorder}
+              onKeyboardMove={(direction) => moveFolderByKeyboard(folder.id, direction)}
            />
          ))
        )}
-      </div>
+      </Reorder.Group>
    </aside>
  );
 }
@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { ExploreTagEntry, TagCloudEntry, useGalleryStore } from "../store";
 import { FolderScopeDropdown } from "./FolderScopeDropdown";
@@ -110,29 +110,44 @@ function buildCloud(entries: TagCloudEntry[], containerW: number, containerH: nu
  }));
 }

-function CloudCard({ node, onOpen }: { node: PlacedNode; onOpen: (imageIds: number[]) => void }) {
+function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imageIds: number[]) => void; animated: boolean }) {
  const src = node.entry.thumbnail_path ? convertFileSrc(node.entry.thumbnail_path) : null;
  const { w, h, accent } = node;
+  const driftTransition = {
+    duration: node.driftDuration,
+    ease: "easeInOut" as const,
+    delay: seeded(node.index + 41) * 1.6,
+    repeat: 1,
+    repeatType: "reverse" as const,
+  };

  return (
    <motion.button
-      className="group absolute overflow-hidden rounded-2xl border border-white/8 bg-white/[0.04] text-left shadow-[0_8px_40px_rgba(0,0,0,0.5)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
+      className="explore-cluster-card group absolute overflow-hidden rounded-2xl border border-white/8 bg-white/[0.04] text-left shadow-[0_8px_28px_rgba(0,0,0,0.38)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
      style={{ width: w, height: h, left: node.x - w / 2, top: node.y - h / 2 }}
-      initial={{ opacity: 0, scale: 0.75 }}
-      animate={{
-        opacity: 1,
-        scale: 1,
-        x: [0, node.driftX, 0],
-        y: [0, node.driftY, 0],
-        rotate: [node.rotateSeed, node.rotateSeed + 1.4, node.rotateSeed],
-      }}
-      transition={{
-        opacity: { duration: 0.3, delay: Math.min(node.index * 0.035, 0.7) },
-        scale:   { duration: 0.3, delay: Math.min(node.index * 0.035, 0.7) },
-        x:       { duration: node.driftDuration, repeat: Infinity, ease: "easeInOut", delay: seeded(node.index + 41) * 3 },
-        y:       { duration: node.driftDuration + 1.6, repeat: Infinity, ease: "easeInOut", delay: seeded(node.index + 51) * 3 },
-        rotate:  { duration: node.driftDuration + 0.9, repeat: Infinity, ease: "easeInOut" },
-      }}
+      initial={animated ? { opacity: 0, scale: 0.82, rotate: node.rotateSeed } : { opacity: 0, scale: 0.96 }}
+      animate={
+        animated
+          ? {
+              opacity: 1,
+              scale: 1,
+              x: [0, node.driftX * 0.65, 0],
+              y: [0, node.driftY * 0.65, 0],
+              rotate: [node.rotateSeed, node.rotateSeed + 0.8, node.rotateSeed],
+            }
+          : { opacity: 1, scale: 1, rotate: node.rotateSeed }
+      }
+      transition={
+        animated
+          ? {
+              opacity: { duration: 0.24, delay: Math.min(node.index * 0.024, 0.45) },
+              scale: { duration: 0.24, delay: Math.min(node.index * 0.024, 0.45) },
+              x: driftTransition,
+              y: { ...driftTransition, duration: node.driftDuration + 1.2, delay: seeded(node.index + 51) * 1.6 },
+              rotate: { ...driftTransition, duration: node.driftDuration + 0.8, delay: seeded(node.index + 61) * 1.2 },
+            }
+          : { opacity: { duration: 0.18, delay: Math.min(node.index * 0.016, 0.28) }, scale: { duration: 0.18, delay: Math.min(node.index * 0.016, 0.28) } }
+      }
      whileHover={{ scale: 1.06, rotate: 0, transition: { duration: 0.18 } }}
      onClick={() => onOpen(node.entry.image_ids)}
      title={`Open cluster — ${node.entry.count.toLocaleString()} images`}
@@ -143,22 +158,24 @@ function CloudCard({ node, onOpen }: { node: PlacedNode; onOpen: (imageIds: numb
          alt=""
          className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
          draggable={false}
+          loading="lazy"
+          decoding="async"
        />
      ) : (
        <div className="absolute inset-0 bg-gradient-to-br from-white/[0.07] to-transparent" />
      )}
-      <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" />
+      <div className="explore-cluster-overlay absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" />
      {/* Accent glow on hover */}
      <div
        className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `radial-gradient(ellipse at bottom, ${accent}25, transparent 70%)` }}
      />
      <div className="absolute inset-x-0 bottom-0 p-3">
-        <div className="mb-2 h-px rounded-full" style={{ background: `linear-gradient(to right, ${accent}80, transparent)` }} />
+        <div className="explore-cluster-rule mb-2 h-px rounded-full" style={{ background: `linear-gradient(to right, ${accent}80, transparent)` }} />
        <div className="flex items-end justify-between gap-2">
          <div>
-            <p className="text-[9px] uppercase tracking-[0.18em] text-white/35">Cluster</p>
-            <p className="text-base font-semibold leading-none text-white">{node.entry.count.toLocaleString()}</p>
+            <p className="explore-cluster-label text-[9px] uppercase tracking-[0.18em] text-white/35">Cluster</p>
+            <p className="explore-cluster-count text-base font-semibold leading-none text-white">{node.entry.count.toLocaleString()}</p>
          </div>
          <span
            className="rounded-full border px-2 py-0.5 text-[9px] uppercase tracking-[0.1em] opacity-0 transition-opacity duration-200 group-hover:opacity-100"
@@ -197,7 +214,7 @@ function TagWord({
      animate={{ opacity: 0.4 + ratio * 0.6, scale: 1 }}
      transition={{ delay: Math.min(index * 0.008, 0.55), duration: 0.22 }}
      whileHover={{ scale: 1.2, opacity: 1, rotate: 0, transition: { duration: 0.14 } }}
-      className="group inline-flex items-center gap-1 rounded-full px-2 py-1 transition-colors hover:bg-white/[0.07]"
+      className="explore-tag-word group inline-flex items-center gap-1 rounded-full px-2 py-1 transition-colors hover:bg-white/[0.07]"
      style={{ fontSize, rotate: tilt }}
      onClick={() => onSearch(entry.tag)}
      title={`${entry.tag} — ${entry.count.toLocaleString()} images`}
@@ -221,7 +238,7 @@ function TagWord({
 function Spinner() {
  return (
    <motion.div
-      className="h-5 w-5 rounded-full border-2 border-white/15 border-t-white/50"
+      className="explore-spinner h-5 w-5 rounded-full border-2 border-white/15 border-t-white/50"
      animate={{ rotate: 360 }}
      transition={{ duration: 0.85, repeat: Infinity, ease: "linear" }}
    />
@@ -238,6 +255,7 @@ function ClusterCloud({
  entries: TagCloudEntry[];
  onOpen: (imageIds: number[]) => void;
 }) {
+  const reducedMotion = useReducedMotion();
  const canvasRef = useRef<HTMLDivElement>(null);
  const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });

@@ -261,9 +279,14 @@ function ClusterCloud({

  return (
    <div ref={canvasRef} className="relative min-h-0 flex-1 overflow-hidden">
-      <div className="pointer-events-none absolute inset-0 opacity-[0.07] [background-image:radial-gradient(circle,rgba(255,255,255,0.6)_1px,transparent_1px)] [background-size:28px_28px]" />
+      <div className="explore-cluster-grid pointer-events-none absolute inset-0 opacity-[0.07] [background-image:radial-gradient(circle,rgba(255,255,255,0.6)_1px,transparent_1px)] [background-size:28px_28px]" />
      {nodes.map((node) => (
-        <CloudCard key={`${node.entry.representative_image_id}:${node.index}`} node={node} onOpen={onOpen} />
+        <CloudCard
+          key={`${node.entry.representative_image_id}:${node.index}`}
+          node={node}
+          onOpen={onOpen}
+          animated={!reducedMotion && node.index < 12}
+        />
      ))}
    </div>
  );
@@ -300,13 +323,13 @@ export function TagCloud() {
  const entryCount = exploreMode === "visual" ? tagCloudEntries.length : exploreTagEntries.length;

  return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.08),transparent_50%),radial-gradient(ellipse_at_80%_75%,rgba(168,85,247,0.07),transparent_40%),#07080f]">
+    <div className="explore-view flex min-h-0 flex-1 flex-col overflow-hidden bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.08),transparent_50%),radial-gradient(ellipse_at_80%_75%,rgba(168,85,247,0.07),transparent_40%),#07080f]">
      {/* Header */}
-      <div className="shrink-0 border-b border-white/[0.05] px-6 py-4">
+      <div className="explore-header shrink-0 border-b border-white/[0.05] px-6 py-4">
        <div className="flex items-center justify-between gap-4">
          <div className="min-w-0">
-            <h2 className="text-[15px] font-semibold text-white">Explore</h2>
-            <p className="mt-0.5 truncate text-[11px] text-white/30">
+            <h2 className="explore-title text-[15px] font-semibold text-white">Explore</h2>
+            <p className="explore-subtitle mt-0.5 truncate text-[11px] text-white/30">
              {loading
                ? exploreMode === "visual" ? "Computing visual clusters…" : "Loading tags…"
                : hasEntries
@@ -320,9 +343,9 @@ export function TagCloud() {
          </div>
          <div className="flex shrink-0 items-center gap-2">
            <FolderScopeDropdown />
-            <div className="flex rounded-lg border border-white/8 bg-white/[0.03] p-0.5">
+            <div className="explore-mode-toggle flex rounded-lg border border-white/8 bg-white/[0.03] p-0.5">
              <button
-                className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
+                className={`explore-mode-button rounded-md px-3 py-1.5 text-xs transition-colors ${
                  exploreMode === "visual" ? "bg-white/10 text-white" : "text-gray-500 hover:text-gray-300"
                }`}
                onClick={() => setExploreMode("visual")}
@@ -330,7 +353,7 @@ export function TagCloud() {
                Clusters
              </button>
              <button
-                className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
+                className={`explore-mode-button rounded-md px-3 py-1.5 text-xs transition-colors ${
                  exploreMode === "tags" ? "bg-white/10 text-white" : "text-gray-500 hover:text-gray-300"
                }`}
                onClick={() => setExploreMode("tags")}
@@ -343,13 +366,13 @@ export function TagCloud() {
      </div>

      {loading ? (
-        <div className="flex flex-1 items-center justify-center gap-3 text-white/25">
+        <div className="explore-empty flex flex-1 items-center justify-center gap-3 text-white/25">
          <Spinner />
          <span className="text-sm">{exploreMode === "visual" ? "Computing clusters…" : "Loading tags…"}</span>
        </div>
      ) : !hasEntries ? (
        <div className="flex flex-1 items-center justify-center px-8">
-          <p className="max-w-xs text-center text-sm leading-relaxed text-white/25">
+          <p className="explore-empty max-w-xs text-center text-sm leading-relaxed text-white/25">
            {exploreMode === "visual"
              ? "No visual clusters yet. Images need embeddings before they can be grouped. Check indexing progress in the sidebar."
              : "No tags yet. Run the AI tagger from Settings, or add tags manually in the image preview."}
@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+}
+
+export function ThemedDropdown({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  compact = false,
+  align = "right",
+}: {
+  value: string;
+  options: DropdownOption[];
+  onChange: (value: string) => void;
+  ariaLabel: string;
+  compact?: boolean;
+  align?: "left" | "right";
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const current = options.find((option) => option.value === value) ?? options[0];
+
+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!ref.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((currentOpen) => !currentOpen)}
+        className={`flex items-center justify-between gap-2 rounded-md border transition-colors ${
+          compact
+            ? "border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-medium light-theme:border-gray-700/50 light-theme:bg-gray-900"
+            : "min-w-40 border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs light-theme:border-gray-700/50 light-theme:bg-gray-900"
+        } ${open ? "border-white/20 text-white light-theme:border-gray-700 light-theme:text-white" : "text-gray-400 hover:border-white/15 hover:text-gray-200 light-theme:text-white light-theme:hover:border-gray-700 light-theme:hover:bg-gray-800 light-theme:hover:text-white"}`}
+      >
+        <span>{current?.label}</span>
+        <svg
+          className={`h-3 w-3 shrink-0 text-gray-500 transition-transform duration-150 ${open ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={ariaLabel}
+          className={`absolute top-full z-50 mt-1.5 min-w-full rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl shadow-black/30 backdrop-blur-xl light-theme:border-gray-700/50 ${
+            align === "right" ? "right-0" : "left-0"
+          }`}
+        >
+          {options.map((option) => {
+            const selected = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={selected}
+                className={`flex w-full items-center justify-between gap-4 whitespace-nowrap rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+                  selected
+                    ? "bg-white/[0.08] text-white light-theme:bg-gray-900 light-theme:text-white"
+                    : "text-gray-400 hover:bg-white/[0.055] hover:text-gray-200 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
+                }`}
+                onClick={() => {
+                  onChange(option.value);
+                  setOpen(false);
+                }}
+              >
+                <span>{option.label}</span>
+                {selected ? (
+                  <svg className="h-3.5 w-3.5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                  </svg>
+                ) : null}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
@@ -5,6 +5,8 @@ import { ContextMenu, ImageTile } from "./Gallery";

 const GAP = 6;
 const HEADER_HEIGHT = 52;
+const SCRUBBER_WIDTH = 48;
+const MONTH_SHORT = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] as const;

 interface TimelineGroup {
  key: string;
@@ -12,6 +14,23 @@ interface TimelineGroup {
  images: ImageRecord[];
 }

+// One virtualized row: either a month header or a row of up to `cols` tiles.
+type TimelineRow =
+  | { type: "header"; group: TimelineGroup }
+  | { type: "tiles"; images: ImageRecord[] };
+
+interface ScrubberMonth {
+  monthNum: number;
+  label: string;
+  groupIndex: number;
+}
+
+interface ScrubberYear {
+  year: string;
+  firstGroupIndex: number;
+  months: ScrubberMonth[];
+}
+
 function buildLabel(key: string): string {
  if (key === "unknown") return "Unknown Date";
  const [yearStr, monthStr] = key.split("-");
@@ -44,6 +63,27 @@ function groupImages(images: ImageRecord[]): TimelineGroup[] {
    .map(([key, imgs]) => ({ key, label: buildLabel(key), images: imgs }));
 }

+function buildScrubberYears(groups: TimelineGroup[]): ScrubberYear[] {
+  const byYear = new Map<string, ScrubberYear>();
+  for (let i = 0; i < groups.length; i++) {
+    const group = groups[i];
+    if (group.key === "unknown") continue;
+    const year = group.key.substring(0, 4);
+    const monthNum = Number(group.key.substring(5, 7));
+    if (!byYear.has(year)) {
+      byYear.set(year, { year, firstGroupIndex: i, months: [] });
+    }
+    byYear.get(year)!.months.push({
+      monthNum,
+      label: MONTH_SHORT[monthNum - 1] ?? "",
+      groupIndex: i,
+    });
+  }
+  // Keep insertion order so the scrubber runs the same direction as the scrolled
+  // content (oldest at top with taken_asc), keeping the active highlight aligned.
+  return Array.from(byYear.values());
+}
+
 export function Timeline() {
  const images = useGalleryStore((s) => s.images);
  const loadMoreImages = useGalleryStore((s) => s.loadMoreImages);
@@ -55,13 +95,15 @@ export function Timeline() {

  const parentRef = useRef<HTMLDivElement>(null);
  const [containerWidth, setContainerWidth] = useState(0);
+  const [activeGroupIndex, setActiveGroupIndex] = useState(0);
  const [contextMenu, setContextMenu] = useState<{
    x: number;
    y: number;
    image: ImageRecord;
  } | null>(null);

-  // Measure container width before first paint to avoid a single-column flash.
+  // parentRef is the scroll container. Its clientWidth already excludes the
+  // scrubber because they are flex siblings, so no further adjustment is needed.
  useLayoutEffect(() => {
    const el = parentRef.current;
    if (!el) return;
@@ -74,35 +116,59 @@ export function Timeline() {
  }, []);

  const tileSize = tileSizeForZoom(zoomPreset);
+  const groups = useMemo(() => groupImages(images), [images]);
+  const scrubberYears = useMemo(() => buildScrubberYears(groups), [groups]);
+  // Show as soon as there's more than one month to jump between — not gated on
+  // a full year. With taken_asc sort the loaded set is oldest-first, so this
+  // reflects whatever range is currently loaded.
+  const showScrubber = groups.length > 1;
+
  const cols = useMemo(
    () => Math.max(1, Math.floor((containerWidth - GAP) / (tileSize + GAP))),
    [containerWidth, tileSize],
  );

-  const groups = useMemo(() => groupImages(images), [images]);
+  // Flatten the month groups into a single list of fixed-height rows — one
+  // header row per group, then one tile-row per `cols` images. This lets the
+  // virtualizer render only the on-screen rows, exactly like the Gallery.
+  // Previously each *group* was one virtual item that rendered ALL of its
+  // images, so scrolling into a busy month mounted thousands of tiles at once.
+  const { rows, rowToGroupIndex, groupFirstRow } = useMemo(() => {
+    const rows: TimelineRow[] = [];
+    const rowToGroupIndex: number[] = [];
+    const groupFirstRow: number[] = [];
+    groups.forEach((group, groupIndex) => {
+      groupFirstRow[groupIndex] = rows.length;
+      rows.push({ type: "header", group });
+      rowToGroupIndex.push(groupIndex);
+      for (let i = 0; i < group.images.length; i += cols) {
+        rows.push({ type: "tiles", images: group.images.slice(i, i + cols) });
+        rowToGroupIndex.push(groupIndex);
+      }
+    });
+    return { rows, rowToGroupIndex, groupFirstRow };
+  }, [groups, cols]);

-  // estimateSize must be exact so virtualizer positions groups correctly.
-  // Each group height = header + rowCount * (tileSize + GAP) where the last row's
-  // GAP acts as spacing between this group and the next header.
  const estimateSize = useCallback(
-    (index: number): number => {
-      const group = groups[index];
-      if (!group) return HEADER_HEIGHT;
-      const rowCount = Math.ceil(group.images.length / cols);
-      return HEADER_HEIGHT + rowCount * (tileSize + GAP);
-    },
-    [groups, cols, tileSize],
+    (index: number): number =>
+      rows[index]?.type === "header" ? HEADER_HEIGHT : tileSize + GAP,
+    [rows, tileSize],
  );

  const virtualizer = useVirtualizer({
-    count: groups.length,
+    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize,
-    overscan: 2,
+    overscan: 6,
+    paddingStart: GAP,
  });

-  // Re-measure all items when cols changes so virtualizer positions stay accurate
-  // after a window resize (react-virtual v3 doesn't invalidate cached sizes on its own).
+  // Refs so the scroll handler can read the latest mappings without re-binding.
+  const rowToGroupIndexRef = useRef(rowToGroupIndex);
+  rowToGroupIndexRef.current = rowToGroupIndex;
+  const groupFirstRowRef = useRef(groupFirstRow);
+  groupFirstRowRef.current = groupFirstRow;
+
  useEffect(() => {
    virtualizer.measure();
  }, [cols, virtualizer]);
@@ -110,12 +176,25 @@ export function Timeline() {
  const handleScroll = useCallback(() => {
    const el = parentRef.current;
    if (!el) return;
-    if (el.scrollTop < 24) return;
-    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 600;
+
+    // Active month = the group owning the first row still visible at the top.
+    const scrollTop = el.scrollTop;
+    const items = virtualizer.getVirtualItems();
+    let activeRow = items.length > 0 ? items[0].index : 0;
+    for (const item of items) {
+      if (item.start + item.size > scrollTop + HEADER_HEIGHT / 2) {
+        activeRow = item.index;
+        break;
+      }
+    }
+    setActiveGroupIndex(rowToGroupIndexRef.current[activeRow] ?? 0);
+
+    if (scrollTop < 24) return;
+    const nearBottom = scrollTop + el.clientHeight >= el.scrollHeight - 600;
    if (nearBottom && !loadingImages && images.length < totalImages) {
      void loadMoreImages();
    }
-  }, [images.length, loadMoreImages, loadingImages, totalImages]);
+  }, [virtualizer, images.length, loadMoreImages, loadingImages, totalImages]);

  useEffect(() => {
    const el = parentRef.current;
@@ -140,105 +219,135 @@ export function Timeline() {
    };
  }, []);

-  return (
-    <div
-      ref={parentRef}
-      className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-[#07080f]"
-    >
-      {images.length === 0 && loadingImages ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
-          <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8 min-w-72">
-            <div className="h-5 w-5 mx-auto rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
-            <p className="mt-4 text-sm text-white/40 font-medium">Loading timeline</p>
-            <p className="text-xs text-white/20 mt-1">Fetching results</p>
-          </div>
-        </div>
-      ) : images.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
-          <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8">
-            <svg
-              className="h-12 w-12 mx-auto text-white/10 mb-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={0.75}
-                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-            <p className="text-sm text-white/30 font-medium">
-              {imageLoadError ? "Could not load timeline" : "No media found"}
-            </p>
-            <p className="text-xs text-white/15 mt-1">
-              {imageLoadError ?? "Add a folder to see your timeline"}
-            </p>
-          </div>
-        </div>
-      ) : (
-        <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
-          {virtualizer.getVirtualItems().map((virtualItem) => {
-            const group = groups[virtualItem.index];
-            if (!group) return null;
-            return (
-              <div
-                key={virtualItem.key}
-                style={{
-                  position: "absolute",
-                  top: virtualItem.start,
-                  width: "100%",
-                  height: virtualItem.size,
-                }}
-              >
-                {/* Group header */}
-                <div
-                  className="flex items-center gap-3 px-4"
-                  style={{ height: HEADER_HEIGHT }}
-                >
-                  <span className="text-sm font-semibold text-white/80 shrink-0">
-                    {group.label}
-                  </span>
-                  <span className="text-xs text-white/25 shrink-0 tabular-nums">
-                    {group.images.length}
-                  </span>
-                  <div className="flex-1 h-px bg-white/[0.06]" />
-                </div>
+  const scrollToGroup = useCallback(
+    (groupIndex: number) => {
+      const row = groupFirstRowRef.current[groupIndex] ?? 0;
+      virtualizer.scrollToIndex(row, { align: "start" });
+    },
+    [virtualizer],
+  );

-                {/* Image grid — paddingBottom:GAP gives the gap below the last row,
-                    matching the row-to-row gap and making estimateSize exact. */}
+  return (
+    // Outer flex-row: fills remaining height in <main>'s flex-col, then
+    // splits horizontally between the scroll area and the scrubber.
+    <div className="flex flex-1 min-h-0 bg-gray-950">
+      {/* Scroll container — flex-1 takes all width except the scrubber */}
+      <div
+        ref={parentRef}
+        className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0"
+      >
+        {images.length === 0 && loadingImages ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
+            <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8 min-w-72">
+              <div className="h-5 w-5 mx-auto rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
+              <p className="mt-4 text-sm text-white/40 font-medium">Loading timeline</p>
+              <p className="text-xs text-white/20 mt-1">Fetching results</p>
+            </div>
+          </div>
+        ) : images.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
+            <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8">
+              <svg
+                className="h-12 w-12 mx-auto text-white/10 mb-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={0.75}
+                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              <p className="text-sm text-white/30 font-medium">
+                {imageLoadError ? "Could not load timeline" : "No media found"}
+              </p>
+              <p className="text-xs text-white/15 mt-1">
+                {imageLoadError ?? "Add a folder to see your timeline"}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const row = rows[virtualItem.index];
+              if (!row) return null;
+              return (
                <div
+                  key={virtualItem.key}
                  style={{
-                    display: "grid",
-                    gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
-                    gap: GAP,
-                    paddingLeft: GAP,
-                    paddingRight: GAP,
-                    paddingBottom: GAP,
+                    position: "absolute",
+                    top: virtualItem.start,
+                    width: "100%",
+                    height: virtualItem.size,
                  }}
                >
-                  {group.images.map((image) => (
-                    <ImageTile
-                      key={image.id}
-                      image={image}
-                      onClick={() => openImage(image)}
-                      onContextMenu={(event) => {
-                        event.preventDefault();
-                        setContextMenu({ x: event.clientX, y: event.clientY, image });
+                  {row.type === "header" ? (
+                    <div
+                      className="flex items-center gap-3 px-4"
+                      style={{ height: HEADER_HEIGHT }}
+                    >
+                      <span className="text-sm font-semibold text-white/80 shrink-0">
+                        {row.group.label}
+                      </span>
+                      <span className="text-xs text-white/25 shrink-0 tabular-nums">
+                        {row.group.images.length}
+                      </span>
+                      <div className="flex-1 h-px bg-white/[0.06]" />
+                    </div>
+                  ) : (
+                    <div
+                      style={{
+                        display: "grid",
+                        gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
+                        gap: GAP,
+                        paddingLeft: GAP,
+                        paddingRight: GAP,
+                        paddingBottom: GAP,
+                        boxSizing: "border-box",
                      }}
-                    />
-                  ))}
+                    >
+                      {row.images.map((image) => (
+                        <ImageTile
+                          key={image.id}
+                          image={image}
+                          onClick={() => openImage(image)}
+                          onContextMenu={(event) => {
+                            event.preventDefault();
+                            setContextMenu({ x: event.clientX, y: event.clientY, image });
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )}
                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+              );
+            })}
+          </div>
+        )}

-      {images.length > 0 && loadingImages ? (
-        <div className="flex justify-center py-8">
-          <div className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
+        {images.length > 0 && loadingImages ? (
+          <div className="flex justify-center py-8">
+            <div className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
+          </div>
+        ) : null}
+      </div>
+
+      {/* Scrubber — flex sibling so it stays visible while the left panel scrolls */}
+      {showScrubber ? (
+        <div
+          className="overflow-y-auto border-l border-white/[0.04] py-2 flex flex-col items-center gap-0.5"
+          style={{ width: SCRUBBER_WIDTH }}
+        >
+          {scrubberYears.map((yearEntry) => (
+            <ScrubberYearBlock
+              key={yearEntry.year}
+              yearEntry={yearEntry}
+              activeGroupIndex={activeGroupIndex}
+              onScrollTo={scrollToGroup}
+            />
+          ))}
        </div>
      ) : null}

@@ -253,3 +362,51 @@ export function Timeline() {
    </div>
  );
 }
+
+interface ScrubberYearBlockProps {
+  yearEntry: ScrubberYear;
+  activeGroupIndex: number;
+  onScrollTo: (index: number) => void;
+}
+
+function ScrubberYearBlock({ yearEntry, activeGroupIndex, onScrollTo }: ScrubberYearBlockProps) {
+  const isYearActive = yearEntry.months.some((m) => m.groupIndex === activeGroupIndex);
+
+  return (
+    <div className="w-full flex flex-col items-center">
+      <button
+        className={`w-full text-center py-0.5 text-[10px] font-semibold tracking-wide transition-colors ${
+          isYearActive ? "text-white/80" : "text-white/30 hover:text-white/55"
+        }`}
+        onClick={() => onScrollTo(yearEntry.firstGroupIndex)}
+        title={yearEntry.year}
+      >
+        {yearEntry.year}
+      </button>
+
+      <div
+        className="grid gap-[3px] pb-1.5"
+        style={{ gridTemplateColumns: "repeat(3, 10px)" }}
+      >
+        {Array.from({ length: 12 }, (_, i) => {
+          const monthNum = i + 1;
+          const monthEntry = yearEntry.months.find((m) => m.monthNum === monthNum);
+          const isActive = monthEntry !== undefined && monthEntry.groupIndex === activeGroupIndex;
+          if (!monthEntry) {
+            return <span key={monthNum} className="h-[10px] w-[10px]" />;
+          }
+          return (
+            <button
+              key={monthNum}
+              title={`${monthEntry.label} ${yearEntry.year}`}
+              onClick={() => onScrollTo(monthEntry.groupIndex)}
+              className={`h-[10px] w-[10px] rounded-full transition-colors ${
+                isActive ? "bg-white/70" : "bg-white/15 hover:bg-white/40"
+              }`}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -24,7 +24,7 @@ function RestoreIcon() {
  return (
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
      <rect x="2.5" y="0.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1" />
-      <rect x="0.5" y="2.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1" fill="#030712" />
+      <rect x="0.5" y="2.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1" fill="var(--color-gray-950)" />
    </svg>
  );
 }
@@ -88,7 +88,7 @@ export function TitleBar() {
              aria-label={`Update available — click to update to Phokus v${updateVersion}`}
              className="relative flex h-5 w-5 items-center justify-center rounded-md bg-white/8 overflow-hidden text-gray-300 transition-colors hover:bg-white/12"
            >
-              <span className="pointer-events-none absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/60 animate-ping" />
+              <span className="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/60 animate-ping" />
              <PhokusMark className="relative h-4 w-4" dotClassName="fill-amber-400" />
            </button>
            {/* Custom tooltip — fades in ~100ms instead of the native ~500ms delay. */}
@@ -55,8 +55,8 @@ function SortDropdown({
        onClick={() => setOpen((v) => !v)}
        className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors ${
          open
-            ? "border-white/15 bg-white/8 text-white"
-            : "border-white/8 bg-transparent text-gray-400 hover:border-white/15 hover:text-gray-200"
+            ? "border-white/15 bg-white/8 text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white"
+            : "border-white/8 bg-transparent text-gray-400 hover:border-white/15 hover:text-gray-200 light-theme:border-gray-700/40 light-theme:text-gray-600 light-theme:hover:border-gray-700 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
        }`}
      >
        <span>{current?.label ?? "Sort"}</span>
@@ -68,14 +68,14 @@ function SortDropdown({
        </svg>
      </button>
      {open ? (
-        <div className="absolute right-0 top-full z-30 mt-1.5 min-w-44 rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur">
+        <div className="absolute right-0 top-full z-30 mt-1.5 min-w-44 rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur light-theme:border-gray-700/50">
          {options.map((option) => (
            <button
              key={option.value}
              className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors ${
                option.value === value
-                  ? "bg-white/6 text-white"
-                  : "text-gray-400 hover:bg-white/5 hover:text-white"
+                  ? "bg-white/6 text-white light-theme:bg-gray-900 light-theme:text-white"
+                  : "text-gray-400 hover:bg-white/5 hover:text-white light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
              }`}
              onClick={() => { onChange(option.value); setOpen(false); }}
            >
@@ -106,14 +106,14 @@ function FilterPill({
 }) {
  const activeClass =
    variant === "amber"
-      ? "bg-amber-500/15 text-amber-300 border border-amber-500/30"
-      : "bg-white/10 text-white";
+      ? "bg-amber-500/15 text-amber-300 border border-amber-500/30 light-theme:bg-amber-100 light-theme:text-amber-700 light-theme:border-amber-500/50"
+      : "bg-white/10 text-white light-theme:bg-gray-900 light-theme:text-white";
  return (
    <button
      className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
        active
          ? activeClass
-          : "text-gray-500 hover:text-gray-200 hover:bg-white/5"
+          : "text-gray-500 hover:text-gray-200 hover:bg-white/5 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
      }`}
      onClick={onClick}
    >
@@ -158,6 +158,8 @@ export function Toolbar() {
  const setMinimumRating = useGalleryStore((state) => state.setMinimumRating);
  const failedEmbeddingsOnly = useGalleryStore((state) => state.failedEmbeddingsOnly);
  const setFailedEmbeddingsOnly = useGalleryStore((state) => state.setFailedEmbeddingsOnly);
+  const failedTaggingOnly = useGalleryStore((state) => state.failedTaggingOnly);
+  const setFailedTaggingOnly = useGalleryStore((state) => state.setFailedTaggingOnly);
  const similarScope = useGalleryStore((state) => state.similarScope);
  const setSimilarScope = useGalleryStore((state) => state.setSimilarScope);
  const mediaJobProgress = useGalleryStore((state) => state.mediaJobProgress);
@@ -166,6 +168,7 @@ export function Toolbar() {
  const activeView = useGalleryStore((state) => state.activeView);

  const hasAnyFailedEmbeddings = Object.values(mediaJobProgress).some((p) => p.embedding_failed > 0);
+  const hasAnyFailedTagging = Object.values(mediaJobProgress).some((p) => p.tagging_failed > 0);

  const [searchCommand, setSearchCommand] = useState<SearchCommand | null>(null);
  const [searchQuery, setSearchQuery] = useState(search);
@@ -419,7 +422,7 @@ export function Toolbar() {
        <div className="h-4 w-px bg-white/10 shrink-0" />

        {/* Zoom */}
-        <div className="flex items-center rounded-lg border border-white/8 overflow-hidden">
+        <div className="flex items-center rounded-lg border border-white/8 overflow-hidden light-theme:border-gray-700/40">
          {(["compact", "comfortable", "detail"] as const).map((preset, i) => (
            <button
              key={preset}
@@ -427,8 +430,8 @@ export function Toolbar() {
                i > 0 ? "border-l border-white/8" : ""
              } ${
                zoomPreset === preset
-                  ? "bg-white/10 text-white"
-                  : "text-gray-500 hover:text-gray-200 hover:bg-white/5"
+                  ? "bg-white/10 text-white light-theme:bg-gray-900 light-theme:text-white"
+                  : "text-gray-500 hover:text-gray-200 hover:bg-white/5 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
              }`}
              title={`${tileSize}px tiles`}
              onClick={() => setZoomPreset(preset)}
@@ -441,12 +444,12 @@ export function Toolbar() {

      {/* Filter row */}
      <div className="flex items-center gap-1 px-4 pb-1.5">
-        <FilterPill label="All" active={mediaFilter === "all" && !favoritesOnly && !failedEmbeddingsOnly && minimumRating === 0} onClick={() => { setMediaFilter("all"); setFavoritesOnly(false); setMinimumRating(0); setFailedEmbeddingsOnly(false); }} />
-        <FilterPill label="Images" active={mediaFilter === "image" && !favoritesOnly && !failedEmbeddingsOnly} onClick={() => { setMediaFilter("image"); setFavoritesOnly(false); setFailedEmbeddingsOnly(false); }} />
-        <FilterPill label="Videos" active={mediaFilter === "video" && !favoritesOnly && !failedEmbeddingsOnly} onClick={() => { setMediaFilter("video"); setFavoritesOnly(false); setFailedEmbeddingsOnly(false); }} />
-        <FilterPill label="Favorites" active={favoritesOnly} onClick={() => { setFavoritesOnly(!favoritesOnly); setFailedEmbeddingsOnly(false); }} />
-        <FilterPill label="Rated" active={minimumRating === 1} onClick={() => { setMinimumRating(minimumRating === 1 ? 0 : 1); setFailedEmbeddingsOnly(false); }} />
-        <FilterPill label="4★+" active={minimumRating === 4} onClick={() => { setMinimumRating(minimumRating === 4 ? 0 : 4); setFailedEmbeddingsOnly(false); }} />
+        <FilterPill label="All" active={mediaFilter === "all" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly && minimumRating === 0} onClick={() => { setMediaFilter("all"); setFavoritesOnly(false); setMinimumRating(0); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        <FilterPill label="Images" active={mediaFilter === "image" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly} onClick={() => { setMediaFilter("image"); setFavoritesOnly(false); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        <FilterPill label="Videos" active={mediaFilter === "video" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly} onClick={() => { setMediaFilter("video"); setFavoritesOnly(false); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        <FilterPill label="Favorites" active={favoritesOnly} onClick={() => { setFavoritesOnly(!favoritesOnly); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        <FilterPill label="Rated" active={minimumRating === 1} onClick={() => { setMinimumRating(minimumRating === 1 ? 0 : 1); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        <FilterPill label="4★+" active={minimumRating === 4} onClick={() => { setMinimumRating(minimumRating === 4 ? 0 : 4); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
        <FilterPill label="Similar: Folder" active={similarScope === "current_folder"} onClick={() => setSimilarScope("current_folder")} />
        <FilterPill label="Similar: All" active={similarScope === "all_media"} onClick={() => setSimilarScope("all_media")} />
        {hasAnyFailedEmbeddings ? (
@@ -457,6 +460,14 @@ export function Toolbar() {
            onClick={() => setFailedEmbeddingsOnly(!failedEmbeddingsOnly)}
          />
        ) : null}
+        {hasAnyFailedTagging ? (
+          <FilterPill
+            label="Failed Tags"
+            active={failedTaggingOnly}
+            variant="amber"
+            onClick={() => setFailedTaggingOnly(!failedTaggingOnly)}
+          />
+        ) : null}
        {isSimilarResults ? <span className="ml-2 text-[11px] text-gray-500">Current similar scope: {similarScope === "current_folder" ? "current folder" : "all media"}</span> : null}
      </div>
    </div>
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
+import { useGalleryStore } from "../store";

 const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
 const CONTROLS_HIDE_DELAY_MS = 2500;
@@ -57,7 +58,9 @@ export function VideoPlayer({ src }: { src: string }) {
  const [duration, setDuration] = useState(0);
  const [buffered, setBuffered] = useState<BufferedRange[]>([]);
  const [volume, setVolume] = useState(persistedVolume);
-  const [muted, setMuted] = useState(persistedMuted);
+  const [muted, setMuted] = useState(
+    () => useGalleryStore.getState().lightboxAutoMute || persistedMuted,
+  );
  const [playbackRate, setPlaybackRate] = useState(1);
  const [loop, setLoop] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
@@ -89,11 +92,16 @@ export function VideoPlayer({ src }: { src: string }) {
  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
+    // Read playback prefs fresh for each opened video — not reactive, so a
+    // settings change applies to the next video rather than the current one.
+    const { lightboxAutoplay, lightboxAutoMute } = useGalleryStore.getState();
+    const startMuted = lightboxAutoMute || persistedMuted;
    video.volume = persistedVolume;
-    video.muted = persistedMuted;
-    // Autoplay; if the webview blocks it the catch leaves us paused with
-    // controls visible, which is a fine fallback.
-    video.play().catch(() => {});
+    video.muted = startMuted;
+    setMuted(startMuted);
+    // Autoplay when enabled; if the webview blocks it the catch leaves us paused
+    // with controls visible, which is a fine fallback.
+    if (lightboxAutoplay) video.play().catch(() => {});
  }, [src]);

  const readBuffered = useCallback(() => {
@@ -282,7 +290,7 @@ export function VideoPlayer({ src }: { src: string }) {
  return (
    <div
      ref={containerRef}
-      className={`relative flex h-full w-full items-center justify-center bg-black ${controlsVisible ? "" : "cursor-none"}`}
+      className={`media-dark-surface relative flex h-full w-full items-center justify-center bg-black ${controlsVisible ? "" : "cursor-none"}`}
      onPointerMove={showControls}
      onClick={(event) => event.stopPropagation()}
    >
@@ -0,0 +1,197 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { useGalleryStore } from "../store";
+import { getChangelogForVersion, type ChangelogSection } from "../changelog";
+
+const CHANGELOG_URL = "https://github.com/JezzWTF/phokus/blob/main/CHANGELOG.md";
+
+// Per-section accent. These all use the standard colour scale, which the
+// subtle-light theme re-maps to readable dark shades via CSS variables — so no
+// `light-theme:` overrides are needed (or wanted) here. See the theme note in
+// index.css: `bg-white`/`text-white` deliberately become *dark* in light mode,
+// so neutral surfaces must use the gray scale and trust the remap.
+const SECTION_STYLES: Record<string, { label: string; dot: string }> = {
+  Added: { label: "text-emerald-300", dot: "bg-emerald-400/80" },
+  Changed: { label: "text-sky-300", dot: "bg-sky-300/80" },
+  Fixed: { label: "text-amber-300", dot: "bg-amber-400/80" },
+  Removed: { label: "text-rose-300", dot: "bg-rose-400/80" },
+  Security: { label: "text-violet-300", dot: "bg-violet-400/80" },
+};
+
+const NEUTRAL_STYLE = { label: "text-gray-300", dot: "bg-gray-400/70" };
+
+// Render the small amount of inline markdown the changelog uses: **bold** and
+// `code`. Anything else passes through as plain text.
+function renderInline(text: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const regex = /\*\*(.+?)\*\*|`([^`]+)`/g;
+  let lastIndex = 0;
+  let key = 0;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+    if (match[1] !== undefined) {
+      nodes.push(
+        <strong key={key++} className="font-semibold text-white">
+          {match[1]}
+        </strong>,
+      );
+    } else if (match[2] !== undefined) {
+      nodes.push(
+        <code key={key++} className="rounded bg-white/10 px-1 py-0.5 text-[12px] text-gray-200">
+          {match[2]}
+        </code>,
+      );
+    }
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes;
+}
+
+function Section({ section }: { section: ChangelogSection }) {
+  const style = SECTION_STYLES[section.title] ?? NEUTRAL_STYLE;
+  const [open, setOpen] = useState(true);
+
+  return (
+    <section>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center gap-2 text-left"
+        aria-expanded={open}
+      >
+        <svg
+          className={`h-3 w-3 shrink-0 text-gray-600 transition-transform ${open ? "rotate-90" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+        </svg>
+        <span className={`text-[11px] font-semibold uppercase tracking-[0.1em] ${style.label}`}>{section.title}</span>
+        <span className="text-[11px] font-medium text-gray-600">{section.items.length}</span>
+      </button>
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.18 }}
+            className="overflow-hidden"
+          >
+            <ul className="mt-2.5 space-y-2.5 pl-5">
+              {section.items.map((item, index) => (
+                <li key={index} className="flex gap-3">
+                  <span className={`mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full ${style.dot}`} />
+                  <p className="text-[13px] leading-relaxed text-gray-400">
+                    {item.lead ? (
+                      <>
+                        <span className="font-semibold text-gray-100">{item.lead}</span>
+                        {item.body ? <span> — {renderInline(item.body)}</span> : null}
+                      </>
+                    ) : (
+                      renderInline(item.body)
+                    )}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </section>
+  );
+}
+
+export function WhatsNewModal() {
+  const whatsNewOpen = useGalleryStore((s) => s.whatsNewOpen);
+  const closeWhatsNew = useGalleryStore((s) => s.closeWhatsNew);
+  const appVersion = useGalleryStore((s) => s.appVersion);
+
+  const entry = getChangelogForVersion(appVersion);
+
+  useEffect(() => {
+    if (!whatsNewOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeWhatsNew();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [whatsNewOpen, closeWhatsNew]);
+
+  return (
+    <AnimatePresence>
+      {whatsNewOpen ? (
+        <motion.div
+          className="fixed inset-0 z-[90] flex items-center justify-center bg-black/65 px-6 backdrop-blur-sm"
+          onClick={closeWhatsNew}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15 }}
+        >
+          <motion.div
+            className="relative flex max-h-[min(82vh,760px)] w-[min(88vw,560px)] flex-col overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60"
+            onClick={(event) => event.stopPropagation()}
+            initial={{ opacity: 0, scale: 0.97, y: 8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.98, y: 6 }}
+            transition={{ duration: 0.16 }}
+          >
+            <div className="flex items-start justify-between gap-4 border-b border-white/[0.07] px-6 py-5">
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-emerald-300">What's new</p>
+                <h3 className="mt-1 text-lg font-semibold text-white">
+                  Phokus v{entry?.version ?? appVersion ?? "—"}
+                </h3>
+                {entry?.date ? <p className="mt-0.5 text-xs text-gray-600">Released {entry.date}</p> : null}
+              </div>
+              <button
+                className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
+                onClick={closeWhatsNew}
+                title="Close"
+              >
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
+              {entry && entry.sections.length > 0 ? (
+                entry.sections.map((section) => <Section key={section.title} section={section} />)
+              ) : (
+                <p className="text-sm text-gray-500">
+                  Release notes for this version aren't available in-app. See the full changelog on GitHub.
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between gap-4 border-t border-white/[0.07] px-6 py-4">
+              <button
+                type="button"
+                onClick={() => void openUrl(CHANGELOG_URL)}
+                className="text-xs text-gray-500 transition-colors hover:text-gray-300"
+              >
+                Full changelog ↗
+              </button>
+              <button
+                className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3.5 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
+                onClick={closeWhatsNew}
+              >
+                Got it
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
@@ -0,0 +1,44 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useGalleryStore } from "../store";
+
+// Shown once on the first launch after an update, inviting the user to read the
+// changelog. Distinct from UpdateToast (which drives the download/install flow).
+export function WhatsNewToast() {
+  const whatsNewToast = useGalleryStore((s) => s.whatsNewToast);
+  const whatsNewOpen = useGalleryStore((s) => s.whatsNewOpen);
+  const openWhatsNew = useGalleryStore((s) => s.openWhatsNew);
+  const dismissWhatsNewToast = useGalleryStore((s) => s.dismissWhatsNewToast);
+
+  const visible = whatsNewToast !== null && !whatsNewOpen;
+
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 12 }}
+          transition={{ duration: 0.18 }}
+          className="fixed bottom-4 right-4 z-50 w-80 rounded-lg border border-emerald-400/20 bg-gray-900 p-4 shadow-xl"
+        >
+          <p className="text-sm font-medium text-white">What's new in Phokus v{whatsNewToast}</p>
+          <p className="mt-1 text-xs text-gray-500">See what's changed in this version.</p>
+          <div className="mt-3 flex items-center gap-2">
+            <button
+              className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
+              onClick={openWhatsNew}
+            >
+              What's new
+            </button>
+            <button
+              className="rounded-md border border-transparent px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-gray-200"
+              onClick={dismissWhatsNewToast}
+            >
+              Dismiss
+            </button>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
@@ -43,10 +43,10 @@ export function OnboardingOverlay() {
  const isLast = onboardingStep >= STEPS.length - 1;

  return (
-    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/65 backdrop-blur-sm">
-      <div className="flex max-h-[min(85vh,760px)] w-[min(90vw,720px)] flex-col rounded-lg border border-white/10 bg-[#07080f] shadow-2xl shadow-black/60">
+    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/65 backdrop-blur-sm light-theme:bg-black/40">
+      <div className="flex max-h-[min(85vh,760px)] w-[min(90vw,720px)] flex-col rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60 light-theme:border-gray-300/70">
        {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.07] px-7 py-4">
+        <div className="flex items-center justify-between border-b border-white/[0.07] px-7 py-4 light-theme:border-gray-300/70">
          <div>
            <p className="text-[11px] uppercase tracking-[0.14em] text-gray-600">
              Step {onboardingStep + 1} of {STEPS.length}
@@ -59,7 +59,11 @@ export function OnboardingOverlay() {
                key={s.id}
                aria-label={s.title}
                className={`h-1.5 rounded-full transition-all ${
-                  i === onboardingStep ? "w-5 bg-white/70" : i < onboardingStep ? "w-1.5 bg-white/35" : "w-1.5 bg-white/15"
+                  i === onboardingStep
+                    ? "w-5 bg-white/70 light-theme:bg-gray-700"
+                    : i < onboardingStep
+                      ? "w-1.5 bg-white/35 light-theme:bg-gray-400"
+                      : "w-1.5 bg-white/15 light-theme:bg-gray-300"
                }`}
                onClick={() => setOnboardingStep(i)}
              />
@@ -83,16 +87,16 @@ export function OnboardingOverlay() {
        </div>

        {/* Footer */}
-        <div className="flex items-center justify-between border-t border-white/[0.07] px-7 py-4">
+        <div className="flex items-center justify-between border-t border-white/[0.07] px-7 py-4 light-theme:border-gray-300/70">
          <button
-            className="rounded-md border border-transparent px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-gray-200"
+            className="rounded-md border border-transparent px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-gray-200 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
            onClick={completeOnboarding}
          >
            Skip tour
          </button>
          <div className="flex items-center gap-2">
            <button
-              className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+              className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
              onClick={() => setOnboardingStep(onboardingStep - 1)}
              disabled={isFirst}
            >
@@ -1,26 +1,12 @@
-import { useState } from "react";
-import { open } from "@tauri-apps/plugin-dialog";
 import { useGalleryStore } from "../../store";
 import { FakeTile } from "./fakes";

 export function StepAddLibrary() {
  const folders = useGalleryStore((s) => s.folders);
-  const addFolder = useGalleryStore((s) => s.addFolder);
-  const [adding, setAdding] = useState(false);
-  const [addError, setAddError] = useState<string | null>(null);
+  const setFolderPickerOpen = useGalleryStore((s) => s.setFolderPickerOpen);

-  const handlePick = async () => {
-    setAddError(null);
-    const selected = await open({ directory: true, multiple: false, title: "Select Media Folder" });
-    if (typeof selected !== "string") return;
-    setAdding(true);
-    try {
-      await addFolder(selected);
-    } catch (error) {
-      setAddError(error instanceof Error ? error.message : String(error));
-    } finally {
-      setAdding(false);
-    }
+  const handlePick = () => {
+    setFolderPickerOpen(true);
  };

  return (
@@ -30,7 +16,7 @@ export function StepAddLibrary() {
        added, renamed, or removed. Nothing is moved or copied.
      </p>

-      <div className="mt-5 flex items-center justify-between gap-6 border-y border-white/[0.05] py-4">
+      <div className="mt-5 flex items-center justify-between gap-6 border-y border-white/[0.05] py-4 light-theme:border-gray-300/70">
        <div className="min-w-0">
          {folders.length > 0 ? (
            <>
@@ -49,14 +35,12 @@ export function StepAddLibrary() {
              </p>
            </>
          )}
-          {addError ? <p className="mt-1.5 text-xs text-amber-300/90">{addError}</p> : null}
        </div>
        <button
          className="shrink-0 rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 disabled:cursor-not-allowed disabled:opacity-45"
-          onClick={() => void handlePick()}
-          disabled={adding}
+          onClick={handlePick}
        >
-          {adding ? "Adding..." : folders.length > 0 ? "Add another folder" : "Choose a folder"}
+          {folders.length > 0 ? "Add another folder" : "Choose a folder"}
        </button>
      </div>

@@ -64,7 +48,7 @@ export function StepAddLibrary() {
        As indexing runs, the gallery fills in roughly like this — tiles appear immediately and sharpen
        as thumbnails are generated:
      </p>
-      <div className="mt-3 grid grid-cols-6 gap-1.5">
+      <div className="media-dark-surface mt-3 grid grid-cols-6 gap-1.5">
        <FakeTile index={0} />
        <FakeTile index={1} favorite />
        <FakeTile index={2} duration="0:42" />
@@ -37,18 +37,18 @@ export function StepAiFeatures() {
      </p>

      <h4 className="mt-6 text-[12px] font-semibold uppercase tracking-[0.08em] text-gray-400">AI tagging — optional</h4>
-      <div className="mt-1 divide-y divide-white/[0.05]">
+      <div className="mt-1 divide-y divide-white/[0.05] light-theme:divide-gray-300/70">
        <div className="py-4">
          <div className="flex items-start justify-between gap-6">
            <div className="min-w-0">
              <p className="text-sm text-white">Automatic tags for every image</p>
              <p className="mt-1 text-xs leading-relaxed text-gray-500">
                The WD tagger model (~1.3 GB download) labels images so you can search with{" "}
-                <code className="rounded bg-white/[0.07] px-1 py-0.5 text-[11px] text-gray-200">/t</code> — tags look like:
+                <code className="rounded bg-gray-900 px-1 py-0.5 text-[11px] text-gray-200 light-theme:bg-gray-800 light-theme:text-gray-100">/t</code> — tags look like:
              </p>
              <span className="mt-2 flex flex-wrap gap-1.5">
                {FAKE_TAGS.map((tag) => (
-                  <span key={tag} className="rounded-md border border-white/10 bg-white/[0.04] px-2 py-0.5 text-[11px] text-gray-400">
+                  <span key={tag} className="rounded-md border border-white/10 bg-gray-900/50 px-2 py-0.5 text-[11px] text-gray-400 light-theme:border-gray-300/70 light-theme:bg-gray-900 light-theme:text-gray-600">
                    {tag}
                  </span>
                ))}
@@ -56,12 +56,12 @@ export function StepAiFeatures() {
            </div>
            <div className="shrink-0">
              {taggerReady ? (
-                <span className="inline-flex rounded-md border border-emerald-400/25 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-300">
+                <span className="inline-flex rounded-md border border-emerald-400/25 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-300 light-theme:border-emerald-600/40 light-theme:bg-emerald-100 light-theme:text-emerald-700">
                  Installed
                </span>
              ) : (
                <button
-                  className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+                  className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                  onClick={() => void prepareTaggerModel()}
                  disabled={taggerModelPreparing}
                >
@@ -84,7 +84,7 @@ export function StepAiFeatures() {
            </div>
          ) : null}
          {!taggerModelPreparing && taggerModelError ? (
-            <p className="mt-2 text-xs leading-relaxed text-amber-300/90">
+            <p className="mt-2 text-xs leading-relaxed text-amber-300/90 light-theme:text-amber-700">
              Download failed: {taggerModelError}
            </p>
          ) : null}
@@ -92,11 +92,11 @@ export function StepAiFeatures() {
      </div>

      <h4 className="mt-6 text-[12px] font-semibold uppercase tracking-[0.08em] text-gray-400">Semantic search & similarity — built in</h4>
-      <div className="mt-1 divide-y divide-white/[0.05]">
+      <div className="mt-1 divide-y divide-white/[0.05] light-theme:divide-gray-300/70">
        <div className="py-4">
          <p className="text-sm text-white">Search by meaning, find look-alikes</p>
          <p className="mt-1 text-xs leading-relaxed text-gray-500">
-            Powers <code className="rounded bg-white/[0.07] px-1 py-0.5 text-[11px] text-gray-200">/s</code> search,
+            Powers <code className="rounded bg-gray-900 px-1 py-0.5 text-[11px] text-gray-200 light-theme:bg-gray-800 light-theme:text-gray-100">/s</code> search,
            "find similar", and the Explore view, so it's part of the standard pipeline: the CLIP model
            (~580 MB) downloads automatically the first time embeddings run. Nothing to do — you'll see it
            in the background-tasks bar.
@@ -37,14 +37,14 @@ export function StepGalleryPreview() {
        carry your favorites, star ratings, and video durations; hover for filename and quick actions.
      </p>

-      <div className="mt-5 grid grid-cols-4 gap-1.5">
+      <div className="media-dark-surface mt-5 grid grid-cols-4 gap-1.5">
        {TILE_PROPS.map((props, i) => (
          <FakeTile key={i} index={i} loaded={i < revealed} {...props} />
        ))}
      </div>

      <div className="mt-6 flex items-start justify-between gap-4">
-        <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
+        <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500 light-theme:divide-gray-300/70">
          <p className="pb-2.5">
            <span className="text-gray-300">Click any tile</span> to open the lightbox — keyboard navigation,
            zoom, inline tag editing, ratings, and a full video player.
@@ -49,7 +49,7 @@ export function StepPipeline() {
      </p>

      {/* Fake BackgroundTasks slim bar */}
-      <div className="mt-3 rounded-lg border border-white/[0.07] bg-white/[0.02] px-4 py-3">
+      <div className="mt-3 rounded-lg border border-white/[0.07] bg-gray-900/30 px-4 py-3 light-theme:border-gray-300/70 light-theme:bg-gray-900">
        <div className="flex items-center gap-3">
          <span className="relative flex h-1.5 w-1.5 shrink-0">
            {!finished ? (
@@ -57,7 +57,7 @@ export function StepPipeline() {
            ) : null}
            <span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${finished ? "bg-emerald-400" : "bg-blue-400"}`} />
          </span>
-          <span className="text-[13px] font-medium text-white/60">Holiday Photos</span>
+          <span className="text-[13px] font-medium text-white/60 light-theme:text-gray-500">Holiday Photos</span>
          <div className="flex items-center gap-1.5">
            {STAGES.map((stage, i) => (
              <FakeStageTag
@@ -72,7 +72,7 @@ export function StepPipeline() {
      </div>

      <div className="mt-6 flex items-start justify-between gap-4">
-        <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
+        <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500 light-theme:divide-gray-300/70">
          <p className="pb-2.5">
            <span className="text-gray-300">It's all interruptible.</span> Close the app whenever you like —
            the queue picks up where it left off next launch.
@@ -64,12 +64,12 @@ export function StepSearchDemo() {
  return (
    <div>
      <p className="text-sm leading-relaxed text-gray-300">
-        One search bar, three modes — picked by prefix. No prefix searches filenames, <code className="rounded bg-white/[0.07] px-1 py-0.5 text-[11px] text-gray-200">/s</code> searches
-        by meaning, <code className="rounded bg-white/[0.07] px-1 py-0.5 text-[11px] text-gray-200">/t</code> searches tags.
+        One search bar, three modes — picked by prefix. No prefix searches filenames, <code className="rounded bg-gray-900 px-1 py-0.5 text-[11px] text-gray-200 light-theme:bg-gray-800 light-theme:text-gray-100">/s</code> searches
+        by meaning, <code className="rounded bg-gray-900 px-1 py-0.5 text-[11px] text-gray-200 light-theme:bg-gray-800 light-theme:text-gray-100">/t</code> searches tags.
      </p>

      {/* Mock search bar */}
-      <div className="mt-5 flex items-center gap-2.5 rounded-lg border border-white/10 bg-white/[0.04] px-3.5 py-2.5">
+      <div className="mt-5 flex items-center gap-2.5 rounded-lg border border-white/10 bg-gray-900/50 px-3.5 py-2.5 light-theme:border-gray-300/70 light-theme:bg-gray-900">
        <svg className="h-4 w-4 shrink-0 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
@@ -77,7 +77,7 @@ export function StepSearchDemo() {
          {demo.query.slice(0, typed)}
          {!finished ? <span className="animate-pulse text-gray-500">|</span> : null}
        </span>
-        <span className="ml-auto shrink-0 rounded-md border border-sky-400/25 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-300">
+        <span className="ml-auto shrink-0 rounded-md border border-sky-400/25 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-300 light-theme:border-sky-600/40 light-theme:bg-sky-100 light-theme:text-sky-700">
          {demo.mode}
        </span>
      </div>
@@ -90,7 +90,7 @@ export function StepSearchDemo() {
          demo's visible state. */}
      <div
        key={demoIndex}
-        className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}
+        className={`media-dark-surface mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}
      >
        {demo.results.map((src, i) => (
          <div key={i} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
@@ -24,9 +24,9 @@ export function StepUpdates() {
        </p>

        {/* Mini app-window mockup: the lit mark shown in a real title bar. */}
-        <div className="mt-3 overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-lg">
-          <div className="flex items-center gap-2 border-b border-white/[0.06] px-3 py-2">
-            <div className="relative flex h-6 w-6 items-center justify-center rounded-md bg-white/[0.08] text-gray-300">
+        <div className="mt-3 overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-lg light-theme:border-gray-300/70">
+          <div className="flex items-center gap-2 border-b border-white/[0.06] px-3 py-2 light-theme:border-gray-300/70">
+            <div className="relative flex h-6 w-6 items-center justify-center rounded-md bg-gray-900 text-gray-300 light-theme:bg-gray-800">
              <span className="pointer-events-none absolute left-1/2 top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/30 blur-[3px]" />
              <span className="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/55 animate-ping" />
              <PhokusMark className="relative h-[18px] w-[18px]" dotClassName="fill-amber-400" />
@@ -48,16 +48,16 @@ export function StepUpdates() {

          {/* Ghosted window body, just enough to read as the app. */}
          <div className="flex h-[72px] bg-gray-900/30">
-            <div className="w-14 shrink-0 border-r border-white/[0.05] p-2.5">
-              <div className="h-1.5 w-full rounded bg-white/[0.07]" />
-              <div className="mt-2 h-1.5 w-3/4 rounded bg-white/[0.04]" />
-              <div className="mt-2 h-1.5 w-3/4 rounded bg-white/[0.04]" />
+            <div className="w-14 shrink-0 border-r border-white/[0.05] p-2.5 light-theme:border-gray-300/70">
+              <div className="h-1.5 w-full rounded bg-gray-800" />
+              <div className="mt-2 h-1.5 w-3/4 rounded bg-gray-900" />
+              <div className="mt-2 h-1.5 w-3/4 rounded bg-gray-900" />
            </div>
            <div className="flex-1 p-2.5">
-              <div className="h-2 w-20 rounded bg-white/[0.06]" />
+              <div className="h-2 w-20 rounded bg-gray-800" />
              <div className="mt-2.5 grid grid-cols-5 gap-1.5">
                {Array.from({ length: 5 }).map((_, i) => (
-                  <div key={i} className="h-7 rounded bg-white/[0.04]" />
+                  <div key={i} className="h-7 rounded bg-gray-900" />
                ))}
              </div>
            </div>
@@ -22,7 +22,7 @@ function ExplorePreview() {
    { size: 16, x: 70, y: 44, i: 6 },
  ];
  return (
-    <div className="relative h-[72px] w-32 overflow-hidden rounded-lg border border-white/[0.07] bg-white/[0.02]">
+    <div className="media-dark-surface relative h-[72px] w-32 overflow-hidden rounded-lg border border-white/[0.07] bg-white/[0.02]">
      {blobs.map((blob, idx) => (
        <div
          key={idx}
@@ -36,7 +36,7 @@ function ExplorePreview() {

 function TimelinePreview() {
  return (
-    <div className="flex h-[72px] w-32 flex-col justify-center gap-2 rounded-lg border border-white/[0.07] bg-white/[0.02] px-3">
+    <div className="media-dark-surface flex h-[72px] w-32 flex-col justify-center gap-2 rounded-lg border border-white/[0.07] bg-white/[0.02] px-3">
      {[2024, 2023].map((year, row) => (
        <div key={year} className="flex items-center gap-1.5">
          <span className="w-7 text-[9px] tabular-nums text-gray-600">{year}</span>
@@ -51,7 +51,7 @@ function TimelinePreview() {

 function DuplicatesPreview() {
  return (
-    <div className="flex h-[72px] w-32 items-center justify-center gap-1.5 rounded-lg border border-white/[0.07] bg-white/[0.02]">
+    <div className="media-dark-surface flex h-[72px] w-32 items-center justify-center gap-1.5 rounded-lg border border-white/[0.07] bg-white/[0.02]">
      <div className="w-10">
        <FakeTile index={3} className="rounded-md" />
      </div>
@@ -69,7 +69,7 @@ export function StepViews() {
      <p className="text-sm leading-relaxed text-gray-300">
        Beyond the main grid, the sidebar switches between three more ways to look at your library:
      </p>
-      <div className="mt-3 divide-y divide-white/[0.05]">
+      <div className="mt-3 divide-y divide-white/[0.05] light-theme:divide-gray-300/70">
        <ViewRow
          title="Explore"
          description="A visual cluster map and tag cloud — browse by theme instead of folder, and jump into any cluster."
@@ -1,6 +1,52 @@
-import { useGalleryStore } from "../../store";
+import { AppTheme, useGalleryStore } from "../../store";
 import { FakeProgressBar, formatBytes } from "./fakes";

+const THEME_OPTIONS: {
+  value: AppTheme;
+  name: string;
+  colors: {
+    background: string;
+    surface: string;
+    text: string;
+    muted: string;
+    accent: string;
+  };
+}[] = [
+  {
+    value: "phokus",
+    name: "Phokus",
+    colors: {
+      background: "#030712",
+      surface: "#111827",
+      text: "#f9fafb",
+      muted: "#6b7280",
+      accent: "#10b981",
+    },
+  },
+  {
+    value: "conventional-dark",
+    name: "Conventional Dark",
+    colors: {
+      background: "#1f1f1f",
+      surface: "#303030",
+      text: "#a3a3a3",
+      muted: "#666666",
+      accent: "#10b981",
+    },
+  },
+  {
+    value: "subtle-light",
+    name: "Subtle Light",
+    colors: {
+      background: "#e9e7e2",
+      surface: "#dedbd4",
+      text: "#18202c",
+      muted: "#817b72",
+      accent: "#059669",
+    },
+  },
+];
+
 export function FfmpegStatusRow() {
  const ffmpegStatus = useGalleryStore((s) => s.ffmpegStatus);
  const ffmpegProgress = useGalleryStore((s) => s.ffmpegProgress);
@@ -10,7 +56,7 @@ export function FfmpegStatusRow() {
  if (ffmpegStatus === "installed") {
    return (
      <div className="flex items-center gap-2.5 py-3">
-        <svg className="h-4 w-4 shrink-0 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+        <svg className="h-4 w-4 shrink-0 text-emerald-400 light-theme:text-emerald-700" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
@@ -27,14 +73,14 @@ export function FfmpegStatusRow() {
        <div className="flex items-start justify-between gap-6">
          <div className="min-w-0">
            <p className="text-sm text-white">Media engine download failed</p>
-            <p className="mt-1 text-xs leading-relaxed text-amber-300/90">{ffmpegError}</p>
+            <p className="mt-1 text-xs leading-relaxed text-amber-300/90 light-theme:text-amber-700">{ffmpegError}</p>
            <p className="mt-1.5 text-xs leading-relaxed text-gray-500">
              You can keep going — photos work without it. Video thumbnails and metadata will start
              automatically once the download succeeds.
            </p>
          </div>
          <button
-            className="shrink-0 rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
+            className="shrink-0 rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
            onClick={() => void retryFfmpegDownload()}
          >
            Retry download
@@ -71,6 +117,9 @@ export function FfmpegStatusRow() {
 }

 export function StepWelcome() {
+  const theme = useGalleryStore((s) => s.theme);
+  const setTheme = useGalleryStore((s) => s.setTheme);
+
  return (
    <div>
      <p className="text-sm leading-relaxed text-gray-300">
@@ -83,8 +132,40 @@ export function StepWelcome() {
        from Settings.
      </p>

+      <h4 className="mt-7 text-[12px] font-semibold uppercase tracking-[0.08em] text-gray-400">Choose your look</h4>
+      <div className="mt-3 grid grid-cols-3 gap-2">
+        {THEME_OPTIONS.map((option) => {
+          const selected = option.value === theme;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              className={`rounded-md border p-2 text-left transition-colors ${
+                selected
+                  ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-400/40"
+                  : "border-white/10 bg-white/[0.055] text-gray-300 hover:bg-white/10 hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+              }`}
+              onClick={() => setTheme(option.value)}
+            >
+              <span
+                className="block overflow-hidden rounded border border-black/20 p-1.5"
+                style={{ backgroundColor: option.colors.background }}
+              >
+                <span className="mb-1 block h-2 w-8 rounded-sm" style={{ backgroundColor: option.colors.accent }} />
+                <span className="block rounded-sm p-1.5" style={{ backgroundColor: option.colors.surface }}>
+                  <span className="block h-1.5 w-9 rounded-sm" style={{ backgroundColor: option.colors.text }} />
+                  <span className="mt-1 block h-1.5 w-14 rounded-sm" style={{ backgroundColor: option.colors.muted }} />
+                  <span className="mt-1 block h-1.5 w-10 rounded-sm" style={{ backgroundColor: option.colors.muted }} />
+                </span>
+              </span>
+              <span className="mt-2 block text-[11px] font-medium">{option.name}</span>
+            </button>
+          );
+        })}
+      </div>
+
      <h4 className="mt-7 text-[12px] font-semibold uppercase tracking-[0.08em] text-gray-400">First-time setup</h4>
-      <div className="mt-1 divide-y divide-white/[0.05]">
+      <div className="mt-1 divide-y divide-white/[0.05] light-theme:divide-gray-300/70">
        <FfmpegStatusRow />
      </div>
    </div>
@@ -82,7 +82,7 @@ export function FakeTile({
  className?: string;
 }) {
  return (
-    <div className={`group relative aspect-square overflow-hidden rounded-xl bg-white/[0.04] ${className}`}>
+    <div className={`media-dark-surface group relative aspect-square overflow-hidden rounded-xl bg-white/[0.04] ${className}`}>
      {loaded ? (
        <img src={fakeImage(index)} alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover" />
      ) : (
@@ -116,16 +116,16 @@ export function FakeTile({
 export function FakeStageTag({ label, state }: { label: string; state: "active" | "done" | "waiting" }) {
  const className =
    state === "active"
-      ? "bg-white/5 text-gray-300"
+      ? "bg-gray-900 text-gray-300 light-theme:bg-gray-900 light-theme:text-gray-300"
      : state === "done"
-        ? "bg-emerald-500/10 text-emerald-400"
-        : "bg-white/4 text-gray-600";
+        ? "bg-emerald-500/10 text-emerald-400 light-theme:bg-emerald-100 light-theme:text-emerald-700"
+        : "bg-gray-900/60 text-gray-600 light-theme:bg-gray-800 light-theme:text-gray-500";
  return <span className={`rounded-md px-2 py-0.5 text-[11px] ${className}`}>{label}</span>;
 }

 export function FakeProgressBar({ fraction, className = "" }: { fraction: number | null; className?: string }) {
  return (
-    <div className={`h-px overflow-hidden rounded-full bg-white/8 ${className}`}>
+    <div className={`h-px overflow-hidden rounded-full bg-gray-200/60 light-theme:bg-gray-300 ${className}`}>
      {fraction === null ? (
        <div className="h-full w-full animate-pulse bg-blue-500/40" />
      ) : (
@@ -143,7 +143,7 @@ export function ReplayButton({ onClick, label = "Replay" }: { onClick: () => voi
    <button
      type="button"
      onClick={onClick}
-      className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-200"
+      className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-200 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
    >
      <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0012.9 5.3M19.5 12A7.5 7.5 0 006.6 6.7M4.5 6.5v3h3M19.5 17.5v-3h-3" />
@@ -1,5 +1,7 @@
@import "tailwindcss";

+@custom-variant light-theme (&:is(html[data-theme="subtle-light"] *));
+
 * {
  box-sizing: border-box;
 }
@@ -10,11 +12,255 @@ body,
  height: 100%;
  margin: 0;
  padding: 0;
-  background: #030712;
+  background: var(--color-gray-950);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
 }

+html[data-theme="conventional-dark"] {
+  --color-gray-950: #1f1f1f;
+  --color-gray-900: #252525;
+  --color-gray-800: #303030;
+  --color-gray-700: #444444;
+  --color-gray-600: #666666;
+  --color-gray-500: #858585;
+  --color-gray-400: #a3a3a3;
+  --color-gray-300: #c4c4c4;
+  --color-gray-200: #dddddd;
+  --color-gray-100: #eeeeee;
+  background: #1f1f1f;
+}
+
+html[data-theme="subtle-light"] {
+  --color-white: #18202c;
+  --color-gray-950: #e9e7e2;
+  --color-gray-900: #dedbd4;
+  --color-gray-800: #cfcbc3;
+  --color-gray-700: #aea99f;
+  --color-gray-600: #817b72;
+  --color-gray-500: #655f57;
+  --color-gray-400: #514b44;
+  --color-gray-300: #403b35;
+  --color-gray-200: #302c28;
+  --color-gray-100: #24211e;
+  /* Pastel accent shades are tuned for dark UIs and wash out on the light
+     chrome (e.g. "Update check failed" in amber). Darken the ones used as
+     coloured text/icons so they stay readable. Media surfaces reset these to
+     the bright originals below, so on-photo overlays keep their signal colours.
+     Remapping the variable (not the utility) also covers opacity variants such
+     as text-amber-300/90. */
+  --color-amber-200: #b45309;
+  --color-amber-300: #b45309;
+  --color-amber-400: #b45309;
+  --color-red-200: #b91c1c;
+  --color-red-300: #b91c1c;
+  --color-red-400: #b91c1c;
+  --color-rose-300: #be123c;
+  --color-rose-400: #be123c;
+  --color-emerald-200: #047857;
+  --color-emerald-300: #047857;
+  --color-emerald-400: #047857;
+  --color-sky-300: #0369a1;
+  --color-blue-300: #1d4ed8;
+  --color-blue-400: #1d4ed8;
+  --color-violet-300: #6d28d9;
+  --color-violet-400: #6d28d9;
+  background: #e9e7e2;
+}
+
+html[data-theme="subtle-light"] .media-dark-surface {
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-gray-950: #030712;
+  --color-gray-900: #111827;
+  --color-gray-800: #1f2937;
+  --color-gray-700: #374151;
+  --color-gray-600: #4b5563;
+  --color-gray-500: #6b7280;
+  --color-gray-400: #9ca3af;
+  --color-gray-300: #d1d5db;
+  --color-gray-200: #e5e7eb;
+  --color-gray-100: #f3f4f6;
+  /* Restore the bright accent originals the light theme darkened, so coloured
+     overlays on photos/video (ratings, failed badges, the lightbox region tool)
+     keep their signal colours instead of going dark-on-dark. */
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-rose-300: oklch(81% 0.117 11.638);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-emerald-200: oklch(90.5% 0.093 164.15);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-blue-300: oklch(80.9% 0.105 251.813);
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-violet-300: oklch(81.1% 0.111 293.571);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+}
+
+/* The lightbox keeps its dark canvas + backdrop (via .media-dark-surface on the
+   root), but the metadata panel is chrome and should follow the active theme.
+   In subtle-light it lives inside the dark-surface root, so re-light it here by
+   remapping the palette on the panel itself. Tailwind v4 resolves every colour
+   utility through a --color-* variable, so remapping the variables re-themes the
+   whole subtree — including accents — without a single !important. */
+html[data-theme="subtle-light"] .lightbox-panel {
+  --color-white: #18202c;
+  --color-gray-950: #e9e7e2;
+  --color-gray-900: #dedbd4;
+  --color-gray-800: #cfcbc3;
+  --color-gray-700: #aea99f;
+  --color-gray-600: #817b72;
+  --color-gray-500: #655f57;
+  --color-gray-400: #514b44;
+  --color-gray-300: #403b35;
+  --color-gray-200: #302c28;
+  --color-gray-100: #24211e;
+  /* Pastel accents are tuned for a dark panel; darken them for the light one. */
+  --color-amber-300: #b45309;
+  --color-amber-400: #b45309;
+  --color-sky-300: #0369a1;
+  --color-emerald-300: #047857;
+  --color-rose-300: #be123c;
+  --color-rose-400: #be123c;
+  --color-red-300: #b91c1c;
+  --color-violet-300: #6d28d9;
+  --color-violet-400: #6d28d9;
+}
+
+html[data-theme="subtle-light"] .explore-view {
+  background:
+    radial-gradient(ellipse at top, rgb(59 130 246 / 0.08), transparent 48%),
+    radial-gradient(ellipse at 80% 75%, rgb(16 185 129 / 0.07), transparent 42%),
+    #f4f2ea !important;
+  color: #1f2937 !important;
+}
+
+html[data-theme="subtle-light"] .explore-header {
+  background: #f4f2ea !important;
+  border-color: #d8d2c7 !important;
+}
+
+html[data-theme="subtle-light"] .explore-title {
+  color: #111827 !important;
+}
+
+html[data-theme="subtle-light"] .explore-subtitle,
+html[data-theme="subtle-light"] .explore-empty {
+  color: #7a746b !important;
+}
+
+html[data-theme="subtle-light"] .explore-mode-toggle {
+  background: #ece8dd !important;
+  border-color: #d0c8ba !important;
+}
+
+html[data-theme="subtle-light"] .explore-mode-button {
+  background: transparent !important;
+  color: #4b5563 !important;
+}
+
+html[data-theme="subtle-light"] .explore-mode-button:hover {
+  background: #e0dbcf !important;
+  color: #111827 !important;
+}
+
+html[data-theme="subtle-light"] .explore-mode-button.bg-white\/10 {
+  background: #d8d4ca !important;
+  color: #111827 !important;
+}
+
+html[data-theme="subtle-light"] .explore-cluster-grid {
+  background-image: radial-gradient(circle, rgb(31 41 55 / 0.18) 1px, transparent 1px) !important;
+  opacity: 0.16 !important;
+}
+
+html[data-theme="subtle-light"] .explore-cluster-card {
+  background: #fbfaf6 !important;
+  border-color: #d8d2c7 !important;
+  box-shadow: 0 14px 36px rgb(28 25 23 / 0.18) !important;
+}
+
+html[data-theme="subtle-light"] .explore-cluster-card:hover {
+  box-shadow: 0 18px 44px rgb(28 25 23 / 0.22) !important;
+}
+
+html[data-theme="subtle-light"] .explore-cluster-overlay {
+  background: linear-gradient(
+    to top,
+    rgb(251 250 246 / 0.9),
+    rgb(251 250 246 / 0.52) 34%,
+    rgb(251 250 246 / 0.06) 68%,
+    transparent
+  ) !important;
+}
+
+html[data-theme="subtle-light"] .explore-cluster-label {
+  color: #6b6257 !important;
+}
+
+html[data-theme="subtle-light"] .explore-cluster-count {
+  color: #111827 !important;
+}
+
+html[data-theme="subtle-light"] .explore-tag-word:hover {
+  background: #e8e2d6 !important;
+}
+
+html[data-theme="subtle-light"] .explore-tag-word span:first-child {
+  color: #374151 !important;
+}
+
+html[data-theme="subtle-light"] .explore-spinner {
+  border-color: rgb(17 24 39 / 0.18) !important;
+  border-top-color: rgb(17 24 39 / 0.55) !important;
+}
+
+html[data-theme="subtle-light"] .feature-scope-trigger {
+  background: #f8f6ef !important;
+  border-color: #d0c8ba !important;
+  color: #4b5563 !important;
+}
+
+html[data-theme="subtle-light"] .feature-scope-trigger:hover,
+html[data-theme="subtle-light"] .feature-scope-dropdown:has(.feature-scope-menu) .feature-scope-trigger {
+  background: #ece8dd !important;
+  border-color: #bfb6a7 !important;
+  color: #111827 !important;
+}
+
+html[data-theme="subtle-light"] .feature-scope-menu {
+  background: #fbfaf6 !important;
+  border-color: #d0c8ba !important;
+  color: #1f2937 !important;
+  box-shadow: 0 18px 44px rgb(28 25 23 / 0.2) !important;
+}
+
+html[data-theme="subtle-light"] .feature-scope-option {
+  color: #4b5563 !important;
+}
+
+html[data-theme="subtle-light"] .feature-scope-option:hover {
+  background: #ece8dd !important;
+  color: #111827 !important;
+}
+
+html[data-theme="subtle-light"] .feature-scope-option.bg-white\/6 {
+  background: #d8d4ca !important;
+  color: #111827 !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .explore-cluster-card,
+  .explore-cluster-card img {
+    transition-duration: 0.01ms !important;
+  }
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar {
  width: 6px;
@@ -24,9 +270,9 @@ body,
  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--color-white, #fff) 12%, transparent);
  border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: color-mix(in srgb, var(--color-white, #fff) 22%, transparent);
 }
@@ -6,11 +6,15 @@ import { getVersion } from "@tauri-apps/api/app";
 import { check, Update } from "@tauri-apps/plugin-updater";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { notifyTaskComplete } from "./notifications";
+import { getChangelogForVersion } from "./changelog";

 // Per-folder debounce timers for batching notifications.
 // Keyed as `${folderId}:embedding` or `${folderId}:tagging`.
 const notificationTimers = new Map<string, ReturnType<typeof setTimeout>>();
 const NOTIFICATION_DEBOUNCE_MS = 6000;
+const THEME_KEY = "phokus-theme";
+const LIGHTBOX_AUTOPLAY_KEY = "phokus.lightboxAutoplay";
+const LIGHTBOX_AUTO_MUTE_KEY = "phokus.lightboxAutoMute";

 export interface Folder {
  id: number;
@@ -19,8 +23,26 @@ export interface Folder {
  image_count: number;
  indexed_at: string | null;
  scan_error: string | null;
+  sort_order: number;
 }

+export interface DirEntry {
+  name: string;
+  path: string;
+  has_children: boolean;
+}
+
+export interface DirListing {
+  current: string | null;
+  parent: string | null;
+  entries: DirEntry[];
+}
+
+export type FolderAddResult =
+  | { status: "added"; data: Folder }
+  | { status: "skipped"; data: string }
+  | { status: "error"; data: string };
+
 export type MediaKind = "image" | "video";
 export type MediaFilter = "all" | MediaKind;
 export type ZoomPreset = "compact" | "comfortable" | "detail";
@@ -33,6 +55,7 @@ export type AiRating = "general" | "sensitive" | "questionable" | "explicit";
 export type TaggingQueueScope = "all" | "selected";
 export type SimilarScope = "all_media" | "current_folder";
 export type ExploreMode = "visual" | "tags";
+export type AppTheme = "phokus" | "subtle-light" | "conventional-dark";

 export interface ImageRecord {
  id: number;
@@ -306,6 +329,7 @@ interface GalleryState {
  favoritesOnly: boolean;
  minimumRating: number;
  failedEmbeddingsOnly: boolean;
+  failedTaggingOnly: boolean;
  zoomPreset: ZoomPreset;
  selectedImage: ImageRecord | null;
  collectionTitle: string | null;
@@ -337,10 +361,14 @@ interface GalleryState {
  captionDetail: CaptionDetail;
  aiCaptionsEnabled: boolean;
  settingsOpen: boolean;
+  folderPickerOpen: boolean;
  taggingQueueScope: TaggingQueueScope;
  taggingQueueFolderIds: number[];
  mutedFolderIds: number[];
  notificationsPaused: boolean;
+  theme: AppTheme;
+  lightboxAutoplay: boolean;
+  lightboxAutoMute: boolean;
  // Per-folder background-worker pause flags, shared by the BackgroundTasks
  // bar and the sidebar folder context menu.
  workerPaused: Record<number, Record<WorkerKey, boolean>>;
@@ -351,6 +379,11 @@ interface GalleryState {
  updateProgress: number | null; // 0..1 download progress, null while size unknown
  updateError: string | null;
  updateDismissed: boolean;
+  // "What's New" greeting after a version change. `whatsNewToast` holds the
+  // version to advertise in the corner toast (null = hidden); `whatsNewOpen`
+  // controls the full changelog modal.
+  whatsNewOpen: boolean;
+  whatsNewToast: string | null;

  ffmpegStatus: FfmpegStatus;
  ffmpegProgress: { downloaded_bytes: number; total_bytes: number } | null;
@@ -381,10 +414,13 @@ interface GalleryState {
  loadFolders: () => Promise<void>;
  loadBackgroundJobProgress: () => Promise<void>;
  addFolder: (path: string) => Promise<void>;
+  addFolders: (paths: string[]) => Promise<FolderAddResult[]>;
+  listDirectories: (path: string | null) => Promise<DirListing>;
  removeFolder: (folderId: number) => Promise<void>;
  reindexFolder: (folderId: number) => Promise<void>;
  renameFolder: (folderId: number, newName: string) => Promise<void>;
  updateFolderPath: (folderId: number, newPath: string) => Promise<void>;
+  reorderFolders: (folderIds: number[]) => Promise<void>;
  selectFolder: (folderId: number | null) => void;
  setViewFolderScope: (folderId: number | null) => void;
  loadImages: (reset?: boolean) => Promise<void>;
@@ -398,6 +434,8 @@ interface GalleryState {
  setFavoritesOnly: (favoritesOnly: boolean) => void;
  setMinimumRating: (minimumRating: number) => void;
  setFailedEmbeddingsOnly: (failedEmbeddingsOnly: boolean) => void;
+  setFailedTaggingOnly: (failedTaggingOnly: boolean) => void;
+  showFailedTagging: (folderId: number) => void;
  setZoomPreset: (zoomPreset: ZoomPreset) => void;
  openImage: (image: ImageRecord) => void;
  closeImage: () => void;
@@ -427,6 +465,7 @@ interface GalleryState {
  setCaptionDetail: (detail: CaptionDetail) => Promise<void>;
  setAiCaptionsEnabled: (enabled: boolean) => void;
  setSettingsOpen: (open: boolean) => void;
+  setFolderPickerOpen: (open: boolean) => void;
  loadTaggingQueueScope: () => Promise<void>;
  setTaggingQueueScope: (scope: TaggingQueueScope) => void;
  loadTaggingQueueFolderIds: () => Promise<void>;
@@ -436,6 +475,9 @@ interface GalleryState {
  toggleMutedFolder: (folderId: number) => void;
  loadNotificationsPaused: () => Promise<void>;
  setNotificationsPaused: (paused: boolean) => void;
+  setTheme: (theme: AppTheme) => void;
+  setLightboxAutoplay: (enabled: boolean) => void;
+  setLightboxAutoMute: (enabled: boolean) => void;
  loadWorkerStates: () => Promise<void>;
  setWorkerPaused: (folderId: number, worker: WorkerKey, paused: boolean) => void;
  setAllWorkersPaused: (folderId: number, paused: boolean) => void;
@@ -443,6 +485,10 @@ interface GalleryState {
  checkForUpdates: (options?: { quiet?: boolean }) => Promise<void>;
  installUpdate: () => Promise<void>;
  dismissUpdate: () => void;
+  initWhatsNew: () => Promise<void>;
+  openWhatsNew: () => void;
+  closeWhatsNew: () => void;
+  dismissWhatsNewToast: () => void;
  loadFfmpegStatus: () => Promise<void>;
  retryFfmpegDownload: () => Promise<void>;
  loadOnboardingCompleted: () => Promise<void>;
@@ -452,6 +498,7 @@ interface GalleryState {
  openAppDataFolder: () => Promise<void>;
  getDatabaseInfo: () => Promise<DatabaseInfo>;
  vacuumDatabase: () => Promise<VacuumResult>;
+  rebuildSemanticIndex: () => Promise<number>;
  getOrphanedThumbnailsInfo: () => Promise<OrphanedThumbnailsInfo>;
  cleanupOrphanedThumbnails: () => Promise<CleanupOrphanedThumbnailsResult>;
  retryFailedEmbeddings: (folderId: number) => Promise<void>;
@@ -487,6 +534,10 @@ interface GalleryState {
 }

 const PAGE_SIZE = 200;
+// Timeline loads its full filtered set in one indexed taken_at query so the
+// scrubber can span the entire library and jump to any month. Rendering is
+// virtualized, so the cost is one query + records in memory — fine at this scale.
+const TIMELINE_PAGE_SIZE = 100000;
 const AI_CAPTIONS_ENABLED_KEY = "phokus.aiCaptionsEnabled";
 const SIMILAR_DISTANCE_THRESHOLD = 0.24;

@@ -502,6 +553,21 @@ function initialAiCaptionsEnabled(): boolean {
  return window.localStorage.getItem(AI_CAPTIONS_ENABLED_KEY) === "true";
 }

+function initialBoolSetting(key: string, fallback: boolean): boolean {
+  if (typeof window === "undefined") return fallback;
+  const stored = window.localStorage.getItem(key);
+  return stored === null ? fallback : stored === "true";
+}
+
+function initialTheme(): AppTheme {
+  if (typeof window === "undefined") return "phokus";
+  const saved = window.localStorage.getItem(THEME_KEY);
+  const theme: AppTheme =
+    saved === "subtle-light" || saved === "conventional-dark" ? saved : "phokus";
+  document.documentElement.dataset.theme = theme;
+  return theme;
+}
+
 function mergeIntoVisibleWindow(
  currentImages: ImageRecord[],
  newImages: ImageRecord[],
@@ -574,6 +640,7 @@ function matchesFilters(
  favoritesOnly: boolean,
  minimumRating: number,
  failedEmbeddingsOnly: boolean,
+  failedTaggingOnly: boolean,
  search: string,
 ): boolean {
  const matchesFolder = selectedFolderId === null || image.folder_id === selectedFolderId;
@@ -581,7 +648,8 @@ function matchesFilters(
  const matchesFavorite = !favoritesOnly || image.favorite;
  const matchesRating = image.rating >= minimumRating;
  const matchesFailedEmbedding = !failedEmbeddingsOnly || image.embedding_status === "failed";
-  return matchesFolder && matchesMedia && matchesFavorite && matchesRating && matchesFailedEmbedding && matchesSearch(image, search);
+  const matchesFailedTagging = !failedTaggingOnly || image.ai_tagger_error !== null;
+  return matchesFolder && matchesMedia && matchesFavorite && matchesRating && matchesFailedEmbedding && matchesFailedTagging && matchesSearch(image, search);
 }

 function compareNullableNumber(a: number | null, b: number | null): number {
@@ -658,11 +726,24 @@ function replaceImage(images: ImageRecord[], updatedImage: ImageRecord, sort: So
 function replaceExistingImages(
  currentImages: ImageRecord[],
  updatedImages: ImageRecord[],
-  sort: SortOrder,
 ): ImageRecord[] {
+  // Replace matched records in place WITHOUT re-sorting. `media-updated` carries
+  // thumbnail/metadata fills that don't move an item in the list (Timeline
+  // re-buckets by taken_at separately), and it fires constantly while the
+  // background workers run. Re-sorting here meant an O(n log n) pass on every
+  // batch — fine for the ~200-item gallery window, but a UI-freezing churn in
+  // Timeline view where `images` can hold the entire library (TIMELINE_PAGE_SIZE).
+  // Returning the same array reference when nothing matched also avoids a wasted
+  // re-render. Relative order for just-updated items is corrected on next load.
  const updatesByPath = new Map(updatedImages.map((image) => [image.path, image]));
-  const nextImages = currentImages.map((image) => updatesByPath.get(image.path) ?? image);
-  return nextImages.sort((a, b) => compareImages(a, b, sort));
+  let changed = false;
+  const nextImages = currentImages.map((image) => {
+    const update = updatesByPath.get(image.path);
+    if (!update) return image;
+    changed = true;
+    return update;
+  });
+  return changed ? nextImages : currentImages;
 }

 export function tileSizeForZoom(zoomPreset: ZoomPreset): number {
@@ -691,6 +772,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
  favoritesOnly: false,
  minimumRating: 0,
  failedEmbeddingsOnly: false,
+  failedTaggingOnly: false,
  zoomPreset: "comfortable",
  selectedImage: null,
  collectionTitle: null,
@@ -722,10 +804,14 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
  captionDetail: "paragraph",
  aiCaptionsEnabled: initialAiCaptionsEnabled(),
  settingsOpen: false,
+  folderPickerOpen: false,
  taggingQueueScope: "all",
  taggingQueueFolderIds: [],
  mutedFolderIds: [],
  notificationsPaused: false,
+  theme: initialTheme(),
+  lightboxAutoplay: initialBoolSetting(LIGHTBOX_AUTOPLAY_KEY, true),
+  lightboxAutoMute: initialBoolSetting(LIGHTBOX_AUTO_MUTE_KEY, false),
  workerPaused: {},

  appVersion: null,
@@ -734,6 +820,8 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
  updateProgress: null,
  updateError: null,
  updateDismissed: false,
+  whatsNewOpen: false,
+  whatsNewToast: null,

  ffmpegStatus: "unknown",
  ffmpegProgress: null,
@@ -794,6 +882,16 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
    await loadBackgroundJobProgress();
  },

+  addFolders: async (paths) => {
+    const { loadFolders, loadBackgroundJobProgress } = get();
+    const results = await invoke<FolderAddResult[]>("add_folders", { paths });
+    await loadFolders();
+    await loadBackgroundJobProgress();
+    return results;
+  },
+
+  listDirectories: (path) => invoke<DirListing>("list_directories", { path }),
+
  removeFolder: async (folderId) => {
    const { selectedFolderId, loadFolders, loadImages, loadBackgroundJobProgress } = get();
    // Optimistically drop it from the sidebar for instant feedback (the backend
@@ -840,8 +938,26 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
    await loadBackgroundJobProgress();
  },

+  reorderFolders: async (folderIds) => {
+    const previous = get().folders;
+    const byId = new Map(previous.map((folder) => [folder.id, folder]));
+    const folders = folderIds
+      .map((id, index) => {
+        const folder = byId.get(id);
+        return folder ? { ...folder, sort_order: index + 1 } : null;
+      })
+      .filter((folder): folder is Folder => folder !== null);
+    set({ folders });
+    try {
+      await invoke("reorder_folders", { params: { folder_ids: folderIds } });
+    } catch (error) {
+      set({ folders: previous });
+      throw error;
+    }
+  },
+
  selectFolder: (folderId) => {
-    set({ selectedFolderId: folderId, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, activeView: "gallery", failedEmbeddingsOnly: false, imageLoadError: null });
+    set({ selectedFolderId: folderId, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, activeView: "gallery", failedEmbeddingsOnly: false, failedTaggingOnly: false, imageLoadError: null });
    void get().loadImages(true);
  },

@@ -874,7 +990,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
  },

  loadImages: async (reset = false) => {
-    const { selectedFolderId, search, sort, loadedCount, mediaFilter, favoritesOnly, minimumRating, failedEmbeddingsOnly } = get();
+    const { selectedFolderId, search, sort, loadedCount, mediaFilter, favoritesOnly, minimumRating, failedEmbeddingsOnly, failedTaggingOnly, activeView } = get();
    const parsedSearch = parseSearchValue(search);
    const requestToken = ++galleryRequestToken;
    set({ loadingImages: true, imageLoadError: null });
@@ -961,9 +1077,10 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
          favorites_only: favoritesOnly,
          rating_min: minimumRating > 0 ? minimumRating : null,
          embedding_failed_only: failedEmbeddingsOnly,
+          tagging_failed_only: failedTaggingOnly,
          sort,
          offset,
-          limit: PAGE_SIZE,
+          limit: activeView === "timeline" ? TIMELINE_PAGE_SIZE : PAGE_SIZE,
        },
      });

@@ -1070,7 +1187,35 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
  },

  setFailedEmbeddingsOnly: (failedEmbeddingsOnly) => {
-    set({ failedEmbeddingsOnly, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, imageLoadError: null });
+    set({ failedEmbeddingsOnly, failedTaggingOnly: failedEmbeddingsOnly ? false : get().failedTaggingOnly, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, imageLoadError: null });
+    void get().loadImages(true);
+  },
+
+  setFailedTaggingOnly: (failedTaggingOnly) => {
+    set({ failedTaggingOnly, failedEmbeddingsOnly: failedTaggingOnly ? false : get().failedEmbeddingsOnly, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, imageLoadError: null });
+    void get().loadImages(true);
+  },
+
+  showFailedTagging: (folderId) => {
+    set({
+      selectedFolderId: folderId,
+      activeView: "gallery",
+      search: "",
+      mediaFilter: "all",
+      favoritesOnly: false,
+      minimumRating: 0,
+      failedEmbeddingsOnly: false,
+      failedTaggingOnly: true,
+      images: [],
+      loadedCount: 0,
+      collectionTitle: null,
+      similarSourceImageId: null,
+      similarSourceFolderId: null,
+      similarHasMore: false,
+      similarFolderId: null,
+      similarCrop: null,
+      imageLoadError: null,
+    });
    void get().loadImages(true);
  },

@@ -1479,6 +1624,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
  },

  setSettingsOpen: (settingsOpen) => set({ settingsOpen }),
+  setFolderPickerOpen: (folderPickerOpen) => set({ folderPickerOpen }),

  loadTaggingQueueScope: async () => {
    try {
@@ -1557,6 +1703,22 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
    void invoke("set_notifications_paused", { paused }).catch(() => {});
  },

+  setTheme: (theme) => {
+    window.localStorage.setItem(THEME_KEY, theme);
+    document.documentElement.dataset.theme = theme;
+    set({ theme });
+  },
+
+  setLightboxAutoplay: (enabled) => {
+    window.localStorage.setItem(LIGHTBOX_AUTOPLAY_KEY, String(enabled));
+    set({ lightboxAutoplay: enabled });
+  },
+
+  setLightboxAutoMute: (enabled) => {
+    window.localStorage.setItem(LIGHTBOX_AUTO_MUTE_KEY, String(enabled));
+    set({ lightboxAutoMute: enabled });
+  },
+
  loadWorkerStates: async () => {
    const folderIds = get().folders.map((folder) => folder.id);
    if (folderIds.length === 0) {
@@ -1651,7 +1813,10 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
    const update = pendingUpdate;
    if (!update || get().updateStatus !== "available") return;

-    set({ updateStatus: "downloading", updateProgress: null, updateError: null });
+    // Clearing the dismissed flag re-surfaces the progress toast: the user may
+    // have clicked "Later" on the prompt and then triggered the install from the
+    // title-bar button or Settings, and they should still see download progress.
+    set({ updateStatus: "downloading", updateProgress: null, updateError: null, updateDismissed: false });
    try {
      let contentLength: number | null = null;
      let downloaded = 0;
@@ -1680,6 +1845,40 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({

  dismissUpdate: () => set({ updateDismissed: true }),

+  initWhatsNew: async () => {
+    try {
+      const current = await getVersion();
+      const lastSeen = (await invoke<string | null>("get_last_seen_version")) || null;
+      // Already greeted this version — nothing to do, and no need to rewrite.
+      if (lastSeen === current) return;
+
+      let shouldShow: boolean;
+      if (lastSeen) {
+        // A recorded earlier version means this launch is a genuine upgrade.
+        shouldShow = true;
+      } else {
+        // No record yet. Fresh installs are covered by the welcome tour, so only
+        // greet users who have already completed onboarding (i.e. upgraded into
+        // this feature) rather than someone opening the app for the first time.
+        shouldShow = await invoke<boolean>("get_onboarding_completed").catch(() => false);
+      }
+
+      // Only surface the prompt if we actually have notes for this version.
+      if (shouldShow && getChangelogForVersion(current)) {
+        set({ whatsNewToast: current });
+      }
+      await invoke("set_last_seen_version", { version: current }).catch(() => {});
+    } catch {
+      // Non-fatal: the greeting is a nicety, never block startup on it.
+    }
+  },
+
+  openWhatsNew: () => set({ whatsNewOpen: true, whatsNewToast: null }),
+
+  closeWhatsNew: () => set({ whatsNewOpen: false }),
+
+  dismissWhatsNewToast: () => set({ whatsNewToast: null }),
+
  loadFfmpegStatus: async () => {
    try {
      const status = await invoke<{ installed: boolean; downloading: boolean; failed: boolean }>(
@@ -1742,6 +1941,8 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({

  vacuumDatabase: () => invoke<VacuumResult>("vacuum_database"),

+  rebuildSemanticIndex: () => invoke<number>("rebuild_semantic_index"),
+
  getOrphanedThumbnailsInfo: () => invoke<OrphanedThumbnailsInfo>("get_orphaned_thumbnails_info"),

  cleanupOrphanedThumbnails: () => invoke<CleanupOrphanedThumbnailsResult>("cleanup_orphaned_thumbnails"),
@@ -2161,6 +2362,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
            state.favoritesOnly,
            state.minimumRating,
            state.failedEmbeddingsOnly,
+            state.failedTaggingOnly,
            state.search,
          ),
        );
@@ -2200,6 +2402,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
            state.favoritesOnly,
            state.minimumRating,
            state.failedEmbeddingsOnly,
+            state.failedTaggingOnly,
            state.search,
          ),
        );
@@ -2214,7 +2417,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
        }

        return {
-          images: replaceExistingImages(state.images, visibleImages, state.sort),
+          images: replaceExistingImages(state.images, visibleImages),
          selectedImage,
        };
      });
@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const SECTION_BY_TYPE = {
+  added: "Added",
+  changed: "Changed",
+  deprecated: "Deprecated",
+  removed: "Removed",
+  fixed: "Fixed",
+  security: "Security",
+};
+
+function usage() {
+  console.error([
+    "Usage:",
+    "  pnpm changelog:add -- --type fixed --message \"Fix thing\"",
+    "",
+    `Types: ${Object.keys(SECTION_BY_TYPE).join(", ")}`,
+  ].join("\n"));
+  process.exit(1);
+}
+
+function argValue(name) {
+  const index = process.argv.indexOf(`--${name}`);
+  if (index === -1) return null;
+  return process.argv[index + 1] ?? null;
+}
+
+const type = argValue("type")?.toLowerCase();
+const message = argValue("message")?.trim();
+
+if (!type || !message || !SECTION_BY_TYPE[type]) {
+  usage();
+}
+
+const section = SECTION_BY_TYPE[type];
+const changelogPath = resolve("CHANGELOG.md");
+let changelog = readFileSync(changelogPath, "utf8");
+
+if (!/^## \[Unreleased\]/m.test(changelog)) {
+  changelog = changelog.replace(
+    /(\r?\n)(## \[[^\r\n]+\])/,
+    `$1## [Unreleased]$1$1$2`,
+  );
+}
+
+// JS regex has no \z anchor, so match to the next version heading or true
+// end-of-input ($ with nothing following — \n-tolerant under the m flag).
+const unreleasedMatch = changelog.match(/^## \[Unreleased\][\s\S]*?(?=^## \[|$(?![\s\S]))/m);
+if (!unreleasedMatch) {
+  throw new Error("Could not find or create an Unreleased section.");
+}
+
+const unreleased = unreleasedMatch[0];
+const lineEnding = changelog.includes("\r\n") ? "\r\n" : "\n";
+const bullet = `- ${message}`;
+
+let nextUnreleased;
+const sectionRegex = new RegExp(`(^### ${section}\\s*)([\\s\\S]*?)(?=^### |$(?![\\s\\S]))`, "m");
+const sectionMatch = unreleased.match(sectionRegex);
+
+if (sectionMatch) {
+  const body = sectionMatch[2].trimEnd();
+  const replacement = `${sectionMatch[1]}${body ? `${body}${lineEnding}` : ""}${bullet}${lineEnding}${lineEnding}`;
+  nextUnreleased = unreleased.replace(sectionRegex, replacement);
+} else {
+  const insert = `${lineEnding}### ${section}${lineEnding}${lineEnding}${bullet}${lineEnding}`;
+  nextUnreleased = unreleased.trimEnd() + insert + lineEnding;
+}
+
+changelog = changelog.replace(unreleased, nextUnreleased);
+writeFileSync(changelogPath, changelog);
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/brand/phokus-mark.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phokus — your local media library, made searchable</title>
+    <meta
+      name="description"
+      content="Phokus is a local-first desktop media library for Windows. Browse, search by meaning, and curate large image and video folders with semantic search, visual discovery, and on-device AI. Nothing leaves your machine."
+    />
+    <meta name="theme-color" content="#0a0b0d" />
+
+    <!-- Open Graph (social card image added in the metadata pass) -->
+    <meta property="og:title" content="Phokus — your local media library, made searchable" />
+    <meta
+      property="og:description"
+      content="Semantic search, visual discovery, and duplicate cleanup for the image and video folders already on your computer. Local-first, Windows."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://phokus.jezz.wtf" />
+
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,29 @@
+{
+  "name": "@phokus/website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "5.2.8",
+    "@fontsource-variable/space-grotesk": "5.2.10",
+    "framer-motion": "^12.38.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.8.3",
+    "vite": "^7.0.4",
+    "vite-imagetools": "^10.0.0"
+  }
+}
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256" role="img" aria-label="Phokus">
+  <title>Phokus</title>
+  <rect x="8" y="8" width="240" height="240" rx="52" fill="#0e0f14"/>
+  <g transform="translate(128 128)" fill="none" stroke="#e9e9ec" stroke-width="9"
+     stroke-linecap="round" stroke-linejoin="round">
+    <circle r="110"/>
+    <path d="M0,-46 A52,52 0 0 0 39.84,-23 A52,52 0 0 0 39.84,23 A52,52 0 0 0 0,46 A52,52 0 0 0 -39.84,23 A52,52 0 0 0 -39.84,-23 A52,52 0 0 0 0,-46 Z"/>
+    <g transform="rotate(0)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(60)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(120)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(180)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(240)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+    <g transform="rotate(300)"><path d="M0,-46 A110,110 0 0 1 70.71,-84.27"/></g>
+  </g>
+</svg>
@@ -0,0 +1,752 @@
+import { useRef, useState } from "react";
+import { PhokusMark } from "./components/PhokusMark";
+// Screenshots are 2560×1600 masters; imagetools downscales + transcodes to
+// AVIF/WebP at build (see the Shot helper). `as=picture` must be the last query
+// param so the `*as=picture` module declaration matches.
+import heroShot from "../assets/screenshots/phokus_galleryHero.jpg?w=1600&format=avif;webp&quality=50&as=picture";
+import semanticShot from "../assets/screenshots/phokus_semanticSearch.jpg?w=1600&format=avif;webp&quality=50&as=picture";
+import exploreShot from "../assets/screenshots/phokus_exploreClusters.png?w=1600&format=avif;webp&quality=50&as=picture";
+import timelineShot from "../assets/screenshots/phokus_timeline.jpg?w=1600&format=avif;webp&quality=50&as=picture";
+import lightboxShot from "../assets/screenshots/phokus_lightboxWithTags.jpg?w=1600&format=avif;webp&quality=50&as=picture";
+import videoShot from "../assets/screenshots/phokus_videoPlayer.jpg?w=1600&format=avif;webp&quality=50&as=picture";
+import duplicatesShot from "../assets/screenshots/phokus_duplicates.png?w=1600&format=avif;webp&quality=50&as=picture";
+
+const REPO_URL = "https://github.com/JezzWTF/phokus";
+const DOWNLOAD_URL = "https://github.com/JezzWTF/phokus/releases/latest";
+
+function GitHubIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.56-.29-5.25-1.28-5.25-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.41-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
+    </svg>
+  );
+}
+
+// Renders an imagetools `?as=picture` import: AVIF + WebP sources with the WebP
+// fallback on the <img>. `display:contents` so the layout/rounding lives on the
+// <img>, exactly as a bare <img> would. width/height come from the transcode to
+// reserve space and avoid layout shift.
+type PictureImport = { sources: Record<string, string>; img: { src: string; w: number; h: number } };
+
+function Shot({
+  pic,
+  alt,
+  className,
+  ariaHidden,
+}: {
+  pic: PictureImport;
+  alt: string;
+  className?: string;
+  ariaHidden?: boolean;
+}) {
+  return (
+    <picture className="contents">
+      {Object.entries(pic.sources).map(([type, srcSet]) => (
+        <source key={type} type={type} srcSet={srcSet} />
+      ))}
+      <img
+        src={pic.img.src}
+        width={pic.img.w}
+        height={pic.img.h}
+        alt={alt}
+        aria-hidden={ariaHidden}
+        className={className}
+      />
+    </picture>
+  );
+}
+
+function Header() {
+  return (
+    <header className="sticky top-0 z-50 border-b border-edge bg-canvas/70 backdrop-blur-md">
+      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-5 lg:h-16 lg:px-6">
+        <a href="#top" className="flex items-center gap-2.5 text-ink">
+          <PhokusMark className="h-5 w-5 text-amber lg:h-6 lg:w-6" />
+          <span className="font-display font-semibold tracking-tight lg:text-lg">Phokus</span>
+        </a>
+        <nav className="hidden items-center gap-8 text-sm text-muted md:flex">
+          <a href="#search" className="transition-colors hover:text-ink">Search</a>
+          <a href="#explore" className="transition-colors hover:text-ink">Explore</a>
+          <a href="#privacy" className="transition-colors hover:text-ink">Privacy</a>
+          <a href={REPO_URL} className="transition-colors hover:text-ink">Source</a>
+        </nav>
+        <a
+          href={DOWNLOAD_URL}
+          className="hidden rounded-lg border border-edge-strong px-4 py-2 text-sm font-medium text-ink transition-colors hover:bg-surface md:block"
+        >
+          Download
+        </a>
+        <a
+          href={REPO_URL}
+          aria-label="View Phokus source on GitHub"
+          className="grid h-9 w-9 place-items-center rounded-full border border-edge-strong text-muted transition-colors hover:bg-surface hover:text-ink md:hidden"
+        >
+          <GitHubIcon className="h-4 w-4" />
+        </a>
+      </div>
+    </header>
+  );
+}
+
+function MobileChapterNav() {
+  return (
+    <nav
+      aria-label="Page sections"
+      className="sticky top-14 z-40 flex gap-1 overflow-x-auto border-b border-edge bg-canvas/90 px-4 py-2 backdrop-blur-md lg:hidden"
+    >
+      {[
+        ["Search", "#search"],
+        ["Features", "#features"],
+        ["Details", "#tech"],
+        ["Download", "#download"],
+      ].map(([label, href]) => (
+        <a
+          key={href}
+          href={href}
+          className="shrink-0 rounded-full px-3 py-1.5 text-xs font-medium text-muted transition-colors hover:bg-surface-2 hover:text-ink"
+        >
+          {label}
+        </a>
+      ))}
+    </nav>
+  );
+}
+
+function MobileChapter({
+  number,
+  label,
+  title,
+  children,
+}: {
+  number: string;
+  label: string;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="lg:hidden">
+      <div className="flex items-center gap-3 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-faint">
+        <span className="font-mono text-amber">{number}</span>
+        <span className="h-px w-8 bg-edge-strong" />
+        {label}
+      </div>
+      <h2 className="mt-3 max-w-[20rem] font-display text-[1.75rem] font-semibold leading-[1.08] tracking-tight text-ink">
+        {title}
+      </h2>
+      {children}
+    </div>
+  );
+}
+
+function Hero() {
+  return (
+    <section id="top" className="relative overflow-hidden">
+      <div className="lg:hidden">
+        <div className="relative h-[34svh] min-h-64 overflow-hidden border-b border-edge">
+          <Shot
+            pic={heroShot}
+            alt="The Phokus gallery showing a dense library of landscape photos."
+            className="absolute inset-0 h-full w-full object-cover object-[67%_top]"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-canvas/20 via-transparent to-canvas" />
+          <div className="absolute inset-x-5 top-5 flex items-center justify-between">
+            <span className="rounded-full border border-white/10 bg-black/45 px-3 py-1.5 text-[0.68rem] font-medium text-white/80 backdrop-blur">
+              Your folders. Your machine.
+            </span>
+            <span className="flex items-center gap-1.5 text-[0.68rem] text-white/60">
+              <span className="h-1.5 w-1.5 rounded-full bg-amber" />
+              Windows
+            </span>
+          </div>
+        </div>
+
+        <div className="relative -mt-7 px-5 pb-12">
+          <h1 className="max-w-[21rem] font-display text-[2.45rem] font-semibold leading-[0.98] tracking-[-0.035em] text-ink">
+            See everything.
+            <br />
+            Find anything.
+          </h1>
+          <p className="mt-4 max-w-[22rem] text-[0.95rem] leading-6 text-muted">
+            Search and curate the images and videos already on your computer. Everything stays local.
+          </p>
+          <div className="mt-6">
+            <a
+              href={DOWNLOAD_URL}
+              className="flex min-h-12 items-center justify-between rounded-xl bg-amber px-5 text-sm font-semibold text-canvas transition-colors hover:bg-amber-soft"
+            >
+              Download for Windows
+              <span aria-hidden="true">↓</span>
+            </a>
+          </div>
+          <div className="mt-5 grid grid-cols-3 divide-x divide-edge border-y border-edge py-4 text-center">
+            <span className="px-2 text-[0.68rem] leading-4 text-faint">
+              <strong className="block font-medium text-ink">Local</strong>
+              no uploads
+            </span>
+            <span className="px-2 text-[0.68rem] leading-4 text-faint">
+              <strong className="block font-medium text-ink">Private</strong>
+              no account
+            </span>
+            <span className="px-2 text-[0.68rem] leading-4 text-faint">
+              <strong className="block font-medium text-ink">Offline</strong>
+              after setup
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative hidden min-h-[86vh] items-center lg:flex">
+      {/* Product leads: the gallery dominates the right and bleeds off the frame,
+          cropped so the workspace appears to continue beyond the viewport. */}
+      <div className="pointer-events-none absolute inset-y-0 right-0 w-[62%]">
+        <Shot
+          pic={heroShot}
+          alt=""
+          ariaHidden
+          className="h-full w-full object-cover object-left-top"
+        />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-canvas)_0%,transparent_46%)]" />
+        <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-canvas to-transparent" />
+      </div>
+      <div className="pointer-events-none absolute -left-24 top-8 -z-10 h-96 w-96 rounded-full bg-amber/[0.06] blur-3xl" />
+
+      <div className="relative mx-auto w-full max-w-7xl px-6 py-24">
+        <div className="max-w-2xl">
+          <p className="mb-6 inline-flex items-center gap-2 rounded-full border border-edge bg-surface/80 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
+            <span className="h-1.5 w-1.5 rounded-full bg-amber" />
+            Local-first · Windows desktop
+          </p>
+          <h1 className="font-display text-6xl font-semibold leading-[1.04] tracking-tight text-ink">
+            Your local media library,
+            <br />
+            made searchable.
+          </h1>
+          <p className="mt-6 max-w-lg text-lg leading-relaxed text-muted">
+            Browse, understand, and curate large image and video folders — semantic search, visual
+            discovery, and duplicate cleanup over the files already on your computer.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center gap-3">
+            <a
+              href={DOWNLOAD_URL}
+              className="rounded-lg bg-amber px-5 py-2.5 text-sm font-medium text-canvas transition-colors hover:bg-amber-soft"
+            >
+              Download for Windows
+            </a>
+            <a
+              href={REPO_URL}
+              className="inline-flex items-center gap-2 rounded-lg border border-edge-strong bg-canvas/60 px-5 py-2.5 text-sm font-medium text-ink backdrop-blur transition-colors hover:bg-surface"
+            >
+              <GitHubIcon className="h-4 w-4" />
+              View source
+            </a>
+          </div>
+          <p className="mt-5 text-sm text-faint">
+            Windows 10/11 · Open source · On-device processing · No account
+          </p>
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+
+function LocalFirst() {
+  const points = [
+    {
+      title: "Your files stay put",
+      body: "Phokus reads the folders you point it at. Media and everything it derives — thumbnails, embeddings, tags, ratings — never leave your machine.",
+    },
+    {
+      title: "On-device intelligence",
+      body: "Semantic search and AI tagging run locally. The models download once on first use; after that, search works offline.",
+    },
+    {
+      title: "No account, no cloud",
+      body: "No sign-up, no telemetry, no server. The only network traffic is the one-time model downloads and checking for updates.",
+    },
+  ];
+  return (
+    <section id="privacy" className="relative hidden overflow-hidden border-y border-edge bg-surface lg:block">
+      <EdgeMark side="left" />
+      <div className="relative mx-auto max-w-7xl px-6 py-28">
+        <div className="max-w-2xl">
+          <SectionEyebrow label="Local-first" />
+          <h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+            A library that stays on your machine.
+          </h2>
+          <p className="mt-5 text-lg leading-relaxed text-muted">
+            Phokus runs entirely on your computer. Nothing is uploaded, and there's nothing to sign
+            into — your photos and everything Phokus learns about them stay with you.
+          </p>
+        </div>
+        <div className="mt-12 grid gap-px overflow-hidden rounded-xl border border-edge bg-edge sm:grid-cols-3">
+          {points.map((p) => (
+            <div key={p.title} className="bg-surface p-6">
+              <h3 className="text-base font-medium text-ink">{p.title}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted">{p.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function SectionEyebrow({ label }: { label: string }) {
+  return (
+    <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-faint">
+      <PhokusMark className="h-4 w-4 text-muted" dotClassName="fill-amber" />
+      {label}
+    </span>
+  );
+}
+
+function SearchSection() {
+  return (
+    <section id="search" className="relative overflow-hidden">
+      <EdgeMark side="right" />
+      <div className="relative mx-auto max-w-7xl px-5 py-12 lg:px-6 lg:py-28">
+        <MobileChapter number="02" label="Semantic search" title="Describe the image. Skip the filename.">
+          <div className="mt-6 flex min-h-11 items-center gap-3 rounded-xl border border-edge-strong bg-surface px-4 shadow-lg shadow-black/20">
+            <span className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-xs text-amber">/s</span>
+            <span className="text-sm text-ink">seaside</span>
+            <span className="ml-auto text-xs text-faint">200 matches</span>
+          </div>
+          <div className="relative mt-3 h-80 overflow-hidden rounded-2xl border border-edge bg-surface shadow-2xl shadow-black/40">
+            <Shot
+              pic={semanticShot}
+              alt="Coastal photos returned for a semantic search for seaside."
+              className="h-full w-full object-cover object-[65%_center]"
+            />
+            <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/80 to-transparent" />
+            <p className="absolute bottom-4 left-4 right-4 text-xs leading-5 text-white/70">
+              Coastlines, waves, shells and dunes, matched by visual meaning.
+            </p>
+          </div>
+          <p className="mt-5 text-sm leading-6 text-muted">
+            Search by mood, place, subject, or visual idea. CLIP runs on-device, so it still works
+            offline and needs no manual tags.
+          </p>
+        </MobileChapter>
+
+        <div className="hidden lg:block">
+        <div className="max-w-2xl">
+          <SectionEyebrow label="Search by meaning" />
+          <h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+            Find it by what it looks like, not what it's named.
+          </h2>
+          <p className="mt-5 text-lg leading-relaxed text-muted">
+            Type{" "}
+            <code className="rounded-md border border-edge bg-surface-2 px-1.5 py-0.5 font-mono text-[0.85em] text-ink">
+              /s seaside
+            </code>{" "}
+            and Phokus returns coastlines, breaking waves, and shells — ranked by visual meaning with an
+            on-device CLIP model. No tags required, and it keeps working offline.
+          </p>
+        </div>
+
+        <figure className="relative mt-12 overflow-hidden rounded-xl border border-edge bg-surface shadow-2xl shadow-black/50">
+          <Shot
+            pic={semanticShot}
+            alt="Phokus showing a semantic search for 'seaside': a grid of coastal photos — beaches, breaking waves, shells, and a jellyfish — matched by visual meaning rather than filename."
+            className="block w-full"
+          />
+        </figure>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function MobileFeatureDeck() {
+  const [activeCard, setActiveCard] = useState(0);
+  const cardRefs = useRef<Array<HTMLElement | null>>([]);
+
+  function updateActiveCard(event: React.UIEvent<HTMLDivElement>) {
+    const deckCenter = event.currentTarget.scrollLeft + event.currentTarget.clientWidth / 2;
+    let nearestIndex = 0;
+    let nearestDistance = Number.POSITIVE_INFINITY;
+
+    cardRefs.current.forEach((card, index) => {
+      if (!card) return;
+      const cardCenter = card.offsetLeft + card.offsetWidth / 2;
+      const distance = Math.abs(cardCenter - deckCenter);
+      if (distance < nearestDistance) {
+        nearestDistance = distance;
+        nearestIndex = index;
+      }
+    });
+
+    setActiveCard(nearestIndex);
+  }
+
+  function showCard(index: number) {
+    cardRefs.current[index]?.scrollIntoView({
+      behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
+      block: "nearest",
+      inline: "center",
+    });
+  }
+
+  return (
+    <section id="features" className="overflow-hidden border-y border-edge bg-surface py-12 lg:hidden">
+      <div className="px-5">
+        <MobileChapter number="03" label="More than search" title="Three ways to move through a library.">
+          <p className="mt-4 text-sm leading-6 text-muted">
+            Swipe through the core workflows. Each one stays focused on the media, not app chrome.
+          </p>
+        </MobileChapter>
+      </div>
+
+      <div
+        onScroll={updateActiveCard}
+        className="mt-7 flex snap-x snap-mandatory gap-3 overflow-x-auto px-5 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        <article
+          ref={(node) => { cardRefs.current[0] = node; }}
+          className="w-[78vw] max-w-[19rem] shrink-0 snap-center overflow-hidden rounded-2xl border border-edge bg-canvas"
+        >
+          <div className="h-64 overflow-hidden">
+            <Shot
+              pic={exploreShot}
+              alt="Visual clusters arranged across the Explore canvas."
+              className="h-full w-full object-cover object-[54%_center]"
+            />
+          </div>
+          <div className="p-4">
+            <span className="font-mono text-[0.65rem] text-amber">EXPLORE</span>
+            <h3 className="mt-2 font-display text-xl font-semibold text-ink">See visual clusters.</h3>
+            <p className="mt-2 text-sm leading-6 text-muted">
+              Wander through related shots, then switch to a chronological timeline.
+            </p>
+          </div>
+        </article>
+
+        <article
+          ref={(node) => { cardRefs.current[1] = node; }}
+          className="w-[78vw] max-w-[19rem] shrink-0 snap-center overflow-hidden rounded-2xl border border-edge bg-canvas"
+        >
+          <div className="h-64 overflow-hidden">
+            <Shot
+              pic={lightboxShot}
+              alt="A waterfall open in the Phokus lightbox."
+              className="h-full w-full object-cover object-[37%_center]"
+            />
+          </div>
+          <div className="p-4">
+            <span className="font-mono text-[0.65rem] text-amber">CURATE</span>
+            <h3 className="mt-2 font-display text-xl font-semibold text-ink">Review without leaving.</h3>
+            <p className="mt-2 text-sm leading-6 text-muted">
+              Rate, favourite, tag, zoom, play video, and find similar images in place.
+            </p>
+          </div>
+        </article>
+
+        <article
+          ref={(node) => { cardRefs.current[2] = node; }}
+          className="w-[78vw] max-w-[19rem] shrink-0 snap-center overflow-hidden rounded-2xl border border-edge bg-canvas"
+        >
+          <div className="h-64 overflow-hidden">
+            <Shot
+              pic={duplicatesShot}
+              alt="Duplicate image pairs selected for safe cleanup."
+              className="h-full w-full object-cover object-[24%_top]"
+            />
+          </div>
+          <div className="p-4">
+            <span className="font-mono text-[0.65rem] text-amber">CLEANUP</span>
+            <h3 className="mt-2 font-display text-xl font-semibold text-ink">Compare exact pairs.</h3>
+            <p className="mt-2 text-sm leading-6 text-muted">
+              Confirm byte-identical files and choose what to remove. Nothing is automatic.
+            </p>
+          </div>
+        </article>
+      </div>
+
+      <div className="flex items-center gap-2 px-5 text-[0.68rem] text-faint">
+        {[0, 1, 2].map((index) => (
+          <button
+            key={index}
+            type="button"
+            aria-label={`Show feature ${index + 1}`}
+            aria-current={activeCard === index ? "true" : undefined}
+            onClick={() => showCard(index)}
+            className={`h-1.5 rounded-full transition-[width,background-color] ${
+              activeCard === index ? "w-8 bg-amber" : "w-1.5 bg-edge-strong"
+            }`}
+          />
+        ))}
+        <span className="ml-1">Swipe</span>
+      </div>
+    </section>
+  );
+}
+
+// Recurring aperture motif. One mark per section, vertically centered and bleeding
+// off the LEFT or RIGHT edge, sides alternating down the page — a clean zigzag that
+// never lets two marks collide at a section boundary (corner placement did).
+//
+// The iris is the full mark, but with blades reconstructed to meet the rim
+// *tangentially* — each blade is an arc internally tangent to the rim (radius 3.93,
+// center on the line out to the tip), so it kisses the circle and peels inward to
+// the opening instead of crossing it. The shipped logo's blades use radius 10
+// (== rim), which reads fine at icon size but looks "broken" blown up huge; this is
+// the same mark, geometrically clean at any scale.
+const WM_BLADE = "M0,-4.18 A3.93,3.93 0 0 1 6.43,-7.66";
+
+function EdgeMark({ side }: { side: "left" | "right" }) {
+  const place = side === "left" ? "-left-[19rem]" : "-right-[19rem]";
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={`pointer-events-none absolute top-1/2 hidden h-[34rem] w-[34rem] -translate-y-1/2 text-ink opacity-[0.05] sm:block ${place}`}
+    >
+      <g
+        transform="translate(12 12)"
+        stroke="currentColor"
+        strokeWidth="1.1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle r="10" />
+        <path d="M0,-4.18 A4.73,4.73 0 0 0 3.62,-2.09 A4.73,4.73 0 0 0 3.62,2.09 A4.73,4.73 0 0 0 0,4.18 A4.73,4.73 0 0 0 -3.62,2.09 A4.73,4.73 0 0 0 -3.62,-2.09 A4.73,4.73 0 0 0 0,-4.18 Z" />
+        <path d={WM_BLADE} />
+        <path d={WM_BLADE} transform="rotate(60)" />
+        <path d={WM_BLADE} transform="rotate(120)" />
+        <path d={WM_BLADE} transform="rotate(180)" />
+        <path d={WM_BLADE} transform="rotate(240)" />
+        <path d={WM_BLADE} transform="rotate(300)" />
+      </g>
+    </svg>
+  );
+}
+
+function ExploreSection() {
+  return (
+    <section id="explore" className="relative hidden overflow-hidden border-t border-edge bg-surface lg:block">
+      <EdgeMark side="left" />
+      <div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-6 lg:py-28">
+        <div className="grid items-center gap-10 lg:grid-cols-12">
+          <div className="lg:col-span-5">
+            <SectionEyebrow label="Explore & timeline" />
+            <h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+              See the shape of everything you've shot.
+            </h2>
+            <p className="mt-5 text-lg leading-relaxed text-muted">
+              Explore groups your library into visual clusters — sets of similar shots you can open and
+              wander, gathered by what they look like rather than where they're filed. A tag cloud
+              surfaces recurring themes, and the Timeline walks everything by the date it was taken.
+            </p>
+          </div>
+          <figure className="overflow-hidden rounded-xl border border-edge bg-canvas shadow-2xl shadow-black/50 lg:col-span-7">
+            <Shot
+              pic={exploreShot}
+              alt="The Explore view: clusters of related photos scattered across a dark canvas, each labelled with a count."
+              className="block w-full"
+            />
+          </figure>
+        </div>
+        <figure className="mt-6 overflow-hidden rounded-xl border border-edge bg-canvas shadow-xl shadow-black/40">
+          <Shot
+            pic={timelineShot}
+            alt="The Timeline view: media grouped into month sections such as May 2024, June 2024, and July 2024."
+            className="block max-h-80 w-full object-cover object-top"
+          />
+        </figure>
+      </div>
+    </section>
+  );
+}
+
+function CurateSection() {
+  return (
+    <section id="curate" className="relative hidden overflow-hidden lg:block">
+      <EdgeMark side="right" />
+      <div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-6 lg:py-28">
+        <div className="grid items-center gap-10 lg:grid-cols-12">
+          <figure className="order-2 overflow-hidden rounded-xl border border-edge bg-surface shadow-2xl shadow-black/50 lg:order-1 lg:col-span-7">
+            <Shot
+              pic={lightboxShot}
+              alt="The Phokus lightbox: a waterfall photo with a details panel showing rating stars, dimensions, file size, embedding status, and AI tags."
+              className="block w-full"
+            />
+          </figure>
+          <div className="order-1 lg:order-2 lg:col-span-5">
+            <SectionEyebrow label="Review & curate" />
+            <h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+              Rate, tag, and dig in — without losing your place.
+            </h2>
+            <p className="mt-5 text-lg leading-relaxed text-muted">
+              Open anything full-screen with zoom and pan, set ratings and favourites, edit tags, or
+              search within an image for look-alikes. Video gets a proper player too — scrubbing,
+              volume, speed, and fullscreen.
+            </p>
+          </div>
+        </div>
+        <figure className="mt-6 overflow-hidden rounded-xl border border-edge bg-surface shadow-xl shadow-black/40">
+          <Shot
+            pic={videoShot}
+            alt="The Phokus video player: a video open full-screen with playback controls and a details panel."
+            className="block max-h-[26rem] w-full object-cover object-center"
+          />
+        </figure>
+      </div>
+    </section>
+  );
+}
+
+function CleanupSection() {
+  return (
+    <section id="cleanup" className="relative hidden overflow-hidden border-t border-edge bg-surface lg:block">
+      <EdgeMark side="left" />
+      <div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-6 lg:py-28">
+        <div className="max-w-2xl">
+          <SectionEyebrow label="Clean up safely" />
+          <h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+            Find exact duplicates and reclaim the space.
+          </h2>
+          <p className="mt-5 text-lg leading-relaxed text-muted">
+            A three-pass scan — size, then a sample hash, then a full hash — groups byte-identical files
+            so you can review each set and bulk-delete with confidence. Nothing is removed without your
+            say-so.
+          </p>
+        </div>
+        <figure className="mt-12 overflow-hidden rounded-xl border border-edge bg-canvas shadow-2xl shadow-black/50">
+          <Shot
+            pic={duplicatesShot}
+            alt="The Duplicate Finder: groups of duplicate photos with per-group sizes, reclaimable space, and bulk-delete controls."
+            className="block w-full"
+          />
+        </figure>
+      </div>
+    </section>
+  );
+}
+
+function TechFactsSection() {
+  const facts = [
+    { k: "Platform", v: "Windows 10 / 11 (x64). The installer fetches the WebView2 runtime if it's missing." },
+    { k: "Media", v: "Common image formats plus video — thumbnails and metadata come from a bundled FFmpeg." },
+    { k: "On-device AI", v: "CLIP embeddings power semantic search (~580 MB); an optional WD tagger (~1.3 GB) adds tags." },
+    { k: "Inference", v: "CPU / DirectML in the standard build; an optional CUDA build accelerates NVIDIA GPUs." },
+    { k: "Storage", v: "A local SQLite database and thumbnail cache in your app-data folder. Nothing in the cloud." },
+    { k: "License & build", v: "MIT, open source. The installer is currently unsigned — see the note below." },
+  ];
+  return (
+    <section id="tech" className="relative mx-auto max-w-7xl px-5 py-12 lg:px-6 lg:py-28">
+      <MobileChapter number="04" label="Technical details" title="The practical bits.">
+        <div className="mt-6 divide-y divide-edge border-y border-edge">
+          {facts.map((fact, index) => (
+            <details key={fact.k} className="group py-1">
+              <summary className="flex min-h-12 cursor-pointer list-none items-center gap-3 py-2 text-sm font-medium text-ink">
+                <span className="font-mono text-[0.68rem] text-faint">0{index + 1}</span>
+                {fact.k}
+                <span className="ml-auto text-lg font-light text-amber transition-transform group-open:rotate-45">+</span>
+              </summary>
+              <p className="pb-5 pl-8 text-sm leading-6 text-muted">{fact.v}</p>
+            </details>
+          ))}
+        </div>
+      </MobileChapter>
+
+      <div className="hidden lg:block">
+      <div className="max-w-2xl">
+        <SectionEyebrow label="The technical facts" />
+        <h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
+          What you're actually running.
+        </h2>
+      </div>
+      <dl className="mt-12 grid gap-px overflow-hidden rounded-xl border border-edge bg-edge sm:grid-cols-2">
+        {facts.map((f) => (
+          <div key={f.k} className="bg-canvas p-6">
+            <dt className="text-sm font-medium text-ink">{f.k}</dt>
+            <dd className="mt-1.5 text-sm leading-relaxed text-muted">{f.v}</dd>
+          </div>
+        ))}
+      </dl>
+      </div>
+    </section>
+  );
+}
+
+function DownloadSection() {
+  return (
+    <section id="download" className="relative overflow-hidden border-t border-edge bg-surface">
+      <EdgeMark side="right" />
+      <div className="relative mx-auto max-w-3xl px-5 py-12 text-left lg:px-6 lg:py-28 lg:text-center">
+        <PhokusMark className="h-10 w-10 text-ink lg:mx-auto lg:h-12 lg:w-12" dotClassName="fill-amber" />
+        <h2 className="mt-6 max-w-xs font-display text-[2rem] font-semibold leading-tight tracking-tight text-ink lg:mx-auto lg:max-w-none lg:text-4xl">
+          Point Phokus at a folder.
+        </h2>
+        <p className="mt-4 max-w-md text-base leading-7 text-muted lg:mx-auto lg:text-lg lg:leading-relaxed">
+          Turn a folder full of files into a library you can actually explore.
+        </p>
+        <div className="mt-8 grid gap-3 lg:flex lg:flex-wrap lg:justify-center">
+          <a
+            href={DOWNLOAD_URL}
+            className="flex min-h-12 items-center justify-between rounded-xl bg-amber px-5 text-sm font-semibold text-canvas transition-colors hover:bg-amber-soft lg:min-h-0 lg:justify-center lg:rounded-lg lg:px-6 lg:py-3 lg:font-medium"
+          >
+            Download for Windows
+            <span className="lg:hidden" aria-hidden="true">↓</span>
+          </a>
+          <a
+            href={REPO_URL}
+            className="flex min-h-12 items-center justify-between rounded-xl border border-edge-strong px-5 text-sm font-medium text-ink transition-colors hover:bg-surface-2 lg:min-h-0 lg:justify-center lg:gap-2 lg:rounded-lg lg:px-6 lg:py-3"
+          >
+            View source
+            <GitHubIcon className="h-4 w-4" />
+          </a>
+        </div>
+        <p className="mt-8 max-w-xl border-l border-amber/50 pl-4 text-left text-xs leading-5 text-muted lg:mx-auto lg:mt-10 lg:rounded-lg lg:border lg:border-edge lg:bg-canvas/60 lg:p-4 lg:text-sm lg:leading-relaxed">
+          <span className="font-medium text-ink">Heads up:</span> this build isn't code-signed yet, so
+          Windows SmartScreen will warn that the publisher is unrecognised — choose{" "}
+          <span className="text-ink">More info → Run anyway</span>. An NVIDIA CUDA build is on the
+          releases page too.
+        </p>
+      </div>
+    </section>
+  );
+}
+
+function Footer() {
+  return (
+    <footer>
+      <div className="mx-auto flex max-w-7xl flex-col gap-5 px-5 py-8 text-xs text-faint lg:flex-row lg:items-center lg:justify-between lg:px-6 lg:py-10 lg:text-sm">
+        <div className="flex items-center gap-2 text-muted">
+          <PhokusMark className="h-5 w-5 text-amber" />
+          <span className="font-display font-medium text-ink">Phokus</span>
+          <span className="text-faint">· local-first media library</span>
+        </div>
+        <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
+          <a href={REPO_URL} className="transition-colors hover:text-ink">GitHub</a>
+          <a href="https://git.jezz.wtf/JezzWTF/phokus" className="transition-colors hover:text-ink">Gitea</a>
+          <a href={`${REPO_URL}/blob/main/LICENSE`} className="transition-colors hover:text-ink">MIT</a>
+          <span>JezzWTF</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export function App() {
+  return (
+    <div className="min-h-screen">
+      <Header />
+      <MobileChapterNav />
+      <main>
+        <Hero />
+        <LocalFirst />
+        <SearchSection />
+        <MobileFeatureDeck />
+        <ExploreSection />
+        <CurateSection />
+        <CleanupSection />
+        <TechFactsSection />
+        <DownloadSection />
+      </main>
+      <Footer />
+    </div>
+  );
+}
@@ -0,0 +1,33 @@
+// Phokus aperture mark — copied (not imported) from the desktop app so the
+// website stays decoupled from the Tauri renderer. Inherits currentColor.
+const BLADE = "M0,-4.18 A10,10 0 0 1 6.43,-7.66";
+
+export function PhokusMark({
+  className,
+  dotClassName,
+}: {
+  className?: string;
+  dotClassName?: string;
+}) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden="true">
+      <g
+        transform="translate(12 12)"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle r="10" />
+        <path d="M0,-4.18 A4.73,4.73 0 0 0 3.62,-2.09 A4.73,4.73 0 0 0 3.62,2.09 A4.73,4.73 0 0 0 0,4.18 A4.73,4.73 0 0 0 -3.62,2.09 A4.73,4.73 0 0 0 -3.62,-2.09 A4.73,4.73 0 0 0 0,-4.18 Z" />
+        <path d={BLADE} />
+        <path d={BLADE} transform="rotate(60)" />
+        <path d={BLADE} transform="rotate(120)" />
+        <path d={BLADE} transform="rotate(180)" />
+        <path d={BLADE} transform="rotate(240)" />
+        <path d={BLADE} transform="rotate(300)" />
+      </g>
+      {dotClassName ? <circle cx="12" cy="12" r="2.6" stroke="none" className={dotClassName} /> : null}
+    </svg>
+  );
+}
@@ -0,0 +1,9 @@
+// Typing for vite-imagetools `?as=picture` imports. The query ends in `as=picture`,
+// so this wildcard matches each screenshot import. Shape mirrors imagetools' Picture.
+declare module "*as=picture" {
+  const picture: {
+    sources: Record<string, string>;
+    img: { src: string; w: number; h: number };
+  };
+  export default picture;
+}
@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/index.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element #root not found");
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,74 @@
+@import "tailwindcss";
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("@fontsource-variable/inter/files/inter-latin-wght-normal.woff2") format("woff2-variations");
+}
+
+@font-face {
+  font-family: "Space Grotesk";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 700;
+  src: url("@fontsource-variable/space-grotesk/files/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
+}
+
+/* Phokus brand tokens — near-black surfaces, hairline edges, one amber accent
+   (the iris focal point). Borrowed from the app, not copied literally. */
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
+
+  --color-canvas: #0a0b0d;
+  --color-surface: #0f1116;
+  --color-surface-2: #161922;
+  --color-edge: #ffffff14;
+  --color-edge-strong: #ffffff2b;
+  --color-ink: #e8e9ec;
+  --color-muted: #9a9ca3;
+  --color-faint: #6b6e76;
+  --color-amber: #e6a23c;
+  --color-amber-soft: #f0bd6f;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-canvas);
+  color: var(--color-ink);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--color-amber);
+  outline-offset: 4px;
+}
+
+@media (max-width: 63.999rem) {
+  section[id] {
+    scroll-margin-top: 6.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "useDefineForClassFields": true
+  },
+  "include": ["src", "vite.config.ts"]
+}
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { imagetools } from "vite-imagetools";
+
+// Static product site for phokus.jezz.wtf. Isolated from the Tauri renderer —
+// no imports from ../src. Built and served by Ctrl on the Oracle VM.
+// Screenshots are imported with ?as=picture and transcoded to AVIF/WebP at build.
+export default defineConfig({
+  plugins: [react(), tailwindcss(), imagetools({ removeMetadata: true })],
+});
Author	SHA1	Message	Date
LyAhn	55cd3b5aa7	Merge feat/whats-new-updater-ux: What's New screen + updater UX + light-theme fixes github/actions/ci GitHub Actions CI finished: success Details Post-0.1.1 polish queued for the next release (0.1.2): - What's New: post-update toast that opens an in-app, offline release-notes screen (collapsible Added/Changed/Fixed sections) sourced from the bundled CHANGELOG.md, reopenable from Settings -> Updates. Backed by a last_seen_version settings file that tells upgrades from fresh installs. - Updater: the progress toast reappears when an update is started from the title-bar indicator or Settings after the prompt was dismissed; Settings gains a real download progress bar with a percentage. - Light theme: fix the recurring subtle-light breakage — neutral surfaces rely on the CSS-variable remap instead of light-theme:bg-white, and the green action buttons drop the broken light-theme:hover:bg-emerald-200 for an override-free emerald tint that auto-themes (updater, What's New, onboarding). - Debug panel: What's New triggers.	2026-06-23 21:36:35 +01:00
LyAhn	c878970180	feat: What's New screen + updater progress, plus light-theme fixes Post-update UX for the next release (0.1.2): - What's New: after a version change, greet the user with a toast that opens an in-app release-notes screen (collapsible Added/Changed/Fixed sections) sourced from the bundled CHANGELOG.md, reopenable from Settings -> Updates. Backed by a last_seen_version settings file (get/set_last_seen_version commands) that distinguishes upgrades from fresh installs. - Updater: the download/install progress toast now reappears when an update is started from the title-bar indicator or Settings after the prompt was dismissed; Settings -> Updates gains a real progress bar with a percentage. - Light theme: fix the recurring subtle-light breakage. Neutral surfaces now rely on the CSS-variable remap instead of light-theme:bg-white (which forced surfaces dark because --color-white is remapped dark); the green action buttons drop the broken light-theme:hover:bg-emerald-200 (remapped dark, unreadable on hover) for an override-free emerald-500 tint that auto-themes, across the updater, What's New, and onboarding. - Debug panel: add What's New triggers (toast / modal / reset).	2026-06-23 21:33:08 +01:00
LyAhn	1a95e31f78	docs: fill in 0.1.1 release checksums Add the SHA-256s for the published CPU and CUDA installers to the 0.1.1 release-notes draft.	2026-06-23 20:26:25 +01:00
LyAhn	e1e89b0f87	chore(release): 0.1.1 github/actions/ci GitHub Actions CI finished: success Details github/actions/release GitHub Actions release finished: success Details Bump version to 0.1.1 (package.json, Cargo.toml, Cargo.lock), date the changelog section (2026-06-23), and add the GitHub release-notes draft. QoL release on top of 0.1.0: custom multi-folder picker, theme system, timeline scrubber, folder reordering, gallery/duplicate-finder virtualisation, video playback settings, rebuild-semantic-index action, plus AVIF thumbnail, video-embedding, and Subtle Light theme fixes.	2026-06-23 20:00:08 +01:00
LyAhn	0909b58110	docs: update changelog with QoL-02 and AVIF fixes	2026-06-23 08:55:08 +01:00
LyAhn	4f9ab0b821	fix: support AVIF thumbnail processing github/actions/ci GitHub Actions CI finished: success Details Route AVIF thumbnail generation through the bundled FFmpeg path instead of the Rust image decoder, avoiding unsupported-format failures without requiring system dav1d dependencies. Requeue existing AVIF jobs that previously failed with unsupported-format errors and feed generated JPEG derivatives to embedding/tagging preprocessing while leaving lightbox display on the original AVIF file.	2026-06-22 20:43:46 +01:00
LyAhn	a06e76c7a7	fix: resolve Rust Clippy CI failures github/actions/ci GitHub Actions CI finished: success Details Derive default implementations for captioner and tagger option enums, simplify sorting and progress multiple checks, and remove redundant iterator conversions.	2026-06-21 21:00:46 +01:00
LyAhn	1e008244ae	fix(db): suppress too_many_arguments clippy lint on count_images github/actions/ci GitHub Actions CI finished: failure Details	2026-06-21 19:40:35 +01:00
LyAhn	ebed194f17	Merge feat/qol-02: QoL polish — folder picker, settings, duplicate finder github/actions/ci GitHub Actions CI finished: failure Details - Custom multi-folder picker replaces the native OS dialog: browse the filesystem in-app, stage multiple folders at once, and add them in one shot. Virtualised list handles large directory trees without jank. - Duplicate Finder group list is now virtualised, keeping the UI responsive even with hundreds of duplicate groups. - Settings panel reordered: General is now the first (default) section. - Lightbox video playback toggles (autoplay / auto-mute) added to General settings, wired to the store with ARIA switch roles. - "Rebuild Semantic Index" maintenance action added to Settings. - Folder picker QoL fixes: chevron tooltip, Unix breadcrumb root label, and partial-failure staging panel cleanup.	2026-06-21 19:30:35 +01:00
LyAhn	3684b98d55	fix(folder-picker): address QoL issues from PR review - Fix chevron tooltip: was "Open folder" in both branches; now shows "No subfolders" when the entry has no children (consistent with the existing opacity-45 visual cue on the same chevron icon) - Fix Unix breadcrumb root label: was always "Home" even for non-home paths like /mnt/data — now labelled "/" which is always accurate - Fix partial-failure staging: on a mixed add result, successfully-added entries are now removed from the staging panel so only genuinely failed folders remain for the user to retry (index-pairing is safe because the backend returns results in input order via a preserved .map())	2026-06-21 19:21:00 +01:00
LyAhn	74a4134f2f	feat: add custom multi-folder picker Replace native add-folder dialogs with an in-app folder picker that supports collecting folders from multiple locations before adding them together. Add backend directory listing and batch add commands with duplicate skipping, plus store actions and a themed picker UI with a dedicated folders-to-add panel.	2026-06-21 17:38:01 +01:00
LyAhn	f66fbe7931	feat(settings): add "Rebuild semantic index" maintenance action Drops and recreates the sqlite-vec tables at the current model dimension, then re-queues every image for embedding. Fixes "dimension mismatch" search errors that occur when the vector table was built for a different model/dimension (e.g. after experimenting with 768-dim models against this 512-dim build). The rebuild runs under the embedding worker's DB write lock and resets the job queue inside a single transaction, so it can't interleave with an in-flight embedding batch (per code review).	2026-06-21 15:17:34 +01:00
LyAhn	5870205047	feat(settings): General-first layout + lightbox video playback toggles Reorder the Settings sections so General is the top and default section instead of AI Workspace. Add two persisted settings under a new "Video playback" group: - Autoplay in lightbox (default on) - Start muted (default off) VideoPlayer reads these when a video opens — autoplaying only when enabled and starting muted when enabled, otherwise falling back to the session's last-used mute state. Settings apply to the next opened video, not the current one.	2026-06-21 14:39:41 +01:00
LyAhn	3db95a4489	perf: virtualize the Duplicate Finder group list The duplicate view rendered every group and every thumbnail at once — a 5,000-pair result mounted ~10K <img> elements, making scroll lag heavily (same class of bug as the old per-month Timeline). Virtualize the group list so only on-screen cards mount; heights are measured dynamically since each group wraps a variable number of copies.	2026-06-21 13:45:11 +01:00
LyAhn	c1ab651131	Merge: drop dead settings-modal theme CSS github/actions/ci GitHub Actions CI finished: failure Details Removes subtle-light .settings-modal overrides that targeted classes no component on main applies (dead rules), keeping the Settings modal flat and themed via the global accent variables.	2026-06-21 12:58:21 +01:00
LyAhn	166ffdb189	chore: remove dead .settings-modal theme overrides These subtle-light overrides target classes (settings-modal, settings-nav-active, settings-model-card) that no component on main applies, so the rules never took effect. They also pulled the Settings modal toward a card look we don't want. The accent-text readability is now handled globally by the theme's accent variables, so the modal themes correctly (flat) without this block.	2026-06-21 12:58:19 +01:00
LyAhn	58750b169a	Merge Subtle Light accent-text readability fix Coloured text/icons (warnings, errors, status) used pastel accent shades tuned for dark UIs and washed out on the light theme — e.g. "Update check failed" in Settings was near-invisible. Darken those accent variables in the subtle-light theme while resetting them to the bright originals inside .media-dark-surface, so light chrome reads clearly and on-photo overlays keep their signal colours.	2026-06-21 12:53:44 +01:00
LyAhn	1e148bdf18	fix: make accent text readable in Subtle Light theme Pastel accent shades (amber/red/rose/emerald/sky/violet/blue -200..-400) are tuned for dark UIs and washed out on the light chrome — e.g. "Update check failed" in the Settings updates row was near-invisible. Darken those accent variables in the subtle-light theme so coloured text/icons stay readable, and reset them to Tailwind's bright defaults inside .media-dark-surface so on-photo overlays (ratings, failed badges, the lightbox region tool) keep their signal colours. Remapping the variable rather than the utility also covers opacity variants like text-amber-300/90.	2026-06-21 12:34:04 +01:00
LyAhn	7367845f8b	Merge 0.1.1 QoL fixes github/actions/ci GitHub Actions CI finished: failure Details Post-release quality-of-life work for 0.1.1: - Timeline: right-edge year/month scrubber, full-library load so the scrubber spans everything, and per-row virtualization so dense months scroll smoothly. - Gallery grid row-virtualization; folder reordering (drag + keyboard) with persisted custom order and A-Z/Z-A/Custom sort. - Theme system (Phokus, Subtle Light, Conventional Dark) with an onboarding theme picker, plus subtle-light parity fixes for the lightbox panel, media overlays, duplicate finder, and window controls. - Failed AI-tagging locate/filter from the background worker prompt. - Perf: background media-updated batches no longer re-sort the whole image set. - Video embedding jobs no longer churn through false failures before their thumbnail exists. - Tooling: changelog helper + notes.	2026-06-21 08:48:53 +01:00
LyAhn	50e8bc8e4d	docs: record 0.1.1 QoL fixes in changelog	2026-06-21 08:48:20 +01:00
LyAhn	779a18f56e	fix: use valid end-of-input anchor in changelog-add JS regex has no \z anchor — it matched a literal 'z', so appending to the last section under [Unreleased] silently failed and duplicated the heading. Use $(?![\s\S]) to anchor to true end-of-input.	2026-06-21 08:48:19 +01:00
LyAhn	d027de675b	fix: debounce folder keyboard-reorder persistence Holding Up/Down on a folder's drag handle fired a reorder_folders DB write per keystroke. Update the local order immediately for responsiveness, but debounce the persist (400ms) with cleanup on unmount.	2026-06-21 08:48:18 +01:00
LyAhn	b7cfc9177e	fix: subtle-light theme parity for lightbox panel and media surfaces In subtle-light, the lightbox dragged its whole surface (including the metadata panel) dark via media-dark-surface, while conventional-dark themed the panel normally. Scope the dark surface to the media canvas and re-light the panel by remapping --color-* variables on a .lightbox-panel wrapper (Tailwind v4 resolves every colour utility through these vars, so this re-themes the subtree — including accents — with no !important). Mark gallery/duplicate media tiles as media-dark-surface so their on-image overlays stay light-on-dark, and theme the window restore icon via var(--color-gray-950) instead of a hardcoded hex.	2026-06-21 08:48:05 +01:00
LyAhn	479de76ebb	perf: stop full re-sort on media-updated batches replaceExistingImages re-sorted the entire loaded image array on every media-updated event. Harmless for the ~200-item gallery window, but in Timeline (which loads the whole library) it was an O(n log n) pass many times per second during background indexing — severe lag, occasional crashes. Thumbnail/metadata fills don't change list position (Timeline re-buckets by taken_at separately), so replace records in place and skip the sort; return the same array reference when nothing matched to avoid a wasted re-render.	2026-06-21 08:48:05 +01:00
LyAhn	21f6c30d25	perf: row-virtualize Timeline instead of per-month Each month was a single virtual item that rendered all of its tiles, so scrolling into a busy month mounted thousands of ImageTiles at once. Flatten months into a fixed-height row list (header rows + tile rows of `cols` images), mirroring the Gallery grid, so only on-screen rows render and thumbnails stream in as you scroll. Active-month tracking and scrubber jump-to-month are remapped to the flat row model.	2026-06-21 08:47:48 +01:00
LyAhn	1df75fd490	Refine explore and settings theming	2026-06-20 18:08:39 +01:00
LyAhn	a4c928345c	chore: add changelog helper and unreleased notes	2026-06-18 00:49:30 +01:00
LyAhn	ca58c2ddd4	fix: add failed tag locate and filter controls Add a failed-tag discovery flow for background worker failures. Changes: - Add a Failed Tags toolbar filter that appears when tag failures exist. - Add Locate buttons for failed tag tasks in the background worker prompt. - Route Locate to the affected folder and filter the gallery to images with tagger errors. - Fetch and display failed tag filenames/errors in the expanded worker details. - Add a backend query and gallery filter flag for images with failed AI tagging. - Improve subtle-light contrast for failed worker chips, filenames, and Locate/Retry buttons. - Also slightly increases the title bar update indicator pulse size for better visibility.	2026-06-18 00:36:02 +01:00
LyAhn	c97fec2eb3	fix: improve light theme onboarding controls Make the onboarding tour theme-aware across the app themes, add the first-run theme picker, and keep fake media previews on the dark media surface. Update light-mode secondary controls in onboarding, settings, dropdowns, toolbar controls, and duplicate actions so they no longer render as dark buttons on subtle-light.	2026-06-17 22:07:35 +01:00
LyAhn	9047c8053a	feat: 0.1.1 — timeline scrubber, gallery virtualisation, folder reorder, QoL polish Timeline: - Add a right-edge scrubber (year labels + month dots) that jumps to any period; runs in the same direction as the scrolled content - Load the full filtered set in Timeline view so the scrubber spans the whole library instead of just the first page Gallery & UI: - Virtualise the gallery grid - Folder reordering in the sidebar (drag + persisted sort_order) and a themed dropdown component - Subtle Light theme contrast fixes for toggles, secondary buttons and the update toast Embedding workers now defer video jobs without a thumbnail at claim time and requeue any previously-failed deferred jobs on startup, so videos no longer churn through failed embeddings. QoL polish across BackgroundTasks, DuplicateFinder, Lightbox and VideoPlayer.	2026-06-17 18:37:37 +01:00
LyAhn	f049f8c997	Update ci.yml flip paths-ignore to paths and point to src + src-tauri	2026-06-15 21:44:34 +01:00
LyAhn	3e0f59300e	feat(website): launch phokus.jezz.wtf product site github/actions/ci GitHub Actions CI finished: cancelled Details Single-page marketing site built with React 19, Vite 7, and Tailwind v4. Covers the full product story: local-first privacy, semantic search, explore/timeline, curation, deduplication, and download. Screenshots transcoded to AVIF/WebP at build (~5.3 MB masters → ~0.5 MB served). Self-hosted Inter and Space Grotesk variable fonts. Mobile-first redesign with phone-optimised hero, swipeable feature cards, and touch-friendly navigation. Includes the standalone Phokus aperture SVG asset. CI: exclude website/ and docs/ from the Rust/Tauri check workflow.	2026-06-15 21:25:55 +01:00
LyAhn	00bf7da344	feat(website): redesign the mobile experience Replace the stacked desktop layout with a phone-first product flow featuring an image-led hero, inline privacy proof, compact semantic search, swipeable feature cards with live pagination, expandable technical details, and touch-friendly navigation and calls to action. Add the standalone Phokus aperture SVG asset.	2026-06-15 21:15:18 +01:00
LyAhn	e14dbda41d	feat(website): finish responsive polish Self-host the Inter and Space Grotesk variable fonts, tighten the mobile layout, hide oversized edge marks on narrow screens, and add keyboard focus plus reduced-motion safeguards. Exclude website and documentation-only changes from the desktop CI workflow.	2026-06-15 19:55:01 +01:00
LyAhn	072c3887cf	feat(website): add Phokus product site with optimized media pipeline Single-page marketing site for phokus.jezz.wtf in the website/ pnpm workspace (React 19 + Vite 7 + Tailwind v4). Sections: Hero, Local-first, Search, Explore & timeline, Curate, Cleanup, Tech facts, Download. Product-first composition with a recurring aperture motif (EdgeMark) bleeding off alternating edges. Screenshots are transcoded to AVIF/WebP at build via vite-imagetools (sharp); ~5.3MB of masters -> ~0.5MB served. Commits only the 7 in-use captures.	2026-06-15 19:39:56 +01:00
LyAhn	584a92b7cd	ci: report GitHub Actions status to Gitea github/actions/ci GitHub Actions CI finished: failure Details	2026-06-15 00:36:25 +01:00
LyAhn	6a5cf0afe3	docs(changelog): date the 0.1.0 release (2026-06-14) CI / check (push) Has been cancelled Details	2026-06-14 20:28:22 +01:00
LyAhn	ce804f5aa5	chore(gitignore): drop blanket .json ignore, track configs directly CI / check (push) Has been cancelled Details The global .json rule (added for transient ComfyUI workflow dumps) forced git add -f on real configs and hid tauri.conf.json from tauri-action's gitignore-aware globbing. Removed it and the negation workarounds; local-only ignores (e.g. skills-lock.json) live in .git/info/exclude instead.	2026-06-14 20:10:18 +01:00