@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/agent-config/user/UserProfileEditor.tsx

@@ -1,261 +0,0 @@
-import { User, Save, Loader2, Globe, Clock, Briefcase, Bell, Pencil, X } from "lucide-react";
-import { useState, useEffect } from "react";
-import { useUserStore } from "@/stores/userStore";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Toast } from "@/lib/swal";
-import { loader } from "@/stores/useLoaderStore";
-
-const CRON_CHANNEL_OPTIONS = [
-  { value: "auto",     label: "Auto — detectar mejor canal" },
-  { value: "webchat",  label: "Web Chat" },
-  { value: "telegram", label: "Telegram" },
-  { value: "discord",  label: "Discord" },
-];
-
-function getInitials(name: string) {
-  return name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase() || "?";
-}
-
-export function UserProfileEditor() {
-  const { fetchUser, saveUser, isLoading } = useUserStore();
-  const [editing, setEditing] = useState(false);
-
-  const [formData, setFormData] = useState({
-    name: "", occupation: "", language: "",
-    timezone: "", preferred_cron_channel: "auto", notes: "",
-  });
-
-  useEffect(() => {
-    fetchUser().then((user: any) => {
-      if (user) setFormData({
-        name:                   user.name                   || "",
-        occupation:             user.occupation             || "",
-        language:               user.language               || "",
-        timezone:               user.timezone               || "",
-        preferred_cron_channel: user.preferred_cron_channel || "auto",
-        notes:                  user.notes                  || "",
-      });
-    }).catch(console.error);
-  }, [fetchUser]);
-
-  const update = (field: keyof typeof formData, value: string) =>
-    setFormData(prev => ({ ...prev, [field]: value }));
-
-  const handleSave = async () => {
-    loader.show("Guardando perfil de usuario...");
-    try {
-      const message = await saveUser(formData);
-      Toast.fire({ icon: "success", title: message });
-      setEditing(false);
-    } catch (err) {
-      Toast.fire({ icon: "error", title: err instanceof Error ? err.message : "Error al guardar el perfil" });
-    } finally {
-      loader.hide();
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-
-      {/* ── Premium profile card ─────────────────────────────────────────── */}
-      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/60 backdrop-blur-xl shadow-2xl">
-        <div className="absolute inset-0 pointer-events-none">
-          <div className="absolute -top-10 -left-10 w-48 h-48 bg-blue-600/20 rounded-full blur-3xl" />
-          <div className="absolute -bottom-10 -right-10 w-48 h-48 bg-indigo-600/15 rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative h-20 bg-gradient-to-r from-blue-600/30 via-indigo-600/20 to-violet-600/10">
-          <div className="absolute inset-0 bg-[repeating-linear-gradient(45deg,transparent,transparent_12px,rgba(255,255,255,0.015)_12px,rgba(255,255,255,0.015)_13px)]" />
-        </div>
-
-        <div className="relative px-6 pb-6">
-          <div className="relative -mt-8 mb-4 w-fit">
-            <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500/30 ring-2 ring-zinc-950 text-white font-bold text-xl tracking-tight">
-              {getInitials(formData.name)}
-            </div>
-            <span className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-emerald-500 border-2 border-zinc-950 shadow" />
-          </div>
-
-          <div className="flex items-start justify-between gap-4">
-            <div className="space-y-1 min-w-0">
-              <h3 className="text-lg font-bold text-white leading-tight truncate">
-                {formData.name || <span className="text-zinc-500 italic text-sm font-normal">Sin nombre</span>}
-              </h3>
-              {formData.occupation && (
-                <p className="text-sm text-zinc-400">{formData.occupation}</p>
-              )}
-              <div className="flex flex-wrap items-center gap-2 pt-1">
-                {formData.language && (
-                  <span className="flex items-center gap-1 text-[11px] text-zinc-400 bg-white/5 border border-white/10 rounded-full px-2.5 py-0.5">
-                    <Globe className="h-3 w-3" />{formData.language}
-                  </span>
-                )}
-                {formData.timezone && (
-                  <span className="flex items-center gap-1 text-[11px] text-zinc-400 bg-white/5 border border-white/10 rounded-full px-2.5 py-0.5">
-                    <Clock className="h-3 w-3" />{formData.timezone}
-                  </span>
-                )}
-                {formData.preferred_cron_channel !== "auto" && (
-                  <span className="flex items-center gap-1 text-[11px] text-zinc-400 bg-white/5 border border-white/10 rounded-full px-2.5 py-0.5">
-                    <Bell className="h-3 w-3" />{formData.preferred_cron_channel}
-                  </span>
-                )}
-              </div>
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setEditing(v => !v)}
-              className="shrink-0 border-white/10 bg-white/5 hover:bg-white/10 text-zinc-300 gap-1.5 h-8 text-xs"
-            >
-              {editing ? <X className="h-3 w-3" /> : <Pencil className="h-3 w-3" />}
-              {editing ? "Cancelar" : "Editar"}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* ── Premium edit form ────────────────────────────────────────────── */}
-      {editing && (
-        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/60 backdrop-blur-xl shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200">
-
-          {/* Subtle glow */}
-          <div className="absolute inset-0 pointer-events-none">
-            <div className="absolute -top-8 -right-8 w-40 h-40 bg-blue-600/10 rounded-full blur-3xl" />
-          </div>
-
-          {/* Form header */}
-          <div className="relative flex items-center gap-3 px-6 pt-5 pb-4 border-b border-white/5">
-            <div className="p-2 rounded-lg bg-blue-500/10 text-blue-400">
-              <User className="h-4 w-4" />
-            </div>
-            <div>
-              <p className="text-sm font-bold text-white uppercase tracking-wider">Editar perfil</p>
-              <p className="text-[10px] text-zinc-500">Datos personales y preferencias</p>
-            </div>
-          </div>
-
-          <div className="relative p-6 space-y-6">
-
-            {/* Identity section */}
-            <div className="space-y-3">
-              <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Identidad</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <div className="space-y-1.5">
-                  <Label className="text-[10px] text-zinc-500 flex items-center gap-1.5">
-                    <User className="h-3 w-3" /> Nombre completo
-                  </Label>
-                  <Input
-                    placeholder="John Doe"
-                    value={formData.name}
-                    onChange={e => update("name", e.target.value)}
-                    className="bg-white/5 border-white/10 focus:border-blue-500/50 h-9 text-sm transition-all"
-                  />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-[10px] text-zinc-500 flex items-center gap-1.5">
-                    <Briefcase className="h-3 w-3" /> Ocupación
-                  </Label>
-                  <Input
-                    placeholder="AI Engineer"
-                    value={formData.occupation}
-                    onChange={e => update("occupation", e.target.value)}
-                    className="bg-white/5 border-white/10 focus:border-blue-500/50 h-9 text-sm transition-all"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Locale section */}
-            <div className="space-y-3">
-              <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Localización</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <div className="space-y-1.5">
-                  <Label className="text-[10px] text-zinc-500 flex items-center gap-1.5">
-                    <Globe className="h-3 w-3" /> Idioma
-                  </Label>
-                  <Input
-                    placeholder="Spanish"
-                    value={formData.language}
-                    onChange={e => update("language", e.target.value)}
-                    className="bg-white/5 border-white/10 focus:border-blue-500/50 h-9 text-sm transition-all"
-                  />
-                </div>
-                <div className="space-y-1.5">
-                  <Label className="text-[10px] text-zinc-500 flex items-center gap-1.5">
-                    <Clock className="h-3 w-3" /> Zona horaria
-                  </Label>
-                  <Input
-                    placeholder="America/Bogota"
-                    value={formData.timezone}
-                    onChange={e => update("timezone", e.target.value)}
-                    className="bg-white/5 border-white/10 focus:border-blue-500/50 h-9 text-sm transition-all"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Notifications section */}
-            <div className="space-y-3">
-              <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Notificaciones</p>
-              <div className="space-y-1.5">
-                <Label className="text-[10px] text-zinc-500 flex items-center gap-1.5">
-                  <Bell className="h-3 w-3" /> Canal preferido para Cron Jobs
-                </Label>
-                <Select value={formData.preferred_cron_channel} onValueChange={v => update("preferred_cron_channel", v)}>
-                  <SelectTrigger className="bg-white/5 border-white/10 focus:border-blue-500/50 h-9 text-sm">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="bg-zinc-900 border-white/10">
-                    {CRON_CHANNEL_OPTIONS.map(opt => (
-                      <SelectItem key={opt.value} value={opt.value} className="text-sm focus:bg-blue-500/20 focus:text-blue-400">
-                        {opt.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            {/* Notes section */}
-            <div className="space-y-3">
-              <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Contexto para el agente</p>
-              <Textarea
-                placeholder="Describe tu perfil, preferencias de trabajo, estilo de comunicación..."
-                value={formData.notes}
-                onChange={e => update("notes", e.target.value)}
-                className="bg-white/5 border-white/10 focus:border-blue-500/50 text-sm resize-none min-h-[100px] transition-all"
-              />
-            </div>
-
-            {/* Actions */}
-            <div className="flex items-center justify-end gap-2 pt-1 border-t border-white/5">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setEditing(false)}
-                className="text-zinc-400 hover:bg-white/5 h-9 text-xs"
-              >
-                Cancelar
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={isLoading}
-                className="bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-600/20 gap-2 h-9 text-xs px-6"
-              >
-                {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
-                Guardar cambios
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-    </div>
-  );
-}

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

@@ -1,3 +0,0 @@
-export { UserProfileEditor } from "./UserProfileEditor";
-export { UserPreferencesForm } from "./UserPreferencesForm";
-export { UserMemoryManager } from "./UserMemoryManager";

package/packages/hive-ui/src/modules/agents/AgentActivityLog.tsx

@@ -1,25 +0,0 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
-import type { AgentActivity } from "@/types";
-
-interface AgentActivityLogProps {
-  activities: AgentActivity[];
-}
-
-export function AgentActivityLog({ activities }: AgentActivityLogProps) {
-  if (activities.length === 0) {
-    return <p className="text-sm text-muted-foreground">Sin actividad reciente</p>;
-  }
-
-  return (
-    <ScrollArea className="h-60">
-      <div className="space-y-2">
-        {activities.map((activity) => (
-          <div key={activity.id} className="rounded-md border px-3 py-2 text-xs">
-            <span className="font-medium">{activity.action}</span>
-            <span className="ml-2 text-muted-foreground">{activity.details}</span>
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  );
-}

package/packages/hive-ui/src/modules/agents/AgentCard.tsx

@@ -1,305 +0,0 @@
-import { AgentStatusBadge } from "./AgentStatusBadge";
-import type { Agent } from "@/types";
-import { useNavigate } from "react-router-dom";
-import {
-  Cpu,
-  MoreVertical,
-  Edit2,
-  Trash2,
-  Shield,
-  Activity,
-  FileText,
-  Wrench,
-  Zap,
-  Gauge,
-  Lock,
-  GitBranch,
-  Calendar,
-  FolderOpen
-} from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { useAgents, useProviders, useModels } from "@/stores/useGlobalConfigStore";
-import { swal } from "@/lib/swal";
-import { format } from "date-fns";
-import { es } from "date-fns/locale";
-
-interface AgentCardProps {
-  agent: Agent;
-  onEdit?: (agent: Agent) => void;
-}
-
-export function AgentCard({ agent, onEdit }: AgentCardProps) {
-  const navigate = useNavigate();
-  const { deleteAgent } = useAgents();
-  const { providers } = useProviders();
-  const { models } = useModels();
-
-  const handleCardClick = (e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('[role="menuitem"]') || (e.target as HTMLElement).closest('button')) {
-      return;
-    }
-    navigate(`/agents/${agent.id}`);
-  };
-
-  const handleDelete = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const result = await swal.fire({
-      title: "¿Eliminar Agente?",
-      text: `¿Estás seguro de que deseas eliminar al agente "${agent.name}"? Esta acción eliminará permanentemente su configuración.`,
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonText: "Sí, eliminar",
-      cancelButtonText: "Cancelar",
-      reverseButtons: true,
-      background: "#09090b",
-      color: "#fff",
-      customClass: {
-        popup: "border border-white/10 rounded-xl",
-        confirmButton: "bg-red-500 hover:bg-red-600 text-white",
-        cancelButton: "bg-white/10 hover:bg-white/20 text-white"
-      }
-    });
-    if (result.isConfirmed) {
-      try { await deleteAgent(agent.id); } catch (err) { console.error(err); }
-    }
-  };
-
-  const isCoordinator = agent.role === 'coordinator';
-  const providerId = agent.provider_id || agent.providerId;
-  const modelId = agent.model_id || agent.modelId;
-  const providerName = providers.find(p => p.id === providerId)?.name || providerId;
-  const modelName = models.find(m => m.id === modelId)?.name || modelId;
-  const displayStatus = agent.enabled ? agent.status : "hibernated";
-
-  // Parse tools and skills from JSON
-  const tools = agent.toolsJson ? JSON.parse(agent.toolsJson) as any[] : [];
-  const skills = agent.skillsJson ? JSON.parse(agent.skillsJson) as any[] : [];
-  const toolsCount = tools.length || 0;
-  const skillsCount = skills.length || 0;
-  const hasSystemPrompt = !!agent.systemPrompt;
-  const maxIterations = agent.maxIterations || 10;
-
-  const formatDate = (val?: string | number) => {
-    if (!val) return null;
-    try {
-      return format(new Date(val), "dd MMM yyyy", { locale: es });
-    } catch (e) {
-      return null;
-    }
-  };
-
-  const createdAt = formatDate(agent.created_at || agent.createdAt);
-
-  return (
-    <div
-      role="button"
-      tabIndex={0}
-      className={`group relative overflow-hidden rounded-2xl border bg-black/40 backdrop-blur-xl transition-all duration-500 cursor-pointer flex flex-col h-full
-        ${agent.enabled
-          ? "border-white/10 hover:border-blue-500/50 hover:bg-white/[0.03] hover:shadow-[0_0_30px_rgba(59,130,246,0.15)]"
-          : "border-white/5 opacity-70 grayscale hover:grayscale-0"}
-      `}
-      onClick={handleCardClick}
-      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") navigate(`/agents/${agent.id}`); }}
-    >
-      {/* Background Gradient Effect */}
-      {agent.enabled && (
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-transparent to-purple-500/10 opacity-0 transition-opacity duration-500 group-hover:opacity-100 pointer-events-none" />
-      )}
-
-      {/* Top subtle glow */}
-      {agent.enabled && (
-        <div className="absolute -top-px left-10 right-10 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
-      )}
-
-      <div className="p-5 flex flex-col flex-1 relative z-10">
-        <div className="flex items-start justify-between gap-4">
-          {/* Name + Description */}
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <h3 className={`text-lg font-bold tracking-tight transition-colors truncate ${agent.enabled ? "text-white/95 group-hover:text-blue-400" : "text-white/40"}`}>
-                {agent.name}
-              </h3>
-              {isCoordinator && (
-                <span title="Coordinador: Habilita gestión de sub-tareas" className="flex items-center justify-center p-1 rounded-md bg-purple-500/10 border border-purple-500/20">
-                  <Shield className="h-3.5 w-3.5 text-purple-400" />
-                </span>
-              )}
-              {agent.hasHeaders && (
-                <span title="Credenciales Mapeadas" className="flex items-center justify-center p-1 rounded-md bg-emerald-500/10 border border-emerald-500/20">
-                  <Lock className="h-3.5 w-3.5 text-emerald-400" />
-                </span>
-              )}
-              {agent.parentId && (
-                <span title="Sub-agente" className="flex items-center justify-center p-1 rounded-md bg-amber-500/10 border border-amber-500/20">
-                  <GitBranch className="h-3.5 w-3.5 text-amber-400" />
-                </span>
-              )}
-            </div>
-            <p className="text-xs text-white/50 line-clamp-2 leading-relaxed h-8 font-light">
-              {agent.description || "Sin descripción"}
-            </p>
-          </div>
-
-          {/* Status + Actions */}
-          <div className="flex flex-col items-end gap-2 shrink-0">
-            <AgentStatusBadge status={displayStatus} />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8 text-white/40 hover:text-white hover:bg-white/10 rounded-full transition-colors">
-                  <MoreVertical className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48 bg-black/90 backdrop-blur-xl border-white/10 text-white p-1 rounded-xl shadow-2xl">
-                <DropdownMenuItem onClick={() => onEdit?.(agent)} className="gap-2 cursor-pointer focus:bg-white/10 focus:text-white rounded-lg px-3 py-2 text-sm transition-colors">
-                  <Edit2 className="h-4 w-4 text-blue-400" />
-                  <span>Editar Configuración</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={handleDelete} className="gap-2 cursor-pointer focus:bg-red-500/20 focus:text-red-400 rounded-lg px-3 py-2 text-sm text-red-400 transition-colors">
-                  <Trash2 className="h-4 w-4" />
-                  <span>Eliminar Agente</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
-
-        {/* Tags */}
-        <div className="mt-5 flex flex-wrap gap-2">
-          {providerId && (
-            <div className={`px-2.5 py-1 rounded-md text-[10px] font-medium uppercase tracking-wider flex items-center gap-1.5 border backdrop-blur-md transition-colors
-              ${agent.enabled ? "bg-white/5 border-white/10 text-white/80 group-hover:bg-white/10 group-hover:border-white/20" : "bg-transparent border-white/5 text-white/30"}`}>
-              <Cpu className="h-3 w-3" />
-              {providerName}
-            </div>
-          )}
-          {modelId && (
-            <div className={`px-2.5 py-1 rounded-md text-[10px] font-medium tracking-wider border backdrop-blur-md transition-colors truncate max-w-[120px]
-              ${agent.enabled ? "bg-white/5 border-white/10 text-white/80 group-hover:bg-white/10 group-hover:border-white/20" : "bg-transparent border-white/5 text-white/30"}`}
-              title={modelName}>
-              {modelName}
-            </div>
-          )}
-          {agent.tone && (
-            <div className={`px-2.5 py-1 rounded-md text-[10px] font-medium uppercase tracking-wider flex items-center gap-1.5 border backdrop-blur-md transition-colors
-              ${agent.enabled ? "bg-white/5 border-white/10 text-white/80 group-hover:bg-white/10 group-hover:border-white/20" : "bg-transparent border-white/5 text-white/30"}`}>
-              <Activity className="h-3 w-3" />
-              {agent.tone}
-            </div>
-          )}
-          {agent.workspace && (
-            <div className={`px-2.5 py-1 rounded-md text-[10px] font-medium uppercase tracking-wider flex items-center gap-1.5 border backdrop-blur-md transition-colors
-              ${agent.enabled ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-300 group-hover:bg-emerald-500/10 group-hover:border-emerald-500/30" : "bg-transparent border-white/5 text-white/30"}`}
-              title={`Workspace: ${agent.workspace}`}>
-              <FolderOpen className="h-3 w-3" />
-              <span className="truncate max-w-[100px]">Workspace</span>
-            </div>
-          )}
-        </div>
-
-        {/* Dynamic configuration stats based on availability */}
-        <div className="mt-6 pt-5 border-t border-white/5 grid grid-cols-4 gap-2">
-          <div className="flex flex-col gap-1 items-start bg-white/[0.02] rounded-lg p-2.5 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-white/40 flex items-center gap-1.5">
-              <Wrench className="h-3 w-3 text-emerald-400/70" />
-              Tools
-            </span>
-            <span className={`text-sm font-semibold font-mono ${agent.enabled ? "text-white/90" : "text-white/30"}`}>
-              {toolsCount}
-            </span>
-          </div>
-          <div className="flex flex-col gap-1 items-start bg-white/[0.02] rounded-lg p-2.5 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-white/40 flex items-center gap-1.5">
-              <Zap className="h-3 w-3 text-amber-400/70" />
-              Skills
-            </span>
-            <span className={`text-sm font-semibold font-mono ${agent.enabled ? "text-white/90" : "text-white/30"}`}>
-              {skillsCount}
-            </span>
-          </div>
-          <div className="flex flex-col gap-1 items-start bg-white/[0.02] rounded-lg p-2.5 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-white/40 flex items-center gap-1.5">
-              <FileText className="h-3 w-3 text-blue-400/70" />
-              Prompt
-            </span>
-            <span className={`text-sm font-bold ${agent.enabled ? (hasSystemPrompt ? "text-emerald-400" : "text-white/30") : "text-white/20"}`}>
-              {hasSystemPrompt ? "✓" : "—"}
-            </span>
-          </div>
-          <div className="flex flex-col gap-1 items-start bg-white/[0.02] rounded-lg p-2.5 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-white/40 flex items-center gap-1.5">
-              <Gauge className="h-3 w-3 text-purple-400/70" />
-              Iters
-            </span>
-            <span className={`text-sm font-semibold font-mono ${agent.enabled ? "text-white/90" : "text-white/30"}`}>
-              {maxIterations}
-            </span>
-          </div>
-        </div>
-
-        {/* System Prompt */}
-        {agent.systemPrompt && (
-          <div className="mt-3 bg-white/[0.02] rounded-lg p-3 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium tracking-wider text-white/40 uppercase mb-1.5 flex items-center gap-1.5">
-              <FileText className="h-3 w-3 text-blue-400/70" />
-              System Prompt
-            </span>
-            <p className="text-xs text-white/60 font-mono line-clamp-2 leading-relaxed italic">
-              "{agent.systemPrompt}"
-            </p>
-          </div>
-        )}
-
-        {/* Extended Stats */}
-        <div className="mt-3 grid grid-cols-2 gap-2">
-          <div className="flex items-center justify-between bg-white/[0.02] rounded-lg p-2.5 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium tracking-wider text-white/40 uppercase">
-              Tareas
-            </span>
-            <span className={`text-sm font-semibold font-mono ${agent.enabled ? "text-white/90" : "text-white/30"}`}>
-              {agent.taskCount || 0}
-            </span>
-          </div>
-          <div className="flex items-center justify-between bg-white/[0.02] rounded-lg p-2.5 border border-white/5 group-hover:border-white/10 transition-colors">
-            <span className="text-[10px] font-medium tracking-wider text-white/40 uppercase">
-              Éxito
-            </span>
-            <span className={`text-sm font-semibold font-mono ${agent.enabled ? "text-emerald-400/90" : "text-white/30"}`}>
-              {agent.successRate || 0}%
-            </span>
-          </div>
-        </div>
-
-        {/* Footer: status indicator + Dates */}
-        <div className="mt-auto pt-5 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="flex items-center gap-2">
-              <div className={`h-2 w-2 rounded-full ${agent.enabled ? "bg-blue-400 shadow-[0_0_8px_rgba(96,165,250,0.8)] animate-pulse" : "bg-white/20"}`} />
-              <span className={`text-[10px] font-bold tracking-widest uppercase ${agent.enabled ? "text-blue-400" : "text-white/30"}`}>
-                {agent.enabled ? "ACTIVO" : "INACTIVO"}
-              </span>
-            </div>
-            {createdAt && (
-              <div className="flex items-center gap-1.5 text-[10px] text-white/30 font-medium tracking-wider pl-3 border-l border-white/10">
-                <Calendar className="h-3 w-3" />
-                {createdAt}
-              </div>
-            )}
-          </div>
-
-          <div className={`text-xs font-semibold tracking-wide flex items-center gap-1.5 transition-all
-            ${agent.enabled ? "text-white/70 group-hover:text-blue-400 translate-x-1 group-hover:translate-x-0" : "text-white/20"}`}>
-            INGRESAR
-            <span className="transition-transform group-hover:translate-x-1 opacity-0 group-hover:opacity-100 hidden sm:inline-block">→</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}