progress frontend

web/src/api/ws.ts

@@ -811,10 +811,10 @@ export function useTriggers(): { payload: TriggerStatus } {
   return { payload: parsed };
 }
 
-export function useJobStatus(
+export function useJobStatus<TResults = unknown>(
   jobType: string,
   revalidateOnFocus: boolean = true,
-): { payload: Job | null } {
+): { payload: Job<TResults> | null } {
   const {
     value: { payload },
     send: sendCommand,
@@ -846,7 +846,7 @@ export function useJobStatus(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [revalidateOnFocus]);
 
-  return { payload: currentJob as Job | null };
+  return { payload: currentJob as Job<TResults> | null };
 }
 
 export function useWsMessageSubscribe(callback: (msg: WsFeedMessage) => void) {

web/src/components/card/ExportCard.tsx

@@ -1,6 +1,7 @@
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Button } from "../ui/button";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { Progress } from "../ui/progress";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { FiMoreVertical } from "react-icons/fi";
 import { Skeleton } from "../ui/skeleton";
@@ -128,6 +129,14 @@ export function ExportCard({
     exportedRecording.thumb_path.length > 0,
   );
 
+  // Resync the skeleton state whenever the backing export changes. The
+  // list keys by id now, so in practice the component remounts instead
+  // of receiving new props — but this keeps the card honest if a parent
+  // ever reuses the instance across different exports.
+  useEffect(() => {
+    setLoading(exportedRecording.thumb_path.length > 0);
+  }, [exportedRecording.thumb_path]);
+
   // selection
 
   const cardRef = useRef<HTMLDivElement | null>(null);
@@ -392,8 +401,35 @@ export function ActiveExportJobCard({
       camera: cameraName,
     });
   }, [cameraName, job.name, t]);
-  const statusLabel =
+
-    job.status === "queued" ? t("jobCard.queued") : t("jobCard.running");
+  const step = job.current_step
+    ? job.current_step
+    : job.status === "queued"
+      ? "queued"
+      : "preparing";
+  const percent = Math.round(job.progress_percent ?? 0);
+
+  const stepLabel = useMemo(() => {
+    switch (step) {
+      case "queued":
+        return t("jobCard.queued");
+      case "preparing":
+        return t("jobCard.preparing");
+      case "copying":
+        return t("jobCard.copying");
+      case "encoding":
+        return t("jobCard.encoding");
+      case "encoding_retry":
+        return t("jobCard.encodingRetry");
+      case "finalizing":
+        return t("jobCard.finalizing");
+      default:
+        return t("jobCard.running");
+    }
+  }, [step, t]);
+
+  const hasDeterminateProgress =
+    step === "copying" || step === "encoding" || step === "encoding_retry";
 
   return (
     <div
@@ -402,11 +438,20 @@ export function ActiveExportJobCard({
         className,
       )}
     >
-      <div className="absolute right-3 top-3 z-30 rounded-full bg-selected/90 px-2 py-1 text-xs text-selected-foreground">
+      <div className="flex w-full max-w-xs flex-col items-center gap-2 space-y-2 px-6 text-center">
-        {statusLabel}
+        <div className="text-xs text-muted-foreground">
-      </div>
+          {stepLabel}
-      <div className="flex flex-col items-center gap-3 px-6 text-center">
+          {hasDeterminateProgress && ` · ${percent}%`}
-        <ActivityIndicator />
+        </div>
+        {step === "queued" ? (
+          <ActivityIndicator className="size-5" />
+        ) : hasDeterminateProgress ? (
+          <Progress value={percent} className="h-2 w-full" />
+        ) : (
+          <div className="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
+            <div className="absolute inset-y-0 left-0 w-1/2 animate-pulse bg-primary" />
+          </div>
+        )}
         <div className="text-sm font-medium text-primary">{displayName}</div>
       </div>
     </div>

web/src/components/filter/ExportActionGroup.tsx

@@ -30,6 +30,7 @@ type ExportActionGroupProps = {
   cases?: ExportCase[];
   currentCaseId?: string;
   mutate: () => void;
+  deleteExports: (ids: string[]) => Promise<void>;
 };
 export default function ExportActionGroup({
   selectedExports,
@@ -38,6 +39,7 @@ export default function ExportActionGroup({
   cases,
   currentCaseId,
   mutate,
+  deleteExports,
 }: ExportActionGroupProps) {
   const { t } = useTranslation(["views/exports", "common"]);
   const isAdmin = useIsAdmin();
@@ -50,27 +52,24 @@ export default function ExportActionGroup({
 
   const onDelete = useCallback(() => {
     const ids = selectedExports.map((e) => e.id);
-    axios
+    deleteExports(ids)
-      .post("exports/delete", { ids })
+      .then(() => {
-      .then((resp) => {
+        toast.success(t("bulkToast.success.delete"), {
-        if (resp.status === 200) {
+          position: "top-center",
-          toast.success(t("bulkToast.success.delete"), {
+        });
-            position: "top-center",
+        setSelectedExports([]);
-          });
-          setSelectedExports([]);
-          mutate();
-        }
       })
       .catch((error) => {
         const errorMessage =
-          error.response?.data?.message ||
+          error?.response?.data?.message ||
-          error.response?.data?.detail ||
+          error?.response?.data?.detail ||
           "Unknown error";
-        toast.error(t("bulkToast.error.deleteFailed", { errorMessage }), {
+        toast.error(
-          position: "top-center",
+          t("bulkToast.error.deleteFailed", { errorMessage: errorMessage }),
-        });
+          { position: "top-center" },
+        );
       });
-  }, [selectedExports, setSelectedExports, mutate, t]);
+  }, [selectedExports, setSelectedExports, deleteExports, t]);
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [bypassDialog, setBypassDialog] = useState(false);
@@ -92,36 +91,54 @@ export default function ExportActionGroup({
 
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const [deleteExportsOnRemove, setDeleteExportsOnRemove] = useState(false);
+  const [isRemovingFromCase, setIsRemovingFromCase] = useState(false);
 
   const handleRemoveFromCase = useCallback(() => {
     const ids = selectedExports.map((e) => e.id);
+    const deleting = deleteExportsOnRemove;
+    setIsRemovingFromCase(true);
 
-    const request = deleteExportsOnRemove
+    const request = deleting
-      ? axios.post("exports/delete", { ids })
+      ? deleteExports(ids)
-      : axios.post("exports/reassign", { ids, export_case_id: null });
+      : axios
+          .post("exports/reassign", { ids, export_case_id: null })
+          .then(() => {
+            mutate();
+          });
 
     request
-      .then((resp) => {
+      .then(() => {
-        if (resp.status === 200) {
+        const successKey = deleting
-          toast.success(t("bulkToast.success.remove"), {
+          ? "bulkToast.success.delete"
-            position: "top-center",
+          : "bulkToast.success.remove";
-          });
+        toast.success(t(successKey), { position: "top-center" });
-          setSelectedExports([]);
+        setSelectedExports([]);
-          mutate();
+        setRemoveDialogOpen(false);
-          setRemoveDialogOpen(false);
+        setDeleteExportsOnRemove(false);
-          setDeleteExportsOnRemove(false);
-        }
       })
       .catch((error) => {
         const errorMessage =
-          error.response?.data?.message ||
+          error?.response?.data?.message ||
-          error.response?.data?.detail ||
+          error?.response?.data?.detail ||
           "Unknown error";
-        toast.error(t("bulkToast.error.reassignFailed", { errorMessage }), {
+        const errorKey = deleting
+          ? "bulkToast.error.deleteFailed"
+          : "bulkToast.error.reassignFailed";
+        toast.error(t(errorKey, { errorMessage: errorMessage }), {
           position: "top-center",
         });
+      })
+      .finally(() => {
+        setIsRemovingFromCase(false);
       });
-  }, [selectedExports, deleteExportsOnRemove, setSelectedExports, mutate, t]);
+  }, [
+    selectedExports,
+    deleteExportsOnRemove,
+    setSelectedExports,
+    mutate,
+    deleteExports,
+    t,
+  ]);
 
   // ── Case picker ─────────────────────────────────────────────────
 
@@ -243,6 +260,7 @@ export default function ExportActionGroup({
         <AlertDialog
           open={removeDialogOpen}
           onOpenChange={(open) => {
+            if (isRemovingFromCase) return;
             if (!open) {
               setRemoveDialogOpen(false);
               setDeleteExportsOnRemove(false);
@@ -274,15 +292,17 @@ export default function ExportActionGroup({
                 id="bulk-delete-exports-switch"
                 checked={deleteExportsOnRemove}
                 onCheckedChange={setDeleteExportsOnRemove}
+                disabled={isRemovingFromCase}
               />
             </div>
             <AlertDialogFooter>
-              <AlertDialogCancel>
+              <AlertDialogCancel disabled={isRemovingFromCase}>
                 {t("button.cancel", { ns: "common" })}
               </AlertDialogCancel>
               <AlertDialogAction
                 className={buttonVariants({ variant: "destructive" })}
                 onClick={handleRemoveFromCase}
+                disabled={isRemovingFromCase}
               >
                 {t("button.delete", { ns: "common" })}
               </AlertDialogAction>

web/src/pages/Exports.tsx

@@ -1,4 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
+import { useJobStatus } from "@/api/ws";
 import {
   ActiveExportJobCard,
   CaseCard,
@@ -87,23 +88,45 @@ function Exports() {
   // Data
 
   const { data: cases, mutate: updateCases } = useSWR<ExportCase[]>("cases");
-  const { data: activeExportJobs } = useSWR<ExportJob[]>("jobs/export", {
+
-    refreshInterval: (latestJobs) => ((latestJobs ?? []).length > 0 ? 2000 : 0),
+  // The HTTP fetch hydrates the page on first paint and on focus. Once the
-  });
+  // WebSocket is connected, the `job_state` topic delivers progress updates
-  // Keep polling exports while there are queued/running jobs OR while any
+  // in real time, so periodic polling here would only add noise.
-  // existing export is still marked in_progress. Without the second clause,
+  const { data: pollExportJobs, mutate: updateActiveJobs } = useSWR<
-  // a stale in_progress=true snapshot can stick if the activeExportJobs poll
+    ExportJob[]
-  // clears before the rawExports poll fires — SWR cancels the pending
+  >("jobs/export", { refreshInterval: 0 });
-  // rawExports refresh and the UI freezes on spinners until a manual reload.
+
+  const { payload: exportJobState } = useJobStatus<{ jobs: ExportJob[] }>(
+    "export",
+  );
+  const wsExportJobs = useMemo<ExportJob[]>(
+    () => exportJobState?.results?.jobs ?? [],
+    [exportJobState],
+  );
+
+  // Merge: a job present in the WS payload is authoritative (it has the
+  // freshest progress); the SWR snapshot fills in jobs that haven't yet
+  // arrived over the socket (e.g. before the first WS message after a
+  // page load). Once we've seen at least one WS message, we trust the WS
+  // payload as the complete active set.
+  const hasWsState = exportJobState !== null;
+  const activeExportJobs = useMemo<ExportJob[]>(() => {
+    if (hasWsState) {
+      return wsExportJobs;
+    }
+    return pollExportJobs ?? [];
+  }, [hasWsState, wsExportJobs, pollExportJobs]);
+
+  // Keep polling exports while any existing export is still marked
+  // in_progress so the UI flips from spinner to playable card without a
+  // manual reload. Once active jobs disappear from the WS feed we also
+  // mutate() below to fetch newly-completed exports immediately.
   const { data: rawExports, mutate: updateExports } = useSWR<Export[]>(
     exportSearchParams && Object.keys(exportSearchParams).length > 0
       ? ["exports", exportSearchParams]
       : "exports",
     {
       refreshInterval: (latestExports) => {
-        if ((activeExportJobs?.length ?? 0) > 0) {
-          return 2000;
-        }
         if ((latestExports ?? []).some((exp) => exp.in_progress)) {
           return 2000;
         }
@@ -112,22 +135,40 @@ function Exports() {
     },
   );
 
+  // When one or more active jobs disappear from the WS feed, refresh the
+  // exports list so newly-finished items appear without waiting for focus-
+  // based SWR revalidation. Clear the HTTP jobs snapshot once the live set is
+  // empty so a stale poll result does not resurrect completed jobs.
+  const previousActiveJobIdsRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    const previousIds = previousActiveJobIdsRef.current;
+    const currentIds = new Set(activeExportJobs.map((job) => job.id));
+    const removedJob = Array.from(previousIds).some(
+      (id) => !currentIds.has(id),
+    );
+
+    if (removedJob) {
+      updateExports();
+      updateCases();
+    }
+
+    if (previousIds.size > 0 && currentIds.size === 0) {
+      updateActiveJobs([], false);
+    }
+    previousActiveJobIdsRef.current = currentIds;
+  }, [activeExportJobs, updateExports, updateCases, updateActiveJobs]);
+
   const visibleActiveJobs = useMemo<ExportJob[]>(() => {
-    const existingExportIds = new Set((rawExports ?? []).map((exp) => exp.id));
     const filteredCameras = exportFilter?.cameras;
 
     return (activeExportJobs ?? []).filter((job) => {
-      if (existingExportIds.has(job.id)) {
-        return false;
-      }
-
       if (filteredCameras && filteredCameras.length > 0) {
         return filteredCameras.includes(job.camera);
       }
 
       return true;
     });
-  }, [activeExportJobs, exportFilter?.cameras, rawExports]);
+  }, [activeExportJobs, exportFilter?.cameras]);
 
   const activeJobsByCase = useMemo<{ [caseId: string]: ExportJob[] }>(() => {
     const grouped: { [caseId: string]: ExportJob[] } = {};
@@ -144,9 +185,26 @@ function Exports() {
     return grouped;
   }, [visibleActiveJobs]);
 
+  // The backend inserts the Export row with in_progress=True before the
+  // FFmpeg encode kicks off, so the same id is briefly present in BOTH
+  // rawExports and the active job list. The ActiveExportJobCard renders
+  // step + percent; the ExportCard would render a binary spinner. To
+  // avoid that downgrade, hide the rawExport entry while there's a
+  // matching active job — once the job leaves the active list the
+  // exports SWR refresh kicks in and the regular card takes over.
+  const activeJobIds = useMemo<Set<string>>(
+    () => new Set(visibleActiveJobs.map((job) => job.id)),
+    [visibleActiveJobs],
+  );
+
+  const visibleExports = useMemo<Export[]>(
+    () => (rawExports ?? []).filter((exp) => !activeJobIds.has(exp.id)),
+    [activeJobIds, rawExports],
+  );
+
   const exportsByCase = useMemo<{ [caseId: string]: Export[] }>(() => {
     const grouped: { [caseId: string]: Export[] } = {};
-    (rawExports ?? []).forEach((exp) => {
+    visibleExports.forEach((exp) => {
       const caseId = exp.export_case ?? exp.export_case_id ?? "none";
       if (!grouped[caseId]) {
         grouped[caseId] = [];
@@ -155,7 +213,7 @@ function Exports() {
       grouped[caseId].push(exp);
     });
     return grouped;
-  }, [rawExports]);
+  }, [visibleExports]);
 
   const filteredCases = useMemo<ExportCase[]>(() => {
     if (!cases) return [];
@@ -184,6 +242,34 @@ function Exports() {
     updateCases();
   }, [updateExports, updateCases]);
 
+  // Deletes one or more exports and keeps the UI in sync. SWR's default
+  // mutate() keeps the stale list visible until the revalidation GET
+  // returns, which can be seconds for large batches — long enough for
+  // users to click on a card whose underlying file is already gone.
+  // Strip the deleted ids from the cache up front, then fire the POST,
+  // then revalidate to reconcile with server truth.
+  const deleteExports = useCallback(
+    async (ids: string[]): Promise<void> => {
+      const idSet = new Set(ids);
+      const removeDeleted = (current: Export[] | undefined) =>
+        current ? current.filter((exp) => !idSet.has(exp.id)) : current;
+
+      await updateExports(removeDeleted, { revalidate: false });
+
+      try {
+        await axios.post("exports/delete", { ids });
+        await updateExports();
+        await updateCases();
+      } catch (err) {
+        // On failure, pull fresh state from the server so any items that
+        // weren't actually deleted reappear in the UI.
+        await updateExports();
+        throw err;
+      }
+    },
+    [updateExports, updateCases],
+  );
+
   // Search
 
   const [search, setSearch] = useState("");
@@ -208,7 +294,9 @@ function Exports() {
       return false;
     }
 
-    setSelected(rawExports.find((exp) => exp.id == id));
+    // Use visibleExports so deep links to a still-encoding id don't try
+    // to open a player against a half-written video file.
+    setSelected(visibleExports.find((exp) => exp.id == id));
     return true;
   });
 
@@ -260,7 +348,7 @@ function Exports() {
     const currentExports = selectedCaseId
       ? exportsByCase[selectedCaseId] || []
       : exports;
-    const visibleExports = currentExports.filter((e) => {
+    const selectable = currentExports.filter((e) => {
       if (e.in_progress) return false;
       if (!search) return true;
       return e.name
@@ -268,8 +356,8 @@ function Exports() {
         .replaceAll("_", " ")
         .includes(search.toLowerCase());
     });
-    if (selectedExports.length < visibleExports.length) {
+    if (selectedExports.length < selectable.length) {
-      setSelectedExports(visibleExports);
+      setSelectedExports(selectable);
     } else {
       setSelectedExports([]);
     }
@@ -293,15 +381,19 @@ function Exports() {
       return;
     }
 
-    axios
+    deleteExports([deleteClip.file])
-      .post("exports/delete", { ids: [deleteClip.file] })
+      .then(() => setDeleteClip(undefined))
-      .then((response) => {
+      .catch((error) => {
-        if (response.status == 200) {
+        const errorMessage =
-          setDeleteClip(undefined);
+          error?.response?.data?.message ||
-          mutate();
+          error?.response?.data?.detail ||
-        }
+          "Unknown error";
+        toast.error(
+          t("bulkToast.error.deleteFailed", { errorMessage: errorMessage }),
+          { position: "top-center" },
+        );
       });
-  }, [deleteClip, mutate]);
+  }, [deleteClip, deleteExports, t]);
 
   const onHandleRename = useCallback(
     (id: string, update: string) => {
@@ -629,6 +721,7 @@ function Exports() {
             cases={cases}
             currentCaseId={selectedCaseId}
             mutate={mutate}
+            deleteExports={deleteExports}
           />
         ) : (
           <>
@@ -893,7 +986,7 @@ function AllExportsView({
                 ))}
                 {filteredExports.map((item) => (
                   <ExportCard
-                    key={item.name}
+                    key={item.id}
                     className=""
                     exportedRecording={item}
                     isSelected={selectedExports.some((e) => e.id === item.id)}

web/src/types/export.ts

@@ -59,6 +59,14 @@ export type StartExportResponse = {
   status?: string | null;
 };
 
+export type ExportJobStep =
+  | "queued"
+  | "preparing"
+  | "copying"
+  | "encoding"
+  | "encoding_retry"
+  | "finalizing";
+
 export type ExportJob = {
   id: string;
   job_type: string;
@@ -77,6 +85,8 @@ export type ExportJob = {
     video_path?: string;
     thumb_path?: string;
   } | null;
+  current_step?: ExportJobStep;
+  progress_percent?: number;
 };
 
 export type CameraActivitySegment = {