@dxos/plugin-automation 0.7.5-labs.a279d8c → 0.7.5-labs.ea4b4c2

package/src/artifacts.stories.tsx

@@ -4,97 +4,127 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
-import React, { useMemo, useState } from 'react';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Capabilities, Surface, useCapabilities } from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, Surface, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { type Tool, type Message } from '@dxos/artifact';
-import { type ArtifactsContext, capabilities, genericTools, localServiceEndpoints } from '@dxos/artifact-testing';
+import { Message, type Tool } from '@dxos/artifact';
+import { capabilities, genericTools, localServiceEndpoints, type IsObject } from '@dxos/artifact-testing';
 import { AIServiceClientImpl } from '@dxos/assistant';
-import { create } from '@dxos/client/echo';
 import { createStatic, ObjectId } from '@dxos/echo-schema';
 import { EdgeHttpClient } from '@dxos/edge-client';
+import { invariant } from '@dxos/invariant';
 import { DXN, QueueSubspaceTags, SpaceId } from '@dxos/keys';
 import { ChessPlugin } from '@dxos/plugin-chess';
 import { ChessType } from '@dxos/plugin-chess/types';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { MapPlugin } from '@dxos/plugin-map';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { TablePlugin } from '@dxos/plugin-table';
+import { useSpace } from '@dxos/react-client/echo';
 import { useQueue } from '@dxos/react-edge-client';
 import { IconButton, Input, Toolbar } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 
-import { Thread } from './components';
+import { Thread, type ThreadProps } from './components';
 import { ChatProcessor } from './hooks';
 import { createProcessorOptions } from './testing';
+import translations from './translations';
 
 const endpoints = localServiceEndpoints;
 
 type RenderProps = {
-  items?: ArtifactsContext['items']; // TODO(burdon): Typedef.
-};
+  items?: IsObject[];
+  prompts?: string[];
+} & Pick<ThreadProps, 'debug'>;
 
