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

package/src/containers/TracePanel/TracePanel.tsx

@@ -5,78 +5,118 @@
 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 React, { useCallback, useMemo, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { AGENT_PROCESS_KEY, CompleteBlock } from '@dxos/assistant';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Trace } from '@dxos/compute';
 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, SpaceId } from '@dxos/keys';
-import { LogLevel } from '@dxos/log';
+import { DXN } from '@dxos/keys';
+import { log } from '@dxos/log';
 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 { mx } from '@dxos/ui-theme';
+import { composable, mx } from '@dxos/ui-theme';
+
+import { ProcessTree, ProcessTreeProps } from '#components';
+
+import { buildExecutionGraph } from './execution-graph';
+
+export type TracePanelProps = AppSurface.SpaceArticleProps<Pick<ProcessTreeProps, 'onProcessTerminate'>>;
+
+export const TracePanel = composable<HTMLDivElement, TracePanelProps>(
+  ({ space, onProcessTerminate, ...props }, forwardedRef) => {
+    const { invokePromise } = useOperationInvoker();
+    const { branches, commits } = useExecutionGraph(space);
+    const runtime = useComputeRuntimeService(Process.ProcessMonitorService, space.id);
+    const processes = useAtomValue(runtime?.processTreeAtom ?? atomEmpty);
+
+    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],
+    );
 
-import { ProcessTree } from '../../components';
+    // Select current branch.
+    const [currentBranch, setCurrentBranch] = useState<string | null>(null);
+    const handleProcessSelect = useCallback(
+      (process: Process.Info) => {
+        const branch = branches.find((branch) => branch === process.pid.toString());
+        if (branch) {
+          log.info('select', { process, branch });
+          setCurrentBranch(branch);
+        }
+      },
+      [branches],
+    );
 
-export const TracePanel = ({ space }: { space: Space }) => {
-  const { invokePromise } = useOperationInvoker();
-  const activeProcesses = useActiveProcesses(space.id);
-  const runtime = useComputeRuntimeService(Process.ProcessMonitorService, space.id);
+    return (
+      <Panel.Root {...props} ref={forwardedRef}>
+        <Panel.Content className='grid grid-rows-[min-content_1fr] divide-y divide-separator'>
+          <ProcessTree
+            classNames={mx('max-h-[8lh] border-b border-separator')}
+            processes={processes}
+            onProcessSelect={handleProcessSelect}
+            onProcessTerminate={onProcessTerminate}
+          />
+          <Timeline
+            currentBranch={currentBranch}
+            branches={branches}
+            commits={commits}
+            compact
+            onCommitClick={handleCommitClick}
+          />
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);
 
-  const { branches, commits } = useAtomValue(
-    useMemo(
-      () => getExecutionGraph(space, runtime?.processTreeAtom ?? Atom.make(() => [])),
-      [space, runtime?.processTreeAtom],
-    ),
-  );
+// Stable ref.
+const atomEmpty = Atom.make(() => [] as const);
 
-  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],
-  );
+type ExecutionGraph = {
+  branches: string[];
+  commits: Commit[];
+};
 
-  return (
-    <Panel.Root>
-      <Panel.Content className='grid grid-rows-[min-content_1fr]'>
-        <ProcessTree
-          classNames={mx('max-h-[8lh] px-2', activeProcesses.length > 0 && 'border-b border-separator')}
-          processes={activeProcesses}
-        />
-        <Timeline classNames='py-1' branches={branches} commits={commits} compact onCommitClick={handleCommitClick} />
-      </Panel.Content>
-    </Panel.Root>
-  );
+type UseExecutionGraphOptions = {
+  eventLimit?: number;
 };
 
