@aigentic/ruflo 3.7.0-alpha.69

package/src/ruvocal/src/lib/workers/detailFetchWorker.ts

@@ -0,0 +1,100 @@
+/**
+ * DetailFetchWorker — Web Worker for lazy-loading task details with LRU caching.
+ *
+ * Full tool results are NOT streamed inline — they are stored server-side
+ * and fetched on-demand when the user expands a task card.
+ *
+ * ADR-037 Part 3: Detail Token Lazy Loading
+ */
+
+// Messages FROM main thread TO worker
+export type DetailWorkerIncoming =
+	| { type: "fetch"; detailToken: string; bridgeUrl: string }
+	| { type: "prefetch"; detailToken: string; bridgeUrl: string }
+	| { type: "evict"; detailToken: string };
+
+// Messages FROM worker TO main thread
+export type DetailWorkerOutgoing =
+	| { type: "detail"; detailToken: string; content: string }
+	| { type: "detail_error"; detailToken: string; error: string };
+
+const cache = new Map<string, string>();
+const MAX_CACHE = 20;
+const accessOrder: string[] = [];
+
+function evictLRU() {
+	while (cache.size > MAX_CACHE) {
+		const oldest = accessOrder.shift();
+		if (oldest) cache.delete(oldest);
+	}
+}
+
+function touchAccess(token: string) {
+	const idx = accessOrder.indexOf(token);
+	if (idx > -1) accessOrder.splice(idx, 1);
+	accessOrder.push(token);
+}
+
+self.onmessage = async (e: MessageEvent<DetailWorkerIncoming>) => {
+	const msg = e.data;
+
+	if (msg.type === "fetch" || msg.type === "prefetch") {
+		// Check cache first
+		if (cache.has(msg.detailToken)) {
+			touchAccess(msg.detailToken);
+			if (msg.type === "fetch") {
+				const out: DetailWorkerOutgoing = {
+					type: "detail",
+					detailToken: msg.detailToken,
+					content: cache.get(msg.detailToken)!,
+				};
+				self.postMessage(out);
+			}
+			return;
+		}
+
+		try {
+			const res = await fetch(`${msg.bridgeUrl}/autopilot/detail/${msg.detailToken}`);
+			if (!res.ok) {
+				if (msg.type === "fetch") {
+					const out: DetailWorkerOutgoing = {
+						type: "detail_error",
+						detailToken: msg.detailToken,
+						error: `HTTP ${res.status}`,
+					};
+					self.postMessage(out);
+				}
+				return;
+			}
+
+			const data = (await res.json()) as { content: string };
+			cache.set(msg.detailToken, data.content);
+			touchAccess(msg.detailToken);
+			evictLRU();
+
+			if (msg.type === "fetch") {
+				const out: DetailWorkerOutgoing = {
+					type: "detail",
+					detailToken: msg.detailToken,
+					content: data.content,
+				};
+				self.postMessage(out);
+			}
+		} catch (err: unknown) {
+			if (msg.type === "fetch") {
+				const out: DetailWorkerOutgoing = {
+					type: "detail_error",
+					detailToken: msg.detailToken,
+					error: (err as Error).message ?? "Unknown error",
+				};
+				self.postMessage(out);
+			}
+		}
+	}
+
+	if (msg.type === "evict") {
+		cache.delete(msg.detailToken);
+		const idx = accessOrder.indexOf(msg.detailToken);
+		if (idx > -1) accessOrder.splice(idx, 1);
+	}
+};

package/src/ruvocal/src/lib/workers/markdownWorker.ts

