@dxos/plugin-assistant 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -30,7 +30,7 @@ const DefaultStory = () => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(create(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
+    return space.db.add(live(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
   });
 
   return (
@@ -41,7 +41,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta<typeof TemplateForm> = {
-  title: 'plugins/plugin-automation/TemplateForm',
+  title: 'plugins/plugin-assistant/TemplateForm',
   component: TemplateForm,
   render: DefaultStory,
   decorators: [

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Schema as S } from 'effect';
+import { type Schema } from 'effect';
 import React, { Fragment, useEffect } from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
@@ -15,7 +15,7 @@ import { type TemplateInput, TemplateInputType, type TemplateType } from '../../
 
 export type TemplateFormProps = {
   template: TemplateType;
-  schema?: S.Schema<any, any, any>;
+  schema?: Schema.Schema<any, any, any>;
   commandEditable?: boolean;
 };
 

package/src/components/Thread/Thread.stories.tsx

@@ -7,10 +7,10 @@ import '@dxos-theme';
 import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { type Message } from '@dxos/ai';
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { type Message } from '@dxos/artifact';
-import { ObjectId } from '@dxos/echo-schema';
+import { Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
@@ -29,9 +29,9 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
 
   const handleSubmit = useCallback(
     (text: string) => {
-      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
+      const request: Message = { id: Type.ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
       const response: Message = {
-        id: ObjectId.random(),
+        id: Type.ObjectId.random(),
         role: 'assistant',
         content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
       };
@@ -44,7 +44,7 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
           request,
           response,
           {
-            id: ObjectId.random(),
+            id: Type.ObjectId.random(),
             role: 'assistant',
             content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
           },
@@ -69,18 +69,15 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
 };
 
 const meta: Meta<ThreadProps> = {
-  title: 'plugins/plugin-automation/Thread',
+  title: 'plugins/plugin-assistant/Thread',
   render: DefaultStory,
   component: Thread,
   decorators: [
     withSignals,
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-    }),
+    withClientProvider({ createIdentity: true, createSpace: true }),
     withPluginManager({ plugins: [IntentPlugin()] }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
+    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
   ],
   parameters: {
     translations,
@@ -93,7 +90,7 @@ type Story = StoryObj<ThreadProps>;
 
 const TEST_MESSAGES: Message[] = [
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -103,7 +100,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'assistant',
     content: [
       {
@@ -128,7 +125,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -139,7 +136,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'assistant',
     content: [
       {
@@ -151,7 +148,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -162,7 +159,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: ObjectId.random(),
+    id: Type.ObjectId.random(),
     role: 'assistant',
     content: [
       {

package/src/components/Thread/Thread.tsx

@@ -4,7 +4,7 @@
 
 import React, { type CSSProperties, useCallback, useMemo, useRef } from 'react';
 
-import { type Message } from '@dxos/artifact';
+import { type Message } from '@dxos/ai';
 import { type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -32,7 +32,7 @@ export type ThreadProps = ThemedClassName<{
   contextProvider?: ContextProvider;
 }> &
   Pick<PromptBarProps, 'processing' | 'error' | 'onSubmit' | 'onSuggest' | 'onCancel'> &
-  Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete'>;
+  Pick<ThreadMessageProps, 'debug' | 'tools' | 'onPrompt' | 'onDelete' | 'onAddToGraph'>;
 
 /**
  * Chat thread component.

package/src/components/Thread/ThreadContainer.stories.tsx

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { AIServiceEdgeClient, Message } from '@dxos/ai';
 import {
   Capabilities,
   Events,
@@ -17,42 +18,45 @@ import {
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Message, type Tool } from '@dxos/artifact';
-import { genericTools, localServiceEndpoints, type IsObject } from '@dxos/artifact-testing';
-import { AIServiceEdgeClient } from '@dxos/assistant';
-import { createStatic, ObjectId } from '@dxos/echo-schema';
+import { remoteServiceEndpoints } from '@dxos/artifact-testing';
+import { Type, type Obj } from '@dxos/echo';
+import { createQueueDxn, create, Query, Filter } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { DXN, QueueSubspaceTags, SpaceId } from '@dxos/keys';
 import { ChessPlugin } from '@dxos/plugin-chess';
 import { ChessType } from '@dxos/plugin-chess/types';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { InboxPlugin } from '@dxos/plugin-inbox';
 import { MapPlugin } from '@dxos/plugin-map';
+import { MarkdownPlugin } from '@dxos/plugin-markdown';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { TablePlugin } from '@dxos/plugin-table';
-import { useQueue, useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
+import { useClient } from '@dxos/react-client';
+import { useQueue, useQuery } from '@dxos/react-client/echo';
 import { IconButton, Input, Toolbar } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
+import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Thread, type ThreadProps } from './Thread';
 import { ChatProcessor } from '../../hooks';
 import { createProcessorOptions } from '../../testing';
 import translations from '../../translations';
 
-const endpoints = localServiceEndpoints;
+// TODO(burdon): Configure for local with ollama/LM studio.
+// const endpoints = localServiceEndpoints;
+const endpoints = remoteServiceEndpoints;
 
 type RenderProps = {
-  items?: IsObject[];
+  items?: Obj.Any[];
   prompts?: string[];
 } & Pick<ThreadProps, 'debug'>;
 
 // TODO(burdon): Use ChatContainer.
 const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) => {
-  const space = useSpace();
+  const client = useClient();
+  const space = client.spaces.default;
+
   const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-  const tools = useMemo<Tool[]>(() => [...genericTools], []);
+  const tools = useCapabilities(Capabilities.Tools);
 
   const [aiClient] = useState(() => new AIServiceEdgeClient({ endpoint: endpoints.ai }));
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -66,7 +70,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
 
     return new ChatProcessor(
       aiClient,
-      tools,
+      tools.flat(),
       artifactDefinitions,
       {
         space,
@@ -77,13 +81,19 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
   }, [aiClient, tools, space, dispatch, artifactDefinitions]);
 
   // Queue.
-  const [queueDxn, setQueueDxn] = useState<string>(() => randomQueueDxn());
-  const queue = useQueue<Message>(DXN.tryParse(queueDxn));
+  const [queueDxn, setQueueDxn] = useState<string>(() => createQueueDxn(space.id).toString());
+  const queue = useQueue<Message>(Type.DXN.tryParse(queueDxn));
 
   useEffect(() => {
-    if (queue?.items.length === 0 && !queue.isLoading && prompts.length > 0) {
+    if (space) {
+      setQueueDxn(createQueueDxn(space.id).toString());
+    }
+  }, [space]);
+
+  useEffect(() => {
+    if (queue?.objects.length === 0 && !queue.isLoading && prompts.length > 0) {
       queue.append([
-        createStatic(Message, {
+        create(Message, {
           role: 'assistant',
           content: prompts.map(
             (prompt) =>
@@ -96,48 +106,52 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
         }),
       ]);
     }
-  }, [queueDxn, prompts, queue?.items.length, queue?.isLoading]);
+  }, [queueDxn, prompts, queue?.objects.length, queue?.isLoading]);
 
   // State.
-  const artifactItems: any[] = []; // TODO(burdon): Query from space.
-  const messages = [...(queue?.items ?? []), ...(processor?.messages.value ?? [])];
-
-  const handleSubmit = processor
-    ? (message: string) => {
-        requestAnimationFrame(async () => {
-          invariant(processor);
-          if (processor.streaming.value) {
-            await processor.cancel();
-          }
-
-          invariant(queue);
-          await processor.request(message, {
-            history: queue.items,
-            onComplete: (messages) => {
-              queue.append(messages);
-            },
-          });
-        });
+  const query = useMemo(
+    () => Query.select(Filter.or(...artifactDefinitions.map((definition) => Filter.type(definition.schema)))),
+    [artifactDefinitions],
+  );
+  const artifactItems = useQuery(space, query);
+  const messages = [...(queue?.objects ?? []), ...(processor?.messages.value ?? [])];
+
+  const handleSubmit = useCallback(
+    (message: string) => {
+      requestAnimationFrame(async () => {
+        if (!processor || !queue) {
+          return;
+        }
 
-        return true;
-      }
-    : undefined;
+        if (processor.streaming.value) {
+          await processor.cancel();
+        }
+
+        await processor.request(message, {
+          history: queue.objects,
+          onComplete: (messages) => {
+            queue.append(messages);
+          },
+        });
+      });
 
-  const handlePrompt = useCallback(
-    (text: string) => {
-      void handleSubmit?.(text);
+      return true;
     },
-    [handleSubmit],
+    [processor, queue],
   );
 
   const handleDelete = useCallback(
     (id: string) => {
-      invariant(ObjectId.isValid(id), 'Invalid message id');
+      invariant(Type.ObjectId.isValid(id), 'Invalid message id');
       void queue?.delete([id]);
     },
     [queue],
   );
 
+  if (!space) {
+    return <></>;
+  }
+
   return (
     <div className='grid grid-cols-2 w-full h-full divide-x divide-separator overflow-hidden'>
       {/* Thread */}
@@ -160,7 +174,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
               iconOnly
               label='Clear history'
               icon='ph--trash--regular'
-              onClick={() => setQueueDxn(randomQueueDxn())}
+              onClick={() => setQueueDxn(createQueueDxn(space.id).toString())}
             />
             <IconButton iconOnly label='Stop' icon='ph--stop--regular' onClick={() => processor?.cancel()} />
           </Input.Root>
@@ -173,7 +187,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
           error={processor?.error.value}
           tools={processor?.tools}
           onSubmit={processor ? handleSubmit : undefined}
-          onPrompt={processor ? handlePrompt : undefined}
+          onPrompt={processor ? handleSubmit : undefined}
           onDelete={processor ? handleDelete : undefined}
           {...props}
         />
@@ -183,7 +197,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
       <div className='overflow-hidden grid grid-rows-[2fr_1fr] divide-y divide-separator'>
         {artifactItems.length > 0 && (
           <div className={mx('flex grow overflow-hidden', artifactItems.length === 1 && 'row-span-2')}>
-            <Surface role='canvas-node' limit={1} data={artifactItems[0]} />
+            <Surface role='article' limit={1} data={{ subject: artifactItems[0] }} fallback={Fallback} />
           </div>
         )}
 
@@ -191,7 +205,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
           <div className='flex shrink-0 overflow-hidden divide-x divide-separator'>
             <div className='flex flex-1 h-full'>
               {artifactItems.slice(1, 3).map((item, idx) => (
-                <Surface key={idx} role='canvas-node' limit={1} data={item} />
+                <Surface key={idx} role='article' limit={1} data={{ subject: item }} fallback={Fallback} />
               ))}
             </div>
           </div>
@@ -201,18 +215,10 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
   );
 };
 
-const randomQueueDxn = () =>
-  new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, SpaceId.random(), ObjectId.random()]).toString();
-
 const meta: Meta<typeof DefaultStory> = {
-  title: 'plugins/plugin-automation/ThreadContainer',
+  title: 'plugins/plugin-assistant/ThreadContainer',
   render: DefaultStory,
   decorators: [
-    withSignals,
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-    }),
     withPluginManager({
       plugins: [
         ClientPlugin({
@@ -220,7 +226,7 @@ const meta: Meta<typeof DefaultStory> = {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin({ observability: false }),
+        SpacePlugin(),
         SettingsPlugin(),
         IntentPlugin(),
 
@@ -228,12 +234,13 @@ const meta: Meta<typeof DefaultStory> = {
         ChessPlugin(),
         InboxPlugin(),
         MapPlugin(),
+        MarkdownPlugin(),
         TablePlugin(),
       ],
       fireEvents: [Events.SetupArtifactDefinition],
     }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
+    withLayout({ fullscreen: true }),
   ],
   parameters: {
     translations,
@@ -255,9 +262,23 @@ export const WithInitialItems: Story = {
   args: {
     debug: true,
     items: [
-      createStatic(ChessType, {
+      create(ChessType, {
         fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
       }),
     ],
   },
 };
+
+const Fallback = ({ error }: { error?: Error }) => {
+  const errorString = error?.toString() ?? '';
+  return (
+    <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
+      <p
+        role='alert'
+        className={mx(descriptionMessage, 'break-words rounded-lg p-8', errorString.length < 256 && 'text-lg')}
+      >
+        {error ? errorString : 'error'}
+      </p>
+    </div>
+  );
+};

package/src/components/Thread/ThreadContainer.tsx

@@ -2,10 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, type FC } from 'react';
+import React, { useCallback, type FC, useEffect } from 'react';
 
+import { CollaborationActions, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type AssociatedArtifact } from '@dxos/artifact';
 import { invariant } from '@dxos/invariant';
+import { DXN } from '@dxos/keys';
+import { refFromDXN } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { getSpace } from '@dxos/react-client/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -19,7 +22,7 @@ export type ThreadContainerProps = {
   settings?: AssistantSettingsProps;
   part?: 'deck' | 'dialog';
   associatedArtifact?: AssociatedArtifact;
-} & Pick<ThreadProps, 'debug' | 'transcription' | 'onOpenChange'>;
+} & Pick<ThreadProps, 'debug' | 'transcription' | 'onOpenChange' | 'onAddToGraph'>;
 
 // TODO(burdon): Since this only wraps Thread, just separate out hook?
 export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
@@ -35,7 +38,25 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
   const contextProvider = useContextProvider(space);
   const processor = useChatProcessor({ chat, space, settings, part, associatedArtifact });
   const messageQueue = useMessageQueue(chat);
-  const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  // TODO(thure): This will be referentially new on every render, is it causing overreactivity?
+  const messages = [...(messageQueue?.objects ?? []), ...processor.messages.value];
+
+  // Post last message to document.
+  useEffect(() => {
+    if (!processor.streaming.value && messageQueue?.objects) {
+      const message = messageQueue.objects[messageQueue.objects.length - 1];
+      if (space && chat && message && dispatch && associatedArtifact) {
+        void dispatch(
+          createIntent(CollaborationActions.InsertContent, {
+            target: associatedArtifact,
+            object: refFromDXN(new DXN(DXN.kind.QUEUE, [...chat.queue.dxn.parts, message.id])),
+            label: 'View proposal',
+          }),
+        );
+      }
+    }
+  }, [messageQueue, associatedArtifact, processor.streaming.value]);
 
   const handleSubmit = useCallback(
     (text: string) => {
@@ -49,7 +70,7 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
 
       invariant(messageQueue);
       void processor.request(text, {
-        history: messageQueue.items,
+        history: messageQueue.objects,
         onComplete: (messages) => {
           messageQueue.append(messages);
         },
@@ -74,11 +95,11 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
       processing={processor.streaming.value}
       error={processor.error.value}
       tools={processor.tools}
+      contextProvider={contextProvider}
       onSubmit={handleSubmit}
       onCancel={handleCancel}
       onPrompt={handleSubmit}
       onOpenChange={onOpenChange}
-      contextProvider={contextProvider}
       {...props}
     />
   );

package/src/components/Thread/ThreadMessage.tsx

@@ -2,9 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type PropsWithChildren, type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type MessageContentBlock, type Message, type ToolType } from '@dxos/artifact';
+import { type MessageContentBlock, type Message, type Tool } from '@dxos/ai';
+import { Surface } from '@dxos/app-framework';
+import { type Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { type Space } from '@dxos/react-client/echo';
 import { Button, Icon, IconButton, type ThemedClassName } from '@dxos/react-ui';
@@ -20,8 +22,8 @@ import { safeParseJson } from '@dxos/util';
 import { ToolBlock, isToolMessage } from './ToolInvocations';
 import { ToolboxContainer } from '../Toolbox';
 
-const panelClassNames = 'flex flex-col w-full px-2 bg-groupSurface rounded-md';
-const userClassNames = 'bg-[--user-fill] text-inverse';
+const panelClassNames = 'flex flex-col w-full px-2 bg-activeSurface rounded-md';
+const userClassNames = 'bg-[--user-fill] text-accentSurfaceText';
 
 const ToggleContainer = (props: ToggleContainerProps) => {
   return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
@@ -43,12 +45,20 @@ export type ThreadMessageProps = ThemedClassName<{
   space?: Space;
   message: Message;
   debug?: boolean;
-  tools?: ToolType[];
+  tools?: Tool[];
   onPrompt?: (text: string) => void;
   onDelete?: (id: string) => void;
+  onAddToGraph?: (object: Obj.Any) => void;
 }>;
 
-export const ThreadMessage: FC<ThreadMessageProps> = ({ classNames, space, message, tools, onPrompt }) => {
+export const ThreadMessage: FC<ThreadMessageProps> = ({
+  classNames,
+  space,
+  message,
+  tools,
+  onPrompt,
+  onAddToGraph,
+}) => {
   const { role, content = [] } = message;
 
   // TODO(burdon): Restructure types to make check unnecessary.
@@ -74,13 +84,18 @@ export const ThreadMessage: FC<ThreadMessageProps> = ({ classNames, space, messa
         classNames={mx(classNames, 'animate-[fadeIn_0.5s]')}
         user={block.type === 'text' && role === 'user'}
       >
-        <Component space={space} block={block} onPrompt={onPrompt} />
+        <Component space={space} block={block} onPrompt={onPrompt} onAddToGraph={onAddToGraph} />
       </MessageContainer>
     );
   });
 };
 
-type BlockComponent = FC<{ space?: Space; block: MessageContentBlock; onPrompt?: (text: string) => void }>;
+type BlockComponent = FC<{
+  space?: Space;
+  block: MessageContentBlock;
+  onPrompt?: (text: string) => void;
+  onAddToGraph?: (object: Obj.Any) => void;
+}>;
 
 const components: Record<string, BlockComponent> = {
   //
@@ -105,7 +120,7 @@ const components: Record<string, BlockComponent> = {
     return (
       <ToggleContainer
         // open={open}
-        defaultOpen={block.disposition === 'cot' && block.pending}
+        defaultOpen={systemDispositions.includes(block.disposition ?? '') && block.pending}
         title={title}
         icon={
           block.pending ? (
@@ -115,7 +130,7 @@ const components: Record<string, BlockComponent> = {
       >
         <MarkdownViewer
           content={block.text}
-          classNames={['pbe-2', block.disposition === 'cot' && 'text-sm text-subdued']}
+          classNames={['pbe-2', systemDispositions.includes(block.disposition ?? '') && 'text-sm text-subdued']}
         />
       </ToggleContainer>
     );
@@ -124,7 +139,7 @@ const components: Record<string, BlockComponent> = {
   //
   // JSON
   //
-  ['json' as const]: ({ space, block, onPrompt }) => {
+  ['json' as const]: ({ space, block, onPrompt, onAddToGraph }) => {
     invariant(block.type === 'json');
 
     switch (block.disposition) {
@@ -158,6 +173,26 @@ const components: Record<string, BlockComponent> = {
         );
       }
 
+      case 'graph': {
+        return (
+          <div className='flex flex-wrap gap-1'>
+            <Surface
+              role='card'
+              data={{ subject: JSON.parse(block.json ?? '{}') }}
+              limit={1}
+              fallback={<div className='font-mono text-xs text-pre'>{block.json}</div>}
+            />
+            {onAddToGraph && (
+              <IconButton
+                icon='ph--plus--regular'
+                label='Add to graph'
+                onClick={() => onAddToGraph?.(JSON.parse(block.json ?? '{}'))}
+              />
+            )}
+          </div>
+        );
+      }
+
       default: {
         const title = block.disposition ? titles[block.disposition] : undefined;
         return (
@@ -193,4 +228,7 @@ const titles: Record<string, string> = {
   ['tool_use' as const]: 'Tool request',
   ['tool_result' as const]: 'Tool result',
   ['tool_list' as const]: 'Tools',
+  ['artifact-update' as const]: 'Artifact(s) changed',
 };
+
+const systemDispositions: string[] = ['cot', 'artifact-update'];