@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/agent-config/tools/ToolConfigPanel.tsx

@@ -1,22 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Settings } from "lucide-react";
-
-interface ToolConfigPanelProps {
-  toolId: string;
-}
-
-export function ToolConfigPanel({ toolId }: ToolConfigPanelProps) {
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <CardTitle className="flex items-center gap-2 text-sm">
-          <Settings className="h-4 w-4" />
-          Configurar herramienta
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p className="text-xs text-muted-foreground">Parámetros de tool: {toolId}</p>
-      </CardContent>
-    </Card>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/tools/ToolManager.tsx

@@ -1,266 +0,0 @@
-import { useEffect, useState } from "react";
-import { Switch } from "@/components/ui/switch";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
-import { Loader2, Wrench, AlertTriangle, Settings2, Globe2, Terminal, Search } from "lucide-react";
-import { useTools } from "@/hooks/useProviders";
-import { Toast } from "@/lib/swal";
-import { loader } from "@/stores/useLoaderStore";
-
-const CATEGORIES = ["native", "workspace", "projects", "agents", "voice"] as const;
-
-const CATEGORY_LABELS: Record<string, string> = {
-  native: "Nativas",
-  workspace: "Workspace",
-  projects: "Proyecto",
-  agents: "Agente",
-  voice: "Voz",
-};
-
-export function ToolManager() {
-  const { tools, isLoading, fetchTools, toggleTool, updateTool } = useTools();
-  const [activeTab, setActiveTab] = useState<string>("native");
-  const [editingTool, setEditingTool] = useState<any>(null);
-  const [togglingId, setTogglingId] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => { fetchTools(); }, [fetchTools]);
-
-  const handleToggle = async (id: string, active: boolean) => {
-    if (togglingId) return;
-    setTogglingId(id);
-    try {
-      await toggleTool(id, active);
-      fetchTools();
-      Toast.fire({ icon: "success", title: `Herramienta ${active ? "activada" : "desactivada"}` });
-    } catch {
-      Toast.fire({ icon: "error", title: "Error al actualizar estado de la herramienta" });
-    } finally {
-      setTogglingId(null);
-    }
-  };
-
-  const handleSave = async () => {
-    if (!editingTool) return;
-    setIsSaving(true);
-    loader.show("Guardando herramienta...");
-    try {
-      await updateTool(editingTool.id, {
-        name: editingTool.name,
-        description: editingTool.description,
-      });
-      Toast.fire({ icon: "success", title: "Herramienta actualizada" });
-      fetchTools();
-      setEditingTool(null);
-    } catch {
-      Toast.fire({ icon: "error", title: "Error al guardar cambios" });
-    } finally {
-      setIsSaving(false);
-      loader.hide();
-    }
-  };
-
-  if (isLoading && tools.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center py-20 border border-white/5 bg-zinc-950/30 rounded-2xl">
-        <Loader2 className="h-8 w-8 animate-spin text-violet-500 mb-4 opacity-50" />
-        <span className="text-xs uppercase font-bold tracking-[0.2em] text-zinc-500">Cargando herramientas...</span>
-      </div>
-    );
-  }
-
-  const filteredTools = tools.filter(tool =>
-    activeTab === "all" ? true : tool.category === activeTab
-  );
-
-  return (
-    <div className="space-y-8 animate-fade-in">
-
-      {/* ── Header ────────────────────────────────────────────────────────── */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <div className="flex items-center gap-2 mb-2">
-            <h3 className="hive-title-section !text-lg !text-white/80">Herramientas</h3>
-            <span className="hive-tag bg-white/5 text-white/40 border-white/10">
-              {filteredTools.length} DISPONIBLES
-            </span>
-          </div>
-          <p className="hive-subtitle !mt-0 !text-xs">
-            Gestiona las capacidades externas y el arsenal tecnológico de tu agente.
-          </p>
-        </div>
-
-        <div className="flex items-center gap-2 text-[10px] uppercase tracking-widest font-black text-white/20 bg-white/5 px-4 py-2 rounded-xl border border-white/5">
-          <Wrench className="h-3.5 w-3.5" />
-          <span>Arsenal Operativo</span>
-        </div>
-      </div>
-
-      {/* ── Tabs/Categorías ────────────────────────────────────────────────── */}
-      <div className="flex items-center gap-1.5 p-1 bg-white/5 rounded-2xl w-fit border border-white/5">
-        {(["all", "native", "workspace", "projects", "agents", "voice"] as const).map(cat => (
-          <button
-            key={cat}
-            onClick={() => setActiveTab(cat)}
-            className={`px-6 py-2 rounded-xl text-[10px] font-black tracking-widest uppercase transition-all duration-300 ${activeTab === cat
-              ? 'bg-blue-600 text-white shadow-btn-primary'
-              : 'text-white/20 hover:text-white/40 hover:bg-white/5'
-              }`}
-          >
-            {cat === "all" ? "TODAS" : CATEGORY_LABELS[cat] || cat}
-          </button>
-        ))}
-      </div>
-
-      {/* ── Tool cards ────────────────────────────────────────────────────── */}
-      {filteredTools.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-violet-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-violet-500/50 transition-colors" />
-          </div>
-          <p className="text-xs text-zinc-500 font-medium">Sin herramientas en esta categoría.</p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filteredTools.map(tool => {
-            const isActive = tool.enabled;
-            const isCore = tool.core;
-            return (
-              <div
-                key={tool.id}
-                onClick={() => setEditingTool({ ...tool })}
-                className={`hive-card group cursor-pointer transition-all duration-500 ${isActive
-                  ? 'hive-card--active'
-                  : 'hive-card--disabled'
-                  }`}
-              >
-                <div className="hive-card-body relative overflow-hidden">
-                  <div className="flex items-start justify-between mb-6">
-                    <div className={`hive-icon-wrap--internal ${isActive
-                      ? 'hive-icon-wrap--internal-active'
-                      : 'hive-icon-wrap--internal-disabled'
-                      }`}>
-                      {tool.type === 'native' && <Globe2 className="h-6 w-6" />}
-                      {tool.type === 'workspace' && <Terminal className="h-6 w-6" />}
-                      {tool.type === 'projects' && <Search className="h-6 w-6" />}
-                      {tool.type === 'agents' && <Settings2 className="h-6 w-6" />}
-                      {tool.type === 'voice' && <Settings2 className="h-6 w-6" />}
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                      {isCore && (
-                        <span className="hive-status-label--active">
-                          NATIVO
-                        </span>
-                      )}
-                      <Switch
-                        checked={isActive}
-                        onCheckedChange={() => handleToggle(tool.id, !isActive)}
-                        className="data-[state=checked]:bg-blue-500 scale-75 origin-right"
-                      />
-                    </div>
-                  </div>
-                  <div className="space-y-4">
-                    <div>
-                      <h3 className="text-lg font-black text-white uppercase tracking-tighter mb-1 line-clamp-1 group-hover:text-blue-400 transition-colors">
-                        {tool.name}
-                      </h3>
-                      <p className="hive-subtitle !mt-0 !text-[11px] h-8 line-clamp-2">
-                        {tool.description || "Sin descripción disponible"}
-                      </p>
-                    </div>
-
-                    <div className="pt-4 border-t border-white/5 flex items-center gap-4">
-                      <div className="hive-stat">
-                        <span className="hive-stat__label">TIPO</span>
-                        <span className="hive-stat__value truncate max-w-[80px]">{tool.type}</span>
-                      </div>
-                      <div className="hive-stat">
-                        <span className="hive-stat__label">ESTADO</span>
-                        <div className="flex items-center gap-2">
-                          <div className={isActive ? "hive-status-dot--active" : "hive-status-dot--disabled"} />
-                          <span className={isActive ? "hive-status-label--active" : "hive-status-label--disabled"}>
-                            {isActive ? "ACTIVE" : "STANDBY"}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {isActive && (
-                    <div className="hive-glow-blob--card hive-glow-blob--blue -bottom-10 -right-10 h-24 w-24 opacity-20" />
-                  )}
-                </div>
-                <div className={`hive-strip--bottom ${!isActive ? 'opacity-20' : ''}`} />
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {/* ── Edit dialog ───────────────────────────────────────────────────── */}
-      <Dialog open={!!editingTool} onOpenChange={open => !open && setEditingTool(null)}>
-        <DialogContent className="sm:max-w-sm bg-zinc-950 border-white/10">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 text-sm">
-              <div className="p-1.5 rounded-lg bg-violet-500/10 text-violet-400">
-                <Settings2 className="h-3.5 w-3.5" />
-              </div>
-              Editar herramienta
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-3 py-2">
-            <div className="space-y-1.5">
-              <Label className="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Nombre</Label>
-              <Input
-                value={editingTool?.name || ""}
-                onChange={e => setEditingTool({ ...editingTool, name: e.target.value })}
-                className="h-9 text-sm bg-white/5 border-white/10 focus:border-violet-500/50"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label className="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">Descripción</Label>
-              <Textarea
-                value={editingTool?.description || ""}
-                onChange={e => setEditingTool({ ...editingTool, description: e.target.value })}
-                className="text-sm min-h-[80px] resize-none bg-white/5 border-white/10 focus:border-violet-500/50 font-mono"
-              />
-            </div>
-            <div className="flex items-center gap-2 pt-1 border-t border-white/5">
-              <span className="font-mono text-[10px] bg-zinc-900 border border-white/5 text-zinc-500 px-2 py-0.5 rounded truncate max-w-[180px]">
-                {editingTool?.id}
-              </span>
-              <Badge variant="outline" className="text-[9px] border-zinc-800 text-zinc-500 uppercase">
-                {editingTool?.category}
-              </Badge>
-            </div>
-          </div>
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setEditingTool(null)}
-              className="hive-btn--form-cancel h-10"
-            >
-              Cancelar
-            </Button>
-            <Button
-              size="sm"
-              onClick={handleSave}
-              disabled={isSaving}
-              className="hive-btn--form-submit h-10"
-            >
-              {isSaving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
-              Guardar Cambios
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/tools/ToolPermissions.tsx

@@ -1,287 +0,0 @@
-import { useEffect, useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Switch } from "@/components/ui/switch";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import {
-  Shield,
-  Loader2,
-  Search,
-  Terminal,
-  FolderOpen,
-  Globe,
-  Brain,
-  Calendar,
-  Bell,
-  Laptop,
-  Shrink,
-  Eye,
-  Pencil,
-  FileEdit,
-  BookOpen,
-  Save,
-  List,
-  UserPlus,
-  FileText,
-  FileUp,
-  Edit3,
-  MessageSquare,
-  PlayCircle,
-  Settings2,
-  CheckCircle2
-} from "lucide-react";
-import { useTools } from "@/hooks/useProviders";
-import { Toast } from "@/lib/swal";
-import { loader } from "@/stores/useLoaderStore";
-
-const TOOL_ICONS: Record<string, any> = {
-  web_search: Search,
-  shell: Terminal,
-  file_manager: FolderOpen,
-  http_client: Globe,
-  memory: Brain,
-  cron_manager: Calendar,
-  system_notify: Bell,
-  browser_automation: Laptop,
-  context_compact: Shrink,
-  workspace_read: Eye,
-  workspace_write: Pencil,
-  workspace_patch: FileEdit,
-  project_read: BookOpen,
-  project_write: Save,
-  project_list: List,
-  create_agent: UserPlus,
-  read: FileText,
-  write: FileUp,
-  edit: Edit3,
-  notify: MessageSquare,
-  exec: PlayCircle,
-};
-
-const CATEGORY_LABELS: Record<string, string> = {
-  bundled: "Nativas",
-  workspace: "Workspace",
-  project: "Proyecto",
-  builtin: "Sistema",
-};
-
-export function ToolPermissions() {
-  const { tools, isLoading, fetchTools, toggleTool, updateTool } = useTools();
-  const [editingTool, setEditingTool] = useState<any>(null);
-  const [togglingId, setTogglingId] = useState<string | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    fetchTools();
-  }, [fetchTools]);
-
-  const handleToggle = async (id: string, active: boolean, e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (togglingId) return;
-    setTogglingId(id);
-    try {
-      await toggleTool(id, active);
-      Toast.fire({ icon: "success", title: `Herramienta ${active ? "activada" : "desactivada"}` });
-    } catch (error) {
-      Toast.fire({ icon: "error", title: "Error al actualizar estado de la herramienta" });
-    } finally {
-      setTogglingId(null);
-    }
-  };
-
-  const handleOpenEdit = (tool: any) => {
-    setEditingTool({ ...tool });
-  };
-
-  const handleSave = async () => {
-    if (!editingTool) return;
-    setIsSaving(true);
-    loader.show("Guardando configuración de herramienta...");
-    try {
-      await updateTool(editingTool.id, {
-        name: editingTool.name,
-        description: editingTool.description,
-      });
-      Toast.fire({ icon: "success", title: "Configuración guardada" });
-      fetchTools();
-      setEditingTool(null);
-    } catch (error) {
-      Toast.fire({ icon: "error", title: "Error al guardar cambios" });
-    } finally {
-      setIsSaving(false);
-      loader.hide();
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-purple-500" />
-      </div>
-    );
-  }
-
-  const categories = ["bundled", "workspace", "project", "builtin"];
-  const toolsByCategory = categories.reduce((acc, cat) => {
-    acc[cat] = tools.filter(t => t.category === cat);
-    return acc;
-  }, {} as Record<string, any[]>);
-
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-col gap-1">
-        <h3 className="text-xl font-bold tracking-tight text-white flex items-center gap-2">
-          <Shield className="h-5 w-5 text-purple-400" />
-          Permisos y Herramientas
-        </h3>
-        <p className="text-sm text-zinc-400">
-          Configura el acceso y las capacidades de las herramientas del agente.
-        </p>
-      </div>
-
-      <Tabs defaultValue="bundled" className="w-full">
-        <TabsList className="bg-zinc-900/50 border border-white/5 p-1 h-auto flex-wrap sm:flex-nowrap">
-          {categories.map(cat => (
-            <TabsTrigger
-              key={cat}
-              value={cat}
-              className="data-[state=active]:bg-purple-500 data-[state=active]:text-white transition-all py-2 px-4"
-            >
-              {CATEGORY_LABELS[cat] || cat}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-
-        {categories.map(cat => (
-          <TabsContent key={cat} value={cat} className="mt-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {toolsByCategory[cat]?.map((tool) => {
-                const Icon = TOOL_ICONS[tool.id] || Settings2;
-                return (
-                  <Card
-                    key={tool.id}
-                    onClick={() => handleOpenEdit(tool)}
-                    className={`group relative overflow-hidden transition-all hover:border-purple-500/50 hover:shadow-lg hover:shadow-purple-500/5 cursor-pointer ${tool.active ? "border-purple-500/20 bg-purple-500/[0.02]" : "opacity-70 grayscale-[0.2] border-white/5 bg-transparent"
-                      }`}
-                  >
-                    <CardHeader className="pb-3">
-                      <div className="flex items-start justify-between">
-                        <div className={`p-2 rounded-lg transition-colors ${tool.active ? "bg-purple-500/10 text-purple-400" : "bg-zinc-800 text-zinc-500"}`}>
-                          <Icon className="h-5 w-5" />
-                        </div>
-                        <Switch
-                          checked={tool.active}
-                          onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                          onCheckedChange={(checked) => handleToggle(tool.id, checked, { stopPropagation: () => { } } as any)}
-                          disabled={togglingId === tool.id}
-                          className="data-[state=checked]:bg-purple-500"
-                        />
-                      </div>
-                      <CardTitle className="text-sm font-bold mt-3 group-hover:text-purple-400 transition-colors">
-                        {tool.name}
-                      </CardTitle>
-                      <CardDescription className="text-xs line-clamp-2 mt-1">
-                        {tool.description}
-                      </CardDescription>
-                    </CardHeader>
-                    {tool.active && (
-                      <div className="absolute top-2 right-12">
-                        <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
-                          <div className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
-                          <span className="text-[10px] font-medium text-emerald-500 uppercase tracking-wider">Conectado</span>
-                        </div>
-                      </div>
-                    )}
-                  </Card>
-                );
-              })}
-            </div>
-            {(!toolsByCategory[cat] || toolsByCategory[cat].length === 0) && (
-              <div className="py-12 text-center border border-dashed border-white/10 rounded-xl bg-white/[0.02]">
-                <p className="text-sm text-zinc-500">No hay herramientas disponibles en esta categoría.</p>
-              </div>
-            )}
-          </TabsContent>
-        ))}
-      </Tabs>
-
-      <Dialog open={!!editingTool} onOpenChange={(open) => !open && setEditingTool(null)}>
-        <DialogContent className="sm:max-w-[425px] border-purple-500/20 bg-zinc-950/95 backdrop-blur-xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 text-white">
-              {editingTool && (
-                <div className="p-1.5 rounded-md bg-purple-500/10 text-purple-400">
-                  {(() => {
-                    const Icon = TOOL_ICONS[editingTool.id] || Settings2;
-                    return <Icon className="h-4 w-4" />;
-                  })()}
-                </div>
-              )}
-              Configurar Herramienta
-            </DialogTitle>
-            <DialogDescription className="text-zinc-400">
-              Ajusta los detalles y accesos de <span className="font-mono text-purple-400">{editingTool?.name}</span>.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="grid gap-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="tool-name" className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Nombre Público</Label>
-              <Input
-                id="tool-name"
-                value={editingTool?.name || ""}
-                onChange={(e) => setEditingTool({ ...editingTool, name: e.target.value })}
-                className="bg-white/5 border-white/10 focus:border-purple-500/50 transition-all"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="tool-desc" className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Descripción</Label>
-              <Textarea
-                id="tool-desc"
-                value={editingTool?.description || ""}
-                onChange={(e) => setEditingTool({ ...editingTool, description: e.target.value })}
-                className="bg-white/5 border-white/10 focus:border-purple-500/50 transition-all min-h-[100px]"
-              />
-            </div>
-
-            <div className="p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/10 flex items-center gap-3">
-              <CheckCircle2 className="h-5 w-5 text-emerald-500 shrink-0" />
-              <div className="text-xs text-emerald-200/70">
-                Esta herramienta se conectará automáticamente al agente cuando esté activa.
-              </div>
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button
-              variant="ghost"
-              onClick={() => setEditingTool(null)}
-              className="hover:bg-white/5 text-zinc-400"
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={handleSave}
-              disabled={isSaving}
-              className="bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-600/20"
-            >
-              {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Guardar Cambios"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/agent-config/tools/ToolRegistry.tsx

@@ -1,84 +0,0 @@
-import { useEffect, useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Switch } from "@/components/ui/switch";
-import { Button } from "@/components/ui/button";
-import { Wrench, Loader2 } from "lucide-react";
-import { useTools } from "@/hooks/useProviders";
-import { Toast } from "@/lib/swal";
-
-export function ToolRegistry() {
-  const { tools, activeTools, isLoading, fetchTools, toggleTool } = useTools();
-  const [togglingSkill, setTogglingSkill] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetchTools();
-  }, [fetchTools]);
-
-  const handleToggle = async (id: string, active: boolean) => {
-    if (togglingSkill) return;
-    setTogglingSkill(id);
-    try {
-      await toggleTool(id, active);
-      Toast.fire({ icon: "success", title: `Tool ${active ? "activada" : "desactivada"}` });
-    } catch (error) {
-      Toast.fire({ icon: "error", title: "Error al cambiar estado de la tool" });
-    } finally {
-      setTogglingSkill(null);
-    }
-  };
-
-  const sourceColors: Record<string, "default" | "secondary" | "outline"> = {
-    bundled: "secondary",
-    managed: "default",
-    workspace: "outline",
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-8">
-        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-        <span className="ml-2 text-sm text-muted-foreground">Cargando tools...</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <h4 className="text-sm font-medium">Tools del agente</h4>
-        <Badge variant="secondary" className="text-xs">{activeTools.length} activas</Badge>
-      </div>
-
-      <div className="grid gap-3 sm:grid-cols-2">
-        {tools.map((tool) => (
-          <Card key={tool.id} className={tool.active ? "border-primary/30" : "opacity-70"}>
-            <CardHeader className="pb-2">
-              <div className="flex items-start justify-between">
-                <div className="space-y-1">
-                  <CardTitle className="text-sm font-bold flex items-center gap-2">
-                    {tool.name}
-                    <Badge variant={sourceColors[tool.category || "bundled"]} className="text-[10px] h-4">
-                      {tool.category || "bundled"}
-                    </Badge>
-                  </CardTitle>
-                  <p className="text-xs text-muted-foreground line-clamp-2">{tool.description}</p>
-                </div>
-                <Switch
-                  checked={tool.active}
-                  onCheckedChange={(checked) => handleToggle(tool.id, checked)}
-                  disabled={togglingSkill === tool.id}
-                />
-              </div>
-            </CardHeader>
-          </Card>
-        ))}
-        {tools.length === 0 && !isLoading && (
-          <div className="col-span-full py-12 text-center text-muted-foreground">
-            No hay tools configuradas en la base de datos.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}