@@ -0,0 +1,61 @@
+// Simple type to replace removed WebSearchSource
+type SimpleSource = {
+	title?: string;
+	link: string;
+};
+import { processBlocks, type BlockToken } from "$lib/utils/marked";
+
+export type IncomingMessage = {
+	type: "process";
+	content: string;
+	sources: SimpleSource[];
+	requestId: number;
+};
+
+export type OutgoingMessage = {
+	type: "processed";
+	blocks: BlockToken[];
+	requestId: number;
+};
+
+// Flag to track if the worker is currently processing a message
+let isProcessing = false;
+
+// Buffer to store the latest incoming message
+let latestMessage: IncomingMessage | null = null;
+
+// Helper function to safely handle the latest message
+async function processMessage() {
+	if (latestMessage) {
+		const nextMessage = latestMessage;
+
+		latestMessage = null;
+		isProcessing = true;
+
+		try {
+			const { content, sources, requestId } = nextMessage;
+			const processedBlocks = await processBlocks(content, sources);
+			postMessage(
+				JSON.parse(JSON.stringify({ type: "processed", blocks: processedBlocks, requestId }))
+			);
+		} finally {
+			isProcessing = false;
+
+			// After processing, check if a new message was buffered
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			processMessage();
+		}
+	}
+}
+
+onmessage = (event) => {
+	if (event.data.type !== "process") {
+		return;
+	}
+
+	latestMessage = event.data as IncomingMessage;
+
+	if (!isProcessing && latestMessage) {
+		processMessage();
+	}
+};

