@dxos/plugin-assistant 0.8.4-main.c85a9c8dae → 0.8.4-main.dfabb4ec29

package/src/containers/AgentProperties/AgentProperties.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom';
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Option from 'effect/Option';
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Agent, SyncTriggers } from '@dxos/assistant-toolkit';
+import { Operation } from '@dxos/compute';
+import { DXN, Obj, Ref } from '@dxos/echo';
+import { AtomObj } from '@dxos/echo-atom';
+import { log } from '@dxos/log';
+import { AutomationCapabilities } from '@dxos/plugin-automation';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+import { Input, useTranslation } from '@dxos/react-ui';
+import { FeedAnnotation } from '@dxos/schema';
+
+import { meta } from '#meta';
+
+export type AgentPropertiesProps = AppSurface.ObjectPropertiesProps<Agent.Agent>;
+
+export const AgentProperties = ({ subject: agent }: AgentPropertiesProps) => {
+  const { t } = useTranslation(meta.id);
+  const db = Obj.getDatabase(agent);
+
+  // TODO(burdon): Factor out (separate component from container)?
+  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
+  useEffect(() => {
+    if (!db) {
+      return;
+    }
+
+    return Obj.subscribe(agent, () => {
+      queueMicrotask(() => {
+        const runtime = computeRuntime.getRuntime(db.spaceId);
+        runtime
+          .runPromise(
+            Operation.invoke(SyncTriggers, {
+              agent: Ref.make(agent),
+            }),
+          )
+          .catch((err) => log.catch(err));
+      });
+    });
+  }, [db, agent, computeRuntime]);
+
+  // Build a filter matching objects of any schema annotated as a feed.
+  const feedFilter = useMemo(() => {
+    if (!db) {
+      return Filter.nothing();
+    }
+
+    const schemas = db.schemaRegistry.query({ location: ['database', 'runtime'] }).runSync();
+    const feedSchemas = schemas.filter((schema) => {
+      const annotation = FeedAnnotation.get(schema);
+      return Option.isSome(annotation) && annotation.value === true;
+    });
+
+    return feedSchemas.length === 0 ? Filter.nothing() : Filter.or(...feedSchemas.map((schema) => Filter.type(schema)));
+  }, [db]);
+
+  const subscribedObjects = useQuery(db, feedFilter);
+
+  // Query all existing subscriptions (e.g., mail, calendar, etc.)
+  const existingSubscriptions = useAtomValue(
+    useMemo(
+      () =>
+        AtomObj.make(agent).pipe((_) =>
+          Atom.make((get) => {
+            const agentObj = get(_);
+            const selectedSubscriptions: Obj.Unknown[] = subscribedObjects.filter((object) =>
+              agentObj.subscriptions.some((subscription) => DXN.equals(subscription.dxn, Obj.getDXN(object))),
+            );
+
+            return selectedSubscriptions;
+          }),
+        ),
+      [agent, subscribedObjects],
+    ),
+  );
+
+  // Create/remove agent subscription.
+  const handleSubscriptionChange = useCallback(
+    (object: Obj.Unknown, checked: boolean) => {
+      Obj.update(agent, (agent) => {
+        if (checked) {
+          agent.subscriptions.push(Ref.fromDXN(Obj.getDXN(object)));
+        } else {
+          agent.subscriptions = agent.subscriptions.filter(
+            (subscription) => !DXN.equals(subscription.dxn, Obj.getDXN(object)),
+          );
+        }
+      });
+    },
+    [agent],
+  );
+
+  if (subscribedObjects.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='dx-expander flex flex-col'>
+      <Input.Root>
+        <Input.Label classNames='mt-form-gap'>{t('subscriptions.label')}</Input.Label>
+      </Input.Root>
+
+      {subscribedObjects.map((object) => (
+        <Input.Root key={object.id}>
+          <div className='flex items-center gap-2'>
+            <Input.Checkbox
+              checked={existingSubscriptions.includes(object)}
+              onCheckedChange={(checked) => {
+                handleSubscriptionChange(object, checked === true);
+              }}
+            />
+            <Input.Label>{Obj.getLabel(object) ?? object.id}</Input.Label>
+          </div>
+        </Input.Root>
+      ))}
+    </div>
+  );
+};

package/src/containers/AgentProperties/index.ts

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

package/src/containers/BlueprintArticle/BlueprintArticle.tsx

@@ -4,21 +4,20 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { type Blueprint } from '@dxos/blueprints';
-import { Obj } from '@dxos/echo';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Blueprint } from '@dxos/compute';
 import { Panel, Toolbar } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 
