@aigentic/ruflo 3.7.0-alpha.69

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

@@ -0,0 +1,242 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import { browser } from "$app/environment";
+
+	interface Props {
+		opacity?: number;
+	}
+
+	let { opacity = 0.6 }: Props = $props();
+
+	let canvas: HTMLCanvasElement | undefined = $state();
+	let animationFrame: number;
+
+	// Mathematical glyphs for Foundation aesthetic
+	const GLYPHS = ['∑', '∫', '∂', '∞', '∇', 'Δ', 'Ψ', 'Ω', 'π', 'λ', 'θ', 'φ', 'ξ', '∈', '∀', '∃', '⊕', '⊗', '≡', '≈'];
+
+	interface Particle {
+		x: number;
+		y: number;
+		vx: number;
+		vy: number;
+		size: number;
+		opacity: number;
+		glyph?: string;
+		isGlyph: boolean;
+		phase: number;
+		speed: number;
+	}
+
+	interface Connection {
+		from: number;
+		to: number;
+		opacity: number;
+	}
+
+	let particles: Particle[] = [];
+	let connections: Connection[] = [];
+	let time = 0;
+	let mouseX = 0.5;
+	let mouseY = 0.5;
+
+	function initParticles(width: number, height: number) {
+		particles = [];
+		const particleCount = Math.floor((width * height) / 15000);
+		const glyphCount = Math.floor(particleCount * 0.15);
+
+		for (let i = 0; i < particleCount; i++) {
+			const isGlyph = i < glyphCount;
+			particles.push({
+				x: Math.random() * width,
+				y: Math.random() * height,
+				vx: (Math.random() - 0.5) * 0.3,
+				vy: (Math.random() - 0.5) * 0.3,
+				size: isGlyph ? 12 + Math.random() * 8 : 1 + Math.random() * 2,
+				opacity: 0.1 + Math.random() * 0.5,
+				glyph: isGlyph ? GLYPHS[Math.floor(Math.random() * GLYPHS.length)] : undefined,
+				isGlyph,
+				phase: Math.random() * Math.PI * 2,
+				speed: 0.5 + Math.random() * 1.5,
+			});
+		}
+	}
+
+	function updateConnections() {
+		connections = [];
+		const maxDist = 120;
+
+		for (let i = 0; i < particles.length; i++) {
+			for (let j = i + 1; j < particles.length; j++) {
+				const dx = particles[i].x - particles[j].x;
+				const dy = particles[i].y - particles[j].y;
+				const dist = Math.sqrt(dx * dx + dy * dy);
+
+				if (dist < maxDist) {
+					connections.push({
+						from: i,
+						to: j,
+						opacity: (1 - dist / maxDist) * 0.15,
+					});
+				}
+			}
+		}
+	}
+
+	function animate() {
+		if (!canvas) return;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const width = canvas.width;
+		const height = canvas.height;
+
+		// Clear with fade effect
+		ctx.fillStyle = "rgba(2, 2, 5, 0.15)";
+		ctx.fillRect(0, 0, width, height);
+
+		time += 0.008;
+
+		// Update particles
+		particles.forEach((p, i) => {
+			// Mouse influence
+			const dx = mouseX * width - p.x;
+			const dy = mouseY * height - p.y;
+			const dist = Math.sqrt(dx * dx + dy * dy);
+			if (dist < 200) {
+				const force = (200 - dist) / 200 * 0.02;
+				p.vx += dx * force * 0.01;
+				p.vy += dy * force * 0.01;
+			}
+
+			// Drift
+			p.x += p.vx + Math.sin(time * p.speed + p.phase) * 0.2;
+			p.y += p.vy + Math.cos(time * p.speed + p.phase) * 0.2;
+
+			// Damping
+			p.vx *= 0.99;
+			p.vy *= 0.99;
+
+			// Wrap around
+			if (p.x < -50) p.x = width + 50;
+			if (p.x > width + 50) p.x = -50;
+			if (p.y < -50) p.y = height + 50;
+			if (p.y > height + 50) p.y = -50;
+
+			// Pulse opacity
+			const pulseOpacity = p.opacity * (0.5 + Math.sin(time * 2 + p.phase) * 0.5);
+
+			if (p.isGlyph && p.glyph) {
+				// Draw glyph
+				ctx.save();
+				ctx.font = `${p.size}px "SF Mono", "Fira Code", monospace`;
+				ctx.fillStyle = `rgba(232, 166, 52, ${pulseOpacity * 0.6})`;
+				ctx.shadowColor = "#e8a634";
+				ctx.shadowBlur = 8;
+				ctx.fillText(p.glyph, p.x, p.y);
+				ctx.restore();
+			} else {
+				// Draw particle
+				ctx.beginPath();
+				ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+				ctx.fillStyle = `rgba(232, 166, 52, ${pulseOpacity})`;
+				ctx.fill();
+			}
+		});
+
+		// Update connections periodically
+		if (Math.floor(time * 10) % 5 === 0) {
+			updateConnections();
+		}
+
+		// Draw connections
+		connections.forEach((c) => {
+			const p1 = particles[c.from];
+			const p2 = particles[c.to];
+			if (!p1 || !p2) return;
+			ctx.beginPath();
+			ctx.moveTo(p1.x, p1.y);
+			ctx.lineTo(p2.x, p2.y);
+			ctx.strokeStyle = `rgba(232, 166, 52, ${c.opacity})`;
+			ctx.lineWidth = 0.5;
+			ctx.stroke();
+		});
+
+		// Draw orbital rings
+		const centerX = width / 2;
+		const centerY = height / 2;
+		const rings = [
+			{ radius: 180, rotation: time * 0.3, opacity: 0.08 },
+			{ radius: 250, rotation: -time * 0.2, opacity: 0.06 },
+			{ radius: 320, rotation: time * 0.15, opacity: 0.04 },
+		];
+
+		rings.forEach((ring) => {
+			ctx.save();
+			ctx.translate(centerX, centerY);
+			ctx.rotate(ring.rotation);
+			ctx.beginPath();
+			ctx.ellipse(0, 0, ring.radius, ring.radius * 0.3, 0, 0, Math.PI * 2);
+			ctx.strokeStyle = `rgba(232, 166, 52, ${ring.opacity})`;
+			ctx.lineWidth = 1;
+			ctx.stroke();
+			ctx.restore();
+		});
+
+		// Central core glow
+		const coreGlow = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 100);
+		coreGlow.addColorStop(0, `rgba(232, 166, 52, ${0.15 + Math.sin(time * 3) * 0.05})`);
+		coreGlow.addColorStop(0.5, "rgba(232, 166, 52, 0.02)");
+		coreGlow.addColorStop(1, "transparent");
+		ctx.fillStyle = coreGlow;
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, 100, 0, Math.PI * 2);
+		ctx.fill();
+
+		animationFrame = requestAnimationFrame(animate);
+	}
+
+	function handleResize() {
+		if (!canvas) return;
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		initParticles(canvas.width, canvas.height);
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		mouseX = e.clientX / window.innerWidth;
+		mouseY = e.clientY / window.innerHeight;
+	}
+
+	onMount(() => {
+		if (!browser || !canvas) return;
+		handleResize();
+		animate();
+		window.addEventListener("resize", handleResize);
+		window.addEventListener("mousemove", handleMouseMove);
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		cancelAnimationFrame(animationFrame);
+		window.removeEventListener("resize", handleResize);
+		window.removeEventListener("mousemove", handleMouseMove);
+	});
+</script>
+
+<canvas
+	bind:this={canvas}
+	class="foundation-bg"
+	style="opacity: {opacity}"
+></canvas>
+
+<style>
+	.foundation-bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 0;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		label?: string;
+		position?: "top" | "bottom" | "left" | "right";
+		TooltipClassNames?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { label = "", position = "bottom", TooltipClassNames = "", children }: Props = $props();
+
+	const positionClasses = {
+		top: "bottom-full mb-2",
+		bottom: "top-full mt-2",
+		left: "right-full mr-2 top-1/2 -translate-y-1/2",
+		right: "left-full ml-2 top-1/2 -translate-y-1/2",
+	};
+</script>
+
+<div class="group/tooltip inline-block md:relative">
+	{@render children?.()}
+
+	<div
+		class="
+		invisible
+		absolute
+		z-10
+		w-64
+		whitespace-normal
+		rounded-md
+		bg-black
+		p-2
+		text-center
+		text-white
+		group-hover/tooltip:visible
+		group-active/tooltip:visible
+		max-sm:left-1/2
+		max-sm:-translate-x-1/2
+		{positionClasses[position]}
+		{TooltipClassNames}
+	  "
+	>
+		{label}
+	</div>
+</div>

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	import { onMount, onDestroy } from "svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import { pendingChatInput } from "$lib/stores/pendingChatInput";
+
+	interface Props {
+		html: string;
+		onclose?: () => void;
+	}
+
+	let { html, onclose }: Props = $props();
+
+	let iframeEl: HTMLIFrameElement | undefined = $state();
+	let channel = $state(`preview_${Math.random().toString(36).slice(2)}`);
+	let errors: { message: string; stack?: string }[] = $state([]);
+
+	function buildSrcdoc(content: string, channel: string): string {
+		const trimmed = content.trimStart();
+		const svgPattern = /^(?:<\?xml[^>]*>\s*)?(?:<!doctype\s+svg[^>]*>\s*)?<svg[\s>]/i;
+		const baseTag = '<base target="_blank">';
+		const disabledLinkStyles = `<style>
+			a[data-chatui-link-disabled] {}
+		</style>`;
+		const endScriptTag = "</scr" + "ipt>";
+		const errorHook = `\n<script>\n(function(){\n  function send(detail){\n    try{ parent.postMessage({ type: 'chatui.preview.error', channel: '${channel}', detail: detail }, '*'); }catch(e){}\n  }\n  function markDisabled(anchor){\n    if (!anchor || anchor.dataset.chatuiLinkDisabled === 'true') return;\n    anchor.dataset.chatuiLinkDisabled = 'true';\n    var note = 'Link disabled in preview';\n    var title = anchor.getAttribute('title');\n    if (!title) {\n      anchor.setAttribute('title', note);\n    } else if (title.indexOf(note) === -1) {\n      anchor.setAttribute('title', title + ' — ' + note);\n    }\n  }\n  function disableAnchors(scope){\n    try {\n      var root = scope && scope.querySelectorAll ? scope : document;\n      var anchors = root.querySelectorAll ? root.querySelectorAll('a') : [];\n      for (var i = 0; i < anchors.length; i++) {\n        markDisabled(anchors[i]);\n      }\n    } catch (err) {}\n  }\n  function nearestAnchor(node){\n    while (node && node !== document) {\n      if (node.tagName && node.tagName.toLowerCase() === 'a') return node;\n      node = node.parentNode;\n    }\n    return null;\n  }\n  function intercept(ev){\n    var anchor = nearestAnchor(ev.target);\n    if (!anchor) return;\n    markDisabled(anchor);\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n  disableAnchors();\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function(){ disableAnchors(); });\n  } else {\n    setTimeout(function(){ disableAnchors(); }, 0);\n  }\n  if (window.MutationObserver) {\n    var observer = new MutationObserver(function(mutations){\n      for (var i = 0; i < mutations.length; i++) {\n        var nodes = mutations[i].addedNodes;\n        for (var j = 0; j < nodes.length; j++) {\n          var node = nodes[j];\n          if (!node || node.nodeType !== 1) continue;\n          if (node.tagName && node.tagName.toLowerCase() === 'a') {\n            markDisabled(node);\n          } else {\n            disableAnchors(node);\n          }\n        }\n      }\n    });\n    observer.observe(document.documentElement, { childList: true, subtree: true });\n  }\n  window.addEventListener('click', intercept, true);\n  window.addEventListener('auxclick', intercept, true);\n  window.addEventListener('keydown', function(ev){\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      intercept(ev);\n    }\n  }, true);\n  window.addEventListener('error', function(ev){\n    var msg = ev && ev.message ? ev.message : 'Script error';\n    var stack = ev && ev.error && ev.error.stack ? ev.error.stack : undefined;\n    send({ message: msg, stack: stack });\n  });\n  window.addEventListener('unhandledrejection', function(ev){\n    var r = ev && ev.reason;\n    var msg = (typeof r === 'string') ? r : (r && r.message) ? r.message : 'Unhandled promise rejection';\n    var stack = r && r.stack ? r.stack : undefined;\n    send({ message: msg, stack: stack });\n  });\n})();\n${endScriptTag}`;
+
+		if (svgPattern.test(trimmed)) {
+			const svgContent = trimmed
+				.replace(/^(<\?xml[^>]*>\s*)/i, "")
+				.replace(/^(<!doctype[^>]*>\s*)/i, "");
+			return `<!doctype html><html><head>${baseTag}${disabledLinkStyles}${errorHook}</head><body>${svgContent}</body></html>`;
+		}
+
+		const headMatch = content.match(/<head[^>]*>/i);
+		if (headMatch) {
+			return content.replace(headMatch[0], headMatch[0] + baseTag + disabledLinkStyles + errorHook);
+		}
+		const htmlTagMatch = content.match(/<html[^>]*>/i);
+		if (htmlTagMatch) {
+			return content.replace(
+				htmlTagMatch[0],
+				htmlTagMatch[0] + "\n<head>" + baseTag + disabledLinkStyles + errorHook + "</head>"
+			);
+		}
+		const doctypeMatch = content.match(/<!doctype[^>]*>/i);
+		if (doctypeMatch) {
+			const idx = content.indexOf(doctypeMatch[0]) + doctypeMatch[0].length;
+			return (
+				content.slice(0, idx) +
+				"\n<head>" +
+				baseTag +
+				disabledLinkStyles +
+				errorHook +
+				"</head>" +
+				content.slice(idx)
+			);
+		}
+		return "<head>" + baseTag + disabledLinkStyles + errorHook + "</head>\n" + content;
+	}
+
+	let srcdoc = $derived(buildSrcdoc(html, channel));
+
+	type PreviewMessage = {
+		type: string;
+		channel: string;
+		detail?: { message?: unknown; stack?: string };
+	};
+
+	function onMessage(ev: MessageEvent) {
+		if (!iframeEl || ev.source !== iframeEl.contentWindow) return;
+		const raw = ev.data as unknown;
+		if (!raw || typeof raw !== "object") return;
+		const data = raw as Partial<PreviewMessage>;
+		if (data.type !== "chatui.preview.error" || data.channel !== channel) return;
+		const detail = (data.detail ?? {}) as { message?: unknown; stack?: string };
+		errors = [...errors, { message: String(detail.message ?? "Error"), stack: detail.stack }];
+	}
+
+	onMount(() => {
+		window.addEventListener("message", onMessage);
+	});
+	onDestroy(() => {
+		window.removeEventListener("message", onMessage);
+	});
+
+	function composeText(): string {
+		const lines = errors.map((e, i) => `${i + 1}. ${e.message}${e.stack ? `\n${e.stack}` : ""}`);
+		const summary = lines[0] ?? "Unknown error";
+		return errors.length > 1
+			? `it's not working: ${summary} (+${errors.length - 1} more) - can you fix it?`
+			: `it's not working: ${summary} - can you fix it?`;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		// Close preview on ESC key
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onclose?.();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<Modal
+	width="max-w-none max-h-none w-[100dvw] h-[100dvh] !rounded-none"
+	onclose={() => onclose?.()}
+>
+	<div class="relative h-[100dvh] w-[100dvw]">
+		<iframe
+			bind:this={iframeEl}
+			title="HTML Preview"
+			class="h-full w-full"
+			sandbox="allow-scripts allow-popups"
+			referrerpolicy="no-referrer"
+			{srcdoc}
+		></iframe>
+
+		<!-- Close button with visible container -->
+		<button
+			class="btn fixed right-6 top-4 z-50 flex h-7 items-center gap-1 rounded-lg border border-gray-500/60 bg-gray-800 px-2 text-xs text-white shadow-sm backdrop-blur transition-none hover:border-gray-500 hover:bg-gray-700 active:shadow-inner"
+			title="Close preview (Esc)"
+			onclick={() => onclose?.()}
+		>
+			<CarbonClose class="size-3.5" />
+			Close preview
+		</button>
+
+		{#if errors.length > 0}
+			<button
+				class="btn fixed bottom-4 right-4 z-50 flex items-center gap-2 rounded-full border-2 border-red-500/60 bg-red-800/90 px-4 py-1.5 text-sm text-white shadow-lg"
+				title="Send error to chat"
+				onclick={() => {
+					pendingChatInput.set(composeText());
+					onclose?.();
+				}}
+			>
+				<span>Error caught ({errors.length})</span>
+			</button>
+		{/if}
+	</div>
+</Modal>

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	interface Props {
+		onvisible?: () => void;
+	}
+
+	let { onvisible }: Props = $props();
+
+	let loader: HTMLDivElement | undefined = $state();
+	let observer: IntersectionObserver;
+	let intervalId: ReturnType<typeof setInterval> | undefined;
+
+	onMount(() => {
+		if (!loader) {
+			return;
+		}
+
+		observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					// Clear any existing interval
+					if (intervalId) {
+						clearInterval(intervalId);
+					}
+					// Start new interval that dispatches every 250ms
+					intervalId = setInterval(() => {
+						onvisible?.();
+					}, 250);
+				} else {
+					// Clear interval when not intersecting
+					if (intervalId) {
+						clearInterval(intervalId);
+						intervalId = undefined;
+					}
+				}
+			});
+		});
+
+		observer.observe(loader);
+
+		return () => {
+			observer.disconnect();
+			if (intervalId) {
+				clearInterval(intervalId);
+			}
+		};
+	});
+</script>
+
+<div bind:this={loader} class="h-2"></div>