@dxos/plugin-assistant 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/components/ChatProgress/ChatProgress.tsx

@@ -1,56 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type Queue } from '@dxos/echo-db';
-import { ProgressBar, type ProgressBarProps, TextCrawl, useExecutionGraph } from '@dxos/react-ui-components';
-
-export type ChatProgressProps = {
-  traceQueue?: Queue;
-};
-
-/**
- * Displays execution progress from the space's invocation trace queue.
- */
-export const ChatProgress = ({ traceQueue }: ChatProgressProps) => {
-  const { commits } = useExecutionGraph(traceQueue, true);
-  const nodes = useMemo(() => commits.map((commit) => ({ id: commit.id, message: commit.message })), [commits]);
-  const lines = useMemo(() => commits.map((commit) => commit.message), [commits]);
-
-  const [index, setIndex] = useState<number | undefined>(undefined);
-  const handleSelect = useCallback<NonNullable<ProgressBarProps['onSelect']>>(({ index }) => {
-    setIndex((current) => {
-      return current === index ? undefined : index;
-    });
-  }, []);
-
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    return addEventListener(ref.current, 'keydown', (event) => {
-      switch (event.key) {
-        case 'ArrowLeft': {
-          setIndex((current) => (current === undefined || current <= 0 ? 0 : current - 1));
-          break;
-        }
-        case 'ArrowRight': {
-          setIndex((current) => (current === undefined || current >= nodes.length ? nodes.length - 1 : current + 1));
-          break;
-        }
-      }
-    });
-  }, [nodes.length]);
-
-  return (
-    <div role='none' tabIndex={0} ref={ref} className='flex flex-col outline-hidden'>
-      <ProgressBar nodes={nodes} index={index} onSelect={handleSelect} />
-      <TextCrawl classNames='ps-4 text-sm text-description' lines={lines} autoAdvance />
-    </div>
-  );
-};

package/src/components/ChatProgress/index.ts

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

package/src/components/ChatThread/ChatStream.stories.tsx

