genoma-evolution 1.0.0

package/.claude/worktrees/phase-2-mcp/src/components/EnvironmentStatus.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { Terminal, Package, Download, CheckCircle2 } from "lucide-react";
+
+interface LogLine {
+  text: string;
+  type: "info" | "success" | "warning" | "command";
+}
+
+const installLogs: LogLine[] = [
+  { text: "$ pip install -r requirements.txt", type: "command" },
+  { text: "Collecting dspy>=3.0.0...", type: "info" },
+  { text: "  Downloading dspy-3.0.2-py3-none-any.whl (892 kB)", type: "info" },
+  { text: "Collecting openai>=1.0.0...", type: "info" },
+  { text: "  Downloading openai-1.76.0-py3-none-any.whl (455 kB)", type: "info" },
+  { text: "Collecting pyyaml>=6.0...", type: "info" },
+  { text: "  Downloading PyYAML-6.0.2-cp312-cp312-linux_x86_64.whl (752 kB)", type: "info" },
+  { text: "Installing collected packages: dspy, openai, pyyaml, click, rich", type: "info" },
+  { text: "Successfully installed dspy-3.0.2 openai-1.76.0", type: "success" },
+  { text: "✓ All dependencies resolved", type: "success" },
+];
+
+const deps = [
+  { name: "dspy", version: "3.0.2", done: true },
+  { name: "openai", version: "1.76.0", done: true },
+  { name: "pyyaml", version: "6.0.2", done: true },
+  { name: "click", version: "8.1.8", done: true },
+  { name: "rich", version: "13.9.4", done: true },
+];
+
+export default function EnvironmentStatus() {
+  const [visibleLines, setVisibleLines] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setVisibleLines((prev) => {
+        if (prev >= installLogs.length) {
+          clearInterval(interval);
+          return prev;
+        }
+        return prev + 1;
+      });
+    }, 400);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    setProgress((visibleLines / installLogs.length) * 100);
+  }, [visibleLines]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.7, duration: 0.6 }}
+      className="glass-card rounded-2xl p-6 md:p-8"
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-8 h-8 rounded-lg bg-white/[0.05] flex items-center justify-center">
+          <Terminal className="w-4 h-4 text-muted-foreground" />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold tracking-wide uppercase">
+            Environment Status
+          </h2>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Dependency installation
+          </p>
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="mb-4">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground flex items-center gap-2">
+            <Download className="w-3 h-3" />
+            Installing dependencies
+          </span>
+          <span className="text-xs font-mono text-accent-violet">
+            {Math.round(progress)}%
+          </span>
+        </div>
+        <div className="h-1 bg-white/[0.05] rounded-full overflow-hidden">
+          <motion.div
+            initial={{ width: 0 }}
+            animate={{ width: `${progress}%` }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className="h-full rounded-full progress-glow"
+            style={{
+              background: "linear-gradient(90deg, #8b5cf6, #06b6d4)",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Terminal */}
+      <div className="rounded-xl bg-black/50 border border-white/[0.04] overflow-hidden">
+        {/* Terminal header */}
+        <div className="flex items-center gap-2 px-4 py-2 border-b border-white/[0.04] bg-white/[0.02]">
+          <div className="flex gap-1.5">
+            <div className="w-2.5 h-2.5 rounded-full bg-error/60" />
+            <div className="w-2.5 h-2.5 rounded-full bg-warning/60" />
+            <div className="w-2.5 h-2.5 rounded-full bg-success/60" />
+          </div>
+          <span className="text-[10px] text-muted-foreground/50 ml-2 font-mono">
+            hermes-env — bash
+          </span>
+        </div>
+
+        {/* Terminal body */}
+        <div className="p-4 font-mono text-xs leading-relaxed h-48 overflow-y-auto">
+          {installLogs.slice(0, visibleLines).map((line, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, x: -5 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.2 }}
+              className={`${
+                line.type === "command"
+                  ? "text-accent-cyan"
+                  : line.type === "success"
+                  ? "text-success"
+                  : line.type === "warning"
+                  ? "text-warning"
+                  : "text-muted-foreground/70"
+              }`}
+            >
+              {line.text}
+            </motion.div>
+          ))}
+          {visibleLines < installLogs.length && (
+            <span className="cursor-blink text-muted-foreground/30" />
+          )}
+        </div>
+      </div>
+
+      {/* Dependencies list */}
+      <div className="mt-4 space-y-2">
+        {deps.map((dep, i) => (
+          <motion.div
+            key={dep.name}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: visibleLines > i + 3 ? 1 : 0.3 }}
+            className="flex items-center justify-between py-1.5 px-3 rounded-lg bg-white/[0.01]"
+          >
+            <div className="flex items-center gap-2">
+              <Package className="w-3 h-3 text-muted-foreground/50" />
+              <span className="text-xs font-mono text-muted-foreground">
+                {dep.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] font-mono text-muted-foreground/40">
+                {dep.version}
+              </span>
+              {visibleLines > i + 3 && (
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ type: "spring", stiffness: 500 }}
+                >
+                  <CheckCircle2 className="w-3 h-3 text-success" />
+                </motion.div>
+              )}
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </motion.div>
+  );
+}

