Oxicloud/frontend/src/lib/components/AdminJobsPanel.svelte

<!--
  AdminJobsPanel — the Jobs tab of the admin panel.

  Table of registered jobs, row-click expands to show run history for
  recoverable jobs, and within a run row a further expansion shows
  findings. Coordinator jobs (`consistency_batch`) get a "Run deep"
  variant that propagates `?deep=true` to every child. See
  `docs/plan/job-registry.md` §Admin UI for the mock this implements.

  Data flow:
  - `listJobs()` populates the table; auto-polled every 5s while the
    tab is visible so an operator watching a running job sees the
    `running` flag flip without manual refresh.
  - `triggerJob(name, {deep})` invoked by the "Run" / "Run deep" buttons.
  - `cancelJob(name)` invoked by "Cancel" (only shown when a run is
    currently running).
  - `listRuns(name)` lazy-loaded when a row is expanded.
  - `listFindings(name, runId)` lazy-loaded when a run is expanded.
-->
<script lang="ts">
	import { SvelteSet } from 'svelte/reactivity';
	import Icon from '$lib/icons/Icon.svelte';
	import Modal from '$lib/components/Modal.svelte';
	import { t } from '$lib/i18n/index.svelte';
	import { errorMessage } from '$lib/utils/errors';
	import { ui } from '$lib/stores/ui.svelte';
	import {
		listJobs,
		listRuns,
		listFindings,
		triggerJob,
		cancelJob,
		purgeJobRuns
	} from '$lib/api/endpoints/adminJobs';
	import type { Finding, JobSummary, RunSummary, RunStatus } from '$lib/api/types';

	// ─── State ────────────────────────────────────────────────────────

	let jobs = $state<JobSummary[] | null>(null);
	let loadError = $state<string | null>(null);

	// One expanded job (by name) at a time — matches the plan mock
	// (drawer-style). Multiple simultaneous expansions would fight for
	// vertical space in the shared admin page and confuse the polling
	// story (runs list stale-detection).
	let expandedJob = $state<string | null>(null);
	let runsByJob = $state<Record<string, RunSummary[]>>({});
	let runsErrorByJob = $state<Record<string, string>>({});
	let runsLoadingByJob = $state<Record<string, boolean>>({});

	// One expanded run per job — same reasoning.
	let expandedRunByJob = $state<Record<string, string | null>>({});
	let findingsByRun = $state<Record<string, Finding[]>>({});
	let findingsErrorByRun = $state<Record<string, string>>({});
	let findingsLoadingByRun = $state<Record<string, boolean>>({});

	// Actions in flight — key by "trigger:<name>" / "cancel:<name>" so
	// buttons disable the moment they're clicked, no double-fires.
	// SvelteSet mutates in place with per-key reactivity — cheaper than
	// rebuilding a plain Set on every click, and required by the
	// svelte/prefer-svelte-reactivity lint.
	const busyKeys = new SvelteSet<string>();
	function markBusy(key: string, on: boolean) {
		if (on) busyKeys.add(key);
		else busyKeys.delete(key);
	}

	// Purge-modal state. Null = closed; otherwise carries the
	// draft retention days the operator's picking. Kept separate
	// from the top-bar action state so mouse-away doesn't lose
	// the value.
	let purgeModal = $state<{ days: number } | null>(null);
	function openPurge() {
		purgeModal = { days: 30 };
	}
	function closePurge() {
		purgeModal = null;
	}
	async function confirmPurge() {
		if (!purgeModal) return;
		const days = Math.max(1, Math.floor(purgeModal.days));
		markBusy('purge', true);
		try {
			const res = await purgeJobRuns(days);
			ui.notify(
				t(
					'admin.jobs.purge_done',
					{ n: res.purged, days: res.retention_days },
					'{{n}} old run(s) purged (retention {{days}} days)'
				),
				'success'
			);
			purgeModal = null;
			await loadJobs();
		} catch (e) {
			ui.notify(errorMessage(e), 'error');
		} finally {
			markBusy('purge', false);
		}
	}

	// ─── Loading + polling ─────────────────────────────────────────────

	/**
	 * Stable render order for the jobs table. The backend snapshot
	 * iterates a HashMap so its order is non-deterministic —
	 * refreshing shuffles rows and hurts orientation.
	 *
	 * Two-tier sort:
	 *   0. `*_consistency` tenants — alphabetical.
	 *   1. All other jobs — alphabetical.
	 *
	 * The `consistency_batch` coordinator is DELIBERATELY excluded
	 * from the table (see the filter in `loadJobs`). The top-bar
	 * "Run all consistency checks" + "Run deep" buttons already
	 * dispatch it — showing it as a table row too was pure
	 * duplication.
	 */
	function sortKey(name: string): [number, string] {
		if (name.endsWith('_consistency')) return [0, name];
		return [1, name];
	}

	async function loadJobs() {
		try {
			const fetched = await listJobs();
			jobs = fetched
				.slice()
				// `consistency_batch` is served by the top-bar
				// action buttons; hiding it here removes the
				// duplicate table row. `hasBatch` still checks the
				// full fetched list so the top buttons only render
				// when the coordinator is actually registered.
				.filter((j) => j.name !== 'consistency_batch')
				.sort((a, b) => {
					const [ga, na] = sortKey(a.name);
					const [gb, nb] = sortKey(b.name);
					if (ga !== gb) return ga - gb;
					return na.localeCompare(nb);
				});
			// Track whether the coordinator is registered so the
			// top-bar buttons can gate on it without checking `jobs`
			// (which now filters it out).
			hasBatch = fetched.some((j) => j.name === 'consistency_batch');
			loadError = null;
		} catch (e) {
			loadError = errorMessage(e);
		}
	}

	// Poll while the tab is visible. Stops on component destroy AND on
	// tab-hidden so a background admin tab doesn't hammer the API.
	// 5s cadence — the plan's recommended default; a running job's
	// state flips within a poll interval.
	const POLL_MS = 5000;
	let pollTimer: ReturnType<typeof setInterval> | null = null;

	function startPolling() {
		stopPolling();
		pollTimer = setInterval(() => {
			if (document.visibilityState !== 'visible') return;
			void loadJobs();
			// Refresh runs for the expanded job too — the whole point of
			// having it expanded is watching progress. Findings we DON'T
			// refresh automatically: they only grow within a run, and
			// the operator can hit refresh manually when they want to
			// see new ones. Auto-refreshing findings during a big scan
			// would rewrite the scroll position under them.
			if (expandedJob) void loadRuns(expandedJob);
		}, POLL_MS);
	}

	function stopPolling() {
		if (pollTimer) {
			clearInterval(pollTimer);
			pollTimer = null;
		}
	}

	$effect(() => {
		void loadJobs();
		startPolling();
		return () => stopPolling();
	});

	async function loadRuns(name: string) {
		runsLoadingByJob = { ...runsLoadingByJob, [name]: true };
		runsErrorByJob = { ...runsErrorByJob, [name]: '' };
		try {
			const runs = await listRuns(name, 20);
			runsByJob = { ...runsByJob, [name]: runs };
		} catch (e) {
			runsErrorByJob = { ...runsErrorByJob, [name]: errorMessage(e) };
		} finally {
			runsLoadingByJob = { ...runsLoadingByJob, [name]: false };
		}
	}

	async function loadFindings(name: string, runId: string) {
		findingsLoadingByRun = { ...findingsLoadingByRun, [runId]: true };
		findingsErrorByRun = { ...findingsErrorByRun, [runId]: '' };
		try {
			const findings = await listFindings(name, runId, { limit: 500 });
			findingsByRun = { ...findingsByRun, [runId]: findings };
		} catch (e) {
			findingsErrorByRun = { ...findingsErrorByRun, [runId]: errorMessage(e) };
		} finally {
			findingsLoadingByRun = { ...findingsLoadingByRun, [runId]: false };
		}
	}

	// ─── Expansion toggles ─────────────────────────────────────────────

	function toggleJob(name: string) {
		if (expandedJob === name) {
			expandedJob = null;
		} else {
			expandedJob = name;
			// Lazy-load on first open, refresh on subsequent opens.
			void loadRuns(name);
		}
	}

	function toggleRun(jobName: string, runId: string) {
		const current = expandedRunByJob[jobName];
		if (current === runId) {
			expandedRunByJob = { ...expandedRunByJob, [jobName]: null };
		} else {
			expandedRunByJob = { ...expandedRunByJob, [jobName]: runId };
			void loadFindings(jobName, runId);
		}
	}

	// ─── Actions ───────────────────────────────────────────────────────

	async function onTrigger(name: string, opts: { deep?: boolean } = {}) {
		const key = `trigger:${name}${opts.deep ? ':deep' : ''}`;
		markBusy(key, true);
		try {
			const res = await triggerJob(name, opts);
			// The trigger envelope carries the child's outcome — surface
			// its pass/fail immediately so operators don't have to click
			// through to see whether the run completed cleanly.
			if (res.outcome.outcome === 'ok') {
				ui.notify(
					t('admin.jobs.triggered_ok', { name }, '{{name}} triggered successfully'),
					'success'
				);
			} else {
				ui.notify(
					t(
						'admin.jobs.triggered_err',
						{ name, message: res.outcome.message },
						'{{name}} failed: {{message}}'
					),
					'error'
				);
			}
			await loadJobs();
			if (expandedJob === name) await loadRuns(name);
		} catch (e) {
			ui.notify(errorMessage(e), 'error');
		} finally {
			markBusy(key, false);
		}
	}

	async function onCancel(name: string) {
		const key = `cancel:${name}`;
		markBusy(key, true);
		try {
			const res = await cancelJob(name);
			if (res.run_id) {
				ui.notify(
					t(
						'admin.jobs.cancel_requested',
						{ name },
						'Cancel requested — {{name}} will pause at the next safe boundary'
					),
					'info'
				);
			} else {
				ui.notify(
					t('admin.jobs.cancel_noop', { name }, 'Nothing to cancel — {{name}} is not running'),
					'info'
				);
			}
			await loadJobs();
			if (expandedJob === name) await loadRuns(name);
		} catch (e) {
			ui.notify(errorMessage(e), 'error');
		} finally {
			markBusy(key, false);
		}
	}

	// ─── Formatters (pure, no I/O) ─────────────────────────────────────

	function cadenceLabel(job: JobSummary): string {
		if (job.interval_ms === undefined) return t('admin.jobs.on_demand', 'on-demand');
		const secs = Math.round(job.interval_ms / 1000);
		if (secs % 3600 === 0) return t('admin.jobs.every_h', { n: secs / 3600 }, 'every {{n}} h');
		if (secs % 60 === 0) return t('admin.jobs.every_min', { n: secs / 60 }, 'every {{n}} min');
		return t('admin.jobs.every_sec', { n: secs }, 'every {{n}} s');
	}

	/**
	 * Per-severity finding counts from `last_outcome.extra.severity_counts`
	 * (a JSON object populated by `run_or_resume`). Missing / older
	 * runs return an empty record — callers should tolerate absent keys.
	 * The three severity values are the ones consistency tenants emit
	 * today: `data_loss`, `inconsistent`, `anomaly`.
	 */
	function lastSeverityCounts(job: JobSummary): Record<string, number> {
		if (!job.last_outcome || job.last_outcome.outcome !== 'ok') return {};
		const extra = job.last_outcome.extra as
			| { severity_counts?: Record<string, number> }
			| undefined;
		return extra?.severity_counts ?? {};
	}

	/**
	 * Actionable findings = `data_loss + inconsistent`. Those are what
	 * turn the outer outcome pill amber ("issues") and get the red
	 * badge on the outer job row. `anomaly` findings are informational
	 * and render as a blue notice instead — they don't count here.
	 */
	function actionableFindingCount(job: JobSummary): number {
		const s = lastSeverityCounts(job);
		return (s.data_loss ?? 0) + (s.inconsistent ?? 0);
	}

	function anomalyFindingCount(job: JobSummary): number {
		return lastSeverityCounts(job).anomaly ?? 0;
	}

	/**
	 * Pill CSS modifier for a finding's severity — extracted so the
	 * findings-table cell and any future summary render share one
	 * source of truth.
	 *  - `data_loss` → red (`err`)
	 *  - `inconsistent` → amber (`paused`)
	 *  - `anomaly` → blue (`notice`)
	 *  - unknown → neutral grey
	 */
	function severityPillModifier(severity: string): string {
		switch (severity) {
			case 'data_loss':
				return 'err';
			case 'inconsistent':
				return 'paused';
			case 'anomaly':
				return 'notice';
			default:
				return 'neutral';
		}
	}

	function outcomeLabel(job: JobSummary): string {
		if (!job.last_outcome) return t('admin.jobs.never', 'never');
		if (job.last_outcome.outcome === 'ok') {
			// `ok` on the wire = dispatch completed. If any actionable
			// findings surfaced, we flip to "issues" (amber). If only
			// anomalies (informational), we flip to "notices" (blue).
			// Clean run stays green.
			if (actionableFindingCount(job) > 0) {
				return t('admin.jobs.outcome_issues', 'issues');
			}
			if (anomalyFindingCount(job) > 0) {
				return t('admin.jobs.outcome_notices', 'notices');
			}
			return t('admin.jobs.outcome_ok', 'ok');
		}
		return t('admin.jobs.outcome_err', 'err');
	}

	function outcomeClass(job: JobSummary): string {
		if (!job.last_outcome) return 'jobs-panel__pill jobs-panel__pill--neutral';
		if (job.last_outcome.outcome !== 'ok') {
			return 'jobs-panel__pill jobs-panel__pill--err';
		}
		if (actionableFindingCount(job) > 0) {
			return 'jobs-panel__pill jobs-panel__pill--paused';
		}
		if (anomalyFindingCount(job) > 0) {
			return 'jobs-panel__pill jobs-panel__pill--notice';
		}
		return 'jobs-panel__pill jobs-panel__pill--ok';
	}

	function statusClass(status: RunStatus): string {
		switch (status) {
			case 'Running':
				return 'jobs-panel__pill jobs-panel__pill--running';
			case 'Paused':
				return 'jobs-panel__pill jobs-panel__pill--paused';
			case 'CancelRequested':
				return 'jobs-panel__pill jobs-panel__pill--paused';
			case 'Completed':
				return 'jobs-panel__pill jobs-panel__pill--ok';
			case 'Failed':
				return 'jobs-panel__pill jobs-panel__pill--err';
			default:
				return 'jobs-panel__pill jobs-panel__pill--neutral';
		}
	}

	/** Coarse "3 min ago" / "2 h ago" — same shape as the parent
	 *  admin page's timeAgo(). Duplicated locally so the component
	 *  stays self-contained; extract if a third caller emerges. */
	function timeAgo(iso?: string): string {
		if (!iso) return t('admin.jobs.never', 'never');
		const then = new Date(iso).getTime();
		if (!Number.isFinite(then)) return '—';
		const secs = Math.round((Date.now() - then) / 1000);
		if (secs < 60) return t('admin.jobs.just_now', 'just now');
		const mins = Math.round(secs / 60);
		if (mins < 60) return t('admin.jobs.n_min_ago', { n: mins }, '{{n}} min ago');
		const hours = Math.round(mins / 60);
		if (hours < 24) return t('admin.jobs.n_h_ago', { n: hours }, '{{n}} h ago');
		const days = Math.round(hours / 24);
		return t('admin.jobs.n_d_ago', { n: days }, '{{n}} d ago');
	}

	function runDurationLabel(run: RunSummary): string {
		const start = new Date(run.started_at).getTime();
		const end = new Date(run.completed_at ?? run.last_progress_at).getTime();
		if (!Number.isFinite(start) || !Number.isFinite(end)) return '';
		const ms = Math.max(0, end - start);
		if (ms < 1000) return `${ms}ms`;
		if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
		const mins = Math.floor(ms / 60_000);
		const secs = Math.round((ms % 60_000) / 1000);
		return `${mins}m${secs}s`;
	}

	function statNumber(run: RunSummary, key: string): number | null {
		const v = run.stats?.[key];
		if (typeof v === 'number') return v;
		if (typeof v === 'string') {
			const n = Number(v);
			return Number.isFinite(n) ? n : null;
		}
		return null;
	}

	// Jobs that respect `?deep=true`:
	//   * `consistency_batch` — propagates deep to every child that
	//     understands it
	//   * `blobs_consistency` — deep mode re-reads + re-hashes every
	//     blob for silent bit-rot detection (severity `data_loss`).
	//     Full read of storage; can take hours on big installs — the
	//     "Run" (normal) button on the same row does the cheap
	//     existence probes only.
	function supportsDeep(name: string): boolean {
		return name === 'consistency_batch' || name === 'blobs_consistency';
	}

	function isRunning(job: JobSummary): boolean {
		return job.running;
	}

	function isRecoverable(job: JobSummary): boolean {
		// Backend authoritative source: the `recoverable` flag on
		// `JobSummary` is set at registration time by
		// `RecoverableAdapter::is_recoverable() -> true`. Every tenant
		// registered via `register_recoverable_job` flips it
		// automatically. No name-based allowlists — a new recoverable
		// tenant is expandable in the UI as soon as it's registered.
		return job.recoverable;
	}

	// Consistency batch shortcut — top button. Only shown when the
	// coordinator is registered (should always be true post-Slice 5,
	// but check defensively so the button doesn't appear on an old
	// deployment before this component is upgraded).
	// Coordinator registration flag — set imperatively in
	// `loadJobs` because `jobs` no longer contains the
	// `consistency_batch` row (filtered out to avoid duplicating the
	// top-bar action buttons).
	let hasBatch = $state(false);
