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

package/dist/skills/descriptor.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Agent Skill composition descriptors.
+ *
+ * A `tools/skill` asset names a deliberate bundle of runtime-owned agents,
+ * prompts, and tools. The skill adapter renders those live descriptors into
+ * portable Agent Skills files; package owners do not maintain a second,
+ * hand-copied `SKILL.md` tree.
+ */
+import * as z from 'zod/v4';
+export declare const TOOLS_SKILL_KIND: "tools/skill";
+declare const SkillAssetSelectorSchema: z.ZodObject<{
+    ids: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    prefixes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    excludeIds: z.ZodOptional<z.ZodArray<z.ZodString>>;
+}, z.core.$strip>;
+export type SkillAssetSelector = z.infer<typeof SkillAssetSelectorSchema>;
+export declare const SkillCompositionDescriptorSchema: z.ZodObject<{
+    id: z.ZodString;
+    tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    hardware: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    enabled: z.ZodOptional<z.ZodBoolean>;
+    priority: z.ZodOptional<z.ZodNumber>;
+    capabilityId: z.ZodOptional<z.ZodString>;
+    requiredContext: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    optionalContext: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    config: z.ZodOptional<z.ZodUnknown>;
+    retention: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+        maxAgeDays: z.ZodOptional<z.ZodNumber>;
+        maxEntries: z.ZodOptional<z.ZodNumber>;
+        maxBytes: z.ZodOptional<z.ZodNumber>;
+        cascadeFrom: z.ZodOptional<z.ZodString>;
+        ageField: z.ZodOptional<z.ZodString>;
+        reason: z.ZodString;
+        enforcedBy: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>]>>;
+    kind: z.ZodLiteral<"tools/skill">;
+    name: z.ZodString;
+    description: z.ZodString;
+    category: z.ZodOptional<z.ZodString>;
+    skillName: z.ZodString;
+    targets: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    instructions: z.ZodOptional<z.ZodString>;
+    tools: z.ZodOptional<z.ZodObject<{
+        ids: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        prefixes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        excludeIds: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    }, z.core.$strip>>;
+    prompts: z.ZodOptional<z.ZodObject<{
+        ids: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        prefixes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        excludeIds: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    }, z.core.$strip>>;
+    agents: z.ZodOptional<z.ZodObject<{
+        ids: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        tags: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        prefixes: z.ZodOptional<z.ZodArray<z.ZodString>>;
+        excludeIds: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    }, z.core.$strip>>;
+    promptVariables: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodRecord<z.ZodString, z.ZodOptional<z.ZodType<import("@vibesdotdev/kernel/bootstrap").JsonValue, import("@vibesdotdev/kernel/bootstrap").JsonValue, z.core.$ZodTypeInternals<import("@vibesdotdev/kernel/bootstrap").JsonValue, import("@vibesdotdev/kernel/bootstrap").JsonValue>>>>>>;
+    compatibility: z.ZodOptional<z.ZodString>;
+    allowedTools: z.ZodOptional<z.ZodArray<z.ZodString>>;
+    disableModelInvocation: z.ZodOptional<z.ZodBoolean>;
+    metadata: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean]>>>;
+    references: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+}, z.core.$strip>;
+export type SkillCompositionDescriptor = z.input<typeof SkillCompositionDescriptorSchema>;
+export declare function createSkillCompositionDescriptor(descriptor: Omit<SkillCompositionDescriptor, 'kind'>): SkillCompositionDescriptor;
+export {};
+//# sourceMappingURL=descriptor.d.ts.map

package/dist/skills/descriptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"descriptor.d.ts","sourceRoot":"","sources":["../../src/skills/descriptor.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAI5B,eAAO,MAAM,gBAAgB,EAAG,aAAsB,CAAC;AAEvD,QAAA,MAAM,wBAAwB;;;;;iBAkB3B,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAO1E,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuC3C,CAAC;AAEH,MAAM,MAAM,0BAA0B,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,gCAAgC,CAAC,CAAC;AAE1F,wBAAgB,gCAAgC,CAC/C,UAAU,EAAE,IAAI,CAAC,0BAA0B,EAAE,MAAM,CAAC,GAClD,0BAA0B,CAK5B"}

package/dist/skills/descriptor.js

