@dxos/plugin-assistant 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/ChatThread/ChatThread.stories.tsx

@@ -9,6 +9,7 @@ import * as Layer from 'effect/Layer';
 import React, { type CSSProperties, useEffect, useMemo, useState } from 'react';
 
 import { Database } from '@dxos/echo';
+import { runAndForwardErrors } from '@dxos/effect';
 import { ContextQueueService } from '@dxos/functions';
 import { faker } from '@dxos/random';
 import { useQueue, useSpace } from '@dxos/react-client/echo';
@@ -17,7 +18,7 @@ import { Popover } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { MarkdownStream } from '@dxos/react-ui-components';
 import { EditorPreviewProvider, useEditorPreview } from '@dxos/react-ui-editor';
-import { Card } from '@dxos/react-ui-stack';
+import { Card } from '@dxos/react-ui-mosaic';
 import { render } from '@dxos/storybook-utils';
 import { type Message, Organization, Person } from '@dxos/types';
 
@@ -55,11 +56,11 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryProps)
           }
         }
         setDone(true);
-      }).pipe(Effect.provide(Layer.mergeAll(Database.Service.layer(space.db), ContextQueueService.layer(queue)))),
+      }).pipe(Effect.provide(Layer.mergeAll(Database.layer(space.db), ContextQueueService.layer(queue)))),
     );
 
     return () => {
-      void Effect.runPromise(Fiber.interrupt(fiber));
+      void runAndForwardErrors(Fiber.interrupt(fiber));
     };
   }, [space, queue, generator]);
 
