genoma-evolution 1.0.0

package/src/app/globals.css

@@ -0,0 +1,321 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ============================================================
+   🧬 GENOMA DESIGN SYSTEM
+   Primary: #002444 (Deep Navy) — autoridad, headers
+   Secondary: #a93800 (Rust Orange) — CTAs, energía
+   Background: #fcf9f8 (Warm Off-White) — superficie principal
+   ============================================================ */
+
+:root {
+  /* ── Genoma Brand Tokens ── */
+  --genoma-primary: #002444;
+  --genoma-primary-container: #1a3a5c;
+  --genoma-primary-on: #ffffff;
+  --genoma-secondary: #a93800;
+  --genoma-secondary-container: #fc713a;
+  --genoma-secondary-on: #ffffff;
+  --genoma-background: #fcf9f8;
+  --genoma-surface-low: #f6f3f2;
+  --genoma-surface: #ffffff;
+  --genoma-surface-high: #ebe7e7;
+  --genoma-tertiary: #ffb94c;
+  --genoma-error: #ba1a1a;
+
+  /* ── shadcn CSS Variables (Genoma-mapped) ── */
+  --background: oklch(0.98 0.005 30);
+  --foreground: oklch(0.15 0.02 265);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.02 265);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.02 265);
+  --primary: oklch(0.22 0.06 260);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.48 0.15 38);
+  --secondary-foreground: oklch(0.99 0 0);
+  --muted: oklch(0.94 0.008 30);
+  --muted-foreground: oklch(0.45 0.02 265);
+  --accent: oklch(0.94 0.008 30);
+  --accent-foreground: oklch(0.22 0.06 260);
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.88 0.015 30);
+  --input: oklch(0.88 0.015 30);
+  --ring: oklch(0.48 0.15 38);
+
+  /* ── Sidebar (Genoma) ── */
+  --sidebar: oklch(0.22 0.06 260);
+  --sidebar-foreground: oklch(0.96 0.005 30);
+  --sidebar-primary: oklch(0.48 0.15 38);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.28 0.05 260);
+  --sidebar-accent-foreground: oklch(0.96 0.005 30);
+  --sidebar-border: oklch(0.28 0.05 260);
+  --sidebar-ring: oklch(0.48 0.15 38);
+
+  /* ── Genoma Semantic ── */
+  --success: #16a34a;
+  --warning: #d97706;
+  --error: #dc2626;
+  --accent-violet: var(--genoma-primary);
+  --accent-cyan: var(--genoma-secondary);
+
+  /* ── Genoma Editorial Shadows ── */
+  --shadow-editorial: 0px 20px 40px rgba(28, 27, 27, 0.06);
+  --shadow-card: 0px 4px 16px rgba(28, 27, 27, 0.04);
+
+  /* ── Charts ── */
+  --chart-1: oklch(0.22 0.06 260);
+  --chart-2: oklch(0.48 0.15 38);
+  --chart-3: oklch(0.55 0.12 180);
+  --chart-4: oklch(0.68 0.16 70);
+  --chart-5: oklch(0.58 0.2 30);
+
+  --radius: 0.75rem;
+}
+
+/* ============================================================
+   DARK THEME — Deep navy + warm accents
+   ============================================================ */
+.dark {
+  --background: oklch(0.13 0.03 260);
+  --foreground: oklch(0.94 0.005 30);
+  --card: oklch(0.18 0.03 260);
+  --card-foreground: oklch(0.94 0.005 30);
+  --popover: oklch(0.18 0.03 260);
+  --popover-foreground: oklch(0.94 0.005 30);
+  --primary: oklch(0.78 0.04 260);
+  --primary-foreground: oklch(0.13 0.03 260);
+  --secondary: oklch(0.62 0.2 38);
+  --secondary-foreground: oklch(0.99 0 0);
+  --muted: oklch(0.22 0.025 260);
+  --muted-foreground: oklch(0.60 0.02 265);
+  --accent: oklch(0.22 0.025 260);
+  --accent-foreground: oklch(0.94 0.005 30);
+  --destructive: oklch(0.65 0.2 25);
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 10%);
+  --ring: oklch(0.62 0.2 38);
+
+  --sidebar: oklch(0.11 0.025 260);
+  --sidebar-foreground: oklch(0.94 0.005 30);
+  --sidebar-primary: oklch(0.62 0.2 38);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.19 0.03 260);
+  --sidebar-accent-foreground: oklch(0.94 0.005 30);
+  --sidebar-border: oklch(1 0 0 / 6%);
+  --sidebar-ring: oklch(0.62 0.2 38);
+
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --error: #f87171;
+
+  --chart-1: oklch(0.72 0.12 260);
+  --chart-2: oklch(0.62 0.2 38);
+  --chart-3: oklch(0.68 0.12 180);
+  --chart-4: oklch(0.78 0.15 70);
+  --chart-5: oklch(0.68 0.18 30);
+}
+
+/* ── @theme inline for Tailwind v4 ── */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+  --color-accent-violet: var(--accent-violet);
+  --color-accent-cyan: var(--accent-cyan);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ui-sans-serif, system-ui, sans-serif;
+  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ui-sans-serif, system-ui, sans-serif;
+
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/* ── Base ── */
+body {
+  font-family: var(--font-sans), system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Scrollbar (Genoma) ── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 36, 68, 0.25);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 36, 68, 0.45);
+}
+.dark ::-webkit-scrollbar-thumb {
+  background: rgba(252, 249, 248, 0.15);
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: rgba(252, 249, 248, 0.3);
+}
+
+/* ── No-Line Rule: Glass card separators, no borders ── */
+.glass-card {
+  background: rgba(255, 255, 255, 0.70);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: var(--shadow-editorial);
+}
+.dark .glass-card {
+  background: rgba(0, 36, 68, 0.25);
+  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+/* ── Gradient Text (Genoma primary → secondary) ── */
+.gradient-text {
+  background: linear-gradient(135deg, #002444 0%, #a93800 50%, #002444 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradient-shift 4s ease infinite;
+}
+.dark .gradient-text {
+  background: linear-gradient(135deg, #4a90d9 0%, #fc713a 50%, #4a90d9 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+/* ── LED Pulse (Genoma amber for streak) ── */
+.led-pulse {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.4; box-shadow: 0 0 4px currentColor; }
+  50% { opacity: 1; box-shadow: 0 0 12px currentColor; }
+}
+
+/* ── Terminal Cursor ── */
+.cursor-blink::after {
+  content: '▊';
+  animation: blink 1s step-end infinite;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+/* ── Editorial Shadow — GENOMA Rule #3 ── */
+.editorial-shadow {
+  box-shadow: 0px 20px 40px rgba(28, 27, 27, 0.06);
+}
+.dark .editorial-shadow {
+  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.25);
+}
+
+/* ── Glass Header (GENOMA Rule #2) ── */
+.glass-header {
+  background: rgba(252, 249, 248, 0.70);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+.dark .glass-header {
+  background: rgba(0, 36, 68, 0.30);
+}
+
+/* ── Genoma CTA Button Gradient ── */
+.genoma-cta {
+  background: linear-gradient(135deg, #002444 0%, #1a3a5c 100%);
+  color: #ffffff;
+  border-radius: 0.75rem;
+}
+.genoma-cta:hover {
+  background: linear-gradient(135deg, #1a3a5c 0%, #002444 100%);
+}
+.genoma-cta-secondary {
+  background: linear-gradient(135deg, #a93800 0%, #fc713a 100%);
+  color: #ffffff;
+  border-radius: 0.75rem;
+}
+
+/* ── Input: Minimalist Tray (GENOMA) ── */
+.genoma-input {
+  background: var(--genoma-surface-high);
+  border: none;
+  border-bottom: 2px solid rgba(0, 36, 68, 0.2);
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+.genoma-input:focus {
+  border-bottom-color: var(--genoma-secondary);
+  box-shadow: none;
+  outline: none;
+}
+
+/* ── Stats number animation ── */
+.stat-number {
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+   DARK MODE OVERRIDES
+   ============================================================ */
+::view-transition-old(root), ::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from "next";
+import { Inter, Geist_Mono } from "next/font/google";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ReactQueryProvider } from '@/components/ReactQueryProvider';
+import ThemeAwareBackground from "@/components/ThemeAwareBackground";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  display: "swap",
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Genoma — Agent-Agnostic Evolution Interface",
+  description: "Cross-agent evaluation & evolution dashboard. Zero-friction setup.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning={true}
+      className={`${inter.variable} ${geistMono.variable}`}
+    >
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function () {
+                try {
+                  var theme = localStorage.getItem('genoma-theme');
+                  if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                    document.documentElement.classList.add('dark');
+                  } else {
+                    document.documentElement.classList.remove('dark');
+                  }
+                } catch (_) {}
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body className="min-h-screen bg-background text-foreground antialiased">
+        <TooltipProvider delayDuration={200}>
+          <ReactQueryProvider>
+            <ThemeAwareBackground />
+            {children}
+          </ReactQueryProvider>
+        </TooltipProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import AppSidebar from "@/components/Sidebar";
+import type { Page } from "@/components/Sidebar";
+import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
+
+// Lazy load page components
+const OverviewPage = dynamic(() => import("@/components/pages/OverviewPage"), {
+  loading: () => <PageLoader label="Overview" />,
+});
+const SkillStudioPage = dynamic(() => import("@/components/pages/SkillStudioPage"), {
+  loading: () => <PageLoader label="Skill Studio" />,
+});
+const EvolutionPage = dynamic(() => import("@/components/pages/EvolutionPage"), {
+  loading: () => <PageLoader label="Evolution" />,
+});
+const DatasetPage = dynamic(() => import("@/components/pages/DatasetPage"), {
+  loading: () => <PageLoader label="Datasets" />,
+});
+const MetricsPage = dynamic(() => import("@/components/pages/MetricsPage"), {
+  loading: () => <PageLoader label="Metrics" />,
+});
+const LogsPage = dynamic(() => import("@/components/pages/LogsPage"), {
+  loading: () => <PageLoader label="Logs" />,
+});
+const SettingsPage = dynamic(() => import("@/components/pages/SettingsPage"), {
+  loading: () => <PageLoader label="Settings" />,
+});
+const CuratorPage = dynamic(() => import("@/components/pages/CuratorPage"), {
+  loading: () => <PageLoader label="Curator" />,
+});
+
+function PageLoader({ label }: { label: string }) {
+  return (
+    <div className="min-h-[20rem] flex items-center justify-center">
+      <p className="text-sm text-muted-foreground animate-pulse">
+        Cargando {label}...
+      </p>
+    </div>
+  );
+}
+
+const pages: Record<Page, React.ComponentType> = {
+  overview: OverviewPage,
+  skills: SkillStudioPage,
+  evolution: EvolutionPage,
+  datasets: DatasetPage,
+  metrics: MetricsPage,
+  logs: LogsPage,
+  settings: SettingsPage,
+  curator: CuratorPage,
+};
+
+export default function Home() {
+  const [activePage, setActivePage] = useState<Page>("overview");
+  const PageComponent = pages[activePage];
+
+  return (
+    <AppSidebar activePage={activePage} onNavigate={setActivePage}>
+      {/* Fixed theme toggler — top right corner */}
+      <AnimatedThemeToggler
+        className="fixed top-4 right-4 z-50 p-2.5 rounded-full bg-card border border-border shadow-md hover:shadow-lg hover:bg-accent transition-all duration-200 text-foreground"
+        duration={400}
+      />
+      <PageComponent />
+    </AppSidebar>
+  );
+}