@dxos/plugin-assistant 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

package/src/containers/TracePanel/TracePanel.tsx

@@ -4,111 +4,254 @@
 
 import { Atom } from '@effect-atom/atom';
 import { useAtomValue } from '@effect-atom/atom-react';
+import * as Data from 'effect/Data';
+import * as Duration from 'effect/Duration';
 import { pipe } from 'effect/Function';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability, useAtomCapability, useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Process, 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 { useComputeRuntimeService } from '@dxos/plugin-automation/hooks';
+import { FeedTraceSink } from '@dxos/functions-runtime';
+import { EID } from '@dxos/keys';
 import { type Space } from '@dxos/react-client/echo';
-import { Panel } from '@dxos/react-ui';
+import { ScrollContainer } from '@dxos/react-ui';
+import { composable, composableProps } 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 { mx } from '@dxos/ui-theme';
 
-import { ProcessTree } from '../../components';
-import { buildExecutionGraph } from './execution-graph';
+import { ProcessTree, ProcessTreeProps } from '#components';
+import { buildExecutionGraph, type ExecutionGraph } from '#execution-graph';
+import { AssistantCapabilities } from '#types';
 
-export type TracePanelProps = {
-  space: Space;
-};
+export type TracePanelProps = AppSurface.SpaceArticleProps<Pick<ProcessTreeProps, 'onProcessTerminate'>>;
 
-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 const TracePanel = composable<HTMLDivElement, TracePanelProps>(
+  ({ space, attendableId, onProcessTerminate, ...props }, forwardedRef) => {
+    const attentionAttrs = useAttentionAttributes(attendableId);
+    const { invokePromise } = useOperationInvoker();
+    const settings = useAtomCapability(AssistantCapabilities.Settings);
+    const tracePanelDebug = settings.tracePanelDebug ?? false;
+
+    // `useDeferredValue` batches update bursts, works together with `React.memo`.
+    // See the comment in `ProcessTreeContainer` for more details.
+    const { branches, commits, spanTree, details } = useDeferredValue(useExecutionGraph(space));
+
+    // Debug hatch (dev builds only): expose the raw trace messages (the exact `buildExecutionGraph`
+    // input) so a real trace can be captured as a test fixture. While the TracePanel is mounted, run
+    // `dxosDumpTrace()` in the console — it copies the serialized `Trace.Message[]` to the clipboard
+    // (and logs it). Gated on `import.meta.env.DEV` so it's stripped from production builds.
+    const traceMessages = useTraceMessages(space);
+    useEffect(() => {
+      if (!import.meta.env.DEV) {
+        return;
       }
-    },
-    [invokePromise],
-  );
+      // Attach a debug hatch to the global object (a genuine global-augmentation boundary).
+      const debugGlobal = globalThis as typeof globalThis & { dxosDumpTrace?: () => string };
+      debugGlobal.dxosDumpTrace = () => {
+        const data = traceMessages.map((message) => ({
+          meta: message.meta,
+          isEphemeral: message.isEphemeral,
+          events: message.events,
+        }));
+        const json = JSON.stringify(data, null, 2);
+        // eslint-disable-next-line no-console
+        console.log(json);
+        void navigator.clipboard?.writeText(json);
+        return `dxosDumpTrace: ${data.length} message(s) copied to clipboard`;
+      };
+      return () => {
+        delete debugGlobal.dxosDumpTrace;
+      };
+    }, [traceMessages]);
 
-  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>
-  );
-});
+    const [selectedCommit, setSelectedCommit] = useState<Commit | undefined>();
+    const handleCommitSelect = useCallback(
+      (commit: Commit | undefined) => {
+        setSelectedCommit(commit);
+        if (commit?.link) {
+          const echoUri = EID.tryParse(commit.link);
+          const spaceId = echoUri ? EID.getSpaceId(echoUri) : undefined;
+          const objectId = echoUri ? EID.getEntityId(echoUri) : undefined;
+          if (spaceId && objectId) {
+            // TODO(dmaretskyi): Navigates, but fails to open.
+            void invokePromise(LayoutOperation.Open, {
+              subject: [`${spaceId}:${objectId}`],
+            });
+          }
+        }
+      },
+      [invokePromise, setSelectedCommit],
+    );
 
-/**
- * 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} />;
-};
+    // 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',
+            !tracePanelDebug && selectedCommit
+              ? 'grid-rows-[minmax(0,160px)_1fr_minmax(0,206px)]'
+              : 'grid-rows-[minmax(0,160px)_1fr]',
+          ),
+        })}
+        ref={forwardedRef}
+      >
+        <ProcessTreeContainer onProcessSelect={handleProcessSelect} onProcessTerminate={onProcessTerminate} />
+
+        <ScrollContainer.Root pin>
+          <ScrollContainer.Content thin>
+            <ScrollContainer.Fade />
+            <ScrollContainer.Viewport>
+              {tracePanelDebug ? (
+                <Syntax.Root data={spanTree}>
+                  <Syntax.Content>
+                    <Syntax.Viewport>
+                      <Syntax.Code className='text-xs' />
+                    </Syntax.Viewport>
+                  </Syntax.Content>
+                </Syntax.Root>
+              ) : (
+                <Timeline
+                  compact
+                  commits={commits}
+                  branches={branches}
+                  currentBranch={currentBranch}
+                  onSelect={handleCommitSelect}
+                />
+              )}
+            </ScrollContainer.Viewport>
+            <ScrollContainer.ScrollDownButton />
+          </ScrollContainer.Content>
+        </ScrollContainer.Root>
+
+        {!tracePanelDebug && selectedCommit && (
+          <Syntax.Root data={details[selectedCommit.id] ?? 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);
 
-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]);
+  const monitor = useCapability(Capabilities.ProcessMonitor);
+  const processesAtom = monitor?.processTreeAtom ?? atomEmpty;
+
+  const atom = useMemo(
+    () => getExecutionGraph(space, processesAtom, { eventLimit }),
+    [space, processesAtom, eventLimit],
+  );
+
+  return useAtomValue(atom);
+};
+
+/**
+ * Atom of the raw trace messages for a space — the exact `Trace.Message[]` fed into
+ * `buildExecutionGraph`. Shared by the execution graph and the debug trace export.
+ */
+const getTraceMessagesAtom = (space: Space): Atom.Atom<readonly Trace.Message[]> =>
+  pipe(
+    space.db.query(FeedTraceSink.query).atom,
+    Atom.map(
+      (feeds) =>
+        // TODO(dmaretskyi): This should be possible in a single query with properly working limit(1) and feed > feed contents traversal.
+        space.db.query(
+          feeds.length > 0
+            ? Query.type(Trace.Message).from(feeds[0])
+            : (Query.select(Filter.nothing()) as Query.Query<never>),
+        ).atom,
+    ),
+    (atom) => Atom.make((get) => get(get(atom))),
+  );
+
+/**
+ * Returns the raw trace messages for a space (used by the debug trace export).
+ */
+const useTraceMessages = (space: Space): readonly Trace.Message[] => {
+  const atom = useMemo(() => getTraceMessagesAtom(space), [space]);
   return useAtomValue(atom);
 };
 
 const getExecutionGraph = (
   space: Space,
+  processesAtom: Atom.Atom<readonly Process.Info[]>,
   { 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,
-        }),
+  const traceMessages = getTraceMessagesAtom(space);
+
+  const activeProcesses = pipe(
+    processesAtom,
+    Atom.debounce(Duration.millis(500)),
+    Atom.map((processes) =>
+      // `Data.array` does structural comparison on the array elements.
+      Data.array(
+        processes
+          .filter((process) => process.state === Process.State.RUNNING || process.state === Process.State.HYBERNATING)
+          .map(Data.struct),
       ),
+    ),
+  );
+
+  return Atom.make((get) =>
+    buildExecutionGraph({
+      traceMessages: get(traceMessages),
+      activeProcesses: get(activeProcesses),
+      eventLimit,
+    }),
+  );
+};
+TracePanel.displayName = 'TracePanel';
+
+// Isolate `ProcessTree` updates from the rest of the panel.
+// TODO(dmaretskyi): Currently not useful since `useExecutionGraph` also pulls in the updates.
+const ProcessTreeContainer = ({
+  onProcessSelect,
+  onProcessTerminate,
+}: Pick<ProcessTreeProps, 'onProcessSelect' | 'onProcessTerminate'>) => {
+  const monitor = useCapability(Capabilities.ProcessMonitor);
+  const processes = useAtomValue(
+    useMemo(() => monitor?.processTreeAtom.pipe(Atom.debounce(Duration.millis(500))) ?? atomEmpty, [monitor]),
+  );
+
+  // `processes` updates in bursts (about 14 updates per navigation).
+  // `useDeferredValue` will debounce update propagation, returning stale value for short periods.
+  // NOTE: `ProcessTree` MUST use `React.memo`, otherwise this will not work.
+  const processesDeferred = useDeferredValue(processes);
+  return (
+    <ProcessTree
+      processes={processesDeferred}
+      onProcessSelect={onProcessSelect}
+      onProcessTerminate={onProcessTerminate}
+    />
   );
 };

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

@@ -6,72 +6,72 @@ 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 echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
       expect(result).toHaveLength(1);
-      expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result[0].toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
-    test('extracts @dxn prefixed reference from string', ({ expect }) => {
-      const result = extractDxnsFromString('Reference to @dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 in text');
+    test('extracts @-prefixed reference from string', ({ expect }) => {
+      const result = extractDxnFromString('Reference to @echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4 in text');
       expect(result).toHaveLength(1);
-      expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result[0].toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
-    test('extracts multiple DXNs from string', ({ expect }) => {
-      const result = extractDxnsFromString(
-        'Objects: dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 and @dxn:queue:data:SPACE:QUEUE:01KG7R1ZXWFMWQ4DA1Q6TN1DG5',
+    test('extracts multiple references from string', ({ expect }) => {
+      const result = extractDxnFromString(
+        'Objects: echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4 and @echo://BBBBBBBBBBBBBBBBBBBBBBBBBB/01KG7R1ZXWFMWQ4DA1Q6TN1DG5',
       );
       expect(result).toHaveLength(2);
     });
 
     test('deduplicates DXNs', ({ expect }) => {
-      const result = extractDxnsFromString(
-        'Same object dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4 and dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
+      const result = extractDxnFromString(
+        'Same object echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4 and 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);
     });
   });
 
   describe('extractDxnsFromObject', () => {
-    test('extracts IPLD-style reference { "/": "dxn:..." }', ({ expect }) => {
+    test('extracts IPLD-style reference { "/": "echo:..." }', ({ expect }) => {
       const result = extractDxnsFromObject({
-        '/': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
+        '/': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
       });
       expect(result).toHaveLength(1);
-      expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result[0].toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
-    test('extracts @dxn key reference { "@dxn": "dxn:..." }', ({ expect }) => {
+    test('extracts @uri key reference { "@uri": "echo:..." }', ({ expect }) => {
       const result = extractDxnsFromObject({
-        '@dxn': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
+        '@uri': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
         name: 'Test',
       });
       expect(result).toHaveLength(1);
-      expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result[0].toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
-    test('extracts reference block { _tag: "reference", reference: { dxn: ... } }', ({ expect }) => {
+    test('extracts reference block { _tag: "reference", reference: { uri: ... } }', ({ expect }) => {
       const result = extractDxnsFromObject({
         _tag: 'reference',
         reference: {
-          dxn: 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
+          uri: 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
         },
       });
       expect(result).toHaveLength(1);
-      expect(result[0].toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result[0].toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
     test('extracts DXN from nested object', ({ expect }) => {
@@ -79,7 +79,7 @@ describe('dxn-extractor', () => {
         data: {
           items: [
             {
-              ref: { '/': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
+              ref: { '/': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
             },
           ],
         },
@@ -89,15 +89,15 @@ describe('dxn-extractor', () => {
 
     test('extracts DXN from string property', ({ expect }) => {
       const result = extractDxnsFromObject({
-        message: 'Created object dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
+        message: 'Created object echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4',
       });
       expect(result).toHaveLength(1);
     });
 
     test('extracts DXN from array', ({ expect }) => {
       const result = extractDxnsFromObject([
-        { '/': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
-        { '/': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG5' },
+        { '/': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
+        { '/': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG5' },
       ]);
       expect(result).toHaveLength(2);
     });
@@ -111,16 +111,16 @@ describe('dxn-extractor', () => {
   describe('extractFirstDxnFromToolInput', () => {
     test('extracts DXN from JSON tool input', ({ expect }) => {
       const input = JSON.stringify({
-        objectRef: { '/': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
+        objectRef: { '/': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
       });
       const result = extractFirstDxnFromToolInput(input);
-      expect(result?.toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result?.toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
     test('extracts DXN from invalid JSON string', ({ expect }) => {
-      const input = 'Invalid JSON but contains dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4';
+      const input = 'Invalid JSON but contains echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4';
       const result = extractFirstDxnFromToolInput(input);
-      expect(result?.toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(result?.toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
     test('returns undefined for input without DXNs', ({ expect }) => {
@@ -133,10 +133,10 @@ describe('dxn-extractor', () => {
   describe('extractFirstDxnFromToolResult', () => {
     test('extracts DXN from JSON tool result', ({ expect }) => {
       const result = JSON.stringify({
-        created: { '/': 'dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
+        created: { '/': 'echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4' },
       });
       const dxn = extractFirstDxnFromToolResult(result);
-      expect(dxn?.toString()).toBe('dxn:echo:@:01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
+      expect(dxn?.toString()).toBe('echo:/01KG7R1ZXWFMWQ4DA1Q6TN1DG4');
     });
 
     test('returns undefined for undefined result', ({ expect }) => {