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

package/dist/storage/records.js

@@ -0,0 +1,68 @@
+import { CapabilityError } from '@vibesdotdev/kernel';
+import { RunQuerySchema, RunRecordSchema } from "../schemas/runs.js";
+export const RUNNABLE_RECORD_ID = 'runnable.runs';
+export function projectRecord(state, saved) {
+    state.recordStart({
+        runId: saved.id, runnableType: saved.runnableType, runnableId: saved.runnableId,
+        config: saved.config, metadata: saved.metadata, startedAt: saved.startedAt, status: saved.status
+    });
+    state.applyDispatch(saved.id, [{ kind: 'lifecycle', patch: { status: saved.status, progress: saved.progress, endedAt: saved.endedAt, activity: saved.activity } }]);
+}
+export function storageRecords(runtime, state, writer) {
+    const record = () => runtime.query('storage/record')
+        .withId(RUNNABLE_RECORD_ID).resolve();
+    return {
+        async save(input) {
+            const saved = RunRecordSchema.parse(input);
+            // This feature's collection endpoint upserts a complete snapshot under independently verified ownership.
+            const store = await record();
+            if (writer)
+                await writer(store, saved);
+            else
+                await store.create(saved);
+            projectRecord(state, saved);
+        },
+        async list(input) {
+            const query = RunQuerySchema.parse(input);
+            const where = { scope: query.scope };
+            if (query.id !== undefined)
+                where.id = query.id;
+            if (query.runnable !== undefined)
+                where.runnableId = query.runnable;
+            if (query.parentRunId !== undefined)
+                where.parentRunId = query.parentRunId;
+            if (query.inputDigest !== undefined)
+                where.inputDigest = query.inputDigest;
+            if (query.since !== undefined)
+                where.startedAt = { gte: query.since };
+            const store = await record();
+            const records = [];
+            let hasMore = true;
+            while (hasMore) {
+                const page = await store.list({ where, limit: 1000, offset: records.length, orderBy: [{ field: 'startedAt', direction: 'desc' }, { field: 'id', direction: 'asc' }] });
+                if (page.hasMore && page.items.length === 0) {
+                    throw new CapabilityError('Runnable record query did not advance.', 'INTERNAL', {
+                        reason: 'runnable-record-page-stalled', retryable: false
+                    });
+                }
+                for (const item of page.items) {
+                    const saved = RunRecordSchema.parse(item);
+                    if (saved.scope !== query.scope) {
+                        throw new CapabilityError('Runnable record query returned another scope.', 'PERMISSION_DENIED', {
+                            reason: 'runnable-record-scope-mismatch', retryable: false
+                        });
+                    }
+                    if (query.id !== undefined && saved.id !== query.id) {
+                        throw new CapabilityError('Runnable record lookup returned another identifier.', 'INTERNAL', {
+                            reason: 'runnable-record-query-mismatch', retryable: false
+                        });
+                    }
+                    records.push(saved);
+                }
+                hasMore = page.hasMore === true;
+            }
+            return query.status ? records.filter((saved) => saved.outcome?.status === query.status) : records;
+        }
+    };
+}
+//# sourceMappingURL=records.js.map

package/dist/storage/records.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"records.js","sourceRoot":"","sources":["../../src/storage/records.ts"],"names":[],"mappings":"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"}

