@dxos/plugin-assistant 0.10.0 → 0.11.0

package/src/components/ConnectorAuthMenu/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { ConnectorAuthMenu, type ConnectorAuthMenuProps } from './ConnectorAuthMenu';

package/src/components/ProcessTree/ProcessTree.stories.tsx

@@ -39,7 +39,7 @@ const processes: Process.Info[] = [
     pid: Process.ID.make('4d72c688-750b-47f2-87da-8a464e141b74'),
     name: 'Data pipeline',
     state: Process.State.FAILED,
-    error: 'Connection timeout',
+    error: { name: 'Error', message: 'Connection timeout' },
     metrics: { wallTime: 3100, inputCount: 5, outputCount: 2 },
   }),
   makeProcess({

package/src/components/TaskList/TaskList.stories.tsx

@@ -5,24 +5,22 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Plan } from '@dxos/assistant-toolkit';
-import { Process, type Trace } from '@dxos/compute';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Outline } from '@dxos/types';
 
-import subAgentFixture from '../../execution-graph/testing/sub-agent-delegation.json';
 import { TaskList } from './TaskList';
 
-const SUB_AGENT_PID = Process.ID.make('cf8f7243-5b1d-4902-b158-70d9107d5f43');
-const traceMessages = (subAgentFixture as unknown as Trace.Message[]).slice();
-
 type StoryArgs = {
-  tasks?: Omit<Plan.Task, 'id'>[];
-  traceMessages?: readonly Trace.Message[];
+  items?: Outline.ChecklistItem[];
+  activeTitle?: string;
 };
 
