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

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

@@ -2,67 +2,57 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin, Capabilities, useCapabilities, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { capabilities } from '@dxos/assistant-testing';
+import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { ChessPlugin } from '@dxos/plugin-chess';
 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 { withLayout, withTheme } from '@dxos/storybook-utils';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { Toolbox, type ToolboxProps } from './Toolbox';
 import { translations } from '../../translations';
 
+import { Toolbox, type ToolboxProps } from './Toolbox';
+
 const DefaultStory = (props: ToolboxProps) => {
-  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-  return (
-    <Toolbox
-      {...props}
-      artifacts={artifactDefinitions}
-      classNames='w-[30rem] h-[15rem] rounded-sm border border-separator py-1'
-    />
-  );
+  return <Toolbox {...props} classNames='h-[15rem] w-[30rem] py-1 rounded-xs border border-separator' />;
 };
 
-const meta: Meta<typeof Toolbox> = {
-  title: 'plugins/plugin-assistant/Toolbox',
-  component: Toolbox,
+const meta = {
+  title: 'plugins/plugin-assistant/components/Toolbox',
+  component: Toolbox as any,
   render: DefaultStory,
   decorators: [
+    withTheme(),
     withPluginManager({
       plugins: [
+        ...corePlugins(),
         ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        SpacePlugin(),
-        SettingsPlugin(),
-        IntentPlugin(),
         ChessPlugin(),
         MapPlugin(),
         TablePlugin(),
       ],
       capabilities,
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'centered',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = Meta<typeof Toolbox>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/Toolbox/Toolbox.tsx

@@ -2,109 +2,79 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useState, useEffect, Fragment, type FC } from 'react';
+import React, { type FC, Fragment, useEffect, useState } from 'react';
 
-import { parseToolName, type Tool } from '@dxos/ai';
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
-import { type ArtifactDefinition } from '@dxos/blueprints';
 import { type Blueprint } from '@dxos/blueprints';
-import { type Ref } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
+import { type Database, type Ref } from '@dxos/echo';
+import { Function } from '@dxos/functions';
 import { log } from '@dxos/log';
-import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type ChatProcessor } from '../../hooks';
-import { meta } from '../../meta';
-import { createToolsFromService } from '../../tools';
+import { Filter, useQuery } from '@dxos/react-client/echo';
+import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { type AiChatProcessor } from '../../processor';
 import { ServiceType } from '../../types';
 
 export type ToolboxProps = ThemedClassName<{
-  blueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
-  artifacts?: ArtifactDefinition[];
-  services?: { service: ServiceType; tools: Tool[] }[];
-  functions?: FunctionType[];
+  services?: { service: ServiceType }[];
+  functions?: Function.Function[];
+  // TODO(burdon): Combine into single array.
+  blueprints?: readonly Blueprint.Blueprint[];
   activeBlueprints?: readonly Ref.Ref<Blueprint.Blueprint>[];
-  striped?: boolean;
 }>;
 
-export const Toolbox = ({
-  classNames,
-  artifacts,
-  functions,
-  services,
-  blueprints,
-  activeBlueprints,
-  striped,
-}: ToolboxProps) => {
-  const { t } = useTranslation(meta.id);
-
+export const Toolbox = ({ classNames, functions, services, blueprints, activeBlueprints }: ToolboxProps) => {
   return (
-    <div className={mx('flex flex-col overflow-y-auto box-content', classNames)}>
-      {blueprints && blueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={blueprints.map(({ target }) => ({
-            name: target?.name ?? '',
-            description: target?.description ?? '',
-            subitems: target?.tools.map((toolId) => ({ name: `∙ ${parseToolName(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {activeBlueprints && activeBlueprints.length > 0 && (
-        <Section
-          title='Blueprints'
-          items={activeBlueprints.map(({ target }) => ({
-            name: target?.name ?? '',
-            description: target?.description ?? '',
-            subitems: target?.tools.map((toolId) => ({ name: `∙ ${parseToolName(toolId)}` })),
-          }))}
-        />
-      )}
-
-      {artifacts && artifacts.length > 0 && (
-        <Section
-          title='Artifacts'
-          items={artifacts.map(({ name, description, tools }) => ({
-            name,
-            description,
-            subitems: tools.map(({ name, description }) => ({ name: `∙ ${parseToolName(name)}`, description })),
-          }))}
-        />
-      )}
-
-      {services && services.length > 0 && (
-        <Section
-          title='Services'
-          items={services.map(({ service: { serviceId, name, description }, tools }) => ({
-            name: name ?? serviceId,
-            description,
-            subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
-          }))}
-        />
-      )}
-
-      {functions && functions.length > 0 && (
-        <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
-      )}
-
-      {!blueprints?.length &&
-        !activeBlueprints?.length &&
-        !artifacts?.length &&
-        !services?.length &&
-        !functions?.length && <div>{t('no tools')}</div>}
-    </div>
+    <ScrollArea.Root thin orientation='vertical'>
+      <ScrollArea.Viewport classNames={classNames}>
+        {blueprints && blueprints.length > 0 && (
+          <Section
+            title='Blueprints'
+            items={blueprints.map(({ name, description, tools }) => ({
+              name,
+              description,
+              subitems: tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+            }))}
+          />
+        )}
+
+        {activeBlueprints && activeBlueprints.length > 0 && (
+          <Section
+            title='Blueprints'
+            items={activeBlueprints.map(({ target }) => ({
+              name: target?.name ?? '',
+              description: target?.description ?? '',
+              subitems: target?.tools.map((toolId) => ({ name: `∙ ${safeToolId(toolId)}` })),
+            }))}
+          />
+        )}
+
+        {services && services.length > 0 && (
+          <Section
+            title='Services'
+            items={services.map(({ service: { serviceId, name, description } }) => ({
+              name: name ?? serviceId,
+              description,
+              // subitems: tools.map(({ name, description }) => ({ name: `∙ ${name}`, description })),
+            }))}
+          />
+        )}
+
+        {functions && functions.length > 0 && (
+          <Section title='Functions' items={functions.map(({ name, description }) => ({ name, description }))} />
+        )}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
   );
 };
 
-const Section: FC<{
+type SectionProps = {
   title: string;
   items: { name: string; description?: string; subitems?: { name: string; description?: string }[] }[];
   striped?: boolean;
-}> = ({ title, items, striped }) => {
+};
+
+const Section = ({ title, items, striped }: SectionProps) => {
   const stripeClassNames = 'odd:bg-neutral-50 dark:odd:bg-neutral-800';
   const gridClassNames = 'grid grid-cols-[8rem_1fr]';
   const subGridClassNames = mx('col-span-full grid grid-cols-subgrid text-xs px-2', striped && stripeClassNames);
@@ -134,39 +104,39 @@ const Section: FC<{
   );
 };
 
-export type ToolboxContainerProps = ThemedClassName<{
-  space?: Space;
-  processor?: ChatProcessor;
+export type ToolboxPanelProps = ThemedClassName<{
+  db?: Database.Database;
+  processor?: AiChatProcessor;
 }>;
 
-export const ToolboxContainer = ({ classNames, space, processor }: ToolboxContainerProps) => {
-  // Plugin artifacts.
-  const artifactDefinitions = useCapabilities(Capabilities.ArtifactDefinition);
-
+export const ToolboxPanel = ({ classNames, db, processor }: ToolboxPanelProps) => {
   // Registered services.
-  const services = useQuery(space, Filter.type(ServiceType));
-  const [serviceTools, setServiceTools] = useState<{ service: ServiceType; tools: Tool[] }[]>([]);
+  const services = useQuery(db, Filter.type(ServiceType));
+  const [serviceTools, setServiceTools] = useState<{ service: ServiceType }[]>([]);
   useEffect(() => {
     log('creating service tools...', { services: services.length });
     queueMicrotask(async () => {
-      const tools = await Promise.all(
-        services.map(async (service) => ({ service, tools: await createToolsFromService(service) })),
-      );
-
-      setServiceTools(tools);
+      // TODO(burdon): Fix.
+      // const tools = await Promise.all(
+      //   services.map(async (service) => ({ service, tools: await createToolsFromService(service) })),
+      // );
+      // setServiceTools(tools);
     });
   }, [services]);
 
   // Deployed functions.
-  const functions = useQuery(space, Filter.type(FunctionType));
+  const functions = useQuery(db, Filter.type(Function.Function));
 
   return (
     <Toolbox
       classNames={classNames}
-      blueprints={processor?.context.blueprints.value}
-      artifacts={artifactDefinitions}
+      blueprints={processor?.context.getBlueprints()}
       services={serviceTools}
       functions={functions}
     />
   );
 };
+
+const safeToolId = (name: string) => {
+  return name.split('_').pop();
+};

package/src/components/Typewriter/AssistantToolbar.tsx

@@ -0,0 +1,161 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import * as Effect from 'effect/Effect';
+import type * as Runtime from 'effect/Runtime';
+import React, { useState } from 'react';
+
+import { runInRuntime } from '@dxos/effect';
+import { log } from '@dxos/log';
+import { Button, Icon, Input, ThemeProvider } from '@dxos/react-ui';
+
+export type AssistantToolbarProps = {
+  view: EditorView;
+  from: number;
+  to: number;
+  runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
+};
+
+export const AssistantToolbar = ({ view, from, to, runtime }: AssistantToolbarProps) => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showPromptInput, setShowPromptInput] = useState(false);
+  const [customPrompt, setCustomPrompt] = useState('');
+
+  const runEffect = async (text: string, prompt: string) => {
+    setIsProcessing(true);
+    try {
+      const newText = await runInRuntime(
+        runtime,
+        Effect.gen(function* () {
+          // Construct meaningful system prompt context
+          const response = yield* LanguageModel.generateText({
+            prompt: `${prompt}:\n"${text}"`,
+          });
+          return response.text;
+        }),
+      );
+
+      // Apply change - check if selection is still valid/same?
+      // For simple demo, we just apply to the passed from/to, but ideally we check current selection.
+      // We can just rely on from/to passed as props, assuming the toolbar unmounts if selection changes.
+      view.dispatch({
+        changes: { from, to, insert: newText },
+      });
+    } catch (e) {
+      log.error('Assistant action failed', { error: e });
+    } finally {
+      setIsProcessing(false);
+      setShowPromptInput(false);
+    }
+  };
+
+  const currentText = view.state.sliceDoc(from, to);
+
+  const handleRegenerate = () => {
+    void runEffect(
+      currentText,
+      'You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Re-write the following text to be more clear and concise, keep the same meaning.',
+    );
+  };
+
+  const handleCasual = () => handleChangeTone('casual');
+  const handleFormal = () => handleChangeTone('formal');
+
+  const handleChangeTone = (tone: 'formal' | 'casual') => {
+    void runEffect(
+      currentText,
+      `You are a typewriting agent. Agent only outputs the result; one version; no explanation or formatting. Rewrite the following text to be more ${tone}`,
+    );
+  };
+
+  const handleEditWithPrompt = () => {
+    if (!customPrompt) return;
+    void runEffect(currentText, customPrompt);
+  };
+
+  return (
+    <ThemeProvider>
+      {showPromptInput ? (
+        <div
+          className='flex items-center gap-2 p-1 bg-white/90 dark:bg-neutral-800/90 backdrop-blur-md rounded-full shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          <Input.Root>
+            <Input.TextInput
+              placeholder='Instruction...'
+              value={customPrompt}
+              onChange={(e) => setCustomPrompt(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleEditWithPrompt();
+                if (e.key === 'Escape') setShowPromptInput(false);
+                e.stopPropagation();
+              }}
+              autoFocus
+              classNames='border-none bg-transparent focus-visible:ring-0 p-1 text-sm min-w-[200px]'
+            />
+          </Input.Root>
+          <Button
+            variant='ghost'
+            classNames='p-1 min-h-0 h-6 w-6 rounded-full'
+            onClick={handleEditWithPrompt}
+            disabled={!customPrompt || isProcessing}
+          >
+            <Icon icon='ph--arrows-clockwise--regular' classNames={isProcessing ? 'animate-spin' : ''} />
+          </Button>
+        </div>
+      ) : (
+        <div
+          className='flex items-center gap-1 p-1 bg-white/50 dark:bg-neutral-800/50 backdrop-blur-md rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 animate-in fade-in zoom-in-95 duration-150 mt-2'
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          <div className='flex items-center gap-1'>
+            <Button
+              variant='ghost'
+              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleCasual}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--caret-left--regular' size={4} />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Casual</span>
+            </Button>
+
+            <Button
+              variant='ghost'
+              classNames='flex flex-col items-center gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleRegenerate}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--arrows-clockwise--regular' size={4} classNames={isProcessing ? 'animate-spin' : ''} />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Different</span>
+            </Button>
+
+            <Button
+              variant='ghost'
+              classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+              onClick={handleFormal}
+              disabled={isProcessing}
+            >
+              <Icon icon='ph--caret-right--regular' size={4} />
+              <span className='text-[10px] leading-none text-neutral-500 font-medium'>Formal</span>
+            </Button>
+          </div>
+
+          <div className='w-px h-8 bg-neutral-200 dark:bg-neutral-700 mx-1' />
+
+          <Button
+            variant='ghost'
+            classNames='flex flex-col gap-1 p-1 h-auto w-auto rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700'
+            onClick={() => setShowPromptInput(true)}
+            disabled={isProcessing}
+          >
+            <Icon icon='ph--keyboard--regular' size={4} />
+            <span className='text-[10px] leading-none text-neutral-500 font-medium'>Instruct</span>
+          </Button>
+        </div>
+      )}
+    </ThemeProvider>
+  );
+};

package/src/components/Typewriter/Typewriter.stories.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type * as LanguageModel from '@effect/ai/LanguageModel';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as Layer from 'effect/Layer';
+import * as ManagedRuntime from 'effect/ManagedRuntime';
+import type * as Runtime from 'effect/Runtime';
+import React, { useEffect, useState } from 'react';
+
+import { AiService } from '@dxos/ai';
+import { AiServiceTestingPreset } from '@dxos/ai/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Typewriter } from './Typewriter';
+
+const meta: Meta<typeof Typewriter> = {
+  title: 'plugins/plugin-assistant/components/Typewriter',
+  component: Typewriter,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Typewriter>;
+
+const sampleText = `# The Future of Artificial Intelligence
+
+Artificial Intelligence (AI) has rapidly evolved from a theoretical concept to a transformative force reshaping industries, economies, and daily life. At its core, AI refers to the development of computer systems capable of performing tasks that typically require human intelligence, such as visual perception, speech recognition, decision-making, and language translation.
+
+## Machine Learning and Neural Networks
+
+The resurgence of AI in recent years is largely driven by advancements in machine learning (ML) and deep learning. Neural networks, inspired by the human brain's architecture, enable computers to learn from vast amounts of data. This has led to breakthroughs in areas like natural language processing (NLP), allowing models like GPT-4 to generate human-like text and code.
+
+## Ethical Considerations
+
+As AI becomes more autonomous, ethical concerns have moved to the forefront. Issues such as algorithmic bias, data privacy, and the potential displacement of jobs are critical topics of debate. Ensuring that AI systems are fair, transparent, and aligned with human values is essential for their sustainable development.
+
+## Conclusion
+
+The journey of AI is just beginning. With responsible innovation and global collaboration, AI has the potential to solve some of humanity's most pressing challenges, from climate change to personalized medicine.
+
+(try selecting some text to see the AI assistant, or wait for the proofreader to find the typo below)
+
+The quick brown fox jumps over teh lazy dog. i think this is cool.
+`;
+
+export const Default: Story = {
+  render: () => {
+    const [runtime, setRuntime] = useState<Runtime.Runtime<LanguageModel.LanguageModel>>();
+    useEffect(() => {
+      let disposed = false;
+      const rt = ManagedRuntime.make(
+        AiService.model('@anthropic/claude-haiku-4-5').pipe(
+          Layer.provide(AiServiceTestingPreset('edge-remote')),
+          Layer.orDie,
+        ),
+      );
+      queueMicrotask(async () => {
+        try {
+          if (disposed) {
+            return;
+          }
+          const runtime = await rt.runtime();
+          if (disposed) {
+            return;
+          }
+          setRuntime(runtime);
+        } catch (error) {
+          console.error('Failed to initialize runtime:', error);
+        }
+      });
+      return () => {
+        disposed = true;
+        void rt.dispose();
+      };
+    }, []);
+
+    if (!runtime) {
+      return <div>...Loading</div>;
+    }
+
+    return <Typewriter initialContent={sampleText} runtime={runtime} />;
+  },
+};

package/src/components/Typewriter/Typewriter.tsx

@@ -0,0 +1,54 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import type * as LanguageModel from '@effect/ai/LanguageModel';
+import type * as Runtime from 'effect/Runtime';
+import React, { useMemo, useRef } from 'react';
+
+import { DensityProvider, ThemeProvider } from '@dxos/react-ui';
+import { Editor, type EditorController } from '@dxos/react-ui-editor';
+import {
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+import { assistant } from './assistant-extension';
+
+export type TypewriterProps = {
+  initialContent?: string;
+  extensions?: Extension[];
+  runtime: Runtime.Runtime<LanguageModel.LanguageModel>;
+};
+
+export const Typewriter = ({ initialContent = '', extensions = [], runtime }: TypewriterProps) => {
+  const editorRef = useRef<EditorController>(null);
+  const extension = useMemo(
+    () => [
+      createBasicExtensions({ scrollPastEnd: true, search: true }),
+      createThemeExtensions({ syntaxHighlighting: true }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      assistant(runtime),
+      ...extensions,
+    ],
+    [runtime, extensions],
+  );
+
+  return (
+    <ThemeProvider>
+      <DensityProvider density='fine'>
+        <div className='w-full h-full grid overflow-hidden'>
+          <Editor.Root ref={editorRef}>
+            <Editor.Viewport>
+              <Editor.Content initialValue={initialContent} extensions={extension} />
+            </Editor.Viewport>
+          </Editor.Root>
+        </div>
+      </DensityProvider>
+    </ThemeProvider>
+  );
+};