@vertesia/tools-admin-ui 1.0.0-dev.20260227.112605Z → 1.0.0-dev.20260305.083323Z

package/lib/tools-admin-ui.js

@@ -1,8 +1,40 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { ModeToggle, Avatar, Button, useFetch, Card, CardContent, Badge, DotBadge, Separator, Input, Spinner } from "@vertesia/ui/core";
 import { NavLink, useParams, NestedRouterProvider, RouteComponent } from "@vertesia/ui/router";
-import { useFetch } from "@vertesia/ui/core";
 import { createContext, useContext, useState, useMemo } from "react";
 import { useUserSession } from "@vertesia/ui/session";
+import { LogOut, ArrowLeft, Check, Copy, LayoutDashboard, Download } from "lucide-react";
+const AdminContext = createContext(void 0);
+function useAdminContext() {
+  const ctx = useContext(AdminContext);
+  if (!ctx) throw new Error("useAdminContext must be used within AdminApp");
+  return ctx;
+}
+function AdminTopBar({ title }) {
+  const { user, logout } = useUserSession();
+  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-40 flex h-14 items-center justify-between border-b border-border bg-background px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg bg-primary text-xs font-semibold uppercase tracking-wider text-primary-foreground", children: title.split(/\s+/).map((w) => w[0]).filter(Boolean).slice(0, 2).join("") }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(ModeToggle, { label: false }),
+      user && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "sm", name: user.name, color: "bg-primary" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => logout(),
+            alt: "Sign out",
+            children: /* @__PURE__ */ jsx(LogOut, { className: "size-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function formatTitle(name) {
   return name.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
@@ -183,11 +215,51 @@ function useResourceData(baseUrl, mcpEndpoints) {
     );
   }, [baseUrl, mcpEndpoints]);
 }
