@dxos/plugin-automation 0.7.5-labs.071a3e2 → 0.7.5-labs.8a82073

package/dist/lib/browser/{chunk-DL7XA62G.mjs → chunk-N4SSCQ7P.mjs}

@@ -10,8 +10,8 @@ import {
 } from "./chunk-DQ7ZSYJJ.mjs";
 
 // packages/plugins/experimental/plugin-automation/src/components/ChatContainer/ChatContainer.tsx
-import React7, { useCallback as useCallback3 } from "react";
-import { invariant as invariant7 } from "@dxos/invariant";
+import React7, { useCallback as useCallback2 } from "react";
+import { invariant as invariant6 } from "@dxos/invariant";
 import { StackItem } from "@dxos/react-ui-stack";
 
 // packages/plugins/experimental/plugin-automation/src/hooks/processor.ts
@@ -245,7 +245,7 @@ import { lazy } from "@dxos/app-framework";
 var AiClient = lazy(() => import("./ai-client-UJLNYP7B.mjs"));
 var AppGraphBuilder = lazy(() => import("./app-graph-builder-3H5TCRG4.mjs"));
 var IntentResolver = lazy(() => import("./intent-resolver-5YVZJFS3.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-WRHRCEV5.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-RRTZFTKR.mjs"));
 
 // packages/plugins/experimental/plugin-automation/src/tools/function.ts
 import { defineTool, ToolResult } from "@dxos/artifact";
@@ -914,103 +914,34 @@ var useServices = (space, query) => {
 };
 
 // packages/plugins/experimental/plugin-automation/src/components/Thread/Thread.tsx
-import React6, { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef3, useState as useState7 } from "react";
+import React6, { useCallback, useMemo as useMemo4, useRef as useRef3, useState as useState7 } from "react";
 import { IconButton, Input, useTranslation } from "@dxos/react-ui";
+import { ScrollContainer } from "@dxos/react-ui-components";
 import { Spinner } from "@dxos/react-ui-sfx";
 import { mx as mx6 } from "@dxos/react-ui-theme";
 
