@dxos/plugin-assistant 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/node-esm/{chunk-XI5T3MJC.mjs → chunk-5DLYAEBK.mjs}

@@ -2,108 +2,27 @@ import { createRequire } from 'node:module';const require = createRequire(import
 import {
   AiChatProcessor,
   AiServicePresets
-} from "./chunk-ZRIPP7YF.mjs";
+} from "./chunk-JMBYVUD6.mjs";
 import {
   AssistantOperation,
-  Assistant_exports,
-  LLM_PROVIDERS,
   ServiceType
-} from "./chunk-355W5B27.mjs";
+} from "./chunk-JQAXFBBU.mjs";
 import {
   meta
-} from "./chunk-POWB2BPC.mjs";
-
-// src/components/AssistantSettings/AssistantSettings.tsx
-import React from "react";
-import { DEFAULT_EDGE_MODELS, DEFAULT_OLLAMA_MODELS } from "@dxos/ai";
-import { Input, Select, useTranslation } from "@dxos/react-ui";
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from "@dxos/react-ui-form";
-var DEFAULT_VALUE = "__default";
-var LLM_PROVIDER_LABELS = {
-  edge: "DXOS",
-  ollama: "Ollama",
-  lmstudio: "LM Studio"
-};
-var AssistantSettings = ({ settings, onSettingsChange }) => {
-  const { t } = useTranslation(meta.id);
-  return /* @__PURE__ */ React.createElement(ControlPage, null, /* @__PURE__ */ React.createElement(ControlSection, {
-    title: t("settings title", {
-      ns: meta.id
-    })
-  }, /* @__PURE__ */ React.createElement(ControlGroup, null, /* @__PURE__ */ React.createElement(ControlItemInput, {
-    title: t("settings custom prompts label")
-  }, /* @__PURE__ */ React.createElement(Input.Switch, {
-    checked: !!settings.customPrompts,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
-      customPrompts: checked
-    }))
-  })), /* @__PURE__ */ React.createElement(ControlItemInput, {
-    title: t("settings llm provider label")
-  }, /* @__PURE__ */ React.createElement(Select.Root, {
-    value: settings.llmProvider ?? "edge",
-    onValueChange: (value) => {
-      onSettingsChange((s) => ({
-        ...s,
-        llmProvider: value === DEFAULT_VALUE ? void 0 : value
-      }));
-    }
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
-    placeholder: t("settings llm provider label")
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, /* @__PURE__ */ React.createElement(Select.Option, {
-    value: DEFAULT_VALUE
-  }, t("settings default label")), LLM_PROVIDERS.map((model) => /* @__PURE__ */ React.createElement(Select.Option, {
-    key: model,
-    value: model
-  }, LLM_PROVIDER_LABELS[model]))), /* @__PURE__ */ React.createElement(Select.Arrow, null))))), /* @__PURE__ */ React.createElement(ControlItemInput, {
-    title: t("settings edge llm model label")
-  }, /* @__PURE__ */ React.createElement(Select.Root, {
-    value: settings.edgeModel ?? DEFAULT_VALUE,
-    onValueChange: (value) => {
-      onSettingsChange((s) => ({
-        ...s,
-        edgeModel: value === DEFAULT_VALUE ? void 0 : value
-      }));
-    }
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
-    placeholder: t("settings default llm model label")
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, /* @__PURE__ */ React.createElement(Select.Option, {
-    value: DEFAULT_VALUE
-  }, t("settings default label")), DEFAULT_EDGE_MODELS.map((model) => /* @__PURE__ */ React.createElement(Select.Option, {
-    key: model,
-    value: model
-  }, model))), /* @__PURE__ */ React.createElement(Select.Arrow, null))))), /* @__PURE__ */ React.createElement(ControlItemInput, {
-    title: t("settings ollama llm model label")
-  }, /* @__PURE__ */ React.createElement(Select.Root, {
-    value: settings.ollamaModel ?? DEFAULT_VALUE,
-    onValueChange: (value) => {
-      onSettingsChange((s) => ({
-        ...s,
-        ollamaModel: value === DEFAULT_VALUE ? void 0 : value
-      }));
-    }
-  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
-    placeholder: t("settings default llm model label")
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, /* @__PURE__ */ React.createElement(Select.Option, {
-    value: DEFAULT_VALUE
-  }, t("settings default label")), DEFAULT_OLLAMA_MODELS.map((model) => /* @__PURE__ */ React.createElement(Select.Option, {
-    key: model,
-    value: model
-  }, model))), /* @__PURE__ */ React.createElement(Select.Arrow, null))))))));
-};
+} from "./chunk-TEYTGR67.mjs";
 
 // src/hooks/useBlueprintRegistry.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Common } from "@dxos/app-framework";