-const AdminContext = createContext(void 0);
-function useAdminContext() {
-  const ctx = useContext(AdminContext);
-  if (!ctx) throw new Error("useAdminContext must be used within AdminApp");
-  return ctx;
+const TYPE_VARIANTS = {
+  tool: "bg-blue-100 text-blue-800 dark:bg-blue-500/15 dark:text-blue-300",
+  skill: "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300",
+  interaction: "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-300",
+  type: "bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-300",
+  template: "bg-violet-100 text-violet-800 dark:bg-violet-500/15 dark:text-violet-300",
+  mcp: "bg-pink-100 text-pink-800 dark:bg-pink-500/15 dark:text-pink-300"
+};
+const ROLE_VARIANTS = {
+  system: "bg-blue-100 text-blue-800 dark:bg-blue-500/15 dark:text-blue-300",
+  user: "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-300",
+  assistant: "bg-violet-100 text-violet-800 dark:bg-violet-500/15 dark:text-violet-300",
+  safety: "bg-pink-100 text-pink-800 dark:bg-pink-500/15 dark:text-pink-300",
+  tool: "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-300"
+};
+function CollectionCard({ collection }) {
+  const href = `/${collection.type}s/${collection.name}`;
+  return /* @__PURE__ */ jsx(NavLink, { href, className: "block no-underline", children: /* @__PURE__ */ jsx(Card, { className: "cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+    /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS[collection.type] ?? ""}`, children: collection.type }),
+    /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: collection.title }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: collection.description || "No description" }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 font-mono text-xs text-muted-foreground", children: [
+      collection.count,
+      " ",
+      collection.count === 1 ? "item" : "items"
+    ] })
+  ] }) }) });
+}
+function DetailPage({ type, title, description, tags, backHref = "/", children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-7 py-10", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "mb-5 flex items-center gap-4", children: [
+      backHref !== "/" && /* @__PURE__ */ jsx(NavLink, { href: "/", className: "text-sm text-primary hover:opacity-75", children: "Home" }),
+      /* @__PURE__ */ jsxs(NavLink, { href: backHref, className: "flex items-center gap-1 text-sm text-primary hover:opacity-75", children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "size-3.5" }),
+        "Back"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS[type] ?? ""}`, children: type }),
+      /* @__PURE__ */ jsx("h1", { className: "-tracking-wide text-3xl font-bold text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: description }),
+      tags && tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: tag }, tag)) })
+    ] }),
+    children
+  ] });
 }
 function EndpointPanel({ label, path }) {
   const [copied, setCopied] = useState(false);
@@ -197,18 +269,26 @@ function EndpointPanel({ label, path }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }
-  return /* @__PURE__ */ jsxs("div", { className: "vta-endpoint", children: [
-    /* @__PURE__ */ jsx("div", { className: "vta-endpoint-label", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "vta-endpoint-box", children: [
-      /* @__PURE__ */ jsx("code", { className: "vta-endpoint-code", children: path }),
-      /* @__PURE__ */ jsx("button", { onClick: handleCopy, className: "vta-copy-btn", title: "Copy full URL", children: copied ? "✓" : "⧉" })
+  return /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-[0.7rem] font-medium uppercase tracking-widest text-primary", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted-background px-3 py-2", children: [
+      /* @__PURE__ */ jsx("code", { className: "flex-1 font-mono text-sm text-foreground", children: path }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "xs",
+          onClick: handleCopy,
+          "aria-label": "Copy full URL",
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+        }
+      )
     ] })
   ] });
 }
 function SummaryBadge({ count, label }) {
   if (count === 0) return null;
-  return /* @__PURE__ */ jsxs("span", { className: "vta-badge", children: [
-    /* @__PURE__ */ jsx("span", { className: "vta-badge-dot" }),
+  return /* @__PURE__ */ jsxs(DotBadge, { variant: "success", children: [
     count,
     " ",
     label,
@@ -235,131 +315,112 @@ const badgeLabels = [
 ];
 function HeroSection({ title, version, resources }) {
   const counts = countByType(resources);
-  return /* @__PURE__ */ jsxs("header", { className: "vta-hero", children: [
-    /* @__PURE__ */ jsxs("div", { className: "vta-hero-main", children: [
-      /* @__PURE__ */ jsxs("div", { className: "vta-hero-identity", children: [
-        /* @__PURE__ */ jsx("div", { className: "vta-hero-logo", children: getInitials(title) }),
+  return /* @__PURE__ */ jsx(Card, { className: "mb-10 overflow-hidden border bg-linear-to-br from-card to-muted-background", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-6 md:flex-row md:items-start md:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-xl bg-linear-to-br from-sky-400 to-indigo-500 text-sm font-semibold uppercase tracking-wider text-white shadow-lg", children: getInitials(title) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "vta-hero-eyebrow", children: "Tools Server" }),
-          /* @__PURE__ */ jsx("h1", { className: "vta-hero-title", children: title })
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-widest text-muted-foreground", children: "Tools Server" }),
+          /* @__PURE__ */ jsx("h1", { className: "-tracking-wide text-2xl font-bold text-foreground", children: title })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "vta-hero-tagline", children: "Discover the tools, skills, interactions, and content types exposed by this server." }),
-      /* @__PURE__ */ jsx("div", { className: "vta-hero-summary", children: badgeLabels.map(({ type, label }) => /* @__PURE__ */ jsx(SummaryBadge, { count: counts[type] || 0, label }, type)) }),
-      /* @__PURE__ */ jsxs("div", { className: "vta-hero-links", children: [
-        /* @__PURE__ */ jsxs("a", { href: "/app/", target: "_blank", className: "vta-link-primary", children: [
-          /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-            /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
-          ] }),
-          "UI Plugin Dev"
-        ] }),
-        /* @__PURE__ */ jsxs("a", { href: "/lib/plugin.js", className: "vta-link-secondary", children: [
-          /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-            /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-            /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-          ] }),
-          "Plugin Bundle"
-        ] })
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Discover the tools, skills, interactions, and content types exposed by this server." }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: badgeLabels.map(({ type, label }) => /* @__PURE__ */ jsx(SummaryBadge, { count: counts[type] || 0, label }, type)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 pt-1", children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: "/app/",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex h-8 items-center gap-2 rounded bg-primary px-3 text-xs font-medium text-white shadow-xs hover:bg-primary/90",
+            children: [
+              /* @__PURE__ */ jsx(LayoutDashboard, { className: "size-4" }),
+              "UI Plugin Dev"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: "/lib/plugin.js",
+            className: "inline-flex h-8 items-center gap-2 rounded bg-primary/5 px-3 text-xs font-medium text-primary shadow-xs hover:bg-primary/10 dark:bg-primary/10 dark:hover:bg-primary/20",
+            children: [
+              /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+              "Plugin Bundle"
+            ]
+          }
+        )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("aside", { className: "vta-hero-panel", children: [
+    /* @__PURE__ */ jsxs("aside", { className: "min-w-55 max-w-65 shrink-0", children: [
       /* @__PURE__ */ jsx(EndpointPanel, { label: "Base endpoint", path: "/api" }),
       /* @__PURE__ */ jsx(EndpointPanel, { label: "Package endpoint", path: "/api/package" }),
-      /* @__PURE__ */ jsxs("p", { className: "vta-hero-hint", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: [
         "Use ",
-        /* @__PURE__ */ jsx("strong", { children: "POST /api/tools/<collection>" }),
+        /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: "POST /api/tools/<collection>" }),
         " or",
         " ",
-        /* @__PURE__ */ jsx("strong", { children: "POST /api/skills/<collection>" }),
+        /* @__PURE__ */ jsx("strong", { className: "text-foreground", children: "POST /api/skills/<collection>" }),
         " to call these from your apps or agents."
       ] }),
-      /* @__PURE__ */ jsxs("p", { className: "vta-hero-version", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
         "v",
         version
       ] })
     ] })
+  ] }) });
+}
+function ResourceCard({ resource }) {
+  return /* @__PURE__ */ jsx(Card, { className: "transition-all hover:-translate-y-0.5 hover:shadow-md", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+    /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS[resource.type] ?? ""}`, children: resource.type }),
+    /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: resource.title }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: resource.description || "No description" }),
+    resource.tags && resource.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: resource.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: tag }, tag)) }),
+    resource.url && /* @__PURE__ */ jsx("div", { className: "mt-2 truncate font-mono text-xs text-muted-foreground", children: resource.url })
+  ] }) });
+}
+function ResourceSection({ title, subtitle, resources, showDivider }) {
+  if (resources.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { children: [
+    showDivider && /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-foreground", children: [
+        title,
+        /* @__PURE__ */ jsxs("span", { className: "ml-2 text-sm font-normal text-muted-foreground", children: [
+          "(",
+          resources.length,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: resources.map((r) => /* @__PURE__ */ jsx(ResourceCard, { resource: r }, `${r.type}:${r.name}`)) })
   ] });
 }
 function SearchBar({ value, onChange, placeholder, resultCount, totalCount }) {
   const hasQuery = value.trim().length > 0;
   const noResults = hasQuery && resultCount === 0;
-  return /* @__PURE__ */ jsxs("div", { className: "vta-search", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mb-7", children: [
     /* @__PURE__ */ jsx(
-      "input",
+      Input,
       {
         type: "search",
         value,
-        onChange: (e) => onChange(e.target.value),
+        onChange,
         placeholder: placeholder || "Search collections...",
-        className: "vta-search-input",
+        className: "max-w-sm rounded-full",
         autoComplete: "off"
       }
     ),
-    hasQuery && !noResults && /* @__PURE__ */ jsxs("p", { className: "vta-search-hint", children: [
+    hasQuery && !noResults && /* @__PURE__ */ jsxs("p", { className: "mt-1.5 text-xs text-muted-foreground", children: [
       "Showing ",
       resultCount,
       " of ",
       totalCount,
       " resources"
     ] }),
-    noResults && /* @__PURE__ */ jsx("p", { className: "vta-search-empty", children: "No resources match this search." })
-  ] });
-}
-function ResourceCard({ resource }) {
-  return /* @__PURE__ */ jsxs("div", { className: "vta-card", children: [
-    /* @__PURE__ */ jsx("span", { className: `vta-card-type vta-card-type--${resource.type}`, children: resource.type }),
-    /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: resource.title }),
-    /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: resource.description || "No description" }),
-    resource.tags && resource.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "vta-card-tags", children: resource.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "vta-tag", children: tag }, tag)) }),
-    resource.url && /* @__PURE__ */ jsx("div", { className: "vta-card-url", children: resource.url })
-  ] });
-}
-function ResourceSection({ title, subtitle, resources, showDivider }) {
-  if (resources.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { children: [
-    showDivider && /* @__PURE__ */ jsx("hr", { className: "vta-divider" }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("h2", { className: "vta-section-title", children: [
-        title,
-        /* @__PURE__ */ jsxs("span", { className: "vta-section-count", children: [
-          "(",
-          resources.length,
-          ")"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "vta-section-subtitle", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "vta-card-grid", children: resources.map((r) => /* @__PURE__ */ jsx(ResourceCard, { resource: r }, `${r.type}:${r.name}`)) })
-  ] });
-}
-function CollectionCard({ collection }) {
-  const href = `/${collection.type}s/${collection.name}`;
-  return /* @__PURE__ */ jsx(NavLink, { href, className: "vta-card-link", children: /* @__PURE__ */ jsxs("div", { className: "vta-card vta-card--link", children: [
-    /* @__PURE__ */ jsx("span", { className: `vta-card-type vta-card-type--${collection.type}`, children: collection.type }),
-    /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: collection.title }),
-    /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: collection.description || "No description" }),
-    /* @__PURE__ */ jsxs("div", { className: "vta-card-url", children: [
-      collection.count,
-      " ",
-      collection.count === 1 ? "item" : "items"
-    ] })
-  ] }) });
-}
-function DetailPage({ type, title, description, tags, backHref = "/", children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "vta-root", children: [
-    /* @__PURE__ */ jsxs("nav", { className: "vta-detail-nav", children: [
-      backHref !== "/" && /* @__PURE__ */ jsx(NavLink, { href: "/", className: "vta-detail-back", children: "Home" }),
-      /* @__PURE__ */ jsx(NavLink, { href: backHref, className: "vta-detail-back", children: "← Back" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "vta-detail-header", children: [
-      /* @__PURE__ */ jsx("span", { className: `vta-card-type vta-card-type--${type}`, children: type }),
-      /* @__PURE__ */ jsx("h1", { className: "vta-detail-title", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "vta-detail-desc", children: description }),
-      tags && tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "vta-card-tags", children: tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "vta-tag", children: tag }, tag)) })
-    ] }),
-    children
+    noResults && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-destructive", children: "No resources match this search." })
   ] });
 }
 const sections = [
@@ -378,7 +439,7 @@ function HomePage() {
     [resources, search]
   );
   const isSearching = search.trim().length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: "vta-root", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-7 py-10", children: [
     /* @__PURE__ */ jsx(
       HeroSection,
       {
@@ -397,95 +458,81 @@ function HomePage() {
         totalCount: resources.length
       }
     ),
-    isSearching ? (
-      /* Search mode: show individual resource cards */
-      sections.map((section, i) => {
-        const sectionItems = filtered.filter((r) => r.type === section.type);
-        return /* @__PURE__ */ jsx(
-          ResourceSection,
-          {
-            title: section.title,
-            subtitle: section.subtitle,
-            resources: sectionItems,
-            showDivider: i > 0
-          },
-          section.type
-        );
-      })
-    ) : (
-      /* Browse mode: show collection cards grouped by type */
-      sections.map((section, i) => {
-        const sectionCollections = collections.filter((c) => c.type === section.type);
-        const mcpResources = section.type === "mcp" ? resources.filter((r) => r.type === "mcp") : [];
-        if (sectionCollections.length === 0 && mcpResources.length === 0) return null;
-        return /* @__PURE__ */ jsxs("section", { children: [
-          i > 0 && /* @__PURE__ */ jsx("hr", { className: "vta-divider" }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs("h2", { className: "vta-section-title", children: [
-              section.title,
-              /* @__PURE__ */ jsxs("span", { className: "vta-section-count", children: [
-                "(",
-                sectionCollections.length,
-                sectionCollections.length === 1 ? " collection" : " collections",
-                ")"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "vta-section-subtitle", children: section.subtitle })
+    isSearching ? sections.map((section, i) => {
+      const sectionItems = filtered.filter((r) => r.type === section.type);
+      return /* @__PURE__ */ jsx(
+        ResourceSection,
+        {
+          title: section.title,
+          subtitle: section.subtitle,
+          resources: sectionItems,
+          showDivider: i > 0
+        },
+        section.type
+      );
+    }) : sections.map((section, i) => {
+      const sectionCollections = collections.filter((c) => c.type === section.type);
+      const mcpResources = section.type === "mcp" ? resources.filter((r) => r.type === "mcp") : [];
+      if (sectionCollections.length === 0 && mcpResources.length === 0) return null;
+      return /* @__PURE__ */ jsxs("section", { children: [
+        i > 0 && /* @__PURE__ */ jsx(Separator, { className: "my-8" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-foreground", children: [
+            section.title,
+            /* @__PURE__ */ jsxs("span", { className: "ml-2 text-sm font-normal text-muted-foreground", children: [
+              "(",
+              sectionCollections.length,
+              sectionCollections.length === 1 ? " collection" : " collections",
+              ")"
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "vta-card-grid", children: [
-            sectionCollections.map((col) => /* @__PURE__ */ jsx(CollectionCard, { collection: col }, `${col.type}:${col.name}`)),
-            mcpResources.map((r) => /* @__PURE__ */ jsxs("div", { className: "vta-card", children: [
-              /* @__PURE__ */ jsx("span", { className: "vta-card-type vta-card-type--mcp", children: "mcp" }),
-              /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: r.title }),
-              /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: r.description || "No description" }),
-              r.url && /* @__PURE__ */ jsx("div", { className: "vta-card-url", children: r.url })
-            ] }, r.name))
-          ] })
-        ] }, section.type);
-      })
-    )
+          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: section.subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: [
+          sectionCollections.map((col) => /* @__PURE__ */ jsx(CollectionCard, { collection: col }, `${col.type}:${col.name}`)),
+          mcpResources.map((r) => /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card p-5 shadow-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.mcp}`, children: "mcp" }),
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: r.title }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: r.description || "No description" }),
+            r.url && /* @__PURE__ */ jsx("div", { className: "mt-2 truncate font-mono text-xs text-muted-foreground", children: r.url })
+          ] }, r.name))
+        ] })
+      ] }, section.type);
+    })
   ] });
 }
 function InteractionCollection() {
   const collection = useParams("collection");
   const { baseUrl } = useAdminContext();
-  const { data: interactions, isLoading, error } = useFetch(
+  const { data: interactions, error } = useFetch(
     () => fetch(`${baseUrl}/interactions/${collection}`).then((r) => {
       if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
       return r.json();
     }),
     [baseUrl, collection]
   );
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading collection..." });
-  }
-  if (error || !interactions) {
-    return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
       "Failed to load collection “",
       collection,
       "”."
     ] });
   }
+  if (!interactions) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
   return /* @__PURE__ */ jsx(
     DetailPage,
     {
       type: "interaction",
       title: collection,
       description: `${interactions.length} interaction${interactions.length !== 1 ? "s" : ""} in this collection.`,
-      children: /* @__PURE__ */ jsx("div", { className: "vta-card-grid", children: interactions.map((inter) => /* @__PURE__ */ jsx(
-        NavLink,
-        {
-          href: `/interactions/${collection}/${inter.name}`,
-          className: "vta-card-link",
-          children: /* @__PURE__ */ jsxs("div", { className: "vta-card vta-card--link", children: [
-            /* @__PURE__ */ jsx("span", { className: "vta-card-type vta-card-type--interaction", children: "interaction" }),
-            /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: inter.title || inter.name }),
-            /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: inter.description || "No description" }),
-            inter.tags && inter.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "vta-card-tags", children: inter.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "vta-tag", children: tag }, tag)) })
-          ] })
-        },
-        inter.id
-      )) })
+      children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: interactions.map((inter) => /* @__PURE__ */ jsx(NavLink, { href: `/interactions/${collection}/${inter.name}`, className: "block no-underline", children: /* @__PURE__ */ jsx(Card, { className: "cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+        /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.interaction}`, children: "interaction" }),
+        /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: inter.title || inter.name }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: inter.description || "No description" }),
+        inter.tags && inter.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: inter.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { children: tag }, tag)) })
+      ] }) }) }, inter.id)) })
     }
   );
 }