</script>

<section class="jobs-panel">
	<header class="jobs-panel__header">
		<div class="jobs-panel__header-text">
			<h2>{t('admin.jobs.title', 'Jobs')}</h2>
			<p class="jobs-panel__hint">
				{t(
					'admin.jobs.hint',
					'Fires periodic + on-demand jobs. Consistency checks are safe to run at any time — they are read-only.'
				)}
			</p>
		</div>
		<div class="jobs-panel__header-actions">
			{#if hasBatch}
				<button
					class="jobs-panel__btn jobs-panel__btn--primary"
					disabled={busyKeys.has('trigger:consistency_batch')}
					onclick={() => onTrigger('consistency_batch')}
				>
					<Icon name="play" />
					{t('admin.jobs.run_all_consistency', 'Run all consistency checks')}
				</button>
				<button
					class="jobs-panel__btn"
					disabled={busyKeys.has('trigger:consistency_batch:deep')}
					title={t(
						'admin.jobs.run_deep_hint',
						'Also runs slow variants (blob re-hash, bitrot detection).'
					)}
					onclick={() => onTrigger('consistency_batch', { deep: true })}
				>
					<Icon name="play" />
					{t('admin.jobs.run_deep', 'Run deep')}
				</button>
			{/if}
			<!-- Purge is orthogonal to consistency — it works even
			     when the batch coordinator isn't registered, so it
			     lives outside the {#if hasBatch}. Opens a modal so
			     the operator picks a retention window with intent
			     (no accidental delete-all). -->
			<button
				class="jobs-panel__btn"
				title={t(
					'admin.jobs.purge_hint',
					'Delete completed and failed run history older than the chosen retention window. Findings drop with their parent runs. Non-terminal runs are always preserved.'
				)}
				onclick={openPurge}
				disabled={busyKeys.has('purge')}
			>
				<Icon name="trash-alt" />
				{t('admin.jobs.purge', 'Purge old runs')}
			</button>
		</div>
	</header>

	{#if loadError}
		<p class="jobs-panel__status jobs-panel__status--error">{loadError}</p>
	{:else if !jobs}
		<p class="jobs-panel__status">{t('common.loading', 'Loading…')}</p>
	{:else if jobs.length === 0}
		<p class="jobs-panel__status">{t('admin.jobs.none_registered', 'No jobs registered.')}</p>
	{:else}
		<table class="jobs-panel__table">
			<thead>
				<tr>
					<th class="jobs-panel__col-name">{t('admin.jobs.col_name', 'Name')}</th>
					<th>{t('admin.jobs.col_cadence', 'Cadence')}</th>
					<th>{t('admin.jobs.col_last_run', 'Last run')}</th>
					<th>{t('admin.jobs.col_outcome', 'Outcome')}</th>
					<th>{t('admin.jobs.col_state', 'State')}</th>
					<th class="jobs-panel__col-actions">{t('admin.jobs.col_actions', 'Actions')}</th>
				</tr>
			</thead>
			<tbody>
				{#each jobs as job (job.name)}
					{@const runs = runsByJob[job.name]}
					{@const runsErr = runsErrorByJob[job.name]}
					{@const runsLoading = runsLoadingByJob[job.name]}
					{@const expandedRun = expandedRunByJob[job.name] ?? null}
					{@const canExpand = isRecoverable(job)}
					<tr class="jobs-panel__row" class:jobs-panel__row--expanded={expandedJob === job.name}>
						<td>
							{#if canExpand}
								<button
									type="button"
									class="jobs-panel__expand"
									aria-expanded={expandedJob === job.name}
									onclick={() => toggleJob(job.name)}
								>
									<Icon name={expandedJob === job.name ? 'chevron-down' : 'chevron-right'} />
									<span class="jobs-panel__name">{job.name}</span>
								</button>
							{:else}
								<span class="jobs-panel__name jobs-panel__name--flat">{job.name}</span>
							{/if}
						</td>
						<td class="jobs-panel__muted">{cadenceLabel(job)}</td>
						<td class="jobs-panel__muted">{timeAgo(job.last_run_at)}</td>
						<td>
							<div class="jobs-panel__outcome-cell">
								<span class={outcomeClass(job)}>{outcomeLabel(job)}</span>
								{#if actionableFindingCount(job) > 0}
									{@const findings = actionableFindingCount(job)}
									<span
										class="jobs-panel__pill jobs-panel__pill--err"
										title={t(
											'admin.jobs.findings_present_tooltip',
											'Expand this run to see per-finding detail.'
										)}
									>
										{t('admin.jobs.n_findings', { n: findings }, '{{n}} findings')}
									</span>
								{/if}
								{#if anomalyFindingCount(job) > 0}
									{@const notices = anomalyFindingCount(job)}
									<span
										class="jobs-panel__pill jobs-panel__pill--notice"
										title={t(
											'admin.jobs.notices_present_tooltip',
											'Informational findings — no action required. Expand for detail.'
										)}
									>
										{t('admin.jobs.n_notices', { n: notices }, '{{n}} notices')}
									</span>
								{/if}
							</div>
						</td>
						<td>
							{#if isRunning(job)}
								<span class="jobs-panel__pill jobs-panel__pill--running">
									{t('admin.jobs.state_running', 'running')}
								</span>
							{:else}
								<span class="jobs-panel__muted">—</span>
							{/if}
						</td>
						<td class="jobs-panel__actions">
							<button
								class="jobs-panel__btn jobs-panel__btn--small"
								disabled={busyKeys.has(`trigger:${job.name}`)}
								onclick={() => onTrigger(job.name)}
							>
								{t('admin.jobs.run', 'Run')}
							</button>
							{#if supportsDeep(job.name)}
								<button
									class="jobs-panel__btn jobs-panel__btn--small"
									disabled={busyKeys.has(`trigger:${job.name}:deep`)}
									onclick={() => onTrigger(job.name, { deep: true })}
								>
									{t('admin.jobs.run_deep', 'Run deep')}
								</button>
							{/if}
							{#if isRunning(job) && canExpand}
								<button
									class="jobs-panel__btn jobs-panel__btn--small jobs-panel__btn--danger"
									disabled={busyKeys.has(`cancel:${job.name}`)}
									onclick={() => onCancel(job.name)}
								>
									{t('admin.jobs.cancel', 'Cancel')}
								</button>
							{/if}
						</td>
					</tr>

					{#if expandedJob === job.name}
						<tr class="jobs-panel__runs">
							<td colspan="6">
								<div class="jobs-panel__runs-inner">
									<div class="jobs-panel__runs-header">
										<h3>{t('admin.jobs.runs_title', 'Recent runs')}</h3>
										<button
											type="button"
											class="jobs-panel__link"
											onclick={() => loadRuns(job.name)}
											disabled={!!runsLoading}
										>
											<Icon name="repeat" />
											{t('admin.jobs.refresh', 'Refresh')}
										</button>
									</div>
									{#if runsErr}
										<p class="jobs-panel__status jobs-panel__status--error">{runsErr}</p>
									{:else if !runs}
										<p class="jobs-panel__status">{t('common.loading', 'Loading…')}</p>
									{:else if runs.length === 0}
										<p class="jobs-panel__status">
											{t('admin.jobs.no_runs', 'No runs yet.')}
										</p>
									{:else}
										<table class="jobs-panel__inner-table">
											<thead>
												<tr>
													<th></th>
													<th>{t('admin.jobs.col_started_at', 'Started')}</th>
													<th>{t('admin.jobs.col_status', 'Status')}</th>
													<th>{t('admin.jobs.col_duration', 'Duration')}</th>
													<th class="jobs-panel__col-progress">
														{t('admin.jobs.col_progress', 'Progress')}
													</th>
													<th>{t('admin.jobs.col_findings', 'Findings')}</th>
													<th class="jobs-panel__col-error">
														{t('admin.jobs.col_error', 'Error')}
													</th>
												</tr>
											</thead>
											<tbody>
												{#each runs as run (run.id)}
													{@const scanned = statNumber(run, 'scanned_count')}
													{@const findingCount = statNumber(run, 'finding_count')}
													{@const isRunExpanded = expandedRun === run.id}
													<tr>
														<td>
															<button
																type="button"
																class="jobs-panel__expand jobs-panel__expand--small"
																aria-expanded={isRunExpanded}
																onclick={() => toggleRun(job.name, run.id)}
															>
																<Icon name={isRunExpanded ? 'chevron-down' : 'chevron-right'} />
															</button>
														</td>
														<td class="jobs-panel__muted">
															{timeAgo(run.started_at)}
														</td>
														<td>
															<span class={statusClass(run.status)}>
																{run.status}
															</span>
														</td>
														<td class="jobs-panel__muted">
															{runDurationLabel(run)}
														</td>
														<td>
															{#if run.progress}
																{@const barPct = Math.min(
																	100,
																	Math.max(0, run.progress.fraction * 100)
																)}
																{@const pctLabel = (run.progress.fraction * 100).toFixed(1) + '%'}
																<div
																	class="jobs-panel__progress"
																	title={run.progress.kind === 'approximate'
																		? t(
																				'admin.jobs.progress_approx_tooltip',
																				{
																					pct: pctLabel,
																					scanned: run.progress.scanned,
																					total: run.progress.total
																				},
																				'{{pct}} ({{scanned}} / {{total}} — approximate, backend proxy)'
																			)
																		: t(
																				'admin.jobs.progress_exact_tooltip',
																				{
																					pct: pctLabel,
																					scanned: run.progress.scanned,
																					total: run.progress.total
																				},
																				'{{pct}} ({{scanned}} / {{total}})'
																			)}
																>
																	<div
																		class="jobs-panel__progress-bar"
																		class:jobs-panel__progress-bar--approx={run.progress.kind ===
																			'approximate'}
																	>
																		<div
																			class="jobs-panel__progress-fill"
																			style:width="{barPct}%"
																		></div>
																	</div>
																	<span class="jobs-panel__progress-label">
																		{run.progress.scanned}/{run.progress.total}
																	</span>
																</div>
															{:else if scanned != null}
																<span
																	class="jobs-panel__muted"
																	title={t(
																		'admin.jobs.progress_scanned_only_tooltip',
																		'No total available for this run (pre-progress-bar deploy or the tenant does not report a countable subject).'
																	)}
																>
																	{t(
																		'admin.jobs.progress_scanned_only',
																		{ n: scanned },
																		'{{n}} scanned'
																	)}
																</span>
															{:else}
																<span class="jobs-panel__muted">—</span>
															{/if}
														</td>
														<td class="jobs-panel__num">
															{#if findingCount && findingCount > 0}
																<span
																	class="jobs-panel__pill jobs-panel__pill--err"
																	title={t(
																		'admin.jobs.findings_present_tooltip',
																		'Expand this run to see per-finding detail.'
																	)}
																>
																	{findingCount}
																</span>
															{:else}
																<span class="jobs-panel__muted">0</span>
															{/if}
														</td>
														<td class="jobs-panel__err-cell">
															{#if run.error_message}
																<code>{run.error_message}</code>
															{:else}
																<span class="jobs-panel__muted">—</span>
															{/if}
														</td>
													</tr>
													{#if isRunExpanded}
														{@const findings = findingsByRun[run.id]}
														{@const findingsErr = findingsErrorByRun[run.id]}
														{@const fLoading = findingsLoadingByRun[run.id]}
														<tr class="jobs-panel__run-detail">
															<td colspan="7">
																<div class="jobs-panel__run-detail-inner">
																	<details class="jobs-panel__json">
																		<summary>
																			{t('admin.jobs.run_json', 'Run summary (JSON)')}
																		</summary>
																		<pre>{JSON.stringify(
																				{
																					id: run.id,
																					status: run.status,
																					started_at: run.started_at,
																					last_progress_at: run.last_progress_at,
																					completed_at: run.completed_at,
																					stats: run.stats,
																					params: run.params,
																					cursor_hex: run.cursor_hex,
																					error_message: run.error_message
																				},
																				null,
																				2
																			)}</pre>
																	</details>
																	<div class="jobs-panel__findings">
																		<div class="jobs-panel__findings-header">
																			<h4>
																				{t('admin.jobs.findings_title', 'Findings')}
																			</h4>
																			<button
																				type="button"
																				class="jobs-panel__link"
																				onclick={() => loadFindings(job.name, run.id)}
																				disabled={!!fLoading}
																			>
																				<Icon name="repeat" />
																				{t('admin.jobs.refresh', 'Refresh')}
																			</button>
																		</div>
																		{#if findingsErr}
																			<p class="jobs-panel__status jobs-panel__status--error">
																				{findingsErr}
																			</p>
																		{:else if !findings}
																			<p class="jobs-panel__status">
																				{t('common.loading', 'Loading…')}
																			</p>
																		{:else if findings.length === 0}
																			<p class="jobs-panel__status">
																				{t('admin.jobs.no_findings', 'No findings — clean run.')}
																			</p>
																		{:else}
																			<table
																				class="jobs-panel__inner-table jobs-panel__findings-table"
																			>
																				<thead>
																					<tr>
																						<th>
																							{t('admin.jobs.col_kind', 'Kind')}
																						</th>
																						<th>
																							{t('admin.jobs.col_severity', 'Severity')}
																						</th>
																						<th>
																							{t('admin.jobs.col_resource', 'Resource')}
																						</th>
																						<th>
																							{t('admin.jobs.col_detail', 'Detail')}
																						</th>
																					</tr>
																				</thead>
																				<tbody>
																					{#each findings as f (f.id)}
																						{@const detail = (f.detail ?? {}) as Record<
																							string,
																							unknown
																						>}
																						{@const label =
																							(detail.path as string | undefined) ??
																							(detail.name as string | undefined) ??
																							null}
																						<tr>
																							<td><code>{f.kind}</code></td>
																							<td>
																								<span
																									class="jobs-panel__pill jobs-panel__pill--{severityPillModifier(
																										f.severity
																									)}"
																								>
																									{f.severity}
																								</span>
																							</td>
																							<td>
																								{#if label}
																									<div class="jobs-panel__resource">
																										<code class="jobs-panel__resource-name"
																											>{label}</code
																										>
																										{#if f.resource_id}
																											<code class="jobs-panel__resource-uuid"
																												>{f.resource_id}</code
																											>
																										{/if}
																									</div>
																								{:else}
																									<code class="jobs-panel__muted"
																										>{f.resource_id ?? '—'}</code
																									>
																								{/if}
																							</td>
																							<td>
																								<code class="jobs-panel__detail"
																									>{JSON.stringify(f.detail)}</code
																								>
																							</td>
																						</tr>
																					{/each}
																				</tbody>
																			</table>
																		{/if}
																	</div>
																</div>
															</td>
														</tr>
													{/if}
												{/each}
											</tbody>
										</table>
									{/if}
								</div>
							</td>
						</tr>
					{/if}
				{/each}
			</tbody>
		</table>
	{/if}
</section>

<!-- Purge modal — pick a retention window, then confirm. -->
<Modal
	open={purgeModal !== null}
	title={t('admin.jobs.purge_title', 'Purge old job history')}
	onclose={closePurge}
>
	{#if purgeModal}
		<form
			class="jobs-panel__purge-form"
			onsubmit={(e) => {
				e.preventDefault();
				void confirmPurge();
			}}
		>
			<p>
				{t(
					'admin.jobs.purge_body',
					'Delete completed and failed run history older than the chosen number of days. Findings drop with their parent runs. Non-terminal runs (running, paused, cancel-requested) are always preserved.'
				)}
			</p>
			<label>
				<span>{t('admin.jobs.purge_days_label', 'Retention (days)')}</span>
				<input
					type="number"
					min="1"
					step="1"
					bind:value={purgeModal.days}
					disabled={busyKeys.has('purge')}
				/>
			</label>
			<div class="jobs-panel__purge-actions">
				<button
					type="button"
					class="jobs-panel__btn"
					onclick={closePurge}
					disabled={busyKeys.has('purge')}
				>
					{t('common.cancel', 'Cancel')}
				</button>
				<button
					type="submit"
					class="jobs-panel__btn jobs-panel__btn--danger"
					disabled={busyKeys.has('purge')}
				>
					<Icon name="trash-alt" />
					{t('admin.jobs.purge_confirm', 'Purge')}
				</button>
			</div>
		</form>
	{/if}
</Modal>

<style>
	.jobs-panel {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.jobs-panel__header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		flex-wrap: wrap;
	}

	.jobs-panel__header-text h2 {
		margin: 0 0 0.25rem;
	}

	.jobs-panel__hint {
		margin: 0;
		color: var(--color-text-muted);
		font-size: 0.9rem;
	}

	.jobs-panel__header-actions {
		display: flex;
		gap: 0.5rem;
	}

	.jobs-panel__status {
		padding: 0.75rem;
		background: var(--color-bg-subtle);
		border-radius: 4px;
		color: var(--color-text-muted);
	}

	.jobs-panel__status--error {
		background: var(--color-danger-bg);
		color: var(--color-danger-text);
	}

	.jobs-panel__table {
		width: 100%;
		border-collapse: collapse;
		background: var(--color-bg-surface);
	}

	.jobs-panel__table th,
	.jobs-panel__table td {
		text-align: left;
		padding: 0.6rem 0.75rem;
		border-bottom: 1px solid var(--color-border);
	}

	.jobs-panel__table th {
		font-weight: 600;
		font-size: 0.85rem;
		color: var(--color-text-muted);
		background: var(--color-bg-subtle);
	}

	.jobs-panel__col-name {
		width: 24%;
	}

	.jobs-panel__col-actions {
		width: 24%;
	}

	.jobs-panel__row--expanded {
		background: var(--color-bg-subtle);
	}

	.jobs-panel__row--expanded td {
		border-bottom-color: transparent;
	}

	.jobs-panel__expand {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		background: none;
		border: none;
		cursor: pointer;
		font: inherit;
		color: var(--color-text);
		padding: 0;
	}

	.jobs-panel__expand--small {
		padding: 0.25rem;
	}

	.jobs-panel__name {
		font-family: var(--font-mono, monospace);
	}

	.jobs-panel__name--flat {
		padding-left: 1.3rem; /* line up with the icon-affixed rows */
	}

	.jobs-panel__muted {
		color: var(--color-text-muted);
	}

	.jobs-panel__num {
		font-variant-numeric: tabular-nums;
		text-align: right;
	}

	.jobs-panel__actions {
		display: flex;
		gap: 0.4rem;
		flex-wrap: wrap;
	}

	.jobs-panel__btn {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.4rem 0.8rem;
		border: 1px solid var(--color-border);
		background: var(--color-bg-surface);
		border-radius: 4px;
		cursor: pointer;
		font: inherit;
		color: var(--color-text);
	}

	.jobs-panel__btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.jobs-panel__btn--primary {
		background: var(--color-primary);
		color: var(--color-on-accent);
		border-color: var(--color-primary);
	}

	.jobs-panel__btn--small {
		padding: 0.2rem 0.5rem;
		font-size: 0.85rem;
	}

	.jobs-panel__btn--danger {
		border-color: var(--color-danger-bg);
		color: var(--color-danger-text-alt);
	}

	.jobs-panel__pill {
		display: inline-block;
		padding: 0.1rem 0.5rem;
		border-radius: 999px;
		font-size: 0.8rem;
		font-weight: 500;
	}

	.jobs-panel__pill--ok {
		background: var(--color-success-bg);
		color: var(--color-success-text);
	}

	.jobs-panel__pill--err {
		background: var(--color-danger-lighter);
		color: var(--color-danger-text-alt);
	}

	.jobs-panel__pill--running {
		background: var(--color-info-bg);
		color: var(--color-info-text);
	}

	.jobs-panel__pill--paused {
		background: var(--color-warning-bg);
		color: var(--color-warning-text);
	}

	.jobs-panel__pill--notice {
		background: var(--color-info-bg);
		color: var(--color-info-text);
	}

	.jobs-panel__pill--neutral {
		background: var(--color-bg-subtle);
		color: var(--color-text-muted);
	}

	.jobs-panel__runs {
		background: var(--color-bg-subtle);
	}

	.jobs-panel__runs-inner {
		padding: 0.75rem 1rem;
	}

	.jobs-panel__runs-header,
	.jobs-panel__findings-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.5rem;
	}

	.jobs-panel__runs-header h3,
	.jobs-panel__findings-header h4 {
		margin: 0;
	}

	.jobs-panel__inner-table {
		width: 100%;
		border-collapse: collapse;
		background: var(--color-bg-surface);
		font-size: 0.9rem;
	}

	.jobs-panel__inner-table th,
	.jobs-panel__inner-table td {
		text-align: left;
		padding: 0.4rem 0.6rem;
		border-bottom: 1px solid var(--color-border);
	}

	.jobs-panel__inner-table th {
		background: var(--color-bg-subtle);
		font-weight: 600;
		color: var(--color-text-muted);
	}

	.jobs-panel__col-error {
		max-width: 24rem;
	}

	.jobs-panel__err-cell code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	.jobs-panel__run-detail {
		background: var(--color-bg-subtle);
	}

	.jobs-panel__run-detail-inner {
		padding: 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.jobs-panel__json summary {
		cursor: pointer;
		color: var(--color-text-muted);
		font-size: 0.85rem;
	}

	.jobs-panel__json pre {
		background: var(--color-bg-surface);
		padding: 0.5rem;
		border-radius: 4px;
		overflow-x: auto;
		font-size: 0.8rem;
		margin: 0.5rem 0 0;
	}

	.jobs-panel__findings h4 {
		margin: 0 0 0.4rem;
	}

	.jobs-panel__findings-table code {
		font-size: 0.8rem;
	}

	.jobs-panel__detail {
		font-size: 0.75rem;
		word-break: break-all;
	}

	.jobs-panel__resource {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.jobs-panel__resource-name {
		font-size: 0.85rem;
		color: var(--color-text);
		word-break: break-all;
	}

	.jobs-panel__resource-uuid {
		font-size: 0.7rem;
		color: var(--color-text-muted);
		word-break: break-all;
	}

	.jobs-panel__outcome-cell {
		display: flex;
		gap: 0.4rem;
		align-items: center;
		flex-wrap: wrap;
	}

	.jobs-panel__purge-form {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.jobs-panel__purge-form label {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.jobs-panel__purge-form input {
		max-width: 8rem;
	}

	.jobs-panel__purge-actions {
		display: flex;
		gap: 0.5rem;
		justify-content: flex-end;
	}

	.jobs-panel__link {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		background: none;
		border: none;
		color: var(--color-accent);
		cursor: pointer;
		font: inherit;
		font-size: 0.85rem;
		padding: 0;
	}

	.jobs-panel__link:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.jobs-panel__col-progress {
		min-width: 12rem;
	}

	.jobs-panel__progress {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.jobs-panel__progress-bar {
		flex: 1;
		height: 0.5rem;
		background: var(--color-bg-subtle);
		border-radius: 999px;
		overflow: hidden;
	}

	.jobs-panel__progress-fill {
		height: 100%;
		background: var(--color-accent);
		transition: width 0.25s ease-out;
	}

	.jobs-panel__progress-bar--approx .jobs-panel__progress-fill {
		background: repeating-linear-gradient(
			45deg,
			var(--color-accent),
			var(--color-accent) 6px,
			var(--color-accent-hover) 6px,
			var(--color-accent-hover) 12px
		);
	}

	.jobs-panel__progress-label {
		font-variant-numeric: tabular-nums;
		font-size: 0.8rem;
		color: var(--color-text-muted);
		white-space: nowrap;
	}
</style>