@harbinger-ai/harbinger 0.1.0

package/lib/chat/components/messages.jsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { PreviewMessage, ThinkingMessage } from './message.js';
+import { Greeting } from './greeting.js';
+import { ArrowDown } from 'lucide-react';
+
+export function Messages({ messages, status, onRetry, onEdit }) {
+  const containerRef = useRef(null);
+  const endRef = useRef(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (isAtBottom && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, status, isAtBottom]);
+
+  // Track scroll position
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      setIsAtBottom(scrollHeight - scrollTop - clientHeight < 40);
+    };
+
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToBottom = () => {
+    endRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  return (
+    <div className="relative flex-1">
+      <div
+        className="absolute inset-0 touch-pan-y overflow-y-auto scrollbar-thin"
+        ref={containerRef}
+      >
+        <div className="mx-auto flex min-w-0 max-w-4xl flex-col gap-4 px-4 py-4 md:gap-6 md:px-6">
+          {messages.length === 0 && <Greeting />}
+
+          <AnimatePresence mode="popLayout">
+            {messages.map((message, index) => (
+              <PreviewMessage
+                key={message.id}
+                message={message}
+                isLoading={status === 'streaming' && index === messages.length - 1}
+                onRetry={onRetry}
+                onEdit={onEdit}
+              />
+            ))}
+          </AnimatePresence>
+
+          {status === 'submitted' && <ThinkingMessage />}
+
+          <div className="min-h-[24px] shrink-0" ref={endRef} />
+        </div>
+      </div>
+
+      {!isAtBottom && (
+        <button
+          className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2 rounded-full border border-white/[0.06] bg-[--card] p-2 shadow-lg hover:bg-white/[0.04]"
+          onClick={scrollToBottom}
+          aria-label="Scroll to bottom"
+        >
+          <ArrowDown className="size-4" />
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Streamdown } from "streamdown";
+import { PageLayout } from "./page-layout.js";
+import { BellIcon } from "./icons.js";
+import { linkSafety } from "./message.js";
+import { getNotifications, markNotificationsRead } from "../actions.js";
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - ts) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+function NotificationsPage({ session }) {
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    async function load() {
+      try {
+        const result = await getNotifications();
+        setNotifications(result);
+        await markNotificationsRead();
+      } catch (err) {
+        console.error("Failed to load notifications:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-6", children: /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Notifications" }) }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      notifications.length,
+      " ",
+      notifications.length === 1 ? "notification" : "notifications"
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) }) : notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: "No notifications yet." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: notifications.map((n) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4 border border-border rounded-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-0.5 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(BellIcon, { size: 16 }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm prose-sm", children: /* @__PURE__ */ jsx(Streamdown, { mode: "static", linkSafety, children: n.notification }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: timeAgo(n.createdAt) })
+      ] })
+    ] }, n.id)) })
+  ] });
+}
+export {
+  NotificationsPage
+};

