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

package/dist/svelte/components/TypePicker.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import type { RunnableTypeSummary } from '../types.js';
+	import { getRunnableTypeAccent } from '../lib/status.js';
+
+	interface Props {
+		types: RunnableTypeSummary[];
+		selected: string | null;
+		jsonMode?: boolean;
+		onselect: (id: string) => void;
+		onjsonchange: (json: string) => void;
+	}
+
+	let {
+		types,
+		selected,
+		jsonMode = false,
+		onselect,
+		onjsonchange,
+	}: Props = $props();
+
+	let jsonValue = $state('');
+	let showJson = $state(false);
+	const standardCategories = ['train', 'benchmark', 'sweep', 'eval', 'test', 'research'];
+	const standardTypes = $derived(
+		types.filter((type) => standardCategories.includes(type.category)),
+	);
+	const pluginTypes = $derived(
+		types.filter((type) => !standardCategories.includes(type.category)),
+	);
+	const categoryIcons = {
+		train: 'lucide:brain',
+		benchmark: 'lucide:gauge',
+		sweep: 'lucide:crosshair',
+		eval: 'lucide:flask-conical',
+		test: 'lucide:zap',
+		research: 'lucide:search',
+	} satisfies Record<string, string>;
+
+	function getCategoryIcon(category: string): string {
+		if (category in categoryIcons) {
+			// SAFETY: category was verified to be a known key of categoryIcons via the in operator.
+			return categoryIcons[category as keyof typeof categoryIcons];
+		}
+		return 'lucide:rocket';
+	}
+
+	$effect(() => {
+		if (jsonMode) showJson = true;
+	});
+
+	function handleJsonInput(event: Event): void {
+		// SAFETY: Target of the input event on textarea is guaranteed to be HTMLTextAreaElement.
+		const value = (event.target as HTMLTextAreaElement).value;
+		jsonValue = value;
+		onjsonchange(value);
+	}
+</script>
+
+<div class="runnable-type-picker">
+	<div class="rtp-section">
+		<h3 class="rtp-section-label">Standard Types</h3>
+		<div class="rtp-type-grid">
+			{#each standardTypes as type (type.id)}
+				{@const icon = getCategoryIcon(type.category)}
+				{@const color = getRunnableTypeAccent(type.category)}
+				<button
+					type="button"
+					class="rtp-type-card"
+					class:selected={selected === type.id}
+					style="--card-accent: {color}"
+					onclick={() => onselect(type.id)}
+				>
+					<div class="rtp-card-icon"><Icon {icon} class="h-6 w-6" /></div>
+					<div class="rtp-card-info">
+						<span class="rtp-card-name">{type.name}</span>
+						<span class="rtp-card-desc">{type.description}</span>
+					</div>
+					{#if selected === type.id}
+						<div class="rtp-check" aria-label="Selected">
+							<Icon icon="lucide:check" class="h-3 w-3" />
+						</div>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	{#if pluginTypes.length > 0}
+		<div class="rtp-section">
+			<h3 class="rtp-section-label">Plugin Types</h3>
+			<div class="rtp-type-grid">
+				{#each pluginTypes as type (type.id)}
+					{@const color = getRunnableTypeAccent(type.category)}
+					<button
+						type="button"
+						class="rtp-type-card"
+						class:selected={selected === type.id}
+						style="--card-accent: {color}"
+						onclick={() => onselect(type.id)}
+					>
+						<div class="rtp-card-icon"><Icon icon="lucide:loader" class="h-6 w-6" /></div>
+						<div class="rtp-card-info">
+							<span class="rtp-card-name">{type.name}</span>
+							<span class="rtp-card-desc">{type.description}</span>
+						</div>
+						{#if selected === type.id}
+							<div class="rtp-check" aria-label="Selected">
+								<Icon icon="lucide:check" class="h-3 w-3" />
+							</div>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div class="rtp-section">
+		<h3 class="rtp-section-label">Custom JSON</h3>
+		{#if !showJson}
+			<button type="button" class="rtp-json-toggle" onclick={() => (showJson = true)}>
+				<Icon icon="lucide:terminal" class="h-4 w-4" />
+				Start from JSON
+			</button>
+		{:else}
+			<div class="rtp-json-terminal">
+				<div class="rtp-terminal-header">
+					<span class="rtp-terminal-dot"></span>
+					<span class="rtp-terminal-label">JSON INPUT</span>
+				</div>
+				<div class="rtp-terminal-body">
+					<span class="rtp-terminal-prompt">&gt;</span>
+					<textarea
+						class="rtp-terminal-input"
+						value={jsonValue}
+						oninput={handleJsonInput}
+						placeholder={'{"runnableType": "...", "config": {}}'}
+						rows="6"
+					></textarea>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.runnable-type-picker {
+		display: flex;
+		flex-direction: column;
+		gap: 28px;
+	}
+
+	.rtp-section {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.rtp-section-label {
+		font-family: var(--font-brand);
+		font-size: 10px;
+		font-weight: 700;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: var(--muted-foreground);
+	}
+
+	.rtp-type-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+		gap: 10px;
+	}
+
+	.rtp-type-card {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		gap: 12px;
+		padding: 14px;
+		background: var(--card);
+		border: 1px solid var(--border);
+		border-radius: 8px;
+		cursor: pointer;
+		text-align: left;
+		transition:
+			transform 0.15s,
+			border-color 0.15s,
+			background 0.15s,
+			box-shadow 0.15s;
+	}
+
+	.rtp-type-card:hover {
+		transform: translateY(-2px);
+		border-color: color-mix(in srgb, var(--card-accent) 50%, var(--border));
+		background: color-mix(in srgb, var(--card-accent) 6%, var(--card));
+		box-shadow: 0 4px 12px color-mix(in srgb, var(--card-accent) 10%, transparent);
+	}
+
+	.rtp-type-card.selected {
+		border-color: var(--card-accent);
+		background: color-mix(in srgb, var(--card-accent) 10%, var(--card));
+		box-shadow:
+			0 0 0 2px color-mix(in srgb, var(--card-accent) 20%, transparent),
+			0 0 16px color-mix(in srgb, var(--card-accent) 12%, transparent);
+	}
+
+	.rtp-card-icon {
+		flex-shrink: 0;
+		color: var(--muted-foreground);
+		transition: color 0.15s;
+	}
+
+	.rtp-type-card:hover .rtp-card-icon,
+	.rtp-type-card.selected .rtp-card-icon {
+		color: var(--card-accent);
+	}
+
+	.rtp-card-info {
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		min-width: 0;
+	}
+
+	.rtp-card-name {
+		font-family: var(--font-brand);
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--foreground);
+	}
+
+	.rtp-card-desc {
+		font-size: 11px;
+		color: var(--muted-foreground);
+		line-height: 1.4;
+	}
+
+	.rtp-check {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		width: 22px;
+		height: 18px;
+		border-radius: 999px;
+		background: var(--card-accent);
+		color: #000;
+		font-size: 9px;
+		font-weight: 700;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.rtp-json-toggle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 10px 14px;
+		background: var(--card);
+		border: 1px dashed var(--border);
+		border-radius: 8px;
+		color: var(--muted-foreground);
+		font-size: 12px;
+		cursor: pointer;
+		transition:
+			border-color 0.15s,
+			color 0.15s;
+	}
+
+	.rtp-json-toggle:hover {
+		border-color: var(--runnable-color-accent, #14b8a6);
+		color: var(--foreground);
+	}
+
+	.rtp-json-terminal {
+		background: var(--runnable-terminal-background, color-mix(in srgb, #000 90%, var(--card)));
+		border: 1px solid color-mix(in srgb, var(--runnable-color-accent, #14b8a6) 25%, var(--border));
+		border-radius: 8px;
+		overflow: hidden;
+	}
+
+	.rtp-terminal-header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 6px 12px;
+		background: color-mix(in srgb, #000 95%, var(--card));
+		border-bottom: 1px solid color-mix(in srgb, var(--runnable-color-accent, #14b8a6) 15%, transparent);
+	}
+
+	.rtp-terminal-dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--runnable-color-live, #34d399);
+	}
+
+	.rtp-terminal-label {
+		font-family: var(--font-brand);
+		font-size: 9px;
+		font-weight: 700;
+		letter-spacing: 0.15em;
+		color: var(--runnable-color-accent, #14b8a6);
+	}
+
+	.rtp-terminal-body {
+		display: flex;
+		gap: 8px;
+		padding: 12px;
+	}
+
+	.rtp-terminal-prompt {
+		font-family: var(--font-mono);
+		font-size: 13px;
+		color: var(--runnable-color-live, #34d399);
+		font-weight: 700;
+		user-select: none;
+		padding-top: 2px;
+	}
+
+	.rtp-terminal-input {
+		flex: 1;
+		background: transparent;
+		border: none;
+		outline: none;
+		color: var(--runnable-color-live, #34d399);
+		font-family: var(--font-mono);
+		font-size: 12px;
+		line-height: 1.5;
+		resize: vertical;
+		min-height: 60px;
+	}
+
+	.rtp-terminal-input::placeholder {
+		color: color-mix(in srgb, var(--runnable-color-live, #34d399) 30%, transparent);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { RunnableTypeSummary } from '../types.ts';
+interface Props {
+    types: RunnableTypeSummary[];
+    selected: string | null;
+    jsonMode?: boolean;
+    onselect: (id: string) => void;
+    onjsonchange: (json: string) => void;
+}
+declare const TypePicker: import("svelte").Component<Props, {}, "">;
+type TypePicker = ReturnType<typeof TypePicker>;
+export default TypePicker;
+//# sourceMappingURL=TypePicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/TypePicker.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAItD,UAAU,KAAK;IACd,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AA6HF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/records/RunDetail.svelte

@@ -0,0 +1,214 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { RunnableControlInput, RunnableControlAction } from '../../../schemas/contracts/index.js';
+	import type { RunnableSnapshot } from '../../../schemas/runs.js';
+	import type { RunsStore } from '../../runs.store.svelte.js';
+	import type { RunPanelsProps } from '../RunPanels.svelte';
+
+	export interface RunDetailProps {
+		snapshot: RunnableSnapshot;
+		store?: RunsStore;
+		control?: (input: RunnableControlInput) => Promise<boolean>;
+		visualizations?: RunPanelsProps['visualizations'];
+		sections?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+		requests?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+		thread?: Snippet<[RunnableSnapshot, number | null]>;
+		onselect?: (runId: string) => void;
+		origin?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Progress } from '@vibesdotdev/kit/components/ui/progress';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import { Tabs, TabsList, TabsTrigger, TabsContent } from '@vibesdotdev/kit/components/ui/tabs';
+	import RunEvidence from '../RunEvidence.svelte';
+	import RunActivity from '../RunActivity.svelte';
+	import RunSummary from '../RunSummary.svelte';
+	import RunContext from '../RunContext.svelte';
+	import RunObservation from '../RunObservation.svelte';
+	import RunComparison from '../RunComparison.svelte';
+	import type { RunEvidenceTarget } from '../../lib/run-investigation.js';
+	import { tick } from 'svelte';
+	import { runPanelSource } from '../../../client/tracking/panel-bindings.js';
+	import { isActiveRunStatus } from '../../lib/status.js';
+	import ArtifactList from '../ArtifactList.svelte';
+	import LogViewer from '../LogViewer.svelte';
+	import MetricCard from '../MetricCard.svelte';
+	import RunPanels from '../RunPanels.svelte';
+	import RunStatusBadge from '../RunStatusBadge.svelte';
+	import RunOutcomeBadge from '../RunOutcomeBadge.svelte';
+	import RunTree from './RunTree.svelte';
+	import { runAncestors } from './tree-projection.js';
+	import { formatDuration, formatRunTime, shortRunId, runTitle } from '../../lib/run-presentation.js';
+
+	let { snapshot, store, control, visualizations, sections, requests, thread, onselect, origin }: RunDetailProps = $props();
+	const run = $derived(snapshot.run);
+	const runId = $derived(run.id);
+	const source = $derived(runPanelSource(snapshot));
+	const send = $derived(control ?? (store ? (input: RunnableControlInput) => store.control(input) : undefined));
+	const load = $derived(visualizations ?? (store ? (query: Parameters<RunsStore['visualizations']>[0]) => store.visualizations(query) : undefined));
+	const related = $derived([run, ...snapshot.children, ...(store?.listRows.flatMap(row => [row.run, ...row.children]) ?? [])]);
+	const enclosing = $derived.by(() => {
+		const ancestors = runAncestors(related, [runId]);
+		return related.filter(candidate => ancestors.has(candidate.id) && candidate.activity)
+			.sort((left, right) => right.activity!.ts - left.activity!.ts)[0];
+	});
+	const comparisonCandidates = $derived(store?.listRows.flatMap(row => [row.run, ...row.children]) ?? []);
+	const actions: readonly RunnableControlAction[] = $derived(run.status === 'paused' ? ['resume', 'stop'] : run.status === 'stopping' ? [] : ['pause', 'stop']);
+	let pending = $state<RunnableControlAction | null>(null);
+	let failure = $state.raw<CapabilityError | null>(null);
+	let copied = $state(false);
+	let activeTab = $state('overview');
+	let focusedLog = $state<number | null>(null);
+	let article: HTMLElement | undefined = $state();
+	let expanded = $state<Record<string, boolean>>({});
+	let generation = 0;
+
+	$effect(() => {
+		void runId;
+		generation += 1;
+		pending = null;
+		failure = null;
+		copied = false;
+		activeTab = 'overview';
+		focusedLog = null;
+		expanded = {};
+		return () => { generation += 1; };
+	});
+
+	async function openEvidence(target: RunEvidenceTarget) {
+		if (target.kind === 'log') {
+			focusedLog = target.index;
+			activeTab = 'logs';
+		} else if (target.kind === 'artifact') activeTab = 'artifacts';
+		else {
+			expanded[target.kind] = true;
+			activeTab = 'evidence';
+		}
+		await tick();
+		const element = target.kind === 'log'
+			? article?.querySelector<HTMLElement>(`[data-log-index="${target.index}"]`)
+			: target.kind === 'artifact' ? article?.querySelector<HTMLElement>(`[data-artifact-id="${CSS.escape(target.id)}"]`)
+			: article?.querySelector<HTMLElement>(`[data-evidence="${target.kind}"]`);
+		element?.scrollIntoView({ block: 'nearest' });
+		element?.focus({ preventScroll: true });
+	}
+
+	function select(id: string) {
+		if (onselect) onselect(id);
+		else store?.select(id);
+	}
+
+	async function copyId() {
+		const ticket = generation;
+		const result = await settle(() => navigator.clipboard.writeText(runId));
+		if (ticket !== generation) return;
+		if (result.ok) copied = true;
+		else failure = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+	}
+
+	async function request(action: RunnableControlAction) {
+		if (!send || pending) return;
+		const ticket = generation;
+		const id = runId;
+		pending = action;
+		failure = null;
+		const result = await settle(async () => {
+			if (!await send({ runId: id, action })) {
+				throw new CapabilityError('The run owner did not perform the requested action.', 'UNAVAILABLE', {
+					reason: 'runnable-control-refused', details: { action, runId: id }
+				});
+			}
+		});
+		if (ticket === generation) {
+			if (!result.ok) failure = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+			pending = null;
+		}
+	}
+</script>
+
+{#snippet evidence(key: string, title: string, value: unknown)}
+	<details data-evidence={key} tabindex="-1" class="min-w-0 border-b border-border" open={expanded[key] ?? false} ontoggle={event => { expanded[key] = event.currentTarget.open; }}>
+		<summary class="cursor-pointer py-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-ring">{title}<span class="float-right text-xs font-normal text-muted-foreground">JSON</span></summary>
+		{#if expanded[key]}<div class="pb-4"><RunEvidence {title} {value} /></div>{/if}
+	</details>
+{/snippet}
+
+<article bind:this={article} aria-label={runTitle(run)} class="grid min-w-0 gap-4">
+	<header class="grid gap-3 border-b border-border pb-5">
+		<div class="flex flex-wrap items-start justify-between gap-3">
+			<h2 class="min-w-0 break-words text-lg font-semibold tracking-tight">{runTitle(run)}</h2>
+			<div class="flex items-center gap-2 text-xs text-muted-foreground"><span>Execution</span><RunStatusBadge status={run.status} /></div>
+		</div>
+		<RunObservation {snapshot} {enclosing} onevidence={openEvidence} onselect={select} />
+		<RunContext {run} />
+		<div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"><Badge variant="secondary">{run.context?.kindLabel ?? run.runnableType}</Badge><RunOutcomeBadge {run} /><code title={run.id}>{shortRunId(run.id)}</code><Button size="sm" variant="ghost" onclick={copyId}>{copied ? 'Copied run ID' : 'Copy run ID'}</Button></div>
+		<div class="flex flex-wrap items-center gap-x-3 gap-y-1"><span class="text-xs font-medium text-muted-foreground">{isActiveRunStatus(run.status) ? 'Current activity' : 'Last activity'}</span><RunActivity {run} />{#if run.activity}<time class="text-xs text-muted-foreground" datetime={new Date(run.activity.ts).toISOString()}>{formatRunTime(run.activity.ts)}</time>{/if}</div>
+		{#if run.hostId}<p class="break-all text-xs text-muted-foreground">Host {run.hostId}</p>{/if}
+		<div class="flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">
+			<p>Started <time datetime={new Date(run.startedAt).toISOString()} title={new Date(run.startedAt).toLocaleString()}>{formatRunTime(run.startedAt)}</time></p>
+			{#if run.endedAt != null}<p>Duration <span class="font-medium text-foreground">{formatDuration(run.endedAt - run.startedAt)}</span></p><p>Ended <time datetime={new Date(run.endedAt).toISOString()}>{formatRunTime(run.endedAt)}</time></p>{/if}
+		</div>
+		{#if run.progress !== undefined && isActiveRunStatus(run.status)}
+			<div class="flex items-center gap-3">
+				<Progress max={1} value={Math.min(1, Math.max(0, run.progress))} aria-label="Recorded progress" />
+				<span class="text-xs tabular-nums text-muted-foreground">{Math.round(Math.min(1, Math.max(0, run.progress)) * 100)}%</span>
+			</div>
+		{/if}
+		{#if send && isActiveRunStatus(run.status)}
+			<div class="flex flex-wrap gap-2 border-t border-border pt-3">
+				{#each actions as action}<Button variant={action === 'stop' ? 'destructive' : 'outline'} size="sm" disabled={pending !== null} loading={pending === action} onclick={() => request(action)}><span class="capitalize">{action}</span></Button>{/each}
+			</div>
+		{/if}
+		{#if pending}<p role="status" class="text-sm text-muted-foreground">Asking the owner to {pending}.</p>{/if}
+		{#if failure}
+			<Alert variant="destructive">
+				<AlertTitle>{failure.message}</AlertTitle>
+				<AlertDescription><code>{failure.code}</code> {failure.reason ?? ''}{#if failure.recoveryHint}<p>{failure.recoveryHint}</p>{/if}</AlertDescription>
+			</Alert>
+		{/if}
+		{#if run.parentRunId && (onselect || store)}<div><Button variant="ghost" size="sm" onclick={() => select(run.parentRunId!)}>View parent run</Button></div>{/if}
+	</header>
+
+	{@render requests?.(snapshot, store)}
+		<Tabs bind:value={activeTab} class="min-w-0 gap-5">
+		<TabsList aria-label="Run inspector" class="grid h-auto w-full grid-cols-2 gap-1 sm:flex sm:w-fit">
+			<TabsTrigger class="h-9" value="overview">Overview</TabsTrigger>
+			<TabsTrigger class="h-9" value="logs">Execution thread <span class="ml-1 text-xs text-muted-foreground">{snapshot.logs.length}</span></TabsTrigger>
+			<TabsTrigger class="h-9" value="artifacts">Artifacts <span class="ml-1 text-xs text-muted-foreground">{snapshot.artifacts.length}</span></TabsTrigger>
+			{#if store}<TabsTrigger class="h-9" value="compare">Compare</TabsTrigger>{/if}
+			<TabsTrigger class="h-9" value="evidence">Evidence</TabsTrigger>
+		</TabsList>
+		<TabsContent value="overview" class="min-w-0 space-y-6">
+			<RunSummary {snapshot} onevidence={openEvidence} onselect={select} />
+			{@render sections?.(snapshot, store)}
+			{#if load}<RunPanels {snapshot} visualizations={load} {origin} hideEmpty />{/if}
+			{#if Object.keys(source.metrics).length > 0}<section aria-label="Metrics" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+				{#each Object.entries(source.metrics) as [key, points] (key)}<MetricCard label={key} values={points.map(point => point.value)} />{/each}
+			</section>{/if}
+			<section class="grid gap-3" aria-label="Related executions"><div class="flex items-center justify-between gap-2"><h3 class="text-sm font-semibold">Execution tree</h3><span class="text-xs text-muted-foreground">Follow a child to its evidence</span></div><RunTree runs={related} rootId={run.id} selected={store?.selectedId} onselect={select} /></section>
+			{#if snapshot.artifacts.length > 0}<section class="grid gap-3"><h3 class="text-sm font-semibold">Recorded artifacts</h3><ArtifactList artifacts={snapshot.artifacts} /></section>{/if}
+		</TabsContent>
+		<TabsContent value="logs" class="min-w-0">{#if thread}{@render thread(snapshot, focusedLog)}{:else}<LogViewer logs={snapshot.logs} focusedIndex={focusedLog} />{/if}</TabsContent>
+		<TabsContent value="artifacts" class="min-w-0"><ArtifactList artifacts={snapshot.artifacts} /></TabsContent>
+		{#if store}<TabsContent value="compare" class="min-w-0"><RunComparison {snapshot} candidates={comparisonCandidates} source={store.source} onselect={select} /></TabsContent>{/if}
+		<TabsContent value="evidence" class="min-w-0">
+			<div class="mb-3 flex items-center justify-between gap-3"><h3 class="text-sm font-semibold">Owner-recorded evidence</h3><Badge variant="secondary">Read only</Badge></div>
+			<p class="mb-4 break-all text-xs text-muted-foreground">Run ID: <code>{run.id}</code></p>
+			{#if run.inputDigest}<p class="mb-4 break-all text-xs text-muted-foreground">Input digest: <code>{run.inputDigest}</code></p>{/if}
+			{#if run.outcome}{@render evidence('outcome', 'Recorded outcome', run.outcome)}{/if}
+			{@render evidence('input', 'Input', run.config)}
+			{@render evidence('metadata', 'Metadata', run.metadata)}
+			{#if run.rankReason}{@render evidence('selection', 'Selection evidence', run.rankReason)}{/if}
+			{#if run.ref}{@render evidence('reference', 'Execution reference', run.ref)}{/if}
+			{#if run.scope}{@render evidence('scope', 'Recorded scope', run.scope)}{/if}
+			{#if run.approval}<p class="py-3 text-sm">Approval: <Badge variant="outline">{run.approval}</Badge></p>{/if}
+			{@render evidence('snapshot', 'Complete recorded evidence', snapshot)}
+		</TabsContent>
+	</Tabs>
+
+</article>

package/dist/svelte/components/records/RunDetail.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { RunnableControlInput } from '../../../schemas/contracts/index.ts';
+import type { RunnableSnapshot } from '../../../schemas/runs.ts';
+import type { RunsStore } from '../../runs.store.svelte.ts';
+import type { RunPanelsProps } from '../RunPanels.svelte';
+export interface RunDetailProps {
+    snapshot: RunnableSnapshot;
+    store?: RunsStore;
+    control?: (input: RunnableControlInput) => Promise<boolean>;
+    visualizations?: RunPanelsProps['visualizations'];
+    sections?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+    requests?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+    thread?: Snippet<[RunnableSnapshot, number | null]>;
+    onselect?: (runId: string) => void;
+    origin?: string;
+}
+declare const RunDetail: import("svelte").Component<RunDetailProps, {}, "">;
+type RunDetail = ReturnType<typeof RunDetail>;
+export default RunDetail;
+//# sourceMappingURL=RunDetail.svelte.d.ts.map

package/dist/svelte/components/records/RunDetail.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunDetail.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/records/RunDetail.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAyB,MAAM,qCAAqC,CAAC;AACvG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAoOF,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}