@dxos/plugin-assistant 0.8.4-main.c1de068 → 0.8.4-main.dedc0f3

package/src/stories/components/BlueprintContainer.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Blueprint } from '@dxos/blueprints';
+import { Filter, Obj } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { Toolbar, useTranslation } from '@dxos/react-ui';
+import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+
+import { TemplateEditor } from '../../components';
+import { meta } from '../../meta';
+
+import { type ComponentProps } from './types';
+
+export const BlueprintContainer = ({ space }: ComponentProps) => {
+  const [blueprint] = useQuery(space, Filter.type(Blueprint.Blueprint));
+  const { t } = useTranslation(meta.id);
+
+  return !blueprint?.instructions ? (
+    <p className={mx(descriptionMessage, 'm-trimLg')}>{t('no blueprint message')}</p>
+  ) : (
+    <div className='flex flex-col h-full'>
+      <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
+        <h2>{Obj.getLabel(blueprint)}</h2>
+        <div className='flex-1' />
+        <Toolbar.IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' />
+      </Toolbar.Root>
+      <TemplateEditor id={blueprint.id} template={blueprint.instructions} />
+    </div>
+  );
+};

package/src/stories/components/ChatContainer.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Filter } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton, Popover } from '@dxos/react-ui';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { Chat, Toolbar } from '../../components';
+import { useBlueprintRegistry, useChatProcessor, useChatServices } from '../../hooks';
+import { useOnline, usePresets } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { LoggingContainer } from './LoggingContainer';
+import { type ComponentProps } from './types';
+
+export const ChatContainer = ({ space, onEvent }: ComponentProps) => {
+  const [online, setOnline] = useOnline();
+  const { preset, ...chatProps } = usePresets(online);
+
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const chat = chats.at(-1);
+
+  const blueprintRegistry = useBlueprintRegistry();
+  const services = useChatServices({ space, chat });
+  const processor = useChatProcessor({ chat, preset, services, blueprintRegistry });
+
+  const handleUpdateName = useCallback(() => {
+    if (chat) {
+      void processor?.updateName(chat);
+    }
+  }, [processor, chat]);
+
+  return !chat || !processor ? null : (
+    <StackItem.Content toolbar>
+      <div role='none' className='flex items-center gap-2 pie-2'>
+        <Toolbar classNames='is-min grow' chat={chat} onReset={() => onEvent?.('reset')} />
+        <Popover.Root>
+          <Popover.Trigger asChild>
+            <IconButton icon='ph--sort-ascending--regular' label='Logs' variant='ghost' />
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content>
+              <LoggingContainer space={space} />
+              <Popover.Arrow />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+        <div className='truncate text-subdued'>{chat.name ?? 'no name'}</div>
+        <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Update name' onClick={handleUpdateName} />
+      </div>
+
+      <div role='none' className='relative'>
+        <Chat.Root chat={chat} processor={processor} classNames='absolute inset-0'>
+          <Chat.Thread />
+          {/* <ChatProgress chat={chat} /> */}
+          <div className='flex justify-center p-4'>
+            <Chat.Prompt
+              {...chatProps}
+              outline
+              classNames='max-is-prose'
+              preset={preset?.id}
+              online={online}
+              onOnlineChange={setOnline}
+            />
+          </div>
+        </Chat.Root>
+      </div>
+    </StackItem.Content>
+  );
+};

package/src/stories/components/ChessContainer.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { Chess } from '@dxos/plugin-chess';
+import { useQuery } from '@dxos/react-client/echo';
+
+import type { ComponentProps } from './types';
+
+export const ChessContainer: FC<ComponentProps> = ({ space }) => {
+  const chess = useQuery(space, Filter.type(Chess.Game));
+  return <Surface role='section' limit={1} data={{ subject: chess.at(-1) }} />;
+};