package/src/ruvocal/src/routes/+error.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { page } from "$app/state";
+</script>
+
+<div
+	class="flex items-center justify-center bg-gradient-to-t from-gray-200 text-gray-800 dark:from-gray-700 dark:text-gray-300"
+>
+	<div
+		class="align-center -mt-24 flex flex-col justify-center rounded-xl border bg-white px-8 pb-2 pt-4 text-center dark:border-gray-700 dark:bg-gray-800"
+	>
+		<h1 class="mb-2 text-5xl font-semibold">{page.status}</h1>
+		<div class="-mx-8 my-2 h-px bg-gray-200 dark:bg-gray-700"></div>
+		<h2 class="max-w-sm text-lg">{page.error?.message}</h2>
+		{#if page.error?.errorId}
+			<div class="-mx-8 my-2 h-px bg-gray-200 dark:bg-gray-700"></div>
+			<pre class="max-w-sm whitespace-pre-wrap text-left font-mono text-xs">{page.error
+					.errorId}</pre>
+		{/if}
+	</div>
+</div>

package/src/ruvocal/src/routes/+layout.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+	import "../styles/main.css";
+
+	import { onDestroy, onMount, untrack } from "svelte";
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+
+	import { error } from "$lib/stores/errors";
+	import { createSettingsStore } from "$lib/stores/settings";
+	import { loading } from "$lib/stores/loading";
+	import { setHapticsEnabled } from "$lib/utils/haptics";
+
+	import Toast from "$lib/components/Toast.svelte";
+	import NavMenu from "$lib/components/NavMenu.svelte";
+	import MobileNav from "$lib/components/MobileNav.svelte";
+	import titleUpdate from "$lib/stores/titleUpdate";
+	import WelcomeModal from "$lib/components/WelcomeModal.svelte";
+	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
+	import { setContext } from "svelte";
+	import { handleResponse, useAPIClient } from "$lib/APIClient";
+	import { isAborted } from "$lib/stores/isAborted";
+	import { isPro } from "$lib/stores/isPro";
+	import IconShare from "$lib/components/icons/IconShare.svelte";
+	import { shareModal } from "$lib/stores/shareModal";
+	import BackgroundGenerationPoller from "$lib/components/BackgroundGenerationPoller.svelte";
+	import { requireAuthUser } from "$lib/utils/auth";
+
+	let { data = $bindable(), children } = $props();
+
+	setContext("publicConfig", data.publicConfig);
+
+	const publicConfig = data.publicConfig;
+	const client = useAPIClient();
+
+	let conversations = $state(data.conversations);
+	$effect(() => {
+		data.conversations && untrack(() => (conversations = data.conversations));
+	});
+
+	let isNavCollapsed = $state(false);
+
+	let errorToastTimeout: ReturnType<typeof setTimeout>;
+	let currentError: string | undefined = $state();
+
+	async function onError() {
+		// If a new different error comes, wait for the current error to hide first
+		if ($error && currentError && $error !== currentError) {
+			clearTimeout(errorToastTimeout);
+			currentError = undefined;
+			await new Promise((resolve) => setTimeout(resolve, 300));
+		}
+
+		currentError = $error;
+
+		errorToastTimeout = setTimeout(() => {
+			$error = undefined;
+			currentError = undefined;
+		}, 5000);
+	}
+
+	let canShare = $derived(
+		publicConfig.isHuggingChat &&
+			Boolean(page.params?.id) &&
+			page.route.id?.startsWith("/conversation/")
+	);
+
+	async function deleteConversation(id: string) {
+		client
+			.conversations({ id })
+			.delete()
+			.then(handleResponse)
+			.then(async () => {
+				conversations = conversations.filter((conv) => conv.id !== id);
+
+				if (page.params.id === id) {
+					await goto(`${base}/`, { invalidateAll: true });
+				}
+			})
+			.catch((err) => {
+				console.error(err);
+				$error = String(err);
+			});
+	}
+
+	async function editConversationTitle(id: string, title: string) {
+		client
+			.conversations({ id })
+			.patch({ title })
+			.then(handleResponse)
+			.then(async () => {
+				conversations = conversations.map((conv) => (conv.id === id ? { ...conv, title } : conv));
+			})
+			.catch((err) => {
+				console.error(err);
+				$error = String(err);
+			});
+	}
+
+	function closeWelcomeModal() {
+		if (requireAuthUser()) return;
+		settings.set({ welcomeModalSeen: true });
+	}
+
+	onDestroy(() => {
+		clearTimeout(errorToastTimeout);
+	});
+
+	$effect(() => {
+		if ($error) onError();
+	});
+
+	$effect(() => {
+		if ($titleUpdate) {
+			const convIdx = conversations.findIndex(({ id }) => id === $titleUpdate?.convId);
+
+			if (convIdx != -1) {
+				conversations[convIdx].title = $titleUpdate?.title ?? conversations[convIdx].title;
+			}
+
+			$titleUpdate = null;
+		}
+	});
+
+	const settings = createSettingsStore(data.settings);
+
+	$effect(() => {
+		setHapticsEnabled($settings.hapticsEnabled);
+	});
+
+	onMount(async () => {
+		if (publicConfig.isHuggingChat && data.user?.username) {
+			fetch(`https://huggingface.co/api/users/${data.user.username}/overview`)
+				.then((res) => res.json())
+				.then((userData) => {
+					isPro.set(userData.isPro ?? false);
+				})
+				.catch(() => {
+					// Keep isPro as null on error - don't show any badge if status is unknown
+				});
+		}
+
+		if (page.url.searchParams.has("model")) {
+			await settings
+				.instantSet({
+					activeModel: page.url.searchParams.get("model") ?? $settings.activeModel,
+				})
+				.then(async () => {
+					const query = new URLSearchParams(page.url.searchParams.toString());
+					query.delete("model");
+					await goto(`${base}/?${query.toString()}`, {
+						invalidateAll: true,
+					});
+				});
+		}
+
+		if (page.url.searchParams.has("token")) {
+			const token = page.url.searchParams.get("token");
+
+			await fetch(`${base}/api/user/validate-token`, {
+				method: "POST",
+				body: JSON.stringify({ token }),
+			}).then(() => {
+				goto(`${base}/`, { invalidateAll: true });
+			});
+		}
+
+		// Global keyboard shortcut: New Chat (Ctrl/Cmd + Shift + O)
+		const onKeydown = (e: KeyboardEvent) => {
+			// Ignore when a modal has focus (app is inert)
+			const appEl = document.getElementById("app");
+			if (appEl?.hasAttribute("inert")) return;
+
+			const oPressed = e.key?.toLowerCase() === "o";
+			const metaOrCtrl = e.metaKey || e.ctrlKey;
+			if (oPressed && e.shiftKey && metaOrCtrl) {
+				e.preventDefault();
+				isAborted.set(true);
+				if (requireAuthUser()) return;
+				goto(`${base}/`, { invalidateAll: true });
+			}
+		};
+
+		window.addEventListener("keydown", onKeydown, { capture: true });
+		onDestroy(() => window.removeEventListener("keydown", onKeydown, { capture: true }));
+	});
+
+	let mobileNavTitle = $derived(
+		["/models", "/privacy"].includes(page.route.id ?? "")
+			? ""
+			: conversations.find((conv) => conv.id === page.params.id)?.title
+	);
+
+	// Show the welcome modal once on first app load
+	let showWelcome = $derived(
+		!$settings.welcomeModalSeen &&
+			!(page.data.shared === true && page.route.id?.startsWith("/conversation/"))
+	);
+</script>
+
+<svelte:head>
+	<title>{publicConfig.PUBLIC_APP_NAME} - Chat with AI models</title>
+	<meta name="description" content={publicConfig.PUBLIC_APP_DESCRIPTION} />
+	<meta name="twitter:site" content="@huggingface" />
+
+	<!-- use those meta tags everywhere except on special listing pages -->
+	<!-- feel free to refacto if there's a better way -->
+	{#if !page.url.pathname.includes("/models/")}
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content="{publicConfig.PUBLIC_APP_NAME} - Chat with AI models" />
+		<meta name="twitter:description" content={publicConfig.PUBLIC_APP_DESCRIPTION} />
+		<meta
+			name="twitter:image"
+			content="{publicConfig.assetPath}/thumbnail.png"
+		/>
+		<meta name="twitter:image:alt" content="{publicConfig.PUBLIC_APP_NAME} preview" />
+		<meta property="og:title" content="{publicConfig.PUBLIC_APP_NAME} - Chat with AI models" />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="{base || '/'}" />
+		<meta property="og:image" content="{publicConfig.assetPath}/thumbnail.png" />
+		<meta property="og:description" content={publicConfig.PUBLIC_APP_DESCRIPTION} />
+		<meta property="og:site_name" content={publicConfig.PUBLIC_APP_NAME} />
+		<meta property="og:locale" content="en_US" />
+	{/if}
+	<link rel="icon" href="{publicConfig.assetPath}/icon.svg" type="image/svg+xml" />
+	{#if !publicConfig.isHuggingChat || publicConfig.PUBLIC_ORIGIN}
+		<link
+			rel="icon"
+			href="{publicConfig.assetPath}/favicon.svg"
+			type="image/svg+xml"
+			media="(prefers-color-scheme: light)"
+		/>
+		<link
+			rel="icon"
+			href="{publicConfig.assetPath}/favicon-dark.svg"
+			type="image/svg+xml"
+			media="(prefers-color-scheme: dark)"
+		/>
+	{:else}
+		<link rel="icon" href="{publicConfig.assetPath}/favicon-dev.svg" type="image/svg+xml" />
+	{/if}
+	<link rel="apple-touch-icon" href="{publicConfig.assetPath}/apple-touch-icon.png" />
+	<link rel="manifest" href="{publicConfig.assetPath}/manifest.json" />
+
+	{#if publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}
+		<script async src={publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}></script>
+	{/if}
+
+	{#if publicConfig.PUBLIC_APPLE_APP_ID}
+		<meta name="apple-itunes-app" content={`app-id=${publicConfig.PUBLIC_APPLE_APP_ID}`} />
+	{/if}
+</svelte:head>
+
+{#if showWelcome}
+	<WelcomeModal close={closeWelcomeModal} />
+{/if}
+
+<BackgroundGenerationPoller />
+
+<div
+	class="fixed grid h-dvh w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
+		? 'md:grid-cols-[290px,1fr]'
+		: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
+>
+	<ExpandNavigation
+		isCollapsed={isNavCollapsed}
+		onClick={() => (isNavCollapsed = !isNavCollapsed)}
+		classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
+			? 'left-[290px]'
+			: 'left-0'} *:transition-transform"
+	/>
+
+	{#if canShare}
+		<button
+			type="button"
+			class="hidden size-8 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white/90 text-sm font-medium text-gray-700 shadow-sm hover:bg-white/60 hover:text-gray-500 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700 md:absolute md:right-6 md:top-5 md:flex
+				{$loading ? 'cursor-not-allowed opacity-40' : ''}"
+			onclick={() => shareModal.open()}
+			aria-label="Share conversation"
+			disabled={$loading}
+		>
+			<IconShare />
+		</button>
+	{/if}
+
+	<MobileNav title={mobileNavTitle}>
+		<NavMenu
+			{conversations}
+			user={data.user}
+			ondeleteConversation={(id) => deleteConversation(id)}
+			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+		/>
+	</MobileNav>
+	<nav
+		class="grid max-h-dvh grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px] max-md:hidden"
+	>
+		<NavMenu
+			{conversations}
+			user={data.user}
+			ondeleteConversation={(id) => deleteConversation(id)}
+			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+		/>
+	</nav>
+	{#if currentError}
+		<Toast message={currentError} />
+	{/if}
+	{@render children?.()}
+
+	{#if publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}
+		<script>
+			(window.plausible =
+				window.plausible ||
+				function () {
+					(plausible.q = plausible.q || []).push(arguments);
+				}),
+				(plausible.init =
+					plausible.init ||
+					function (i) {
+						plausible.o = i || {};
+					});
+			plausible.init();
+		</script>
+	{/if}
+</div>

package/src/ruvocal/src/routes/+layout.ts

@@ -0,0 +1,91 @@
+import { UrlDependency } from "$lib/types/UrlDependency";
+import type { ConvSidebar } from "$lib/types/ConvSidebar";
+import { useAPIClient, handleResponse } from "$lib/APIClient";
+import { getConfigManager } from "$lib/utils/PublicConfig.svelte";
+import type { GETModelsResponse, FeatureFlags } from "$lib/server/api/types";
+
+interface ConversationListItem {
+	_id: { toString(): string };
+	title: string;
+	updatedAt: Date | string;
+	model?: string;
+}
+
+interface UserInfo {
+	id: string;
+	username?: string;
+	avatarUrl?: string;
+	email?: string;
+	isAdmin: boolean;
+	isEarlyAccess: boolean;
+}
+
+interface SettingsResponse {
+	welcomeModalSeen: boolean;
+	welcomeModalSeenAt: Date | null;
+	shareConversationsWithModelAuthors: boolean;
+	activeModel: string;
+	streamingMode: "raw" | "smooth";
+	directPaste: boolean;
+	hapticsEnabled: boolean;
+	customPrompts: Record<string, string>;
+	multimodalOverrides: Record<string, boolean>;
+	toolsOverrides: Record<string, boolean>;
+	hidePromptExamples: Record<string, boolean>;
+	providerOverrides: Record<string, string>;
+	billingOrganization?: string;
+}
+
+export const load = async ({ depends, fetch, url }) => {
+	depends(UrlDependency.ConversationList);
+
+	const client = useAPIClient({ fetch, origin: url.origin });
+
+	const [settings, models, user, publicConfig, featureFlags, conversationsData] =
+		(await Promise.all([
+			client.user.settings.get().then(handleResponse),
+			client.models.get().then(handleResponse),
+			client.user.get().then(handleResponse),
+			client["public-config"].get().then(handleResponse),
+			client["feature-flags"].get().then(handleResponse),
+			client.conversations.get({ query: { p: 0 } }).then(handleResponse),
+		])) as [
+			SettingsResponse,
+			GETModelsResponse,
+			UserInfo | null,
+			Record<string, unknown>,
+			FeatureFlags,
+			{ conversations: ConversationListItem[]; hasMore: boolean },
+		];
+
+	const defaultModel = models[0];
+
+	const { conversations: rawConversations } = conversationsData;
+	const conversations = rawConversations.map((conv: ConversationListItem) => {
+		const trimmedTitle = conv.title.trim();
+
+		conv.title = trimmedTitle;
+
+		return {
+			id: conv._id.toString(),
+			title: conv.title,
+			model: conv.model ?? defaultModel?.id,
+			updatedAt: new Date(conv.updatedAt),
+		} satisfies ConvSidebar;
+	});
+
+	return {
+		conversations,
+		models,
+		oldModels: [],
+		user,
+		settings: {
+			...settings,
+			welcomeModalSeenAt: settings.welcomeModalSeenAt
+				? new Date(settings.welcomeModalSeenAt)
+				: null,
+		},
+		publicConfig: getConfigManager(publicConfig as Record<`PUBLIC_${string}`, string>),
+		...featureFlags,
+	};
+};