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

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `ai-generate`: modality-specific result, not a JSON blob.
+	 */
+	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, readCardPayloadList } from './payload.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	const AiGenerateInputFields = { type: z.string(), prompt: z.string(), model: z.string() };
+	const AiGenerateOutputFields = {
+		type: z.string(),
+		success: z.boolean(),
+		error: z.string(),
+		content: z.string(),
+		text: z.string(),
+		path: z.string(),
+		url: z.string(),
+		model: z.string(),
+		duration: z.number(),
+		dimension: z.number(),
+		embeddings: z.array(z.unknown()),
+		images: z.unknown()
+	};
+	const GeneratedImageFields = {
+		url: z.string(),
+		base64: z.string(),
+		path: z.string(),
+		width: z.number(),
+		height: z.number()
+	};
+
+	const input = $derived(readCardPayload(AiGenerateInputFields, tool.input));
+	const output = $derived(readCardPayload(AiGenerateOutputFields, tool.output));
+	const type = $derived(output.get('type') || input.get('type') || 'generate');
+	const success = $derived(output.get('success') === true);
+	const failed = $derived(output.get('success') === false || Boolean(output.get('error')));
+	const prompt = $derived(input.get('prompt') ?? '');
+	const content = $derived(output.get('content') || output.get('text') || '');
+	const path = $derived(output.get('path') ?? '');
+	const url = $derived(output.get('url') ?? '');
+	const model = $derived(output.get('model') || input.get('model') || '');
+	const duration = $derived(output.get('duration') ?? null);
+	const dimension = $derived(output.get('dimension') ?? null);
+	const embeddings = $derived(output.get('embeddings')?.length ?? 0);
+
+	type GeneratedImage = { src: string; alt: string; label: string };
+	const images = $derived.by<GeneratedImage[]>(() => {
+		return readCardPayloadList(GeneratedImageFields, output.get('images'))
+			.map((row, index): GeneratedImage | null => {
+				if (!row.isObject()) return null;
+				const href = row.get('url') ?? '';
+				const b64 = row.get('base64') ?? '';
+				const file = row.get('path') ?? '';
+				const src =
+					href.startsWith('http') || href.startsWith('data:') || href.startsWith('blob:')
+						? href
+						: b64.startsWith('data:')
+							? b64
+							: b64
+								? `data:image/png;base64,${b64}`
+								: '';
+				const width = row.get('width') ?? null;
+				const height = row.get('height') ?? null;
+				const label = [file, width && height ? `${width}×${height}` : '']
+					.filter(Boolean)
+					.join(' · ');
+				if (!src && !label) return null;
+				return { src, alt: prompt || `Generated image ${index + 1}`, label };
+			})
+			.filter((item): item is GeneratedImage => item !== null);
+	});
+</script>
+
+<ToolCard {tool} {compact} title={`Generate ${type}`} icon="lucide:sparkles">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="outline" class="text-caption">{type}</Badge>
+			{#if failed}
+				<Badge variant="destructive" class="text-caption">failed</Badge>
+			{:else if success}
+				<Badge variant="success" class="text-caption">ok</Badge>
+			{/if}
+			{#if model}
+				<Badge variant="secondary" class="text-caption">{model}</Badge>
+			{/if}
+			{#if duration !== null}
+				<Badge variant="outline" class="text-caption">{duration}s</Badge>
+			{/if}
+			{#if type === 'embedding' && embeddings}
+				<Badge variant="secondary" class="text-caption">
+					{embeddings} vectors{dimension ? ` × ${dimension}d` : ''}
+				</Badge>
+			{/if}
+		</div>
+		{#if prompt}
+			<p class="line-clamp-3 text-muted-foreground">{prompt}</p>
+		{/if}
+		{#if images.length}
+			<div class="grid grid-cols-2 gap-2">
+				{#each images as image, i (i)}
+					<figure class="min-w-0 space-y-1">
+						{#if image.src}
+							<img
+								src={image.src}
+								alt={image.alt}
+								class="aspect-square w-full rounded-md border object-cover"
+							/>
+						{/if}
+						{#if image.label}
+							<figcaption class="truncate font-mono text-caption text-muted-foreground">
+								{image.label}
+							</figcaption>
+						{/if}
+					</figure>
+				{/each}
+			</div>
+		{/if}
+		{#if content}
+			<CodeViewer
+				code={content}
+				language={type === 'text' || type === 'vision' ? 'markdown' : 'plaintext'}
+				appearance="system"
+				maxHeight="16rem"
+				minHeight="0"
+				showLineNumbers={false}
+			/>
+		{/if}
+		{#if path || url}
+			<p class="truncate font-mono text-caption text-muted-foreground">{url || path}</p>
+		{/if}
+		{#if !content && !images.length && !path && !url && type !== 'embedding' && !tool.error}
+			<p class="text-muted-foreground italic">Generating…</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

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

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

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

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

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `ai-ocr-document`: extracted text plus OCR metadata.
+	 */
+	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 OcrInputFields = { category: z.string(), mimeType: z.string(), responseFormat: z.string() };
+	const OcrOutputFields = {
+		text: z.string(),
+		category: z.string(),
+		confidence: z.number(),
+		totalPages: z.number(),
+		modelId: z.string()
+	};
+
+	const input = $derived(readCardPayload(OcrInputFields, tool.input));
+	const output = $derived(readCardPayload(OcrOutputFields, tool.output));
+	const text = $derived(output.get('text') ?? '');
+	const category = $derived(output.get('category') || input.get('category') || '');
+	const mimeType = $derived(input.get('mimeType') ?? '');
+	const confidence = $derived(output.get('confidence') ?? null);
+	const totalPages = $derived(output.get('totalPages') ?? null);
+	const modelId = $derived(output.get('modelId') ?? '');
+	const format = $derived(input.get('responseFormat') ?? 'markdown');
+</script>
+
+<ToolCard
+	{tool}
+	{compact}
+	title={category ? `OCR · ${category}` : 'OCR document'}
+	icon="lucide:scan-text"
+>
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			{#if mimeType}
+				<Badge variant="outline" class="text-caption">{mimeType}</Badge>
+			{/if}
+			{#if confidence !== null}
+				<Badge variant="secondary" class="text-caption">
+					{Math.round(confidence * 100)}% confidence
+				</Badge>
+			{/if}
+			{#if totalPages !== null}
+				<Badge variant="outline" class="text-caption">{totalPages} pages</Badge>
+			{/if}
+			{#if modelId}
+				<Badge variant="outline" class="text-caption">{modelId}</Badge>
+			{/if}
+		</div>
+		{#if text}
+			<CodeViewer
+				code={text}
+				language={format === 'json' ? 'json' : format === 'markdown' ? 'markdown' : 'plaintext'}
+				appearance="system"
+				maxHeight="20rem"
+				minHeight="0"
+				showLineNumbers={false}
+			/>
+		{:else if !tool.error}
+			<p class="text-muted-foreground italic">Extracting text…</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

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

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

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

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

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `calculate`: the expression and its result.
+	 */
+	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 CalculateInputFields = { expression: z.string() };
+	// The result is shown as text whatever its kind; a value with no text form reads as absent.
+	const CalculateOutputFields = {
+		expression: z.string(),
+		result: z.union([z.string(), z.number(), z.boolean(), z.bigint()]).transform(String)
+	};
+
+	const input = $derived(readCardPayload(CalculateInputFields, tool.input));
+	const output = $derived(readCardPayload(CalculateOutputFields, tool.output));
+	const expression = $derived(output.get('expression') || input.get('expression') || '');
+	const result = $derived(output.get('result') ?? '');
+</script>
+
+<ToolCard {tool} {compact} title={expression || 'Calculate'} icon="lucide:calculator">
+	<ToolCardBody {compact}>
+		{#if result}
+			<Badge variant="secondary" class="text-caption font-mono">{result}</Badge>
+		{:else if !tool.error}
+			<p class="text-muted-foreground italic">Working…</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

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

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

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

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

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

@@ -0,0 +1,163 @@
+<script lang="ts">
+	/**
+	 * First-party widget for `codemod`: recipe, match hits, and rewrite output.
+	 */
+	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, readCardPayloadList } from './payload.js';
+
+	let { tool, compact = false }: ToolWidgetProps = $props();
+
+	// `z.number()` admits finite numbers only, matching the counts this card shows.
+	const CodemodInputFields = { params: z.unknown(), recipe: z.string() };
+	const CodemodParamsFields = { pattern: z.string(), from: z.string(), to: z.string() };
+	const CommandResultFields = {
+		dryRun: z.boolean(),
+		output: z.string(),
+		summary: z.unknown(),
+		filesChanged: z.number()
+	};
+	const CodemodOutputFields = {
+		...CommandResultFields,
+		recipe: z.string(),
+		result: z.unknown(),
+		matches: z.unknown(),
+		results: z.unknown()
+	};
+	const CodemodSummaryFields = { matchCount: z.number(), fileCount: z.number(), pattern: z.string() };
+	const CodemodHitFields = { file: z.string(), text: z.string(), lines: z.string() };
+	const CodemodRenameFields = {
+		from: z.string(),
+		to: z.string(),
+		filesModified: z.number(),
+		success: z.boolean()
+	};
+
+	const input = $derived(readCardPayload(CodemodInputFields, tool.input));
+	const output = $derived(readCardPayload(CodemodOutputFields, tool.output));
+	const params = $derived(readCardPayload(CodemodParamsFields, input.get('params')));
+	const recipe = $derived(input.get('recipe') || output.get('recipe') || '');
+	// A wrapped command result carries the run's facts; otherwise the output itself does.
+	const commandResult = $derived.by(() => {
+		const wrapped = readCardPayload(CommandResultFields, output.get('result'));
+		return wrapped.isObject() ? wrapped : readCardPayload(CommandResultFields, tool.output);
+	});
+	const dryRun = $derived(commandResult.get('dryRun') === true);
+	const log = $derived(commandResult.get('output') || output.get('output') || '');
+	const summary = $derived.by(() => {
+		const own = readCardPayload(CodemodSummaryFields, output.get('summary'));
+		return own.isObject() ? own : readCardPayload(CodemodSummaryFields, commandResult.get('summary'));
+	});
+	const matchList = $derived(readCardPayloadList(CodemodHitFields, output.get('matches')));
+	const matchesIsList = $derived(Array.isArray(output.get('matches')));
+	const matchCount = $derived(
+		summary.get('matchCount') ?? (matchesIsList ? matchList.length : null)
+	);
+	const fileCount = $derived(summary.get('fileCount') ?? commandResult.get('filesChanged') ?? null);
+	const pattern = $derived(params.get('pattern') || summary.get('pattern') || '');
+	const from = $derived(params.get('from') ?? '');
+	const to = $derived(params.get('to') ?? '');
+
+	type Hit = { file: string; text: string };
+	const matches = $derived.by<Hit[]>(() => {
+		return matchList
+			.map((row): Hit | null => {
+				const file = row.get('file') ?? '';
+				const text = row.get('text') || row.get('lines') || '';
+				if (!file && !text) return null;
+				return { file, text };
+			})
+			.filter((item): item is Hit => item !== null)
+			.slice(0, 12);
+	});
+
+	type Rename = { from: string; to: string; filesModified: number; success: boolean };
+	const renames = $derived.by<Rename[]>(() => {
+		return readCardPayloadList(CodemodRenameFields, output.get('results'))
+			.map((row): Rename | null => {
+				const src = row.get('from') ?? '';
+				const dest = row.get('to') ?? '';
+				if (!src && !dest) return null;
+				return {
+					from: src,
+					to: dest,
+					filesModified: row.get('filesModified') ?? 0,
+					success: row.get('success') !== false
+				};
+			})
+			.filter((item): item is Rename => item !== null);
+	});
+</script>
+
+<ToolCard
+	{tool}
+	{compact}
+	title={recipe ? `Codemod ${recipe}` : 'Codemod'}
+	icon="lucide:wand-sparkles"
+>
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			{#if recipe}
+				<Badge variant="outline" class="text-caption">{recipe}</Badge>
+			{/if}
+			{#if dryRun}
+				<Badge variant="warning" class="text-caption">dry run</Badge>
+			{/if}
+			{#if matchCount !== null}
+				<Badge variant="secondary" class="text-caption">{matchCount} matches</Badge>
+			{/if}
+			{#if fileCount !== null}
+				<Badge variant="outline" class="text-caption">{fileCount} files</Badge>
+			{/if}
+		</div>
+		{#if pattern}
+			<p class="truncate font-mono text-caption text-muted-foreground">{pattern}</p>
+		{/if}
+		{#if from && to}
+			<p class="font-mono text-caption text-muted-foreground">{from} → {to}</p>
+		{/if}
+		{#if matches.length}
+			<ul class="space-y-1.5">
+				{#each matches as hit, i (`${hit.file}:${i}`)}
+					<li>
+						{#if hit.file}
+							<div class="mb-0.5 font-mono text-caption text-muted-foreground">{hit.file}</div>
+						{/if}
+						{#if hit.text}
+							<pre
+								class="overflow-x-auto rounded-md bg-background/70 p-2 font-mono text-caption leading-relaxed ring-1 ring-border/40 ring-inset">{hit.text}</pre>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+		{#if renames.length}
+			<ul class="space-y-1">
+				{#each renames as row (`${row.from}:${row.to}`)}
+					<li class="flex flex-wrap items-center gap-1.5">
+						<span class="font-mono">{row.from} → {row.to}</span>
+						<Badge variant={row.success ? 'secondary' : 'destructive'} class="text-caption">
+							{row.filesModified} files
+						</Badge>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+		{#if log}
+			<CodeViewer
+				code={log}
+				language="diff"
+				appearance="system"
+				maxHeight="16rem"
+				minHeight="0"
+				showLineNumbers={false}
+			/>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

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

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

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

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

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+	/**
+	 * Family widget for `docs-audit-scan`, `docs-audit-run`, and `docs-audit-write`.
+	 */
+	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();
+
+	// `z.number()` admits finite numbers only, matching the counts this card shows.
+	const DocsAuditInputFields = { cwd: z.string() };
+	const DocsAuditOutputFields = {
+		scannedFiles: z.number(),
+		files: z.array(z.unknown()),
+		findings: z.union([z.number(), z.array(z.unknown())]),
+		byKind: z.unknown(),
+		featureDirectories: z.number()
+	};
+	const FINDING_KINDS = ['doc-stale', 'doc-structure', 'likely-code-bug'] as const;
+	const FindingKindCountFields = {
+		'doc-stale': z.number(),
+		'doc-structure': z.number(),
+		'likely-code-bug': z.number()
+	};
+	const FindingFields = {
+		file: z.string(),
+		claim: z.string(),
+		line: z.number(),
+		kind: z.string(),
+		observed: z.string()
+	};
+
+	const input = $derived(readCardPayload(DocsAuditInputFields, tool.input));
+	const output = $derived(readCardPayload(DocsAuditOutputFields, tool.output));
+	const action = $derived(tool.name.replace(/^docs-audit-/, '') || 'audit');
+	const cwd = $derived(input.get('cwd') ?? '');
+	const scannedFiles = $derived(output.get('scannedFiles') ?? output.get('files')?.length ?? null);
+	const findingsField = $derived(output.get('findings'));
+	const findingCount = $derived(
+		findingsField === undefined
+			? null
+			: Array.isArray(findingsField)
+				? findingsField.length
+				: findingsField
+	);
+	const byKind = $derived(readCardPayload(FindingKindCountFields, output.get('byKind')));
+	const featureDirectories = $derived(output.get('featureDirectories') ?? null);
+
+	type Finding = { file: string; line: number; kind: string; claim: string; observed: string };
+	const findings = $derived.by<Finding[]>(() => {
+		return readCardPayloadList(FindingFields, findingsField)
+			.map((row): Finding | null => {
+				const file = row.get('file') ?? '';
+				const claim = row.get('claim') ?? '';
+				if (!file && !claim) return null;
+				return {
+					file,
+					line: row.get('line') ?? 0,
+					kind: row.get('kind') ?? 'doc-stale',
+					claim,
+					observed: row.get('observed') ?? ''
+				};
+			})
+			.filter((item): item is Finding => item !== null);
+	});
+	const visibleFindings = $derived(findings.slice(0, 12));
+</script>
+
+<ToolCard {tool} {compact} title={`Docs audit ${action}`} icon="lucide:file-search">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="outline" class="text-caption">{action}</Badge>
+			{#if scannedFiles !== null}
+				<Badge variant="secondary" class="text-caption">{scannedFiles} files</Badge>
+			{/if}
+			{#if findingCount !== null}
+				<Badge variant={findingCount > 0 ? 'warning' : 'success'} class="text-caption">
+					{findingCount} findings
+				</Badge>
+			{/if}
+			{#if featureDirectories !== null}
+				<Badge variant="outline" class="text-caption">{featureDirectories} features</Badge>
+			{/if}
+			{#if cwd}
+				<span class="truncate font-mono text-caption text-muted-foreground">{cwd}</span>
+			{/if}
+		</div>
+		{#if byKind.isObject()}
+			<div class="flex flex-wrap gap-1.5">
+				{#each FINDING_KINDS as kind (kind)}
+					{@const count = byKind.get(kind)}
+					{#if count !== undefined}
+						<Badge variant="outline" class="text-caption">{kind}: {count}</Badge>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+		{#if visibleFindings.length}
+			<ul class="space-y-1.5">
+				{#each visibleFindings as finding, i (`${finding.file}:${finding.line}:${i}`)}
+					<li>
+						<div
+							class="mb-0.5 flex flex-wrap items-center gap-1.5 font-mono text-caption text-muted-foreground"
+						>
+							<span class="truncate">{finding.file}{finding.line ? `:${finding.line}` : ''}</span>
+							<Badge variant="outline" class="text-caption">{finding.kind}</Badge>
+						</div>
+						<p class="text-foreground">{finding.claim}</p>
+						{#if finding.observed}
+							<p class="text-muted-foreground">{finding.observed}</p>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+			{#if findings.length > visibleFindings.length}
+				<p class="text-muted-foreground italic">
+					+{findings.length - visibleFindings.length} more
+				</p>
+			{/if}
+		{/if}
+	</ToolCardBody>
+</ToolCard>

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

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

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

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

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	/** Human-facing card for the runtime Docs search tool. */
+	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 DocsInputFields = { query: z.string(), action: z.string() };
+	const DocsOutputFields = { results: z.unknown(), message: z.string() };
+	const DocsResultFields = { title: z.string(), snippet: z.string(), content: z.string() };
+
+	const input = $derived(readCardPayload(DocsInputFields, tool.input));
+	const output = $derived(readCardPayload(DocsOutputFields, tool.output));
+	const query = $derived(input.get('query') ?? '');
+	const action = $derived(input.get('action') ?? 'search');
+	const results = $derived(
+		readCardPayloadList(DocsResultFields, output.get('results')).filter((item) => item.isObject())
+	);
+	const message = $derived(output.get('message') ?? '');
+</script>
+
+<ToolCard {tool} {compact} title="Documentation" icon="lucide:book-open">
+	<ToolCardBody {compact}>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<Badge variant="outline" class="text-caption">{action}</Badge>
+			{#if query}<span class="truncate text-muted-foreground">“{query}”</span>{/if}
+		</div>
+		{#if results.length}
+			<ul class="space-y-1.5">
+				{#each results.slice(0, 8) as result, index (index)}
+					{@const title = result.get('title')}
+					{@const snippet = result.get('snippet')}
+					{@const content = result.get('content')}
+					<li>
+						{#if title !== undefined}
+							<p class="font-medium text-foreground">{title}</p>
+						{/if}
+						{#if snippet !== undefined}
+							<p class="text-muted-foreground">{snippet}</p>
+						{:else if content !== undefined}
+							<p class="text-muted-foreground">{content}</p>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{:else if message}
+			<p class="text-muted-foreground">{message}</p>
+		{:else if tool.status === 'pending' || tool.status === 'running'}
+			<p class="text-muted-foreground">Searching documentation…</p>
+		{:else if tool.status === 'interrupted'}
+			<p class="text-muted-foreground">
+				Documentation search was interrupted. Retry it to continue.
+			</p>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsToolCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/tool-widgets/DocsToolCard.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,0CAA0C,CAAC;AAiEnD,QAAA,MAAM,YAAY,qDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}