@joewinke/jatui 0.21.0 → 0.23.0

package/dist/components/batch/BatchJobTable.svelte

@@ -0,0 +1,549 @@
+<script module lang="ts">
+	import type { JobRow } from './batchQueue';
+
+	export interface JobContext {
+		id: string;
+		/** 1-based attempt number. */
+		attempt: number;
+		/** Aborted when the job or the batch is cancelled — pass it to fetch/pollOperation. */
+		signal: AbortSignal;
+		/** Report 0..1 progress for the row's bar. */
+		reportProgress: (fraction: number) => void;
+	}
+
+	/** Per-row controls handed to the cell snippets. */
+	export interface RowControls {
+		index: number;
+		retry: () => void;
+		skip: () => void;
+		unskip: () => void;
+		cancel: () => void;
+		moveUp: () => void;
+		moveDown: () => void;
+		canMoveUp: boolean;
+		canMoveDown: boolean;
+		/** Live elapsed ms for this row's current/last attempt. */
+		elapsedMs: number;
+	}
+
+	export type BatchPhase = 'idle' | 'running' | 'paused';
+
+	/** Batch-level controls handed to the `toolbar` snippet. */
+	export interface BatchControls {
+		phase: BatchPhase;
+		start: () => void;
+		pause: () => void;
+		cancel: () => Promise<void>;
+		retryFailed: () => void;
+		etaMs: number | null;
+	}
+
+	export type { JobRow };
+</script>
+
+<script lang="ts" generics="T">
+	/**
+	 * BatchJobTable (jatui-m4uz3.7) — generic queue runner.
+	 *
+	 * Harvested from vid-gen's BatchGenerator: a table of jobs with per-row
+	 * status / progress / elapsed / retry / skip / reorder, a concurrency cap,
+	 * an optional per-run process limit (quota budget), a rolling-average ETA,
+	 * and toast + showConfirm feedback instead of alert()/confirm().
+	 *
+	 * The host supplies `jobs` (bind it) and an async `run(data, ctx)`; the
+	 * component owns the scheduling. Every default cell is a snippet override.
+	 * Mount <ToastHost /> and <ConfirmDialog /> once in the app root.
+	 */
+	import { onDestroy, onMount, type Snippet } from 'svelte';
+	import { showToast } from '../../stores/toast';
+	import { showConfirm } from '../../stores/confirmDialog';
+	import {
+		formatElapsed,
+		isProcessLimitReached,
+		moveJob,
+		nextJobsToStart,
+		summarizeJobs,
+		type BatchSummary,
+		type JobStatus
+	} from './batchQueue';
+	import { useElapsedEstimate } from './useElapsedEstimate';
+
+	interface Props {
+		jobs: JobRow<T>[];
+		run: (data: T, ctx: JobContext) => Promise<unknown>;
+		/** Max jobs running at once. Default 3. */
+		concurrencyLimit?: number;
+		/** Max jobs to start per run (Start → drained). `null` = unlimited. */
+		processLimit?: number | null;
+		autoStart?: boolean;
+		/** Toast on batch completion / process limit. Default true. */
+		notify?: boolean;
+		/** showConfirm before cancelling running jobs or clearing rows. Default true. */
+		confirmDestructive?: boolean;
+		/** Accessible name for the table. */
+		caption?: string;
+		emptyText?: string;
+		/** Extra <th> cells for host data columns (after the # column). */
+		headers?: Snippet;
+		/** Matching <td> cells for each row. */
+		cells?: Snippet<[JobRow<T>, RowControls]>;
+		statusCell?: Snippet<[JobRow<T>, RowControls]>;
+		progressCell?: Snippet<[JobRow<T>, RowControls]>;
+		elapsedCell?: Snippet<[JobRow<T>, RowControls]>;
+		actionsCell?: Snippet<[JobRow<T>, RowControls]>;
+		/** Extra toolbar content (e.g. a QuotaMeter), right-aligned. */
+		toolbar?: Snippet<[BatchControls]>;
+		onJobDone?: (job: JobRow<T>) => void;
+		onJobFailed?: (job: JobRow<T>, error: unknown) => void;
+		onBatchDone?: (summary: BatchSummary) => void;
+		class?: string;
+	}
+
+	let {
+		jobs = $bindable(),
+		run,
+		concurrencyLimit = 3,
+		processLimit = null,
+		autoStart = false,
+		notify = true,
+		confirmDestructive = true,
+		caption = 'Batch jobs',
+		emptyText = 'No jobs in the queue.',
+		headers,
+		cells,
+		statusCell,
+		progressCell,
+		elapsedCell,
+		actionsCell,
+		toolbar,
+		onJobDone,
+		onJobFailed,
+		onBatchDone,
+		class: className = ''
+	}: Props = $props();
+
+	let phase = $state<BatchPhase>('idle');
+	let startedThisRun = 0;
+	let settledThisRun = 0;
+	const controllers = new Map<string, AbortController>();
+	const eta = useElapsedEstimate({ window: 10 });
+
+	const summary = $derived(summarizeJobs(jobs));
+
+	// Ticking clock for elapsed/ETA — only while something is running.
+	let now = $state(Date.now());
+	$effect(() => {
+		if (summary.running === 0) return;
+		now = Date.now();
+		const t = setInterval(() => (now = Date.now()), 500);
+		return () => clearInterval(t);
+	});
+
+	function elapsedOf(job: JobRow<T>): number {
+		if (job.startedAt == null) return 0;
+		return (job.finishedAt ?? now) - job.startedAt;
+	}
+
+	const etaMs = $derived(
+		summary.queued + summary.running === 0
+			? null
+			: eta.remainingMs(
+					summary.queued,
+					jobs.filter((j) => j.status === 'running').map(elapsedOf),
+					concurrencyLimit
+				)
+	);
+
+	const find = (id: string) => jobs.find((j) => j.id === id);
+
+	// ── Scheduling ──────────────────────────────────────────────────────────
+	function limits() {
+		return { concurrencyLimit, processLimit, startedThisRun };
+	}
+
+	function dispatch() {
+		if (phase !== 'running') return;
+		const ids = nextJobsToStart(jobs, limits());
+		for (const id of ids) void startJob(id);
+		if (ids.length === 0 && summarizeJobs(jobs).running === 0) finishRun();
+	}
+
+	function finishRun() {
+		phase = 'idle';
+		if (settledThisRun === 0) return;
+		const s = summarizeJobs(jobs);
+		const limited = isProcessLimitReached(jobs, limits());
+		if (notify) {
+			if (limited) {
+				showToast({
+					type: 'warning',
+					message: `Process limit of ${processLimit} reached — ${s.queued} job${s.queued === 1 ? '' : 's'} left queued.`
+				});
+			} else if (s.failed > 0) {
+				showToast({ type: 'warning', message: `Batch finished: ${s.done} done, ${s.failed} failed.` });
+			} else {
+				showToast({ type: 'success', message: `Batch finished: ${s.done} done.` });
+			}
+		}
+		onBatchDone?.(s);
+	}
+
+	async function startJob(id: string) {
+		const job = find(id);
+		if (!job || job.status !== 'queued') return;
+		const ctrl = new AbortController();
+		controllers.set(id, ctrl);
+		startedThisRun++;
+		job.status = 'running';
+		job.attempts += 1;
+		job.progress = 0;
+		job.startedAt = Date.now();
+		job.finishedAt = undefined;
+		job.error = undefined;
+
+		const ctx: JobContext = {
+			id,
+			attempt: job.attempts,
+			signal: ctrl.signal,
+			reportProgress: (fraction) => {
+				const j = find(id);
+				if (j && !ctrl.signal.aborted && j.status === 'running') {
+					j.progress = Math.min(1, Math.max(0, fraction));
+				}
+			}
+		};
+
+		let outcome: JobStatus;
+		let result: unknown;
+		let error: unknown;
+		try {
+			result = await run($state.snapshot(job.data) as T, ctx);
+			outcome = ctrl.signal.aborted ? 'cancelled' : 'done';
+		} catch (err) {
+			error = err;
+			outcome = ctrl.signal.aborted ? 'cancelled' : 'failed';
+		}
+		controllers.delete(id);
+
+		const j = find(id);
+		if (j) {
+			j.status = outcome;
+			j.finishedAt = Date.now();
+			if (outcome === 'done') {
+				j.progress = 1;
+				j.result = result;
+				if (j.startedAt != null) eta.record(j.finishedAt - j.startedAt);
+				onJobDone?.(j);
+			} else if (outcome === 'failed') {
+				j.error = error instanceof Error ? error.message : String(error);
+				onJobFailed?.(j, error);
+			}
+			settledThisRun++;
+		}
+		dispatch();
+	}
+
+	// ── Batch controls ──────────────────────────────────────────────────────
+	export function start() {
+		if (phase === 'running') return;
+		if (phase === 'idle') {
+			startedThisRun = 0;
+			settledThisRun = 0;
+		}
+		phase = 'running';
+		dispatch();
+	}
+
+	export function pause() {
+		if (phase === 'running') phase = 'paused';
+	}
+
+	export async function cancel() {
+		const running = summarizeJobs(jobs).running;
+		if (running > 0 && confirmDestructive) {
+			const ok = await showConfirm({
+				title: 'Cancel batch?',
+				body: `${running} running job${running === 1 ? '' : 's'} will be aborted. Queued jobs stay queued.`,
+				confirmLabel: 'Cancel batch',
+				cancelLabel: 'Keep running',
+				danger: true
+			});
+			if (!ok) return;
+		}
+		phase = 'idle';
+		for (const c of controllers.values()) c.abort();
+	}
+
+	export function retryFailed() {
+		let n = 0;
+		for (const j of jobs) {
+			if (j.status === 'failed' || j.status === 'cancelled') {
+				requeue(j);
+				n++;
+			}
+		}
+		if (n > 0) dispatch();
+	}
+
+	export async function clearFinished() {
+		const n = jobs.filter((j) => j.status === 'done' || j.status === 'skipped').length;
+		if (n === 0) return;
+		if (confirmDestructive) {
+			const ok = await showConfirm({
+				title: 'Clear finished jobs?',
+				body: `Remove ${n} done or skipped row${n === 1 ? '' : 's'} from the table.`,
+				confirmLabel: 'Clear',
+				danger: true
+			});
+			if (!ok) return;
+		}
+		jobs = jobs.filter((j) => j.status !== 'done' && j.status !== 'skipped');
+	}
+
+	function requeue(j: JobRow<T>) {
+		j.status = 'queued';
+		j.error = undefined;
+		j.progress = undefined;
+		j.startedAt = undefined;
+		j.finishedAt = undefined;
+	}
+
+	// ── Row controls ────────────────────────────────────────────────────────
+	function controlsFor(job: JobRow<T>, index: number): RowControls {
+		return {
+			index,
+			elapsedMs: elapsedOf(job),
+			canMoveUp: job.status === 'queued' && index > 0,
+			canMoveDown: job.status === 'queued' && index < jobs.length - 1,
+			retry: () => {
+				const j = find(job.id);
+				if (j && (j.status === 'failed' || j.status === 'cancelled')) {
+					requeue(j);
+					dispatch();
+				}
+			},
+			skip: () => {
+				const j = find(job.id);
+				if (j?.status === 'queued') j.status = 'skipped';
+			},
+			unskip: () => {
+				const j = find(job.id);
+				if (j?.status === 'skipped') {
+					j.status = 'queued';
+					dispatch();
+				}
+			},
+			cancel: () => controllers.get(job.id)?.abort(),
+			moveUp: () => (jobs = moveJob(jobs, job.id, -1)),
+			moveDown: () => (jobs = moveJob(jobs, job.id, 1))
+		};
+	}
+
+	onMount(() => {
+		if (autoStart) start();
+	});
+	onDestroy(() => {
+		for (const c of controllers.values()) c.abort();
+	});
+
+	const batchControls: BatchControls = {
+		get phase() {
+			return phase;
+		},
+		get etaMs() {
+			return etaMs;
+		},
+		start,
+		pause,
+		cancel,
+		retryFailed
+	};
+
+	const STATUS_META: Record<JobStatus, { label: string; cls: string }> = {
+		queued: { label: 'Queued', cls: 'badge-ghost' },
+		running: { label: 'Running', cls: 'badge-info' },
+		done: { label: 'Done', cls: 'badge-success' },
+		failed: { label: 'Failed', cls: 'badge-error' },
+		skipped: { label: 'Skipped', cls: 'badge-neutral' },
+		cancelled: { label: 'Cancelled', cls: 'badge-warning' }
+	};
+
+	const retryable = $derived(summary.failed + summary.cancelled);
+	const clearable = $derived(summary.done + summary.skipped);
+	const hasWork = $derived(summary.queued > 0);
+</script>
+
+<div class="flex flex-col gap-3 {className}">
+	<!-- Toolbar -->
+	<div class="flex flex-wrap items-center gap-2">
+		{#if phase === 'running'}
+			<button type="button" class="btn btn-sm" onclick={pause}>Pause</button>
+		{:else}
+			<button type="button" class="btn btn-sm btn-primary" disabled={!hasWork} onclick={start}>
+				{phase === 'paused' ? 'Resume' : 'Start'}
+			</button>
+		{/if}
+		<button
+			type="button"
+			class="btn btn-sm btn-ghost"
+			disabled={phase === 'idle' && summary.running === 0}
+			onclick={cancel}
+		>
+			Cancel
+		</button>
+		<button type="button" class="btn btn-sm btn-ghost" disabled={retryable === 0} onclick={retryFailed}>
+			Retry failed{retryable ? ` (${retryable})` : ''}
+		</button>
+		<button type="button" class="btn btn-sm btn-ghost" disabled={clearable === 0} onclick={clearFinished}>
+			Clear finished
+		</button>
+		{#if toolbar}
+			<div class="ml-auto">{@render toolbar(batchControls)}</div>
+		{/if}
+	</div>
+
+	<!-- Overall progress -->
+	<div class="flex flex-col gap-1">
+		<div class="flex flex-wrap items-baseline justify-between gap-2 text-xs" aria-live="polite">
+			<span class="tabular-nums">
+				<span class="font-medium">{summary.settled} / {summary.total}</span>
+				<span class="text-base-content/60">
+					· {summary.done} done{#if summary.failed}, <span class="text-error">{summary.failed} failed</span
+						>{/if}{#if summary.running}, {summary.running} running{/if}{#if summary.queued}, {summary.queued}
+						queued{/if}
+				</span>
+			</span>
+			<span class="text-base-content/60 tabular-nums">
+				{#if phase === 'paused'}
+					Paused
+				{:else if etaMs != null && phase === 'running'}
+					ETA {formatElapsed(etaMs)}
+				{:else if phase === 'running'}
+					Estimating…
+				{/if}
+			</span>
+		</div>
+		<progress
+			class="progress progress-primary h-1.5 w-full"
+			value={summary.fraction}
+			max="1"
+			aria-label="Batch progress: {summary.settled} of {summary.total} settled"
+		></progress>
+	</div>
+
+	<div class="overflow-x-auto">
+		<table class="table table-sm">
+			<caption class="sr-only">{caption}</caption>
+			<thead>
+				<tr>
+					<th class="w-8">#</th>
+					{@render headers?.()}
+					<th>Status</th>
+					<th class="w-40">Progress</th>
+					<th class="w-20">Elapsed</th>
+					<th class="w-px text-right"><span class="sr-only">Actions</span></th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each jobs as job, index (job.id)}
+					{@const c = controlsFor(job, index)}
+					<tr class={job.status === 'skipped' || job.status === 'cancelled' ? 'opacity-60' : ''}>
+						<td class="text-base-content/50 tabular-nums">{index + 1}</td>
+						{@render cells?.(job, c)}
+						<td>
+							{#if statusCell}
+								{@render statusCell(job, c)}
+							{:else}
+								<span class="badge badge-sm {STATUS_META[job.status].cls}">
+									{STATUS_META[job.status].label}{job.attempts > 1 ? ` · try ${job.attempts}` : ''}
+								</span>
+								{#if job.error}
+									<p class="text-error mt-1 max-w-xs truncate text-xs" title={job.error}>{job.error}</p>
+								{/if}
+							{/if}
+						</td>
+						<td>
+							{#if progressCell}
+								{@render progressCell(job, c)}
+							{:else if job.status === 'running'}
+								<progress
+									class="progress progress-info h-1.5 w-full"
+									value={job.progress ?? undefined}
+									max="1"
+									aria-label="Job {index + 1} progress"
+								></progress>
+							{:else if job.status === 'done'}
+								<progress class="progress progress-success h-1.5 w-full" value="1" max="1" aria-hidden="true"
+								></progress>
+							{/if}
+						</td>
+						<td class="tabular-nums">
+							{#if elapsedCell}
+								{@render elapsedCell(job, c)}
+							{:else if job.startedAt != null}
+								{formatElapsed(c.elapsedMs)}
+							{:else}
+								<span class="text-base-content/40">—</span>
+							{/if}
+						</td>
+						<td class="text-right whitespace-nowrap">
+							{#if actionsCell}
+								{@render actionsCell(job, c)}
+							{:else}
+								<div class="join">
+									{#if job.status === 'queued'}
+										<button
+											type="button"
+											class="btn btn-ghost btn-xs join-item"
+											disabled={!c.canMoveUp}
+											aria-label="Move job {index + 1} up"
+											onclick={c.moveUp}>↑</button
+										>
+										<button
+											type="button"
+											class="btn btn-ghost btn-xs join-item"
+											disabled={!c.canMoveDown}
+											aria-label="Move job {index + 1} down"
+											onclick={c.moveDown}>↓</button
+										>
+										<button
+											type="button"
+											class="btn btn-ghost btn-xs join-item"
+											aria-label="Skip job {index + 1}"
+											onclick={c.skip}>Skip</button
+										>
+									{:else if job.status === 'running'}
+										<button
+											type="button"
+											class="btn btn-ghost btn-xs join-item"
+											aria-label="Cancel job {index + 1}"
+											onclick={c.cancel}>Cancel</button
+										>
+									{:else if job.status === 'failed' || job.status === 'cancelled'}
+										<button
+											type="button"
+											class="btn btn-ghost btn-xs join-item"
+											aria-label="Retry job {index + 1}"
+											onclick={c.retry}>Retry</button
+										>
+									{:else if job.status === 'skipped'}
+										<button
+											type="button"
+											class="btn btn-ghost btn-xs join-item"
+											aria-label="Restore job {index + 1} to the queue"
+											onclick={c.unskip}>Unskip</button
+										>
+									{/if}
+								</div>
+							{/if}
+						</td>
+					</tr>
+				{:else}
+					<tr>
+						<td colspan="99" class="text-base-content/50 py-8 text-center">{emptyText}</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+</div>

package/dist/components/batch/BatchJobTable.svelte.d.ts

@@ -0,0 +1,114 @@
+import type { JobRow } from './batchQueue';
+export interface JobContext {
+    id: string;
+    /** 1-based attempt number. */
+    attempt: number;
+    /** Aborted when the job or the batch is cancelled — pass it to fetch/pollOperation. */
+    signal: AbortSignal;
+    /** Report 0..1 progress for the row's bar. */
+    reportProgress: (fraction: number) => void;
+}
+/** Per-row controls handed to the cell snippets. */
+export interface RowControls {
+    index: number;
+    retry: () => void;
+    skip: () => void;
+    unskip: () => void;
+    cancel: () => void;
+    moveUp: () => void;
+    moveDown: () => void;
+    canMoveUp: boolean;
+    canMoveDown: boolean;
+    /** Live elapsed ms for this row's current/last attempt. */
+    elapsedMs: number;
+}
+export type BatchPhase = 'idle' | 'running' | 'paused';
+/** Batch-level controls handed to the `toolbar` snippet. */
+export interface BatchControls {
+    phase: BatchPhase;
+    start: () => void;
+    pause: () => void;
+    cancel: () => Promise<void>;
+    retryFailed: () => void;
+    etaMs: number | null;
+}
+export type { JobRow };
+/**
+     * BatchJobTable (jatui-m4uz3.7) — generic queue runner.
+     *
+     * Harvested from vid-gen's BatchGenerator: a table of jobs with per-row
+     * status / progress / elapsed / retry / skip / reorder, a concurrency cap,
+     * an optional per-run process limit (quota budget), a rolling-average ETA,
+     * and toast + showConfirm feedback instead of alert()/confirm().
+     *
+     * The host supplies `jobs` (bind it) and an async `run(data, ctx)`; the
+     * component owns the scheduling. Every default cell is a snippet override.
+     * Mount <ToastHost /> and <ConfirmDialog /> once in the app root.
+     */
+import { type Snippet } from 'svelte';
+import { type BatchSummary } from './batchQueue';
+declare function $$render<T>(): {
+    props: {
+        jobs: JobRow<T>[];
+        run: (data: T, ctx: JobContext) => Promise<unknown>;
+        /** Max jobs running at once. Default 3. */
+        concurrencyLimit?: number;
+        /** Max jobs to start per run (Start → drained). `null` = unlimited. */
+        processLimit?: number | null;
+        autoStart?: boolean;
+        /** Toast on batch completion / process limit. Default true. */
+        notify?: boolean;
+        /** showConfirm before cancelling running jobs or clearing rows. Default true. */
+        confirmDestructive?: boolean;
+        /** Accessible name for the table. */
+        caption?: string;
+        emptyText?: string;
+        /** Extra <th> cells for host data columns (after the # column). */
+        headers?: Snippet;
+        /** Matching <td> cells for each row. */
+        cells?: Snippet<[JobRow<T>, RowControls]>;
+        statusCell?: Snippet<[JobRow<T>, RowControls]>;
+        progressCell?: Snippet<[JobRow<T>, RowControls]>;
+        elapsedCell?: Snippet<[JobRow<T>, RowControls]>;
+        actionsCell?: Snippet<[JobRow<T>, RowControls]>;
+        /** Extra toolbar content (e.g. a QuotaMeter), right-aligned. */
+        toolbar?: Snippet<[BatchControls]>;
+        onJobDone?: (job: JobRow<T>) => void;
+        onJobFailed?: (job: JobRow<T>, error: unknown) => void;
+        onBatchDone?: (summary: BatchSummary) => void;
+        class?: string;
+    };
+    exports: {
+        start: () => void;
+        pause: () => void;
+        cancel: () => Promise<void>;
+        retryFailed: () => void;
+        clearFinished: () => Promise<void>;
+    };
+    bindings: "jobs";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "jobs";
+    exports(): {
+        start: () => void;
+        pause: () => void;
+        cancel: () => Promise<void>;
+        retryFailed: () => void;
+        clearFinished: () => Promise<void>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BatchJobTable: $$IsomorphicComponent;
+type BatchJobTable<T> = InstanceType<typeof BatchJobTable<T>>;
+export default BatchJobTable;