@dxos/plugin-assistant 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/src/containers/TracePanel/TracePanel.tsx

@@ -5,68 +5,114 @@
 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 { 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 } 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 { composable, 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 { ProcessTree } from '../../components';
 import { buildExecutionGraph } from './execution-graph';
 
-export type TracePanelProps = AppSurface.SpaceArticleProps;
-
-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}`],
-          });
+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],
-  );
+      },
+      [invokePromise, setSelectedCommit],
+    );
 
-  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>
-  );
-});
+    // 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],
+    );
 
-/**
- * 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 (
+      <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}
+        />
 
-  return <ProcessTree classNames={mx('max-h-[8lh] px-2 border-b border-separator')} processes={activeProcesses} />;
-};
+        <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>
+    );
+  },
+);
 
 // Stable ref.
 const atomEmpty = Atom.make(() => [] as const);
@@ -81,17 +127,25 @@ type UseExecutionGraphOptions = {
 };
 
 const useExecutionGraph = (space: Space, { eventLimit }: UseExecutionGraphOptions = {}): ExecutionGraph => {
-  const atom = useMemo(() => getExecutionGraph(space, { eventLimit }), [space, eventLimit]);
+  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,
-  { eventLimit = 100 }: UseExecutionGraphOptions = {},
+  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,
@@ -105,7 +159,7 @@ const getExecutionGraph = (
       Atom.make((get) =>
         buildExecutionGraph({
           traceMessages: [...get(_)],
-          activeProcesses: [],
+          activeProcesses,
           eventLimit,
         }),
       ),

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];
   }
 };