@@ -1,168 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useState, type CSSProperties } from 'react';
-
-import '@dxos/lit-ui';
-import { PublicKey } from '@dxos/keys';
-import { random } from '@dxos/random';
-import { Input, Toolbar } from '@dxos/react-ui';
-import { Panel } from '@dxos/react-ui';
-import {
-  MarkdownStream,
-  type MarkdownStreamController,
-  type MarkdownStreamProps,
-  textStream,
-} from '@dxos/react-ui-components';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { keyToFallback } from '@dxos/util';
-
-import { translations } from '../../translations';
-import { componentRegistry } from './registry';
-import THREAD_1 from './testing/thread-1.md?raw';
-
-random.seed(123);
-
-const userHue = keyToFallback(PublicKey.random()).hue;
-
-type TextStreamOptions = {
-  wordsPerChunk?: number;
-  chunkDelay?: number;
-  variance?: number;
-};
-
-const defaultStreamOptions: TextStreamOptions = {
-  wordsPerChunk: 5,
-  chunkDelay: 200,
-  variance: 0.5,
-};
-
-type DefaultStoryProps = MarkdownStreamProps & {
-  initialContent?: string;
-  streamOptions?: TextStreamOptions;
-};
-
-const DefaultStory = ({
-  initialContent,
-  content,
-  streamOptions = defaultStreamOptions,
-  debug: debugProp,
-  ...props
-}: DefaultStoryProps) => {
-  const [controller, setController] = useState<MarkdownStreamController | null>(null);
-  const [streaming, setStreaming] = useState(false);
-  const [debug, setDebug] = useState(debugProp);
-
-  useEffect(() => {
-    if (initialContent) {
-      void controller?.append(initialContent);
-    }
-  }, [controller, initialContent]);
-
-  useEffect(() => {
-    if (!controller || !streaming || !content) {
-      return;
-    }
-
-    let cancelled = false;
-    void (async () => {
-      for await (const chunk of textStream(content + '\n', streamOptions)) {
-        if (cancelled) {
-          break;
-        }
-
-        await controller.append(chunk);
-      }
-
-      setStreaming(false);
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [controller, content, streaming]);
-
-  const handleReset = useCallback(() => {
-    setStreaming(false);
-    void controller?.setContent('');
-  }, [controller]);
-
-  return (
-    <Panel.Root style={{ '--user-fill': `var(--color-${userHue}-fill)` } as CSSProperties}>
-      <Panel.Toolbar asChild>
-        <Toolbar.Root>
-          <Toolbar.IconButton
-            disabled={streaming}
-            icon='ph--play--regular'
-            iconOnly
-            label='Start'
-            onClick={() => setStreaming(true)}
-          />
-          <Toolbar.IconButton
-            disabled={!streaming}
-            icon='ph--stop--regular'
-            iconOnly
-            label='Stop'
-            onClick={() => setStreaming(false)}
-          />
-          <Toolbar.IconButton icon='ph--trash--regular' iconOnly label='Reset' onClick={handleReset} />
-          <Toolbar.Separator />
-          <Input.Root>
-            <Input.Label classNames='pr-1'>Debug</Input.Label>
-            <Input.Switch checked={debug} onCheckedChange={setDebug} />
-          </Input.Root>
-        </Toolbar.Root>
-      </Panel.Toolbar>
-      <Panel.Content>
-        <MarkdownStream {...props} debug={debug} ref={setController} />
-      </Panel.Content>
-    </Panel.Root>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-assistant/components/ChatStream',
-  render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'column' })],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    registry: componentRegistry,
-    initialContent: THREAD_1,
-    options: {
-      autoScroll: true,
-    },
-  },
-};
-
-export const Streaming: Story = {
-  args: {
-    registry: componentRegistry,
-    content: THREAD_1,
-    options: {
-      autoScroll: true,
-      wire: true,
-      cursor: true,
-    },
-  },
-};
-
-export const Debug: Story = {
-  args: {
-    initialContent: THREAD_1,
-    registry: componentRegistry,
-    content: THREAD_1,
-    debug: true,
-  },
-};

package/src/components/ChatThread/widgets/PromptWidget.ts

@@ -1,28 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { WidgetType } from '@codemirror/view';
-
-import { Domino } from '@dxos/ui';
-
-/**
- * Simple prompt widget.
- */
-export class PromptWidget extends WidgetType {
-  constructor(private text: string) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this.text === other.text;
-  }
-
-  /**
-   * NOTE: Container must set var based on user's identity.
-   */
-  override toDOM() {
-    const inner = Domino.of('div').classNames('px-3 py-1.5 bg-(--user-fill) rounded-xs').text(this.text);
-    return Domino.of('div').classNames('flex justify-end my-2').append(inner).root;
-  }
-}

package/src/components/Typewriter/AssistantToolbar.tsx

@@ -1,161 +0,0 @@
-//
-// 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' />
-              <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' 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' />
-              <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' />
-            <span className='text-[10px] leading-none text-neutral-500 font-medium'>Instruct</span>
-          </Button>
-        </div>
-      )}
-    </ThemeProvider>
-  );
-};

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

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

@@ -1,50 +0,0 @@
-//
-// 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 { 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>
-      <Editor.Root ref={editorRef}>
-        <Editor.Viewport>
-          <Editor.Content initialValue={initialContent} extensions={extension} />
-        </Editor.Viewport>
-      </Editor.Root>
-    </ThemeProvider>
-  );
-};

package/src/components/Typewriter/assistant-extension.tsx