-// packages/plugins/experimental/plugin-automation/src/components/Thread/ScrollContainer.tsx
-import React, { forwardRef, useCallback, useEffect as useEffect4, useImperativeHandle, useRef, useState as useState4 } from "react";
-import { invariant as invariant5 } from "@dxos/invariant";
-import { mx } from "@dxos/react-ui-theme";
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-automation/src/components/Thread/ScrollContainer.tsx";
-var ScrollContainer = /* @__PURE__ */ forwardRef(({ children, classNames }, forwardedRef) => {
-  const containerRef = useRef(null);
-  const autoScrollRef = useRef(false);
-  useImperativeHandle(forwardedRef, () => ({
-    scrollToBottom: () => {
-      invariant5(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] = useState4(true);
-  useEffect4(() => {
-    if (!sticky || !containerRef.current) {
-      return;
-    }
-    autoScrollRef.current = true;
-    containerRef.current.scrollTo({
-      top: containerRef.current.scrollHeight,
-      behavior: "smooth"
-    });
-  }, [
-    children
-  ]);
-  useEffect4(() => {
-    invariant5(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 = useCallback((ev) => {
-    if (autoScrollRef.current) {
-      return;
-    }
-    const { scrollTop, clientHeight, scrollHeight } = ev.currentTarget;
-    const sticky2 = scrollTop + clientHeight >= scrollHeight;
-    setSticky(sticky2);
-  }, []);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: containerRef,
-    onScroll: handleScroll,
-    className: mx("flex flex-col grow overflow-y-scroll scrollbar-none", classNames)
-  }, children);
-});
-
 // packages/plugins/experimental/plugin-automation/src/components/Thread/ThreadMessage.tsx
-import React5 from "react";
-import { invariant as invariant6 } from "@dxos/invariant";
+import React5, { useEffect as useEffect6, useRef as useRef2, useState as useState6 } from "react";
+import { invariant as invariant5 } from "@dxos/invariant";
 import { log as log6 } from "@dxos/log";
-import { Button, ButtonGroup, Icon as Icon2 } from "@dxos/react-ui";
+import { Button, ButtonGroup, Icon as Icon3 } from "@dxos/react-ui";
 import { Json } from "@dxos/react-ui-syntax-highlighter";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 import { safeParseJson } from "@dxos/util";
 
-// packages/plugins/experimental/plugin-automation/src/components/Thread/StatusLine.tsx
-import React2, { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+// packages/plugins/experimental/plugin-automation/src/components/Box/StatusLine.tsx
+import React, { useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import { mx } from "@dxos/react-ui-theme";
 var emptyLines = [];
 var StatusLine = ({ classNames, line = -1, lines = emptyLines, transition = 300, advance = 1e3, autoAdvance }) => {
-  const containerRef = useRef2(null);
-  const [currentLine, setCurrentLine] = useState5(line);
-  useEffect5(() => {
+  const containerRef = useRef(null);
+  const [currentLine, setCurrentLine] = useState4(line);
+  useEffect4(() => {
     setCurrentLine(line);
   }, [
     line
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (!autoAdvance) {
       return;
     }
@@ -1031,7 +962,7 @@ var StatusLine = ({ classNames, line = -1, lines = emptyLines, transition = 300,
     autoAdvance,
     advance
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (containerRef.current) {
       containerRef.current.style.transition = `transform ${transition}ms ease-in-out`;
       containerRef.current.style.transform = `translateY(-${currentLine * 24}px)`;
@@ -1039,32 +970,128 @@ var StatusLine = ({ classNames, line = -1, lines = emptyLines, transition = 300,
   }, [
     currentLine
   ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: mx2("relative h-[24px] overflow-hidden", classNames)
-  }, /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("relative h-[24px] overflow-hidden", classNames)
+  }, /* @__PURE__ */ React.createElement("div", {
     ref: containerRef,
     className: "h-[24px]"
-  }, /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-col"
-  }, lines.map((line2, i) => /* @__PURE__ */ React2.createElement("div", {
+  }, lines.map((line2, i) => /* @__PURE__ */ React.createElement("div", {
     key: i,
-    className: mx2("flex h-[24px] items-center")
-  }, /* @__PURE__ */ React2.createElement("span", {
+    className: mx("flex h-[24px] items-center")
+  }, /* @__PURE__ */ React.createElement("span", {
     className: "truncate"
   }, line2))))));
 };
 
-// packages/plugins/experimental/plugin-automation/src/components/Thread/ToggleContainer.tsx
-import React3, { useEffect as useEffect6, useState as useState6 } from "react";
+// packages/plugins/experimental/plugin-automation/src/components/Box/Tabbed.tsx
+import React2, { forwardRef } from "react";
 import { Icon } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+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__ */ forwardRef(({ classNames, length, selected = 0, onSelect }, forwardedRef) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: forwardedRef,
+    className: mx2("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__ */ React2.createElement("div", {
+      key: i,
+      className: mx2("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__ */ React2.createElement("div", {
+      className: "absolute left-[11.5px] top-[21px] w-[1px] h-[10px] bg-neutral-400"
+    }), /* @__PURE__ */ React2.createElement(Icon, {
+      icon: selected === i ? icon.regular : icon.regular,
+      classNames: "z-10 !p-0 !w-[24px] !h-[24px] outline-none",
+      onClick: () => onSelect?.(i)
+    }));
+  }));
+});
+
+// packages/plugins/experimental/plugin-automation/src/components/Box/ToggleContainer.tsx
+import React3, { useEffect as useEffect5, useState as useState5 } from "react";
+import { Icon as Icon2, useControlledState } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var ToggleContainer = ({ title, icon, toggle, defaultOpen, duration = 400, shrinkX = false, children, classNames }) => {
-  const [expand, setExpand] = useState6(defaultOpen || !toggle);
-  const [expandX, setExpandX] = useState6(shrinkX ? expand : true);
-  const [expandY, setExpandY] = useState6(expand);
-  useEffect6(() => {
+var ToggleContainer = ({ classNames, title, icon, open: _open, duration = 400, shrinkX = false, children, onChangeOpen }) => {
+  const [open, setOpen] = useControlledState(_open);
+  const [expandX, setExpandX] = useState5(shrinkX ? open : true);
+  const [expandY, setExpandY] = useState5(open);
+  useEffect5(() => {
     let t;
-    if (expand) {
+    if (open) {
       if (shrinkX) {
         setExpandX(true);
       }
@@ -1081,16 +1108,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__ */ React3.createElement("div", {
     className: mx3("overflow-hidden", classNames)
   }, title && /* @__PURE__ */ React3.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__ */ React3.createElement("div", {
+    onClick: handleToggle
+  }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex w-[24px] h-[24px] items-center justify-center"
-  }, /* @__PURE__ */ React3.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon2, {
     size: 4,
     icon: "ph--caret-right--regular",
     style: {
@@ -1098,7 +1132,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__ */ React3.createElement("div", {
     className: "flex-1 pis-1 pie-1 truncate"
@@ -1172,7 +1206,7 @@ var MarkdownViewer = ({ classNames, content = "" }) => {
 };
 
 // packages/plugins/experimental/plugin-automation/src/components/Thread/ThreadMessage.tsx
-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__ */ React5.createElement("div", {
@@ -1183,32 +1217,41 @@ var ThreadMessage = ({ classNames, message, collapse, debug, onSuggest, onDelete
   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) {
             log6.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
+          };
         }
       }
     });
@@ -1216,16 +1259,9 @@ var ThreadMessage = ({ classNames, message, collapse, debug, onSuggest, onDelete
       className: mx5("flex", classNames)
     }, /* @__PURE__ */ React5.createElement("div", {
       className: "w-full p-1 px-2 overflow-hidden rounded-md bg-baseSurface"
-    }, /* @__PURE__ */ React5.createElement(ToggleContainer, {
-      title: /* @__PURE__ */ React5.createElement(StatusLine, {
-        lines,
-        autoAdvance: true
-      }),
-      toggle: true
-    }, /* @__PURE__ */ React5.createElement(Json, {
-      data: json,
-      classNames: "!p-1 text-xs"
-    }))));
+    }, /* @__PURE__ */ React5.createElement(TabbedContainer, {
+      items
+    })));
   }
   return /* @__PURE__ */ React5.createElement("div", {
     className: mx5("flex flex-col shrink-0 gap-2")
@@ -1261,9 +1297,9 @@ var titles = {
 };
 var componentMap = {
   text: ({ block }) => {
-    invariant6(block.type === "text", void 0, {
-      F: __dxlog_file5,
-      L: 134,
+    invariant5(block.type === "text", void 0, {
+      F: __dxlog_file4,
+      L: 128,
       S: void 0,
       A: [
         "block.type === 'text'",
@@ -1281,13 +1317,12 @@ var componentMap = {
     }
     return /* @__PURE__ */ React5.createElement(ToggleContainer, {
       title,
-      icon: block.pending ? /* @__PURE__ */ React5.createElement(Icon2, {
+      icon: block.pending ? /* @__PURE__ */ React5.createElement(Icon3, {
         icon: "ph--circle-notch--regular",
         classNames: "text-subdued ml-2 animate-spin",
         size: 4
       }) : void 0,
-      defaultOpen: block.disposition === "cot",
-      toggle: true
+      open: block.disposition === "cot"
     }, /* @__PURE__ */ React5.createElement(MarkdownViewer, {
       content: block.text,
       classNames: [
@@ -1296,9 +1331,9 @@ var componentMap = {
     }));
   },
   json: ({ block, onSuggest }) => {
-    invariant6(block.type === "json", void 0, {
-      F: __dxlog_file5,
-      L: 159,
+    invariant5(block.type === "json", void 0, {
+      F: __dxlog_file4,
+      L: 152,
       S: void 0,
       A: [
         "block.type === 'json'",
@@ -1322,8 +1357,7 @@ var componentMap = {
       default: {
         const title = block.disposition ? titles[block.disposition] : void 0;
         return /* @__PURE__ */ React5.createElement(ToggleContainer, {
-          title: title ?? "JSON",
-          toggle: true
+          title: title ?? "JSON"
         }, /* @__PURE__ */ React5.createElement(Json, {
           data: safeParseJson(block.json ?? block),
           classNames: "!p-1 text-xs"
@@ -1337,21 +1371,58 @@ var componentMap = {
       title = `Tool [${block.name}]`;
     }
     return /* @__PURE__ */ React5.createElement(ToggleContainer, {
-      title: title ?? "JSON",
-      toggle: true
+      title: title ?? "JSON"
     }, /* @__PURE__ */ React5.createElement(Json, {
       data: block,
       classNames: "!p-1 text-xs"
     }));
   }
 };
+var TabbedContainer = ({ items }) => {
+  const lines = items.map((item) => item.title);
+  const tabsRef = useRef2(null);
+  const [selected, setSelected] = useState6(0);
+  const [open, setOpen] = useState6(false);
+  useEffect6(() => {
+    if (open) {
+      tabsRef.current?.focus();
+    }
+  }, [
+    open
+  ]);
+  const handleSelect = (index) => {
+    if (index === selected) {
+      setOpen(false);
+    } else {
+      setSelected(index);
+    }
+  };
+  return /* @__PURE__ */ React5.createElement(ToggleContainer, {
+    title: /* @__PURE__ */ React5.createElement(StatusLine, {
+      lines,
+      autoAdvance: true
+    }),
+    open,
+    onChangeOpen: setOpen
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "flex gap-2 w-full"
+  }, /* @__PURE__ */ React5.createElement(Tabs, {
+    ref: tabsRef,
+    length: items.length,
+    selected,
+    onSelect: handleSelect
+  }), /* @__PURE__ */ React5.createElement(Json, {
+    data: items[selected].block,
+    classNames: "!p-1 text-xs"
+  })));
+};
 
 // packages/plugins/experimental/plugin-automation/src/components/Thread/Thread.tsx
 var Thread = ({ messages, streaming, collapse, debug, onSubmit, onStop, onSuggest, onDelete }) => {
   const { t } = useTranslation(AUTOMATION_PLUGIN);
   const scroller = useRef3(null);
   const [text, setText] = useState7("");
-  const handleKeyDown = useCallback2((ev) => {
+  const handleKeyDown = useCallback((ev) => {
     switch (ev.key) {
       case "Escape": {
         setText("");
@@ -1465,7 +1536,7 @@ var Thread = ({ messages, streaming, collapse, debug, onSubmit, onStop, onSugges
 };
 
 // packages/plugins/experimental/plugin-automation/src/components/ChatContainer/ChatContainer.tsx
-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);
@@ -1473,12 +1544,12 @@ var ChatContainer = ({ chat, role }) => {
     ...messageQueue?.items ?? [],
     ...processor.messages.value
   ];
-  const handleSubmit = useCallback3(async (text) => {
+  const handleSubmit = useCallback2(async (text) => {
     if (processor.streaming.value) {
       await processor.cancel();
     }
-    invariant7(messageQueue, void 0, {
-      F: __dxlog_file6,
+    invariant6(messageQueue, void 0, {
+      F: __dxlog_file5,
       L: 25,
       S: void 0,
       A: [
@@ -1494,7 +1565,7 @@ var ChatContainer = ({ chat, role }) => {
     processor,
     messageQueue
   ]);
-  const handleStop = useCallback3(() => {
+  const handleStop = useCallback2(() => {
     if (processor.streaming.value) {
       void processor.cancel();
     }
@@ -1528,4 +1599,4 @@ export {
   IntentResolver,
   ReactSurface
 };
-//# sourceMappingURL=chunk-DL7XA62G.mjs.map
+//# sourceMappingURL=chunk-N4SSCQ7P.mjs.map