@dxos/plugin-assistant 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/containers/AssistantSettings/OllamaModels.tsx

@@ -0,0 +1,255 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Model, Provider } from '@dxos/ai';
+import { useOptionalCapability } from '@dxos/app-framework/ui';
+import { EffectEx } from '@dxos/effect';
+import { List, ListItem } from '@dxos/react-list';
+import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { Combobox } from '@dxos/react-ui-list';
+
+import { meta } from '#meta';
+import { AssistantCapabilities, type Ollama } from '#types';
+
+/** Quick-pick model names (Ollama pull tags) sourced from the curated catalog. */
+const QUICK_PICKS = Model.forProvider(Provider.ollama.id).map((model) => model.backend);
+
+/** Poll interval for the loaded-into-memory set while the settings panel is open. */
+const LOADED_POLL_INTERVAL = 3_000;
+
+/**
+ * Manage locally-installed Ollama models. The {@link AssistantCapabilities.OllamaManager}
+ * capability is only contributed by the native (desktop) runtime, so this renders nothing in the
+ * browser/mobile. Split from the section body so hooks are never called conditionally.
+ */
+export const OllamaModels = () => {
+  const manager = useOptionalCapability(AssistantCapabilities.OllamaManager);
+  if (!manager) {
+    return null;
+  }
+
+  return <OllamaModelsSection manager={manager} />;
+};
+
+export const OllamaModelsSection = ({ manager }: { manager: Ollama.Manager }) => {
+  const { t } = useTranslation(meta.profile.key);
+  // Explicit subscription: the list and badges must re-render as pulls/installs/loads land.
+  const state = useAtomValue(manager.state);
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  // UI-level gate keyed by model name, guaranteeing a visible busy state across the click handler.
+  const [pending, setPending] = useState<Record<string, boolean>>({});
+
+  // Ensure the sidecar is up and list installed models on mount.
+  useEffect(() => {
+    void EffectEx.runPromise(manager.refresh);
+  }, [manager]);
+
+  // Poll the loaded-into-memory set so the panel reflects which model is resident in real time.
+  useEffect(() => {
+    const interval = setInterval(() => void EffectEx.runPromise(manager.refreshLoaded), LOADED_POLL_INTERVAL);
+    return () => clearInterval(interval);
+  }, [manager]);
+
+  const installed = new Set(state.models.map((model) => model.name));
+  const loaded = new Map(state.loaded.map((model) => [model.name, model]));
+  const pulling = Object.keys(state.pulls).filter((name) => !installed.has(name));
+
+  const withPending = useCallback(
+    (key: string, action: () => Promise<void>) => async () => {
+      setPending((prev) => ({ ...prev, [key]: true }));
+      try {
+        await action();
+      } finally {
+        setPending((prev) => ({ ...prev, [key]: false }));
+      }
+    },
+    [],
+  );
+
+  const handlePull = useCallback(
+    (target: string) => {
+      const trimmed = target.trim();
+      if (trimmed.length === 0) {
+        return;
+      }
+      setQuery('');
+      setOpen(false);
+      void withPending(trimmed, () => EffectEx.runPromise(manager.pull(trimmed)))();
+    },
+    [manager, withPending],
+  );
+
+  // Caller-driven filtering: curated picks not yet installed, matching the typed query.
+  const filter = query.trim();
+  const suggestions = QUICK_PICKS.filter((pick) => !installed.has(pick) && (filter === '' || pick.includes(filter)));
+  const offerCustom = filter.length > 0 && !installed.has(filter) && !suggestions.includes(filter);
+  const empty = state.models.length === 0 && pulling.length === 0;
+
+  return (
+    <Form.Section title={t('settings.ollama.title')}>
+      <Form.Row label={t('settings.ollama.installed.label')}>
+        {state.kind === 'failed' && state.error ? (
+          // Connection-level failure has no associated model, so it shows inline as the row content.
+          <p className='text-sm text-error-text'>{t('settings.ollama.failed.message', { error: state.error })}</p>
+        ) : empty ? (
+          <p className='text-sm text-description'>{t('settings.ollama.empty.message')}</p>
+        ) : (
+          // Plain `List`/`ListItem` (non-select), with the trigger editor's "fatter" two-line row
+          // treatment: a name line plus a secondary meta line, on a surface-styled row. Rows are
+          // actioned via their trailing buttons (no selection semantics).
+          <List variant='unordered' className='flex flex-col gap-1 grow is-full text-left'>
+            {state.models.map((model) => {
+              const running = loaded.get(model.name);
+              const error = state.errors[model.name];
+              const size = model.size != null ? formatBytes(model.size) : undefined;
+              const loadedLabel = running
+                ? running.sizeVram
+                  ? t('settings.ollama.loaded.vram', { size: formatBytes(running.sizeVram) })
+                  : t('settings.ollama.loaded.label')
+                : undefined;
+              return (
+                <ListItem
+                  key={model.name}
+                  className='flex flex-col gap-0.5 rounded-sm bg-input-surface px-2 py-1.5 is-full'
+                >
+                  <div className='flex items-center gap-2'>
+                    <span className='grow truncate font-medium'>{model.name}</span>
+                    <IconButton
+                      icon={running ? 'ph--eject--regular' : 'ph--play--regular'}
+                      iconOnly
+                      label={running ? t('settings.ollama.unload.label') : t('settings.ollama.load.label')}
+                      disabled={pending[model.name]}
+                      onClick={() =>
+                        void withPending(model.name, () =>
+                          EffectEx.runPromise(running ? manager.unload(model.name) : manager.load(model.name)),
+                        )()
+                      }
+                    />
+                    <IconButton
+                      icon='ph--trash--regular'
+                      iconOnly
+                      label={t('settings.ollama.remove.label')}
+                      disabled={pending[model.name]}
+                      onClick={() =>
+                        void withPending(model.name, () => EffectEx.runPromise(manager.remove(model.name)))()
+                      }
+                    />
+                  </div>
+                  {(size || loadedLabel || error) && (
+                    <div className='flex items-center gap-2 text-sm'>
+                      {size && <span className='text-description'>{size}</span>}
+                      {loadedLabel && <span className='text-success-text'>{loadedLabel}</span>}
+                      {error && <span className='truncate text-error-text'>{shortError(error)}</span>}
+                    </div>
+                  )}
+                </ListItem>
+              );
+            })}
+            {pulling.map((name) => {
+              const progress = state.pulls[name];
+              const status = progress?.total
+                ? t('settings.ollama.pulling.message', { percent: percentOf(progress) })
+                : (progress?.status ?? t('settings.ollama.pulling.label'));
+              return (
+                <ListItem key={name} className='flex flex-col gap-0.5 rounded-sm bg-input-surface px-2 py-1.5 is-full'>
+                  <div className='flex items-center gap-2'>
+                    <span className='grow truncate font-medium text-description'>{name}</span>
+                    <IconButton
+                      icon='ph--x--regular'
+                      iconOnly
+                      label={t('settings.ollama.cancel.label')}
+                      onClick={() => void EffectEx.runPromise(manager.cancel(name))}
+                    />
+                  </div>
+                  <span className='text-sm text-description'>{status}</span>
+                </ListItem>
+              );
+            })}
+          </List>
+        )}
+      </Form.Row>
+
+      <Form.Row label={t('settings.ollama.pull.label')}>
+        {/* Pull failures for not-yet-installed models surface here (no model row to attach to). */}
+        {Object.entries(state.errors)
+          .filter(([name]) => !installed.has(name))
+          .map(([name, error]) => (
+            <p key={name} className='text-xs text-error-text'>
+              {name}: {shortError(error)}
+            </p>
+          ))}
+        {/* Root value is held empty so the trigger always shows the placeholder; the live text is
+            the separate `query` driving the input and suggestion filter. */}
+        <Combobox.Root
+          open={open}
+          onOpenChange={setOpen}
+          value=''
+          onValueChange={() => {}}
+          placeholder={t('settings.ollama.pull.placeholder')}
+        >
+          <Combobox.Trigger classNames='is-full' />
+          <Combobox.Portal>
+            <Combobox.Content>
+              <Combobox.Input
+                value={query}
+                onValueChange={setQuery}
+                placeholder={t('settings.ollama.pull.placeholder')}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && filter.length > 0) {
+                    handlePull(filter);
+                  }
+                }}
+              />
+              <Combobox.List>
+                {offerCustom && (
+                  <Combobox.Item
+                    value={filter}
+                    label={t('settings.ollama.pull-custom.label', { name: filter })}
+                    icon='ph--download-simple--regular'
+                    onSelect={() => handlePull(filter)}
+                  />
+                )}
+                {suggestions.map((pick) => (
+                  <Combobox.Item key={pick} value={pick} label={pick} onSelect={() => handlePull(pick)} />
+                ))}
+              </Combobox.List>
+              <Combobox.Arrow />
+            </Combobox.Content>
+          </Combobox.Portal>
+        </Combobox.Root>
+      </Form.Row>
+    </Form.Section>
+  );
+};
+
+/**
+ * Condense a verbose service error for inline display: drop Ollama's "(checked: <paths>)" path dump
+ * and cap the length. The full message is still logged to the console.
+ */
+const shortError = (error: string): string => {
+  const head = error.split(/\s*\(checked:/)[0].trim();
+  return head.length > 160 ? `${head.slice(0, 160)}…` : head;
+};
+
+/** Percent complete for an in-flight pull, or 0 when totals are not yet known. */
+const percentOf = (progress: Ollama.ModelsState['pulls'][string] | undefined): number =>
+  progress && progress.total && progress.total > 0 ? Math.round(((progress.completed ?? 0) / progress.total) * 100) : 0;
+
+const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+/** Human-readable byte size (binary units). */
+const formatBytes = (bytes: number): string => {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value.toFixed(unit === 0 ? 0 : 1)} ${UNITS[unit]}`;
+};

package/src/containers/ChatArticle/ChatArticle.stories.tsx

@@ -12,9 +12,9 @@ import { AppActivationEvents } from '@dxos/app-toolkit';
 import { Chat } from '@dxos/assistant-toolkit';
 import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { Feed, Filter, Ref } from '@dxos/echo';
-import { AutomationPlugin } from '@dxos/plugin-automation/testing';
-import { initializeIdentity, ClientPlugin } from '@dxos/plugin-client/testing';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { RoutinePlugin } from '@dxos/plugin-routine/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { Config } from '@dxos/react-client';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';
@@ -57,7 +57,7 @@ const meta = {
               yield* Effect.promise(() => space.db.flush({ indexes: true }));
             }),
         }),
-        AutomationPlugin(),
+        RoutinePlugin(),
         AssistantPlugin(),
         PreviewPlugin(),
         StorybookPlugin({}),

package/src/containers/ChatArticle/ChatArticle.tsx

@@ -2,18 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
 
+import { Provider } from '@dxos/ai';
 import { Capabilities } from '@dxos/app-framework';
-import { useAtomCapability, useCapability } from '@dxos/app-framework/ui';
+import { useAtomCapability, useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { getSpace } from '@dxos/client/echo';
 import { type Obj } from '@dxos/echo';
-import { useRegistry } from '@dxos/react-client/echo';
+import { ClientOperation } from '@dxos/plugin-client';
+import { useObject, useRegistry } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
 
 import { Chat as ChatComponent, type ChatRootProps } from '#components';
-import { useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
+import { useChatProcessor, useChatServices, usePresets } from '#hooks';
 import { type Assistant, AssistantCapabilities, type ChatType } from '#types';
 
 export type ChatArticleProps = AppSurface.ObjectSectionProps<ChatType.Chat> & {
@@ -30,13 +32,24 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
     const space = getSpace(chat) ?? getSpace(companionTo);
     const runtime = useChatServices({ id: space?.id });
 
-    const [online, setOnline] = useOnline();
-    const { preset, ...chatProps } = usePresets(online);
+    const { preset, ...chatProps } = usePresets(settings);
+    // The provider is configured in settings; the chat surfaces it as a read-only online indicator.
+    const online = preset?.provider === Provider.edge.id;
     const processor = useChatProcessor({ space, chat, preset, runtime, registry, settings });
-    const pendingSubmitted = useRef(false);
+
+    // Subscribe to the view type via `useObject` so the thread re-renders when ChatOptions changes it;
+    // a direct `chat.viewType` read in render does not establish a reactive dependency.
+    const [chatViewType] = useObject(chat, 'viewType');
+    const viewType = (chatViewType as Assistant.ChatView | undefined) ?? settings.chatView;
+
+    const { invokePromise } = useOperationInvoker();
+    const handleViewUsage = useCallback(() => {
+      void invokePromise(ClientOperation.OpenUsage, undefined);
+    }, [invokePromise]);
 
     // Reset the one-shot guard when the target conversation changes, so a pending prompt for a new
     // `attendableId` is still auto-submitted within the same mount.
+    const pendingSubmitted = useRef(false);
     useEffect(() => {
       pendingSubmitted.current = false;
     }, [attendableId]);
@@ -59,31 +72,21 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
       }
     }, [processor, attendableId, atomRegistry, stateAtom]);
 
-    const feedTarget = chat?.feed.target;
-    const view = (chat?.view as Assistant.ChatView | undefined) ?? settings.chatView;
-
     if (!processor) {
       return null;
     }
 
     return (
-      <ChatComponent.Root
-        chat={chat}
-        feed={feedTarget}
-        db={space?.db}
-        processor={processor}
-        onEvent={onEvent}
-        onSubmit={onSubmit}
-      >
+      <ChatComponent.Root chat={chat} db={space?.db} processor={processor} onEvent={onEvent} onSubmit={onSubmit}>
         <Panel.Root role={role} ref={forwardedRef}>
-          <Panel.Toolbar className='bg-toolbar-surface'>
+          <Panel.Toolbar>
             <ChatComponent.Toolbar classNames='dx-document' attendableId={attendableId} companionTo={companionTo} />
           </Panel.Toolbar>
           <Panel.Content>
             <ChatComponent.Content>
               <div className='dx-container relative'>
-                <ChatComponent.Thread viewType={view} />
-                {view !== 'summary' && (
+                <ChatComponent.Thread viewType={viewType} onViewUsage={handleViewUsage} />
+                {viewType !== 'summary' && (
                   <div className='absolute bottom-2 left-0 right-0'>
                     <div className='dx-document px-4'>
                       <ChatComponent.Status classNames='px-3 rounded-sm bg-group-surface' />
@@ -95,13 +98,7 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
                 <div className='flex flex-col items-center py-2 overflow-hidden'>
                   <ChatComponent.TaskList classNames='max-h-[120px] border border-separator rounded-sm text-description' />
                 </div>
-                <ChatComponent.Prompt
-                  {...chatProps}
-                  outline
-                  preset={preset?.id}
-                  online={online}
-                  onOnlineChange={setOnline}
-                />
+                <ChatComponent.Prompt {...chatProps} outline preset={preset?.id} online={online} />
               </div>
             </ChatComponent.Content>
           </Panel.Content>

package/src/containers/ChatCompanion/ChatCompanion.tsx

@@ -6,14 +6,14 @@ import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useMemo } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { BlueprintsAnnotation } from '@dxos/app-toolkit';
+import { AppAnnotation } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Chat } from '@dxos/assistant-toolkit';
 import { getSpace } from '@dxos/client/echo';
-import { Blueprint } from '@dxos/compute';
+import { Skill } from '@dxos/compute';
 import { Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
 import { SpaceOperation } from '@dxos/plugin-space';
-import { useQuery, useRegistry } from '@dxos/react-client/echo';
+import { useObject, useQuery, useRegistry } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 
 import { useContextBinder } from '#hooks';
@@ -27,7 +27,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
   ({ role = 'article', subject: chat, companionTo, attendableId }, forwardedRef) => {
     const { invokePromise } = useOperationInvoker();
     const space = getSpace(companionTo);
-    useBlueprints({ subject: chat, companionTo });
+    useSkills({ subject: chat, companionTo });
 
     // Persist (and flush) a transient chat before the first request so the agent can resolve
     // the now-durable conversation feed; subsequent submits are a no-op once persisted.
@@ -39,7 +39,6 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
       await invokePromise(SpaceOperation.AddObject, {
         object: chat,
         target: space.db,
-        hidden: true,
       });
       await invokePromise(SpaceOperation.AddRelation, {
         db: space.db,
@@ -68,32 +67,33 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
 );
 
 /**
- * Bind blueprints to the context.
+ * Bind skills to the context.
  */
 // TODO(burdon): Why is this only in the companion?
-const useBlueprints = ({ subject: chat, companionTo }: Pick<ChatCompanionProps, 'subject' | 'companionTo'>) => {
+const useSkills = ({ subject: chat, companionTo }: Pick<ChatCompanionProps, 'subject' | 'companionTo'>) => {
   const registry = useRegistry();
   const space = getSpace(companionTo);
-  const feedTarget = chat?.feed.target;
+  const [feedSnapshot] = useObject(chat?.feed);
+  const feedTarget = Obj.getReactiveOrUndefined(feedSnapshot);
   const binder = useContextBinder(space, feedTarget);
 
-  const blueprintKeys = useMemo(() => {
+  const skillKeys = useMemo(() => {
     const schema = companionTo ? Obj.getType(companionTo) : undefined;
     if (!schema) {
       return [] as string[];
     }
 
-    return Option.getOrElse(() => [] as string[])(BlueprintsAnnotation.get(Type.getSchema(schema)));
+    return Option.getOrElse(() => [] as string[])(AppAnnotation.SkillsAnnotation.get(Type.getSchema(schema)));
   }, [companionTo]);
 
-  const existingBlueprints = useQuery(space?.db, Filter.type(Blueprint.Blueprint));
-  const pluginBlueprints = useMemo(
+  const existingSkills = useQuery(space?.db, Filter.type(Skill.Skill));
+  const pluginSkills = useMemo(
     () =>
-      existingBlueprints.filter((blueprint) => {
-        const key = Obj.getMeta(blueprint).key;
-        return key !== undefined && blueprintKeys.includes(key);
+      existingSkills.filter((skill) => {
+        const key = Obj.getMeta(skill).key;
+        return key !== undefined && skillKeys.includes(key);
       }),
-    [existingBlueprints, blueprintKeys],
+    [existingSkills, skillKeys],
   );
 
   useAsyncEffect(async () => {
@@ -101,27 +101,27 @@ const useBlueprints = ({ subject: chat, companionTo }: Pick<ChatCompanionProps,
       return;
     }
 
-    // Bind annotated blueprints: use key URI for registry blueprints (no DB clone needed).
-    if (blueprintKeys.length > 0) {
-      const registryKeys = blueprintKeys.filter((key) => {
+    // Bind annotated skills: use key URI for registry skills (no DB clone needed).
+    if (skillKeys.length > 0) {
+      const registryKeys = skillKeys.filter((key) => {
         const candidate = registry.list().find((e) => Entity.getMeta(e)?.key === key);
-        return candidate != null && Obj.instanceOf(Blueprint.Blueprint, candidate);
+        return candidate != null && Obj.instanceOf(Skill.Skill, candidate);
       });
 
-      // DB-forked blueprints (in space but not in registry).
-      const dbForks = pluginBlueprints.filter((bp) => !registryKeys.includes(Obj.getMeta(bp).key ?? ''));
+      // DB-forked skills (in space but not in registry).
+      const dbForks = pluginSkills.filter((bp) => !registryKeys.includes(Obj.getMeta(bp).key ?? ''));
       if (registryKeys.length > 0) {
-        await binder.bind({ blueprints: registryKeys.map((key) => Ref.fromURI(Blueprint.registryURI(key))) });
+        await binder.bind({ skills: registryKeys.map((key) => Ref.fromURI(Skill.registryURI(key))) });
       }
       if (dbForks.length > 0) {
-        await binder.bind({ blueprints: dbForks.map((blueprint) => Ref.make(blueprint)) });
+        await binder.bind({ skills: dbForks.map((skill) => Ref.make(skill)) });
       }
     }
 
-    if (Obj.instanceOf(Blueprint.Blueprint, companionTo)) {
-      await binder.bind({ blueprints: [Ref.make(companionTo)] });
+    if (Obj.instanceOf(Skill.Skill, companionTo)) {
+      await binder.bind({ skills: [Ref.make(companionTo)] });
     } else {
       await binder.bind({ objects: [Ref.make(companionTo)] });
     }
-  }, [binder, blueprintKeys, pluginBlueprints, companionTo]);
+  }, [binder, skillKeys, pluginSkills, companionTo]);
 };

package/src/containers/ChatDialog/ChatDialog.tsx

@@ -4,15 +4,16 @@
 
 import React, { useCallback, useState } from 'react';
 
+import { Provider } from '@dxos/ai';
 import { useAtomCapability } from '@dxos/app-framework/ui';
 import { type Chat as ChatTypes } from '@dxos/assistant-toolkit';
 import { Obj } from '@dxos/echo';
-import { useRegistry } from '@dxos/react-client/echo';
+import { useObject, useRegistry } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ChatDialog as NaturalChatDialog } from '@dxos/react-ui-chat';
 
 import { Chat, type ChatRootProps } from '#components';
-import { useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
+import { useChatProcessor, useChatServices, usePresets } from '#hooks';
 import { meta } from '#meta';
 import { type Assistant, AssistantCapabilities } from '#types';
 
@@ -21,15 +22,17 @@ export type ChatDialogProps = {
 };
 
 export const ChatDialog = ({ chat }: ChatDialogProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const db = chat && Obj.getDatabase(chat);
   const settings = useAtomCapability(AssistantCapabilities.Settings);
   const runtime = useChatServices({ id: db?.spaceId });
-  const [online, setOnline] = useOnline();
-  const { preset, ...chatProps } = usePresets(online);
+  const { preset, ...chatProps } = usePresets(settings);
+  const online = preset?.provider === Provider.edge.id;
   const registry = useRegistry();
   const processor = useChatProcessor({ chat, preset, runtime, registry, settings });
+  // Subscribe via `useObject` so the thread re-renders when ChatOptions changes the view type.
+  const [chatViewType] = useObject(chat, 'viewType');
 
   // TODO(burdon): Refocus when open.
   const [open, setOpen] = useState(true);
@@ -56,10 +59,10 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
       <NaturalChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
         <NaturalChatDialog.Header title={t('assistant-dialog.title')} />
         <NaturalChatDialog.Content>
-          <Chat.Thread viewType={(chat.view as Assistant.ChatView | undefined) ?? settings.chatView} />
+          <Chat.Thread viewType={(chatViewType as Assistant.ChatView | undefined) ?? settings.chatView} />
         </NaturalChatDialog.Content>
         <NaturalChatDialog.Footer classNames='p-1.5'>
-          <Chat.Prompt {...chatProps} preset={preset?.id} online={online} onOnlineChange={setOnline} expandable />
+          <Chat.Prompt {...chatProps} preset={preset?.id} online={online} expandable />
         </NaturalChatDialog.Footer>
       </NaturalChatDialog.Root>
     </Chat.Root>

package/src/containers/IntegrationPrompt/IntegrationPrompt.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface, useCapabilities } from '@dxos/app-framework/ui';
+import { useActiveSpace } from '@dxos/app-toolkit/ui';
+import { Connector, ConnectorAuth, type ConnectorEntry } from '@dxos/plugin-connector';
+import { Icon, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+export type IntegrationPromptProps = {
+  /** Service the agent needs access to, e.g. `gmail.com`. */
+  service?: string;
+};
+
+/**
+ * Agent-facing connector prompt: rendered when the assistant needs a service the user has not yet
+ * connected. Resolves the matching {@link Connector} entries for `service` and offers to connect via
+ * the shared connector-auth surface, so the user can grant access inline instead of the agent failing
+ * silently.
+ */
+export const IntegrationPrompt = ({ service }: IntegrationPromptProps) => {
+  const { t } = useTranslation(meta.profile.key);
+  const space = useActiveSpace();
+  const connectors = useCapabilities(Connector).flat();
+  const matched = useMemo(() => (service ? matchConnectors(connectors, service) : []), [connectors, service]);
+
+  if (!service) {
+    return null;
+  }
+
+  const label = matched[0]?.label ?? service;
+  const connectorIds = matched.map((connector) => connector.id);
+
+  return (
+    <div role='group' className='flex flex-col gap-2 my-2 p-3 border border-subdued-separator rounded-sm'>
+      <div className='flex items-center gap-2'>
+        <Icon icon='ph--plugs--regular' size={5} classNames='shrink-0 text-subdued' />
+        <div className='flex flex-col min-w-0'>
+          <p className='text-sm font-medium truncate'>{t('integration-prompt.title', { service: label })}</p>
+          <p className='text-sm text-subdued'>
+            {connectorIds.length > 0
+              ? t('integration-prompt.description', { service: label })
+              : t('integration-prompt.unavailable', { service: label })}
+          </p>
+        </div>
+      </div>
+      {connectorIds.length > 0 && space && (
+        <div className='flex justify-end'>
+          <Surface.Surface type={ConnectorAuth} data={{ connectorIds }} limit={1} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Connectors whose id, source, or label relate to the requested service. Matches on the service's
+ * leading token (e.g. `gmail` from `gmail.com`) so model-supplied hostnames resolve to connectors
+ * keyed by short id or provider domain.
+ */
+const matchConnectors = (connectors: ConnectorEntry[], service: string): ConnectorEntry[] => {
+  const needle = service.trim().toLowerCase();
+  // A malformed service (e.g. `.gmail.com` or `/`) can yield an empty base token, which would make
+  // `value.includes(base)` match every connector; bail so the unavailable state is shown instead.
+  const base = needle.split(/[.@/]/)[0];
+  if (!needle || !base) {
+    return [];
+  }
+  return connectors.filter((connector) => {
+    const candidates = [connector.id, connector.source, connector.label]
+      .filter((value): value is string => typeof value === 'string')
+      .map((value) => value.toLowerCase());
+    return candidates.some((value) => value === needle || value === base || value.includes(base));
+  });
+};

package/src/containers/IntegrationPrompt/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { IntegrationPrompt as default } from './IntegrationPrompt';

package/src/containers/PlanArticle/PlanArticle.tsx

@@ -6,15 +6,19 @@ import React from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Plan } from '@dxos/assistant-toolkit';
+import { getSpace } from '@dxos/client/echo';
 import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 
 import { TaskList } from '#components';
+import { useTraceMessages } from '#hooks';
 
 export type PlanArticleProps = AppSurface.ObjectArticleProps<Plan.Plan>;
 
 export const PlanArticle = ({ role, attendableId, subject }: PlanArticleProps) => {
   const { hasAttention } = useAttention(attendableId);
+  const space = getSpace(subject);
+  const traceMessages = useTraceMessages(space);
 
   return (
     <Panel.Root role={role} classNames='dx-document'>
@@ -24,7 +28,7 @@ export const PlanArticle = ({ role, attendableId, subject }: PlanArticleProps) =
       <Panel.Content asChild>
         <ScrollArea.Root orientation='vertical'>
           <ScrollArea.Viewport>
-            <TaskList plan={subject} />
+            <TaskList plan={subject} space={space} traceMessages={traceMessages} />
           </ScrollArea.Viewport>
         </ScrollArea.Root>
       </Panel.Content>