@@ -495,7 +542,7 @@ function InteractionDetail() {
   const collection = params.collection;
   const name = params.name;
   const { baseUrl } = useAdminContext();
-  const { data: interaction, isLoading, error } = useFetch(
+  const { data: interaction, error } = useFetch(
     () => client.getRawJWT().then((token) => fetch(`${baseUrl}/interactions/${collection}/${name}`, {
       headers: {
         Authorization: `Bearer ${token}`
@@ -506,16 +553,16 @@ function InteractionDetail() {
     }),
     [baseUrl, collection, name]
   );
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading interaction..." });
-  }
-  if (error || !interaction) {
-    return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
       "Failed to load interaction “",
       name,
       "”."
     ] });
   }
+  if (!interaction) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
   const { agent_runner_options } = interaction;
   const hasAgentFlags = agent_runner_options && (agent_runner_options.is_agent || agent_runner_options.is_tool || agent_runner_options.is_skill);
   return /* @__PURE__ */ jsxs(
@@ -527,72 +574,39 @@ function InteractionDetail() {
       tags: interaction.tags,
       backHref: `/interactions/${collection}`,
       children: [
-        interaction.prompts && interaction.prompts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Prompts" }),
-          interaction.prompts.map((prompt, i) => /* @__PURE__ */ jsxs("div", { className: "vta-detail-card", children: [
-            /* @__PURE__ */ jsxs("div", { className: "vta-detail-card-header", children: [
-              /* @__PURE__ */ jsx("span", { className: `vta-detail-role vta-detail-role--${prompt.role}`, children: prompt.role }),
-              prompt.name && /* @__PURE__ */ jsx("span", { className: "vta-detail-prompt-name", children: prompt.name })
+        interaction.prompts && interaction.prompts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Prompts" }),
+          interaction.prompts.map((prompt) => /* @__PURE__ */ jsx(Card, { className: "mb-3", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: `rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${ROLE_VARIANTS[prompt.role] ?? ""}`, children: prompt.role }),
+              prompt.name && /* @__PURE__ */ jsx("span", { className: "text-sm italic text-muted-foreground", children: prompt.name })
             ] }),
-            /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: prompt.content })
-          ] }, i))
+            /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: prompt.content })
+          ] }) }, `${prompt.role}-${prompt.name ?? ""}`))
         ] }),
