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

package/src/components/ServiceRegistry/ServiceRegistry.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { ServiceRegistry } from './ServiceRegistry';
+import { ServiceType } from '../../types';
+
+const meta: Meta<typeof ServiceRegistry> = {
+  title: 'plugins/plugin-automation/ServiceRegistry',
+  component: ServiceRegistry,
+  render: ({ space: _ignore, ...args }) => {
+    const space = useSpace();
+    if (!space) {
+      return <div />;
+    }
+
+    return (
+      <div className='h-full w-[300px] overflow-hidden'>
+        <ServiceRegistry space={space} {...args} />
+      </div>
+    );
+  },
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [ServiceType],
+    }),
+    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
+    withTheme,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ServiceRegistry>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/ServiceRegistry/ServiceRegistry.tsx

@@ -0,0 +1,75 @@
+//
+// 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]);
+
+  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/Thread/ScrollContainer.tsx

@@ -0,0 +1,92 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, {
+  forwardRef,
+  type PropsWithChildren,
+  type UIEventHandler,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export interface ScrollController {
+  scrollToBottom: () => void;
+}
+
+export type ScrollContainerProps = ThemedClassName<PropsWithChildren>;
+
+/**
+ * Scroll container that automatically scrolls to the bottom when new content is added.
+ */
+// TODO(burdon): Move to react-ui.
+// TODO(burdon): Custom scrollbar.
+export const ScrollContainer = forwardRef<ScrollController, ScrollContainerProps>(
+  ({ children, classNames }, forwardedRef) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const autoScrollRef = useRef(false);
+
+    // Controller.
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        scrollToBottom: () => {
+          invariant(containerRef.current);
+          containerRef.current.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' });
+          autoScrollRef.current = false;
+        },
+      }),
+      [],
+    );
+
+    // Auto scroll.
+    const [sticky, setSticky] = useState(true);
+    useEffect(() => {
+      if (!sticky || !containerRef.current) {
+        return;
+      }
+
+      autoScrollRef.current = true;
+      containerRef.current.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' });
+    }, [children]);
+
+    // Detect scroll end.
+    useEffect(() => {
+      invariant(containerRef.current);
+      const handleScrollEnd = () => {
+        autoScrollRef.current = false;
+      };
+
+      containerRef.current.addEventListener('scrollend', handleScrollEnd);
+      return () => containerRef.current?.removeEventListener('scrollend', handleScrollEnd);
+    }, []);
+
+    // Scrolling.
+    const handleScroll = useCallback<UIEventHandler<HTMLDivElement>>((ev) => {
+      if (autoScrollRef.current) {
+        return;
+      }
+
+      const { scrollTop, clientHeight, scrollHeight } = ev.currentTarget;
+      const sticky = scrollTop + clientHeight >= scrollHeight;
+      setSticky(sticky);
+    }, []);
+
+    return (
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className={mx('flex flex-col grow overflow-y-scroll scrollbar-none', classNames)}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/Thread/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/Thread/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/Thread/Tabbed.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 { 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
+          title={content[selected].title}
+          classNames='p-1 rounded-lg bg-baseSurface border border-neutral-500'
+          toggle
+          defaultOpen
+        >
+          <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>
+    );
+  },
+};

