@harbinger-ai/harbinger 0.1.0 → 0.1.2

package/lib/chat/components/registry-page.js

@@ -1,80 +1,122 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { PackageIcon, PlusIcon, SearchIcon, SpinnerIcon, CheckIcon, TrashIcon, ChevronDownIcon, DownloadIcon, GlobeIcon } from "./icons.js";
-import { getCatalog, getInstalledTools, installTool, installCustomTool, uninstallTool, toggleTool, installFromGithub, getContainers, spawnContainer, stopContainer } from "../../registry/actions.js";
+import { motion, AnimatePresence } from "framer-motion";
+import { PackageIcon, SearchIcon, SpinnerIcon, CheckIcon, ChevronDownIcon, DownloadIcon, GlobeIcon } from "./icons.js";
+import { getCatalog, getInstalledTools, installTool, uninstallTool, toggleTool, installFromGithub, getContainers, spawnContainer, stopContainer } from "../../registry/actions.js";
 const CATEGORY_COLORS = {
-  recon: "bg-blue-500/10 text-blue-500",
-  scanning: "bg-cyan-500/10 text-cyan-500",
-  web: "bg-orange-500/10 text-orange-500",
-  osint: "bg-green-500/10 text-green-500",
-  cloud: "bg-purple-500/10 text-purple-500",
-  credential: "bg-red-500/10 text-red-500",
-  exploitation: "bg-red-600/10 text-red-600",
-  binary: "bg-gray-500/10 text-gray-500",
-  forensics: "bg-yellow-500/10 text-yellow-500",
-  automation: "bg-indigo-500/10 text-indigo-500",
-  custom: "bg-muted text-muted-foreground"
+  recon: { bg: "bg-blue-500/10", text: "text-blue-500", border: "border-blue-500/20" },
+  scanning: { bg: "bg-cyan-500/10", text: "text-cyan-500", border: "border-cyan-500/20" },
+  web: { bg: "bg-orange-500/10", text: "text-orange-500", border: "border-orange-500/20" },
+  osint: { bg: "bg-green-500/10", text: "text-green-500", border: "border-green-500/20" },
+  cloud: { bg: "bg-purple-500/10", text: "text-purple-500", border: "border-purple-500/20" },
+  credential: { bg: "bg-red-500/10", text: "text-red-500", border: "border-red-500/20" },
+  exploitation: { bg: "bg-red-600/10", text: "text-red-600", border: "border-red-600/20" },
+  binary: { bg: "bg-gray-500/10", text: "text-gray-500", border: "border-gray-500/20" },
+  forensics: { bg: "bg-yellow-500/10", text: "text-yellow-500", border: "border-yellow-500/20" },
+  automation: { bg: "bg-indigo-500/10", text: "text-indigo-500", border: "border-indigo-500/20" },
+  custom: { bg: "bg-white/5", text: "text-muted-foreground", border: "border-white/10" }
 };
-function CatalogToolCard({ tool, installed, onInstall, installing }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border bg-card hover:bg-accent/30 transition-colors", children: [
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(PackageIcon, { size: 14 }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: tool.name }),
-      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 line-clamp-1", children: tool.description })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium ${CATEGORY_COLORS[tool.category] || CATEGORY_COLORS.custom}`, children: tool.category }),
-    installed ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-500 px-2 py-0.5 text-[10px] font-medium", children: [
-      /* @__PURE__ */ jsx(CheckIcon, { size: 10 }),
-      " installed"
-    ] }) : /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => onInstall(tool.id),
-        disabled: installing === tool.id,
-        className: "shrink-0 inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium border hover:bg-accent/50 transition-colors disabled:opacity-50",
-        children: [
-          installing === tool.id ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
-          "Install"
-        ]
-      }
-    )
-  ] });
+function getCatStyle(cat) {
+  return CATEGORY_COLORS[cat] || CATEGORY_COLORS.custom;
 }