-        interaction.result_schema && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Result Schema" }),
-          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: JSON.stringify(interaction.result_schema, null, 2) })
+        interaction.result_schema && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Result Schema" }),
+          /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: JSON.stringify(interaction.result_schema, null, 2) })
         ] }),
-        hasAgentFlags && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Agent Runner" }),
-          /* @__PURE__ */ jsxs("div", { className: "vta-detail-flags", children: [
-            agent_runner_options.is_agent && /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: "Agent" }),
-            agent_runner_options.is_tool && /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: "Tool" }),
-            agent_runner_options.is_skill && /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: "Skill" })
+        hasAgentFlags && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Agent Runner" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            agent_runner_options.is_agent && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Agent" }),
+            agent_runner_options.is_tool && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Tool" }),
+            agent_runner_options.is_skill && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Skill" })
           ] })
         ] })
       ]
     }
   );
 }
-function ToolCollection() {
-  const collection = useParams("collection");
-  const { baseUrl } = useAdminContext();
-  const { data, isLoading, error } = useFetch(
-    () => fetch(`${baseUrl}/tools/${collection}`).then((r) => {
-      if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
-      return r.json();
-    }),
-    [baseUrl, collection]
-  );
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading collection..." });
-  if (error || !data) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
-    "Failed to load tool collection “",
-    collection,
-    "”."
-  ] });
-  return /* @__PURE__ */ jsx(
-    DetailPage,
-    {
-      type: "tool",
-      title: data.title || collection,
-      description: data.description || `${data.tools.length} tool${data.tools.length !== 1 ? "s" : ""} in this collection.`,
-      children: data.tools.map((tool) => /* @__PURE__ */ jsxs("div", { className: "vta-detail-card", children: [
-        /* @__PURE__ */ jsxs("div", { className: "vta-detail-card-header", children: [
-          /* @__PURE__ */ jsx("span", { className: "vta-card-type vta-card-type--tool", children: "tool" }),
-          /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: tool.name })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: tool.description || "No description" }),
-        tool.input_schema && /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: JSON.stringify(tool.input_schema, null, 2) })
-      ] }, tool.name))
-    }
-  );
-}
 function skillDisplayName(name) {
   return name.startsWith("learn_") ? name.slice(6) : name;
 }
 function SkillCollection() {
   const collection = useParams("collection");
   const { baseUrl } = useAdminContext();
-  const { data, isLoading, error } = useFetch(
+  const { data, error } = useFetch(
     () => fetch(`${baseUrl}/skills/${collection}`).then((r) => {
       if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
       return r.json();
@@ -607,12 +621,12 @@ function SkillCollection() {
     if (!widgetsData?.widgets) return [];
     return Object.entries(widgetsData.widgets).filter(([_, w]) => w.collection === collection).map(([name, w]) => ({ name, ...w }));
   }, [widgetsData, collection]);
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading collection..." });
-  if (error || !data) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
     "Failed to load skill collection “",
     collection,
     "”."
   ] });
+  if (!data) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   return /* @__PURE__ */ jsxs(
     DetailPage,
     {
@@ -620,33 +634,25 @@ function SkillCollection() {
       title: data.title || collection,
       description: data.description || `${data.tools.length} skill${data.tools.length !== 1 ? "s" : ""} in this collection.`,
       children: [
-        collectionWidgets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Widgets" }),
-          /* @__PURE__ */ jsx("div", { className: "vta-detail-flags", children: collectionWidgets.map((w) => /* @__PURE__ */ jsxs("span", { className: "vta-detail-flag", children: [
+        collectionWidgets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Widgets" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: collectionWidgets.map((w) => /* @__PURE__ */ jsxs(Badge, { variant: "success", children: [
             w.name,
-            /* @__PURE__ */ jsxs("span", { className: "vta-card-url", style: { marginLeft: "0.5rem" }, children: [
+            /* @__PURE__ */ jsxs("span", { className: "ml-2 font-mono text-xs opacity-70", children: [
               "(skill: ",
               w.skill,
               ")"
             ] })
           ] }, w.name)) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "vta-card-grid", children: data.tools.map((skill) => {
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: data.tools.map((skill) => {
           const displayName = skillDisplayName(skill.name);
-          return /* @__PURE__ */ jsx(
-            NavLink,
-            {
-              href: `/skills/${collection}/${displayName}`,
-              className: "vta-card-link",
-              children: /* @__PURE__ */ jsxs("div", { className: "vta-card vta-card--link", children: [
-                /* @__PURE__ */ jsx("span", { className: "vta-card-type vta-card-type--skill", children: "skill" }),
-                /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: displayName }),
-                /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: skill.description || "No description" }),
-                skill.related_tools && skill.related_tools.length > 0 && /* @__PURE__ */ jsx("div", { className: "vta-card-tags", children: skill.related_tools.map((t) => /* @__PURE__ */ jsx("span", { className: "vta-tag", children: t }, t)) })
-              ] })
-            },
-            skill.name
-          );
+          return /* @__PURE__ */ jsx(NavLink, { href: `/skills/${collection}/${displayName}`, className: "block no-underline", children: /* @__PURE__ */ jsx(Card, { className: "cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-md", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+            /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.skill}`, children: "skill" }),
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: displayName }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: skill.description || "No description" }),
+            skill.related_tools && skill.related_tools.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-1", children: skill.related_tools.map((t) => /* @__PURE__ */ jsx(Badge, { children: t }, t)) })
+          ] }) }) }, skill.name);
         }) })
       ]
     }
@@ -657,19 +663,19 @@ function SkillDetail() {
   const collection = params.collection;
   const name = params.name;
   const { baseUrl } = useAdminContext();
-  const { data: skill, isLoading, error } = useFetch(
+  const { data: skill, error } = useFetch(
     () => fetch(`${baseUrl}/skills/${collection}/${name}`).then((r) => {
       if (!r.ok) throw new Error(`Failed to load skill: ${r.statusText}`);
       return r.json();
     }),
     [baseUrl, collection, name]
   );
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading skill..." });
-  if (error || !skill) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
     "Failed to load skill “",
     name,
     "”."
   ] });
+  if (!skill) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   return /* @__PURE__ */ jsxs(
     DetailPage,
     {
@@ -678,210 +684,242 @@ function SkillDetail() {
       description: skill.description,
       backHref: `/skills/${collection}`,
       children: [
-        skill.widgets && skill.widgets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Widgets" }),
-          /* @__PURE__ */ jsx("div", { className: "vta-detail-flags", children: skill.widgets.map((w) => /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: w }, w)) })
+        skill.widgets && skill.widgets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Widgets" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: skill.widgets.map((w) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: w }, w)) })
         ] }),
-        skill.scripts && skill.scripts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Scripts" }),
-          /* @__PURE__ */ jsx("div", { className: "vta-detail-flags", children: skill.scripts.map((s) => /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: s }, s)) })
+        skill.scripts && skill.scripts.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Scripts" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: skill.scripts.map((s) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: s }, s)) })
         ] }),
-        skill.related_tools && skill.related_tools.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Related Tools" }),
-          /* @__PURE__ */ jsx("div", { className: "vta-detail-flags", children: skill.related_tools.map((t) => /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: t }, t)) })
+        skill.related_tools && skill.related_tools.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Related Tools" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: skill.related_tools.map((t) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: t }, t)) })
         ] }),
-        skill.execution && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Execution" }),
-          /* @__PURE__ */ jsxs("div", { className: "vta-detail-flags", children: [
-            /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: skill.execution.language }),
-            skill.execution.packages?.map((p) => /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: p }, p))
+        skill.execution && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Execution" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx(Badge, { variant: "success", children: skill.execution.language }),
+            skill.execution.packages?.map((p) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: p }, p))
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsxs("h2", { children: [
-            "Instructions ",
-            skill.content_type === "jst" && /* @__PURE__ */ jsx("span", { className: "vta-tag", children: "JST template" })
+        /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsxs("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: [
+            "Instructions",
+            skill.content_type === "jst" && /* @__PURE__ */ jsx(Badge, { className: "ml-2", children: "JST template" })
           ] }),
-          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: skill.instructions })
+          /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: skill.instructions })
         ] }),
-        skill.input_schema && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Input Schema" }),
-          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: JSON.stringify(skill.input_schema, null, 2) })
+        skill.input_schema && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Input Schema" }),
+          /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: JSON.stringify(skill.input_schema, null, 2) })
         ] })
       ]
     }
   );
 }
-function TypeCollection() {
+function TemplateCollection() {
   const collection = useParams("collection");
   const { baseUrl } = useAdminContext();
-  const { data: types, isLoading, error } = useFetch(
-    () => fetch(`${baseUrl}/types/${collection}`).then((r) => {
+  const { data: templates, error } = useFetch(
+    () => fetch(`${baseUrl}/templates/${collection}`).then((r) => {
       if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
       return r.json();
     }),
     [baseUrl, collection]
   );
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading collection..." });
-  if (error || !types) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
-    "Failed to load type collection “",
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
+    "Failed to load template collection “",
     collection,
     "”."
   ] });
+  if (!templates) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   return /* @__PURE__ */ jsx(
     DetailPage,
     {
-      type: "type",
+      type: "template",
       title: collection,
-      description: `${types.length} content type${types.length !== 1 ? "s" : ""} in this collection.`,
-      children: /* @__PURE__ */ jsx("div", { className: "vta-card-grid", children: types.map((t) => {
-        const typeName = t.id?.split(":")[1] || t.name;
-        return /* @__PURE__ */ jsx(
-          NavLink,
-          {
-            href: `/types/${collection}/${typeName}`,
-            className: "vta-card-link",
-            children: /* @__PURE__ */ jsxs("div", { className: "vta-card vta-card--link", children: [
-              /* @__PURE__ */ jsx("span", { className: "vta-card-type vta-card-type--type", children: "type" }),
-              /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: t.name }),
-              /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: t.description || "No description" }),
-              t.tags && t.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "vta-card-tags", children: t.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "vta-tag", children: tag }, tag)) }),
-              /* @__PURE__ */ jsxs("div", { className: "vta-card-url", children: [
-                t.is_chunkable && "chunkable",
-                t.is_chunkable && t.strict_mode && " · ",
-                t.strict_mode && "strict"
-              ] })
-            ] })
-          },
-          t.name
-        );
-      }) })
+      description: `${templates.length} template${templates.length !== 1 ? "s" : ""} in this collection.`,
+      children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: templates.map((tmpl) => /* @__PURE__ */ jsx(
+        NavLink,
+        {
+          href: `/templates/${collection}/${tmpl.name}`,
+          className: "no-underline",
+          children: /* @__PURE__ */ jsx(Card, { className: "h-full transition-all hover:-translate-y-0.5 hover:shadow-md", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+            /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.template}`, children: tmpl.type || "template" }),
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: tmpl.title || tmpl.name }),
+            /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: tmpl.description || "No description" }),
+            tmpl.tags && tmpl.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: tmpl.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: tag }, tag)) })
+          ] }) })
+        },
+        tmpl.name
+      )) })
     }
   );
 }
