@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/agent-config/mcp/MCPServerConfig.tsx

@@ -1,427 +0,0 @@
-import { useState, useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import {
-  X,
-  Loader2,
-  Trash2,
-  Settings2,
-  Terminal,
-  Globe,
-  Power,
-  Key,
-  ShieldCheck,
-  Code,
-  Lock
-} from "lucide-react";
-import { Toast, swal } from "@/lib/swal";
-import { loader } from "@/stores/useLoaderStore";
-import { apiClient } from "@/lib/api";
-import { MCPToolExplorer } from "./MCPToolExplorer";
-import { useMCPServers } from "@/hooks/useProviders";
-
-interface MCPServerConfigProps {
-  server: {
-    id: string;
-    name: string;
-    transport: string;
-    status: string;
-    enabled: boolean | number;
-    active: boolean | number;
-    builtin: boolean | number;
-    command?: string;
-    args?: string[];
-    url?: string;
-    headers?: Record<string, string>;
-    tools?: any[];
-  };
-  onClose: () => void;
-}
-
-function getAuthFromHeaders(headers?: Record<string, string>): { authType: string; authToken: string } {
-  if (!headers) return { authType: "none", authToken: "" };
-  if (headers["x-api-key"]) return { authType: "api-key", authToken: headers["x-api-key"] };
-  if (headers["Authorization"]?.startsWith("Bearer ")) {
-    return { authType: "bearer", authToken: headers["Authorization"].replace("Bearer ", "") };
-  }
-  if (Object.keys(headers).length > 0) return { authType: "custom", authToken: "" };
-  return { authType: "none", authToken: "" };
-}
-
-export function MCPServerConfig({ server, onClose }: MCPServerConfigProps) {
-  const { updateMCPServer, toggleMCPServer, deleteMCPServer, fetchMCPServers } = useMCPServers();
-  const [transport, setTransport] = useState(server.transport || "stdio");
-  const [command, setCommand] = useState(server.command || "");
-  const [args, setArgs] = useState(server.args?.join(" ") || "");
-  const [url, setUrl] = useState(server.url || "");
-  const [authType, setAuthType] = useState(() => getAuthFromHeaders(server.headers).authType);
-  const [authToken, setAuthToken] = useState(() => getAuthFromHeaders(server.headers).authToken);
-  const [headers, setHeaders] = useState(server.headers ? JSON.stringify(server.headers, null, 2) : "");
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [isToggling, setIsToggling] = useState(false);
-  const [activeTab, setActiveTab] = useState<"config" | "tools">("config");
-
-  const isConnected = server.status === "connected" || server.active === 1 || server.active === true;
-
-  useEffect(() => {
-    if (server.args && Array.isArray(server.args)) {
-      setArgs(server.args.join(" "));
-    }
-    const auth = getAuthFromHeaders(server.headers);
-    setAuthType(auth.authType);
-    setAuthToken(auth.authToken);
-  }, [server]);
-
-  const handleUpdate = async () => {
-    setIsUpdating(true);
-    loader.show("Actualizando configuración...");
-    try {
-      const config: any = { transport };
-      if (transport === "stdio") {
-        if (!command) {
-          Toast.fire({ icon: "warning", title: "El comando es obligatorio" });
-          return;
-        }
-        config.command = command;
-        // Parse arguments: handle JSON arrays or space/comma separated strings
-        const trimmedArgs = args.trim();
-        if (trimmedArgs.startsWith('[') && trimmedArgs.endsWith(']')) {
-          try {
-            config.args = JSON.parse(trimmedArgs);
-          } catch {
-            config.args = trimmedArgs.match(/"[^"]*"|'[^']*'|[^\\s,]+/g)?.map(arg =>
-              arg.replace(/^["']|["']$/g, '').replace(/,$/, '').trim()
-            ).filter(Boolean) || [];
-          }
-        } else {
-          config.args = trimmedArgs.match(/"[^"]*"|'[^']*'|[^\\s,]+/g)?.map(arg =>
-            arg.replace(/^["']|["']$/g, '').replace(/,$/, '').trim()
-          ).filter(Boolean) || [];
-        }
-      } else if (transport === "sse") {
-        if (!url) {
-          Toast.fire({ icon: "warning", title: "La URL es obligatoria" });
-          return;
-        }
-        config.url = url;
-
-        let finalHeaders: Record<string, string> = {};
-        if (authType === "api-key" && authToken) {
-          finalHeaders["x-api-key"] = authToken;
-        } else if (authType === "bearer" && authToken) {
-          finalHeaders["Authorization"] = `Bearer ${authToken}`;
-        } else if (authType === "custom" && headers.trim()) {
-          try {
-            finalHeaders = JSON.parse(headers.trim());
-          } catch (e) {
-            Toast.fire({ icon: "error", title: "JSON de Headers inválido" });
-            return;
-          }
-        }
-
-        if (Object.keys(finalHeaders).length > 0) {
-          config.headers = finalHeaders;
-        }
-      }
-
-      await updateMCPServer(server.id, config);
-      await fetchMCPServers();
-      Toast.fire({ icon: "success", title: "Configuración actualizada" });
-    } catch (error) {
-      Toast.fire({ icon: "error", title: error instanceof Error ? error.message : "Error al actualizar configuración" });
-    } finally {
-      setIsUpdating(false);
-      loader.hide();
-    }
-  };
-
-  const handleToggleConnection = async () => {
-    setIsToggling(true);
-    loader.show(isConnected ? "Desconectando servidor..." : "Conectando servidor...");
-    try {
-      await toggleMCPServer(server.id, !isConnected);
-      Toast.fire({ icon: "success", title: isConnected ? "Servidor desconectado" : "Servidor conectado" });
-      // Forzamos refresh para ver estado final si la API es lenta
-      setTimeout(fetchMCPServers, 1500);
-    } catch (error) {
-      Toast.fire({ icon: "error", title: "Error al cambiar estado de conexión" });
-    } finally {
-      setIsToggling(false);
-      loader.hide();
-    }
-  };
-
-  const handleDelete = async () => {
-    const result = await swal.fire({
-      title: "¿Eliminar Servidor?",
-      text: `¿Estás seguro de que deseas eliminar el servidor "${server.name}"? Esta acción no se puede deshacer.`,
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonText: "Sí, eliminar",
-      cancelButtonText: "Cancelar",
-      reverseButtons: true
-    });
-
-    if (!result.isConfirmed) return;
-
-    setIsDeleting(true);
-    try {
-      await apiClient(`/api/mcp/servers/${server.id}`, {
-        method: "DELETE",
-        showLoader: "Eliminando servidor...",
-        showError: true
-      });
-      onClose();
-    } catch (error) {
-      // Error handled by apiClient
-    } finally {
-      setIsDeleting(false);
-    }
-  };
-
-  return (
-    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="sm:max-w-[500px] border-cyan-500/20 bg-zinc-950/95 backdrop-blur-xl p-0 overflow-hidden">
-        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500/50 to-transparent" />
-
-        <DialogHeader className="p-6 pb-0">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className={`p-2 rounded-lg ${isConnected ? "bg-cyan-500/10 text-cyan-400" : "bg-zinc-800 text-zinc-500"}`}>
-                <Settings2 className="h-5 w-5" />
-              </div>
-              <div>
-                <DialogTitle className="text-white flex items-center gap-2">
-                  Configurar {server.name}
-                  {isConnected && <div className="h-1.5 w-1.5 rounded-full bg-cyan-500 animate-pulse" />}
-                </DialogTitle>
-                <DialogDescription className="text-[10px] font-mono opacity-50 uppercase tracking-widest mt-0.5">
-                  ID: {server.id} • {server.transport}
-                </DialogDescription>
-              </div>
-            </div>
-            {!server.builtin && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleDelete}
-                disabled={isDeleting}
-                className="text-zinc-600 hover:text-red-400 hover:bg-red-400/10 h-8 w-8 transition-colors"
-                title="Eliminar Servidor"
-              >
-                {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
-              </Button>
-            )}
-          </div>
-
-          <div className="flex items-center gap-1 mt-6 border-b border-white/5">
-            <button
-              onClick={() => setActiveTab("config")}
-              className={`px-4 py-2 text-[10px] uppercase font-bold tracking-widest transition-all relative ${activeTab === "config" ? "text-cyan-400" : "text-zinc-500 hover:text-zinc-300"
-                }`}
-            >
-              Configuración
-              {activeTab === "config" && <div className="absolute bottom-0 left-0 w-full h-0.5 bg-cyan-500" />}
-            </button>
-            <button
-              onClick={() => setActiveTab("tools")}
-              className={`px-4 py-2 text-[10px] uppercase font-bold tracking-widest transition-all relative ${activeTab === "tools" ? "text-cyan-400" : "text-zinc-500 hover:text-zinc-300"
-                }`}
-            >
-              Herramientas
-              {activeTab === "tools" && <div className="absolute bottom-0 left-0 w-full h-0.5 bg-cyan-500" />}
-            </button>
-          </div>
-        </DialogHeader>
-
-        <div className="p-6">
-          {activeTab === "config" ? (
-            <div className="space-y-4 animate-in fade-in duration-300">
-              <div className="space-y-2">
-                <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Transporte</Label>
-                <Select value={transport} onValueChange={setTransport}>
-                  <SelectTrigger className="bg-white/5 border-white/10 h-9">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="bg-zinc-900 border-white/10">
-                    <SelectItem value="stdio" className="focus:bg-cyan-500/20 focus:text-cyan-400">
-                      <div className="flex items-center gap-2">
-                        <Terminal className="h-3.5 w-3.5" />
-                        <span>stdio (Binario Local)</span>
-                      </div>
-                    </SelectItem>
-                    <SelectItem value="sse" className="focus:bg-cyan-500/20 focus:text-cyan-400">
-                      <div className="flex items-center gap-2">
-                        <Globe className="h-3.5 w-3.5" />
-                        <span>SSE (Remote HTTP)</span>
-                      </div>
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {transport === "stdio" ? (
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Comando</Label>
-                    <Input
-                      value={command}
-                      onChange={(e) => setCommand(e.target.value)}
-                      className="bg-white/5 border-white/10 focus:border-cyan-500/50 h-9"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Argumentos</Label>
-                    <Input
-                      value={args}
-                      onChange={(e) => setArgs(e.target.value)}
-                      className="bg-white/5 border-white/10 focus:border-cyan-500/50 h-9"
-                    />
-                  </div>
-                </div>
-              ) : (
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Endpoint URL</Label>
-                    <Input
-                      value={url}
-                      onChange={(e) => setUrl(e.target.value)}
-                      className="bg-white/5 border-white/10 focus:border-cyan-500/50 h-9"
-                    />
-                  </div>
-                  <div className="space-y-4 pt-2 border-t border-white/5">
-                    <div className="space-y-2">
-                      <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Autenticación</Label>
-                      <Select value={authType} onValueChange={setAuthType}>
-                        <SelectTrigger className="bg-white/5 border-white/10 focus:border-cyan-500/50 h-9">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-zinc-900 border-white/10">
-                          <SelectItem value="none" className="focus:bg-cyan-500/20 focus:text-cyan-400">
-                            <div className="flex items-center gap-2">
-                              <Globe className="h-3.5 w-3.5" />
-                              <span>Ninguna</span>
-                            </div>
-                          </SelectItem>
-                          <SelectItem value="api-key" className="focus:bg-cyan-500/20 focus:text-cyan-400">
-                            <div className="flex items-center gap-2">
-                              <Key className="h-3.5 w-3.5" />
-                              <span>API Key (x-api-key)</span>
-                            </div>
-                          </SelectItem>
-                          <SelectItem value="bearer" className="focus:bg-cyan-500/20 focus:text-cyan-400">
-                            <div className="flex items-center gap-2">
-                              <ShieldCheck className="h-3.5 w-3.5" />
-                              <span>Bearer Token (Authorization)</span>
-                            </div>
-                          </SelectItem>
-                          <SelectItem value="custom" className="focus:bg-cyan-500/20 focus:text-cyan-400">
-                            <div className="flex items-center gap-2">
-                              <Code className="h-3.5 w-3.5" />
-                              <span>Custom Headers (JSON)</span>
-                            </div>
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    {(authType === "api-key" || authType === "bearer") && (
-                      <div className="space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
-                        <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">
-                          {authType === "api-key" ? "API Key" : "Bearer Token"}
-                        </Label>
-                        <div className="relative">
-                          <Input
-                            type="password"
-                            placeholder="sk-..."
-                            value={authToken}
-                            onChange={(e) => setAuthToken(e.target.value)}
-                            className="bg-white/5 border-white/10 focus:border-cyan-500/50 transition-all h-9 pl-9"
-                          />
-                          <Lock className="absolute left-3 top-2.5 h-3.5 w-3.5 text-zinc-500" />
-                        </div>
-                      </div>
-                    )}
-
-                    {authType === "custom" && (
-                      <div className="space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
-                        <div className="flex items-center justify-between">
-                          <Label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Headers JSON</Label>
-                        </div>
-                        <textarea
-                          value={headers}
-                          onChange={(e) => setHeaders(e.target.value)}
-                          placeholder='{ "x-custom-auth": "secret" }'
-                          rows={3}
-                          className="w-full bg-white/5 border border-white/10 rounded-md p-2 text-xs text-zinc-300 focus:outline-none focus:border-cyan-500/50 transition-all font-mono"
-                        />
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              <div className="p-3 rounded-lg bg-zinc-900 border border-white/5 flex items-center justify-between mt-6">
-                <div className="flex items-center gap-3">
-                  <div className={`p-1.5 rounded-full ${isConnected ? "bg-green-500/10 text-green-400" : "bg-zinc-800 text-zinc-500"}`}>
-                    <Power className={`h-3.5 w-3.5 ${isConnected ? "animate-pulse" : ""}`} />
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-[10px] font-bold text-zinc-300 uppercase tracking-tight">Estado del Nodo</span>
-                    <span className={`text-[9px] font-mono ${isConnected ? "text-green-500" : "text-zinc-500"}`}>
-                      {isConnected ? "ACTIVE_CONNECTION" : "INACTIVE_NODE"}
-                    </span>
-                  </div>
-                </div>
-                <Button
-                  size="sm"
-                  variant={isConnected ? "outline" : "default"}
-                  onClick={handleToggleConnection}
-                  disabled={isToggling}
-                  className={`h-7 px-4 text-[10px] font-bold uppercase tracking-wider ${isConnected ? "border-zinc-800 text-zinc-400 hover:bg-zinc-800" : "bg-cyan-600 hover:bg-cyan-500 text-white"
-                    }`}
-                >
-                  {isToggling ? <Loader2 className="h-3 w-3 animate-spin" /> : isConnected ? "Desconectar" : "Conectar"}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <div className="animate-in fade-in duration-300">
-              <MCPToolExplorer serverId={server.id} serverName={server.name} tools={server.tools || []} />
-            </div>
-          )}
-        </div>
-
-        <DialogFooter className="p-6 bg-white/[0.02] border-t border-white/5">
-          <Button
-            variant="ghost"
-            onClick={onClose}
-            className="text-zinc-500 hover:text-white"
-          >
-            Cerrar
-          </Button>
-          {activeTab === "config" && (
-            <Button
-              onClick={handleUpdate}
-              disabled={isUpdating}
-              className="bg-cyan-600 hover:bg-cyan-500 text-white min-w-[120px]"
-            >
-              {isUpdating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Guardar Cambios"}
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/mcp/MCPServerList.tsx

@@ -1,85 +0,0 @@
-import { useEffect, useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Loader2, Server, AlertTriangle, Search } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { MCPServerCard } from "./MCPServerCard";
-import { MCPServerConfig } from "./MCPServerConfig";
-import { MCPServerAdd } from "./MCPServerAdd";
-import { useMCPServers } from "@/hooks/useProviders";
-
-export function MCPServerList() {
-  const { servers, activeServers, isLoading, fetchMCPServers } = useMCPServers();
-  const [configuringServer, setConfiguringServer] = useState<any | null>(null);
-  const [search, setSearch] = useState("");
-
-  useEffect(() => { fetchMCPServers(); }, [fetchMCPServers]);
-
-  const filteredServers = servers.filter(s =>
-    s.name.toLowerCase().includes(search.toLowerCase())
-  );
-
-  const handleCardClick = (server: any) => {
-    setConfiguringServer({
-      ...server,
-      args: typeof server.args === "string" ? JSON.parse(server.args) : server.args,
-    });
-  };
-
-  // Note: Global loader is handled by apiClient in fetchMCPServers or initial sync
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between border-b border-white/5 pb-4">
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded-lg bg-cyan-500/10 text-cyan-400">
-            <Server className="h-5 w-5" />
-          </div>
-          <div>
-            <h4 className="text-sm font-bold text-white uppercase tracking-wider">MCP Ecosystem</h4>
-            <p className="text-[10px] text-zinc-500 font-mono">Model Context Protocol Servers</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-4">
-          <div className="relative group">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-zinc-500 group-focus-within:text-cyan-400 transition-colors" />
-            <Input
-              placeholder="Buscar servidor..."
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              className="pl-9 bg-zinc-900/50 border-white/5 focus:border-cyan-500/30 transition-all h-9 w-[260px] text-xs"
-            />
-          </div>
-          <MCPServerAdd />
-        </div>
-      </div>
-
-      {filteredServers.length === 0 ? (
-        <div className="py-16 flex flex-col items-center justify-center border border-dashed border-white/10 rounded-2xl bg-zinc-950/20 group hover:border-cyan-500/20 transition-colors">
-          <div className="p-4 rounded-full bg-zinc-900 mb-4 group-hover:scale-110 transition-transform">
-            <AlertTriangle className="h-8 w-8 text-zinc-700 group-hover:text-cyan-500/50 transition-colors" />
-          </div>
-          <p className="text-xs text-zinc-500 font-medium">No se detectan servidores MCP configurados.</p>
-          <p className="text-[10px] text-zinc-600 mt-1">Añade uno para expandir las capacidades de tus agentes.</p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filteredServers.map(server => (
-            <MCPServerCard
-              key={server.id}
-              server={server}
-              isConnected={server.status === "connected" || server.active === 1}
-              onClick={() => handleCardClick(server)}
-            />
-          ))}
-        </div>
-      )}
-
-      {configuringServer && (
-        <MCPServerConfig
-          server={configuringServer}
-          onClose={() => setConfiguringServer(null)}
-        />
-      )}
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/mcp/MCPToolExplorer.tsx

@@ -1,79 +0,0 @@
-import { useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Search, Hammer, AlertCircle, Info } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-
-interface Tool {
-  name: string;
-  description: string;
-  inputSchema?: any;
-}
-
-interface MCPToolExplorerProps {
-  serverId: string;
-  serverName: string;
-  tools?: Tool[]; // Tools from parent component (already loaded)
-}
-
-export function MCPToolExplorer({ serverId, serverName, tools = [] }: MCPToolExplorerProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const filteredTools = tools.filter(tool =>
-    tool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    tool.description.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 relative">
-        <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-zinc-500" />
-        <Input
-          placeholder="Buscar herramientas..."
-          className="pl-8 h-8 text-[11px] bg-white/5 border-white/10 focus:border-cyan-500/30"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-      </div>
-
-      <div className="space-y-2 max-h-[300px] overflow-y-auto pr-1 custom-scrollbar">
-        {filteredTools.length === 0 ? (
-          <div className="py-8 text-center text-[10px] text-zinc-500 italic">
-            {searchQuery ? "No se encontraron herramientas que coincidan." : "Este servidor no expone herramientas actualmente."}
-          </div>
-        ) : (
-          filteredTools.map((tool) => (
-            <div
-              key={tool.name}
-              className="p-3 rounded-lg bg-zinc-900/50 border border-white/5 hover:border-cyan-500/20 transition-all group"
-            >
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex items-center gap-2">
-                  <div className="p-1.5 rounded bg-cyan-500/5 text-cyan-400 group-hover:bg-cyan-500/10 transition-colors">
-                    <Hammer className="h-3.5 w-3.5" />
-                  </div>
-                  <h5 className="text-[11px] font-bold text-zinc-200 group-hover:text-cyan-400 transition-colors">{tool.name}</h5>
-                </div>
-                {tool.inputSchema && (
-                  <Badge variant="outline" className="text-[9px] border-zinc-800 text-zinc-600 h-4">
-                    JSON Schema
-                  </Badge>
-                )}
-              </div>
-              <p className="mt-1.5 text-[10px] text-zinc-500 leading-relaxed line-clamp-2">
-                {tool.description}
-              </p>
-            </div>
-          ))
-        )}
-      </div>
-
-      <div className="p-2 rounded bg-cyan-500/5 border border-cyan-500/10 flex items-center gap-2">
-        <Info className="h-3 w-3 text-cyan-500" />
-        <span className="text-[9px] text-cyan-200/50">
-          Estas herramientas son gestionadas directamente por <span className="text-cyan-400 font-mono">{serverName}</span>.
-        </span>
-      </div>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/mcp/index.ts

@@ -1,5 +0,0 @@
-export { MCPServerList } from "./MCPServerList";
-export { MCPServerCard } from "./MCPServerCard";
-export { MCPServerAdd } from "./MCPServerAdd";
-export { MCPServerConfig } from "./MCPServerConfig";
-export { MCPToolExplorer } from "./MCPToolExplorer";

package/packages/hive-ui/src/modules/agent-config/shared/ConfigEditorLayout.tsx

@@ -1,30 +0,0 @@
-import type { ReactNode } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { SaveStatusIndicator } from "./SaveStatusIndicator";
-import type { SaveStatus } from "@/types";
-
-interface ConfigEditorLayoutProps {
-  title: string;
-  icon?: ReactNode;
-  saveStatus?: SaveStatus;
-  children: ReactNode;
-  actions?: ReactNode;
-}
-
-export function ConfigEditorLayout({ title, icon, saveStatus = "saved", children, actions }: ConfigEditorLayoutProps) {
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-center justify-between border-b px-4 py-3">
-        <div className="flex items-center gap-2">
-          {icon}
-          <h3 className="text-sm font-semibold">{title}</h3>
-          <SaveStatusIndicator status={saveStatus} />
-        </div>
-        {actions && <div className="flex items-center gap-2">{actions}</div>}
-      </div>
-      <ScrollArea className="flex-1">
-        <div className="p-4">{children}</div>
-      </ScrollArea>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/shared/ConfigExporter.tsx

@@ -1,26 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Download } from "lucide-react";
-
-interface ConfigExporterProps {
-  content: string;
-  filename: string;
-}
-
-export function ConfigExporter({ content, filename }: ConfigExporterProps) {
-  const handleExport = () => {
-    const blob = new Blob([content], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <Button variant="outline" size="sm" className="gap-1" onClick={handleExport}>
-      <Download className="h-3.5 w-3.5" />
-      Exportar
-    </Button>
-  );
-}