officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace hardcoded download job with download-media script capability

Browse Source 
move video/audio downloads off the dedicated ReClip download lane onto the
generic script-job path:

- delete execute-download.ts, reclip-client.ts and the POST /jobs/download
  endpoint; drop the 'download' mode from the pipeline_jobs enum (legacy rows
  tolerated)
- execute-script.ts: strip the @@officer:progress@@ sentinel from the log,
  emit progress events, and isolate viewer/log writes (safeEmit/safeLog) so a
  broadcast or log throw can't wedge the stdout pump
- pipeline-job-manager.ts: persist latest progress; guard sendToViewer sends
- ScriptJobDetail: render the two progress bars; DownloadJobDetail kept for
  legacy history rows
- TaskRunnerModal: ScriptRunner descends into the triggered directory
- VideoDownloadPanel: rewire startJob to the script-job path

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-07-29 01:10:32 +00:00
co-authored by Claude Opus 4.8
parent b523c7d408
commit b2fb6f148c
10 changed files with 212 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx
+3 -3
View File
@@ -7,8 +7,8 @@ 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 = {
export type Counts = { done: number; failed: number; total: number };
export type DownloadProgress = {
phase: 'expanding' | 'metadata' | 'download' | 'done';
meta: Counts;
dl: Counts;
@@ -55,7 +55,7 @@ const statusBadge = (status: string) => {
};
// A labelled progress bar: fill = processed/total; caption states kept/saved vs skipped/failed.
const PhaseBar = ({
export const PhaseBar = ({
label,
c,
active,
src/apps/officer-web/Screens/Dashboard/Jobs/ScriptJobDetail.tsx
+69 -10
View File
@@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router';
import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square } from 'lucide-react';
import { useClient } from 'hooks/useClient';
import { toast } from 'sonner';
import { PhaseBar, type DownloadProgress } from './DownloadJobDetail';
type ScriptJob = {
id: string;
@@ -12,6 +13,7 @@ type ScriptJob = {
status: 'pending' | 'running' | 'completed' | 'failed' | 'stopped' | 'interrupted';
exitCode: number | null;
error: string | null;
progress: DownloadProgress | null;
createdAt: string;
startedAt: string | null;
completedAt: string | null;
@@ -20,14 +22,37 @@ type ScriptJob = {
const LOG_POLL_MS = 1500;
const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === 'stopped' || s === 'interrupted';
// A script may publish counter-style progress via the `@@officer:progress@@` sentinel (e.g. the
// download-media capability). When shaped like that, render the two phase bars above the log.
const isDownloadProgress = (p: unknown): p is DownloadProgress =>
!!p && typeof p === 'object' && 'meta' in p && 'dl' in p;
const statusBadge = (status: string, exitCode: number | null) => {
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${exitCode != null ? ` (exit ${exitCode})` : ''}`, 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' };
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${exitCode != null ? ` (exit ${exitCode})` : ''}`,
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',
};
}
};
@@ -46,7 +71,9 @@ export const ScriptJobDetail = () => {
const pullLog = useCallback(async () => {
if (!id) return;
try {
const res = await client.get<{ text: string; offset: number; size: number }>(`/jobs/${id}/log?offset=${offsetRef.current}`);
const res = await client.get<{ text: string; offset: number; size: number }>(
`/jobs/${id}/log?offset=${offsetRef.current}`,
);
if (res.text) {
offsetRef.current = res.offset;
setOutput((prev) => prev + res.text);
@@ -70,7 +97,9 @@ export const ScriptJobDetail = () => {
if (!cancelled) setLoading(false);
}
})();
return () => { cancelled = true; };
return () => {
cancelled = true;
};
}, [id]);
// While live, poll the log + status until the job reaches a terminal state.
@@ -125,7 +154,9 @@ export const ScriptJobDetail = () => {
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>
<Link to="/jobs" className="text-duck-teal hover:underline">
Back to jobs
</Link>
</div>
);
}
@@ -136,7 +167,10 @@ export const ScriptJobDetail = () => {
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">
<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 flex-col min-w-0">
@@ -156,6 +190,31 @@ export const ScriptJobDetail = () => {
)}
</div>
{isDownloadProgress(job.progress) && (
<div className="px-5 py-4 border-b border-duck-dark/10 flex flex-col gap-4">
<PhaseBar
label="Titles"
c={job.progress.meta}
active={job.progress.phase === 'metadata'}
savedLabel="found"
failedLabel="skipped"
/>
<PhaseBar
label="Download"
c={job.progress.dl}
active={job.progress.phase === 'download'}
savedLabel="saved"
failedLabel="failed"
/>
{running && job.progress.phase === 'download' && job.progress.current && (
<div className="truncate text-xs text-duck-dark/50 dark:text-foreground/50" title={job.progress.current}>
<Loader2 className="mr-1.5 inline h-3 w-3 animate-spin" />
{job.progress.current}
</div>
)}
</div>
)}
<pre
ref={preRef}
onScroll={onScroll}