package/src/components/Thread/Tabbed.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Icon, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+const numbers = [
+  { regular: 'ph--number-circle-zero--thin', active: 'ph--number-circle-zero--duotone' },
+  { regular: 'ph--number-circle-one--thin', active: 'ph--number-circle-one--duotone' },
+  { regular: 'ph--number-circle-two--thin', active: 'ph--number-circle-two--duotone' },
+  { regular: 'ph--number-circle-three--thin', active: 'ph--number-circle-three--duotone' },
+  { regular: 'ph--number-circle-four--thin', active: 'ph--number-circle-four--duotone' },
+  { regular: 'ph--number-circle-five--thin', active: 'ph--number-circle-five--duotone' },
+  { regular: 'ph--number-circle-six--thin', active: 'ph--number-circle-six--duotone' },
+  { regular: 'ph--number-circle-seven--thin', active: 'ph--number-circle-seven--duotone' },
+  { regular: 'ph--number-circle-eight--thin', active: 'ph--number-circle-eight--duotone' },
+  { regular: 'ph--number-circle-nine--thin', active: 'ph--number-circle-nine--duotone' },
+];
+
+export type TabsProps = ThemedClassName<{ length: number; selected?: number; onSelect?: (index: number) => void }>;
+
+// TODO(burdon): Key up/down.
+export const Tabs: FC<TabsProps> = ({ classNames, length, selected = 0, onSelect }) => {
+  return (
+    <div
+      className={mx('flex flex-col overflow-hidden outline-none', classNames)}
+      tabIndex={-1}
+      onKeyDown={(ev) => {
+        // TODO(burdon): Focus when open Toggle.
+        switch (ev.key) {
+          case 'ArrowDown':
+          case 'ArrowRight': {
+            if (selected < length - 1) {
+              onSelect?.(selected + 1);
+            }
+            break;
+          }
+          case 'ArrowUp':
+          case 'ArrowLeft': {
+            if (selected > 0) {
+              onSelect?.(selected - 1);
+            }
+            break;
+          }
+        }
+      }}
+    >
+      {Array.from({ length }).map((_, i) => {
+        const icon = numbers[i + 1];
+        return (
+          <div
+            key={i}
+            className={mx(
+              'relative flex w-[24px] h-[28px] justify-center cursor-pointer text-subdued',
+              selected === i && '!text-green-500', // TODO(burdon): accent.
+            )}
+          >
+            {i < length - 1 && <div className='absolute left-[11.5px] top-[21px] w-[1px] h-[10px] bg-neutral-400' />}
+            <Icon
+              icon={selected === i ? icon.regular : icon.regular}
+              classNames='z-10 !p-0 !w-[24px] !h-[24px] outline-none'
+              onClick={() => onSelect?.(i)}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,190 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { type Message } from '@dxos/artifact';
+import { ObjectId } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { withLayout, withSignals, withTheme } from '@dxos/storybook-utils';
+
+import { Thread, type ThreadProps } from './Thread';
+import translations from '../../translations';
+
+faker.seed(1);
+
+const Render = ({ messages: _messages, ...props }: ThreadProps) => {
+  const [streaming, setStreaming] = useState(false);
+  const [messages, setMessages] = useState<Message[]>(_messages ?? []);
+  useEffect(() => {
+    setMessages(_messages ?? []);
+  }, [_messages]);
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      const request: Message = { id: ObjectId.random(), role: 'user', content: [{ type: 'text', text }] };
+      const response: Message = {
+        id: ObjectId.random(),
+        role: 'assistant',
+        content: [{ type: 'text', disposition: 'cot', pending: true, text: faker.lorem.paragraphs(1) }],
+      };
+      setMessages([...messages, request, response]);
+      setStreaming(true);
+      setTimeout(() => {
+        response.content[0].pending = false;
+        setMessages([
+          ...messages,
+          request,
+          response,
+          {
+            id: ObjectId.random(),
+            role: 'assistant',
+            content: [{ type: 'text', text: faker.lorem.paragraphs(1) }],
+          },
+        ]);
+        setStreaming(false);
+      }, 3_000);
+    },
+    [messages],
+  );
+
+  return (
+    <div className='flex grow justify-center overflow-center bg-base'>
+      <div className='flex w-[500px] bg-white dark:bg-black'>
+        <Thread {...props} messages={messages} streaming={streaming} onSubmit={handleSubmit} onStop={() => {}} />
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<ThreadProps> = {
+  title: 'plugins/plugin-automation/Thread',
+  render: Render,
+  component: Thread,
+  decorators: [withSignals, withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ThreadProps>;
+
+const TEST_MESSAGES: Message[] = [
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        text: faker.lorem.sentence(5),
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        disposition: 'cot',
+        text: Array.from({ length: faker.number.int({ min: 3, max: 5 }) })
+          .map((_, idx) => `${idx + 1}. ${faker.lorem.paragraph()}`)
+          .join('\n'),
+      },
+      {
+        type: 'text',
+        text: Array.from({ length: faker.number.int({ min: 2, max: 5 }) })
+          .map(() => faker.lorem.paragraphs())
+          .join('\n\n'),
+      },
+      {
+        type: 'tool_use',
+        id: '1234',
+        name: 'search',
+        input: {},
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
+      {
+        type: 'tool_result',
+        toolUseId: '1234',
+        content: 'This is a tool result.',
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'tool_use',
+        id: '4567',
+        name: 'create',
+        input: {},
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'user',
+    content: [
+      {
+        type: 'tool_result',
+        toolUseId: '4567',
+        content: 'This is a tool result.',
+      },
+    ],
+  },
+  {
+    id: ObjectId.random(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        text: faker.lorem.paragraphs(1),
+      },
+    ],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    debug: true,
+    messages: TEST_MESSAGES,
+  },
+};
+
+export const Input: Story = {
+  args: {
+    streaming: true,
+  },
+};
+
+export const Incremental: Story = {
+  render: () => {
+    const [messages, setMessages] = useState<Message[]>([]);
+    useEffect(() => {
+      let i = 0;
+      const interval = setInterval(() => {
+        setMessages((messages) => [...messages, TEST_MESSAGES[i++]]);
+        if (i >= TEST_MESSAGES.length) {
+          clearInterval(interval);
+        }
+      }, 2_000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return <Render messages={messages} collapse />;
+  },
+};