@getcatalystiq/agent-plane-ui 0.1.30 → 0.1.32

package/dist/index.cjs

@@ -2,13 +2,15 @@
 
 var chunkVZ43ATC5_cjs = require('./chunk-VZ43ATC5.cjs');
 var chunkXXF4U7WL_cjs = require('./chunk-XXF4U7WL.cjs');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var swr = require('swr');
 var ReactMarkdown = require('react-markdown');
 var cmdk = require('cmdk');
 var Popover = require('@radix-ui/react-popover');
 var remarkGfm = require('remark-gfm');
+var ToastPrimitives = require('@radix-ui/react-toast');
+var classVarianceAuthority = require('class-variance-authority');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -30,11 +32,70 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var ToastPrimitives__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitives);
 
+var ACTIVE_STATUSES = /* @__PURE__ */ new Set(["running", "pending"]);
+function useRunStream(runId, status) {
+  const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
+  const [events, setEvents] = React4.useState([]);
+  const [isStreaming, setIsStreaming] = React4.useState(false);
+  const [terminalEvent, setTerminalEvent] = React4.useState(null);
+  const [streamingText, setStreamingText] = React4.useState("");
+  const [error, setError] = React4.useState(null);
+  const abortRef = React4.useRef(null);
+  const startStream = React4.useCallback(async (id, signal) => {
+    setIsStreaming(true);
+    setError(null);
+    try {
+      const stream = await client.runs.stream(id, { signal });
+      for await (const event of stream) {
+        if (signal.aborted) break;
+        if (event.type === "text_delta") {
+          const text = event.text ?? "";
+          setStreamingText((prev) => prev + text);
+          continue;
+        }
+        if (event.type === "assistant") {
+          setStreamingText("");
+        }
+        if (event.type === "stream_detached") {
+          continue;
+        }
+        setEvents((prev) => [...prev, event]);
+        if (event.type === "result" || event.type === "error") {
+          setTerminalEvent(event);
+          setIsStreaming(false);
+          setStreamingText("");
+          return;
+        }
+      }
+      setIsStreaming(false);
+    } catch (err) {
+      if (signal.aborted) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsStreaming(false);
+    }
+  }, [client]);
+  React4.useEffect(() => {
+    if (!runId || !ACTIVE_STATUSES.has(status)) {
+      setIsStreaming(false);
+      return;
+    }
+    if (terminalEvent) return;
+    const controller = new AbortController();
+    abortRef.current = controller;
+    startStream(runId, controller.signal);
+    return () => {
+      controller.abort();
+      abortRef.current = null;
+    };
+  }, [runId, status, startStream, terminalEvent]);
+  return { events, isStreaming, terminalEvent, streamingText, error };
+}
 function Select({ className = "", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -51,7 +112,7 @@ function Select({ className = "", ...props }) {
     ] }) })
   ] });
 }
-var Textarea = React__namespace.forwardRef(
+var Textarea = React4__namespace.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
@@ -157,7 +218,7 @@ function PaginationBar({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border bg-muted/20 text-sm", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page:" }),
-      PAGE_SIZE_OPTIONS.map((ps) => /* @__PURE__ */ jsxRuntime.jsx(React__namespace.default.Fragment, { children: renderLink(
+      PAGE_SIZE_OPTIONS.map((ps) => /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.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"}`
@@ -188,7 +249,7 @@ function parsePaginationParams(pageParam, pageSizeParam, defaultPageSize = 20) {
   return { page, pageSize, offset };
 }
 function Tabs({ tabs, defaultTab = 0 }) {
-  const [active, setActive] = React.useState(defaultTab);
+  const [active, setActive] = React4.useState(defaultTab);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: tabs.map((tab, i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -230,7 +291,7 @@ function ConfirmDialog({
   ] }) });
 }
 function CopyButton({ text, className = "" }) {
-  const [copied, setCopied] = React.useState(false);
+  const [copied, setCopied] = React4.useState(false);
   async function handleCopy() {
     await navigator.clipboard.writeText(text);
     setCopied(true);
@@ -323,6 +384,102 @@ function DashboardPage({ initialData, chartComponent: ChartComponent }) {
     ChartComponent && /* @__PURE__ */ jsxRuntime.jsx(ChartComponent, { stats: daily_stats })
   ] });
 }
+var TOAST_LIMIT = 5;
+var TOAST_REMOVE_DELAY = 1e6;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+function addToRemoveQueue(toastId) {
+  if (toastTimeouts.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({ type: "REMOVE_TOAST", toastId });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+}
+function reducer(state, action) {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((t) => addToRemoveQueue(t.id));
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) {
+        return { ...state, toasts: [] };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+}
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => listener(memoryState));
+}
+function toast(props) {
+  const id = genId();
+  const update = (updateProps) => dispatch({ type: "UPDATE_TOAST", toast: { ...updateProps, id } });
+  const dismiss2 = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss2();
+      }
+    }
+  });
+  return { id, dismiss: dismiss2, update };
+}
+function dismiss(toastId) {
+  const action = toastId !== void 0 ? { type: "DISMISS_TOAST", toastId } : { type: "DISMISS_TOAST" };
+  dispatch(action);
+}
+function useToast() {
+  const [state, setState] = React4__namespace.useState(memoryState);
+  React4__namespace.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss
+  };
+}
 var SOURCES = [
   { value: "", label: "All Sources" },
   { value: "api", label: "API" },
@@ -332,11 +489,18 @@ var SOURCES = [
   { value: "a2a", label: "A2A" }
 ];
 var VALID_SOURCES = SOURCES.filter((s) => s.value).map((s) => s.value);
+var ACTIVE_STATUSES2 = /* @__PURE__ */ new Set(["running", "pending"]);
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
 function RunListPage({ initialData }) {
   const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
-  const [page, setPage] = React.useState(1);
-  const [pageSize, setPageSize] = React.useState(20);
-  const [sourceFilter, setSourceFilter] = React.useState(null);
+  const { toast: toast2 } = useToast();
+  const [page, setPage] = React4.useState(1);
+  const [pageSize, setPageSize] = React4.useState(20);
+  const [sourceFilter, setSourceFilter] = React4.useState(null);
+  const prevStatusesRef = React4.useRef(/* @__PURE__ */ new Map());
+  const [activeRunsExist, setActiveRunsExist] = React4.useState(
+    () => initialData?.data?.some((r) => ACTIVE_STATUSES2.has(r.status)) ?? false
+  );
   const cacheKey = `runs-${page}-${pageSize}-${sourceFilter || "all"}`;
   const { data, error, isLoading } = chunkVZ43ATC5_cjs.useApi(
     cacheKey,
@@ -347,14 +511,35 @@ function RunListPage({ initialData }) {
         ...sourceFilter ? { triggered_by: sourceFilter } : {}
       });
     },
-    initialData ? { fallbackData: initialData } : void 0
+    {
+      ...initialData ? { fallbackData: initialData } : {},
+      refreshInterval: activeRunsExist ? 5e3 : 0
+    }
   );
