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

package/dist/svelte/components/ToolList.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Separator } from '@vibesdotdev/kit/components/ui/separator';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import {
+		getToolDisplayName,
+		getToolSource,
+		type ToolSummary
+	} from './types.js';
+
+	interface Props {
+		tools: ToolSummary[];
+		onEdit?: (tool: ToolSummary) => void;
+		onDelete?: (tool: ToolSummary) => void;
+	}
+
+	let {
+		tools = [],
+		onEdit = () => {},
+		onDelete = () => {}
+	}: Props = $props();
+
+	const systemTools = $derived(tools.filter((t: ToolSummary) => getToolSource(t) === 'system'));
+	const customTools = $derived(tools.filter((t: ToolSummary) => getToolSource(t) === 'custom'));
+
+	function getEnvironmentBadges(tool: ToolSummary) {
+		const envs = tool.environments;
+		const badges: { label: string; icon: string }[] = [];
+		if (tool.hardware?.includes('consumer')) badges.push({ label: 'Consumer', icon: 'lucide:laptop' });
+		if (tool.hardware?.includes('cloud')) badges.push({ label: 'Cloud', icon: 'lucide:cloud' });
+		if (!envs) return badges;
+		if (envs.server) badges.push({ label: 'Server', icon: 'lucide:server' });
+		if (envs.cli) badges.push({ label: 'CLI', icon: 'lucide:terminal' });
+		if (envs.worker) badges.push({ label: 'Worker', icon: 'lucide:monitor' });
+		if (envs.browser) badges.push({ label: 'Browser', icon: 'lucide:globe' });
+		return badges;
+	}
+
+	function getCapabilityBadges(tool: ToolSummary) {
+		const caps = tool.capabilities;
+		if (!caps) return [];
+		const badges: { label: string; icon: string }[] = [];
+		if (caps.database) badges.push({ label: 'DB', icon: 'lucide:database' });
+		if (caps.filesystem) badges.push({ label: 'FS', icon: 'lucide:hard-drive' });
+		if (caps.network) badges.push({ label: 'Net', icon: 'lucide:network' });
+		if (caps.auth) badges.push({ label: 'Auth', icon: 'lucide:shield-check' });
+		return badges;
+	}
+</script>
+
+<div class="space-y-8">
+	{#if systemTools.length > 0}
+		<section class="space-y-3">
+			<h2 class="text-muted-foreground text-xs font-bold tracking-wider uppercase flex items-center gap-2">
+				<Icon icon="lucide:server" class="h-3.5 w-3.5" />
+				System Tools ({systemTools.length})
+			</h2>
+			<div class="grid gap-4 @min-[40rem]/tools-workspace:grid-cols-2 @min-[64rem]/tools-workspace:grid-cols-3">
+				{#each systemTools as tool (tool.id)}
+					{@const envBadges = getEnvironmentBadges(tool)}
+					{@const capBadges = getCapabilityBadges(tool)}
+					<div
+						class="border-border/60 bg-card/40 group relative flex flex-col rounded-2xl border p-5 transition-all hover:border-border hover:shadow-sm"
+					>
+						<div class="flex items-start gap-3">
+							<div class="bg-primary/10 text-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-xl">
+								<Icon icon="lucide:wrench" class="h-5 w-5" />
+							</div>
+							<div class="min-w-0 flex-1 space-y-1">
+								<div class="flex items-center gap-2">
+									<h3 class="text-foreground truncate text-sm font-semibold">
+										{getToolDisplayName(tool)}
+									</h3>
+									<Badge variant="secondary" class="shrink-0 text-[10px] scale-90 px-1 border-0">System</Badge>
+								</div>
+								{#if tool.description}
+									<p class="text-muted-foreground line-clamp-2 text-xs">
+										{tool.description}
+									</p>
+								{/if}
+							</div>
+						</div>
+
+						<div class="mt-4 flex flex-wrap items-center gap-1.5">
+							{#each envBadges as badge}
+								<span
+									class="bg-muted text-muted-foreground inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium"
+								>
+									<Icon icon={badge.icon} class="h-3 w-3" />
+									{badge.label}
+								</span>
+							{/each}
+							{#each capBadges as badge}
+								<span
+									class="border-border/60 text-muted-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium"
+								>
+									<Icon icon={badge.icon} class="h-3 w-3" />
+									{badge.label}
+								</span>
+							{/each}
+							{#if tool.requiresApproval}
+								<span
+									class="inline-flex items-center gap-1 rounded-md bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-400"
+								>
+									<Icon icon="lucide:lock" class="h-3 w-3" />
+									Approval
+								</span>
+							{/if}
+						</div>
+
+						<Separator class="my-4 border-border/60" />
+						<div class="flex items-center gap-2">
+							<Button
+								variant="ghost"
+								size="sm"
+								class="text-muted-foreground hover:text-foreground gap-1.5 text-xs h-8 px-2.5 rounded-lg"
+								onclick={() => onEdit(tool)}
+							>
+								<Icon icon="lucide:external-link" class="h-3.5 w-3.5" />
+								View
+							</Button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</section>
+	{/if}
+
+	{#if customTools.length > 0}
+		<section class="space-y-3">
+			<h2 class="text-muted-foreground text-xs font-bold tracking-wider uppercase flex items-center gap-2">
+				<Icon icon="lucide:puzzle" class="h-3.5 w-3.5 text-emerald-500" />
+				Custom Tools ({customTools.length})
+			</h2>
+			<div class="grid gap-4 @min-[40rem]/tools-workspace:grid-cols-2 @min-[64rem]/tools-workspace:grid-cols-3">
+				{#each customTools as tool (tool.id)}
+					{@const envBadges = getEnvironmentBadges(tool)}
+					{@const capBadges = getCapabilityBadges(tool)}
+					<div
+						class="border-border/60 bg-card/40 group relative flex flex-col rounded-2xl border p-5 transition-all hover:border-border hover:shadow-sm"
+					>
+						<div class="flex items-start gap-3">
+							<div class="bg-emerald-500/10 text-emerald-600 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl">
+								<Icon icon="lucide:puzzle" class="h-5 w-5" />
+							</div>
+							<div class="min-w-0 flex-1 space-y-1">
+								<div class="flex items-center gap-2">
+									<h3 class="text-foreground truncate text-sm font-semibold">
+										{getToolDisplayName(tool)}
+									</h3>
+									{#if tool.isPublic}
+										<Badge variant="outline" class="shrink-0 text-[10px] scale-90 px-1 border-0 flex gap-0.5">
+											<Icon icon="lucide:unlock" class="h-2.5 w-2.5" />
+											Public
+										</Badge>
+									{/if}
+								</div>
+								{#if tool.description}
+									<p class="text-muted-foreground line-clamp-2 text-xs">
+										{tool.description}
+									</p>
+								{/if}
+							</div>
+						</div>
+
+						<div class="mt-4 flex flex-wrap items-center gap-1.5">
+							{#each envBadges as badge}
+								<span
+									class="bg-muted text-muted-foreground inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium"
+								>
+									<Icon icon={badge.icon} class="h-3 w-3" />
+									{badge.label}
+								</span>
+							{/each}
+							{#each capBadges as badge}
+								<span
+									class="border-border/60 text-muted-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium"
+								>
+									<Icon icon={badge.icon} class="h-3 w-3" />
+									{badge.label}
+								</span>
+							{/each}
+							{#if tool.requiresApproval}
+								<span
+									class="inline-flex items-center gap-1 rounded-md bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-400"
+								>
+									<Icon icon="lucide:lock" class="h-3 w-3" />
+									Approval
+								</span>
+							{/if}
+						</div>
+
+						<Separator class="my-4 border-border/60" />
+						<div class="flex items-center gap-2">
+							<Button
+								variant="ghost"
+								size="sm"
+								class="text-muted-foreground hover:text-foreground gap-1.5 text-xs h-8 px-2.5 rounded-lg"
+								onclick={() => onEdit(tool)}
+							>
+								<Icon icon="lucide:edit-3" class="h-3.5 w-3.5" />
+								Configure
+							</Button>
+							<Button aria-label="Delete tool" title="Delete tool"
+								variant="ghost"
+								size="sm"
+								class="text-muted-foreground hover:text-destructive ml-auto gap-1.5 text-xs h-8 px-2.5 rounded-lg"
+								onclick={() => onDelete(tool)}
+							>
+								<Icon icon="lucide:trash-2" class="h-3.5 w-3.5" />
+							</Button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</section>
+	{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import { type ToolSummary } from './types.ts';
+interface Props {
+    tools: ToolSummary[];
+    onEdit?: (tool: ToolSummary) => void;
+    onDelete?: (tool: ToolSummary) => void;
+}
+declare const ToolList: import("svelte").Component<Props, {}, "">;
+type ToolList = ReturnType<typeof ToolList>;
+export default ToolList;
+//# sourceMappingURL=ToolList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolList.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,WAAW,EAChB,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAuLF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/ToolPolicyToggles.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Switch } from '@vibesdotdev/kit/components/ui/switch';
+	import { Spinner, Icon } from '@vibesdotdev/kit/components';
+	import { getToolDisplayName, getToolSource, type ToolSummary } from './types.js';
+
+	interface Props {
+		tools: ToolSummary[];
+		overrides: Record<string, { enabled: boolean }>;
+		loadingToolId?: string | null;
+		onToggle?: (toolId: string, enabled: boolean) => Promise<void>;
+	}
+
+	let {
+		tools = [],
+		overrides = {},
+		loadingToolId = null,
+		onToggle = async () => {}
+	}: Props = $props();
+</script>
+
+<div class="space-y-3">
+	{#each tools as tool (tool.id)}
+		{@const isEnabled = overrides[tool.id]?.enabled !== false}
+		<div class="flex items-start gap-4 rounded-xl border border-border/60 bg-card/30 p-4 transition-all hover:border-border hover:shadow-sm">
+			<div class="bg-primary/5 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+				<Icon icon={getToolSource(tool) === 'system' ? 'lucide:wrench' : 'lucide:puzzle'} class="h-4 w-4" />
+			</div>
+			<div class="min-w-0 flex-1 space-y-1">
+				<div class="flex items-center gap-2">
+					<h4 class="text-sm font-semibold text-foreground truncate">{getToolDisplayName(tool)}</h4>
+					{#if tool.requiresApproval}
+						<span class="inline-flex items-center gap-1 rounded bg-amber-500/10 px-1 text-[9px] font-medium text-amber-700 dark:text-amber-400">
+							<Icon icon="lucide:lock" class="h-2.5 w-2.5" />
+							gated
+						</span>
+					{/if}
+				</div>
+				{#if tool.description}
+					<p class="text-xs text-muted-foreground line-clamp-2">{tool.description}</p>
+				{/if}
+			</div>
+			<div class="flex items-center shrink-0">
+				{#if loadingToolId === tool.id}
+					<Spinner class="size-4 mr-2" />
+				{/if}
+				<Switch
+					id={`toggle-${tool.id}`}
+					checked={isEnabled}
+					disabled={loadingToolId === tool.id}
+					onCheckedChange={(checked) => onToggle(tool.id, checked)}
+				/>
+			</div>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,13 @@
+import { type ToolSummary } from './types.ts';
+interface Props {
+    tools: ToolSummary[];
+    overrides: Record<string, {
+        enabled: boolean;
+    }>;
+    loadingToolId?: string | null;
+    onToggle?: (toolId: string, enabled: boolean) => Promise<void>;
+}
+declare const ToolPolicyToggles: import("svelte").Component<Props, {}, "">;
+type ToolPolicyToggles = ReturnType<typeof ToolPolicyToggles>;
+export default ToolPolicyToggles;
+//# sourceMappingURL=ToolPolicyToggles.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolPolicyToggles.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolPolicyToggles.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAqC,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAGhF,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D;AAgDF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/ToolSelector.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import {
+		getToolBindingId,
+		getToolDisplayName,
+		getToolSource,
+		type ToolSummary
+	} from './types.js';
+
+	interface Props {
+		tools: ToolSummary[];
+		selectedIds?: string[];
+		onSelect?: (tool: ToolSummary) => void;
+		placeholder?: string;
+	}
+
+	let {
+		tools = [],
+		selectedIds = $bindable([]),
+		onSelect = () => {},
+		placeholder = 'Search available tools...'
+	}: Props = $props();
+
+	let searchQuery = $state('');
+
+	const filtered = $derived(
+		searchQuery
+			? tools.filter(
+					(t: ToolSummary) =>
+						getToolDisplayName(t).toLowerCase().includes(searchQuery.toLowerCase()) ||
+						t.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
+						t.description?.toLowerCase().includes(searchQuery.toLowerCase())
+				)
+			: tools
+	);
+
+	function toggleSelect(tool: ToolSummary) {
+		const toolId = getToolBindingId(tool);
+		const idx = selectedIds.indexOf(toolId);
+		if (idx > -1) {
+			selectedIds = selectedIds.filter((id: string) => id !== toolId);
+		} else {
+			selectedIds = [...selectedIds, toolId];
+		}
+		onSelect(tool);
+	}
+</script>
+
+<div class="space-y-4">
+	<div class="relative">
+		<Icon icon="lucide:search" class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+		<Input
+			bind:value={searchQuery}
+			{placeholder}
+			class="pl-9 bg-background/50 border-border/80 focus-visible:ring-primary/20 focus-visible:border-primary transition-all rounded-xl"
+		/>
+	</div>
+
+	<div class="max-h-64 space-y-1.5 overflow-y-auto pr-1">
+		{#if filtered.length === 0}
+			<div class="py-12 text-center text-sm text-muted-foreground">
+				No tools match your search.
+			</div>
+		{:else}
+			{#each filtered as tool (tool.id)}
+				{@const source = getToolSource(tool)}
+				{@const isSelected = selectedIds.includes(getToolBindingId(tool))}
+				<button
+					type="button"
+					class={cn(
+						"flex w-full items-start gap-3 rounded-xl border border-border/60 p-3 text-left transition-all hover:bg-muted/40 hover:border-border",
+						isSelected && "border-primary bg-primary/5"
+					)}
+					onclick={() => toggleSelect(tool)}
+					>
+					<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+						<Icon icon={source === 'system' ? 'lucide:wrench' : 'lucide:puzzle'} class="h-4.5 w-4.5" />
+					</div>
+					<div class="min-w-0 flex-1 space-y-1">
+						<div class="flex items-center gap-2">
+							<span class="truncate text-sm font-semibold text-foreground">{getToolDisplayName(tool)}</span>
+							<Badge variant="outline" class="text-[9px] px-1 font-semibold tracking-wide uppercase shrink-0">
+								{source}
+							</Badge>
+							{#if tool.requiresApproval}
+								<Badge variant="secondary" class="bg-amber-500/10 text-amber-700 dark:text-amber-400 border-0 text-[9px] px-1 shrink-0">
+									gated
+								</Badge>
+							{/if}
+						</div>
+						{#if tool.description}
+							<p class="truncate text-xs text-muted-foreground">
+								{tool.description}
+							</p>
+						{/if}
+					</div>
+					<div class="flex items-center justify-center shrink-0 ml-2 mt-1">
+						<div
+							class="h-5 w-5 rounded-full border flex items-center justify-center transition-all"
+							class:border-primary={isSelected}
+							class:bg-primary={isSelected}
+							class:text-primary-foreground={isSelected}
+							class:border-border={!isSelected}
+						>
+							{#if isSelected}
+								<Icon icon="lucide:check" class="h-3 w-3" />
+							{/if}
+						</div>
+					</div>
+				</button>
+			{/each}
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,11 @@
+import { type ToolSummary } from './types.ts';
+interface Props {
+    tools: ToolSummary[];
+    selectedIds?: string[];
+    onSelect?: (tool: ToolSummary) => void;
+    placeholder?: string;
+}
+declare const ToolSelector: import("svelte").Component<Props, {}, "selectedIds">;
+type ToolSelector = ReturnType<typeof ToolSelector>;
+export default ToolSelector;
+//# sourceMappingURL=ToolSelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolSelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolSelector.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAIL,KAAK,WAAW,EAChB,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAiGF,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/ToolsLoader.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte/state';
+	import { getToolsState, type ToolsStateInitOptions } from '../state.svelte.js';
+	import { TOOLS_CATALOG_RUNTIME_REFUSAL } from '../runtime.js';
+	import { settleSurfaceWork } from '../surface-outcome.js';
+
+	/** Owns loading and teardown for one surface. Children inherit its state. */
+	let {
+		client, initialData, initialSystemTools, initialCustomTools, children
+	}: {
+		client?: ToolsStateInitOptions['client'];
+		initialData?: ToolsStateInitOptions['initialData'];
+		initialSystemTools?: ToolsStateInitOptions['systemTools'];
+		initialCustomTools?: ToolsStateInitOptions['customTools'];
+		children?: Snippet;
+	} = $props();
+
+	const state = getToolsState();
+	const runtimeStore = getRuntimeSvelteContext();
+
+	// Seed synchronously, including SSR. Never wait for a runtime to show initial data.
+	untrack(() => state.seedInitial({ initialData, systemTools: initialSystemTools, customTools: initialCustomTools }));
+
+	$effect(() => {
+		const runtime = runtimeStore.runtime;
+		const options = { client, initialData, systemTools: initialSystemTools, customTools: initialCustomTools };
+		let live = true;
+		untrack(() => {
+			state.dispose();
+			state.seedInitial(options);
+			void (async () => {
+				const loaded = await settleSurfaceWork(
+					() => runtime ? Promise.resolve(runtime) : runtimeStore.load(),
+					TOOLS_CATALOG_RUNTIME_REFUSAL
+				);
+				if (!live) return;
+				if (loaded.failed) {
+					state.recordFailure(loaded.failed);
+					return;
+				}
+				await state.init({ ...options, runtime: loaded.value });
+			})();
+		});
+		return () => {
+			live = false;
+			state.dispose();
+		};
+	});
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import { type ToolsStateInitOptions } from '../state.svelte.ts';
+type $$ComponentProps = {
+    client?: ToolsStateInitOptions['client'];
+    initialData?: ToolsStateInitOptions['initialData'];
+    initialSystemTools?: ToolsStateInitOptions['systemTools'];
+    initialCustomTools?: ToolsStateInitOptions['customTools'];
+    children?: Snippet;
+};
+declare const ToolsLoader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolsLoader = ReturnType<typeof ToolsLoader>;
+export default ToolsLoader;
+//# sourceMappingURL=ToolsLoader.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolsLoader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE/C,OAAO,EAAiB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAI9E,KAAK,gBAAgB,GAAI;IACxB,MAAM,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC1D,kBAAkB,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkDH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ToolsOverview.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import { getToolsState, peekToolsStateContext } from '../state.svelte.js';
+	import ToolsLoader from './ToolsLoader.svelte';
+	import ToolList from './ToolList.svelte';
+	import * as Dialog from '@vibesdotdev/kit/components/ui/dialog';
+
+	interface Props {
+		title?: string;
+		description?: string;
+	}
+
+	let {
+		title = 'Tools',
+		description = 'Runtime-registered capabilities available on this surface'
+	}: Props = $props();
+	const ownsLoading = !peekToolsStateContext();
+	const toolsState = getToolsState();
+	let search = $state('');
+	const selected = $derived(toolsState.activeTool);
+	let inspectorOpen = $state(false);
+	const filtered = $derived(toolsState.filter(search));
+</script>
+
+{#if ownsLoading}<ToolsLoader />{/if}
+
+<div class="@container/tools-workspace min-w-0 space-y-6">
+	<div class="flex min-w-0 flex-wrap items-center justify-between gap-4">
+		<div class="min-w-0">
+			<h1 class="truncate text-2xl font-bold">{title}</h1>
+			<p class="text-muted-foreground text-sm">{description}</p>
+		</div>
+		<Button variant="outline" size="sm" onclick={() => void toolsState.refresh()} disabled={toolsState.loading}>
+			<Icon icon="tabler:refresh" class={`mr-2 h-4 w-4 ${toolsState.loading ? 'animate-spin' : ''}`} />
+			Refresh
+		</Button>
+	</div>
+
+	{#if toolsState.error}
+		<div role="alert" class="border-destructive bg-destructive/10 text-destructive rounded-lg border p-4 text-sm">
+			{toolsState.error}
+		</div>
+	{/if}
+
+	<Input aria-label="Search runtime tools" placeholder="Search runtime tools…" bind:value={search} />
+
+	{#if toolsState.loading && !toolsState.initialized}
+		<div class="text-muted-foreground flex items-center justify-center gap-2 py-12 text-sm">
+			<Icon icon="tabler:loader-2" class="h-5 w-5 animate-spin" />
+			Loading runtime tools…
+		</div>
+	{:else if filtered.length === 0}
+		<div class="text-muted-foreground rounded-2xl border border-dashed p-10 text-center text-sm">
+			{search ? 'No tools match your search.' : 'No tools are registered for this runtime surface.'}
+			{#if search}<Button variant="ghost" size="sm" onclick={() => { search = ''; }}>Clear search</Button>{/if}
+		</div>
+	{:else}
+		<ToolList tools={filtered} onEdit={(tool) => { toolsState.setActiveTool(tool.id); inspectorOpen = true; }} />
+	{/if}
+</div>
+
+<Dialog.Root bind:open={inspectorOpen}>
+	<Dialog.Content class="max-h-[85dvh] overflow-y-auto sm:max-w-2xl">
+		<Dialog.Header>
+			<Dialog.Title>{selected?.name ?? 'Tool details'}</Dialog.Title>
+			<Dialog.Description>{selected?.description ?? 'Inspect this tool’s runtime contract.'}</Dialog.Description>
+		</Dialog.Header>
+		{#if selected}
+			<dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
+				<dt class="text-muted-foreground">Identifier</dt><dd class="break-all font-mono">{selected.id}</dd>
+				<dt class="text-muted-foreground">Runs on</dt><dd>{selected.hardware?.join(', ') || 'Not declared'}</dd>
+				<dt class="text-muted-foreground">Approval</dt><dd>{selected.requiresApproval ? 'Required by this tool' : 'Determined by your session policy'}</dd>
+			</dl>
+			{#if selected.inputSchema}
+				<h3 class="text-sm font-medium">Parameters</h3>
+				<pre class="max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs">{JSON.stringify(selected.inputSchema, null, 2)}</pre>
+			{/if}
+			{#if selected.outputSchema}
+				<details><summary class="cursor-pointer text-sm font-medium">Result schema</summary>
+					<pre class="mt-2 max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs">{JSON.stringify(selected.outputSchema, null, 2)}</pre>
+				</details>
+			{/if}
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,8 @@
+interface Props {
+    title?: string;
+    description?: string;
+}
+declare const ToolsOverview: import("svelte").Component<Props, {}, "">;
+type ToolsOverview = ReturnType<typeof ToolsOverview>;
+export default ToolsOverview;
+//# sourceMappingURL=ToolsOverview.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsOverview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolsOverview.svelte.ts"],"names":[],"mappings":"AAYC,UAAU,KAAK;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAuFF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/ToolsWorkspace.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { PageLayout } from '@vibesdotdev/kit/components/page-layout';
+	import ToolsLoader from './ToolsLoader.svelte';
+	import ToolsOverview from './ToolsOverview.svelte';
+	import { getToolsState } from '../state.svelte.js';
+	getToolsState();
+</script>
+
+<ToolsLoader />
+
+<PageLayout variant="wide">
+	<ToolsOverview
+		title="Tools"
+		description="Inspect the actions available to agents and other AI features in this runtime."
+	/>
+</PageLayout>

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

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToolsWorkspace: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToolsWorkspace = InstanceType<typeof ToolsWorkspace>;
+export default ToolsWorkspace;
+//# sourceMappingURL=ToolsWorkspace.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsWorkspace.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolsWorkspace.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,cAAc;;kBAA+E,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}