add pipeline Kanban board: route, layout, review/queue/processing/done columns, schedule controls

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/pipeline/DoneColumn.tsx

@@ -0,0 +1,28 @@
+import { Badge } from '~/shared/components/ui/badge';
+
+interface DoneColumnProps {
+	items: any[];
+}
+
+export function DoneColumn({ items }: DoneColumnProps) {
+	return (
+		<div className="flex flex-col w-64 min-w-64 bg-gray-50 rounded-lg">
+			<div className="px-3 py-2 border-b font-medium text-sm">
+				Done <span className="text-gray-400">({items.length})</span>
+			</div>
+			<div className="flex-1 overflow-y-auto p-2 space-y-1">
+				{items.map((item: any) => (
+					<div key={item.id} className="rounded border bg-white p-2">
+						<p className="text-xs font-medium truncate">{item.name}</p>
+						<Badge variant={item.status === 'done' ? 'done' : 'error'}>
+							{item.status}
+						</Badge>
+					</div>
+				))}
+				{items.length === 0 && (
+					<p className="text-sm text-gray-400 text-center py-8">No completed items</p>
+				)}
+			</div>
+		</div>
+	);
+}

src/features/pipeline/PipelineCard.tsx

@@ -0,0 +1,59 @@
+import { Badge } from '~/shared/components/ui/badge';
+import { LANG_NAMES, langName } from '~/shared/lib/lang';
+
+interface PipelineCardProps {
+	item: any;
+	onLanguageChange?: (lang: string) => void;
+	showApproveUpTo?: boolean;
+	onApproveUpTo?: () => void;
+}
+
+export function PipelineCard({ item, onLanguageChange, showApproveUpTo, onApproveUpTo }: PipelineCardProps) {
+	const title = item.type === 'Episode'
+		? `S${String(item.season_number).padStart(2, '0')}E${String(item.episode_number).padStart(2, '0')} — ${item.name}`
+		: item.name;
+
+	const confidenceColor = item.confidence === 'high' ? 'bg-green-50 border-green-200' : 'bg-amber-50 border-amber-200';
+
+	return (
+		<div className={`rounded-lg border p-3 ${confidenceColor}`}>
+			<div className="flex items-start justify-between gap-2">
+				<div className="min-w-0">
+					<p className="text-sm font-medium truncate">{title}</p>
+					<div className="flex items-center gap-1.5 mt-1 flex-wrap">
+						{onLanguageChange ? (
+							<select
+								className="h-6 text-xs border border-gray-300 rounded px-1 bg-white"
+								value={item.original_language ?? ''}
+								onChange={(e) => onLanguageChange(e.target.value)}
+							>
+								<option value="">unknown</option>
+								{Object.entries(LANG_NAMES).map(([code, name]) => (
+									<option key={code} value={code}>{name}</option>
+								))}
+							</select>
+						) : (
+							<Badge variant="default">{langName(item.original_language)}</Badge>
+						)}
+
+						{item.apple_compat === 'audio_transcode' && (
+							<Badge variant="manual">transcode</Badge>
+						)}
+						{item.job_type === 'copy' && item.apple_compat !== 'audio_transcode' && (
+							<Badge variant="noop">copy</Badge>
+						)}
+					</div>
+				</div>
+			</div>
+
+			{showApproveUpTo && onApproveUpTo && (
+				<button
+					onClick={onApproveUpTo}
+					className="mt-2 w-full text-xs py-1 rounded bg-blue-600 text-white hover:bg-blue-700 cursor-pointer"
+				>
+					Approve up to here
+				</button>
+			)}
+		</div>
+	);
+}