-  const handleSourceChange = React.useCallback((e) => {
+  React4.useEffect(() => {
+    if (!data?.data) return;
+    const prev = prevStatusesRef.current;
+    const next = /* @__PURE__ */ new Map();
+    for (const run of data.data) {
+      next.set(run.id, run.status);
+      const oldStatus = prev.get(run.id);
+      if (oldStatus && ACTIVE_STATUSES2.has(oldStatus) && TERMINAL_STATUSES.has(run.status)) {
+        toast2({
+          title: `Run ${run.status}`,
+          description: run.agent_name,
+          variant: run.status === "completed" ? "success" : "destructive"
+        });
+      }
+    }
+    prevStatusesRef.current = next;
+    setActiveRunsExist(data.data.some((r) => ACTIVE_STATUSES2.has(r.status)));
+  }, [data, toast2]);
+  const handleSourceChange = React4.useCallback((e) => {
     const value = e.target.value;
     setSourceFilter(VALID_SOURCES.includes(value) ? value : null);
     setPage(1);
   }, []);
-  const handlePaginationNavigate = React.useCallback((href) => {
+  const handlePaginationNavigate = React4.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);
@@ -396,7 +581,8 @@ function RunListPage({ initialData }) {
         /* @__PURE__ */ jsxRuntime.jsx(Th, { align: "right", children: "Cost" }),
         /* @__PURE__ */ jsxRuntime.jsx(Th, { align: "right", children: "Turns" }),
         /* @__PURE__ */ jsxRuntime.jsx(Th, { align: "right", children: "Duration" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Created" })
+        /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Created" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Th, {})
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
         runs.map((r) => /* @__PURE__ */ jsxRuntime.jsxs(AdminTableRow, { children: [
@@ -417,13 +603,47 @@ function RunListPage({ initialData }) {
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-right", children: r.num_turns }),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { className: "p-3 text-muted-foreground text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(LocalDate, { value: r.created_at }) })
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-muted-foreground text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(LocalDate, { value: r.created_at }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3", children: (r.status === "failed" || r.status === "cancelled" || r.status === "timed_out") && /* @__PURE__ */ jsxRuntime.jsx(RerunRowButton, { agentId: r.agent_id, prompt: r.prompt }) })
         ] }, r.id)),
-        runs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyRow, { colSpan: 9, children: "No runs found" })
+        runs.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyRow, { colSpan: 10, children: "No runs found" })
       ] })
     ] })
   ] });
 }
+function RerunRowButton({ agentId, prompt }) {
+  const [rerunning, setRerunning] = React4.useState(false);
+  const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
+  const { onNavigate, basePath } = chunkXXF4U7WL_cjs.useNavigation();
+  const { toast: toast2 } = useToast();
+  async function handleRerun(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setRerunning(true);
+    try {
+      const stream = await client.runs.create({ agent_id: agentId, prompt });
+      let newRunId = null;
+      for await (const event of stream) {
+        if (event.type === "run_started") {
+          newRunId = event.run_id;
+          break;
+        }
+      }
+      if (newRunId) {
+        onNavigate(`${basePath}/runs/${newRunId}`);
+      }
+    } catch (err) {
+      toast2({
+        title: "Failed to rerun",
+        description: err instanceof Error ? err.message : "Unknown error",
+        variant: "destructive"
+      });
+    } finally {
+      setRerunning(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { variant: "ghost", size: "sm", onClick: handleRerun, disabled: rerunning, children: rerunning ? "\u2026" : "Rerun" });
+}
 function buildConversation(events) {
   const items = [];
   const toolCallMap = /* @__PURE__ */ new Map();
@@ -529,17 +749,51 @@ function buildConversation(events) {
   }
   return items;
 }
-function TranscriptViewer({ transcript, prompt }) {
-  const conversation = React.useMemo(() => buildConversation(transcript), [transcript]);
+function TranscriptViewer({ transcript, prompt, isStreaming = false }) {
+  const conversation = React4.useMemo(() => buildConversation(transcript), [transcript]);
+  const scrollContainerRef = React4.useRef(null);
+  const sentinelRef = React4.useRef(null);
+  const userHasScrolledUpRef = React4.useRef(false);
+  const [userHasScrolledUp, setUserHasScrolledUp] = React4.useState(false);
+  const handleScroll = React4.useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+    if (atBottom) {
+      userHasScrolledUpRef.current = false;
+      setUserHasScrolledUp(false);
+    } else {
+      userHasScrolledUpRef.current = true;
+      setUserHasScrolledUp(true);
+    }
+  }, []);
+  React4.useEffect(() => {
+    if (isStreaming && !userHasScrolledUpRef.current) {
+      sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [transcript.length, isStreaming]);
   return /* @__PURE__ */ jsxRuntime.jsxs(chunkVZ43ATC5_cjs.Card, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.CardTitle, { className: "text-base", children: "Transcript" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(chunkVZ43ATC5_cjs.CardContent, { className: "space-y-3", children: [
-      prompt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-4 py-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Prompt" }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: prompt })
-      ] }),
-      transcript.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No transcript available" }) : /* @__PURE__ */ jsxRuntime.jsx(ConversationView, { items: conversation })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: scrollContainerRef,
+        onScroll: isStreaming ? handleScroll : void 0,
+        className: "space-y-3 overflow-y-auto px-6 pb-6",
+        children: [
+          prompt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-4 py-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Prompt" }),
+            /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: prompt })
+          ] }),
+          transcript.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No transcript available" }) : /* @__PURE__ */ jsxRuntime.jsx(ConversationView, { items: conversation }),
+          isStreaming && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-blue-400 animate-pulse" }),
+            "Streaming..."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: sentinelRef })
+        ]
+      }
+    ) })
   ] });
 }
 function ConversationView({ items }) {
@@ -563,7 +817,7 @@ function ConversationView({ items }) {
   }) });
 }
 function A2AIncomingItem({ item }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React4.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/30 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -589,7 +843,7 @@ function A2AIncomingItem({ item }) {
   ] });
 }
 function SystemItem({ item }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React4.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/30 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "outline", className: "text-[10px]", children: "system" }),
@@ -618,7 +872,7 @@ function SystemItem({ item }) {
   ] });
 }
 function AssistantItem({ item }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React4.useState(false);
   const preview = item.text?.split("\n")[0]?.slice(0, 120) ?? "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -637,7 +891,7 @@ function AssistantItem({ item }) {
   ] });
 }
 function ToolItem({ item }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React4.useState(false);
   const hasOutput = item.toolOutput && item.toolOutput.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -693,6 +947,7 @@ function ErrorItem({ item }) {
 }
 function RunDetailPage({ runId, initialData, initialTranscript }) {
   const { mutate } = swr.useSWRConfig();
+  const { toast: toast2 } = useToast();
   const { data: run, error, isLoading } = chunkVZ43ATC5_cjs.useApi(
     `run-${runId}`,
     (client) => client.runs.get(runId),
@@ -703,6 +958,20 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
     (client) => client.runs.transcriptArray(runId),
     initialTranscript ? { fallbackData: initialTranscript } : void 0
   );
+  const isActive = run?.status === "running" || run?.status === "pending";
+  const { events, isStreaming, terminalEvent, streamingText } = useRunStream(
+    runId,
+    run?.status ?? ""
+  );
+  React4.useEffect(() => {
+    if (!terminalEvent) return;
+    toast2({
+      title: terminalEvent.type === "result" ? "Run completed" : "Run failed",
+      variant: terminalEvent.type === "result" ? "success" : "destructive"
+    });
+    mutate(`run-${runId}`);
+    mutate(`transcript-${runId}`);
+  }, [terminalEvent, toast2, mutate, runId]);
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-destructive", children: [
       "Failed to load run: ",
@@ -717,6 +986,7 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
     (run.status === "running" || run.status === "pending") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(CancelRunButton, { runId: run.id, onCancelled: () => mutate(`run-${runId}`) }) }),
+    (run.status === "failed" || run.status === "cancelled" || run.status === "timed_out") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(RerunButton, { agentId: run.agent_id, prompt: run.prompt }) }),
     run.triggered_by === "a2a" && run.requested_by_key_name && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "outline", className: "text-[10px]", children: "A2A" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -735,16 +1005,26 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Cost", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
         "$",
