@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/src/modules/layout/ConnectionStatus.tsx

@@ -1,19 +0,0 @@
-import { useWebSocket } from "@/hooks/useWebSocket";
-import type { WebSocketStatus } from "@/types";
-
-const dotClass: Record<WebSocketStatus, string> = {
-  connected: "bg-hive-connected",
-  connecting: "bg-hive-thinking animate-pulse",
-  disconnected: "bg-hive-disconnected",
-  error: "bg-hive-disconnected",
-};
-
-export function ConnectionStatus() {
-  const { status } = useWebSocket();
-  return (
-    <div className="flex items-center gap-2 text-xs text-muted-foreground">
-      <span className={`inline-block h-2 w-2 rounded-full ${dotClass[status]}`} />
-      <span className="hidden sm:inline">WS: {status}</span>
-    </div>
-  );
-}

package/packages/hive-ui/src/modules/layout/Header.tsx

@@ -1,20 +0,0 @@
-import { ConnectionStatus } from "./ConnectionStatus";
-import { ThemeToggle } from "./ThemeToggle";
-import { SidebarTrigger } from "@/components/ui/sidebar";
-
-export function Header() {
-  return (
-    <header className="flex h-12 items-center justify-between border-b px-4">
-      <div className="flex items-center gap-2">
-        <SidebarTrigger className="h-8 w-8" />
-        <h1 className="text-sm font-semibold tracking-tight">
-          <span className="text-primary">⬡</span> Hive
-        </h1>
-      </div>
-      <div className="flex items-center gap-3">
-        <ConnectionStatus />
-        <ThemeToggle />
-      </div>
-    </header>
-  );
-}

package/packages/hive-ui/src/modules/layout/HiveSidebar.tsx

