@recombine-ai/bosun 0.3.7 → 0.3.10

package/build/server/chunks/{_page.svelte-d8hJxmZl.js → _page.svelte-B3PTKffw.js}

@@ -1,25 +1,16 @@
-import { h as head, a as attr_class, e as ensure_array_like, s as stringify, b as attr, d as clsx, c as attr_style } from './index2-C572SQM_.js';
-import { p as page, g as goto } from './index3-DeV2OWZf.js';
-import { B as Button } from './Button-ZjVPI4zo.js';
-import { D as Dropdown, C as CopyTracesDropdown, a as ChatApiCallTrace, b as ChatConversationalTrace, c as ChatStepTrace } from './CopyTracesDropdown-B8MjGOwT.js';
-import { I as Icon } from './Icon-Csjrnozq.js';
+import { B as Button } from './Button-DZYrr6c0.js';
+import { D as Dropdown, C as ChatApiCallTrace, a as ChatConversationalTrace, b as ChatStepTrace } from './ChatStepTrace-COI_fylM.js';
+import { b as attr_class, s as stringify, e as ensure_array_like, a as attr, g as clsx, c as attr_style } from './index2-BuOY2QE4.js';
+import { I as Icon } from './Icon-BgknHaZs.js';
 import { X as escape_html } from './context-zH5kvtGY.js';
-import { o as onDestroy } from './Tab.svelte_svelte_type_style_lang-ByZ0KVzO.js';
-import { C as ContextEditor, P as Panel } from './ContextEditor-Dgs8Ax9B.js';
-import { I as Input } from './Input-BCU2QEQ2.js';
-import './trpc-client-Bucti7HD.js';
-import 'nunjucks';
-import { A as AgentSidebar } from './AgentSidebar-BIVt78i3.js';
-import { T as Tabs, a as Tab } from './Tab-Jw_OwV7Q.js';
-import { p as public_env } from './shared-server-DaWdgxVh.js';
-import { g as getAgentsContext } from './agents-context-BrlIlkOW.js';
-import './state.svelte-DtOGaiYC.js';
+import { t as trpc } from './trpc-client-Bucti7HD.js';
+import { g as getEditWorkspaceContext, P as Panel } from './edit-workspace-context-OTOIRCI0.js';
+import { b as chatContent, i as isApiCallTrace, d as isStepTrace, e as isConversationalTrace, l as logContent } from './log-content.svelte-B3ZvaoLs.js';
+import { I as Input } from './Input-DZT3Mm_-.js';
 import './utils-KcIDVAAe.js';
-import './index-DxaLoiKh.js';
-import 'js-yaml';
+import './state.svelte-DtOGaiYC.js';
 import '@trpc/client';
 
-/* empty css                                                  */
 function History($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let {
@@ -30,6 +21,20 @@ function History($$renderer, $$props) {
     } = $$props;
     let isOpen = false;
     let anchorEl = null;
+    const MONTHS_SHORT = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ];
     function toggleDropdown() {
       isOpen = !isOpen;
     }
@@ -60,8 +65,28 @@ function History($$renderer, $$props) {
         event.preventDefault();
       }
     }
+    function formatStateTime(d) {
+      const day = d.getDate();
+      const month = MONTHS_SHORT[d.getMonth()];
+      let hour = d.getHours();
+      const ampm = hour >= 12 ? "PM" : "AM";
+      hour = hour % 12;
+      if (hour === 0) hour = 12;
+      const minute = String(d.getMinutes()).padStart(2, "0");
+      const now = /* @__PURE__ */ new Date();
+      const year = d.getFullYear();
+      const yearPart = year !== now.getFullYear() ? ` ${year}` : "";
+      return `${day} ${month}${yearPart}, ${hour}:${minute} ${ampm}`;
+    }
+    function formatStateLabel(state) {
+      const fromId = new Date(state.id);
+      if (!Number.isNaN(fromId.getTime())) return formatStateTime(fromId);
+      const fromName = new Date(state.name);
+      if (!Number.isNaN(fromName.getTime())) return formatStateTime(fromName);
+      return state.name || "History";
+    }
     let selectedState = agentStates.find((s) => s.id === currentState) ?? null;