package/.claude/worktrees/phase-2-mcp/src/components/EvolutionBackground.tsx

@@ -0,0 +1 @@
+// REMOVED — component was unused (never imported anywhere)

package/.claude/worktrees/phase-2-mcp/src/components/ReactQueryProvider.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+
+export function ReactQueryProvider({ children }: { children: ReactNode }) {
+  // Creamos el QueryClient DENTRO del Client Component.
+  // Esto evita pasar la instancia desde un Server Component.
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            gcTime: 1000 * 60 * 30, // 30 minutes
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

package/.claude/worktrees/phase-2-mcp/src/components/Sidebar.tsx

@@ -0,0 +1,247 @@
+"use client"
+
+import * as React from "react"
+import {
+  Layers,
+  GitBranch,
+  Database,
+  BarChart3,
+  Terminal,
+  Settings,
+  Dna,
+  Sparkles,
+  Cpu,
+  Bot,
+  BookOpen,
+} from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { useTheme } from "next-themes"
+import { cn } from "@/lib/utils"
+
+// ── Navigation Config ─────────────────────────────────────────────────
+export type Page =
+  | "overview"
+  | "skills"
+  | "evolution"
+  | "datasets"
+  | "metrics"
+  | "logs"
+  | "settings"
+  | "curator"
+
+interface NavItem {
+  id: Page
+  label: string
+  icon: React.ElementType
+  section: "main" | "tools" | "system"
+}
+
+const navItems: NavItem[] = [
+  { id: "overview", label: "Overview", icon: Layers, section: "main" },
+  { id: "skills", label: "Skill Hub", icon: Sparkles, section: "main" },
+  { id: "evolution", label: "Evolution", icon: GitBranch, section: "main" },
+  { id: "datasets", label: "Datasets", icon: Database, section: "tools" },
+  { id: "metrics", label: "Metrics", icon: BarChart3, section: "tools" },
+  { id: "logs", label: "Live Logs", icon: Terminal, section: "tools" },
+  { id: "curator", label: "Curator", icon: Dna, section: "system" },
+  { id: "settings", label: "Settings", icon: Settings, section: "system" },
+]
+
+// ── Genoma Logo ───────────────────────────────────────────────────────
+function GenomaLogo({ collapsed }: { collapsed: boolean }) {
+  return (
+    <div className="flex items-center gap-3 px-2">
+      {/* Logo mark — always visible */}
+      <div className="relative flex-shrink-0">
+        <div className="w-9 h-9 rounded-xl flex items-center justify-center
+          bg-gradient-to-br from-[#002444] to-[#1a3a5c]
+          shadow-lg shadow-[#002444]/20
+          dark:from-[#1a3a5c] dark:to-[#002444]">
+          <Dna className="w-5 h-5 text-[#fcf9f8]" />
+        </div>
+        {/* Streak dot — Genoma tertiary */}
+        <div className="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full
+          bg-[#ffb94c] border-2 border-sidebar" />
+      </div>
+
+      {/* Text — hidden when collapsed */}
+      {!collapsed && (
+        <div className="overflow-hidden min-w-0">
+          <p className="text-sm font-semibold tracking-tight text-sidebar-foreground truncate">
+            Genoma
+          </p>
+          <p className="text-[10px] text-sidebar-foreground/50 truncate">
+            Agent Evolution Dashboard
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Nav Section ───────────────────────────────────────────────────────
+function NavSection({
+  title,
+  items,
+  activePage,
+  onNavigate,
+}: {
+  title: string
+  items: NavItem[]
+  activePage: Page
+  onNavigate: (page: Page) => void
+}) {
+  const { state } = useSidebar()
+  const collapsed = state === "collapsed"
+
+  return (
+    <SidebarGroup>
+      {!collapsed && (
+        <SidebarGroupLabel className="text-[10px] uppercase tracking-[0.15em] text-sidebar-foreground/40 px-3 mb-1">
+          {title}
+        </SidebarGroupLabel>
+      )}
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {items.map((item) => {
+            const isActive = activePage === item.id
+            return (
+              <SidebarMenuItem key={item.id}>
+                <SidebarMenuButton
+                  tooltip={collapsed ? item.label : undefined}
+                  isActive={isActive}
+                  onClick={() => onNavigate(item.id)}
+                  className={cn(
+                    "transition-all duration-200",
+                    isActive && [
+                      "bg-gradient-to-r from-[#a93800]/15 to-transparent",
+                      "text-sidebar-foreground font-medium",
+                      "border-l-[3px] border-l-[#a93800]",
+                      "shadow-[inset_0_0_0_1px_rgba(169,56,0,0.08)]",
+                    ],
+                    !isActive && [
+                      "text-sidebar-foreground/60 hover:text-sidebar-foreground/90",
+                      "hover:bg-sidebar-accent/50",
+                      "border-l-[3px] border-l-transparent",
+                    ]
+                  )}
+                >
+                  <item.icon
+                    className={cn(
+                      "h-4 w-4 flex-shrink-0",
+                      isActive && "text-[#a93800]"
+                    )}
+                  />
+                  <span className="truncate">{item.label}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )
+          })}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  )
+}
+
+// ── AppSidebar (inner) ─────────────────────────────────────────────────
+function AppSidebarInner({
+  activePage,
+  onNavigate,
+}: {
+  activePage: Page
+  onNavigate: (page: Page) => void
+}) {
+  const { state } = useSidebar()
+  const collapsed = state === "collapsed"
+
+  const mainItems = navItems.filter((i) => i.section === "main")
+  const toolItems = navItems.filter((i) => i.section === "tools")
+  const systemItems = navItems.filter((i) => i.section === "system")
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      className={cn(
+        "border-r-0",
+        // Genoma glass sidebar
+        "bg-[#002444]/95 dark:bg-[#001830]/95",
+        "backdrop-blur-2xl",
+        // Subtle inner highlight
+        "shadow-[inset_-1px_0_0_rgba(255,255,255,0.04)]",
+      )}
+    >
+      {/* ── Header ── */}
+      <SidebarHeader className="h-16 flex items-center border-b border-sidebar-border/20 px-3">
+        <GenomaLogo collapsed={collapsed} />
+      </SidebarHeader>
+
+      {/* ── Content ── */}
+      <SidebarContent className="py-3">
+        <NavSection title="Core" items={mainItems} activePage={activePage} onNavigate={onNavigate} />
+        <NavSection title="Analysis" items={toolItems} activePage={activePage} onNavigate={onNavigate} />
+        <NavSection title="System" items={systemItems} activePage={activePage} onNavigate={onNavigate} />
+      </SidebarContent>
+
+      {/* ── Footer ── */}
+      <SidebarFooter className="border-t border-sidebar-border/20 p-2">
+        <div className={cn(
+          "flex items-center gap-2 px-2 py-1.5 rounded-lg",
+          "text-[10px] text-sidebar-foreground/30",
+          collapsed && "justify-center"
+        )}>
+          <div className="w-1.5 h-1.5 rounded-full bg-[#22c55e] led-pulse" style={{color: "#22c55e"}} />
+          {!collapsed && <span className="truncate">Backend online</span>}
+        </div>
+      </SidebarFooter>
+
+      <SidebarRail className="hover:after:bg-[#a93800]/20 after:bg-sidebar-border/20" />
+    </Sidebar>
+  )
+}
+
+// ── Main Sidebar (with Provider) ──────────────────────────────────────
+export interface AppSidebarProps {
+  activePage: Page
+  onNavigate: (page: Page) => void
+  children?: React.ReactNode
+}
+
+export default function AppSidebar({
+  activePage,
+  onNavigate,
+  children,
+}: AppSidebarProps) {
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <div className="flex h-screen w-full overflow-hidden">
+        <AppSidebarInner activePage={activePage} onNavigate={onNavigate} />
+        <main className="flex-1 overflow-y-auto">
+          <div className="flex items-center gap-2 h-12 px-4 border-b border-border/50 glass-header sticky top-0 z-10">
+            <SidebarTrigger className="text-sidebar-foreground hover:text-[#a93800]" />
+            <div className="flex-1" />
+          </div>
+          <div className="p-6 lg:p-8">
+            {children}
+          </div>
+        </main>
+      </div>
+    </SidebarProvider>
+  )
+}

package/.claude/worktrees/phase-2-mcp/src/components/SkillDiffViewer.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import {
+  GitBranch,
+  Loader2,
+  FileText,
+  Code2,
+  X,
+} from "lucide-react";
+import { fetchSkillDiff, type SkillDiff } from "@/lib/api";
+
+interface SkillDiffViewerProps {
+  skillName: string;
+  runDir: string;
+  onClose: () => void;
+}
+
+export default function SkillDiffViewer({
+  skillName,
+  runDir,
+  onClose,
+}: SkillDiffViewerProps) {
+  const [diff, setDiff] = useState<SkillDiff | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [activeTab, setActiveTab] = useState<"baseline" | "evolved" | "diff">("baseline");
+
+  useEffect(() => {
+    setLoading(true);
+    fetchSkillDiff(skillName, runDir)
+      .then(setDiff)
+      .catch((e) => setError(e.message))
+      .finally(() => setLoading(false));
+  }, [skillName, runDir]);
+
+  if (loading) {
+    return (
+      <div className="mt-3 p-4 rounded-xl bg-black/30 border border-white/[0.06] flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="w-4 h-4 animate-spin" />
+        Loading diff...
+      </div>
+    );
+  }
+
+  if (error || !diff) {
+    return (
+      <div className="mt-3 p-4 rounded-xl bg-error/5 border border-error/10 text-sm text-error">
+        Failed to load diff: {error || "Unknown error"}
+      </div>
+    );
+  }
+
+  const computeDiff = () => {
+    if (!diff.baseline || !diff.evolved) return null;
+    const baseLines = diff.baseline.split("\n");
+    const evoLines = diff.evolved.split("\n");
+    const result: { type: "same" | "add" | "remove"; line: string; baseNum: number; evoNum: number }[] = [];
+    let bi = 0, ei = 0;
+    while (bi < baseLines.length || ei < evoLines.length) {
+      if (bi >= baseLines.length) {
+        result.push({ type: "add", line: evoLines[ei], baseNum: bi + 1, evoNum: ei + 1 });
+        ei++;
+      } else if (ei >= evoLines.length) {
+        result.push({ type: "remove", line: baseLines[bi], baseNum: bi + 1, evoNum: ei + 1 });
+        bi++;
+      } else if (baseLines[bi] === evoLines[ei]) {
+        result.push({ type: "same", line: baseLines[bi], baseNum: bi + 1, evoNum: ei + 1 });
+        bi++; ei++;
+      } else {
+        result.push({ type: "remove", line: baseLines[bi], baseNum: bi + 1, evoNum: ei + 1 });
+        result.push({ type: "add", line: evoLines[ei], baseNum: bi + 1, evoNum: ei + 1 });
+        bi++; ei++;
+      }
+    }
+    return result;
+  };
+
+  const diffLines = computeDiff();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: "auto" }}
+      exit={{ opacity: 0, height: 0 }}
+      className="mt-3 overflow-hidden"
+    >
+      <div className="rounded-xl bg-black/40 border border-white/[0.06] overflow-hidden">
+        <div className="flex items-center justify-between px-3 py-2 border-b border-white/[0.06]">
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setActiveTab("baseline")}
+              className={`px-3 py-1 rounded-lg text-xs font-medium transition-colors ${
+                activeTab === "baseline" ? "bg-white/[0.08] text-foreground" : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <FileText className="w-3 h-3 inline mr-1" />
+              Before
+            </button>
+            <button
+              onClick={() => setActiveTab("evolved")}
+              className={`px-3 py-1 rounded-lg text-xs font-medium transition-colors ${
+                activeTab === "evolved" ? "bg-white/[0.08] text-foreground" : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Code2 className="w-3 h-3 inline mr-1" />
+              After
+            </button>
+            {diffLines && (
+              <button
+                onClick={() => setActiveTab("diff")}
+                className={`px-3 py-1 rounded-lg text-xs font-medium transition-colors ${
+                  activeTab === "diff" ? "bg-white/[0.08] text-foreground" : "text-muted-foreground hover:text-foreground"
+                }`}
+              >
+                <GitBranch className="w-3 h-3 inline mr-1" />
+                Diff
+              </button>
+            )}
+          </div>
+          <button onClick={onClose} className="p-1 rounded-lg text-muted-foreground hover:text-foreground hover:bg-white/[0.05] transition-colors">
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+
+        <div className="max-h-96 overflow-y-auto">
+          {activeTab === "baseline" && diff.baseline && (
+            <pre className="p-4 text-xs font-mono leading-relaxed text-muted-foreground whitespace-pre-wrap">{diff.baseline}</pre>
+          )}
+          {activeTab === "evolved" && diff.evolved && (
+            <pre className="p-4 text-xs font-mono leading-relaxed text-muted-foreground whitespace-pre-wrap">{diff.evolved}</pre>
+          )}
+          {activeTab === "diff" && diffLines && (
+            <div className="p-4 text-xs font-mono leading-relaxed">
+              {diffLines.map((d, i) => (
+                <div
+                  key={i}
+                  className={`flex gap-2 px-1 -mx-1 rounded ${
+                    d.type === "add" ? "bg-success/10 text-success" : d.type === "remove" ? "bg-error/10 text-error" : ""
+                  }`}
+                >
+                  <span className="text-muted-foreground/40 w-8 text-right select-none flex-shrink-0">{d.type === "add" ? d.evoNum : d.baseNum}</span>
+                  <span className="text-muted-foreground/40 w-4 select-none flex-shrink-0">{d.type === "add" ? "+" : d.type === "remove" ? "-" : " "}</span>
+                  <span className="break-all">{d.line}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}

package/.claude/worktrees/phase-2-mcp/src/components/ThemeAwareBackground.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function ThemeAwareBackground() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const html = document.documentElement;
+    const check = () => setIsDark(html.classList.contains("dark"));
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(html, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div className="fixed inset-0 -z-10 pointer-events-none overflow-hidden">
+      {/* Light mode gradient */}
+      <div
+        className={`absolute inset-0 transition-opacity duration-500 ${
+          isDark ? "opacity-0" : "opacity-40"
+        }`}
+        style={{
+          background: `
+            radial-gradient(ellipse 80% 60% at 0% 20%, rgba(178, 255, 255, 0.6) 0%, transparent 60%),
+            radial-gradient(ellipse 60% 50% at 100% 40%, rgba(103, 232, 249, 0.4) 0%, transparent 50%),
+            radial-gradient(ellipse 50% 40% at 50% 80%, rgba(236, 254, 255, 0.3) 0%, transparent 50%),
+            transparent
+          `,
+          animation: "ambient-drift 12s ease-in-out infinite alternate",
+        }}
+      />
+      {/* Dark mode gradient */}
+      <div
+        className={`absolute inset-0 transition-opacity duration-500 ${
+          isDark ? "opacity-30" : "opacity-0"
+        }`}
+        style={{
+          background: `
+            radial-gradient(ellipse 70% 50% at 20% 30%, rgba(6, 182, 212, 0.15) 0%, transparent 60%),
+            radial-gradient(ellipse 50% 40% at 80% 60%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+            transparent
+          `,
+          animation: "ambient-drift 15s ease-in-out infinite alternate-reverse",
+        }}
+      />
+      {/* Noise overlay */}
+      <div
+        className="absolute inset-0 opacity-[0.015]"
+        style={{
+          backgroundImage:
+            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")",
+          backgroundSize: "256px 256px",
+        }}
+      />
+      <style jsx>{`
+        @keyframes ambient-drift {
+          0% { transform: translate(0, 0) scale(1); }
+          33% { transform: translate(2%, -1%) scale(1.02); }
+          66% { transform: translate(-1%, 2%) scale(0.98); }
+          100% { transform: translate(1%, 1%) scale(1.01); }
+        }
+      `}</style>
+    </div>
+  );
+}