-function InstalledToolCard({ tool, onUninstall, onToggle, onSpawn }) {
+function CatalogToolCard({ tool, installed, onInstall, installing, index }) {
+  const cat = getCatStyle(tool.category);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, delay: index * 0.02 },
+      className: "group rounded-lg border border-white/[0.06] bg-[--card] hover:border-[--cyan]/20 transition-colors overflow-hidden",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: tool.name }),
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 line-clamp-1 font-mono", children: tool.description })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex rounded-full px-2 py-0.5 text-[10px] font-mono font-medium border ${cat.bg} ${cat.text} ${cat.border}`, children: tool.category }),
+        installed ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 inline-flex items-center gap-1 rounded-full bg-green-500/10 text-green-500 border border-green-500/20 px-2 py-0.5 text-[10px] font-mono font-medium", children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: 10 }),
+          " installed"
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onInstall(tool.id),
+            disabled: installing === tool.id,
+            className: "shrink-0 inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+            children: [
+              installing === tool.id ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
+              "Install"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function InstalledToolCard({ tool, onUninstall, onToggle, onSpawn, index }) {
   const [expanded, setExpanded] = useState(false);
   const disabled = !tool.enabled;
-  return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border bg-card transition-opacity ${disabled ? "opacity-60" : ""}`, children: [
-    /* @__PURE__ */ jsxs("button", { onClick: () => setExpanded(!expanded), className: "flex items-center gap-3 w-full text-left p-3 hover:bg-accent/30 rounded-lg", children: [
-      /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-muted p-2", children: /* @__PURE__ */ jsx(PackageIcon, { size: 14 }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: tool.name }),
-        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 truncate", children: tool.description })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium ${CATEGORY_COLORS[tool.category] || CATEGORY_COLORS.custom}`, children: tool.category }),
-      /* @__PURE__ */ jsx("span", { className: `shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) })
-    ] }),
-    expanded && /* @__PURE__ */ jsxs("div", { className: "border-t px-4 py-3 flex flex-col gap-2", children: [
-      tool.dockerImage && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Docker:" }),
-        /* @__PURE__ */ jsx("span", { className: "font-mono", children: tool.dockerImage })
-      ] }),
-      tool.installCmd && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Install:" }),
-        /* @__PURE__ */ jsx("code", { className: "font-mono bg-muted px-1.5 py-0.5 rounded text-[11px] break-all", children: tool.installCmd })
-      ] }),
-      tool.sourceUrl && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Source:" }),
-        /* @__PURE__ */ jsx("a", { href: tool.sourceUrl, target: "_blank", rel: "noopener", className: "text-blue-500 hover:underline truncate", children: tool.sourceUrl })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
-        tool.dockerImage && /* @__PURE__ */ jsx("button", { onClick: () => onSpawn(tool.id), className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium border hover:bg-accent/50", children: "Spawn Container" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => onToggle(tool.id), className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium border hover:bg-accent/50", children: tool.enabled ? "Disable" : "Enable" }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => onUninstall(tool.id), className: "text-xs text-muted-foreground hover:text-destructive", children: "Uninstall" })
-      ] })
-    ] })
-  ] });
+  const cat = getCatStyle(tool.category);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, delay: index * 0.03 },
+      className: `rounded-lg border border-white/[0.06] bg-[--card] transition-all ${disabled ? "opacity-50" : "hover:border-[--cyan]/20"}`,
+      children: [
+        /* @__PURE__ */ jsxs("button", { onClick: () => setExpanded(!expanded), className: "flex items-center gap-3 w-full text-left p-3 hover:bg-white/[0.02] rounded-lg transition-colors", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: tool.name }),
+            /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 truncate font-mono", children: tool.description })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex rounded-full px-2 py-0.5 text-[10px] font-mono font-medium border ${cat.bg} ${cat.text} ${cat.border}`, children: tool.category }),
+          /* @__PURE__ */ jsx("span", { className: `shrink-0 transition-transform ${expanded ? "rotate-180" : ""}`, children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsxs("div", { className: "border-t border-white/[0.06] px-4 py-3 flex flex-col gap-2", children: [
+              tool.dockerImage && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] uppercase tracking-wider w-14 shrink-0", children: "Docker" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: tool.dockerImage })
+              ] }),
+              tool.installCmd && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] uppercase tracking-wider w-14 shrink-0", children: "Install" }),
+                /* @__PURE__ */ jsx("code", { className: "font-mono bg-black/30 px-2 py-0.5 rounded text-[11px] text-foreground/80 border border-white/[0.04] break-all", children: tool.installCmd })
+              ] }),
+              tool.sourceUrl && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 text-xs items-baseline", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] uppercase tracking-wider w-14 shrink-0", children: "Source" }),
+                /* @__PURE__ */ jsx("a", { href: tool.sourceUrl, target: "_blank", rel: "noopener", className: "text-[--cyan] hover:underline truncate font-mono", children: tool.sourceUrl })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+                tool.dockerImage && /* @__PURE__ */ jsx("button", { onClick: () => onSpawn(tool.id), className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors", children: "Spawn" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => onToggle(tool.id), className: "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors", children: tool.enabled ? "Disable" : "Enable" }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => onUninstall(tool.id), className: "text-xs font-mono text-muted-foreground hover:text-[--destructive] transition-colors", children: "Uninstall" })
+              ] })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
 }
 function GithubInstaller({ onInstall }) {
   const [url, setUrl] = useState("");
@@ -89,17 +131,36 @@ function GithubInstaller({ onInstall }) {
     setLoading(false);
     if (!res.error) setUrl("");
   }
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4 mb-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-2", children: "Install from GitHub" }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3", children: "Paste a GitHub repository URL to add any tool to your registry." }),
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-white/[0.06] bg-[--card] p-4 mb-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsx(GlobeIcon, { size: 14 }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium text-[--cyan]", children: "Install from GitHub" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mb-3 font-mono", children: "Paste a GitHub repository URL to add any tool to your registry." }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx("input", { placeholder: "https://github.com/owner/repo", value: url, onChange: (e) => setUrl(e.target.value), className: "flex-1 text-sm border rounded-md px-3 py-2 bg-background font-mono" }),
-      /* @__PURE__ */ jsxs("button", { onClick: handleInstall, disabled: loading || !url, className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-medium bg-foreground text-background hover:opacity-90 disabled:opacity-50", children: [
-        loading ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
-        " Install"
-      ] })
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          placeholder: "https://github.com/owner/repo",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          className: "flex-1 text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: handleInstall,
+          disabled: loading || !url,
+          className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan] text-[--primary-foreground] hover:opacity-90 disabled:opacity-50 transition-opacity",
+          children: [
+            loading ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(DownloadIcon, { size: 12 }),
+            " Install"
+          ]
+        }
+      )
     ] }),
