@getcatalystiq/agent-plane-ui 0.1.29 → 0.1.31

package/dist/index.js

@@ -1,16 +1,76 @@
 import { Card, CardHeader, CardTitle, CardContent, useApi, Skeleton, FileTreeEditor } from './chunk-CE2RHDPY.js';
 export { Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton, useApi } from './chunk-CE2RHDPY.js';
-import { cn, Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, Button, Badge, useNavigation, useAgentPlaneClient, DialogDescription, FormField, Input, supportsClaudeRunner, buttonVariants } from './chunk-XFI227OB.js';
+import { cn, useAgentPlaneClient, Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter, Button, Badge, useNavigation, DialogDescription, FormField, Input, supportsClaudeRunner, buttonVariants } from './chunk-XFI227OB.js';
 export { AgentPlaneProvider, Badge, Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FormField, Input, badgeVariants, buttonVariants, cn, useAgentPlaneClient, useAuthError, useNavigation } from './chunk-XFI227OB.js';
+import * as React4 from 'react';
+import React4__default, { lazy, useState, useRef, useCallback, useEffect, useMemo, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default, { lazy, useState, useCallback, useMemo, useRef, useEffect, Suspense } from 'react';
 import { useSWRConfig } from 'swr';
 import ReactMarkdown from 'react-markdown';
 import { Command } from 'cmdk';
 import * as Popover from '@radix-ui/react-popover';
 import remarkGfm from 'remark-gfm';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva } from 'class-variance-authority';
 
+var ACTIVE_STATUSES = /* @__PURE__ */ new Set(["running", "pending"]);
+function useRunStream(runId, status) {
+  const client = useAgentPlaneClient();
+  const [events, setEvents] = useState([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [terminalEvent, setTerminalEvent] = useState(null);
+  const [streamingText, setStreamingText] = useState("");
+  const [error, setError] = useState(null);
+  const abortRef = useRef(null);
+  const startStream = 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]);
+  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__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsx(
@@ -27,7 +87,7 @@ function Select({ className = "", ...props }) {
     ] }) })
   ] });
 }
-var Textarea = React.forwardRef(
+var Textarea = React4.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -133,7 +193,7 @@ function PaginationBar({
   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(React__default.Fragment, { children: renderLink(
+      PAGE_SIZE_OPTIONS.map((ps) => /* @__PURE__ */ jsx(React4__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"}`
@@ -299,6 +359,102 @@ function DashboardPage({ initialData, chartComponent: ChartComponent }) {
     ChartComponent && /* @__PURE__ */ 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.useState(memoryState);
+  React4.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" },
@@ -308,11 +464,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 } = useNavigation();
+  const { toast: toast2 } = useToast();
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
   const [sourceFilter, setSourceFilter] = useState(null);
+  const prevStatusesRef = useRef(/* @__PURE__ */ new Map());
+  const [activeRunsExist, setActiveRunsExist] = useState(
+    () => initialData?.data?.some((r) => ACTIVE_STATUSES2.has(r.status)) ?? false
+  );
   const cacheKey = `runs-${page}-${pageSize}-${sourceFilter || "all"}`;
   const { data, error, isLoading } = useApi(
     cacheKey,
@@ -323,8 +486,29 @@ function RunListPage({ initialData }) {
         ...sourceFilter ? { triggered_by: sourceFilter } : {}
       });
     },
-    initialData ? { fallbackData: initialData } : void 0
+    {
+      ...initialData ? { fallbackData: initialData } : {},
+      refreshInterval: activeRunsExist ? 5e3 : 0
+    }
   );
+  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 = useCallback((e) => {
     const value = e.target.value;
     setSourceFilter(VALID_SOURCES.includes(value) ? value : null);
@@ -505,17 +689,51 @@ function buildConversation(events) {
   }
   return items;
 }
-function TranscriptViewer({ transcript, prompt }) {
+function TranscriptViewer({ transcript, prompt, isStreaming = false }) {
   const conversation = useMemo(() => buildConversation(transcript), [transcript]);
+  const scrollContainerRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const userHasScrolledUpRef = useRef(false);
+  const [userHasScrolledUp, setUserHasScrolledUp] = useState(false);
+  const handleScroll = 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);
+    }
+  }, []);
+  useEffect(() => {
+    if (isStreaming && !userHasScrolledUpRef.current) {
+      sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [transcript.length, isStreaming]);
   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 })
-    ] })
+    /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: scrollContainerRef,
+        onScroll: isStreaming ? handleScroll : void 0,
+        className: "space-y-3 overflow-y-auto px-6 pb-6",
+        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 }),
+          isStreaming && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-blue-400 animate-pulse" }),
+            "Streaming..."
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: sentinelRef })
+        ]
+      }
+    ) })
   ] });
 }
 function ConversationView({ items }) {
@@ -669,6 +887,7 @@ function ErrorItem({ item }) {
 }
 function RunDetailPage({ runId, initialData, initialTranscript }) {
   const { mutate } = useSWRConfig();
+  const { toast: toast2 } = useToast();
   const { data: run, error, isLoading } = useApi(
     `run-${runId}`,
     (client) => client.runs.get(runId),
@@ -679,6 +898,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 ?? ""
+  );
+  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__ */ jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxs("p", { className: "text-destructive", children: [
       "Failed to load run: ",
@@ -711,16 +944,26 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
       ] }),
       /* @__PURE__ */ jsx(MetricCard, { label: "Cost", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(MetricCard, { label: "Turns", children: terminalEvent?.num_turns ?? run.num_turns }),
+      /* @__PURE__ */ jsx(MetricCard, { label: "Duration", children: (() => {
+        const ms = terminalEvent?.duration_ms ?? run.duration_ms;
+        return ms > 0 ? `${(ms / 1e3).toFixed(1)}s` : "\u2014";
+      })() }),
       /* @__PURE__ */ 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__ */ 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"
         ] })
       ] })
