@dxos/plugin-assistant 0.10.0 → 0.11.0

package/src/components/Chat/thread.test.ts

@@ -0,0 +1,127 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Array from 'effect/Array';
+import { describe, test } from 'vitest';
+
+import { Feed, Obj } from '@dxos/echo';
+import { Message } from '@dxos/types';
+
+import { byAppendOrder, projectThread, resolveRewind } from './thread';
+
+describe('byAppendOrder', () => {
+  test('orders by feed position when it discriminates', ({ expect }) => {
+    const a = positioned(message('a'), 2);
+    const b = positioned(message('b'), 1);
+    expect(sortText([a, b])).toEqual(['b', 'a']);
+  });
+
+  // Positions are assigned by the server: with no position authority every block reports `+Infinity`,
+  // and a query returns an unordered set, so position alone leaves them arbitrary.
+  test('falls back to created when positions are absent', ({ expect }) => {
+    const first = message('first');
+    const second = message('second');
+    expect(sortText([second, first])).toEqual(['first', 'second']);
+  });
+
+  test('an unpositioned message sorts after a positioned one', ({ expect }) => {
+    const acknowledged = positioned(message('acknowledged'), 7);
+    const local = message('local');
+    expect(sortText([local, acknowledged])).toEqual(['acknowledged', 'local']);
+  });
+});
+
+describe('projectThread', () => {
+  test('a feed with no lineage projects to itself', ({ expect }) => {
+    const messages = [message('one'), message('two'), message('three')];
+    expect(text(projectThread({ feedMessages: messages }).messages)).toEqual(['one', 'two', 'three']);
+  });
+
+  test('pending messages are appended and deduped against the feed', ({ expect }) => {
+    const persisted = message('persisted');
+    const pending = message('pending');
+    const { messages } = projectThread({
+      feedMessages: [persisted, pending],
+      pendingMessages: [pending],
+    });
+    expect(text(messages)).toEqual(['persisted', 'pending']);
+  });
+
+  test('lineage hides the turns a fork abandoned', ({ expect }) => {
+    const first = message('first');
+    const answer = message('answer');
+    const abandoned = message('abandoned');
+    const retry = message('retry');
+    Feed.setParent(retry, answer);
+
+    const { messages } = projectThread({ feedMessages: [first, answer, abandoned, retry] });
+    expect(text(messages)).toEqual(['first', 'answer', 'retry']);
+  });
+
+  // Edit-and-resend: rewinding to a prompt discards the prompt and everything after it, so the user can
+  // revise the question rather than stare at it unanswered.
+  test('a pending rewind truncates to what precedes it', ({ expect }) => {
+    const first = message('first');
+    const answer = message('answer');
+    const asked = message('asked');
+    const replied = message('replied');
+
+    const { messages } = projectThread({
+      feedMessages: [first, answer, asked, replied],
+      rewindFrom: asked.id,
+    });
+    expect(text(messages)).toEqual(['first', 'answer']);
+  });
+
+  test('rewinding to the first turn empties the thread', ({ expect }) => {
+    const first = message('first');
+    const answer = message('answer');
+    const { messages } = projectThread({ feedMessages: [first, answer], rewindFrom: first.id });
+    expect(messages).toEqual([]);
+  });
+
+  test('a stale rewind pointer falls back to the feed lineage', ({ expect }) => {
+    const first = message('first');
+    const answer = message('answer');
+    const { messages } = projectThread({
+      feedMessages: [first, answer],
+      rewindFrom: message('never replicated').id,
+    });
+    expect(text(messages)).toEqual(['first', 'answer']);
+  });
+
+  test('an empty feed projects nothing', ({ expect }) => {
+    expect(projectThread({ feedMessages: [] }).messages).toEqual([]);
+  });
+});
+
+describe('resolveRewind', () => {
+  test('returns the discard point and the prompt text to restore', ({ expect }) => {
+    const prompt = message('what is a feed?');
+    const resolved = resolveRewind([message('earlier'), prompt], prompt.id);
+    expect(resolved).toEqual({ rewindFrom: prompt.id, text: 'what is a feed?' });
+  });
+
+  test('an absent message resolves to nothing, so a stale click is a no-op', ({ expect }) => {
+    expect(resolveRewind([message('only')], message('absent').id)).toBeUndefined();
+  });
+});
+
+let clock = 0;
+
+const message = (text: string, sender: 'user' | 'assistant' = 'user') =>
+  Message.make({ created: new Date(clock++).toISOString(), sender, blocks: [{ _tag: 'text', text }] });
+
+/** Stamps the queue position a position authority would have assigned. */
+const positioned = (message: Message.Message, position: number) => {
+  Obj.update(message, (message) => {
+    Obj.getMeta(message).keys.push({ source: Feed.POSITION_KEY, id: String(position) });
+  });
+  return message;
+};
+
+const text = (messages: readonly Message.Message[]) =>
+  messages.map((message) => (message.blocks[0] as { text: string }).text);
+
+const sortText = (messages: Message.Message[]) => text(Array.sort(messages, byAppendOrder));

