@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/export/ExportDialog.tsx

@@ -20,39 +20,191 @@
 // GIF gets NO size figure at all — its size is dominated by palette and by how
 // much of the frame changes, neither of which the bits-per-pixel model knows.
 // It shows the frame count instead, which is true.
-import { useEffect, useState } from "react";
+//
+// ── WHEN AN AGENT ASKED FOR IT ──────────────────────────────────────────
+//
+// An export question's yes (state/agentQuestion.ts, `exportAsk`) opens this
+// dialog with the agent's format, quality and Shot, and hosted with Save to
+// Videos on (Only me, unless the person's remembered choice already saves).
+// What the export then saves is reported back to the question: the Videos id
+// and page, else the downloaded file's name. A studio server render is
+// reported by the question dialog when its job ends (AgentQuestionDialog).
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import type { ReactNode } from "react";
 import {
   EXPORT_QUALITIES,
   docDurationFrames,
   estimateMp4Size,
+  exportFileBase,
   exportQuality,
   formatSizeEstimate,
   formatTimeEstimate,
+  masterAudioClips,
   predecessorTransitionOmitted,
   sceneWindows,
+  creditsText,
+  creditsWithin,
+  sliceShotToScene,
+  soundCredits,
 } from "@dailies-studio/shot/doc";
 import type { ExportFormat, ExportQualityId, RenderStats } from "@dailies-studio/shot/doc";
+import { audioPeakWarning } from "@dailies-studio/engine";
 import { Dialog, SegmentedControl } from "@dailies-studio/ui";
-import { ApiError, cancelRender, renderState, startRender } from "../../api.js";
+import { CAPABILITY_PROBE_TIMED_OUT, gifFrameStride } from "@dailies-studio/shot/tier1";
+import type { Tier1Capability } from "@dailies-studio/shot/tier1";
+import { ApiError, renderState, saveVideo, startRender } from "../../api.js";
+import type { AgentQuestionVideo, VideoVisibility } from "../../api.js";
+import type { AgentExportAsk } from "../../state/agentQuestion.js";
+import { dailiesHost } from "../../hostApi.js";
+import { reconcileRender } from "../../state/renderEvents.js";
 import type { RenderJob } from "../../api.js";
+import { mixShotAudio } from "../../audio/offlineMix.js";
 import { useShotEditor, useStore } from "../../state/context.js";
+import { defClockFrames, playbackWindow } from "../../state/types.js";
+import type { ShotEditorState } from "../../state/types.js";
+import { exportBlocker } from "../../state/workspace.js";
+import { raceStage } from "../../state/stageWatchdog.js";
+import { reportError } from "../../state/errorReports.js";
+import { exportLockCount } from "./ExportScrim.js";
 
-/** "the whole timeline", as a select value. Not a scene id, and cannot be one. */
+/** "the whole Project", as a select value. Not a scene id, and cannot be one. */
 const WHOLE = "";
+/** "the work area", as a select value. Scene ids are `scn_` ids, never this. */
+const WORK_AREA = "work-area";
+
+/** The Project context's work area as the transport plays it (clamped by
+ *  `playbackWindow`, never the raw field), or null when there is none, when
+ *  a definition or an entered Shot owns the clock, or when it spans the film. */
+function projectWorkArea(s: ShotEditorState): { start: number; frames: number } | null {
+  if (s.doc === null || s.workArea === null || defClockFrames(s) !== null || s.enteredScene !== null) return null;
+  const area = playbackWindow(s);
+  return area.frames < docDurationFrames(s.doc) ? area : null;
+}
+
+/** How many times the dialog asks the stage for its encoders when a probe
+ *  runs past the stage's own deadline. A late probe is not a "no": under load
+ *  (the stage capturing a poster on a software GL) the first one has run out
+ *  of time where the next answered, and hosted has no server to fall back to. */
+const PROBE_ATTEMPTS = 3;
+/** Why a probe's await ended when the stage it asked was replaced: its answer
+ *  died with the old stage's realm, so the new stage is asked. */
+const PROBE_STAGE_RELOADED = "the stage reloaded while its encoders were checked";
+
+/** The export refusals by name, for the hosted error report: the stage's
+ *  (bridgeClient.ts `exportRefusal`, in its order) and this dialog's own. A
+ *  refusal carries only its sentence, so the name is read off it, and one no
+ *  row matches reports with `refusal: null`. Names that must never drift
+ *  would need a `refusal` field on the stage's Error. */
+const REFUSALS: ReadonlyArray<readonly [string, RegExp]> = [
+  ["stage_crashed", /stage crashed/],
+  ["piece_failed", /piece\(s\)/],
+  ["context_lost", /context (is|was) lost/],
+  ["render_failed", /render failure/],
+  ["module_failed", /module\(s\) failed/],
+  ["component_crashed", /crashed while rendering/],
+  ["dom_output", /DOM output/],
+  ["project_changed", /project changed/],
+];
+
+/** How an in-browser export ENDED. Its progress is not here: that lives in the
+ *  store's export lock, so the scrim over the stage, the header badge and this
+ *  row all read one number and closing the dialog loses none of it. */
+type BrowserJob = { phase: "done"; filename: string } | { phase: "cancelled" };
+
+/** Hosted only: whether a finished export is also saved to the workspace's
+ *  Videos, and who its page opens for (worker videos.ts). */
+type ShareChoice = "off" | VideoVisibility;
+const SHARE_CHOICES: readonly ShareChoice[] = ["off", "private", "workspace", "link"];
+/** The last choice, per browser. A preference, so storage that throws (a
+ *  private window, blocked site data) only means the default. */
+const SHARE_KEY = "dailies.export.share";
+function readShare(): ShareChoice {
+  try {
+    const saved = localStorage.getItem(SHARE_KEY);
+    return SHARE_CHOICES.find((c) => c === saved) ?? "off";
+  } catch {
+    return "off";
+  }
+}
+function writeShare(choice: ShareChoice): void {
+  try {
+    localStorage.setItem(SHARE_KEY, choice);
+  } catch {
+    // Remembering is a convenience; the export itself is unaffected.
+  }
+}
+const SHARE_HINTS: Record<ShareChoice, string> = {
+  off: "The file goes to your downloads only.",
+  private: "Also saved to Videos. Only you can open its page. You can change this later in Videos.",
+  workspace: "Also saved to Videos. Members of this workspace can open its page. You can change this later in Videos.",
+  link: "Also saved to Videos. Anyone with the link can watch it. You can change this later in Videos.",
+};
+
+/** The save to Videos that follows a hosted download. Apart from the job:
+ *  the file is already in the downloads, so a failed save is not a failed
+ *  export. */
+type Shared = { phase: "saving" } | { phase: "saved"; url: string } | { phase: "failed"; message: string };
 
