@dxos/plugin-assistant 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

package/dist/lib/neutral/components/index.mjs

@@ -1,7 +1,11 @@
 import {
+  TracePanel
+} from "../chunk-5LKNH7FD.mjs";
+import {
+  AiUsageQuotaError,
   ChatContextProvider,
   useChatContext
-} from "../chunk-VTK5R4H3.mjs";
+} from "../chunk-54W7N6M6.mjs";
 import "../chunk-J5LGTIGS.mjs";
 
 // src/components/index.ts
@@ -19,7 +23,7 @@ import { Form } from "@dxos/react-ui-form";
 import { FeedAnnotation } from "@dxos/schema";
 import { meta } from "#meta";
 var AgentProperties = ({ agent }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const db = Obj.getDatabase(agent);
   const feedFilter = useMemo(() => {
     if (!db) {
@@ -75,16 +79,17 @@ var AgentProperties = ({ agent }) => {
 import { useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
 import * as Array from "effect/Array";
 import * as Option3 from "effect/Option";
-import React16, { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef4, useState as useState7 } from "react";
+import React16, { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef4, useState as useState7 } from "react";
 import { Agent } from "@dxos/assistant-toolkit";
 import { Event } from "@dxos/async";
+import { getSpace } from "@dxos/client/echo";
 import { Filter as Filter3, Obj as Obj4, Query } from "@dxos/echo";
 import { useQuery as useQuery3 } from "@dxos/react-client/echo";
 import { useIdentity } from "@dxos/react-client/halo";
-import { Toast, composable as composable2, composableProps as composableProps2, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { Button, Toast, composable as composable2, composableProps as composableProps2, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { Menu } from "@dxos/react-ui-menu";
 import { Message as Message2 } from "@dxos/types";
-import { useChatKeymapExtensions as useChatKeymapExtensions2, useChatToolbarActions, useDebug } from "#hooks";
+import { useChatKeymapExtensions as useChatKeymapExtensions2, useChatToolbarActions, useDebug, useTraceMessages } from "#hooks";
 import { meta as meta9 } from "#meta";
 
 // src/components/ChatPrompt/ChatActions.tsx
@@ -93,7 +98,7 @@ import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { mx } from "@dxos/ui-theme";
 import { meta as meta2 } from "#meta";
 var ChatActions = ({ classNames, children, microphone, recording, processing, debug, onEvent }) => {
-  const { t } = useTranslation2(meta2.id);
+  const { t } = useTranslation2(meta2.profile.key);
   return /* @__PURE__ */ React2.createElement("div", {
     className: mx("flex items-center", classNames)
   }, children, microphone && /* @__PURE__ */ React2.createElement(IconButton, {
@@ -130,9 +135,11 @@ var ChatActions = ({ classNames, children, microphone, recording, processing, de
     icon: "ph--x--regular",
     iconOnly: true,
     label: t("cancel-processing.button"),
-    onClick: () => onEvent?.({
-      type: "cancel"
-    })
+    onClick: () => {
+      onEvent?.({
+        type: "cancel"
+      });
+    }
   }));
 };
 
@@ -142,7 +149,7 @@ import React3, { useCallback as useCallback2 } from "react";
 import { Message, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { meta as meta3 } from "#meta";
 var ChatMcpErrors = ({ classNames, processor }) => {
-  const { t } = useTranslation3(meta3.id);
+  const { t } = useTranslation3(meta3.profile.key);
   const errors = useAtomValue2(processor.mcpErrors);
   const handleDismiss = useCallback2(() => {
     processor.dismissMcpErrors();
@@ -190,7 +197,7 @@ var styles = {
   toolbar: "p-0! gap-0! border-t border-separator"
 };
 var ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChange }) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   return /* @__PURE__ */ React4.createElement("div", {
     className: "flex"
   }, /* @__PURE__ */ React4.createElement(Popover.Root, null, /* @__PURE__ */ React4.createElement(Popover.Trigger, {
@@ -217,7 +224,7 @@ var ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChang
     side: "top",
     classNames: styles.panel
   }, /* @__PURE__ */ React4.createElement(Popover.Viewport, null, /* @__PURE__ */ React4.createElement(Tabs.Root, {
-    classNames: "flex",
+    asChild: true,
     orientation: "horizontal",
     defaultValue: "view",
     defaultActivePart: "list",
@@ -275,7 +282,7 @@ var ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChang
   }))))), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)))));
 };
 var BlueprintsPanel = ({ registry, db, context }) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   const blueprints = useBlueprints({
     registry,
     db
@@ -314,34 +321,39 @@ var BlueprintsPanel = ({ registry, db, context }) => {
   })));
 };
 var ViewPanel = ({ chat }) => {
-  const { t } = useTranslation4(meta4.id);
-  const [view, setView] = useObject(chat, "view");
+  const { t } = useTranslation4(meta4.profile.key);
+  const [view, setView] = useObject(chat, "viewType");
   const value2 = view ?? "normal";
   return /* @__PURE__ */ React4.createElement(Listbox.Root, {
     value: value2,
     onValueChange: setView,
     autoFocus: true
-  }, Assistant.ChatViews.map((view2) => /* @__PURE__ */ React4.createElement(Listbox.Option, {
+  }, /* @__PURE__ */ React4.createElement(Listbox.Content, {
+    "aria-label": t("chat-view.title")
+  }, Assistant.ChatViews.map((view2) => /* @__PURE__ */ React4.createElement(Listbox.Item, {
     key: view2,
-    value: view2
-  }, /* @__PURE__ */ React4.createElement(Listbox.OptionLabel, null, t(`chat-view.${view2}.label`, {
+    id: view2,
+    classNames: "px-2 py-1 dx-focus-ring rounded-xs"
+  }, /* @__PURE__ */ React4.createElement(Listbox.ItemLabel, null, t(`chat-view.${view2}.label`, {
     defaultValue: view2
-  })), /* @__PURE__ */ React4.createElement(Listbox.OptionIndicator, null))));
+  })), /* @__PURE__ */ React4.createElement(Listbox.Indicator, null)))));
 };
 var ModelsPanel = ({ presets, preset, onPresetChange }) => {
+  const { t } = useTranslation4(meta4.profile.key);
   return /* @__PURE__ */ React4.createElement(Listbox.Root, {
     value: preset,
     onValueChange: onPresetChange,
     autoFocus: true
-  }, presets?.map(({ id, label }) => {
-    return /* @__PURE__ */ React4.createElement(Listbox.Option, {
-      key: id,
-      value: id
-    }, /* @__PURE__ */ React4.createElement(Listbox.OptionLabel, null, label), /* @__PURE__ */ React4.createElement(Listbox.OptionIndicator, null));
-  }));
+  }, /* @__PURE__ */ React4.createElement(Listbox.Content, {
+    "aria-label": t("options.chat-model.title")
+  }, presets?.map(({ id, label }) => /* @__PURE__ */ React4.createElement(Listbox.Item, {
+    key: id,
+    id,
+    classNames: "px-2 py-1 dx-focus-ring rounded-xs"
+  }, /* @__PURE__ */ React4.createElement(Listbox.ItemLabel, null, label), /* @__PURE__ */ React4.createElement(Listbox.Indicator, null)))));
 };
 var McpServersPanel = ({ db }) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   const servers = useQuery2(db, Filter2.type(McpServer.McpServer));
   const [adding, setAdding] = useState(false);
   const handleAdd = useCallback3((name, url, protocol, apiKey) => {
@@ -378,7 +390,7 @@ var McpServersPanel = ({ db }) => {
   })));
 };
 var McpServerRow = ({ server, onRemove }) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   const [enabled, setEnabled] = useObject(server, "enabled");
   return /* @__PURE__ */ React4.createElement("div", {
     className: "flex items-center gap-2 px-form-chrome"
@@ -400,7 +412,7 @@ var McpServerRow = ({ server, onRemove }) => {
   }));
 };
 var McpServerForm = ({ onSubmit, onCancel }) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   const [name, setName] = useState("");
   const [url, setUrl] = useState("");
   const [protocol, setProtocol] = useState("sse");