src/features/pipeline/PipelinePage.tsx

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '~/shared/lib/api';
+import { ReviewColumn } from './ReviewColumn';
+import { QueueColumn } from './QueueColumn';
+import { ProcessingColumn } from './ProcessingColumn';
+import { DoneColumn } from './DoneColumn';
+import { ScheduleControls } from './ScheduleControls';
+
+interface PipelineData {
+	review: any[];
+	queued: any[];
+	processing: any[];
+	done: any[];
+	noopCount: number;
+}
+
+interface SchedulerState {
+	job_sleep_seconds: number;
+	schedule_enabled: boolean;
+	schedule_start: string;
+	schedule_end: string;
+}
+
+interface Progress {
+	id: number;
+	seconds: number;
+	total: number;
+}
+
+interface QueueStatus {
+	status: string;
+	until?: string;
+	seconds?: number;
+}
+
+export function PipelinePage() {
+	const [data, setData] = useState<PipelineData | null>(null);
+	const [scheduler, setScheduler] = useState<SchedulerState | null>(null);
+	const [progress, setProgress] = useState<Progress | null>(null);
+	const [queueStatus, setQueueStatus] = useState<QueueStatus | null>(null);
+	const [loading, setLoading] = useState(true);
+
+	const load = useCallback(async () => {
+		const [pipelineRes, schedulerRes] = await Promise.all([
+			api.get<PipelineData>('/api/review/pipeline'),
+			api.get<SchedulerState>('/api/execute/scheduler'),
+		]);
+		setData(pipelineRes);
+		setScheduler(schedulerRes);
+		setLoading(false);
+	}, []);
+
+	useEffect(() => { load(); }, [load]);
+
+	// SSE for live updates
+	useEffect(() => {
+		const es = new EventSource('/api/execute/events');
+		es.addEventListener('job_update', () => load());
+		es.addEventListener('job_progress', (e) => {
+			setProgress(JSON.parse((e as MessageEvent).data));
+		});
+		es.addEventListener('queue_status', (e) => {
+			setQueueStatus(JSON.parse((e as MessageEvent).data));
+		});
+		return () => es.close();
+	}, [load]);
+
+	if (loading || !data) return <div className="p-6 text-gray-500">Loading pipeline...</div>;
+
+	return (
+		<div className="flex flex-col h-[calc(100vh-4rem)]">
+			<div className="flex items-center justify-between px-6 py-3 border-b">
+				<h1 className="text-lg font-semibold">Pipeline</h1>
+				<div className="flex items-center gap-4">
+					<span className="text-sm text-gray-500">{data.noopCount} files already processed</span>
+					{scheduler && <ScheduleControls scheduler={scheduler} onUpdate={load} />}
+				</div>
+			</div>
+			<div className="flex flex-1 gap-4 p-4 overflow-x-auto">
+				<ReviewColumn items={data.review} onMutate={load} />
+				<QueueColumn items={data.queued} />
+				<ProcessingColumn items={data.processing} progress={progress} queueStatus={queueStatus} />
+				<DoneColumn items={data.done} />
+			</div>
+		</div>
+	);
+}

src/features/pipeline/ProcessingColumn.tsx

