@dxos/plugin-assistant 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

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

@@ -9,25 +9,30 @@ 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 { initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview';
-import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { corePlugins, StorybookPlugin } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
-import { Loading } from '@dxos/react-ui/testing';
+import { Loading, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
-import { createObjectFactory } from '@dxos/schema/testing';
+import { createObjectFactory, TypeSpec } from '@dxos/schema/testing';
 import { Message, Organization, Person } from '@dxos/types';
 
 import { createMessage } from '#testing';
+import { translations } from '#translations';
 
-import { translations } from '../../translations';
+import { AssistantPlugin } from '../../AssistantPlugin';
 import { AgentArticle } from './AgentArticle';
 
 random.seed(1);
 
-type DefaultStoryProps = {};
+type DefaultStoryProps = {
+  spec?: TypeSpec[];
+  inputs?: boolean;
+};
 
 const DefaultStory = (_: DefaultStoryProps) => {
   const [space] = useSpaces();
@@ -43,7 +48,8 @@ const meta = {
   title: 'plugins/plugin-assistant/containers/AgentArticle',
   render: DefaultStory,
   decorators: [
-    withPluginManager({
+    withTheme(),
+    withPluginManager<DefaultStoryProps>(({ args: { spec = [], inputs } }) => ({
       plugins: [
         ...corePlugins(),
         ClientPlugin({
@@ -55,29 +61,26 @@ const meta = {
               yield* Effect.promise(() => space.waitUntilReady());
 
               const factory = createObjectFactory(space.db, random as any);
-              const created = yield* Effect.promise(() =>
-                factory([
-                  { type: Organization.Organization, count: 10 },
-                  { type: Person.Person, count: 10 },
-                ]),
-              );
+              const artifacts = yield* Effect.promise(() => factory(spec));
 
               const inputQueue = space.queues.create();
-              yield* Effect.promise(() =>
-                inputQueue.append([
-                  createMessage('user', [{ _tag: 'text', text: 'Summarize the current artifacts.' }]),
-                  createMessage('assistant', [
-                    { _tag: 'text', text: 'Here is a quick overview of the organizations and contacts in context.' },
+              if (inputs) {
+                yield* Effect.promise(() =>
+                  inputQueue.append([
+                    createMessage('user', [{ _tag: 'text', text: 'Summarize the current artifacts.' }]),
+                    createMessage('assistant', [
+                      { _tag: 'text', text: 'Here is a quick overview of the organizations and contacts in context.' },
+                    ]),
+                    createMessage('user', [{ _tag: 'text', text: 'Flag anything that needs follow-up.' }]),
                   ]),
-                  createMessage('user', [{ _tag: 'text', text: 'Flag anything that needs follow-up.' }]),
-                ]),
-              );
+                );
+              }
 
               space.db.add(
                 Obj.make(Agent.Agent, {
-                  spec: Ref.make(Text.make()),
+                  instructions: Ref.make(Text.make()),
                   plan: Ref.make(Plan.makePlan({ tasks: [] })),
-                  artifacts: created.map((obj) => ({
+                  artifacts: artifacts.map((obj) => ({
                     name: Obj.getLabel(obj) ?? 'Artifact',
                     data: Ref.make(obj),
                   })),
@@ -87,10 +90,12 @@ const meta = {
               );
             }),
         }),
-        StorybookPlugin({}),
+        AutomationPlugin(),
+        AssistantPlugin(),
         PreviewPlugin(),
+        StorybookPlugin({}),
       ],
-    }),
+    })),
   ],
   parameters: {
     layout: 'fullscreen',
@@ -102,4 +107,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    inputs: true,
+    spec: [
+      { type: Organization.Organization, count: 10 },
+      { type: Person.Person, count: 10 },
+    ],
+  },
+};
+
+export const Empty: Story = {};

package/src/containers/AgentArticle/AgentArticle.tsx

@@ -3,17 +3,20 @@
 //
 
 import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
-import React, { forwardRef, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/ui';
-import { useObjectMenuItems, type AppSurface } from '@dxos/app-toolkit/ui';
-import { type Agent } from '@dxos/assistant-toolkit';
-import { Annotation, Filter, Obj, Query } from '@dxos/echo';
+import { Surface, useCapabilities } from '@dxos/app-framework/ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+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 { useQuery } from '@dxos/react-client/echo';
-import { Card, Input, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
 import { Menu } from '@dxos/react-ui-menu';
 import { Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
@@ -22,21 +25,40 @@ import { isNonNullable } from '@dxos/util';
 
 import { meta } from '#meta';
 
+type Tab = 'artifacts' | 'inputs';
+
 export type AgentArticleProps = AppSurface.ObjectArticleProps<Agent.Agent>;
 
 export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
   const { t } = useTranslation(meta.id);
+  const [tab, setTab] = useState<Tab>('artifacts');
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
-  const inputQueue = useAtomValue(
-    AtomObj.make(agent).pipe((_) =>
-      Atom.make((get) =>
-        Option.fromNullable(get(_).queue).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
-      ),
-    ),
-  );
-
-  const inputQueueObjects = useQuery(inputQueue, Query.select(Filter.everything()));
+  const [computeRuntime] = useCapabilities(AutomationCapabilities.ComputeRuntime);
+  // TODO(burdon): Clear input queue also.
+  const handleResetHistory = useCallback(async () => {
+    if (!computeRuntime) {
+      return;
+    }
+
+    const space = Obj.getDatabase(agent);
+    if (!space) {
+      return;
+    }
+
+    const runtime = computeRuntime.getRuntime(space.spaceId);
+    await runtime.runPromise(Agent.resetChatHistory(agent));
+    if (!agent.queue) {
+      await runtime.runPromise(
+        Effect.gen(function* () {
+          const queue = yield* QueueService.createQueue();
+          Obj.update(agent, (agent) => {
+            agent.queue = Ref.fromDXN(queue.dxn);
+          });
+        }),
+      );
+    }
+  }, [agent, computeRuntime]);
 
   const artifacts = useAtomValue(
     useMemo(
@@ -52,51 +74,68 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
     ),
   );
 
+  const inputQueue = useAtomValue(
+    AtomObj.make(agent).pipe((_) =>
+      Atom.make((get) =>
+        Option.fromNullable(get(_).queue).pipe(Option.map(AtomRef.make), Option.map(get), Option.getOrUndefined),
+      ),
+    ),
+  );
+
+  const inputObjects = useQuery(inputQueue, Query.select(Filter.everything()));
+
   return (
     <Panel.Root role={role}>
       <Panel.Toolbar asChild>
-        <Toolbar.Root />
+        <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.ToggleGroup>
+          <Toolbar.Separator />
+          <Toolbar.IconButton
+            icon='ph--trash--regular'
+            label={t('reset-history.button')}
+            onCanPlay={handleResetHistory}
+          />
+        </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content className='dx-container flex flex-col'>
-        {artifacts.length === 0 && (
-          <Message.Root classNames='m-2' valence='info'>
-            <Message.Title>{t('project-empty-spec.message')}</Message.Title>
-            <Message.Content>{t('project-empty-spec.description')}</Message.Content>
-          </Message.Root>
-        )}
+        {tab === 'artifacts' && (
+          <>
+            {artifacts.length === 0 && (
+              <Message.Root classNames='m-2' valence='info'>
+                <Message.Title>{t('project-empty-spec.message')}</Message.Title>
+                <Message.Content>{t('project-empty-spec.description')}</Message.Content>
+              </Message.Root>
+            )}
 
-        {/* TODO(burdon): Add popovers for documentation. */}
-        <div role='none' className='dx-container grid grid-cols-2 gap-2 px-2'>
-          <div role='none' className='dx-container flex flex-col'>
-            <Input.Root>
-              <Input.Label>{t('artifacts.label')}</Input.Label>
-            </Input.Root>
             <Masonry.Root Tile={MasonryArtifactTile}>
-              <Masonry.Content items={artifacts} getId={(item: Obj.Unknown) => item.id} />
+              <Masonry.Content padding thin centered>
+                <Masonry.Viewport items={artifacts} getId={(item: Obj.Unknown) => item.id} />
+              </Masonry.Content>
             </Masonry.Root>
-          </div>
-          <div role='none' className='dx-container flex flex-col'>
-            <Input.Root>
-              <Input.Label>{t('input-queue.label')}</Input.Label>
-            </Input.Root>
-            <Mosaic.Container asChild withFocus autoScroll={viewport}>
-              <ScrollArea.Root orientation='vertical' padding thin>
-                <ScrollArea.Viewport ref={setViewport}>
-                  <Mosaic.VirtualStack
-                    Tile={StackTile}
-                    classNames='gap-2'
-                    draggable={false}
-                    estimateSize={() => 160}
-                    gap={8}
-                    getId={(item: Obj.Unknown) => item.id}
-                    getScrollElement={() => viewport}
-                    items={inputQueueObjects}
-                  />
-                </ScrollArea.Viewport>
-              </ScrollArea.Root>
-            </Mosaic.Container>
-          </div>
-        </div>
+          </>
+        )}
+
+        {tab === 'inputs' && (
+          <Mosaic.Container asChild withFocus autoScroll={viewport} classNames='dx-document'>
+            <ScrollArea.Root orientation='vertical' padding thin centered>
+              <ScrollArea.Viewport ref={setViewport}>
+                <Mosaic.VirtualStack
+                  Tile={StackTile}
+                  classNames='gap-2'
+                  draggable={false}
+                  estimateSize={() => 160}
+                  gap={8}
+                  getId={(item: Obj.Unknown) => item.id}
+                  getScrollElement={() => viewport}
+                  items={inputObjects}
+                />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Mosaic.Container>
+        )}
       </Panel.Content>
     </Panel.Root>
   );
@@ -128,7 +167,11 @@ const ArtifactTileCard = composable<HTMLDivElement, { data: Obj.Unknown }>(({ da
         </Card.IconBlock>
       </Card.Toolbar>
       <Card.Content>
-        <Surface.Surface role='card--content' limit={1} data={{ subject: data } satisfies AppSurface.ObjectCardData} />
+        <Surface.Surface
+          type={AppSurface.Card}
+          limit={1}
+          data={{ subject: data } satisfies AppSurface.ObjectCardData}
+        />
       </Card.Content>
     </Card.Root>
   );

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

@@ -9,18 +9,21 @@ 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 { log } from '@dxos/log';
 import { AutomationPlugin } from '@dxos/plugin-automation';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { corePlugins } from '@dxos/plugin-testing';
 import { Filter, 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';
 import { Text } from '@dxos/schema';
 import { Organization } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { AssistantPlugin } from '../../AssistantPlugin';
-import { translations } from '../../translations';
 import { AgentProperties } from './AgentProperties';
 
 type DefaultStoryProps = {};
@@ -35,6 +38,14 @@ const DefaultStory = (_: DefaultStoryProps) => {
   return (
     <ObjectProperties object={agent}>
       <AgentProperties role='object-properties' subject={agent} />
+      <Button
+        classNames='mt-form-gap'
+        onClick={() => {
+          log.info('agent', { agent, instructions: agent.instructions.target });
+        }}
+      >
+        Debug
+      </Button>
     </ObjectProperties>
   );
 };
@@ -64,7 +75,7 @@ const meta = {
 
               space.db.add(
                 Obj.make(Agent.Agent, {
-                  spec: Ref.make(Text.make('Initiative spec for the story.')),
+                  instructions: Ref.make(Text.make()),
                   plan: Ref.make(Plan.makePlan({ tasks: [] })),
                   artifacts: [{ name: 'Organization', data: Ref.make(organization) }],
                   subscriptions: [],
@@ -72,7 +83,6 @@ const meta = {
               );
             }),
         }),
-        StorybookPlugin({}),
         AutomationPlugin(),
         AssistantPlugin(),
       ],

package/src/containers/AgentProperties/AgentProperties.tsx

@@ -4,32 +4,20 @@
 
 import { Atom } from '@effect-atom/atom';
 import { useAtomValue } from '@effect-atom/atom-react';
-import * as Effect from 'effect/Effect';
 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, AtomRef } from '@dxos/echo-atom';
-import { createDocAccessor } from '@dxos/echo-db';
-import { QueueService } from '@dxos/functions';
+import { AtomObj } from '@dxos/echo-atom';
 import { log } from '@dxos/log';
-import { Operation } from '@dxos/operation';
 import { AutomationCapabilities } from '@dxos/plugin-automation/types';
 import { Filter, useQuery } from '@dxos/react-client/echo';
-import { Button, Input, useTranslation } from '@dxos/react-ui';
-import { Editor } from '@dxos/react-ui-editor';
+import { Input, useTranslation } from '@dxos/react-ui';
 import { FeedAnnotation } from '@dxos/schema';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  decorateMarkdown,
-  documentSlots,
-} from '@dxos/ui-editor';
 
 import { meta } from '#meta';
 
@@ -37,38 +25,30 @@ 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.
+  // TODO(burdon): Factor out (separate component from container)?
   const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
-  const handleResetHistory = useCallback(async () => {
-    const runtime = computeRuntime.getRuntime(Obj.getDatabase(agent)!.spaceId);
-    await runtime.runPromise(Agent.resetChatHistory(agent));
-    if (!agent.queue) {
-      await runtime.runPromise(
-        Effect.gen(function* () {
-          const queue = yield* QueueService.createQueue();
-          Obj.change(agent, (agent) => {
-            agent.queue = Ref.fromDXN(queue.dxn);
-          });
-        }),
-      );
+  useEffect(() => {
+    if (!db) {
+      return;
     }
-  }, [agent, computeRuntime]);
-
-  const spec = useAtomValue(AtomRef.make(agent.spec));
 
-  useEffect(() => {
-    const db = Obj.getDatabase(agent);
-    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));
+        runtime
+          .runPromise(
+            Operation.invoke(SyncTriggers, {
+              agent: Ref.make(agent),
+            }),
+          )
+          .catch((err) => log.catch(err));
       });
     });
-  }, [agent, computeRuntime]);
+  }, [db, agent, computeRuntime]);
 
-  const db = Obj.getDatabase(agent);
+  // Build a filter matching objects of any schema annotated as a feed.
   const feedFilter = useMemo(() => {
     if (!db) {
       return Filter.nothing();
@@ -80,90 +60,68 @@ export const AgentProperties = ({ subject: agent }: AgentPropertiesProps) => {
       return Option.isSome(annotation) && annotation.value === true;
     });
 
-    if (feedSchemas.length === 0) {
-      return Filter.nothing();
-    }
-
-    return Filter.or(...feedSchemas.map((schema) => Filter.type(schema)));
+    return feedSchemas.length === 0 ? Filter.nothing() : Filter.or(...feedSchemas.map((schema) => Filter.type(schema)));
   }, [db]);
-  const subscribableObjects = useQuery(db, feedFilter);
 
-  const existingSubscripts = useAtomValue(
+  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[] = subscribableObjects.filter((object) =>
+            const selectedSubscriptions: Obj.Unknown[] = subscribedObjects.filter((object) =>
               agentObj.subscriptions.some((subscription) => DXN.equals(subscription.dxn, Obj.getDXN(object))),
             );
 
             return selectedSubscriptions;
           }),
         ),
-      [agent, subscribableObjects],
+      [agent, subscribedObjects],
     ),
   );
 
-  const extension = useMemo(
-    () =>
-      spec && [
-        createBasicExtensions({ placeholder: t('agent.spec.placeholder') }),
-        createThemeExtensions({
-          syntaxHighlighting: true,
-          slots: {
-            ...documentSlots,
-            scroller: {
-              className: 'min-h-[2lh]',
-            },
-          },
-        }),
-        createDataExtensions({ id: agent.id, text: createDocAccessor(spec, ['content']) }),
-        createMarkdownExtensions(),
-        decorateMarkdown(),
-      ],
-    [spec, agent.id, t],
+  // 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 role='none' className='dx-expander flex flex-col'>
       <Input.Root>
-        <Input.Label>{t('subscriptions.label')}</Input.Label>
+        <Input.Label classNames='mt-form-gap'>{t('subscriptions.label')}</Input.Label>
       </Input.Root>
 
-      {subscribableObjects.map((object) => (
+      {subscribedObjects.map((object) => (
         <Input.Root key={object.id}>
           <div className='flex items-center gap-2'>
             <Input.Checkbox
-              checked={existingSubscripts.includes(object)}
+              checked={existingSubscriptions.includes(object)}
               onCheckedChange={(checked) => {
-                Obj.change(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)),
-                    );
-                  }
-                });
+                handleSubscriptionChange(object, checked === true);
               }}
             />
             <Input.Label>{Obj.getLabel(object) ?? object.id}</Input.Label>
           </div>
         </Input.Root>
       ))}
-
-      <Input.Root>
-        <Input.Label>{t('instructions.label')}</Input.Label>
-        {spec && (
-          <Editor.Root>
-            <Editor.Content classNames='pb-form-gap' extensions={extension} />
-          </Editor.Root>
-        )}
-      </Input.Root>
-
-      {/* TODO(burdon): Move into toolbar in parent. */}
-      <Button onClick={handleResetHistory}>{t('reset-history.button')}</Button>
     </div>
   );
 };

package/src/containers/BlueprintArticle/BlueprintArticle.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { type Blueprint } from '@dxos/blueprints';
+import { type Blueprint } from '@dxos/compute';
 import { Panel, Toolbar } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 

package/src/containers/ChatCompanion/ChatCompanion.tsx

@@ -11,8 +11,8 @@ import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppCapabilities } 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 { Blueprint } from '@dxos/compute';
 import { Filter, Obj, Ref } from '@dxos/echo';
 import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { useQuery } from '@dxos/react-client/echo';

package/src/containers/ChatContainer/ChatContainer.tsx

@@ -14,7 +14,7 @@ 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 { type Assistant, AssistantCapabilities, type ChatType } from '#types';
 
 export type ChatContainerProps = (
   | AppSurface.ObjectArticleProps<ChatType.Chat | undefined>
@@ -64,21 +64,31 @@ export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((pro
 
   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} queue={queue} processor={processor} onEvent={onEvent}>
+    <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='dx-document p-4'>
+          <ChatComponent.Content>
+            <div role='none' 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'>
+                    <ChatComponent.Status classNames='px-3 rounded-sm bg-group-surface' />
+                  </div>
+                </div>
+              )}
+            </div>
+            <div role='none' className='dx-document px-4 pb-4'>
               <ChatComponent.Prompt
                 {...chatProps}
                 outline
@@ -87,7 +97,7 @@ export const ChatContainer = forwardRef<HTMLDivElement, ChatContainerProps>((pro
                 onOnlineChange={setOnline}
               />
             </div>
-          </ChatComponent.Viewport>
+          </ChatComponent.Content>
         </Panel.Content>
       </Panel.Root>
     </ChatComponent.Root>