package/lib/chat/components/notifications-page.jsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Streamdown } from 'streamdown';
+import { PageLayout } from './page-layout.js';
+import { BellIcon } from './icons.js';
+import { linkSafety } from './message.js';
+import { getNotifications, markNotificationsRead } from '../actions.js';
+
+function timeAgo(ts) {
+  const seconds = Math.floor((Date.now() - ts) / 1000);
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+export function NotificationsPage({ session }) {
+  const [notifications, setNotifications] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const result = await getNotifications();
+        setNotifications(result);
+        // Mark all as read on view
+        await markNotificationsRead();
+      } catch (err) {
+        console.error('Failed to load notifications:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  return (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Notifications</h1>
+      </div>
+
+      {/* Count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {notifications.length} {notifications.length === 1 ? 'notification' : 'notifications'}
+      </p>
+
+      {/* Notification list */}
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-14 animate-pulse rounded-md bg-border/50" />
+          ))}
+        </div>
+      ) : notifications.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">
+          No notifications yet.
+        </p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {notifications.map((n) => (
+            <div key={n.id} className="flex items-start gap-3 p-4 border border-border rounded-lg">
+              <div className="mt-0.5 shrink-0 text-muted-foreground">
+                <BellIcon size={16} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm prose-sm">
+                  <Streamdown mode="static" linkSafety={linkSafety}>{n.notification}</Streamdown>
+                </div>
+                <span className="text-xs text-muted-foreground">
+                  {timeAgo(n.createdAt)}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </PageLayout>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AppSidebar } from "./app-sidebar.js";
+import { SidebarProvider, SidebarInset } from "./ui/sidebar.js";
+import { ChatNavProvider } from "./chat-nav-context.js";
+function defaultNavigateToChat(id) {
+  if (id) {
+    window.location.href = `/chat/${id}`;
+  } else {
+    window.location.href = "/";
+  }
+}
+function PageLayout({ session, children }) {
+  return /* @__PURE__ */ jsx(ChatNavProvider, { value: { activeChatId: null, navigateToChat: defaultNavigateToChat }, children: /* @__PURE__ */ jsxs(SidebarProvider, { children: [
+    /* @__PURE__ */ jsx(AppSidebar, { user: session.user }),
+    /* @__PURE__ */ jsx(SidebarInset, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col h-full max-w-4xl mx-auto w-full px-4 py-6", children }) })
+  ] }) });
+}
+export {
+  PageLayout
+};

package/lib/chat/components/page-layout.jsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { AppSidebar } from './app-sidebar.js';
+import { SidebarProvider, SidebarInset } from './ui/sidebar.js';
+import { ChatNavProvider } from './chat-nav-context.js';
+
+function defaultNavigateToChat(id) {
+  if (id) {
+    window.location.href = `/chat/${id}`;
+  } else {
+    window.location.href = '/';
+  }
+}
+
+export function PageLayout({ session, children }) {
+  return (
+    <ChatNavProvider value={{ activeChatId: null, navigateToChat: defaultNavigateToChat }}>
+      <SidebarProvider>
+        <AppSidebar user={session.user} />
+        <SidebarInset>
+          <div className="flex flex-col h-full max-w-4xl mx-auto w-full px-4 py-6">
+            {children}
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </ChatNavProvider>
+  );
+}

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

@@ -0,0 +1,222 @@
+"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";
+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"
+};
+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 InstalledToolCard({ tool, onUninstall, onToggle, onSpawn }) {
+  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" })
+      ] })
+    ] })
+  ] });
+}
+function GithubInstaller({ onInstall }) {
+  const [url, setUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  async function handleInstall() {
+    if (!url) return;
+    setLoading(true);
+    setResult(null);
+    const res = await onInstall(url);
+    setResult(res);
+    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." }),
+    /* @__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"
+      ] })
+    ] }),
+    result && /* @__PURE__ */ jsx("p", { className: `text-xs mt-2 ${result.error ? "text-destructive" : "text-green-500"}`, children: result.error || `Installed ${result.name}` })
+  ] });
+}
+function RegistryPage() {
+  const [catalog, setCatalog] = useState({ tools: [], categories: [] });
+  const [installed, setInstalled] = useState([]);
+  const [containers, setContainers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+  const [activeCategory, setActiveCategory] = useState("all");
+  const [installing, setInstalling] = useState(null);
+  const [tab, setTab] = useState("catalog");
+  async function load() {
+    const [c, i, cont] = await Promise.all([getCatalog(), getInstalledTools(), getContainers()]);
+    setCatalog(c);
+    setInstalled(i);
+    setContainers(cont);
+    setLoading(false);
+  }
+  useEffect(() => {
+    load();
+  }, []);
+  const installedSlugs = new Set(installed.map((t) => t.slug));
+  async function handleInstall(catalogId) {
+    setInstalling(catalogId);
+    await installTool(catalogId);
+    await load();
+    setInstalling(null);
+  }
+  async function handleGithubInstall(url) {
+    const result = await installFromGithub(url);
+    if (!result.error) await load();
+    return result;
+  }
+  async function handleUninstall(id) {
+    await uninstallTool(id);
+    load();
+  }
+  async function handleToggle(id) {
+    await toggleTool(id);
+    load();
+  }
+  async function handleSpawn(toolId) {
+    await spawnContainer(toolId);
+    load();
+  }
+  async function handleStop(id) {
+    await stopContainer(id);
+    load();
+  }
+  const filteredCatalog = catalog.tools.filter((t) => {
+    if (activeCategory !== "all" && t.category !== activeCategory) return false;
+    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)) });
+  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 (",
+          catalog.tools.length,
+          ")"
+        ] }),
+        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." })
+      ] })
+    ] }),
+    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
+        ] })
+      ] }),
+      c.status === "running" && /* @__PURE__ */ jsx("button", { onClick: () => handleStop(c.id), className: "text-xs text-muted-foreground hover:text-destructive", children: "Stop" })
+    ] }, c.id)) }) })
+  ] });
+}
+export {
+  RegistryPage
+};