@dxos/plugin-assistant 0.8.4-main.4a85c3132b → 0.8.4-main.4f23b4e393

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/plugin';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+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 = {};

package/src/containers/RoutineArticle/RoutineArticle.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AgentPrompt } from '@dxos/assistant-toolkit';
+import { type Routine } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { useComputeRuntimeCallback } from '@dxos/plugin-automation/hooks';
+import { Panel, Toolbar, useTranslation } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+
+import { TemplateEditor } from '#components';
+import { meta } from '#meta';
+
+export type RoutineArticleProps = AppSurface.ObjectArticleProps<Routine.Routine>;
+
+type RunState =
+  | { status: 'idle' }
+  | { status: 'running' }
+  | { status: 'success'; result: unknown }
+  | { status: 'error'; error: Error };
+
+// TODO(burdon): Trigger editor.
+export const RoutineArticle = ({ role, attendableId, subject }: RoutineArticleProps) => {
+  const { t } = useTranslation(meta.id);
+  const { hasAttention } = useAttention(attendableId);
+  const invoke = usePromptHandler(subject);
+  const [state, setState] = useState<RunState>({ status: 'idle' });
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const handleRun = useCallback(async () => {
+    setState({ status: 'running' });
+    try {
+      const result = await invoke();
+      if (mountedRef.current) {
+        setState({ status: 'success', result });
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setState({ status: 'error', error: err instanceof Error ? err : new Error(String(err)) });
+      }
+    }
+  }, [invoke]);
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root disabled={!hasAttention || state.status === 'running'}>
+          <Toolbar.IconButton
+            iconOnly
+            icon={state.status === 'running' ? 'ph--spinner-gap--regular' : 'ph--play--regular'}
+            label={t('run-prompt.label')}
+            onClick={handleRun}
+          />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content classNames='flex flex-col gap-2'>
+        <TemplateEditor id={subject.id} template={subject.instructions} />
+        <RoutineResult state={state} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const RoutineResult = ({ state }: { state: RunState }) => {
+  const { t } = useTranslation(meta.id);
+  switch (state.status) {
+    case 'idle':
+      return null;
+    case 'running':
+      return <div className='p-2 text-sm text-subdued'>{t('routine-running.label')}</div>;
+    case 'error':
+      return <div className='p-2 text-sm text-error'>{state.error.message}</div>;
+    case 'success':
+      return <JsonHighlighter classNames='p-2! text-sm' data={state.result} />;
+  }
+};
+
+const usePromptHandler = (routine: Routine.Routine) => {
+  const db = Obj.getDatabase(routine);
+  const data = useMemo<Operation.Definition.Input<typeof AgentPrompt> | undefined>(() => {
+    if (db && routine) {
+      return {
+        prompt: db.makeRef(Obj.getDXN(routine)),
+        input: {},
+      };
+    }
+  }, [routine, db]);
+
+  return useComputeRuntimeCallback(
+    db?.spaceId,
+    () => {
+      invariant(data);
+      return Operation.invoke(AgentPrompt, data);
+    },
+    [data],
+  );
+};

package/src/containers/RoutineArticle/index.ts

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

package/src/containers/RoutineList/RoutineList.stories.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { SERVICES_CONFIG } from '@dxos/ai/testing';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Routine } from '@dxos/compute';
+import { Filter } from '@dxos/echo';
+import { AutomationPlugin } from '@dxos/plugin-automation/plugin';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { Markdown } from '@dxos/plugin-markdown';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Config } from '@dxos/react-client';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { Organization } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { AssistantPlugin } from '../../AssistantPlugin';
+import { TracePanel } from '../TracePanel';
+import { RoutineList } from './RoutineList';
+
+// TODO(burdon): Factor out (see assistant-stories)
+export const config = {
+  remote: new Config({
+    runtime: {
+      services: SERVICES_CONFIG.REMOTE,
+    },
+  }),
+  persistent: new Config({
+    runtime: {
+      client: {
+        storage: {
+          persistent: true,
+        },
+      },
+      services: SERVICES_CONFIG.REMOTE,
+    },
+  }),
+  local: new Config({
+    runtime: {
+      services: SERVICES_CONFIG.LOCAL,
+    },
+  }),
+};
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const [subject] = useQuery(space?.db, Filter.type(Organization.Organization));
+  if (!subject) {
+    return <Loading data={{ space: !!space, subject: !!subject }} />;
+  }
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar className='flex p-1 items-center'>
+        <RoutineList subject={subject} role='toolbar-input' attendableId='story' />
+      </Panel.Toolbar>
+      <Panel.Content>
+        <TracePanel role='article' space={space} attendableId={space.id} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-assistant/containers/RoutineList',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Routine.Routine, Organization.Organization, Markdown.Document],
+          config: config.remote,
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+              space.db.add(
+                Organization.make({
+                  name: 'DXOS',
+                }),
+              );
+              space.db.add(
+                Routine.make({
+                  name: 'Summarize',
+                  instructions: 'Create a new markdown document that is a summary of the selected object.',
+                }),
+              );
+              space.db.add(
+                Routine.make({
+                  name: 'Analyze',
+                  instructions: 'Analyze the selected content.',
+                }),
+              );
+              space.db.add(
+                Routine.make({
+                  name: 'Translate',
+                  instructions: 'Translate the selected content to Spanish.',
+                }),
+              );
+            }),
+        }),
+
+        AssistantPlugin(),
+        AutomationPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/RoutineList/RoutineList.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { DatabaseBlueprint, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Routine } from '@dxos/compute';
+import { Filter, Obj, Ref } from '@dxos/echo';
+import { MarkdownBlueprint } from '@dxos/plugin-markdown';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton } from '@dxos/react-ui';
+
+import { AssistantOperation } from '#types';
+
+export type RoutineListProps = AppSurface.ObjectSectionProps<Obj.Unknown>;
+
+export const RoutineList = ({ subject }: RoutineListProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const db = Obj.getDatabase(subject);
+  const prompts = useQuery(db, Filter.type(Routine.Routine));
+  if (!db) {
+    return null;
+  }
+
+  return (
+    <div className='flex gap-2'>
+      {prompts.map((prompt, i) => (
+        <div key={i}>
+          <IconButton
+            icon='ph--magic-wand--regular'
+            label={Obj.getLabel(prompt) ?? Obj.getDXN(prompt).toString()}
+            onClick={() => {
+              void invokePromise(AssistantOperation.RunPromptInNewChat, {
+                db,
+                prompt: Ref.make(prompt),
+                objects: [subject],
+                // TODO(burdon): Concifgure from Prompt object.
+                blueprints: [DatabaseBlueprint.key, WebSearchBlueprint.key, MarkdownBlueprint.key],
+                background: true,
+              });
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/containers/RoutineList/index.ts

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