+
+ )}
+
+
+ Test #{target.regressionId}
+
+
+ {target.command} · {target.sampleName} · run {target.runId}
+
+
+ {view === "diff" ?
+ setView("diff")}
+ />
+ setView("playback")}
+ />
+
+
+ {isLoading &&
+ {error instanceof Error ? error.message : "Could not load diff"} — the output
+ file for this result isn't present in storage.
+
+ )}
+ {data && (
+
+ );
+}
+
+/**
+ * The sample playing above its two caption tracks.
+ *
+ * Browsers decode very little of this library — most of it is broadcast
+ * captures in containers no browser ships a demuxer for — so the player is
+ * offered optimistically and the element's own error event decides whether it
+ * worked. When it cannot play, the two tracks are still worth reading side by
+ * side, and the sample is one click away for a local player.
+ */
+function PlaybackPane({ target }: Readonly<{ target: DiffTarget }>) {
+ const video = useRef
+ {data.content.trim() === "" ? (
+ Diff is empty.
+ ) : (
+ numbered(data.content.split("\n")).map(({ id, line }) => (
+
+ {line || " "}
+
+ ))
+ )}
+
+ )}
+
+ {file.isLoading && (
+
+ )}
+
+ {file.data?.download_url && failure === null && (
+
+ )}
+
+ {(failure !== null || (file.data && !file.data.download_url) || file.isError) && (
+
+ {file.data?.download_url ? (
+ <>
+ {failure === MEDIA_ERR_SRC_NOT_SUPPORTED
+ ? "No browser ships a demuxer for this container, which covers most of the broadcast captures in this library."
+ : "The sample did not download — its storage link may have expired."}
+
+
+ )}
+
+
+ );
+}
+
+function useOutput(target: DiffTarget, which: "expected" | "actual") {
+ return useQuery({
+ queryKey: ["output-text", target.runId, target.regressionId, target.outputId, which],
+ staleTime: Infinity,
+ retry: false,
+ queryFn: async () => {
+ const file = await outputText(target, which);
+ return { ...file, cues: parseCues(file.content) };
+ },
+ });
+}
+
+type OutputQuery = ReturnType
+
+
+
+ );
+}
+
+function CueRow({
+ cue,
+ active,
+ onSeek,
+}: Readonly<{
+ cue: Cue;
+ active: boolean;
+ onSeek: (t: number) => void;
+}>) {
+ return (
+
+ );
+}
+
+function Skeleton({ rows }: Readonly<{ rows: number }>) {
+ return (
+
+
+ {title}
+
+ {q.data && (
+
+ {q.data.cues.length > 0 ? `${q.data.cues.length} cues` : q.data.filename}
+
+ )}
+
+
+ {q.isLoading && (
+ = c.start && at < c.end} onSeek={onSeek} />
+ ))}
+ {q.data?.truncated && (
+
+
+
+ )}
+ {q.isError && (
+ + {title === "Actual" + ? "This run produced no output for the test." + : "No baseline file is present in storage."} +
+ )} + {q.data?.cues.length === 0 && ( + // Plain transcripts carry no timings, so there is nothing to sync. +
+ {q.data.content.trim() || Empty file.}
+
+ )}
+ {q.data?.cues.map((c) => (
+ Truncated at 1 MiB.
+ )} +
+ {Array.from({ length: rows }, (_, n) => `placeholder-${n}`).map((id) => (
+
+ ))}
+
+ );
+}
+
+function Notice({ children }: Readonly<{ children: React.ReactNode }>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/web/src/components/Login.tsx b/web/src/components/Login.tsx
new file mode 100644
index 00000000..48895028
--- /dev/null
+++ b/web/src/components/Login.tsx
@@ -0,0 +1,171 @@
+import { Loader2, LogIn, Moon, Sun } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { requestPasswordReset, requestSignup } from "@/lib/api";
+import { login } from "@/lib/auth";
+import { asset } from "@/lib/utils";
+
+const LINK = "cursor-pointer text-primary hover:underline";
+
+type Mode = "signin" | "reset" | "signup";
+
+const COPY: Record
+
+
+
+
+ );
+}
diff --git a/web/src/components/ResetPassword.tsx b/web/src/components/ResetPassword.tsx
new file mode 100644
index 00000000..38a8c011
--- /dev/null
+++ b/web/src/components/ResetPassword.tsx
@@ -0,0 +1,162 @@
+import { KeyRound, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { completePasswordReset } from "@/lib/api";
+import { asset } from "@/lib/utils";
+
+/**
+ * Set a new password from the link in a recovery email.
+ *
+ * Reached without a session, so it renders on its own rather than inside
+ * the shell. The three values in the query string are the platform's
+ * signed link: they are handed straight back to the API, which is what
+ * checks them. Nothing here can decide whether a link is good.
+ */
+export function ResetPassword() {
+ const [params, setParams] = useState<{
+ uid: number;
+ expires: number;
+ mac: string;
+ } | null>(null);
+ const [password, setPassword] = useState("");
+ const [confirm, setConfirm] = useState("");
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState
+ ![CCExtractor]({asset("ccx.svg")})
+
+
+ {mode !== "signin" && (
+
+
+
+ Sample Platform
+ CCExtractor regression testing
+ {COPY[mode].title}
+ )}
+
+
+ setEmail(e.target.value)}
+ placeholder="you@example.com"
+ className="mb-3"
+ />
+ {mode === "signin" && (
+ <>
+
+ setPassword(e.target.value)}
+ className="mb-4"
+ />
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+ {sent && (
+
+ {COPY[mode].sent}
+
+ )}
+
+
+ {/* Both links finish on the classic site, which is where accounts are
+ created and passwords are set. */}
+
+ {mode === "signin" ? (
+ <>
+
+ ·
+
+
+ ) : (
+
+ )}
+
+
+ + Use the same account as the CCExtractor Sample Platform. +
+
+
+
+
+ );
+}
diff --git a/web/src/components/ResizeHandle.tsx b/web/src/components/ResizeHandle.tsx
new file mode 100644
index 00000000..1ddc5592
--- /dev/null
+++ b/web/src/components/ResizeHandle.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Persisted, draggable width for a pane. Returns the current width and a
+ *
+
+
+
+ {!params && (
+
+
+
+
+ Choose a new password
+
+ CCExtractor Sample Platform
+
+ This link is missing part of itself. Ask for a new one from the sign-in
+ page.
+
+ )}
+
+ {params && !done && (
+ <>
+
+ setPassword(e.target.value)}
+ className="mb-3"
+ />
+
+ setConfirm(e.target.value)}
+ className="mb-4"
+ />
+ {confirm && password !== confirm && (
+
+ The two do not match.
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+ {/* The link carries the old password's signature, so using it
+ once is the last thing it can do. */}
+ + This link works once, and stops working as soon as the password + changes. +
+ + )} + + {done && ( + <> +
+ Password changed. You can sign in with it now.
+
+
+
+ )}
+
+
+
+ );
+
+ return { width, handle };
+}
diff --git a/web/src/components/Sparkline.tsx b/web/src/components/Sparkline.tsx
new file mode 100644
index 00000000..b19ad4d4
--- /dev/null
+++ b/web/src/components/Sparkline.tsx
@@ -0,0 +1,24 @@
+import type { SparkResult } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+/** Pass/fail history dots, newest last. */
+export function Sparkline({ results, className }: Readonly<{ results: SparkResult[]; className?: string }>) {
+ if (results.length === 0) {
+ return no runs yet;
+ }
+ return (
+
+ {results.map((r, i) => ({ id: `run-${i}`, r })).map(({ id, r }) => (
+
+ ))}
+
+ );
+}
diff --git a/web/src/components/StatusBadge.tsx b/web/src/components/StatusBadge.tsx
new file mode 100644
index 00000000..6b332210
--- /dev/null
+++ b/web/src/components/StatusBadge.tsx
@@ -0,0 +1,32 @@
+import type { RunStatus } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+/** Colored dot + quiet label; in-flight states pulse. */
+const RUN_STATUS: Record
+
+
+ {title}
+
+
+
+ {body}
+
+
+
+
+
+
+ {children}
+
+