@johpaz/hive 1.7.2 → 1.7.3

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

@@ -1,241 +0,0 @@
-import { useEffect, useState } from "react";
-import { useProjectsStore, type Project, type Task } from "@/stores/projectsStore";
-import { RefreshCw, ChevronDown, ChevronRight, FolderOpen, CheckCircle2, Circle, Loader2, XCircle, MinusCircle, type LucideProps } from "lucide-react";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
-
-function Icon({ icon: IconComponent, ...props }: { icon: React.ComponentType<LucideProps> } & LucideProps) {
-  return <IconComponent {...props} />;
-}
-
-const PROJECT_TYPE_LABELS: Record<string, string> = {
-  code: "Código",
-  research: "Investigación",
-  content: "Contenido",
-  data: "Datos",
-  general: "General",
-};
-
-const PROJECT_TYPE_COLORS: Record<string, string> = {
-  code: "bg-blue-500/10 text-blue-400 border-blue-500/20",
-  research: "bg-purple-500/10 text-purple-400 border-purple-500/20",
-  content: "bg-green-500/10 text-green-400 border-green-500/20",
-  data: "bg-orange-500/10 text-orange-400 border-orange-500/20",
-  general: "bg-gray-500/10 text-gray-400 border-gray-500/20",
-};
-
-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",
-  paused: "bg-gray-500/10 text-gray-400 border-gray-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",
-};
-
-const STATUS_LABELS: Record<string, string> = {
-  active: "Activo",
-  pending: "Pendiente",
-  paused: "Pausado",
-  done: "Completado",
-  failed: "Fallido",
-  in_progress: "En progreso",
-  completed: "Completada",
-  blocked: "Bloqueada",
-};
-
-function TaskStatusIcon({ status }: { status: string }) {
-  switch (status) {
-    case "completed": return <Icon icon={CheckCircle2} className="h-3.5 w-3.5 text-green-400" />;
-    case "in_progress": return <Icon icon={Loader2} className="h-3.5 w-3.5 text-yellow-400 animate-spin" />;
-    case "failed": return <Icon icon={XCircle} className="h-3.5 w-3.5 text-red-400" />;
-    case "blocked": return <Icon icon={MinusCircle} className="h-3.5 w-3.5 text-orange-400" />;
-    default: return <Icon icon={Circle} className="h-3.5 w-3.5 text-muted-foreground" />;
-  }
-}
-
-function TaskRow({ task }: { task: Task }) {
-  return (
-    <div className="flex items-center gap-3 py-1.5 px-3 rounded-md hover:bg-white/5 transition-colors group">
-      <TaskStatusIcon status={task.status} />
-      <span className="text-sm flex-1 text-white/40 group-hover:text-white/80 transition-colors">
-        {task.name}
-      </span>
-      {task.description && (
-        <span className="text-xs text-white/20 hidden sm:block max-w-[200px] truncate">
-          {task.description}
-        </span>
-      )}
-      <div className="flex items-center gap-2 ml-auto">
-        {task.status === "in_progress" && (
-          <div className="w-16">
-            <Progress value={task.progress} className="h-1" />
-          </div>
-        )}
-        <span className="text-[11px] text-white/30 w-8 text-right">
-          {task.progress}%
-        </span>
-      </div>
-    </div>
-  );
-}
-
-function ProjectCard({ project }: { project: Project }) {
-  const [expanded, setExpanded] = useState(project.status === "active" || project.status === "pending");
-  console.log("[ProjectsPage] ProjectCard - Project:", expanded);
-  return (
-    <div className="hive-card group overflow-hidden mt-10">
-      {/* Project header */}
-      <button
-        className="w-full flex items-center gap-3 p-4 hover:bg-white/5 transition-colors text-left"
-        onClick={() => setExpanded(!expanded)}
-      >
-        <Icon
-          icon={expanded ? ChevronDown : ChevronRight}
-          className="h-4 w-4 text-white/30 shrink-0"
-        />
-        <Icon icon={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="font-medium text-sm text-white">{project.name}</span>
-            <Badge
-              variant="outline"
-              className={`text-[10px] px-1.5 py-0 ${PROJECT_TYPE_COLORS[project.type] ?? PROJECT_TYPE_COLORS.general}`}
-            >
-              {PROJECT_TYPE_LABELS[project.type] ?? project.type}
-            </Badge>
-            <Badge
-              variant="outline"
-              className={`text-[10px] px-1.5 py-0 ${STATUS_COLORS[project.status] ?? ""}`}
-            >
-              {STATUS_LABELS[project.status] ?? project.status}
-            </Badge>
-          </div>
-          {project.description && (
-            <p className="hive-subtitle !mt-0.5 truncate">{project.description}</p>
-          )}
-        </div>
-
-        <div className="flex items-center gap-3 shrink-0">
-          <div className="flex items-center gap-1.5">
-            <div className="w-20">
-              <Progress value={project.progress} className="h-1.5" />
-            </div>
-            <span className="text-xs text-white/30 w-8 text-right">{project.progress}%</span>
-          </div>
-          {(project.tasks ?? []).length > 0 && (
-            <span className="text-xs text-white/30">
-              {(project.tasks ?? []).filter((t) => t.status === "completed").length}/{(project.tasks ?? []).length}
-            </span>
-          )}
-        </div>
-      </button>
-
-      {/* Tasks list */}
-      {expanded && (project.tasks ?? []).length > 0 && (
-        <div className="border-t border-white/5 px-2 py-2">
-          {(project.tasks ?? []).map((task) => (
-            <TaskRow key={task.id} task={task} />
-          ))}
-        </div>
-      )}
-
-      {expanded && (project.tasks ?? []).length === 0 && (
-        <div className="border-t border-white/5 px-4 py-3 text-xs text-white/20">
-          Sin tareas registradas
-        </div>
-      )}
-    </div>
-  );
-}
-
-type FilterTab = "active" | "all" | "done";
-
-export function ProjectsPage() {
-  const { projects, isLoading, fetchProjects, fetchActiveProjects } = useProjectsStore();
-  const [filter, setFilter] = useState<FilterTab>("active");
-
-  const load = () => {
-    if (filter === "active") fetchActiveProjects();
-    else if (filter === "done") fetchProjects("done");
-    else fetchProjects();
-  };
-
-  useEffect(() => {
-    load();
-  }, [filter]);
-
-  const tabs: { key: FilterTab; label: string }[] = [
-    { key: "active", label: "Activos" },
-    { key: "all", label: "Todos" },
-    { key: "done", label: "Completados" },
-  ];
-
-  return (
-    <div className="hive-page">
-      <div className="hive-page-container">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <div className="flex items-center gap-3 mb-2">
-              <div className="hive-page-header__dot" />
-              <span className="hive-page-header__label">GESTIÓN</span>
-            </div>
-            <h1 className="hive-title-page">
-              Proyectos<span className="hive-title-page__accent">.</span>
-            </h1>
-            <p className="hive-subtitle">
-              Seguimiento de tareas y proyectos activos del agente
-            </p>
-          </div>
-          <button
-            className="hive-btn hive-btn--primary"
-            onClick={load}
-            disabled={isLoading}
-          >
-            <Icon icon={RefreshCw} className={`h-3.5 w-3.5 mr-1.5 ${isLoading ? "animate-spin" : ""}`} />
-            Actualizar
-          </button>
-        </div>
-
-        {/* Filter tabs */}
-        <div className="flex gap-1 mt-6 bg-white/[0.02] rounded-xl p-1 border border-white/5">
-          {tabs.map((tab) => (
-            <button
-              key={tab.key}
-              onClick={() => setFilter(tab.key)}
-              className={`px-6 py-2 rounded-xl text-[10px] font-black tracking-widest uppercase transition-all duration-300 ${filter === tab.key
-                ? 'bg-blue-600 text-white shadow-btn-primary'
-                : 'text-white/20 hover:text-white/40 hover:bg-white/5'
-                }`}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Content */}
-        <div className="mt-6 space-y-3">
-          {isLoading ? (
-            <div className="hive-empty-state">
-              <Icon icon={Loader2} className="h-5 w-5 animate-spin mr-2" />
-              Cargando proyectos...
-            </div>
-          ) : projects.length === 0 ? (
-            <div className="hive-empty-state">
-              <Icon icon={FolderOpen} className="h-10 w-10 opacity-30 mb-3" />
-              <p className="text-sm text-white/30">No hay proyectos {filter === "active" ? "activos" : ""}</p>
-              <p className="text-xs text-white/15 mt-1">
-                El agente creará proyectos automáticamente cuando reciba tareas complejas
-              </p>
-            </div>
-          ) : (
-            projects.filter(Boolean).map((project) => (
-              <ProjectCard key={project.id} project={project} />
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,111 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Plus, type LucideProps } from "lucide-react";
-import { ProviderList } from "@/modules/providers";
-import { ProviderFailoverConfig } from "@/modules/providers";
-import { Dialog, DialogContent, DialogTrigger, DialogTitle, DialogHeader, DialogDescription } from "@/components/ui/dialog";
-import { ProviderConfigForm } from "@/modules/providers/ProviderConfigForm";
-import { useProviders } from "@/hooks/useProviders";
-import { useState } from "react";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import type { Provider } from "@/types";
-import type React from "react";
-
-// Type assertion to fix React 19 @types/react + lucide-react incompatibility
-const PlusIcon = Plus as React.ComponentType<LucideProps>;
-
-export function ProvidersPage() {
-  const { providers, updateProvider } = useProviders();
-  const [open, setOpen] = useState(false);
-  const [selectedToAdd, setSelectedToAdd] = useState<Provider | null>(null);
-
-  // Providers that exist but are fully inactive (not yet configured/activated)
-  const inactiveProviders = providers.filter((p) => !p.active);
-
-  const handleAdd = (config: Record<string, any>) => {
-    if (selectedToAdd) {
-      updateProvider(selectedToAdd.id, {
-        active: true,
-        config: { ...selectedToAdd.config, ...config }
-      });
-      setOpen(false);
-      setSelectedToAdd(null);
-    }
-  };
-
-  return (
-    <div className="space-y-4 mt-6 sm:mt-10">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div>
-          <div className="flex items-center gap-3 mb-2">
-            <div className="hive-page-header__dot" />
-            <span className="hive-page-header__label">INFRAESTRUCTURA</span>
-          </div>
-          <h2 className="hive-title-page">Providers de IA<span className="hive-title-page__accent">.</span></h2>
-        </div>
-        <Dialog open={open} onOpenChange={(val) => { setOpen(val); if (!val) setSelectedToAdd(null); }}>
-          <DialogTrigger asChild>
-            <button className="hive-btn hive-btn--primary" disabled={inactiveProviders.length === 0}>
-              <PlusIcon className="mr-1 h-4 w-4" />
-              Añadir Provider
-            </button>
-          </DialogTrigger>
-          <DialogContent className="hive-card border-white/10 p-0 overflow-hidden max-w-md bg-[#09090b]">
-            <div className="p-6 border-b border-white/5 bg-white/5 relative overflow-hidden">
-              <div className="hive-glow-blob hive-glow-blob--blue -top-10 -right-10 h-32 w-32 opacity-20" />
-              <DialogTitle className="text-xl font-black text-white uppercase tracking-tighter">Añadir Provider</DialogTitle>
-              <DialogDescription className="text-xs text-white/40 font-medium mt-1">
-                Selecciona un provider inactivo para configurarlo y activarlo.
-              </DialogDescription>
-            </div>
-            <div className="space-y-4 p-6">
-              <Select
-                value={selectedToAdd?.id || ""}
-                onValueChange={(val) => setSelectedToAdd(inactiveProviders.find(p => p.id === val) || null)}
-              >
-                <SelectTrigger className="hive-select-trigger">
-                  <SelectValue placeholder="Selecciona un provider" />
-                </SelectTrigger>
-                <SelectContent className="hive-select-content">
-                  {inactiveProviders.length === 0 && (
-                    <SelectItem value="none" disabled className="hive-select-item">Todos los providers están activos</SelectItem>
-                  )}
-                  {inactiveProviders.map(p => (
-                    <SelectItem key={p.id} value={p.id} className="hive-select-item">{p.name}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-
-              {selectedToAdd && (
-                <div className="pt-2 border-t border-white/5 mt-4">
-                  <ProviderConfigForm
-                  provider={selectedToAdd}
-                  onSave={handleAdd}
-                  onCancel={() => { setOpen(false); setSelectedToAdd(null); }}
-                />
-                </div>
-              )}
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-
-      <Tabs defaultValue="available" className="w-full">
-        <TabsList className="hive-tabs-list mb-8">
-          <TabsTrigger value="available" className="hive-tabs-trigger">
-            Proveedores Disponibles
-          </TabsTrigger>
-          <TabsTrigger value="configured" className="hive-tabs-trigger">
-            Configurados
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="available">
-          <ProviderList />
-        </TabsContent>
-        <TabsContent value="configured">
-          <ProviderFailoverConfig />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

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

@@ -1,147 +0,0 @@
-import { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { EthicsTemplateGallery } from "@/modules/agent-config/ethics/EthicsTemplateGallery";
-import { ToolManager } from "@/modules/agent-config/tools/ToolManager";
-import { MCPServerList } from "@/modules/agent-config/mcp/MCPServerList";
-import { UserProfileEditor } from "@/modules/agent-config/user/UserProfileEditor";
-import { SkillsTab } from "@/modules/agent-config/skills/SkillsTab";
-import { NotesPanel } from "@/components/NotesPanel";
-import { CronJobsPanel } from "@/components/CronJobsPanel";
-import { useSkills, useTools, useMCPServers } from "@/hooks/useProviders";
-
-type PanelId = "etica" | "herramientas" | "mcp" | "skills" | "perfil" | "notas" | "cron-jobs";
-
-function PanelContent({ panel }: { panel: PanelId }) {
-  switch (panel) {
-    case "etica":
-      return (
-        <div className="p-4">
-          <EthicsTemplateGallery />
-        </div>
-      );
-    case "herramientas":
-      return (
-        <div className="p-4">
-          <ToolManager />
-        </div>
-      );
-    case "mcp":
-      return (
-        <div className="p-4">
-          <MCPServerList />
-        </div>
-      );
-    case "skills":
-      return (
-        <div className="p-4">
-          <SkillsTab />
-        </div>
-      );
-    case "perfil":
-      return (
-        <div className="p-4">
-          <UserProfileEditor />
-        </div>
-      );
-    case "notas":
-      return (
-        <div className="p-4">
-          <NotesPanel />
-        </div>
-      );
-    case "cron-jobs":
-      return (
-        <div className="p-4">
-          <CronJobsPanel />
-        </div>
-      );
-    default:
-      return null;
-  }
-}
-
-const VALID_PANELS: PanelId[] = ["etica", "herramientas", "mcp", "skills", "perfil", "notas", "cron-jobs"];
-
-export function SettingsPage({ forcePanel }: { forcePanel?: PanelId }) {
-  const { panel } = useParams<{ panel: string }>();
-  const { fetchSkills } = useSkills();
-  const { fetchTools } = useTools();
-  const { fetchMCPServers } = useMCPServers();
-
-  useEffect(() => {
-    fetchSkills();
-    fetchTools();
-    fetchMCPServers();
-  }, [fetchSkills, fetchTools, fetchMCPServers]);
-
-  const activePanel: PanelId = forcePanel || (VALID_PANELS.includes(panel as PanelId)
-    ? (panel as PanelId)
-    : "herramientas");
-
-  const panelTitles: Record<PanelId, { title: string; subtitle: string; eyebrow: string }> = {
-    etica: {
-      eyebrow: "PROTOCOLOS DE CONDUCTA",
-      title: "Ética & Alineación",
-      subtitle: "Configura los límites morales y el comportamiento base de tus agentes."
-    },
-    herramientas: {
-      eyebrow: "CAPACIDADES DINÁMICAS",
-      title: "Gestión de Herramientas",
-      subtitle: "Habilita y configura las funciones que tus agentes pueden ejecutar."
-    },
-    mcp: {
-      eyebrow: "CONECTIVIDAD EXTERNA",
-      title: "Servidores MCP",
-      subtitle: "Conecta Hive con fuentes de datos externas y herramientas de terceros."
-    },
-    skills: {
-      eyebrow: "HABILIDADES ESPECIALIZADAS",
-      title: "Galería de Skills",
-      subtitle: "Nodos cognitivos preconfigurados para tareas específicas de alto nivel."
-    },
-    perfil: {
-      eyebrow: "IDENTIDAD DEL OPERADOR",
-      title: "Perfil de Usuario",
-      subtitle: "Gestiona tu información personal y preferencias de la interfaz."
-    },
-    notas: {
-      eyebrow: "MEMORIA OPERATIVA",
-      title: "Notas del Sistema",
-      subtitle: "Registro de información persistente y recordatorios del enjambre."
-    },
-    "cron-jobs": {
-      eyebrow: "AUTOMATIZACIÓN TEMPORAL",
-      title: "Tareas Programadas",
-      subtitle: "Gestión de ejecuciones recurrentes y disparadores cron."
-    }
-  };
-
-  const { title, subtitle, eyebrow } = panelTitles[activePanel];
-
-  return (
-    <div className="hive-page-container">
-      <div className="hive-page-header">
-        <div className="relative z-10">
-          <div className="hive-page-header__eyebrow">
-            <div className="hive-page-header__dot" />
-            <span className="hive-page-header__label">{eyebrow}</span>
-          </div>
-          <h2 className="hive-title-page">
-            {title.split(' & ')[0]} {title.includes(' & ') && <span className="hive-title-page__accent">& {title.split(' & ')[1]}</span>}
-            {title.includes(' ') && !title.includes(' & ') && (
-              <>
-                {title.split(' ')[0]} <span className="hive-title-page__accent">{title.split(' ').slice(1).join(' ')}</span>
-              </>
-            )}
-            {!title.includes(' ') && title}
-          </h2>
-          <p className="hive-subtitle">{subtitle}</p>
-        </div>
-      </div>
-
-      <div className="animate-fade-in">
-        <PanelContent panel={activePanel} />
-      </div>
-    </div>
-  );
-}