ruflo 3.6.12 → 3.6.14

package/src/ruvocal/src/lib/components/wasm/GalleryPanel.svelte

@@ -0,0 +1,357 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import {
+		allMcpServers,
+		selectedServerIds,
+		healthCheckServer,
+		loadWasmTemplate,
+		getWasmGalleryTemplates,
+		WASM_SERVER_ID,
+	} from "$lib/stores/mcpServers";
+	import {
+		wasmLoaded,
+		wasmLoading,
+		wasmError,
+		initWasmMcp,
+		searchGalleryTemplates,
+		getGalleryCategories,
+		saveTemplateAsRvf,
+	} from "$lib/stores/wasmMcp";
+	import type { GalleryTemplate, SearchResult } from "$lib/wasm";
+	import IconSearch from "~icons/carbon/Search";
+	import IconDownload from "~icons/carbon/Download";
+	import IconCheckmark from "~icons/carbon/Checkmark";
+	import IconCode from "~icons/carbon/Code";
+	import IconSearch16 from "~icons/carbon/Search";
+	import IconFolder from "~icons/carbon/Folder";
+
+	let searchQuery = $state("");
+	let selectedCategory = $state<string | null>(null);
+	let templates = $state<GalleryTemplate[]>([]);
+	let searchResults = $state<SearchResult[]>([]);
+	let categories = $state<Record<string, number>>({});
+	let loading = $state(false);
+
+	// Get WASM server from MCP servers
+	const wasmServer = $derived($allMcpServers.find((s) => s.id === WASM_SERVER_ID));
+	const isWasmEnabled = $derived($selectedServerIds.has(WASM_SERVER_ID));
+	const activeTemplateId = $derived(wasmServer?.wasmTemplateId);
+	const activeTemplateName = $derived(wasmServer?.wasmTemplateName);
+
+	// Category icons mapping
+	const categoryIcons: Record<string, typeof IconCode> = {
+		development: IconCode,
+		research: IconSearch16,
+		custom: IconFolder,
+	};
+
+	// Category colors
+	const categoryColors: Record<string, string> = {
+		development: "bg-blue-500",
+		research: "bg-purple-500",
+		testing: "bg-green-500",
+		security: "bg-red-500",
+		orchestration: "bg-yellow-500",
+		documentation: "bg-cyan-500",
+		devops: "bg-orange-500",
+		custom: "bg-gray-500",
+	};
+
+	function getCategoryIcon(category: string) {
+		return categoryIcons[category.toLowerCase()] || IconFolder;
+	}
+
+	function getCategoryColor(category: string) {
+		return categoryColors[category.toLowerCase()] || "bg-gray-500";
+	}
+
+	async function loadTemplates() {
+		if (!$wasmLoaded) return;
+		templates = getWasmGalleryTemplates();
+		categories = getGalleryCategories();
+	}
+
+	function handleSearch() {
+		if (!searchQuery.trim()) {
+			searchResults = [];
+			return;
+		}
+		searchResults = searchGalleryTemplates(searchQuery);
+	}
+
+	async function handleLoadTemplate(id: string) {
+		loading = true;
+		const success = await loadWasmTemplate(id);
+		if (success) {
+			loadTemplates();
+		}
+		loading = false;
+	}
+
+	async function handleSaveRvf(id: string) {
+		loading = true;
+		const containerId = await saveTemplateAsRvf(id);
+		if (containerId) {
+			alert(`RVF container saved with ID: ${containerId}`);
+		}
+		loading = false;
+	}
+
+	async function handleHealthCheck() {
+		if (wasmServer) {
+			await healthCheckServer(wasmServer);
+		}
+	}
+
+	function getFilteredTemplates(): GalleryTemplate[] {
+		if (searchQuery.trim()) {
+			const ids = new Set(searchResults.map((r) => r.id));
+			return templates.filter((t) => ids.has(t.id));
+		}
+		const category = selectedCategory;
+		if (category) {
+			return templates.filter((t) => t.category.toLowerCase() === category.toLowerCase());
+		}
+		return templates;
+	}
+
+	onMount(async () => {
+		if (!$wasmLoaded) {
+			await initWasmMcp();
+		}
+		loadTemplates();
+	});
+
+	$effect(() => {
+		if ($wasmLoaded) {
+			loadTemplates();
+		}
+	});
+
+	$effect(() => {
+		handleSearch();
+	});
+</script>
+
+<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+	<!-- Header -->
+	<div class="p-4 border-b border-gray-200 dark:border-gray-700">
+		<div class="flex items-center justify-between mb-3">
+			<h2 class="text-lg font-semibold text-gray-900 dark:text-white">RVF Agent Gallery</h2>
+			{#if wasmServer}
+				<div class="flex items-center gap-2">
+					<span
+						class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium
+                        {wasmServer.status === 'connected'
+							? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
+							: wasmServer.status === 'connecting'
+								? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200'
+								: wasmServer.status === 'error'
+									? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
+									: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'}"
+					>
+						{wasmServer.status === "connected" ? "WASM Ready" : wasmServer.status || "Disconnected"}
+					</span>
+					<button
+						onclick={handleHealthCheck}
+						class="text-xs text-blue-500 hover:text-blue-600"
+						disabled={loading}
+					>
+						Refresh
+					</button>
+				</div>
+			{/if}
+		</div>
+
+		{#if $wasmLoading}
+			<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+				<div
+					class="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"
+				></div>
+				Loading WASM module...
+			</div>
+		{:else if $wasmError}
+			<div class="text-sm text-red-500 dark:text-red-400">
+				Error: {$wasmError}
+			</div>
+		{:else if $wasmLoaded}
+			<!-- Search -->
+			<div class="relative">
+				<IconSearch
+					class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
+				/>
+				<input
+					type="text"
+					placeholder="Search templates..."
+					bind:value={searchQuery}
+					class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
+                       bg-white dark:bg-gray-800 text-gray-900 dark:text-white
+                       focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+				/>
+			</div>
+
+			<!-- Active Template Badge -->
+			{#if activeTemplateId}
+				<div class="mt-3 flex items-center gap-2">
+					<span class="text-xs text-gray-500 dark:text-gray-400">Active:</span>
+					<span
+						class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium"
+					>
+						<IconCheckmark class="w-3 h-3" />
+						{activeTemplateName}
+					</span>
+					{#if wasmServer?.tools?.length}
+						<span class="text-xs text-gray-400">
+							({wasmServer.tools.length} tools)
+						</span>
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	{#if $wasmLoaded}
+		<!-- Categories -->
+		<div class="p-4 border-b border-gray-200 dark:border-gray-700">
+			<div class="flex flex-wrap gap-2">
+				<button
+					class="px-3 py-1.5 rounded-full text-xs font-medium transition-colors
+                       {selectedCategory === null
+						? 'bg-blue-500 text-white'
+						: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'}"
+					onclick={() => (selectedCategory = null)}
+				>
+					All ({templates.length})
+				</button>
+				{#each Object.entries(categories) as [category, count]}
+					<button
+						class="px-3 py-1.5 rounded-full text-xs font-medium transition-colors
+                           {selectedCategory === category
+							? 'bg-blue-500 text-white'
+							: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'}"
+						onclick={() => (selectedCategory = category)}
+					>
+						{category} ({count})
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Templates List -->
+		<div class="flex-1 overflow-y-auto p-4 space-y-3">
+			{#each getFilteredTemplates() as template (template.id)}
+				{@const CategoryIcon = getCategoryIcon(template.category)}
+				<div
+					class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700
+                       hover:border-blue-300 dark:hover:border-blue-600 transition-colors"
+				>
+					<div class="flex items-start gap-3">
+						<!-- Category Icon -->
+						<div
+							class="flex-shrink-0 w-10 h-10 rounded-lg {getCategoryColor(
+								template.category
+							)} flex items-center justify-center"
+						>
+							<CategoryIcon class="w-5 h-5 text-white" />
+						</div>
+
+						<!-- Content -->
+						<div class="flex-1 min-w-0">
+							<div class="flex items-center gap-2">
+								<h3 class="font-medium text-gray-900 dark:text-white truncate">
+									{template.name}
+								</h3>
+								{#if template.builtin}
+									<span
+										class="px-1.5 py-0.5 rounded text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300"
+									>
+										Built-in
+									</span>
+								{/if}
+								{#if activeTemplateId === template.id}
+									<span
+										class="px-1.5 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300"
+									>
+										Active
+									</span>
+								{/if}
+							</div>
+							<p class="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
+								{template.description}
+							</p>
+
+							<!-- Tags -->
+							<div class="mt-2 flex flex-wrap gap-1">
+								{#each template.tags.slice(0, 4) as tag}
+									<span
+										class="px-2 py-0.5 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
+									>
+										{tag}
+									</span>
+								{/each}
+								{#if template.tags.length > 4}
+									<span class="px-2 py-0.5 text-xs text-gray-400">
+										+{template.tags.length - 4} more
+									</span>
+								{/if}
+							</div>
+
+							<!-- Stats -->
+							<div class="mt-2 flex items-center gap-4 text-xs text-gray-400">
+								{#if template.tools?.length}
+									<span>{template.tools.length} tools</span>
+								{/if}
+								{#if template.skills?.length}
+									<span>{template.skills.length} skills</span>
+								{/if}
+								{#if template.mcp_tools?.length}
+									<span>{template.mcp_tools.length} MCP tools</span>
+								{/if}
+								{#if template.orchestrator}
+									<span>Multi-agent</span>
+								{/if}
+							</div>
+						</div>
+
+						<!-- Actions -->
+						<div class="flex-shrink-0 flex flex-col gap-2">
+							<button
+								onclick={() => handleLoadTemplate(template.id)}
+								disabled={loading || activeTemplateId === template.id}
+								class="px-3 py-1.5 rounded text-xs font-medium transition-colors
+                               {activeTemplateId === template.id
+									? 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 cursor-default'
+									: 'bg-blue-500 hover:bg-blue-600 text-white'}"
+							>
+								{#if activeTemplateId === template.id}
+									<IconCheckmark class="w-3 h-3 inline" />
+									Loaded
+								{:else}
+									Load
+								{/if}
+							</button>
+							<button
+								onclick={() => handleSaveRvf(template.id)}
+								disabled={loading}
+								class="px-3 py-1.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700
+                               text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+								title="Save as RVF container"
+							>
+								<IconDownload class="w-3 h-3 inline" />
+								RVF
+							</button>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<div class="text-center py-8 text-gray-500 dark:text-gray-400">
+					{#if searchQuery}
+						No templates match your search.
+					{:else}
+						No templates available.
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>

package/src/ruvocal/src/lib/constants/mcpExamples.ts

@@ -1,134 +1,113 @@
 import type { RouterExample } from "./routerExamples";
 
-// Examples that showcase MCP tool capabilities (web search, Hugging Face, etc.)
+// Examples that showcase RuFlo MCP capabilities — agents, memory,
+// intelligence, dev tools, and the WASM gallery.
 export const mcpExamples: RouterExample[] = [
 	{
-		title: "Generate an image",
-		prompt: "Generate an image of a zebra in front of a volcanic eruption",
-	},
-	{
-		title: "Latest world news",
-		prompt: "What is the latest world news?",
+		title: "Spawn a coding swarm",
+		prompt:
+			"Spawn a hierarchical swarm with 5 agents (architect, coder, tester, reviewer, security-auditor) to refactor a Python CLI tool to TypeScript. Use ruflo__swarm_init then ruflo__agent_spawn for each role.",
 		followUps: [
 			{
-				title: "Tech focus",
-				prompt: "What about technology news?",
-			},
-			{
-				title: "San Francisco",
-				prompt: "What's happening in San Francisco?",
+				title: "Show progress",
+				prompt: "Use ruflo__progress_summary to show the swarm's current state.",
 			},
 			{
-				title: "vs last week",
-				prompt: "How does this compare to last week's news?",
+				title: "Add tests",
+				prompt: "Spawn a tester agent to write integration tests for the swarm output.",
 			},
 		],
 	},
 	{
-		title: "Trending models",
-		prompt: "What are the top trending models on Hugging Face?",
+		title: "Save & recall memory",
+		prompt:
+			"Use ruflo__memory_store to save: namespace='preferences', key='editor_theme', value='solarized-dark'. Then ruflo__memory_search query='theme' to verify.",
 		followUps: [
 			{
-				title: "Text generation",
-				prompt: "What about text generation models?",
-			},
-			{
-				title: "Image generation",
-				prompt: "What about text-to-image models?",
+				title: "List entries",
+				prompt: "List all entries in the 'preferences' namespace using ruflo__memory_list.",
 			},
 			{
-				title: "How to use",
-				prompt: "Show me how to use the most popular one",
+				title: "Semantic search",
+				prompt: "Find related memories with ruvector__hooks_recall query='editor settings'.",
 			},
 		],
 	},
 	{
-		title: "Plan a trip",
-		prompt: "Things to do in Tokyo next week",
+		title: "Route a task",
+		prompt:
+			"Use ruvector__hooks_route on the task: 'add OAuth2 to a SvelteKit API'. Tell me which agent type and topology you'd recommend.",
 		followUps: [
 			{
-				title: "Transport & prices",
-				prompt: "How do I get around and how much will it cost?",
+				title: "Spawn the agent",
+				prompt: "Spawn the recommended agent with ruflo__agent_spawn.",
 			},
 			{
-				title: "Weather",
-				prompt: "What's the weather like in Tokyo next week?",
-			},
-			{
-				title: "Meet people",
-				prompt: "Where can I meet new people and make friends?",
+				title: "Track trajectory",
+				prompt: "Begin a trajectory with ruvector__hooks_trajectory_begin to record the work.",
 			},
 		],
 	},
 	{
-		title: "Compare technologies",
-		prompt: "Search the web to compare React, Vue, and Svelte for building web apps in 2025",
+		title: "Analyze a diff",
+		prompt:
+			"Use ruflo__analyze_diff to assess risk and ruflo__analyze_diff-reviewers to suggest reviewers for the PR at github.com/ruvnet/ruflo/pull/1687.",
 		followUps: [
 			{
-				title: "Performance benchmarks",
-				prompt: "Search for recent performance benchmarks comparing these frameworks",
+				title: "Repo metrics",
+				prompt: "Get repository metrics with ruflo__github_repo_analyze for ruvnet/ruflo.",
 			},
 			{
-				title: "Job market",
-				prompt: "Search for job market trends for each of these frameworks",
-			},
-			{
-				title: "Migration guides",
-				prompt: "Search for guides on migrating from React to Svelte",
+				title: "Open issues",
+				prompt: "List recent issues with ruflo__github_issue_track for ruvnet/ruflo.",
 			},
 		],
 	},
 	{
-		title: "Find a dataset",
-		prompt: "Find datasets on Hugging Face for training a sentiment analysis model",
+		title: "System health check",
+		prompt:
+			"Run ruflo__system_status, ruflo__performance_metrics, and ruflo__performance_bottleneck. Summarize anything concerning.",
 		followUps: [
 			{
-				title: "Dataset details",
-				prompt: "Tell me more about the largest dataset - its size, format, and how to load it",
-			},
-			{
-				title: "Find models",
-				prompt: "Find pre-trained models that were trained on this dataset",
+				title: "Optimize",
+				prompt: "Use ruflo__performance_optimize on the slowest component identified.",
 			},
 			{
-				title: "Code snippet",
-				prompt: "Show me how to load and preprocess this dataset with the datasets library",
+				title: "Benchmark",
+				prompt: "Run ruflo__performance_benchmark with --suite=all.",
 			},
 		],
 	},
 	{
-		title: "Gift ideas",
-		prompt: "Search for unique gift ideas for someone who loves cooking",
+		title: "Browse WASM gallery",
+		prompt:
+			"Show me the templates in the WASM gallery (browser-side rvagent server) and explain what each one does.",
 		followUps: [
 			{
-				title: "Budget options",
-				prompt: "Search for gift ideas under $50",
-			},
-			{
-				title: "Top rated",
-				prompt: "Search for the top-rated cooking gadgets of this year",
-			},
-			{
-				title: "DIY gifts",
-				prompt: "Search for homemade gift ideas for cooking enthusiasts",
+				title: "Load a template",
+				prompt: "Load the most popular template into the local WASM MCP server.",
 			},
 		],
 	},
 	{
-		title: "Learn something new",
-		prompt: "Search for the best resources to learn Rust programming in 2025",
+		title: "Plan with GOAP",
+		prompt:
+			"Use the goal-planner pattern: I want to migrate a Postgres schema with zero downtime. Decompose into ruflo agents and tasks.",
 		followUps: [
 			{
-				title: "Project ideas",
-				prompt: "Search for beginner Rust project ideas to practice with",
-			},
-			{
-				title: "Find tools",
-				prompt: "Search for the most popular Rust tools and libraries I should know about",
+				title: "Risk analysis",
+				prompt: "Run ruflo__analyze_file-risk on the migration file.",
 			},
+		],
+	},
+	{
+		title: "Train neural pattern",
+		prompt:
+			"Use ruvector__neural_train to learn from this successful pattern: 'JWT auth with refresh tokens — store refresh in httpOnly cookie, access in memory'.",
+		followUps: [
 			{
-				title: "Community",
-				prompt: "Search for Rust communities and forums where I can ask questions",
+				title: "Predict",
+				prompt: "Use ruvector__neural_predict for the task 'add session-based auth'.",
 			},
 		],
 	},