package/dist/svelte/components/ArtifactList.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import ArtifactPreview from './ArtifactPreview.svelte';
+	import { CapabilityError, CaughtFailureSchema, settleNow } from '@vibesdotdev/kernel';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { artifactBlob } from '../lib/artifact-blob.js';
+	import type {
+		ArtifactDownloadHref,
+		RunnableArtifactEntry,
+	} from '../types.js';
+
+	interface Props {
+		artifacts: RunnableArtifactEntry[];
+		downloadHref?: ArtifactDownloadHref;
+		emptyLabel?: string;
+	}
+
+	let {
+		artifacts,
+		downloadHref = (artifact) => artifact.downloadUrl,
+		emptyLabel = 'No artifacts for this run',
+	}: Props = $props();
+	let failure = $state.raw<CapabilityError | null>(null);
+	let expanded = $state<Record<string, boolean>>({});
+	const downloadUrls = new Set<string>();
+	onDestroy(() => {
+		for (const url of downloadUrls) URL.revokeObjectURL(url);
+	});
+
+	function formatSize(bytes: number | undefined): string {
+		if (bytes === undefined) return 'Size not recorded';
+		if (bytes < 0) return `${bytes} B`;
+		if (bytes === 0) return '0 B';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB'];
+		const i = Math.min(sizes.length - 1, Math.floor(Math.log(bytes) / Math.log(k)));
+		return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+	}
+
+	function artifactIcon(mimeType: string): string {
+		if (mimeType.startsWith('image/')) return 'lucide:image';
+		if (
+			mimeType.includes('json') ||
+			mimeType.includes('text') ||
+			mimeType.includes('yaml')
+		) {
+			return 'lucide:file-json';
+		}
+		return 'lucide:file-text';
+	}
+
+	function triggerDownload(url: string, filename: string): void {
+		const anchor = document.createElement('a');
+		anchor.href = url;
+		anchor.download = filename;
+		anchor.click();
+	}
+
+	function canDownload(artifact: RunnableArtifactEntry): boolean {
+		return artifact.data != null || Boolean(downloadHref(artifact));
+	}
+
+	function downloadArtifact(artifact: RunnableArtifactEntry): void {
+		failure = null;
+		const result = settleNow(() => {
+			if (artifact.data != null) {
+				const url = URL.createObjectURL(artifactBlob(artifact));
+				downloadUrls.add(url);
+				triggerDownload(url, artifact.name);
+				return;
+			}
+			const href = downloadHref(artifact);
+			if (href) triggerDownload(href, artifact.name);
+		});
+		if (!result.ok) failure = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+	}
+
+	function timeAgo(ts: number): string {
+		const minutes = Math.max(0, Math.floor((Date.now() - ts) / 60000));
+		if (minutes < 60) return `${minutes}m ago`;
+		return `${Math.floor(minutes / 60)}h ago`;
+	}
+</script>
+
+<div class="runnable-artifact-list">
+	{#if failure}<p role="alert">{failure.message}</p>{/if}
+	{#if artifacts.length === 0}
+		<div class="ral-empty">{emptyLabel}</div>
+	{:else}
+		{#each artifacts as artifact (artifact.id)}
+			<div data-artifact-id={artifact.id} tabindex="-1" class="grid min-w-0 gap-2 rounded-md focus-visible:outline-2 focus-visible:outline-ring">
+			<button
+				type="button"
+				class="ral-item"
+				disabled={!canDownload(artifact)}
+				onclick={() => downloadArtifact(artifact)}
+			>
+				<Icon icon={artifactIcon(artifact.mimeType)} class="ral-icon" />
+				<div class="ral-info">
+					<span class="ral-name">{artifact.name}</span>
+					<span class="ral-meta">
+						{formatSize(artifact.size)} | {artifact.mimeType} | {timeAgo(artifact.ts)}
+					</span>
+				</div>
+				<Icon icon="lucide:download" class="ral-download" />
+			</button>
+			{#if artifact.data != null && (artifact.mimeType.startsWith('text/') || artifact.mimeType === 'application/json' || artifact.mimeType.endsWith('+json'))}<details class="px-3 pb-3" open={expanded[artifact.id] ?? false} ontoggle={event => expanded[artifact.id] = event.currentTarget.open}><summary class="cursor-pointer text-xs font-medium text-muted-foreground focus-visible:outline-2 focus-visible:outline-ring">Preview artifact</summary>{#if expanded[artifact.id]}<div class="mt-3"><ArtifactPreview {artifact} /></div>{/if}</details>{/if}
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.runnable-artifact-list {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.ral-empty {
+		text-align: center;
+		padding: 32px;
+		font-size: 13px;
+		color: var(--muted-foreground);
+	}
+
+	.ral-item {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px 12px;
+		border-radius: 6px;
+		border: 1px solid transparent;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		transition:
+			background 0.15s,
+			border-color 0.15s,
+			opacity 0.15s;
+		text-align: left;
+		width: 100%;
+	}
+
+	.ral-item:disabled {
+		cursor: default;
+		opacity: 0.65;
+	}
+
+	.ral-item:not(:disabled):hover {
+		background: var(--card);
+		border-color: var(--border);
+	}
+
+	:global(.ral-icon) {
+		width: 16px;
+		height: 16px;
+		color: var(--muted-foreground);
+		flex-shrink: 0;
+	}
+
+	.ral-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		min-width: 0;
+	}
+
+	.ral-name {
+		font-family: var(--font-brand);
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--foreground);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ral-meta {
+		font-family: var(--font-brand);
+		font-size: 10px;
+		color: var(--muted-foreground);
+	}
+
+	:global(.ral-download) {
+		width: 14px;
+		height: 14px;
+		color: var(--muted-foreground);
+		flex-shrink: 0;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	.ral-item:not(:disabled):hover :global(.ral-download) {
+		opacity: 1;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { ArtifactDownloadHref, RunnableArtifactEntry } from '../types.ts';
+interface Props {
+    artifacts: RunnableArtifactEntry[];
+    downloadHref?: ArtifactDownloadHref;
+    emptyLabel?: string;
+}
+declare const ArtifactList: import("svelte").Component<Props, {}, "">;
+type ArtifactList = ReturnType<typeof ArtifactList>;
+export default ArtifactList;
+//# sourceMappingURL=ArtifactList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArtifactList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ArtifactList.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,MAAM,aAAa,CAAC;AAGrB,UAAU,KAAK;IACd,SAAS,EAAE,qBAAqB,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAwGF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/ArtifactPreview.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { CapabilityError, CaughtFailureSchema } from '@vibesdotdev/kernel';
+	import { CodeViewer } from '@vibesdotdev/kit/components/code';
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import type { RunnableArtifactEntry } from '../types.js';
+	import { artifactBlob } from '../lib/artifact-blob.js';
+	let { artifact }: { artifact: RunnableArtifactEntry } = $props();
+	async function read(value: RunnableArtifactEntry) { return artifactBlob(value).text(); }
+	const content = $derived(read(artifact));
+</script>
+
+<section class="min-w-0 rounded-lg border border-border p-4" aria-label={`Preview ${artifact.name}`}>
+	{#await content}<p role="status" class="text-sm text-muted-foreground">Reading artifact…</p>
+	{:then text}
+		{#if artifact.mimeType === 'text/markdown'}<div class="min-w-0 text-sm"><MarkdownRenderer content={text} /></div>
+		{:else}<CodeViewer code={text} filename={artifact.name} language={artifact.mimeType === 'application/json' ? 'json' : 'auto'} maxHeight="28rem" minHeight="0" />{/if}
+	{:catch cause}{@const failure = CapabilityError.from(CaughtFailureSchema.parse(cause))}<Alert variant="destructive"><AlertTitle>Artifact preview unavailable</AlertTitle><AlertDescription>{failure.message}</AlertDescription></Alert>{/await}
+</section>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArtifactPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ArtifactPreview.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAGxD,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,qBAAqB,CAAA;CAAE,CAAC;AAuB9D,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/FleetRuns.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { NativeSelect } from '@vibesdotdev/kit/components/ui/native-select';
+	import type { RunsStore } from '../runs.store.svelte.js';
+	import type { RunnableCatalogRun } from '../../schemas/runs.js';
+	import RunList from './records/RunList.svelte';
+
+	let { store }: { store: RunsStore } = $props();
+	let selectedHost = $state<string | null | undefined>(undefined);
+	const groups = $derived.by(() => {
+		const hosts = new Map<string | null, RunnableCatalogRun[]>();
+		for (const row of store.listRows) {
+			const id = row.run.hostId ?? null;
+			const records = hosts.get(id) ?? [];
+			records.push(row.run);
+			hosts.set(id, records);
+		}
+		return hosts;
+	});
+	const hosts = $derived([...groups.keys()].filter((id): id is string => id !== null).sort());
+	const visible = $derived([...groups].filter(([id]) => selectedHost === undefined || id === selectedHost));
+</script>
+
+<section aria-label="Fleet runs" class="grid min-w-0 gap-4 rounded-lg border border-border bg-muted/20 p-4">
+	<header class="flex flex-wrap items-end justify-between gap-4">
+		<div class="grid gap-1"><h2 class="text-sm font-semibold">Fleet runs</h2><p class="text-xs text-muted-foreground">Grouped by recorded execution host</p></div>
+		<label class="grid gap-1.5 text-xs font-medium">Recorded execution host
+			<NativeSelect bind:value={selectedHost}>
+				<option value={undefined}>All admitted records</option>
+				{#if groups.has(null) || selectedHost === null}<option value={null}>Host not recorded</option>{/if}
+				{#if selectedHost != null && !hosts.includes(selectedHost)}<option value={selectedHost}>{selectedHost} · no records in this delivery</option>{/if}
+				{#each hosts as host (host)}<option value={host}>{host}</option>{/each}
+			</NativeSelect>
+		</label>
+	</header>
+	<p class="max-w-3xl text-xs leading-relaxed text-muted-foreground">This view contains only this connection’s admitted records. An absent host identity stays unrecorded; run activity does not establish whether a host is online.</p>
+	{#if visible.length === 0}<p class="py-4 text-sm text-muted-foreground">No runs for this host in the current delivery.</p>{/if}
+	<div class="fleet-columns">
+		{#each visible as [host, runs] (host)}
+			<section aria-label={host ?? 'Execution host not recorded'} class="min-w-0 rounded-md border border-border bg-card p-2">
+				<div class="mb-2 flex items-start justify-between gap-2 px-3 py-2"><h3 class="break-all text-xs font-medium">{host ?? 'Execution host not recorded'}</h3><Badge variant="secondary">{runs.length}</Badge></div>
+				<RunList {runs} selected={store.selectedId} onselect={id => store.select(id)} />
+			</section>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.fleet-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
+</style>

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

@@ -0,0 +1,8 @@
+import type { RunsStore } from '../runs.store.svelte.ts';
+type $$ComponentProps = {
+    store: RunsStore;
+};
+declare const FleetRuns: import("svelte").Component<$$ComponentProps, {}, "">;
+type FleetRuns = ReturnType<typeof FleetRuns>;
+export default FleetRuns;
+//# sourceMappingURL=FleetRuns.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetRuns.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/FleetRuns.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAIxD,KAAK,gBAAgB,GAAI;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC;AAoD/C,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/LogViewer.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import RunEvidence from './RunEvidence.svelte';
+	import { ToolCallRenderer, type ToolCallView, type ToolWidgetResolver } from '@vibesdotdev/kit/components/tool-widgets';
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+	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 { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import type { RunnableLogEntry } from '../types.js';
+
+	interface Props {
+		logs: RunnableLogEntry[];
+		maxHeight?: string;
+		focusedIndex?: number | null;
+		toolForLog?: (log: RunnableLogEntry) => ToolCallView | null;
+		resolver?: ToolWidgetResolver;
+	}
+
+	let { logs, maxHeight = '40rem', focusedIndex = null, toolForLog, resolver }: Props = $props();
+	let levelFilter = $state('all');
+	let searchText = $state('');
+	let following = $state(true);
+	let seenCount = $state(0);
+	let expanded = $state<Record<string, boolean>>({});
+	let scrollEl: HTMLDivElement | undefined = $state();
+	const levels = ['all', 'debug', 'info', 'warn', 'error'];
+	const filteredLogs = $derived(logs.map((log, index) => ({ log, index })).filter(({ log }) =>
+		(levelFilter === 'all' || log.level === levelFilter)
+		&& (!searchText.trim() || [log.message, JSON.stringify(log.data)].join(' ').toLowerCase().includes(searchText.trim().toLowerCase()))));
+	const unseen = $derived(Math.max(0, logs.length - seenCount));
+
+	$effect(() => {
+		void filteredLogs.length;
+		if (!following) return;
+		seenCount = logs.length;
+		let active = true;
+		void tick().then(() => {
+			if (active && scrollEl && following) scrollEl.scrollTop = scrollEl.scrollHeight;
+		});
+		return () => { active = false; };
+	});
+
+	$effect(() => {
+		const index = focusedIndex;
+		if (index === null) return;
+		levelFilter = 'all';
+		searchText = '';
+		following = false;
+		expanded[String(index)] = true;
+		let active = true;
+		void tick().then(() => {
+			if (!active) return;
+			const entry = scrollEl?.querySelector<HTMLElement>(`[data-log-index="${index}"]`);
+			entry?.scrollIntoView({ block: 'nearest' });
+			entry?.focus({ preventScroll: true });
+		});
+		return () => { active = false; };
+	});
+
+	function onScroll() {
+		if (!scrollEl) return;
+		following = scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 32;
+		if (following) seenCount = logs.length;
+	}
+</script>
+
+<section aria-label="Recorded logs" class="grid min-w-0 gap-3">
+	<div class="flex flex-wrap items-center gap-2">
+		<NativeSelect aria-label="Log level" bind:value={levelFilter}>
+			{#each levels as level (level)}<option value={level}>{level === 'all' ? 'All levels' : level}</option>{/each}
+		</NativeSelect>
+		<Input type="search" class="min-w-40 flex-1" aria-label="Search logs and event data" placeholder="Search logs and event data…" bind:value={searchText} />
+		<Button size="sm" variant={following ? 'secondary' : 'outline'} aria-pressed={following} onclick={() => following = !following}>{following ? 'Following latest' : unseen > 0 ? `${unseen} new · Follow latest` : 'Follow latest'}</Button>
+	</div>
+	<p class="text-xs text-muted-foreground">{filteredLogs.length} of {logs.length} entries · Timestamps use your local time</p>
+	<div class="min-w-0 overflow-auto rounded-lg border border-border bg-muted/10" style:max-height={maxHeight} bind:this={scrollEl} onscroll={onScroll} role="region" aria-label="Log entries">
+		{#each filteredLogs as { log, index } (index)}
+			{@const entryId = String(log.id ?? index)}
+			{@const tool = toolForLog?.(log)}
+			<div data-log-index={log.id ?? index} tabindex="-1" class={["min-w-0 border-b border-border/50 px-3 py-4 last:border-b-0 focus-visible:outline-2 focus-visible:outline-ring", focusedIndex === Number(log.id ?? index) && "bg-accent/50"]}>
+				<div class="mb-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+					<time datetime={new Date(log.ts).toISOString()} title={new Date(log.ts).toLocaleString()} class="tabular-nums">{new Date(log.ts).toLocaleTimeString()}</time>
+					<Badge variant={log.level === 'error' ? 'destructive' : 'outline'} class="text-xs">{log.level}</Badge>
+				</div>
+				{#if tool}<div class="mb-3"><ToolCallRenderer {tool} {resolver} /></div>{/if}
+				{#if log.data !== undefined}
+					<details class="min-w-0" open={expanded[entryId] ?? false} ontoggle={event => { expanded[entryId] = event.currentTarget.open; }}>
+						<summary class="cursor-pointer break-words text-sm leading-relaxed focus-visible:outline-2 focus-visible:outline-ring">{tool ? 'Source event evidence' : log.message}</summary>
+						{#if expanded[entryId]}<div class="mt-3"><RunEvidence title="Recorded event data" value={log.data} /></div>{/if}
+					</details>
+				{:else}<div class="min-w-0 break-words text-sm leading-relaxed"><MarkdownRenderer content={log.message} /></div>{/if}
+			</div>
+		{:else}
+			<div class="grid gap-1 p-6 text-sm"><p>{logs.length === 0 ? 'No logs recorded' : 'No matching log entries'}</p><p class="text-muted-foreground">{logs.length === 0 ? 'Logs appear here when the execution owner records them.' : 'Try another level or search term.'}</p></div>
+		{/each}
+	</div>
+</section>

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

@@ -0,0 +1,13 @@
+import { type ToolCallView, type ToolWidgetResolver } from '@vibesdotdev/kit/components/tool-widgets';
+import type { RunnableLogEntry } from '../types.ts';
+interface Props {
+    logs: RunnableLogEntry[];
+    maxHeight?: string;
+    focusedIndex?: number | null;
+    toolForLog?: (log: RunnableLogEntry) => ToolCallView | null;
+    resolver?: ToolWidgetResolver;
+}
+declare const LogViewer: import("svelte").Component<Props, {}, "">;
+type LogViewer = ReturnType<typeof LogViewer>;
+export default LogViewer;
+//# sourceMappingURL=LogViewer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/LogViewer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAMxH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGnD,UAAU,KAAK;IACd,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,YAAY,GAAG,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AA+FF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}