@@ -0,0 +1,62 @@
+import { Badge } from '~/shared/components/ui/badge';
+
+interface ProcessingColumnProps {
+	items: any[];
+	progress?: { id: number; seconds: number; total: number } | null;
+	queueStatus?: { status: string; until?: string; seconds?: number } | null;
+}
+
+export function ProcessingColumn({ items, progress, queueStatus }: ProcessingColumnProps) {
+	const job = items[0]; // at most one running job
+
+	const formatTime = (s: number) => {
+		const m = Math.floor(s / 60);
+		const sec = Math.floor(s % 60);
+		return `${m}:${String(sec).padStart(2, '0')}`;
+	};
+
+	return (
+		<div className="flex flex-col w-72 min-w-72 bg-gray-50 rounded-lg">
+			<div className="px-3 py-2 border-b font-medium text-sm">Processing</div>
+			<div className="flex-1 p-3">
+				{queueStatus && queueStatus.status !== 'running' && (
+					<div className="mb-3 text-xs text-gray-500 bg-white rounded border p-2">
+						{queueStatus.status === 'paused' && <>Paused until {queueStatus.until}</>}
+						{queueStatus.status === 'sleeping' && <>Sleeping {queueStatus.seconds}s between jobs</>}
+						{queueStatus.status === 'idle' && <>Idle</>}
+					</div>
+				)}
+
+				{job ? (
+					<div className="rounded border bg-white p-3">
+						<p className="text-sm font-medium truncate">{job.name}</p>
+						<div className="flex items-center gap-2 mt-1">
+							<Badge variant="running">running</Badge>
+							<Badge variant={job.job_type === 'transcode' ? 'manual' : 'noop'}>
+								{job.job_type}
+							</Badge>
+						</div>
+
+						{progress && progress.total > 0 && (
+							<div className="mt-3">
+								<div className="flex justify-between text-xs text-gray-500 mb-1">
+									<span>{formatTime(progress.seconds)}</span>
+									<span>{Math.round((progress.seconds / progress.total) * 100)}%</span>
+									<span>{formatTime(progress.total)}</span>
+								</div>
+								<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+									<div
+										className="h-full bg-blue-500 rounded-full transition-all"
+										style={{ width: `${Math.min(100, (progress.seconds / progress.total) * 100)}%` }}
+									/>
+								</div>
+							</div>
+						)}
+					</div>
+				) : (
+					<p className="text-sm text-gray-400 text-center py-8">No active job</p>
+				)}
+			</div>
+		</div>
+	);
+}

src/features/pipeline/QueueColumn.tsx

@@ -0,0 +1,28 @@
+import { Badge } from '~/shared/components/ui/badge';
+
+interface QueueColumnProps {
+	items: any[];
+}
+
+export function QueueColumn({ items }: QueueColumnProps) {
+	return (
+		<div className="flex flex-col w-64 min-w-64 bg-gray-50 rounded-lg">
+			<div className="px-3 py-2 border-b font-medium text-sm">
+				Queued <span className="text-gray-400">({items.length})</span>
+			</div>
+			<div className="flex-1 overflow-y-auto p-2 space-y-1">
+				{items.map((item: any) => (
+					<div key={item.id} className="rounded border bg-white p-2">
+						<p className="text-xs font-medium truncate">{item.name}</p>
+						<Badge variant={item.job_type === 'transcode' ? 'manual' : 'noop'}>
+							{item.job_type}
+						</Badge>
+					</div>
+				))}
+				{items.length === 0 && (
+					<p className="text-sm text-gray-400 text-center py-8">Queue empty</p>
+				)}
+			</div>
+		</div>
+	);
+}

src/features/pipeline/ReviewColumn.tsx

@@ -0,0 +1,76 @@
+import { api } from '~/shared/lib/api';
+import { PipelineCard } from './PipelineCard';
+import { SeriesCard } from './SeriesCard';
+
+interface ReviewColumnProps {
+	items: any[];
+	onMutate: () => void;
+}
+
+export function ReviewColumn({ items, onMutate }: ReviewColumnProps) {
+	// Group by series (movies are standalone)
+	const movies = items.filter((i: any) => i.type === 'Movie');
+	const seriesMap = new Map<string, { name: string; key: string; episodes: any[] }>();
+
+	for (const item of items.filter((i: any) => i.type === 'Episode')) {
+		const key = item.series_jellyfin_id ?? item.series_name;
+		if (!seriesMap.has(key)) {
+			seriesMap.set(key, { name: item.series_name, key, episodes: [] });
+		}
+		seriesMap.get(key)!.episodes.push(item);
+	}
+
+	const approveUpTo = async (planId: number) => {
+		await api.post(`/api/review/approve-up-to/${planId}`);
+		onMutate();
+	};
+
+	// Interleave movies and series, sorted by confidence (high first)
+	const allItems = [
+		...movies.map((m: any) => ({ type: 'movie' as const, item: m, sortKey: m.confidence === 'high' ? 0 : 1 })),
+		...[...seriesMap.values()].map(s => ({
+			type: 'series' as const,
+			item: s,
+			sortKey: s.episodes.every((e: any) => e.confidence === 'high') ? 0 : 1,
+		})),
+	].sort((a, b) => a.sortKey - b.sortKey);
+
+	return (
+		<div className="flex flex-col w-80 min-w-80 bg-gray-50 rounded-lg">
+			<div className="px-3 py-2 border-b font-medium text-sm">
+				Review <span className="text-gray-400">({items.length})</span>
+			</div>
+			<div className="flex-1 overflow-y-auto p-2 space-y-2">
+				{allItems.map((entry) => {
+					if (entry.type === 'movie') {
+						return (
+							<PipelineCard
+								key={entry.item.id}
+								item={entry.item}
+								onLanguageChange={async (lang) => {
+									await api.patch(`/api/review/${entry.item.item_id}/language`, { language: lang });
+									onMutate();
+								}}
+								showApproveUpTo
+								onApproveUpTo={() => approveUpTo(entry.item.id)}
+							/>
+						);
+					} else {
+						return (
+							<SeriesCard
+								key={entry.item.key}
+								seriesKey={entry.item.key}
+								seriesName={entry.item.name}
+								episodes={entry.item.episodes}
+								onMutate={onMutate}
+							/>
+						);
+					}
+				})}
+				{allItems.length === 0 && (
+					<p className="text-sm text-gray-400 text-center py-8">No items to review</p>
+				)}
+			</div>
+		</div>
+	);
+}