-function TypeDetail() {
+function TemplateDetail() {
   const params = useParams();
   const collection = params.collection;
   const name = params.name;
   const { baseUrl } = useAdminContext();
-  const { data: typeDef, isLoading, error } = useFetch(
-    () => fetch(`${baseUrl}/types/${collection}/${name}`).then((r) => {
-      if (!r.ok) throw new Error(`Failed to load type: ${r.statusText}`);
+  const { data: template, error } = useFetch(
+    () => fetch(`${baseUrl}/templates/${collection}/${name}`).then((r) => {
+      if (!r.ok) throw new Error(`Failed to load template: ${r.statusText}`);
       return r.json();
     }),
     [baseUrl, collection, name]
   );
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading type..." });
-  if (error || !typeDef) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
-    "Failed to load type “",
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
+    "Failed to load template “",
     name,
     "”."
   ] });
+  if (!template) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   return /* @__PURE__ */ jsxs(
     DetailPage,
     {
-      type: "type",
-      title: typeDef.name,
-      description: typeDef.description,
-      tags: typeDef.tags,
-      backHref: `/types/${collection}`,
+      type: "template",
+      title: template.title || template.name,
+      description: template.description,
+      tags: template.tags,
+      backHref: `/templates/${collection}`,
       children: [
-        (typeDef.is_chunkable || typeDef.strict_mode) && /* @__PURE__ */ jsx("div", { className: "vta-detail-section", children: /* @__PURE__ */ jsxs("div", { className: "vta-detail-flags", children: [
-          typeDef.is_chunkable && /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: "Chunkable" }),
-          typeDef.strict_mode && /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: "Strict Mode" })
-        ] }) }),
-        typeDef.object_schema && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Object Schema" }),
-          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: JSON.stringify(typeDef.object_schema, null, 2) })
+        /* @__PURE__ */ jsx("div", { className: "mb-8", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: /* @__PURE__ */ jsx(Badge, { variant: "success", children: template.type }) }) }),
+        template.assets && template.assets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Assets" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: template.assets.map((asset) => /* @__PURE__ */ jsx(Badge, { variant: "success", children: asset.split("/").pop() }, asset)) })
         ] }),
-        typeDef.table_layout && typeDef.table_layout.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Table Layout" }),
-          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: JSON.stringify(typeDef.table_layout, null, 2) })
+        /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Instructions" }),
+          /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: template.instructions })
         ] })
       ]
     }
   );
 }
-function TemplateCollection() {
+function ToolCollection() {
   const collection = useParams("collection");
   const { baseUrl } = useAdminContext();
-  const { data: templates, isLoading, error } = useFetch(
-    () => fetch(`${baseUrl}/templates/${collection}`).then((r) => {
+  const { data, error } = useFetch(
+    () => fetch(`${baseUrl}/tools/${collection}`).then((r) => {
       if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
       return r.json();
     }),
     [baseUrl, collection]
   );
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading collection..." });
-  if (error || !templates) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
-    "Failed to load template collection “",
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
+    "Failed to load tool collection “",
     collection,
     "”."
   ] });
+  if (!data) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   return /* @__PURE__ */ jsx(
     DetailPage,
     {
-      type: "template",
+      type: "tool",
+      title: data.title || collection,
+      description: data.description || `${data.tools.length} tool${data.tools.length !== 1 ? "s" : ""} in this collection.`,
+      children: data.tools.map((tool) => /* @__PURE__ */ jsx(Card, { className: "mb-4", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: `inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.tool}`, children: "tool" }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-card-foreground", children: tool.name })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: tool.description || "No description" }),
+        tool.input_schema && /* @__PURE__ */ jsx("pre", { className: "mt-3 whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: JSON.stringify(tool.input_schema, null, 2) })
+      ] }) }, tool.name))
+    }
+  );
+}
+function TypeCollection() {
+  const collection = useParams("collection");
+  const { baseUrl } = useAdminContext();
+  const { data: types, error } = useFetch(
+    () => fetch(`${baseUrl}/types/${collection}`).then((r) => {
+      if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+      return r.json();
+    }),
+    [baseUrl, collection]
+  );
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
+    "Failed to load type collection “",
+    collection,
+    "”."
+  ] });
+  if (!types) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  return /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      type: "type",
       title: collection,
