@dxos/plugin-automation 0.7.4 → 0.7.5-labs.071a3e2

package/src/capabilities/app-graph-builder.ts

@@ -0,0 +1,156 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { createExtension, toSignal } from '@dxos/plugin-graph';
+import { memoizeQuery } from '@dxos/plugin-space';
+import { getTypename, parseId, SpaceState } from '@dxos/react-client/echo';
+
+import { AUTOMATION_PLUGIN } from '../meta';
+
+export default (context: PluginsContext) => {
+  const resolve = (typename: string) =>
+    context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};
+
+  return contributes(Capabilities.AppGraphBuilder, [
+    createExtension({
+      id: `${AUTOMATION_PLUGIN}/service-registry`,
+      resolver: ({ id }) => {
+        if (!id.endsWith('~service-registry')) {
+          return;
+        }
+
+        const type = 'orphan-settings-for-subject';
+        const icon = 'ph--plugs--regular';
+
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const [subjectId] = id.split('~');
+        const { spaceId } = parseId(subjectId);
+        const spaces = toSignal(
+          (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+          () => client.spaces.get(),
+        );
+        const space = spaces?.find((space) => space.id === spaceId && space.state.get() === SpaceState.SPACE_READY);
+        return {
+          id,
+          type,
+          data: null,
+          properties: {
+            icon,
+            label: ['service registry label', { ns: AUTOMATION_PLUGIN }],
+            object: null,
+            space,
+          },
+        };
+      },
+    }),
+    createExtension({
+      id: `${AUTOMATION_PLUGIN}/automation-for-subject`,
+      resolver: ({ id }) => {
+        if (!id.endsWith('~automation')) {
+          return;
+        }
+
+        const type = 'orphan-settings-for-subject';
+        const icon = 'ph--magic-wand--regular';
+
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const [subjectId] = id.split('~');
+        const { spaceId, objectId } = parseId(subjectId);
+        const spaces = toSignal(
+          (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+          () => client.spaces.get(),
+        );
+        const space = spaces?.find((space) => space.id === spaceId && space.state.get() === SpaceState.SPACE_READY);
+        if (!objectId) {
+          // TODO(burdon): Ref SPACE_PLUGIN ns.
+          const label = space
+            ? space.properties.name || ['unnamed space label', { ns: AUTOMATION_PLUGIN }]
+            : ['unnamed object settings label', { ns: AUTOMATION_PLUGIN }];
+
+          // TODO(wittjosiah): Support comments for arbitrary subjects.
+          //   This is to ensure that the comments panel is not stuck on an old object.
+          return {
+            id,
+            type,
+            data: null,
+            properties: {
+              icon,
+              label,
+              showResolvedThreads: false,
+              object: null,
+              space,
+            },
+          };
+        }
+
+        const [object] = memoizeQuery(space, { id: objectId });
+        if (!object || !subjectId) {
+          return;
+        }
+
+        const meta = resolve(getTypename(object) ?? '');
+        const label = meta.label?.(object) ||
+          object.name ||
+          meta.placeholder || ['unnamed object settings label', { ns: AUTOMATION_PLUGIN }];
+
+        return {
+          id,
+          type,
+          data: null,
+          properties: {
+            icon,
+            label,
+            object,
+          },
+        };
+      },
+    }),
+    createExtension({
+      id: `${AUTOMATION_PLUGIN}/assistant-for-subject`,
+      resolver: ({ id }) => {
+        if (!id.endsWith('~assistant')) {
+          return;
+        }
+
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const [subjectId] = id.split('~');
+        const { spaceId, objectId } = parseId(subjectId);
+        const spaces = toSignal(
+          (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+          () => client.spaces.get(),
+        );
+        const space = spaces?.find((space) => space.id === spaceId && space.state.get() === SpaceState.SPACE_READY);
+        if (!objectId) {
+          // TODO(wittjosiah): Support assistant for arbitrary subjects.
+          //   This is to ensure that the assistant panel is not stuck on an old object.
+          return {
+            id,
+            type: 'orphan-automation-for-subject',
+            data: null,
+            properties: {
+              icon: 'ph--atom--regular',
+              label: ['assistant panel label', { ns: AUTOMATION_PLUGIN }],
+              object: null,
+              space,
+            },
+          };
+        }
+
+        const [object] = memoizeQuery(space, { id: objectId });
+        return {
+          id,
+          type: 'orphan-automation-for-subject',
+          data: null,
+          properties: {
+            icon: 'ph--atom--regular',
+            label: ['assistant panel label', { ns: AUTOMATION_PLUGIN }],
+            object,
+          },
+        };
+      },
+    }),
+  ]);
+};

package/src/capabilities/capabilities.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { defineCapability } from '@dxos/app-framework';
+import { type AIServiceClientImpl } from '@dxos/assistant';
+
+import { AUTOMATION_PLUGIN } from '../meta';
+
+export namespace AutomationCapabilities {
+  export const AiClient = defineCapability<AIServiceClientImpl>(`${AUTOMATION_PLUGIN}/capability/ai-client`);
+}

package/src/capabilities/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const AiClient = lazy(() => import('./ai-client'));
+export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
+import { ObjectId } from '@dxos/echo-schema';
+import { create, makeRef } from '@dxos/live-object';
+
+import { AutomationAction, AIChatType } from '../types';
+
+export default () =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver({
+      intent: AutomationAction.Create,
+      resolve: ({ name }) => ({
+        data: {
+          object: create(AIChatType, {
+            name,
+            // TODO(burdon): ???
+            // new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, SpaceId.random(), ObjectId.random()]).toString(),
+            queue: makeRef({ id: ObjectId.random() }),
+          }),
+        },
+      }),
+    }),
+  );

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { getSpace, isEchoObject, isSpace, type ReactiveEchoObject } from '@dxos/react-client/echo';
+
+import { AutomationPanel, ChatContainer, ServiceRegistry } from '../components';
+import { AUTOMATION_PLUGIN } from '../meta';
+import { AIChatType } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/ai-chat`,
+      role: 'article',
+      filter: (data): data is { subject: AIChatType } => data.subject instanceof AIChatType,
+      component: ({ data, role }) => <ChatContainer role={role} chat={data.subject} />,
+    }),
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/service-registry`,
+      role: 'complementary--service-registry',
+      component: ({ data }) => (
+        <ServiceRegistry space={isSpace(data.subject) ? data.subject : getSpace(data.subject)!} />
+      ),
+    }),
+    createSurface({
+      id: `${AUTOMATION_PLUGIN}/automation`,
+      role: 'complementary--automation',
+      filter: (data): data is { subject: ReactiveEchoObject<any> } =>
+        isEchoObject(data.subject) && !!getSpace(data.subject),
+      component: ({ data }) => <AutomationPanel space={getSpace(data.subject)!} object={data.subject} />,
+    }),
+  ]);

