@dxos/plugin-assistant 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/src/containers/PromptArticle/PromptArticle.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { 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';
+
+import { TemplateEditor } from '#components';
+import { meta } from '#meta';
+
+export type PromptArticleProps = AppSurface.ObjectArticleProps<Prompt.Prompt>;
+
+export const PromptArticle = ({ role, attendableId, subject }: PromptArticleProps) => {
+  const { t } = useTranslation(meta.id);
+  const { hasAttention } = useAttention(attendableId);
+  const db = Obj.getDatabase(subject);
+
+  const inputData = useMemo<Operation.Definition.Input<typeof AgentPrompt> | undefined>(
+    () =>
+      subject && db
+        ? {
+            prompt: db.makeRef(Obj.getDXN(subject)),
+            input: {},
+          }
+        : undefined,
+    [subject, db],
+  );
+
+  const handleRun = useComputeRuntimeCallback(
+    db?.spaceId,
+    () => {
+      invariant(inputData);
+      return Operation.invoke(AgentPrompt, inputData);
+    },
+    [inputData],
+  );
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention} onClick={handleRun}>
+          <Toolbar.IconButton iconOnly icon='ph--play--regular' label={t('run-prompt.label')} onClick={handleRun} />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <TemplateEditor id={subject.id} template={subject.instructions} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/PromptArticle/index.ts

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

package/src/containers/PromptList/PromptList.stories.tsx

@@ -0,0 +1,129 @@
+//
+// 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 { Prompt } from '@dxos/blueprints';
+import { Filter } from '@dxos/echo';
+import { AutomationPlugin } from '@dxos/plugin-automation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { Markdown } from '@dxos/plugin-markdown/types';
+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 { AssistantPlugin } from '../../AssistantPlugin';
+import { translations } from '../../translations';
+import { TracePanel } from '../TracePanel';
+import { PromptList } from './PromptList';
+
+// 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'>
+        <PromptList subject={subject} role='toolbar-input' attendableId='story' />
+      </Panel.Toolbar>
+      <Panel.Content>
+        <TracePanel space={space} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/PromptList',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Prompt.Prompt, 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(
+                Prompt.make({
+                  name: 'Summarize',
+                  instructions: 'Create a new markdown document that is a summary of the selected object.',
+                }),
+              );
+              space.db.add(
+                Prompt.make({
+                  name: 'Analyze',
+                  instructions: 'Analyze the selected content.',
+                }),
+              );
+              space.db.add(
+                Prompt.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/PromptList/PromptList.tsx

@@ -0,0 +1,49 @@
+//
+// 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, MarkdownBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Prompt } from '@dxos/blueprints';
+import { Filter, Obj, Ref } from '@dxos/echo';
+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 const PromptList = ({ subject }: PromptListProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(subject);
+  const prompts = useQuery(db, Filter.type(Prompt.Prompt));
+  if (!db) {
+    return null;
+  }
+
+  return (
+    <div role='none' className='flex gap-2'>
+      {prompts.map((prompt, i) => (
+        <div key={i}>
+          <IconButton
+            icon='ph--magic-wand--regular'
+            label={Obj.getLabel(prompt) ?? Obj.getDXN(prompt).toString()}
+            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/PromptList/index.ts

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

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

@@ -0,0 +1,230 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Registry } from '@effect-atom/atom';
+import * as KeyValueStore from '@effect/platform/KeyValueStore';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AgentRequestBegin, AgentRequestEnd, CompleteBlock } from '@dxos/assistant';
+import { Database, Feed } from '@dxos/echo';
+import { createFeedServiceLayer } from '@dxos/echo-db';
+import { Process, ServiceResolver, Trace } from '@dxos/functions';
+import { FeedTraceSink, ProcessManager } from '@dxos/functions-runtime';
+import { ObjectId } from '@dxos/keys';
+import { OperationHandlerSet } from '@dxos/operation';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { type Space, useSpaces } from '@dxos/react-client/echo';
+import { IconButton, Panel, Toolbar } from '@dxos/react-ui';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+import { TracePanel } from './TracePanel';
+
+//
+// Helpers.
+//
+
+const delay = (ms: number) => Effect.promise(() => new Promise<void>((resolve) => setTimeout(resolve, ms)));
+
+//
+// Simulated agent scenarios.
+//
+
+const agentScenarios: { prompt: string; tools: string[] }[] = [
+  {
+    prompt: 'Create an organization called "Cyberdyne Systems"',
+    tools: ['list-schemas', 'create-object'],
+  },
+  {
+    prompt: 'Search for all organizations and persons',
+    tools: ['list-schemas', 'query', 'query'],
+  },
+  {
+    prompt: 'Create a person named "John Connor"',
+    tools: ['create-object'],
+  },
+];
+
+/**
+ * Write a trace event and yield to the event loop so FeedTraceSink flushes it to ECHO before continuing.
+ */
+const writeAndFlush = <T,>(eventType: Trace.EventType<T>, payload: T) =>
+  Effect.gen(function* () {
+    yield* Trace.write(eventType, payload);
+    yield* Effect.promise(() => new Promise((resolve) => setTimeout(resolve, 100)));
+  });
+
+const SimulatedAgent = Process.make(
+  {
+    key: 'org.dxos.testing.process.agent',
+    input: Schema.Number,
+    output: Schema.Void,
+    services: [Trace.TraceService],
+  },
+  (ctx) =>
+    Effect.succeed({
+      onInput: (scenarioIndex: number) =>
+        Effect.gen(function* () {
+          const scenario = agentScenarios[scenarioIndex % agentScenarios.length];
+          const messageId = ObjectId.random();
+
+          // Agent begins processing.
+          yield* writeAndFlush(AgentRequestBegin, {});
+
+          // User message.
+          yield* writeAndFlush(CompleteBlock, {
+            messageId,
+            role: 'user',
+            block: { _tag: 'text', text: scenario.prompt },
+          });
+
+          // Simulate tool calls sequentially with delays.
+          for (const toolName of scenario.tools) {
+            const toolCallId = ObjectId.random();
+
+            // Tool call event.
+            yield* writeAndFlush(CompleteBlock, {
+              messageId,
+              role: 'assistant',
+              block: { _tag: 'toolCall', toolCallId, name: toolName, input: '{}', providerExecuted: false },
+            });
+
+            // Simulate tool execution time.
+            yield* delay(1_000 + Math.random() * 3_000);
+
+            // Tool result event.
+            yield* writeAndFlush(CompleteBlock, {
+              messageId,
+              role: 'assistant',
+              block: { _tag: 'toolResult', toolCallId, name: toolName, providerExecuted: false },
+            });
+          }
+
+          // Agent completes.
+          yield* writeAndFlush(AgentRequestEnd, {});
+          ctx.succeed();
+        }).pipe(Effect.orDie),
+      onAlarm: () => Effect.void,
+      onChildEvent: () => Effect.void,
+    }),
+);
+
+//
+// Story runtime — lightweight ProcessManager + FeedTraceSink.
+//
+
+type StoryRuntime = ManagedRuntime.ManagedRuntime<ProcessManager.ProcessManagerService, never>;
+
+const createStoryRuntime = (space: Space): StoryRuntime => {
+  const dbLayer = Database.layer(space.db);
+  const feedServiceLayer = createFeedServiceLayer(space.queues);
+  const traceSinkLayer = FeedTraceSink.layerLive.pipe(Layer.provide(dbLayer), Layer.provide(feedServiceLayer));
+
+  const layer = ProcessManager.layer().pipe(
+    Layer.provide(Layer.succeed(ServiceResolver.ServiceResolver, ServiceResolver.empty)),
+    Layer.provide(KeyValueStore.layerMemory),
+    Layer.provide(OperationHandlerSet.provide(OperationHandlerSet.empty)),
+    Layer.provideMerge(Registry.layer),
+    Layer.provide(traceSinkLayer),
+  );
+
+  return ManagedRuntime.make(layer);
+};
+
+//
+// Story component.
+//
+
+const DefaultStory = () => {
+  const [space] = useSpaces();
+  const runtimeRef = useRef<StoryRuntime | null>(null);
+  const invokeCounterRef = useRef(0);
+
+  useEffect(() => {
+    if (!space) {
+      return;
+    }
+
+    const runtime = createStoryRuntime(space);
+    runtimeRef.current = runtime;
+    return () => {
+      runtimeRef.current = null;
+      void runtime.dispose();
+    };
+  }, [space]);
+
+  const handleRunAgent = useCallback(() => {
+    const runtime = runtimeRef.current;
+    if (!runtime) {
+      return;
+    }
+
+    const scenarioIndex = invokeCounterRef.current++;
+    void runtime.runPromise(
+      Effect.gen(function* () {
+        const manager = yield* ProcessManager.ProcessManagerService;
+        const handle = yield* manager.spawn(SimulatedAgent);
+        yield* handle.submitInput(scenarioIndex);
+      }),
+    );
+  }, []);
+
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <IconButton icon='ph--plus--regular' label='Start Agent' onClick={handleRunAgent} />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <TracePanel space={space} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/TracePanel',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    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());
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/TracePanel/TracePanel.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom';
+import { useAtomValue } from '@effect-atom/atom-react';
+import { pipe } from 'effect/Function';
+import React, { useCallback, useMemo } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Filter, Query } from '@dxos/echo';
+import { AtomQuery } from '@dxos/echo-atom';
+import { Trace } from '@dxos/functions';
+import { FeedTraceSink, Process } from '@dxos/functions-runtime';
+import { DXN } from '@dxos/keys';
+import { useComputeRuntimeService } from '@dxos/plugin-automation/hooks';
+import { type Space } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { Timeline, type Commit } from '@dxos/react-ui-components';
+import { composable, mx } from '@dxos/ui-theme';
+
+import { ProcessTree } from '../../components';
+import { buildExecutionGraph } from './execution-graph';
+
+export type TracePanelProps = {
+  space: Space;
+};
+
+export const TracePanel = composable<HTMLDivElement, TracePanelProps>(({ space, ...props }, forwardedRef) => {
+  const { invokePromise } = useOperationInvoker();
+  const { branches, commits } = useExecutionGraph(space);
+
+  const handleCommitClick = useCallback(
+    (commit: Commit) => {
+      if (commit.link) {
+        const dxn = DXN.tryParse(commit.link)?.asEchoDXN();
+        if (dxn?.spaceId && dxn.echoId) {
+          // TODO(dmaretskyi): Navigates, but fails to open.
+          void invokePromise(LayoutOperation.Open, {
+            subject: [`${dxn.spaceId}:${dxn.echoId}`],
+          });
+        }
+      }
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Panel.Root {...props} ref={forwardedRef}>
+      <Panel.Content className='grid grid-rows-[min-content_1fr]'>
+        <ActiveProcessList spaceId={space.id} />
+        <Timeline branches={branches} commits={commits} compact onCommitClick={handleCommitClick} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+});
+
+/**
+ * Separated into its own component because useComputeRuntimeService uses React's use() which requires a Suspense boundary.
+ */
+const ActiveProcessList = ({ spaceId }: { spaceId: Space['id'] }) => {
+  const runtime = useComputeRuntimeService(Process.ProcessMonitorService, spaceId);
+  const activeProcesses = useAtomValue(runtime?.processTreeAtom ?? atomEmpty);
+  if (activeProcesses.length === 0) {
+    return <div />;
+  }
+
+  return <ProcessTree classNames={mx('max-h-[8lh] px-2 border-b border-separator')} processes={activeProcesses} />;
+};
+
+// Stable ref.
+const atomEmpty = Atom.make(() => [] as const);
+
+type ExecutionGraph = {
+  branches: string[];
+  commits: Commit[];
+};
+
+type UseExecutionGraphOptions = {
+  eventLimit?: number;
+};
+
+const useExecutionGraph = (space: Space, { eventLimit }: UseExecutionGraphOptions = {}): ExecutionGraph => {
+  const atom = useMemo(() => getExecutionGraph(space, { eventLimit }), [space, eventLimit]);
+  return useAtomValue(atom);
+};
+
+const getExecutionGraph = (
+  space: Space,
+  { eventLimit = 100 }: UseExecutionGraphOptions = {},
+): Atom.Atom<ExecutionGraph> => {
+  return pipe(
+    AtomQuery.make(space.db, FeedTraceSink.query),
+    Atom.map((feeds) => {
+      // TODO(dmaretskyi): This should be possible in a single query with properly working limit(1) and feed > feed contents traversal.
+      return AtomQuery.make(
+        space.db,
+        feeds.length > 0
+          ? Query.type(Trace.Message).from(feeds[0])
+          : (Query.select(Filter.nothing()) as Query.Query<never>),
+      );
+    }),
+    (_) => Atom.make((get) => get(get(_))),
+    (_) =>
+      Atom.make((get) =>
+        buildExecutionGraph({
+          traceMessages: [...get(_)],
+          activeProcesses: [],
+          eventLimit,
+        }),
+      ),
+  );
+};