@@ -732,7 +975,18 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
         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(
+      TranscriptViewer,
+      {
+        transcript: isActive && isStreaming ? events : transcript || [],
+        prompt: run.prompt,
+        isStreaming: isActive && isStreaming
+      }
+    ),
+    isActive && streamingText && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-muted/30 p-4", children: /* @__PURE__ */ jsxs("pre", { className: "whitespace-pre-wrap text-sm font-mono", children: [
+      streamingText,
+      /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-4 ml-0.5 bg-foreground/70 animate-pulse align-text-bottom" })
+    ] }) }),
     /* @__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" }),
@@ -3338,7 +3592,8 @@ function FileTreeEditor2({
   addFolderLabel = "Folder",
   newFileTemplate = { filename: "SKILL.md", content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" },
   savedVersion,
-  fixedStructure = false
+  fixedStructure = false,
+  headerActions
 }) {
   const [files, setFiles] = useState(initialFiles);
   const [selectedPath, setSelectedPath] = useState(
@@ -3529,7 +3784,10 @@ function FileTreeEditor2({
         isDirty && !readOnly && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
         readOnly && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: "Read-only" })
       ] }),
-      !readOnly && !hideSave && /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        headerActions,
+        !readOnly && !hideSave && /* @__PURE__ */ jsx(Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-4 min-h-[500px]", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
@@ -3815,7 +4073,6 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
     onSaved?.();
   }, [agentId, client, onSaved]);
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end mb-4", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" }) }),
     /* @__PURE__ */ jsx(
       FileTreeEditor2,
       {
@@ -3827,7 +4084,8 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
         newFileTemplate: {
           filename: "SKILL.md",
           content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
-        }
+        },
+        headerActions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4689,7 +4947,7 @@ function renderEvent(event, idx) {
     /* @__PURE__ */ 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 = useAgentPlaneClient();
   const { LinkComponent, basePath } = useNavigation();
@@ -4731,7 +4989,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) {
@@ -4967,5 +5225,121 @@ function PlaygroundPage({ agentId }) {
     ] })
   ] });
 }
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: 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.Viewport.displayName;
+var toastVariants = 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.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Root,
+  {
+    ref,
+    className: cn(toastVariants({ variant }), className),
+    ...props
+  }
+));
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: 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.Action.displayName;
+var ToastClose = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Close,
+  {
+    ref,
+    className: 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__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+        ]
+      }
+    )
+  }
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold [&+div]:text-xs", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Description,
+  {
+    ref,
+    className: cn("text-sm opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+function Toaster() {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxs(Toast, { ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+        title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(ToastDescription, { children: description })
+      ] }),
+      action,
+      /* @__PURE__ */ jsx(ToastClose, {})
+    ] }, id)),
+    /* @__PURE__ */ jsx(ToastViewport, {})
+  ] });
+}
 
-export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, EmptyRow, FormError, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PlaygroundPage, PluginDetailPage, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Tabs, Textarea, Th, ToolkitMultiselect, TranscriptViewer, parsePaginationParams };
+export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, EmptyRow, FormError, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PlaygroundPage, PluginDetailPage, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Tabs, Textarea, Th, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, ToolkitMultiselect, TranscriptViewer, parsePaginationParams, toast, toastVariants, useRunStream, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcatalystiq/agent-plane-ui",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "Embeddable React component library for AgentPlane",
   "type": "module",
   "exports": {
@@ -92,6 +92,7 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-toast": "^1.2.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",