@dxos/plugin-automation 0.7.5-labs.f5080a1 → 0.7.5-labs.ff2ff30

package/dist/lib/node/{chunk-NH7STAX6.cjs → chunk-CJGJXNY3.cjs}

@@ -26,8 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_NH7STAX6_exports = {};
-__export(chunk_NH7STAX6_exports, {
+var chunk_CJGJXNY3_exports = {};
+__export(chunk_CJGJXNY3_exports, {
   AiClient: () => AiClient,
   AppGraphBuilder: () => AppGraphBuilder,
   ChatContainer: () => ChatContainer,
@@ -38,10 +38,10 @@ __export(chunk_NH7STAX6_exports, {
   Thread: () => Thread,
   useServices: () => useServices
 });
-module.exports = __toCommonJS(chunk_NH7STAX6_exports);
-var import_chunk_AWZVJZ2I = require("./chunk-AWZVJZ2I.cjs");
-var import_chunk_H3RSMGJG = require("./chunk-H3RSMGJG.cjs");
-var import_chunk_TQEDPRY5 = require("./chunk-TQEDPRY5.cjs");
+module.exports = __toCommonJS(chunk_CJGJXNY3_exports);
+var import_chunk_U5Z7LFWB = require("./chunk-U5Z7LFWB.cjs");
+var import_chunk_GB7245FH = require("./chunk-GB7245FH.cjs");
+var import_chunk_EQYHOTGG = require("./chunk-EQYHOTGG.cjs");
 var import_react = __toESM(require("react"));
 var import_invariant = require("@dxos/invariant");
 var import_react_ui_stack = require("@dxos/react-ui-stack");
@@ -95,22 +95,23 @@ var import_echo_schema4 = require("@dxos/echo-schema");
 var import_echo_schema5 = require("@dxos/echo-schema");
 var import_react6 = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_components = require("@dxos/react-ui-components");
 var import_react_ui_sfx = require("@dxos/react-ui-sfx");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react7 = __toESM(require("react"));
 var import_invariant6 = require("@dxos/invariant");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react8 = __toESM(require("react"));
-var import_invariant7 = require("@dxos/invariant");
 var import_log6 = require("@dxos/log");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_syntax_highlighter = require("@dxos/react-ui-syntax-highlighter");
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_util3 = require("@dxos/util");
+var import_react8 = __toESM(require("react"));
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_react9 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 var import_react10 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
+var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_react11 = __toESM(require("react"));
 var import_react_markdown = __toESM(require("react-markdown"));
@@ -326,10 +327,10 @@ var ChatProcessor = class {
     }
   }
 };
-var AiClient = (0, import_app_framework2.lazy)(() => import("./ai-client-AOB6TLNW.cjs"));
-var AppGraphBuilder = (0, import_app_framework2.lazy)(() => import("./app-graph-builder-CDEQJEHY.cjs"));
-var IntentResolver = (0, import_app_framework2.lazy)(() => import("./intent-resolver-MJFZT5IU.cjs"));
-var ReactSurface = (0, import_app_framework2.lazy)(() => import("./react-surface-HDAVE6NU.cjs"));
+var AiClient = (0, import_app_framework2.lazy)(() => import("./ai-client-FKLPDELV.cjs"));
+var AppGraphBuilder = (0, import_app_framework2.lazy)(() => import("./app-graph-builder-T76NYV42.cjs"));
+var IntentResolver = (0, import_app_framework2.lazy)(() => import("./intent-resolver-C6OKFVEW.cjs"));
+var ReactSurface = (0, import_app_framework2.lazy)(() => import("./react-surface-LWDY7SQG.cjs"));
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/tools/function.ts";
 var covertFunctionToTool = (fn, edgeUrl, spaceId) => {
   if (!fn.description || !fn.inputSchema) {
@@ -748,12 +749,12 @@ var isV3_1 = (document) => {
   return document.openapi === "3.0.1";
 };
 var useChatProcessor = (chat) => {
-  const aiClient = (0, import_app_framework.useCapability)(import_chunk_AWZVJZ2I.AutomationCapabilities.AiClient);
+  const aiClient = (0, import_app_framework.useCapability)(import_chunk_U5Z7LFWB.AutomationCapabilities.AiClient);
   const globalTools = (0, import_app_framework.useCapabilities)(import_app_framework.Capabilities.Tools);
   const artifactDefinitions = (0, import_app_framework.useCapabilities)(import_app_framework.Capabilities.ArtifactDefinition);
   const { dispatchPromise: dispatch } = (0, import_app_framework.useIntentDispatcher)();
   const space = (0, import_echo.getSpace)(chat);
-  const services = (0, import_echo.useQuery)(space, import_echo.Filter.schema(import_chunk_H3RSMGJG.ServiceType));
+  const services = (0, import_echo.useQuery)(space, import_echo.Filter.schema(import_chunk_GB7245FH.ServiceType));
   const [serviceTools, setServiceTools] = (0, import_react2.useState)([]);
   (0, import_react2.useEffect)(() => {
     queueMicrotask(async () => {
@@ -855,7 +856,7 @@ var VISUAL_CROSSING_CREDENTIALS = {
   }
 };
 var TEST_SERVICES = [
-  (0, import_echo_schema5.createStatic)(import_chunk_H3RSMGJG.ServiceType, {
+  (0, import_echo_schema5.createStatic)(import_chunk_GB7245FH.ServiceType, {
     serviceId: "amadeus.com/service/FlightSearch",
     name: "Amadeus Flight Search",
     description: "Search for local and international flights.",
@@ -868,7 +869,7 @@ var TEST_SERVICES = [
       }
     ]
   }),
-  (0, import_echo_schema5.createStatic)(import_chunk_H3RSMGJG.ServiceType, {
+  (0, import_echo_schema5.createStatic)(import_chunk_GB7245FH.ServiceType, {
     serviceId: "amadeus.com/service/HotelSearch",
     name: "Amadeus Hotel Search",
     description: "Search for local and international hotels.",
@@ -881,7 +882,7 @@ var TEST_SERVICES = [
       }
     ]
   }),
-  (0, import_echo_schema5.createStatic)(import_chunk_H3RSMGJG.ServiceType, {
+  (0, import_echo_schema5.createStatic)(import_chunk_GB7245FH.ServiceType, {
     serviceId: "visualcrossing.com/service/Weather",
     name: "Visual Crossing Weather",
     description: "Search for global weather forecasts.",
@@ -895,7 +896,7 @@ var TEST_SERVICES = [
     ]
   }),
   // TODO(burdon): Needs auth.
-  (0, import_echo_schema5.createStatic)(import_chunk_H3RSMGJG.ServiceType, {
+  (0, import_echo_schema5.createStatic)(import_chunk_GB7245FH.ServiceType, {
     serviceId: "abstractapi.com/service/GeoLocation",
     name: "Abstract GeoLocation",
     description: "Get the location of any IP address.",
@@ -912,11 +913,11 @@ var TEST_SERVICES = [
   //
   ...Array.from({
     length: 20
-  }, (_, i) => (0, import_echo_schema5.createStatic)(import_chunk_H3RSMGJG.ServiceType, {
+  }, (_, i) => (0, import_echo_schema5.createStatic)(import_chunk_GB7245FH.ServiceType, {
     serviceId: `example.com/service/test-${i}`,
     name: `Test ${i}`,
     description: `Test ${i}`,
-    category: Object.keys(import_chunk_H3RSMGJG.categoryIcons)[Math.floor(Math.random() * Object.keys(import_chunk_H3RSMGJG.categoryIcons).length)],
+    category: Object.keys(import_chunk_GB7245FH.categoryIcons)[Math.floor(Math.random() * Object.keys(import_chunk_GB7245FH.categoryIcons).length)],
     interfaces: [
       {
         kind: "api",
@@ -940,81 +941,16 @@ var useServices = (space, query) => {
   ]);
   return services;
 };
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/components/Thread/ScrollContainer.tsx";
-var ScrollContainer = /* @__PURE__ */ (0, import_react7.forwardRef)(({ children, classNames }, forwardedRef) => {
-  const containerRef = (0, import_react7.useRef)(null);
-  const autoScrollRef = (0, import_react7.useRef)(false);
-  (0, import_react7.useImperativeHandle)(forwardedRef, () => ({
-    scrollToBottom: () => {
-      (0, import_invariant6.invariant)(containerRef.current, void 0, {
-        F: __dxlog_file4,
-        L: 41,
-        S: void 0,
-        A: [
-          "containerRef.current",
-          ""
-        ]
-      });
-      containerRef.current.scrollTo({
-        top: containerRef.current.scrollHeight,
-        behavior: "smooth"
-      });
-      autoScrollRef.current = false;
-    }
-  }), []);
-  const [sticky, setSticky] = (0, import_react7.useState)(true);
-  (0, import_react7.useEffect)(() => {
-    if (!sticky || !containerRef.current) {
-      return;
-    }
-    autoScrollRef.current = true;
-    containerRef.current.scrollTo({
-      top: containerRef.current.scrollHeight,
-      behavior: "smooth"
-    });
-  }, [
-    children
-  ]);
-  (0, import_react7.useEffect)(() => {
-    (0, import_invariant6.invariant)(containerRef.current, void 0, {
-      F: __dxlog_file4,
-      L: 62,
-      S: void 0,
-      A: [
-        "containerRef.current",
-        ""
-      ]
-    });
-    const handleScrollEnd = () => {
-      autoScrollRef.current = false;
-    };
-    containerRef.current.addEventListener("scrollend", handleScrollEnd);
-    return () => containerRef.current?.removeEventListener("scrollend", handleScrollEnd);
-  }, []);
-  const handleScroll = (0, import_react7.useCallback)((ev) => {
-    if (autoScrollRef.current) {
-      return;
-    }
-    const { scrollTop, clientHeight, scrollHeight } = ev.currentTarget;
-    const sticky2 = scrollTop + clientHeight >= scrollHeight;
-    setSticky(sticky2);
-  }, []);
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
-    ref: containerRef,
-    onScroll: handleScroll,
-    className: (0, import_react_ui_theme2.mx)("flex flex-col grow overflow-y-scroll scrollbar-none", classNames)
-  }, children);
-});
 var emptyLines = [];
 var StatusLine = ({ classNames, line = -1, lines = emptyLines, transition = 300, advance = 1e3, autoAdvance }) => {
-  const containerRef = (0, import_react9.useRef)(null);
-  const [currentLine, setCurrentLine] = (0, import_react9.useState)(line);
-  (0, import_react9.useEffect)(() => {
+  const containerRef = (0, import_react8.useRef)(null);
+  const [currentLine, setCurrentLine] = (0, import_react8.useState)(line);
+  (0, import_react8.useEffect)(() => {
     setCurrentLine(line);
   }, [
     line
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!autoAdvance) {
       return;
     }
@@ -1035,7 +971,7 @@ var StatusLine = ({ classNames, line = -1, lines = emptyLines, transition = 300,
     autoAdvance,
     advance
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (containerRef.current) {
       containerRef.current.style.transition = `transform ${transition}ms ease-in-out`;
       containerRef.current.style.transform = `translateY(-${currentLine * 24}px)`;
@@ -1043,27 +979,118 @@ var StatusLine = ({ classNames, line = -1, lines = emptyLines, transition = 300,
   }, [
     currentLine
   ]);
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
-    className: (0, import_react_ui_theme4.mx)("relative h-[24px] overflow-hidden", classNames)
-  }, /* @__PURE__ */ import_react9.default.createElement("div", {
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
+    className: (0, import_react_ui_theme3.mx)("relative h-[24px] overflow-hidden", classNames)
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
     ref: containerRef,
     className: "h-[24px]"
-  }, /* @__PURE__ */ import_react9.default.createElement("div", {
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
     className: "flex flex-col"
-  }, lines.map((line2, i) => /* @__PURE__ */ import_react9.default.createElement("div", {
+  }, lines.map((line2, i) => /* @__PURE__ */ import_react8.default.createElement("div", {
     key: i,
-    className: (0, import_react_ui_theme4.mx)("flex h-[24px] items-center")
-  }, /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: (0, import_react_ui_theme3.mx)("flex h-[24px] items-center")
+  }, /* @__PURE__ */ import_react8.default.createElement("span", {
     className: "truncate"
   }, line2))))));
 };
-var ToggleContainer = ({ title, icon, toggle, defaultOpen, duration = 400, shrinkX = false, children, classNames }) => {
-  const [expand, setExpand] = (0, import_react10.useState)(defaultOpen || !toggle);
-  const [expandX, setExpandX] = (0, import_react10.useState)(shrinkX ? expand : true);
-  const [expandY, setExpandY] = (0, import_react10.useState)(expand);
+var numbers = [
+  {
+    regular: "ph--number-circle-zero--thin",
+    active: "ph--number-circle-zero--duotone"
+  },
+  {
+    regular: "ph--number-circle-one--thin",
+    active: "ph--number-circle-one--duotone"
+  },
+  {
+    regular: "ph--number-circle-two--thin",
+    active: "ph--number-circle-two--duotone"
+  },
+  {
+    regular: "ph--number-circle-three--thin",
+    active: "ph--number-circle-three--duotone"
+  },
+  {
+    regular: "ph--number-circle-four--thin",
+    active: "ph--number-circle-four--duotone"
+  },
+  {
+    regular: "ph--number-circle-five--thin",
+    active: "ph--number-circle-five--duotone"
+  },
+  {
+    regular: "ph--number-circle-six--thin",
+    active: "ph--number-circle-six--duotone"
+  },
+  {
+    regular: "ph--number-circle-seven--thin",
+    active: "ph--number-circle-seven--duotone"
+  },
+  {
+    regular: "ph--number-circle-eight--thin",
+    active: "ph--number-circle-eight--duotone"
+  },
+  {
+    regular: "ph--number-circle-nine--thin",
+    active: "ph--number-circle-nine--duotone"
+  }
+];
+var Tabs = /* @__PURE__ */ (0, import_react9.forwardRef)(({ classNames, length, selected = 0, onSelect }, forwardedRef) => {
+  return /* @__PURE__ */ import_react9.default.createElement("div", {
+    ref: forwardedRef,
+    className: (0, import_react_ui_theme4.mx)("flex flex-col overflow-hidden outline-none", classNames),
+    tabIndex: -1,
+    onKeyDown: (ev) => {
+      switch (ev.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          ev.preventDefault();
+          ev.stopPropagation();
+          if (selected < length - 1) {
+            onSelect?.(selected + 1);
+          }
+          break;
+        }
+        case "ArrowUp":
+        case "ArrowLeft": {
+          ev.preventDefault();
+          ev.stopPropagation();
+          if (selected > 0) {
+            onSelect?.(selected - 1);
+          }
+          break;
+        }
+        case "Enter": {
+          ev.preventDefault();
+          ev.stopPropagation();
+          onSelect?.(selected);
+          break;
+        }
+      }
+    }
+  }, Array.from({
+    length
+  }).map((_, i) => {
+    const icon = numbers[i + 1];
+    return /* @__PURE__ */ import_react9.default.createElement("div", {
+      key: i,
+      className: (0, import_react_ui_theme4.mx)("relative flex w-[24px] h-[28px] justify-center cursor-pointer text-subdued", selected === i && "!text-cyan-550 !dark:text-cyan-300")
+    }, i < length - 1 && /* @__PURE__ */ import_react9.default.createElement("div", {
+      className: "absolute left-[11.5px] top-[21px] w-[1px] h-[10px] bg-neutral-400"
+    }), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
+      icon: selected === i ? icon.regular : icon.regular,
+      classNames: "z-10 !p-0 !w-[24px] !h-[24px] outline-none",
+      onClick: () => onSelect?.(i)
+    }));
+  }));
+});
+var ToggleContainer = ({ classNames, title, icon, open: _open, duration = 400, shrinkX = false, children, onChangeOpen }) => {
+  const [open, setOpen] = (0, import_react_ui4.useControlledState)(_open);
+  const [expandX, setExpandX] = (0, import_react10.useState)(shrinkX ? open : true);
+  const [expandY, setExpandY] = (0, import_react10.useState)(open);
   (0, import_react10.useEffect)(() => {
     let t;
-    if (expand) {
+    if (open) {
       if (shrinkX) {
         setExpandX(true);
       }
@@ -1080,16 +1107,23 @@ var ToggleContainer = ({ title, icon, toggle, defaultOpen, duration = 400, shrin
     }
     return () => clearTimeout(t);
   }, [
-    expand
+    open
   ]);
+  const handleToggle = () => {
+    if (onChangeOpen) {
+      onChangeOpen(!open);
+    } else {
+      setOpen((open2) => !open2);
+    }
+  };
   return /* @__PURE__ */ import_react10.default.createElement("div", {
     className: (0, import_react_ui_theme5.mx)("overflow-hidden", classNames)
   }, title && /* @__PURE__ */ import_react10.default.createElement("div", {
     className: "flex gap-1 py-1 items-center text-sm text-subdued cursor-pointer select-none",
-    onClick: toggle ? () => setExpand((open) => !open) : void 0
-  }, toggle && /* @__PURE__ */ import_react10.default.createElement("div", {
+    onClick: handleToggle
+  }, /* @__PURE__ */ import_react10.default.createElement("div", {
     className: "flex w-[24px] h-[24px] items-center justify-center"
-  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Icon, {
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Icon, {
     size: 4,
     icon: "ph--caret-right--regular",
     style: {
@@ -1097,7 +1131,7 @@ var ToggleContainer = ({ title, icon, toggle, defaultOpen, duration = 400, shrin
     },
     classNames: [
       "transition transition-transform ease-in-out",
-      expand ? "rotate-90" : "transform-none"
+      open ? "rotate-90" : "transform-none"
     ]
   })), /* @__PURE__ */ import_react10.default.createElement("div", {
     className: "flex-1 pis-1 pie-1 truncate"
@@ -1162,72 +1196,74 @@ var MarkdownViewer = ({ classNames, content = "" }) => {
     }
   }, content));
 };
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/components/Thread/ThreadMessage.tsx";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/components/Thread/ThreadMessage.tsx";
 var ThreadMessage = ({ classNames, message, collapse, debug, onSuggest, onDelete }) => {
   if (typeof message !== "object") {
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
-      className: (0, import_react_ui_theme3.mx)(classNames)
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: (0, import_react_ui_theme2.mx)(classNames)
     }, message);
   }
   const { role, content = [] } = message;
   const toolBlocks = content.filter((block) => block.type === "tool_use" || block.type === "tool_result");
   if (collapse && toolBlocks.length > 0) {
     let request;
-    const json = [];
-    const lines = toolBlocks.map((block) => {
+    const items = toolBlocks.map((block) => {
       switch (block.type) {
         case "tool_use": {
           request = block;
-          json.push(block);
-          return `Calling ${block.name}...`;
+          return {
+            title: `Calling ${block.name}...`,
+            block
+          };
         }
         case "tool_result": {
           if (!request) {
             import_log6.log.warn("unexpected message", {
-              tool: block
+              block
             }, {
-              F: __dxlog_file5,
-              L: 57,
+              F: __dxlog_file4,
+              L: 54,
               S: void 0,
               C: (f, a) => f(...a)
             });
-            return "Error";
+            return {
+              title: "Error",
+              block
+            };
           }
-          json.push(block);
-          return `Processed ${request.name}`;
+          return {
+            title: `Processed ${request.name}`,
+            block
+          };
         }
         default: {
           request = void 0;
-          return "Error";
+          return {
+            title: "Error",
+            block
+          };
         }
       }
     });
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
-      className: (0, import_react_ui_theme3.mx)("flex", classNames)
-    }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
+      className: (0, import_react_ui_theme2.mx)("flex", classNames)
+    }, /* @__PURE__ */ import_react7.default.createElement("div", {
       className: "w-full p-1 px-2 overflow-hidden rounded-md bg-baseSurface"
-    }, /* @__PURE__ */ import_react8.default.createElement(ToggleContainer, {
-      title: /* @__PURE__ */ import_react8.default.createElement(StatusLine, {
-        lines,
-        autoAdvance: true
-      }),
-      toggle: true
-    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_syntax_highlighter.Json, {
-      data: json,
-      classNames: "!p-1 text-xs"
-    }))));
+    }, /* @__PURE__ */ import_react7.default.createElement(TabbedContainer, {
+      items
+    })));
   }
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
-    className: (0, import_react_ui_theme3.mx)("flex flex-col shrink-0 gap-2")
-  }, debug && /* @__PURE__ */ import_react8.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("flex flex-col shrink-0 gap-2")
+  }, debug && /* @__PURE__ */ import_react7.default.createElement("div", {
     className: "text-xs text-subdued"
-  }, message.id, " ", onDelete && /* @__PURE__ */ import_react8.default.createElement("span", {
+  }, message.id, " ", onDelete && /* @__PURE__ */ import_react7.default.createElement("span", {
     className: "cursor-pointer underline",
     onClick: () => onDelete(message.id)
-  }, "delete")), content.map((block, idx) => /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, "delete")), content.map((block, idx) => /* @__PURE__ */ import_react7.default.createElement("div", {
     key: idx,
-    className: (0, import_react_ui_theme3.mx)("flex", classNames, block.type === "text" && role === "user" && "justify-end")
-  }, /* @__PURE__ */ import_react8.default.createElement(Block, {
+    className: (0, import_react_ui_theme2.mx)("flex", classNames, block.type === "text" && role === "user" && "justify-end")
+  }, /* @__PURE__ */ import_react7.default.createElement(Block, {
     role,
     block,
     onSuggest: onSuggest ?? (() => {
@@ -1236,9 +1272,9 @@ var ThreadMessage = ({ classNames, message, collapse, debug, onSuggest, onDelete
 };
 var Block = ({ block, role, onSuggest }) => {
   const Component = componentMap[block.type] ?? componentMap.default;
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
-    className: (0, import_react_ui_theme3.mx)("p-1 px-2 overflow-hidden rounded-md", (block.type !== "text" || block.disposition) && "w-full bg-baseSurface", block.type === "text" && role === "user" && "bg-primary-200 dark:bg-primary-500")
-  }, /* @__PURE__ */ import_react8.default.createElement(Component, {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("p-1 px-2 overflow-hidden rounded-md", (block.type !== "text" || block.disposition) && "w-full bg-baseSurface", block.type === "text" && role === "user" && "bg-primary-200 dark:bg-primary-500")
+  }, /* @__PURE__ */ import_react7.default.createElement(Component, {
     block,
     onSuggest
   }));
@@ -1251,9 +1287,9 @@ var titles = {
 };
 var componentMap = {
   text: ({ block }) => {
-    (0, import_invariant7.invariant)(block.type === "text", void 0, {
-      F: __dxlog_file5,
-      L: 134,
+    (0, import_invariant6.invariant)(block.type === "text", void 0, {
+      F: __dxlog_file4,
+      L: 128,
       S: void 0,
       A: [
         "block.type === 'text'",
@@ -1262,23 +1298,22 @@ var componentMap = {
     });
     const title = block.disposition ? titles[block.disposition] : void 0;
     if (!title) {
-      return /* @__PURE__ */ import_react8.default.createElement(MarkdownViewer, {
+      return /* @__PURE__ */ import_react7.default.createElement(MarkdownViewer, {
         content: block.text,
         classNames: [
           block.disposition === "cot" && "text-sm text-subdued"
         ]
       });
     }
-    return /* @__PURE__ */ import_react8.default.createElement(ToggleContainer, {
+    return /* @__PURE__ */ import_react7.default.createElement(ToggleContainer, {
       title,
-      icon: block.pending ? /* @__PURE__ */ import_react8.default.createElement(import_react_ui2.Icon, {
+      icon: block.pending ? /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Icon, {
         icon: "ph--circle-notch--regular",
         classNames: "text-subdued ml-2 animate-spin",
         size: 4
       }) : void 0,
-      defaultOpen: block.disposition === "cot",
-      toggle: true
-    }, /* @__PURE__ */ import_react8.default.createElement(MarkdownViewer, {
+      open: block.disposition === "cot"
+    }, /* @__PURE__ */ import_react7.default.createElement(MarkdownViewer, {
       content: block.text,
       classNames: [
         block.disposition === "cot" && "text-sm text-subdued"
@@ -1286,9 +1321,9 @@ var componentMap = {
     }));
   },
   json: ({ block, onSuggest }) => {
-    (0, import_invariant7.invariant)(block.type === "json", void 0, {
-      F: __dxlog_file5,
-      L: 159,
+    (0, import_invariant6.invariant)(block.type === "json", void 0, {
+      F: __dxlog_file4,
+      L: 152,
       S: void 0,
       A: [
         "block.type === 'json'",
@@ -1298,23 +1333,22 @@ var componentMap = {
     switch (block.disposition) {
       case "suggest": {
         const { text = "" } = (0, import_util3.safeParseJson)(block.json ?? "{}") ?? {};
-        return /* @__PURE__ */ import_react8.default.createElement(import_react_ui2.Button, {
+        return /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Button, {
           onClick: () => onSuggest(text)
         }, text);
       }
       case "select": {
         const { options = [] } = (0, import_util3.safeParseJson)(block.json ?? "{}") ?? {};
-        return /* @__PURE__ */ import_react8.default.createElement(import_react_ui2.ButtonGroup, null, options.map((option) => /* @__PURE__ */ import_react8.default.createElement(import_react_ui2.Button, {
+        return /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.ButtonGroup, null, options.map((option) => /* @__PURE__ */ import_react7.default.createElement(import_react_ui2.Button, {
           key: option,
           onClick: () => onSuggest(option)
         }, option)));
       }
       default: {
         const title = block.disposition ? titles[block.disposition] : void 0;
-        return /* @__PURE__ */ import_react8.default.createElement(ToggleContainer, {
-          title: title ?? "JSON",
-          toggle: true
-        }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_syntax_highlighter.Json, {
+        return /* @__PURE__ */ import_react7.default.createElement(ToggleContainer, {
+          title: title ?? "JSON"
+        }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_syntax_highlighter.Json, {
           data: (0, import_util3.safeParseJson)(block.json ?? block),
           classNames: "!p-1 text-xs"
         }));
@@ -1326,17 +1360,54 @@ var componentMap = {
     if (block.type === "tool_use") {
       title = `Tool [${block.name}]`;
     }
-    return /* @__PURE__ */ import_react8.default.createElement(ToggleContainer, {
-      title: title ?? "JSON",
-      toggle: true
-    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_syntax_highlighter.Json, {
+    return /* @__PURE__ */ import_react7.default.createElement(ToggleContainer, {
+      title: title ?? "JSON"
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_syntax_highlighter.Json, {
       data: block,
       classNames: "!p-1 text-xs"
     }));
   }
 };
+var TabbedContainer = ({ items }) => {
+  const lines = items.map((item) => item.title);
+  const tabsRef = (0, import_react7.useRef)(null);
+  const [selected, setSelected] = (0, import_react7.useState)(0);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    if (open) {
+      tabsRef.current?.focus();
+    }
+  }, [
+    open
+  ]);
+  const handleSelect = (index) => {
+    if (index === selected) {
+      setOpen(false);
+    } else {
+      setSelected(index);
+    }
+  };
+  return /* @__PURE__ */ import_react7.default.createElement(ToggleContainer, {
+    title: /* @__PURE__ */ import_react7.default.createElement(StatusLine, {
+      lines,
+      autoAdvance: true
+    }),
+    open,
+    onChangeOpen: setOpen
+  }, /* @__PURE__ */ import_react7.default.createElement("div", {
+    className: "flex gap-2 w-full"
+  }, /* @__PURE__ */ import_react7.default.createElement(Tabs, {
+    ref: tabsRef,
+    length: items.length,
+    selected,
+    onSelect: handleSelect
+  }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui_syntax_highlighter.Json, {
+    data: items[selected].block,
+    classNames: "!p-1 text-xs"
+  })));
+};
 var Thread = ({ messages, streaming, collapse, debug, onSubmit, onStop, onSuggest, onDelete }) => {
-  const { t } = (0, import_react_ui.useTranslation)(import_chunk_TQEDPRY5.AUTOMATION_PLUGIN);
+  const { t } = (0, import_react_ui.useTranslation)(import_chunk_EQYHOTGG.AUTOMATION_PLUGIN);
   const scroller = (0, import_react6.useRef)(null);
   const [text, setText] = (0, import_react6.useState)("");
   const handleKeyDown = (0, import_react6.useCallback)((ev) => {
@@ -1418,7 +1489,7 @@ var Thread = ({ messages, streaming, collapse, debug, onSubmit, onStop, onSugges
   ]);
   return /* @__PURE__ */ import_react6.default.createElement("div", {
     className: "flex flex-col grow overflow-hidden"
-  }, /* @__PURE__ */ import_react6.default.createElement(ScrollContainer, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui_components.ScrollContainer, {
     ref: scroller,
     classNames: "py-2 gap-2 overflow-x-hidden"
   }, lines.map((message) => /* @__PURE__ */ import_react6.default.createElement(ThreadMessage, {
@@ -1451,7 +1522,7 @@ var Thread = ({ messages, streaming, collapse, debug, onSubmit, onStop, onSugges
     iconOnly: true
   })));
 };
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/components/ChatContainer/ChatContainer.tsx";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/components/ChatContainer/ChatContainer.tsx";
 var ChatContainer = ({ chat, role }) => {
   const processor = useChatProcessor(chat);
   const messageQueue = useMessageQueue(chat);
@@ -1464,7 +1535,7 @@ var ChatContainer = ({ chat, role }) => {
       await processor.cancel();
     }
     (0, import_invariant.invariant)(messageQueue, void 0, {
-      F: __dxlog_file6,
+      F: __dxlog_file5,
       L: 25,
       S: void 0,
       A: [
@@ -1512,4 +1583,4 @@ var ChatContainer_default = ChatContainer;
   Thread,
   useServices
 });
-//# sourceMappingURL=chunk-NH7STAX6.cjs.map
+//# sourceMappingURL=chunk-CJGJXNY3.cjs.map