@dxos/plugin-assistant 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -5,7 +5,7 @@
 import type * as Schema from 'effect/Schema';
 import React, { Fragment, useCallback, useEffect } from 'react';
 
-import { type Template } from '@dxos/blueprints';
+import { type Template } from '@dxos/compute';
 import { type Obj } from '@dxos/echo';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { isNonNullable } from '@dxos/util';
@@ -15,7 +15,7 @@ import { meta } from '#meta';
 import { TemplateEditor } from './TemplateEditor';
 
 /**
- * Callback type for mutating template within a parent object's Obj.change context.
+ * Callback type for mutating template within a parent object's Obj.update context.
  */
 export type TemplateChangeCallback = (mutate: (template: Obj.Mutable<Template.Template>) => void) => void;
 
@@ -23,22 +23,21 @@ 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.change.
+   * Callback to mutate the template. Should wrap mutations in parent's Obj.update.
    * If not provided, the component is read-only.
    */
   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,25 +60,7 @@ 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]' />
+      <TemplateEditor id={id} source={template.source} classNames='bg-base-surface min-h-[120px]' />
 
       {(template.inputs?.length ?? 0) > 0 && (
         <div className='grid grid-cols-[10rem_10rem_1fr] gap-1 items-center'>
@@ -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/ToolBlock/ToolBlock.tsx

@@ -65,7 +65,7 @@ export const ToolBlock = ({ view, blocks = [] }: ToolBlockProps) => {
               title,
               content: {
                 ...block,
-                result: safeParseJson(block.result),
+                result: typeof block.result === 'string' ? safeParseJson(block.result) : block.result,
               },
             };
           }

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

@@ -8,14 +8,15 @@ 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';
+import { translations } from '#translations';
+
 import { Toolbox, type ToolboxProps } from './Toolbox';
 
 const DefaultStory = (props: ToolboxProps) => {

package/src/components/Toolbox/Toolbox.tsx

@@ -4,13 +4,14 @@
 
 import React, { Fragment, useEffect, useState } from 'react';
 
-import { type Blueprint } from '@dxos/blueprints';
-import { type Database, type Ref } from '@dxos/echo';
+import { type Blueprint } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
+import { type Database, Filter, type Ref } from '@dxos/echo';
 import { log } from '@dxos/log';
-import { Operation } from '@dxos/operation';
-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';
+import { composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { ServiceType } from '#types';
 

package/src/components/index.ts

@@ -4,9 +4,12 @@
 
 import { type ComponentType, lazy } from 'react';
 
+export * from './AgentProperties';
 export * from './Chat';
 export * from './ProcessTree';
+export * from './TaskList';
 export * from './TemplateEditor';
 export * from './Toolbox';
 
 export const AssistantSettings: ComponentType<any> = lazy(() => import('./AssistantSettings'));
+export const RoutineProperties: ComponentType<any> = lazy(() => import('./RoutineProperties'));

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

@@ -8,32 +8,40 @@ 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';
 import { Message, Organization, Person } from '@dxos/types';
 
 import { createMessage } from '#testing';
+import { translations } from '#translations';
 
 import { AssistantPlugin } from '../../AssistantPlugin';
-import { translations } from '../../translations';
 import { AgentArticle } from './AgentArticle';
 
 random.seed(1);
 
 type DefaultStoryProps = {
-  spec?: TypeSpec[];
   inputs?: boolean;
 };
 
+// Hoisted out of `args` because Storybook's CSF arg traversal walks every value
+// and tries to mutate `.id` on each entry — which throws on ECHO `Type.Type`
+// entities (Type.makeObject returns an immutable proxy). Keeping the spec here
+// dodges the traversal entirely.
+const defaultSpec: TypeSpec[] = [
+  { type: Organization.Organization, count: 10 },
+  { type: Person.Person, count: 10 },
+];
+
 const DefaultStory = (_: DefaultStoryProps) => {
   const [space] = useSpaces();
   const [agent] = useQuery(space?.db, Filter.type(Agent.Agent));
@@ -49,7 +57,7 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme(),
-    withPluginManager<DefaultStoryProps>(({ args: { spec = [], inputs } }) => ({
+    withPluginManager<DefaultStoryProps>(({ args: { inputs } }) => ({
       plugins: [
         ...corePlugins(),
         ClientPlugin({
@@ -61,7 +69,7 @@ const meta = {
               yield* Effect.promise(() => space.waitUntilReady());
 
               const factory = createObjectFactory(space.db, random as any);
-              const artifacts = yield* Effect.promise(() => factory(spec));
+              const artifacts = yield* Effect.promise(() => factory(defaultSpec));
 
               const inputQueue = space.queues.create();
               if (inputs) {
@@ -84,7 +92,7 @@ const meta = {
                     name: Obj.getLabel(obj) ?? 'Artifact',
                     data: Ref.make(obj),
                   })),
-                  queue: Ref.fromDXN(inputQueue.dxn),
+                  feed: Ref.fromURI(inputQueue.uri),
                   subscriptions: [],
                 }),
               );
@@ -110,10 +118,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     inputs: true,
-    spec: [
-      { type: Organization.Organization, count: 10 },
-      { type: Person.Person, count: 10 },
-    ],
   },
 };
 

package/src/containers/AgentArticle/AgentArticle.tsx

@@ -4,23 +4,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, useCallback, useMemo, useState } from 'react';
 
-import { Surface, useCapabilities } from '@dxos/app-framework/ui';
+import { Surface, useSpaceCallback } 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 { Database, Feed, 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, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { composable } 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';
-import { composable } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '#meta';
@@ -34,31 +31,25 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
   const [tab, setTab] = useState<Tab>('artifacts');
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
-  const [computeRuntime] = useCapabilities(AutomationCapabilities.ComputeRuntime);
-  // TODO(burdon): Clear input queue also.
+  const spaceId = Obj.getDatabase(agent)?.spaceId;
+  // TODO(burdon): Clear input feed also.
+  const resetHistory = useSpaceCallback(
+    spaceId,
+    [Feed.FeedService, Database.Service] as const,
+    Effect.fnUntraced(function* () {
+      yield* Agent.resetChatHistory(agent);
+      if (!agent.feed) {
+        const feed = yield* Database.add(Feed.make());
+        Obj.update(agent, (agent) => {
+          agent.feed = Ref.make(feed);
+        });
+      }
+    }),
+    [agent],
+  );
   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.change(agent, (agent) => {
-            agent.queue = Ref.fromDXN(queue.dxn);
-          });
-        }),
-      );
-    }
-  }, [agent, computeRuntime]);
+    await resetHistory();
+  }, [resetHistory]);
 
   const artifacts = useAtomValue(
     useMemo(
@@ -74,15 +65,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 +85,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
@@ -143,36 +138,30 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
 
 const ArtifactTileCard = composable<HTMLDivElement, { data: Obj.Unknown }>(({ data, ...props }, forwardedRef) => {
   const objectMenuItems = useObjectMenuItems(data);
-  const icon = Function.pipe(
-    Obj.getSchema(data),
-    Option.fromNullable,
-    Option.flatMap(Annotation.IconAnnotation.get),
-    Option.map(({ icon }) => icon),
-    Option.getOrElse(() => 'ph--placeholder--regular'),
-  );
+  const icon = Obj.getIcon(data)?.icon ?? 'ph--circle-dashed--regular';
 
   return (
     <Card.Root {...props} ref={forwardedRef} data-testid='board-item' fullWidth>
-      <Card.Toolbar>
-        <Card.IconBlock padding>
+      <Card.Header>
+        <Card.IconBlock>
           <Card.Icon icon={icon} />
         </Card.IconBlock>
-        <Card.Title>{Obj.getLabel(data)}</Card.Title>
+        <Card.Title>{Obj.getLabel(data, { fallback: 'typename' })}</Card.Title>
         {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-        <Card.IconBlock padding>
+        <Card.IconBlock>
           <Menu.Trigger asChild disabled={!objectMenuItems?.length}>
             <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
           </Menu.Trigger>
           <Menu.Content items={objectMenuItems} />
         </Card.IconBlock>
-      </Card.Toolbar>
-      <Card.Content>
+      </Card.Header>
+      <Card.Body>
         <Surface.Surface
           type={AppSurface.Card}
           limit={1}
           data={{ subject: data } satisfies AppSurface.ObjectCardData}
         />
-      </Card.Content>
+      </Card.Body>
     </Card.Root>
   );
 });

package/src/containers/AgentProperties/AgentProperties.tsx

@@ -2,126 +2,42 @@
 // 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 React, { useEffect } from 'react';
 
-import { useCapability } from '@dxos/app-framework/ui';
+import { useSpaceCallback } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Agent, SyncTriggers } from '@dxos/assistant-toolkit';
-import { DXN, Obj, Ref } from '@dxos/echo';
-import { AtomObj } from '@dxos/echo-atom';
+import { Operation } from '@dxos/compute';
+import { Obj, Ref } from '@dxos/echo';
 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 { Input, useTranslation } from '@dxos/react-ui';
-import { FeedAnnotation } from '@dxos/schema';
 
-import { meta } from '#meta';
+import { AgentProperties as AgentPropertiesComponent } from '#components';
 
 export type AgentPropertiesProps = AppSurface.ObjectPropertiesProps<Agent.Agent>;
 
 export const AgentProperties = ({ subject: agent }: AgentPropertiesProps) => {
-  const { t } = useTranslation(meta.id);
-  const db = Obj.getDatabase(agent);
+  const spaceId = Obj.getDatabase(agent)?.spaceId;
 
-  // TODO(burdon): Factor out (separate component from container)?
-  const computeRuntime = useCapability(AutomationCapabilities.ComputeRuntime);
+  // TODO(burdon): Factor this out?
+  const syncTriggers = useSpaceCallback(
+    spaceId,
+    [] as const,
+    () => Operation.invoke(SyncTriggers, { agent: Ref.make(agent) }),
+    [agent],
+  );
+
+  // Sync triggers whenever the agent mutates (e.g., subscriptions change).
   useEffect(() => {
-    if (!db) {
+    if (!spaceId) {
       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));
+        syncTriggers().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))),
-            );
+  }, [spaceId, agent, syncTriggers]);
 
-            return selectedSubscriptions;
-          }),
-        ),
-      [agent, subscribedObjects],
-    ),
-  );
-
-  // Create/remove agent subscription.
-  const handleSubscriptionChange = useCallback(
-    (object: Obj.Unknown, checked: boolean) => {
-      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)),
-          );
-        }
-      });
-    },
-    [agent],
-  );
-
-  if (subscribedObjects.length === 0) {
-    return null;
-  }
-
-  return (
-    <div role='none' 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>
-  );
+  return <AgentPropertiesComponent agent={agent} />;
 };