-    result && /* @__PURE__ */ jsx("p", { className: `text-xs mt-2 ${result.error ? "text-destructive" : "text-green-500"}`, children: result.error || `Installed ${result.name}` })
+    result && /* @__PURE__ */ jsx("p", { className: `text-xs font-mono mt-2 ${result.error ? "text-[--destructive]" : "text-green-500"}`, children: result.error || `Installed ${result.name}` })
   ] });
 }
 function RegistryPage() {
@@ -122,6 +183,7 @@ function RegistryPage() {
     load();
   }, []);
   const installedSlugs = new Set(installed.map((t) => t.slug));
+  const runningContainers = containers.filter((c) => c.status === "running").length;
   async function handleInstall(catalogId) {
     setInstalling(catalogId);
     await installTool(catalogId);
@@ -154,67 +216,139 @@ function RegistryPage() {
     if (search && !t.name.toLowerCase().includes(search.toLowerCase()) && !t.description.toLowerCase().includes(search.toLowerCase())) return false;
     return true;
   });
-  if (loading) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-lg bg-border/50" }, i)) });
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-lg bg-white/[0.04] border border-white/[0.06]" }, i)) });
+  }
+  const tabs = [
+    { id: "catalog", label: "CATALOG", count: catalog.tools.length },
+    { id: "installed", label: "INSTALLED", count: installed.length },
+    { id: "containers", label: "CONTAINERS", count: runningContainers }
+  ];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Toolbox" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
-        installed.length,
-        " installed, ",
-        catalog.tools.length,
-        " available in catalog"
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-border mb-4", children: [
-      { id: "catalog", label: `Catalog (${catalog.tools.length})` },
-      { id: "installed", label: `Installed (${installed.length})` },
-      { id: "containers", label: `Containers (${containers.filter((c) => c.status === "running").length})` }
-    ].map((t) => /* @__PURE__ */ jsx("button", { onClick: () => setTab(t.id), className: `px-3 py-2 text-sm font-medium border-b-2 transition-colors ${tab === t.id ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`, children: t.label }, t.id)) }),
-    tab === "catalog" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row gap-3 mb-4", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-        /* @__PURE__ */ jsx(SearchIcon, { size: 14 }),
-        /* @__PURE__ */ jsx("input", { placeholder: "Search tools...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full text-sm border rounded-md pl-3 pr-3 py-2 bg-background" })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-1 mb-4 overflow-x-auto pb-1", children: [
-        /* @__PURE__ */ jsxs("button", { onClick: () => setActiveCategory("all"), className: `shrink-0 px-3 py-1 rounded-full text-xs font-medium transition-colors ${activeCategory === "all" ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:text-foreground"}`, children: [
-          "All (",
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-mono font-semibold text-[--cyan] text-glow-cyan", children: "Toolbox" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-1 font-mono", children: "Security tool registry and container management" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20", children: [
           catalog.tools.length,
-          ")"
+          " tools"
         ] }),
