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

package/dist/svelte/components/ToolBindingSelector.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Spinner } from '@vibesdotdev/kit/components/ui/spinner';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { createToolsStore, type ToolsStore } from '../stores/tools.svelte.js';
+	import { TOOLS_CATALOG_RUNTIME_REFUSAL, type ToolsSvelteData } from '../runtime.js';
+	import { settleSurfaceWork } from '../surface-outcome.js';
+	import {
+		getToolBindingId,
+		getToolDisplayName,
+		getToolSource,
+		type ToolBindingSelection,
+		type ToolSource,
+		type ToolSummary
+	} from './types.js';
+
+	interface Props {
+		systemTools?: ToolSummary[];
+		customTools?: ToolSummary[];
+		initialData?: ToolsSvelteData | null;
+		store?: ToolsStore;
+		loadOnMount?: boolean;
+		selectedTools?: ToolBindingSelection[];
+		onChange?: (tools: ToolBindingSelection[]) => void;
+		placeholder?: string;
+	}
+
+	let {
+		systemTools = undefined,
+		customTools = undefined,
+		initialData = null,
+		store = createToolsStore({ initialData, systemTools: systemTools ?? [], customTools: customTools ?? [] }),
+		loadOnMount = systemTools === undefined && customTools === undefined,
+		selectedTools = [],
+		onChange,
+		placeholder = 'Search tools...'
+	}: Props = $props();
+
+	const runtimeStore = getRuntimeSvelteContext();
+
+	let searchQuery = $state('');
+
+	type CatalogTool = ToolSummary & { resolvedSource: ToolSource; resolvedToolId: string };
+	const systemToolItems: ToolSummary[] = $derived(systemTools ?? store.systemTools);
+	const customToolItems: ToolSummary[] = $derived(customTools ?? store.customTools);
+
+	const catalog = $derived.by(() => {
+		const withSource = (tool: ToolSummary, fallback: ToolSource): CatalogTool => ({
+			...tool,
+			source: tool.source ?? tool.type ?? fallback,
+			resolvedSource: tool.source ?? tool.type ?? fallback,
+			resolvedToolId: getToolBindingId(tool)
+		});
+
+		return [
+			...systemToolItems.map((tool: ToolSummary) => withSource(tool, 'system')),
+			...customToolItems.map((tool: ToolSummary) => withSource(tool, 'custom'))
+		];
+	});
+
+	const filtered = $derived.by(() => {
+		const query = searchQuery.trim().toLowerCase();
+		if (!query) return catalog;
+		return catalog.filter((tool) => {
+			const haystack = [
+				getToolDisplayName(tool),
+				tool.id,
+				tool.resolvedToolId,
+				tool.description,
+				tool.category,
+				...(tool.tags ?? [])
+			]
+				.filter(Boolean)
+				.join(' ')
+				.toLowerCase();
+			return haystack.includes(query);
+		});
+	});
+
+	const selectedCount = $derived(
+		selectedTools.filter((tool: ToolBindingSelection) => tool.enabled !== false).length
+	);
+
+	function matches(tool: CatalogTool, selection: ToolBindingSelection): boolean {
+		return selection.source === tool.resolvedSource && selection.toolId === tool.resolvedToolId;
+	}
+
+	function isSelected(tool: CatalogTool): boolean {
+		return selectedTools.some(
+			(selection: ToolBindingSelection) => matches(tool, selection) && selection.enabled !== false
+		);
+	}
+
+	function toggleTool(tool: CatalogTool) {
+		const existing = selectedTools.find((selection: ToolBindingSelection) => matches(tool, selection));
+		const next: ToolBindingSelection[] = existing
+			? selectedTools.filter((selection: ToolBindingSelection) => !matches(tool, selection))
+			: [
+					...selectedTools,
+					{
+						source: tool.resolvedSource,
+						toolId: tool.resolvedToolId,
+						enabled: true,
+						order: selectedTools.length,
+						hardware: tool.hardware?.find(
+							(value): value is 'consumer' | 'cloud' => value === 'consumer' || value === 'cloud'
+						)
+					}
+				];
+
+		onChange?.(next.map((selection: ToolBindingSelection, order: number) => ({ ...selection, order })));
+	}
+
+	onMount(() => {
+		if (!loadOnMount || store.loaded || store.loading) return;
+		void (async () => {
+			const loaded = await settleSurfaceWork(() => runtimeStore.load(), TOOLS_CATALOG_RUNTIME_REFUSAL);
+			// store.settle records its own failure on `store.error`; record a runtime-load failure the same way.
+			if (loaded.failed) {
+				store.error = loaded.failed;
+				return;
+			}
+			await store.settle(loaded.value);
+		})();
+	});
+</script>
+
+<div class="space-y-3">
+	<div class="flex items-center gap-2">
+		<div class="relative min-w-0 flex-1">
+			<Icon
+				icon="lucide:search"
+				class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+			/>
+			<Input bind:value={searchQuery} {placeholder} class="h-9 pl-9" />
+		</div>
+		<Badge variant="outline" class="h-8 shrink-0 px-2 text-xs">
+			{selectedCount} selected
+		</Badge>
+	</div>
+
+	{#if store.loading && filtered.length === 0}
+		<div class="flex items-center justify-center py-12 text-muted-foreground">
+			<Spinner class="size-5" />
+		</div>
+	{:else if filtered.length === 0}
+		<div class="rounded-md border border-dashed border-border px-3 py-8 text-center text-sm text-muted-foreground">
+			No tools match your search.
+		</div>
+	{:else}
+		<div class="max-h-80 space-y-1 overflow-y-auto pr-1">
+			{#each filtered as tool (tool.resolvedSource + ':' + tool.resolvedToolId)}
+				{@const selected = isSelected(tool)}
+				{@const source = getToolSource(tool)}
+				<Button
+					type="button"
+					variant="ghost"
+					class={cn(
+						"h-auto w-full justify-start gap-3 rounded-md border border-transparent p-3 text-left",
+						selected
+							? "border-primary/50 bg-primary/5 text-foreground hover:bg-primary/10"
+							: "hover:border-border hover:bg-muted/60"
+					)}
+					onclick={() => toggleTool(tool)}
+				>
+					<span
+						class={cn(
+							"flex size-8 shrink-0 items-center justify-center rounded-md border",
+							selected ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background"
+						)}
+					>
+						<Icon icon={selected ? 'lucide:check' : source === 'system' ? 'lucide:wrench' : 'lucide:puzzle'} class="size-4" />
+					</span>
+					<span class="min-w-0 flex-1 space-y-1">
+						<span class="flex min-w-0 items-center gap-2">
+							<span class="truncate text-sm font-medium">{getToolDisplayName(tool)}</span>
+							<Badge variant="outline" class="shrink-0 px-1.5 text-[10px] uppercase">
+								{source}
+							</Badge>
+							{#if tool.requiresApproval}
+								<Badge variant="secondary" class="shrink-0 px-1.5 text-[10px]">approval</Badge>
+							{/if}
+						</span>
+						{#if tool.description}
+							<span class="line-clamp-2 text-xs font-normal text-muted-foreground">
+								{tool.description}
+							</span>
+						{/if}
+					</span>
+				</Button>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { type ToolsStore } from '../stores/tools.svelte.ts';
+import { type ToolsSvelteData } from '../runtime.ts';
+import { type ToolBindingSelection, type ToolSummary } from './types.ts';
+interface Props {
+    systemTools?: ToolSummary[];
+    customTools?: ToolSummary[];
+    initialData?: ToolsSvelteData | null;
+    store?: ToolsStore;
+    loadOnMount?: boolean;
+    selectedTools?: ToolBindingSelection[];
+    onChange?: (tools: ToolBindingSelection[]) => void;
+    placeholder?: string;
+}
+declare const ToolBindingSelector: import("svelte").Component<Props, {}, "">;
+type ToolBindingSelector = ReturnType<typeof ToolBindingSelector>;
+export default ToolBindingSelector;
+//# sourceMappingURL=ToolBindingSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBindingSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolBindingSelector.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAiC,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,EAIL,KAAK,oBAAoB,EAEzB,KAAK,WAAW,EAChB,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAK;IACd,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAiLF,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ToolForm.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Label } from '@vibesdotdev/kit/components/ui/label';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import * as z from 'zod/v4';
+	import { JsonValueSchema } from '@vibesdotdev/kernel/schemas/json';
+	import {
+		getToolDisplayName,
+		type ToolSummary
+	} from './types.js';
+	import { decodeJsonText, JsonObjectSchema, type JsonObject } from '../json-text.js';
+	import { readCardPayload, readPayloadValues } from '../tool-widgets/payload.js';
+
+	/** A form's input object: free-form JSON fields. */
+	type ToolFormInput = JsonObject;
+
+	/** The parts of a JSON-schema object this form renders; each is read on its own. */
+	const FormSchemaFields = { properties: JsonObjectSchema, required: z.array(z.unknown()) };
+	const FormPropertyFields = {
+		type: z.string(),
+		description: z.string(),
+		enum: z.array(z.unknown()),
+		default: z.unknown()
+	};
+
+	/** What a bad JSON edit shows: a fixed line, never the parser's message. */
+	const INVALID_JSON_MESSAGE = 'Invalid JSON';
+
+	/**
+	 * ToolForm — renders a tool's input schema as a form. Accepts either a
+	 * `tool` (uses `tool.inputSchema`) or a freestanding `schema`. The schema
+	 * shape follows JSON Schema / zod-to-JSON-Schema convention:
+	 *
+	 *   { type: 'object', properties: { foo: { type: 'string', description } }, required: ['foo'] }
+	 *
+	 * For richer schemas, the form falls back to a JSON textarea (deep nested
+	 * arrays / unions). The caller owns submit + validation.
+	 */
+	interface Props {
+		tool?: ToolSummary;
+		schema?: ToolFormInput;
+		value?: ToolFormInput;
+		title?: string;
+		submitLabel?: string;
+		busy?: boolean;
+		readOnly?: boolean;
+		error?: string | null;
+		onsubmit?: (input: ToolFormInput) => void;
+	}
+
+	let {
+		tool,
+		schema = tool?.inputSchema,
+		value = $bindable<ToolFormInput>({}),
+		title,
+		submitLabel = 'Run',
+		busy = false,
+		readOnly = false,
+		error = null,
+		onsubmit
+	}: Props = $props();
+
+	type FieldSpec = {
+		name: string;
+		/** The JSON-schema type as declared (`string`, `number`, `integer`, `boolean`, `object`, `array`, …), or `unknown`. */
+		type: string;
+		description?: string;
+		required: boolean;
+		enumValues?: unknown[];
+		default?: unknown;
+	};
+
+	const fields = $derived.by<FieldSpec[]>(() => {
+		const form = readCardPayload(FormSchemaFields, schema);
+		const props = form.get('properties');
+		if (!props) return [];
+		const required = readPayloadValues(z.string(), form.get('required'));
+		return Object.entries(props).map(([name, raw]) => {
+			const property = readCardPayload(FormPropertyFields, raw);
+			return {
+				name,
+				type: property.get('type') ?? 'unknown',
+				description: property.get('description'),
+				required: required.includes(name),
+				enumValues: property.get('enum'),
+				default: property.get('default')
+			};
+		});
+	});
+
+	const hasSchema = $derived(fields.length > 0);
+	const headerTitle = $derived(title ?? (tool ? `Configure ${getToolDisplayName(tool)}` : 'Tool input'));
+
+	let rawJson = $state('');
+	let jsonMode = $state(false);
+	let jsonError = $state<string | null>(null);
+
+	$effect(() => {
+		if (jsonMode || !hasSchema) {
+			rawJson = JSON.stringify(value, null, 2);
+		}
+	});
+
+	function setField(name: string, raw: ToolFormInput[string] | undefined): void {
+		if (raw === undefined) {
+			const { [name]: _, ...rest } = value;
+			value = rest;
+			return;
+		}
+		value = { ...value, [name]: raw };
+	}
+
+	/** Apply the JSON text to `value` (a non-object leaves it unchanged); false when the text is not JSON. */
+	function applyRawJson(): boolean {
+		const decoded = decodeJsonText(rawJson || '{}', JsonObjectSchema);
+		if (decoded.failed) {
+			jsonError = INVALID_JSON_MESSAGE;
+			return false;
+		}
+		if (decoded.parsed) value = decoded.parsed;
+		jsonError = null;
+		return true;
+	}
+
+	/** Live edit of a nested object or array field: a partial edit that is not JSON yet is left alone. */
+	function setJsonField(field: FieldSpec, text: string): void {
+		const decoded = decodeJsonText(text || (field.type === 'array' ? '[]' : '{}'), JsonValueSchema);
+		if (!decoded.failed) setField(field.name, decoded.parsed);
+	}
+
+	function toggleJsonMode(): void {
+		if (!jsonMode) {
+			rawJson = JSON.stringify(value, null, 2);
+		} else if (!readOnly && !applyRawJson()) {
+			return;
+		}
+		jsonMode = !jsonMode;
+	}
+
+	function handleSubmit(event: Event): void {
+		event.preventDefault();
+		if (readOnly) return;
+		if (jsonMode && !applyRawJson()) return;
+		onsubmit?.(value);
+	}
+</script>
+
+<form class="space-y-4" onsubmit={handleSubmit}>
+	<div class="flex items-center justify-between">
+		<h3 class="text-sm font-semibold text-foreground">{headerTitle}</h3>
+		{#if hasSchema}
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				class="gap-1 text-xs"
+				onclick={toggleJsonMode}
+			>
+				<Icon icon={jsonMode ? 'lucide:list' : 'lucide:code-2'} class="h-3.5 w-3.5" />
+				{jsonMode ? 'Form' : 'JSON'}
+			</Button>
+		{/if}
+	</div>
+
+	{#if !hasSchema || jsonMode}
+		<div class="space-y-1.5">
+			<Label class="text-xs font-medium text-muted-foreground">Input (JSON)</Label>
+			<Textarea
+				bind:value={rawJson}
+				readonly={readOnly}
+				rows={10}
+				class={cn(
+					'font-mono text-xs',
+					jsonError && 'border-destructive focus-visible:ring-destructive/40'
+				)}
+				placeholder={'{"key": "value"}'}
+			/>
+			{#if jsonError}
+				<p class="text-xs text-destructive">{jsonError}</p>
+			{/if}
+		</div>
+	{:else}
+		<div class="space-y-3">
+			{#each fields as field (field.name)}
+				<div class="space-y-1.5">
+					<Label class="flex items-center gap-1 text-xs font-medium text-foreground">
+						<span>{field.name}</span>
+						{#if field.required}
+							<span class="text-destructive">*</span>
+						{/if}
+						<span class="ml-auto text-[10px] uppercase tracking-wide text-muted-foreground">{field.type}</span>
+					</Label>
+					{#if readOnly}
+						<output class="block rounded-md border border-input bg-muted/20 px-3 py-2">
+							<pre class="whitespace-pre-wrap break-words font-mono text-xs">{Object.hasOwn(value, field.name) ? JSON.stringify(value[field.name], null, 2) : 'Not recorded'}</pre>
+						</output>
+					{:else if field.enumValues}
+						<select
+							class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+							value={(value[field.name] ?? field.default ?? '') as string}
+							onchange={(e) => setField(field.name, e.currentTarget.value)}
+						>
+							{#each field.enumValues as opt}
+								<option value={String(opt)}>{String(opt)}</option>
+							{/each}
+						</select>
+					{:else if field.type === 'boolean'}
+						<label class="flex items-center gap-2 text-sm">
+							<input
+								type="checkbox"
+								checked={Boolean(value[field.name] ?? field.default ?? false)}
+								onchange={(e) => setField(field.name, e.currentTarget.checked)}
+							/>
+							<span class="text-muted-foreground">{field.description ?? field.name}</span>
+						</label>
+					{:else if field.type === 'number' || field.type === 'integer'}
+						<Input
+							type="number"
+							step={field.type === 'integer' ? '1' : 'any'}
+							value={(value[field.name] ?? field.default ?? '') as string}
+							oninput={(e) => {
+								const v = e.currentTarget.value;
+								setField(field.name, v === '' ? undefined : Number(v));
+							}}
+						/>
+					{:else if field.type === 'object' || field.type === 'array'}
+						<Textarea
+							rows={4}
+							class="font-mono text-xs"
+							value={JSON.stringify(value[field.name] ?? field.default ?? (field.type === 'array' ? [] : {}), null, 2)}
+							oninput={(e) => setJsonField(field, e.currentTarget.value)}
+						/>
+					{:else}
+						<Input
+							type="text"
+							value={(value[field.name] ?? field.default ?? '') as string}
+							oninput={(e) => setField(field.name, e.currentTarget.value)}
+						/>
+					{/if}
+					{#if field.description && field.type !== 'boolean'}
+						<p class="text-[11px] text-muted-foreground">{field.description}</p>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if error}
+		<div class="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+			{error}
+		</div>
+	{/if}
+
+	{#if !readOnly}
+		<div class="flex items-center justify-end gap-2">
+			<Button type="submit" disabled={busy} class="gap-1.5">
+				{#if busy}
+					<Icon icon="lucide:loader-2" class="h-3.5 w-3.5 animate-spin" />
+				{:else}
+					<Icon icon="lucide:play" class="h-3.5 w-3.5" />
+				{/if}
+				{submitLabel}
+			</Button>
+		</div>
+	{/if}
+</form>

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

@@ -0,0 +1,29 @@
+import { type ToolSummary } from './types.ts';
+import { type JsonObject } from '../json-text.ts';
+/** A form's input object: free-form JSON fields. */
+type ToolFormInput = JsonObject;
+/**
+ * ToolForm — renders a tool's input schema as a form. Accepts either a
+ * `tool` (uses `tool.inputSchema`) or a freestanding `schema`. The schema
+ * shape follows JSON Schema / zod-to-JSON-Schema convention:
+ *
+ *   { type: 'object', properties: { foo: { type: 'string', description } }, required: ['foo'] }
+ *
+ * For richer schemas, the form falls back to a JSON textarea (deep nested
+ * arrays / unions). The caller owns submit + validation.
+ */
+interface Props {
+    tool?: ToolSummary;
+    schema?: ToolFormInput;
+    value?: ToolFormInput;
+    title?: string;
+    submitLabel?: string;
+    busy?: boolean;
+    readOnly?: boolean;
+    error?: string | null;
+    onsubmit?: (input: ToolFormInput) => void;
+}
+declare const ToolForm: import("svelte").Component<Props, {}, "value">;
+type ToolForm = ReturnType<typeof ToolForm>;
+export default ToolForm;
+//# sourceMappingURL=ToolForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolForm.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,EAEL,KAAK,WAAW,EAChB,MAAM,YAAY,CAAC;AACrB,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,oDAAoD;AACpD,KAAK,aAAa,GAAG,UAAU,CAAC;AAEhC;;;;;;;;;GASG;AACH,UAAU,KAAK;IACd,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAsNF,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}