jobs: download-job UI — panel decision screen + live progress + /jobs renderer

Front half of the download-job feature.

Panel (VideoDownloadPanel): after Fetch expands a playlist and the count is known,
a decision screen — "Found N items" → pick Audio/Video + subfolder → "Download all
as a job" (POST /jobs/download), or "fetch inline to pick individually" (the
existing card grid). A single video still goes straight to the inline card. The
job phase shows live two-phase progress (polled from the job) + a "View in Jobs"
link; it notes the job runs server-side so closing the panel is fine, and it
refreshes the browser as each file lands.

/jobs (DownloadJobDetail + JobsPage dispatch): a `download` job renders a compact
two-phase readout — Metadata and Download bars (processed/total, found/skipped and
saved/failed) + the current item — polled from the job's progress, with a Stop.

Executor tweak: phase-1 meta.done now counts kept (not processed) so both phases
read the same `(done+failed)/total`.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx

@@ -0,0 +1,233 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router';
+import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square, Film, Music } from 'lucide-react';
+import { useClient } from 'hooks/useClient';
+import { toast } from 'sonner';
+
+// Detail view for a `download` job — a compact two-phase progress readout (metadata → download), polled
+// from the job's persisted progress (the executor emits counter snapshots, not per-item events).
+
+type Counts = { done: number; failed: number; total: number };
+type DownloadProgress = {
+  phase: 'expanding' | 'metadata' | 'download' | 'done';
+  meta: Counts;
+  dl: Counts;
+  current?: string;
+};
+type DownloadJob = {
+  id: string;
+  mode: string;
+  taskName: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'stopped' | 'interrupted';
+  error: string | null;
+  cwd: string | null;
+  inputs?: Record<string, unknown> | null;
+  progress: DownloadProgress | null;
+  createdAt: string;
+};
+
+const POLL_MS = 1500;
+const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === 'stopped' || s === 'interrupted';
+
+const statusBadge = (status: string) => {
+  switch (status) {
+    case 'running':
+      return {
+        icon: <Loader2 className="h-4 w-4 animate-spin" />,
+        label: 'Running',
+        cls: 'text-amber-600 dark:text-amber-500',
+      };
+    case 'pending':
+      return { icon: <Clock className="h-4 w-4" />, label: 'Queued', cls: 'text-blue-600 dark:text-blue-400' };
+    case 'completed':
+      return { icon: <CheckCircle2 className="h-4 w-4" />, label: 'Completed', cls: 'text-duck-teal' };
+    case 'failed':
+      return { icon: <XCircle className="h-4 w-4" />, label: 'Failed', cls: 'text-red-600 dark:text-red-400' };
+    case 'stopped':
+      return { icon: <Ban className="h-4 w-4" />, label: 'Stopped', cls: 'text-duck-dark/50 dark:text-foreground/50' };
+    default:
+      return {
+        icon: <XCircle className="h-4 w-4" />,
+        label: 'Interrupted',
+        cls: 'text-orange-600 dark:text-orange-400',
+      };
+  }
+};
+
+// A labelled progress bar: fill = processed/total; the caption states saved vs skipped/failed.
+const PhaseBar = ({
+  label,
+  c,
+  active,
+  savedLabel,
+  failedLabel,
+}: {
+  label: string;
+  c: Counts;
+  active: boolean;
+  savedLabel: string;
+  failedLabel: string;
+}) => {
+  const processed = c.done + c.failed;
+  const pct = c.total ? (processed / c.total) * 100 : 0;
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between text-xs">
+        <span
+          className={`font-medium ${active ? 'text-duck-dark dark:text-foreground' : 'text-duck-dark/50 dark:text-foreground/50'}`}
+        >
+          {label}
+        </span>
+        <span className="tabular-nums text-duck-dark/50 dark:text-foreground/50">
+          {processed}/{c.total || '—'}
+        </span>
+      </div>
+      <div className="h-2 overflow-hidden rounded-full bg-duck-dark/10 dark:bg-foreground/10">
+        <div className="h-full rounded-full bg-duck-teal transition-all duration-300" style={{ width: `${pct}%` }} />
+      </div>
+      <div className="flex gap-3 text-[11px] text-duck-dark/50 dark:text-foreground/50">
+        <span className="text-duck-teal">
+          {c.done} {savedLabel}
+        </span>
+        {c.failed > 0 && (
+          <span className="text-red-500/80">
+            {c.failed} {failedLabel}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const DownloadJobDetail = () => {
+  const { id } = useParams<{ id: string }>();
+  const client = useClient();
+  const [job, setJob] = useState<DownloadJob | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const j = await client.get<DownloadJob>(`/jobs/${id}`);
+        if (!cancelled) setJob(j);
+        return j;
+      } catch {
+        return null;
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void load();
+    const timer = setInterval(async () => {
+      const j = await load();
+      if (j && isTerminal(j.status)) clearInterval(timer);
+    }, POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [id]);
+
+  const stop = async () => {
+    if (!id) return;
+    try {
+      await client.post(`/jobs/${id}/stop`, {});
+      toast.success('Stop requested');
+    } catch {
+      toast.error('Failed to stop');
+    }
+  };
+
+  if (loading)
+    return (
+      <div className="flex-1 flex items-center justify-center text-duck-dark/50 dark:text-foreground/50">
+        <Loader2 className="h-5 w-5 animate-spin" />
+      </div>
+    );
+  if (!job)
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-3 text-duck-dark/60 dark:text-foreground/60">
+        <span>Job not found.</span>
+        <Link to="/jobs" className="text-duck-teal hover:underline">
+          Back to jobs
+        </Link>
+      </div>
+    );
+
+  const badge = statusBadge(job.status);
+  const running = !isTerminal(job.status);
+  const p = job.progress;
+  const isAudio = job.inputs?.format !== 'video';
+  const phaseLabel =
+    !p || p.phase === 'expanding'
+      ? 'Preparing…'
+      : p.phase === 'metadata'
+        ? 'Fetching metadata'
+        : p.phase === 'download'
+          ? 'Downloading'
+          : 'Done';
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      <div className="px-5 py-3 border-b border-duck-dark/10 flex items-center gap-3">
+        <Link
+          to="/jobs"
+          className="text-duck-dark/50 dark:text-foreground/50 hover:text-duck-dark dark:hover:text-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Link>
+        <div className="flex items-center gap-1.5 min-w-0">
+          {isAudio ? (
+            <Music className="h-4 w-4 shrink-0 text-duck-teal" />
+          ) : (
+            <Film className="h-4 w-4 shrink-0 text-duck-teal" />
+          )}
+          <div className="flex flex-col min-w-0">
+            <span className="text-sm font-medium text-duck-dark dark:text-foreground truncate">{job.taskName}</span>
+            {job.cwd && <span className="text-xs text-duck-dark/40 dark:text-foreground/40 truncate">→ {job.cwd}</span>}
+          </div>
+        </div>
+        <span className={`ml-auto flex items-center gap-1.5 text-sm ${badge.cls}`}>
+          {badge.icon} {badge.label}
+        </span>
+        {running && (
+          <button
+            onClick={stop}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 cursor-pointer transition-colors"
+          >
+            <Square className="h-3 w-3" /> Stop
+          </button>
+        )}
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto p-5">
+        <div className="mx-auto flex max-w-md flex-col gap-5">
+          <div className="text-sm text-duck-dark/60 dark:text-foreground/60">{phaseLabel}</div>
+          <PhaseBar
+            label="Metadata"
+            c={p?.meta ?? { done: 0, failed: 0, total: 0 }}
+            active={p?.phase === 'metadata'}
+            savedLabel="found"
+            failedLabel="skipped"
+          />
+          <PhaseBar
+            label="Download"
+            c={p?.dl ?? { done: 0, failed: 0, total: 0 }}
+            active={p?.phase === 'download'}
+            savedLabel="saved"
+            failedLabel="failed"
+          />
+          {running && p?.phase === 'download' && p.current && (
+            <div className="truncate text-xs text-duck-dark/50 dark:text-foreground/50" title={p.current}>
+              <Loader2 className="mr-1.5 inline h-3 w-3 animate-spin" />
+              {p.current}
+            </div>
+          )}
+          {job.error && !running && <div className="text-xs text-red-600 dark:text-red-400">{job.error}</div>}
+        </div>
+      </div>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx

@@ -1,11 +1,23 @@
 import { useState, useEffect, useCallback, type ReactNode, type MouseEvent } from 'react';
 import { useParams, useNavigate } from 'react-router';
-import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox, Square, Trash2 } from 'lucide-react';
+import {
+  Search,
+  CheckCircle2,
+  AlertCircle,
+  Clock,
+  Loader2,
+  StopCircle,
+  AlertTriangle,
+  Inbox,
+  Square,
+  Trash2,
+} from 'lucide-react';
 import { WorkspaceLayout } from 'officerdev';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { useClient } from 'hooks/useClient';
 import { Card } from '@/components/Card';
 import { ScriptJobDetail } from './ScriptJobDetail';
+import { DownloadJobDetail } from './DownloadJobDetail';
 import { PipelineJobDetail } from './JobDetail';
 
 type JobSummary = {
@@ -28,12 +40,18 @@ const formatDate = (iso: string) =>
 
 const StatusIcon = ({ status }: { status: JobSummary['status'] }) => {
   switch (status) {
-    case 'completed': return <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />;
-    case 'failed': return <AlertCircle className="h-4 w-4 text-red-500 shrink-0" />;
-    case 'running': return <Loader2 className="h-4 w-4 text-blue-500 shrink-0 animate-spin" />;
-    case 'stopped': return <StopCircle className="h-4 w-4 text-amber-500 shrink-0" />;
-    case 'interrupted': return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />;
-    case 'pending': return <Clock className="h-4 w-4 text-duck-dark/40 shrink-0" />;
+    case 'completed':
+      return <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />;
+    case 'failed':
+      return <AlertCircle className="h-4 w-4 text-red-500 shrink-0" />;
+    case 'running':
+      return <Loader2 className="h-4 w-4 text-blue-500 shrink-0 animate-spin" />;
+    case 'stopped':
+      return <StopCircle className="h-4 w-4 text-amber-500 shrink-0" />;
+    case 'interrupted':
+      return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />;
+    case 'pending':
+      return <Clock className="h-4 w-4 text-duck-dark/40 shrink-0" />;
   }
 };
 
@@ -43,7 +61,14 @@ const useJobsData = () => {
   const [jobs, setJobs] = useState<JobSummary[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const load = useCallback(
-    () => client.get<JobSummary[]>('/jobs').then((d) => { setJobs(d); setIsLoading(false); }).catch(() => setIsLoading(false)),
+    () =>
+      client
+        .get<JobSummary[]>('/jobs')
+        .then((d) => {
+          setJobs(d);
+          setIsLoading(false);
+        })
+        .catch(() => setIsLoading(false)),
     [client],
   );
   useEffect(() => {
@@ -60,7 +85,12 @@ const useJobsData = () => {
     },
     [client, load],
   );
-  const clearHistory = useCallback(() => { client.delete('/jobs/history').then(() => load()).catch(() => {}); }, [client, load]);
+  const clearHistory = useCallback(() => {
+    client
+      .delete('/jobs/history')
+      .then(() => load())
+      .catch(() => {});
+  }, [client, load]);
   return { jobs, isLoading, act, clearHistory };
 };
 
@@ -71,12 +101,21 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
   const isRunning = job.status === 'running';
   const target = basename(job.target);
   return (
-    <div className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}>
-      <button onClick={() => navigate(`/jobs/${job.id}`)} className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer">
+    <div
+      className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}
+    >
+      <button
+        onClick={() => navigate(`/jobs/${job.id}`)}
+        className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer"
+      >
         <StatusIcon status={job.status} />
         <div className="flex-1 min-w-0">
           <span className="text-sm font-medium text-duck-dark truncate block">{job.taskName}</span>
-          {target && <span className="text-xs text-duck-dark/60 truncate block" title={job.target ?? undefined}>{target}</span>}
+          {target && (
+            <span className="text-xs text-duck-dark/60 truncate block" title={job.target ?? undefined}>
+              {target}
+            </span>
+          )}
           <div className="flex items-center gap-2 mt-0.5">
             <span className="text-xs text-duck-dark/40">{formatDate(job.createdAt)}</span>
             {job.error && <span className="text-xs text-red-500 truncate max-w-[160px]">{job.error}</span>}
@@ -153,7 +192,11 @@ const HistoryJobsPanel = () => {
             />
           </div>
           {history.length > 0 && (
-            <button onClick={clearHistory} title="Delete all finished jobs" className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer">
+            <button
+              onClick={clearHistory}
+              title="Delete all finished jobs"
+              className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer"
+            >
               Clear all
             </button>
           )}
@@ -162,7 +205,9 @@ const HistoryJobsPanel = () => {
           {isLoading ? (
             <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
           ) : history.length === 0 ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{search ? 'No matches' : 'No finished jobs'}</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">
+              {search ? 'No matches' : 'No finished jobs'}
+            </div>
           ) : (
             history.map((job) => <JobRow key={job.id} job={job} onAction={act} />)
           )}
@@ -179,9 +224,15 @@ const JobDetailPanel = () => {
   const [mode, setMode] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!id) { setMode(null); return; }
+    if (!id) {
+      setMode(null);
+      return;
+    }
     setMode(null);
-    client.get<{ mode?: string }>(`/jobs/${id}`).then((j) => setMode(j.mode ?? 'pipeline')).catch(() => setMode('notfound'));
+    client
+      .get<{ mode?: string }>(`/jobs/${id}`)
+      .then((j) => setMode(j.mode ?? 'pipeline'))
+      .catch(() => setMode('notfound'));
   }, [id]);
 
   if (!id) {
@@ -197,7 +248,9 @@ const JobDetailPanel = () => {
   if (mode === null) {
     return (
       <div className="h-full p-2">
-        <Card className="h-full flex items-center justify-center text-duck-dark/40"><Loader2 className="h-5 w-5 animate-spin" /></Card>
+        <Card className="h-full flex items-center justify-center text-duck-dark/40">
+          <Loader2 className="h-5 w-5 animate-spin" />
+        </Card>
       </div>
     );
   }
@@ -208,11 +261,22 @@ const JobDetailPanel = () => {
       </div>
     );
   }
-  // Pipeline detail brings its own full chrome; the script terminal gets a card background here.
+  // Pipeline detail brings its own full chrome; the script terminal + download progress get a card here.
   if (mode === 'script') {
     return (
       <div className="h-full p-2">
-        <Card className="h-full flex flex-col overflow-hidden"><ScriptJobDetail key={id} /></Card>
+        <Card className="h-full flex flex-col overflow-hidden">
+          <ScriptJobDetail key={id} />
+        </Card>
+      </div>
+    );
+  }
+  if (mode === 'download') {
+    return (
+      <div className="h-full p-2">
+        <Card className="h-full flex flex-col overflow-hidden">
+          <DownloadJobDetail key={id} />
+        </Card>
       </div>
     );
   }