-export function ExportDialog(props: { onClose(): void }) {
+/** An anchor download, not showSaveFilePicker: no permission prompt, works in
+ *  every browser, and the object URL is revoked after the click has consumed
+ *  it (the same helper the motion editor ships). */
+function download(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
+export function ExportDialog(props: {
+  onClose(): void;
+  /** Test seam for holding the asynchronous mix across a document edit. */
+  mixAudio?: typeof mixShotAudio;
+}) {
   const store = useStore();
   const doc = useShotEditor((s) => s.doc);
   const name = useShotEditor((s) => s.name);
   const currentScene = useShotEditor((s) => s.sceneId);
   const job = useShotEditor((s) => s.renderJob);
+  // ONE answer to "is an export running", whichever path started it.
+  const exportLock = useShotEditor((s) => s.exportLock);
+  // The agent's export ask for THIS Project, if the person said yes to one.
+  const exportAsk = useSyncExternalStore(store.agentQuestion.subscribe, () => store.agentQuestion.getState().exportAsk);
+  const asked = exportAsk !== null && exportAsk.projectId === doc?.id ? exportAsk : null;
+  // Its choices, read once as the dialog opens: after that they are the
+  // person's to change.
+  const [askedAtOpen] = useState(() => asked?.export ?? null);
+  const hosted = dailiesHost() !== undefined;
 
-  const [format, setFormat] = useState<ExportFormat>("mp4");
-  const [quality, setQuality] = useState<ExportQualityId>("social");
-  // Defaults to the WHOLE timeline even though a scene is open, because
+  const [format, setFormat] = useState<ExportFormat>(askedAtOpen?.format ?? "mp4");
+  const [quality, setQuality] = useState<ExportQualityId>(askedAtOpen?.quality ?? "social");
+  // Defaults to the WHOLE Project even though a scene is open, because
   // "export" without qualification means the deliverable. Choosing one scene is
-  // deliberate, and the select says which one.
-  const [scope, setScope] = useState<string>(WHOLE);
+  // deliberate, and the select says which one. A work area the author drew is
+  // that deliberate choice already made, so it is the default when there is one.
+  // An agent's ask is the choice made for them: its Shot, else the whole
+  // Project it promised the agent, never a work area drawn earlier.
+  const [scopeChoice, setScope] = useState<string>(() => {
+    if (askedAtOpen !== null) {
+      const scene = askedAtOpen.scene;
+      return scene !== undefined && store.getState().doc?.scenesById[scene] !== undefined ? scene : WHOLE;
+    }
+    return projectWorkArea(store.getState()) === null ? WHOLE : WORK_AREA;
+  });
+  // Primitive selectors: a fresh object per read would never settle.
+  const areaStart = useShotEditor((s) => projectWorkArea(s)?.start ?? null);
+  const areaFrames = useShotEditor((s) => projectWorkArea(s)?.frames ?? null);
+  const area = areaStart === null || areaFrames === null ? null : { start: areaStart, frames: areaFrames };
+  // A work area cleared while the dialog is open falls back to the whole Project.
+  const scope = scopeChoice === WORK_AREA && area === null ? WHOLE : scopeChoice;
+  const sceneId = scope === WHOLE || scope === WORK_AREA ? undefined : scope;
+  const range = scope === WORK_AREA ? area : null;
+  /** Why no export can start here (a component, material or code workspace
+   *  owns the stage), or null. A run already going is not refused by it. */
+  const blocked = useShotEditor(exportBlocker);
   const [stats, setStats] = useState<RenderStats>({ runs: [] });
   const [error, setError] = useState<string | null>(null);
   // ON by default: the document's clips are part of the deliverable, and an
@@ -60,18 +212,149 @@ export function ExportDialog(props: { onClose(): void }) {
   // wrong artifact this lane refuses to produce. Unticking it is deliberate,
   // and the row says how many clips it is dropping.
   const [withAudio, setWithAudio] = useState(true);
+  // BROWSER by default, MP4 and GIF alike: the author's own machine renders
+  // near-instantly and costs the studio nothing (the Earth Studio model).
+  // Locally the server stays the answer for a browser that cannot encode the
+  // format, said in place. Hosted there is no server to offer.
+  const [dest, setDest] = useState<"browser" | "server">("browser");
+  // The hosted editor has no Tier-2 renderer, so the server is never offered
+  // (`hosted`, above).
+  /** What THIS browser can encode, probed through the stage. Null while the
+   *  probe runs (the "checking" note); "unavailable" when the stage is not
+   *  connected; "unanswered" when every probe ran out of time. */
+  const [cap, setCap] = useState<Tier1Capability | "unavailable" | "unanswered" | null>(null);
+  /** Which probe is running, from 1, for the checking note. */
+  const [probeAttempt, setProbeAttempt] = useState(1);
+  /** Bumped by "Check again", which runs the probe anew. */
+  const [probeRun, setProbeRun] = useState(0);
+  const [browserJob, setBrowserJob] = useState<BrowserJob | null>(null);
+  // An agent's ask saves to Videos: the remembered choice when it saves, else
+  // Only me. The remembered choice itself is left as it was.
+  const [share, setShare] = useState<ShareChoice>(() => {
+    const saved = readShare();
+    return askedAtOpen !== null && hosted && saved === "off" ? "private" : saved;
+  });
+  const [shared, setShared] = useState<Shared | null>(null);
+  const [audioNotice, setAudioNotice] = useState<string | null>(null);
+  /** The credits' Copy said so. */
+  const [copied, setCopied] = useState(false);
+  /** Set when the last MP4 came from a software encoder at a bitrate, whose
+   *  opening frames start soft. Only the finished export knows which encoder
+   *  ran (the stage decides it when the encode starts), so it is said after. */
+  const [encoderNotice, setEncoderNotice] = useState<string | null>(null);
+  /** Ties the Audio checkbox to the hint that says why it is ticked or not. */
+  const audioHintId = useId();
+  // An export outlives this dialog, so a failure that lands after Close has to
+  // reach the shell's error strip instead of a setState nobody is mounted for.
+  const mounted = useRef(true);
+  useEffect(() => () => { mounted.current = false; }, []);
+
+  // ── FOCUS FOLLOWS THE ONE ACTION THAT IS LIVE ──────────────────────────
+  // Export sits in the footer and Cancel export sits in the Rendering card,
+  // so starting or ending a run UNMOUNTS the focused button and drops focus
+  // on <body>. The Dialog's Escape and Tab trap listen on the dialog itself,
+  // so from <body> the keyboard would have no way back in. When focus has
+  // fallen out like that, it moves to the action that replaced the one that
+  // went, or to the dialog itself when that action is disabled. A focus
+  // anywhere else (the author tabbed to Quality while a run from another tab
+  // arrived) is left alone: that is not ours to steal.
+  const running = exportLock !== null;
+  const exportButton = useRef<HTMLButtonElement>(null);
+  const cancelButton = useRef<HTMLButtonElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const at = document.activeElement;
+    if (at !== null && at !== document.body) return;
+    const next = running ? cancelButton.current : exportButton.current;
+    (next !== null && !next.disabled ? next : body.current?.closest<HTMLElement>('[role="dialog"]'))?.focus();
+  }, [running]);
+
+  // ── A SERVER RUN RETIRES THE LAST FAILURE ──────────────────────────────
+  // The outcome slot ranks a failure above the last job, so a 409 (or any
+  // refused POST) left its Failed card standing after a server run that
+  // started elsewhere had gone on to finish: the dialog said "Failed" over a
+  // render that had just written its file. A server lock is a NEW run, so
+  // whatever went wrong before it is history. Keyed on `where`, not on the
+  // lock object, which is fresh on every progress tick. A browser lock does
+  // not clear it: runBrowser clears its own error before it takes the lock,
+  // and a browser failure lands WHILE that lock is still held.
+  const lockWhere = exportLock?.where;
+  useEffect(() => {
+    if (lockWhere === "server") setError(null);
+  }, [lockWhere]);
+
+  // Capability probe on open: a dead stage degrades to the server path with a
+  // reason rather than a dead button. A probe the stage timed out is asked
+  // again, up to PROBE_ATTEMPTS, and each await races the stage watchdog: a
+  // stage that reloads mid-probe takes its answer with it, so the new stage
+  // is asked rather than the dialog waiting forever.
+  useEffect(() => {
+    if (store.stage() === null) {
+      setCap("unavailable");
+      return;
+    }
+    const closed = new AbortController();
+    void (async () => {
+      for (let attempt = 1; attempt <= PROBE_ATTEMPTS; attempt++) {
+        const bridge = store.stage();
+        if (bridge === null) break;
+        setProbeAttempt(attempt);
+        let answer: Tier1Capability;
+        try {
+          answer = await raceStage(bridge.exportCapability(), {
+            stage: () => store.stage(),
+            bridgeAtStart: bridge,
+            signal: closed.signal,
+            reloaded: PROBE_STAGE_RELOADED,
+          });
+        } catch (e) {
+          if (closed.signal.aborted) return;
+          if (e instanceof Error && e.message === PROBE_STAGE_RELOADED) continue;
+          setCap("unavailable");
+          return;
+        }
+        if (closed.signal.aborted) return;
+        if (!(answer.mp4.ok === false && answer.mp4.reason === CAPABILITY_PROBE_TIMED_OUT)) {
+          setCap(answer);
+          return;
+        }
+      }
+      if (!closed.signal.aborted) setCap(store.stage() === null ? "unavailable" : "unanswered");
+    })();
+    return () => closed.abort();
+  }, [store, probeRun]);
+  const checkAgain = (): void => {
+    setCap(null);
+    setProbeAttempt(1);
+    setProbeRun((run) => run + 1);
+  };
+
+  // The browser path needs a connected stage and an encoder for the format:
+  // H.264 for an MP4, the GIF kind for a GIF (absent on a stage older than
+  // it). When the probe says no, the choice STEPS ASIDE to the server rather
+  // than holding a dead Export button — the note beside the row says why, and
+  // re-choosing "This browser" snaps back with the same note still on screen.
+  // Hosted there is nowhere to step to: the note says why and Export waits.
+  const encoder = cap === null || typeof cap === "string" ? undefined : format === "gif" ? cap.gif : cap.mp4;
+  const browserReady = encoder?.ok === true;
+  useEffect(() => {
+    if (!hosted && dest === "browser" && cap !== null && !browserReady) setDest("server");
+  }, [hosted, dest, cap, browserReady]);
 
   // The dialog can open MID-RENDER (the author closed it and came back), so it
   // asks rather than assuming idle — and picks up this project's measured speed
-  // in the same round trip.
+  // in the same round trip. Hosted has no server render to ask about.
   useEffect(() => {
-    if (name === null) return;
+    if (name === null || hosted) return;
     let live = true;
+    const asked = store.getState().renderJob;
     void renderState(name)
       .then((state) => {
         if (!live) return;
         setStats(state.stats);
-        if (state.job !== null) store.setRenderJob(state.job);
+        // The live job, or the last result after a reload (the route reports
+        // this shot's renders only), or a render the server has lost.
+        reconcileRender(store, name, state, asked);
       })
       .catch(() => {
         // An estimate is a nicety. A server without the render lane still lets
@@ -80,20 +363,56 @@ export function ExportDialog(props: { onClose(): void }) {
     return () => {
       live = false;
     };
-  }, [name, store, job?.phase]);
+  }, [name, store, job?.phase, hosted]);
 
   if (doc === null || name === null) return null;
 
   const windows = sceneWindows(doc);
   const frames =
-    scope === WHOLE
-      ? docDurationFrames(doc)
-      : (windows.find((w) => w.id === scope)?.end ?? 0) - (windows.find((w) => w.id === scope)?.start ?? 0);
+    range !== null
+      ? range.frames
+      : sceneId === undefined
+        ? docDurationFrames(doc)
+        : (windows.find((w) => w.id === sceneId)?.end ?? 0) - (windows.find((w) => w.id === sceneId)?.start ?? 0);
+  /** Whether master frames [from, from + length) reach into the range. */
+  const inRange = (from: number, length: number): boolean =>
+    range === null || (from < range.start + range.frames && from + length > range.start);
   const megapixels = (doc.size.width * doc.size.height) / 1_000_000;
   // GIF has no audio stream at all, so the checkbox is not a choice there and
   // the size model must not budget for one either.
-  const clipCount = Object.keys(doc.audio).length;
-  const audible = format === "mp4" && withAudio && clipCount > 0;
+  // BOTH HOMES. `doc.audio` is only the bed since schema v13, so counting it
+  // alone would budget no audio bitrate — and, worse, drop `audible` to false
+  // on a document whose whole soundtrack is shot-owned, silently exporting a
+  // video with no sound and a checkbox that looked ticked.
+  // THE SCOPE'S clips, not the document's. Counting the whole timeline while
+  // the range is one scene promised sound for a scene that owns none: the mix
+  // then returned null, no track was added, and nothing said why.
+  // Only the UNMUTED clips, as the mixers count them: a muted clip adds no
+  // sound, and counting it promised a track the file would not carry.
+  const scoped = sceneId === undefined ? doc : (sliceShotToScene(doc, sceneId) ?? doc);
+  const rangeClips = masterAudioClips(scoped).filter((m) => inRange(m.clip.frame, m.clip.durationFrames));
+  const clipCount = rangeClips.filter((m) => m.clip.muted !== true).length;
+  const effectiveDest = hosted ? "browser" : dest;
+  // A browser whose encoder cannot take audio ships the video silent, so the
+  // row says so before the export rather than after the download.
+  const browserAudioReason =
+    effectiveDest === "browser" && cap !== null && typeof cap !== "string" && !cap.audio.ok
+      ? cap.audio.reason
+      : undefined;
+  const audible = format === "mp4" && withAudio && clipCount > 0 && browserAudioReason === undefined;
+  // THE CREDITS THIS FILE OWES (v49): the Openverse sounds it plays, in the
+  // export's own scope. Only when the file carries sound: a video exported
+  // silent plays no sound and owes no credit.
+  const credits = audible ? soundCredits(doc, range ?? sceneId) : { required: [], courtesy: [] };
+  const creditBlock = creditsText(credits);
+  /** "Project" or "Shot", whichever the range exports from. */
+  const unit = range !== null ? "work area" : sceneId === undefined ? "Project" : "Shot";
+  // The same "off" rule the server render reads (`shotMotionBlurAt`).
+  const blurred = scoped.scenes.some((id) => {
+    const mb = scoped.scenesById[id]?.effects?.motionBlur;
+    const w = windows.find((x) => x.id === id);
+    return mb !== undefined && mb.samples > 1 && (w === undefined || inRange(w.start, w.end - w.start));
+  });
   const size = estimateMp4Size({
     width: doc.size.width,
     height: doc.size.height,
@@ -102,59 +421,265 @@ export function ExportDialog(props: { onClose(): void }) {
     quality: exportQuality(quality),
     audio: audible,
   });
-  const running = job?.phase === "running";
 
-  const submit = (): void => {
+  /** Tell the agent's question where the export went. A refused report says
+   *  so in the shell's strip: the file itself is fine. */
+  const report = (ask: AgentExportAsk | null, video: AgentQuestionVideo, what: string): void => {
+    if (ask === null) return;
+    store.agentQuestion.reportVideo(ask, name, video).catch((e: unknown) => {
+      store.reportError(`${what} was exported, but telling the agent failed: ${e instanceof Error ? e.message : String(e)}`);
+    });
+  };
+
+  const runServer = async (): Promise<void> => {
+    // Export is hidden while the lock is held; this is the refusal behind it,
+    // for a keyboard submit that raced the re-render.
+    if (exportLock !== null) return;
+    const reportTo = asked;
     setError(null);
-    void startRender(name, {
-      format,
-      quality,
-      ...(scope === WHOLE ? {} : { sceneId: scope }),
-      // Only ever sent as `false`. Absent means the server's default, which is
-      // to mux whatever `doc.audio` carries, and saying so explicitly would
-      // make this chrome the thing that decides it.
-      ...(withAudio ? {} : { audio: false }),
-    })
-      .then((started) => store.setRenderJob(started))
-      .catch((e: unknown) => {
-        // A 409 carries the running job, which is more useful than the message.
-        if (e instanceof ApiError && e.conflict) setError(e.message);
-        else setError(e instanceof Error ? e.message : String(e));
+    try {
+      // The server renders the saved document, so what is on screen is saved
+      // first: an edit inside the autosave debounce, or behind a failed save,
+      // would otherwise export an older revision. `flush` throws on the latter.
+      await store.flush();
+      // A browser export may have taken the lock while the save ran.
+      if (store.getState().exportLock !== null) return;
+      const started = await startRender(name, {
+        format,
+        quality,
+        ...(sceneId === undefined ? {} : { sceneId }),
+        ...(range === null ? {} : { frameRange: { start: range.start, end: range.start + range.frames } }),
+        // Only ever sent as `false`. Absent means the server's default, which is
+        // to mux whatever `doc.audio` carries, and saying so explicitly would
+        // make this chrome the thing that decides it.
+        ...(withAudio ? {} : { audio: false }),
       });
+      store.setRenderJob(started);
+      // Reported when the job ends, by the question dialog, which outlives
+      // this one.
+      if (reportTo !== null) store.agentQuestion.exportOnServer(started.id);
+    } catch (e) {
+      // A 409 means a server run is already going. When the bus has already
+      // delivered it, the Rendering card says so and outlives this refusal;
+      // writing the error then would resurface it the moment that run ends.
+      if (e instanceof ApiError && e.conflict) {
+        if (store.getState().exportLock?.where !== "server") setError(e.message);
+      } else setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const runBrowser = async (): Promise<void> => {
+    const reportTo = asked;
+    const bridgeAtStart = store.stage();
+    if (bridgeAtStart === null) {
+      setError("the stage is not connected: reload and try again");
+      return;
+    }
+    // THE LOCK, which stops the transport, refuses Space, veils the stage and
+    // survives this dialog unmounting. It throws when one is already running,
+    // which is the same refusal hiding the Export button expresses. Said by
+    // nothing more: the lock it lost to already shows as the Rendering card,
+    // Cancel included, and a refusal kept in `error` would outlive that run
+    // and paint a Failed card over the run's real outcome.
+    let signal: AbortSignal;
+    try {
+      signal = store.beginBrowserExport();
+    } catch {
+      return;
+    }
+    setError(null);
+    setAudioNotice(null);
+    setEncoderNotice(null);
+    setBrowserJob(null);
+    setShared(null);
+    // The export promise lives in the IFRAME's realm, and dies unsettled with
+    // it if the stage reloads mid-export, so every await races the bridge's
+    // replacement and a local abort (`raceStage`).
+    const watch = { stage: () => store.stage(), bridgeAtStart, signal, reloaded: "the stage reloaded: export aborted" };
+    try {
+      // The mix renders BEFORE the capture starts — a missing or undecodable
+      // audio asset must reject the export up front, not after two minutes
+      // of frames (the motion lane's posture, refusal over corruption).
+      const audio = audible
+        ? await raceStage((props.mixAudio ?? mixShotAudio)(doc, range ?? sceneId), watch)
+        : null;
+      // Audio mixing is asynchronous, while document edits can still arrive
+      // from another tab or an agent behind the export scrim. The stage does
+      // not freeze its document until exportMovie enters `begin`, below. Refuse
+      // if the immutable document object changed during the mix, otherwise the
+      // accepted file could pair audio from the old revision with video from
+      // the new one. The check and exportMovie call are in the same task, and
+      // exportMovie enters stage export framing synchronously before its first
+      // await, so no document push can interleave between them.
+      if (store.getState().doc !== doc) {
+        throw new Error(
+          "the project changed while its audio was prepared; export refused so sound and video cannot come from different revisions",
+        );
+      }
+      // The peak is measured on the FLOAT mix, which is the last moment it has
+      // its true amplitude — the encoder flattens everything past full scale.
+      // Same sentence the server render prints, from the same engine advisory,
+      // and on screen while the frames render rather than after the download.
+      if (audio !== null) setAudioNotice(audioPeakWarning(audio.peak));
+      const q = exportQuality(quality);
+      const result = await raceStage(
+        bridgeAtStart.exportMovie({
+          format,
+          ...(sceneId === undefined ? {} : { sceneId }),
+          ...(range === null ? {} : { window: range }),
+          // The same quality table the server path reads, expressed the way
+          // WebCodecs takes it: the CRF as the fixed QP the stage encodes at
+          // where a hardware encoder honours one (bridge v49), and bits/s from
+          // bits-per-pixel at this document's dimensions and rate for every
+          // other encoder. A GIF's size is its palette's, as on the server,
+          // which gives it no quality number either.
+          ...(format === "gif"
+            ? {}
+            : {
+                quantizer: q.crf,
+                videoBitrate: Math.round(
+                  q.bitsPerPixel * doc.size.width * doc.size.height * (doc.fps.num / doc.fps.den),
+                ),
+              }),
+          ...(audio !== null ? { audio } : {}),
+          signal,
+          onProgress: (done, total) => store.exportProgress(done, total),
+        }),
+        watch,
+      );
+      // Named by the server render's rule, so both backends write one name.
+      const filename = `${exportFileBase(doc, sceneId, range !== null)}${result.extension}`;
+      download(result.blob, filename);
+      setBrowserJob({ phase: "done", filename });
+      if (hosted && share !== "off") {
+        setShared({ phase: "saving" });
+        // Not awaited: the lock (and the stage's veil) ends with the download,
+        // and the upload needs neither.
+        saveVideo(result.blob, {
+          project: name,
+          title: doc.title ?? name,
+          filename,
+          visibility: share,
+          // Within what a saved video keeps: the dialog below still shows and
+          // copies the whole block.
+          ...(creditBlock === "" ? {} : { credits: creditsWithin(credits) }),
+          durationMs: Math.round((frames * 1000 * doc.fps.den) / doc.fps.num),
+          width: doc.size.width,
+          height: doc.size.height,
+        }).then(
+          (saved) => {
+            if (mounted.current) setShared({ phase: "saved", url: saved.url });
+            report(reportTo, { where: "videos", id: saved.id, url: saved.url }, filename);
+          },
+          (e: unknown) => {
+            const message = e instanceof Error ? e.message : String(e);
+            if (mounted.current) setShared({ phase: "failed", message });
+            else store.reportError(`${filename} downloaded, but saving it to Videos failed: ${message}`);
+            // Only the person's downloads hold it: the agent hears that.
+            report(reportTo, { where: "downloads", filename }, filename);
+          },
+        );
+      } else report(reportTo, { where: "downloads", filename }, filename);
+      // A software encoder at a bitrate (OpenH264 in Chrome) starts every film
+      // at a coarse QP and walks it down, so fine grain and a faint tint arrive
+      // late (docs/exporting.md, "Shot Tier 1"). Said beside the download
+      // rather than refused, because it is still the best encode this browser
+      // can make.
+      if (result.encoding?.rateControl === "bitrate" && result.encoding.encoder === "software") {
+        setEncoderNotice(
+          "This browser encoded the video in software, so its first second may look softer than the rest." +
+            (hosted ? "" : " The studio server render does not have this problem."),
+        );
+      }
+      if (result.audioSkippedReason !== undefined) {
+        // The movie downloaded but shipped silent — say why instead of
+        // letting the author discover it on playback. Overwrites the peak
+        // advisory, which has nothing to warn about in a file with no sound.
+        setAudioNotice(
+          `The video saved without sound: ${result.audioSkippedReason}.` +
+            (hosted ? "" : " The studio server render can include it."),
+        );
+      }
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      if (message === "export cancelled") {
+        // The author pressed Cancel; it must not read as a failure.
+        setBrowserJob({ phase: "cancelled" });
+        return;
+      }
+      // Hosted, the admin panel hears of it too. A piece's refusal names the
+      // layer by its label, which is the author's words, so it goes without
+      // its sentence: the piece's own report (`stage.piece_failure`) carries
+      // its id and what it threw.
+      const refusal = /export refused/.test(message) ? (REFUSALS.find(([, said]) => said.test(message))?.[0] ?? null) : undefined;
+      reportError({
+        code: refusal === undefined ? "export.failed" : "export.refused",
+        ...(refusal === "piece_failed" ? {} : { message }),
+        projectId: doc.id,
+        ...(sceneId === undefined ? {} : { shot: sceneId }),
+        detail: { format, ...(refusal === undefined ? {} : { refusal }) },
+      });
+      if (mounted.current) {
+        setBrowserJob(null);
+        setError(message);
+      } else {
+        // Closed mid-export and it then failed: the shell's strip is the only
+        // surface left, and losing the reason entirely is the alternative.
+        store.reportError(message);
+      }
+    } finally {
+      store.endBrowserExport();
+    }
+  };
+
+  const submit = (): void => {
+    if (blocked !== null) return;
+    if (effectiveDest === "browser") void runBrowser();
+    else void runServer();
   };
 
   return (
     <Dialog
       open
       title="Export"
-      // The shared dialog is a hard 320px, which is right for a confirm and
-      // too narrow for three labelled rows plus a size RANGE — the estimate
-      // was overflowing and clipping mid-range, and "911 KB–2" reads as a
-      // finished number rather than a truncated one.
-      className="shot-export-dialog"
+      // Paper's 648px form dialog. The shared 320px card was too narrow for a
+      // label column plus a size RANGE: the estimate clipped mid-range, and
+      // "911 KB–2" reads as a finished number rather than a truncated one.
+      size="wide"
       onClose={props.onClose}
-      actions={
-        <>
-          {running ? (
-            <button type="button" className="btn" onClick={() => void cancelRender(name)}>
-              Cancel render
-            </button>
-          ) : (
-            <button type="button" className="btn is-primary" onClick={submit}>
-              Export
-            </button>
-          )}
-          <button type="button" className="btn" onClick={props.onClose}>
-            Close
-          </button>
-        </>
-      }
+      // No Export while one runs, and no second Cancel here: the Rendering
+      // card below carries the one Cancel export, beside the count it stops.
+      // The title bar's X is the one way to close, so a run leaves no footer.
+      {...(running
+        ? {}
+        : {
+            actions: (
+              <button
+                ref={exportButton}
+                type="button"
+                className="btn is-primary"
+                // Held while the probe is still running on the browser path.
+                // Locally a known-bad capability never reaches here: the
+                // snap-back effect has already moved the destination to the
+                // server. Hosted it holds, with the note saying why. Held too
+                // while the stage shows one component or material, not the film.
+                disabled={blocked !== null || (effectiveDest === "browser" && (cap === null || !browserReady))}
+                onClick={submit}
+              >
+                Export
+              </button>
+            ),
+          })}
     >
-      <div className="export-dialog" data-testid="export-dialog">
-        <label className="export-row">
-          <span>Format</span>
+      <div ref={body} className="export-dialog" data-testid="export-dialog">
+        {/* A <div>, not a <label>, around a segmented control: a label
+            forwards a click on its text to its FIRST labelable descendant, so
+            clicking "Format" chose MP4. The control names itself. */}
+        <div className="export-row">
+          <span className="export-label">Format</span>
           <SegmentedControl
             ariaLabel="Export format"
+            className="is-accent is-lg export-switch"
             value={format}
             options={[
               { value: "mp4", label: "MP4" },
@@ -162,12 +687,101 @@ export function ExportDialog(props: { onClose(): void }) {
             ]}
             onChange={(next) => setFormat(next as ExportFormat)}
           />
-        </label>
+        </div>
+
+        {/* Hosted has no server render at all, so there is no choice to show. */}
+        {hosted ? null : (
+          <div className="export-row">
+            <span className="export-label">Render on</span>
+            <SegmentedControl
+              ariaLabel="Render destination"
+              className="is-accent is-lg export-switch is-destination"
+              value={dest}
+              options={[
+                { value: "browser", label: "This browser" },
+                { value: "server", label: "Studio server" },
+              ]}
+              onChange={(next) => setDest(next as "browser" | "server")}
+            />
+          </div>
+        )}
+
+        {cap === null ? (
+          <p className="export-note" data-testid="export-capability-checking">
+            {probeAttempt === 1
+              ? "Checking this browser's encoder…"
+              : `The encoder check ran out of time, so it is checking again (${probeAttempt} of ${PROBE_ATTEMPTS})…`}
+          </p>
+        ) : null}
+        {cap === "unavailable" ? (
+          <p className="export-note" data-testid="export-capability-note">
+            The browser export renders through the stage, which is not
+            connected.{" "}
+            {hosted ? "Reload the editor to reconnect it." : "The studio server render still works."}
+          </p>
+        ) : null}
+        {cap === "unanswered" ? (
+          <p className="export-note" data-testid="export-capability-note">
+            This browser&apos;s encoder did not answer in {PROBE_ATTEMPTS} checks.{" "}
+            <button type="button" className="link-button" onClick={checkAgain}>
+              Check again
+            </button>
+            {hosted ? "" : " The studio server render still works."}
+          </p>
+        ) : null}
+        {cap !== null && typeof cap !== "string" && !browserReady ? (
+          <p className="export-note" data-testid="export-capability-note">
+            This browser can&apos;t encode the {format === "gif" ? "GIF" : "MP4"}:{" "}
+            {encoder?.reason ?? "this stage predates the in-browser GIF encoder."}
+            {hosted ? "" : " The studio server render still works."}
+          </p>
+        ) : null}
+        {/* Why Export is held: the dialog stays open over a running export
+            in any workspace, so a run that ends here must not offer a start
+            that would capture the wrong stage. */}
+        {blocked !== null && !running ? (
+          <p className="export-note" data-testid="export-blocked-note">
+            {blocked}
+          </p>
+        ) : null}
+
+        {asked !== null ? (
+          <p className="export-note" data-testid="export-agent-note">
+            The agent asked for this export, and is told where the video is saved.
+          </p>
+        ) : null}
+
+        {/* Hosted only: the local studio has no workspace to share into. */}
+        {hosted ? (
+          <>
+            <div className="export-row">
+              <span className="export-label">Share</span>
+              <SegmentedControl
+                ariaLabel="Save to Videos"
+                className="is-accent is-lg export-switch is-share"
+                value={share}
+                options={[
+                  { value: "off", label: "Don't save" },
+                  { value: "private", label: "Only me" },
+                  { value: "workspace", label: "Workspace" },
+                  { value: "link", label: "Anyone with the link" },
+                ]}
+                onChange={(next) => {
+                  setShare(next as ShareChoice);
+                  writeShare(next as ShareChoice);
+                }}
+              />
+            </div>
+            <p className="export-note" data-testid="export-share-note">
+              {SHARE_HINTS[share]}
+            </p>
+          </>
+        ) : null}
 
         <label className="export-row">
-          <span>Quality</span>
+          <span className="export-label">Quality</span>
           <select
-            className="select"
+            className="select is-field export-select"
             aria-label="Export quality"
             value={quality}
             onChange={(e) => setQuality(e.target.value as ExportQualityId)}
@@ -181,14 +795,15 @@ export function ExportDialog(props: { onClose(): void }) {
         </label>
 
         <label className="export-row">
-          <span>Range</span>
+          <span className="export-label">Range</span>
           <select
-            className="select"
+            className="select is-field export-select"
             aria-label="Export range"
             value={scope}
             onChange={(e) => setScope(e.target.value)}
           >
-            <option value={WHOLE}>Whole timeline</option>
+            <option value={WHOLE}>Whole Project</option>
+            {area === null ? null : <option value={WORK_AREA}>Work area</option>}
             {doc.scenes.map((id) => (
               <option key={id} value={id}>
                 {doc.scenesById[id]?.name ?? id}
@@ -202,83 +817,291 @@ export function ExportDialog(props: { onClose(): void }) {
             render does not carry it. Warned HERE, client-side off (doc, scope),
             because the dialog already holds both and this costs the author
             nothing — the alternative is finding out after the render. */}
-        {scope !== WHOLE && predecessorTransitionOmitted(doc, scope) ? (
+        {sceneId !== undefined && predecessorTransitionOmitted(doc, sceneId) ? (
           <p className="export-note" data-testid="export-transition-note">
             The transition into this shot plays from the shot before it, so a
-            single-shot render starts on a cut. Render the whole timeline to
+            single-shot render starts on a cut. Render the whole Project to
             include it.
           </p>
         ) : null}
+        {/* The stage previews without blur, and so does its export. Said, not
+            switched: the author may be fine dropping it. */}
+        {blurred && effectiveDest === "browser" ? (
+          <p className="export-note" data-testid="export-blur-note">
+            Motion blur is not rendered in a browser export.
+            {hosted ? "" : " The studio server render includes it."}
+          </p>
+        ) : null}
 
         <label className="export-row">
-          <span>Audio</span>
+          <span className="export-label">Audio</span>
           <span className="export-audio" data-testid="export-audio">
+            {/* `checked` is what the FILE will carry, not the preference:
+                with no unmuted clips, as a GIF, or from a browser that cannot
+                encode audio, there is no audio track, and a ticked box over
+                "no audio clips in this Shot" claimed one. The preference
+                (`withAudio`) is kept, so picking MP4 back or a scope with
+                clips restores the author's choice. */}
             <input
+              className="checkbox"
               type="checkbox"
               aria-label="Include audio"
-              checked={withAudio}
-              disabled={format === "gif" || clipCount === 0}
+              aria-describedby={audioHintId}
+              checked={audible}
+              disabled={format === "gif" || clipCount === 0 || browserAudioReason !== undefined}
               onChange={(e) => setWithAudio(e.currentTarget.checked)}
             />
-            <span>
+            <span className="export-audio-hint" id={audioHintId}>
               {clipCount === 0
-                ? "no clips in this scene"
+                ? rangeClips.length === 0
+                  ? `no audio clips in this ${unit}`
+                  : `every audio clip in this ${unit} is muted`
                 : format === "gif"
-                  ? `${clipCount} clip${clipCount === 1 ? "" : "s"} — GIF has no audio track`
-                  : withAudio
-                    ? `${clipCount} clip${clipCount === 1 ? "" : "s"} included`
-                    : `${clipCount} clip${clipCount === 1 ? "" : "s"} will be dropped`}
+                  ? `${clipCount} clip${clipCount === 1 ? "" : "s"}, but GIF has no audio track`
+                  : browserAudioReason !== undefined
+                    ? `this browser cannot encode audio: ${browserAudioReason}.${hosted ? "" : " The studio server render includes it."}`
+                    : withAudio
+                      ? `${clipCount} clip${clipCount === 1 ? "" : "s"} included`
+                      : `${clipCount} clip${clipCount === 1 ? "" : "s"} will be dropped`}
             </span>
           </span>
         </label>
 
+        {creditBlock === "" ? null : (
+          <div className="export-credits" data-testid="export-credits">
+            <div className="export-row">
+              <span className="export-label">Credits</span>
+              <button
+                type="button"
+                className="btn is-outline"
+                data-testid="export-credits-copy"
+                onClick={() => {
+                  void navigator.clipboard?.writeText(creditBlock).then(
+                    () => {
+                      if (mounted.current) setCopied(true);
+                    },
+                    () => {},
+                  );
+                }}
+              >
+                {copied ? "Copied" : "Copy credits"}
+              </button>
+            </div>
+            <p className="export-note" data-testid="export-credits-note">
+              {credits.required.length > 0
+                ? "Required by CC BY: put these lines in the video's description or end card."
+                : "No credit is required. These lines thank the people whose sounds you used."}
+            </p>
+            <pre className="export-credits-text" data-testid="export-credits-text">
+              {creditBlock}
+            </pre>
+          </div>
+        )}
+
         <dl className="export-estimate" data-testid="export-estimate">
           <dt>Frames</dt>
-          <dd>{frames}</dd>
+          {/* The file's own count: a GIF over 50 fps keeps every k-th frame
+              (`gifFrameStride`), because browsers slow a delay under 2 cs. */}
+          <dd>{format === "gif" ? Math.ceil(frames / gifFrameStride(doc.fps)) : frames}</dd>
           <dt>Size</dt>
           {/* See the header: a GIF's size is a palette question, and the
               bits-per-pixel model does not know the answer. */}
           <dd>{format === "gif" ? "varies with palette" : formatSizeEstimate(size)}</dd>
-          <dt>Time</dt>
-          <dd>{formatTimeEstimate(stats, megapixels, frames)}</dd>
+          {/* The time figure is a median of the SERVER's own past renders —
+              it knows nothing about this browser's machine, so the browser
+              path shows no number rather than a wrong one. */}
+          {effectiveDest === "server" ? (
+            <>
+              <dt>Time</dt>
+              <dd>{formatTimeEstimate(stats, megapixels, frames)}</dd>
+            </>
+          ) : null}
         </dl>
 
-        {job !== null && <JobRow job={job} />}
-        {error !== null && <p className="export-error">{error}</p>}
+        {/* ONE outcome card at a time, newest first: a run in progress, then
+            a failure this dialog saw, then how the last run ended.
+            The slot is a polite live region, so a screen reader hears
+            "Rendering", "Saved", "Failed" as the card changes; it stays in the
+            DOM while empty because a region inserted with its content is not
+            reliably announced. The per-frame count inside Rendering opts out
+            (aria-live="off") or every progress tick would be read aloud. */}
+        <div className="export-outcome-slot" role="status">
+        {exportLock !== null ? (
+          <Outcome
+            kind="rendering"
+            title="Rendering"
+            action={
+              // The run's one Cancel, for either path: one lock is behind it.
+              // A `.btn` at the card's 28px (`export-outcome-cancel`).
+              <button
+                ref={cancelButton}
+                type="button"
+                className="btn export-outcome-cancel"
+                onClick={() => store.cancelExport()}
+              >
+                Cancel export
+              </button>
+            }
+          >
+            <p className="export-outcome-copy" data-testid="export-progress" aria-live="off">
+              {exportLockCount(exportLock)}
+              {exportLock.where === "browser" ? " in this browser" : ""}
+            </p>
+          </Outcome>
+        ) : error !== null ? (
+          <Outcome kind="failed" title="Failed">
+            <p className="export-outcome-copy" data-testid="export-error">
+              {error}
+            </p>
+          </Outcome>
+        ) : browserJob !== null ? (
+          <BrowserJobRow job={browserJob} shared={shared} />
+        ) : job !== null ? (
+          <JobRow job={job} />
+        ) : null}
+        </div>
+        {/* What the render had to say about the document, beside whatever card
+            is showing: an overloaded mix, a material that stalls under software
+            raster, a pool smaller than asked for. The server used to write
+            these to a log callback the job never passed. */}
+        {(job?.warnings ?? []).map((w) => (
+          <p className="export-note" data-testid="export-warning" key={w}>
+            {w}
+          </p>
+        ))}
+        {audioNotice !== null && (
+          <p className="export-note" data-testid="export-audio-notice">
+            {audioNotice}
+          </p>
+        )}
+        {encoderNotice !== null && (
+          <p className="export-note" data-testid="export-encoder-notice">
+            {encoderNotice}
+          </p>
+        )}
       </div>
     </Dialog>
   );
 }
 
+type OutcomeKind = "rendering" | "done" | "cancelled" | "failed";
+
+/** Paper's outcome card: a sunken tile with a title row (and the Rendering
+ *  card's Cancel on it) over one line of copy. Only Rendering takes the accent
+ *  ink: blue marks the state that is live, and a finished run is not. A
+ *  failure is ink too, with its reason in the copy, so the card states what
+ *  happened rather than shouting it. `data-outcome` is the state's hook. */
+function Outcome(props: { kind: OutcomeKind; title: string; action?: ReactNode; children: ReactNode }) {
+  return (
+    <section className={`export-outcome is-${props.kind}`} data-outcome={props.kind}>
+      <div className="export-outcome-head">
+        <span className="export-outcome-title">{props.title}</span>
+        {props.action}
+      </div>
+      {props.children}
+    </section>
+  );
+}
+
+/** How an in-browser export ENDED — answering the same question the server's
+ *  JobRow does ("where did it go") for a file that went to the DOWNLOADS
+ *  folder rather than the project. Progress is the lock's, above. */
+function BrowserJobRow(props: { job: BrowserJob; shared: Shared | null }) {
+  const { job, shared } = props;
+  const [copied, setCopied] = useState(false);
+  if (job.phase === "done") {
+    return (
+      <Outcome kind="done" title="Saved">
+        <p className="export-outcome-copy" data-testid="export-progress">
+          {/* Plain copy, as Paper sets it: the name is part of the sentence. */}
+          Saved {job.filename} to your downloads.
+        </p>
+        {shared === null ? null : shared.phase === "saving" ? (
+          <p className="export-outcome-copy" data-testid="export-share">
+            Saving to Videos…
+          </p>
+        ) : shared.phase === "failed" ? (
+          <p className="export-outcome-copy" data-testid="export-share">
+            Saving to Videos failed: {shared.message}. The download still stands.
+          </p>
+        ) : (
+          <p className="export-outcome-copy export-share-links" data-testid="export-share">
+            <button
+              type="button"
+              className="link-button"
+              onClick={() => {
+                void navigator.clipboard?.writeText(shared.url).then(() => setCopied(true), () => {});
+              }}
+            >
+              {copied ? "Link copied" : "Copy link"}
+            </button>
+            <a className="link-button" href={shared.url} target="_blank" rel="noopener">
+              Open page ↗
+            </a>
+          </p>
+        )}
+      </Outcome>
+    );
+  }
+  // Not an error, and it must not look like one: the author pressed Cancel.
+  return (
+    <Outcome kind="cancelled" title="Cancelled">
+      <p className="export-outcome-copy" data-testid="export-progress">
+        Export cancelled. Nothing was saved.
+      </p>
+    </Outcome>
+  );
+}
+
 /** The live job, or the last one this session. Shown after a "done" too: the
  *  author's next question is always "where did it go". */
 function JobRow(props: { job: RenderJob }) {
   const { job } = props;
-  if (job.phase === "running") {
-    return (
-      <p className="export-progress" data-testid="export-progress">
-        Rendering frame {job.done}/{job.total || "?"}
-      </p>
-    );
-  }
   if (job.phase === "done") {
     return (
-      <p className="export-progress is-done" data-testid="export-progress">
-        Written to <code>{job.out}</code>
-      </p>
+      <Outcome kind="done" title="Saved">
+        <p className="export-outcome-copy" data-testid="export-progress">
+          Written to {job.out}
+        </p>
+      </Outcome>
     );
   }
   if (job.phase === "cancelled") {
     // Not an error, and it must not look like one: the author pressed Cancel.
     return (
-      <p className="export-progress" data-testid="export-progress">
-        Render cancelled — nothing was written.
-      </p>
+      <Outcome kind="cancelled" title="Cancelled">
+        <p className="export-outcome-copy" data-testid="export-progress">
+          Render cancelled. Nothing was written.
+        </p>
+      </Outcome>
     );
   }
   return (
-    <p className="export-error" data-testid="export-progress">
-      {job.error ?? "The render failed."}
-    </p>
+    <Outcome kind="failed" title="Failed">
+      <p className="export-outcome-copy" data-testid="export-progress">
+        {job.error ?? "The render failed."}
+      </p>
+      {/* Where the failing frame's forensics went, and the render's last
+          output: the page's own errors used to stop at a server log. */}
+      {job.diagnostics !== undefined && (
+        <p className="export-outcome-copy" data-testid="export-diagnostics">
+          Diagnostics for the failing frame: <code>{job.diagnostics}</code>
+        </p>
+      )}
+      {job.log !== undefined && job.log.length > 0 && (
+        <details className="export-log" data-testid="export-log">
+          <summary>
+            {/* Paper's 12px chevron in place of the UA's marker triangle,
+                which takes neither a token colour nor this size. It turns
+                over when the log is open (dialogs.css). */}
+            <svg className="export-log-chevron" viewBox="0 0 12 12" aria-hidden="true">
+              <path d="m3 4.5 3 3 3-3" />
+            </svg>
+            Render output
+          </summary>
+          <pre>{job.log.join("\n")}</pre>
+        </details>
+      )}
+    </Outcome>
   );
 }