@dxos/plugin-assistant 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/containers/PromptArticle/PromptArticle.tsx

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { AgentPrompt } from '@dxos/assistant-toolkit';
+import { type Prompt } from '@dxos/blueprints';
+import { Obj } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+import { invariant } from '@dxos/invariant';
+import { invokeFunctionWithTracing, useComputeRuntimeCallback } from '@dxos/plugin-automation';
+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 = SurfaceComponentProps<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 invokeFunctionWithTracing(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,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { PromptArticle } from './PromptArticle';
+
+export default PromptArticle;

package/src/containers/PromptList/PromptList.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 { 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' />
+      </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 { DatabaseBlueprint, MarkdownBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Prompt } from '@dxos/blueprints';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { IconButton } from '@dxos/react-ui';
+import { useQuery } from '@dxos/react-client/echo';
+import { SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+
+import { AssistantOperation } from '../../operations';
+
+export type PromptListProps = SurfaceComponentProps<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,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { PromptList } from './PromptList';
+
+export default PromptList;

package/src/containers/TracePanel/TracePanel.tsx

@@ -0,0 +1,347 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom';
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Array from 'effect/Array';
+import { pipe } from 'effect/Function';
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Filter, Obj, Query } from '@dxos/echo';
+import { AtomObj, AtomQuery, AtomRef } from '@dxos/echo-atom';
+import { InvocationOutcome, InvocationTraceEndEvent, InvocationTraceStartEvent } from '@dxos/functions-runtime';
+import { DXN } from '@dxos/keys';
+import { dbg, LogLevel } from '@dxos/log';
+import { useTriggerRuntimeControls } from '@dxos/plugin-automation';
+import { type Space } from '@dxos/react-client/echo';
+import { Input, Panel, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Timeline, type Commit } from '@dxos/react-ui-components';
+import { Message, type ContentBlock } from '@dxos/types';
+
+import { extractFirstDxnFromToolInput, extractFirstDxnFromToolResult } from './dxn-extractor';
+import { meta } from '../../meta';
+
+export const TracePanel = ({ space }: { space: Space }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const { state, start, stop } = useTriggerRuntimeControls(space.db);
+  const isRunning = state?.enabled ?? false;
+
+  const { branches, commits } = useAtomValue(useMemo(() => getExecutionGraph(space), [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>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Input.Root>
+            <div className='flex items-center gap-2'>
+              <Input.Switch checked={isRunning} onCheckedChange={isRunning ? stop : start} />
+              <Input.Label>{t('trigger runtime label')}</Input.Label>
+            </div>
+          </Input.Root>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <Timeline branches={branches} commits={commits} compact onCommitClick={handleCommitClick} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+type InvocationInfo = {
+  startEvent: InvocationTraceStartEvent;
+  endEvent: InvocationTraceEndEvent | null;
+  subevents: Obj.Unknown[];
+};
+
+const getExecutionGraph = (
+  space: Space,
+  {
+    invocationsLimit = 100,
+    subeventsLimit = 20,
+    showSubeventsForLastNInvocations = 4,
+  }: { invocationsLimit?: number; subeventsLimit?: number; showSubeventsForLastNInvocations?: number } = {},
+): Atom.Atom<{
+  branches: string[];
+  commits: Commit[];
+}> => {
+  return pipe(
+    space.properties,
+    (_) => AtomObj.make(_),
+    // space properies => Atom<Atom<InvocationTraceEvent[]>>
+    (_) =>
+      Atom.make((get) => {
+        const queueDxn = get(_).invocationTraceQueue?.dxn;
+        return AtomQuery.make(
+          space.db,
+          !queueDxn
+            ? (Query.select(Filter.nothing()) as Query.Query<never>) // TODO(dmaretskyi): Broken echo types here.
+            : Query.select(
+                Filter.or(Filter.type(InvocationTraceStartEvent), Filter.type(InvocationTraceEndEvent)),
+              ).from({
+                queues: [queueDxn.toString()],
+              }),
+        );
+      }),
+    // Flatten atoms
+    (_) => Atom.make((get) => get(get(_))),
+    // Atom<InvocationTraceEvent[]> => Atom<InvocationInfo[]>
+    (_) =>
+      Atom.make((get) => {
+        const events = get(_);
+        const invocations: InvocationInfo[] = [];
+
+        for (const event of events) {
+          if (Schema.is(InvocationTraceStartEvent)(event)) {
+            const invocationInfo: InvocationInfo = {
+              startEvent: event,
+              endEvent: null,
+              subevents: [],
+            };
+            invocations.push(invocationInfo);
+          } else if (Schema.is(InvocationTraceEndEvent)(event)) {
+            const invocationInfo = invocations.find((i) => i.startEvent.invocationId === event.invocationId);
+            if (invocationInfo) {
+              invocationInfo.endEvent = event;
+            }
+          }
+        }
+
+        let expandedBudget = showSubeventsForLastNInvocations;
+        for (let i = invocations.length - 1; i >= 0; i--) {
+          const invocation = invocations[i];
+          if (!invocation.startEvent.invocationTraceQueue) {
+            continue;
+          }
+          const subevents = get(
+            AtomQuery.make(
+              space.db,
+              Query.select(Filter.everything())
+                .limit(subeventsLimit)
+                .from({ queues: [invocation.startEvent.invocationTraceQueue?.dxn?.toString()] }),
+            ),
+          );
+          invocation.subevents = subevents;
+          if (subevents.length > 0) {
+            expandedBudget--;
+          }
+          if (expandedBudget <= 0) {
+            break;
+          }
+        }
+
+        return invocations;
+      }),
+
+    // Build commit graph from InvocationInfo[]
+    (_) =>
+      Atom.make((get) => {
+        const invocations = get(_);
+        // Two alternating branches for subevents to save horizontal space.
+        const branches: string[] = ['invocations'];
+        const commits: Commit[] = [];
+
+        const sorted = invocations.sort((a, b) => a.startEvent.timestamp - b.startEvent.timestamp);
+        let idx = 0;
+        for (const invocation of sorted.slice(-invocationsLimit)) {
+          const trigger = invocation.startEvent.trigger && AtomRef.make(invocation.startEvent.trigger).pipe(get);
+          const fn =
+            (invocation.startEvent.invocationTarget &&
+              AtomRef.make(invocation.startEvent.invocationTarget).pipe(get)) ??
+            (trigger?.function && AtomRef.make(trigger.function).pipe(get));
+          const chat =
+            invocation.startEvent.chat && AtomRef.make(invocation.startEvent.chat).pipe(get, AtomObj.make, get);
+          dbg(chat);
+
+          const functionName = fn ? Obj.getLabel(fn) : undefined;
+          const triggerName = trigger?.spec?.kind ?? 'trigger';
+          const label = chat
+            ? (Obj.getLabel(chat) ?? 'New Chat')
+            : functionName
+              ? `${functionName} on ${triggerName}`
+              : triggerName;
+
+          const branchName = `invocation-${invocation.startEvent.invocationId.slice(0, 8)}`;
+
+          // Collapse completed invocations with no intermediate events.
+          if (invocation.endEvent && invocation.subevents.length === 0) {
+            commits.push({
+              id: invocation.endEvent.id,
+              branch: 'invocations',
+              parents: commits.length > 0 ? [commits.at(-1)!.id] : [],
+              icon: chat
+                ? 'ph--atom--regular'
+                : invocation.endEvent.outcome === InvocationOutcome.SUCCESS
+                  ? 'ph--check-circle--regular'
+                  : 'ph--x-circle--regular',
+              link: chat ? Obj.getDXN(chat).toString() : undefined,
+              level: invocation.endEvent.outcome === InvocationOutcome.SUCCESS ? LogLevel.INFO : LogLevel.ERROR,
+              message: `${label} - ${invocation.endEvent.outcome}`,
+              timestamp: new Date(invocation.endEvent.timestamp),
+            });
+            continue;
+          }
+
+          // Start of the invocation.
+          commits.push({
+            id: invocation.startEvent.id,
+            branch: 'invocations',
+            parents: commits.length > 0 ? [commits.at(-1)!.id] : [],
+            icon: chat ? 'ph--atom--regular' : invocation.endEvent ? 'ph--play--regular' : 'ph--spinner-gap--regular',
+            level: invocation.endEvent ? LogLevel.INFO : LogLevel.VERBOSE,
+            message: label,
+            timestamp: new Date(invocation.startEvent.timestamp),
+          });
+
+          // Subevents of the invocation.
+          // Track tool call IDs to their corresponding DXNs for linking tool results.
+          const toolCallDxns = new Map<string, string>();
+
+          let prevBlockTag: ContentBlock.Any['_tag'] | undefined;
+          for (const subevent of invocation.subevents.slice(-subeventsLimit)) {
+            if (Obj.instanceOf(Message.Message, subevent)) {
+              for (const block of subevent.blocks) {
+                switch (block._tag) {
+                  case 'text': {
+                    if (prevBlockTag === 'text') {
+                      continue; // Skip consecutive text blocks.
+                    }
+                    prevBlockTag = block._tag;
+                    commits.push({
+                      id: subevent.id,
+                      branch: branchName,
+                      parents: [commits.at(-1)!.id],
+                      icon: subevent.sender.role === 'user' ? 'ph--paper-plane-right--regular' : 'ph--robot--regular',
+                      level: LogLevel.VERBOSE,
+                      message: block.text.slice(0, 100),
+                      timestamp: new Date(subevent.created),
+                    });
+                    if (!branches.includes(branchName)) {
+                      branches.push(branchName);
+                    }
+                    break;
+                  }
+                  case 'toolCall': {
+                    // Extract DXN from tool call input.
+                    const dxn = extractFirstDxnFromToolInput(block.input);
+                    const link = dxn?.toString();
+                    if (link) {
+                      toolCallDxns.set(block.toolCallId, link);
+                    }
+
+                    // Only show tool results.
+                    // commits.push({
+                    //   id: subevent.id,
+                    //   branch: branchName,
+                    //   parents: [commits.at(-1)!.id],
+                    //   icon: 'ph--wrench--regular',
+                    //   level: LogLevel.VERBOSE,
+                    //   message: block.name,
+                    //   timestamp: new Date(subevent.created),
+                    //   link,
+                    // });
+                    // if (!branches.includes(branchName)) {
+                    //   branches.push(branchName);
+                    // }
+                    break;
+                  }
+                  case 'toolResult': {
+                    // Extract DXN from tool result, or use the one from the corresponding tool call.
+                    const resultDxn = extractFirstDxnFromToolResult(block.result);
+                    const link = resultDxn?.toString() ?? toolCallDxns.get(block.toolCallId);
+
+                    prevBlockTag = block._tag;
+                    commits.push({
+                      id: `${subevent.id}_toolCall_${block.toolCallId}`,
+                      branch: branchName,
+                      parents: [commits.at(-1)!.id],
+                      icon: 'ph--wrench--regular',
+                      level: block.error ? LogLevel.ERROR : LogLevel.VERBOSE,
+                      message: block.error ? `${block.name}: ${block.error.slice(0, 50)}` : block.name,
+                      timestamp: new Date(subevent.created),
+                      link,
+                    });
+                    if (!branches.includes(branchName)) {
+                      branches.push(branchName);
+                    }
+                    break;
+                  }
+                  case 'reference': {
+                    // Extract DXN from reference block.
+                    const refDxn = block.reference?.dxn;
+                    const link = refDxn?.toString();
+
+                    commits.push({
+                      id: `${subevent.id}_ref`,
+                      branch: branchName,
+                      parents: [commits.at(-1)!.id],
+                      icon: 'ph--link--regular',
+                      level: LogLevel.INFO,
+                      message: 'Reference',
+                      timestamp: new Date(subevent.created),
+                      link,
+                    });
+                    if (!branches.includes(branchName)) {
+                      branches.push(branchName);
+                    }
+                    break;
+                  }
+                }
+              }
+            }
+          }
+
+          // "Running..." trailing event for invocations that haven't completed.
+          if (!invocation.endEvent && invocation.subevents.length > 0) {
+            commits.push({
+              id: invocation.startEvent.invocationId + 'pending',
+              branch: branchName,
+              parents: [commits.at(-1)!.id],
+              icon: 'ph--dots-three-vertical--regular',
+              level: LogLevel.VERBOSE,
+              message: 'Running...',
+              timestamp: new Date(),
+            });
+          }
+
+          // End of the invocation, merging back into main. Only if there were subevents.
+          if (invocation.endEvent && invocation.subevents.length > 0) {
+            commits.push({
+              id: invocation.endEvent.id,
+              branch: 'invocations',
+              parents: Array.dedupe([invocation.startEvent.invocationId, commits.at(-1)!.id]),
+              icon:
+                invocation.endEvent.outcome === InvocationOutcome.SUCCESS
+                  ? 'ph--check-circle--regular'
+                  : 'ph--x-circle--regular',
+              level: invocation.endEvent.outcome === InvocationOutcome.SUCCESS ? LogLevel.INFO : LogLevel.ERROR,
+              message: `${label} - ${invocation.endEvent.outcome === InvocationOutcome.SUCCESS ? 'Success' : 'Failure'}`,
+              timestamp: new Date(invocation.endEvent.timestamp),
+            });
+          }
+        }
+
+        // Sort in time order.
+        commits.sort((a, b) => (a.timestamp?.getTime() ?? 0) - (b.timestamp?.getTime() ?? 0));
+
+        return { branches, commits };
+      }),
+  );
+};