-        catalog.categories.map((c) => /* @__PURE__ */ jsxs("button", { onClick: () => setActiveCategory(c.id), className: `shrink-0 px-3 py-1 rounded-full text-xs font-medium transition-colors ${activeCategory === c.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:text-foreground"}`, children: [
-          c.name,
-          " (",
-          catalog.tools.filter((t) => t.category === c.id).length,
-          ")"
-        ] }, c.id))
-      ] }),
-      /* @__PURE__ */ jsx(GithubInstaller, { onInstall: handleGithubInstall }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        filteredCatalog.map((t) => /* @__PURE__ */ jsx(CatalogToolCard, { tool: t, installed: installedSlugs.has(t.id), onInstall: handleInstall, installing }, t.id)),
-        filteredCatalog.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-muted-foreground py-8", children: "No tools match your search." })
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-green-500/10 text-green-500 border border-green-500/20", children: [
+          installed.length,
+          " installed"
+        ] }),
+        runningContainers > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[10px] font-mono font-medium bg-orange-500/10 text-orange-500 border border-orange-500/20", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse" }),
+          runningContainers,
+          " running"
+        ] })
       ] })
     ] }),
-    tab === "installed" && /* @__PURE__ */ jsx(Fragment, { children: installed.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(PackageIcon, { size: 24 }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No tools installed" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Browse the catalog to install security tools for your agents." })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: installed.map((t) => /* @__PURE__ */ jsx(InstalledToolCard, { tool: t, onUninstall: handleUninstall, onToggle: handleToggle, onSpawn: handleSpawn }, t.id)) }) }),
-    tab === "containers" && /* @__PURE__ */ jsx(Fragment, { children: containers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(PackageIcon, { size: 24 }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "No containers running" }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Spawn containers from installed tools to give agents terminal access." })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: containers.map((c) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3 rounded-lg border bg-card", children: [
-      /* @__PURE__ */ jsx("div", { className: `shrink-0 w-2 h-2 rounded-full ${c.status === "running" ? "bg-green-500 animate-pulse" : c.status === "stopped" ? "bg-muted-foreground" : "bg-red-500"}` }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-mono truncate", children: c.imageName }),
-        /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: [
-          c.containerId?.slice(0, 12),
-          " \u2014 ",
-          c.status
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1 border-b border-white/[0.06] mb-4", children: tabs.map((t) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setTab(t.id),
+        className: `px-4 py-2.5 text-[11px] font-mono font-medium uppercase tracking-wider border-b-2 transition-colors ${tab === t.id ? "border-[--cyan] text-[--cyan]" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+        children: [
+          t.label,
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            "(",
+            t.count,
+            ")"
+          ] })
+        ]
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
+      tab === "catalog" && /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row gap-3 mb-4", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              placeholder: "Search tools...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: "w-full text-sm border border-white/[0.06] rounded-md pl-9 pr-3 py-2 bg-black/20 font-mono placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mb-4 overflow-x-auto pb-1 scrollbar-thin", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveCategory("all"),
+              className: `shrink-0 px-3 py-1 rounded-full text-[10px] font-mono font-medium border transition-colors ${activeCategory === "all" ? "bg-[--cyan]/10 text-[--cyan] border-[--cyan]/20" : "border-white/[0.06] text-muted-foreground hover:text-foreground hover:border-white/[0.12]"}`,
+              children: [
+                "All (",
+                catalog.tools.length,
+                ")"
+              ]
+            }
+          ),
+          catalog.categories.map((c) => {
+            const cs = getCatStyle(c.id);
+            const isActive = activeCategory === c.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => setActiveCategory(c.id),
+                className: `shrink-0 px-3 py-1 rounded-full text-[10px] font-mono font-medium border transition-colors ${isActive ? `${cs.bg} ${cs.text} ${cs.border}` : "border-white/[0.06] text-muted-foreground hover:text-foreground hover:border-white/[0.12]"}`,
+                children: [
+                  c.name,
+                  " (",
+                  catalog.tools.filter((t) => t.category === c.id).length,
+                  ")"
+                ]
+              },
+              c.id
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsx(GithubInstaller, { onInstall: handleGithubInstall }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          filteredCatalog.map((t, i) => /* @__PURE__ */ jsx(CatalogToolCard, { tool: t, installed: installedSlugs.has(t.id), onInstall: handleInstall, installing, index: i }, t.id)),
+          filteredCatalog.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-12 text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(SearchIcon, { size: 24 }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-mono text-muted-foreground", children: "No tools match your search." })
+          ] })
         ] })
-      ] }),
-      c.status === "running" && /* @__PURE__ */ jsx("button", { onClick: () => handleStop(c.id), className: "text-xs text-muted-foreground hover:text-destructive", children: "Stop" })
-    ] }, c.id)) }) })
+      ] }, "catalog"),
+      tab === "installed" && /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: installed.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(PackageIcon, { size: 24 }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "No tools installed" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono", children: "Browse the catalog to install security tools for your agents." })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: installed.map((t, i) => /* @__PURE__ */ jsx(InstalledToolCard, { tool: t, onUninstall: handleUninstall, onToggle: handleToggle, onSpawn: handleSpawn, index: i }, t.id)) }) }, "installed"),
+      tab === "containers" && /* @__PURE__ */ jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: containers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "rounded-full bg-white/[0.04] border border-white/[0.06] p-4 mb-4", children: /* @__PURE__ */ jsx(PackageIcon, { size: 24 }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium mb-1", children: "No containers running" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground font-mono", children: "Spawn containers from installed tools to give agents terminal access." })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: containers.map((c, i) => /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 8 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.25, delay: i * 0.03 },
+          className: "flex items-center gap-3 p-3 rounded-lg border border-white/[0.06] bg-[--card] hover:border-[--cyan]/20 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: `shrink-0 w-2.5 h-2.5 rounded-full ${c.status === "running" ? "bg-green-500 animate-pulse" : c.status === "stopped" ? "bg-muted-foreground" : "bg-red-500"}` }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium truncate", children: c.imageName }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground", children: c.containerId?.slice(0, 12) }),
+                /* @__PURE__ */ jsx("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[9px] font-mono font-medium ${c.status === "running" ? "bg-green-500/10 text-green-500 border border-green-500/20" : "bg-white/5 text-muted-foreground border border-white/10"}`, children: c.status })
+              ] })
+            ] }),
+            c.status === "running" && /* @__PURE__ */ jsx("button", { onClick: () => handleStop(c.id), className: "text-xs font-mono text-muted-foreground hover:text-[--destructive] transition-colors", children: "Stop" })
+          ]
+        },
+        c.id
+      )) }) }, "containers")
+    ] })
   ] });
 }
 export {