@aigentic/ruflo 3.7.0-alpha.69

package/src/ruvocal/src/lib/components/NavMenu.svelte

@@ -0,0 +1,313 @@
+<script lang="ts" module>
+	export const titles: { [key: string]: string } = {
+		today: "Today",
+		week: "This week",
+		month: "This month",
+		older: "Older",
+	} as const;
+</script>
+
+<script lang="ts">
+	import { base } from "$app/paths";
+
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import IconSun from "$lib/components/icons/IconSun.svelte";
+	import IconMoon from "$lib/components/icons/IconMoon.svelte";
+	import { switchTheme, subscribeToTheme } from "$lib/switchTheme";
+	import { isAborted } from "$lib/stores/isAborted";
+	import { onDestroy } from "svelte";
+
+	import NavConversationItem from "./NavConversationItem.svelte";
+	import type { LayoutData } from "../../routes/$types";
+	import type { ConvSidebar } from "$lib/types/ConvSidebar";
+	import type { Model } from "$lib/types/Model";
+	import { page } from "$app/state";
+	import InfiniteScroll from "./InfiniteScroll.svelte";
+	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
+	import { browser } from "$app/environment";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+	import { useAPIClient, handleResponse } from "$lib/APIClient";
+	import { requireAuthUser } from "$lib/utils/auth";
+	import { enabledServersCount } from "$lib/stores/mcpServers";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
+	import MCPServerManager from "./mcp/MCPServerManager.svelte";
+	import RufloHelpModal from "./RufloHelpModal.svelte";
+
+	const publicConfig = usePublicConfig();
+	const client = useAPIClient();
+
+	interface Props {
+		conversations: ConvSidebar[];
+		user: LayoutData["user"];
+		p?: number;
+		ondeleteConversation?: (id: string) => void;
+		oneditConversationTitle?: (payload: { id: string; title: string }) => void;
+	}
+
+	let {
+		conversations = $bindable(),
+		user,
+		p = $bindable(0),
+		ondeleteConversation,
+		oneditConversationTitle,
+	}: Props = $props();
+
+	let hasMore = $state(true);
+
+	function handleNewChatClick(e: MouseEvent) {
+		isAborted.set(true);
+
+		if (requireAuthUser()) {
+			e.preventDefault();
+		}
+	}
+
+	function handleNavItemClick(e: MouseEvent) {
+		if (requireAuthUser()) {
+			e.preventDefault();
+		}
+	}
+
+	const dateRanges = [
+		new Date().setDate(new Date().getDate() - 1),
+		new Date().setDate(new Date().getDate() - 7),
+		new Date().setMonth(new Date().getMonth() - 1),
+	];
+
+	let groupedConversations = $derived({
+		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
+		week: conversations.filter(
+			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
+		),
+		month: conversations.filter(
+			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
+		),
+		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
+	});
+
+	const nModels: number = page.data.models.filter((el: Model) => !el.unlisted).length;
+
+	async function handleVisible() {
+		p++;
+		const newConvs = await client.conversations
+			.get({
+				query: {
+					p,
+				},
+			})
+			.then(handleResponse)
+			.then((r) => r.conversations)
+			.catch((): ConvSidebar[] => []);
+
+		if (newConvs.length === 0) {
+			hasMore = false;
+		}
+
+		conversations = [...conversations, ...newConvs];
+	}
+
+	$effect(() => {
+		if (conversations.length <= CONV_NUM_PER_PAGE) {
+			// reset p to 0 if there's only one page of content
+			// that would be caused by a data loading invalidation
+			p = 0;
+		}
+	});
+
+	let isDark = $state(false);
+	let unsubscribeTheme: (() => void) | undefined;
+	let showMcpModal = $state(false);
+	let showHelpModal = $state(false);
+
+	if (browser) {
+		unsubscribeTheme = subscribeToTheme(({ isDark: nextIsDark }) => {
+			isDark = nextIsDark;
+		});
+	}
+
+	onDestroy(() => {
+		unsubscribeTheme?.();
+	});
+</script>
+
+<div
+	class="sticky top-0 flex flex-none touch-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0"
+>
+	<a
+		class="relative flex select-none items-center rounded-xl text-lg font-semibold"
+		href="{publicConfig.PUBLIC_ORIGIN}{base}/"
+	>
+		<Logo classNames="mr-[2px]" />
+		{publicConfig.PUBLIC_APP_NAME}
+		<!-- Quantum dots floating over "lo" -->
+		<span class="pointer-events-none absolute right-[-2px] top-[-1px] flex gap-[3px]">
+			<span class="quantum-dot qd1"></span>
+			<span class="quantum-dot qd2"></span>
+			<span class="quantum-dot qd3"></span>
+		</span>
+	</a>
+	<a
+		href={`${base}/`}
+		onclick={handleNewChatClick}
+		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700 sm:text-smd"
+		title="Ctrl/Cmd + Shift + O"
+	>
+		New Chat
+	</a>
+</div>
+
+<div
+	class="scrollbar-custom flex touch-pan-y flex-col gap-1 overflow-y-auto rounded-r-xl border border-l-0 border-gray-100 from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:border-transparent dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
+>
+	<div class="flex flex-col gap-0.5">
+		{#each Object.entries(groupedConversations) as [group, convs]}
+			{#if convs.length}
+				<h4 class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500">
+					{titles[group]}
+				</h4>
+				{#each convs as conv}
+					<NavConversationItem {conv} {oneditConversationTitle} {ondeleteConversation} />
+				{/each}
+			{/if}
+		{/each}
+	</div>
+	{#if hasMore}
+		<InfiniteScroll onvisible={handleVisible} />
+	{/if}
+</div>
+<div
+	class="flex touch-none flex-col gap-1 rounded-r-xl border border-l-0 border-gray-100 p-3 text-sm dark:border-transparent md:mt-3 md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
+>
+	{#if user?.username || user?.email}
+		<div
+			class="group flex h-9 items-center gap-1.5 rounded-lg pl-2.5 pr-2 hover:bg-gray-100 first:hover:bg-transparent dark:hover:bg-gray-700 first:dark:hover:bg-transparent"
+		>
+			<img
+				src="https://huggingface.co/api/users/{user.username}/avatar?redirect=true"
+				class="size-3.5 rounded-full border bg-gray-500 dark:border-white/40"
+				alt=""
+			/>
+			<span
+				class="flex flex-none shrink items-center gap-1.5 truncate pr-2 text-gray-500 dark:text-gray-400"
+				>{user?.username || user?.email}</span
+			>
+
+			{#if publicConfig.isHuggingChat && $isPro === false}
+				<a
+					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="ml-auto flex h-[20px] items-center gap-1 px-1.5 py-0.5 text-xs text-gray-500 dark:text-gray-400"
+				>
+					<IconPro />
+					Get PRO
+				</a>
+			{:else if publicConfig.isHuggingChat && $isPro === true}
+				<span
+					class="ml-auto flex h-[20px] items-center gap-1 px-1.5 py-0.5 text-xs text-gray-500 dark:text-gray-400"
+				>
+					<IconPro />
+					PRO
+				</span>
+			{/if}
+		</div>
+	{/if}
+	<a
+		href="{base}/models"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		onclick={handleNavItemClick}
+	>
+		Models
+		<span
+			class="ml-auto rounded-md bg-gray-500/5 px-1.5 py-0.5 text-xs text-gray-400 dark:bg-gray-500/20 dark:text-gray-400"
+			>{nModels}</span
+		>
+	</a>
+
+	{#if user?.username || user?.email}
+		<button
+			onclick={() => (showMcpModal = true)}
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			MCP Servers
+			{#if $enabledServersCount > 0}
+				<span
+					class="ml-auto rounded-md bg-blue-600/10 px-1.5 py-0.5 text-xs text-blue-600 dark:bg-blue-600/20 dark:text-blue-400"
+				>
+					{$enabledServersCount}
+				</span>
+			{/if}
+		</button>
+	{/if}
+
+	<span class="flex gap-1">
+		<a
+			href="{base}/settings/application"
+			class="flex h-9 flex-none flex-grow items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			onclick={handleNavItemClick}
+		>
+			Settings
+		</a>
+		<button
+			onclick={() => (showHelpModal = true)}
+			aria-label="Open help and tool documentation"
+			title="RuFlo capabilities & tool docs"
+			class="flex size-9 min-w-[1.5em] flex-none items-center justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
+				<circle cx="12" cy="12" r="10" />
+				<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+				<line x1="12" y1="17" x2="12.01" y2="17" />
+			</svg>
+		</button>
+		<button
+			onclick={() => {
+				switchTheme();
+			}}
+			aria-label="Toggle theme"
+			class="flex size-9 min-w-[1.5em] flex-none items-center justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			{#if browser}
+				{#if isDark}
+					<IconSun />
+				{:else}
+					<IconMoon />
+				{/if}
+			{/if}
+		</button>
+	</span>
+</div>
+
+{#if showMcpModal}
+	<MCPServerManager onclose={() => (showMcpModal = false)} />
+{/if}
+
+{#if showHelpModal}
+	<RufloHelpModal onclose={() => (showHelpModal = false)} />
+{/if}
+
+<style>
+	.quantum-dot {
+		display: block;
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+	}
+	.qd1 {
+		background: #3b82f6;
+		animation: qdot 2.2s ease-in-out infinite;
+	}
+	.qd2 {
+		background: #818cf8;
+		animation: qdot 2.2s ease-in-out infinite 0.35s;
+	}
+	.qd3 {
+		background: #06b6d4;
+		animation: qdot 2.2s ease-in-out infinite 0.7s;
+	}
+	@keyframes qdot {
+		0%, 100% { transform: translateY(0); opacity: 0.4; }
+		50% { transform: translateY(-3px); opacity: 1; }
+	}
+</style>

package/src/ruvocal/src/lib/components/Pagination.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { getHref } from "$lib/utils/getHref";
+	import PaginationArrow from "./PaginationArrow.svelte";
+
+	interface Props {
+		classNames?: string;
+		numItemsPerPage: number;
+		numTotalItems: number;
+	}
+
+	let { classNames = "", numItemsPerPage, numTotalItems }: Props = $props();
+
+	const ELLIPSIS_IDX = -1 as const;
+
+	function getPageIndexes(pageIdx: number, nTotalPages: number) {
+		let pageIdxs: number[] = [];
+
+		const NUM_EXTRA_BUTTONS = 2; // The number of page links to show on either side of the current page link.
+
+		const minIdx = 0;
+		const maxIdx = nTotalPages - 1;
+
+		pageIdxs = [pageIdx];
+
+		// forward
+		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
+			const newPageIdx = pageIdx + i;
+			if (newPageIdx > maxIdx) {
+				continue;
+			}
+			pageIdxs.push(newPageIdx);
+		}
+		if (maxIdx - pageIdxs[pageIdxs.length - 1] > 1) {
+			pageIdxs.push(...[ELLIPSIS_IDX, maxIdx]);
+		} else if (maxIdx - pageIdxs[pageIdxs.length - 1] === 1) {
+			pageIdxs.push(maxIdx);
+		}
+
+		// backward
+		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
+			const newPageIdx = pageIdx - i;
+			if (newPageIdx < minIdx) {
+				continue;
+			}
+			pageIdxs.unshift(newPageIdx);
+		}
+		if (pageIdxs[0] - minIdx > 1) {
+			pageIdxs.unshift(...[minIdx, ELLIPSIS_IDX]);
+		} else if (pageIdxs[0] - minIdx === 1) {
+			pageIdxs.unshift(minIdx);
+		}
+		return pageIdxs;
+	}
+	let numTotalPages = $derived(Math.ceil(numTotalItems / numItemsPerPage));
+	let pageIndex = $derived(parseInt(page.url.searchParams.get("p") ?? "0"));
+	let pageIndexes = $derived(getPageIndexes(pageIndex, numTotalPages));
+</script>
+
+{#if numTotalPages > 1}
+	<nav>
+		<ul
+			class="flex select-none items-center justify-between space-x-2 text-gray-700 dark:text-gray-300 sm:justify-center {classNames}"
+		>
+			<li>
+				<PaginationArrow
+					href={getHref(page.url, { newKeys: { p: (pageIndex - 1).toString() } })}
+					direction="previous"
+					isDisabled={pageIndex - 1 < 0}
+				/>
+			</li>
+			{#each pageIndexes as pageIdx}
+				<li class="hidden sm:block">
+					<a
+						class="
+							rounded-lg px-2.5 py-1
+							{pageIndex === pageIdx
+							? 'bg-gray-50 font-semibold ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-yellow-500 dark:ring-gray-700'
+							: ''}
+						"
+						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
+						href={getHref(page.url, { newKeys: { p: pageIdx.toString() } })}
+					>
+						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
+					</a>
+				</li>
+			{/each}
+			<li>
+				<PaginationArrow
+					href={getHref(page.url, { newKeys: { p: (pageIndex + 1).toString() } })}
+					direction="next"
+					isDisabled={pageIndex + 1 >= numTotalPages}
+				/>
+			</li>
+		</ul>
+	</nav>
+{/if}

package/src/ruvocal/src/lib/components/PaginationArrow.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import CarbonCaretLeft from "~icons/carbon/caret-left";
+	import CarbonCaretRight from "~icons/carbon/caret-right";
+
+	interface Props {
+		href: string;
+		direction: "next" | "previous";
+		isDisabled?: boolean;
+	}
+
+	let { href, direction, isDisabled = false }: Props = $props();
+</script>
+
+<a
+	class="flex items-center rounded-lg px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 {isDisabled
+		? 'pointer-events-none opacity-50'
+		: ''}"
+	{href}
+>
+	{#if direction === "previous"}
+		<CarbonCaretLeft classNames="mr-1.5" />
+		Previous
+	{:else}
+		Next
+		<CarbonCaretRight classNames="ml-1.5" />
+	{/if}
+</a>

package/src/ruvocal/src/lib/components/Portal.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	interface Props {
+		children?: import("svelte").Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	let el: HTMLElement | undefined = $state();
+
+	onMount(() => {
+		el?.ownerDocument.body.appendChild(el);
+	});
+
+	onDestroy(() => {
+		if (el?.parentNode) {
+			el.parentNode.removeChild(el);
+		}
+	});
+</script>
+
+<div bind:this={el} class="contents" hidden>
+	{@render children?.()}
+</div>

package/src/ruvocal/src/lib/components/RetryBtn.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+	}
+
+	let { classNames = "", onClick }: Props = $props();
+</script>
+
+<button
+	type="button"
+	onclick={onClick}
+	class="btn flex h-7 rounded-lg border bg-white px-2 py-1 text-sm text-gray-500 shadow-sm hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
+>
+	<CarbonRotate360 class="mr-1 -translate-y-px text-[.65rem]" /> Retry
+</button>

package/src/ruvocal/src/lib/components/RuFloUniverse.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	interface Props {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 420, height = 192 }: Props = $props();
+	let canvas: HTMLCanvasElement;
+
+	onMount(() => {
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const dpr = Math.min(window.devicePixelRatio, 2);
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		ctx.scale(dpr, dpr);
+
+		// Nodes — tightly clustered around center where RuFlo text sits
+		const nodes = [
+			{ x: 0.50, y: 0.50, r: 4, color: "#3b82f6" },
+			{ x: 0.35, y: 0.42, r: 2.5, color: "#06b6d4" },
+			{ x: 0.65, y: 0.42, r: 2.5, color: "#818cf8" },
+			{ x: 0.38, y: 0.58, r: 2.5, color: "#2dd4bf" },
+			{ x: 0.62, y: 0.58, r: 2.5, color: "#a78bfa" },
+			{ x: 0.26, y: 0.50, r: 2, color: "#38bdf8" },
+			{ x: 0.74, y: 0.50, r: 2, color: "#c084fc" },
+			{ x: 0.44, y: 0.35, r: 2, color: "#22d3ee" },
+			{ x: 0.56, y: 0.65, r: 2, color: "#6366f1" },
+			{ x: 0.30, y: 0.62, r: 1.8, color: "#0ea5e9" },
+			{ x: 0.70, y: 0.62, r: 1.8, color: "#8b5cf6" },
+			{ x: 0.42, y: 0.70, r: 1.8, color: "#14b8a6" },
+			{ x: 0.58, y: 0.35, r: 1.8, color: "#60a5fa" },
+			{ x: 0.32, y: 0.34, r: 1.8, color: "#34d399" },
+			{ x: 0.68, y: 0.34, r: 1.8, color: "#a855f7" },
+		];
+
+		const edges: [number, number][] = [
+			[0, 1], [0, 2], [0, 3], [0, 4],
+			[1, 5], [1, 7], [1, 13],
+			[2, 6], [2, 12], [2, 14],
+			[3, 5], [3, 8], [3, 9],
+			[4, 6], [4, 10], [4, 14],
+			[5, 9], [5, 13],
+			[6, 10], [6, 14],
+			[7, 12], [7, 13],
+			[8, 9], [8, 11],
+			[10, 14], [11, 9],
+		];
+
+		// Stars
+		const stars = Array.from({ length: 120 }, () => ({
+			x: Math.random() * width,
+			y: Math.random() * height,
+			r: Math.random() * 1.2 + 0.3,
+			phase: Math.random() * Math.PI * 2,
+		}));
+
+		// Particles traveling along edges
+		const particles = edges.map((_, i) => ({
+			edge: i,
+			t: Math.random(),
+			speed: 0.002 + Math.random() * 0.003,
+		}));
+
+		let animId: number;
+		let time = 0;
+
+		function draw() {
+			animId = requestAnimationFrame(draw);
+			time += 0.008;
+
+			ctx.fillStyle = "#06060f";
+			ctx.fillRect(0, 0, width, height);
+
+			// Stars
+			for (const s of stars) {
+				const alpha = 0.3 + Math.sin(time * 1.5 + s.phase) * 0.2;
+				ctx.beginPath();
+				ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+				ctx.fillStyle = `rgba(255,255,255,${alpha})`;
+				ctx.fill();
+			}
+
+			// Compute animated node positions
+			const px = nodes.map((n, i) => n.x * width + Math.sin(time + i) * 3);
+			const py = nodes.map((n, i) => n.y * height + Math.cos(time * 0.8 + i * 1.3) * 2);
+
+			// Edges
+			for (let i = 0; i < edges.length; i++) {
+				const [a, b] = edges[i];
+				const alpha = 0.12 + Math.sin(time * 1.5 + i) * 0.06;
+				ctx.beginPath();
+				ctx.moveTo(px[a], py[a]);
+				ctx.lineTo(px[b], py[b]);
+				ctx.strokeStyle = `rgba(59,130,246,${alpha})`;
+				ctx.lineWidth = 1;
+				ctx.stroke();
+			}
+
+			// Particles along edges
+			for (const p of particles) {
+				p.t = (p.t + p.speed) % 1;
+				const [a, b] = edges[p.edge];
+				const x = px[a] + (px[b] - px[a]) * p.t;
+				const y = py[a] + (py[b] - py[a]) * p.t;
+				ctx.beginPath();
+				ctx.arc(x, y, 1.2, 0, Math.PI * 2);
+				ctx.fillStyle = "rgba(96,165,250,0.7)";
+				ctx.fill();
+			}
+
+			// Orbital rings (ellipses) — centered with nodes and text
+			ctx.save();
+			ctx.translate(width * 0.5, height * 0.5);
+			ctx.rotate(time * 0.2);
+			ctx.beginPath();
+			ctx.ellipse(0, 0, 45, 20, 0, 0, Math.PI * 2);
+			ctx.strokeStyle = "rgba(59,130,246,0.1)";
+			ctx.lineWidth = 1.5;
+			ctx.stroke();
+			ctx.restore();
+
+			ctx.save();
+			ctx.translate(width * 0.5, height * 0.5);
+			ctx.rotate(-time * 0.15 + 0.5);
+			ctx.beginPath();
+			ctx.ellipse(0, 0, 55, 25, 0.4, 0, Math.PI * 2);
+			ctx.strokeStyle = "rgba(129,140,248,0.07)";
+			ctx.lineWidth = 1.5;
+			ctx.stroke();
+			ctx.restore();
+
+			// Nodes with glow
+			for (let i = 0; i < nodes.length; i++) {
+				const n = nodes[i];
+				const pulse = 1 + Math.sin(time * 2 + i * 0.7) * 0.15;
+				const r = n.r * pulse;
+
+				// Glow
+				const grad = ctx.createRadialGradient(px[i], py[i], 0, px[i], py[i], r * 5);
+				grad.addColorStop(0, n.color + "30");
+				grad.addColorStop(1, n.color + "00");
+				ctx.beginPath();
+				ctx.arc(px[i], py[i], r * 5, 0, Math.PI * 2);
+				ctx.fillStyle = grad;
+				ctx.fill();
+
+				// Core
+				ctx.beginPath();
+				ctx.arc(px[i], py[i], r, 0, Math.PI * 2);
+				ctx.fillStyle = n.color;
+				ctx.fill();
+			}
+		}
+
+		draw();
+
+		return () => {
+			cancelAnimationFrame(animId);
+		};
+	});
+</script>
+
+<div
+	class="relative h-full w-full overflow-hidden"
+	style="background: #06060f;"
+>
+	<canvas
+		bind:this={canvas}
+		style="width: {width}px; height: {height}px;"
+	></canvas>
+	<!-- Overlay text -->
+	<div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+		<h2
+			class="text-3xl font-light tracking-[0.3em] text-indigo-100"
+			style="text-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 40px rgba(99, 102, 241, 0.2);"
+		>
+			RuFlo
+		</h2>
+		<p class="mt-1 text-[10px] tracking-[0.25em] text-slate-400/70">INTELLIGENT WORKFLOWS</p>
+	</div>
+</div>