@@ -468,7 +480,7 @@ var McpServerForm = ({ onSubmit, onCancel }) => {
 };
 var ANY = "__any__";
 var ObjectsPanel = ({ db, context }) => {
-  const { t } = useTranslation4(meta4.id);
+  const { t } = useTranslation4(meta4.profile.key);
   const types = useFilteredTypes(db);
   const typeOptions = useMemo2(() => {
     const options = types.map((type) => {
@@ -565,7 +577,7 @@ import { getStyles as getStyles2, mx as mx3 } from "@dxos/ui-theme";
 import { useContextObjects as useContextObjects2 } from "#hooks";
 import { meta as meta5 } from "#meta";
 var ChatReferences = ({ classNames, context, db }) => {
-  const { t } = useTranslation5(meta5.id);
+  const { t } = useTranslation5(meta5.profile.key);
   const { objects, onUpdateObject } = useContextObjects2({
     db,
     context
@@ -638,7 +650,7 @@ var ChatStatusIndicator = ({ classNames, preset, processing, error, ...props })
 
 // src/components/ChatPrompt/ChatPrompt.tsx
 var ChatPrompt = ({ classNames, outline, db, chat, processor, event, online, placeholder, onOnlineChange, onPresetChange, settings = true, presets, preset }) => {
-  const { t } = useTranslation6(meta6.id);
+  const { t } = useTranslation6(meta6.profile.key);
   const error = useAtomValue3(processor.error).pipe(Option2.getOrUndefined);
   const streaming = useAtomValue3(processor.streaming);
   const active = useAtomValue3(processor.active);
@@ -1053,7 +1065,7 @@ import { useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { TogglePanel as TogglePanel2 } from "@dxos/react-ui-components";
 import { meta as meta7 } from "#meta";
 var SummaryWidget = ({ children }) => {
-  const { t } = useTranslation7(meta7.id);
+  const { t } = useTranslation7(meta7.profile.key);
   return /* @__PURE__ */ React11.createElement(TogglePanel2.Root, null, /* @__PURE__ */ React11.createElement(TogglePanel2.Content, {
     classNames: styles2.border
   }, /* @__PURE__ */ React11.createElement(TogglePanel2.Header, {
@@ -1093,7 +1105,7 @@ import { JsonHighlighter as JsonHighlighter2 } from "@dxos/react-ui-syntax-highl
 import { isNonNullable, safeParseJson } from "@dxos/util";
 import { meta as meta8 } from "#meta";
 var ToolWidget = ({ view, blocks = [] }) => {
-  const { t } = useTranslation8(meta8.id);
+  const { t } = useTranslation8(meta8.profile.key);
   const items = useMemo4(() => {
     let lastToolCall;
     const tools = [];
@@ -1611,27 +1623,92 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
 });
 
 // src/components/TaskList/TaskList.tsx
-import React15 from "react";
+import React15, { useMemo as useMemo6 } from "react";
+import { Plan } from "@dxos/assistant-toolkit";
 import { useObject as useObject2 } from "@dxos/react-client/echo";
 import { Icon as Icon3, Tag } from "@dxos/react-ui";
 import { composable, composableProps } from "@dxos/react-ui";
-import { Row, RowList } from "@dxos/react-ui-list";
-var TaskList = composable(({ plan, ...props }, forwardedRef) => {
+import { TextCrawl as TextCrawl2 } from "@dxos/react-ui-components";
+import { Listbox as Listbox2 } from "@dxos/react-ui-list";
+import { collectProcessActivityLines, deriveInFlightActivityLine } from "#execution-graph";
+import { isTerminalActivityLine, useProcessEphemeralStatus } from "#hooks";
+var TaskList = composable(({ plan, space, conversationId, traceMessages, ...props }, forwardedRef) => {
   const [snapshot] = useObject2(plan);
   const tasks = snapshot?.tasks ?? [];
-  return /* @__PURE__ */ React15.createElement(RowList.Root, null, /* @__PURE__ */ React15.createElement(RowList.Viewport, {
+  return /* @__PURE__ */ React15.createElement(Listbox2.Root, null, /* @__PURE__ */ React15.createElement(Listbox2.Viewport, {
     ...composableProps(props, {
       classNames: "dx-container"
     }),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(RowList.Content, {
+  }, /* @__PURE__ */ React15.createElement(Listbox2.Content, {
     "aria-label": "Tasks"
-  }, tasks.map((task) => /* @__PURE__ */ React15.createElement(Row, {
+  }, tasks.map((task) => /* @__PURE__ */ React15.createElement(TaskListItem, {
     key: task.id,
+    task,
+    space,
+    traceMessages,
+    conversationId
+  })))));
+});
+var TaskListItem = ({ task, space, traceMessages, conversationId }) => {
+  const durableLines = useMemo6(() => {
+    if (!task.agentPid || !traceMessages?.length) {
+      return [];
+    }
+    const lines = collectProcessActivityLines(traceMessages, String(task.agentPid), {
+      conversationId
+    });
+    if (task.status !== "in-progress") {
+      return lines;
+    }
+    return lines.filter((line) => !isTerminalActivityLine(line));
+  }, [
+    task.agentPid,
+    task.status,
+    traceMessages,
+    conversationId
+  ]);
+  const ephemeralLine = useProcessEphemeralStatus(task.delegated === true && task.status === "in-progress" ? task.agentPid : void 0, space);
+  const inFlightLine = useMemo6(() => {
+    if (ephemeralLine || task.status !== "in-progress" || !task.agentPid || !traceMessages?.length) {
+      return void 0;
+    }
+    return deriveInFlightActivityLine(traceMessages, String(task.agentPid), {
+      conversationId
+    });
+  }, [
+    ephemeralLine,
+    task.status,
+    task.agentPid,
+    traceMessages,
+    conversationId
+  ]);
+  const activityLines = useMemo6(() => {
+    if (ephemeralLine) {
+      return [
+        ephemeralLine
+      ];
+    }
+    if (inFlightLine) {
+      return [
+        inFlightLine
+      ];
+    }
+    return durableLines;
+  }, [
+    durableLines,
+    ephemeralLine,
+    inFlightLine
+  ]);
+  const agentPid = task.agentPid;
+  const showActivity = task.delegated === true && agentPid != null && activityLines.length > 0;
+  return /* @__PURE__ */ React15.createElement(Listbox2.Item, {
     id: task.id,
     classNames: "py-0"
   }, /* @__PURE__ */ React15.createElement("div", {
-    className: "flex items-center gap-2"
+    className: "flex flex-col gap-0.5 min-w-0"
+  }, /* @__PURE__ */ React15.createElement("div", {
+    className: "flex items-center gap-2 min-w-0"
   }, /* @__PURE__ */ React15.createElement(Icon3, {
     icon: task.status === "done" ? "ph--check--regular" : "ph--circle--regular",
     classNames: task.status === "done" ? "text-success-text" : void 0,
@@ -1642,8 +1719,29 @@ var TaskList = composable(({ plan, ...props }, forwardedRef) => {
     className: "truncate flex-1"
   }, task.title), task.status === "in-progress" && /* @__PURE__ */ React15.createElement(Tag, {
     palette: "info"
-  }, "pending")))))));
-});
+  }, "pending"), task.agentPid && /* @__PURE__ */ React15.createElement(Tag, {
+    palette: "info"
+  }, Plan.formatAgentPidTag(task.agentPid))), showActivity && agentPid != null && /* @__PURE__ */ React15.createElement(DelegatedTaskActivity, {
+    agentPid,
+    lines: activityLines
+  })));
+};
+var DelegatedTaskActivity = ({ agentPid, lines }) => {
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: "flex items-center gap-2 ps-6 min-w-0 text-placeholder"
+  }, /* @__PURE__ */ React15.createElement(Icon3, {
+    icon: "ph--brain--regular",
+    size: 3,
+    classNames: "shrink-0 opacity-70"
+  }), /* @__PURE__ */ React15.createElement(TextCrawl2, {
+    key: `${String(agentPid)}:${lines.length}:${lines[lines.length - 1]}`,
+    lines,
+    autoAdvance: true,
+    greedy: true,
+    size: "sm",
+    classNames: "text-xs text-subdued min-w-0 flex-1"
+  }));
+};
 
 // src/components/Chat/Chat.tsx
 var ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSubmit, ...props }) => {
@@ -1655,10 +1753,10 @@ var ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSu
   });
   const lastPrompt = useRef4(void 0);
   const db = chat && Obj4.getDatabase(chat) || dbFallback;
-  const event = useMemo6(() => new Event(), []);
+  const event = useMemo7(() => new Event(), []);
   const feedMessages = useQuery3(db, feed ? Query.select(Filter3.type(Message2.Message)).from(feed) : Query.select(Filter3.nothing()));
   const pendingMessages = useAtomValue4(processor.messages);
-  const messages = useMemo6(() => Array.dedupeWith([
+  const messages = useMemo7(() => Array.dedupeWith([
     ...feedMessages,
     ...pendingMessages
   ], ({ id: a }, { id: b }) => a === b), [
@@ -1792,8 +1890,8 @@ var ChatContent = composable2(({ children, ...props }, forwardedRef) => {
 });
 ChatContent.displayName = CHAT_CONTENT_NAME;
 var CHAT_THREAD_NAME = "Chat.Thread";
-var ChatThread2 = ({ viewType, debug: debugProp, ...props }) => {
-  const { t } = useTranslation9(meta9.id);
+var ChatThread2 = ({ viewType, debug: debugProp, onViewUsage, ...props }) => {
+  const { t } = useTranslation9(meta9.profile.key);
   const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
   const extensions = useChatKeymapExtensions2({
     event
@@ -1801,6 +1899,7 @@ var ChatThread2 = ({ viewType, debug: debugProp, ...props }) => {
   const identity = useIdentity();
   const error = useAtomValue4(processor.error).pipe(Option3.getOrUndefined);
   const [toastError, setToastError] = useState7(void 0);
+  const toastAction = toastError instanceof AiUsageQuotaError ? toastError.action : void 0;
   const debugView = viewType === "debug";
   const controllerRef = useRef4(null);
   useEffect6(() => {
@@ -1852,7 +1951,15 @@ var ChatThread2 = ({ viewType, debug: debugProp, ...props }) => {
   }, /* @__PURE__ */ React16.createElement(Toast.Title, {
     icon: "ph--warning--regular",
     onClose: () => setToastError(void 0)
-  }, t("ai-service-error.label")), /* @__PURE__ */ React16.createElement(Toast.Description, null, toastError?.message)));
+  }, t("ai-service-error.label")), /* @__PURE__ */ React16.createElement(Toast.Description, null, toastError?.message), toastAction && onViewUsage && /* @__PURE__ */ React16.createElement(Toast.Actions, null, /* @__PURE__ */ React16.createElement(Toast.Action, {
+    altText: t(toastAction.labelKey),
+    asChild: true
+  }, /* @__PURE__ */ React16.createElement(Button, {
+    onClick: () => {
+      setToastError(void 0);
+      onViewUsage();
+    }
+  }, t(toastAction.labelKey))))));
 };
 ChatThread2.displayName = CHAT_THREAD_NAME;
 var CHAT_PROMPT_NAME = "Chat.Prompt";
@@ -1873,12 +1980,18 @@ var ChatTaskList = composable2(({ plan: planProp, ...props }, forwardedRef) => {
   const parent = chat ? Obj4.getParent(chat) : void 0;
   const agent = parent && Obj4.instanceOf(Agent.Agent, parent) ? parent : void 0;
   const plan = planProp ?? agent?.plan.target;
+  const space = chat ? getSpace(chat) : void 0;
+  const traceMessages = useTraceMessages(space);
+  const conversationId = chat?.feed?.target?.id;
   if (!plan) {
     return null;
   }
   return /* @__PURE__ */ React16.createElement(TaskList, {
     ...props,
     plan,
+    space,
+    traceMessages,
+    conversationId,
     ref: forwardedRef
   });
 });
@@ -1896,14 +2009,89 @@ var Chat = {
 // src/components/ProcessTree/ProcessTree.tsx
 import * as Match from "effect/Match";
 import * as Option4 from "effect/Option";
-import React17 from "react";
+import React17, { useMemo as useMemo8 } from "react";
 import { Process } from "@dxos/compute";
-import { Icon as Icon4, IconButton as IconButton4, ScrollArea, Tooltip as Tooltip2, Treegrid } from "@dxos/react-ui";
-import { composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
+import { Icon as Icon4, IconButton as IconButton4, ScrollArea, Tooltip as Tooltip2, Treegrid, TREEGRID_PATH_SEPARATOR, composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
 import { mx as mx7 } from "@dxos/ui-theme";
 import { Unit as Unit2 } from "@dxos/util";
-var ProcessTree = /* @__PURE__ */ React17.memo(composable3(({ processes, onProcessSelect, onProcessTerminate, ...props }, forwardedRef) => {
-  const sortedProcesses = [
+var DEFAULT_DEPTH = 1;
+var LABEL_INDENT_REM = 0.5;
+var NESTED_ACTIVE_STATES = /* @__PURE__ */ new Set([
+  Process.State.RUNNING,
+  Process.State.HYBERNATING,
+  Process.State.TERMINATING
+]);
+var ProcessTree = /* @__PURE__ */ React17.memo(composable3(({ processes, depth = DEFAULT_DEPTH, onProcessSelect, onProcessTerminate, ...props }, forwardedRef) => {
+  const rows = useMemo8(() => buildProcessTreeRows(processes, depth), [
+    processes,
+    depth
+  ]);
+  return /* @__PURE__ */ React17.createElement(ScrollArea.Root, {
+    ...composableProps3(props, {
+      classNames: "dx-expander"
+    }),
+    thin: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React17.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React17.createElement(Treegrid.Root, {
+    classNames: "grid grid-cols-[min-content_1fr_min-content_min-content]"
+  }, rows.map(({ process, path }) => /* @__PURE__ */ React17.createElement(ProcessTreeRowView, {
+    key: path.join(TREEGRID_PATH_SEPARATOR),
+    process,
+    path,
+    onProcessSelect,
+    onProcessTerminate
+  })))));
+}));
+var ProcessTreeRowView = ({ process, path, onProcessSelect, onProcessTerminate }) => {
+  const duration = Unit2.Duration(process.metrics.wallTime);
+  const level = path.length;
+  const nested = level > 1;
+  return /* @__PURE__ */ React17.createElement(Treegrid.Row, {
+    id: path.join(TREEGRID_PATH_SEPARATOR),
+    classNames: mx7("col-span-full grid grid-cols-subgrid gap-2 ps-1", onProcessSelect && "dx-hover")
+  }, /* @__PURE__ */ React17.createElement(Treegrid.Cell, {
+    classNames: "flex items-center gap-0.5"
+  }, nested && /* @__PURE__ */ React17.createElement(Icon4, {
+    icon: "ph--arrow-elbow-down-right--regular",
+    size: 3,
+    classNames: "shrink-0 text-subdued"
+  }), /* @__PURE__ */ React17.createElement(Tooltip2.Trigger, {
+    content: process.state.toString()
+  }, /* @__PURE__ */ React17.createElement(Icon4, {
+    size: 4,
+    synchronized: true,
+    classNames: mx7(process.state === Process.State.RUNNING && "animate-spin", process.state === Process.State.FAILED && "text-error-text", process.state === Process.State.SUCCEEDED && "text-success-text"),
+    icon: Match.value(process.state).pipe(Match.when(Process.State.RUNNING, () => "ph--spinner-gap--regular"), Match.when(Process.State.SUCCEEDED, () => "ph--check-circle--regular"), Match.when(Process.State.FAILED, () => "ph--warning--regular"), Match.when(Process.State.HYBERNATING, () => "ph--spinner--regular"), Match.when(Process.State.IDLE, () => "ph--moon-stars--regular"), Match.when(Process.State.TERMINATING, () => "ph--x-circle--regular"), Match.when(Process.State.TERMINATED, () => "ph--x-circle--regular"), Match.orElse(() => "ph--spinner-gap--regular"))
+  }))), /* @__PURE__ */ React17.createElement(Treegrid.Cell, {
+    classNames: "flex items-center truncate",
+    style: nested ? {
+      paddingInlineStart: `${(level - 1) * LABEL_INDENT_REM}rem`
+    } : void 0,
+    onClick: () => onProcessSelect?.(process)
+  }, /* @__PURE__ */ React17.createElement("span", {
+    className: mx7("truncate text-sm", level === 1 && "font-medium", process.state !== Process.State.RUNNING && "text-description")
+  }, process.params.name ?? process.pid.toString())), /* @__PURE__ */ React17.createElement(Treegrid.Cell, {
+    classNames: "flex items-center justify-end text-xs text-description tabular-nums"
+  }, [
+    Process.State.FAILED,
+    Process.State.SUCCEEDED
+  ].includes(process.state) && /* @__PURE__ */ React17.createElement("span", {
+    className: "whitespace-nowrap"
+  }, duration.toString())), /* @__PURE__ */ React17.createElement(Treegrid.Cell, null, onProcessTerminate && /* @__PURE__ */ React17.createElement(IconButton4, {
+    classNames: "min-h-0 p-1",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    variant: "ghost",
+    size: 4,
+    label: "Actions",
+    onClick: (event) => {
+      event.stopPropagation();
+      onProcessTerminate?.(process);
+    }
+  })));
+};
+var sortProcesses = (processes) => {
+  return [
     ...processes.filter((process) => [
       Process.State.RUNNING,
       Process.State.HYBERNATING
@@ -1916,61 +2104,59 @@ var ProcessTree = /* @__PURE__ */ React17.memo(composable3(({ processes, onProce
       Process.State.FAILED,
       Process.State.TERMINATED
     ].includes(process.state))
-  ].sort((a, b) => {
-    const aCompletedAt = Option4.getOrElse(a.completedAt, () => Infinity);
-    const bCompletedAt = Option4.getOrElse(b.completedAt, () => Infinity);
-    return bCompletedAt - aCompletedAt;
+  ].sort((left, right) => {
+    const leftCompletedAt = Option4.getOrElse(left.completedAt, () => Infinity);
+    const rightCompletedAt = Option4.getOrElse(right.completedAt, () => Infinity);
+    return rightCompletedAt - leftCompletedAt;
   });
-  return /* @__PURE__ */ React17.createElement(ScrollArea.Root, {
-    ...composableProps3(props, {
-      classNames: "dx-expander"
-    }),
-    thin: true,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React17.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React17.createElement(Treegrid.Root, {
-    classNames: "grid grid-cols-[min-content_1fr_min-content_min-content]"
-  }, sortedProcesses.filter((process) => process.parentPid === null).map((process) => {
-    const t = Unit2.Duration(process.metrics.wallTime);
-    return /* @__PURE__ */ React17.createElement(Treegrid.Row, {
-      key: process.pid.toString(),
-      id: process.pid.toString(),
-      parentOf: process.parentPid?.toString(),
-      classNames: mx7("col-span-full grid grid-cols-subgrid gap-2 ps-1", onProcessSelect && "dx-hover")
-    }, /* @__PURE__ */ React17.createElement(Treegrid.Cell, {
-      classNames: "grid place-items-center"
-    }, /* @__PURE__ */ React17.createElement(Tooltip2.Trigger, {
-      content: process.state.toString()
-    }, /* @__PURE__ */ React17.createElement(Icon4, {
-      size: 4,
-      synchronized: true,
-      classNames: mx7(process.state === Process.State.RUNNING && "animate-spin", process.state === Process.State.FAILED && "text-error-text", process.state === Process.State.SUCCEEDED && "text-success-text"),
-      icon: Match.value(process.state).pipe(Match.when(Process.State.RUNNING, () => "ph--spinner-gap--regular"), Match.when(Process.State.SUCCEEDED, () => "ph--check-circle--regular"), Match.when(Process.State.FAILED, () => "ph--warning--regular"), Match.when(Process.State.HYBERNATING, () => "ph--spinner--regular"), Match.when(Process.State.IDLE, () => "ph--moon-stars--regular"), Match.when(Process.State.TERMINATING, () => "ph--x-circle--regular"), Match.when(Process.State.TERMINATED, () => "ph--x-circle--regular"), Match.orElse(() => "ph--spinner-gap--regular"))
-    }))), /* @__PURE__ */ React17.createElement(Treegrid.Cell, {
-      classNames: "flex items-center truncate",
-      onClick: () => onProcessSelect?.(process)
-    }, /* @__PURE__ */ React17.createElement("span", {
-      className: mx7("truncate text-sm", process.state !== Process.State.RUNNING && "text-description")
-    }, process.params.name ?? process.pid.toString())), /* @__PURE__ */ React17.createElement(Treegrid.Cell, {
-      classNames: "flex items-center justify-end text-xs text-description tabular-nums"
-    }, [
-      Process.State.FAILED,
-      Process.State.SUCCEEDED
-    ].includes(process.state) && /* @__PURE__ */ React17.createElement("span", {
-      className: "whitespace-nowrap"
-    }, t.toString())), /* @__PURE__ */ React17.createElement(Treegrid.Cell, null, onProcessTerminate && /* @__PURE__ */ React17.createElement(IconButton4, {
-      classNames: "min-h-0 p-1",
-      icon: "ph--x--regular",
-      iconOnly: true,
-      variant: "ghost",
-      size: 4,
-      label: "Actions",
-      onClick: (event) => {
-        event.stopPropagation();
-        onProcessTerminate?.(process);
-      }
-    })));
-  }))));
-}));
+};
+var sortNestedActive = (processes) => processes.filter((process) => NESTED_ACTIVE_STATES.has(process.state)).sort((left, right) => {
+  const priority = (state) => state === Process.State.RUNNING ? 0 : state === Process.State.HYBERNATING ? 1 : 2;
+  return priority(left.state) - priority(right.state);
+});
+var buildProcessTreeRows = (processes, maxDepth) => {
+  const pidSet = new Set(processes.map((process) => String(process.pid)));
+  const childrenByParent = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const process of processes) {
+    const parent = process.parentPid;
+    if (parent === null || !pidSet.has(String(parent))) {
+      roots.push(process);
+      continue;
+    }
+    const key = String(parent);
+    const siblings = childrenByParent.get(key) ?? [];
+    siblings.push(process);
+    childrenByParent.set(key, siblings);
+  }
+  const sortedRoots = sortProcesses(roots);
+  const rows = [];
+  const visit = (process, path, level) => {
+    if (level > maxDepth) {
+      return;
+    }
+    rows.push({
+      process,
+      path
+    });
+    if (level >= maxDepth) {
+      return;
+    }
+    const children = sortNestedActive(childrenByParent.get(String(process.pid)) ?? []);
+    for (const child of children) {
+      visit(child, [
+        ...path,
+        String(child.pid)
+      ], level + 1);
+    }
+  };
+  for (const root of sortedRoots) {
+    visit(root, [
+      String(root.pid)
+    ], 1);
+  }
+  return rows;
+};
 
 // src/components/TemplateEditor/TemplateEditor.tsx
 import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
@@ -2242,7 +2428,7 @@ var xmlDecoratorPlugin = ViewPlugin2.fromClass(class {
 
 // src/components/TemplateEditor/TemplateEditor.tsx
 var TemplateEditor = composable4(({ classNames, id, source, lineNumbers = true, ...props }, forwardedRef) => {
-  const { t } = useTranslation10(meta10.id);
+  const { t } = useTranslation10(meta10.profile.key);
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(() => {
     const target = source?.target;
@@ -2393,7 +2579,7 @@ var safeToolId = (name) => {
 };
 
 // src/components/index.ts
-var AssistantSettings = lazy(() => import("../AssistantSettings-GG52BLKS.mjs"));
+var AssistantSettings = lazy(() => import("../AssistantSettings-7ALY4BMS.mjs"));
 var RoutineProperties = lazy(() => import("../RoutineProperties-FISLMW2R.mjs"));
 export {
   AgentProperties,
@@ -2405,6 +2591,7 @@ export {
   TaskList,
   TemplateEditor,
   Toolbox,
-  ToolboxPanel
+  ToolboxPanel,
+  TracePanel
 };
 //# sourceMappingURL=index.mjs.map