download job: restore the metadata phase — ReClip needs the title for filenames

Verified against live ReClip: POST /api/download with title:"" → a hash filename
(b5d04adc86.mp3); with title:"Me at the zoo" → "Me at the zoo.mp3". So ReClip
names the file from the title WE send (falling back to a hash) — it does not
self-name. The title is mandatory, which means a metadata pass is required.

Back to two phases:
1. metadata — fetch each item's /api/info (title + validity), keep survivors, skip
   errors.
2. download — download each survivor passing its title, so files land with real
   names; skip download errors.

Keeps the exact-urls[] input (Mix playlists can't drift) and the one-request-per-
item download. Progress is two counters again (Titles + Download); UI shows two
bars. ~2 requests/item is inherent to needing the title (per the user's call:
correctness over speed).

Verified two-phase filtering + title passthrough + skip-on-error with a mock.

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

src/workspaces/officerdev/src/apps/FileBrowser/VideoDownloadPanel.tsx

@@ -17,12 +17,12 @@ import {
 } from 'lucide-react';
 import { useFilesAPI, type VideoInfo } from '../../hooks/useFilesAPI';
 
-// Compact progress shape mirrored from the download-job executor (done = saved, failed = skipped).
+// Compact progress shape mirrored from the download-job executor (done = kept/saved, failed = skipped).
+type JobCounts = { done: number; failed: number; total: number };
 type JobProgress = {
-  phase: 'expanding' | 'download' | 'done';
-  done: number;
-  failed: number;
-  total: number;
+  phase: 'expanding' | 'metadata' | 'download' | 'done';
+  meta: JobCounts;
+  dl: JobCounts;
   current?: string;
 };
 
@@ -275,8 +275,8 @@ export const VideoDownloadPanel = () => {
       if (cancelled || !j) return;
       setJobStatus(j.status);
       setJobProg(j.progress);
-      if (j.progress && j.progress.done > lastDlDone.current) {
-        lastDlDone.current = j.progress.done;
+      if (j.progress && j.progress.dl.done > lastDlDone.current) {
+        lastDlDone.current = j.progress.dl.done;
         setRefreshSignal((n) => n + 1);
       }
       if (['completed', 'failed', 'stopped', 'interrupted'].includes(j.status)) clearInterval(timer);
@@ -570,11 +570,39 @@ const JobView = ({
 }) => {
   const terminal = ['completed', 'failed', 'stopped', 'interrupted'].includes(status);
   const phaseLabel =
-    !prog || prog.phase === 'expanding' ? 'Expanding playlist…' : prog.phase === 'download' ? 'Downloading' : 'Done';
-  const done = prog?.done ?? 0;
-  const failed = prog?.failed ?? 0;
-  const total = prog?.total ?? 0;
-  const pct = total ? ((done + failed) / total) * 100 : 0;
+    !prog || prog.phase === 'expanding'
+      ? 'Preparing…'
+      : prog.phase === 'metadata'
+        ? 'Fetching titles'
+        : prog.phase === 'download'
+          ? 'Downloading'
+          : 'Done';
+  const Bar = ({ label, c, saved, failed }: { label: string; c: JobCounts; saved: string; failed: string }) => {
+    const pct = c.total ? ((c.done + c.failed) / c.total) * 100 : 0;
+    return (
+      <div className="flex flex-col gap-1">
+        <div className="flex justify-between text-xs">
+          <span className="font-medium text-duck-dark">{label}</span>
+          <span className="tabular-nums text-duck-dark/50">
+            {c.done + c.failed}/{c.total || '—'}
+          </span>
+        </div>
+        <div className="h-2 overflow-hidden rounded-full bg-duck-dark/10">
+          <div className="h-full rounded-full bg-duck-teal transition-all duration-300" style={{ width: `${pct}%` }} />
+        </div>
+        <div className="flex gap-3 text-[10px] text-duck-dark/50">
+          <span className="text-duck-teal">
+            {c.done} {saved}
+          </span>
+          {c.failed > 0 && (
+            <span className="text-red-500/80">
+              {c.failed} {failed}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  };
   return (
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-2 text-sm">
@@ -592,21 +620,8 @@ const JobView = ({
         </span>
         <span className="ml-auto text-xs text-duck-dark/40">{audio ? 'Audio' : 'Video'}</span>
       </div>
-      <div className="flex flex-col gap-1">
-        <div className="flex justify-between text-xs">
-          <span className="font-medium text-duck-dark">Downloaded</span>
-          <span className="tabular-nums text-duck-dark/50">
-            {done + failed}/{total || '—'}
-          </span>
-        </div>
-        <div className="h-2.5 overflow-hidden rounded-full bg-duck-dark/10">
-          <div className="h-full rounded-full bg-duck-teal transition-all duration-300" style={{ width: `${pct}%` }} />
-        </div>
-        <div className="flex gap-3 text-[10px] text-duck-dark/50">
-          <span className="text-duck-teal">{done} saved</span>
-          {failed > 0 && <span className="text-red-500/80">{failed} skipped</span>}
-        </div>
-      </div>
+      <Bar label="Titles" c={prog?.meta ?? { done: 0, failed: 0, total: 0 }} saved="found" failed="skipped" />
+      <Bar label="Download" c={prog?.dl ?? { done: 0, failed: 0, total: 0 }} saved="saved" failed="failed" />
       {!terminal && prog?.phase === 'download' && prog.current && (
         <p className="truncate text-xs text-duck-dark/50" title={prog.current}>
           {prog.current}