@getcatalystiq/agent-plane-ui 0.1.15 → 0.1.16

package/dist/index.cjs

@@ -7,6 +7,7 @@ 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');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -31,6 +32,7 @@ function _interopNamespace(e) {
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
+var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 
 function Select({ className = "", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
@@ -4386,6 +4388,443 @@ function ScheduleCard({
     ] })
   ] });
 }
+function MarkdownContent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground [&_p]:my-1 [&_h1]:text-lg [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:my-2 [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-1 [&_li]:my-0.5 [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs [&_pre]:my-2 [&_code:not(pre_code)]:bg-muted [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:py-0.5 [&_code:not(pre_code)]:rounded [&_code:not(pre_code)]:text-xs [&_code:not(pre_code)]:font-mono [&_a]:text-blue-400 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:my-2 [&_hr]:border-border [&_hr]:my-3 [&_table]:border-collapse [&_table]:text-xs [&_table]:w-full [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold [&_th]:bg-muted [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_strong]:font-semibold [&_em]:italic", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ReactMarkdown__default.default,
+    {
+      remarkPlugins: [remarkGfm__default.default],
+      components: {
+        a: ({ href, children: linkChildren }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children: linkChildren })
+      },
+      children
+    }
+  ) });
+}
+function CollapsibleJson({ data, maxHeight = "12rem" }) {
+  const [expanded, setExpanded] = React3.useState(false);
+  const json = typeof data === "string" ? data : JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "pre",
+      {
+        className: `text-xs font-mono text-muted-foreground bg-muted/50 rounded-md p-2 overflow-x-auto whitespace-pre-wrap break-all ${expanded ? "" : "overflow-hidden"}`,
+        style: expanded ? void 0 : { maxHeight },
+        children: json
+      }
+    ),
+    json.length > 200 && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "text-xs text-blue-400 hover:text-blue-300 mt-1",
+        children: expanded ? "Collapse" : "Expand"
+      }
+    )
+  ] });
+}
+function renderEvent(event, idx) {
+  if (event.type === "heartbeat") return null;
+  if (event.type === "text_delta") return null;
+  if (event.type === "session_created") return null;
+  if (event.type === "session_info") return null;
+  if (event.type === "mcp_status") return null;
+  if (event.type === "rate_limit_event") return null;
+  if (event.type === "user_message") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border pt-3 mt-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-emerald-400 uppercase", children: "You" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground mt-1 whitespace-pre-wrap", children: String(event.text) })
+    ] }, idx);
+  }
+  if (event.type === "assistant") {
+    const content = event.message;
+    const blocks = content?.content ?? [];
+    const textBlocks = blocks.filter((c) => c.type === "text").map((c) => c.text).join("");
+    const toolUseBlocks = blocks.filter((c) => c.type === "tool_use");
+    if (!textBlocks && toolUseBlocks.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      textBlocks && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-blue-400 uppercase", children: "Assistant" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { children: textBlocks })
+      ] }),
+      toolUseBlocks.map((tool, ti) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 ml-3 pl-3 border-l-2 border-yellow-800/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-yellow-400 uppercase", children: [
+          "Tool Call: ",
+          tool.name ?? "unknown"
+        ] }),
+        tool.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground ml-2 font-mono", children: String(tool.id) }),
+        tool.input != null && /* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: tool.input })
+      ] }, ti))
+    ] }, idx);
+  }
+  if (event.type === "tool_use") {
+    const toolName = String(event.tool_name ?? event.name ?? "unknown");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 ml-3 pl-3 border-l-2 border-yellow-800/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-yellow-400 uppercase", children: "Tool Call" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-yellow-400/80", children: toolName }),
+        event.tool_use_id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: String(event.tool_use_id) }) : null
+      ] }),
+      event.input != null ? /* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: event.input }) : null
+    ] }, idx);
+  }
+  if (event.type === "tool_result") {
+    const isError = event.is_error === true || event.error === true;
+    const content = event.output ?? event.content ?? "";
+    const contentStr = typeof content === "string" ? content : JSON.stringify(content, null, 2);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-1 ml-3 pl-3 border-l-2 ${isError ? "border-red-800/50" : "border-green-800/50"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs font-semibold uppercase ${isError ? "text-red-400" : "text-green-400"}`, children: isError ? "Tool Error" : "Tool Result" }),
+        event.tool_name ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-muted-foreground", children: String(event.tool_name) }) : null,
+        event.tool_use_id ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-mono", children: String(event.tool_use_id) }) : null
+      ] }),
+      contentStr ? /* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: contentStr }) : null
+    ] }, idx);
+  }
+  if (event.type === "result") {
+    const success = event.subtype === "success";
+    const costUsd = event.cost_usd ?? event.total_cost_usd;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rounded-md px-3 py-2 flex items-center gap-3 ${success ? "bg-green-950 border border-green-900" : "bg-red-950 border border-red-900"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs font-semibold ${success ? "text-green-400" : "text-red-400"}`, children: success ? "Completed" : "Failed" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3 text-xs text-zinc-400", children: [
+        event.num_turns != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          String(event.num_turns),
+          " turns"
+        ] }),
+        costUsd != null && Number(costUsd) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "$",
+          Number(costUsd).toFixed(4)
+        ] }),
+        event.duration_ms != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          (Number(event.duration_ms) / 1e3).toFixed(1),
+          "s"
+        ] }),
+        event.duration_api_ms != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "API: ",
+          (Number(event.duration_api_ms) / 1e3).toFixed(1),
+          "s"
+        ] })
+      ] })
+    ] }, idx);
+  }
+  if (event.type === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md p-3 bg-red-950 border border-red-800", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-red-400", children: "Error" }),
+        event.code ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-red-400/70", children: String(event.code) }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground mt-1", children: String(event.error ?? "Unknown error") })
+    ] }, idx);
+  }
+  if (event.type === "stream_detached") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground italic border-t border-border pt-2", children: [
+      "Stream detached at ",
+      event.timestamp ? new Date(String(event.timestamp)).toLocaleTimeString() : "unknown",
+      " \u2014 run continues in background"
+    ] }, idx);
+  }
+  if (event.type === "queued") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Queued\u2026" }, idx);
+  }
+  if (event.type === "sandbox_starting") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: "Starting sandbox\u2026" }, idx);
+  }
+  if (event.type === "run_started") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+      "Agent started",
+      event.model ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 font-mono text-foreground/60", children: String(event.model) }) : null,
+      event.mcp_server_count != null && Number(event.mcp_server_count) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2", children: [
+        String(event.mcp_server_count),
+        " MCP server",
+        Number(event.mcp_server_count) !== 1 ? "s" : ""
+      ] })
+    ] }, idx);
+  }
+  if (event.type === "system") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground italic", children: String(event.message ?? JSON.stringify(event)) }, idx);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-purple-400 uppercase", children: event.type }),
+    /* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: event, maxHeight: "8rem" })
+  ] }, idx);
+}
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
+function PlaygroundPage({ agentId }) {
+  const client = chunk4XBBDUSZ_cjs.useAgentPlaneClient();
+  const { LinkComponent, basePath } = chunk4XBBDUSZ_cjs.useNavigation();
+  const { data: agent, error: agentError, isLoading } = chunk4XBBDUSZ_cjs.useApi(
+    `agent-${agentId}`,
+    (c) => c.agents.get(agentId)
+  );
+  const [prompt, setPrompt] = React3.useState("");
+  const [events, setEvents] = React3.useState([]);
+  const [streamingText, setStreamingText] = React3.useState("");
+  const [running, setRunning] = React3.useState(false);
+  const [polling, setPolling] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [sessionId, setSessionId] = React3.useState(null);
+  const sessionIdRef = React3.useRef(null);
+  const abortRef = React3.useRef(null);
+  const runIdRef = React3.useRef(null);
+  const streamRef = React3.useRef(null);
+  const scrollRef = React3.useRef(null);
+  const textareaRef = React3.useRef(null);
+  React3.useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [events, streamingText]);
+  React3.useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+      streamRef.current?.abort();
+    };
+  }, []);
+  const pollForFinalResult = React3.useCallback(async (runId) => {
+    setPolling(true);
+    let delay = 3e3;
+    const maxDelay = 1e4;
+    try {
+      while (true) {
+        if (abortRef.current?.signal.aborted) break;
+        await new Promise((r) => setTimeout(r, delay));
+        if (abortRef.current?.signal.aborted) break;
+        try {
+          const run = await client.runs.get(runId);
+          if (TERMINAL_STATUSES.has(run.status)) {
+            try {
+              const transcriptEvents = await client.runs.transcriptArray(runId);
+              if (transcriptEvents.length > 0) {
+                const detachIdx = transcriptEvents.findIndex((ev) => ev.type === "stream_detached");
+                const eventsAfterDetach = detachIdx >= 0 ? transcriptEvents.slice(detachIdx + 1) : [];
+                const newEvents = eventsAfterDetach.filter(
+                  (ev) => ev.type !== "heartbeat" && ev.type !== "text_delta" && ev.type !== "run_started" && ev.type !== "queued" && ev.type !== "sandbox_starting"
+                );
+                if (newEvents.length > 0) {
+                  setEvents((prev) => [...prev, ...newEvents]);
+                }
+              }
+            } catch {
+            }
+            setEvents((prev) => {
+              if (prev.some((ev) => ev.type === "result")) return prev;
+              const syntheticResult = {
+                type: "result",
+                subtype: run.status === "completed" ? "success" : "failed",
+                cost_usd: run.cost_usd,
+                num_turns: run.num_turns,
+                duration_ms: run.duration_ms
+              };
+              if (run.error_type) {
+                syntheticResult.result = run.error_type;
+              }
+              return [...prev, syntheticResult];
+            });
+            break;
+          }
+          delay = Math.min(delay * 2, maxDelay);
+        } catch (err) {
+          if (err?.name === "AbortError") break;
+          delay = Math.min(delay * 2, maxDelay);
+        }
+      }
+    } finally {
+      setPolling(false);
+      setRunning(false);
+      abortRef.current = null;
+      runIdRef.current = null;
+      streamRef.current = null;
+    }
+  }, [client]);
+  const consumeStream = React3.useCallback(async (stream) => {
+    streamRef.current = stream;
+    let handedOffToPoll = false;
+    try {
+      for await (const event of stream) {
+        const ev = event;
+        if (ev.type === "session_created" && ev.session_id) {
+          const sid = ev.session_id;
+          sessionIdRef.current = sid;
+          setSessionId(sid);
+        }
+        if (ev.type === "run_started" && ev.run_id) {
+          runIdRef.current = ev.run_id;
+        }
+        if (ev.type === "text_delta") {
+          setStreamingText((prev) => prev + (ev.text ?? ""));
+        } else if (ev.type === "stream_detached") {
+          setStreamingText("");
+          setEvents((prev) => [...prev, ev]);
+          if (runIdRef.current) {
+            handedOffToPoll = true;
+            pollForFinalResult(runIdRef.current);
+            return;
+          }
+        } else {
+          if (ev.type === "assistant") setStreamingText("");
+          setEvents((prev) => [...prev, ev]);
+        }
+      }
+    } finally {
+      if (!handedOffToPoll) {
+        setRunning(false);
+        abortRef.current = null;
+        runIdRef.current = null;
+        streamRef.current = null;
+      }
+    }
+  }, [pollForFinalResult]);
+  const handleSend = React3.useCallback(async () => {
+    if (!prompt.trim() || running) return;
+    const messageText = prompt.trim();
+    setPrompt("");
+    setRunning(true);
+    setStreamingText("");
+    setError(null);
+    setPolling(false);
+    setEvents((prev) => [...prev, { type: "user_message", text: messageText }]);
+    const abort = new AbortController();
+    abortRef.current = abort;
+    try {
+      let stream;
+      const currentSessionId = sessionIdRef.current;
+      if (currentSessionId) {
+        stream = await client.sessions.sendMessage(
+          currentSessionId,
+          { prompt: messageText },
+          { signal: abort.signal }
+        );
+      } else {
+        stream = await client.sessions.create(
+          { agent_id: agentId, prompt: messageText },
+          { signal: abort.signal }
+        );
+      }
+      await consumeStream(stream);
+    } catch (err) {
+      if (err?.name !== "AbortError") {
+        const msg = err instanceof Error ? err.message : "Unknown error";
+        setError(msg);
+      }
+      setRunning(false);
+      abortRef.current = null;
+      runIdRef.current = null;
+      streamRef.current = null;
+    }
+  }, [prompt, running, agentId, client, consumeStream]);
+  function handleNewChat() {
+    abortRef.current?.abort();
+    streamRef.current?.abort();
+    if (sessionId) {
+      client.sessions.stop(sessionId).catch(() => {
+      });
+    }
+    sessionIdRef.current = null;
+    setSessionId(null);
+    setEvents([]);
+    setStreamingText("");
+    setRunning(false);
+    setPolling(false);
+    setError(null);
+    setPrompt("");
+    runIdRef.current = null;
+    abortRef.current = null;
+    streamRef.current = null;
+    textareaRef.current?.focus();
+  }
+  function handleStop() {
+    abortRef.current?.abort();
+    streamRef.current?.abort();
+    const id = runIdRef.current;
+    if (id) {
+      runIdRef.current = null;
+      client.runs.cancel(id).catch(() => {
+      });
+    }
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-[calc(100vh-6rem)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Skeleton, { className: "h-8 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Skeleton, { className: "h-4 w-40" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Skeleton, { className: "flex-1 rounded-lg" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Skeleton, { className: "h-24 w-full rounded-lg" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Skeleton, { className: "h-8 w-20" })
+      ] })
+    ] });
+  }
+  if (agentError || !agent) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-[calc(100vh-6rem)] gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-sm", children: agentError?.status === 404 ? "Agent not found." : `Failed to load agent: ${agentError?.message ?? "Unknown error"}` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LinkComponent,
+        {
+          href: `${basePath}/agents`,
+          className: "text-sm text-muted-foreground hover:text-foreground",
+          children: "\u2190 Back to agents"
+        }
+      )
+    ] });
+  }
+  const hasContent = events.length > 0 || running;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-[calc(100vh-6rem)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        LinkComponent,
+        {
+          href: `${basePath}/agents/${agentId}`,
+          className: "text-sm text-muted-foreground hover:text-foreground",
+          children: [
+            "\u2190 ",
+            agent.name
+          ]
+        }
+      ),
+      (sessionId || events.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Button, { onClick: handleNewChat, variant: "outline", size: "sm", disabled: running, children: "New Chat" }),
+      sessionId && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground font-mono", children: [
+        "Session: ",
+        sessionId.slice(0, 12),
+        "\u2026"
+      ] })
+    ] }),
+    hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: scrollRef, className: "flex-1 min-h-0 overflow-y-auto rounded-lg border border-border bg-muted/20 p-4 space-y-4 mb-4", children: [
+      events.map((ev, i) => renderEvent(ev, i)),
+      streamingText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-blue-400 uppercase", children: "Assistant" }),
+        /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { children: streamingText }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-0.5 h-4 bg-foreground animate-pulse align-text-bottom" })
+      ] }),
+      running && !streamingText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "\u25CF" }),
+        " ",
+        polling ? "Reconnected, streaming updates\u2026" : "Running\u2026"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 shrink-0", children: [
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Textarea,
+        {
+          ref: textareaRef,
+          placeholder: sessionId ? "Send a follow-up message\u2026" : "Enter your prompt\u2026",
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value),
+          rows: hasContent ? 3 : 12,
+          disabled: running,
+          className: "font-mono text-sm resize-none",
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSend();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Button, { onClick: handleSend, disabled: running || !prompt.trim(), size: "sm", children: running ? "Running\u2026" : sessionId ? "Send" : "Run" }),
+        running && /* @__PURE__ */ jsxRuntime.jsx(chunk4XBBDUSZ_cjs.Button, { onClick: handleStop, variant: "outline", size: "sm", children: "Stop" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground ml-1", children: "\u2318+Enter to send" })
+      ] })
+    ] })
+  ] });
+}
 
 Object.defineProperty(exports, "AgentPlaneProvider", {
   enumerable: true,
@@ -4486,6 +4925,7 @@ exports.McpServerListPage = McpServerListPage;
 exports.MetricCard = MetricCard;
 exports.ModelSelector = ModelSelector;
 exports.PaginationBar = PaginationBar;
+exports.PlaygroundPage = PlaygroundPage;
 exports.PluginDetailPage = PluginDetailPage;
 exports.PluginMarketplaceDetailPage = PluginMarketplaceDetailPage;
 exports.PluginMarketplaceListPage = PluginMarketplaceListPage;

package/dist/index.d.cts

@@ -7,6 +7,52 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { DailyAgentStat } from './charts.cjs';
 
+/** Minimal stream event types used by the playground UI. */
+interface PlaygroundTextDeltaEvent {
+    type: "text_delta";
+    text: string;
+}
+interface PlaygroundRunStartedEvent {
+    type: "run_started";
+    run_id: string;
+    agent_id: string;
+    model: string;
+    timestamp: string;
+}
+interface PlaygroundToolUseEvent {
+    type: "tool_use";
+    name?: string;
+    [key: string]: unknown;
+}
+interface PlaygroundToolResultEvent {
+    type: "tool_result";
+    [key: string]: unknown;
+}
+interface PlaygroundResultEvent {
+    type: "result";
+    subtype: string;
+    total_cost_usd?: number;
+    num_turns?: number;
+    duration_ms?: number;
+}
+interface PlaygroundErrorEvent {
+    type: "error";
+    error: string;
+    code?: string;
+}
+interface PlaygroundSessionCreatedEvent {
+    type: "session_created";
+    session_id: string;
+}
+type PlaygroundStreamEvent = PlaygroundTextDeltaEvent | PlaygroundRunStartedEvent | PlaygroundToolUseEvent | PlaygroundToolResultEvent | PlaygroundResultEvent | PlaygroundErrorEvent | PlaygroundSessionCreatedEvent | {
+    type: string;
+    [key: string]: unknown;
+};
+/** Async iterable stream of events (compatible with SDK RunStream). */
+interface PlaygroundStream extends AsyncIterable<PlaygroundStreamEvent> {
+    run_id: string | null;
+    abort(reason?: unknown): void;
+}
 /**
  * Structural interface for the AgentPlane SDK client.
  * Declares all methods the UI actually uses, avoiding a hard compile-time
@@ -47,6 +93,17 @@ interface AgentPlaneClient {
         list(params?: Record<string, unknown>): Promise<unknown>;
         get(sessionId: string): Promise<unknown>;
         stop(sessionId: string): Promise<unknown>;
+        create(params: {
+            agent_id: string;
+            prompt?: string;
+        }, options?: {
+            signal?: AbortSignal;
+        }): Promise<unknown | PlaygroundStream>;
+        sendMessage(sessionId: string, params: {
+            prompt: string;
+        }, options?: {
+            signal?: AbortSignal;
+        }): Promise<PlaygroundStream>;
     };
     connectors: {
         list(agentId: string): Promise<unknown[]>;
@@ -632,6 +689,11 @@ interface Props$1 {
 }
 declare function AgentA2aInfo({ agentId, tenantSlug, agentSlug, baseUrl, initialEnabled, initialTags, onChanged, }: Props$1): react_jsx_runtime.JSX.Element;
 
+interface PlaygroundPageProps {
+    agentId: string;
+}
+declare function PlaygroundPage({ agentId }: PlaygroundPageProps): react_jsx_runtime.JSX.Element;
+
 interface ModelSelectorProps {
     value: string;
     onChange: (modelId: string) => void;
@@ -645,4 +707,4 @@ interface Props {
 }
 declare function ToolkitMultiselect({ value, onChange }: Props): react_jsx_runtime.JSX.Element;
 
-export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, type AgentPlaneClient, AgentPlaneProvider, type AgentPlaneProviderProps, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, type DashboardPageProps, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, type LinkComponentProps, LocalDate, McpServerListPage, type McpServerListPageProps, MetricCard, ModelSelector, type NavigationProps, PaginationBar, PluginDetailPage, type PluginDetailPageProps, PluginMarketplaceDetailPage, type PluginMarketplaceDetailPageProps, PluginMarketplaceListPage, type PluginMarketplaceListPageProps, RunDetailPage, type RunDetailPageProps, RunListPage, type RunListPageProps, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, type SettingsPageProps, Skeleton, Tabs, Textarea, type TextareaProps, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };
+export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, type AgentPlaneClient, AgentPlaneProvider, type AgentPlaneProviderProps, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, type DashboardPageProps, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, type LinkComponentProps, LocalDate, McpServerListPage, type McpServerListPageProps, MetricCard, ModelSelector, type NavigationProps, PaginationBar, PlaygroundPage, type PlaygroundPageProps, type PlaygroundStream, type PlaygroundStreamEvent, PluginDetailPage, type PluginDetailPageProps, PluginMarketplaceDetailPage, type PluginMarketplaceDetailPageProps, PluginMarketplaceListPage, type PluginMarketplaceListPageProps, RunDetailPage, type RunDetailPageProps, RunListPage, type RunListPageProps, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, type SettingsPageProps, Skeleton, Tabs, Textarea, type TextareaProps, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };

package/dist/index.d.ts

@@ -7,6 +7,52 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { DailyAgentStat } from './charts.js';
 
+/** Minimal stream event types used by the playground UI. */
+interface PlaygroundTextDeltaEvent {
+    type: "text_delta";
+    text: string;
+}
+interface PlaygroundRunStartedEvent {
+    type: "run_started";
+    run_id: string;
+    agent_id: string;
+    model: string;
+    timestamp: string;
+}
+interface PlaygroundToolUseEvent {
+    type: "tool_use";
+    name?: string;
+    [key: string]: unknown;
+}
+interface PlaygroundToolResultEvent {
+    type: "tool_result";
+    [key: string]: unknown;
+}
+interface PlaygroundResultEvent {
+    type: "result";
+    subtype: string;
+    total_cost_usd?: number;
+    num_turns?: number;
+    duration_ms?: number;
+}
+interface PlaygroundErrorEvent {
+    type: "error";
+    error: string;
+    code?: string;
+}
+interface PlaygroundSessionCreatedEvent {
+    type: "session_created";
+    session_id: string;
+}
+type PlaygroundStreamEvent = PlaygroundTextDeltaEvent | PlaygroundRunStartedEvent | PlaygroundToolUseEvent | PlaygroundToolResultEvent | PlaygroundResultEvent | PlaygroundErrorEvent | PlaygroundSessionCreatedEvent | {
+    type: string;
+    [key: string]: unknown;
+};
+/** Async iterable stream of events (compatible with SDK RunStream). */
+interface PlaygroundStream extends AsyncIterable<PlaygroundStreamEvent> {
+    run_id: string | null;
+    abort(reason?: unknown): void;
+}
 /**
  * Structural interface for the AgentPlane SDK client.
  * Declares all methods the UI actually uses, avoiding a hard compile-time
@@ -47,6 +93,17 @@ interface AgentPlaneClient {
         list(params?: Record<string, unknown>): Promise<unknown>;
         get(sessionId: string): Promise<unknown>;
         stop(sessionId: string): Promise<unknown>;
+        create(params: {
+            agent_id: string;
+            prompt?: string;
+        }, options?: {
+            signal?: AbortSignal;
+        }): Promise<unknown | PlaygroundStream>;
+        sendMessage(sessionId: string, params: {
+            prompt: string;
+        }, options?: {
+            signal?: AbortSignal;
+        }): Promise<PlaygroundStream>;
     };
     connectors: {
         list(agentId: string): Promise<unknown[]>;
@@ -632,6 +689,11 @@ interface Props$1 {
 }
 declare function AgentA2aInfo({ agentId, tenantSlug, agentSlug, baseUrl, initialEnabled, initialTags, onChanged, }: Props$1): react_jsx_runtime.JSX.Element;
 
+interface PlaygroundPageProps {
+    agentId: string;
+}
+declare function PlaygroundPage({ agentId }: PlaygroundPageProps): react_jsx_runtime.JSX.Element;
+
 interface ModelSelectorProps {
     value: string;
     onChange: (modelId: string) => void;
@@ -645,4 +707,4 @@ interface Props {
 }
 declare function ToolkitMultiselect({ value, onChange }: Props): react_jsx_runtime.JSX.Element;
 
-export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, type AgentPlaneClient, AgentPlaneProvider, type AgentPlaneProviderProps, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, type DashboardPageProps, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, type LinkComponentProps, LocalDate, McpServerListPage, type McpServerListPageProps, MetricCard, ModelSelector, type NavigationProps, PaginationBar, PluginDetailPage, type PluginDetailPageProps, PluginMarketplaceDetailPage, type PluginMarketplaceDetailPageProps, PluginMarketplaceListPage, type PluginMarketplaceListPageProps, RunDetailPage, type RunDetailPageProps, RunListPage, type RunListPageProps, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, type SettingsPageProps, Skeleton, Tabs, Textarea, type TextareaProps, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };
+export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, type AgentPlaneClient, AgentPlaneProvider, type AgentPlaneProviderProps, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardHeader, CardTitle, ConfirmDialog, CopyButton, DashboardPage, type DashboardPageProps, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, Input, type LinkComponentProps, LocalDate, McpServerListPage, type McpServerListPageProps, MetricCard, ModelSelector, type NavigationProps, PaginationBar, PlaygroundPage, type PlaygroundPageProps, type PlaygroundStream, type PlaygroundStreamEvent, PluginDetailPage, type PluginDetailPageProps, PluginMarketplaceDetailPage, type PluginMarketplaceDetailPageProps, PluginMarketplaceListPage, type PluginMarketplaceListPageProps, RunDetailPage, type RunDetailPageProps, RunListPage, type RunListPageProps, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, type SettingsPageProps, Skeleton, Tabs, Textarea, type TextareaProps, Th, ToolkitMultiselect, TranscriptViewer, badgeVariants, buttonVariants, cn, parsePaginationParams, useAgentPlaneClient, useApi, useAuthError, useNavigation };

package/dist/index.js

@@ -7,6 +7,7 @@ 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';
 
 function Select({ className = "", ...props }) {
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
@@ -4362,5 +4363,442 @@ function ScheduleCard({
     ] })
   ] });
 }
+function MarkdownContent({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground [&_p]:my-1 [&_h1]:text-lg [&_h1]:font-bold [&_h1]:my-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:my-2 [&_h3]:text-sm [&_h3]:font-semibold [&_h3]:my-1 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-1 [&_li]:my-0.5 [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs [&_pre]:my-2 [&_code:not(pre_code)]:bg-muted [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:py-0.5 [&_code:not(pre_code)]:rounded [&_code:not(pre_code)]:text-xs [&_code:not(pre_code)]:font-mono [&_a]:text-blue-400 [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:my-2 [&_hr]:border-border [&_hr]:my-3 [&_table]:border-collapse [&_table]:text-xs [&_table]:w-full [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold [&_th]:bg-muted [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_strong]:font-semibold [&_em]:italic", children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        a: ({ href, children: linkChildren }) => /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", children: linkChildren })
+      },
+      children
+    }
+  ) });
+}
+function CollapsibleJson({ data, maxHeight = "12rem" }) {
+  const [expanded, setExpanded] = useState(false);
+  const json = typeof data === "string" ? data : JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `text-xs font-mono text-muted-foreground bg-muted/50 rounded-md p-2 overflow-x-auto whitespace-pre-wrap break-all ${expanded ? "" : "overflow-hidden"}`,
+        style: expanded ? void 0 : { maxHeight },
+        children: json
+      }
+    ),
+    json.length > 200 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "text-xs text-blue-400 hover:text-blue-300 mt-1",
+        children: expanded ? "Collapse" : "Expand"
+      }
+    )
+  ] });
+}
+function renderEvent(event, idx) {
+  if (event.type === "heartbeat") return null;
+  if (event.type === "text_delta") return null;
+  if (event.type === "session_created") return null;
+  if (event.type === "session_info") return null;
+  if (event.type === "mcp_status") return null;
+  if (event.type === "rate_limit_event") return null;
+  if (event.type === "user_message") {
+    return /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-3 mt-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-emerald-400 uppercase", children: "You" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground mt-1 whitespace-pre-wrap", children: String(event.text) })
+    ] }, idx);
+  }
+  if (event.type === "assistant") {
+    const content = event.message;
+    const blocks = content?.content ?? [];
+    const textBlocks = blocks.filter((c) => c.type === "text").map((c) => c.text).join("");
+    const toolUseBlocks = blocks.filter((c) => c.type === "tool_use");
+    if (!textBlocks && toolUseBlocks.length === 0) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      textBlocks && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-blue-400 uppercase", children: "Assistant" }),
+        /* @__PURE__ */ jsx(MarkdownContent, { children: textBlocks })
+      ] }),
+      toolUseBlocks.map((tool, ti) => /* @__PURE__ */ jsxs("div", { className: "space-y-1 ml-3 pl-3 border-l-2 border-yellow-800/50", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-yellow-400 uppercase", children: [
+          "Tool Call: ",
+          tool.name ?? "unknown"
+        ] }),
+        tool.id && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2 font-mono", children: String(tool.id) }),
+        tool.input != null && /* @__PURE__ */ jsx(CollapsibleJson, { data: tool.input })
+      ] }, ti))
+    ] }, idx);
+  }
+  if (event.type === "tool_use") {
+    const toolName = String(event.tool_name ?? event.name ?? "unknown");
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1 ml-3 pl-3 border-l-2 border-yellow-800/50", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-yellow-400 uppercase", children: "Tool Call" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-yellow-400/80", children: toolName }),
+        event.tool_use_id ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-mono", children: String(event.tool_use_id) }) : null
+      ] }),
+      event.input != null ? /* @__PURE__ */ jsx(CollapsibleJson, { data: event.input }) : null
+    ] }, idx);
+  }
+  if (event.type === "tool_result") {
+    const isError = event.is_error === true || event.error === true;
+    const content = event.output ?? event.content ?? "";
+    const contentStr = typeof content === "string" ? content : JSON.stringify(content, null, 2);
+    return /* @__PURE__ */ jsxs("div", { className: `space-y-1 ml-3 pl-3 border-l-2 ${isError ? "border-red-800/50" : "border-green-800/50"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold uppercase ${isError ? "text-red-400" : "text-green-400"}`, children: isError ? "Tool Error" : "Tool Result" }),
+        event.tool_name ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground", children: String(event.tool_name) }) : null,
+        event.tool_use_id ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-mono", children: String(event.tool_use_id) }) : null
+      ] }),
+      contentStr ? /* @__PURE__ */ jsx(CollapsibleJson, { data: contentStr }) : null
+    ] }, idx);
+  }
+  if (event.type === "result") {
+    const success = event.subtype === "success";
+    const costUsd = event.cost_usd ?? event.total_cost_usd;
+    return /* @__PURE__ */ jsxs("div", { className: `rounded-md px-3 py-2 flex items-center gap-3 ${success ? "bg-green-950 border border-green-900" : "bg-red-950 border border-red-900"}`, children: [
+      /* @__PURE__ */ jsx("span", { className: `text-xs font-semibold ${success ? "text-green-400" : "text-red-400"}`, children: success ? "Completed" : "Failed" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3 text-xs text-zinc-400", children: [
+        event.num_turns != null && /* @__PURE__ */ jsxs("span", { children: [
+          String(event.num_turns),
+          " turns"
+        ] }),
+        costUsd != null && Number(costUsd) > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          "$",
+          Number(costUsd).toFixed(4)
+        ] }),
+        event.duration_ms != null && /* @__PURE__ */ jsxs("span", { children: [
+          (Number(event.duration_ms) / 1e3).toFixed(1),
+          "s"
+        ] }),
+        event.duration_api_ms != null && /* @__PURE__ */ jsxs("span", { children: [
+          "API: ",
+          (Number(event.duration_api_ms) / 1e3).toFixed(1),
+          "s"
+        ] })
+      ] })
+    ] }, idx);
+  }
+  if (event.type === "error") {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-md p-3 bg-red-950 border border-red-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-red-400", children: "Error" }),
+        event.code ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-red-400/70", children: String(event.code) }) : null
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground mt-1", children: String(event.error ?? "Unknown error") })
+    ] }, idx);
+  }
+  if (event.type === "stream_detached") {
+    return /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground italic border-t border-border pt-2", children: [
+      "Stream detached at ",
+      event.timestamp ? new Date(String(event.timestamp)).toLocaleTimeString() : "unknown",
+      " \u2014 run continues in background"
+    ] }, idx);
+  }
+  if (event.type === "queued") {
+    return /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Queued\u2026" }, idx);
+  }
+  if (event.type === "sandbox_starting") {
+    return /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Starting sandbox\u2026" }, idx);
+  }
+  if (event.type === "run_started") {
+    return /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+      "Agent started",
+      event.model ? /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-foreground/60", children: String(event.model) }) : null,
+      event.mcp_server_count != null && Number(event.mcp_server_count) > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+        String(event.mcp_server_count),
+        " MCP server",
+        Number(event.mcp_server_count) !== 1 ? "s" : ""
+      ] })
+    ] }, idx);
+  }
+  if (event.type === "system") {
+    return /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground italic", children: String(event.message ?? JSON.stringify(event)) }, idx);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-purple-400 uppercase", children: event.type }),
+    /* @__PURE__ */ jsx(CollapsibleJson, { data: event, maxHeight: "8rem" })
+  ] }, idx);
+}
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
+function PlaygroundPage({ agentId }) {
+  const client = useAgentPlaneClient();
+  const { LinkComponent, basePath } = useNavigation();
+  const { data: agent, error: agentError, isLoading } = useApi(
+    `agent-${agentId}`,
+    (c) => c.agents.get(agentId)
+  );
+  const [prompt, setPrompt] = useState("");
+  const [events, setEvents] = useState([]);
+  const [streamingText, setStreamingText] = useState("");
+  const [running, setRunning] = useState(false);
+  const [polling, setPolling] = useState(false);
+  const [error, setError] = useState(null);
+  const [sessionId, setSessionId] = useState(null);
+  const sessionIdRef = useRef(null);
+  const abortRef = useRef(null);
+  const runIdRef = useRef(null);
+  const streamRef = useRef(null);
+  const scrollRef = useRef(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [events, streamingText]);
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+      streamRef.current?.abort();
+    };
+  }, []);
+  const pollForFinalResult = useCallback(async (runId) => {
+    setPolling(true);
+    let delay = 3e3;
+    const maxDelay = 1e4;
+    try {
+      while (true) {
+        if (abortRef.current?.signal.aborted) break;
+        await new Promise((r) => setTimeout(r, delay));
+        if (abortRef.current?.signal.aborted) break;
+        try {
+          const run = await client.runs.get(runId);
+          if (TERMINAL_STATUSES.has(run.status)) {
+            try {
+              const transcriptEvents = await client.runs.transcriptArray(runId);
+              if (transcriptEvents.length > 0) {
+                const detachIdx = transcriptEvents.findIndex((ev) => ev.type === "stream_detached");
+                const eventsAfterDetach = detachIdx >= 0 ? transcriptEvents.slice(detachIdx + 1) : [];
+                const newEvents = eventsAfterDetach.filter(
+                  (ev) => ev.type !== "heartbeat" && ev.type !== "text_delta" && ev.type !== "run_started" && ev.type !== "queued" && ev.type !== "sandbox_starting"
+                );
+                if (newEvents.length > 0) {
+                  setEvents((prev) => [...prev, ...newEvents]);
+                }
+              }
+            } catch {
+            }
+            setEvents((prev) => {
+              if (prev.some((ev) => ev.type === "result")) return prev;
+              const syntheticResult = {
+                type: "result",
+                subtype: run.status === "completed" ? "success" : "failed",
+                cost_usd: run.cost_usd,
+                num_turns: run.num_turns,
+                duration_ms: run.duration_ms
+              };
+              if (run.error_type) {
+                syntheticResult.result = run.error_type;
+              }
+              return [...prev, syntheticResult];
+            });
+            break;
+          }
+          delay = Math.min(delay * 2, maxDelay);
+        } catch (err) {
+          if (err?.name === "AbortError") break;
+          delay = Math.min(delay * 2, maxDelay);
+        }
+      }
+    } finally {
+      setPolling(false);
+      setRunning(false);
+      abortRef.current = null;
+      runIdRef.current = null;
+      streamRef.current = null;
+    }
+  }, [client]);
+  const consumeStream = useCallback(async (stream) => {
+    streamRef.current = stream;
+    let handedOffToPoll = false;
+    try {
+      for await (const event of stream) {
+        const ev = event;
+        if (ev.type === "session_created" && ev.session_id) {
+          const sid = ev.session_id;
+          sessionIdRef.current = sid;
+          setSessionId(sid);
+        }
+        if (ev.type === "run_started" && ev.run_id) {
+          runIdRef.current = ev.run_id;
+        }
+        if (ev.type === "text_delta") {
+          setStreamingText((prev) => prev + (ev.text ?? ""));
+        } else if (ev.type === "stream_detached") {
+          setStreamingText("");
+          setEvents((prev) => [...prev, ev]);
+          if (runIdRef.current) {
+            handedOffToPoll = true;
+            pollForFinalResult(runIdRef.current);
+            return;
+          }
+        } else {
+          if (ev.type === "assistant") setStreamingText("");
+          setEvents((prev) => [...prev, ev]);
+        }
+      }
+    } finally {
+      if (!handedOffToPoll) {
+        setRunning(false);
+        abortRef.current = null;
+        runIdRef.current = null;
+        streamRef.current = null;
+      }
+    }
+  }, [pollForFinalResult]);
+  const handleSend = useCallback(async () => {
+    if (!prompt.trim() || running) return;
+    const messageText = prompt.trim();
+    setPrompt("");
+    setRunning(true);
+    setStreamingText("");
+    setError(null);
+    setPolling(false);
+    setEvents((prev) => [...prev, { type: "user_message", text: messageText }]);
+    const abort = new AbortController();
+    abortRef.current = abort;
+    try {
+      let stream;
+      const currentSessionId = sessionIdRef.current;
+      if (currentSessionId) {
+        stream = await client.sessions.sendMessage(
+          currentSessionId,
+          { prompt: messageText },
+          { signal: abort.signal }
+        );
+      } else {
+        stream = await client.sessions.create(
+          { agent_id: agentId, prompt: messageText },
+          { signal: abort.signal }
+        );
+      }
+      await consumeStream(stream);
+    } catch (err) {
+      if (err?.name !== "AbortError") {
+        const msg = err instanceof Error ? err.message : "Unknown error";
+        setError(msg);
+      }
+      setRunning(false);
+      abortRef.current = null;
+      runIdRef.current = null;
+      streamRef.current = null;
+    }
+  }, [prompt, running, agentId, client, consumeStream]);
+  function handleNewChat() {
+    abortRef.current?.abort();
+    streamRef.current?.abort();
+    if (sessionId) {
+      client.sessions.stop(sessionId).catch(() => {
+      });
+    }
+    sessionIdRef.current = null;
+    setSessionId(null);
+    setEvents([]);
+    setStreamingText("");
+    setRunning(false);
+    setPolling(false);
+    setError(null);
+    setPrompt("");
+    runIdRef.current = null;
+    abortRef.current = null;
+    streamRef.current = null;
+    textareaRef.current?.focus();
+  }
+  function handleStop() {
+    abortRef.current?.abort();
+    streamRef.current?.abort();
+    const id = runIdRef.current;
+    if (id) {
+      runIdRef.current = null;
+      client.runs.cancel(id).catch(() => {
+      });
+    }
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-[calc(100vh-6rem)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "flex-1 rounded-lg" }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
+      ] })
+    ] });
+  }
+  if (agentError || !agent) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-[calc(100vh-6rem)] gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: agentError?.status === 404 ? "Agent not found." : `Failed to load agent: ${agentError?.message ?? "Unknown error"}` }),
+      /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: `${basePath}/agents`,
+          className: "text-sm text-muted-foreground hover:text-foreground",
+          children: "\u2190 Back to agents"
+        }
+      )
+    ] });
+  }
+  const hasContent = events.length > 0 || running;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-[calc(100vh-6rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+      /* @__PURE__ */ jsxs(
+        LinkComponent,
+        {
+          href: `${basePath}/agents/${agentId}`,
+          className: "text-sm text-muted-foreground hover:text-foreground",
+          children: [
+            "\u2190 ",
+            agent.name
+          ]
+        }
+      ),
+      (sessionId || events.length > 0) && /* @__PURE__ */ jsx(Button, { onClick: handleNewChat, variant: "outline", size: "sm", disabled: running, children: "New Chat" }),
+      sessionId && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-mono", children: [
+        "Session: ",
+        sessionId.slice(0, 12),
+        "\u2026"
+      ] })
+    ] }),
+    hasContent && /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "flex-1 min-h-0 overflow-y-auto rounded-lg border border-border bg-muted/20 p-4 space-y-4 mb-4", children: [
+      events.map((ev, i) => renderEvent(ev, i)),
+      streamingText && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-blue-400 uppercase", children: "Assistant" }),
+        /* @__PURE__ */ jsx(MarkdownContent, { children: streamingText }),
+        /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 bg-foreground animate-pulse align-text-bottom" })
+      ] }),
+      running && !streamingText && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "\u25CF" }),
+        " ",
+        polling ? "Reconnected, streaming updates\u2026" : "Running\u2026"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 shrink-0", children: [
+      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref: textareaRef,
+          placeholder: sessionId ? "Send a follow-up message\u2026" : "Enter your prompt\u2026",
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value),
+          rows: hasContent ? 3 : 12,
+          disabled: running,
+          className: "font-mono text-sm resize-none",
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSend();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { onClick: handleSend, disabled: running || !prompt.trim(), size: "sm", children: running ? "Running\u2026" : sessionId ? "Send" : "Run" }),
+        running && /* @__PURE__ */ jsx(Button, { onClick: handleStop, variant: "outline", size: "sm", children: "Stop" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-1", children: "\u2318+Enter to send" })
+      ] })
+    ] })
+  ] });
+}
 
