@dxos/plugin-assistant 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/ChatThread/registry.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { log } from '@dxos/log';
 import { ContentBlock, type Message } from '@dxos/types';
-import { type XmlWidgetRegistry, getXmlTextChild } from '@dxos/ui-editor';
+import { AnchorWidget, type XmlWidgetRegistry, getXmlTextChild } from '@dxos/ui-editor';
 
 import { type Assistant } from '../../types';
 import { type BlockRenderer, type MessageThreadContext } from './sync';
@@ -16,11 +16,12 @@ import {
   ReasoningWidget,
   ReferenceWidget,
   SelectWidget,
-  SuggestionWidget,
   StatsWidget,
+  StatusWidget,
+  SuggestionWidget,
   SummaryWidget,
+  SurfaceWidget,
   ToolWidget,
-  StatusWidget,
 } from './widgets';
 
 /**
@@ -39,7 +40,7 @@ export const componentRegistry: XmlWidgetRegistry = {
   // Block-only (no widget — see note above).
   //
 
-  prompt: {
+  'prompt': {
     block: true,
   },
 
@@ -47,7 +48,13 @@ export const componentRegistry: XmlWidgetRegistry = {
   // DOM Widgets
   //
 
-  synthetic: {
+  'link-preview': {
+    block: false,
+    urlSchemes: ['dxn:', 'echo:'],
+    factory: ({ label, dxn }) =>
+      typeof label === 'string' && typeof dxn === 'string' ? new AnchorWidget(label, dxn) : null,
+  },
+  'synthetic': {
     block: true,
     factory: ({ children, range }) => {
       const text = getXmlTextChild(children);
@@ -57,7 +64,7 @@ export const componentRegistry: XmlWidgetRegistry = {
       return text ? new ReasoningWidget(text, range.from) : null;
     },
   },
-  reasoning: {
+  'reasoning': {
     block: true,
     streaming: true,
     factory: ({ children, range }) => {
@@ -65,14 +72,14 @@ export const componentRegistry: XmlWidgetRegistry = {
       return text ? new ReasoningWidget(text, range.from) : null;
     },
   },
-  reference: {
+  'reference': {
     block: false,
     factory: ({ children, ref }) => {
       const text = getXmlTextChild(children);
       return text && ref ? new ReferenceWidget(text, ref) : null;
     },
   },
-  select: {
+  'select': {
     block: true,
     factory: ({ children }) => {
       const options = children
@@ -81,21 +88,21 @@ export const componentRegistry: XmlWidgetRegistry = {
       return options?.length ? new SelectWidget(options) : null;
     },
   },
-  suggestion: {
+  'suggestion': {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
       return text ? new SuggestionWidget(text) : null;
     },
   },
-  stats: {
+  'stats': {
     block: true,
     factory: ({ children }) => {
       const text = getXmlTextChild(children);
       return text ? new StatsWidget(text) : null;
     },
   },
-  status: {
+  'status': {
     block: true,
     streaming: true,
     factory: ({ children }) => {
@@ -108,11 +115,15 @@ export const componentRegistry: XmlWidgetRegistry = {
   // React Widgets (portaled outside of the editor)
   //
 
-  summary: {
+  'summary': {
     block: true,
     Component: SummaryWidget,
   },
-  toolCall: {
+  'surface': {
+    block: true,
+    Component: SurfaceWidget,
+  },
+  'toolCall': {
     block: true,
     Component: (props) => (
       <div className='py-2'>
@@ -120,11 +131,11 @@ export const componentRegistry: XmlWidgetRegistry = {
       </div>
     ),
   },
-  toolResult: {
+  'toolResult': {
     block: true,
     Component: FallbackWidget,
   },
-  toolkit: {
+  'toolkit': {
     block: true,
     Component: FallbackWidget,
   },
@@ -133,11 +144,11 @@ export const componentRegistry: XmlWidgetRegistry = {
   // Fallback
   //
 
-  json: {
+  'json': {
     block: true,
     Component: FallbackWidget,
   },
-};
+} as const;
 
 /**
  * Convert block to markdown.
@@ -261,6 +272,18 @@ const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Mes
       return renderXMLBlock('status', { content: block.statusText, pending: block.pending });
     }
 
+    case 'surface': {
+      if (block.pending) {
+        return;
+      }
+      // Carry the payload as JSON text content so it round-trips through the mixed XML parser
+      // without colliding with attribute quoting; `SurfaceWidget` re-parses it.
+      return renderXMLBlock('surface', {
+        content: JSON.stringify(block.data ?? {}),
+        attributes: `role="${escapeXmlAttribute(block.role)}"`,
+      });
+    }
+
     default: {
       // TODO(burdon): Needs stable ID.
       return `<json id="${message.id}">\n${JSON.stringify(block)}\n</json>`;
@@ -274,6 +297,9 @@ const blockToMarkdownImpl = (context: MessageThreadContext, message: Message.Mes
 const escapeXmlTextContent = (raw: string): string =>
   raw.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
+/** Escape a value embedded in a double-quoted XML attribute (e.g. a model-supplied surface role). */
+const escapeXmlAttribute = (raw: string): string => escapeXmlTextContent(raw).replace(/"/g, '&quot;');
+
 const renderXMLBlock = (tag: string, opts: { content?: string; pending?: boolean; attributes?: string }) => {
   // Replace paragraph breaks so that the markdown parser does not split the content into multiple paragraphs.
   // NOTE: do not strip leading list-marker prefixes (`-`, `*`, `1. `, ...) per line — the streaming

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

@@ -9,12 +9,12 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { ReasoningWidget } from './ReasoningWidget';
 
-export type DefaultStoryProps = {
+export type StoryArgs = {
   text: string;
 };
 
 // TODO(burdon): Generalize factory for DOM widgets.
-const DefaultStory = ({ text }: DefaultStoryProps) => {
+const DefaultStory = ({ text }: StoryArgs) => {
   const hostRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     const host = hostRef.current;

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/SurfaceWidget.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { log } from '@dxos/log';
+import { type XmlWidgetProps, getXmlTextChild } from '@dxos/ui-editor';
+
+import { ChatSurface } from '#types';
+
+/**
+ * Renders an agent-requested UI surface (the `<surface>` content block) by dispatching to a
+ * registered {@link ChatSurface} surface keyed on its `role`. The payload is carried as JSON in the
+ * tag's text content; a malformed payload renders the surface with no data rather than throwing.
+ */
+export const SurfaceWidget = ({ role, children }: XmlWidgetProps<{ role?: string }>) => {
+  const data = useMemo(() => {
+    const raw = getXmlTextChild(children ?? []);
+    if (!raw) {
+      return undefined;
+    }
+    try {
+      const parsed: unknown = JSON.parse(raw);
+      // Model-supplied JSON payload: narrowed to a non-array object; no typed schema exists at this boundary.
+      return parsed != null && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? (parsed as Record<string, unknown>)
+        : undefined;
+    } catch (err) {
+      log.warn('failed to parse surface data', { raw, err });
+      return undefined;
+    }
+  }, [children]);
+
+  if (!role) {
+    return null;
+  }
+
+  return <Surface.Surface type={ChatSurface} data={{ role, data }} limit={1} />;
+};

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/ChatThread/widgets/index.ts

@@ -9,5 +9,6 @@ export * from './SelectWidget';
 export * from './StatsWidget';
 export * from './StatusWidget';
 export * from './SummaryWidget';
+export * from './SurfaceWidget';
 export * from './SuggestionWidget';
 export * from './ToolWidget';

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,61 @@
 
 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, composable, composableProps } from '@dxos/react-ui';
+import { Treegrid, TREEGRID_PATH_SEPARATOR } from '@dxos/react-ui-list';
 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 +66,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';
 
-type DefaultStoryProps = {
+const SUB_AGENT_PID = Process.ID.make('cf8f7243-5b1d-4902-b158-70d9107d5f43');
+const traceMessages = (subAgentFixture as unknown as Trace.Message[]).slice();
+
+type StoryArgs = {
   tasks?: Omit<Plan.Task, 'id'>[];
+  traceMessages?: readonly Trace.Message[];
 };
 
-const DefaultStory = ({ tasks = [] }: DefaultStoryProps) => {
+const DefaultStory = ({ tasks = [], traceMessages: traceMessagesProp }: StoryArgs) => {
   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 = {};