@dxos/plugin-assistant 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

package/src/components/ChatPrompt/ChatOptions.tsx

@@ -34,7 +34,7 @@ export type ChatOptionsProps = ChatPresetProps & {
  * Manages the runtime context for the chat.
  */
 export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPresetChange }: ChatOptionsProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <div className='flex'>
@@ -64,13 +64,7 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
         <Popover.Portal>
           <Popover.Content side='top' classNames={styles.panel}>
             <Popover.Viewport>
-              <Tabs.Root
-                classNames='flex'
-                orientation='horizontal'
-                defaultValue='view'
-                defaultActivePart='list'
-                tabIndex={-1}
-              >
+              <Tabs.Root asChild orientation='horizontal' defaultValue='view' defaultActivePart='list' tabIndex={-1}>
                 <Tabs.Viewport classNames={mx('grid grid-rows-[1fr_40px] w-full')}>
                   <Tabs.Panel tabIndex={-1} classNames='dx-focus-ring-inset overflow-hidden' value='view'>
                     <ViewPanel chat={chat} />
@@ -110,7 +104,7 @@ export const ChatOptions = ({ chat, db, context, registry, presets, preset, onPr
 };
 
 const BlueprintsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'registry' | 'db' | 'context'>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const blueprints = useBlueprints({ registry, db });
   const activeBlueprints = useActiveBlueprints({ context });
@@ -146,18 +140,20 @@ const BlueprintsPanel = ({ registry, db, context }: Pick<ChatOptionsProps, 'regi
 };
 
 const ViewPanel = ({ chat }: Pick<ChatOptionsProps, 'chat'>) => {
-  const { t } = useTranslation(meta.id);
-  const [view, setView] = useObject(chat, 'view');
+  const { t } = useTranslation(meta.profile.key);
+  const [view, setView] = useObject(chat, 'viewType');
   const value = (view as Assistant.ChatView | undefined) ?? 'normal';
 
   return (
     <Listbox.Root value={value} onValueChange={setView} autoFocus>
-      {Assistant.ChatViews.map((view) => (
-        <Listbox.Option key={view} value={view}>
-          <Listbox.OptionLabel>{t(`chat-view.${view}.label`, { defaultValue: view })}</Listbox.OptionLabel>
-          <Listbox.OptionIndicator />
-        </Listbox.Option>
-      ))}
+      <Listbox.Content aria-label={t('chat-view.title')}>
+        {Assistant.ChatViews.map((view) => (
+          <Listbox.Item key={view} id={view} classNames='px-2 py-1 dx-focus-ring rounded-xs'>
+            <Listbox.ItemLabel>{t(`chat-view.${view}.label`, { defaultValue: view })}</Listbox.ItemLabel>
+            <Listbox.Indicator />
+          </Listbox.Item>
+        ))}
+      </Listbox.Content>
     </Listbox.Root>
   );
 };
@@ -167,16 +163,17 @@ const ModelsPanel = ({
   preset,
   onPresetChange,
 }: Pick<ChatOptionsProps, 'presets' | 'preset' | 'onPresetChange'>) => {
+  const { t } = useTranslation(meta.profile.key);
   return (
     <Listbox.Root value={preset} onValueChange={onPresetChange} autoFocus>
-      {presets?.map(({ id, label }) => {
-        return (
-          <Listbox.Option key={id} value={id}>
-            <Listbox.OptionLabel>{label}</Listbox.OptionLabel>
-            <Listbox.OptionIndicator />
-          </Listbox.Option>
-        );
-      })}
+      <Listbox.Content aria-label={t('options.chat-model.title')}>
+        {presets?.map(({ id, label }) => (
+          <Listbox.Item key={id} id={id} classNames='px-2 py-1 dx-focus-ring rounded-xs'>
+            <Listbox.ItemLabel>{label}</Listbox.ItemLabel>
+            <Listbox.Indicator />
+          </Listbox.Item>
+        ))}
+      </Listbox.Content>
     </Listbox.Root>
   );
 };
@@ -186,7 +183,7 @@ type McpServersPanelProps = {
 };
 
 const McpServersPanel = ({ db }: McpServersPanelProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const servers = useQuery(db, Filter.type(McpServer.McpServer));
   const [adding, setAdding] = useState(false);
 
@@ -237,7 +234,7 @@ type McpServerRowProps = {
  * switch in sync with mutations made through the returned setter.
  */
 const McpServerRow = ({ server, onRemove }: McpServerRowProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [enabled, setEnabled] = useObject(server, 'enabled');
 
   return (
@@ -265,7 +262,7 @@ type McpServerFormProps = {
 };
 
 const McpServerForm = ({ onSubmit, onCancel }: McpServerFormProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [name, setName] = useState('');
   const [url, setUrl] = useState('');
   const [protocol, setProtocol] = useState<'sse' | 'http'>('sse');
@@ -336,7 +333,7 @@ const ANY = '__any__' as const;
 
 /** @private */
 export const ObjectsPanel = ({ db, context }: Pick<ChatOptionsProps, 'db' | 'context'>): JSX.Element => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   // Item types sorted by label.
   const types = useFilteredTypes(db);

package/src/components/ChatPrompt/ChatPrompt.tsx

@@ -60,7 +60,7 @@ export const ChatPrompt = ({
   presets,
   preset,
 }: ChatPromptProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
   const streaming = useAtomValue(processor.streaming);

package/src/components/ChatPrompt/ChatReferences.tsx

@@ -18,7 +18,7 @@ export type ChatReferencesProps = ThemedClassName<{
 }>;
 
 export const ChatReferences = ({ classNames, context, db }: ChatReferencesProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { objects, onUpdateObject } = useContextObjects({ db, context });
 
   return (

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

@@ -27,7 +27,7 @@ import { Organization } from '@dxos/types';
  *   `LayoutOperation.UpdatePopover`.
  * - `StorybookPlugin` provides both the `LayoutOperation.UpdatePopover` handler (mutating
  *   the layout-state atom) and the `<Layout>` shell that renders the popover via
- *   `<Surface.Surface type={AppSurface.Card} data={popoverContent}>`.
+ *   `<Surface.Surface type={AppSurface.CardContent} data={popoverContent}>`.
  * - `PreviewPlugin` also registers Card-role surfaces (Organization, Person, Task, …); the
  *   Surface system picks the matching one based on the resolved object's type.
  *

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

@@ -65,7 +65,7 @@ const DefaultStory = ({ generator = [], delay = 0, wait, ...props }: DefaultStor
           Layer.mergeAll(
             Database.layer(space.db),
             Feed.ContextFeedService.layer(feed),
-            createFeedServiceLayer(space.queues),
+            createFeedServiceLayer(space.db),
           ),
         ),
       ),

package/src/components/ChatThread/DEBUG.md

@@ -39,3 +39,26 @@ MarkdownStream (packages/ui/react-ui-markdown/src/MarkdownStream/MarkdownStream.
 │ treats XML atomic ranges as indivisible units)
 ▼
 Rendered DOM (markdown + portaled widgets for tool calls / reasoning / etc.)
+
+---
+
+# Ephemeral status subscriptions (TaskList / debug panel)
+
+ProcessHandle.pushEphemeral → subscribeEphemeral(): Stream<Trace.Message>
+│
+│ UI hooks fork a collector fiber from the stream inside useEffect
+▼
+useProcessEphemeralStatus (TaskList delegated rows)
+EphemeralDebugModule (storybook debug panel)
+│
+│ **Must use Effect.forkDaemon**, not Effect.fork, when the parent is
+│ `runtime.runPromise(Effect.forEach(subscribe))` — forEach returns as soon as
+│ each subscribe forks, closing the scope and interrupting scoped forks before
+│ live events arrive. forkDaemon survives until explicit Fiber.interrupt on dispose.
+│
+│ Same pattern as ProcessOperationInvoker.fiberFromProcess (output collector).
+▼
+resolveEphemeralStatusUpdate → TaskList activity line
+
+**Contrast:** processor.ts uses Effect.fork because its parent Effect.gen continues
+through submitPrompt + waitForCompletion, keeping the scope open for the whole turn.

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

@@ -14,7 +14,7 @@ import { MessageThreadContext } from '../sync';
 import { styles } from './defaults';
 
 export const SummaryWidget = ({ children }: XmlWidgetProps<MessageThreadContext>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <TogglePanel.Root>

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

@@ -23,7 +23,7 @@ export type ToolWidgetProps = XmlWidgetProps<{
 }>;
 
 export const ToolWidget = ({ view, blocks = [] }: ToolWidgetProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const items = useMemo<ToolPanelProps['items']>(() => {
     let lastToolCall: { tool: Tool.Any | undefined; block: ContentBlock.ToolCall } | undefined;

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

@@ -81,3 +81,10 @@ export const Default: Story = {
     },
   },
 };
+
+export const WithNestedChildren: Story = {
+  args: {
+    ...Default.args,
+    depth: 2,
+  },
+};

package/src/components/ProcessTree/ProcessTree.tsx

@@ -4,113 +4,69 @@
 
 import * as Match from 'effect/Match';
 import * as Option from 'effect/Option';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { Process } from '@dxos/compute';
-import { Icon, IconButton, ScrollArea, Tooltip, Treegrid } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/react-ui';
+import {
+  Icon,
+  IconButton,
+  ScrollArea,
+  Tooltip,
+  Treegrid,
+  TREEGRID_PATH_SEPARATOR,
+  composable,
+  composableProps,
+} from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 import { Unit } from '@dxos/util';
 
+const DEFAULT_DEPTH = 1;
+/** Extra label inset per nesting level (status icons stay aligned). */
+const LABEL_INDENT_REM = 0.5;
+
+/** Nested subprocess rows (level > 1) only surface still-active processes. */
+const NESTED_ACTIVE_STATES = new Set<Process.State>([
+  Process.State.RUNNING,
+  Process.State.HYBERNATING,
+  Process.State.TERMINATING,
+]);
+
 export type ProcessTreeProps = {
   // TODO(burdon): Atom.
   processes: readonly Process.Info[];
+  /**
+   * Maximum nesting depth from the root (1 = top-level processes only).
+   *
+   * @default 1
+   */
+  depth?: number;
   onProcessSelect?: (process: Process.Info) => void;
   onProcessTerminate?: (process: Process.Info) => void;
 };
 
+type ProcessTreeRow = {
+  process: Process.Info;
+  path: string[];
+};
+
 export const ProcessTree = React.memo(
   composable<HTMLDivElement, ProcessTreeProps>(
-    ({ processes, onProcessSelect, onProcessTerminate, ...props }, forwardedRef) => {
-      const sortedProcesses = [
-        ...processes.filter((process) => [Process.State.RUNNING, Process.State.HYBERNATING].includes(process.state)),
-        ...processes.filter((process) => [Process.State.IDLE].includes(process.state)).slice(0, 3),
-        ...processes.filter((process) =>
-          [Process.State.SUCCEEDED, Process.State.FAILED, Process.State.TERMINATED].includes(process.state),
-        ),
-      ].sort((a, b) => {
-        const aCompletedAt = Option.getOrElse(a.completedAt, () => Infinity);
-        const bCompletedAt = Option.getOrElse(b.completedAt, () => Infinity);
-        return bCompletedAt - aCompletedAt;
-      });
+    ({ processes, depth = DEFAULT_DEPTH, onProcessSelect, onProcessTerminate, ...props }, forwardedRef) => {
+      const rows = useMemo(() => buildProcessTreeRows(processes, depth), [processes, depth]);
 
       return (
         <ScrollArea.Root {...composableProps(props, { classNames: 'dx-expander' })} thin ref={forwardedRef}>
           <ScrollArea.Viewport>
             <Treegrid.Root classNames='grid grid-cols-[min-content_1fr_min-content_min-content]'>
-              {sortedProcesses
-                .filter((process) => process.parentPid === null)
-                .map((process) => {
-                  // const activeChildren = filteredProcesses.filter(
-                  //   (candidate) =>
-                  //     candidate.parentPid?.toString() === process.pid.toString() &&
-                  //     candidate.state === Process.State.RUNNING,
-                  // );
-                  const t = Unit.Duration(process.metrics.wallTime);
-                  return (
-                    <Treegrid.Row
-                      key={process.pid.toString()}
-                      id={process.pid.toString()}
-                      parentOf={process.parentPid?.toString()}
-                      classNames={mx('col-span-full grid grid-cols-subgrid gap-2 ps-1', onProcessSelect && 'dx-hover')}
-                    >
-                      <Treegrid.Cell classNames='grid place-items-center'>
-                        <Tooltip.Trigger content={process.state.toString()}>
-                          <Icon
-                            size={4}
-                            synchronized
-                            classNames={mx(
-                              process.state === Process.State.RUNNING && 'animate-spin',
-                              process.state === Process.State.FAILED && 'text-error-text',
-                              process.state === Process.State.SUCCEEDED && 'text-success-text',
-                            )}
-                            icon={Match.value(process.state).pipe(
-                              Match.when(Process.State.RUNNING, () => 'ph--spinner-gap--regular'),
-                              Match.when(Process.State.SUCCEEDED, () => 'ph--check-circle--regular'),
-                              Match.when(Process.State.FAILED, () => 'ph--warning--regular'),
-                              Match.when(Process.State.HYBERNATING, () => 'ph--spinner--regular'),
-                              Match.when(Process.State.IDLE, () => 'ph--moon-stars--regular'),
-                              Match.when(Process.State.TERMINATING, () => 'ph--x-circle--regular'),
-                              Match.when(Process.State.TERMINATED, () => 'ph--x-circle--regular'),
-                              Match.orElse(() => 'ph--spinner-gap--regular'),
-                            )}
-                          />
-                        </Tooltip.Trigger>
-                      </Treegrid.Cell>
-                      <Treegrid.Cell classNames='flex items-center truncate' onClick={() => onProcessSelect?.(process)}>
-                        <span
-                          className={mx(
-                            'truncate text-sm',
-                            process.state !== Process.State.RUNNING && 'text-description',
-                          )}
-                        >
-                          {process.params.name ?? process.pid.toString()}
-                        </span>
-                      </Treegrid.Cell>
-                      <Treegrid.Cell classNames='flex items-center justify-end text-xs text-description tabular-nums'>
-                        {[Process.State.FAILED, Process.State.SUCCEEDED].includes(process.state) && (
-                          <span className='whitespace-nowrap'>{t.toString()}</span>
-                        )}
-                      </Treegrid.Cell>
-                      <Treegrid.Cell>
-                        {onProcessTerminate && (
-                          <IconButton
-                            classNames='min-h-0 p-1'
-                            icon='ph--x--regular'
-                            iconOnly
-                            variant='ghost'
-                            size={4}
-                            label='Actions'
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              onProcessTerminate?.(process);
-                            }}
-                          />
-                        )}
-                      </Treegrid.Cell>
-                    </Treegrid.Row>
-                  );
-                })}
+              {rows.map(({ process, path }) => (
+                <ProcessTreeRowView
+                  key={path.join(TREEGRID_PATH_SEPARATOR)}
+                  process={process}
+                  path={path}
+                  onProcessSelect={onProcessSelect}
+                  onProcessTerminate={onProcessTerminate}
+                />
+              ))}
             </Treegrid.Root>
           </ScrollArea.Viewport>
         </ScrollArea.Root>
@@ -118,3 +74,150 @@ export const ProcessTree = React.memo(
     },
   ),
 );
+
+type ProcessTreeRowViewProps = {
+  process: Process.Info;
+  path: string[];
+  onProcessSelect?: (process: Process.Info) => void;
+  onProcessTerminate?: (process: Process.Info) => void;
+};
+
+const ProcessTreeRowView = ({ process, path, onProcessSelect, onProcessTerminate }: ProcessTreeRowViewProps) => {
+  const duration = Unit.Duration(process.metrics.wallTime);
+  const level = path.length;
+  const nested = level > 1;
+
+  return (
+    <Treegrid.Row
+      id={path.join(TREEGRID_PATH_SEPARATOR)}
+      classNames={mx('col-span-full grid grid-cols-subgrid gap-2 ps-1', onProcessSelect && 'dx-hover')}
+    >
+      <Treegrid.Cell classNames='flex items-center gap-0.5'>
+        {nested && <Icon icon='ph--arrow-elbow-down-right--regular' size={3} classNames='shrink-0 text-subdued' />}
+        <Tooltip.Trigger content={process.state.toString()}>
+          <Icon
+            size={4}
+            synchronized
+            classNames={mx(
+              process.state === Process.State.RUNNING && 'animate-spin',
+              process.state === Process.State.FAILED && 'text-error-text',
+              process.state === Process.State.SUCCEEDED && 'text-success-text',
+            )}
+            icon={Match.value(process.state).pipe(
+              Match.when(Process.State.RUNNING, () => 'ph--spinner-gap--regular'),
+              Match.when(Process.State.SUCCEEDED, () => 'ph--check-circle--regular'),
+              Match.when(Process.State.FAILED, () => 'ph--warning--regular'),
+              Match.when(Process.State.HYBERNATING, () => 'ph--spinner--regular'),
+              Match.when(Process.State.IDLE, () => 'ph--moon-stars--regular'),
+              Match.when(Process.State.TERMINATING, () => 'ph--x-circle--regular'),
+              Match.when(Process.State.TERMINATED, () => 'ph--x-circle--regular'),
+              Match.orElse(() => 'ph--spinner-gap--regular'),
+            )}
+          />
+        </Tooltip.Trigger>
+      </Treegrid.Cell>
+      <Treegrid.Cell
+        classNames='flex items-center truncate'
+        style={nested ? { paddingInlineStart: `${(level - 1) * LABEL_INDENT_REM}rem` } : undefined}
+        onClick={() => onProcessSelect?.(process)}
+      >
+        <span
+          className={mx(
+            'truncate text-sm',
+            level === 1 && 'font-medium',
+            process.state !== Process.State.RUNNING && 'text-description',
+          )}
+        >
+          {process.params.name ?? process.pid.toString()}
+        </span>
+      </Treegrid.Cell>
+      <Treegrid.Cell classNames='flex items-center justify-end text-xs text-description tabular-nums'>
+        {[Process.State.FAILED, Process.State.SUCCEEDED].includes(process.state) && (
+          <span className='whitespace-nowrap'>{duration.toString()}</span>
+        )}
+      </Treegrid.Cell>
+      <Treegrid.Cell>
+        {onProcessTerminate && (
+          <IconButton
+            classNames='min-h-0 p-1'
+            icon='ph--x--regular'
+            iconOnly
+            variant='ghost'
+            size={4}
+            label='Actions'
+            onClick={(event) => {
+              event.stopPropagation();
+              onProcessTerminate?.(process);
+            }}
+          />
+        )}
+      </Treegrid.Cell>
+    </Treegrid.Row>
+  );
+};
+
+const sortProcesses = (processes: readonly Process.Info[]): Process.Info[] => {
+  return [
+    ...processes.filter((process) => [Process.State.RUNNING, Process.State.HYBERNATING].includes(process.state)),
+    ...processes.filter((process) => [Process.State.IDLE].includes(process.state)).slice(0, 3),
+    ...processes.filter((process) =>
+      [Process.State.SUCCEEDED, Process.State.FAILED, Process.State.TERMINATED].includes(process.state),
+    ),
+  ].sort((left, right) => {
+    const leftCompletedAt = Option.getOrElse(left.completedAt, () => Infinity);
+    const rightCompletedAt = Option.getOrElse(right.completedAt, () => Infinity);
+    return rightCompletedAt - leftCompletedAt;
+  });
+};
+
+const sortNestedActive = (processes: readonly Process.Info[]): Process.Info[] =>
+  processes
+    .filter((process) => NESTED_ACTIVE_STATES.has(process.state))
+    .sort((left, right) => {
+      const priority = (state: Process.State) =>
+        state === Process.State.RUNNING ? 0 : state === Process.State.HYBERNATING ? 1 : 2;
+      return priority(left.state) - priority(right.state);
+    });
+
+/**
+ * Flattens the process forest to a fixed depth. Rows are always shown expanded (no collapse).
+ */
+const buildProcessTreeRows = (processes: readonly Process.Info[], maxDepth: number): ProcessTreeRow[] => {
+  const pidSet = new Set(processes.map((process) => String(process.pid)));
+  const childrenByParent = new Map<string, Process.Info[]>();
+  const roots: Process.Info[] = [];
+
+  for (const process of processes) {
+    const parent = process.parentPid;
+    if (parent === null || !pidSet.has(String(parent))) {
+      roots.push(process);
+      continue;
+    }
+    const key = String(parent);
+    const siblings = childrenByParent.get(key) ?? [];
+    siblings.push(process);
+    childrenByParent.set(key, siblings);
+  }
+
+  const sortedRoots = sortProcesses(roots);
+
+  const rows: ProcessTreeRow[] = [];
+  const visit = (process: Process.Info, path: string[], level: number) => {
+    if (level > maxDepth) {
+      return;
+    }
+    rows.push({ process, path });
+    if (level >= maxDepth) {
+      return;
+    }
+    const children = sortNestedActive(childrenByParent.get(String(process.pid)) ?? []);
+    for (const child of children) {
+      visit(child, [...path, String(child.pid)], level + 1);
+    }
+  };
+
+  for (const root of sortedRoots) {
+    visit(root, [String(root.pid)], 1);
+  }
+  return rows;
+};

package/src/components/TaskList/TaskList.stories.tsx

@@ -6,17 +6,23 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Plan } from '@dxos/assistant-toolkit';
+import { Process, type Trace } from '@dxos/compute';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
+import subAgentFixture from '../../execution-graph/testing/sub-agent-delegation.json';
 import { TaskList } from './TaskList';
 
+const SUB_AGENT_PID = Process.ID.make('cf8f7243-5b1d-4902-b158-70d9107d5f43');
+const traceMessages = (subAgentFixture as unknown as Trace.Message[]).slice();
+
 type DefaultStoryProps = {
   tasks?: Omit<Plan.Task, 'id'>[];
+  traceMessages?: readonly Trace.Message[];
 };
 
-const DefaultStory = ({ tasks = [] }: DefaultStoryProps) => {
+const DefaultStory = ({ tasks = [], traceMessages: traceMessagesProp }: DefaultStoryProps) => {
   const plan = React.useMemo(() => Plan.makePlan({ tasks }), [tasks]);
-  return <TaskList plan={plan} />;
+  return <TaskList plan={plan} traceMessages={traceMessagesProp} />;
 };
 
 const meta = {
@@ -41,4 +47,19 @@ export const Default: Story = {
   },
 };
 
+export const WithDelegatedAgent: Story = {
+  args: {
+    tasks: [
+      {
+        title: 'Research widgets',
+        status: 'in-progress',
+        delegated: true,
+        agentPid: SUB_AGENT_PID,
+      },
+      { title: 'Summarize findings', status: 'in-progress' },
+    ],
+    traceMessages,
+  },
+};
+
 export const Empty: Story = {};