@aigentic/ruflo 3.7.0-alpha.69

package/src/ruvocal/src/lib/components/mcp/MCPServerManager.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import ServerCard from "./ServerCard.svelte";
+	import AddServerForm from "./AddServerForm.svelte";
+	import {
+		allMcpServers,
+		selectedServerIds,
+		enabledServersCount,
+		addCustomServer,
+		refreshMcpServers,
+		healthCheckServer,
+	} from "$lib/stores/mcpServers";
+	import type { KeyValuePair } from "$lib/types/Tool";
+	import IconAddLarge from "~icons/carbon/add-large";
+	import IconRefresh from "~icons/carbon/renew";
+	import LucideHammer from "~icons/lucide/hammer";
+	import IconMCP from "$lib/components/icons/IconMCP.svelte";
+
+	const publicConfig = usePublicConfig();
+
+	interface Props {
+		onclose: () => void;
+	}
+
+	let { onclose }: Props = $props();
+
+	type View = "list" | "add";
+	let currentView = $state<View>("list");
+	let isRefreshing = $state(false);
+
+	const baseServers = $derived($allMcpServers.filter((s) => s.type === "base"));
+	const customServers = $derived($allMcpServers.filter((s) => s.type === "custom"));
+	const enabledCount = $derived($enabledServersCount);
+
+	function handleAddServer(serverData: { name: string; url: string; headers?: KeyValuePair[] }) {
+		addCustomServer(serverData);
+		currentView = "list";
+	}
+
+	function handleCancel() {
+		currentView = "list";
+	}
+
+	async function handleRefresh() {
+		if (isRefreshing) return;
+		isRefreshing = true;
+		try {
+			await refreshMcpServers();
+			// After refreshing the list, re-run health checks for all known servers
+			const servers = $allMcpServers;
+			await Promise.allSettled(servers.map((s) => healthCheckServer(s)));
+		} finally {
+			isRefreshing = false;
+		}
+	}
+</script>
+
+<Modal width={currentView === "list" ? "w-[800px]" : "w-[600px]"} {onclose} closeButton>
+	<div class="p-6">
+		<!-- Header -->
+		<div class="mb-6">
+			<h2 class="mb-1 text-xl font-semibold text-gray-900 dark:text-gray-200">
+				{#if currentView === "list"}
+					MCP Servers
+				{:else}
+					Add MCP server
+				{/if}
+			</h2>
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				{#if currentView === "list"}
+					Manage MCP servers to extend {publicConfig.PUBLIC_APP_NAME} with external tools.
+				{:else}
+					Add a custom MCP server to {publicConfig.PUBLIC_APP_NAME}.
+				{/if}
+			</p>
+		</div>
+
+		<!-- Content -->
+		{#if currentView === "list"}
+			<div
+				class="mb-6 flex justify-between rounded-lg p-4 max-sm:flex-col max-sm:gap-4 sm:items-center {!enabledCount
+					? 'bg-gray-100 dark:bg-white/5'
+					: 'bg-blue-50 dark:bg-blue-900/10'}"
+			>
+				<div class="flex items-center gap-3">
+					<div
+						class="flex size-10 items-center justify-center rounded-xl bg-blue-500/10"
+						class:grayscale={!enabledCount}
+					>
+						<IconMCP classNames="size-8 text-blue-600 dark:text-blue-500" />
+					</div>
+					<div>
+						<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+							{$allMcpServers.length}
+							{$allMcpServers.length === 1 ? "server" : "servers"} configured
+						</p>
+						<p class="text-xs text-gray-600 dark:text-gray-400">
+							{enabledCount} enabled
+						</p>
+					</div>
+				</div>
+
+				<div class="flex gap-2">
+					<button
+						onclick={handleRefresh}
+						disabled={isRefreshing}
+						class="btn gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+					>
+						<IconRefresh class="size-4 {isRefreshing ? 'animate-spin' : ''}" />
+						{isRefreshing ? "Refreshing…" : "Refresh"}
+					</button>
+					<button
+						onclick={() => (currentView = "add")}
+						class="btn flex items-center gap-0.5 rounded-lg bg-blue-600 py-1.5 pl-2 pr-3 text-sm font-medium text-white hover:bg-blue-600"
+					>
+						<IconAddLarge class="size-4" />
+						Add Server
+					</button>
+				</div>
+			</div>
+			<div class="space-y-5">
+				<!-- Base Servers -->
+				{#if baseServers.length > 0}
+					<div>
+						<h3 class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
+							Base Servers ({baseServers.length})
+						</h3>
+						<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+							{#each baseServers as server (server.id)}
+								<ServerCard {server} isSelected={$selectedServerIds.has(server.id)} />
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- Custom Servers -->
+				<div>
+					<h3 class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
+						Custom Servers ({customServers.length})
+					</h3>
+					{#if customServers.length === 0}
+						<div
+							class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-8 dark:border-gray-700"
+						>
+							<LucideHammer class="mb-3 size-12 text-gray-400" />
+							<p class="mb-1 text-sm font-medium text-gray-900 dark:text-gray-100">
+								No custom servers yet
+							</p>
+							<p class="mb-4 text-xs text-gray-600 dark:text-gray-400">
+								Add your own MCP servers with custom tools
+							</p>
+							<button
+								onclick={() => (currentView = "add")}
+								class="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600"
+							>
+								<IconAddLarge class="size-4" />
+								Add Your First Server
+							</button>
+						</div>
+					{:else}
+						<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+							{#each customServers as server (server.id)}
+								<ServerCard {server} isSelected={$selectedServerIds.has(server.id)} />
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Help Text -->
+				<div class="rounded-lg bg-gray-50 p-4 dark:bg-gray-700">
+					<h4 class="mb-2 text-sm font-medium text-gray-900 dark:text-gray-100">💡 Quick Tips</h4>
+					<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
+						<li>• Only connect to servers you trust</li>
+						<li>• Enable servers to make their tools available in chat</li>
+						<li>• Use the Health Check button to verify server connectivity</li>
+						<li>• You can add HTTP headers for authentication when required</li>
+					</ul>
+				</div>
+			</div>
+		{:else if currentView === "add"}
+			<AddServerForm onsubmit={handleAddServer} oncancel={handleCancel} />
+		{/if}
+	</div>
+</Modal>

package/src/ruvocal/src/lib/components/mcp/ServerCard.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import type { MCPServer } from "$lib/types/Tool";
+	import { toggleServer, healthCheckServer, deleteCustomServer } from "$lib/stores/mcpServers";
+	import IconCheckmark from "~icons/carbon/checkmark-filled";
+	import IconWarning from "~icons/carbon/warning-filled";
+	import IconPending from "~icons/carbon/pending-filled";
+	import IconRefresh from "~icons/carbon/renew";
+	import IconTrash from "~icons/carbon/trash-can";
+	import LucideHammer from "~icons/lucide/hammer";
+	import IconSettings from "~icons/carbon/settings";
+	import Switch from "$lib/components/Switch.svelte";
+	import { getMcpServerFaviconUrl } from "$lib/utils/favicon";
+
+	interface Props {
+		server: MCPServer;
+		isSelected: boolean;
+	}
+
+	let { server, isSelected }: Props = $props();
+
+	let isLoadingHealth = $state(false);
+
+	// Show a quick-access link ONLY for the exact HF MCP login endpoint
+	import { isStrictHfMcpLogin as isStrictHfMcpLoginUrl } from "$lib/utils/hf";
+	const isHfMcp = $derived.by(() => isStrictHfMcpLoginUrl(server.url));
+
+	const statusInfo = $derived.by(() => {
+		switch (server.status) {
+			case "connected":
+				return {
+					label: "Connected",
+					color: "text-green-600 dark:text-green-400",
+					bgColor: "bg-green-100 dark:bg-green-900/20",
+					icon: IconCheckmark,
+				};
+			case "connecting":
+				return {
+					label: "Connecting...",
+					color: "text-blue-600 dark:text-blue-400",
+					bgColor: "bg-blue-100 dark:bg-blue-900/20",
+					icon: IconPending,
+				};
+			case "error":
+				return {
+					label: "Error",
+					color: "text-red-600 dark:text-red-400",
+					bgColor: "bg-red-100 dark:bg-red-900/20",
+					icon: IconWarning,
+				};
+			case "disconnected":
+			default:
+				return {
+					label: "Unknown",
+					color: "text-gray-600 dark:text-gray-400",
+					bgColor: "bg-gray-100 dark:bg-gray-700",
+					icon: IconPending,
+				};
+		}
+	});
+
+	// Switch setter handles enable/disable (simple, idiomatic)
+	function setEnabled(v: boolean) {
+		if (v === isSelected) return;
+		toggleServer(server.id);
+		if (v && server.status !== "connected") handleHealthCheck();
+	}
+
+	async function handleHealthCheck() {
+		isLoadingHealth = true;
+		try {
+			await healthCheckServer(server);
+		} finally {
+			isLoadingHealth = false;
+		}
+	}
+
+	function handleDelete() {
+		deleteCustomServer(server.id);
+	}
+</script>
+
+<div
+	class="rounded-lg border bg-gradient-to-br transition-colors {isSelected
+		? 'border-blue-600/20 bg-blue-50 from-blue-500/5 to-transparent dark:border-blue-700/60 dark:bg-blue-900/10 dark:from-blue-900/20'
+		: 'border-gray-200 bg-white from-black/5 dark:border-gray-700 dark:bg-gray-800 dark:from-white/5'}"
+>
+	<div class="px-4 py-3.5">
+		<!-- Header -->
+		<div class="mb-3 flex items-start justify-between gap-3">
+			<div class="min-w-0 flex-1">
+				<div class="mb-0.5 flex items-center gap-2">
+					<img
+						src={getMcpServerFaviconUrl(server.url)}
+						alt=""
+						class="size-4 flex-shrink-0 rounded"
+					/>
+					<h3 class="truncate font-semibold text-gray-900 dark:text-gray-100">
+						{server.name}
+					</h3>
+				</div>
+				<p class="truncate text-sm text-gray-600 dark:text-gray-400">
+					{server.url}
+				</p>
+			</div>
+
+			<!-- Enable Switch (function binding per Svelte 5 docs) -->
+			<Switch name={`enable-${server.id}`} bind:checked={() => isSelected, setEnabled} />
+		</div>
+
+		<!-- Status -->
+		{#if server.status}
+			<div class="mb-2 flex items-center gap-2">
+				<span
+					class="inline-flex items-center gap-1 rounded-full {statusInfo.bgColor} py-0.5 pl-1.5 pr-2 text-xs font-medium {statusInfo.color}"
+				>
+					{#if server.status === "connected"}
+						<IconCheckmark class="size-3" />
+					{:else if server.status === "connecting"}
+						<IconPending class="size-3" />
+					{:else if server.status === "error"}
+						<IconWarning class="size-3" />
+					{:else}
+						<IconPending class="size-3" />
+					{/if}
+					{statusInfo.label}
+				</span>
+
+				{#if server.tools && server.tools.length > 0}
+					<span class="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+						<LucideHammer class="size-3" />
+						{server.tools.length}
+						{server.tools.length === 1 ? "tool" : "tools"}
+					</span>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Error Message -->
+		{#if server.errorMessage}
+			<div class="mb-2 flex items-center gap-2">
+				<div
+					class="line-clamp-6 break-words rounded bg-red-50 px-2 py-1 text-xs text-red-800 dark:bg-red-900/20 dark:text-red-200"
+				>
+					{server.errorMessage}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Actions -->
+		<div class="flex flex-wrap gap-1">
+			<button
+				onclick={handleHealthCheck}
+				disabled={isLoadingHealth}
+				class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2.5 py-[.29rem] text-xs font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+			>
+				<IconRefresh class="size-3 {isLoadingHealth ? 'animate-spin' : ''}" />
+				Health Check
+			</button>
+
+			{#if isHfMcp}
+				<a
+					href="https://huggingface.co/settings/mcp"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-2.5 py-[.29rem] text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+					aria-label="Open Hugging Face MCP settings"
+				>
+					<IconSettings class="size-3" />
+					Settings
+				</a>
+			{/if}
+
+			{#if server.type === "custom"}
+				<button
+					onclick={handleDelete}
+					class="flex items-center gap-1.5 rounded-lg border border-red-500/15 bg-red-50 px-2.5 py-[.29rem] text-xs font-medium text-red-600 hover:bg-red-100 dark:border-red-500/25 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
+				>
+					<IconTrash class="size-3" />
+					Delete
+				</button>
+			{/if}
+		</div>
+
+		<!-- Tools List (Expandable) -->
+		{#if server.tools && server.tools.length > 0}
+			<details class="mt-3">
+				<summary class="cursor-pointer text-xs font-medium text-gray-700 dark:text-gray-300">
+					Available Tools ({server.tools.length})
+				</summary>
+				<ul class="mt-2 space-y-1 text-xs">
+					{#each server.tools as tool}
+						<li class="text-gray-600 dark:text-gray-400">
+							<span class="font-medium text-gray-900 dark:text-gray-100">{tool.name}</span>
+							{#if tool.description}
+								<span class="text-gray-500 dark:text-gray-500">- {tool.description}</span>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</details>
+		{/if}
+	</div>
+</div>

package/src/ruvocal/src/lib/components/players/AudioPlayer.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import CarbonPause from "~icons/carbon/pause";
+	import CarbonPlay from "~icons/carbon/play";
+	interface Props {
+		src: string;
+		name: string;
+	}
+
+	let { src, name }: Props = $props();
+
+	let time = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
+
+	function format(time: number) {
+		if (isNaN(time)) return "...";
+
+		const minutes = Math.floor(time / 60);
+		const seconds = Math.floor(time % 60);
+
+		return `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
+	}
+
+	function seek(e: PointerEvent) {
+		if (!e.currentTarget) return;
+		const { left, width } = (e.currentTarget as HTMLElement).getBoundingClientRect();
+
+		let p = (e.clientX - left) / width;
+		if (p < 0) p = 0;
+		if (p > 1) p = 1;
+
+		time = p * duration;
+	}
+</script>
+
+<div
+	class="flex h-14 w-72 items-center gap-4 rounded-2xl border border-gray-200 bg-white p-2.5 text-gray-600 shadow-sm transition-all dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+>
+	<audio
+		{src}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused
+		preload="metadata"
+		onended={() => {
+			time = 0;
+		}}
+	></audio>
+
+	<button
+		class="mx-auto my-auto aspect-square size-8 rounded-full border border-gray-400 bg-gray-100 dark:border-gray-800 dark:bg-gray-700"
+		aria-label={paused ? "play" : "pause"}
+		onclick={() => (paused = !paused)}
+	>
+		{#if paused}
+			<CarbonPlay class="mx-auto my-auto text-gray-600 dark:text-gray-300" />
+		{:else}
+			<CarbonPause class="mx-auto my-auto text-gray-600 dark:text-gray-300" />
+		{/if}
+	</button>
+	<div class="overflow-hidden">
+		<div class="truncate font-medium">{name}</div>
+		{#if duration !== Infinity}
+			<div class="flex items-center gap-2">
+				<span class="text-xs">{format(time)}</span>
+				<div
+					class="relative h-2 flex-1 rounded-full bg-gray-200 dark:bg-gray-700"
+					onpointerdown={() => {
+						paused = true;
+					}}
+					onpointerup={seek}
+				>
+					<div
+						class="absolute inset-0 h-full bg-gray-400 dark:bg-gray-600"
+						style="width: {(time / duration) * 100}%"
+					></div>
+				</div>
+				<span class="text-xs">{duration ? format(duration) : "--:--"}</span>
+			</div>
+		{/if}
+	</div>
+</div>

package/src/ruvocal/src/lib/components/voice/AudioWaveform.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
+	interface Props {
+		frequencyData: Uint8Array;
+		minHeight?: number;
+		maxHeight?: number;
+	}
+
+	let { frequencyData, minHeight = 4, maxHeight = 40 }: Props = $props();
+
+	const PILL_WIDTH = 2; // w-0.5 = 2px
+	const PILL_GAP = 2;
+	const SAMPLE_INTERVAL_MS = 50; // Sample every 50ms (~20 samples/sec)
+
+	let containerRef: HTMLDivElement | undefined = $state();
+	let timeline: number[] = $state([]);
+	let pillCount = $state(60); // Default, will be calculated from container width
+	let intervalId: ReturnType<typeof setInterval> | undefined;
+	let smoothedAmplitude = 0;
+
+	// Calculate average amplitude from frequency data
+	function getAmplitude(): number {
+		if (!frequencyData.length) return 0;
+		let sum = 0;
+		for (let i = 0; i < frequencyData.length; i++) {
+			sum += frequencyData[i];
+		}
+		return sum / frequencyData.length / 255; // Normalize to 0-1
+	}
+
+	function addSample() {
+		const rawAmplitude = getAmplitude();
+		// Smooth the amplitude for less jittery visualization
+		smoothedAmplitude = smoothedAmplitude * 0.3 + rawAmplitude * 0.7;
+
+		// Boost amplitude by 1.5x and apply slight curve for better visibility
+		const boostedAmplitude = Math.min(1, Math.pow(smoothedAmplitude * 1.5, 0.85));
+
+		const height = minHeight + boostedAmplitude * (maxHeight - minHeight);
+
+		// Push new sample, keep only pillCount samples (sliding window)
+		timeline = [...timeline, height].slice(-pillCount);
+	}
+
+	function calculatePillCount() {
+		if (containerRef) {
+			const width = containerRef.clientWidth;
+			pillCount = Math.max(20, Math.floor(width / (PILL_WIDTH + PILL_GAP)));
+		}
+	}
+
+	onMount(() => {
+		calculatePillCount();
+
+		// Initialize timeline with minimum height dots
+		timeline = Array(pillCount).fill(minHeight);
+
+		// Start sampling at fixed intervals
+		intervalId = setInterval(addSample, SAMPLE_INTERVAL_MS);
+
+		// Handle resize
+		const resizeObserver = new ResizeObserver(() => {
+			const oldCount = pillCount;
+			calculatePillCount();
+			// Adjust timeline buffer if container size changed
+			if (pillCount > oldCount) {
+				// Pad with min height on the left
+				timeline = [...Array(pillCount - oldCount).fill(minHeight), ...timeline];
+			} else if (pillCount < oldCount) {
+				timeline = timeline.slice(-pillCount);
+			}
+		});
+
+		if (containerRef) {
+			resizeObserver.observe(containerRef);
+		}
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	onDestroy(() => {
+		if (intervalId) clearInterval(intervalId);
+	});
+</script>
+
+<div bind:this={containerRef} class="flex h-12 w-full items-center justify-start gap-[2px]">
+	{#each timeline as height, i (i)}
+		<div
+			class="w-0.5 shrink-0 rounded-full bg-gray-400 dark:bg-white/60"
+			style="height: {Math.max(minHeight, Math.round(height))}px;"
+		></div>
+	{/each}
+</div>