@dxos/plugin-assistant 0.8.4-main.72ec0f3 → 0.8.4-main.937b3ca

package/src/components/ChatPrompt/ChatStatusIndicator.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
 
 import { type ThemedClassName, Tooltip, useTimeout } from '@dxos/react-ui';
 import { Spinner, type SpinnerProps } from '@dxos/react-ui-sfx';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 const period = 3_000;
 

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

@@ -8,7 +8,9 @@ import * as Fiber from 'effect/Fiber';
 import * as Layer from 'effect/Layer';
 import React, { type CSSProperties, useEffect, useMemo, useState } from 'react';
 
-import { ContextQueueService, DatabaseService } from '@dxos/functions';
+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';
 import { withClientProvider } from '@dxos/react-client/testing';
@@ -16,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';
 
@@ -29,7 +31,7 @@ import TEXT from './testing/thread.md?raw';
 
 faker.seed(1);
 
-type MessageGenerator = Effect.Effect<void, never, DatabaseService | ContextQueueService>;
+type MessageGenerator = Effect.Effect<void, never, Database.Service | ContextQueueService>;
 
 type StoryProps = { generator?: MessageGenerator[]; delay?: number; wait?: boolean } & ChatThreadProps;
 
@@ -54,11 +56,11 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryProps)
           }
         }
         setDone(true);
-      }).pipe(Effect.provide(Layer.mergeAll(DatabaseService.layer(space.db), ContextQueueService.layer(queue)))),
+      }).pipe(Effect.provide(Layer.mergeAll(Database.Service.layer(space.db), ContextQueueService.layer(queue)))),
     );
 
     return () => {
-      void Effect.runPromise(Fiber.interrupt(fiber));
+      void runAndForwardErrors(Fiber.interrupt(fiber));
     };
   }, [space, queue, generator]);
 
@@ -81,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,7 +100,7 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ container: 'column' }),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,

package/src/components/ChatThread/ChatThread.tsx

@@ -8,8 +8,8 @@ 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';

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';
 
@@ -15,9 +15,9 @@ export type ObjectLinkProps = {
 };
 
 export const ObjectLink = ({ space, dxn }: ObjectLinkProps) => {
-  const ref = useMemo(() => space.db.ref(dxn), [space, dxn.toString()]);
+  const ref = useMemo(() => space.db.makeRef(dxn), [space, dxn.toString()]);
 
-  const title = 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()}>
       {title}

package/src/components/ChatThread/registry.tsx

@@ -5,17 +5,17 @@
 import React from 'react';
 
 import { log } from '@dxos/log';
+import { ToggleContainer } from '@dxos/react-ui-components';
 import {
   PromptWidget,
   ReferenceWidget,
   SelectWidget,
   SuggestionWidget,
   SummaryWidget,
-  ToggleContainer,
 } 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,7 @@ import { EditorView } from '@codemirror/view';
 import { describe, it } from '@effect/vitest';
 import * as Effect from 'effect/Effect';
 
+import { Obj } from '@dxos/echo';
 import { type ContentBlock } from '@dxos/types';
 
 import { createMessage } from '../../testing';
@@ -54,7 +55,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 +77,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 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/PromptArticle.tsx

@@ -9,10 +9,9 @@ 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 { useAttention } from '@dxos/react-ui-attention';
-import { StackItem } from '@dxos/react-ui-stack';
+import { Layout } from '@dxos/react-ui-mosaic';
 
 import { meta } from '../meta';
 
@@ -20,31 +19,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.ref(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}
     />
@@ -70,7 +70,7 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme,
-    withLayout({ container: 'column' }),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],
       createIdentity: true,

package/src/components/TemplateEditor/TemplateEditor.tsx

@@ -6,17 +6,17 @@ import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import React from 'react';
 
 import { type Template } from '@dxos/blueprints';
-import { createDocAccessor } from '@dxos/react-client/echo';
+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(),

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

