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

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -23,7 +23,6 @@ export type TemplateFormProps = {
   id: string;
   template: Template.Template;
   schema?: Schema.Schema<any, any, any>;
-  commandEditable?: boolean;
   /**
    * Callback to mutate the template. Should wrap mutations in parent's Obj.update.
    * If not provided, the component is read-only.
@@ -31,14 +30,14 @@ export type TemplateFormProps = {
   onChange?: TemplateChangeCallback;
 };
 
-export const TemplateForm = ({ id, template, commandEditable = true, onChange }: TemplateFormProps) => {
+export const TemplateForm = ({ id, template, onChange }: TemplateFormProps) => {
   const { t } = useTranslation(meta.id);
   usePromptInputs(template, onChange);
 
   const handleInputKindChange = useCallback(
     (inputName: string, kind: Template.InputKind) => {
-      onChange?.((t) => {
-        const input = t.inputs?.find((i) => i?.name === inputName);
+      onChange?.((draft) => {
+        const input = draft.inputs?.find((i) => i?.name === inputName);
         if (input) {
           input.kind = kind;
         }
@@ -49,8 +48,8 @@ export const TemplateForm = ({ id, template, commandEditable = true, onChange }:
 
   const handleInputDefaultChange = useCallback(
     (inputName: string, value: string) => {
-      onChange?.((t) => {
-        const input = t.inputs?.find((i) => i?.name === inputName);
+      onChange?.((draft) => {
+        const input = draft.inputs?.find((i) => i?.name === inputName);
         if (input) {
           input.default = value;
         }
@@ -61,24 +60,6 @@ export const TemplateForm = ({ id, template, commandEditable = true, onChange }:
 
   return (
     <div className='flex flex-col w-full overflow-hidden gap-4'>
-      {/* {commandEditable && (
-        <div className='flex items-center pl-4'>
-          <span className='text-neutral-500'>/</span>
-          <Input.Root>
-            <Input.TextInput
-              placeholder={t('command.placeholder')}
-              classNames='w-full bg-transparent m-2'
-              value={template.command ?? ''}
-              onChange={(event) => {
-                onChange?.((t) => {
-                  t.command = event.target.value.replace(/\w/g, '');
-                });
-              }}
-            />
-          </Input.Root>
-        </div>
-      )} */}
-
       <TemplateEditor id={id} template={template} classNames='bg-base-surface min-h-[120px]' />
 
       {(template.inputs?.length ?? 0) > 0 && (
@@ -109,17 +90,15 @@ export const TemplateForm = ({ id, template, commandEditable = true, onChange }:
               </Input.Root>
 
               <div>
-                {input.kind !== undefined && ['value', 'context', 'resolver', 'schema'].includes(input.kind) && (
-                  <div>
-                    <Input.Root>
-                      <Input.TextInput
-                        placeholder={t('command.placeholder')}
-                        classNames='w-full bg-transparent'
-                        value={input.default ?? ''}
-                        onChange={(event) => handleInputDefaultChange(input.name, event.target.value)}
-                      />
-                    </Input.Root>
-                  </div>
+                {input.kind === 'value' && (
+                  <Input.Root>
+                    <Input.TextInput
+                      placeholder={t('command.placeholder')}
+                      classNames='w-full bg-transparent'
+                      value={input.default ?? ''}
+                      onChange={(event) => handleInputDefaultChange(input.name, event.target.value)}
+                    />
+                  </Input.Root>
                 )}
               </div>
             </Fragment>
@@ -137,33 +116,33 @@ const inputs: { kind: Template.InputKind; label: string }[] = [
     label: 'Value',
   },
   {
-    kind: 'pass-through',
-    label: 'Pass through',
-  },
-  {
-    kind: 'retriever',
-    label: 'Retriever',
-  },
-  {
-    kind: 'function',
-    label: 'Function',
-  },
-  {
-    kind: 'query',
-    label: 'Query',
-  },
-  {
-    kind: 'resolver',
-    label: 'Resolver',
-  },
-  {
-    kind: 'context',
-    label: 'Context',
-  },
-  {
-    kind: 'schema',
-    label: 'Schema',
+    kind: 'operation',
+    label: 'Operation',
   },
+  // {
+  //   kind: 'pass-through',
+  //   label: 'Pass through',
+  // },
+  // {
+  //   kind: 'retriever',
+  //   label: 'Retriever',
+  // },
+  // {
+  //   kind: 'query',
+  //   label: 'Query',
+  // },
+  // {
+  //   kind: 'resolver',
+  //   label: 'Resolver',
+  // },
+  // {
+  //   kind: 'context',
+  //   label: 'Context',
+  // },
+  // {
+  //   kind: 'schema',
+  //   label: 'Schema',
+  // },
 ];
 
 export const NAME_REGEXP = /\{\{([\w-]+)\}\}/;
@@ -194,30 +173,30 @@ const usePromptInputs = (template: Template.Template, onChange?: TemplateChangeC
 
     // Match or create new inputs.
     const values = unclaimed.values();
-    onChange((t) => {
-      if (!t.inputs) {
-        t.inputs = [];
+    onChange((draft) => {
+      if (!draft.inputs) {
+        draft.inputs = [];
       }
 
       missing.forEach((name) => {
         const next = values.next().value;
         if (next) {
           // Find the input in the mutable draft and update it.
-          const inputIndex = t.inputs!.findIndex((i) => i?.name === next.name);
+          const inputIndex = draft.inputs!.findIndex((i) => i?.name === next.name);
           if (inputIndex !== -1) {
-            t.inputs![inputIndex].name = name;
+            draft.inputs![inputIndex].name = name;
           }
         } else {
-          t.inputs!.push({ name });
+          draft.inputs!.push({ name, kind: 'value' });
         }
       });
 
       // Remove unclaimed (deleted) inputs.
       // TODO(burdon): If user types incorrect name value, it will be deleted. Garbage collect?
       for (const input of values) {
-        const inputIndex = t.inputs!.findIndex((i) => i?.name === input.name);
+        const inputIndex = draft.inputs!.findIndex((i) => i?.name === input.name);
         if (inputIndex !== -1) {
-          t.inputs!.splice(inputIndex, 1);
+          draft.inputs!.splice(inputIndex, 1);
         }
       }
     });

package/src/components/Toolbox/Toolbox.stories.tsx

@@ -8,11 +8,11 @@ import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { capabilities } from '@dxos/assistant-toolkit/testing';
-import { ChessPlugin } from '@dxos/plugin-chess';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ChessPlugin } from '@dxos/plugin-chess/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { MapPlugin } from '@dxos/plugin-map';
-import { TablePlugin } from '@dxos/plugin-table';
+import { MapPlugin } from '@dxos/plugin-map/testing';
+import { TablePlugin } from '@dxos/plugin-table/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 
 import { translations } from '#translations';

package/src/components/Toolbox/Toolbox.tsx

@@ -6,9 +6,9 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 import { type Blueprint } from '@dxos/compute';
 import { Operation } from '@dxos/compute';
-import { type Database, type Ref } from '@dxos/echo';
+import { type Database, Filter, type Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { Filter, useQuery } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/react-client/echo';
 import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
 import { composable, composableProps, mx } from '@dxos/ui-theme';
 

package/src/components/index.ts

@@ -6,6 +6,7 @@ import { type ComponentType, lazy } from 'react';
 
 export * from './Chat';
 export * from './ProcessTree';
+export * from './TaskList';
 export * from './TemplateEditor';
 export * from './Toolbox';
 

package/src/containers/AgentArticle/AgentArticle.stories.tsx

@@ -8,14 +8,14 @@ import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Plan, Agent } from '@dxos/assistant-toolkit';
-import { Obj, Ref } from '@dxos/echo';
-import { AutomationPlugin } from '@dxos/plugin-automation';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { AutomationPlugin } from '@dxos/plugin-automation/testing';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { corePlugins, StorybookPlugin } from '@dxos/plugin-testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Loading, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 import { createObjectFactory, TypeSpec } from '@dxos/schema/testing';
@@ -84,7 +84,7 @@ const meta = {
                     name: Obj.getLabel(obj) ?? 'Artifact',
                     data: Ref.make(obj),
                   })),
-                  queue: Ref.fromDXN(inputQueue.dxn),
+                  feed: Ref.fromDXN(inputQueue.dxn),
                   subscriptions: [],
                 }),
               );

package/src/containers/AgentArticle/AgentArticle.tsx

@@ -14,7 +14,7 @@ import { Agent } from '@dxos/assistant-toolkit';
 import { Annotation, Filter, Obj, Query, Ref } from '@dxos/echo';
 import { AtomObj, AtomRef } from '@dxos/echo-atom';
 import { QueueService } from '@dxos/functions';
-import { AutomationCapabilities } from '@dxos/plugin-automation/types';
+import { AutomationCapabilities } from '@dxos/plugin-automation';
 import { useQuery } from '@dxos/react-client/echo';
 import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
@@ -48,12 +48,12 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
 
     const runtime = computeRuntime.getRuntime(space.spaceId);
     await runtime.runPromise(Agent.resetChatHistory(agent));
-    if (!agent.queue) {
+    if (!agent.feed) {
       await runtime.runPromise(
         Effect.gen(function* () {
           const queue = yield* QueueService.createQueue();
           Obj.update(agent, (agent) => {
-            agent.queue = Ref.fromDXN(queue.dxn);
+            agent.feed = Ref.fromDXN(queue.dxn);
           });
         }),
       );
@@ -74,15 +74,19 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
     ),
   );
 
-  const inputQueue = useAtomValue(
+  const inputFeed = useAtomValue(
     AtomObj.make(agent).pipe((_) =>
       Atom.make((get) =>
-        Option.fromNullable(get(_).queue).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
+        Option.fromNullable(get(_).feed).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
       ),
     ),
   );
 
-  const inputObjects = useQuery(inputQueue, Query.select(Filter.everything()));
+  const db = Obj.getDatabase(agent);
+  const inputObjects = useQuery(
+    db,
+    inputFeed ? Query.select(Filter.everything()).from(inputFeed) : Query.select(Filter.nothing()),
+  );
 
   return (
     <Panel.Root role={role}>
@@ -90,7 +94,7 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
         <Toolbar.Root>
           <Toolbar.ToggleGroup type='single' value={tab} onValueChange={(value) => value && setTab(value as Tab)}>
             <Toolbar.ToggleGroupIconItem value='artifacts' label={t('artifacts.label')} icon='ph--cube--regular' />
-            <Toolbar.ToggleGroupIconItem value='inputs' label={t('input-queue.label')} icon='ph--queue--regular' />
+            <Toolbar.ToggleGroupIconItem value='inputs' label={t('inputs.label')} icon='ph--queue--regular' />
           </Toolbar.ToggleGroup>
           <Toolbar.Separator />
           <Toolbar.IconButton

package/src/containers/AgentProperties/AgentProperties.stories.tsx

@@ -8,13 +8,13 @@ import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Plan, Agent } from '@dxos/assistant-toolkit';
-import { Obj, Ref } from '@dxos/echo';
+import { Filter, Obj, Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { AutomationPlugin } from '@dxos/plugin-automation';
-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 { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Button } from '@dxos/react-ui';
 import { ObjectProperties } from '@dxos/react-ui-form';
 import { Loading, withLayout } from '@dxos/react-ui/testing';

package/src/containers/AgentProperties/AgentProperties.tsx

@@ -11,11 +11,11 @@ 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 { DXN, Filter, Obj, Ref } from '@dxos/echo';
 import { AtomObj } from '@dxos/echo-atom';
 import { log } from '@dxos/log';
-import { AutomationCapabilities } from '@dxos/plugin-automation/types';
-import { Filter, useQuery } from '@dxos/react-client/echo';
+import { AutomationCapabilities } from '@dxos/plugin-automation';
+import { useQuery } from '@dxos/react-client/echo';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { FeedAnnotation } from '@dxos/schema';
 
@@ -104,7 +104,7 @@ export const AgentProperties = ({ subject: agent }: AgentPropertiesProps) => {
   }
 
   return (
-    <div role='none' className='dx-expander flex flex-col'>
+    <div className='dx-expander flex flex-col'>
       <Input.Root>
         <Input.Label classNames='mt-form-gap'>{t('subscriptions.label')}</Input.Label>
       </Input.Root>

package/src/containers/{ChatContainer/ChatContainer.tsx → ChatArticle/ChatArticle.tsx}

@@ -8,7 +8,7 @@ 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 { Feed, type Obj } from '@dxos/echo';
+import { type Obj } from '@dxos/echo';
 import { Panel } from '@dxos/react-ui';
 import { getParentId } from '@dxos/react-ui-attention';
 
@@ -16,7 +16,7 @@ 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 = (
+export type ChatArticleProps = (
   | AppSurface.ObjectArticleProps<ChatType.Chat | undefined>
   | AppSurface.ObjectSectionProps<ChatType.Chat | undefined>
 ) & {
@@ -24,7 +24,7 @@ export type ChatContainerProps = (
   companionTo?: Obj.Unknown;
 } & Pick<ChatRootProps, 'onEvent'>;
 
-export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((props, forwardedRef) => {
+export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>((props, forwardedRef) => {
   const { role, attendableId, subject: chat, space: spaceProp, companionTo, onEvent } = props;
   const parentId = attendableId ? getParentId(attendableId) : undefined;
   const space = spaceProp ?? getSpace(chat);
@@ -63,7 +63,6 @@ export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((pro
   }, [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) {
@@ -71,24 +70,27 @@ export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((pro
   }
 
   return (
-    <ChatComponent.Root db={space?.db} chat={chat} feed={queue} processor={processor} onEvent={onEvent}>
+    <ChatComponent.Root db={space?.db} chat={chat} feed={feedTarget} 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.Content>
-            <div role='none' className='dx-container relative'>
+            <div className='dx-container relative'>
               <ChatComponent.Thread viewType={view} />
               {view !== 'summary' && (
-                <div role='none' className='absolute bottom-2 left-0 right-0'>
-                  <div role='none' className='dx-document px-4'>
+                <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 role='none' className='dx-document px-4 pb-4'>
+            <div className='dx-document px-4 pb-4'>
+              <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

package/src/containers/ChatArticle/index.ts

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

package/src/containers/ChatCompanion/ChatCompanion.tsx

@@ -2,27 +2,25 @@
 // 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, useMemo } from 'react';
 
-import { 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 { getSpace } from '@dxos/client/echo';
 import { Blueprint } from '@dxos/compute';
 import { Filter, Obj, Ref } from '@dxos/echo';
-import { SpaceOperation } from '@dxos/plugin-space/operations';
+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 { AssistantOperation } from '#operations';
+import { AssistantOperation } from '#types';
 
-import ChatContainer from '../ChatContainer';
+import ChatArticle from '../ChatArticle';
 
 export type ChatCompanionProps = AppSurface.ArticleProps<Chat.Chat, {}, Obj.Unknown>;
 
@@ -41,7 +39,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
           return;
         }
 
-        if (event.type === 'submit' && !getSpace(chat)) {
+        if (event.type === 'submit' && !Obj.getDatabase(chat)) {
           await invokePromise(SpaceOperation.AddObject, {
             object: chat,
             target: space.db,
@@ -62,27 +60,20 @@ 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)),
+      () =>
+        existingBlueprints.filter((blueprint) => {
+          const key = Obj.getMeta(blueprint).key;
+          return key !== undefined && blueprintKeys.includes(key);
+        }),
       [existingBlueprints, blueprintKeys],
     );
 
@@ -95,7 +86,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
       // NOTE: This must be run instead of using the useQuery result to avoid duplicates.
       const existingBlueprints = await space.db.query(Filter.type(Blueprint.Blueprint)).run();
       for (const key of blueprintKeys) {
-        const existingBlueprint = existingBlueprints.find((blueprint) => blueprint.key === key);
+        const existingBlueprint = existingBlueprints.find((blueprint) => Obj.getMeta(blueprint).key === key);
         if (existingBlueprint) {
           continue;
         }
@@ -128,7 +119,7 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
     }, [binder, companionTo, blueprintKeys]);
 
     return (
-      <ChatContainer
+      <ChatArticle
         role={role ?? 'article'}
         space={space}
         subject={chat}

package/src/containers/PlanArticle/PlanArticle.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type Plan } from '@dxos/assistant-toolkit';
+import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+
+import { TaskList } from '#components';
+
+export type PlanArticleProps = AppSurface.ObjectArticleProps<Plan.Plan>;
+
+export const PlanArticle = ({ role, attendableId, subject }: PlanArticleProps) => {
+  const { hasAttention } = useAttention(attendableId);
+
+  return (
+    <Panel.Root role={role} classNames='dx-document'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention} />
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <ScrollArea.Root orientation='vertical'>
+          <ScrollArea.Viewport>
+            <TaskList plan={subject} />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/PlanArticle/index.ts

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

package/src/containers/RoutineArticle/RoutineArticle.stories.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Routine } from '@dxos/compute';
+import { Filter } from '@dxos/echo';
+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 { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { AssistantPlugin } from '../../AssistantPlugin';
+import { RoutineArticle } from './RoutineArticle';
+
+const DefaultStory = () => {
+  const [space] = useSpaces();
+  const [routine] = useQuery(space?.db, Filter.type(Routine.Routine));
+  if (!routine) {
+    return <Loading />;
+  }
+
+  return <RoutineArticle role='article' subject={routine} attendableId='story' />;
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/RoutineArticle',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Routine.Routine],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+              const [space] = client.spaces.get();
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              space.db.add(
+                Routine.make({
+                  name: 'Summarize',
+                  description: 'Summarize the selected object.',
+                  instructions: 'Create a new markdown document that is a summary of the selected object.',
+                }),
+              );
+            }),
+        }),
+        AutomationPlugin(),
+        AssistantPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};