@dxos/plugin-assistant 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/src/containers/ChatDialog/ChatDialog.tsx

@@ -13,7 +13,7 @@ import { ChatDialog as NaturalChatDialog } from '@dxos/react-ui-chat';
 import { Chat, type ChatRootProps } from '#components';
 import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
 import { meta } from '#meta';
-import { AssistantCapabilities } from '#types';
+import { type Assistant, AssistantCapabilities } from '#types';
 
 export type ChatDialogProps = {
   chat?: ChatTypes.Chat;
@@ -28,13 +28,7 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
   const [online, setOnline] = useOnline();
   const { preset, ...chatProps } = usePresets(online);
   const blueprintRegistry = useBlueprintRegistry();
-  const processor = useChatProcessor({
-    chat,
-    preset,
-    runtime,
-    blueprintRegistry,
-    settings,
-  });
+  const processor = useChatProcessor({ chat, preset, runtime, blueprintRegistry, settings });
 
   // TODO(burdon): Refocus when open.
   const [open, setOpen] = useState(true);
@@ -61,7 +55,7 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
       <NaturalChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
         <NaturalChatDialog.Header title={t('assistant-dialog.title')} />
         <NaturalChatDialog.Content>
-          <Chat.Thread />
+          <Chat.Thread viewType={(chat.view as Assistant.ChatView | undefined) ?? settings.chatView} />
         </NaturalChatDialog.Content>
         <NaturalChatDialog.Footer classNames='p-1.5'>
           <Chat.Prompt {...chatProps} preset={preset?.id} online={online} onOnlineChange={setOnline} expandable />

package/src/containers/{PromptArticle/PromptArticle.tsx → RoutineArticle/RoutineArticle.tsx}

@@ -6,10 +6,10 @@ import React, { useMemo } from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { AgentPrompt } from '@dxos/assistant-toolkit';
-import { type Prompt } from '@dxos/blueprints';
+import { type Routine } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
 import { useComputeRuntimeCallback } from '@dxos/plugin-automation/hooks';
 import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
@@ -17,9 +17,9 @@ import { useAttention } from '@dxos/react-ui-attention';
 import { TemplateEditor } from '#components';
 import { meta } from '#meta';
 
-export type PromptArticleProps = AppSurface.ObjectArticleProps<Prompt.Prompt>;
+export type RoutineArticleProps = AppSurface.ObjectArticleProps<Routine.Routine>;
 
-export const PromptArticle = ({ role, attendableId, subject }: PromptArticleProps) => {
+export const RoutineArticle = ({ role, attendableId, subject }: RoutineArticleProps) => {
   const { t } = useTranslation(meta.id);
   const { hasAttention } = useAttention(attendableId);
   const db = Obj.getDatabase(subject);

package/src/containers/RoutineArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { RoutineArticle as default } from './RoutineArticle';

package/src/containers/{PromptList/PromptList.stories.tsx → RoutineList/RoutineList.stories.tsx}

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Prompt } from '@dxos/blueprints';
+import { Routine } from '@dxos/compute';
 import { Filter } from '@dxos/echo';
 import { AutomationPlugin } from '@dxos/plugin-automation';
 import { ClientPlugin } from '@dxos/plugin-client';
@@ -20,10 +20,11 @@ import { Panel } from '@dxos/react-ui';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { Organization } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { AssistantPlugin } from '../../AssistantPlugin';
-import { translations } from '../../translations';
 import { TracePanel } from '../TracePanel';
-import { PromptList } from './PromptList';
+import { RoutineList } from './RoutineList';
 
 // TODO(burdon): Factor out (see assistant-stories)
 export const config = {
@@ -60,17 +61,17 @@ const DefaultStory = () => {
   return (
     <Panel.Root>
       <Panel.Toolbar className='flex p-1 items-center'>
-        <PromptList subject={subject} role='toolbar-input' />
+        <RoutineList subject={subject} role='toolbar-input' attendableId='story' />
       </Panel.Toolbar>
       <Panel.Content>
-        <TracePanel space={space} />
+        <TracePanel role='article' space={space} attendableId={space.id} />
       </Panel.Content>
     </Panel.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-assistant/containers/PromptList',
+  title: 'plugins/plugin-assistant/containers/RoutineList',
   render: DefaultStory,
   decorators: [
     withLayout({ layout: 'column' }),
@@ -78,7 +79,7 @@ const meta = {
       plugins: [
         ...corePlugins(),
         ClientPlugin({
-          types: [Prompt.Prompt, Organization.Organization, Markdown.Document],
+          types: [Routine.Routine, Organization.Organization, Markdown.Document],
           config: config.remote,
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
@@ -91,19 +92,19 @@ const meta = {
                 }),
               );
               space.db.add(
-                Prompt.make({
+                Routine.make({
                   name: 'Summarize',
                   instructions: 'Create a new markdown document that is a summary of the selected object.',
                 }),
               );
               space.db.add(
-                Prompt.make({
+                Routine.make({
                   name: 'Analyze',
                   instructions: 'Analyze the selected content.',
                 }),
               );
               space.db.add(
-                Prompt.make({
+                Routine.make({
                   name: 'Translate',
                   instructions: 'Translate the selected content to Spanish.',
                 }),

package/src/containers/{PromptList/PromptList.tsx → RoutineList/RoutineList.tsx}

@@ -6,20 +6,21 @@ import React from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { DatabaseBlueprint, MarkdownBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
-import { Prompt } from '@dxos/blueprints';
+import { DatabaseBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Routine } from '@dxos/compute';
 import { Filter, Obj, Ref } from '@dxos/echo';
+import { MarkdownBlueprint } from '@dxos/plugin-markdown/blueprints';
 import { useQuery } from '@dxos/react-client/echo';
 import { IconButton } from '@dxos/react-ui';
 
 import { AssistantOperation } from '#operations';
 
-export type PromptListProps = AppSurface.ObjectSectionProps<Obj.Unknown>;
+export type RoutineListProps = AppSurface.ObjectSectionProps<Obj.Unknown>;
 
-export const PromptList = ({ subject }: PromptListProps) => {
+export const RoutineList = ({ subject }: RoutineListProps) => {
   const { invokePromise } = useOperationInvoker();
   const db = Obj.getDatabase(subject);
-  const prompts = useQuery(db, Filter.type(Prompt.Prompt));
+  const prompts = useQuery(db, Filter.type(Routine.Routine));
   if (!db) {
     return null;
   }

package/src/containers/RoutineList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { RoutineList as default } from './RoutineList';

package/src/containers/TracePanel/TracePanel.stories.tsx

@@ -0,0 +1,278 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { PropsWithChildren, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { addEventListener } from '@dxos/async';
+import { Process, Trace } from '@dxos/compute';
+import { Feed, Filter, Query } from '@dxos/echo';
+import { FeedTraceSink, ProcessManager } from '@dxos/functions-runtime';
+import { log } from '@dxos/log';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { useComputeRuntime } from '@dxos/plugin-automation/hooks';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { IconButton, Panel, Toolbar } from '@dxos/react-ui';
+import { Timeline } from '@dxos/react-ui-components';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { AssistantPlugin } from '../../cli';
+import { buildExecutionGraph } from './execution-graph';
+import { PLAYBACK_INTERVAL_MS, STEP_STORAGE_KEY, SimulatedAgent, useLocalStorageNumber } from './testing';
+import { TracePanel } from './TracePanel';
+
+type BaseStoryProps = PropsWithChildren<{
+  toolbar: ReactNode;
+}>;
+
+const BaseStory = ({ children, toolbar }: BaseStoryProps) => (
+  <Panel.Root>
+    <Panel.Toolbar asChild>{toolbar}</Panel.Toolbar>
+    <Panel.Content asChild>{children}</Panel.Content>
+  </Panel.Root>
+);
+
+const DefaultStory = () => {
+  const [space] = useSpaces();
+  const runtime = useComputeRuntime(space?.id);
+
+  const handleStart = useCallback(() => {
+    if (!runtime) {
+      return;
+    }
+
+    void runtime.runPromise(
+      Effect.gen(function* () {
+        const manager = yield* ProcessManager.Service;
+        const handle = yield* manager.spawn(SimulatedAgent);
+        yield* handle.submitInput(Math.floor(Math.random() * 1_000));
+        log.info('submitInput', { handle });
+      }),
+    );
+  }, [runtime]);
+
+  // TODO(burdon): Implement.
+  const handleStop = useCallback(
+    (process: Process.Info) => {
+      log.info('stop', { process });
+    },
+    [runtime],
+  );
+
+  return (
+    <BaseStory
+      toolbar={
+        <Toolbar.Root>
+          <IconButton icon='ph--plus--regular' label='Start Agent' onClick={handleStart} />
+        </Toolbar.Root>
+      }
+    >
+      <TracePanel space={space} attendableId={space.id} onProcessTerminate={handleStop} />
+    </BaseStory>
+  );
+};
+
+const SnapshotStory = () => {
+  const [space] = useSpaces();
+  const [feed] = useQuery(space?.db, FeedTraceSink.query);
+
+  // All messages.
+  const allMessages = useQuery(
+    space?.db,
+    feed ? Query.select(Filter.everything()).from(feed) : Query.select(Filter.nothing()),
+  );
+
+  // Sort by first event timestamp so playback order is chronological regardless of query ordering.
+  const sortedMessages = useMemo(
+    () => [...allMessages].sort((a, b) => (a.events[0]?.timestamp ?? 0) - (b.events[0]?.timestamp ?? 0)),
+    [allMessages],
+  );
+
+  const total = sortedMessages.length;
+  const [step, setStep, stepHydrated] = useLocalStorageNumber(STEP_STORAGE_KEY, 0);
+  const [playing, setPlaying] = useState(false);
+
+  useEffect(() => {
+    setStep((current) => Math.min(Math.max(current, 0), total));
+  }, [total, setStep]);
+
+  // Start with all messages loaded once the snapshot first arrives; afterwards the user controls `step`.
+  // Skip the auto-init if we restored a value from localStorage so we don't clobber the user's last position.
+  const hasInitializedRef = useRef(false);
+  useEffect(() => {
+    if (!hasInitializedRef.current && total > 0) {
+      hasInitializedRef.current = true;
+      if (!stepHydrated) {
+        setStep(total);
+      }
+    }
+  }, [total, stepHydrated, setStep]);
+
+  const visibleMessages = useMemo(() => sortedMessages.slice(0, step), [sortedMessages, step]);
+  const { commits, branches } = useMemo(
+    () => buildExecutionGraph({ traceMessages: visibleMessages }),
+    [visibleMessages],
+  );
+
+  // Auto-play steps forward until we reach the end.
+  useEffect(() => {
+    if (!playing) {
+      return;
+    }
+    const id = window.setInterval(() => {
+      setStep((current) => {
+        if (current >= total) {
+          setPlaying(false);
+          return current;
+        }
+        return current + 1;
+      });
+    }, PLAYBACK_INTERVAL_MS);
+    return () => window.clearInterval(id);
+  }, [playing, total]);
+
+  // Handlers.
+  const handleNext = useCallback(() => setStep((current) => Math.min(current + 1, total)), [total]);
+  const handlePrev = useCallback(() => setStep((current) => Math.max(current - 1, 0)), []);
+  const handleReset = useCallback(() => {
+    setStep(0);
+    setPlaying(false);
+  }, []);
+  const handleShowAll = useCallback(() => {
+    setStep(total);
+    setPlaying(false);
+  }, [total]);
+  const handleTogglePlay = useCallback(() => setPlaying((previous) => !previous), []);
+
+  // Keyboard shortcuts: ←/h step back, →/l step forward, space play/pause, r reset, e/End show all.
+  useEffect(() => {
+    return addEventListener(window, 'keydown', (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA' || target?.isContentEditable) {
+        return;
+      }
+
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'l':
+          event.preventDefault();
+          handleNext();
+          break;
+        case 'ArrowLeft':
+        case 'h':
+          event.preventDefault();
+          handlePrev();
+          break;
+        case ' ':
+          event.preventDefault();
+          handleTogglePlay();
+          break;
+        case 'r':
+          event.preventDefault();
+          handleReset();
+          break;
+        case 'e':
+        case 'End':
+          event.preventDefault();
+          handleShowAll();
+          break;
+      }
+    });
+  }, [handleNext, handlePrev, handleTogglePlay, handleReset, handleShowAll]);
+
+  return (
+    <BaseStory
+      toolbar={
+        <Toolbar.Root>
+          <IconButton iconOnly icon='ph--skip-back--regular' label='Reset (R)' onClick={handleReset} />
+          <IconButton iconOnly icon='ph--caret-left--regular' label='Step back (← / H)' onClick={handlePrev} />
+          <IconButton
+            iconOnly
+            icon={playing ? 'ph--pause--regular' : 'ph--play--regular'}
+            label={playing ? 'Pause (Space)' : 'Play (Space)'}
+            onClick={handleTogglePlay}
+          />
+          <IconButton iconOnly icon='ph--caret-right--regular' label='Step forward (→ / L)' onClick={handleNext} />
+          <IconButton iconOnly icon='ph--skip-forward--regular' label='Show all (E / End)' onClick={handleShowAll} />
+          <Toolbar.Separator />
+          <Toolbar.Text className='text-sm tabular-nums opacity-70'>
+            `${step} / ${total}`
+          </Toolbar.Text>
+        </Toolbar.Root>
+      }
+    >
+      <Timeline branches={branches} commits={commits} showTimestamp />
+    </BaseStory>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/TracePanel',
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size) overflow-hidden' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Feed.Feed, Trace.Message],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+              const [space] = client.spaces.get();
+              yield* Effect.promise(() => space.waitUntilReady());
+            }),
+        }),
+        AssistantPlugin(),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+};
+
+export const WithSnapshot: Story = {
+  render: SnapshotStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Feed.Feed, Trace.Message],
+          onClientInitialized: ({ client }) =>
+            Effect.promise(async () => {
+              await client.halo.createIdentity();
+              const data = await import('../../testing/data/trace-timeline.dx.json');
+              const space = await client.spaces.import({
+                filename: 'trace-events.dx.json',
+                contents: new TextEncoder().encode(JSON.stringify(data)),
+              });
+              await space.db.flush();
+            }),
+        }),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+};