-export { AdminTable, AdminTableHead, AdminTableRow, AgentA2aInfo, AgentConnectorsManager, AgentDetailPage, AgentEditForm, AgentListPage, AgentPluginManager, AgentRuns, AgentScheduleForm, AgentSkillManager, ConfirmDialog, CopyButton, DashboardPage, DetailPageHeader, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, 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, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyRow, FormError, FormField, LocalDate, McpServerListPage, MetricCard, ModelSelector, PaginationBar, PlaygroundPage, PluginDetailPage, PluginMarketplaceDetailPage, PluginMarketplaceListPage, RunDetailPage, RunListPage, RunSourceBadge, RunStatusBadge, SectionHeader, Select, SettingsPage, Tabs, Textarea, Th, ToolkitMultiselect, TranscriptViewer, parsePaginationParams };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcatalystiq/agent-plane-ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Embeddable React component library for AgentPlane",
   "type": "module",
   "exports": {
@@ -61,12 +61,16 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-markdown": "^9.0.0",
     "recharts": "^2.0.0",
+    "remark-gfm": "^4.0.0",
     "swr": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "react-markdown": {
       "optional": true
     },
+    "remark-gfm": {
+      "optional": true
+    },
     "recharts": {
       "optional": true
     },
@@ -96,6 +100,7 @@
   "devDependencies": {
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "remark-gfm": "^4.0.1",
     "swr": "^2.0.0",
     "tsup": "^8",
     "typescript": "^5"