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

package/src/containers/RoutineList/RoutineList.stories.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { SERVICES_CONFIG } from '@dxos/ai/testing';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Routine } from '@dxos/compute';
+import { Filter } from '@dxos/echo';
+import { AutomationPlugin } from '@dxos/plugin-automation/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { Markdown } from '@dxos/plugin-markdown';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config } from '@dxos/react-client';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+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 { TracePanel } from '../TracePanel';
+import { RoutineList } from './RoutineList';
+
+// TODO(burdon): Factor out (see assistant-stories)
+export const config = {
+  remote: new Config({
+    runtime: {
+      services: SERVICES_CONFIG.REMOTE,
+    },
+  }),
+  persistent: new Config({
+    runtime: {
+      client: {
+        storage: {
+          persistent: true,
+        },
+      },
+      services: SERVICES_CONFIG.REMOTE,
+    },
+  }),
+  local: new Config({
+    runtime: {
+      services: SERVICES_CONFIG.LOCAL,
+    },
+  }),
+};
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const [subject] = useQuery(space?.db, Filter.type(Organization.Organization));
+  if (!subject) {
+    return <Loading data={{ space: !!space, subject: !!subject }} />;
+  }
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar className='flex p-1 items-center'>
+        <RoutineList subject={subject} role='toolbar-input' attendableId='story' />
+      </Panel.Toolbar>
+      <Panel.Content>
+        <TracePanel role='article' space={space} attendableId={space.id} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/RoutineList',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Routine.Routine, Organization.Organization, Markdown.Document],
+          config: config.remote,
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+              space.db.add(
+                Organization.make({
+                  name: 'DXOS',
+                }),
+              );
+              space.db.add(
+                Routine.make({
+                  name: 'Summarize',
+                  instructions: 'Create a new markdown document that is a summary of the selected object.',
+                }),
+              );
+              space.db.add(
+                Routine.make({
+                  name: 'Analyze',
+                  instructions: 'Analyze the selected content.',
+                }),
+              );
+              space.db.add(
+                Routine.make({
+                  name: 'Translate',
+                  instructions: 'Translate the selected content to Spanish.',
+                }),
+              );
+            }),
+        }),
+
+        AssistantPlugin(),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/RoutineList/RoutineList.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+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';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton } from '@dxos/react-ui';
+
+import { AssistantOperation } from '#types';
+
+export type RoutineListProps = AppSurface.ObjectSectionProps<Obj.Unknown>;
+
+export const RoutineList = ({ subject }: RoutineListProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(subject);
+  const prompts = useQuery(db, Filter.type(Routine.Routine));
+  if (!db) {
+    return null;
+  }
+
+  return (
+    <div className='flex gap-2'>
+      {prompts.map((prompt, i) => (
+        <div key={i}>
+          <IconButton
+            icon='ph--magic-wand--regular'
+            label={Obj.getLabel(prompt) ?? Obj.getURI(prompt)}
+            onClick={() => {
+              void invokePromise(AssistantOperation.RunPromptInNewChat, {
+                db,
+                prompt: Ref.make(prompt),
+                objects: [subject],
+                // TODO(burdon): Concifgure from Prompt object.
+                blueprints: [DatabaseBlueprint.key, WebSearchBlueprint.key, MarkdownBlueprint.key],
+                background: true,
+              });
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

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,347 @@
+//
+// 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 { useProcessManagerRuntime } from '@dxos/app-framework/ui';
+import { addEventListener } from '@dxos/async';
+import { Process, Trace } from '@dxos/compute';
+import { ProcessManager } from '@dxos/compute-runtime';
+import { Feed, Filter, Query } from '@dxos/echo';
+import { FeedTraceSink } from '@dxos/functions-runtime';
+import { log } from '@dxos/log';
+import { AutomationPlugin } from '@dxos/plugin-automation/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { IconButton, Panel, ScrollContainer, Toolbar } from '@dxos/react-ui';
+import { Timeline } from '@dxos/react-ui-components';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { buildExecutionGraph } from '#execution-graph';
+import { AssistantPlugin } from '#plugin';
+import { translations } from '#translations';
+
+import subAgentFixture from '../../execution-graph/testing/sub-agent-delegation.json';
+// TODO(dmaretskyi): testing.ts module shadows the ./testing dir.
+import { initClientFromSpaceSnapshot } from '../../testing/snapshot';
+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 = useProcessManagerRuntime();
+
+  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],
+  );
+
+  return <TimelinePlayback messages={sortedMessages} />;
+};
+
+// Raw Trace.Message[] captured from a live sub-agent delegation via `dxosDumpTrace()` (see
+// TracePanel). External JSON → typed at this boundary; `buildExecutionGraph` only reads
+// `meta`/`events`, so the plain data shape is sufficient.
+const subAgentMessages = subAgentFixture as unknown as Trace.Message[];
+
+const FixtureStory = () => {
+  const sortedMessages = useMemo(
+    () => [...subAgentMessages].sort((a, b) => (a.events[0]?.timestamp ?? 0) - (b.events[0]?.timestamp ?? 0)),
+    [],
+  );
+
+  return <TimelinePlayback messages={sortedMessages} />;
+};
+
+/**
+ * Step/playback over a fixed list of trace messages — renders the execution-graph Timeline at each
+ * step so layout (e.g. concurrent sub-agent lanes) can be inspected as events "stream" in.
+ */
+const TimelinePlayback = ({ messages: sortedMessages }: { messages: readonly Trace.Message[] }) => {
+  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 (
+    <ScrollContainer.Root pin>
+      <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.Text className='text-right text-sm tabular-nums opacity-70'>
+              {step} / {total}
+            </Toolbar.Text>
+          </Toolbar.Root>
+        }
+      >
+        <ScrollContainer.Content thin>
+          <ScrollContainer.Viewport>
+            <Timeline branches={branches} commits={commits} showTimestamp />
+          </ScrollContainer.Viewport>
+          <ScrollContainer.ScrollDownButton />
+          <ScrollContainer.Fade />
+        </ScrollContainer.Content>
+      </BaseStory>
+    </ScrollContainer.Root>
+  );
+};
+
+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 WithSubAgentFixture: Story = {
+  render: FixtureStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' })],
+};
+
+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: initClientFromSpaceSnapshot(() => import('../../testing/data/trace-timeline.dx.json')),
+        }),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+};
+
+export const WithRemoteSnapshot: Story = {
+  render: SnapshotStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Feed.Feed, Trace.Message],
+          onClientInitialized: initClientFromSpaceSnapshot(
+            () => import('../../testing/data/trace-timeline-remote.dx.json'),
+          ),
+        }),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+};
+
+export const WithRemoteMultipleSnapshot: Story = {
+  render: SnapshotStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column', classNames: 'w-(--dx-complementary-sidebar-size)' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Feed.Feed, Trace.Message],
+          onClientInitialized: initClientFromSpaceSnapshot(
+            () => import('../../testing/data/trace-timeline-multiple.dx.json'),
+          ),
+        }),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+};