-        run.cost_usd != null ? run.cost_usd.toFixed(4) : "\u2014"
+        (() => {
+          const cost = terminalEvent?.cost_usd ?? run.cost_usd;
+          return cost != null ? Number(cost).toFixed(4) : "\u2014";
+        })()
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Turns", children: run.num_turns }),
-      /* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Duration", children: run.duration_ms > 0 ? `${(run.duration_ms / 1e3).toFixed(1)}s` : "\u2014" }),
+      /* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Turns", children: terminalEvent?.num_turns ?? run.num_turns }),
+      /* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Duration", children: (() => {
+        const ms = terminalEvent?.duration_ms ?? run.duration_ms;
+        return ms > 0 ? `${(ms / 1e3).toFixed(1)}s` : "\u2014";
+      })() }),
       /* @__PURE__ */ jsxRuntime.jsxs(MetricCard, { label: "Tokens", children: [
-        (run.total_input_tokens + run.total_output_tokens).toLocaleString(),
+        (() => {
+          const inTok = terminalEvent?.total_input_tokens ?? run.total_input_tokens;
+          const outTok = terminalEvent?.total_output_tokens ?? run.total_output_tokens;
+          return (inTok + outTok).toLocaleString();
+        })(),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-0.5 font-normal", children: [
-          run.total_input_tokens.toLocaleString(),
+          (terminalEvent?.total_input_tokens ?? run.total_input_tokens).toLocaleString(),
           " in / ",
-          run.total_output_tokens.toLocaleString(),
+          (terminalEvent?.total_output_tokens ?? run.total_output_tokens).toLocaleString(),
           " out"
         ] })
       ] })
@@ -756,7 +1036,18 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
         run.error_messages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap text-sm text-destructive font-mono bg-destructive/10 rounded-md p-3", children: msg }, i))
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(TranscriptViewer, { transcript: transcript || [], prompt: run.prompt }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TranscriptViewer,
+      {
+        transcript: isActive && isStreaming ? events : transcript || [],
+        prompt: run.prompt,
+        isStreaming: isActive && isStreaming
+      }
+    ),
+    isActive && streamingText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-muted/30 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: "whitespace-pre-wrap text-sm font-mono", children: [
+      streamingText,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-2 h-4 ml-0.5 bg-foreground/70 animate-pulse align-text-bottom" })
+    ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold", children: "Metadata" }),
@@ -781,9 +1072,40 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
     ] }) })
   ] });
 }
