@dxos/plugin-assistant 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/ServiceRegistry/ServiceRegistry.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Filter, type Space } from '@dxos/client/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Icon, Input, List, ListItem } from '@dxos/react-ui';
+
+import { useServices } from '../../hooks';
+import { categoryIcons, ServiceType } from '../../types';
+
+// TODO(burdon): Option to show all/enabled/filter.
+export const ServiceRegistry = ({ space }: { space: Space }) => {
+  const matchingServices = useServices(space);
+  const enabledServices = useQuery(space, Filter.schema(ServiceType));
+
+  // Join matching services with enabled services.
+  const services = useMemo(() => {
+    return matchingServices.map((service) => enabledServices.find((s) => s.serviceId === service.serviceId) ?? service);
+  }, [matchingServices, enabledServices]);
+
+  // TODO(burdon): Reaplce with SpacePlugin intent.
+  const handleSetEnabled = (service: ServiceType, enabled: boolean) => {
+    if (enabled) {
+      space.db.add(service);
+    } else {
+      // TODO(burdon): Remove or disable?
+      space.db.remove(service);
+    }
+  };
+
+  return (
+    <List classNames='h-full grid auto-rows-[5rem] gap-2 p-2 pis-2 pie-2 overflow-y-auto scrollbar-thin'>
+      {services.map((service) => (
+        <ServiceItem
+          key={service.serviceId}
+          service={service}
+          enabled={service.enabled}
+          setEnabled={(enabled) => handleSetEnabled(service, enabled)}
+        />
+      ))}
+    </List>
+  );
+};
+
+const ServiceItem = ({
+  service,
+  enabled,
+  setEnabled,
+}: {
+  service: ServiceType;
+  enabled?: boolean;
+  setEnabled?: (enabled: boolean) => void;
+}) => {
+  return (
+    <ListItem.Root classNames='flex flex-col gap-1 p-1 overflow-hidden rounded-md border border-separator'>
+      <div className='grid grid-cols-[40px_1fr_40px]'>
+        <div className='flex gow justify-center items-center'>
+          <Icon icon={categoryIcons[service.category ?? 'default'] ?? 'ph--placeholder--regular'} size={6} />
+        </div>
+        <div className='grow items-center truncate mie-2'>{service.name}</div>
+        <div className='flex gow justify-center items-center'>
+          <Input.Root>
+            <Input.Switch checked={enabled} onClick={() => setEnabled?.(!enabled)} />
+          </Input.Root>
+        </div>
+      </div>
+      <div className='grid grid-cols-[40px_1fr]'>
+        <div />
+        <div className='text-sm text-subdued line-clamp-2 mie-1'>{service.description}</div>
+      </div>
+    </ListItem.Root>
+  );
+};

package/src/components/ServiceRegistry/index.ts

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

package/src/components/TemplateContainer.tsx

@@ -2,16 +2,92 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import { Match, type Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback } from 'react';
 
+import { debounce } from '@dxos/async';
+import { Input, Select, Toolbar, useTranslation } from '@dxos/react-ui';
 import { StackItem } from '@dxos/react-ui-stack';
 
 import { TemplateEditor } from './TemplateEditor';
