@dxos/plugin-assistant 0.9.0 → 0.9.1-staging.ee54ba693a

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

@@ -1,12 +1,15 @@
+import {
+  TracePanel
+} from "../chunk-SCTHQVIJ.mjs";
 import {
   ChatContextProvider,
   useChatContext
 } from "../chunk-VTK5R4H3.mjs";
+import {
+  AiUsageQuotaError
+} from "../chunk-BXI2R4OO.mjs";
 import "../chunk-J5LGTIGS.mjs";
 
-// src/components/index.ts
-import { lazy } from "react";
-
 // src/components/AgentProperties/AgentProperties.tsx
 import { Atom } from "@effect-atom/atom";
 import { useAtomValue } from "@effect-atom/atom-react";
@@ -19,7 +22,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) {
@@ -72,51 +75,164 @@ var AgentProperties = ({ agent }) => {
 };
 
 // src/components/Chat/Chat.tsx
+import { Atom as Atom2 } from "@effect-atom/atom";
 import { useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
-import * as Array from "effect/Array";
+import * as Array2 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 { Agent } from "@dxos/assistant-toolkit";
+import React17, { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo10, useRef as useRef5, useState as useState7 } from "react";
 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 { useObject as useObject3, 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 useTranslation10 } 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 { meta as meta9 } from "#meta";
+import { useChatKeymapExtensions as useChatKeymapExtensions2, useChatToolbarActions, useDebug, useTraceMessages } from "#hooks";
+import { meta as meta10 } from "#meta";
 
 // src/components/ChatPrompt/ChatActions.tsx
-import React2 from "react";
-import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import React2, { useCallback as useCallback2, useEffect, useState } from "react";
+import { useOptionalAtomCapabilityState, useOptionalCapabilities } from "@dxos/app-framework/ui";
+import { TranscriptionCapabilities } from "@dxos/plugin-transcription";
+import { DropdownMenu, Icon, IconButton, MicButton, 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);
+var ChatActions = ({ classNames, children, docId, microphone, processing, debug, onEvent }) => {
+  const { t } = useTranslation2(meta2.profile.key);
+  const transcriptionAvailable = useOptionalCapabilities(TranscriptionCapabilities.RecordingSession).length > 0;
+  const [session, setSession] = useOptionalAtomCapabilityState(TranscriptionCapabilities.RecordingSession);
+  const [settings, setSettings] = useOptionalAtomCapabilityState(TranscriptionCapabilities.Settings);
+  const recording = !!session?.recording && session.id === docId;
+  const recordMode = settings?.recordMode ?? "toggle";
+  const entityExtraction = settings?.entityExtraction !== false;
+  const selectedDeviceId = settings?.audioDeviceId ?? "";
+  const [devices, setDevices] = useState([]);
+  useEffect(() => {
+    if (!microphone || !transcriptionAvailable || !navigator.mediaDevices?.enumerateDevices) {
+      return;
+    }
+    let cancelled = false;
+    const refresh = async () => {
+      const all = await navigator.mediaDevices.enumerateDevices();
+      if (cancelled) {
+        return;
+      }
+      setDevices(all.filter((device) => device.kind === "audioinput" && device.deviceId).map((device, index) => ({
+        deviceId: device.deviceId,
+        label: device.label || `Microphone ${index + 1}`
+      })));
+    };
+    void refresh();
+    navigator.mediaDevices.addEventListener("devicechange", refresh);
+    return () => {
+      cancelled = true;
+      navigator.mediaDevices.removeEventListener("devicechange", refresh);
+    };
+  }, [
+    microphone,
+    transcriptionAvailable
+  ]);
+  const handleToggle = useCallback2(() => {
+    if (!docId) {
+      return;
+    }
+    setSession((current) => current?.recording && current.id === docId ? null : {
+      id: docId,
+      recording: true
+    });
+  }, [
+    setSession,
+    docId
+  ]);
+  const handlePressStart = useCallback2(() => {
+    if (!docId) {
+      return;
+    }
+    setSession(() => ({
+      id: docId,
+      recording: true
+    }));
+  }, [
+    setSession,
+    docId
+  ]);
+  const handlePressEnd = useCallback2(() => {
+    setSession((current) => current?.id === docId ? null : current);
+  }, [
+    setSession,
+    docId
+  ]);
+  const handleRecordModeChange = useCallback2((mode) => setSettings((current) => ({
+    ...current,
+    recordMode: mode
+  })), [
+    setSettings
+  ]);
+  const handleEntityExtractionChange = useCallback2((value2) => setSettings((current) => ({
+    ...current,
+    entityExtraction: value2
+  })), [
+    setSettings
+  ]);
+  const handleSelectDevice = useCallback2((deviceId) => setSettings((current) => ({
+    ...current,
+    audioDeviceId: deviceId || void 0
+  })), [
+    setSettings
+  ]);
+  const recordLabel = recording ? t("stop-recording.label") : recordMode === "hold" ? t("hold-to-record.label") : t("start-recording.label");
   return /* @__PURE__ */ React2.createElement("div", {
     className: mx("flex items-center", classNames)
-  }, children, microphone && /* @__PURE__ */ React2.createElement(IconButton, {
-    disabled: !processing,
-    classNames: mx(recording && "bg-primary-500"),
+  }, children, microphone && docId && transcriptionAvailable && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MicButton, {
+    iconOnly: true,
     variant: "ghost",
-    icon: "ph--microphone--regular",
+    label: recordLabel,
+    recording,
+    mode: recordMode,
+    onToggle: handleToggle,
+    onPressStart: handlePressStart,
+    onPressEnd: handlePressEnd,
+    "data-testid": "assistant.record"
+  }), /* @__PURE__ */ React2.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--caret-down--regular",
     iconOnly: true,
-    noTooltip: true,
-    label: t("microphone.button"),
-    onMouseDown: () => onEvent?.({
-      type: "record-start"
-    }),
-    onMouseUp: () => onEvent?.({
-      type: "record-stop"
-    }),
-    onTouchStart: () => onEvent?.({
-      type: "record-start"
-    }),
-    onTouchEnd: () => onEvent?.({
-      type: "record-stop"
-    })
-  }), debug && /* @__PURE__ */ React2.createElement(IconButton, {
+    label: t("recording-options.label"),
+    variant: "ghost",
+    classNames: "w-4",
+    "data-testid": "assistant.record.options"
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, /* @__PURE__ */ React2.createElement(DropdownMenu.GroupLabel, null, t("record-mode.label")), /* @__PURE__ */ React2.createElement(SettingsSelectableItem, {
+    label: t("record-mode.toggle.label"),
+    selected: recordMode === "toggle",
+    onSelect: () => handleRecordModeChange("toggle")
+  }), /* @__PURE__ */ React2.createElement(SettingsSelectableItem, {
+    label: t("record-mode.hold.label"),
+    selected: recordMode === "hold",
+    onSelect: () => handleRecordModeChange("hold")
+  }), /* @__PURE__ */ React2.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React2.createElement(DropdownMenu.GroupLabel, null, t("audio-device.label")), /* @__PURE__ */ React2.createElement(SettingsSelectableItem, {
+    label: t("audio-device.default.label"),
+    selected: selectedDeviceId === "",
+    onSelect: () => handleSelectDevice("")
+  }), devices.map((device) => /* @__PURE__ */ React2.createElement(SettingsSelectableItem, {
+    key: device.deviceId,
+    label: device.label,
+    selected: selectedDeviceId === device.deviceId,
+    onSelect: () => handleSelectDevice(device.deviceId)
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Separator, null), /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+    checked: entityExtraction,
+    onCheckedChange: handleEntityExtractionChange,
+    classNames: "gap-2",
+    "data-testid": "assistant.entity-extraction"
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "grow truncate"
+  }, t("settings.entity-extraction.label")), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 4
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))))), debug && /* @__PURE__ */ React2.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--wrench--regular",
     iconOnly: true,
@@ -130,21 +246,34 @@ 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"
+      });
+    }
   }));
 };
+var SettingsSelectableItem = ({ label, selected, onSelect }) => /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+  classNames: "gap-2",
+  role: "menuitemradio",
+  "aria-checked": selected,
+  onSelect
+}, /* @__PURE__ */ React2.createElement("span", {
+  className: "grow truncate"
+}, label), selected && /* @__PURE__ */ React2.createElement(Icon, {
+  icon: "ph--check--regular",
+  size: 4
+}));
 
 // src/components/ChatPrompt/ChatMcpErrors.tsx
 import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React3, { useCallback as useCallback2 } from "react";