@@ -3,9 +3,10 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Blueprint, Template } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -13,15 +14,15 @@ import { trim } from '@dxos/util';
 
 import { translations } from '../../translations';
 
-import { TemplateForm } from './TemplateForm';
+import { type TemplateChangeCallback, TemplateForm } from './TemplateForm';
 
 const TEMPLATE = trim`
   You are a machine that is an expert chess player.
   The move history of the current game is: {{history}}
   If asked to suggest a move explain why it is a good move.
-  
+
   ---
- 
+
   {{input}},
 `;
 
@@ -38,9 +39,16 @@ const DefaultStory = () => {
     );
   });
 
+  const handleChange: TemplateChangeCallback = useCallback(
+    (mutate) => {
+      Obj.change(blueprint, (b) => mutate(b.instructions));
+    },
+    [blueprint],
+  );
+
   return (
     <div role='none' className='flex is-[40rem] border border-separator overflow-hidden'>
-      <TemplateForm id={blueprint.id} template={blueprint.instructions} />
+      <TemplateForm id={blueprint.id} template={blueprint.instructions} onChange={handleChange} />
     </div>
   );
 };
@@ -51,7 +59,7 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme,
-    withLayout({ container: 'column' }),
+    withLayout({ layout: 'column' }),
     withClientProvider({
       types: [Blueprint.Blueprint],
       createIdentity: true,

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -3,27 +3,62 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useCallback, useEffect } from 'react';
 
 import { type Template } from '@dxos/blueprints';
+import { type Obj } from '@dxos/echo';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { attentionSurface, groupBorder, mx } from '@dxos/react-ui-theme';
+import { attentionSurface, groupBorder, mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../../meta';
 
 import { TemplateEditor } from './TemplateEditor';
 
+/**
+ * Callback type for mutating template within a parent object's Obj.change context.
+ */
+export type TemplateChangeCallback = (mutate: (template: Obj.Mutable<Template.Template>) => void) => void;
+
 export type TemplateFormProps = {
   id: string;
   template: Template.Template;
   schema?: Schema.Schema<any, any, any>;
   commandEditable?: boolean;
+  /**
+   * Callback to mutate the template. Should wrap mutations in parent's Obj.change.
+   * If not provided, the component is read-only.
+   */
+  onChange?: TemplateChangeCallback;
 };
 
-export const TemplateForm = ({ id, template, commandEditable = true }: TemplateFormProps) => {
+export const TemplateForm = ({ id, template, commandEditable = true, onChange }: TemplateFormProps) => {
   const { t } = useTranslation(meta.id);
-  usePromptInputs(template);
+  usePromptInputs(template, onChange);
+
+  const handleInputKindChange = useCallback(
+    (inputName: string, kind: Template.InputKind) => {
+      onChange?.((t) => {
+        const input = t.inputs?.find((i) => i?.name === inputName);
+        if (input) {
+          input.kind = kind;
+        }
+      });
+    },
+    [onChange],
+  );
+
+  const handleInputDefaultChange = useCallback(
+    (inputName: string, value: string) => {
+      onChange?.((t) => {
+        const input = t.inputs?.find((i) => i?.name === inputName);
+        if (input) {
+          input.default = value;
+        }
+      });
+    },
+    [onChange],
+  );
 
   return (
     <div className={mx('flex flex-col is-full overflow-hidden gap-4', groupBorder)}>
@@ -36,7 +71,9 @@ export const TemplateForm = ({ id, template, commandEditable = true }: TemplateF
               classNames='is-full bg-transparent m-2'
               value={template.command ?? ''}
               onChange={(event) => {
-                template.command = event.target.value.replace(/\w/g, '');
+                onChange?.((t) => {
+                  t.command = event.target.value.replace(/\w/g, '');
+                });
               }}
             />
           </Input.Root>
@@ -54,9 +91,7 @@ export const TemplateForm = ({ id, template, commandEditable = true }: TemplateF
               <Input.Root>
                 <Select.Root
                   value={input.kind}
-                  onValueChange={(kind) => {
-                    input.kind = kind as Template.InputKind;
-                  }}
+                  onValueChange={(kind) => handleInputKindChange(input.name, kind as Template.InputKind)}
                 >
                   <Select.TriggerButton placeholder='Type' classNames='is-full' />
                   <Select.Portal>
@@ -82,9 +117,7 @@ export const TemplateForm = ({ id, template, commandEditable = true }: TemplateF
                         placeholder={t('command placeholder')}
                         classNames='is-full bg-transparent'
                         value={input.default ?? ''}
-                        onChange={(event) => {
-                          input.default = event.target.value;
-                        }}
+                        onChange={(event) => handleInputDefaultChange(input.name, event.target.value)}
                       />
                     </Input.Root>
                   </div>
@@ -136,13 +169,14 @@ const inputs: { kind: Template.InputKind; label: string }[] = [
 
 export const NAME_REGEXP = /\{\{([\w-]+)\}\}/;
 
-const usePromptInputs = (template: Template.Template) => {
+const usePromptInputs = (template: Template.Template, onChange?: TemplateChangeCallback) => {
   useEffect(() => {
-    const text = template.source ?? '';
-    if (!template.inputs) {
-      template.inputs = []; // TODO(burdon): Required?
+    if (!onChange) {
+      return;
     }
 
+    const text = template.source ?? '';
+
     const regex = new RegExp(NAME_REGEXP, 'g');
     const variables = new Set<string>([...(text.target?.content.matchAll(regex) ?? [])].map((m) => m[1]));
 
@@ -161,19 +195,32 @@ const usePromptInputs = (template: Template.Template) => {
 
     // Match or create new inputs.
     const values = unclaimed.values();
-    missing.forEach((name) => {
-      const next = values.next().value;
-      if (next) {
-        next.name = name;
-      } else {
-        template.inputs?.push({ name });
+    onChange((t) => {
+      if (!t.inputs) {
+        t.inputs = [];
       }
-    });
 
-    // Remove unclaimed (deleted) inputs.
-    // TODO(burdon): If user types incorrect name value, it will be deleted. Garbage collect?
-    for (const input of values) {
-      template.inputs.splice(template.inputs.indexOf(input), 1);
-    }
-  }, [template.source]);
+      missing.forEach((name) => {
+        const next = values.next().value;
+        if (next) {
+          // Find the input in the mutable draft and update it.
+          const inputIndex = t.inputs!.findIndex((i) => i?.name === next.name);
+          if (inputIndex !== -1) {
+            t.inputs![inputIndex].name = name;
+          }
+        } else {
+          t.inputs!.push({ name });
+        }
+      });
+
+      // Remove unclaimed (deleted) inputs.
+      // TODO(burdon): If user types incorrect name value, it will be deleted. Garbage collect?
+      for (const input of values) {
+        const inputIndex = t.inputs!.findIndex((i) => i?.name === input.name);
+        if (inputIndex !== -1) {
+          t.inputs!.splice(inputIndex, 1);
+        }
+      }
+    });
+  }, [template.source, onChange]);
 };

package/src/components/TemplateEditor/extensions/handlebars-extension.ts

@@ -19,8 +19,7 @@ import {
   keymap,
 } from '@codemirror/view';
 
-import { Domino } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { Domino, mx } from '@dxos/ui';
 
 export type HandlebarsOptions = {};
 
@@ -87,7 +86,11 @@ const handlebarsHighlightPlugin = ViewPlugin.fromClass(
     // NOTE: Decorations may clash with other extensions (e.g., markdown).
     buildDecorations(view: EditorView) {
       const selection = view.state.selection.main;
-      const decorations: Array<{ from: number; to: number; decoration: Decoration }> = [];
+      const decorations: Array<{
+        from: number;
+        to: number;
+        decoration: Decoration;
+      }> = [];
 
       for (const { from, to } of view.visibleRanges) {
         const text = view.state.doc.sliceString(from, to);
@@ -121,7 +124,9 @@ const handlebarsHighlightPlugin = ViewPlugin.fromClass(
             decorations.push({
               from: start,
               to: end,
-              decoration: Decoration.mark({ class: mx('dx-tag--blue', tagPadding) }),
+              decoration: Decoration.mark({
+                class: mx('dx-tag--blue', tagPadding),
+              }),
             });
           }
         }
@@ -222,7 +227,7 @@ class DXNWidget extends WidgetType {
         return part;
       })
       .join(':');
-    return Domino.of('span').classNames(['font-mono dx-tag--blue', tagPadding]).text(text).build();
+    return Domino.of('span').classNames(mx('font-mono dx-tag--blue', tagPadding)).text(text).root;
   }
 }
 

package/src/components/ToolBlock/ToolBlock.tsx

@@ -7,9 +7,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useTranslation } from '@dxos/react-ui';
 import { NumericTabs, TextCrawl, ToggleContainer, type ToggleContainerRootProps } from '@dxos/react-ui-components';
-import { type XmlWidgetProps } from '@dxos/react-ui-editor';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { type ContentBlock, type Message } from '@dxos/types';
+import { type XmlWidgetProps } from '@dxos/ui-editor';
 import { isNonNullable, safeParseJson } from '@dxos/util';
 
 import { meta } from '../../meta';
@@ -25,7 +25,7 @@ export type ToolBlockProps = XmlWidgetProps<{
 export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
   const { t } = useTranslation(meta.id);
 
-  const items = useMemo<ToolContainerParams['items']>(() => {
+  const items = useMemo<ToolContainerProps['items']>(() => {
     let lastToolCall: { tool: Tool.Any | undefined; block: ContentBlock.ToolCall } | undefined;
     // TODO(burdon): Get from context?
     const tools: Tool.Any[] = []; //processor.conversation.toolkit?.tools ?? [];
@@ -101,11 +101,11 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
 
 ToolBlock.displayName = 'ToolBlock';
 
-type ToolContainerParams = {
+type ToolContainerProps = {
   items: { title: string; content: any }[];
 } & Pick<ToggleContainerRootProps, 'onChangeOpen'>;
 
-export const ToolContainer = ({ items, onChangeOpen }: ToolContainerParams) => {
+export const ToolContainer = ({ items, onChangeOpen }: ToolContainerProps) => {
   const tabsRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState(0);
   const [open, setOpen] = useState(false);
@@ -115,11 +115,11 @@ export const ToolContainer = ({ items, onChangeOpen }: ToolContainerParams) => {
     if (open) {
       tabsRef.current?.focus();
     }
-  }, [onChangeOpen, open]);
+  }, [open, onChangeOpen]);
 
-  const handleSelect = (index: number) => {
+  const handleSelect = useCallback((index: number) => {
     setSelected(index);
-  };
+  }, []);
 
   return (
     <ToggleContainer.Root classNames='mbs-2 is-full rounded-sm' open={open} onChangeOpen={setOpen}>

package/src/components/Toolbox/Toolbox.stories.tsx

@@ -3,16 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { capabilities } from '@dxos/assistant-toolkit';
+import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { ChessPlugin } from '@dxos/plugin-chess';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { MapPlugin } from '@dxos/plugin-map';
-import { SpacePlugin } from '@dxos/plugin-space';
 import { TablePlugin } from '@dxos/plugin-table';
+import { corePlugins } from '@dxos/plugin-testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
@@ -31,14 +31,13 @@ const meta = {
     withTheme,
     withPluginManager({
       plugins: [
+        ...corePlugins(),
         ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        SpacePlugin({}),
-        SettingsPlugin(),
-        IntentPlugin(),
         ChessPlugin(),
         MapPlugin(),
         TablePlugin(),