@vibesdotdev/runnable 0.0.0-stage → 1.0.0-rc.0

package/dist/svelte/components/MetricCard.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { MetricCardProps } from '../types.js';
+
+	let {
+		label,
+		unit = '',
+		values,
+		color = 'var(--runnable-color-accent, #14b8a6)',
+	}: MetricCardProps = $props();
+
+	let canvasEl: HTMLCanvasElement | undefined = $state();
+	const width = 120;
+	const height = 32;
+
+	const currentValue = $derived(
+		values.length > 0 ? values[values.length - 1] : 0,
+	);
+
+	const trend = $derived.by((): 'up' | 'down' | 'flat' => {
+		if (values.length < 3) return 'flat';
+		const recent = values.slice(-30);
+		const first = recent[0];
+		const last = recent[recent.length - 1];
+		const delta = last - first;
+		const range = Math.abs(first) + Math.abs(last) || 1;
+		if (Math.abs(delta / range) < 0.02) return 'flat';
+		return delta > 0 ? 'up' : 'down';
+	});
+
+	const trendLabel = $derived(
+		trend === 'up' ? 'UP' : trend === 'down' ? 'DN' : '--',
+	);
+
+	const trendColor = $derived(
+		trend === 'up'
+			? 'var(--runnable-color-live, #34d399)'
+			: trend === 'down'
+				? 'var(--runnable-color-danger, #ef4444)'
+				: 'var(--muted-foreground, #64748b)',
+	);
+
+	function drawSparkline(): void {
+		if (!canvasEl || values.length < 2) return;
+		const ctx = canvasEl.getContext('2d');
+		if (!ctx) return;
+
+		const dpr = window.devicePixelRatio || 1;
+		canvasEl.width = width * dpr;
+		canvasEl.height = height * dpr;
+		ctx.scale(dpr, dpr);
+		ctx.clearRect(0, 0, width, height);
+
+		const min = Math.min(...values);
+		const max = Math.max(...values);
+		const range = max - min || 1;
+		const step = width / (values.length - 1);
+
+		ctx.beginPath();
+		for (let i = 0; i < values.length; i++) {
+			const x = i * step;
+			const y = height - ((values[i] - min) / range) * (height - 4) - 2;
+			if (i === 0) ctx.moveTo(x, y);
+			else ctx.lineTo(x, y);
+		}
+		ctx.lineTo(width, height);
+		ctx.lineTo(0, height);
+		ctx.closePath();
+		ctx.fillStyle = color;
+		ctx.globalAlpha = 0.12;
+		ctx.fill();
+		ctx.globalAlpha = 1;
+
+		ctx.beginPath();
+		for (let i = 0; i < values.length; i++) {
+			const x = i * step;
+			const y = height - ((values[i] - min) / range) * (height - 4) - 2;
+			if (i === 0) ctx.moveTo(x, y);
+			else ctx.lineTo(x, y);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1.5;
+		ctx.lineJoin = 'round';
+		ctx.stroke();
+	}
+
+	$effect(() => {
+		drawSparkline();
+	});
+
+	onMount(() => {
+		drawSparkline();
+	});
+</script>
+
+<div class="runnable-metric-card">
+	<div class="rmc-top-bar" style:background={color}></div>
+	<div class="rmc-header">
+		<span class="rmc-label">{label}</span>
+		<span class="rmc-trend" style:color={trendColor}>{trendLabel}</span>
+	</div>
+	<span class="rmc-value" style:color={color}>
+		{currentValue.toLocaleString(undefined, {
+			maximumFractionDigits: 2,
+		})}
+		{#if unit}<span class="rmc-unit">{unit}</span>{/if}
+	</span>
+	<canvas
+		bind:this={canvasEl}
+		width={width}
+		height={height}
+		class="rmc-sparkline"
+	></canvas>
+</div>
+
+<style>
+	.runnable-metric-card {
+		position: relative;
+		padding: 10px 14px;
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		overflow: hidden;
+	}
+
+	.rmc-top-bar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 2px;
+	}
+
+	.rmc-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.rmc-label {
+		font-family: var(--font-brand);
+		font-size: 9px;
+		font-weight: 700;
+		letter-spacing: 0.12em;
+		color: var(--muted-foreground);
+		text-transform: uppercase;
+	}
+
+	.rmc-trend {
+		font-size: 10px;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.rmc-value {
+		font-family: var(--font-brand);
+		font-size: 1.25rem;
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.rmc-unit {
+		font-size: 0.7rem;
+		color: var(--muted-foreground);
+		margin-left: 2px;
+	}
+
+	.rmc-sparkline {
+		width: 120px;
+		height: 32px;
+		display: block;
+	}
+</style>

package/dist/svelte/components/MetricCard.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { MetricCardProps } from '../types.ts';
+declare const MetricCard: import("svelte").Component<MetricCardProps, {}, "">;
+type MetricCard = ReturnType<typeof MetricCard>;
+export default MetricCard;
+//# sourceMappingURL=MetricCard.svelte.d.ts.map

package/dist/svelte/components/MetricCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MetricCard.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAoHnD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/RunActivity.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import type { RunnableCatalogRun } from '../../schemas/runs.js';
+	import type { RunTreeReport } from './records/tree-projection.js';
+	import { isActiveRunStatus } from '../lib/status.js';
+	import { formatRunTime, runTitle } from '../lib/run-presentation.js';
+	let { run, compact = false, latest = false, related, onselect }: {
+		run: RunnableCatalogRun; compact?: boolean; latest?: boolean;
+		related?: RunTreeReport; onselect?: (id: string) => void;
+	} = $props();
+	// Observed child facts retain attribution; they never become this run's lifecycle activity.
+	const child = $derived(related && related.run.id !== run.id ? related : undefined);
+	const observation = $derived(latest && run.observation && (!run.activity || run.observation.ts >= run.activity.ts) ? run.observation : undefined);
+	const recorded = $derived(related?.run.id === run.id ? related : undefined);
+	const summaryOnly = $derived(!child && !observation && !run.activity && recorded !== undefined);
+	const report = $derived(child ?? observation ?? run.activity ?? recorded);
+	const label = $derived.by(() => {
+		if (child) return `Child · ${child.label}`;
+		if (observation) return observation.label ?? 'Last observed';
+		if (run.activity) return 'Last report';
+		return recorded?.label ?? 'Last report';
+	});
+</script>
+
+<span class="grid min-w-0 gap-0.5">
+	{#if latest && report}<span class="text-xs text-muted-foreground">{label} · <time datetime={new Date(report.ts).toISOString()}>{formatRunTime(report.ts)}</time></span>{/if}
+	{#if child && onselect}
+		<Button variant="ghost" tabindex={-1} class="h-auto min-w-0 justify-start whitespace-normal p-0 text-left text-xs font-normal text-muted-foreground" title={`From ${runTitle(child.run)}`} onclick={(event) => { event.stopPropagation(); onselect?.(child!.run.id); }} onkeydown={(event) => event.stopPropagation()}><span class={["min-w-0 break-words leading-relaxed", compact && "line-clamp-2"]}>{child.message} →</span></Button>
+	{:else if !summaryOnly && (report || !compact || isActiveRunStatus(run.status))}
+		<span class={["min-w-0 break-words text-xs leading-relaxed text-muted-foreground", compact && "line-clamp-2"]} title={report ? `${report.message} · Reported ${new Date(report.ts).toLocaleString()}` : 'No activity description reported'}>{report?.message ?? 'No activity description reported'}</span>
+	{/if}
+</span>

package/dist/svelte/components/RunActivity.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { RunnableCatalogRun } from '../../schemas/runs.ts';
+import type { RunTreeReport } from './records/tree-projection.ts';
+type $$ComponentProps = {
+    run: RunnableCatalogRun;
+    compact?: boolean;
+    latest?: boolean;
+    related?: RunTreeReport;
+    onselect?: (id: string) => void;
+};
+declare const RunActivity: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunActivity = ReturnType<typeof RunActivity>;
+export default RunActivity;
+//# sourceMappingURL=RunActivity.svelte.d.ts.map

package/dist/svelte/components/RunActivity.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunActivity.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunActivity.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAIjE,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,kBAAkB,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC7D,OAAO,CAAC,EAAE,aAAa,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD,CAAC;AAiCH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/RunBrowser.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { NativeSelect } from '@vibesdotdev/kit/components/ui/native-select';
+	import type { RunnableCatalogRun } from '../../schemas/runs.js';
+	import { matchesRun, type RunViewFilter } from '../lib/run-presentation.js';
+	import RunTree from './records/RunTree.svelte';
+	import { withRunAncestors } from './records/tree-projection.js';
+
+	interface Props {
+		runs: RunnableCatalogRun[];
+		selected: string | null;
+		loading?: boolean;
+		filter?: RunViewFilter;
+		onselect: (id: string) => void;
+	}
+
+	let { runs, selected, loading = false, filter = $bindable('all'), onselect }: Props = $props();
+	let search = $state('');
+	let type = $state('');
+	let host = $state('');
+	let period = $state('all');
+	let rootsOnly = $state(false);
+	const types = $derived([...new Set(runs.map(run => run.runnableType))].sort());
+	const hosts = $derived([...new Set(runs.flatMap(run => run.hostId ? [run.hostId] : []))].sort());
+	const filtered = $derived(runs.filter(run => matchesRun(run, filter, search)
+		&& (!type || run.runnableType === type)
+		&& (!host || run.hostId === host)
+		&& (period === 'all' || run.startedAt >= Date.now() - Number(period))));
+	const admittedIds = $derived(new Set(runs.map(run => run.id)));
+	const matching = $derived(rootsOnly
+		? filtered.filter(run => !run.parentRunId || run.parentRunId === run.id || !admittedIds.has(run.parentRunId))
+		: filtered);
+	const visible = $derived(withRunAncestors(runs, matching));
+	const filteredIds = $derived(new Set(matching.map(run => run.id)));
+	const hasFilters = $derived(Boolean(search || type || host || period !== 'all' || filter !== 'all' || rootsOnly));
+
+	function clearFilters() {
+		search = '';
+		type = '';
+		host = '';
+		period = 'all';
+		filter = 'all';
+		rootsOnly = false;
+	}
+</script>
+
+<section aria-label="Browse recorded runs" aria-busy={loading} class="flex h-full min-h-0 min-w-0 flex-col bg-muted/10">
+	<div class="grid shrink-0 gap-3 border-b border-border p-4">
+		<div class="flex items-center justify-between gap-2">
+			<h2 class="text-sm font-semibold">Run tree</h2>
+			<span class="text-xs tabular-nums text-muted-foreground">{matching.length} of {runs.length}</span>
+		</div>
+		<p class="text-xs leading-relaxed text-muted-foreground">Expand a run to follow its tasks. Active branches appear first.</p>
+		<Input type="search" aria-label="Search recorded runs" placeholder="Search names, IDs, outcomes…" bind:value={search} />
+		<div class="flex flex-wrap gap-2">
+			<NativeSelect aria-label="Filter runs" bind:value={filter}>
+				<option value="all">All outcomes</option>
+				<option value="active">In progress or unverified</option>
+				<option value="unverified">Status unverified</option>
+				<option value="attention">Issue history</option>
+				<option value="done">Goal achieved</option>
+			</NativeSelect>
+			<details class="min-w-0 text-sm">
+				<summary class="flex h-9 cursor-pointer items-center rounded-md px-2 text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring">More filters</summary>
+				<div class="flex flex-wrap gap-2 pt-3">
+					<NativeSelect aria-label="Run type" bind:value={type}><option value="">All types</option>{#each types as item (item)}<option value={item}>{item}</option>{/each}</NativeSelect>
+					{#if hosts.length > 0}<NativeSelect aria-label="Execution host" bind:value={host}><option value="">All hosts</option>{#each hosts as item (item)}<option value={item}>{item}</option>{/each}</NativeSelect>{/if}
+					<NativeSelect aria-label="Run start time" bind:value={period}>
+						<option value="all">All recorded time</option><option value="3600000">Last hour</option><option value="86400000">Last day</option><option value="604800000">Last week</option>
+					</NativeSelect>
+					<Button size="sm" variant="outline" aria-pressed={rootsOnly} onclick={() => rootsOnly = !rootsOnly}>Top-level only</Button>
+				</div>
+			</details>
+		</div>
+		{#if hasFilters}<div class="flex items-center justify-between gap-2 text-xs text-muted-foreground"><span>Filtering the current subscription</span><Button size="sm" variant="ghost" onclick={clearFilters}>Clear filters</Button></div>{/if}
+		{#if visible.length > matching.length}<p class="text-xs text-muted-foreground">{visible.length - matching.length} parent runs included for context.</p>{/if}
+		{#if selected && !filteredIds.has(selected)}<p class="text-xs text-muted-foreground">Selected run is outside these filters.</p>{/if}
+	</div>
+	<div class="min-h-0 flex-1 overflow-y-auto p-2">
+		{#if loading && runs.length === 0}<p role="status" class="p-6 text-sm text-muted-foreground">Waiting for the first recorded snapshot.</p>
+		{:else if visible.length === 0 && runs.length > 0}
+			<div class="grid gap-3 p-6 text-sm"><p class="font-medium">No matching runs</p><p class="text-muted-foreground">Try a name, part of an ID, or a different outcome.</p><Button variant="outline" onclick={clearFilters}>Clear filters</Button></div>
+		{:else}<RunTree runs={visible} {selected} {onselect} matchedIds={hasFilters ? filteredIds : undefined} />{/if}
+	</div>
+</section>

package/dist/svelte/components/RunBrowser.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { RunnableCatalogRun } from '../../schemas/runs.ts';
+import { type RunViewFilter } from '../lib/run-presentation.ts';
+interface Props {
+    runs: RunnableCatalogRun[];
+    selected: string | null;
+    loading?: boolean;
+    filter?: RunViewFilter;
+    onselect: (id: string) => void;
+}
+declare const RunBrowser: import("svelte").Component<Props, {}, "filter">;
+type RunBrowser = ReturnType<typeof RunBrowser>;
+export default RunBrowser;
+//# sourceMappingURL=RunBrowser.svelte.d.ts.map

package/dist/svelte/components/RunBrowser.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunBrowser.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAK3E,UAAU,KAAK;IACd,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAmFF,QAAA,MAAM,UAAU,iDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/RunComparison.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { CodeViewer } from '@vibesdotdev/kit/components/code';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import type { RunnableCatalogRun, RunnableSnapshot } from '../../schemas/runs.js';
+	import type { RunsSource } from '../runs.store.svelte.js';
+	import { previousSuccessfulRun, inputChanges, metricChanges, formatEvidenceValue } from '../lib/run-investigation.js';
+	import { formatDuration, formatRunTime, outcomeLabel, shortRunId } from '../lib/run-presentation.js';
+	import RunEvidence from './RunEvidence.svelte';
+
+	let { snapshot, candidates, source, onselect }: {
+		snapshot: RunnableSnapshot; candidates: readonly RunnableCatalogRun[];
+		source: RunsSource; onselect: (id: string) => void;
+	} = $props();
+	const previous = $derived(previousSuccessfulRun(snapshot.run, candidates));
+	let baseline = $state.raw<RunnableSnapshot | null>(null);
+	let error = $state.raw<CapabilityError | null>(null);
+	let loading = $state(false);
+	let revision = $state(0);
+	let expanded = $state(false);
+	const inputs = $derived(baseline ? inputChanges(baseline, snapshot) : []);
+	const metrics = $derived(baseline ? metricChanges(baseline, snapshot) : []);
+
+	$effect(() => {
+		const id = previous?.id;
+		void revision;
+		baseline = null;
+		error = null;
+		expanded = false;
+		loading = !!id;
+		if (!id) return;
+		let active = true;
+		let stop: (() => Promise<void>) | undefined;
+		void settle(async () => {
+			const release = await source.watch({ id }, delivered => {
+				if (!active) return;
+				baseline = delivered.runs.find(row => row.run.id === id) ?? null;
+				loading = false;
+				if (!baseline) error = new CapabilityError('The previous run is no longer available to this viewer.', 'NOT_FOUND');
+			}, failure => {
+				if (active) { error = new CapabilityError(failure.message, 'UNAVAILABLE', { reason: failure.reason, retryable: failure.retryable }); loading = false; }
+			});
+			if (active) stop = release;
+			else await release();
+		}).then(result => {
+			if (active && !result.ok) { error = CapabilityError.from(CaughtFailureSchema.parse(result.cause)); loading = false; }
+		});
+		return () => {
+			active = false;
+			if (stop) void settle(stop).then(result => {
+				if (!result.ok) error = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+			});
+		};
+	});
+
+	function duration(run: RunnableCatalogRun) {
+		return run.endedAt == null ? 'In progress' : formatDuration(run.endedAt - run.startedAt);
+	}
+</script>
+
+<section aria-label="Compare with previous successful run" class="grid min-w-0 gap-5">
+	<div class="grid gap-1"><h3 class="text-sm font-semibold">Compared with the previous success</h3><p class="text-xs leading-relaxed text-muted-foreground">Same runnable, scope and host; finished successfully before this run began. Inputs may differ. Comparison uses runs visible in the current subscription.</p></div>
+	{#if !previous}<p class="rounded-lg border border-dashed border-border p-5 text-sm text-muted-foreground">No earlier successful run with the same identity is visible in this subscription.</p>
+	{:else}
+		<div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border p-3"><div class="grid min-w-0 gap-1 text-xs"><span class="font-medium">Previous success · {formatRunTime(previous.startedAt)}</span><code class="break-all text-muted-foreground" title={previous.id}>{shortRunId(previous.id)}</code></div><Button variant="outline" size="sm" onclick={() => onselect(previous.id)}>Inspect previous run →</Button></div>
+		{#if loading}<p role="status" class="text-sm text-muted-foreground">Loading previous run evidence…</p>{/if}
+		{#if error}<Alert variant="destructive"><AlertTitle>Comparison unavailable</AlertTitle><AlertDescription>{error.message}<div class="mt-2"><Button size="sm" variant="outline" onclick={() => revision++}>Retry comparison</Button></div></AlertDescription></Alert>{/if}
+		{#if baseline && !error}
+			<div class="overflow-x-auto rounded-lg border border-border"><table class="w-full text-left text-sm"><thead class="bg-muted/30 text-xs text-muted-foreground"><tr><th scope="col" class="p-3">Measure</th><th scope="col" class="p-3">Previous success</th><th scope="col" class="p-3">This run</th></tr></thead><tbody class="divide-y divide-border"><tr><th scope="row" class="p-3 font-medium">Outcome</th><td class="p-3">{outcomeLabel(baseline.run)}</td><td class="p-3">{outcomeLabel(snapshot.run)}</td></tr><tr><th scope="row" class="p-3 font-medium">Duration</th><td class="p-3 tabular-nums">{duration(baseline.run)}</td><td class="p-3 tabular-nums">{duration(snapshot.run)}</td></tr><tr><th scope="row" class="p-3 font-medium">Artifacts</th><td class="p-3 tabular-nums">{baseline.artifacts.length}</td><td class="p-3 tabular-nums">{snapshot.artifacts.length}</td></tr><tr><th scope="row" class="p-3 font-medium">Child executions</th><td class="p-3 tabular-nums">{baseline.children.length}</td><td class="p-3 tabular-nums">{snapshot.children.length}</td></tr></tbody></table></div>
+			{#if metrics.length > 0}<section class="grid min-w-0 gap-2"><h4 class="text-sm font-medium">Latest recorded metrics</h4><p class="text-xs text-muted-foreground">Matched by name and dimensions. A delta describes change; its meaning depends on the metric.</p><div class="overflow-x-auto rounded-lg border border-border"><table class="w-full text-left text-xs"><thead class="bg-muted/30 text-muted-foreground"><tr><th class="p-3" scope="col">Metric</th><th class="p-3" scope="col">Previous</th><th class="p-3" scope="col">Current</th><th class="p-3" scope="col">Change</th></tr></thead><tbody class="divide-y divide-border">{#each metrics as metric (metric.label)}<tr><th class="max-w-64 break-words p-3 font-medium" scope="row">{metric.label}</th><td class="p-3 tabular-nums">{metric.before ?? 'Not recorded'}</td><td class="p-3 tabular-nums">{metric.after ?? 'Not recorded'}</td><td class="p-3 tabular-nums">{metric.before === undefined || metric.after === undefined ? '—' : new Intl.NumberFormat(undefined, { maximumSignificantDigits: 6, signDisplay: 'exceptZero' }).format(metric.after - metric.before)}</td></tr>{/each}</tbody></table></div></section>{/if}
+			<section class="grid min-w-0 gap-3"><h4 class="text-sm font-medium">Input changes <span class="text-muted-foreground">{inputs.length}</span></h4>{#each inputs as change (change.key)}<div class="grid min-w-0 gap-3 rounded-lg border border-border p-3"><code class="break-all text-xs font-medium">{change.key}</code><div class="grid min-w-0 gap-3 lg:grid-cols-2"><div class="grid min-w-0 gap-2"><p class="text-xs text-muted-foreground">Previous success</p><CodeViewer code={formatEvidenceValue(change.before)} language="json" minHeight="0" maxHeight="12rem" /></div><div class="grid min-w-0 gap-2"><p class="text-xs text-muted-foreground">This run</p><CodeViewer code={formatEvidenceValue(change.after)} language="json" minHeight="0" maxHeight="12rem" /></div></div></div>{:else}<p class="text-sm text-muted-foreground">The recorded inputs are identical.</p>{/each}</section>
+			<details open={expanded} ontoggle={event => expanded = event.currentTarget.open}><summary class="cursor-pointer text-sm font-medium focus-visible:outline-2 focus-visible:outline-ring">Compare complete outcome evidence</summary>{#if expanded}<div class="mt-3 grid min-w-0 gap-4"><RunEvidence title="Previous successful outcome" value={baseline.run.outcome} /><RunEvidence title="Current outcome" value={snapshot.run.outcome} /></div>{/if}</details>
+		{/if}
+	{/if}
+</section>

package/dist/svelte/components/RunComparison.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { RunnableCatalogRun, RunnableSnapshot } from '../../schemas/runs.ts';
+import type { RunsSource } from '../runs.store.svelte.ts';
+type $$ComponentProps = {
+    snapshot: RunnableSnapshot;
+    candidates: readonly RunnableCatalogRun[];
+    source: RunsSource;
+    onselect: (id: string) => void;
+};
+declare const RunComparison: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunComparison = ReturnType<typeof RunComparison>;
+export default RunComparison;
+//# sourceMappingURL=RunComparison.svelte.d.ts.map

package/dist/svelte/components/RunComparison.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunComparison.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunComparison.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKzD,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,gBAAgB,CAAC;IAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACtE,MAAM,EAAE,UAAU,CAAC;IAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AA6EH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/RunContext.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { runTreeTitle } from '../lib/run-presentation.js';
+	import type { RunnableCatalogRun } from '../../schemas/runs.js';
+	let { run, parent, compact = false }: { run: RunnableCatalogRun; parent?: RunnableCatalogRun; compact?: boolean } = $props();
+	const context = $derived(run.context);
+	const inherited = $derived(parent?.context);
+	const targetLabel = $derived(context?.target?.split(/[\\/]/).filter(Boolean).at(-1));
+	const title = $derived(runTreeTitle(run, parent));
+	const ownTarget = $derived(context?.target && context.target !== inherited?.target && context.target !== title);
+	const ownPaths = $derived(context?.paths?.join('\n') !== inherited?.paths?.join('\n')
+		? (context?.paths ?? []).filter(path => path !== title && path !== context?.target)
+		: []);
+	const contextTitle = $derived([context?.target, ...(context?.paths ?? [])].filter(Boolean).join('\n'));
+</script>
+
+{#if compact}
+	{#if ownTarget || ownPaths.length}
+		<span class="block truncate text-xs text-muted-foreground" title={contextTitle}>
+			{#if ownTarget}<span class="font-medium">On {targetLabel ?? context?.target}</span>{#if ownPaths.length} · {/if}{/if}
+			{#if ownPaths.length}{ownPaths[0]}{#if ownPaths.length > 1} · +{ownPaths.length - 1} {ownPaths.length === 2 ? 'path' : 'paths'}{/if}{/if}
+		</span>
+	{/if}
+{:else}
+	<dl class="grid min-w-0 gap-3 text-sm" aria-label="Task context">
+		<div class="grid gap-1"><dt class="text-xs font-medium text-muted-foreground">What is being worked on</dt><dd class="break-words leading-relaxed">{context?.subject ?? context?.title ?? 'The owner has not recorded a task subject.'}</dd></div>
+		<div class="grid gap-1"><dt class="text-xs font-medium text-muted-foreground">Target workspace</dt><dd class="break-all font-mono text-xs leading-relaxed">{context?.target ?? 'Not recorded'}</dd></div>
+		{#if context?.paths?.length}<div><dt class="sr-only">Affected paths</dt><dd><details><summary class="cursor-pointer text-xs font-medium text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring">Affected paths · {context.paths.length}{context.paths.length === 8 ? ' shown' : ''}</summary><div class="mt-2 grid gap-1">{#each context.paths as path}<code class="break-all text-xs">{path}</code>{/each}</div></details></dd></div>{/if}
+	</dl>
+{/if}

package/dist/svelte/components/RunContext.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { RunnableCatalogRun } from '../../schemas/runs.ts';
+type $$ComponentProps = {
+    run: RunnableCatalogRun;
+    parent?: RunnableCatalogRun;
+    compact?: boolean;
+};
+declare const RunContext: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunContext = ReturnType<typeof RunContext>;
+export default RunContext;
+//# sourceMappingURL=RunContext.svelte.d.ts.map

package/dist/svelte/components/RunContext.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunContext.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,KAAK,gBAAgB,GAAI;IAAE,GAAG,EAAE,kBAAkB,CAAC;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAiCtG,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/RunEvidence.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { CapabilityError, CaughtFailureSchema } from '@vibesdotdev/kernel';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+
+	interface Props {
+		title: string;
+		value: unknown;
+	}
+	let { title, value }: Props = $props();
+	const code = $derived(JSON.stringify(value, null, 2));
+	const loadEditor = () => import('@vibesdotdev/kit/components/code/CodeEditorCodemirror.svelte');
+</script>
+
+<section class="min-w-0 overflow-hidden rounded-md border border-border bg-background" aria-label={title}>
+	<header class="flex items-center justify-between gap-3 border-b border-border bg-muted/30 px-3 py-2 text-xs">
+		<span class="font-medium">{title}</span><span class="text-muted-foreground">JSON · Read only</span>
+	</header>
+	{#if code === undefined}
+		<p class="p-4 text-sm text-muted-foreground">No value was recorded.</p>
+	{:else}
+		{#await loadEditor()}
+			<p role="status" class="p-4 text-sm text-muted-foreground">Opening recorded JSON.</p>
+		{:then editor}
+			<div class="h-96 min-w-0 overflow-hidden"><editor.default {code} language="json" readOnly canCopy /></div>
+		{:catch cause}
+			{@const failure = CapabilityError.from(CaughtFailureSchema.parse(cause))}
+			<Alert variant="destructive"><AlertTitle>Recorded JSON could not be displayed</AlertTitle><AlertDescription>{failure.message} <code>{failure.code}</code></AlertDescription></Alert>
+		{/await}
+	{/if}
+</section>

package/dist/svelte/components/RunEvidence.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    title: string;
+    value: unknown;
+}
+declare const RunEvidence: import("svelte").Component<Props, {}, "">;
+type RunEvidence = ReturnType<typeof RunEvidence>;
+export default RunEvidence;
+//# sourceMappingURL=RunEvidence.svelte.d.ts.map

package/dist/svelte/components/RunEvidence.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunEvidence.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunEvidence.svelte.ts"],"names":[],"mappings":"AAOC,UAAU,KAAK;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CACf;AA8BF,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}