Keep the UI attached to background jobs across navigation

Jobs already run on the server — leaving the page or closing the tab does
not stop them — but the SPA lost its link to them because the task id
lived in component state. The online detail page now looks up the newest
task for the post: an active one resumes the progress bar and cancel
button, and a finished one shows "your last download for this post
finished — J-xx". The downloads list accepts a post_id filter for that
lookup.

The footer's Active Workers count is also a link to the staff stats
dashboard, which is the global view of running jobs.

frontend/src/components/AppShell.tsx

@@ -175,7 +175,12 @@ export function AppShell() {
         <Outlet />
       </main>
 
-      <StatusFooter status={status} />
+      <StatusFooter
+        status={status}
+        staff={Boolean(
+          user && (user.is_staff || user.is_superuser || user.role === "staff"),
+        )}
+      />
       <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
     </div>
   );

frontend/src/components/StatusFooter.tsx

@@ -1,8 +1,27 @@
 import { Folder, Zap } from "lucide-react";
+import { Link } from "react-router-dom";
 
 import type { SystemStatus } from "@/lib/types";
 
-export function StatusFooter({ status }: { status?: SystemStatus }) {
+export function StatusFooter({
+  status,
+  staff,
+}: {
+  status?: SystemStatus;
+  staff?: boolean;
+}) {
+  const workers = (
+    <>
+      <Zap className="h-3 w-3" />
+      <span>
+        Active Workers:{" "}
+        {status
+          ? `${status.workers.active} running | ${status.workers.queued} pending`
+          : "…"}
+      </span>
+    </>
+  );
+
   return (
     <footer className="fixed inset-x-0 bottom-0 z-30 border-t border-ctp-surface0 bg-ctp-crust">
       <div className="mx-auto flex h-8 w-full max-w-[1600px] items-center gap-4 px-4 font-mono text-[11px] text-ctp-overlay0">
@@ -15,18 +34,22 @@ export function StatusFooter({ status }: { status?: SystemStatus }) {
           <span className="truncate">{status?.watched_folder ?? "…"}</span>
         </span>
 
-        <span
-          className="ml-auto hidden shrink-0 items-center gap-1.5 md:flex"
-          title="Active background jobs"
-        >
-          <Zap className="h-3 w-3" />
-          <span>
-            Active Workers:{" "}
-            {status
-              ? `${status.workers.active} running | ${status.workers.queued} pending`
-              : "…"}
+        {staff ? (
+          <Link
+            to="/stats"
+            className="ml-auto hidden shrink-0 items-center gap-1.5 transition hover:text-ctp-text md:flex"
+            title="Open the stats dashboard"
+          >
+            {workers}
+          </Link>
+        ) : (
+          <span
+            className="ml-auto hidden shrink-0 items-center gap-1.5 md:flex"
+            title="Active background jobs"
+          >
+            {workers}
           </span>
-        </span>
+        )}
       </div>
     </footer>
   );