@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/providers/models/ModelList.tsx

@@ -1,51 +0,0 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { useProviders } from "@/hooks/useProviders";
-import { ModelCard } from "./ModelCard";
-import { Search } from "lucide-react";
-import { useState } from "react";
-
-export function ModelList() {
-  const { availableModels, providers } = useProviders();
-  const [filter, setFilter] = useState("");
-  const [providerFilter, setProviderFilter] = useState("all");
-
-  const filtered = availableModels.filter((m) => {
-    const matchesSearch = m.name.toLowerCase().includes(filter.toLowerCase()) || m.id.toLowerCase().includes(filter.toLowerCase());
-    const matchesProvider = providerFilter === "all" || m.providerId === providerFilter || m.provider_id === providerFilter;
-    return matchesSearch && matchesProvider;
-  });
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold">Modelos Disponibles</h3>
-        <Badge variant="secondary">{filtered.length}</Badge>
-      </div>
-      <div className="flex gap-2">
-        <div className="relative flex-1">
-          <Search className="absolute left-2 top-2 h-4 w-4 text-muted-foreground" />
-          <Input placeholder="Buscar modelo..." className="h-8 pl-8 text-sm" value={filter} onChange={(e) => setFilter(e.target.value)} />
-        </div>
-        <Select value={providerFilter} onValueChange={setProviderFilter}>
-          <SelectTrigger className="h-8 w-40 text-sm"><SelectValue placeholder="Provider" /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">Todos</SelectItem>
-            {providers.map((p) => (
-              <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <ScrollArea className="h-[calc(100vh-20rem)]">
-        <div className="space-y-2">
-          {filtered.map((model) => (
-            <ModelCard key={model.id} model={model} />
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/providers/models/ModelPricingInfo.tsx

@@ -1,17 +0,0 @@
-import type { ModelPricing } from "@/types";
-
-interface ModelPricingInfoProps {
-  pricing: ModelPricing;
-}
-
-export function ModelPricingInfo({ pricing }: ModelPricingInfoProps) {
-  if (pricing.inputPer1M === 0 && pricing.outputPer1M === 0) {
-    return <span className="text-xs font-medium text-hive-connected">Gratis (local)</span>;
-  }
-  return (
-    <div className="text-right text-[10px] text-muted-foreground">
-      <p>In: ${pricing.inputPer1M}/1M</p>
-      <p>Out: ${pricing.outputPer1M}/1M</p>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/providers/models/ModelSelector.tsx

@@ -1,32 +0,0 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { useProviders } from "@/hooks/useProviders";
-import type { Model } from "@/types";
-
-interface ModelSelectorProps {
-  value?: string;
-  onSelect?: (modelId: string) => void;
-  providerFilter?: string;
-}
-
-export function ModelSelector({ value, onSelect, providerFilter }: ModelSelectorProps) {
-  const { availableModels } = useProviders();
-  const models = providerFilter ? availableModels.filter((m) => m.providerId === providerFilter) : availableModels;
-
-  return (
-    <Select value={value} onValueChange={onSelect}>
-      <SelectTrigger className="h-8 text-sm">
-        <SelectValue placeholder="Seleccionar modelo..." />
-      </SelectTrigger>
-      <SelectContent>
-        {models.map((model) => (
-          <SelectItem key={model.id} value={model.id}>
-            <span className="flex items-center gap-2">
-              <span>{model.name}</span>
-              <span className="text-muted-foreground">({model.providerId})</span>
-            </span>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}

package/packages/hive-ui/src/modules/providers/models/index.ts

@@ -1,7 +0,0 @@
-export { ModelList } from "./ModelList";
-export { ModelCard } from "./ModelCard";
-export { ModelSelector } from "./ModelSelector";
-export { ModelPricingInfo } from "./ModelPricingInfo";
-export { ModelCapabilities } from "./ModelCapabilities";
-export { ModelBenchmarkBadge } from "./ModelBenchmarkBadge";
-export { ModelComparisonTable } from "./ModelComparisonTable";

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

@@ -1,74 +0,0 @@
-import { useParams, useNavigate } from "react-router-dom";
-import { AgentDetailsEditor } from "@/modules/agent-config/details/AgentDetailsEditor";
-import { AgentInternalCard } from "@/modules/agents/AgentInternalCard";
-import { useAgents } from "@/stores/useGlobalConfigStore";
-import { ChevronLeft, LayoutGrid, Activity } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useEffect } from "react";
-
-export function AgentDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const agentId = id ?? "unknown";
-  const { agents, fetchAgents, isLoading } = useAgents();
-
-  useEffect(() => {
-    fetchAgents();
-  }, [fetchAgents]);
-
-  const agent = agents.find(a => a.id === agentId);
-
-  return (
-    <div className="min-h-screen bg-transparent pb-20">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
-
-        {/* Navigation Header */}
-        <div className="flex items-center justify-between mb-8">
-          <Button
-            variant="ghost"
-            onClick={() => navigate("/agents")}
-            className="group flex items-center gap-2 text-white/40 hover:text-white hover:bg-white/5 px-4 py-2 rounded-xl transition-all"
-          >
-            <ChevronLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
-            <span className="text-sm font-bold uppercase tracking-widest">Volver a la Colmena</span>
-          </Button>
-
-          <div className="flex items-center gap-4 text-white/20">
-            <div className="flex items-center gap-2">
-              <LayoutGrid className="h-4 w-4" />
-              <span className="text-[10px] font-bold uppercase tracking-widest">Agentes</span>
-            </div>
-            <div className="h-4 w-px bg-white/10" />
-            <div className="flex items-center gap-2">
-              <Activity className="h-4 w-4" />
-              <span className="text-[10px] font-bold uppercase tracking-widest">Detalles Operativos</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Hero Card */}
-        {agent ? (
-          <>
-            <AgentInternalCard agent={agent} />
-            <div className="grid grid-cols-1 gap-8">
-              <AgentDetailsEditor agentId={agentId} />
-            </div>
-          </>
-        ) : (
-          <div className="flex flex-col items-center justify-center h-[60vh] text-center space-y-6">
-            <div className="relative">
-              <div className="h-24 w-24 rounded-full border-4 border-t-blue-500 border-white/5 animate-spin" />
-              <Activity className="absolute inset-0 m-auto h-8 w-8 text-blue-400 animate-pulse" />
-            </div>
-            <div>
-              <h3 className="text-xl font-bold text-white mb-2">Sincronizando con el Nodo</h3>
-              <p className="text-white/40 max-w-xs mx-auto">
-                Estamos recuperando la configuración cuántica de este agente desde la base de datos central.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,5 +0,0 @@
-import { AgentCreateForm } from "@/modules/agents/AgentCreateForm";
-
-export function AgentNewPage() {
-  return <AgentCreateForm />;
-}

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

@@ -1,147 +0,0 @@
-import { useEffect, useState } from "react";
-import { AgentList } from "@/modules/agents/AgentList";
-import { AgentCreateForm } from "@/modules/agents/AgentCreateForm";
-import { Plus, RefreshCw, type LucideProps, X, Bot } from "lucide-react";
-import { useAgents } from "@/stores/useGlobalConfigStore";
-import type { Agent } from "@/types";
-
-// Wrapper to fix React 19 + Lucide type compatibility
-function Icon({ icon: IconComponent, ...props }: { icon: React.ComponentType<LucideProps> } & LucideProps) {
-  return <IconComponent {...props} />;
-}
-
-export function AgentsPage() {
-  const { agents, isLoading, error, fetchAgents } = useAgents();
-  const [isFormOpen, setIsFormOpen] = useState(false);
-  const [editingAgent, setEditingAgent] = useState<Agent | undefined>(undefined);
-
-  useEffect(() => {
-    fetchAgents();
-  }, [fetchAgents]);
-
-  const handleEdit = (agent: Agent) => {
-    setEditingAgent(agent);
-    setIsFormOpen(true);
-  };
-
-  const handleCreate = () => {
-    setEditingAgent(undefined);
-    setIsFormOpen(true);
-  };
-
-  const handleSuccess = () => {
-    setIsFormOpen(false);
-    setEditingAgent(undefined);
-  };
-
-  return (
-    <div className="hive-page mt-10 animate-in fade-in duration-700">
-      <div className="hive-page-container">
-        {/* Header Section */}
-        <div className="hive-page-header flex flex-col sm:flex-row sm:items-end justify-between gap-6 relative z-10 mb-8">
-          <div className="relative z-10 animate-in slide-in-from-left-8 duration-700">
-            <div className="hive-page-header__eyebrow mb-3 opacity-80">
-              <div className="hive-page-header__dot animate-pulse shadow-[0_0_10px_rgba(59,130,246,0.6)]" />
-              <span className="hive-page-header__label tracking-widest font-semibold text-blue-400">NEXO CENTRAL</span>
-            </div>
-            <h2 className="text-4xl md:text-5xl font-black tracking-tight text-white drop-shadow-lg mb-4">
-              Agentes <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Inteligentes</span>
-            </h2>
-            <p className="text-white/60 text-sm max-w-xl leading-relaxed font-light">
-              Configura y despliega inteligencias autónomas. Cada nodo amplía las capacidades de tu infraestructura personal y de negocio con precisión absoluta.
-            </p>
-          </div>
-
-          <div className="flex items-center gap-3 relative z-10 animate-in slide-in-from-right-8 duration-700">
-            <button
-              className="px-4 py-2 bg-white/5 hover:bg-white/10 text-white/70 hover:text-white rounded-lg border border-white/10 hover:border-white/20 transition-all duration-300 flex items-center gap-2 font-medium text-sm backdrop-blur-sm group"
-              onClick={() => fetchAgents()}
-              disabled={isLoading}
-            >
-              <RefreshCw className={`h-4 w-4 transition-transform duration-500 group-hover:rotate-180 text-blue-400 ${isLoading ? "animate-spin" : ""}`} />
-              <span>Sincronizar</span>
-            </button>
-
-            <button
-              onClick={handleCreate}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg border border-blue-500/50 hover:border-blue-400/50 shadow-[0_0_15px_rgba(37,99,235,0.3)] hover:shadow-[0_0_25px_rgba(59,130,246,0.5)] transition-all duration-300 flex items-center gap-2 font-medium text-sm group"
-            >
-              <Plus className="h-4 w-4 transition-transform duration-300 group-hover:rotate-90" />
-              <span>Desplegar Nodo</span>
-            </button>
-          </div>
-        </div>
-
-        {/* Content Section */}
-        <div className="relative mt-8">
-          {/* Ambient Glows */}
-          <div className="absolute -top-40 -left-40 h-[500px] w-[500px] bg-blue-600/10 rounded-full blur-[120px] pointer-events-none mix-blend-screen opacity-50" />
-          <div className="absolute top-40 -right-40 h-[400px] w-[400px] bg-purple-600/10 rounded-full blur-[100px] pointer-events-none mix-blend-screen opacity-50" />
-
-          {error ? (
-            <div className="relative overflow-hidden rounded-2xl border border-red-500/20 bg-red-500/5 backdrop-blur-lg">
-              <div className="absolute top-0 left-0 w-1 h-full bg-red-500" />
-              <div className="px-6 py-5 flex items-center gap-4 text-red-400 relative z-10">
-                <div className="p-3 rounded-xl bg-red-500/10 border border-red-500/20 shadow-[0_0_15px_rgba(239,68,68,0.15)]">
-                  <X className="h-6 w-6" />
-                </div>
-                <div>
-                  <p className="text-sm font-bold uppercase tracking-widest drop-shadow-sm">Error de Enlace</p>
-                  <p className="text-sm text-red-300/70 mt-1 font-light">{error}</p>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="relative z-10">
-              {isLoading && agents.length === 0 ? (
-                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                  {[1, 2, 3].map((i) => (
-                    <div key={i} className="h-64 rounded-2xl border border-white/5 bg-white/[0.02] animate-pulse" />
-                  ))}
-                </div>
-              ) : agents.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-20 px-4 text-center border border-white/5 rounded-3xl bg-black/20 backdrop-blur-sm animate-in fade-in duration-1000">
-                  <div className="h-20 w-20 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mb-6 shadow-[0_0_30px_rgba(59,130,246,0.15)]">
-                    <Bot className="h-10 w-10 text-blue-400" />
-                  </div>
-                  <h3 className="text-xl font-bold text-white mb-2">Colmena inactiva</h3>
-                  <p className="text-white/50 max-w-md mx-auto mb-8 leading-relaxed">
-                    La red neuronal está esperando ser poblada. Despliega tu primer nodo agente para comenzar a automatizar tus operaciones.
-                  </p>
-                  <button
-                    onClick={handleCreate}
-                    className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl border border-blue-500/50 hover:border-blue-400/50 shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-all duration-300 flex items-center gap-2 font-bold group"
-                  >
-                    <Plus className="h-5 w-5 transition-transform duration-300 group-hover:scale-125" />
-                    <span>INICIAR DESPLIEGUE</span>
-                  </button>
-                </div>
-              ) : (
-                <div className="animate-in slide-in-from-bottom-8 duration-1000 fade-in fill-mode-both">
-                  <AgentList agents={agents} onEdit={handleEdit} />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Modern Overlay Form */}
-      {isFormOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 animate-in fade-in duration-300">
-          <div
-            className="absolute inset-0 bg-black/60 backdrop-blur-md transition-opacity"
-            onClick={() => setIsFormOpen(false)}
-          />
-          <div className="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-[#09090b] border border-white/10 rounded-2xl shadow-2xl animate-in zoom-in-95 duration-300">
-            <AgentCreateForm
-              initialData={editingAgent}
-              onSuccess={handleSuccess}
-              onCancel={() => setIsFormOpen(false)}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,83 +0,0 @@
-import { useEffect } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { BridgeStatus } from "@/modules/bridge/BridgeStatus";
-import { BridgeProcessList } from "@/modules/bridge/BridgeProcessList";
-import { BridgeLogViewer } from "@/modules/bridge/BridgeLogViewer";
-import { useBridgeStore } from "@/stores/bridgeStore";
-import { RefreshCw, Terminal } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export function BridgePage() {
-  const { isConnected, connect, connectGateway, processes, logs } = useBridgeStore();
-
-  useEffect(() => {
-    connect();
-    connectGateway();
-  }, [connect, connectGateway]);
-
-  const status: "connected" | "connecting" | "disconnected" | "error" = isConnected
-    ? "connected"
-    : "disconnected";
-
-  const runningCount = processes.filter((p) => p.status === "running").length;
-
-  return (
-    <div className="hive-page mt-10">
-      <div className="hive-page-container">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-xl font-semibold flex items-center gap-2">
-              <Terminal className="h-5 w-5" />
-              Code Bridge
-            </h1>
-            <p className="text-sm text-muted-foreground mt-0.5">
-              Monitoreo de comandos CLI y procesos del agente
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            {runningCount > 0 && (
-              <span className="text-xs text-yellow-400 font-mono">
-                {runningCount} proceso{runningCount > 1 ? "s" : ""} activo{runningCount > 1 ? "s" : ""}
-              </span>
-            )}
-            <BridgeStatus status={status} />
-            <Button variant="outline" size="sm" onClick={() => { connect(); connectGateway(); }}>
-              <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
-              Reconectar
-            </Button>
-          </div>
-        </div>
-
-        {/* Main content */}
-        <div className="mt-4 grid grid-cols-1 lg:grid-cols-2 gap-4 h-[calc(100vh-14rem)]">
-          {/* Processes */}
-          <Card className="flex flex-col overflow-hidden">
-            <CardHeader className="py-3 px-4 border-b">
-              <CardTitle className="text-sm flex items-center justify-between">
-                <span>Procesos</span>
-                <span className="text-xs text-muted-foreground font-normal">{processes.length} total</span>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="flex-1 overflow-y-auto p-2">
-              <BridgeProcessList />
-            </CardContent>
-          </Card>
-
-          {/* Logs */}
-          <Card className="flex flex-col overflow-hidden">
-            <CardHeader className="py-3 px-4 border-b">
-              <CardTitle className="text-sm flex items-center justify-between">
-                <span>Logs</span>
-                <span className="text-xs text-muted-foreground font-normal">{logs.length} entradas</span>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="flex-1 overflow-hidden p-0">
-              <BridgeLogViewer />
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,32 +0,0 @@
-import { useParams } from "react-router-dom";
-import { CanvasContainer } from "@/modules/canvas/CanvasContainer";
-import { useUserStore } from "@/stores/userStore";
-
-export function CanvasPage() {
-  const { sessionId: paramSessionId } = useParams<{ sessionId: string }>();
-  const { currentUser } = useUserStore();
-
-  // Priorizar el ID del usuario real si el parámetro es "default" o no existe
-  const sessionId = (paramSessionId && paramSessionId !== "default") ? paramSessionId : currentUser?.id;
-
-  if (!sessionId) {
-    return (
-      <div className="flex h-[calc(100vh-4rem)] items-center justify-center">
-        <div className="flex flex-col items-center gap-2">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          <p className="text-sm text-muted-foreground">Cargando sesión...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col bg-background/50 backdrop-blur-sm">
-      <div className="flex-1 overflow-hidden p-4 lg:p-8">
-        <div className="mx-auto h-full max-w-7xl">
-          <CanvasContainer sessionId={sessionId} />
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,176 +0,0 @@
-import { useState, useEffect, useMemo } from "react";
-import { Plus, RefreshCw, Layers, Zap, Info } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { useChannels } from "@/hooks/useChannels";
-import { ChannelCard } from "@/modules/channels/shared/ChannelCard";
-import { ChannelConfigDialog } from "@/modules/channels/shared/ChannelConfigDialog";
-import type { ConnectedChannel } from "@/types";
-
-export function ChannelsPage() {
-  const {
-    channels,
-    activeChannels,
-    fetchChannels,
-    isLoading,
-    toggleChannel,
-    updateChannel
-  } = useChannels();
-
-  const [activeTab, setActiveTab] = useState("all");
-  const [selectedChannel, setSelectedChannel] = useState<ConnectedChannel | null>(null);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  useEffect(() => {
-    fetchChannels();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const filteredChannels = useMemo(() => {
-    if (activeTab === "all") return channels;
-    if (activeTab === "active") return channels.filter(c => c.active);
-    if (activeTab === "inactive") return channels.filter(c => !c.active);
-    return channels;
-  }, [channels, activeTab]);
-
-  const handleEdit = (channel: ConnectedChannel) => {
-    setSelectedChannel(channel);
-    setIsDialogOpen(true);
-  };
-
-  const handleAdd = () => {
-    setSelectedChannel(null);
-    setIsDialogOpen(true);
-  };
-
-  const handleSave = async (id: string, data: Partial<ConnectedChannel>) => {
-    if (id === "new") {
-      // Logic for adding new channel would go here (API POST)
-      console.log("Add new channel", data);
-    } else {
-      await updateChannel(id, data);
-    }
-  };
-
-  return (
-    <div className="hive-page-container animate-fade-in mt-10">
-
-      {/* ── Header ────────────────────────────────────────────────────────── */}
-      <div className="hive-page-header">
-        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
-          <div>
-            <div className="flex items-center gap-3 mb-2">
-              <div className="h-10 w-10 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400">
-                <Layers className="h-6 w-6" />
-              </div>
-              <h1 className="text-3xl font-black text-white uppercase tracking-tighter">Canales</h1>
-            </div>
-            <p className="hive-subtitle">
-              Gestiona tus puntos de entrada y salida de comunicación en la red Hive.
-            </p>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => fetchChannels()}
-              disabled={isLoading}
-              className="hive-btn hive-btn--ghost px-6 text-[10px]"
-            >
-              <RefreshCw className={`h-3.5 w-3.5 mr-2 ${isLoading ? "animate-spin" : ""}`} />
-              SINCRONIZAR
-            </button>
-            <button
-              onClick={handleAdd}
-              className="hive-btn hive-btn--primary px-8 text-[10px]"
-            >
-              <Plus className="h-3.5 w-3.5 mr-2" />
-              NUEVO CANAL
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="hive-card border-blue-500/10 !bg-blue-500/[0.02] mb-8 overflow-hidden relative">
-        <div className="hive-card-body py-4 px-6 flex items-center justify-between relative z-10">
-          <div className="flex items-center gap-4">
-            <div className="h-8 w-8 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-400">
-              <Zap className="h-4 w-4" />
-            </div>
-            <div>
-              <p className="text-[10px] font-black tracking-widest text-blue-500/50 uppercase">Estado Operativo</p>
-              <p className="text-xs text-white/60">
-                Actualmente tienes <span className="text-blue-400 font-black">{activeChannels.length}</span> canales procesando datos.
-              </p>
-            </div>
-          </div>
-          <div className="text-[10px] text-white/20 font-black tracking-widest uppercase">
-            HIVE NODE SECURE
-          </div>
-        </div>
-        <div className="hive-glow-blob hive-glow-blob--blue -top-10 -right-10 h-32 w-32 opacity-10" />
-      </div>
-
-      <div className="flex items-center gap-1.5 p-1 bg-white/5 rounded-2xl w-fit border border-white/5 mb-8">
-        {[
-          { id: "all", label: `TODOS (${channels.length})` },
-          { id: "active", label: "ACTIVOS" },
-          { id: "inactive", label: "INACTIVOS" }
-        ].map(tab => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={`px-8 py-2.5 rounded-xl text-[10px] font-black tracking-widest uppercase transition-all duration-300 ${activeTab === tab.id
-              ? 'bg-blue-500 text-white shadow-blue-glow'
-              : 'text-white/20 hover:text-white/40 hover:bg-white/5'
-              }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="animate-fade-in">
-        {filteredChannels.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {filteredChannels.map((channel) => (
-              <ChannelCard
-                key={channel.id}
-                channel={channel}
-                onEdit={handleEdit}
-                onToggle={toggleChannel}
-              />
-            ))}
-          </div>
-        ) : (
-          <div className="hive-card border-dashed border-white/10 bg-white/[0.02]">
-            <div className="hive-card-body flex flex-col items-center justify-center py-20 px-4">
-              <div className="h-20 w-20 rounded-2xl bg-white/5 flex items-center justify-center mb-6">
-                <Layers className="h-10 w-10 text-white/10" />
-              </div>
-              <div className="text-center">
-                <p className="hive-title-section text-center mb-2">No se detectaron canales</p>
-                <p className="text-xs text-white/40 mb-8 max-w-[300px] mx-auto leading-relaxed">
-                  Configura tu primer punto de enlace para empezar a recibir datos en tiempo real.
-                </p>
-                <button
-                  onClick={handleAdd}
-                  className="hive-btn hive-btn--primary px-10 text-[10px]"
-                >
-                  ESTABLECER CONEXIÓNHORA
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <ChannelConfigDialog
-        channel={selectedChannel}
-        isOpen={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
-        onSave={handleSave}
-      />
-    </div>
-  );
-}