@@ -1,173 +0,0 @@
-import {
-  LayoutDashboard,
-  Bot,
-  Layers,
-  Cable,
-  ScrollText,
-  SlidersHorizontal,
-  MessageSquare,
-  Brain,
-  ShieldAlert,
-  Wrench,
-  Server,
-  User,
-  Wand2,
-  FolderKanban,
-  StickyNote,
-  Clock,
-  type LucideProps,
-} from "lucide-react";
-import { NavLink } from "@/components/NavLink";
-import { useLocation } from "react-router-dom";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "@/components/ui/sidebar";
-
-function Icon({ icon: IconComponent, ...props }: { icon: React.ComponentType<LucideProps> } & LucideProps) {
-  return <IconComponent {...props} />;
-}
-
-const navItems = [
-  { title: "Dashboard", url: "/", icon: LayoutDashboard },
-  { title: "Web Chat", url: "/chat", icon: MessageSquare },
-  { title: "Agentes", url: "/agents", icon: Bot },
-  { title: "Proyectos", url: "/projects", icon: FolderKanban },
-  { title: "Canales", url: "/channels", icon: MessageSquare },
-  { title: "Providers", url: "/providers", icon: Brain },
-  { title: "Canvas", url: "/canvas", icon: Layers },
-  { title: "Bridge", url: "/bridge", icon: Cable },
-  { title: "Logs", url: "/logs", icon: ScrollText },
-];
-
-const configGroups = [
-  {
-    label: "Entorno",
-    items: [
-      { id: "herramientas", label: "Herramientas", icon: Wrench },
-      { id: "mcp", label: "MCP Servers", icon: Server },
-      { id: "skills", label: "Skills", icon: Wand2 },
-      { id: "etica", label: "Ética", icon: ShieldAlert },
-    ],
-  },
-  {
-    label: "Usuario",
-    items: [
-      { id: "perfil", label: "Perfil", icon: User },
-    ],
-  },
-];
-
-const cognitiveItems = [
-  { title: "Notas", url: "/notas", icon: StickyNote },
-  { title: "Cron Jobs", url: "/cron-jobs", icon: Clock },
-];
-
-export function AppSidebar() {
-  const location = useLocation();
-  const isConfigActive = location.pathname.startsWith("/settings");
-
-  return (
-    <Sidebar collapsible="icon" className="hive-sidebar">
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Navegación</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {navItems.map((item) => (
-                <SidebarMenuItem key={item.title}>
-                  <SidebarMenuButton asChild>
-                    <NavLink
-                      to={item.url}
-                      end={item.url === "/"}
-                      className="hive-sidebar-item group/item text-white/50 hover:text-white"
-                      activeClassName="hive-sidebar-item--active text-blue-400 font-bold"
-                    >
-                      <Icon icon={item.icon as any} className="h-4 w-4 transition-transform group-hover/item:scale-110" />
-                      <span>{item.title}</span>
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-
-              <div className="h-4" />
-              <p className="px-2 pb-1 text-[10px] font-bold uppercase tracking-widest text-white/20">
-                Cognitivo
-              </p>
-              {cognitiveItems.map((item) => (
-                <SidebarMenuItem key={item.title}>
-                  <SidebarMenuButton asChild>
-                    <NavLink
-                      to={item.url}
-                      className="hive-sidebar-item group/item text-white/50 hover:text-white"
-                      activeClassName="hive-sidebar-item--active text-blue-400 font-bold"
-                    >
-                      <Icon icon={item.icon as any} className="h-4 w-4 transition-transform group-hover/item:scale-110" />
-                      <span>{item.title}</span>
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-
-              <div className="h-4" />
-              <p className="px-2 pb-1 text-[10px] font-bold uppercase tracking-widest text-white/20">
-                Sistema
-              </p>
-              {/* Ajustes del sistema — expands sub-items when active */}
-              <Collapsible open={isConfigActive} asChild>
-                <SidebarMenuItem>
-                  <SidebarMenuButton asChild isActive={isConfigActive}>
-                    <NavLink
-                      to="/settings/herramientas"
-                      className="hive-sidebar-item group/item text-white/50 hover:text-white"
-                      activeClassName="hive-sidebar-item--active text-blue-400 font-bold"
-                    >
-                      <Icon icon={SlidersHorizontal as any} className="h-4 w-4 transition-transform group-hover/item:scale-110" />
-                      <span>Ajustes</span>
-                    </NavLink>
-                  </SidebarMenuButton>
-
-                  <CollapsibleContent>
-                    {configGroups.map((group) => (
-                      <div key={group.label}>
-                        <p className="px-2 pt-2 pb-0.5 text-[10px] font-semibold uppercase tracking-widest text-sidebar-foreground/40">
-                          {group.label}
-                        </p>
-                        <SidebarMenuSub>
-                          {group.items.map((item) => (
-                            <SidebarMenuSubItem key={item.id}>
-                              <SidebarMenuSubButton asChild>
-                                <NavLink
-                                  to={`/settings/${item.id}`}
-                                  className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs"
-                                  activeClassName="text-blue-400 bg-blue-500/5 font-semibold"
-                                >
-                                  <Icon icon={item.icon as any} className="h-3.5 w-3.5" />
-                                  <span>{item.label}</span>
-                                </NavLink>
-                              </SidebarMenuSubButton>
-                            </SidebarMenuSubItem>
-                          ))}
-                        </SidebarMenuSub>
-                      </div>
-                    ))}
-                  </CollapsibleContent>
-                </SidebarMenuItem>
-              </Collapsible>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-    </Sidebar>
-  );
-}

package/packages/hive-ui/src/modules/layout/ThemeToggle.tsx

@@ -1,18 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "@/hooks/useTheme";
-
-// Cast icons to any to bypass React 19 type incompatibility with Lucide
-// This is a known issue where React 19's ReactNode type includes bigint
-// which Lucide's ForwardRefExoticComponent types don't account for
-const SunIcon = Sun as any;
-const MoonIcon = Moon as any;
-
-export function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme();
-  return (
-    <Button variant="ghost" size="icon" onClick={toggleTheme} className="h-8 w-8">
-      {theme === "dark" ? <SunIcon className="h-4 w-4" /> : <MoonIcon className="h-4 w-4" />}
-    </Button>
-  );
-}

package/packages/hive-ui/src/modules/providers/ProviderCard.tsx

@@ -1,319 +0,0 @@
-import { Switch } from "@/components/ui/switch";
-import { Settings, ChevronDown, ChevronRight, Cpu, Plus, KeyRound, Globe, RefreshCw } from "lucide-react";
-import type { Provider, Model } from "@/types";
-import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";
-import { ProviderConfigForm } from "./ProviderConfigForm";
-import { useModels, useProviders } from "@/hooks/useProviders";
-import { useState, useMemo } from "react";
-
-const SettingsIcon = Settings as any;
-const ChevronDownIcon = ChevronDown as any;
-const ChevronRightIcon = ChevronRight as any;
-const CpuIcon = Cpu as any;
-const PlusIcon = Plus as any;
-const KeyRoundIcon = KeyRound as any;
-const GlobeIcon = Globe as any;
-const RefreshCwIcon = RefreshCw as any;
-
-interface ProviderCardProps {
-  provider: Provider;
-  updateProvider: (id: string, data: { apiKey?: string; baseUrl?: string; headers?: Record<string, string>; numCtx?: number | null }) => void;
-  onManageModels?: () => void;
-}
-
-export function ProviderCard({ provider, updateProvider, onManageModels }: ProviderCardProps) {
-  const [configOpen, setConfigOpen] = useState(false);
-  const [modelsExpanded, setModelsExpanded] = useState(false);
-  const [newModelName, setNewModelName] = useState("");
-  const [addingModel, setAddingModel] = useState(false);
-  const [syncing, setSyncing] = useState(false);
-
-  const { models, toggleModel, createModel, syncModels } = useModels();
-  const { toggleProvider } = useProviders();
-
-  // Merge models from store + models embedded in provider (from API)
-  const providerModels = useMemo(() => {
-    const storeModels = models.filter((m) => {
-      const mProviderId = m.providerId || m.provider_id;
-      return mProviderId === provider.id;
-    });
-    // If store has models use those, otherwise use embedded ones from provider
-    return storeModels.length > 0 ? storeModels : (provider.models || []);
-  }, [models, provider.id, provider.models]);
-
-  const activeModels = providerModels.filter(m => m.enabled || m.active);
-
-  const handleSave = (data: { apiKey?: string; baseUrl?: string; headers?: Record<string, string>; numCtx?: number | null }) => {
-    updateProvider(provider.id, data);
-    setConfigOpen(false);
-  };
-
-  const handleProviderToggle = async (active: boolean) => {
-    try {
-      await toggleProvider(provider.id, active);
-    } catch (error) {
-      console.error("Failed to toggle provider:", error);
-    }
-  };
-
-  const handleModelToggle = async (model: Model, active: boolean) => {
-    try {
-      await toggleModel(model.id, active);
-    } catch (error) {
-      console.error("Failed to toggle model:", error);
-    }
-  };
-
-  const handleSyncModels = async () => {
-    setSyncing(true);
-    try {
-      await syncModels(provider.id);
-      setModelsExpanded(true);
-    } catch (error) {
-      console.error("Failed to sync models:", error);
-    } finally {
-      setSyncing(false);
-    }
-  };
-
-  const handleAddModel = async () => {
-    const name = newModelName.trim();
-    if (!name) return;
-    setAddingModel(true);
-    try {
-      await createModel(provider.id, name);
-      setNewModelName("");
-    } catch (error) {
-      console.error("Failed to add model:", error);
-    } finally {
-      setAddingModel(false);
-    }
-  };
-
-  const isActive = !!provider.active;
-  const baseUrl = provider.base_url || provider.baseUrl;
-  const isLocal = provider.id === "ollama"
-    || baseUrl?.includes("localhost")
-    || baseUrl?.includes("127.0.0.1");
-
-  return (
-    <div className={`hive-card group overflow-hidden flex flex-col gap-0 transition-all duration-500 ${
-      isActive ? 'hive-card--active' : 'opacity-70 grayscale-[0.5] hover:grayscale-0 hover:opacity-100'
-    }`}>
-
-      {/* ── Header ── */}
-      <div className="hive-card-body pb-3">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex items-center gap-3 min-w-0">
-            <div className={`shrink-0 h-10 w-10 sm:h-11 sm:w-11 rounded-xl flex items-center justify-center border transition-all duration-500 ${
-              isActive
-                ? 'bg-blue-500/10 border-blue-500/30 text-blue-400 shadow-[0_0_16px_rgba(59,130,246,0.15)]'
-                : 'bg-white/5 border-white/10 text-white/30'
-            }`}>
-              <CpuIcon className="h-5 w-5" />
-            </div>
-            <div className="min-w-0">
-              <div className="flex items-center gap-2 mb-0.5">
-                <h3 className="font-black text-white tracking-tight text-base sm:text-lg uppercase leading-none truncate">
-                  {provider.name}
-                </h3>
-                {isActive && <div className="hive-status-dot--active h-1.5 w-1.5 shrink-0" />}
-              </div>
-              <p className="text-[11px] text-white/35 font-medium leading-none truncate">
-                {provider.id}
-              </p>
-            </div>
-          </div>
-
-          {/* Toggle */}
-          <div className="flex items-center gap-2 shrink-0">
-            <span className={`hidden sm:block text-[10px] font-black tracking-widest ${isActive ? 'text-blue-400' : 'text-white/30'}`}>
-              {isActive ? 'ON' : 'OFF'}
-            </span>
-            <Switch
-              checked={isActive}
-              onCheckedChange={handleProviderToggle}
-              className="data-[state=checked]:bg-blue-500"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* ── Info rows ── */}
-      <div className="px-5 pb-3 space-y-2 border-b border-white/5">
-        {/* API Key row */}
-        <div className="flex items-center gap-2 min-w-0">
-          <KeyRoundIcon className={`h-3.5 w-3.5 shrink-0 ${provider.has_api_key ? 'text-emerald-400' : isLocal ? 'text-amber-400' : 'text-white/20'}`} />
-          <span className="text-[11px] font-mono truncate">
-            {provider.masked_api_key
-              ? <span className="text-white/50">{provider.masked_api_key}</span>
-              : provider.has_api_key
-                ? <span className="text-white/50">••••••••••••••••</span>
-                : isLocal
-                  ? <span className="text-amber-400/70">Local — sin API key</span>
-                  : <span className="text-white/25">Sin API key</span>
-            }
-          </span>
-        </div>
-
-        {/* Base URL row */}
-        {baseUrl && (
-          <div className="flex items-center gap-2 min-w-0">
-            <GlobeIcon className="h-3.5 w-3.5 shrink-0 text-white/20" />
-            <span className="text-[11px] text-white/40 truncate font-mono">{baseUrl}</span>
-          </div>
-        )}
-
-        {/* num_ctx row — solo providers locales */}
-        {isLocal && (
-          <div className="flex items-center gap-2 min-w-0">
-            <CpuIcon className="h-3.5 w-3.5 shrink-0 text-white/20" />
-            <span className="text-[11px] text-white/40 font-mono">
-              ctx: <span className={provider.num_ctx ? "text-amber-400/70" : "text-white/25"}>
-                {provider.num_ctx ? `${provider.num_ctx.toLocaleString()} tokens` : "32 768 (default)"}
-              </span>
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* ── Models section ── */}
-      <div className="px-5 py-3 flex-1">
-        <div className="flex items-center gap-2 mb-2">
-          <button
-            type="button"
-            className="flex items-center gap-2 flex-1 text-left text-[10px] font-black uppercase tracking-widest text-white/40 hover:text-white transition-colors"
-            onClick={() => setModelsExpanded(!modelsExpanded)}
-          >
-            {modelsExpanded ? <ChevronDownIcon className="h-3 w-3" /> : <ChevronRightIcon className="h-3 w-3" />}
-            MODELOS
-            <span className="hive-tag scale-90 origin-left">
-              {activeModels.length}/{providerModels.length}
-            </span>
-          </button>
-
-          {/* Botón sync — solo providers locales */}
-          {isLocal && (
-            <button
-              type="button"
-              onClick={handleSyncModels}
-              disabled={syncing}
-              title="Sincronizar modelos instalados en Ollama"
-              className="h-6 w-6 flex items-center justify-center rounded-md text-white/30 hover:text-amber-400 hover:bg-amber-400/10 disabled:opacity-40 transition-colors"
-            >
-              <RefreshCwIcon className={`h-3 w-3 ${syncing ? 'animate-spin' : ''}`} />
-            </button>
-          )}
-        </div>
-
-        {/* Collapsed preview — up to 3 chips */}
-        {!modelsExpanded && providerModels.length > 0 && (
-          <div className="flex flex-wrap gap-1 mt-1">
-            {providerModels.slice(0, 3).map(m => (
-              <span key={m.id} className={`hive-tag text-[10px] ${m.enabled || m.active ? '' : 'opacity-40'}`}>
-                {m.name.split('/').pop() || m.name}
-              </span>
-            ))}
-            {providerModels.length > 3 && (
-              <span className="hive-tag text-[10px] text-white/30">+{providerModels.length - 3}</span>
-            )}
-          </div>
-        )}
-
-        {/* Expanded list + add model */}
-        {modelsExpanded && (
-          <div className="space-y-1">
-            <div className="hive-scroll max-h-44 overflow-y-auto flex flex-col gap-0.5 pr-1">
-              {providerModels.length === 0 && (
-                <p className="text-[11px] text-white/25 py-2 text-center">Sin modelos configurados</p>
-              )}
-              {providerModels.map((model) => {
-                const modelActive = model.enabled || !!model.active;
-                return (
-                  <div
-                    key={model.id}
-                    className={`flex items-center justify-between px-2.5 py-1.5 rounded-lg transition-colors ${
-                      modelActive ? 'bg-white/5' : 'bg-transparent opacity-40'
-                    }`}
-                  >
-                    <span className="text-[11px] font-medium text-white truncate flex-1 mr-3">
-                      {model.name}
-                    </span>
-                    <Switch
-                      checked={modelActive}
-                      onCheckedChange={(checked) => handleModelToggle(model, checked)}
-                      className="scale-[0.7] origin-right data-[state=checked]:bg-blue-400"
-                    />
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Add model input */}
-            <div className="flex items-center gap-1.5 pt-1.5 border-t border-white/5">
-              <input
-                type="text"
-                value={newModelName}
-                onChange={(e) => setNewModelName(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleAddModel()}
-                placeholder="nombre-del-modelo"
-                className="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-md px-2 h-7 text-[11px] text-white/70 placeholder-white/20 focus:outline-none focus:border-blue-500/50 transition-all font-mono"
-              />
-              <button
-                type="button"
-                onClick={handleAddModel}
-                disabled={addingModel || !newModelName.trim()}
-                className="shrink-0 h-7 px-2.5 flex items-center gap-1 rounded-md bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[10px] font-black uppercase tracking-wider hover:bg-blue-500/20 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-              >
-                <PlusIcon className="h-3 w-3" />
-                <span className="hidden xs:inline">ADD</span>
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* ── Footer ── */}
-      <div className="px-4 py-3 border-t border-white/5 flex items-center justify-between gap-2 overflow-hidden">
-        <div className="flex items-center gap-3 min-w-0 overflow-hidden">
-          <div className="hive-stat shrink-0">
-            <span className="hive-stat__label">Uptime</span>
-            <span className="hive-stat__value">99.9%</span>
-          </div>
-          <div className="hive-stat shrink-0">
-            <span className="hive-stat__label">Estado</span>
-            <span className={`hive-stat__value ${isActive ? 'text-emerald-400' : 'text-white/30'}`}>
-              {isActive ? 'Activo' : 'Inactivo'}
-            </span>
-          </div>
-        </div>
-
-        <Dialog open={configOpen} onOpenChange={setConfigOpen}>
-          <DialogTrigger asChild>
-            <button className="hive-btn hive-btn--ghost h-8 px-2.5 text-[10px] font-black uppercase tracking-widest text-blue-400 shrink-0 flex items-center gap-1.5">
-              <SettingsIcon className="h-3 w-3" />
-              <span>CONFIG</span>
-            </button>
-          </DialogTrigger>
-          <DialogContent className="rounded-xl border border-white/10 p-0 overflow-hidden w-[calc(100vw-2rem)] max-w-md bg-[#09090b]">
-            <DialogTitle className="sr-only">Configurar {provider.name}</DialogTitle>
-            <div className="p-5 border-b border-white/5 bg-white/5 relative overflow-hidden">
-              <div className="absolute -top-10 -right-10 h-32 w-32 bg-blue-600/10 rounded-full blur-[80px] pointer-events-none" />
-              <h2 className="text-lg font-black text-white uppercase tracking-tighter">{provider.name}</h2>
-              <p className="text-xs text-white/40 font-medium mt-0.5">Autenticación y punto de enlace.</p>
-            </div>
-            <div className="p-5">
-              <ProviderConfigForm
-                provider={provider}
-                onSave={handleSave}
-                onCancel={() => setConfigOpen(false)}
-              />
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
-
-      <div className={`hive-strip--bottom ${!isActive ? 'opacity-20' : ''}`} />
-    </div>
-  );
-}