feat(scheduler): each row shows its last three runs, an interrupted run as such, and the ad-hoc runs beside the jobs

A row's one dot said how the LAST run went, and an interrupted run fell through to "idle" — a grey dot
that read as "no run recorded". The row now leads with its last three runs, newest first, each named
for a screen reader and in its tooltip (how it went, when, who started it); an interrupted run is a
ring, set apart from a skipped run and a failure, and its line says the server restarted under it.

A channel's full-history backfill gets its own "Ad-hoc runs" block: its runs, its channel and what
it fetched, no interval and no run button — it needs its target. AD_HOC_JOBS names every such job;
the backend-id contract holds their names in both languages, and run_ad_hoc refuses any other id.

frontend/src/components/Scheduler.dom.test.tsx

@@ -6,7 +6,7 @@
 // because this page polls: every few seconds a fresh status arrives, and a mirror is exactly the
 // thing a poll can overwrite at the wrong moment.
 import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, fireEvent, cleanup, act, waitFor } from "@testing-library/react";
+import { render, screen, fireEvent, cleanup, act, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 vi.mock("react-i18next", async (importOriginal) => {
@@ -15,7 +15,7 @@ vi.mock("react-i18next", async (importOriginal) => {
 });
 
 import Scheduler from "./Scheduler";
-import { api, type SchedulerStatus } from "../lib/api";
+import { api, type RunBrief, type SchedulerAdHoc, type SchedulerStatus } from "../lib/api";
 import { qk } from "../lib/queryKeys";
 
 const status = (over: Partial<SchedulerStatus> = {}): SchedulerStatus => ({
@@ -34,9 +34,14 @@ const status = (over: Partial<SchedulerStatus> = {}): SchedulerStatus => ({
       last_result: null,
       result: null,
       last_error: null,
+      last_trigger: null,
+      last_run_id: null,
+      quota_units: null,
+      recent: [],
       progress: null,
     },
   ],
+  ad_hoc: [],
   queue: {
     channels_recent_pending: 0,
     channels_deep_pending: 0,
@@ -281,3 +286,80 @@ describe("a job's last result", () => {
     expect(screen.queryByText(/new=3/)).toBeNull();
   });
 });
+
+describe("a row's run history", () => {
+  const at = (minutesAgo: number) => new Date(Date.now() - minutesAgo * 60_000).toISOString();
+  const run = (id: number, status: RunBrief["status"], minutesAgo: number): RunBrief => ({
+    id,
+    status,
+    trigger: "scheduled",
+    started_at: at(minutesAgo),
+    finished_at: status === "running" ? null : at(minutesAgo),
+  });
+  const dots = (root: HTMLElement = document.body) =>
+    within(root)
+      .getAllByRole("img")
+      .map((d) => d.getAttribute("data-dot"));
+
+  // An interrupted run fell through to "idle" — a grey dot that said no run was ever recorded.
+  it("shows the last runs newest first, an interrupted one as such", async () => {
+    const base = status();
+    await mount({
+      ...base,
+      jobs: [
+        {
+          ...base.jobs[0]!,
+          status: "interrupted",
+          last_finished: at(2),
+          recent: [run(3, "interrupted", 2), run(2, "error", 12), run(1, "ok", 22)],
+        },
+      ],
+    });
+    expect(dots()).toEqual(["interrupted", "error", "ok"]);
+    expect(screen.getByText(/scheduler\.interrupted/)).toBeTruthy();
+    expect(screen.getByText("scheduler.dot.interrupted")).toBeTruthy(); // the legend names it
+  });
+
+  it("shows one idle dot for a job that never ran", async () => {
+    await mount();
+    expect(dots()).toEqual(["idle"]);
+  });
+
+  it("gives a run the job has claimed, but not yet recorded, the newest dot", async () => {
+    const base = status();
+    await mount({
+      ...base,
+      jobs: [
+        {
+          ...base.jobs[0]!,
+          running: true,
+          recent: [run(3, "ok", 10), run(2, "ok", 20), run(1, "error", 30)],
+        },
+      ],
+    });
+    expect(dots()).toEqual(["running", "ok", "ok"]);
+  });
+
+  // The one-channel full-history backfill ran unseen: a background task only the log heard of.
+  it("lists a user's ad-hoc run beside the jobs, with its channel and no run button", async () => {
+    const base = status();
+    const adHoc: SchedulerAdHoc = {
+      ...base.jobs[0]!,
+      id: "channel_backfill",
+      running: false,
+      target: "UC_bbc",
+      target_title: "BBC Earth",
+      last_finished: at(60),
+      result: { videos_added: 69 },
+      recent: [run(9, "ok", 60), run(8, "ok", 120)],
+    };
+    await mount({ ...base, ad_hoc: [adHoc] });
+    expect(screen.getByText("scheduler.adHocTitle")).toBeTruthy();
+    const row = screen.getByText("scheduler.jobs.channel_backfill").closest<HTMLElement>(".p-3")!;
+    expect(dots(row)).toEqual(["ok", "ok"]);
+    expect(within(row).getByText(/BBC Earth/)).toBeTruthy();
+    expect(within(row).getByText(/scheduler\.result\.videos_added: 69/)).toBeTruthy();
+    expect(within(row).getByText("scheduler.adHocStarted")).toBeTruthy();
+    expect(within(row).queryByRole("button", { name: "scheduler.runNow" })).toBeNull();
+  });
+});

frontend/src/components/Scheduler.menu.dom.test.tsx

@@ -32,9 +32,14 @@ const status = (over: Partial<SchedulerStatus> = {}): SchedulerStatus => ({
       last_result: null,
       result: null,
       last_error: null,
+      last_trigger: null,
+      last_run_id: null,
+      quota_units: null,
+      recent: [],
       progress: null,
     },
   ],
+  ad_hoc: [],
   queue: {
     channels_recent_pending: 0,
     channels_deep_pending: 0,

frontend/src/components/Scheduler.tsx

@@ -17,7 +17,14 @@ import {
   Trash2,
   X,
 } from "lucide-react";
-import { api, type SchedulerJob, type SchedulerStatus } from "../lib/api";
+import {
+  api,
+  type RunBrief,
+  type RunFields,
+  type SchedulerAdHoc,
+  type SchedulerJob,
+  type SchedulerStatus,
+} from "../lib/api";
 import { useLiveQuery } from "../lib/useLiveQuery";
 import { Button } from "./ui/Button";
 import { LoadingState, StateMessage } from "./ui/QueryState";
@@ -57,41 +64,40 @@ function fmtCountdown(t: TFunction, s: number, lang: string): string {
   return `${formatUnit(h, "hour", lang)} ${formatUnit(m % 60, "minute", lang)}`;
 }
 
-const DOT_CLASS: Record<string, string> = {
+// Interrupted is a ring, not a fill: the job did not fail, but its work did not finish either — set
+// apart from a skipped run (the same colour, filled) and from a failure.
+const DOT_CLASS = {
   running: "bg-accent animate-pulse",
   ok: "bg-success",
   error: "bg-danger",
   skipped: "bg-warn",
+  interrupted: "border-2 border-warn",
   idle: "bg-border",
-};
+} as const;
 
-function statusKey(job: SchedulerJob): keyof typeof DOT_CLASS {
-  if (job.running) return "running";
-  if (job.status === "ok") return "ok";
-  if (job.status === "error") return "error";
-  if (job.status === "skipped") return "skipped";
-  return "idle";
-}
+type DotKey = keyof typeof DOT_CLASS;
 
-function StatusDot({
-  k,
-  withTooltip = true,
-}: {
-  k: keyof typeof DOT_CLASS;
-  withTooltip?: boolean;
-}) {
-  const { t } = useTranslation();
-  const dot = <span className={`inline-block w-2.5 h-2.5 rounded-full shrink-0 ${DOT_CLASS[k]}`} />;
-  return withTooltip ? <Tooltip hint={t(`scheduler.dot.${k}`)}>{dot}</Tooltip> : dot;
+/** A status dot. `label` names it for a screen reader (the tooltip shows only on hover, and only with
+ *  hints on); a legend's dot has its words beside it and stays unnamed. */
+function StatusDot({ k, label }: { k: DotKey; label?: string }) {
+  return (
+    <span
+      role={label ? "img" : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      data-dot={k}
+      className={`inline-block w-2.5 h-2.5 rounded-full shrink-0 ${DOT_CLASS[k]}`}
+    />
+  );
 }
 
 function StatusLegend() {
   const { t } = useTranslation();
   return (
     <div className="flex items-center gap-x-3 gap-y-1 flex-wrap text-2xs text-muted mb-2">
-      {(["running", "ok", "idle", "error", "skipped"] as const).map((k) => (
+      {(["running", "ok", "idle", "error", "skipped", "interrupted"] as const).map((k) => (
         <span key={k} className="inline-flex items-center gap-1.5">
-          <StatusDot k={k} withTooltip={false} />
+          <StatusDot k={k} />
           {t(`scheduler.dot.${k}`)}
         </span>
       ))}
@@ -99,6 +105,106 @@ function StatusLegend() {
   );
 }
 
+// The server sends a row's newest runs, at most this many (RECENT_RUNS in app/scheduler.py).
+const MAX_DOTS = 3;
+
+/** A row's last runs, newest first (leftmost), each saying in its tooltip how it went, when, and who
+ *  started it. A row with no run yet shows one idle dot. While a run goes on the newest dot pulses:
+ *  the job's own claim says so a moment before its run row exists, so that moment gets a dot too. */
+function RunDots({ runs, running }: { runs: RunBrief[]; running: boolean }) {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+  const claimed = running && runs[0]?.status !== "running";
+  const shown: (RunBrief | null)[] = claimed ? [null, ...runs].slice(0, MAX_DOTS) : runs;
+  const dots = shown.length === 0 ? [undefined] : shown;
+  return (
+    <span className="inline-flex items-center gap-1 w-10 shrink-0">
+      {dots.map((run) => {
+        const hint =
+          run === undefined
+            ? t("scheduler.dot.idle")
+            : run === null
+              ? t("scheduler.dot.running")
+              : t("scheduler.dotRun", {
+                  state: t(`scheduler.dot.${run.status}`),
+                  time: relativeTime(run.started_at, lang, t),
+                  trigger: t(`scheduler.trigger.${run.trigger}`),
+                });
+        const k: DotKey = run === undefined ? "idle" : run === null ? "running" : run.status;
+        return (
+          <Tooltip key={run?.id ?? String(run)} hint={hint}>
+            <StatusDot k={k} label={hint} />
+          </Tooltip>
+        );
+      })}
+    </span>
+  );
+}
+
+/** "Last run 2 min ago · <what it did>", the line under a row's name: how the newest ended run went
+ *  — its failure, its result, or that the process stopped under it. */
+function LastRun({ row, running, target }: { row: RunFields; running: boolean; target?: string }) {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+  return (
+    <div
+      className="text-2xs text-muted truncate"
+      title={(!running && formatDateTime(row.last_finished, lang)) || undefined}
+    >
+      {running
+        ? t("scheduler.runningNow")
+        : row.last_finished
+          ? t("scheduler.lastRun", { time: relativeTime(row.last_finished, lang, t) })
+          : t("scheduler.neverRun")}
+      {target && <span> · {target}</span>}
+      {row.last_error ? (
+        <span className="text-danger">
+          {" · "}
+          {jobFailureText(t, row.result, lang) ?? row.last_error}
+        </span>
+      ) : row.status === "interrupted" ? (
+        <span className="text-warn"> · {t("scheduler.interrupted")}</span>
+      ) : row.result ? (
+        <span> · {jobResultText(t, row.result, lang)}</span>
+      ) : row.last_result ? (
+        <span> · {row.last_result}</span>
+      ) : null}
+    </div>
+  );
+}
+
+/** A user's run on one target (a channel's full history): its runs as a job's are shown, but it has
+ *  no interval and no "run now" — it needs its target, so it is started where that is chosen. */
+function AdHocRow({ row }: { row: SchedulerAdHoc }) {
+  const { t } = useTranslation();
+  return (
+    <div className={`${SURFACE.card} p-3 flex items-center gap-3`}>
+      <RunDots runs={row.recent} running={row.running} />
+      <div className="min-w-0 flex-1">
+        <div className="text-sm font-medium">
+          <Tooltip hint={t(`scheduler.jobDesc.${row.id}`, "")}>
+            <span className="underline decoration-dotted decoration-muted/40 underline-offset-4 cursor-help">
+              {t(`scheduler.jobs.${row.id}`, row.id)}
+            </span>
+          </Tooltip>
+        </div>
+        <LastRun
+          row={row}
+          running={row.running}
+          target={row.target_title ?? row.target ?? undefined}
+        />
+      </div>
+      <div className="shrink-0 text-right text-2xs text-muted">
+        {row.running ? (
+          <span className="text-accent">{t("scheduler.active")}</span>
+        ) : (
+          t("scheduler.adHocStarted")
+        )}
+      </div>
+    </div>
+  );
+}
+
 // Shown for ANY running job. With reported counts it's a determinate bar; for a job that
 // runs but doesn't report progress (or hasn't yet) it falls back to a generic "working"
 // label and an indeterminate sliver — so every active run is visible, not just the ones
@@ -186,7 +292,7 @@ function JobRow({
 
   return (
     <div className={`${SURFACE.card} p-3 flex items-center gap-3`}>
-      <StatusDot k={statusKey(job)} />
+      <RunDots runs={job.recent} running={job.running} />
       <div className="min-w-0 flex-1">
         <div className="text-sm font-medium flex items-center gap-1.5 flex-wrap">
           <Tooltip hint={t(`scheduler.jobDesc.${job.id}`, "")}>
@@ -247,26 +353,7 @@ function JobRow({
             </Tooltip>
           )}
         </div>
-        <div
-          className="text-2xs text-muted truncate"
-          title={(!job.running && formatDateTime(job.last_finished, lang)) || undefined}
-        >
-          {job.running
-            ? t("scheduler.runningNow")
-            : job.last_finished
-              ? t("scheduler.lastRun", { time: relativeTime(job.last_finished, lang, t) })
-              : t("scheduler.neverRun")}
-          {job.last_error ? (
-            <span className="text-danger">
-              {" · "}
-              {jobFailureText(t, job.result, lang) ?? job.last_error}
-            </span>
-          ) : job.result ? (
-            <span> · {jobResultText(t, job.result, lang)}</span>
-          ) : job.last_result ? (
-            <span> · {job.last_result}</span>
-          ) : null}
-        </div>
+        <LastRun row={job} running={job.running} />
         {job.running && <JobProgress p={job.progress} />}
       </div>
       <div className="shrink-0 text-right text-2xs text-muted tabular-nums">
@@ -646,6 +733,18 @@ export default function Scheduler() {
         </div>
       </div>
 
+      {/* Ad-hoc runs: a user's work on one target, shown beside the jobs because it spends the same quota */}
+      {data.ad_hoc.length > 0 && (
+        <div>
+          <SectionLabel className="mb-2">{t("scheduler.adHocTitle")}</SectionLabel>
+          <div className="space-y-1.5">
+            {data.ad_hoc.map((row) => (
+              <AdHocRow key={row.id} row={row} />
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Queue */}
       <div>
         <SectionLabel className="mb-2">{t("scheduler.queueTitle")}</SectionLabel>