+function RerunButton({ agentId, prompt }) {
+  const [rerunning, setRerunning] = React4.useState(false);
+  const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
+  const { onNavigate, basePath } = chunkXXF4U7WL_cjs.useNavigation();
+  const { toast: toast2 } = useToast();
+  async function handleRerun() {
+    setRerunning(true);
+    try {
+      const stream = await client.runs.create({ agent_id: agentId, prompt });
+      let newRunId = null;
+      for await (const event of stream) {
+        if (event.type === "run_started") {
+          newRunId = event.run_id;
+          break;
+        }
+      }
+      if (newRunId) {
+        onNavigate(`${basePath}/runs/${newRunId}`);
+      }
+    } catch (err) {
+      toast2({
+        title: "Failed to rerun",
+        description: err instanceof Error ? err.message : "Unknown error",
+        variant: "destructive"
+      });
+    } finally {
+      setRerunning(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { variant: "outline", size: "sm", onClick: handleRerun, disabled: rerunning, children: rerunning ? "Rerunning\u2026" : "\u21BB Rerun" });
+}
 function CancelRunButton({ runId, onCancelled }) {
-  const [open, setOpen] = React.useState(false);
-  const [cancelling, setCancelling] = React.useState(false);
+  const [open, setOpen] = React4.useState(false);
+  const [cancelling, setCancelling] = React4.useState(false);
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
   async function handleConfirm() {
     setCancelling(true);
@@ -836,17 +1158,17 @@ function McpServerListPage({ initialData }) {
     (c) => c.customConnectors.listServers(),
     initialData ? { fallbackData: initialData } : void 0
   );
-  const [showCreate, setShowCreate] = React.useState(false);
-  const [creating, setCreating] = React.useState(false);
-  const [createForm, setCreateForm] = React.useState(emptyForm);
-  const [createError, setCreateError] = React.useState("");
-  const [editTarget, setEditTarget] = React.useState(null);
-  const [editing, setEditing] = React.useState(false);
-  const [editForm, setEditForm] = React.useState({ name: "", description: "" });
-  const [editError, setEditError] = React.useState("");
-  const [deleteTarget, setDeleteTarget] = React.useState(null);
-  const [deleting, setDeleting] = React.useState(false);
-  const [deleteError, setDeleteError] = React.useState("");
+  const [showCreate, setShowCreate] = React4.useState(false);
+  const [creating, setCreating] = React4.useState(false);
+  const [createForm, setCreateForm] = React4.useState(emptyForm);
+  const [createError, setCreateError] = React4.useState("");
+  const [editTarget, setEditTarget] = React4.useState(null);
+  const [editing, setEditing] = React4.useState(false);
+  const [editForm, setEditForm] = React4.useState({ name: "", description: "" });
+  const [editError, setEditError] = React4.useState("");
+  const [deleteTarget, setDeleteTarget] = React4.useState(null);
+  const [deleting, setDeleting] = React4.useState(false);
+  const [deleteError, setDeleteError] = React4.useState("");
   async function handleCreate() {
     setCreating(true);
     setCreateError("");
@@ -1029,13 +1351,13 @@ function PluginMarketplaceListPage({ initialData }) {
     (c) => c.pluginMarketplaces.list(),
     initialData ? { fallbackData: initialData } : void 0
   );
-  const [showAdd, setShowAdd] = React.useState(false);
-  const [adding, setAdding] = React.useState(false);
-  const [addError, setAddError] = React.useState("");
-  const [newMarketplace, setNewMarketplace] = React.useState({ name: "", github_repo: "" });
-  const [deleteTarget, setDeleteTarget] = React.useState(null);
-  const [deleting, setDeleting] = React.useState(false);
-  const [deleteError, setDeleteError] = React.useState("");
+  const [showAdd, setShowAdd] = React4.useState(false);
+  const [adding, setAdding] = React4.useState(false);
+  const [addError, setAddError] = React4.useState("");
+  const [newMarketplace, setNewMarketplace] = React4.useState({ name: "", github_repo: "" });
+  const [deleteTarget, setDeleteTarget] = React4.useState(null);
+  const [deleting, setDeleting] = React4.useState(false);
+  const [deleteError, setDeleteError] = React4.useState("");
   function resetAddForm() {
     setNewMarketplace({ name: "", github_repo: "" });
     setAddError("");
@@ -1197,8 +1519,8 @@ function PluginMarketplaceDetailPage({ marketplaceId, initialData, initialPlugin
     (c) => c.pluginMarketplaces.listPlugins(marketplaceId),
     initialPlugins ? { fallbackData: initialPlugins } : void 0
   );
-  const [tokenInput, setTokenInput] = React.useState("");
-  const [savingToken, setSavingToken] = React.useState(false);
+  const [tokenInput, setTokenInput] = React4.useState("");
+  const [savingToken, setSavingToken] = React4.useState(false);
   async function handleSaveToken() {
     setSavingToken(true);
     try {
@@ -1395,15 +1717,15 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
     `marketplace-${marketplaceId}-plugin-${pluginName}`,
     (c) => c.pluginMarketplaces.getPlugin(marketplaceId, pluginName)
   );
-  const [editorState, setEditorState] = React.useState(null);
-  const [pluginFiles, setPluginFiles] = React.useState(null);
-  const [filesLoading, setFilesLoading] = React.useState(false);
-  const [filesError, setFilesError] = React.useState("");
-  const [editedContent, setEditedContent] = React.useState(/* @__PURE__ */ new Map());
-  const [saving, setSaving] = React.useState(false);
-  const [saveError, setSaveError] = React.useState("");
-  const [saveSuccess, setSaveSuccess] = React.useState("");
-  const fetchFiles = React.useCallback(async () => {
+  const [editorState, setEditorState] = React4.useState(null);
+  const [pluginFiles, setPluginFiles] = React4.useState(null);
+  const [filesLoading, setFilesLoading] = React4.useState(false);
+  const [filesError, setFilesError] = React4.useState("");
+  const [editedContent, setEditedContent] = React4.useState(/* @__PURE__ */ new Map());
+  const [saving, setSaving] = React4.useState(false);
+  const [saveError, setSaveError] = React4.useState("");
+  const [saveSuccess, setSaveSuccess] = React4.useState("");
+  const fetchFiles = React4.useCallback(async () => {
     if (pluginFiles) return pluginFiles;
     setFilesLoading(true);
     setFilesError("");
@@ -1418,7 +1740,7 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
       setFilesLoading(false);
     }
   }, [client, marketplaceId, pluginName, pluginFiles]);
-  const handleSelectAgent = React.useCallback(async (filename) => {
+  const handleSelectAgent = React4.useCallback(async (filename) => {
     if (editorState?.type === "agent" && editorState.identifier === filename) {
       setEditorState(null);
       return;
@@ -1430,7 +1752,7 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
       setEditorState({ type: "agent", identifier: filename });
     }
   }, [editorState, fetchFiles]);
-  const handleSelectSkill = React.useCallback(async (skill) => {
+  const handleSelectSkill = React4.useCallback(async (skill) => {
     if (editorState?.type === "skill" && editorState.identifier === skill) {
       setEditorState(null);
       return;
@@ -1442,7 +1764,7 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
       setEditorState({ type: "skill", identifier: skill });
     }
   }, [editorState, fetchFiles]);
-  const handleSelectConnector = React.useCallback(async () => {
+  const handleSelectConnector = React4.useCallback(async () => {
     if (editorState?.type === "connector") {
       setEditorState(null);
       return;
@@ -1683,12 +2005,12 @@ function SettingsPage({ initialData, hideDangerZone }) {
 }
 function CompanyForm({ tenant, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const fileInputRef = React.useRef(null);
-  const [name, setName] = React.useState(tenant.name);
-  const [budget, setBudget] = React.useState(tenant.monthly_budget_usd.toString());
-  const [timezone, setTimezone] = React.useState(tenant.timezone);
-  const [logoUrl, setLogoUrl] = React.useState(tenant.logo_url ?? "");
-  const [saving, setSaving] = React.useState(false);
+  const fileInputRef = React4.useRef(null);
+  const [name, setName] = React4.useState(tenant.name);
+  const [budget, setBudget] = React4.useState(tenant.monthly_budget_usd.toString());
+  const [timezone, setTimezone] = React4.useState(tenant.timezone);
+  const [logoUrl, setLogoUrl] = React4.useState(tenant.logo_url ?? "");
+  const [saving, setSaving] = React4.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);
@@ -1762,13 +2084,13 @@ function CompanyForm({ tenant, onSaved }) {
 }
 function ApiKeysSection({ initialKeys, onChanged }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [creating, setCreating] = React.useState(false);
-  const [newKeyName, setNewKeyName] = React.useState("default");
-  const [showCreate, setShowCreate] = React.useState(false);
-  const [rawKey, setRawKey] = React.useState(null);
-  const [revokeTarget, setRevokeTarget] = React.useState(null);
-  const [revoking, setRevoking] = React.useState(false);
-  const [revokeError, setRevokeError] = React.useState("");
+  const [creating, setCreating] = React4.useState(false);
+  const [newKeyName, setNewKeyName] = React4.useState("default");
+  const [showCreate, setShowCreate] = React4.useState(false);
+  const [rawKey, setRawKey] = React4.useState(null);
+  const [revokeTarget, setRevokeTarget] = React4.useState(null);
+  const [revoking, setRevoking] = React4.useState(false);
+  const [revokeError, setRevokeError] = React4.useState("");
   async function handleCreate() {
     setCreating(true);
     try {
@@ -1889,9 +2211,9 @@ function ApiKeysSection({ initialKeys, onChanged }) {
 function DangerZone({ tenantId, tenantName }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
   const { onNavigate, basePath } = chunkXXF4U7WL_cjs.useNavigation();
-  const [open, setOpen] = React.useState(false);
-  const [deleting, setDeleting] = React.useState(false);
-  const [error, setError] = React.useState("");
+  const [open, setOpen] = React4.useState(false);
+  const [deleting, setDeleting] = React4.useState(false);
+  const [error, setError] = React4.useState("");
   async function handleDelete() {
     setDeleting(true);
     setError("");
@@ -1972,14 +2294,14 @@ var TAG_TITLES = {
 };
 function ModelSelector({ value, onChange, disabled }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [open, setOpen] = React.useState(false);
-  const [models, setModels] = React.useState(null);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState(false);
-  const [search, setSearch] = React.useState("");
-  const [providerFilter, setProviderFilter] = React.useState("all");
-  const hasFetchedRef = React.useRef(false);
-  React.useEffect(() => {
+  const [open, setOpen] = React4.useState(false);
+  const [models, setModels] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(false);
+  const [search, setSearch] = React4.useState("");
+  const [providerFilter, setProviderFilter] = React4.useState("all");
+  const hasFetchedRef = React4.useRef(false);
+  React4.useEffect(() => {
     if (!open || hasFetchedRef.current) return;
     hasFetchedRef.current = true;
     let cancelled = false;
@@ -2000,12 +2322,12 @@ function ModelSelector({ value, onChange, disabled }) {
       cancelled = true;
     };
   }, [open, client]);
-  const providers = React.useMemo(() => {
+  const providers = React4.useMemo(() => {
     if (!models) return [];
     const set = new Set(models.map((m) => m.provider));
     return Array.from(set).sort();
   }, [models]);
-  const grouped = React.useMemo(() => {
+  const grouped = React4.useMemo(() => {
     if (!models) return {};
     let filtered = models;
     if (providerFilter !== "all") {
@@ -2021,7 +2343,7 @@ function ModelSelector({ value, onChange, disabled }) {
   }, [models, providerFilter]);
   const selectedModel = models?.find((m) => m.id === value);
   const displayName = selectedModel?.name || value || "Select model...";
-  const searchMatchesAny = React.useMemo(() => {
+  const searchMatchesAny = React4.useMemo(() => {
     if (!search || !models) return true;
     const lower = search.toLowerCase();
     return models.some(
@@ -2176,10 +2498,10 @@ function ModelSelector({ value, onChange, disabled }) {
 }
 function AddAgentDialog({ onCreated }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [open, setOpen] = React.useState(false);
-  const [saving, setSaving] = React.useState(false);
-  const [error, setError] = React.useState("");
-  const [form, setForm] = React.useState({
+  const [open, setOpen] = React4.useState(false);
+  const [saving, setSaving] = React4.useState(false);
+  const [error, setError] = React4.useState("");
+  const [form, setForm] = React4.useState({
     name: "",
     description: "",
     model: "claude-sonnet-4-6",
@@ -2348,9 +2670,9 @@ function AddAgentDialog({ onCreated }) {
 }
 function DeleteAgentButton({ agentId, agentName, onDeleted }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [open, setOpen] = React.useState(false);
-  const [deleting, setDeleting] = React.useState(false);
-  const [error, setError] = React.useState("");
+  const [open, setOpen] = React4.useState(false);
+  const [deleting, setDeleting] = React4.useState(false);
+  const [error, setError] = React4.useState("");
   async function handleDelete() {
     setDeleting(true);
     setError("");
@@ -2403,7 +2725,7 @@ function AgentListPage() {
     (client) => client.agents.list()
   );
   const agents = data?.data ?? [];
-  const invalidate = React.useCallback(() => {
+  const invalidate = React4.useCallback(() => {
     mutate("agents");
   }, [mutate]);
   if (isLoading) {
@@ -2450,17 +2772,17 @@ function AgentListPage() {
 }
 function AgentEditForm({ agent, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [name, setName] = React.useState(agent.name);
-  const [description, setDescription] = React.useState(agent.description ?? "");
-  const [model, setModel] = React.useState(agent.model);
-  const [runner, setRunner] = React.useState(agent.runner ?? "");
-  const [permissionMode, setPermissionMode] = React.useState(agent.permission_mode);
-  const [maxTurns, setMaxTurns] = React.useState(agent.max_turns.toString());
-  const [maxBudget, setMaxBudget] = React.useState(agent.max_budget_usd.toString());
-  const [maxRuntime, setMaxRuntime] = React.useState(Math.floor(agent.max_runtime_seconds / 60).toString());
-  const [saving, setSaving] = React.useState(false);
+  const [name, setName] = React4.useState(agent.name);
+  const [description, setDescription] = React4.useState(agent.description ?? "");
+  const [model, setModel] = React4.useState(agent.model);
+  const [runner, setRunner] = React4.useState(agent.runner ?? "");
+  const [permissionMode, setPermissionMode] = React4.useState(agent.permission_mode);
+  const [maxTurns, setMaxTurns] = React4.useState(agent.max_turns.toString());
+  const [maxBudget, setMaxBudget] = React4.useState(agent.max_budget_usd.toString());
+  const [maxRuntime, setMaxRuntime] = React4.useState(Math.floor(agent.max_runtime_seconds / 60).toString());
+  const [saving, setSaving] = React4.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] = React.useState("");
+  const [error, setError] = React4.useState("");
   async function handleSave() {
     setSaving(true);
     setError("");
@@ -2540,17 +2862,17 @@ function AgentEditForm({ agent, onSaved }) {
 }
 function ToolkitMultiselect({ value, onChange }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [open, setOpen] = React.useState(false);
-  const [search, setSearch] = React.useState("");
-  const [toolkits, setToolkits] = React.useState([]);
-  const [loading, setLoading] = React.useState(true);
-  const containerRef = React.useRef(null);
-  const searchRef = React.useRef(null);
-  React.useEffect(() => {
+  const [open, setOpen] = React4.useState(false);
+  const [search, setSearch] = React4.useState("");
+  const [toolkits, setToolkits] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  const containerRef = React4.useRef(null);
+  const searchRef = React4.useRef(null);
+  React4.useEffect(() => {
     client.composio.toolkits().then((data) => setToolkits(data)).catch(() => {
     }).finally(() => setLoading(false));
   }, [client]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     function handleClick(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -2560,7 +2882,7 @@ function ToolkitMultiselect({ value, onChange }) {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     searchRef.current?.focus();
   }, []);
   const filtered = toolkits.filter((t) => {
@@ -2666,12 +2988,12 @@ function ToolsModal({
   onSave
 }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [tools, setTools] = React.useState([]);
-  const [loading, setLoading] = React.useState(false);
-  const [search, setSearch] = React.useState("");
-  const [selected, setSelected] = React.useState(/* @__PURE__ */ new Set());
-  const [saving, setSaving] = React.useState(false);
-  const fetchTools = React.useCallback(async () => {
+  const [tools, setTools] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [search, setSearch] = React4.useState("");
+  const [selected, setSelected] = React4.useState(/* @__PURE__ */ new Set());
+  const [saving, setSaving] = React4.useState(false);
+  const fetchTools = React4.useCallback(async () => {
     setLoading(true);
     try {
       const data = await client.composio.tools(toolkit);
@@ -2680,7 +3002,7 @@ function ToolsModal({
       setLoading(false);
     }
   }, [toolkit, client]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (open) {
       fetchTools();
       setSearch("");
@@ -2771,13 +3093,13 @@ function McpToolsModal({
   onSave
 }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [tools, setTools] = React.useState([]);
-  const [loading, setLoading] = React.useState(false);
-  const [search, setSearch] = React.useState("");
-  const [selected, setSelected] = React.useState(/* @__PURE__ */ new Set());
-  const [saving, setSaving] = React.useState(false);
-  const [error, setError] = React.useState("");
-  const fetchTools = React.useCallback(async () => {
+  const [tools, setTools] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [search, setSearch] = React4.useState("");
+  const [selected, setSelected] = React4.useState(/* @__PURE__ */ new Set());
+  const [saving, setSaving] = React4.useState(false);
+  const [error, setError] = React4.useState("");
+  const fetchTools = React4.useCallback(async () => {
     setLoading(true);
     setError("");
     try {
@@ -2789,7 +3111,7 @@ function McpToolsModal({
       setLoading(false);
     }
   }, [agentId, mcpServerId, client]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (open) {
       fetchTools();
       setSearch("");
@@ -2869,30 +3191,30 @@ function McpToolsModal({
 }
 function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAllowedTools: initialAllowedTools, onChanged }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [localToolkits, setLocalToolkits] = React.useState(initialToolkits);
-  const [connectors, setConnectors] = React.useState([]);
-  const [loading, setLoading] = React.useState(true);
-  const [showAdd, setShowAdd] = React.useState(false);
-  const [pendingToolkits, setPendingToolkits] = React.useState(initialToolkits);
-  const [applyingToolkits, setApplyingToolkits] = React.useState(false);
-  const [confirmDelete, setConfirmDelete] = React.useState(null);
-  const [deleting, setDeleting] = React.useState(false);
-  const [apiKeys, setApiKeys] = React.useState({});
-  const [saving, setSaving] = React.useState({});
-  const [errors, setErrors] = React.useState({});
-  const [allowedTools, setAllowedTools] = React.useState(initialAllowedTools);
-  const [toolCounts, setToolCounts] = React.useState({});
-  const [toolsModalToolkit, setToolsModalToolkit] = React.useState(null);
-  const mcpOauthHandlerRef = React.useRef(null);
-  const composioOauthHandlerRef = React.useRef(null);
-  const [mcpConnections, setMcpConnections] = React.useState([]);
-  const [mcpServers, setMcpServers] = React.useState([]);
-  const [mcpLoading, setMcpLoading] = React.useState(true);
-  const [mcpConnecting, setMcpConnecting] = React.useState(null);
-  const [confirmMcpDisconnect, setConfirmMcpDisconnect] = React.useState(null);
-  const [mcpDisconnecting, setMcpDisconnecting] = React.useState(false);
-  const [mcpToolsModal, setMcpToolsModal] = React.useState(null);
-  const loadComposio = React.useCallback(async () => {
+  const [localToolkits, setLocalToolkits] = React4.useState(initialToolkits);
+  const [connectors, setConnectors] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(true);
+  const [showAdd, setShowAdd] = React4.useState(false);
+  const [pendingToolkits, setPendingToolkits] = React4.useState(initialToolkits);
+  const [applyingToolkits, setApplyingToolkits] = React4.useState(false);
+  const [confirmDelete, setConfirmDelete] = React4.useState(null);
+  const [deleting, setDeleting] = React4.useState(false);
+  const [apiKeys, setApiKeys] = React4.useState({});
+  const [saving, setSaving] = React4.useState({});
+  const [errors, setErrors] = React4.useState({});
+  const [allowedTools, setAllowedTools] = React4.useState(initialAllowedTools);
+  const [toolCounts, setToolCounts] = React4.useState({});
+  const [toolsModalToolkit, setToolsModalToolkit] = React4.useState(null);
+  const mcpOauthHandlerRef = React4.useRef(null);
+  const composioOauthHandlerRef = React4.useRef(null);
+  const [mcpConnections, setMcpConnections] = React4.useState([]);
+  const [mcpServers, setMcpServers] = React4.useState([]);
+  const [mcpLoading, setMcpLoading] = React4.useState(true);
+  const [mcpConnecting, setMcpConnecting] = React4.useState(null);
+  const [confirmMcpDisconnect, setConfirmMcpDisconnect] = React4.useState(null);
+  const [mcpDisconnecting, setMcpDisconnecting] = React4.useState(false);
+  const [mcpToolsModal, setMcpToolsModal] = React4.useState(null);
+  const loadComposio = React4.useCallback(async () => {
     setLoading(true);
     try {
       const data = await client.connectors.list(agentId);
@@ -2901,7 +3223,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
       setLoading(false);
     }
   }, [agentId, client]);
-  const loadMcp = React.useCallback(async () => {
+  const loadMcp = React4.useCallback(async () => {
     setMcpLoading(true);
     try {
       const data = await client.customConnectors.list(agentId);
@@ -2911,13 +3233,13 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
     }
   }, [agentId, client]);
   const toolkitsKey = localToolkits.join(",");
-  React.useEffect(() => {
+  React4.useEffect(() => {
     loadComposio();
   }, [loadComposio, toolkitsKey]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     loadMcp();
   }, [loadMcp]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (mcpOauthHandlerRef.current) {
         window.removeEventListener("message", mcpOauthHandlerRef.current);
@@ -2929,7 +3251,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
       }
     };
   }, []);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (localToolkits.length === 0) return;
     let cancelled = false;
     for (const slug of localToolkits) {
@@ -3292,7 +3614,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
     )
   ] });
 }
-var CodeEditor = React.lazy(() => import('./code-editor-ZYP54YUT.cjs'));
+var CodeEditor = React4.lazy(() => import('./code-editor-ZYP54YUT.cjs'));
 function buildTree(files) {
   const rootFiles = [];
   const dirMap = /* @__PURE__ */ new Map();
@@ -3365,49 +3687,49 @@ function FileTreeEditor2({
   fixedStructure = false,
   headerActions
 }) {
-  const [files, setFiles] = React.useState(initialFiles);
-  const [selectedPath, setSelectedPath] = React.useState(
+  const [files, setFiles] = React4.useState(initialFiles);
+  const [selectedPath, setSelectedPath] = React4.useState(
     initialFiles.length > 0 ? initialFiles[0].path : null
   );
-  const [saving, setSaving] = React.useState(false);
-  const [expanded, setExpanded] = React.useState(() => {
+  const [saving, setSaving] = React4.useState(false);
+  const [expanded, setExpanded] = React4.useState(() => {
     const { rootDirs } = buildTree(initialFiles);
     return collectAllDirPaths(rootDirs);
   });
-  const [showAddFolder, setShowAddFolder] = React.useState(false);
-  const [newFolderName, setNewFolderName] = React.useState("");
-  const [addingFileInDir, setAddingFileInDir] = React.useState(null);
-  const [newFileName, setNewFileName] = React.useState("");
-  const [savedSnapshot, setSavedSnapshot] = React.useState(() => JSON.stringify(initialFiles));
-  React.useEffect(() => {
+  const [showAddFolder, setShowAddFolder] = React4.useState(false);
+  const [newFolderName, setNewFolderName] = React4.useState("");
+  const [addingFileInDir, setAddingFileInDir] = React4.useState(null);
+  const [newFileName, setNewFileName] = React4.useState("");
+  const [savedSnapshot, setSavedSnapshot] = React4.useState(() => JSON.stringify(initialFiles));
+  React4.useEffect(() => {
     const snap = JSON.stringify(initialFiles);
     setSavedSnapshot(snap);
     setFiles(initialFiles);
     const { rootDirs } = buildTree(initialFiles);
     setExpanded(collectAllDirPaths(rootDirs));
   }, [initialFiles]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (savedVersion !== void 0 && savedVersion > 0) {
       setSavedSnapshot(JSON.stringify(files));
     }
   }, [savedVersion]);
-  const onChangeRef = React.useRef(onChange);
+  const onChangeRef = React4.useRef(onChange);
   onChangeRef.current = onChange;
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (onChangeRef.current && JSON.stringify(files) !== savedSnapshot) {
       onChangeRef.current(files);
     }
   }, [files, savedSnapshot]);
-  const isDirty = React.useMemo(
+  const isDirty = React4.useMemo(
     () => JSON.stringify(files) !== savedSnapshot,
     [files, savedSnapshot]
   );
-  const tree = React.useMemo(() => buildTree(files), [files]);
-  const activeFile = React.useMemo(
+  const tree = React4.useMemo(() => buildTree(files), [files]);
+  const activeFile = React4.useMemo(
     () => selectedPath ? files.find((f) => f.path === selectedPath) ?? null : null,
     [files, selectedPath]
   );
-  const handleEditorChange = React.useCallback((value) => {
+  const handleEditorChange = React4.useCallback((value) => {
     if (readOnly || !selectedPath) return;
     setFiles((prev) => prev.map((f) => f.path === selectedPath ? { ...f, content: value } : f));
   }, [readOnly, selectedPath]);
@@ -3619,7 +3941,7 @@ function FileTreeEditor2({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 border border-border rounded-md overflow-hidden", children: activeFile ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5 bg-muted/50 border-b border-border text-xs text-muted-foreground", children: activeFile.path }),
-        /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 animate-pulse bg-muted/50" }), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(React4.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 animate-pulse bg-muted/50" }), children: /* @__PURE__ */ jsxRuntime.jsx(
           CodeEditor,
           {
             value: activeFile.content,
@@ -3649,19 +3971,19 @@ function TabButton({ label, active, onClick }) {
 }
 function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [tab, setTab] = React.useState("all");
-  const [entries, setEntries] = React.useState([]);
-  const [loading, setLoading] = React.useState(false);
-  const [error, setError] = React.useState("");
-  const [search, setSearch] = React.useState("");
-  const [selected, setSelected] = React.useState(null);
-  const [preview, setPreview] = React.useState("");
-  const [previewLoading, setPreviewLoading] = React.useState(false);
-  const [importing, setImporting] = React.useState(false);
-  const [importError, setImportError] = React.useState("");
-  const [url, setUrl] = React.useState("");
-  const [urlImporting, setUrlImporting] = React.useState(false);
-  React.useEffect(() => {
+  const [tab, setTab] = React4.useState("all");
+  const [entries, setEntries] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState("");
+  const [search, setSearch] = React4.useState("");
+  const [selected, setSelected] = React4.useState(null);
+  const [preview, setPreview] = React4.useState("");
+  const [previewLoading, setPreviewLoading] = React4.useState(false);
+  const [importing, setImporting] = React4.useState(false);
+  const [importError, setImportError] = React4.useState("");
+  const [url, setUrl] = React4.useState("");
+  const [urlImporting, setUrlImporting] = React4.useState(false);
+  React4.useEffect(() => {
     if (!open) return;
     setLoading(true);
     setError("");
@@ -3669,7 +3991,7 @@ function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders })
     setPreview("");
     client.skillsDirectory.list(tab).then((data) => setEntries(data)).catch((err) => setError(err instanceof Error ? err.message : "Failed to load skills")).finally(() => setLoading(false));
   }, [tab, open, client]);
-  const filtered = React.useMemo(() => {
+  const filtered = React4.useMemo(() => {
     if (!search.trim()) return entries;
     const q = search.toLowerCase();
     return entries.filter(
@@ -3805,10 +4127,10 @@ function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders })
 }
 function AgentSkillManager({ agentId, initialSkills, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [importOpen, setImportOpen] = React.useState(false);
-  const [extraSkills, setExtraSkills] = React.useState([]);
-  const allSkills = React.useMemo(() => [...initialSkills, ...extraSkills], [initialSkills, extraSkills]);
-  const initialFiles = React.useMemo(
+  const [importOpen, setImportOpen] = React4.useState(false);
+  const [extraSkills, setExtraSkills] = React4.useState([]);
+  const allSkills = React4.useMemo(() => [...initialSkills, ...extraSkills], [initialSkills, extraSkills]);
+  const initialFiles = React4.useMemo(
     () => allSkills.flatMap(
       (s) => s.files.map((f) => ({
         path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
@@ -3817,11 +4139,11 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
     ),
     [allSkills]
   );
-  const existingFolders = React.useMemo(() => allSkills.map((s) => s.folder), [allSkills]);
-  const handleImported = React.useCallback((skill) => {
+  const existingFolders = React4.useMemo(() => allSkills.map((s) => s.folder), [allSkills]);
+  const handleImported = React4.useCallback((skill) => {
     setExtraSkills((prev) => [...prev, skill]);
   }, []);
-  const handleSave = React.useCallback(async (files) => {
+  const handleSave = React4.useCallback(async (files) => {
     const folderMap = /* @__PURE__ */ new Map();
     for (const file of files) {
       const slashIdx = file.path.lastIndexOf("/");
@@ -3871,24 +4193,24 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
 }
 function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [plugins, setPlugins] = React.useState(initialPlugins);
-  const [saving, setSaving] = React.useState(false);
-  const [dialogOpen, setDialogOpen] = React.useState(false);
-  const [marketplaces, setMarketplaces] = React.useState([]);
-  const [selectedMarketplace, setSelectedMarketplace] = React.useState(null);
-  const [availablePlugins, setAvailablePlugins] = React.useState([]);
-  const [loadingPlugins, setLoadingPlugins] = React.useState(false);
-  const [marketplaceNames, setMarketplaceNames] = React.useState({});
-  const savedSnapshot = React.useRef(JSON.stringify(initialPlugins));
-  React.useEffect(() => {
+  const [plugins, setPlugins] = React4.useState(initialPlugins);
+  const [saving, setSaving] = React4.useState(false);
+  const [dialogOpen, setDialogOpen] = React4.useState(false);
+  const [marketplaces, setMarketplaces] = React4.useState([]);
+  const [selectedMarketplace, setSelectedMarketplace] = React4.useState(null);
+  const [availablePlugins, setAvailablePlugins] = React4.useState([]);
+  const [loadingPlugins, setLoadingPlugins] = React4.useState(false);
+  const [marketplaceNames, setMarketplaceNames] = React4.useState({});
+  const savedSnapshot = React4.useRef(JSON.stringify(initialPlugins));
+  React4.useEffect(() => {
     savedSnapshot.current = JSON.stringify(initialPlugins);
     setPlugins(initialPlugins);
   }, [initialPlugins]);
-  const isDirty = React.useMemo(
+  const isDirty = React4.useMemo(
     () => JSON.stringify(plugins) !== savedSnapshot.current,
     [plugins]
   );
-  React.useEffect(() => {
+  React4.useEffect(() => {
     client.pluginMarketplaces.list().then((data) => {
       setMarketplaces(data);
       const names = {};
@@ -3897,7 +4219,7 @@ function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
     }).catch(() => {
     });
   }, [client]);
-  const loadPluginsForMarketplace = React.useCallback(async (marketplaceId) => {
+  const loadPluginsForMarketplace = React4.useCallback(async (marketplaceId) => {
     setSelectedMarketplace(marketplaceId);
     setLoadingPlugins(true);
     setAvailablePlugins([]);
@@ -4085,15 +4407,15 @@ function AgentA2aInfo({
   onChanged
 }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
-  const [enabled, setEnabled] = React.useState(initialEnabled);
-  const [toggling, setToggling] = React.useState(false);
-  const [detailsOpen, setDetailsOpen] = React.useState(false);
-  const [cardPreview, setCardPreview] = React.useState(null);
-  const [loading, setLoading] = React.useState(false);
-  const [tags, setTags] = React.useState(initialTags);
-  const [tagInput, setTagInput] = React.useState("");
-  const [savingTags, setSavingTags] = React.useState(false);
-  const inputRef = React.useRef(null);
+  const [enabled, setEnabled] = React4.useState(initialEnabled);
+  const [toggling, setToggling] = React4.useState(false);
+  const [detailsOpen, setDetailsOpen] = React4.useState(false);
+  const [cardPreview, setCardPreview] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(false);
+  const [tags, setTags] = React4.useState(initialTags);
+  const [tagInput, setTagInput] = React4.useState("");
+  const [savingTags, setSavingTags] = React4.useState(false);
+  const inputRef = React4.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`;
@@ -4263,7 +4585,7 @@ function AgentA2aInfo({
     ] })
   ] });
 }
-var AgentIdentityTab = React.lazy(() => import('./agent-identity-tab-YGMVWOWT.cjs').then((m) => ({ default: m.AgentIdentityTab })));
+var AgentIdentityTab = React4.lazy(() => import('./agent-identity-tab-YGMVWOWT.cjs').then((m) => ({ default: m.AgentIdentityTab })));
 function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adminApiKey }) {
   const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
   const { mutate } = swr.useSWRConfig();
@@ -4272,10 +4594,10 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
     cacheKey,
     (client) => client.agents.get(agentId)
   );
-  const invalidate = React.useCallback(() => {
+  const invalidate = React4.useCallback(() => {
     mutate(cacheKey);
   }, [mutate, cacheKey]);
-  const adminFetch = React.useCallback(async (path, options) => {
+  const adminFetch = React4.useCallback(async (path, options) => {
     if (!adminApiBaseUrl) throw new Error("Admin API not configured");
     const res = await fetch(`${adminApiBaseUrl}${path}`, {
       ...options,
@@ -4291,7 +4613,7 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
     }
     return res.json();
   }, [adminApiBaseUrl, adminApiKey]);
-  const soulCallbacks = React.useMemo(() => {
+  const soulCallbacks = React4.useMemo(() => {
     if (!adminApiBaseUrl) return {};
     return {
       onGenerateSoul: async () => {
@@ -4378,7 +4700,7 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
           },
           {
             label: "Identity",
-            content: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.Skeleton, { className: "h-64 w-full" }), children: /* @__PURE__ */ jsxRuntime.jsx(AgentIdentityTab, { agent, FileTreeEditor: chunkVZ43ATC5_cjs.FileTreeEditor, onSaved: invalidate, ...soulCallbacks }) })
+            content: /* @__PURE__ */ jsxRuntime.jsx(React4.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.Skeleton, { className: "h-64 w-full" }), children: /* @__PURE__ */ jsxRuntime.jsx(AgentIdentityTab, { agent, FileTreeEditor: chunkVZ43ATC5_cjs.FileTreeEditor, onSaved: invalidate, ...soulCallbacks }) })
           },
           {
             label: "Connectors",
@@ -4463,12 +4785,12 @@ function ScheduleCard({
   schedule,
   timezone
 }) {
-  const [frequency, setFrequency] = React.useState(schedule.frequency);
-  const [time, setTime] = React.useState(formatTimeForInput(schedule.time));
-  const [dayOfWeek, setDayOfWeek] = React.useState(schedule.day_of_week ?? 1);
-  const [prompt, setPrompt] = React.useState(schedule.prompt ?? "");
-  const [enabled, setEnabled] = React.useState(schedule.enabled);
-  const [name, setName] = React.useState(schedule.name ?? "");
+  const [frequency, setFrequency] = React4.useState(schedule.frequency);
+  const [time, setTime] = React4.useState(formatTimeForInput(schedule.time));
+  const [dayOfWeek, setDayOfWeek] = React4.useState(schedule.day_of_week ?? 1);
+  const [prompt, setPrompt] = React4.useState(schedule.prompt ?? "");
+  const [enabled, setEnabled] = React4.useState(schedule.enabled);
+  const [name, setName] = React4.useState(schedule.name ?? "");
   const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
   const showDayPicker = frequency === "weekly";
   const canEnable = frequency !== "manual";
@@ -4571,7 +4893,7 @@ function MarkdownContent({ children }) {
   ) });
 }
 function CollapsibleJson({ data, maxHeight = "12rem" }) {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React4.useState(false);
   const json = typeof data === "string" ? data : JSON.stringify(data, null, 2);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4717,7 +5039,7 @@ function renderEvent(event, idx) {
     /* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: event, maxHeight: "8rem" })
   ] }, idx);
 }
-var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
+var TERMINAL_STATUSES2 = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
 function PlaygroundPage({ agentId }) {
   const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
   const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
@@ -4725,30 +5047,30 @@ function PlaygroundPage({ agentId }) {
     `agent-${agentId}`,
     (c) => c.agents.get(agentId)
   );
-  const [prompt, setPrompt] = React.useState("");
-  const [events, setEvents] = React.useState([]);
-  const [streamingText, setStreamingText] = React.useState("");
-  const [running, setRunning] = React.useState(false);
-  const [polling, setPolling] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const [sessionId, setSessionId] = React.useState(null);
-  const sessionIdRef = React.useRef(null);
-  const abortRef = React.useRef(null);
-  const runIdRef = React.useRef(null);
-  const streamRef = React.useRef(null);
-  const scrollRef = React.useRef(null);
-  const textareaRef = React.useRef(null);
-  React.useEffect(() => {
+  const [prompt, setPrompt] = React4.useState("");
+  const [events, setEvents] = React4.useState([]);
+  const [streamingText, setStreamingText] = React4.useState("");
+  const [running, setRunning] = React4.useState(false);
+  const [polling, setPolling] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [sessionId, setSessionId] = React4.useState(null);
+  const sessionIdRef = React4.useRef(null);
+  const abortRef = React4.useRef(null);
+  const runIdRef = React4.useRef(null);
+  const streamRef = React4.useRef(null);
+  const scrollRef = React4.useRef(null);
+  const textareaRef = React4.useRef(null);
+  React4.useEffect(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [events, streamingText]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       abortRef.current?.abort();
       streamRef.current?.abort();
     };
   }, []);
-  const pollForFinalResult = React.useCallback(async (runId) => {
+  const pollForFinalResult = React4.useCallback(async (runId) => {
     setPolling(true);
     let delay = 3e3;
     const maxDelay = 1e4;
@@ -4759,7 +5081,7 @@ function PlaygroundPage({ agentId }) {
         if (abortRef.current?.signal.aborted) break;
         try {
           const run = await client.runs.get(runId);
-          if (TERMINAL_STATUSES.has(run.status)) {
+          if (TERMINAL_STATUSES2.has(run.status)) {
             try {
               const transcriptEvents = await client.runs.transcriptArray(runId);
               if (transcriptEvents.length > 0) {
@@ -4804,7 +5126,7 @@ function PlaygroundPage({ agentId }) {
       streamRef.current = null;
     }
   }, [client]);
-  const consumeStream = React.useCallback(async (stream) => {
+  const consumeStream = React4.useCallback(async (stream) => {
     streamRef.current = stream;
     let handedOffToPoll = false;
     try {
@@ -4842,7 +5164,7 @@ function PlaygroundPage({ agentId }) {
       }
     }
   }, [pollForFinalResult]);
-  const handleSend = React.useCallback(async () => {
+  const handleSend = React4.useCallback(async () => {
     if (!prompt.trim() || running) return;
     const messageText = prompt.trim();
     setPrompt("");
@@ -4995,6 +5317,122 @@ function PlaygroundPage({ agentId }) {
     ] })
   ] });
 }
+var ToastProvider = ToastPrimitives__namespace.Provider;
+var ToastViewport = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitives__namespace.Viewport,
+  {
+    ref,
+    className: chunkXXF4U7WL_cjs.cn(
+      "fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col sm:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives__namespace.Viewport.displayName;
+var toastVariants = classVarianceAuthority.cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-lg border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-right-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-zinc-800 border-zinc-700 text-zinc-100",
+        success: "bg-green-950 border-green-900 text-green-400",
+        destructive: "bg-red-950 border-red-900 text-red-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React4__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitives__namespace.Root,
+  {
+    ref,
+    className: chunkXXF4U7WL_cjs.cn(toastVariants({ variant }), className),
+    ...props
+  }
+));
+Toast.displayName = ToastPrimitives__namespace.Root.displayName;
+var ToastAction = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitives__namespace.Action,
+  {
+    ref,
+    className: chunkXXF4U7WL_cjs.cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-600 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-500 disabled:pointer-events-none disabled:opacity-50",
+      "group-[.destructive]:border-red-800 group-[.destructive]:hover:border-red-700 group-[.destructive]:hover:bg-red-900 group-[.destructive]:focus:ring-red-800",
+      "group-[.success]:border-green-800 group-[.success]:hover:border-green-700 group-[.success]:hover:bg-green-900 group-[.success]:focus:ring-green-800",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
+var ToastClose = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitives__namespace.Close,
+  {
+    ref,
+    className: chunkXXF4U7WL_cjs.cn(
+      "absolute right-1 top-1 rounded-md p-1 text-zinc-400 opacity-0 transition-opacity hover:text-zinc-100 focus:opacity-100 focus:outline-none group-hover:opacity-100",
+      "group-[.destructive]:text-red-400 group-[.destructive]:hover:text-red-300",
+      "group-[.success]:text-green-400 group-[.success]:hover:text-green-300",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+        ]
+      }
+    )
+  }
+));
+ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
+var ToastTitle = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitives__namespace.Title,
+  {
+    ref,
+    className: chunkXXF4U7WL_cjs.cn("text-sm font-semibold [&+div]:text-xs", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
+var ToastDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToastPrimitives__namespace.Description,
+  {
+    ref,
+    className: chunkXXF4U7WL_cjs.cn("text-sm opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives__namespace.Description.displayName;
+function Toaster() {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastProvider, { children: [
+    toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Toast, { ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description })
+      ] }),
+      action,
+      /* @__PURE__ */ jsxRuntime.jsx(ToastClose, {})
+    ] }, id)),
+    /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
+  ] });
+}
 
 Object.defineProperty(exports, "Card", {
   enumerable: true,
@@ -5133,6 +5571,18 @@ exports.SettingsPage = SettingsPage;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.Th = Th;
+exports.Toast = Toast;
+exports.ToastAction = ToastAction;
+exports.ToastClose = ToastClose;
+exports.ToastDescription = ToastDescription;
+exports.ToastProvider = ToastProvider;
+exports.ToastTitle = ToastTitle;
+exports.ToastViewport = ToastViewport;
+exports.Toaster = Toaster;
 exports.ToolkitMultiselect = ToolkitMultiselect;
 exports.TranscriptViewer = TranscriptViewer;
 exports.parsePaginationParams = parsePaginationParams;
+exports.toast = toast;
+exports.toastVariants = toastVariants;
+exports.useRunStream = useRunStream;
+exports.useToast = useToast;