@johpaz/hive 1.7.2 → 1.7.3

package/packages/hive-ui/package.json

@@ -1,90 +0,0 @@
-{
-  "name": "@johpaz/hive-ui",
-  "private": true,
-  "version": "1.7.2",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:dev": "vite build --mode development",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "dependencies": {
-    "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.14",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tanstack/react-query": "^5.83.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.4.2",
-    "lucide-react": "^0.462.0",
-    "next-themes": "^0.3.0",
-    "react": "^18.3.1",
-    "react-day-picker": "^8.10.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.61.1",
-    "react-resizable-panels": "^2.1.9",
-    "react-router-dom": "^7.1.0",
-    "recharts": "^2.15.4",
-    "remark-gfm": "^4.0.1",
-    "sonner": "^1.7.4",
-    "sweetalert2": "^11.26.21",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^0.9.9",
-    "zod": "^3.25.76",
-    "zustand": "^5.0.11"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.32.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@testing-library/jest-dom": "^6.6.0",
-    "@testing-library/react": "^16.0.0",
-    "@tailwindcss/vite": "4.2.1",
-    "@types/node": "^22.16.5",
-    "@types/react": "^18.3.23",
-    "@types/react-dom": "^18.3.7",
-    "@vitejs/plugin-react": "^5.1.4",
-    "eslint": "^9.32.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^15.15.0",
-    "jsdom": "^20.0.3",
-    "tailwindcss": "^4.2.1",
-    "typescript": "5.9.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^7.3.1",
-    "vitest": "^3.2.4"
-  }
-}

package/packages/hive-ui/public/placeholder.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/packages/hive-ui/src/App.tsx

