@getcatalystiq/agent-plane-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3848 @@
+import * as React3 from 'react';
+import React3__default, { createContext, useRef, useMemo, useContext, useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import useSWR, { useSWRConfig } from 'swr';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import ReactMarkdown from 'react-markdown';
+import { Command } from 'cmdk';
+import * as Popover from '@radix-ui/react-popover';
+
+// src/provider.tsx
+var ClientContext = createContext(null);
+var NavigationContext = createContext(
+  null
+);
+function DefaultLink({ href, children, className }) {
+  return /* @__PURE__ */ jsx("a", { href, className, children });
+}
+function AgentPlaneProvider({
+  client,
+  onNavigate,
+  LinkComponent = DefaultLink,
+  onAuthError,
+  basePath = "",
+  children
+}) {
+  const clientRef = useRef(client);
+  clientRef.current = client;
+  const onAuthErrorRef = useRef(onAuthError);
+  onAuthErrorRef.current = onAuthError;
+  const clientValue = useMemo(
+    () => ({
+      // Expose a stable object whose `.client` always points to the latest ref.
+      get client() {
+        return clientRef.current;
+      },
+      get onAuthError() {
+        return onAuthErrorRef.current;
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable
+    []
+  );
+  const navigationValue = useMemo(
+    () => ({
+      onNavigate,
+      LinkComponent,
+      basePath
+    }),
+    [onNavigate, LinkComponent, basePath]
+  );
+  return /* @__PURE__ */ jsx(ClientContext.Provider, { value: clientValue, children: /* @__PURE__ */ jsx(NavigationContext.Provider, { value: navigationValue, children }) });
+}
+function useAgentPlaneClient() {
+  const ctx = useContext(ClientContext);
+  if (!ctx) {
+    throw new Error(
+      "useAgentPlaneClient must be used within an <AgentPlaneProvider>"
+    );
+  }
+  return ctx.client;
+}
+function useAuthError() {
+  const ctx = useContext(ClientContext);
+  if (!ctx) {
+    throw new Error(
+      "useAuthError must be used within an <AgentPlaneProvider>"
+    );
+  }
+  return ctx.onAuthError;
+}
+function useNavigation() {
+  const ctx = useContext(NavigationContext);
+  if (!ctx) {
+    throw new Error(
+      "useNavigation must be used within an <AgentPlaneProvider>"
+    );
+  }
+  return ctx;
+}
+function useApi(key, fetcher, options) {
+  const client = useAgentPlaneClient();
+  const onAuthError = useAuthError();
+  return useSWR(
+    key,
+    () => fetcher(client),
+    {
+      revalidateOnFocus: false,
+      onError: (err) => {
+        if (onAuthError && err && typeof err === "object" && "status" in err && err.status === 401) {
+          onAuthError(err instanceof Error ? err : new Error(String(err)));
+        }
+      },
+      ...options
+    }
+  );
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function supportsClaudeRunner(model) {
+  return !model.includes("/") || model.startsWith("anthropic/");
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Card = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("rounded-xl border bg-card text-card-foreground shadow", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React3.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white shadow",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var Input = React3.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+function Select({ className = "", ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: `flex h-9 w-full appearance-none rounded-md border border-input bg-transparent pl-3 pr-8 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 ${className}`,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-2.5 flex items-center", children: /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5 opacity-50", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+      /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+    ] }) })
+  ] });
+}
+var Textarea = React3.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+function FormField({ label, children, error, hint }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: label }),
+    children,
+    hint && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1", children: error })
+  ] });
+}
+function FormError({ error }) {
+  if (!error) return null;
+  return /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error });
+}
+function SectionHeader({ title, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between mb-3", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title }),
+    children
+  ] });
+}
+function DetailPageHeader({ backHref, backLabel, title, actions, badge, subtitle, LinkComponent }) {
+  const BackLink = LinkComponent ?? "a";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(BackLink, { href: backHref, className: "text-muted-foreground hover:text-foreground text-sm", children: [
+          "\u2190 ",
+          backLabel
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/" }),
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: title }),
+        badge
+      ] }),
+      actions
+    ] }),
+    subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1", children: subtitle })
+  ] });
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
+}
+function MetricCard({ label, children, className }) {
+  return /* @__PURE__ */ jsxs(Card, { className, children: [
+    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-sm font-medium text-muted-foreground", children: label }) }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold", children }) })
+  ] });
+}
+function AdminTable({ children, footer, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border", className), children: [
+    /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children }),
+    footer
+  ] });
+}
+function AdminTableHead({ children }) {
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "border-b border-border bg-muted/50", children }) });
+}
+function Th({ children, className, align = "left" }) {
+  return /* @__PURE__ */ jsx("th", { className: cn("p-3 font-medium", align === "right" ? "text-right" : "text-left", className), children });
+}
+function AdminTableRow({ children, className }) {
+  return /* @__PURE__ */ jsx("tr", { className: cn("border-b border-border hover:bg-muted/30 transition-colors", className), children });
+}
+function EmptyRow({ colSpan, children = "No results found" }) {
+  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, className: "p-8 text-center text-muted-foreground", children }) });
+}
+var PAGE_SIZE_OPTIONS = [10, 20, 50];
+function PaginationBtn({
+  href,
+  children,
+  onClick,
+  LinkComponent
+}) {
+  const cls = "inline-flex items-center justify-center h-7 w-7 rounded border border-border text-xs font-medium transition-colors";
+  if (!href) return /* @__PURE__ */ jsx("span", { className: `${cls} text-muted-foreground opacity-40 cursor-not-allowed`, children });
+  if (LinkComponent) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href, className: `${cls} hover:bg-muted`, children });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { className: `${cls} hover:bg-muted`, onClick: () => onClick(href), children });
+  }
+  return /* @__PURE__ */ jsx("a", { href, className: `${cls} hover:bg-muted`, children });
+}
+function PaginationBar({
+  page,
+  pageSize,
+  total,
+  buildHref,
+  onNavigate,
+  LinkComponent
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  function renderLink(href, children, extraClass) {
+    if (LinkComponent) {
+      return /* @__PURE__ */ jsx(LinkComponent, { href, className: extraClass, children });
+    }
+    if (onNavigate) {
+      return /* @__PURE__ */ jsx("button", { className: extraClass, onClick: () => onNavigate(href), children });
+    }
+    return /* @__PURE__ */ jsx("a", { href, className: extraClass, children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border bg-muted/20 text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: "Rows per page:" }),
+      PAGE_SIZE_OPTIONS.map((ps) => /* @__PURE__ */ jsx(React3__default.Fragment, { children: renderLink(
+        buildHref(1, ps),
+        ps,
+        `px-2 py-0.5 rounded text-xs ${pageSize === ps ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted"}`
+      ) }, ps)),
+      /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+        total,
+        " total"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(PaginationBtn, { href: page > 1 ? buildHref(1, pageSize) : null, onClick: onNavigate, LinkComponent, children: "\xAB" }),
+      /* @__PURE__ */ jsx(PaginationBtn, { href: page > 1 ? buildHref(page - 1, pageSize) : null, onClick: onNavigate, LinkComponent, children: "\u2039" }),
+      /* @__PURE__ */ jsxs("span", { className: "px-3 text-xs text-muted-foreground", children: [
+        "Page ",
+        page,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(PaginationBtn, { href: page < totalPages ? buildHref(page + 1, pageSize) : null, onClick: onNavigate, LinkComponent, children: "\u203A" }),
+      /* @__PURE__ */ jsx(PaginationBtn, { href: page < totalPages ? buildHref(totalPages, pageSize) : null, onClick: onNavigate, LinkComponent, children: "\xBB" })
+    ] })
+  ] });
+}
+function parsePaginationParams(pageParam, pageSizeParam, defaultPageSize = 20) {
+  const pageSize = PAGE_SIZE_OPTIONS.includes(Number(pageSizeParam)) ? Number(pageSizeParam) : defaultPageSize;
+  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
+  const offset = (page - 1) * pageSize;
+  return { page, pageSize, offset };
+}
+function Tabs({ tabs, defaultTab = 0 }) {
+  const [active, setActive] = useState(defaultTab);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setActive(i),
+        className: `relative pb-2 text-sm font-medium transition-colors ${active === i ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+        children: [
+          tab.label,
+          active === i && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground rounded-full" })
+        ]
+      },
+      tab.label
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "pt-6", children: tabs[active]?.content })
+  ] });
+}
+function Dialog({ open, onOpenChange, children }) {
+  React3.useEffect(() => {
+    if (!open) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") onOpenChange(false);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  React3.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/60 animate-dialog-overlay",
+        onClick: () => onOpenChange(false)
+      }
+    ),
+    children
+  ] });
+}
+function DialogContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative z-10 w-full bg-background border border-border rounded-xl shadow-2xl mx-4 max-h-[85vh] overflow-y-auto animate-dialog-content",
+        className
+      ),
+      onClick: (e) => e.stopPropagation(),
+      ...props,
+      children
+    }
+  );
+}
+function DialogHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-6 pt-6 pb-0", className), ...props, children });
+}
+function DialogBody({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("px-6 py-4", className), ...props, children });
+}
+function DialogFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2 px-6 py-4 border-t border-border bg-muted/30 rounded-b-xl", className),
+      ...props,
+      children
+    }
+  );
+}
+function DialogTitle({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("h2", { className: cn("text-base font-semibold", className), ...props, children });
+}
+function DialogDescription({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground mt-1", className), ...props, children });
+}
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  children,
+  confirmLabel = "Delete",
+  loadingLabel = "Deleting...",
+  loading = false,
+  error,
+  onConfirm,
+  variant = "destructive"
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-sm", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }),
+    /* @__PURE__ */ jsxs(DialogBody, { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-3", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => onOpenChange(false), disabled: loading, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant, onClick: onConfirm, disabled: loading, children: loading ? loadingLabel : confirmLabel })
+    ] })
+  ] }) });
+}
+function CopyButton({ text, className = "" }) {
+  const [copied, setCopied] = useState(false);
+  async function handleCopy() {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: `inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors ${className}`,
+      title: "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+        "Copied"
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+        ] }),
+        "Copy"
+      ] })
+    }
+  );
+}
+function RunStatusBadge({ status }) {
+  const variant = status === "completed" ? "default" : status === "running" ? "secondary" : status === "failed" || status === "timed_out" ? "destructive" : "outline";
+  return /* @__PURE__ */ jsx(Badge, { variant, children: status.replace("_", " ") });
+}
+var STYLES = {
+  schedule: "bg-blue-500/10 text-blue-400",
+  playground: "bg-purple-500/10 text-purple-400",
+  api: "bg-zinc-500/10 text-zinc-400",
+  chat: "bg-green-500/10 text-green-400",
+  a2a: "bg-indigo-500/10 text-indigo-400"
+};
+var LABELS = {
+  api: "API",
+  schedule: "Schedule",
+  playground: "Playground",
+  chat: "Chat",
+  a2a: "A2A"
+};
+function RunSourceBadge({ triggeredBy }) {
+  const key = triggeredBy;
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${STYLES[key] ?? STYLES.api}`, children: LABELS[key] ?? triggeredBy });
+}
+function LocalDate({ value, fallback = "\u2014" }) {
+  if (!value) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  return /* @__PURE__ */ jsx(Fragment, { children: new Date(value).toLocaleString() });
+}
+function DashboardPage({ initialData, chartComponent: ChartComponent }) {
+  const { LinkComponent, basePath } = useNavigation();
+  const { data, error, isLoading } = useApi(
+    "dashboard",
+    async (client) => {
+      const [stats2, daily_stats2] = await Promise.all([
+        client.dashboard.stats(),
+        client.dashboard.charts()
+      ]);
+      return { stats: stats2, daily_stats: daily_stats2 };
+    },
+    initialData ? { fallbackData: initialData } : void 0
+  );
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load dashboard: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !data) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24 rounded-lg" }, i)) }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-64 rounded-lg" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-64 rounded-lg" })
+      ] })
+    ] });
+  }
+  const { stats, daily_stats } = data;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-4", children: [
+      /* @__PURE__ */ jsx(MetricCard, { label: "Agents", children: stats.agent_count }),
+      /* @__PURE__ */ jsx(LinkComponent, { href: `${basePath}/runs`, className: "block", children: /* @__PURE__ */ jsx(MetricCard, { label: "Total Runs", className: "hover:bg-muted/30 transition-colors cursor-pointer h-full", children: stats.total_runs }) }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Active Runs", children: /* @__PURE__ */ jsx("span", { className: "text-green-500", children: stats.active_runs }) }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Total Spend", children: /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        "$",
+        stats.total_spend.toFixed(2)
+      ] }) })
+    ] }),
+    ChartComponent && /* @__PURE__ */ jsx(ChartComponent, { stats: daily_stats })
+  ] });
+}
+var SOURCES = [
+  { value: "", label: "All Sources" },
+  { value: "api", label: "API" },
+  { value: "schedule", label: "Schedule" },
+  { value: "playground", label: "Playground" },
+  { value: "chat", label: "Chat" },
+  { value: "a2a", label: "A2A" }
+];
+var VALID_SOURCES = SOURCES.filter((s) => s.value).map((s) => s.value);
+function RunListPage({ initialData }) {
+  const { LinkComponent, basePath } = useNavigation();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [sourceFilter, setSourceFilter] = useState(null);
+  const cacheKey = `runs-${page}-${pageSize}-${sourceFilter || "all"}`;
+  const { data, error, isLoading } = useApi(
+    cacheKey,
+    (client) => {
+      return client.runs.list({
+        limit: pageSize,
+        offset: (page - 1) * pageSize,
+        ...sourceFilter ? { triggered_by: sourceFilter } : {}
+      });
+    },
+    initialData ? { fallbackData: initialData } : void 0
+  );
+  const handleSourceChange = useCallback((e) => {
+    const value = e.target.value;
+    setSourceFilter(VALID_SOURCES.includes(value) ? value : null);
+    setPage(1);
+  }, []);
+  const handlePaginationNavigate = useCallback((href) => {
+    const url = new URL(href, "http://localhost");
+    const p = parseInt(url.searchParams.get("page") || "1", 10);
+    const ps = parseInt(url.searchParams.get("pageSize") || "20", 10);
+    setPage(p);
+    setPageSize(ps);
+  }, []);
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load runs: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !data) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-40" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-lg" })
+    ] });
+  }
+  const { runs, total } = data;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center mb-6", children: /* @__PURE__ */ jsx("div", { className: "w-40", children: /* @__PURE__ */ jsx(Select, { value: sourceFilter ?? "", onChange: handleSourceChange, children: SOURCES.map((s) => /* @__PURE__ */ jsx("option", { value: s.value, children: s.label }, s.value)) }) }) }),
+    /* @__PURE__ */ jsxs(AdminTable, { className: "overflow-x-auto", footer: /* @__PURE__ */ jsx(
+      PaginationBar,
+      {
+        page,
+        pageSize,
+        total,
+        buildHref: (p, ps) => `?page=${p}&pageSize=${ps}${sourceFilter ? `&source=${sourceFilter}` : ""}`,
+        onNavigate: handlePaginationNavigate
+      }
+    ), children: [
+      /* @__PURE__ */ jsxs(AdminTableHead, { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Run" }),
+        /* @__PURE__ */ jsx(Th, { children: "Agent" }),
+        /* @__PURE__ */ jsx(Th, { children: "Status" }),
+        /* @__PURE__ */ jsx(Th, { children: "Source" }),
+        /* @__PURE__ */ jsx(Th, { className: "max-w-xs", children: "Prompt" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Cost" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Turns" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Duration" }),
+        /* @__PURE__ */ jsx(Th, { children: "Created" })
+      ] }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        runs.map((r) => /* @__PURE__ */ jsxs(AdminTableRow, { children: [
+          /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs", children: /* @__PURE__ */ jsxs(LinkComponent, { href: `${basePath}/runs/${r.id}`, className: "text-primary hover:underline", children: [
+            r.id.slice(0, 8),
+            "..."
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-xs", children: r.agent_name }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(RunStatusBadge, { status: r.status }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(RunSourceBadge, { triggeredBy: r.triggered_by }) }),
+          /* @__PURE__ */ jsxs("td", { className: "p-3 max-w-xs truncate text-muted-foreground text-xs", title: r.prompt, children: [
+            r.prompt.slice(0, 80),
+            r.prompt.length > 80 ? "..." : ""
+          ] }),
+          /* @__PURE__ */ jsxs("td", { className: "p-3 text-right font-mono", children: [
+            "$",
+            r.cost_usd.toFixed(4)
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: r.num_turns }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right text-muted-foreground text-xs", children: r.duration_ms > 0 ? `${(r.duration_ms / 1e3).toFixed(1)}s` : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: /* @__PURE__ */ jsx(LocalDate, { value: r.created_at }) })
+        ] }, r.id)),
+        runs.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 9, children: "No runs found" })
+      ] })
+    ] })
+  ] });
+}
+function buildConversation(events) {
+  const items = [];
+  const toolCallMap = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (event.type === "system") {
+      items.push({
+        role: "system",
+        model: String(event.model || ""),
+        tools: event.tools || [],
+        skills: event.skills || []
+      });
+    } else if (event.type === "assistant") {
+      const msg = event.message;
+      const blocks = msg?.content || [];
+      for (const block of blocks) {
+        if (block.type === "text" && block.text) {
+          items.push({ role: "assistant", text: block.text });
+        } else if (block.type === "tool_use" && block.name) {
+          const idx = items.length;
+          items.push({
+            role: "tool",
+            toolName: block.name,
+            toolInput: block.input,
+            toolUseId: block.id
+          });
+          if (block.id) toolCallMap.set(block.id, idx);
+        }
+      }
+    } else if (event.type === "user") {
+      const msg = event.message;
+      const blocks = msg?.content || [];
+      for (const block of blocks) {
+        if (block.type === "tool_result" && block.tool_use_id) {
+          const idx = toolCallMap.get(block.tool_use_id);
+          if (idx !== void 0 && items[idx]) {
+            let output = "";
+            if (typeof block.content === "string") {
+              output = block.content;
+            } else if (Array.isArray(block.content)) {
+              output = block.content.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n");
+            }
+            items[idx] = { ...items[idx], toolOutput: output };
+          }
+        }
+      }
+    } else if (event.type === "tool_use") {
+      const idx = items.length;
+      items.push({
+        role: "tool",
+        toolName: String(event.tool_name || event.name || "unknown"),
+        toolInput: event.input,
+        toolUseId: event.tool_use_id ? String(event.tool_use_id) : void 0
+      });
+      if (event.tool_use_id) toolCallMap.set(String(event.tool_use_id), idx);
+    } else if (event.type === "tool_result") {
+      const id = String(event.tool_use_id || "");
+      const idx = toolCallMap.get(id);
+      const output = typeof event.result === "string" ? event.result : JSON.stringify(event.result, null, 2);
+      if (idx !== void 0 && items[idx]) {
+        items[idx] = { ...items[idx], toolOutput: output };
+      } else {
+        items.push({
+          role: "tool",
+          toolName: String(event.tool_name || "tool"),
+          toolOutput: output,
+          toolUseId: id || void 0
+        });
+      }
+    } else if (event.type === "run_started") {
+      items.push({
+        role: "system",
+        model: String(event.model || ""),
+        tools: event.mcp_server_names || []
+      });
+    } else if (event.type === "mcp_error") {
+      items.push({
+        role: "error",
+        error: `MCP (${event.server}): ${event.error}`
+      });
+    } else if (event.type === "result") {
+      items.push({
+        role: "result",
+        subtype: String(event.subtype || ""),
+        costUsd: Number(event.cost_usd || 0),
+        numTurns: Number(event.num_turns || 0),
+        durationMs: Number(event.duration_ms || 0),
+        text: String(event.result || "")
+      });
+    } else if (event.type === "a2a_incoming") {
+      items.push({
+        role: "a2a_incoming",
+        sender: String(event.agent_name || event.sender || "unknown"),
+        text: event.prompt_preview ? String(event.prompt_preview) : void 0,
+        callbackUrl: event.callback_url ? String(event.callback_url) : void 0,
+        timestamp: event.timestamp ? String(event.timestamp) : void 0
+      });
+    } else if (event.type === "error") {
+      items.push({
+        role: "error",
+        error: String(event.error || "Unknown error")
+      });
+    }
+  }
+  return items;
+}
+function TranscriptViewer({ transcript, prompt }) {
+  const conversation = useMemo(() => buildConversation(transcript), [transcript]);
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Transcript" }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+      prompt && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-4 py-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Prompt" }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: prompt })
+      ] }),
+      transcript.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No transcript available" }) : /* @__PURE__ */ jsx(ConversationView, { items: conversation })
+    ] })
+  ] });
+}
+function ConversationView({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: items.map((item, i) => {
+    switch (item.role) {
+      case "a2a_incoming":
+        return /* @__PURE__ */ jsx(A2AIncomingItem, { item }, i);
+      case "system":
+        return /* @__PURE__ */ jsx(SystemItem, { item }, i);
+      case "assistant":
+        return /* @__PURE__ */ jsx(AssistantItem, { item }, i);
+      case "tool":
+        return /* @__PURE__ */ jsx(ToolItem, { item }, i);
+      case "result":
+        return /* @__PURE__ */ jsx(ResultItem, { item }, i);
+      case "error":
+        return /* @__PURE__ */ jsx(ErrorItem, { item }, i);
+      default:
+        return null;
+    }
+  }) });
+}
+function A2AIncomingItem({ item }) {
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/30 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center gap-2 px-4 py-2 text-left hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px]", children: "A2A incoming" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "to ",
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: item.sender })
+          ] }),
+          item.callbackUrl && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+            "via ",
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: new URL(item.callbackUrl).hostname })
+          ] }),
+          item.timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-auto flex-shrink-0", children: new Date(item.timestamp).toLocaleTimeString() }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: expanded ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    expanded && item.text && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-border bg-muted/10", children: /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap text-muted-foreground", children: item.text }) })
+  ] });
+}
+function SystemItem({ item }) {
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/30 overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("button", { onClick: () => setExpanded(!expanded), className: "w-full flex items-center gap-2 px-4 py-2 text-left hover:bg-muted/50 transition-colors", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px]", children: "system" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex-1", children: [
+        "Model: ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: item.model }),
+        " \xB7 ",
+        item.tools?.length || 0,
+        " tools",
+        (item.skills?.length || 0) > 0 ? ` \xB7 ${item.skills.length} skills` : ""
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: expanded ? "\u25B2" : "\u25BC" })
+    ] }),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-t border-border bg-muted/10 text-xs text-muted-foreground space-y-1", children: [
+      item.tools && item.tools.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Tools:" }),
+        " ",
+        item.tools.join(", ")
+      ] }),
+      item.skills && item.skills.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Skills:" }),
+        " ",
+        item.skills.join(", ")
+      ] })
+    ] })
+  ] });
+}
+function AssistantItem({ item }) {
+  const [expanded, setExpanded] = useState(false);
+  const preview = item.text?.split("\n")[0]?.slice(0, 120) ?? "";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center gap-2 px-4 py-2 text-left hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px]", children: "assistant" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground truncate flex-1", children: preview }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: expanded ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-border bg-muted/10 prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx(ReactMarkdown, { children: item.text }) })
+  ] });
+}
+function ToolItem({ item }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasOutput = item.toolOutput && item.toolOutput.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center gap-2 px-4 py-2 text-left hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px]", children: "tool" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium font-mono", children: item.toolName }),
+          hasOutput && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] ml-auto", children: "has output" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: expanded ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-border", children: [
+      item.toolInput !== void 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-muted/20", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium text-muted-foreground uppercase mb-1", children: "Input" }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono overflow-x-auto max-h-64 overflow-y-auto", children: typeof item.toolInput === "string" ? item.toolInput : JSON.stringify(item.toolInput, null, 2) })
+      ] }),
+      hasOutput && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-muted/10 border-t border-border", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium text-muted-foreground uppercase mb-1", children: "Output" }),
+        /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none max-h-96 overflow-y-auto", children: /* @__PURE__ */ jsx(ReactMarkdown, { children: item.toolOutput }) })
+      ] })
+    ] })
+  ] });
+}
+function ResultItem({ item }) {
+  const success = item.subtype === "success";
+  return /* @__PURE__ */ jsxs("div", { className: `rounded-md px-3 py-2 flex items-center gap-3 ${success ? "bg-green-950 border border-green-900" : "bg-red-950 border border-red-900"}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold ${success ? "text-green-400" : "text-red-400"}`, children: success ? "Completed" : "Failed" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 text-xs text-zinc-400", children: [
+      item.numTurns != null && item.numTurns > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        item.numTurns,
+        " turns"
+      ] }),
+      item.costUsd != null && item.costUsd > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        "$",
+        item.costUsd.toFixed(4)
+      ] }),
+      item.durationMs != null && item.durationMs > 0 && /* @__PURE__ */ jsxs("span", { children: [
+        (item.durationMs / 1e3).toFixed(1),
+        "s"
+      ] })
+    ] })
+  ] });
+}
+function ErrorItem({ item }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-[10px]", children: "error" }) }),
+    /* @__PURE__ */ jsx("pre", { className: "mt-1 text-xs font-mono text-destructive whitespace-pre-wrap", children: item.error })
+  ] });
+}
+function RunDetailPage({ runId, initialData, initialTranscript }) {
+  const { mutate } = useSWRConfig();
+  const { data: run, error, isLoading } = useApi(
+    `run-${runId}`,
+    (client) => client.runs.get(runId),
+    initialData ? { fallbackData: initialData } : void 0
+  );
+  const { data: transcript } = useApi(
+    run?.transcript_blob_url ? `transcript-${runId}` : null,
+    (client) => client.runs.transcript(runId),
+    initialTranscript ? { fallbackData: initialTranscript } : void 0
+  );
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load run: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !run) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24 rounded-lg" }, i)) }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-lg" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    (run.status === "running" || run.status === "pending") && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(CancelRunButton, { runId: run.id, onCancelled: () => mutate(`run-${runId}`) }) }),
+    run.triggered_by === "a2a" && run.requested_by_key_name && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px]", children: "A2A" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Requested by ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: run.requested_by_key_name })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `grid gap-4 ${run.result_summary ? "grid-cols-5" : "grid-cols-4"}`, children: [
+      run.result_summary && /* @__PURE__ */ jsxs(MetricCard, { label: "Result Summary", children: [
+        /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: run.result_summary }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 font-normal", children: run.status })
+      ] }),
+      /* @__PURE__ */ jsxs(MetricCard, { label: "Model", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: run.agent_model || "\u2014" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 font-normal", children: /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium ${run.runner === "vercel-ai-sdk" ? "bg-blue-500/10 text-blue-400" : "bg-orange-500/10 text-orange-400"}`, children: run.runner === "vercel-ai-sdk" ? "AI SDK" : "Claude SDK" }) })
+      ] }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Cost", children: /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        "$",
+        run.cost_usd != null ? run.cost_usd.toFixed(4) : "\u2014"
+      ] }) }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Turns", children: run.num_turns }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Duration", children: run.duration_ms > 0 ? `${(run.duration_ms / 1e3).toFixed(1)}s` : "\u2014" }),
+      /* @__PURE__ */ jsxs(MetricCard, { label: "Tokens", children: [
+        (run.total_input_tokens + run.total_output_tokens).toLocaleString(),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5 font-normal", children: [
+          run.total_input_tokens.toLocaleString(),
+          " in / ",
+          run.total_output_tokens.toLocaleString(),
+          " out"
+        ] })
+      ] })
+    ] }),
+    run.error_messages && run.error_messages.length > 0 && /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base text-destructive", children: "Errors" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-2", children: [
+        run.error_type && /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: run.error_type }),
+        run.error_messages.map((msg, i) => /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap text-sm text-destructive font-mono bg-destructive/10 rounded-md p-3", children: msg }, i))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TranscriptViewer, { transcript: transcript || [], prompt: run.prompt }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex items-center justify-between px-6 py-4 cursor-pointer list-none hover:bg-muted/30 transition-colors rounded-xl", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base font-semibold", children: "Metadata" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "\\u25BC" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "px-6 pb-6", children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-x-8 gap-y-2 text-sm", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Run ID" }),
+        /* @__PURE__ */ jsx("dd", { className: "font-mono", children: run.id }),
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Agent ID" }),
+        /* @__PURE__ */ jsx("dd", { className: "font-mono", children: run.agent_id }),
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Company ID" }),
+        /* @__PURE__ */ jsx("dd", { className: "font-mono", children: run.tenant_id }),
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Sandbox ID" }),
+        /* @__PURE__ */ jsx("dd", { className: "font-mono", children: run.sandbox_id || "\u2014" }),
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Started" }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(LocalDate, { value: run.started_at }) }),
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Completed" }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(LocalDate, { value: run.completed_at }) }),
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Created" }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx(LocalDate, { value: run.created_at }) })
+      ] }) })
+    ] }) })
+  ] });
+}
+function CancelRunButton({ runId, onCancelled }) {
+  const [open, setOpen] = useState(false);
+  const [cancelling, setCancelling] = useState(false);
+  const client = useAgentPlaneClient();
+  async function handleConfirm() {
+    setCancelling(true);
+    try {
+      await client.runs.cancel(runId);
+      setOpen(false);
+      onCancelled();
+    } catch {
+    } finally {
+      setCancelling(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "destructive",
+        size: "sm",
+        onClick: () => setOpen(true),
+        children: "Stop Run"
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-sm", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Stop this run?" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "This will terminate the sandbox immediately." })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setOpen(false), disabled: cancelling, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            size: "sm",
+            onClick: handleConfirm,
+            disabled: cancelling,
+            children: cancelling ? "Stopping\u2026" : "Stop Run"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function McpServerListPage({ initialData }) {
+  const { mutate } = useSWRConfig();
+  const client = useAgentPlaneClient();
+  const { data: servers, error, isLoading } = useApi(
+    "mcp-servers",
+    (c) => c.customConnectors.listServers(),
+    initialData ? { fallbackData: initialData } : void 0
+  );
+  const [showAdd, setShowAdd] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [newServer, setNewServer] = useState({ name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" });
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState("");
+  async function handleAdd() {
+    setAdding(true);
+    try {
+      await client.customConnectors.createServer(newServer);
+      setShowAdd(false);
+      setNewServer({ name: "", slug: "", description: "", base_url: "", mcp_endpoint_path: "/mcp" });
+      mutate("mcp-servers");
+    } finally {
+      setAdding(false);
+    }
+  }
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    setDeleteError("");
+    try {
+      await client.customConnectors.deleteServer(deleteTarget.id);
+      setDeleteTarget(null);
+      mutate("mcp-servers");
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setDeleting(false);
+    }
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load MCP servers: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !servers) {
+    return /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-lg" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "Register Connector" }) }),
+    showAdd && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsx(Input, { placeholder: "Name", value: newServer.name, onChange: (e) => setNewServer({ ...newServer, name: e.target.value }) }),
+        /* @__PURE__ */ jsx(Input, { placeholder: "Slug", value: newServer.slug, onChange: (e) => setNewServer({ ...newServer, slug: e.target.value }) }),
+        /* @__PURE__ */ jsx(Input, { placeholder: "Description", value: newServer.description, onChange: (e) => setNewServer({ ...newServer, description: e.target.value }) }),
+        /* @__PURE__ */ jsx(Input, { placeholder: "Base URL", value: newServer.base_url, onChange: (e) => setNewServer({ ...newServer, base_url: e.target.value }) }),
+        /* @__PURE__ */ jsx(Input, { placeholder: "MCP Endpoint Path", value: newServer.mcp_endpoint_path, onChange: (e) => setNewServer({ ...newServer, mcp_endpoint_path: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newServer.name || !newServer.base_url, children: adding ? "Adding..." : "Add Server" })
+    ] }),
+    /* @__PURE__ */ jsxs(AdminTable, { children: [
+      /* @__PURE__ */ jsxs(AdminTableHead, { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Name" }),
+        /* @__PURE__ */ jsx(Th, { children: "Slug" }),
+        /* @__PURE__ */ jsx(Th, { children: "Base URL" }),
+        /* @__PURE__ */ jsx(Th, { children: "OAuth" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Connections" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Active" }),
+        /* @__PURE__ */ jsx(Th, { children: "Created" }),
+        /* @__PURE__ */ jsx(Th, { align: "right" })
+      ] }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        servers.map((s) => /* @__PURE__ */ jsxs(AdminTableRow, { children: [
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            s.logo_url && /* @__PURE__ */ jsx("img", { src: s.logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: s.name })
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground", children: s.slug }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground truncate max-w-xs", title: s.base_url, children: s.base_url }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(Badge, { variant: s.client_id ? "default" : "secondary", children: s.client_id ? "Registered" : "No DCR" }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: s.connection_count }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right text-green-500", children: s.active_count }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: new Date(s.created_at).toLocaleDateString() }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              size: "sm",
+              disabled: s.connection_count > 0,
+              onClick: () => setDeleteTarget(s),
+              children: "Delete"
+            }
+          ) })
+        ] }, s.id)),
+        servers.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 8, children: 'No custom connectors registered. Click "Register Connector" to add one.' })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open: !!deleteTarget,
+        onOpenChange: (open) => {
+          if (!open) {
+            setDeleteTarget(null);
+            setDeleteError("");
+          }
+        },
+        title: "Delete Server",
+        confirmLabel: "Delete",
+        loadingLabel: "Deleting...",
+        loading: deleting,
+        error: deleteError,
+        onConfirm: handleDelete,
+        children: [
+          "Delete MCP server ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: deleteTarget?.name }),
+          "? This cannot be undone."
+        ]
+      }
+    )
+  ] });
+}
+function PluginMarketplaceListPage({ initialData }) {
+  const { mutate } = useSWRConfig();
+  const client = useAgentPlaneClient();
+  const { LinkComponent, basePath } = useNavigation();
+  const { data: marketplaces, error, isLoading } = useApi(
+    "plugin-marketplaces",
+    (c) => c.pluginMarketplaces.list(),
+    initialData ? { fallbackData: initialData } : void 0
+  );
+  const [showAdd, setShowAdd] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [newMarketplace, setNewMarketplace] = useState({ name: "", github_repo: "" });
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState("");
+  async function handleAdd() {
+    setAdding(true);
+    try {
+      await client.pluginMarketplaces.create(newMarketplace);
+      setShowAdd(false);
+      setNewMarketplace({ name: "", github_repo: "" });
+      mutate("plugin-marketplaces");
+    } finally {
+      setAdding(false);
+    }
+  }
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    setDeleteError("");
+    try {
+      await client.pluginMarketplaces.delete(deleteTarget.id);
+      setDeleteTarget(null);
+      mutate("plugin-marketplaces");
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setDeleting(false);
+    }
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load marketplaces: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !marketplaces) {
+    return /* @__PURE__ */ jsx(Skeleton, { className: "h-96 rounded-lg" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowAdd(!showAdd), children: showAdd ? "Cancel" : "Add Marketplace" }) }),
+    showAdd && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsx(Input, { placeholder: "Name", value: newMarketplace.name, onChange: (e) => setNewMarketplace({ ...newMarketplace, name: e.target.value }) }),
+        /* @__PURE__ */ jsx(Input, { placeholder: "GitHub Repo (owner/repo)", value: newMarketplace.github_repo, onChange: (e) => setNewMarketplace({ ...newMarketplace, github_repo: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleAdd, disabled: adding || !newMarketplace.name || !newMarketplace.github_repo, children: adding ? "Adding..." : "Add Marketplace" })
+    ] }),
+    /* @__PURE__ */ jsxs(AdminTable, { children: [
+      /* @__PURE__ */ jsxs(AdminTableHead, { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Name" }),
+        /* @__PURE__ */ jsx(Th, { children: "GitHub Repo" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Agents Using" }),
+        /* @__PURE__ */ jsx(Th, { children: "Added" }),
+        /* @__PURE__ */ jsx(Th, { align: "right" })
+      ] }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        marketplaces.map((m) => /* @__PURE__ */ jsxs(AdminTableRow, { children: [
+          /* @__PURE__ */ jsxs("td", { className: "p-3 font-medium", children: [
+            /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: `${basePath}/plugin-marketplaces/${m.id}`,
+                className: "text-primary hover:underline",
+                children: m.name
+              }
+            ),
+            m.is_owned && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-2 text-xs", children: "Owned" })
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `https://github.com/${m.github_repo}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "font-mono text-xs text-primary hover:underline",
+              children: m.github_repo
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: /* @__PURE__ */ jsx(Badge, { variant: m.agent_count > 0 ? "default" : "secondary", children: m.agent_count }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: new Date(m.created_at).toLocaleDateString() }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              size: "sm",
+              disabled: m.agent_count > 0,
+              onClick: () => setDeleteTarget(m),
+              children: "Delete"
+            }
+          ) })
+        ] }, m.id)),
+        marketplaces.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 5, children: 'No plugin marketplaces registered. Click "Add Marketplace" to add one.' })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open: !!deleteTarget,
+        onOpenChange: (open) => {
+          if (!open) {
+            setDeleteTarget(null);
+            setDeleteError("");
+          }
+        },
+        title: "Delete Marketplace",
+        confirmLabel: "Delete",
+        loadingLabel: "Deleting...",
+        loading: deleting,
+        error: deleteError,
+        onConfirm: handleDelete,
+        children: [
+          "Delete marketplace ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: deleteTarget?.name }),
+          "? This cannot be undone."
+        ]
+      }
+    )
+  ] });
+}
+function PluginMarketplaceDetailPage({ marketplaceId, initialData, initialPlugins }) {
+  const { mutate } = useSWRConfig();
+  const client = useAgentPlaneClient();
+  const { LinkComponent, basePath } = useNavigation();
+  const { data: marketplace, error, isLoading } = useApi(
+    `marketplace-${marketplaceId}`,
+    (c) => c.pluginMarketplaces.get(marketplaceId),
+    initialData ? { fallbackData: initialData } : void 0
+  );
+  const { data: pluginsResult } = useApi(
+    `marketplace-${marketplaceId}-plugins`,
+    (c) => c.pluginMarketplaces.listPlugins(marketplaceId),
+    initialPlugins ? { fallbackData: initialPlugins } : void 0
+  );
+  const [tokenInput, setTokenInput] = useState("");
+  const [savingToken, setSavingToken] = useState(false);
+  async function handleSaveToken() {
+    setSavingToken(true);
+    try {
+      await client.pluginMarketplaces.updateToken(marketplaceId, { github_token: tokenInput });
+      setTokenInput("");
+      mutate(`marketplace-${marketplaceId}`);
+      mutate(`marketplace-${marketplaceId}-plugins`);
+    } finally {
+      setSavingToken(false);
+    }
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load marketplace: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !marketplace) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-64" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-32 rounded-lg" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-64 rounded-lg" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      marketplace.has_token && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Owned" }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `https://github.com/${marketplace.github_repo}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "font-mono text-xs text-primary hover:underline",
+          children: marketplace.github_repo
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "GitHub Token" }) }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: marketplace.has_token ? "A GitHub token is configured. You can update it below." : "Add a GitHub personal access token to enable write access and private repo support." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              placeholder: "ghp_...",
+              value: tokenInput,
+              onChange: (e) => setTokenInput(e.target.value),
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSaveToken, disabled: savingToken || !tokenInput, children: savingToken ? "Saving..." : marketplace.has_token ? "Update Token" : "Save Token" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Plugins" }),
+      !pluginsResult ? /* @__PURE__ */ jsx(Skeleton, { className: "h-48 rounded-lg" }) : !pluginsResult.ok ? /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
+        "Failed to load plugins: ",
+        pluginsResult.message
+      ] }) : pluginsResult.data.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No plugins found in this marketplace." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: pluginsResult.data.map((plugin) => /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: `${basePath}/plugin-marketplaces/${marketplaceId}/plugins/${plugin.name}`,
+          children: /* @__PURE__ */ jsxs(Card, { className: "hover:border-primary/50 transition-colors cursor-pointer h-full", children: [
+            /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxs(CardTitle, { className: "text-sm font-medium flex items-center justify-between", children: [
+              plugin.displayName,
+              plugin.version && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-normal", children: [
+                "v",
+                plugin.version
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs(CardContent, { children: [
+              plugin.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3", children: plugin.description }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+                plugin.hasAgents && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Agents" }),
+                plugin.hasSkills && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Skills" }),
+                plugin.hasMcpJson && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "MCP" })
+              ] })
+            ] })
+          ] })
+        },
+        plugin.name
+      )) })
+    ] })
+  ] });
+}
+var TIMEZONES = typeof Intl !== "undefined" && Intl.supportedValuesOf ? Intl.supportedValuesOf("timeZone") : ["UTC"];
+function SettingsPage({ initialData, hideDangerZone }) {
+  const { mutate } = useSWRConfig();
+  const { data: tenantData, error: tenantError, isLoading: tenantLoading } = useApi(
+    "settings-tenant",
+    (c) => c.tenants.getMe(),
+    initialData ? { fallbackData: initialData.tenant } : void 0
+  );
+  const { data: apiKeysData, error: apiKeysError, isLoading: apiKeysLoading } = useApi(
+    "settings-keys",
+    (c) => c.keys.list ? c.keys.list() : Promise.resolve([]),
+    initialData ? { fallbackData: initialData.api_keys } : void 0
+  );
+  const data = tenantData && apiKeysData ? { tenant: tenantData, api_keys: apiKeysData } : void 0;
+  const error = tenantError || apiKeysError;
+  const isLoading = tenantLoading || apiKeysLoading;
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
+      "Failed to load settings: ",
+      error.message
+    ] }) });
+  }
+  if (isLoading || !data) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-48 rounded-lg" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-64 rounded-lg" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(CompanyForm, { tenant: data.tenant, onSaved: () => {
+      mutate("settings-tenant");
+      mutate("settings-keys");
+    } }),
+    /* @__PURE__ */ jsx(ApiKeysSection, { initialKeys: data.api_keys, onChanged: () => {
+      mutate("settings-tenant");
+      mutate("settings-keys");
+    } }),
+    !hideDangerZone && /* @__PURE__ */ jsx(DangerZone, { tenantId: data.tenant.id, tenantName: data.tenant.name })
+  ] });
+}
+function CompanyForm({ tenant, onSaved }) {
+  const client = useAgentPlaneClient();
+  const fileInputRef = useRef(null);
+  const [name, setName] = useState(tenant.name);
+  const [budget, setBudget] = useState(tenant.monthly_budget_usd.toString());
+  const [timezone, setTimezone] = useState(tenant.timezone);
+  const [logoUrl, setLogoUrl] = useState(tenant.logo_url ?? "");
+  const [saving, setSaving] = useState(false);
+  const isDirty = name !== tenant.name || budget !== tenant.monthly_budget_usd.toString() || timezone !== tenant.timezone || (logoUrl || "") !== (tenant.logo_url ?? "");
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await client.tenants.updateMe({
+        name,
+        monthly_budget_usd: parseFloat(budget),
+        timezone,
+        logo_url: logoUrl || null
+      });
+      onSaved();
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Logo" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
+        logoUrl ? /* @__PURE__ */ jsx("img", { src: logoUrl, alt: name, className: "w-16 h-16 rounded-xl object-cover border border-border", referrerPolicy: "no-referrer" }) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-xl bg-muted flex items-center justify-center text-xl font-bold text-muted-foreground", children: name.split(/\s+/).map((w) => w[0]).join("").toUpperCase().slice(0, 2) || "?" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Upload a logo for your company. Recommended size: 256x256px." }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => fileInputRef.current?.click(), children: "Upload image" }),
+            logoUrl && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setLogoUrl(""), children: "Remove" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/*",
+                className: "hidden",
+                onChange: (e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+                  const reader = new FileReader();
+                  reader.onload = () => setLogoUrl(reader.result);
+                  reader.readAsDataURL(file);
+                  e.target.value = "";
+                }
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Company Details" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx(Input, { value: name, onChange: (e) => setName(e.target.value) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Slug", children: /* @__PURE__ */ jsx(Input, { value: tenant.slug, readOnly: true, disabled: true, className: "opacity-60" }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Status", children: /* @__PURE__ */ jsx("div", { className: "flex items-center h-9", children: /* @__PURE__ */ jsx(Badge, { variant: tenant.status === "active" ? "default" : "destructive", children: tenant.status }) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Timezone", children: /* @__PURE__ */ jsx(Select, { value: timezone, onChange: (e) => setTimezone(e.target.value), children: TIMEZONES.map((tz) => /* @__PURE__ */ jsx("option", { value: tz, children: tz.replace(/_/g, " ") }, tz)) }) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Monthly Budget (USD)", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground text-sm", children: "$" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              step: "0.01",
+              value: budget,
+              onChange: (e) => setBudget(e.target.value),
+              className: "pl-7"
+            }
+          )
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : "Save Changes" }) })
+  ] });
+}
+function ApiKeysSection({ initialKeys, onChanged }) {
+  const client = useAgentPlaneClient();
+  const [creating, setCreating] = useState(false);
+  const [newKeyName, setNewKeyName] = useState("default");
+  const [showCreate, setShowCreate] = useState(false);
+  const [rawKey, setRawKey] = useState(null);
+  const [revokeTarget, setRevokeTarget] = useState(null);
+  const [revoking, setRevoking] = useState(false);
+  const [revokeError, setRevokeError] = useState("");
+  async function handleCreate() {
+    setCreating(true);
+    try {
+      const result = await client.keys.create({ name: newKeyName });
+      setRawKey(result.key);
+      setShowCreate(false);
+      setNewKeyName("default");
+      onChanged();
+    } finally {
+      setCreating(false);
+    }
+  }
+  async function handleRevoke() {
+    if (!revokeTarget) return;
+    setRevoking(true);
+    setRevokeError("");
+    try {
+      await client.keys.revoke(revokeTarget.id);
+      setRevokeTarget(null);
+      onChanged();
+    } catch (err) {
+      setRevokeError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setRevoking(false);
+    }
+  }
+  const activeKeys = initialKeys.filter((k) => !k.revoked_at);
+  const revokedKeys = initialKeys.filter((k) => k.revoked_at);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "API Keys", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowCreate(!showCreate), children: showCreate ? "Cancel" : "+ New Key" }) }),
+    rawKey && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-3 rounded-lg border border-yellow-500/50 bg-yellow-500/10", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: "New API key created \u2014 copy it now, it won't be shown again:" }),
+      /* @__PURE__ */ jsx("code", { className: "block text-xs font-mono bg-black/20 p-2 rounded break-all select-all", children: rawKey }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", className: "mt-2", onClick: () => setRawKey(null), children: "Dismiss" })
+    ] }),
+    showCreate && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex gap-2 items-end", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Key Name" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: newKeyName,
+            onChange: (e) => setNewKeyName(e.target.value),
+            placeholder: "default",
+            className: "w-64"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleCreate, disabled: creating, children: creating ? "Creating..." : "Create" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-border bg-muted/50", children: [
+        /* @__PURE__ */ jsx("th", { className: "text-left p-3 font-medium", children: "Name" }),
+        /* @__PURE__ */ jsx("th", { className: "text-left p-3 font-medium", children: "Prefix" }),
+        /* @__PURE__ */ jsx("th", { className: "text-left p-3 font-medium", children: "Status" }),
+        /* @__PURE__ */ jsx("th", { className: "text-left p-3 font-medium", children: "Last Used" }),
+        /* @__PURE__ */ jsx("th", { className: "text-left p-3 font-medium", children: "Created" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right p-3 font-medium" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        activeKeys.map((k) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsx("td", { className: "p-3 font-medium", children: k.name }),
+          /* @__PURE__ */ jsxs("td", { className: "p-3 font-mono text-xs text-muted-foreground", children: [
+            k.key_prefix,
+            "..."
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(Badge, { variant: "default", children: "active" }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: k.last_used_at ? new Date(k.last_used_at).toLocaleString() : "never" }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: new Date(k.created_at).toLocaleDateString() }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "destructive",
+              onClick: () => setRevokeTarget(k),
+              children: "Revoke"
+            }
+          ) })
+        ] }, k.id)),
+        revokedKeys.map((k) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border opacity-50", children: [
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: k.name }),
+          /* @__PURE__ */ jsxs("td", { className: "p-3 font-mono text-xs text-muted-foreground", children: [
+            k.key_prefix,
+            "..."
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: "revoked" }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: k.last_used_at ? new Date(k.last_used_at).toLocaleString() : "never" }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: new Date(k.created_at).toLocaleDateString() }),
+          /* @__PURE__ */ jsx("td", { className: "p-3" })
+        ] }, k.id)),
+        initialKeys.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 6, className: "p-6 text-center text-muted-foreground", children: "No API keys" }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open: !!revokeTarget,
+        onOpenChange: (open) => {
+          if (!open) setRevokeTarget(null);
+        },
+        title: "Revoke API Key",
+        confirmLabel: "Revoke",
+        loadingLabel: "Revoking...",
+        loading: revoking,
+        error: revokeError,
+        onConfirm: handleRevoke,
+        children: [
+          "Revoke API key ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: revokeTarget?.name }),
+          " (",
+          revokeTarget?.key_prefix,
+          "...)? This cannot be undone."
+        ]
+      }
+    )
+  ] });
+}
+function DangerZone({ tenantId, tenantName }) {
+  const client = useAgentPlaneClient();
+  const { onNavigate, basePath } = useNavigation();
+  const [open, setOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState("");
+  async function handleDelete() {
+    setDeleting(true);
+    setError("");
+    try {
+      await client.tenants.deleteMe();
+      setOpen(false);
+      onNavigate(basePath || "/");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setDeleting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-destructive/30 p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-destructive", children: "Danger Zone" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Permanently delete this company and all its agents, runs, sessions, and API keys." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "destructive", onClick: () => setOpen(true), children: "Delete Company" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open,
+        onOpenChange: (v) => {
+          if (!v) {
+            setOpen(false);
+            setError("");
+          }
+        },
+        title: "Delete Company",
+        confirmLabel: "Delete Company",
+        loadingLabel: "Deleting...",
+        loading: deleting,
+        error,
+        onConfirm: handleDelete,
+        children: [
+          "This action ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "cannot be undone" }),
+          ". All agents, runs, sessions, and API keys for ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: tenantName }),
+          " will be permanently deleted."
+        ]
+      }
+    )
+  ] });
+}
+function formatContextWindow(tokens) {
+  if (tokens == null) return "\u2014";
+  if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(tokens % 1e6 === 0 ? 0 : 1)}M`;
+  if (tokens >= 1e3) return `${Math.round(tokens / 1e3)}K`;
+  return tokens.toString();
+}
+function formatPrice(perMillion) {
+  if (perMillion == null) return "\u2014";
+  if (perMillion === 0) return "Free";
+  if (perMillion < 1e-3) return `<$0.01/M`;
+  if (perMillion < 0.01) return `$${perMillion.toFixed(3)}/M`;
+  if (perMillion < 1) return `$${perMillion.toFixed(2)}/M`;
+  return `$${perMillion % 1 === 0 ? perMillion : perMillion.toFixed(2)}/M`;
+}
+var TAG_LABELS = {
+  "tool-use": "T",
+  reasoning: "R",
+  vision: "V",
+  "file-input": "F",
+  "implicit-caching": "C",
+  "image-generation": "I"
+};
+var TAG_TITLES = {
+  "tool-use": "Tool Use",
+  reasoning: "Reasoning",
+  vision: "Vision",
+  "file-input": "File Input",
+  "implicit-caching": "Implicit Caching",
+  "image-generation": "Image Generation"
+};
+function ModelSelector({ value, onChange, disabled }) {
+  const client = useAgentPlaneClient();
+  const [open, setOpen] = useState(false);
+  const [models, setModels] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [search, setSearch] = useState("");
+  const [providerFilter, setProviderFilter] = useState("all");
+  const hasFetchedRef = useRef(false);
+  useEffect(() => {
+    if (!open || hasFetchedRef.current) return;
+    hasFetchedRef.current = true;
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+    client.models.list().then((data) => {
+      if (!cancelled) {
+        setModels(data);
+        setLoading(false);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setError(true);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, client]);
+  const providers = useMemo(() => {
+    if (!models) return [];
+    const set = new Set(models.map((m) => m.provider));
+    return Array.from(set).sort();
+  }, [models]);
+  const grouped = useMemo(() => {
+    if (!models) return {};
+    let filtered = models;
+    if (providerFilter !== "all") {
+      filtered = filtered.filter((m) => m.provider === providerFilter);
+    }
+    const groups = {};
+    for (const m of filtered) {
+      const key = m.provider;
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(m);
+    }
+    return groups;
+  }, [models, providerFilter]);
+  const selectedModel = models?.find((m) => m.id === value);
+  const displayName = selectedModel?.name || value || "Select model...";
+  const searchMatchesAny = useMemo(() => {
+    if (!search || !models) return true;
+    const lower = search.toLowerCase();
+    return models.some(
+      (m) => m.id.toLowerCase().includes(lower) || m.name.toLowerCase().includes(lower) || m.provider.toLowerCase().includes(lower)
+    );
+  }, [search, models]);
+  function handleSelect(modelId) {
+    onChange(modelId);
+    setOpen(false);
+    setSearch("");
+  }
+  function handleOpenChange(newOpen) {
+    if (disabled) return;
+    setOpen(newOpen);
+    if (!newOpen) {
+      setSearch("");
+    }
+  }
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        className: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: displayName }),
+          selectedModel === void 0 && value && models && /* @__PURE__ */ jsx("span", { className: "ml-1 rounded bg-yellow-500/20 px-1 py-0.5 text-[10px] text-yellow-400", children: "custom" }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "ml-2 h-4 w-4 shrink-0 text-muted-foreground",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        className: "z-50 w-[600px] rounded-lg border border-muted-foreground/25 bg-card text-card-foreground shadow-xl",
+        sideOffset: 4,
+        align: "start",
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxs(
+          Command,
+          {
+            filter: (value2, search2) => {
+              const model = models?.find((m) => m.id === value2);
+              if (!model) return 0;
+              const lower = search2.toLowerCase();
+              if (model.id.toLowerCase().includes(lower)) return 1;
+              if (model.name.toLowerCase().includes(lower)) return 1;
+              if (model.provider.toLowerCase().includes(lower)) return 0.5;
+              return 0;
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-muted-foreground/25 px-3", children: [
+                /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0 text-muted-foreground", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+                /* @__PURE__ */ jsx(
+                  Command.Input,
+                  {
+                    value: search,
+                    onValueChange: setSearch,
+                    placeholder: "Search model...",
+                    className: "flex h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                  }
+                ),
+                providers.length > 0 && /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: providerFilter,
+                    onChange: (e) => setProviderFilter(e.target.value),
+                    className: "h-7 rounded border border-muted-foreground/25 bg-card px-2 text-xs text-muted-foreground outline-none [&_option]:bg-card [&_option]:text-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "all", children: "All Providers" }),
+                      providers.map((p) => /* @__PURE__ */ jsx("option", { value: p, children: p.charAt(0).toUpperCase() + p.slice(1) }, p))
+                    ]
+                  }
+                )
+              ] }),
+              !loading && models && /* @__PURE__ */ jsxs("div", { className: "mx-1 grid grid-cols-[1fr_60px_70px_70px_80px] items-center border-b border-muted-foreground/15 px-3 py-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("span", { children: "Model" }),
+                /* @__PURE__ */ jsx("span", { className: "text-right", children: "Context" }),
+                /* @__PURE__ */ jsx("span", { className: "text-right", children: "Input" }),
+                /* @__PURE__ */ jsx("span", { className: "text-right", children: "Output" }),
+                /* @__PURE__ */ jsx("span", { className: "text-right pr-1", children: "Tags" })
+              ] }),
+              /* @__PURE__ */ jsxs(Command.List, { className: "max-h-[340px] overflow-y-auto", children: [
+                loading && /* @__PURE__ */ jsx("div", { className: "space-y-1 p-3", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded bg-muted-foreground/10" }, i)) }),
+                error && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 text-xs text-yellow-400", children: "Failed to load models from gateway. Showing cached data." }),
+                /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-4 text-center text-sm text-muted-foreground", children: "No models found." }),
+                Object.entries(grouped).map(([provider, providerModels]) => /* @__PURE__ */ jsx(
+                  Command.Group,
+                  {
+                    heading: provider.charAt(0).toUpperCase() + provider.slice(1),
+                    className: "[&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground",
+                    children: providerModels.map((m) => /* @__PURE__ */ jsxs(
+                      Command.Item,
+                      {
+                        value: m.id,
+                        onSelect: () => handleSelect(m.id),
+                        className: "mx-1 grid cursor-pointer grid-cols-[1fr_60px_70px_70px_80px] items-center rounded-md px-3 py-1.5 text-sm data-[selected=true]:bg-accent",
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                            m.name || m.id,
+                            m.id === value && /* @__PURE__ */ jsx("svg", { className: "ml-1 inline h-3.5 w-3.5 text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+                          ] }),
+                          /* @__PURE__ */ jsx("span", { className: "text-right text-xs text-muted-foreground", children: formatContextWindow(m.context_window) }),
+                          /* @__PURE__ */ jsx("span", { className: "text-right text-xs text-muted-foreground", children: formatPrice(m.input_price_per_million) }),
+                          /* @__PURE__ */ jsx("span", { className: "text-right text-xs text-muted-foreground", children: formatPrice(m.output_price_per_million) }),
+                          /* @__PURE__ */ jsx("span", { className: "flex justify-end gap-0.5 pr-1", children: (m.capabilities ?? []).filter((t) => TAG_LABELS[t]).map((t) => /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              title: TAG_TITLES[t] || t,
+                              className: "inline-flex h-4 w-4 items-center justify-center rounded bg-muted-foreground/15 text-[9px] font-bold text-muted-foreground",
+                              children: TAG_LABELS[t]
+                            },
+                            t
+                          )) })
+                        ]
+                      },
+                      m.id
+                    ))
+                  },
+                  provider
+                )),
+                search && !searchMatchesAny && /* @__PURE__ */ jsxs(
+                  Command.Item,
+                  {
+                    value: `custom:${search}`,
+                    onSelect: () => handleSelect(search),
+                    className: "mt-1 flex cursor-pointer items-center gap-2 rounded-md border-t border-muted-foreground/10 px-3 py-2 text-sm data-[selected=true]:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Use custom model:" }),
+                      /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: search })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function AddAgentDialog({ onCreated }) {
+  const client = useAgentPlaneClient();
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    model: "claude-sonnet-4-6",
+    runner: "",
+    permission_mode: "bypassPermissions",
+    max_turns: "100",
+    max_budget_usd: "1.00",
+    max_runtime_minutes: "10"
+  });
+  function resetForm() {
+    setForm({
+      name: "",
+      description: "",
+      model: "claude-sonnet-4-6",
+      runner: "",
+      permission_mode: "bypassPermissions",
+      max_turns: "100",
+      max_budget_usd: "1.00",
+      max_runtime_minutes: "10"
+    });
+    setError("");
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setSaving(true);
+    setError("");
+    try {
+      await client.agents.create({
+        name: form.name,
+        description: form.description || null,
+        model: form.model,
+        runner: form.runner || null,
+        permission_mode: form.permission_mode,
+        max_turns: parseInt(form.max_turns),
+        max_budget_usd: parseFloat(form.max_budget_usd),
+        max_runtime_seconds: parseInt(form.max_runtime_minutes) * 60
+      });
+      setOpen(false);
+      resetForm();
+      onCreated();
+    } catch (err) {
+      setError(err?.message ?? "Failed to create agent");
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setOpen(true), children: "+ New Agent" }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (v) => {
+      setOpen(v);
+      if (!v) resetForm();
+    }, children: /* @__PURE__ */ jsx(DialogContent, { className: "max-w-md", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Add Agent" }) }),
+      /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: form.name,
+            onChange: (e) => setForm((f) => ({ ...f, name: e.target.value })),
+            placeholder: "my-agent",
+            required: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: form.description,
+            onChange: (e) => setForm((f) => ({ ...f, description: e.target.value })),
+            placeholder: "What does this agent do?"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField, { label: "Model", children: /* @__PURE__ */ jsx(
+          ModelSelector,
+          {
+            value: form.model,
+            onChange: (modelId) => setForm((f) => ({
+              ...f,
+              model: modelId,
+              runner: supportsClaudeRunner(modelId) ? f.runner : "vercel-ai-sdk",
+              permission_mode: supportsClaudeRunner(modelId) ? f.permission_mode : "bypassPermissions"
+            }))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          /* @__PURE__ */ jsx(FormField, { label: "Runner", children: supportsClaudeRunner(form.model) ? /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: form.runner || "claude-agent-sdk",
+              onChange: (e) => setForm((f) => ({ ...f, runner: e.target.value === "claude-agent-sdk" ? "" : e.target.value })),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "claude-agent-sdk", children: "Claude Agent SDK" }),
+                /* @__PURE__ */ jsx("option", { value: "vercel-ai-sdk", children: "Vercel AI SDK" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(Select, { value: "vercel-ai-sdk", disabled: true, children: /* @__PURE__ */ jsx("option", { value: "vercel-ai-sdk", children: "Vercel AI SDK" }) }) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Permission Mode", children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: form.permission_mode,
+              onChange: (e) => setForm((f) => ({ ...f, permission_mode: e.target.value })),
+              disabled: !supportsClaudeRunner(form.model) || form.runner === "vercel-ai-sdk",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "default", children: "default" }),
+                /* @__PURE__ */ jsx("option", { value: "acceptEdits", children: "acceptEdits" }),
+                /* @__PURE__ */ jsx("option", { value: "bypassPermissions", children: "bypassPermissions" }),
+                /* @__PURE__ */ jsx("option", { value: "plan", children: "plan" })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+          /* @__PURE__ */ jsx(FormField, { label: "Max Turns", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              min: "1",
+              max: "1000",
+              value: form.max_turns,
+              onChange: (e) => setForm((f) => ({ ...f, max_turns: e.target.value })),
+              required: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Max Budget", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "$" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                step: "0.01",
+                min: "0.01",
+                max: "100",
+                value: form.max_budget_usd,
+                onChange: (e) => setForm((f) => ({ ...f, max_budget_usd: e.target.value })),
+                className: "pl-6",
+                required: true
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(FormField, { label: "Max Runtime", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                min: "1",
+                max: "60",
+                value: form.max_runtime_minutes,
+                onChange: (e) => setForm((f) => ({ ...f, max_runtime_minutes: e.target.value })),
+                className: "pr-10",
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "min" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(FormError, { error })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+          setOpen(false);
+          resetForm();
+        }, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: saving, children: saving ? "Creating..." : "Create Agent" })
+      ] })
+    ] }) }) })
+  ] });
+}
+function DeleteAgentButton({ agentId, agentName, onDeleted }) {
+  const client = useAgentPlaneClient();
+  const [open, setOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState("");
+  async function handleDelete() {
+    setDeleting(true);
+    setError("");
+    try {
+      await client.agents.delete(agentId);
+      setOpen(false);
+      onDeleted();
+    } catch (err) {
+      setError(err?.message ?? "Failed to delete agent");
+    } finally {
+      setDeleting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "ghost",
+        className: "text-muted-foreground hover:text-destructive text-xs",
+        onClick: () => setOpen(true),
+        children: "Delete"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        title: "Delete Agent",
+        confirmLabel: "Delete",
+        loadingLabel: "Deleting...",
+        loading: deleting,
+        error,
+        onConfirm: handleDelete,
+        children: [
+          "Delete ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: agentName }),
+          "? This will also remove all associated runs and connections."
+        ]
+      }
+    )
+  ] });
+}
+function AgentListPage() {
+  const { LinkComponent, basePath } = useNavigation();
+  const { mutate } = useSWRConfig();
+  const { data, error, isLoading } = useApi(
+    "agents",
+    (client) => client.agents.list()
+  );
+  const agents = data?.data ?? [];
+  const invalidate = useCallback(() => {
+    mutate("agents");
+  }, [mutate]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-32" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12 w-full" }, i)) })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "text-destructive text-sm py-12 text-center", children: [
+      "Failed to load agents: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center mb-6", children: /* @__PURE__ */ jsx(AddAgentDialog, { onCreated: invalidate }) }),
+    /* @__PURE__ */ jsxs(AdminTable, { children: [
+      /* @__PURE__ */ jsxs(AdminTableHead, { children: [
+        /* @__PURE__ */ jsx(Th, { children: "Name" }),
+        /* @__PURE__ */ jsx(Th, { children: "Description" }),
+        /* @__PURE__ */ jsx(Th, { children: "Model" }),
+        /* @__PURE__ */ jsx(Th, { children: "Connectors" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Skills" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Plugins" }),
+        /* @__PURE__ */ jsx(Th, { align: "right" })
+      ] }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        agents.map((a) => /* @__PURE__ */ jsxs(AdminTableRow, { children: [
+          /* @__PURE__ */ jsx("td", { className: "p-3 font-medium", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(LinkComponent, { href: `${basePath}/agents/${a.id}`, className: "text-primary hover:underline", children: a.name }),
+            a.a2a_enabled && /* @__PURE__ */ jsx(Badge, { className: "text-[10px] px-1.5 py-0 bg-indigo-500/10 text-indigo-400 border-indigo-500/20", children: "A2A" })
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs max-w-xs truncate", title: a.description ?? void 0, children: a.description ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs text-muted-foreground", children: a.model }),
+          /* @__PURE__ */ jsx("td", { className: "p-3", children: a.composio_toolkits.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: a.composio_toolkits.map((t) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: t }, t)) }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" }) }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: (a.skills ?? []).length }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: (a.plugins ?? []).length }),
+          /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: /* @__PURE__ */ jsx(DeleteAgentButton, { agentId: a.id, agentName: a.name, onDeleted: invalidate }) })
+        ] }, a.id)),
+        agents.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 7, children: "No agents found" })
+      ] })
+    ] })
+  ] });
+}
+function AgentEditForm({ agent, onSaved }) {
+  const client = useAgentPlaneClient();
+  const [name, setName] = useState(agent.name);
+  const [description, setDescription] = useState(agent.description ?? "");
+  const [model, setModel] = useState(agent.model);
+  const [runner, setRunner] = useState(agent.runner ?? "");
+  const [permissionMode, setPermissionMode] = useState(agent.permission_mode);
+  const [maxTurns, setMaxTurns] = useState(agent.max_turns.toString());
+  const [maxBudget, setMaxBudget] = useState(agent.max_budget_usd.toString());
+  const [maxRuntime, setMaxRuntime] = useState(Math.floor(agent.max_runtime_seconds / 60).toString());
+  const [saving, setSaving] = useState(false);
+  const isDirty = name !== agent.name || description !== (agent.description ?? "") || model !== agent.model || runner !== (agent.runner ?? "") || permissionMode !== agent.permission_mode || maxTurns !== agent.max_turns.toString() || maxBudget !== agent.max_budget_usd.toString() || maxRuntime !== Math.floor(agent.max_runtime_seconds / 60).toString();
+  const [error, setError] = useState("");
+  async function handleSave() {
+    setSaving(true);
+    setError("");
+    try {
+      await client.agents.update(agent.id, {
+        name,
+        description: description || null,
+        model,
+        runner: runner || null,
+        permission_mode: permissionMode,
+        max_turns: parseInt(maxTurns) || agent.max_turns,
+        max_budget_usd: parseFloat(maxBudget) || agent.max_budget_usd,
+        max_runtime_seconds: (parseInt(maxRuntime) || Math.floor(agent.max_runtime_seconds / 60)) * 60
+      });
+      onSaved?.();
+    } catch (err) {
+      setError(err?.message ?? "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsxs(SectionHeader, { title: "Details", children: [
+      error && /* @__PURE__ */ jsx("span", { className: "text-sm text-destructive mr-2", children: error }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : "Save Changes" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(FormField, { label: "Name", children: /* @__PURE__ */ jsx(Input, { value: name, onChange: (e) => setName(e.target.value), disabled: saving }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-4", children: /* @__PURE__ */ jsx(FormField, { label: "Description", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "What does this agent do?",
+            disabled: saving
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(FormField, { label: "Model", children: /* @__PURE__ */ jsx(
+          ModelSelector,
+          {
+            value: model,
+            disabled: saving,
+            onChange: (modelId) => {
+              setModel(modelId);
+              if (!supportsClaudeRunner(modelId)) {
+                setRunner("vercel-ai-sdk");
+                setPermissionMode("bypassPermissions");
+              }
+            }
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(FormField, { label: "Runner", children: supportsClaudeRunner(model) ? /* @__PURE__ */ jsxs(Select, { value: runner || "claude-agent-sdk", onChange: (e) => setRunner(e.target.value === "claude-agent-sdk" ? "" : e.target.value), disabled: saving, children: [
+          /* @__PURE__ */ jsx("option", { value: "claude-agent-sdk", children: "Claude SDK" }),
+          /* @__PURE__ */ jsx("option", { value: "vercel-ai-sdk", children: "AI SDK" })
+        ] }) : /* @__PURE__ */ jsx(Select, { value: "vercel-ai-sdk", disabled: true, children: /* @__PURE__ */ jsx("option", { value: "vercel-ai-sdk", children: "AI SDK" }) }) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(FormField, { label: "Max Turns", children: /* @__PURE__ */ jsx(Input, { type: "number", min: "1", max: "1000", value: maxTurns, onChange: (e) => setMaxTurns(e.target.value), disabled: saving }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(FormField, { label: "Max Budget", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "$" }),
+          /* @__PURE__ */ jsx(Input, { type: "number", step: "0.01", min: "0.01", max: "100", value: maxBudget, onChange: (e) => setMaxBudget(e.target.value), className: "pl-6", disabled: saving })
+        ] }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(FormField, { label: "Max Runtime", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Input, { type: "number", min: "1", max: "60", value: maxRuntime, onChange: (e) => setMaxRuntime(e.target.value), className: "pr-10", disabled: saving }),
+          /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "min" })
+        ] }) }) }),
+        supportsClaudeRunner(model) && (runner === "" || runner === "claude-agent-sdk") && /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(FormField, { label: "Permission Mode", children: /* @__PURE__ */ jsxs(Select, { value: permissionMode, onChange: (e) => setPermissionMode(e.target.value), disabled: saving, children: [
+          /* @__PURE__ */ jsx("option", { value: "default", children: "default" }),
+          /* @__PURE__ */ jsx("option", { value: "acceptEdits", children: "acceptEdits" }),
+          /* @__PURE__ */ jsx("option", { value: "bypassPermissions", children: "bypassPermissions" }),
+          /* @__PURE__ */ jsx("option", { value: "plan", children: "plan" })
+        ] }) }) })
+      ] })
+    ] }) })
+  ] });
+}
+function ToolkitMultiselect({ value, onChange }) {
+  const client = useAgentPlaneClient();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [toolkits, setToolkits] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const containerRef = useRef(null);
+  const searchRef = useRef(null);
+  useEffect(() => {
+    client.composio.toolkits().then((data) => setToolkits(data)).catch(() => {
+    }).finally(() => setLoading(false));
+  }, [client]);
+  useEffect(() => {
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+  useEffect(() => {
+    searchRef.current?.focus();
+  }, []);
+  const filtered = toolkits.filter((t) => {
+    const q = search.toLowerCase();
+    return t.slug.includes(q) || t.name.toLowerCase().includes(q);
+  });
+  function toggle(slug) {
+    onChange(value.includes(slug) ? value.filter((s) => s !== slug) : [...value, slug]);
+    setSearch("");
+    searchRef.current?.focus();
+  }
+  function remove(slug) {
+    onChange(value.filter((s) => s !== slug));
+  }
+  const selectedToolkits = value.map((slug) => toolkits.find((t) => t.slug === slug) ?? { slug, name: slug, logo: "" }).filter(Boolean);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-md border border-input bg-transparent cursor-text",
+        onClick: () => {
+          setOpen(true);
+          searchRef.current?.focus();
+        },
+        children: [
+          selectedToolkits.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-3 pt-2 pb-1", children: selectedToolkits.map((t) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-md bg-secondary text-secondary-foreground text-xs px-2 py-0.5",
+              children: [
+                t.logo && /* @__PURE__ */ jsx("img", { src: t.logo, alt: "", className: "w-3.5 h-3.5 rounded-sm object-contain" }),
+                t.name,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      remove(t.slug);
+                    },
+                    className: "text-muted-foreground hover:text-foreground ml-0.5",
+                    children: "\xD7"
+                  }
+                )
+              ]
+            },
+            t.slug
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchRef,
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              onFocus: () => setOpen(true),
+              placeholder: "Search toolkits...",
+              className: "w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            }
+          ) })
+        ]
+      }
+    ),
+    open && search.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md", children: /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto", children: [
+      loading && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground p-3", children: "Loading..." }),
+      !loading && filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground p-3", children: "No toolkits found" }),
+      filtered.map((t) => {
+        const selected = value.includes(t.slug);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggle(t.slug),
+            className: `w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left hover:bg-accent ${selected ? "bg-accent/50" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `w-4 h-4 flex-shrink-0 rounded-sm border flex items-center justify-center text-xs ${selected ? "bg-primary border-primary text-primary-foreground" : "border-input"}`, children: selected && "\u2713" }),
+              t.logo && /* @__PURE__ */ jsx("img", { src: t.logo, alt: "", className: "w-5 h-5 rounded-sm object-contain flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: t.name }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground font-mono flex-shrink-0", children: t.slug })
+            ]
+          },
+          t.slug
+        );
+      })
+    ] }) })
+  ] });
+}
+function schemeBadgeVariant(scheme) {
+  if (scheme === "NO_AUTH") return "secondary";
+  return "outline";
+}
+function statusColor(status) {
+  if (status === "ACTIVE") return "text-green-500";
+  if (status === "INITIATED") return "text-yellow-500";
+  if (status === "FAILED" || status === "EXPIRED" || status === "INACTIVE") return "text-destructive";
+  return "text-muted-foreground";
+}
+function ToolsModal({
+  toolkit,
+  toolkitLogo,
+  allowedTools,
+  open,
+  onOpenChange,
+  onSave
+}) {
+  const client = useAgentPlaneClient();
+  const [tools, setTools] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [saving, setSaving] = useState(false);
+  const fetchTools = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await client.composio.tools(toolkit);
+      setTools(data ?? []);
+    } finally {
+      setLoading(false);
+    }
+  }, [toolkit, client]);
+  useEffect(() => {
+    if (open) {
+      fetchTools();
+      setSearch("");
+      const toolkitPrefix = toolkit.toUpperCase() + "_";
+      const relevant = allowedTools.filter((t) => t.startsWith(toolkitPrefix));
+      setSelected(new Set(relevant));
+    }
+  }, [open, toolkit, allowedTools, fetchTools]);
+  const filtered = tools.filter((t) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return t.name.toLowerCase().includes(q) || t.slug.toLowerCase().includes(q);
+  });
+  const allSelected = filtered.length > 0 && filtered.every((t) => selected.has(t.slug));
+  function toggleAll() {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (allSelected) {
+        for (const t of filtered) next.delete(t.slug);
+      } else {
+        for (const t of filtered) next.add(t.slug);
+      }
+      return next;
+    });
+  }
+  function toggle(slug) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(slug)) next.delete(slug);
+      else next.add(slug);
+      return next;
+    });
+  }
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const selection = selected.size === tools.length ? [] : Array.from(selected);
+      await onSave(toolkit, selection);
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "capitalize flex items-center gap-2", children: [
+        toolkitLogo && /* @__PURE__ */ jsx("img", { src: toolkitLogo, alt: "", className: "w-5 h-5 rounded-sm object-contain flex-shrink-0" }),
+        toolkit,
+        " Tools"
+      ] }),
+      !loading && /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        tools.length,
+        " tools available"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Input, { placeholder: "Search tools...", value: search, onChange: (e) => setSearch(e.target.value), className: "h-8 text-sm" }),
+      loading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: "Loading tools..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: selected.size === 0 ? "All tools (no filter)" : `${selected.size} / ${tools.length} selected` }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "text-primary hover:underline", onClick: toggleAll, children: allSelected ? "Deselect All" : "Select All" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "max-h-72 overflow-y-auto border border-border rounded-lg divide-y divide-border", children: [
+          filtered.map((t) => /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2.5 px-3 py-2.5 hover:bg-muted/50 cursor-pointer transition-colors", children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selected.has(t.slug), onChange: () => toggle(t.slug), className: "mt-0.5" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium truncate", children: t.name }),
+              t.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground line-clamp-1", children: t.description })
+            ] })
+          ] }, t.slug)),
+          filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: "No tools match your search" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSave, disabled: saving || loading, children: saving ? "Saving..." : "Save" })
+    ] })
+  ] }) });
+}
+function McpToolsModal({
+  agentId,
+  mcpServerId,
+  serverName,
+  serverLogo,
+  allowedTools,
+  open,
+  onOpenChange,
+  onSave
+}) {
+  const client = useAgentPlaneClient();
+  const [tools, setTools] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const fetchTools = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const data = await client.customConnectors.listTools(agentId, mcpServerId);
+      setTools(data ?? []);
+    } catch {
+      setError("Failed to load tools");
+    } finally {
+      setLoading(false);
+    }
+  }, [agentId, mcpServerId, client]);
+  useEffect(() => {
+    if (open) {
+      fetchTools();
+      setSearch("");
+      setSelected(new Set(allowedTools));
+    }
+  }, [open, allowedTools, fetchTools]);
+  const filtered = tools.filter((t) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return t.name.toLowerCase().includes(q) || (t.description?.toLowerCase().includes(q) ?? false);
+  });
+  const allSelected = filtered.length > 0 && filtered.every((t) => selected.has(t.name));
+  function toggleAll() {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (allSelected) {
+        for (const t of filtered) next.delete(t.name);
+      } else {
+        for (const t of filtered) next.add(t.name);
+      }
+      return next;
+    });
+  }
+  function toggle(name) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const selection = selected.size === tools.length ? [] : Array.from(selected);
+      await onSave(selection);
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
+        serverLogo && /* @__PURE__ */ jsx("img", { src: serverLogo, alt: "", className: "w-5 h-5 rounded-sm object-contain flex-shrink-0" }),
+        serverName,
+        " Tools"
+      ] }),
+      !loading && !error && /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        tools.length,
+        " tools available"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogBody, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Input, { placeholder: "Search tools...", value: search, onChange: (e) => setSearch(e.target.value), className: "h-8 text-sm" }),
+      loading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: "Loading tools..." }) : error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive py-4 text-center", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: selected.size === 0 ? "All tools (no filter)" : `${selected.size} / ${tools.length} selected` }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "text-primary hover:underline", onClick: toggleAll, children: allSelected ? "Deselect All" : "Select All" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "max-h-72 overflow-y-auto border border-border rounded-lg divide-y divide-border", children: [
+          filtered.map((t) => /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2.5 px-3 py-2.5 hover:bg-muted/50 cursor-pointer transition-colors", children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: selected.has(t.name), onChange: () => toggle(t.name), className: "mt-0.5" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium truncate", children: t.name }),
+              t.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground line-clamp-1", children: t.description })
+            ] })
+          ] }, t.name)),
+          filtered.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: "No tools match your search" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSave, disabled: saving || loading, children: saving ? "Saving..." : "Save" })
+    ] })
+  ] }) });
+}
+function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAllowedTools: initialAllowedTools, onChanged }) {
+  const client = useAgentPlaneClient();
+  const [localToolkits, setLocalToolkits] = useState(initialToolkits);
+  const [connectors, setConnectors] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showAdd, setShowAdd] = useState(false);
+  const [pendingToolkits, setPendingToolkits] = useState(initialToolkits);
+  const [applyingToolkits, setApplyingToolkits] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+  const [apiKeys, setApiKeys] = useState({});
+  const [saving, setSaving] = useState({});
+  const [errors, setErrors] = useState({});
+  const [allowedTools, setAllowedTools] = useState(initialAllowedTools);
+  const [toolCounts, setToolCounts] = useState({});
+  const [toolsModalToolkit, setToolsModalToolkit] = useState(null);
+  const mcpOauthHandlerRef = useRef(null);
+  const composioOauthHandlerRef = useRef(null);
+  const [mcpConnections, setMcpConnections] = useState([]);
+  const [mcpServers, setMcpServers] = useState([]);
+  const [mcpLoading, setMcpLoading] = useState(true);
+  const [mcpConnecting, setMcpConnecting] = useState(null);
+  const [confirmMcpDisconnect, setConfirmMcpDisconnect] = useState(null);
+  const [mcpDisconnecting, setMcpDisconnecting] = useState(false);
+  const [mcpToolsModal, setMcpToolsModal] = useState(null);
+  const loadComposio = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await client.connectors.list(agentId);
+      setConnectors(data ?? []);
+    } finally {
+      setLoading(false);
+    }
+  }, [agentId, client]);
+  const loadMcp = useCallback(async () => {
+    setMcpLoading(true);
+    try {
+      const data = await client.customConnectors.list(agentId);
+      setMcpConnections(data ?? []);
+    } finally {
+      setMcpLoading(false);
+    }
+  }, [agentId, client]);
+  const toolkitsKey = localToolkits.join(",");
+  useEffect(() => {
+    loadComposio();
+  }, [loadComposio, toolkitsKey]);
+  useEffect(() => {
+    loadMcp();
+  }, [loadMcp]);
+  useEffect(() => {
+    return () => {
+      if (mcpOauthHandlerRef.current) {
+        window.removeEventListener("message", mcpOauthHandlerRef.current);
+        mcpOauthHandlerRef.current = null;
+      }
+      if (composioOauthHandlerRef.current) {
+        window.removeEventListener("message", composioOauthHandlerRef.current);
+        composioOauthHandlerRef.current = null;
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (localToolkits.length === 0) return;
+    let cancelled = false;
+    for (const slug of localToolkits) {
+      if (toolCounts[slug] !== void 0) continue;
+      client.composio.tools(slug).then((data) => {
+        if (!cancelled) setToolCounts((prev) => ({ ...prev, [slug]: (data ?? []).length }));
+      }).catch(() => {
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [toolkitsKey, client]);
+  async function loadMcpServers() {
+    try {
+      const data = await client.customConnectors.listServers();
+      setMcpServers(data ?? []);
+    } catch {
+    }
+  }
+  async function handleToolsSave(toolkit, selectedSlugs) {
+    const prefix = toolkit.toUpperCase() + "_";
+    const otherTools = allowedTools.filter((t) => !t.startsWith(prefix));
+    const updated = [...otherTools, ...selectedSlugs];
+    await client.agents.update(agentId, { composio_allowed_tools: updated });
+    setAllowedTools(updated);
+    setToolsModalToolkit(null);
+    onChanged?.();
+  }
+  async function patchToolkits(newToolkits) {
+    await client.agents.update(agentId, { composio_toolkits: newToolkits });
+    setLocalToolkits(newToolkits);
+    onChanged?.();
+  }
+  async function handleApplyAdd() {
+    setApplyingToolkits(true);
+    try {
+      await patchToolkits(pendingToolkits);
+      setShowAdd(false);
+    } finally {
+      setApplyingToolkits(false);
+    }
+  }
+  async function handleConfirmDelete() {
+    if (!confirmDelete) return;
+    setDeleting(true);
+    try {
+      await patchToolkits(localToolkits.filter((t) => t !== confirmDelete.slug));
+      setConfirmDelete(null);
+    } finally {
+      setDeleting(false);
+    }
+  }
+  async function handleSaveKey(slug) {
+    const key = apiKeys[slug];
+    if (!key) return;
+    setSaving((s) => ({ ...s, [slug]: true }));
+    setErrors((e) => ({ ...e, [slug]: "" }));
+    try {
+      await client.connectors.saveApiKey(agentId, { toolkit: slug, api_key: key });
+      setApiKeys((k) => ({ ...k, [slug]: "" }));
+      await loadComposio();
+      onChanged?.();
+    } catch (err) {
+      setErrors((e) => ({ ...e, [slug]: err?.message ?? "Unknown error" }));
+    } finally {
+      setSaving((s) => ({ ...s, [slug]: false }));
+    }
+  }
+  async function handleMcpConnect(serverId) {
+    setMcpConnecting(serverId);
+    try {
+      if (mcpOauthHandlerRef.current) {
+        window.removeEventListener("message", mcpOauthHandlerRef.current);
+        mcpOauthHandlerRef.current = null;
+      }
+      const popup = window.open("about:blank", "mcp-oauth", "width=600,height=700");
+      const data = await client.customConnectors.initiateOauth(agentId, serverId);
+      if (data.redirectUrl && popup) {
+        popup.location.href = data.redirectUrl;
+        const handler = (event) => {
+          if (event.origin !== window.location.origin) return;
+          if (event.data?.type === "agent_plane_mcp_oauth_callback") {
+            popup.close();
+            window.removeEventListener("message", handler);
+            mcpOauthHandlerRef.current = null;
+            loadMcp();
+            setShowAdd(false);
+            onChanged?.();
+          }
+        };
+        mcpOauthHandlerRef.current = handler;
+        window.addEventListener("message", handler);
+      } else {
+        popup?.close();
+      }
+    } finally {
+      setMcpConnecting(null);
+    }
+  }
+  async function handleMcpDisconnect() {
+    if (!confirmMcpDisconnect) return;
+    setMcpDisconnecting(true);
+    try {
+      await client.customConnectors.delete(agentId, confirmMcpDisconnect.mcp_server_id);
+      setConfirmMcpDisconnect(null);
+      await loadMcp();
+      onChanged?.();
+    } finally {
+      setMcpDisconnecting(false);
+    }
+  }
+  async function handleComposioOauth(slug) {
+    try {
+      if (composioOauthHandlerRef.current) {
+        window.removeEventListener("message", composioOauthHandlerRef.current);
+        composioOauthHandlerRef.current = null;
+      }
+      const popup = window.open("about:blank", "composio-oauth", "width=600,height=700");
+      const data = await client.connectors.initiateOauth(agentId, slug);
+      if (data.redirect_url && popup) {
+        popup.location.href = data.redirect_url;
+        const handler = (event) => {
+          if (event.origin !== window.location.origin) return;
+          if (event.data?.type === "agent_plane_composio_oauth_callback" || event.data?.type === "agent_plane_oauth_callback") {
+            popup.close();
+            window.removeEventListener("message", handler);
+            composioOauthHandlerRef.current = null;
+            loadComposio();
+            onChanged?.();
+          }
+        };
+        composioOauthHandlerRef.current = handler;
+        window.addEventListener("message", handler);
+      } else {
+        popup?.close();
+      }
+    } catch {
+    }
+  }
+  const connectedMcpServerIds = new Set(mcpConnections.map((c) => c.mcp_server_id));
+  const availableMcpServers = mcpServers.filter((s) => !connectedMcpServerIds.has(s.id));
+  const isAllLoading = loading || mcpLoading;
+  const isEmpty = localToolkits.length === 0 && mcpConnections.length === 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open: !!confirmDelete,
+        onOpenChange: (open) => {
+          if (!open) setConfirmDelete(null);
+        },
+        title: "Remove Connector",
+        confirmLabel: "Remove",
+        loadingLabel: "Removing...",
+        loading: deleting,
+        onConfirm: handleConfirmDelete,
+        children: [
+          "Remove ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: confirmDelete?.name }),
+          " from this agent?"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ConfirmDialog,
+      {
+        open: !!confirmMcpDisconnect,
+        onOpenChange: (open) => {
+          if (!open) setConfirmMcpDisconnect(null);
+        },
+        title: "Disconnect Connector",
+        confirmLabel: "Disconnect",
+        loadingLabel: "Disconnecting...",
+        loading: mcpDisconnecting,
+        onConfirm: handleMcpDisconnect,
+        children: [
+          "Disconnect ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: confirmMcpDisconnect?.server_name }),
+          " from this agent?"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "Connectors", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => {
+            setPendingToolkits(localToolkits);
+            loadMcpServers();
+            setShowAdd(true);
+          },
+          children: "Add"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        showAdd && /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-3", children: [
+          /* @__PURE__ */ jsx(ToolkitMultiselect, { value: pendingToolkits, onChange: setPendingToolkits }),
+          availableMcpServers.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2", children: availableMcpServers.map((s) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-2 rounded border border-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              s.logo_url && /* @__PURE__ */ jsx("img", { src: s.logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: s.name }),
+              /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs flex-shrink-0 ml-auto", children: s.slug })
+            ] }),
+            s.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: s.description }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "outline",
+                className: "h-7 text-xs mt-auto",
+                disabled: mcpConnecting === s.id,
+                onClick: () => handleMcpConnect(s.id),
+                children: mcpConnecting === s.id ? "Connecting..." : "Connect"
+              }
+            )
+          ] }, s.id)) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setShowAdd(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleApplyAdd, disabled: applyingToolkits, children: applyingToolkits ? "Saving..." : "Apply" })
+          ] })
+        ] }),
+        isAllLoading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading..." }) : isEmpty ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No connectors added. Click Add to configure connectors." }) : /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
+          connectors.map((c) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-3 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              c.logo && /* @__PURE__ */ jsx("img", { src: c.logo, alt: "", className: "w-5 h-5 rounded-sm object-contain flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate flex-1", children: c.name }),
+              /* @__PURE__ */ jsx(Badge, { variant: schemeBadgeVariant(c.authScheme ?? c.auth_scheme), className: "text-xs flex-shrink-0", children: c.authScheme ?? c.auth_scheme }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setConfirmDelete({ slug: c.slug, name: c.name }),
+                  className: "text-muted-foreground hover:text-destructive flex-shrink-0 ml-1 text-base leading-none",
+                  title: "Remove connector",
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            (c.authScheme ?? c.auth_scheme) === "NO_AUTH" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "No auth required" }) : c.connectionStatus === "ACTIVE" || c.connected ? /* @__PURE__ */ jsx("span", { className: `text-xs font-medium ${statusColor(c.connectionStatus ?? (c.connected ? "ACTIVE" : null))}`, children: "Connected" }) : c.connectionStatus ? /* @__PURE__ */ jsx("span", { className: `text-xs ${statusColor(c.connectionStatus)}`, children: c.connectionStatus.toLowerCase() }) : null,
+            (() => {
+              const total = toolCounts[c.slug];
+              if (total === void 0) return null;
+              const prefix = c.slug.toUpperCase() + "_";
+              const filtered = allowedTools.filter((t) => t.startsWith(prefix));
+              const hasFilter = filtered.length > 0;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-xs text-primary hover:underline text-left",
+                  onClick: () => setToolsModalToolkit(c.slug),
+                  children: hasFilter ? `${filtered.length} / ${total} tools` : `All tools (${total})`
+                }
+              );
+            })(),
+            (c.authScheme ?? c.auth_scheme) === "API_KEY" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 mt-auto", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "password",
+                    placeholder: c.connected || c.connectionStatus === "ACTIVE" ? "Update API key\u2026" : "Enter API key\u2026",
+                    value: apiKeys[c.slug] ?? "",
+                    onChange: (e) => setApiKeys((k) => ({ ...k, [c.slug]: e.target.value })),
+                    className: "h-7 text-xs flex-1 min-w-0"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "outline",
+                    className: "h-7 text-xs flex-shrink-0",
+                    disabled: !apiKeys[c.slug] || saving[c.slug],
+                    onClick: () => handleSaveKey(c.slug),
+                    children: saving[c.slug] ? "Saving\u2026" : "Save"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(FormError, { error: errors[c.slug] })
+            ] }),
+            ((c.authScheme ?? c.auth_scheme) === "OAUTH2" || (c.authScheme ?? c.auth_scheme) === "OAUTH1") && c.connectionStatus !== "ACTIVE" && !c.connected && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", className: "h-7 text-xs w-full mt-auto", onClick: () => handleComposioOauth(c.slug), children: "Connect" }),
+            ((c.authScheme ?? c.auth_scheme) === "OAUTH2" || (c.authScheme ?? c.auth_scheme) === "OAUTH1") && (c.connectionStatus === "ACTIVE" || c.connected) && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", className: "h-7 text-xs text-muted-foreground w-full mt-auto", onClick: () => handleComposioOauth(c.slug), children: "Reconnect" })
+          ] }, `composio-${c.slug}`)),
+          mcpConnections.map((c) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-3 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              c.server_logo_url && /* @__PURE__ */ jsx("img", { src: c.server_logo_url, alt: "", className: "w-5 h-5 rounded-sm object-contain flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate flex-1", children: c.server_name }),
+              /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs flex-shrink-0", children: c.server_slug }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setConfirmMcpDisconnect(c),
+                  className: "text-muted-foreground hover:text-destructive flex-shrink-0 ml-1 text-base leading-none",
+                  title: "Disconnect",
+                  children: "\xD7"
+                }
+              )
+            ] }),
+            c.status === "active" ? /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-500", children: "Connected" }) : /* @__PURE__ */ jsx("span", { className: `text-xs ${c.status === "expired" || c.status === "failed" ? "text-destructive" : "text-muted-foreground"}`, children: c.status }),
+            c.status === "active" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-xs text-primary hover:underline text-left",
+                onClick: () => setMcpToolsModal(c),
+                children: c.allowed_tools.length > 0 ? `${c.allowed_tools.length} tools selected` : "All tools (no filter)"
+              }
+            ),
+            (c.status === "expired" || c.status === "failed") && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "ghost",
+                className: "h-7 text-xs text-muted-foreground mt-auto",
+                disabled: mcpConnecting === c.mcp_server_id,
+                onClick: () => handleMcpConnect(c.mcp_server_id),
+                children: mcpConnecting === c.mcp_server_id ? "Reconnecting..." : "Reconnect"
+              }
+            )
+          ] }, `mcp-${c.id}`))
+        ] })
+      ] })
+    ] }),
+    toolsModalToolkit && /* @__PURE__ */ jsx(
+      ToolsModal,
+      {
+        toolkit: toolsModalToolkit,
+        toolkitLogo: connectors.find((c) => c.slug === toolsModalToolkit)?.logo,
+        allowedTools,
+        open: !!toolsModalToolkit,
+        onOpenChange: (open) => {
+          if (!open) setToolsModalToolkit(null);
+        },
+        onSave: handleToolsSave
+      }
+    ),
+    mcpToolsModal && /* @__PURE__ */ jsx(
+      McpToolsModal,
+      {
+        agentId,
+        mcpServerId: mcpToolsModal.mcp_server_id,
+        serverName: mcpToolsModal.server_name,
+        serverLogo: mcpToolsModal.server_logo_url,
+        allowedTools: mcpToolsModal.allowed_tools,
+        open: !!mcpToolsModal,
+        onOpenChange: (open) => {
+          if (!open) setMcpToolsModal(null);
+        },
+        onSave: async (selectedTools) => {
+          await client.customConnectors.updateAllowedTools(agentId, mcpToolsModal.mcp_server_id, selectedTools);
+          setMcpToolsModal(null);
+          await loadMcp();
+        }
+      }
+    )
+  ] });
+}
+function AgentSkillManager({ agentId, initialSkills, onSaved }) {
+  const client = useAgentPlaneClient();
+  const initialFiles = useMemo(
+    () => initialSkills.flatMap(
+      (s) => s.files.map((f) => ({
+        path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
+        content: f.content
+      }))
+    ),
+    [initialSkills]
+  );
+  const [files, setFiles] = useState(initialFiles);
+  const [selectedPath, setSelectedPath] = useState(files[0]?.path ?? null);
+  const [saving, setSaving] = useState(false);
+  const [addingFile, setAddingFile] = useState(false);
+  const [newFileName, setNewFileName] = useState("");
+  const isDirty = useMemo(
+    () => JSON.stringify(files) !== JSON.stringify(initialFiles),
+    [files, initialFiles]
+  );
+  const selectedFile = files.find((f) => f.path === selectedPath);
+  function updateFileContent(path, content) {
+    setFiles((prev) => prev.map((f) => f.path === path ? { ...f, content } : f));
+  }
+  function addFile() {
+    const name = newFileName.trim();
+    if (!name || files.some((f) => f.path === name)) return;
+    const content = name.endsWith(".md") ? "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" : "";
+    setFiles((prev) => [...prev, { path: name, content }]);
+    setSelectedPath(name);
+    setAddingFile(false);
+    setNewFileName("");
+  }
+  function removeFile(path) {
+    setFiles((prev) => prev.filter((f) => f.path !== path));
+    if (selectedPath === path) {
+      setSelectedPath(files.find((f) => f.path !== path)?.path ?? null);
+    }
+  }
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      const folderMap = /* @__PURE__ */ new Map();
+      for (const file of files) {
+        const slashIdx = file.path.lastIndexOf("/");
+        if (slashIdx === -1) {
+          const existing = folderMap.get("(root)") ?? [];
+          existing.push({ path: file.path, content: file.content });
+          folderMap.set("(root)", existing);
+        } else {
+          const folder = file.path.slice(0, slashIdx);
+          const fileName = file.path.slice(slashIdx + 1);
+          const existing = folderMap.get(folder) ?? [];
+          existing.push({ path: fileName, content: file.content });
+          folderMap.set(folder, existing);
+        }
+      }
+      const skills = Array.from(folderMap.entries()).map(([folder, files2]) => ({ folder, files: files2 }));
+      await client.agents.update(agentId, { skills });
+      onSaved?.();
+    } finally {
+      setSaving(false);
+    }
+  }, [files, agentId, client, onSaved]);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "Skills", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      isDirty && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setAddingFile(true), children: "Add File" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSave, disabled: saving || !isDirty, children: saving ? "Saving..." : "Save Skills" })
+    ] }) }),
+    addingFile && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: newFileName,
+          onChange: (e) => setNewFileName(e.target.value),
+          placeholder: "folder/SKILL.md",
+          className: "max-w-xs text-sm",
+          onKeyDown: (e) => e.key === "Enter" && addFile()
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: addFile, children: "Add" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+        setAddingFile(false);
+        setNewFileName("");
+      }, children: "Cancel" })
+    ] }),
+    files.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: 'No skills defined. Click "Add File" to create a skill.' }) : /* @__PURE__ */ jsxs("div", { className: "flex gap-4 min-h-[300px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-48 shrink-0 border-r border-border pr-3 space-y-1", children: files.map((f) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex items-center justify-between group rounded px-2 py-1 text-xs cursor-pointer ${selectedPath === f.path ? "bg-accent text-accent-foreground" : "hover:bg-muted/50"}`,
+          onClick: () => setSelectedPath(f.path),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: f.path }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeFile(f.path);
+                },
+                className: "opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive ml-1",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        f.path
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: selectedFile ? /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: selectedFile.content,
+          onChange: (e) => updateFileContent(selectedFile.path, e.target.value),
+          className: "h-full min-h-[300px] font-mono text-xs resize-y",
+          placeholder: "Enter skill content..."
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select a file to edit" }) })
+    ] })
+  ] });
+}
+function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
+  const client = useAgentPlaneClient();
+  const [plugins, setPlugins] = useState(initialPlugins);
+  const [saving, setSaving] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [marketplaces, setMarketplaces] = useState([]);
+  const [selectedMarketplace, setSelectedMarketplace] = useState(null);
+  const [availablePlugins, setAvailablePlugins] = useState([]);
+  const [loadingPlugins, setLoadingPlugins] = useState(false);
+  const [marketplaceNames, setMarketplaceNames] = useState({});
+  const savedSnapshot = useRef(JSON.stringify(initialPlugins));
+  useEffect(() => {
+    savedSnapshot.current = JSON.stringify(initialPlugins);
+    setPlugins(initialPlugins);
+  }, [initialPlugins]);
+  const isDirty = useMemo(
+    () => JSON.stringify(plugins) !== savedSnapshot.current,
+    [plugins]
+  );
+  useEffect(() => {
+    client.pluginMarketplaces.list().then((data) => {
+      setMarketplaces(data);
+      const names = {};
+      for (const m of data) names[m.id] = m.name;
+      setMarketplaceNames(names);
+    }).catch(() => {
+    });
+  }, [client]);
+  const loadPluginsForMarketplace = useCallback(async (marketplaceId) => {
+    setSelectedMarketplace(marketplaceId);
+    setLoadingPlugins(true);
+    setAvailablePlugins([]);
+    try {
+      const data = await client.pluginMarketplaces.listPlugins(marketplaceId);
+      setAvailablePlugins(data ?? []);
+    } catch {
+    } finally {
+      setLoadingPlugins(false);
+    }
+  }, [client]);
+  function isPluginEnabled(marketplaceId, pluginName) {
+    return plugins.some(
+      (p) => p.marketplace_id === marketplaceId && p.plugin_name === pluginName
+    );
+  }
+  function togglePlugin(marketplaceId, pluginName) {
+    if (isPluginEnabled(marketplaceId, pluginName)) {
+      setPlugins(
+        (prev) => prev.filter(
+          (p) => !(p.marketplace_id === marketplaceId && p.plugin_name === pluginName)
+        )
+      );
+    } else {
+      setPlugins((prev) => [
+        ...prev,
+        { marketplace_id: marketplaceId, plugin_name: pluginName }
+      ]);
+    }
+  }
+  function removePlugin(index) {
+    setPlugins((prev) => prev.filter((_, i) => i !== index));
+  }
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await client.agents.update(agentId, { plugins });
+      savedSnapshot.current = JSON.stringify(plugins);
+      onSaved?.();
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "Plugins", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      isDirty && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => setDialogOpen(true), children: "Add Plugins" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : "Save Plugins" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      plugins.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: 'No plugins enabled. Click "Add Plugins" to browse available plugins.' }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: plugins.map((p, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between rounded-md border border-border px-3 py-2",
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: p.plugin_name }),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground ml-2", children: [
+                "from ",
+                marketplaceNames[p.marketplace_id] ?? p.marketplace_id.slice(0, 8)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "text-xs text-muted-foreground hover:text-destructive",
+                onClick: () => removePlugin(i),
+                children: "Remove"
+              }
+            )
+          ]
+        },
+        `${p.marketplace_id}:${p.plugin_name}`
+      )) }),
+      /* @__PURE__ */ jsx(Dialog, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg max-h-[80vh] flex flex-col", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Add Plugins" }) }),
+        /* @__PURE__ */ jsx(DialogBody, { className: "flex-1 overflow-hidden flex flex-col gap-3", children: marketplaces.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No plugin marketplaces registered. Add one from the Plugin Marketplaces page first." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-wrap", children: marketplaces.map((m) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: selectedMarketplace === m.id ? "default" : "outline",
+              onClick: () => loadPluginsForMarketplace(m.id),
+              children: m.name
+            },
+            m.id
+          )) }),
+          selectedMarketplace && /* @__PURE__ */ jsx("div", { className: "overflow-y-auto border border-border rounded-lg divide-y divide-border", children: loadingPlugins ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground text-center", children: "Loading plugins..." }) : availablePlugins.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground text-center", children: "No plugins found in this marketplace." }) : availablePlugins.map((ap) => {
+            const enabled = isPluginEnabled(selectedMarketplace, ap.name);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between px-3 py-2.5 hover:bg-muted/30 cursor-pointer transition-colors",
+                onClick: () => togglePlugin(selectedMarketplace, ap.name),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: ap.displayName }),
+                      ap.version && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                        "v",
+                        ap.version
+                      ] })
+                    ] }),
+                    ap.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: ap.description }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-1 mt-1", children: [
+                      ap.hasAgents && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px] px-1 py-0", children: "Agents" }),
+                      ap.hasSkills && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px] px-1 py-0", children: "Skills" }),
+                      ap.hasMcpJson && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px] px-1 py-0", children: "MCP" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: `w-4 h-4 rounded border flex items-center justify-center shrink-0 ${enabled ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground"}`, children: enabled && /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" }) })
+                ]
+              },
+              ap.name
+            );
+          }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setDialogOpen(false), children: "Done" }) })
+      ] }) })
+    ] })
+  ] });
+}
+var FREQUENCIES = [
+  { value: "manual", label: "Manual (no schedule)" },
+  { value: "hourly", label: "Hourly" },
+  { value: "daily", label: "Daily" },
+  { value: "weekdays", label: "Weekdays (Mon-Fri)" },
+  { value: "weekly", label: "Weekly" }
+];
+var DAYS_OF_WEEK = [
+  { value: 0, label: "Sunday" },
+  { value: 1, label: "Monday" },
+  { value: 2, label: "Tuesday" },
+  { value: 3, label: "Wednesday" },
+  { value: 4, label: "Thursday" },
+  { value: 5, label: "Friday" },
+  { value: 6, label: "Saturday" }
+];
+function formatTimeForInput(time) {
+  if (!time) return "09:00";
+  return time.slice(0, 5);
+}
+function AgentScheduleForm({ initialSchedules, timezone }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsx(SectionHeader, { title: "Schedules", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      "Timezone: ",
+      timezone
+    ] }) }),
+    initialSchedules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4", children: "No schedules configured." }) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: initialSchedules.map((schedule) => /* @__PURE__ */ jsx(
+      ScheduleCard,
+      {
+        schedule,
+        timezone
+      },
+      schedule.id
+    )) })
+  ] });
+}
+function ScheduleCard({
+  schedule,
+  timezone
+}) {
+  const [frequency, setFrequency] = useState(schedule.frequency);
+  const [time, setTime] = useState(formatTimeForInput(schedule.time));
+  const [dayOfWeek, setDayOfWeek] = useState(schedule.day_of_week ?? 1);
+  const [prompt, setPrompt] = useState(schedule.prompt ?? "");
+  const [enabled, setEnabled] = useState(schedule.enabled);
+  const [name, setName] = useState(schedule.name ?? "");
+  const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
+  const showDayPicker = frequency === "weekly";
+  const canEnable = frequency !== "manual";
+  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-muted-foreground/15 p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: "Schedule name (optional)",
+          className: "max-w-xs text-sm"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: canEnable && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: enabled ? "Enabled" : "Disabled" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": enabled,
+            onClick: () => setEnabled(!enabled),
+            className: `relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${enabled ? "bg-primary" : "bg-muted"}`,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `pointer-events-none inline-block h-4 w-4 transform rounded-full bg-background shadow-lg ring-0 transition-transform ${enabled ? "translate-x-4" : "translate-x-0"}`
+              }
+            )
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx(FormField, { label: "Frequency", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: frequency,
+          onChange: (e) => {
+            const newFreq = e.target.value;
+            setFrequency(newFreq);
+            if (newFreq === "manual") setEnabled(false);
+            else setEnabled(true);
+          },
+          children: FREQUENCIES.map((f) => /* @__PURE__ */ jsx("option", { value: f.value, children: f.label }, f.value))
+        }
+      ) }),
+      showTimePicker && /* @__PURE__ */ jsx(FormField, { label: `Time (${timezone})`, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "time",
+          value: time,
+          onChange: (e) => setTime(e.target.value)
+        }
+      ) }),
+      showDayPicker && /* @__PURE__ */ jsx(FormField, { label: "Day of Week", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: dayOfWeek.toString(),
+          onChange: (e) => setDayOfWeek(parseInt(e.target.value)),
+          children: DAYS_OF_WEEK.map((d) => /* @__PURE__ */ jsx("option", { value: d.value, children: d.label }, d.value))
+        }
+      ) })
+    ] }),
+    frequency !== "manual" && /* @__PURE__ */ jsx(FormField, { label: "Prompt", children: /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: prompt,
+        onChange: (e) => setPrompt(e.target.value),
+        rows: 3,
+        placeholder: "Enter the prompt to send on each scheduled run...",
+        className: "resize-y min-h-[60px]"
+      }
+    ) }),
+    (schedule.last_run_at || schedule.next_run_at) && /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-sm text-muted-foreground pt-1", children: [
+      schedule.last_run_at && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Last run:" }),
+        " ",
+        /* @__PURE__ */ jsx(LocalDate, { value: schedule.last_run_at })
+      ] }),
+      schedule.next_run_at && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Next run:" }),
+        " ",
+        /* @__PURE__ */ jsx(LocalDate, { value: schedule.next_run_at })
+      ] })
+    ] })
+  ] });
+}
+function AgentRuns({ agentId }) {
+  const { LinkComponent, basePath } = useNavigation();
+  const { data, error, isLoading } = useApi(
+    `agent-runs-${agentId}`,
+    (client) => client.runs.list({ agent_id: agentId, limit: 50 })
+  );
+  const runs = data?.data ?? [];
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, i)) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "text-destructive text-sm py-4 text-center", children: [
+      "Failed to load runs: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(AdminTable, { children: [
+    /* @__PURE__ */ jsxs(AdminTableHead, { children: [
+      /* @__PURE__ */ jsx(Th, { children: "Run" }),
+      /* @__PURE__ */ jsx(Th, { children: "Status" }),
+      /* @__PURE__ */ jsx(Th, { children: "Source" }),
+      /* @__PURE__ */ jsx(Th, { className: "max-w-xs", children: "Prompt" }),
+      /* @__PURE__ */ jsx(Th, { align: "right", children: "Cost" }),
+      /* @__PURE__ */ jsx(Th, { align: "right", children: "Turns" }),
+      /* @__PURE__ */ jsx(Th, { align: "right", children: "Duration" }),
+      /* @__PURE__ */ jsx(Th, { children: "Created" })
+    ] }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      runs.map((r) => /* @__PURE__ */ jsxs(AdminTableRow, { children: [
+        /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs", children: /* @__PURE__ */ jsxs(LinkComponent, { href: `${basePath}/runs/${r.id}`, className: "text-primary hover:underline", children: [
+          r.id.slice(0, 8),
+          "..."
+        ] }) }),
+        /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(RunStatusBadge, { status: r.status }) }),
+        /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(RunSourceBadge, { triggeredBy: r.triggered_by }) }),
+        /* @__PURE__ */ jsxs("td", { className: "p-3 max-w-xs truncate text-muted-foreground text-xs", title: r.prompt, children: [
+          r.prompt.slice(0, 80),
+          r.prompt.length > 80 ? "..." : ""
+        ] }),
+        /* @__PURE__ */ jsxs("td", { className: "p-3 text-right font-mono", children: [
+          "$",
+          r.cost_usd.toFixed(4)
+        ] }),
+        /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: r.num_turns }),
+        /* @__PURE__ */ jsx("td", { className: "p-3 text-right text-muted-foreground text-xs", children: r.duration_ms > 0 ? `${(r.duration_ms / 1e3).toFixed(1)}s` : "\u2014" }),
+        /* @__PURE__ */ jsx("td", { className: "p-3 text-muted-foreground text-xs", children: /* @__PURE__ */ jsx(LocalDate, { value: r.created_at }) })
+      ] }, r.id)),
+      runs.length === 0 && /* @__PURE__ */ jsx(EmptyRow, { colSpan: 8, children: "No runs yet" })
+    ] })
+  ] });
+}
+function AgentA2aInfo({
+  agentId,
+  tenantSlug,
+  agentSlug,
+  baseUrl,
+  initialEnabled,
+  initialTags,
+  onChanged
+}) {
+  const client = useAgentPlaneClient();
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [toggling, setToggling] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const [cardPreview, setCardPreview] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [tags, setTags] = useState(initialTags);
+  const [tagInput, setTagInput] = useState("");
+  const [savingTags, setSavingTags] = useState(false);
+  const inputRef = useRef(null);
+  const endpointUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}`;
+  const jsonRpcUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}/jsonrpc`;
+  const agentCardUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}/.well-known/agent-card.json`;
+  async function toggleA2a() {
+    setToggling(true);
+    try {
+      const next = !enabled;
+      await client.agents.update(agentId, { a2a_enabled: next });
+      setEnabled(next);
+      onChanged?.();
+    } finally {
+      setToggling(false);
+    }
+  }
+  async function saveTags(nextTags) {
+    setSavingTags(true);
+    try {
+      await client.agents.update(agentId, { a2a_tags: nextTags });
+    } finally {
+      setSavingTags(false);
+    }
+  }
+  function addTag(value) {
+    const tag = value.trim();
+    if (!tag || tags.includes(tag)) return;
+    const next = [...tags, tag];
+    setTags(next);
+    setTagInput("");
+    saveTags(next);
+  }
+  function removeTag(tag) {
+    const next = tags.filter((t) => t !== tag);
+    setTags(next);
+    saveTags(next);
+  }
+  function onTagKeyDown(e) {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addTag(tagInput);
+    } else if (e.key === "Backspace" && tagInput === "" && tags.length > 0) {
+      const lastTag = tags[tags.length - 1];
+      if (lastTag) removeTag(lastTag);
+    }
+  }
+  async function fetchAgentCard() {
+    if (cardPreview) {
+      setCardPreview(null);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch(agentCardUrl);
+      const data = await res.json();
+      setCardPreview(JSON.stringify(data, null, 2));
+    } catch {
+      setCardPreview("Failed to fetch Agent Card");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-muted-foreground/25 p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx(SectionHeader, { title: "A2A Protocol", className: "mb-0" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": enabled,
+          disabled: toggling,
+          onClick: toggleA2a,
+          className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 ${enabled ? "bg-indigo-500" : "bg-muted-foreground/30"}`,
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${enabled ? "translate-x-5" : "translate-x-0"}`
+            }
+          )
+        }
+      )
+    ] }),
+    enabled && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 items-start", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "URL" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("code", { className: "flex-1 rounded bg-muted px-3 py-1.5 text-xs font-mono text-foreground break-all", children: endpointUrl }),
+            /* @__PURE__ */ jsx(CopyButton, { text: endpointUrl })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "Tags" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-wrap items-center gap-1.5 rounded border border-input bg-muted px-2 py-1.5 min-h-[32px] cursor-text",
+              onClick: () => inputRef.current?.focus(),
+              children: [
+                tags.map((tag) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 rounded bg-indigo-500/20 text-indigo-300 text-xs px-2 py-0.5", children: [
+                  tag,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeTag(tag);
+                      },
+                      className: "hover:text-white leading-none",
+                      disabled: savingTags,
+                      children: "\xD7"
+                    }
+                  )
+                ] }, tag)),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    value: tagInput,
+                    onChange: (e) => setTagInput(e.target.value),
+                    onKeyDown: onTagKeyDown,
+                    onBlur: () => tagInput.trim() && addTag(tagInput),
+                    placeholder: tags.length === 0 ? "Add tags\u2026" : "",
+                    className: "flex-1 min-w-[80px] bg-transparent text-xs outline-none placeholder:text-muted-foreground",
+                    disabled: savingTags
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setDetailsOpen((v) => !v),
+          className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: detailsOpen ? "\u25BE" : "\u25B8" }),
+            /* @__PURE__ */ jsx("span", { children: "Details" })
+          ]
+        }
+      ),
+      detailsOpen && /* @__PURE__ */ jsxs("div", { className: "space-y-3 pl-1", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "JSON-RPC Endpoint" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("code", { className: "flex-1 rounded bg-muted px-3 py-1.5 text-xs font-mono text-foreground break-all", children: jsonRpcUrl }),
+            /* @__PURE__ */ jsx(CopyButton, { text: jsonRpcUrl })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "Agent Card URL" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("code", { className: "flex-1 rounded bg-muted px-3 py-1.5 text-xs font-mono text-foreground break-all", children: agentCardUrl }),
+            /* @__PURE__ */ jsx(CopyButton, { text: agentCardUrl })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: fetchAgentCard, disabled: loading, children: loading ? "Loading..." : cardPreview ? "Hide Agent Card" : "Agent Card" }),
+          cardPreview && /* @__PURE__ */ jsxs("div", { className: "mt-3 relative", children: [
+            /* @__PURE__ */ jsx("pre", { className: "rounded bg-muted p-4 text-xs font-mono text-foreground overflow-x-auto max-h-96", children: cardPreview }),
+            /* @__PURE__ */ jsx(CopyButton, { text: cardPreview, className: "absolute top-2 right-2" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, timezone = "UTC" }) {
+  const { LinkComponent, basePath } = useNavigation();
+  const { mutate } = useSWRConfig();
+  const cacheKey = `agent-${agentId}`;
+  const { data: agent, error, isLoading } = useApi(
+    cacheKey,
+    (client) => client.agents.get(agentId)
+  );
+  const invalidate = useCallback(() => {
+    mutate(cacheKey);
+  }, [mutate, cacheKey]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-40" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-4", children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-20" }, i)) }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-64 w-full" })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "text-destructive text-sm py-12 text-center", children: error.status === 404 ? "Agent not found." : `Failed to load agent: ${error.message}` });
+  }
+  if (!agent) {
+    return /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm py-12 text-center", children: "Agent not found." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href: `${basePath}/agents/${agentId}/playground`,
+        className: buttonVariants({ variant: "outline", size: "sm" }),
+        children: "Open Playground"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        tabs: [
+          {
+            label: "General",
+            content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-6 gap-4", children: [
+                /* @__PURE__ */ jsx(MetricCard, { label: "Max Turns", children: agent.max_turns }),
+                /* @__PURE__ */ jsx(MetricCard, { label: "Budget", children: /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                  "$",
+                  agent.max_budget_usd.toFixed(2)
+                ] }) }),
+                /* @__PURE__ */ jsx(MetricCard, { label: "Max Runtime", children: /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                  Math.floor(agent.max_runtime_seconds / 60),
+                  "m"
+                ] }) }),
+                /* @__PURE__ */ jsx(MetricCard, { label: "Skills", children: (agent.skills ?? []).length }),
+                /* @__PURE__ */ jsx(MetricCard, { label: "Plugins", children: (agent.plugins ?? []).length }),
+                /* @__PURE__ */ jsx(MetricCard, { label: "Model", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: agent.model }) })
+              ] }),
+              /* @__PURE__ */ jsx(AgentEditForm, { agent, onSaved: invalidate }),
+              tenantSlug && a2aBaseUrl && /* @__PURE__ */ jsx(
+                AgentA2aInfo,
+                {
+                  agentId: agent.id,
+                  tenantSlug,
+                  agentSlug: agent.slug ?? agent.name,
+                  baseUrl: a2aBaseUrl,
+                  initialEnabled: agent.a2a_enabled,
+                  initialTags: agent.a2a_tags ?? [],
+                  onChanged: invalidate
+                }
+              )
+            ] })
+          },
+          {
+            label: "Connectors",
+            content: /* @__PURE__ */ jsx(
+              AgentConnectorsManager,
+              {
+                agentId: agent.id,
+                toolkits: agent.composio_toolkits ?? [],
+                composioAllowedTools: agent.composio_allowed_tools ?? [],
+                onChanged: invalidate
+              }
+            )
+          },
+          {
+            label: "Skills",
+            content: /* @__PURE__ */ jsx(
+              AgentSkillManager,
+              {
+                agentId: agent.id,
+                initialSkills: agent.skills ?? [],
+                onSaved: invalidate
+              }
+            )
+          },
+          {
+            label: "Plugins",
+            content: /* @__PURE__ */ jsx(
+              AgentPluginManager,
+              {
+                agentId: agent.id,
+                initialPlugins: agent.plugins ?? [],
+                onSaved: invalidate
+              }
+            )
+          },
+          {
+            label: "Schedules",
+            content: /* @__PURE__ */ jsx(
+              AgentScheduleForm,
+              {
+                initialSchedules: [],
+                timezone
+              }
+            )
+          },
+          {
+            label: "Runs",
+            content: /* @__PURE__ */ jsx(AgentRuns, { agentId: agent.id })
+          }
+        ]
+      }
+    )
+  ] });
+}
+
+export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPlaneProvider, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Skeleton, Tabs, Textarea, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };