@dxos/plugin-assistant 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

package/src/containers/RoutineArticle/RoutineArticle.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { AgentPrompt } from '@dxos/assistant-toolkit';
@@ -13,47 +13,97 @@ import { invariant } from '@dxos/invariant';
 import { useComputeRuntimeCallback } from '@dxos/plugin-automation/hooks';
 import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
 import { TemplateEditor } from '#components';
 import { meta } from '#meta';
 
 export type RoutineArticleProps = AppSurface.ObjectArticleProps<Routine.Routine>;
 
+type RunState =
+  | { status: 'idle' }
+  | { status: 'running' }
+  | { status: 'success'; result: unknown }
+  | { status: 'error'; error: Error };
+
+// TODO(burdon): Trigger editor.
 export const RoutineArticle = ({ role, attendableId, subject }: RoutineArticleProps) => {
   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 invoke = usePromptHandler(subject);
+  const [state, setState] = useState<RunState>({ status: 'idle' });
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
 
-  const handleRun = useComputeRuntimeCallback(
-    db?.spaceId,
-    () => {
-      invariant(inputData);
-      return Operation.invoke(AgentPrompt, inputData);
-    },
-    [inputData],
-  );
+  const handleRun = useCallback(async () => {
+    setState({ status: 'running' });
+    try {
+      const result = await invoke();
+      if (mountedRef.current) {
+        setState({ status: 'success', result });
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setState({ status: 'error', error: err instanceof Error ? err : new Error(String(err)) });
+      }
+    }
+  }, [invoke]);
 
   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 disabled={!hasAttention || state.status === 'running'}>
+          <Toolbar.IconButton
+            iconOnly
+            icon={state.status === 'running' ? 'ph--spinner-gap--regular' : 'ph--play--regular'}
+            label={t('run-prompt.label')}
+            onClick={handleRun}
+          />
         </Toolbar.Root>
       </Panel.Toolbar>
-      <Panel.Content asChild>
+      <Panel.Content classNames='flex flex-col gap-2'>
         <TemplateEditor id={subject.id} template={subject.instructions} />
+        <RoutineResult state={state} />
       </Panel.Content>
     </Panel.Root>
   );
 };
+
+const RoutineResult = ({ state }: { state: RunState }) => {
+  const { t } = useTranslation(meta.id);
+  switch (state.status) {
+    case 'idle':
+      return null;
+    case 'running':
+      return <div className='p-2 text-sm text-subdued'>{t('routine-running.label')}</div>;
+    case 'error':
+      return <div className='p-2 text-sm text-error'>{state.error.message}</div>;
+    case 'success':
+      return <JsonHighlighter classNames='p-2! text-sm' data={state.result} />;
+  }
+};
+
+const usePromptHandler = (routine: Routine.Routine) => {
+  const db = Obj.getDatabase(routine);
+  const data = useMemo<Operation.Definition.Input<typeof AgentPrompt> | undefined>(() => {
+    if (db && routine) {
+      return {
+        prompt: db.makeRef(Obj.getDXN(routine)),
+        input: {},
+      };
+    }
+  }, [routine, db]);
+
+  return useComputeRuntimeCallback(
+    db?.spaceId,
+    () => {
+      invariant(data);
+      return Operation.invoke(AgentPrompt, data);
+    },
+    [data],
+  );
+};

package/src/containers/RoutineList/RoutineList.stories.tsx

@@ -10,9 +10,9 @@ import { SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Routine } from '@dxos/compute';
 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 { AutomationPlugin } from '@dxos/plugin-automation/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { Markdown } from '@dxos/plugin-markdown';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Config } from '@dxos/react-client';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';

package/src/containers/RoutineList/RoutineList.tsx

@@ -9,11 +9,11 @@ import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { DatabaseBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
 import { Routine } from '@dxos/compute';
 import { Filter, Obj, Ref } from '@dxos/echo';
-import { MarkdownBlueprint } from '@dxos/plugin-markdown/blueprints';
+import { MarkdownBlueprint } from '@dxos/plugin-markdown';
 import { useQuery } from '@dxos/react-client/echo';
 import { IconButton } from '@dxos/react-ui';
 
-import { AssistantOperation } from '#operations';
+import { AssistantOperation } from '#types';
 
 export type RoutineListProps = AppSurface.ObjectSectionProps<Obj.Unknown>;
 
@@ -26,7 +26,7 @@ export const RoutineList = ({ subject }: RoutineListProps) => {
   }
 
   return (
-    <div role='none' className='flex gap-2'>
+    <div className='flex gap-2'>
       {prompts.map((prompt, i) => (
         <div key={i}>
           <IconButton

package/src/containers/TracePanel/TracePanel.stories.tsx

@@ -12,19 +12,19 @@ import { Process, Trace } from '@dxos/compute';
 import { Feed, Filter, Query } from '@dxos/echo';
 import { FeedTraceSink, ProcessManager } from '@dxos/functions-runtime';
 import { log } from '@dxos/log';
-import { AutomationPlugin } from '@dxos/plugin-automation';
 import { useComputeRuntime } from '@dxos/plugin-automation/hooks';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { AutomationPlugin } from '@dxos/plugin-automation/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
-import { IconButton, Panel, Toolbar } from '@dxos/react-ui';
+import { IconButton, Panel, ScrollContainer, Toolbar } from '@dxos/react-ui';
 import { Timeline } from '@dxos/react-ui-components';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
+import { AssistantPlugin } from '#plugin';
 import { translations } from '#translations';
 
-import { AssistantPlugin } from '../../cli';
 import { buildExecutionGraph } from './execution-graph';
 import { PLAYBACK_INTERVAL_MS, STEP_STORAGE_KEY, SimulatedAgent, useLocalStorageNumber } from './testing';
 import { TracePanel } from './TracePanel';
@@ -189,28 +189,35 @@ const SnapshotStory = () => {
   }, [handleNext, handlePrev, handleTogglePlay, handleReset, handleShowAll]);
 
   return (
-    <BaseStory
-      toolbar={
-        <Toolbar.Root>
-          <IconButton iconOnly icon='ph--skip-back--regular' label='Reset (R)' onClick={handleReset} />
-          <IconButton iconOnly icon='ph--caret-left--regular' label='Step back (← / H)' onClick={handlePrev} />
-          <IconButton
-            iconOnly
-            icon={playing ? 'ph--pause--regular' : 'ph--play--regular'}
-            label={playing ? 'Pause (Space)' : 'Play (Space)'}
-            onClick={handleTogglePlay}
-          />
-          <IconButton iconOnly icon='ph--caret-right--regular' label='Step forward (→ / L)' onClick={handleNext} />
-          <IconButton iconOnly icon='ph--skip-forward--regular' label='Show all (E / End)' onClick={handleShowAll} />
-          <Toolbar.Separator />
-          <Toolbar.Text className='text-sm tabular-nums opacity-70'>
-            `${step} / ${total}`
-          </Toolbar.Text>
-        </Toolbar.Root>
-      }
-    >
-      <Timeline branches={branches} commits={commits} showTimestamp />
-    </BaseStory>
+    <ScrollContainer.Root pin>
+      <BaseStory
+        toolbar={
+          <Toolbar.Root>
+            <IconButton iconOnly icon='ph--skip-back--regular' label='Reset (R)' onClick={handleReset} />
+            <IconButton iconOnly icon='ph--caret-left--regular' label='Step back (← / H)' onClick={handlePrev} />
+            <IconButton
+              iconOnly
+              icon={playing ? 'ph--pause--regular' : 'ph--play--regular'}
+              label={playing ? 'Pause (Space)' : 'Play (Space)'}
+              onClick={handleTogglePlay}
+            />
+            <IconButton iconOnly icon='ph--caret-right--regular' label='Step forward (→ / L)' onClick={handleNext} />
+            <IconButton iconOnly icon='ph--skip-forward--regular' label='Show all (E / End)' onClick={handleShowAll} />
+            <Toolbar.Text className='text-right text-sm tabular-nums opacity-70'>
+              {step} / {total}
+            </Toolbar.Text>
+          </Toolbar.Root>
+        }
+      >
+        <ScrollContainer.Content thin>
+          <ScrollContainer.Viewport>
+            <Timeline branches={branches} commits={commits} showTimestamp />
+          </ScrollContainer.Viewport>
+          <ScrollContainer.ScrollDownButton />
+          <ScrollContainer.Fade />
+        </ScrollContainer.Content>
+      </BaseStory>
+    </ScrollContainer.Root>
   );
 };
 

package/src/containers/TracePanel/TracePanel.tsx

@@ -7,7 +7,7 @@ import { useAtomValue } from '@effect-atom/atom-react';
 import { pipe } from 'effect/Function';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { useAtomCapability, 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';
@@ -18,26 +18,34 @@ 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 { AssistantCapabilities } from '#types';
 
-import { buildExecutionGraph } from './execution-graph';
+import { buildExecutionGraph, type ExecutionGraph } from './execution-graph';
 
 export type TracePanelProps = AppSurface.SpaceArticleProps<Pick<ProcessTreeProps, 'onProcessTerminate'>>;
 
 export const TracePanel = composable<HTMLDivElement, TracePanelProps>(
-  ({ space, onProcessTerminate, ...props }, forwardedRef) => {
+  ({ space, attendableId, onProcessTerminate, ...props }, forwardedRef) => {
+    const attentionAttrs = useAttentionAttributes(attendableId);
     const { invokePromise } = useOperationInvoker();
-    const { branches, commits } = useExecutionGraph(space);
+    const settings = useAtomCapability(AssistantCapabilities.Settings);
+    const tracePanelDebug = settings.tracePanelDebug ?? false;
+    const { branches, commits, spanTree } = useExecutionGraph(space);
     const runtime = useComputeRuntimeService(Process.ProcessMonitorService, space.id);
     const processes = useAtomValue(runtime?.processTreeAtom ?? atomEmpty);
 
-    const handleCommitClick = useCallback(
-      (commit: Commit) => {
-        if (commit.link) {
+    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.
@@ -47,7 +55,7 @@ export const TracePanel = composable<HTMLDivElement, TracePanelProps>(
           }
         }
       },
-      [invokePromise],
+      [invokePromise, setSelectedCommit],
     );
 
     // Select current branch.
@@ -56,7 +64,6 @@ export const TracePanel = composable<HTMLDivElement, TracePanelProps>(
       (process: Process.Info) => {
         const branch = branches.find((branch) => branch === process.pid.toString());
         if (branch) {
-          log.info('select', { process, branch });
           setCurrentBranch(branch);
         }
       },
@@ -64,23 +71,60 @@ export const TracePanel = composable<HTMLDivElement, TracePanelProps>(
     );
 
     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>
+      <div
+        {...composableProps(props, {
+          ...attentionAttrs,
+          classNames: mx(
+            'h-full grid divide-y divide-separator',
+            !tracePanelDebug && 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}
+        />
+
+        <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={selectedCommit}>
+            <Syntax.Content>
+              <Syntax.Viewport>
+                <Syntax.Code className='text-xs' />
+              </Syntax.Viewport>
+            </Syntax.Content>
+          </Syntax.Root>
+        )}
+      </div>
     );
   },
 );
@@ -88,11 +132,6 @@ export const TracePanel = composable<HTMLDivElement, TracePanelProps>(
 // Stable ref.
 const atomEmpty = Atom.make(() => [] as const);
 
-type ExecutionGraph = {
-  branches: string[];
-  commits: Commit[];
-};
-
 type UseExecutionGraphOptions = {
   eventLimit?: number;
 };

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

@@ -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 = 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);
         }
       }