From e1e3e261e3f17f01b462331638e21147be2b4fca Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 16:56:51 +0200
Subject: [PATCH 01/10] fix(preview): stop a single media error from emptying
 the editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One `error` event on the hidden <video> latched an asset id into a list
that only a remount could clear, and the preview fell through to
EditorEmptyState — "Add a video to get started", over a project with
clips still on the timeline. Ctrl+R or a trip through the Rec/Media stage
was the only way back, because both unmount Preview.

The event was not even evidence of a broken file. MEDIA_ERR_ABORTED is
what a cancelled load looks like, and the <video> is keyed on the asset
id, so every cross-asset clip boundary produces one by design. The code
was discarded before anyone could see it, which is why the bug could only
ever be reported as "the preview disappeared".

- mediaError.ts classifies the MediaError: aborted is ignored and never
  counted, unsupported gets one retry (a recording still being written
  reports as unsupported), everything else rides a short backoff. The
  budget is reset by a successful load, not by elapsed time.
- VirtualPreview reloads the source itself with a plain load(), resuming
  through the existing pendingSeekRef path at a position resolved at
  reload time from the live playhead — the user can scrub during the
  backoff, and video.currentTime reads 0 after load(). The rAF tick goes
  inert while a reload is in flight: an error does not fire pause, so the
  usual v.paused gate would not hold and the tick would keep taking
  clip-boundary decisions against a frozen clock.
- Preview no longer takes any failure input into the empty-state
  condition, which is left answering one question: is there anything in
  this project to show? A source that gives up after the retries shows
  PreviewErrorCard over the still-mounted canvas, which goes on painting
  the last composed frame — the pixels come from the native compositor,
  not from the <video>. The card carries the MediaError code and a Retry
  button, and clears itself when a source decodes again.
- Drops VirtualPreview's untranslated "Video preview could not be
  loaded." overlay: it lived inside .videoFrame, which carries the live
  zoom transform, so at 3x it left the stage entirely.

Fixes #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ai-edition/NewEditorShell.module.css      |  60 ++++
 src/components/ai-edition/Preview.test.tsx    | 246 +++++++------
 src/components/ai-edition/Preview.tsx         | 113 +++---
 src/components/ai-edition/PreviewCanvas.tsx   |  11 +-
 .../ai-edition/PreviewErrorCard.tsx           |  47 +++
 .../VirtualPreview.mediaError.test.tsx        | 322 ++++++++++++++++++
 .../ai-edition/VirtualPreview.module.css      |  12 -
 src/components/ai-edition/VirtualPreview.tsx  | 220 +++++++++++-
 src/components/ai-edition/mediaError.test.ts  |  78 +++++
 src/components/ai-edition/mediaError.ts       |  82 +++++
 src/i18n/locales/ar/editor.json               |   8 +-
 src/i18n/locales/en/editor.json               |   8 +-
 src/i18n/locales/es/editor.json               |   8 +-
 src/i18n/locales/fr/editor.json               |   8 +-
 src/i18n/locales/it/editor.json               |   8 +-
 src/i18n/locales/ja-JP/editor.json            |   8 +-
 src/i18n/locales/ko-KR/editor.json            |   8 +-
 src/i18n/locales/pt-BR/editor.json            |   8 +-
 src/i18n/locales/ru/editor.json               |   8 +-
 src/i18n/locales/tr/editor.json               |   8 +-
 src/i18n/locales/vi/editor.json               |   8 +-
 src/i18n/locales/zh-CN/editor.json            |   8 +-
 src/i18n/locales/zh-TW/editor.json            |   8 +-
 .../architecture/preview.md                   |  48 +++
 24 files changed, 1164 insertions(+), 179 deletions(-)
 create mode 100644 src/components/ai-edition/PreviewErrorCard.tsx
 create mode 100644 src/components/ai-edition/VirtualPreview.mediaError.test.tsx
 create mode 100644 src/components/ai-edition/mediaError.test.ts
 create mode 100644 src/components/ai-edition/mediaError.ts

diff --git a/src/components/ai-edition/NewEditorShell.module.css b/src/components/ai-edition/NewEditorShell.module.css
index bb96cc6ce..bebed2d50 100644
--- a/src/components/ai-edition/NewEditorShell.module.css
+++ b/src/components/ai-edition/NewEditorShell.module.css
@@ -643,6 +643,66 @@
 	width: 12px;
 	height: 12px;
 }
