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

package/src/components/Chat/Chat.tsx

@@ -2,110 +2,85 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Extension, Prec } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
 import { useAtomValue } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
 import * as Array from 'effect/Array';
 import * as Option from 'effect/Option';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type Chat as ChatModule } from '@dxos/assistant-toolkit';
+import { Agent, Plan } from '@dxos/assistant-toolkit';
 import { Event } from '@dxos/async';
-import { type Database, Filter, Obj } from '@dxos/echo';
-import { useVoiceInput } from '@dxos/plugin-transcription';
-import { type Queue, useQuery } from '@dxos/react-client/echo';
+import { type Database, type Feed, Filter, Obj, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { Input, type ThemedClassName, useDynamicRef, useTranslation } from '@dxos/react-ui';
-import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
-import { type MarkdownStreamController } from '@dxos/react-ui-components';
+import { Toast, composable, composableProps, useTranslation } from '@dxos/react-ui';
+import { type MarkdownStreamController } from '@dxos/react-ui-markdown';
 import { Menu, MenuRootProps } from '@dxos/react-ui-menu';
 import { Message } from '@dxos/types';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
-import { isTruthy, trim } from '@dxos/util';
 
-import { useChatToolbarActions } from '#hooks';
+import { useChatKeymapExtensions, useChatToolbarActions, useDebug } from '#hooks';
 import { meta } from '#meta';
 
-import { type AiChatProcessor } from '../../processor';
 import {
-  ChatActions,
-  type ChatActionsProps,
-  ChatOptions,
-  type ChatPresetsProps,
-  ChatReferences,
-  ChatStatusIndicator,
+  ChatStatus,
+  ChatPrompt as NaturalChatPrompt,
+  type ChatPromptProps as NaturalChatPromptProps,
 } from '../ChatPrompt';
 import { ChatThread as NaturalChatThread, type ChatThreadProps as NaturalChatThreadProps } from '../ChatThread';
+import { TaskList } from '../TaskList';
+import { ChatContextProvider, type ChatContextValue, type ChatRequestTiming, useChatContext } from './context';
 import { type ChatEvent } from './events';
 
-//
-// Context
-// NOTE: The context should not be exported. It is only used internally.
-// Components outside of this Radix-style group shuld define their own APIs.
-//
-
-type ChatContextValue = {
-  debug?: boolean;
-  event: Event<ChatEvent>;
-  db?: Database.Database;
-  chat?: ChatModule.Chat;
-  messages: Message.Message[];
-  processor: AiChatProcessor;
-};
-
-export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');
-
 //
 // Root
 //
 
 type ChatRootProps = PropsWithChildren<
-  Pick<ChatContextValue, 'db' | 'chat' | 'processor'> & {
-    queue?: Queue;
+  Pick<ChatContextValue, 'chat' | 'processor'> & {
+    feed?: Feed.Feed;
+    /** Fallback database when the chat is transient (not yet persisted). */
+    db?: Database.Database;
     onEvent?: (event: ChatEvent) => void;
+    /**
+     * Runs (and is awaited) before the request fires on submit. Lets a transient chat
+     * persist and flush its conversation feed so the agent can resolve it.
+     */
+    onSubmit?: (text: string) => Promise<void> | void;
   }
 >;
 
-const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatRootProps) => {
+const ChatRoot = ({ children, chat, feed, processor, db: dbFallback, onEvent, onSubmit, ...props }: ChatRootProps) => {
   const [debug, setDebug] = useState(false);
-  const pending = useAtomValue(processor.messages);
   const streaming = useAtomValue(processor.streaming);
+  const active = useAtomValue(processor.active);
+  const requestTiming = useRequestTiming({ active });
   const lastPrompt = useRef<string | undefined>(undefined);
+  // Transient chats have no database of their own; fall back to the supplied space db so
+  // the message query and context controls operate before the chat is persisted.
+  const db = (chat && Obj.getDatabase(chat)) || dbFallback;
 
-  // Messages.
-  const storedMessages = useQuery(queue, Filter.type(Message.Message));
-  const messages = useMemo(() => {
-    return Array.dedupeWith([...storedMessages, ...pending], ({ id: a }, { id: b }) => a === b);
-  }, [storedMessages, pending]);
-
-  // Debug.
-  const dump = useCallback(async () => {
-    const objects = processor.context.getObjects();
-    const blueprints = processor.context.getBlueprints();
-    const system = await processor.getSystemPrompt();
-    const tools = await processor.getTools();
-
-    // eslint-disable-next-line no-console
-    // eslint-disable-next-line no-console
-    console.group('Chat', { objects, blueprints });
-    // eslint-disable-next-line no-console
-    console.log(trim`
-      System Prompt:
-      ${system}
-    `);
-    // eslint-disable-next-line no-console
-    console.log(trim`
-      Tools:
-      ${Object.values(tools)
-        .map((tool) => JSON.stringify(tool, null, 2))
-        .join('\n')}
-    `);
-    console.groupEnd();
-  }, [processor]);
-
-  // Events.
+  // Event sink.
   const event = useMemo(() => new Event<ChatEvent>(), []);
+
+  const feedMessages = useQuery(
+    db,
+    feed ? Query.select(Filter.type(Message.Message)).from(feed) : Query.select(Filter.nothing()),
+  );
+  const pendingMessages = useAtomValue(processor.messages);
+  const messages = useMemo(
+    () => Array.dedupeWith([...feedMessages, ...pendingMessages], ({ id: a }, { id: b }) => a === b),
+    [feedMessages, pendingMessages],
+  );
+
+  const dump = useDebug({ processor });
+
+  // Surface processor failures (e.g., AI service unavailable) to subscribers via the event bus.
+  const error = useAtomValue(processor.error);
+  useEffect(() => {
+    if (Option.isSome(error)) {
+      event.emit({ type: 'error', error: error.value });
+    }
+  }, [event, error]);
+
   useEffect(() => {
     return event.on((ev) => {
       switch (ev.type) {
@@ -125,7 +100,9 @@ const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatR
           const text = ev.text.trim();
           if (!streaming && text.length) {
             lastPrompt.current = ev.text;
-            void processor.request({ message: text });
+            // Await persistence (transient chat) before requesting so the agent resolves the
+            // now-durable conversation feed; resolves immediately when there is no hook.
+            void Promise.resolve(onSubmit?.(text)).then(() => processor.request({ message: text }));
           }
           break;
         }
@@ -138,8 +115,8 @@ const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatR
         }
 
         case 'cancel': {
+          void processor.cancel();
           if (streaming) {
-            void processor.cancel();
             if (lastPrompt.current) {
               event.emit({ type: 'update-prompt', text: lastPrompt.current });
             }
@@ -150,9 +127,7 @@ const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatR
 
       onEvent?.(ev);
     });
-  }, [event, dump, processor, streaming, onEvent]);
-
-  const db = props.db ?? (chat && Obj.getDatabase(chat));
+  }, [event, dump, processor, streaming, onEvent, onSubmit]);
 
   return (
     <ChatContextProvider
@@ -162,6 +137,7 @@ const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatR
       chat={chat}
       messages={messages}
       processor={processor}
+      requestTiming={requestTiming}
       {...props}
     >
       {children}
@@ -171,24 +147,40 @@ const ChatRoot = ({ children, chat, queue, processor, onEvent, ...props }: ChatR
 
 ChatRoot.displayName = 'Chat.Root';
 
+const useRequestTiming = ({ active }: { active: boolean }) => {
+  const [requestTiming, setRequestTiming] = useState<ChatRequestTiming | null>(null);
+  useEffect(() => {
+    if (active) {
+      setRequestTiming({ startedAt: Date.now(), endedAt: null });
+    } else {
+      setRequestTiming((prev) => (prev && prev.endedAt == null ? { ...prev, endedAt: Date.now() } : prev));
+    }
+  }, [active]);
+
+  return requestTiming;
+};
+
 //
 // Toolbar
 //
 
 const CHAT_TOOLBAR_NAME = 'Chat.Toolbar';
 
-type ChatToolbarProps = Pick<MenuRootProps, 'attendableId'> & {
-  companionTo?: Obj.Unknown;
-};
+type ChatToolbarProps = Pick<MenuRootProps, 'attendableId' | 'alwaysActive'> &
+  PropsWithChildren<{
+    companionTo?: Obj.Unknown;
+  }>;
 
 const ChatToolbar = composable<HTMLDivElement, ChatToolbarProps>(
-  ({ attendableId, companionTo, ...props }, forwardedRef) => {
+  ({ children, attendableId, alwaysActive, companionTo, ...props }, forwardedRef) => {
     const { chat } = useChatContext(CHAT_TOOLBAR_NAME);
     const menuActions = useChatToolbarActions({ chat, companionTo });
 
     return (
-      <Menu.Root {...menuActions} attendableId={attendableId}>
-        <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+      <Menu.Root {...menuActions} attendableId={attendableId} alwaysActive={alwaysActive}>
+        <Menu.Toolbar {...composableProps(props)} ref={forwardedRef}>
+          {children}
+        </Menu.Toolbar>
       </Menu.Root>
     );
   },
@@ -197,14 +189,14 @@ const ChatToolbar = composable<HTMLDivElement, ChatToolbarProps>(
 ChatToolbar.displayName = CHAT_TOOLBAR_NAME;
 
 //
-// Viewport
+// Content
 //
 
-const CHAT_VIEWPORT_NAME = 'Chat.Viewport';
+const CHAT_CONTENT_NAME = 'Chat.Content';
 
-type ChatViewportProps = {};
+type ChatContentProps = {};
 
-const ChatViewport = composable<HTMLDivElement, ChatViewportProps>(({ children, ...props }, forwardedRef) => {
+const ChatContent = composable<HTMLDivElement, ChatContentProps>(({ children, ...props }, forwardedRef) => {
   return (
     <div {...composableProps(props, { classNames: 'dx-expander flex flex-col' })} ref={forwardedRef}>
       {children}
@@ -212,7 +204,7 @@ const ChatViewport = composable<HTMLDivElement, ChatViewportProps>(({ children,
   );
 });
 
-ChatViewport.displayName = CHAT_VIEWPORT_NAME;
+ChatContent.displayName = CHAT_CONTENT_NAME;
 
 //
 // Thread
@@ -222,10 +214,14 @@ const CHAT_THREAD_NAME = 'Chat.Thread';
 
 type ChatThreadProps = Omit<NaturalChatThreadProps, 'identity' | 'messages' | 'tools'>;
 
-const ChatThread = (props: ChatThreadProps) => {
+const ChatThread = ({ viewType, debug: debugProp, ...props }: ChatThreadProps) => {
+  const { t } = useTranslation(meta.id);
   const { debug, event, messages, processor } = useChatContext(CHAT_THREAD_NAME);
+  const extensions = useChatKeymapExtensions({ event });
   const identity = useIdentity();
   const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
+  const [toastError, setToastError] = useState<Error | undefined>(undefined);
+  const debugView = viewType === 'debug';
 
   const controllerRef = useRef<MarkdownStreamController | null>(null);
   useEffect(() => {
@@ -241,6 +237,9 @@ const ChatThread = (props: ChatThreadProps) => {
         case 'nav-next':
           controllerRef.current?.navigateNext();
           break;
+        case 'error':
+          setToastError(event.error);
+          break;
       }
     });
   }, [event]);
@@ -253,19 +252,35 @@ const ChatThread = (props: ChatThreadProps) => {
   );
 
   if (!identity) {
-    return null;
+    return <div className='dx-expander' />;
   }
 
   return (
-    <NaturalChatThread
-      {...props}
-      identity={identity}
-      messages={messages}
-      error={error}
-      debug={debug}
-      onEvent={handleEvent}
-      ref={controllerRef}
-    />
+    <>
+      <NaturalChatThread
+        {...props}
+        identity={identity}
+        messages={messages}
+        error={error}
+        debug={debugProp ?? (debug || debugView)}
+        viewType={viewType}
+        extensions={extensions}
+        onEvent={handleEvent}
+        ref={controllerRef}
+      />
+
+      <Toast.Root
+        type='foreground'
+        open={!!toastError}
+        duration={20_000}
+        onOpenChange={(open) => !open && setToastError(undefined)}
+      >
+        <Toast.Title icon='ph--warning--regular' onClose={() => setToastError(undefined)}>
+          {t('ai-service-error.label')}
+        </Toast.Title>
+        <Toast.Description>{toastError?.message}</Toast.Description>
+      </Toast.Root>
+    </>
   );
 };
 
@@ -277,187 +292,38 @@ ChatThread.displayName = CHAT_THREAD_NAME;
 
 const CHAT_PROMPT_NAME = 'Chat.Prompt';
 
-type ChatPromptProps = ThemedClassName<
-  {
-    outline?: boolean;
-    settings?: boolean;
-  } & Pick<ChatEditorProps, 'placeholder'> &
-    Omit<ChatPresetsProps, 'onChange'> & {
-      expandable?: boolean;
-      online?: boolean;
-      onOnlineChange?: (online: boolean) => void;
-      onPresetChange?: ChatPresetsProps['onChange'];
-    }
->;
-
-const ChatPrompt = ({
-  classNames,
-  outline,
-  settings = true,
-  placeholder,
-  expandable,
-  online,
-  presets,
-  preset,
-  onPresetChange,
-  onOnlineChange,
-}: ChatPromptProps) => {
-  const { t } = useTranslation(meta.id);
-  const { db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
+type ChatPromptProps = Omit<NaturalChatPromptProps, 'chat' | 'db' | 'processor' | 'event'>;
 
-  const error = useAtomValue(processor.error).pipe(Option.getOrUndefined);
-  const streaming = useAtomValue(processor.streaming);
-  const active = useAtomValue(processor.active);
-  const activeRef = useDynamicRef(active);
+const ChatPrompt = (props: ChatPromptProps) => {
+  const { chat, db, processor, event } = useChatContext(CHAT_PROMPT_NAME);
+  return <NaturalChatPrompt {...props} chat={chat} db={db} processor={processor} event={event} />;
+};
 
-  const editorRef = useRef<ChatEditorController>(null);
-  const [recordingState, setRecordingState] = useState(false);
-  useEffect(() => {
-    return event.on((event) => {
-      switch (event.type) {
-        case 'update-prompt':
-          if (!editorRef.current?.getText()?.length) {
-            editorRef.current?.setText(event.text);
-            editorRef.current?.focus();
-          }
-          break;
-        case 'record-start':
-          setRecordingState(true);
-          break;
-        case 'record-stop':
-          setRecordingState(false);
-          break;
-      }
-    });
-  }, [event]);
+ChatPrompt.displayName = CHAT_PROMPT_NAME;
 
-  // TODO(burdon): Configure capability in TranscriptionPlugin.
-  const { recording } = useVoiceInput({
-    active: recordingState,
-    onUpdate: (text) => {
-      editorRef.current?.setText(text);
-      editorRef.current?.focus();
-    },
-  });
-
-  const extensions = useMemo<Extension[]>(() => {
-    return [
-      Prec.highest(
-        keymap.of([
-          {
-            key: 'Mod-d',
-            preventDefault: true,
-            run: () => {
-              event.emit({ type: 'toggle-debug' });
-              return true;
-            },
-          },
-          {
-            key: 'Mod-ArrowUp',
-            preventDefault: true,
-            run: () => {
-              event.emit({ type: 'nav-previous' });
-              return true;
-            },
-            shift: () => {
-              event.emit({ type: 'thread-open' });
-              return true;
-            },
-          },
-          {
-            key: 'Mod-ArrowDown',
-            preventDefault: true,
-            run: () => {
-              event.emit({ type: 'nav-next' });
-              return true;
-            },
-            shift: () => {
-              event.emit({ type: 'thread-close' });
-              return true;
-            },
-          },
-        ]),
-      ),
-    ].filter(isTruthy);
-  }, [event, expandable]);
-
-  const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
-    (text) => {
-      if (!activeRef.current) {
-        event.emit({ type: 'submit', text });
-        return true;
-      }
-    },
-    [event],
-  );
+//
+// TaskList
+//
 
-  const handleEvent = useCallback<NonNullable<ChatActionsProps['onEvent']>>(
-    (ev) => {
-      event.emit(ev);
-    },
-    [event],
-  );
+const CHAT_TASK_LIST_NAME = 'Chat.TaskList';
 
-  return (
-    <div
-      role='group'
-      className={mx(
-        'flex flex-col w-full dx-density-fine',
-        outline &&
-          'bg-group-surface border border-subdued-separator transition transition-border [&:has(.cm-content:focus)]:border-separator rounded-sm',
-        classNames,
-      )}
-    >
-      <div role='none' className='flex p-2 gap-2'>
-        <ChatStatusIndicator classNames='p-1' preset={preset} error={error} processing={streaming} />
-        <ChatEditor
-          ref={editorRef}
-          autoFocus
-          lineWrapping
-          classNames='col-span-2 pt-0.5'
-          placeholder={placeholder ?? t('prompt.placeholder')}
-          extensions={extensions}
-          onSubmit={handleSubmit}
-        />
-      </div>
-
-      {db && settings && (
-        <div role='none' className='flex items-center overflow-hidden'>
-          <ChatOptions
-            db={db}
-            blueprintRegistry={processor.blueprintRegistry}
-            context={processor.context}
-            preset={preset}
-            presets={presets}
-            onPresetChange={onPresetChange}
-          />
-
-          <div role='none' className='flex grow overflow-x-auto scrollbar-none'>
-            <ChatReferences db={db} context={processor.context} />
-          </div>
-
-          <ChatActions
-            classNames='col-span-2'
-            microphone={true}
-            recording={recording}
-            processing={streaming}
-            onEvent={handleEvent}
-          >
-            {/* TODO(burdon): Move offline switch into dialog. */}
-            {online !== undefined && (
-              <Input.Root>
-                <Input.Label srOnly>{t('online-switch.label')}</Input.Label>
-                <Input.Switch classNames='mx-2' checked={online} onCheckedChange={onOnlineChange} />
-              </Input.Root>
-            )}
-          </ChatActions>
-        </div>
-      )}
-    </div>
-  );
+type ChatTaskListProps = {
+  plan?: Plan.Plan;
 };
 
-ChatPrompt.displayName = CHAT_PROMPT_NAME;
+const ChatTaskList = composable<HTMLDivElement, ChatTaskListProps>(({ plan: planProp, ...props }, forwardedRef) => {
+  const { chat } = useChatContext(CHAT_TASK_LIST_NAME);
+  const parent = chat ? Obj.getParent(chat) : undefined;
+  const agent = parent && Obj.instanceOf(Agent.Agent, parent) ? parent : undefined;
+  const plan = planProp ?? agent?.plan.target;
+  if (!plan) {
+    return null;
+  }
+
+  return <TaskList {...props} plan={plan} ref={forwardedRef} />;
+});
+
+ChatTaskList.displayName = CHAT_TASK_LIST_NAME;
 
 //
 // Chat
@@ -466,9 +332,11 @@ ChatPrompt.displayName = CHAT_PROMPT_NAME;
 export const Chat = {
   Root: ChatRoot,
   Toolbar: ChatToolbar,
-  Viewport: ChatViewport,
-  Thread: ChatThread,
+  Content: ChatContent,
   Prompt: ChatPrompt,
+  Status: ChatStatus,
+  Thread: ChatThread,
+  TaskList: ChatTaskList,
 };
 
-export type { ChatRootProps, ChatToolbarProps, ChatViewportProps, ChatThreadProps, ChatPromptProps, ChatEvent };
+export type { ChatRootProps, ChatToolbarProps, ChatContentProps, ChatPromptProps, ChatThreadProps, ChatEvent };

package/src/components/Chat/context.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type Chat as ChatModule } from '@dxos/assistant-toolkit';
+import { type Event } from '@dxos/async';
+import { type Database } from '@dxos/echo';
+import { type Message } from '@dxos/types';
+
+import { type AiChatProcessor } from '../../processor';
+import { type ChatEvent } from './events';
+
+/**
+ * Wall-clock timestamps for the most-recent (or in-flight) request, lifted out of
+ * `ChatStreamStatus` so the elapsed value survives across re-mounts triggered when wire's
+ * drip queue toggles `wireDrainingEffect` (which removes/restores the footer block widget).
+ * `endedAt` is `null` while the request is still active.
+ */
+export type ChatRequestTiming = {
+  startedAt: number;
+  endedAt: number | null;
+};
+
+export type ChatContextValue = {
+  debug?: boolean;
+  event: Event<ChatEvent>;
+  db?: Database.Database;
+  chat?: ChatModule.Chat;
+  messages: Message.Message[];
+  processor: AiChatProcessor;
+  requestTiming: ChatRequestTiming | null;
+};
+
+// Internal: not re-exported from `Chat/index.ts`. Accessed by sibling components in this
+// package (e.g. `ChatStreamStatus`) without dragging in `Chat.tsx`'s heavy transitive
+// imports (transcription, etc.).
+export const [ChatContextProvider, useChatContext] = createContext<ChatContextValue>('Chat');

package/src/components/Chat/events.ts

@@ -34,6 +34,13 @@ export type ChatEvent =
       object: Obj.Unknown;
     }
   //
+  // Errors
+  //
+  | {
+      type: 'error';
+      error: Error;
+    }
+  //
   // UX
   //
   | {

package/src/components/ChatPrompt/ChatActions.tsx

@@ -9,7 +9,7 @@ import { mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-import { type ChatEvent } from '../Chat';
+import { type ChatEvent } from '../Chat/events';
 
 export type ChatActionsProps = ThemedClassName<
   PropsWithChildren<{
@@ -33,18 +33,9 @@ export const ChatActions = ({
   const { t } = useTranslation(meta.id);
 
   return (
-    <div className={mx('flex items-center me-1', classNames)}>
+    <div className={mx('flex items-center', classNames)}>
       {children}
 
-      <IconButton
-        disabled={!processing}
-        variant='ghost'
-        icon='ph--x--regular'
-        iconOnly
-        label={t('cancel-processing.button')}
-        onClick={() => onEvent?.({ type: 'cancel' })}
-      />
-
       {microphone && (
         <IconButton
           disabled={!processing}
@@ -70,6 +61,15 @@ export const ChatActions = ({
           onClick={() => onEvent?.({ type: 'toggle-debug' })}
         />
       )}
+
+      <IconButton
+        // disabled={!processing} // TODO(dmaretskyi): Set processing state correctly on rehydrated agents.
+        variant='ghost'
+        icon='ph--x--regular'
+        iconOnly
+        label={t('cancel-processing.button')}
+        onClick={() => onEvent?.({ type: 'cancel' })}
+      />
     </div>
   );
 };