-import { useCapabilities } from "@dxos/app-framework/react";
+import { useCapabilities } from "@dxos/app-framework/ui";
+import { AppCapabilities } from "@dxos/app-toolkit";
 import { Blueprint } from "@dxos/blueprints";
 import { Filter, Obj, Ref } from "@dxos/echo";
 import { useQuery } from "@dxos/react-client/echo";
 import { distinctBy } from "@dxos/util";
 var useBlueprintRegistry = () => {
-  const blueprints = useCapabilities(Common.Capability.BlueprintDefinition);
-  return useMemo(() => new Blueprint.Registry(blueprints), [
-    blueprints
+  const blueprintDefinitions = useCapabilities(AppCapabilities.BlueprintDefinition);
+  return useMemo(() => new Blueprint.Registry(blueprintDefinitions.map((blueprint) => blueprint.make())), [
+    blueprintDefinitions
   ]);
 };
 var useBlueprints = ({ blueprintRegistry, db }) => {
@@ -220,7 +139,7 @@ var useChatProcessor = ({ space, chat, preset, services, blueprintRegistry, sett
       settings
     }, {
       F: __dxlog_file,
-      L: 68,
+      L: 69,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -241,7 +160,7 @@ var useChatProcessor = ({ space, chat, preset, services, blueprintRegistry, sett
 // src/hooks/useChatServices.ts
 import * as Effect from "effect/Effect";
 import { useMemo as useMemo3 } from "react";
-import { useCapability } from "@dxos/app-framework/react";
+import { useCapability } from "@dxos/app-framework/ui";
 import { TracingService } from "@dxos/functions";
 import { TracingServiceExt } from "@dxos/functions-runtime";
 import { AutomationCapabilities } from "@dxos/plugin-automation";
@@ -263,34 +182,32 @@ var useChatServices = ({ id, chat }) => {
 import { Atom } from "@effect-atom/atom-react";
 import * as Effect2 from "effect/Effect";
 import { useMemo as useMemo10 } from "react";
-import { useOperationInvoker } from "@dxos/app-framework/react";
-import { Filter as Filter5, Obj as Obj6, Query } from "@dxos/echo";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { Chat as Chat2 } from "@dxos/assistant-toolkit";
+import { Filter as Filter6, Obj as Obj6, Query } from "@dxos/echo";
 import { runAndForwardErrors } from "@dxos/effect";
 import { invariant } from "@dxos/invariant";
-import { useQuery as useQuery4 } from "@dxos/react-client/echo";
+import { useQuery as useQuery5 } from "@dxos/react-client/echo";
 import { MenuBuilder, useMenuActions } from "@dxos/react-ui-menu";
 
-// src/components/index.ts
-import { lazy } from "react";
-
 // src/components/Chat/Chat.tsx
 import { Prec } from "@codemirror/state";
 import { keymap } from "@codemirror/view";
 import { useAtomValue } from "@effect-atom/atom-react";
 import { createContext } from "@radix-ui/react-context";
 import * as Array2 from "effect/Array";
-import * as Option2 from "effect/Option";
-import React10, { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo9, useRef as useRef3, useState as useState11 } from "react";
+import * as Option4 from "effect/Option";
+import React9, { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo9, useRef as useRef3, useState as useState12 } from "react";
 import { Event } from "@dxos/async";
-import { Obj as Obj5 } from "@dxos/echo";
+import { Filter as Filter4, Obj as Obj5 } from "@dxos/echo";
 import { useVoiceInput } from "@dxos/plugin-transcription";
-import { useQueue } from "@dxos/react-client/echo";
+import { useQuery as useQuery3 } from "@dxos/react-client/echo";
 import { useIdentity } from "@dxos/react-client/halo";
-import { Input as Input2, useDynamicRef, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Input, useDynamicRef, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { ChatEditor } from "@dxos/react-ui-chat";
-import { MenuProvider, ToolbarMenu } from "@dxos/react-ui-menu";
+import { Menu } from "@dxos/react-ui-menu";
 import { Message } from "@dxos/types";
-import { mx as mx5 } from "@dxos/ui-theme";
+import { mx as mx6 } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 
 // src/hooks/useContextBinder.ts
@@ -455,11 +372,8 @@ var usePresets = (online) => {
 
 // src/hooks/useReferencesProvider.ts
 import { useMemo as useMemo5 } from "react";
-import { Common as Common2 } from "@dxos/app-framework";
-import { useCapabilities as useCapabilities2 } from "@dxos/app-framework/react";
 import { Filter as Filter2, Obj as Obj2 } from "@dxos/echo";
 var useReferencesProvider = (space) => {
-  const blueprints = useCapabilities2(Common2.Capability.BlueprintDefinition);
   return useMemo5(() => {
     if (!space) {
       return void 0;
@@ -481,21 +395,20 @@ var useReferencesProvider = (space) => {
       }
     };
   }, [
-    space,
-    blueprints
+    space
   ]);
 };
 var stringMatch = (query, label) => label.toLowerCase().startsWith(query.toLowerCase());
 
 // src/components/ChatPrompt/ChatActions.tsx
-import React2 from "react";
-import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import React from "react";
+import { IconButton, useTranslation } from "@dxos/react-ui";
 import { mx } from "@dxos/ui-theme";
 var ChatActions = ({ classNames, children, microphone, recording, processing, onEvent }) => {
-  const { t } = useTranslation2(meta.id);
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: mx("flex items-center mie-1", classNames)
-  }, children, /* @__PURE__ */ React2.createElement(IconButton, {
+  const { t } = useTranslation(meta.id);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex items-center me-1", classNames)
+  }, children, /* @__PURE__ */ React.createElement(IconButton, {
     disabled: !processing,
     variant: "ghost",
     icon: "ph--x--regular",
@@ -504,7 +417,7 @@ var ChatActions = ({ classNames, children, microphone, recording, processing, on
     onClick: () => onEvent?.({
       type: "cancel"
     })
-  }), microphone && /* @__PURE__ */ React2.createElement(IconButton, {
+  }), microphone && /* @__PURE__ */ React.createElement(IconButton, {
     disabled: !processing,
     classNames: mx(recording && "bg-primary-500"),
     variant: "ghost",
@@ -524,82 +437,93 @@ var ChatActions = ({ classNames, children, microphone, recording, processing, on
     onTouchEnd: () => onEvent?.({
       type: "record-stop"
     })
+  }), /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--wrench--regular",
+    iconOnly: true,
+    label: t("debug button"),
+    onClick: () => onEvent?.({
+      type: "toggle-debug"
+    })
   }));
 };
 
 // src/components/ChatPrompt/ChatOptions.tsx
-import React3, { useMemo as useMemo6, useState as useState8 } from "react";
+import * as Option2 from "effect/Option";
+import React2, { useMemo as useMemo6, useState as useState8 } from "react";
 import { Filter as Filter3, Obj as Obj3, Type } from "@dxos/echo";
+import { Annotation } from "@dxos/echo";
 import { useQuery as useQuery2 } from "@dxos/react-client/echo";
-import { IconButton as IconButton2, Popover, Select as Select2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { IconButton as IconButton2, Popover, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { Listbox, SearchList, useSearchListResults } from "@dxos/react-ui-searchlist";
 import { Tabs } from "@dxos/react-ui-tabs";
-var panelClassNames = "is-[calc(100dvw-.5rem)] sm:is-max md:is-72 max-is-[--text-content]";
+import { getStyles, mx as mx2 } from "@dxos/ui-theme";
+var panelClassNames = "w-[calc(100dvw-.5rem)] sm:w-max md:w-72 max-w-text-content";
 var ChatOptions = ({ db, context, blueprintRegistry, presets, preset, onPresetChange }) => {
-  const { t } = useTranslation3(meta.id);
-  return /* @__PURE__ */ React3.createElement("div", {
+  const { t } = useTranslation2(meta.id);
+  return /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: "flex p-2"
-  }, /* @__PURE__ */ React3.createElement(Popover.Root, null, /* @__PURE__ */ React3.createElement(Popover.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(Popover.Root, null, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(IconButton2, {
+  }, /* @__PURE__ */ React2.createElement(IconButton2, {
     variant: "ghost",
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("context objects button")
-  })), /* @__PURE__ */ React3.createElement(Popover.Portal, null, /* @__PURE__ */ React3.createElement(Popover.Content, {
+  })), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
     side: "top",
     classNames: panelClassNames
-  }, /* @__PURE__ */ React3.createElement(Popover.Viewport, null, /* @__PURE__ */ React3.createElement(ObjectsPanel, {
+  }, /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(ObjectsPanel, {
     db,
     context
-  })), /* @__PURE__ */ React3.createElement(Popover.Arrow, null)))), /* @__PURE__ */ React3.createElement(Popover.Root, null, /* @__PURE__ */ React3.createElement(Popover.Trigger, {
+  })), /* @__PURE__ */ React2.createElement(Popover.Arrow, null)))), /* @__PURE__ */ React2.createElement(Popover.Root, null, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(IconButton2, {
+  }, /* @__PURE__ */ React2.createElement(IconButton2, {
     variant: "ghost",
     icon: "ph--sliders-horizontal--regular",
     iconOnly: true,
     label: t("context settings button")
-  })), /* @__PURE__ */ React3.createElement(Popover.Portal, null, /* @__PURE__ */ React3.createElement(Popover.Content, {
+  })), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
     side: "top",
     classNames: panelClassNames
-  }, /* @__PURE__ */ React3.createElement(Popover.Viewport, null, /* @__PURE__ */ React3.createElement(Tabs.Root, {
+  }, /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Tabs.Root, {
     orientation: "horizontal",
     defaultValue: "blueprints",
     defaultActivePart: "list",
     tabIndex: -1
-  }, /* @__PURE__ */ React3.createElement(Tabs.Viewport, {
-    classNames: 'max-bs-[--radix-popover-content-available-height] grid grid-rows-[1fr_min-content] [&_[cmdk-root]]:contents [&_[role="tabpanel"]]:grid [&_[role="tabpanel"]]:grid-rows-[1fr_min-content] [&_[role="listbox"]]:min-bs-0 [&_[role="listbox"]]:overflow-y-auto [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:pli-cardSpacingChrome [&_[role="tabpanel"][data-state="active"]]:order-first [&_[role="tabpanel"][data-state="inactive"]]:hidden'
-  }, /* @__PURE__ */ React3.createElement(Tabs.Tabpanel, {
+  }, /* @__PURE__ */ React2.createElement(Tabs.Viewport, {
+    classNames: mx2("max-h-(--radix-popover-content-available-height) grid grid-rows-[1fr_min-content]", '[&_[cmdk-root]]:contents [&_[role="tabpanel"]]:grid [&_[role="tabpanel"]]:grid-rows-[1fr_min-content]', '[&_[role="listbox"]]:min-h-0 [&_[role="listbox"]]:overflow-y-auto', '[&_[role="tabpanel"]]:min-h-0 [&_[role="tabpanel"]]:px-form-chrome [&_[role="tabpanel"][data-state="active"]]:order-first [&_[role="tabpanel"][data-state="inactive"]]:hidden')
+  }, /* @__PURE__ */ React2.createElement(Tabs.Tabpanel, {
     value: "blueprints",
     tabIndex: -1,
     classNames: "dx-focus-ring-inset"
-  }, /* @__PURE__ */ React3.createElement(BlueprintsPanel, {
+  }, /* @__PURE__ */ React2.createElement(BlueprintsPanel, {
     blueprintRegistry,
     db,
     context
-  })), /* @__PURE__ */ React3.createElement(Tabs.Tabpanel, {
+  })), /* @__PURE__ */ React2.createElement(Tabs.Tabpanel, {
     value: "model",
     tabIndex: -1,
-    classNames: "dx-focus-ring-inset !pli-0"
-  }, /* @__PURE__ */ React3.createElement(ModelsPanel, {
+    classNames: "dx-focus-ring-inset px-0!"
+  }, /* @__PURE__ */ React2.createElement(ModelsPanel, {
     presets,
     preset,
     onPresetChange
-  })), /* @__PURE__ */ React3.createElement(Tabs.Tablist, {
-    classNames: "sm:overflow-x-hidden justify-center p-[--dx-cardSpacingChrome] border-bs border-subduedSeparator order-last"
-  }, /* @__PURE__ */ React3.createElement(Tabs.IconTab, {
+  })), /* @__PURE__ */ React2.createElement(Tabs.Tablist, {
+    classNames: "sm:overflow-x-hidden justify-center p-form-chrome border-y border-subdued-separator order-last"
+  }, /* @__PURE__ */ React2.createElement(Tabs.IconTab, {
     value: "blueprints",
     icon: "ph--blueprint--regular",
     label: t("blueprints in context title")
-  }), /* @__PURE__ */ React3.createElement(Tabs.IconTab, {
+  }), /* @__PURE__ */ React2.createElement(Tabs.IconTab, {
     value: "model",
     label: t("chat model title"),
     icon: "ph--cpu--regular"
-  }))))), /* @__PURE__ */ React3.createElement(Popover.Arrow, null)))));
+  }))))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null)))));
 };
 var BlueprintsPanel = ({ blueprintRegistry, db, context }) => {
-  const { t } = useTranslation3(meta.id);
+  const { t } = useTranslation2(meta.id);
   const blueprints = useBlueprints({
     blueprintRegistry,
     db
@@ -616,13 +540,13 @@ var BlueprintsPanel = ({ blueprintRegistry, db, context }) => {
     items: blueprints,
     extract: (blueprint) => blueprint.name
   });
-  return /* @__PURE__ */ React3.createElement(SearchList.Root, {
+  return /* @__PURE__ */ React2.createElement(SearchList.Root, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React3.createElement(SearchList.Content, {
-    classNames: "plb-cardSpacingChrome"
-  }, /* @__PURE__ */ React3.createElement(SearchList.Viewport, null, results.map((blueprint) => {
+  }, /* @__PURE__ */ React2.createElement(SearchList.Content, {
+    classNames: "py-form-chrome"
+  }, /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.map((blueprint) => {
     const isActive = activeBlueprints.has(blueprint.key);
-    return /* @__PURE__ */ React3.createElement(SearchList.Item, {
+    return /* @__PURE__ */ React2.createElement(SearchList.Item, {
       classNames: "flex items-center overflow-hidden",
       key: blueprint.key,
       value: blueprint.key,
@@ -630,27 +554,27 @@ var BlueprintsPanel = ({ blueprintRegistry, db, context }) => {
       checked: isActive,
       onSelect: () => onUpdateBlueprint?.(blueprint.key, !isActive)
     });
-  }))), /* @__PURE__ */ React3.createElement(SearchList.Input, {
+  }))), /* @__PURE__ */ React2.createElement(SearchList.Input, {
     placeholder: t("search placeholder"),
-    classNames: "mbe-cardSpacingChrome",
+    classNames: "mb-form-chrome",
     autoFocus: true
   }));
 };
 var ModelsPanel = ({ presets, preset, onPresetChange }) => {
-  return /* @__PURE__ */ React3.createElement(Listbox.Root, {
+  return /* @__PURE__ */ React2.createElement(Listbox.Root, {
     value: preset,
     onValueChange: onPresetChange,
     autoFocus: true
   }, presets?.map(({ id, label }) => {
-    return /* @__PURE__ */ React3.createElement(Listbox.Option, {
+    return /* @__PURE__ */ React2.createElement(Listbox.Option, {
       key: id,
       value: id
-    }, /* @__PURE__ */ React3.createElement(Listbox.OptionLabel, null, label), /* @__PURE__ */ React3.createElement(Listbox.OptionIndicator, null));
+    }, /* @__PURE__ */ React2.createElement(Listbox.OptionLabel, null, label), /* @__PURE__ */ React2.createElement(Listbox.OptionIndicator, null));
   }));
 };
 var ANY = "__any__";
 var ObjectsPanel = ({ db, context }) => {
-  const { t } = useTranslation3(meta.id);
+  const { t } = useTranslation2(meta.id);
   const types = useFilteredTypes(db);
   const typenames = useMemo6(() => {
     const typenames2 = types.map((type) => {
@@ -681,61 +605,70 @@ var ObjectsPanel = ({ db, context }) => {
     items: objects,
     extract: (object) => Obj3.getLabel(object) ?? Obj3.getTypename(object) ?? object.id
   });
-  return /* @__PURE__ */ React3.createElement(SearchList.Root, {
+  return /* @__PURE__ */ React2.createElement(SearchList.Root, {
     onSearch: handleSearch
-  }, /* @__PURE__ */ React3.createElement(SearchList.Content, {
-    classNames: "p-cardSpacingChrome [&:has([cmdk-list-sizer]:empty)]:plb-0"
-  }, /* @__PURE__ */ React3.createElement(SearchList.Viewport, null, results.length ? results.map((object) => {
+  }, /* @__PURE__ */ React2.createElement(SearchList.Content, {
+    classNames: "p-form-chrome [&:has([cmdk-list-sizer]:empty)]:py-0"
+  }, /* @__PURE__ */ React2.createElement(SearchList.Viewport, null, results.length ? results.map((object) => {
     const isActive = contextObjects.findIndex((obj) => obj.id === object.id) !== -1;
-    return /* @__PURE__ */ React3.createElement(SearchList.Item, {
+    const { icon, hue } = Option2.fromNullable(Obj3.getSchema(object)).pipe(Option2.flatMap(Annotation.IconAnnotation.get), Option2.getOrElse(() => ({
+      icon: DEFAULT_OBJECT_ICON,
+      hue: void 0
+    })));
+    const styles = hue ? getStyles(hue) : void 0;
+    return /* @__PURE__ */ React2.createElement(SearchList.Item, {
       classNames: "flex items-center overflow-hidden",
       key: object.id,
       value: object.id,
+      icon,
+      iconClassNames: styles?.surfaceText,
       label: Obj3.getLabel(object) ?? Obj3.getTypename(object) ?? object.id,
       checked: isActive,
       onSelect: () => onUpdateObject?.(Obj3.getDXN(object), !isActive)
     });
-  }) : /* @__PURE__ */ React3.createElement(SearchList.Item, {
+  }) : /* @__PURE__ */ React2.createElement(SearchList.Item, {
     value: "__empty__",
     label: t("no results")
-  }))), /* @__PURE__ */ React3.createElement("div", {
+  }))), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: "grid grid-cols-[min-content_1fr] gap-2 pli-cardSpacingChrome mbe-cardSpacingChrome"
-  }, /* @__PURE__ */ React3.createElement(Select2.Root, {
+    className: "grid grid-cols-[min-content_1fr] gap-2 px-form-chrome mb-form-chrome"
+  }, /* @__PURE__ */ React2.createElement(Select.Root, {
     value: typename === ANY ? void 0 : typename,
     onValueChange: setTypename
-  }, /* @__PURE__ */ React3.createElement(Select2.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     density: "fine",
     placeholder: t("type filter placeholder")
-  }), /* @__PURE__ */ React3.createElement(Select2.Portal, null, /* @__PURE__ */ React3.createElement(Select2.Content, null, /* @__PURE__ */ React3.createElement(Select2.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select2.Viewport, null, /* @__PURE__ */ React3.createElement(Select2.Option, {
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: ANY
-  }, t("any type filter label")), typenames.map(({ typename: typename2, label }) => /* @__PURE__ */ React3.createElement(Select2.Option, {
+  }, t("any type filter label")), typenames.map(({ typename: typename2, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: typename2,
     value: typename2
-  }, label))), /* @__PURE__ */ React3.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React3.createElement(Select2.Arrow, null)))), /* @__PURE__ */ React3.createElement(SearchList.Input, {
+  }, label))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(SearchList.Input, {
     placeholder: t("search placeholder"),
-    classNames: "mbe-0",
+    classNames: "mb-0",
     autoFocus: true
   })));
 };
+var DEFAULT_OBJECT_ICON = "ph--cube--regular";
 
 // src/components/ChatPrompt/ChatPresets.tsx
-import React4 from "react";
-import { Select as Select3 } from "@dxos/react-ui";
+import React3 from "react";
+import { Select as Select2 } from "@dxos/react-ui";
 
 // src/components/ChatPrompt/ChatReferences.tsx
-import React5 from "react";
-import { Obj as Obj4 } from "@dxos/echo";
-import { IconButton as IconButton3, toLocalizedString, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/ui-theme";
+import * as Option3 from "effect/Option";
+import React4 from "react";
+import { Annotation as Annotation2, Obj as Obj4 } from "@dxos/echo";
+import { Icon, IconButton as IconButton3, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { getStyles as getStyles2, mx as mx3 } from "@dxos/ui-theme";
 var ChatReferences = ({ classNames, context, db }) => {
-  const { t } = useTranslation4(meta.id);
+  const { t } = useTranslation3(meta.id);
   const { objects, onUpdateObject } = useContextObjects({
     db,
     context
   });
-  return /* @__PURE__ */ React5.createElement("ul", {
-    className: mx2("flex", classNames)
+  return /* @__PURE__ */ React4.createElement("ul", {
+    className: mx3("flex", classNames)
   }, objects.map((obj) => {
     const dxn = Obj4.getDXN(obj);
     const typename = Obj4.getTypename(obj);
@@ -745,11 +678,20 @@ var ChatReferences = ({ classNames, context, db }) => {
         ns: typename
       }
     ] : obj.id);
-    return /* @__PURE__ */ React5.createElement("li", {
+    const { icon, hue } = Option3.fromNullable(Obj4.getSchema(obj)).pipe(Option3.flatMap(Annotation2.IconAnnotation.get), Option3.getOrElse(() => ({
+      icon: DEFAULT_OBJECT_ICON2,
+      hue: void 0
+    })));
+    const styles = hue ? getStyles2(hue) : void 0;
+    return /* @__PURE__ */ React4.createElement("li", {
       key: dxn.toString(),
-      className: "dx-tag plb-0 pis-2 flex items-center",
+      className: "dx-tag py-0 ps-2 flex items-center gap-1",
       "data-hue": "neutral"
-    }, toLocalizedString(label, t), /* @__PURE__ */ React5.createElement(IconButton3, {
+    }, /* @__PURE__ */ React4.createElement(Icon, {
+      icon,
+      size: 4,
+      classNames: styles?.surfaceText
+    }), toLocalizedString(label, t), /* @__PURE__ */ React4.createElement(IconButton3, {
       icon: "ph--x--bold",
       iconOnly: true,
       variant: "ghost",
@@ -760,12 +702,13 @@ var ChatReferences = ({ classNames, context, db }) => {
     }));
   }));
 };
+var DEFAULT_OBJECT_ICON2 = "ph--cube--regular";
 
 // src/components/ChatPrompt/ChatStatusIndicator.tsx
-import React6, { useEffect as useEffect4, useState as useState9 } from "react";
+import React5, { useEffect as useEffect4, useState as useState9 } from "react";
 import { Tooltip, useTimeout } from "@dxos/react-ui";
 import { Spinner } from "@dxos/react-ui-sfx";
-import { mx as mx3 } from "@dxos/ui-theme";
+import { mx as mx4 } from "@dxos/ui-theme";
 var period = 3e3;
 var ChatStatusIndicator = ({ classNames, preset, processing, error, ...props }) => {
   const [init, setInit] = useState9(false);
@@ -777,50 +720,50 @@ var ChatStatusIndicator = ({ classNames, preset, processing, error, ...props })
   }, period / 2, [
     preset
   ]);
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: mx3("relative flex", classNames)
-  }, /* @__PURE__ */ React6.createElement(Spinner, {
+    className: mx4("relative flex", classNames)
+  }, /* @__PURE__ */ React5.createElement(Spinner, {
     duration: period,
     state: !init ? "flash" : error ? "error" : processing ? "spin" : "pulse",
     ...props
-  }), error && /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
+  }), error && /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
     asChild: true,
     content: error.message
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "absolute inset-0"
   })));
 };
 
 // src/components/ChatThread/ChatThread.tsx
-import React9, { forwardRef, useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo8 } from "react";
+import React8, { forwardRef, useCallback as useCallback6, useEffect as useEffect6, useMemo as useMemo8, useState as useState11 } from "react";
 import { PublicKey } from "@dxos/keys";
 import { useForwardedRef } from "@dxos/react-ui";
 import { MarkdownStream } from "@dxos/react-ui-components";
-import { mx as mx4 } from "@dxos/ui-theme";
+import { mx as mx5 } from "@dxos/ui-theme";
 import { keyToFallback } from "@dxos/util";
 
 // src/components/ChatThread/registry.tsx
-import React8 from "react";
+import React7 from "react";
 import { log as log2 } from "@dxos/log";
-import { ToggleContainer as ToggleContainer2 } from "@dxos/react-ui-components";
-import { PromptWidget, ReferenceWidget, SelectWidget, SuggestionWidget, SummaryWidget } from "@dxos/react-ui-components";
+import { TogglePanel as TogglePanel2 } from "@dxos/react-ui-components";
+import { PromptWidget, ReasoningWidget, ReferenceWidget, SelectWidget, SuggestionWidget, SummaryWidget } from "@dxos/react-ui-components";
 import { Json as Json2 } from "@dxos/react-ui-syntax-highlighter";
 import { ContentBlock } from "@dxos/types";
 import { getXmlTextChild } from "@dxos/ui-editor";
 
 // src/components/ToolBlock/ToolBlock.tsx
-import React7, { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef2, useState as useState10 } from "react";
-import { useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { NumericTabs, TextCrawl, ToggleContainer } from "@dxos/react-ui-components";
+import React6, { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef2, useState as useState10 } from "react";
+import { useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { NumericTabs, TextCrawl, TogglePanel } from "@dxos/react-ui-components";
 import { Json } from "@dxos/react-ui-syntax-highlighter";
 import { isNonNullable, safeParseJson } from "@dxos/util";
 var ToolBlock = ({ view, blocks = [] }) => {
-  const { t } = useTranslation5(meta.id);
+  const { t } = useTranslation4(meta.id);
   const items = useMemo7(() => {
     let lastToolCall;
     const tools = [];
-    return blocks.filter((block) => block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "summary").map((block) => {
+    return blocks.filter((block) => block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "stats").map((block) => {
       switch (block._tag) {
         case "toolCall": {
           if (block.pending && lastToolCall?.block.toolCallId === block.toolCallId) {
@@ -862,12 +805,12 @@ var ToolBlock = ({ view, blocks = [] }) => {
             }
           };
         }
-        case "summary": {
+        case "stats": {
           if (!lastToolCall) {
             return null;
           }
           return {
-            title: t("summary label"),
+            title: t("stats label"),
             content: block
           };
         }
@@ -886,13 +829,13 @@ var ToolBlock = ({ view, blocks = [] }) => {
   if (!items.length) {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(ToolContainer, {
+  return /* @__PURE__ */ React6.createElement(ToolPanel, {
     items,
     onChangeOpen: handleChangeOpen
   });
 };
 ToolBlock.displayName = "ToolBlock";
-var ToolContainer = ({ items, onChangeOpen }) => {
+var ToolPanel = ({ items, onChangeOpen }) => {
   const tabsRef = useRef2(null);
   const [selected, setSelected] = useState10(0);
   const [open, setOpen] = useState10(false);
@@ -908,26 +851,26 @@ var ToolContainer = ({ items, onChangeOpen }) => {
   const handleSelect = useCallback5((index) => {
     setSelected(index);
   }, []);
-  return /* @__PURE__ */ React7.createElement(ToggleContainer.Root, {
-    classNames: "mbs-2 is-full rounded-sm",
+  return /* @__PURE__ */ React6.createElement(TogglePanel.Root, {
+    classNames: "mt-2 w-full rounded-xs",
     open,
     onChangeOpen: setOpen
-  }, /* @__PURE__ */ React7.createElement(ToggleContainer.Header, {
+  }, /* @__PURE__ */ React6.createElement(TogglePanel.Header, {
     classNames: "text-sm text-placeholder"
-  }, /* @__PURE__ */ React7.createElement(TextCrawl, {
+  }, /* @__PURE__ */ React6.createElement(TextCrawl, {
     key: "status-roll",
     lines: items.map((item) => item.title),
     autoAdvance: true,
     greedy: true
-  })), /* @__PURE__ */ React7.createElement(ToggleContainer.Content, {
+  })), /* @__PURE__ */ React6.createElement(TogglePanel.Content, {
     classNames: "grid grid-cols-[32px_1fr]"
-  }, /* @__PURE__ */ React7.createElement(NumericTabs, {
+  }, /* @__PURE__ */ React6.createElement(NumericTabs, {
     ref: tabsRef,
     classNames: "p-1",
     length: items.length,
     selected,
     onSelect: handleSelect
-  }), /* @__PURE__ */ React7.createElement(Json, {
+  }), /* @__PURE__ */ React6.createElement(Json, {
     data: items[selected]?.content,
     classNames: "p-1 text-xs bg-transparent",
     replacer: {
@@ -941,50 +884,66 @@ var ToolContainer = ({ items, onChangeOpen }) => {
 // src/components/ChatThread/registry.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/ChatThread/registry.tsx";
 var Fallback = ({ _tag, ...props }) => {
-  return /* @__PURE__ */ React8.createElement(ToggleContainer2.Root, {
-    classNames: "rounded-sm"
-  }, /* @__PURE__ */ React8.createElement(ToggleContainer2.Header, {
-    classNames: "bg-groupSurface"
-  }, _tag), /* @__PURE__ */ React8.createElement(ToggleContainer2.Content, {
-    classNames: "bg-modalSurface"
-  }, /* @__PURE__ */ React8.createElement(Json2, {
-    classNames: "!p-2 text-sm",
+  return /* @__PURE__ */ React7.createElement(TogglePanel2.Root, {
+    classNames: "rounded-xs"
+  }, /* @__PURE__ */ React7.createElement(TogglePanel2.Header, {
+    classNames: "bg-group-surface"
+  }, _tag), /* @__PURE__ */ React7.createElement(TogglePanel2.Content, {
+    classNames: "bg-modal-surface"
+  }, /* @__PURE__ */ React7.createElement(Json2, {
+    classNames: "p-2! text-sm",
     data: props
   })));
 };
+var Summary = ({ text }) => {
+  return /* @__PURE__ */ React7.createElement(TogglePanel2.Root, {
+    classNames: "rounded-sm"
+  }, /* @__PURE__ */ React7.createElement(TogglePanel2.Header, {
+    classNames: "bg-group-surface"
+  }, "Conversation summarized"), /* @__PURE__ */ React7.createElement(TogglePanel2.Content, {
+    classNames: "bg-modal-surface"
+  }, text));
+};
 var componentRegistry = {
   //
   // Widgets
   //
-  ["prompt"]: {
+  prompt: {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
       return text ? new PromptWidget(text) : null;
     }
   },
-  ["reference"]: {
+  reasoning: {
+    block: true,
+    factory: ({ children }) => {
+      const text = getXmlTextChild(children);
+      return text ? new ReasoningWidget(text) : null;
+    }
+  },
+  reference: {
     block: false,
     factory: ({ children, ref }) => {
       const text = getXmlTextChild(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);
       return options?.length ? new SelectWidget(options) : null;
     }
   },
-  ["suggestion"]: {
+  suggestion: {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
       return text ? new SuggestionWidget(text) : null;
     }
   },
-  ["summary"]: {
+  stats: {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
@@ -994,22 +953,26 @@ var componentRegistry = {
   //
   // React
   //
-  ["toolCall"]: {
+  toolCall: {
     block: true,
     Component: ToolBlock
   },
-  ["toolResult"]: {
+  toolResult: {
     block: true,
     Component: Fallback
   },
-  ["toolkit"]: {
+  toolkit: {
     block: true,
     Component: Fallback
   },
+  summary: {
+    block: true,
+    Component: Summary
+  },
   //
   // Fallback
   //
-  ["json"]: {
+  json: {
     block: true,
     Component: Fallback
   }
@@ -1026,7 +989,7 @@ var blockToMarkdownImpl = (context, message, block) => {
     block: JSON.stringify(block)
   }, {
     F: __dxlog_file2,
-    L: 125,
+    L: 146,
     S: void 0,
     C: (f, a) => f(...a)
   });
@@ -1067,7 +1030,9 @@ var blockToMarkdownImpl = (context, message, block) => {
       return `<toolCall id="${block.toolCallId}" />`;
     }
     case "toolResult": {
-      context.updateWidget(block.toolCallId, ({ blocks = [] }) => ({
+      context.updateWidget(block.toolCallId, ({ blocks = [] } = {
+        blocks: []
+      }) => ({
         blocks: [
           ...blocks,
           block
@@ -1075,8 +1040,18 @@ var blockToMarkdownImpl = (context, message, block) => {
       }));
       break;
     }
+    case "stats": {
+      return `<stats>${ContentBlock.createStatsMessage(block)}</stats>`;
+    }
+    case "reasoning": {
+      const text = block.reasoningText ?? block.redactedText;
+      if (!text) {
+        return;
+      }
+      return `<reasoning>${text.replace(/\n/g, " ").trim()}</reasoning>`;
+    }
     case "summary": {
-      return `<summary>${ContentBlock.createSummaryMessage(block)}</summary>`;
+      return `<summary>${block.content}</summary>`;
     }
     default: {
       return `<json id="${message.id}">
@@ -1135,6 +1110,10 @@ var MessageSyncer = class {
   * Syncs messages with the editor.
   */
   append(messages, flush = false) {
+    messages = messages.map((message) => ({
+      ...message,
+      blocks: message.blocks.filter((block) => !block.pending || block._tag === "text")
+    }));
     if (this._initialMessageId !== messages[0]?.id) {
       this.reset();
       this._initialMessageId = messages[0]?.id;
@@ -1166,18 +1145,6 @@ var MessageSyncer = class {
     }
   }
   process(messages, append) {
-    log3("sync", {
-      doc: this._model.view?.state.doc.length,
-      messages: messages.map((message) => message.blocks.length),
-      currentMessageIndex: this._currentMessageIndex,
-      currentBlockIndex: this._currentBlockIndex,
-      currentBlockContent: this._currentBlockContent
-    }, {
-      F: __dxlog_file3,
-      L: 111,
-      S: this,
-      C: (f, a) => f(...a)
-    });
     let i = this._currentMessageIndex;
     for (const message of messages.slice(this._currentMessageIndex)) {
       if (i > this._currentMessageIndex) {
@@ -1195,16 +1162,6 @@ var MessageSyncer = class {
           } else {
             content = currentBlockContent;
           }
-          log3("append", {
-            message: i,
-            block: j,
-            content
-          }, {
-            F: __dxlog_file3,
-            L: 138,
-            S: this,
-            C: (f, a) => f(...a)
-          });
           this._currentBlockContent = currentBlockContent;
           append(content);
         }
@@ -1224,7 +1181,13 @@ var MessageSyncer = class {
 // src/components/ChatThread/ChatThread.tsx
 var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages = [], error, cursor = false, fadeIn = true, debug = false, onEvent }, forwardedRef) => {
   const controllerRef = useForwardedRef(forwardedRef);
-  const controller = controllerRef.current;
+  const [controller, setController] = useState11(null);
+  const refCallback = useCallback6((node) => {
+    controllerRef.current = node;
+    setController(node);
+  }, [
+    controllerRef
+  ]);
   const userHue = useMemo8(() => identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue, [
     identity
   ]);
@@ -1259,14 +1222,14 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
   }, [
     onEvent
   ]);
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: mx4("flex bs-full is-full justify-center overflow-hidden", classNames),
+    className: mx5("flex h-full w-full justify-center overflow-hidden", classNames),
     style: {
-      "--user-fill": `var(--dx-${userHue}Fill)`
+      "--user-fill": `var(--color-${userHue}-fill)`
     }
-  }, /* @__PURE__ */ React9.createElement(MarkdownStream, {
-    ref: controllerRef,
+  }, /* @__PURE__ */ React8.createElement(MarkdownStream, {
+    ref: refCallback,
     registry: componentRegistry,
     cursor,
     fadeIn,
@@ -1278,19 +1241,18 @@ var ChatThread = /* @__PURE__ */ forwardRef(({ classNames, identity, messages =
 // src/components/Chat/Chat.tsx
 var [ChatContextProvider, useChatContext] = createContext("Chat");
 var ChatRoot = ({ children, chat, processor, onEvent, ...props }) => {
-  const [debug, setDebug] = useState11(false);
+  const [debug, setDebug] = useState12(false);
   const pending = useAtomValue(processor.messages);
   const streaming = useAtomValue(processor.streaming);
   const lastPrompt = useRef3(void 0);
-  const queue = useQueue(chat?.queue.dxn);
+  const storedMessages = useQuery3(chat?.queue?.target, Filter4.type(Message.Message));
   const messages = useMemo9(() => {
-    const queueMessages = queue?.objects?.filter(Obj5.instanceOf(Message.Message)) ?? [];
     return Array2.dedupeWith([
-      ...queueMessages,
+      ...storedMessages,
       ...pending
     ], ({ id: a }, { id: b }) => a === b);
   }, [
-    queue?.objects,
+    storedMessages,
     pending
   ]);
   const event = useMemo9(() => new Event(), []);
@@ -1298,7 +1260,23 @@ var ChatRoot = ({ children, chat, processor, onEvent, ...props }) => {
     return event.on((ev) => {
       switch (ev.type) {
         case "toggle-debug": {
-          setDebug((current) => !current);
+          setDebug((debug2) => !debug2);
+          queueMicrotask(async () => {
+            const objects = processor.context.getObjects();
+            const blueprints = processor.context.getBlueprints();
+            const tools = await processor.getTools();
+            const system = await processor.getSystemPrompt();
+            console.log("Chat processor state:", {
+              objects,
+              blueprints
+            });
+            console.log(`
+              ==== System Prompt ====
+              ${system}
+              ==== Tools ====
+              ${Object.values(tools).map((tool) => JSON.stringify(tool, null, 2)).join("\n")}
+            `);
+          });
           break;
         }
         case "submit": {
@@ -1339,7 +1317,7 @@ var ChatRoot = ({ children, chat, processor, onEvent, ...props }) => {
     onEvent
   ]);
   const db = props.db ?? (chat && Obj5.getDatabase(chat));
-  return /* @__PURE__ */ React10.createElement(ChatContextProvider, {
+  return /* @__PURE__ */ React9.createElement(ChatContextProvider, {
     debug,
     event,
     db,
@@ -1350,16 +1328,20 @@ var ChatRoot = ({ children, chat, processor, onEvent, ...props }) => {
   }, children);
 };
 ChatRoot.displayName = "Chat.Root";
-var ChatViewport = ({ classNames, children }) => {
-  return /* @__PURE__ */ React10.createElement("div", {
+var CHAT_VIEWPORT_NAME = "Chat.Viewport";
+var ChatViewport = ({ classNames, children, ...props }) => {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: mx5("flex flex-col bs-full is-full", classNames)
+    ...props,
+    className: mx6("flex flex-col h-full w-full", classNames)
   }, children);
 };
+ChatViewport.displayName = CHAT_VIEWPORT_NAME;
+var CHAT_THREAD_NAME = "Chat.Thread";
 var ChatThread2 = (props) => {
-  const { debug, event, messages, processor } = useChatContext(ChatThread2.displayName);
+  const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
   const identity = useIdentity();
-  const error = useAtomValue(processor.error).pipe(Option2.getOrUndefined);
+  const error = useAtomValue(processor.error).pipe(Option4.getOrUndefined);
   const controllerRef = useRef3(null);
   useEffect7(() => {
     return event.on((event2) => {
@@ -1387,7 +1369,7 @@ var ChatThread2 = (props) => {
   if (!identity) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement(ChatThread, {
+  return /* @__PURE__ */ React9.createElement(ChatThread, {
     ...props,
     identity,
     messages,
@@ -1397,16 +1379,17 @@ var ChatThread2 = (props) => {
     ref: controllerRef
   });
 };
-ChatThread2.displayName = "Chat.Thread";
+ChatThread2.displayName = CHAT_THREAD_NAME;
+var CHAT_PROMPT_NAME = "Chat.Prompt";
 var ChatPrompt = ({ classNames, outline, settings = true, placeholder, expandable, online, presets, preset, onPresetChange, onOnlineChange }) => {
-  const { t } = useTranslation6(meta.id);
-  const { db, processor, event } = useChatContext(ChatPrompt.displayName);
-  const error = useAtomValue(processor.error).pipe(Option2.getOrUndefined);
+  const { t } = useTranslation5(meta.id);
+  const { db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
+  const error = useAtomValue(processor.error).pipe(Option4.getOrUndefined);
   const streaming = useAtomValue(processor.streaming);
   const active = useAtomValue(processor.active);
   const activeRef = useDynamicRef(active);
   const editorRef = useRef3(null);
-  const [recordingState, setRecordingState] = useState11(false);
+  const [recordingState, setRecordingState] = useState12(false);
   useEffect7(() => {
     return event.on((event2) => {
       switch (event2.type) {
@@ -1501,71 +1484,73 @@ var ChatPrompt = ({ classNames, outline, settings = true, placeholder, expandabl
   }, [
     event
   ]);
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "group",
-    className: mx5("flex flex-col is-full density-fine", outline && "bg-groupSurface border border-subduedSeparator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded", classNames)
-  }, /* @__PURE__ */ React10.createElement("div", {
+    className: mx6("flex flex-col w-full dx-density-fine", outline && "bg-group-surface border border-subdued-separator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded-sm", classNames)
+  }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "flex p-2 gap-2"
-  }, /* @__PURE__ */ React10.createElement(ChatStatusIndicator, {
+  }, /* @__PURE__ */ React9.createElement(ChatStatusIndicator, {
     classNames: "p-1",
     preset,
     error,
     processing: streaming
-  }), /* @__PURE__ */ React10.createElement(ChatEditor, {
+  }), /* @__PURE__ */ React9.createElement(ChatEditor, {
     ref: editorRef,
     autoFocus: true,
     lineWrapping: true,
-    classNames: "col-span-2 pbs-0.5",
+    classNames: "col-span-2 pt-0.5",
     placeholder: placeholder ?? t("prompt placeholder"),
     extensions,
     onSubmit: handleSubmit
-  })), db && settings && /* @__PURE__ */ React10.createElement("div", {
+  })), db && settings && /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "flex items-center overflow-hidden"
-  }, /* @__PURE__ */ React10.createElement(ChatOptions, {
+  }, /* @__PURE__ */ React9.createElement(ChatOptions, {
     db,
     blueprintRegistry: processor.blueprintRegistry,
     context: processor.context,
     preset,
     presets,
     onPresetChange
-  }), /* @__PURE__ */ React10.createElement("div", {
+  }), /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "flex grow overflow-x-auto scrollbar-none"
-  }, /* @__PURE__ */ React10.createElement(ChatReferences, {
+  }, /* @__PURE__ */ React9.createElement(ChatReferences, {
     db,
     context: processor.context
-  })), /* @__PURE__ */ React10.createElement(ChatActions, {
+  })), /* @__PURE__ */ React9.createElement(ChatActions, {
     classNames: "col-span-2",
     microphone: true,
     recording,
     processing: streaming,
     onEvent: handleEvent
-  }, online !== void 0 && /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Label, {
+  }, online !== void 0 && /* @__PURE__ */ React9.createElement(Input.Root, null, /* @__PURE__ */ React9.createElement(Input.Label, {
     srOnly: true
-  }, t("online switch label")), /* @__PURE__ */ React10.createElement(Input2.Switch, {
-    classNames: "mli-2",
+  }, t("online switch label")), /* @__PURE__ */ React9.createElement(Input.Switch, {
+    classNames: "mx-2",
     checked: online,
     onCheckedChange: onOnlineChange
   })))));
 };
-ChatPrompt.displayName = "Chat.Prompt";
-var ChatToolbar = ({ classNames, companionTo }) => {
-  const { chat } = useChatContext(ChatToolbar.displayName);
+ChatPrompt.displayName = CHAT_PROMPT_NAME;
+var CHAT_TOOLBAR_NAME = "Chat.Toolbar";
+var ChatToolbar = ({ classNames, companionTo, ...props }) => {
+  const { chat } = useChatContext(CHAT_TOOLBAR_NAME);
   const menu = useChatToolbarActions({
     chat,
     companionTo
   });
-  return /* @__PURE__ */ React10.createElement(MenuProvider, {
+  return /* @__PURE__ */ React9.createElement(Menu.Root, {
+    ...props,
     ...menu,
     attendableId: companionTo ? Obj5.getDXN(companionTo).toString() : chat ? Obj5.getDXN(chat).toString() : ""
-  }, /* @__PURE__ */ React10.createElement(ToolbarMenu, {
+  }, /* @__PURE__ */ React9.createElement(Menu.Toolbar, {
     classNames,
     textBlockWidth: true
   }));
 };
-ChatToolbar.displayName = "Chat.Toolbar";
+ChatToolbar.displayName = CHAT_TOOLBAR_NAME;
 var Chat = {
   Root: ChatRoot,
   Viewport: ChatViewport,
@@ -1574,18 +1559,338 @@ var Chat = {
   Toolbar: ChatToolbar
 };
 
+// src/components/TemplateEditor/TemplateEditor.tsx
+import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import React10 from "react";
+import { createDocAccessor } from "@dxos/echo-db";
+import { useThemeContext, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createDataExtensions, createMarkdownExtensions, createThemeExtensions, decorateMarkdown } from "@dxos/ui-editor";
+import { mx as mx8 } from "@dxos/ui-theme";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
+
+// src/components/TemplateEditor/extensions/handlebars-extension.ts
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { RangeSetBuilder } from "@codemirror/state";
+import { Decoration, ViewPlugin, WidgetType, keymap as keymap2 } from "@codemirror/view";
+import { Domino, mx as mx7 } from "@dxos/ui";
+var handlebars = (_ = {}) => {
+  return [
+    handlebarsHighlightPlugin,
+    autocompletion({
+      activateOnTyping: true,
+      aboveCursor: true,
+      closeOnBlur: true,
+      override: [
+        handlebarsCompletions
+      ]
+    }),
+    keymap2.of(completionKeymap)
+  ];
+};
+var regex = {
+  // {{! comment }}
+  comment: /\{\{!\s*[^}]*\}\}/g,
+  // {{var}}
+  brackets: /\{\{[^}]*\}\}/g,
+  // {{#command}} {{/command}}
+  command: /\{\{[#/]([^}]+)\}\}/g,
+  // {{var}}
+  var: /\{\{(?!\s*!)(\w[^}]*)\}\}/g,
+  // @dxn:queue:data:xxx
+  dxn: /@?dxn:[\w@:]+/g,
+  // dxos.org/type/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);
+    }
+  }
+  // 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: mx7("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"
+            })
+          });
+        }
+      }
+    }
+    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);
+    }
+    return builder.finish();
+  }
+}, {
+  decorations: (v) => v.decorations
+});
+var DXNWidget = class extends WidgetType {
+  _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 Domino.of("span").classNames(mx7("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;
+    }
+  } 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();
+  }
+}, {
+  decorations: (v) => v.decorations
+});
+
+// src/components/TemplateEditor/TemplateEditor.tsx
+var TemplateEditor = ({ id, classNames, template, lineNumbers = true }) => {
+  const { t } = useTranslation6(meta.id);
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    const text = template.source?.target;
+    if (!text) {
+      return {};
+    }
+    return {
+      initialValue: text.content ?? "",
+      extensions: [
+        createDataExtensions({
+          id,
+          text: createDocAccessor(text, [
+            "content"
+          ])
+        }),
+        createBasicExtensions({
+          bracketMatching: false,
+          lineNumbers,
+          lineWrapping: true,
+          placeholder: t("template placeholder")
+        }),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            content: {
+              className: "!pe-4"
+            }
+          }
+        }),
+        createMarkdownExtensions(),
+        decorateMarkdown(),
+        handlebars(),
+        // xml(),
+        // NOTE: Since we're using markdown only HTML nodes are parsed.
+        xmlDecorator(),
+        syntaxHighlighting(defaultHighlightStyle)
+      ].filter(isNonNullable2)
+    };
+  }, [
+    themeMode,
+    template.source?.target,
+    lineNumbers
+  ]);
+  return /* @__PURE__ */ React10.createElement("div", {
+    ref: parentRef,
+    className: mx8("h-full overflow-hidden", classNames)
+  });
+};
+
 // src/components/Toolbox/Toolbox.tsx
-import React11, { Fragment, useEffect as useEffect8, useState as useState12 } from "react";
+import React11, { Fragment, useEffect as useEffect8, useState as useState13 } from "react";
 import { Function } from "@dxos/functions";
 import { log as log4 } from "@dxos/log";
-import { Filter as Filter4, useQuery as useQuery3 } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/ui-theme";
+import { Filter as Filter5, useQuery as useQuery4 } from "@dxos/react-client/echo";
+import { ScrollArea } from "@dxos/react-ui";
+import { mx as mx9 } from "@dxos/ui-theme";
 var __dxlog_file4 = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/components/Toolbox/Toolbox.tsx";
 var Toolbox = ({ classNames, functions, services, blueprints, activeBlueprints }) => {
-  const { t } = useTranslation7(meta.id);
-  return /* @__PURE__ */ React11.createElement("div", {
-    className: mx6("flex flex-col overflow-y-auto box-content", classNames)
+  return /* @__PURE__ */ React11.createElement(ScrollArea.Root, {
+    thin: true,
+    orientation: "vertical"
+  }, /* @__PURE__ */ React11.createElement(ScrollArea.Viewport, {
+    classNames
   }, blueprints && blueprints.length > 0 && /* @__PURE__ */ React11.createElement(Section, {
     title: "Blueprints",
     items: blueprints.map(({ name, description, tools }) => ({
@@ -1616,14 +1921,14 @@ var Toolbox = ({ classNames, functions, services, blueprints, activeBlueprints }
       name,
       description
     }))
-  }));
+  })));
 };
 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 = mx6("col-span-full grid grid-cols-subgrid text-xs pli-2", striped && stripeClassNames);
+  const subGridClassNames = mx9("col-span-full grid grid-cols-subgrid text-xs px-2", striped && stripeClassNames);
   return /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("h1", {
-    className: "pli-2 text-sm"
+    className: "px-2 text-sm"
   }, title), /* @__PURE__ */ React11.createElement("div", {
     className: gridClassNames
   }, items.map(({ name, description, subitems }, i) => /* @__PURE__ */ React11.createElement(Fragment, {
@@ -1636,22 +1941,22 @@ var Section = ({ title, items, striped }) => {
     className: "line-clamp-2"
   }, description)), subitems?.map(({ name: name2, description: description2 }, i2) => /* @__PURE__ */ React11.createElement("div", {
     key: i2,
-    className: mx6(subGridClassNames, striped && stripeClassNames)
+    className: mx9(subGridClassNames, striped && stripeClassNames)
   }, /* @__PURE__ */ React11.createElement("div", {
     className: "truncate"
   }, name2), /* @__PURE__ */ React11.createElement("div", {
     className: "line-clamp-3 text-subdued"
   }, description2)))))));
 };
-var ToolboxContainer = ({ classNames, db, processor }) => {
-  const services = useQuery3(db, Filter4.type(ServiceType));
-  const [serviceTools, setServiceTools] = useState12([]);
+var ToolboxPanel = ({ classNames, db, processor }) => {
+  const services = useQuery4(db, Filter5.type(ServiceType));
+  const [serviceTools, setServiceTools] = useState13([]);
   useEffect8(() => {
     log4("creating service tools...", {
       services: services.length
     }, {
       F: __dxlog_file4,
-      L: 116,
+      L: 117,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1660,7 +1965,7 @@ var ToolboxContainer = ({ classNames, db, processor }) => {
   }, [
     services
   ]);
-  const functions = useQuery3(db, Filter4.type(Function.Function));
+  const functions = useQuery4(db, Filter5.type(Function.Function));
   return /* @__PURE__ */ React11.createElement(Toolbox, {
     classNames,
     blueprints: processor?.context.getBlueprints(),
@@ -1672,20 +1977,13 @@ var safeToolId = (name) => {
   return name.split("_").pop();
 };
 
-// src/components/index.ts
-var BlueprintArticle = lazy(() => import("./BlueprintArticle-WZ76E2C4.mjs"));
-var ChatCompanion = lazy(() => import("./ChatCompanion-Q4FUZ2MW.mjs"));
-var ChatContainer = lazy(() => import("./ChatContainer-AKI33HIB.mjs"));
-var ChatDialog = lazy(() => import("./ChatDialog-AP45PVZR.mjs"));
-var PromptArticle = lazy(() => import("./PromptArticle-D4HAIIC6.mjs"));
-
 // src/hooks/useChatToolbarActions.ts
 var __dxlog_file5 = "/__w/dxos/dxos/packages/plugins/plugin-assistant/src/hooks/useChatToolbarActions.ts";
 var useChatToolbarActions = ({ chat, companionTo }) => {
   const { invoke } = useOperationInvoker();
   const { db } = useChatContext("useChatToolbarActions");
-  const query = companionTo ? Query.select(Filter5.id(companionTo.id)).targetOf(Assistant_exports.CompanionTo).source() : Query.select(Filter5.nothing());
-  const chats = useQuery4(db, query);
+  const query = companionTo ? Query.select(Filter6.id(companionTo.id)).targetOf(Chat2.CompanionTo).source() : Query.select(Filter6.nothing());
+  const chats = useQuery5(db, query);
   return useMenuActions(useMemo10(() => {
     return Atom.make(() => {
       const builder = MenuBuilder.make().root({
@@ -1708,7 +2006,7 @@ var useChatToolbarActions = ({ chat, companionTo }) => {
       }, () => {
         invariant(companionTo, void 0, {
           F: __dxlog_file5,
-          L: 52,
+          L: 53,
           S: void 0,
           A: [
             "companionTo",
@@ -1732,7 +2030,7 @@ var useChatToolbarActions = ({ chat, companionTo }) => {
       }, () => Effect2.gen(function* () {
         invariant(chat, void 0, {
           F: __dxlog_file5,
-          L: 69,
+          L: 70,
           S: this,
           A: [
             "chat",
@@ -1771,13 +2069,13 @@ var useChatToolbarActions = ({ chat, companionTo }) => {
               label: Obj6.getLabel(chat2) ?? [
                 "object name placeholder",
                 {
-                  ns: Assistant_exports.Chat.typename
+                  ns: Chat2.Chat.typename
                 }
               ]
             }, () => Effect2.gen(function* () {
               invariant(companionTo, void 0, {
                 F: __dxlog_file5,
-                L: 105,
+                L: 106,
                 S: this,
                 A: [
                   "companionTo",
@@ -1804,7 +2102,6 @@ var useChatToolbarActions = ({ chat, companionTo }) => {
 };
 
 export {
-  AssistantSettings,
   useBlueprintRegistry,
   useBlueprints,
   useActiveBlueprints,
@@ -1822,12 +2119,8 @@ export {
   ChatContextProvider,
   useChatContext,
   Chat,
+  TemplateEditor,
   Toolbox,
-  ToolboxContainer,
-  BlueprintArticle,
-  ChatCompanion,
-  ChatContainer,
-  ChatDialog,
-  PromptArticle
+  ToolboxPanel
 };
-//# sourceMappingURL=chunk-XI5T3MJC.mjs.map
+//# sourceMappingURL=chunk-5DLYAEBK.mjs.map