+
+/* ─── preview media failure (PreviewErrorCard) ──────────────────── */
+/* Overlays the stage instead of replacing it: the native compositor is still
+   painting the last composed frame underneath, and leaving that frame visible is
+   what tells the user their project is fine (issue #395). Translucent, not
+   opaque, for the same reason. */
+.previewFailure {
+	position: absolute;
+	inset: 0;
+	z-index: 3;
+	display: grid;
+	place-items: center;
+	padding: var(--sp-4);
+	background: rgba(9, 9, 11, 0.72);
+	backdrop-filter: blur(2px);
+}
+.previewFailureCard {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-3);
+	max-width: min(38ch, 100%);
+	text-align: center;
+}
+.previewFailureIconRing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.05);
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.previewFailureIcon {
+	width: 20px;
+	height: 20px;
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.6));
+}
+.previewFailureTitle {
+	margin: 0;
+	font-size: 1.05rem;
+	font-weight: 600;
+	color: var(--fg-2);
+}
+.previewFailureDescription {
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.5;
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.55));
+}
+/* Selectable: it exists to be copied into a bug report. */
+.previewFailureDetail {
+	margin: 0;
+	font-size: 0.6875rem;
+	font-family: var(--font-mono, ui-monospace, monospace);
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.35));
+	user-select: text;
+	word-break: break-word;
+}
 .previewEmptyDialog {
 	max-width: 24rem;
 	padding: var(--sp-5);
diff --git a/src/components/ai-edition/Preview.test.tsx b/src/components/ai-edition/Preview.test.tsx
index 294ad4c30..651e4ab91 100644
--- a/src/components/ai-edition/Preview.test.tsx
+++ b/src/components/ai-edition/Preview.test.tsx
@@ -12,27 +12,43 @@ vi.mock("@/native/client", () => ({
 }));
 
 // Stand-in for the real canvas (native compositor, editor settings, a live
-// <video>): it only has to report WHICH sources it was handed and let a test
-// fire the load failure for one of them, which is the entire contract Preview
-// owns.
+// <video>): it only has to report WHICH sources it was handed, let a test fire
+// the terminal failure and the recovery for one of them, and show what retry
+// token it was given — which is the entire contract Preview owns.
 vi.mock("./PreviewCanvas", () => ({
 	PreviewCanvas: ({
 		videoSources,
 		onVideoError,
+		onVideoRecovered,
+		retryToken,
 	}: {
 		videoSources: VideoSource[];
-		onVideoError?: (assetId: string) => void;
+		onVideoError?: (assetId: string, detail: string) => void;
+		onVideoRecovered?: (assetId: string) => void;
+		retryToken?: number;
 	}) => (
-		<div data-testid="preview-canvas" data-sources={videoSources.map((s) => s.id).join(",")}>
+		<div
+			data-testid="preview-canvas"
+			data-sources={videoSources.map((s) => s.id).join(",")}
+			data-retry-token={retryToken}
+		>
 			{videoSources.map((source) => (
-				<button
-					key={source.id}
-					type="button"
-					data-testid={`fail-${source.id}`}
-					onClick={() => onVideoError?.(source.id)}
-				>
-					{source.src}
-				</button>
+				<div key={source.id}>
+					<button
+						type="button"
+						data-testid={`fail-${source.id}`}
+						onClick={() => onVideoError?.(source.id, "MEDIA_ERR_DECODE (3)")}
+					>
+						{source.src}
+					</button>
+					<button
+						type="button"
+						data-testid={`recover-${source.id}`}
+						onClick={() => onVideoRecovered?.(source.id)}
+					>
+						recover
+					</button>
+				</div>
 			))}
 		</div>
 	),
@@ -56,13 +72,13 @@ function source(id: string): VideoSource {
 	return { id, src: `file:///tmp/${id}.mp4`, label: id };
 }
 
-function renderPreview(props: {
+function previewProps(props: {
 	videoSources: VideoSource[];
 	clips: AxcutClip[];
 	hasAsset?: boolean;
 	hasProject?: boolean;
 }) {
-	return render(
+	return (
 		<I18nProvider>
 			<Preview
 				hasProject={props.hasProject ?? true}
@@ -76,12 +92,21 @@ function renderPreview(props: {
 				onVideoElement={vi.fn()}
 				playing={false}
 			/>
-		</I18nProvider>,
+		</I18nProvider>
 	);
 }
 
+function renderPreview(props: Parameters<typeof previewProps>[0]) {
+	return render(previewProps(props));
+}
+
 const canvas = () => screen.queryByTestId("preview-canvas");
 const emptyState = () => screen.queryByText(/add a video to get started/i);
+const errorCard = () => screen.queryByTestId("preview-error-card");
+const click = (testId: string) =>
+	act(() => {
+		fireEvent.click(screen.getByTestId(testId));
+	});
 
 describe("Preview follows the timeline, not the asset list", () => {
 	afterEach(() => {
@@ -105,42 +130,6 @@ describe("Preview follows the timeline, not the asset list", () => {
 		expect(emptyState()).not.toBeInTheDocument();
 	});
 
-	// The dead asset can't even report a failure now, but should one arrive for a
-	// source that is no longer used, it must not blank a preview built from other
-	// sources entirely.
-	it("keeps rendering when the unreferenced asset is the only broken one", () => {
-		const { rerender } = renderPreview({
-			videoSources: [source("dangling")],
-			clips: [],
-		});
-		// No clips yet → fallback to every asset, so the dead one does mount and fail.
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-dangling"));
-		});
-		expect(emptyState()).toBeInTheDocument();
-
-		// A clip lands on a healthy asset: the preview is driven by that clip now,
-		// and the earlier failure of an asset nothing references is irrelevant.
-		rerender(
-			<I18nProvider>
-				<Preview
-					hasProject={true}
-					hasAsset={true}
-					videoSources={[source("dangling"), source("valid")]}
-					clips={[clip("clip_a", "valid", 0, 24.7)]}
-					seekTarget={null}
-					onTimeChange={vi.fn()}
-					onSeek={vi.fn()}
-					onLoadedMetadata={vi.fn()}
-					onVideoElement={vi.fn()}
-					playing={false}
-				/>
-			</I18nProvider>,
-		);
-
-		expect(canvas()).toHaveAttribute("data-sources", "valid");
-	});
-
 	// Mounting index 0 is VirtualPreview's own starting point, so the source list
 	// has to lead with the asset the playhead needs at 0:00 — not whatever order
 	// the assets happen to be stored in.
@@ -173,85 +162,123 @@ describe("Preview follows the timeline, not the asset list", () => {
 
 		expect(canvas()).toHaveAttribute("data-sources", "fresh_import");
 	});
+
+	// A clip landing on a healthy asset takes over the preview regardless of what
+	// happened to the asset that was mounted before it.
+	it("switches to the asset a new clip references", () => {
+		const { rerender } = renderPreview({ videoSources: [source("dangling")], clips: [] });
+		click("fail-dangling");
+
+		rerender(
+			previewProps({
+				videoSources: [source("dangling"), source("valid")],
+				clips: [clip("clip_a", "valid", 0, 24.7)],
+			}),
+		);
+
+		expect(canvas()).toHaveAttribute("data-sources", "valid");
+	});
 });
 
-describe("Preview still degrades to the empty state on a real failure", () => {
+// Issue #395. Every test below used to assert the opposite — that a media
+// failure collapsed the stage to the import screen. The intent was right (say
+// something, offer a way out); the verdict was wrong, because the failure is
+// recoverable, the project is intact, and the native canvas is still painting.
+describe("Preview keeps the stage when the media fails", () => {
 	afterEach(() => {
 		cleanup();
 		vi.clearAllMocks();
 	});
 
-	// The documented intent this fix must not regress: a truncated recording from
-	// a bad MediaRecorder capture is referenced by a clip, fails to load, and the
-	// user gets the import affordance rather than a broken preview.
-	it("shows the empty state when the clip's own asset fails to load", () => {
+	it("shows a retry card over the canvas instead of the empty state", () => {
 		renderPreview({
 			videoSources: [source("truncated")],
 			clips: [clip("clip_a", "truncated", 0, 60)],
 		});
+
+		click("fail-truncated");
+
 		expect(canvas()).toBeInTheDocument();
+		expect(errorCard()).toBeInTheDocument();
+		expect(emptyState()).not.toBeInTheDocument();
+	});
 
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-truncated"));
-		});
+	// The MediaError code is the one thing that makes a user's report actionable;
+	// it used to be discarded entirely.
+	it("puts the media error on the card", () => {
+		renderPreview({ videoSources: [source("truncated")], clips: [] });
+		click("fail-truncated");
 
-		expect(canvas()).not.toBeInTheDocument();
-		expect(emptyState()).toBeInTheDocument();
+		expect(errorCard()).toHaveTextContent("MEDIA_ERR_DECODE (3)");
 	});
 
-	// Per-source, not a global latch: one dead asset among several used by the
-	// timeline leaves the rest renderable (VirtualPreview draws its own overlay
-	// over the source that failed).
-	it("survives one broken source among several the timeline uses", () => {
+	// The whole point of the fix: a dead source is not a dead editor, and the
+	// stage must stay mounted no matter how many sources report failure.
+	it("keeps the canvas when every source the timeline uses fails", () => {
 		renderPreview({
 			videoSources: [source("broken"), source("healthy")],
 			clips: [clip("clip_a", "broken", 0, 10), clip("clip_b", "healthy", 10, 20)],
 		});
 
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-broken"));
-		});
+		click("fail-broken");
+		click("fail-healthy");
+
 		expect(canvas()).toBeInTheDocument();
+		expect(emptyState()).not.toBeInTheDocument();
+	});
+
+	// Self-healing: VirtualPreview reports a decoded frame, so the card must go —
+	// otherwise it outlives its own failure, which is the latch again in a
+	// quieter form.
+	it("drops the card when the source decodes again", () => {
+		renderPreview({ videoSources: [source("flaky")], clips: [] });
 
-		// …and only collapses once nothing is left to render.
+		click("fail-flaky");
+		expect(errorCard()).toBeInTheDocument();
+
+		click("recover-flaky");
+		expect(errorCard()).not.toBeInTheDocument();
+	});
+
+	it("bumps the retry token and clears the card when the user retries", () => {
+		renderPreview({ videoSources: [source("truncated")], clips: [] });
+		expect(canvas()).toHaveAttribute("data-retry-token", "0");
+
+		click("fail-truncated");
 		act(() => {
-			fireEvent.click(screen.getByTestId("fail-healthy"));
+			fireEvent.click(screen.getByRole("button", { name: /try again/i }));
 		});
-		expect(canvas()).not.toBeInTheDocument();
-		expect(emptyState()).toBeInTheDocument();
+
+		expect(canvas()).toHaveAttribute("data-retry-token", "1");
+		expect(errorCard()).not.toBeInTheDocument();
 	});
 
-	// The reset that made the old latch bearable: swapping the media out has to
-	// clear the recorded failures, or the empty state would outlive the file that
-	// caused it.
-	it("clears recorded failures when the source set changes", () => {
+	// Swapping the media out has to clear the failure, or the card would outlive
+	// the file that caused it.
+	it("clears the failure when the source set changes", () => {
 		const { rerender } = renderPreview({
 			videoSources: [source("truncated")],
 			clips: [clip("clip_a", "truncated", 0, 60)],
 		});
-		act(() => {
-			fireEvent.click(screen.getByTestId("fail-truncated"));
-		});
-		expect(emptyState()).toBeInTheDocument();
+		click("fail-truncated");
+		expect(errorCard()).toBeInTheDocument();
 
 		rerender(
-			<I18nProvider>
-				<Preview
-					hasProject={true}
-					hasAsset={true}
-					videoSources={[source("replacement")]}
-					clips={[clip("clip_a", "replacement", 0, 60)]}
-					seekTarget={null}
-					onTimeChange={vi.fn()}
-					onSeek={vi.fn()}
-					onLoadedMetadata={vi.fn()}
-					onVideoElement={vi.fn()}
-					playing={false}
-				/>
-			</I18nProvider>,
+			previewProps({
+				videoSources: [source("replacement")],
+				clips: [clip("clip_a", "replacement", 0, 60)],
+			}),
 		);
 
 		expect(canvas()).toHaveAttribute("data-sources", "replacement");
+		expect(errorCard()).not.toBeInTheDocument();
+	});
+});
+
+describe("Preview shows the empty state only when there is nothing to show", () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
 	});
 
 	it("shows the empty state when the project has no asset at all", () => {
@@ -260,4 +287,33 @@ describe("Preview still degrades to the empty state on a real failure", () => {
 		expect(canvas()).not.toBeInTheDocument();
 		expect(emptyState()).toBeInTheDocument();
 	});
+
+	it("shows the empty state when the project has no usable source", () => {
+		renderPreview({ videoSources: [], clips: [] });
+
+		expect(canvas()).not.toBeInTheDocument();
+		expect(emptyState()).toBeInTheDocument();
+	});
+
+	it("shows the empty state when there is no project", () => {
+		renderPreview({ videoSources: [], clips: [], hasProject: false, hasAsset: false });
+
+		expect(emptyState()).not.toBeInTheDocument();
+		expect(screen.getByText(/no project open/i)).toBeInTheDocument();
+	});
+
+	// The guard for #395 itself: no failure, however reported, may reach the
+	// branch that tells a user with media loaded that they have none.
+	it("never reaches the empty state while the project has media", () => {
+		renderPreview({
+			videoSources: [source("a"), source("b")],
+			clips: [clip("clip_a", "a", 0, 10), clip("clip_b", "b", 10, 20)],
+		});
+
+		for (const id of ["a", "b"]) {
+			click(`fail-${id}`);
+			expect(emptyState()).not.toBeInTheDocument();
+			expect(canvas()).toBeInTheDocument();
+		}
+	});
 });
diff --git a/src/components/ai-edition/Preview.tsx b/src/components/ai-edition/Preview.tsx
index 03ab1d569..89e5db7c6 100644
--- a/src/components/ai-edition/Preview.tsx
+++ b/src/components/ai-edition/Preview.tsx
@@ -12,6 +12,7 @@ import type { SpeedRegion } from "@/lib/ai-edition/timeline/speed";
 import { EditorEmptyState } from "./EditorEmptyState";
 import styles from "./NewEditorShell.module.css";
 import { PreviewCanvas } from "./PreviewCanvas";
+import { PreviewErrorCard } from "./PreviewErrorCard";
 import type { VideoSource } from "./VirtualPreview";
 
 type BlurData = NonNullable<AxcutAnnotationRegion["blurData"]>;
@@ -104,30 +105,49 @@ export function Preview({
 		return referenced.length > 0 ? referenced : videoSources;
 	}, [clips, videoSources]);
 
-	// ponytail: when the <video> fails to load (e.g. a truncated recording
-	// from a bad MediaRecorder capture), swap to the empty state so the user
-	// can import a different file instead of staring at a broken preview.
-	// Tracked PER SOURCE rather than as one global latch: with several clips on
-	// the timeline, a single dead asset must not blank a preview the other clips
-	// can still render — VirtualPreview already shows its own "could not be
-	// loaded" overlay for whichever source failed. Only when every source the
-	// timeline uses is dead is there nothing left to show.
-	// Resets when the set of preview sources changes (asset paths).
-	const [failedSourceIds, setFailedSourceIds] = useState<string[]>([]);
+	// ponytail: a media failure used to fall through to `EditorEmptyState`, and
+	// that is issue #395: ONE `error` event on the hidden <video> — including the
+	// MEDIA_ERR_ABORTED every cross-asset clip boundary produces by design —
+	// latched an id into a list that nothing short of a remount could clear, and
+	// the editor told a user whose project was perfectly intact to "add a video to
+	// get started". Ctrl+R or a trip through the Rec/Media stage was the only way
+	// back, because both unmount this component.
+	//
+	// Two things replace it. VirtualPreview now classifies the error and reloads
+	// the source itself, so a transient decode/network blip never reaches here at
+	// all. What does reach here is a source that gave up after those retries, and
+	// it is shown as a card OVER the still-mounted canvas — which goes on painting
+	// the last good frame, because the pixels come from the native compositor and
+	// the <video> is only a decode clock (see PreviewCanvas's header comment). The
+	// empty state is left answering exactly one question: is there anything in
+	// this project to show?
+	//
+	// One failure slot rather than a set: only ever ONE source is mounted
+	// (VirtualPreview indexes into `videoSources`), so the failure being reported
+	// is always the one the playhead needs, and any source reporting healthy means
+	// the mounted one is.
+	const [failure, setFailure] = useState<{ assetId: string; detail: string } | null>(null);
+	const [retryToken, setRetryToken] = useState(0);
 	const sourceKey = previewSources.map((source) => `${source.id}::${source.src}`).join("|");
 	const previousSourceKeyRef = useRef<string | null>(null);
 	useEffect(() => {
 		if (previousSourceKeyRef.current !== sourceKey) {
 			previousSourceKeyRef.current = sourceKey;
-			setFailedSourceIds([]);
+			setFailure(null);
 		}
 	}, [sourceKey]);
-	const handleVideoError = useCallback((assetId: string) => {
-		setFailedSourceIds((prev) => (prev.includes(assetId) ? prev : [...prev, assetId]));
+	const handleVideoError = useCallback((assetId: string, detail: string) => {
+		setFailure({ assetId, detail });
+	}, []);
+	// Fires on every canplay, so on every seek: `setFailure(null)` against an
+	// already-null state is a React bail-out, and the healthy path costs nothing.
+	const handleVideoRecovered = useCallback(() => {
+		setFailure((prev) => (prev === null ? prev : null));
+	}, []);
+	const handleRetry = useCallback(() => {
+		setFailure(null);
+		setRetryToken((token) => token + 1);
 	}, []);
-	const allSourcesFailed =
-		previewSources.length > 0 &&
-		previewSources.every((source) => failedSourceIds.includes(source.id));
 
 	return (
 		<section
@@ -137,32 +157,41 @@ export function Preview({
 			data-current-time-sec={currentTimeSec.toFixed(3)}
 			data-is-playing={playing ? "true" : "false"}
 		>
-			{hasProject && hasAsset && previewSources.length > 0 && !allSourcesFailed ? (
-				<PreviewCanvas
-					videoSources={previewSources}
-					clips={clips}
-					zoomRegions={zoomRegions}
-					speedRegions={speedRegions}
-					cameraFullscreenRegions={cameraFullscreenRegions}
-					trimRanges={trimRanges}
-					selectedZoomRegionId={selectedZoomRegionId}
-					onZoomFocusChange={onZoomFocusChange}
-					onZoomFocusCommit={onZoomFocusCommit}
-					annotationRegions={annotationRegions}
-					selectedAnnotationId={selectedAnnotationId}
-					onSelectAnnotation={onSelectAnnotation}
-					onAnnotationPositionChange={onAnnotationPositionChange}
-					onAnnotationSizeChange={onAnnotationSizeChange}
-					onAnnotationBlurDataChange={onAnnotationBlurDataChange}
-					onAnnotationCommit={onAnnotationCommit}
-					seekTarget={seekTarget}
-					onTimeChange={onTimeChange}
-					onSeek={onSeek}
-					onLoadedMetadata={onLoadedMetadata}
-					onVideoElement={onVideoElement}
-					currentTimeSec={currentTimeSec}
-					onVideoError={handleVideoError}
-				/>
+			{hasProject && hasAsset && previewSources.length > 0 ? (
+				<>
+					<PreviewCanvas
+						videoSources={previewSources}
+						clips={clips}
+						zoomRegions={zoomRegions}
+						speedRegions={speedRegions}
+						cameraFullscreenRegions={cameraFullscreenRegions}
+						trimRanges={trimRanges}
+						selectedZoomRegionId={selectedZoomRegionId}
+						onZoomFocusChange={onZoomFocusChange}
+						onZoomFocusCommit={onZoomFocusCommit}
+						annotationRegions={annotationRegions}
+						selectedAnnotationId={selectedAnnotationId}
+						onSelectAnnotation={onSelectAnnotation}
+						onAnnotationPositionChange={onAnnotationPositionChange}
+						onAnnotationSizeChange={onAnnotationSizeChange}
+						onAnnotationBlurDataChange={onAnnotationBlurDataChange}
+						onAnnotationCommit={onAnnotationCommit}
+						seekTarget={seekTarget}
+						onTimeChange={onTimeChange}
+						onSeek={onSeek}
+						onLoadedMetadata={onLoadedMetadata}
+						onVideoElement={onVideoElement}
+						currentTimeSec={currentTimeSec}
+						onVideoError={handleVideoError}
+						onVideoRecovered={handleVideoRecovered}
+						retryToken={retryToken}
+					/>
+					{/* Sibling of the canvas, inside `.previewWrap` (already
+					    position: relative) — NOT inside VirtualPreview's `.videoFrame`,
+					    which carries the live zoom transform and would translate the
+					    Retry button off the stage at high zoom. */}
+					{failure ? <PreviewErrorCard detail={failure.detail} onRetry={handleRetry} /> : null}
+				</>
 			) : (
 				<EditorEmptyState hasProject={hasProject} />
 			)}
diff --git a/src/components/ai-edition/PreviewCanvas.tsx b/src/components/ai-edition/PreviewCanvas.tsx
index 86879fd12..3bf042a09 100644
--- a/src/components/ai-edition/PreviewCanvas.tsx
+++ b/src/components/ai-edition/PreviewCanvas.tsx
@@ -85,9 +85,14 @@ interface PreviewCanvasProps {
 	onLoadedMetadata: (sec: number, assetId: string) => void;
 	onVideoElement: (el: HTMLVideoElement | null) => void;
 	currentTimeSec: number;
-	/** Receives the id of the asset whose <video> failed — the caller decides per
-	 *  source whether anything is left to render (see Preview.tsx). */
-	onVideoError?: (assetId: string) => void;
+	/** Receives the id of the asset whose <video> gave up, plus the MediaError
+	 *  detail for the card. Transient failures are reloaded inside VirtualPreview
+	 *  and never reach here (see Preview.tsx). */
+	onVideoError?: (assetId: string, detail: string) => void;
+	/** The mounted source decoded a frame again — see VirtualPreview. */
+	onVideoRecovered?: (assetId: string) => void;
+	/** Bumped to force a reload of the mounted source (the Retry button). */
+	retryToken?: number;
 }
 
 // ponytail: fallback only — used until the active source's <video> reports
diff --git a/src/components/ai-edition/PreviewErrorCard.tsx b/src/components/ai-edition/PreviewErrorCard.tsx
new file mode 100644
index 000000000..0a1d90f30
--- /dev/null
+++ b/src/components/ai-edition/PreviewErrorCard.tsx
@@ -0,0 +1,47 @@
+// Shown over the preview when the decode clock gave up on the mounted source
+// (issue #395). Deliberately an overlay, not a replacement: the native
+// compositor keeps painting the last composed frame underneath, and that frame
+// is the evidence the project is intact — which is exactly what the old
+// behaviour (collapsing to the "add a video to get started" empty state)
+// destroyed along with the user's confidence.
+//
+// The copy does not claim to know WHY: the two causes we know of — a file that
+// moved and a file still being written — are indistinguishable from here
+// without a filesystem round trip, and guessing wrong is how an error message
+// sends someone re-importing media that was never gone.
+
+import { AlertCircle, RotateCcw } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import styles from "./NewEditorShell.module.css";
+
+interface PreviewErrorCardProps {
+	/** The MediaError, formatted — kept on screen because it is the one thing
+	 *  that makes a user's bug report actionable (see mediaError.ts). */
+	detail: string;
+	onRetry: () => void;
+}
+
+export function PreviewErrorCard({ detail, onRetry }: PreviewErrorCardProps) {
+	const t = useScopedT("editor");
+
+	return (
+		<div className={styles.previewFailure} role="alert" data-testid="preview-error-card">
+			<div className={styles.previewFailureCard}>
+				<div className={styles.previewFailureIconRing}>
+					<AlertCircle className={styles.previewFailureIcon} />
+				</div>
+				<h2 className={styles.previewFailureTitle}>{t("preview.mediaError.title")}</h2>
+				<p className={styles.previewFailureDescription}>{t("preview.mediaError.description")}</p>
+				<button type="button" onClick={onRetry} className={styles.previewEmptyPrimaryButton}>
+					<RotateCcw className={styles.previewEmptyButtonIcon} />
+					{t("preview.mediaError.retry")}
+				</button>
+				{detail ? (
+					<p className={styles.previewFailureDetail}>
+						{t("preview.mediaError.detail", { detail })}
+					</p>
+				) : null}
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
new file mode 100644
index 000000000..852263624
--- /dev/null
+++ b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
@@ -0,0 +1,322 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { AxcutClip } from "@/lib/ai-edition/schema";
+import { RETRY_DELAYS_MS } from "./mediaError";
+import { type VideoSource, VirtualPreview } from "./VirtualPreview";
+
+// Same hand-driven rAF as VirtualPreview.playback.test.tsx: the tick is a
+// subject here too (it must go quiet while a reload is in flight), so frames are
+// run one at a time rather than by the browser.
+let frameCallbacks: FrameRequestCallback[] = [];
+
+beforeEach(() => {
+	frameCallbacks = [];
+	vi.useFakeTimers();
+	vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+		frameCallbacks.push(cb);
+		return frameCallbacks.length;
+	});
+	vi.stubGlobal("cancelAnimationFrame", () => {
+		// Frames are drained by `tick()`, never scheduled, so there is nothing to
+		// cancel — the stub only exists so the effect's cleanup has something to call.
+	});
+	// Every case here deliberately provokes the logging the fix added; silence it
+	// so a passing run stays readable.
+	for (const level of ["debug", "warn", "error"] as const) {
+		vi.spyOn(console, level).mockImplementation(() => {
+			// swallowed on purpose
+		});
+	}
+});
+
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+	vi.useRealTimers();
+	vi.restoreAllMocks();
+});
+
+function tick() {
+	const pending = frameCallbacks;
+	frameCallbacks = [];
+	act(() => {
+		for (const cb of pending) cb(0);
+	});
+}
+
+function advance(ms: number) {
+	act(() => {
+		vi.advanceTimersByTime(ms);
+	});
+}
+
+function clip(id: string, assetId: string, timelineStartSec: number): AxcutClip {
+	return {
+		id,
+		assetId,
+		sourceStartSec: 0,
+		sourceEndSec: 10,
+		timelineStartSec,
+		timelineEndSec: timelineStartSec + 10,
+		wordRefs: [],
+		origin: "user",
+		reason: "",
+	};
+}
+
+/** A `<video>` jsdom will not drive: the test owns its clock, and load/play/pause
+ *  are recorded rather than performed (jsdom implements none of them). */
+function driveVideo(element: HTMLVideoElement) {
+	let currentTime = 0;
+	let paused = true;
+	let error: { code: number; message: string } | null = null;
+	Object.defineProperty(element, "currentTime", {
+		configurable: true,
+		get: () => currentTime,
+		set: (next: number) => {
+			currentTime = next;
+		},
+	});
+	Object.defineProperty(element, "paused", { configurable: true, get: () => paused });
+	Object.defineProperty(element, "readyState", { configurable: true, get: () => 4 });
+	Object.defineProperty(element, "duration", { configurable: true, get: () => 10 });
+	Object.defineProperty(element, "error", { configurable: true, get: () => error });
+	element.load = vi.fn(() => {
+		// What the real load() does to the position, and why the resume point
+		// cannot be read off the element after a failure.
+		currentTime = 0;
+	});
+	element.play = vi.fn(() => {
+		paused = false;
+		return Promise.resolve();
+	});
+	element.pause = vi.fn(() => {
+		paused = true;
+	});
+	return {
+		play: () => {
+			paused = false;
+		},
+		seekTo: (next: number) => {
+			currentTime = next;
+		},
+		/** Fire an `error` event carrying a real MediaError code. */
+		fail: (code: number | null, message = `code ${code}`) => {
+			error = code === null ? null : { code, message };
+			act(() => {
+				fireEvent.error(element);
+			});
+		},
+		loadedMetadata: () => {
+			error = null;
+			act(() => {
+				fireEvent.loadedMetadata(element);
+			});
+		},
+		get currentTime() {
+			return currentTime;
+		},
+		get loadCalls() {
+			return (element.load as ReturnType<typeof vi.fn>).mock.calls.length;
+		},
+		get pauseCalls() {
+			return (element.pause as ReturnType<typeof vi.fn>).mock.calls.length;
+		},
+		get playCalls() {
+			return (element.play as ReturnType<typeof vi.fn>).mock.calls.length;
+		},
+	};
+}
+
+const SOURCES: VideoSource[] = [{ id: "a1", src: "file:///tmp/a1.mp4", label: "a1" }];
+
+function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)]) {
+	const onVideoError = vi.fn<(assetId: string, detail: string) => void>();
+	const onVideoRecovered = vi.fn<(assetId: string) => void>();
+	const onTimeChange = vi.fn<(timeSec: number) => void>();
+	const tree = (retryToken: number) => (
+		<VirtualPreview
+			videoSources={SOURCES}
+			clips={clips}
+			onTimeChange={onTimeChange}
+			onVideoError={onVideoError}
+			onVideoRecovered={onVideoRecovered}
+			retryToken={retryToken}
+		/>
+	);
+	const view = render(tree(0));
+	const element = view.container.querySelector("video");
+	if (!element) throw new Error("no <video> rendered");
+	const video = driveVideo(element as HTMLVideoElement);
+	// How the real app resolves its first clip: metadata arrives, the component
+	// seeks to its current virtual time, and that seek names the active clip.
+	video.loadedMetadata();
+	onVideoRecovered.mockClear();
+	return {
+		view,
+		video,
+		element: element as HTMLVideoElement,
+		onVideoError,
+		onVideoRecovered,
+		onTimeChange,
+		bumpRetryToken: (token: number) => view.rerender(tree(token)),
+	};
+}
+
+describe("VirtualPreview media-error recovery (issue #395)", () => {
+	// THE bug. A cross-asset clip boundary remounts the keyed <video> mid-load and
+	// Chromium reports MEDIA_ERR_ABORTED for it — ordinary, expected, and it used
+	// to be enough to collapse the whole preview for the rest of the session.
+	it("ignores an aborted load entirely", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(1);
+		advance(5_000);
+
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(0);
+		expect(video.pauseCalls).toBe(0);
+	});
+
+	it("reloads the source after a decode failure instead of reporting it", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(3);
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(0);
+
+		advance(RETRY_DELAYS_MS[0]);
+		expect(video.loadCalls).toBe(1);
+		expect(onVideoError).not.toHaveBeenCalled();
+	});
+
+	// The resume point has to be resolved from the playhead at reload time:
+	// `video.currentTime` reads 0 after load(), so trusting the element would
+	// silently rewind the user to the start of the clip.
+	it("comes back at the playhead, not at zero", () => {
+		const { video } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+
+		video.fail(3);
+		advance(RETRY_DELAYS_MS[0]);
+		expect(video.currentTime).toBe(0); // load() reset it
+
+		video.loadedMetadata();
+		expect(video.currentTime).toBeCloseTo(4, 5);
+		// …and playback resumes, because it was playing when the failure hit.
+		expect(video.playCalls).toBeGreaterThan(0);
+	});
+
+	// An `error` does not fire `pause`, so `v.paused` — the gate the rest of the
+	// tick relies on — is still false while the decoder is dead. Without its own
+	// guard the tick would keep taking clip-boundary decisions on a frozen clock
+	// and clobber the seek queued for the reload.
+	it("stops steering the timeline while a reload is in flight", () => {
+		const clips = [clip("clip_1", "a1", 0), clip("clip_2", "a1", 10)];
+		const { video, onTimeChange } = mount(clips);
+
+		video.play();
+		video.seekTo(9.96); // the frame where the boundary advance would fire
+		video.fail(3);
+		onTimeChange.mockClear();
+
+		tick();
+
+		expect(onTimeChange).not.toHaveBeenCalled();
+		expect(video.currentTime).toBe(9.96);
+	});
+
+	it("gives up after the retry budget and reports the media error", () => {
+		const { video, onVideoError } = mount();
+
+		for (const delay of RETRY_DELAYS_MS) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length);
+
+		video.fail(3);
+		advance(5_000);
+
+		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_DECODE (3) — code 3");
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length); // no further reload
+		expect(video.pauseCalls).toBe(1); // transport told, once, on the way out
+	});
+
+	it("gives an unsupported source exactly one look", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(4);
+		advance(RETRY_DELAYS_MS[0]);
+		expect(video.loadCalls).toBe(1);
+		expect(onVideoError).not.toHaveBeenCalled();
+
+		video.fail(4);
+		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_SRC_NOT_SUPPORTED (4) — code 4");
+	});
+
+	// Success re-arms the budget. Without this a long session slowly walks into
+	// the same dead end — #395 with a longer fuse.
+	it("re-arms the budget on a successful load", () => {
+		const { video, onVideoError, onVideoRecovered } = mount();
+
+		for (const delay of RETRY_DELAYS_MS) {
+			video.fail(3);
+			advance(delay);
+		}
+		video.loadedMetadata();
+		expect(onVideoRecovered).toHaveBeenCalledWith("a1");
+
+		// A fresh failure now gets the full budget again rather than being fatal.
+		video.fail(3);
+		advance(RETRY_DELAYS_MS[0]);
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length + 1);
+	});
+
+	it("treats an error with no MediaError as transient", () => {
+		const { video, onVideoError } = mount();
+
+		video.fail(null);
+		advance(RETRY_DELAYS_MS[0]);
+
+		expect(video.loadCalls).toBe(1);
+		expect(onVideoError).not.toHaveBeenCalled();
+	});
+
+	// The user's lever: it must work even from the terminal state, and even while
+	// a backoff is pending.
+	it("reloads immediately when the retry token is bumped", () => {
+		const { video, onVideoError, bumpRetryToken } = mount();
+
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+		const loadsBefore = video.loadCalls;
+
+		act(() => bumpRetryToken(1));
+		advance(0);
+
+		expect(video.loadCalls).toBe(loadsBefore + 1);
+	});
+
+	// A reload scheduled for an element that is going away must never fire: the
+	// <video> is keyed on the asset id, so the timer can outlive its element.
+	it("does not reload an unmounted element", () => {
+		const { view, video } = mount();
+
+		video.fail(3);
+		view.unmount();
+		advance(5_000);
+
+		expect(video.loadCalls).toBe(0);
+	});
+});
diff --git a/src/components/ai-edition/VirtualPreview.module.css b/src/components/ai-edition/VirtualPreview.module.css
index 41eb59b5d..78d84a06f 100644
--- a/src/components/ai-edition/VirtualPreview.module.css
+++ b/src/components/ai-edition/VirtualPreview.module.css
@@ -35,18 +35,6 @@
 	max-height: none;
 }
 
-.overlay {
-	position: absolute;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--muted-foreground);
-	font-size: 0.875rem;
-	background: var(--card);
-	padding: 0.75rem 1.25rem;
-	border-radius: 0.5rem;
-}
-
 .controls {
 	display: flex;
 	align-items: center;
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index c3eb6cbbd..0d6766f47 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -23,6 +23,12 @@ import {
 	computeZoomPreviewTransform,
 	IDENTITY_ZOOM_TRANSFORM,
 } from "@/lib/ai-edition/timeline/zoom-preview";
+import {
+	describeMediaError,
+	formatMediaError,
+	mediaErrorDisposition,
+	retryDelayMs,
+} from "./mediaError";
 import styles from "./VirtualPreview.module.css";
 
 export interface VideoSource {
@@ -63,8 +69,20 @@ interface VirtualPreviewProps {
 	videoStyle?: React.CSSProperties;
 	/** Called with the id of the asset that failed, not as a bare "the preview is
 	 *  broken" signal: only ONE source is mounted at a time (`activeSource`), so
-	 *  the caller has no other way to tell which of its sources is dead. */
-	onVideoError?: (assetId: string) => void;
+	 *  the caller has no other way to tell which of its sources is dead.
+	 *  Fires only once the retry budget below is spent — a transient decode or
+	 *  network blip is reloaded here and never reaches the caller. `detail`
+	 *  carries the MediaError code for the card and for bug reports. */
+	onVideoError?: (assetId: string, detail: string) => void;
+	/** The mounted source produced a frame again — after a reload, or simply
+	 *  because the playhead moved onto a healthy asset. The caller needs this to
+	 *  drop a failure it is showing; without it, a card outlives its failure and
+	 *  we are back to a latch, only quieter. */
+	onVideoRecovered?: (assetId: string) => void;
+	/** Bumped by the caller's Retry button. A user-initiated reload always runs:
+	 *  it cancels any pending backoff and starts the budget over, because the
+	 *  user clicked knowing something changed (they put the file back). */
+	retryToken?: number;
 	/** Crop of the active clip, as fractions (0-1) of the source frame. Absent/
 	 * identity ({x:0,y:0,width:1,height:1}) renders the full frame, unchanged
 	 * from before crop support existed. */
@@ -89,6 +107,8 @@ export function VirtualPreview({
 	onVideoElement,
 	videoStyle,
 	onVideoError,
+	onVideoRecovered,
+	retryToken,
 	cropRegion,
 	clockRef,
 }: VirtualPreviewProps) {
@@ -118,6 +138,20 @@ export function VirtualPreview({
 
 	const isProgrammaticSeekRef = useRef(false);
 	const pendingSeekRef = useRef<{ sourceTimeSec: number; play: boolean } | null>(null);
+	// Reload bookkeeping for the mounted source (see `reloadActiveSource`).
+	// `attempts` is spent by failures and reset by a SUCCESS, never by elapsed
+	// time — a budget that only counts up is issue #395 with a longer fuse.
+	const retryRef = useRef<{ attempts: number; timer: number | null }>({
+		attempts: 0,
+		timer: null,
+	});
+	// True from the moment a reload is scheduled until the element produces
+	// metadata again. Read by the rAF tick, which must not steer a dead decoder.
+	const recoveringRef = useRef(false);
+	// The last position read off a healthy element. `video.currentTime` is 0
+	// after load(), and 0 after a load that failed before decoding a frame, so
+	// it cannot be the fallback resume point — that is a silent rewind.
+	const lastGoodSourceTimeRef = useRef(0);
 	// Which clip the rAF tick below believes is currently playing — set
 	// whenever a seek unambiguously resolves one (via locateVirtualPosition,
 	// timeline position → clip). Passed back into locateSourcePosition so
@@ -177,6 +211,8 @@ export function VirtualPreview({
 	playbackClipsRef.current = playbackClips;
 	const videoSourcesRef = useRef(videoSources);
 	videoSourcesRef.current = videoSources;
+	const activeSourceRef = useRef(activeSource);
+	activeSourceRef.current = activeSource;
 	const sourceIndexRef = useRef(sourceIndex);
 	sourceIndexRef.current = sourceIndex;
 	const virtualTimeSecRef = useRef(virtualTimeSec);
@@ -218,6 +254,18 @@ export function VirtualPreview({
 				clockRef.current.playbackRate = v.playbackRate;
 				clockRef.current.virtualTimeSec = virtualTimeSecRef.current;
 			}
+			// A reload is in flight: the decoder is dead and `currentTime` is
+			// frozen (or already reset to 0), so every decision below — trim
+			// skipping, the clip-boundary advance, the unmapped-position
+			// fallback — would be taken on a lie, and the seeks two of them fire
+			// would clobber the resume queued for the reload. Deliberately BELOW
+			// the clock publish: the webcam overlay freezes on the last good
+			// position rather than jumping. Note this cannot ride on `v.paused`,
+			// the gate the rest of the tick uses — an `error` does not fire
+			// `pause`, so a failure mid-playback leaves `paused` false.
+			if (recoveringRef.current) {
+				return;
+			}
 			const activeSourceId = videoSourcesRef.current[sourceIndexRef.current]?.id;
 			// Trims only trim ahead during actual playback — scrubbing/paused seeks are
 			// intentionally NOT clamped, so the user can navigate freely into a trim while
@@ -271,6 +319,10 @@ export function VirtualPreview({
 			// against drawing a black frame into the cursor overlay.
 			if (v.readyState >= 2) {
 				setSourceTimeSec(v.currentTime);
+				// Sampled here, where the decoder is known good, because this is
+				// where a reload has to put the playhead back if it cannot
+				// resolve one from the timeline.
+				lastGoodSourceTimeRef.current = v.currentTime;
 			}
 			// À L'ARRÊT, le `<video>` ne pilote PLUS la position de la timeline.
 			//
@@ -492,6 +544,92 @@ export function VirtualPreview({
 		}
 	}, []);
 
+	/**
+	 * Re-run the media load algorithm on the mounted element after a delay, and
+	 * queue the position to come back to. Everything is read through refs, so the
+	 * callback is stable and the scheduled work always sees current state.
+	 */
+	const reloadActiveSource = useCallback((play: boolean, delayMs: number) => {
+		if (retryRef.current.timer !== null) {
+			window.clearTimeout(retryRef.current.timer);
+			retryRef.current.timer = null;
+		}
+		recoveringRef.current = true;
+		setLoadState("loading");
+		retryRef.current.timer = window.setTimeout(() => {
+			retryRef.current.timer = null;
+			const video = videoRef.current;
+			if (!video) return;
+			// Resolved HERE rather than when the error fired: the user can scrub
+			// during the backoff, and the position they left the playhead on is
+			// the one that has to come back. An asset switch queued in the
+			// meantime is newer intent still, so it wins outright.
+			if (!pendingSeekRef.current) {
+				const position = locateVirtualPosition(clipsRef.current, virtualTimeSecRef.current);
+				// `locateVirtualPosition` answers for whatever clip the playhead
+				// is on, which after a boundary advance can belong to a DIFFERENT
+				// asset — its source time would be a meaningless offset into the
+				// file we are about to reload.
+				const clipIsOnThisSource = position?.clip.assetId === activeSourceRef.current?.id;
+				if (position && clipIsOnThisSource) {
+					// The rAF resumes against this; leaving it stale would resolve
+					// the next tick against the clip we were on before the failure.
+					activeClipIdRef.current = position.clip.id;
+				}
+				const resumeSec =
+					position && clipIsOnThisSource ? position.sourceTimeSec : lastGoodSourceTimeRef.current;
+				pendingSeekRef.current = {
+					sourceTimeSec: Number.isFinite(resumeSec) ? resumeSec : 0,
+					play,
+				};
+			}
+			// The restore itself rides the cross-asset path `onLoadedMetadata`
+			// already implements — one resume path in this component, not two.
+			//
+			// load() and nothing else: per spec it unconditionally re-runs the
+			// media load algorithm. Re-assigning `src` first (the obvious
+			// alternative) starts a SECOND load that aborts the first, which
+			// surfaces as a spurious MEDIA_ERR_ABORTED.
+			video.load();
+		}, delayMs);
+	}, []);
+
+	/** A frame decoded — whatever went wrong is over. Success, not elapsed time,
+	 *  is what re-arms the retry budget, and it is the only signal the caller has
+	 *  that a failure it is showing can be dropped. */
+	const markSourceHealthy = useCallback(() => {
+		recoveringRef.current = false;
+		retryRef.current.attempts = 0;
+		const id = activeSourceRef.current?.id;
+		if (id) onVideoRecovered?.(id);
+	}, [onVideoRecovered]);
+
+	// Reload bookkeeping belongs to the MOUNTED element: the <video> is keyed on
+	// the asset id, so a source swap replaces it, and a reload scheduled for the
+	// old one must never fire against its replacement. React runs this cleanup
+	// before any queued macrotask can.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: re-run on source swap
+	useEffect(() => {
+		retryRef.current = { attempts: 0, timer: null };
+		recoveringRef.current = false;
+		return () => {
+			if (retryRef.current.timer !== null) {
+				window.clearTimeout(retryRef.current.timer);
+				retryRef.current.timer = null;
+			}
+		};
+	}, [activeSourceKey]);
+
+	// The caller's Retry button. Same path as an automatic reload so the two
+	// cannot drift, but with a fresh budget and no delay: the user clicked
+	// because they know something changed.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: the token bump IS the request
+	useEffect(() => {
+		if (!retryToken) return;
+		retryRef.current.attempts = 0;
+		reloadActiveSource(false, 0);
+	}, [retryToken]);
+
 	// BUG corrigé : cet effet listait `seekToVirtualTime`/`seekToSourceTime` en dépendances
 	// — mais `seekToVirtualTime` change d'identité (nouveau `useCallback`) à chaque fois que
 	// `sourceIndex` change, y compris quand CE MÊME effet vient de le faire changer (switch
@@ -518,7 +656,10 @@ export function VirtualPreview({
 	}, [seekTarget]);
 
 	return (
-		<div className={styles.container}>
+		// The load state no longer paints anything here (Preview owns failure UI
+		// now), but it is still the honest read of what the decode clock is doing —
+		// worth one attribute for tests and for a screenshot in a bug report.
+		<div className={styles.container} data-load-state={loadState}>
 			{activeSource ? (
 				<>
 					<div ref={videoFrameRef} className={styles.videoFrame}>
@@ -542,6 +683,7 @@ export function VirtualPreview({
 							playsInline
 							onLoadedMetadata={(e) => {
 								setLoadState("ready");
+								markSourceHealthy();
 								// ponytail: forward the raw duration (possibly NaN for
 								// MediaRecorder WebMs) to the parent. handleLoadedMetadata
 								// falls back to a 60s seed when it isn't finite so the
@@ -576,19 +718,69 @@ export function VirtualPreview({
 								}
 							}}
 							onWaiting={() => setLoadState("loading")}
-							onCanPlay={() => setLoadState("ready")}
+							onCanPlay={() => {
+								setLoadState("ready");
+								markSourceHealthy();
+							}}
 							onError={(e) => {
+								const el = e.currentTarget;
+								const description = describeMediaError(el.error);
+								// An element whose source was torn out from under it reports a
+								// "load failure" that says nothing about the media (Chromium
+								// calls it "Empty src attribute"). Never act on that.
+								const hasSource = Boolean(el.getAttribute("src")) || Boolean(el.currentSrc);
+								const attemptsSpent = retryRef.current.attempts;
+								const disposition = hasSource
+									? mediaErrorDisposition(description.code, attemptsSpent)
+									: "ignore";
+								const detail = formatMediaError(description);
+								// The code is the whole diagnosis, and it used to be thrown
+								// away — which is why issue #395 could only ever be reported
+								// as "the preview disappeared". Keep it, whatever we decide.
+								const context = {
+									assetId: activeSource.id,
+									src: activeSource.src,
+									detail,
+									networkState: el.networkState,
+									readyState: el.readyState,
+									currentTime: el.currentTime,
+									attemptsSpent,
+									disposition,
+								};
+								if (disposition === "ignore") {
+									// Routine: every cross-asset clip boundary remounts this
+									// element mid-load. `debug`, not `warn` — this fires during
+									// ordinary playback and must not read as a problem.
+									console.debug(
+										"[preview] ignoring a <video> error from a cancelled load",
+										context,
+									);
+									return;
+								}
+								if (disposition === "retry") {
+									console.warn("[preview] <video> failed, reloading", context);
+									retryRef.current.attempts = attemptsSpent + 1;
+									// Deliberately no pause(): a 400 ms reload should be a blip
+									// the user never sees, and pausing here would flip the
+									// shell's transport for it. What keeps the rAF from
+									// steering the dead decoder in the meantime is
+									// `recoveringRef`, set by reloadActiveSource.
+									reloadActiveSource(!el.paused, retryDelayMs(attemptsSpent));
+									return;
+								}
 								// ponytail: don't blindly advance to the next source — if
 								// the failed source owns the current virtual clip, the
 								// next sourceIndex will seekToVirtualTime right back into
 								// the same failed asset, looping. Fail the preview.
+								console.error("[preview] <video> failed for good", context);
 								pendingSeekRef.current = null;
+								recoveringRef.current = false;
 								setLoadState("error");
 								// An 'error' doesn't itself fire 'pause', so make sure the shell's
 								// transport state (single source of truth, see NewEditorShell's
 								// own play/pause/ended listener) actually learns playback stopped.
-								e.currentTarget.pause();
-								onVideoError?.(activeSource.id);
+								el.pause();
+								onVideoError?.(activeSource.id, detail);
 							}}
 							onEnded={() => {
 								// BUG corrigé : ce handler stoppait TOUJOURS la lecture dès que le
@@ -626,14 +818,14 @@ export function VirtualPreview({
 							// handles clip-end advancement, so dropping the event
 							// handler here is safe.
 						/>
-						{/* Plus d'overlay « Loading preview… » : il reflétait l'état du <video>
-						    CACHÉ (source horloge/audio), pas la preview RÉELLE — le canvas natif,
-						    qui montre déjà une image valide pendant que le <video> re-seek. Il
-						    recouvrait donc une bonne image à chaque scrub, pour rien. On garde
-						    seulement l'erreur, qui, elle, signale un vrai échec de chargement. */}
-						{loadState === "error" && (
-							<div className={styles.overlay}>Video preview could not be loaded.</div>
-						)}
+						{/* Plus d'overlay ici du tout. « Loading preview… » reflétait l'état du
+						    <video> CACHÉ (source horloge/audio), pas la preview RÉELLE — le canvas
+						    natif, qui montre déjà une image valide pendant que le <video> re-seek.
+						    L'overlay d'erreur, lui, est parti chez Preview (#395) : il vivait dans
+						    .videoFrame, sur lequel l'effet de zoom écrit `style.transform`, donc à
+						    3× il partait hors cadre ; il n'était pas traduit ; et surtout il ne
+						    proposait rien — l'échec est désormais une carte avec un bouton
+						    Réessayer, rendue au-dessus de la dernière image composée. */}
 					</div>
 					{/* The native D3D canvas already draws the recorded-cursor sprite as part
 					    of the composited frame (same cursor sidecar file, single source of
diff --git a/src/components/ai-edition/mediaError.test.ts b/src/components/ai-edition/mediaError.test.ts
new file mode 100644
index 000000000..5a3a433a1
--- /dev/null
+++ b/src/components/ai-edition/mediaError.test.ts
@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import {
+	describeMediaError,
+	formatMediaError,
+	mediaErrorDisposition,
+	RETRY_DELAYS_MS,
+	retryDelayMs,
+} from "./mediaError";
+
+describe("describeMediaError", () => {
+	it("names a known code", () => {
+		expect(describeMediaError({ code: 3, message: "PIPELINE_ERROR_DECODE" })).toEqual({
+			code: 3,
+			name: "MEDIA_ERR_DECODE",
+			message: "PIPELINE_ERROR_DECODE",
+		});
+	});
+
+	// An `error` event can arrive with no MediaError attached; the caller still has to
+	// decide something, so this must not throw or produce `undefined` fields.
+	it("survives a missing error object", () => {
+		expect(describeMediaError(null)).toEqual({
+			code: null,
+			name: "MEDIA_ERR_UNKNOWN",
+			message: "",
+		});
+		expect(describeMediaError({ code: 99 }).name).toBe("MEDIA_ERR_UNKNOWN");
+	});
+
+	it("formats a line a bug report can carry", () => {
+		expect(formatMediaError(describeMediaError({ code: 2, message: "boom" }))).toBe(
+			"MEDIA_ERR_NETWORK (2) — boom",
+		);
+		expect(formatMediaError(describeMediaError({ code: 2 }))).toBe("MEDIA_ERR_NETWORK (2)");
+		expect(formatMediaError(describeMediaError(null))).toBe("MEDIA_ERR_UNKNOWN");
+	});
+});
+
+describe("mediaErrorDisposition", () => {
+	// THE regression (issue #395): a cancelled load is not a broken file. Every
+	// cross-asset clip boundary remounts the <video> and every reload calls load() on
+	// a possibly-loading element, so acting on code 1 — even just counting it — is what
+	// let a healthy editor talk itself into an error screen.
+	it("always ignores MEDIA_ERR_ABORTED, at any attempt count", () => {
+		for (const attempts of [0, 1, 2, 3, 99]) {
+			expect(mediaErrorDisposition(1, attempts)).toBe("ignore");
+		}
+	});
+
+	it("retries a decode or network failure, then gives up", () => {
+		for (const code of [2, 3]) {
+			expect(mediaErrorDisposition(code, 0)).toBe("retry");
+			expect(mediaErrorDisposition(code, 1)).toBe("retry");
+			expect(mediaErrorDisposition(code, 2)).toBe("fatal");
+		}
+	});
+
+	// A recording the capture process is still writing reports as "unsupported", so the
+	// code gets one look — but only one, because it is also what a genuinely unplayable
+	// file reports and re-reading that is pure latency.
+	it("gives an unsupported source exactly one retry", () => {
+		expect(mediaErrorDisposition(4, 0)).toBe("retry");
+		expect(mediaErrorDisposition(4, 1)).toBe("fatal");
+	});
+
+	it("treats an unknown failure as transient", () => {
+		expect(mediaErrorDisposition(null, 0)).toBe("retry");
+		expect(mediaErrorDisposition(null, RETRY_DELAYS_MS.length)).toBe("fatal");
+	});
+});
+
+describe("retryDelayMs", () => {
+	it("backs off, then holds at the last delay", () => {
+		expect(retryDelayMs(0)).toBe(RETRY_DELAYS_MS[0]);
+		expect(retryDelayMs(1)).toBe(RETRY_DELAYS_MS[1]);
+		expect(retryDelayMs(50)).toBe(RETRY_DELAYS_MS[RETRY_DELAYS_MS.length - 1]);
+	});
+});
diff --git a/src/components/ai-edition/mediaError.ts b/src/components/ai-edition/mediaError.ts
new file mode 100644
index 000000000..b626f7134
--- /dev/null
+++ b/src/components/ai-edition/mediaError.ts
@@ -0,0 +1,82 @@
+// What to do about an HTMLMediaElement `error` event in the preview.
+//
+// Split out of VirtualPreview's `onError` so the decision table is testable
+// without a DOM. The absence of that table is issue #395: ANY error event, of
+// any kind, was treated as "this asset is dead", and one such event collapsed
+// the whole preview to the "add a video to get started" empty state for the
+// rest of the session.
+//
+// MEDIA_ERR_ABORTED is the one we must never act on. It is what a *cancelled*
+// load looks like, and the preview cancels loads as a matter of course: the
+// <video> is keyed on `activeSource.id`, so every cross-asset clip boundary
+// remounts it mid-fetch, and our own reload calls load() on an element that may
+// still be loading. Counting those against a failure budget is how a healthy
+// editor talks itself into an error screen.
+
+export const MEDIA_ERROR_NAMES: Record<number, string> = {
+	1: "MEDIA_ERR_ABORTED",
+	2: "MEDIA_ERR_NETWORK",
+	3: "MEDIA_ERR_DECODE",
+	4: "MEDIA_ERR_SRC_NOT_SUPPORTED",
+};
+
+/** Delayed rather than immediate: the likeliest transient causes are a file the
+ *  capture process has not finished writing and a momentarily unreadable file
+ *  (an antivirus pass, a Windows share lock). An instant re-read sees the same
+ *  bytes and burns an attempt for nothing. */
+export const RETRY_DELAYS_MS = [400, 1200] as const;
+
+/** A recording that is still being written reports as "unsupported" too, so
+ *  code 4 gets one cheap look before we believe the browser that the file is
+ *  unusable. */
+export const UNSUPPORTED_RETRY_BUDGET = 1;
+
+export interface MediaErrorDescription {
+	code: number | null;
+	name: string;
+	message: string;
+}
+
+/** Typed structurally rather than as `MediaError` so this module carries no DOM
+ *  dependency and its test can run in the default node environment. */
+export function describeMediaError(
+	error: { readonly code?: number; readonly message?: string } | null | undefined,
+): MediaErrorDescription {
+	const code = typeof error?.code === "number" ? error.code : null;
+	return {
+		code,
+		name: (code !== null ? MEDIA_ERROR_NAMES[code] : undefined) ?? "MEDIA_ERR_UNKNOWN",
+		message: error?.message ?? "",
+	};
+}
+
+/** One line for the console and for the error card — the code is what makes a
+ *  user's bug report actionable, since we cannot reproduce their decoder. */
+export function formatMediaError(description: MediaErrorDescription): string {
+	const label =
+		description.code === null ? description.name : `${description.name} (${description.code})`;
+	return description.message ? `${label} — ${description.message}` : label;
+}
+
+export type MediaErrorDisposition = "ignore" | "retry" | "fatal";
+
+/**
+ * `attemptsSpent` is reset by a successful load, not by elapsed time: success is
+ * the only honest evidence that the source recovered. A budget that only ever
+ * counts up is issue #395 again with a longer fuse.
+ *
+ * A null code (an error event carrying no MediaError) rides the full budget —
+ * we know nothing, so we try.
+ */
+export function mediaErrorDisposition(
+	code: number | null,
+	attemptsSpent: number,
+): MediaErrorDisposition {
+	if (code === 1) return "ignore";
+	const budget = code === 4 ? UNSUPPORTED_RETRY_BUDGET : RETRY_DELAYS_MS.length;
+	return attemptsSpent < budget ? "retry" : "fatal";
+}
+
+export function retryDelayMs(attemptsSpent: number): number {
+	return RETRY_DELAYS_MS[Math.min(attemptsSpent, RETRY_DELAYS_MS.length - 1)];
+}
diff --git a/src/i18n/locales/ar/editor.json b/src/i18n/locales/ar/editor.json
index b472ea7dc..204034acd 100644
--- a/src/i18n/locales/ar/editor.json
+++ b/src/i18n/locales/ar/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "معاينة الفيديو",
-		"webcamPreview": "معاينة كاميرا الويب (اسحب لتغيير الموضع)"
+		"webcamPreview": "معاينة كاميرا الويب (اسحب لتغيير الموضع)",
+		"mediaError": {
+			"title": "توقّفت المعاينة",
+			"description": "تعذّر فك ترميز الفيديو. ربما نُقل الملف أو ما زال قيد الكتابة — مشروعك نفسه سليم.",
+			"retry": "إعادة المحاولة",
+			"detail": "التفاصيل: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "تعليق توضيحي",
diff --git a/src/i18n/locales/en/editor.json b/src/i18n/locales/en/editor.json
index 10d8ef618..f1a336bb0 100644
--- a/src/i18n/locales/en/editor.json
+++ b/src/i18n/locales/en/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Video preview",
-		"webcamPreview": "Webcam preview (drag to reposition)"
+		"webcamPreview": "Webcam preview (drag to reposition)",
+		"mediaError": {
+			"title": "Preview stopped",
+			"description": "The video couldn't be decoded. The file may have been moved, or it may still be finishing writing — your project itself is intact.",
+			"retry": "Try again",
+			"detail": "Details: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Annotation",
diff --git a/src/i18n/locales/es/editor.json b/src/i18n/locales/es/editor.json
index 1b8dadafd..0160fa679 100644
--- a/src/i18n/locales/es/editor.json
+++ b/src/i18n/locales/es/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Vista previa del vídeo",
-		"webcamPreview": "Vista previa de la webcam (arrastra para reubicar)"
+		"webcamPreview": "Vista previa de la webcam (arrastra para reubicar)",
+		"mediaError": {
+			"title": "Vista previa detenida",
+			"description": "No se pudo decodificar el vídeo. Puede que el archivo se haya movido o que aún se esté terminando de escribir; tu proyecto está intacto.",
+			"retry": "Reintentar",
+			"detail": "Detalles: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Anotación",
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
index 333298dd7..60b065428 100644
--- a/src/i18n/locales/fr/editor.json
+++ b/src/i18n/locales/fr/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Aperçu vidéo",
-		"webcamPreview": "Aperçu webcam (glisser pour repositionner)"
+		"webcamPreview": "Aperçu webcam (glisser pour repositionner)",
+		"mediaError": {
+			"title": "Aperçu interrompu",
+			"description": "La vidéo n'a pas pu être décodée. Le fichier a peut-être été déplacé, ou son écriture n'est pas terminée — votre projet, lui, est intact.",
+			"retry": "Réessayer",
+			"detail": "Détails : {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Annotation",
diff --git a/src/i18n/locales/it/editor.json b/src/i18n/locales/it/editor.json
index 0d4df5c7f..cf5a2b644 100644
--- a/src/i18n/locales/it/editor.json
+++ b/src/i18n/locales/it/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Anteprima video",
-		"webcamPreview": "Anteprima webcam (trascina per riposizionare)"
+		"webcamPreview": "Anteprima webcam (trascina per riposizionare)",
+		"mediaError": {
+			"title": "Anteprima interrotta",
+			"description": "Non è stato possibile decodificare il video. Il file potrebbe essere stato spostato o essere ancora in fase di scrittura: il progetto è intatto.",
+			"retry": "Riprova",
+			"detail": "Dettagli: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Annotazione",
diff --git a/src/i18n/locales/ja-JP/editor.json b/src/i18n/locales/ja-JP/editor.json
index 3b48038c1..46ef5164a 100644
--- a/src/i18n/locales/ja-JP/editor.json
+++ b/src/i18n/locales/ja-JP/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "動画プレビュー",
-		"webcamPreview": "ウェブカメラのプレビュー（ドラッグで位置変更）"
+		"webcamPreview": "ウェブカメラのプレビュー（ドラッグで位置変更）",
+		"mediaError": {
+			"title": "プレビューを停止しました",
+			"description": "動画をデコードできませんでした。ファイルが移動されたか、まだ書き込み中の可能性があります。プロジェクト自体は損なわれていません。",
+			"retry": "再試行",
+			"detail": "詳細: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "注釈",
diff --git a/src/i18n/locales/ko-KR/editor.json b/src/i18n/locales/ko-KR/editor.json
index dabd14757..32e5af668 100644
--- a/src/i18n/locales/ko-KR/editor.json
+++ b/src/i18n/locales/ko-KR/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "영상 미리보기",
-		"webcamPreview": "웹캠 미리보기 (끌어서 위치 변경)"
+		"webcamPreview": "웹캠 미리보기 (끌어서 위치 변경)",
+		"mediaError": {
+			"title": "미리보기가 중단되었습니다",
+			"description": "영상을 디코딩할 수 없습니다. 파일이 이동되었거나 아직 저장이 끝나지 않았을 수 있습니다. 프로젝트 자체는 그대로입니다.",
+			"retry": "다시 시도",
+			"detail": "세부 정보: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "주석",
diff --git a/src/i18n/locales/pt-BR/editor.json b/src/i18n/locales/pt-BR/editor.json
index d65fd23d2..c8321be40 100644
--- a/src/i18n/locales/pt-BR/editor.json
+++ b/src/i18n/locales/pt-BR/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Pré-visualização do vídeo",
-		"webcamPreview": "Pré-visualização da webcam (arraste para reposicionar)"
+		"webcamPreview": "Pré-visualização da webcam (arraste para reposicionar)",
+		"mediaError": {
+			"title": "Pré-visualização interrompida",
+			"description": "Não foi possível decodificar o vídeo. O arquivo pode ter sido movido ou ainda estar sendo gravado — seu projeto continua intacto.",
+			"retry": "Tentar novamente",
+			"detail": "Detalhes: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Anotação",
diff --git a/src/i18n/locales/ru/editor.json b/src/i18n/locales/ru/editor.json
index 11eeda92b..c5337daee 100644
--- a/src/i18n/locales/ru/editor.json
+++ b/src/i18n/locales/ru/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Предпросмотр видео",
-		"webcamPreview": "Предпросмотр камеры (перетащите, чтобы переместить)"
+		"webcamPreview": "Предпросмотр камеры (перетащите, чтобы переместить)",
+		"mediaError": {
+			"title": "Предпросмотр остановлен",
+			"description": "Не удалось декодировать видео. Возможно, файл был перемещён или ещё дописывается — сам проект не пострадал.",
+			"retry": "Повторить",
+			"detail": "Подробности: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Аннотация",
diff --git a/src/i18n/locales/tr/editor.json b/src/i18n/locales/tr/editor.json
index b0a42ca3b..545f22ba2 100644
--- a/src/i18n/locales/tr/editor.json
+++ b/src/i18n/locales/tr/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Video önizlemesi",
-		"webcamPreview": "Web kamerası önizlemesi (taşımak için sürükleyin)"
+		"webcamPreview": "Web kamerası önizlemesi (taşımak için sürükleyin)",
+		"mediaError": {
+			"title": "Önizleme durdu",
+			"description": "Video çözümlenemedi. Dosya taşınmış ya da hâlâ yazılıyor olabilir — projeniz olduğu gibi duruyor.",
+			"retry": "Yeniden dene",
+			"detail": "Ayrıntılar: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Açıklama",
diff --git a/src/i18n/locales/vi/editor.json b/src/i18n/locales/vi/editor.json
index 2e61a7c40..bed9ceebf 100644
--- a/src/i18n/locales/vi/editor.json
+++ b/src/i18n/locales/vi/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "Xem trước video",
-		"webcamPreview": "Xem trước webcam (kéo để đổi vị trí)"
+		"webcamPreview": "Xem trước webcam (kéo để đổi vị trí)",
+		"mediaError": {
+			"title": "Xem trước đã dừng",
+			"description": "Không thể giải mã video. Tệp có thể đã bị di chuyển hoặc vẫn đang được ghi xong — dự án của bạn vẫn nguyên vẹn.",
+			"retry": "Thử lại",
+			"detail": "Chi tiết: {{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "Chú thích",
diff --git a/src/i18n/locales/zh-CN/editor.json b/src/i18n/locales/zh-CN/editor.json
index 2e52b942e..666ad7f80 100644
--- a/src/i18n/locales/zh-CN/editor.json
+++ b/src/i18n/locales/zh-CN/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "视频预览",
-		"webcamPreview": "摄像头预览（拖动可重新定位）"
+		"webcamPreview": "摄像头预览（拖动可重新定位）",
+		"mediaError": {
+			"title": "预览已停止",
+			"description": "无法解码该视频。文件可能已被移动，或仍在写入中——你的项目本身完好无损。",
+			"retry": "重试",
+			"detail": "详细信息：{{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "批注",
diff --git a/src/i18n/locales/zh-TW/editor.json b/src/i18n/locales/zh-TW/editor.json
index 032bb91e5..931326526 100644
--- a/src/i18n/locales/zh-TW/editor.json
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -363,7 +363,13 @@
 	},
 	"preview": {
 		"videoPreview": "影片預覽",
-		"webcamPreview": "攝影機預覽（拖曳可重新定位）"
+		"webcamPreview": "攝影機預覽（拖曳可重新定位）",
+		"mediaError": {
+			"title": "預覽已停止",
+			"description": "無法解碼此影片。檔案可能已被移動，或仍在寫入中——你的專案本身完好無缺。",
+			"retry": "重試",
+			"detail": "詳細資訊：{{detail}}"
+		}
 	},
 	"annotationOverlay": {
 		"imageAlt": "註解",
diff --git a/technical-documentation/architecture/preview.md b/technical-documentation/architecture/preview.md
index 666207c52..d30bc0002 100644
--- a/technical-documentation/architecture/preview.md
+++ b/technical-documentation/architecture/preview.md
@@ -237,6 +237,54 @@ the decoder swap, awaits `setActiveClip`, and re-reads the live transport *now*
 (not from a captured `isPlaying`) before resuming — so a user pause that lands
 in the middle of a clip transition is honoured, not silently undone.
 
+## When the decode clock fails
+
+The hidden `<video>` is a clock and an audio source, not the picture — the
+pixels come from the native canvas. So its failing is not the preview failing,
+and the invariant since [#395](https://github.com/getopenscreen/openscreen/issues/395)
+is: **a media error can never render `EditorEmptyState`**. That component now
+answers exactly one question — is there anything in this project to show? — and
+`Preview.tsx`'s render condition (`hasProject && hasAsset && previewSources.length > 0`)
+takes no failure input at all.
+
+What replaced it, in two layers:
+
+- **Classify, then reload**
+  ([`mediaError.ts`](../../src/components/ai-edition/mediaError.ts), applied in
+  `VirtualPreview`'s `onError`). `MEDIA_ERR_ABORTED` is ignored outright and
+  never counted: the `<video>` is keyed on `activeSource.id`, so every
+  cross-asset clip boundary remounts it mid-load and Chromium reports exactly
+  that. `MEDIA_ERR_SRC_NOT_SUPPORTED` gets one retry (a recording the capture
+  process is still writing reports as unsupported); everything else — including
+  an `error` event carrying no `MediaError` — rides `RETRY_DELAYS_MS`. The
+  reload is a plain `load()`: re-assigning `src` first would start a second load
+  that aborts the first and emit a spurious abort. The budget is reset by a
+  **successful** load, not by elapsed time — without that, the fourth transient
+  failure of a long session is terminal, which is #395 with a longer fuse.
+- **Resume through the existing path.** The reload queues `pendingSeekRef` and
+  lets `onLoadedMetadata` restore position and playback — the same path a
+  cross-asset seek uses, so the component has one resume path rather than two.
+  The position is resolved **at reload time**, not when the error fired, because
+  the user can scrub during the backoff: it comes from `locateVirtualPosition`
+  against the live playhead, guarded by an `assetId` check (that function
+  answers for whatever clip the playhead is on, which after a boundary advance
+  can belong to a different asset), and falls back to a source time sampled
+  while the decoder was known good. `video.currentTime` is *not* usable here —
+  it reads 0 after `load()`.
+
+While a reload is in flight the rAF tick returns early (`recoveringRef`),
+publishing the clock but taking no decision. This cannot ride on the `v.paused`
+gate the rest of the tick uses: an `error` does not fire `pause`, so a failure
+during playback leaves `paused` false, and the tick would go on making
+trim/boundary decisions against a frozen clock and clobber the queued resume.
+
+Only once the budget is spent does `Preview` hear about it, and it renders
+`PreviewErrorCard` **over** the still-mounted canvas — the last composed frame
+stays visible, which is the evidence the project is intact. The card carries the
+`MediaError` code, because a user's report is otherwise unactionable: the reason
+#395 could only ever be described as "the preview disappeared" is that the code
+was thrown away.
+
 ## Known gaps
 
 - **Live preview is video-only.** `crates/compositor/src/live.rs` (1628 lines) handles only

From c27a3608ab300da5fa3250f67309c0cd63c6fc0d Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 17:21:51 +0200
Subject: [PATCH 02/10] fix(preview): re-arm the retry budget on progress, not
 on a reload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review of the previous commit found it had traded the latch for a
livelock. `markSourceHealthy` reset the budget on `loadedmetadata`, but
that event means the container header parsed — not that the bytes that
killed the decoder are readable. A truncated recording (intact header,
unreadable data: the exact case the error card exists for) re-fires it on
every reload, so the budget came back faster than failures could spend
it. Steady state was a load() every 400 ms, forever, with onVideoError
never called and the card never shown.

Progress past the failure point is the only honest evidence a reload
worked, and the rAF tick — which already samples position where the
decoder is known good — is where it is observed. `loadedmetadata` and
`canplay` now only clear the in-flight flag and tell Preview a displayed
card can go.

Also from the review:

- The card was illegible in the default theme. Light is the default
  (useTheme.ts) and there --fg-2 is #334155, near-black on the near-black
  scrim; the rgba() fallbacks written next to each var() never applied,
  because --muted-foreground is always defined. The scrim is dark in both
  themes, so it now pins its own foregrounds.
- Preview dropped the failure whenever the source list changed shape.
  Importing a replacement — which is what the card suggests — grows that
  list without touching the dead <video>: nothing remounts it and nothing
  re-fires `error`, so the card and its Retry button vanished from a
  stage that was still frozen. It now clears only when the failed asset
  itself leaves the timeline.
- A seek during the load window was silently discarded: assigning
  currentTime before metadata only sets the default playback position,
  and the queued resume then overwrote it. It re-aims the pending seek.

Tests: a scrub during the backoff (the previous "comes back at the
playhead" passed with the resume resolved at error time), the reload loop
above, and the unmount case now asserts the timer was cancelled rather
than that a null videoRef swallowed it. All four were confirmed by
mutation — each fails against the code it is written to protect.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ai-edition/NewEditorShell.module.css      | 4552 +++++++++--------
 src/components/ai-edition/Preview.test.tsx    |   24 +-
 src/components/ai-edition/Preview.tsx         |   24 +-
 .../VirtualPreview.mediaError.test.tsx        |   72 +-
 src/components/ai-edition/VirtualPreview.tsx  |   56 +-
 src/i18n/locales/vi/editor.json               |    2 +-
 .../architecture/preview.md                   |   12 +-
 7 files changed, 2444 insertions(+), 2298 deletions(-)

diff --git a/src/components/ai-edition/NewEditorShell.module.css b/src/components/ai-edition/NewEditorShell.module.css
index bebed2d50..19928dbe0 100644
--- a/src/components/ai-edition/NewEditorShell.module.css
+++ b/src/components/ai-edition/NewEditorShell.module.css
@@ -1,2272 +1,2280 @@
-/* Editor shell — 4-row grid: titlebar · workbench · handle · bottombar.
- * Mirrors design/openscreen-editor.html. Tokens come from
- * src/styles/design-tokens.css (light + dark via :root[data-theme="dark"]). */
-
-.app {
-	display: grid;
-	grid-template-rows: var(--titlebar-h) 1fr var(--handle-h) var(--bottom-h);
-	height: 100vh;
-	min-width: 1024px;
-	background: var(--bg);
-	color: var(--fg);
-	font-family: var(--font-body);
-	font-size: var(--fs-app);
-	line-height: 1.5;
-	overflow: hidden;
-	user-select: none;
-}
-
-.app[data-collapse~="left"] {
-	--panel-w-left: 0px;
-}
-.app[data-collapse~="left"] .leftRail,
-.app[data-collapse~="left"] .leftPanel,
-.app[data-collapse~="left"] .handleLeft {
-	display: none;
-}
-
-.app[data-collapse~="right"] {
-	--panel-w-right: 0px;
-}
-.app[data-collapse~="right"] .rightStack,
-.app[data-collapse~="right"] .rightRail,
-.app[data-collapse~="right"] .handleRight {
-	display: none;
-}
-
-.app[data-collapse~="bottom"] {
-	--bottom-h: 0px;
-}
-.app[data-collapse~="bottom"] .bottombar {
-	display: none;
-}
-.app[data-collapse~="bottom"] .handleBottom {
-	display: none;
-}
-
-/* ─── titlebar ──────────────────────────────────────────────────── */
-.titlebar {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-3);
-	padding-inline: var(--sp-4);
-	background: var(--bg);
-	border-bottom: 1px solid var(--border-soft);
-	min-width: 0;
-	/* ponytail: make the titlebar the drag region in Electron. The buttons
-	 * opt out via inline -webkit-app-region: no-drag (see Titlebar.tsx). */
-	-webkit-app-region: drag;
-	app-region: drag;
-}
-.titlebar button,
-.titlebar input,
-.titlebar select,
-.titlebar textarea,
-.titlebar .langSel,
-.titlebar .recorderBtn {
-	-webkit-app-region: no-drag;
-	app-region: no-drag;
-}
-.titlebar .lights {
-	display: inline-flex;
-	gap: 6px;
-	margin-right: var(--sp-3);
-}
-.titlebar .lights span {
-	width: 11px;
-	height: 11px;
-	border-radius: 50%;
-	border: 1px solid var(--overlay-border);
-}
-.titlebar .lights .r { background: var(--light-red); }
-.titlebar .lights .y { background: var(--light-yellow); }
-.titlebar .lights .g { background: var(--light-green); }
-
-.titlebar .brand {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	font-family: var(--font-display);
-	font-size: var(--fs-title);
-	font-weight: 500;
-	letter-spacing: -0.005em;
-	color: var(--fg);
-}
-.titlebar .brandMark {
-	width: 18px;
-	height: 18px;
-	border-radius: 5px;
-	background: var(--accent);
-	display: grid;
-	place-items: center;
-	color: var(--accent-on);
-	font: 600 11px/1 var(--font-display);
-}
-.titlebar .sep {
-	width: 1px;
-	height: 16px;
-	background: var(--border);
-}
-.titlebar .project {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-2);
-	font-size: var(--fs-app);
-	color: var(--muted);
-	min-width: 0;
-}
-.titlebar .projectName {
-	color: var(--fg-2);
-	font-weight: 500;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	max-width: 280px;
-	background: transparent;
-	border: 0;
-	padding: 2px 6px;
-	border-radius: var(--r-sm);
-	cursor: text;
-	font: inherit;
-	-webkit-app-region: no-drag;
-	app-region: no-drag;
-}
-.titlebar .projectName:hover:not(:disabled) {
-	background: var(--surface-3);
-}
-.titlebar .projectInput {
-	background: var(--surface);
-	color: var(--fg);
-	border: 1px solid var(--accent);
-	border-radius: var(--r-sm);
-	padding: 2px 6px;
-	font: 500 13px var(--font-body);
-	outline: none;
-	min-width: 200px;
-	max-width: 360px;
-	-webkit-app-region: no-drag;
-	app-region: no-drag;
-}
-.titlebar .saved {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-family: var(--font-mono);
-	font-size: var(--fs-app-sm);
-	color: var(--muted);
-}
-.titlebar .saved .dot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--success);
-}
-.titlebar .projActions {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-1);
-	margin-right: var(--sp-1);
-}
-.titlebar .right {
-	margin-left: auto;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-1);
-}
-.titlebar .iconBtn {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--muted);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.titlebar .iconBtn:hover {
-	background: var(--surface-3);
-	color: var(--fg);
-}
-.titlebar .iconBtn[aria-pressed="true"] {
-	background: var(--accent-soft);
-	color: var(--accent);
-}
-.titlebar .langSel {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	height: 26px;
-	padding: 0 6px;
-	background: transparent;
-	border: 1px solid var(--border-soft);
-	border-radius: var(--r-md);
-	color: var(--fg-2);
-	font: 500 var(--fs-app)/1 var(--font-display);
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.titlebar .langSel:hover {
-	background: var(--surface-3);
-	border-color: var(--border);
-	color: var(--fg);
-}
-.titlebar .recorderBtn {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	height: 26px;
-	padding: 0 10px 0 8px;
-	border-radius: var(--r-md);
-	background: var(--accent-soft);
-	color: var(--accent);
-	border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-	font: 500 var(--fs-app-sm)/1 var(--font-display);
-	letter-spacing: 0.01em;
-	cursor: pointer;
-}
-.titlebar .recorderBtn:hover {
-	background: color-mix(in oklch, var(--accent) 18%, var(--surface-3));
-}
-
-/* ─── workbench — 7 columns: rail · panel · handle · preview · handle · stack · rail */
-.workbench {
-	display: grid;
-	grid-template-columns:
-		var(--rail-w)
-		var(--panel-w-left)
-		var(--handle-w)
-		1fr
-		var(--handle-w)
-		var(--panel-w-right)
-		var(--rail-w);
-	min-height: 0;
-	background: var(--bg);
-	overflow: hidden;
-}
-.workbench > * {
-	min-height: 0;
-}
-.workbench > * + * {
-	border-left: 1px solid var(--border-soft);
-}
-
-.leftPanel {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	min-height: 0;
-}
-
-/* ─── rails — vertical icon strips ─────────────────────────────── */
-.rail {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-1);
-	padding: var(--sp-2) 0;
-	background: var(--bg);
-	min-width: 0;
-}
-.rail button {
-	width: 36px;
-	height: 36px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-md);
-	color: var(--muted);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-	position: relative;
-}
-.rail button:hover {
-	background: var(--surface-3);
-	color: var(--fg);
-}
-.rail button[aria-pressed="true"] {
-	color: var(--accent);
-	background: var(--accent-soft);
-}
-.rail button[aria-pressed="true"]::before {
-	content: "";
-	position: absolute;
-	left: -8px;
-	top: 8px;
-	bottom: 8px;
-	width: 3px;
-	border-radius: 2px;
-	background: var(--accent);
-}
-.rail .sepH {
-	width: 24px;
-	height: 1px;
-	background: var(--border);
-	margin: var(--sp-1) 0;
-}
-
-/* ─── panels (chat, transcript, etc.) ──────────────────────────── */
-.panel {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 0;
-	min-width: 0;
-	min-height: 0;
-	background: var(--bg);
-	overflow: hidden;
-}
-
-/* Direct children of .panel: panelHeader (auto), panelBody (1fr), chatInput (auto). */
-.panel > .panelHeader,
-.panel > .chatInput {
-	flex: 0 0 auto;
-}
-.panel > .panelBody {
-	flex: 1 1 0;
-}
-.panelHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: var(--sp-3) var(--sp-4);
-	border-bottom: 1px solid var(--border-soft);
-	min-height: 44px;
-}
-.panelHead h2 {
-	margin: 0;
-	font-family: var(--font-display);
-	font-size: 14px;
-	font-weight: 500;
-	letter-spacing: -0.005em;
-	color: var(--fg);
-}
-.panelHead .right {
-	margin-left: auto;
-	display: inline-flex;
-	gap: var(--sp-1);
-}
-.panelHead .iconBtn {
-	width: 24px;
-	height: 24px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--meta);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.panelHead .iconBtn:hover {
-	background: var(--surface-3);
-	color: var(--fg-2);
-}
-.panelBody {
-	overflow-y: auto;
-	padding: var(--sp-3) var(--sp-4);
-	scrollbar-width: thin;
-	scrollbar-color: var(--border) transparent;
-	min-height: 0;
-}
-.panelBody::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-.panelBody::-webkit-scrollbar-thumb {
-	background: var(--border);
-	border-radius: 4px;
-}
-.panelBody::-webkit-scrollbar-thumb:hover {
-	background: var(--border-hi);
-}
-
-/* ─── resize handles ───────────────────────────────────────────── */
-.handle {
-	background: transparent;
-	position: relative;
-	z-index: 2;
-	transition: background var(--motion-fast) var(--ease);
-	cursor: col-resize;
-}
-.handleRow {
-	cursor: row-resize;
-	grid-column: 1 / -1;
-	border-bottom: 1px solid var(--border);
-}
-.handle:hover,
-.handle.isDragging {
-	background: var(--surface-2);
-}
-.handle::before,
-.handle::after {
-	content: "";
-	position: absolute;
-	background: var(--dim);
-	border-radius: 1px;
-	opacity: 0.45;
-	transition: opacity var(--motion-fast) var(--ease);
-	pointer-events: none;
-}
-.handleCol::before,
-.handleCol::after {
-	left: 50%;
-	width: 1px;
-	height: 14px;
-	transform: translateX(-50%);
-}
-.handleCol::before { top: calc(50% - 16px); }
-.handleCol::after  { top: calc(50% + 2px); }
-.handleRow::before,
-.handleRow::after {
-	top: 50%;
-	height: 1px;
-	width: 14px;
-	transform: translateY(-50%);
-}
-.handleRow::before { left: calc(50% - 16px); }
-.handleRow::after  { left: calc(50% + 2px); }
-.handle:hover::before,
-.handle:hover::after,
-.handle.isDragging::before,
-.handle.isDragging::after {
-	opacity: 1;
-}
-.handle.isDragging {
-	background: var(--accent-soft);
-}
-
-/* ─── preview area ─────────────────────────────────────────────── */
-/* ponytail: the stage wrapper (in NewEditorShell.tsx) already provides the
-   padding that reserves room for the floating inspector, and .stage paints the
-   scene gradient. previewWrap is a single transparent, zero-padding centering
-   layer so the wallpaper card floats on that gradient — matching the design's
-   stage-wrap (one framed card, no surface slab, no double padding). It is also
-   the positioned ancestor for the timecode/badge overlays and the box the
-   frame measures for its contain-fit. */
-.previewWrap {
-	position: relative;
-	display: grid;
-	place-items: center;
-	width: 100%;
-	height: 100%;
-	min-width: 0;
-	min-height: 0;
-}
-.previewFrame {
-	position: relative;
-	aspect-ratio: 16 / 9;
-	max-width: 100%;
-	max-height: 100%;
-	width: 100%;
-	min-width: 0;
-	min-height: 0;
-	background:
-		radial-gradient(ellipse at 50% 35%,
-			var(--scene-sky-hi) 0%,
-			var(--scene-sky-mid) 35%,
-			var(--scene-foliage) 70%,
-			var(--scene-foliage-d) 100%);
-	/* ponytail: the wallpaper card is a floating, rounded surface (per the v4
-	   design's preview frame) — rounded corners + a layered drop shadow lift it
-	   off the scene gradient. The custom background (buildFrameStyle) fills this
-	   card; the video sits on top with its own padding so the wallpaper shows
-	   around it. */
-	border-radius: 16px;
-	box-shadow:
-		0 40px 90px -30px rgba(0, 0, 0, 0.75),
-		0 12px 28px -12px rgba(0, 0, 0, 0.5),
-		inset 0 0 0 1px rgba(255, 255, 255, 0.09);
-	overflow: hidden;
-	display: grid;
-	place-items: center;
-}
-.videoStage {
-	position: relative;
-	display: grid;
-	place-items: center;
-	min-width: 0;
-	min-height: 0;
-	overflow: visible;
-	z-index: 1;
-}
-.screenStage {
-	position: absolute;
-	overflow: hidden;
-	z-index: 1;
-	display: flex;
-}
-.screenStage > .container,
-.screenStage > div > .container {
-	width: 100%;
-	height: 100%;
-}
-.previewEmpty {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	color: var(--muted);
-	font-size: var(--fs-app);
-}
-.previewEmpty strong { color: var(--fg-2); }
-
-/* ─── preview empty state (no project / no asset) ───────────────── */
-.previewEmptyDrop {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.previewEmptyDropOverlay {
-	position: absolute;
-	inset: 0;
-	z-index: 10;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	border: 2px dashed var(--primary, #34B27B);
-	background: color-mix(in srgb, var(--primary, #34B27B) 10%, transparent);
-	border-radius: var(--r-sm);
-	pointer-events: none;
-}
-.previewEmptyDropIcon {
-	width: 40px;
-	height: 40px;
-	color: var(--primary, #34B27B);
-}
-.previewEmptyDropLabel {
-	font-size: var(--fs-app);
-	font-weight: 600;
-	color: var(--primary, #34B27B);
-}
-.previewEmptyInner {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-4);
-	padding: var(--sp-5);
-	text-align: center;
-	max-width: 28rem;
-}
-.previewEmptyLogo {
-	width: 64px;
-	height: 64px;
-	border-radius: var(--r-md);
-	opacity: 0.9;
-}
-.previewEmptyHeading {
-	display: flex;
-	flex-direction: column;
-	gap: var(--sp-1);
-}
-.previewEmptyTitle {
-	margin: 0;
-	font-size: 1.25rem;
-	font-weight: 600;
-	color: var(--fg-2);
-}
-.previewEmptyDescription {
-	margin: 0;
-	font-size: 0.875rem;
-	color: var(--muted);
-	line-height: 1.5;
-}
-.previewEmptyActions {
-	display: flex;
-	flex-direction: column;
-	gap: var(--sp-2);
-	width: 100%;
-	max-width: 18rem;
-}
-.previewEmptyPrimaryButton {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	padding: var(--sp-3) var(--sp-4);
-	border-radius: var(--r-sm);
-	background: var(--primary, #34B27B);
-	color: #fff;
-	border: none;
-	font-weight: 500;
-	font-size: 0.875rem;
-	cursor: pointer;
-	transition: background-color 120ms ease;
-}
-.previewEmptyPrimaryButton:hover {
-	filter: brightness(0.95);
-}
-.previewEmptySecondaryButton {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	padding: var(--sp-3) var(--sp-4);
-	border-radius: var(--r-sm);
-	background: var(--card);
-	color: var(--fg-2);
-	border: 1px solid var(--border);
-	font-weight: 500;
-	font-size: 0.875rem;
-	cursor: pointer;
-	transition: background-color 120ms ease;
-}
-.previewEmptySecondaryButton:hover {
-	background: var(--accent, rgba(255, 255, 255, 0.06));
-}
-.previewEmptyButtonIcon {
-	width: 16px;
-	height: 16px;
-}
-.previewEmptyHint {
-	margin: 0;
-	font-size: 0.75rem;
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.5));
-}
-.previewEmptyDragHint {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-1);
-	margin: 0;
-	font-size: 0.75rem;
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.4));
-}
-.previewEmptyDragHintIcon {
-	width: 12px;
-	height: 12px;
-}
-
-/* ─── preview media failure (PreviewErrorCard) ──────────────────── */
-/* Overlays the stage instead of replacing it: the native compositor is still
-   painting the last composed frame underneath, and leaving that frame visible is
-   what tells the user their project is fine (issue #395). Translucent, not
-   opaque, for the same reason. */
-.previewFailure {
-	position: absolute;
-	inset: 0;
-	z-index: 3;
-	display: grid;
-	place-items: center;
-	padding: var(--sp-4);
-	background: rgba(9, 9, 11, 0.72);
-	backdrop-filter: blur(2px);
-}
-.previewFailureCard {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-3);
-	max-width: min(38ch, 100%);
-	text-align: center;
-}
-.previewFailureIconRing {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	height: 40px;
-	border-radius: 999px;
-	background: rgba(255, 255, 255, 0.05);
-	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-}
-.previewFailureIcon {
-	width: 20px;
-	height: 20px;
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.6));
-}
-.previewFailureTitle {
-	margin: 0;
-	font-size: 1.05rem;
-	font-weight: 600;
-	color: var(--fg-2);
-}
-.previewFailureDescription {
-	margin: 0;
-	font-size: 0.875rem;
-	line-height: 1.5;
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.55));
-}
-/* Selectable: it exists to be copied into a bug report. */
-.previewFailureDetail {
-	margin: 0;
-	font-size: 0.6875rem;
-	font-family: var(--font-mono, ui-monospace, monospace);
-	color: var(--muted-foreground, rgba(255, 255, 255, 0.35));
-	user-select: text;
-	word-break: break-word;
-}
-.previewEmptyDialog {
-	max-width: 24rem;
-	padding: var(--sp-5);
-	background: var(--bg);
-	border: 1px solid var(--border);
-}
-.previewEmptyDialogHeader {
-	margin-bottom: var(--sp-3);
-}
-.previewEmptyDialogHeaderInner {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-}
-.previewEmptyDialogLogo {
-	width: 36px;
-	height: 36px;
-	border-radius: var(--r-sm);
-	flex-shrink: 0;
-}
-.previewEmptyDialogTitle {
-	font-size: 1rem;
-	font-weight: 600;
-	color: var(--fg-2);
-	line-height: 1.2;
-}
-.previewEmptyDialogBody {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--sp-2);
-	margin-bottom: var(--sp-4);
-	text-align: center;
-}
-.previewEmptyDialogIcon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 40px;
-	height: 40px;
-	border-radius: 9999px;
-	background: var(--card);
-	border: 1px solid var(--border);
-}
-.previewEmptyDialogAlertIcon {
-	width: 20px;
-	height: 20px;
-	color: var(--muted);
-}
-.previewEmptyDialogMessage {
-	margin: 0;
-	font-size: 0.875rem;
-	color: var(--muted);
-	line-height: 1.5;
-}
-.previewEmptyDialogClose {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-1);
-	width: 100%;
-	padding: var(--sp-2) var(--sp-3);
-	border-radius: var(--r-sm);
-	background: var(--card);
-	color: var(--fg-2);
-	border: 1px solid var(--border);
-	font-size: 0.875rem;
-	font-weight: 500;
-	cursor: pointer;
-}
-.previewEmptyDialogCloseIcon {
-	width: 14px;
-	height: 14px;
-}
-.previewPip {
-	position: absolute;
-	right: var(--sp-3);
-	bottom: var(--sp-3);
-	width: 120px;
-	aspect-ratio: 16 / 9;
-	border-radius: var(--r-sm);
-	background: linear-gradient(135deg, var(--pip-bg-1) 0%, var(--pip-bg-2) 50%, var(--pip-bg-3) 100%);
-	border: 2px solid var(--bg);
-	box-shadow: var(--elev-card);
-	overflow: hidden;
-	display: grid;
-	place-items: center;
-	color: var(--overlay-text);
-	font-family: var(--font-mono);
-	font-size: 9px;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-}
-.previewFrame > .screenStage video {
-	position: relative;
-	z-index: 1;
-	/* Pixels come from the native canvas now; this <video> stays mounted (and
-	   playing) purely as the decode/playback-clock/metadata source. A plain
-	   descendant selector (not a fixed child-depth chain) is required here:
-	   VirtualPreview nests the actual <video> THREE levels down
-	   (.screenStage > .container > .videoFrame > video), not one or two —
-	   the previous `>` chain silently never matched, leaving this video
-	   fully visible (and on top of the native canvas) the whole time. */
-	visibility: hidden;
-}
-.pipCircle {
-	border-radius: 9999px !important;
-}
-.pipSquare {
-	border-radius: 0 !important;
-}
-.pipRounded {
-	border-radius: 18px !important;
-}
-
-/* Webcam overlay: real <video> driven by the cameraTrack. The slot is
-   transparent so clip-path / border-radius carve the camera without leaving
-   a rectangular placeholder peeking through. */
-.webcamSlot {
-	background: transparent;
-	overflow: hidden;
-	z-index: 2;
-	display: flex;
-}
-.webcamSlot .webcamVideo {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	/* Native canvas already draws the composited webcam PiP; this <video> stays
-	   mounted (playing) only to drive the camera's own decode/sync clock. The
-	   slot div itself stays visible/clickable for the drag-to-reposition hitbox. */
-	visibility: hidden;
-	display: block;
-}
-/* ─── transport bar (lives inside .timelineHead, next to the tool icons) ─ */
-.transport {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex: 1;
-	min-width: 0;
-}
-.transport .tbtn {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--fg-2);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	flex-shrink: 0;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.transport .tbtn:hover {
-	background: var(--surface-3);
-	color: var(--fg);
-}
-.transport .tbtn.play {
-	width: 28px;
-	height: 28px;
-	background: var(--fg);
-	color: var(--bg);
-	border-radius: 50%;
-}
-.transport .tbtn.play:hover {
-	background: var(--fg-2);
-}
-.transport .time {
-	font-family: var(--font-mono);
-	font-size: var(--fs-app-sm);
-	color: var(--fg);
-	letter-spacing: 0.02em;
-	min-width: 96px;
-	text-align: center;
-	flex-shrink: 0;
-}
-.transport .time .sep { color: var(--meta); margin-inline: 4px; }
-.transport .time .total { color: var(--muted); }
-.transport .spacer { flex: 1; }
-
-/* ─── right panel-stack (one pane visible at a time) ──────────── */
-.rightStack {
-	grid-column: 6;
-	display: grid;
-	min-width: 0;
-	min-height: 0;
-	background: var(--bg);
-}
-.pane {
-	display: none;
-	grid-template-rows: auto 1fr;
-	min-height: 0;
-}
-.pane.isActive {
-	display: grid;
-}
-.paneHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: 12px var(--sp-4);
-	/* Every pane wearing this header is rendered inside FloatingInspector, which
-	   floats its "Collapse inspector" button (right: 12, 26px wide) over the
-	   header's right edge — landing squarely on whatever sits there and
-	   swallowing its clicks. The Help button was the casualty: visible on every
-	   facet, and unclickable. Reserve the floated button its own lane instead. */
-	padding-right: 46px;
-	border-bottom: 1px solid var(--border-soft);
-	min-height: 44px;
-}
-.paneHead h2 {
-	margin: 0;
-	font-family: var(--font-display);
-	font-size: 14px;
-	font-weight: 500;
-	letter-spacing: -0.005em;
-	color: var(--fg);
-}
-.paneBody {
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding: 12px var(--sp-4);
-	scrollbar-width: thin;
-	scrollbar-color: var(--border) transparent;
-	min-height: 0;
-}
-
-/* ─── pane tabs (sub-nav inside a pane) ───────────────────────── */
-.paneTabs {
-	display: flex;
-	gap: 2px;
-	padding: 3px;
-	margin: 12px var(--sp-4);
-	background: var(--surface-warm);
-	border-radius: 10px;
-}
-.paneTabs button {
-	flex: 1;
-	padding: 7px 10px;
-	border: 0;
-	background: transparent;
-	border-radius: 7px;
-	font: 500 var(--fs-app-sm)/1 var(--font-body);
-	color: var(--muted);
-	cursor: pointer;
-	transition: background 150ms ease, color 150ms ease;
-}
-.paneTabs button.isActive {
-	background: var(--brand);
-	color: var(--accent-on);
-	box-shadow: 0 1px 2px rgba(22, 23, 29, 0.12);
-}
-.paneSection { display: none; }
-.paneSection.isActive { display: block; }
-
-/* ─── pane rows (label + control) ─────────────────────────────── */
-.paneRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 12px 14px;
-	margin: 8px var(--sp-4);
-	border: 1px solid var(--border);
-	border-radius: 10px;
-	background: var(--bg);
-}
-.paneRow .label { font: 500 var(--fs-app) var(--font-body); color: var(--fg-2); }
-.paneRow .info  { color: var(--meta); font-size: var(--fs-app-sm); margin-left: 4px; }
-.sectionLabel {
-	font: 500 var(--fs-app-sm) var(--font-body);
-	color: var(--fg-2);
-	margin: 4px var(--sp-4) 8px;
-}
-.uploadBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	margin: 0 var(--sp-4) 12px;
-	padding: 12px;
-	border: 1px dashed var(--border);
-	border-radius: 10px;
-	background: var(--bg);
-	color: var(--muted);
-	font: 500 var(--fs-app-sm) var(--font-body);
-	cursor: pointer;
-}
-.uploadBtn:hover { border-color: var(--success); color: var(--success); }
-.field {
-	display: grid;
-	grid-template-columns: 80px 1fr;
-	align-items: center;
-	gap: 8px;
-	padding: 4px var(--sp-4);
-}
-.field label {
-	font: 500 var(--fs-app-sm) var(--font-body);
-	color: var(--muted);
-}
-.field select,
-.field input {
-	width: 100%;
-	padding: 6px 8px;
-	font: 400 var(--fs-app-sm) var(--font-body);
-	color: var(--fg-2);
-	background: var(--surface);
-	border: 1px solid var(--border);
-	border-radius: 6px;
-	outline: none;
-}
-.field select:focus,
-.field input:focus { border-color: var(--brand); }
-.field select:disabled,
-.field input:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── bg thumb grid ────────────────────────────────────────────── */
-.bgGrid {
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	gap: 8px;
-	padding: 0 var(--sp-4) var(--sp-4);
-}
-.bgThumb {
-	aspect-ratio: 1/1;
-	border-radius: 10px;
-	border: 1px solid transparent;
-	cursor: pointer;
-	transition: transform 150ms ease, border-color 150ms ease;
-	background: var(--surface-2);
-}
-.bgThumb:hover { transform: translateY(-1px); }
-.bgThumb.isActive {
-	border-color: var(--brand);
-	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 70%);
-}
-
-/* ─── toggle (switch) ──────────────────────────────────────────── */
-.toggle {
-	width: 36px;
-	height: 20px;
-	border: 0;
-	padding: 0;
-	background: var(--border-hi);
-	border-radius: 9999px;
-	position: relative;
-	cursor: pointer;
-	transition: background 150ms ease;
-	flex-shrink: 0;
-}
-.toggle::after {
-	content: "";
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	width: 16px;
-	height: 16px;
-	background: var(--accent-on);
-	border-radius: 50%;
-	box-shadow: 0 1px 3px rgba(22, 23, 29, 0.2);
-	transition: transform 150ms ease;
-}
-.toggle.isOn { background: var(--brand); }
-.toggle.isOn::after { transform: translateX(16px); }
-.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── slider cell (effect) ─────────────────────────────────────── */
-.sliderGrid {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: 8px;
-	padding: 0 var(--sp-4) var(--sp-4);
-}
-.sliderCell {
-	border: 1px solid var(--border);
-	border-radius: 10px;
-	background: var(--bg);
-	padding: 10px 12px;
-	display: grid;
-	grid-template-rows: auto auto;
-	gap: 8px;
-}
-.sliderCell .head { display: flex; align-items: center; gap: 6px; }
-.sliderCell .label { font: 500 11px var(--font-body); color: var(--fg-2); }
-.sliderCell .val { font: 500 11px var(--font-mono); color: var(--brand); margin-left: auto; }
-.sliderCell input[type=range] {
-	width: 100%;
-	height: 4px;
-	background: var(--border-hi);
-	border-radius: 2px;
-	outline: none;
-	-webkit-appearance: none;
-	cursor: pointer;
-}
-.sliderCell input[type=range]::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	background: var(--brand);
-	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
-	cursor: pointer;
-}
-.sliderCell input[type=range]::-moz-range-thumb {
-	width: 14px;
-	height: 14px;
-	border-radius: 50%;
-	background: var(--brand);
-	border: 0;
-	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
-	cursor: pointer;
-}
-.sliderCell.full { grid-column: 1 / -1; }
-.sliderCell input[type=range]:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── cursor style grid ────────────────────────────────────────── */
-.cursorGrid {
-	display: grid;
-	grid-template-columns: repeat(5, 1fr);
-	gap: 6px;
-	padding: 0 var(--sp-4) var(--sp-4);
-}
-.cursorCell {
-	aspect-ratio: 1/1;
-	border: 1px solid var(--border);
-	border-radius: 8px;
-	background: var(--bg);
-	display: grid;
-	place-items: center;
-	cursor: pointer;
-	transition: border-color 150ms ease, box-shadow 150ms ease;
-	color: var(--muted);
-}
-.cursorCell:hover { border-color: var(--border-hi); color: var(--fg-2); }
-.cursorCell:disabled { opacity: 0.5; cursor: not-allowed; }
-.cursorCell:disabled:hover { border-color: var(--border); color: var(--muted); }
-.cursorCell.isActive {
-	border-color: var(--brand);
-	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 75%);
-}
-
-/* ─── chat strip + input ───────────────────────────────────────── */
-.chatStrip {
-	padding: var(--sp-3) var(--sp-4) var(--sp-2);
-	border-bottom: 1px solid var(--border-soft);
-	background: var(--bg);
-}
-.chatStripRow {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	margin-bottom: 6px;
-}
-.ctxPill {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	padding: 3px 9px 3px 7px;
-	border-radius: var(--r-pill);
-	background: var(--success-soft);
-	color: var(--success);
-	font-family: var(--font-mono);
-	font-size: 10.5px;
-	font-weight: 500;
-	letter-spacing: 0.02em;
-}
-.ctxPill .d {
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background: var(--success);
-}
-.stripActions {
-	margin-left: auto;
-	display: inline-flex;
-	gap: 2px;
-}
-.stripActions button {
-	width: 24px;
-	height: 24px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--meta);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.stripActions button:hover {
-	background: var(--surface-3);
-	color: var(--fg-2);
-}
-.stripActions button:disabled {
-	opacity: 0.4;
-	cursor: not-allowed;
-}
-.chatHint {
-	font-size: var(--fs-app-sm);
-	color: var(--muted);
-	letter-spacing: 0.005em;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.msg { margin-bottom: var(--sp-3); }
-.msgHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: 0 var(--sp-1);
-	margin-bottom: var(--sp-1);
-}
-.msgAuthor {
-	font-family: var(--font-mono);
-	font-size: 10px;
-	letter-spacing: 0.08em;
-	color: var(--meta);
-	text-transform: uppercase;
-}
-.msgHead .right {
-	margin-left: auto;
-	display: inline-flex;
-	gap: 2px;
-}
-.msgHead .right button {
-	width: 22px;
-	height: 22px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-xs);
-	color: var(--meta);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
-}
-.msgHead .right button:hover {
-	background: var(--surface-3);
-	color: var(--fg-2);
-}
-.msgBubble {
-	padding: var(--sp-3) var(--sp-4);
-	border-radius: var(--r-md);
-	background: var(--bg);
-	border: 1px solid var(--border);
-	font-size: var(--fs-app);
-	color: var(--fg-2);
-	line-height: 1.5;
-}
-.msgBubble .msgAuthor { color: var(--accent); }
-
-.chatInput {
-	padding: var(--sp-2) var(--sp-4) var(--sp-3);
-	border-top: 1px solid var(--border-soft);
-	background: var(--bg);
-}
-.chatInput textarea {
-	width: 100%;
-	min-height: 36px;
-	max-height: 120px;
-	resize: none;
-	padding: 8px var(--sp-3);
-	border-radius: var(--r-md);
-	border: 1px solid var(--border);
-	background: var(--bg);
-	font-family: var(--font-body);
-	font-size: var(--fs-app);
-	line-height: 1.4;
-	color: var(--fg);
-	outline: none;
-	transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
-}
-.chatInput textarea::placeholder { color: var(--meta); }
-.chatInput textarea:focus {
-	border-color: var(--accent);
-	box-shadow: var(--focus-ring);
-}
-.chatInput .actions {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	margin-top: 6px;
-}
-.modelPicker {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	padding: 5px 4px 5px 10px;
-	border-radius: var(--r-pill);
-	background: var(--surface-2);
-	font-family: var(--font-mono);
-	font-size: 11px;
-	color: var(--fg-2);
-	letter-spacing: 0.01em;
-	cursor: pointer;
-	transition: background var(--motion-fast) var(--ease);
-	border: 0;
-}
-.modelPicker:hover { background: var(--surface-3); }
-.reasoningBtn {
-	display: inline-flex;
-	align-items: center;
-	background: transparent;
-	border: 0;
-	padding: 0;
-	cursor: pointer;
-}
-.chip {
-	padding: 5px 10px;
-	border-radius: var(--r-pill);
-	background: var(--success-soft);
-	color: var(--success);
-	font-size: 10.5px;
-	font-weight: 500;
-	letter-spacing: 0.01em;
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	transition: background var(--motion-fast) var(--ease);
-}
-.reasoningBtn:hover .chip { background: var(--success-soft); filter: brightness(1.1); }
-.chip .d {
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background: var(--success);
-}
-.sendBtn {
-	margin-left: auto;
-	width: 32px;
-	height: 32px;
-	display: grid;
-	place-items: center;
-	border-radius: 50%;
-	background: transparent;
-	color: var(--fg);
-	border: 0;
-	cursor: pointer;
-	transition: color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
-}
-.sendBtn:hover { color: var(--accent); transform: scale(1.05); }
-.sendBtn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-/* ─── transcript pane content ─────────────────────────────────── */
-.transcriptClipHead {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	padding: 0 4px 4px;
-	border-bottom: 1px solid var(--border-soft);
-	margin-bottom: 8px;
-}
-.transcriptClipHead .badge {
-	width: 22px;
-	height: 22px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--brand-soft);
-	color: var(--brand);
-	border-radius: var(--r-sm);
-	font: 700 12px/1 var(--font-mono);
-	flex-shrink: 0;
-}
-.transcriptClipHead .title {
-	font: 600 var(--fs-app)/1.2 var(--font-body);
-	color: var(--fg);
-	margin: 0;
-	padding: 0;
-}
-.transcriptClipHead .sub {
-	font: 400 11px/1.3 var(--font-mono);
-	color: var(--muted);
-	margin-top: 2px;
-}
-.transcriptFlow {
-	margin: 0;
-	padding: 0 4px;
-	font: 400 var(--fs-app-lg)/1.65 var(--font-body);
-	color: var(--fg);
-	text-wrap: pretty;
-}
-.transcriptFlow .tc {
-	display: inline-block;
-	margin: 0 4px;
-	padding: 1px 6px;
-	background: transparent;
-	color: var(--brand);
-	border-radius: var(--r-sm);
-	font: 500 11px/1.4 var(--font-mono);
-	vertical-align: middle;
-	white-space: nowrap;
-}
-
-
-/* ─── bottombar / timeline ─────────────────────────────────────── */
-.bottombar {
-	display: grid;
-	grid-template-columns: 1fr;
-	min-height: 0;
-	background: var(--bg);
-	overflow: hidden;
-}
-
-/* Region lanes (annotations / speed / zoom) inside the timeline body. */
-/* Lanes: fixed-width label column + one shared dnd-timeline surface column.
-   Both columns lay out 3 rows independently but with identical height (22px)
-   + gap (2px), so they line up without needing CSS grid row-spanning. */
-.lanes {
-	display: flex;
-	gap: 8px;
-	padding: 4px var(--sp-4) 2px;
-	flex-shrink: 0;
-	border-bottom: 1px solid var(--border-soft);
-}
-.laneLabelCol {
-	width: 64px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-.laneLabelCell {
-	height: 22px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 4px;
-}
-.laneLabel {
-	font: 600 10px/1 var(--font-mono);
-	color: var(--meta);
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-}
-.laneMeta {
-	font: 500 10.5px/1 var(--font-mono);
-	color: var(--muted);
-	min-width: 12px;
-	text-align: right;
-}
-.laneDelete {
-	width: 18px;
-	height: 18px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border: 0;
-	border-radius: var(--r-xs);
-	background: var(--danger-soft);
-	color: var(--danger);
-	font-size: 13px;
-	line-height: 1;
-	cursor: pointer;
-}
-.laneDelete:hover {
-	filter: brightness(0.95);
-}
-.laneSurface {
-	flex: 1;
-	min-width: 0;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-/* F2.6 — vertical snap-guide lines at both edges of the region being
-   dragged/resized. Spans the full lane stack (parity with T24 on the
-   clip timeline). */
-.laneSnapGuide {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 2px;
-	background: var(--danger);
-	box-shadow: 0 0 6px color-mix(in oklch, var(--danger) 60%, transparent);
-	pointer-events: none;
-	z-index: 14;
-}
-/* F2.6 — floating tooltip with the live start – end range (parity with
-   T25 on the clip timeline). */
-.laneDragTooltip {
-	position: absolute;
-	top: -20px;
-	height: 18px;
-	padding: 0 8px;
-	background: var(--surface);
-	border: 1px solid var(--border-soft);
-	border-radius: 9px;
-	color: var(--fg-2);
-	font: 500 10.5px/18px var(--font-mono);
-	letter-spacing: 0.02em;
-	white-space: nowrap;
-	pointer-events: none;
-	z-index: 15;
-	box-shadow: var(--elev-card-soft);
-}
-.laneTrackRow {
-	position: relative;
-	height: 24px;
-	background: var(--surface-1);
-	border: 1px solid var(--border-soft);
-	border-radius: var(--r-sm);
-	overflow: hidden;
-}
-.laneEmpty {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font: 500 11px/1 var(--font-body);
-	color: var(--muted);
-	opacity: 0.6;
-	pointer-events: none;
-}
-
-/* Lane pills: zoom / speed / annotation / skip. Flat wash fill + 1.5px frame
- * per the v4 design (design/OpenScreen Editor v4.dc.html pillStyle) — no
- * gradient, no tab caps. Selected pills gain an accent ring. */
-.zoomPill,
-.speedPill,
-.annotationPill,
-.skipPill {
-	--_pill: var(--accent);
-	--_wash: var(--accent-soft);
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	height: 22px;
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	padding: 0 8px 0 7px;
-	background: var(--_wash);
-	border: 1.5px solid var(--_pill);
-	border-radius: var(--r-sm);
-	color: var(--fg);
-	font: 600 11px/1 var(--font-display);
-	letter-spacing: 0.01em;
-	font-variant-numeric: tabular-nums;
-	white-space: nowrap;
-	overflow: hidden;
-	box-sizing: border-box;
-	pointer-events: auto;
-	cursor: pointer;
-	z-index: 2;
-}
-.zoomPill {
-	--_pill: var(--accent);
-	--_wash: var(--accent-soft);
-}
-.speedPill {
-	--_pill: var(--speed);
-	--_wash: var(--speed-wash);
-}
-.annotationPill {
-	--_pill: var(--annotation);
-	--_wash: var(--annotation-wash);
-}
-.skipPill {
-	--_pill: var(--danger);
-	--_wash: var(--danger-soft);
-}
-.lanePillSelected {
-	box-shadow: 0 0 0 3px color-mix(in oklch, var(--_pill) 35%, transparent);
-}
-.pillIcon {
-	width: 11px;
-	height: 11px;
-	flex-shrink: 0;
-	color: color-mix(in oklch, var(--_pill) 70%, var(--fg));
-}
-.pillValue {
-	color: var(--fg);
-	font-variant-numeric: tabular-nums;
-}
-
-.timelineHead {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	padding: var(--sp-2) var(--sp-4);
-	border-bottom: 1px solid var(--border-soft);
-	min-height: 40px;
-}
-.timelineHead .viewTools {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding: 3px;
-	background: var(--surface-2);
-	border: 1px solid var(--border-soft);
-	border-radius: var(--r-sm);
-}
-.timelineHead .vtBtn {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 30px;
-	height: 30px;
-	padding: 0;
-	border: 0;
-	background: transparent;
-	color: var(--muted);
-	border-radius: var(--r-xs);
-	cursor: pointer;
-	transition: color 0.12s ease, background 0.12s ease;
-}
-.timelineHead .vtBtn:hover { color: var(--fg); background: var(--surface); }
-.timelineHead .vtBtn.isOn { color: var(--accent); background: var(--accent-wash); }
-.timelineHead .ratio {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	height: 30px;
-	padding: 0 10px;
-	font-family: var(--font-mono);
-	font-size: var(--fs-app-sm);
-	color: var(--muted);
-	letter-spacing: 0.02em;
-	background: transparent;
-	border: 0;
-	border-left: 1px solid var(--border-soft);
-	margin-left: 4px;
-	cursor: pointer;
-	border-radius: 0 var(--r-sm) var(--r-sm) 0;
-}
-.timelineHead .ratio:hover { color: var(--fg); }
-.timelineHead .hintRow {
-	margin-left: auto;
-	display: flex;
-	align-items: center;
-	gap: var(--sp-4);
-}
-.timelineHead .hint {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-family: var(--font-display);
-	font-size: 11.5px;
-	color: var(--muted);
-	letter-spacing: 0.005em;
-}
-.timelineHead .hint .kbd {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	height: 20px;
-	padding: 0 7px;
-	font-family: var(--font-mono);
-	font-size: 10.5px;
-	font-weight: 500;
-	color: var(--accent);
-	background: var(--accent-soft);
-	border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
-	border-radius: var(--r-xs);
-	letter-spacing: 0.02em;
-	white-space: nowrap;
-}
-.timelineBody {
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	flex: 1;
-	overflow: hidden;
-}
-.timelineBody :global(.timelinePaneWrap) {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-}
-.zoombar {
-	padding: 4px var(--sp-4) 8px;
-	background: var(--bg);
-	flex-shrink: 0;
-	border-top: 1px solid var(--border-soft);
-}
-
-/* T11 — Navigator strip. Moved to TimelinePane.module.css so the
-   className (applied via TimelinePane's own styles import) actually
-   matches the CSS. CSS modules' class hashes don't match across
-   files. The shape and the elements are unchanged from axcut's
-   .timeline-navigator / .timeline-navigator-window. */
-.zoombar .zoomTrack {
-	position: relative;
-	height: 18px;
-	width: 100%;
-}
-.zoombar .zoomFill {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	left: 0;
-	width: 100%;
-	height: 6px;
-	background: var(--accent);
-	border-radius: 3px;
-	pointer-events: none;
-}
-
-/* Radix Slider — visible two-handle range, design-aligned. */
-.sliderRoot {
-	position: relative;
-	display: flex;
-	align-items: center;
-	height: 18px;
-	width: 100%;
-	touch-action: none;
-	user-select: none;
-}
-.sliderTrack {
-	position: relative;
-	height: 6px;
-	width: 100%;
-	background: var(--surface-2);
-	border-radius: 3px;
-	overflow: hidden;
-}
-.sliderRange {
-	position: absolute;
-	height: 100%;
-	background: var(--accent);
-	border-radius: 3px;
-}
-.sliderThumb {
-	display: block;
-	width: 14px;
-	height: 14px;
-	background: var(--accent);
-	border: 1px solid var(--bg);
-	border-radius: 3px;
-	cursor: ew-resize;
-	transition: box-shadow var(--motion-fast) var(--ease);
-}
-.sliderThumb:hover,
-.sliderThumb:focus-visible {
-	outline: none;
-	box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
-}
-
-/* ─── modals ───────────────────────────────────────────────────── */
-.modal {
-	position: fixed;
-	inset: 0;
-	display: none;
-	z-index: 100;
-}
-.modal.isOpen { display: block; }
-.modalBackdrop {
-	position: absolute;
-	inset: 0;
-	background: var(--overlay-dark);
-	backdrop-filter: blur(4px);
-	-webkit-backdrop-filter: blur(4px);
-}
-.modalCard {
-	position: relative;
-	width: min(960px, 92vw);
-	max-height: 88vh;
-	margin: 6vh auto 0;
-	background: var(--bg);
-	border: 1px solid var(--border);
-	border-radius: var(--r-lg);
-	box-shadow: 0 24px 60px rgba(22, 23, 29, 0.5);
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	color: var(--fg);
-}
-.modalCard.wide { width: min(720px, 92vw); }
-.modalHead {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	padding: 20px 24px 12px;
-	gap: 16px;
-}
-.modalHead h2 {
-	margin: 0;
-	font: 600 20px/1.3 var(--font-display);
-	color: var(--fg);
-}
-.modalHead p {
-	margin: 4px 0 0;
-	font: 400 var(--fs-app)/1.5 var(--font-body);
-	color: var(--muted);
-}
-.modalHead .closeBtn {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	border-radius: var(--r-sm);
-	color: var(--muted);
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-}
-.modalHead .closeBtn:hover { background: var(--surface-3); color: var(--fg); }
-.modalBody {
-	padding: 8px 24px 24px;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	overflow: auto;
-}
-
-.btn {
-	height: 32px;
-	padding: 0 14px;
-	border-radius: var(--r-md);
-	font: 500 var(--fs-app)/1 var(--font-body);
-	cursor: pointer;
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
-}
-.btnSecondary {
-	background: var(--surface);
-	color: var(--fg);
-	border: 1px solid var(--border);
-}
-.btnSecondary:hover { background: var(--surface-warm); border-color: var(--border-hi); }
-.btnPrimary {
-	background: var(--accent);
-	color: var(--accent-on);
-	border: 1px solid var(--accent);
-}
-.btnPrimary:hover { background: var(--brand-lo); }
-.btnPrimary:disabled {
-	background: var(--surface-2);
-	border-color: var(--border);
-	color: var(--muted);
-	cursor: not-allowed;
-}
-
-/* ─── Edit Clip modal — draggable source-range track ────────────── */
-.editClipRangeDragging {
-	box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-/* ─── media card (left panel media list) ───────────────────────── */
-.mediaList {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-.mediaCard {
-	display: flex;
-	flex-direction: column;
-	border-radius: var(--r-md);
-	overflow: hidden;
-	border: 1px solid var(--border-soft);
-	background: var(--bg);
-	cursor: pointer;
-	transition: border-color var(--motion-fast) var(--ease);
-}
-.mediaCard:hover { border-color: var(--brand); }
-.mediaCard .thumb {
-	aspect-ratio: 16 / 9;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: rgba(255, 255, 255, 0.95);
-}
-.thumbRed   { background: var(--danger); }
-.thumbGreen { background: var(--success); }
-.thumbAmber { background: var(--warn); }
-.thumbCyan  { background: var(--accent); }
-.mediaMeta {
-	padding: 8px 10px 10px;
-	background: var(--surface-2);
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-.mediaMeta .name {
-	font: var(--fs-app) var(--font-body);
-	color: var(--fg);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.mediaMeta .row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-.mediaMeta .timecode { font: 11px var(--font-mono); color: var(--muted); }
-.mediaMeta .size     { font: 11px var(--font-body);  color: var(--muted); }
-
-.importBtn {
-	margin: 8px var(--sp-3) 12px;
-	padding: 10px 12px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	border: 1px dashed var(--border-hi);
-	border-radius: var(--r-md);
-	background: transparent;
-	color: var(--muted);
-	font: var(--fs-app) var(--font-body);
-	font-weight: 500;
-	cursor: pointer;
-}
-.importBtn:hover { background: var(--surface-warm); color: var(--fg); border-color: var(--accent); }
-
-/* Custom range slider / progress bar */
-.scrubBar {
-	flex: 1;
-	min-width: 0;
-	position: relative;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-}
-.scrubTrack {
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 4px;
-	background: var(--border-hi);
-	border-radius: 9999px;
-	overflow: hidden;
-}
-.scrubProgress {
-	height: 100%;
-	background: var(--accent);
-	border-radius: 9999px;
-}
-.scrubInput {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	opacity: 0;
-	cursor: pointer;
-	z-index: 10;
-	margin: 0;
-}
-.scrubThumb {
-	position: absolute;
-	width: 10px;
-	height: 10px;
-	background: #ffffff;
-	border-radius: 50%;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-	pointer-events: none;
-	transform: translate(-50%, -50%);
-	top: 50%;
-	opacity: 1;
-	transition: transform 100ms ease;
-}
-.scrubBar:hover .scrubThumb {
-	transform: translate(-50%, -50%) scale(1.2);
-}
-
-/* ─── AI provider settings (axcut parity) ────────────────────────── */
-
-.providerGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-.providerCard {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  background: var(--surface);
-  color: var(--fg-2);
-  cursor: pointer;
-  font: 500 13px/1.2 var(--font-body);
-  text-align: left;
-  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
-}
-.providerCard:hover { border-color: var(--border-hi); }
-.providerCard.active {
-  border-color: var(--accent);
-  background: var(--accent-soft);
-  color: var(--fg);
-}
-.providerCard .head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.providerCard .label {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--fg);
-}
-.providerCard .model {
-  font: 500 11px var(--font-mono);
-  color: var(--muted);
-  letter-spacing: 0.02em;
-  text-transform: lowercase;
-}
-.statusPill {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  font: 600 10px/1 var(--font-mono);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border: 1px solid transparent;
-}
-.statusPill.ready {
-  background: var(--success-soft, rgba(68, 175, 105, 0.18));
-  color: var(--success, #44af69);
-  border-color: color-mix(in srgb, var(--success, #44af69) 30%, transparent);
-}
-.statusPill.idle {
-  background: var(--surface-2);
-  color: var(--muted);
-  border-color: var(--border);
-}
-.statusPill.auth {
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
-}
-.statusPill.pat {
-  background: color-mix(in srgb, var(--warn) 18%, transparent);
-  color: var(--warn);
-  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
-}
-
-.providerForm {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-.providerForm .title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-.providerForm .title h3 {
-  margin: 0;
-  font: 600 16px var(--font-display);
-  color: var(--fg);
-}
-.providerForm .actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border-soft);
-  margin-top: 4px;
-}
-.providerForm .actionsLeft {
-  display: flex;
-  gap: 8px;
-}
-.dangerBtn {
-  background: color-mix(in srgb, var(--danger) 14%, transparent);
-  color: var(--danger);
-  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-}
-.dangerBtn:hover {
-  background: color-mix(in srgb, var(--danger) 22%, transparent);
-  color: var(--danger);
-}
-
-.authPanel {
-  padding: 14px 16px;
-  border: 1px solid var(--brand);
-  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
-  border-radius: var(--r-md);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.authPanel strong {
-  display: block;
-  font: 600 13px var(--font-body);
-  color: var(--fg);
-}
-.authPanel p {
-  margin: 4px 0 0;
-  font: 400 12px/1.45 var(--font-body);
-  color: var(--muted);
-}
-.authCodeRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.authCodeRow code {
-  flex: 1;
-  font: 600 18px/1 var(--font-mono);
-  letter-spacing: 0.18em;
-  padding: 10px 14px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--r-md);
-  color: var(--fg);
-  user-select: all;
-}
-.linkBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 12px;
-  height: 32px;
-  border-radius: var(--r-md);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--fg);
-  font: 500 var(--fs-app) var(--font-body);
-  cursor: pointer;
-  text-decoration: none;
-}
-.linkBtn:hover { background: var(--surface-warm); border-color: var(--border-hi); }
-
-.errorRow {
-  margin: 0;
-  padding: 10px 12px;
-  border-radius: var(--r-md);
-  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
-  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
-  color: var(--danger);
-  font: 500 12px var(--font-body);
-}
-
-.iconBtn {
-  width: 28px;
-  height: 28px;
-  display: inline-grid;
-  place-items: center;
-  border-radius: var(--r-sm);
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--muted);
-  cursor: pointer;
-}
-.iconBtn:hover { background: var(--surface-3); color: var(--fg); }
-.iconBtn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.backBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  height: 28px;
-  border-radius: var(--r-sm);
-  background: transparent;
-  color: var(--fg);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  font: 500 12px var(--font-body);
-}
-.backBtn:hover { background: var(--surface-3); }
-.backBtn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-/* ─── chat welcome (no provider connected) ──────────────────────── */
-/* .panelBody supplies the horizontal inset (var(--sp-3) var(--sp-4)); only the
-   top breathing room is ours, or the card sits twice as far in as the messages. */
-.chatWelcome {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--sp-3);
-  padding: var(--sp-2) 0 0;
-  text-align: left;
-}
-
-.chatWelcomeHero {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 6px;
-  padding: 4px 0 0;
-}
-
-.chatWelcomeIcon {
-  color: var(--accent);
-  margin-bottom: 4px;
-}
-
-.chatWelcomeTitle {
-  margin: 0;
-  font: 600 14px/1.3 var(--font-body);
-  color: var(--fg);
-  letter-spacing: -0.01em;
-}
-
-.chatWelcomeSubtitle {
-  margin: 0;
-  font: 400 12px/1.5 var(--font-body);
-  color: var(--muted);
-  max-width: 32ch;
-}
-
-/* Native list markers — no flex on the ul/li, or the items stop being
-   list-items and the markers vanish. padding-inline-start keeps them inside
-   the card in both writing directions. */
-.chatWelcomeFeatures {
-  /* explicit: the global reset sets list-style: none on every ul */
-  list-style: disc;
-  margin: 0;
-  padding: 10px 12px;
-  padding-inline-start: 26px;
-  background: var(--surface);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--r-md);
-  font: 400 12px/1.45 var(--font-body);
-  color: var(--fg-2);
-}
-.chatWelcomeFeatures li + li { margin-top: 6px; }
-.chatWelcomeFeatures li::marker { color: var(--accent); }
-
-.chatWelcomeCta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  width: 100%;
-  height: 34px;
-  border-radius: var(--r-md);
-  background: var(--accent);
-  color: var(--accent-on);
-  border: 1px solid var(--accent);
-  font: 600 12.5px var(--font-body);
-  cursor: pointer;
-  transition: filter 120ms ease;
-}
-.chatWelcomeCta:hover { filter: brightness(0.95); }
-.chatWelcomeCta:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.chatWelcomeDisclaimer {
-  margin: 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  font: 400 10.5px/1.45 var(--font-body);
-  color: var(--muted);
-}
-
-.chatWelcomeDisclaimerIcon {
-  flex: 0 0 auto;
-  margin-top: 2px;
-  opacity: 0.8;
-}
+/* Editor shell — 4-row grid: titlebar · workbench · handle · bottombar.
+ * Mirrors design/openscreen-editor.html. Tokens come from
+ * src/styles/design-tokens.css (light + dark via :root[data-theme="dark"]). */
+
+.app {
+	display: grid;
+	grid-template-rows: var(--titlebar-h) 1fr var(--handle-h) var(--bottom-h);
+	height: 100vh;
+	min-width: 1024px;
+	background: var(--bg);
+	color: var(--fg);
+	font-family: var(--font-body);
+	font-size: var(--fs-app);
+	line-height: 1.5;
+	overflow: hidden;
+	user-select: none;
+}
+
+.app[data-collapse~="left"] {
+	--panel-w-left: 0px;
+}
+.app[data-collapse~="left"] .leftRail,
+.app[data-collapse~="left"] .leftPanel,
+.app[data-collapse~="left"] .handleLeft {
+	display: none;
+}
+
+.app[data-collapse~="right"] {
+	--panel-w-right: 0px;
+}
+.app[data-collapse~="right"] .rightStack,
+.app[data-collapse~="right"] .rightRail,
+.app[data-collapse~="right"] .handleRight {
+	display: none;
+}
+
+.app[data-collapse~="bottom"] {
+	--bottom-h: 0px;
+}
+.app[data-collapse~="bottom"] .bottombar {
+	display: none;
+}
+.app[data-collapse~="bottom"] .handleBottom {
+	display: none;
+}
+
+/* ─── titlebar ──────────────────────────────────────────────────── */
+.titlebar {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-3);
+	padding-inline: var(--sp-4);
+	background: var(--bg);
+	border-bottom: 1px solid var(--border-soft);
+	min-width: 0;
+	/* ponytail: make the titlebar the drag region in Electron. The buttons
+	 * opt out via inline -webkit-app-region: no-drag (see Titlebar.tsx). */
+	-webkit-app-region: drag;
+	app-region: drag;
+}
+.titlebar button,
+.titlebar input,
+.titlebar select,
+.titlebar textarea,
+.titlebar .langSel,
+.titlebar .recorderBtn {
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+}
+.titlebar .lights {
+	display: inline-flex;
+	gap: 6px;
+	margin-right: var(--sp-3);
+}
+.titlebar .lights span {
+	width: 11px;
+	height: 11px;
+	border-radius: 50%;
+	border: 1px solid var(--overlay-border);
+}
+.titlebar .lights .r { background: var(--light-red); }
+.titlebar .lights .y { background: var(--light-yellow); }
+.titlebar .lights .g { background: var(--light-green); }
+
+.titlebar .brand {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-family: var(--font-display);
+	font-size: var(--fs-title);
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	color: var(--fg);
+}
+.titlebar .brandMark {
+	width: 18px;
+	height: 18px;
+	border-radius: 5px;
+	background: var(--accent);
+	display: grid;
+	place-items: center;
+	color: var(--accent-on);
+	font: 600 11px/1 var(--font-display);
+}
+.titlebar .sep {
+	width: 1px;
+	height: 16px;
+	background: var(--border);
+}
+.titlebar .project {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-2);
+	font-size: var(--fs-app);
+	color: var(--muted);
+	min-width: 0;
+}
+.titlebar .projectName {
+	color: var(--fg-2);
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 280px;
+	background: transparent;
+	border: 0;
+	padding: 2px 6px;
+	border-radius: var(--r-sm);
+	cursor: text;
+	font: inherit;
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+}
+.titlebar .projectName:hover:not(:disabled) {
+	background: var(--surface-3);
+}
+.titlebar .projectInput {
+	background: var(--surface);
+	color: var(--fg);
+	border: 1px solid var(--accent);
+	border-radius: var(--r-sm);
+	padding: 2px 6px;
+	font: 500 13px var(--font-body);
+	outline: none;
+	min-width: 200px;
+	max-width: 360px;
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+}
+.titlebar .saved {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-family: var(--font-mono);
+	font-size: var(--fs-app-sm);
+	color: var(--muted);
+}
+.titlebar .saved .dot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--success);
+}
+.titlebar .projActions {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-1);
+	margin-right: var(--sp-1);
+}
+.titlebar .right {
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--sp-1);
+}
+.titlebar .iconBtn {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.titlebar .iconBtn:hover {
+	background: var(--surface-3);
+	color: var(--fg);
+}
+.titlebar .iconBtn[aria-pressed="true"] {
+	background: var(--accent-soft);
+	color: var(--accent);
+}
+.titlebar .langSel {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 26px;
+	padding: 0 6px;
+	background: transparent;
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-md);
+	color: var(--fg-2);
+	font: 500 var(--fs-app)/1 var(--font-display);
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.titlebar .langSel:hover {
+	background: var(--surface-3);
+	border-color: var(--border);
+	color: var(--fg);
+}
+.titlebar .recorderBtn {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 26px;
+	padding: 0 10px 0 8px;
+	border-radius: var(--r-md);
+	background: var(--accent-soft);
+	color: var(--accent);
+	border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+	font: 500 var(--fs-app-sm)/1 var(--font-display);
+	letter-spacing: 0.01em;
+	cursor: pointer;
+}
+.titlebar .recorderBtn:hover {
+	background: color-mix(in oklch, var(--accent) 18%, var(--surface-3));
+}
+
+/* ─── workbench — 7 columns: rail · panel · handle · preview · handle · stack · rail */
+.workbench {
+	display: grid;
+	grid-template-columns:
+		var(--rail-w)
+		var(--panel-w-left)
+		var(--handle-w)
+		1fr
+		var(--handle-w)
+		var(--panel-w-right)
+		var(--rail-w);
+	min-height: 0;
+	background: var(--bg);
+	overflow: hidden;
+}
+.workbench > * {
+	min-height: 0;
+}
+.workbench > * + * {
+	border-left: 1px solid var(--border-soft);
+}
+
+.leftPanel {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	min-height: 0;
+}
+
+/* ─── rails — vertical icon strips ─────────────────────────────── */
+.rail {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-1);
+	padding: var(--sp-2) 0;
+	background: var(--bg);
+	min-width: 0;
+}
+.rail button {
+	width: 36px;
+	height: 36px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-md);
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+	position: relative;
+}
+.rail button:hover {
+	background: var(--surface-3);
+	color: var(--fg);
+}
+.rail button[aria-pressed="true"] {
+	color: var(--accent);
+	background: var(--accent-soft);
+}
+.rail button[aria-pressed="true"]::before {
+	content: "";
+	position: absolute;
+	left: -8px;
+	top: 8px;
+	bottom: 8px;
+	width: 3px;
+	border-radius: 2px;
+	background: var(--accent);
+}
+.rail .sepH {
+	width: 24px;
+	height: 1px;
+	background: var(--border);
+	margin: var(--sp-1) 0;
+}
+
+/* ─── panels (chat, transcript, etc.) ──────────────────────────── */
+.panel {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg);
+	overflow: hidden;
+}
+
+/* Direct children of .panel: panelHeader (auto), panelBody (1fr), chatInput (auto). */
+.panel > .panelHeader,
+.panel > .chatInput {
+	flex: 0 0 auto;
+}
+.panel > .panelBody {
+	flex: 1 1 0;
+}
+.panelHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: var(--sp-3) var(--sp-4);
+	border-bottom: 1px solid var(--border-soft);
+	min-height: 44px;
+}
+.panelHead h2 {
+	margin: 0;
+	font-family: var(--font-display);
+	font-size: 14px;
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	color: var(--fg);
+}
+.panelHead .right {
+	margin-left: auto;
+	display: inline-flex;
+	gap: var(--sp-1);
+}
+.panelHead .iconBtn {
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--meta);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.panelHead .iconBtn:hover {
+	background: var(--surface-3);
+	color: var(--fg-2);
+}
+.panelBody {
+	overflow-y: auto;
+	padding: var(--sp-3) var(--sp-4);
+	scrollbar-width: thin;
+	scrollbar-color: var(--border) transparent;
+	min-height: 0;
+}
+.panelBody::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+.panelBody::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border-radius: 4px;
+}
+.panelBody::-webkit-scrollbar-thumb:hover {
+	background: var(--border-hi);
+}
+
+/* ─── resize handles ───────────────────────────────────────────── */
+.handle {
+	background: transparent;
+	position: relative;
+	z-index: 2;
+	transition: background var(--motion-fast) var(--ease);
+	cursor: col-resize;
+}
+.handleRow {
+	cursor: row-resize;
+	grid-column: 1 / -1;
+	border-bottom: 1px solid var(--border);
+}
+.handle:hover,
+.handle.isDragging {
+	background: var(--surface-2);
+}
+.handle::before,
+.handle::after {
+	content: "";
+	position: absolute;
+	background: var(--dim);
+	border-radius: 1px;
+	opacity: 0.45;
+	transition: opacity var(--motion-fast) var(--ease);
+	pointer-events: none;
+}
+.handleCol::before,
+.handleCol::after {
+	left: 50%;
+	width: 1px;
+	height: 14px;
+	transform: translateX(-50%);
+}
+.handleCol::before { top: calc(50% - 16px); }
+.handleCol::after  { top: calc(50% + 2px); }
+.handleRow::before,
+.handleRow::after {
+	top: 50%;
+	height: 1px;
+	width: 14px;
+	transform: translateY(-50%);
+}
+.handleRow::before { left: calc(50% - 16px); }
+.handleRow::after  { left: calc(50% + 2px); }
+.handle:hover::before,
+.handle:hover::after,
+.handle.isDragging::before,
+.handle.isDragging::after {
+	opacity: 1;
+}
+.handle.isDragging {
+	background: var(--accent-soft);
+}
+
+/* ─── preview area ─────────────────────────────────────────────── */
+/* ponytail: the stage wrapper (in NewEditorShell.tsx) already provides the
+   padding that reserves room for the floating inspector, and .stage paints the
+   scene gradient. previewWrap is a single transparent, zero-padding centering
+   layer so the wallpaper card floats on that gradient — matching the design's
+   stage-wrap (one framed card, no surface slab, no double padding). It is also
+   the positioned ancestor for the timecode/badge overlays and the box the
+   frame measures for its contain-fit. */
+.previewWrap {
+	position: relative;
+	display: grid;
+	place-items: center;
+	width: 100%;
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+}
+.previewFrame {
+	position: relative;
+	aspect-ratio: 16 / 9;
+	max-width: 100%;
+	max-height: 100%;
+	width: 100%;
+	min-width: 0;
+	min-height: 0;
+	background:
+		radial-gradient(ellipse at 50% 35%,
+			var(--scene-sky-hi) 0%,
+			var(--scene-sky-mid) 35%,
+			var(--scene-foliage) 70%,
+			var(--scene-foliage-d) 100%);
+	/* ponytail: the wallpaper card is a floating, rounded surface (per the v4
+	   design's preview frame) — rounded corners + a layered drop shadow lift it
+	   off the scene gradient. The custom background (buildFrameStyle) fills this
+	   card; the video sits on top with its own padding so the wallpaper shows
+	   around it. */
+	border-radius: 16px;
+	box-shadow:
+		0 40px 90px -30px rgba(0, 0, 0, 0.75),
+		0 12px 28px -12px rgba(0, 0, 0, 0.5),
+		inset 0 0 0 1px rgba(255, 255, 255, 0.09);
+	overflow: hidden;
+	display: grid;
+	place-items: center;
+}
+.videoStage {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-width: 0;
+	min-height: 0;
+	overflow: visible;
+	z-index: 1;
+}
+.screenStage {
+	position: absolute;
+	overflow: hidden;
+	z-index: 1;
+	display: flex;
+}
+.screenStage > .container,
+.screenStage > div > .container {
+	width: 100%;
+	height: 100%;
+}
+.previewEmpty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	color: var(--muted);
+	font-size: var(--fs-app);
+}
+.previewEmpty strong { color: var(--fg-2); }
+
+/* ─── preview empty state (no project / no asset) ───────────────── */
+.previewEmptyDrop {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.previewEmptyDropOverlay {
+	position: absolute;
+	inset: 0;
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	border: 2px dashed var(--primary, #34B27B);
+	background: color-mix(in srgb, var(--primary, #34B27B) 10%, transparent);
+	border-radius: var(--r-sm);
+	pointer-events: none;
+}
+.previewEmptyDropIcon {
+	width: 40px;
+	height: 40px;
+	color: var(--primary, #34B27B);
+}
+.previewEmptyDropLabel {
+	font-size: var(--fs-app);
+	font-weight: 600;
+	color: var(--primary, #34B27B);
+}
+.previewEmptyInner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-4);
+	padding: var(--sp-5);
+	text-align: center;
+	max-width: 28rem;
+}
+.previewEmptyLogo {
+	width: 64px;
+	height: 64px;
+	border-radius: var(--r-md);
+	opacity: 0.9;
+}
+.previewEmptyHeading {
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-1);
+}
+.previewEmptyTitle {
+	margin: 0;
+	font-size: 1.25rem;
+	font-weight: 600;
+	color: var(--fg-2);
+}
+.previewEmptyDescription {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--muted);
+	line-height: 1.5;
+}
+.previewEmptyActions {
+	display: flex;
+	flex-direction: column;
+	gap: var(--sp-2);
+	width: 100%;
+	max-width: 18rem;
+}
+.previewEmptyPrimaryButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	padding: var(--sp-3) var(--sp-4);
+	border-radius: var(--r-sm);
+	background: var(--primary, #34B27B);
+	color: #fff;
+	border: none;
+	font-weight: 500;
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition: background-color 120ms ease;
+}
+.previewEmptyPrimaryButton:hover {
+	filter: brightness(0.95);
+}
+.previewEmptySecondaryButton {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	padding: var(--sp-3) var(--sp-4);
+	border-radius: var(--r-sm);
+	background: var(--card);
+	color: var(--fg-2);
+	border: 1px solid var(--border);
+	font-weight: 500;
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition: background-color 120ms ease;
+}
+.previewEmptySecondaryButton:hover {
+	background: var(--accent, rgba(255, 255, 255, 0.06));
+}
+.previewEmptyButtonIcon {
+	width: 16px;
+	height: 16px;
+}
+.previewEmptyHint {
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.5));
+}
+.previewEmptyDragHint {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-1);
+	margin: 0;
+	font-size: 0.75rem;
+	color: var(--muted-foreground, rgba(255, 255, 255, 0.4));
+}
+.previewEmptyDragHintIcon {
+	width: 12px;
+	height: 12px;
+}
+
+/* ─── preview media failure (PreviewErrorCard) ──────────────────── */
+/* Overlays the stage instead of replacing it: the native compositor is still
+   painting the last composed frame underneath, and leaving that frame visible is
+   what tells the user their project is fine (issue #395). Translucent, not
+   opaque, for the same reason. */
+.previewFailure {
+	position: absolute;
+	inset: 0;
+	z-index: 3;
+	display: grid;
+	place-items: center;
+	padding: var(--sp-4);
+	background: rgba(9, 9, 11, 0.72);
+	backdrop-filter: blur(2px);
+	/* The scrim is a fixed dark surface in BOTH themes, so the text on it must
+	   not follow the document theme. Light is the default (useTheme.ts), and
+	   there --fg-2 is #334155 — near-black on near-black. Pinned here rather
+	   than as a var() fallback per rule: --muted-foreground is always defined
+	   (design-tokens.css), so a fallback would never have fired. */
+	--fg-2: #f3f5f8;
+	--muted-foreground: rgba(255, 255, 255, 0.78);
+}
+.previewFailureCard {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-3);
+	max-width: min(38ch, 100%);
+	text-align: center;
+}
+.previewFailureIconRing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.05);
+	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.previewFailureIcon {
+	width: 20px;
+	height: 20px;
+	color: var(--muted-foreground);
+}
+.previewFailureTitle {
+	margin: 0;
+	font-size: 1.05rem;
+	font-weight: 600;
+	color: var(--fg-2);
+}
+.previewFailureDescription {
+	margin: 0;
+	font-size: 0.875rem;
+	line-height: 1.5;
+	color: var(--muted-foreground);
+}
+/* Selectable: it exists to be copied into a bug report, so it stays legible
+   rather than fading to decoration. */
+.previewFailureDetail {
+	margin: 0;
+	font-size: 0.6875rem;
+	font-family: var(--font-mono, ui-monospace, monospace);
+	color: rgba(255, 255, 255, 0.6);
+	user-select: text;
+	word-break: break-word;
+}
+.previewEmptyDialog {
+	max-width: 24rem;
+	padding: var(--sp-5);
+	background: var(--bg);
+	border: 1px solid var(--border);
+}
+.previewEmptyDialogHeader {
+	margin-bottom: var(--sp-3);
+}
+.previewEmptyDialogHeaderInner {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+}
+.previewEmptyDialogLogo {
+	width: 36px;
+	height: 36px;
+	border-radius: var(--r-sm);
+	flex-shrink: 0;
+}
+.previewEmptyDialogTitle {
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--fg-2);
+	line-height: 1.2;
+}
+.previewEmptyDialogBody {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--sp-2);
+	margin-bottom: var(--sp-4);
+	text-align: center;
+}
+.previewEmptyDialogIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	border-radius: 9999px;
+	background: var(--card);
+	border: 1px solid var(--border);
+}
+.previewEmptyDialogAlertIcon {
+	width: 20px;
+	height: 20px;
+	color: var(--muted);
+}
+.previewEmptyDialogMessage {
+	margin: 0;
+	font-size: 0.875rem;
+	color: var(--muted);
+	line-height: 1.5;
+}
+.previewEmptyDialogClose {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-1);
+	width: 100%;
+	padding: var(--sp-2) var(--sp-3);
+	border-radius: var(--r-sm);
+	background: var(--card);
+	color: var(--fg-2);
+	border: 1px solid var(--border);
+	font-size: 0.875rem;
+	font-weight: 500;
+	cursor: pointer;
+}
+.previewEmptyDialogCloseIcon {
+	width: 14px;
+	height: 14px;
+}
+.previewPip {
+	position: absolute;
+	right: var(--sp-3);
+	bottom: var(--sp-3);
+	width: 120px;
+	aspect-ratio: 16 / 9;
+	border-radius: var(--r-sm);
+	background: linear-gradient(135deg, var(--pip-bg-1) 0%, var(--pip-bg-2) 50%, var(--pip-bg-3) 100%);
+	border: 2px solid var(--bg);
+	box-shadow: var(--elev-card);
+	overflow: hidden;
+	display: grid;
+	place-items: center;
+	color: var(--overlay-text);
+	font-family: var(--font-mono);
+	font-size: 9px;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}
+.previewFrame > .screenStage video {
+	position: relative;
+	z-index: 1;
+	/* Pixels come from the native canvas now; this <video> stays mounted (and
+	   playing) purely as the decode/playback-clock/metadata source. A plain
+	   descendant selector (not a fixed child-depth chain) is required here:
+	   VirtualPreview nests the actual <video> THREE levels down
+	   (.screenStage > .container > .videoFrame > video), not one or two —
+	   the previous `>` chain silently never matched, leaving this video
+	   fully visible (and on top of the native canvas) the whole time. */
+	visibility: hidden;
+}
+.pipCircle {
+	border-radius: 9999px !important;
+}
+.pipSquare {
+	border-radius: 0 !important;
+}
+.pipRounded {
+	border-radius: 18px !important;
+}
+
+/* Webcam overlay: real <video> driven by the cameraTrack. The slot is
+   transparent so clip-path / border-radius carve the camera without leaving
+   a rectangular placeholder peeking through. */
+.webcamSlot {
+	background: transparent;
+	overflow: hidden;
+	z-index: 2;
+	display: flex;
+}
+.webcamSlot .webcamVideo {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	/* Native canvas already draws the composited webcam PiP; this <video> stays
+	   mounted (playing) only to drive the camera's own decode/sync clock. The
+	   slot div itself stays visible/clickable for the drag-to-reposition hitbox. */
+	visibility: hidden;
+	display: block;
+}
+/* ─── transport bar (lives inside .timelineHead, next to the tool icons) ─ */
+.transport {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: 1;
+	min-width: 0;
+}
+.transport .tbtn {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--fg-2);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	flex-shrink: 0;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.transport .tbtn:hover {
+	background: var(--surface-3);
+	color: var(--fg);
+}
+.transport .tbtn.play {
+	width: 28px;
+	height: 28px;
+	background: var(--fg);
+	color: var(--bg);
+	border-radius: 50%;
+}
+.transport .tbtn.play:hover {
+	background: var(--fg-2);
+}
+.transport .time {
+	font-family: var(--font-mono);
+	font-size: var(--fs-app-sm);
+	color: var(--fg);
+	letter-spacing: 0.02em;
+	min-width: 96px;
+	text-align: center;
+	flex-shrink: 0;
+}
+.transport .time .sep { color: var(--meta); margin-inline: 4px; }
+.transport .time .total { color: var(--muted); }
+.transport .spacer { flex: 1; }
+
+/* ─── right panel-stack (one pane visible at a time) ──────────── */
+.rightStack {
+	grid-column: 6;
+	display: grid;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg);
+}
+.pane {
+	display: none;
+	grid-template-rows: auto 1fr;
+	min-height: 0;
+}
+.pane.isActive {
+	display: grid;
+}
+.paneHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: 12px var(--sp-4);
+	/* Every pane wearing this header is rendered inside FloatingInspector, which
+	   floats its "Collapse inspector" button (right: 12, 26px wide) over the
+	   header's right edge — landing squarely on whatever sits there and
+	   swallowing its clicks. The Help button was the casualty: visible on every
+	   facet, and unclickable. Reserve the floated button its own lane instead. */
+	padding-right: 46px;
+	border-bottom: 1px solid var(--border-soft);
+	min-height: 44px;
+}
+.paneHead h2 {
+	margin: 0;
+	font-family: var(--font-display);
+	font-size: 14px;
+	font-weight: 500;
+	letter-spacing: -0.005em;
+	color: var(--fg);
+}
+.paneBody {
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 12px var(--sp-4);
+	scrollbar-width: thin;
+	scrollbar-color: var(--border) transparent;
+	min-height: 0;
+}
+
+/* ─── pane tabs (sub-nav inside a pane) ───────────────────────── */
+.paneTabs {
+	display: flex;
+	gap: 2px;
+	padding: 3px;
+	margin: 12px var(--sp-4);
+	background: var(--surface-warm);
+	border-radius: 10px;
+}
+.paneTabs button {
+	flex: 1;
+	padding: 7px 10px;
+	border: 0;
+	background: transparent;
+	border-radius: 7px;
+	font: 500 var(--fs-app-sm)/1 var(--font-body);
+	color: var(--muted);
+	cursor: pointer;
+	transition: background 150ms ease, color 150ms ease;
+}
+.paneTabs button.isActive {
+	background: var(--brand);
+	color: var(--accent-on);
+	box-shadow: 0 1px 2px rgba(22, 23, 29, 0.12);
+}
+.paneSection { display: none; }
+.paneSection.isActive { display: block; }
+
+/* ─── pane rows (label + control) ─────────────────────────────── */
+.paneRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 12px 14px;
+	margin: 8px var(--sp-4);
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--bg);
+}
+.paneRow .label { font: 500 var(--fs-app) var(--font-body); color: var(--fg-2); }
+.paneRow .info  { color: var(--meta); font-size: var(--fs-app-sm); margin-left: 4px; }
+.sectionLabel {
+	font: 500 var(--fs-app-sm) var(--font-body);
+	color: var(--fg-2);
+	margin: 4px var(--sp-4) 8px;
+}
+.uploadBtn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	margin: 0 var(--sp-4) 12px;
+	padding: 12px;
+	border: 1px dashed var(--border);
+	border-radius: 10px;
+	background: var(--bg);
+	color: var(--muted);
+	font: 500 var(--fs-app-sm) var(--font-body);
+	cursor: pointer;
+}
+.uploadBtn:hover { border-color: var(--success); color: var(--success); }
+.field {
+	display: grid;
+	grid-template-columns: 80px 1fr;
+	align-items: center;
+	gap: 8px;
+	padding: 4px var(--sp-4);
+}
+.field label {
+	font: 500 var(--fs-app-sm) var(--font-body);
+	color: var(--muted);
+}
+.field select,
+.field input {
+	width: 100%;
+	padding: 6px 8px;
+	font: 400 var(--fs-app-sm) var(--font-body);
+	color: var(--fg-2);
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	outline: none;
+}
+.field select:focus,
+.field input:focus { border-color: var(--brand); }
+.field select:disabled,
+.field input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── bg thumb grid ────────────────────────────────────────────── */
+.bgGrid {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 8px;
+	padding: 0 var(--sp-4) var(--sp-4);
+}
+.bgThumb {
+	aspect-ratio: 1/1;
+	border-radius: 10px;
+	border: 1px solid transparent;
+	cursor: pointer;
+	transition: transform 150ms ease, border-color 150ms ease;
+	background: var(--surface-2);
+}
+.bgThumb:hover { transform: translateY(-1px); }
+.bgThumb.isActive {
+	border-color: var(--brand);
+	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 70%);
+}
+
+/* ─── toggle (switch) ──────────────────────────────────────────── */
+.toggle {
+	width: 36px;
+	height: 20px;
+	border: 0;
+	padding: 0;
+	background: var(--border-hi);
+	border-radius: 9999px;
+	position: relative;
+	cursor: pointer;
+	transition: background 150ms ease;
+	flex-shrink: 0;
+}
+.toggle::after {
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 16px;
+	height: 16px;
+	background: var(--accent-on);
+	border-radius: 50%;
+	box-shadow: 0 1px 3px rgba(22, 23, 29, 0.2);
+	transition: transform 150ms ease;
+}
+.toggle.isOn { background: var(--brand); }
+.toggle.isOn::after { transform: translateX(16px); }
+.toggle:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── slider cell (effect) ─────────────────────────────────────── */
+.sliderGrid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 8px;
+	padding: 0 var(--sp-4) var(--sp-4);
+}
+.sliderCell {
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--bg);
+	padding: 10px 12px;
+	display: grid;
+	grid-template-rows: auto auto;
+	gap: 8px;
+}
+.sliderCell .head { display: flex; align-items: center; gap: 6px; }
+.sliderCell .label { font: 500 11px var(--font-body); color: var(--fg-2); }
+.sliderCell .val { font: 500 11px var(--font-mono); color: var(--brand); margin-left: auto; }
+.sliderCell input[type=range] {
+	width: 100%;
+	height: 4px;
+	background: var(--border-hi);
+	border-radius: 2px;
+	outline: none;
+	-webkit-appearance: none;
+	cursor: pointer;
+}
+.sliderCell input[type=range]::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: var(--brand);
+	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
+	cursor: pointer;
+}
+.sliderCell input[type=range]::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+	background: var(--brand);
+	border: 0;
+	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand), transparent 80%);
+	cursor: pointer;
+}
+.sliderCell.full { grid-column: 1 / -1; }
+.sliderCell input[type=range]:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── cursor style grid ────────────────────────────────────────── */
+.cursorGrid {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 6px;
+	padding: 0 var(--sp-4) var(--sp-4);
+}
+.cursorCell {
+	aspect-ratio: 1/1;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background: var(--bg);
+	display: grid;
+	place-items: center;
+	cursor: pointer;
+	transition: border-color 150ms ease, box-shadow 150ms ease;
+	color: var(--muted);
+}
+.cursorCell:hover { border-color: var(--border-hi); color: var(--fg-2); }
+.cursorCell:disabled { opacity: 0.5; cursor: not-allowed; }
+.cursorCell:disabled:hover { border-color: var(--border); color: var(--muted); }
+.cursorCell.isActive {
+	border-color: var(--brand);
+	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand), transparent 75%);
+}
+
+/* ─── chat strip + input ───────────────────────────────────────── */
+.chatStrip {
+	padding: var(--sp-3) var(--sp-4) var(--sp-2);
+	border-bottom: 1px solid var(--border-soft);
+	background: var(--bg);
+}
+.chatStripRow {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	margin-bottom: 6px;
+}
+.ctxPill {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 3px 9px 3px 7px;
+	border-radius: var(--r-pill);
+	background: var(--success-soft);
+	color: var(--success);
+	font-family: var(--font-mono);
+	font-size: 10.5px;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+}
+.ctxPill .d {
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--success);
+}
+.stripActions {
+	margin-left: auto;
+	display: inline-flex;
+	gap: 2px;
+}
+.stripActions button {
+	width: 24px;
+	height: 24px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--meta);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.stripActions button:hover {
+	background: var(--surface-3);
+	color: var(--fg-2);
+}
+.stripActions button:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+.chatHint {
+	font-size: var(--fs-app-sm);
+	color: var(--muted);
+	letter-spacing: 0.005em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.msg { margin-bottom: var(--sp-3); }
+.msgHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: 0 var(--sp-1);
+	margin-bottom: var(--sp-1);
+}
+.msgAuthor {
+	font-family: var(--font-mono);
+	font-size: 10px;
+	letter-spacing: 0.08em;
+	color: var(--meta);
+	text-transform: uppercase;
+}
+.msgHead .right {
+	margin-left: auto;
+	display: inline-flex;
+	gap: 2px;
+}
+.msgHead .right button {
+	width: 22px;
+	height: 22px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-xs);
+	color: var(--meta);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
+}
+.msgHead .right button:hover {
+	background: var(--surface-3);
+	color: var(--fg-2);
+}
+.msgBubble {
+	padding: var(--sp-3) var(--sp-4);
+	border-radius: var(--r-md);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	font-size: var(--fs-app);
+	color: var(--fg-2);
+	line-height: 1.5;
+}
+.msgBubble .msgAuthor { color: var(--accent); }
+
+.chatInput {
+	padding: var(--sp-2) var(--sp-4) var(--sp-3);
+	border-top: 1px solid var(--border-soft);
+	background: var(--bg);
+}
+.chatInput textarea {
+	width: 100%;
+	min-height: 36px;
+	max-height: 120px;
+	resize: none;
+	padding: 8px var(--sp-3);
+	border-radius: var(--r-md);
+	border: 1px solid var(--border);
+	background: var(--bg);
+	font-family: var(--font-body);
+	font-size: var(--fs-app);
+	line-height: 1.4;
+	color: var(--fg);
+	outline: none;
+	transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
+}
+.chatInput textarea::placeholder { color: var(--meta); }
+.chatInput textarea:focus {
+	border-color: var(--accent);
+	box-shadow: var(--focus-ring);
+}
+.chatInput .actions {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	margin-top: 6px;
+}
+.modelPicker {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 5px 4px 5px 10px;
+	border-radius: var(--r-pill);
+	background: var(--surface-2);
+	font-family: var(--font-mono);
+	font-size: 11px;
+	color: var(--fg-2);
+	letter-spacing: 0.01em;
+	cursor: pointer;
+	transition: background var(--motion-fast) var(--ease);
+	border: 0;
+}
+.modelPicker:hover { background: var(--surface-3); }
+.reasoningBtn {
+	display: inline-flex;
+	align-items: center;
+	background: transparent;
+	border: 0;
+	padding: 0;
+	cursor: pointer;
+}
+.chip {
+	padding: 5px 10px;
+	border-radius: var(--r-pill);
+	background: var(--success-soft);
+	color: var(--success);
+	font-size: 10.5px;
+	font-weight: 500;
+	letter-spacing: 0.01em;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	transition: background var(--motion-fast) var(--ease);
+}
+.reasoningBtn:hover .chip { background: var(--success-soft); filter: brightness(1.1); }
+.chip .d {
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--success);
+}
+.sendBtn {
+	margin-left: auto;
+	width: 32px;
+	height: 32px;
+	display: grid;
+	place-items: center;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--fg);
+	border: 0;
+	cursor: pointer;
+	transition: color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
+}
+.sendBtn:hover { color: var(--accent); transform: scale(1.05); }
+.sendBtn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ─── transcript pane content ─────────────────────────────────── */
+.transcriptClipHead {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 0 4px 4px;
+	border-bottom: 1px solid var(--border-soft);
+	margin-bottom: 8px;
+}
+.transcriptClipHead .badge {
+	width: 22px;
+	height: 22px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--brand-soft);
+	color: var(--brand);
+	border-radius: var(--r-sm);
+	font: 700 12px/1 var(--font-mono);
+	flex-shrink: 0;
+}
+.transcriptClipHead .title {
+	font: 600 var(--fs-app)/1.2 var(--font-body);
+	color: var(--fg);
+	margin: 0;
+	padding: 0;
+}
+.transcriptClipHead .sub {
+	font: 400 11px/1.3 var(--font-mono);
+	color: var(--muted);
+	margin-top: 2px;
+}
+.transcriptFlow {
+	margin: 0;
+	padding: 0 4px;
+	font: 400 var(--fs-app-lg)/1.65 var(--font-body);
+	color: var(--fg);
+	text-wrap: pretty;
+}
+.transcriptFlow .tc {
+	display: inline-block;
+	margin: 0 4px;
+	padding: 1px 6px;
+	background: transparent;
+	color: var(--brand);
+	border-radius: var(--r-sm);
+	font: 500 11px/1.4 var(--font-mono);
+	vertical-align: middle;
+	white-space: nowrap;
+}
+
+
+/* ─── bottombar / timeline ─────────────────────────────────────── */
+.bottombar {
+	display: grid;
+	grid-template-columns: 1fr;
+	min-height: 0;
+	background: var(--bg);
+	overflow: hidden;
+}
+
+/* Region lanes (annotations / speed / zoom) inside the timeline body. */
+/* Lanes: fixed-width label column + one shared dnd-timeline surface column.
+   Both columns lay out 3 rows independently but with identical height (22px)
+   + gap (2px), so they line up without needing CSS grid row-spanning. */
+.lanes {
+	display: flex;
+	gap: 8px;
+	padding: 4px var(--sp-4) 2px;
+	flex-shrink: 0;
+	border-bottom: 1px solid var(--border-soft);
+}
+.laneLabelCol {
+	width: 64px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.laneLabelCell {
+	height: 22px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 4px;
+}
+.laneLabel {
+	font: 600 10px/1 var(--font-mono);
+	color: var(--meta);
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+.laneMeta {
+	font: 500 10.5px/1 var(--font-mono);
+	color: var(--muted);
+	min-width: 12px;
+	text-align: right;
+}
+.laneDelete {
+	width: 18px;
+	height: 18px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border: 0;
+	border-radius: var(--r-xs);
+	background: var(--danger-soft);
+	color: var(--danger);
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+}
+.laneDelete:hover {
+	filter: brightness(0.95);
+}
+.laneSurface {
+	flex: 1;
+	min-width: 0;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+/* F2.6 — vertical snap-guide lines at both edges of the region being
+   dragged/resized. Spans the full lane stack (parity with T24 on the
+   clip timeline). */
+.laneSnapGuide {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 2px;
+	background: var(--danger);
+	box-shadow: 0 0 6px color-mix(in oklch, var(--danger) 60%, transparent);
+	pointer-events: none;
+	z-index: 14;
+}
+/* F2.6 — floating tooltip with the live start – end range (parity with
+   T25 on the clip timeline). */
+.laneDragTooltip {
+	position: absolute;
+	top: -20px;
+	height: 18px;
+	padding: 0 8px;
+	background: var(--surface);
+	border: 1px solid var(--border-soft);
+	border-radius: 9px;
+	color: var(--fg-2);
+	font: 500 10.5px/18px var(--font-mono);
+	letter-spacing: 0.02em;
+	white-space: nowrap;
+	pointer-events: none;
+	z-index: 15;
+	box-shadow: var(--elev-card-soft);
+}
+.laneTrackRow {
+	position: relative;
+	height: 24px;
+	background: var(--surface-1);
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-sm);
+	overflow: hidden;
+}
+.laneEmpty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font: 500 11px/1 var(--font-body);
+	color: var(--muted);
+	opacity: 0.6;
+	pointer-events: none;
+}
+
+/* Lane pills: zoom / speed / annotation / skip. Flat wash fill + 1.5px frame
+ * per the v4 design (design/OpenScreen Editor v4.dc.html pillStyle) — no
+ * gradient, no tab caps. Selected pills gain an accent ring. */
+.zoomPill,
+.speedPill,
+.annotationPill,
+.skipPill {
+	--_pill: var(--accent);
+	--_wash: var(--accent-soft);
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 22px;
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 0 8px 0 7px;
+	background: var(--_wash);
+	border: 1.5px solid var(--_pill);
+	border-radius: var(--r-sm);
+	color: var(--fg);
+	font: 600 11px/1 var(--font-display);
+	letter-spacing: 0.01em;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+	overflow: hidden;
+	box-sizing: border-box;
+	pointer-events: auto;
+	cursor: pointer;
+	z-index: 2;
+}
+.zoomPill {
+	--_pill: var(--accent);
+	--_wash: var(--accent-soft);
+}
+.speedPill {
+	--_pill: var(--speed);
+	--_wash: var(--speed-wash);
+}
+.annotationPill {
+	--_pill: var(--annotation);
+	--_wash: var(--annotation-wash);
+}
+.skipPill {
+	--_pill: var(--danger);
+	--_wash: var(--danger-soft);
+}
+.lanePillSelected {
+	box-shadow: 0 0 0 3px color-mix(in oklch, var(--_pill) 35%, transparent);
+}
+.pillIcon {
+	width: 11px;
+	height: 11px;
+	flex-shrink: 0;
+	color: color-mix(in oklch, var(--_pill) 70%, var(--fg));
+}
+.pillValue {
+	color: var(--fg);
+	font-variant-numeric: tabular-nums;
+}
+
+.timelineHead {
+	display: flex;
+	align-items: center;
+	gap: var(--sp-2);
+	padding: var(--sp-2) var(--sp-4);
+	border-bottom: 1px solid var(--border-soft);
+	min-height: 40px;
+}
+.timelineHead .viewTools {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 3px;
+	background: var(--surface-2);
+	border: 1px solid var(--border-soft);
+	border-radius: var(--r-sm);
+}
+.timelineHead .vtBtn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--muted);
+	border-radius: var(--r-xs);
+	cursor: pointer;
+	transition: color 0.12s ease, background 0.12s ease;
+}
+.timelineHead .vtBtn:hover { color: var(--fg); background: var(--surface); }
+.timelineHead .vtBtn.isOn { color: var(--accent); background: var(--accent-wash); }
+.timelineHead .ratio {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 30px;
+	padding: 0 10px;
+	font-family: var(--font-mono);
+	font-size: var(--fs-app-sm);
+	color: var(--muted);
+	letter-spacing: 0.02em;
+	background: transparent;
+	border: 0;
+	border-left: 1px solid var(--border-soft);
+	margin-left: 4px;
+	cursor: pointer;
+	border-radius: 0 var(--r-sm) var(--r-sm) 0;
+}
+.timelineHead .ratio:hover { color: var(--fg); }
+.timelineHead .hintRow {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: var(--sp-4);
+}
+.timelineHead .hint {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-family: var(--font-display);
+	font-size: 11.5px;
+	color: var(--muted);
+	letter-spacing: 0.005em;
+}
+.timelineHead .hint .kbd {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 20px;
+	padding: 0 7px;
+	font-family: var(--font-mono);
+	font-size: 10.5px;
+	font-weight: 500;
+	color: var(--accent);
+	background: var(--accent-soft);
+	border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
+	border-radius: var(--r-xs);
+	letter-spacing: 0.02em;
+	white-space: nowrap;
+}
+.timelineBody {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	flex: 1;
+	overflow: hidden;
+}
+.timelineBody :global(.timelinePaneWrap) {
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+.zoombar {
+	padding: 4px var(--sp-4) 8px;
+	background: var(--bg);
+	flex-shrink: 0;
+	border-top: 1px solid var(--border-soft);
+}
+
+/* T11 — Navigator strip. Moved to TimelinePane.module.css so the
+   className (applied via TimelinePane's own styles import) actually
+   matches the CSS. CSS modules' class hashes don't match across
+   files. The shape and the elements are unchanged from axcut's
+   .timeline-navigator / .timeline-navigator-window. */
+.zoombar .zoomTrack {
+	position: relative;
+	height: 18px;
+	width: 100%;
+}
+.zoombar .zoomFill {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	width: 100%;
+	height: 6px;
+	background: var(--accent);
+	border-radius: 3px;
+	pointer-events: none;
+}
+
+/* Radix Slider — visible two-handle range, design-aligned. */
+.sliderRoot {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: 18px;
+	width: 100%;
+	touch-action: none;
+	user-select: none;
+}
+.sliderTrack {
+	position: relative;
+	height: 6px;
+	width: 100%;
+	background: var(--surface-2);
+	border-radius: 3px;
+	overflow: hidden;
+}
+.sliderRange {
+	position: absolute;
+	height: 100%;
+	background: var(--accent);
+	border-radius: 3px;
+}
+.sliderThumb {
+	display: block;
+	width: 14px;
+	height: 14px;
+	background: var(--accent);
+	border: 1px solid var(--bg);
+	border-radius: 3px;
+	cursor: ew-resize;
+	transition: box-shadow var(--motion-fast) var(--ease);
+}
+.sliderThumb:hover,
+.sliderThumb:focus-visible {
+	outline: none;
+	box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
+}
+
+/* ─── modals ───────────────────────────────────────────────────── */
+.modal {
+	position: fixed;
+	inset: 0;
+	display: none;
+	z-index: 100;
+}
+.modal.isOpen { display: block; }
+.modalBackdrop {
+	position: absolute;
+	inset: 0;
+	background: var(--overlay-dark);
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+}
+.modalCard {
+	position: relative;
+	width: min(960px, 92vw);
+	max-height: 88vh;
+	margin: 6vh auto 0;
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: var(--r-lg);
+	box-shadow: 0 24px 60px rgba(22, 23, 29, 0.5);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	color: var(--fg);
+}
+.modalCard.wide { width: min(720px, 92vw); }
+.modalHead {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	padding: 20px 24px 12px;
+	gap: 16px;
+}
+.modalHead h2 {
+	margin: 0;
+	font: 600 20px/1.3 var(--font-display);
+	color: var(--fg);
+}
+.modalHead p {
+	margin: 4px 0 0;
+	font: 400 var(--fs-app)/1.5 var(--font-body);
+	color: var(--muted);
+}
+.modalHead .closeBtn {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border-radius: var(--r-sm);
+	color: var(--muted);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+}
+.modalHead .closeBtn:hover { background: var(--surface-3); color: var(--fg); }
+.modalBody {
+	padding: 8px 24px 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	overflow: auto;
+}
+
+.btn {
+	height: 32px;
+	padding: 0 14px;
+	border-radius: var(--r-md);
+	font: 500 var(--fs-app)/1 var(--font-body);
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
+}
+.btnSecondary {
+	background: var(--surface);
+	color: var(--fg);
+	border: 1px solid var(--border);
+}
+.btnSecondary:hover { background: var(--surface-warm); border-color: var(--border-hi); }
+.btnPrimary {
+	background: var(--accent);
+	color: var(--accent-on);
+	border: 1px solid var(--accent);
+}
+.btnPrimary:hover { background: var(--brand-lo); }
+.btnPrimary:disabled {
+	background: var(--surface-2);
+	border-color: var(--border);
+	color: var(--muted);
+	cursor: not-allowed;
+}
+
+/* ─── Edit Clip modal — draggable source-range track ────────────── */
+.editClipRangeDragging {
+	box-shadow: 0 0 0 2px var(--accent-soft);
+}
+
+/* ─── media card (left panel media list) ───────────────────────── */
+.mediaList {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+.mediaCard {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--r-md);
+	overflow: hidden;
+	border: 1px solid var(--border-soft);
+	background: var(--bg);
+	cursor: pointer;
+	transition: border-color var(--motion-fast) var(--ease);
+}
+.mediaCard:hover { border-color: var(--brand); }
+.mediaCard .thumb {
+	aspect-ratio: 16 / 9;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgba(255, 255, 255, 0.95);
+}
+.thumbRed   { background: var(--danger); }
+.thumbGreen { background: var(--success); }
+.thumbAmber { background: var(--warn); }
+.thumbCyan  { background: var(--accent); }
+.mediaMeta {
+	padding: 8px 10px 10px;
+	background: var(--surface-2);
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.mediaMeta .name {
+	font: var(--fs-app) var(--font-body);
+	color: var(--fg);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.mediaMeta .row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+}
+.mediaMeta .timecode { font: 11px var(--font-mono); color: var(--muted); }
+.mediaMeta .size     { font: 11px var(--font-body);  color: var(--muted); }
+
+.importBtn {
+	margin: 8px var(--sp-3) 12px;
+	padding: 10px 12px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--sp-2);
+	border: 1px dashed var(--border-hi);
+	border-radius: var(--r-md);
+	background: transparent;
+	color: var(--muted);
+	font: var(--fs-app) var(--font-body);
+	font-weight: 500;
+	cursor: pointer;
+}
+.importBtn:hover { background: var(--surface-warm); color: var(--fg); border-color: var(--accent); }
+
+/* Custom range slider / progress bar */
+.scrubBar {
+	flex: 1;
+	min-width: 0;
+	position: relative;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+}
+.scrubTrack {
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 4px;
+	background: var(--border-hi);
+	border-radius: 9999px;
+	overflow: hidden;
+}
+.scrubProgress {
+	height: 100%;
+	background: var(--accent);
+	border-radius: 9999px;
+}
+.scrubInput {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+	z-index: 10;
+	margin: 0;
+}
+.scrubThumb {
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	background: #ffffff;
+	border-radius: 50%;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	pointer-events: none;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	opacity: 1;
+	transition: transform 100ms ease;
+}
+.scrubBar:hover .scrubThumb {
+	transform: translate(-50%, -50%) scale(1.2);
+}
+
+/* ─── AI provider settings (axcut parity) ────────────────────────── */
+
+.providerGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+.providerCard {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  background: var(--surface);
+  color: var(--fg-2);
+  cursor: pointer;
+  font: 500 13px/1.2 var(--font-body);
+  text-align: left;
+  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
+}
+.providerCard:hover { border-color: var(--border-hi); }
+.providerCard.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--fg);
+}
+.providerCard .head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.providerCard .label {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--fg);
+}
+.providerCard .model {
+  font: 500 11px var(--font-mono);
+  color: var(--muted);
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+}
+.statusPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font: 600 10px/1 var(--font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+}
+.statusPill.ready {
+  background: var(--success-soft, rgba(68, 175, 105, 0.18));
+  color: var(--success, #44af69);
+  border-color: color-mix(in srgb, var(--success, #44af69) 30%, transparent);
+}
+.statusPill.idle {
+  background: var(--surface-2);
+  color: var(--muted);
+  border-color: var(--border);
+}
+.statusPill.auth {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}
+.statusPill.pat {
+  background: color-mix(in srgb, var(--warn) 18%, transparent);
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
+}
+
+.providerForm {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.providerForm .title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.providerForm .title h3 {
+  margin: 0;
+  font: 600 16px var(--font-display);
+  color: var(--fg);
+}
+.providerForm .actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-soft);
+  margin-top: 4px;
+}
+.providerForm .actionsLeft {
+  display: flex;
+  gap: 8px;
+}
+.dangerBtn {
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
+  color: var(--danger);
+  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
+}
+.dangerBtn:hover {
+  background: color-mix(in srgb, var(--danger) 22%, transparent);
+  color: var(--danger);
+}
+
+.authPanel {
+  padding: 14px 16px;
+  border: 1px solid var(--brand);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+  border-radius: var(--r-md);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.authPanel strong {
+  display: block;
+  font: 600 13px var(--font-body);
+  color: var(--fg);
+}
+.authPanel p {
+  margin: 4px 0 0;
+  font: 400 12px/1.45 var(--font-body);
+  color: var(--muted);
+}
+.authCodeRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.authCodeRow code {
+  flex: 1;
+  font: 600 18px/1 var(--font-mono);
+  letter-spacing: 0.18em;
+  padding: 10px 14px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  color: var(--fg);
+  user-select: all;
+}
+.linkBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 32px;
+  border-radius: var(--r-md);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  font: 500 var(--fs-app) var(--font-body);
+  cursor: pointer;
+  text-decoration: none;
+}
+.linkBtn:hover { background: var(--surface-warm); border-color: var(--border-hi); }
+
+.errorRow {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: var(--r-md);
+  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
+  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
+  color: var(--danger);
+  font: 500 12px var(--font-body);
+}
+
+.iconBtn {
+  width: 28px;
+  height: 28px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: var(--r-sm);
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.iconBtn:hover { background: var(--surface-3); color: var(--fg); }
+.iconBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.backBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  height: 28px;
+  border-radius: var(--r-sm);
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  font: 500 12px var(--font-body);
+}
+.backBtn:hover { background: var(--surface-3); }
+.backBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── chat welcome (no provider connected) ──────────────────────── */
+/* .panelBody supplies the horizontal inset (var(--sp-3) var(--sp-4)); only the
+   top breathing room is ours, or the card sits twice as far in as the messages. */
+.chatWelcome {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--sp-3);
+  padding: var(--sp-2) 0 0;
+  text-align: left;
+}
+
+.chatWelcomeHero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 6px;
+  padding: 4px 0 0;
+}
+
+.chatWelcomeIcon {
+  color: var(--accent);
+  margin-bottom: 4px;
+}
+
+.chatWelcomeTitle {
+  margin: 0;
+  font: 600 14px/1.3 var(--font-body);
+  color: var(--fg);
+  letter-spacing: -0.01em;
+}
+
+.chatWelcomeSubtitle {
+  margin: 0;
+  font: 400 12px/1.5 var(--font-body);
+  color: var(--muted);
+  max-width: 32ch;
+}
+
+/* Native list markers — no flex on the ul/li, or the items stop being
+   list-items and the markers vanish. padding-inline-start keeps them inside
+   the card in both writing directions. */
+.chatWelcomeFeatures {
+  /* explicit: the global reset sets list-style: none on every ul */
+  list-style: disc;
+  margin: 0;
+  padding: 10px 12px;
+  padding-inline-start: 26px;
+  background: var(--surface);
+  border: 1px solid var(--border-soft);
+  border-radius: var(--r-md);
+  font: 400 12px/1.45 var(--font-body);
+  color: var(--fg-2);
+}
+.chatWelcomeFeatures li + li { margin-top: 6px; }
+.chatWelcomeFeatures li::marker { color: var(--accent); }
+
+.chatWelcomeCta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 34px;
+  border-radius: var(--r-md);
+  background: var(--accent);
+  color: var(--accent-on);
+  border: 1px solid var(--accent);
+  font: 600 12.5px var(--font-body);
+  cursor: pointer;
+  transition: filter 120ms ease;
+}
+.chatWelcomeCta:hover { filter: brightness(0.95); }
+.chatWelcomeCta:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.chatWelcomeDisclaimer {
+  margin: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font: 400 10.5px/1.45 var(--font-body);
+  color: var(--muted);
+}
+
+.chatWelcomeDisclaimerIcon {
+  flex: 0 0 auto;
+  margin-top: 2px;
+  opacity: 0.8;
+}
diff --git a/src/components/ai-edition/Preview.test.tsx b/src/components/ai-edition/Preview.test.tsx
index 651e4ab91..6a9ef9d6b 100644
--- a/src/components/ai-edition/Preview.test.tsx
+++ b/src/components/ai-edition/Preview.test.tsx
@@ -253,9 +253,31 @@ describe("Preview keeps the stage when the media fails", () => {
 		expect(errorCard()).not.toBeInTheDocument();
 	});
 