package/src/stories/components/CommentsContainer.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+
+import { useContextBinder } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const CommentsContainer = ({ space }: ComponentProps) => {
+  const chats = useQuery(space, Filter.type(Assistant.Chat));
+  const binder = useContextBinder(chats.at(-1));
+  const object = binder?.objects.value[0]?.target;
+  const data = useMemo(() => ({ subject: 'comments', companionTo: object }), [object]);
+  if (!object) {
+    return null;
+  }
+
+  return <Surface role='article' data={data} />;
+};

package/src/stories/components/DebugCard.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj, type Relation } from '@dxos/echo';
+import { type ObjectId } from '@dxos/keys';
+
+interface DebugCardProps {
+  obj: Obj.Any | Relation.Any;
+}
+
+export const DebugCard = ({ obj }: DebugCardProps) => {
+  return (
+    <div className='border border-separator rounded-lg p-4 bg-surface'>
+      <div className='flex items-center justify-between mb-2'>
+        <h3 className='font-medium text-lg'>{Obj.getLabel(obj)}</h3>
+        <p className='flex gap-2 items-center'>
+          <span className='text-sm font-mono dx-text-hue' data-hue={colors[insecureIdHash(obj.id, colors.length)]}>
+            #{obj.id.slice(-6)}
+          </span>
+          <span className='text-sm text-description bg-neutral-800 px-2 py-1 rounded'>{Obj.getTypename(obj)}</span>
+        </p>
+      </div>
+      <details className='group'>
+        <summary className='cursor-pointer text-sm text-primary hover:text-primaryHover'>View JSON</summary>
+        <pre className='mt-2 text-xs p-3 rounded overflow-x-auto'>{JSON.stringify(obj, null, 2)}</pre>
+      </details>
+    </div>
+  );
+};
+
+const insecureIdHash = (id: ObjectId, modulo: number) => {
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    const num = id.charCodeAt(i);
+    hash = (hash ^ num) | 0;
+  }
+  return Math.abs(hash) % modulo;
+};
+
+const colors = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+];

