@dxos/plugin-assistant 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/components/ChatThread/tool-widget-state.test.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { createMessage } from '#testing';
+
+import { rehydrateToolWidgetsFromMessages } from './tool-widget-state';
+
+describe('rehydrateToolWidgetsFromMessages', () => {
+  test('replays toolCall then toolResult in order', () => {
+    const calls: Array<{ id: string; kind: 'object' | 'function' }> = [];
+    const sink = {
+      updateWidget: (id: string, value: unknown) => {
+        calls.push({ id, kind: typeof value === 'function' ? 'function' : 'object' });
+      },
+    };
+
+    const messages = [
+      createMessage('assistant', [
+        { _tag: 'toolCall', toolCallId: 't1', name: 'foo', input: '{}', providerExecuted: false },
+        { _tag: 'toolResult', toolCallId: 't1', name: 'foo', result: '{}', providerExecuted: false },
+      ]),
+    ];
+
+    rehydrateToolWidgetsFromMessages(sink, messages);
+
+    expect(calls).toEqual([
+      { id: 't1', kind: 'object' },
+      { id: 't1', kind: 'function' },
+    ]);
+  });
+});

package/src/components/ChatThread/tool-widget-state.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ContentBlock, type Message } from '@dxos/types';
+import { type StateDispatch } from '@dxos/ui-editor';
+
+/**
+ * Minimal surface used to push tool call / result blocks into {@link MarkdownStreamController} widget state.
+ */
+export type ToolWidgetStateSink = {
+  updateWidget<T>(id: string, value: StateDispatch<T>): void;
+};
+
+/**
+ * Mirrors tool-related branches of {@link blockToMarkdown} so widget props stay in sync with message blocks.
+ */
+export const applyToolBlockToWidgetState = (context: ToolWidgetStateSink, block: ContentBlock.Any): void => {
+  switch (block._tag) {
+    case 'toolCall': {
+      context.updateWidget<{ blocks: ContentBlock.Any[] }>(block.toolCallId, {
+        blocks: [block],
+      });
+      break;
+    }
+    case 'toolResult': {
+      context.updateWidget<{ blocks: ContentBlock.Any[] }>(block.toolCallId, ({ blocks = [] } = { blocks: [] }) => ({
+        blocks: [...blocks, block],
+      }));
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+/**
+ * Re-applies tool widget state after a full document replace (e.g. {@link MarkdownStreamController.setContent}),
+ * which clears accumulated widget props via `xmlTagResetEffect`.
+ */
+export const rehydrateToolWidgetsFromMessages = (context: ToolWidgetStateSink, messages: Message.Message[]): void => {
+  for (const message of messages) {
+    for (const block of message.blocks) {
+      applyToolBlockToWidgetState(context, block);
+    }
+  }
+};

package/src/components/ChatThread/widgets/FallbackWidget.tsx

@@ -5,17 +5,19 @@
 import React from 'react';
 
 import { TogglePanel } from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { type XmlWidgetProps } from '@dxos/ui-editor';
 
 import { type MessageThreadContext } from '../sync';
 
 export const FallbackWidget = ({ _tag, ...props }: XmlWidgetProps<MessageThreadContext>) => {
   return (
-    <TogglePanel.Root classNames='rounded-xs'>
+    <TogglePanel.Root>
       <TogglePanel.Header classNames='bg-group-surface'>{_tag}</TogglePanel.Header>
       <TogglePanel.Content classNames='bg-modal-surface'>
-        <Json.Data classNames='p-2! text-sm' data={props} />
+        <TogglePanel.Viewport>
+          <JsonHighlighter classNames='p-2! text-sm' data={props} />
+        </TogglePanel.Viewport>
       </TogglePanel.Content>
     </TogglePanel.Root>
   );

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

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useRef } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { ReasoningWidget } from './ReasoningWidget';
+
+export type DefaultStoryProps = {
+  text: string;
+};
+
+// TODO(burdon): Generalize factory for DOM widgets.
+const DefaultStory = ({ text }: DefaultStoryProps) => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) {
+      return;
+    }
+
+    host.replaceChildren();
+    const widget = new ReasoningWidget(text, 0);
+    const dom = widget.toDOM();
+    host.appendChild(dom);
+    widget.updateDOM(dom);
+    return () => {
+      widget.destroy(dom);
+      host.replaceChildren();
+    };
+  }, [text]);
+
+  return <div ref={hostRef} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/components/ChatWidgets/ReasoningWidget',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'The user is asking about nested flex layouts and overflow. I should mention min-height 0 and grid track sizing.',
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    text: [
+      'Step 1: Identify the scroll container and ensure it participates in a definite height chain.',
+      'Step 2: Apply min-h-0 to flex children that should shrink and scroll.',
+      'Step 3: Prefer overflow-y-auto on the leaf viewport, not on every ancestor.',
+      'Step 4: Use min-h-0 on the scroll container to ensure it participates in a definite height chain.',
+      'Step 5: Use min-w-0 on the scroll container to ensure it participates in a definite width chain.',
+    ].join('\n\n'),
+  },
+};