package/src/components/Chat/thread.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Array from 'effect/Array';
+import * as Order from 'effect/Order';
+
+import { Feed } from '@dxos/echo';
+import { Message } from '@dxos/types';
+
+/**
+ * Append order for {@link Feed.history}, which walks lineage positionally rather than by time.
+ *
+ * Position is authoritative but server-assigned: locally-written blocks — and every block until a
+ * position authority acknowledges them — report `+Infinity`, and a query returns an unordered set, so
+ * position alone leaves them in arbitrary order. `created` breaks those ties: sound locally, where one
+ * conversation's messages come off one clock, and consulted only when position cannot decide.
+ */
+export const byAppendOrder: Order.Order<Message.Message> = (a, b) => {
+  const positionA = Feed.getPosition(a);
+  const positionB = Feed.getPosition(b);
+  if (positionA !== positionB) {
+    return positionA < positionB ? -1 : 1;
+  }
+  return a.created < b.created ? -1 : a.created > b.created ? 1 : 0;
+};
+
+export type ThreadProjection = {
+  /** The turns to render, in append order. */
+  messages: Message.Message[];
+};
+
+/**
+ * The turns a thread should render: those reachable from the feed's head, so a rewind's abandoned turns
+ * disappear from the view exactly as they disappear from the model's history.
+ *
+ * A pending `rewindFrom` truncates the view to what precedes it — the rewound-to prompt and everything
+ * after it, since the point of rewinding to a prompt is to re-ask it. The pointer is cleared by the next
+ * append (which turns the fork into lineage), so a rewind that is never followed through stays visible
+ * as a truncated thread with the prompt restored in the composer.
+ */
+export const projectThread = ({
+  feedMessages,
+  pendingMessages = [],
+  rewindFrom,
+}: {
+  feedMessages: readonly Message.Message[];
+  /** Messages produced by the current turn that are not in the feed yet. */
+  pendingMessages?: readonly Message.Message[];
+  /** Earliest message a pending rewind discards. */
+  rewindFrom?: string;
+}): ThreadProjection => {
+  const all = Array.dedupeWith([...feedMessages, ...pendingMessages], ({ id: a }, { id: b }) => a === b);
+  const sorted = Array.sort(all, byAppendOrder);
+
+  if (rewindFrom !== undefined) {
+    const index = sorted.findIndex((message) => message.id === rewindFrom);
+    if (index === 0) {
+      // Rewound to the first turn: nothing precedes it.
+      return { messages: [] };
+    }
+    if (index > 0) {
+      return { messages: Feed.history(sorted, { head: sorted[index - 1].id }).items };
+    }
+    // Not present — a stale pointer (e.g. the message never replicated); fall through to the feed's
+    // own lineage rather than blanking the thread.
+  }
+
+  return { messages: Feed.history(sorted).items };
+};
+
+/**
+ * What a rewind to `messageId` implies: the messages to discard from, and the prompt text to restore so
+ * the user can edit and resend it.
+ *
+ * Returns `undefined` when the message is absent, so a stale click is a no-op rather than a truncation.
+ */
+export const resolveRewind = (
+  messages: readonly Message.Message[],
+  messageId: string,
+): { rewindFrom: string; text: string } | undefined => {
+  const message = messages.find((candidate) => candidate.id === messageId);
+  if (!message) {
+    return undefined;
+  }
+  return { rewindFrom: messageId, text: Message.extractText(message) };
+};

