@dxos/plugin-automation 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

package/src/components/ServiceRegistry/ServiceRegistry.tsx

@@ -1,75 +0,0 @@
-//
-// 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 { useServiceRegistry } from '../../hooks';
-import { ServiceType } from '../../types';
-
-// TODO(burdon): Option to show all/enabled.
-export const ServiceRegistry = ({ space }: { space: Space }) => {
-  const matchingServices = useServiceRegistry(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-3 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='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'>{service.description}</div>
-      </div>
-    </ListItem.Root>
-  );
-};

package/src/components/ServiceRegistry/index.ts

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

package/src/components/Thread/ScrollContainer.tsx

@@ -1,92 +0,0 @@
-//
-// 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

@@ -1,52 +0,0 @@
-//
-// 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

@@ -1,76 +0,0 @@
-//
-// 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

@@ -1,52 +0,0 @@
-//
-// 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-base 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

@@ -1,72 +0,0 @@
-//
-// 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

@@ -1,190 +0,0 @@
-//
-// 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 />;
-  },
-};