+import React3, { useCallback as useCallback3 } 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(() => {
+  const handleDismiss = useCallback3(() => {
     processor.dismissMcpErrors();
   }, [
     processor
@@ -173,7 +302,7 @@ var ChatMcpErrors = ({ classNames, processor }) => {
 };
 
 // src/components/ChatPrompt/ChatOptions.tsx
-import React4, { useCallback as useCallback3, useMemo as useMemo2, useState } from "react";
+import React4, { useCallback as useCallback4, useMemo as useMemo2, useState as useState2 } from "react";
 import { McpServer } from "@dxos/assistant-toolkit";
 import { Filter as Filter2, Obj as Obj2, Type as Type2 } from "@dxos/echo";
 import { useObject, useQuery as useQuery2 } from "@dxos/react-client/echo";
@@ -182,7 +311,7 @@ import { Listbox } from "@dxos/react-ui-list";
 import { SearchList, useSearchListResults } from "@dxos/react-ui-search";
 import { Tabs } from "@dxos/react-ui-tabs";
 import { getStyles, mx as mx2 } from "@dxos/ui-theme";
-import { useActiveBlueprints, useBlueprintHandlers, useBlueprints, useContextObjects, useFilteredTypes } from "#hooks";
+import { useActiveSkills, useContextObjects, useFilteredTypes, useSkillHandlers, useSkills } from "#hooks";
 import { meta as meta4 } from "#meta";
 import { Assistant } from "#types";
 var styles = {
@@ -190,7 +319,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 +346,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",
@@ -233,8 +362,8 @@ var ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChang
   })), /* @__PURE__ */ React4.createElement(Tabs.Panel, {
     tabIndex: -1,
     classNames: "dx-focus-ring-inset overflow-hidden",
-    value: "blueprints"
-  }, /* @__PURE__ */ React4.createElement(BlueprintsPanel, {
+    value: "skills"
+  }, /* @__PURE__ */ React4.createElement(SkillsPanel, {
     registry,
     db,
     context
@@ -261,9 +390,9 @@ var ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChang
     icon: "ph--eye--regular",
     label: t("chat-view.title")
   }), /* @__PURE__ */ React4.createElement(Tabs.IconTab, {
-    value: "blueprints",
+    value: "skills",
     icon: "ph--blueprint--regular",
-    label: t("options.blueprints.title")
+    label: t("options.skills.title")
   }), /* @__PURE__ */ React4.createElement(Tabs.IconTab, {
     value: "mcp-servers",
     icon: "ph--plugs-connected--regular",
@@ -274,38 +403,38 @@ var ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChang
     label: t("options.chat-model.title")
   }))))), /* @__PURE__ */ React4.createElement(Popover.Arrow, null)))));
 };