-import { TemplateEditor } from '../../components';
+import { TemplateEditor } from '#components';
 
-export type BlueprintArticleProps = SurfaceComponentProps<Blueprint.Blueprint>;
+export type BlueprintArticleProps = AppSurface.ObjectArticleProps<Blueprint.Blueprint>;
 
-export const BlueprintArticle = ({ role, subject }: BlueprintArticleProps) => {
-  const { hasAttention } = useAttention(Obj.getDXN(subject).toString());
+export const BlueprintArticle = ({ role, attendableId, subject }: BlueprintArticleProps) => {
+  const { hasAttention } = useAttention(attendableId);
 
   return (
-    <Panel.Root role={role} classNames='dx-article'>
+    <Panel.Root role={role} classNames='dx-document'>
       <Panel.Toolbar asChild>
         <Toolbar.Root disabled={!hasAttention} />
       </Panel.Toolbar>

package/src/containers/BlueprintArticle/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { BlueprintArticle } from './BlueprintArticle';
-
-export default BlueprintArticle;
+export { BlueprintArticle as default } from './BlueprintArticle';

package/src/containers/ChatCompanion/ChatCompanion.tsx

@@ -2,129 +2,43 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Array from 'effect/Array';
-import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 
-import { useAtomCapability, useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppCapabilities } from '@dxos/app-toolkit';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { BlueprintsAnnotation } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Chat } from '@dxos/assistant-toolkit';
-import { Blueprint } from '@dxos/blueprints';
 import { getSpace } from '@dxos/client/echo';
-import { DXN, Filter, Obj, Query, Ref } from '@dxos/echo';
-import { SpaceOperation } from '@dxos/plugin-space/types';
+import { Blueprint } from '@dxos/compute';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
 import { useQuery } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 
-import { type ChatEvent } from '../../components';
-import { useBlueprintRegistry, useContextBinder } from '../../hooks';
-import { Assistant, AssistantCapabilities, AssistantOperation } from '../../types';
+import { type ChatEvent } from '#components';
+import { useBlueprintRegistry, useContextBinder } from '#hooks';
+import { AssistantOperation } from '#types';
+
 import ChatContainer from '../ChatContainer';
 
-export type ChatCompanionProps = {
-  role?: string;
-  data: {
-    subject: Chat.Chat | 'assistant-chat';
-    companionTo: Obj.Unknown;
-  };
-};
+export type ChatCompanionProps = AppSurface.ArticleProps<Chat.Chat, {}, Obj.Unknown>;
 
 export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
-  ({ role, data }: ChatCompanionProps, forwardedRef) => {
+  ({ role, subject: chat, companionTo, attendableId }, forwardedRef) => {
     const { invokePromise } = useOperationInvoker();
     const blueprintRegistry = useBlueprintRegistry();
-    const companionTo = data.companionTo;
-
     const space = getSpace(companionTo);
-    const [chat, setChat] = useState(data.subject === 'assistant-chat' ? undefined : data.subject);
-
-    // Watch the state atom directly to detect when plus button clears the chat selection.
-    const state = useAtomCapability(AssistantCapabilities.State);
-    const companionToId = Obj.getDXN(companionTo).toString();
-    const currentChatState = state?.currentChat[companionToId];
-
-    // Track if initial setup has been done (to distinguish initial mount from plus button click).
-    // Reset when companionTo changes.
-    const initialSetupDoneRef = useRef(false);
-    const prevCompanionToIdRef = useRef(companionToId);
-    if (prevCompanionToIdRef.current !== companionToId) {
-      initialSetupDoneRef.current = false;
-      prevCompanionToIdRef.current = companionToId;
-    }
-
-    // Sync local chat state with the state atom.
-    // When currentChatState is undefined (plus button clicked), reset local chat.
-    // When data.subject is a Chat object, use it directly.
-    // When currentChatState is a different chat, fetch and set it.
-    useEffect(() => {
-      // If state says no chat selected AND current chat is persisted, reset local state (handles plus button click).
-      // Don't reset in-memory chats - they're expected to have currentChatState === undefined.
-      if (!currentChatState && chat && getSpace(chat)) {
-        setChat(undefined);
-      } else if (data.subject !== 'assistant-chat') {
-        // If data.subject is a Chat object (resolved from graph), use it.
-        setChat(data.subject);
-      } else if (currentChatState && space) {
-        // currentChatState is set but graph couldn't resolve it - fetch manually.
-        const currentChatDxnStr = chat ? Obj.getDXN(chat).toString() : undefined;
-        if (currentChatState !== currentChatDxnStr) {
-          // Parse DXN and fetch the chat object from the database.
-          const parsedDxn = DXN.tryParse(currentChatState);
-          if (parsedDxn) {
-            const chatRef = space.db.makeRef(parsedDxn);
-            const resolvedChat = chatRef?.target;
-            if (Obj.instanceOf(Assistant.Chat, resolvedChat)) {
-              setChat(resolvedChat);
-            }
-          }
-        }
-      }
-    }, [currentChatState, data.subject, space, chat]);
-
-    const chatQueue = space && chat ? space.queues.get(chat.queue.dxn) : undefined;
-    const binder = useContextBinder(chatQueue);
-
-    // Initialize companion chat if it doesn't exist, but don't add it to the space immediately.
-    useAsyncEffect(async () => {
-      if (!space || chat) {
-        return;
-      }
+    const feedTarget = chat?.feed.target;
+    const binder = useContextBinder(space, feedTarget);
 
-      // Only query for existing chats on initial mount, not when plus button is clicked.
-      if (!initialSetupDoneRef.current) {
-        // Query for existing companion chats linked to this object.
-        const existingChats = await space.db
-          .query(Query.select(Filter.id(companionTo.id)).targetOf(Chat.CompanionTo).source())
-          .run();
-
-        initialSetupDoneRef.current = true;
-
-        // Use existing chat if found on initial mount.
-        if (existingChats.length > 0) {
-          const existingChat = existingChats.at(-1) as Assistant.Chat;
-          setChat(existingChat);
-          await invokePromise(AssistantOperation.SetCurrentChat, { companionTo, chat: existingChat });
-          return;
-        }
-      }
-
-      // Create chat in-memory only - it will be added to space on first message.
-      const { data: createResult } = await invokePromise(AssistantOperation.CreateChat, {
-        db: space.db,
-        addToSpace: false,
-      });
-      setChat(createResult?.object);
-    }, [chat, space, companionTo, invokePromise]);
-
-    // Add chat to space and create relation when user submits the first message.
+    // Persist chat on first submit.
     const handleEvent = useCallback(
       async (event: ChatEvent) => {
-        if (!chat || !space) {
+        if (!space || !chat) {
           return;
         }
 
-        // If chat is not in space yet, persist it on first submit.
         if (event.type === 'submit' && !getSpace(chat)) {
           await invokePromise(SpaceOperation.AddObject, {
             object: chat,
@@ -146,24 +60,13 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
       [chat, space, companionTo, invokePromise],
     );
 
-    const metadata = useCapabilities(AppCapabilities.Metadata);
-    const blueprintKeys = useMemo(
-      () =>
-        Function.pipe(
-          metadata,
-          Array.findFirst(
-            (
-              capability,
-            ): capability is {
-              id: string;
-              metadata: { blueprints?: string[] };
-            } => capability.id === Obj.getTypename(companionTo),
-          ),
-          Option.flatMap((c) => Option.fromNullable(c.metadata.blueprints)),
-          Option.getOrElse(() => [] as string[]),
-        ),
-      [metadata, companionTo],
-    );
+    const blueprintKeys = useMemo(() => {
+      const schema = companionTo ? Obj.getSchema(companionTo) : undefined;
+      if (!schema) {
+        return [] as string[];
+      }
+      return Option.getOrElse(() => [] as string[])(BlueprintsAnnotation.get(schema));
+    }, [companionTo]);
     const existingBlueprints = useQuery(space?.db, Filter.type(Blueprint.Blueprint));
     const pluginBlueprints = useMemo(
       () => existingBlueprints.filter((blueprint) => blueprintKeys.includes(blueprint.key)),
@@ -213,9 +116,10 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
 
     return (
       <ChatContainer
-        role={role}
+        role={role ?? 'article'}
         space={space}
         subject={chat}
+        attendableId={attendableId}
         companionTo={companionTo}
         onEvent={handleEvent}
         ref={forwardedRef}

package/src/containers/ChatCompanion/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ChatCompanion } from './ChatCompanion';
-
-export default ChatCompanion;
+export { ChatCompanion as default } from './ChatCompanion';

package/src/containers/ChatContainer/ChatContainer.tsx

@@ -2,31 +2,34 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 
-import { useAtomCapability } from '@dxos/app-framework/ui';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Capabilities } from '@dxos/app-framework';
+import { useAtomCapability, useCapability } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { type Space, getSpace } from '@dxos/client/echo';
-import { type Obj } from '@dxos/echo';
+import { Feed, type Obj } from '@dxos/echo';
 import { Panel } from '@dxos/react-ui';
+import { getParentId } from '@dxos/react-ui-attention';
 
-import { Chat as ChatComponent, type ChatRootProps } from '../../components';
-import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '../../hooks';
-import { AssistantCapabilities, type ChatType } from '../../types';
+import { Chat as ChatComponent, type ChatRootProps } from '#components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
+import { type Assistant, AssistantCapabilities, type ChatType } from '#types';
 
-export type ChatContainerProps = SurfaceComponentProps<
-  ChatType.Chat | undefined,
-  {
-    space?: Space;
-    companionTo?: Obj.Unknown;
-  } & Pick<ChatRootProps, 'onEvent'>
->;
+export type ChatContainerProps = (
+  | AppSurface.ObjectArticleProps<ChatType.Chat | undefined>
+  | AppSurface.ObjectSectionProps<ChatType.Chat | undefined>
+) & {
+  space?: Space;
+  companionTo?: Obj.Unknown;
+} & Pick<ChatRootProps, 'onEvent'>;
 
 export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((props, forwardedRef) => {
-  const { role, subject: chat, space: spaceProp, companionTo, onEvent } = props;
+  const { role, attendableId, subject: chat, space: spaceProp, companionTo, onEvent } = props;
+  const parentId = attendableId ? getParentId(attendableId) : undefined;
   const space = spaceProp ?? getSpace(chat);
   const settings = useAtomCapability(AssistantCapabilities.Settings);
-  const services = useChatServices({ id: space?.id, chat });
+  const runtime = useChatServices({ id: space?.id });
   const [online, setOnline] = useOnline();
   const { preset, ...chatProps } = usePresets(online);
   const blueprintRegistry = useBlueprintRegistry();
@@ -34,25 +37,58 @@ export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((pro
     space,
     chat,
     preset,
-    services,
+    runtime,
     blueprintRegistry,
     settings,
   });
 
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const stateAtom = useCapability(AssistantCapabilities.State);
+  const pendingSubmitted = useRef(false);
+  useEffect(() => {
+    if (!processor || !attendableId || pendingSubmitted.current) {
+      return;
+    }
+
+    const state = registry.get(stateAtom);
+    const pendingPrompt = state.pendingPrompts[attendableId];
+    if (pendingPrompt) {
+      pendingSubmitted.current = true;
+      registry.update(stateAtom, (current) => {
+        const { [attendableId]: _, ...rest } = current.pendingPrompts;
+        return { ...current, pendingPrompts: rest };
+      });
+      void processor.request({ message: pendingPrompt });
+    }
+  }, [processor, attendableId, registry, stateAtom]);
+
+  const feedTarget = chat?.feed.target;
+  const queue = space && feedTarget ? space.queues.get(Feed.getQueueDxn(feedTarget)!) : undefined;
+  const view = (chat?.view as Assistant.ChatView | undefined) ?? settings.chatView;
+
   if (!processor) {
     return null;
   }
 
   return (
-    <ChatComponent.Root db={space?.db} chat={chat} processor={processor} onEvent={onEvent}>
-      <Panel.Root role={role} classNames='dx-article' ref={forwardedRef}>
-        <Panel.Toolbar>
-          <ChatComponent.Toolbar companionTo={companionTo} />
+    <ChatComponent.Root db={space?.db} chat={chat} feed={queue} processor={processor} onEvent={onEvent}>
+      <Panel.Root role={role} ref={forwardedRef}>
+        <Panel.Toolbar className='bg-toolbar-surface'>
+          <ChatComponent.Toolbar classNames='dx-document' attendableId={attendableId} companionTo={companionTo} />
         </Panel.Toolbar>
         <Panel.Content>
-          <ChatComponent.Viewport>
-            <ChatComponent.Thread />
-            <div role='none' className='p-4'>
+          <ChatComponent.Content>
+            <div className='dx-container relative'>
+              <ChatComponent.Thread viewType={view} />
+              {view !== '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' />
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className='dx-document px-4 pb-4'>
               <ChatComponent.Prompt
                 {...chatProps}
                 outline
@@ -61,7 +97,7 @@ export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((pro
                 onOnlineChange={setOnline}
               />
             </div>
-          </ChatComponent.Viewport>
+          </ChatComponent.Content>
         </Panel.Content>
       </Panel.Root>
     </ChatComponent.Root>

package/src/containers/ChatContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ChatContainer } from './ChatContainer';
-
-export default ChatContainer;
+export { ChatContainer as default } from './ChatContainer';

package/src/containers/ChatDialog/ChatDialog.tsx

@@ -10,10 +10,10 @@ import { Obj } from '@dxos/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ChatDialog as NaturalChatDialog } from '@dxos/react-ui-chat';
 
-import { Chat, type ChatRootProps } from '../../components';
-import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '../../hooks';
-import { meta } from '../../meta';
-import { AssistantCapabilities } from '../../types';
+import { Chat, type ChatRootProps } from '#components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices, useOnline, usePresets } from '#hooks';
+import { meta } from '#meta';
+import { type Assistant, AssistantCapabilities } from '#types';
 
 export type ChatDialogProps = {
   chat?: ChatTypes.Chat;
@@ -24,17 +24,11 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
 
   const db = chat && Obj.getDatabase(chat);
   const settings = useAtomCapability(AssistantCapabilities.Settings);
-  const services = useChatServices({ id: db?.spaceId, chat });
+  const runtime = useChatServices({ id: db?.spaceId });
   const [online, setOnline] = useOnline();
   const { preset, ...chatProps } = usePresets(online);
   const blueprintRegistry = useBlueprintRegistry();
-  const processor = useChatProcessor({
-    chat,
-    preset,
-    services,
-    blueprintRegistry,
-    settings,
-  });
+  const processor = useChatProcessor({ chat, preset, runtime, blueprintRegistry, settings });
 
   // TODO(burdon): Refocus when open.
   const [open, setOpen] = useState(true);
@@ -59,9 +53,9 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
   return (
     <Chat.Root chat={chat} processor={processor} onEvent={handleEvent}>
       <NaturalChatDialog.Root open={open} expanded={expanded} onOpenChange={setOpen}>
-        <NaturalChatDialog.Header title={t('assistant dialog title')} />
+        <NaturalChatDialog.Header title={t('assistant-dialog.title')} />
         <NaturalChatDialog.Content>
-          <Chat.Thread />
+          <Chat.Thread viewType={(chat.view 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 />

package/src/containers/ChatDialog/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ChatDialog } from './ChatDialog';
-
-export default ChatDialog;
+export { ChatDialog as default } from './ChatDialog';

package/src/containers/{PromptArticle/PromptArticle.tsx → RoutineArticle/RoutineArticle.tsx}

@@ -4,27 +4,27 @@
 
 import React, { useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { AgentFunctions } from '@dxos/assistant-toolkit';
-import { type Prompt } from '@dxos/blueprints';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AgentPrompt } from '@dxos/assistant-toolkit';
+import { type Routine } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
-import { type FunctionDefinition } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { invokeFunctionWithTracing, useComputeRuntimeCallback } from '@dxos/plugin-automation';
+import { useComputeRuntimeCallback } from '@dxos/plugin-automation/hooks';
 import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 
-import { TemplateEditor } from '../../components';
-import { meta } from '../../meta';
+import { TemplateEditor } from '#components';
+import { meta } from '#meta';
 
-export type PromptArticleProps = SurfaceComponentProps<Prompt.Prompt>;
+export type RoutineArticleProps = AppSurface.ObjectArticleProps<Routine.Routine>;
 
-export const PromptArticle = ({ role, subject }: PromptArticleProps) => {
+export const RoutineArticle = ({ role, attendableId, subject }: RoutineArticleProps) => {
   const { t } = useTranslation(meta.id);
-  const { hasAttention } = useAttention(Obj.getDXN(subject).toString());
+  const { hasAttention } = useAttention(attendableId);
   const db = Obj.getDatabase(subject);
 
-  const inputData = useMemo<FunctionDefinition.Input<typeof AgentFunctions.Prompt> | undefined>(
+  const inputData = useMemo<Operation.Definition.Input<typeof AgentPrompt> | undefined>(
     () =>
       subject && db
         ? {
@@ -39,16 +39,16 @@ export const PromptArticle = ({ role, subject }: PromptArticleProps) => {
     db?.spaceId,
     () => {
       invariant(inputData);
-      return invokeFunctionWithTracing(AgentFunctions.Prompt, inputData);
+      return Operation.invoke(AgentPrompt, inputData);
     },
     [inputData],
   );
 
   return (
-    <Panel.Root role={role} className='dx-article'>
+    <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.IconButton iconOnly icon='ph--play--regular' label={t('run-prompt.label')} onClick={handleRun} />
         </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content asChild>

package/src/containers/RoutineArticle/index.ts

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