-type InvocationInfo = {
-  eventLimit: number;
+const useExecutionGraph = (space: Space, { eventLimit }: UseExecutionGraphOptions = {}): ExecutionGraph => {
+  const runtime = useComputeRuntimeService(Process.ProcessMonitorService, space.id);
+  const activeProcesses = useAtomValue(runtime?.processTreeAtom ?? atomEmpty);
+  const atom = useMemo(
+    () => getExecutionGraph(space, activeProcesses, { eventLimit }),
+    [space, activeProcesses, eventLimit],
+  );
+
+  return useAtomValue(atom);
 };
 
 const getExecutionGraph = (
   space: Space,
-  processTreeAtom: Atom.Atom<readonly Process.Info[]>,
-  { eventLimit = 100 }: { eventLimit?: number } = {},
-): Atom.Atom<{
-  branches: string[];
-  commits: Commit[];
-}> => {
+  activeProcesses: readonly Process.Info[] = [],
+  { eventLimit = 300 }: UseExecutionGraphOptions = {},
+): Atom.Atom<ExecutionGraph> => {
   return pipe(
     AtomQuery.make(space.db, FeedTraceSink.query),
     Atom.map((feeds) => {
+      log('trace panel query trace feeds', { spaceId: space.id, feedCount: feeds.length });
       // 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,
@@ -87,275 +127,12 @@ const getExecutionGraph = (
     }),
     (_) => Atom.make((get) => get(get(_))),
     (_) =>
-      Atom.make((get) => {
-        const builder = new GraphBuilder();
-
-        const events = get(_)
-          .slice(-eventLimit)
-          .flatMap((message) =>
-            message.events.map((event: Trace.Event) => ({
-              id: message.id,
-              meta: message.meta,
-              ...event,
-            })),
-          );
-
-        for (const event of events) {
-          if (Trace.isOfType(CompleteBlock, event)) {
-            switch (event.data.block._tag) {
-              case 'text': {
-                if (event.data.role === 'user') {
-                  builder.addUserMessage(
-                    event.id,
-                    event.meta.conversationId ?? 'unknown_conversation',
-                    event.meta.pid ?? crypto.randomUUID(),
-                    event.data.block.text,
-                    event.timestamp,
-                  );
-                } else {
-                  builder.addAssistantMessage(
-                    event.id,
-                    event.meta.conversationId ?? 'unknown_conversation',
-                    event.meta.pid ?? crypto.randomUUID(),
-                    event.data.block.text,
-                    event.timestamp,
-                  );
-                }
-                break;
-              }
-              case 'status': {
-                builder.addStatusMessage(
-                  event.id,
-                  event.meta.conversationId ?? 'unknown_conversation',
-                  event.meta.pid ?? crypto.randomUUID(),
-                  event.data.block.statusText,
-                  event.timestamp,
-                );
-                break;
-              }
-              case 'toolCall': {
-                builder.addToolCall(
-                  `${event.data.block.toolCallId}:call`,
-                  event.meta.conversationId ?? 'unknown_conversation',
-                  event.meta.pid ?? crypto.randomUUID(),
-                  event.data.block.name,
-                  event.timestamp,
-                );
-                break;
-              }
-              case 'toolResult': {
-                builder.addToolResult(
-                  `${event.data.block.toolCallId}:result`,
-                  event.meta.conversationId ?? 'unknown_conversation',
-                  event.meta.pid ?? crypto.randomUUID(),
-                  event.data.block.error,
-                  event.timestamp,
-                );
-                break;
-              }
-            }
-          }
-
-          // Process operation trace events.
-          if (Trace.isOfType(Trace.OperationStart, event)) {
-            if (!event.meta.conversationId) {
-              // Operations inside conversations will be handled by tool call events.
-              builder.addOperationStart(
-                `${event.id}:${event.data.key}:start`,
-                event.meta.pid ?? crypto.randomUUID(),
-                event.data.name ?? event.data.key,
-                event.timestamp,
-              );
-            }
-          }
-          if (Trace.isOfType(Trace.OperationEnd, event)) {
-            if (!event.meta.conversationId) {
-              // Operations inside conversations will be handled by tool call events.
-              builder.addOperationEnd(
-                `${event.id}:${event.data.key}:end`,
-                event.meta.pid ?? crypto.randomUUID(),
-                event.data.name ?? event.data.key,
-                event.data.outcome,
-                event.data.error,
-                event.timestamp,
-              );
-            }
-          }
-        }
-
-        const activeProcesses = get(processTreeAtom);
-        for (const process of activeProcesses) {
-          if (
-            process.key === AGENT_PROCESS_KEY &&
-            process.params.target &&
-            (process.state === Process.State.RUNNING || process.state === Process.State.HYBERNATING)
-          ) {
-            const conversationId = DXN.parse(process.params.target).asEchoDXN()?.echoId;
-            if (conversationId) {
-              builder.addRunningAgent(process.pid, conversationId, Date.now());
-            }
-          }
-        }
-        return builder.build();
-      }),
+      Atom.make((get) =>
+        buildExecutionGraph({
+          traceMessages: [...get(_)],
+          activeProcesses,
+          eventLimit,
+        }),
+      ),
   );
 };
-
-// Stable ref.
-const atomEmpty = Atom.make(() => [] as const);
-
-const useActiveProcesses = (id?: SpaceId) => {
-  const runtime = useComputeRuntimeService(Process.ProcessMonitorService, id);
-  return useAtomValue(runtime?.processTreeAtom ?? atomEmpty);
-};
-
-class GraphBuilder {
-  #commits: Commit[] = [];
-  #branches = new Set<string>();
-  #lastCommitByBranch = new Map<string, string>();
-  #operationPidToStartCommitId = new Map<string, string>();
-
-  #addCommit(commit: Commit, opts?: { replaceCommit?: string }) {
-    this.#branches.add(commit.branch);
-    if (opts?.replaceCommit) {
-      const commitIdx = this.#commits.findIndex((commit) => commit.id === opts.replaceCommit);
-      if (commitIdx !== -1) {
-        this.#commits[commitIdx] = commit;
-      }
-    } else {
-      this.#commits.push(commit);
-      this.#lastCommitByBranch.set(commit.branch, commit.id);
-    }
-  }
-
-  #defaultParents(branch: string, opts?: { branchForFirst?: string }) {
-    return this.#lastCommitByBranch.get(branch)
-      ? [this.#lastCommitByBranch.get(branch)!]
-      : opts?.branchForFirst
-        ? [opts.branchForFirst]
-        : [];
-  }
-
-  build() {
-    return {
-      commits: this.#commits,
-      branches: [...this.#branches],
-    };
-  }
-
-  addUserMessage(id: string, coversationId: string, pid: string, text: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId, { branchForFirst: this.#operationPidToStartCommitId.get(pid) }),
-      icon: 'ph--paper-plane-right--regular',
-      level: LogLevel.VERBOSE,
-      message: text.slice(0, 100),
-      timestamp: new Date(ts),
-    });
-  }
-
-  addAssistantMessage(id: string, coversationId: string, pid: string, text: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId, { branchForFirst: this.#operationPidToStartCommitId.get(pid) }),
-      icon: 'ph--drone--regular',
-      level: LogLevel.VERBOSE,
-      message: text.slice(0, 100),
-      timestamp: new Date(ts),
-    });
-  }
-
-  addStatusMessage(id: string, coversationId: string, pid: string, status: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId, { branchForFirst: this.#operationPidToStartCommitId.get(pid) }),
-      icon: 'ph--dot-outline--regular',
-      level: LogLevel.INFO,
-      message: status,
-      timestamp: new Date(ts),
-    });
-  }
-  addToolCall(id: string, coversationId: string, pid: string, toolName: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId, { branchForFirst: this.#operationPidToStartCommitId.get(pid) }),
-      icon: 'ph--wrench--regular',
-      level: LogLevel.INFO,
-      message: toolName,
-      timestamp: new Date(ts),
-    });
-  }
-
-  addToolResult(id: string, coversationId: string, pid: string, error: string | undefined, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId, { branchForFirst: this.#operationPidToStartCommitId.get(pid) }),
-      icon: error ? 'ph--x-circle--regular' : 'ph--check-circle--regular',
-      level: error ? LogLevel.ERROR : LogLevel.INFO,
-      message: error ? `Error: ${error}` : 'Success',
-      timestamp: new Date(ts),
-    });
-  }
-
-  addRunningAgent(pid: string, conversationId: string, ts: number) {
-    this.#addCommit({
-      id: pid,
-      branch: conversationId,
-      parents: this.#defaultParents(conversationId),
-      icon: 'ph--spinner-gap--regular',
-      level: LogLevel.INFO,
-      message: 'Generating...',
-      timestamp: new Date(ts),
-    });
-  }
-
-  addOperationStart(id: string, pid: string, operationName: string, ts: number) {
-    this.#operationPidToStartCommitId.set(pid, id);
-    this.#addCommit({
-      id,
-      branch: OPERATIONS_BRANCH,
-      parents: this.#defaultParents(OPERATIONS_BRANCH),
-      icon: 'ph--play--regular',
-      level: LogLevel.INFO,
-      message: operationName,
-      timestamp: new Date(ts),
-    });
-  }
-
-  addOperationEnd(
-    id: string,
-    pid: string,
-    operationName: string,
-    outcome: 'success' | 'failure',
-    error: string | undefined,
-    ts: number,
-  ) {
-    const isError = outcome === 'failure';
-    const startCommitId = this.#operationPidToStartCommitId.get(pid);
-    const hasChildren = this.#commits.some((commit) => commit.parents?.includes(startCommitId!));
-    this.#addCommit(
-      {
-        id,
-        branch: OPERATIONS_BRANCH,
-        parents: this.#defaultParents(OPERATIONS_BRANCH),
-        icon: isError ? 'ph--x-circle--regular' : 'ph--check-circle--regular',
-        level: isError ? LogLevel.ERROR : LogLevel.INFO,
-        message: isError ? `${operationName}: ${error ?? 'Failed'}` : operationName,
-        timestamp: new Date(ts),
-      },
-      {
-        replaceCommit: hasChildren ? undefined : this.#operationPidToStartCommitId.get(pid),
-      },
-    );
-  }
-}
-
-/**
- * Branch name for top-level operation invocations.
- */
-const OPERATIONS_BRANCH = 'operations';

