@dxos/plugin-assistant 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/src/components/ChatThread/ToolBlock.tsx

@@ -2,88 +2,111 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
-
-import { type AgentStatus, type Tool } from '@dxos/ai';
-import { log } from '@dxos/log';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { NumericTabs, StatusRoll, ToggleContainer } from '@dxos/react-ui-components';
-import { type JsonProps, Json as NativeJson } from '@dxos/react-ui-syntax-highlighter';
-import { type DataType } from '@dxos/schema';
+import { type AiTool } from '@effect/ai';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { type AgentStatus } from '@dxos/ai';
+import { useTranslation } from '@dxos/react-ui';
+import { NumericTabs, TextCrawl, ToggleContainer } from '@dxos/react-ui-components';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { type ContentBlock, type DataType } from '@dxos/schema';
 import { isNonNullable, isNotFalsy } from '@dxos/util';
+import { safeParseJson } from '@dxos/util';
+
+import { meta } from '../../meta';
+
+import { styles } from './ChatMessage';
 
 export const isToolMessage = (message: DataType.Message) => {
   return message.blocks.some((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
 };
 
-const getToolName = (tool: Tool) => {
-  return tool.namespace && tool.function ? `${tool.namespace}:${tool.function}` : tool.name.split('_').pop();
+export type AiToolProvider = () => readonly AiTool.Any[];
+
+export type ToolBlockProps = {
+  message: DataType.Message;
+  toolProvider: AiToolProvider;
 };
 
-const getToolCaption = (tool: Tool | undefined, status: AgentStatus | undefined) => {
-  if (!tool) {
-    return 'Calling tool...';
-  }
+// TODO(burdon): Pass in blocks.
+export const ToolBlock = ({ message, toolProvider }: ToolBlockProps) => {
+  const { t } = useTranslation(meta.id);
+  const { blocks = [] } = message;
 
-  return status?.message ?? tool.caption ?? `Calling ${getToolName(tool)}...`;
-};
+  const getToolCaption = (tool?: AiTool.Any, status?: AgentStatus) => {
+    if (!tool) {
+      return t('calling tool label');
+    }
 
-export type ToolBlockProps = ThemedClassName<{
-  message: DataType.Message;
-  tools?: Tool[];
-}>;
+    return status?.message ?? tool.description ?? [t('calling label'), tool.name].join(' ');
+  };
 
-export const ToolBlock: FC<ToolBlockProps> = ({ classNames, message, tools }) => {
-  const { blocks = [] } = message;
+  const items = useMemo(() => {
+    let lastToolCall: { tool: AiTool.Any | undefined; block: ContentBlock.ToolCall } | undefined;
+    const tools = toolProvider();
+    return blocks
+      .filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult' || block._tag === 'summary')
+      .map((block) => {
+        switch (block._tag) {
+          case 'toolCall': {
+            if (block.pending && lastToolCall?.block.toolCallId === block.toolCallId) {
+              return null;
+            }
+
+            const tool = tools.find((tool) => tool.name === block.name);
+            lastToolCall = { tool, block };
+            return {
+              title: getToolCaption(lastToolCall?.tool),
+              content: {
+                ...block,
+                input: safeParseJson(block.input),
+              },
+            };
+          }
 
-  let request: { tool: Tool | undefined; block: any } | undefined;
-  const toolBlocks = blocks.filter((block) => block._tag === 'toolCall' || block._tag === 'toolResult');
-  const items = toolBlocks
-    .map((block) => {
-      switch (block._tag) {
-        case 'toolCall': {
-          // TODO(burdon): Skip these updates?
-          if (block.pending && request?.block.toolCallId === block.toolCallId) {
-            return null;
+          case 'toolResult': {
+            // TODO(burdon): Parse error type.
+            if (block.error) {
+              return {
+                title: t('error label'),
+                content: block,
+              };
+            }
+
+            const title = getToolCaption(lastToolCall?.tool ?? t('tool result label'));
+            lastToolCall = undefined;
+            return {
+              title,
+              content: {
+                ...block,
+                result: safeParseJson(block.result),
+              },
+            };
           }
 
-          request = { tool: tools?.find((tool) => tool.name === block.name), block };
-          return {
-            title: getToolCaption(request.tool, undefined), // block.status), // TODO(burdon): Get status?
-            block,
-          };
-        }
+          case 'summary': {
+            if (!lastToolCall) {
+              return null;
+            }
 
-        case 'toolResult': {
-          if (!request) {
-            log.warn('unexpected message', { block });
-            return { title: 'Error', block };
+            return {
+              title: t('summary label'),
+              content: block,
+            };
           }
-
-          return {
-            title: `${getToolCaption(request.tool, undefined)} (Success)`,
-            block,
-          };
         }
+      })
+      .filter(isNonNullable);
+  }, [blocks]);
 
-        default: {
-          request = undefined;
-          return {
-            title: 'Error',
-            block,
-          };
-        }
-      }
-    })
-    .filter(isNonNullable);
+  return <ToolContainer items={items} />;
+};
 
-  return <ToolContainer classNames={classNames} items={items} />;
+type ToolContainerParams = {
+  items: { title: string; content: any }[];
 };
 
-export const ToolContainer: FC<ThemedClassName<{ items: { title: string; block: any }[] }>> = ({
-  classNames,
-  items,
-}) => {
+export const ToolContainer = ({ items }: ToolContainerParams) => {
   const tabsRef = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState(0);
   const [open, setOpen] = useState(false);
@@ -94,28 +117,31 @@ export const ToolContainer: FC<ThemedClassName<{ items: { title: string; block:
   }, [open]);
 
   const handleSelect = (index: number) => {
-    if (index === selected) {
-      setOpen(false);
-    } else {
-      setSelected(index);
-    }
+    setSelected(index);
   };
 
   const title = useMemo(() => {
     const lines = items.map((item) => item.title).filter(isNotFalsy);
-    return <StatusRoll key='status-roll' lines={lines} duration={1_000} autoAdvance />;
+    return <TextCrawl key='status-roll' lines={lines} autoAdvance />;
   }, [items]);
 
+  const data = items[selected].content;
+
   return (
-    <ToggleContainer classNames={['flex flex-col', classNames]} title={title} open={open} onChangeOpen={setOpen}>
-      <div className='w-full grid grid-cols-[32px_1fr]'>
-        <NumericTabs ref={tabsRef} length={items.length} selected={selected} onSelect={handleSelect} />
-        <Json data={items[selected].block} />
-      </div>
-    </ToggleContainer>
+    <ToggleContainer.Root classNames={styles.panel} open={open} onChangeOpen={setOpen}>
+      <ToggleContainer.Header classNames={styles.panelHeader} title={title} />
+      <ToggleContainer.Content classNames={['grid grid-cols-[32px_1fr]', styles.panelContent]}>
+        <NumericTabs ref={tabsRef} classNames='p-1' length={items.length} selected={selected} onSelect={handleSelect} />
+        <Json
+          data={data}
+          classNames={styles.json}
+          replacer={{
+            maxDepth: 3,
+            maxArrayLen: 10,
+            maxStringLen: 128,
+          }}
+        />
+      </ToggleContainer.Content>
+    </ToggleContainer.Root>
   );
 };
-
-export const Json = ({ data }: Pick<JsonProps, 'data'>) => (
-  <NativeJson data={data} classNames='!p-1 text-xs bg-transparent' />
-);

package/src/components/ChatThread/reducers.ts

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ContentBlock, type DataType } from '@dxos/schema';
+
+type Reducer<R, I> = (acc: R, value: I, idx: number) => R;
+
+/**
+ * Reducer that collapses related message blocks into single messages.
+ * For example, combines tool request/response pairs into a single message.
+ *
+ * Typical order:
+ * - message 0
+ *  - text
+ * - message 1
+ *  - text
+ *  - toolCall
+ *  - summary
+ * - message 2
+ *  - toolResult
+ * - message 3
+ *  - text
+ *  - summary
+ *
+ * Coverts to:
+ * - message 0
+ *  - text
+ * - message 1
+ *  - text
+ * - message 2
+ *  - toolCall
+ *  - toolResult
+ *  - summary
+ * - message 3
+ *  - text
+ *  - summary
+ */
+export const reduceMessages: Reducer<
+  {
+    messages: DataType.Message[];
+    current?: DataType.Message;
+    toolBlock?: boolean;
+    assistantMessages?: DataType.Message[];
+  },
+  DataType.Message
+> = ({ messages, current, toolBlock, assistantMessages = [] }, message) => {
+  // Treat tool calls as assistant messages.
+  let assistant = message?.sender.role === 'assistant';
+  let i = 0;
+  for (const block of message.blocks) {
+    switch (block._tag) {
+      // TODO(burdon): Preserve call tool title.
+      case 'toolCall': {
+        assistant = true;
+        if (!toolBlock) {
+          current = {
+            ...message,
+            id: [message.id, i++].join('_'),
+            blocks: [block],
+          };
+          messages.push(current);
+          toolBlock = true;
+        } else {
+          current!.blocks.push(block);
+        }
+        break;
+      }
+
+      case 'toolResult': {
+        assistant = true;
+        if (toolBlock) {
+          current!.blocks.push(block);
+        }
+        break;
+      }
+
+      case 'summary': {
+        assistant = true;
+        if (toolBlock) {
+          current!.blocks.push(block);
+        } else {
+          const summary = reduceSummary([...assistantMessages, message]);
+          current!.blocks.push(summary);
+        }
+        break;
+      }
+
+      default: {
+        assistant = message.sender.role === 'assistant';
+        current = {
+          ...message,
+          id: [message.id, i++].join('_'),
+          blocks: [block],
+        };
+        messages.push(current);
+        toolBlock = false;
+        break;
+      }
+    }
+  }
+
+  return {
+    messages,
+    current,
+    toolBlock,
+    assistantMessages: assistant ? [...assistantMessages, message] : undefined,
+  };
+};
+
+/**
+ * Accumulate token counts from all summary blocks in pending messages.
+ */
+const reduceSummary = (messages: DataType.Message[]): ContentBlock.Summary => {
+  let start: number | undefined;
+  return messages.reduce<ContentBlock.Summary>(
+    (acc, msg) => {
+      const time = new Date(msg.created).getTime();
+      if (!start) {
+        start = time;
+      }
+      msg.blocks.forEach((block) => {
+        switch (block._tag) {
+          case 'toolCall': {
+            acc.toolCalls = (acc.toolCalls ?? 0) + 1;
+            break;
+          }
+          case 'summary': {
+            acc.model = block.model;
+            if (block.usage) {
+              acc.message = block.message;
+              acc.usage = {
+                inputTokens: (acc.usage?.inputTokens ?? 0) + (block.usage.inputTokens ?? 0),
+                outputTokens: (acc.usage?.outputTokens ?? 0) + (block.usage.outputTokens ?? 0),
+                totalTokens: (acc.usage?.totalTokens ?? 0) + (block.usage.totalTokens ?? 0),
+              };
+              acc.duration = time - (start ?? time);
+            }
+            break;
+          }
+        }
+      });
+
+      return acc;
+    },
+    {
+      _tag: 'summary',
+      duration: 0,
+    } satisfies ContentBlock.Summary,
+  );
+};

package/src/components/PromptSettings.tsx

@@ -62,6 +62,7 @@ export const PromptSettings = ({ template }: { template: Template.Template }) =>
                   </Select.Option>
                 ))}
               </Select.Viewport>
+              <Select.Arrow />
             </Select.Content>
           </Select.Portal>
         </Select.Root> */}

package/src/components/SequenceContainer.tsx

@@ -4,19 +4,18 @@
 
 import { type EditorView } from '@codemirror/view';
 import JSON5 from 'json5';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import { ToolRegistry } from '@dxos/ai';
-import { getSpace } from '@dxos/client/echo';
 import { type Sequence, type SequenceDefinition } from '@dxos/conductor';
 import { Key } from '@dxos/echo';
 import { Toolbar, useTranslation } from '@dxos/react-ui';
 import { useSelectionManager } from '@dxos/react-ui-attention';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { SequenceEditor } from './SequenceEditor';
 import { meta } from '../meta';
 
+import { SequenceEditor } from './SequenceEditor';
+
 // TODO(burdon): Move to config.
 export const EXA_API_KEY = '9c7e17ff-0c85-4cd5-827a-8b489f139e03';
 
@@ -44,29 +43,29 @@ export const SequenceContainer = ({ sequence }: { sequence: Sequence }) => {
   const editorRef = useRef<EditorView | undefined>(undefined);
 
   // TODO(burdon): Factor out.
-  const toolRegistry = useMemo(() => {
-    const space = getSpace(sequence);
-    if (!space) {
-      return;
-    }
-
-    // TODO(burdon): How should the queue be created?
-    // eslint-disable-next-line no-unused-vars
-    const _queue = space.queues.create();
-
-    return new ToolRegistry([
-      // createExaTool({ apiKey: EXA_API_KEY }),
-      // createLocalSearchTool(space.db, queue),
-      // createGraphWriterTool({
-      //   db: space.db,
-      //   queue,
-      //   schema: [], // TODO(burdon): Get schema from client/sequence?
-      //   onDone: async (objects) => {
-      //     await queue.append(objects);
-      //   },
-      // }),
-    ]);
-  }, [sequence]);
+  // const toolRegistry = useMemo(() => {
+  //   const space = getSpace(sequence);
+  //   if (!space) {
+  //     return;
+  //   }
+
+  //   // TODO(burdon): How should the queue be created?
+  //   // eslint-disable-next-line no-unused-vars
+  //   const _queue = space.queues.create();
+
+  //   return new ToolRegistry([
+  //     // createExaTool({ apiKey: EXA_API_KEY }),
+  //     // createLocalSearchTool(space.db, queue),
+  //     // createGraphWriterTool({
+  //     //   db: space.db,
+  //     //   queue,
+  //     //   schema: [], // TODO(burdon): Get schema from client/sequence?
+  //     //   onDone: async (objects) => {
+  //     //     await queue.append(objects);
+  //     //   },
+  //     // }),
+  //   ]);
+  // }, [sequence]);
 
   const formatAndSave = useCallback((): SequenceDefinition | undefined => {
     if (!sequence) {
@@ -116,7 +115,7 @@ export const SequenceContainer = ({ sequence }: { sequence: Sequence }) => {
     // }
     // const machine = new SequenceMachine(toolRegistry, sequence).setLogger(new QueueLogger(sequence));
     // await machine.runToCompletion({ aiClient: aiClient.value, input });
-  }, [sequence, formatAndSave, selectionManager, toolRegistry]);
+  }, [sequence, formatAndSave, selectionManager]);
 
   return (
     <StackItem.Content toolbar>

package/src/components/SequenceEditor/SequenceEditor.stories.tsx

@@ -4,22 +4,23 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { SequenceEditor } from './SequenceEditor';
 import { RESEARCH_SEQUENCE_DEFINITION } from '../../testing';
 import { translations } from '../../translations';
 
-const meta: Meta<typeof SequenceEditor> = {
+import { SequenceEditor } from './SequenceEditor';
+
+const meta = {
   title: 'plugins/plugin-assistant/SequenceEditor',
   component: SequenceEditor,
   decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'mli-auto max-is-[50rem] justify-center' })],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof SequenceEditor>;
 
 export default meta;
 

package/src/components/SequenceEditor/SequenceEditor.tsx

@@ -6,7 +6,7 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 
 import { SequenceDefinition } from '@dxos/conductor';
 import { Type } from '@dxos/echo';
-import { useThemeContext, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
 import {
   type EditorView,
   createBasicExtensions,

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

@@ -4,24 +4,25 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { createSystemPrompt } from '@dxos/assistant';
 import { Blueprint, Template } from '@dxos/blueprints';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { trim } from '@dxos/util';
 
-import { TemplateEditor, type TemplateEditorProps } from './TemplateEditor';
 import { translations } from '../../translations';
 
+import { TemplateEditor, type TemplateEditorProps } from './TemplateEditor';
+
 const TEMPLATE = trim`
   {{! System Prompt }}
   
   You are a machine that is an expert chess player.
-  The move history of the current game is: {{history}}
+  The move history of the current game is: {{history}}.
   If asked to suggest a move explain why it is a good move.
 
   {{#each artifacts}}
@@ -37,33 +38,45 @@ const DefaultStory = ({ source }: TemplateEditorProps & { source: string }) => {
   const client = useClient();
   const [blueprint] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(Blueprint.make({ name: 'Test', instructions: { source } }));
+    return space.db.add(
+      Blueprint.make({
+        key: 'example.com/blueprint/test',
+        name: 'Test',
+        instructions: Template.make({ source }),
+      }),
+    );
   });
 
-  return <TemplateEditor id={blueprint.id} template={blueprint.instructions} />;
+  return (
+    <TemplateEditor
+      classNames='bg-baseSurface max-is-prose is-full'
+      id={blueprint.id}
+      template={blueprint.instructions}
+    />
+  );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'plugins/plugin-assistant/TemplateEditor',
-  component: TemplateEditor,
+  component: TemplateEditor as any,
   render: DefaultStory,
   decorators: [
     withClientProvider({
+      types: [Blueprint.Blueprint],
       createIdentity: true,
       createSpace: true,
-      types: [Template.Template],
     }),
-    withLayout({ fullscreen: true, Container: ColumnContainer }),
+    withLayout({ fullscreen: true, classNames: 'justify-center bg-deckSurface' }),
     withTheme,
   ],
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = Meta<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {