@vertesia/tools-admin-ui 0.9.0

package/lib/tools-admin-ui.js

@@ -0,0 +1,935 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+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";
+function formatTitle(name) {
+  return name.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function countPerCollection(items, collections, extractCollection) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const col of collections) counts.set(col.name, 0);
+  if (collections.length === 1) {
+    counts.set(collections[0].name, items.length);
+    return counts;
+  }
+  for (const item of items) {
+    const colName = extractCollection(item);
+    if (colName && counts.has(colName)) {
+      counts.set(colName, (counts.get(colName) || 0) + 1);
+    }
+  }
+  return counts;
+}
+function buildResourceData(interactionsResp, toolsResp, skillsResp, typesResp, templatesResp, mcpEndpoints) {
+  const collections = [];
+  const resources = [];
+  const interCounts = countPerCollection(
+    interactionsResp.interactions,
+    interactionsResp.collections,
+    (i) => i.id.split(":")[0]
+  );
+  for (const col of interactionsResp.collections) {
+    collections.push({
+      name: col.name,
+      title: col.title || formatTitle(col.name),
+      description: col.description || "",
+      type: "interaction",
+      count: interCounts.get(col.name) || 0
+    });
+  }
+  for (const inter of interactionsResp.interactions) {
+    resources.push({
+      id: inter.id,
+      name: inter.name,
+      title: inter.title || formatTitle(inter.name),
+      description: inter.description || "",
+      type: "interaction",
+      tags: inter.tags
+    });
+  }
+  const toolCounts = countPerCollection(
+    toolsResp.tools,
+    toolsResp.collections,
+    (t) => t.url?.split("/").pop()
+  );
+  for (const col of toolsResp.collections) {
+    collections.push({
+      name: col.name,
+      title: col.title || formatTitle(col.name),
+      description: col.description || "",
+      type: "tool",
+      count: toolCounts.get(col.name) || 0
+    });
+  }
+  for (const tool of toolsResp.tools) {
+    resources.push({
+      name: tool.name,
+      title: formatTitle(tool.name),
+      description: tool.description || "",
+      type: "tool",
+      url: tool.url
+    });
+  }
+  const skillCounts = countPerCollection(
+    skillsResp.tools,
+    skillsResp.collections,
+    (t) => t.url?.split("/").pop()
+  );
+  for (const col of skillsResp.collections) {
+    collections.push({
+      name: col.name,
+      title: col.title || formatTitle(col.name),
+      description: col.description || "",
+      type: "skill",
+      count: skillCounts.get(col.name) || 0
+    });
+  }
+  for (const skill of skillsResp.tools) {
+    resources.push({
+      name: skill.name,
+      title: formatTitle(skill.name),
+      description: skill.description || "",
+      type: "skill",
+      url: skill.url
+    });
+  }
+  const typeCounts = countPerCollection(
+    typesResp.types,
+    typesResp.collections,
+    (t) => t.id?.split(":")[0]
+  );
+  for (const col of typesResp.collections) {
+    collections.push({
+      name: col.name,
+      title: col.title || formatTitle(col.name),
+      description: col.description || "",
+      type: "type",
+      count: typeCounts.get(col.name) || 0
+    });
+  }
+  for (const t of typesResp.types) {
+    resources.push({
+      name: t.name,
+      title: formatTitle(t.name),
+      description: t.description || "",
+      type: "type",
+      tags: t.tags
+    });
+  }
+  const tmplCounts = countPerCollection(
+    templatesResp.templates,
+    templatesResp.collections,
+    (t) => {
+      const segments = t.path?.split("/");
+      return segments && segments.length >= 4 ? segments[3] : void 0;
+    }
+  );
+  for (const col of templatesResp.collections) {
+    collections.push({
+      name: col.name,
+      title: col.title || formatTitle(col.name),
+      description: col.description || "",
+      type: "template",
+      count: tmplCounts.get(col.name) || 0
+    });
+  }
+  for (const tmpl of templatesResp.templates) {
+    resources.push({
+      name: tmpl.name,
+      title: tmpl.title || formatTitle(tmpl.name),
+      description: tmpl.description || "",
+      type: "template",
+      tags: tmpl.tags,
+      url: tmpl.path
+    });
+  }
+  for (const endpoint of mcpEndpoints || []) {
+    const name = endpoint.split("/").pop() || endpoint;
+    resources.push({
+      name,
+      title: formatTitle(name),
+      description: "",
+      type: "mcp",
+      url: endpoint
+    });
+  }
+  return { collections, resources };
+}
+function filterResources(items, query) {
+  const q = query.toLowerCase().trim();
+  if (!q) return items;
+  return items.filter(
+    (item) => item.name.toLowerCase().includes(q) || item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q) || item.type.includes(q) || item.tags?.some((t) => t.toLowerCase().includes(q))
+  );
+}
+function useServerInfo(baseUrl) {
+  return useFetch(
+    () => fetch(baseUrl).then((r) => r.json()),
+    [baseUrl]
+  );
+}
+function useResourceData(baseUrl, mcpEndpoints) {
+  return useFetch(() => {
+    const fetchJson = (path) => fetch(`${baseUrl}/${path}`).then((r) => r.json());
+    return Promise.all([
+      fetchJson("interactions"),
+      fetchJson("tools"),
+      fetchJson("skills"),
+      fetchJson("types"),
+      fetchJson("templates")
+    ]).then(
+      ([interactions, tools, skills, types, templates]) => buildResourceData(interactions, tools, skills, types, templates, 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;
+}
+function EndpointPanel({ label, path }) {
+  const [copied, setCopied] = useState(false);
+  function handleCopy() {
+    const url = window.location.origin + path;
+    navigator.clipboard.writeText(url);
+    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 ? "✓" : "⧉" })
+    ] })
+  ] });
+}
+function SummaryBadge({ count, label }) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "vta-badge", children: [
+    /* @__PURE__ */ jsx("span", { className: "vta-badge-dot" }),
+    count,
+    " ",
+    label,
+    count !== 1 ? "s" : ""
+  ] });
+}
+function getInitials(title) {
+  return title.split(/\s+/).map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+function countByType(resources) {
+  const counts = {};
+  for (const r of resources) {
+    counts[r.type] = (counts[r.type] || 0) + 1;
+  }
+  return counts;
+}
+const badgeLabels = [
+  { type: "tool", label: "tool" },
+  { type: "skill", label: "skill" },
+  { type: "interaction", label: "interaction" },
+  { type: "type", label: "content type" },
+  { type: "template", label: "template" },
+  { type: "mcp", label: "MCP provider" }
+];
+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) }),
+        /* @__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: "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__ */ jsxs("aside", { className: "vta-hero-panel", 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: [
+        "Use ",
+        /* @__PURE__ */ jsx("strong", { children: "POST /api/tools/<collection>" }),
+        " or",
+        " ",
+        /* @__PURE__ */ jsx("strong", { children: "POST /api/skills/<collection>" }),
+        " to call these from your apps or agents."
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "vta-hero-version", children: [
+        "v",
+        version
+      ] })
+    ] })
+  ] });
+}
+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: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder: placeholder || "Search collections...",
+        className: "vta-search-input",
+        autoComplete: "off"
+      }
+    ),
+    hasQuery && !noResults && /* @__PURE__ */ jsxs("p", { className: "vta-search-hint", 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
+  ] });
+}
+const sections = [
+  { type: "tool", title: "Tools", subtitle: "Remote tools available to agents via Vertesia." },
+  { type: "skill", title: "Skills", subtitle: "Reusable instructions and scripts packaged as tools." },
+  { type: "interaction", title: "Interactions", subtitle: "Conversation blueprints surfaced in the Vertesia UI." },
+  { type: "type", title: "Content Types", subtitle: "Schema definitions for structured content in the data store." },
+  { type: "template", title: "Rendering Templates", subtitle: "Document and presentation templates for content generation." },
+  { type: "mcp", title: "MCP Providers", subtitle: "Remote MCP servers available through this tools server." }
+];
+function HomePage() {
+  const { serverInfo, collections, resources } = useAdminContext();
+  const [search, setSearch] = useState("");
+  const filtered = useMemo(
+    () => filterResources(resources, search),
+    [resources, search]
+  );
+  const isSearching = search.trim().length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "vta-root", children: [
+    /* @__PURE__ */ jsx(
+      HeroSection,
+      {
+        title: serverInfo.message.replace("Vertesia Tools API", "Tools Server"),
+        version: serverInfo.version,
+        resources
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SearchBar,
+      {
+        value: search,
+        onChange: setSearch,
+        placeholder: "Search tools, skills, interactions, types, templates...",
+        resultCount: filtered.length,
+        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 })
+          ] }),
+          /* @__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);
+      })
+    )
+  ] });
+}
+function InteractionCollection() {
+  const collection = useParams("collection");
+  const { baseUrl } = useAdminContext();
+  const { data: interactions, isLoading, 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: [
+      "Failed to load collection “",
+      collection,
+      "”."
+    ] });
+  }
+  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
+      )) })
+    }
+  );
+}
+function InteractionDetail() {
+  const { client } = useUserSession();
+  const params = useParams();
+  const collection = params.collection;
+  const name = params.name;
+  const { baseUrl } = useAdminContext();
+  const { data: interaction, isLoading, error } = useFetch(
+    () => client.getRawJWT().then((token) => fetch(`${baseUrl}/interactions/${collection}/${name}`, {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    })).then((r) => {
+      if (!r.ok) throw new Error(`Failed to load interaction: ${r.statusText}`);
+      return r.json();
+    }),
+    [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: [
+      "Failed to load interaction “",
+      name,
+      "”."
+    ] });
+  }
+  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(
+    DetailPage,
+    {
+      type: "interaction",
+      title: interaction.title || interaction.name,
+      description: interaction.description,
+      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 })
+            ] }),
+            /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: prompt.content })
+          ] }, i))
+        ] }),
+        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) })
+        ] }),
+        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" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+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(
+    () => fetch(`${baseUrl}/skills/${collection}`).then((r) => {
+      if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+      return r.json();
+    }),
+    [baseUrl, collection]
+  );
+  const { data: widgetsData } = useFetch(
+    () => fetch(`${baseUrl}/package?scope=widgets`).then((r) => r.ok ? r.json() : { widgets: {} }),
+    [baseUrl]
+  );
+  const collectionWidgets = useMemo(() => {
+    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: [
+    "Failed to load skill collection “",
+    collection,
+    "”."
+  ] });
+  return /* @__PURE__ */ jsxs(
+    DetailPage,
+    {
+      type: "skill",
+      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: [
+            w.name,
+            /* @__PURE__ */ jsxs("span", { className: "vta-card-url", style: { marginLeft: "0.5rem" }, children: [
+              "(skill: ",
+              w.skill,
+              ")"
+            ] })
+          ] }, w.name)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "vta-card-grid", 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
+          );
+        }) })
+      ]
+    }
+  );
+}
+function SkillDetail() {
+  const params = useParams();
+  const collection = params.collection;
+  const name = params.name;
+  const { baseUrl } = useAdminContext();
+  const { data: skill, isLoading, 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: [
+    "Failed to load skill “",
+    name,
+    "”."
+  ] });
+  return /* @__PURE__ */ jsxs(
+    DetailPage,
+    {
+      type: "skill",
+      title: skill.title || skill.name,
+      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.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.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.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))
+          ] })
+        ] }),
+        /* @__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__ */ jsx("pre", { className: "vta-detail-code", 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) })
+        ] })
+      ]
+    }
+  );
+}
+function TypeCollection() {
+  const collection = useParams("collection");
+  const { baseUrl } = useAdminContext();
+  const { data: types, isLoading, 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 (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 “",
+    collection,
+    "”."
+  ] });
+  return /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      type: "type",
+      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
+        );
+      }) })
+    }
+  );
+}
+function TypeDetail() {
+  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}`);
+      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 “",
+    name,
+    "”."
+  ] });
+  return /* @__PURE__ */ jsxs(
+    DetailPage,
+    {
+      type: "type",
+      title: typeDef.name,
+      description: typeDef.description,
+      tags: typeDef.tags,
+      backHref: `/types/${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) })
+        ] }),
+        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) })
+        ] })
+      ]
+    }
+  );
+}
+function TemplateCollection() {
+  const collection = useParams("collection");
+  const { baseUrl } = useAdminContext();
+  const { data: templates, isLoading, 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 || !templates) return /* @__PURE__ */ jsxs("div", { className: "vta-error", children: [
+    "Failed to load template collection “",
+    collection,
+    "”."
+  ] });
+  return /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      type: "template",
+      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
+      )) })
+    }
+  );
+}
+function TemplateDetail() {
+  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}`);
+      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 “",
+    name,
+    "”."
+  ] });
+  return /* @__PURE__ */ jsxs(
+    DetailPage,
+    {
+      type: "template",
+      title: template.title || template.name,
+      description: template.description,
+      tags: template.tags,
+      backHref: `/templates/${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)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "vta-detail-section", children: [
+          /* @__PURE__ */ jsx("h2", { children: "Instructions" }),
+          /* @__PURE__ */ jsx("pre", { className: "vta-detail-code", children: template.instructions })
+        ] })
+      ]
+    }
+  );
+}
+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 },
+  { path: "/interactions/:collection/:name", Component: InteractionDetail },
+  { path: "/tools/:collection", Component: ToolCollection },
+  { path: "/skills/:collection", Component: SkillCollection },
+  { path: "/skills/:collection/:name", Component: SkillDetail },
+  { path: "/types/:collection", Component: TypeCollection },
+  { path: "/types/:collection/:name", Component: TypeDetail },
+  { path: "/templates/:collection", Component: TemplateCollection },
+  { path: "/templates/:collection/:name", Component: TemplateDetail }
+];
+function AdminApp({ baseUrl = "/api" }) {
+  const { data: serverInfo, isLoading: loadingInfo, error: infoError } = useServerInfo(baseUrl);
+  const { data: resourceData, isLoading: loadingData, error: dataError } = useResourceData(
+    baseUrl,
+    serverInfo?.endpoints.mcp
+  );
+  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..." })
+    ] });
+  }
+  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?" })
+    ] });
+  }
+  if (!serverInfo || !resourceData) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: adminStyles }),
+    /* @__PURE__ */ jsx(AdminContext.Provider, { value: {
+      serverInfo,
+      collections: resourceData.collections,
+      resources: resourceData.resources,
+      baseUrl
+    }, children: /* @__PURE__ */ jsx(NestedRouterProvider, { routes, children: /* @__PURE__ */ jsx(RouteComponent, {}) }) })
+  ] });
+}
+export {
+  AdminApp,
+  AdminContext,
+  buildResourceData,
+  filterResources,
+  useAdminContext
+};
+//# sourceMappingURL=tools-admin-ui.js.map