package/src/components/ChatThread/widgets/ReasoningWidget.ts

@@ -6,6 +6,8 @@ import { WidgetType } from '@codemirror/view';
 
 import { Domino } from '@dxos/ui';
 
+import { styles } from './defaults';
+
 /**
  * Props used to derive a stable key for a reasoning block across CodeMirror widget rebuilds.
  * CodeMirror does not assign persistent IDs to widgets; streaming re-runs the factory each tick.
@@ -37,15 +39,20 @@ export class ReasoningWidget extends WidgetType {
 
   override toDOM() {
     return Domino.of('div')
-      .classNames('pt-2 pb-4')
+      .classNames(styles.padding)
       .append(
         Domino.of('div')
-          .classNames('relative overflow-hidden p-px rounded-sm border border-subdued-separator')
+          .classNames('relative overflow-hidden p-px', styles.border)
+          .attributes({ 'data-trail-container': '' })
           .append(
             Domino.of('div')
-              .classNames('relative z-10 bg-base-surface rounded-sm text-sm text-description p-2')
-              .attributes({ 'data-reasoning-text': '' })
-              .text(this.text),
+              .classNames('relative z-10 bg-base-surface rounded-sm text-sm text-subdued py-1')
+              .append(
+                Domino.of('div')
+                  .classNames('px-2 max-h-[5lh] overflow-y-auto dx-scrollbar-thin')
+                  .text(this.text)
+                  .attributes({ 'data-reasoning-text': '' }),
+              ),
             Domino.of('div').attributes({ 'data-id': this.#pos }),
           ),
       ).root;
@@ -57,7 +64,13 @@ export class ReasoningWidget extends WidgetType {
     // ancestor would remove `[data-id]`.
     dom.querySelector<HTMLElement>('[data-reasoning-text]')?.replaceChildren(this.text);
 
-    const trailHost = dom.querySelector<HTMLElement>('[data-id]');
+    // Recreate trail host if it was removed by a prior timeout (streaming paused > TRAIL_REMOVAL_DELAY_MS).
+    const container = dom.querySelector<HTMLElement>('[data-trail-container]');
+    let trailHost = container?.querySelector<HTMLElement>('[data-id]');
+    if (container && !trailHost) {
+      trailHost = Domino.of('div').attributes({ 'data-id': this.#pos }).root;
+      container.append(trailHost);
+    }
     if (trailHost?.childElementCount === 0) {
       trailHost.append(...createTrailLayers());
     }

package/src/components/ChatThread/widgets/ReferenceWidget.ts

@@ -6,6 +6,8 @@ import { WidgetType } from '@codemirror/view';
 
 import { Domino } from '@dxos/ui';
 
+import { styles } from './defaults';
+
 export class ReferenceWidget extends WidgetType {
   constructor(
     private text: string,
@@ -20,7 +22,7 @@ export class ReferenceWidget extends WidgetType {
 
   override toDOM() {
     return Domino.of('div')
-      .classNames('pt-2 pb-2')
+      .classNames(styles.padding)
       .append(
         Domino.of('dx-anchor' as any)
           .classNames('dx-tag--anchor')

package/src/components/ChatThread/widgets/SelectWidget.ts

@@ -6,6 +6,8 @@ import { WidgetType } from '@codemirror/view';
 
 import { Domino } from '@dxos/ui';
 
+import { styles } from './defaults';
+
 /**
  * Simple prompt widget.
  */