@@ -68,7 +69,7 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryProps)
   }
 
   return (
-    <EditorPreviewProvider onLookup={async ({ label, ref }) => ({ label, text: ref })}>
+    <EditorPreviewProvider onLookup={async ({ dxn, label }) => ({ label, text: dxn })}>
       <ChatThread {...props} messages={queue?.objects} />
       <PreviewCard />
     </EditorPreviewProvider>
@@ -82,10 +83,10 @@ const PreviewCard = () => {
     <Popover.Portal>
       <Popover.Content onOpenAutoFocus={(event) => event.preventDefault()}>
         <Popover.Viewport>
-          <Card.SurfaceRoot role='card--popover'>
+          <Card.Root>
             <Card.Heading>{target?.label}</Card.Heading>
             {target && <Card.Text classNames='truncate line-clamp-3'>{target.text}</Card.Text>}
-          </Card.SurfaceRoot>
+          </Card.Root>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -98,8 +99,8 @@ const meta = {
   component: ChatThread,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,

package/src/components/ChatThread/ChatThread.tsx

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type CSSProperties, forwardRef, useCallback, useEffect, useMemo } from 'react';
+import React, { type CSSProperties, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { PublicKey } from '@dxos/keys';
 import { type Identity } from '@dxos/react-client/halo';
 import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
 import { MarkdownStream, type MarkdownStreamController, type MarkdownStreamProps } from '@dxos/react-ui-components';
-import { mx } from '@dxos/react-ui-theme';
 import { type Message } from '@dxos/types';
+import { mx } from '@dxos/ui-theme';
 import { keyToFallback } from '@dxos/util';
 
 import { type ChatEvent } from '../Chat';
@@ -27,13 +27,22 @@ export type ChatThreadProps = ThemedClassName<
 >;
 
 // TODO(burdon): Memo thread position.
-export const ChatThread = forwardRef<MarkdownStreamController, ChatThreadProps>(
+export const ChatThread = forwardRef<MarkdownStreamController | null, ChatThreadProps>(
   (
     { classNames, identity, messages = [], error, cursor = false, fadeIn = true, debug = false, onEvent },
     forwardedRef,
   ) => {
     const controllerRef = useForwardedRef(forwardedRef);
-    const controller = controllerRef.current;
+    const [controller, setController] = useState<MarkdownStreamController | null>(null);
+
+    // Callback ref to capture when MarkdownStream is mounted and trigger re-render.
+    const refCallback = useCallback(
+      (node: MarkdownStreamController | null) => {
+        controllerRef.current = node;
+        setController(node);
+      },
+      [controllerRef],
+    );
 
     const userHue = useMemo(
       () => identity?.profile?.data?.hue || keyToFallback(identity?.identityKey ?? PublicKey.random()).hue,
@@ -74,7 +83,7 @@ export const ChatThread = forwardRef<MarkdownStreamController, ChatThreadProps>(
         style={{ '--user-fill': `var(--dx-${userHue}Fill)` } as CSSProperties}
       >
         <MarkdownStream
-          ref={controllerRef}
+          ref={refCallback}
           registry={componentRegistry}
           cursor={cursor}
           fadeIn={fadeIn}

package/src/components/ChatThread/Link.tsx

@@ -5,7 +5,7 @@
 import React, { useMemo } from 'react';
 
 import { type Space } from '@dxos/client/echo';
-import { Obj } from '@dxos/echo';
+import { Entity } from '@dxos/echo';
 import { type DXN } from '@dxos/keys';
 import { DxAnchor } from '@dxos/lit-ui/react';
 
@@ -17,9 +17,9 @@ export type ObjectLinkProps = {
 export const ObjectLink = ({ space, dxn }: ObjectLinkProps) => {
   const ref = useMemo(() => space.db.makeRef(dxn), [space, dxn.toString()]);
 
-  const title = (ref.target && Obj.getLabel(ref.target)) ?? ref.target?.id ?? ref.dxn.toString();
+  const title = (ref.target && Entity.getLabel(ref.target)) ?? ref.target?.id ?? ref.dxn.toString();
   return (
-    <DxAnchor rootclassname='dx-tag--anchor' refid={dxn.toString()}>
+    <DxAnchor rootclassname='dx-tag--anchor' dxn={dxn.toString()}>
       {title}
     </DxAnchor>
   );

package/src/components/ChatThread/registry.tsx

@@ -13,9 +13,9 @@ import {
   SuggestionWidget,
   SummaryWidget,
 } from '@dxos/react-ui-components';
-import { type XmlWidgetProps, type XmlWidgetRegistry, getXmlTextChild } from '@dxos/react-ui-editor';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { ContentBlock, type Message } from '@dxos/types';
+import { type XmlWidgetProps, type XmlWidgetRegistry, getXmlTextChild } from '@dxos/ui-editor';
 
 import { ToolBlock } from '../ToolBlock';
 

package/src/components/ChatThread/sync.test.ts

@@ -6,6 +6,8 @@ import { EditorView } from '@codemirror/view';
 import { describe, it } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 
+import { Obj } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
 import { type ContentBlock } from '@dxos/types';
 
 import { createMessage } from '../../testing';
@@ -54,7 +56,9 @@ describe('reducers', () => {
       syncer.append(messages);
       expect(doc.content).toEqual(['<prompt>Hello</prompt>', 'Hi there!', ''].join('\n'));
 
-      messages[1].blocks.push({ _tag: 'text', text: 'How can I help?' });
+      Obj.change(messages[1], (m) => {
+        m.blocks.push({ _tag: 'text', text: 'How can I help?' });
+      });
       syncer.append(messages);
       expect(doc.content).toEqual(['<prompt>Hello</prompt>', 'Hi there!', 'How can I help?', ''].join('\n'));
     }),
@@ -74,12 +78,16 @@ describe('reducers', () => {
       syncer.append(messages);
       expect(doc.content).toEqual(['<prompt>Hello</prompt>', 'Hi there!'].join('\n'));
 
-      const block = messages[1].blocks[0] as ContentBlock.Text;
-      block.text = 'Hi there! How are you?';
-      block.pending = false;
+      Obj.change(messages[1], (m) => {
+        const block = m.blocks[0] as Mutable<ContentBlock.Text>;
+        block.text = 'Hi there! How are you?';
+        block.pending = false;
+      });
       syncer.append(messages);
 
-      messages[1].blocks.push({ _tag: 'text', text: 'How can I help?' });
+      Obj.change(messages[1], (m) => {
+        m.blocks.push({ _tag: 'text', text: 'How can I help?' });
+      });
       syncer.append(messages);
       expect(doc.content).toEqual(
         ['<prompt>Hello</prompt>', 'Hi there! How are you?', 'How can I help?', ''].join('\n'),

package/src/components/ChatThread/sync.ts

@@ -5,8 +5,8 @@
 import { type DXN } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { type MarkdownStreamController } from '@dxos/react-ui-components';
-import { type StateDispatch, type XmlWidgetStateManager } from '@dxos/react-ui-editor';
 import { type ContentBlock, type Message } from '@dxos/types';
+import { type StateDispatch, type XmlWidgetStateManager } from '@dxos/ui-editor';
 
 /**
  * Update document.
@@ -87,7 +87,13 @@ export class MessageSyncer {
 
       const content = buffer.join('');
       this._model.view?.dispatch({
-        changes: [{ from: 0, to: this._model.view?.state.doc.length ?? 0, insert: content }],
+        changes: [
+          {
+            from: 0,
+            to: this._model.view?.state.doc.length ?? 0,
+            insert: content,
+          },
+        ],
         selection: { anchor: content.length },
       });
 

package/src/components/InitiativeContainer.tsx

@@ -0,0 +1,340 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Match from 'effect/Match';
+import * as Option from 'effect/Option';
+import type * as Record from 'effect/Record';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework/ui';
+import { Initiative } from '@dxos/assistant-toolkit';
+import { DXN, Filter, Obj, Query, Ref } from '@dxos/echo';
+import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
+import { AtomObj, AtomRef } from '@dxos/echo-atom';
+import { FunctionDefinition, QueueService, Trigger } from '@dxos/functions';
+import { AutomationCapabilities } from '@dxos/plugin-automation/types';
+import { MarkdownEditor } from '@dxos/plugin-markdown';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { Button, ButtonGroup, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldMap, omitId } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { type Text } from '@dxos/schema';
+
+export type InitiativeContainerProps = {
+  role?: string;
+  initiative: Initiative.Initiative;
+};
+
+const TAB_INITATIVE = 'Initiative';
+const TAB_CHAT = 'Chat';
+
+export const InitiativeContainer = ({ role, initiative }: InitiativeContainerProps) => {
+  const [selectedTab, setSelectedTab] = useState<string>(TAB_INITATIVE);
+
+  const tabs = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(initiative).pipe((initiative) =>
+          Atom.make((get) => {
+            return [TAB_INITATIVE, TAB_CHAT, ...get(initiative).artifacts.map((artifact) => artifact.name)];
+          }),
+        ),
+      [initiative],
+    ),
+  );
+
+  const chat = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(initiative).pipe((initiative) =>
+          Atom.make((get) => {
+            const chat = get(initiative).chat;
+            return chat ? get(AtomRef.make(chat)) : undefined;
+          }),
+        ),
+      [initiative],
+    ),
+  );
+
+  const artifacts = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(initiative).pipe((initiative) =>
+          Atom.make((get) => {
+            return get(initiative).artifacts.map((artifact) => ({
+              name: artifact.name,
+              data: get(AtomRef.make(artifact.data)),
+            }));
+          }),
+        ),
+      [initiative],
+    ),
+  );
+
+  const selectedArtifact = artifacts.find((artifact) => artifact.name === selectedTab);
+
+  return (
+    <StackItem.Content toolbar>
+      <div
+        role='none'
+        className='flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1 border-b border-subduedSeparator'
+      >
+        {tabs.map((tab) => (
+          <IconButton
+            key={tab}
+            icon={Match.value(tab).pipe(
+              Match.when(TAB_INITATIVE, () => 'ph--sparkle--regular'),
+              Match.when(TAB_CHAT, () => 'ph--chat--regular'),
+              Match.orElse(() => 'ph--file--regular'),
+            )}
+            label={tab}
+            variant={selectedTab === tab ? 'primary' : 'ghost'}
+            onClick={() => setSelectedTab(tab)}
+          />
+        ))}
+      </div>
+      {selectedTab === TAB_INITATIVE && <InitiativeForm initiative={initiative} />}
+      {selectedTab === TAB_CHAT && <Surface.Surface role='article' data={{ subject: chat }} limit={1} />}
+      {selectedArtifact && <Surface.Surface role='section' data={{ subject: selectedArtifact.data }} limit={1} />}
+    </StackItem.Content>
+  );
+};
+
+export default InitiativeContainer;
+
+const InitiativeForm = ({ initiative }: { initiative: Initiative.Initiative }) => {
+  const handleChange = useCallback(
+    (
+      values: Omit<Initiative.Initiative, 'id'>,
+      { isValid, changed }: { isValid: boolean; changed: Record<string, boolean> },
+    ) => {
+      if (!isValid) {
+        return;
+      }
+
+      const changedPaths = Object.keys(changed).filter((path) => changed[path as string]) as JsonPath[];
+      // Handle other property changes.
+      if (changedPaths.length > 0) {
+        Obj.change(initiative, () => {
+          for (const path of changedPaths) {
+            const parts = splitJsonPath(path);
+            const value = Obj.getValue(values as any, parts);
+            Obj.setValue(initiative, parts, value);
+          }
+        });
+      }
+
+      queueMicrotask(() => syncTriggers(initiative));
+    },
+    [initiative],
+  );
+
+  const fieldMap = useMemo<FormFieldMap>(
+    () => ({
+      spec: ({ type, label, getValue, onValueChange }) => {
+        const { t } = useTranslation();
+
+        const value: Ref.Ref<Text.Text> = getValue();
+        const target = useAtomValue(AtomRef.make(value));
+        const [initialValue] = useObject(target, 'content');
+
+        return (
+          <Input.Root>
+            <div role='none'>
+              <Input.Label>{toLocalizedString(label, t)}</Input.Label>
+            </div>
+            <MarkdownEditor.Root id={target?.id ?? ''} object={target}>
+              <MarkdownEditor.Content initialValue={initialValue} />
+            </MarkdownEditor.Root>
+          </Input.Root>
+        );
+      },
+      plan: ({ type, label, getValue, onValueChange }) => {
+        const { t } = useTranslation();
+
+        const value: Ref.Ref<Initiative.Plan> = getValue();
+        const target = useAtomValue(AtomRef.make(value));
+
+        return (
+          <Input.Root>
+            <div role='none'>
+              <Input.Label>{toLocalizedString(label, t)}</Input.Label>
+            </div>
+            <MarkdownEditor.Root id={target?.id ?? ''}>
+              <MarkdownEditor.Content initialValue={target ? Initiative.formatPlan(target) : ''} />
+            </MarkdownEditor.Root>
+          </Input.Root>
+        );
+      },
+    }),
+    [],
+  );
+
+  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
+
+  const handleResetHistory = useCallback(async () => {
+    const runtime = computeRuntime.getRuntime(Obj.getDatabase(initiative)!.spaceId);
+
+    await runtime.runPromise(Initiative.resetChatHistory(initiative));
+
+    if (!initiative.queue) {
+      await runtime.runPromise(
+        Effect.gen(function* () {
+          const queue = yield* QueueService.createQueue();
+          Obj.change(initiative, (initiative) => {
+            initiative.queue = Ref.fromDXN(queue.dxn);
+          });
+        }),
+      );
+    }
+  }, [initiative, computeRuntime]);
+
+  const inputQueue = useAtomValue(
+    AtomObj.make(initiative).pipe((_) =>
+      Atom.make((get) =>
+        Option.fromNullable(get(_).queue).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
+      ),
+    ),
+  );
+
+  const inputQueueItems = useQuery(inputQueue, Query.select(Filter.everything()));
+
+  // TODO(dmaretskyi): Form breaks if we provide the echo object directly.
+  const spreadValue = useMemo(() => ({ ...initiative }), [initiative]);
+  return (
+    <div className='flex flex-col gap-2'>
+      <ButtonGroup classNames='h-10'>
+        <Button onClick={handleResetHistory}>Reset History</Button>
+      </ButtonGroup>
+      <h3 className='mb-2'>Input Queue</h3>
+      <div className='border border-subduedSeparator rounded-md p-2 h-64 overflow-y-auto'>
+        {inputQueueItems.map((item) => (
+          <Surface.Surface key={item.id} role='section' data={{ subject: item }} limit={1} />
+        ))}
+        {inputQueueItems.length === 0 && <div className='text-subdued'>No items in queue</div>}
+      </div>
+      <Form.Root
+        schema={omitId(Initiative.Initiative)}
+        onValuesChanged={handleChange as any}
+        values={spreadValue}
+        db={Obj.getDatabase(initiative)}
+        fieldMap={fieldMap}
+      >
+        <Form.FieldSet />
+      </Form.Root>
+    </div>
+  );
+};
+
+// TODO(dmaretskyi): Perhaps the association is better done with a relation.
+
+/**
+ * Foreign key {@link INITIATIVE_TRIGGER_EXTENSION_KEY} => <initative id : ObjectId>
+ */
+const INITIATIVE_TRIGGER_EXTENSION_KEY = 'dxos.org/extension/InitiativeTrigger';
+
+/**
+ * Foreign key {@link INITIATIVE_TRIGGER_EXTENSION_KEY} => <dxn string of subscription target>
+ */
+const INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY = 'dxos.org/extension/InitiativeTriggerTarget';
+
+/**
+ * Syncs triggers in the database with the initiative subscriptions.
+ */
+
+const syncTriggers = async (initiative: Initiative.Initiative) => {
+  const db = Obj.getDatabase(initiative);
+  if (!db) {
+    return;
+  }
+
+  const triggers = await db
+    .query(Filter.foreignKeys(Trigger.Trigger, [{ source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id }]))
+    .run();
+
+  // Delete triggers that are not in subscriptions.
+  for (const trigger of triggers) {
+    const target = Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).at(0)?.id;
+
+    const exists = initiative.subscriptions.find((subscription) => subscription.dxn.toString() === target);
+    if (!exists && !(initiative.useQualifyingAgent && target === Obj.getDXN(initiative)?.toString())) {
+      db.remove(trigger);
+    }
+  }
+
+  // Add triggers that are not in the database.
+  for (const subscription of initiative.subscriptions) {
+    const relevantTrigger = triggers.find((trigger) =>
+      Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).some(
+        (key) => key.id === subscription.dxn.toString(),
+      ),
+    );
+    if (relevantTrigger) {
+      continue;
+    }
+
+    const target = await subscription.tryLoad();
+    if (!target || !target.queue || !(target.queue.dxn instanceof DXN) || target.queue.dxn.kind !== DXN.kind.QUEUE) {
+      continue;
+    }
+
+    db.add(
+      Trigger.make({
+        [Obj.Meta]: {
+          keys: [
+            { source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id },
+            { source: INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY, id: subscription.dxn.toString() },
+          ],
+        },
+        enabled: true,
+        spec: {
+          kind: 'queue',
+          queue: target.queue.dxn.toString(),
+        },
+        function: Ref.make(
+          FunctionDefinition.serialize(initiative.useQualifyingAgent ? Initiative.qualifier : Initiative.agent),
+        ),
+        input: {
+          initiative: Ref.make(initiative),
+          event: '{{event}}',
+        },
+        concurrency: initiative.useQualifyingAgent ? 5 : undefined,
+      }),
+    );
+  }
+
+  if (initiative.useQualifyingAgent) {
+    const qualifierTrigger = triggers.find((trigger) =>
+      Obj.getKeys(trigger, INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY).some(
+        (key) => key.id === Obj.getDXN(initiative)?.toString(),
+      ),
+    );
+    if (!qualifierTrigger && initiative.queue) {
+      db.add(
+        Trigger.make({
+          [Obj.Meta]: {
+            keys: [
+              { source: INITIATIVE_TRIGGER_EXTENSION_KEY, id: initiative.id },
+              { source: INITIATIVE_TRIGGER_TARGET_EXTENSION_KEY, id: Obj.getDXN(initiative)?.toString() ?? '' },
+            ],
+          },
+          function: Ref.make(FunctionDefinition.serialize(Initiative.agent)),
+          enabled: true,
+          spec: {
+            kind: 'queue',
+            queue: initiative.queue.dxn.toString(),
+          },
+          input: {
+            initiative: Ref.make(initiative),
+            event: '{{event}}',
+          },
+        }),
+      );
+    }
+  }
+
+  await db.flush({ indexes: true });
+};

package/src/components/PromptArticle.tsx

@@ -4,15 +4,13 @@
 
 import React, { useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Agent } from '@dxos/assistant-toolkit';
 import { type Prompt } from '@dxos/blueprints';
 import { Obj } from '@dxos/echo';
 import { invokeFunctionWithTracing, useComputeRuntimeCallback } from '@dxos/plugin-automation';
-import { getSpace } from '@dxos/react-client/echo';
-import { Toolbar, useTranslation } from '@dxos/react-ui';
+import { Layout, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { StackItem } from '@dxos/react-ui-stack';
 
 import { meta } from '../meta';
 
@@ -20,31 +18,31 @@ import { TemplateEditor } from './TemplateEditor';
 
 export type PromptArticleProps = SurfaceComponentProps<Prompt.Prompt>;
 
-export const PromptArticle = ({ subject }: PromptArticleProps) => {
+export const PromptArticle = ({ role, subject }: PromptArticleProps) => {
   const { t } = useTranslation(meta.id);
-  const space = getSpace(subject);
+  const db = Obj.getDatabase(subject);
   const { hasAttention } = useAttention(Obj.getDXN(subject).toString());
 
   const inputData = useMemo(
     () =>
       subject && {
-        prompt: space?.db.makeRef(Obj.getDXN(subject)),
+        prompt: db?.makeRef(Obj.getDXN(subject)),
         input: {},
       },
-    [subject, space],
+    [subject, db],
   );
 
-  const handleRun = useComputeRuntimeCallback(space, () => invokeFunctionWithTracing(Agent.prompt, inputData), [
+  const handleRun = useComputeRuntimeCallback(db?.spaceId, () => invokeFunctionWithTracing(Agent.prompt, inputData), [
     inputData,
   ]);
 
   return (
-    <StackItem.Content toolbar>
+    <Layout.Main role={role} toolbar>
       <Toolbar.Root disabled={!hasAttention} onClick={handleRun}>
         <Toolbar.IconButton iconOnly icon='ph--play--regular' label={t('run prompt label')} onClick={handleRun} />
       </Toolbar.Root>
       <TemplateEditor id={subject.id} template={subject.instructions} classNames='container-max-width' />
-    </StackItem.Content>
+    </Layout.Main>
   );
 };
 

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -57,7 +57,7 @@ const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
 
   return (
     <TemplateEditor
-      classNames='bg-baseSurface max-is-prose is-full'
+      classNames='bg-baseSurface is-full max-is-proseMaxWidth'
       id={blueprint.id}
       template={blueprint.instructions}
     />
@@ -69,8 +69,8 @@ const meta = {
   component: TemplateEditor as any,
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],
       createIdentity: true,

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -8,15 +8,15 @@ import React from 'react';
 import { type Template } from '@dxos/blueprints';
 import { createDocAccessor } from '@dxos/echo-db';
 import { type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../../meta';
@@ -51,7 +51,10 @@ export const TemplateEditor = ({ id, classNames, template, lineNumbers = true }:
           lineWrapping: true,
           placeholder: t('template placeholder'),
         }),
-        createThemeExtensions({ themeMode, slots: { content: { className: '!pie-4' } } }),
+        createThemeExtensions({
+          themeMode,
+          slots: { content: { className: '!pie-4' } },
+        }),
         createMarkdownExtensions(),
         decorateMarkdown(),
         handlebars(),