-var BlueprintsPanel = ({ registry, db, context }) => {
-  const { t } = useTranslation4(meta4.id);
-  const blueprints = useBlueprints({
+var SkillsPanel = ({ registry, db, context }) => {
+  const { t } = useTranslation4(meta4.profile.key);
+  const skills = useSkills({
     registry,
     db
   });
-  const activeBlueprints = useActiveBlueprints({
+  const activeSkills = useActiveSkills({
     context
   });
-  const { onUpdateBlueprint } = useBlueprintHandlers({
+  const { onUpdateSkill } = useSkillHandlers({
     db,
     context,
     registry
   });
   const { results, handleSearch } = useSearchListResults({
-    items: blueprints,
-    extract: (blueprint) => blueprint.name
+    items: skills,
+    extract: (skill) => skill.name
   });
   return /* @__PURE__ */ React4.createElement(SearchList.Root, {
     onSearch: handleSearch
   }, /* @__PURE__ */ React4.createElement(SearchList.Content, {
     classNames: "flex flex-col"
-  }, /* @__PURE__ */ React4.createElement(SearchList.Viewport, null, results.map((blueprint) => {
-    const blueprintKey = Obj2.getMeta(blueprint).key ?? blueprint.id;
-    const isActive = activeBlueprints.has(blueprintKey);
+  }, /* @__PURE__ */ React4.createElement(SearchList.Viewport, null, results.map((skill) => {
+    const skillKey = Obj2.getMeta(skill).key ?? skill.id;
+    const isActive = activeSkills.has(skillKey);
     return /* @__PURE__ */ React4.createElement(SearchList.Item, {
       classNames: "flex items-center overflow-hidden",
-      key: blueprintKey,
-      value: blueprintKey,
-      label: blueprint.name,
+      key: skillKey,
+      value: skillKey,
+      label: skill.name,
       checked: isActive,
-      onSelect: () => onUpdateBlueprint?.(blueprintKey, !isActive)
+      onSelect: () => onUpdateSkill?.(skillKey, !isActive)
     });
   })), /* @__PURE__ */ React4.createElement(SearchList.Input, {
     placeholder: t("search.placeholder"),
@@ -314,37 +443,42 @@ 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) => {
+  const [adding, setAdding] = useState2(false);
+  const handleAdd = useCallback4((name, url, protocol, apiKey) => {
     db.add(Obj2.make(McpServer.McpServer, {
       name,
       url,
@@ -356,7 +490,7 @@ var McpServersPanel = ({ db }) => {
   }, [
     db
   ]);
-  const handleRemove = useCallback3((server) => {
+  const handleRemove = useCallback4((server) => {
     db.remove(server);
   }, [
     db
@@ -378,7 +512,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,13 +534,13 @@ var McpServerRow = ({ server, onRemove }) => {
   }));
 };
 var McpServerForm = ({ onSubmit, onCancel }) => {
-  const { t } = useTranslation4(meta4.id);
-  const [name, setName] = useState("");
-  const [url, setUrl] = useState("");
-  const [protocol, setProtocol] = useState("sse");
-  const [apiKey, setApiKey] = useState("");
+  const { t } = useTranslation4(meta4.profile.key);
+  const [name, setName] = useState2("");
+  const [url, setUrl] = useState2("");
+  const [protocol, setProtocol] = useState2("sse");
+  const [apiKey, setApiKey] = useState2("");
   const canSubmit = name.trim().length > 0 && url.trim().length > 0;
-  const handleSubmit = useCallback3(() => {
+  const handleSubmit = useCallback4(() => {
     if (canSubmit) {
       onSubmit(name.trim(), url.trim(), protocol, apiKey.trim() || void 0);
     }
@@ -468,7 +602,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) => {
@@ -487,7 +621,7 @@ var ObjectsPanel = ({ db, context }) => {
     types,
     t
   ]);
-  const [selectedUri, setSelectedUri] = useState(ANY);
+  const [selectedUri, setSelectedUri] = useState2(ANY);
   const anyFilter = useMemo2(() => Filter2.or(...typeOptions.map(({ uri }) => Filter2.type(uri))), [
     typeOptions
   ]);
@@ -549,23 +683,23 @@ import { Select as Select2 } from "@dxos/react-ui";
 // src/components/ChatPrompt/ChatPrompt.tsx
 import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
 import * as Option2 from "effect/Option";
-import React8, { useCallback as useCallback4, useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { useVoiceInput } from "@dxos/plugin-transcription";
-import { Input as Input3, useDynamicRef, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import React8, { useCallback as useCallback6, useEffect as useEffect4, useId, useMemo as useMemo4, useRef as useRef2 } from "react";
+import { Input as Input3, useDynamicRef, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { ChatEditor } from "@dxos/react-ui-chat";
+import { pendingText } from "@dxos/ui-editor";
 import { mx as mx5 } from "@dxos/ui-theme";
 import { useChatKeymapExtensions } from "#hooks";
-import { meta as meta6 } from "#meta";
+import { meta as meta7 } from "#meta";
 
 // src/components/ChatPrompt/ChatReferences.tsx
 import React6 from "react";
 import { Obj as Obj3 } from "@dxos/echo";
-import { Icon, IconButton as IconButton3, toLocalizedString, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Icon as Icon2, IconButton as IconButton3, toLocalizedString, useTranslation as useTranslation5 } from "@dxos/react-ui";
 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
@@ -590,7 +724,7 @@ var ChatReferences = ({ classNames, context, db }) => {
       key: uri.toString(),
       className: "dx-tag py-0 flex items-center gap-1",
       "data-hue": "neutral"
-    }, /* @__PURE__ */ React6.createElement(Icon, {
+    }, /* @__PURE__ */ React6.createElement(Icon2, {
       icon,
       size: 4
     }), toLocalizedString(label, t), /* @__PURE__ */ React6.createElement(IconButton3, {
@@ -607,14 +741,14 @@ var ChatReferences = ({ classNames, context, db }) => {
 var DEFAULT_OBJECT_ICON = "ph--cube--regular";
 
 // src/components/ChatPrompt/ChatStatusIndicator.tsx
-import React7, { useEffect, useState as useState2 } from "react";
+import React7, { useEffect as useEffect2, useState as useState3 } from "react";
 import { Tooltip, useTimeout } from "@dxos/react-ui";
 import { Spinner } from "@dxos/react-ui-components";
 import { mx as mx4 } from "@dxos/ui-theme";
 var period = 3e3;
 var ChatStatusIndicator = ({ classNames, preset, processing, error, ...props }) => {
-  const [init, setInit] = useState2(false);
-  useEffect(() => setInit(false), [
+  const [init, setInit] = useState3(false);
+  useEffect2(() => setInit(false), [
     preset
   ]);
   useTimeout(async () => {
@@ -636,46 +770,117 @@ var ChatStatusIndicator = ({ classNames, preset, processing, error, ...props })
   })));
 };
 
+// src/components/ChatPrompt/useChatVoiceInput.ts
+import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo3, useRef } from "react";
+import { useOptionalAtomCapabilityState as useOptionalAtomCapabilityState2 } from "@dxos/app-framework/ui";
+import { TranscriptionCapabilities as TranscriptionCapabilities2 } from "@dxos/plugin-transcription/types";
+import { useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { useAudioTrack, useTranscriber } from "@dxos/react-ui-transcription";
+import { PendingTextStreamer, cancelPendingText, editorPendingTextSink, pendingTextState } from "@dxos/ui-editor";
+import { meta as meta6 } from "#meta";
+var RECORDER_INTERVAL_MS = 200;
+var useChatVoiceInput = (docId, editorRef) => {
+  const { t } = useTranslation6(meta6.profile.key);
+  const [session] = useOptionalAtomCapabilityState2(TranscriptionCapabilities2.RecordingSession);
+  const [settings] = useOptionalAtomCapabilityState2(TranscriptionCapabilities2.Settings);
+  const active = !!session?.recording && session.id === docId;
+  const streamerRef = useRef(null);
+  useEffect3(() => {
+    if (!active) {
+      return;
+    }
+    const view = editorRef.current?.view;
+    if (!view) {
+      return;
+    }
+    const streamer = new PendingTextStreamer(editorPendingTextSink(view), {
+      mode: settings?.streamMode ?? "word",
+      wordIntervalMs: settings?.wordIntervalMs ?? 80
+    });
+    streamer.start({
+      anchor: view.state.selection.main.head,
+      placeholder: t("recording.placeholder")
+    });
+    streamerRef.current = streamer;
+    return () => {
+      streamer.dispose();
+      streamerRef.current = null;
+      const currentView = editorRef.current?.view;
+      if (currentView) {
+        const pending = currentView.state.field(pendingTextState, false);
+        if (pending && pending.final.length === 0) {
+          currentView.dispatch({
+            effects: cancelPendingText.of()
+          });
+        }
+      }
+    };
+  }, [
+    active,
+    settings?.streamMode,
+    settings?.wordIntervalMs
+  ]);
+  const handleSegments = useCallback5(async (segments) => {
+    const text = segments.map((segment) => segment.text).join(" ").trim();
+    if (text.length > 0) {
+      streamerRef.current?.push(text);
+    }
+  }, []);
+  const transcriberConfig = useMemo3(() => ({
+    transcribeAfterChunksAmount: Math.max(1, Math.round((settings?.transcribeAfterMs ?? 4e3) / RECORDER_INTERVAL_MS))
+  }), [
+    settings?.transcribeAfterMs
+  ]);
+  const recorderConfig = useMemo3(() => ({
+    interval: RECORDER_INTERVAL_MS
+  }), []);
+  const audioConstraints = useMemo3(() => settings?.audioDeviceId ? {
+    deviceId: {
+      exact: settings.audioDeviceId
+    }
+  } : void 0, [
+    settings?.audioDeviceId
+  ]);
+  const track = useAudioTrack(active, audioConstraints);
+  useTranscriber({
+    audioStreamTrack: track,
+    transcriberConfig,
+    recorderConfig,
+    onSegments: handleSegments
+  });
+};
+
 // 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);
+var ChatPrompt = ({ classNames, outline, db, chat, processor, event, online, placeholder, onPresetChange, settings = true, presets, preset }) => {
+  const { t } = useTranslation7(meta7.profile.key);
   const error = useAtomValue3(processor.error).pipe(Option2.getOrUndefined);
   const streaming = useAtomValue3(processor.streaming);
   const active = useAtomValue3(processor.active);
   const activeRef = useDynamicRef(active);
-  const editorRef = useRef(null);
-  const [recordingState, setRecordingState] = useState3(false);
-  useEffect2(() => {
+  const editorRef = useRef2(null);
+  useEffect4(() => {
     return event.on((ev) => {
-      switch (ev.type) {
-        case "update-prompt":
-          if (!editorRef.current?.getText()?.length) {
-            editorRef.current?.setText(ev.text);
-            editorRef.current?.focus();
-          }
-          break;
-        case "record-start":
-          setRecordingState(true);
-          break;
-        case "record-stop":
-          setRecordingState(false);
-          break;
+      if (ev.type === "update-prompt" && !editorRef.current?.getText()?.length) {
+        editorRef.current?.setText(ev.text);
+        editorRef.current?.focus();
       }
     });
   }, [
     event
   ]);
-  const { recording } = useVoiceInput({
-    active: recordingState,
-    onUpdate: (text) => {
-      editorRef.current?.setText(text);
-      editorRef.current?.focus();
-    }
-  });
-  const extensions = useChatKeymapExtensions({
+  const fallbackDocId = useId();
+  const docId = chat?.id ?? fallbackDocId;
+  useChatVoiceInput(docId, editorRef);
+  const keymapExtensions = useChatKeymapExtensions({
     event
   });
-  const handleSubmit = useCallback4((text) => {
+  const extensions = useMemo4(() => [
+    keymapExtensions,
+    pendingText()
+  ], [
+    keymapExtensions
+  ]);
+  const handleSubmit = useCallback6((text) => {
     if (!activeRef.current) {
       event.emit({
         type: "submit",
@@ -686,7 +891,7 @@ var ChatPrompt = ({ classNames, outline, db, chat, processor, event, online, pla
   }, [
     event
   ]);
-  const handleEvent = useCallback4((ev) => {
+  const handleEvent = useCallback6((ev) => {
     event.emit(ev);
   }, [
     event
@@ -729,7 +934,7 @@ var ChatPrompt = ({ classNames, outline, db, chat, processor, event, online, pla
   })), /* @__PURE__ */ React8.createElement(ChatActions, {
     classNames: "col-span-2",
     microphone: true,
-    recording,
+    docId,
     processing: streaming,
     onEvent: handleEvent
   }, online !== void 0 && /* @__PURE__ */ React8.createElement(Input3.Root, null, /* @__PURE__ */ React8.createElement(Input3.Label, {
@@ -737,13 +942,13 @@ var ChatPrompt = ({ classNames, outline, db, chat, processor, event, online, pla
   }, t("online-switch.label")), /* @__PURE__ */ React8.createElement(Input3.Switch, {
     classNames: "mx-1",
     checked: online,
-    onCheckedChange: onOnlineChange
+    disabled: true
   })))));
 };
 ChatPrompt.displayName = "Chat.Prompt";
 
 // src/components/ChatPrompt/ChatStatus.tsx
-import React9, { useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import React9, { useEffect as useEffect5, useMemo as useMemo5, useState as useState4 } from "react";
 import { ChatStatus as NaturalChatStatus, formatElapsed } from "@dxos/react-ui-chat";
 import { Matrix } from "@dxos/react-ui-components";
 import { Unit } from "@dxos/util";
@@ -751,7 +956,7 @@ var CHAT_STREAM_STATUS_NAME = "Chat.StreamStatus";
 var TICK_MS = 1e3;
 var ChatStatus = ({ classNames, icon }) => {
   const { messages, requestTiming } = useChatContext(CHAT_STREAM_STATUS_NAME);
-  const { lastOutputTokens, sessionTotalTokens } = useMemo3(() => {
+  const { lastOutputTokens, sessionTotalTokens } = useMemo5(() => {
     let last;
     let total = 0;
     for (const message of messages) {
@@ -797,7 +1002,7 @@ var ChatStatus = ({ classNames, icon }) => {
 var Elapsed = ({ timing }) => {
   const isRunning = timing.endedAt == null;
   const [now, setNow] = useState4(Date.now());
-  useEffect3(() => {
+  useEffect5(() => {
     if (!isRunning) {
       return;
     }
@@ -811,16 +1016,16 @@ var Elapsed = ({ timing }) => {
 var isStats = (block) => block._tag === "stats";
 
 // src/components/ChatThread/ChatThread.tsx
-import React14, { forwardRef, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef3, useState as useState6 } from "react";
+import React15, { forwardRef, useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef4, useState as useState6 } from "react";
 import { PublicKey } from "@dxos/keys";
 import { setRef } from "@dxos/react-ui";
 import { MarkdownStream } from "@dxos/react-ui-markdown";
 import { keyToFallback } from "@dxos/util";
 
 // src/components/ChatThread/registry.tsx
-import React13 from "react";
-import { log } from "@dxos/log";
-import { getXmlTextChild } from "@dxos/ui-editor";
+import React14 from "react";
+import { log as log2 } from "@dxos/log";
+import { AnchorWidget, getXmlTextChild as getXmlTextChild2 } from "@dxos/ui-editor";
 
 // src/components/ChatThread/tool-widget-state.ts
 var applyToolBlockToWidgetState = (context, block) => {
@@ -1049,11 +1254,11 @@ var StatusWidget = class extends WidgetType5 {
 
 // src/components/ChatThread/widgets/SummaryWidget.tsx
 import React11 from "react";
-import { useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { useTranslation as useTranslation8 } from "@dxos/react-ui";
 import { TogglePanel as TogglePanel2 } from "@dxos/react-ui-components";
-import { meta as meta7 } from "#meta";
+import { meta as meta8 } from "#meta";
 var SummaryWidget = ({ children }) => {
-  const { t } = useTranslation7(meta7.id);
+  const { t } = useTranslation8(meta8.profile.key);
   return /* @__PURE__ */ React11.createElement(TogglePanel2.Root, null, /* @__PURE__ */ React11.createElement(TogglePanel2.Content, {
     classNames: styles2.border
   }, /* @__PURE__ */ React11.createElement(TogglePanel2.Header, {
@@ -1063,6 +1268,45 @@ var SummaryWidget = ({ children }) => {
   }, children))));
 };
 
+// src/components/ChatThread/widgets/SurfaceWidget.tsx
+import React12, { useMemo as useMemo6 } from "react";
+import { Surface } from "@dxos/app-framework/ui";
+import { log } from "@dxos/log";
+import { getXmlTextChild } from "@dxos/ui-editor";
+import { ChatSurface } from "#types";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/ChatThread/widgets/SurfaceWidget.tsx";
+var SurfaceWidget = ({ role, children }) => {
+  const data = useMemo6(() => {
+    const raw = getXmlTextChild(children ?? []);
+    if (!raw) {
+      return void 0;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      return parsed != null && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : void 0;
+    } catch (err) {
+      log.warn("failed to parse surface data", {
+        raw,
+        err
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 24, S: void 0 });
+      return void 0;
+    }
+  }, [
+    children
+  ]);
+  if (!role) {
+    return null;
+  }
+  return /* @__PURE__ */ React12.createElement(Surface.Surface, {
+    type: ChatSurface,
+    data: {
+      role,
+      data
+    },
+    limit: 1
+  });
+};
+
 // src/components/ChatThread/widgets/SuggestionWidget.ts
 import { WidgetType as WidgetType6 } from "@codemirror/view";
 import { Domino as Domino6, mx as mx6 } from "@dxos/ui";
@@ -1086,15 +1330,15 @@ var SuggestionWidget = class extends WidgetType6 {
 };
 
 // src/components/ChatThread/widgets/ToolWidget.tsx
-import React12, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState5 } from "react";
-import { Icon as Icon2, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import React13, { useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef3, useState as useState5 } from "react";
+import { Icon as Icon3, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { NumericTabs, TextCrawl, TogglePanel as TogglePanel3 } from "@dxos/react-ui-components";
 import { JsonHighlighter as JsonHighlighter2 } from "@dxos/react-ui-syntax-highlighter";
 import { isNonNullable, safeParseJson } from "@dxos/util";
-import { meta as meta8 } from "#meta";
+import { meta as meta9 } from "#meta";
 var ToolWidget = ({ view, blocks = [] }) => {
-  const { t } = useTranslation8(meta8.id);
-  const items = useMemo4(() => {
+  const { t } = useTranslation9(meta9.profile.key);
+  const items = useMemo7(() => {
     let lastToolCall;
     const tools = [];
     return blocks.filter((block) => block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "stats").map((block) => {
@@ -1159,7 +1403,7 @@ var ToolWidget = ({ view, blocks = [] }) => {
     blocks,
     t
   ]);
-  const handleChangeOpen = useCallback5(() => {
+  const handleChangeOpen = useCallback7(() => {
     setTimeout(() => {
       view?.requestMeasure();
     }, 1e3);
@@ -1169,22 +1413,22 @@ var ToolWidget = ({ view, blocks = [] }) => {
   if (!items.length) {
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(ToolPanel, {
+  return /* @__PURE__ */ React13.createElement(ToolPanel, {
     items,
     onChangeOpen: handleChangeOpen
   });
 };
 var DEFAULT_TOOL_ICON = "ph--wrench--regular";
 var ToolPanel = ({ items, onChangeOpen }) => {
-  const tabsRef = useRef2(null);
+  const tabsRef = useRef3(null);
   const [selected, setSelected] = useState5(0);
   const [open, setOpen] = useState5(false);
-  useEffect4(() => {
+  useEffect6(() => {
     setSelected((prev) => Math.min(prev, Math.max(0, items.length - 1)));
   }, [
     items.length
   ]);
-  useEffect4(() => {
+  useEffect6(() => {
     onChangeOpen?.(open);
     if (open) {
       tabsRef.current?.focus();
@@ -1193,33 +1437,33 @@ var ToolPanel = ({ items, onChangeOpen }) => {
     open,
     onChangeOpen
   ]);
-  const handleSelect = useCallback5((index) => {
+  const handleSelect = useCallback7((index) => {
     setSelected(index);
   }, []);
   const headerIcon = items[items.length - 1]?.icon ?? items[0]?.icon ?? DEFAULT_TOOL_ICON;
-  return /* @__PURE__ */ React12.createElement(TogglePanel3.Root, {
+  return /* @__PURE__ */ React13.createElement(TogglePanel3.Root, {
     open,
     onChangeOpen: setOpen
-  }, /* @__PURE__ */ React12.createElement(TogglePanel3.Content, null, /* @__PURE__ */ React12.createElement(TogglePanel3.Header, {
+  }, /* @__PURE__ */ React13.createElement(TogglePanel3.Content, null, /* @__PURE__ */ React13.createElement(TogglePanel3.Header, {
     classNames: "flex items-center gap-2 text-sm text-placeholder"
-  }, /* @__PURE__ */ React12.createElement(Icon2, {
+  }, /* @__PURE__ */ React13.createElement(Icon3, {
     icon: headerIcon,
     size: 4,
     classNames: "shrink-0 opacity-70"
-  }), /* @__PURE__ */ React12.createElement(TextCrawl, {
+  }), /* @__PURE__ */ React13.createElement(TextCrawl, {
     key: "status-roll",
     lines: items.map((item) => item.title),
     autoAdvance: true,
     greedy: true
-  })), /* @__PURE__ */ React12.createElement(TogglePanel3.Body, null, /* @__PURE__ */ React12.createElement(TogglePanel3.Viewport, {
+  })), /* @__PURE__ */ React13.createElement(TogglePanel3.Body, null, /* @__PURE__ */ React13.createElement(TogglePanel3.Viewport, {
     classNames: "grid grid-cols-[32px_1fr]"
-  }, /* @__PURE__ */ React12.createElement(NumericTabs, {
+  }, /* @__PURE__ */ React13.createElement(NumericTabs, {
     ref: tabsRef,
     classNames: "p-1",
     length: items.length,
     selected,
     onSelect: handleSelect
-  }), /* @__PURE__ */ React12.createElement(JsonHighlighter2, {
+  }), /* @__PURE__ */ React13.createElement(JsonHighlighter2, {
     data: items[selected]?.content,
     classNames: "p-1 text-xs bg-transparent",
     replacer: {
@@ -1231,93 +1475,105 @@ var ToolPanel = ({ items, onChangeOpen }) => {
 };
 
 // src/components/ChatThread/registry.tsx
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/ChatThread/registry.tsx";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/ChatThread/registry.tsx";
 var componentRegistry = {
   //
   // Block-only (no widget — see note above).
   //
-  prompt: {
+  "prompt": {
     block: true
   },
   //
   // DOM Widgets
   //
-  synthetic: {
+  "link-preview": {
+    block: false,
+    urlSchemes: [
+      "dxn:",
+      "echo:"
+    ],
+    factory: ({ label, dxn }) => typeof label === "string" && typeof dxn === "string" ? new AnchorWidget(label, dxn) : null
+  },
+  "synthetic": {
     block: true,
     factory: ({ children, range }) => {
-      const text = getXmlTextChild(children);
+      const text = getXmlTextChild2(children);
       return text ? new ReasoningWidget(text, range.from) : null;
     }
   },
-  reasoning: {
+  "reasoning": {
     block: true,
     streaming: true,
     factory: ({ children, range }) => {
-      const text = getXmlTextChild(children);
+      const text = getXmlTextChild2(children);
       return text ? new ReasoningWidget(text, range.from) : null;
     }
   },
-  reference: {
+  "reference": {
     block: false,
     factory: ({ children, ref }) => {
-      const text = getXmlTextChild(children);
+      const text = getXmlTextChild2(children);
       return text && ref ? new ReferenceWidget(text, ref) : null;
     }
   },
-  select: {
+  "select": {
     block: true,
     factory: ({ children }) => {
-      const options = children?.map((option) => option._tag === "option" && getXmlTextChild(option.children)).filter(Boolean);
+      const options = children?.map((option) => option._tag === "option" && getXmlTextChild2(option.children)).filter(Boolean);
       return options?.length ? new SelectWidget(options) : null;
     }
   },
-  suggestion: {
+  "suggestion": {
     block: true,
     factory: ({ children }) => {
-      const text = getXmlTextChild(children);
+      const text = getXmlTextChild2(children);
       return text ? new SuggestionWidget(text) : null;
     }
   },
-  stats: {
+  "stats": {
     block: true,
     factory: ({ children }) => {
-      const text = getXmlTextChild(children);
+      const text = getXmlTextChild2(children);
       return text ? new StatsWidget(text) : null;
     }
   },
-  status: {
+  "status": {
     block: true,
     streaming: true,
     factory: ({ children }) => {
-      const text = getXmlTextChild(children);
+      const text = getXmlTextChild2(children);
       return text ? new StatusWidget(text) : null;
     }
   },
   //
   // React Widgets (portaled outside of the editor)
   //
-  summary: {
+  "summary": {
     block: true,
     Component: SummaryWidget
   },
-  toolCall: {
+  "surface": {
+    block: true,
+    Component: SurfaceWidget
+  },
+  "toolCall": {
     block: true,
-    Component: (props) => /* @__PURE__ */ React13.createElement("div", {
+    Component: (props) => /* @__PURE__ */ React14.createElement("div", {
       className: "py-2"
-    }, /* @__PURE__ */ React13.createElement(ToolWidget, props))
+    }, /* @__PURE__ */ React14.createElement(ToolWidget, props))
   },
-  toolResult: {
+  "toolResult": {
     block: true,
     Component: FallbackWidget
   },
-  toolkit: {
+  "toolkit": {
     block: true,
     Component: FallbackWidget
   },
   //
   // Fallback
   //
-  json: {
+  "json": {
     block: true,
     Component: FallbackWidget
   }
@@ -1349,9 +1605,9 @@ var isBlockVisible = (viewType, message, block) => {
   }
 };
 var blockToMarkdownImpl = (context, message, block) => {
-  log("blockToMarkdown", {
+  log2("blockToMarkdown", {
     block: JSON.stringify(block)
-  }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 154, S: void 0 });
+  }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 166, S: void 0 });
   switch (block._tag) {
     case "text": {
       if (message.sender.role === "user") {
@@ -1424,6 +1680,15 @@ var blockToMarkdownImpl = (context, message, block) => {
         pending: block.pending
       });
     }
+    case "surface": {
+      if (block.pending) {
+        return;
+      }
+      return renderXMLBlock("surface", {
+        content: JSON.stringify(block.data ?? {}),
+        attributes: `role="${escapeXmlAttribute(block.role)}"`
+      });
+    }
     default: {
       return `<json id="${message.id}">
 ${JSON.stringify(block)}
@@ -1432,6 +1697,7 @@ ${JSON.stringify(block)}
   }
 };
 var escapeXmlTextContent = (raw) => raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var escapeXmlAttribute = (raw) => escapeXmlTextContent(raw).replace(/"/g, "&quot;");
 var renderXMLBlock = (tag, opts) => {
   const content = escapeXmlTextContent((opts.content ?? "").replace(/\n\n/g, " ").trim());
   if (opts.pending) {
@@ -1541,17 +1807,17 @@ var defaultOptions = {
 };
 var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages = [], error, options = defaultOptions, footer, debug = false, extensions, viewType, onEvent }, forwardedRef) => {
   const [controller, setController] = useState6(null);
-  const handleMarkdownStreamRef = useCallback6((instance) => {
+  const handleMarkdownStreamRef = useCallback8((instance) => {
     setController(instance);
     setRef(forwardedRef, instance);
   }, [
     forwardedRef
   ]);
-  const userHue = useMemo5(() => identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue, [
+  const userHue = useMemo8(() => identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue, [
     identity
   ]);
-  const initializedRef = useRef3(false);
-  useEffect5(() => {
+  const initializedRef = useRef4(false);
+  useEffect7(() => {
     if (!controller) {
       initializedRef.current = false;
       return;
@@ -1562,14 +1828,14 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
     controller,
     error
   ]);
-  const renderer = useMemo5(() => createBlockRenderer(viewType), [
+  const renderer = useMemo8(() => createBlockRenderer(viewType), [
     viewType
   ]);
-  const syncer = useMemo5(() => controller && new MessageSyncer(controller, renderer), [
+  const syncer = useMemo8(() => controller && new MessageSyncer(controller, renderer), [
     controller,
     renderer
   ]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!syncer) {
       return;
     }
@@ -1581,7 +1847,7 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
     syncer,
     messages
   ]);
-  const handleEvent = useCallback6(({ type, value: value2 }) => {
+  const handleEvent = useCallback8(({ type, value: value2 }) => {
     switch (type) {
       case "submit": {
         value2 && onEvent?.({
@@ -1594,10 +1860,10 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
   }, [
     onEvent
   ]);
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React15.createElement("div", {
     "data-hue": userHue,
     className: "contents"
-  }, /* @__PURE__ */ React14.createElement(MarkdownStream, {
+  }, /* @__PURE__ */ React15.createElement(MarkdownStream, {
     key: viewType,
     classNames,
     registry: componentRegistry,
@@ -1611,54 +1877,142 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
 });
 
 // src/components/TaskList/TaskList.tsx
-import React15 from "react";
+import React16, { useMemo as useMemo9 } 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 { Icon as Icon4, 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__ */ React16.createElement(Listbox2.Root, null, /* @__PURE__ */ React16.createElement(Listbox2.Viewport, {
     ...composableProps(props, {
       classNames: "dx-container"
     }),
     ref: forwardedRef
-  }, /* @__PURE__ */ React15.createElement(RowList.Content, {
+  }, /* @__PURE__ */ React16.createElement(Listbox2.Content, {
     "aria-label": "Tasks"
-  }, tasks.map((task) => /* @__PURE__ */ React15.createElement(Row, {
+  }, tasks.map((task) => /* @__PURE__ */ React16.createElement(TaskListItem, {
     key: task.id,
+    task,
+    space,
+    traceMessages,
+    conversationId
+  })))));
+});
+var TaskListItem = ({ task, space, traceMessages, conversationId }) => {
+  const durableLines = useMemo9(() => {
+    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 = useMemo9(() => {
+    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 = useMemo9(() => {
+    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__ */ React16.createElement(Listbox2.Item, {
     id: task.id,
     classNames: "py-0"
-  }, /* @__PURE__ */ React15.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React15.createElement(Icon3, {
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex flex-col gap-0.5 min-w-0"
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center gap-2 min-w-0"
+  }, /* @__PURE__ */ React16.createElement(Icon4, {
     icon: task.status === "done" ? "ph--check--regular" : "ph--circle--regular",
     classNames: task.status === "done" ? "text-success-text" : void 0,
     size: 4
-  }), /* @__PURE__ */ React15.createElement("span", {
+  }), /* @__PURE__ */ React16.createElement("span", {
     className: "sr-only"
-  }, task.status === "done" ? "done" : task.status === "in-progress" ? "in progress" : "to do"), /* @__PURE__ */ React15.createElement("span", {
+  }, task.status === "done" ? "done" : task.status === "in-progress" ? "in progress" : "to do"), /* @__PURE__ */ React16.createElement("span", {
     className: "truncate flex-1"
-  }, task.title), task.status === "in-progress" && /* @__PURE__ */ React15.createElement(Tag, {
-    palette: "info"
-  }, "pending")))))));
-});
+  }, task.title), task.status === "in-progress" && /* @__PURE__ */ React16.createElement(Tag, {
+    hue: "info"
+  }, "pending"), task.agentPid && /* @__PURE__ */ React16.createElement(Tag, {
+    hue: "info"
+  }, Plan.formatAgentPidTag(task.agentPid))), showActivity && agentPid != null && /* @__PURE__ */ React16.createElement(DelegatedTaskActivity, {
+    agentPid,
+    lines: activityLines
+  })));
+};
+var DelegatedTaskActivity = ({ agentPid, lines }) => {
+  return /* @__PURE__ */ React16.createElement("div", {
+    className: "flex items-center gap-2 ps-6 min-w-0 text-placeholder"
+  }, /* @__PURE__ */ React16.createElement(Icon4, {
+    icon: "ph--brain--regular",
+    size: 3,
+    classNames: "shrink-0 opacity-70"
+  }), /* @__PURE__ */ React16.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 }) => {
+var ChatRoot = ({ children, chat, processor, db: dbFallback, onEvent, onSubmit, ...props }) => {
   const [debug, setDebug] = useState7(false);
   const streaming = useAtomValue4(processor.streaming);
   const active = useAtomValue4(processor.active);
   const requestTiming = useRequestTiming({
     active
   });
-  const lastPrompt = useRef4(void 0);
+  const lastPrompt = useRef5(void 0);
   const db = chat && Obj4.getDatabase(chat) || dbFallback;
-  const event = useMemo6(() => new Event(), []);
+  const [feedSnapshot] = useObject3(chat?.feed);
+  const feed = Obj4.getReactiveOrUndefined(feedSnapshot);
+  const event = useMemo10(() => 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 = useMemo10(() => Array2.dedupeWith([
     ...feedMessages,
     ...pendingMessages
   ], ({ id: a }, { id: b }) => a === b), [
@@ -1669,7 +2023,7 @@ var ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSu
     processor
   });
   const error = useAtomValue4(processor.error);
-  useEffect6(() => {
+  useEffect8(() => {
     if (Option3.isSome(error)) {
       event.emit({
         type: "error",
@@ -1680,7 +2034,7 @@ var ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSu
     event,
     error
   ]);
-  useEffect6(() => {
+  useEffect8(() => {
     return event.on((ev) => {
       switch (ev.type) {
         case "toggle-debug": {
@@ -1733,7 +2087,7 @@ var ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSu
     onEvent,
     onSubmit
   ]);
-  return /* @__PURE__ */ React16.createElement(ChatContextProvider, {
+  return /* @__PURE__ */ React17.createElement(ChatContextProvider, {
     debug,
     event,
     db,
@@ -1747,7 +2101,7 @@ var ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSu
 ChatRoot.displayName = "Chat.Root";
 var useRequestTiming = ({ active }) => {
   const [requestTiming, setRequestTiming] = useState7(null);
-  useEffect6(() => {
+  useEffect8(() => {
     if (active) {
       setRequestTiming({
         startedAt: Date.now(),
@@ -1771,11 +2125,11 @@ var ChatToolbar = composable2(({ children, attendableId, alwaysActive, companion
     chat,
     companionTo
   });
-  return /* @__PURE__ */ React16.createElement(Menu.Root, {
+  return /* @__PURE__ */ React17.createElement(Menu.Root, {
     ...menuActions,
     attendableId,
     alwaysActive
-  }, /* @__PURE__ */ React16.createElement(Menu.Toolbar, {
+  }, /* @__PURE__ */ React17.createElement(Menu.Toolbar, {
     ...composableProps2(props),
     ref: forwardedRef
   }, children));
@@ -1783,7 +2137,7 @@ var ChatToolbar = composable2(({ children, attendableId, alwaysActive, companion
 ChatToolbar.displayName = CHAT_TOOLBAR_NAME;
 var CHAT_CONTENT_NAME = "Chat.Content";
 var ChatContent = composable2(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     ...composableProps2(props, {
       classNames: "dx-expander flex flex-col"
     }),
@@ -1792,8 +2146,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 } = useTranslation10(meta10.profile.key);
   const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
   const extensions = useChatKeymapExtensions2({
     event
@@ -1801,9 +2155,10 @@ 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(() => {
+  const controllerRef = useRef5(null);
+  useEffect8(() => {
     return event.on((event2) => {
       switch (event2.type) {
         case "submit":
@@ -1824,17 +2179,17 @@ var ChatThread2 = ({ viewType, debug: debugProp, ...props }) => {
   }, [
     event
   ]);
-  const handleEvent = useCallback7((ev) => {
+  const handleEvent = useCallback9((ev) => {
     event.emit(ev);
   }, [
     event
   ]);
   if (!identity) {
-    return /* @__PURE__ */ React16.createElement("div", {
+    return /* @__PURE__ */ React17.createElement("div", {
       className: "dx-expander"
     });
   }
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(ChatThread, {
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ChatThread, {
     ...props,
     identity,
     messages,
@@ -1844,21 +2199,29 @@ var ChatThread2 = ({ viewType, debug: debugProp, ...props }) => {
     extensions,
     onEvent: handleEvent,
     ref: controllerRef
-  }), /* @__PURE__ */ React16.createElement(Toast.Root, {
+  }), /* @__PURE__ */ React17.createElement(Toast.Root, {
     type: "foreground",
     open: !!toastError,
     duration: 2e4,
     onOpenChange: (open) => !open && setToastError(void 0)
-  }, /* @__PURE__ */ React16.createElement(Toast.Title, {
+  }, /* @__PURE__ */ React17.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__ */ React17.createElement(Toast.Description, null, toastError?.message), toastAction && onViewUsage && /* @__PURE__ */ React17.createElement(Toast.Actions, null, /* @__PURE__ */ React17.createElement(Toast.Action, {
+    altText: t(toastAction.labelKey),
+    asChild: true
+  }, /* @__PURE__ */ React17.createElement(Button, {
+    onClick: () => {
+      setToastError(void 0);
+      onViewUsage();
+    }
+  }, t(toastAction.labelKey))))));
 };
 ChatThread2.displayName = CHAT_THREAD_NAME;
 var CHAT_PROMPT_NAME = "Chat.Prompt";
 var ChatPrompt2 = (props) => {
   const { chat, db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
-  return /* @__PURE__ */ React16.createElement(ChatPrompt, {
+  return /* @__PURE__ */ React17.createElement(ChatPrompt, {
     ...props,
     chat,
     db,
@@ -1870,15 +2233,22 @@ ChatPrompt2.displayName = CHAT_PROMPT_NAME;
 var CHAT_TASK_LIST_NAME = "Chat.TaskList";
 var ChatTaskList = composable2(({ plan: planProp, ...props }, forwardedRef) => {
   const { chat } = useChatContext(CHAT_TASK_LIST_NAME);
-  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;
-  if (!plan) {
+  const plan = useAtomValue4(useMemo10(() => Atom2.make((get) => planProp ?? Option3.fromNullable(chat).pipe(Option3.map((_) => get(Obj4.atom(_))), Option3.flatMapNullable((_) => _?.plan?.atom), Option3.map(get), Option3.getOrUndefined)), [
+    chat,
+    planProp
+  ]));
+  const space = chat ? getSpace(chat) : void 0;
+  const traceMessages = useTraceMessages(space);
+  const conversationId = chat?.feed?.target?.id;
+  if (!plan || !(plan.tasks?.length ?? 0)) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(TaskList, {
+  return /* @__PURE__ */ React17.createElement(TaskList, {
     ...props,
     plan,
+    space,
+    traceMessages,
+    conversationId,
     ref: forwardedRef
   });
 });
@@ -1896,14 +2266,90 @@ var Chat = {
 // src/components/ProcessTree/ProcessTree.tsx
 import * as Match from "effect/Match";
 import * as Option4 from "effect/Option";
-import React17 from "react";
+import React18, { useMemo as useMemo11 } 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 Icon5, IconButton as IconButton4, ScrollArea, Tooltip as Tooltip2, composable as composable3, composableProps as composableProps3 } from "@dxos/react-ui";
+import { Treegrid, TREEGRID_PATH_SEPARATOR } from "@dxos/react-ui-list";
 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__ */ React18.memo(composable3(({ processes, depth = DEFAULT_DEPTH, onProcessSelect, onProcessTerminate, ...props }, forwardedRef) => {
+  const rows = useMemo11(() => buildProcessTreeRows(processes, depth), [
+    processes,
+    depth
+  ]);
+  return /* @__PURE__ */ React18.createElement(ScrollArea.Root, {
+    ...composableProps3(props, {
+      classNames: "dx-expander"
+    }),
+    thin: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React18.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React18.createElement(Treegrid.Root, {
+    classNames: "grid grid-cols-[min-content_1fr_min-content_min-content]"
+  }, rows.map(({ process, path }) => /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.createElement(Treegrid.Cell, {
+    classNames: "flex items-center gap-0.5"
+  }, nested && /* @__PURE__ */ React18.createElement(Icon5, {
+    icon: "ph--arrow-elbow-down-right--regular",
+    size: 3,
+    classNames: "shrink-0 text-subdued"
+  }), /* @__PURE__ */ React18.createElement(Tooltip2.Trigger, {
+    content: process.state.toString()
+  }, /* @__PURE__ */ React18.createElement(Icon5, {
+    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__ */ React18.createElement(Treegrid.Cell, {
+    classNames: "flex items-center truncate",
+    style: nested ? {
+      paddingInlineStart: `${(level - 1) * LABEL_INDENT_REM}rem`
+    } : void 0,
+    onClick: () => onProcessSelect?.(process)
+  }, /* @__PURE__ */ React18.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__ */ React18.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__ */ React18.createElement("span", {
+    className: "whitespace-nowrap"
+  }, duration.toString())), /* @__PURE__ */ React18.createElement(Treegrid.Cell, null, onProcessTerminate && /* @__PURE__ */ React18.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,412 +2362,89 @@ 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);
-      }
-    })));
-  }))));
-}));
-
-// src/components/TemplateEditor/TemplateEditor.tsx
-import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { composeRefs } from "@radix-ui/react-compose-refs";
-import React18 from "react";
-import { createDocAccessor } from "@dxos/echo-client";
-import { useThemeContext, useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { composable as composable4, composableProps as composableProps4 } from "@dxos/react-ui";
-import { useTextEditor } from "@dxos/react-ui-editor";
-import { createBasicExtensions, createDataExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown } from "@dxos/ui-editor";
-import { isNonNullable as isNonNullable2 } from "@dxos/util";
-import { meta as meta10 } from "#meta";
-
-// src/components/TemplateEditor/extensions/handlebars-extension.ts
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { RangeSetBuilder } from "@codemirror/state";
-import { Decoration, ViewPlugin, WidgetType as WidgetType7, keymap } from "@codemirror/view";
-import { Domino as Domino7, mx as mx8 } from "@dxos/ui";
-var handlebars = (_ = {}) => {
-  return [
-    handlebarsHighlightPlugin,
-    autocompletion({
-      activateOnTyping: true,
-      aboveCursor: true,
-      closeOnBlur: true,
-      override: [
-        handlebarsCompletions
-      ]
-    }),
-    keymap.of(completionKeymap)
-  ];
 };
-var regex = {
-  // {{! comment }}
-  comment: /\{\{!\s*[^}]*\}\}/g,
-  // {{var}}
-  brackets: /\{\{[^}]*\}\}/g,
-  // {{#command}} {{/command}}
-  command: /\{\{[#/]([^}]+)\}\}/g,
-  // {{var}}
-  var: /\{\{(?!\s*!)(\w[^}]*)\}\}/g,
-  // @echo://space/id or @dxn:nsid
-  dxn: /@?(?:echo:\/{1,3}[\w/]+|dxn:[\w.-]+)/g,
-  // example.com/path/xxx
-  url: /[\w.-]+\.[\w.-]+\/[\w/]+/g
-};
-var tagPadding = "mx-0.5 px-1 rounded-xs";
-var handlebarsHighlightPlugin = ViewPlugin.fromClass(class {
-  decorations;
-  constructor(view) {
-    this.decorations = this.buildDecorations(view);
-  }
-  update(update) {
-    if (update.docChanged || update.viewportChanged || update.selectionSet) {
-      this.decorations = this.buildDecorations(update.view);
+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);
   }
-  // NOTE: Decorations may clash with other extensions (e.g., markdown).
-  buildDecorations(view) {
-    const selection = view.state.selection.main;
-    const decorations = [];
-    for (const { from, to } of view.visibleRanges) {
-      const text = view.state.doc.sliceString(from, to);
-      {
-        let match;
-        while ((match = regex.dxn.exec(text)) !== null) {
-          const start = from + match.index;
-          const end = start + match[0].length;
-          const overlaps = selection.to > start && selection.from <= end;
-          if (!overlaps) {
-            decorations.push({
-              from: start,
-              to: end,
-              decoration: Decoration.widget({
-                widget: new DXNWidget(match[0])
-              })
-            });
-          }
-        }
-      }
-      {
-        let match;
-        while ((match = regex.url.exec(text)) !== null) {
-          const start = from + match.index;
-          const end = start + match[0].length;
-          decorations.push({
-            from: start,
-            to: end,
-            decoration: Decoration.mark({
-              class: mx8("dx-tag--blue", tagPadding)
-            })
-          });
-        }
-      }
-      {
-        let match;
-        while ((match = regex.brackets.exec(text)) !== null) {
-          const start = from + match.index;
-          const end = start + match[0].length;
-          decorations.push({
-            from: start,
-            to: end,
-            decoration: Decoration.mark({
-              class: "text-subdued"
-            })
-          });
-        }
-      }
-      {
-        let match;
-        while ((match = regex.command.exec(text)) !== null) {
-          const start = from + match.index + 2;
-          let end = start + match[0].length - 4;
-          const text2 = view.state.doc.sliceString(start, end);
-          const parts = text2.split(/\s+/);
-          if (parts.length > 1) {
-            const idx = start + parts[0].length;
-            decorations.push({
-              from: idx,
-              to: end,
-              decoration: Decoration.mark({
-                class: "text-green-text"
-              })
-            });
-            end = idx;
-          }
-          decorations.push({
-            from: start,
-            to: end,
-            decoration: Decoration.mark({
-              class: "text-blue-text"
-            })
-          });
-        }
-      }
-      {
-        let match;
-        while ((match = regex.var.exec(text)) !== null) {
-          const start = from + match.index + 2;
-          const end = start + match[0].length - 4;
-          decorations.push({
-            from: start,
-            to: end,
-            decoration: Decoration.mark({
-              class: "text-green-text"
-            })
-          });
-        }
-      }
+  const sortedRoots = sortProcesses(roots);
+  const rows = [];
+  const visit = (process, path, level) => {
+    if (level > maxDepth) {
+      return;
     }
-    decorations.sort((a, b) => a.from - b.from || a.to - b.to);
-    const builder = new RangeSetBuilder();
-    for (const { from, to, decoration } of decorations) {
-      builder.add(from, to, decoration);
+    rows.push({
+      process,
+      path
+    });
+    if (level >= maxDepth) {
+      return;
     }
-    return builder.finish();
-  }
-}, {
-  decorations: (v) => v.decorations
-});
-var DXNWidget = class extends WidgetType7 {
-  _identifier;
-  constructor(_identifier) {
-    super(), this._identifier = _identifier;
-  }
-  ignoreEvent() {
-    return false;
-  }
-  eq(other) {
-    return this._identifier === other._identifier;
-  }
-  toDOM() {
-    const text = this._identifier.split(":").map((part) => {
-      const len = 16;
-      const plen = 4;
-      if (part.length > len) {
-        return `[${part.slice(0, plen)}\u2026${part.slice(-plen)}]`;
-      }
-      return part;
-    }).join(":");
-    return Domino7.of("span").classNames(mx8("font-mono dx-tag--blue", tagPadding)).text(text).root;
-  }
-};
-var variables = [
-  "this"
-];
-var commands = [
-  "this",
-  "each",
-  "if",
-  "unless",
-  "with"
-];
-function handlebarsCompletions(context) {
-  const match = context.matchBefore(/\{\{[^}]*/);
-  if (!match || match.from === match.to) {
-    return null;
-  }
-  let type = "variable";
-  let text = match.text.slice(2);
-  let from = match.from + 2;
-  let matches = [];
-  if (text.startsWith("#") || text.startsWith("/")) {
-    const idx = text.lastIndexOf(" ");
-    if (idx !== -1) {
-      type = "variable";
-      matches = variables;
-      text = text.slice(idx + 1);
-      from += idx + 1;
-    } else {
-      type = "command";
-      text = text.slice(1);
-      matches = commands;
-      from += 1;
+    const children = sortNestedActive(childrenByParent.get(String(process.pid)) ?? []);
+    for (const child of children) {
+      visit(child, [
+        ...path,
+        String(child.pid)
+      ], level + 1);
     }
-  } else {
-    type = "variable";
-    matches = variables;
-  }
-  const options = matches.filter((name) => name.startsWith(text)).map((name) => ({
-    type,
-    label: name
-  }));
-  return {
-    from,
-    options
   };
-}
-
-// src/components/TemplateEditor/extensions/xml-extension.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { Decoration as Decoration2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
-var xmlDecorator = (_ = {}) => {
-  return [
-    xmlDecoratorPlugin
-  ];
-};
-var xmlDecoratorPlugin = ViewPlugin2.fromClass(class {
-  decorations;
-  constructor(view) {
-    this.decorations = this.buildDecorations(view);
-  }
-  update(update) {
-    if (update.docChanged || update.viewportChanged) {
-      this.decorations = this.buildDecorations(update.view);
-    }
-  }
-  buildDecorations(view) {
-    const builder = new RangeSetBuilder2();
-    for (const { from, to } of view.visibleRanges) {
-      syntaxTree(view.state).iterate({
-        from,
-        to,
-        enter: (node) => {
-          if (node.name === "HTMLTag" || node.name === "OpenTag" || node.name === "CloseTag" || node.name === "SelfClosingTag" || node.name === "Element") {
-            builder.add(node.from, node.to, Decoration2.mark({
-              class: "font-mono text-subdued"
-            }));
-          }
-        }
-      });
-    }
-    return builder.finish();
+  for (const root of sortedRoots) {
+    visit(root, [
+      String(root.pid)
+    ], 1);
   }
-}, {
-  decorations: (v) => v.decorations
-});
-
-// src/components/TemplateEditor/TemplateEditor.tsx
-var TemplateEditor = composable4(({ classNames, id, source, lineNumbers = true, ...props }, forwardedRef) => {
-  const { t } = useTranslation10(meta10.id);
-  const { themeMode } = useThemeContext();
-  const { parentRef } = useTextEditor(() => {
-    const target = source?.target;
-    if (!target) {
-      return {};
-    }
-    return {
-      initialValue: target.content ?? "",
-      extensions: [
-        createDataExtensions({
-          id,
-          text: createDocAccessor(target, [
-            "content"
-          ])
-        }),
-        createBasicExtensions({
-          bracketMatching: false,
-          lineNumbers,
-          lineWrapping: true,
-          placeholder: t("template.placeholder")
-        }),
-        createThemeExtensions({
-          themeMode
-        }),
-        createMarkdownExtensions(),
-        decorateMarkdown(),
-        handlebars(),
-        // xml(),
-        // NOTE: Since we're using markdown only HTML nodes are parsed.
-        xmlDecorator(),
-        syntaxHighlighting(defaultHighlightStyle)
-      ].filter(isNonNullable2)
-    };
-  }, [
-    themeMode,
-    source?.target,
-    lineNumbers
-  ]);
-  return /* @__PURE__ */ React18.createElement("div", {
-    ...composableProps4(props, {
-      role: "none",
-      classNames: [
-        "h-full overflow-hidden",
-        classNames
-      ]
-    }),
-    ref: composeRefs(parentRef, forwardedRef)
-  });
-});
+  return rows;
+};
 
 // src/components/Toolbox/Toolbox.tsx
-import React19, { Fragment, useEffect as useEffect7, useState as useState8 } from "react";
+import React19, { Fragment, useEffect as useEffect9, useState as useState8 } from "react";
 import { Operation } from "@dxos/compute";
 import { Filter as Filter4 } from "@dxos/echo";
-import { log as log2 } from "@dxos/log";
+import { log as log3 } from "@dxos/log";
 import { useQuery as useQuery4 } from "@dxos/react-client/echo";
 import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
-import { composable as composable5, composableProps as composableProps5 } from "@dxos/react-ui";
-import { mx as mx9 } from "@dxos/ui-theme";
+import { composable as composable4, composableProps as composableProps4 } from "@dxos/react-ui";
+import { mx as mx8 } from "@dxos/ui-theme";
 import { ServiceType } from "#types";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/Toolbox/Toolbox.tsx";
-var Toolbox = composable5(({ functions, services, blueprints, activeBlueprints, ...props }, forwardedRef) => {
+var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/Toolbox/Toolbox.tsx";
+var Toolbox = composable4(({ functions, services, skills, activeSkills, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React19.createElement(ScrollArea2.Root, {
-    ...composableProps5(props),
+    ...composableProps4(props),
     thin: true,
     orientation: "vertical",
     ref: forwardedRef
-  }, /* @__PURE__ */ React19.createElement(ScrollArea2.Viewport, null, blueprints && blueprints.length > 0 && /* @__PURE__ */ React19.createElement(Section, {
-    title: "Blueprints",
-    items: blueprints.map(({ name, description, tools }) => ({
+  }, /* @__PURE__ */ React19.createElement(ScrollArea2.Viewport, null, skills && skills.length > 0 && /* @__PURE__ */ React19.createElement(Section, {
+    title: "Skills",
+    items: skills.map(({ name, description, tools }) => ({
       name,
       description,
       subitems: tools.map((toolId) => ({
         name: `\u2219 ${safeToolId(toolId)}`
       }))
     }))
-  }), activeBlueprints && activeBlueprints.length > 0 && /* @__PURE__ */ React19.createElement(Section, {
-    title: "Blueprints",
-    items: activeBlueprints.map(({ target }) => ({
+  }), activeSkills && activeSkills.length > 0 && /* @__PURE__ */ React19.createElement(Section, {
+    title: "Skills",
+    items: activeSkills.map(({ target }) => ({
       name: target?.name ?? "",
       description: target?.description ?? "",
       subitems: target?.tools.map((toolId) => ({
@@ -2346,7 +2469,7 @@ Toolbox.displayName = "Toolbox";
 var Section = ({ title, items, striped }) => {
   const stripeClassNames = "odd:bg-neutral-50 dark:odd:bg-neutral-800";
   const gridClassNames = "grid grid-cols-[8rem_1fr]";
-  const subGridClassNames = mx9("col-span-full grid grid-cols-subgrid text-xs px-2", striped && stripeClassNames);
+  const subGridClassNames = mx8("col-span-full grid grid-cols-subgrid text-xs px-2", striped && stripeClassNames);
   return /* @__PURE__ */ React19.createElement("div", null, /* @__PURE__ */ React19.createElement("h1", {
     className: "px-2 text-sm"
   }, title), /* @__PURE__ */ React19.createElement("div", {
@@ -2361,7 +2484,7 @@ var Section = ({ title, items, striped }) => {
     className: "line-clamp-2"
   }, description)), subitems?.map(({ name: name2, description: description2 }, i2) => /* @__PURE__ */ React19.createElement("div", {
     key: i2,
-    className: mx9(subGridClassNames, striped && stripeClassNames)
+    className: mx8(subGridClassNames, striped && stripeClassNames)
   }, /* @__PURE__ */ React19.createElement("div", {
     className: "truncate"
   }, name2), /* @__PURE__ */ React19.createElement("div", {
@@ -2371,10 +2494,10 @@ var Section = ({ title, items, striped }) => {
 var ToolboxPanel = ({ classNames, db, processor }) => {
   const services = useQuery4(db, Filter4.type(ServiceType));
   const [serviceTools, setServiceTools] = useState8([]);
-  useEffect7(() => {
-    log2("creating service tools...", {
+  useEffect9(() => {
+    log3("creating service tools...", {
       services: services.length
-    }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 82, S: void 0 });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 82, S: void 0 });
     queueMicrotask(async () => {
     });
   }, [
@@ -2383,7 +2506,7 @@ var ToolboxPanel = ({ classNames, db, processor }) => {
   const functions = useQuery4(db, Filter4.type(Operation.PersistentOperation));
   return /* @__PURE__ */ React19.createElement(Toolbox, {
     classNames,
-    blueprints: processor?.context.getBlueprints(),
+    skills: processor?.context.getSkills(),
     services: serviceTools,
     functions
   });
@@ -2391,20 +2514,14 @@ var ToolboxPanel = ({ classNames, db, processor }) => {
 var safeToolId = (name) => {
   return name.split("_").pop();
 };
-
-// src/components/index.ts
-var AssistantSettings = lazy(() => import("../AssistantSettings-GG52BLKS.mjs"));
-var RoutineProperties = lazy(() => import("../RoutineProperties-FISLMW2R.mjs"));
 export {
   AgentProperties,
-  AssistantSettings,
   Chat,
   ChatPrompt,
   ProcessTree,
-  RoutineProperties,
   TaskList,
-  TemplateEditor,
   Toolbox,
-  ToolboxPanel
+  ToolboxPanel,
+  TracePanel
 };
 //# sourceMappingURL=index.mjs.map