@vibesdotdev/tools 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/tool-widgets/RunFeedbackInbox.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import { RunsStore, type RunsSource } from '@vibesdotdev/runnable/svelte';
+	import type { RunnableCatalogRun } from '@vibesdotdev/runnable/schemas/runs';
+	import { readRunFeedback } from '../../tools/run-feedback/schemas.js';
+	import RunFeedbackPanel from './RunFeedbackPanel.svelte';
+
+	interface Props {
+		runs: readonly RunnableCatalogRun[];
+		source: RunsSource;
+		onselect: (id: string) => void;
+		loading?: boolean;
+	}
+	let { runs, source, onselect, loading = false }: Props = $props();
+	const activeIds = $derived(runs.filter(run => run.endedAt == null && ['running', 'paused', 'loading'].includes(run.status)).map(run => run.id).sort());
+	// Catalog revisions can replace rows without changing subscription membership.
+	const membership = $derived(JSON.stringify(activeIds));
+	let watches = $state.raw<RunsStore[]>([]);
+	let failure = $state.raw<CapabilityError | null>(null);
+	let requestCheck = $state(0);
+	const checking = $derived(loading || membership !== JSON.stringify(watches.map(watch => watch.query.id).sort()) || watches.some(watch => watch.loading || watch.revision === null));
+	const watchFailure = $derived(watches.find(watch => watch.error != null)?.error);
+	const issue = $derived(failure ?? (watchFailure == null ? null : CapabilityError.from(CaughtFailureSchema.parse(watchFailure))));
+	const requests = $derived(watches.flatMap(watch => watch.snapshot?.runs ?? []).flatMap(snapshot => {
+		if (snapshot.run.endedAt != null || !['running', 'paused', 'loading'].includes(snapshot.run.status)) return [];
+		const feedback = readRunFeedback(snapshot);
+		return feedback.requests.some(request => !request.answer || !feedback.received.has(request.id)) ? [snapshot] : [];
+	}));
+	const pendingCount = $derived(requests.reduce((count, snapshot) => count + readRunFeedback(snapshot).requests.filter(request => !request.answer).length, 0));
+
+	async function observe(work: () => Promise<void>, current: () => boolean = () => true) {
+		const outcome = await settle(work);
+		if (!outcome.ok && current()) failure = CapabilityError.from(CaughtFailureSchema.parse(outcome.cause));
+	}
+	$effect(() => {
+		void membership;
+		void requestCheck;
+		const currentSource = source;
+		const instances = untrack(() => activeIds).map(id => new RunsStore(currentSource, { id }, 'snapshot'));
+		watches = instances;
+		failure = null;
+		let active = true;
+		const current = () => active && watches === instances;
+		// Admit each initial snapshot before the next. Concurrent watch POSTs can
+		// occupy the browser's HTTP sockets while their callback answers wait.
+		untrack(() => {
+			void observe(async () => {
+				for (const store of instances) {
+					if (!current()) return;
+					await observe(() => store.open(), current);
+				}
+			}, current);
+		});
+		return () => {
+			active = false;
+			for (const store of instances) void observe(() => store.close());
+		};
+	});
+</script>
+
+<section aria-label="Requests for your input" class="grid min-w-0 gap-3 rounded-lg border border-border p-4">
+	<div class="flex items-center justify-between gap-3">
+		<h3 class="text-sm font-semibold">Needs your input</h3>
+		{#if !checking && !issue}<span class="text-sm font-semibold tabular-nums">{pendingCount}</span>{/if}
+	</div>
+	{#if issue}
+		<Alert variant="destructive"><AlertTitle>Requests could not be checked</AlertTitle><AlertDescription>{issue.message} Open an execution to inspect its recorded requests.</AlertDescription></Alert>
+		<div><Button variant="outline" size="sm" onclick={() => { requestCheck++; }}>Check requests again</Button></div>
+	{:else if checking}
+		<p role="status" class="text-sm text-muted-foreground">Checking active executions for unanswered questions…</p>
+	{:else if pendingCount === 0 && requests.length > 0}
+		<p role="status" class="text-sm text-muted-foreground">Answers recorded. Waiting for the executions to acknowledge them.</p>
+	{:else if pendingCount === 0}
+		<p class="text-sm text-muted-foreground">No unanswered questions were found in this subscription’s active executions.</p>
+		<p class="text-xs leading-relaxed text-muted-foreground">Recorded issues are past execution results. They are separate from requests for an answer or decision.</p>
+	{/if}
+	{#each requests as snapshot (snapshot.run.id)}
+		<div class="grid min-w-0 gap-2 border-t border-border pt-3">
+			<h4 class="break-words text-sm font-medium">{snapshot.run.context?.title ?? snapshot.run.name ?? snapshot.run.runnableId}</h4>
+			<RunFeedbackPanel {snapshot} {source} />
+			<div><Button variant="ghost" size="sm" onclick={() => onselect(snapshot.run.id)}>Open execution evidence →</Button></div>
+		</div>
+	{/each}
+</section>

package/dist/svelte/tool-widgets/RunFeedbackInbox.svelte.d.ts

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

package/dist/svelte/tool-widgets/RunFeedbackInbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunFeedbackInbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/RunFeedbackInbox.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAK5E,UAAU,KAAK;IACd,IAAI,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAqFF,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/tool-widgets/RunFeedbackPanel.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { JsonObjectSchema } from '@vibesdotdev/kernel/schemas/json';
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import type { RunnableSnapshot, RunnableClient } from '@vibesdotdev/runnable';
+	import { readRunFeedback, RUN_FEEDBACK_EVENT, type RunFeedbackEvent } from '../../tools/run-feedback/schemas.js';
+
+	let { snapshot, source }: { snapshot: RunnableSnapshot; source: Pick<RunnableClient, 'appendEvent'> } = $props();
+	const feedback = $derived(readRunFeedback(snapshot));
+	const active = $derived(snapshot.run.endedAt == null && ['running', 'paused', 'loading'].includes(snapshot.run.status));
+	const unverified = $derived(snapshot.run.status === 'unverified');
+	let answers = $state<Record<string, string>>({});
+	let message = $state('');
+	let pending = $state(false);
+	let error = $state.raw<CapabilityError | null>(null);
+	const uid = $props.id();
+	let generation = 0;
+	$effect(() => { void snapshot.run.id; generation++; message = ''; answers = {}; error = null; pending = false; return () => { generation++; }; });
+
+	async function send(event: RunFeedbackEvent) {
+		const ticket = generation;
+		pending = true;
+		error = null;
+		const result = await settle(() => source.appendEvent(snapshot.run.id, RUN_FEEDBACK_EVENT, { feedback: JsonObjectSchema.parse(event) }));
+		if (ticket !== generation) return;
+		pending = false;
+		if (!result.ok) error = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+		else if (event.kind === 'steer') message = '';
+	}
+</script>
+
+	<section aria-label="Requests and guidance" class="grid min-w-0 gap-4 rounded-lg border border-border p-4">
+		<h3 class="text-sm font-semibold">Requests and guidance</h3>
+		{#if feedback.requests.length === 0}<p class="text-sm text-muted-foreground">No question has been recorded for this execution.</p>{/if}
+		{#if unverified}<p class="text-xs text-muted-foreground">The execution status is unverified, so its guidance channel is unavailable.</p>
+		{:else if !active}<p class="text-xs text-muted-foreground">This execution has ended and cannot receive answers or guidance.</p>
+		{:else if !feedback.ready}<p class="text-xs text-muted-foreground">The execution has not opened a guidance channel.</p>{/if}
+		{#each feedback.requests as request (request.id)}
+			<div class="grid min-w-0 gap-3 border-t border-border pt-4"><div class="flex flex-wrap justify-between gap-2 text-xs text-muted-foreground"><span>{request.answer ? feedback.received.has(request.id) ? 'Answer received by execution' : 'Answer recorded · awaiting receipt' : active ? 'Waiting for your answer' : unverified ? 'Answer not recorded · status unverified' : 'Ended without an answer'}</span><time datetime={new Date(request.ts).toISOString()}>{new Date(request.ts).toLocaleTimeString()}</time></div><div class="min-w-0 text-sm"><MarkdownRenderer content={request.message} /></div>
+			{#if request.answer?.kind === 'answer'}<div class="min-w-0 rounded-md bg-muted/30 p-3 text-sm"><MarkdownRenderer content={request.answer.message} /></div>
+			{:else if active}<form class="grid gap-2" onsubmit={event => { event.preventDefault(); void send({ kind: 'answer', id: crypto.randomUUID(), requestId: request.id, message: answers[request.id].trim() }); }}><Label for={`${uid}-${request.id}`}>Your answer</Label><Textarea id={`${uid}-${request.id}`} bind:value={answers[request.id]} disabled={pending} rows={3} placeholder="Give the information needed to continue…" maxlength={20000} /><div><Button type="submit" size="sm" disabled={pending || !answers[request.id]?.trim()}>Send answer</Button></div></form>{/if}</div>
+		{/each}
+		{#each feedback.steering as entry (entry.id)}<div class="grid min-w-0 gap-2 border-t border-border pt-3"><span class="text-xs text-muted-foreground">{feedback.received.has(entry.id) ? 'Guidance received by execution' : active ? 'Guidance queued for the next turn' : unverified ? 'Guidance receipt unverified' : 'Execution ended before receipt'}</span><div class="text-sm"><MarkdownRenderer content={entry.message} /></div></div>{/each}
+		{#if active && feedback.ready}<form class="grid gap-2 border-t border-border pt-4" onsubmit={event => { event.preventDefault(); void send({ kind: 'steer', id: crypto.randomUUID(), message: message.trim() }); }}><Label for={`${uid}-guidance`}>Steer this execution</Label><Textarea id={`${uid}-guidance`} bind:value={message} disabled={pending} rows={3} placeholder="Add context, change the emphasis, or suggest the next step…" maxlength={20000} /><p class="text-xs leading-relaxed text-muted-foreground">Delivered at the next model turn. Guidance does not grant approvals or change permissions.</p><div><Button type="submit" size="sm" disabled={pending || !message.trim()} loading={pending}>Send guidance</Button></div></form>{/if}
+		{#if error}<Alert variant="destructive"><AlertTitle>Feedback could not be sent</AlertTitle><AlertDescription>{error.message}</AlertDescription></Alert>{/if}
+	</section>

package/dist/svelte/tool-widgets/RunFeedbackPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { RunnableSnapshot, RunnableClient } from '@vibesdotdev/runnable';
+type $$ComponentProps = {
+    snapshot: RunnableSnapshot;
+    source: Pick<RunnableClient, 'appendEvent'>;
+};
+declare const RunFeedbackPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunFeedbackPanel = ReturnType<typeof RunFeedbackPanel>;
+export default RunFeedbackPanel;
+//# sourceMappingURL=RunFeedbackPanel.svelte.d.ts.map

package/dist/svelte/tool-widgets/RunFeedbackPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunFeedbackPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/RunFeedbackPanel.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG7E,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,CAAA;CAAE,CAAC;AAsDtG,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/tool-widgets/RunLogThread.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { CapabilityError, CaughtFailureSchema, settle } from '@vibesdotdev/kernel';
+	import { Alert, AlertTitle, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import { LogViewer, type RunnableLogEntry } from '@vibesdotdev/runnable/svelte';
+	import type { ToolWidgetResolver } from '@vibesdotdev/kit/components/tool-widgets';
+	import { registerFirstPartyToolWidgets } from '../tools-svelte.plugin.js';
+	import { runLogThread } from './run-log-thread.js';
+
+	let { logs, focusedIndex = null, resolver }: { logs: RunnableLogEntry[]; focusedIndex?: number | null; resolver?: ToolWidgetResolver } = $props();
+	const thread = $derived(runLogThread(logs));
+	let registered = $state(false);
+	let error = $state.raw<CapabilityError | null>(null);
+	onMount(() => {
+		let active = true;
+		void settle(registerFirstPartyToolWidgets).then(result => {
+			if (!active) return;
+			if (result.ok) registered = true;
+			else error = CapabilityError.from(CaughtFailureSchema.parse(result.cause));
+		});
+		return () => { active = false; };
+	});
+</script>
+
+<div class="grid min-w-0 gap-3">
+	{#if error}<Alert variant="destructive"><AlertTitle>Tool widgets could not load</AlertTitle><AlertDescription>{error.message}</AlertDescription></Alert>{/if}
+	<p class="text-xs leading-relaxed text-muted-foreground">{logs.length} recorded events · Tool updates are grouped by call. Expand an entry for its source evidence.</p>
+	{#if registered || error || resolver}<LogViewer logs={thread.entries} focusedIndex={focusedIndex === null ? null : thread.focus.get(focusedIndex) ?? focusedIndex} {resolver} toolForLog={log => thread.calls.get(Number(log.id)) ?? null} />{:else}<p role="status" class="text-sm text-muted-foreground">Preparing execution thread…</p>{/if}
+</div>

package/dist/svelte/tool-widgets/RunLogThread.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type RunnableLogEntry } from '@vibesdotdev/runnable/svelte';
+import type { ToolWidgetResolver } from '@vibesdotdev/kit/components/tool-widgets';
+type $$ComponentProps = {
+    logs: RunnableLogEntry[];
+    focusedIndex?: number | null;
+    resolver?: ToolWidgetResolver;
+};
+declare const RunLogThread: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunLogThread = ReturnType<typeof RunLogThread>;
+export default RunLogThread;
+//# sourceMappingURL=RunLogThread.svelte.d.ts.map

package/dist/svelte/tool-widgets/RunLogThread.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunLogThread.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/RunLogThread.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAIlF,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAiCpH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/tool-widgets/SandboxExecuteToolCard.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `sandbox-execute`.
+	 */
+	import { CodeViewer } from '@vibesdotdev/kit/components/code';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import * as z from 'zod/v4';
+	import { readCardPayload } from './payload.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const SandboxInputFields = { code: z.string(), language: z.string() };
+	const SandboxOutputFields = { exitCode: z.number(), stdout: z.string(), stderr: z.string() };
+
+	const input = $derived(readCardPayload(SandboxInputFields, tool.input));
+	const output = $derived(readCardPayload(SandboxOutputFields, tool.output));
+	const code = $derived(input.get('code') ?? '');
+	const language = $derived(input.get('language') ?? 'typescript');
+	const exitCode = $derived(output.get('exitCode') ?? null);
+	const stdout = $derived(output.get('stdout') ?? '');
+	const stderr = $derived(output.get('stderr') ?? '');
+	const ok = $derived(exitCode === 0 || exitCode === null);
+</script>
+
+<ToolCard {tool} {compact} title="Sandbox" icon="lucide:box">
+	<ToolCardBody {compact}>
+		{#if exitCode !== null}
+			<Badge variant={ok ? 'secondary' : 'destructive'} class="text-caption">
+				exit {exitCode}
+			</Badge>
+		{/if}
+		{#if code}
+			<CodeViewer
+				{code}
+				{language}
+				appearance="system"
+				maxHeight="12rem"
+				minHeight="0"
+				showLineNumbers
+			/>
+		{/if}
+		{#if stdout}
+			<CodeViewer
+				code={stdout}
+				language="plaintext"
+				appearance="system"
+				maxHeight="12rem"
+				minHeight="0"
+				showLineNumbers={false}
+			/>
+		{/if}
+		{#if stderr}
+			<CodeViewer
+				code={stderr}
+				language="plaintext"
+				appearance="system"
+				maxHeight="8rem"
+				minHeight="0"
+				showLineNumbers={false}
+			/>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/svelte/tool-widgets/SandboxExecuteToolCard.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type ToolWidgetProps } from '@vibesdotdev/kit/components/tool-widgets';
+declare const SandboxExecuteToolCard: import("svelte").Component<ToolWidgetProps, {}, "">;
+type SandboxExecuteToolCard = ReturnType<typeof SandboxExecuteToolCard>;
+export default SandboxExecuteToolCard;
+//# sourceMappingURL=SandboxExecuteToolCard.svelte.d.ts.map

package/dist/svelte/tool-widgets/SandboxExecuteToolCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SandboxExecuteToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/SandboxExecuteToolCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AAgDnD,QAAA,MAAM,sBAAsB,qDAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/tool-widgets/ToolCallToolCard.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `tool-call`: nested tool id and a designed result summary.
+	 */
+	import { CodeViewer } from '@vibesdotdev/kit/components/code';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import * as z from 'zod/v4';
+	import { parsedOrUndefined, readCardPayload, readPayload } from './payload.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const ToolCallInputFields = { toolId: z.string() };
+	const ToolCallOutputFields = { toolId: z.string(), result: z.unknown() };
+	// A scalar result is shown as text; a structured one through its named fields.
+	const ScalarResultSchema = z.union([z.string(), z.number(), z.boolean()]);
+	// A nested scalar `result` wins outright; a nested text `result` takes its turn in the text chain.
+	const NestedResultSchema = z.union([
+		z.string().transform((value) => ({ kind: 'text' as const, value })),
+		z.union([z.number(), z.boolean()]).transform((value) => ({ kind: 'scalar' as const, value: String(value) }))
+	]);
+	const ResultFields = {
+		result: NestedResultSchema,
+		content: z.string(),
+		text: z.string(),
+		summary: z.string(),
+		message: z.string(),
+		stdout: z.string(),
+		stderr: z.string(),
+		ok: z.boolean(),
+		success: z.boolean(),
+		status: z.string(),
+		exitCode: z.number()
+	};
+
+	const input = $derived(readCardPayload(ToolCallInputFields, tool.input));
+	const output = $derived(readCardPayload(ToolCallOutputFields, tool.output));
+	const toolId = $derived(output.get('toolId') || input.get('toolId') || '');
+	const result = $derived(output.get('result'));
+
+	const scalarResult = $derived(parsedOrUndefined(readPayload(ScalarResultSchema, result)));
+	const resultRecord = $derived(readCardPayload(ResultFields, result));
+	const resultText = $derived.by(() => {
+		if (scalarResult !== undefined) return String(scalarResult);
+		const row = resultRecord;
+		if (!row.isObject()) return '';
+		const nested = row.get('result');
+		if (nested?.kind === 'scalar') return nested.value;
+		return (
+			row.get('content') ||
+			row.get('text') ||
+			(nested?.kind === 'text' ? nested.value : '') ||
+			row.get('summary') ||
+			row.get('message') ||
+			row.get('stdout') ||
+			''
+		);
+	});
+	const resultStatus = $derived.by(() => {
+		const row = resultRecord;
+		if (!row.isObject()) return '';
+		if (row.get('ok') === false || row.get('success') === false) return 'failed';
+		if (row.get('ok') === true || row.get('success') === true) return 'ok';
+		return row.get('status') ?? '';
+	});
+	const exitCode = $derived(resultRecord.get('exitCode') ?? null);
+	const stderr = $derived(resultRecord.get('stderr') ?? '');
+	const failed = $derived(resultStatus === 'failed' || (exitCode !== null && exitCode !== 0));
+</script>
+
+<ToolCard {tool} {compact} title={toolId ? `Call ${toolId}` : 'Tool call'} icon="lucide:workflow">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			{#if toolId}
+				<Badge variant="outline" class="font-mono text-caption">{toolId}</Badge>
+			{/if}
+			{#if resultStatus}
+				<Badge variant={failed ? 'destructive' : 'secondary'} class="text-caption">
+					{resultStatus}
+				</Badge>
+			{/if}
+			{#if exitCode !== null}
+				<Badge variant={exitCode === 0 ? 'secondary' : 'destructive'} class="text-caption">
+					exit {exitCode}
+				</Badge>
+			{/if}
+		</div>
+		{#if resultText}
+			<CodeViewer
+				code={resultText}
+				language="plaintext"
+				appearance="system"
+				maxHeight="16rem"
+				minHeight="0"
+				showLineNumbers={false}
+			/>
+		{/if}
+		{#if stderr}
+			<div>
+				<div class="mb-1 text-caption font-medium tracking-wider text-muted-foreground uppercase">
+					stderr
+				</div>
+				<CodeViewer
+					code={stderr}
+					language="plaintext"
+					appearance="system"
+					maxHeight="8rem"
+					minHeight="0"
+					showLineNumbers={false}
+				/>
+			</div>
+		{/if}
+		{#if result !== undefined && !resultText && !stderr && !tool.error}
+			<p class="text-muted-foreground italic">Completed.</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/svelte/tool-widgets/ToolCallToolCard.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type ToolWidgetProps } from '@vibesdotdev/kit/components/tool-widgets';
+declare const ToolCallToolCard: import("svelte").Component<ToolWidgetProps, {}, "">;
+type ToolCallToolCard = ReturnType<typeof ToolCallToolCard>;
+export default ToolCallToolCard;
+//# sourceMappingURL=ToolCallToolCard.svelte.d.ts.map

package/dist/svelte/tool-widgets/ToolCallToolCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCallToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/ToolCallToolCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AA4GnD,QAAA,MAAM,gBAAgB,qDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/tool-widgets/ToolHelpToolCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `tool-help`: which tool was inspected and its summary.
+	 */
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import * as z from 'zod/v4';
+	import { readCardPayload } from './payload.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const ToolHelpInputFields = { toolId: z.string() };
+	const ToolHelpOutputFields = { toolId: z.string(), name: z.string(), description: z.string() };
+
+	const input = $derived(readCardPayload(ToolHelpInputFields, tool.input));
+	const output = $derived(readCardPayload(ToolHelpOutputFields, tool.output));
+	const toolId = $derived(output.get('toolId') || input.get('toolId') || '');
+	const name = $derived(output.get('name') ?? '');
+	const description = $derived(output.get('description') ?? '');
+</script>
+
+<ToolCard {tool} {compact} title={name || toolId || 'Tool help'} icon="lucide:circle-help">
+	<ToolCardBody {compact}>
+		{#if toolId}
+			<Badge variant="outline" class="text-caption font-mono">{toolId}</Badge>
+		{/if}
+		{#if description}
+			<p class="text-foreground">{description}</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/svelte/tool-widgets/ToolHelpToolCard.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type ToolWidgetProps } from '@vibesdotdev/kit/components/tool-widgets';
+declare const ToolHelpToolCard: import("svelte").Component<ToolWidgetProps, {}, "">;
+type ToolHelpToolCard = ReturnType<typeof ToolHelpToolCard>;
+export default ToolHelpToolCard;
+//# sourceMappingURL=ToolHelpToolCard.svelte.d.ts.map

package/dist/svelte/tool-widgets/ToolHelpToolCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolHelpToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/ToolHelpToolCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AAoCnD,QAAA,MAAM,gBAAgB,qDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/tool-widgets/ToolSearchToolCard.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `tool-search`: capability matches, not a JSON dump.
+	 */
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import {
+		ToolCard,
+		ToolCardBody,
+		type ToolWidgetProps
+	} from '@vibesdotdev/kit/components/tool-widgets';
+	import * as z from 'zod/v4';
+	import { readCardPayload, readCardPayloadList } from './payload.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const ToolSearchInputFields = { query: z.string() };
+	const ToolSearchOutputFields = { next: z.string(), availableCount: z.number(), matches: z.unknown() };
+	const ToolMatchFields = {
+		toolId: z.string(),
+		name: z.string(),
+		description: z.string(),
+		safety: z.string(),
+		callable: z.boolean(),
+		requiresApproval: z.boolean(),
+		unavailableReason: z.string()
+	};
+
+	const input = $derived(readCardPayload(ToolSearchInputFields, tool.input));
+	const output = $derived(readCardPayload(ToolSearchOutputFields, tool.output));
+	const query = $derived(input.get('query') ?? '');
+	const next = $derived(output.get('next') ?? '');
+	const availableCount = $derived(output.get('availableCount') ?? null);
+
+	type Match = {
+		toolId: string;
+		name: string;
+		description: string;
+		safety?: string;
+		callable: boolean;
+		requiresApproval: boolean;
+		unavailableReason?: string;
+	};
+	const matches = $derived.by<Match[]>(() => {
+		return readCardPayloadList(ToolMatchFields, output.get('matches'))
+			.map((row): Match | null => {
+				const toolId = row.get('toolId') ?? '';
+				if (!toolId) return null;
+				return {
+					toolId,
+					name: row.get('name') ?? toolId,
+					description: row.get('description') ?? '',
+					safety: row.get('safety'),
+					callable: row.get('callable') === true,
+					requiresApproval: row.get('requiresApproval') === true,
+					unavailableReason: row.get('unavailableReason')
+				};
+			})
+			.filter((item): item is Match => item !== null);
+	});
+</script>
+
+<ToolCard {tool} {compact} title={query ? `Search: ${query}` : 'Tool search'} icon="lucide:search">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="secondary" class="text-caption">{matches.length} matches</Badge>
+			{#if availableCount !== null}
+				<Badge variant="outline" class="text-caption">{availableCount} eligible</Badge>
+			{/if}
+		</div>
+		{#if matches.length}
+			<ul class="space-y-2">
+				{#each matches as match (match.toolId)}
+					<li class="min-w-0">
+						<div class="mb-0.5 flex flex-wrap items-center gap-1.5">
+							<span class="truncate font-medium">{match.name}</span>
+							<Badge variant="outline" class="font-mono text-caption">{match.toolId}</Badge>
+							{#if match.safety}
+								<Badge variant="outline" class="text-caption">{match.safety}</Badge>
+							{/if}
+							{#if match.callable}
+								<Badge variant="success" class="text-caption">callable</Badge>
+							{:else}
+								<Badge variant="warning" class="text-caption">host only</Badge>
+							{/if}
+							{#if match.requiresApproval}
+								<Badge variant="outline" class="text-caption">approval</Badge>
+							{/if}
+						</div>
+						{#if match.description}
+							<p class="line-clamp-2 text-muted-foreground">{match.description}</p>
+						{/if}
+						{#if match.unavailableReason}
+							<p class="text-muted-foreground italic">{match.unavailableReason}</p>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{:else if !tool.error}
+			<p class="text-muted-foreground italic">No matches.</p>
+		{/if}
+		{#if next}
+			<p class="text-muted-foreground">{next}</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/svelte/tool-widgets/ToolSearchToolCard.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type ToolWidgetProps } from '@vibesdotdev/kit/components/tool-widgets';
+declare const ToolSearchToolCard: import("svelte").Component<ToolWidgetProps, {}, "">;
+type ToolSearchToolCard = ReturnType<typeof ToolSearchToolCard>;
+export default ToolSearchToolCard;
+//# sourceMappingURL=ToolSearchToolCard.svelte.d.ts.map

package/dist/svelte/tool-widgets/ToolSearchToolCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolSearchToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/ToolSearchToolCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AA0GnD,QAAA,MAAM,kBAAkB,qDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}