@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/pages/DashboardPage.tsx

@@ -1,321 +0,0 @@
-import { useMemo } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import {
-  Bot,
-  Layers,
-  Cable,
-  Activity,
-  ArrowUpRight,
-  type LucideProps
-} from "lucide-react";
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Cell
-} from "recharts";
-import { useQuery } from "@tanstack/react-query";
-import { useWebSocket } from "@/hooks/useWebSocket";
-import { useAgents } from "@/hooks/useAgents";
-import { SystemMonitor } from "@/components/SystemMonitor";
-import { UsageStatsPanel } from "@/components/UsageStatsPanel";
-import { useLoaderStore } from "@/stores/useLoaderStore";
-import { swal, Toast } from "@/lib/swal";
-import { apiClient } from "@/lib/api";
-
-// Wrapper component to fix React 19 + Lucide type compatibility issue
-function Icon({ icon: IconComponent, ...props }: { icon: React.ComponentType<LucideProps> } & LucideProps) {
-  return <IconComponent {...props} />;
-}
-
-interface ActivityData {
-  time: string;
-  count: number;
-}
-
-interface SystemStats {
-  rss?: string;
-  heap?: string;
-  uptime?: number;
-  cpu?: number;
-  memory?: { used: number; total: number; percentage: number };
-  connections?: number;
-  cores?: number;
-}
-
-export function DashboardPage() {
-  const { status: wsStatus } = useWebSocket();
-  const { allAgents } = useAgents();
-
-  const { data: systemStats } = useQuery<SystemStats>({
-    queryKey: ["system-stats"],
-    queryFn: () => apiClient<SystemStats>("/api/system-stats"),
-    refetchInterval: 5000,
-  });
-
-  const { data: activityData = [] } = useQuery<ActivityData[]>({
-    queryKey: ["activity-stats"],
-    queryFn: () => apiClient<ActivityData[]>("/api/activity-stats?hours=12"),
-    refetchInterval: 60000,
-  });
-
-  const agents = useMemo(() => allAgents || [], [allAgents]);
-
-  const statsCards = [
-    { label: "Agentes Activos", value: agents.length, icon: Bot, color: "text-blue-500", trend: `${agents.filter(a => a.status === "active" || a.status === "thinking").length} en uso` },
-    { label: "Sesiones Canvas", value: systemStats?.connections ?? 0, icon: Layers, color: "text-orange-500", trend: "Live" },
-    { label: "Procesos Bridge", value: agents.filter(a => a.status === "thinking").length, icon: Cable, color: "text-purple-500", trend: "Estable" },
-    { label: "Mensajes / 1h", value: activityData.at(-1)?.count ?? 0, icon: Activity, color: "text-green-500", trend: "Última hora" },
-  ];
-
-  const agentStatusData = useMemo(() => {
-    const idle = agents.filter(a => a.status === "idle" || a.status === "hibernated").length;
-    const active = agents.filter(a => a.status === "active").length;
-    const thinking = agents.filter(a => a.status === "thinking").length;
-    const error = agents.filter(a => a.status === "error").length;
-    return [
-      { name: "Idle", value: idle || 0, color: "hsl(var(--muted))" },
-      { name: "Active", value: active || 0, color: "hsl(var(--primary))" },
-      { name: "Thinking", value: thinking || 0, color: "hsl(var(--accent))" },
-      ...(error > 0 ? [{ name: "Error", value: error, color: "#ef4444" }] : []),
-    ].filter(d => d.value > 0 || d.name === "Idle");
-  }, [agents]);
-
-  const totalMessages = activityData.reduce((sum, d) => sum + d.count, 0);
-  const systemHealth = systemStats?.memory?.percentage
-    ? Math.max(0, Math.round(100 - systemStats.memory.percentage * 0.3 - (systemStats.cpu || 0) * 0.2))
-    : 100;
-
-  return (
-    <div className="hive-page-container">
-      {/* Header Sección */}
-      <div className="hive-page-header">
-        <div className="relative z-10">
-          <div className="hive-page-header__eyebrow">
-            <div className="hive-page-header__dot" />
-            <span className="hive-page-header__label">SISTEMA OPERATIVO HIVE</span>
-          </div>
-          <h2 className="hive-title-page">
-            Centro de <span className="hive-title-page__accent">Control</span>
-          </h2>
-          <p className="hive-subtitle">
-            Monitoreo en tiempo real del enjambre y estado de los nodos cognitivos.
-          </p>
-        </div>
-
-        <div className="flex items-center gap-6 relative z-10">
-          <div className="flex flex-col items-end">
-            <span className="hive-label mb-1">Estado Hive</span>
-            <div className="flex items-center gap-2">
-              <div className={wsStatus === "connected" ? "hive-status-dot--active" : "hive-status-dot--disabled"} />
-              <span className={wsStatus === "connected" ? "hive-status-label--active" : "hive-status-label--disabled"}>
-                {wsStatus === "connected" ? "EN LÍNEA" : "DESCONECTADO"}
-              </span>
-            </div>
-          </div>
-          <div className="h-10 w-px bg-white/10 hidden sm:block" />
-          <div className="flex flex-col items-end">
-            <span className="hive-label mb-1">Salud Global</span>
-            <span className="text-xl font-black text-blue-400 tracking-tighter">{systemHealth}%</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Sección de Pruebas */}
-      <div className="hive-card border-blue-500/20 bg-blue-500/5 mb-8">
-        <div className="hive-card-body flex flex-col sm:flex-row items-center justify-between gap-6">
-          <div>
-            <h3 className="hive-title-section mb-1">🐝 Terminal de Pruebas (Hive UI)</h3>
-            <p className="text-xs text-white/40">Verifica la integración visual y reactiva del núcleo.</p>
-          </div>
-          <div className="flex flex-wrap gap-3">
-            <button
-              className="hive-btn hive-btn--ghost text-xs"
-              onClick={() => {
-                const { showLoader, hideLoader } = useLoaderStore.getState();
-                showLoader("Sincronizando con el enjambre...");
-                setTimeout(hideLoader, 3000);
-              }}
-            >
-              Simular Carga
-            </button>
-            <button
-              className="hive-btn hive-btn--primary text-xs"
-              onClick={() => {
-                swal.fire({
-                  title: "¡Bienvenido a la Colmena!",
-                  text: "El sistema de alertas SweetAlert2 está configurado con éxito.",
-                  icon: "success",
-                  confirmButtonText: "¡Excelente!",
-                });
-              }}
-            >
-              Lanzar Alerta
-            </button>
-            <button
-              className="hive-btn hive-btn--ghost text-xs border-purple-500/20 text-purple-400"
-              onClick={() => {
-                Toast.fire({
-                  icon: "info",
-                  title: "Miel recolectada con éxito"
-                });
-              }}
-            >
-              Notificación Toast
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Grilla de Estadísticas */}
-      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-8">
-        {statsCards.map((card) => (
-          <div key={card.label} className="hive-card hive-card--active group">
-            <div className="hive-card-body">
-              <div className="flex flex-row items-center justify-between mb-4">
-                <span className="hive-title-section">{card.label}</span>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <Icon icon={card.icon} className={`h-4 w-4 ${card.color}`} />
-                </div>
-              </div>
-              <div className="flex items-end justify-between">
-                <div>
-                  <div className="text-3xl font-black text-white group-hover:text-blue-400 transition-colors">
-                    {card.value}
-                  </div>
-                  <p className="text-[10px] font-bold text-white/30 uppercase tracking-widest mt-1 flex items-center gap-1">
-                    <ArrowUpRight className="h-2.5 w-2.5 text-green-500" />
-                    {card.trend}
-                  </p>
-                </div>
-                <div className="h-8 w-8 rounded-full border border-white/5 bg-white/5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-                  <ArrowUpRight className="h-4 w-4 text-blue-400" />
-                </div>
-              </div>
-            </div>
-            <div className="hive-strip--bottom" />
-          </div>
-        ))}
-      </div>
-
-      {/* System Monitor - Real-time metrics */}
-      <SystemMonitor />
-
-      {/* Usage Stats - Tokens and Costs */}
-      <UsageStatsPanel />
-
-      {/* Sección de Gráficos */}
-      <div className="grid gap-6 lg:grid-cols-3 mb-8">
-        {/* Actividad */}
-        <div className="lg:col-span-2 hive-card">
-          <div className="hive-card-body !pb-0">
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <h3 className="hive-title-section">Actividad del Enjambre</h3>
-                <p className="text-[10px] text-white/40 uppercase tracking-widest font-bold">
-                  Últimas 12 horas · {totalMessages} mensajes
-                </p>
-              </div>
-              <Activity className="h-5 w-5 text-blue-500 animate-pulse shadow-blue-glow" />
-            </div>
-            <div className="h-[280px] w-full">
-              {activityData.length > 0 ? (
-                <ResponsiveContainer width="100%" height="100%">
-                  <AreaChart data={activityData}>
-                    <defs>
-                      <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.2} />
-                        <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
-                      </linearGradient>
-                    </defs>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.05)" />
-                    <XAxis
-                      dataKey="time"
-                      axisLine={false}
-                      tickLine={false}
-                      tick={{ fill: 'rgba(255,255,255,0.3)', fontSize: 10, fontWeight: 'bold' }}
-                    />
-                    <YAxis
-                      axisLine={false}
-                      tickLine={false}
-                      tick={{ fill: 'rgba(255,255,255,0.3)', fontSize: 10, fontWeight: 'bold' }}
-                      allowDecimals={false}
-                    />
-                    <Tooltip
-                      contentStyle={{ backgroundColor: '#09090b', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.1)', color: '#fff' }}
-                      itemStyle={{ color: '#3b82f6' }}
-                      formatter={(v: number) => [v, "Mensajes"]}
-                    />
-                    <Area
-                      type="monotone"
-                      dataKey="count"
-                      stroke="#3b82f6"
-                      strokeWidth={4}
-                      fillOpacity={1}
-                      fill="url(#colorCount)"
-                    />
-                  </AreaChart>
-                </ResponsiveContainer>
-              ) : (
-                <div className="h-full flex items-center justify-center text-white/30 text-sm">
-                  Cargando actividad...
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Distribución */}
-        <div className="hive-card">
-          <div className="hive-card-body">
-            <h3 className="hive-title-section mb-6">Distribución de Agentes</h3>
-            <div className="h-[210px]">
-              {agentStatusData.length > 0 ? (
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={agentStatusData} layout="vertical">
-                    <XAxis type="number" hide allowDecimals={false} />
-                    <YAxis
-                      dataKey="name"
-                      type="category"
-                      axisLine={false}
-                      tickLine={false}
-                      tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 10, fontWeight: 'bold' }}
-                      width={70}
-                    />
-                    <Tooltip cursor={{ fill: 'rgba(255,255,255,0.02)' }} />
-                    <Bar dataKey="value" radius={[0, 8, 8, 0]} barSize={16}>
-                      {agentStatusData.map((entry) => (
-                        <Cell key={entry.name} fill={entry.color} />
-                      ))}
-                    </Bar>
-                  </BarChart>
-                </ResponsiveContainer>
-              ) : (
-                <div className="h-full flex items-center justify-center text-white/30 text-sm">
-                  Sin agentes configurados
-                </div>
-              )}
-            </div>
-
-            <div className="mt-4 pt-4 border-t border-white/5 grid grid-cols-2 gap-4">
-              <div className="hive-stat">
-                <span className="hive-stat__label">Salud Monitor</span>
-                <span className="hive-stat__value hive-stat__value--active">Óptima</span>
-              </div>
-              <div className="hive-stat">
-                <span className="hive-stat__label">Uptime</span>
-                <span className="hive-stat__value hive-stat__value--active">{systemStats?.uptime ?? "—"}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/pages/Index.tsx

