@dxos/plugin-assistant 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/containers/TracePanel/TracePanel.tsx

@@ -5,301 +5,163 @@
 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 { ScrollContainer } from '@dxos/react-ui';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Timeline, type Commit } from '@dxos/react-ui-components';
-import { mx } from '@dxos/ui-theme';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { composable, composableProps, 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, attendableId, onProcessTerminate, ...props }, forwardedRef) => {
+    const attentionAttrs = useAttentionAttributes(attendableId);
+    const { invokePromise } = useOperationInvoker();
+    const { branches, commits } = useExecutionGraph(space);
+    const runtime = useComputeRuntimeService(Process.ProcessMonitorService, space.id);
+    const processes = useAtomValue(runtime?.processTreeAtom ?? atomEmpty);
+
+    const [selectedCommit, setSelectedCommit] = useState<Commit | undefined>();
+    const handleCommitSelect = useCallback(
+      (commit: Commit | undefined) => {
+        setSelectedCommit(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, setSelectedCommit],
+    );
+
+    // 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) {
+          setCurrentBranch(branch);
+        }
+      },
+      [branches],
+    );
+
+    return (
+      <div
+        {...composableProps(props, {
+          ...attentionAttrs,
+          classNames: mx(
+            'h-full grid divide-y divide-separator',
+            selectedCommit ? 'grid-rows-[minmax(0,4lh)_1fr_minmax(0,206px)]' : 'grid-rows-[minmax(0,4lh)_1fr]',
+          ),
+        })}
+        ref={forwardedRef}
+      >
+        <ProcessTree
+          processes={processes}
+          onProcessSelect={handleProcessSelect}
+          onProcessTerminate={onProcessTerminate}
+        />
 
-import { ProcessTree } from '../../components';
+        <ScrollContainer.Root pin>
+          <ScrollContainer.Content thin>
+            <ScrollContainer.Fade />
+            <ScrollContainer.Viewport>
+              <Timeline
+                compact
+                commits={commits}
+                branches={branches}
+                currentBranch={currentBranch}
+                onSelect={handleCommitSelect}
+              />
+            </ScrollContainer.Viewport>
+            <ScrollContainer.ScrollDownButton />
+          </ScrollContainer.Content>
+        </ScrollContainer.Root>
+
+        {selectedCommit && (
+          <Syntax.Root data={selectedCommit}>
+            <Syntax.Content>
+              <Syntax.Viewport>
+                <Syntax.Code className='text-xs' />
+              </Syntax.Viewport>
+            </Syntax.Content>
+          </Syntax.Root>
+        )}
+      </div>
+    );
+  },
+);
 
-export const TracePanel = ({ space }: { space: Space }) => {
-  const { invokePromise } = useOperationInvoker();
-  const activeProcesses = useActiveProcesses(space.id);
-  const runtime = useComputeRuntimeService(Process.ProcessMonitorService, space.id);
+// Stable ref.
+const atomEmpty = Atom.make(() => [] as const);
 
-  const { branches, commits } = useAtomValue(
-    useMemo(
-      () => getExecutionGraph(space, runtime?.processTreeAtom ?? Atom.make(() => [])),
-      [space, runtime?.processTreeAtom],
-    ),
-  );
+type ExecutionGraph = {
+  branches: string[];
+  commits: Commit[];
+};
 
-  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 UseExecutionGraphOptions = {
+  eventLimit?: number;
+};
 
-  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>
+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],
   );
-};
 