@@ -1,115 +0,0 @@
-import { Toaster } from "@/components/ui/toaster";
-import { Toaster as Sonner } from "@/components/ui/sonner";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route, useNavigate, useLocation } from "react-router-dom";
-import { AppLayout } from "@/modules/layout/AppLayout";
-import { DashboardPage } from "@/pages/DashboardPage";
-import { AgentsPage } from "@/pages/AgentsPage";
-import { AgentDetailPage } from "@/pages/AgentDetailPage";
-import { SettingsPage } from "@/pages/SettingsPage";
-import { AgentNewPage } from "@/pages/AgentNewPage";
-import { CanvasPage } from "@/pages/CanvasPage";
-import { BridgePage } from "@/pages/BridgePage";
-import { LogsPage } from "@/pages/LogsPage";
-import { ChannelsPage } from "@/pages/ChannelsPage";
-import { ProjectsPage } from "@/pages/ProjectsPage";
-import { ProvidersPage } from "@/pages/ProvidersPage";
-import { WebChatPage } from "@/pages/WebChatPage";
-import SetupPage from "@/pages/SetupPage";
-import NotFound from "@/pages/NotFound";
-import { useInitializeGlobalConfig } from "@/stores/useGlobalConfigStore";
-import { useUserStore } from "@/stores/userStore";
-import { WelcomeDialog } from "@/components/WelcomeDialog";
-import { useEffect, useState } from "react";
-import { BeeLoader } from "@/components/ui/bee-loader";
-
-
-const queryClient = new QueryClient();
-
-const AppContent = () => {
-  useInitializeGlobalConfig();
-
-  const fetchUser = useUserStore(s => s.fetchUser);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [setupChecked, setSetupChecked] = useState(false);
-
-  useEffect(() => {
-    // Capturar token de la URL si existe
-    const params = new URLSearchParams(window.location.search);
-    const token = params.get("token");
-    if (token) {
-      localStorage.setItem("hive-auth-token", token);
-      const newUrl = window.location.pathname + window.location.hash;
-      window.history.replaceState({}, "", newUrl);
-    }
-
-    // Verificar si el setup está completo y redirigir según corresponda
-    fetch("/api/setup/status")
-      .then(r => r.json())
-      .then(({ setupMode }) => {
-        if (setupMode && location.pathname !== "/setup") {
-          // Primera ejecución → ir al setup
-          navigate("/setup", { replace: true });
-        } else if (!setupMode && location.pathname === "/setup") {
-          // Ya configurado y el usuario navegó a /setup manualmente → al dashboard
-          navigate("/", { replace: true });
-        }
-        setSetupChecked(true);
-        if (!setupMode) fetchUser();
-      })
-      .catch(() => {
-        // Si el gateway no responde todavía, dejamos que el usuario vea lo que hay
-        setSetupChecked(true);
-        fetchUser();
-      });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // No renderizar nada hasta saber si hay que redirigir (evita flash)
-  if (!setupChecked) return null;
-
-  return (
-    <>
-      <BeeLoader />
-      <WelcomeDialog />
-
-      <Routes>
-        <Route path="/setup" element={<SetupPage />} />
-        <Route element={<AppLayout />}>
-          <Route path="/" element={<DashboardPage />} />
-          <Route path="/chat" element={<WebChatPage />} />
-          <Route path="/agents" element={<AgentsPage />} />
-          <Route path="/agents/new" element={<AgentNewPage />} />
-          <Route path="/agents/:id" element={<AgentDetailPage />} />
-          <Route path="/notas" element={<SettingsPage forcePanel="notas" />} />
-          <Route path="/cron-jobs" element={<SettingsPage forcePanel="cron-jobs" />} />
-          <Route path="/settings" element={<SettingsPage />} />
-          <Route path="/settings/:panel" element={<SettingsPage />} />
-          <Route path="/canvas" element={<CanvasPage />} />
-          <Route path="/canvas/:sessionId" element={<CanvasPage />} />
-          <Route path="/projects" element={<ProjectsPage />} />
-          <Route path="/bridge" element={<BridgePage />} />
-          <Route path="/channels" element={<ChannelsPage />} />
-          <Route path="/providers" element={<ProvidersPage />} />
-          <Route path="/logs" element={<LogsPage />} />
-        </Route>
-        <Route path="*" element={<NotFound />} />
-      </Routes>
-    </>
-  );
-};
-
-const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <TooltipProvider>
-      <Toaster />
-      <Sonner />
-      <BrowserRouter>
-        <AppContent />
-      </BrowserRouter>
-    </TooltipProvider>
-  </QueryClientProvider>
-);
-
-export default App;

package/packages/hive-ui/src/components/CronJobsPanel.tsx

@@ -1,200 +0,0 @@
-import React, { useEffect } from 'react';
-import { useNotesAndCronsStore } from '../stores/useNotesAndCronsStore';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from './ui/card';
-import { ScrollArea } from './ui/scroll-area';
-import { Clock, Loader2, Calendar, Activity, MessageCircle, Send } from 'lucide-react';
-import { Switch } from './ui/switch';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-
-// ── Channel icon helper ────────────────────────────────────────────────────────
-function ChannelBadge({ channelId }: { channelId?: string | null }) {
-    if (!channelId || channelId === 'webchat') {
-        return (
-            <span className="inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20">
-                <MessageCircle className="w-2.5 h-2.5" />
-                Web
-            </span>
-        );
-    }
-    if (channelId === 'telegram') {
-        return (
-            <span className="inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-sky-500/10 text-sky-400 border border-sky-500/20">
-                <Send className="w-2.5 h-2.5" />
-                Telegram
-            </span>
-        );
-    }
-    return (
-        <span className="inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-muted/40 text-muted-foreground border border-white/10">
-            {channelId}
-        </span>
-    );
-}
-
-// ── Expiry label ───────────────────────────────────────────────────────────────
-function ExpiryLabel({ expiresAt }: { expiresAt?: number | null }) {
-    if (!expiresAt) return null;
-    const date = new Date(expiresAt * 1000);
-    const now = Date.now();
-    const diffDays = Math.ceil((date.getTime() - now) / 86400000);
-    const label = diffDays <= 0
-        ? 'Expirado'
-        : diffDays === 1
-        ? 'Expira mañana'
-        : `Expira en ${diffDays}d`;
-    const urgent = diffDays <= 3;
-    return (
-        <span className={`text-[9px] font-mono ${urgent ? 'text-amber-400' : 'text-muted-foreground'}`}>
-            {label}
-        </span>
-    );
-}
-
-// ── Max runs label ─────────────────────────────────────────────────────────────
-function MaxRunsLabel({ maxRuns }: { maxRuns?: number | null }) {
-    if (!maxRuns) return null;
-    return (
-        <span className="text-[9px] font-mono text-muted-foreground">
-            {maxRuns} {maxRuns === 1 ? 'vez' : 'veces'}
-        </span>
-    );
-}
-
-// ── Channel option label ───────────────────────────────────────────────────────
-function channelLabel(id: string, recommended: string) {
-    const base = id === 'telegram' ? 'Telegram' : id === 'webchat' ? 'Web Chat' : id;
-    return id === recommended ? `${base} (recomendado)` : base;
-}
-
-// ── Main component ─────────────────────────────────────────────────────────────
-export const CronJobsPanel: React.FC = () => {
-    const {
-        cronJobs,
-        cronChannels,
-        cronRecommended,
-        cronUserPreference,
-        isLoading,
-        fetchCronJobs,
-        fetchCronChannels,
-        toggleCronJobActive,
-        saveCronChannelPreference,
-    } = useNotesAndCronsStore();
-
-    useEffect(() => {
-        fetchCronJobs();
-        fetchCronChannels();
-    }, [fetchCronJobs, fetchCronChannels]);
-
-    const activeJobs = (cronJobs ?? []).filter(j => Number(j.enabled) === 1);
-    const activeChannels = (cronChannels ?? []).filter(c => c.active);
-
-    console.log("[CronPanel] cronJobs:", cronJobs);
-    console.log("[CronPanel] activeJobs:", activeJobs);
-    console.log("[CronPanel] cronChannels:", cronChannels);
-    console.log("[CronPanel] activeChannels:", activeChannels);
-
-    return (
-        <Card className="border-none bg-background/50 backdrop-blur-xl shadow-2xl overflow-hidden group border border-white/10">
-            <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                        <div className="p-2 rounded-xl bg-primary/10 text-primary">
-                            <Clock className="w-5 h-5" />
-                        </div>
-                        <div>
-                            <CardTitle className="text-xl font-bold tracking-tight">Cron Jobs</CardTitle>
-                            <CardDescription>Tareas programadas activas</CardDescription>
-                        </div>
-                    </div>
-                    <div className="flex items-center gap-2">
-                        {isLoading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-                        {/* Global channel preference picker */}
-                        {activeChannels.length > 1 && (
-                            <Select
-                                value={cronUserPreference}
-                                onValueChange={saveCronChannelPreference}
-                            >
-                                <SelectTrigger className="h-7 text-[10px] w-[130px] border-white/10 bg-card/40">
-                                    <SelectValue placeholder="Canal" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="auto" className="text-xs">
-                                        Auto (recomendado)
-                                    </SelectItem>
-                                    {activeChannels.map(ch => (
-                                        <SelectItem key={ch.id} value={ch.id} className="text-xs">
-                                            {channelLabel(ch.id, cronRecommended)}
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        )}
-                    </div>
-                </div>
-            </CardHeader>
-            <CardContent>
-                <ScrollArea className="h-[350px] pr-4">
-                    <div className="space-y-4">
-                        {activeJobs.length === 0 ? (
-                            <div className="flex flex-col items-center justify-center h-[250px] text-muted-foreground space-y-2">
-                                <Clock className="w-12 h-12 opacity-20" />
-                                <p className="text-sm">No hay tareas activas</p>
-                                <p className="text-[10px] opacity-70">Define nuevas tareas cron desde el bot</p>
-                            </div>
-                        ) : (
-                            activeJobs.map((job) => {
-                                console.log("[CronPanel] Rendering job:", job);
-                                return (
-                                <div
-                                    key={job.id}
-                                    className="p-4 rounded-2xl border border-white/5 bg-card/40 hover:bg-card/60 transition-all duration-300 group/item relative overflow-hidden"
-                                >
-                                    {/* Stop toggle */}
-                                    <div className="absolute top-0 right-0 p-3 opacity-0 group-hover/item:opacity-100 transition-opacity">
-                                        <div className="flex items-center gap-2">
-                                            <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-bold">Detener</span>
-                                            <Switch
-                                                checked={true}
-                                                onCheckedChange={() => toggleCronJobActive(job.id, false)}
-                                                className="scale-75 data-[state=checked]:bg-primary"
-                                            />
-                                        </div>
-                                    </div>
-
-                                    <h4 className="font-semibold text-sm mb-1.5 pr-16 truncate">{job.name}</h4>
-
-                                    {/* Schedule expression */}
-                                    <div className="flex items-center gap-1.5 text-[10px] text-primary font-bold uppercase tracking-wider mb-2 bg-primary/5 w-fit px-2 py-0.5 rounded-full">
-                                        <Calendar className="w-3 h-3" />
-                                        {job.cron_expression}
-                                    </div>
-
-                                    {/* Meta row: channel + limits */}
-                                    <div className="flex items-center gap-2 mb-2 flex-wrap">
-                                        <ChannelBadge channelId={job.notify_channel_id} />
-                                        <MaxRunsLabel maxRuns={job.max_runs} />
-                                        <ExpiryLabel expiresAt={job.expires_at} />
-                                    </div>
-
-                                    {/* Footer: status + last run */}
-                                    <div className="mt-2 flex items-center justify-between">
-                                        <div className="flex items-center gap-1.5 text-xs text-green-500 font-medium">
-                                            <Activity className="w-3 h-3" />
-                                            <span className="text-[10px] uppercase tracking-tighter">Running</span>
-                                        </div>
-                                        {job.last_run && (
-                                            <span className="text-[10px] text-muted-foreground font-mono">
-                                                {new Date(job.last_run * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                                            </span>
-                                        )}
-                                    </div>
-                                </div>
-                                );
-                            })
-                        )}
-                    </div>
-                </ScrollArea>
-            </CardContent>
-        </Card>
-    );
-};

package/packages/hive-ui/src/components/NavLink.tsx

@@ -1,34 +0,0 @@
-import { NavLink as RouterNavLink, NavLinkProps } from "react-router-dom";
-import { forwardRef } from "react";
-import { cn } from "@/lib/utils";
-
-interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
-  className?: string;
-  activeClassName?: string;
-  pendingClassName?: string;
-}
-
-// Workaround for type incompatibility between react-router-dom v7 (React 19) and React 18
-// Using type assertion to bypass the JSX component type check
-const RouterNavLinkTyped = RouterNavLink as unknown as (
-  props: NavLinkProps & { ref?: React.Ref<HTMLAnchorElement> }
-) => React.ReactElement | null;
-
-const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
-  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
-    return (
-      <RouterNavLinkTyped
-        ref={ref}
-        to={to}
-        className={({ isActive, isPending }) =>
-          cn(className, isActive && activeClassName, isPending && pendingClassName)
-        }
-        {...props}
-      />
-    );
-  },
-);
-
-NavLink.displayName = "NavLink";
-
-export { NavLink };

package/packages/hive-ui/src/components/NotesPanel.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect } from 'react';
-import { useNotesAndCronsStore } from '../stores/useNotesAndCronsStore';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from './ui/card';
-import { Badge } from './ui/badge';
-import { ScrollArea } from './ui/scroll-area';
-import { StickyNote, Loader2 } from 'lucide-react';
-import { Switch } from './ui/switch';
-
-export const NotesPanel: React.FC = () => {
-    const { notes, isLoading, fetchNotes, toggleNoteActive } = useNotesAndCronsStore();
-
-    useEffect(() => {
-        fetchNotes();
-    }, [fetchNotes]);
-
-    const activeNotes = notes.filter(n => Number(n.active) === 1);
-
-    return (
-        <Card className="border-none bg-background/50 backdrop-blur-xl shadow-2xl overflow-hidden group border border-white/10">
-            <CardHeader className="pb-2">
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                        <div className="p-2 rounded-xl bg-primary/10 text-primary">
-                            <StickyNote className="w-5 h-5" />
-                        </div>
-                        <div>
-                            <CardTitle className="text-xl font-bold tracking-tight">Notas</CardTitle>
-                            <CardDescription>Notas activas en el panel</CardDescription>
-                        </div>
-                    </div>
-                    {isLoading && <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />}
-                </div>
-            </CardHeader>
-            <CardContent>
-                <ScrollArea className="h-[350px] pr-4">
-                    <div className="space-y-4">
-                        {activeNotes.length === 0 ? (
-                            <div className="flex flex-col items-center justify-center h-[250px] text-muted-foreground space-y-2">
-                                <StickyNote className="w-12 h-12 opacity-20" />
-                                <p className="text-sm">No hay notas activas</p>
-                                <p className="text-[10px] opacity-70">Usa el sistema para generar nuevas notas</p>
-                            </div>
-                        ) : (
-                            activeNotes.map((note) => (
-                                <div
-                                    key={note.id}
-                                    className="p-4 rounded-2xl border border-white/5 bg-card/40 hover:bg-card/60 transition-all duration-300 group/item relative overflow-hidden"
-                                >
-                                    <div className="absolute top-0 right-0 p-3 opacity-0 group-hover/item:opacity-100 transition-opacity">
-                                        <div className="flex items-center gap-2">
-                                            <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-bold">Ocultar</span>
-                                            <Switch
-                                                checked={true}
-                                                onCheckedChange={() => toggleNoteActive(note.id, false)}
-                                                className="scale-75 data-[state=checked]:bg-primary"
-                                            />
-                                        </div>
-                                    </div>
-                                    <h4 className="font-semibold text-sm mb-1.5 line-clamp-1 pr-16">{note.title}</h4>
-                                    <p className="text-xs text-muted-foreground line-clamp-3 leading-relaxed">
-                                        {note.content}
-                                    </p>
-                                    <div className="mt-4 flex items-center justify-between">
-                                        <Badge variant="secondary" className="text-[10px] px-2 py-0.5 bg-primary/10 text-primary border-none font-medium">
-                                            NOTE
-                                        </Badge>
-                                        <span className="text-[10px] text-muted-foreground font-mono">
-                                            {new Date(note.updatedAt * 1000).toLocaleDateString()}
-                                        </span>
-                                    </div>
-                                </div>
-                            ))
-                        )}
-                    </div>
-                </ScrollArea>
-            </CardContent>
-        </Card>
-    );
-};