feat(web): stop, replay and remove runs from the analysis history (#7)

Author: ralyodio

apps/web/src/actions.ts

@@ -12,9 +12,11 @@ import {
   addAthlete,
   addVideo,
   analyzeProject,
+  cancelJob,
   clipsFromMoments,
   createProject,
   createReel,
+  getJob,
   isReelEelError,
   listExports,
   listJobLogsSince,
@@ -25,6 +27,7 @@ import {
   projectDir,
   removeAthlete,
   removeExport,
+  removeJob,
   removeProject,
   removeVideo,
   renderReel,
@@ -209,6 +212,37 @@ const uploadFailed = (
   return back(c, to, undefined, `${described.error}${hint}${suffix}`);
 };
 
+/**
+ * Analyses running in this process, by job id.
+ *
+ * Cancelling has to reach the work, not just relabel the row: `cancelJob`
+ * alone would mark a job canceled while FFmpeg and the detector carried on
+ * chewing through the video. The signal is what makes Stop mean stop.
+ */
+const runningAnalyses = new Map<string, AbortController>();
+
+/** Kicks off an analysis and keeps hold of its cancel handle. */
+const startAnalysis = (root: string, options: { preset: Preset; videoId?: string }): void => {
+  const controller = new AbortController();
+  let jobId: string | null = null;
+
+  void analyzeProject(root, {
+    preset: options.preset,
+    ...(options.videoId === undefined ? {} : { videoId: options.videoId }),
+    signal: controller.signal,
+    onStart: (job) => {
+      jobId = job.id;
+      runningAnalyses.set(job.id, controller);
+    },
+  })
+    .catch((error: unknown) => {
+      process.stderr.write(`analysis failed: ${failed(error)}\n`);
+    })
+    .finally(() => {
+      if (jobId !== null) runningAnalyses.delete(jobId);
+    });
+};
+
 export const registerActions = (app: Hono): void => {
   const guard = async (c: Context): Promise<Response | null> =>
     originAllowed(c) ? null : c.text('Bad origin', 403);
@@ -384,6 +418,78 @@ export const registerActions = (app: Hono): void => {
     return c.json({ ok: true, upload: view(record) });
   });
 
+  // ── Job controls: stop, replay, discard ───────────────────────────────────
+  //
+  // The pipeline could already cancel and re-run; none of it was reachable from
+  // the browser, so a run that went wrong could only be waited out.
+
+  /** Stop. Aborts the actual work, then records the cancellation. */
+  app.post('/projects/:ref/jobs/:id/cancel', async (c) => {
+    const bad = await guard(c);
+    if (bad !== null) return bad;
+    const ref = c.req.param('ref') ?? '';
+    const to = `/projects/${encodeURIComponent(ref)}`;
+
+    try {
+      const root = await rootOf(c);
+      const id = c.req.param('id') ?? '';
+      // Abort first: the job row is the record, the signal is the mechanism.
+      runningAnalyses.get(id)?.abort();
+      runningAnalyses.delete(id);
+      await cancelJob(root, id);
+      return back(c, to, 'Analysis canceled');
+    } catch (error) {
+      return back(c, to, undefined, failed(error));
+    }
+  });
+
+  /**
+   * Replay. Re-runs with the settings the original used, rather than whatever
+   * the form happens to show now — the point of replaying a specific run.
+   */
+  app.post('/projects/:ref/jobs/:id/retry', async (c) => {
+    const bad = await guard(c);
+    if (bad !== null) return bad;
+    const ref = c.req.param('ref') ?? '';
+    const to = `/projects/${encodeURIComponent(ref)}`;
+
+    try {
+      const root = await rootOf(c);
+      const job = await getJob(root, c.req.param('id') ?? '');
+      if (job.status === 'running' || job.status === 'queued') {
+        return back(c, to, undefined, 'That analysis is still running.');
+      }
+
+      const params = job.params as { preset?: string; videoIds?: unknown };
+      const preset = (typeof params.preset === 'string' ? params.preset : 'balanced') as Preset;
+      const videoIds = Array.isArray(params.videoIds) ? params.videoIds : [];
+      // One video means it was a single-video run; several means "all", and
+      // analyzeProject reads that as "no filter".
+      const videoId = videoIds.length === 1 && typeof videoIds[0] === 'string' ? videoIds[0] : undefined;
+
+      startAnalysis(root, { preset, ...(videoId === undefined ? {} : { videoId }) });
+      return back(c, to, 'Analysis restarted — watch the live log');
+    } catch (error) {
+      return back(c, to, undefined, failed(error));
+    }
+  });
+
+  /** Discard a finished run from the history. */
+  app.post('/projects/:ref/jobs/:id/delete', async (c) => {
+    const bad = await guard(c);
+    if (bad !== null) return bad;
+    const ref = c.req.param('ref') ?? '';
+    const to = `/projects/${encodeURIComponent(ref)}`;
+
+    try {
+      const root = await rootOf(c);
+      await removeJob(root, c.req.param('id') ?? '');
+      return back(c, to, 'Removed from history');
+    } catch (error) {
+      return back(c, to, undefined, failed(error));
+    }
+  });
+
   /**
    * Downloads a rendered reel.
    *
@@ -791,11 +897,7 @@ export const registerActions = (app: Hono): void => {
 
       // Analysis takes minutes; holding the request open would time out at the
       // proxy. It records a job, so the page can report progress instead.
-      void analyzeProject(root, { preset, ...(videoId === undefined ? {} : { videoId }) }).catch(
-        (error: unknown) => {
-          process.stderr.write(`analysis failed: ${failed(error)}\n`);
-        },
-      );
+      startAnalysis(root, { preset, ...(videoId === undefined ? {} : { videoId }) });
 
       return back(c, to, 'Analysis started — watch the live log');
     } catch (error) {

apps/web/src/client/jobs.tsx

@@ -67,6 +67,8 @@ const JobLog = ({ base }: { base: string }) => {
   const [jobs, setJobs] = useState<Job[]>([]);
   const [lines, setLines] = useState<LogLine[]>([]);
   const [connection, setConnection] = useState<Connection>('connecting');
+  const [busy, setBusy] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
   const pane = useRef<HTMLDivElement | null>(null);
   /** Forces a repaint once a second so elapsed time and ETA actually advance. */
   const [, tick] = useState(0);
@@ -171,6 +173,34 @@ const JobLog = ({ base }: { base: string }) => {
   const running = jobs.filter((job) => job.status === 'running' || job.status === 'queued');
   const recent = jobs.slice(0, 5);
 
+  /**
+   * Job controls post as ordinary form actions so the no-JavaScript page can
+   * use the identical routes; here they go over fetch to avoid losing the log.
+   * No optimistic update — the SSE feed reports the real state a moment later,
+   * and inventing one would only risk disagreeing with it.
+   */
+  const act = async (job: Job, action: 'cancel' | 'retry' | 'delete'): Promise<void> => {
+    if (action === 'delete' && !window.confirm('Remove this run from the history?')) return;
+    if (action === 'cancel' && !window.confirm('Stop this analysis? Progress so far is lost.')) return;
+    setBusy(job.id);
+    try {
+      const response = await fetch(`${base}/jobs/${job.id}/${action}`, {
+        method: 'POST',
+        headers: { accept: 'application/json' },
+      });
+      // These routes redirect for the no-JS path; a redirect is still a success.
+      if (!response.ok && response.type !== 'opaqueredirect') {
+        setActionError(`Could not ${action} that run (${response.status}).`);
+      } else {
+        setActionError(null);
+      }
+    } catch (error) {
+      setActionError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setBusy(null);
+    }
+  };
+
   return (
     <div>
       {/* The page already has the "Analysis" heading; this only adds the state
@@ -218,6 +248,23 @@ const JobLog = ({ base }: { base: string }) => {
                 {Math.round(job.progress * 100)}%
                 {clock(job.etaSeconds) === '' ? '' : ` — ${clock(job.etaSeconds)}`}
               </span>
+
+              {job.status === 'running' || job.status === 'queued' ? (
+                <button type="button" disabled={busy === job.id} onClick={() => void act(job, 'cancel')}>
+                  Stop
+                </button>
+              ) : (
+                <>
+                  {/* Replays with the settings that run used, not whatever the
+                      form shows now. */}
+                  <button type="button" disabled={busy === job.id} onClick={() => void act(job, 'retry')}>
+                    Replay
+                  </button>
+                  <button type="button" disabled={busy === job.id} onClick={() => void act(job, 'delete')}>
+                    Remove
+                  </button>
+                </>
+              )}
             </div>
 
             {/* The bit that was missing entirely: why it failed. */}
@@ -226,6 +273,8 @@ const JobLog = ({ base }: { base: string }) => {
         ))
       )}
 