-type InvocationInfo = {
-  eventLimit: number;
+  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,
-        feeds.length > 0 ? Query.type(Trace.Message).from(feeds[0]) : Query.select(Filter.nothing()),
+        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) => {
-        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.data.block.text,
-                    event.timestamp,
-                  );
-                } else {
-                  builder.addAssistantMessage(
-                    event.id,
-                    event.meta.conversationId ?? 'unknown_conversation',
-                    event.data.block.text,
-                    event.timestamp,
-                  );
-                }
-                break;
-              }
-              case 'toolCall': {
-                builder.addToolCall(
-                  `${event.data.block.toolCallId}:call`,
-                  event.meta.conversationId ?? 'unknown_conversation',
-                  event.data.block.name,
-                  event.timestamp,
-                );
-                break;
-              }
-              case 'toolResult': {
-                builder.addToolResult(
-                  `${event.data.block.toolCallId}:result`,
-                  event.meta.conversationId ?? 'unknown_conversation',
-                  event.data.block.error,
-                  event.timestamp,
-                );
-                break;
-              }
-            }
-          }
-
-          // Process operation trace events.
-          if (Trace.isOfType(Trace.OperationStart, event)) {
-            builder.addOperationStart(
-              `${event.id}:${event.data.key}:start`,
-              event.data.name ?? event.data.key,
-              event.timestamp,
-            );
-          }
-          if (Trace.isOfType(Trace.OperationEnd, event)) {
-            builder.addOperationEnd(
-              `${event.id}:${event.data.key}:end`,
-              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>();
-
-  #addCommit(commit: Commit) {
-    this.#branches.add(commit.branch);
-    this.#commits.push(commit);
-    this.#lastCommitByBranch.set(commit.branch, commit.id);
-  }
-
-  #defaultParents(branch: string) {
-    return this.#lastCommitByBranch.get(branch) ? [this.#lastCommitByBranch.get(branch)!] : [];
-  }
-
-  build() {
-    return {
-      commits: this.#commits,
-      branches: [...this.#branches],
-    };
-  }
-
-  addUserMessage(id: string, coversationId: string, text: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId),
-      icon: 'ph--paper-plane-right--regular',
-      level: LogLevel.VERBOSE,
-      message: text.slice(0, 100),
-      timestamp: new Date(ts),
-    });
-  }
-
-  addAssistantMessage(id: string, coversationId: string, text: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId),
-      icon: 'ph--robot--regular',
-      level: LogLevel.VERBOSE,
-      message: text.slice(0, 100),
-      timestamp: new Date(ts),
-    });
-  }
-
-  addToolCall(id: string, coversationId: string, toolName: string, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId),
-      icon: 'ph--wrench--regular',
-      level: LogLevel.INFO,
-      message: toolName,
-      timestamp: new Date(ts),
-    });
-  }
-
-  addToolResult(id: string, coversationId: string, error: string | undefined, ts: number) {
-    this.#addCommit({
-      id,
-      branch: coversationId,
-      parents: this.#defaultParents(coversationId),
-      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, operationName: string, ts: number) {
-    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,
-    operationName: string,
-    outcome: 'success' | 'failure',
-    error: string | undefined,
-    ts: number,
-  ) {
-    const isError = outcome === 'failure';
-    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),
-    });
-  }
-}
-
-/**
- * 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>();
 
@@ -68,7 +68,7 @@ export const extractDxnsFromObject = (obj: unknown): DXN[] => {
   const dxns: DXN[] = [];
   const seen = new Set<string>();
 
-  const addDxn = (dxnStr: string) => {
+  const addDXN = (dxnStr: string) => {
     if (!seen.has(dxnStr)) {
       const dxn = DXN.tryParse(dxnStr);
       if (dxn) {
@@ -86,14 +86,14 @@ export const extractDxnsFromObject = (obj: unknown): DXN[] => {
     if (typeof value === 'string') {
       // Check if the string itself is a DXN.
       if (value.startsWith('dxn:')) {
-        addDxn(value);
+        addDXN(value);
       } else if (value.startsWith('@dxn:')) {
-        addDxn(value.slice(1));
+        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());
+        addDXN(dxn.toString());
       }
       return;
     }
@@ -112,7 +112,7 @@ export const extractDxnsFromObject = (obj: unknown): DXN[] => {
       if ('/' in record && typeof record['/'] === 'string') {
         const dxnStr = record['/'];
         if (typeof dxnStr === 'string' && dxnStr.startsWith('dxn:')) {
-          addDxn(dxnStr);
+          addDXN(dxnStr);
         }
       }
 
@@ -120,7 +120,7 @@ export const extractDxnsFromObject = (obj: unknown): DXN[] => {
       if ('@dxn' in record && typeof record['@dxn'] === 'string') {
         const dxnStr = record['@dxn'];
         if (typeof dxnStr === 'string' && dxnStr.startsWith('dxn:')) {
-          addDxn(dxnStr);
+          addDXN(dxnStr);
         }
       }
 
@@ -128,7 +128,7 @@ export const extractDxnsFromObject = (obj: unknown): DXN[] => {
       if (record._tag === 'reference' && record.reference && typeof record.reference === 'object') {
         const ref = record.reference as Record<string, unknown>;
         if (ref.dxn && typeof ref.dxn === 'string') {
-          addDxn(ref.dxn);
+          addDXN(ref.dxn);
         }
       }
 
@@ -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];
   }
 };