@dxos/plugin-assistant 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/components/ToolBlock/ToolBlock.tsx

@@ -6,13 +6,13 @@ import type * as Tool from '@effect/ai/Tool';
 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 { NumericTabs, TextCrawl, TogglePanel, type TogglePanelRootProps } from '@dxos/react-ui-components';
 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';
+import { meta } from '#meta';
 
 export const isToolMessage = (message: Message.Message) => {
   return message.blocks.some((block: ContentBlock.Any) => block._tag === 'toolCall' || block._tag === 'toolResult');
@@ -25,12 +25,12 @@ export type ToolBlockProps = XmlWidgetProps<{
 export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
   const { t } = useTranslation(meta.id);
 
-  const items = useMemo<ToolContainerParams['items']>(() => {
+  const items = useMemo<ToolPanelProps['items']>(() => {
     let lastToolCall: { tool: Tool.Any | undefined; block: ContentBlock.ToolCall } | undefined;
     // TODO(burdon): Get from context?
     const tools: Tool.Any[] = []; //processor.conversation.toolkit?.tools ?? [];
     return blocks
-      .filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult' || block._tag === 'summary')
+      .filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult' || block._tag === 'stats')
       .map((block) => {
         switch (block._tag) {
           case 'toolCall': {
@@ -41,7 +41,7 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
             const tool = tools.find((tool) => tool.name === block.name);
             lastToolCall = { tool, block };
             return {
-              title: tool?.description ?? [t('tool call label'), tool?.name].join(' '),
+              title: tool?.description ?? [t('tool-call.label'), block?.name].join(' '),
               content: {
                 ...block,
                 input: safeParseJson(block.input),
@@ -53,13 +53,13 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
             // TODO(burdon): Parse error type.
             if (block.error) {
               return {
-                title: t('tool error label'),
+                title: t('tool-error.label'),
                 content: block,
               };
             }
 
             const title =
-              lastToolCall?.tool?.description ?? [t('tool result label'), lastToolCall?.tool?.name].join(' ');
+              lastToolCall?.tool?.description ?? [t('tool-result.label'), lastToolCall?.block?.name].join(' ');
             lastToolCall = undefined;
             return {
               title,
@@ -70,13 +70,13 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
             };
           }
 
-          case 'summary': {
+          case 'stats': {
             if (!lastToolCall) {
               return null;
             }
 
             return {
-              title: t('summary label'),
+              title: t('stats.label'),
               content: block,
             };
           }
@@ -92,20 +92,21 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
     }, 1_000);
   }, [view]);
 
+  // Ignore if empty.
   if (!items.length) {
     return null;
   }
 
-  return <ToolContainer items={items} onChangeOpen={handleChangeOpen} />;
+  return <ToolPanel items={items} onChangeOpen={handleChangeOpen} />;
 };
 
 ToolBlock.displayName = 'ToolBlock';
 
-type ToolContainerParams = {
+type ToolPanelProps = {
   items: { title: string; content: any }[];
-} & Pick<ToggleContainerRootProps, 'onChangeOpen'>;
+} & Pick<TogglePanelRootProps, 'onChangeOpen'>;
 
-export const ToolContainer = ({ items, onChangeOpen }: ToolContainerParams) => {
+const ToolPanel = ({ items, onChangeOpen }: ToolPanelProps) => {
   const tabsRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState(0);
   const [open, setOpen] = useState(false);
@@ -115,20 +116,20 @@ 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}>
-      <ToggleContainer.Header classNames='text-sm text-placeholder'>
+    <TogglePanel.Root classNames='w-full rounded-xs border border-subdued-separator' open={open} onChangeOpen={setOpen}>
+      <TogglePanel.Header classNames='text-sm text-placeholder'>
         <TextCrawl key='status-roll' lines={items.map((item) => item.title)} autoAdvance greedy />
-      </ToggleContainer.Header>
-      <ToggleContainer.Content classNames='grid grid-cols-[32px_1fr]'>
+      </TogglePanel.Header>
+      <TogglePanel.Content classNames='grid grid-cols-[32px_1fr]'>
         <NumericTabs ref={tabsRef} classNames='p-1' length={items.length} selected={selected} onSelect={handleSelect} />
-        <Json
+        <Json.Data
           data={items[selected]?.content}
           classNames='p-1 text-xs bg-transparent'
           replacer={{
@@ -137,7 +138,7 @@ export const ToolContainer = ({ items, onChangeOpen }: ToolContainerParams) => {
             maxStringLen: 128,
           }}
         />
-      </ToggleContainer.Content>
-    </ToggleContainer.Root>
+      </TogglePanel.Content>
+    </TogglePanel.Root>
   );
 };

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

@@ -3,42 +3,39 @@
 //
 
 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 { initializeIdentity } from '@dxos/plugin-client/testing';
 import { MapPlugin } from '@dxos/plugin-map';
-import { SpacePlugin } from '@dxos/plugin-space';
 import { TablePlugin } from '@dxos/plugin-table';
-import { withTheme } from '@dxos/react-ui/testing';
+import { corePlugins } from '@dxos/plugin-testing';
 
 import { translations } from '../../translations';
-
 import { Toolbox, type ToolboxProps } from './Toolbox';
 
 const DefaultStory = (props: ToolboxProps) => {
-  return <Toolbox {...props} classNames='is-[30rem] bs-[15rem] rounded-sm border border-separator plb-1' />;
+  return <Toolbox {...props} classNames='h-[15rem] w-[30rem] py-1 rounded-xs border border-separator' />;
 };
 
 const meta = {
-  title: 'plugins/plugin-assistant/Toolbox',
+  title: 'plugins/plugin-assistant/components/Toolbox',
   component: Toolbox as any,
   render: DefaultStory,
   decorators: [
-    withTheme,
     withPluginManager({
       plugins: [
+        ...corePlugins(),
         ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
         }),
-        SpacePlugin({}),
-        SettingsPlugin(),
-        IntentPlugin(),
         ChessPlugin(),
         MapPlugin(),
         TablePlugin(),

package/src/components/Toolbox/Toolbox.tsx

@@ -2,86 +2,91 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC, Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 
 import { type Blueprint } from '@dxos/blueprints';
-import { type Ref } from '@dxos/echo';
-import { Function } from '@dxos/functions';
+import { type Database, type Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { Operation } from '@dxos/operation';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { ServiceType } from '#types';
 
-import { meta } from '../../meta';
 import { type AiChatProcessor } from '../../processor';
-import { ServiceType } from '../../types';
 
-export type ToolboxProps = ThemedClassName<{
+export type ToolboxProps = {
   services?: { service: ServiceType }[];
-  functions?: Function.Function[];
+  functions?: Operation.PersistentOperation[];
   // TODO(burdon): Combine into single array.
-  blueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
+  blueprints?: readonly Blueprint.Blueprint[];
   activeBlueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
-}>;
-
-export const Toolbox = ({ classNames, functions, services, blueprints, activeBlueprints }: ToolboxProps) => {
-  const { t } = useTranslation(meta.id);
-
-  return (
-    <div className={mx('flex flex-col overflow-y-auto box-content', classNames)}>
-      {blueprints && blueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={blueprints.map(({ target }) => ({
-            name: target?.name ?? '',
-            description: target?.description ?? '',
-            subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {activeBlueprints && activeBlueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={activeBlueprints.map(({ target }) => ({
-            name: target?.name ?? '',
-            description: target?.description ?? '',
-            subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {services && services.length > 0 && (
-        <Section
-          title='Services'
-          items={services.map(({ service: { serviceId, name, description } }) => ({
-            name: name ?? serviceId,
-            description,
-            // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
-          }))}
-        />
-      )}
-
-      {functions && functions.length > 0 && (
-        <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
-      )}
-    </div>
-  );
 };
 
-const Section: FC<{
+export const Toolbox = composable<HTMLDivElement, ToolboxProps>(
+  ({ functions, services, blueprints, activeBlueprints, ...props }, forwardedRef) => {
+    return (
+      <ScrollArea.Root {...composableProps(props)} thin orientation='vertical' ref={forwardedRef}>
+        <ScrollArea.Viewport>
+          {blueprints && blueprints.length > 0 && (
+            <Section
+              title='Blueprints'
+              items={blueprints.map(({ name, description, tools }) => ({
+                name,
+                description,
+                subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+              }))}
+            />
+          )}
+
+          {activeBlueprints && activeBlueprints.length > 0 && (
+            <Section
+              title='Blueprints'
+              items={activeBlueprints.map(({ target }) => ({
+                name: target?.name ?? '',
+                description: target?.description ?? '',
+                subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+              }))}
+            />
+          )}
+
+          {services && services.length > 0 && (
+            <Section
+              title='Services'
+              items={services.map(({ service: { serviceId, name, description } }) => ({
+                name: name ?? serviceId,
+                description,
+                // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
+              }))}
+            />
+          )}
+
+          {functions && functions.length > 0 && (
+            <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
+          )}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
+  },
+);
+
+Toolbox.displayName = 'Toolbox';
+
+type SectionProps = {
   title: string;
   items: { name: string; description?: string; subitems?: { name: string; description?: string }[] }[];
   striped?: boolean;
-}> = ({ title, items, striped }) => {
+};
+
+const Section = ({ title, items, striped }: SectionProps) => {
   const stripeClassNames = 'odd:bg-neutral-50 dark:odd:bg-neutral-800';
   const gridClassNames = 'grid grid-cols-[8rem_1fr]';
-  const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs pli-2', striped && stripeClassNames);
+  const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs px-2', striped && stripeClassNames);
 
   return (
     <div>
-      <h1 className='pli-2 text-sm'>{title}</h1>
+      <h1 className='px-2 text-sm'>{title}</h1>
       <div className={gridClassNames}>
         {items.map(({ name, description, subitems }, i) => (
           <Fragment key={i}>
@@ -104,14 +109,14 @@ const Section: FC<{
   );
 };
 
-export type ToolboxContainerProps = ThemedClassName<{
-  space?: Space;
+export type ToolboxPanelProps = ThemedClassName<{
+  db?: Database.Database;
   processor?: AiChatProcessor;
 }>;
 
-export const ToolboxContainer = ({ classNames, space, processor }: ToolboxContainerProps) => {
+export const ToolboxPanel = ({ classNames, db, processor }: ToolboxPanelProps) => {
   // Registered services.
-  const services = useQuery(space, Filter.type(ServiceType));
+  const services = useQuery(db, Filter.type(ServiceType));
   const [serviceTools, setServiceTools] = useState<{ service: ServiceType }[]>([]);
   useEffect(() => {
     log('creating service tools...', { services: services.length });
@@ -125,12 +130,12 @@ export const ToolboxContainer = ({ classNames, space, processor }: ToolboxContai
   }, [services]);
 
   // Deployed functions.
-  const functions = useQuery(space, Filter.type(Function.Function));
+  const functions = useQuery(db, Filter.type(Operation.PersistentOperation));
 
   return (
     <Toolbox
       classNames={classNames}
-      blueprints={processor?.context.blueprints.value}
+      blueprints={processor?.context.getBlueprints()}
       services={serviceTools}
       functions={functions}
     />

package/src/components/Typewriter/AssistantToolbar.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import * as Effect from 'effect/Effect';
+import type * as Runtime from 'effect/Runtime';
+import React, { useState } from 'react';
+
+import { runInRuntime } from '@dxos/effect';
+import { log } from '@dxos/log';
+import { Button, Icon, Input, ThemeProvider } from '@dxos/react-ui';
+
+export type AssistantToolbarProps = {
+  view: EditorView;
+  from: number;
+  to: number;
+  runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
+};
+
+export const AssistantToolbar = ({ view, from, to, runtime }: AssistantToolbarProps) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showPromptInput, setShowPromptInput] = useState(false);
+  const [customPrompt, setCustomPrompt] = useState('');
+
+  const runEffect = async (text: string, prompt: string) => {
+    setIsProcessing(true);
+    try {
+      const newText = await runInRuntime(
+        runtime,
+        Effect.gen(function* () {
+          // Construct meaningful system prompt context
+          const response = yield* LanguageModel.generateText({
+            prompt: `${prompt}:\n"${text}"`,
+          });
+          return response.text;
+        }),
+      );
+
+      // Apply change - check if selection is still valid/same?
+      // For simple demo, we just apply to the passed from/to, but ideally we check current selection.
+      // We can just rely on from/to passed as props, assuming the toolbar unmounts if selection changes.
+      view.dispatch({
+        changes: { from, to, insert: newText },
+      });
+    } catch (e) {
+      log.error('Assistant action failed', { error: e });
+    } finally {
+      setIsProcessing(false);
+      setShowPromptInput(false);
+    }
+  };
+
+  const currentText = view.state.sliceDoc(from, to);
+
+  const handleRegenerate = () => {
+    void runEffect(
+      currentText,
+      'You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Re-write the following text to be more clear and concise, keep the same meaning.',
+    );
+  };
+
+  const handleCasual = () => handleChangeTone('casual');
+  const handleFormal = () => handleChangeTone('formal');
+
+  const handleChangeTone = (tone: 'formal' | 'casual') => {
+    void runEffect(
+      currentText,
+      `You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Rewrite the following text to be more ${tone}`,
+    );
+  };
+
+  const handleEditWithPrompt = () => {
+    if (!customPrompt) return;
+    void runEffect(currentText, customPrompt);
+  };
+
+  return (
+    <ThemeProvider>
+      {showPromptInput ? (
+        <div
+          className='flex items-center gap-2 p-1 bg-white/90 dark:bg-neutral-800/90 backdrop-blur-md rounded-full shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          <Input.Root>
+            <Input.TextInput
+              placeholder='Instruction...'
+              value={customPrompt}
+              onChange={(e) => setCustomPrompt(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleEditWithPrompt();
+                if (e.key === 'Escape') setShowPromptInput(false);
+                e.stopPropagation();
+              }}
+              autoFocus
+              classNames='border-none bg-transparent focus-visible:ring-0 p-1 text-sm min-w-[200px]'
+            />
+          </Input.Root>
+          <Button
+            variant='ghost'
+            classNames='p-1 min-h-0 h-6 w-6 rounded-full'
+            onClick={handleEditWithPrompt}
+            disabled={!customPrompt || isProcessing}
+          >
+            <Icon icon='ph--arrows-clockwise--regular' classNames={isProcessing ? 'animate-spin' : ''} />
+          </Button>
+        </div>
+      ) : (
+        <div
+          className='flex items-center gap-1 p-1 bg-white/50 dark:bg-neutral-800/50 backdrop-blur-md rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          <div className='flex items-center gap-1'>
+            <Button
+              variant='ghost'
+              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleCasual}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--caret-left--regular' />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Casual</span>
+            </Button>
+
+            <Button
+              variant='ghost'
+              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleRegenerate}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--arrows-clockwise--regular' classNames={isProcessing ? 'animate-spin' : ''} />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Different</span>
+            </Button>
+
+            <Button
+              variant='ghost'
+              classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleFormal}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--caret-right--regular' />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Formal</span>
+            </Button>
+          </div>
+
+          <div className='w-px h-8 bg-neutral-200 dark:bg-neutral-700 mx-1' />
+
+          <Button
+            variant='ghost'
+            classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+            onClick={() => setShowPromptInput(true)}
+            disabled={isProcessing}
+          >
+            <Icon icon='ph--keyboard--regular' />
+            <span className='text-[10px] leading-none text-neutral-500 font-medium'>Instruct</span>
+          </Button>
+        </div>
+      )}
+    </ThemeProvider>
+  );
+};

package/src/components/Typewriter/Typewriter.stories.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type * as LanguageModel from '@effect/ai/LanguageModel';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import type * as Runtime from 'effect/Runtime';
+import React, { useEffect, useState } from 'react';
+
+import { AiService } from '@dxos/ai';
+import { AiServiceTestingPreset } from '@dxos/ai/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Typewriter } from './Typewriter';
+
+const meta: Meta<typeof Typewriter> = {
+  title: 'plugins/plugin-assistant/components/Typewriter',
+  component: Typewriter,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typewriter>;
+
+const sampleText = `# The Future of Artificial Intelligence
+
+Artificial Intelligence (AI) has rapidly evolved from a theoretical concept to a transformative force reshaping industries, economies, and daily life. At its core, AI refers to the development of computer systems capable of performing tasks that typically require human intelligence, such as visual perception, speech recognition, decision-making, and language translation.
+
+## Machine Learning and Neural Networks
+
+The resurgence of AI in recent years is largely driven by advancements in machine learning (ML) and deep learning. Neural networks, inspired by the human brain's architecture, enable computers to learn from vast amounts of data. This has led to breakthroughs in areas like natural language processing (NLP), allowing models like GPT-4 to generate human-like text and code.
+
+## Ethical Considerations
+
+As AI becomes more autonomous, ethical concerns have moved to the forefront. Issues such as algorithmic bias, data privacy, and the potential displacement of jobs are critical topics of debate. Ensuring that AI systems are fair, transparent, and aligned with human values is essential for their sustainable development.
+
+## Conclusion
+
+The journey of AI is just beginning. With responsible innovation and global collaboration, AI has the potential to solve some of humanity's most pressing challenges, from climate change to personalized medicine.
+
+(try selecting some text to see the AI assistant, or wait for the proofreader to find the typo below)
+
+The quick brown fox jumps over teh lazy dog. i think this is cool.
+`;
+
+export const Default: Story = {
+  render: () => {
+    const [runtime, setRuntime] = useState<Runtime.Runtime<LanguageModel.LanguageModel>>();
+    useEffect(() => {
+      let disposed = false;
+      const rt = ManagedRuntime.make(
+        AiService.model('@anthropic/claude-haiku-4-5').pipe(
+          Layer.provide(AiServiceTestingPreset('edge-remote')),
+          Layer.orDie,
+        ),
+      );
+      queueMicrotask(async () => {
+        try {
+          if (disposed) {
+            return;
+          }
+          const runtime = await rt.runtime();
+          if (disposed) {
+            return;
+          }
+          setRuntime(runtime);
+        } catch (error) {
+          console.error('Failed to initialize runtime:', error);
+        }
+      });
+      return () => {
+        disposed = true;
+        void rt.dispose();
+      };
+    }, []);
+
+    if (!runtime) {
+      return <div>...Loading</div>;
+    }
+
+    return <Typewriter initialContent={sampleText} runtime={runtime} />;
+  },
+};

package/src/components/Typewriter/Typewriter.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import type * as LanguageModel from '@effect/ai/LanguageModel';
+import type * as Runtime from 'effect/Runtime';
+import React, { useMemo, useRef } from 'react';
+
+import { ThemeProvider } from '@dxos/react-ui';
+import { Editor, type EditorController } from '@dxos/react-ui-editor';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+import { assistant } from './assistant-extension';
+
+export type TypewriterProps = {
+  initialContent?: string;
+  extensions?: Extension[];
+  runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
+};
+
+export const Typewriter = ({ initialContent = '', extensions = [], runtime }: TypewriterProps) => {
+  const editorRef = useRef<EditorController>(null);
+  const extension = useMemo(
+    () => [
+      createBasicExtensions({ scrollPastEnd: true, search: true }),
+      createThemeExtensions({ syntaxHighlighting: true }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      assistant(runtime),
+      ...extensions,
+    ],
+    [runtime, extensions],
+  );
+
+  return (
+    <ThemeProvider>
+      <Editor.Root ref={editorRef}>
+        <Editor.Viewport>
+          <Editor.Content initialValue={initialContent} extensions={extension} />
+        </Editor.Viewport>
+      </Editor.Root>
+    </ThemeProvider>
+  );
+};