+      {actionError === null ? null : <p class="pill reject upload-error">{actionError}</p>}
+
       <div class="log-pane" ref={pane} onScroll={onScroll} role="log" aria-live="polite">
         {lines.length === 0 ? (
           <p class="muted">Waiting for the first stage…</p>

apps/web/src/views/pages.tsx

@@ -337,6 +337,7 @@ export const ProjectPage: FC<ProjectView> = ({
                 <th>Stage</th>
                 <th>Progress</th>
                 <th>Detail</th>
+                <th />
               </tr>
             </thead>
             <tbody>
@@ -351,6 +352,26 @@ export const ProjectPage: FC<ProjectView> = ({
                   <td class="muted">{job.stage ?? '—'}</td>
                   <td>{Math.round(job.progress * 100)}%</td>
                   <td class="muted">{job.error ?? '—'}</td>
+                  <td>
+                    {/* The same routes the live log posts to, so stop and
+                        replay work without JavaScript too. */}
+                    <div class="row">
+                      {job.status === 'running' || job.status === 'queued' ? (
+                        <form method="post" action={`${base}/jobs/${job.id}/cancel`}>
+                          <button type="submit">Stop</button>
+                        </form>
+                      ) : (
+                        <>
+                          <form method="post" action={`${base}/jobs/${job.id}/retry`}>
+                            <button type="submit">Replay</button>
+                          </form>
+                          <form method="post" action={`${base}/jobs/${job.id}/delete`}>
+                            <button type="submit">Remove</button>
+                          </form>
+                        </>
+                      )}
+                    </div>
+                  </td>
                 </tr>
               ))}
             </tbody>

packages/core/src/analyze.ts

@@ -125,6 +125,13 @@ export interface AnalyzeOptions {
   scoreOnly?: boolean;
   signal?: AbortSignal;
   onStage?: (stage: string, detail?: string) => void;
+  /**
+   * Called once the job row exists, before any work starts. The caller needs
+   * the id at that moment to be able to cancel the run it just kicked off;
+   * waiting for the returned result means waiting for the thing it wants to
+   * interrupt.
+   */
+  onStart?: (job: Job) => void;
 }
 
 export interface AnalyzeResult {
@@ -177,6 +184,7 @@ export const analyzeProject = async (
   }
 
   const job = await createJob(root, 'detection', { preset, videoIds: videos.map((v) => v.id) });
+  options.onStart?.(job);
   const stage = async (name: string, progress: number, detail?: string): Promise<void> => {
     options.onStage?.(name, detail);
     await updateJob(root, job.id, { status: 'running', stage: name, progress });