@ash-ai/ui 0.0.2

package/dist/index.js

@@ -0,0 +1,1726 @@
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit" });
+}
+function formatTimestamp(ts) {
+  return new Date(ts).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function buildFileTree(files) {
+  const root = [];
+  for (const file of files) {
+    const parts = file.path.split("/");
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const name = parts[i];
+      const isLast = i === parts.length - 1;
+      const partialPath = parts.slice(0, i + 1).join("/");
+      let existing = current.find((n) => n.name === name && n.isDir === !isLast);
+      if (!existing) {
+        existing = {
+          name,
+          path: partialPath,
+          isDir: !isLast,
+          size: isLast ? file.size : void 0,
+          modifiedAt: isLast ? file.modifiedAt : void 0,
+          children: []
+        };
+        current.push(existing);
+      }
+      current = existing.children;
+    }
+  }
+  function sortNodes(nodes) {
+    nodes.sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+    for (const n of nodes) {
+      if (n.children.length > 0) sortNodes(n.children);
+    }
+  }
+  sortNodes(root);
+  return root;
+}
+function parseContentBlocks(content) {
+  let blocks = null;
+  if (typeof content === "string") {
+    try {
+      const parsed = JSON.parse(content);
+      if (Array.isArray(parsed)) {
+        blocks = parsed;
+      }
+    } catch {
+      return { text: content, toolCalls: [] };
+    }
+  } else if (Array.isArray(content)) {
+    blocks = content;
+  }
+  if (!blocks) {
+    return { text: typeof content === "string" ? content : "", toolCalls: [] };
+  }
+  let text = "";
+  const toolCalls = [];
+  for (const block of blocks) {
+    const b = block;
+    if (b.type === "text" && typeof b.text === "string") {
+      text += (text ? "\n" : "") + b.text;
+    } else if (b.type === "tool_use") {
+      toolCalls.push({
+        id: b.id || `tool-${toolCalls.length}`,
+        name: b.name || "unknown",
+        input: b.input,
+        state: "completed"
+      });
+    } else if (b.type === "tool_result") {
+      const match = toolCalls.find((tc) => tc.id === b.tool_use_id);
+      if (match) {
+        match.output = b.content;
+        match.isError = b.is_error ?? false;
+        match.state = b.is_error ? "error" : "completed";
+      }
+    }
+  }
+  return { text, toolCalls };
+}
+var IMAGE_EXTS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"]);
+function isImageFile(name) {
+  const ext = name.split(".").pop()?.toLowerCase();
+  return IMAGE_EXTS.has(ext || "");
+}
+function getFileLanguage(name) {
+  const ext = name.split(".").pop()?.toLowerCase();
+  const map = {
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    py: "python",
+    rs: "rust",
+    go: "go",
+    rb: "ruby",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    md: "markdown",
+    sh: "bash",
+    bash: "bash",
+    css: "css",
+    html: "html",
+    sql: "sql",
+    xml: "xml"
+  };
+  return map[ext || ""] || "text";
+}
+
+// src/context/PlaygroundContext.tsx
+import { createContext, useContext, useState as useState5, useCallback as useCallback4 } from "react";
+
+// src/hooks/usePlaygroundChat.ts
+import { useState, useCallback, useRef } from "react";
+function usePlaygroundChat({
+  client,
+  agentSlug,
+  initialSessionId,
+  onSessionStart,
+  onError
+}) {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [sessionId, setSessionId] = useState(initialSessionId ?? null);
+  const [attachedFiles, setAttachedFiles] = useState([]);
+  const sendingRef = useRef(false);
+  const startNewChat = useCallback(() => {
+    setSessionId(null);
+    setMessages([]);
+    setAttachedFiles([]);
+    setError(null);
+  }, []);
+  const loadSession = useCallback(async (sid) => {
+    setSessionId(sid);
+    setLoading(true);
+    setError(null);
+    try {
+      const sdkMessages = await client.listMessages(sid);
+      const msgs = [];
+      for (let i = 0; i < sdkMessages.length; i++) {
+        const m = sdkMessages[i];
+        let text = "";
+        const tools = [];
+        let parsed;
+        try {
+          parsed = JSON.parse(m.content);
+        } catch {
+          parsed = m.content;
+        }
+        const data = parsed;
+        if (data.type === "assistant" && Array.isArray(data.message?.content)) {
+          for (const b of data.message.content) {
+            if (b.type === "text" && b.text) {
+              text += (text ? "\n" : "") + b.text;
+            } else if (b.type === "tool_use") {
+              tools.push({
+                id: b.id || `tool-${tools.length}`,
+                name: b.name || "unknown",
+                input: b.input,
+                state: "completed"
+              });
+            }
+          }
+        }
+        if (data.type === "user" && data.tool_use_result) {
+          const r = data.tool_use_result;
+          const match = tools.find((tc) => tc.id === r.tool_use_id) || (msgs.length > 0 ? msgs[msgs.length - 1].toolCalls?.find((tc) => tc.id === r.tool_use_id) : void 0);
+          if (match) {
+            match.output = r.stdout ?? r.content;
+            match.isError = r.is_error ?? false;
+            match.state = r.is_error ? "error" : "completed";
+          }
+          continue;
+        }
+        if (data.type === "user" && !data.tool_use_result) {
+          const content = Array.isArray(data.content) ? data.content.filter((b) => b.type === "text").map((b) => b.text).join("\n") : typeof data.content === "string" ? data.content : "";
+          if (content) {
+            msgs.push({
+              id: m.id || `msg-${i}`,
+              role: "user",
+              content,
+              timestamp: m.createdAt
+            });
+          }
+          continue;
+        }
+        if (data.type === "result" && typeof data.result === "string") {
+          text = data.result;
+        }
+        if (text || tools.length > 0) {
+          msgs.push({
+            id: m.id || `msg-${i}`,
+            role: m.role === "user" ? "user" : "assistant",
+            content: text,
+            toolCalls: tools.length > 0 ? tools : void 0,
+            timestamp: m.createdAt
+          });
+        }
+      }
+      setMessages(msgs);
+    } catch {
+      setMessages([{ id: "err", role: "system", content: "Failed to load session messages." }]);
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  const send = useCallback(async () => {
+    const textContent = input.trim();
+    const readyFiles = attachedFiles.filter((f) => !f.uploading);
+    if (!textContent && readyFiles.length === 0 || !agentSlug || sendingRef.current) return;
+    let content = textContent;
+    if (readyFiles.length > 0) {
+      const fileRefs = readyFiles.map((f) => `[Attached file: ${f.filename}](${f.url})`).join("\n");
+      content = content ? `${content}
+
+${fileRefs}` : fileRefs;
+    }
+    let activeSessionId = sessionId;
+    if (!activeSessionId) {
+      setSending(true);
+      sendingRef.current = true;
+      setError(null);
+      try {
+        const session = await client.createSession(agentSlug);
+        activeSessionId = session.id;
+        setSessionId(activeSessionId);
+        onSessionStart?.(activeSessionId);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Failed to create session";
+        setError(msg);
+        onError?.(msg);
+        setSending(false);
+        sendingRef.current = false;
+        return;
+      }
+    }
+    setInput("");
+    setAttachedFiles([]);
+    const userMsg = {
+      id: `user-${Date.now()}`,
+      role: "user",
+      content,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setSending(true);
+    sendingRef.current = true;
+    const assistantId = `assistant-${Date.now()}`;
+    setMessages((prev) => [...prev, { id: assistantId, role: "assistant", content: "", isStreaming: true }]);
+    try {
+      let fullContent = "";
+      const toolCalls = [];
+      for await (const event of client.sendMessageStream(activeSessionId, content, { includePartialMessages: true })) {
+        if (event.type === "text_delta") {
+          const delta = event.data.delta || "";
+          fullContent += delta;
+          setMessages((prev) => prev.map(
+            (m) => m.id === assistantId ? { ...m, content: fullContent, toolCalls: [...toolCalls], isStreaming: true } : m
+          ));
+        } else if (event.type === "tool_use") {
+          const data = event.data;
+          const tc = {
+            id: data.id || `tool-${Date.now()}-${toolCalls.length}`,
+            name: data.name || "unknown",
+            input: data.input,
+            state: "running"
+          };
+          toolCalls.push(tc);
+          setMessages((prev) => prev.map(
+            (m) => m.id === assistantId ? { ...m, content: fullContent, toolCalls: [...toolCalls], isStreaming: true } : m
+          ));
+        } else if (event.type === "tool_result") {
+          const data = event.data;
+          const matchIdx = toolCalls.findIndex((tc) => tc.id === data.tool_use_id);
+          if (matchIdx !== -1) {
+            toolCalls[matchIdx] = {
+              ...toolCalls[matchIdx],
+              output: data.content,
+              isError: data.is_error ?? false,
+              state: data.is_error ? "error" : "completed"
+            };
+          } else {
+            toolCalls.push({
+              id: data.tool_use_id || `result-${Date.now()}`,
+              name: "tool_result",
+              input: void 0,
+              output: data.content,
+              isError: data.is_error ?? false,
+              state: data.is_error ? "error" : "completed"
+            });
+          }
+          setMessages((prev) => prev.map(
+            (m) => m.id === assistantId ? { ...m, content: fullContent, toolCalls: [...toolCalls], isStreaming: true } : m
+          ));
+        } else if (event.type === "turn_complete" || event.type === "done") {
+          const data = event.data;
+          if (!fullContent && data.result) {
+            fullContent = data.result;
+          }
+          for (const tc of toolCalls) {
+            if (tc.state === "running" || tc.state === "pending") tc.state = "completed";
+          }
+          setMessages((prev) => prev.map(
+            (m) => m.id === assistantId ? { ...m, content: fullContent || "(no response)", toolCalls: [...toolCalls], isStreaming: false, timestamp: (/* @__PURE__ */ new Date()).toISOString() } : m
+          ));
+        } else if (event.type === "error") {
+          const data = event.data;
+          const errText = data.error || "Unknown error";
+          setMessages((prev) => prev.map(
+            (m) => m.id === assistantId ? { ...m, role: "system", content: `Error: ${errText}`, isStreaming: false } : m
+          ));
+        }
+      }
+      for (const tc of toolCalls) {
+        if (tc.state === "running" || tc.state === "pending") tc.state = "completed";
+      }
+      setMessages((prev) => prev.map(
+        (m) => m.id === assistantId && m.isStreaming ? { ...m, content: fullContent || "(no response)", toolCalls: toolCalls.length > 0 ? [...toolCalls] : void 0, isStreaming: false, timestamp: (/* @__PURE__ */ new Date()).toISOString() } : m
+      ));
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : "Failed to send";
+      setMessages((prev) => prev.map(
+        (m) => m.id === assistantId ? { ...m, role: "system", content: `Error: ${errMsg}`, isStreaming: false } : m
+      ));
+    } finally {
+      setSending(false);
+      sendingRef.current = false;
+    }
+  }, [input, attachedFiles, sessionId, agentSlug, client, onSessionStart, onError]);
+  return {
+    messages,
+    input,
+    setInput,
+    sending,
+    loading,
+    error,
+    sessionId,
+    attachedFiles,
+    setAttachedFiles,
+    send,
+    loadSession,
+    startNewChat,
+    setMessages
+  };
+}
+
+// src/hooks/useAgents.ts
+import { useEffect, useState as useState2 } from "react";
+function useAgents({ client }) {
+  const [agents, setAgents] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const fetch_ = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await client.listAgents();
+      setAgents(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch agents");
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetch_();
+  }, []);
+  return { agents, loading, error, refresh: fetch_ };
+}
+
+// src/hooks/useSessions.ts
+import { useEffect as useEffect2, useState as useState3, useCallback as useCallback2 } from "react";
+function useSessions({
+  client,
+  agent,
+  limit = 20,
+  enabled = true
+}) {
+  const [sessions, setSessions] = useState3([]);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const fetch_ = useCallback2(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await client.listSessions({ agent, limit });
+      setSessions(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch sessions");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, agent, limit]);
+  useEffect2(() => {
+    if (enabled) fetch_();
+  }, [enabled, fetch_]);
+  return { sessions, loading, error, refresh: fetch_ };
+}
+
+// src/hooks/useHealthCheck.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useHealthCheck({ client }) {
+  const [connected, setConnected] = useState4(null);
+  const check = async () => {
+    try {
+      await client.health();
+      setConnected(true);
+    } catch {
+      setConnected(false);
+    }
+  };
+  useEffect3(() => {
+    check();
+  }, []);
+  return { connected, refresh: check };
+}
+
+// src/hooks/useFileUpload.ts
+import { useCallback as useCallback3 } from "react";
+function useFileUpload({
+  client,
+  onFilesChange,
+  onError
+}) {
+  const handleFileSelect = useCallback3(async (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    for (const file of Array.from(files)) {
+      const tempId = `uploading-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      onFilesChange((prev) => [...prev, { id: tempId, filename: file.name, url: "", uploading: true }]);
+      try {
+        const base64 = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => {
+            const result = reader.result;
+            resolve(result.split(",")[1]);
+          };
+          reader.onerror = () => reject(new Error("Failed to read file"));
+          reader.readAsDataURL(file);
+        });
+        const uploaded = await client.uploadFile({
+          filename: file.name,
+          content: base64,
+          mimeType: file.type || void 0,
+          ttl: "24h"
+        });
+        const url = await client.getFileUrl(uploaded.id);
+        onFilesChange(
+          (prev) => prev.map((f) => f.id === tempId ? { id: uploaded.id, filename: file.name, url, uploading: false } : f)
+        );
+      } catch {
+        onFilesChange((prev) => prev.filter((f) => f.id !== tempId));
+        onError?.(`Failed to upload ${file.name}`);
+      }
+    }
+    e.target.value = "";
+  }, [client, onFilesChange, onError]);
+  const removeFile = useCallback3((fileId) => {
+    onFilesChange((prev) => prev.filter((f) => f.id !== fileId));
+  }, [onFilesChange]);
+  return { handleFileSelect, removeFile };
+}
+
+// src/context/PlaygroundContext.tsx
+import { jsx } from "react/jsx-runtime";
+var PlaygroundCtx = createContext(null);
+function usePlaygroundContext() {
+  const ctx = useContext(PlaygroundCtx);
+  if (!ctx) throw new Error("usePlaygroundContext must be used within <PlaygroundProvider>");
+  return ctx;
+}
+function PlaygroundProvider({ client, defaultAgent, children }) {
+  const [selectedAgent, setSelectedAgentRaw] = useState5(defaultAgent || "");
+  const [showHistory, setShowHistory] = useState5(false);
+  const [terminalOpen, setTerminalOpen] = useState5(false);
+  const [filesOpen, setFilesOpen] = useState5(false);
+  const agentsHook = useAgents({ client });
+  const health = useHealthCheck({ client });
+  const resolvedAgent = selectedAgent || agentsHook.agents[0]?.slug || agentsHook.agents[0]?.name || "";
+  const chat = usePlaygroundChat({
+    client,
+    agentSlug: resolvedAgent
+  });
+  const sessions = useSessions({
+    client,
+    agent: resolvedAgent,
+    enabled: showHistory
+  });
+  const fileUpload = useFileUpload({
+    client,
+    onFilesChange: chat.setAttachedFiles,
+    onError: (err) => {
+      chat.setMessages((prev) => [
+        ...prev,
+        { id: `err-${Date.now()}`, role: "system", content: err }
+      ]);
+    }
+  });
+  const setSelectedAgent = useCallback4((slug) => {
+    setSelectedAgentRaw(slug);
+    chat.startNewChat();
+  }, [chat]);
+  const value = {
+    client,
+    chat,
+    agents: agentsHook,
+    sessions,
+    health,
+    fileUpload,
+    selectedAgent: resolvedAgent,
+    setSelectedAgent,
+    showHistory,
+    setShowHistory,
+    terminalOpen,
+    setTerminalOpen,
+    filesOpen,
+    setFilesOpen
+  };
+  return /* @__PURE__ */ jsx(PlaygroundCtx.Provider, { value, children });
+}
+
+// src/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function icon(d, opts) {
+  const Component = (props) => /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: opts?.viewBox ?? "0 0 24 24",
+      fill: opts?.fill ? "currentColor" : "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d })
+    }
+  );
+  return Component;
+}
+var Bot = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M12 8V4H8" }),
+  /* @__PURE__ */ jsx2("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+  /* @__PURE__ */ jsx2("path", { d: "M2 14h2" }),
+  /* @__PURE__ */ jsx2("path", { d: "M20 14h2" }),
+  /* @__PURE__ */ jsx2("path", { d: "M15 13v2" }),
+  /* @__PURE__ */ jsx2("path", { d: "M9 13v2" })
+] });
+var User = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "7", r: "4" })
+] });
+var Send = icon("m22 2-7 20-4-9-9-4Z M22 2 11 13");
+var MessageSquare = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx2("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+var Terminal = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("polyline", { points: "4 17 10 11 4 5" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", x2: "20", y1: "19", y2: "19" })
+] });
+var FolderOpen = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx2("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" }) });
+var Folder = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx2("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }) });
+var FileText = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ jsx2("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ jsx2("path", { d: "M10 9H8" }),
+  /* @__PURE__ */ jsx2("path", { d: "M16 13H8" }),
+  /* @__PURE__ */ jsx2("path", { d: "M16 17H8" })
+] });
+var FileCode = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ jsx2("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ jsx2("path", { d: "m10 13-2 2 2 2" }),
+  /* @__PURE__ */ jsx2("path", { d: "m14 17 2-2-2-2" })
+] });
+var FileJson = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+  /* @__PURE__ */ jsx2("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+  /* @__PURE__ */ jsx2("path", { d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1" }),
+  /* @__PURE__ */ jsx2("path", { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1" })
+] });
+var ImageIcon = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsx2("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+] });
+var Loader2 = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var ChevronDown = icon("m6 9 6 6 6-6");
+var ChevronUp = icon("m18 15-6-6-6 6");
+var ChevronRight = icon("m9 18 6-6-6-6");
+var Plus = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M5 12h14" }),
+  /* @__PURE__ */ jsx2("path", { d: "M12 5v14" })
+] });
+var X = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12" })
+] });
+var Paperclip = icon("m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48");
+var Clock = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx2("polyline", { points: "12 6 12 12 16 14" })
+] });
+var Wifi = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M12 20h.01" }),
+  /* @__PURE__ */ jsx2("path", { d: "M2 8.82a15 15 0 0 1 20 0" }),
+  /* @__PURE__ */ jsx2("path", { d: "M5 12.859a10 10 0 0 1 14 0" }),
+  /* @__PURE__ */ jsx2("path", { d: "M8.5 16.429a5 5 0 0 1 7 0" })
+] });
+var WifiOff = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M12 20h.01" }),
+  /* @__PURE__ */ jsx2("path", { d: "M8.5 16.429a5 5 0 0 1 7 0" }),
+  /* @__PURE__ */ jsx2("path", { d: "M5 12.859a10 10 0 0 1 5.17-2.69" }),
+  /* @__PURE__ */ jsx2("path", { d: "M19 12.859a10 10 0 0 0-2.007-1.523" }),
+  /* @__PURE__ */ jsx2("path", { d: "M2 8.82a15 15 0 0 1 4.177-2.643" }),
+  /* @__PURE__ */ jsx2("path", { d: "M22 8.82a15 15 0 0 0-11.288-3.764" }),
+  /* @__PURE__ */ jsx2("path", { d: "m2 2 20 20" })
+] });
+var Wrench = (props) => /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: /* @__PURE__ */ jsx2("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) });
+var CheckCircle2 = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx2("path", { d: "m9 12 2 2 4-4" })
+] });
+var XCircle = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx2("path", { d: "m15 9-6 6" }),
+  /* @__PURE__ */ jsx2("path", { d: "m9 9 6 6" })
+] });
+var Search = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx2("path", { d: "m21 21-4.3-4.3" })
+] });
+var Trash2 = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx2("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsx2("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsx2("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsx2("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+] });
+var ArrowDown = icon("M12 5v14 m7-7-7 7-7-7");
+var Download = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+  /* @__PURE__ */ jsx2("polyline", { points: "7 10 12 15 17 10" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+] });
+var RefreshCw = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [
+  /* @__PURE__ */ jsx2("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsx2("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ jsx2("path", { d: "M8 16H3v5" })
+] });
+function getFileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase();
+  if (["ts", "tsx", "js", "jsx", "py", "rs", "go", "rb", "sh", "bash"].includes(ext || ""))
+    return FileCode;
+  if (["json", "yaml", "yml", "toml"].includes(ext || ""))
+    return FileJson;
+  if (["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"].includes(ext || ""))
+    return ImageIcon;
+  return FileText;
+}
+
+// src/components/StatusIndicator.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatusIndicator({ connected, className }) {
+  if (connected === null) return null;
+  return /* @__PURE__ */ jsx3("div", { className: cn(
+    "flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[10px] font-medium border",
+    connected ? "bg-green-500/10 text-green-400 border-green-500/20" : "bg-red-500/10 text-red-400 border-red-500/20",
+    className
+  ), children: connected ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(Wifi, { className: "h-3 w-3" }),
+    " Runtime connected"
+  ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(WifiOff, { className: "h-3 w-3" }),
+    " Runtime disconnected"
+  ] }) });
+}
+
+// src/components/PlaygroundHeader.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PlaygroundHeader({
+  agents,
+  selectedAgent,
+  onAgentChange,
+  runtimeConnected,
+  showHistory,
+  onToggleHistory,
+  sessionId,
+  onNewChat,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: cn("shrink-0 flex items-center justify-between border-b border-white/10 pb-3 mb-4", className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs font-medium text-white/40 uppercase tracking-wider", children: [
+        /* @__PURE__ */ jsx4("span", { className: "w-1.5 h-1.5 rounded-full bg-accent animate-pulse" }),
+        "PLAYGROUND"
+      ] }),
+      /* @__PURE__ */ jsxs3(
+        "select",
+        {
+          value: selectedAgent,
+          onChange: (e) => onAgentChange(e.target.value),
+          className: "rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white focus:border-accent/50 focus:outline-none",
+          children: [
+            /* @__PURE__ */ jsx4("option", { value: "", disabled: true, children: "Select agent..." }),
+            agents.map((a) => /* @__PURE__ */ jsx4("option", { value: a.slug || a.name, children: a.name }, a.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4(StatusIndicator, { connected: runtimeConnected })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: onToggleHistory,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all",
+            showHistory ? "bg-accent/10 text-accent border-accent/30" : "bg-white/5 text-white/50 border-white/10 hover:bg-white/10"
+          ),
+          children: [
+            /* @__PURE__ */ jsx4(Clock, { className: "h-3 w-3" }),
+            "History"
+          ]
+        }
+      ),
+      selectedAgent && /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: onNewChat,
+          className: cn(
+            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all",
+            !sessionId ? "bg-accent/10 text-accent border-accent/30" : "bg-white/5 text-white/50 border-white/10 hover:bg-white/10"
+          ),
+          children: [
+            /* @__PURE__ */ jsx4(Plus, { className: "h-3 w-3" }),
+            "New Chat"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ChatMessages.tsx
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+
+// src/components/ToolCallBlock.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ToolCallBlock({ tool }) {
+  const [open, setOpen] = useState6(false);
+  const isRunning = tool.state === "running" || tool.state === "pending";
+  const isError = tool.state === "error";
+  const isDone = tool.state === "completed";
+  return /* @__PURE__ */ jsxs4("div", { className: "my-2 rounded-lg border border-white/10 bg-white/[0.03] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => setOpen(!open),
+        className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-white/5 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx5(Wrench, { className: "h-3.5 w-3.5 shrink-0 text-white/40" }),
+          /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium text-white/70 truncate", children: tool.name }),
+          /* @__PURE__ */ jsxs4("span", { className: "ml-auto flex items-center gap-1.5", children: [
+            isRunning && /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1 rounded-full bg-blue-500/10 border border-blue-500/20 px-2 py-0.5 text-[10px] font-medium text-blue-400", children: [
+              /* @__PURE__ */ jsx5(Loader2, { className: "h-3 w-3 animate-spin" }),
+              "Running"
+            ] }),
+            isDone && /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1 rounded-full bg-green-500/10 border border-green-500/20 px-2 py-0.5 text-[10px] font-medium text-green-400", children: [
+              /* @__PURE__ */ jsx5(CheckCircle2, { className: "h-3 w-3" }),
+              "Done"
+            ] }),
+            isError && /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1 rounded-full bg-red-500/10 border border-red-500/20 px-2 py-0.5 text-[10px] font-medium text-red-400", children: [
+              /* @__PURE__ */ jsx5(XCircle, { className: "h-3 w-3" }),
+              "Error"
+            ] }),
+            open ? /* @__PURE__ */ jsx5(ChevronDown, { className: "h-3 w-3 text-white/30" }) : /* @__PURE__ */ jsx5(ChevronRight, { className: "h-3 w-3 text-white/30" })
+          ] })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs4("div", { className: "border-t border-white/10 px-3 py-2 space-y-2", children: [
+      tool.input != null && /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-medium text-white/30 uppercase tracking-wider mb-1", children: "Input" }),
+        /* @__PURE__ */ jsx5("pre", { className: "rounded-md bg-black/30 px-3 py-2 text-[11px] text-white/60 overflow-x-auto max-h-48 scrollbar-thin", children: typeof tool.input === "string" ? tool.input : JSON.stringify(tool.input, null, 2) })
+      ] }),
+      tool.output != null && /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-medium text-white/30 uppercase tracking-wider mb-1", children: isError ? "Error" : "Output" }),
+        /* @__PURE__ */ jsx5(
+          "pre",
+          {
+            className: cn(
+              "rounded-md px-3 py-2 text-[11px] overflow-x-auto max-h-64 scrollbar-thin",
+              isError ? "bg-red-500/10 text-red-400" : "bg-black/30 text-white/60"
+            ),
+            children: typeof tool.output === "string" ? tool.output : JSON.stringify(tool.output, null, 2)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/ChatMessage.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatMessage({ message: msg }) {
+  const isUser = msg.role === "user";
+  const isSystem = msg.role === "system";
+  if (isSystem) {
+    return /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx6("span", { className: "max-w-lg rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-2 text-xs text-red-400", children: msg.content }) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex gap-3", isUser ? "flex-row-reverse" : "flex-row"), children: [
+    /* @__PURE__ */ jsx6("div", { className: cn(
+      "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
+      isUser ? "bg-accent/20" : "bg-white/10"
+    ), children: isUser ? /* @__PURE__ */ jsx6(User, { className: "h-4 w-4 text-accent" }) : /* @__PURE__ */ jsx6(Bot, { className: "h-4 w-4 text-white/60" }) }),
+    /* @__PURE__ */ jsxs5("div", { className: cn(
+      "max-w-[75%] rounded-2xl px-4 py-2.5",
+      isUser ? "bg-accent/10 border border-accent/20 text-white" : "bg-white/5 border border-white/10 text-white/80"
+    ), children: [
+      msg.content && /* @__PURE__ */ jsxs5("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
+        msg.content,
+        msg.isStreaming && !msg.toolCalls?.some((tc) => tc.state === "running") && /* @__PURE__ */ jsx6("span", { className: "ml-1 inline-block h-4 w-0.5 animate-pulse bg-accent align-text-bottom" })
+      ] }),
+      msg.toolCalls && msg.toolCalls.length > 0 && /* @__PURE__ */ jsxs5("div", { className: cn(msg.content && "mt-2"), children: [
+        msg.toolCalls.map((tc) => /* @__PURE__ */ jsx6(ToolCallBlock, { tool: tc }, tc.id)),
+        msg.isStreaming && msg.toolCalls.some((tc) => tc.state === "running") && /* @__PURE__ */ jsx6("span", { className: "ml-1 inline-block h-4 w-0.5 animate-pulse bg-accent align-text-bottom" })
+      ] }),
+      msg.isStreaming && !msg.content && (!msg.toolCalls || msg.toolCalls.length === 0) && /* @__PURE__ */ jsx6("span", { className: "inline-block h-4 w-0.5 animate-pulse bg-accent align-text-bottom" }),
+      msg.timestamp && /* @__PURE__ */ jsx6("div", { className: "mt-1 text-right text-xs text-white/30", children: formatTime(msg.timestamp) })
+    ] })
+  ] });
+}
+
+// src/components/ChatMessages.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatMessages({ messages, className }) {
+  const chatRef = useRef2(null);
+  useEffect4(() => {
+    if (chatRef.current) {
+      chatRef.current.scrollTo({ top: chatRef.current.scrollHeight, behavior: "smooth" });
+    }
+  }, [messages]);
+  return /* @__PURE__ */ jsx7("div", { ref: chatRef, className: className ?? "flex-1 overflow-auto p-4 space-y-3 scrollbar-thin", children: messages.length === 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
+    /* @__PURE__ */ jsx7(MessageSquare, { className: "mb-3 h-8 w-8 text-white/20" }),
+    /* @__PURE__ */ jsx7("p", { className: "text-sm text-white/40", children: "No messages yet" }),
+    /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-white/30", children: "Send a message to start the conversation" })
+  ] }) : messages.map((msg) => /* @__PURE__ */ jsx7(ChatMessage, { message: msg }, msg.id)) });
+}
+
+// src/components/ChatInput.tsx
+import { useRef as useRef3 } from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChatInput({
+  input,
+  onInputChange,
+  onSend,
+  sending,
+  disabled,
+  placeholder = "Send a message...",
+  attachedFiles = [],
+  onFileSelect,
+  onRemoveFile,
+  className
+}) {
+  const textareaRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+  const readyFiles = attachedFiles.filter((f) => !f.uploading);
+  const canSend = (input.trim() || readyFiles.length > 0) && !sending && !disabled;
+  return /* @__PURE__ */ jsxs7("div", { className: cn("shrink-0 border-t border-white/10 p-4", className), children: [
+    attachedFiles.length > 0 && /* @__PURE__ */ jsx8("div", { className: "mb-2 flex flex-wrap gap-2", children: attachedFiles.map((file) => /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs",
+          file.uploading ? "border-white/10 bg-white/5 text-white/40" : "border-accent/20 bg-accent/5 text-accent"
+        ),
+        children: [
+          file.uploading ? /* @__PURE__ */ jsx8(Loader2, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx8(Paperclip, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx8("span", { className: "max-w-[180px] truncate", children: file.filename }),
+          !file.uploading && onRemoveFile && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: () => onRemoveFile(file.id),
+              className: "ml-0.5 rounded-full p-0.5 hover:bg-white/10 transition-colors",
+              children: /* @__PURE__ */ jsx8(X, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      file.id
+    )) }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-end gap-3", children: [
+      onFileSelect && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            onChange: onFileSelect,
+            className: "hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: () => fileInputRef.current?.click(),
+            disabled: sending || disabled,
+            className: cn(
+              "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border transition-colors",
+              "border-white/10 bg-white/5 text-white/40 hover:bg-white/10 hover:text-white/60",
+              (sending || disabled) && "opacity-50 cursor-not-allowed"
+            ),
+            title: "Attach files",
+            children: /* @__PURE__ */ jsx8(Paperclip, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: input,
+          onChange: (e) => {
+            onInputChange(e.target.value);
+            const el = e.target;
+            el.style.height = "auto";
+            el.style.height = Math.min(el.scrollHeight, 160) + "px";
+          },
+          onKeyDown: handleKeyDown,
+          placeholder,
+          rows: 1,
+          className: cn(
+            "w-full resize-none rounded-xl border bg-white/5 px-4 py-3 text-sm text-white",
+            "border-white/10 placeholder:text-white/40",
+            "focus:border-accent/50 focus:outline-none focus:ring-0"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          onClick: onSend,
+          disabled: !canSend,
+          className: cn(
+            "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl transition-colors",
+            canSend ? "bg-accent text-white hover:bg-accent/90" : "bg-white/5 text-white/20 cursor-not-allowed"
+          ),
+          children: sending ? /* @__PURE__ */ jsx8(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx8(Send, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/Chat.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function Chat({
+  messages,
+  input,
+  onInputChange,
+  onSend,
+  sending,
+  loading,
+  error,
+  isActive,
+  agentName,
+  attachedFiles,
+  onFileSelect,
+  onRemoveFile,
+  className
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: cn("flex flex-col overflow-hidden", className), children: [
+    loading ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-1 items-center justify-center", children: [
+      /* @__PURE__ */ jsx9(Loader2, { className: "mr-2 h-5 w-5 animate-spin text-white/40" }),
+      /* @__PURE__ */ jsx9("span", { className: "text-sm text-white/50", children: "Loading session..." })
+    ] }) : !isActive ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-1 flex-col items-center justify-center text-center px-8", children: [
+      /* @__PURE__ */ jsx9("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent/10 border border-accent/20", children: /* @__PURE__ */ jsx9(MessageSquare, { className: "h-8 w-8 text-accent" }) }),
+      /* @__PURE__ */ jsx9("h2", { className: "text-xl font-semibold text-white", children: "Agent Playground" }),
+      /* @__PURE__ */ jsx9("p", { className: "mt-2 max-w-md text-sm text-white/50", children: agentName ? `Start a new conversation with ${agentName}, or resume a past session from History.` : "Select an agent above to get started." }),
+      agentName && /* @__PURE__ */ jsxs8("div", { className: "mt-4 inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white/70", children: [
+        /* @__PURE__ */ jsx9(Bot, { className: "h-4 w-4 text-accent" }),
+        agentName
+      ] })
+    ] }) : /* @__PURE__ */ jsx9(ChatMessages, { messages }),
+    error && /* @__PURE__ */ jsx9("div", { className: "shrink-0 mx-4 mb-2 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-2.5 text-sm text-red-400", children: error }),
+    agentName && /* @__PURE__ */ jsx9(
+      ChatInput,
+      {
+        input,
+        onInputChange,
+        onSend,
+        sending,
+        placeholder: isActive ? "Send a message..." : "Send a message to start a new session...",
+        attachedFiles,
+        onFileSelect,
+        onRemoveFile
+      }
+    )
+  ] });
+}
+
+// src/components/SessionHistory.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function SessionHistory({ sessions, activeSessionId, onSelectSession, className }) {
+  return /* @__PURE__ */ jsxs9("div", { className: cn("w-64 shrink-0 rounded-lg border border-white/10 bg-white/[0.02] flex flex-col overflow-hidden", className), children: [
+    /* @__PURE__ */ jsx10("div", { className: "px-3 py-2 border-b border-white/10 text-xs font-medium text-white/40 uppercase tracking-wider", children: "Recent Sessions" }),
+    /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-auto scrollbar-thin", children: sessions.length === 0 ? /* @__PURE__ */ jsx10("p", { className: "px-3 py-6 text-center text-xs text-white/30", children: "No sessions yet" }) : sessions.map((s) => /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        onClick: () => onSelectSession(s),
+        className: cn(
+          "w-full text-left px-3 py-2.5 border-b border-white/5 hover:bg-white/5 transition-colors",
+          activeSessionId === s.id && "border-l-2 border-l-accent bg-accent/5"
+        ),
+        children: [
+          /* @__PURE__ */ jsx10("div", { className: "text-xs font-medium text-white truncate", children: s.agentName }),
+          /* @__PURE__ */ jsxs9("div", { className: "text-[10px] text-white/30 mt-0.5", children: [
+            s.createdAt ? new Date(s.createdAt).toLocaleDateString() : "No events",
+            /* @__PURE__ */ jsx10("span", { className: "mx-1 text-white/15", children: "|" }),
+            /* @__PURE__ */ jsx10("span", { className: cn(
+              s.status === "active" ? "text-green-400" : "text-white/30"
+            ), children: s.status })
+          ] })
+        ]
+      },
+      s.id
+    )) })
+  ] });
+}
+
+// src/components/Terminal.tsx
+import { useEffect as useEffect5, useState as useState7, useRef as useRef4, useCallback as useCallback5 } from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var levelColors = {
+  stdout: "text-green-300",
+  stderr: "text-red-400",
+  system: "text-white/40"
+};
+function Terminal2({ logs, connected, onClear, className }) {
+  const [filter, setFilter] = useState7("");
+  const [showTimestamps, setShowTimestamps] = useState7(false);
+  const [autoScroll, setAutoScroll] = useState7(true);
+  const containerRef = useRef4(null);
+  useEffect5(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+  const handleScroll = useCallback5(() => {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const atBottom = scrollHeight - scrollTop - clientHeight < 40;
+    setAutoScroll(atBottom);
+  }, []);
+  const scrollToBottom = () => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      setAutoScroll(true);
+    }
+  };
+  const filteredLogs = filter ? logs.filter((l) => l.text.toLowerCase().includes(filter.toLowerCase())) : logs;
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col bg-[#0d1117] rounded-lg border border-white/10 overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 border-b border-white/10 px-3 py-2 bg-[#161b22]", children: [
+      /* @__PURE__ */ jsx11(Terminal, { className: "h-3.5 w-3.5 text-white/50" }),
+      /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium text-white/60", children: "Terminal" }),
+      /* @__PURE__ */ jsx11("div", { className: cn(
+        "ml-1 flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium",
+        connected === true ? "text-green-400" : connected === false ? "text-red-400" : "text-white/30"
+      ), children: connected === true ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx11(Wifi, { className: "h-2.5 w-2.5" }),
+        " Live"
+      ] }) : connected === false ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx11(WifiOff, { className: "h-2.5 w-2.5" }),
+        " Disconnected"
+      ] }) : "Connecting..." }),
+      /* @__PURE__ */ jsx11("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxs10("span", { className: "text-[10px] text-white/30", children: [
+        filteredLogs.length.toLocaleString(),
+        " line",
+        filteredLogs.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          onClick: () => setShowTimestamps(!showTimestamps),
+          className: cn(
+            "rounded p-1 text-white/40 hover:bg-white/10 hover:text-white/70 transition-colors",
+            showTimestamps && "bg-white/10 text-white/70"
+          ),
+          title: "Toggle timestamps",
+          children: /* @__PURE__ */ jsx11(Clock, { className: "h-3 w-3" })
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx11(Search, { className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-white/30" }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            type: "text",
+            value: filter,
+            onChange: (e) => setFilter(e.target.value),
+            placeholder: "Filter...",
+            className: "h-6 w-32 rounded border border-white/10 bg-white/5 pl-7 pr-2 text-[11px] text-white placeholder:text-white/30 focus:border-white/20 focus:outline-none"
+          }
+        )
+      ] }),
+      !autoScroll && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          onClick: scrollToBottom,
+          className: "rounded p-1 text-white/40 hover:bg-white/10 hover:text-white/70 transition-colors",
+          title: "Scroll to bottom",
+          children: /* @__PURE__ */ jsx11(ArrowDown, { className: "h-3 w-3" })
+        }
+      ),
+      onClear && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          onClick: onClear,
+          className: "rounded p-1 text-white/40 hover:bg-white/10 hover:text-white/70 transition-colors",
+          title: "Clear",
+          children: /* @__PURE__ */ jsx11(Trash2, { className: "h-3 w-3" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref: containerRef,
+        onScroll: handleScroll,
+        className: "flex-1 overflow-auto p-3 font-mono text-xs leading-5 scrollbar-thin min-h-[120px]",
+        children: filteredLogs.length === 0 ? /* @__PURE__ */ jsx11("div", { className: "flex h-full items-center justify-center text-white/20 text-xs", children: logs.length === 0 ? "Waiting for sandbox output..." : "No matching lines" }) : filteredLogs.map((entry) => /* @__PURE__ */ jsxs10("div", { className: "flex hover:bg-white/5 rounded px-1 -mx-1", children: [
+          showTimestamps && /* @__PURE__ */ jsx11("span", { className: "mr-3 shrink-0 select-none text-white/20", children: formatTimestamp(entry.ts) }),
+          /* @__PURE__ */ jsx11("span", { className: cn(
+            "whitespace-pre-wrap break-all",
+            levelColors[entry.level] || "text-white/60"
+          ), children: entry.text })
+        ] }, entry.index))
+      }
+    )
+  ] });
+}
+
+// src/components/FileBrowser.tsx
+import { useRef as useRef5 } from "react";
+
+// src/components/FileTree.tsx
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function TreeItem({
+  node,
+  depth,
+  selectedPath,
+  expandedDirs,
+  onSelectFile,
+  onToggleDir
+}) {
+  const isExpanded = expandedDirs.has(node.path);
+  const isSelected = selectedPath === node.path;
+  const Icon = node.isDir ? isExpanded ? FolderOpen : Folder : getFileIcon(node.name);
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        onClick: () => node.isDir ? onToggleDir(node.path) : onSelectFile(node.path),
+        className: cn(
+          "flex items-center gap-1.5 w-full text-left py-1 pr-2 text-xs transition-colors hover:bg-white/5",
+          isSelected && !node.isDir && "bg-accent/10 text-accent",
+          !isSelected && "text-white/60"
+        ),
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        children: [
+          node.isDir ? isExpanded ? /* @__PURE__ */ jsx12(ChevronDown, { className: "h-3 w-3 shrink-0 text-white/30" }) : /* @__PURE__ */ jsx12(ChevronRight, { className: "h-3 w-3 shrink-0 text-white/30" }) : /* @__PURE__ */ jsx12("span", { className: "w-3" }),
+          /* @__PURE__ */ jsx12(Icon, { className: cn(
+            "h-3.5 w-3.5 shrink-0",
+            node.isDir ? "text-accent" : "text-white/40"
+          ) }),
+          /* @__PURE__ */ jsx12("span", { className: "truncate", children: node.name }),
+          node.isDir && node.children.length > 0 && /* @__PURE__ */ jsx12("span", { className: "ml-auto text-[10px] text-white/20 shrink-0", children: node.children.length })
+        ]
+      }
+    ),
+    node.isDir && isExpanded && node.children.map((child) => /* @__PURE__ */ jsx12(
+      TreeItem,
+      {
+        node: child,
+        depth: depth + 1,
+        selectedPath,
+        expandedDirs,
+        onSelectFile,
+        onToggleDir
+      },
+      child.path
+    ))
+  ] });
+}
+function FileTree({ nodes, selectedPath, expandedDirs, onSelectFile, onToggleDir }) {
+  return /* @__PURE__ */ jsx12("div", { className: "overflow-y-auto scrollbar-thin", children: nodes.map((node) => /* @__PURE__ */ jsx12(
+    TreeItem,
+    {
+      node,
+      depth: 0,
+      selectedPath,
+      expandedDirs,
+      onSelectFile,
+      onToggleDir
+    },
+    node.path
+  )) });
+}
+
+// src/components/FileBrowser.tsx
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function FileBrowser({
+  files,
+  source,
+  loading,
+  selectedPath,
+  fileContent,
+  fileLoading,
+  fileError,
+  expandedDirs,
+  filter,
+  onFilterChange,
+  onSelectFile,
+  onToggleDir,
+  onRefresh,
+  fileBaseUrl,
+  className
+}) {
+  const contentRef = useRef5(null);
+  if (loading) {
+    return /* @__PURE__ */ jsxs12("div", { className: cn("flex items-center justify-center py-12", className), children: [
+      /* @__PURE__ */ jsx13(Loader2, { className: "mr-2 h-4 w-4 animate-spin text-white/40" }),
+      /* @__PURE__ */ jsx13("span", { className: "text-sm text-white/50", children: "Loading files..." })
+    ] });
+  }
+  if (files.length === 0) {
+    return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-col items-center justify-center py-12 text-center", className), children: [
+      /* @__PURE__ */ jsx13(FolderOpen, { className: "mb-3 h-10 w-10 text-white/20" }),
+      /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-white/50", children: "No files in workspace" }),
+      /* @__PURE__ */ jsx13("p", { className: "mt-1 text-xs text-white/40", children: "Files created by the agent will appear here" })
+    ] });
+  }
+  const filteredFiles = filter ? files.filter((f) => f.path.toLowerCase().includes(filter.toLowerCase())) : files;
+  const tree = buildFileTree(filteredFiles);
+  const selectedFile = files.find((f) => f.path === selectedPath);
+  const downloadUrl = fileBaseUrl && selectedPath ? `${fileBaseUrl}/${selectedPath}` : void 0;
+  return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 border-b border-white/10 px-3 py-2 shrink-0", children: [
+      source && /* @__PURE__ */ jsx13("span", { className: cn(
+        "rounded-full px-2 py-0.5 text-[10px] font-medium border",
+        source === "sandbox" ? "bg-green-500/10 text-green-400 border-green-500/20" : "bg-white/5 text-white/40 border-white/10"
+      ), children: source }),
+      /* @__PURE__ */ jsxs12("span", { className: "text-xs text-white/40", children: [
+        files.length,
+        " files"
+      ] }),
+      /* @__PURE__ */ jsx13("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx13(Search, { className: "absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-white/30" }),
+        /* @__PURE__ */ jsx13(
+          "input",
+          {
+            type: "text",
+            value: filter,
+            onChange: (e) => onFilterChange(e.target.value),
+            placeholder: "Filter...",
+            className: "w-40 rounded-md border border-white/10 bg-white/5 pl-7 pr-2 py-1 text-xs text-white placeholder:text-white/30 focus:border-accent/50 focus:outline-none"
+          }
+        ),
+        filter && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: () => onFilterChange(""),
+            className: "absolute right-1.5 top-1/2 -translate-y-1/2 text-white/30 hover:text-white",
+            children: /* @__PURE__ */ jsx13(X, { className: "h-3 w-3" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          onClick: onRefresh,
+          className: "rounded-md p-1 text-white/40 hover:bg-white/5 hover:text-white transition-colors",
+          title: "Refresh",
+          children: /* @__PURE__ */ jsx13(RefreshCw, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx13("div", { className: "w-64 shrink-0 border-r border-white/10 overflow-y-auto scrollbar-thin", children: /* @__PURE__ */ jsx13(
+        FileTree,
+        {
+          nodes: tree,
+          selectedPath,
+          expandedDirs,
+          onSelectFile,
+          onToggleDir
+        }
+      ) }),
+      /* @__PURE__ */ jsx13("div", { className: "flex-1 min-w-0 flex flex-col overflow-hidden", children: !selectedPath ? /* @__PURE__ */ jsx13("div", { className: "flex flex-1 items-center justify-center text-center", children: /* @__PURE__ */ jsxs12("div", { children: [
+        /* @__PURE__ */ jsx13(FileText, { className: "mx-auto mb-2 h-8 w-8 text-white/15" }),
+        /* @__PURE__ */ jsx13("p", { className: "text-xs text-white/30", children: "Select a file to view its contents" })
+      ] }) }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2 shrink-0", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ jsx13("span", { className: "font-mono text-xs text-white/60 truncate", children: selectedPath }),
+            selectedFile && /* @__PURE__ */ jsx13("span", { className: "text-[10px] text-white/30 shrink-0", children: formatBytes(selectedFile.size) })
+          ] }),
+          downloadUrl && /* @__PURE__ */ jsx13(
+            "a",
+            {
+              href: downloadUrl,
+              download: true,
+              className: "rounded-md p-1.5 text-white/40 hover:bg-white/5 hover:text-white transition-colors shrink-0",
+              title: "Download",
+              children: /* @__PURE__ */ jsx13(Download, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx13("div", { className: "flex-1 overflow-auto bg-[#0d1117]", children: fileLoading ? /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center py-12", children: [
+          /* @__PURE__ */ jsx13(Loader2, { className: "mr-2 h-4 w-4 animate-spin text-white/40" }),
+          /* @__PURE__ */ jsx13("span", { className: "text-xs text-white/50", children: "Loading..." })
+        ] }) : fileError ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-12 text-center px-4", children: [
+          /* @__PURE__ */ jsx13("p", { className: "text-xs text-white/40", children: fileError }),
+          downloadUrl && /* @__PURE__ */ jsx13(
+            "a",
+            {
+              href: downloadUrl,
+              download: true,
+              className: "mt-2 text-xs text-accent hover:underline",
+              children: "Download file"
+            }
+          )
+        ] }) : isImageFile(selectedPath) ? /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center p-4", children: downloadUrl && /* @__PURE__ */ jsx13(
+          "img",
+          {
+            src: downloadUrl,
+            alt: selectedPath,
+            className: "max-w-full max-h-[60vh] object-contain rounded"
+          }
+        ) }) : /* @__PURE__ */ jsx13(
+          "pre",
+          {
+            ref: contentRef,
+            className: "p-4 text-xs font-mono text-white/70 leading-relaxed whitespace-pre-wrap break-words",
+            children: fileContent
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/components/BottomPanels.tsx
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function BottomPanels({
+  terminalOpen,
+  onToggleTerminal,
+  filesOpen,
+  onToggleFiles,
+  className
+}) {
+  return /* @__PURE__ */ jsxs13("div", { className: cn("flex border-t border-white/10 bg-[#161b22] rounded-b-lg", className), children: [
+    /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        onClick: onToggleTerminal,
+        className: cn(
+          "flex flex-1 items-center justify-center gap-1.5 py-1 text-[10px] font-medium transition-colors",
+          terminalOpen ? "text-accent hover:text-accent/80" : "text-white/40 hover:text-white/60 hover:bg-[#1c2128]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx14(Terminal, { className: "h-3 w-3" }),
+          "Terminal",
+          terminalOpen ? /* @__PURE__ */ jsx14(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx14(ChevronUp, { className: "h-3 w-3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx14("div", { className: "w-px bg-white/10" }),
+    /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        onClick: onToggleFiles,
+        className: cn(
+          "flex flex-1 items-center justify-center gap-1.5 py-1 text-[10px] font-medium transition-colors",
+          filesOpen ? "text-accent hover:text-accent/80" : "text-white/40 hover:text-white/60 hover:bg-[#1c2128]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx14(FolderOpen, { className: "h-3 w-3" }),
+          "Files",
+          filesOpen ? /* @__PURE__ */ jsx14(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx14(ChevronUp, { className: "h-3 w-3" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/hooks/useTerminal.ts
+import { useEffect as useEffect6, useState as useState8, useRef as useRef6, useCallback as useCallback6 } from "react";
+function useTerminal({
+  client,
+  sessionId,
+  historical,
+  pollInterval = 500
+}) {
+  const [logs, setLogs] = useState8([]);
+  const [connected, setConnected] = useState8(null);
+  const lastIndexRef = useRef6(-1);
+  const pollingRef = useRef6(null);
+  const fetchLogs = useCallback6(async () => {
+    try {
+      const afterOpt = lastIndexRef.current >= 0 ? { after: lastIndexRef.current } : void 0;
+      const data = await client.getSessionLogs(sessionId, afterOpt);
+      setConnected(true);
+      if (data.logs && data.logs.length > 0) {
+        setLogs((prev) => [...prev, ...data.logs]);
+        lastIndexRef.current = data.logs[data.logs.length - 1].index;
+      }
+    } catch {
+      setConnected(false);
+    }
+  }, [client, sessionId]);
+  useEffect6(() => {
+    setLogs([]);
+    lastIndexRef.current = -1;
+    setConnected(null);
+    fetchLogs();
+    if (!historical) {
+      pollingRef.current = setInterval(fetchLogs, pollInterval);
+      return () => {
+        if (pollingRef.current) clearInterval(pollingRef.current);
+      };
+    }
+  }, [sessionId, historical, pollInterval, fetchLogs]);
+  const clearLogs = useCallback6(() => {
+    setLogs([]);
+  }, []);
+  return { logs, connected, clearLogs };
+}
+
+// src/hooks/useFileBrowser.ts
+import { useEffect as useEffect7, useState as useState9, useCallback as useCallback7 } from "react";
+function useFileBrowser({
+  client,
+  sessionId
+}) {
+  const [files, setFiles] = useState9([]);
+  const [source, setSource] = useState9(null);
+  const [loading, setLoading] = useState9(true);
+  const [selectedPath, setSelectedPath] = useState9(null);
+  const [fileContent, setFileContent] = useState9(null);
+  const [fileLoading, setFileLoading] = useState9(false);
+  const [fileError, setFileError] = useState9(null);
+  const [expandedDirs, setExpandedDirs] = useState9(/* @__PURE__ */ new Set());
+  const [filter, setFilter] = useState9("");
+  const fetchFiles = useCallback7(async () => {
+    setLoading(true);
+    try {
+      const data = await client.getSessionFiles(sessionId);
+      setFiles(data.files || []);
+      setSource(data.source || null);
+      const topDirs = /* @__PURE__ */ new Set();
+      for (const f of data.files || []) {
+        const first = f.path.split("/")[0];
+        if (f.path.includes("/")) topDirs.add(first);
+      }
+      setExpandedDirs(topDirs);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, [client, sessionId]);
+  useEffect7(() => {
+    fetchFiles();
+  }, [fetchFiles]);
+  const selectFile = useCallback7(async (path) => {
+    setSelectedPath(path);
+    setFileContent(null);
+    setFileError(null);
+    const ext = path.split(".").pop()?.toLowerCase();
+    const imageExts = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"]);
+    if (imageExts.has(ext || "")) return;
+    setFileLoading(true);
+    try {
+      const data = await client.getSessionFile(sessionId, path);
+      setFileContent(data.content || "");
+    } catch (err) {
+      setFileError("Failed to load file content");
+    } finally {
+      setFileLoading(false);
+    }
+  }, [client, sessionId]);
+  const toggleDir = useCallback7((path) => {
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+  return {
+    files,
+    source,
+    loading,
+    selectedPath,
+    fileContent,
+    fileLoading,
+    fileError,
+    expandedDirs,
+    filter,
+    setFilter,
+    selectFile,
+    toggleDir,
+    refresh: fetchFiles
+  };
+}
+
+// src/components/Playground.tsx
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function PlaygroundInner({ className }) {
+  const ctx = usePlaygroundContext();
+  const {
+    client,
+    chat,
+    agents,
+    sessions,
+    health,
+    fileUpload,
+    selectedAgent,
+    setSelectedAgent,
+    showHistory,
+    setShowHistory,
+    terminalOpen,
+    setTerminalOpen,
+    filesOpen,
+    setFilesOpen
+  } = ctx;
+  const selectedAgentObj = agents.agents.find((a) => (a.slug || a.name) === selectedAgent);
+  const isActive = chat.sessionId !== null;
+  return /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx15(
+      PlaygroundHeader,
+      {
+        agents: agents.agents,
+        selectedAgent,
+        onAgentChange: setSelectedAgent,
+        runtimeConnected: health.connected,
+        showHistory,
+        onToggleHistory: () => setShowHistory(!showHistory),
+        sessionId: chat.sessionId,
+        onNewChat: chat.startNewChat
+      }
+    ),
+    /* @__PURE__ */ jsxs14("div", { className: "flex flex-1 gap-4 min-h-0", children: [
+      showHistory && /* @__PURE__ */ jsx15(
+        SessionHistory,
+        {
+          sessions: sessions.sessions,
+          activeSessionId: chat.sessionId,
+          onSelectSession: (s) => {
+            chat.loadSession(s.id);
+            setShowHistory(false);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col min-w-0 gap-0", children: [
+        /* @__PURE__ */ jsx15(
+          Chat,
+          {
+            messages: chat.messages,
+            input: chat.input,
+            onInputChange: chat.setInput,
+            onSend: chat.send,
+            sending: chat.sending,
+            loading: chat.loading,
+            error: chat.error,
+            isActive,
+            agentName: selectedAgentObj?.name,
+            attachedFiles: chat.attachedFiles,
+            onFileSelect: fileUpload.handleFileSelect,
+            onRemoveFile: fileUpload.removeFile,
+            className: cn(
+              "rounded-lg border border-white/10 bg-white/[0.02]",
+              terminalOpen && chat.sessionId ? "flex-1 min-h-0" : "flex-1"
+            )
+          }
+        ),
+        chat.sessionId && /* @__PURE__ */ jsx15("div", { className: cn(
+          "shrink-0 transition-all",
+          terminalOpen ? "h-64" : "h-0"
+        ), children: terminalOpen && /* @__PURE__ */ jsx15(
+          TerminalPanel,
+          {
+            client,
+            sessionId: chat.sessionId
+          }
+        ) }),
+        chat.sessionId && /* @__PURE__ */ jsx15("div", { className: cn(
+          "shrink-0 transition-all",
+          filesOpen ? "h-72" : "h-0"
+        ), children: filesOpen && /* @__PURE__ */ jsx15(
+          FileBrowserPanel,
+          {
+            client,
+            sessionId: chat.sessionId
+          }
+        ) }),
+        chat.sessionId && /* @__PURE__ */ jsx15(
+          BottomPanels,
+          {
+            terminalOpen,
+            onToggleTerminal: () => setTerminalOpen(!terminalOpen),
+            filesOpen,
+            onToggleFiles: () => setFilesOpen(!filesOpen)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function TerminalPanel({ client, sessionId }) {
+  const { logs, connected, clearLogs } = useTerminal({ client, sessionId });
+  return /* @__PURE__ */ jsx15(
+    Terminal2,
+    {
+      logs,
+      connected,
+      onClear: clearLogs,
+      className: "h-full rounded-t-none border-t-0"
+    }
+  );
+}
+function FileBrowserPanel({ client, sessionId }) {
+  const fb = useFileBrowser({ client, sessionId });
+  return /* @__PURE__ */ jsx15(
+    FileBrowser,
+    {
+      files: fb.files,
+      source: fb.source,
+      loading: fb.loading,
+      selectedPath: fb.selectedPath,
+      fileContent: fb.fileContent,
+      fileLoading: fb.fileLoading,
+      fileError: fb.fileError,
+      expandedDirs: fb.expandedDirs,
+      filter: fb.filter,
+      onFilterChange: fb.setFilter,
+      onSelectFile: fb.selectFile,
+      onToggleDir: fb.toggleDir,
+      onRefresh: fb.refresh,
+      className: "h-full border-t border-white/10"
+    }
+  );
+}
+function Playground({ client, defaultAgent, className }) {
+  return /* @__PURE__ */ jsx15(PlaygroundProvider, { client, defaultAgent, children: /* @__PURE__ */ jsx15(PlaygroundInner, { className }) });
+}
+export {
+  BottomPanels,
+  Chat,
+  ChatInput,
+  ChatMessage,
+  ChatMessages,
+  FileBrowser,
+  FileTree,
+  Playground,
+  PlaygroundHeader,
+  PlaygroundProvider,
+  SessionHistory,
+  StatusIndicator,
+  Terminal2 as Terminal,
+  ToolCallBlock,
+  buildFileTree,
+  cn,
+  formatBytes,
+  formatTime,
+  getFileLanguage,
+  isImageFile,
+  parseContentBlocks,
+  useAgents,
+  useFileBrowser,
+  useFileUpload,
+  useHealthCheck,
+  usePlaygroundChat,
+  usePlaygroundContext,
+  useSessions,
+  useTerminal
+};
+//# sourceMappingURL=index.js.map