-      description: `${templates.length} template${templates.length !== 1 ? "s" : ""} in this collection.`,
-      children: /* @__PURE__ */ jsx("div", { className: "vta-card-grid", children: templates.map((tmpl) => /* @__PURE__ */ jsx(
-        NavLink,
-        {
-          href: `/templates/${collection}/${tmpl.name}`,
-          className: "vta-card-link",
-          children: /* @__PURE__ */ jsxs("div", { className: "vta-card vta-card--link", children: [
-            /* @__PURE__ */ jsx("div", { className: "vta-card-type vta-card-type--template", children: tmpl.type || "template" }),
-            /* @__PURE__ */ jsx("div", { className: "vta-card-title", children: tmpl.title || tmpl.name }),
-            /* @__PURE__ */ jsx("div", { className: "vta-card-desc", children: tmpl.description || "No description" }),
-            tmpl.tags && tmpl.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "vta-card-tags", children: tmpl.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "vta-tag", children: tag }, tag)) })
-          ] })
-        },
-        tmpl.name
-      )) })
+      description: `${types.length} content type${types.length !== 1 ? "s" : ""} in this collection.`,
+      children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: types.map((t) => {
+        const typeName = t.id?.split(":")[1] || t.name;
+        return /* @__PURE__ */ jsx(
+          NavLink,
+          {
+            href: `/types/${collection}/${typeName}`,
+            className: "no-underline",
+            children: /* @__PURE__ */ jsx(Card, { className: "h-full transition-all hover:-translate-y-0.5 hover:shadow-md", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5", children: [
+              /* @__PURE__ */ jsx("span", { className: `mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.type}`, children: "type" }),
+              /* @__PURE__ */ jsx("div", { className: "font-semibold text-card-foreground", children: t.name }),
+              /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: t.description || "No description" }),
+              t.tags && t.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: t.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: tag }, tag)) }),
+              (t.is_chunkable || t.strict_mode) && /* @__PURE__ */ jsxs("div", { className: "mt-2 truncate font-mono text-xs text-muted-foreground", children: [
+                t.is_chunkable && "chunkable",
+                t.is_chunkable && t.strict_mode && " · ",
+                t.strict_mode && "strict"
+              ] })
+            ] }) })
+          },
+          t.name
+        );
+      }) })
     }
   );
 }
-function TemplateDetail() {
+function TypeDetail() {
   const params = useParams();
   const collection = params.collection;
   const name = params.name;
   const { baseUrl } = useAdminContext();
-  const { data: template, isLoading, error } = useFetch(
-    () => fetch(`${baseUrl}/templates/${collection}/${name}`).then((r) => {
-      if (!r.ok) throw new Error(`Failed to load template: ${r.statusText}`);
+  const { data: typeDef, error } = useFetch(
+    () => fetch(`${baseUrl}/types/${collection}/${name}`).then((r) => {
+      if (!r.ok) throw new Error(`Failed to load type: ${r.statusText}`);
       return r.json();
     }),
     [baseUrl, collection, name]
   );
-  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading template..." });
-  if (error || !template) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
-    "Failed to load template “",
+  if (error) return /* @__PURE__ */ jsxs("div", { className: "p-6 text-destructive", children: [
+    "Failed to load type “",
     name,
     "”."
   ] });
+  if (!typeDef) return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   return /* @__PURE__ */ jsxs(
     DetailPage,
     {
-      type: "template",
-      title: template.title || template.name,
-      description: template.description,
-      tags: template.tags,
-      backHref: `/templates/${collection}`,
+      type: "type",
+      title: typeDef.name,
+      description: typeDef.description,
+      tags: typeDef.tags,
+      backHref: `/types/${collection}`,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "vta-detail-section", children: /* @__PURE__ */ jsx("div", { className: "vta-detail-flags", children: /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: template.type }) }) }),
-        template.assets && template.assets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Assets" }),
-          /* @__PURE__ */ jsx("div", { className: "vta-detail-flags", children: template.assets.map((asset) => /* @__PURE__ */ jsx("span", { className: "vta-detail-flag", children: asset.split("/").pop() }, asset)) })
+        (typeDef.is_chunkable || typeDef.strict_mode) && /* @__PURE__ */ jsx("div", { className: "mb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          typeDef.is_chunkable && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Chunkable" }),
+          typeDef.strict_mode && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Strict Mode" })
+        ] }) }),
+        typeDef.object_schema && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Object Schema" }),
+          /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: JSON.stringify(typeDef.object_schema, null, 2) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
-          /* @__PURE__ */ jsx("h2", { children: "Instructions" }),
-          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: template.instructions })
+        typeDef.table_layout && typeDef.table_layout.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+          /* @__PURE__ */ jsx("h2", { className: "mb-3 text-lg font-semibold text-foreground", children: "Table Layout" }),
+          /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap wrap-break-word rounded-lg border border-border bg-muted-background p-4 font-mono text-sm text-foreground", children: JSON.stringify(typeDef.table_layout, null, 2) })
         ] })
       ]
     }
   );
 }