package/src/stories/components/GraphContainer.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Match } from 'effect';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { ResearchGraph } from '@dxos/assistant-testing';
+import { Filter, Query } from '@dxos/echo';
+import { D3ForceGraph, useGraphModel } from '@dxos/plugin-explorer';
+import { useQuery } from '@dxos/react-client/echo';
+import { IconButton, Toolbar } from '@dxos/react-ui';
+import { ChatEditor, type ChatEditorController, type ChatEditorProps } from '@dxos/react-ui-chat';
+import { useMatcherExtension } from '@dxos/react-ui-components';
+import { type Expression, QueryParser, createFilter } from '@dxos/react-ui-components';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useFlush } from '../../hooks';
+
+import { type ComponentProps } from './types';
+
+export const GraphContainer = ({ space }: ComponentProps) => {
+  const [ast, setAst] = useState<Expression | undefined>();
+  const [filter, setFilter] = useState<Filter.Any>();
+  const [open, setOpen] = useState(false);
+
+  const [researchGraph] = useQuery(space, Query.type(ResearchGraph));
+  const queue = researchGraph?.queue.target;
+
+  const model = useGraphModel(space, undefined, undefined, queue);
+  useEffect(() => {
+    model?.setFilter(filter ?? Filter.everything());
+  }, [model, filter]);
+
+  const handleSubmit = useCallback<NonNullable<ChatEditorProps['onSubmit']>>(
+    (text) => {
+      try {
+        const parser = new QueryParser(text);
+        const ast = parser.parse();
+        setAst(ast);
+        const filter = createFilter(ast);
+        setFilter(filter);
+        setOpen(true);
+      } catch {
+        // TODO(mykola): Make hybrid search.
+        const filter = Filter.text(text, { type: 'vector' });
+        setFilter(filter);
+      }
+    },
+    [space],
+  );
+
+  return (
+    <div className={mx('relative grid h-full', open && 'grid-rows-[min-content_1fr]')}>
+      <SearchBar space={space} onSubmit={handleSubmit} />
+      <D3ForceGraph model={model} />
+
+      {/* TODO(burdon): Create component with context state for story. */}
+      {(open && (
+        <div className='absolute left-2 right-2 bottom-2 h-[8rem] flex overflow-hidden bg-baseSurface border border-subduedSeparator'>
+          <SyntaxHighlighter language='json' classNames='text-sm'>
+            {JSON.stringify({ ast, filter }, null, 2)}
+          </SyntaxHighlighter>
+          <div className='absolute bottom-1 right-1'>
+            <IconButton variant='ghost' icon='ph--x--regular' iconOnly label='Close' onClick={() => setOpen(false)} />
+          </div>
+        </div>
+      )) || (
+        <div className='absolute bottom-3 right-3'>
+          <IconButton
+            variant='ghost'
+            icon='ph--arrow-line-up--regular'
+            iconOnly
+            label='Open'
+            onClick={() => setOpen(true)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const SearchBar = ({ space, onSubmit }: ComponentProps & Pick<ChatEditorProps, 'onSubmit'>) => {
+  const { state: flushState, handleFlush } = useFlush(space);
+  const extensions = useMatcherExtension(space);
+  const editorRef = useRef<ChatEditorController>(null);
+
+  return (
+    <Toolbar.Root classNames='density-coarse border-b border-subduedSeparator'>
+      <ChatEditor
+        ref={editorRef}
+        autoFocus
+        placeholder='Search'
+        extensions={extensions}
+        fireIfEmpty
+        onSubmit={onSubmit}
+      />
+      <Toolbar.IconButton
+        icon='ph--magnifying-glass--regular'
+        iconOnly
+        label='Search'
+        onClick={() => onSubmit?.(editorRef.current?.getText() ?? '')}
+      />
+      <Toolbar.IconButton
+        disabled={flushState === 'flushing'}
+        icon={Match.value(flushState).pipe(
+          Match.when('idle', () => 'ph--floppy-disk--regular'),
+          Match.when('flushing', () => 'ph--spinner--regular'),
+          Match.when('flushed', () => 'ph--check--regular'),
+          Match.exhaustive,
+        )}
+        iconOnly
+        label='flush'
+        onClick={handleFlush}
+      />
+    </Toolbar.Root>
+  );
+};

package/src/stories/components/InvocationsContainer.tsx

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { InvocationTraceContainer } from '@dxos/devtools';
+
+import type { ComponentProps } from './types';
+
+export const InvocationsContainer = ({ space }: ComponentProps) => {
+  return (
+    <div className='flex bs-full min-bs-[20rem] items-center justify-center'>
+      <InvocationTraceContainer space={space} />
+    </div>
+  );
+};

package/src/stories/components/LoggingContainer.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Filter } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
+import { InvocationTraceStartEvent } from '@dxos/functions';
+import { type Queue, useQuery, useQueue } from '@dxos/react-client/echo';
+import { Timeline } from '@dxos/react-ui-components';
+
+import { useExecutionGraph } from '../../hooks';
+import { Assistant } from '../../types';
+
+import { type ComponentProps } from './types';
+
+export const LoggingContainer = ({ space, traceQueue }: ComponentProps & { traceQueue?: Queue }) => {
+  const [chat] = useQuery(space, Filter.type(Assistant.Chat));
+  const invocations =
+    useQueue(space.properties?.invocationTraceQueue?.dxn)?.objects.filter(Obj.instanceOf(InvocationTraceStartEvent)) ??
+    [];
+  const { branches, commits } = useExecutionGraph(
+    traceQueue ?? invocations?.at(-1)?.invocationTraceQueue?.target ?? chat?.traceQueue?.target,
+    true,
+  );
+
+  return (
+    <div className='flex flex-col h-full'>
+      <Timeline branches={branches} commits={commits} />
+    </div>
+  );
+};

package/src/stories/components/MessageContainer.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework';
+import { Filter } from '@dxos/echo';
+import { InboxCapabilities } from '@dxos/plugin-inbox';
+import { Mailbox } from '@dxos/plugin-inbox/types';
+import { fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
+
+import { type ComponentProps } from './types';
+
+export const MessageContainer = ({ space }: ComponentProps) => {
+  const [mailbox] = useQuery(space, Filter.type(Mailbox.Mailbox));
+  const state = useCapability(InboxCapabilities.MailboxState);
+  const message = mailbox && state[fullyQualifiedId(mailbox)];
+  const data = useMemo(() => ({ subject: message ?? 'message', companionTo: mailbox }), [message, mailbox]);
+
+  return <Surface role='section' data={data} limit={1} />;
+};

package/src/stories/components/PromptContainer.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Predicate } from 'effect';
+import React from 'react';
+
+import { Prompt } from '@dxos/blueprints';
+import { Filter } from '@dxos/echo';
+import { type Space, createDocAccessor, useQuery } from '@dxos/react-client/echo';
+import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+export const PromptContainer = ({ space }: { space: Space }) => {
+  const [prompt] = useQuery(space, Filter.type(Prompt.Prompt));
+  if (!prompt) {
+    return null;
+  }
+  return (
+    <div style={{ minHeight: '300px' }}>
+      <PromptEditor prompt={prompt} />
+    </div>
+  );
+};
+
+const PromptEditor = ({ prompt, classNames }: ThemedClassName<{ prompt: Prompt.Prompt }>) => {
+  const { themeMode } = useThemeContext();
+  const { parentRef } = useTextEditor(() => {
+    return {
+      initialValue: prompt.instructions ?? '',
+      extensions: [
+        createDataExtensions({ id: prompt.id, text: createDocAccessor(prompt, ['instructions']) }),
+        createBasicExtensions({
+          bracketMatching: false,
+          lineNumbers: true,
+          lineWrapping: true,
+        }),
+        createThemeExtensions({ themeMode }),
+        createMarkdownExtensions(),
+      ].filter(Predicate.isTruthy),
+    };
+  }, [themeMode, prompt]);
+
+  return <div ref={parentRef} className={mx('bs-full overflow-hidden', classNames)} />;
+};

package/src/stories/components/ResearchInputStack.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Filter } from '@dxos/echo';
+import { useQuery, useQueue } from '@dxos/react-client/echo';
+
+import { ResearchInputQueue } from '../testing';
+
+import { DebugCard } from './DebugCard';
+import type { ComponentProps } from './types';
+
+export const ResearchInputStack = ({ space }: ComponentProps) => {
+  const [researchInput] = useQuery(space, Filter.type(ResearchInputQueue));
+  const queue = useQueue(researchInput?.queue.dxn);
+
+  return (
+    <div className='p-4 overflow-y-auto h-full'>
+      <ul className='space-y-4 '>
+        {queue?.objects.map((object) => (
+          <li key={object.id}>
+            <DebugCard obj={object} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/stories/components/ResearchOutputStack.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { ResearchGraph } from '@dxos/assistant-testing';
+import { Filter } from '@dxos/echo';
+import { useQuery, useQueue } from '@dxos/react-client/echo';
+
+import type { ComponentProps } from './types';
+
+export const ResearchOutputStack = ({ space }: ComponentProps) => {
+  const [researchGraph] = useQuery(space, Filter.type(ResearchGraph));
+  const queue = useQueue(researchGraph?.queue.dxn);
+
+  return (
+    <div className='p-4 overflow-y-auto h-full'>
+      <ul className='space-y-4 '>
+        {queue?.objects.map((object) => (
+          <li key={object.id}>
+            <Surface role='card' data={{ subject: object }} limit={1} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/stories/components/TasksContainer.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Filter, Obj } from '@dxos/echo';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { createDocAccessor, useQuery } from '@dxos/react-client/echo';
+import { Toolbar, useThemeContext } from '@dxos/react-ui';
+import {
+  Editor,
+  createBasicExtensions,
+  createDataExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  outliner,
+} from '@dxos/react-ui-editor';
+
+import { type ComponentProps } from './types';
+
+export const TasksContainer = ({ space }: ComponentProps) => {
+  const { themeMode } = useThemeContext();
+  const [document] = useQuery(space, Filter.type(Markdown.Document));
+  if (!document?.content.target) {
+    return null;
+  }
+
+  return (
+    <>
+      <Toolbar.Root classNames='border-b border-subduedSeparator'>
+        <h2>{Obj.getLabel(document)}</h2>
+      </Toolbar.Root>
+      <Editor
+        id={document.id}
+        text={document.content.target}
+        classNames='h-full p-2 overflow-hidden'
+        extensions={[
+          // TODO(burdon): Create util.
+          createDataExtensions({ id: document.id, text: createDocAccessor(document.content.target, ['content']) }),
+          createBasicExtensions({ readOnly: false }),
+          createMarkdownExtensions(),
+          createThemeExtensions({ themeMode }),
+          outliner(),
+        ]}
+      />
+    </>
+  );
+};

package/src/stories/components/TokenManagerContainer.tsx

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { meta } from '@dxos/plugin-token-manager';
+
+export const TokenManagerContainer = () => {
+  const data = useMemo(() => ({ subject: `${meta.id}/space-settings` }), []);
+
+  return <Surface role='article' data={data} limit={1} />;
+};

package/src/stories/components/TriggersContainer.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Effect } from 'effect';
+import React from 'react';
+
+import { Filter } from '@dxos/echo';
+import { FunctionTrigger, TriggerDispatcher } from '@dxos/functions';
+import { AutomationPanel } from '@dxos/plugin-automation';
+import { type Space, useQuery } from '@dxos/react-client/echo';
+import { Input, Toolbar, useAsyncState } from '@dxos/react-ui';
+import { useTranslation } from '@dxos/react-ui';
+
+import { useComputeRuntimeCallback } from '../../hooks';
+import { meta } from '../../meta';
+
+import type { ComponentProps } from './types';
+
+export const TriggersContainer = ({ space }: ComponentProps) => {
+  const { t } = useTranslation(meta.id);
+  const { triggers, isRunning, start, stop } = useTriggerRuntimeControls(space);
+  return (
+    <div className='flex flex-col p-2'>
+      <Toolbar.Root>
+        <Input.Root>
+          <div>{isRunning ? t('trigger dispatcher running') : t('trigger dispatcher stopped')}</div>
+          <Input.Switch classNames='mis-2 mie-2' checked={isRunning} onCheckedChange={isRunning ? stop : start} />
+        </Input.Root>
+      </Toolbar.Root>
+
+      <AutomationPanel classNames='p-2' space={space} />
+    </div>
+  );
+};
+
+interface TriggerRuntimeControls {
+  triggers: FunctionTrigger[];
+  isRunning: boolean;
+  start: () => void;
+  stop: () => void;
+}
+
+export const useTriggerRuntimeControls = (space: Space): TriggerRuntimeControls => {
+  const triggers = useQuery(space, Filter.type(FunctionTrigger));
+
+  const [isRunningState, setIsRunningState] = useAsyncState(
+    useComputeRuntimeCallback(space, () => TriggerDispatcher.pipe(Effect.map((t) => t.running))),
+  );
+
+  const start = useComputeRuntimeCallback(
+    space,
+    Effect.fnUntraced(function* () {
+      const dispatcher = yield* TriggerDispatcher;
+      yield* dispatcher.start();
+      setIsRunningState(true);
+    }),
+  );
+
+  const stop = useComputeRuntimeCallback(
+    space,
+    Effect.fnUntraced(function* () {
+      const dispatcher = yield* TriggerDispatcher;
+      yield* dispatcher.stop();
+      setIsRunningState(false);
+    }),
+  );
+
+  return {
+    triggers,
+    isRunning: isRunningState ?? false,
+    start: () => void start(),
+    stop: () => void stop(),
+  };
+};