package/src/containers/TracePanel/dxn-extractor.test.ts

@@ -6,41 +6,41 @@ import { describe, test } from 'vitest';
 
 import {
   extractDxnsFromObject,
-  extractDxnsFromString,
+  extractDxnFromString,
   extractFirstDxnFromToolInput,
   extractFirstDxnFromToolResult,
 } from './dxn-extractor';
 
 describe('dxn-extractor', () => {
-  describe('extractDxnsFromString', () => {
+  describe('extractDxnFromString', () => {
     test('extracts plain DXN from string', ({ expect }) => {
-      const result = extractDxnsFromString('Found object dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      const result = extractDxnFromString('Found object dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
       expect(result).toHaveLength(1);
       expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
     test('extracts @dxn prefixed reference from string', ({ expect }) => {
-      const result = extractDxnsFromString('Reference to @dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 in text');
+      const result = extractDxnFromString('Reference to @dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 in text');
       expect(result).toHaveLength(1);
       expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
     test('extracts multiple DXNs from string', ({ expect }) => {
-      const result = extractDxnsFromString(
+      const result = extractDxnFromString(
         'Objects: dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 and @dxn:queue:data:SPACE:QUEUE:01KG7R1ZXWFMWQ4DA1Q6TN1DG5',
       );
       expect(result).toHaveLength(2);
     });
 
     test('deduplicates DXNs', ({ expect }) => {
-      const result = extractDxnsFromString(
+      const result = extractDxnFromString(
         'Same object dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 and dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
       );
       expect(result).toHaveLength(1);
     });
 
     test('returns empty array for string without DXNs', ({ expect }) => {
-      const result = extractDxnsFromString('No DXNs here');
+      const result = extractDxnFromString('No DXNs here');
       expect(result).toHaveLength(0);
     });
   });

package/src/containers/TracePanel/dxn-extractor.ts

@@ -28,7 +28,7 @@ const AT_DXN_PATTERN = /@(dxn:[a-zA-Z0-9]+(?::[a-zA-Z0-9@_-]+)+)/g;
 /**
  * Extracts all DXN references from a string.
  */
-export const extractDxnsFromString = (text: string): DXN[] => {
+export const extractDxnFromString = (text: string): DXN[] => {
   const dxns: DXN[] = [];
   const seen = new Set<string>();
 
@@ -91,7 +91,7 @@ export const extractDxnsFromObject = (obj: unknown): DXN[] => {
         addDxn(value.slice(1));
       }
       // Also extract DXNs from within the string.
-      const extracted = extractDxnsFromString(value);
+      const extracted = extractDxnFromString(value);
       for (const dxn of extracted) {
         addDxn(dxn.toString());
       }
@@ -153,7 +153,7 @@ export const extractFirstDxnFromToolInput = (input: string): DXN | undefined =>
     return dxns[0];
   } catch {
     // If JSON parsing fails, try to extract from the raw string.
-    const dxns = extractDxnsFromString(input);
+    const dxns = extractDxnFromString(input);
     return dxns[0];
   }
 };
@@ -172,7 +172,7 @@ export const extractFirstDxnFromToolResult = (result: string | undefined): DXN |
     return dxns[0];
   } catch {
     // If JSON parsing fails, try to extract from the raw string.
-    const dxns = extractDxnsFromString(result);
+    const dxns = extractDxnFromString(result);
     return dxns[0];
   }
 };