src/features/pipeline/ScheduleControls.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { api } from '~/shared/lib/api';
+import { Input } from '~/shared/components/ui/input';
+import { Button } from '~/shared/components/ui/button';
+
+interface ScheduleControlsProps {
+	scheduler: {
+		job_sleep_seconds: number;
+		schedule_enabled: boolean;
+		schedule_start: string;
+		schedule_end: string;
+	};
+	onUpdate: () => void;
+}
+
+export function ScheduleControls({ scheduler, onUpdate }: ScheduleControlsProps) {
+	const [open, setOpen] = useState(false);
+	const [state, setState] = useState(scheduler);
+
+	const save = async () => {
+		await api.patch('/api/execute/scheduler', state);
+		onUpdate();
+		setOpen(false);
+	};
+
+	const startAll = async () => {
+		await api.post('/api/execute/start');
+		onUpdate();
+	};
+
+	return (
+		<div className="relative flex items-center gap-2">
+			<Button variant="primary" size="sm" onClick={startAll}>
+				Start queue
+			</Button>
+			<button
+				onClick={() => setOpen(!open)}
+				className="text-xs text-gray-500 hover:text-gray-700 cursor-pointer"
+			>
+				Schedule settings
+			</button>
+
+			{open && (
+				<div className="absolute right-0 top-10 z-50 bg-white border rounded-lg shadow-lg p-4 w-72">
+					<h3 className="text-sm font-medium mb-3">Schedule Settings</h3>
+
+					<label className="block text-xs text-gray-600 mb-1">Sleep between jobs (seconds)</label>
+					<Input
+						type="number"
+						min={0}
+						value={state.job_sleep_seconds}
+						onChange={(e) => setState({ ...state, job_sleep_seconds: parseInt(e.target.value) || 0 })}
+						className="mb-3"
+					/>
+
+					<label className="flex items-center gap-2 text-xs text-gray-600 mb-2">
+						<input
+							type="checkbox"
+							checked={state.schedule_enabled}
+							onChange={(e) => setState({ ...state, schedule_enabled: e.target.checked })}
+						/>
+						Enable time window
+					</label>
+
+					{state.schedule_enabled && (
+						<div className="flex items-center gap-2 mb-3">
+							<Input
+								type="time"
+								value={state.schedule_start}
+								onChange={(e) => setState({ ...state, schedule_start: e.target.value })}
+								className="w-24"
+							/>
+							<span className="text-xs text-gray-500">to</span>
+							<Input
+								type="time"
+								value={state.schedule_end}
+								onChange={(e) => setState({ ...state, schedule_end: e.target.value })}
+								className="w-24"
+							/>
+						</div>
+					)}
+
+					<Button variant="primary" size="sm" onClick={save}>Save</Button>
+				</div>
+			)}
+		</div>
+	);
+}