@@ -1,141 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type Diagnostic, linter } from '@codemirror/lint';
-import { type Extension, StateField } from '@codemirror/state';
-import { EditorView, type Tooltip, showTooltip } from '@codemirror/view';
-import * as LanguageModel from '@effect/ai/LanguageModel';
-import * as Effect from 'effect/Effect';
-import * as Runtime from 'effect/Runtime';
-import { createElement } from 'react';
-import { createRoot } from 'react-dom/client';
-
-import { unwrapExit } from '@dxos/effect';
-import { log } from '@dxos/log';
-
-import { AssistantToolbar } from './AssistantToolbar';
-
-export const assistant = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>): Extension[] => {
-  return [
-    assistantState(runtime),
-    assistantLinter(runtime),
-    EditorView.baseTheme({
-      '.cm-tooltip-assistant': {
-        backgroundColor: 'transparent !important',
-        border: 'none !important',
-        padding: '0 !important',
-      },
-    }),
-  ];
-};
-
-//
-// Toolbar State & Tooltip
-//
-
-const assistantState = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>) =>
-  StateField.define<Tooltip | null>({
-    create: () => null,
-    update: (tooltip, tr): Tooltip | null => {
-      if (tr.selection || tr.docChanged) {
-        const { from, to } = tr.state.selection.main;
-        if (from === to) {
-          return null;
-        } // No selection
-
-        // Check if we should show tooltip
-        // We return a tooltip object
-        return {
-          pos: from,
-          above: false,
-          strictSide: true,
-          create: (view) => {
-            const dom = document.createElement('div');
-            dom.classList.add('cm-tooltip-assistant');
-            const root = createRoot(dom);
-            root.render(createElement(AssistantToolbar, { view, runtime, from, to }));
-
-            return {
-              dom,
-              destroy: () => {
-                // Delay unmount to allow animations if needed, but for now just cleanup
-                setTimeout(() => root.unmount(), 0);
-              },
-            };
-          },
-        };
-      }
-      return tooltip;
-    },
-    provide: (f) => showTooltip.from(f),
-  });
-
-//
-// Linter
-//
-
-const assistantLinter = (runtime: Runtime.Runtime<LanguageModel.LanguageModel>) =>
-  linter(async (view) => {
-    const text = view.state.doc.toString();
-    if (text.length < 10) {
-      return [];
-    }
-
-    // Run proofreading effect
-    const prompt = `Proofread the following text. Identify typos and simple grammar mistakes. Return ONLY a valid JSON array of objects with fields: "original" (string), "replacement" (string), "context" (string, 3-5 words around match). Text: \n\n${text}`;
-
-    // We mocked the model behavior in the story, but here we assume the model returns a string.
-    // In a real implementation we would parse the JSON.
-    // For this refactor, we just wire it up.
-
-    // NOTE: This runs on every doc view update that triggers linter. Linter is debounced by default (750ms).
-
-    try {
-      const result = unwrapExit(
-        await Effect.gen(function* () {
-          const generated = yield* LanguageModel.generateText({ prompt });
-          return generated.text;
-        }).pipe(Runtime.runPromiseExit(runtime)),
-      );
-
-      // Parse result - assuming simpler mock response format for now or we build a robust parser
-      // For the purpose of this task (UX demo), we can assume the mock returns a specific format or we parse it.
-      // Let's assume the mock returns a JSON string.
-
-      let suggestions: any[] = [];
-      try {
-        // Find JSON in response
-        const match = result.match(/\[.*\]/s);
-        if (match) {
-          suggestions = JSON.parse(match[0]);
-        }
-      } catch {}
-
-      const diagnostics: Diagnostic[] = [];
-      for (const s of suggestions) {
-        // Naive finding of position
-        const idx = text.indexOf(s.original);
-        if (idx !== -1) {
-          diagnostics.push({
-            from: idx,
-            to: idx + s.original.length,
-            severity: 'info',
-            message: `Suggestion: ${s.replacement}`,
-            actions: [
-              {
-                name: 'Apply',
-                apply: (view, from, to) => {
-                  view.dispatch({ changes: { from, to, insert: s.replacement } });
-                },
-              },
-            ],
-          });
-        }
-      }
-      return diagnostics;
-    } catch (error) {
-      log.catch(error);
-      return [];
-    }
-  });