@@ -0,0 +1,80 @@
+/**
+ * Agent Skill composition descriptors.
+ *
+ * A `tools/skill` asset names a deliberate bundle of runtime-owned agents,
+ * prompts, and tools. The skill adapter renders those live descriptors into
+ * portable Agent Skills files; package owners do not maintain a second,
+ * hand-copied `SKILL.md` tree.
+ */
+import * as z from 'zod/v4';
+import { RuntimeDescriptorSchema } from '@vibesdotdev/kernel/schemas/descriptor';
+import { PromptArgsSchema } from '@vibesdotdev/ai-schemas';
+export const TOOLS_SKILL_KIND = 'tools/skill';
+const SkillAssetSelectorSchema = z
+    .object({
+    /** Exact runtime asset IDs. Order is preserved in generated references. */
+    ids: z.array(z.string().trim().min(1)).optional(),
+    /** Select assets carrying at least one of these tags. */
+    tags: z.array(z.string().trim().min(1)).optional(),
+    /** Select assets whose ID starts with at least one prefix. */
+    prefixes: z.array(z.string().trim().min(1)).optional(),
+    /** Remove assets after the inclusive selectors have been evaluated. */
+    excludeIds: z.array(z.string().trim().min(1)).optional()
+})
+    .superRefine((selector, ctx) => {
+    if (!selector.ids?.length && !selector.tags?.length && !selector.prefixes?.length) {
+        ctx.addIssue({
+            code: 'custom',
+            message: 'A skill asset selector needs ids, tags, or prefixes'
+        });
+    }
+});
+const SkillReferenceNameSchema = z
+    .string()
+    .trim()
+    .regex(/^[a-z0-9][a-z0-9._-]*\.md$/, 'Skill reference names must be safe Markdown basenames');
+export const SkillCompositionDescriptorSchema = RuntimeDescriptorSchema.extend({
+    kind: z.literal(TOOLS_SKILL_KIND),
+    name: z.string().trim().min(1),
+    description: z.string().trim().min(1).max(1024),
+    category: z.string().trim().min(1).optional(),
+    skillName: z
+        .string()
+        .trim()
+        .min(1)
+        .max(64)
+        .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, 'Invalid Agent Skills directory name'),
+    /** External host IDs supported by this skill. Omit for every skills-capable host. */
+    targets: z.array(z.string().trim().min(1)).optional(),
+    /** Human-authored connective guidance; runtime assets supply the detailed source material. */
+    instructions: z.string().trim().min(1).optional(),
+    tools: SkillAssetSelectorSchema.optional(),
+    prompts: SkillAssetSelectorSchema.optional(),
+    agents: SkillAssetSelectorSchema.optional(),
+    /** Per-prompt template variables keyed by prompt ID. Descriptor defaults are applied first. */
+    promptVariables: z.record(z.string(), PromptArgsSchema).optional(),
+    compatibility: z.string().trim().max(500).optional(),
+    allowedTools: z.array(z.string().trim().min(1)).optional(),
+    disableModelInvocation: z.boolean().optional(),
+    metadata: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+    /** Small package-owned supplements. Generated agent/prompt/tool references are added automatically. */
+    references: z.record(SkillReferenceNameSchema, z.string()).optional()
+}).superRefine((descriptor, ctx) => {
+    if (!descriptor.instructions &&
+        !descriptor.tools &&
+        !descriptor.prompts &&
+        !descriptor.agents &&
+        Object.keys(descriptor.references ?? {}).length === 0) {
+        ctx.addIssue({
+            code: 'custom',
+            message: 'A skill must declare instructions, selected runtime assets, or references'
+        });
+    }
+});
+export function createSkillCompositionDescriptor(descriptor) {
+    return SkillCompositionDescriptorSchema.parse({
+        ...descriptor,
+        kind: TOOLS_SKILL_KIND
+    });
+}
+//# sourceMappingURL=descriptor.js.map

package/dist/skills/descriptor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descriptor.js","sourceRoot":"","sources":["../../src/skills/descriptor.ts"],"names":[],"mappings":"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"}

package/dist/skills/index.d.ts

@@ -0,0 +1,3 @@
+export { TOOLS_SKILL_KIND, SkillCompositionDescriptorSchema, createSkillCompositionDescriptor } from './descriptor.ts';
+export type { SkillAssetSelector, SkillCompositionDescriptor } from './descriptor.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/skills/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/skills/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,gBAAgB,EAChB,gCAAgC,EAChC,gCAAgC,EAChC,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/skills/index.js

@@ -0,0 +1,2 @@
+export { TOOLS_SKILL_KIND, SkillCompositionDescriptorSchema, createSkillCompositionDescriptor } from "./descriptor.js";
+//# sourceMappingURL=index.js.map