@@ -1,14 +0,0 @@
-// Update this page (the content is just a fallback if you fail to update the page)
-
-const Index = () => {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
-      </div>
-    </div>
-  );
-};
-
-export default Index;

package/packages/hive-ui/src/pages/LogsPage.tsx

@@ -1,252 +0,0 @@
-import { useEffect, useState, useRef, useMemo } from "react";
-import { apiClient } from "@/lib/api";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { RefreshCw, Search, Trash2, Pause, Play, Activity } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import { useWebSocket } from "@/hooks/useWebSocket";
-
-interface LogEntry {
-  timestamp: string;
-  level: "debug" | "info" | "warn" | "error";
-  source: string;
-  message: string;
-  meta?: Record<string, unknown>;
-}
-
-export function LogsPage() {
-  const [logs, setLogs] = useState<LogEntry[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterLevels, setFilterLevels] = useState<string[]>(["info", "warn", "error"]);
-  const [isPaused, setIsPaused] = useState(false);
-  const [autoScroll, setAutoScroll] = useState(true);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const { url, status, subscribe, send } = useWebSocket();
-
-  const parseRawLog = (line: string): LogEntry => {
-    // Attempt to parse standard format: [timestamp] [CORR] [LEVEL] message {meta}
-    // Simple regex for [timestamp] [LEVEL] message
-    const match = line.match(/^\[(.*?)\]\s?(?:\[.*?\])?\s?\[(DEBUG|INFO|WARN|ERROR)\]\s(.*)$/i);
-    if (match) {
-      const [, timestamp, level, rest] = match;
-      // Check if there is JSON meta at the end
-      let message = rest;
-      let meta: any = undefined;
-      const metaMatch = rest.match(/^(.*)\s({.*})$/);
-      if (metaMatch) {
-        message = metaMatch[1];
-        try { meta = JSON.parse(metaMatch[2]); } catch { /* ignore */ }
-      }
-      return {
-        timestamp,
-        level: level.toLowerCase() as any,
-        source: "core",
-        message,
-        meta
-      };
-    }
-    return {
-      timestamp: new Date().toISOString(),
-      level: "info",
-      source: "unknown",
-      message: line
-    };
-  };
-
-
-
-
-
-  useEffect(() => {
-    if (status !== "connected") return;
-
-    // Send subscription command
-    send({ type: "logs_subscribe" });
-
-    const unsubscribe = subscribe("log", (data) => {
-      if (isPaused) return;
-      if (data.logEntry) {
-        setLogs(prev => {
-          const newLogs = [...prev, data.logEntry];
-          // Keep last 2000 logs
-          return newLogs.slice(-2000);
-        });
-      }
-    });
-
-    return () => {
-      send({ type: "logs_unsubscribe" });
-      unsubscribe();
-    };
-  }, [status, subscribe, send, isPaused]);
-
-  // Auto-scroll logic
-  useEffect(() => {
-    if (autoScroll && scrollRef.current) {
-      const viewport = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
-      if (viewport) {
-        viewport.scrollTop = viewport.scrollHeight;
-      }
-    }
-  }, [logs, autoScroll]);
-
-  const toggleLevel = (level: string) => {
-    setFilterLevels(prev =>
-      prev.includes(level) ? prev.filter(l => l !== level) : [...prev, level]
-    );
-  };
-
-  const filteredLogs = useMemo(() => {
-    return logs.filter(log => {
-      const matchesLevel = filterLevels.includes(log.level);
-      const matchesSearch = log.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (log.meta && JSON.stringify(log.meta).toLowerCase().includes(searchTerm.toLowerCase()));
-      return matchesLevel && matchesSearch;
-    });
-  }, [logs, filterLevels, searchTerm]);
-
-  const getLevelColor = (level: string) => {
-    switch (level) {
-      case "error": return "bg-red-500/10 text-red-500 border-red-500/20";
-      case "warn": return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20";
-      case "debug": return "bg-slate-500/10 text-slate-500 border-slate-500/20";
-      default: return "bg-blue-500/10 text-blue-500 border-blue-500/20";
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-[calc(100vh-8rem)] space-y-4 mt-10">
-      {/* Header & Controls */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Logs del Sistema</h2>
-          <p className="text-muted-foreground">Monitoreo en tiempo real de la actividad del enjambre.</p>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setIsPaused(!isPaused)}
-            className={isPaused ? "text-yellow-500 border-yellow-500/50 hover:bg-yellow-500/10" : ""}
-          >
-            {isPaused ? <Play className="h-4 w-4 mr-2" /> : <Pause className="h-4 w-4 mr-2" />}
-            {isPaused ? "Renaudar" : "Pausar"}
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => setLogs([])}>
-            <Trash2 className="h-4 w-4 mr-2" />
-            Limpiar
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => { }} disabled={true} className="opacity-50">
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Sincronizado via WS
-          </Button>
-        </div>
-      </div>
-
-      {/* Filters Bar */}
-      <Card className="bg-muted/30">
-        <CardContent className="p-3 flex flex-wrap items-center gap-4">
-          <div className="relative flex-1 min-w-[200px]">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder="Buscar en logs..."
-              className="pl-9 h-9 bg-background"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </div>
-
-          <div className="flex items-center gap-1.5 p-1 bg-background rounded-md border text-xs">
-            {(["debug", "info", "warn", "error"] as const).map(lvl => (
-              <button
-                key={lvl}
-                onClick={() => toggleLevel(lvl)}
-                className={cn(
-                  "px-2 py-1 rounded capitalize transition-colors",
-                  filterLevels.includes(lvl)
-                    ? getLevelColor(lvl).split(" ")[1] + " " + getLevelColor(lvl).split(" ")[0]
-                    : "text-muted-foreground hover:bg-muted"
-                )}
-              >
-                {lvl}
-              </button>
-            ))}
-          </div>
-
-          <label className="flex items-center gap-2 text-xs cursor-pointer select-none">
-            <input
-              type="checkbox"
-              className="sr-only"
-              checked={autoScroll}
-              onChange={() => setAutoScroll(!autoScroll)}
-            />
-            <div
-              className={cn(
-                "w-8 h-4 rounded-full relative transition-colors",
-                autoScroll ? "bg-primary" : "bg-muted border shadow-inner"
-              )}
-            >
-              <div className={cn(
-                "absolute top-0.5 w-3 h-3 rounded-full bg-white transition-all shadow-sm",
-                autoScroll ? "left-[17px]" : "left-0.5"
-              )} />
-            </div>
-            Auto-scroll
-          </label>
-
-          <div className="ml-auto flex items-center gap-2 text-[10px] text-muted-foreground">
-            <div className={cn("w-2 h-2 rounded-full", status === "connected" ? "bg-green-500 animate-pulse" : "bg-red-500")} />
-            {status === "connected" ? "STREAMING" : "OFFLINE"}
-            <span className="mx-1 opacity-30">|</span>
-            {filteredLogs.length} de {logs.length} entradas
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Logs Terminal */}
-      <Card className="flex-1 overflow-hidden border-2">
-        <CardContent className="p-0 h-full bg-black/95">
-          <ScrollArea className="h-full w-full" ref={scrollRef}>
-            <div className="p-4 font-mono text-[11px] leading-relaxed">
-              {filteredLogs.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-20 text-muted-foreground opacity-50">
-                  <Activity className="h-10 w-10 mb-4 stroke-[1]" />
-                  <p>{loading ? "Analizando registros..." : "No se encontraron logs con los filtros activos."}</p>
-                </div>
-              ) : (
-                <div className="space-y-0.5">
-                  {filteredLogs.map((log) => (
-                    <div key={`${log.timestamp}-${log.source}-${log.message.slice(0, 30)}`} className="group flex items-start gap-3 py-0.5 hover:bg-white/5 rounded px-1 transition-colors">
-                      <span className="text-slate-600 shrink-0 select-none hidden md:inline">
-                        {log.timestamp.includes("T") ? log.timestamp.split("T")[1].split(".")[0] : log.timestamp}
-                      </span>
-                      <Badge variant="outline" className={cn("px-1 py-0 h-4 text-[9px] uppercase font-bold shrink-0 border", getLevelColor(log.level))}>
-                        {log.level}
-                      </Badge>
-                      <div className="flex-1 break-all text-slate-300">
-                        <span className="text-slate-500 mr-2">[{log.source}]</span>
-                        {log.message}
-                        {log.meta && (
-                          <span className="text-slate-500 ml-2 italic opacity-60">
-                            {JSON.stringify(log.meta)}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-              <div className="h-4" /> {/* Bottom padding for auto-scroll */}
-            </div>
-          </ScrollArea>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/packages/hive-ui/src/pages/NotFound.tsx

@@ -1,24 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
-
-const NotFound = () => {
-  const location = useLocation();
-
-  useEffect(() => {
-    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
-  }, [location.pathname]);
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-muted">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">404</h1>
-        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
-        <a href="/" className="text-primary underline hover:text-primary/90">
-          Return to Home
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default NotFound;