+	// Taking the card's own advice — import a replacement — grows the source list
+	// without touching the dead <video>: it is not remounted, nothing re-fires
+	// `error`, and dropping the card here would leave a frozen stage with no
+	// explanation and no Retry button.
+	it("keeps the card when an unrelated source joins the timeline", () => {
+		const { rerender } = renderPreview({
+			videoSources: [source("moved")],
+			clips: [clip("clip_a", "moved", 0, 60)],
+		});
+		click("fail-moved");
+		expect(errorCard()).toBeInTheDocument();
+
+		rerender(
+			previewProps({
+				videoSources: [source("moved"), source("fresh")],
+				clips: [clip("clip_a", "moved", 0, 60), clip("clip_b", "fresh", 60, 90)],
+			}),
+		);
+
+		expect(errorCard()).toBeInTheDocument();
+	});
+
 	// Swapping the media out has to clear the failure, or the card would outlive
 	// the file that caused it.
-	it("clears the failure when the source set changes", () => {
+	it("clears the failure when the failed asset leaves the timeline", () => {
 		const { rerender } = renderPreview({
 			videoSources: [source("truncated")],
 			clips: [clip("clip_a", "truncated", 0, 60)],
diff --git a/src/components/ai-edition/Preview.tsx b/src/components/ai-edition/Preview.tsx
index 89e5db7c6..2764f2c5c 100644
--- a/src/components/ai-edition/Preview.tsx
+++ b/src/components/ai-edition/Preview.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { CameraFullscreenRegion, ZoomFocus } from "@/components/video-editor/types";
 import { useScopedT } from "@/contexts/I18nContext";
 import type {
@@ -87,8 +87,10 @@ export function Preview({
 	// later moved or deleted, or one left behind when its clip was removed — and
 	// handing the asset list straight to the canvas made `videoSources[0]` (the
 	// source VirtualPreview mounts first) that dead asset: its <video> errored,
-	// latched the failure flag below, and collapsed the WHOLE preview to the
-	// empty state while every clip on the timeline was perfectly playable.
+	// and the whole preview collapsed to the empty state while every clip on the
+	// timeline was perfectly playable. (A media error no longer collapses
+	// anything — see below — but mounting an asset nothing references is still
+	// the wrong source to put the decode clock on.)
 	// Ordered by timeline position, so the first source mounted is the one the
 	// playhead actually needs at 0:00.
 	// The fallback is load-bearing: the first clip of a fresh import is minted
@@ -128,13 +130,19 @@ export function Preview({
 	// the mounted one is.
 	const [failure, setFailure] = useState<{ assetId: string; detail: string } | null>(null);
 	const [retryToken, setRetryToken] = useState(0);
+	// Dropped only when the FAILED asset itself leaves the timeline — not
+	// whenever the source list changes shape. Appending a replacement recording
+	// (which is the advice the card gives) grows the list without touching the
+	// dead <video>: it is not remounted, nothing re-fires `error`, and clearing
+	// here would take the card and its Retry button away from a stage that is
+	// still frozen. A same-id source whose URL changed does re-run the load
+	// algorithm, and the resulting recovery clears the failure on its own.
 	const sourceKey = previewSources.map((source) => `${source.id}::${source.src}`).join("|");
-	const previousSourceKeyRef = useRef<string | null>(null);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: keyed on the source list's identity, read through previewSources
 	useEffect(() => {
-		if (previousSourceKeyRef.current !== sourceKey) {
-			previousSourceKeyRef.current = sourceKey;
-			setFailure(null);
-		}
+		setFailure((prev) =>
+			prev && !previewSources.some((source) => source.id === prev.assetId) ? null : prev,
+		);
 	}, [sourceKey]);
 	const handleVideoError = useCallback((assetId: string, detail: string) => {
 		setFailure({ assetId, detail });
diff --git a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
index 852263624..58975ad08 100644
--- a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
+++ b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
@@ -136,7 +136,11 @@ function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)]) {
 	const onVideoError = vi.fn<(assetId: string, detail: string) => void>();
 	const onVideoRecovered = vi.fn<(assetId: string) => void>();
 	const onTimeChange = vi.fn<(timeSec: number) => void>();
-	const tree = (retryToken: number) => (
+	let seekRequestId = 0;
+	const tree = (
+		retryToken: number,
+		seekTarget: { timeSec: number; requestId: number } | null = null,
+	) => (
 		<VirtualPreview
 			videoSources={SOURCES}
 			clips={clips}
@@ -144,6 +148,7 @@ function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)]) {
 			onVideoError={onVideoError}
 			onVideoRecovered={onVideoRecovered}
 			retryToken={retryToken}
+			seekTarget={seekTarget}
 		/>
 	);
 	const view = render(tree(0));
@@ -162,6 +167,12 @@ function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)]) {
 		onVideoRecovered,
 		onTimeChange,
 		bumpRetryToken: (token: number) => view.rerender(tree(token)),
+		/** Move the playhead the way the shell does — a new seekTarget requestId. */
+		scrubTo: (timeSec: number) =>
+			act(() => {
+				seekRequestId += 1;
+				view.rerender(tree(0, { timeSec, requestId: seekRequestId }));
+			}),
 	};
 }
 
@@ -212,6 +223,24 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(video.playCalls).toBeGreaterThan(0);
 	});
 
+	// …and "at reload time" is the load-bearing half. Resolving it when the error
+	// fired, or from the last position sampled off the element, both give 4 here —
+	// only reading the live playhead when the timer runs gives 7.
+	it("honours a scrub made during the backoff", () => {
+		const { video, scrubTo } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+
+		video.fail(3);
+		scrubTo(7);
+		advance(RETRY_DELAYS_MS[0]);
+
+		video.loadedMetadata();
+		expect(video.currentTime).toBeCloseTo(7, 5);
+	});
+
 	// An `error` does not fire `pause`, so `v.paused` — the gate the rest of the
 	// tick relies on — is still false while the decoder is dead. Without its own
 	// guard the tick would keep taking clip-boundary decisions on a frozen clock
@@ -261,11 +290,13 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_SRC_NOT_SUPPORTED (4) — code 4");
 	});
 
-	// Success re-arms the budget. Without this a long session slowly walks into
-	// the same dead end — #395 with a longer fuse.
-	it("re-arms the budget on a successful load", () => {
+	// Getting PAST the bad spot re-arms the budget. Without any re-arming a long
+	// session slowly walks into the same dead end — #395 with a longer fuse.
+	it("re-arms the budget once playback gets past the failure point", () => {
 		const { video, onVideoError, onVideoRecovered } = mount();
 
+		video.seekTo(4);
+		tick();
 		for (const delay of RETRY_DELAYS_MS) {
 			video.fail(3);
 			advance(delay);
@@ -273,6 +304,9 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		video.loadedMetadata();
 		expect(onVideoRecovered).toHaveBeenCalledWith("a1");
 
+		video.seekTo(5); // decoded past where it died
+		tick();
+
 		// A fresh failure now gets the full budget again rather than being fatal.
 		video.fail(3);
 		advance(RETRY_DELAYS_MS[0]);
@@ -280,6 +314,31 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length + 1);
 	});
 
+	// The livelock this fix originally shipped with. `loadedmetadata` only means
+	// the container header parsed — a truncated recording re-fires it on every
+	// reload — so re-arming the budget there handed it back faster than failures
+	// could spend it: a 400 ms reload loop, forever, and the user never saw the
+	// card. Progress past the failure point, not a completed load, is the signal.
+	it("still gives up on a file that reloads cleanly and fails at the same spot", () => {
+		const { video, onVideoError } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+
+		// Three rounds of "the header parses, the data does not".
+		for (let round = 0; round < RETRY_DELAYS_MS.length + 1; round += 1) {
+			video.fail(3);
+			advance(5_000);
+			video.loadedMetadata(); // header fine, decoder willing
+			video.seekTo(4); // …and straight back to the byte that killed it
+			tick();
+		}
+
+		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_DECODE (3) — code 3");
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length);
+	});
+
 	it("treats an error with no MediaError as transient", () => {
 		const { video, onVideoError } = mount();
 
@@ -314,7 +373,12 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		const { view, video } = mount();
 
 		video.fail(3);
+		// Assert the cancellation itself: `reloadActiveSource` bails on a null
+		// videoRef anyway, so a surviving timer would still leave loadCalls at 0
+		// and prove nothing about the cleanup this test exists for.
+		expect(vi.getTimerCount()).toBe(1);
 		view.unmount();
+		expect(vi.getTimerCount()).toBe(0);
 		advance(5_000);
 
 		expect(video.loadCalls).toBe(0);
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index 0d6766f47..3d1e54ea8 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -139,8 +139,10 @@ export function VirtualPreview({
 	const isProgrammaticSeekRef = useRef(false);
 	const pendingSeekRef = useRef<{ sourceTimeSec: number; play: boolean } | null>(null);
 	// Reload bookkeeping for the mounted source (see `reloadActiveSource`).
-	// `attempts` is spent by failures and reset by a SUCCESS, never by elapsed
-	// time — a budget that only counts up is issue #395 with a longer fuse.
+	// `attempts` is spent by failures and re-armed by playing past the point one
+	// died at — never by elapsed time, and never by a reload merely completing.
+	// A budget that only counts up is issue #395 with a longer fuse; one handed
+	// back too easily is a reload loop that never surfaces anything at all.
 	const retryRef = useRef<{ attempts: number; timer: number | null }>({
 		attempts: 0,
 		timer: null,
@@ -152,6 +154,10 @@ export function VirtualPreview({
 	// after load(), and 0 after a load that failed before decoding a frame, so
 	// it cannot be the fallback resume point — that is a silent rewind.
 	const lastGoodSourceTimeRef = useRef(0);
+	// Where the decoder died, while a reload is outstanding. Playing PAST it is
+	// what re-arms the retry budget: see markSourceLoaded for why a reload
+	// completing is not evidence of anything.
+	const failedAtSourceTimeRef = useRef<number | null>(null);
 	// Which clip the rAF tick below believes is currently playing — set
 	// whenever a seek unambiguously resolves one (via locateVirtualPosition,
 	// timeline position → clip). Passed back into locateSourcePosition so
@@ -323,6 +329,14 @@ export function VirtualPreview({
 				// where a reload has to put the playhead back if it cannot
 				// resolve one from the timeline.
 				lastGoodSourceTimeRef.current = v.currentTime;
+				// …and here is the only place that can prove a reload WORKED:
+				// the decoder is past the bytes it died on. A quarter second of
+				// margin so re-decoding the same frame doesn't count as progress.
+				const failedAt = failedAtSourceTimeRef.current;
+				if (failedAt !== null && v.currentTime > failedAt + 0.25) {
+					failedAtSourceTimeRef.current = null;
+					retryRef.current.attempts = 0;
+				}
 			}
 			// À L'ARRÊT, le `<video>` ne pilote PLUS la position de la timeline.
 			//
@@ -518,6 +532,18 @@ export function VirtualPreview({
 			const video = videoRef.current;
 			if (!video) return;
 
+			if (pendingSeekRef.current) {
+				// A load is in flight (a reload, or a source that has just been
+				// swapped in), so the seek below is a no-op — assigning
+				// `currentTime` before metadata only sets the default playback
+				// start position, and `onLoadedMetadata` is about to apply the
+				// queued resume over the top of it. Re-aim that resume instead:
+				// it is older intent than the gesture the user just made.
+				pendingSeekRef.current = {
+					sourceTimeSec: position.sourceTimeSec,
+					play: shouldContinuePlayback,
+				};
+			}
 			isProgrammaticSeekRef.current = true;
 			updateVirtualTime(position.virtualTimeSec);
 			if (Math.abs(video.currentTime - position.sourceTimeSec) > 0.01) {
@@ -594,12 +620,17 @@ export function VirtualPreview({
 		}, delayMs);
 	}, []);
 
-	/** A frame decoded — whatever went wrong is over. Success, not elapsed time,
-	 *  is what re-arms the retry budget, and it is the only signal the caller has
-	 *  that a failure it is showing can be dropped. */
-	const markSourceHealthy = useCallback(() => {
+	/** The element is loaded again, so the reload is over and any failure the
+	 *  caller is showing can go. Note what this does NOT do: re-arm the retry
+	 *  budget. `loadedmetadata`/`canplay` prove the container header parsed and
+	 *  the decoder is willing — not that the bytes that killed us are readable.
+	 *  A truncated recording (intact header, unreadable data — the case the error
+	 *  card exists for) re-fires both on every reload, so re-arming here would
+	 *  hand back the budget faster than failures could spend it: a 400 ms reload
+	 *  loop, forever, with nothing ever shown to the user. Getting PAST the
+	 *  failure point is the only honest evidence, and the rAF tick below owns it. */
+	const markSourceLoaded = useCallback(() => {
 		recoveringRef.current = false;
-		retryRef.current.attempts = 0;
 		const id = activeSourceRef.current?.id;
 		if (id) onVideoRecovered?.(id);
 	}, [onVideoRecovered]);
@@ -612,6 +643,7 @@ export function VirtualPreview({
 	useEffect(() => {
 		retryRef.current = { attempts: 0, timer: null };
 		recoveringRef.current = false;
+		failedAtSourceTimeRef.current = null;
 		return () => {
 			if (retryRef.current.timer !== null) {
 				window.clearTimeout(retryRef.current.timer);
@@ -627,6 +659,7 @@ export function VirtualPreview({
 	useEffect(() => {
 		if (!retryToken) return;
 		retryRef.current.attempts = 0;
+		failedAtSourceTimeRef.current = null;
 		reloadActiveSource(false, 0);
 	}, [retryToken]);
 
@@ -683,7 +716,7 @@ export function VirtualPreview({
 							playsInline
 							onLoadedMetadata={(e) => {
 								setLoadState("ready");
-								markSourceHealthy();
+								markSourceLoaded();
 								// ponytail: forward the raw duration (possibly NaN for
 								// MediaRecorder WebMs) to the parent. handleLoadedMetadata
 								// falls back to a 60s seed when it isn't finite so the
@@ -720,7 +753,7 @@ export function VirtualPreview({
 							onWaiting={() => setLoadState("loading")}
 							onCanPlay={() => {
 								setLoadState("ready");
-								markSourceHealthy();
+								markSourceLoaded();
 							}}
 							onError={(e) => {
 								const el = e.currentTarget;
@@ -760,6 +793,11 @@ export function VirtualPreview({
 								if (disposition === "retry") {
 									console.warn("[preview] <video> failed, reloading", context);
 									retryRef.current.attempts = attemptsSpent + 1;
+									// The bar the reload has to clear before the budget is
+									// handed back (see the rAF tick).
+									failedAtSourceTimeRef.current = Number.isFinite(el.currentTime)
+										? el.currentTime
+										: lastGoodSourceTimeRef.current;
 									// Deliberately no pause(): a 400 ms reload should be a blip
 									// the user never sees, and pausing here would flip the
 									// shell's transport for it. What keeps the rAF from
diff --git a/src/i18n/locales/vi/editor.json b/src/i18n/locales/vi/editor.json
index bed9ceebf..e272183f6 100644
--- a/src/i18n/locales/vi/editor.json
+++ b/src/i18n/locales/vi/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Xem trước webcam (kéo để đổi vị trí)",
 		"mediaError": {
 			"title": "Xem trước đã dừng",
-			"description": "Không thể giải mã video. Tệp có thể đã bị di chuyển hoặc vẫn đang được ghi xong — dự án của bạn vẫn nguyên vẹn.",
+			"description": "Không thể giải mã video. Tệp có thể đã bị di chuyển hoặc vẫn chưa được ghi xong — dự án của bạn vẫn nguyên vẹn.",
 			"retry": "Thử lại",
 			"detail": "Chi tiết: {{detail}}"
 		}
diff --git a/technical-documentation/architecture/preview.md b/technical-documentation/architecture/preview.md
index d30bc0002..0a83ac5fd 100644
--- a/technical-documentation/architecture/preview.md
+++ b/technical-documentation/architecture/preview.md
@@ -258,9 +258,15 @@ What replaced it, in two layers:
   process is still writing reports as unsupported); everything else — including
   an `error` event carrying no `MediaError` — rides `RETRY_DELAYS_MS`. The
   reload is a plain `load()`: re-assigning `src` first would start a second load
-  that aborts the first and emit a spurious abort. The budget is reset by a
-  **successful** load, not by elapsed time — without that, the fourth transient
-  failure of a long session is terminal, which is #395 with a longer fuse.
+  that aborts the first and emit a spurious abort. The budget is re-armed by
+  **playing past the position the failure happened at** (tracked in the rAF
+  tick). Both obvious alternatives are wrong: never re-arming makes the third
+  transient failure of a long session terminal — #395 with a longer fuse — while
+  re-arming when the reload *completes* is worse still, because
+  `loadedmetadata`/`canplay` prove the header parsed and the decoder is willing,
+  not that the bytes that killed us are readable. A truncated recording re-fires
+  both on every reload, so that version loops at 400 ms forever and never
+  surfaces the card at all.
 - **Resume through the existing path.** The reload queues `pendingSeekRef` and
   lets `onLoadedMetadata` restore position and playback — the same path a
   cross-asset seek uses, so the component has one resume path rather than two.

From 6598fe20254e8e4b07d2e006f2f99947ba1fb180 Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 17:27:56 +0200
Subject: [PATCH 03/10] refactor(preview): read the mounted source from the
 mirrors the rAF uses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops the `activeSourceRef` added two commits ago. It was a third mirror
written during render, and the two places that read it — the resume
position's asset check and the recovery notification — can read the
mounted source the way the rAF tick already does, from `videoSourcesRef`
and `sourceIndexRef`.

Removes one render-phase ref write rather than moving it into an effect:
an effect here would leave this file with seven render-time mirrors and
one that is different for no reason a reader could infer. Both call sites
run from a timer or a media event, well after commit, so neither can see
a value the render phase discarded.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/ai-edition/VirtualPreview.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index 3d1e54ea8..884718e3d 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -217,8 +217,6 @@ export function VirtualPreview({
 	playbackClipsRef.current = playbackClips;
 	const videoSourcesRef = useRef(videoSources);
 	videoSourcesRef.current = videoSources;
-	const activeSourceRef = useRef(activeSource);
-	activeSourceRef.current = activeSource;
 	const sourceIndexRef = useRef(sourceIndex);
 	sourceIndexRef.current = sourceIndex;
 	const virtualTimeSecRef = useRef(virtualTimeSec);
@@ -595,8 +593,10 @@ export function VirtualPreview({
 				// `locateVirtualPosition` answers for whatever clip the playhead
 				// is on, which after a boundary advance can belong to a DIFFERENT
 				// asset — its source time would be a meaningless offset into the
-				// file we are about to reload.
-				const clipIsOnThisSource = position?.clip.assetId === activeSourceRef.current?.id;
+				// file we are about to reload. The mounted source is read from the
+				// same two mirrors the rAF tick uses, rather than kept in a third.
+				const clipIsOnThisSource =
+					position?.clip.assetId === videoSourcesRef.current[sourceIndexRef.current]?.id;
 				if (position && clipIsOnThisSource) {
 					// The rAF resumes against this; leaving it stale would resolve
 					// the next tick against the clip we were on before the failure.
@@ -631,7 +631,7 @@ export function VirtualPreview({
 	 *  failure point is the only honest evidence, and the rAF tick below owns it. */
 	const markSourceLoaded = useCallback(() => {
 		recoveringRef.current = false;
-		const id = activeSourceRef.current?.id;
+		const id = videoSourcesRef.current[sourceIndexRef.current]?.id;
 		if (id) onVideoRecovered?.(id);
 	}, [onVideoRecovered]);
 

From c763156de9c8c94ee63794bd04421176c5a061d4 Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 17:31:33 +0200
Subject: [PATCH 04/10] fix(preview): key the reload budget on the media, not
 just the asset id
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The <video> is keyed on the asset id alone — deliberately, so two assets
resolving to one URL still remount — which means re-pointing an asset at
a different file re-runs the load algorithm on the SAME element. The
retry state, keyed the same way, survived that: a budget spent on the old
file would be charged to the new one, making its first error fatal with
no retry at all.

Nothing re-points an asset today (every asset mutation in the store
preserves originalPath, and addAsset always mints a new id), so this is
unreachable through the UI. It is one dependency, and it is the shape a
"relink the moved file" flow would take — which is precisely what the new
error card's copy invites, and precisely the case where a fresh budget is
the point.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../VirtualPreview.mediaError.test.tsx        | 36 +++++++++++++++++--
 src/components/ai-edition/VirtualPreview.tsx  | 16 ++++++---
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
index 58975ad08..1329e0223 100644
--- a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
+++ b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
@@ -132,17 +132,18 @@ function driveVideo(element: HTMLVideoElement) {
 
 const SOURCES: VideoSource[] = [{ id: "a1", src: "file:///tmp/a1.mp4", label: "a1" }];
 
-function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)]) {
+function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)], sources: VideoSource[] = SOURCES) {
 	const onVideoError = vi.fn<(assetId: string, detail: string) => void>();
 	const onVideoRecovered = vi.fn<(assetId: string) => void>();
 	const onTimeChange = vi.fn<(timeSec: number) => void>();
 	let seekRequestId = 0;
+	let activeSources = sources;
 	const tree = (
 		retryToken: number,
 		seekTarget: { timeSec: number; requestId: number } | null = null,
 	) => (
 		<VirtualPreview
-			videoSources={SOURCES}
+			videoSources={activeSources}
 			clips={clips}
 			onTimeChange={onTimeChange}
 			onVideoError={onVideoError}
@@ -167,6 +168,12 @@ function mount(clips: AxcutClip[] = [clip("clip_1", "a1", 0)]) {
 		onVideoRecovered,
 		onTimeChange,
 		bumpRetryToken: (token: number) => view.rerender(tree(token)),
+		/** Re-point the mounted asset at a different file, keeping its id. */
+		repointSourceTo: (src: string) =>
+			act(() => {
+				activeSources = activeSources.map((source) => ({ ...source, src }));
+				view.rerender(tree(0));
+			}),
 		/** Move the playhead the way the shell does — a new seekTarget requestId. */
 		scrubTo: (timeSec: number) =>
 			act(() => {
@@ -367,6 +374,31 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(video.loadCalls).toBe(loadsBefore + 1);
 	});
 
+	// The element is keyed on the asset id alone, so pointing an asset at a new
+	// file reloads the SAME element — and a budget spent on the old file must not
+	// be charged to the new one. Nothing in the app re-points an asset today, but
+	// it is the shape a "relink the moved file" flow would take, and this is the
+	// component's own contract rather than the app's current use of it.
+	it("gives a re-pointed source a fresh budget", () => {
+		const { video, onVideoError, repointSourceTo } = mount();
+
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+
+		repointSourceTo("file:///tmp/a1-restored.mp4");
+		onVideoError.mockClear();
+		const loadsBefore = video.loadCalls;
+
+		video.fail(3);
+		advance(RETRY_DELAYS_MS[0]);
+
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(loadsBefore + 1);
+	});
+
 	// A reload scheduled for an element that is going away must never fire: the
 	// <video> is keyed on the asset id, so the timer can outlive its element.
 	it("does not reload an unmounted element", () => {
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index 884718e3d..42df3bb95 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -635,11 +635,17 @@ export function VirtualPreview({
 		if (id) onVideoRecovered?.(id);
 	}, [onVideoRecovered]);
 
-	// Reload bookkeeping belongs to the MOUNTED element: the <video> is keyed on
-	// the asset id, so a source swap replaces it, and a reload scheduled for the
-	// old one must never fire against its replacement. React runs this cleanup
+	// Reload bookkeeping belongs to the MOUNTED MEDIA, so it is keyed on the URL
+	// as well as the asset id — the element is keyed on the id alone (see the
+	// <video> below), so re-pointing an asset at a different file re-runs the
+	// load algorithm on the SAME element, and a budget spent on the old file
+	// must not be charged to the new one. Nothing re-points an asset today; the
+	// relink this card's copy invites would be the first, and it is the exact
+	// case where a fresh budget is the whole point.
+	// The cleanup matters for the swap that IS reachable: a reload scheduled for
+	// the old element must never fire against its replacement. React runs it
 	// before any queued macrotask can.
-	// biome-ignore lint/correctness/useExhaustiveDependencies: re-run on source swap
+	// biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the mounted media changes
 	useEffect(() => {
 		retryRef.current = { attempts: 0, timer: null };
 		recoveringRef.current = false;
@@ -650,7 +656,7 @@ export function VirtualPreview({
 				retryRef.current.timer = null;
 			}
 		};
-	}, [activeSourceKey]);
+	}, [activeSourceKey, activeSource?.src]);
 
 	// The caller's Retry button. Same path as an automatic reload so the two
 	// cannot drift, but with a fresh budget and no delay: the user clicked

From 70f7a12eaa3212841e123c242c41a31aa83b8355 Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 17:40:48 +0200
Subject: [PATCH 05/10] test(preview): pin the "any healthy source clears the
 card" rule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review asked for the opposite: match the recovered asset id against the
failed one before clearing. That would keep "Preview stopped" pinned over
a clip that is playing perfectly.

Exactly one source is mounted at a time (`videoSources[sourceIndex]` in
VirtualPreview), and it is always the one the playhead needs, so a
healthy report can only come from the source currently on screen —
whichever asset it belongs to. Ignoring the id is the intent, not an
oversight, and the code now says so. Moving back onto the dead asset
remounts it and earns a fresh retry cycle, so the card returns by itself
if it should.

Applying the proposed diff fails the new test, which is the point.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/ai-edition/Preview.test.tsx | 19 +++++++++++++++++++
 src/components/ai-edition/Preview.tsx      |  9 +++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/ai-edition/Preview.test.tsx b/src/components/ai-edition/Preview.test.tsx
index 6a9ef9d6b..db84828b8 100644
--- a/src/components/ai-edition/Preview.test.tsx
+++ b/src/components/ai-edition/Preview.test.tsx
@@ -240,6 +240,25 @@ describe("Preview keeps the stage when the media fails", () => {
 		expect(errorCard()).not.toBeInTheDocument();
 	});
 
+	// …including when the healthy report comes from a DIFFERENT asset. Only one
+	// source is mounted at a time, so that report means the playhead has moved
+	// onto a clip that plays — and a "Preview stopped" card over a picture that
+	// is visibly fine is the #395 latch again, quieter. Scrubbing back onto the
+	// dead asset remounts it and brings the card back on its own.
+	it("drops the card when the playhead moves onto a healthy asset", () => {
+		renderPreview({
+			videoSources: [source("moved"), source("fresh")],
+			clips: [clip("clip_a", "moved", 0, 10), clip("clip_b", "fresh", 10, 20)],
+		});
+
+		click("fail-moved");
+		expect(errorCard()).toBeInTheDocument();
+
+		click("recover-fresh");
+		expect(errorCard()).not.toBeInTheDocument();
+		expect(canvas()).toBeInTheDocument();
+	});
+
 	it("bumps the retry token and clears the card when the user retries", () => {
 		renderPreview({ videoSources: [source("truncated")], clips: [] });
 		expect(canvas()).toHaveAttribute("data-retry-token", "0");
diff --git a/src/components/ai-edition/Preview.tsx b/src/components/ai-edition/Preview.tsx
index 2764f2c5c..aaf04f2db 100644
--- a/src/components/ai-edition/Preview.tsx
+++ b/src/components/ai-edition/Preview.tsx
@@ -147,6 +147,15 @@ export function Preview({
 	const handleVideoError = useCallback((assetId: string, detail: string) => {
 		setFailure({ assetId, detail });
 	}, []);
+	// The reported asset id is deliberately ignored. Exactly one source is mounted
+	// at a time (`videoSources[sourceIndex]` in VirtualPreview), and it is always
+	// the one the playhead needs — so ANY source reporting healthy means the stage
+	// is showing a real picture, whichever asset it belongs to. Matching the id
+	// against the failed one instead would keep "Preview stopped" pinned over a
+	// clip that is playing perfectly, until the user happened to scrub back to the
+	// dead one: a card outliving its failure, which is the latch of #395 again in
+	// a quieter form. Moving back onto the dead asset remounts it and earns a
+	// fresh retry cycle, so the card returns on its own if it should.
 	// Fires on every canplay, so on every seek: `setFailure(null)` against an
 	// already-null state is a React bail-out, and the healthy path costs nothing.
 	const handleVideoRecovered = useCallback(() => {

From d4e66d90ff30fdaf3729a1fd7f8d4eeb33c6177c Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 18:13:27 +0200
Subject: [PATCH 06/10] perf(preview): read currentTime once per frame in the
 sampling block
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`currentTime` is a live accessor into the media pipeline, and the block
added for the reload budget read it three times per tick — 60×/s. One
read, three uses.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/launch.json                          | 6 ++++++
 src/components/ai-edition/VirtualPreview.tsx | 9 ++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/.claude/launch.json b/.claude/launch.json
index dbe4cdc38..894e0c848 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -15,6 +15,12 @@
       "port": 5201,
       "env": { "NO_ELECTRON": "1" }
     },
+    {
+      "name": "app",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--", "--port", "5203", "--strictPort"],
+      "port": 5203
+    },
     {
       "name": "v4preview",
       "runtimeExecutable": "node",
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index 42df3bb95..4bf6f6fc8 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -322,16 +322,19 @@ export function VirtualPreview({
 			// in a separate rAF effect). Cheap; <video>.readyState >= 2 guards
 			// against drawing a black frame into the cursor overlay.
 			if (v.readyState >= 2) {
-				setSourceTimeSec(v.currentTime);
+				// One read, three uses: `currentTime` is a live accessor into the
+				// media pipeline and this block runs 60×/s.
+				const sourceTime = v.currentTime;
+				setSourceTimeSec(sourceTime);
 				// Sampled here, where the decoder is known good, because this is
 				// where a reload has to put the playhead back if it cannot
 				// resolve one from the timeline.
-				lastGoodSourceTimeRef.current = v.currentTime;
+				lastGoodSourceTimeRef.current = sourceTime;
 				// …and here is the only place that can prove a reload WORKED:
 				// the decoder is past the bytes it died on. A quarter second of
 				// margin so re-decoding the same frame doesn't count as progress.
 				const failedAt = failedAtSourceTimeRef.current;
-				if (failedAt !== null && v.currentTime > failedAt + 0.25) {
+				if (failedAt !== null && sourceTime > failedAt + 0.25) {
 					failedAtSourceTimeRef.current = null;
 					retryRef.current.attempts = 0;
 				}

From 0a3765d4551295b2ce25d1a955105bc38f549fca Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 18:14:09 +0200
Subject: [PATCH 07/10] chore: drop the local Electron launch config from the
 branch

Added while setting up a manual test run; every other entry in
launch.json is deliberately headless (NO_ELECTRON), and a config that
spawns a window is a local convenience, not part of this fix.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/launch.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/.claude/launch.json b/.claude/launch.json
index 894e0c848..dbe4cdc38 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -15,12 +15,6 @@
       "port": 5201,
       "env": { "NO_ELECTRON": "1" }
     },
-    {
-      "name": "app",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--", "--port", "5203", "--strictPort"],
-      "port": 5203
-    },
     {
       "name": "v4preview",
       "runtimeExecutable": "node",

From a450b837af210b12707fd37c8f40e316d09a1986 Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 19:22:09 +0200
Subject: [PATCH 08/10] fix(preview): stop the reload cycle a two-spot file can
 keep alive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Found by breaking a real recording and watching the log rather than the
tests. One corrupt file produced THREE full retry episodes, twelve
reloads in total, where the design says two reloads and one card.

Two causes, both mine:

- The budget is re-armed by playing past the position the decoder died
  at. That file had two bad spots 0.47 s apart — further than the 0.25 s
  margin — so each failure looked like progress past the OTHER one and
  handed the budget back every cycle.
- Worse, the fatal path never cleared `failedAtSourceTimeRef`, so even
  after giving up and showing the card, the next tick past the old
  failure point re-armed a source already declared dead and started the
  whole thing again.

The fatal path now clears it: once we have given up, only Retry or a
media change re-arms. And `MAX_RELOADS_PER_MEDIA` (twice the nominal
budget) caps reloads for one mounted media whatever the heuristic
concludes — a backstop that does not depend on getting the margin right.

Copy follows the evidence too. Both failures seen in the field were on a
file that was present and readable — a demuxer seek failure, then an
audio decode failure — so "may have been moved" was leading with the one
cause never observed. It now leads with damage, in all 13 locales.

Tests: both regressions reproduced in jsdom (twelve reloads become four),
and both confirmed by mutation. The first version of the ceiling test was
vacuous — it never fired loadedmetadata, so the recovery flag kept the
tick quiet and the re-arm it was meant to exercise never happened.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../VirtualPreview.mediaError.test.tsx        | 52 ++++++++++++++++++-
 src/components/ai-edition/VirtualPreview.tsx  | 16 +++++-
 src/components/ai-edition/mediaError.test.ts  | 17 ++++++
 src/components/ai-edition/mediaError.ts       | 18 +++++++
 src/i18n/locales/ar/editor.json               |  2 +-
 src/i18n/locales/en/editor.json               |  2 +-
 src/i18n/locales/es/editor.json               |  2 +-
 src/i18n/locales/fr/editor.json               |  2 +-
 src/i18n/locales/it/editor.json               |  2 +-
 src/i18n/locales/ja-JP/editor.json            |  2 +-
 src/i18n/locales/ko-KR/editor.json            |  2 +-
 src/i18n/locales/pt-BR/editor.json            |  2 +-
 src/i18n/locales/ru/editor.json               |  2 +-
 src/i18n/locales/tr/editor.json               |  2 +-
 src/i18n/locales/vi/editor.json               |  2 +-
 src/i18n/locales/zh-CN/editor.json            |  2 +-
 src/i18n/locales/zh-TW/editor.json            |  2 +-
 17 files changed, 114 insertions(+), 15 deletions(-)

diff --git a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
index 1329e0223..56f0a8f6f 100644
--- a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
+++ b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { AxcutClip } from "@/lib/ai-edition/schema";
-import { RETRY_DELAYS_MS } from "./mediaError";
+import { MAX_RELOADS_PER_MEDIA, RETRY_DELAYS_MS } from "./mediaError";
 import { type VideoSource, VirtualPreview } from "./VirtualPreview";
 
 // Same hand-driven rAF as VirtualPreview.playback.test.tsx: the tick is a
@@ -374,6 +374,56 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(video.loadCalls).toBe(loadsBefore + 1);
 	});
 
+	// Field regression, caught by breaking a real recording: once the card is up,
+	// playback getting past the failure point must NOT hand the budget back. It
+	// used to, so the next bad spot started the whole retry cycle again — three
+	// full episodes for one broken file.
+	it("does not re-arm itself after it has given up", () => {
+		const { video, onVideoError } = mount();
+
+		video.play();
+		video.seekTo(4);
+		tick();
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
+			video.fail(3);
+			advance(delay);
+		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+		const loadsAtGiveUp = video.loadCalls;
+
+		// Playback carries on past where it died — the shape that used to re-arm.
+		video.seekTo(6);
+		tick();
+		video.fail(3);
+		advance(5_000);
+
+		expect(video.loadCalls).toBe(loadsAtGiveUp);
+		expect(onVideoError).toHaveBeenCalledTimes(2); // still terminal, no new cycle
+	});
+
+	// The same file had two bad spots 0.47 s apart, each looking like progress
+	// past the other, so the budget re-armed on every cycle. The ceiling is the
+	// backstop that keeps the reload count finite regardless.
+	it("stops reloading at the ceiling when two bad spots keep re-arming the budget", () => {
+		const { video, onVideoError } = mount();
+
+		video.play();
+		// Alternate failure points further apart than the progress margin. Each
+		// reload completes (a corrupt file's header parses every time), and the
+		// tick then sees the playhead past the OTHER bad spot — which is what
+		// re-armed the budget forever in the field.
+		for (let i = 0; i < 12; i += 1) {
+			video.seekTo(i % 2 === 0 ? 4 : 6);
+			tick();
+			video.fail(3);
+			advance(5_000);
+			video.loadedMetadata();
+		}
+
+		expect(video.loadCalls).toBeLessThanOrEqual(MAX_RELOADS_PER_MEDIA);
+		expect(onVideoError).toHaveBeenCalled();
+	});
+
 	// The element is keyed on the asset id alone, so pointing an asset at a new
 	// file reloads the SAME element — and a budget spent on the old file must not
 	// be charged to the new one. Nothing in the app re-points an asset today, but
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index 4bf6f6fc8..68c3e7d3b 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -158,6 +158,10 @@ export function VirtualPreview({
 	// what re-arms the retry budget: see markSourceLoaded for why a reload
 	// completing is not evidence of anything.
 	const failedAtSourceTimeRef = useRef<number | null>(null);
+	// Reloads spent on the mounted media, ever — the ceiling the budget cannot
+	// talk its way past (see MAX_RELOADS_PER_MEDIA). Reset only when the media
+	// changes or the user retries, never by playback progress.
+	const reloadsRef = useRef(0);
 	// Which clip the rAF tick below believes is currently playing — set
 	// whenever a seek unambiguously resolves one (via locateVirtualPosition,
 	// timeline position → clip). Passed back into locateSourcePosition so
@@ -582,6 +586,7 @@ export function VirtualPreview({
 			retryRef.current.timer = null;
 		}
 		recoveringRef.current = true;
+		reloadsRef.current += 1;
 		setLoadState("loading");
 		retryRef.current.timer = window.setTimeout(() => {
 			retryRef.current.timer = null;
@@ -653,6 +658,7 @@ export function VirtualPreview({
 		retryRef.current = { attempts: 0, timer: null };
 		recoveringRef.current = false;
 		failedAtSourceTimeRef.current = null;
+		reloadsRef.current = 0;
 		return () => {
 			if (retryRef.current.timer !== null) {
 				window.clearTimeout(retryRef.current.timer);
@@ -669,6 +675,7 @@ export function VirtualPreview({
 		if (!retryToken) return;
 		retryRef.current.attempts = 0;
 		failedAtSourceTimeRef.current = null;
+		reloadsRef.current = 0;
 		reloadActiveSource(false, 0);
 	}, [retryToken]);
 
@@ -773,7 +780,7 @@ export function VirtualPreview({
 								const hasSource = Boolean(el.getAttribute("src")) || Boolean(el.currentSrc);
 								const attemptsSpent = retryRef.current.attempts;
 								const disposition = hasSource
-									? mediaErrorDisposition(description.code, attemptsSpent)
+									? mediaErrorDisposition(description.code, attemptsSpent, reloadsRef.current)
 									: "ignore";
 								const detail = formatMediaError(description);
 								// The code is the whole diagnosis, and it used to be thrown
@@ -787,6 +794,7 @@ export function VirtualPreview({
 									readyState: el.readyState,
 									currentTime: el.currentTime,
 									attemptsSpent,
+									reloadsSpent: reloadsRef.current,
 									disposition,
 								};
 								if (disposition === "ignore") {
@@ -822,6 +830,12 @@ export function VirtualPreview({
 								console.error("[preview] <video> failed for good", context);
 								pendingSeekRef.current = null;
 								recoveringRef.current = false;
+								// Once we have given up, nothing playback does may re-arm the
+								// budget: leaving this set let the rAF's progress check fire
+								// on the NEXT bad spot and start the whole cycle again, which
+								// is what "3 episodes for one broken file" looked like in the
+								// field. Only Retry or a media change re-arms from here.
+								failedAtSourceTimeRef.current = null;
 								setLoadState("error");
 								// An 'error' doesn't itself fire 'pause', so make sure the shell's
 								// transport state (single source of truth, see NewEditorShell's
diff --git a/src/components/ai-edition/mediaError.test.ts b/src/components/ai-edition/mediaError.test.ts
index 5a3a433a1..d11c0c0b6 100644
--- a/src/components/ai-edition/mediaError.test.ts
+++ b/src/components/ai-edition/mediaError.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
 	describeMediaError,
 	formatMediaError,
+	MAX_RELOADS_PER_MEDIA,
 	mediaErrorDisposition,
 	RETRY_DELAYS_MS,
 	retryDelayMs,
@@ -67,6 +68,22 @@ describe("mediaErrorDisposition", () => {
 		expect(mediaErrorDisposition(null, 0)).toBe("retry");
 		expect(mediaErrorDisposition(null, RETRY_DELAYS_MS.length)).toBe("fatal");
 	});
+
+	// Measured in the field on a corrupted recording: two bad spots 0.47 s apart,
+	// each one looking like "progress" past the other, re-armed the budget on
+	// every cycle. The ceiling is what makes the reload count finite whatever the
+	// re-arming heuristic concludes.
+	it("is fatal once the reload ceiling is reached, whatever the budget says", () => {
+		expect(mediaErrorDisposition(3, 0, MAX_RELOADS_PER_MEDIA - 1)).toBe("retry");
+		expect(mediaErrorDisposition(3, 0, MAX_RELOADS_PER_MEDIA)).toBe("fatal");
+		expect(mediaErrorDisposition(2, 0, MAX_RELOADS_PER_MEDIA + 5)).toBe("fatal");
+	});
+
+	// …but never for a cancelled load. Making code 1 terminal at the ceiling is
+	// exactly how #395 would come back through the side door.
+	it("still ignores an aborted load at the ceiling", () => {
+		expect(mediaErrorDisposition(1, 0, MAX_RELOADS_PER_MEDIA * 10)).toBe("ignore");
+	});
 });
 
 describe("retryDelayMs", () => {
diff --git a/src/components/ai-edition/mediaError.ts b/src/components/ai-edition/mediaError.ts
index b626f7134..9e2eaeee4 100644
--- a/src/components/ai-edition/mediaError.ts
+++ b/src/components/ai-edition/mediaError.ts
@@ -58,6 +58,19 @@ export function formatMediaError(description: MediaErrorDescription): string {
 	return description.message ? `${label} — ${description.message}` : label;
 }
 
+/**
+ * Hard ceiling on reloads for one mounted media, whatever the budget says.
+ *
+ * The budget is re-armed by playback getting past the point it died at, which
+ * is a heuristic — and a file with two bad spots FURTHER APART than that margin
+ * re-arms it on every cycle, because each failure looks like progress relative
+ * to the other. Measured on a deliberately corrupted recording: failures at
+ * 22.528 s and 22.997 s, 0.47 s apart, produced four reloads per episode
+ * instead of two. This is the backstop that keeps the count finite whatever the
+ * heuristic concludes. Reset only by a media change or the user's Retry.
+ */
+export const MAX_RELOADS_PER_MEDIA = RETRY_DELAYS_MS.length * 2;
+
 export type MediaErrorDisposition = "ignore" | "retry" | "fatal";
 
 /**
@@ -71,8 +84,13 @@ export type MediaErrorDisposition = "ignore" | "retry" | "fatal";
 export function mediaErrorDisposition(
 	code: number | null,
 	attemptsSpent: number,
+	reloadsSpent = 0,
 ): MediaErrorDisposition {
+	// Still ignored at the ceiling: a cancelled load says nothing about the
+	// media, and making it terminal once the counter is high is how #395 would
+	// come back through the side door.
 	if (code === 1) return "ignore";
+	if (reloadsSpent >= MAX_RELOADS_PER_MEDIA) return "fatal";
 	const budget = code === 4 ? UNSUPPORTED_RETRY_BUDGET : RETRY_DELAYS_MS.length;
 	return attemptsSpent < budget ? "retry" : "fatal";
 }
diff --git a/src/i18n/locales/ar/editor.json b/src/i18n/locales/ar/editor.json
index 204034acd..80dedcf6d 100644
--- a/src/i18n/locales/ar/editor.json
+++ b/src/i18n/locales/ar/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "معاينة كاميرا الويب (اسحب لتغيير الموضع)",
 		"mediaError": {
 			"title": "توقّفت المعاينة",
-			"description": "تعذّر فك ترميز الفيديو. ربما نُقل الملف أو ما زال قيد الكتابة — مشروعك نفسه سليم.",
+			"description": "تعذّر فك ترميز الفيديو. قد يكون الملف تالفًا، أو ما زال قيد الكتابة، أو لم يعد في المكان الذي يتوقعه المشروع — مشروعك نفسه سليم.",
 			"retry": "إعادة المحاولة",
 			"detail": "التفاصيل: {{detail}}"
 		}
diff --git a/src/i18n/locales/en/editor.json b/src/i18n/locales/en/editor.json
index f1a336bb0..429803556 100644
--- a/src/i18n/locales/en/editor.json
+++ b/src/i18n/locales/en/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Webcam preview (drag to reposition)",
 		"mediaError": {
 			"title": "Preview stopped",
-			"description": "The video couldn't be decoded. The file may have been moved, or it may still be finishing writing — your project itself is intact.",
+			"description": "The video couldn't be decoded. The file may be damaged, still being written, or no longer where the project expects it — your project itself is intact.",
 			"retry": "Try again",
 			"detail": "Details: {{detail}}"
 		}
diff --git a/src/i18n/locales/es/editor.json b/src/i18n/locales/es/editor.json
index 0160fa679..0e052ad78 100644
--- a/src/i18n/locales/es/editor.json
+++ b/src/i18n/locales/es/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Vista previa de la webcam (arrastra para reubicar)",
 		"mediaError": {
 			"title": "Vista previa detenida",
-			"description": "No se pudo decodificar el vídeo. Puede que el archivo se haya movido o que aún se esté terminando de escribir; tu proyecto está intacto.",
+			"description": "No se pudo decodificar el vídeo. El archivo puede estar dañado, aún escribiéndose, o ya no estar donde el proyecto lo espera; tu proyecto está intacto.",
 			"retry": "Reintentar",
 			"detail": "Detalles: {{detail}}"
 		}
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
index 60b065428..5df6ab06d 100644
--- a/src/i18n/locales/fr/editor.json
+++ b/src/i18n/locales/fr/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Aperçu webcam (glisser pour repositionner)",
 		"mediaError": {
 			"title": "Aperçu interrompu",
-			"description": "La vidéo n'a pas pu être décodée. Le fichier a peut-être été déplacé, ou son écriture n'est pas terminée — votre projet, lui, est intact.",
+			"description": "La vidéo n'a pas pu être décodée. Le fichier est peut-être endommagé, en cours d'écriture, ou plus à l'emplacement attendu — votre projet, lui, est intact.",
 			"retry": "Réessayer",
 			"detail": "Détails : {{detail}}"
 		}
diff --git a/src/i18n/locales/it/editor.json b/src/i18n/locales/it/editor.json
index cf5a2b644..c19fc3543 100644
--- a/src/i18n/locales/it/editor.json
+++ b/src/i18n/locales/it/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Anteprima webcam (trascina per riposizionare)",
 		"mediaError": {
 			"title": "Anteprima interrotta",
-			"description": "Non è stato possibile decodificare il video. Il file potrebbe essere stato spostato o essere ancora in fase di scrittura: il progetto è intatto.",
+			"description": "Non è stato possibile decodificare il video. Il file potrebbe essere danneggiato, ancora in scrittura o non più dove il progetto lo cerca: il progetto è intatto.",
 			"retry": "Riprova",
 			"detail": "Dettagli: {{detail}}"
 		}
diff --git a/src/i18n/locales/ja-JP/editor.json b/src/i18n/locales/ja-JP/editor.json
index 46ef5164a..516640491 100644
--- a/src/i18n/locales/ja-JP/editor.json
+++ b/src/i18n/locales/ja-JP/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "ウェブカメラのプレビュー（ドラッグで位置変更）",
 		"mediaError": {
 			"title": "プレビューを停止しました",
-			"description": "動画をデコードできませんでした。ファイルが移動されたか、まだ書き込み中の可能性があります。プロジェクト自体は損なわれていません。",
+			"description": "動画をデコードできませんでした。ファイルが破損しているか、まだ書き込み中か、プロジェクトが参照している場所にない可能性があります。プロジェクト自体は損なわれていません。",
 			"retry": "再試行",
 			"detail": "詳細: {{detail}}"
 		}
diff --git a/src/i18n/locales/ko-KR/editor.json b/src/i18n/locales/ko-KR/editor.json
index 32e5af668..f2ebcdc01 100644
--- a/src/i18n/locales/ko-KR/editor.json
+++ b/src/i18n/locales/ko-KR/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "웹캠 미리보기 (끌어서 위치 변경)",
 		"mediaError": {
 			"title": "미리보기가 중단되었습니다",
-			"description": "영상을 디코딩할 수 없습니다. 파일이 이동되었거나 아직 저장이 끝나지 않았을 수 있습니다. 프로젝트 자체는 그대로입니다.",
+			"description": "영상을 디코딩할 수 없습니다. 파일이 손상되었거나, 아직 저장 중이거나, 프로젝트가 기대한 위치에 없을 수 있습니다. 프로젝트 자체는 그대로입니다.",
 			"retry": "다시 시도",
 			"detail": "세부 정보: {{detail}}"
 		}
diff --git a/src/i18n/locales/pt-BR/editor.json b/src/i18n/locales/pt-BR/editor.json
index c8321be40..c5ab7154a 100644
--- a/src/i18n/locales/pt-BR/editor.json
+++ b/src/i18n/locales/pt-BR/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Pré-visualização da webcam (arraste para reposicionar)",
 		"mediaError": {
 			"title": "Pré-visualização interrompida",
-			"description": "Não foi possível decodificar o vídeo. O arquivo pode ter sido movido ou ainda estar sendo gravado — seu projeto continua intacto.",
+			"description": "Não foi possível decodificar o vídeo. O arquivo pode estar danificado, ainda sendo gravado ou não estar mais onde o projeto espera — seu projeto continua intacto.",
 			"retry": "Tentar novamente",
 			"detail": "Detalhes: {{detail}}"
 		}
diff --git a/src/i18n/locales/ru/editor.json b/src/i18n/locales/ru/editor.json
index c5337daee..881ea68d3 100644
--- a/src/i18n/locales/ru/editor.json
+++ b/src/i18n/locales/ru/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Предпросмотр камеры (перетащите, чтобы переместить)",
 		"mediaError": {
 			"title": "Предпросмотр остановлен",
-			"description": "Не удалось декодировать видео. Возможно, файл был перемещён или ещё дописывается — сам проект не пострадал.",
+			"description": "Не удалось декодировать видео. Файл может быть повреждён, ещё записываться или больше не находиться там, где его ожидает проект — сам проект не пострадал.",
 			"retry": "Повторить",
 			"detail": "Подробности: {{detail}}"
 		}
diff --git a/src/i18n/locales/tr/editor.json b/src/i18n/locales/tr/editor.json
index 545f22ba2..dfe1832fd 100644
--- a/src/i18n/locales/tr/editor.json
+++ b/src/i18n/locales/tr/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Web kamerası önizlemesi (taşımak için sürükleyin)",
 		"mediaError": {
 			"title": "Önizleme durdu",
-			"description": "Video çözümlenemedi. Dosya taşınmış ya da hâlâ yazılıyor olabilir — projeniz olduğu gibi duruyor.",
+			"description": "Video çözümlenemedi. Dosya bozulmuş, hâlâ yazılıyor ya da projenin beklediği yerde olmayabilir — projeniz olduğu gibi duruyor.",
 			"retry": "Yeniden dene",
 			"detail": "Ayrıntılar: {{detail}}"
 		}
diff --git a/src/i18n/locales/vi/editor.json b/src/i18n/locales/vi/editor.json
index e272183f6..ee17bc1b8 100644
--- a/src/i18n/locales/vi/editor.json
+++ b/src/i18n/locales/vi/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "Xem trước webcam (kéo để đổi vị trí)",
 		"mediaError": {
 			"title": "Xem trước đã dừng",
-			"description": "Không thể giải mã video. Tệp có thể đã bị di chuyển hoặc vẫn chưa được ghi xong — dự án của bạn vẫn nguyên vẹn.",
+			"description": "Không thể giải mã video. Tệp có thể đã hỏng, vẫn đang được ghi, hoặc không còn ở nơi dự án mong đợi — dự án của bạn vẫn nguyên vẹn.",
 			"retry": "Thử lại",
 			"detail": "Chi tiết: {{detail}}"
 		}
diff --git a/src/i18n/locales/zh-CN/editor.json b/src/i18n/locales/zh-CN/editor.json
index 666ad7f80..41be4e22f 100644
--- a/src/i18n/locales/zh-CN/editor.json
+++ b/src/i18n/locales/zh-CN/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "摄像头预览（拖动可重新定位）",
 		"mediaError": {
 			"title": "预览已停止",
-			"description": "无法解码该视频。文件可能已被移动，或仍在写入中——你的项目本身完好无损。",
+			"description": "无法解码该视频。文件可能已损坏、仍在写入中，或已不在项目预期的位置——你的项目本身完好无损。",
 			"retry": "重试",
 			"detail": "详细信息：{{detail}}"
 		}
diff --git a/src/i18n/locales/zh-TW/editor.json b/src/i18n/locales/zh-TW/editor.json
index 931326526..de53c8676 100644
--- a/src/i18n/locales/zh-TW/editor.json
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -366,7 +366,7 @@
 		"webcamPreview": "攝影機預覽（拖曳可重新定位）",
 		"mediaError": {
 			"title": "預覽已停止",
-			"description": "無法解碼此影片。檔案可能已被移動，或仍在寫入中——你的專案本身完好無缺。",
+			"description": "無法解碼此影片。檔案可能已損毀、仍在寫入中，或已不在專案預期的位置——你的專案本身完好無缺。",
 			"retry": "重試",
 			"detail": "詳細資訊：{{detail}}"
 		}

From b5dae78b86a04c4295d5cd7a0168135a68d1bc9c Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Wed, 19 Aug 2026 20:09:44 +0200
Subject: [PATCH 09/10] fix(preview): keep one demuxer seek in flight instead
 of ~60 a second
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is the cause of #395, not a mitigation of it.

Dragging the playhead publishes a new time every rAF — V4Timeline already
coalesces pointermove to that, "to avoid IPC flooding" — the shell mints
a seekTarget per publish, and VirtualPreview turned every one into a
`currentTime` write. Roughly sixty demuxer seeks a second on a 1080p
H.264 file the native compositor is decoding at the same time. Chromium
fails one:

  MEDIA_ERR_NETWORK (2) — PipelineStatus::PIPELINE_ERROR_READ:
  FFmpegDemuxer: demuxer seek failed

Captured on an instrumented build of main, on a recording ffmpeg decodes
end to end without a single defect, in this console order: the scrub's
own React warning, then the seek failure, then the preview collapsing to
"Add a video to get started". That is the reported bug, start to finish.

`applySourceTime` now holds at most one seek open: a target arriving
while the element is still `seeking` replaces the queue rather than
stacking, and is applied on `seeked`. Latest wins — an intermediate scrub
position was never a destination the user asked to see. Both seek entry
points route through it, and `seekToSourceTime` gains the pending-resume
re-aim its sibling already had.

The programmatic-seek flag is now raised at the moment of the actual
write. Raising it on a deferred target would let a frame on which no seek
happened consume it.

Tests: four cases against an element that models a real one on the axis
that matters (a write starts a seek, the element stays seeking until the
browser says otherwise). Confirmed by mutation — without the guard the
same scrub produces [2, 4, 6, 8] instead of [2] then [2, 8].

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../VirtualPreview.seekStorm.test.tsx         | 150 ++++++++++++++++++
 src/components/ai-edition/VirtualPreview.tsx  |  73 +++++++--
 2 files changed, 210 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ai-edition/VirtualPreview.seekStorm.test.tsx

diff --git a/src/components/ai-edition/VirtualPreview.seekStorm.test.tsx b/src/components/ai-edition/VirtualPreview.seekStorm.test.tsx
new file mode 100644
index 000000000..bb0d97cbd
--- /dev/null
+++ b/src/components/ai-edition/VirtualPreview.seekStorm.test.tsx
@@ -0,0 +1,150 @@
+// @vitest-environment jsdom
+import "@testing-library/jest-dom";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { AxcutClip } from "@/lib/ai-edition/schema";
+import { type VideoSource, VirtualPreview } from "./VirtualPreview";
+
+// The root cause of issue #395, in a test.
+//
+// Dragging the playhead publishes a new time every rAF, the shell mints a
+// seekTarget per publish, and this component used to turn each one into a
+// `currentTime` write — ~60 demuxer seeks a second on a 1080p H.264 file the
+// native compositor is decoding at the same time. Chromium eventually fails
+// one (`PIPELINE_ERROR_READ: FFmpegDemuxer: demuxer seek failed`, observed on a
+// file ffmpeg decodes end to end without a defect), and on main any media error
+// emptied the editor.
+
+afterEach(cleanup);
+
+const SOURCES: VideoSource[] = [{ id: "a1", src: "file:///tmp/a1.mp4", label: "a1" }];
+const CLIPS: AxcutClip[] = [
+	{
+		id: "clip_1",
+		assetId: "a1",
+		sourceStartSec: 0,
+		sourceEndSec: 10,
+		timelineStartSec: 0,
+		timelineEndSec: 10,
+		wordRefs: [],
+		origin: "user",
+		reason: "",
+	},
+];
+
+/** A `<video>` that behaves like a real one on the only axis this file tests:
+ *  a `currentTime` write starts a seek, and the element stays `seeking` until
+ *  the browser says otherwise. */
+function driveVideo(element: HTMLVideoElement) {
+	let currentTime = 0;
+	let seeking = false;
+	const writes: number[] = [];
+	Object.defineProperty(element, "currentTime", {
+		configurable: true,
+		get: () => currentTime,
+		set: (next: number) => {
+			currentTime = next;
+			seeking = true;
+			writes.push(next);
+		},
+	});
+	Object.defineProperty(element, "seeking", { configurable: true, get: () => seeking });
+	Object.defineProperty(element, "paused", { configurable: true, get: () => true });
+	Object.defineProperty(element, "readyState", { configurable: true, get: () => 4 });
+	Object.defineProperty(element, "duration", { configurable: true, get: () => 10 });
+	element.play = vi.fn(() => Promise.resolve());
+	element.pause = vi.fn();
+	return {
+		writes,
+		get currentTime() {
+			return currentTime;
+		},
+		/** What the browser does when the demuxer is done. */
+		finishSeek: () => {
+			seeking = false;
+			act(() => {
+				fireEvent.seeked(element);
+			});
+		},
+	};
+}
+
+function mount() {
+	let requestId = 0;
+	const tree = (seekTarget: { timeSec: number; requestId: number } | null) => (
+		<VirtualPreview videoSources={SOURCES} clips={CLIPS} seekTarget={seekTarget} />
+	);
+	const view = render(tree(null));
+	const element = view.container.querySelector("video");
+	if (!element) throw new Error("no <video> rendered");
+	const video = driveVideo(element as HTMLVideoElement);
+	act(() => {
+		fireEvent.loadedMetadata(element);
+	});
+	video.writes.length = 0;
+	return {
+		video,
+		/** One rAF-throttled scrub publish, the way the shell emits them. */
+		scrubTo: (timeSec: number) =>
+			act(() => {
+				requestId += 1;
+				view.rerender(tree({ timeSec, requestId }));
+			}),
+	};
+}
+
+describe("VirtualPreview keeps one demuxer seek in flight (issue #395 root cause)", () => {
+	it("does not stack a seek onto an element that is still seeking", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(2);
+		expect(video.writes).toEqual([2]); // demuxer busy from here
+
+		scrubTo(4);
+		scrubTo(6);
+		scrubTo(8);
+
+		// Three more scrub publishes, no extra seeks: this is the storm that made
+		// the demuxer fail.
+		expect(video.writes).toEqual([2]);
+	});
+
+	it("applies the newest target once the demuxer is free, not the queued ones", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(2);
+		scrubTo(4);
+		scrubTo(6);
+		scrubTo(8);
+
+		video.finishSeek();
+
+		// The last position the user asked for — the intermediate ones were never
+		// destinations, and replaying them would be the storm again, delayed.
+		expect(video.writes).toEqual([2, 8]);
+		expect(video.currentTime).toBe(8);
+	});
+
+	it("stops seeking once the playhead settles", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(5);
+		video.finishSeek();
+		expect(video.writes).toEqual([5]);
+
+		// The drag ended on the position already reached: nothing more to do.
+		scrubTo(5);
+		video.finishSeek();
+		expect(video.writes).toEqual([5]);
+	});
+
+	it("still serves an ordinary seek immediately when nothing is in flight", () => {
+		const { video, scrubTo } = mount();
+
+		scrubTo(3);
+		video.finishSeek();
+		scrubTo(7);
+
+		expect(video.writes).toEqual([3, 7]);
+	});
+});
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index 68c3e7d3b..a69a336ce 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -137,6 +137,8 @@ export function VirtualPreview({
 	const videoFrameRef = useRef<HTMLDivElement | null>(null);
 
 	const isProgrammaticSeekRef = useRef(false);
+	// The seek that arrived while another was still running (see applySourceTime).
+	const pendingScrubTargetRef = useRef<number | null>(null);
 	const pendingSeekRef = useRef<{ sourceTimeSec: number; play: boolean } | null>(null);
 	// Reload bookkeeping for the mounted source (see `reloadActiveSource`).
 	// `attempts` is spent by failures and re-armed by playing past the point one
@@ -490,6 +492,39 @@ export function VirtualPreview({
 		frame.style.transform = `translate(${transform.translateXPercent}%, ${transform.translateYPercent}%) scale(${transform.scale})`;
 	}, [zoomRegions, virtualTimeSec]);
 
+	/**
+	 * Write a source position onto the element with AT MOST ONE demuxer seek in
+	 * flight; a target that arrives while one is running replaces the queue and
+	 * is applied on `seeked`. Latest wins — an intermediate scrub position is
+	 * never a destination the user asked to see.
+	 *
+	 * This is the root cause of #395, not a mitigation of it. Dragging the
+	 * playhead makes V4Timeline publish a new time every rAF (it already
+	 * coalesces pointermove to that, "to avoid IPC flooding"), the shell mints a
+	 * seekTarget per publish, and this component turned each one into a
+	 * `currentTime` write: ~60 demuxer seeks a second on a 1080p H.264 file that
+	 * the native compositor is decoding at the same time. Chromium eventually
+	 * fails one — `PIPELINE_ERROR_READ: FFmpegDemuxer: demuxer seek failed`,
+	 * reproduced on a file ffmpeg decodes end to end without a single defect —
+	 * and before this branch, any media error emptied the editor.
+	 */
+	const applySourceTime = useCallback((video: HTMLVideoElement, sourceTimeSec: number) => {
+		if (!Number.isFinite(sourceTimeSec)) return;
+		if (Math.abs(video.currentTime - sourceTimeSec) <= 0.01) {
+			pendingScrubTargetRef.current = null;
+			return;
+		}
+		if (video.seeking) {
+			pendingScrubTargetRef.current = sourceTimeSec;
+			return;
+		}
+		pendingScrubTargetRef.current = null;
+		// Flagged at the moment of the ACTUAL write: a deferred target must not
+		// have its flag consumed by a frame on which no seek happened.
+		isProgrammaticSeekRef.current = true;
+		video.currentTime = sourceTimeSec;
+	}, []);
+
 	const seekToVirtualTime = useCallback(
 		(nextVirtualTimeSec: number, preservePlayback = false, forceResume = false) => {
 			const position = locateVirtualPosition(clips, nextVirtualTimeSec);
@@ -549,11 +584,8 @@ export function VirtualPreview({
 					play: shouldContinuePlayback,
 				};
 			}
-			isProgrammaticSeekRef.current = true;
 			updateVirtualTime(position.virtualTimeSec);
-			if (Math.abs(video.currentTime - position.sourceTimeSec) > 0.01) {
-				video.currentTime = position.sourceTimeSec;
-			}
+			applySourceTime(video, position.sourceTimeSec);
 			if (shouldContinuePlayback) {
 				// A rejection here means playback never actually started, so the browser
 				// never fired 'play' — nothing to reconcile, just avoid an unhandled
@@ -563,17 +595,23 @@ export function VirtualPreview({
 				});
 			}
 		},
-		[clips, videoSources, sourceIndex, updateVirtualTime],
+		[applySourceTime, clips, videoSources, sourceIndex, updateVirtualTime],
 	);
 
-	const seekToSourceTime = useCallback((sourceTimeSec: number) => {
-		const video = videoRef.current;
-		if (!video) return;
-		isProgrammaticSeekRef.current = true;
-		if (Math.abs(video.currentTime - sourceTimeSec) > 0.01) {
-			video.currentTime = sourceTimeSec;
-		}
-	}, []);
+	const seekToSourceTime = useCallback(
+		(sourceTimeSec: number) => {
+			const video = videoRef.current;
+			if (!video) return;
+			// A load is in flight, so this write would be a no-op that
+			// `onLoadedMetadata` then overwrites — re-aim the queued resume instead.
+			if (pendingSeekRef.current) {
+				pendingSeekRef.current = { sourceTimeSec, play: pendingSeekRef.current.play };
+				return;
+			}
+			applySourceTime(video, sourceTimeSec);
+		},
+		[applySourceTime],
+	);
 
 	/**
 	 * Re-run the media load algorithm on the mounted element after a delay, and
@@ -766,6 +804,15 @@ export function VirtualPreview({
 									seekToVirtualTime(virtualTimeSec);
 								}
 							}}
+							onSeeked={(e) => {
+								// The demuxer is free again: apply the newest target that
+								// arrived while it was busy, if the playhead has moved on.
+								const queued = pendingScrubTargetRef.current;
+								if (queued !== null) {
+									pendingScrubTargetRef.current = null;
+									applySourceTime(e.currentTarget, queued);
+								}
+							}}
 							onWaiting={() => setLoadState("loading")}
 							onCanPlay={() => {
 								setLoadState("ready");

From de4cbc396190c484e5faab1eae63ed3b3b346a5e Mon Sep 17 00:00:00 2001
From: EtienneLescot <etiennelescot@gmail.com>
Date: Thu, 20 Aug 2026 00:12:47 +0200
Subject: [PATCH 10/10] fix(preview): make the retry budget a rate, not a quota
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A long editing session could exhaust the recoveries and show a card on
healthy media. The budget counted reloads over the LIFETIME of the
mounted media, and the confirmed cause of #395 — our own seek storm —
produces a failure per scrub burst that a 400 ms reload repairs every
time. Four bursts and the fifth hiccup was terminal, on a file that was
never broken. Measured today: one scrub burst, one reload.

The budget is now reloads inside a 30 s window. A rate cannot be
exhausted by session length, only by a burst: a dead file spends it in
seconds and the user gets the card at once, while hiccups minutes apart
each get the full budget and are never seen.

That also removes the mechanism that kept getting this wrong. The budget
was re-armed by playback getting past the position it died at — a rule
that is broken in both directions: it sits above the `if (v.paused)
return` gate, so a forward scrub while paused re-armed it without
decoding a byte, and a backward scrub never re-armed it at all. A window
expires by itself, so there is nothing to re-arm. The lifetime ceiling
added to compensate goes with it.

A give-up latch replaces both: once the card is up, an emptying window
must not restart the cycle behind it — a dead file would reload every
30 s, flash back on the metadata that always parses, and lose the card.
Only Retry or a media change lifts it.

Retry also stops costing the user a recovery: it clears the history
rather than resetting a counter that `reloadActiveSource` then
incremented, so the click no longer spends one of the reloads it is
meant to restore.

Three mechanisms become one, and the two constants I had picked by
intuition are down to one grounded in measurement.

Tests: the window expiring and the give-up latch, both confirmed by
mutation. The first version of the window test was vacuous — the
predicate existed twice, in the component and in the policy module, so
each copy masked a mutation of the other. `pruneReloads` is now the
single definition.

Refs #395

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../VirtualPreview.mediaError.test.tsx        | 55 ++++++-----
 src/components/ai-edition/VirtualPreview.tsx  | 93 +++++++------------
 src/components/ai-edition/mediaError.test.ts  | 45 ++++++---
 src/components/ai-edition/mediaError.ts       | 68 ++++++++------
 4 files changed, 136 insertions(+), 125 deletions(-)

diff --git a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
index 56f0a8f6f..363308f13 100644
--- a/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
+++ b/src/components/ai-edition/VirtualPreview.mediaError.test.tsx
@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { AxcutClip } from "@/lib/ai-edition/schema";
-import { MAX_RELOADS_PER_MEDIA, RETRY_DELAYS_MS } from "./mediaError";
+import { RELOAD_WINDOW_MS, RETRY_DELAYS_MS } from "./mediaError";
 import { type VideoSource, VirtualPreview } from "./VirtualPreview";
 
 // Same hand-driven rAF as VirtualPreview.playback.test.tsx: the tick is a
@@ -297,24 +297,23 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(onVideoError).toHaveBeenCalledWith("a1", "MEDIA_ERR_SRC_NOT_SUPPORTED (4) — code 4");
 	});
 
-	// Getting PAST the bad spot re-arms the budget. Without any re-arming a long
-	// session slowly walks into the same dead end — #395 with a longer fuse.
-	it("re-arms the budget once playback gets past the failure point", () => {
-		const { video, onVideoError, onVideoRecovered } = mount();
+	// THE long-session guarantee, and the answer to "can a user run out of
+	// recoveries?". The budget counts reloads inside a window, so it empties by
+	// itself: hiccups spaced minutes apart — which is what a seek storm across
+	// an editing session looks like — each get the full budget. A lifetime
+	// counter would have made this third failure terminal.
+	it("gives a later failure the full budget again once the window has emptied", () => {
+		const { video, onVideoError } = mount();
 
-		video.seekTo(4);
-		tick();
 		for (const delay of RETRY_DELAYS_MS) {
 			video.fail(3);
 			advance(delay);
 		}
-		video.loadedMetadata();
-		expect(onVideoRecovered).toHaveBeenCalledWith("a1");
+		expect(onVideoError).not.toHaveBeenCalled();
+		expect(video.loadCalls).toBe(RETRY_DELAYS_MS.length);
 
-		video.seekTo(5); // decoded past where it died
-		tick();
+		advance(RELOAD_WINDOW_MS + 1_000);
 
-		// A fresh failure now gets the full budget again rather than being fatal.
 		video.fail(3);
 		advance(RETRY_DELAYS_MS[0]);
 		expect(onVideoError).not.toHaveBeenCalled();
@@ -401,27 +400,27 @@ describe("VirtualPreview media-error recovery (issue #395)", () => {
 		expect(onVideoError).toHaveBeenCalledTimes(2); // still terminal, no new cycle
 	});
 
-	// The same file had two bad spots 0.47 s apart, each looking like progress
-	// past the other, so the budget re-armed on every cycle. The ceiling is the
-	// backstop that keeps the reload count finite regardless.
-	it("stops reloading at the ceiling when two bad spots keep re-arming the budget", () => {
+	// The other half: a file failing FAST does not get to loop quietly. Three
+	// failures inside one window is not "an occasional hiccup", and the user is
+	// told once — and stays told, because the window emptying afterwards must
+	// not restart the cycle behind the card.
+	it("reaches the card on a burst inside the window, and stays there", () => {
 		const { video, onVideoError } = mount();
 
-		video.play();
-		// Alternate failure points further apart than the progress margin. Each
-		// reload completes (a corrupt file's header parses every time), and the
-		// tick then sees the playhead past the OTHER bad spot — which is what
-		// re-armed the budget forever in the field.
-		for (let i = 0; i < 12; i += 1) {
-			video.seekTo(i % 2 === 0 ? 4 : 6);
-			tick();
+		for (const delay of [...RETRY_DELAYS_MS, 0]) {
 			video.fail(3);
-			advance(5_000);
-			video.loadedMetadata();
+			advance(delay);
 		}
+		expect(onVideoError).toHaveBeenCalledTimes(1);
+		const loadsAtGiveUp = video.loadCalls;
 
-		expect(video.loadCalls).toBeLessThanOrEqual(MAX_RELOADS_PER_MEDIA);
-		expect(onVideoError).toHaveBeenCalled();
+		// Long enough for every reload to age out of the window.
+		advance(RELOAD_WINDOW_MS * 3);
+		video.fail(3);
+		advance(5_000);
+
+		expect(video.loadCalls).toBe(loadsAtGiveUp);
+		expect(onVideoError).toHaveBeenCalledTimes(2);
 	});
 
 	// The element is keyed on the asset id alone, so pointing an asset at a new
diff --git a/src/components/ai-edition/VirtualPreview.tsx b/src/components/ai-edition/VirtualPreview.tsx
index a69a336ce..0df2ff1ee 100644
--- a/src/components/ai-edition/VirtualPreview.tsx
+++ b/src/components/ai-edition/VirtualPreview.tsx
@@ -27,6 +27,7 @@ import {
 	describeMediaError,
 	formatMediaError,
 	mediaErrorDisposition,
+	pruneReloads,
 	retryDelayMs,
 } from "./mediaError";
 import styles from "./VirtualPreview.module.css";
@@ -140,15 +141,16 @@ export function VirtualPreview({
 	// The seek that arrived while another was still running (see applySourceTime).
 	const pendingScrubTargetRef = useRef<number | null>(null);
 	const pendingSeekRef = useRef<{ sourceTimeSec: number; play: boolean } | null>(null);
-	// Reload bookkeeping for the mounted source (see `reloadActiveSource`).
-	// `attempts` is spent by failures and re-armed by playing past the point one
-	// died at — never by elapsed time, and never by a reload merely completing.
-	// A budget that only counts up is issue #395 with a longer fuse; one handed
-	// back too easily is a reload loop that never surfaces anything at all.
-	const retryRef = useRef<{ attempts: number; timer: number | null }>({
-		attempts: 0,
-		timer: null,
-	});
+	// When each AUTOMATIC reload happened. The budget is "reloads inside
+	// RELOAD_WINDOW_MS", so it expires by itself: a dead file burns it in
+	// seconds, while the occasional transient across a long editing session
+	// never accumulates. A lifetime count could not tell those apart and would
+	// eventually show a card on healthy media (see mediaError.ts).
+	const reloadsRef = useRef<number[]>([]);
+	// Set when we stop trying, so an expiring window cannot restart the cycle
+	// behind the card. Cleared only by Retry or a media change.
+	const gaveUpRef = useRef(false);
+	const retryTimerRef = useRef<number | null>(null);
 	// True from the moment a reload is scheduled until the element produces
 	// metadata again. Read by the rAF tick, which must not steer a dead decoder.
 	const recoveringRef = useRef(false);
@@ -156,14 +158,6 @@ export function VirtualPreview({
 	// after load(), and 0 after a load that failed before decoding a frame, so
 	// it cannot be the fallback resume point — that is a silent rewind.
 	const lastGoodSourceTimeRef = useRef(0);
-	// Where the decoder died, while a reload is outstanding. Playing PAST it is
-	// what re-arms the retry budget: see markSourceLoaded for why a reload
-	// completing is not evidence of anything.
-	const failedAtSourceTimeRef = useRef<number | null>(null);
-	// Reloads spent on the mounted media, ever — the ceiling the budget cannot
-	// talk its way past (see MAX_RELOADS_PER_MEDIA). Reset only when the media
-	// changes or the user retries, never by playback progress.
-	const reloadsRef = useRef(0);
 	// Which clip the rAF tick below believes is currently playing — set
 	// whenever a seek unambiguously resolves one (via locateVirtualPosition,
 	// timeline position → clip). Passed back into locateSourcePosition so
@@ -336,14 +330,6 @@ export function VirtualPreview({
 				// where a reload has to put the playhead back if it cannot
 				// resolve one from the timeline.
 				lastGoodSourceTimeRef.current = sourceTime;
-				// …and here is the only place that can prove a reload WORKED:
-				// the decoder is past the bytes it died on. A quarter second of
-				// margin so re-decoding the same frame doesn't count as progress.
-				const failedAt = failedAtSourceTimeRef.current;
-				if (failedAt !== null && sourceTime > failedAt + 0.25) {
-					failedAtSourceTimeRef.current = null;
-					retryRef.current.attempts = 0;
-				}
 			}
 			// À L'ARRÊT, le `<video>` ne pilote PLUS la position de la timeline.
 			//
@@ -619,15 +605,14 @@ export function VirtualPreview({
 	 * callback is stable and the scheduled work always sees current state.
 	 */
 	const reloadActiveSource = useCallback((play: boolean, delayMs: number) => {
-		if (retryRef.current.timer !== null) {
-			window.clearTimeout(retryRef.current.timer);
-			retryRef.current.timer = null;
+		if (retryTimerRef.current !== null) {
+			window.clearTimeout(retryTimerRef.current);
+			retryTimerRef.current = null;
 		}
 		recoveringRef.current = true;
-		reloadsRef.current += 1;
 		setLoadState("loading");
-		retryRef.current.timer = window.setTimeout(() => {
-			retryRef.current.timer = null;
+		retryTimerRef.current = window.setTimeout(() => {
+			retryTimerRef.current = null;
 			const video = videoRef.current;
 			if (!video) return;
 			// Resolved HERE rather than when the error fired: the user can scrub
@@ -693,14 +678,13 @@ export function VirtualPreview({
 	// before any queued macrotask can.
 	// biome-ignore lint/correctness/useExhaustiveDependencies: re-run when the mounted media changes
 	useEffect(() => {
-		retryRef.current = { attempts: 0, timer: null };
+		reloadsRef.current = [];
+		gaveUpRef.current = false;
 		recoveringRef.current = false;
-		failedAtSourceTimeRef.current = null;
-		reloadsRef.current = 0;
 		return () => {
-			if (retryRef.current.timer !== null) {
-				window.clearTimeout(retryRef.current.timer);
-				retryRef.current.timer = null;
+			if (retryTimerRef.current !== null) {
+				window.clearTimeout(retryTimerRef.current);
+				retryTimerRef.current = null;
 			}
 		};
 	}, [activeSourceKey, activeSource?.src]);
@@ -711,9 +695,10 @@ export function VirtualPreview({
 	// biome-ignore lint/correctness/useExhaustiveDependencies: the token bump IS the request
 	useEffect(() => {
 		if (!retryToken) return;
-		retryRef.current.attempts = 0;
-		failedAtSourceTimeRef.current = null;
-		reloadsRef.current = 0;
+		// Deliberately does NOT record a reload: the user's click must not spend
+		// one of the recoveries it is meant to restore.
+		reloadsRef.current = [];
+		gaveUpRef.current = false;
 		reloadActiveSource(false, 0);
 	}, [retryToken]);
 
@@ -825,9 +810,11 @@ export function VirtualPreview({
 								// "load failure" that says nothing about the media (Chromium
 								// calls it "Empty src attribute"). Never act on that.
 								const hasSource = Boolean(el.getAttribute("src")) || Boolean(el.currentSrc);
-								const attemptsSpent = retryRef.current.attempts;
+								const nowMs = Date.now();
+								reloadsRef.current = pruneReloads(reloadsRef.current, nowMs);
+								const reloadsInWindow = reloadsRef.current.length;
 								const disposition = hasSource
-									? mediaErrorDisposition(description.code, attemptsSpent, reloadsRef.current)
+									? mediaErrorDisposition(description.code, reloadsInWindow, gaveUpRef.current)
 									: "ignore";
 								const detail = formatMediaError(description);
 								// The code is the whole diagnosis, and it used to be thrown
@@ -840,8 +827,8 @@ export function VirtualPreview({
 									networkState: el.networkState,
 									readyState: el.readyState,
 									currentTime: el.currentTime,
-									attemptsSpent,
-									reloadsSpent: reloadsRef.current,
+									reloadsInWindow,
+									gaveUp: gaveUpRef.current,
 									disposition,
 								};
 								if (disposition === "ignore") {
@@ -856,18 +843,13 @@ export function VirtualPreview({
 								}
 								if (disposition === "retry") {
 									console.warn("[preview] <video> failed, reloading", context);
-									retryRef.current.attempts = attemptsSpent + 1;
-									// The bar the reload has to clear before the budget is
-									// handed back (see the rAF tick).
-									failedAtSourceTimeRef.current = Number.isFinite(el.currentTime)
-										? el.currentTime
-										: lastGoodSourceTimeRef.current;
+									reloadsRef.current.push(nowMs);
 									// Deliberately no pause(): a 400 ms reload should be a blip
 									// the user never sees, and pausing here would flip the
 									// shell's transport for it. What keeps the rAF from
 									// steering the dead decoder in the meantime is
 									// `recoveringRef`, set by reloadActiveSource.
-									reloadActiveSource(!el.paused, retryDelayMs(attemptsSpent));
+									reloadActiveSource(!el.paused, retryDelayMs(reloadsInWindow));
 									return;
 								}
 								// ponytail: don't blindly advance to the next source — if
@@ -877,12 +859,9 @@ export function VirtualPreview({
 								console.error("[preview] <video> failed for good", context);
 								pendingSeekRef.current = null;
 								recoveringRef.current = false;
-								// Once we have given up, nothing playback does may re-arm the
-								// budget: leaving this set let the rAF's progress check fire
-								// on the NEXT bad spot and start the whole cycle again, which
-								// is what "3 episodes for one broken file" looked like in the
-								// field. Only Retry or a media change re-arms from here.
-								failedAtSourceTimeRef.current = null;
+								// Latched so an expiring window cannot restart the cycle behind
+								// the card. Only Retry or a media change lifts it.
+								gaveUpRef.current = true;
 								setLoadState("error");
 								// An 'error' doesn't itself fire 'pause', so make sure the shell's
 								// transport state (single source of truth, see NewEditorShell's
diff --git a/src/components/ai-edition/mediaError.test.ts b/src/components/ai-edition/mediaError.test.ts
index d11c0c0b6..cfdd7c801 100644
--- a/src/components/ai-edition/mediaError.test.ts
+++ b/src/components/ai-edition/mediaError.test.ts
@@ -2,8 +2,9 @@ import { describe, expect, it } from "vitest";
 import {
 	describeMediaError,
 	formatMediaError,
-	MAX_RELOADS_PER_MEDIA,
 	mediaErrorDisposition,
+	pruneReloads,
+	RELOAD_WINDOW_MS,
 	RETRY_DELAYS_MS,
 	retryDelayMs,
 } from "./mediaError";
@@ -69,20 +70,40 @@ describe("mediaErrorDisposition", () => {
 		expect(mediaErrorDisposition(null, RETRY_DELAYS_MS.length)).toBe("fatal");
 	});
 
-	// Measured in the field on a corrupted recording: two bad spots 0.47 s apart,
-	// each one looking like "progress" past the other, re-armed the budget on
-	// every cycle. The ceiling is what makes the reload count finite whatever the
-	// re-arming heuristic concludes.
-	it("is fatal once the reload ceiling is reached, whatever the budget says", () => {
-		expect(mediaErrorDisposition(3, 0, MAX_RELOADS_PER_MEDIA - 1)).toBe("retry");
-		expect(mediaErrorDisposition(3, 0, MAX_RELOADS_PER_MEDIA)).toBe("fatal");
-		expect(mediaErrorDisposition(2, 0, MAX_RELOADS_PER_MEDIA + 5)).toBe("fatal");
+	// The budget counts reloads inside a window, so a long session cannot
+	// exhaust it: the confirmed cause of #395 is our own seek storm, which
+	// recurs across an editing session and heals every time. A lifetime count
+	// would eventually show a card on media a 400 ms reload always repairs.
+	it("is fatal only once the window is full", () => {
+		expect(mediaErrorDisposition(3, RETRY_DELAYS_MS.length - 1)).toBe("retry");
+		expect(mediaErrorDisposition(3, RETRY_DELAYS_MS.length)).toBe("fatal");
 	});
 
-	// …but never for a cancelled load. Making code 1 terminal at the ceiling is
+	// Without this, a dead file reloads every time the window empties, flashes
+	// back on the metadata that always parses, and loses the card behind it.
+	it("stays fatal once it has given up, however empty the window", () => {
+		expect(mediaErrorDisposition(3, 0, true)).toBe("fatal");
+		expect(mediaErrorDisposition(2, 0, true)).toBe("fatal");
+	});
+
+	// …but never for a cancelled load, even then. Making code 1 terminal is
 	// exactly how #395 would come back through the side door.
-	it("still ignores an aborted load at the ceiling", () => {
-		expect(mediaErrorDisposition(1, 0, MAX_RELOADS_PER_MEDIA * 10)).toBe("ignore");
+	it("still ignores an aborted load after giving up", () => {
+		expect(mediaErrorDisposition(1, 99, true)).toBe("ignore");
+	});
+});
+
+describe("pruneReloads", () => {
+	it("keeps only what is still inside the window", () => {
+		const now = 1_000_000;
+		const timestamps = [
+			now - RELOAD_WINDOW_MS - 1, // expired
+			now - RELOAD_WINDOW_MS, // expired, boundary is exclusive
+			now - RELOAD_WINDOW_MS + 1,
+			now,
+		];
+		expect(pruneReloads(timestamps, now)).toEqual([now - RELOAD_WINDOW_MS + 1, now]);
+		expect(pruneReloads([], now)).toEqual([]);
 	});
 });
 
diff --git a/src/components/ai-edition/mediaError.ts b/src/components/ai-edition/mediaError.ts
index 9e2eaeee4..3cf4ced82 100644
--- a/src/components/ai-edition/mediaError.ts
+++ b/src/components/ai-edition/mediaError.ts
@@ -20,10 +20,9 @@ export const MEDIA_ERROR_NAMES: Record<number, string> = {
 	4: "MEDIA_ERR_SRC_NOT_SUPPORTED",
 };
 
-/** Delayed rather than immediate: the likeliest transient causes are a file the
- *  capture process has not finished writing and a momentarily unreadable file
- *  (an antivirus pass, a Windows share lock). An instant re-read sees the same
- *  bytes and burns an attempt for nothing. */
+/** Delayed rather than immediate: the failure we actually measured is a demuxer
+ *  that could not keep up (see VirtualPreview's `applySourceTime`), and an
+ *  instant re-read arrives while it is still saturated. */
 export const RETRY_DELAYS_MS = [400, 1200] as const;
 
 /** A recording that is still being written reports as "unsupported" too, so
@@ -31,6 +30,24 @@ export const RETRY_DELAYS_MS = [400, 1200] as const;
  *  unusable. */
 export const UNSUPPORTED_RETRY_BUDGET = 1;
 
+/**
+ * The budget is spent by reloads inside a SLIDING WINDOW, not over the lifetime
+ * of the mounted media. That distinction is the whole design:
+ *
+ * - a genuinely dead file burns the budget in seconds (400 ms + 1200 ms of
+ *   backoff and a moment of decode), so the user reaches the card almost at
+ *   once, which is what they need;
+ * - a healthy file hit by the occasional transient — the confirmed cause of
+ *   #395 was our own seek storm, which recurs across an editing session and
+ *   recovers every time — never accumulates, because the window empties between
+ *   hiccups. A lifetime count could not tell those apart: it would show a card
+ *   after enough ordinary editing, on media a 400 ms reload heals every time.
+ *
+ * A window also removes the need to "re-arm" anything on recovery, which is the
+ * mechanism that kept getting this wrong: it expires by itself.
+ */
+export const RELOAD_WINDOW_MS = 30_000;
+
 export interface MediaErrorDescription {
 	code: number | null;
 	name: string;
@@ -58,43 +75,38 @@ export function formatMediaError(description: MediaErrorDescription): string {
 	return description.message ? `${label} — ${description.message}` : label;
 }
 
-/**
- * Hard ceiling on reloads for one mounted media, whatever the budget says.
- *
- * The budget is re-armed by playback getting past the point it died at, which
- * is a heuristic — and a file with two bad spots FURTHER APART than that margin
- * re-arms it on every cycle, because each failure looks like progress relative
- * to the other. Measured on a deliberately corrupted recording: failures at
- * 22.528 s and 22.997 s, 0.47 s apart, produced four reloads per episode
- * instead of two. This is the backstop that keeps the count finite whatever the
- * heuristic concludes. Reset only by a media change or the user's Retry.
- */
-export const MAX_RELOADS_PER_MEDIA = RETRY_DELAYS_MS.length * 2;
+/** The reload timestamps still inside the window. The single definition of what
+ *  "recent" means: the caller keeps the returned array and reads its length, so
+ *  there is no second copy of this predicate to drift from. The caller owns the
+ *  clock, which keeps this module pure and testable in the node environment. */
+export function pruneReloads(timestamps: readonly number[], nowMs: number): number[] {
+	return timestamps.filter((at) => nowMs - at < RELOAD_WINDOW_MS);
+}
 
 export type MediaErrorDisposition = "ignore" | "retry" | "fatal";
 
 /**
- * `attemptsSpent` is reset by a successful load, not by elapsed time: success is
- * the only honest evidence that the source recovered. A budget that only ever
- * counts up is issue #395 again with a longer fuse.
+ * `reloadsInWindow` counts only AUTOMATIC reloads: a user pressing Retry clears
+ * the history, because they clicked knowing something changed.
  *
  * A null code (an error event carrying no MediaError) rides the full budget —
  * we know nothing, so we try.
  */
 export function mediaErrorDisposition(
 	code: number | null,
-	attemptsSpent: number,
-	reloadsSpent = 0,
+	reloadsInWindow: number,
+	hasGivenUp = false,
 ): MediaErrorDisposition {
-	// Still ignored at the ceiling: a cancelled load says nothing about the
-	// media, and making it terminal once the counter is high is how #395 would
-	// come back through the side door.
 	if (code === 1) return "ignore";
-	if (reloadsSpent >= MAX_RELOADS_PER_MEDIA) return "fatal";
+	// Once the card is up, the window expiring must not quietly start the cycle
+	// again: a dead file would reload every 30 s, flash back to a picture on the
+	// metadata that always parses, and lose the card. Only Retry or a media
+	// change lifts this.
+	if (hasGivenUp) return "fatal";
 	const budget = code === 4 ? UNSUPPORTED_RETRY_BUDGET : RETRY_DELAYS_MS.length;
-	return attemptsSpent < budget ? "retry" : "fatal";
+	return reloadsInWindow < budget ? "retry" : "fatal";
 }
 
-export function retryDelayMs(attemptsSpent: number): number {
-	return RETRY_DELAYS_MS[Math.min(attemptsSpent, RETRY_DELAYS_MS.length - 1)];
+export function retryDelayMs(reloadsInWindow: number): number {
+	return RETRY_DELAYS_MS[Math.min(reloadsInWindow, RETRY_DELAYS_MS.length - 1)];
 }