package/src/components/ChatPrompt/ChatActions.tsx

@@ -13,6 +13,11 @@ import { meta } from '#meta';
 
 import { type ChatEvent } from '../Chat/events';
 
+type AudioInputDevice = {
+  deviceId: string;
+  label: string;
+};
+
 export type ChatActionsProps = ThemedClassName<
   PropsWithChildren<{
     docId?: string;
@@ -23,11 +28,6 @@ export type ChatActionsProps = ThemedClassName<
   }>
 >;
 
-type AudioInputDevice = {
-  deviceId: string;
-  label: string;
-};
-
 export const ChatActions = ({
   classNames,
   children,
@@ -179,7 +179,6 @@ export const ChatActions = ({
                   ))}
 
                   <DropdownMenu.Separator />
-
                   <DropdownMenu.CheckboxItem
                     checked={entityExtraction}
                     onCheckedChange={handleEntityExtractionChange}
@@ -210,9 +209,10 @@ export const ChatActions = ({
       )}
 
       <IconButton
-        // disabled={!processing} // TODO(dmaretskyi): Set processing state correctly on rehydrated agents.
+        disabled={!processing} // TODO(dmaretskyi): Set processing state correctly on rehydrated agents.
         variant='ghost'
-        icon='ph--x--regular'
+        classNames={processing && 'text-error-text'}
+        icon={processing ? 'ph--square--duotone' : 'ph--square--regular'}
         iconOnly
         label={t('cancel-processing.button')}
         onClick={() => {

package/src/components/ChatPrompt/ChatMcpErrors.tsx

@@ -34,7 +34,7 @@ export const ChatMcpErrors = ({ classNames, processor }: ChatMcpErrorsProps) =>
   return (
     <Message.Root classNames={['m-1', classNames]} valence='warning'>
       <Message.Title onClose={handleDismiss}>{t('mcp-server-error.label')}</Message.Title>
-      <Message.Content asChild>
+      <Message.Body asChild>
         <ul className='flex flex-col gap-0.5 text-sm'>
           {errors.map((error) => (
             <li key={`${error.url}::${error.protocol}`} className='truncate'>
@@ -44,7 +44,7 @@ export const ChatMcpErrors = ({ classNames, processor }: ChatMcpErrorsProps) =>
             </li>
           ))}
         </ul>
-      </Message.Content>
+      </Message.Body>
     </Message.Root>
   );
 };

package/src/components/ChatPrompt/ChatOptions.stories.tsx

@@ -10,13 +10,14 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { Chat } from '@dxos/assistant-toolkit';
 import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { Feed, Filter, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { ChessPlugin } from '@dxos/plugin-chess/testing';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { MapPlugin } from '@dxos/plugin-map/testing';
 import { TablePlugin } from '@dxos/plugin-table/testing';
 import { corePlugins } from '@dxos/plugin-testing';
-import { useQuery, useRegistry, useSpaces } from '@dxos/react-client/echo';
+import { useRegistry, useSpaces } from '@dxos/react-client/echo';
 import { Loading, withTheme } from '@dxos/react-ui/testing';
 import { Organization, Person } from '@dxos/types';
 

package/src/components/ChatPrompt/ChatOptions.tsx

@@ -7,7 +7,7 @@ import React, { type JSX, useCallback, useMemo, useState } from 'react';
 import { type AiContext } from '@dxos/assistant';
 import { type Chat as ChatModule, McpServer } from '@dxos/assistant-toolkit';
 import { type Database, Filter, Obj, type Registry, Type, URI } from '@dxos/echo';
-import { useObject, useQuery } from '@dxos/react-client/echo';
+import { useObject, useQuery } from '@dxos/echo-react';
 import { IconButton, Input, Popover, Select, useTranslation } from '@dxos/react-ui';
 import { Listbox } from '@dxos/react-ui-list';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
@@ -79,14 +79,14 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
                     <ModelsPanel presets={presets} preset={preset} onPresetChange={onPresetChange} />
                   </Tabs.Panel>
                   <Tabs.Tablist classNames={[styles.toolbar]}>
-                    <Tabs.IconTab value='view' icon='ph--eye--regular' label={t('chat-view.title')} />
-                    <Tabs.IconTab value='skills' icon='ph--blueprint--regular' label={t('options.skills.title')} />
-                    <Tabs.IconTab
+                    <Tabs.IconButton value='view' icon='ph--eye--regular' label={t('chat-view.title')} />
+                    <Tabs.IconButton value='skills' icon='ph--blueprint--regular' label={t('options.skills.title')} />
+                    <Tabs.IconButton
                       value='mcp-servers'
                       icon='ph--plugs-connected--regular'
                       label={t('options.mcp.title')}
                     />
-                    <Tabs.IconTab value='model' icon='ph--cpu--regular' label={t('options.chat-model.title')} />
+                    <Tabs.IconButton value='model' icon='ph--cpu--regular' label={t('options.chat-model.title')} />
                   </Tabs.Tablist>
                 </Tabs.Viewport>
               </Tabs.Root>

package/src/components/ChatPrompt/ChatPrompt.tsx

@@ -8,9 +8,17 @@ import React, { useCallback, useEffect, useId, useMemo, useRef } from 'react';
 
 import { type Chat } from '@dxos/assistant-toolkit';
 import { type Event } from '@dxos/async';
-import { type Database } from '@dxos/echo';
+import { Project } from '@dxos/compute';
+import { type Database, Obj } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
 import { Input, type ThemedClassName, useDynamicRef, useTranslation } from '@dxos/react-ui';
-import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
+import {
+  ChatEditor,
+  type ChatEditorController,
+  type ChatEditorProps,
+  ChatStatusIndicator,
+  commands,
+} from '@dxos/react-ui-chat';
 import { pendingText } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 import { type Merge } from '@dxos/util';
@@ -20,12 +28,11 @@ import { meta } from '#meta';
 import { type ChatPresetProps } from '#types';
 
 import { type AiChatProcessor } from '../../processor';
-import { type ChatEvent } from '../Chat/events';
+import { type ChatEvent } from '../Chat';
 import { ChatActions, type ChatActionsProps } from './ChatActions';
 import { ChatMcpErrors } from './ChatMcpErrors';
 import { ChatOptions } from './ChatOptions';
 import { ChatReferences } from './ChatReferences';
-import { ChatStatusIndicator } from './ChatStatusIndicator';
 import { useChatVoiceInput } from './useChatVoiceInput';
 
 export type ChatPromptProps = Merge<
@@ -40,6 +47,8 @@ export type ChatPromptProps = Merge<
     /** Read-only indicator of whether the configured provider is the remote (online) service. */
     online?: boolean;
     placeholder?: ChatEditorProps['placeholder'];
+    /** Object the chat is attached to; its project instructions (if any) supply sentinel-command completion. */
+    companionTo?: Obj.Unknown;
   }>,
   ChatPresetProps
 >;
@@ -57,6 +66,7 @@ export const ChatPrompt = ({
   settings = true,
   presets,
   preset,
+  companionTo,
 }: ChatPromptProps) => {
   const { t } = useTranslation(meta.profile.key);
 
@@ -80,7 +90,23 @@ export const ChatPrompt = ({
   useChatVoiceInput(docId, editorRef);
 
   const keymapExtensions = useChatKeymapExtensions({ event });
-  const extensions = useMemo(() => [keymapExtensions, pendingText()], [keymapExtensions]);
+
+  // Sentinel-command completion is sourced from the bound project's instructions, if any.
+  const [companion] = useObject(companionTo);
+  const [instructions] = useObject(Obj.instanceOf(Project.Project, companion) ? companion.instructions : undefined);
+  const commandsRef = useDynamicRef(instructions?.commands ?? []);
+  const commandsExtension = useMemo(
+    () =>
+      commands({
+        getCommands: () => commandsRef.current.map(({ sentinel, description }) => ({ sentinel, description })),
+      }),
+    [commandsRef],
+  );
+
+  const extensions = useMemo(
+    () => [keymapExtensions, pendingText(), commandsExtension],
+    [keymapExtensions, commandsExtension],
+  );
 
   const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
     (text) => {
@@ -105,7 +131,7 @@ export const ChatPrompt = ({
       className={mx(
         'flex flex-col w-full dx-density-md',
         outline &&
-          'bg-group-surface rounded-sm border border-subdued-separator transition transition-border [&:has(.cm-content:focus)]:border-separator',
+          'dx-group-surface rounded-sm border border-subdued-separator transition transition-border [&:has(.cm-content:focus)]:border-separator',
         classNames,
       )}
     >
@@ -116,6 +142,7 @@ export const ChatPrompt = ({
         <ChatEditor
           ref={editorRef}
           autoFocus
+          markdown
           lineWrapping
           classNames='col-span-2 pt-0.5'
           placeholder={placeholder ?? t('prompt.placeholder')}

package/src/components/ChatPrompt/index.ts

@@ -8,5 +8,4 @@ export * from './ChatOptions';
 export * from './ChatPresets';
 export * from './ChatPrompt';
 export * from './ChatReferences';
-export * from './ChatStatusIndicator';
 export * from './ChatStatus';

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

@@ -8,12 +8,13 @@ import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Database, Filter, Obj } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { DxAnchor } from '@dxos/lit-ui/react';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { Organization } from '@dxos/types';
 

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

@@ -7,15 +7,18 @@ import * as Effect from 'effect/Effect';
 import * as Fiber from 'effect/Fiber';
 import * as Layer from 'effect/Layer';
 import React, { useEffect, useMemo, useState } from 'react';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Database, Feed, Filter, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { EffectEx } from '@dxos/effect';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Button } from '@dxos/react-ui';
 import { EditorPreviewProvider } from '@dxos/react-ui-editor';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Message, Organization, Person } from '@dxos/types';
@@ -29,9 +32,15 @@ random.seed(1);
 
 type MessageGenerator = Effect.Effect<void, never, Database.Service | Feed.ContextFeedService>;
 
-type StoryArgs = { generator?: MessageGenerator[]; delay?: number; wait?: boolean } & ChatThreadProps;
+type StoryArgs = {
+  generator?: MessageGenerator[];
+  delay?: number;
+  wait?: boolean;
+  /** Render a toggle that unmounts and remounts the thread, reproducing navigating away and back. */
+  remountable?: boolean;
+} & ChatThreadProps;
 
-const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryArgs) => {
+const DefaultStory = ({ generator = [], delay = 0, wait, remountable, ...props }: StoryArgs) => {
   const [space] = useSpaces();
   const feed = useMemo<Feed.Feed | undefined>(
     () => (space ? space.db.add(Feed.make({ name: 'chat' })) : undefined),
@@ -73,11 +82,32 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: StoryArgs)
 
   return (
     <EditorPreviewProvider onLookup={async ({ dxn, label }) => ({ label, text: dxn })}>
-      <ChatThread {...props} messages={messages} />
+      {remountable ? (
+        <RemountableThread {...props} messages={messages} />
+      ) : (
+        <ChatThread {...props} messages={messages} />
+      )}
     </EditorPreviewProvider>
   );
 };
 
+/**
+ * Unmount/remount harness. Returning to a chat remounts the thread, which re-walks the messages and
+ * replaces the document — and a full replace clears accumulated widget props, so tool rows depend on
+ * the rehydration that follows it. Mounting fresh never exercises that path.
+ */
+const RemountableThread = (props: ChatThreadProps) => {
+  const [mounted, setMounted] = useState(true);
+  return (
+    <div className='flex flex-col h-full'>
+      <Button data-testid='story.toggleMount' onClick={() => setMounted((value) => !value)}>
+        {mounted ? 'Unmount' : 'Mount'}
+      </Button>
+      {mounted && <ChatThread {...props} />}
+    </div>
+  );
+};
+
 const meta = {
   title: 'plugins/plugin-assistant/components/ChatThread',
   component: ChatThread,
@@ -117,6 +147,35 @@ export const Default: Story = {
   },
 };
 
+/**
+ * Every user prompt carries a rewind toolbar. It is emitted as its own markdown block after the
+ * `<prompt>` tag; a single newline between them would let CommonMark absorb the toolbar into the
+ * prompt's HTML block, so this asserts the tag actually parses into a widget.
+ */
+export const Rewind: Story = {
+  args: {
+    generator: createMessageGenerator(),
+    wait: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttons = await waitFor(
+      async () => {
+        const found = canvas.queryAllByTestId('chat.rewind');
+        await expect(found.length).toBeGreaterThan(0);
+        return found;
+      },
+      { timeout: 10_000 },
+    );
+
+    // One toolbar per user prompt.
+    const prompts = canvasElement.querySelectorAll('.cm-prompt, [data-prompt]');
+    if (prompts.length > 0) {
+      await expect(buttons.length).toBe(prompts.length);
+    }
+  },
+};
+
 export const Delayed: Story = {
   args: {
     generator: createMessageGenerator(),
@@ -128,3 +187,39 @@ export const Delayed: Story = {
     },
   },
 };
+
+/**
+ * Tool rows must survive navigating away and back.
+ *
+ * They render from out-of-band widget state, not from the document: `blockToMarkdown` emits a
+ * `<toolCall id/>` placeholder and pushes the blocks via `updateWidget`; an empty state renders an
+ * empty row. On remount `MessageSyncer.reset` replaces the document, which fires `xmlTagResetEffect`
+ * and clears that state, then rehydrates it — and that rehydration used to be dropped, because the
+ * rebuild it triggers replaces the widget instances the editor was routing updates through
+ * (`xml-tags.test.ts`, "state reaches a mounted widget after a rebuild replaced its decoration
+ * instance").
+ */
+export const Remount: Story = {
+  args: {
+    generator: createMessageGenerator(),
+    wait: true,
+    remountable: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Streaming path: the tool rows render as the messages land.
+    await expect(canvas.findByText(/Calling search/, undefined, { timeout: 10_000 })).resolves.toBeTruthy();
+    await expect(canvas.findByText(/Calling create/, undefined, { timeout: 10_000 })).resolves.toBeTruthy();
+
+    // Away and back.
+    const toggle = await canvas.findByTestId('story.toggleMount');
+    await userEvent.click(toggle);
+    await waitFor(() => expect(canvas.queryByText(/Calling search/)).toBeNull());
+    await userEvent.click(toggle);
+
+    // Replay path: same rows, rebuilt from the messages rather than from streaming updates.
+    await expect(canvas.findByText(/Calling search/, undefined, { timeout: 10_000 })).resolves.toBeTruthy();
+    await expect(canvas.findByText(/Calling create/, undefined, { timeout: 10_000 })).resolves.toBeTruthy();
+  },
+};