-const Render = ({ items: _items }: RenderProps) => {
+// TODO(burdon): Use ChatContainer.
+const Render = ({ items: _items, prompts = [], ...props }: RenderProps) => {
+  const space = useSpace();
   const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-
-  // Configuration.
   const tools = useMemo<Tool[]>(
-    () => [
-      // prettier-ignore
-      ...genericTools,
-      ...artifactDefinitions.flatMap((definition) => definition.tools),
-    ],
+    () => [...genericTools, ...artifactDefinitions.flatMap((definition) => definition.tools)],
     [genericTools, artifactDefinitions],
   );
 
-  // TODO(burdon): Common naming/packaging.
-  const [edgeClient] = useState(() => new EdgeHttpClient(endpoints.edge));
   const [aiClient] = useState(() => new AIServiceClientImpl({ endpoint: endpoints.ai }));
+  const [edgeClient] = useState(() => new EdgeHttpClient(endpoints.edge));
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const processor = useMemo<ChatProcessor | undefined>(() => {
+    if (!space) {
+      return;
+    }
 
-  // Queue.
-  const [queueDxn, setQueueDxn] = useState(() => randomQueueDxn());
-  const queue = useQueue<Message>(edgeClient, DXN.parse(queueDxn, true));
-
-  // Artifacts.
-  // TODO(burdon): Factor out class.
-  const [artifactsContext] = useState(() =>
-    create<ArtifactsContext>({
-      items: _items ?? [],
-      getArtifacts() {
-        return this.items;
-      },
-      addArtifact(artifact) {
-        this.items.push(artifact);
+    return new ChatProcessor(
+      aiClient,
+      tools,
+      {
+        space,
+        dispatch,
       },
-    }),
-  );
+      createProcessorOptions(artifactDefinitions.map((definition) => definition.instructions)),
+    );
+  }, [aiClient, tools, space, dispatch, artifactDefinitions]);
 
-  // TODO(burdon): Create hook.
-  const processor = useMemo(
-    () =>
-      new ChatProcessor(
-        aiClient,
-        tools,
-        { artifacts: artifactsContext },
-        createProcessorOptions(artifactDefinitions.map((definition) => definition.instructions)),
-      ),
-    [aiClient, tools, artifactsContext, artifactDefinitions],
-  );
+  // Queue.
+  const [queueDxn, setQueueDxn] = useState(() => randomQueueDxn());
+  const queue = useQueue<Message>(edgeClient, DXN.tryParse(queueDxn));
+
+  useEffect(() => {
+    if (queue?.items.length === 0 && !queue.isLoading && prompts.length > 0) {
+      queue.append([
+        createStatic(Message, {
+          role: 'assistant',
+          content: prompts.map(
+            (prompt) =>
+              ({
+                type: 'json',
+                disposition: 'suggest',
+                json: JSON.stringify({ text: prompt }),
+              }) as const,
+          ),
+        }),
+      ]);
+    }
+  }, [queueDxn, prompts, queue?.items.length, queue?.isLoading]);
 
   // State.
-  const artifactItems = artifactsContext.items.toReversed();
-  const messages = [...queue.items, ...processor.messages.value];
-
-  const handleSubmit = async (message: string) => {
-    // TODO(burdon): Button to cancel. Otherwise queue request.
-    if (processor.isStreaming) {
-      await processor.cancel();
-    }
+  const artifactItems: any[] = []; // TODO(burdon): Query from space.
+  const messages = [...(queue?.items ?? []), ...(processor?.messages.value ?? [])];
+
+  const handleSubmit = processor
+    ? async (message: string) => {
+        invariant(processor);
+        if (processor.streaming.value) {
+          await processor.cancel();
+        }
+
+        invariant(queue);
+        await processor.request(message, {
+          history: queue.items,
+          onComplete: (messages) => {
+            queue.append(messages);
+          },
+        });
+      }
+    : undefined;
+
+  const handleSuggest = useCallback(
+    (text: string) => {
+      void handleSubmit?.(text);
+    },
+    [handleSubmit],
+  );
 
-    const messages = await processor.request(message, queue.items);
-    // TODO(burdon): Append on success only? If approved by user? Clinet/server.
-    queue.append(messages);
-  };
+  const handleDelete = useCallback(
+    (id: string) => {
+      invariant(ObjectId.isValid(id), 'Invalid message id');
+      void queue?.delete([id]);
+    },
+    [queue],
+  );
 
   return (
     <div className='grid grid-cols-2 w-full h-full divide-x divide-separator overflow-hidden'>
@@ -106,7 +136,7 @@ const Render = ({ items: _items }: RenderProps) => {
               spellCheck={false}
               placeholder='Queue DXN'
               value={queueDxn}
-              onClick={() => setQueueDxn('')}
+              // onClick={() => setQueueDxn('')} Why?????
               onChange={(ev) => setQueueDxn(ev.target.value)}
             />
             <IconButton
@@ -121,11 +151,18 @@ const Render = ({ items: _items }: RenderProps) => {
               icon='ph--trash--regular'
               onClick={() => setQueueDxn(randomQueueDxn())}
             />
-            <IconButton iconOnly label='Stop' icon='ph--stop--regular' onClick={() => processor.cancel()} />
+            <IconButton iconOnly label='Stop' icon='ph--stop--regular' onClick={() => processor?.cancel()} />
           </Input.Root>
         </Toolbar.Root>
 
-        <Thread messages={messages} streaming={processor.isStreaming.value} onSubmit={handleSubmit} />
+        <Thread
+          messages={messages}
+          streaming={processor?.streaming.value}
+          onSubmit={processor ? handleSubmit : undefined}
+          onSuggest={processor ? handleSuggest : undefined}
+          onDelete={processor ? handleDelete : undefined}
+          {...props}
+        />
       </div>
 
       {/* Artifacts Deck/Mosaic */}
@@ -157,20 +194,44 @@ const meta: Meta<typeof Render> = {
   title: 'plugins/plugin-automation/artifacts',
   render: Render,
   decorators: [
-    //
     withSignals,
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+        SpacePlugin({ observability: false }),
+        IntentPlugin(),
+        ChessPlugin(),
+        MapPlugin(),
+        TablePlugin(),
+      ],
+      capabilities,
+    }),
     withTheme,
     withLayout({ fullscreen: true, tooltips: true }),
-    withPluginManager({ plugins: [ChessPlugin(), MapPlugin()], capabilities }),
   ],
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof Render>;
+
+export const Default: Story = {
+  args: {
+    debug: true,
+    prompts: ['Ask me a question', 'Show me a chess puzzle'],
+  },
+};
 
-export const WithInitialItems = {
+export const WithInitialItems: Story = {
   args: {
+    debug: true,
     items: [
       createStatic(ChessType, {
         fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',

package/src/capabilities/ai-client.ts

@@ -13,7 +13,7 @@ const DEFAULT_AI_SERVICE_URL = 'http://localhost:8788';
 
 export default (context: PluginsContext) => {
   const client = context.requestCapability(ClientCapabilities.Client);
-  const endpoint = client.config.values.runtime?.app?.env?.DX_AI_SERVICE_URL ?? DEFAULT_AI_SERVICE_URL;
+  const endpoint = client.config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL;
   const aiClient = new AIServiceClientImpl({ endpoint });
   return contributes(AutomationCapabilities.AiClient, aiClient);
 };

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

@@ -2,19 +2,81 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { createExtension, toSignal } from '@dxos/plugin-graph';
+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 { AUTOMATION_PLUGIN } from '../meta';
+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}/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}/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}/automation-for-subject`,
       resolver: ({ id }) => {
@@ -80,7 +142,6 @@ export default (context: PluginsContext) => {
     createExtension({
       id: `${AUTOMATION_PLUGIN}/assistant-for-subject`,
       resolver: ({ id }) => {
-        // TODO(Zan): Find util (or make one). Effect schema!!
         if (!id.endsWith('~assistant')) {
           return;
         }
@@ -110,7 +171,6 @@ export default (context: PluginsContext) => {
         }
 
         const [object] = memoizeQuery(space, { id: objectId });
-
         return {
           id,
           type: 'orphan-automation-for-subject',

package/src/capabilities/intent-resolver.ts

@@ -6,17 +6,22 @@ import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
 import { ObjectId } from '@dxos/echo-schema';
 import { create, makeRef } from '@dxos/live-object';
 
-import { AutomationAction, GptChatType } from '../types';
+import { AutomationAction, AIChatType } from '../types';
 
 export default () =>
   contributes(
     Capabilities.IntentResolver,
-    createResolver(AutomationAction.Create, ({ name }) => ({
-      data: {
-        object: create(GptChatType, {
-          name,
-          queue: makeRef({ id: ObjectId.random() }), // new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, SpaceId.random(), ObjectId.random()]).toString(),
-        }),
-      },
-    })),
+    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

@@ -5,18 +5,32 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { getSpace, isEchoObject, type ReactiveEchoObject } from '@dxos/react-client/echo';
+import { getSpace, isEchoObject, isSpace, type ReactiveEchoObject } from '@dxos/react-client/echo';
 
-import { AssistantPanel, AutomationPanel, ChatContainer } from '../components';
-import { AUTOMATION_PLUGIN } from '../meta';
-import { GptChatType } from '../types';
+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}/assistant`,
-      role: 'complementary--assistant',
-      component: ({ data }) => <AssistantPanel subject={data.subject} />,
+      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`,
@@ -25,10 +39,4 @@ export default () =>
         isEchoObject(data.subject) && !!getSpace(data.subject),
       component: ({ data }) => <AutomationPanel space={getSpace(data.subject)!} object={data.subject} />,
     }),
-    createSurface({
-      id: `${AUTOMATION_PLUGIN}/gpt-chat`,
-      role: 'article',
-      filter: (data): data is { subject: GptChatType } => data.subject instanceof GptChatType,
-      component: ({ data, role }) => <ChatContainer role={role} chat={data.subject} />,
-    }),
   ]);

package/src/components/AmbientChatDialog/AmbientChatDialog.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { AUTOMATION_PLUGIN } from '../../meta';
+
+const preventDefault = (event: Event) => event.preventDefault();
+
+export const AmbientChatDialog = () => {
+  const { t } = useTranslation(AUTOMATION_PLUGIN);
+  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' inOverlayLayout>
+        <Dialog.Title classNames='sr-only'>{t('ambient chat dialog title')}</Dialog.Title>
+        <Dialog.Close>
+          <Icon icon='ph--x--regular' size={4} />
+        </Dialog.Close>
+        <h1>Hello</h1>
+      </Dialog.Content>
+    </div>
+  );
+};

package/src/components/AmbientChatDialog/index.ts

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

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>
+  );
+};

package/src/components/Box/Tabbed.stories.tsx

@@ -0,0 +1,51 @@
+//
+// 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 { withLayout, withTheme, withSignals } from '@dxos/storybook-utils';
+
+import { Tabs } from './Tabbed';
+import { ToggleContainer } from './ToggleContainer';
+
+const content = Array.from({ length: 4 }, (_, i) => ({
+  title: faker.lorem.paragraph(),
+  content: faker.lorem.paragraphs(3),
+}));
+
+const meta: Meta<typeof Tabs> = {
+  title: 'plugins/plugin-automation/Tabbed',
+  component: Tabs,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(0);
+    return (
+      <div className='flex flex-col w-[500px] p-4 bg-attention'>
+        <ToggleContainer
+          open
+          title={content[selected].title}
+          classNames='p-1 rounded-lg bg-baseSurface border border-neutral-500'
+        >
+          <div className='flex w-full overflow-hidden'>
+            <Tabs length={content.length} selected={selected} onSelect={setSelected} />
+            <div className='flex-1 pis-2 pie-2 overflow-y-auto'>
+              <div>{content[selected].content}</div>
+            </div>
+          </div>
+        </ToggleContainer>
+      </div>
+    );
+  },
+};