@dxos/plugin-assistant 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/ToolBlock/ToolBlock.tsx

@@ -2,50 +2,33 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AiTool } from '@effect/ai';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type * as Tool from '@effect/ai/Tool';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type AgentStatus } from '@dxos/ai';
 import { useTranslation } from '@dxos/react-ui';
-import {
-  NumericTabs,
-  TextCrawl,
-  ToggleContainer,
-  chatMessageJson,
-  chatMessagePanel,
-  chatMessagePanelContent,
-  chatMessagePanelHeader,
-} from '@dxos/react-ui-components';
+import { NumericTabs, TextCrawl, ToggleContainer, type ToggleContainerRootProps } from '@dxos/react-ui-components';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { type ContentBlock, type DataType } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
-import { safeParseJson } from '@dxos/util';
+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';
 
-export const isToolMessage = (message: DataType.Message) => {
-  return message.blocks.some((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
+export const isToolMessage = (message: Message.Message) => {
+  return message.blocks.some((block: ContentBlock.Any) => block._tag === 'toolCall' || block._tag === 'toolResult');
 };
 
-export type ToolBlockProps = {
+export type ToolBlockProps = XmlWidgetProps<{
   blocks: ContentBlock.Any[];
-};
+}>;
 
-export const ToolBlock = ({ blocks = [] }: ToolBlockProps) => {
+export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
   const { t } = useTranslation(meta.id);
 
-  const getToolCaption = (tool?: AiTool.Any, status?: AgentStatus) => {
-    if (!tool) {
-      return t('calling tool label');
-    }
-
-    return status?.message ?? tool.description ?? [t('calling label'), tool.name].join(' ');
-  };
-
-  const items = useMemo(() => {
-    let lastToolCall: { tool: AiTool.Any | undefined; block: ContentBlock.ToolCall } | undefined;
+  const items = useMemo<ToolContainerProps['items']>(() => {
+    let lastToolCall: { tool: Tool.Any | undefined; block: ContentBlock.ToolCall } | undefined;
     // TODO(burdon): Get from context?
-    const tools: AiTool.Any[] = []; //processor.conversation.toolkit?.tools ?? [];
+    const tools: Tool.Any[] = []; //processor.conversation.toolkit?.tools ?? [];
     return blocks
       .filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult' || block._tag === 'summary')
       .map((block) => {
@@ -58,7 +41,7 @@ export const ToolBlock = ({ blocks = [] }: ToolBlockProps) => {
             const tool = tools.find((tool) => tool.name === block.name);
             lastToolCall = { tool, block };
             return {
-              title: getToolCaption(lastToolCall?.tool),
+              title: tool?.description ?? [t('tool call label'), tool?.name].join(' '),
               content: {
                 ...block,
                 input: safeParseJson(block.input),
@@ -70,12 +53,13 @@ export const ToolBlock = ({ blocks = [] }: ToolBlockProps) => {
             // TODO(burdon): Parse error type.
             if (block.error) {
               return {
-                title: t('error label'),
+                title: t('tool error label'),
                 content: block,
               };
             }
 
-            const title = getToolCaption(lastToolCall?.tool ?? t('tool result label'));
+            const title =
+              lastToolCall?.tool?.description ?? [t('tool result label'), lastToolCall?.tool?.name].join(' ');
             lastToolCall = undefined;
             return {
               title,
@@ -101,45 +85,52 @@ export const ToolBlock = ({ blocks = [] }: ToolBlockProps) => {
       .filter(isNonNullable);
   }, [blocks]);
 
+  const handleChangeOpen = useCallback(() => {
+    setTimeout(() => {
+      // Measure after animation.
+      view?.requestMeasure();
+    }, 1_000);
+  }, [view]);
+
   if (!items.length) {
     return null;
   }
 
-  return <ToolContainer items={items} />;
+  return <ToolContainer items={items} onChangeOpen={handleChangeOpen} />;
 };
 
 ToolBlock.displayName = 'ToolBlock';
 
-type ToolContainerParams = {
+type ToolContainerProps = {
   items: { title: string; content: any }[];
-};
+} & Pick<ToggleContainerRootProps, 'onChangeOpen'>;
 
-export const ToolContainer = ({ items }: ToolContainerParams) => {
+export const ToolContainer = ({ items, onChangeOpen }: ToolContainerProps) => {
   const tabsRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState(0);
   const [open, setOpen] = useState(false);
+
   useEffect(() => {
+    onChangeOpen?.(open);
     if (open) {
       tabsRef.current?.focus();
     }
-  }, [open]);
+  }, [open, onChangeOpen]);
 
-  const handleSelect = (index: number) => {
+  const handleSelect = useCallback((index: number) => {
     setSelected(index);
-  };
-
-  const data = items[selected]?.content;
+  }, []);
 
   return (
-    <ToggleContainer.Root classNames={chatMessagePanel} open={open} onChangeOpen={setOpen}>
-      <ToggleContainer.Header classNames={chatMessagePanelHeader}>
-        <TextCrawl key='status-roll' lines={items.map((item) => item.title)} />
+    <ToggleContainer.Root classNames='mbs-2 is-full rounded-sm' open={open} onChangeOpen={setOpen}>
+      <ToggleContainer.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]', chatMessagePanelContent]}>
+      <ToggleContainer.Content classNames='grid grid-cols-[32px_1fr]'>
         <NumericTabs ref={tabsRef} classNames='p-1' length={items.length} selected={selected} onSelect={handleSelect} />
         <Json
-          data={data}
-          classNames={chatMessageJson}
+          data={items[selected]?.content}
+          classNames='p-1 text-xs bg-transparent'
           replacer={{
             maxDepth: 3,
             maxArrayLen: 10,

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

@@ -2,27 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 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-testing';
+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 { withLayout, withTheme } from '@dxos/storybook-utils';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 
 import { Toolbox, type ToolboxProps } from './Toolbox';
 
 const DefaultStory = (props: ToolboxProps) => {
-  return <Toolbox {...props} classNames='w-[30rem] h-[15rem] rounded-sm border border-separator py-1' />;
+  return <Toolbox {...props} classNames='is-[30rem] bs-[15rem] rounded-sm border border-separator plb-1' />;
 };
 
 const meta = {
@@ -30,24 +28,22 @@ const meta = {
   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* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
         ChessPlugin(),
         MapPlugin(),
         TablePlugin(),
       ],
       capabilities,
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'centered',

package/src/components/Toolbox/Toolbox.tsx

@@ -5,13 +5,12 @@
 import React, { type FC, Fragment, useEffect, useState } from 'react';
 
 import { type Blueprint } from '@dxos/blueprints';
-import { type Ref } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
+import { type Database, type Ref } from '@dxos/echo';
+import { Function } from '@dxos/functions';
 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 { Filter, useQuery } from '@dxos/react-client/echo';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 import { type AiChatProcessor } from '../../processor';
@@ -19,9 +18,9 @@ import { ServiceType } from '../../types';
 
 export type ToolboxProps = ThemedClassName<{
   services?: { service: ServiceType }[];
-  functions?: FunctionType[];
+  functions?: Function.Function[];
   // TODO(burdon): Combine into single array.
-  blueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
+  blueprints?: readonly Blueprint.Blueprint[];
   activeBlueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
 }>;
 
@@ -33,10 +32,10 @@ export const Toolbox = ({ classNames, functions, services, blueprints, activeBlu
       {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)}` })),
+          items={blueprints.map(({ name, description, tools }) => ({
+            name,
+            description,
+            subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
           }))}
         />
       )}
@@ -77,11 +76,11 @@ const Section: FC<{
 }> = ({ title, items, striped }) => {
   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 px-2', striped && stripeClassNames);
+  const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs pli-2', striped && stripeClassNames);
 
   return (
     <div>
-      <h1 className='px-2 text-sm'>{title}</h1>
+      <h1 className='pli-2 text-sm'>{title}</h1>
       <div className={gridClassNames}>
         {items.map(({ name, description, subitems }, i) => (
           <Fragment key={i}>
@@ -105,13 +104,13 @@ const Section: FC<{
 };
 
 export type ToolboxContainerProps = ThemedClassName<{
-  space?: Space;
+  db?: Database.Database;
   processor?: AiChatProcessor;
 }>;
 
-export const ToolboxContainer = ({ classNames, space, processor }: ToolboxContainerProps) => {
+export const ToolboxContainer = ({ classNames, db, processor }: ToolboxContainerProps) => {
   // 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 +124,12 @@ export const ToolboxContainer = ({ classNames, space, processor }: ToolboxContai
   }, [services]);
 
   // Deployed functions.
-  const functions = useQuery(space, Filter.type(FunctionType));
+  const functions = useQuery(db, Filter.type(Function.Function));
 
   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 interface 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-bs-0 bs-6 is-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' size={4} />
+              <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' size={4} 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' size={4} />
+              <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' size={4} />
+            <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,83 @@
+//
+// 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 { Typewriter } from './Typewriter';
+
+const meta: Meta<typeof Typewriter> = {
+  title: 'plugins/plugin-assistant/Typewriter',
+  component: Typewriter,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+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 [rtEffect, setRtEffect] = 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 () => {
+        if (disposed) return;
+        const x = await rt.runtime();
+        if (disposed) return;
+        setRtEffect(x);
+      });
+      return () => {
+        disposed = true;
+        void rt.dispose();
+      };
+    }, []);
+
+    if (!rtEffect) {
+      return <div>...Loading</div>;
+    }
+
+    return (
+      <div className='w-[800px] p-4'>
+        <Typewriter initialContent={sampleText} runtime={rtEffect} />
+      </div>
+    );
+  },
+};

package/src/components/Typewriter/Typewriter.tsx

@@ -0,0 +1,54 @@
+//
+// 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 { DensityProvider, 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>
+      <DensityProvider density='fine'>
+        <div className='is-full bs-full grid overflow-hidden'>
+          <Editor.Root ref={editorRef}>
+            <Editor.Viewport>
+              <Editor.Content initialValue={initialContent} extensions={extension} />
+            </Editor.Viewport>
+          </Editor.Root>
+        </div>
+      </DensityProvider>
+    </ThemeProvider>
+  );
+};