@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/canvas/CanvasContainer.tsx

@@ -1,360 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import type { CanvasComponent } from "@/types";
-import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Progress } from "@/components/ui/progress";
-import { Activity, Layout, Terminal, User as UserIcon, Wifi, WifiOff, Bot, Server, FolderOpen, CheckCircle2, Circle, Loader2, XCircle, MinusCircle } from "lucide-react";
-import { ComponentRenderer } from "./ComponentRenderer";
-import { useUserStore } from "@/stores/userStore";
-import { useCanvasStore, type GraphNode, type GraphEdge } from "@/stores/canvasStore";
-
-// Use environment variable for gateway URL
-const API_URL = import.meta.env.VITE_API_URL || "http://localhost:18790";
-const GATEWAY_WS_URL = API_URL.replace(/^http/, "ws");
-
-interface CanvasContainerProps {
-  sessionId?: string;
-}
-
-interface GatewayMessage {
-  type: string;
-  sessionId?: string;
-  component?: CanvasComponent;
-  componentId?: string;
-  data?: {
-    nodes?: GraphNode[];
-    edges?: GraphEdge[];
-    id?: string;
-    [key: string]: unknown;
-  };
-}
-
-// --- Graph Node Renderers ---
-
-const STATUS_COLORS: Record<string, string> = {
-  active: "bg-green-500/10 text-green-400 border-green-500/20",
-  pending: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20",
-  in_progress: "bg-yellow-500/10 text-yellow-400 border-yellow-500/20",
-  paused: "bg-gray-500/10 text-gray-400 border-gray-500/20",
-  idle: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
-  completed: "bg-blue-500/10 text-blue-400 border-blue-500/20",
-  done: "bg-blue-500/10 text-blue-400 border-blue-500/20",
-  failed: "bg-red-500/10 text-red-400 border-red-500/20",
-  blocked: "bg-orange-500/10 text-orange-400 border-orange-500/20",
-  running: "bg-green-500/10 text-green-400 border-green-500/20",
-  thinking: "bg-purple-500/10 text-purple-400 border-purple-500/20",
-  tool_call: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
-};
-
-const STATUS_LABELS: Record<string, string> = {
-  active: "Activo",
-  pending: "Pendiente",
-  in_progress: "En progreso",
-  paused: "Pausado",
-  idle: "Disponible",
-  completed: "Completado",
-  done: "Completado",
-  failed: "Fallido",
-  blocked: "Bloqueado",
-  running: "Ejecutando",
-  thinking: "Pensando",
-  tool_call: "Usando Herramienta",
-};
-
-function TaskStatusIcon({ status }: { status: string }) {
-  switch (status) {
-    case "completed": return <CheckCircle2 className="h-3.5 w-3.5 text-green-400" />;
-    case "in_progress": return <Loader2 className="h-3.5 w-3.5 text-yellow-400 animate-spin" />;
-    case "failed": return <XCircle className="h-3.5 w-3.5 text-red-400" />;
-    case "blocked": return <MinusCircle className="h-3.5 w-3.5 text-orange-400" />;
-    default: return <Circle className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-}
-
-function AgentGraphNode({ node }: { node: GraphNode }) {
-  return (
-    <div className="hive-card group">
-      <div className="hive-card-body">
-        <div className="flex items-center gap-2">
-          <div className="hive-icon-wrap hive-icon-wrap--primary">
-            <Bot className="h-3.5 w-3.5" />
-          </div>
-          <span className="text-sm font-medium truncate flex-1">{node.name}</span>
-        </div>
-        <Badge
-          variant="outline"
-          className={`text-[10px] px-1.5 py-0 w-fit mt-2 ${STATUS_COLORS[node.status] ?? "bg-gray-500/10 text-gray-400"}`}
-        >
-          {STATUS_LABELS[node.status] ?? node.status}
-        </Badge>
-      </div>
-    </div>
-  );
-}
-
-function McpGraphNode({ node }: { node: GraphNode }) {
-  return (
-    <div className="hive-card group">
-      <div className="hive-card-body">
-        <div className="flex items-center gap-2">
-          <div className="hive-icon-wrap bg-purple-500/10 border-purple-500/20 text-purple-400">
-            <Server className="h-3.5 w-3.5" />
-          </div>
-          <span className="text-sm font-medium truncate flex-1">{node.name}</span>
-        </div>
-        <Badge
-          variant="outline"
-          className={`text-[10px] px-1.5 py-0 w-fit mt-2 ${STATUS_COLORS[node.status] ?? ""}`}
-        >
-          {STATUS_LABELS[node.status] ?? node.status}
-        </Badge>
-      </div>
-    </div>
-  );
-}
-
-function ProjectGraphNode({ node, tasks }: { node: GraphNode; tasks: GraphNode[] }) {
-  const [expanded, setExpanded] = useState(true);
-  const progress = (node.data?.progress as number) ?? 0;
-  const projectType = (node.data?.projectType as string) ?? "general";
-
-  return (
-    <div className="hive-card overflow-hidden">
-      <button
-        className="w-full flex items-center gap-2.5 p-3 text-left hover:bg-blue-500/10 transition-colors"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <FolderOpen className="h-4 w-4 text-blue-400 shrink-0" />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-medium">{node.name}</span>
-            <Badge variant="outline" className="hive-tag hive-tag--provider text-[10px] px-1.5 py-0">
-              {projectType}
-            </Badge>
-            <Badge
-              variant="outline"
-              className={`text-[10px] px-1.5 py-0 ${STATUS_COLORS[node.status] ?? ""}`}
-            >
-              {STATUS_LABELS[node.status] ?? node.status}
-            </Badge>
-          </div>
-          <div className="flex items-center gap-2 mt-1.5">
-            <Progress value={progress} className="h-1 flex-1" />
-            <span className="text-[11px] text-muted-foreground shrink-0">{progress}%</span>
-          </div>
-        </div>
-      </button>
-
-      {expanded && tasks.length > 0 && (
-        <div className="border-t border-white/10 px-3 py-2 space-y-1.5">
-          {tasks.map((task) => {
-            const taskProgress = (task.data?.progress as number) ?? 0;
-            return (
-              <div key={task.id} className="flex items-center gap-2 py-0.5">
-                <TaskStatusIcon status={task.status} />
-                <span className="text-xs flex-1 text-muted-foreground truncate">{task.name}</span>
-                {task.status === "in_progress" && (
-                  <div className="w-12 shrink-0">
-                    <Progress value={taskProgress} className="h-1" />
-                  </div>
-                )}
-                <span className="text-[10px] text-muted-foreground w-7 text-right shrink-0">{taskProgress}%</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {expanded && tasks.length === 0 && (
-        <div className="border-t border-white/10 px-3 py-2 text-xs text-muted-foreground">
-          Sin tareas
-        </div>
-      )}
-    </div>
-  );
-}
-
-function GraphView({ nodes, edges }: { nodes: GraphNode[]; edges: GraphEdge[] }) {
-  const agentNodes = nodes.filter((n) => n.type === "agent");
-  const mcpNodes = nodes.filter((n) => n.type === "mcp");
-  const projectNodes = nodes.filter((n) => n.type === "project");
-  const taskNodes = nodes.filter((n) => n.type === "task");
-
-  // Map task nodes to their parent project
-  const tasksByProject = new Map<string, GraphNode[]>();
-  for (const edge of edges) {
-    if (edge.edgeType === "contains") {
-      const projectId = edge.source;
-      const taskId = edge.target;
-      const task = taskNodes.find((t) => t.id === taskId);
-      if (task) {
-        if (!tasksByProject.has(projectId)) tasksByProject.set(projectId, []);
-        tasksByProject.get(projectId)!.push(task);
-      }
-    }
-  }
-
-  if (nodes.length === 0) {
-    return (
-      <div className="hive-empty-state">
-        <Activity className="h-10 w-10 opacity-30" />
-        <p className="text-sm mt-3">Sin agentes ni proyectos activos</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Agents row */}
-      {agentNodes.length > 0 && (
-        <div>
-          <p className="hive-label mb-2">
-            Agentes
-          </p>
-          <div className="flex flex-wrap gap-2">
-            {agentNodes.map((n) => <AgentGraphNode key={n.id} node={n} />)}
-          </div>
-        </div>
-      )}
-
-      {/* MCP row */}
-      {mcpNodes.length > 0 && (
-        <div>
-          <p className="hive-label mb-2">
-            MCP Servers
-          </p>
-          <div className="flex flex-wrap gap-2">
-            {mcpNodes.map((n) => <McpGraphNode key={n.id} node={n} />)}
-          </div>
-        </div>
-      )}
-
-      {/* Projects */}
-      {projectNodes.length > 0 && (
-        <div>
-          <p className="hive-label mb-2">
-            Proyectos
-          </p>
-          <div className="space-y-2">
-            {projectNodes.map((n) => (
-              <ProjectGraphNode
-                key={n.id}
-                node={n}
-                tasks={tasksByProject.get(n.id) ?? []}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function CanvasContainer({ sessionId: propSessionId }: CanvasContainerProps) {
-  const user = useUserStore((s) => s.currentUser);
-  const isConnected = useCanvasStore((s) => s.isConnected);
-  const components = useCanvasStore((s) => s.components);
-  const graphNodes = useCanvasStore((s) => s.graphNodes);
-  const graphEdges = useCanvasStore((s) => s.graphEdges);
-  const connect = useCanvasStore((s) => s.connect);
-  const sendMessage = useCanvasStore((s) => s.sendMessage);
-
-  // Get the effective session ID: use prop, or user.id, or default
-  const effectiveSessionId = propSessionId || user?.id || "default";
-  const canvasSessionId = effectiveSessionId.startsWith("canvas:")
-    ? effectiveSessionId
-    : `canvas:${effectiveSessionId}`;
-
-  useEffect(() => {
-    // Conectar usando el store global (mantiene la conexión si ya existe)
-    connect(canvasSessionId, user?.id);
-
-    // NOTAR: No cerramos la conexión aquí para mantener el KeepAlive
-    // Solo se cerrará si el usuario lo solicita explícitamente o al cerrar la app
-  }, [canvasSessionId, user?.id, connect]);
-
-  const handleInteraction = useCallback((componentId: string, action: string, data?: unknown) => {
-    sendMessage({
-      type: "canvas:interact",
-      sessionId: canvasSessionId,
-      componentId,
-      action,
-      data,
-    });
-  }, [sendMessage, canvasSessionId]);
-
-  return (
-    <div className="hive-card flex h-full flex-col shadow-2xl">
-      {/* Header */}
-      <div className="flex flex-row items-center justify-between space-y-0 border-b border-white/5 bg-white/5 px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div className="hive-icon-wrap hive-icon-wrap--primary">
-            <Layout className="h-5 w-5" />
-          </div>
-          <div>
-            <h2 className="hive-title-page !text-lg">Canvas</h2>
-            <div className="flex items-center gap-2 text-xs text-white/40 mt-0.5">
-              <UserIcon className="h-3 w-3" />
-              <span className="font-mono">{effectiveSessionId}</span>
-            </div>
-          </div>
-        </div>
-
-        <Badge
-          variant={isConnected ? "default" : "destructive"}
-          className={`flex items-center gap-1.5 px-3 py-1 transition-all duration-500 ${isConnected ? "bg-emerald-500/15 text-emerald-500 hover:bg-emerald-500/20" : "bg-red-500/15 text-red-500 hover:bg-red-500/20"}`}
-        >
-          {isConnected ? (
-            <>
-              <Wifi className="h-3.5 w-3.5 animate-pulse" />
-              <span className="font-semibold uppercase tracking-wider text-[10px]">Live</span>
-            </>
-          ) : (
-            <>
-              <WifiOff className="h-3.5 w-3.5" />
-              <span className="font-semibold uppercase tracking-wider text-[10px]">Offline</span>
-            </>
-          )}
-        </Badge>
-      </div>
-
-      {/* Content */}
-      <div className="relative flex flex-1 flex-col overflow-hidden">
-        <ScrollArea className="flex-1 p-6">
-          {/* Graph view */}
-          <GraphView nodes={graphNodes} edges={graphEdges} />
-
-          {/* Agent-rendered UI components */}
-          {components.length > 0 && (
-            <div className="mt-6">
-              <p className="hive-label mb-3">
-                Componentes
-              </p>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">
-                {components.map((component) => (
-                  <ComponentRenderer
-                    key={component.id}
-                    component={component}
-                    onInteraction={handleInteraction}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-        </ScrollArea>
-
-        {/* Status bar */}
-        <div className="border-t border-white/5 bg-white/[0.02] px-6 py-2.5">
-          <div className="flex items-center gap-2">
-            <Terminal className="h-3 w-3 text-white/30" />
-            <span className="hive-mono">
-              {isConnected
-                ? `Sincronizado · ${graphNodes.length} nodos · ${graphEdges.length} conexiones`
-                : "Reconectando..."}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/canvas/CanvasForm.tsx

@@ -1,3 +0,0 @@
-export function CanvasForm() {
-  return <div className="text-sm text-muted-foreground">CanvasForm: pendiente de implementación</div>;
-}

package/packages/hive-ui/src/modules/canvas/CanvasMarkdown.tsx

@@ -1,3 +0,0 @@
-export function CanvasMarkdown() {
-  return <div className="text-sm text-muted-foreground">CanvasMarkdown: pendiente de implementación</div>;
-}

package/packages/hive-ui/src/modules/canvas/CanvasTable.tsx

@@ -1,3 +0,0 @@
-export function CanvasTable() {
-  return <div className="text-sm text-muted-foreground">CanvasTable: pendiente de implementación</div>;
-}

package/packages/hive-ui/src/modules/canvas/ComponentRenderer.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { getCanvasComponent } from "./CanvasComponentMap";
-
-interface ComponentRendererProps {
-  component: {
-    type: string;
-    props: Record<string, unknown>;
-    id: string;
-  };
-  onInteraction: (id: string, action: string, data?: unknown) => void;
-}
-
-interface DynamicProps extends Record<string, unknown> {
-  renderFn: (props: Record<string, unknown>) => React.ReactNode;
-}
-
-const DynamicCanvasComponent: React.FC<DynamicProps> = ({ renderFn, ...props }) => {
-  return <>{renderFn(props)}</>;
-};
-
-export const ComponentRenderer: React.FC<ComponentRendererProps> = ({ component, onInteraction }) => {
-  const { type, props, id } = component;
-  const renderFn = getCanvasComponent(type);
-
-  return (
-    <div data-canvas-type={type} data-canvas-id={id}>
-      <DynamicCanvasComponent renderFn={renderFn} {...props} id={id} onInteraction={onInteraction} />
-    </div>
-  );
-};

package/packages/hive-ui/src/modules/canvas/DynamicRenderer.tsx

@@ -1,3 +0,0 @@
-export function DynamicRenderer() {
-  return <div className="text-sm text-muted-foreground">DynamicRenderer: pendiente de implementación</div>;
-}

package/packages/hive-ui/src/modules/channels/available/AvailableChannelsGrid.tsx

@@ -1,89 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Plus, type LucideProps } from "lucide-react";
-import { useChannels } from "@/hooks/useChannels";
-import { ChannelIcon } from "../shared/ChannelIcon";
-import type { ChannelType } from "@/types";
-import { useState } from "react";
-
-function Icon({ icon: IconComponent, ...props }: { icon: React.ComponentType<LucideProps> } & LucideProps) {
-  return <IconComponent {...props} />;
-}
-
-const channelInfo: Record<string, { name: string; description: string }> = {
-  telegram: { name: "Telegram", description: "Bot de Telegram con comandos y grupos" },
-  whatsapp: { name: "WhatsApp", description: "WhatsApp Web con QR o código" },
-  discord: { name: "Discord", description: "Bot de Discord para servidores" },
-  slack: { name: "Slack", description: "Integración con workspaces" },
-  signal: { name: "Signal", description: "Mensajería segura" },
-  webchat: { name: "Web Chat", description: "Widget embebible" },
-  matrix: { name: "Matrix", description: "Protocolo descentralizado" },
-  teams: { name: "Microsoft Teams", description: "Integración con Teams" },
-};
-
-export function AvailableChannelsGrid() {
-  const { channels, fetchChannels, toggleChannel } = useChannels();
-  const [isToggling, setIsToggling] = useState<string | null>(null);
-
-  const handleActivate = async (type: string) => {
-    setIsToggling(type);
-    try {
-      await toggleChannel(type, true);
-      await fetchChannels();
-    } catch (error) {
-      console.error("Error al activar canal:", error);
-    } finally {
-      setIsToggling(null);
-    }
-  };
-
-  // Get channels that are not yet active
-  const inactiveChannelTypes = Object.keys(channelInfo).filter(
-    (type) => !channels.some((c) => c.type === type && c.active)
-  );
-
-  return (
-    <div className="space-y-4">
-      <h3 className="text-sm font-semibold">Canales Disponibles</h3>
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {inactiveChannelTypes.map((type) => {
-          const info = channelInfo[type];
-          return (
-            <Card key={type} className="transition-colors hover:border-primary/30">
-              <CardContent className="p-4 space-y-3">
-                <div className="flex items-center gap-2">
-                  <ChannelIcon type={type as ChannelType} className="h-6 w-6" />
-                  <div>
-                    <p className="text-sm font-semibold">{info.name}</p>
-                  </div>
-                </div>
-                <p className="text-xs text-muted-foreground">{info.description}</p>
-                <Button
-                  size="sm"
-                  className="w-full"
-                  onClick={() => handleActivate(type)}
-                  disabled={isToggling === type}
-                >
-                  {isToggling === type ? (
-                    <>Activando...</>
-                  ) : (
-                    <>
-                      <Icon icon={Plus as any} className="mr-1 h-3 w-3" />
-                      Activar
-                    </>
-                  )}
-                </Button>
-              </CardContent>
-            </Card>
-          );
-        })}
-        {inactiveChannelTypes.length === 0 && (
-          <div className="col-span-full py-8 text-center text-sm text-muted-foreground">
-            Todos los canales están activados
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/channels/available/ChannelAuthForm.tsx

@@ -1,33 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Eye, EyeOff } from "lucide-react";
-import { useState } from "react";
-
-interface ChannelAuthFormProps {
-  channelType: string;
-  onSubmit?: (credentials: Record<string, string>) => void;
-}
-
-export function ChannelAuthForm({ channelType, onSubmit }: ChannelAuthFormProps) {
-  const [showToken, setShowToken] = useState(false);
-
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">Autenticación — {channelType}</CardTitle></CardHeader>
-      <CardContent className="space-y-3">
-        <div className="space-y-1">
-          <Label className="text-xs">Token / API Key</Label>
-          <div className="relative">
-            <Input type={showToken ? "text" : "password"} placeholder="Ingresa el token..." className="h-8 pr-8 text-sm" />
-            <Button variant="ghost" size="icon" className="absolute right-0 top-0 h-8 w-8" onClick={() => setShowToken(!showToken)}>
-              {showToken ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
-            </Button>
-          </div>
-        </div>
-        <Button size="sm" className="w-full">Validar credenciales</Button>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/channels/available/ChannelSetupWizard.tsx

@@ -1,48 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { ChevronRight, ChevronLeft } from "lucide-react";
-import { useState } from "react";
-import type { ChannelType } from "@/types";
-
-interface ChannelSetupWizardProps {
-  channelType: ChannelType;
-  onComplete?: () => void;
-  onCancel?: () => void;
-}
-
-const steps = ["Instrucciones", "Credenciales", "Políticas", "Test", "Confirmar"];
-
-export function ChannelSetupWizard({ channelType, onComplete, onCancel }: ChannelSetupWizardProps) {
-  const [currentStep, setCurrentStep] = useState(0);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-sm">Conectar {channelType} — Paso {currentStep + 1} de {steps.length}</CardTitle>
-        <div className="flex gap-1 pt-2">
-          {steps.map((step, i) => (
-            <div
-              key={step}
-              className={`h-1 flex-1 rounded-full ${i <= currentStep ? "bg-primary" : "bg-muted"}`}
-            />
-          ))}
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <p className="text-sm text-muted-foreground">
-          {steps[currentStep]}: Contenido del paso pendiente de implementación
-        </p>
-        <div className="flex justify-between">
-          <Button variant="outline" size="sm" onClick={() => currentStep === 0 ? onCancel?.() : setCurrentStep((s) => s - 1)}>
-            <ChevronLeft className="mr-1 h-3.5 w-3.5" />
-            {currentStep === 0 ? "Cancelar" : "Anterior"}
-          </Button>
-          <Button size="sm" onClick={() => currentStep === steps.length - 1 ? onComplete?.() : setCurrentStep((s) => s + 1)}>
-            {currentStep === steps.length - 1 ? "Conectar" : "Siguiente"}
-            {currentStep < steps.length - 1 && <ChevronRight className="ml-1 h-3.5 w-3.5" />}
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/channels/available/ChannelTestConnection.tsx

@@ -1,37 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { CheckCircle, XCircle, Loader2 } from "lucide-react";
-import { useState } from "react";
-
-interface ChannelTestConnectionProps {
-  onTest?: () => Promise<boolean>;
-}
-
-export function ChannelTestConnection({ onTest }: ChannelTestConnectionProps) {
-  const [status, setStatus] = useState<"idle" | "testing" | "success" | "error">("idle");
-
-  const handleTest = async () => {
-    setStatus("testing");
-    try {
-      const result = await onTest?.();
-      setStatus(result ? "success" : "error");
-    } catch {
-      setStatus("error");
-    }
-  };
-
-  return (
-    <Card>
-      <CardHeader><CardTitle className="text-sm">Test de Conexión</CardTitle></CardHeader>
-      <CardContent className="flex flex-col items-center gap-3">
-        {status === "idle" && <p className="text-sm text-muted-foreground">Prueba la conexión antes de guardar</p>}
-        {status === "testing" && <Loader2 className="h-8 w-8 animate-spin text-primary" />}
-        {status === "success" && <CheckCircle className="h-8 w-8 text-hive-connected" />}
-        {status === "error" && <XCircle className="h-8 w-8 text-destructive" />}
-        <Button size="sm" onClick={handleTest} disabled={status === "testing"}>
-          {status === "testing" ? "Probando..." : "Probar conexión"}
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/channels/available/ChannelTypeCard.tsx

@@ -1,30 +0,0 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Plus } from "lucide-react";
-import { ChannelIcon } from "../shared/ChannelIcon";
-import type { ChannelType } from "@/types";
-
-interface ChannelTypeCardProps {
-  type: ChannelType;
-  name: string;
-  description: string;
-  onConnect?: () => void;
-}
-
-export function ChannelTypeCard({ type, name, description, onConnect }: ChannelTypeCardProps) {
-  return (
-    <Card className="transition-colors hover:border-primary/40">
-      <CardContent className="flex flex-col items-center gap-3 p-4 text-center">
-        <ChannelIcon type={type} className="h-8 w-8" />
-        <div>
-          <p className="text-sm font-semibold">{name}</p>
-          <p className="mt-1 text-xs text-muted-foreground">{description}</p>
-        </div>
-        <Button size="sm" variant="outline" className="w-full" onClick={onConnect}>
-          <Plus className="mr-1 h-3.5 w-3.5" />
-          Conectar
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}