-const adminStyles = "/**\n * Self-contained styles for the admin panel.\n * All classes are prefixed with `vta-` (Vertesia Tools Admin) to avoid\n * polluting the plugin app CSS or the host page.\n */\n\n/* ── Root container ─────────────────────────────────────────────── */\n\n.vta-root {\n    max-width: 1120px;\n    margin: 0 auto;\n    padding: 2.5rem 1.75rem;\n    font-family: system-ui, -apple-system, sans-serif;\n    color: #0f172a;\n    line-height: 1.5;\n}\n\n/* ── Hero header ────────────────────────────────────────────────── */\n\n.vta-hero {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 2.25rem;\n    padding: 1.75rem 2rem;\n    margin-bottom: 2.5rem;\n    border-radius: 1.25rem;\n    background: linear-gradient(135deg, #ffffff, #f3f4ff);\n    border: 1px solid #e5e7eb;\n    box-shadow:\n        0 18px 40px rgba(15, 23, 42, 0.08),\n        0 0 0 1px rgba(248, 250, 252, 0.8);\n}\n\n.vta-hero-main {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n}\n\n.vta-hero-identity {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n}\n\n.vta-hero-logo {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 56px;\n    height: 56px;\n    border-radius: 14px;\n    background: radial-gradient(circle at 30% 0, #38bdf8, #6366f1);\n    box-shadow:\n        0 0 0 1px rgba(15, 23, 42, 0.85),\n        0 12px 30px rgba(37, 99, 235, 0.6);\n    font-size: 1.1rem;\n    font-weight: 650;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    color: #eff6ff;\n}\n\n.vta-hero-eyebrow {\n    font-size: 0.75rem;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: #6b7280;\n    margin: 0;\n}\n\n.vta-hero-title {\n    font-size: 1.9rem;\n    font-weight: 650;\n    letter-spacing: -0.03em;\n    color: #0f172a;\n    margin: 0;\n}\n\n.vta-hero-tagline {\n    font-size: 0.95rem;\n    color: #4b5563;\n    margin: 0;\n}\n\n.vta-hero-summary {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6b7280;\n}\n\n.vta-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    padding: 0.15rem 0.55rem;\n    border-radius: 999px;\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n}\n\n.vta-badge-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 999px;\n    display: inline-block;\n    background: #22c55e;\n}\n\n.vta-hero-links {\n    display: flex;\n    gap: 0.75rem;\n    flex-wrap: wrap;\n    margin-top: 0.25rem;\n}\n\n.vta-link-primary,\n.vta-link-secondary {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 1rem;\n    border-radius: 6px;\n    font-size: 0.875rem;\n    font-weight: 500;\n    text-decoration: none;\n    color: white;\n    transition: opacity 0.15s;\n}\n\n.vta-link-primary { background: #3b82f6; }\n.vta-link-secondary { background: #10b981; }\n.vta-link-primary:hover { opacity: 0.88; }\n.vta-link-secondary:hover { opacity: 0.88; }\n\n/* ── Hero aside panel ───────────────────────────────────────────── */\n\n.vta-hero-panel {\n    min-width: 220px;\n    max-width: 260px;\n    flex-shrink: 0;\n}\n\n.vta-endpoint {\n    margin-bottom: 0.75rem;\n}\n\n.vta-endpoint-label {\n    font-size: 0.7rem;\n    letter-spacing: 0.13em;\n    text-transform: uppercase;\n    color: #1d4ed8;\n    margin-bottom: 0.35rem;\n}\n\n.vta-endpoint-box {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    background: #f3f4f6;\n    padding: 0.5rem 0.75rem;\n    border-radius: 0.5rem;\n    border: 1px solid #e5e7eb;\n}\n\n.vta-endpoint-code {\n    flex: 1;\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 0.82rem;\n    color: #111827;\n}\n\n.vta-copy-btn {\n    background: #e5e7eb;\n    border: none;\n    padding: 0.35rem;\n    border-radius: 4px;\n    cursor: pointer;\n    color: #6b7280;\n    font-size: 0.8rem;\n    line-height: 1;\n    transition: all 0.15s;\n}\n\n.vta-copy-btn:hover {\n    background: #d1d5db;\n    color: #374151;\n}\n\n.vta-hero-hint {\n    margin-top: 0.6rem;\n    font-size: 0.8rem;\n    color: #6b7280;\n    line-height: 1.4;\n}\n\n.vta-hero-hint strong {\n    color: #111827;\n}\n\n.vta-hero-version {\n    font-size: 0.75rem;\n    color: #9ca3af;\n    margin-top: 0.25rem;\n}\n\n/* ── Search bar ─────────────────────────────────────────────────── */\n\n.vta-search {\n    margin-bottom: 1.75rem;\n}\n\n.vta-search-input {\n    width: 100%;\n    max-width: 360px;\n    padding: 0.55rem 0.75rem;\n    border-radius: 999px;\n    border: 1px solid #e5e7eb;\n    background: #ffffff;\n    color: #111827;\n    font-size: 0.9rem;\n    font-family: inherit;\n    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);\n    box-sizing: border-box;\n}\n\n.vta-search-input::placeholder { color: #9ca3af; }\n\n.vta-search-input:focus {\n    outline: none;\n    border-color: #60a5fa;\n    box-shadow:\n        0 0 0 1px rgba(59, 130, 246, 0.4),\n        0 6px 18px rgba(37, 99, 235, 0.18);\n}\n\n.vta-search-hint {\n    font-size: 0.75rem;\n    color: #9ca3af;\n    margin-top: 0.4rem;\n}\n\n.vta-search-empty {\n    font-size: 0.85rem;\n    color: #ef4444;\n    margin-top: 0.5rem;\n}\n\n/* ── Section ────────────────────────────────────────────────────── */\n\n.vta-divider {\n    border: none;\n    border-top: 1px solid #e5e7eb;\n    margin: 2rem 0;\n}\n\n.vta-section-title {\n    font-size: 1.4rem;\n    font-weight: 600;\n    letter-spacing: 0.03em;\n    color: #0f172a;\n    margin: 0 0 0.25rem 0;\n}\n\n.vta-section-count {\n    font-size: 0.85rem;\n    font-weight: 400;\n    color: #9ca3af;\n    margin-left: 0.5rem;\n}\n\n.vta-section-subtitle {\n    font-size: 0.8rem;\n    color: #6b7280;\n    margin: 0 0 1rem 0;\n}\n\n/* ── Resource card grid ─────────────────────────────────────────── */\n\n.vta-card-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 1.5rem;\n}\n\n.vta-card {\n    background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.12), transparent 75%),\n        #ffffff;\n    padding: 1.25rem 1.35rem;\n    border-radius: 14px;\n    box-shadow:\n        0 14px 30px rgba(15, 23, 42, 0.06),\n        0 0 0 1px rgba(248, 250, 252, 0.9);\n    border: 1px solid #e5e7eb;\n    transition: transform 0.15s, box-shadow 0.15s;\n}\n\n.vta-card:hover {\n    transform: translateY(-3px);\n    box-shadow:\n        0 18px 40px rgba(15, 23, 42, 0.10),\n        0 0 0 1px rgba(59, 130, 246, 0.6);\n}\n\n.vta-card-type {\n    display: inline-block;\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding: 0.15rem 0.55rem;\n    border-radius: 999px;\n    margin-bottom: 0.6rem;\n}\n\n/* Type-specific badge colours */\n.vta-card-type--tool         { background: #dbeafe; color: #1e40af; }\n.vta-card-type--skill        { background: #d1fae5; color: #065f46; }\n.vta-card-type--interaction  { background: #fef3c7; color: #92400e; }\n.vta-card-type--type         { background: #f3f4f6; color: #374151; }\n.vta-card-type--template     { background: #ede9fe; color: #5b21b6; }\n.vta-card-type--mcp          { background: #fce7f3; color: #9d174d; }\n\n.vta-card-title {\n    font-weight: 600;\n    font-size: 1.05rem;\n    color: #0f172a;\n    margin-bottom: 0.25rem;\n}\n\n.vta-card-desc {\n    font-size: 0.875rem;\n    color: #6b7280;\n    margin-bottom: 0.5rem;\n}\n\n.vta-card-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n    margin-bottom: 0.4rem;\n}\n\n.vta-tag {\n    font-size: 0.7rem;\n    padding: 0.1rem 0.5rem;\n    border-radius: 999px;\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.vta-card-url {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 0.75rem;\n    color: #9ca3af;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* ── Card link wrapper ─────────────────────────────────────────── */\n\n.vta-card-link {\n    text-decoration: none;\n    color: inherit;\n    display: block;\n}\n\n.vta-card--link {\n    cursor: pointer;\n}\n\n/* ── Detail page ───────────────────────────────────────────────── */\n\n.vta-detail-nav {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    margin-bottom: 1.25rem;\n}\n\n.vta-detail-back {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    font-size: 0.875rem;\n    color: #3b82f6;\n    text-decoration: none;\n    transition: opacity 0.15s;\n}\n\n.vta-detail-back:hover {\n    opacity: 0.75;\n}\n\n.vta-detail-header {\n    margin-bottom: 2rem;\n}\n\n.vta-detail-title {\n    font-size: 1.75rem;\n    font-weight: 650;\n    letter-spacing: -0.02em;\n    color: #0f172a;\n    margin: 0.5rem 0 0.25rem;\n}\n\n.vta-detail-desc {\n    font-size: 0.95rem;\n    color: #4b5563;\n    margin: 0 0 0.75rem;\n    line-height: 1.6;\n}\n\n.vta-detail-section {\n    margin-bottom: 2rem;\n}\n\n.vta-detail-section h2 {\n    font-size: 1.15rem;\n    font-weight: 600;\n    color: #0f172a;\n    margin: 0 0 0.75rem;\n}\n\n.vta-detail-card {\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    padding: 1rem 1.25rem;\n    margin-bottom: 0.75rem;\n}\n\n.vta-detail-card-header {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    margin-bottom: 0.5rem;\n}\n\n.vta-detail-role {\n    display: inline-block;\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding: 0.15rem 0.55rem;\n    border-radius: 999px;\n}\n\n.vta-detail-role--system    { background: #dbeafe; color: #1e40af; }\n.vta-detail-role--user      { background: #d1fae5; color: #065f46; }\n.vta-detail-role--assistant { background: #ede9fe; color: #5b21b6; }\n.vta-detail-role--safety    { background: #fce7f3; color: #9d174d; }\n.vta-detail-role--tool      { background: #fef3c7; color: #92400e; }\n\n.vta-detail-prompt-name {\n    font-size: 0.8rem;\n    color: #6b7280;\n    font-style: italic;\n}\n\n.vta-detail-code {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: 0.82rem;\n    line-height: 1.6;\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    padding: 0.75rem 1rem;\n    margin: 0;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-break: break-word;\n    color: #111827;\n}\n\n.vta-detail-flags {\n    display: flex;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n}\n\n.vta-detail-flag {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    padding: 0.25rem 0.65rem;\n    border-radius: 999px;\n    font-size: 0.8rem;\n    font-weight: 500;\n    background: #d1fae5;\n    color: #065f46;\n}\n\n/* ── Loading / error states ─────────────────────────────────────── */\n\n.vta-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 16rem;\n    color: #9ca3af;\n    font-size: 1rem;\n}\n\n.vta-error {\n    padding: 1.5rem;\n    color: #ef4444;\n    font-size: 0.95rem;\n}\n\n/* ── Responsive ─────────────────────────────────────────────────── */\n\n@media (max-width: 768px) {\n    .vta-root { padding: 1.75rem 1.25rem; }\n    .vta-hero { flex-direction: column; padding: 1.5rem 1.35rem; }\n    .vta-hero-panel { max-width: 100%; width: 100%; }\n}\n\n/* ── Dark mode ──────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n    .vta-root { color: #e5e7eb; }\n\n    .vta-hero {\n        background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));\n        border-color: rgba(148, 163, 184, 0.45);\n        box-shadow:\n            0 24px 60px rgba(15, 23, 42, 0.85),\n            0 0 0 1px rgba(15, 23, 42, 0.75);\n    }\n\n    .vta-hero-eyebrow { color: #9ca3af; }\n    .vta-hero-title { color: #f9fafb; }\n    .vta-hero-tagline { color: #cbd5f5; }\n    .vta-hero-summary { color: #9ca3af; }\n\n    .vta-badge {\n        background: rgba(15, 23, 42, 0.95);\n        border-color: rgba(148, 163, 184, 0.45);\n    }\n\n    .vta-endpoint-label { color: #93c5fd; }\n\n    .vta-endpoint-box {\n        background: rgba(31, 41, 55, 0.95);\n        border-color: rgba(148, 163, 184, 0.6);\n    }\n\n    .vta-endpoint-code { color: #e5e7eb; }\n\n    .vta-copy-btn {\n        background: rgba(55, 65, 81, 0.95);\n        color: #e5e7eb;\n    }\n    .vta-copy-btn:hover {\n        background: rgba(75, 85, 99, 0.98);\n        color: #f9fafb;\n    }\n\n    .vta-hero-hint { color: #9ca3af; }\n    .vta-hero-hint strong { color: #e5e7eb; }\n\n    .vta-search-input {\n        background: rgba(15, 23, 42, 0.96);\n        border-color: rgba(55, 65, 81, 0.9);\n        color: #e5e7eb;\n        box-shadow:\n            0 6px 16px rgba(15, 23, 42, 0.9),\n            0 0 0 1px rgba(15, 23, 42, 0.9);\n    }\n    .vta-search-input::placeholder { color: #6b7280; }\n    .vta-search-input:focus {\n        border-color: #60a5fa;\n        box-shadow:\n            0 0 0 1px rgba(59, 130, 246, 0.7),\n            0 10px 26px rgba(30, 64, 175, 0.7);\n    }\n\n    .vta-search-hint { color: #9ca3af; }\n    .vta-divider { border-top-color: rgba(148, 163, 184, 0.4); }\n    .vta-section-title { color: #e5e7eb; }\n\n    .vta-card {\n        background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.12), transparent 75%),\n            rgba(15, 23, 42, 0.9);\n        box-shadow:\n            0 14px 30px rgba(15, 23, 42, 0.8),\n            0 0 0 1px rgba(15, 23, 42, 0.85);\n        border-color: rgba(148, 163, 184, 0.5);\n    }\n    .vta-card:hover {\n        box-shadow:\n            0 18px 40px rgba(15, 23, 42, 0.9),\n            0 0 0 1px rgba(59, 130, 246, 0.8);\n    }\n\n    .vta-card-title { color: #e5e7eb; }\n    .vta-card-desc { color: #9ca3af; }\n    .vta-card-url { color: #6b7280; }\n\n    .vta-card-type--tool         { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }\n    .vta-card-type--skill        { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }\n    .vta-card-type--interaction  { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }\n    .vta-card-type--type         { background: rgba(107, 114, 128, 0.2); color: #d1d5db; }\n    .vta-card-type--template     { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; }\n    .vta-card-type--mcp          { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; }\n\n    .vta-tag {\n        background: rgba(250, 204, 21, 0.12);\n        color: #facc15;\n    }\n\n    /* Detail page dark mode */\n    .vta-detail-back { color: #60a5fa; }\n\n    .vta-detail-title { color: #f9fafb; }\n    .vta-detail-desc { color: #cbd5e1; }\n\n    .vta-detail-section h2 { color: #e5e7eb; }\n\n    .vta-detail-card {\n        background: rgba(15, 23, 42, 0.9);\n        border-color: rgba(148, 163, 184, 0.5);\n    }\n\n    .vta-detail-role--system    { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }\n    .vta-detail-role--user      { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }\n    .vta-detail-role--assistant { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; }\n    .vta-detail-role--safety    { background: rgba(236, 72, 153, 0.15); color: #f9a8d4; }\n    .vta-detail-role--tool      { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }\n\n    .vta-detail-prompt-name { color: #9ca3af; }\n\n    .vta-detail-code {\n        background: rgba(15, 23, 42, 0.95);\n        border-color: rgba(148, 163, 184, 0.4);\n        color: #e5e7eb;\n    }\n\n    .vta-detail-flag {\n        background: rgba(16, 185, 129, 0.15);\n        color: #6ee7b7;\n    }\n}\n";
 const routes = [
   { path: "/", Component: HomePage },
   { path: "/interactions/:collection", Component: InteractionCollection },
@@ -903,20 +941,15 @@ function AdminApp({ baseUrl = "/api" }) {
   const isLoading = loadingInfo || loadingData;
   const error = infoError || dataError;
   if (isLoading) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("style", { children: adminStyles }),
-      /* @__PURE__ */ jsx("div", { className: "vta-loading", children: "Loading..." })
-    ] });
+    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx(Spinner, {}) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("style", { children: adminStyles }),
-      /* @__PURE__ */ jsx("div", { className: "vta-error", children: "Failed to load server info. Is the API running?" })
-    ] });
+    return /* @__PURE__ */ jsx("div", { className: "p-6 text-destructive", children: "Failed to load server info. Is the API running?" });
   }
   if (!serverInfo || !resourceData) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: adminStyles }),
+  const title = serverInfo.message.replace("Vertesia Tools API", "Tools Server");
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-background text-foreground", children: [
+    /* @__PURE__ */ jsx(AdminTopBar, { title }),
     /* @__PURE__ */ jsx(AdminContext.Provider, { value: {
       serverInfo,
       collections: resourceData.collections,