From e0cf94bf34549eff1a8fc6c0463f674959739481 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 19 Sep 2026 20:58:28 +0300
Subject: [PATCH] Initial

---
 .env.example                                  |   2 -
 app/components/layout/Footer.tsx              |   2 +
 app/components/layout/TopNavMenus.tsx         |   1 +
 app/components/layout/nav-items.ts            |   4 +
 app/config.ts                                 |   3 -
 app/features/admin/admin-constants.ts         |   3 -
 app/features/changelog/changelog-constants.ts |   1 +
 .../actions/scanner-ingest.server.ts          |  13 +-
 app/features/scanner-ingest/tests/harness.ts  |  25 -
 .../tests/ingest-scenarios.test.ts            |  16 -
 app/features/scanner/README.md                | 156 ++-
 app/features/scanner/capture/ring-buffer.ts   | 392 ++++++++
 app/features/scanner/capture/sampler.ts       | 156 ++-
 app/features/scanner/capture/vod-clips.ts     | 167 ++++
 app/features/scanner/capture/vod-frames.ts    |  32 +-
 .../scanner/components/ClipDialog.module.css  |  32 +
 .../scanner/components/ClipDialog.tsx         | 115 +++
 .../scanner/components/ClipStrip.module.css   | 119 +++
 app/features/scanner/components/ClipStrip.tsx | 104 ++
 .../scanner/components/ClipsView.module.css   | 125 +++
 app/features/scanner/components/ClipsView.tsx | 206 ++++
 app/features/scanner/components/DeathCard.tsx |   2 +-
 .../scanner/components/Dropzone.module.css    |  24 +
 app/features/scanner/components/Dropzone.tsx  |  34 +
 .../scanner/components/EventCard.module.css   |  39 -
 app/features/scanner/components/EventCard.tsx |  73 +-
 .../components/EventsSummary.module.css       |  37 -
 .../scanner/components/EventsSummary.tsx      |  65 --
 .../scanner/components/ExportMenu.tsx         |  75 ++
 .../scanner/components/FixturesPage.tsx       |   4 +-
 app/features/scanner/components/KillCard.tsx  |   3 +-
 .../scanner/components/LandingView.module.css | 200 ++++
 .../scanner/components/LandingView.tsx        | 277 ++++++
 app/features/scanner/components/LivePage.tsx  | 634 ------------
 .../scanner/components/LiveView.module.css    |  52 +
 app/features/scanner/components/LiveView.tsx  | 180 ++++
 .../scanner/components/MapStartCard.tsx       |   2 +-
 .../scanner/components/MatchCard.module.css   | 632 ++++++------
 app/features/scanner/components/MatchCard.tsx | 838 +++++++++-------
 .../components/MatchLobbyTabs.module.css      |   5 -
 .../scanner/components/MatchLobbyTabs.tsx     | 135 ---
 app/features/scanner/components/MetaChips.tsx |   2 +-
 .../scanner/components/MinimapCard.tsx        |   2 +-
 .../scanner/components/NotFound.module.css    |  11 +
 app/features/scanner/components/NotFound.tsx  |  20 +
 .../scanner/components/ObjectiveCard.tsx      |   3 +-
 .../components/PastSessionView.module.css     |   9 +
 .../scanner/components/PastSessionView.tsx    | 121 +++
 .../scanner/components/PlayerStatusCard.tsx   |   3 +-
 .../components/RawDetections.module.css       |  23 +
 .../scanner/components/RawDetections.tsx      |  61 ++
 .../scanner/components/ScannerApp.module.css  |  86 +-
 .../scanner/components/ScannerApp.tsx         | 107 +-
 .../components/ScannerChrome.module.css       | 137 ---
 .../scanner/components/ScannerChrome.tsx      | 102 --
 .../scanner/components/ScoreboardCard.tsx     |   2 +-
 .../scanner/components/ScoreboardOwnCard.tsx  |   7 +-
 .../scanner/components/ScreenshotPage.tsx     |  25 +-
 .../components/SessionHeader.module.css       |  60 ++
 .../scanner/components/SessionHeader.tsx      |  37 +
 .../scanner/components/SessionView.module.css |  43 +
 .../scanner/components/SessionView.tsx        | 283 ++++++
 .../components/SettingsPopover.module.css     |  45 +
 .../scanner/components/SettingsPopover.tsx    | 125 +++
 ...age.module.css => SourceSelect.module.css} |  42 +-
 .../scanner/components/SourceSelect.tsx       |  97 ++
 .../scanner/components/StripWeaponsCard.tsx   |   5 +-
 .../scanner/components/UploadChip.module.css  |  90 ++
 .../scanner/components/UploadChip.tsx         | 166 ++++
 .../scanner/components/VodPage.module.css     | 114 ---
 app/features/scanner/components/VodPage.tsx   | 913 ------------------
 .../scanner/components/VodView.module.css     | 140 +++
 app/features/scanner/components/VodView.tsx   | 376 ++++++++
 app/features/scanner/components/clips-feed.ts |  44 +
 app/features/scanner/components/download.ts   |  14 +
 app/features/scanner/components/errors.ts     |  29 +
 .../scanner/components/events-feed.ts         | 164 ++++
 .../scanner/components/fixture-export.ts      |  12 +-
 app/features/scanner/components/format.ts     |  15 -
 .../scanner/components/live-session.ts        | 430 +++++++++
 .../scanner/components/sendou-ingest.ts       | 168 ++--
 .../scanner/components/session-data.ts        |  20 +
 app/features/scanner/components/settings.ts   |  84 ++
 app/features/scanner/components/upload.ts     | 103 ++
 app/features/scanner/components/use-debug.ts  |  11 +
 app/features/scanner/components/vod-scan.ts   | 532 ++++++++++
 app/features/scanner/components/vods-feed.ts  |  39 +
 app/features/scanner/core/clips/scoring.ts    | 114 +++
 app/features/scanner/core/csv/csv.ts          |  18 +
 .../events-csv.ts => core/csv/events.ts}      |  84 +-
 app/features/scanner/core/csv/matches.ts      | 107 ++
 app/features/scanner/core/format.ts           |  26 +
 .../scanner/{components => core}/labels.ts    |   0
 app/features/scanner/core/match-builder.ts    |  38 +-
 app/features/scanner/core/sessions.ts         | 103 ++
 app/features/scanner/routes/scanner.tsx       |  12 +-
 .../scanner/scanner-search-params.test.ts     |  11 +-
 app/features/scanner/scanner-search-params.ts |  29 +-
 .../scanner/store/clips.browser.test.ts       | 102 ++
 app/features/scanner/store/clips.ts           | 154 +++
 app/features/scanner/store/db.ts              | 119 ++-
 app/features/scanner/store/events.ts          | 169 ++--
 .../scanner/store/vods.browser.test.ts        |  56 --
 app/features/scanner/store/vods.ts            |  95 +-
 .../scanner/tests/logic/clip-scoring.test.ts  | 116 +++
 .../scanner/tests/logic/match-builder.test.ts |  38 +
 .../scanner/tests/logic/matches-csv.test.ts   | 115 +++
 .../scanner/tests/logic/sessions.test.ts      | 128 +++
 app/modules/permissions/mapper.server.ts      |  13 +-
 app/modules/permissions/types.ts              |   1 -
 app/modules/permissions/utils.ts              |   7 -
 app/utils/urls.ts                             |   1 +
 changelog/2026-09-19-scanner.md               |  12 +
 e2e/pages/scanner/scanner-page.ts             |   4 +
 e2e/public-pages.spec.ts                      |   6 +-
 locales/da/common.json                        |   1 +
 locales/de/common.json                        |   1 +
 locales/en/common.json                        |   1 +
 locales/es-ES/common.json                     |   1 +
 locales/es-US/common.json                     |   1 +
 locales/fr-CA/common.json                     |   1 +
 locales/fr-EU/common.json                     |   1 +
 locales/he/common.json                        |   1 +
 locales/it/common.json                        |   1 +
 locales/ja/common.json                        |   1 +
 locales/ko/common.json                        |   1 +
 locales/nl/common.json                        |   1 +
 locales/pl/common.json                        |   1 +
 locales/pt-BR/common.json                     |   1 +
 locales/ru/common.json                        |   1 +
 locales/zh/common.json                        |   1 +
 scripts/scanner/scan-vod.ts                   |   2 +-
 scripts/scanner/status-audit.ts               |  14 +-
 vitest.unit.config.ts                         |   4 -
 134 files changed, 7969 insertions(+), 3652 deletions(-)
 create mode 100644 app/features/scanner/capture/ring-buffer.ts
 create mode 100644 app/features/scanner/capture/vod-clips.ts
 create mode 100644 app/features/scanner/components/ClipDialog.module.css
 create mode 100644 app/features/scanner/components/ClipDialog.tsx
 create mode 100644 app/features/scanner/components/ClipStrip.module.css
 create mode 100644 app/features/scanner/components/ClipStrip.tsx
 create mode 100644 app/features/scanner/components/ClipsView.module.css
 create mode 100644 app/features/scanner/components/ClipsView.tsx
 create mode 100644 app/features/scanner/components/Dropzone.module.css
 create mode 100644 app/features/scanner/components/Dropzone.tsx
 delete mode 100644 app/features/scanner/components/EventCard.module.css
 delete mode 100644 app/features/scanner/components/EventsSummary.module.css
 delete mode 100644 app/features/scanner/components/EventsSummary.tsx
 create mode 100644 app/features/scanner/components/ExportMenu.tsx
 create mode 100644 app/features/scanner/components/LandingView.module.css
 create mode 100644 app/features/scanner/components/LandingView.tsx
 delete mode 100644 app/features/scanner/components/LivePage.tsx
 create mode 100644 app/features/scanner/components/LiveView.module.css
 create mode 100644 app/features/scanner/components/LiveView.tsx
 delete mode 100644 app/features/scanner/components/MatchLobbyTabs.module.css
 delete mode 100644 app/features/scanner/components/MatchLobbyTabs.tsx
 create mode 100644 app/features/scanner/components/NotFound.module.css
 create mode 100644 app/features/scanner/components/NotFound.tsx
 create mode 100644 app/features/scanner/components/PastSessionView.module.css
 create mode 100644 app/features/scanner/components/PastSessionView.tsx
 create mode 100644 app/features/scanner/components/RawDetections.module.css
 create mode 100644 app/features/scanner/components/RawDetections.tsx
 delete mode 100644 app/features/scanner/components/ScannerChrome.module.css
 delete mode 100644 app/features/scanner/components/ScannerChrome.tsx
 create mode 100644 app/features/scanner/components/SessionHeader.module.css
 create mode 100644 app/features/scanner/components/SessionHeader.tsx
 create mode 100644 app/features/scanner/components/SessionView.module.css
 create mode 100644 app/features/scanner/components/SessionView.tsx
 create mode 100644 app/features/scanner/components/SettingsPopover.module.css
 create mode 100644 app/features/scanner/components/SettingsPopover.tsx
 rename app/features/scanner/components/{LivePage.module.css => SourceSelect.module.css} (54%)
 create mode 100644 app/features/scanner/components/SourceSelect.tsx
 create mode 100644 app/features/scanner/components/UploadChip.module.css
 create mode 100644 app/features/scanner/components/UploadChip.tsx
 delete mode 100644 app/features/scanner/components/VodPage.module.css
 delete mode 100644 app/features/scanner/components/VodPage.tsx
 create mode 100644 app/features/scanner/components/VodView.module.css
 create mode 100644 app/features/scanner/components/VodView.tsx
 create mode 100644 app/features/scanner/components/clips-feed.ts
 create mode 100644 app/features/scanner/components/download.ts
 create mode 100644 app/features/scanner/components/errors.ts
 create mode 100644 app/features/scanner/components/events-feed.ts
 create mode 100644 app/features/scanner/components/live-session.ts
 create mode 100644 app/features/scanner/components/session-data.ts
 create mode 100644 app/features/scanner/components/settings.ts
 create mode 100644 app/features/scanner/components/upload.ts
 create mode 100644 app/features/scanner/components/use-debug.ts
 create mode 100644 app/features/scanner/components/vod-scan.ts
 create mode 100644 app/features/scanner/components/vods-feed.ts
 create mode 100644 app/features/scanner/core/clips/scoring.ts
 create mode 100644 app/features/scanner/core/csv/csv.ts
 rename app/features/scanner/{components/events-csv.ts => core/csv/events.ts} (76%)
 create mode 100644 app/features/scanner/core/csv/matches.ts
 create mode 100644 app/features/scanner/core/format.ts
 rename app/features/scanner/{components => core}/labels.ts (100%)
 create mode 100644 app/features/scanner/core/sessions.ts
 create mode 100644 app/features/scanner/store/clips.browser.test.ts
 create mode 100644 app/features/scanner/store/clips.ts
 delete mode 100644 app/features/scanner/store/vods.browser.test.ts
 create mode 100644 app/features/scanner/tests/logic/clip-scoring.test.ts
 create mode 100644 app/features/scanner/tests/logic/matches-csv.test.ts
 create mode 100644 app/features/scanner/tests/logic/sessions.test.ts
 create mode 100644 changelog/2026-09-19-scanner.md

diff --git a/.env.example b/.env.example
index 6a2d1ae82..521474a34 100644
--- a/.env.example
+++ b/.env.example
@@ -43,8 +43,6 @@ SQL_LOG=none
 
 VITE_SHOW_LUTI_NAV_ITEM=false
 
-// If false the scanner page and its ingest endpoint are admin only
-VITE_SCANNER_ENABLED=false
 
 // Push notification. Generate values here https://vapidkeys.com/
 VITE_VAPID_PUBLIC_KEY=
diff --git a/app/components/layout/Footer.tsx b/app/components/layout/Footer.tsx
index 6622ed3e3..0bf715163 100644
--- a/app/components/layout/Footer.tsx
+++ b/app/components/layout/Footer.tsx
@@ -37,6 +37,7 @@ import {
 	PLANNER_URL,
 	PLUS_SUGGESTIONS_PAGE,
 	PLUS_VOTING_RESULTS_PAGE,
+	SCANNER_PAGE,
 	SENDOU_INK_DISCORD_URL,
 	SENDOU_INK_GITHUB_URL,
 	SENDOU_LOVE_EMOJI_PATH,
@@ -110,6 +111,7 @@ const SITEMAP_COLUMNS = [
 			{ name: "maps", url: MAPS_URL },
 			{ name: "tier-list-maker", url: TIER_LIST_MAKER_URL },
 			{ name: "xsearch", url: XSEARCH_PAGE },
+			{ name: "scanner", url: SCANNER_PAGE },
 			{ name: "settings", url: SETTINGS_PAGE },
 		],
 	},
diff --git a/app/components/layout/TopNavMenus.tsx b/app/components/layout/TopNavMenus.tsx
index 37a7bb1a9..b61e88d35 100644
--- a/app/components/layout/TopNavMenus.tsx
+++ b/app/components/layout/TopNavMenus.tsx
@@ -52,6 +52,7 @@ const NAV_CATEGORIES = [
 			{ name: "maps", url: "maps" },
 			{ name: "tier-list-maker", url: "tier-list-maker" },
 			{ name: "xsearch", url: "xsearch" },
+			{ name: "scanner", url: "scanner" },
 			{
 				name: "admin",
 				url: "admin",
diff --git a/app/components/layout/nav-items.ts b/app/components/layout/nav-items.ts
index 3d6b92e9f..8b36d2f66 100644
--- a/app/components/layout/nav-items.ts
+++ b/app/components/layout/nav-items.ts
@@ -71,6 +71,10 @@ export const navItems = [
 		name: "vods",
 		url: "vods",
 	},
+	{
+		name: "scanner",
+		url: "scanner",
+	},
 	{
 		name: "art",
 		url: "art",
diff --git a/app/config.ts b/app/config.ts
index ef9659684..6e9a06940 100644
--- a/app/config.ts
+++ b/app/config.ts
@@ -32,7 +32,6 @@ const schema = v.object({
 	VITE_PROD_MODE: v.optional(envBoolean, "false"),
 	VITE_SHOW_LUTI_NAV_ITEM: v.optional(envBoolean, "false"),
 	VITE_FUSE_ENABLED: v.optional(envBoolean, "false"),
-	VITE_SCANNER_ENABLED: v.optional(envBoolean, "false"),
 
 	VITE_LEAGUE_GOOGLE_FORM_URL: v.optional(v.string()),
 	VITE_SHOW_BANNER_FOR_SEASON: v.optional(v.string()),
@@ -57,8 +56,6 @@ export const Config = {
 	prodMode: values.VITE_PROD_MODE,
 	showLutiNavItem: values.VITE_SHOW_LUTI_NAV_ITEM,
 	fuseEnabled: values.VITE_FUSE_ENABLED,
-	/** While false only the admin and devs can use the scanner page and its ingest endpoint. */
-	scannerEnabled: values.VITE_SCANNER_ENABLED,
 	leagueGoogleFormUrl: values.VITE_LEAGUE_GOOGLE_FORM_URL,
 	/** Season to show the registration banner for. */
 	showBannerForSeason: values.VITE_SHOW_BANNER_FOR_SEASON,
diff --git a/app/features/admin/admin-constants.ts b/app/features/admin/admin-constants.ts
index 415684dda..32f8f19ef 100644
--- a/app/features/admin/admin-constants.ts
+++ b/app/features/admin/admin-constants.ts
@@ -9,9 +9,6 @@ export const STAFF_IDS = [11329, 9719, 9342, 20774, 23094];
 export const DEV_IDS = [27883];
 //                               hfcRed Dreamy Cafy   Acing
 export const QA_IDS: number[] = [27883, 38176, 10654, 9342];
-//                                           xi
-/** Users who can access the scanner while it is not yet enabled for everyone */
-export const SCANNER_TESTER_IDS: number[] = [30228];
 
 export const STAFF_DISCORD_IDS = [
 	"138757634500067328",
diff --git a/app/features/changelog/changelog-constants.ts b/app/features/changelog/changelog-constants.ts
index 5ebfed60a..fad179bad 100644
--- a/app/features/changelog/changelog-constants.ts
+++ b/app/features/changelog/changelog-constants.ts
@@ -31,6 +31,7 @@ export const DISCORD_EMOJI_NAMES: Record<NavIcon, string> = {
 	associations: "associations",
 	badges: "badges",
 	luti: "luti",
+	scanner: "scanner",
 };
 
 /** Stands in for the sendou.ink logo, used by entries without a nav item. */
diff --git a/app/features/scanner-ingest/actions/scanner-ingest.server.ts b/app/features/scanner-ingest/actions/scanner-ingest.server.ts
index 9b98f0d5f..ff6681f32 100644
--- a/app/features/scanner-ingest/actions/scanner-ingest.server.ts
+++ b/app/features/scanner-ingest/actions/scanner-ingest.server.ts
@@ -1,12 +1,10 @@
 import { subDays } from "date-fns";
 import type { ActionFunction } from "react-router";
-import { Config } from "~/config";
 import { requireUser } from "~/features/auth/core/user.server";
 import type { ScannerMatch } from "~/features/scanner/core/scanner-match";
-import { isAdmin, isDev, isScannerTester } from "~/modules/permissions/utils";
 import { dateToDatabaseTimestamp } from "~/utils/dates";
 import { logger } from "~/utils/logger";
-import { forbidden, parseBody } from "~/utils/remix.server";
+import { parseBody } from "~/utils/remix.server";
 import * as Scoreboards from "../core/Scoreboards";
 import * as ScannerIngestRepository from "../ScannerIngestRepository.server";
 import {
@@ -21,15 +19,6 @@ const CONTENT_RESOLUTION_WINDOW_DAYS = 365;
 export const action: ActionFunction = async ({ request }) => {
 	const user = requireUser();
 
-	if (
-		!Config.scannerEnabled &&
-		!isAdmin(user) &&
-		!isDev(user) &&
-		!isScannerTester(user)
-	) {
-		forbidden();
-	}
-
 	const data = await parseBody({ request, schema: ingestBodySchema });
 
 	const povUserId = user.id;
diff --git a/app/features/scanner-ingest/tests/harness.ts b/app/features/scanner-ingest/tests/harness.ts
index 6f30ed670..e6c9f9785 100644
--- a/app/features/scanner-ingest/tests/harness.ts
+++ b/app/features/scanner-ingest/tests/harness.ts
@@ -1,8 +1,6 @@
 /** Everything ingest scenario cases need: world builders (arrange), ingest wrapper (act), page-loader wrappers and row fetchers (assert). See README.md. */
 import { addHours, addMinutes, subDays, subMinutes } from "date-fns";
 import * as R from "remeda";
-import { afterAll, beforeAll } from "vitest";
-import { Config } from "~/config";
 import { backdate } from "~/db/seed/core/backdate";
 import * as SQMatchFactory from "~/db/seed/factories/SQMatchFactory";
 import * as TournamentFactory from "~/db/seed/factories/TournamentFactory";
@@ -75,29 +73,6 @@ export interface ScannedOptions extends Partial<ScannerMatch> {
 	partial?: boolean;
 }
 
-/** Forces the scanner gate open for the suite (`import.meta.env` may not carry the config's `test.env`), restoring it afterwards. Call at the top of the test file. */
-export function setupScannerGate() {
-	let original: boolean;
-	beforeAll(() => {
-		original = Config.scannerEnabled;
-		Config.scannerEnabled = true;
-	});
-	afterAll(() => {
-		Config.scannerEnabled = original;
-	});
-}
-
-/** Runs `fn` with the scanner gate closed, restoring it even on a throw. */
-export async function withScannerDisabled(fn: () => Promise<void>) {
-	const original = Config.scannerEnabled;
-	Config.scannerEnabled = false;
-	try {
-		await fn();
-	} finally {
-		Config.scannerEnabled = original;
-	}
-}
-
 /** 8 users with deterministic in-game names (`Alpha1#1111`, …) and an unreported SendouQ match between them; `conclude()` plays it out (alpha sweeps), making its maps linkable, and returns the refreshed map rows. */
 export async function sendouqWorld(
 	options: {
diff --git a/app/features/scanner-ingest/tests/ingest-scenarios.test.ts b/app/features/scanner-ingest/tests/ingest-scenarios.test.ts
index 6437c950f..722a15f9d 100644
--- a/app/features/scanner-ingest/tests/ingest-scenarios.test.ts
+++ b/app/features/scanner-ingest/tests/ingest-scenarios.test.ts
@@ -16,28 +16,12 @@ import {
 	renamed,
 	scannedGame,
 	sendouqWorld,
-	setupScannerGate,
 	tournamentMatchPage,
 	tournamentWorld,
 	WEAPONS,
-	withScannerDisabled,
 } from "./harness";
 
-setupScannerGate();
-
 describe("gating & request filtering", () => {
-	test("G1 gate closed: scanner disabled and non-privileged user → 403, nothing stored", async () => {
-		const w = await sendouqWorld();
-
-		await withScannerDisabled(async () => {
-			await expect(
-				ingest(w.bravoUsers[1]!, [w.scanned(w.maps[0]!)]),
-			).rejects.toThrow("403");
-		});
-
-		expect(await fetchIngestedMatches()).toHaveLength(0);
-	});
-
 	test("G2 non-private lobby: only X-battle matches in the request → skipped entirely", async () => {
 		const w = await sendouqWorld();
 		await w.conclude();
diff --git a/app/features/scanner/README.md b/app/features/scanner/README.md
index 2b0f2677b..7afe9129d 100644
--- a/app/features/scanner/README.md
+++ b/app/features/scanner/README.md
@@ -1,19 +1,103 @@
 # Scanner — Splatoon match-event detection
 
-Browser app (route `/scanner`, dev-only until promoted) that watches OBS
-Virtual Camera footage, VoD files, or screenshots, detects Splatoon 3 UI
-screens with OpenCV.js in a Web Worker, and parses them into events speaking
-sendou.ink ids (`ModeShort`/`StageId`/weapon ids/`Ability`). Events aggregate
-client-side into `ScannerMatch` objects (`core/scanner-match.ts`) — one
-detected game per object, every field nullable — which feed `/ingest`
-(features/scanner-ingest) and the `/vods/new` prefill. Imported from the
-emberz repo; see `MIGRATION.md` there.
+Browser app (route `/scanner`, linked from the Tools menu) that watches a
+capture card or OBS Virtual Camera while you play, or scans VoD files,
+detects Splatoon 3 UI screens with OpenCV.js in a Web Worker, and parses them
+into events speaking sendou.ink ids (`ModeShort`/`StageId`/weapon ids/`Ability`).
+Events aggregate client-side into `ScannerMatch` objects
+(`core/scanner-match.ts`) — one detected game per object, every field
+nullable — which feed `/ingest` (features/scanner-ingest), the `/vods/new`
+prefill, the match cards and the clip cutter. Imported from the emberz repo;
+see `MIGRATION.md` there.
 
-Deliberate convention exceptions (dev tool, ported wholesale): the UI is
-English-only (no i18next), `tests/node-test-compat.ts` uses a default export
-to stay a `node:test` drop-in, and the suites assert with `node:assert/strict`
-rather than the repo-wide `expect`. Keep whichever file you touch on the
-idiom it already uses — a half-migration would leave three idioms behind.
+Deliberate convention exceptions (ported wholesale): the UI is English-only
+(no i18next; the public release should flip that), `tests/node-test-compat.ts`
+uses a default export to stay a `node:test` drop-in, and the suites assert
+with `node:assert/strict` rather than the repo-wide `expect`. Keep whichever
+file you touch on the idiom it already uses — a half-migration would leave
+three idioms behind.
+
+## Product shape
+
+Anyone can capture, scan files and get clips locally; only uploading needs a
+login (`components/upload.ts` mirrors the root loader's user for the
+controllers). The landing (`components/LandingView.tsx`) is two entry cards
+(Live / File), the clip history strip and the sessions list; everything else
+is one component, `components/SessionView.tsx`, rendered identically for the
+running capture (`LiveView`), a past session (`PastSessionView`) and a
+scanned VoD (`VodView`): header, clip strip, then match cards
+(`components/MatchCard.tsx`) newest first. Views are picked by the `view`
+search param (`scanner-search-params.ts`: `live`, `session&id=`,
+`vod&name=`, `clips`, and the debug-gated `debug` / dev-only `fixtures`).
+
+- **Controllers are module singletons**, not view state: the capture
+  (`components/live-session.ts`) and a running VoD scan
+  (`components/vod-scan.ts`) are mounted above the view switch, so moving
+  between views never stops them; a capture runs until Stop (even off the
+  page), a scan until it finishes or the scanner page is left.
+  Views subscribe through `useSyncExternalStore` hooks, as they do to the
+  event feed (`components/events-feed.ts`, sessions built once per refresh),
+  the clip list (`clips-feed.ts`), the VoD list (`vods-feed.ts`) and the
+  localStorage settings (`settings.ts`: source, upload toggle, clip toggle).
+- **Sessions** are client-only and derived at render (`core/sessions.ts`):
+  live events ordered by `detectedAt`, split wherever a gap of ≥ 2 h opens,
+  keyed by the first event's `detectedAt` (the URL id). A VoD is its own
+  session keyed by file name. Live `t` is wall-clock seconds (`Date.now()`)
+  so events from different page loads share one timeline; the ring buffer
+  stamps footage the same way.
+- **Retention** (`store/events.ts`, on a throttled pass at every save):
+  whole sessions older than 30 days or beyond the newest 20 go; full-res
+  frames are kept for everyone — a misread is only reportable while the
+  frame exists — bounded by 72 h and `MAX_FRAMES`, the event staying with
+  `hasFrame: false`. Clips have their own cap and outlive session deletion.
+- **Upload** is on by default when logged in (settings toggle, persisted).
+  Live: a scoreboard closes its match and sends it, a 15 s tick retries
+  unlinked matches on a backoff (`sendou-ingest.ts`) and flushes closed
+  matches whose send was skipped; Stop sends what is left. VoD: the whole
+  scan sends once saved. Both write per-event send statuses to their own
+  store (`updateEventsSend` takes the store), so the cards' upload chip
+  (`UploadChip.tsx`) and the per-card Retry/Upload are one code path.
+- **CSV** is a normal feature: `⇩ CSV` in every session header offers
+  `Matches` (`core/csv/matches.ts`, one row per game, the rows the cards
+  render) and `Raw detections` (`core/csv/events.ts`, one row per event).
+  Column names stay English keys.
+- **Debug gate** (`use-debug.ts`: DEV/ADMIN role or `?debug=true`): the
+  image/screenshot view (`ScreenshotPage.tsx`), the dev-only fixtures view,
+  `Save frame as fixture`, `?telemetry=true`, and the `Raw detections`
+  disclosure inside a match card (the per-event cards with Inspect).
+
+## Clips
+
+Clips are real video with audio, cut in the browser. `core/clips/scoring.ts`
+is the pure, swappable scorer: only the POV player's own kills feed it
+(`ScannerMatch.kills`, off the kill feed); a streak is consecutive kills with
+no POV death between them and no pause over `STREAK_MAX_GAP_S`, cut where the
+clip would outgrow `MAX_CLIP_SECONDS`; `MIN_KILLS` (4) makes it a window,
+scored `kills² + kills / span`. Both controllers run the same
+`scoreWindows(match, deaths)` → cut → `store/clips.ts` path:
+
+- **Live** (`capture/ring-buffer.ts`): the stream's video track runs through
+  a `MediaStreamTrackProcessor` → `VideoEncoder` (hardware H.264, ~16 Mbps,
+  keyframe every 2 s) into a ring of GOPs holding the last
+  `RING_BUFFER_SECONDS`; the audio track through an `AudioEncoder` (AAC,
+  else Opus) into the same ring. Packets are stamped with the wall clock on
+  arrival. A window is cut once `windowClosed` (no kill can join and the
+  tail is captured): the GOP at or before its start through its end, muxed
+  to MP4 with mediabunny's `EncodedVideoPacketSource` — no decode. Audio is
+  the chosen source's own input (`audioInputFor`: same `groupId`, else a
+  shared label prefix); OBS Virtual Camera carries none, so its clips are
+  silent, which the source select says.
+- **VoD** (`capture/vod-clips.ts`): packets from the keyframe at or before
+  the window start are copied into a fresh MP4 (video + audio, no
+  re-encode, so a minute of 1080p takes well under a second). mediabunny's
+  `Conversion` with `trim` always transcodes; keep using the packet copy.
+- **Buckets** (`store/clips.ts`): `session` holds the running session's
+  clips (nothing evicted while you play); Stop rolls them into `history`,
+  where `MAX_HISTORY_CLIPS` (20) applies by score — download to keep. A
+  file's clips (`vod`) live for one visit and are purged on the next page
+  load; the file is on disk. Clip records carry the real `start`/`end`
+  seconds (a packet-copied clip starts at a keyframe), and a card's deaths
+  and kills get a ▶ when a clip covers their `t`.
 
 ## Commands
 
@@ -23,7 +107,7 @@ pnpm test:unit:browser                  # includes tests/logic/ — the fixture-
 pnpm scanner:report                     # accuracy table + name character error rate across fixtures
 pnpm scanner:fixtures [name-substring]  # run detectors over matching fixtures, verbose
 pnpm scanner:replay <dir> <startT> <fps> # replay ffmpeg-extracted frames through the scheduler+detectors
-pnpm scanner:scan-vod <video>           # VoD-tab scan as a CLI (ffmpeg): video in, events CSV out
+pnpm scanner:scan-vod <video>           # VoD scan as a CLI (ffmpeg): video in, events CSV out
 pnpm scanner:status-audit <events.csv>  # diff the CSV's timeline vs scoreboard D/S, rank fixture candidates
 pnpm scanner:bootstrap-atlas            # harvest labeled fixture crops into the glyph atlases
 pnpm scanner:build-glyph-atlas          # add the font-rendered charset (fonts required, see below)
@@ -45,24 +129,25 @@ sequenceDiagram
   participant W as analyzer.worker (OpenCV)
   participant TL as TimelineBuilder
   participant MB as match-builder
-  participant UI as Live/VoD tab
+  participant UI as live-session / vod-scan
   participant ING as /ingest (scanner-ingest)
   participant DB as IngestedMatch / IngestedMatchLink
   Cap->>W: frame + t (live/screenshot/seek) — VoD: worker decodes its own slice
   W->>W: scheduler dueDetectors() → gate() → parse()
   W-->>TL: DetectedEvents
-  TL-->>UI: deduped timeline (IndexedDB on Live)
+  TL-->>UI: deduped timeline (IndexedDB: events / vod-events)
   UI->>MB: buildScannerMatches(events)
   MB-->>UI: ScannerMatch[] + source events
-  UI->>ING: POST { matches } (Live: on match close / scan end, VoD: whole scan)
+  UI->>ING: POST { matches } (live: on match close / stop, VoD: once saved)
   ING->>ING: resolve context (current tournament/SendouQ activity, casts via staff roles, else content sequence ≥2)
   ING->>DB: merge-store IngestedMatch (matchHash, isSameMatch + merge, context hints)
   ING->>DB: link matches to game results → IngestedMatchLink (POV weapon → ReportedWeapon; scoreboards derived at read time)
-  Note over UI: VoD "Add VoD": ScannerMatch → slim prefill param → /vods/new
+  Note over UI: VoD "Add to VoDs": ScannerMatch → slim prefill param → /vods/new
+  Note over UI: scoreWindows(match) → ring buffer / file packet copy → clips store
 ```
 
 - `core/` is pure (mats in, events/matches out) and runs in the worker, the
-  Screenshot tab, and Node tests. No DOM/browser APIs; Node-only helpers live
+  debug view, and Node tests. No DOM/browser APIs; Node-only helpers live
   in `node/`. Pure data/type imports from `~/modules` and
   `~/features/build-analyzer/data` are fine — valibot and the app config graph
   are not (schemas live in `scanner-schemas.ts`; core only `import type`s
@@ -71,7 +156,11 @@ sequenceDiagram
   opens a match, a scoreboard closes one (claiming the last 8 min of deaths
   when the intro was missed), minimaps group per map by confirmed stage
   change and >5 min gap. An event belongs to at most one match; deaths
-  reveal enemy builds (`ability-harvest.ts`). Partial matches are fine —
+  reveal enemy builds (`ability-harvest.ts`), the personal results screen
+  (`ScoreboardOwn`, seen within `OWN_RESULTS_WINDOW_SECONDS` of a closed
+  match's scoreboard) completes the POV player's full build, and minimap
+  cards contribute everyone else's mains — so a card's Builds section
+  covers both teams, each row rendered as far as it was read. Partial matches are fine —
   scanner-ingest merges them server-side. Senders filter with
   `ingestSkipReasons`: private/unread lobby only, and no games a disconnect
   cut short (scoreless + counter left more time than the footage did, or
@@ -79,7 +168,8 @@ sequenceDiagram
   practice since it only resolves after the fact).
 - The route (`routes/scanner.tsx`) is SSR-guarded: the client tree loads via
   `React.lazy` after `useHydrated`; nothing from `core/worker/capture/store`
-  may be imported at route-module top level.
+  may be imported at route-module top level. There is no feature flag: the
+  page and `/ingest` are open to everyone (ingest still requires a login).
 - Nine detectors: `scoreboard` (results screen),
   `scoreboard-battle-log-replay` (replay-browser detail),
   `scoreboard-battle-log` (Recent Battles detail — same data sans replay
@@ -203,26 +293,28 @@ sequenceDiagram
   into an earlier read — a 1080p PNG per repeat read cost more than the
   parse once the kill feed re-read its stack twice a second. Frames no
   detector is due for skip canvas readback, and everything is counted in
-  `core/detectors/telemetry.ts` — but only when the VoD tab is opened with
-  `?telemetry=true` (nothing links there); otherwise the workers skip
-  collection and the panel stays hidden. A match's objective reads render
+  `core/detectors/telemetry.ts` — but only when a VoD is scanned with
+  `?telemetry=true` in the URL (nothing links there) by a debug user;
+  otherwise the workers skip collection and the panel stays hidden. A match's objective reads render
   as one step-line timeline
   (`~/components/ObjectiveTimeline.tsx`, shared with the match page).
-  The Live tab buffers frames sampled while the worker is busy; past the
+  The live capture buffers frames sampled while the worker is busy; past the
   buffer limit the backlog is decimated toward even time-spacing
   (`worker/frame-queue.ts`) rather than truncated oldest-first, so a
   parse stall can no longer swallow a results screen whole (the exact
   failure that cost a live match its scoreboard on 2026-08-22).
-- VoD scans (`components/VodPage.tsx`): on the WebCodecs path each worker
+- VoD scans (`components/vod-scan.ts`): on the WebCodecs path each worker
   demuxes + decodes its own contiguous slice (mediabunny in the worker — no
   frames cross the main thread). When the scheduler reports calm (no gate
   pass for a quiet period, no open match), the worker skims
   keyframe-to-keyframe (hop capped at 2.5s so short screens can't hide),
   snapping back to dense decode on any gate pass. The seek fallback drives
-  one worker and widens its stride over calm footage the same way.
+  one worker and widens its stride over calm footage the same way; its
+  metadata wait is bounded so an undecodable file errors instead of hanging.
+  A scan is all or nothing: leaving the page cancels it and nothing is saved.
 - Recognition is language-agnostic: OCR output snaps against every game
   language at once (`core/localized-entries.ts`, generated) and events carry
-  sendou ids. English display names come from `components/labels.ts`.
+  sendou ids. English display names come from `core/labels.ts`.
 - ROI coordinates live in each detector's `rois.ts`, in canonical 1920×1080
   space; every frame is normalized to that size first — black bars around the
   picture (letterbox/pillarbox, or a scene drawing the game smaller than its
@@ -299,13 +391,13 @@ detector's suite sweeps them. Every live misread should become a fixture —
 the live app's "Save fixture" button exports the byte-exact analyzed frame
 plus a prefilled `expected.json`. **Fixture ground-truth labels are
 hand-corrected by the user (the Splatoon domain authority) — treat them as
-definitive over any matcher output.** The dev-only Fixtures tab
-(`/scanner?tab=fixtures`) renders every fixture's frame beside its
+definitive over any matcher output.** The dev-only fixtures view
+(`/scanner?view=fixtures`) renders every fixture's frame beside its
 `expected.json` for that ground-truth review — player-status and
 strip-weapons cases get per-slot icon crops with the expected label under
-each icon, and Inspect re-analyzes any frame in the Screenshot tab. The `q`
+each icon, and Inspect re-analyzes any frame in the debug view (`/scanner?view=debug`). The `q`
 param narrows by case-name substring (comma = OR) and lives in the URL, so
 finished labeling work can be handed over as a reviewable link, e.g.
-`/scanner?tab=fixtures&q=gauge-overlay,ready-trough`. Fixtures are committed as plain blobs
+`/scanner?view=fixtures&q=gauge-overlay,ready-trough`. Fixtures are committed as plain blobs
 (no LFS for now); keep additions deliberate — fixture IO is isolated in
 `node/fixtures.ts` if a retreat to LFS/an external corpus is needed.
diff --git a/app/features/scanner/capture/ring-buffer.ts b/app/features/scanner/capture/ring-buffer.ts
new file mode 100644
index 000000000..6e23d4b6a
--- /dev/null
+++ b/app/features/scanner/capture/ring-buffer.ts
@@ -0,0 +1,392 @@
+/**
+ * Live clip footage: the capture stream's video track runs through a
+ * VideoEncoder (hardware H.264 where available, a keyframe every
+ * `KEYFRAME_INTERVAL_S`) into a ring of GOPs holding the last `seconds`;
+ * the audio track through an AudioEncoder into the same ring. Every packet
+ * is stamped with the wall clock as it arrives, the clock the sampler stamps
+ * detections with, so a cut asks for wall-clock seconds and gets the GOP at
+ * or before its start through the packets up to its end, muxed to MP4 with
+ * mediabunny — no decode, so a cut takes milliseconds.
+ */
+import {
+	type AudioCodec,
+	BufferTarget,
+	EncodedAudioPacketSource,
+	EncodedPacket,
+	EncodedVideoPacketSource,
+	Mp4OutputFormat,
+	Output,
+} from "mediabunny";
+
+/** ~indistinguishable from the source at 720p60 per the auto-clipper measurements */
+const VIDEO_BITRATE = 16_000_000;
+const KEYFRAME_INTERVAL_S = 2;
+const AUDIO_BITRATE = 160_000;
+/** high profile at level 5.1 covers 1080p60; the fallbacks trade profile for reach */
+const VIDEO_CODECS = ["avc1.640033", "avc1.4d0033", "avc1.42e033"];
+/** AAC is the MP4-native choice; Chromium encodes it on most but not all platforms */
+const AUDIO_CODECS: { codec: string; container: AudioCodec }[] = [
+	{ codec: "mp4a.40.2", container: "aac" },
+	{ codec: "opus", container: "opus" },
+];
+const THUMBNAIL_WIDTH = 320;
+const THUMBNAIL_HEIGHT = 180;
+
+interface Stamped {
+	packet: EncodedPacket;
+	/** wall-clock seconds the frame/sample arrived at */
+	wall: number;
+}
+
+interface Gop {
+	packets: Stamped[];
+	/** JPEG data URL of the keyframe, for the clip card */
+	thumbnail?: string;
+}
+
+interface TrackProcessor<T> {
+	readable: ReadableStream<T>;
+}
+
+/** The track processor is not in TypeScript's DOM lib; it exists in Chromium. */
+const TrackProcessor = (
+	globalThis as unknown as {
+		MediaStreamTrackProcessor?: new (init: {
+			track: MediaStreamTrack;
+		}) => TrackProcessor<VideoFrame | AudioData>;
+	}
+).MediaStreamTrackProcessor;
+
+export interface RingBufferClip {
+	blob: Blob;
+	/** wall-clock seconds the clip really starts at (the keyframe) */
+	start: number;
+	end: number;
+	hasAudio: boolean;
+	thumbnail?: string;
+}
+
+/** Whether this browser can keep a clip ring buffer at all. */
+export function supportsRingBuffer(): boolean {
+	return (
+		TrackProcessor !== undefined &&
+		typeof VideoEncoder !== "undefined" &&
+		typeof VideoEncoder.isConfigSupported === "function"
+	);
+}
+
+export class ClipRingBuffer {
+	readonly #seconds: number;
+	readonly #gops: Gop[] = [];
+	readonly #audio: Stamped[] = [];
+	#videoConfig: VideoDecoderConfig | undefined;
+	#audioConfig: AudioDecoderConfig | undefined;
+	#audioContainerCodec: AudioCodec | null = null;
+	#videoEncoder: VideoEncoder | null = null;
+	#audioEncoder: AudioEncoder | null = null;
+	#readers: ReadableStreamDefaultReader<VideoFrame | AudioData>[] = [];
+	#stopped = false;
+	#lastKeyframeAt = Number.NEGATIVE_INFINITY;
+
+	constructor(seconds: number) {
+		this.#seconds = seconds;
+	}
+
+	/** Starts encoding both tracks; resolves once the video encoder is configured. */
+	async start(stream: MediaStream): Promise<void> {
+		const videoTrack = stream.getVideoTracks()[0];
+		if (!videoTrack || !TrackProcessor) throw new Error("no video track");
+		const settings = videoTrack.getSettings();
+		const width = settings.width ?? 1920;
+		const height = settings.height ?? 1080;
+		const framerate = settings.frameRate ?? 60;
+		const codec = await firstSupportedVideoCodec(width, height, framerate);
+		if (!codec) throw new Error("no H.264 encoder available for clips");
+
+		this.#videoEncoder = new VideoEncoder({
+			output: (chunk, meta) => this.#onVideoChunk(chunk, meta),
+			error: () => this.#fail(),
+		});
+		this.#videoEncoder.configure({
+			codec,
+			width,
+			height,
+			bitrate: VIDEO_BITRATE,
+			framerate,
+			latencyMode: "realtime",
+			hardwareAcceleration: "prefer-hardware",
+		});
+		void this.#pumpVideo(videoTrack);
+
+		const audioTrack = stream.getAudioTracks()[0];
+		if (audioTrack && typeof AudioEncoder !== "undefined") {
+			void this.#startAudio(audioTrack);
+		}
+	}
+
+	/**
+	 * The footage between two wall-clock seconds as an MP4, from the keyframe
+	 * at or before `start`. Null when the ring holds nothing for the range.
+	 */
+	async cut(start: number, end: number): Promise<RingBufferClip | null> {
+		const gopIndex = this.#gops.findLastIndex(
+			(gop) => gop.packets[0]!.wall <= start,
+		);
+		const gops = this.#gops.slice(Math.max(0, gopIndex));
+		const video = gops
+			.flatMap((gop) => gop.packets)
+			.filter((stamped) => stamped.wall <= end);
+		const first = video[0];
+		if (!first || !this.#videoConfig) return null;
+		const clipStart = first.wall;
+		const clipEnd = video.at(-1)!.wall;
+		const thumbnail =
+			gops.findLast((gop) => gop.thumbnail && gop.packets[0]!.wall <= end)
+				?.thumbnail ?? gops[0]?.thumbnail;
+
+		const format = new Mp4OutputFormat({ fastStart: "in-memory" });
+		const target = new BufferTarget();
+		const output = new Output({ format, target });
+		const videoSource = new EncodedVideoPacketSource("avc");
+		output.addVideoTrack(videoSource);
+		const audio = this.#audioContainerCodec
+			? this.#audio.filter(
+					(stamped) => stamped.wall >= clipStart && stamped.wall <= clipEnd,
+				)
+			: [];
+		const audioSource =
+			audio.length > 0 && this.#audioContainerCodec
+				? new EncodedAudioPacketSource(this.#audioContainerCodec)
+				: null;
+		if (audioSource) output.addAudioTrack(audioSource);
+		await output.start();
+		try {
+			const base = first.packet.timestamp;
+			let meta: { decoderConfig: VideoDecoderConfig } | undefined = {
+				decoderConfig: this.#videoConfig,
+			};
+			for (const { packet } of video) {
+				await videoSource.add(
+					packet.clone({ timestamp: packet.timestamp - base }),
+					meta,
+				);
+				meta = undefined;
+			}
+			videoSource.close();
+			if (audioSource) {
+				// audio timestamps live on the audio track's own clock: align the
+				// first sample to where its arrival sits against the clip's first frame
+				const firstAudio = audio[0]!;
+				const audioBase =
+					firstAudio.packet.timestamp - (firstAudio.wall - clipStart);
+				let audioMeta: { decoderConfig?: AudioDecoderConfig } | undefined = {
+					decoderConfig: this.#audioConfig,
+				};
+				for (const { packet } of audio) {
+					const timestamp = packet.timestamp - audioBase;
+					if (timestamp < 0) continue;
+					await audioSource.add(packet.clone({ timestamp }), audioMeta);
+					audioMeta = undefined;
+				}
+				audioSource.close();
+			}
+			await output.finalize();
+		} catch (error) {
+			await output.cancel();
+			throw error;
+		}
+		return {
+			blob: new Blob([target.buffer!], { type: format.mimeType }),
+			start: clipStart,
+			end: clipEnd,
+			hasAudio: audioSource !== null,
+			thumbnail,
+		};
+	}
+
+	stop(): void {
+		this.#stopped = true;
+		for (const reader of this.#readers) void reader.cancel().catch(() => {});
+		this.#readers = [];
+		this.#videoEncoder?.close();
+		this.#videoEncoder = null;
+		this.#audioEncoder?.close();
+		this.#audioEncoder = null;
+		this.#gops.length = 0;
+		this.#audio.length = 0;
+	}
+
+	async #pumpVideo(track: MediaStreamTrack): Promise<void> {
+		const reader = new TrackProcessor!({ track }).readable.getReader();
+		this.#readers.push(reader);
+		while (!this.#stopped) {
+			const { value, done } = await reader.read();
+			if (done || !value) break;
+			const frame = value as VideoFrame;
+			const encoder = this.#videoEncoder;
+			if (encoder?.state !== "configured") {
+				frame.close();
+				continue;
+			}
+			// back-pressure: a stalled encoder drops frames rather than queueing memory
+			if (encoder.encodeQueueSize > 4) {
+				frame.close();
+				continue;
+			}
+			const now = Date.now() / 1000;
+			const keyFrame = now - this.#lastKeyframeAt >= KEYFRAME_INTERVAL_S;
+			if (keyFrame) {
+				this.#lastKeyframeAt = now;
+				void this.#thumbnail(frame).then((thumbnail) => {
+					const gop = this.#gops.at(-1);
+					if (gop && !gop.thumbnail) gop.thumbnail = thumbnail;
+				});
+			}
+			encoder.encode(frame, { keyFrame });
+			frame.close();
+		}
+	}
+
+	async #startAudio(track: MediaStreamTrack): Promise<void> {
+		const reader = new TrackProcessor!({ track }).readable.getReader();
+		this.#readers.push(reader);
+		let configured = false;
+		while (!this.#stopped) {
+			const { value, done } = await reader.read();
+			if (done || !value) break;
+			const data = value as AudioData;
+			if (!configured) {
+				configured = true;
+				const choice = await firstSupportedAudioCodec(
+					data.numberOfChannels,
+					data.sampleRate,
+				);
+				if (!choice || this.#stopped) {
+					data.close();
+					break;
+				}
+				this.#audioContainerCodec = choice.container;
+				this.#audioEncoder = new AudioEncoder({
+					output: (chunk, meta) => this.#onAudioChunk(chunk, meta),
+					error: () => {
+						this.#audioEncoder = null;
+					},
+				});
+				this.#audioEncoder.configure({
+					codec: choice.codec,
+					numberOfChannels: data.numberOfChannels,
+					sampleRate: data.sampleRate,
+					bitrate: AUDIO_BITRATE,
+				});
+			}
+			const encoder = this.#audioEncoder;
+			if (encoder?.state === "configured" && encoder.encodeQueueSize < 32) {
+				encoder.encode(data);
+			}
+			data.close();
+		}
+	}
+
+	#onVideoChunk(
+		chunk: EncodedVideoChunk,
+		meta: EncodedVideoChunkMetadata | undefined,
+	): void {
+		if (meta?.decoderConfig) this.#videoConfig = meta.decoderConfig;
+		const stamped = {
+			packet: EncodedPacket.fromEncodedChunk(chunk),
+			wall: Date.now() / 1000,
+		};
+		if (chunk.type === "key" || this.#gops.length === 0) {
+			this.#gops.push({ packets: [stamped] });
+			this.#evict(stamped.wall);
+		} else {
+			this.#gops.at(-1)!.packets.push(stamped);
+		}
+	}
+
+	#onAudioChunk(
+		chunk: EncodedAudioChunk,
+		meta: EncodedAudioChunkMetadata | undefined,
+	): void {
+		if (meta?.decoderConfig) this.#audioConfig = meta.decoderConfig;
+		this.#audio.push({
+			packet: EncodedPacket.fromEncodedChunk(chunk),
+			wall: Date.now() / 1000,
+		});
+	}
+
+	/** Drops whole GOPs (and audio) older than the window, always keeping the newest two GOPs. */
+	#evict(now: number): void {
+		const horizon = now - this.#seconds;
+		while (
+			this.#gops.length > 2 &&
+			this.#gops[1]!.packets[0]!.wall <= horizon
+		) {
+			this.#gops.shift();
+		}
+		const audioHorizon = this.#gops[0]?.packets[0]?.wall ?? horizon;
+		while (this.#audio.length > 0 && this.#audio[0]!.wall < audioHorizon) {
+			this.#audio.shift();
+		}
+	}
+
+	async #thumbnail(frame: VideoFrame): Promise<string> {
+		const bitmap = await createImageBitmap(frame, {
+			resizeWidth: THUMBNAIL_WIDTH,
+			resizeHeight: THUMBNAIL_HEIGHT,
+		});
+		const canvas = document.createElement("canvas");
+		canvas.width = THUMBNAIL_WIDTH;
+		canvas.height = THUMBNAIL_HEIGHT;
+		canvas.getContext("2d")!.drawImage(bitmap, 0, 0);
+		bitmap.close();
+		return canvas.toDataURL("image/jpeg", 0.7);
+	}
+
+	#fail(): void {
+		this.#videoEncoder = null;
+	}
+}
+
+async function firstSupportedVideoCodec(
+	width: number,
+	height: number,
+	framerate: number,
+): Promise<string | null> {
+	for (const codec of VIDEO_CODECS) {
+		try {
+			const { supported } = await VideoEncoder.isConfigSupported({
+				codec,
+				width,
+				height,
+				bitrate: VIDEO_BITRATE,
+				framerate,
+				latencyMode: "realtime",
+			});
+			if (supported) return codec;
+		} catch {
+			// an unknown codec string throws rather than reporting unsupported
+		}
+	}
+	return null;
+}
+
+async function firstSupportedAudioCodec(
+	numberOfChannels: number,
+	sampleRate: number,
+): Promise<{ codec: string; container: AudioCodec } | null> {
+	for (const choice of AUDIO_CODECS) {
+		try {
+			const { supported } = await AudioEncoder.isConfigSupported({
+				codec: choice.codec,
+				numberOfChannels,
+				sampleRate,
+				bitrate: AUDIO_BITRATE,
+			});
+			if (supported) return choice;
+		} catch {
+			// same as the video probe
+		}
+	}
+	return null;
+}
diff --git a/app/features/scanner/capture/sampler.ts b/app/features/scanner/capture/sampler.ts
index cfd439227..43caeb404 100644
--- a/app/features/scanner/capture/sampler.ts
+++ b/app/features/scanner/capture/sampler.ts
@@ -1,24 +1,143 @@
 /**
- * Capture layer: OBS Virtual Camera in via getUserMedia, frames out as
- * ImageBitmaps at a low sample rate. Downstream sees only (bitmap, t).
+ * Capture layer: a video input (capture card, OBS Virtual Camera) in via
+ * getUserMedia, frames out as ImageBitmaps at a low sample rate. Downstream
+ * sees only (bitmap, t), with t on the wall clock in seconds so events from
+ * different page loads share one timeline.
  */
 
-export async function openVirtualCamera(
-	deviceId?: string,
-): Promise<MediaStream> {
-	return navigator.mediaDevices.getUserMedia({
-		video: {
-			deviceId: deviceId ? { exact: deviceId } : undefined,
-			width: { ideal: 1920 },
-			height: { ideal: 1080 },
-		},
-		audio: false,
-	});
+export interface MediaInputs {
+	video: MediaDeviceInfo[];
+	audio: MediaDeviceInfo[];
 }
 
-export async function listVideoInputs(): Promise<MediaDeviceInfo[]> {
+/** Every video and audio input the browser exposes (labels need a granted permission). */
+export async function listMediaInputs(): Promise<MediaInputs> {
 	const devices = await navigator.mediaDevices.enumerateDevices();
-	return devices.filter((d) => d.kind === "videoinput");
+	return {
+		video: devices.filter((d) => d.kind === "videoinput"),
+		audio: devices.filter((d) => d.kind === "audioinput"),
+	};
+}
+
+/**
+ * Whether the browser has revealed the inputs: without granted camera and
+ * microphone permissions it lists anonymous placeholders (empty ids and
+ * labels) — a capture card's audio side is a microphone-class device, so
+ * the camera permission alone leaves it unmatchable.
+ */
+export function inputsRevealed(inputs: MediaInputs): boolean {
+	return (
+		inputs.video.some((device) => device.deviceId !== "") &&
+		inputs.audio.every((device) => device.deviceId !== "")
+	);
+}
+
+/**
+ * Asks for camera and microphone permission (opening and closing the
+ * defaults) so the next enumeration carries ids and labels; a refused
+ * microphone still reveals the cameras. False when the camera is declined.
+ */
+export async function requestInputAccess(): Promise<boolean> {
+	for (const constraints of [{ video: true, audio: true }, { video: true }]) {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia(constraints);
+			for (const track of stream.getTracks()) track.stop();
+			return true;
+		} catch {
+			// the next attempt asks for less
+		}
+	}
+	return false;
+}
+
+/** Whether a video input is OBS's virtual camera, which carries no audio. */
+export function isVirtualCamera(device: Pick<MediaDeviceInfo, "label">) {
+	return /\bOBS\b/i.test(device.label);
+}
+
+/**
+ * The audio input that belongs to a video input: the same physical device
+ * (shared `groupId`), else one whose label starts the same way (a capture
+ * card's audio and video interfaces). Null for a virtual camera or no match.
+ */
+export function audioInputFor(
+	video: MediaDeviceInfo,
+	audioInputs: readonly MediaDeviceInfo[],
+): MediaDeviceInfo | null {
+	if (isVirtualCamera(video)) return null;
+	const byGroup = audioInputs.find(
+		(audio) => audio.groupId && audio.groupId === video.groupId,
+	);
+	if (byGroup) return byGroup;
+	const prefix = video.label.split(/[\s(]/)[0]?.toLowerCase();
+	if (!prefix || prefix.length < 3) return null;
+	return (
+		audioInputs.find((audio) => audio.label.toLowerCase().startsWith(prefix)) ??
+		null
+	);
+}
+
+export interface OpenedCapture {
+	stream: MediaStream;
+	/** why the audio input could not be opened (another app holding it, say); null when audio is on or none was asked for */
+	audioError: string | null;
+}
+
+/**
+ * Opens the source: 1080p video from `videoDeviceId` (the default camera when
+ * empty) plus raw audio from `audioDeviceId` when given. A refused or busy
+ * audio input falls back to video only — clips are silent rather than absent
+ * — with the failure reported so the header can say why.
+ */
+export async function openCapture({
+	videoDeviceId,
+	audioDeviceId,
+}: {
+	videoDeviceId: string;
+	audioDeviceId: string | null;
+}): Promise<OpenedCapture> {
+	const video: MediaTrackConstraints = {
+		deviceId: videoDeviceId ? { exact: videoDeviceId } : undefined,
+		width: { ideal: 1920 },
+		height: { ideal: 1080 },
+	};
+	let audioError: string | null = null;
+	if (audioDeviceId) {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({
+				video,
+				audio: {
+					deviceId: { exact: audioDeviceId },
+					echoCancellation: false,
+					noiseSuppression: false,
+					autoGainControl: false,
+				},
+			});
+			return { stream, audioError: null };
+		} catch (error) {
+			audioError = audioErrorText(error);
+		}
+	}
+	const stream = await navigator.mediaDevices.getUserMedia({
+		video,
+		audio: false,
+	});
+	return { stream, audioError };
+}
+
+function audioErrorText(error: unknown): string {
+	if (error instanceof DOMException) {
+		switch (error.name) {
+			case "NotReadableError":
+				return "the audio input is in use by another app";
+			case "NotAllowedError":
+				return "microphone access was denied";
+			case "OverconstrainedError":
+			case "NotFoundError":
+				return "the audio input is no longer available";
+		}
+	}
+	return error instanceof Error ? error.message : String(error);
 }
 
 export type FrameHandler = (bitmap: ImageBitmap, t: number) => void;
@@ -27,9 +146,8 @@ export type FrameHandler = (bitmap: ImageBitmap, t: number) => void;
  * Samples frames from a playing video element at ~fps. The clock is a
  * setInterval in a dedicated worker (ticker.worker.ts): rAF and
  * requestVideoFrameCallback pause in hidden tabs, but worker timers keep
- * firing, so capture continues in another tab. Timestamps come from
- * performance.now() (monotonic, which the merge windows rely on) rather than
- * mediaTime, which Firefox never advances for MediaStream-backed videos.
+ * firing, so capture continues in another tab. Timestamps are wall-clock
+ * seconds (Date.now), which the ring buffer stamps its footage with too.
  * Returns a stop function.
  */
 export function startSampler(
@@ -53,7 +171,7 @@ export function startSampler(
 				bitmap.close();
 				return;
 			}
-			onFrame(bitmap, performance.now() / 1000);
+			onFrame(bitmap, Date.now() / 1000);
 		} catch {
 			// video not ready — skip this frame
 		} finally {
diff --git a/app/features/scanner/capture/vod-clips.ts b/app/features/scanner/capture/vod-clips.ts
new file mode 100644
index 000000000..d724335d3
--- /dev/null
+++ b/app/features/scanner/capture/vod-clips.ts
@@ -0,0 +1,167 @@
+/**
+ * Clip export off a VoD file: the packets from the keyframe at or before
+ * `start` up to `end` are copied into a fresh MP4 (video + audio, no decode
+ * or re-encode, so a minute of 1080p takes well under a second). A clip can
+ * only start at a keyframe, so it may begin up to a GOP early. `maxSeconds`
+ * caps the requested range, not the keyframe lead-in: measuring it from the
+ * keyframe would trim the end — the last kill and its tail — off a long
+ * streak in a long-GOP recording.
+ */
+import {
+	ALL_FORMATS,
+	BlobSource,
+	BufferTarget,
+	EncodedAudioPacketSource,
+	EncodedPacketSink,
+	EncodedVideoPacketSource,
+	Input,
+	type InputAudioTrack,
+	Mp4OutputFormat,
+	Output,
+	VideoSampleSink,
+} from "mediabunny";
+
+const THUMBNAIL_WIDTH = 320;
+const THUMBNAIL_HEIGHT = 180;
+
+export interface ExtractedClip {
+	blob: Blob;
+	/** seconds into the source the clip really starts at (the keyframe) */
+	start: number;
+	/** seconds into the source the clip really ends at */
+	end: number;
+	hasAudio: boolean;
+}
+
+export async function extractVodClip(
+	file: File,
+	{
+		start,
+		end,
+		maxSeconds,
+	}: { start: number; end: number; maxSeconds: number },
+): Promise<ExtractedClip> {
+	const input = new Input({
+		formats: ALL_FORMATS,
+		source: new BlobSource(file),
+	});
+	try {
+		const videoTrack = await input.getPrimaryVideoTrack();
+		const videoCodec = videoTrack?.codec;
+		if (!videoTrack || !videoCodec) throw new Error("no video track");
+		const format = new Mp4OutputFormat({ fastStart: "in-memory" });
+		if (!format.getSupportedVideoCodecs().includes(videoCodec)) {
+			throw new Error(`${videoCodec} video cannot be clipped into an MP4`);
+		}
+		const videoPackets = new EncodedPacketSink(videoTrack);
+		const firstKey =
+			(await videoPackets.getKeyPacket(start, { verifyKeyPackets: true })) ??
+			(await videoPackets.getFirstPacket({ verifyKeyPackets: true }));
+		if (!firstKey) throw new Error("no video packets");
+		const clipStart = firstKey.timestamp;
+		const clipEnd = Math.min(end, start + maxSeconds);
+
+		const audioTrack = await input.getPrimaryAudioTrack();
+		const audioCodec = audioTrack?.codec;
+		const audioSource =
+			audioTrack &&
+			audioCodec &&
+			format.getSupportedAudioCodecs().includes(audioCodec)
+				? new EncodedAudioPacketSource(audioCodec)
+				: null;
+
+		const target = new BufferTarget();
+		const output = new Output({ format, target });
+		const videoSource = new EncodedVideoPacketSource(videoCodec);
+		output.addVideoTrack(videoSource, { rotation: videoTrack.rotation });
+		if (audioSource) output.addAudioTrack(audioSource);
+		await output.start();
+		try {
+			const videoMeta = {
+				decoderConfig: (await videoTrack.getDecoderConfig()) ?? undefined,
+			};
+			for await (const packet of videoPackets.packets(firstKey, undefined, {
+				verifyKeyPackets: true,
+			})) {
+				if (packet.timestamp >= clipEnd) break;
+				const timestamp = packet.timestamp - clipStart;
+				// an open GOP's leading frames present before the keyframe they follow
+				if (timestamp < 0) continue;
+				await videoSource.add(packet.clone({ timestamp }), videoMeta);
+			}
+			videoSource.close();
+			if (audioSource) {
+				await copyAudio(audioTrack!, audioSource, clipStart, clipEnd);
+			}
+			await output.finalize();
+		} catch (error) {
+			await output.cancel();
+			throw error;
+		}
+		return {
+			blob: new Blob([target.buffer!], { type: format.mimeType }),
+			start: clipStart,
+			end: clipEnd,
+			hasAudio: audioSource !== null,
+		};
+	} finally {
+		input.dispose();
+	}
+}
+
+async function copyAudio(
+	track: InputAudioTrack,
+	source: EncodedAudioPacketSource,
+	clipStart: number,
+	clipEnd: number,
+): Promise<void> {
+	const packets = new EncodedPacketSink(track);
+	const meta = { decoderConfig: (await track.getDecoderConfig()) ?? undefined };
+	const first =
+		(await packets.getPacket(clipStart)) ?? (await packets.getFirstPacket());
+	if (first) {
+		for await (const packet of packets.packets(first)) {
+			if (packet.timestamp >= clipEnd) break;
+			const timestamp = packet.timestamp - clipStart;
+			if (timestamp < 0) continue;
+			await source.add(packet.clone({ timestamp }), meta);
+		}
+	}
+	source.close();
+}
+
+/** A small JPEG data URL of the frame at `t` seconds, for a clip card; null when the file can't be decoded there. */
+export async function vodFrameThumbnail(
+	file: File,
+	t: number,
+): Promise<string | null> {
+	const input = new Input({
+		formats: ALL_FORMATS,
+		source: new BlobSource(file),
+	});
+	try {
+		const track = await input.getPrimaryVideoTrack();
+		if (!track || !(await track.canDecode())) return null;
+		const sample = await new VideoSampleSink(track).getSample(t);
+		if (!sample) return null;
+		try {
+			const canvas = document.createElement("canvas");
+			canvas.width = THUMBNAIL_WIDTH;
+			canvas.height = THUMBNAIL_HEIGHT;
+			sample.draw(
+				canvas.getContext("2d")!,
+				0,
+				0,
+				THUMBNAIL_WIDTH,
+				THUMBNAIL_HEIGHT,
+			);
+			return canvas.toDataURL("image/jpeg", 0.7);
+		} finally {
+			sample.close();
+		}
+	} catch {
+		return null;
+	} finally {
+		input.dispose();
+	}
+}
diff --git a/app/features/scanner/capture/vod-frames.ts b/app/features/scanner/capture/vod-frames.ts
index 66e8d7796..683492ef0 100644
--- a/app/features/scanner/capture/vod-frames.ts
+++ b/app/features/scanner/capture/vod-frames.ts
@@ -61,18 +61,38 @@ async function* seekFrames(
 	}
 }
 
+/**
+ * An undecodable file (wrong container, not a video at all) can fire neither
+ * `loadedmetadata` nor `error`, so the wait is bounded.
+ */
+const METADATA_TIMEOUT_MS = 15_000;
+
 function loadMetadata(video: HTMLVideoElement): Promise<void> {
 	return new Promise((resolve, reject) => {
 		if (video.readyState >= HTMLMediaElement.HAVE_METADATA) return resolve();
-		video.addEventListener("loadedmetadata", () => resolve(), { once: true });
+		const fail = () =>
+			reject(
+				new Error(video.error?.message || "cannot decode this file as video"),
+			);
+		const timer = setTimeout(fail, METADATA_TIMEOUT_MS);
 		video.addEventListener(
-			"error",
-			() =>
-				reject(
-					new Error(video.error?.message || "cannot decode this file as video"),
-				),
+			"loadedmetadata",
+			() => {
+				clearTimeout(timer);
+				resolve();
+			},
 			{ once: true },
 		);
+		for (const type of ["error", "emptied", "stalled"]) {
+			video.addEventListener(
+				type,
+				() => {
+					clearTimeout(timer);
+					fail();
+				},
+				{ once: true },
+			);
+		}
 	});
 }
 
diff --git a/app/features/scanner/components/ClipDialog.module.css b/app/features/scanner/components/ClipDialog.module.css
new file mode 100644
index 000000000..95b9bf84b
--- /dev/null
+++ b/app/features/scanner/components/ClipDialog.module.css
@@ -0,0 +1,32 @@
+/* as wide as the screen allows while the 16:9 video still fits under the dialog's height cap */
+.dialog {
+	width: min(1600px, calc(100vw - 2 * var(--s-4)), calc(65dvh * 16 / 9));
+	max-width: none;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-3);
+}
+
+.video {
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: #000;
+	border-radius: var(--radius-box);
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-2);
+}
+
+.meta {
+	margin-inline-end: auto;
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+	font-variant-numeric: tabular-nums;
+}
diff --git a/app/features/scanner/components/ClipDialog.tsx b/app/features/scanner/components/ClipDialog.tsx
new file mode 100644
index 000000000..a39830525
--- /dev/null
+++ b/app/features/scanner/components/ClipDialog.tsx
@@ -0,0 +1,115 @@
+/** Plays a clip off its stored blob, with download and delete beside it. */
+import { Download, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { LinkButton, SendouButton } from "~/components/elements/Button";
+import { SendouDialog } from "~/components/elements/Dialog";
+import { FormWithConfirm } from "~/components/FormWithConfirm";
+import { formatPosition } from "../core/format";
+import { modeLabel, stageLabel } from "../core/labels";
+import { deleteClip, loadClipBlob, type ScannerClip } from "../store/clips";
+import styles from "./ClipDialog.module.css";
+import { refreshClips } from "./clips-feed";
+
+export function ClipDialog({
+	clip,
+	onClose,
+}: {
+	clip: ScannerClip;
+	onClose: () => void;
+}) {
+	const url = useClipUrl(clip.id);
+	const where = [modeLabel(clip.mode), stageLabel(clip.stage)]
+		.filter(Boolean)
+		.join(" · ");
+
+	return (
+		<SendouDialog
+			isDismissable
+			onClose={onClose}
+			className={styles.dialog}
+			heading={`${clip.kills} splats${where ? ` · ${where}` : ""}`}
+		>
+			<div className={styles.body}>
+				{url ? (
+					// biome-ignore lint/a11y/useMediaCaption: game footage has no captions
+					<video
+						className={styles.video}
+						src={url}
+						controls
+						autoPlay
+						playsInline
+					/>
+				) : (
+					<div className={styles.video} />
+				)}
+				<div className={styles.actions}>
+					<span className={styles.meta}>
+						{formatPosition(clip.end - clip.start)}
+						{clip.hasAudio ? null : " · no audio"}
+					</span>
+					{url ? (
+						<LinkButton
+							to={url}
+							isExternal
+							size="small"
+							variant="outlined"
+							icon={<Download />}
+							onClick={(e) => {
+								// a plain anchor with `download` saves instead of navigating
+								e.preventDefault();
+								const a = document.createElement("a");
+								a.href = url;
+								a.download = clipFileName(clip);
+								a.click();
+							}}
+						>
+							Download
+						</LinkButton>
+					) : null}
+					<FormWithConfirm
+						dialogHeading="Delete this clip?"
+						onConfirm={() => {
+							void deleteClip(clip.id).then(() => {
+								void refreshClips();
+								onClose();
+							});
+						}}
+					>
+						<SendouButton variant="destructive" size="small" icon={<Trash2 />}>
+							Delete
+						</SendouButton>
+					</FormWithConfirm>
+				</div>
+			</div>
+		</SendouDialog>
+	);
+}
+
+/** The clip's blob as an object URL, released when the dialog goes away. */
+function useClipUrl(id: number): string | null {
+	const [url, setUrl] = useState<string | null>(null);
+	useEffect(() => {
+		let objectUrl: string | null = null;
+		let stale = false;
+		void loadClipBlob(id).then((blob) => {
+			if (stale || !blob) return;
+			objectUrl = URL.createObjectURL(blob);
+			setUrl(objectUrl);
+		});
+		return () => {
+			stale = true;
+			if (objectUrl) URL.revokeObjectURL(objectUrl);
+			setUrl(null);
+		};
+	}, [id]);
+	return url;
+}
+
+function clipFileName(clip: ScannerClip): string {
+	const source =
+		clip.source.kind === "vod"
+			? clip.source.name.replace(/\.[^.]+$/, "")
+			: new Date(clip.createdAt).toISOString().slice(0, 10);
+	const at = formatPosition(clip.t).replaceAll(":", "-");
+	return `${source}-${at}-${clip.kills}-splats.mp4`;
+}
diff --git a/app/features/scanner/components/ClipStrip.module.css b/app/features/scanner/components/ClipStrip.module.css
new file mode 100644
index 000000000..bcbb41173
--- /dev/null
+++ b/app/features/scanner/components/ClipStrip.module.css
@@ -0,0 +1,119 @@
+.strip {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+}
+
+.titleRow {
+	display: flex;
+	align-items: baseline;
+	gap: var(--s-2);
+}
+
+.title {
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
+}
+
+.count {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+	font-variant-numeric: tabular-nums;
+}
+
+.seeAll {
+	margin-inline-start: auto;
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+}
+
+/* the scroll box would clip a tile's focus/hover outline, so it gets room the margin takes back */
+.tiles {
+	--outline-room: 3px;
+
+	display: flex;
+	gap: var(--s-2-5);
+	overflow-x: auto;
+	padding: var(--outline-room) var(--outline-room) var(--s-1);
+	margin: calc(-1 * var(--outline-room)) calc(-1 * var(--outline-room)) 0;
+	scrollbar-width: thin;
+}
+
+.tile {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+	flex: 0 0 auto;
+	width: 148px;
+	padding: 0;
+	border: none;
+	background: none;
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+	border-radius: var(--radius-box);
+
+	&:hover .thumb,
+	&:focus-visible .thumb {
+		outline: 2px solid var(--color-text-accent);
+		outline-offset: 1px;
+	}
+
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.thumb {
+	position: relative;
+	display: block;
+	aspect-ratio: 16 / 9;
+	border-radius: var(--radius-box);
+	background: #000 center / cover no-repeat;
+	overflow: hidden;
+}
+
+.play {
+	position: absolute;
+	inset-block-start: var(--s-1-5);
+	inset-inline-start: var(--s-1-5);
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1);
+	padding: var(--s-0-5) var(--s-2);
+	border-radius: var(--radius-full);
+	background: rgb(0 0 0 / 0.65);
+	color: #fff;
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+}
+
+.length {
+	position: absolute;
+	inset-block-end: var(--s-1-5);
+	inset-inline-end: var(--s-1-5);
+	padding: 0 var(--s-1-5);
+	border-radius: var(--radius-selector);
+	background: rgb(0 0 0 / 0.65);
+	color: #fff;
+	font-size: var(--font-3xs);
+	font-variant-numeric: tabular-nums;
+}
+
+.where {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.source {
+	font-size: var(--font-3xs);
+	color: var(--color-text-high);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
diff --git a/app/features/scanner/components/ClipStrip.tsx b/app/features/scanner/components/ClipStrip.tsx
new file mode 100644
index 000000000..1bea206ce
--- /dev/null
+++ b/app/features/scanner/components/ClipStrip.tsx
@@ -0,0 +1,104 @@
+/**
+ * A row of clip tiles (thumbnail, kill count, where it came from) with a
+ * title and count, as shown on the landing, a session and a VoD. Tiles open
+ * the clip dialog through `onPlay`.
+ */
+import { Play } from "lucide-react";
+import { Link } from "react-router";
+import { formatPosition } from "../core/format";
+import { modeLabel, stageLabel } from "../core/labels";
+import type { ScannerClip } from "../store/clips";
+import styles from "./ClipStrip.module.css";
+import { useEventDateTimeFormatter } from "./format";
+
+export function ClipStrip({
+	title,
+	count,
+	clips,
+	onPlay,
+	seeAllHref,
+	sourceLabel,
+}: {
+	title: string;
+	/** `17 / 20` next to the title; omitted = the clip count */
+	count?: string;
+	/** best first */
+	clips: readonly ScannerClip[];
+	onPlay: (clip: ScannerClip) => void;
+	seeAllHref?: string;
+	/** the tile's bottom line; default: when it was made */
+	sourceLabel?: (clip: ScannerClip) => string;
+}) {
+	if (clips.length === 0) return null;
+	return (
+		<section className={styles.strip}>
+			<div className={styles.titleRow}>
+				<span className={styles.title}>{title}</span>
+				<span className={styles.count}>{count ?? clips.length}</span>
+				{seeAllHref ? (
+					<Link
+						to={seeAllHref}
+						className={styles.seeAll}
+						defaultShouldRevalidate={false}
+					>
+						See all →
+					</Link>
+				) : null}
+			</div>
+			<div className={styles.tiles}>
+				{clips.map((clip) => (
+					<ClipTile
+						key={clip.id}
+						clip={clip}
+						onPlay={onPlay}
+						sourceLabel={sourceLabel}
+					/>
+				))}
+			</div>
+		</section>
+	);
+}
+
+function ClipTile({
+	clip,
+	onPlay,
+	sourceLabel,
+}: {
+	clip: ScannerClip;
+	onPlay: (clip: ScannerClip) => void;
+	sourceLabel?: (clip: ScannerClip) => string;
+}) {
+	const formatDate = useEventDateTimeFormatter();
+	const where = [modeLabel(clip.mode), stageLabel(clip.stage)]
+		.filter(Boolean)
+		.join(" · ");
+	return (
+		<button
+			type="button"
+			className={styles.tile}
+			onClick={() => onPlay(clip)}
+			aria-label={`Play clip: ${clip.kills} splats${where ? ` on ${where}` : ""}`}
+		>
+			<span
+				className={styles.thumb}
+				style={
+					clip.thumbnail
+						? { backgroundImage: `url(${clip.thumbnail})` }
+						: undefined
+				}
+			>
+				<span className={styles.play}>
+					<Play size={14} aria-hidden />
+					{clip.kills}k
+				</span>
+				<span className={styles.length}>
+					{formatPosition(clip.end - clip.start)}
+				</span>
+			</span>
+			<span className={styles.where}>{where || "Unknown stage"}</span>
+			<span className={styles.source}>
+				{sourceLabel ? sourceLabel(clip) : formatDate(clip.createdAt)}
+			</span>
+		</button>
+	);
+}
diff --git a/app/features/scanner/components/ClipsView.module.css b/app/features/scanner/components/ClipsView.module.css
new file mode 100644
index 000000000..0f4756e5f
--- /dev/null
+++ b/app/features/scanner/components/ClipsView.module.css
@@ -0,0 +1,125 @@
+.view {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-4);
+}
+
+.title {
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
+}
+
+.count {
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+	font-variant-numeric: tabular-nums;
+}
+
+.note {
+	margin: 0;
+	font-size: var(--font-xs);
+	color: var(--color-text-high);
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
+	gap: var(--s-4);
+}
+
+.card {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--radius-box);
+	background: var(--color-bg-high);
+	overflow: hidden;
+}
+
+.video,
+.thumb {
+	display: block;
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: #000 center / cover no-repeat;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	position: relative;
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -3px;
+	}
+}
+
+.video {
+	cursor: default;
+}
+
+.playBadge {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+
+	&::before {
+		content: "";
+		position: absolute;
+		width: 48px;
+		height: 48px;
+		border-radius: var(--radius-full);
+		background: rgb(0 0 0 / 0.6);
+	}
+
+	& svg {
+		position: relative;
+	}
+}
+
+.cardBody {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+	padding: var(--s-2-5) var(--s-3);
+}
+
+.cardTitle {
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
+}
+
+.cardMeta {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+}
+
+.sourceLink {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: inherit;
+}
+
+.cardActions {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1);
+}
+
+.length {
+	font-variant-numeric: tabular-nums;
+	margin-inline-end: var(--s-1);
+}
+
+.storage {
+	margin: 0;
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+}
diff --git a/app/features/scanner/components/ClipsView.tsx b/app/features/scanner/components/ClipsView.tsx
new file mode 100644
index 000000000..41a72d8b5
--- /dev/null
+++ b/app/features/scanner/components/ClipsView.tsx
@@ -0,0 +1,206 @@
+/**
+ * Clip history: the best clips across sessions, sorted by score, playable
+ * in place, each downloadable and deletable. The lowest-scoring one is
+ * replaced when the history is full — download anything worth keeping.
+ */
+import { Download, Play, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Link } from "react-router";
+import { SendouButton } from "~/components/elements/Button";
+import { FormWithConfirm } from "~/components/FormWithConfirm";
+import { SCANNER_PAGE } from "~/utils/urls";
+import { formatPosition } from "../core/format";
+import { modeLabel, stageLabel } from "../core/labels";
+import { scannerSearchParams } from "../scanner-search-params";
+import {
+	deleteClip,
+	loadClipBlob,
+	MAX_HISTORY_CLIPS,
+	type ScannerClip,
+	storageUsage,
+} from "../store/clips";
+import styles from "./ClipsView.module.css";
+import { refreshClips, useClips } from "./clips-feed";
+import { downloadBlob } from "./download";
+import { useEventDateTimeFormatter } from "./format";
+import { SessionHeader } from "./SessionHeader";
+
+export function ClipsView() {
+	const clips = useClips();
+	const history = clips.filter((clip) => clip.bucket === "history");
+	const usage = useStorageUsage(clips.length);
+
+	return (
+		<div className={styles.view}>
+			<SessionHeader>
+				<div className={styles.title}>
+					Clip history{" "}
+					<span className={styles.count}>
+						{history.length} / {MAX_HISTORY_CLIPS}
+					</span>
+				</div>
+				<p className={styles.note}>
+					The lowest-scoring clip is replaced when full. Download anything to
+					keep it.
+				</p>
+			</SessionHeader>
+			{history.length === 0 ? (
+				<p className={styles.note}>
+					No clips yet — a streak of splats while the scanner runs makes one
+					(how many is in Settings).
+				</p>
+			) : (
+				<div className={styles.grid}>
+					{history.map((clip) => (
+						<ClipCard key={clip.id} clip={clip} />
+					))}
+				</div>
+			)}
+			{usage !== null ? (
+				<p className={styles.storage}>~{formatBytes(usage)} used</p>
+			) : null}
+		</div>
+	);
+}
+
+function ClipCard({ clip }: { clip: ScannerClip }) {
+	const [url, setUrl] = useState<string | null>(null);
+	const formatDate = useEventDateTimeFormatter();
+	const where = [modeLabel(clip.mode), stageLabel(clip.stage)]
+		.filter(Boolean)
+		.join(" · ");
+
+	// the blob is read only once the card is played; the URL is released with the card
+	useEffect(
+		() => () => {
+			if (url) URL.revokeObjectURL(url);
+		},
+		[url],
+	);
+
+	const play = async () => {
+		const blob = await loadClipBlob(clip.id);
+		if (blob) setUrl(URL.createObjectURL(blob));
+	};
+
+	const download = async () => {
+		const blob = await loadClipBlob(clip.id);
+		if (blob) downloadBlob(clipFileName(clip), blob);
+	};
+
+	const sourceHref =
+		clip.source.kind === "live"
+			? scannerSearchParams.href(SCANNER_PAGE, {
+					view: "session",
+					id: clip.source.sessionKey,
+				})
+			: scannerSearchParams.href(SCANNER_PAGE, {
+					view: "vod",
+					name: clip.source.name,
+				});
+
+	return (
+		<div className={styles.card}>
+			{url ? (
+				// biome-ignore lint/a11y/useMediaCaption: game footage has no captions
+				<video
+					className={styles.video}
+					src={url}
+					controls
+					autoPlay
+					playsInline
+				/>
+			) : (
+				<button
+					type="button"
+					className={styles.thumb}
+					style={
+						clip.thumbnail
+							? { backgroundImage: `url(${clip.thumbnail})` }
+							: undefined
+					}
+					onClick={() => void play()}
+					aria-label="Play clip"
+				>
+					<span className={styles.playBadge}>
+						<Play size={18} aria-hidden />
+					</span>
+				</button>
+			)}
+			<div className={styles.cardBody}>
+				<div className={styles.cardTitle}>
+					{clip.kills} splats
+					{where ? ` · ${where}` : null}
+				</div>
+				<div className={styles.cardMeta}>
+					<Link
+						to={sourceHref}
+						className={styles.sourceLink}
+						defaultShouldRevalidate={false}
+					>
+						{clip.source.kind === "vod"
+							? `${clip.source.name} · VoD`
+							: `${formatDate(clip.createdAt)} · Live`}
+					</Link>
+					<span className={styles.cardActions}>
+						<span className={styles.length}>
+							{formatPosition(clip.end - clip.start)}
+							{clip.hasAudio ? null : " · no audio"}
+						</span>
+						<SendouButton
+							variant="minimal"
+							size="small"
+							shape="circle"
+							icon={<Download />}
+							aria-label="Download clip"
+							onClick={() => void download()}
+						/>
+						<FormWithConfirm
+							dialogHeading="Delete this clip?"
+							onConfirm={() => {
+								void deleteClip(clip.id).then(() => refreshClips());
+							}}
+						>
+							<SendouButton
+								variant="minimal-destructive"
+								size="small"
+								shape="circle"
+								icon={<Trash2 />}
+								aria-label="Delete clip"
+							/>
+						</FormWithConfirm>
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/** Bytes the origin uses, re-read when the clip count changes. */
+function useStorageUsage(clipCount: number): number | null {
+	const [usage, setUsage] = useState<number | null>(null);
+	useEffect(() => {
+		let stale = false;
+		void storageUsage().then((next) => {
+			if (!stale) setUsage(next);
+		});
+		return () => {
+			stale = true;
+		};
+	}, [clipCount]);
+	return usage;
+}
+
+function formatBytes(bytes: number): string {
+	if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+	return `${Math.round(bytes / 1024 ** 2)} MB`;
+}
+
+function clipFileName(clip: ScannerClip): string {
+	const source =
+		clip.source.kind === "vod"
+			? clip.source.name.replace(/\.[^.]+$/, "")
+			: new Date(clip.createdAt).toISOString().slice(0, 10);
+	const at = formatPosition(clip.t).replaceAll(":", "-");
+	return `${source}-${at}-${clip.kills}-splats.mp4`;
+}
diff --git a/app/features/scanner/components/DeathCard.tsx b/app/features/scanner/components/DeathCard.tsx
index cc24a7279..acde17e04 100644
--- a/app/features/scanner/components/DeathCard.tsx
+++ b/app/features/scanner/components/DeathCard.tsx
@@ -4,6 +4,7 @@ import {
 	DEATH_EVENT_TYPE,
 	type DeathData,
 } from "../core/detectors/death/index";
+import { weaponLabel } from "../core/labels";
 import styles from "./DeathCard.module.css";
 import {
 	EventCardMeta,
@@ -14,7 +15,6 @@ import {
 } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
 import { useEventTimeFormatter } from "./format";
-import { weaponLabel } from "./labels";
 import { MetaPills } from "./MetaChips";
 
 export function DeathCard(props: {
diff --git a/app/features/scanner/components/Dropzone.module.css b/app/features/scanner/components/Dropzone.module.css
new file mode 100644
index 000000000..91c3cfb4a
--- /dev/null
+++ b/app/features/scanner/components/Dropzone.module.css
@@ -0,0 +1,24 @@
+.dropzone {
+	border: var(--border-width) dashed var(--color-border-high);
+	border-radius: var(--radius-box);
+	padding: var(--s-8);
+	text-align: center;
+	color: var(--color-text-high);
+	font-size: var(--font-sm);
+	font-weight: var(--weight-semi);
+	margin-bottom: var(--s-4);
+
+	& label {
+		display: inline;
+		font-size: inherit;
+		font-weight: inherit;
+		margin-block-end: 0;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+}
+
+.over {
+	border-color: var(--color-text-accent);
+	color: var(--color-text-accent);
+}
diff --git a/app/features/scanner/components/Dropzone.tsx b/app/features/scanner/components/Dropzone.tsx
new file mode 100644
index 000000000..a8b747e40
--- /dev/null
+++ b/app/features/scanner/components/Dropzone.tsx
@@ -0,0 +1,34 @@
+/** A drag-and-drop target for one file; the file input inside the children is the accessible path. */
+import clsx from "clsx";
+import { type ReactNode, useState } from "react";
+import styles from "./Dropzone.module.css";
+
+export function Dropzone({
+	onFile,
+	children,
+}: {
+	onFile: (file: File) => void;
+	children: ReactNode;
+}) {
+	const [over, setOver] = useState(false);
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target; the file input inside is the accessible path
+		<div
+			className={clsx(styles.dropzone, { [styles.over]: over })}
+			onDragOver={(e) => {
+				e.preventDefault();
+				setOver(true);
+			}}
+			onDragLeave={() => setOver(false)}
+			onDrop={(e) => {
+				e.preventDefault();
+				setOver(false);
+				const file = e.dataTransfer.files[0];
+				if (file) onFile(file);
+			}}
+		>
+			{children}
+		</div>
+	);
+}
diff --git a/app/features/scanner/components/EventCard.module.css b/app/features/scanner/components/EventCard.module.css
deleted file mode 100644
index 563c8ab43..000000000
--- a/app/features/scanner/components/EventCard.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-/* sendou.ink send status strip under a feed card */
-.sendWrap {
-	display: flex;
-	flex-direction: column;
-	gap: var(--s-0-5);
-}
-
-.sendStrip {
-	display: flex;
-	gap: var(--s-3);
-	align-items: center;
-	padding: var(--s-1) var(--s-4);
-	border-radius: var(--radius-box);
-	background: var(--color-bg-high);
-	font-size: var(--font-2xs);
-	font-weight: var(--weight-semi);
-	color: var(--color-text-high);
-}
-
-.sent {
-	color: var(--color-success-high);
-	background: var(--color-success-low);
-}
-
-.failed {
-	color: var(--color-error-high);
-	background: var(--color-error-low);
-}
-
-.queued,
-.sending {
-	color: var(--color-info-high);
-	background: var(--color-info-low);
-}
-
-.sendError {
-	color: inherit;
-	font-weight: var(--weight-body);
-}
diff --git a/app/features/scanner/components/EventCard.tsx b/app/features/scanner/components/EventCard.tsx
index 122d6ee71..dde48dbe7 100644
--- a/app/features/scanner/components/EventCard.tsx
+++ b/app/features/scanner/components/EventCard.tsx
@@ -1,12 +1,11 @@
 /**
- * Single dispatch point from a detected event to its card, shared by the live
- * and VoD feeds. Frames load lazily through `getFrame` (IndexedDB keeps them
- * out of the listed records); the Inspect action (open the frame in the
- * screenshot page in a new tab, leaving the running scan undisturbed) is
+ * Single dispatch point from a detected event to its card (the debug "raw
+ * detections" of a match). Frames load lazily through `getFrame` (IndexedDB
+ * keeps them out of the listed records); the Inspect action (open the frame
+ * in the debug view in a new tab, leaving the running scan undisturbed) is
  * derived from it here.
  */
 
-import clsx from "clsx";
 import { SCANNER_PAGE } from "~/utils/urls";
 import type { PlayerAbilityMap } from "../core/ability-harvest";
 import {
@@ -40,12 +39,9 @@ import {
 	type ScoreboardOwnData,
 } from "../core/detectors/scoreboard-own/index";
 import { scannerSearchParams } from "../scanner-search-params";
-import type { SendStatus } from "../store/events";
 import { newInspectKey, putInspectFrame } from "../store/inspect";
 import { DeathCard } from "./DeathCard";
-import styles from "./EventCard.module.css";
 import type { FixtureData } from "./fixture-export";
-import { useEventTimeFormatter } from "./format";
 import { KillCard } from "./KillCard";
 import { MapStartCard } from "./MapStartCard";
 import { MinimapCard } from "./MinimapCard";
@@ -68,10 +64,6 @@ export function EventCard(props: {
 	getFrame?: GetFrame;
 	/** Scoreboard only: abilities harvested from the match's death events */
 	abilities?: PlayerAbilityMap;
-	/** sendou.ink /ingest status of this event; absent = never attempted */
-	send?: SendStatus;
-	/** when set, shows a Send/Retry button that sends this event's match batch */
-	onSend?: () => void;
 }) {
 	const { type, t, confidence, data, thumbnail, detectedAt, getFrame } = props;
 	// window.open must run synchronously in the click gesture (popup blockers);
@@ -81,7 +73,7 @@ export function EventCard(props: {
 				const key = newInspectKey();
 				window.open(
 					scannerSearchParams.href(SCANNER_PAGE, {
-						tab: "screenshot",
+						view: "debug",
 						inspect: key,
 					}),
 					"_blank",
@@ -93,60 +85,7 @@ export function EventCard(props: {
 		: undefined;
 	const shared = { t, confidence, thumbnail, detectedAt, getFrame, onInspect };
 
-	const card = renderCard(type, data, shared, props.abilities);
-	if (!props.send && !props.onSend) return card;
-	return (
-		<div className={styles.sendWrap}>
-			{card}
-			<SendStrip send={props.send} onSend={props.onSend} />
-		</div>
-	);
-}
-
-/** `unlinked` has no strip styling of its own */
-const SEND_STATE_CLASS: Record<SendStatus["state"], string | undefined> = {
-	queued: styles.queued,
-	sending: styles.sending,
-	sent: styles.sent,
-	unlinked: undefined,
-	failed: styles.failed,
-};
-
-const SEND_LABELS: Record<SendStatus["state"], string> = {
-	queued: "queued",
-	sending: "sending…",
-	sent: "sent",
-	unlinked: "waiting for report",
-	failed: "failed",
-};
-
-function SendStrip({
-	send,
-	onSend,
-}: {
-	send?: SendStatus;
-	onSend?: () => void;
-}) {
-	const state = send?.state;
-	const formatSentAt = useEventTimeFormatter();
-	return (
-		<div
-			className={clsx(styles.sendStrip, state ? SEND_STATE_CLASS[state] : null)}
-		>
-			<span>
-				sendou.ink: {state ? SEND_LABELS[state] : "not sent"}
-				{state === "sent" && send ? ` ${formatSentAt(send.at)}` : null}
-			</span>
-			{send?.error ? (
-				<span className={styles.sendError}>{send.error}</span>
-			) : null}
-			{onSend && state !== "sent" && state !== "sending" ? (
-				<button type="button" onClick={onSend}>
-					{state === "failed" ? "Retry" : "Send"}
-				</button>
-			) : null}
-		</div>
-	);
+	return renderCard(type, data, shared, props.abilities);
 }
 
 function renderCard(
diff --git a/app/features/scanner/components/EventsSummary.module.css b/app/features/scanner/components/EventsSummary.module.css
deleted file mode 100644
index a1b7d4d69..000000000
--- a/app/features/scanner/components/EventsSummary.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-.summary {
-	display: flex;
-	align-items: center;
-	gap: var(--s-2-5);
-	flex-wrap: wrap;
-	padding: var(--s-0-5) var(--s-1);
-	font-size: var(--font-2xs);
-	font-weight: var(--weight-semi);
-	color: var(--color-text-high);
-}
-
-.type {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	font-variant-numeric: tabular-nums;
-}
-
-.icon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 22px;
-	height: 22px;
-	border-radius: var(--radius-full);
-	background: var(--color-bg-higher);
-	color: var(--color-text-high);
-}
-
-button.toggle {
-	border: none;
-	background: transparent;
-	color: var(--color-fg-accent);
-	height: auto;
-	padding: 0;
-	font-size: var(--font-2xs);
-}
diff --git a/app/features/scanner/components/EventsSummary.tsx b/app/features/scanner/components/EventsSummary.tsx
deleted file mode 100644
index fb31e9b62..000000000
--- a/app/features/scanner/components/EventsSummary.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * One light line summarizing raw detections as per-type counts, with a toggle
- * for their card feed. Callers pass only events not covered by a match card.
- */
-
-import * as R from "remeda";
-import { DEATH_EVENT_TYPE } from "../core/detectors/death/index";
-import { KILL_EVENT_TYPE } from "../core/detectors/kill/index";
-import { MAP_START_EVENT_TYPE } from "../core/detectors/map-start/index";
-import { MINIMAP_EVENT_TYPE } from "../core/detectors/minimap/index";
-import { OBJECTIVE_EVENT_TYPE } from "../core/detectors/objective/index";
-import { SCOREBOARD_EVENT_TYPE } from "../core/detectors/scoreboard/index";
-import { SCOREBOARD_BATTLE_LOG_EVENT_TYPE } from "../core/detectors/scoreboard-battle-log/index";
-import { SCOREBOARD_BATTLE_LOG_REPLAY_EVENT_TYPE } from "../core/detectors/scoreboard-battle-log-replay/index";
-import { SCOREBOARD_OWN_EVENT_TYPE } from "../core/detectors/scoreboard-own/index";
-import styles from "./EventsSummary.module.css";
-import { EventTypeIcon } from "./EventTypeIcon";
-
-const EVENT_TYPE_LABELS: Record<string, string> = {
-	[MAP_START_EVENT_TYPE]: "map start",
-	[DEATH_EVENT_TYPE]: "death",
-	[KILL_EVENT_TYPE]: "kill",
-	[MINIMAP_EVENT_TYPE]: "minimap",
-	[OBJECTIVE_EVENT_TYPE]: "objective",
-	[SCOREBOARD_EVENT_TYPE]: "scoreboard",
-	[SCOREBOARD_BATTLE_LOG_REPLAY_EVENT_TYPE]: "replay scoreboard",
-	[SCOREBOARD_BATTLE_LOG_EVENT_TYPE]: "battle log",
-	[SCOREBOARD_OWN_EVENT_TYPE]: "own result",
-};
-
-export function EventsSummary({
-	events,
-	open,
-	onToggle,
-}: {
-	events: ReadonlyArray<{ type: string }>;
-	open: boolean;
-	onToggle: () => void;
-}) {
-	const counts = R.countBy(events, (event) => event.type);
-	const sorted = Object.entries(counts).toSorted((a, b) => b[1] - a[1]);
-
-	return (
-		<div className={styles.summary}>
-			{sorted.map(([type, count]) => {
-				const label = EVENT_TYPE_LABELS[type] ?? type;
-				return (
-					<span
-						key={type}
-						className={styles.type}
-						title={`${count} ${label}${count === 1 ? "" : "s"}`}
-					>
-						<span className={styles.icon}>
-							<EventTypeIcon type={type} />
-						</span>
-						×{count}
-					</span>
-				);
-			})}
-			<button type="button" className={styles.toggle} onClick={onToggle}>
-				{open ? "Hide events" : "Show events"}
-			</button>
-		</div>
-	);
-}
diff --git a/app/features/scanner/components/ExportMenu.tsx b/app/features/scanner/components/ExportMenu.tsx
new file mode 100644
index 000000000..84e715321
--- /dev/null
+++ b/app/features/scanner/components/ExportMenu.tsx
@@ -0,0 +1,75 @@
+/**
+ * `⇩ CSV` in a session header: `Matches` (one row per game, the rows the
+ * cards render) or `Raw detections` (one row per event), for this session
+ * or file. Settings has the same two shapes over everything.
+ */
+import { Download, FileText, ListTree } from "lucide-react";
+import { SendouButton } from "~/components/elements/Button";
+import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
+import { eventsToCsv } from "../core/csv/events";
+import { type MatchCsvSource, matchesToCsv } from "../core/csv/matches";
+import type { BuiltMatch } from "../core/match-builder";
+import { downloadCsv } from "./download";
+import type { ScanEvent } from "./session-data";
+
+export function ExportMenu({
+	built,
+	events,
+	source,
+	clipCounts,
+	fileBase,
+}: {
+	/** chronological */
+	built: readonly BuiltMatch<ScanEvent>[];
+	events: readonly ScanEvent[];
+	source: MatchCsvSource;
+	clipCounts: readonly number[];
+	/** `scanner-matches-2026-09-16` / `sws26-finals` — the download's stem */
+	fileBase: string;
+}) {
+	return (
+		<SendouMenu
+			trigger={
+				<SendouButton
+					variant="minimal"
+					size="small"
+					icon={<Download />}
+					isDisabled={events.length === 0}
+				>
+					CSV
+				</SendouButton>
+			}
+			placement="bottom end"
+		>
+			<SendouMenuItem
+				icon={<FileText />}
+				onAction={() =>
+					downloadCsv(
+						`${fileBase}-matches.csv`,
+						matchesToCsv(
+							built.map((b) => b.match),
+							source,
+							clipCounts,
+						),
+					)
+				}
+			>
+				Matches
+			</SendouMenuItem>
+			<SendouMenuItem
+				icon={<ListTree />}
+				onAction={() =>
+					downloadCsv(
+						`${fileBase}-events.csv`,
+						eventsToCsv(
+							events.toSorted((a, b) => a.t - b.t),
+							source.originT,
+						),
+					)
+				}
+			>
+				Raw detections
+			</SendouMenuItem>
+		</SendouMenu>
+	);
+}
diff --git a/app/features/scanner/components/FixturesPage.tsx b/app/features/scanner/components/FixturesPage.tsx
index 8b087c3b4..f6a0f9b75 100644
--- a/app/features/scanner/components/FixturesPage.tsx
+++ b/app/features/scanner/components/FixturesPage.tsx
@@ -5,11 +5,11 @@ import { mainWeaponImageUrl, SCANNER_PAGE } from "~/utils/urls";
 import type { Roi } from "../core/canonical";
 import type { PlayerStatusLayout } from "../core/detectors/objective/player-status";
 import * as objective from "../core/detectors/objective/rois";
+import { mainWeaponLabel } from "../core/labels";
 import type { FixtureListItem } from "../routes/scanner.fixtures";
 import { scannerSearchParams } from "../scanner-search-params";
 import { newInspectKey, putInspectFrame } from "../store/inspect";
 import styles from "./FixturesPage.module.css";
-import { mainWeaponLabel } from "./labels";
 import { drawNormalizedCanvas } from "./normalized-canvas";
 import { formatTimer, RoiCrop } from "./ScreenshotPage";
 
@@ -122,7 +122,7 @@ function frameUrl(fixture: FixtureListItem): string {
 function inspectFixture(url: string) {
 	const key = newInspectKey();
 	window.open(
-		scannerSearchParams.href(SCANNER_PAGE, { tab: "screenshot", inspect: key }),
+		scannerSearchParams.href(SCANNER_PAGE, { view: "debug", inspect: key }),
 		"_blank",
 	);
 	void fetch(url)
diff --git a/app/features/scanner/components/KillCard.tsx b/app/features/scanner/components/KillCard.tsx
index 8f6f79602..4e97f5dce 100644
--- a/app/features/scanner/components/KillCard.tsx
+++ b/app/features/scanner/components/KillCard.tsx
@@ -1,7 +1,8 @@
 import { KILL_EVENT_TYPE, type KillData } from "../core/detectors/kill/index";
+import { formatClock } from "../core/format";
 import { EventCardMeta, EventCardShell } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
-import { formatClock, useEventTimeFormatter } from "./format";
+import { useEventTimeFormatter } from "./format";
 import { MetaPills } from "./MetaChips";
 
 export function KillCard(props: {
diff --git a/app/features/scanner/components/LandingView.module.css b/app/features/scanner/components/LandingView.module.css
new file mode 100644
index 000000000..dd2e67954
--- /dev/null
+++ b/app/features/scanner/components/LandingView.module.css
@@ -0,0 +1,200 @@
+.landing {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-6);
+}
+
+/* the whole landing accepts a drop, but only the File card's dropzone lights up */
+.over .dropzone {
+	border-color: var(--color-text-accent);
+	color: var(--color-text-accent);
+}
+
+.top {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.cards {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+	gap: var(--s-4);
+}
+
+/* the bordered card of the scrims/availability panels */
+.card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-3);
+	padding: var(--s-4);
+	border: var(--border-style);
+	border-radius: var(--radius-box);
+	background: var(--color-bg-high);
+}
+
+.cardTitle {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	margin: 0;
+	font-size: var(--font-sm);
+	font-weight: var(--weight-extra);
+}
+
+.cardText {
+	margin: 0;
+	flex: 1;
+	font-size: var(--font-xs);
+	color: var(--color-text-high);
+}
+
+.cardActions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: var(--s-2) var(--s-3);
+	align-items: flex-start;
+}
+
+.error {
+	margin: 0;
+	font-size: var(--font-2xs);
+	color: var(--color-error);
+}
+
+.dropzone {
+	display: block;
+	padding: var(--s-5) var(--s-3);
+	border: var(--border-width) dashed var(--color-border-high);
+	border-radius: var(--radius-box);
+	text-align: center;
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--color-text-accent);
+		color: var(--color-text);
+	}
+}
+
+.choose {
+	text-decoration: underline;
+	color: var(--color-text-accent);
+}
+
+.fileInput {
+	display: none;
+}
+
+.checkbox {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	font-size: var(--font-xs);
+	cursor: pointer;
+
+	& input {
+		width: var(--selector-size-sm);
+		height: var(--selector-size-sm);
+		margin: 0;
+	}
+}
+
+.sessions {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+}
+
+.sectionTitle {
+	margin: 0;
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
+}
+
+.empty {
+	margin: 0;
+	font-size: var(--font-xs);
+	color: var(--color-text-high);
+}
+
+.rows {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--radius-box);
+	background: var(--color-bg-high);
+	overflow: hidden;
+}
+
+.row {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto auto;
+	align-items: center;
+	gap: var(--s-3);
+	padding: var(--s-2-5) var(--s-4);
+	color: inherit;
+	text-decoration: none;
+	font-size: var(--font-xs);
+
+	& + & {
+		border-top: var(--border-width) solid var(--color-border);
+	}
+
+	&:hover {
+		background: var(--color-bg-higher);
+	}
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
+	}
+}
+
+.rowTitle {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	min-width: 0;
+	font-weight: var(--weight-bold);
+}
+
+.rowName {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.tag {
+	padding: 0 var(--s-1-5);
+	border-radius: var(--radius-selector);
+	background: var(--color-bg-higher);
+	font-size: var(--font-3xs);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--color-text-high);
+}
+
+.rowDate {
+	font-weight: var(--weight-body);
+	color: var(--color-text-high);
+}
+
+.rowStats {
+	color: var(--color-text-high);
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+}
+
+@container scanner (width < 640px) {
+	.row {
+		grid-template-columns: auto minmax(0, 1fr) auto;
+	}
+
+	.rowStats {
+		grid-column: 2 / -1;
+		white-space: normal;
+	}
+}
diff --git a/app/features/scanner/components/LandingView.tsx b/app/features/scanner/components/LandingView.tsx
new file mode 100644
index 000000000..292344a2e
--- /dev/null
+++ b/app/features/scanner/components/LandingView.tsx
@@ -0,0 +1,277 @@
+/**
+ * The landing: two entry cards (Live / File), the clip history strip and
+ * the sessions list. Anyone can capture, scan files and get clips locally;
+ * only uploading needs a login. Dropping a file anywhere here starts a scan.
+ */
+import clsx from "clsx";
+import { Play, Upload } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { SendouButton } from "~/components/elements/Button";
+import { LocaleTime } from "~/components/LocaleTime";
+import { LocaleTimeRange } from "~/components/LocaleTimeRange";
+import {
+	useSearchParam,
+	useSearchParamsTyped,
+} from "~/modules/search-params/hooks";
+import { SCANNER_PAGE } from "~/utils/urls";
+import { scannerSearchParams } from "../scanner-search-params";
+import { MAX_HISTORY_CLIPS, type ScannerClip } from "../store/clips";
+import { ClipDialog } from "./ClipDialog";
+import { ClipStrip } from "./ClipStrip";
+import { useClips } from "./clips-feed";
+import { useFeed } from "./events-feed";
+import styles from "./LandingView.module.css";
+import { getLiveSession, startCapture, useLiveSession } from "./live-session";
+import { SettingsPopover } from "./SettingsPopover";
+import { SourceSelect } from "./SourceSelect";
+import { startVodScan } from "./vod-scan";
+import { useVods } from "./vods-feed";
+
+/** how many history clips the landing strip shows before "See all" */
+const LANDING_CLIPS = 8;
+
+type SessionRow =
+	| {
+			kind: "live";
+			key: number;
+			startedAt: number;
+			endedAt: number;
+			clips: number;
+	  }
+	| {
+			kind: "vod";
+			name: string;
+			savedAt: number;
+			clips: number;
+	  };
+
+export function LandingView() {
+	const live = useLiveSession();
+	const feed = useFeed();
+	const vods = useVods();
+	const clips = useClips();
+	const [telemetry] = useSearchParam(scannerSearchParams, "telemetry");
+	const [, setParams] = useSearchParamsTyped(scannerSearchParams);
+	const [saveClipsFromFile, setSaveClipsFromFile] = useState(false);
+	const [over, setOver] = useState(false);
+	const [playing, setPlaying] = useState<ScannerClip | null>(null);
+
+	const canCapture = supportsCapture();
+	const history = clips.filter((clip) => clip.bucket === "history");
+	const rows = sessionRows(feed.sessions, vods, clips);
+
+	const startLive = async () => {
+		if (live.status === "running") {
+			setParams({ view: "live" });
+			return;
+		}
+		await startCapture();
+		if (getLiveSession().status === "running") setParams({ view: "live" });
+	};
+
+	const scanFile = (file: File) => {
+		void startVodScan(file, { saveClips: saveClipsFromFile, telemetry });
+		setParams({ view: "vod", name: file.name });
+	};
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target for the whole landing; the file input is the accessible path
+		<div
+			className={clsx(styles.landing, { [styles.over]: over })}
+			onDragOver={(e) => {
+				e.preventDefault();
+				setOver(true);
+			}}
+			onDragLeave={() => setOver(false)}
+			onDrop={(e) => {
+				e.preventDefault();
+				setOver(false);
+				const file = e.dataTransfer.files[0];
+				if (file) scanFile(file);
+			}}
+		>
+			<div className={styles.top}>
+				<SettingsPopover />
+			</div>
+
+			<div className={styles.cards}>
+				<section className={styles.card}>
+					<h2 className={styles.cardTitle}>
+						<Play size={16} aria-hidden />
+						Live
+					</h2>
+					<p className={styles.cardText}>
+						{canCapture
+							? "Watch your capture card while you play. Results upload as each game ends."
+							: "Needs a desktop browser and a capture card."}
+					</p>
+					<div className={styles.cardActions}>
+						<SendouButton
+							icon={<Play />}
+							isDisabled={!canCapture || live.status === "starting"}
+							onClick={() => void startLive()}
+						>
+							{live.status === "running"
+								? "Open live session"
+								: live.status === "starting"
+									? "Starting…"
+									: "Start capture"}
+						</SendouButton>
+						{canCapture ? (
+							<SourceSelect disabled={live.status !== "idle"} />
+						) : null}
+					</div>
+					{live.status === "error" && live.error ? (
+						<p className={styles.error}>{live.error}</p>
+					) : null}
+				</section>
+				<section className={styles.card}>
+					<h2 className={styles.cardTitle}>
+						<Upload size={16} aria-hidden />
+						File
+					</h2>
+					<p className={styles.cardText}>Scan a recorded VoD.</p>
+					<label className={styles.dropzone}>
+						Drop a video here or{" "}
+						<span className={styles.choose}>choose file</span>
+						<input
+							type="file"
+							accept="video/*"
+							className={styles.fileInput}
+							onChange={(e) => {
+								const file = e.target.files?.[0];
+								e.target.value = ""; // allow re-picking the same file
+								if (file) scanFile(file);
+							}}
+						/>
+					</label>
+					<label className={styles.checkbox}>
+						<input
+							type="checkbox"
+							checked={saveClipsFromFile}
+							onChange={(e) => setSaveClipsFromFile(e.target.checked)}
+						/>
+						Save clips from this VoD
+					</label>
+				</section>
+			</div>
+
+			<ClipStrip
+				title="Clip history"
+				count={`${history.length} / ${MAX_HISTORY_CLIPS}`}
+				clips={history.slice(0, LANDING_CLIPS)}
+				onPlay={setPlaying}
+				seeAllHref={scannerSearchParams.href(SCANNER_PAGE, { view: "clips" })}
+			/>
+
+			<section className={styles.sessions}>
+				<h2 className={styles.sectionTitle}>Sessions</h2>
+				{rows.length === 0 ? (
+					<p className={styles.empty}>
+						{feed.loaded
+							? "Your sessions show up here once you have played with the scanner running."
+							: ""}
+					</p>
+				) : (
+					<div className={styles.rows}>
+						{rows.map((row) => (
+							<SessionRowItem key={rowKey(row)} row={row} />
+						))}
+					</div>
+				)}
+			</section>
+
+			{playing ? (
+				<ClipDialog clip={playing} onClose={() => setPlaying(null)} />
+			) : null}
+		</div>
+	);
+}
+
+function SessionRowItem({ row }: { row: SessionRow }) {
+	const href =
+		row.kind === "live"
+			? scannerSearchParams.href(SCANNER_PAGE, {
+					view: "session",
+					id: row.key,
+				})
+			: scannerSearchParams.href(SCANNER_PAGE, {
+					view: "vod",
+					name: row.name,
+				});
+	return (
+		<Link to={href} className={styles.row} defaultShouldRevalidate={false}>
+			<span className={styles.rowTitle}>
+				{row.kind === "live" ? (
+					<LocaleTimeRange
+						from={new Date(row.startedAt)}
+						to={new Date(row.endedAt)}
+						options={{ dateStyle: "medium", timeStyle: "short" }}
+						inline
+					/>
+				) : (
+					<>
+						<span className={styles.rowName}>{row.name}</span>
+						<span className={styles.tag}>VoD</span>
+						<LocaleTime
+							date={new Date(row.savedAt)}
+							options={{ dateStyle: "medium" }}
+							inline
+							className={styles.rowDate}
+						/>
+					</>
+				)}
+			</span>
+			<span className={styles.rowStats}>
+				{row.clips > 0
+					? `${row.clips} ${row.clips === 1 ? "clip" : "clips"}`
+					: null}
+			</span>
+		</Link>
+	);
+}
+
+function rowKey(row: SessionRow): string {
+	return row.kind === "live" ? `live-${row.key}` : `vod-${row.name}`;
+}
+
+function sessionRows(
+	sessions: ReturnType<typeof useFeed>["sessions"],
+	vods: ReturnType<typeof useVods>,
+	clips: readonly ScannerClip[],
+): SessionRow[] {
+	const liveRows: SessionRow[] = sessions.map((session) => ({
+		kind: "live",
+		key: session.key,
+		startedAt: session.startedAt,
+		endedAt: session.endedAt,
+		clips: clips.filter(
+			(clip) =>
+				clip.source.kind === "live" && clip.source.sessionKey === session.key,
+		).length,
+	}));
+	const vodRows: SessionRow[] = vods.map((vod) => ({
+		kind: "vod",
+		name: vod.name,
+		savedAt: vod.savedAt,
+		clips: clips.filter(
+			(clip) => clip.source.kind === "vod" && clip.source.name === vod.name,
+		).length,
+	}));
+	return [...liveRows, ...vodRows].sort((a, b) => rowTime(b) - rowTime(a));
+}
+
+function rowTime(row: SessionRow): number {
+	return row.kind === "live" ? row.endedAt : row.savedAt;
+}
+
+/** A desktop browser with camera access; phones can't drive a capture card. */
+function supportsCapture(): boolean {
+	return (
+		typeof navigator !== "undefined" &&
+		Boolean(navigator.mediaDevices?.getUserMedia) &&
+		typeof OffscreenCanvas !== "undefined" &&
+		!matchMedia("(pointer: coarse) and (max-width: 900px)").matches
+	);
+}
diff --git a/app/features/scanner/components/LivePage.tsx b/app/features/scanner/components/LivePage.tsx
deleted file mode 100644
index 70d72df24..000000000
--- a/app/features/scanner/components/LivePage.tsx
+++ /dev/null
@@ -1,634 +0,0 @@
-import { Camera, Ellipsis, FileText, Send, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
-import { GameTimeline } from "~/components/GameTimeline";
-import {
-	listVideoInputs,
-	openVirtualCamera,
-	startSampler,
-} from "../capture/sampler";
-import { connectAbilities } from "../core/ability-harvest";
-import { DEATH_EVENT_TYPE } from "../core/detectors/death/index";
-import { KILL_EVENT_TYPE } from "../core/detectors/kill/index";
-import {
-	MAP_START_EVENT_TYPE,
-	type MapStartData,
-} from "../core/detectors/map-start/index";
-import { MINIMAP_EVENT_TYPE } from "../core/detectors/minimap/index";
-import { OBJECTIVE_EVENT_TYPE } from "../core/detectors/objective/index";
-import { PLAYER_STATUS_EVENT_TYPE } from "../core/detectors/objective/player-status";
-import { STRIP_WEAPONS_EVENT_TYPE } from "../core/detectors/objective/strip-weapons";
-import { SCOREBOARD_EVENT_TYPES } from "../core/detectors/registry";
-import type { DetectedEvent, GateResult } from "../core/detectors/types";
-import type { BuiltMatch } from "../core/match-builder";
-import {
-	buildScannerMatches,
-	ingestSkipReasons,
-	invalidObjectiveEvents,
-} from "../core/match-builder";
-import { TimelineBuilder } from "../core/timeline/index";
-import {
-	clearEvents,
-	deleteEvents,
-	listEvents,
-	loadEventFrame,
-	type StoredEvent,
-	saveEvent,
-	updateEventsSend,
-} from "../store/events";
-import { AnalyzerClient } from "../worker/client";
-import { withoutRepeatEvents } from "./dedupe-events";
-import { EventCard } from "./EventCard";
-import { EventsSummary } from "./EventsSummary";
-import { downloadEventsCsv } from "./events-csv";
-import { type FixtureData, saveFixture } from "./fixture-export";
-import styles from "./LivePage.module.css";
-import { MatchCard } from "./MatchCard";
-import { MatchLobbyTabs } from "./MatchLobbyTabs";
-import { playerStatusTeams } from "./player-status-view";
-import {
-	ScannerControls,
-	ScannerFeed,
-	ScannerMenuButton,
-	ScannerSplitLayout,
-	ScannerStatusPill,
-} from "./ScannerChrome";
-import {
-	aggregateSendStatus,
-	matchContaining,
-	retryableUnlinkedMatches,
-	type SendouUser,
-	sendMatches,
-	unsentMatches,
-} from "./sendou-ingest";
-import { thumbnailFromBlob } from "./thumbnail";
-
-const SAMPLE_FPS = 2;
-
-/**
- * A slow parse (a browsed battle-log entry, a CJK splash-tag name) can occupy
- * the worker for seconds to tens of seconds; buffering the frames sampled
- * meanwhile keeps the stall from being missed. 24 frames hold ~12s at full
- * density; past that the backlog is decimated toward even spacing over the
- * stall (worker/frame-queue.ts) so a results screen mid-stall survives.
- */
-const FRAME_QUEUE_LIMIT = 24;
-
-/** How often a running capture rechecks unlinked matches for a retry (backoff in sendou-ingest.ts). */
-const UNLINKED_RETRY_TICK_MS = 15_000;
-
-/** The scan knows the on-screen sides only, not who is playing. */
-const SCANNER_TEAM_LABELS = ["Alpha", "Bravo"] as const;
-
-/** Event types the ingested matches are built from — the only ones with a send status. */
-const INGESTABLE_TYPES = [
-	MAP_START_EVENT_TYPE,
-	DEATH_EVENT_TYPE,
-	KILL_EVENT_TYPE,
-	MINIMAP_EVENT_TYPE,
-	...SCOREBOARD_EVENT_TYPES,
-];
-
-type Status = "idle" | "loading" | "watching" | "detected" | "error";
-
-export function LivePage({
-	sendouUser,
-}: {
-	/** sendou.ink login shown in the header; undefined = probing, null = not logged in */
-	sendouUser: SendouUser | null | undefined;
-}) {
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const clientRef = useRef<AnalyzerClient | null>(null);
-	const timelineRef = useRef(new TimelineBuilder());
-	const storedIdsRef = useRef(new WeakMap<DetectedEvent, number>());
-	const latestParseRef = useRef<{ type: string; data: FixtureData } | null>(
-		null,
-	);
-	const gatesRef = useRef(new Map<string, GateResult>());
-	const stopRef = useRef<(() => void) | null>(null);
-	const retryTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
-	// the open match is known to be a non-SZ mode, so counter reads are
-	// misreads of another mode's overlay and are not collected at all
-	const objectiveBlockedRef = useRef(false);
-
-	const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
-	const [deviceId, setDeviceId] = useState<string>("");
-	const [status, setStatus] = useState<Status>("idle");
-	const [gateScore, setGateScore] = useState<number | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [feed, setFeed] = useState<StoredEvent[]>([]);
-	const [running, setRunning] = useState(false);
-	const [sendouError, setSendouError] = useState<string | null>(null);
-	const [eventsOpen, setEventsOpen] = useState(false);
-	const [liveSend, setLiveSend] = useState(false);
-	const liveSendRef = useRef(false);
-	const sendingRef = useRef(false);
-	const pendingSendsRef = useRef<
-		Array<(built: BuiltMatch<StoredEvent>) => boolean>
-	>([]);
-
-	// every saved event asks for a refresh, ~2-3 a second during a match; requests
-	// landing while one runs coalesce into a single trailing pass
-	const refreshStateRef = useRef({ running: false, queued: false });
-	const refreshFeed = useCallback(() => {
-		const state = refreshStateRef.current;
-		if (state.running) {
-			state.queued = true;
-			return;
-		}
-		state.running = true;
-		void (async () => {
-			try {
-				do {
-					state.queued = false;
-					const events = await listEvents();
-					// objective reads grouped into a known non-SZ match slipped past the live
-					// block (e.g. the mode read arrived after them) — delete them
-					const invalid = new Set(
-						invalidObjectiveEvents(buildScannerMatches(events)),
-					);
-					if (invalid.size > 0) {
-						await deleteEvents(
-							[...invalid]
-								.map((event) => event.id)
-								.filter((id): id is number => id !== undefined),
-						);
-					}
-					setFeed(
-						events
-							.filter((event) => !invalid.has(event))
-							.sort(
-								(a, b) =>
-									b.detectedAt - a.detectedAt || (b.id ?? 0) - (a.id ?? 0),
-							),
-					);
-				} while (state.queued);
-			} finally {
-				state.running = false;
-			}
-		})();
-	}, []);
-
-	useEffect(() => {
-		refreshFeed();
-		return () => {
-			stopRef.current?.();
-			if (retryTimerRef.current) clearInterval(retryTimerRef.current);
-			clientRef.current?.dispose();
-		};
-	}, [refreshFeed]);
-
-	/** Sends the matches `include` selects; serialized so sends never overlap (a send requested mid-flight runs right after). */
-	const send = async (
-		include: (built: BuiltMatch<StoredEvent>) => boolean,
-		{ manual = false } = {},
-	) => {
-		if (sendingRef.current) {
-			pendingSendsRef.current.push(include);
-			return;
-		}
-		sendingRef.current = true;
-		if (manual) setSendouError(null);
-		try {
-			let next: typeof include | undefined = include;
-			let firstPass = true;
-			while (next) {
-				const events = await listEvents();
-				const { sentMatches, failedMatches } = await sendMatches({
-					events,
-					include: next,
-					onStatus: refreshFeed,
-				});
-				if (manual && firstPass && sentMatches + failedMatches === 0) {
-					setSendouError("nothing to send — no complete match selected");
-				}
-				firstPass = false;
-				const pending = pendingSendsRef.current;
-				pendingSendsRef.current = [];
-				next =
-					pending.length > 0
-						? (built) => pending.some((fn) => fn(built))
-						: undefined;
-			}
-		} finally {
-			sendingRef.current = false;
-			refreshFeed();
-		}
-	};
-
-	/** `withLiveSend`: send each match to sendou.ink as it closes. */
-	const start = async (withLiveSend: boolean) => {
-		setError(null);
-		setSendouError(null);
-		setStatus("loading");
-		liveSendRef.current = withLiveSend;
-		setLiveSend(withLiveSend);
-		// a restart may land mid-another-match; collect until its mode is known
-		objectiveBlockedRef.current = false;
-		try {
-			const video = videoRef.current!;
-			const stream = await openVirtualCamera(deviceId || undefined);
-			video.srcObject = stream;
-			await video.play();
-			setDevices(await listVideoInputs());
-
-			clientRef.current ??= new AnalyzerClient(
-				(result) => {
-					// one result arrives per detector per frame; status reflects
-					// whether any of them fired
-					gatesRef.current.set(result.detector, result.gate);
-					const gates = [...gatesRef.current.values()];
-					setGateScore(Math.max(...gates.map((g) => g.score)));
-					if (!result.gate.pass) {
-						if (!gates.some((g) => g.pass)) setStatus("watching");
-						return;
-					}
-					setStatus("detected");
-					for (const event of result.events as DetectedEvent<FixtureData>[]) {
-						latestParseRef.current = { type: event.type, data: event.data };
-						if (
-							(event.type === OBJECTIVE_EVENT_TYPE ||
-								event.type === PLAYER_STATUS_EVENT_TYPE) &&
-							objectiveBlockedRef.current
-						) {
-							continue;
-						}
-						const action = timelineRef.current.push(event);
-						if (action.action === "added" || action.action === "replaced") {
-							if (event.type === MAP_START_EVENT_TYPE) {
-								const mode = (event.data as MapStartData).mode;
-								objectiveBlockedRef.current = mode !== null && mode !== "SZ";
-							} else if (SCOREBOARD_EVENT_TYPES.includes(event.type)) {
-								objectiveBlockedRef.current = false;
-							}
-							const stale =
-								action.action === "replaced"
-									? storedIdsRef.current.get(action.replaced)
-									: undefined;
-							void (async () => {
-								const thumbnail = result.frame
-									? await thumbnailFromBlob(result.frame)
-									: undefined;
-								// reusing the replaced event's id keeps match card keys
-								// stable, so repeat detections don't remount the cards
-								const id = await saveEvent(
-									event,
-									thumbnail,
-									result.frame,
-									stale,
-								);
-								storedIdsRef.current.set(event, id);
-								if (
-									liveSendRef.current &&
-									INGESTABLE_TYPES.includes(event.type)
-								) {
-									if (SCOREBOARD_EVENT_TYPES.includes(event.type)) {
-										// a scoreboard closes its match — send it
-										refreshFeed();
-										await send(
-											(built) =>
-												matchContaining(id)(built) && unsentMatches(built),
-										);
-									} else {
-										await updateEventsSend([id], {
-											state: "queued",
-											at: Date.now(),
-										});
-									}
-								}
-								refreshFeed();
-							})();
-						}
-					}
-				},
-				(message) => {
-					setError(message);
-					setStatus("error");
-				},
-				undefined,
-				{ frameQueueLimit: FRAME_QUEUE_LIMIT },
-			);
-			await clientRef.current.whenReady();
-
-			stopRef.current = startSampler(video, SAMPLE_FPS, (bitmap, t) => {
-				clientRef.current?.analyze(bitmap, t);
-			});
-			// a match sent the moment its scoreboard closed usually beats the players to
-			// reporting it, so sendou.ink had nothing to link to; retry those while the
-			// capture runs, along with closed matches whose close-send was never attempted
-			retryTimerRef.current ??= setInterval(() => {
-				if (liveSendRef.current) {
-					void send(
-						(built) =>
-							retryableUnlinkedMatches(built) || unsentClosedMatches(built),
-					);
-				}
-			}, UNLINKED_RETRY_TICK_MS);
-			setStatus("watching");
-			setRunning(true);
-		} catch (e) {
-			setError(String(e));
-			setStatus("error");
-		}
-	};
-
-	const builtMatches = buildScannerMatches(feed);
-	const skipReasons = ingestSkipReasons(builtMatches);
-	const groupedEvents = new Set(builtMatches.flatMap((b) => b.sources));
-	// strip weapon evidence is assignment input, not a detection worth a card
-	const ungroupedFeed = feed.filter(
-		(e) => !groupedEvents.has(e) && e.type !== STRIP_WEAPONS_EVENT_TYPE,
-	);
-	const abilityMap = connectAbilities(feed);
-
-	const stop = () => {
-		stopRef.current?.();
-		stopRef.current = null;
-		if (retryTimerRef.current) clearInterval(retryTimerRef.current);
-		retryTimerRef.current = null;
-		const video = videoRef.current;
-		if (video?.srcObject instanceof MediaStream) {
-			for (const track of video.srcObject.getTracks()) track.stop();
-			video.srcObject = null;
-		}
-		setRunning(false);
-		setStatus("idle");
-		// the scan ending is the last match boundary — flush what's unsent
-		// (partials are safe: the server merges them into fuller resends)
-		if (liveSendRef.current) void send(unsentMatches);
-		liveSendRef.current = false;
-		setLiveSend(false);
-	};
-
-	return (
-		<div>
-			<ScannerControls>
-				{!running ? (
-					<>
-						<button
-							type="button"
-							disabled={!sendouUser}
-							title={sendouUser ? undefined : "Log in on sendou.ink first"}
-							onClick={() => void start(true)}
-						>
-							<Send aria-hidden />
-							Start capture
-						</button>
-						<button
-							type="button"
-							className={styles.outlined}
-							onClick={() => void start(false)}
-						>
-							Start capture (no sending)
-						</button>
-					</>
-				) : (
-					<>
-						<button type="button" onClick={stop}>
-							Stop
-						</button>
-						<button
-							type="button"
-							className={styles.outlined}
-							disabled={!sendouUser}
-							title={sendouUser ? undefined : "Log in on sendou.ink first"}
-							onClick={() => {
-								liveSendRef.current = !liveSend;
-								setLiveSend(!liveSend);
-							}}
-						>
-							<Send aria-hidden />
-							{liveSend ? "Stop sending" : "Start sending"}
-						</button>
-					</>
-				)}
-				<select
-					className={styles.deviceSelect}
-					value={deviceId}
-					onChange={(e) => setDeviceId(e.target.value)}
-				>
-					<option value="">Default camera (OBS Virtual Camera)</option>
-					{devices.map((d) => (
-						<option key={d.deviceId} value={d.deviceId}>
-							{d.label || d.deviceId.slice(0, 8)}
-						</option>
-					))}
-				</select>
-				<ScannerStatusPill
-					variant={
-						status === "detected"
-							? "detected"
-							: status === "watching"
-								? "watching"
-								: "idle"
-					}
-				>
-					{status}
-					{gateScore !== null ? ` · gate ${gateScore.toFixed(2)}` : null}
-				</ScannerStatusPill>
-				{liveSend ? (
-					<ScannerStatusPill variant="watching">
-						sending matches live
-					</ScannerStatusPill>
-				) : null}
-				<LiveMenu
-					canSaveFixture={running}
-					canSend={Boolean(sendouUser) && feed.length > 0}
-					hasEvents={feed.length > 0}
-					onSaveFixture={() =>
-						void saveFixture(videoRef.current!, latestParseRef.current)
-					}
-					onDownloadCsv={() =>
-						downloadEventsCsv(
-							`live-events-${new Date().toISOString().slice(0, 19).replaceAll(":", "-")}.csv`,
-							// feed is newest-first for display; export in chronological order
-							feed.toSorted(
-								(a, b) =>
-									a.detectedAt - b.detectedAt || (a.id ?? 0) - (b.id ?? 0),
-							),
-						)
-					}
-					onSendUnsent={() => void send(unsentMatches, { manual: true })}
-					onClearFeed={() => {
-						if (!window.confirm("Clear all detected events?")) return;
-						void clearEvents().then(refreshFeed);
-					}}
-				/>
-			</ScannerControls>
-			{error ? <p className="text-error">{error}</p> : null}
-			{sendouError ? <p className="text-error">{sendouError}</p> : null}
-			<ScannerSplitLayout>
-				<video ref={videoRef} className={styles.preview} muted playsInline />
-				<ScannerFeed>
-					{feed.length === 0 ? (
-						<p className="text-xxs text-lighter">No detections yet.</p>
-					) : null}
-					<MatchLobbyTabs
-						matches={builtMatches}
-						keyOf={(built) => built.sources[0]!.id!}
-						renderMatch={(built, justFormed) => {
-							const id = built.sources[0]!.id!;
-							const skipReason = skipReasons.get(built);
-							// counter reads render as one timeline chart, not a card each, from the
-							// builder's samples, whose sides are team-stable (raw reads follow the
-							// specced player on casts); a non-SZ match's reads (objective null) are hidden
-							const objectiveEvents = (
-								built.match.objective?.samples ?? []
-							).map((sample) => ({ t: sample.t, data: sample }));
-							const statusSamples = built.match.playerStatus?.samples ?? [];
-							const cardEvents = withoutRepeatEvents(built.sources).filter(
-								(e) =>
-									e.type !== OBJECTIVE_EVENT_TYPE &&
-									e.type !== PLAYER_STATUS_EVENT_TYPE &&
-									e.type !== STRIP_WEAPONS_EVENT_TYPE,
-							);
-							const newest = built === builtMatches.at(-1);
-							return (
-								<MatchCard
-									match={built.match}
-									live={running && newest && built.match.winner === null}
-									inProgress={newest && built.match.winner === null}
-									skipReason={skipReason}
-									justFormed={justFormed}
-									send={aggregateSendStatus(built.sources)}
-									onSend={
-										sendouUser && !skipReason
-											? () => void send(matchContaining(id), { manual: true })
-											: undefined
-									}
-								>
-									<GameTimeline
-										objectiveEvents={objectiveEvents}
-										playerStatusSamples={statusSamples}
-										teams={playerStatusTeams(built.match, SCANNER_TEAM_LABELS)}
-									/>
-									{cardEvents.map((e) => (
-										<EventCard
-											key={e.id}
-											type={e.type}
-											t={e.t}
-											confidence={e.confidence}
-											data={e.data as FixtureData}
-											abilities={abilityMap.get(e)}
-											thumbnail={e.thumbnail}
-											detectedAt={e.detectedAt}
-											getFrame={
-												e.hasFrame && e.id !== undefined
-													? () => loadEventFrame(e.id!)
-													: undefined
-											}
-										/>
-									))}
-								</MatchCard>
-							);
-						}}
-					/>
-					{ungroupedFeed.length > 0 ? (
-						<EventsSummary
-							events={ungroupedFeed}
-							open={eventsOpen}
-							onToggle={() => setEventsOpen(!eventsOpen)}
-						/>
-					) : null}
-					{eventsOpen
-						? ungroupedFeed.map((e) => (
-								<EventCard
-									key={e.id}
-									type={e.type}
-									t={e.t}
-									confidence={e.confidence}
-									data={e.data as FixtureData}
-									abilities={abilityMap.get(e)}
-									thumbnail={e.thumbnail}
-									detectedAt={e.detectedAt}
-									getFrame={
-										e.hasFrame && e.id !== undefined
-											? () => loadEventFrame(e.id!)
-											: undefined
-									}
-									send={e.send}
-									onSend={
-										sendouUser &&
-										e.id !== undefined &&
-										INGESTABLE_TYPES.includes(e.type)
-											? () =>
-													void send(matchContaining(e.id!), { manual: true })
-											: undefined
-									}
-								/>
-							))
-						: null}
-				</ScannerFeed>
-			</ScannerSplitLayout>
-		</div>
-	);
-}
-
-/** The capture's occasional actions, behind one icon-only menu. */
-function LiveMenu({
-	canSaveFixture,
-	canSend,
-	hasEvents,
-	onSaveFixture,
-	onDownloadCsv,
-	onSendUnsent,
-	onClearFeed,
-}: {
-	canSaveFixture: boolean;
-	canSend: boolean;
-	hasEvents: boolean;
-	onSaveFixture: () => void;
-	onDownloadCsv: () => void;
-	onSendUnsent: () => void;
-	onClearFeed: () => void;
-}) {
-	return (
-		<SendouMenu
-			trigger={<ScannerMenuButton icon={<Ellipsis />} label="More actions" />}
-		>
-			<SendouMenuItem
-				icon={<Camera />}
-				isDisabled={!canSaveFixture}
-				onAction={onSaveFixture}
-			>
-				Save frame as fixture
-			</SendouMenuItem>
-			<SendouMenuItem
-				icon={<FileText />}
-				isDisabled={!hasEvents}
-				onAction={onDownloadCsv}
-			>
-				CSV
-			</SendouMenuItem>
-			<SendouMenuItem
-				icon={<Send />}
-				isDisabled={!canSend}
-				onAction={onSendUnsent}
-			>
-				Send unsent to sendou.ink
-			</SendouMenuItem>
-			<SendouMenuItem
-				icon={<Trash2 />}
-				isDestructive
-				isDisabled={!hasEvents}
-				onAction={onClearFeed}
-			>
-				Clear feed
-			</SendouMenuItem>
-		</SendouMenu>
-	);
-}
-
-/**
- * A closed match whose send was never attempted: a match-close send can be
- * skipped (a page reload loses the queue), so the retry tick flushes these.
- * Sent/unlinked/failed matches follow their own paths.
- */
-function unsentClosedMatches(built: BuiltMatch<StoredEvent>): boolean {
-	return (
-		built.sources.some((e) => SCOREBOARD_EVENT_TYPES.includes(e.type)) &&
-		built.sources.every(
-			(e) => e.send === undefined || e.send.state === "queued",
-		)
-	);
-}
diff --git a/app/features/scanner/components/LiveView.module.css b/app/features/scanner/components/LiveView.module.css
new file mode 100644
index 000000000..269e665f0
--- /dev/null
+++ b/app/features/scanner/components/LiveView.module.css
@@ -0,0 +1,52 @@
+.liveHeader {
+	display: grid;
+	grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
+	gap: var(--s-4);
+	align-items: start;
+}
+
+.preview {
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: #000;
+	border-radius: var(--radius-box);
+	border: var(--border-width) solid var(--color-bg-high);
+}
+
+.status {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1-5);
+	font-size: var(--font-xs);
+}
+
+.statusLine {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-2);
+}
+
+.game {
+	font-weight: var(--weight-bold);
+}
+
+.meta {
+	color: var(--color-text-high);
+}
+
+.notes {
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+}
+
+.error {
+	font-size: var(--font-2xs);
+	color: var(--color-error);
+}
+
+@container scanner (width < 600px) {
+	.liveHeader {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
diff --git a/app/features/scanner/components/LiveView.tsx b/app/features/scanner/components/LiveView.tsx
new file mode 100644
index 000000000..9776cb833
--- /dev/null
+++ b/app/features/scanner/components/LiveView.tsx
@@ -0,0 +1,180 @@
+/**
+ * The running capture: the past-session screen with a live header — the
+ * capture preview, the LIVE/IDLE status line, Stop — over the same
+ * SessionView. The capture itself lives in live-session.ts and outlives this view.
+ */
+import { Camera, Square } from "lucide-react";
+import { SendouButton } from "~/components/elements/Button";
+import { LocaleTime } from "~/components/LocaleTime";
+import { useUser } from "~/features/auth/core/user";
+import { useSearchParamsTyped } from "~/modules/search-params/hooks";
+import { modeLabel, stageLabel } from "../core/labels";
+import { scannerSearchParams } from "../scanner-search-params";
+import { loadEventFrame } from "../store/events";
+import { useClips } from "./clips-feed";
+import { ExportMenu } from "./ExportMenu";
+import { currentSession, useFeed } from "./events-feed";
+import styles from "./LiveView.module.css";
+import {
+	saveCurrentFrameAsFixture,
+	stopCapture,
+	useLiveSession,
+} from "./live-session";
+import { SessionHeader } from "./SessionHeader";
+import { SessionView } from "./SessionView";
+import { SettingsPopover, sessionLabel } from "./SettingsPopover";
+import { matchContaining } from "./sendou-ingest";
+import type { ScanEvent } from "./session-data";
+import { useScannerSettings } from "./settings";
+import { sendLive } from "./upload";
+import { useDebug } from "./use-debug";
+
+/** a game is "being read" while its newest event is this fresh */
+const READING_WINDOW_MS = 60_000;
+
+export function LiveView() {
+	const live = useLiveSession();
+	const feed = useFeed();
+	const clips = useClips();
+	const settings = useScannerSettings();
+	const user = useUser();
+	const [, setParams] = useSearchParamsTyped(scannerSearchParams);
+	const debug = useDebug();
+
+	const session = currentSession(feed);
+	const events = session?.events ?? [];
+	const sessionClips = clips.filter((clip) => clip.bucket === "session");
+	const newest = session?.built.at(-1);
+	const reading =
+		newest !== undefined &&
+		newest.match.winner === null &&
+		Date.now() - (session?.endedAt ?? 0) < READING_WINDOW_MS;
+	const uploadNote = !user
+		? "Upload off · log in"
+		: settings.upload
+			? "Upload on ✓"
+			: "Upload off";
+	const clipsNote =
+		live.clips === "on"
+			? live.hasAudio
+				? "Clips on · Audio ✓"
+				: `Clips on · no audio${live.audioError ? ` (${live.audioError})` : ""}`
+			: live.clips === "unsupported"
+				? "Clips need a Chromium browser"
+				: live.clips === "failed"
+					? "Clips unavailable for this source"
+					: "Clips off";
+
+	const stop = () => {
+		stopCapture();
+		setParams({ view: "home" });
+	};
+
+	return (
+		<SessionView
+			kind="live"
+			events={events}
+			originT={session?.originT ?? 0}
+			clips={sessionClips}
+			clipsTitle="Clips this session"
+			running
+			canUpload={Boolean(user)}
+			onUpload={(built) => {
+				const id = built.sources[0]?.id;
+				if (id !== undefined) void sendLive(matchContaining(id));
+			}}
+			getFrame={frameLoader}
+			emptyText="Play a game — it shows up here as soon as its intro or results screen is read."
+			header={(info) => (
+				<SessionHeader
+					actions={
+						<>
+							<ExportMenu
+								built={info.built}
+								events={events}
+								source={{
+									label: sessionLabel(session?.startedAt ?? live.since ?? 0),
+									originT: session?.originT ?? 0,
+								}}
+								clipCounts={info.clipCounts}
+								fileBase={`scanner-${new Date(session?.startedAt ?? Date.now()).toISOString().slice(0, 10)}`}
+							/>
+							{debug ? (
+								<SendouButton
+									size="small"
+									variant="minimal"
+									icon={<Camera />}
+									onClick={saveCurrentFrameAsFixture}
+								>
+									Save frame as fixture
+								</SendouButton>
+							) : null}
+							<SendouButton
+								size="small"
+								variant="destructive"
+								icon={<Square />}
+								onClick={stop}
+							>
+								Stop
+							</SendouButton>
+							<SettingsPopover />
+						</>
+					}
+				>
+					<div className={styles.liveHeader}>
+						<video
+							ref={(video) => {
+								if (video && video.srcObject !== live.stream) {
+									video.srcObject = live.stream;
+								}
+							}}
+							className={styles.preview}
+							muted
+							playsInline
+							autoPlay
+						/>
+						<div className={styles.status}>
+							<div className={styles.statusLine}>
+								{reading && newest ? (
+									<span className={styles.game}>
+										{[
+											modeLabel(newest.match.mode),
+											stageLabel(newest.match.stage),
+										]
+											.filter(Boolean)
+											.join(" · ")}
+									</span>
+								) : null}
+							</div>
+							<div className={styles.meta}>
+								{live.since !== null ? (
+									<>
+										since{" "}
+										<LocaleTime
+											date={new Date(live.since)}
+											options={{ timeStyle: "short" }}
+											inline
+										/>
+									</>
+								) : null}
+								{info.summaryLine ? ` · ${info.summaryLine}` : null}
+							</div>
+							<div className={styles.notes}>
+								{uploadNote} · {clipsNote}
+							</div>
+							{live.error ? (
+								<div className={styles.error}>{live.error}</div>
+							) : null}
+						</div>
+					</div>
+				</SessionHeader>
+			)}
+		/>
+	);
+}
+
+function frameLoader(event: ScanEvent) {
+	return event.hasFrame && event.id !== undefined
+		? () => loadEventFrame(event.id!)
+		: undefined;
+}
diff --git a/app/features/scanner/components/MapStartCard.tsx b/app/features/scanner/components/MapStartCard.tsx
index 83196d57f..e2ddd4071 100644
--- a/app/features/scanner/components/MapStartCard.tsx
+++ b/app/features/scanner/components/MapStartCard.tsx
@@ -2,10 +2,10 @@ import {
 	MAP_START_EVENT_TYPE,
 	type MapStartData,
 } from "../core/detectors/map-start/index";
+import { modeLabel, stageLabel } from "../core/labels";
 import { EventCardMeta, EventCardShell } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
 import { useEventTimeFormatter } from "./format";
-import { modeLabel, stageLabel } from "./labels";
 import { MetaPills } from "./MetaChips";
 
 export function MapStartCard(props: {
diff --git a/app/features/scanner/components/MatchCard.module.css b/app/features/scanner/components/MatchCard.module.css
index 27da672b3..805ee41fa 100644
--- a/app/features/scanner/components/MatchCard.module.css
+++ b/app/features/scanner/components/MatchCard.module.css
@@ -6,9 +6,7 @@
 
 .matchCard {
 	container: match-card / inline-size;
-	position: sticky;
-	top: var(--layout-sticky-top);
-	z-index: 1;
+	position: relative;
 	overflow: hidden;
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
@@ -18,7 +16,7 @@
 		animation: scanner-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
 	}
 
-	/* one overlay element all send-state effects draw on */
+	/* one overlay element all upload-state effects draw on */
 	&::after {
 		content: "";
 		position: absolute;
@@ -27,28 +25,9 @@
 		pointer-events: none;
 	}
 
-	&.sending {
-		box-shadow: inset 0 0 0 1px var(--color-info-low);
-
-		&::after {
-			background-image: linear-gradient(
-				105deg,
-				transparent 40%,
-				rgb(255 255 255 / 0.09) 50%,
-				transparent 60%
-			);
-			background-size: 250% 100%;
-			animation: scanner-sheen 1.4s linear infinite;
-		}
-	}
-
-	&.flashSent::after {
+	&.flashUploaded::after {
 		animation: scanner-sent-pop 0.8s ease-out both;
 	}
-
-	&.live {
-		box-shadow: inset 0 0 0 1px var(--color-info-low);
-	}
 }
 
 @keyframes scanner-card-in {
@@ -58,15 +37,6 @@
 	}
 }
 
-@keyframes scanner-sheen {
-	from {
-		background-position: 130% 0;
-	}
-	to {
-		background-position: -130% 0;
-	}
-}
-
 @keyframes scanner-sent-pop {
 	0% {
 		opacity: 1;
@@ -94,17 +64,31 @@
 	}
 }
 
+.head {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	padding: var(--s-3) var(--s-4);
+}
+
+.matchCard.flashFailed .head {
+	animation: scanner-shake 0.35s ease;
+}
+
 .main {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: var(--s-2) var(--s-3);
-	padding: var(--s-3) var(--s-4);
-	min-height: 66px;
 }
 
-.matchCard.flashFailed .main {
-	animation: scanner-shake 0.35s ease;
+.number {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--color-text-high);
+	white-space: nowrap;
 }
 
 .mode {
@@ -115,24 +99,25 @@
 .headline {
 	display: flex;
 	flex-direction: column;
-	gap: var(--s-1);
-	/* claims row space so the score/chips can never crush the stage name
-	   out of view in a narrow feed column; wraps instead */
+	gap: var(--s-0-5);
+	/* claims row space so the score can never crush the stage name out of
+	   view in a narrow column; wraps instead */
 	flex: 1 1 0;
 	min-width: 150px;
 }
 
 .title {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--s-1) var(--s-2);
+	font-size: var(--font-sm);
+	line-height: 1.1;
+}
+
+.modeName {
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
 }
 
 .stage {
-	font-size: var(--font-sm);
 	font-weight: var(--weight-extra);
-	line-height: 1.1;
 }
 
 .meta {
@@ -141,104 +126,18 @@
 	color: var(--color-text-high);
 }
 
-.weapons {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--s-0-5);
-
-	& .vs {
-		font-size: var(--font-2xs);
-		font-weight: var(--weight-semi);
-		color: var(--color-text-high);
-		margin: 0 5px;
-	}
-
-	/* stay level with the weapons, which the arcs pushed up */
-	&.withAbilities .vs {
-		margin-block-end: 18px;
-	}
-}
-
-/* a team is one wrapping unit: the eight never break up mid-team */
-.weaponRow {
-	display: flex;
-	align-items: center;
-	gap: var(--s-1-5);
-}
-
-.weaponSlot {
-	--arc-ability-size: 20px;
-	--arc-radius: 27px;
-	/* how far under the weapon the arc's lowest point reaches */
-	--arc-overhang: 18px;
-
-	position: relative;
-	display: flex;
-	flex-shrink: 0;
-
-	/* room for the ability arc hanging under and beside the weapon */
-	&.withAbilities {
-		margin-inline: var(--s-2);
-		margin-block-end: var(--arc-overhang);
-	}
-}
-
-/* zero-sized anchor at the weapon's centre, the arc's origin */
-.abilityArc {
-	position: absolute;
-	inset-block-start: 50%;
-	inset-inline-start: 50%;
-}
-
-.arcSlot {
-	position: absolute;
-	inset-block-start: 0;
-	inset-inline-start: 0;
-	margin: calc(var(--arc-ability-size) / -2);
-	/* out along the arc, then back upright */
-	transform: rotate(var(--arc-angle)) translateY(var(--arc-radius))
-		rotate(calc(-1 * var(--arc-angle)));
-}
-
-.arcAbility {
-	width: var(--arc-ability-size);
-	height: var(--arc-ability-size);
-
-	& img {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-}
-
-.weapon {
-	flex-shrink: 0;
-	width: 38px;
-	height: 38px;
-	vertical-align: middle;
-	background: var(--color-bg-badge);
-	border-radius: var(--radius-full);
-	padding: var(--s-0-5);
-
-	&.pov {
-		outline: var(--border-style-high);
-		background-color: var(--color-bg-high);
-		outline-offset: 1px;
-	}
-}
-
 .side {
 	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-	gap: var(--s-1-5);
+	align-items: center;
+	gap: var(--s-3);
 	margin-inline-start: auto;
-	align-self: stretch;
 	flex-shrink: 0;
 }
 
-.matchScore {
+.score {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-2);
 	font-weight: var(--weight-extra);
 	font-variant-numeric: tabular-nums;
 	line-height: 1;
@@ -246,20 +145,129 @@
 	border-radius: var(--radius-full);
 	background: color-mix(in oklab, var(--color-bg) 72%, transparent);
 	backdrop-filter: blur(8px);
+}
 
-	& .win {
-		color: var(--color-error-high);
-	}
+.win {
+	color: var(--color-success-high);
+	font-size: var(--font-2xs);
+	letter-spacing: 0.08em;
+}
 
-	& .lose {
-		color: var(--color-info-high);
+.loss {
+	color: var(--color-error-high);
+	font-size: var(--font-2xs);
+	letter-spacing: 0.08em;
+}
+
+.scoreNumbers {
+	display: inline-flex;
+	gap: var(--s-1);
+}
+
+.scoreDash {
+	color: var(--color-text-high);
+}
+
+.kds {
+	font-weight: var(--weight-bold);
+	font-variant-numeric: tabular-nums;
+	font-size: var(--font-xs);
+	padding: var(--s-0-5) var(--s-2);
+	border-radius: var(--radius-full);
+	background: color-mix(in oklab, var(--color-bg) 72%, transparent);
+	backdrop-filter: blur(8px);
+}
+
+.teamWeapons {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1-5);
+}
+
+.weaponRow {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1);
+}
+
+.vs {
+	margin: 0 var(--s-1);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+}
+
+.weapon {
+	width: 28px;
+	height: 28px;
+	background: var(--color-bg-higher);
+	border-radius: var(--radius-full);
+	padding: 2px;
+
+	&.pov {
+		outline: 2px solid var(--color-text-accent);
+		outline-offset: 1px;
 	}
 }
 
-/* undo the scanner-wide solid button look for the banner icon button */
+.weaponUnknown {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+	color: var(--color-text-high);
+}
+
+.foot {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-2);
+}
+
+.footEnd {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-2);
+	margin-inline-start: auto;
+}
+
+.clips {
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-1-5);
+}
+
+.clipChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1);
+	padding: var(--s-0-5) var(--s-2);
+	border: var(--border-style);
+	border-radius: var(--radius-full);
+	background: color-mix(in oklab, var(--color-bg) 72%, transparent);
+	backdrop-filter: blur(8px);
+	color: var(--color-text);
+	font: inherit;
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+	font-variant-numeric: tabular-nums;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--color-text-accent);
+	}
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+	}
+}
+
+/* the shared circle button, translucent over the banner */
 button.expand {
 	flex-shrink: 0;
-	margin-block-start: auto;
 	width: 28px;
 	height: 28px;
 	padding: 0;
@@ -285,145 +293,22 @@ button.expand {
 	}
 }
 
-.chip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--s-1-5);
-	padding: var(--s-0-5) var(--s-2-5);
-	border-radius: var(--radius-full);
-	font-size: var(--font-2xs);
-	font-weight: var(--weight-bold);
-	border: var(--border-style);
-	background-color: var(--color-bg);
-	color: var(--color-text-high);
-	white-space: nowrap;
-
-	& .dot {
-		width: 7px;
-		height: 7px;
-		border-radius: var(--radius-full);
-		background: currentColor;
-	}
-
-	&.live {
-		color: var(--color-error);
-		border-color: var(--color-error-low);
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-
-		& .dot {
-			animation: scanner-pulse 1.4s ease-in-out infinite;
-		}
-	}
-
-	&.inProgress .dot {
-		animation: scanner-pulse 1.4s ease-in-out infinite;
-	}
-
-	&.queued,
-	&.sending {
-		color: var(--color-info-high);
-		border-color: var(--color-info-low);
-		background-color: var(--color-info-low);
-
-		& .dot {
-			animation: scanner-pulse 1.4s ease-in-out infinite;
-		}
-	}
-
-	&.sent {
-		color: var(--color-success-high);
-		border-color: var(--color-success-low);
-		background-color: var(--color-success-low);
-
-		& a {
-			color: inherit;
-			text-decoration: underline;
-			text-underline-offset: 2px;
-
-			&:hover {
-				color: var(--color-text-high);
-			}
-		}
-	}
-
-	&.unlinked {
-		color: var(--color-warning-high);
-		border-color: var(--color-warning-low);
-		background-color: var(--color-warning-low);
-	}
-
-	&.failed {
-		color: var(--color-error-high);
-		border-color: var(--color-error-low);
-		background-color: var(--color-error-low);
-	}
-}
-
-@keyframes scanner-pulse {
-	50% {
-		opacity: 0.25;
-		transform: scale(0.8);
-	}
-}
-
 .error {
-	padding: 0 var(--s-4) var(--s-2-5);
 	font-size: var(--font-2xs);
 	color: var(--color-error);
 }
 
-/* source event cards, nested under their match card via an indent rail */
-.events {
-	--scanner-card-padding: var(--s-2-5) 14px;
-
+/* the expanded content, indented under its card via a rail */
+.details {
 	display: flex;
 	flex-direction: column;
-	gap: var(--s-2);
+	gap: var(--s-4);
 	margin-inline-start: var(--s-2-5);
-	padding-inline-start: var(--s-3);
+	padding: var(--s-1) 0 var(--s-2) var(--s-3);
 	border-inline-start: var(--border-width) solid var(--color-border);
 	animation: scanner-detail-in 0.25s ease both;
 }
 
-/* the match's kills as one wrapping line of clock + name chips */
-.kills {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--s-1) var(--s-1-5);
-	font-size: var(--font-2xs);
-}
-
-.killsLabel {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--s-1);
-	margin-inline-end: var(--s-1);
-	color: var(--color-text-high);
-	font-weight: var(--weight-semi);
-	text-transform: uppercase;
-	letter-spacing: 0.08em;
-}
-
-.kill {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--s-1);
-	padding: var(--s-0-5) var(--s-2);
-	border-radius: var(--radius-full);
-	border: var(--border-style);
-	background-color: var(--color-bg);
-	font-weight: var(--weight-bold);
-	white-space: nowrap;
-}
-
-.killClock {
-	color: var(--color-text-high);
-	font-weight: var(--weight-semi);
-	font-variant-numeric: tabular-nums;
-}
-
 @keyframes scanner-detail-in {
 	from {
 		opacity: 0;
@@ -431,49 +316,194 @@ button.expand {
 	}
 }
 
-.setDivider {
-	display: flex;
-	align-items: center;
-	gap: var(--s-2-5);
-	margin-top: var(--s-1-5);
-	color: var(--color-text-high);
+.scoreboard {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+	gap: var(--s-2);
+}
+
+.team {
+	padding: var(--s-2) var(--s-3);
+	border-radius: var(--radius-box);
+	background: color-mix(in oklab, var(--color-bg-high) 60%, transparent);
+	border: var(--border-width) solid var(--color-border);
+
+	&.teamWin {
+		border-color: var(--color-success-low);
+	}
+
+	&.teamLoss {
+		border-color: var(--color-error-low);
+	}
+}
+
+.teamHeading {
+	margin-bottom: var(--s-1-5);
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-semi);
 	text-transform: uppercase;
 	letter-spacing: 0.08em;
+	color: var(--color-text-high);
+}
 
-	&::before,
-	&::after {
-		content: "";
-		flex: 1;
-		height: var(--border-width);
-		background-color: var(--color-border);
+.players {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: var(--font-xs);
+
+	& td {
+		padding: var(--s-0-5) var(--s-1-5);
+		vertical-align: middle;
+	}
+
+	& tr.pov {
+		font-weight: var(--weight-bold);
 	}
 }
 
-/* the two teams' weapons no longer fit beside each other: one row each */
-@container match-card (width < 460px) {
-	.weapons {
-		flex-direction: column;
-		align-items: flex-start;
-		row-gap: var(--s-3);
+/* the round weapon badge plus the cell padding, so the image is never squeezed */
+.weaponCell {
+	width: 40px;
+}
 
-		& .vs {
-			display: none;
-		}
+.name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 12rem;
+}
+
+.num {
+	text-align: right;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+	color: var(--color-text-high);
+}
+
+.deathsKills {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+	gap: var(--s-3);
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+}
+
+.columnHeading {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--color-text-high);
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	font-size: var(--font-xs);
+}
+
+.clock {
+	flex-shrink: 0;
+	width: 3rem;
+	color: var(--color-text-high);
+	font-variant-numeric: tabular-nums;
+}
+
+.rowLabel {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.streak {
+	font-weight: var(--weight-bold);
+	color: var(--color-text-accent);
+}
+
+.playSlot {
+	flex-shrink: 0;
+	width: 22px;
+	height: 22px;
+}
+
+.playButton {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	border: var(--border-style);
+	border-radius: var(--radius-full);
+	background: var(--color-bg);
+	color: var(--color-text-accent);
+	cursor: pointer;
+
+	&:hover {
+		background: var(--color-bg-higher);
 	}
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+	}
+}
+
+.builds {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+}
+
+.buildGrid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--s-3) var(--s-4);
+}
+
+.build {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+}
+
+.buildHead {
+	display: flex;
+	align-items: center;
+	gap: var(--s-1-5);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+}
+
+.buildName {
+	max-width: 9rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.buildRows {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.buildRow {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	min-height: 22px;
 }
 
 @media (prefers-reduced-motion: reduce) {
 	.matchCard,
-	.matchCard.sending::after,
-	.matchCard.flashSent::after,
-	.matchCard.flashFailed .main,
-	.events,
-	.chip.live .dot,
-	.chip.inProgress .dot,
-	.chip.queued .dot,
-	.chip.sending .dot {
+	.matchCard.flashUploaded::after,
+	.matchCard.flashFailed .head,
+	.details {
 		animation: none;
 	}
 }
diff --git a/app/features/scanner/components/MatchCard.tsx b/app/features/scanner/components/MatchCard.tsx
index 823e306ea..6c804c0a6 100644
--- a/app/features/scanner/components/MatchCard.tsx
+++ b/app/features/scanner/components/MatchCard.tsx
@@ -1,35 +1,46 @@
 /**
- * Glanceable card for one ScannerMatch in the live feed: stage banner, mode +
- * stage, score, team weapons and /ingest status. Expanding reveals the
- * match's kills (from the feed) and the source event cards below it.
+ * One game of a session or file, the same card in every view. Collapsed it
+ * is one row: mode and stage, the result, the POV weapon and K/D/S, then
+ * the game's clips and its upload state. Expanded it shows the data and
+ * nothing interpreted: the scoreboard, the objective + player-status
+ * timeline, deaths and kills (each with a ▶ when a clip covers it) and the
+ * builds read for both teams.
  */
-
 import clsx from "clsx";
-import { ChevronDown, Crosshair } from "lucide-react";
-import type * as React from "react";
+import { ChevronDown, Play } from "lucide-react";
 import { useState } from "react";
 import { Ability } from "~/components/Ability";
 import { SendouButton } from "~/components/elements/Button";
+import { GameTimeline } from "~/components/GameTimeline";
 import { ModeImage, WeaponImage } from "~/components/Image";
 import { matchScoresFromObjective } from "~/components/objective-timeline-utils";
 import { StageBannerBox } from "~/components/StageBannerBox";
-import type { IngestedMatchLink } from "~/features/scanner-ingest/scanner-ingest-schemas";
+import { abilities as ALL_ABILITIES } from "~/modules/in-game-lists/abilities";
 import type {
 	AbilityWithUnknown,
-	MainWeaponId,
 	ModeShort,
 } from "~/modules/in-game-lists/types";
-import { sendouQMatchPage, tournamentMatchPage } from "~/utils/urls";
-import type { IngestSkipReason } from "../core/match-builder";
+import { clipCovers } from "../core/clips/scoring";
+import {
+	DEATH_EVENT_TYPE,
+	type DeathData,
+} from "../core/detectors/death/index";
+import { formatClock, formatPosition } from "../core/format";
+import { lobbyLabel, modeLabel, stageLabel, weaponLabel } from "../core/labels";
+import type { BuiltMatch } from "../core/match-builder";
 import type {
 	ScannerMatch,
 	ScannerMatchKill,
 	ScannerMatchPlayer,
 } from "../core/scanner-match";
-import type { SendStatus } from "../store/events";
-import { formatClock, formatTime, useEventTimeFormatter } from "./format";
-import { lobbyLabel, modeLabel, stageLabel } from "./labels";
+import { matchResult } from "../core/sessions";
+import type { ScannerClip } from "../store/clips";
+import type { GetFrame } from "./EventCard";
 import styles from "./MatchCard.module.css";
+import { playerStatusTeams } from "./player-status-view";
+import { RawDetections } from "./RawDetections";
+import type { ScanEvent, SessionKind } from "./session-data";
+import { UploadChip, type UploadState } from "./UploadChip";
 
 /** the game score a knockout wins at */
 const KO_MATCH_SCORE = 100;
@@ -41,120 +52,144 @@ const KO_MATCH_SCORE = 100;
 const MATCH_CLOCK_SECONDS: Partial<Record<ModeShort, number>> = { TW: 180 };
 const DEFAULT_MATCH_CLOCK_SECONDS = 300;
 
-/** one per gear slot: [head, clothes, shoes], the arc's left-to-right order */
-const UNKNOWN_MAIN_ABILITIES: AbilityWithUnknown[] = [
-	"UNKNOWN",
-	"UNKNOWN",
-	"UNKNOWN",
-];
+/** The scan knows the on-screen sides only, not who is playing. */
+const TEAM_LABELS = ["Alpha", "Bravo"] as const;
 
-/**
- * Where each main sits on the half-moon under the weapon. A positive CSS
- * rotation swings the arc's offset to the *left*, so angles descend to read
- * head, clothes, shoes left to right.
- */
-const ABILITY_ARC_ANGLES = ["44deg", "0deg", "-44deg"];
+const ROW_LABELS = ["head", "clothes", "shoes"] as const;
 
-const SEND_STATE_CLASS: Record<SendStatus["state"], string> = {
-	queued: styles.queued,
-	sending: styles.sending,
-	sent: styles.sent,
-	unlinked: styles.unlinked,
-	failed: styles.failed,
-};
+/** the gear row a slot-only main can only sit in; stackables fit anywhere */
+const MAIN_ONLY_ROW = new Map<string, number>(
+	ALL_ABILITIES.flatMap((ability): [string, number][] =>
+		ability.type === "HEAD_MAIN_ONLY"
+			? [[ability.name, 0]]
+			: ability.type === "CLOTHES_MAIN_ONLY"
+				? [[ability.name, 1]]
+				: ability.type === "SHOES_MAIN_ONLY"
+					? [[ability.name, 2]]
+					: [],
+	),
+);
 
-const SEND_CHIP_LABELS: Record<Exclude<SendStatus["state"], "sent">, string> = {
-	queued: "queued",
-	sending: "sending…",
-	unlinked: "waiting for report",
-	failed: "failed",
-};
+const PLAYERS_PER_TEAM = 4;
 
 export function MatchCard({
-	match,
-	send,
-	onSend,
-	live = false,
-	inProgress = false,
-	skipReason,
-	justFormed = false,
-	children,
+	built,
+	number,
+	originT,
+	kind,
+	justFormed,
+	expandable,
+	upload,
+	clips,
+	onPlayClip,
+	getFrame,
+	debug,
 }: {
-	match: ScannerMatch;
-	/** the match's /ingest status, aggregated from its source events */
-	send?: SendStatus;
-	/** when set, shows a Send/Retry button for this match */
-	onSend?: () => void;
-	/** still being played: no closing scoreboard yet and the scan is running */
-	live?: boolean;
-	/** the newest match, still being formulated — shows an "in progress" chip; at most one card */
-	inProgress?: boolean;
-	/** set = ingestSkipReasons held the match back from /ingest */
-	skipReason?: IngestSkipReason;
+	built: BuiltMatch<ScanEvent>;
+	/** 1-based position in the session, oldest first */
+	number: number;
+	/** stream/file second positions count from */
+	originT: number;
+	kind: SessionKind;
 	/** the scan just formed this match — play the enter animation */
-	justFormed?: boolean;
-	/** expandable detail content, typically the source event cards */
-	children?: React.ReactNode;
+	justFormed: boolean;
+	/** false while the match is still being scanned: no expand button yet */
+	expandable: boolean;
+	upload: UploadState;
+	/** the clips this game produced, best first */
+	clips: readonly ScannerClip[];
+	onPlayClip: (clip: ScannerClip) => void;
+	getFrame: (event: ScanEvent) => GetFrame | undefined;
+	debug: boolean;
 }) {
+	const { match } = built;
 	const [expanded, setExpanded] = useState(false);
-	// fixed at mount: re-rendering must not cut the animation short, and a card
-	// remounting for another reason (switching lobby tabs) must not replay it
+	// fixed at mount: re-rendering must not cut the animation short
 	const [enter] = useState(justFormed);
-
-	// one-shot flash animations only on a state *change*, so already-sent
-	// matches don't replay the glow on every mount
-	const [prevSendState, setPrevSendState] = useState(send?.state);
-	const [flash, setFlash] = useState<"sent" | "failed" | null>(null);
-	if (prevSendState !== send?.state) {
-		setPrevSendState(send?.state);
+	const [prevUploadKind, setPrevUploadKind] = useState(upload.kind);
+	const [flash, setFlash] = useState<"uploaded" | "failed" | null>(null);
+	if (prevUploadKind !== upload.kind) {
+		setPrevUploadKind(upload.kind);
 		setFlash(
-			send?.state === "sent" || send?.state === "failed" ? send.state : null,
+			upload.kind === "uploaded" || upload.kind === "failed"
+				? upload.kind
+				: null,
 		);
 	}
 
+	const result = matchResult(match);
+	const pov = povPlayer(match);
 	const meta = [
-		modeLabel(match.mode),
-		skipReason === "lobby" ? lobbyLabel(match.lobby) : null,
-		match.startsAt !== null ? timeRangeLabel(match) : null,
+		kind === "vod" && match.startsAt !== null
+			? `at ${formatPosition(match.startsAt - originT)}`
+			: null,
+		match.lobby !== null && match.lobby !== "PRIVATE"
+			? lobbyLabel(match.lobby)
+			: null,
 		match.replayCode,
 		match.cast ? "cast" : null,
 	]
 		.filter(Boolean)
 		.join(" · ");
 
-	const inner = (
-		<>
+	const className = clsx(styles.matchCard, {
+		[styles.enter]: enter,
+		[styles.flashUploaded]: flash === "uploaded",
+		[styles.flashFailed]: flash === "failed",
+	});
+
+	const head = (
+		<div className={styles.head}>
 			<div className={styles.main}>
+				<span className={styles.number}>Game {number}</span>
 				{match.mode !== null ? (
-					<ModeImage mode={match.mode} size={30} className={styles.mode} />
+					<ModeImage mode={match.mode} size={26} className={styles.mode} />
 				) : null}
 				<div className={styles.headline}>
 					<div className={styles.title}>
-						<div className={styles.stage}>
+						{modeLabel(match.mode) ? (
+							<span className={styles.modeName}>
+								{modeLabel(match.mode)} ·{" "}
+							</span>
+						) : null}
+						<span className={styles.stage}>
 							{stageLabel(match.stage) ?? "Unknown stage"}
-						</div>
-						<StatusChip send={send} skipReason={skipReason} live={live} />
+						</span>
 					</div>
 					{meta ? <div className={styles.meta}>{meta}</div> : null}
-					<TeamWeapons match={match} />
 				</div>
 				<div className={styles.side}>
-					{live ? (
-						<span className={clsx(styles.chip, styles.live)}>
-							<span className={styles.dot} />
-							live
+					<Score match={match} result={result} />
+					{pov ? (
+						<span className={styles.kds}>
+							{pov.ka ?? "?"}/{pov.d ?? "?"}/{pov.s ?? "?"}
 						</span>
-					) : (
-						<Score match={match} inProgress={inProgress} />
-					)}
-					{onSend && send?.state !== "sent" && send?.state !== "sending" ? (
-						<button type="button" onClick={onSend}>
-							{send?.state === "failed" || send?.state === "unlinked"
-								? "Retry"
-								: "Send"}
-						</button>
 					) : null}
-					{children ? (
+					<UploadChip state={upload} />
+				</div>
+			</div>
+			<div className={styles.foot}>
+				<TeamWeapons match={match} />
+				{clips.length > 0 ? (
+					<span className={styles.clips}>
+						{clips.map((clip) => (
+							<button
+								key={clip.id}
+								type="button"
+								className={styles.clipChip}
+								onClick={() => onPlayClip(clip)}
+							>
+								<Play size={11} aria-hidden />
+								{clip.kills}k
+								{clip.time !== null
+									? ` · ${formatClock(elapsed(match.mode, clip.time))}`
+									: null}
+							</button>
+						))}
+					</span>
+				) : null}
+				<span className={styles.footEnd}>
+					{expandable ? (
 						<SendouButton
 							variant="minimal"
 							size="small"
@@ -162,144 +197,106 @@ export function MatchCard({
 							icon={<ChevronDown />}
 							className={clsx(styles.expand, { [styles.expanded]: expanded })}
 							aria-expanded={expanded}
-							aria-label={expanded ? "Hide events" : "Show events"}
+							aria-label={expanded ? "Hide details" : "Show details"}
 							onClick={() => setExpanded(!expanded)}
 						/>
 					) : null}
-				</div>
+				</span>
 			</div>
-			{send?.state === "failed" && send.error ? (
-				<div className={styles.error}>{send.error}</div>
+			{upload.kind === "failed" && upload.error ? (
+				<div className={styles.error}>{upload.error}</div>
 			) : null}
-		</>
-	);
-
-	const className = clsx(
-		styles.matchCard,
-		send?.state ? SEND_STATE_CLASS[send.state] : null,
-		{
-			[styles.enter]: enter,
-			[styles.live]: live,
-			[styles.flashSent]: flash === "sent",
-			[styles.flashFailed]: flash === "failed",
-		},
+		</div>
 	);
 
 	const card =
 		match.stage !== null ? (
 			<StageBannerBox stageId={match.stage} className={className}>
-				{inner}
+				{head}
 			</StageBannerBox>
 		) : (
-			<div className={className}>{inner}</div>
+			<div className={className}>{head}</div>
 		);
 
-	if (!children) return card;
 	return (
 		<div className={styles.group}>
 			{card}
-			{expanded ? (
-				<div className={styles.events}>
-					{match.kills ? (
-						<MatchKills kills={match.kills} mode={match.mode} />
+			{expanded && expandable ? (
+				<div className={styles.details}>
+					<Scoreboard match={match} result={result} />
+					<Builds match={match} />
+					{match.objective || match.playerStatus ? (
+						<GameTimeline
+							objectiveEvents={(match.objective?.samples ?? []).map(
+								(sample) => ({ t: sample.t, data: sample }),
+							)}
+							playerStatusSamples={match.playerStatus?.samples ?? []}
+							teams={playerStatusTeams(match, TEAM_LABELS)}
+						/>
+					) : null}
+					<DeathsAndKills built={built} clips={clips} onPlayClip={onPlayClip} />
+					{debug ? (
+						<RawDetections sources={built.sources} getFrame={getFrame} />
 					) : null}
-					{children}
 				</div>
 			) : null}
 		</div>
 	);
 }
 
-/** The POV player's splats off the kill feed, in the order they happened, stamped with match time elapsed. */
-function MatchKills({
-	kills,
-	mode,
-}: {
-	kills: readonly ScannerMatchKill[];
-	mode: ModeShort | null;
-}) {
+function povPlayer(match: ScannerMatch): ScannerMatchPlayer | undefined {
+	return match.pov
+		? match.teams[match.pov.team].players[match.pov.index]
+		: undefined;
+}
+
+/** time elapsed on the match clock from a time-left reading */
+function elapsed(mode: ModeShort | null, timeLeft: number): number {
 	const clockStart =
 		(mode !== null ? MATCH_CLOCK_SECONDS[mode] : undefined) ??
 		DEFAULT_MATCH_CLOCK_SECONDS;
-	return (
-		<div className={styles.kills}>
-			<span className={styles.killsLabel}>
-				<Crosshair size={12} aria-hidden />
-				kills · {kills.length}
-			</span>
-			{kills.map((kill, i) => (
-				<span key={i} className={styles.kill}>
-					<span className={styles.killClock}>
-						{kill.time !== null
-							? formatClock(Math.max(0, clockStart - kill.time))
-							: "?:??"}
-					</span>
-					{kill.name ?? "?"}
-				</span>
-			))}
-		</div>
-	);
-}
-
-/** Labeled rule above the newest card of each set in the feed. */
-export function SetDivider({ number }: { number: number }) {
-	return <div className={styles.setDivider}>Set {number}</div>;
-}
-
-function timeRangeLabel(match: ScannerMatch): string {
-	const start = formatTime(match.startsAt!);
-	return match.endsAt !== null && match.endsAt !== match.startsAt
-		? `${start}–${formatTime(match.endsAt)}`
-		: start;
-}
-
-function Score({
-	match,
-	inProgress,
-}: {
-	match: ScannerMatch;
-	inProgress: boolean;
-}) {
-	if (match.matchScores === null) {
-		if (!inProgress) return null;
-		return (
-			<span className={clsx(styles.chip, styles.inProgress)}>
-				<span className={styles.dot} />
-				in progress
-			</span>
-		);
-	}
-	const objectiveScores = matchScoresFromObjective(
-		match.objective?.samples ?? [],
-	);
-	const [left, right] = displayOrder(match);
-
-	return (
-		<div className={styles.matchScore}>
-			<span className={winnerClass(match, left)}>
-				{scoreLabel(match.matchScores[left], objectiveScores[left])}
-			</span>
-			<span> – </span>
-			<span className={winnerClass(match, right)}>
-				{scoreLabel(match.matchScores[right], objectiveScores[right])}
-			</span>
-		</div>
-	);
+	return Math.max(0, clockStart - timeLeft);
 }
 
 /**
  * `teams` order is winner-first on a scoreboard-closed match, so it flips
- * between games. The card keeps the scan's own side (alpha) left and the
- * enemy right for every match so consecutive games line up; footage with no
- * POV seat read (casts) keeps `teams` order.
+ * between games. The card keeps the scan's own side left and the enemy right
+ * for every match so consecutive games line up; footage with no POV seat
+ * read (casts) keeps `teams` order.
  */
 function displayOrder(match: ScannerMatch): [0 | 1, 0 | 1] {
 	return match.pov?.team === 1 ? [1, 0] : [0, 1];
 }
 
-function winnerClass(match: ScannerMatch, team: 0 | 1): string | undefined {
-	if (match.winner === null) return undefined;
-	return match.winner === team ? styles.win : styles.lose;
+function Score({
+	match,
+	result,
+}: {
+	match: ScannerMatch;
+	result: "win" | "loss" | null;
+}) {
+	if (match.matchScores === null && match.winner === null) return null;
+	const objectiveScores = matchScoresFromObjective(
+		match.objective?.samples ?? [],
+	);
+	const [left, right] = displayOrder(match);
+	const scores = match.matchScores ?? [null, null];
+	return (
+		<span className={styles.score}>
+			{result ? (
+				<span className={result === "win" ? styles.win : styles.loss}>
+					{result === "win" ? "WIN" : "LOSS"}
+				</span>
+			) : null}
+			{match.matchScores !== null || objectiveScores.some((s) => s !== null) ? (
+				<span className={styles.scoreNumbers}>
+					{scoreLabel(scores[left], objectiveScores[left])}
+					<span className={styles.scoreDash}>–</span>
+					{scoreLabel(scores[right], objectiveScores[right])}
+				</span>
+			) : null}
+		</span>
+	);
 }
 
 /**
@@ -317,186 +314,329 @@ function scoreLabel(
 	if (objectiveScore !== null) {
 		return objectiveScore === KO_MATCH_SCORE ? "(KO)" : `(${objectiveScore})`;
 	}
-
 	return score === null ? "?" : String(score);
 }
 
-interface TeamWeapon {
-	weaponId: MainWeaponId;
-	/** the scan's own player — highlighted among the eight */
-	pov: boolean;
-	/** head/clothes/shoes mains; null when no death screen revealed the build */
-	mainAbilities: AbilityWithUnknown[] | null;
-}
-
+/** Both teams' weapons, always four a side: a slot the scan never read shows a ?. */
 function TeamWeapons({ match }: { match: ScannerMatch }) {
-	const weaponsOf = (team: 0 | 1): TeamWeapon[] =>
-		match.teams[team].players
-			.map((player, index) => ({
-				weaponId: player.weaponId,
-				pov: match.pov?.team === team && match.pov.index === index,
-				mainAbilities: mainAbilities(player),
-			}))
-			.filter((weapon): weapon is TeamWeapon => weapon.weaponId !== null);
 	const [left, right] = displayOrder(match);
-	const leftWeapons = weaponsOf(left);
-	const rightWeapons = weaponsOf(right);
-	if (leftWeapons.length + rightWeapons.length === 0) return null;
-	// one read build is enough to show the arcs; the rest fall back to unknowns
-	const withAbilities = [...leftWeapons, ...rightWeapons].some(
-		(weapon) => weapon.mainAbilities !== null,
-	);
-
 	return (
-		<div
-			className={clsx(styles.weapons, {
-				[styles.withAbilities]: withAbilities,
-			})}
-		>
-			{leftWeapons.length > 0 ? (
-				<WeaponRow weapons={leftWeapons} withAbilities={withAbilities} />
-			) : null}
-			{leftWeapons.length > 0 && rightWeapons.length > 0 ? (
-				<span className={styles.vs}>vs</span>
-			) : null}
-			{rightWeapons.length > 0 ? (
-				<WeaponRow weapons={rightWeapons} withAbilities={withAbilities} />
-			) : null}
-		</div>
+		<span className={styles.teamWeapons}>
+			{[left, right].map((team, side) => (
+				<span key={team} className={styles.weaponRow}>
+					{side === 1 ? <span className={styles.vs}>vs</span> : null}
+					{Array.from({ length: PLAYERS_PER_TEAM }, (_, index) => {
+						const weaponId = match.teams[team].players[index]?.weaponId ?? null;
+						const isPov = match.pov?.team === team && match.pov.index === index;
+						return weaponId !== null ? (
+							<WeaponImage
+								key={index}
+								weaponSplId={weaponId}
+								variant="build"
+								size={24}
+								className={clsx(styles.weapon, { [styles.pov]: isPov })}
+							/>
+						) : (
+							<span
+								key={index}
+								className={clsx(styles.weapon, styles.weaponUnknown, {
+									[styles.pov]: isPov,
+								})}
+								title="weapon not read"
+							>
+								?
+							</span>
+						);
+					})}
+				</span>
+			))}
+		</span>
 	);
 }
 
-/** The three gear mains of a build, or null when none were read; partial builds keep unknown slots. */
-function mainAbilities(
-	player: ScannerMatchPlayer,
-): AbilityWithUnknown[] | null {
-	const mains = UNKNOWN_MAIN_ABILITIES.map(
-		(unknown, slot) => player.abilities?.[slot]?.[0] ?? unknown,
-	);
-	return mains.some((ability) => ability !== "UNKNOWN") ? mains : null;
-}
-
-/** One team's weapons, kept together when the card is too narrow for both. */
-function WeaponRow({
-	weapons,
-	withAbilities,
+function Scoreboard({
+	match,
+	result,
 }: {
-	weapons: TeamWeapon[];
-	withAbilities: boolean;
+	match: ScannerMatch;
+	result: "win" | "loss" | null;
 }) {
+	if (match.teams.every((team) => team.players.length === 0)) return null;
+	const [left, right] = displayOrder(match);
 	return (
-		<div className={styles.weaponRow}>
-			{weapons.map((weapon, i) => (
+		<div className={styles.scoreboard}>
+			{[left, right].map((team) => (
 				<div
-					key={i}
-					className={clsx(styles.weaponSlot, {
-						[styles.withAbilities]: withAbilities,
+					key={team}
+					className={clsx(styles.team, {
+						[styles.teamWin]: match.winner === team,
+						[styles.teamLoss]: match.winner !== null && match.winner !== team,
 					})}
 				>
-					<WeaponImage
-						weaponSplId={weapon.weaponId}
-						variant="build"
-						size={28}
-						className={clsx(styles.weapon, { [styles.pov]: weapon.pov })}
-					/>
-					{withAbilities ? (
-						<AbilityArc
-							abilities={weapon.mainAbilities ?? UNKNOWN_MAIN_ABILITIES}
-						/>
-					) : null}
+					<div className={styles.teamHeading}>
+						{TEAM_LABELS[team]}
+						{match.winner === team ? " · WIN" : null}
+						{result === null && match.pov?.team === team ? " · you" : null}
+					</div>
+					<table className={styles.players}>
+						<tbody>
+							{match.teams[team].players.map((player, index) => {
+								const isPov =
+									match.pov?.team === team && match.pov.index === index;
+								return (
+									<tr key={index} className={clsx({ [styles.pov]: isPov })}>
+										<td className={styles.weaponCell}>
+											{player.weaponId !== null ? (
+												<WeaponImage
+													weaponSplId={player.weaponId}
+													variant="build"
+													size={24}
+													className={clsx(styles.weapon, {
+														[styles.pov]: isPov,
+													})}
+												/>
+											) : (
+												<span
+													className={clsx(styles.weapon, styles.weaponUnknown, {
+														[styles.pov]: isPov,
+													})}
+													title="weapon not read"
+												>
+													?
+												</span>
+											)}
+										</td>
+										<td className={styles.name}>
+											{isPov ? "▸ " : null}
+											{player.name ?? "?"}
+										</td>
+										<td className={styles.num}>
+											{player.ka ?? "?"}/{player.d ?? "?"}/{player.s ?? "?"}
+										</td>
+										<td className={styles.num}>
+											{player.paint !== null ? `${player.paint}p` : ""}
+										</td>
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
 				</div>
 			))}
 		</div>
 	);
 }
 
-/** Gear mains laid out as a half-moon hugging the weapon's lower edge. */
-function AbilityArc({ abilities }: { abilities: AbilityWithUnknown[] }) {
+interface DeathRow {
+	t: number;
+	timeLeft: number | null;
+	label: string;
+}
+
+/** The POV player's deaths (off the death overlays) and kills (off the kill feed), each with its clip. */
+function DeathsAndKills({
+	built,
+	clips,
+	onPlayClip,
+}: {
+	built: BuiltMatch<ScanEvent>;
+	clips: readonly ScannerClip[];
+	onPlayClip: (clip: ScannerClip) => void;
+}) {
+	const { match } = built;
+	const deaths: DeathRow[] = built.sources
+		.filter((event) => event.type === DEATH_EVENT_TYPE)
+		.map((event) => {
+			const data = event.data as DeathData;
+			return {
+				t: event.t,
+				timeLeft: matchClockAt(match, event.t),
+				label: weaponLabel(data.weaponType, data.weaponId) ?? data.name ?? "?",
+			};
+		});
+	const kills = match.kills ?? [];
+	if (deaths.length === 0 && kills.length === 0) return null;
+	const clipAt = (t: number) => clips.find((clip) => clipCovers(clip, t));
+
 	return (
-		<div className={styles.abilityArc}>
-			{abilities.map((ability, i) => (
-				<span
-					key={i}
-					className={styles.arcSlot}
-					style={
-						{ "--arc-angle": ABILITY_ARC_ANGLES[i] } as React.CSSProperties
-					}
-				>
-					<Ability
-						ability={ability}
-						size="TINY"
-						className={styles.arcAbility}
-					/>
-				</span>
+		<div className={styles.deathsKills}>
+			<div className={styles.column}>
+				<div className={styles.columnHeading}>Deaths · {deaths.length}</div>
+				{deaths.map((death, i) => (
+					<div key={i} className={styles.row}>
+						<span className={styles.clock}>
+							{death.timeLeft !== null
+								? formatClock(elapsed(match.mode, death.timeLeft))
+								: "–:––"}
+						</span>
+						<span className={styles.rowLabel}>{death.label}</span>
+						<PlayButton clip={clipAt(death.t)} onPlayClip={onPlayClip} />
+					</div>
+				))}
+			</div>
+			<div className={styles.column}>
+				<div className={styles.columnHeading}>Kills · {kills.length}</div>
+				{groupKills(kills).map((group, i) => (
+					<div key={i} className={styles.row}>
+						<span className={styles.clock}>
+							{group[0]!.time !== null
+								? formatClock(elapsed(match.mode, group[0]!.time))
+								: "–:––"}
+						</span>
+						<span className={styles.rowLabel}>
+							{group.map((kill) => kill.name ?? "?").join(" · ")}
+							{group.length > 1 ? (
+								<span className={styles.streak}> {group.length}k</span>
+							) : null}
+						</span>
+						<PlayButton
+							clip={clipAt(group.at(-1)!.t)}
+							onPlayClip={onPlayClip}
+						/>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+/** kills within a few seconds of each other read as one line */
+const KILL_GROUP_GAP_S = 6;
+
+function groupKills(kills: readonly ScannerMatchKill[]): ScannerMatchKill[][] {
+	const groups: ScannerMatchKill[][] = [];
+	for (const kill of kills) {
+		const group = groups.at(-1);
+		if (group && kill.t - group.at(-1)!.t <= KILL_GROUP_GAP_S) group.push(kill);
+		else groups.push([kill]);
+	}
+	return groups;
+}
+
+function PlayButton({
+	clip,
+	onPlayClip,
+}: {
+	clip: ScannerClip | undefined;
+	onPlayClip: (clip: ScannerClip) => void;
+}) {
+	if (!clip) return <span className={styles.playSlot} />;
+	return (
+		<button
+			type="button"
+			className={clsx(styles.playSlot, styles.playButton)}
+			aria-label="Play clip"
+			onClick={() => onPlayClip(clip)}
+		>
+			<Play size={12} aria-hidden />
+		</button>
+	);
+}
+
+/**
+ * The match timer's reading at stream time `t`, projected from the nearest
+ * read that carried one (counter, status strip or kill feed); null when the
+ * match had no timed read.
+ */
+function matchClockAt(match: ScannerMatch, t: number): number | null {
+	const timed = [
+		...(match.objective?.samples ?? []),
+		...(match.playerStatus?.samples ?? []),
+		...(match.kills ?? []),
+	].filter((sample) => sample.time !== null);
+	if (timed.length === 0) return null;
+	const nearest = timed.reduce((best, sample) =>
+		Math.abs(sample.t - t) < Math.abs(best.t - t) ? sample : best,
+	);
+	return Math.max(0, nearest.time! - (t - nearest.t));
+}
+
+/**
+ * Builds cover both teams: the POV player's full gear comes from the
+ * personal-results screen, an enemy's full grid from the death overlay when
+ * they splatted you, and everyone else's mains from the minimap cards. A row
+ * renders as far as it was read, with unread slots blank.
+ */
+function Builds({ match }: { match: ScannerMatch }) {
+	const [left, right] = displayOrder(match);
+	const players = [left, right].flatMap((team) =>
+		match.teams[team].players
+			.map((player, index) => ({
+				player,
+				isPov: match.pov?.team === team && match.pov.index === index,
+			}))
+			.filter(({ player }) => player.abilities && player.abilities.length > 0),
+	);
+	if (players.length === 0) return null;
+	return (
+		<div className={styles.builds}>
+			<div className={styles.columnHeading}>Builds</div>
+			<div className={styles.buildGrid}>
+				{players.map(({ player, isPov }, i) => (
+					<div key={i} className={styles.build}>
+						<div className={styles.buildHead}>
+							{player.weaponId !== null ? (
+								<WeaponImage
+									weaponSplId={player.weaponId}
+									variant="build"
+									size={22}
+								/>
+							) : null}
+							<span className={styles.buildName}>
+								{isPov ? "You" : (player.name ?? "?")}
+							</span>
+						</div>
+						<BuildRows abilities={player.abilities!} />
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function BuildRows({ abilities }: { abilities: AbilityWithUnknown[][] }) {
+	const rows = gearRows(abilities);
+	return (
+		<div className={styles.buildRows}>
+			{ROW_LABELS.map((label, row) => (
+				<div key={label} className={styles.buildRow}>
+					{(rows[row] ?? []).map((ability, slot) => (
+						<Ability
+							key={slot}
+							ability={ability}
+							size={slot === 0 ? "SUBTINY" : "TINY"}
+						/>
+					))}
+				</div>
 			))}
 		</div>
 	);
 }
 
-function StatusChip({
-	send,
-	skipReason,
-	live,
-}: {
-	send?: SendStatus;
-	skipReason?: IngestSkipReason;
-	live: boolean;
-}) {
-	const formatSentAt = useEventTimeFormatter();
-	if (skipReason) {
-		return (
-			<span className={styles.chip}>
-				{skipReason === "disconnect" ? "disconnect" : "not ingested"}
-			</span>
-		);
+/**
+ * Rows in head/clothes/shoes order. A read lists rows as they were seen, but
+ * a slot-only main (Respawn Punisher is clothes only, Stealth Jump shoes
+ * only) pins its row to that gear; the other rows take the free slots in
+ * their read order.
+ */
+function gearRows(
+	abilities: readonly AbilityWithUnknown[][],
+): (AbilityWithUnknown[] | undefined)[] {
+	const rows: (AbilityWithUnknown[] | undefined)[] = [
+		undefined,
+		undefined,
+		undefined,
+	];
+	const loose: AbilityWithUnknown[][] = [];
+	for (const row of abilities.slice(0, ROW_LABELS.length)) {
+		const pinned = row[0] === undefined ? undefined : MAIN_ONLY_ROW.get(row[0]);
+		if (pinned !== undefined && rows[pinned] === undefined) rows[pinned] = row;
+		else loose.push(row);
 	}
-	if (send?.state === "sent") {
-		return (
-			<span
-				className={clsx(styles.chip, styles.sent)}
-				title={`ingested ${formatSentAt(send.at)}`}
-			>
-				✓
-				{send.link ? (
-					<a
-						href={ingestedMatchUrl(send.link)}
-						target="_blank"
-						rel="noreferrer"
-					>
-						{ingestedMatchLabel(send.link)}
-					</a>
-				) : null}
-			</span>
-		);
+	for (const row of loose) {
+		const free = rows.indexOf(undefined);
+		if (free === -1) break;
+		rows[free] = row;
 	}
-	if (send) {
-		return (
-			<span
-				className={clsx(styles.chip, SEND_STATE_CLASS[send.state])}
-				title={send.error}
-			>
-				{send.state === "queued" || send.state === "sending" ? (
-					<span className={styles.dot} />
-				) : null}
-				{SEND_CHIP_LABELS[send.state]}
-			</span>
-		);
-	}
-	if (live) return null;
-	return <span className={styles.chip}>not sent</span>;
-}
-
-function ingestedMatchUrl(link: IngestedMatchLink): string {
-	return link.type === "tournament"
-		? tournamentMatchPage({
-				tournamentId: link.tournamentId,
-				matchId: link.matchId,
-			})
-		: sendouQMatchPage(link.groupMatchId);
-}
-
-function ingestedMatchLabel(link: IngestedMatchLink): string {
-	return link.type === "tournament"
-		? `Match ID #${link.matchId}`
-		: `SQ Match ID #${link.groupMatchId}`;
+	return rows;
 }
diff --git a/app/features/scanner/components/MatchLobbyTabs.module.css b/app/features/scanner/components/MatchLobbyTabs.module.css
deleted file mode 100644
index 772c4e2de..000000000
--- a/app/features/scanner/components/MatchLobbyTabs.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.matchList {
-	display: flex;
-	flex-direction: column;
-	gap: var(--s-3);
-}
diff --git a/app/features/scanner/components/MatchLobbyTabs.tsx b/app/features/scanner/components/MatchLobbyTabs.tsx
deleted file mode 100644
index a60a5d12b..000000000
--- a/app/features/scanner/components/MatchLobbyTabs.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Lobby tabs over the match feed: private battles (what /ingest cares about)
- * split from X Battles and everything else. Sets are a private battle concept,
- * so only that tab gets set dividers, numbered within the tab.
- */
-
-import { Fragment, useEffect, useRef } from "react";
-import {
-	SendouTab,
-	SendouTabList,
-	SendouTabPanel,
-	SendouTabs,
-} from "~/components/elements/Tabs";
-import type { DetectedEvent } from "../core/detectors/types";
-import type { BuiltMatch } from "../core/match-builder";
-import { assignMatchSets } from "../core/match-sets";
-import type { ScannerLobby } from "../scanner-types";
-import { SetDivider } from "./MatchCard";
-import styles from "./MatchLobbyTabs.module.css";
-
-type LobbyGroup = "private" | "x" | "other";
-
-const LOBBY_GROUPS: LobbyGroup[] = ["private", "x", "other"];
-
-const LOBBY_GROUP_LABELS: Record<LobbyGroup, string> = {
-	private: "Private Battle",
-	x: "X Battle",
-	other: "Other",
-};
-
-const NO_KEYS: ReadonlySet<React.Key> = new Set();
-
-export function MatchLobbyTabs<E extends DetectedEvent>({
-	matches,
-	keyOf,
-	renderMatch,
-}: {
-	/** built matches in chronological order (oldest first) */
-	matches: readonly BuiltMatch<E>[];
-	/** stable render key for one match, typically its first source event's id */
-	keyOf: (built: BuiltMatch<E>) => React.Key;
-	/** `justFormed`: the match appeared while the page was open (enter animation) */
-	renderMatch: (built: BuiltMatch<E>, justFormed: boolean) => React.ReactNode;
-}) {
-	const justFormedKeys = useJustFormedKeys(matches.map(keyOf));
-
-	const groups = LOBBY_GROUPS.map((group) => ({
-		group,
-		matches: matches.filter((built) => lobbyGroup(built.match.lobby) === group),
-	})).filter(({ matches: groupMatches }) => groupMatches.length > 0);
-
-	if (groups.length === 0) return null;
-
-	return (
-		<SendouTabs>
-			<SendouTabList>
-				{groups.map(({ group, matches: groupMatches }) => (
-					<SendouTab key={group} id={group} number={groupMatches.length}>
-						{LOBBY_GROUP_LABELS[group]}
-					</SendouTab>
-				))}
-			</SendouTabList>
-			{groups.map(({ group, matches: groupMatches }) => (
-				<SendouTabPanel key={group} id={group} className={styles.matchList}>
-					<MatchList
-						matches={groupMatches}
-						sets={group === "private"}
-						keyOf={keyOf}
-						justFormedKeys={justFormedKeys}
-						renderMatch={renderMatch}
-					/>
-				</SendouTabPanel>
-			))}
-		</SendouTabs>
-	);
-}
-
-function lobbyGroup(lobby: ScannerLobby | null): LobbyGroup {
-	if (lobby === "PRIVATE") return "private";
-	if (lobby === "X") return "x";
-	return "other";
-}
-
-/**
- * Keys of the matches that showed up since the previous render. A list
- * arriving whole (feed loaded from storage, a saved VoD opened) is not "just
- * formed": every card would animate in for something the user did not watch.
- */
-function useJustFormedKeys(keys: React.Key[]): ReadonlySet<React.Key> {
-	const seenRef = useRef<Set<React.Key> | null>(null);
-	const seen = seenRef.current;
-
-	// after commit, not during render: under StrictMode the render runs twice
-	// and the second pass would find every key already seen
-	useEffect(() => {
-		seenRef.current = new Set(keys);
-	});
-
-	if (seen === null) return NO_KEYS;
-	const justFormed = keys.filter((key) => !seen.has(key));
-	return justFormed.length === keys.length && keys.length > 1
-		? NO_KEYS
-		: new Set(justFormed);
-}
-
-function MatchList<E extends DetectedEvent>({
-	matches,
-	sets,
-	keyOf,
-	justFormedKeys,
-	renderMatch,
-}: {
-	matches: readonly BuiltMatch<E>[];
-	sets: boolean;
-	keyOf: (built: BuiltMatch<E>) => React.Key;
-	justFormedKeys: ReadonlySet<React.Key>;
-	renderMatch: (built: BuiltMatch<E>, justFormed: boolean) => React.ReactNode;
-}) {
-	const setNumbers = sets ? assignMatchSets(matches.map((b) => b.match)) : [];
-	const showSetDividers = (setNumbers.at(-1) ?? 1) > 1;
-
-	// newest match on top; the builder keeps ascending time order
-	return [...matches].reverse().map((built, reverseIndex) => {
-		const index = matches.length - 1 - reverseIndex;
-		const key = keyOf(built);
-		return (
-			<Fragment key={key}>
-				{showSetDividers && setNumbers[index + 1] !== setNumbers[index] ? (
-					<SetDivider number={setNumbers[index]!} />
-				) : null}
-				{renderMatch(built, justFormedKeys.has(key))}
-			</Fragment>
-		);
-	});
-}
diff --git a/app/features/scanner/components/MetaChips.tsx b/app/features/scanner/components/MetaChips.tsx
index 0354755a3..ff8ba930f 100644
--- a/app/features/scanner/components/MetaChips.tsx
+++ b/app/features/scanner/components/MetaChips.tsx
@@ -4,8 +4,8 @@
  */
 
 import { Clock, Gauge } from "lucide-react";
+import { formatTime } from "../core/format";
 import { EventTypeIcon } from "./EventTypeIcon";
-import { formatTime } from "./format";
 import styles from "./MetaChips.module.css";
 
 export function MetaPills({
diff --git a/app/features/scanner/components/MinimapCard.tsx b/app/features/scanner/components/MinimapCard.tsx
index e628d6fd1..10465ba62 100644
--- a/app/features/scanner/components/MinimapCard.tsx
+++ b/app/features/scanner/components/MinimapCard.tsx
@@ -10,6 +10,7 @@ import {
 	type MinimapEnemy,
 	type MinimapTeammate,
 } from "../core/detectors/minimap/index";
+import { stageLabel } from "../core/labels";
 import {
 	EventCardMeta,
 	EventCardShell,
@@ -18,7 +19,6 @@ import {
 } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
 import { useEventTimeFormatter } from "./format";
-import { stageLabel } from "./labels";
 import { MetaPills } from "./MetaChips";
 import styles from "./MinimapCard.module.css";
 
diff --git a/app/features/scanner/components/NotFound.module.css b/app/features/scanner/components/NotFound.module.css
new file mode 100644
index 000000000..2aee8635c
--- /dev/null
+++ b/app/features/scanner/components/NotFound.module.css
@@ -0,0 +1,11 @@
+.notFound {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	font-size: var(--font-xs);
+	color: var(--color-text-high);
+
+	& p {
+		margin: 0;
+	}
+}
diff --git a/app/features/scanner/components/NotFound.tsx b/app/features/scanner/components/NotFound.tsx
new file mode 100644
index 000000000..3bed43d25
--- /dev/null
+++ b/app/features/scanner/components/NotFound.tsx
@@ -0,0 +1,20 @@
+/** A view whose session or VoD is no longer in the local store. */
+import type * as React from "react";
+import { Link } from "react-router";
+import { SCANNER_PAGE } from "~/utils/urls";
+import { scannerSearchParams } from "../scanner-search-params";
+import styles from "./NotFound.module.css";
+
+export function NotFound({ children }: { children: React.ReactNode }) {
+	return (
+		<div className={styles.notFound}>
+			<p>{children}</p>
+			<Link
+				to={scannerSearchParams.href(SCANNER_PAGE, {})}
+				defaultShouldRevalidate={false}
+			>
+				← Back to the scanner
+			</Link>
+		</div>
+	);
+}
diff --git a/app/features/scanner/components/ObjectiveCard.tsx b/app/features/scanner/components/ObjectiveCard.tsx
index ed606eaf3..a77c630ee 100644
--- a/app/features/scanner/components/ObjectiveCard.tsx
+++ b/app/features/scanner/components/ObjectiveCard.tsx
@@ -2,9 +2,10 @@ import {
 	OBJECTIVE_EVENT_TYPE,
 	type ObjectiveData,
 } from "../core/detectors/objective/index";
+import { formatClock } from "../core/format";
 import { EventCardMeta, EventCardShell } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
-import { formatClock, useEventTimeFormatter } from "./format";
+import { useEventTimeFormatter } from "./format";
 import { MetaPills } from "./MetaChips";
 
 export function ObjectiveCard(props: {
diff --git a/app/features/scanner/components/PastSessionView.module.css b/app/features/scanner/components/PastSessionView.module.css
new file mode 100644
index 000000000..87aa97acf
--- /dev/null
+++ b/app/features/scanner/components/PastSessionView.module.css
@@ -0,0 +1,9 @@
+.title {
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
+}
+
+.summary {
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+}
diff --git a/app/features/scanner/components/PastSessionView.tsx b/app/features/scanner/components/PastSessionView.tsx
new file mode 100644
index 000000000..f922d4096
--- /dev/null
+++ b/app/features/scanner/components/PastSessionView.tsx
@@ -0,0 +1,121 @@
+/** A past live session: date, range and numbers over the shared SessionView, with Delete session. */
+import { Trash2 } from "lucide-react";
+import { SendouButton } from "~/components/elements/Button";
+import { FormWithConfirm } from "~/components/FormWithConfirm";
+import { LocaleTimeRange } from "~/components/LocaleTimeRange";
+import { useUser } from "~/features/auth/core/user";
+import {
+	useSearchParam,
+	useSearchParamsTyped,
+} from "~/modules/search-params/hooks";
+import { scannerSearchParams } from "../scanner-search-params";
+import { deleteEvents, loadEventFrame } from "../store/events";
+import { useClips } from "./clips-feed";
+import { ExportMenu } from "./ExportMenu";
+import { findSession, refreshFeed, useFeed } from "./events-feed";
+import { NotFound } from "./NotFound";
+import styles from "./PastSessionView.module.css";
+import { SessionHeader } from "./SessionHeader";
+import { SessionView } from "./SessionView";
+import { sessionLabel } from "./SettingsPopover";
+import { matchContaining } from "./sendou-ingest";
+import type { ScanEvent } from "./session-data";
+import { sendLive } from "./upload";
+
+export function PastSessionView() {
+	const [id] = useSearchParam(scannerSearchParams, "id");
+	const [, setParams] = useSearchParamsTyped(scannerSearchParams);
+	const feed = useFeed();
+	const clips = useClips();
+	const user = useUser();
+
+	const session = id === null ? null : findSession(feed, id);
+	if (!session) {
+		return feed.loaded ? (
+			<NotFound>This session is gone — sessions are kept for 30 days.</NotFound>
+		) : null;
+	}
+	const sessionClips = clips.filter(
+		(clip) =>
+			clip.bucket !== "vod" &&
+			clip.source.kind === "live" &&
+			clip.source.sessionKey === session.key,
+	);
+
+	const remove = async () => {
+		await deleteEvents(
+			session.events
+				.map((event) => event.id)
+				.filter((eventId): eventId is number => eventId !== undefined),
+		);
+		refreshFeed();
+		setParams({ view: "home" });
+	};
+
+	return (
+		<SessionView
+			kind="session"
+			events={session.events}
+			originT={session.originT}
+			clips={sessionClips}
+			clipsTitle="Clips"
+			running={false}
+			canUpload={Boolean(user)}
+			onUpload={(built) => {
+				const eventId = built.sources[0]?.id;
+				if (eventId !== undefined) void sendLive(matchContaining(eventId));
+			}}
+			getFrame={frameLoader}
+			emptyText="No games were read in this session."
+			header={(info) => (
+				<SessionHeader
+					actions={
+						<>
+							<ExportMenu
+								built={info.built}
+								events={session.events}
+								source={{
+									label: sessionLabel(session.startedAt),
+									originT: session.originT,
+								}}
+								clipCounts={info.clipCounts}
+								fileBase={`scanner-${new Date(session.startedAt).toISOString().slice(0, 10)}`}
+							/>
+							<FormWithConfirm
+								dialogHeading="Delete this session?"
+								description="Its games and frames are removed from this browser. Clips stay in the clip history."
+								onConfirm={() => void remove()}
+							>
+								<SendouButton
+									size="small"
+									variant="destructive"
+									icon={<Trash2 />}
+								>
+									Delete session
+								</SendouButton>
+							</FormWithConfirm>
+						</>
+					}
+				>
+					<div className={styles.title}>
+						<LocaleTimeRange
+							from={new Date(session.startedAt)}
+							to={new Date(session.endedAt)}
+							options={{ dateStyle: "medium", timeStyle: "short" }}
+							inline
+						/>
+						{info.summaryLine ? (
+							<span className={styles.summary}> · {info.summaryLine}</span>
+						) : null}
+					</div>
+				</SessionHeader>
+			)}
+		/>
+	);
+}
+
+function frameLoader(event: ScanEvent) {
+	return event.hasFrame && event.id !== undefined
+		? () => loadEventFrame(event.id!)
+		: undefined;
+}
diff --git a/app/features/scanner/components/PlayerStatusCard.tsx b/app/features/scanner/components/PlayerStatusCard.tsx
index fd46d1dc7..c8c68f08e 100644
--- a/app/features/scanner/components/PlayerStatusCard.tsx
+++ b/app/features/scanner/components/PlayerStatusCard.tsx
@@ -2,9 +2,10 @@ import {
 	PLAYER_STATUS_EVENT_TYPE,
 	type PlayerStatusData,
 } from "../core/detectors/objective/player-status";
+import { formatClock } from "../core/format";
 import { EventCardMeta, EventCardShell } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
-import { formatClock, useEventTimeFormatter } from "./format";
+import { useEventTimeFormatter } from "./format";
 import { MetaPills } from "./MetaChips";
 
 export function PlayerStatusCard(props: {
diff --git a/app/features/scanner/components/RawDetections.module.css b/app/features/scanner/components/RawDetections.module.css
new file mode 100644
index 000000000..c6aa4c95a
--- /dev/null
+++ b/app/features/scanner/components/RawDetections.module.css
@@ -0,0 +1,23 @@
+.details {
+	font-size: var(--font-2xs);
+}
+
+.summary {
+	cursor: pointer;
+	color: var(--color-text-high);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+}
+
+.events {
+	--scanner-card-padding: var(--s-2-5) 14px;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	margin-top: var(--s-2);
+	margin-inline-start: var(--s-2-5);
+	padding-inline-start: var(--s-3);
+	border-inline-start: var(--border-width) solid var(--color-border);
+}
diff --git a/app/features/scanner/components/RawDetections.tsx b/app/features/scanner/components/RawDetections.tsx
new file mode 100644
index 000000000..4e0982b0b
--- /dev/null
+++ b/app/features/scanner/components/RawDetections.tsx
@@ -0,0 +1,61 @@
+/**
+ * Debug: the source events behind a match card, as the per-event cards with
+ * their frames (Inspect, Save fixture). Counter/status/strip reads render as
+ * the timeline instead and stay out.
+ */
+import { useState } from "react";
+import { connectAbilities } from "../core/ability-harvest";
+import { OBJECTIVE_EVENT_TYPE } from "../core/detectors/objective/index";
+import { PLAYER_STATUS_EVENT_TYPE } from "../core/detectors/objective/player-status";
+import { STRIP_WEAPONS_EVENT_TYPE } from "../core/detectors/objective/strip-weapons";
+import { withoutRepeatEvents } from "./dedupe-events";
+import { EventCard, type GetFrame } from "./EventCard";
+import type { FixtureData } from "./fixture-export";
+import styles from "./RawDetections.module.css";
+import type { ScanEvent } from "./session-data";
+
+export function RawDetections({
+	sources,
+	getFrame,
+}: {
+	/** the match's source events, chronological */
+	sources: readonly ScanEvent[];
+	getFrame: (event: ScanEvent) => GetFrame | undefined;
+}) {
+	const [open, setOpen] = useState(false);
+	const events = withoutRepeatEvents(sources).filter(
+		(e) =>
+			e.type !== OBJECTIVE_EVENT_TYPE &&
+			e.type !== PLAYER_STATUS_EVENT_TYPE &&
+			e.type !== STRIP_WEAPONS_EVENT_TYPE,
+	);
+	const abilityMap = connectAbilities(sources);
+	return (
+		<details
+			className={styles.details}
+			open={open}
+			onToggle={(e) => setOpen(e.currentTarget.open)}
+		>
+			<summary className={styles.summary}>
+				Raw detections · {sources.length}
+			</summary>
+			{open ? (
+				<div className={styles.events}>
+					{events.map((e) => (
+						<EventCard
+							key={e.id ?? `${e.type}-${e.t}`}
+							type={e.type}
+							t={e.t}
+							confidence={e.confidence}
+							data={e.data as FixtureData}
+							abilities={abilityMap.get(e)}
+							thumbnail={e.thumbnail}
+							detectedAt={e.detectedAt}
+							getFrame={getFrame(e)}
+						/>
+					))}
+				</div>
+			) : null}
+		</details>
+	);
+}
diff --git a/app/features/scanner/components/ScannerApp.module.css b/app/features/scanner/components/ScannerApp.module.css
index afdcdb4fc..9b7f6c5ee 100644
--- a/app/features/scanner/components/ScannerApp.module.css
+++ b/app/features/scanner/components/ScannerApp.module.css
@@ -1,88 +1,4 @@
-/*
-The scanner's outermost box: it names the container the pages' container
-queries key off, and carries the app's own button look. Design tokens come
-from sendou.ink's app/styles/vars.css.
-*/
-
+/* The scanner's outermost box: it names the container the views' container queries key off. */
 .app {
 	container: scanner / inline-size;
-
-	/* the app's own buttons, kept at :where() specificity so any component
-	   class overrides it without having to win an ordering race */
-	& :where(button) {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--s-1-5);
-		border: var(--border-width) solid var(--color-fill-accent);
-		border-radius: var(--radius-field);
-		appearance: none;
-		background: var(--color-fill-accent);
-		color: var(--color-fg-on-accent);
-		cursor: pointer;
-		font-family: inherit;
-		font-size: var(--font-xs);
-		font-weight: var(--weight-bold);
-		padding: 0 var(--field-padding);
-		height: var(--field-size-sm);
-		white-space: nowrap;
-		user-select: none;
-
-		& > svg {
-			width: 16px;
-			height: 16px;
-		}
-
-		&:focus-visible {
-			outline: var(--focus-ring);
-			outline-offset: 1px;
-		}
-
-		&:active {
-			transform: translateY(1px);
-		}
-
-		&:disabled {
-			cursor: not-allowed;
-			opacity: 0.5;
-			transform: initial;
-		}
-	}
-}
-
-.topbar {
-	display: flex;
-	align-items: center;
-	gap: var(--s-6);
-	padding-bottom: var(--s-3);
-	border-bottom: var(--border-width) solid var(--color-bg-high);
-	margin-bottom: var(--s-4);
-
-	& nav {
-		display: flex;
-		gap: var(--s-2);
-
-		& a {
-			color: var(--color-text-high);
-			font-size: var(--font-xs);
-			font-weight: var(--weight-bold);
-			text-decoration: none;
-			padding: var(--s-1) var(--s-2-5);
-			border-radius: var(--radius-field);
-
-			&:hover {
-				color: var(--color-text);
-			}
-
-			&:focus-visible {
-				outline: var(--focus-ring);
-				outline-offset: 1px;
-			}
-
-			&.active {
-				color: var(--color-fg-accent);
-				background: var(--color-bg-high);
-			}
-		}
-	}
 }
diff --git a/app/features/scanner/components/ScannerApp.tsx b/app/features/scanner/components/ScannerApp.tsx
index a247d8262..c9b989330 100644
--- a/app/features/scanner/components/ScannerApp.tsx
+++ b/app/features/scanner/components/ScannerApp.tsx
@@ -1,67 +1,72 @@
-import clsx from "clsx";
-import { Link } from "react-router";
+/**
+ * The scanner's client tree: one container the views' container queries
+ * key off, and the view switch. The live capture and a running VoD scan are
+ * module singletons (live-session.ts, vod-scan.ts) mounted above this
+ * switch, so moving between views never stops them; only leaving the page
+ * cancels a scan, while a capture keeps running until Stop.
+ */
+import { useEffect } from "react";
 import { useUser } from "~/features/auth/core/user";
 import { useSearchParam } from "~/modules/search-params/hooks";
-import { SCANNER_PAGE } from "~/utils/urls";
-import {
-	SCANNER_TABS,
-	type ScannerTab,
-	scannerSearchParams,
-} from "../scanner-search-params";
+import { scannerSearchParams } from "../scanner-search-params";
+import { deleteVodClips } from "../store/clips";
+import { ClipsView } from "./ClipsView";
+import { refreshClips } from "./clips-feed";
 import { FixturesPage } from "./FixturesPage";
-import { LivePage } from "./LivePage";
+import { LandingView } from "./LandingView";
+import { LiveView } from "./LiveView";
+import { useLiveSession } from "./live-session";
+import { PastSessionView } from "./PastSessionView";
 import styles from "./ScannerApp.module.css";
 import { ScreenshotPage } from "./ScreenshotPage";
-import type { SendouUser } from "./sendou-ingest";
-import { VodPage } from "./VodPage";
+import { setUploadUser } from "./upload";
+import { useDebug } from "./use-debug";
+import { VodView } from "./VodView";
+import { cancelVodScan } from "./vod-scan";
 
-const TAB_LABELS: Record<ScannerTab, string> = {
-	live: "Live",
-	screenshot: "Screenshot",
-	vod: "VoD",
-	fixtures: "Fixtures",
-};
-
-// the fixtures tab reads the corpus off disk, which only a dev checkout has
-const visibleTabs =
-	process.env.NODE_ENV === "development"
-		? SCANNER_TABS
-		: SCANNER_TABS.filter((tab) => tab !== "fixtures");
+/** A file's clips live for one visit: the file is on disk, so a new page load starts without them. */
+let vodClipsPurged = false;
 
 export function ScannerApp() {
-	const [tab] = useSearchParam(scannerSearchParams, "tab");
-	const rootUser = useUser();
-	const sendouUser: SendouUser | null = rootUser
-		? { id: rootUser.id, username: rootUser.username }
-		: null;
+	const [view] = useSearchParam(scannerSearchParams, "view");
+	const user = useUser();
+	const live = useLiveSession();
+	const debug = useDebug();
+
+	// the controllers run outside React and need the login to decide on uploads
+	useEffect(() => {
+		setUploadUser(user ? { id: user.id } : null);
+	}, [user]);
+
+	useEffect(() => {
+		if (vodClipsPurged) return;
+		vodClipsPurged = true;
+		void deleteVodClips()
+			.catch(() => {})
+			.then(() => refreshClips());
+	}, []);
+
+	// a file scan has no Cancel button: leaving the page is how it is stopped
+	useEffect(() => cancelVodScan, []);
+
+	const capturing = live.status === "running" || live.status === "starting";
 
 	const page =
-		tab === "screenshot" ? (
+		view === "live" && capturing ? (
+			<LiveView />
+		) : view === "session" ? (
+			<PastSessionView />
+		) : view === "vod" ? (
+			<VodView />
+		) : view === "clips" ? (
+			<ClipsView />
+		) : view === "debug" && debug ? (
 			<ScreenshotPage />
-		) : tab === "vod" ? (
-			<VodPage sendouUser={sendouUser} />
-		) : tab === "fixtures" && process.env.NODE_ENV === "development" ? (
+		) : view === "fixtures" && process.env.NODE_ENV === "development" ? (
 			<FixturesPage />
 		) : (
-			<LivePage sendouUser={sendouUser} />
+			<LandingView />
 		);
 
-	return (
-		<div className={styles.app}>
-			<header className={styles.topbar}>
-				<nav>
-					{visibleTabs.map((tabOption) => (
-						<Link
-							key={tabOption}
-							to={scannerSearchParams.href(SCANNER_PAGE, { tab: tabOption })}
-							className={clsx({ [styles.active]: tab === tabOption })}
-						>
-							{TAB_LABELS[tabOption]}
-						</Link>
-					))}
-				</nav>
-			</header>
-			{page}
-		</div>
-	);
+	return <div className={styles.app}>{page}</div>;
 }
diff --git a/app/features/scanner/components/ScannerChrome.module.css b/app/features/scanner/components/ScannerChrome.module.css
deleted file mode 100644
index b48569ed4..000000000
--- a/app/features/scanner/components/ScannerChrome.module.css
+++ /dev/null
@@ -1,137 +0,0 @@
-/* secondary actions live behind this icon-only trigger, pushed to the row's end.
-   Sized explicitly: it is a SendouButton, which brings a competing base look */
-button.iconMenu {
-	margin-inline-start: auto;
-	width: var(--field-size-sm);
-	height: var(--field-size-sm);
-	border-radius: var(--radius-field);
-	padding: 0;
-	border: var(--border-style);
-	background: var(--color-bg-higher);
-	color: var(--color-text);
-
-	&:hover {
-		color: var(--color-fg-accent);
-	}
-
-	& > svg {
-		width: var(--field-size-icon);
-		height: var(--field-size-icon);
-		margin: 0;
-	}
-}
-
-.controls {
-	display: flex;
-	gap: var(--s-2);
-	align-items: center;
-	margin-bottom: var(--s-3);
-	flex-wrap: wrap;
-}
-
-.status {
-	padding: var(--s-0-5) var(--s-3);
-	border-radius: var(--radius-full);
-	font-size: var(--font-2xs);
-	font-weight: var(--weight-bold);
-	border: var(--border-style);
-}
-
-.idle {
-	color: var(--color-text-high);
-}
-
-.watching {
-	color: var(--color-info-high);
-	border-color: var(--color-info-low);
-	background: var(--color-info-low);
-
-	&::before {
-		content: "";
-		display: inline-block;
-		width: 7px;
-		height: 7px;
-		border-radius: var(--radius-full);
-		background: currentColor;
-		margin-inline-end: var(--s-1-5);
-		animation: scanner-pulse 1.6s ease-in-out infinite;
-	}
-}
-
-.detected {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	color: var(--color-success-high);
-	border-color: var(--color-success-low);
-	background: var(--color-success-low);
-}
-
-.liveLayout {
-	display: grid;
-	grid-template-columns: minmax(320px, 640px) minmax(0, 1fr);
-	gap: var(--s-4);
-	align-items: start;
-}
-
-.feed {
-	display: flex;
-	flex-direction: column;
-	gap: var(--s-3);
-}
-
-.dropzone {
-	border: var(--border-width) dashed var(--color-border-high);
-	border-radius: var(--radius-box);
-	padding: var(--s-8);
-	text-align: center;
-	color: var(--color-text-high);
-	font-size: var(--font-sm);
-	font-weight: var(--weight-semi);
-	margin-bottom: var(--s-4);
-
-	& label {
-		display: inline;
-		font-size: inherit;
-		font-weight: inherit;
-		margin-block-end: 0;
-		text-decoration: underline;
-		cursor: pointer;
-	}
-}
-
-.over {
-	border-color: var(--color-fg-accent);
-	color: var(--color-fg-accent);
-}
-
-/* a 640px wide preview would starve the feed next to it: split evenly instead */
-@container scanner (width < 1000px) {
-	.liveLayout {
-		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-	}
-
-	/* the controls wrap here, where a trigger pushed to the end reads as stray */
-	button.iconMenu {
-		margin-inline-start: 0;
-	}
-}
-
-@container scanner (width < 700px) {
-	.liveLayout {
-		grid-template-columns: minmax(0, 1fr);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.watching::before {
-		animation: none;
-	}
-}
-
-@keyframes scanner-pulse {
-	50% {
-		opacity: 0.25;
-		transform: scale(0.8);
-	}
-}
diff --git a/app/features/scanner/components/ScannerChrome.tsx b/app/features/scanner/components/ScannerChrome.tsx
deleted file mode 100644
index b3e8f837c..000000000
--- a/app/features/scanner/components/ScannerChrome.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * Page chrome shared by the live, VoD and screenshot pages: the controls row
- * with its status pill, the preview/feed split and the file dropzone.
- */
-
-import clsx from "clsx";
-import * as React from "react";
-import {
-	SendouButton,
-	type SendouButtonProps,
-} from "~/components/elements/Button";
-import styles from "./ScannerChrome.module.css";
-
-export function ScannerControls({ children }: { children: React.ReactNode }) {
-	return <div className={styles.controls}>{children}</div>;
-}
-
-export function ScannerStatusPill({
-	variant,
-	children,
-}: {
-	variant: "idle" | "watching" | "detected";
-	children: React.ReactNode;
-}) {
-	return (
-		<span
-			className={clsx(styles.status, {
-				[styles.idle]: variant === "idle",
-				[styles.watching]: variant === "watching",
-				[styles.detected]: variant === "detected",
-			})}
-		>
-			{children}
-		</span>
-	);
-}
-
-export function ScannerSplitLayout({
-	style,
-	children,
-}: {
-	style?: React.CSSProperties;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className={styles.liveLayout} style={style}>
-			{children}
-		</div>
-	);
-}
-
-export function ScannerFeed({ children }: { children: React.ReactNode }) {
-	return <div className={styles.feed}>{children}</div>;
-}
-
-export function ScannerMenuButton({
-	icon,
-	label,
-	...rest
-}: {
-	icon: React.JSX.Element;
-	label: string;
-} & SendouButtonProps) {
-	return (
-		<SendouButton
-			icon={icon}
-			className={styles.iconMenu}
-			aria-label={label}
-			{...rest}
-		/>
-	);
-}
-
-export function ScannerDropzone({
-	onFile,
-	children,
-}: {
-	onFile: (file: File) => void;
-	children: React.ReactNode;
-}) {
-	const [over, setOver] = React.useState(false);
-
-	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop target; the file input inside is the accessible path
-		<div
-			className={clsx(styles.dropzone, { [styles.over]: over })}
-			onDragOver={(e) => {
-				e.preventDefault();
-				setOver(true);
-			}}
-			onDragLeave={() => setOver(false)}
-			onDrop={(e) => {
-				e.preventDefault();
-				setOver(false);
-				const file = e.dataTransfer.files[0];
-				if (file) onFile(file);
-			}}
-		>
-			{children}
-		</div>
-	);
-}
diff --git a/app/features/scanner/components/ScoreboardCard.tsx b/app/features/scanner/components/ScoreboardCard.tsx
index eaedb720f..9504faaa3 100644
--- a/app/features/scanner/components/ScoreboardCard.tsx
+++ b/app/features/scanner/components/ScoreboardCard.tsx
@@ -5,6 +5,7 @@ import type {
 } from "../core/detectors/scoreboard/index";
 import { SCOREBOARD_BATTLE_LOG_EVENT_TYPE } from "../core/detectors/scoreboard-battle-log/index";
 import { SCOREBOARD_BATTLE_LOG_REPLAY_EVENT_TYPE } from "../core/detectors/scoreboard-battle-log-replay/index";
+import { lobbyLabel, modeLabel, stageLabel } from "../core/labels";
 import { AbilityPopover } from "./AbilityGrid";
 import {
 	EventCardMeta,
@@ -19,7 +20,6 @@ import {
 import { FrameThumb } from "./FrameThumb";
 import type { CardData } from "./fixture-export";
 import { useEventTimeFormatter } from "./format";
-import { lobbyLabel, modeLabel, stageLabel } from "./labels";
 import { MetaPills } from "./MetaChips";
 
 function PlayerRows({
diff --git a/app/features/scanner/components/ScoreboardOwnCard.tsx b/app/features/scanner/components/ScoreboardOwnCard.tsx
index 2349f15b3..f04ec660a 100644
--- a/app/features/scanner/components/ScoreboardOwnCard.tsx
+++ b/app/features/scanner/components/ScoreboardOwnCard.tsx
@@ -2,6 +2,12 @@ import {
 	SCOREBOARD_OWN_EVENT_TYPE,
 	type ScoreboardOwnData,
 } from "../core/detectors/scoreboard-own/index";
+import {
+	lobbyLabel,
+	mainWeaponLabel,
+	modeLabel,
+	stageLabel,
+} from "../core/labels";
 import { AbilityGrid } from "./AbilityGrid";
 import {
 	EventCardMeta,
@@ -12,7 +18,6 @@ import {
 } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
 import { useEventTimeFormatter } from "./format";
-import { lobbyLabel, mainWeaponLabel, modeLabel, stageLabel } from "./labels";
 import { MetaPills } from "./MetaChips";
 
 export function ScoreboardOwnCard(props: {
diff --git a/app/features/scanner/components/ScreenshotPage.tsx b/app/features/scanner/components/ScreenshotPage.tsx
index d0f9890bb..62931a813 100644
--- a/app/features/scanner/components/ScreenshotPage.tsx
+++ b/app/features/scanner/components/ScreenshotPage.tsx
@@ -10,6 +10,7 @@ import type { MainWeaponId } from "~/modules/in-game-lists/types";
 import { useSearchParam } from "~/modules/search-params/hooks";
 import { mainWeaponImageUrl } from "~/utils/urls";
 import { CANONICAL_HEIGHT, CANONICAL_WIDTH, type Roi } from "../core/canonical";
+import { eventsToCsv } from "../core/csv/events";
 import type { DeathData } from "../core/detectors/death/index";
 import * as death from "../core/detectors/death/rois";
 import type { KillData } from "../core/detectors/kill/index";
@@ -32,21 +33,21 @@ import * as replay from "../core/detectors/scoreboard-battle-log-replay/rois";
 import type { ScoreboardOwnData } from "../core/detectors/scoreboard-own/index";
 import * as own from "../core/detectors/scoreboard-own/rois";
 import type { DetectedEvent } from "../core/detectors/types";
-import { scannerSearchParams } from "../scanner-search-params";
-import { claimInspectFrame } from "../store/inspect";
-import { AnalyzerClient } from "../worker/client";
-import type { WorkerResponse } from "../worker/protocol";
-import { downloadEventsCsv } from "./events-csv";
-import { type CardData, downloadExpectedJson } from "./fixture-export";
 import {
 	lobbyLabel,
 	mainWeaponLabel,
 	modeLabel,
 	stageLabel,
 	weaponLabel,
-} from "./labels";
+} from "../core/labels";
+import { scannerSearchParams } from "../scanner-search-params";
+import { claimInspectFrame } from "../store/inspect";
+import { AnalyzerClient } from "../worker/client";
+import type { WorkerResponse } from "../worker/protocol";
+import { Dropzone } from "./Dropzone";
+import { downloadCsv } from "./download";
+import { type CardData, downloadExpectedJson } from "./fixture-export";
 import { drawNormalizedCanvas } from "./normalized-canvas";
-import { ScannerDropzone } from "./ScannerChrome";
 import styles from "./ScreenshotPage.module.css";
 
 type Result = Extract<WorkerResponse, { kind: "result" }>;
@@ -526,7 +527,7 @@ export function ScreenshotPage() {
 
 	return (
 		<div>
-			<ScannerDropzone onFile={(file) => void analyze(file)}>
+			<Dropzone onFile={(file: File) => void analyze(file)}>
 				Drop a frame (PNG/JPEG) here, or{" "}
 				<label>
 					pick a file
@@ -542,7 +543,7 @@ export function ScreenshotPage() {
 					/>
 				</label>
 				{busy ? " — analyzing…" : null}
-			</ScannerDropzone>
+			</Dropzone>
 			{error ? <p className="text-error">{error}</p> : null}
 
 			<div
@@ -566,9 +567,9 @@ export function ScreenshotPage() {
 						type="button"
 						disabled={!event}
 						onClick={() =>
-							downloadEventsCsv(
+							downloadCsv(
 								"screenshot-events.csv",
-								Object.values(results).flatMap((r) => r.events),
+								eventsToCsv(Object.values(results).flatMap((r) => r.events)),
 							)
 						}
 					>
diff --git a/app/features/scanner/components/SessionHeader.module.css b/app/features/scanner/components/SessionHeader.module.css
new file mode 100644
index 000000000..4fd38f15a
--- /dev/null
+++ b/app/features/scanner/components/SessionHeader.module.css
@@ -0,0 +1,60 @@
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+}
+
+.topRow {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-2);
+}
+
+/* the user page's sub-page back button */
+.back {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: 100%;
+	background-color: var(--color-bg);
+	border: 2px solid var(--color-bg-higher);
+	color: var(--color-text);
+	transition: all 0.2s;
+
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
+}
+
+.backIcon {
+	width: 24px;
+	height: 24px;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--s-3);
+	margin-inline-start: auto;
+}
+
+.pill {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1-5);
+	padding: var(--s-0-5) var(--s-2-5);
+	border-radius: var(--radius-full);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	border: var(--border-style);
+	white-space: nowrap;
+	color: var(--color-info-high);
+	border-color: var(--color-info-low);
+	background: var(--color-info-low);
+}
diff --git a/app/features/scanner/components/SessionHeader.tsx b/app/features/scanner/components/SessionHeader.tsx
new file mode 100644
index 000000000..29efa46f9
--- /dev/null
+++ b/app/features/scanner/components/SessionHeader.tsx
@@ -0,0 +1,37 @@
+/** The chrome above a session view: the way back to the landing, the view's actions, then whatever the header shows. */
+import { ArrowLeft } from "lucide-react";
+import type * as React from "react";
+import { Link } from "react-router";
+import { SCANNER_PAGE } from "~/utils/urls";
+import { scannerSearchParams } from "../scanner-search-params";
+import styles from "./SessionHeader.module.css";
+
+export function SessionHeader({
+	actions,
+	children,
+}: {
+	actions?: React.ReactNode;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className={styles.header}>
+			<div className={styles.topRow}>
+				<Link
+					to={scannerSearchParams.href(SCANNER_PAGE, {})}
+					className={styles.back}
+					aria-label="Back to the scanner"
+					defaultShouldRevalidate={false}
+				>
+					<ArrowLeft className={styles.backIcon} />
+				</Link>
+				<div className={styles.actions}>{actions}</div>
+			</div>
+			{children}
+		</div>
+	);
+}
+
+/** `Scanning` — the state word at the head of a status line. */
+export function StatusPill({ children }: { children: React.ReactNode }) {
+	return <span className={styles.pill}>{children}</span>;
+}
diff --git a/app/features/scanner/components/SessionView.module.css b/app/features/scanner/components/SessionView.module.css
new file mode 100644
index 000000000..30cc25cf0
--- /dev/null
+++ b/app/features/scanner/components/SessionView.module.css
@@ -0,0 +1,43 @@
+.view {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-4);
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+}
+
+.matches {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-3);
+}
+
+.empty {
+	margin: 0;
+	font-size: var(--font-xs);
+	color: var(--color-text-high);
+}
+
+.setDivider {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2-5);
+	margin-top: var(--s-1-5);
+	color: var(--color-text-high);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+
+	&::before,
+	&::after {
+		content: "";
+		flex: 1;
+		height: var(--border-width);
+		background-color: var(--color-border);
+	}
+}
diff --git a/app/features/scanner/components/SessionView.tsx b/app/features/scanner/components/SessionView.tsx
new file mode 100644
index 000000000..3eef1f838
--- /dev/null
+++ b/app/features/scanner/components/SessionView.tsx
@@ -0,0 +1,283 @@
+/**
+ * Everything below a session's page header, rendered identically for a live
+ * session, a past session and a scanned VoD: the header the caller supplies
+ * (fed the built matches and the summary line), the clip strip, then the
+ * match cards newest first. A session mixing lobbies (private battles beside
+ * X or open play) splits into lobby tabs; sets are a private battle concept,
+ * so only that list gets set dividers. Live and File share this all the way
+ * down to the clip cutter.
+ */
+
+import type * as React from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
+import {
+	SendouTab,
+	SendouTabList,
+	SendouTabPanel,
+	SendouTabs,
+} from "~/components/elements/Tabs";
+import type { IngestSkipReason } from "../core/match-builder";
+import {
+	type BuiltMatch,
+	buildScannerMatches,
+	ingestSkipReasons,
+} from "../core/match-builder";
+import { assignMatchSets } from "../core/match-sets";
+import type { ScannerMatch } from "../core/scanner-match";
+import { kdRatio, type SessionSummary, sessionSummary } from "../core/sessions";
+import type { ScannerLobby } from "../scanner-types";
+import type { ScannerClip } from "../store/clips";
+import { ClipDialog } from "./ClipDialog";
+import { ClipStrip } from "./ClipStrip";
+import type { GetFrame } from "./EventCard";
+import { MatchCard } from "./MatchCard";
+import styles from "./SessionView.module.css";
+import { aggregateSendStatus } from "./sendou-ingest";
+import type { ScanEvent, SessionKind } from "./session-data";
+import { uploadStateOf } from "./UploadChip";
+import { useDebug } from "./use-debug";
+
+const NO_KEYS: ReadonlySet<React.Key> = new Set();
+
+type LobbyGroup = "private" | "x" | "other";
+
+const LOBBY_GROUPS: LobbyGroup[] = ["private", "x", "other"];
+
+const LOBBY_GROUP_LABELS: Record<LobbyGroup, string> = {
+	private: "Private Battle",
+	x: "X Battle",
+	other: "Other",
+};
+
+export interface SessionInfo {
+	/** chronological */
+	built: BuiltMatch<ScanEvent>[];
+	summary: SessionSummary;
+	/** `8 games · 5–3 · K/D 1.4 · 3 clips` */
+	summaryLine: string;
+	/** aligned with `built` */
+	clipCounts: number[];
+	skipReasons: Map<BuiltMatch<ScanEvent>, IngestSkipReason>;
+}
+
+export function SessionView({
+	kind,
+	events,
+	originT,
+	clips,
+	clipsTitle,
+	running,
+	header,
+	getFrame,
+	canUpload,
+	onUpload,
+	emptyText,
+	children,
+}: {
+	kind: SessionKind;
+	/** chronological */
+	events: readonly ScanEvent[];
+	/** stream/file second positions count from */
+	originT: number;
+	/** this session's clips, best first */
+	clips: readonly ScannerClip[];
+	clipsTitle: string;
+	/** a capture or scan is still adding to this session: its newest unfinished match can't expand yet */
+	running: boolean;
+	header: (info: SessionInfo) => React.ReactNode;
+	getFrame: (event: ScanEvent) => GetFrame | undefined;
+	/** logged in: Retry/Upload buttons show */
+	canUpload: boolean;
+	onUpload: (built: BuiltMatch<ScanEvent>) => void;
+	emptyText: string;
+	/** rendered between the header and the clips (a scan's progress, an error) */
+	children?: React.ReactNode;
+}) {
+	const debug = useDebug();
+	const [playing, setPlaying] = useState<ScannerClip | null>(null);
+
+	const built = buildScannerMatches(events);
+	const skipReasons = ingestSkipReasons(built);
+	const clipsByMatch = built.map((b, index) =>
+		clipsOf(b.match, built[index + 1]?.match, clips),
+	);
+	const summary = sessionSummary(built.map((b) => b.match));
+	const info: SessionInfo = {
+		built,
+		summary,
+		summaryLine: summaryLine(summary, clips.length),
+		clipCounts: clipsByMatch.map((matchClips) => matchClips.length),
+		skipReasons,
+	};
+	const justFormedKeys = useJustFormedKeys(built.map(keyOf));
+	const groups = LOBBY_GROUPS.map((group) => ({
+		group,
+		matches: built.filter((b) => lobbyGroup(b.match.lobby) === group),
+	})).filter(({ matches }) => matches.length > 0);
+
+	const renderMatch = (b: BuiltMatch<ScanEvent>) => {
+		const index = built.indexOf(b);
+		const key = keyOf(b);
+		return (
+			<MatchCard
+				key={key}
+				built={b}
+				number={index + 1}
+				originT={originT}
+				kind={kind}
+				justFormed={justFormedKeys.has(key)}
+				expandable={
+					!(running && index === built.length - 1 && b.match.winner === null)
+				}
+				upload={uploadStateOf({
+					send: aggregateSendStatus(b.sources),
+					skipReason: skipReasons.get(b),
+					lobby: b.match.lobby,
+					canUpload,
+					onUpload: () => onUpload(b),
+				})}
+				clips={clipsByMatch[index]!}
+				onPlayClip={setPlaying}
+				getFrame={getFrame}
+				debug={debug}
+			/>
+		);
+	};
+
+	return (
+		<div className={styles.view}>
+			<div className={styles.header}>{header(info)}</div>
+			{children}
+			<ClipStrip
+				title={clipsTitle}
+				clips={clips}
+				onPlay={setPlaying}
+				sourceLabel={(clip) => {
+					const index = clipsByMatch.findIndex((matchClips) =>
+						matchClips.includes(clip),
+					);
+					return index >= 0 ? `Game ${index + 1}` : "";
+				}}
+			/>
+			{groups.length === 0 ? (
+				<p className={styles.empty}>{emptyText}</p>
+			) : groups.length === 1 ? (
+				<MatchList
+					matches={groups[0]!.matches}
+					sets={groups[0]!.group === "private"}
+					renderMatch={renderMatch}
+				/>
+			) : (
+				<SendouTabs>
+					<SendouTabList>
+						{groups.map(({ group, matches }) => (
+							<SendouTab key={group} id={group} number={matches.length}>
+								{LOBBY_GROUP_LABELS[group]}
+							</SendouTab>
+						))}
+					</SendouTabList>
+					{groups.map(({ group, matches }) => (
+						<SendouTabPanel key={group} id={group}>
+							<MatchList
+								matches={matches}
+								sets={group === "private"}
+								renderMatch={renderMatch}
+							/>
+						</SendouTabPanel>
+					))}
+				</SendouTabs>
+			)}
+			{playing ? (
+				<ClipDialog clip={playing} onClose={() => setPlaying(null)} />
+			) : null}
+		</div>
+	);
+}
+
+/** One lobby's matches newest first, with set dividers (numbered within the list) when `sets`. */
+function MatchList({
+	matches,
+	sets,
+	renderMatch,
+}: {
+	/** chronological */
+	matches: readonly BuiltMatch<ScanEvent>[];
+	sets: boolean;
+	renderMatch: (built: BuiltMatch<ScanEvent>) => React.ReactNode;
+}) {
+	const setNumbers = sets ? assignMatchSets(matches.map((b) => b.match)) : [];
+	const showSetDividers = (setNumbers.at(-1) ?? 1) > 1;
+	return (
+		<div className={styles.matches}>
+			{[...matches].reverse().map((b, reverseIndex) => {
+				const index = matches.length - 1 - reverseIndex;
+				return (
+					<Fragment key={keyOf(b)}>
+						{showSetDividers && setNumbers[index + 1] !== setNumbers[index] ? (
+							<div className={styles.setDivider}>Set {setNumbers[index]}</div>
+						) : null}
+						{renderMatch(b)}
+					</Fragment>
+				);
+			})}
+		</div>
+	);
+}
+
+function lobbyGroup(lobby: ScannerLobby | null): LobbyGroup {
+	if (lobby === "PRIVATE") return "private";
+	if (lobby === "X") return "x";
+	return "other";
+}
+
+/** stable render key for one match: its first source event's id, else its start */
+function keyOf(built: BuiltMatch<ScanEvent>): React.Key {
+	const first = built.sources[0];
+	return first?.id ?? `${first?.type}-${first?.t}`;
+}
+
+/** The clips anchored inside the game: from its start to the next game's. */
+function clipsOf(
+	match: ScannerMatch,
+	next: ScannerMatch | undefined,
+	clips: readonly ScannerClip[],
+): ScannerClip[] {
+	if (match.startsAt === null) return [];
+	const start = match.startsAt;
+	const end = next?.startsAt ?? Number.POSITIVE_INFINITY;
+	return clips.filter((clip) => clip.t >= start && clip.t < end);
+}
+
+function summaryLine(summary: SessionSummary, clips: number): string {
+	const kd = kdRatio(summary);
+	return [
+		`${summary.games} ${summary.games === 1 ? "game" : "games"}`,
+		summary.games > 0 ? `${summary.wins}–${summary.losses}` : null,
+		kd !== null ? `K/D ${kd.toFixed(1)}` : null,
+		clips > 0 ? `${clips} ${clips === 1 ? "clip" : "clips"}` : null,
+	]
+		.filter(Boolean)
+		.join(" · ");
+}
+
+/**
+ * Keys of the matches that showed up since the previous render. A list
+ * arriving whole (a session loaded from storage) is not "just formed": every
+ * card would animate in for something the user did not watch.
+ */
+function useJustFormedKeys(keys: React.Key[]): ReadonlySet<React.Key> {
+	const seenRef = useRef<Set<React.Key> | null>(null);
+	const seen = seenRef.current;
+
+	// after commit, not during render: under StrictMode the render runs twice
+	// and the second pass would find every key already seen
+	useEffect(() => {
+		seenRef.current = new Set(keys);
+	});
+
+	if (seen === null) return NO_KEYS;
+	const justFormed = keys.filter((key) => !seen.has(key));
+	return justFormed.length === keys.length && keys.length > 1
+		? NO_KEYS
+		: new Set(justFormed);
+}
diff --git a/app/features/scanner/components/SettingsPopover.module.css b/app/features/scanner/components/SettingsPopover.module.css
new file mode 100644
index 000000000..6d59d0c6f
--- /dev/null
+++ b/app/features/scanner/components/SettingsPopover.module.css
@@ -0,0 +1,45 @@
+.popover {
+	width: min(24rem, calc(100vw - 2 * var(--s-4)));
+}
+
+.settings {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-4);
+	padding: var(--s-2);
+	font-size: var(--font-xs);
+}
+
+.section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+}
+
+.label {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--color-text-high);
+}
+
+.note {
+	margin: 0;
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+	line-height: 1.5;
+}
+
+.row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--s-2) var(--s-3);
+	align-items: center;
+}
+
+.rowLabel {
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+}
diff --git a/app/features/scanner/components/SettingsPopover.tsx b/app/features/scanner/components/SettingsPopover.tsx
new file mode 100644
index 000000000..beb601e0a
--- /dev/null
+++ b/app/features/scanner/components/SettingsPopover.tsx
@@ -0,0 +1,125 @@
+/**
+ * The settings popover, opened from ⚙ on the landing and the live header:
+ * the upload and clip toggles, the retention notes, and the debug links for
+ * those who see them. The
+ * source lives on the landing's Live card, the one place it must be right.
+ */
+import { Settings } from "lucide-react";
+import { Link } from "react-router";
+import { SendouButton } from "~/components/elements/Button";
+import {
+	SendouChipRadio,
+	SendouChipRadioGroup,
+} from "~/components/elements/ChipRadio";
+import { SendouPopover } from "~/components/elements/Popover";
+import { SendouSwitch } from "~/components/elements/Switch";
+import { SCANNER_PAGE } from "~/utils/urls";
+import { MAX_SESSIONS } from "../core/sessions";
+import { scannerSearchParams } from "../scanner-search-params";
+import { MAX_HISTORY_CLIPS } from "../store/clips";
+import styles from "./SettingsPopover.module.css";
+import {
+	CLIP_MIN_KILLS_OPTIONS,
+	updateSettings,
+	useScannerSettings,
+} from "./settings";
+import { isLoggedIn } from "./upload";
+import { useDebug } from "./use-debug";
+
+export function SettingsPopover() {
+	const settings = useScannerSettings();
+	const debug = useDebug();
+	const loggedIn = isLoggedIn();
+
+	return (
+		<SendouPopover
+			trigger={
+				<SendouButton
+					variant="minimal"
+					size="small"
+					icon={<Settings />}
+					aria-label="Settings"
+				>
+					Settings
+				</SendouButton>
+			}
+			popoverClassName={styles.popover}
+			placement="bottom end"
+		>
+			<div className={styles.settings}>
+				<section className={styles.section}>
+					<SendouSwitch
+						size="small"
+						isSelected={settings.upload}
+						isDisabled={!loggedIn}
+						onChange={(upload) => updateSettings({ upload })}
+					>
+						{loggedIn
+							? "Upload results to sendou.ink"
+							: "Upload results to sendou.ink (log in first)"}
+					</SendouSwitch>
+					<SendouSwitch
+						size="small"
+						isSelected={settings.saveClips}
+						onChange={(saveClips) => updateSettings({ saveClips })}
+					>
+						Save clips
+					</SendouSwitch>
+					<div className={styles.row}>
+						<span className={styles.rowLabel}>Clip on splats in a row</span>
+						<SendouChipRadioGroup>
+							{CLIP_MIN_KILLS_OPTIONS.map((n) => (
+								<SendouChipRadio
+									key={n}
+									name="clip-min-kills"
+									value={String(n)}
+									checked={settings.clipMinKills === n}
+									onChange={() => updateSettings({ clipMinKills: n })}
+								>
+									{n}
+								</SendouChipRadio>
+							))}
+						</SendouChipRadioGroup>
+					</div>
+				</section>
+				<p className={styles.note}>
+					Clip history keeps the {MAX_HISTORY_CLIPS} best; the lowest is
+					replaced when full. Download what you want to keep. This session's
+					clips are safe until you stop.
+					<br />
+					Sessions: last 30 days or {MAX_SESSIONS} sessions.
+				</p>
+				{debug ? (
+					<section className={styles.section}>
+						<span className={styles.label}>Debug</span>
+						<div className={styles.row}>
+							<Link
+								to={scannerSearchParams.href(SCANNER_PAGE, { view: "debug" })}
+								defaultShouldRevalidate={false}
+							>
+								Image / screenshot view
+							</Link>
+							{process.env.NODE_ENV === "development" ? (
+								<Link
+									to={scannerSearchParams.href(SCANNER_PAGE, {
+										view: "fixtures",
+									})}
+									defaultShouldRevalidate={false}
+								>
+									Fixtures
+								</Link>
+							) : null}
+						</div>
+					</section>
+				) : null}
+			</div>
+		</SendouPopover>
+	);
+}
+
+/** `2026-09-16 19:02` — the session's start as the matches CSV's source */
+export function sessionLabel(startedAt: number): string {
+	const d = new Date(startedAt);
+	const pad = (n: number) => String(n).padStart(2, "0");
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
diff --git a/app/features/scanner/components/LivePage.module.css b/app/features/scanner/components/SourceSelect.module.css
similarity index 54%
rename from app/features/scanner/components/LivePage.module.css
rename to app/features/scanner/components/SourceSelect.module.css
index 6c1b8e543..302a39c4e 100644
--- a/app/features/scanner/components/LivePage.module.css
+++ b/app/features/scanner/components/SourceSelect.module.css
@@ -1,8 +1,15 @@
-/* the global select is full width, which would break the controls row */
-.deviceSelect {
+.source {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+	min-width: 0;
+}
+
+/* the global select is full width, which would break a card's row */
+.select {
 	appearance: none;
-	width: auto;
-	max-width: 20rem;
+	width: 100%;
+	max-width: 22rem;
 	border: var(--border-style);
 	border-radius: var(--radius-field);
 	background-color: var(--color-bg);
@@ -13,8 +20,8 @@
 	color: var(--color-text);
 	cursor: pointer;
 	font-family: inherit;
-	font-size: var(--font-xs);
-	height: var(--field-size-sm);
+	font-size: var(--font-sm);
+	height: var(--field-size);
 	padding: 0 calc(var(--field-size-icon) + var(--field-padding) + var(--s-2)) 0
 		var(--field-padding);
 	text-overflow: ellipsis;
@@ -22,7 +29,7 @@
 	overflow: hidden;
 	outline: none;
 
-	&:focus-within {
+	&:focus-visible {
 		outline: var(--focus-ring);
 		outline-offset: 1px;
 	}
@@ -33,22 +40,7 @@
 	}
 }
 
-.preview {
-	width: 100%;
-	background: #000;
-	border-radius: var(--radius-box);
-	border: var(--border-width) solid var(--color-bg-high);
-}
-
-@container scanner (width < 700px) {
-	/* stacked, the preview would otherwise push the feed off the screen */
-	.preview {
-		max-height: 45vh;
-		object-fit: contain;
-	}
-}
-
-button.outlined {
-	background: transparent;
-	color: var(--color-fg-accent);
+.audio {
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
 }
diff --git a/app/features/scanner/components/SourceSelect.tsx b/app/features/scanner/components/SourceSelect.tsx
new file mode 100644
index 000000000..ec5b40d99
--- /dev/null
+++ b/app/features/scanner/components/SourceSelect.tsx
@@ -0,0 +1,97 @@
+/**
+ * The capture source: one select listing every video input, the capture
+ * card first and OBS Virtual Camera as just another entry. Browsers reveal
+ * ids and labels only once camera permission is granted, so the list is
+ * re-read whenever a capture starts or stops, and opening the select while
+ * it is still anonymous asks for the permission right there. The choice is
+ * remembered in localStorage.
+ */
+import { useEffect, useState } from "react";
+import {
+	audioInputFor,
+	inputsRevealed,
+	isVirtualCamera,
+	listMediaInputs,
+	type MediaInputs,
+	requestInputAccess,
+} from "../capture/sampler";
+import { useLiveSession } from "./live-session";
+import styles from "./SourceSelect.module.css";
+import { updateSettings, useScannerSettings } from "./settings";
+
+const NO_INPUTS: MediaInputs = { video: [], audio: [] };
+
+export function SourceSelect({ disabled }: { disabled?: boolean }) {
+	const settings = useScannerSettings();
+	const live = useLiveSession();
+	const [inputs, setInputs] = useState<MediaInputs>(NO_INPUTS);
+	const [revision, setRevision] = useState(0);
+
+	// device enumeration is a browser API, not React state; a capture starting
+	// is what grants the permission that reveals the list
+	useEffect(() => {
+		let stale = false;
+		const load = () => {
+			void listMediaInputs().then(
+				(next) => {
+					if (!stale) setInputs(next);
+				},
+				() => {},
+			);
+		};
+		load();
+		navigator.mediaDevices?.addEventListener("devicechange", load);
+		return () => {
+			stale = true;
+			navigator.mediaDevices?.removeEventListener("devicechange", load);
+		};
+	}, [live.status, revision]);
+
+	const reveal = () => {
+		if (inputsRevealed(inputs)) return;
+		void requestInputAccess().then((granted) => {
+			if (granted) setRevision((r) => r + 1);
+		});
+	};
+
+	// before the first granted permission Chromium lists devices with empty
+	// ids and labels, which would collide with the default entry
+	const videoInputs = inputs.video.filter((device) => device.deviceId !== "");
+	const selected = settings.sourceDeviceId
+		? videoInputs.find((device) => device.deviceId === settings.sourceDeviceId)
+		: undefined;
+	const audio = selected ? audioInputFor(selected, inputs.audio) : null;
+
+	return (
+		<div className={styles.source}>
+			<select
+				className={styles.select}
+				aria-label="Source"
+				disabled={disabled}
+				onPointerDown={reveal}
+				onKeyDown={reveal}
+				value={selected ? settings.sourceDeviceId : ""}
+				onChange={(e) => updateSettings({ sourceDeviceId: e.target.value })}
+			>
+				<option value="">Default camera</option>
+				{videoInputs.map((device) => (
+					<option key={device.deviceId} value={device.deviceId}>
+						{deviceLabel(device)}
+					</option>
+				))}
+			</select>
+			{selected ? (
+				<span className={styles.audio}>
+					{audio
+						? `audio from ${audio.label || "the source"}`
+						: "audio: none, clips will be silent"}
+				</span>
+			) : null}
+		</div>
+	);
+}
+
+function deviceLabel(device: MediaDeviceInfo): string {
+	if (isVirtualCamera(device)) return "OBS Virtual Camera (no audio)";
+	return device.label || `Camera ${device.deviceId.slice(0, 6)}`;
+}
diff --git a/app/features/scanner/components/StripWeaponsCard.tsx b/app/features/scanner/components/StripWeaponsCard.tsx
index 016d8f297..9c209da79 100644
--- a/app/features/scanner/components/StripWeaponsCard.tsx
+++ b/app/features/scanner/components/StripWeaponsCard.tsx
@@ -2,10 +2,11 @@ import {
 	STRIP_WEAPONS_EVENT_TYPE,
 	type StripWeaponsData,
 } from "../core/detectors/objective/strip-weapons";
+import { formatClock } from "../core/format";
+import { mainWeaponLabel } from "../core/labels";
 import { EventCardMeta, EventCardShell } from "./EventCardShell";
 import { FrameThumb } from "./FrameThumb";
-import { formatClock, useEventTimeFormatter } from "./format";
-import { mainWeaponLabel } from "./labels";
+import { useEventTimeFormatter } from "./format";
 import { MetaPills } from "./MetaChips";
 
 export function StripWeaponsCard(props: {
diff --git a/app/features/scanner/components/UploadChip.module.css b/app/features/scanner/components/UploadChip.module.css
new file mode 100644
index 000000000..f5e7f63ae
--- /dev/null
+++ b/app/features/scanner/components/UploadChip.module.css
@@ -0,0 +1,90 @@
+.chip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1-5);
+	padding: var(--s-0-5) var(--s-2-5);
+	border-radius: var(--radius-full);
+	font-size: var(--font-2xs);
+	font-weight: var(--weight-bold);
+	border: var(--border-style);
+	background-color: var(--color-bg);
+	color: var(--color-text-high);
+	white-space: nowrap;
+
+	& .dot {
+		width: 7px;
+		height: 7px;
+		border-radius: var(--radius-full);
+		background: currentColor;
+		animation: scanner-pulse 1.4s ease-in-out infinite;
+	}
+}
+
+.uploaded {
+	color: var(--color-success-high);
+	border-color: var(--color-success-low);
+	background-color: var(--color-success-low);
+}
+
+.link {
+	color: inherit;
+	text-decoration: underline;
+	text-underline-offset: 2px;
+
+	&:hover {
+		color: var(--color-text-high);
+	}
+}
+
+.busy {
+	color: var(--color-info-high);
+	border-color: var(--color-info-low);
+	background-color: var(--color-info-low);
+}
+
+.waiting {
+	color: var(--color-warning-high);
+	border-color: var(--color-warning-low);
+	background-color: var(--color-warning-low);
+}
+
+.failed {
+	color: var(--color-error-high);
+	border-color: var(--color-error-low);
+	background-color: var(--color-error-low);
+}
+
+.action {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--s-1);
+	margin-inline-start: var(--s-1);
+	padding: 0 var(--s-1-5);
+	border: none;
+	border-radius: var(--radius-full);
+	background: var(--color-bg-higher);
+	color: var(--color-text);
+	font: inherit;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--color-text-accent);
+	}
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+	}
+}
+
+@keyframes scanner-pulse {
+	50% {
+		opacity: 0.25;
+		transform: scale(0.8);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.chip .dot {
+		animation: none;
+	}
+}
diff --git a/app/features/scanner/components/UploadChip.tsx b/app/features/scanner/components/UploadChip.tsx
new file mode 100644
index 000000000..e0570e5e1
--- /dev/null
+++ b/app/features/scanner/components/UploadChip.tsx
@@ -0,0 +1,166 @@
+/**
+ * A match's upload state, one word and an icon at the card's right:
+ * `uploaded ✓` · `uploading…` · `waiting for result` · `failed [Retry]` ·
+ * `not uploaded [Upload]` · `skipped: …`.
+ */
+import clsx from "clsx";
+import {
+	Check,
+	CloudOff,
+	CloudUpload,
+	Hourglass,
+	TriangleAlert,
+} from "lucide-react";
+import type { IngestedMatchLink } from "~/features/scanner-ingest/scanner-ingest-schemas";
+import { sendouQMatchPage, tournamentMatchPage } from "~/utils/urls";
+import { lobbyLabel } from "../core/labels";
+import type { IngestSkipReason } from "../core/match-builder";
+import type { ScannerLobby } from "../scanner-types";
+import type { SendStatus } from "../store/events";
+import styles from "./UploadChip.module.css";
+
+export type UploadState =
+	| { kind: "uploaded"; link?: IngestedMatchLink }
+	| { kind: "uploading" }
+	| { kind: "queued" }
+	| { kind: "waiting"; onRetry?: () => void }
+	| { kind: "failed"; error?: string; onRetry?: () => void }
+	| { kind: "not-uploaded"; onUpload?: () => void }
+	| { kind: "skipped"; reason: IngestSkipReason; lobby: ScannerLobby | null };
+
+/** Folds a match's aggregated send status, skip reason and the upload toggle into what the chip shows. */
+export function uploadStateOf({
+	send,
+	skipReason,
+	lobby,
+	canUpload,
+	onUpload,
+}: {
+	send: SendStatus | undefined;
+	skipReason: IngestSkipReason | undefined;
+	lobby: ScannerLobby | null;
+	/** logged in: Retry/Upload buttons show */
+	canUpload: boolean;
+	onUpload: () => void;
+}): UploadState {
+	if (skipReason) return { kind: "skipped", reason: skipReason, lobby };
+	const action = canUpload ? onUpload : undefined;
+	switch (send?.state) {
+		case "sent":
+			return { kind: "uploaded", link: send.link };
+		case "sending":
+			return { kind: "uploading" };
+		case "queued":
+			return { kind: "queued" };
+		case "unlinked":
+			return { kind: "waiting", onRetry: action };
+		case "failed":
+			return { kind: "failed", error: send.error, onRetry: action };
+		default:
+			return { kind: "not-uploaded", onUpload: action };
+	}
+}
+
+export function UploadChip({ state }: { state: UploadState }) {
+	switch (state.kind) {
+		case "uploaded":
+			return (
+				<span className={clsx(styles.chip, styles.uploaded)}>
+					<Check size={12} aria-hidden />
+					{state.link ? (
+						<a
+							href={linkUrl(state.link)}
+							target="_blank"
+							rel="noreferrer"
+							className={styles.link}
+						>
+							uploaded
+						</a>
+					) : (
+						"uploaded"
+					)}
+				</span>
+			);
+		case "uploading":
+			return (
+				<span className={clsx(styles.chip, styles.busy)}>
+					<span className={styles.dot} />
+					uploading…
+				</span>
+			);
+		case "queued":
+			return (
+				<span className={clsx(styles.chip, styles.busy)}>
+					<span className={styles.dot} />
+					queued
+				</span>
+			);
+		case "waiting":
+			return (
+				<span className={clsx(styles.chip, styles.waiting)}>
+					<Hourglass size={12} aria-hidden />
+					waiting for result
+					{state.onRetry ? (
+						<button
+							type="button"
+							className={styles.action}
+							onClick={state.onRetry}
+						>
+							Retry
+						</button>
+					) : null}
+				</span>
+			);
+		case "failed":
+			return (
+				<span className={clsx(styles.chip, styles.failed)} title={state.error}>
+					<TriangleAlert size={12} aria-hidden />
+					failed
+					{state.onRetry ? (
+						<button
+							type="button"
+							className={styles.action}
+							onClick={state.onRetry}
+						>
+							Retry
+						</button>
+					) : null}
+				</span>
+			);
+		case "not-uploaded":
+			return (
+				<span className={styles.chip}>
+					<CloudOff size={12} aria-hidden />
+					not uploaded
+					{state.onUpload ? (
+						<button
+							type="button"
+							className={styles.action}
+							onClick={state.onUpload}
+						>
+							<CloudUpload size={12} aria-hidden />
+							Upload
+						</button>
+					) : null}
+				</span>
+			);
+		case "skipped":
+			return (
+				<span className={styles.chip}>
+					skipped:{" "}
+					{state.reason === "disconnect"
+						? "disconnect"
+						: (lobbyLabel(state.lobby) ?? "not a private battle")}
+				</span>
+			);
+	}
+}
+
+function linkUrl(link: IngestedMatchLink): string {
+	return link.type === "tournament"
+		? tournamentMatchPage({
+				tournamentId: link.tournamentId,
+				matchId: link.matchId,
+			})
+		: sendouQMatchPage(link.groupMatchId);
+}
diff --git a/app/features/scanner/components/VodPage.module.css b/app/features/scanner/components/VodPage.module.css
deleted file mode 100644
index 9d97e2874..000000000
--- a/app/features/scanner/components/VodPage.module.css
+++ /dev/null
@@ -1,114 +0,0 @@
-/* internal navigation styled like the sibling action buttons */
-.linkButton {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--s-1-5);
-	padding: 0 var(--field-padding);
-	height: var(--field-size-sm);
-	border: var(--border-width) solid var(--color-fill-accent);
-	border-radius: var(--radius-field);
-	background: var(--color-fill-accent);
-	color: var(--color-fg-on-accent);
-	font-size: var(--font-xs);
-	font-weight: var(--weight-bold);
-	white-space: nowrap;
-	text-decoration: none;
-
-	& > svg {
-		width: 16px;
-		height: 16px;
-	}
-
-	&:active {
-		transform: translateY(1px);
-	}
-
-	&:focus-visible {
-		outline: var(--focus-ring);
-		outline-offset: 1px;
-	}
-}
-
-.vodList {
-	display: flex;
-	flex-direction: column;
-	gap: var(--s-2);
-}
-
-.vodItem {
-	display: flex;
-	align-items: center;
-	gap: var(--s-3);
-	background: var(--color-bg-high);
-	border-radius: var(--radius-box);
-	padding: var(--s-3) var(--s-4);
-}
-
-.vodName {
-	font-size: var(--font-sm);
-	font-weight: var(--weight-bold);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.vodMeta {
-	flex: 1;
-}
-
-/* the shared destructive variant loses to the scanner's own button look */
-button.vodDelete {
-	width: var(--field-size-sm);
-	padding: 0;
-	border-color: var(--color-error);
-	background: var(--color-error);
-	outline-color: var(--color-error);
-}
-
-.telemetry {
-	margin: var(--s-2) 0;
-	font-size: var(--font-2xs);
-	color: var(--color-text-high);
-
-	& summary {
-		cursor: pointer;
-	}
-
-	& table {
-		margin-top: var(--s-1-5);
-		border-collapse: collapse;
-
-		& th,
-		& td {
-			padding: var(--s-0-5) var(--s-2-5) var(--s-0-5) 0;
-			text-align: right;
-			font-variant-numeric: tabular-nums;
-
-			&:first-child {
-				text-align: left;
-			}
-		}
-	}
-}
-
-@container scanner (width < 700px) {
-	.vodItem {
-		flex-wrap: wrap;
-	}
-}
-
-.preview {
-	width: 100%;
-	background: #000;
-	border-radius: var(--radius-box);
-	border: var(--border-width) solid var(--color-bg-high);
-}
-
-@container scanner (width < 700px) {
-	/* stacked, the preview would otherwise push the feed off the screen */
-	.preview {
-		max-height: 45vh;
-		object-fit: contain;
-	}
-}
diff --git a/app/features/scanner/components/VodPage.tsx b/app/features/scanner/components/VodPage.tsx
deleted file mode 100644
index 3d7b75f33..000000000
--- a/app/features/scanner/components/VodPage.tsx
+++ /dev/null
@@ -1,913 +0,0 @@
-/**
- * VoD tab: load a video file and scan it as fast as decoding allows — no
- * real-time playback. On the primary (WebCodecs) path the duration is split
- * into one contiguous slice per analyzer worker and each worker demuxes,
- * decodes, schedules and analyzes its slice itself (worker/analyzer.worker.ts):
- * no frames cross the main thread and calm stretches are skimmed by keyframe
- * hops. The seek fallback drives a <video> element through a single worker,
- * widening its stride over calm footage. Completed scans are persisted to
- * IndexedDB keyed by file name (store/vods.ts) and listed for reinspection.
- */
-import clsx from "clsx";
-import { Download, FileText, Send, Trash2, Video } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Link } from "react-router";
-import * as R from "remeda";
-import { SendouButton } from "~/components/elements/Button";
-import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
-import { FormWithConfirm } from "~/components/FormWithConfirm";
-import { GameTimeline } from "~/components/GameTimeline";
-import { useSearchParam } from "~/modules/search-params/hooks";
-import { openSeekScan, probeWebCodecs } from "../capture/vod-frames";
-import { connectAbilities } from "../core/ability-harvest";
-import { OBJECTIVE_EVENT_TYPE } from "../core/detectors/objective/index";
-import { PLAYER_STATUS_EVENT_TYPE } from "../core/detectors/objective/player-status";
-import { STRIP_WEAPONS_EVENT_TYPE } from "../core/detectors/objective/strip-weapons";
-import {
-	mergeScanTelemetry,
-	type ScanTelemetry,
-} from "../core/detectors/telemetry";
-import type { DetectedEvent } from "../core/detectors/types";
-import {
-	buildScannerMatches,
-	ingestSkipReasons,
-	invalidObjectiveEvents,
-} from "../core/match-builder";
-import { TimelineBuilder } from "../core/timeline/index";
-import { scannerSearchParams } from "../scanner-search-params";
-import type { SendStatus } from "../store/events";
-import {
-	deleteVod,
-	listVods,
-	loadVodEventFrame,
-	loadVodEvents,
-	saveVod,
-	saveVodResultsSend,
-	type VodResultsSend,
-	type VodSummary,
-} from "../store/vods";
-import {
-	AnalyzerClient,
-	type DoneInfo,
-	defaultScanWorkerCount,
-} from "../worker/client";
-import { withoutRepeatEvents } from "./dedupe-events";
-import { EventCard, type GetFrame } from "./EventCard";
-import { EventsSummary } from "./EventsSummary";
-import { downloadEventsCsv } from "./events-csv";
-import type { FixtureData } from "./fixture-export";
-import { formatTime, useEventDateTimeFormatter } from "./format";
-import { MatchCard } from "./MatchCard";
-import { MatchLobbyTabs } from "./MatchLobbyTabs";
-import { playerStatusTeams } from "./player-status-view";
-import {
-	ScannerControls,
-	ScannerDropzone,
-	ScannerFeed,
-	ScannerMenuButton,
-	ScannerSplitLayout,
-	ScannerStatusPill,
-} from "./ScannerChrome";
-import {
-	countIngestableMatches,
-	type SendouUser,
-	sendVodResults,
-} from "./sendou-ingest";
-import { sendouUpload } from "./sendou-upload";
-import { thumbnailFromBlob } from "./thumbnail";
-import styles from "./VodPage.module.css";
-
-/** The scan knows the on-screen sides only, not who is playing. */
-const SCANNER_TEAM_LABELS = ["Alpha", "Bravo"] as const;
-
-/** seek-fallback stride while the worker reports activity */
-const SEEK_ACTIVE_STRIDE_S = 0.25;
-/**
- * seek-fallback stride over calm footage — small enough that the screens that
- * start activity from dead air (results ~10s, match intro ~7s) still get sampled
- */
-const SEEK_CALM_STRIDE_S = 2.5;
-
-type Status = "idle" | "scanning" | "done" | "error";
-
-interface VodMatch {
-	event: DetectedEvent<FixtureData>;
-	/**
-	 * render identity, inherited when a better read replaces the event so match
-	 * cards keyed on it don't remount (replaying the enter animation)
-	 */
-	key: number;
-	thumbnail?: string;
-	/** lossless PNG of the exact frame the detector analyzed (live scan) */
-	frame?: Blob;
-	/** stored VoD: id to load the frame from the vod-frames store */
-	frameId?: number;
-}
-
-interface Progress {
-	t: number;
-	duration: number;
-	/** scan speed as a multiple of realtime */
-	rate: number;
-}
-
-/** "Send results" progress/outcome shown next to the button. */
-type ResultsSend =
-	| { state: "sending"; sent: number; total: number }
-	| ({ state: "done" } & VodResultsSend);
-
-export function VodPage({
-	sendouUser,
-}: {
-	/** sendou.ink login shown in the header; undefined = probing, null = not logged in */
-	sendouUser: SendouUser | null | undefined;
-}) {
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const previewRef = useRef<HTMLCanvasElement>(null);
-	const clientsRef = useRef<AnalyzerClient[]>([]);
-	// cancels the in-flight chunk scans of the previous scan, if any
-	const abortScanRef = useRef<(() => void) | null>(null);
-	// seek fallback: latest per-frame done info + the waiter for the next one
-	const doneInfoRef = useRef<DoneInfo | null>(null);
-	const frameDoneRef = useRef<(() => void) | null>(null);
-	const timelineRef = useRef(new TimelineBuilder());
-	// latest gate score from any worker; flushed to state on the UI throttle
-	const gateScoreRef = useRef<number | null>(null);
-	const abortRef = useRef({ aborted: false });
-	const urlRef = useRef<string | null>(null);
-	// source of truth for matches (state mirrors it) so the scan loop can
-	// persist the final list without waiting on React
-	const matchesRef = useRef<VodMatch[]>([]);
-	// in-flight thumbnail work; awaited before persisting a finished scan
-	const sideWorkRef = useRef<Promise<void>[]>([]);
-	const nextMatchKeyRef = useRef(0);
-	// telemetry collection is baked into the workers at init, so a change of
-	// the search param needs a fresh pool
-	const clientsCollectTelemetryRef = useRef(false);
-
-	const [fileName, setFileName] = useState<string | null>(null);
-	/** live scan vs. reopened saved VoD (no video element for the latter) */
-	const [source, setSource] = useState<"scan" | "stored">("scan");
-	const [status, setStatus] = useState<Status>("idle");
-	const [method, setMethod] = useState<string | null>(null);
-	const [gateScore, setGateScore] = useState<number | null>(null);
-	const [progress, setProgress] = useState<Progress | null>(null);
-	const [matches, setMatches] = useState<VodMatch[]>([]);
-	const [vods, setVods] = useState<VodSummary[]>([]);
-	const [error, setError] = useState<string | null>(null);
-	const [telemetry, setTelemetry] = useState<ScanTelemetry | null>(null);
-	const [eventsOpen, setEventsOpen] = useState(false);
-	const [resultsSend, setResultsSend] = useState<ResultsSend | null>(null);
-
-	// opt-in via ?telemetry=true only; nothing in the UI links to it
-	const [collectTelemetry] = useSearchParam(scannerSearchParams, "telemetry");
-
-	const formatSavedAt = useEventDateTimeFormatter();
-
-	const abilityMap = connectAbilities(matches.map((m) => m.event));
-
-	const builtMatches = buildScannerMatches(matches.map((m) => m.event));
-	const skipReasons = ingestSkipReasons(builtMatches);
-	// mirrors sendVodResults' ingestable-match order, which the send outcome's
-	// links are keyed by
-	const ingestableBuilt = builtMatches.filter((b) => !skipReasons.has(b));
-	const linkByIngestableIndex = new Map(
-		(resultsSend?.state === "done" ? (resultsSend.links ?? []) : []).map(
-			(linked) => [linked.matchIndex, linked.link] as const,
-		),
-	);
-	const vodMatchByEvent = new Map(matches.map((m) => [m.event, m] as const));
-	const groupedEvents = new Set(builtMatches.flatMap((b) => b.sources));
-	// strip weapon evidence is assignment input, not a detection worth a card
-	const ungroupedMatches = matches.filter(
-		(m) =>
-			!groupedEvents.has(m.event) && m.event.type !== STRIP_WEAPONS_EVENT_TYPE,
-	);
-
-	// "Send results" sends the whole scan in one go, so its outcome maps onto
-	// every ingestable card; a partial failure can't be attributed per match
-	const bulkSend: SendStatus | undefined =
-		resultsSend?.state === "sending"
-			? { state: "sending", at: 0 }
-			: resultsSend?.state === "done" && resultsSend.error === null
-				? { state: "sent", at: resultsSend.at }
-				: resultsSend?.state === "done" && resultsSend.sent === 0
-					? { state: "failed", at: resultsSend.at }
-					: undefined;
-
-	// only offered once the whole VoD has been processed (a stored VoD is a
-	// completed scan by construction)
-	const upload =
-		status === "done" ? sendouUpload(matches.map((m) => m.event)) : null;
-
-	// "Send results": the scan's ingestable ScannerMatches POSTed to /ingest in one go
-	const resultsMatchCount =
-		status === "done" ? countIngestableMatches(matches.map((m) => m.event)) : 0;
-
-	const refreshVods = useCallback(async () => {
-		try {
-			setVods(await listVods());
-		} catch {
-			// listing failures are non-fatal; the scan UI still works
-		}
-	}, []);
-
-	const uploadResults = async () => {
-		const events = matchesRef.current.map((m) => m.event);
-		setResultsSend({
-			state: "sending",
-			sent: 0,
-			total: countIngestableMatches(events),
-		});
-		const report = await sendVodResults(events, (sent, total) =>
-			setResultsSend({ state: "sending", sent, total }),
-		);
-		const outcome: VodResultsSend = {
-			sent: report.sentMatches,
-			total: report.totalMatches,
-			error: report.error,
-			at: Date.now(),
-			links: report.links,
-		};
-		setResultsSend({ state: "done", ...outcome });
-		// saved under its file name so the send outcome is restored when the VoD is reopened
-		if (fileName) {
-			await saveVodResultsSend(fileName, outcome);
-			await refreshVods();
-		}
-	};
-
-	useEffect(() => {
-		void refreshVods();
-		return () => {
-			abortRef.current.aborted = true;
-			abortScanRef.current?.();
-			for (const client of clientsRef.current) client.dispose();
-			clientsRef.current = [];
-			if (urlRef.current) URL.revokeObjectURL(urlRef.current);
-		};
-	}, [refreshVods]);
-
-	const scan = async (file: File) => {
-		abortRef.current.aborted = true;
-		abortScanRef.current?.();
-		const abort = { aborted: false };
-		abortRef.current = abort;
-
-		setError(null);
-		setTelemetry(null);
-		setMatches([]);
-		setResultsSend(null);
-		setEventsOpen(false);
-		setProgress(null);
-		setGateScore(null);
-		setMethod(null);
-		setFileName(file.name);
-		setSource("scan");
-		setStatus("scanning");
-
-		try {
-			// the element is used by the seek fallback and for post-scan review
-			const video = videoRef.current!;
-			if (urlRef.current) URL.revokeObjectURL(urlRef.current);
-			urlRef.current = URL.createObjectURL(file);
-			video.src = urlRef.current;
-
-			if (clientsCollectTelemetryRef.current !== collectTelemetry) {
-				for (const client of clientsRef.current) client.dispose();
-				clientsRef.current = [];
-				clientsCollectTelemetryRef.current = collectTelemetry;
-			}
-			if (clientsRef.current.length === 0) {
-				clientsRef.current = Array.from(
-					{ length: defaultScanWorkerCount() },
-					() =>
-						new AnalyzerClient(
-							(result) => {
-								gateScoreRef.current = result.gate.score;
-								if (!result.gate.pass) return;
-								for (const event of result.events as DetectedEvent<FixtureData>[]) {
-									const action = timelineRef.current.push(event);
-									if (action.action !== "added" && action.action !== "replaced")
-										continue;
-									const frame = result.frame;
-									sideWorkRef.current.push(
-										(async () => {
-											const thumbnail = frame
-												? await thumbnailFromBlob(frame)
-												: undefined;
-											const replaced =
-												action.action === "replaced"
-													? matchesRef.current.find(
-															(m) => m.event === action.replaced,
-														)
-													: undefined;
-											const next = matchesRef.current.filter(
-												(m) => m !== replaced,
-											);
-											next.push({
-												event,
-												key: replaced?.key ?? nextMatchKeyRef.current++,
-												thumbnail,
-												frame,
-											});
-											next.sort((a, b) => a.event.t - b.event.t);
-											matchesRef.current = next;
-											setMatches(next);
-										})().catch(() => {}),
-									);
-								}
-							},
-							(message) => {
-								frameDoneRef.current?.();
-								frameDoneRef.current = null;
-								setError(message);
-								setStatus("error");
-							},
-							(_t, info: DoneInfo) => {
-								doneInfoRef.current = info;
-								frameDoneRef.current?.();
-								frameDoneRef.current = null;
-							},
-							{ collectTelemetry },
-						),
-				);
-			}
-			const clients = clientsRef.current;
-			await Promise.all(clients.map((c) => c.whenReady()));
-			// let work still in flight from an aborted scan finish before the
-			// timeline resets, so its results can't bleed into this scan
-			await Promise.all(clients.map((c) => c.whenIdle()));
-			if (abort.aborted) return;
-			matchesRef.current = [];
-			sideWorkRef.current = [];
-			timelineRef.current = new TimelineBuilder();
-
-			const started = performance.now();
-			const finalize = async (duration: number) => {
-				await Promise.all(sideWorkRef.current);
-				if (abort.aborted) return;
-				matchesRef.current = withoutInvalidObjectives(matchesRef.current);
-				setMatches(matchesRef.current);
-				setProgress((p) => (p ? { ...p, t: duration } : p));
-				setStatus("done");
-				await saveVod(
-					{ name: file.name, savedAt: Date.now(), duration },
-					matchesRef.current.map((m) => ({
-						type: m.event.type,
-						t: m.event.t,
-						confidence: m.event.confidence,
-						data: m.event.data,
-						thumbnail: m.thumbnail,
-						frame: m.frame,
-					})),
-				);
-				await refreshVods();
-			};
-
-			const probe = await probeWebCodecs(file);
-			if (abort.aborted) return;
-
-			if (probe) {
-				// each worker demuxes, decodes and analyzes its own slice of
-				// the file; the main thread only aggregates progress
-				setMethod("webcodecs");
-				const { duration } = probe;
-				const chunkSpan = duration / clients.length;
-				const chunks = clients.map((scanClient, i) => ({
-					client: scanClient,
-					tStart: i * chunkSpan,
-					tEnd: i === clients.length - 1 ? duration : (i + 1) * chunkSpan,
-					t: i * chunkSpan,
-					done: false,
-					telemetry: null as ScanTelemetry | null,
-				}));
-				abortScanRef.current = () => {
-					for (const client of clients) client.abortChunk();
-				};
-				const mergedTelemetry = () => {
-					const parts = chunks.flatMap((c) =>
-						c.telemetry ? [c.telemetry] : [],
-					);
-					return parts.length > 0 ? mergeScanTelemetry(parts) : null;
-				};
-				let lastUiUpdate = Number.NEGATIVE_INFINITY;
-				const pushUiUpdate = () => {
-					const now = performance.now();
-					if (now - lastUiUpdate < 250) return;
-					lastUiUpdate = now;
-					const covered = R.sumBy(
-						chunks,
-						(c) => Math.min(c.t, c.tEnd) - c.tStart,
-					);
-					const elapsed = (now - started) / 1000;
-					setGateScore(gateScoreRef.current);
-					setProgress({
-						t: covered,
-						duration,
-						rate: elapsed > 0 ? covered / elapsed : 0,
-					});
-					setTelemetry(mergedTelemetry());
-				};
-				await Promise.all(
-					chunks.map((chunk, chunkIndex) =>
-						chunk.client
-							.scanChunk(
-								{ file, chunkIndex, tStart: chunk.tStart, tEnd: chunk.tEnd },
-								(chunkProgress) => {
-									chunk.t = chunkProgress.t;
-									chunk.telemetry = chunkProgress.telemetry;
-									if (chunkProgress.preview) {
-										// show one chunk at a time: the earliest still running
-										if (chunks.find((c) => !c.done) === chunk) {
-											drawPreview(previewRef.current, chunkProgress.preview);
-										}
-										chunkProgress.preview.close();
-									}
-									pushUiUpdate();
-								},
-							)
-							.then((chunkTelemetry) => {
-								chunk.done = true;
-								chunk.t = chunk.tEnd;
-								chunk.telemetry = chunkTelemetry;
-							}),
-					),
-				);
-				if (abort.aborted) return;
-				setTelemetry(mergedTelemetry());
-				await finalize(duration);
-				return;
-			}
-
-			// seek fallback: one worker, one frame in flight; the worker's calm
-			// signal widens the stride over dead air
-			setMethod("seek");
-			const strideRef = { current: SEEK_ACTIVE_STRIDE_S };
-			const vod = await openSeekScan(video, () => strideRef.current);
-			if (abort.aborted) return;
-			const client = clients[0]!;
-			let lastUiUpdate = Number.NEGATIVE_INFINITY;
-			for await (const { frame, t } of vod.frames) {
-				if (abort.aborted) {
-					frame.close();
-					break;
-				}
-				const now = performance.now();
-				if (now - lastUiUpdate >= 250) {
-					lastUiUpdate = now;
-					// the preview draw must precede analyze — transferring the
-					// frame to the worker detaches it
-					drawPreview(previewRef.current, frame);
-					setGateScore(gateScoreRef.current);
-					const elapsed = (now - started) / 1000;
-					setProgress({
-						t,
-						duration: vod.duration,
-						rate: elapsed > 0 ? t / elapsed : 0,
-					});
-					if (doneInfoRef.current) setTelemetry(doneInfoRef.current.telemetry);
-				}
-				await new Promise<void>((resolve) => {
-					frameDoneRef.current = resolve;
-					if (!client.analyze(frame, t)) resolve();
-				});
-				strideRef.current = doneInfoRef.current?.calm
-					? SEEK_CALM_STRIDE_S
-					: SEEK_ACTIVE_STRIDE_S;
-			}
-			if (doneInfoRef.current) setTelemetry(doneInfoRef.current.telemetry);
-			await finalize(vod.duration);
-		} catch (e) {
-			if (!abort.aborted) {
-				abortScanRef.current?.();
-				setError(String(e));
-				setStatus("error");
-			}
-		}
-	};
-
-	const openStored = async (vod: VodSummary) => {
-		const name = vod.name;
-		abortRef.current.aborted = true;
-		abortScanRef.current?.();
-		setTelemetry(null);
-		try {
-			const events = await loadVodEvents(name);
-			// VoDs saved before objective reads were mode-gated may carry them
-			const loaded = withoutInvalidObjectives(
-				events.map((e) => ({
-					event: {
-						type: e.type,
-						t: e.t,
-						confidence: e.confidence,
-						data: e.data as FixtureData,
-					},
-					key: nextMatchKeyRef.current++,
-					thumbnail: e.thumbnail,
-					frameId: e.hasFrame ? e.id : undefined,
-				})),
-			);
-			matchesRef.current = loaded;
-			setMatches(loaded);
-			setResultsSend(
-				vod.resultsSend ? { state: "done", ...vod.resultsSend } : null,
-			);
-			setEventsOpen(false);
-			setFileName(name);
-			setSource("stored");
-			setStatus("done");
-			setError(null);
-			setProgress(null);
-			setGateScore(null);
-			setMethod(null);
-		} catch (e) {
-			setError(String(e));
-		}
-	};
-
-	const removeVod = async (name: string) => {
-		await deleteVod(name);
-		await refreshVods();
-	};
-
-	const backToList = () => {
-		abortRef.current.aborted = true;
-		abortScanRef.current?.();
-		setTelemetry(null);
-		matchesRef.current = [];
-		setMatches([]);
-		setResultsSend(null);
-		setEventsOpen(false);
-		setFileName(null);
-		setStatus("idle");
-		setError(null);
-		setProgress(null);
-		setGateScore(null);
-		setMethod(null);
-		void refreshVods();
-	};
-
-	const showVodView = fileName !== null;
-
-	return (
-		<div>
-			<ScannerDropzone onFile={(file) => void scan(file)}>
-				Drop a VoD (video file) here, or{" "}
-				<label>
-					pick a file
-					<input
-						type="file"
-						accept="video/*"
-						style={{ display: "none" }}
-						onChange={(e) => {
-							const file = e.target.files?.[0];
-							e.target.value = ""; // allow re-picking the same file
-							if (file) void scan(file);
-						}}
-					/>
-				</label>
-			</ScannerDropzone>
-			<ScannerControls>
-				{showVodView ? (
-					<>
-						<button type="button" onClick={backToList}>
-							← All VoDs
-						</button>
-						<ScannerStatusPill
-							variant={
-								status === "scanning"
-									? "watching"
-									: status === "done"
-										? "detected"
-										: "idle"
-							}
-						>
-							{source === "stored" ? "saved" : status}
-							{fileName ? ` · ${fileName}` : null}
-							{method ? ` · ${method}` : null}
-							{gateScore !== null && status === "scanning"
-								? ` · gate ${gateScore.toFixed(2)}`
-								: null}
-						</ScannerStatusPill>
-						{progress ? (
-							<span className="text-xxs text-lighter">
-								{formatTime(progress.t)} / {formatTime(progress.duration)}
-								{progress.duration > 0
-									? ` (${Math.round((progress.t / progress.duration) * 100)}%)`
-									: null}
-								{progress.rate > 0
-									? ` · ${progress.rate.toFixed(0)}× realtime`
-									: null}
-							</span>
-						) : null}
-						{upload?.url ? (
-							<Link to={upload.url} className={styles.linkButton}>
-								<Video aria-hidden />
-								Add VoD
-							</Link>
-						) : null}
-						{upload?.problem ? (
-							<span className="text-xxs text-lighter">
-								upload unavailable: {upload.problem}
-							</span>
-						) : null}
-						{resultsMatchCount > 0 ? (
-							<button
-								type="button"
-								disabled={!sendouUser || resultsSend?.state === "sending"}
-								title={sendouUser ? undefined : "Log in on sendou.ink first"}
-								onClick={() => void uploadResults()}
-							>
-								<Send aria-hidden />
-								Send results
-							</button>
-						) : null}
-						{resultsSend ? (
-							<span
-								className={clsx("text-xxs text-lighter", {
-									"text-error":
-										resultsSend.state === "done" && Boolean(resultsSend.error),
-								})}
-							>
-								{resultsSend.state === "sending"
-									? `sending match ${Math.min(resultsSend.sent + 1, resultsSend.total)}/${resultsSend.total}…`
-									: resultsSend.error
-										? `sent ${resultsSend.sent}/${resultsSend.total} matches — ${resultsSend.error}`
-										: `sent ${resultsSend.sent}/${resultsSend.total} matches to sendou.ink`}
-							</span>
-						) : null}
-						{matches.length > 0 ? (
-							<ExportMenu
-								fileName={fileName}
-								events={matches.map((m) => m.event)}
-							/>
-						) : null}
-					</>
-				) : null}
-			</ScannerControls>
-			{error ? <p className="text-error">{error}</p> : null}
-			{showVodView && telemetry ? (
-				<TelemetryPanel telemetry={telemetry} />
-			) : null}
-			{!showVodView ? (
-				<div className={styles.vodList}>
-					{vods.length === 0 ? (
-						<p className="text-xxs text-lighter">
-							No saved VoDs yet — scan one and it will show up here.
-						</p>
-					) : null}
-					{vods.map((vod) => (
-						<div key={vod.name} className={styles.vodItem}>
-							<span className={styles.vodName}>{vod.name}</span>
-							<span className={clsx("text-xxs text-lighter", styles.vodMeta)}>
-								{vod.eventCount} event{vod.eventCount === 1 ? "" : "s"} ·{" "}
-								{formatTime(vod.duration)} · {formatSavedAt(vod.savedAt)}
-							</span>
-							<button type="button" onClick={() => void openStored(vod)}>
-								Open
-							</button>
-							<FormWithConfirm
-								dialogHeading={`Delete saved analysis of "${vod.name}"?`}
-								onConfirm={() => void removeVod(vod.name)}
-							>
-								<SendouButton
-									variant="destructive"
-									size="small"
-									shape="square"
-									className={styles.vodDelete}
-									icon={<Trash2 />}
-									aria-label="Delete"
-								/>
-							</FormWithConfirm>
-						</div>
-					))}
-				</div>
-			) : null}
-			<ScannerSplitLayout
-				style={{
-					display: showVodView ? undefined : "none",
-					// a reopened saved VoD has no video to review — give the feed the full width
-					gridTemplateColumns: source === "stored" ? "1fr" : undefined,
-				}}
-			>
-				<div style={{ display: source === "scan" ? undefined : "none" }}>
-					<canvas
-						ref={previewRef}
-						className={styles.preview}
-						style={{ display: status === "scanning" ? "block" : "none" }}
-					/>
-					<video
-						ref={videoRef}
-						className={styles.preview}
-						muted
-						playsInline
-						controls
-						style={{
-							display: fileName && status !== "scanning" ? "block" : "none",
-						}}
-					/>
-				</div>
-				<ScannerFeed>
-					{matches.length === 0 ? (
-						<p className="text-xxs text-lighter">
-							{status === "scanning"
-								? "Scanning — matches appear here as scoreboards are detected."
-								: "No matches found in this VoD."}
-						</p>
-					) : null}
-					<MatchLobbyTabs
-						matches={builtMatches}
-						keyOf={(built) => vodMatchByEvent.get(built.sources[0]!)!.key}
-						renderMatch={(built, justFormed) => {
-							const skipReason = skipReasons.get(built);
-							const link = linkByIngestableIndex.get(
-								ingestableBuilt.indexOf(built),
-							);
-							const send = skipReason ? undefined : bulkSend;
-							// counter reads render as one timeline chart, not a card each, from the
-							// builder's samples, whose sides are team-stable (raw reads follow the
-							// specced player on casts); a non-SZ match's reads (objective null) are hidden
-							const objectiveEvents = (
-								built.match.objective?.samples ?? []
-							).map((sample) => ({ t: sample.t, data: sample }));
-							const statusSamples = built.match.playerStatus?.samples ?? [];
-							const cardEvents = withoutRepeatEvents(built.sources).filter(
-								(e) =>
-									e.type !== OBJECTIVE_EVENT_TYPE &&
-									e.type !== PLAYER_STATUS_EVENT_TYPE &&
-									e.type !== STRIP_WEAPONS_EVENT_TYPE,
-							);
-							return (
-								<MatchCard
-									match={built.match}
-									inProgress={
-										status === "scanning" &&
-										built === builtMatches.at(-1) &&
-										built.match.winner === null
-									}
-									skipReason={skipReason}
-									justFormed={justFormed}
-									send={
-										send?.state === "sent" && link ? { ...send, link } : send
-									}
-								>
-									<GameTimeline
-										objectiveEvents={objectiveEvents}
-										playerStatusSamples={statusSamples}
-										teams={playerStatusTeams(built.match, SCANNER_TEAM_LABELS)}
-									/>
-									{cardEvents.map((e) => {
-										const vodMatch = vodMatchByEvent.get(e);
-										return (
-											<EventCard
-												key={vodMatch?.key ?? `${e.type}-${e.t}`}
-												type={e.type}
-												t={e.t}
-												confidence={e.confidence}
-												data={e.data}
-												abilities={abilityMap.get(e)}
-												thumbnail={vodMatch?.thumbnail}
-												getFrame={vodMatch ? frameLoader(vodMatch) : undefined}
-											/>
-										);
-									})}
-								</MatchCard>
-							);
-						}}
-					/>
-					{ungroupedMatches.length > 0 ? (
-						<EventsSummary
-							events={ungroupedMatches.map((m) => m.event)}
-							open={eventsOpen}
-							onToggle={() => setEventsOpen(!eventsOpen)}
-						/>
-					) : null}
-					{/* newest detection on top; storage keeps ascending video-time order */}
-					{eventsOpen
-						? ungroupedMatches
-								.toReversed()
-								.map((m) => (
-									<EventCard
-										key={m.key}
-										type={m.event.type}
-										t={m.event.t}
-										confidence={m.event.confidence}
-										data={m.event.data}
-										abilities={abilityMap.get(m.event)}
-										thumbnail={m.thumbnail}
-										getFrame={frameLoader(m)}
-									/>
-								))
-						: null}
-				</ScannerFeed>
-			</ScannerSplitLayout>
-		</div>
-	);
-}
-
-/** Export formats of the scanned events, behind one icon-only menu. */
-function ExportMenu({
-	fileName,
-	events,
-}: {
-	fileName: string;
-	events: DetectedEvent<FixtureData>[];
-}) {
-	return (
-		<SendouMenu
-			trigger={<ScannerMenuButton icon={<Download />} label="Export" />}
-		>
-			<SendouMenuItem
-				icon={<FileText />}
-				onAction={() =>
-					downloadEventsCsv(
-						`${fileName.replace(/\.[^.]+$/, "")}-events.csv`,
-						events,
-					)
-				}
-			>
-				CSV
-			</SendouMenuItem>
-		</SendouMenu>
-	);
-}
-
-/** Drops objective reads that grouped into a known non-SZ match (misreads). */
-function withoutInvalidObjectives(matches: VodMatch[]): VodMatch[] {
-	const invalid = new Set(
-		invalidObjectiveEvents(buildScannerMatches(matches.map((m) => m.event))),
-	);
-	return invalid.size > 0
-		? matches.filter((m) => !invalid.has(m.event))
-		: matches;
-}
-
-function frameLoader(m: VodMatch): GetFrame | undefined {
-	return m.frame
-		? () => Promise.resolve(m.frame)
-		: m.frameId !== undefined
-			? () => loadVodEventFrame(m.frameId!)
-			: undefined;
-}
-
-function TelemetryPanel({ telemetry }: { telemetry: ScanTelemetry }) {
-	const detectors = Object.entries(telemetry.detectors).sort(([a], [b]) =>
-		a.localeCompare(b),
-	);
-	const coveredS = telemetry.activeVideoS + telemetry.skimVideoS;
-	return (
-		<details className={styles.telemetry}>
-			<summary>
-				telemetry · analyzed {telemetry.analyzedFrames}/
-				{telemetry.decodedFrames} decoded frames
-				{coveredS > 0
-					? ` · skimmed ${formatTime(telemetry.skimVideoS)} of ${formatTime(coveredS)}`
-					: null}
-				{telemetry.wallMs > 0
-					? ` · ${formatTime(telemetry.wallMs / 1000)} cpu`
-					: null}
-			</summary>
-			<table>
-				<thead>
-					<tr>
-						<th>detector</th>
-						<th>checks</th>
-						<th>gate pass</th>
-						<th>gate ms</th>
-						<th>parses</th>
-						<th>parse ms</th>
-						<th>suppressed</th>
-					</tr>
-				</thead>
-				<tbody>
-					{detectors.map(([id, d]) => (
-						<tr key={id}>
-							<td>{id}</td>
-							<td>{d.checks}</td>
-							<td>{d.gatePasses}</td>
-							<td>{Math.round(d.gateMs)}</td>
-							<td>{d.parses}</td>
-							<td>{Math.round(d.parseMs)}</td>
-							<td>{d.suppressedParses}</td>
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</details>
-	);
-}
-
-function drawPreview(
-	canvas: HTMLCanvasElement | null,
-	frame: ImageBitmap | VideoFrame,
-): void {
-	if (!canvas) return;
-	const width = "displayWidth" in frame ? frame.displayWidth : frame.width;
-	const height = "displayHeight" in frame ? frame.displayHeight : frame.height;
-	if (canvas.width !== width || canvas.height !== height) {
-		canvas.width = width;
-		canvas.height = height;
-	}
-	canvas.getContext("2d")!.drawImage(frame, 0, 0);
-}
diff --git a/app/features/scanner/components/VodView.module.css b/app/features/scanner/components/VodView.module.css
new file mode 100644
index 000000000..043249a9e
--- /dev/null
+++ b/app/features/scanner/components/VodView.module.css
@@ -0,0 +1,140 @@
+.title {
+	font-size: var(--font-sm);
+	font-weight: var(--weight-bold);
+	overflow-wrap: anywhere;
+}
+
+.partial {
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+}
+
+.scanning {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-3);
+}
+
+/* the bar's column is fixed by the grid, so the numbers changing width beside it never resize it */
+.progressRow {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: center;
+	gap: var(--s-1) var(--s-3);
+}
+
+.progress {
+	width: 100%;
+	height: 8px;
+	accent-color: var(--color-text-accent);
+}
+
+.progressText {
+	grid-column: 2;
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+	font-variant-numeric: tabular-nums;
+}
+
+.previewRow {
+	display: grid;
+	grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
+	gap: var(--s-4);
+	align-items: start;
+}
+
+.preview {
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	background: #000;
+	border-radius: var(--radius-box);
+	border: var(--border-width) solid var(--color-bg-high);
+}
+
+.previewNotes {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-1);
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+}
+
+.afterScan {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--s-2) var(--s-3);
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+
+	&:empty {
+		display: none;
+	}
+}
+
+.errorBox {
+	display: flex;
+	flex-direction: column;
+	gap: var(--s-2);
+	padding: var(--s-3) var(--s-4);
+	border-radius: var(--radius-box);
+	background: var(--color-error-low);
+
+	& p {
+		margin: 0;
+	}
+}
+
+.error {
+	font-size: var(--font-xs);
+	color: var(--color-error);
+}
+
+.fileButton {
+	display: inline-flex;
+	align-items: center;
+	width: fit-content;
+	height: var(--field-size-sm);
+	padding: 0 var(--field-padding);
+	border: var(--border-style-accent);
+	border-radius: var(--radius-field);
+	background: var(--color-text-accent);
+	color: var(--color-text-inverse);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
+	cursor: pointer;
+
+	& input {
+		display: none;
+	}
+}
+
+.telemetry {
+	font-size: var(--font-2xs);
+	color: var(--color-text-high);
+
+	& summary {
+		cursor: pointer;
+	}
+
+	& table {
+		margin-top: var(--s-1-5);
+		border-collapse: collapse;
+
+		& th,
+		& td {
+			padding: var(--s-0-5) var(--s-2-5) var(--s-0-5) 0;
+			text-align: right;
+			font-variant-numeric: tabular-nums;
+
+			&:first-child {
+				text-align: left;
+			}
+		}
+	}
+}
+
+@container scanner (width < 600px) {
+	.previewRow {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
diff --git a/app/features/scanner/components/VodView.tsx b/app/features/scanner/components/VodView.tsx
new file mode 100644
index 000000000..95622ce57
--- /dev/null
+++ b/app/features/scanner/components/VodView.tsx
@@ -0,0 +1,376 @@
+/**
+ * A scanned file: deliberately the live screen with a different header —
+ * a progress bar where the LIVE pill is, a frame preview where the capture
+ * preview is, and the same cards filling in underneath as games are found.
+ * Leaving the scanner page cancels a running scan; nothing of it is saved. A finished scan (this visit's, from
+ * vod-scan.ts, or a saved one from the store) shows its numbers, Add to VoDs
+ * and Delete.
+ */
+import { Trash2, Video } from "lucide-react";
+import { useEffect, useState } from "react";
+import { LinkButton, SendouButton } from "~/components/elements/Button";
+import { FormWithConfirm } from "~/components/FormWithConfirm";
+import { LogInPopover } from "~/components/LogInPopover";
+import { useUser } from "~/features/auth/core/user";
+import {
+	useSearchParam,
+	useSearchParamsTyped,
+} from "~/modules/search-params/hooks";
+import type { ScanTelemetry } from "../core/detectors/telemetry";
+import { formatPosition, formatTime } from "../core/format";
+import { scannerSearchParams } from "../scanner-search-params";
+import { deleteVodClips } from "../store/clips";
+import {
+	deleteVod,
+	loadVod,
+	loadVodEventFrame,
+	loadVodEvents,
+	type VodSummary,
+} from "../store/vods";
+import { refreshClips, useClips } from "./clips-feed";
+import { ExportMenu } from "./ExportMenu";
+import { NotFound } from "./NotFound";
+import { SessionHeader, StatusPill } from "./SessionHeader";
+import { type SessionInfo, SessionView } from "./SessionView";
+import { matchContaining } from "./sendou-ingest";
+import { sendouUpload } from "./sendou-upload";
+import type { ScanEvent } from "./session-data";
+import { useScannerSettings } from "./settings";
+import { sendVod } from "./upload";
+import { useDebug } from "./use-debug";
+import styles from "./VodView.module.css";
+import {
+	setVodPreviewCanvas,
+	startVodScan,
+	uploadVodScan,
+	useVodScan,
+	vodScanFrame,
+} from "./vod-scan";
+import { refreshVods } from "./vods-feed";
+
+export function VodView() {
+	const [name] = useSearchParam(scannerSearchParams, "name");
+	const scan = useVodScan();
+	if (name === null) return <NotFound>No file was picked.</NotFound>;
+	if (scan.name === name) return <ScanVodView name={name} />;
+	return <StoredVodView name={name} />;
+}
+
+/** The scan running (or finished) this visit. */
+function ScanVodView({ name }: { name: string }) {
+	const scan = useVodScan();
+	const settings = useScannerSettings();
+	const user = useUser();
+	const [telemetryOn] = useSearchParam(scannerSearchParams, "telemetry");
+	const debug = useDebug();
+	const scanning = scan.status === "scanning";
+
+	return (
+		<VodSessionView
+			name={name}
+			events={scan.events}
+			running={scanning}
+			getFrame={vodScanFrame}
+			onUpload={(built) => {
+				const id = built.sources[0]?.id;
+				if (id !== undefined) void uploadVodScan(matchContaining(id));
+			}}
+			status={
+				scan.status === "error" ? (
+					<div className={styles.errorBox}>
+						<p className={styles.error}>{scan.error}</p>
+						<label className={styles.fileButton}>
+							Try another file
+							<input
+								type="file"
+								accept="video/*"
+								onChange={(e) => {
+									const file = e.target.files?.[0];
+									e.target.value = "";
+									if (file) {
+										void startVodScan(file, {
+											saveClips: scan.saveClips,
+											telemetry: telemetryOn,
+										});
+									}
+								}}
+							/>
+						</label>
+					</div>
+				) : scanning ? (
+					<div className={styles.scanning}>
+						<div className={styles.progressRow}>
+							<StatusPill>Scanning</StatusPill>
+							<progress
+								className={styles.progress}
+								value={scan.progress?.t ?? 0}
+								max={scan.progress?.duration ?? 1}
+							/>
+							<span className={styles.progressText}>
+								{scan.progress
+									? `${Math.round((scan.progress.t / Math.max(1, scan.progress.duration)) * 100)}% · ${formatPosition(scan.progress.t)} / ${formatPosition(scan.progress.duration)}${scan.progress.rate > 0 ? ` · ${scan.progress.rate.toFixed(1)}× realtime` : ""}`
+									: "opening the file…"}
+							</span>
+						</div>
+						<div className={styles.previewRow}>
+							<canvas ref={setVodPreviewCanvas} className={styles.preview} />
+							<div className={styles.previewNotes}>
+								<div>
+									Save clips {scan.saveClips ? "on" : "off"} · Upload{" "}
+									{user && settings.upload ? "on" : "off"}
+								</div>
+								{scan.error ? (
+									<div className={styles.error}>{scan.error}</div>
+								) : null}
+							</div>
+						</div>
+					</div>
+				) : (
+					<div className={styles.afterScan}>
+						{scan.clipsWork?.state === "cutting"
+							? `Saving clip ${Math.min(scan.clipsWork.done + 1, scan.clipsWork.total)}/${scan.clipsWork.total}…`
+							: scan.clipsWork?.state === "done" && scan.clipsWork.error
+								? `Clips: ${scan.clipsWork.error}`
+								: null}
+						{scan.uploading ? "Uploading…" : null}
+						{scan.error ? (
+							<span className={styles.error}>{scan.error}</span>
+						) : null}
+					</div>
+				)
+			}
+			telemetry={debug && telemetryOn ? scan.telemetry : null}
+		/>
+	);
+}
+
+/** A saved scan reopened from the landing. */
+function StoredVodView({ name }: { name: string }) {
+	const stored = useStoredVod(name);
+	if (stored.state === "loading") return null;
+	if (stored.state === "missing") {
+		return <NotFound>This VoD is no longer saved.</NotFound>;
+	}
+	const { events, reload } = stored;
+	return (
+		<VodSessionView
+			name={name}
+			events={events}
+			running={false}
+			getFrame={(event) =>
+				event.hasFrame && event.id !== undefined
+					? () => loadVodEventFrame(event.id!)
+					: undefined
+			}
+			onUpload={(built) => {
+				const id = built.sources[0]?.id;
+				if (id !== undefined) void sendVod(name, matchContaining(id), reload);
+			}}
+			status={null}
+			telemetry={null}
+		/>
+	);
+}
+
+type StoredVod =
+	| { state: "loading" }
+	| { state: "missing" }
+	| {
+			state: "ready";
+			summary: VodSummary;
+			events: ScanEvent[];
+			reload: () => void;
+	  };
+
+/** Loads a saved VoD's summary and events; `reload` re-reads them after a send. */
+function useStoredVod(name: string): StoredVod {
+	const [loaded, setLoaded] = useState<{
+		name: string;
+		summary: VodSummary | undefined;
+		events: ScanEvent[];
+	} | null>(null);
+	const [version, setVersion] = useState(0);
+
+	// the store is outside React: read it when the name (or version) changes
+	useEffect(() => {
+		let stale = false;
+		void Promise.all([loadVod(name), loadVodEvents(name)]).then(
+			([summary, events]) => {
+				if (!stale) setLoaded({ name, summary, events });
+			},
+		);
+		return () => {
+			stale = true;
+		};
+	}, [name, version]);
+
+	if (!loaded || loaded.name !== name) return { state: "loading" };
+	if (!loaded.summary) return { state: "missing" };
+	return {
+		state: "ready",
+		summary: loaded.summary,
+		events: loaded.events,
+		reload: () => setVersion((v) => v + 1),
+	};
+}
+
+function VodSessionView({
+	name,
+	events,
+	running,
+	getFrame,
+	onUpload,
+	status,
+	telemetry,
+}: {
+	name: string;
+	events: ScanEvent[];
+	running: boolean;
+	getFrame: (event: ScanEvent) => (() => Promise<Blob | undefined>) | undefined;
+	onUpload: (built: SessionInfo["built"][number]) => void;
+	status: React.ReactNode;
+	telemetry: ScanTelemetry | null;
+}) {
+	const [, setParams] = useSearchParamsTyped(scannerSearchParams);
+	const clips = useClips();
+	const user = useUser();
+	const vodClips = clips.filter(
+		(clip) => clip.source.kind === "vod" && clip.source.name === name,
+	);
+	const upload = running ? null : sendouUpload(events);
+
+	const remove = async () => {
+		await deleteVod(name);
+		await deleteVodClips(name);
+		await Promise.all([refreshVods(), refreshClips()]);
+		setParams({ view: "home" });
+	};
+
+	return (
+		<SessionView
+			kind="vod"
+			events={events}
+			originT={0}
+			clips={vodClips}
+			clipsTitle="Clips"
+			running={running}
+			canUpload={Boolean(user)}
+			onUpload={onUpload}
+			getFrame={getFrame}
+			emptyText={
+				running
+					? "Games appear here as their results screens are found."
+					: "No games were found in this file."
+			}
+			header={(info) => (
+				<SessionHeader
+					actions={
+						<>
+							<ExportMenu
+								built={info.built}
+								events={events}
+								source={{ label: name, originT: 0 }}
+								clipCounts={info.clipCounts}
+								fileBase={name.replace(/\.[^.]+$/, "")}
+							/>
+							{upload?.url ? (
+								user ? (
+									<LinkButton
+										to={upload.url}
+										size="small"
+										variant="outlined"
+										icon={<Video />}
+									>
+										Add to VoDs
+									</LinkButton>
+								) : (
+									<LogInPopover>
+										<SendouButton
+											size="small"
+											variant="outlined"
+											icon={<Video />}
+										>
+											Add to VoDs
+										</SendouButton>
+									</LogInPopover>
+								)
+							) : null}
+							{!running ? (
+								<FormWithConfirm
+									dialogHeading={`Delete the scan of "${name}"?`}
+									description="Its games, frames and clips are removed from this browser. The file itself is untouched."
+									onConfirm={() => void remove()}
+								>
+									<SendouButton
+										size="small"
+										variant="destructive"
+										icon={<Trash2 />}
+									>
+										Delete
+									</SendouButton>
+								</FormWithConfirm>
+							) : null}
+						</>
+					}
+				>
+					<div className={styles.title}>{name}</div>
+					{upload?.problem ? (
+						<div className={styles.partial}>
+							Add to VoDs unavailable: {upload.problem}
+						</div>
+					) : null}
+				</SessionHeader>
+			)}
+		>
+			{status}
+			{telemetry ? <TelemetryPanel telemetry={telemetry} /> : null}
+		</SessionView>
+	);
+}
+
+function TelemetryPanel({ telemetry }: { telemetry: ScanTelemetry }) {
+	const detectors = Object.entries(telemetry.detectors).sort(([a], [b]) =>
+		a.localeCompare(b),
+	);
+	const coveredS = telemetry.activeVideoS + telemetry.skimVideoS;
+	return (
+		<details className={styles.telemetry}>
+			<summary>
+				telemetry · analyzed {telemetry.analyzedFrames}/
+				{telemetry.decodedFrames} decoded frames
+				{coveredS > 0
+					? ` · skimmed ${formatTime(telemetry.skimVideoS)} of ${formatTime(coveredS)}`
+					: null}
+				{telemetry.wallMs > 0
+					? ` · ${formatTime(telemetry.wallMs / 1000)} cpu`
+					: null}
+			</summary>
+			<table>
+				<thead>
+					<tr>
+						<th>detector</th>
+						<th>checks</th>
+						<th>gate pass</th>
+						<th>gate ms</th>
+						<th>parses</th>
+						<th>parse ms</th>
+						<th>suppressed</th>
+					</tr>
+				</thead>
+				<tbody>
+					{detectors.map(([id, d]) => (
+						<tr key={id}>
+							<td>{id}</td>
+							<td>{d.checks}</td>
+							<td>{d.gatePasses}</td>
+							<td>{Math.round(d.gateMs)}</td>
+							<td>{d.parses}</td>
+							<td>{Math.round(d.parseMs)}</td>
+							<td>{d.suppressedParses}</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</details>
+	);
+}
diff --git a/app/features/scanner/components/clips-feed.ts b/app/features/scanner/components/clips-feed.ts
new file mode 100644
index 000000000..08898d0e7
--- /dev/null
+++ b/app/features/scanner/components/clips-feed.ts
@@ -0,0 +1,44 @@
+/**
+ * The clip list every view reads (landing strip, session strips, clip
+ * history), refreshed after each save/delete/roll and readable through a hook.
+ */
+import { useSyncExternalStore } from "react";
+import { listClips, type ScannerClip } from "../store/clips";
+
+const EMPTY: ScannerClip[] = [];
+
+let clips: ScannerClip[] = EMPTY;
+let loaded = false;
+const listeners = new Set<() => void>();
+let refreshing: Promise<void> | null = null;
+
+export function refreshClips(): Promise<void> {
+	refreshing ??= listClips()
+		.then((next) => {
+			clips = next;
+		})
+		.catch(() => {
+			// storage unavailable: the strips stay empty
+		})
+		.finally(() => {
+			refreshing = null;
+			loaded = true;
+			for (const listener of listeners) listener();
+		});
+	return refreshing;
+}
+
+/** Every clip, best first; loads on first use. */
+export function useClips(): ScannerClip[] {
+	return useSyncExternalStore(subscribe, getClips, () => EMPTY);
+}
+
+function getClips(): ScannerClip[] {
+	if (!loaded && !refreshing) void refreshClips();
+	return clips;
+}
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
diff --git a/app/features/scanner/components/download.ts b/app/features/scanner/components/download.ts
new file mode 100644
index 000000000..cbf2e871f
--- /dev/null
+++ b/app/features/scanner/components/download.ts
@@ -0,0 +1,14 @@
+/** Browser-side file saving for exports (CSV, clips, fixtures). */
+
+export function downloadBlob(name: string, blob: Blob): void {
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = name;
+	a.click();
+	URL.revokeObjectURL(url);
+}
+
+export function downloadCsv(name: string, csv: string): void {
+	downloadBlob(name, new Blob([csv], { type: "text/csv" }));
+}
diff --git a/app/features/scanner/components/errors.ts b/app/features/scanner/components/errors.ts
new file mode 100644
index 000000000..869ea5a69
--- /dev/null
+++ b/app/features/scanner/components/errors.ts
@@ -0,0 +1,29 @@
+/** Turns capture/decode/worker failures into copy a player can act on. */
+export function describeError(error: unknown): string {
+	if (error instanceof DOMException) {
+		switch (error.name) {
+			case "NotAllowedError":
+				return "Camera access was denied — allow it in the browser's site settings and try again";
+			case "NotFoundError":
+				return "No video input was found — plug in the capture card or start OBS Virtual Camera";
+			case "NotReadableError":
+				return "The video input is in use by another app";
+			case "OverconstrainedError":
+				return "The selected source is not available — pick another one in Settings";
+			case "InvalidStateError":
+				return "This file could not be decoded as video";
+			case "QuotaExceededError":
+				return "The browser's storage is full — delete some clips or sessions";
+		}
+	}
+	const message = error instanceof Error ? error.message : String(error);
+	if (/Failed to fetch|NetworkError/i.test(message)) {
+		return "The detection models could not be downloaded — check the connection and try again";
+	}
+	if (
+		/cannot decode|no video track|createImageBitmap|not usable/i.test(message)
+	) {
+		return "This file could not be decoded as video";
+	}
+	return message;
+}
diff --git a/app/features/scanner/components/events-feed.ts b/app/features/scanner/components/events-feed.ts
new file mode 100644
index 000000000..9b740f98e
--- /dev/null
+++ b/app/features/scanner/components/events-feed.ts
@@ -0,0 +1,164 @@
+/**
+ * The live event store as the views see it: every detection, split into
+ * sessions (core/sessions.ts) with each session's matches built once per
+ * refresh rather than per render. Every saved event asks for a refresh, ~2-3
+ * a second during a match; requests landing while one runs coalesce into a
+ * single trailing pass.
+ */
+import { useSyncExternalStore } from "react";
+import {
+	type BuiltMatch,
+	buildScannerMatches,
+	invalidObjectiveEvents,
+} from "../core/match-builder";
+import {
+	SESSION_GAP_MS,
+	type SessionSummary,
+	sessionKey,
+	sessionSummary,
+	splitSessions,
+} from "../core/sessions";
+import { deleteEvents, listEvents, type StoredEvent } from "../store/events";
+
+export interface LiveSession {
+	/** the first event's detection time — the URL id */
+	key: number;
+	/** oldest first */
+	events: StoredEvent[];
+	/** chronological */
+	built: BuiltMatch<StoredEvent>[];
+	summary: SessionSummary;
+	startedAt: number;
+	endedAt: number;
+	/** stream second the session's positions count from */
+	originT: number;
+}
+
+export interface FeedSnapshot {
+	loaded: boolean;
+	/** oldest first */
+	sessions: LiveSession[];
+}
+
+const EMPTY: FeedSnapshot = { loaded: false, sessions: [] };
+
+let snapshot: FeedSnapshot = EMPTY;
+const listeners = new Set<() => void>();
+const state = { running: false, queued: false };
+/** an older session's events don't change, so its build is kept */
+const buildCache = new Map<number, { signature: string; built: LiveSession }>();
+
+export function refreshFeed(): void {
+	if (state.running) {
+		state.queued = true;
+		return;
+	}
+	state.running = true;
+	void (async () => {
+		try {
+			do {
+				state.queued = false;
+				const events = await listEvents();
+				snapshot = { loaded: true, sessions: await toSessions(events) };
+				for (const listener of listeners) listener();
+			} while (state.queued);
+		} catch {
+			snapshot = { loaded: true, sessions: snapshot.sessions };
+			for (const listener of listeners) listener();
+		} finally {
+			state.running = false;
+		}
+	})();
+}
+
+export function useFeed(): FeedSnapshot {
+	return useSyncExternalStore(subscribe, getFeed, () => EMPTY);
+}
+
+export function getFeed(): FeedSnapshot {
+	if (!snapshot.loaded && !state.running) refreshFeed();
+	return snapshot;
+}
+
+export function subscribeFeed(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+const subscribe = subscribeFeed;
+
+/** The session a detection right now would join: the newest, unless the gap has closed it. */
+export function currentSession(
+	feed: FeedSnapshot,
+	now = Date.now(),
+): LiveSession | null {
+	const newest = feed.sessions.at(-1);
+	if (!newest || now - newest.endedAt >= SESSION_GAP_MS) return null;
+	return newest;
+}
+
+export function findSession(
+	feed: FeedSnapshot,
+	key: number,
+): LiveSession | null {
+	return feed.sessions.find((session) => session.key === key) ?? null;
+}
+
+async function toSessions(events: StoredEvent[]): Promise<LiveSession[]> {
+	const sessions: LiveSession[] = [];
+	const seen = new Set<number>();
+	for (const sessionEvents of splitSessions(events)) {
+		const key = sessionKey(sessionEvents);
+		seen.add(key);
+		const signature = signatureOf(sessionEvents);
+		const cached = buildCache.get(key);
+		if (cached?.signature === signature) {
+			sessions.push(cached.built);
+			continue;
+		}
+		const sorted = sessionEvents.toSorted(
+			(a, b) => a.t - b.t || (a.id ?? 0) - (b.id ?? 0),
+		);
+		let built = buildScannerMatches(sorted);
+		// objective reads grouped into a known non-SZ match slipped past the live
+		// block (e.g. the mode read arrived after them) — delete them
+		const invalid = invalidObjectiveEvents(built);
+		if (invalid.length > 0) {
+			await deleteEvents(
+				invalid
+					.map((event) => event.id)
+					.filter((id): id is number => id !== undefined),
+			);
+			const invalidSet = new Set(invalid);
+			built = buildScannerMatches(sorted.filter((e) => !invalidSet.has(e)));
+		}
+		const session: LiveSession = {
+			key,
+			events: sorted,
+			built,
+			summary: sessionSummary(built.map((b) => b.match)),
+			startedAt: key,
+			endedAt: sessionEvents.at(-1)!.detectedAt,
+			originT: sorted[0]!.t,
+		};
+		buildCache.set(key, { signature, built: session });
+		sessions.push(session);
+	}
+	for (const key of buildCache.keys()) {
+		if (!seen.has(key)) buildCache.delete(key);
+	}
+	return sessions;
+}
+
+/** Changes when an event joins, leaves, or its send status moves. */
+function signatureOf(events: readonly StoredEvent[]): string {
+	let sends = 0;
+	let latest = 0;
+	for (const event of events) {
+		if (event.send) {
+			sends++;
+			latest = Math.max(latest, event.send.at);
+		}
+	}
+	return `${events.length}:${events.at(-1)?.id ?? 0}:${sends}:${latest}`;
+}
diff --git a/app/features/scanner/components/fixture-export.ts b/app/features/scanner/components/fixture-export.ts
index 55a90daba..bd91f9713 100644
--- a/app/features/scanner/components/fixture-export.ts
+++ b/app/features/scanner/components/fixture-export.ts
@@ -34,7 +34,8 @@ import {
 	SCOREBOARD_OWN_EVENT_TYPE,
 	type ScoreboardOwnData,
 } from "../core/detectors/scoreboard-own/index";
-import { mainWeaponLabel, stageLabel, weaponLabel } from "./labels";
+import { mainWeaponLabel, stageLabel, weaponLabel } from "../core/labels";
+import { downloadBlob as download } from "./download";
 
 /** Scoreboard data with the replay extras present when the event has them. */
 export type CardData = ScoreboardData &
@@ -56,15 +57,6 @@ function isDeath(_data: FixtureData, eventType: string): _data is DeathData {
 	return eventType === DEATH_EVENT_TYPE;
 }
 
-function download(name: string, blob: Blob): void {
-	const url = URL.createObjectURL(blob);
-	const a = document.createElement("a");
-	a.href = url;
-	a.download = name;
-	a.click();
-	URL.revokeObjectURL(url);
-}
-
 function buildExpectedJson(
 	data: FixtureData | null,
 	eventType = "Scoreboard",
diff --git a/app/features/scanner/components/format.ts b/app/features/scanner/components/format.ts
index f991969f1..85f8133c2 100644
--- a/app/features/scanner/components/format.ts
+++ b/app/features/scanner/components/format.ts
@@ -1,20 +1,5 @@
 import { useDateTimeFormat } from "~/hooks/intl/useDateTimeFormat";
 
-/** hh:mm:ss for feed rows, CSV cells, and scan progress. */
-export function formatTime(t: number): string {
-	const h = Math.floor(t / 3600);
-	const m = Math.floor((t % 3600) / 60);
-	const s = Math.floor(t % 60);
-	return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-}
-
-/** the match timer's M:SS (215 → "3:35") */
-export function formatClock(seconds: number): string {
-	const m = Math.floor(seconds / 60);
-	const s = Math.floor(seconds % 60);
-	return `${m}:${String(s).padStart(2, "0")}`;
-}
-
 /** Locale-aware time-of-day formatter for detection timestamps (epoch ms). */
 export function useEventTimeFormatter(): (ms: number) => string {
 	const { formatter } = useDateTimeFormat({ timeStyle: "medium" });
diff --git a/app/features/scanner/components/live-session.ts b/app/features/scanner/components/live-session.ts
new file mode 100644
index 000000000..cebc55088
--- /dev/null
+++ b/app/features/scanner/components/live-session.ts
@@ -0,0 +1,430 @@
+/**
+ * The live capture, owned by a module singleton rather than a view so that
+ * moving between views (or off the page) keeps it running until Stop. Source
+ * frames from the capture stream go to the analyzer worker; its events land
+ * in the live event store (from which the feed derives sessions and
+ * matches), close matches upload themselves, and the ring buffer cuts a clip
+ * whenever a scored window closes — the same event → match → clip → upload
+ * path a VoD scan runs, fed from a stream instead of a file.
+ */
+import { useSyncExternalStore } from "react";
+import { ClipRingBuffer, supportsRingBuffer } from "../capture/ring-buffer";
+import {
+	audioInputFor,
+	inputsRevealed,
+	listMediaInputs,
+	openCapture,
+	requestInputAccess,
+	startSampler,
+} from "../capture/sampler";
+import {
+	type ClipWindow,
+	MAX_CLIP_SECONDS,
+	STREAK_MAX_GAP_S,
+	scoreWindows,
+	windowClosed,
+} from "../core/clips/scoring";
+import { DEATH_EVENT_TYPE } from "../core/detectors/death/index";
+import { KILL_EVENT_TYPE } from "../core/detectors/kill/index";
+import {
+	MAP_START_EVENT_TYPE,
+	type MapStartData,
+} from "../core/detectors/map-start/index";
+import { MINIMAP_EVENT_TYPE } from "../core/detectors/minimap/index";
+import { OBJECTIVE_EVENT_TYPE } from "../core/detectors/objective/index";
+import { PLAYER_STATUS_EVENT_TYPE } from "../core/detectors/objective/player-status";
+import { SCOREBOARD_EVENT_TYPES } from "../core/detectors/registry";
+import type { DetectedEvent, GateResult } from "../core/detectors/types";
+import type { ScannerMatch } from "../core/scanner-match";
+import { TimelineBuilder } from "../core/timeline/index";
+import {
+	requestPersistentStorage,
+	rollSessionClipsIntoHistory,
+	saveClip,
+} from "../store/clips";
+import { saveEvent, trimEvents, updateEventsSend } from "../store/events";
+import { AnalyzerClient } from "../worker/client";
+import { refreshClips } from "./clips-feed";
+import { describeError } from "./errors";
+import {
+	currentSession,
+	getFeed,
+	refreshFeed,
+	subscribeFeed,
+} from "./events-feed";
+import { type FixtureData, saveFixture } from "./fixture-export";
+import {
+	matchContaining,
+	retryableUnlinkedMatches,
+	unsentClosedMatches,
+	unsentMatches,
+} from "./sendou-ingest";
+import { readSettings } from "./settings";
+import { thumbnailFromBlob } from "./thumbnail";
+import { sendLive, uploadEnabled } from "./upload";
+
+const SAMPLE_FPS = 2;
+
+/**
+ * A slow parse (a browsed battle-log entry, a CJK splash-tag name) can occupy
+ * the worker for seconds to tens of seconds; buffering the frames sampled
+ * meanwhile keeps the stall from being missed. 24 frames hold ~12s at full
+ * density; past that the backlog is decimated toward even spacing over the
+ * stall (worker/frame-queue.ts) so a results screen mid-stall survives.
+ */
+const FRAME_QUEUE_LIMIT = 24;
+
+/** How often a running capture rechecks unlinked matches for a retry (backoff in sendou-ingest.ts). */
+const UNLINKED_RETRY_TICK_MS = 15_000;
+
+/** Footage kept for clips: the longest clip plus the wait for its window to close, with margin. */
+const RING_BUFFER_SECONDS = MAX_CLIP_SECONDS + STREAK_MAX_GAP_S + 10;
+
+/** Windows close by time passing, not only by new events. */
+const CLIP_TICK_MS = 5_000;
+
+/** Event types the ingested matches are built from — the only ones with a send status. */
+const INGESTABLE_TYPES = [
+	MAP_START_EVENT_TYPE,
+	DEATH_EVENT_TYPE,
+	KILL_EVENT_TYPE,
+	MINIMAP_EVENT_TYPE,
+	...SCOREBOARD_EVENT_TYPES,
+];
+
+export type LiveStatus = "idle" | "starting" | "running" | "error";
+/** `unsupported`: no WebCodecs/track processor; `failed`: the encoder refused this stream */
+export type ClipsState = "on" | "off" | "unsupported" | "failed";
+
+export interface LiveSnapshot {
+	status: LiveStatus;
+	error: string | null;
+	/** wall-clock ms the capture started */
+	since: number | null;
+	stream: MediaStream | null;
+	/** the capture carries the source's audio track */
+	hasAudio: boolean;
+	/** why it does not, when an audio input was expected */
+	audioError: string | null;
+	clips: ClipsState;
+	/** highest gate score on the latest frame (debug) */
+	gateScore: number | null;
+	/** a detector fired on the latest frame */
+	detecting: boolean;
+}
+
+const IDLE: LiveSnapshot = {
+	status: "idle",
+	error: null,
+	since: null,
+	stream: null,
+	hasAudio: false,
+	audioError: null,
+	clips: "off",
+	gateScore: null,
+	detecting: false,
+};
+
+let snapshot = IDLE;
+const listeners = new Set<() => void>();
+
+let video: HTMLVideoElement | null = null;
+let client: AnalyzerClient | null = null;
+let ring: ClipRingBuffer | null = null;
+let stopSampler: (() => void) | null = null;
+let retryTimer: ReturnType<typeof setInterval> | null = null;
+let clipTimer: ReturnType<typeof setInterval> | null = null;
+let unsubscribeFeed: (() => void) | null = null;
+let timeline = new TimelineBuilder();
+const storedIds = new WeakMap<DetectedEvent, number>();
+const gates = new Map<string, GateResult>();
+let latestParse: { type: string; data: FixtureData } | null = null;
+// the open match is known to be a non-SZ mode, so counter reads are
+// misreads of another mode's overlay and are not collected at all
+let objectiveBlocked = false;
+/** windows already cut, `${match first source id}:${window t}` */
+const cutWindows = new Set<string>();
+
+export function useLiveSession(): LiveSnapshot {
+	return useSyncExternalStore(
+		subscribe,
+		() => snapshot,
+		() => IDLE,
+	);
+}
+
+export function getLiveSession(): LiveSnapshot {
+	return snapshot;
+}
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+function set(patch: Partial<LiveSnapshot>): void {
+	snapshot = { ...snapshot, ...patch };
+	for (const listener of listeners) listener();
+}
+
+/** Opens the source, brings the worker up, then starts sampling; a second call while running is ignored. */
+export async function startCapture(): Promise<void> {
+	if (snapshot.status === "starting" || snapshot.status === "running") return;
+	set({ ...IDLE, status: "starting" });
+	objectiveBlocked = false;
+	gates.clear();
+	cutWindows.clear();
+	timeline = new TimelineBuilder();
+	let stream: MediaStream | null = null;
+	try {
+		const settings = readSettings();
+		const noInputs = { video: [], audio: [] };
+		let inputs = await listMediaInputs().catch(() => noInputs);
+		// the source's audio side is only listed with the microphone permission
+		if (!inputsRevealed(inputs) && (await requestInputAccess())) {
+			inputs = await listMediaInputs().catch(() => noInputs);
+		}
+		const videoInput =
+			inputs.video.find((d) => d.deviceId === settings.sourceDeviceId) ?? null;
+		const audioInput = videoInput
+			? audioInputFor(videoInput, inputs.audio)
+			: null;
+		const opened = await openCapture({
+			videoDeviceId: settings.sourceDeviceId,
+			audioDeviceId: audioInput?.deviceId ?? null,
+		});
+		stream = opened.stream;
+		video = document.createElement("video");
+		video.muted = true;
+		video.playsInline = true;
+		video.srcObject = stream;
+		await video.play();
+
+		// the worker first: a failed init must not leave the camera on
+		client = new AnalyzerClient(onResult, onWorkerError, undefined, {
+			frameQueueLimit: FRAME_QUEUE_LIMIT,
+		});
+		try {
+			await client.whenReady();
+		} catch (error) {
+			client.dispose();
+			client = null;
+			throw error;
+		}
+
+		let clips: ClipsState = "off";
+		if (settings.saveClips) {
+			if (!supportsRingBuffer()) {
+				clips = "unsupported";
+			} else {
+				ring = new ClipRingBuffer(RING_BUFFER_SECONDS);
+				try {
+					await ring.start(stream);
+					clips = "on";
+				} catch {
+					ring.stop();
+					ring = null;
+					clips = "failed";
+				}
+			}
+		}
+
+		stopSampler = startSampler(video, SAMPLE_FPS, (bitmap, t) => {
+			client?.analyze(bitmap, t);
+		});
+		// a match sent the moment its scoreboard closed usually beats the players to
+		// reporting it, so sendou.ink had nothing to link to; retry those while the
+		// capture runs, along with closed matches whose close-send was never attempted
+		retryTimer = setInterval(() => {
+			if (uploadEnabled()) {
+				void sendLive(
+					(built) =>
+						retryableUnlinkedMatches(built) || unsentClosedMatches(built),
+				);
+			}
+		}, UNLINKED_RETRY_TICK_MS);
+		clipTimer = setInterval(clipTick, CLIP_TICK_MS);
+		unsubscribeFeed = subscribeFeed(clipTick);
+		void trimEvents().catch(() => {});
+		set({
+			status: "running",
+			since: Date.now(),
+			stream,
+			hasAudio: stream.getAudioTracks().length > 0,
+			audioError: opened.audioError,
+			clips,
+		});
+	} catch (error) {
+		if (stream) stopTracks(stream);
+		release();
+		set({ ...IDLE, status: "error", error: describeError(error) });
+	}
+}
+
+/** Ends the capture: the session's clips roll into history and unsent matches get one last send. */
+export function stopCapture(): void {
+	if (snapshot.status === "idle") return;
+	const stream = snapshot.stream;
+	release();
+	if (stream) stopTracks(stream);
+	set({ ...IDLE });
+	// the scan ending is the last match boundary — flush what's unsent
+	// (partials are safe: the server merges them into fuller resends)
+	if (uploadEnabled()) void sendLive(unsentMatches);
+	void rollSessionClipsIntoHistory()
+		.then(() => refreshClips())
+		.catch(() => {});
+	void trimEvents().catch(() => {});
+}
+
+/** Debug: the current frame plus the latest parse as a fixture download. */
+export function saveCurrentFrameAsFixture(): void {
+	if (!video) return;
+	void saveFixture(video, latestParse);
+}
+
+function release(): void {
+	stopSampler?.();
+	stopSampler = null;
+	if (retryTimer) clearInterval(retryTimer);
+	retryTimer = null;
+	if (clipTimer) clearInterval(clipTimer);
+	clipTimer = null;
+	unsubscribeFeed?.();
+	unsubscribeFeed = null;
+	ring?.stop();
+	ring = null;
+	client?.dispose();
+	client = null;
+	if (video) video.srcObject = null;
+	video = null;
+}
+
+function stopTracks(stream: MediaStream): void {
+	for (const track of stream.getTracks()) track.stop();
+}
+
+function onWorkerError(message: string): void {
+	const stream = snapshot.stream;
+	release();
+	if (stream) stopTracks(stream);
+	set({ ...IDLE, status: "error", error: describeError(new Error(message)) });
+}
+
+function onResult(
+	result: Parameters<ConstructorParameters<typeof AnalyzerClient>[0]>[0],
+): void {
+	// one result arrives per detector per frame; status reflects whether any fired
+	gates.set(result.detector, result.gate);
+	const scores = [...gates.values()];
+	const detecting = scores.some((g) => g.pass);
+	set({
+		gateScore: Math.max(...scores.map((g) => g.score)),
+		detecting,
+	});
+	if (!result.gate.pass) return;
+	for (const event of result.events as DetectedEvent<FixtureData>[]) {
+		latestParse = { type: event.type, data: event.data };
+		if (
+			(event.type === OBJECTIVE_EVENT_TYPE ||
+				event.type === PLAYER_STATUS_EVENT_TYPE) &&
+			objectiveBlocked
+		) {
+			continue;
+		}
+		const action = timeline.push(event);
+		if (action.action !== "added" && action.action !== "replaced") continue;
+		if (event.type === MAP_START_EVENT_TYPE) {
+			const mode = (event.data as MapStartData).mode;
+			objectiveBlocked = mode !== null && mode !== "SZ";
+		} else if (SCOREBOARD_EVENT_TYPES.includes(event.type)) {
+			objectiveBlocked = false;
+		}
+		const stale =
+			action.action === "replaced" ? storedIds.get(action.replaced) : undefined;
+		void persist(event, result.frame, stale);
+	}
+}
+
+async function persist(
+	event: DetectedEvent,
+	frame: Blob | undefined,
+	stale: number | undefined,
+): Promise<void> {
+	try {
+		const thumbnail = frame ? await thumbnailFromBlob(frame) : undefined;
+		// reusing the replaced event's id keeps match card keys stable, so
+		// repeat detections don't remount the cards
+		const id = await saveEvent(event, thumbnail, frame, stale);
+		storedIds.set(event, id);
+		if (uploadEnabled() && INGESTABLE_TYPES.includes(event.type)) {
+			if (SCOREBOARD_EVENT_TYPES.includes(event.type)) {
+				// a scoreboard closes its match — send it
+				refreshFeed();
+				await sendLive(
+					(built) => matchContaining(id)(built) && unsentMatches(built),
+				);
+			} else {
+				await updateEventsSend([id], { state: "queued", at: Date.now() });
+			}
+		}
+	} catch (error) {
+		set({ error: describeError(error) });
+	}
+	refreshFeed();
+}
+
+/** Cuts every scored window of the running session whose post-roll is in the ring. */
+function clipTick(): void {
+	if (!ring || snapshot.status !== "running") return;
+	const session = currentSession(getFeed());
+	if (!session) return;
+	const nowT = Date.now() / 1000;
+	for (const built of session.built) {
+		const deaths = built.sources
+			.filter((event) => event.type === DEATH_EVENT_TYPE)
+			.map((event) => event.t);
+		for (const window of scoreWindows(built.match, deaths, {
+			minKills: readSettings().clipMinKills,
+		})) {
+			const key = `${built.sources[0]?.id ?? built.match.startsAt}:${window.t}`;
+			if (cutWindows.has(key) || !windowClosed(window, nowT)) continue;
+			cutWindows.add(key);
+			void cutClip(session.key, built.match, window);
+		}
+	}
+}
+
+async function cutClip(
+	sessionKey: number,
+	match: ScannerMatch,
+	window: ClipWindow,
+): Promise<void> {
+	if (!ring) return;
+	try {
+		const clip = await ring.cut(window.start, window.end);
+		if (!clip) return;
+		await saveClip(
+			{
+				createdAt: Date.now(),
+				bucket: "session",
+				source: { kind: "live", sessionKey },
+				start: clip.start,
+				end: clip.end,
+				t: window.t,
+				time: window.time,
+				score: window.score,
+				kills: window.kills,
+				mode: match.mode,
+				stage: match.stage,
+				hasAudio: clip.hasAudio,
+				thumbnail: clip.thumbnail,
+			},
+			clip.blob,
+		);
+		requestPersistentStorage();
+		await refreshClips();
+	} catch (error) {
+		set({ error: describeError(error) });
+	}
+}
diff --git a/app/features/scanner/components/sendou-ingest.ts b/app/features/scanner/components/sendou-ingest.ts
index 55373e490..41ba37387 100644
--- a/app/features/scanner/components/sendou-ingest.ts
+++ b/app/features/scanner/components/sendou-ingest.ts
@@ -3,27 +3,23 @@
  * so requests are same-origin: the session cookie rides along and the
  * logged-in user comes from the root loader (useUser); the server resolves
  * the tournament/match. The unit of accounting is one ScannerMatch
- * (core/match-builder.ts) — every source event's IndexedDB record tracks its
- * outcome (the `send` status the feed cards display) — while the unit of
- * transport is a request of up to `MAX_MATCHES_PER_REQUEST`. Resends are
- * safe: sendou.ink dedupes by content hash, merges partials, and scoreboards
- * are first-ingest-wins.
+ * (core/match-builder.ts) — every source event's IndexedDB record, live or
+ * VoD, tracks its outcome (the `send` status the match cards display) — while
+ * the unit of transport is a request of up to `MAX_MATCHES_PER_REQUEST`.
+ * Resends are safe: sendou.ink dedupes by content hash, merges partials, and
+ * scoreboards are first-ingest-wins.
  */
 
 import * as R from "remeda";
-import type {
-	IngestedMatchLink,
-	IngestResponse,
-} from "~/features/scanner-ingest/scanner-ingest-schemas";
+import type { IngestResponse } from "~/features/scanner-ingest/scanner-ingest-schemas";
+import { SCOREBOARD_EVENT_TYPES } from "../core/detectors/registry";
 import type { DetectedEvent } from "../core/detectors/types";
 import type { BuiltMatch } from "../core/match-builder";
 import { buildScannerMatches, ingestSkipReasons } from "../core/match-builder";
 import type { ScannerMatch } from "../core/scanner-match";
-import {
-	type SendStatus,
-	type StoredEvent,
-	updateEventsSend,
-} from "../store/events";
+import { EVENTS_STORE } from "../store/db";
+import { type SendStatus, updateEventsSend } from "../store/events";
+import type { ScanEvent } from "./session-data";
 
 const INGEST_URL = "/ingest";
 
@@ -37,11 +33,6 @@ const MAX_MATCHES_PER_REQUEST = 50;
  */
 const UNLINKED_RETRY_DELAYS_MS = [30_000, 2 * 60_000, 5 * 60_000];
 
-export interface SendouUser {
-	id: number;
-	username: string;
-}
-
 export interface SendResult {
 	sentMatches: number;
 	failedMatches: number;
@@ -63,24 +54,28 @@ export async function sendMatches({
 	events,
 	include,
 	onStatus,
+	store = EVENTS_STORE,
 }: {
-	events: readonly StoredEvent[];
-	include: (built: BuiltMatch<StoredEvent>) => boolean;
+	events: readonly ScanEvent[];
+	include: (built: BuiltMatch<ScanEvent>) => boolean;
 	onStatus: () => void;
+	/** the IndexedDB store the events' send statuses are written to */
+	store?: string;
 }): Promise<SendResult> {
 	const allBuilt = ingestableBuilt(
 		buildScannerMatches(events.filter((e) => e.id !== undefined)),
 	);
 	const selected = allBuilt.filter(include);
-	await clearOrphanedQueued(events, allBuilt);
+	await clearOrphanedQueued(events, allBuilt, store);
 
 	const result: SendResult = { sentMatches: 0, failedMatches: 0 };
 	for (const request of R.chunk(selected, MAX_MATCHES_PER_REQUEST)) {
 		const idsPerMatch = request.map((built) => built.sources.map((e) => e.id!));
-		await updateEventsSend(idsPerMatch.flat(), {
-			state: "sending",
-			at: Date.now(),
-		});
+		await updateEventsSend(
+			idsPerMatch.flat(),
+			{ state: "sending", at: Date.now() },
+			store,
+		);
 		onStatus();
 		try {
 			const response = await postIngestMatches(
@@ -94,25 +89,33 @@ export async function sendMatches({
 				// match: the game is just not reported yet, so a later resend can still
 				// land it. Without a context there is nothing to wait for.
 				const unlinked = !link && response.contextResolved;
-				await updateEventsSend(idsPerMatch[matchIndex]!, {
-					state: unlinked ? "unlinked" : "sent",
-					at: Date.now(),
-					...(link ? { link } : null),
-					...(unlinked
-						? {
-								attempts:
-									(aggregateSendStatus(built.sources)?.attempts ?? 0) + 1,
-							}
-						: null),
-				});
+				await updateEventsSend(
+					idsPerMatch[matchIndex]!,
+					{
+						state: unlinked ? "unlinked" : "sent",
+						at: Date.now(),
+						...(link ? { link } : null),
+						...(unlinked
+							? {
+									attempts:
+										(aggregateSendStatus(built.sources)?.attempts ?? 0) + 1,
+								}
+							: null),
+					},
+					store,
+				);
 			}
 			result.sentMatches += request.length;
 		} catch (err) {
-			await updateEventsSend(idsPerMatch.flat(), {
-				state: "failed",
-				at: Date.now(),
-				error: err instanceof Error ? err.message : String(err),
-			});
+			await updateEventsSend(
+				idsPerMatch.flat(),
+				{
+					state: "failed",
+					at: Date.now(),
+					error: err instanceof Error ? err.message : String(err),
+				},
+				store,
+			);
 			result.failedMatches += request.length;
 		}
 		onStatus();
@@ -120,62 +123,10 @@ export async function sendMatches({
 	return result;
 }
 
-export interface VodResultsSendReport {
-	sentMatches: number;
-	totalMatches: number;
-	/** last failure's message; null when every request went through */
-	error: string | null;
-	/** links /ingest reported, keyed by index into the scan's ingestable matches */
-	links: Array<{ matchIndex: number; link: IngestedMatchLink }>;
-}
-
-/**
- * One-go sender for the VoD tab's "Send results": POSTs as many matches per
- * request as the server cap allows — usually the whole scan, so sendou.ink's
- * content-based tournament resolution sees the full match sequence. No
- * per-event status bookkeeping (VoD events don't live in the live feed store);
- * resending is safe, so a partial failure is simply retried whole.
- */
-export async function sendVodResults(
-	events: readonly DetectedEvent[],
-	onProgress?: (sentMatches: number, totalMatches: number) => void,
-): Promise<VodResultsSendReport> {
-	const matches = ingestableMatches(events);
-
-	let sentMatches = 0;
-	let error: string | null = null;
-	const links: VodResultsSendReport["links"] = [];
-	const chunks = R.chunk(matches, MAX_MATCHES_PER_REQUEST);
-	for (const [chunkIndex, request] of chunks.entries()) {
-		const offset = chunkIndex * MAX_MATCHES_PER_REQUEST;
-		try {
-			const response = await postIngestMatches(request);
-			for (const linked of response.linkedMatches ?? []) {
-				links.push({
-					matchIndex: offset + linked.matchIndex,
-					link: linked.link,
-				});
-			}
-			sentMatches += request.length;
-			onProgress?.(sentMatches, matches.length);
-		} catch (err) {
-			error = err instanceof Error ? err.message : String(err);
-		}
-	}
-	return { sentMatches, totalMatches: matches.length, error, links };
-}
-
-/** The number of matches a set of events would send to /ingest. */
-export function countIngestableMatches(
-	events: readonly DetectedEvent[],
-): number {
-	return ingestableMatches(events).length;
-}
-
 /** Match selector: the match built from the given stored event. */
 export function matchContaining(
 	id: number,
-): (built: BuiltMatch<StoredEvent>) => boolean {
+): (built: BuiltMatch<ScanEvent>) => boolean {
 	return (built) => built.sources.some((e) => e.id === id);
 }
 
@@ -185,7 +136,7 @@ export function matchContaining(
  * state the most recent change is shown.
  */
 export function aggregateSendStatus(
-	sources: readonly StoredEvent[],
+	sources: readonly ScanEvent[],
 ): SendStatus | undefined {
 	const statuses = sources
 		.map((e) => e.send)
@@ -206,7 +157,7 @@ export function aggregateSendStatus(
 }
 
 /** Match selector: matches not yet sent (nor currently sending). */
-export function unsentMatches(built: BuiltMatch<StoredEvent>): boolean {
+export function unsentMatches(built: BuiltMatch<ScanEvent>): boolean {
 	return !built.sources.some(
 		(e) => e.send?.state === "sent" || e.send?.state === "sending",
 	);
@@ -214,7 +165,7 @@ export function unsentMatches(built: BuiltMatch<StoredEvent>): boolean {
 
 /** Match selector: matches stored without a game to link to, whose next retry is due. */
 export function retryableUnlinkedMatches(
-	built: BuiltMatch<StoredEvent>,
+	built: BuiltMatch<ScanEvent>,
 ): boolean {
 	const status = aggregateSendStatus(built.sources);
 	if (status?.state !== "unlinked") return false;
@@ -223,9 +174,17 @@ export function retryableUnlinkedMatches(
 	return delay !== undefined && Date.now() - status.at >= delay;
 }
 
-function ingestableMatches(events: readonly DetectedEvent[]): ScannerMatch[] {
-	return ingestableBuilt(buildScannerMatches(events)).map(
-		(built) => built.match,
+/**
+ * Match selector: a closed match whose send was never attempted. A
+ * match-close send can be skipped (a page reload loses the queue), so the
+ * retry tick flushes these. Sent/unlinked/failed matches follow their own paths.
+ */
+export function unsentClosedMatches(built: BuiltMatch<ScanEvent>): boolean {
+	return (
+		built.sources.some((e) => SCOREBOARD_EVENT_TYPES.includes(e.type)) &&
+		built.sources.every(
+			(e) => e.send === undefined || e.send.state === "queued",
+		)
 	);
 }
 
@@ -258,8 +217,9 @@ async function postIngestMatches(
  * "queued" forever, so once a match boundary has passed them clear the status.
  */
 async function clearOrphanedQueued(
-	events: readonly StoredEvent[],
-	allBuilt: BuiltMatch<StoredEvent>[],
+	events: readonly ScanEvent[],
+	allBuilt: BuiltMatch<ScanEvent>[],
+	store: string,
 ): Promise<void> {
 	const lastBoundaryT = Math.max(
 		...allBuilt.map((built) => built.sources.at(-1)!.t),
@@ -277,7 +237,7 @@ async function clearOrphanedQueued(
 				e.t <= lastBoundaryT,
 		)
 		.map((e) => e.id!);
-	if (orphaned.length > 0) await updateEventsSend(orphaned, undefined);
+	if (orphaned.length > 0) await updateEventsSend(orphaned, undefined, store);
 }
 
 async function errorText(res: Response): Promise<string> {
diff --git a/app/features/scanner/components/session-data.ts b/app/features/scanner/components/session-data.ts
new file mode 100644
index 000000000..d475171ca
--- /dev/null
+++ b/app/features/scanner/components/session-data.ts
@@ -0,0 +1,20 @@
+/**
+ * The event shape every view renders, whichever store it came from: a live
+ * detection (`StoredEvent`) or a VoD's (`StoredVodEvent`) — both carry the
+ * detection, an optional thumbnail/frame and the /ingest send status.
+ */
+import type { DetectedEvent } from "../core/detectors/types";
+import type { SendStatus } from "../store/events";
+
+export interface ScanEvent extends DetectedEvent {
+	id?: number;
+	/** wall-clock ms of detection; live events only */
+	detectedAt?: number;
+	/** small JPEG data URL of the source frame */
+	thumbnail?: string;
+	/** whether a full-res frame can be loaded for the event */
+	hasFrame?: boolean;
+	send?: SendStatus;
+}
+
+export type SessionKind = "live" | "session" | "vod";
diff --git a/app/features/scanner/components/settings.ts b/app/features/scanner/components/settings.ts
new file mode 100644
index 000000000..71bbd5ae3
--- /dev/null
+++ b/app/features/scanner/components/settings.ts
@@ -0,0 +1,84 @@
+/**
+ * The scanner's settings, kept in localStorage: the capture source, whether
+ * results upload to sendou.ink and whether live clips are saved. Read through
+ * a store so the controllers (outside React) and the views see one value.
+ */
+import { useSyncExternalStore } from "react";
+
+const STORAGE_KEY = "scanner:settings";
+
+export interface ScannerSettings {
+	/** `deviceId` of the video input; empty = the browser's default camera */
+	sourceDeviceId: string;
+	/** upload results to sendou.ink as games end (needs a login) */
+	upload: boolean;
+	/** keep the live ring buffer and cut clips of the best moments */
+	saveClips: boolean;
+	/** splats in a row that make a clip */
+	clipMinKills: ClipMinKills;
+}
+
+export const CLIP_MIN_KILLS_OPTIONS = [3, 4, 5] as const;
+export type ClipMinKills = (typeof CLIP_MIN_KILLS_OPTIONS)[number];
+
+const DEFAULT_SETTINGS: ScannerSettings = {
+	sourceDeviceId: "",
+	upload: true,
+	saveClips: true,
+	clipMinKills: 4,
+};
+
+let settings: ScannerSettings | null = null;
+const listeners = new Set<() => void>();
+
+/** The current settings (loaded on first access). */
+export function readSettings(): ScannerSettings {
+	settings ??= load();
+	return settings;
+}
+
+export function updateSettings(patch: Partial<ScannerSettings>): void {
+	settings = { ...readSettings(), ...patch };
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+	} catch {
+		// private mode or a full quota: the in-memory value still applies this visit
+	}
+	for (const listener of listeners) listener();
+}
+
+export function useScannerSettings(): ScannerSettings {
+	return useSyncExternalStore(subscribe, readSettings, () => DEFAULT_SETTINGS);
+}
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+function load(): ScannerSettings {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return DEFAULT_SETTINGS;
+		const parsed = JSON.parse(raw) as Partial<ScannerSettings>;
+		return {
+			sourceDeviceId:
+				typeof parsed.sourceDeviceId === "string"
+					? parsed.sourceDeviceId
+					: DEFAULT_SETTINGS.sourceDeviceId,
+			upload:
+				typeof parsed.upload === "boolean"
+					? parsed.upload
+					: DEFAULT_SETTINGS.upload,
+			saveClips:
+				typeof parsed.saveClips === "boolean"
+					? parsed.saveClips
+					: DEFAULT_SETTINGS.saveClips,
+			clipMinKills:
+				CLIP_MIN_KILLS_OPTIONS.find((n) => n === parsed.clipMinKills) ??
+				DEFAULT_SETTINGS.clipMinKills,
+		};
+	} catch {
+		return DEFAULT_SETTINGS;
+	}
+}
diff --git a/app/features/scanner/components/upload.ts b/app/features/scanner/components/upload.ts
new file mode 100644
index 000000000..f6629f30d
--- /dev/null
+++ b/app/features/scanner/components/upload.ts
@@ -0,0 +1,103 @@
+/**
+ * Uploading to sendou.ink, shared by the live capture, VoD scans and the
+ * views' Retry/Upload buttons: one serialized sender per store, so sends
+ * never overlap (a send requested mid-flight runs right after), and one
+ * place that knows whether uploading is on at all (the setting, and a login).
+ */
+import type { BuiltMatch } from "../core/match-builder";
+import { EVENTS_STORE, VOD_EVENTS_STORE } from "../store/db";
+import { listEvents } from "../store/events";
+import { loadVodEvents } from "../store/vods";
+import { refreshFeed } from "./events-feed";
+import { type SendResult, sendMatches } from "./sendou-ingest";
+import type { ScanEvent } from "./session-data";
+import { readSettings } from "./settings";
+
+export type MatchSelector = (built: BuiltMatch<ScanEvent>) => boolean;
+
+interface Sender {
+	sending: boolean;
+	pending: MatchSelector[];
+}
+
+let user: { id: number } | null = null;
+const senders = new Map<string, Sender>();
+
+/** The root loader's user, mirrored here for the controllers outside React. */
+export function setUploadUser(next: { id: number } | null): void {
+	user = next;
+}
+
+export function isLoggedIn(): boolean {
+	return user !== null;
+}
+
+/** Whether results go to sendou.ink right now: the setting, and a login. */
+export function uploadEnabled(): boolean {
+	return user !== null && readSettings().upload;
+}
+
+/** Sends the live matches `include` selects; the feed refreshes as statuses change. */
+export function sendLive(include: MatchSelector): Promise<SendResult | null> {
+	return send(EVENTS_STORE, listEvents, include, refreshFeed);
+}
+
+/** Sends the VoD's matches `include` selects; `onStatus` runs after each status write. */
+export function sendVod(
+	name: string,
+	include: MatchSelector,
+	onStatus: () => void,
+): Promise<SendResult | null> {
+	return send(
+		`${VOD_EVENTS_STORE}:${name}`,
+		() => loadVodEvents(name),
+		include,
+		onStatus,
+		VOD_EVENTS_STORE,
+	);
+}
+
+async function send(
+	key: string,
+	loadEvents: () => Promise<ScanEvent[]>,
+	include: MatchSelector,
+	onStatus: () => void,
+	store: string = EVENTS_STORE,
+): Promise<SendResult | null> {
+	if (!isLoggedIn()) return null;
+	let sender = senders.get(key);
+	if (!sender) {
+		sender = { sending: false, pending: [] };
+		senders.set(key, sender);
+	}
+	if (sender.sending) {
+		sender.pending.push(include);
+		return null;
+	}
+	sender.sending = true;
+	const result: SendResult = { sentMatches: 0, failedMatches: 0 };
+	try {
+		let next: MatchSelector | undefined = include;
+		while (next) {
+			const events = await loadEvents();
+			const pass = await sendMatches({
+				events,
+				include: next,
+				onStatus,
+				store,
+			});
+			result.sentMatches += pass.sentMatches;
+			result.failedMatches += pass.failedMatches;
+			const pending = sender.pending;
+			sender.pending = [];
+			next =
+				pending.length > 0
+					? (built) => pending.some((fn) => fn(built))
+					: undefined;
+		}
+	} finally {
+		sender.sending = false;
+		onStatus();
+	}
+	return result;
+}
diff --git a/app/features/scanner/components/use-debug.ts b/app/features/scanner/components/use-debug.ts
new file mode 100644
index 000000000..2f315e47a
--- /dev/null
+++ b/app/features/scanner/components/use-debug.ts
@@ -0,0 +1,11 @@
+import { useHasRole } from "~/modules/permissions/hooks";
+import { useSearchParam } from "~/modules/search-params/hooks";
+import { scannerSearchParams } from "../scanner-search-params";
+
+/** The debug tools (fixtures, telemetry, raw detections) show for devs, admins, or anyone with `?debug=true`. */
+export function useDebug(): boolean {
+	const isDev = useHasRole("DEV");
+	const isAdmin = useHasRole("ADMIN");
+	const [debug] = useSearchParam(scannerSearchParams, "debug");
+	return isDev || isAdmin || debug;
+}
diff --git a/app/features/scanner/components/vod-scan.ts b/app/features/scanner/components/vod-scan.ts
new file mode 100644
index 000000000..75a0720ea
--- /dev/null
+++ b/app/features/scanner/components/vod-scan.ts
@@ -0,0 +1,532 @@
+/**
+ * The running VoD scan, owned by a module singleton so moving between views
+ * never throws it away. On the primary (WebCodecs) path the duration is
+ * split into one contiguous slice per analyzer worker and each worker
+ * demuxes, decodes, schedules and analyzes its slice itself
+ * (worker/analyzer.worker.ts); the seek fallback drives a <video> element
+ * through a single worker. The finished scan persists under its file name
+ * (store/vods.ts), then the same path a live session takes runs: clips of
+ * the scored windows are cut off the file, and unsent matches upload. A
+ * scan is all or nothing: leaving the page cancels it and nothing is saved.
+ */
+import { useSyncExternalStore } from "react";
+import * as R from "remeda";
+import { extractVodClip, vodFrameThumbnail } from "../capture/vod-clips";
+import { openSeekScan, probeWebCodecs } from "../capture/vod-frames";
+import { MAX_CLIP_SECONDS, scoreWindows } from "../core/clips/scoring";
+import { DEATH_EVENT_TYPE } from "../core/detectors/death/index";
+import {
+	mergeScanTelemetry,
+	type ScanTelemetry,
+} from "../core/detectors/telemetry";
+import type { DetectedEvent } from "../core/detectors/types";
+import {
+	buildScannerMatches,
+	invalidObjectiveEvents,
+} from "../core/match-builder";
+import { sessionSummary } from "../core/sessions";
+import { TimelineBuilder } from "../core/timeline/index";
+import { deleteVodClips, saveClip } from "../store/clips";
+import {
+	loadVodEventFrame,
+	loadVodEvents,
+	type StoredVodEvent,
+	saveVod,
+} from "../store/vods";
+import {
+	AnalyzerClient,
+	type DoneInfo,
+	defaultScanWorkerCount,
+} from "../worker/client";
+import { refreshClips } from "./clips-feed";
+import { describeError } from "./errors";
+import type { FixtureData } from "./fixture-export";
+import { unsentMatches } from "./sendou-ingest";
+import type { ScanEvent } from "./session-data";
+import { readSettings } from "./settings";
+import { thumbnailFromBlob } from "./thumbnail";
+import { sendVod, uploadEnabled } from "./upload";
+import { refreshVods } from "./vods-feed";
+
+/** seek-fallback stride while the worker reports activity */
+const SEEK_ACTIVE_STRIDE_S = 0.25;
+/**
+ * seek-fallback stride over calm footage — small enough that the screens that
+ * start activity from dead air (results ~10s, match intro ~7s) still get sampled
+ */
+const SEEK_CALM_STRIDE_S = 2.5;
+
+/** A file's clips: the best windows over the whole scan, as many as fit history's cap. */
+const MAX_VOD_CLIPS = 20;
+
+const UI_UPDATE_INTERVAL_MS = 250;
+
+export type VodScanStatus = "idle" | "scanning" | "done" | "error";
+
+export type ClipsWork =
+	| { state: "cutting"; done: number; total: number }
+	| { state: "done"; saved: number; error: string | null };
+
+export interface VodScanProgress {
+	t: number;
+	duration: number;
+	/** scan speed as a multiple of realtime */
+	rate: number;
+}
+
+export interface VodScanSnapshot {
+	name: string | null;
+	status: VodScanStatus;
+	error: string | null;
+	progress: VodScanProgress | null;
+	/** what the scan found, chronological; reloaded from the store once saved */
+	events: ScanEvent[];
+	saveClips: boolean;
+	clipsWork: ClipsWork | null;
+	telemetry: ScanTelemetry | null;
+	/** matches uploading right after the scan */
+	uploading: boolean;
+}
+
+const IDLE: VodScanSnapshot = {
+	name: null,
+	status: "idle",
+	error: null,
+	progress: null,
+	events: [],
+	saveClips: false,
+	clipsWork: null,
+	telemetry: null,
+	uploading: false,
+};
+
+let snapshot = IDLE;
+const listeners = new Set<() => void>();
+let previewCanvas: HTMLCanvasElement | null = null;
+/** lossless PNGs of the frames the detectors analyzed this scan, until saved */
+let frames = new WeakMap<ScanEvent, Blob>();
+let abortRef = { aborted: false };
+let abortChunks: (() => void) | null = null;
+/**
+ * Bumped per scan: a cancelled scan's workers settle asynchronously and
+ * its thumbnail work drains after, so their writes must not land on the
+ * snapshot (or the preview canvas) of the scan that replaced it.
+ */
+let generation = 0;
+
+export function useVodScan(): VodScanSnapshot {
+	return useSyncExternalStore(
+		subscribe,
+		() => snapshot,
+		() => IDLE,
+	);
+}
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+function set(patch: Partial<VodScanSnapshot>): void {
+	snapshot = { ...snapshot, ...patch };
+	for (const listener of listeners) listener();
+}
+
+/** The view showing the scan hands over its canvas for the frame preview. */
+export function setVodPreviewCanvas(canvas: HTMLCanvasElement | null): void {
+	previewCanvas = canvas;
+}
+
+/** The frame an event of this scan was read from: in memory while scanning, the store once saved. */
+export function vodScanFrame(
+	event: ScanEvent,
+): (() => Promise<Blob | undefined>) | undefined {
+	const inMemory = frames.get(event);
+	if (inMemory) return () => Promise.resolve(inMemory);
+	if (event.hasFrame && event.id !== undefined) {
+		const id = event.id;
+		return () => loadVodEventFrame(id);
+	}
+	return undefined;
+}
+
+/** Stops a running scan; nothing of it is saved. */
+export function cancelVodScan(): void {
+	abortRef.aborted = true;
+	abortChunks?.();
+}
+
+/** Re-reads the saved events (send statuses) of the shown scan. */
+async function reloadVodScanEvents(): Promise<void> {
+	if (!snapshot.name || snapshot.status === "scanning") return;
+	set({ events: await loadVodEvents(snapshot.name) });
+}
+
+/** Uploads the shown scan's unsent matches, or the ones `include` selects. */
+export async function uploadVodScan(
+	include: (
+		built: Parameters<typeof unsentMatches>[0],
+	) => boolean = unsentMatches,
+): Promise<void> {
+	if (!snapshot.name) return;
+	set({ uploading: true });
+	try {
+		await sendVod(snapshot.name, include, () => void reloadVodScanEvents());
+	} finally {
+		set({ uploading: false });
+	}
+}
+
+/** Scans `file` as fast as decoding allows; a finished scan replaces any saved one of the same name. */
+export async function startVodScan(
+	file: File,
+	{ saveClips, telemetry }: { saveClips: boolean; telemetry: boolean },
+): Promise<void> {
+	cancelVodScan();
+	const abort = { aborted: false };
+	abortRef = abort;
+	frames = new WeakMap();
+	const own = ++generation;
+	const update = (patch: Partial<VodScanSnapshot>) => {
+		if (own === generation) set(patch);
+	};
+	const preview = (frame: ImageBitmap | VideoFrame) => {
+		if (own === generation) drawPreview(frame);
+	};
+	set({
+		...IDLE,
+		name: file.name,
+		status: "scanning",
+		saveClips,
+	});
+
+	const timeline = new TimelineBuilder();
+	let events: ScanEvent[] = [];
+	let clients: AnalyzerClient[] = [];
+	const thumbnailWork: Promise<void>[] = [];
+	const publish = () => update({ events });
+
+	try {
+		// seek fallback: latest per-frame done info + the waiter for the next one
+		const seek: { doneInfo: DoneInfo | null; frameDone: (() => void) | null } =
+			{ doneInfo: null, frameDone: null };
+		clients = Array.from(
+			{ length: defaultScanWorkerCount() },
+			() =>
+				new AnalyzerClient(
+					(result) => {
+						if (!result.gate.pass) return;
+						for (const event of result.events as DetectedEvent<FixtureData>[]) {
+							const action = timeline.push(event);
+							if (action.action !== "added" && action.action !== "replaced")
+								continue;
+							const frame = result.frame;
+							thumbnailWork.push(
+								(async () => {
+									const thumbnail = frame
+										? await thumbnailFromBlob(frame)
+										: undefined;
+									const replaced =
+										action.action === "replaced"
+											? events.find((e) => sameEvent(e, action.replaced))
+											: undefined;
+									const scanEvent: ScanEvent = {
+										...event,
+										thumbnail,
+										hasFrame: frame !== undefined,
+									};
+									if (frame) frames.set(scanEvent, frame);
+									events = events.filter((e) => e !== replaced);
+									events.push(scanEvent);
+									events.sort((a, b) => a.t - b.t);
+									publish();
+								})().catch(() => {}),
+							);
+						}
+					},
+					(message) => {
+						seek.frameDone?.();
+						seek.frameDone = null;
+						if (!abort.aborted) {
+							update({ error: describeError(new Error(message)) });
+						}
+					},
+					(_t, info: DoneInfo) => {
+						seek.doneInfo = info;
+						seek.frameDone?.();
+						seek.frameDone = null;
+					},
+					{ collectTelemetry: telemetry },
+				),
+		);
+		await Promise.all(clients.map((c) => c.whenReady()));
+		if (abort.aborted) return;
+
+		const started = performance.now();
+
+		const probe = await probeWebCodecs(file);
+		if (abort.aborted) return;
+
+		if (probe) {
+			// each worker demuxes, decodes and analyzes its own slice of
+			// the file; the main thread only aggregates progress
+			const { duration } = probe;
+			const span = duration / clients.length;
+			const chunks = clients.map((scanClient, i) => ({
+				client: scanClient,
+				tStart: i * span,
+				tEnd: i === clients.length - 1 ? duration : (i + 1) * span,
+				t: i * span,
+				done: false,
+				telemetry: null as ScanTelemetry | null,
+			}));
+			abortChunks = () => {
+				for (const client of clients) client.abortChunk();
+			};
+			const mergedTelemetry = () => {
+				const parts = chunks.flatMap((c) => (c.telemetry ? [c.telemetry] : []));
+				return parts.length > 0 ? mergeScanTelemetry(parts) : null;
+			};
+			let lastUiUpdate = Number.NEGATIVE_INFINITY;
+			const pushUiUpdate = () => {
+				const now = performance.now();
+				if (now - lastUiUpdate < UI_UPDATE_INTERVAL_MS) return;
+				lastUiUpdate = now;
+				const covered = R.sumBy(
+					chunks,
+					(c) => Math.min(c.t, c.tEnd) - c.tStart,
+				);
+				const elapsed = (now - started) / 1000;
+				update({
+					progress: {
+						t: covered,
+						duration,
+						rate: elapsed > 0 ? covered / elapsed : 0,
+					},
+					telemetry: mergedTelemetry(),
+				});
+			};
+			await Promise.allSettled(
+				chunks.map((chunk, chunkIndex) =>
+					chunk.client
+						.scanChunk(
+							{ file, chunkIndex, tStart: chunk.tStart, tEnd: chunk.tEnd },
+							(chunkProgress) => {
+								chunk.t = chunkProgress.t;
+								chunk.telemetry = chunkProgress.telemetry;
+								if (chunkProgress.preview) {
+									// show one chunk at a time: the earliest still running
+									if (chunks.find((c) => !c.done) === chunk) {
+										preview(chunkProgress.preview);
+									}
+									chunkProgress.preview.close();
+								}
+								pushUiUpdate();
+							},
+						)
+						.then(
+							(chunkTelemetry) => {
+								chunk.done = true;
+								chunk.t = chunk.tEnd;
+								chunk.telemetry = chunkTelemetry;
+							},
+							(error) => {
+								chunk.done = true;
+								update({ error: describeError(error) });
+							},
+						),
+				),
+			);
+			abortChunks = null;
+			if (abort.aborted) return;
+			update({ telemetry: mergedTelemetry() });
+			await finalize(duration);
+			return;
+		}
+
+		// seek fallback: one worker, one frame in flight; the worker's calm
+		// signal widens the stride over dead air
+		const video = document.createElement("video");
+		video.muted = true;
+		video.playsInline = true;
+		const url = URL.createObjectURL(file);
+		video.src = url;
+		try {
+			const strideRef = { current: SEEK_ACTIVE_STRIDE_S };
+			const vod = await openSeekScan(video, () => strideRef.current);
+			if (abort.aborted) return;
+			const client = clients[0]!;
+			let lastUiUpdate = Number.NEGATIVE_INFINITY;
+			for await (const { frame, t } of vod.frames) {
+				if (abort.aborted) {
+					frame.close();
+					break;
+				}
+				const now = performance.now();
+				if (now - lastUiUpdate >= UI_UPDATE_INTERVAL_MS) {
+					lastUiUpdate = now;
+					// the preview draw must precede analyze — transferring the
+					// frame to the worker detaches it
+					preview(frame);
+					const elapsed = (now - started) / 1000;
+					update({
+						progress: {
+							t,
+							duration: vod.duration,
+							rate: elapsed > 0 ? t / elapsed : 0,
+						},
+						telemetry: seek.doneInfo?.telemetry ?? null,
+					});
+				}
+				await new Promise<void>((resolve) => {
+					seek.frameDone = resolve;
+					if (!client.analyze(frame, t)) resolve();
+				});
+				strideRef.current = seek.doneInfo?.calm
+					? SEEK_CALM_STRIDE_S
+					: SEEK_ACTIVE_STRIDE_S;
+			}
+			if (!abort.aborted) await finalize(vod.duration);
+		} finally {
+			URL.revokeObjectURL(url);
+		}
+	} catch (error) {
+		if (!abort.aborted)
+			update({ status: "error", error: describeError(error) });
+	} finally {
+		for (const client of clients) client.dispose();
+	}
+
+	async function finalize(duration: number): Promise<void> {
+		await Promise.all(thumbnailWork);
+		events = withoutInvalidObjectives(events);
+		update({ events, progress: { t: duration, duration, rate: 0 } });
+		await saveVod(
+			{
+				name: file.name,
+				savedAt: Date.now(),
+				duration,
+				summary: sessionSummary(
+					buildScannerMatches(events).map((built) => built.match),
+				),
+			},
+			events.map((event) => ({
+				type: event.type,
+				t: event.t,
+				confidence: event.confidence,
+				data: event.data,
+				thumbnail: event.thumbnail,
+				frame: frames.get(event),
+				send: event.send,
+			})),
+		);
+		events = (await loadVodEvents(file.name)).map(toScanEvent);
+		update({ events, status: "done" });
+		void refreshVods();
+		if (saveClips) await cutClips(file, events, update);
+		if (uploadEnabled()) await uploadVodScan();
+	}
+}
+
+/** Objective reads that grouped into a known non-SZ match (misreads) are dropped. */
+function withoutInvalidObjectives(events: ScanEvent[]): ScanEvent[] {
+	const invalid = new Set(invalidObjectiveEvents(buildScannerMatches(events)));
+	return invalid.size > 0 ? events.filter((e) => !invalid.has(e)) : events;
+}
+
+/** Clips the file's best scored windows, replacing any earlier clips of the same file. */
+async function cutClips(
+	file: File,
+	events: ScanEvent[],
+	update: (patch: Partial<VodScanSnapshot>) => void,
+): Promise<void> {
+	const windows = buildScannerMatches(events)
+		.flatMap((built) => {
+			const deaths = built.sources
+				.filter((event) => event.type === DEATH_EVENT_TYPE)
+				.map((event) => event.t);
+			return scoreWindows(built.match, deaths, {
+				minKills: readSettings().clipMinKills,
+			}).map((window) => ({
+				window,
+				built,
+			}));
+		})
+		.sort((a, b) => b.window.score - a.window.score)
+		.slice(0, MAX_VOD_CLIPS);
+	await deleteVodClips(file.name).catch(() => {});
+	if (windows.length === 0) {
+		await refreshClips();
+		return;
+	}
+	update({ clipsWork: { state: "cutting", done: 0, total: windows.length } });
+	let saved = 0;
+	try {
+		for (const { window, built } of windows) {
+			const clip = await extractVodClip(file, {
+				start: window.start,
+				end: window.end,
+				maxSeconds: MAX_CLIP_SECONDS,
+			});
+			const thumbnail = (await vodFrameThumbnail(file, window.t)) ?? undefined;
+			await saveClip(
+				{
+					createdAt: Date.now(),
+					bucket: "vod",
+					source: { kind: "vod", name: file.name },
+					start: clip.start,
+					end: clip.end,
+					t: window.t,
+					time: window.time,
+					score: window.score,
+					kills: window.kills,
+					mode: built.match.mode,
+					stage: built.match.stage,
+					hasAudio: clip.hasAudio,
+					thumbnail,
+				},
+				clip.blob,
+			);
+			saved++;
+			update({
+				clipsWork: { state: "cutting", done: saved, total: windows.length },
+			});
+			await refreshClips();
+		}
+		update({ clipsWork: { state: "done", saved, error: null } });
+	} catch (error) {
+		update({
+			clipsWork: { state: "done", saved, error: describeError(error) },
+		});
+	}
+}
+
+function toScanEvent(event: StoredVodEvent): ScanEvent {
+	return {
+		id: event.id,
+		type: event.type,
+		t: event.t,
+		confidence: event.confidence,
+		data: event.data,
+		thumbnail: event.thumbnail,
+		hasFrame: event.hasFrame,
+		send: event.send,
+	};
+}
+
+/** A stored event re-pushed into the timeline is a different object than the scan's copy. */
+function sameEvent(a: ScanEvent, b: DetectedEvent): boolean {
+	return a === b || (a.type === b.type && a.t === b.t && a.data === b.data);
+}
+
+function drawPreview(frame: ImageBitmap | VideoFrame): void {
+	const canvas = previewCanvas;
+	if (!canvas) return;
+	const width = "displayWidth" in frame ? frame.displayWidth : frame.width;
+	const height = "displayHeight" in frame ? frame.displayHeight : frame.height;
+	if (canvas.width !== width || canvas.height !== height) {
+		canvas.width = width;
+		canvas.height = height;
+	}
+	canvas.getContext("2d")!.drawImage(frame, 0, 0);
+}
diff --git a/app/features/scanner/components/vods-feed.ts b/app/features/scanner/components/vods-feed.ts
new file mode 100644
index 000000000..503375d19
--- /dev/null
+++ b/app/features/scanner/components/vods-feed.ts
@@ -0,0 +1,39 @@
+/** The saved VoD list every view reads (landing sessions list, a VoD's header), refreshed after saves and deletes. */
+import { useSyncExternalStore } from "react";
+import { listVods, type VodSummary } from "../store/vods";
+
+const EMPTY: VodSummary[] = [];
+
+let vods: VodSummary[] = EMPTY;
+let loaded = false;
+const listeners = new Set<() => void>();
+let refreshing: Promise<void> | null = null;
+
+export function refreshVods(): Promise<void> {
+	refreshing ??= listVods()
+		.then((next) => {
+			vods = next;
+		})
+		.catch(() => {})
+		.finally(() => {
+			refreshing = null;
+			loaded = true;
+			for (const listener of listeners) listener();
+		});
+	return refreshing;
+}
+
+/** Every saved VoD, newest first; loads on first use. */
+export function useVods(): VodSummary[] {
+	return useSyncExternalStore(subscribe, getVods, () => EMPTY);
+}
+
+function getVods(): VodSummary[] {
+	if (!loaded && !refreshing) void refreshVods();
+	return vods;
+}
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
diff --git a/app/features/scanner/core/clips/scoring.ts b/app/features/scanner/core/clips/scoring.ts
new file mode 100644
index 000000000..af841a03f
--- /dev/null
+++ b/app/features/scanner/core/clips/scoring.ts
@@ -0,0 +1,114 @@
+/**
+ * Clip scoring v1, built to be swapped for richer signals later (overtime, a
+ * knockout-closing kill, death chains as "review" clips). Only the POV
+ * player's own kills feed it: a streak is a run of consecutive kills with no
+ * POV death between them and no pause longer than `STREAK_MAX_GAP_S`, cut
+ * where its clip would outgrow `MAX_CLIP_SECONDS` so every clip fits and its
+ * kill count stays honest. A streak of `MIN_KILLS` or more is a window,
+ * scored by streak length first and density second.
+ */
+import type { ScannerMatch, ScannerMatchKill } from "../scanner-match";
+
+/** the default; the settings popover lets the player pick 3, 4 or 5 */
+const MIN_KILLS = 4;
+export const MAX_CLIP_SECONDS = 60;
+/** footage kept before the first kill: the approach */
+const CLIP_LEAD_S = 5;
+/** footage kept after the last kill: the splat's follow-through */
+const CLIP_TAIL_S = 4;
+/** a longer pause between kills is separate fights, not one streak */
+export const STREAK_MAX_GAP_S = 15;
+
+export interface ClipWindow {
+	/** seconds into the stream/file the clip starts at */
+	start: number;
+	/** seconds into the stream/file the clip ends at */
+	end: number;
+	/** seconds into the stream/file of the window's last kill — the clip's anchor */
+	t: number;
+	/** that kill's match timer reading, when read */
+	time: number | null;
+	kills: number;
+	score: number;
+}
+
+/**
+ * The match's clip-worthy windows, chronological. `deaths` are the POV
+ * player's death times (seconds into the stream/file); a death between two
+ * kills ends the streak. Kill times are whole seconds, so a death on the same
+ * second as a kill (a trade) counts after that kill.
+ */
+export function scoreWindows(
+	match: Pick<ScannerMatch, "kills">,
+	deaths: readonly number[],
+	{ minKills = MIN_KILLS, maxSeconds = MAX_CLIP_SECONDS } = {},
+): ClipWindow[] {
+	const sortedDeaths = deaths.toSorted((a, b) => a - b);
+	const windows: ClipWindow[] = [];
+	let run: ScannerMatchKill[] = [];
+	const flush = () => {
+		if (run.length >= minKills) windows.push(scoreRun(run));
+		run = [];
+	};
+	for (const kill of (match.kills ?? []).toSorted((a, b) => a.t - b.t)) {
+		const last = run.at(-1);
+		if (
+			last &&
+			(kill.t - last.t > STREAK_MAX_GAP_S ||
+				diedBetween(sortedDeaths, last.t, kill.t) ||
+				clipEnd(kill) - clipStart(run[0]!) > maxSeconds)
+		) {
+			flush();
+		}
+		run.push(kill);
+	}
+	flush();
+	return windows;
+}
+
+/** `kills² + kills / span`: the streak decides, density breaks ties. */
+function scoreRun(kills: readonly ScannerMatchKill[]): ClipWindow {
+	const first = kills[0]!;
+	const last = kills.at(-1)!;
+	const span = Math.max(1, last.t - first.t);
+	return {
+		start: clipStart(first),
+		end: clipEnd(last),
+		t: last.t,
+		time: last.time,
+		kills: kills.length,
+		score: kills.length ** 2 + kills.length / span,
+	};
+}
+
+/** Whether a clip covering [start, end] shows the moment `at`. */
+export function clipCovers(
+	clip: { start: number; end: number },
+	at: number,
+): boolean {
+	return at >= clip.start && at <= clip.end;
+}
+
+/**
+ * Whether a live window can no longer grow: no kill can join once the gap
+ * has passed, and by then the tail is in the ring buffer too.
+ */
+export function windowClosed(window: ClipWindow, nowT: number): boolean {
+	return nowT - window.t >= STREAK_MAX_GAP_S;
+}
+
+function clipStart(first: ScannerMatchKill): number {
+	return Math.max(0, first.t - CLIP_LEAD_S);
+}
+
+function clipEnd(last: ScannerMatchKill): number {
+	return last.t + CLIP_TAIL_S;
+}
+
+function diedBetween(
+	sortedDeaths: readonly number[],
+	from: number,
+	until: number,
+): boolean {
+	return sortedDeaths.some((t) => t >= from && t < until);
+}
diff --git a/app/features/scanner/core/csv/csv.ts b/app/features/scanner/core/csv/csv.ts
new file mode 100644
index 000000000..17aa29477
--- /dev/null
+++ b/app/features/scanner/core/csv/csv.ts
@@ -0,0 +1,18 @@
+/** CSV assembly shared by the events and matches exports: RFC 4180 quoting, CRLF rows. */
+
+export type CsvCell = string | number | null | undefined;
+
+export function toCsv(
+	header: readonly string[],
+	rows: readonly (readonly CsvCell[])[],
+): string {
+	const lines = [header.join(",")];
+	for (const row of rows) lines.push(row.map(csvCell).join(","));
+	return `${lines.join("\r\n")}\r\n`;
+}
+
+function csvCell(value: CsvCell): string {
+	if (value === null || value === undefined) return "";
+	const s = String(value);
+	return /[",\n\r]/.test(s) ? `"${s.replaceAll('"', '""')}"` : s;
+}
diff --git a/app/features/scanner/components/events-csv.ts b/app/features/scanner/core/csv/events.ts
similarity index 76%
rename from app/features/scanner/components/events-csv.ts
rename to app/features/scanner/core/csv/events.ts
index 169dc0404..6c1a55adf 100644
--- a/app/features/scanner/components/events-csv.ts
+++ b/app/features/scanner/core/csv/events.ts
@@ -1,56 +1,55 @@
 /**
- * Flattens detected events into one CSV. One row per event; types share
- * columns where they overlap, and a scoreboard's eight player rows (or the
- * minimap's cards, or the objective HUD's icon strip) pack into one cell.
+ * "Raw detections" export: one row per detected event. Types share columns
+ * where they overlap, and a scoreboard's eight player rows (or the minimap's
+ * cards, or the objective HUD's icon strip) pack into one cell. Positions are
+ * reported relative to `originT` (a live session's first event, 0 for a file).
  */
 
 import type { MainWeaponId } from "~/modules/in-game-lists/types";
-import {
-	DEATH_EVENT_TYPE,
-	type DeathData,
-} from "../core/detectors/death/index";
-import { KILL_EVENT_TYPE, type KillData } from "../core/detectors/kill/index";
+import { DEATH_EVENT_TYPE, type DeathData } from "../detectors/death/index";
+import { KILL_EVENT_TYPE, type KillData } from "../detectors/kill/index";
 import {
 	MAP_START_EVENT_TYPE,
 	type MapStartData,
-} from "../core/detectors/map-start/index";
+} from "../detectors/map-start/index";
 import {
 	MINIMAP_EVENT_TYPE,
 	type MinimapData,
-} from "../core/detectors/minimap/index";
+} from "../detectors/minimap/index";
 import {
 	OBJECTIVE_EVENT_TYPE,
 	type ObjectiveData,
-} from "../core/detectors/objective/index";
+} from "../detectors/objective/index";
 import {
 	PLAYER_STATUS_EVENT_TYPE,
 	type PlayerStatusData,
-} from "../core/detectors/objective/player-status";
+} from "../detectors/objective/player-status";
 import {
 	STRIP_WEAPONS_EVENT_TYPE,
 	type StripWeaponsData,
-} from "../core/detectors/objective/strip-weapons";
+} from "../detectors/objective/strip-weapons";
 import {
 	SCOREBOARD_EVENT_TYPE,
 	type ScoreboardData,
-} from "../core/detectors/scoreboard/index";
-import { SCOREBOARD_BATTLE_LOG_EVENT_TYPE } from "../core/detectors/scoreboard-battle-log/index";
+} from "../detectors/scoreboard/index";
+import { SCOREBOARD_BATTLE_LOG_EVENT_TYPE } from "../detectors/scoreboard-battle-log/index";
 import {
 	SCOREBOARD_BATTLE_LOG_REPLAY_EVENT_TYPE,
 	type ScoreboardBattleLogReplayData,
-} from "../core/detectors/scoreboard-battle-log-replay/index";
+} from "../detectors/scoreboard-battle-log-replay/index";
 import {
 	SCOREBOARD_OWN_EVENT_TYPE,
 	type ScoreboardOwnData,
-} from "../core/detectors/scoreboard-own/index";
-import { formatClock, formatTime } from "./format";
+} from "../detectors/scoreboard-own/index";
+import { formatClock, formatTime } from "../format";
 import {
 	lobbyLabel,
 	mainWeaponLabel,
 	modeLabel,
 	stageLabel,
 	weaponLabel,
-} from "./labels";
+} from "../labels";
+import { type CsvCell, toCsv } from "./csv";
 
 export interface CsvEvent {
 	type: string;
@@ -82,12 +81,11 @@ const HEADER = [
 	"replay_timestamp",
 ];
 
-type Cell = string | number | null | undefined;
-
-function csvCell(value: Cell): string {
-	if (value === null || value === undefined) return "";
-	const s = String(value);
-	return /[",\n\r]/.test(s) ? `"${s.replaceAll('"', '""')}"` : s;
+export function eventsToCsv(events: readonly CsvEvent[], originT = 0): string {
+	return toCsv(
+		HEADER,
+		events.map((event) => eventCells(event, originT)),
+	);
 }
 
 /** [head, clothes, shoes] rows of [main, sub, sub, sub] ability ids */
@@ -147,11 +145,12 @@ function formatPlayers(data: ScoreboardData): string {
 		.join("; ");
 }
 
-function eventCells(event: CsvEvent): Cell[] {
-	const base: Cell[] = [
+function eventCells(event: CsvEvent, originT: number): CsvCell[] {
+	const t = event.t - originT;
+	const base: CsvCell[] = [
 		event.type,
-		formatTime(event.t),
-		Math.round(event.t * 1000) / 1000,
+		formatTime(t),
+		Math.round(t * 1000) / 1000,
 		event.detectedAt === undefined
 			? ""
 			: new Date(event.detectedAt).toISOString(),
@@ -261,11 +260,11 @@ function eventCells(event: CsvEvent): Cell[] {
 			const self = d.teammates.find((p) => p.self);
 			return [
 				...base,
-				"", // lobby
-				"", // mode (not readable from the minimap)
-				stageLabel(d.stage), // stage (planner-signature match)
-				"", // winner_score
-				"", // loser_score
+				"",
+				"",
+				stageLabel(d.stage),
+				"",
+				"",
 				self?.name,
 				self ? mainWeaponLabel(self.weaponId) : "",
 				"",
@@ -339,20 +338,3 @@ function eventCells(event: CsvEvent): Cell[] {
 			return [...base, ...Array(HEADER.length - base.length).fill("")];
 	}
 }
-
-export function eventsToCsv(events: CsvEvent[]): string {
-	const lines = [HEADER.join(",")];
-	for (const event of events)
-		lines.push(eventCells(event).map(csvCell).join(","));
-	return `${lines.join("\r\n")}\r\n`;
-}
-
-export function downloadEventsCsv(filename: string, events: CsvEvent[]): void {
-	const blob = new Blob([eventsToCsv(events)], { type: "text/csv" });
-	const url = URL.createObjectURL(blob);
-	const a = document.createElement("a");
-	a.href = url;
-	a.download = filename;
-	a.click();
-	URL.revokeObjectURL(url);
-}
diff --git a/app/features/scanner/core/csv/matches.ts b/app/features/scanner/core/csv/matches.ts
new file mode 100644
index 000000000..e345e9cc1
--- /dev/null
+++ b/app/features/scanner/core/csv/matches.ts
@@ -0,0 +1,107 @@
+/**
+ * "Matches" export: one row per game, the same rows the match cards render,
+ * for the player's own spreadsheet (win rate by mode, K/D over time, what the
+ * enemies ran). Unread values are blank — what a spreadsheet reads as "no
+ * data"; `?` stays inside packed cells only. Column names are English keys.
+ */
+import { formatTime } from "../format";
+import { lobbyLabel, mainWeaponLabel, modeLabel, stageLabel } from "../labels";
+import type { ScannerMatch, ScannerMatchPlayer } from "../scanner-match";
+import { matchResult } from "../sessions";
+import { type CsvCell, toCsv } from "./csv";
+
+const HEADER = [
+	"played_at",
+	"source",
+	"at",
+	"t_seconds",
+	"lobby",
+	"mode",
+	"stage",
+	"result",
+	"score_for",
+	"score_against",
+	"weapon",
+	"ka",
+	"d",
+	"s",
+	"paint",
+	"teammates",
+	"enemies",
+	"cast",
+	"replay_code",
+	"clips",
+];
+
+export interface MatchCsvSource {
+	/** the session's start ("2026-09-16 19:02") or the VoD file name */
+	label: string;
+	/** stream/file second the positions count from */
+	originT: number;
+}
+
+/** `clipCounts` aligns by index with `matches`: how many clips each game produced. */
+export function matchesToCsv(
+	matches: readonly ScannerMatch[],
+	source: MatchCsvSource,
+	clipCounts: readonly number[] = [],
+): string {
+	return toCsv(
+		HEADER,
+		matches.map((match, index) =>
+			matchCells(match, source, clipCounts[index] ?? 0),
+		),
+	);
+}
+
+function matchCells(
+	match: ScannerMatch,
+	source: MatchCsvSource,
+	clips: number,
+): CsvCell[] {
+	const at = match.startsAt === null ? null : match.startsAt - source.originT;
+	const povTeam = match.pov?.team ?? 0;
+	const pov = match.pov
+		? match.teams[match.pov.team].players[match.pov.index]
+		: undefined;
+	const result = matchResult(match);
+	const scoreFor = match.matchScores?.[povTeam] ?? null;
+	const scoreAgainst = match.matchScores?.[povTeam === 0 ? 1 : 0] ?? null;
+	const teammates = match.teams[povTeam].players.filter(
+		(player) => player !== pov,
+	);
+	const enemies = match.teams[povTeam === 0 ? 1 : 0].players;
+
+	return [
+		match.playedAt === null ? "" : new Date(match.playedAt).toISOString(),
+		source.label,
+		at === null ? "" : formatTime(at),
+		at === null ? "" : Math.max(0, Math.round(at)),
+		lobbyLabel(match.lobby),
+		modeLabel(match.mode),
+		stageLabel(match.stage),
+		result === null ? "" : result === "win" ? "WIN" : "LOSS",
+		scoreFor,
+		scoreAgainst,
+		pov ? mainWeaponLabel(pov.weaponId) : "",
+		pov?.ka,
+		pov?.d,
+		pov?.s,
+		pov?.paint,
+		packPlayers(teammates),
+		packPlayers(enemies),
+		match.cast ? 1 : "",
+		match.replayCode,
+		clips,
+	];
+}
+
+/** `name · weapon · ka/d/s · paint`, `;` separated — the events CSV's convention. */
+function packPlayers(players: readonly ScannerMatchPlayer[]): string {
+	return players
+		.map(
+			(p) =>
+				`${p.name ?? "?"} · ${mainWeaponLabel(p.weaponId) ?? "?"} · ${p.ka ?? "?"}/${p.d ?? "?"}/${p.s ?? "?"} · ${p.paint ?? "?"}p`,
+		)
+		.join("; ");
+}
diff --git a/app/features/scanner/core/format.ts b/app/features/scanner/core/format.ts
new file mode 100644
index 000000000..3b7bee693
--- /dev/null
+++ b/app/features/scanner/core/format.ts
@@ -0,0 +1,26 @@
+/** hh:mm:ss for positions in a session or file, CSV cells and scan progress. */
+export function formatTime(t: number): string {
+	const total = Math.max(0, Math.floor(t));
+	const h = Math.floor(total / 3600);
+	const m = Math.floor((total % 3600) / 60);
+	const s = total % 60;
+	return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+/** h:mm:ss with no leading zero hour, and m:ss under an hour ("1:02:10", "3:05"). */
+export function formatPosition(t: number): string {
+	const total = Math.max(0, Math.floor(t));
+	const h = Math.floor(total / 3600);
+	const m = Math.floor((total % 3600) / 60);
+	const s = total % 60;
+	return h > 0
+		? `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
+		: `${m}:${String(s).padStart(2, "0")}`;
+}
+
+/** the match timer's M:SS (215 → "3:35") */
+export function formatClock(seconds: number): string {
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	return `${m}:${String(s).padStart(2, "0")}`;
+}
diff --git a/app/features/scanner/components/labels.ts b/app/features/scanner/core/labels.ts
similarity index 100%
rename from app/features/scanner/components/labels.ts
rename to app/features/scanner/core/labels.ts
diff --git a/app/features/scanner/core/match-builder.ts b/app/features/scanner/core/match-builder.ts
index 9bf5dcf7a..9b7410df4 100644
--- a/app/features/scanner/core/match-builder.ts
+++ b/app/features/scanner/core/match-builder.ts
@@ -51,6 +51,10 @@ import {
 	SCOREBOARD_BATTLE_LOG_REPLAY_EVENT_TYPE,
 	type ScoreboardBattleLogReplayData,
 } from "./detectors/scoreboard-battle-log-replay/index";
+import {
+	SCOREBOARD_OWN_EVENT_TYPE,
+	type ScoreboardOwnData,
+} from "./detectors/scoreboard-own/index";
 import type { DetectedEvent } from "./detectors/types";
 import { hueDistance, hueOf, type InkRgb } from "./ink-color";
 import { parseReplayTimestamp } from "./replay-time";
@@ -135,6 +139,12 @@ const KILL_ROW_LIFETIME_SECONDS = 8;
 /** Name similarity (1 - edits / length) at which two stack reads show the same row. */
 const KILL_SAME_ROW_MIN_SIMILARITY = 0.7;
 
+/**
+ * The personal results screen follows the results screen of the same game;
+ * one seen this long after a closed match's scoreboard belongs to that match.
+ */
+const OWN_RESULTS_WINDOW_SECONDS = 90;
+
 export interface BuiltMatch<E extends DetectedEvent> {
 	match: ScannerMatch;
 	/** input events the match was built from, chronological — the send-status unit for callers */
@@ -142,9 +152,10 @@ export interface BuiltMatch<E extends DetectedEvent> {
 }
 
 /**
- * Splits a timeline into ScannerMatch objects, chronological. Event types that
- * identify no match (ScoreboardOwn) are ignored. Every input event ends up in
- * at most one match's `sources`.
+ * Splits a timeline into ScannerMatch objects, chronological. A personal
+ * results screen identifies no match of its own but completes the POV
+ * player's build on the match whose results screen it follows. Every input
+ * event ends up in at most one match's `sources`.
  */
 export function buildScannerMatches<E extends DetectedEvent>(
 	events: readonly E[],
@@ -237,6 +248,8 @@ export function buildScannerMatches<E extends DetectedEvent>(
 			(open?.stripWeapons ?? orphanStripWeapons).push(event);
 		} else if (event.type === KILL_EVENT_TYPE) {
 			(open?.kills ?? orphanKills).push(event);
+		} else if (event.type === SCOREBOARD_OWN_EVENT_TYPE) {
+			attachOwnResults(built.at(-1), event);
 		}
 	}
 	finalize();
@@ -244,6 +257,25 @@ export function buildScannerMatches<E extends DetectedEvent>(
 	return built;
 }
 
+/**
+ * The personal results screen shows the POV player's full gear (mains and
+ * subs), which no other screen reads whole: it completes that player's build
+ * on the match whose scoreboard it follows.
+ */
+function attachOwnResults<E extends DetectedEvent>(
+	last: BuiltMatch<E> | undefined,
+	event: E,
+): void {
+	if (!last?.match.pov || last.match.endsAt === null) return;
+	if (event.t - last.match.endsAt > OWN_RESULTS_WINDOW_SECONDS) return;
+	const data = event.data as ScoreboardOwnData;
+	const player =
+		last.match.teams[last.match.pov.team].players[last.match.pov.index];
+	if (!player || data.abilities.length === 0) return;
+	player.abilities = data.abilities;
+	last.sources.push(event);
+}
+
 /** Why a built match is held back from /ingest; absent = it is sent. */
 export type IngestSkipReason =
 	/** not a tournament (Private Battle) game */
diff --git a/app/features/scanner/core/sessions.ts b/app/features/scanner/core/sessions.ts
new file mode 100644
index 000000000..40f7edd17
--- /dev/null
+++ b/app/features/scanner/core/sessions.ts
@@ -0,0 +1,103 @@
+/**
+ * Sessions are client-only and derived at render: live detections ordered by
+ * wall-clock time, split wherever two consecutive detections lie ≥ 2 h apart.
+ * A session is keyed by its first event's `detectedAt` (stable across reloads,
+ * usable in a URL). Retention evicts whole sessions on the same split.
+ */
+import type { ScannerMatch } from "./scanner-match";
+
+export const SESSION_GAP_MS = 2 * 60 * 60 * 1000;
+export const SESSION_MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000;
+export const MAX_SESSIONS = 20;
+
+interface Stamped {
+	/** wall-clock ms of detection */
+	detectedAt: number;
+}
+
+/** Chronological sessions, oldest first; each holds its events oldest first. */
+export function splitSessions<E extends Stamped>(events: readonly E[]): E[][] {
+	const sessions: E[][] = [];
+	for (const event of events.toSorted((a, b) => a.detectedAt - b.detectedAt)) {
+		const current = sessions.at(-1);
+		const last = current?.at(-1);
+		if (
+			current &&
+			last &&
+			event.detectedAt - last.detectedAt < SESSION_GAP_MS
+		) {
+			current.push(event);
+		} else {
+			sessions.push([event]);
+		}
+	}
+	return sessions;
+}
+
+/** A session's key: its first event's detection time. */
+export function sessionKey(session: readonly Stamped[]): number {
+	return session[0]!.detectedAt;
+}
+
+export interface SessionSummary {
+	/** matches whose winner was read */
+	games: number;
+	wins: number;
+	losses: number;
+	/** the POV rows' kills+assists and deaths summed; null when no row was read */
+	ka: number | null;
+	d: number | null;
+}
+
+/** "win" / "loss" from the POV seat, null when either the seat or the winner is unread. */
+export function matchResult(match: ScannerMatch): "win" | "loss" | null {
+	if (match.winner === null || match.pov === null) return null;
+	return match.winner === match.pov.team ? "win" : "loss";
+}
+
+/** The header line's numbers: games decided, W–L and K/D off the POV rows. */
+export function sessionSummary(
+	matches: readonly ScannerMatch[],
+): SessionSummary {
+	let ka: number | null = null;
+	let d: number | null = null;
+	const summary: SessionSummary = { games: 0, wins: 0, losses: 0, ka, d };
+	for (const match of matches) {
+		if (match.winner !== null) summary.games++;
+		const result = matchResult(match);
+		if (result === "win") summary.wins++;
+		if (result === "loss") summary.losses++;
+		const pov = match.pov
+			? match.teams[match.pov.team].players[match.pov.index]
+			: undefined;
+		if (pov?.ka !== null && pov?.ka !== undefined) ka = (ka ?? 0) + pov.ka;
+		if (pov?.d !== null && pov?.d !== undefined) d = (d ?? 0) + pov.d;
+	}
+	return { ...summary, ka, d };
+}
+
+/** K/D as players say it, null before any POV row was read. */
+export function kdRatio(summary: SessionSummary): number | null {
+	if (summary.ka === null) return null;
+	return summary.ka / Math.max(1, summary.d ?? 0);
+}
+
+/**
+ * Ids of the events retention evicts: every event of a session older than
+ * `SESSION_MAX_AGE_MS` or beyond the newest `MAX_SESSIONS`. A session's age is
+ * its last event's.
+ */
+export function expiredSessionEventIds<E extends Stamped & { id: number }>(
+	events: readonly E[],
+	now: number,
+): number[] {
+	const sessions = splitSessions(events);
+	const kept = sessions.slice(-MAX_SESSIONS);
+	return sessions
+		.filter(
+			(session) =>
+				!kept.includes(session) ||
+				now - session.at(-1)!.detectedAt > SESSION_MAX_AGE_MS,
+		)
+		.flatMap((session) => session.map((event) => event.id));
+}
diff --git a/app/features/scanner/routes/scanner.tsx b/app/features/scanner/routes/scanner.tsx
index e4c899400..67e47fbed 100644
--- a/app/features/scanner/routes/scanner.tsx
+++ b/app/features/scanner/routes/scanner.tsx
@@ -2,10 +2,7 @@ import { lazy } from "react";
 import type { MetaFunction } from "react-router";
 import { Main } from "~/components/Main";
 import { Placeholder } from "~/components/Placeholder";
-import { Redirect } from "~/components/Redirect";
-import { Config } from "~/config";
 import { useHydrated } from "~/hooks/useHydrated";
-import { useHasRole } from "~/modules/permissions/hooks";
 import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 
@@ -19,7 +16,7 @@ export const meta: MetaFunction = (args) => {
 	return metaTags({
 		title: "Scanner",
 		description:
-			"Detect Splatoon 3 match events (scoreboards, deaths, map screens) from live OBS footage, VoDs, and screenshots",
+			"Keep it running while you play: reads your Splatoon 3 games off a capture card or a VoD, uploads the results to sendou.ink and clips your best moments",
 		location: args.location,
 	});
 };
@@ -35,13 +32,6 @@ const ScannerApp = lazy(() =>
 
 export default function ScannerPage() {
 	const isHydrated = useHydrated();
-	const isAdmin = useHasRole("ADMIN");
-	const isDev = useHasRole("DEV");
-	const isScannerTester = useHasRole("SCANNER_TESTER");
-
-	if (!Config.scannerEnabled && !isAdmin && !isDev && !isScannerTester) {
-		return <Redirect to="/" />;
-	}
 
 	return <Main bigger>{isHydrated ? <ScannerApp /> : <Placeholder />}</Main>;
 }
diff --git a/app/features/scanner/scanner-search-params.test.ts b/app/features/scanner/scanner-search-params.test.ts
index 52021e90f..c2bbc42a5 100644
--- a/app/features/scanner/scanner-search-params.test.ts
+++ b/app/features/scanner/scanner-search-params.test.ts
@@ -8,14 +8,21 @@ import { scannerSearchParams } from "./scanner-search-params";
 describe("scannerSearchParams", () => {
 	test("round-trips", () => {
 		assertRoundTrips(scannerSearchParams, {
-			tab: ["live", "screenshot", "vod", "fixtures"],
+			view: ["home", "live", "session", "vod", "clips", "debug", "fixtures"],
+			id: [1758040920000, 0, null],
+			name: ["sws26-finals.mkv", "a b.mp4", null],
 			q: ["", "gauge-overlay", "player-status/cast,ready-trough"],
 			inspect: ["1723456789012-abc123", null],
 			telemetry: [true, false],
+			debug: [true, false],
 		});
 	});
 
 	test("malformed values decode to defaults", () => {
-		assertDecodesToDefault(scannerSearchParams, "tab", [["garbage"], ["LIVE"]]);
+		assertDecodesToDefault(scannerSearchParams, "view", [
+			["garbage"],
+			["LIVE"],
+		]);
+		assertDecodesToDefault(scannerSearchParams, "id", [["-5"], ["1.5"]]);
 	});
 });
diff --git a/app/features/scanner/scanner-search-params.ts b/app/features/scanner/scanner-search-params.ts
index f36c6310e..703736047 100644
--- a/app/features/scanner/scanner-search-params.ts
+++ b/app/features/scanner/scanner-search-params.ts
@@ -2,21 +2,38 @@ import * as v from "valibot";
 import * as SearchParams from "~/modules/search-params/search-params";
 import { SP } from "~/modules/search-params/search-params";
 
-export const SCANNER_TABS = ["live", "screenshot", "vod", "fixtures"] as const;
-
-export type ScannerTab = (typeof SCANNER_TABS)[number];
+/** `home` is the landing; the rest are the views reached from it. */
+const SCANNER_VIEWS = [
+	"home",
+	"live",
+	"session",
+	"vod",
+	"clips",
+	"debug",
+	"fixtures",
+] as const;
 
 export const scannerSearchParams = SearchParams.define({
-	tab: SP.param(v.picklist(SCANNER_TABS), { default: "live", loader: false }),
-	/** Fixtures tab filter: comma-separated substrings, any match keeps a case */
+	view: SP.param(v.picklist(SCANNER_VIEWS), { default: "home", loader: false }),
+	/** `view=session`: the session's key — its first detection's wall-clock ms */
+	id: SP.param(v.nullable(v.pipe(v.number(), v.integer(), v.minValue(0))), {
+		loader: false,
+	}),
+	/** `view=vod`: the scanned file's name */
+	name: SP.param(v.nullable(v.pipe(v.string(), v.maxLength(300))), {
+		loader: false,
+	}),
+	/** Fixtures view filter: comma-separated substrings, any match keeps a case */
 	q: SP.param(v.pipe(v.string(), v.maxLength(200)), {
 		default: "",
 		loader: false,
 	}),
-	/** Inspect handoff key: the screenshot tab claims this frame on load */
+	/** Inspect handoff key: the debug view claims this frame on load */
 	inspect: SP.param(v.nullable(v.pipe(v.string(), v.maxLength(100))), {
 		loader: false,
 	}),
 	/** Opt-in scan telemetry: accumulated and shown only when set by hand in the URL (no link points at it) */
 	telemetry: SP.param(v.boolean(), { default: false, loader: false }),
+	/** Opens the debug tools for anyone (devs and admins have them regardless) */
+	debug: SP.param(v.boolean(), { default: false, loader: false }),
 });
diff --git a/app/features/scanner/store/clips.browser.test.ts b/app/features/scanner/store/clips.browser.test.ts
new file mode 100644
index 000000000..2f3d9ab40
--- /dev/null
+++ b/app/features/scanner/store/clips.browser.test.ts
@@ -0,0 +1,102 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import {
+	type ClipToSave,
+	deleteClip,
+	deleteVodClips,
+	listClips,
+	MAX_HISTORY_CLIPS,
+	rollSessionClipsIntoHistory,
+	saveClip,
+} from "./clips";
+
+function clip(overrides: Partial<ClipToSave> = {}): ClipToSave {
+	return {
+		createdAt: 1_000,
+		bucket: "session",
+		source: { kind: "live", sessionKey: 1_000 },
+		start: 90,
+		end: 120,
+		t: 116,
+		time: 184,
+		score: 16,
+		kills: 4,
+		mode: "SZ",
+		stage: 0,
+		hasAudio: true,
+		...overrides,
+	};
+}
+
+const BLOB = new Blob(["mp4"], { type: "video/mp4" });
+
+async function clearAll() {
+	for (const stored of await listClips()) await deleteClip(stored.id);
+}
+
+describe("rollSessionClipsIntoHistory()", () => {
+	beforeEach(clearAll);
+
+	test("moves the session's clips into history", async () => {
+		await saveClip(clip(), BLOB);
+		await saveClip(clip({ score: 25, kills: 5 }), BLOB);
+
+		expect(await rollSessionClipsIntoHistory()).toBe(0);
+
+		const stored = await listClips();
+		expect(stored.map((c) => c.bucket)).toEqual(["history", "history"]);
+		expect(stored.map((c) => c.score)).toEqual([25, 16]);
+	});
+
+	test("evicts the lowest-scoring clips beyond the cap, session clips competing equally", async () => {
+		for (let i = 0; i < MAX_HISTORY_CLIPS; i++) {
+			await saveClip(clip({ bucket: "history", score: 100 + i }), BLOB);
+		}
+		await saveClip(clip({ score: 50 }), BLOB);
+		await saveClip(clip({ score: 500 }), BLOB);
+
+		expect(await rollSessionClipsIntoHistory()).toBe(2);
+
+		const stored = await listClips();
+		expect(stored).toHaveLength(MAX_HISTORY_CLIPS);
+		expect(stored[0]!.score).toBe(500);
+		expect(stored.some((c) => c.score === 50)).toBe(false);
+		expect(stored.some((c) => c.score === 100)).toBe(false);
+	});
+
+	test("leaves a file's clips out of history", async () => {
+		await saveClip(
+			clip({ bucket: "vod", source: { kind: "vod", name: "a.mkv" } }),
+			BLOB,
+		);
+
+		await rollSessionClipsIntoHistory();
+
+		expect((await listClips()).map((c) => c.bucket)).toEqual(["vod"]);
+	});
+});
+
+describe("deleteVodClips()", () => {
+	beforeEach(clearAll);
+
+	test("drops one file's clips, or every file's", async () => {
+		await saveClip(
+			clip({ bucket: "vod", source: { kind: "vod", name: "a.mkv" } }),
+			BLOB,
+		);
+		await saveClip(
+			clip({ bucket: "vod", source: { kind: "vod", name: "b.mkv" } }),
+			BLOB,
+		);
+		await saveClip(clip({ bucket: "history" }), BLOB);
+
+		await deleteVodClips("a.mkv");
+		expect(
+			(await listClips())
+				.map((c) => c.bucket)
+				.toSorted((a, b) => a.localeCompare(b)),
+		).toEqual(["history", "vod"]);
+
+		await deleteVodClips();
+		expect((await listClips()).map((c) => c.bucket)).toEqual(["history"]);
+	});
+});
diff --git a/app/features/scanner/store/clips.ts b/app/features/scanner/store/clips.ts
new file mode 100644
index 000000000..291f8e9ed
--- /dev/null
+++ b/app/features/scanner/store/clips.ts
@@ -0,0 +1,154 @@
+/**
+ * Clip persistence: records in `clips` (listing never touches video), MP4s
+ * in `clip-blobs` under the record id. Three buckets: `session` holds the
+ * running live session's clips (nothing evicted while you play), `history`
+ * keeps the `MAX_HISTORY_CLIPS` best across sessions (lowest score replaced
+ * when full — download to keep), and `vod` holds a scanned file's clips for
+ * this visit only (purged on the next page load; the file is on disk).
+ */
+import type { ModeShort, StageId } from "~/modules/in-game-lists/types";
+import { CLIP_BLOBS_STORE, CLIPS_STORE, readwrite, tx } from "./db";
+
+export const MAX_HISTORY_CLIPS = 20;
+
+export type ClipBucket = "session" | "history" | "vod";
+
+export type ClipSource =
+	| { kind: "live"; sessionKey: number }
+	| { kind: "vod"; name: string };
+
+export interface ScannerClip {
+	id: number;
+	createdAt: number;
+	bucket: ClipBucket;
+	source: ClipSource;
+	/** seconds into the stream/file the clip really starts at */
+	start: number;
+	/** seconds into the stream/file the clip really ends at */
+	end: number;
+	/** seconds into the stream/file of the window's last kill — the clip's anchor */
+	t: number;
+	/** that kill's match timer reading, when read */
+	time: number | null;
+	score: number;
+	kills: number;
+	mode: ModeShort | null;
+	stage: StageId | null;
+	hasAudio: boolean;
+	/** small JPEG data URL */
+	thumbnail?: string;
+}
+
+export type ClipToSave = Omit<ScannerClip, "id">;
+
+export async function saveClip(
+	clip: ClipToSave,
+	blob: Blob,
+): Promise<ScannerClip> {
+	let saved: ScannerClip | null = null;
+	await readwrite([CLIPS_STORE, CLIP_BLOBS_STORE], (transaction) => {
+		const add = transaction
+			.objectStore(CLIPS_STORE)
+			.add(clip) as IDBRequest<number>;
+		add.onsuccess = () => {
+			saved = { ...clip, id: add.result };
+			transaction.objectStore(CLIP_BLOBS_STORE).put(blob, add.result);
+		};
+	});
+	return saved!;
+}
+
+/** Every clip, best first (score, then newest). */
+export async function listClips(): Promise<ScannerClip[]> {
+	const clips = await tx(
+		CLIPS_STORE,
+		"readonly",
+		(store) => store.getAll() as IDBRequest<ScannerClip[]>,
+	);
+	return clips.sort(byScore);
+}
+
+/** Sort order of every clip list: best first, newest breaks ties. */
+function byScore(a: ScannerClip, b: ScannerClip): number {
+	return b.score - a.score || b.createdAt - a.createdAt;
+}
+
+/** The clip's MP4, or undefined when it was deleted meanwhile. */
+export function loadClipBlob(id: number): Promise<Blob | undefined> {
+	return tx(
+		CLIP_BLOBS_STORE,
+		"readonly",
+		(store) => store.get(id) as IDBRequest<Blob | undefined>,
+	);
+}
+
+export function deleteClip(id: number): Promise<void> {
+	return readwrite([CLIPS_STORE, CLIP_BLOBS_STORE], (transaction) => {
+		transaction.objectStore(CLIPS_STORE).delete(id);
+		transaction.objectStore(CLIP_BLOBS_STORE).delete(id);
+	});
+}
+
+/**
+ * Session end: the session bucket rolls into history, where the cap applies —
+ * the lowest-scoring clips beyond `MAX_HISTORY_CLIPS` are evicted, session
+ * clips competing on equal terms. Resolves to the number evicted.
+ */
+export async function rollSessionClipsIntoHistory(): Promise<number> {
+	let evicted = 0;
+	await readwrite([CLIPS_STORE, CLIP_BLOBS_STORE], (transaction) => {
+		const clips = transaction.objectStore(CLIPS_STORE);
+		const blobs = transaction.objectStore(CLIP_BLOBS_STORE);
+		const getAll = clips.getAll() as IDBRequest<ScannerClip[]>;
+		getAll.onsuccess = () => {
+			const history = getAll.result
+				.filter((clip) => clip.bucket !== "vod")
+				.map((clip) => ({ ...clip, bucket: "history" as const }))
+				.sort(byScore);
+			for (const [index, clip] of history.entries()) {
+				if (index < MAX_HISTORY_CLIPS) {
+					clips.put(clip);
+				} else {
+					clips.delete(clip.id);
+					blobs.delete(clip.id);
+					evicted++;
+				}
+			}
+		};
+	});
+	return evicted;
+}
+
+/** Drops every VoD clip (a new visit starts without them) or one file's. */
+export function deleteVodClips(name?: string): Promise<void> {
+	return readwrite([CLIPS_STORE, CLIP_BLOBS_STORE], (transaction) => {
+		const clips = transaction.objectStore(CLIPS_STORE);
+		const blobs = transaction.objectStore(CLIP_BLOBS_STORE);
+		const req = clips.index("bucket").openCursor(IDBKeyRange.only("vod"));
+		req.onsuccess = () => {
+			const cursor = req.result;
+			if (!cursor) return;
+			const clip = cursor.value as ScannerClip;
+			if (
+				name === undefined ||
+				(clip.source.kind === "vod" && clip.source.name === name)
+			) {
+				blobs.delete(cursor.primaryKey);
+				cursor.delete();
+			}
+			cursor.continue();
+		};
+	});
+}
+
+/** Bytes the origin uses, per the browser's estimate; null where unsupported. */
+export async function storageUsage(): Promise<number | null> {
+	if (!navigator.storage?.estimate) return null;
+	const estimate = await navigator.storage.estimate();
+	return estimate.usage ?? null;
+}
+
+/** Asks the browser to keep this origin's storage out of best-effort eviction. */
+export function requestPersistentStorage(): void {
+	void navigator.storage?.persist?.().catch(() => {});
+}
diff --git a/app/features/scanner/store/db.ts b/app/features/scanner/store/db.ts
index 930122d69..cd8782757 100644
--- a/app/features/scanner/store/db.ts
+++ b/app/features/scanner/store/db.ts
@@ -1,52 +1,83 @@
 /**
  * Shared IndexedDB handle. Stores:
- *  - `events`: live-tab detections, keyed by auto id (events.ts)
+ *  - `events`: live detections, keyed by auto id (events.ts)
  *  - `frames`: their full-res analyzed PNGs by event id, kept apart so listing the feed never deserializes them
- *  - `vods`: one summary per fully scanned VoD, keyed by file name
+ *  - `vods`: one summary per scanned VoD, keyed by file name (vods.ts)
  *  - `vod-events`: each saved VoD's detections, indexed by VoD name
  *  - `vod-frames`: their PNGs, keyed by vod-event id
- *  - `inspect-frames`: one-shot Inspect handoffs into a new screenshot tab (inspect.ts)
+ *  - `clips`: clip records by auto id, indexed by bucket (clips.ts)
+ *  - `clip-blobs`: the clips' MP4s, keyed by clip id
+ *  - `inspect-frames`: one-shot Inspect handoffs into a new debug tab (inspect.ts)
  */
 const DB_NAME = "scanner";
-const DB_VERSION = 1;
+const DB_VERSION = 2;
 
 export const EVENTS_STORE = "events";
 export const FRAMES_STORE = "frames";
 export const VODS_STORE = "vods";
 export const VOD_EVENTS_STORE = "vod-events";
 export const VOD_FRAMES_STORE = "vod-frames";
+export const CLIPS_STORE = "clips";
+export const CLIP_BLOBS_STORE = "clip-blobs";
 export const INSPECT_FRAMES_STORE = "inspect-frames";
 
-/** Recreates the schema from scratch, so a DB_VERSION bump is a clean slate that wipes scanner data. */
-function createStores(database: IDBDatabase): void {
-	for (const name of Array.from(database.objectStoreNames)) {
-		database.deleteObjectStore(name);
+/**
+ * Adds the stores a DB_VERSION bump introduced, keeping the existing ones and
+ * their data. v2 added the clip stores and moved live event times onto the
+ * wall clock, so a v1 database's live events (stamped on the page clock)
+ * are dropped. Changing an existing store's shape needs a real migration here.
+ */
+function upgrade(database: IDBDatabase, oldVersion: number): void {
+	const has = (name: string) => database.objectStoreNames.contains(name);
+
+	if (oldVersion < 2 && has(EVENTS_STORE)) {
+		database.deleteObjectStore(EVENTS_STORE);
+		database.deleteObjectStore(FRAMES_STORE);
 	}
 
-	const events = database.createObjectStore(EVENTS_STORE, {
-		keyPath: "id",
-		autoIncrement: true,
-	});
-	events.createIndex("t", "t");
-	events.createIndex("detectedAt", "detectedAt");
+	if (!has(EVENTS_STORE)) {
+		const events = database.createObjectStore(EVENTS_STORE, {
+			keyPath: "id",
+			autoIncrement: true,
+		});
+		events.createIndex("t", "t");
+		events.createIndex("detectedAt", "detectedAt");
+	}
 
-	database.createObjectStore(VODS_STORE, { keyPath: "name" });
+	if (!has(VODS_STORE)) {
+		database.createObjectStore(VODS_STORE, { keyPath: "name" });
+	}
 
-	const vodEvents = database.createObjectStore(VOD_EVENTS_STORE, {
-		keyPath: "id",
-		autoIncrement: true,
-	});
-	vodEvents.createIndex("vod", "vod");
+	if (!has(VOD_EVENTS_STORE)) {
+		const vodEvents = database.createObjectStore(VOD_EVENTS_STORE, {
+			keyPath: "id",
+			autoIncrement: true,
+		});
+		vodEvents.createIndex("vod", "vod");
+	}
 
-	database.createObjectStore(FRAMES_STORE);
-	database.createObjectStore(VOD_FRAMES_STORE);
-	database.createObjectStore(INSPECT_FRAMES_STORE);
+	if (!has(CLIPS_STORE)) {
+		const clips = database.createObjectStore(CLIPS_STORE, {
+			keyPath: "id",
+			autoIncrement: true,
+		});
+		clips.createIndex("bucket", "bucket");
+	}
+
+	for (const name of [
+		FRAMES_STORE,
+		VOD_FRAMES_STORE,
+		CLIP_BLOBS_STORE,
+		INSPECT_FRAMES_STORE,
+	]) {
+		if (!has(name)) database.createObjectStore(name);
+	}
 }
 
 function openDb(): Promise<IDBDatabase> {
 	return new Promise((resolve, reject) => {
 		const req = indexedDB.open(DB_NAME, DB_VERSION);
-		req.onupgradeneeded = () => createStores(req.result);
+		req.onupgradeneeded = (event) => upgrade(req.result, event.oldVersion);
 		req.onblocked = () => {
 			// biome-ignore lint/suspicious/noConsole: the only diagnostic channel for a hang caused by other tabs
 			console.warn(
@@ -59,16 +90,23 @@ function openDb(): Promise<IDBDatabase> {
 }
 
 let dbPromise: Promise<IDBDatabase> | null = null;
-export function db(): Promise<IDBDatabase> {
-	dbPromise ??= openDb().then((database) => {
-		// when another tab needs to upgrade, release the connection instead of
-		// blocking that tab forever; the next call here reconnects fresh
-		database.onversionchange = () => {
-			database.close();
+function db(): Promise<IDBDatabase> {
+	dbPromise ??= openDb().then(
+		(database) => {
+			// when another tab needs to upgrade, release the connection instead of
+			// blocking that tab forever; the next call here reconnects fresh
+			database.onversionchange = () => {
+				database.close();
+				dbPromise = null;
+			};
+			return database;
+		},
+		(error) => {
+			// a failed open (private mode, quota) must not be cached forever
 			dbPromise = null;
-		};
-		return database;
-	});
+			throw error;
+		},
+	);
 	return dbPromise;
 }
 
@@ -86,3 +124,18 @@ export async function tx<T>(
 		req.onerror = () => reject(req.error);
 	});
 }
+
+/** Runs `run` inside one readwrite transaction over `storeNames`, resolving on commit. */
+export async function readwrite(
+	storeNames: string[],
+	run: (transaction: IDBTransaction) => void,
+): Promise<void> {
+	const database = await db();
+	return new Promise<void>((resolve, reject) => {
+		const transaction = database.transaction(storeNames, "readwrite");
+		run(transaction);
+		transaction.oncomplete = () => resolve();
+		transaction.onerror = () => reject(transaction.error);
+		transaction.onabort = () => reject(transaction.error);
+	});
+}
diff --git a/app/features/scanner/store/events.ts b/app/features/scanner/store/events.ts
index 3d7ede9ca..155f41599 100644
--- a/app/features/scanner/store/events.ts
+++ b/app/features/scanner/store/events.ts
@@ -1,14 +1,17 @@
 /**
- * IndexedDB event store: one `events` store keyed by auto id, indexed by
- * timestamp, with a small thumbnail per event; the full-res analyzed PNG lives
- * in the separate `frames` store under the same id (loadEventFrame) so listing
- * the feed never deserializes megabytes of blobs. Saving past MAX_EVENTS
- * evicts the oldest events and their frames; past MAX_FRAMES the oldest
- * frames alone (the events stay, marked frameless).
+ * IndexedDB store of live detections: one `events` store keyed by auto id,
+ * indexed by timestamp, with a small thumbnail per event; the full-res
+ * analyzed PNG lives in the separate `frames` store under the same id
+ * (loadEventFrame) so listing the feed never deserializes megabytes of
+ * blobs. Retention runs on save (throttled): whole sessions past
+ * `core/sessions.ts`'s age/count limits go, frames go after `FRAME_MAX_AGE_MS`
+ * or past `MAX_FRAMES` (the events stay, marked frameless), and `MAX_EVENTS`
+ * remains a hard floor.
  */
 import type { IngestedMatchLink } from "~/features/scanner-ingest/scanner-ingest-schemas";
 import type { DetectedEvent } from "../core/detectors/types";
-import { db, EVENTS_STORE, FRAMES_STORE, tx } from "./db";
+import { expiredSessionEventIds } from "../core/sessions";
+import { EVENTS_STORE, FRAMES_STORE, readwrite, tx } from "./db";
 
 /**
  * Counter/status reads land ~2.2 events a second of match time, so the cap must
@@ -17,8 +20,15 @@ import { db, EVENTS_STORE, FRAMES_STORE, tx } from "./db";
  */
 const MAX_EVENTS = 10_000;
 
-/** Full-res frame PNGs (~1-2MB each) evicted past this count; only "Save fixture" loses them. */
+/**
+ * Full-res frame PNGs (~1-2MB each) are what makes a misread reportable, so
+ * they are kept for everyone — bounded by age and count, whichever bites first.
+ */
 const MAX_FRAMES = 200;
+const FRAME_MAX_AGE_MS = 72 * 60 * 60 * 1000;
+
+/** The retention pass walks every key; once a minute is plenty for limits measured in days. */
+const RETENTION_INTERVAL_MS = 60_000;
 
 /** Where an event stands with sendou.ink /ingest; absent = never attempted. */
 export interface SendStatus {
@@ -37,6 +47,7 @@ export interface SendStatus {
 export interface StoredEvent {
 	id?: number;
 	type: string;
+	/** seconds — wall-clock seconds for live captures, seconds into the file for VoDs */
 	t: number;
 	/** wall-clock time of detection */
 	detectedAt: number;
@@ -49,6 +60,8 @@ export interface StoredEvent {
 	send?: SendStatus;
 }
 
+let lastRetentionAt = 0;
+
 /**
  * Persists a detection; resolves to its store id. `reuseId` overwrites that row
  * (and its frame) so an event a better read replaces keeps a stable id.
@@ -69,52 +82,110 @@ export async function saveEvent(
 		thumbnail,
 		hasFrame: frame !== undefined,
 	};
-	const database = await db();
-	return new Promise<number>((resolve, reject) => {
-		const transaction = database.transaction(
-			[EVENTS_STORE, FRAMES_STORE],
-			"readwrite",
-		);
+	let id = 0;
+	await readwrite([EVENTS_STORE, FRAMES_STORE], (transaction) => {
 		const events = transaction.objectStore(EVENTS_STORE);
 		const frames = transaction.objectStore(FRAMES_STORE);
-		let id: number;
 		const add = events.put(record) as IDBRequest<number>;
 		add.onsuccess = () => {
 			id = add.result;
 			if (frame) frames.put(frame, id);
 			else if (reuseId !== undefined) frames.delete(id);
-			evictOldest(events, frames);
+			evictBeyondCap(events, frames);
+			const now = Date.now();
+			if (now - lastRetentionAt >= RETENTION_INTERVAL_MS) {
+				lastRetentionAt = now;
+				retain(events, frames, now);
+			}
 		};
-		transaction.oncomplete = () => resolve(id);
-		transaction.onerror = () => reject(transaction.error);
 	});
+	return id;
+}
+
+/** Runs the retention pass now (page load, capture start/stop). */
+export function trimEvents(): Promise<void> {
+	lastRetentionAt = Date.now();
+	return readwrite([EVENTS_STORE, FRAMES_STORE], (transaction) =>
+		retain(
+			transaction.objectStore(EVENTS_STORE),
+			transaction.objectStore(FRAMES_STORE),
+			Date.now(),
+		),
+	);
 }
 
 /** Delete records (and frames) beyond MAX_EVENTS, oldest ids first. */
-function evictOldest(events: IDBObjectStore, frames: IDBObjectStore): void {
+function evictBeyondCap(events: IDBObjectStore, frames: IDBObjectStore): void {
 	const count = events.count();
 	count.onsuccess = () => {
 		let excess = count.result - MAX_EVENTS;
 		if (excess <= 0) return;
-		const cursor = events.openCursor(); // ascending id = oldest first
+		const cursor = events.openKeyCursor(); // ascending id = oldest first
 		cursor.onsuccess = () => {
 			const c = cursor.result;
 			if (!c || excess <= 0) return;
 			frames.delete(c.primaryKey);
-			c.delete();
+			events.delete(c.primaryKey);
 			excess--;
 			if (excess > 0) c.continue();
 		};
 	};
-	const frameCount = frames.count();
-	frameCount.onsuccess = () => {
-		let excess = frameCount.result - MAX_FRAMES;
-		if (excess <= 0) return;
-		const cursor = frames.openKeyCursor(); // ascending id = oldest first
-		cursor.onsuccess = () => {
-			const c = cursor.result;
-			if (!c || excess <= 0) return;
-			const id = c.primaryKey;
+}
+
+/**
+ * Session and frame retention over key cursors only (no record is
+ * deserialized): the `detectedAt` index yields every event's id and time,
+ * which splits the sessions and dates each frame.
+ */
+function retain(
+	events: IDBObjectStore,
+	frames: IDBObjectStore,
+	now: number,
+): void {
+	const stamps: { id: number; detectedAt: number }[] = [];
+	const cursor = events.index("detectedAt").openKeyCursor();
+	cursor.onsuccess = () => {
+		const c = cursor.result;
+		if (c) {
+			stamps.push({ id: c.primaryKey as number, detectedAt: c.key as number });
+			c.continue();
+			return;
+		}
+		const expired = new Set(expiredSessionEventIds(stamps, now));
+		for (const id of expired) {
+			events.delete(id);
+			frames.delete(id);
+		}
+		const detectedAtById = new Map(
+			stamps
+				.filter((stamp) => !expired.has(stamp.id))
+				.map((stamp) => [stamp.id, stamp.detectedAt] as const),
+		);
+		retainFrames(events, frames, detectedAtById, now);
+	};
+}
+
+function retainFrames(
+	events: IDBObjectStore,
+	frames: IDBObjectStore,
+	detectedAtById: Map<number, number>,
+	now: number,
+): void {
+	const ids: number[] = [];
+	const cursor = frames.openKeyCursor(); // ascending id = oldest first
+	cursor.onsuccess = () => {
+		const c = cursor.result;
+		if (c) {
+			ids.push(c.primaryKey as number);
+			c.continue();
+			return;
+		}
+		const excess = Math.max(0, ids.length - MAX_FRAMES);
+		for (const [index, id] of ids.entries()) {
+			const detectedAt = detectedAtById.get(id);
+			const stale =
+				detectedAt === undefined || now - detectedAt > FRAME_MAX_AGE_MS;
+			if (!stale && index >= excess) continue;
 			frames.delete(id);
 			const get = events.get(id) as IDBRequest<StoredEvent | undefined>;
 			get.onsuccess = () => {
@@ -123,21 +194,18 @@ function evictOldest(events: IDBObjectStore, frames: IDBObjectStore): void {
 				record.hasFrame = false;
 				events.put(record);
 			};
-			excess--;
-			if (excess > 0) c.continue();
-		};
+		}
 	};
 }
 
-/** Sets (or clears) the send status of the given events in one transaction. */
+/** Sets (or clears) the send status of the given events in one transaction; `storeName` picks the live or VoD store. */
 export async function updateEventsSend(
 	ids: number[],
 	send: SendStatus | undefined,
+	storeName: string = EVENTS_STORE,
 ): Promise<void> {
-	const database = await db();
-	return new Promise<void>((resolve, reject) => {
-		const transaction = database.transaction(EVENTS_STORE, "readwrite");
-		const events = transaction.objectStore(EVENTS_STORE);
+	await readwrite([storeName], (transaction) => {
+		const events = transaction.objectStore(storeName);
 		for (const id of ids) {
 			const get = events.get(id) as IDBRequest<StoredEvent | undefined>;
 			get.onsuccess = () => {
@@ -148,27 +216,18 @@ export async function updateEventsSend(
 				events.put(record);
 			};
 		}
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
 	});
 }
 
 /** Deletes the given events and their frames in one transaction. */
 export async function deleteEvents(ids: number[]): Promise<void> {
-	const database = await db();
-	return new Promise<void>((resolve, reject) => {
-		const transaction = database.transaction(
-			[EVENTS_STORE, FRAMES_STORE],
-			"readwrite",
-		);
+	await readwrite([EVENTS_STORE, FRAMES_STORE], (transaction) => {
 		const events = transaction.objectStore(EVENTS_STORE);
 		const frames = transaction.objectStore(FRAMES_STORE);
 		for (const id of ids) {
 			events.delete(id);
 			frames.delete(id);
 		}
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
 	});
 }
 
@@ -188,17 +247,3 @@ export function loadEventFrame(id: number): Promise<Blob | undefined> {
 		(store) => store.get(id) as IDBRequest<Blob | undefined>,
 	);
 }
-
-export async function clearEvents(): Promise<void> {
-	const database = await db();
-	return new Promise<void>((resolve, reject) => {
-		const transaction = database.transaction(
-			[EVENTS_STORE, FRAMES_STORE],
-			"readwrite",
-		);
-		transaction.objectStore(EVENTS_STORE).clear();
-		transaction.objectStore(FRAMES_STORE).clear();
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
-	});
-}
diff --git a/app/features/scanner/store/vods.browser.test.ts b/app/features/scanner/store/vods.browser.test.ts
deleted file mode 100644
index 7e36625b2..000000000
--- a/app/features/scanner/store/vods.browser.test.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { beforeEach, describe, expect, test } from "vitest";
-import { deleteVod, listVods, saveVod, saveVodResultsSend } from "./vods";
-
-const VOD_NAME = "results-send.mkv";
-
-async function saveTestVod() {
-	await saveVod({ name: VOD_NAME, savedAt: 1_000, duration: 60 }, [
-		{ type: "scoreboard", t: 10, confidence: 0.9, data: {} },
-	]);
-}
-
-async function storedVod() {
-	return (await listVods()).find((vod) => vod.name === VOD_NAME);
-}
-
-describe("saveVodResultsSend()", () => {
-	beforeEach(async () => {
-		await deleteVod(VOD_NAME);
-	});
-
-	test("a saved scan has no send outcome", async () => {
-		await saveTestVod();
-
-		expect((await storedVod())?.resultsSend).toBeUndefined();
-	});
-
-	test("remembers the send outcome of a scan", async () => {
-		await saveTestVod();
-		await saveVodResultsSend(VOD_NAME, {
-			sent: 2,
-			total: 3,
-			error: null,
-			at: 5_000,
-		});
-
-		expect((await storedVod())?.resultsSend).toEqual({
-			sent: 2,
-			total: 3,
-			error: null,
-			at: 5_000,
-		});
-	});
-
-	test("re-scanning the file forgets the send outcome", async () => {
-		await saveTestVod();
-		await saveVodResultsSend(VOD_NAME, {
-			sent: 3,
-			total: 3,
-			error: null,
-			at: 5_000,
-		});
-		await saveTestVod();
-
-		expect((await storedVod())?.resultsSend).toBeUndefined();
-	});
-});
diff --git a/app/features/scanner/store/vods.ts b/app/features/scanner/store/vods.ts
index 40bc11fbd..8bbaf2bed 100644
--- a/app/features/scanner/store/vods.ts
+++ b/app/features/scanner/store/vods.ts
@@ -1,35 +1,32 @@
 /**
- * Persistence for completed VoD scans, keyed by file name so a video can be
- * reinspected without re-decoding. The summary lives in `vods`, detections in
- * `vod-events` under a `vod` index, full-res PNGs in `vod-frames` under the
- * event id (loadVodEventFrame), so listing stays cheap. Re-scanning the same
- * file name overwrites the previous save.
+ * Persistence for scanned VoDs, keyed by file name so a video can be reopened
+ * without re-decoding. The summary lives in `vods`, detections in
+ * `vod-events` under a `vod` index (each carrying its own /ingest send status,
+ * like a live event), full-res PNGs in `vod-frames` under the event id
+ * (loadVodEventFrame), so listing stays cheap. Re-scanning the same file name
+ * overwrites the previous save.
  */
-import type { IngestedMatchLink } from "~/features/scanner-ingest/scanner-ingest-schemas";
-import { db, tx, VOD_EVENTS_STORE, VOD_FRAMES_STORE, VODS_STORE } from "./db";
 
-/** How a VoD's last "Send results" went; absent = never attempted. */
-export interface VodResultsSend {
-	/** matches sendou.ink /ingest accepted */
-	sent: number;
-	total: number;
-	/** failure detail, null when the send went through */
-	error: string | null;
-	/** wall-clock time the send finished */
-	at: number;
-	/** links /ingest reported, keyed by index into the scan's ingestable matches */
-	links?: Array<{ matchIndex: number; link: IngestedMatchLink }>;
-}
+import type { SessionSummary } from "../core/sessions";
+import {
+	readwrite,
+	tx,
+	VOD_EVENTS_STORE,
+	VOD_FRAMES_STORE,
+	VODS_STORE,
+} from "./db";
+import type { SendStatus } from "./events";
 
 export interface VodSummary {
 	/** VoD file name — primary key */
 	name: string;
-	/** wall-clock time the scan finished */
+	/** wall-clock time the scan (or its last resumption) finished */
 	savedAt: number;
 	/** video duration in seconds */
 	duration: number;
 	eventCount: number;
-	resultsSend?: VodResultsSend;
+	/** the header numbers, computed at save time so listing needs no events */
+	summary: SessionSummary;
 }
 
 export interface StoredVodEvent {
@@ -44,6 +41,7 @@ export interface StoredVodEvent {
 	thumbnail?: string;
 	/** whether a full-res frame exists in `vod-frames` under this id */
 	hasFrame?: boolean;
+	send?: SendStatus;
 }
 
 /** A vod-event to persist, with its (separately stored) frame attached. */
@@ -51,6 +49,8 @@ export type VodEventToSave = Omit<StoredVodEvent, "id" | "vod" | "hasFrame"> & {
 	frame?: Blob;
 };
 
+const VOD_STORES = [VODS_STORE, VOD_EVENTS_STORE, VOD_FRAMES_STORE];
+
 /** Delete every vod-event (and frame) of `name` via the index, then run `next`. */
 function clearVodEvents(
 	events: IDBObjectStore,
@@ -71,16 +71,11 @@ function clearVodEvents(
 	};
 }
 
-export async function saveVod(
+export function saveVod(
 	meta: Omit<VodSummary, "eventCount">,
 	events: VodEventToSave[],
 ): Promise<void> {
-	const database = await db();
-	return new Promise((resolve, reject) => {
-		const transaction = database.transaction(
-			[VODS_STORE, VOD_EVENTS_STORE, VOD_FRAMES_STORE],
-			"readwrite",
-		);
+	return readwrite(VOD_STORES, (transaction) => {
 		const eventStore = transaction.objectStore(VOD_EVENTS_STORE);
 		const frameStore = transaction.objectStore(VOD_FRAMES_STORE);
 		clearVodEvents(eventStore, frameStore, meta.name, () => {
@@ -96,31 +91,6 @@ export async function saveVod(
 				.objectStore(VODS_STORE)
 				.put({ ...meta, eventCount: events.length });
 		});
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
-	});
-}
-
-/**
- * Records how a VoD's "Send results" went, so reopening the scan reports what
- * was sent. Re-scanning starts over: `saveVod` writes a summary without one.
- */
-export async function saveVodResultsSend(
-	name: string,
-	resultsSend: VodResultsSend,
-): Promise<void> {
-	const database = await db();
-	return new Promise((resolve, reject) => {
-		const transaction = database.transaction(VODS_STORE, "readwrite");
-		const vods = transaction.objectStore(VODS_STORE);
-		const get = vods.get(name) as IDBRequest<VodSummary | undefined>;
-		get.onsuccess = () => {
-			const summary = get.result;
-			if (!summary) return; // deleted meanwhile
-			vods.put({ ...summary, resultsSend });
-		};
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
 	});
 }
 
@@ -133,6 +103,14 @@ export async function listVods(): Promise<VodSummary[]> {
 	return vods.sort((a, b) => b.savedAt - a.savedAt);
 }
 
+export function loadVod(name: string): Promise<VodSummary | undefined> {
+	return tx(
+		VODS_STORE,
+		"readonly",
+		(store) => store.get(name) as IDBRequest<VodSummary | undefined>,
+	);
+}
+
 export async function loadVodEvents(name: string): Promise<StoredVodEvent[]> {
 	const events = await tx(
 		VOD_EVENTS_STORE,
@@ -154,13 +132,8 @@ export function loadVodEventFrame(id: number): Promise<Blob | undefined> {
 	);
 }
 
-export async function deleteVod(name: string): Promise<void> {
-	const database = await db();
-	return new Promise((resolve, reject) => {
-		const transaction = database.transaction(
-			[VODS_STORE, VOD_EVENTS_STORE, VOD_FRAMES_STORE],
-			"readwrite",
-		);
+export function deleteVod(name: string): Promise<void> {
+	return readwrite(VOD_STORES, (transaction) => {
 		transaction.objectStore(VODS_STORE).delete(name);
 		clearVodEvents(
 			transaction.objectStore(VOD_EVENTS_STORE),
@@ -168,7 +141,5 @@ export async function deleteVod(name: string): Promise<void> {
 			name,
 			() => {},
 		);
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
 	});
 }
diff --git a/app/features/scanner/tests/logic/clip-scoring.test.ts b/app/features/scanner/tests/logic/clip-scoring.test.ts
new file mode 100644
index 000000000..5be724dd9
--- /dev/null
+++ b/app/features/scanner/tests/logic/clip-scoring.test.ts
@@ -0,0 +1,116 @@
+/**
+ * Tests for the clip windows: which kills group into a streak, what ends
+ * one, the clip length cap and the score that ranks them.
+ */
+
+import assert from "node:assert/strict";
+import {
+	clipCovers,
+	scoreWindows,
+	windowClosed,
+} from "../../core/clips/scoring";
+import type { ScannerMatchKill } from "../../core/scanner-match";
+import { test } from "../node-test-compat";
+
+function kill(t: number, time: number | null = null): ScannerMatchKill {
+	return { t, time, name: null };
+}
+
+const kills = (...ts: number[]) => ({ kills: ts.map((t) => kill(t)) });
+
+const windowOf = (start: number, end: number, count: number, t: number) => ({
+	start,
+	end,
+	kills: count,
+	t,
+});
+
+/** the timing fields alone; time and score have their own tests */
+function stripped(windows: ReturnType<typeof scoreWindows>) {
+	return windows.map(({ start, end, kills: count, t }) => ({
+		start,
+		end,
+		kills: count,
+		t,
+	}));
+}
+
+test("no window below the kill threshold", () => {
+	assert.deepEqual(scoreWindows(kills(100, 105, 110), []), []);
+	assert.deepEqual(
+		stripped(scoreWindows(kills(100, 105, 110), [], { minKills: 3 })),
+		[windowOf(95, 114, 3, 110)],
+	);
+});
+
+test("a run of close kills is one window with lead and tail", () => {
+	assert.deepEqual(stripped(scoreWindows(kills(100, 110, 125, 130), [])), [
+		windowOf(95, 134, 4, 130),
+	]);
+});
+
+test("the clip start clamps to the stream start", () => {
+	assert.deepEqual(stripped(scoreWindows(kills(2, 4, 6, 8), [])), [
+		windowOf(0, 12, 4, 8),
+	]);
+});
+
+test("a long pause splits the streak", () => {
+	assert.deepEqual(
+		stripped(scoreWindows(kills(100, 105, 110, 115, 140, 145, 150, 155), [])),
+		[windowOf(95, 119, 4, 115), windowOf(135, 159, 4, 155)],
+	);
+});
+
+test("a death between two kills ends the streak", () => {
+	assert.deepEqual(scoreWindows(kills(100, 105, 110, 115), [107.5]), []);
+	assert.deepEqual(
+		stripped(scoreWindows(kills(100, 105, 110, 115, 120), [116])),
+		[windowOf(95, 119, 4, 115)],
+	);
+});
+
+test("a death on a kill's second (a trade) counts after that kill", () => {
+	assert.deepEqual(stripped(scoreWindows(kills(100, 105, 110, 115), [115])), [
+		windowOf(95, 119, 4, 115),
+	]);
+});
+
+test("a streak is cut where its clip would outgrow the cap", () => {
+	assert.deepEqual(
+		stripped(
+			scoreWindows(kills(100, 115, 130, 145, 160, 175, 190, 205, 220), [], {
+				maxSeconds: 60,
+			}),
+		),
+		[windowOf(95, 149, 4, 145), windowOf(155, 209, 4, 205)],
+	);
+});
+
+test("the score ranks the longer streak first, the tighter one second", () => {
+	const [loose] = scoreWindows(kills(100, 110, 120, 130), []);
+	const [tight] = scoreWindows(kills(100, 102, 104, 106), []);
+	const [longer] = scoreWindows(kills(100, 110, 120, 130, 140), []);
+	assert.ok(tight!.score > loose!.score);
+	assert.ok(longer!.score > tight!.score);
+});
+
+test("the window carries its last kill's timer reading", () => {
+	const [window] = scoreWindows(
+		{ kills: [kill(100, 200), kill(103, 197), kill(106, 194), kill(109, 191)] },
+		[],
+	);
+	assert.equal(window!.time, 191);
+});
+
+test("a window closes once the streak gap has passed its last kill", () => {
+	const [window] = scoreWindows(kills(100, 105, 110, 115), []);
+	assert.equal(windowClosed(window!, 129), false);
+	assert.equal(windowClosed(window!, 130), true);
+});
+
+test("clipCovers is inclusive of both ends", () => {
+	assert.equal(clipCovers({ start: 95, end: 119 }, 95), true);
+	assert.equal(clipCovers({ start: 95, end: 119 }, 119), true);
+	assert.equal(clipCovers({ start: 95, end: 119 }, 120), false);
+});
diff --git a/app/features/scanner/tests/logic/match-builder.test.ts b/app/features/scanner/tests/logic/match-builder.test.ts
index 13e79b420..175e92e16 100644
--- a/app/features/scanner/tests/logic/match-builder.test.ts
+++ b/app/features/scanner/tests/logic/match-builder.test.ts
@@ -18,6 +18,7 @@ import type { StripWeaponsData } from "../../core/detectors/objective/strip-weap
 import type { ScoreboardData } from "../../core/detectors/scoreboard/index";
 import type { ScoreboardBattleLogData } from "../../core/detectors/scoreboard-battle-log/index";
 import type { ScoreboardBattleLogReplayData } from "../../core/detectors/scoreboard-battle-log-replay/index";
+import type { ScoreboardOwnData } from "../../core/detectors/scoreboard-own/index";
 import type { DetectedEvent } from "../../core/detectors/types";
 import {
 	buildScannerMatches,
@@ -478,6 +479,43 @@ test("a stray full-count blip is voided against the surrounding countdown", () =
 	);
 });
 
+const OWN_BUILD: AbilityWithUnknown[][] = [
+	["SCU", "ISM", "ISM", "ISS"],
+	["QR", "RSU", "RSU", "QSJ"],
+	["SJ", "SSU", "SSU", "IRU"],
+];
+
+function ownResults(t: number): DetectedEvent {
+	const data: ScoreboardOwnData = {
+		lobby: "PRIVATE",
+		mode: "SZ",
+		stage: 0,
+		weaponId: 40,
+		abilities: OWN_BUILD,
+	};
+	return { type: "ScoreboardOwn", t, confidence: 0.9, data };
+}
+
+test("the personal results screen completes the POV player's build", () => {
+	const [built] = buildScannerMatches([
+		mapStart(0),
+		scoreboard(300, { povIndex: 5 }),
+		ownResults(320),
+	]);
+	assert.deepEqual(built!.match.teams[1].players[1]!.abilities, OWN_BUILD);
+	assert.equal(built!.sources.length, 3);
+});
+
+test("a personal results screen long after the scoreboard is left alone", () => {
+	const [built] = buildScannerMatches([
+		mapStart(0),
+		scoreboard(300),
+		ownResults(600),
+	]);
+	assert.equal(built!.match.teams[0].players[0]!.abilities, undefined);
+	assert.equal(built!.sources.length, 2);
+});
+
 test("enriches players with abilities from the match's deaths", () => {
 	const build: AbilityWithUnknown[][] = [
 		["ISM", "ISS", "ISS", "ISS"],
diff --git a/app/features/scanner/tests/logic/matches-csv.test.ts b/app/features/scanner/tests/logic/matches-csv.test.ts
new file mode 100644
index 000000000..fcabcfd9e
--- /dev/null
+++ b/app/features/scanner/tests/logic/matches-csv.test.ts
@@ -0,0 +1,115 @@
+/** Tests for the Matches export: one row per game, POV-first scores, packed rosters, blanks for unread values. */
+
+import assert from "node:assert/strict";
+import { matchesToCsv } from "../../core/csv/matches";
+import type { ScannerMatch } from "../../core/scanner-match";
+import { test } from "../node-test-compat";
+
+const BASE: ScannerMatch = {
+	startsAt: 3730,
+	endsAt: 4000,
+	playedAt: Date.UTC(2026, 8, 16, 17, 2),
+	lobby: "PRIVATE",
+	mode: "TC",
+	stage: 3,
+	matchScores: [62, 100],
+	replayCode: "RXYZ-1234-ABCD-5678",
+	cast: false,
+	objective: null,
+	playerStatus: null,
+	kills: null,
+	teams: [
+		{
+			players: [
+				{ name: "Kirby", weaponId: 1000, paint: 980, ka: 6, d: 5, s: 2 },
+			],
+		},
+		{
+			players: [
+				{ name: "You", weaponId: 40, paint: 1204, ka: 9, d: 4, s: 3 },
+				{ name: "Zed", weaponId: 30, paint: 1310, ka: 6, d: 2, s: 4 },
+			],
+		},
+	],
+	winner: 1,
+	pov: { team: 1, index: 0 },
+};
+
+function rows(csv: string): string[][] {
+	return csv
+		.trim()
+		.split("\r\n")
+		.map((line) => line.split(","));
+}
+
+test("one row per game with the POV side first", () => {
+	const [header, row] = rows(
+		matchesToCsv([BASE], { label: "sws26-finals.mkv", originT: 0 }, [2]),
+	);
+	assert.equal(header![0], "played_at");
+	const cell = (name: string) => row![header!.indexOf(name)];
+	assert.equal(cell("source"), "sws26-finals.mkv");
+	assert.equal(cell("at"), "01:02:10");
+	assert.equal(cell("t_seconds"), "3730");
+	assert.equal(cell("lobby"), "Private Battle");
+	assert.equal(cell("mode"), "Tower Control");
+	assert.equal(cell("result"), "WIN");
+	assert.equal(cell("score_for"), "100");
+	assert.equal(cell("score_against"), "62");
+	assert.equal(cell("weapon"), "Splattershot");
+	assert.equal(cell("ka"), "9");
+	assert.equal(cell("d"), "4");
+	assert.equal(cell("s"), "3");
+	assert.equal(cell("paint"), "1204");
+	assert.equal(cell("clips"), "2");
+	assert.equal(cell("cast"), "");
+});
+
+test("positions count from the session's origin", () => {
+	const [header, row] = rows(
+		matchesToCsv([BASE], { label: "2026-09-16 19:02", originT: 3700 }),
+	);
+	assert.equal(row![header!.indexOf("at")], "00:00:30");
+	assert.equal(row![header!.indexOf("t_seconds")], "30");
+});
+
+test("teammates exclude the POV row and enemies pack the other side", () => {
+	const csv = matchesToCsv([BASE], { label: "x", originT: 0 });
+	assert.match(csv, /Zed · Aerospray MG · 6\/2\/4 · 1310p/);
+	assert.match(csv, /Kirby · Carbon Roller · 6\/5\/2 · 980p/);
+	assert.doesNotMatch(csv, /You · Splattershot · 9\/4\/3/);
+});
+
+test("unread values are blank cells, not question marks", () => {
+	const [header, row] = rows(
+		matchesToCsv(
+			[
+				{
+					...BASE,
+					playedAt: null,
+					mode: null,
+					stage: null,
+					matchScores: null,
+					replayCode: null,
+					winner: null,
+					pov: null,
+					teams: [{ players: [] }, { players: [] }],
+				},
+			],
+			{ label: "x", originT: 0 },
+		),
+	);
+	for (const name of [
+		"played_at",
+		"mode",
+		"stage",
+		"result",
+		"score_for",
+		"weapon",
+		"ka",
+		"teammates",
+		"replay_code",
+	]) {
+		assert.equal(row![header!.indexOf(name)], "", name);
+	}
+});
diff --git a/app/features/scanner/tests/logic/sessions.test.ts b/app/features/scanner/tests/logic/sessions.test.ts
new file mode 100644
index 000000000..d1e50b5fe
--- /dev/null
+++ b/app/features/scanner/tests/logic/sessions.test.ts
@@ -0,0 +1,128 @@
+/**
+ * Tests for the client-side sessions: the 2 h gap split, the header numbers
+ * and which sessions retention evicts.
+ */
+
+import assert from "node:assert/strict";
+import type { ScannerMatch } from "../../core/scanner-match";
+import {
+	expiredSessionEventIds,
+	kdRatio,
+	MAX_SESSIONS,
+	SESSION_GAP_MS,
+	SESSION_MAX_AGE_MS,
+	sessionKey,
+	sessionSummary,
+	splitSessions,
+} from "../../core/sessions";
+import { test } from "../node-test-compat";
+
+const HOUR = 60 * 60 * 1000;
+const DAY = 24 * HOUR;
+
+function stamped(...detectedAts: number[]) {
+	return detectedAts.map((detectedAt, id) => ({ id, detectedAt }));
+}
+
+function match(
+	overrides: Partial<ScannerMatch> & {
+		result?: "win" | "loss";
+		ka?: number;
+		d?: number;
+	} = {},
+): ScannerMatch {
+	const { result, ka = 5, d = 3, ...rest } = overrides;
+	const pov = { team: 0 as const, index: 0 };
+	return {
+		startsAt: 0,
+		endsAt: 300,
+		playedAt: null,
+		lobby: "PRIVATE",
+		mode: "SZ",
+		stage: 0,
+		matchScores: null,
+		replayCode: null,
+		cast: false,
+		objective: null,
+		playerStatus: null,
+		kills: null,
+		teams: [
+			{ players: [{ name: "me", weaponId: 40, paint: 900, ka, d, s: 2 }] },
+			{ players: [] },
+		],
+		winner: result === undefined ? null : result === "win" ? 0 : 1,
+		pov,
+		...rest,
+	};
+}
+
+test("events less than two hours apart share a session", () => {
+	const sessions = splitSessions(stamped(0, HOUR, 2 * HOUR - 1));
+	assert.equal(sessions.length, 1);
+	assert.equal(sessions[0]!.length, 3);
+});
+
+test("a gap of two hours starts a new session", () => {
+	const sessions = splitSessions(stamped(0, 10, 10 + SESSION_GAP_MS));
+	assert.deepEqual(
+		sessions.map((session) => session.map((e) => e.id)),
+		[[0, 1], [2]],
+	);
+});
+
+test("the split follows detection time, not input order", () => {
+	const events = stamped(5 * HOUR, 0, 10);
+	const sessions = splitSessions(events);
+	assert.deepEqual(
+		sessions.map((session) => session.map((e) => e.id)),
+		[[1, 2], [0]],
+	);
+});
+
+test("a session is keyed by its first detection", () => {
+	assert.equal(sessionKey(stamped(1_000, 2_000)), 1_000);
+});
+
+test("the summary counts decided games, the record and the POV K/D", () => {
+	const summary = sessionSummary([
+		match({ result: "win", ka: 8, d: 2 }),
+		match({ result: "loss", ka: 4, d: 6 }),
+		match(),
+	]);
+	assert.deepEqual(summary, { games: 2, wins: 1, losses: 1, ka: 17, d: 11 });
+	assert.equal(kdRatio(summary)!.toFixed(2), "1.55");
+});
+
+test("a match without a POV seat counts as a game but not a result", () => {
+	const summary = sessionSummary([match({ result: "win", pov: null })]);
+	assert.equal(summary.games, 1);
+	assert.equal(summary.wins, 0);
+	assert.equal(summary.losses, 0);
+	assert.equal(kdRatio(summary), null);
+});
+
+test("K/D never divides by zero deaths", () => {
+	assert.equal(kdRatio({ games: 1, wins: 1, losses: 0, ka: 7, d: 0 }), 7);
+});
+
+test("retention drops sessions older than 30 days", () => {
+	const now = 100 * DAY;
+	const ids = expiredSessionEventIds(
+		[
+			{ id: 1, detectedAt: now - SESSION_MAX_AGE_MS - HOUR },
+			{ id: 2, detectedAt: now - SESSION_MAX_AGE_MS - HOUR + 1000 },
+			{ id: 3, detectedAt: now - DAY },
+		],
+		now,
+	);
+	assert.deepEqual(ids, [1, 2]);
+});
+
+test("retention keeps the newest sessions only", () => {
+	const now = 100 * DAY;
+	const events = Array.from({ length: MAX_SESSIONS + 2 }, (_, i) => ({
+		id: i,
+		detectedAt: now - (MAX_SESSIONS + 2 - i) * 3 * HOUR,
+	}));
+	assert.deepEqual(expiredSessionEventIds(events, now), [0, 1]);
+});
diff --git a/app/modules/permissions/mapper.server.ts b/app/modules/permissions/mapper.server.ts
index 6205d2be7..7b47301dc 100644
--- a/app/modules/permissions/mapper.server.ts
+++ b/app/modules/permissions/mapper.server.ts
@@ -1,14 +1,7 @@
 import type { UserWithPlusTier } from "~/utils/kysely.server";
 import { userDiscordIdIsAged } from "~/utils/users";
 import type { Role } from "./types";
-import {
-	isAdmin,
-	isDev,
-	isQa,
-	isScannerTester,
-	isStaff,
-	isSupporter,
-} from "./utils";
+import { isAdmin, isDev, isQa, isStaff, isSupporter } from "./utils";
 
 export function userRoles(
 	user: Pick<
@@ -41,10 +34,6 @@ export function userRoles(
 		result.push("QA");
 	}
 
-	if (isScannerTester(user)) {
-		result.push("SCANNER_TESTER");
-	}
-
 	if (typeof user.patronTier === "number") {
 		result.push("MINOR_SUPPORT");
 	}
diff --git a/app/modules/permissions/types.ts b/app/modules/permissions/types.ts
index 9d3aeb4bd..c4e2aabd7 100644
--- a/app/modules/permissions/types.ts
+++ b/app/modules/permissions/types.ts
@@ -16,6 +16,5 @@ export type Role =
 	| "API_ACCESSER"
 	| "QA"
 	| "DEV"
-	| "SCANNER_TESTER"
 	| "SUPPORTER" // patrons of "Supporter" tier or higher
 	| "MINOR_SUPPORT"; // patrons of "Support" tier or higher
diff --git a/app/modules/permissions/utils.ts b/app/modules/permissions/utils.ts
index fe0018a63..657e1cca6 100644
--- a/app/modules/permissions/utils.ts
+++ b/app/modules/permissions/utils.ts
@@ -2,7 +2,6 @@ import {
 	ADMIN_ID,
 	DEV_IDS,
 	QA_IDS,
-	SCANNER_TESTER_IDS,
 	STAFF_IDS,
 } from "~/features/admin/admin-constants";
 import { IS_E2E_TEST_RUN } from "~/utils/e2e";
@@ -49,12 +48,6 @@ export function isQa(user?: { id: number }) {
 	return QA_IDS.includes(user.id);
 }
 
-export function isScannerTester(user?: { id: number }) {
-	if (!user) return false;
-
-	return SCANNER_TESTER_IDS.includes(user.id);
-}
-
 export function isSupporter(user?: { patronTier: number | null }) {
 	return typeof user?.patronTier === "number" && user.patronTier >= 2;
 }
diff --git a/app/utils/urls.ts b/app/utils/urls.ts
index a32fffe42..669277bb8 100644
--- a/app/utils/urls.ts
+++ b/app/utils/urls.ts
@@ -186,6 +186,7 @@ export const NAV_ICONS = [
 	"associations",
 	"badges",
 	"luti",
+	"scanner",
 ] as const;
 
 export type NavIcon = (typeof NAV_ICONS)[number];
diff --git a/changelog/2026-09-19-scanner.md b/changelog/2026-09-19-scanner.md
new file mode 100644
index 000000000..cb806ecac
--- /dev/null
+++ b/changelog/2026-09-19-scanner.md
@@ -0,0 +1,12 @@
+---
+navItem: scanner
+type: feature
+---
+Scanner is out for everyone
+
+- Find it in the Tools menu. Start a capture and leave it running while you play: every game is read off your capture card and the results upload to sendou.ink as each game ends
+- Your best moments are clipped automatically: a streak of four splats saves a clip with audio, and the 20 best are kept across sessions until you download them
+- Scan a recorded VoD the same way, drop the file on the page and the games, clips and upload state show up as it runs
+- Each game's card shows the scoreboard, the objective and player-status timeline, your deaths and kills with the matching clip a click away, and the builds read for both teams
+- Your play is grouped into sessions you can come back to for 30 days, and every session or file exports as CSV
+- Logging in is only needed for uploading; capturing, scanning and clips work without an account
diff --git a/e2e/pages/scanner/scanner-page.ts b/e2e/pages/scanner/scanner-page.ts
index e0b7e2f15..e26ab8e07 100644
--- a/e2e/pages/scanner/scanner-page.ts
+++ b/e2e/pages/scanner/scanner-page.ts
@@ -13,4 +13,8 @@ export class ScannerPage {
 	async goto() {
 		await navigate({ page: this.page, url: SCANNER_PAGE });
 	}
+
+	startCaptureButton() {
+		return this.page.getByRole("button", { name: "Start capture" });
+	}
 }
diff --git a/e2e/public-pages.spec.ts b/e2e/public-pages.spec.ts
index 778562a29..47f67eb8c 100644
--- a/e2e/public-pages.spec.ts
+++ b/e2e/public-pages.spec.ts
@@ -109,12 +109,12 @@ test.describe("Public pages", () => {
 		await expectNoErrorPage(page);
 		await expect(links.resourceLink("Inkipedia")).toBeVisible();
 
-		// scanner is not publicly enabled in the test env: the route renders and
-		// sends a logged-out visitor to the front page instead of erroring
+		// anyone can capture and scan; only uploading needs a login
 		const scanner = new ScannerPage(page);
 		await scanner.goto();
 		await expectNoErrorPage(page);
-		await expect(page).toHaveURL("/");
+		await expect(page).toHaveURL(/\/scanner$/);
+		await expect(scanner.startCaptureButton()).toBeVisible();
 	});
 
 	test("prompts a logged out visitor to log in when using search or a filter", async ({
diff --git a/locales/da/common.json b/locales/da/common.json
index 8f9675b7b..09ccc99a7 100644
--- a/locales/da/common.json
+++ b/locales/da/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Beregn Objektstade",
 	"pages.support": "Støt siden",
 	"pages.vods": "Videoer",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/de/common.json b/locales/de/common.json
index b687aeae8..0942053cc 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Objekt-Schaden-Rechner",
 	"pages.support": "Support",
 	"pages.vods": "Videos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/en/common.json b/locales/en/common.json
index 102882f54..501cc9765 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "DMG Calc",
 	"pages.support": "Support",
 	"pages.vods": "Videos",
+	"pages.scanner": "Scanner",
 	"pages.popularBuilds": "Popular Builds",
 	"pages.abilityStats": "Ability Stats",
 	"pages.params": "Parameters",
diff --git a/locales/es-ES/common.json b/locales/es-ES/common.json
index 2430b058b..4209dd622 100644
--- a/locales/es-ES/common.json
+++ b/locales/es-ES/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Calc. de daño",
 	"pages.support": "Apoyar",
 	"pages.vods": "Vídeos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "Builds populares",
 	"pages.abilityStats": "Estadísticas de potenciadores",
 	"pages.params": "Parámetros",
diff --git a/locales/es-US/common.json b/locales/es-US/common.json
index c1bff1cb3..950554878 100644
--- a/locales/es-US/common.json
+++ b/locales/es-US/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Calculadora de daño",
 	"pages.support": "Apóyanos",
 	"pages.vods": "Videos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "Builds populares",
 	"pages.abilityStats": "Estadísticas de potenciadores",
 	"pages.params": "Parámetros",
diff --git a/locales/fr-CA/common.json b/locales/fr-CA/common.json
index 68d72dbd0..7ce498cd4 100644
--- a/locales/fr-CA/common.json
+++ b/locales/fr-CA/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Calculateur de dégâts",
 	"pages.support": "Soutenir",
 	"pages.vods": "Vidéos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/fr-EU/common.json b/locales/fr-EU/common.json
index 7b16df481..e62a35dc0 100644
--- a/locales/fr-EU/common.json
+++ b/locales/fr-EU/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Calculateur de dégâts",
 	"pages.support": "Soutenir",
 	"pages.vods": "Vidéos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/he/common.json b/locales/he/common.json
index 7c5286319..e6821e2e4 100644
--- a/locales/he/common.json
+++ b/locales/he/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "חישוב נזק",
 	"pages.support": "תמיכה",
 	"pages.vods": "סרטונים",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/it/common.json b/locales/it/common.json
index 99c8aecc1..057fbdc1c 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Calcolatrice Danno",
 	"pages.support": "Supporto",
 	"pages.vods": "Videos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index dc8dbe8bb..189d8dbd2 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "対物計算機",
 	"pages.support": "サポーター",
 	"pages.vods": "動画一覧",
+	"pages.scanner": "",
 	"pages.popularBuilds": "人気なギア構成",
 	"pages.abilityStats": "平均使用ギアパワー",
 	"pages.params": "メイン性能データ",
diff --git a/locales/ko/common.json b/locales/ko/common.json
index 59e2e7cd3..29d2eb609 100644
--- a/locales/ko/common.json
+++ b/locales/ko/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "대미지 계산기",
 	"pages.support": "후원",
 	"pages.vods": "영상",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 65755b05a..92439d5b9 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "",
 	"pages.support": "",
 	"pages.vods": "",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/pl/common.json b/locales/pl/common.json
index c87076180..3cd6309e0 100644
--- a/locales/pl/common.json
+++ b/locales/pl/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Kalkulator Szkód",
 	"pages.support": "Wesprzyj",
 	"pages.vods": "",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/pt-BR/common.json b/locales/pt-BR/common.json
index 923afeeaa..5b35f1a16 100644
--- a/locales/pt-BR/common.json
+++ b/locales/pt-BR/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Calculadora de Dano",
 	"pages.support": "Suporte",
 	"pages.vods": "Vídeos",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index cd20cbd46..8fb94f5d1 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "Калькулятор урона",
 	"pages.support": "Поддержать",
 	"pages.vods": "Видео",
+	"pages.scanner": "",
 	"pages.popularBuilds": "",
 	"pages.abilityStats": "",
 	"pages.params": "",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index 502dfae1d..7f8f13959 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -15,6 +15,7 @@
 	"pages.object-damage-calculator": "对物攻击计算器",
 	"pages.support": "赞助",
 	"pages.vods": "视频",
+	"pages.scanner": "",
 	"pages.popularBuilds": "热门配装",
 	"pages.abilityStats": "装备能力数据",
 	"pages.params": "参数",
diff --git a/scripts/scanner/scan-vod.ts b/scripts/scanner/scan-vod.ts
index 48d7548b1..bd942a4f0 100644
--- a/scripts/scanner/scan-vod.ts
+++ b/scripts/scanner/scan-vod.ts
@@ -17,7 +17,7 @@ import { basename } from "node:path";
 import {
 	type CsvEvent,
 	eventsToCsv,
-} from "../../app/features/scanner/components/events-csv";
+} from "../../app/features/scanner/core/csv/events";
 import { loadOpenCV } from "../../app/features/scanner/core/cv";
 import { MAP_START_EVENT_TYPE } from "../../app/features/scanner/core/detectors/map-start/index";
 import {
diff --git a/scripts/scanner/status-audit.ts b/scripts/scanner/status-audit.ts
index 9583e4bad..259ef4cb8 100644
--- a/scripts/scanner/status-audit.ts
+++ b/scripts/scanner/status-audit.ts
@@ -19,13 +19,6 @@ import {
 	type PlayerStatusTimelineSample,
 	statusSpans,
 } from "../../app/components/PlayerStatusTimeline";
-import { formatTime } from "../../app/features/scanner/components/format";
-import {
-	lobbyLabel,
-	mainWeaponLabel,
-	modeLabel,
-	stageLabel,
-} from "../../app/features/scanner/components/labels";
 import {
 	DEATH_EVENT_TYPE,
 	type DeathData,
@@ -63,6 +56,13 @@ import {
 import { SCOREBOARD_BATTLE_LOG_EVENT_TYPE } from "../../app/features/scanner/core/detectors/scoreboard-battle-log/index";
 import { SCOREBOARD_BATTLE_LOG_REPLAY_EVENT_TYPE } from "../../app/features/scanner/core/detectors/scoreboard-battle-log-replay/index";
 import type { DetectedEvent } from "../../app/features/scanner/core/detectors/types";
+import { formatTime } from "../../app/features/scanner/core/format";
+import {
+	lobbyLabel,
+	mainWeaponLabel,
+	modeLabel,
+	stageLabel,
+} from "../../app/features/scanner/core/labels";
 import {
 	type BuiltMatch,
 	buildScannerMatches,
diff --git a/vitest.unit.config.ts b/vitest.unit.config.ts
index 71adee35d..b8f861ee4 100644
--- a/vitest.unit.config.ts
+++ b/vitest.unit.config.ts
@@ -12,10 +12,6 @@ export default defineConfig({
 			"app/features/scanner/tests/*.test.{ts,tsx}",
 		],
 		setupFiles: ["./app/test-setup.ts"],
-		// the scanner-ingest scenario suite's real ingest action is gated on Config.scannerEnabled
-		env: {
-			VITE_SCANNER_ENABLED: "true",
-		},
 	},
 	resolve: {
 		tsconfigPaths: true,