-const DefaultStory = ({ tasks = [], traceMessages: traceMessagesProp }: StoryArgs) => {
-  const plan = React.useMemo(() => Plan.makePlan({ tasks }), [tasks]);
-  return <TaskList plan={plan} traceMessages={traceMessagesProp} />;
+const DefaultStory = ({ items = [], activeTitle }: StoryArgs) => {
+  const outline = React.useMemo(
+    () => Outline.make({ content: items.map(Outline.renderChecklistItem).join('\n') }),
+    [items],
+  );
+  return <TaskList outline={outline} activeTitle={activeTitle} />;
 };
 
 const meta = {
@@ -37,28 +35,23 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    tasks: [
-      { title: 'Crack the eggs', status: 'done' },
-      { title: 'Whisk with salt and pepper', status: 'done' },
-      { title: 'Heat the pan with butter', status: 'in-progress' },
-      { title: 'Pour and stir continuously', status: 'todo' },
-      { title: 'Plate and serve', status: 'todo' },
+    items: [
+      { title: 'Crack the eggs', done: true },
+      { title: 'Whisk with salt and pepper', done: true },
+      { title: 'Heat the pan with butter', done: false },
+      { title: 'Pour and stir continuously', done: false },
+      { title: 'Plate and serve', done: false },
     ],
   },
 };
 
 export const WithDelegatedAgent: Story = {
   args: {
-    tasks: [
-      {
-        title: 'Research widgets',
-        status: 'in-progress',
-        delegated: true,
-        agentPid: SUB_AGENT_PID,
-      },
-      { title: 'Summarize findings', status: 'in-progress' },
+    items: [
+      { title: 'Research widgets', done: false },
+      { title: 'Summarize findings', done: false },
     ],
-    traceMessages,
+    activeTitle: 'Research widgets',
   },
 };
 

package/src/components/TaskList/TaskList.tsx

@@ -4,45 +4,38 @@
 
 import React, { useMemo } from 'react';
 
-import { Plan } from '@dxos/assistant-toolkit';
-import { type Process, type Trace } from '@dxos/compute';
-import { useObject } from '@dxos/react-client/echo';
-import { type Space } from '@dxos/react-client/echo';
+import { useObject } from '@dxos/echo-react';
 import { Icon, Tag, type ThemedClassName } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
-import { TextCrawl } from '@dxos/react-ui-components';
 import { Listbox } from '@dxos/react-ui-list';
-
-import { collectProcessActivityLines, deriveInFlightActivityLine } from '#execution-graph';
-import { isTerminalActivityLine, useProcessEphemeralStatus } from '#hooks';
+import { Outline } from '@dxos/types';
 
 export type TaskListProps = ThemedClassName<{
-  plan: Plan.Plan;
-  space?: Space;
-  /**
-   * Supervisor conversation feed id; trace messages without a conversation id still match by pid.
-   */
-  conversationId?: string;
-  traceMessages?: readonly Trace.Message[];
+  outline: Outline.Outline;
+  /** Title of the item currently being worked by a delegated sub-agent, if any. */
+  activeTitle?: string;
 }>;
 
+/**
+ * Renders the conversation's working checklist (the outline's markdown `- [ ]` lines).
+ * Durable promoted tasks keep richer state; the checklist is the at-a-glance view.
+ */
+// TODO(burdon): Re-correlate live sub-agent activity (trace lines) via a Process annotation
+//  carrying the task ref — the pid no longer lives on the task.
 export const TaskList = composable<HTMLDivElement, TaskListProps>(
-  ({ plan, space, conversationId, traceMessages, ...props }, forwardedRef) => {
-    const [snapshot] = useObject(plan);
-    const tasks = snapshot?.tasks ?? [];
+  ({ outline, activeTitle, ...props }, forwardedRef) => {
+    const [text] = useObject(outline.content);
+    const items = useMemo(() => Outline.parseChecklist(text?.content ?? ''), [text?.content]);
+    if (items.length === 0) {
+      return null;
+    }
 
     return (
       <Listbox.Root>
         <Listbox.Viewport {...composableProps(props, { classNames: 'dx-container' })} ref={forwardedRef}>
           <Listbox.Content aria-label='Tasks'>
-            {tasks.map((task) => (
-              <TaskListItem
-                key={task.id}
-                task={task}
-                space={space}
-                traceMessages={traceMessages}
-                conversationId={conversationId}
-              />
+            {items.map((item) => (
+              <TaskListItem key={item.title} item={item} active={item.title === activeTitle} />
             ))}
           </Listbox.Content>
         </Listbox.Viewport>
@@ -52,88 +45,23 @@ export const TaskList = composable<HTMLDivElement, TaskListProps>(
 );
 
 type TaskListItemProps = {
-  task: Plan.Task;
-  space?: Space;
-  traceMessages?: readonly Trace.Message[];
-  conversationId?: string;
+  item: Outline.ChecklistItem;
+  active?: boolean;
 };
 
-const TaskListItem = ({ task, space, traceMessages, conversationId }: TaskListItemProps) => {
-  const durableLines = useMemo(() => {
-    if (!task.agentPid || !traceMessages?.length) {
-      return [];
-    }
-    const lines = collectProcessActivityLines(traceMessages, String(task.agentPid), { conversationId });
-    if (task.status !== 'in-progress') {
-      return lines;
-    }
-    return lines.filter((line) => !isTerminalActivityLine(line));
-  }, [task.agentPid, task.status, traceMessages, conversationId]);
-
-  const ephemeralLine = useProcessEphemeralStatus(
-    task.delegated === true && task.status === 'in-progress' ? task.agentPid : undefined,
-    space,
-  );
-
-  const inFlightLine = useMemo(() => {
-    if (ephemeralLine || task.status !== 'in-progress' || !task.agentPid || !traceMessages?.length) {
-      return undefined;
-    }
-    return deriveInFlightActivityLine(traceMessages, String(task.agentPid), { conversationId });
-  }, [ephemeralLine, task.status, task.agentPid, traceMessages, conversationId]);
-
-  const activityLines = useMemo(() => {
-    if (ephemeralLine) {
-      return [ephemeralLine];
-    }
-    if (inFlightLine) {
-      return [inFlightLine];
-    }
-    return durableLines;
-  }, [durableLines, ephemeralLine, inFlightLine]);
-
-  const agentPid = task.agentPid;
-  const showActivity = task.delegated === true && agentPid != null && activityLines.length > 0;
-
+const TaskListItem = ({ item, active }: TaskListItemProps) => {
   return (
-    <Listbox.Item id={task.id} classNames='py-0'>
-      <div className='flex flex-col gap-0.5 min-w-0'>
-        <div className='flex items-center gap-2 min-w-0'>
-          <Icon
-            icon={task.status === 'done' ? 'ph--check--regular' : 'ph--circle--regular'}
-            classNames={task.status === 'done' ? 'text-success-text' : undefined}
-            size={4}
-          />
-          <span className='sr-only'>
-            {task.status === 'done' ? 'done' : task.status === 'in-progress' ? 'in progress' : 'to do'}
-          </span>
-          <span className='truncate flex-1'>{task.title}</span>
-          {task.status === 'in-progress' && <Tag hue='info'>pending</Tag>}
-          {task.agentPid && <Tag hue='info'>{Plan.formatAgentPidTag(task.agentPid)}</Tag>}
-        </div>
-        {showActivity && agentPid != null && <DelegatedTaskActivity agentPid={agentPid} lines={activityLines} />}
+    <Listbox.Item id={item.title} classNames='py-0'>
+      <div className='flex items-center gap-2 min-w-0'>
+        <Icon
+          icon={item.done ? 'ph--check--regular' : 'ph--circle--regular'}
+          classNames={item.done ? 'text-success-text' : undefined}
+          size={4}
+        />
+        <span className='sr-only'>{item.done ? 'done' : 'to do'}</span>
+        <span className='truncate flex-1'>{item.title}</span>
+        {active && <Tag hue='info'>working</Tag>}
       </div>
     </Listbox.Item>
   );
 };
-
-type DelegatedTaskActivityProps = {
-  agentPid: Process.ID;
-  lines: string[];
-};
-
-const DelegatedTaskActivity = ({ agentPid, lines }: DelegatedTaskActivityProps) => {
-  return (
-    <div className='flex items-center gap-2 ps-6 min-w-0 text-placeholder'>
-      <Icon icon='ph--brain--regular' size={3} classNames='shrink-0 opacity-70' />
-      <TextCrawl
-        key={`${String(agentPid)}:${lines.length}:${lines[lines.length - 1]}`}
-        lines={lines}
-        autoAdvance
-        greedy
-        size='sm'
-        classNames='text-xs text-subdued min-w-0 flex-1'
-      />
-    </div>
-  );
-};

package/src/components/ToolBlock/ToolBlock.tsx

@@ -8,16 +8,12 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from '@dxos/react-ui';
 import { NumericTabs, TextCrawl, TogglePanel, type TogglePanelRootProps } from '@dxos/react-ui-components';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { type ContentBlock, type Message } from '@dxos/types';
+import { type ContentBlock } from '@dxos/types';
 import { type XmlWidgetProps } from '@dxos/ui-editor';
 import { isNonNullable, safeParseJson } from '@dxos/util';
 
 import { meta } from '#meta';
 
-export const isToolMessage = (message: Message.Message) => {
-  return message.blocks.some((block: ContentBlock.Any) => block._tag === 'toolCall' || block._tag === 'toolResult');
-};
-
 export type ToolBlockProps = XmlWidgetProps<{
   blocks: ContentBlock.Any[];
 }>;

package/src/components/ToolBlock/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './is-tool-message';
 export * from './ToolBlock';
 export * from './ToolBlockWidget';

package/src/components/ToolBlock/is-tool-message.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ContentBlock, type Message } from '@dxos/types';
+
+// Kept out of `ToolBlock.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on
+// every edit.
+
+export const isToolMessage = (message: Message.Message) => {
+  return message.blocks.some((block: ContentBlock.Any) => block._tag === 'toolCall' || block._tag === 'toolResult');
+};

package/src/components/Toolbox/Toolbox.tsx

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

package/src/components/index.ts

@@ -5,6 +5,7 @@
 
 export * from './AgentProperties';
 export * from './Chat';
+export * from './ConnectorAuthMenu';
 export { TracePanel } from '../containers/TracePanel/TracePanel';
 export * from './ProcessTree';
 export * from './TaskList';

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

@@ -7,19 +7,21 @@ import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Agent, Plan } from '@dxos/assistant-toolkit';
+import { Agent } from '@dxos/assistant-toolkit';
+import { Instructions } from '@dxos/compute';
 import { Feed, Filter, Obj, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { RoutinePlugin } from '@dxos/plugin-routine/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { Loading, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 import { TypeSpec, createObjectFactory } from '@dxos/schema/testing';
-import { Message, Organization, Person } from '@dxos/types';
+import { Message, Organization, Outline, Person } from '@dxos/types';
 
 import { createMessage } from '#testing';
 import { translations } from '#translations';
@@ -61,7 +63,16 @@ const meta = {
       plugins: [
         ...corePlugins(),
         ClientPlugin({
-          types: [Agent.Agent, Message.Message, Plan.Plan, Text.Text, Organization.Organization, Person.Person],
+          types: [
+            Agent.Agent,
+            Feed.Feed,
+            Message.Message,
+            Outline.Outline,
+            Text.Text,
+            Instructions.Instructions,
+            Organization.Organization,
+            Person.Person,
+          ],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
               yield* initializeIdentity(client);
@@ -86,13 +97,9 @@ const meta = {
 
               space.db.add(
                 Obj.make(Agent.Agent, {
-                  instructions: Ref.make(Text.make()),
-                  artifacts: artifacts.map((obj) => ({
-                    name: Obj.getLabel(obj) ?? 'Artifact',
-                    data: Ref.make(obj),
-                  })),
-                  feed: Ref.make(inputFeed),
-                  subscriptions: [],
+                  instructions: Ref.make(
+                    Instructions.make({ text: 'You are a helpful agent working on the sample data set.' }),
+                  ),
                 }),
               );
             }),

package/src/containers/AgentArticle/AgentArticle.tsx

@@ -1,48 +1,40 @@
 //
-// Copyright 2026 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
-import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 
-import { Surface, useSpaceCallback } from '@dxos/app-framework/ui';
-import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { useSpaceCallback } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Agent } from '@dxos/assistant-toolkit';
-import { Database, Feed, Filter, Obj, Query, Ref } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { Card, Icon, IconButton, 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 { isNonNullable } from '@dxos/util';
+import { Database, Obj } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
+import { InstructionsEditor } from '@dxos/plugin-routine/components';
+import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
 
-type Tab = 'artifacts' | 'inputs';
-
 export type AgentArticleProps = AppSurface.ObjectArticleProps<Agent.Agent>;
 
+/**
+ * Article surface for an {@link Agent} — the identity/preset: its instructions (text, skills,
+ * objects, commands) plus a reset for its conversation history. Durable artifacts live on a
+ * Project; automation (subscriptions/schedule) is edited in the properties panel.
+ */
 export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
   const { t } = useTranslation(meta.profile.key);
-  const [tab, setTab] = useState<Tab>('artifacts');
-  const [viewport, setViewport] = useState<HTMLElement | null>(null);
+  const db = Obj.getDatabase(agent);
+  // Resolve reactively: a sync `.target` read never resolves on a cold/deep-link load.
+  const [instructionsSnapshot] = useObject(agent.instructions);
+  const instructions = Obj.getReactiveOrUndefined(instructionsSnapshot);
 
-  const spaceId = Obj.getDatabase(agent)?.spaceId;
-  // TODO(burdon): Clear input feed also.
+  const spaceId = db?.spaceId;
   const resetHistory = useSpaceCallback(
     spaceId,
-    [Database.Service] as const,
+    [Database.Service],
     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],
   );
@@ -50,143 +42,27 @@ export const AgentArticle = ({ role, subject: agent }: AgentArticleProps) => {
     await resetHistory();
   }, [resetHistory]);
 
-  const artifacts = useAtomValue(
-    useMemo(
-      () =>
-        Obj.atom(agent).pipe((agent) =>
-          Atom.make((get) => {
-            return get(agent)
-              .artifacts.map((artifact) => get(artifact.data.atom))
-              .filter(isNonNullable);
-          }),
-        ),
-      [agent],
-    ),
-  );
-
-  const inputFeed = useAtomValue(
-    Obj.atom(agent).pipe((_) =>
-      Atom.make((get) =>
-        Option.fromNullable(get(_).feed).pipe(
-          Option.map((ref) => ref.atom),
-          Option.map(get),
-          Option.getOrUndefined,
-        ),
-      ),
-    ),
-  );
-
-  const db = Obj.getDatabase(agent);
-  const inputObjects = useQuery(
-    db,
-    inputFeed ? Query.select(Filter.everything()).from(inputFeed) : Query.select(Filter.nothing()),
-  );
+  if (!db) {
+    return null;
+  }
 
   return (
     <Panel.Root role={role}>
       <Panel.Toolbar asChild>
         <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('inputs.label')} icon='ph--queue--regular' />
-          </Toolbar.ToggleGroup>
-          <Toolbar.Separator />
+          <Toolbar.Separator variant='gap' />
           <Toolbar.IconButton
             icon='ph--trash--regular'
             label={t('reset-history.button')}
-            onCanPlay={handleResetHistory}
+            onClick={handleResetHistory}
           />
         </Toolbar.Root>
       </Panel.Toolbar>
-      <Panel.Content className='dx-container flex flex-col'>
-        {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>
-            )}
-
-            <Masonry.Root Tile={MasonryArtifactTile}>
-              <Masonry.Content padding thin centered>
-                <Masonry.Viewport items={artifacts} getId={(item: Obj.Unknown) => item.id} />
-              </Masonry.Content>
-            </Masonry.Root>
-          </>
-        )}
-
-        {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 classNames='dx-container'>
+        {instructions && <InstructionsEditor db={db} instructions={instructions} />}
       </Panel.Content>
     </Panel.Root>
   );
 };
 
-const ArtifactTileCard = composable<HTMLDivElement, { data: Obj.Unknown }>(({ data, ...props }, forwardedRef) => {
-  const objectMenuItems = useObjectMenuItems(data);
-  const icon = Obj.getIcon(data)?.icon ?? 'ph--circle-dashed--regular';
-
-  return (
-    <Card.Root {...props} ref={forwardedRef} data-testid='board-item' fullWidth>
-      <Card.Header>
-        <Card.Block>
-          <Icon icon={icon} />
-        </Card.Block>
-        <Card.Title>{Obj.getLabel(data, { fallback: 'typename' })}</Card.Title>
-        {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-        <Card.Block end>
-          <Menu.Trigger asChild disabled={!objectMenuItems?.length}>
-            <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
-          </Menu.Trigger>
-          <Menu.Content items={objectMenuItems} />
-        </Card.Block>
-      </Card.Header>
-      <Card.Body>
-        <Surface.Surface
-          type={AppSurface.CardContent}
-          limit={1}
-          data={{ subject: data } satisfies AppSurface.ObjectCardData}
-        />
-      </Card.Body>
-    </Card.Root>
-  );
-});
-
-ArtifactTileCard.displayName = 'ArtifactTileCard';
-
-const MasonryArtifactTile = ({ data }: { data: Obj.Unknown; index: number }) => (
-  <Menu.Root>
-    <ArtifactTileCard data={data} />
-  </Menu.Root>
-);
-
-const StackTile = forwardRef<HTMLDivElement, MosaicTileProps<Obj.Unknown>>(
-  ({ data, location, debug, current }, forwardedRef) => (
-    <Menu.Root>
-      <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
-        <Focus.Item asChild current={current}>
-          <ArtifactTileCard ref={forwardedRef} data={data} />
-        </Focus.Item>
-      </Mosaic.Tile>
-    </Menu.Root>
-  ),
-);
-
-StackTile.displayName = 'StackTile';
+AgentArticle.displayName = 'AgentArticle';

package/src/containers/AgentProperties/AgentProperties.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useEffect } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useSpaceCallback } from '@dxos/app-framework/ui';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
@@ -18,26 +18,30 @@ export type AgentPropertiesProps = AppSurface.ObjectPropertiesProps<Agent.Agent>
 export const AgentProperties = ({ subject: agent }: AgentPropertiesProps) => {
   const spaceId = Obj.getDatabase(agent)?.spaceId;
 
-  // TODO(burdon): Factor this out?
-  const syncTriggers = useSpaceCallback(
+  // Subscriptions live on the compiled automation, so a toggle recompiles them (per-category
+  // reconcile — the schedule routine is untouched). `useSpaceCallback` takes no arguments, so the
+  // next set is staged on a ref.
+  const pendingSubscriptions = useRef<Ref.Ref<Obj.Unknown>[]>([]);
+  const syncAutomation = useSpaceCallback(
     spaceId,
     [] as const,
-    () => Operation.invoke(AgentWizardOperations.SyncTriggers, { agent: Ref.make(agent) }),
+    () =>
+      Operation.invoke(AgentWizardOperations.SyncAutomation, {
+        agent: Ref.make(agent),
+        subscriptions: pendingSubscriptions.current,
+      }),
     [agent],
   );
 
-  // Sync triggers whenever the agent mutates (e.g., subscriptions change).
-  useEffect(() => {
-    if (!spaceId) {
-      return;
-    }
-
-    return Obj.subscribe(agent, () => {
-      queueMicrotask(() => {
-        syncTriggers().catch((err) => log.catch(err));
-      });
-    });
-  }, [spaceId, agent, syncTriggers]);
+  const handleSubscriptionsChanged = useCallback(
+    (subscriptions: Ref.Ref<Obj.Unknown>[]) => {
+      pendingSubscriptions.current = subscriptions;
+      syncAutomation().catch((err) => log.catch(err));
+    },
+    [syncAutomation],
+  );
 
-  return <AgentPropertiesComponent agent={agent} />;
+  return <AgentPropertiesComponent agent={agent} onSubscriptionsChanged={handleSubscriptionsChanged} />;
 };
+
+AgentProperties.displayName = 'AgentProperties';

package/src/containers/AssistantSettings/AssistantSettings.tsx

@@ -88,3 +88,5 @@ export const AssistantSettings = ({ settings, onSettingsChange }: AssistantSetti
     </Form.Root>
   );
 };
+
+AssistantSettings.displayName = 'AssistantSettings';