genoma-evolution 1.0.0

package/src/components/pages/LogsPage.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Terminal, Wifi, WifiOff, Trash2, ChevronDown, Activity, CheckCircle2, XCircle, Loader2 } from "lucide-react";
+import { wsConnect, fetchJobs, fetchJobLogs, type EvolutionJob } from "@/lib/api";
+
+const STATUS_COLORS: Record<string, string> = {
+  completed: "text-success",
+  failed: "text-error",
+  running: "text-accent-violet",
+};
+
+export default function LogsPage() {
+  const [wsLogs, setWsLogs] = useState<string[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [jobs, setJobs] = useState<EvolutionJob[]>([]);
+  const [selectedJob, setSelectedJob] = useState<string | null>(null);
+  const [jobLogs, setJobLogs] = useState<string[]>([]);
+  const [jobStatus, setJobStatus] = useState("");
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const logIndex = useRef(0);
+
+  // Load all jobs on mount
+  useEffect(() => {
+    fetchJobs(false).then(setJobs).catch(() => {});
+  }, []);
+
+  // WebSocket for live stream
+  useEffect(() => {
+    let ws: WebSocket | null = null;
+    let cancelled = false;
+
+    wsConnect((data) => {
+      if (cancelled) return;
+      const entry = data as { type: string; message?: string; timestamp?: string; job_id?: string; skill?: string };
+      if (entry.type === "evolution_log" && entry.message) {
+        const ts = entry.timestamp?.slice(11, 19) || "";
+        const skill = entry.skill ? `[${entry.skill}] ` : "";
+        setWsLogs((prev) => [...prev.slice(-1000), `${ts} ${skill}${entry.message}`]);
+
+        // Refresh jobs list when new activity
+        fetchJobs(false).then(setJobs).catch(() => {});
+      }
+      if (entry.type === "evolution_complete" || entry.type === "evolution_cancelled") {
+        fetchJobs(false).then(setJobs).catch(() => {});
+      }
+    }).then((sock) => {
+      if (cancelled) { sock.close(); return; }
+      ws = sock;
+      sock.onopen = () => setConnected(true);
+      sock.onclose = () => setConnected(false);
+      sock.onerror = () => setConnected(false);
+    });
+
+    return () => { cancelled = true; ws?.close(); };
+  }, []);
+
+  // Load logs for selected job
+  useEffect(() => {
+    if (!selectedJob) {
+      setJobLogs([]);
+      setJobStatus("");
+      return;
+    }
+
+    const job = jobs.find((j) => j.id === selectedJob);
+    if (!job) return;
+
+    // Load initial logs
+    setJobLogs(job.logs || []);
+    logIndex.current = (job.logs || []).length;
+    setJobStatus(job.status);
+
+    // Poll for new logs if job is active
+    const isActive = job.status !== "completed" && job.status !== "failed";
+    if (!isActive) return;
+
+    const interval = setInterval(async () => {
+      try {
+        const data = await fetchJobLogs(selectedJob, logIndex.current);
+        if (data.logs?.length) {
+          setJobLogs((prev) => [...prev, ...data.logs]);
+          logIndex.current = data.total_lines;
+        }
+        setJobStatus(data.status);
+
+        // Refresh jobs list
+        if (data.status === "completed" || data.status === "failed") {
+          fetchJobs(false).then(setJobs).catch(() => {});
+        }
+      } catch {}
+    }, 1500);
+
+    return () => clearInterval(interval);
+  }, [selectedJob, jobs]);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (terminalRef.current) terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+  }, [wsLogs, jobLogs]);
+
+  const activeJobs = jobs.filter((j) => j.status !== "completed" && j.status !== "failed");
+  const completedJobs = jobs.filter((j) => j.status === "completed" || j.status === "failed");
+
+  const formatTime = (iso: string) => {
+    if (!iso) return "";
+    return iso.slice(11, 19);
+  };
+
+  return (
+    <div className="flex gap-6 h-[calc(100vh-4rem)]">
+      {/* Job sidebar */}
+      <div className="w-72 flex-shrink-0 glass-card rounded-2xl flex flex-col overflow-hidden">
+        <div className="px-4 py-4 border-b border-white/[0.06]">
+          <h2 className="text-sm font-semibold uppercase tracking-wider flex items-center gap-2">
+            <Activity className="w-4 h-4 text-accent-violet" />
+            Evolution Jobs
+          </h2>
+          <p className="text-[10px] text-muted-foreground mt-1">{jobs.length} total · {activeJobs.length} active</p>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-2 space-y-1">
+          {/* Live stream option */}
+          <button
+            onClick={() => setSelectedJob(null)}
+            className={`w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all ${
+              selectedJob === null ? "bg-white/[0.06] text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-white/[0.03]"
+            }`}
+          >
+            <div className="flex items-center gap-2">
+              <Wifi className={`w-3 h-3 ${connected ? "text-success" : "text-error"}`} />
+              <span className="font-medium">Live Stream</span>
+            </div>
+            <p className="text-[10px] text-muted-foreground mt-0.5">WebSocket real-time</p>
+          </button>
+
+          {/* Active jobs */}
+          {activeJobs.length > 0 && (
+            <>
+              <p className="text-[10px] text-muted-foreground uppercase tracking-wider px-3 pt-2">Active</p>
+              {activeJobs.map((job) => (
+                <button
+                  key={job.id}
+                  onClick={() => setSelectedJob(job.id)}
+                  className={`w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all ${
+                    selectedJob === job.id ? "bg-white/[0.06] text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-white/[0.03]"
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="w-3 h-3 text-accent-violet animate-spin" />
+                    <span className="truncate">{job.skill_name}</span>
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-[10px] font-mono text-accent-violet">{job.status}</span>
+                    {job.status === "optimizing" && (
+                      <span className="text-[10px] font-mono text-muted-foreground">
+                        {job.current_iteration}/{job.iterations}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </>
+          )}
+
+          {/* Completed jobs */}
+          {completedJobs.length > 0 && (
+            <>
+              <p className="text-[10px] text-muted-foreground uppercase tracking-wider px-3 pt-2">Completed</p>
+              {completedJobs.map((job) => (
+                <button
+                  key={job.id}
+                  onClick={() => setSelectedJob(job.id)}
+                  className={`w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all ${
+                    selectedJob === job.id ? "bg-white/[0.06] text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-white/[0.03]"
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    {job.status === "completed" ? (
+                      <CheckCircle2 className="w-3 h-3 text-success" />
+                    ) : (
+                      <XCircle className="w-3 h-3 text-error" />
+                    )}
+                    <span className="truncate">{job.skill_name}</span>
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-[10px] font-mono text-muted-foreground">{formatTime(job.completed_at || job.started_at)}</span>
+                    {job.improvement !== null && job.improvement !== 0 && (
+                      <span className={`text-[10px] font-mono ${job.improvement > 0 ? "text-success" : "text-error"}`}>
+                        {job.improvement > 0 ? "+" : ""}{(job.improvement * 100).toFixed(1)}%
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </>
+          )}
+
+          {jobs.length === 0 && (
+            <p className="text-xs text-muted-foreground p-4 text-center">No jobs yet. Start an evolution.</p>
+          )}
+        </div>
+      </div>
+
+      {/* Terminal */}
+      <div className="flex-1 glass-card rounded-2xl overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
+          <div className="flex items-center gap-3">
+            <Terminal className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm font-semibold">
+              {selectedJob ? jobs.find((j) => j.id === selectedJob)?.skill_name || "Job" : "Live Stream"}
+            </span>
+            {selectedJob && jobStatus && (
+              <span className={`text-[10px] font-mono px-2 py-0.5 rounded-full ${
+                jobStatus === "completed" ? "bg-success/10 text-success" :
+                jobStatus === "failed" ? "bg-error/10 text-error" :
+                "bg-accent-violet/10 text-accent-violet"
+              }`}>
+                {jobStatus}
+              </span>
+            )}
+            {!selectedJob && (
+              <div className="flex items-center gap-1.5">
+                {connected ? <Wifi className="w-3 h-3 text-success" /> : <WifiOff className="w-3 h-3 text-error" />}
+                <span className="text-[10px] text-muted-foreground">{connected ? "Connected" : "Disconnected"}</span>
+              </div>
+            )}
+          </div>
+          <button
+            onClick={() => selectedJob ? setJobLogs([]) : setWsLogs([])}
+            className="flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs text-muted-foreground hover:text-foreground hover:bg-white/[0.05] transition-colors"
+          >
+            <Trash2 className="w-3 h-3" />
+            Clear
+          </button>
+        </div>
+
+        {/* Log output */}
+        <div ref={terminalRef} className="flex-1 overflow-y-auto p-4 font-mono text-xs leading-relaxed bg-black/30">
+          {(selectedJob ? jobLogs : wsLogs).length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-muted-foreground/40">
+              <Terminal className="w-8 h-8 mb-3" />
+              <p>{selectedJob ? "No logs for this job" : "Waiting for events..."}</p>
+              <p className="text-[10px] mt-1">{selectedJob ? "The job may not have produced output yet" : "Start an evolution to see live output"}</p>
+            </div>
+          ) : (
+            (selectedJob ? jobLogs : wsLogs).map((line, i) => {
+              const isError = /✗|Error|error|FAILED|failed/.test(line);
+              const isSuccess = /✓|completed|Saved/.test(line);
+              const isPhase = /Loaded:|Building|Validating|Configuring|Running|Evaluating|Optimization|GEPA/.test(line);
+              return (
+                <div key={i} className={
+                  isError ? "text-error" :
+                  isSuccess ? "text-success" :
+                  isPhase ? "text-accent-cyan font-semibold" :
+                  "text-muted-foreground/70"
+                }>
+                  {line}
+                </div>
+              );
+            })
+          )}
+          {(!selectedJob || (jobStatus !== "completed" && jobStatus !== "failed")) && (
+            <span className="cursor-blink text-muted-foreground/30" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/pages/MetricsPage.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import {
+  BarChart3,
+  TrendingUp,
+  Clock,
+  Target,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+} from "lucide-react";
+import { fetchMetrics, type MetricsData, type EvolutionRun } from "@/lib/api";
+
+function BarChart({
+  data,
+  label,
+  color,
+}: {
+  data: { label: string; value: number }[];
+  label: string;
+  color: string;
+}) {
+  const max = Math.max(...data.map((d) => d.value), 1);
+  return (
+    <div>
+      <p className="text-xs text-muted-foreground mb-3 uppercase tracking-wider">
+        {label}
+      </p>
+      <div className="space-y-2">
+        {data.map((d, i) => (
+          <div key={i} className="flex items-center gap-3">
+            <span className="text-[10px] font-mono text-muted-foreground w-20 truncate">
+              {d.label}
+            </span>
+            <div className="flex-1 h-4 bg-white/[0.03] rounded-full overflow-hidden">
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${(d.value / max) * 100}%` }}
+                transition={{ delay: i * 0.1, duration: 0.5 }}
+                className="h-full rounded-full"
+                style={{ backgroundColor: color }}
+              />
+            </div>
+            <span className="text-[10px] font-mono text-muted-foreground w-12 text-right">
+              {(d.value * 100).toFixed(0)}%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function MetricsPage() {
+  const [metrics, setMetrics] = useState<MetricsData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchMetrics()
+      .then(setMetrics)
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Aggregate scores by skill
+  const skillScores: Record<string, { total: number; count: number }> = {};
+  metrics?.runs.forEach((run) => {
+    if (!skillScores[run.skill_name])
+      skillScores[run.skill_name] = { total: 0, count: 0 };
+    skillScores[run.skill_name].total += run.evolved_score;
+    skillScores[run.skill_name].count += 1;
+  });
+
+  const skillChartData = Object.entries(skillScores).map(([name, s]) => ({
+    label: name,
+    value: s.total / s.count,
+  }));
+
+  // Improvement per run
+  const improvementData =
+    metrics?.runs.map((run) => ({
+      label: `${run.skill_name} ${run.timestamp?.slice(0, 8) || ""}`,
+      value: run.improvement ?? 0,
+    })) ?? [];
+
+  return (
+    <div className="space-y-6">
+      {/* Summary stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[
+          {
+            label: "Total Runs",
+            value: String(metrics?.total_runs ?? 0),
+            icon: <BarChart3 className="w-4 h-4" />,
+            color: "#8b5cf6",
+          },
+          {
+            label: "Success Rate",
+            value: `${((metrics?.success_rate ?? 0) * 100).toFixed(0)}%`,
+            icon: <Target className="w-4 h-4" />,
+            color: "#22c55e",
+          },
+          {
+            label: "Best Improvement",
+            value: `${((metrics?.best_improvement ?? 0) * 100).toFixed(1)}%`,
+            icon: <TrendingUp className="w-4 h-4" />,
+            color: "#06b6d4",
+          },
+          {
+            label: "Avg Time",
+            value: `${(metrics?.avg_time_seconds ?? 0).toFixed(0)}s`,
+            icon: <Clock className="w-4 h-4" />,
+            color: "#eab308",
+          },
+        ].map((stat, i) => (
+          <motion.div
+            key={stat.label}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.1 }}
+            className="glass-card rounded-2xl p-5"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs text-muted-foreground uppercase tracking-wider">
+                {stat.label}
+              </span>
+              <span style={{ color: stat.color }}>{stat.icon}</span>
+            </div>
+            <p className="text-2xl font-bold font-mono">{stat.value}</p>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <motion.div
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="glass-card rounded-2xl p-6"
+        >
+          <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
+            Score by Skill
+          </h3>
+          {skillChartData.length ? (
+            <BarChart data={skillChartData} label="" color="#8b5cf6" />
+          ) : (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No data yet.
+            </p>
+          )}
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4 }}
+          className="glass-card rounded-2xl p-6"
+        >
+          <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
+            Improvement per Run
+          </h3>
+          {improvementData.length ? (
+            <BarChart data={improvementData} label="" color="#06b6d4" />
+          ) : (
+            <p className="text-sm text-muted-foreground py-8 text-center">
+              No data yet.
+            </p>
+          )}
+        </motion.div>
+      </div>
+
+      {/* Full run table */}
+      <motion.div
+        initial={{ opacity: 0, y: 15 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.5 }}
+        className="glass-card rounded-2xl p-6"
+      >
+        <h3 className="text-sm font-semibold uppercase tracking-wider mb-4">
+          All Runs
+        </h3>
+        {loading ? (
+          <div className="flex justify-center py-8">
+            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          </div>
+        ) : metrics?.runs?.length ? (
+          <div className="overflow-x-auto">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="text-muted-foreground border-b border-white/[0.06]">
+                  <th className="text-left py-2 px-3">Status</th>
+                  <th className="text-left py-2 px-3">Skill</th>
+                  <th className="text-left py-2 px-3">Timestamp</th>
+                  <th className="text-right py-2 px-3">Baseline</th>
+                  <th className="text-right py-2 px-3">Evolved</th>
+                  <th className="text-right py-2 px-3">Δ</th>
+                  <th className="text-right py-2 px-3">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {metrics.runs.map((run, i) => (
+                  <tr
+                    key={i}
+                    className="border-b border-white/[0.03] hover:bg-white/[0.02]"
+                  >
+                    <td className="py-2 px-3">
+                      {run.constraints_passed ? (
+                        <CheckCircle2 className="w-3.5 h-3.5 text-success" />
+                      ) : (
+                        <XCircle className="w-3.5 h-3.5 text-error" />
+                      )}
+                    </td>
+                    <td className="py-2 px-3 font-medium">{run.skill_name}</td>
+                    <td className="py-2 px-3 font-mono text-muted-foreground">
+                      {run.timestamp}
+                    </td>
+                    <td className="py-2 px-3 text-right font-mono">
+                      {(run.baseline_score * 100).toFixed(0)}%
+                    </td>
+                    <td className="py-2 px-3 text-right font-mono text-accent-violet">
+                      {(run.evolved_score * 100).toFixed(0)}%
+                    </td>
+                    <td className="py-2 px-3 text-right font-mono">
+                      {(run.improvement ?? 0) > 0 ? "+" : ""}
+                      {((run.improvement ?? 0) * 100).toFixed(1)}%
+                    </td>
+                    <td className="py-2 px-3 text-right font-mono text-muted-foreground">
+                      {run.elapsed_seconds?.toFixed(0)}s
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground py-8 text-center">
+            No runs recorded.
+          </p>
+        )}
+      </motion.div>
+    </div>
+  );
+}