package/src/components/AutomationPanel/AutomationPanel.stories.tsx

@@ -7,8 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React from 'react';
 
-import { FunctionTrigger } from '@dxos/functions';
-import { FunctionType } from '@dxos/plugin-script/types';
+import { FunctionType, FunctionTrigger } from '@dxos/functions';
 import { create, useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';

package/src/components/AutomationPanel/AutomationPanel.tsx

@@ -5,8 +5,14 @@
 import React, { useState } from 'react';
 
 import { S } from '@dxos/echo-schema';
-import { FunctionTriggerSchema, FunctionTrigger, type FunctionTriggerType } from '@dxos/functions';
-import { FunctionType, ScriptType } from '@dxos/plugin-script';
+import {
+  FunctionType,
+  FunctionTrigger,
+  FunctionTriggerSchema,
+  TriggerKind,
+  type FunctionTriggerType,
+  ScriptType,
+} from '@dxos/functions';
 import { type Client, useClient } from '@dxos/react-client';
 import { create, Filter, useQuery, type Space, type ReactiveObject, getSpace } from '@dxos/react-client/echo';
 import { IconButton, Input, useTranslation, Button } from '@dxos/react-ui';
@@ -24,7 +30,7 @@ export type AutomationPanelProps = {
 };
 
 // TODO(burdon): Factor out common layout with ViewEditor.
-export const AutomationPanel = ({ space }: AutomationPanelProps) => {
+export const AutomationPanel = ({ space, object }: AutomationPanelProps) => {
   const { t } = useTranslation(AUTOMATION_PLUGIN);
   const client = useClient();
   const triggers = useQuery(space, Filter.schema(FunctionTrigger));
@@ -41,7 +47,7 @@ export const AutomationPanel = ({ space }: AutomationPanelProps) => {
   };
 
   const handleAdd = () => {
-    setTrigger(create(FunctionTriggerSchema, {}));
+    setTrigger(create(FunctionTriggerSchema, { meta: {} }));
     setSelected(undefined);
   };
 
@@ -71,43 +77,46 @@ export const AutomationPanel = ({ space }: AutomationPanelProps) => {
       <List.Root<FunctionTrigger> items={triggers} isItem={S.is(FunctionTrigger)} getId={(field) => field.id}>
         {({ items: triggers }) => (
           <div role='list' className='flex flex-col w-full'>
-            {triggers?.map((trigger) => (
-              <List.Item<FunctionTrigger>
-                key={trigger.id}
-                item={trigger}
-                classNames={mx(grid, ghostHover, 'items-center')}
-              >
-                <Input.Root>
-                  <Input.Switch checked={trigger.enabled} onCheckedChange={(checked) => (trigger.enabled = checked)} />
-                </Input.Root>
-
-                <div className={'flex'}>
-                  <List.ItemTitle classNames='px-2 cursor-pointer w-0 shrink' onClick={() => handleSelect(trigger)}>
-                    {getFunctionName(scripts, functions, trigger)}
-                  </List.ItemTitle>
-
-                  {/* TODO: a better way to expose URL copy action */}
-                  <Button onClick={() => navigator.clipboard.writeText(getWebhookUrl(client, trigger))}>
-                    Copy URL
-                  </Button>
-                </div>
-
-                <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
-              </List.Item>
-            ))}
+            {triggers?.map((trigger) => {
+              const copyAction = getCopyAction(client, trigger);
+              return (
+                <List.Item<FunctionTrigger>
+                  key={trigger.id}
+                  item={trigger}
+                  classNames={mx(grid, ghostHover, 'items-center', 'px-2')}
+                >
+                  <Input.Root>
+                    <Input.Switch
+                      checked={trigger.enabled}
+                      onCheckedChange={(checked) => (trigger.enabled = checked)}
+                    />
+                  </Input.Root>
+
+                  <div className={'flex'}>
+                    <List.ItemTitle
+                      classNames='px-1 cursor-pointer w-0 shrink truncate'
+                      onClick={() => handleSelect(trigger)}
+                    >
+                      {getFunctionName(scripts, functions, trigger) ?? '∅'}
+                    </List.ItemTitle>
+
+                    {/* TODO: a better way to expose copy action */}
+                    {copyAction && (
+                      <Button onClick={() => navigator.clipboard.writeText(copyAction.contentProvider())}>
+                        {t(copyAction.translationKey)}
+                      </Button>
+                    )}
+                  </div>
+
+                  <List.ItemDeleteButton onClick={() => handleDelete(trigger)} />
+                </List.Item>
+              );
+            })}
           </div>
         )}
       </List.Root>
 
-      {trigger && (
-        <TriggerEditor
-          space={space}
-          storedTrigger={selected}
-          trigger={trigger}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      )}
+      {trigger && <TriggerEditor space={space} trigger={trigger} onSave={handleSave} onCancel={handleCancel} />}
 
       {!trigger && (
         <div className='flex p-2 justify-center'>
@@ -118,6 +127,18 @@ export const AutomationPanel = ({ space }: AutomationPanelProps) => {
   );
 };
 
+const getCopyAction = (client: Client, trigger: FunctionTrigger | undefined) => {
+  if (trigger?.spec?.type === TriggerKind.Email) {
+    return { translationKey: 'trigger copy email', contentProvider: () => `${getSpace(trigger)!.id}@dxos.network` };
+  }
+
+  if (trigger?.spec?.type === TriggerKind.Webhook) {
+    return { translationKey: 'trigger copy url', contentProvider: () => getWebhookUrl(client, trigger) };
+  }
+
+  return undefined;
+};
+
 const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
   const spaceId = getSpace(trigger)!.id;
   const edgeUrl = new URL(client.config.values.runtime!.services!.edge!.url!);
@@ -127,9 +148,10 @@ const getWebhookUrl = (client: Client, trigger: FunctionTrigger) => {
 };
 
 const getFunctionName = (scripts: ScriptType[], functions: FunctionType[], trigger: FunctionTriggerType) => {
+  const shortId = trigger.function && `${trigger.function?.slice(0, 16)}…`;
   const functionObject = functions.find((fn) => fn.name === trigger.function);
   if (!functionObject) {
-    return trigger.function;
+    return shortId;
   }
-  return scripts.find((s) => functionObject.source?.id === s.id)?.name ?? functionObject.name;
+  return scripts.find((s) => functionObject.source?.target?.id === s.id)?.name ?? shortId;
 };

package/src/components/ChatContainer/ChatContainer.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { useChatProcessor, useMessageQueue } from '../../hooks';
+import { type AIChatType } from '../../types';
+import { Thread } from '../Thread';
+
+export const ChatContainer = ({ chat, role }: { chat: AIChatType; role: string }) => {
+  const processor = useChatProcessor(chat);
+  const messageQueue = useMessageQueue(chat);
+  const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
+
+  const handleSubmit = useCallback(
+    async (text: string) => {
+      if (processor.streaming.value) {
+        await processor.cancel();
+      }
+
+      invariant(messageQueue);
+      await processor.request(text, {
+        history: messageQueue.items,
+        onComplete: (messages) => messageQueue.append(messages),
+      });
+    },
+    [processor, messageQueue],
+  );
+
+  const handleStop = useCallback(() => {
+    if (processor.streaming.value) {
+      void processor.cancel();
+    }
+  }, [processor]);
+
+  return (
+    <StackItem.Content toolbar={false} role={role}>
+      <Thread
+        messages={messages}
+        streaming={processor.streaming.value}
+        collapse={true}
+        onSubmit={handleSubmit}
+        onSuggest={handleSubmit}
+        onStop={handleStop}
+      />
+    </StackItem.Content>
+  );
+};

package/src/components/ChatContainer/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ChatContainer } from './ChatContainer';
+
+export * from './ChatContainer';
+export default ChatContainer;

package/src/components/MarkdownViewer/MarkdownViewer.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { MarkdownViewer } from './MarkdownViewer';
+
+faker.seed(0);
+
+const meta: Meta<typeof MarkdownViewer> = {
+  title: 'plugins/plugin-automation/MarkdownViewer',
+  component: MarkdownViewer,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownViewer>;
+
+const content = `
+# Hello, world!
+
+${faker.lorem.paragraphs(1)}
+
+Here's a JSON block:
+
+~~~json
+{
+  "hello": "world"
+}
+~~~
+
+And some code:
+
+~~~ts
+const App = () => {
+  const title = 'Hello, world!';
+  return <div>{title}</div>;
+};
+~~~
+
+${faker.lorem.paragraphs(1)}
+`;
+
+export const Default: Story = {
+  args: {
+    classNames: 'w-[500px] border border-border rounded-md p-4',
+    content,
+  },
+};

package/src/components/MarkdownViewer/MarkdownViewer.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+import { omit } from '@dxos/util';
+
+type MarkdownViewerProps = ThemedClassName<{
+  content?: string;
+}>;
+
+/**
+ * Transform text into react elements.
+ *
+ * https://github.com/remarkjs/react-markdown
+ * markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.
+ */
+// TODO(burdon): Styles.
+// TODO(burdon): Factor out (react-ui-syntax-highlighter).
+export const MarkdownViewer: FC<MarkdownViewerProps> = ({ classNames, content = '' }) => {
+  return (
+    <div className={mx('space-y-2', classNames)}>
+      <ReactMarkdown
+        components={{
+          a: ({ node, children, href, ...props }) => (
+            <a
+              href={href}
+              className='text-primary-500 hover:text-primary-500'
+              target='_blank'
+              rel='noopener noreferrer'
+              {...props}
+            >
+              {children}
+            </a>
+          ),
+          ol: ({ node, children, ...props }) => (
+            <ol className='leading-tight list-decimal pl-6' {...omit(props, ['ordered'])}>
+              {children}
+            </ol>
+          ),
+          ul: ({ node, children, ...props }) => (
+            <ul className='leading-tight list-disc pl-6' {...omit(props, ['ordered'])}>
+              {children}
+            </ul>
+          ),
+          li: ({ node, children, ...props }) => (
+            <li className='' {...omit(props, ['ordered'])}>
+              {children}
+            </li>
+          ),
+          blockquote: ({ node, children, ...props }) => (
+            <blockquote className='border-l-4 border-primary-500 pl-4 my-4 text-primary-500' {...props}>
+              {children}
+            </blockquote>
+          ),
+          code: ({ children, className }) => {
+            const [_, language] = /language-(\w+)/.exec(className || '') || [];
+            return (
+              <SyntaxHighlighter PreTag='div' language={language} className='p-0'>
+                {children}
+              </SyntaxHighlighter>
+            );
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+// const Cursor = () => {
+//   return <span className='animate-[pulse_1s_steps(1)_infinite] text-primary-500'>▊</span>;
+// };

package/src/components/MarkdownViewer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownViewer';

package/src/components/PromptEditor/PromptEditor.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { create } from '@dxos/live-object';
+import { create, makeRef } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -34,14 +34,14 @@ const DefaultStory = () => {
     const space = client.spaces.default;
     return space.db.add(
       create(ChainType, {
-        prompts: [create(ChainPromptType, { command: 'test', template, inputs: [] })],
+        prompts: [makeRef(create(ChainPromptType, { command: 'test', template, inputs: [] }))],
       }),
     );
   });
 
   return (
     <div role='none' className='flex w-[350px] border border-separator overflow-hidden'>
-      <PromptEditor prompt={chain.prompts![0]!} />
+      <PromptEditor prompt={chain.prompts![0]!.target!} />
     </div>
   );
 };