src/features/pipeline/SeriesCard.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { api } from '~/shared/lib/api';
+import { LANG_NAMES } from '~/shared/lib/lang';
+import { PipelineCard } from './PipelineCard';
+
+interface SeriesCardProps {
+	seriesKey: string;
+	seriesName: string;
+	episodes: any[];
+	onMutate: () => void;
+}
+
+export function SeriesCard({ seriesKey, seriesName, episodes, onMutate }: SeriesCardProps) {
+	const [expanded, setExpanded] = useState(false);
+
+	const seriesLang = episodes[0]?.original_language ?? '';
+
+	const setSeriesLanguage = async (lang: string) => {
+		await api.patch(`/api/review/series/${encodeURIComponent(seriesKey)}/language`, { language: lang });
+		onMutate();
+	};
+
+	const approveSeries = async () => {
+		await api.post(`/api/review/series/${encodeURIComponent(seriesKey)}/approve-all`);
+		onMutate();
+	};
+
+	const highCount = episodes.filter((e: any) => e.confidence === 'high').length;
+	const lowCount = episodes.filter((e: any) => e.confidence === 'low').length;
+
+	return (
+		<div className="rounded-lg border bg-white">
+			<div
+				className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50"
+				onClick={() => setExpanded(!expanded)}
+			>
+				<div className="flex items-center gap-2 min-w-0">
+					<span className="text-xs text-gray-400">{expanded ? '▼' : '▶'}</span>
+					<p className="text-sm font-medium truncate">{seriesName}</p>
+					<span className="text-xs text-gray-500">{episodes.length} eps</span>
+					{highCount > 0 && <span className="text-xs text-green-600">{highCount} ready</span>}
+					{lowCount > 0 && <span className="text-xs text-amber-600">{lowCount} review</span>}
+				</div>
+				<div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+					<select
+						className="h-6 text-xs border border-gray-300 rounded px-1 bg-white"
+						value={seriesLang}
+						onChange={(e) => setSeriesLanguage(e.target.value)}
+					>
+						<option value="">unknown</option>
+						{Object.entries(LANG_NAMES).map(([code, name]) => (
+							<option key={code} value={code}>{name}</option>
+						))}
+					</select>
+					<button
+						onClick={approveSeries}
+						className="text-xs px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 cursor-pointer whitespace-nowrap"
+					>
+						Approve all
+					</button>
+				</div>
+			</div>
+			{expanded && (
+				<div className="border-t px-3 pb-3 space-y-2 pt-2">
+					{episodes.map((ep: any) => (
+						<PipelineCard
+							key={ep.id}
+							item={ep}
+							onLanguageChange={async (lang) => {
+								await api.patch(`/api/review/${ep.item_id}/language`, { language: lang });
+								onMutate();
+							}}
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

src/routes/__root.tsx

@@ -51,11 +51,8 @@ function RootLayout() {
 				<VersionBadge />
 				<div className="flex flex-wrap items-center gap-0.5">
 					<NavLink to="/scan">Scan</NavLink>
-					<NavLink to="/paths">Paths</NavLink>
-					<NavLink to="/review/audio">Audio</NavLink>
-					<NavLink to="/review/subtitles/extract">ST Extract</NavLink>
-					<NavLink to="/review/subtitles">ST Manager</NavLink>
-					<NavLink to="/execute">Execute</NavLink>
+					<NavLink to="/pipeline">Pipeline</NavLink>
+					<NavLink to="/review/subtitles">Subtitles</NavLink>
 				</div>
 				<div className="flex-1" />
 				<div className="flex items-center gap-0.5">

src/routes/pipeline.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { PipelinePage } from '~/features/pipeline/PipelinePage';
+
+export const Route = createFileRoute('/pipeline')({
+	component: PipelinePage,
+});