-    let triggerTitle = selectedState?.name ?? "History";
+    let triggerTitle = selectedState ? formatStateLabel(selectedState) : "History";
     let $$settled = true;
     let $$inner_renderer;
     function $$render_inner($$renderer3) {
@@ -73,7 +98,7 @@ function History($$renderer, $$props) {
         "aria-controls": "history-dropdown",
         onclick: toggleDropdown,
         onkeydown: handleKeyDown,
-        class: "flex w-60 items-center gap-2 text-nowrap rounded-lg border border-transparent !bg-rc-gray-700 !px-3 !pb-1 !pt-[5px] text-justify text-rc-gray-200 hover:border hover:border-rc-gray-500 focus:outline-none focus:ring-0",
+        class: "inline-flex w-40 items-center rounded-lg border border-transparent !bg-rc-gray-700 !px-3 !pb-1 !pt-[5px] text-rc-gray-200 hover:border hover:border-rc-gray-500 focus:outline-none focus:ring-0",
         get el() {
           return anchorEl;
         },
@@ -82,10 +107,10 @@ function History($$renderer, $$props) {
           $$settled = false;
         },
         children: ($$renderer4) => {
-          $$renderer4.push(`<span>${escape_html(triggerTitle)}</span> `);
+          $$renderer4.push(`<span class="min-w-0 flex-1 truncate text-left">${escape_html(triggerTitle)}</span> `);
           Icon($$renderer4, {
             name: "chevron-down",
-            class: "size-7 text-rc-gray-500 transition-transform duration-200 " + (isOpen ? "rotate-180" : "")
+            class: "size-7 shrink-0 text-rc-gray-500 transition-transform duration-200 " + (isOpen ? "rotate-180" : "")
           });
           $$renderer4.push(`<!---->`);
         },
@@ -94,7 +119,7 @@ function History($$renderer, $$props) {
       $$renderer3.push(`<!----> `);
       {
         let children = function($$renderer4) {
-          $$renderer4.push(`<div class="mt-1 max-h-96 w-60 overflow-y-auto rounded-lg border border-rc-gray-110 bg-rc-gray-930 shadow-inner-white-soft backdrop-blur-2xl" role="listbox"><!--[-->`);
+          $$renderer4.push(`<div class="mt-1 max-h-96 w-max min-w-full max-w-[min(26rem,90vw)] overflow-y-auto overflow-x-hidden rounded-lg border border-rc-gray-110 bg-rc-gray-930 backdrop-blur-2xl" role="listbox"><!--[-->`);
           const each_array = ensure_array_like(agentStates.slice().reverse());
           for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
             let state = each_array[$$index];
@@ -106,13 +131,13 @@ function History($$renderer, $$props) {
               onclick: () => handleSelectState(state.id),
               class: "group w-full rounded-none border-b border-rc-gray-110 py-2 pr-3 text-left backdrop-blur-2xl last:border-b-0 hover:bg-rc-gray-700 focus:bg-rc-gray-400",
               children: ($$renderer5) => {
-                $$renderer5.push(`<div class="flex items-start gap-2"><div class="min-w-0"><div class="p-1 text-sm text-rc-gray-300 group-hover:text-rc-gray-200">${escape_html(state.name)}</div> `);
+                $$renderer5.push(`<div class="flex items-start gap-2"><div class="min-w-0"><div class="truncate p-1 text-sm text-rc-gray-300 group-hover:text-rc-gray-200">${escape_html(formatStateLabel(state))}</div> `);
                 if (state.id === currentState) {
                   $$renderer5.push("<!--[-->");
-                  $$renderer5.push(`<div class="p-1 text-base font-semibold text-rc-green-200">${escape_html(truncateMessage(getUserMessage(state)))}</div>`);
+                  $$renderer5.push(`<div class="truncate p-1 text-base font-semibold text-rc-green-200">${escape_html(truncateMessage(getUserMessage(state)))}</div>`);
                 } else {
                   $$renderer5.push("<!--[!-->");
-                  $$renderer5.push(`<div class="p-1 text-base font-semibold text-rc-gray-100">${escape_html(truncateMessage(getUserMessage(state)))}</div>`);
+                  $$renderer5.push(`<div class="truncate p-1 text-base font-semibold text-rc-gray-100">${escape_html(truncateMessage(getUserMessage(state)))}</div>`);
                 }
                 $$renderer5.push(`<!--]--></div></div>`);
               },
@@ -141,23 +166,6 @@ function History($$renderer, $$props) {
     $$renderer2.subsume($$inner_renderer);
   });
 }
-let chatContent = [];
-function isStepTrace(entry) {
-  return !isApiCallTrace(entry) && !isConversationalTrace(entry);
-}
-function isApiCallTrace(entry) {
-  return "operationName" in entry && "method" in entry && "path" in entry;
-}
-function isConversationalTrace(entry) {
-  return "eventName" in entry && "role" in entry && "medium" in entry && "content" in entry;
-}
-function clearChatContent() {
-  chatContent.length = 0;
-}
-let logContent = [];
-function clearLogs() {
-  logContent.length = 0;
-}
 function Dialog($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let dialog;
@@ -305,7 +313,13 @@ function buildSegments(text, ranges) {
 }
 function PlaygroundChat($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    let { class: className, context, agentId } = $$props;
+    let {
+      class: className,
+      context,
+      agentId,
+      analyzeDisabled = false,
+      onAnalyzeTrace
+    } = $$props;
     let text = "";
     let imageUrlInputValue = "";
     let inputEl = null;
@@ -435,34 +449,70 @@ function PlaygroundChat($$renderer, $$props) {
         return false;
       });
     })();
-    let copiedLogs = false;
-    let logsTimer = null;
-    function tracesForCopy(includePrompts) {
-      if (includePrompts) return chatContent;
-      return chatContent.map((entry) => {
-        if (!isStepTrace(entry)) return entry;
-        const {
-          receivedPrompt: _receivedPrompt,
-          renderedPrompt: _renderedPrompt,
-          ...rest
-        } = entry;
-        return rest;
-      });
+    function findMainStepTraceForConversationTrace(idx) {
+      for (let i = idx - 1; i >= 0; i--) {
+        const entry = chatContent[i];
+        if (!isStepTrace(entry)) continue;
+        if (entry.name !== "main" && entry.name !== "mainReply") continue;
+        if (typeof entry.renderedPrompt !== "string") continue;
+        if (!entry.renderedPrompt.trim()) continue;
+        return entry;
+      }
+      for (let i = idx + 1; i < chatContent.length; i++) {
+        const entry = chatContent[i];
+        if (!isStepTrace(entry)) continue;
+        if (entry.name !== "main" && entry.name !== "mainReply") continue;
+        if (typeof entry.renderedPrompt !== "string") continue;
+        if (!entry.renderedPrompt.trim()) continue;
+        return entry;
+      }
+      return null;
+    }
+    function findNearestStringifiedConversation(idx) {
+      for (let i = idx - 1; i >= 0; i--) {
+        const entry = chatContent[i];
+        if (!isStepTrace(entry)) continue;
+        if (typeof entry.stringifiedConversation !== "string") continue;
+        const sc = entry.stringifiedConversation.trim();
+        if (!sc) continue;
+        return sc;
+      }
+      return null;
     }
-    async function copyAllLogs() {
+    function buildAnalyzeTraceInput(trace) {
+      const agent = (agentId ?? "").trim();
+      if (!agent) throw new Error("Agent id is not available; cannot analyze");
+      const idx = chatContent.indexOf(trace);
+      if (idx === -1) throw new Error("Could not locate trace in chat history");
+      const stepTrace = findMainStepTraceForConversationTrace(idx);
+      if (!stepTrace) {
+        throw new Error("Could not find main step trace for this message");
+      }
+      const renderedPrompt = typeof stepTrace.renderedPrompt === "string" ? stepTrace.renderedPrompt : "";
+      if (!renderedPrompt.trim()) throw new Error("Main step rendered prompt is missing");
+      const stringifiedConversation = typeof stepTrace.stringifiedConversation === "string" && stepTrace.stringifiedConversation.trim() ? stepTrace.stringifiedConversation : findNearestStringifiedConversation(idx) ?? "";
+      if (!stringifiedConversation.trim()) throw new Error("Main step conversation is missing");
+      const response = String(trace?.content ?? "");
+      if (!response.trim()) throw new Error("Message content is missing");
+      const model = typeof stepTrace?.model === "string" ? String(stepTrace.model) : void 0;
+      const createdAtRaw = trace?.createdAt;
+      const createdAt = typeof createdAtRaw === "number" && Number.isFinite(createdAtRaw) ? createdAtRaw : void 0;
+      return {
+        trace,
+        stepTrace,
+        renderedPrompt,
+        stringifiedConversation,
+        response,
+        model,
+        createdAt
+      };
+    }
+    function handleAnalyzeTrace(trace) {
+      if (!onAnalyzeTrace) return;
       try {
-        await navigator.clipboard.writeText(JSON.stringify(logContent, null, 2));
-        copiedLogs = true;
-        if (logsTimer) clearTimeout(logsTimer);
-        logsTimer = window.setTimeout(
-          () => {
-            copiedLogs = false;
-            logsTimer = null;
-          },
-          2e3
-        );
+        onAnalyzeTrace(buildAnalyzeTraceInput(trace));
       } catch (e) {
-        console.error("Failed to copy logs", e);
+        console.error(e);
       }
     }
     let $$settled = true;
@@ -502,29 +552,9 @@ function PlaygroundChat($$renderer, $$props) {
       });
       $$renderer3.push(`<!----> `);
       Panel($$renderer3, {
-        class: `relative flex flex-col p-2 pb-16 ${stringify(className)}`,
+        class: `relative flex min-h-0 flex-col p-2 pb-16 ${stringify(className)}`,
         children: ($$renderer4) => {
-          $$renderer4.push(`<div class="mb-2 flex flex-wrap items-center justify-end gap-2">`);
-          CopyTracesDropdown($$renderer4, {
-            disabled: !chatContent.length,
-            getWithPromptsText: () => JSON.stringify(tracesForCopy(true), null, 2),
-            getWithoutPromptsText: () => JSON.stringify(tracesForCopy(false), null, 2)
-          });
-          $$renderer4.push(`<!----> `);
-          Button($$renderer4, {
-            variant: "secondary",
-            size: "small",
-            disabled: !logContent.length,
-            onclick: (e) => {
-              e.stopPropagation();
-              copyAllLogs();
-            },
-            children: ($$renderer5) => {
-              $$renderer5.push(`<!---->${escape_html(copiedLogs ? "Copied all logs" : "Copy all logs")}`);
-            },
-            $$slots: { default: true }
-          });
-          $$renderer4.push(`<!----></div> <div class="rc-scroll flex-1 overflow-y-auto pr-1"><!--[-->`);
+          $$renderer4.push(`<div class="rc-scroll min-h-0 flex-1 overflow-y-auto pr-1"><!--[-->`);
           const each_array = ensure_array_like(renderableEntries);
           for (let idx = 0, $$length = each_array.length; idx < $$length; idx++) {
             let entry = each_array[idx];
@@ -545,7 +575,13 @@ function PlaygroundChat($$renderer, $$props) {
               $$renderer4.push("<!--[!-->");
               if (isConversationalTrace(entry)) {
                 $$renderer4.push("<!--[-->");
-                ChatConversationalTrace($$renderer4, { trace: entry, context, agentId });
+                ChatConversationalTrace($$renderer4, {
+                  trace: entry,
+                  context,
+                  agentId,
+                  analyzeDisabled,
+                  onAnalyze: onAnalyzeTrace ? handleAnalyzeTrace : void 0
+                });
               } else {
                 $$renderer4.push("<!--[!-->");
                 if (isStepTrace(entry)) {
@@ -645,309 +681,286 @@ function PlaygroundChat($$renderer, $$props) {
     $$renderer2.subsume($$inner_renderer);
   });
 }
-class WebSocketClient {
-  constructor(wsUrl) {
-    this.wsUrl = wsUrl;
-  }
-  ws = null;
-  openHandler = null;
-  closeHandler = null;
-  errorHandler = null;
-  messageHandler = null;
-  retries = 0;
-  maxRetries = 5;
-  retryDelay = 500;
-  retryTimeout = null;
-  isOpen = false;
-  isDestroyed = false;
-  init = () => {
-    if (this.isOpen) {
-      return;
-    }
-    console.log(`Initializing websocket connection with [${this.wsUrl}]`);
-    try {
-      this.ws = new WebSocket(this.wsUrl);
-    } catch (e) {
-      this.retryConnect();
-      return;
-    }
-    this.isDestroyed = false;
-    this.ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      if (message.channel === "error") {
-        this.errorHandler?.(message.message);
-      } else if (message.channel === "app-events") {
-        console.log("MSG:", message.event.type);
-      } else if (message.channel === "log") {
-        console.log(`MSG: log [${message.message.severity}]`, message.message.message);
-      } else if (message.channel === "api-call-trace") {
-        console.log(
-          "MSG: api-call-trace",
-          message.trace?.operationName,
-          message.trace?.method,
-          message.trace?.path
-        );
-      } else if (message.channel === "conversational-trace") {
-        console.log(
-          "MSG: conversational-trace",
-          message.trace?.eventName,
-          message.trace?.role,
-          message.trace?.medium
-        );
-      }
-      this.messageHandler?.(message);
-    };
-    this.ws.onerror = (error) => {
-      console.error("Websocket error:", error);
-      this.ws?.close();
-      this.retryConnect();
-    };
-    this.ws.onclose = () => {
-      console.log("Websocket closed");
-      this.isOpen = false;
-      this.retryConnect();
-    };
-    this.ws.onopen = () => {
-      this.retries = 0;
-      this.isOpen = true;
-      if (this.retryTimeout) {
-        clearTimeout(this.retryTimeout);
-      }
-      this.openHandler?.();
-      console.log("Websocket connected");
-    };
-  };
-  destroy = () => {
-    this.isDestroyed = true;
-    this.ws?.close();
-  };
-  onOpen = (handler) => {
-    this.openHandler = handler;
-    if (this.isOpen) {
-      handler();
-    }
-  };
-  onClose = (handler) => {
-    this.closeHandler = handler;
-    if (!this.isOpen) {
-      handler();
-    }
-  };
-  onError = (handler) => {
-    this.errorHandler = handler;
-  };
-  onMessage = (handler) => {
-    this.messageHandler = handler;
-  };
-  sendMessage = (message) => {
-    if (message.channel === "app-events") ;
-    this.ws?.send(JSON.stringify(message));
-  };
-  retryConnect = () => {
-    if (this.isDestroyed) return;
-    if (!this.isOpen && this.retries < this.maxRetries) {
-      this.retries++;
-      this.init();
-      this.retryTimeout = setTimeout(this.retryConnect, this.retryDelay);
-    } else {
-      this.errorHandler?.("WebSocket Error, please reload the browser");
-      this.closeHandler?.();
-    }
-  };
-}
-const wsHost = public_env.PUBLIC_WS_HOST ?? "ws://localhost:8080";
-const wsClient = new WebSocketClient(wsHost);
 function _page($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const { onAgentSelect, onError } = getAgentsContext();
-    let agents = [];
-    let steps = [];
-    let currentStep = null;
-    let agentStates = [];
-    let context = null;
-    let currentState = null;
-    function getQueryParam(key, params) {
-      if (params) return params.get(key);
-      if (typeof window === "undefined") return null;
-      const url = new URL(window.location.href);
-      return url.searchParams.get(key);
-    }
-    const agentIdFromUrl = getQueryParam("agent", page.url.searchParams);
-    onDestroy(() => {
-      wsClient.destroy();
-    });
-    function sendEvent(event) {
-      wsClient.sendMessage({ channel: "app-events", event });
-    }
-    function handleContextChanged(newContext) {
-      console.log("Context changed", newContext);
-      sendEvent({ type: "context-updated", context: newContext });
-    }
-    function selectAgent(agent) {
-      onAgentSelect(agent);
-    }
-    function handleSelectState(stateId) {
-      if (!agentIdFromUrl) {
-        return;
+    const { state: workspace, actions } = getEditWorkspaceContext();
+    let analyzeRunning = false;
+    let copied = null;
+    let copyTimer = null;
+    let copyMenuOpen = false;
+    let copyMenuAnchorEl = null;
+    function agentLabel(agentId) {
+      const label = (agentId || "").trim();
+      if (!label) return "Agent";
+      return label.split("/").at(-1) ?? label;
+    }
+    function formatHHmmss(ms) {
+      if (typeof ms !== "number" || !Number.isFinite(ms)) return null;
+      const d = new Date(ms);
+      if (Number.isNaN(d.getTime())) return null;
+      const hh = String(d.getHours()).padStart(2, "0");
+      const mm = String(d.getMinutes()).padStart(2, "0");
+      const ss = String(d.getSeconds()).padStart(2, "0");
+      return `${hh}:${mm}:${ss}`;
+    }
+    async function handleAnalyzeTrace(input) {
+      if (analyzeRunning) return;
+      analyzeRunning = true;
+      const requestId = actions.openPopover("analyze");
+      const time = formatHHmmss(input.createdAt);
+      const titleSuffix = time ? ` • ${time}` : "";
+      const title = `Analysis — ${agentLabel(workspace.agentId)}${titleSuffix}`;
+      try {
+        const res = await trpc.agents.analyzeTrace.mutate({
+          agentId: workspace.agentId,
+          traceId: input.trace?.traceId,
+          eventName: input.trace.eventName,
+          createdAt: input.createdAt,
+          model: input.model,
+          renderedPrompt: input.renderedPrompt,
+          stringifiedConversation: input.stringifiedConversation,
+          response: input.response,
+          stepTrace: input.stepTrace
+        });
+        if (workspace.edit.popover?.requestId !== requestId) return;
+        actions.setHighlightQuotes(res.quotes);
+        let raw = null;
+        try {
+          raw = JSON.stringify(res.raw, null, 2);
+        } catch {
+          raw = null;
+        }
+        actions.setPopoverReady(requestId, { title, quotes: res.quotes, raw });
+      } catch (e) {
+        console.error(e);
+        const message = typeof e?.message === "string" ? e.message : (() => {
+          try {
+            return JSON.stringify(e);
+          } catch {
+            return String(e);
+          }
+        })();
+        actions.setPopoverError(requestId, message || "Failed to analyze this response", { raw: message });
+      } finally {
+        analyzeRunning = false;
       }
-      currentState = stateId;
-      clearChatContent();
-      clearLogs();
-      sendEvent({
-        type: "select-agent",
-        agent: agentIdFromUrl,
-        state: currentState
-      });
     }
-    function handleNew() {
-      if (!agentIdFromUrl) {
-        return;
-      }
-      clearChatContent();
-      clearLogs();
-      currentState = null;
-      sendEvent({
-        type: "select-agent",
-        agent: agentIdFromUrl,
-        state: currentState
+    function tracesForCopy(includePrompts) {
+      if (includePrompts) return chatContent;
+      return chatContent.map((entry) => {
+        if (!isStepTrace(entry)) return entry;
+        const {
+          receivedPrompt: _receivedPrompt,
+          renderedPrompt: _renderedPrompt,
+          ...rest
+        } = entry;
+        return rest;
       });
     }
-    const panels = {
-      sidebar: {
-        width: "flex-[1] min-w-[140px] max-w-xs shrink-0"
-      },
-      promptColumn: {
-        width: "hidden",
-        visibility: "hidden"
-      },
-      chat: {
-        width: "flex-[4] min-w-0"
-      },
-      contextEditor: { width: "flex-[2] min-w-0 max-w-xl" }
-    };
-    function handleTabChange({ value }) {
-      if (value === "roleplay") return;
-      const agentId = getQueryParam("agent", page.url.searchParams);
-      getQueryParam("step");
-      if (value === "tests") {
-        if (agentId) {
-          goto();
-        } else {
-          goto();
-        }
-        return;
+    function setCopied(mode) {
+      copied = mode;
+      if (copyTimer) clearTimeout(copyTimer);
+      copyTimer = window.setTimeout(
+        () => {
+          copied = null;
+          copyTimer = null;
+        },
+        2e3
+      );
+    }
+    async function copyLogs() {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(logContent, null, 2));
+        setCopied("logs");
+      } catch (e) {
+        console.error("Failed to copy logs", e);
       }
-      if (value === "traces") {
-        goto();
-        return;
+    }
+    async function copyTraces(includePrompts) {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(tracesForCopy(includePrompts), null, 2));
+        setCopied(includePrompts ? "with-prompts" : "without-prompts");
+      } catch (e) {
+        console.error("Failed to copy traces", e);
       }
-      goto();
+    }
+    function handleNewChat() {
+      actions.closePopover();
+      actions.closeContextPopover();
+      actions.selectState(null);
     }
     let $$settled = true;
     let $$inner_renderer;
     function $$render_inner($$renderer3) {
-      head($$renderer3, ($$renderer4) => {
-        $$renderer4.title(($$renderer5) => {
-          $$renderer5.push(`<title>Bosun: Playground</title>`);
+      $$renderer3.push(`<div class="relative flex h-full min-h-0 flex-col"><div class="flex flex-none flex-nowrap items-center gap-2 p-2">`);
+      if (workspace.agentStates.length > 1) {
+        $$renderer3.push("<!--[-->");
+        History($$renderer3, {
+          agentStates: workspace.agentStates,
+          currentState: workspace.currentState,
+          class: "ml-9",
+          onSelectState: (id) => actions.selectState(id)
         });
+      } else {
+        $$renderer3.push("<!--[!-->");
+      }
+      $$renderer3.push(`<!--]--> <div class="ml-auto flex flex-none flex-nowrap items-center gap-2">`);
+      Button($$renderer3, {
+        variant: "secondary",
+        size: "small",
+        disabled: !workspace.agentId,
+        "aria-expanded": workspace.contextPopoverOpen,
+        "aria-haspopup": "dialog",
+        onclick: actions.toggleContextPopover,
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Edit context`);
+        },
+        $$slots: { default: true }
       });
-      $$renderer3.push(`<div class="flex h-screen">`);
-      AgentSidebar($$renderer3, {
-        className: "flex-none w-16",
-        agents,
-        currentAgent: agentIdFromUrl || "",
-        onSelect: selectAgent
-      });
-      $$renderer3.push(`<!----> <div class="flex h-full min-w-0 flex-1 flex-col bg-rc-gray-980 pb-3 pr-4 pt-2"><nav class="mb-3 flex h-14 flex-none items-center justify-between bg-rc-gray-980"><div class="flex items-center">`);
-      Tabs($$renderer3, {
-        value: page.url.pathname.replace(/^\//, ""),
-        ariaLabel: "Top tabs",
-        onChange: handleTabChange,
+      $$renderer3.push(`<!----> `);
+      Button($$renderer3, {
+        variant: "secondary",
+        size: "small",
+        disabled: !chatContent.length && !logContent.length,
+        "aria-expanded": copyMenuOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": "roleplay-copy-dropdown",
+        onclick: (e) => {
+          e.stopPropagation();
+          copyMenuOpen = !copyMenuOpen;
+        },
+        get el() {
+          return copyMenuAnchorEl;
+        },
+        set el($$value) {
+          copyMenuAnchorEl = $$value;
+          $$settled = false;
+        },
         children: ($$renderer4) => {
-          Tab($$renderer4, {
-            value: "roleplay",
-            class: "px-3",
-            children: ($$renderer5) => {
-              $$renderer5.push(`<!---->Roleplay`);
+          if (copied === "logs") {
+            $$renderer4.push("<!--[-->");
+            $$renderer4.push(`Copied logs`);
+          } else {
+            $$renderer4.push("<!--[!-->");
+            if (copied === "with-prompts") {
+              $$renderer4.push("<!--[-->");
+              $$renderer4.push(`Copied traces (with prompts)`);
+            } else {
+              $$renderer4.push("<!--[!-->");
+              if (copied === "without-prompts") {
+                $$renderer4.push("<!--[-->");
+                $$renderer4.push(`Copied traces (without prompts)`);
+              } else {
+                $$renderer4.push("<!--[!-->");
+                $$renderer4.push(`Copy...`);
+              }
+              $$renderer4.push(`<!--]-->`);
             }
+            $$renderer4.push(`<!--]-->`);
+          }
+          $$renderer4.push(`<!--]-->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> `);
+      {
+        let children = function($$renderer4) {
+          $$renderer4.push(`<div class="mt-1 w-max overflow-hidden rounded-lg border border-rc-gray-110 bg-rc-gray-930 shadow-inner-white-soft backdrop-blur-2xl" role="listbox">`);
+          Button($$renderer4, {
+            variant: "ghost",
+            size: "small",
+            role: "option",
+            disabled: !logContent.length,
+            onclick: (e) => {
+              e.stopPropagation();
+              copyMenuOpen = false;
+              copyLogs();
+            },
+            class: "block rounded-none border-b border-rc-gray-110 py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400",
+            children: ($$renderer5) => {
+              $$renderer5.push(`<!---->Copy logs`);
+            },
+            $$slots: { default: true }
           });
           $$renderer4.push(`<!----> `);
-          Tab($$renderer4, {
-            value: "tests",
-            class: "px-3",
+          Button($$renderer4, {
+            variant: "ghost",
+            size: "small",
+            role: "option",
+            disabled: !chatContent.length,
+            onclick: (e) => {
+              e.stopPropagation();
+              copyMenuOpen = false;
+              copyTraces(true);
+            },
+            class: "block rounded-none border-b border-rc-gray-110 py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400",
             children: ($$renderer5) => {
-              $$renderer5.push(`<!---->Tests`);
-            }
+              $$renderer5.push(`<!---->Copy traces with prompts`);
+            },
+            $$slots: { default: true }
           });
           $$renderer4.push(`<!----> `);
-          Tab($$renderer4, {
-            value: "traces",
-            class: "px-3",
+          Button($$renderer4, {
+            variant: "ghost",
+            size: "small",
+            role: "option",
+            disabled: !chatContent.length,
+            onclick: (e) => {
+              e.stopPropagation();
+              copyMenuOpen = false;
+              copyTraces(false);
+            },
+            class: "block rounded-none py-2 pr-3 text-left backdrop-blur-2xl hover:bg-rc-gray-700 focus:bg-rc-gray-400",
             children: ($$renderer5) => {
-              $$renderer5.push(`<!---->Traces`);
-            }
+              $$renderer5.push(`<!---->Copy traces without prompts`);
+            },
+            $$slots: { default: true }
           });
-          $$renderer4.push(`<!---->`);
-        },
-        $$slots: { default: true }
-      });
-      $$renderer3.push(`<!----></div> <div class="ml-auto flex items-baseline gap-2">`);
-      if (agentStates.length > 1) {
-        $$renderer3.push("<!--[-->");
-        $$renderer3.push(`<span class="mr-2 font-semibold leading-5 text-rc-gray-500 hover:text-rc-gray-200">Chat version</span> `);
-        History($$renderer3, {
-          agentStates,
-          currentState,
-          onSelectState: handleSelectState,
-          class: "mr-4 self-baseline"
+          $$renderer4.push(`<!----></div>`);
+        };
+        Dropdown($$renderer3, {
+          id: "roleplay-copy-dropdown",
+          open: copyMenuOpen,
+          onClose: () => copyMenuOpen = false,
+          anchorEl: copyMenuAnchorEl,
+          placement: "bottom-end",
+          offset: [0, 1],
+          children
         });
-        $$renderer3.push(`<!---->`);
-      } else {
-        $$renderer3.push("<!--[!-->");
       }
-      $$renderer3.push(`<!--]--> `);
+      $$renderer3.push(`<!----> `);
       Button($$renderer3, {
-        onclick: handleNew,
-        class: "self-baseline text-lg font-bold",
+        size: "small",
+        onclick: handleNewChat,
         children: ($$renderer4) => {
           $$renderer4.push(`<!---->New chat`);
         },
         $$slots: { default: true }
       });
-      $$renderer3.push(`<!----></div></nav> <div class="flex-1 overflow-hidden"><div${attr_class(`${stringify("hidden")} h-full w-full gap-x-2 focus:outline-none focus:ring-0`)}><div${attr_class(`flex h-full ${stringify(panels.sidebar.width)} flex-col text-rc-gray-200`)}><!--[-->`);
-      const each_array = ensure_array_like(steps);
-      for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
-        let step = each_array[$$index];
-        $$renderer3.push(`<button${attr_class(`my-1 ml-2 mr-0 rounded-lg px-3 py-2 text-left hover:bg-rc-gray-700 ${stringify(step.name === currentStep?.name ? "bg-rc-gray-600" : "bg-transparent")}`)}><span>${escape_html(step.name)}</span></button>`);
-      }
-      $$renderer3.push(`<!--]--></div> <div${attr_class(`${stringify(panels.promptColumn.visibility)} ${stringify(panels.promptColumn.width)} flex h-full flex-col`)}>`);
-      {
-        $$renderer3.push("<!--[!-->");
-      }
-      $$renderer3.push(`<!--]--> `);
-      {
-        $$renderer3.push("<!--[!-->");
-      }
-      $$renderer3.push(`<!--]--></div> `);
-      if (agentIdFromUrl) {
+      $$renderer3.push(`<!----></div></div> <div class="min-h-0 flex-1">`);
+      if (!workspace.wsLoaded) {
         $$renderer3.push("<!--[-->");
-        PlaygroundChat($$renderer3, {
-          class: `h-full min-w-0 border-thin border-rc-gray-650 shadow-inner-white-soft backdrop-blur-3xl ${stringify(panels.chat.width)}`,
-          context,
-          agentId: agentIdFromUrl
-        });
-        $$renderer3.push(`<!----> `);
-        ContextEditor($$renderer3, {
-          class: `h-full ${stringify(panels.contextEditor.width)} min-h-0 min-w-0 border-thin border-rc-gray-650 shadow-inner-white-soft backdrop-blur-3xl  focus:outline-none focus:ring-0`,
-          context,
-          onContextChanged: handleContextChanged
-        });
-        $$renderer3.push(`<!---->`);
+        $$renderer3.push(`<div class="flex h-full items-center justify-center text-sm text-rc-gray-300">Connecting…</div>`);
       } else {
         $$renderer3.push("<!--[!-->");
-        $$renderer3.push(`<div${attr_class(`h-full ${stringify(panels.chat.width)} flex items-start justify-center pt-40 text-rc-gray-200`)}>Select an agent on the left panel to start chatting</div>`);
+        if (!workspace.agentId) {
+          $$renderer3.push("<!--[-->");
+          $$renderer3.push(`<div class="flex h-full items-center justify-center text-sm text-rc-gray-300">Select an agent to start chatting</div>`);
+        } else {
+          $$renderer3.push("<!--[!-->");
+          $$renderer3.push(`<div class="h-full min-h-0 p-2">`);
+          PlaygroundChat($$renderer3, {
+            class: "h-full min-w-0",
+            context: workspace.context,
+            agentId: workspace.agentId,
+            analyzeDisabled: analyzeRunning,
+            onAnalyzeTrace: handleAnalyzeTrace
+          });
+          $$renderer3.push(`<!----></div>`);
+        }
+        $$renderer3.push(`<!--]-->`);
       }
-      $$renderer3.push(`<!--]--></div> <div${attr_class(`${stringify("flex")} h-full items-center justify-center`)}><div class="text-rc-gray-100">Connecting...</div></div></div></div></div>`);
+      $$renderer3.push(`<!--]--></div></div>`);
     }
     do {
       $$settled = true;
@@ -959,4 +972,4 @@ function _page($$renderer, $$props) {
 }
 
 export { _page as default };
-//# sourceMappingURL=_page.svelte-d8hJxmZl.js.map
+//# sourceMappingURL=_page.svelte-B3PTKffw.js.map