package/dist/skills/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/skills/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,gBAAgB,EAChB,gCAAgC,EAChC,gCAAgC,EAChC,MAAM,iBAAiB,CAAC"}

package/dist/svelte/components/CustomToolEditor.svelte

@@ -0,0 +1,363 @@
+<script lang="ts">
+	import { Input } from '@vibesdotdev/kit/components/ui/input';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Switch } from '@vibesdotdev/kit/components/ui/switch';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Separator } from '@vibesdotdev/kit/components/ui/separator';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Spinner } from '@vibesdotdev/kit/components/ui/spinner';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import CodeEditor from '@vibesdotdev/kit/components/code/CodeEditor.svelte';
+	import { toast } from 'svelte-sonner';
+	import * as z from 'zod/v4';
+	import { JsonValueSchema } from '@vibesdotdev/kernel/schemas/json';
+	import type { JsonValue } from '@vibesdotdev/shared/types';
+	import type { UnifiedTool } from './types.js';
+	import { decodeJsonText, JsonObjectSchema, type JsonObject } from '../json-text.js';
+	import { settleSurfaceWork } from '../surface-outcome.js';
+	import { readCardPayload } from '../tool-widgets/payload.js';
+
+	/** Failures show these fixed lines, never the failure's own text (see surface-outcome.ts). */
+	const SAVE_FAILED_MESSAGE = 'Failed to save tool';
+	const EXECUTE_FAILED_MESSAGE = 'Tool execution failed';
+	const INVALID_INPUT_MESSAGE = 'Invalid JSON input: enter a JSON object';
+	const EMPTY_TEST_INPUT = '{\n  \n}';
+
+	/** The parts of a JSON-schema property the mock input is seeded from; each is read on its own. */
+	const SeedPropertyFields = { default: JsonValueSchema, type: z.string() };
+
+	interface Props {
+		tool: UnifiedTool;
+		onSave?: (tool: UnifiedTool) => Promise<void>;
+		onExecute?: (toolId: string, input: JsonObject) => Promise<JsonValue>;
+	}
+
+	let {
+		tool = $bindable(),
+		onSave = async () => {},
+		onExecute = async () => ({})
+	}: Props = $props();
+
+	// Tabs: 'editor' | 'preview'
+	let activeTab = $state<'editor' | 'preview'>('editor');
+	let isSaving = $state(false);
+	let isExecuting = $state(false);
+
+	const codePlaceholder = `async function execute(input, runtime, ctx) {\n  // Write custom Javascript logic here...\n  return 'Result';\n}`;
+
+	// Preview / execution state
+	let testInput = $state<string>(EMPTY_TEST_INPUT);
+	let executionResult = $state<{ success: boolean; output?: JsonValue; error?: string } | null>(null);
+
+	// Parse custom input schema to generate a default mock input JSON
+	$effect(() => {
+		if (tool.inputSchema) {
+			// Defaults are read as JSON values, so the seed always serializes; a non-JSON default seeds by type.
+			const props = readCardPayload({ properties: JsonObjectSchema }, tool.inputSchema).get('properties') ?? {};
+			const defaultInput = Object.fromEntries(
+				Object.entries(props).map(([key, prop]) => {
+					const property = readCardPayload(SeedPropertyFields, prop);
+					const type = property.get('type');
+					const declared = property.get('default');
+					const seed: JsonValue =
+						declared !== undefined
+							? declared
+							: type === 'string' ? '' : type === 'number' ? 0 : type === 'boolean' ? false : null;
+					return [key, seed];
+				})
+			);
+			testInput = JSON.stringify(defaultInput, null, 2);
+		}
+	});
+
+	async function handleSave() {
+		if (isSaving) return;
+
+		isSaving = true;
+		try {
+			const saved = await settleSurfaceWork(() => onSave(tool), {
+				message: SAVE_FAILED_MESSAGE,
+				reason: 'custom-tool-save-failed'
+			});
+			if (saved.failed) toast.error(saved.failed.message);
+			else toast.success('Custom tool saved successfully');
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	async function handleExecute() {
+		if (isExecuting) return;
+
+		isExecuting = true;
+		executionResult = null;
+		try {
+			const input = decodeJsonText(testInput, JsonObjectSchema).parsed;
+			if (input === undefined) {
+				executionResult = { success: false, error: INVALID_INPUT_MESSAGE };
+				toast.error(EXECUTE_FAILED_MESSAGE);
+				return;
+			}
+			const executed = await settleSurfaceWork(() => onExecute(tool.id, input), {
+				message: EXECUTE_FAILED_MESSAGE,
+				reason: 'custom-tool-execute-failed'
+			});
+			if (executed.failed) {
+				executionResult = { success: false, error: executed.failed.message };
+				toast.error(EXECUTE_FAILED_MESSAGE);
+				return;
+			}
+			executionResult = { success: true, output: executed.value };
+			toast.success('Tool execution completed');
+		} finally {
+			isExecuting = false;
+		}
+	}
+</script>
+
+<div class="grid gap-6 lg:grid-cols-3">
+	<!-- Left 1/3 Panel: Tool Configuration & Meta -->
+	<div class="lg:col-span-1 space-y-6 rounded-2xl border border-border/60 bg-card/30 p-5">
+		<div class="space-y-1">
+			<h3 class="text-base font-semibold text-foreground flex items-center gap-2">
+				<Icon icon="lucide:settings" class="h-4 w-4" />
+				Tool Info
+			</h3>
+			<p class="text-xs text-muted-foreground">Configure the metadata and safety ceilings for your custom tool.</p>
+		</div>
+
+		<div class="space-y-4">
+			<div class="space-y-1.5">
+				<label for="tool-id" class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Tool Identifier (ID)</label>
+				<Input
+					id="tool-id"
+					bind:value={tool.id}
+					disabled={true}
+					class="bg-muted/50 border-border/80 rounded-xl"
+				/>
+			</div>
+
+			<div class="space-y-1.5">
+				<label for="tool-name" class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Name</label>
+				<Input
+					id="tool-name"
+					bind:value={tool.name}
+					placeholder="My Custom Tool"
+					class="bg-background/50 border-border/80 focus-visible:ring-primary/20 focus-visible:border-primary rounded-xl"
+				/>
+			</div>
+
+			<div class="space-y-1.5">
+				<label for="tool-description" class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Description</label>
+				<textarea
+					id="tool-description"
+					bind:value={tool.description}
+					placeholder="Explain what the tool does and what inputs it requires..."
+					rows="3"
+					class="flex min-h-[80px] w-full rounded-xl border border-border/80 bg-background/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50 resize-none transition-all"
+				></textarea>
+			</div>
+
+			<Separator class="border-border/60" />
+
+			<div class="space-y-3.5">
+				<div class="flex items-center justify-between">
+					<div>
+						<h4 class="text-xs font-bold text-foreground">Requires Approval</h4>
+						<p class="text-[11px] text-muted-foreground">Prompt user before executing this tool</p>
+					</div>
+					<Switch bind:checked={tool.requiresApproval} />
+				</div>
+
+				<div class="flex items-center justify-between">
+					<div>
+						<h4 class="text-xs font-bold text-foreground">Active Status</h4>
+						<p class="text-[11px] text-muted-foreground">Expose this tool to active agents</p>
+					</div>
+					<Switch bind:checked={tool.isActive} />
+				</div>
+
+				<div class="flex items-center justify-between">
+					<div>
+						<h4 class="text-xs font-bold text-foreground">Public Availability</h4>
+						<p class="text-[11px] text-muted-foreground">Permit other users to discover and run this tool</p>
+					</div>
+					<Switch bind:checked={tool.isPublic} />
+				</div>
+			</div>
+		</div>
+
+		<Button
+			type="button"
+			class="w-full gap-2 rounded-xl h-10 font-medium"
+			disabled={isSaving}
+			onclick={handleSave}
+		>
+			{#if isSaving}
+				<Spinner class="size-4" />
+			{/if}
+			<Icon icon="lucide:save" class="h-4 w-4" />
+			Save Changes
+		</Button>
+	</div>
+
+	<!-- Right 2/3 Panel: Code Editor, Schemas, & Diagnostics Playground -->
+	<div class="lg:col-span-2 space-y-4">
+		<!-- Tabs Trigger Header -->
+		<div class="flex border-b border-border/80 pb-px gap-6">
+			<button
+				type="button"
+				class="pb-2 text-sm font-semibold border-b-2 transition-all flex items-center gap-1.5"
+				class:border-primary={activeTab === 'editor'}
+				class:text-foreground={activeTab === 'editor'}
+				class:border-transparent={activeTab !== 'editor'}
+				class:text-muted-foreground={activeTab !== 'editor'}
+				onclick={() => (activeTab = 'editor')}
+			>
+				<Icon icon="lucide:code-2" class="h-4 w-4" />
+				Code & Schemas
+			</button>
+			<button
+				type="button"
+				class="pb-2 text-sm font-semibold border-b-2 transition-all flex items-center gap-1.5"
+				class:border-primary={activeTab === 'preview'}
+				class:text-foreground={activeTab === 'preview'}
+				class:border-transparent={activeTab !== 'preview'}
+				class:text-muted-foreground={activeTab !== 'preview'}
+				onclick={() => (activeTab = 'preview')}
+			>
+				<Icon icon="lucide:play-circle" class="h-4 w-4 text-emerald-500" />
+				Preview & Diagnostics
+			</button>
+		</div>
+
+		<!-- Tab Content: Editor -->
+		{#if activeTab === 'editor'}
+			<div class="space-y-4">
+				<div class="space-y-1.5">
+					<div class="flex items-center justify-between">
+						<span class="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+							<Icon icon="lucide:terminal" class="h-3.5 w-3.5 text-primary" />
+							JavaScript Implementation
+						</span>
+						<Badge variant="outline" class="text-[9px] font-semibold scale-90 border-0 bg-primary/10 text-primary">ES2022</Badge>
+					</div>
+					<div class="relative rounded-xl border border-border/80 overflow-hidden bg-muted/30">
+						<CodeEditor
+							code={tool.code ?? ''}
+							language="javascript"
+							filename={`${tool.id || 'custom-tool'}.js`}
+							placeholder={codePlaceholder}
+							minHeight="320px"
+							resizable
+							showFullscreen
+							fullscreenTitle="Tool Implementation"
+							onCodeChange={(value) => {
+								tool.code = value;
+							}}
+						/>
+					</div>
+				</div>
+
+				<div class="grid gap-4 md:grid-cols-2">
+					<div class="space-y-1.5">
+						<label for="tool-input-schema" class="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+							<Icon icon="lucide:text-cursor-input" class="h-3.5 w-3.5 text-amber-500" />
+							Input Schema (JSON Schema)
+						</label>
+						<textarea
+							id="tool-input-schema"
+							value={tool.inputSchema ? JSON.stringify(tool.inputSchema, null, 2) : ''}
+							onchange={(e) => {
+								const schema = decodeJsonText(e.currentTarget.value, JsonObjectSchema).parsed;
+								if (schema) tool.inputSchema = schema;
+								else toast.error('Invalid JSON in Input Schema');
+							}}
+							rows="6"
+							class="w-full font-mono text-xs p-3 rounded-xl border border-border/80 bg-background/50 ring-0 focus-visible:outline-none resize-none"
+						></textarea>
+					</div>
+
+					<div class="space-y-1.5">
+						<label for="tool-output-schema" class="text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+							<Icon icon="lucide:log-out" class="h-3.5 w-3.5 text-emerald-500" />
+							Output Schema (JSON Schema)
+						</label>
+						<textarea
+							id="tool-output-schema"
+							value={tool.outputSchema ? JSON.stringify(tool.outputSchema, null, 2) : ''}
+							onchange={(e) => {
+								const schema = decodeJsonText(e.currentTarget.value, JsonObjectSchema).parsed;
+								if (schema) tool.outputSchema = schema;
+								else toast.error('Invalid JSON in Output Schema');
+							}}
+							rows="6"
+							class="w-full font-mono text-xs p-3 rounded-xl border border-border/80 bg-background/50 ring-0 focus-visible:outline-none resize-none"
+						></textarea>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<!-- Tab Content: Preview Playground -->
+			<div class="space-y-4">
+				<div class="rounded-2xl border border-border/60 bg-muted/20 p-5 space-y-4">
+					<div class="space-y-1">
+						<h4 class="text-sm font-semibold text-foreground flex items-center gap-1.5">
+							<Icon icon="lucide:flask-conical" class="text-primary h-4.5 w-4.5" />
+							Mock Variables Input
+						</h4>
+						<p class="text-xs text-muted-foreground">Formulate mock input arguments to test custom tool execution triggers.</p>
+					</div>
+
+					<div class="relative rounded-xl border border-border/80 overflow-hidden bg-background/60">
+						<textarea
+							id="tool-test-input"
+							aria-label="Mock variables input"
+							bind:value={testInput}
+							rows="6"
+							class="w-full font-mono text-xs p-3 ring-0 focus-visible:outline-none bg-transparent"
+						></textarea>
+					</div>
+
+					<Button
+						type="button"
+						variant="secondary"
+						class="w-full gap-2 rounded-xl font-medium border border-border bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400"
+						disabled={isExecuting}
+						onclick={handleExecute}
+					>
+						{#if isExecuting}
+							<Spinner class="size-4" />
+						{/if}
+						<Icon icon="lucide:play" class="h-4 w-4" />
+						Run Tool Diagnostic
+					</Button>
+				</div>
+
+				{#if executionResult}
+					<div class={cn(
+						"rounded-2xl border border-border/60 p-5 space-y-3",
+						executionResult.success ? "bg-emerald-500/5" : "bg-destructive/5"
+					)}>
+						<div class="flex items-center justify-between">
+							<h4 class="text-sm font-semibold flex items-center gap-1.5">
+								<Icon
+									icon={executionResult.success ? 'lucide:check-circle' : 'lucide:alert-circle'}
+									class={executionResult.success ? 'text-emerald-500 h-4.5 w-4.5' : 'text-red-500 h-4.5 w-4.5'}
+								/>
+								Execution Output
+							</h4>
+							<Badge variant={executionResult.success ? 'outline' : 'destructive'} class="text-[9px] uppercase tracking-wide px-1 border-0">
+								{executionResult.success ? 'success' : 'failed'}
+							</Badge>
+						</div>
+
+						<pre class="rounded-xl border border-border/80 bg-background/80 p-4 font-mono text-xs overflow-x-auto max-h-60 scrollbar-thin">
+							{JSON.stringify(executionResult.success ? executionResult.output : executionResult.error, null, 2)}
+						</pre>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,12 @@
+import type { JsonValue } from '@vibesdotdev/shared/types';
+import type { UnifiedTool } from './types.ts';
+import { type JsonObject } from '../json-text.ts';
+interface Props {
+    tool: UnifiedTool;
+    onSave?: (tool: UnifiedTool) => Promise<void>;
+    onExecute?: (toolId: string, input: JsonObject) => Promise<JsonValue>;
+}
+declare const CustomToolEditor: import("svelte").Component<Props, {}, "tool">;
+type CustomToolEditor = ReturnType<typeof CustomToolEditor>;
+export default CustomToolEditor;
+//# sourceMappingURL=CustomToolEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomToolEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CustomToolEditor.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKnF,UAAU,KAAK;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;CACtE;AAgSF,QAAA,MAAM,gBAAgB,+CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/ToolBadge.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import {
+		getToolDisplayName,
+		getToolSource,
+		type ToolSummary
+	} from './types.js';
+
+	interface Props {
+		tool: ToolSummary;
+		size?: 'xs' | 'sm';
+		showIcon?: boolean;
+		showSource?: boolean;
+		class?: string;
+	}
+
+	let {
+		tool,
+		size = 'sm',
+		showIcon = true,
+		showSource = false,
+		class: className = ''
+	}: Props = $props();
+
+	const source = $derived(getToolSource(tool));
+	const label = $derived(getToolDisplayName(tool));
+	const icon = $derived(source === 'system' ? 'lucide:wrench' : 'lucide:puzzle');
+	const sizeClass = $derived(size === 'xs' ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-0.5');
+</script>
+
+<Badge
+	variant="outline"
+	class={cn(
+		'inline-flex items-center gap-1 font-medium tracking-tight',
+		sizeClass,
+		className
+	)}
+	title={tool.description}
+>
+	{#if showIcon}
+		<Icon {icon} class={size === 'xs' ? 'h-2.5 w-2.5' : 'h-3 w-3'} />
+	{/if}
+	<span class="truncate">{label}</span>
+	{#if showSource}
+		<span class="uppercase opacity-60">{source}</span>
+	{/if}
+	{#if tool.requiresApproval}
+		<Icon icon="lucide:lock" class="h-2.5 w-2.5 text-amber-500" />
+	{/if}
+</Badge>

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

@@ -0,0 +1,12 @@
+import { type ToolSummary } from './types.ts';
+interface Props {
+    tool: ToolSummary;
+    size?: 'xs' | 'sm';
+    showIcon?: boolean;
+    showSource?: boolean;
+    class?: string;
+}
+declare const ToolBadge: import("svelte").Component<Props, {}, "">;
+type ToolBadge = ReturnType<typeof ToolBadge>;
+export default ToolBadge;
+//# sourceMappingURL=ToolBadge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ToolBadge.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,WAAW,EAChB,MAAM,YAAY,CAAC;AAGpB,UAAU,KAAK;IACd,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAyCF,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}