@@ -24,7 +26,7 @@ export class SelectWidget extends WidgetType {
   override toDOM() {
     return Domino.of('div')
       .attributes({ role: 'group' })
-      .classNames('flex flex-wrap pt-2 pb-2 gap-1')
+      .classNames(styles.padding, 'flex flex-wrap gap-1')
       .append(
         ...this.options.map((option) =>
           Domino.of('button')

package/src/components/ChatThread/widgets/StatsWidget.ts

@@ -6,6 +6,8 @@ import { WidgetType } from '@codemirror/view';
 
 import { Domino } from '@dxos/ui';
 
+import { styles } from './defaults';
+
 /**
  * Simple stats widget.
  */
@@ -19,7 +21,7 @@ export class StatsWidget extends WidgetType {
   }
 
   override toDOM() {
-    return Domino.of('div').classNames('pt-2 pb-4 text-sm text-placeholder').text(this.text).root;
+    return Domino.of('div').classNames(styles.padding, 'text-sm text-placeholder').text(this.text).root;
   }
 
   override updateDOM(dom: HTMLElement) {

package/src/components/ChatThread/widgets/StatusWidget.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { WidgetType } from '@codemirror/view';
+
+import { Domino } from '@dxos/ui';
+
+import { styles } from './defaults';
+
+/**
+ * AI status widget.
+ */
+export class StatusWidget extends WidgetType {
+  constructor(private readonly text: string) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this.text === other.text;
+  }
+
+  override toDOM() {
+    return Domino.of('div')
+      .classNames(styles.padding)
+      .append(
+        Domino.of('div')
+          .classNames('relative overflow-hidden rounded-sm')
+          .append(
+            Domino.of('div')
+              .classNames('grid grid-cols-[24px_1fr] gap-x-0.5 gap-y-0 items-start px-0.5 py-0.5 text-placeholder')
+              .append(
+                Domino.of('div')
+                  .classNames('flex h-5 w-full shrink-0 items-center justify-center self-start')
+                  .append(Domino.of('span').classNames('block size-1.5 shrink-0 rounded-full bg-current opacity-45')),
+                Domino.of('div')
+                  .classNames('relative min-w-0')
+                  .append(
+                    Domino.of('div')
+                      .classNames('relative z-10 rounded-sm text-sm leading-5')
+                      .attributes({ 'data-status-text': '' })
+                      .text(this.text),
+                  ),
+              ),
+          ),
+      ).root;
+  }
+
+  override updateDOM(dom: HTMLElement) {
+    dom.querySelector<HTMLElement>('[data-status-text]')?.replaceChildren(this.text);
+    return true;
+  }
+}

package/src/components/ChatThread/widgets/SuggestionWidget.ts

@@ -19,7 +19,7 @@ export class SuggestionWidget extends WidgetType {
   }
 
   override toDOM() {
-    // NOTE: Container must have `dx-size-container` to support cqi.
+    // NOTE: Container must have `dx-inline-size-container` (or `dx-size-container`) to support cqi.
     return Domino.of('span')
       .classNames(mx('inline-flex max-w-[calc(100cqi-8px)] my-1 pe-2 overflow-hidden'))
       .append(

package/src/components/ChatThread/widgets/SummaryWidget.tsx

@@ -11,17 +11,16 @@ import { type XmlWidgetProps } from '@dxos/ui-editor';
 import { meta } from '#meta';
 
 import { MessageThreadContext } from '../sync';
+import { styles } from './defaults';
 
 export const SummaryWidget = ({ children }: XmlWidgetProps<MessageThreadContext>) => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <TogglePanel.Root classNames='border border-separator rounded-sm'>
+    <TogglePanel.Root classNames={styles.border}>
       <TogglePanel.Header classNames='text-sm bg-group-surface'>{t('summary.label')}</TogglePanel.Header>
       <TogglePanel.Content>
-        <div role='none' className='p-1 text-sm text-description'>
-          {children}
-        </div>
+        <div className='p-1 text-sm text-subdued'>{children}</div>
       </TogglePanel.Content>
     </TogglePanel.Root>
   );

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

@@ -0,0 +1,55 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ContentBlock } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { ToolWidget, type ToolWidgetProps } from './ToolWidget';
+
+const baseWidgetProps = {
+  _tag: 'toolCall',
+  range: { from: 0, to: 1 },
+} satisfies Pick<ToolWidgetProps, '_tag' | 'range'>;
+
+const toolCallAndResult: ContentBlock.Any[] = [
+  {
+    _tag: 'toolCall',
+    toolCallId: 'tc-story-1',
+    name: 'example_tool',
+    input: JSON.stringify({ query: 'status', limit: 10 }),
+    providerExecuted: false,
+  },
+  {
+    _tag: 'toolResult',
+    toolCallId: 'tc-story-1',
+    name: 'example_tool',
+    result: JSON.stringify({ ok: true, rows: [{ id: 1 }, { id: 2 }] }),
+    providerExecuted: false,
+  },
+];
+
+const meta = {
+  title: 'plugins/plugin-assistant/components/ChatWidgets/ToolWidget',
+  component: ToolWidget,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ToolWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    ...baseWidgetProps,
+    blocks: toolCallAndResult,
+  },
+};

package/src/components/ChatThread/widgets/ToolWidget.tsx

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useTranslation } from '@dxos/react-ui';
 import { NumericTabs, TextCrawl, TogglePanel, type TogglePanelRootProps } from '@dxos/react-ui-components';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { JsonHighlighter } 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';
@@ -110,6 +110,11 @@ const ToolPanel = ({ items, onChangeOpen }: ToolPanelProps) => {
   const [selected, setSelected] = useState(0);
   const [open, setOpen] = useState(false);
 
+  // Clamp selected to avoid out-of-bounds after items shrink.
+  useEffect(() => {
+    setSelected((prev) => Math.min(prev, Math.max(0, items.length - 1)));
+  }, [items.length]);
+
   useEffect(() => {
     onChangeOpen?.(open);
     if (open) {
@@ -122,21 +127,29 @@ const ToolPanel = ({ items, onChangeOpen }: ToolPanelProps) => {
   }, []);
 
   return (
-    <TogglePanel.Root classNames='w-full rounded-xs border border-subdued-separator' open={open} onChangeOpen={setOpen}>
+    <TogglePanel.Root open={open} onChangeOpen={setOpen}>
       <TogglePanel.Header classNames='text-sm text-placeholder'>
         <TextCrawl key='status-roll' lines={items.map((item) => item.title)} autoAdvance greedy />
       </TogglePanel.Header>
-      <TogglePanel.Content classNames='grid grid-cols-[32px_1fr]'>
-        <NumericTabs ref={tabsRef} classNames='p-1' length={items.length} selected={selected} onSelect={handleSelect} />
-        <Json.Data
-          data={items[selected]?.content}
-          classNames='p-1 text-xs bg-transparent'
-          replacer={{
-            maxDepth: 3,
-            maxArrayLen: 10,
-            maxStringLen: 128,
-          }}
-        />
+      <TogglePanel.Content>
+        <TogglePanel.Viewport classNames='grid grid-cols-[32px_1fr]'>
+          <NumericTabs
+            ref={tabsRef}
+            classNames='p-1'
+            length={items.length}
+            selected={selected}
+            onSelect={handleSelect}
+          />
+          <JsonHighlighter
+            data={items[selected]?.content}
+            classNames='p-1 text-xs bg-transparent'
+            replacer={{
+              maxDepth: 3,
+              maxArrayLen: 10,
+              maxStringLen: 128,
+            }}
+          />
+        </TogglePanel.Viewport>
       </TogglePanel.Content>
     </TogglePanel.Root>
   );

package/src/components/ChatThread/widgets/defaults.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export const styles = {
+  padding: 'my-4',
+  border: 'border border-subdued-separator rounded-sm',
+};

package/src/components/ChatThread/widgets/index.ts

@@ -3,11 +3,11 @@
 //
 
 export * from './FallbackWidget';
-export * from './PromptWidget';
 export * from './ReasoningWidget';
 export * from './ReferenceWidget';
 export * from './SelectWidget';
 export * from './StatsWidget';
+export * from './StatusWidget';
 export * from './SummaryWidget';
 export * from './SuggestionWidget';
 export * from './ToolWidget';

package/src/components/ProcessTree/ProcessTree.stories.tsx

@@ -6,24 +6,14 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Option from 'effect/Option';
 
 import { Process } from '@dxos/functions-runtime';
+import { log } from '@dxos/log';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ProcessTree } from './ProcessTree';
+import { makeProcess } from '#testing';
 
-const makeProcess = (
-  overrides: Partial<Process.Info> & Pick<Process.Info, 'pid' | 'state'> & { name: string },
-): Process.Info => ({
-  parentPid: null,
-  key: `test.process.${overrides.name}`,
-  params: { name: overrides.name, target: null },
-  error: null,
-  startedAt: Date.now() - 10_000,
-  completedAt: Option.none(),
-  metrics: { wallTime: 0, inputCount: 0, outputCount: 0 },
-  ...overrides,
-});
+import { ProcessTree } from './ProcessTree';
 
-const seedProcesses: Process.Info[] = [
+const processes: Process.Info[] = [
   makeProcess({
     pid: Process.ID.make('97793611-815e-4a67-bc04-60fa67b2c987'),
     name: 'Trigger watcher',
@@ -73,7 +63,7 @@ const seedProcesses: Process.Info[] = [
 const meta: Meta<typeof ProcessTree> = {
   title: 'plugins/plugin-assistant/components/ProcessTree',
   component: ProcessTree,
-  decorators: [withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' }), withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' })],
 } satisfies Meta<typeof ProcessTree>;
 
 export default meta;
@@ -82,28 +72,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    processes: seedProcesses,
-  },
-};
-
-export const AllRunning: Story = {
-  args: {
-    processes: [
-      makeProcess({
-        pid: Process.ID.make('1344bac8-745b-44a6-9af6-dc19509a7844'),
-        name: 'Agent alpha',
-        state: Process.State.RUNNING,
-      }),
-      makeProcess({
-        pid: Process.ID.make('b7c9787a-6705-47dc-a197-d37f1adfa338'),
-        name: 'Agent beta',
-        state: Process.State.RUNNING,
-      }),
-      makeProcess({
-        pid: Process.ID.make('43493533-a94c-4072-b18f-c0e0fd806bf5'),
-        name: 'Agent gamma',
-        state: Process.State.RUNNING,
-      }),
-    ],
+    processes: processes,
+    onProcessSelect: (process) => {
+      log.info('select', process);
+    },
+    onProcessTerminate: (process) => {
+      log.info('terminate', process);
+    },
   },
 };