@dxos/plugin-automation 0.7.4 → 0.7.5-labs.401163d

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

@@ -0,0 +1,187 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { createExtension, type Node, ROOT_ID, toSignal } from '@dxos/plugin-graph';
+import { memoizeQuery } from '@dxos/plugin-space';
+import { getTypename, parseId, SpaceState } from '@dxos/react-client/echo';
+
+import { AMBIENT_CHAT_DIALOG, 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}/ambient-chat`,
+      filter: (node): node is Node<null> => node.id === ROOT_ID,
+      actions: () => [
+        {
+          id: `${LayoutAction.UpdateDialog._tag}/ambient-chat/open`,
+          data: async () => {
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            await dispatch(
+              createIntent(LayoutAction.UpdateDialog, {
+                part: 'dialog',
+                subject: AMBIENT_CHAT_DIALOG,
+                options: {
+                  state: true,
+                  blockAlign: 'end',
+                },
+              }),
+            );
+          },
+          properties: {
+            label: ['open ambient chat label', { ns: AUTOMATION_PLUGIN }],
+            icon: 'ph--chat-centered-text--regular',
+            disposition: 'pin-end',
+            keyBinding: {
+              macos: 'shift+meta+k',
+              windows: 'shift+ctrl+k',
+            },
+          },
+        },
+      ],
+    }),
+    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,42 @@
+//
+// 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 { AmbientChatDialog, AutomationPanel, ChatContainer, ServiceRegistry } from '../components';
+import { AUTOMATION_PLUGIN, AMBIENT_CHAT_DIALOG } 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: AMBIENT_CHAT_DIALOG,
+      role: 'dialog',
+      filter: (data): data is any => data.component === AMBIENT_CHAT_DIALOG,
+      component: () => <AmbientChatDialog />,
+    }),
+    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/AmbientChatDialog/AmbientChatDialog.stories.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Dialog, Toolbar } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { AmbientChatDialog } from './AmbientChatDialog';
+import translations from '../../translations';
+
+const meta: Meta<typeof AmbientChatDialog> = {
+  title: 'plugins/plugin-automation/AmbientChatDialog',
+  component: AmbientChatDialog,
+  render: () => {
+    const [open, setOpen] = useState(true);
+    return (
+      <>
+        <div>
+          <Toolbar.Root>
+            <Toolbar.Button onClick={() => setOpen(true)}>Open</Toolbar.Button>
+          </Toolbar.Root>
+        </div>
+        <Dialog.Root open={open} onOpenChange={setOpen}>
+          <AmbientChatDialog />
+        </Dialog.Root>
+      </>
+    );
+  },
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AmbientChatDialog>;
+
+export const Default: Story = {};

package/src/components/AmbientChatDialog/AmbientChatDialog.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren, useState } from 'react';
+
+import { Dialog, Icon, IconButton, useTranslation } from '@dxos/react-ui';
+import { resizeAttributes, ResizeHandle, type Size, sizeStyle } from '@dxos/react-ui-dnd';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+import { Prompt } from '../Prompt';
+
+const preventDefault = (event: Event) => event.preventDefault();
+
+export const AmbientChatDialog = ({ children }: PropsWithChildren) => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  const [size, setSize] = useState<Size>('min-content');
+  const [iter, setIter] = useState(0);
+  return (
+    <div role='none' className='dx-dialog__overlay bg-transparent pointer-events-none' data-block-align='end'>
+      <Dialog.Content
+        onInteractOutside={preventDefault}
+        classNames='pointer-events-auto relative overflow-hidden is-[500px] max-is-none'
+        inOverlayLayout
+        {...resizeAttributes}
+        style={{
+          ...sizeStyle(size, 'vertical'),
+          maxBlockSize: 'calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 8rem)',
+        }}
+      >
+        <ResizeHandle
+          key={iter}
+          side='block-start'
+          defaultSize='min-content'
+          minSize={5}
+          fallbackSize={5}
+          iconPosition='center'
+          onSizeChange={setSize}
+        />
+
+        <div className='flex w-full items-center'>
+          <Dialog.Title classNames='sr-only'>{t('ambient chat dialog title')}</Dialog.Title>
+          <Dialog.Close>
+            <Icon icon='ph--x--regular' size={4} />
+          </Dialog.Close>
+          <div className='grow' />
+          <IconButton
+            variant='ghost'
+            icon='ph--caret-down--regular'
+            iconOnly
+            label='Shrink'
+            onClick={() => {
+              setIter((iter) => iter + 1);
+              setSize('min-content');
+            }}
+          />
+        </div>
+
+        <Prompt autoFocus lineWrapping />
+      </Dialog.Content>
+    </div>
+  );
+};

package/src/components/AmbientChatDialog/index.ts

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

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/Box/StatusLine.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { Button } from '@dxos/react-ui';
+import { withLayout, withTheme, withSignals } from '@dxos/storybook-utils';
+
+import { StatusLine } from './StatusLine';
+
+const meta: Meta<typeof StatusLine> = {
+  title: 'plugins/plugin-automation/StatusLine',
+  component: StatusLine,
+  decorators: [withSignals, withTheme, withLayout()],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatusLine>;
+
+export const Default: Story = {
+  args: {
+    classNames: 'w-96 px-2',
+    lines: Array.from({ length: 5 }, (_, i) => `${i}. ${faker.lorem.paragraph()}`),
+    autoAdvance: true,
+  },
+};
+
+export const Demo: Story = {
+  render: () => {
+    const [lines, setLines] = useState<string[]>([]);
+
+    return (
+      <div className='flex flex-col w-96 gap-4'>
+        <StatusLine lines={lines} autoAdvance advance={500} />
+        <div>
+          <Button onClick={() => setLines((lines) => [...lines, `${lines.length + 1}. ${faker.lorem.paragraph()}`])}>
+            Add
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Box/StatusLine.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useRef, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+const emptyLines: string[] = [];
+
+export type StatusLineProps = ThemedClassName<{
+  line?: number;
+  lines?: string[];
+  transition?: number;
+  advance?: number;
+  autoAdvance?: boolean;
+}>;
+
+export const StatusLine = ({
+  classNames,
+  line = -1,
+  lines = emptyLines,
+  transition = 300,
+  advance = 1_000,
+  autoAdvance,
+}: StatusLineProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [currentLine, setCurrentLine] = useState(line);
+  useEffect(() => {
+    setCurrentLine(line);
+  }, [line]);
+
+  useEffect(() => {
+    if (!autoAdvance) {
+      return;
+    }
+
+    const next = () => {
+      setCurrentLine((prev) => {
+        if (prev >= lines.length - 1) {
+          clearInterval(interval);
+          return prev;
+        }
+
+        return prev + 1;
+      });
+    };
+
+    next();
+    const interval = setInterval(next, advance);
+
+    return () => clearInterval(interval);
+  }, [lines.length, autoAdvance, advance]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.style.transition = `transform ${transition}ms ease-in-out`;
+      containerRef.current.style.transform = `translateY(-${currentLine * 24}px)`;
+    }
+  }, [currentLine]);
+
+  return (
+    <div className={mx('relative h-[24px] overflow-hidden', classNames)}>
+      <div ref={containerRef} className='h-[24px]'>
+        <div className='flex flex-col'>
+          {lines.map((line, i) => (
+            <div key={i} className={mx('flex h-[24px] items-center')}>
+              <span className='truncate'>{line}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};