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

package/dist/svelte/components/RunIssues.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+ import { Button } from '@vibesdotdev/kit/components/ui/button';
+ import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+ import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+ import * as Pagination from '@vibesdotdev/kit/components/ui/pagination';
+ import type { RunnableCatalogRun } from '../../schemas/runs.js';
+ import type { RunIssueReport } from '../../schemas/issues.js';
+ import { groupRunIssues, summarizeRunIssues } from '../lib/run-issues.js';
+ import { runTitle, outcomeReason, formatRunTime } from '../lib/run-presentation.js';
+ import RunContext from './RunContext.svelte';
+ import RunOutcomeBadge from './RunOutcomeBadge.svelte';
+ import RunStatusBadge from './RunStatusBadge.svelte';
+
+ interface Props {
+  runs: readonly RunnableCatalogRun[];
+  report?: RunIssueReport;
+  onselect: (id: string) => void;
+  onbrowse: () => void;
+ }
+ let { runs, report, onselect, onbrowse }: Props = $props();
+ let filter = $state<'open' | 'unresolved' | 'unverified' | 'resolved' | 'superseded' | 'all'>('open');
+ let page = $state(1);
+ let expanded = $state<Record<string, boolean>>({});
+ const groups = $derived(groupRunIssues(runs, report));
+ const totals = $derived(summarizeRunIssues(groups));
+ const count = $derived(totals.attempts);
+ const filtered = $derived(filter === 'all' ? groups : groups.filter(group => filter === 'open'
+  ? !['resolved', 'superseded'].includes(group.investigation?.status ?? 'unverified')
+  : (group.investigation?.status ?? 'unverified') === filter));
+ const currentPage = $derived(Math.min(page, Math.max(1, Math.ceil(filtered.length / 8))));
+ const visible = $derived(filtered.slice((currentPage - 1) * 8, currentPage * 8));
+ const labels = { resolved: 'Later success verified', unresolved: 'Still unresolved', unverified: 'Needs verification', superseded: 'Superseded by approved scope' } as const;
+ function choose(value: typeof filter) { filter = value; page = 1; }
+</script>
+
+<section aria-label="Recorded execution issues" class="grid min-w-0 grid-cols-1 gap-3">
+ <div class="flex items-center justify-between gap-3"><h3 class="text-sm font-semibold">Work to investigate</h3><Badge variant="outline">{totals.counts.unresolved.groups + totals.counts.unverified.groups} open groups</Badge></div>
+ <p class="text-sm leading-relaxed text-muted-foreground">
+  {groups.length} work {groups.length === 1 ? 'group' : 'groups'} · {count} historical {count === 1 ? 'attempt' : 'attempts'} with failure or missing evidence.
+  Missing evidence does not establish an unresolved defect. Requests for your input are counted separately.
+ </p>
+ {#if report}
+  <div aria-label="Issue investigation filters" class="flex flex-wrap gap-2">
+   <Button variant="outline" size="sm" aria-pressed={filter === 'open'} onclick={() => choose('open')}>Open · {totals.counts.unresolved.groups + totals.counts.unverified.groups}</Button>
+   <Button variant="outline" size="sm" aria-pressed={filter === 'unresolved'} onclick={() => choose('unresolved')}>Unresolved · {totals.counts.unresolved.groups}</Button>
+   <Button variant="outline" size="sm" aria-pressed={filter === 'unverified'} onclick={() => choose('unverified')}>Needs verification · {totals.counts.unverified.groups}</Button>
+   <Button variant="outline" size="sm" aria-pressed={filter === 'resolved'} onclick={() => choose('resolved')}>Recovered · {totals.counts.resolved.groups}</Button>
+   <Button variant="outline" size="sm" aria-pressed={filter === 'superseded'} onclick={() => choose('superseded')}>Superseded · {totals.counts.superseded.groups}</Button>
+   <Button variant="ghost" size="sm" aria-pressed={filter === 'all'} onclick={() => choose('all')}>All · {groups.length}</Button>
+  </div>
+ {/if}
+ {#each visible as group (group.investigation?.id ?? group.root.id)}
+  {@const investigation = group.investigation}
+  {@const key = investigation?.id ?? group.root.id}
+  {@const latestReason = outcomeReason(group.latest)}
+  <article class="grid min-w-0 grid-cols-1 gap-3 border-t border-border py-4">
+   <div class="flex flex-wrap items-start justify-between gap-2">
+    <h4 class="min-w-0 flex-1 break-words text-sm font-medium leading-snug">{investigation?.title ?? runTitle(group.root)}</h4>
+    <Badge variant="secondary">{group.attempts.length} {group.attempts.length === 1 ? 'attempt' : 'attempts'}</Badge>
+   </div>
+   {#if investigation}
+    {#if investigation.target && investigation.target !== investigation.title}<p class="break-words text-xs text-muted-foreground">{investigation.target}</p>{/if}
+   {:else}<RunContext run={group.root} compact />{/if}
+   {#if investigation}
+    <div><Badge variant={investigation.status === 'resolved' ? 'secondary' : 'outline'}>{labels[investigation.status]}</Badge></div>
+    <div class="min-w-0 text-sm leading-relaxed"><MarkdownRenderer content={investigation.summary} /></div>
+    <dl class="grid gap-2 text-sm">
+     <div><dt class="text-xs text-muted-foreground">Responsible feature</dt><dd class="break-words">{investigation.owner}</dd></div>
+     {#if !['resolved', 'superseded'].includes(investigation.status)}
+      <div><dt class="text-xs text-muted-foreground">Assigned to</dt><dd>
+       {#if investigation.assignmentConflict}Conflicting assignments · review linked triage tasks
+       {:else if investigation.assignment}{investigation.assignment.name ?? investigation.assignment.participantId}
+       {:else if report?.triageFailure}Unknown · follow-up lookup failed
+       {:else if report?.triageSessionId}No assignment linked to this whole group
+       {:else}Not checked · select a follow-up session in Configure inputs{/if}
+      </dd></div>
+      {#if investigation.assignment?.activity}<div><dt class="text-xs text-muted-foreground">Recorded triage activity</dt><dd>{investigation.assignment.activity}</dd></div>{/if}
+     {/if}
+     <div><dt class="text-xs text-muted-foreground">Next action</dt><dd class="break-words leading-relaxed">{investigation.nextAction}</dd></div>
+    </dl>
+    {#if investigation.gaps?.length}<div class="grid gap-1 text-sm"><p class="text-xs text-muted-foreground">Evidence still needed</p><ul class="grid gap-1">{#each investigation.gaps as gap}<li>{gap.message}</li>{/each}</ul></div>{/if}
+    {#if investigation.triage && !['resolved', 'superseded'].includes(investigation.status)}<p class="text-xs text-muted-foreground">Follow-up · {investigation.triage.status.replaceAll('_', ' ')}. Original execution assignee unknown.</p>{/if}
+    <div class="flex flex-wrap gap-2">{#each investigation.evidence as evidence (evidence.runId)}
+     <Button variant={evidence.role === 'resolution' ? 'outline' : 'ghost'} size="sm" onclick={() => onselect(evidence.runId)}>{evidence.label} →</Button>
+    {/each}</div>
+   {:else}
+    <Badge variant="outline">Not yet investigated</Badge>
+    <p class="text-sm text-muted-foreground">Owner, next action and later recovery have not been checked for this group.</p>
+   {/if}
+   <div class="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+    <Badge variant="secondary">{group.latest.context?.kindLabel ?? group.latest.runnableType}</Badge>
+    {#if group.latest.outcome}<RunOutcomeBadge run={group.latest} />{:else}<RunStatusBadge status={group.latest.status} />{/if}
+    <span>Latest flagged attempt · {formatRunTime(group.latest.endedAt ?? group.latest.startedAt)}</span>
+   </div>
+   {#if group.latest.observation}<p class="text-sm leading-relaxed"><span class="text-xs text-muted-foreground">Last recorded activity · {formatRunTime(group.latest.observation.ts)}</span><br />{group.latest.observation.message}</p>{/if}
+   {#if !investigation || latestReason && latestReason !== investigation.summary}<div class="min-w-0 text-sm leading-relaxed"><MarkdownRenderer content={latestReason ?? (group.latest.status === 'unverified' ? 'The execution status could not be verified. No task outcome was recorded.' : 'An execution error was recorded without an explanation.')} /></div>{/if}
+   <div class="flex flex-wrap gap-2">
+    <Button variant="outline" size="sm" onclick={() => onselect(group.latest.id)}>Inspect issue and evidence →</Button>
+    {#if group.root.id !== group.latest.id}<Button variant="ghost" size="sm" onclick={() => onselect(group.root.id)}>Open work branch</Button>{/if}
+   </div>
+   {#if group.attempts.length > 1}
+    <details ontoggle={event => { expanded[key] = event.currentTarget.open; }}>
+     <summary class="cursor-pointer text-sm">All {group.attempts.length} flagged attempts</summary>
+     {#if expanded[key]}<ul class="mt-2 grid gap-1">{#each group.attempts as attempt (attempt.id)}
+      <li><Button variant="ghost" class="grid h-auto w-full gap-1 whitespace-normal text-left" onclick={() => onselect(attempt.id)}><span>{attempt.context?.phase ? attempt.context.phase + ' · ' : ''}{runTitle(attempt)} · {formatRunTime(attempt.endedAt ?? attempt.startedAt)}</span>{#if outcomeReason(attempt)}<span class="text-xs font-normal text-muted-foreground">{outcomeReason(attempt)}</span>{/if}</Button></li>
+     {/each}</ul>{/if}
+    </details>
+   {/if}
+  </article>
+ {/each}
+ {#if filtered.length > 8}<Pagination.Root count={filtered.length} perPage={8} page={currentPage} onPageChange={value => { page = value; }} aria-label="Issue work group pages"><Pagination.Content><Pagination.Item><Pagination.PrevButton /></Pagination.Item><Pagination.Item><span class="px-2 text-xs">{currentPage} / {Math.ceil(filtered.length / 8)}</span></Pagination.Item><Pagination.Item><Pagination.NextButton /></Pagination.Item></Pagination.Content></Pagination.Root>{/if}
+ {#if filtered.length === 0}<p class="text-sm text-muted-foreground">{count === 0 ? 'No unsuccessful outcomes or execution errors in this subscription.' : 'No work groups in this investigation filter.'}</p>{/if}
+ {#if count > 0}<Button variant="ghost" size="sm" onclick={onbrowse}>Browse original run branches →</Button>{/if}
+</section>

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

@@ -0,0 +1,12 @@
+import type { RunnableCatalogRun } from '../../schemas/runs.ts';
+import type { RunIssueReport } from '../../schemas/issues.ts';
+interface Props {
+    runs: readonly RunnableCatalogRun[];
+    report?: RunIssueReport;
+    onselect: (id: string) => void;
+    onbrowse: () => void;
+}
+declare const RunIssues: import("svelte").Component<Props, {}, "">;
+type RunIssues = ReturnType<typeof RunIssues>;
+export default RunIssues;
+//# sourceMappingURL=RunIssues.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunIssues.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunIssues.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAQ7D,UAAU,KAAK;IACd,IAAI,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AA6GF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/RunObservation.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import type { RunnableCatalogRun, RunnableSnapshot } from '../../schemas/runs.js';
+	import type { RunEvidenceTarget } from '../lib/run-investigation.js';
+	import { runTitle } from '../lib/run-presentation.js';
+	import { isActiveRunStatus } from '../lib/status.js';
+	let { snapshot, onevidence, enclosing, onselect }: {
+		snapshot: RunnableSnapshot;
+		onevidence: (target: RunEvidenceTarget) => void;
+		enclosing?: RunnableCatalogRun;
+		onselect?: (id: string) => void;
+	} = $props();
+	const latest = $derived(snapshot.logs.map((log, index) => ({ log, index }))
+		.reduce<{ log: RunnableSnapshot['logs'][number]; index: number } | null>((last, entry) => !last || entry.log.ts >= last.log.ts ? entry : last, null));
+	const observation = $derived(snapshot.observation ?? (latest ? { message: latest.log.message, ts: latest.log.ts, logIndex: latest.index, label: undefined } : undefined));
+</script>
+
+<section aria-label="Latest recorded observation" class="grid min-w-0 gap-1 border-l-2 border-border pl-3">
+	{#if observation}
+		<p class="text-xs font-medium text-muted-foreground">Last observed · <time datetime={new Date(observation.ts).toISOString()}>{new Date(observation.ts).toLocaleString()}</time></p>
+		{#if observation.label}<p class="text-xs text-muted-foreground">{observation.label}</p>{/if}
+		<Button variant="ghost" class="h-auto justify-start whitespace-normal px-0 py-1 text-left" onclick={() => onevidence({ kind: 'log', index: observation!.logIndex })}><span class="line-clamp-3 break-words text-sm font-normal">{observation.message} →</span></Button>
+	{:else}<p class="text-sm text-muted-foreground">No execution observations recorded yet.</p>{/if}
+</section>
+
+{#if isActiveRunStatus(snapshot.run.status) && enclosing?.activity && onselect && (!observation || enclosing.activity.ts > observation.ts)}
+	<section aria-label="Report from enclosing run" class="grid min-w-0 gap-1 border-l-2 border-border pl-3">
+		<p class="text-xs font-medium text-muted-foreground">{runTitle(enclosing)} reported · <time datetime={new Date(enclosing.activity.ts).toISOString()}>{new Date(enclosing.activity.ts).toLocaleString()}</time></p>
+		<p class="text-xs text-muted-foreground">From the enclosing run</p>
+		<Button variant="ghost" class="h-auto justify-start whitespace-normal px-0 py-1 text-left" onclick={() => onselect!(enclosing!.id)}><span class="line-clamp-3 break-words text-sm font-normal">{enclosing.activity.message} →</span></Button>
+	</section>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { RunnableCatalogRun, RunnableSnapshot } from '../../schemas/runs.ts';
+import type { RunEvidenceTarget } from '../lib/run-investigation.ts';
+type $$ComponentProps = {
+    snapshot: RunnableSnapshot;
+    onevidence: (target: RunEvidenceTarget) => void;
+    enclosing?: RunnableCatalogRun;
+    onselect?: (id: string) => void;
+};
+declare const RunObservation: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunObservation = ReturnType<typeof RunObservation>;
+export default RunObservation;
+//# sourceMappingURL=RunObservation.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunObservation.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunObservation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAIpE,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AA+BH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/RunOutcomeBadge.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import type { RunnableCatalogRun } from '../../schemas/runs.js';
+	import { outcomeLabel } from '../lib/run-presentation.js';
+
+	let { run }: { run: RunnableCatalogRun } = $props();
+</script>
+
+<Badge variant={run.outcome?.status === 'not-done' || run.outcome?.status === 'disputed' ? 'destructive' : 'secondary'} class="shrink-0" aria-label={`Task outcome: ${outcomeLabel(run)}`}>
+	{outcomeLabel(run)}
+</Badge>

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

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

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

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

package/dist/svelte/components/RunPanels.svelte

@@ -0,0 +1,64 @@
+<script lang="ts" module>
+	import type { RunnableVisualizationQuery } from '../../client/client.js';
+	import type { RunnableResolvedVisualizationDescriptor } from '../../schemas/descriptors.js';
+	import type { RunnableSnapshot } from '../../schemas/runs.js';
+
+	export interface RunPanelsProps {
+		snapshot: RunnableSnapshot;
+		visualizations: (query: Extract<RunnableVisualizationQuery, { runId: string }>) => Promise<readonly RunnableResolvedVisualizationDescriptor[]>;
+		origin?: string;
+		hideEmpty?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { runPanelSource } from '../../client/tracking/panel-bindings.js';
+	import DescriptorPanel from '../viz/DescriptorPanel.svelte';
+
+	let { snapshot, visualizations, origin, hideEmpty = false }: RunPanelsProps = $props();
+	let panels = $state.raw<readonly RunnableResolvedVisualizationDescriptor[]>([]);
+	let failure = $state.raw<CapabilityError | null>(null);
+	let pending = $state(false);
+	let retry = $state(0);
+	const runId = $derived(snapshot.run.id);
+	const source = $derived(runPanelSource(snapshot));
+
+	$effect(() => {
+		const id = runId;
+		const load = visualizations;
+		void retry;
+		let active = true;
+		panels = [];
+		failure = null;
+		pending = true;
+		void (async () => {
+			const result = await settle(() => load({ runId: id }));
+			if (!active) return;
+			if (result.ok) panels = result.value;
+			else failure = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+			pending = false;
+		})();
+		return () => { active = false; };
+	});
+</script>
+
+{#if pending || failure || panels.length > 0 || !hideEmpty}
+<section aria-label="Panels" aria-busy={pending}>
+	{#if pending}<p role="status">Loading visualizations.</p>
+	{:else if failure}
+		<p role="alert">{failure.message} <code>{failure.code}</code> {failure.reason ?? ''}</p>
+		<button onclick={() => retry += 1}>Retry</button>
+	{:else if panels.length === 0 && !hideEmpty}<p>No visualizations for this run.</p>{/if}
+
+	{#each panels as descriptor (descriptor.id)}
+		<svelte:boundary>
+			<DescriptorPanel {descriptor} {source} {runId} {origin} runIsActive={snapshot.run.endedAt == null} />
+			{#snippet failed(error)}
+				{@const refusal = CapabilityError.from(CaughtFailureSchema.parse(error))}
+				<p role="alert">{descriptor.name}: {refusal.message} <code>{refusal.code}</code></p>
+			{/snippet}
+		</svelte:boundary>
+	{/each}
+</section>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { RunnableVisualizationQuery } from '../../client/client.ts';
+import type { RunnableResolvedVisualizationDescriptor } from '../../schemas/descriptors.ts';
+import type { RunnableSnapshot } from '../../schemas/runs.ts';
+export interface RunPanelsProps {
+    snapshot: RunnableSnapshot;
+    visualizations: (query: Extract<RunnableVisualizationQuery, {
+        runId: string;
+    }>) => Promise<readonly RunnableResolvedVisualizationDescriptor[]>;
+    origin?: string;
+    hideEmpty?: boolean;
+}
+declare const RunPanels: import("svelte").Component<RunPanelsProps, {}, "">;
+type RunPanels = ReturnType<typeof RunPanels>;
+export default RunPanels;
+//# sourceMappingURL=RunPanels.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunPanels.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunPanels.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,KAAK,EAAE,uCAAuC,EAAE,MAAM,8BAA8B,CAAC;AAC5F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,0BAA0B,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,OAAO,CAAC,SAAS,uCAAuC,EAAE,CAAC,CAAC;IAC/I,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AA8DF,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/RunStatusBadge.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import type { RunnableRunStatus } from '../types.js';
+	import { getRunStatusDisplay } from '../lib/status.js';
+
+	interface Props {
+		status: RunnableRunStatus | string | null | undefined;
+		compact?: boolean;
+	}
+
+	let { status, compact = false }: Props = $props();
+	const display = $derived(getRunStatusDisplay(status ?? 'idle'));
+	const badgeStyle = $derived(
+		`background: ${display.backgroundColor}; border-color: ${display.borderColor}; color: ${display.textColor};`,
+	);
+</script>
+
+{#if compact}
+	<span
+		class="runnable-status-dot"
+		style:background={display.dotColor}
+		aria-label={display.label}
+	></span>
+{:else}
+	<Badge variant="outline" class={`runnable-status-badge ${display.badgeClass}`} style={badgeStyle}>
+		{display.label}
+	</Badge>
+{/if}
+
+<style>
+	.runnable-status-dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { RunnableRunStatus } from '../types.ts';
+interface Props {
+    status: RunnableRunStatus | string | null | undefined;
+    compact?: boolean;
+}
+declare const RunStatusBadge: import("svelte").Component<Props, {}, "">;
+type RunStatusBadge = ReturnType<typeof RunStatusBadge>;
+export default RunStatusBadge;
+//# sourceMappingURL=RunStatusBadge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunStatusBadge.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAIpD,UAAU,KAAK;IACd,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AA0BF,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/RunSummary.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import type { RunnableSnapshot } from '../../schemas/runs.js';
+	import type { RunEvidenceTarget } from '../lib/run-investigation.js';
+	import { outcomeReason, needsAttention, formatDuration, runTitle } from '../lib/run-presentation.js';
+	import { getRunStatusDisplay } from '../lib/status.js';
+	import RunOutcomeBadge from './RunOutcomeBadge.svelte';
+	import RunEvidence from './RunEvidence.svelte';
+
+	let { snapshot, onevidence, onselect }: {
+		snapshot: RunnableSnapshot;
+		onevidence: (target: RunEvidenceTarget) => void;
+		onselect: (runId: string) => void;
+	} = $props();
+	const run = $derived(snapshot.run);
+	const outcome = $derived(run.outcome);
+	const failure = $derived(outcome?.status === 'not-done' ? outcome.failure : undefined);
+	const issues = $derived(snapshot.children.filter(needsAttention));
+	const logs = $derived(snapshot.logs.map((log, index) => ({ log, index })).filter(({ log }) => log.level === 'error' || log.level === 'warn'));
+	let resultOpen = $state(false);
+	$effect(() => { void run.id; resultOpen = false; });
+</script>
+
+<section aria-label="Run summary" class="grid min-w-0 gap-4 rounded-lg border border-border bg-muted/10 p-4 sm:p-5">
+	<div class="flex flex-wrap items-center justify-between gap-3"><h3 class="text-sm font-semibold">What happened</h3><RunOutcomeBadge {run} /></div>
+
+	{#if outcomeReason(run)}<div class="min-w-0 text-sm leading-relaxed"><MarkdownRenderer content={outcomeReason(run)!} /></div>
+	{:else if outcome?.status === 'done'}<p class="text-sm">{run.resultMode === 'outcome' ? 'The owner reported that the task’s goal was achieved.' : 'The execution completed and recorded its result.'}</p>
+	{:else if run.status === 'unverified'}<p class="text-sm text-muted-foreground">The execution status could not be verified. No task outcome was recorded.</p>
+	{:else}<p class="text-sm text-muted-foreground">{getRunStatusDisplay(run.status).active ? 'Work is in progress. The owner has not reported a task outcome yet.' : 'No task outcome was recorded. The execution state alone does not establish success.'}</p>{/if}
+	<p class="text-xs leading-relaxed text-muted-foreground">Execution: {getRunStatusDisplay(run.status).label}{run.endedAt != null ? ` · ${formatDuration(run.endedAt - run.startedAt)}` : ''} · {snapshot.children.length} child executions · {snapshot.artifacts.length} artifacts · {snapshot.logs.length} log entries</p>
+	{#if failure}<div class="grid min-w-0 gap-2 border-l-2 border-destructive pl-3 text-sm"><p><code class="text-xs">{failure.code}</code> {failure.message}</p>{#if failure.recoveryHint}<MarkdownRenderer content={failure.recoveryHint} />{/if}<div><Button size="sm" variant="outline" onclick={() => onevidence({ kind: 'outcome' })}>Inspect failure evidence →</Button></div></div>{/if}
+	{#if outcome && 'value' in outcome && outcome.value !== undefined}
+		{#if typeof outcome.value === 'string'}<div class="min-w-0 border-t border-border pt-4 text-sm"><MarkdownRenderer content={outcome.value} /></div>
+		{:else}<details open={resultOpen} ontoggle={event => resultOpen = event.currentTarget.open}><summary class="cursor-pointer text-sm font-medium focus-visible:outline-2 focus-visible:outline-ring">Recorded result</summary>{#if resultOpen}<div class="mt-3"><RunEvidence title="Recorded result" value={outcome.value} /></div>{/if}</details>{/if}
+	{/if}
+	{#if issues.length > 0}<div class="grid gap-2 border-t border-border pt-4"><h4 class="text-xs font-medium text-muted-foreground">Child executions with recorded issues</h4>{#each issues as child (child.id)}<Button variant="ghost" class="h-auto justify-start whitespace-normal text-left" onclick={() => onselect(child.id)}><span class="grid min-w-0 gap-1"><span>{runTitle(child)}</span><span class="break-words text-xs font-normal text-muted-foreground">{outcomeReason(child) ?? 'The owner reported an execution error.'} →</span></span></Button>{/each}</div>{/if}
+	{#if logs.length > 0}<div class="grid gap-2 border-t border-border pt-4"><h4 class="text-xs font-medium text-muted-foreground">Recorded warnings and errors</h4>{#each logs.slice(-5) as { log, index }}<Button variant="ghost" class="h-auto justify-start whitespace-normal text-left" onclick={() => onevidence({ kind: 'log', index })}><span class="grid min-w-0 gap-1"><span class="text-xs text-muted-foreground">{log.level} · {new Date(log.ts).toLocaleTimeString()}</span><span class="break-words text-sm font-normal">{log.message} →</span></span></Button>{/each}{#if logs.length > 5}<p class="text-xs text-muted-foreground">Showing the latest 5 of {logs.length}. All entries are in the execution thread.</p>{/if}</div>{/if}
+	{#if snapshot.artifacts.length > 0}<div class="grid gap-2 border-t border-border pt-4"><h4 class="text-xs font-medium text-muted-foreground">Produced evidence</h4><div class="flex flex-wrap gap-2">{#each snapshot.artifacts as artifact (artifact.id)}<Button variant="outline" size="sm" class="max-w-full whitespace-normal break-all text-left" onclick={() => onevidence({ kind: 'artifact', id: artifact.id })}>{artifact.name} →</Button>{/each}</div></div>{/if}
+	<div class="flex flex-wrap gap-2 border-t border-border pt-3"><Button variant="outline" size="sm" onclick={() => onevidence({ kind: 'outcome' })} disabled={!outcome}>Outcome evidence</Button><Button variant="ghost" size="sm" onclick={() => onevidence({ kind: 'input' })}>Input</Button>{#if run.ref}<Button variant="ghost" size="sm" onclick={() => onevidence({ kind: 'reference' })}>Execution reference</Button>{/if}</div>
+</section>

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

@@ -0,0 +1,11 @@
+import type { RunnableSnapshot } from '../../schemas/runs.ts';
+import type { RunEvidenceTarget } from '../lib/run-investigation.ts';
+type $$ComponentProps = {
+    snapshot: RunnableSnapshot;
+    onevidence: (target: RunEvidenceTarget) => void;
+    onselect: (runId: string) => void;
+};
+declare const RunSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunSummary = ReturnType<typeof RunSummary>;
+export default RunSummary;
+//# sourceMappingURL=RunSummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunSummary.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAMpE,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AA0CH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/RunsView.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import { Resizable } from '@vibesdotdev/kit/components/ui/resizable';
+	import type { RunnableSnapshot } from '../../schemas/runs.js';
+	import type { RunsStore } from '../runs.store.svelte.js';
+	import { isActiveRunStatus } from '../lib/status.js';
+	import { needsAttention, type RunViewFilter } from '../lib/run-presentation.js';
+	import RunBrowser from './RunBrowser.svelte';
+	import RunIssues from './RunIssues.svelte';
+	import RunTree from './records/RunTree.svelte';
+	import { withRunAncestors } from './records/tree-projection.js';
+	import RunDetail from './records/RunDetail.svelte';
+
+	interface Props {
+		store: RunsStore;
+		title?: string;
+		sections?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+		requests?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+		thread?: Snippet<[RunnableSnapshot, number | null]>;
+		overview?: Snippet<[RunsStore]>;
+		issues?: Snippet<[RunsStore, (id: string) => void, () => void]>;
+		origin?: string;
+	}
+
+	let { store, title = 'Runs', sections, requests, thread, overview, issues, origin }: Props = $props();
+	const desktop = new MediaQuery('(min-width: 768px)');
+	let filter = $state<RunViewFilter>('all');
+	let issueBranches = $state(false);
+	let inspectorViewport: HTMLDivElement | undefined = $state();
+	let browserViewport: HTMLDivElement | undefined = $state();
+	const failure = $derived(store.error == null ? null : CapabilityError.from(CaughtFailureSchema.parse(store.error)));
+	const runs = $derived(store.listRows.map(row => row.run));
+	const active = $derived(runs.filter(run => run.status !== 'unverified' && isActiveRunStatus(run.status)));
+	const unverified = $derived(runs.filter(run => run.status === 'unverified'));
+	const unverifiedIds = $derived(new Set(unverified.map(run => run.id)));
+	const unverifiedTree = $derived(withRunAncestors(runs, unverified));
+	const attention = $derived(runs.filter(needsAttention));
+	const activeIds = $derived(new Set(active.map(run => run.id)));
+	const activeTree = $derived(withRunAncestors(runs, active));
+
+	const achieved = $derived(runs.filter(run => run.outcome?.status === 'done'));
+	const summaries = $derived([
+		{ id: 'all', label: 'Recorded', count: runs.length },
+		{ id: 'active', label: 'In progress or unverified', count: active.length + unverified.length },
+		{ id: 'unverified', label: 'Status unverified', count: unverified.length },
+		{ id: 'attention', label: 'Issue history', count: attention.length },
+		{ id: 'done', label: 'Goal achieved', count: achieved.length },
+	] satisfies Array<{ id: RunViewFilter; label: string; count: number }>);
+	const connectionLabel = $derived(failure ? 'Updates interrupted' : store.connection === 'open' ? 'Connected' : store.connection === 'connecting' ? 'Connecting' : 'Disconnected');
+
+	async function reconnect() {
+		const result = await settle(async () => {
+			await store.close();
+			await store.open();
+		});
+		if (!result.ok) store.error = result.cause;
+	}
+
+	async function select(id: string | null) {
+		const previous = store.selectedId;
+		await settle(() => store.select(id));
+		await tick();
+		inspectorViewport?.scrollTo({ top: 0 });
+		if (id === null && previous && browserViewport) {
+			browserViewport.querySelector<HTMLElement>(`[data-run-id="${CSS.escape(previous)}"]`)?.focus({ preventScroll: true });
+		}
+	}
+</script>
+
+{#snippet browser()}
+	<RunBrowser {runs} selected={store.selectedId} loading={store.loading} bind:filter onselect={select} />
+{/snippet}
+
+{#snippet issuesView()}
+	{#if issues}{@render issues(store, id => { void select(id); }, () => { filter = 'attention'; issueBranches = true; void select(null); })}
+	{:else}<RunIssues {runs} onselect={select} onbrowse={() => { filter = 'attention'; issueBranches = true; void select(null); }} />{/if}
+{/snippet}
+
+{#snippet inspector()}
+	<div class="h-full min-w-0 overflow-y-auto bg-background" bind:this={inspectorViewport}>
+		<div class="mx-auto grid w-full min-w-0 max-w-screen-xl gap-6 p-4 sm:p-6 lg:p-8">
+			{@render overview?.(store)}
+			{#if store.selectedId !== null}
+				<div><Button variant="ghost" size="sm" onclick={() => select(null)}>← Back to runs</Button></div>
+				{#if store.selected}
+					<RunDetail snapshot={store.selected} {store} {sections} {requests} {thread} {origin} onselect={select} />
+				{:else}
+					<section aria-label="Selected run" aria-busy={store.detailLoading} class="grid gap-4 py-12">
+						<h2 class="text-lg font-semibold">{store.detailLoading ? 'Loading recorded run' : 'Recorded run unavailable'}</h2>
+						<code class="break-all text-xs text-muted-foreground">{store.selectedId}</code>
+						{#if store.detailLoading}<p role="status" class="text-sm text-muted-foreground">Reading this run’s recorded evidence.</p>
+						{:else}<Button variant="outline" onclick={() => select(store.selectedId)}>Retry selected run</Button>{/if}
+					</section>
+				{/if}
+			{:else}
+				<section class="grid gap-2">
+					<p class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Current subscription</p>
+					<h2 class="text-2xl font-semibold tracking-tight">Understand the work</h2>
+					<p class="max-w-xl text-sm leading-relaxed text-muted-foreground">Expand a run to follow its tasks. Open any task for its result, evidence, and requests from its agent.</p>
+				</section>
+				{#if store.loading}<p role="status" class="text-sm text-muted-foreground">Waiting for the first snapshot.</p>
+				{:else if runs.length === 0}<p class="py-8 text-sm text-muted-foreground">No runs have been recorded in this subscription.</p>
+				{:else}
+					<section aria-label="Runs in progress" class="grid gap-3">
+						<div class="flex items-center justify-between gap-3"><h3 class="text-sm font-semibold">Happening now</h3><Badge variant="outline">{active.length}</Badge></div>
+						{#if active.length > 0}<RunTree runs={activeTree} matchedIds={activeIds} onselect={select} />
+						{:else}<p class="text-sm text-muted-foreground">No active executions reported.</p>{/if}
+					</section>
+					{#if unverified.length > 0}
+						<section aria-label="Runs with unverified status" class="grid gap-3">
+							<div class="flex items-center justify-between gap-3"><h3 class="text-sm font-semibold">Status unverified</h3><Badge variant="outline">{unverified.length}</Badge></div>
+							<p class="text-sm text-muted-foreground">These executions may still be active; their current status could not be verified.</p>
+							<RunTree runs={unverifiedTree} matchedIds={unverifiedIds} onselect={select} />
+						</section>
+					{/if}
+					{@render issuesView()}
+
+				{/if}
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+<div class="flex h-svh min-h-0 flex-col overflow-hidden bg-background font-sans text-foreground" aria-label={title}>
+	<header class="flex min-h-14 shrink-0 flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-3 sm:px-6">
+		<div class="flex min-w-0 items-center gap-3"><h1 class="truncate text-sm font-semibold">{title}</h1><span class="hidden text-xs text-muted-foreground sm:inline">Execution & evidence</span></div>
+		<div class="flex items-center gap-3 text-xs text-muted-foreground">
+			<p role="status" title={`Subscription ${store.connection}; revision ${store.revision ?? 'not received'}; snapshot received ${store.lastReceivedAt == null ? 'not yet' : new Date(store.lastReceivedAt).toLocaleString()}`} class="flex items-center gap-2"><span class={['size-1.5 rounded-full', failure ? 'bg-destructive' : 'bg-current']} aria-hidden="true"></span>{connectionLabel}</p>
+			{#if store.lastReceivedAt != null}<span class="hidden lg:inline">Snapshot <time datetime={new Date(store.lastReceivedAt).toISOString()}>{new Date(store.lastReceivedAt).toLocaleTimeString()}</time></span>{/if}
+			<Button variant="ghost" size="sm" onclick={reconnect} loading={store.loading}>Refresh</Button>
+		</div>
+	</header>
+	{#if failure}<div class="shrink-0 px-4 py-3"><Alert variant="destructive"><AlertTitle>{failure.message}</AlertTitle><AlertDescription><code>{failure.code}</code> {failure.reason ?? ''} Previously received records remain visible.</AlertDescription></Alert></div>{/if}
+	<nav aria-label="Run summaries for the current subscription" class="grid shrink-0 grid-cols-5 border-b border-border bg-muted/10">
+		{#each summaries as summary (summary.id)}
+			<Button variant="ghost" class="grid h-auto gap-1 rounded-none px-2 py-3 text-left aria-pressed:bg-accent sm:px-5" aria-pressed={filter === summary.id} onclick={() => { filter = summary.id; issueBranches = false; void select(null); }}>
+				<span class="text-lg font-semibold tabular-nums sm:text-xl">{store.revision == null ? '—' : summary.count}</span><span class="flex min-h-8 items-center whitespace-normal text-xs font-normal leading-tight text-muted-foreground sm:min-h-0">{summary.label}</span>
+			</Button>
+		{/each}
+	</nav>
+	<div class="min-h-0 flex-1">
+		{#if desktop.current}
+			<Resizable.PaneGroup direction="horizontal">
+				<Resizable.Pane defaultSize={34} minSize={24} maxSize={55}>{@render browser()}</Resizable.Pane>
+				<Resizable.Handle withHandle aria-label="Resize run browser" />
+				<Resizable.Pane defaultSize={66} minSize={40}>{@render inspector()}</Resizable.Pane>
+			</Resizable.PaneGroup>
+		{:else}
+			<div class={['flex h-full min-h-0 flex-col', store.selectedId !== null && 'hidden']} bind:this={browserViewport}>
+				{#if store.selectedId === null && overview}<div class="max-h-64 shrink-0 overflow-y-auto p-4">{@render overview(store)}</div>{/if}
+				{#if filter === 'attention' && !issueBranches}<div class="min-h-0 flex-1 overflow-y-auto p-4">{@render issuesView()}</div>
+				{:else}<div class="min-h-0 flex-1">{@render browser()}</div>{/if}
+			</div>
+			{#if store.selectedId !== null}{@render inspector()}{/if}
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { RunnableSnapshot } from '../../schemas/runs.ts';
+import type { RunsStore } from '../runs.store.svelte.ts';
+interface Props {
+    store: RunsStore;
+    title?: string;
+    sections?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+    requests?: Snippet<[RunnableSnapshot, RunsStore | undefined]>;
+    thread?: Snippet<[RunnableSnapshot, number | null]>;
+    overview?: Snippet<[RunsStore]>;
+    issues?: Snippet<[RunsStore, (id: string) => void, () => void]>;
+    origin?: string;
+}
+declare const RunsView: import("svelte").Component<Props, {}, "">;
+type RunsView = ReturnType<typeof RunsView>;
+export default RunsView;
+//# sourceMappingURL=RunsView.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunsView.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RunsView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAO5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAUxD,UAAU,KAAK;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA4JF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}