-import { type TemplateType } from '../types';
+import { ASSISTANT_PLUGIN } from '../meta';
+import { TemplateKinds, type TemplateKindSchema, type TemplateType } from '../types';
 
 export const TemplateContainer = ({ template, role }: { template: TemplateType; role: string }) => {
+  const { t } = useTranslation(ASSISTANT_PLUGIN);
+
+  const handleKindChange = useCallback(
+    (value: string) => {
+      const kind = Match.type<string>().pipe(
+        Match.withReturnType<S.Schema.Type<typeof TemplateKindSchema>>(),
+        Match.when('always', () => ({ include: 'always' })),
+        Match.when('schema-matching', () => ({ include: 'schema-matching', typename: '' })),
+        Match.when('automatically', () => ({ include: 'automatically', description: '' })),
+        Match.orElse(() => ({ include: 'manual' })),
+      )(value);
+
+      template.kind = kind;
+    },
+    [template],
+  );
+
+  const handleTypenameChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (template.kind.include === 'schema-matching') {
+        template.kind.typename = event.target.value;
+      }
+    }, 300),
+    [template.kind.include],
+  );
+
+  const handleDescriptionChange = useCallback(
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (template.kind.include === 'automatically') {
+        template.kind.description = event.target.value;
+      }
+    }, 300),
+    [template.kind.include],
+  );
+
   return (
-    <StackItem.Content role={role} classNames='container-max-width'>
+    <StackItem.Content role={role} toolbar classNames='container-max-width'>
+      {/* TODO(wittjosiah): Move this toolbar into c11y sidebar. */}
+      <Toolbar.Root>
+        <Select.Root value={template.kind.include} onValueChange={handleKindChange}>
+          <Toolbar.Button asChild>
+            <Select.TriggerButton />
+          </Toolbar.Button>
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {TemplateKinds.map((kind) => (
+                  <Select.Option key={kind} value={kind}>
+                    {kind}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        {template.kind.include === 'schema-matching' && (
+          <Input.Root>
+            <Input.TextInput
+              placeholder={t('typename placeholder')}
+              defaultValue={template.kind.typename}
+              onChange={handleTypenameChange}
+            />
+          </Input.Root>
+        )}
+        {template.kind.include === 'automatically' && (
+          <Input.Root>
+            <Input.TextInput
+              placeholder={t('description placeholder')}
+              defaultValue={template.kind.description}
+              onChange={handleDescriptionChange}
+            />
+          </Input.Root>
+        )}
+      </Toolbar.Root>
       <TemplateEditor template={template} />
     </StackItem.Content>
   );

package/src/components/TemplateEditor/TemplateEditor.stories.tsx

@@ -8,7 +8,7 @@ import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { createSystemPrompt } from '@dxos/artifact';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -38,7 +38,7 @@ const DefaultStory = ({ text }: TemplateEditorProps & { text: string }) => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(live(TemplateType, { source: text, kind: { include: 'manual' } }));
+    return space.db.add(create(TemplateType, { source: text, kind: { include: 'manual' } }));
   });
 
   return (

package/src/components/TemplateEditor/TemplateForm.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -30,7 +30,7 @@ const DefaultStory = () => {
   const client = useClient();
   const [template] = useState(() => {
     const space = client.spaces.default;
-    return space.db.add(live(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
+    return space.db.add(create(TemplateType, { source: TEMPLATE, kind: { include: 'manual' } }));
   });
 
   return (

package/src/components/TemplateEditor/TemplateForm.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import { type Schema as S } from 'effect';
 import React, { Fragment, useEffect } from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
@@ -15,7 +15,7 @@ import { type TemplateInput, TemplateInputType, type TemplateType } from '../../
 
 export type TemplateFormProps = {
   template: TemplateType;
-  schema?: Schema.Schema<any, any, any>;
+  schema?: S.Schema<any, any, any>;
   commandEditable?: boolean;
 };
 

package/src/components/Thread/Thread.stories.tsx

@@ -10,7 +10,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Message } from '@dxos/artifact';
-import { Type } from '@dxos/echo';
+import { ObjectId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
@@ -29,9 +29,9 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
 
   const handleSubmit = useCallback(
     (text: string) => {
-      const request: Message = { id: Type.ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
+      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
       const response: Message = {
-        id: Type.ObjectId.random(),
+        id: ObjectId.random(),
         role: 'assistant',
         content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
       };
@@ -44,7 +44,7 @@ const DefaultStory = ({ messages: _messages, ...props }: ThreadProps) => {
           request,
           response,
           {
-            id: Type.ObjectId.random(),
+            id: ObjectId.random(),
             role: 'assistant',
             content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
           },
@@ -74,10 +74,13 @@ const meta: Meta<ThreadProps> = {
   component: Thread,
   decorators: [
     withSignals,
-    withClientProvider({ createIdentity: true, createSpace: true }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+    }),
     withPluginManager({ plugins: [IntentPlugin()] }),
     withTheme,
-    withLayout({ fullscreen: true, classNames: 'flex justify-center' }),
+    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
   ],
   parameters: {
     translations,
@@ -90,7 +93,7 @@ type Story = StoryObj<ThreadProps>;
 
 const TEST_MESSAGES: Message[] = [
   {
-    id: Type.ObjectId.random(),
+    id: ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -100,7 +103,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: Type.ObjectId.random(),
+    id: ObjectId.random(),
     role: 'assistant',
     content: [
       {
@@ -125,7 +128,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: Type.ObjectId.random(),
+    id: ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -136,7 +139,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: Type.ObjectId.random(),
+    id: ObjectId.random(),
     role: 'assistant',
     content: [
       {
@@ -148,7 +151,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: Type.ObjectId.random(),
+    id: ObjectId.random(),
     role: 'user',
     content: [
       {
@@ -159,7 +162,7 @@ const TEST_MESSAGES: Message[] = [
     ],
   },
   {
-    id: Type.ObjectId.random(),
+    id: ObjectId.random(),
     role: 'assistant',
     content: [
       {

package/src/components/Thread/ThreadContainer.stories.tsx

@@ -18,11 +18,11 @@ import {
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Message, type Tool } from '@dxos/artifact';
-import { genericTools, localServiceEndpoints } from '@dxos/artifact-testing';
+import { genericTools, localServiceEndpoints, type IsObject } from '@dxos/artifact-testing';
 import { AIServiceEdgeClient } from '@dxos/assistant';
-import { DXN, Type } from '@dxos/echo';
-import { createQueueDxn, create } from '@dxos/echo-schema';
+import { createStatic, ObjectId } from '@dxos/echo-schema';
 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';
@@ -31,9 +31,10 @@ import { MapPlugin } from '@dxos/plugin-map';
 import { SpacePlugin } from '@dxos/plugin-space';
 import { TablePlugin } from '@dxos/plugin-table';
 import { useQueue, useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
 import { IconButton, Input, Toolbar } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
 
 import { Thread, type ThreadProps } from './Thread';
 import { ChatProcessor } from '../../hooks';
@@ -43,7 +44,7 @@ import translations from '../../translations';
 const endpoints = localServiceEndpoints;
 
 type RenderProps = {
-  items?: Type.AnyObject[];
+  items?: IsObject[];
   prompts?: string[];
 } & Pick<ThreadProps, 'debug'>;
 
@@ -76,13 +77,13 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
   }, [aiClient, tools, space, dispatch, artifactDefinitions]);
 
   // Queue.
-  const [queueDxn, setQueueDxn] = useState<string>(() => createQueueDxn().toString());
+  const [queueDxn, setQueueDxn] = useState<string>(() => randomQueueDxn());
   const queue = useQueue<Message>(DXN.tryParse(queueDxn));
 
   useEffect(() => {
     if (queue?.items.length === 0 && !queue.isLoading && prompts.length > 0) {
       queue.append([
-        create(Message, {
+        createStatic(Message, {
           role: 'assistant',
           content: prompts.map(
             (prompt) =>
@@ -131,7 +132,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
 
   const handleDelete = useCallback(
     (id: string) => {
-      invariant(Type.ObjectId.isValid(id), 'Invalid message id');
+      invariant(ObjectId.isValid(id), 'Invalid message id');
       void queue?.delete([id]);
     },
     [queue],
@@ -159,7 +160,7 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
               iconOnly
               label='Clear history'
               icon='ph--trash--regular'
-              onClick={() => setQueueDxn(createQueueDxn().toString())}
+              onClick={() => setQueueDxn(randomQueueDxn())}
             />
             <IconButton iconOnly label='Stop' icon='ph--stop--regular' onClick={() => processor?.cancel()} />
           </Input.Root>
@@ -200,10 +201,18 @@ const DefaultStory = ({ items: _items, prompts = [], ...props }: RenderProps) =>
   );
 };
 
+const randomQueueDxn = () =>
+  new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, SpaceId.random(), ObjectId.random()]).toString();
+
 const meta: Meta<typeof DefaultStory> = {
   title: 'plugins/plugin-automation/ThreadContainer',
   render: DefaultStory,
   decorators: [
+    withSignals,
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+    }),
     withPluginManager({
       plugins: [
         ClientPlugin({
@@ -211,7 +220,7 @@ const meta: Meta<typeof DefaultStory> = {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
+        SpacePlugin({ observability: false }),
         SettingsPlugin(),
         IntentPlugin(),
 
@@ -224,7 +233,7 @@ const meta: Meta<typeof DefaultStory> = {
       fireEvents: [Events.SetupArtifactDefinition],
     }),
     withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
   parameters: {
     translations,
@@ -246,7 +255,7 @@ export const WithInitialItems: Story = {
   args: {
     debug: true,
     items: [
-      create(ChessType, {
+      createStatic(ChessType, {
         fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
       }),
     ],

package/src/components/Thread/ThreadContainer.tsx

@@ -2,13 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, type FC, useEffect } from 'react';
+import React, { useCallback, type FC } from 'react';
 
-import { CollaborationActions, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type AssociatedArtifact } from '@dxos/artifact';
 import { invariant } from '@dxos/invariant';
-import { DXN } from '@dxos/keys';
-import { makeRef, refFromDXN } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { getSpace } from '@dxos/react-client/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -38,27 +35,8 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
   const contextProvider = useContextProvider(space);
   const processor = useChatProcessor({ chat, space, settings, part, associatedArtifact });
   const messageQueue = useMessageQueue(chat);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  // TODO(thure): This will be referentially new on every render, is it causing overreactivity?
   const messages = [...(messageQueue?.items ?? []), ...processor.messages.value];
 
-  // Post last message to document.
-  useEffect(() => {
-    if (!processor.streaming.value && messageQueue?.items) {
-      const message = messageQueue.items[messageQueue.items.length - 1];
-      if (space && chat && message && dispatch && associatedArtifact) {
-        void dispatch(
-          createIntent(CollaborationActions.InsertContent, {
-            spaceId: space.id,
-            target: makeRef(associatedArtifact),
-            object: refFromDXN(new DXN(DXN.kind.QUEUE, [...chat.assistantChatQueue.dxn.parts, message.id])),
-            label: 'View proposal',
-          }),
-        );
-      }
-    }
-  }, [messageQueue, associatedArtifact, processor.streaming.value]);
-
   const handleSubmit = useCallback(
     (text: string) => {
       // Don't accept input if still processing.
@@ -96,11 +74,11 @@ export const ThreadContainer: FC<ThemedClassName<ThreadContainerProps>> = ({
       processing={processor.streaming.value}
       error={processor.error.value}
       tools={processor.tools}
-      contextProvider={contextProvider}
       onSubmit={handleSubmit}
       onCancel={handleCancel}
       onPrompt={handleSubmit}
       onOpenChange={onOpenChange}
+      contextProvider={contextProvider}
       {...props}
     />
   );

package/src/components/Thread/ThreadMessage.tsx

@@ -21,7 +21,7 @@ import { ToolBlock, isToolMessage } from './ToolInvocations';
 import { ToolboxContainer } from '../Toolbox';
 
 const panelClassNames = 'flex flex-col w-full px-2 bg-groupSurface rounded-md';
-const userClassNames = 'bg-[--user-fill] text-accentSurfaceText';
+const userClassNames = 'bg-[--user-fill] text-inverse';
 
 const ToggleContainer = (props: ToggleContainerProps) => {
   return <NativeToggleContainer {...props} classNames={mx(panelClassNames, props.classNames)} />;
@@ -105,7 +105,7 @@ const components: Record<string, BlockComponent> = {
     return (
       <ToggleContainer
         // open={open}
-        defaultOpen={systemDispositions.includes(block.disposition ?? '') && block.pending}
+        defaultOpen={block.disposition === 'cot' && block.pending}
         title={title}
         icon={
           block.pending ? (
@@ -115,7 +115,7 @@ const components: Record<string, BlockComponent> = {
       >
         <MarkdownViewer
           content={block.text}
-          classNames={['pbe-2', systemDispositions.includes(block.disposition ?? '') && 'text-sm text-subdued']}
+          classNames={['pbe-2', block.disposition === 'cot' && 'text-sm text-subdued']}
         />
       </ToggleContainer>
     );
@@ -193,7 +193,4 @@ const titles: Record<string, string> = {
   ['tool_use' as const]: 'Tool request',
   ['tool_result' as const]: 'Tool result',
   ['tool_list' as const]: 'Tools',
-  ['artifact-update' as const]: 'Artifact(s) changed',
 };
-
-const systemDispositions: string[] = ['cot', 'artifact-update'];

package/src/components/Toolbox/Toolbox.stories.tsx

@@ -44,7 +44,7 @@ const meta: Meta<typeof Toolbox> = {
             await client.halo.createIdentity();
           },
         }),
-        SpacePlugin(),
+        SpacePlugin({ observability: false }),
         SettingsPlugin(),
         IntentPlugin(),
         ChessPlugin(),
@@ -54,11 +54,11 @@ const meta: Meta<typeof Toolbox> = {
       capabilities,
     }),
     withTheme,
-    withLayout(),
+    withLayout({ tooltips: true }),
   ],
   parameters: {
-    layout: 'centered',
     translations,
+    layout: 'centered',
   },
 };
 

package/src/components/Toolbox/Toolbox.tsx

@@ -6,7 +6,7 @@ import React, { useState, useEffect, Fragment, type FC } from 'react';
 
 import { Capabilities, useCapabilities } from '@dxos/app-framework';
 import { parseToolName, type ArtifactDefinition, type Tool } from '@dxos/artifact';
-import { FunctionType } from '@dxos/functions';
+import { FunctionType } from '@dxos/functions/types';
 import { log } from '@dxos/log';
 import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -93,7 +93,7 @@ export const ToolboxContainer = ({ classNames, space }: ThemedClassName<{ space?
   const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
 
   // Registered services.
-  const services = useQuery(space, Filter.type(ServiceType));
+  const services = useQuery(space, Filter.schema(ServiceType));
   const [serviceTools, setServiceTools] = useState<{ service: ServiceType; tools: Tool[] }[]>([]);
   useEffect(() => {
     log('creating service tools...', { services: services.length });
@@ -107,7 +107,7 @@ export const ToolboxContainer = ({ classNames, space }: ThemedClassName<{ space?
   }, [services]);
 
   // Deployed functions.
-  const functions = useQuery(space, Filter.type(FunctionType));
+  const functions = useQuery(space, Filter.schema(FunctionType));
 
   return (
     <Toolbox classNames={classNames} artifacts={artifactDefinitions} services={serviceTools} functions={functions} />

package/src/components/index.ts

@@ -5,7 +5,7 @@
 import { lazy } from 'react';
 
 export * from './AssistantSettings';
-export * from './PromptSettings';
+export * from './ServiceRegistry';
 export * from './TemplateEditor';
 export * from './Thread';
 export * from './Toolbox';

package/src/hooks/index.ts

@@ -5,6 +5,7 @@
 export * from './processor';
 
 export * from './useChatProcessor';
+export * from './useLocalTriggerManager';
 export * from './useMessageQueue';
 export * from './useServices';
 export * from './useTextInputEvents';