@vybestack/llxprt-ui 0.7.0-nightly.251211.5750c518a

package/src/features/chat/responder.ts

@@ -0,0 +1,217 @@
+import { secureRandomBetween } from '../../lib/random';
+
+export interface ToolCallBlock {
+  readonly lines: string[];
+  readonly isBatch: boolean;
+  readonly scrollable?: boolean;
+  readonly maxHeight?: number;
+  readonly streaming?: boolean;
+}
+
+export interface ShellPlan {
+  readonly command: string;
+  readonly output: string[];
+  readonly maxHeight: number;
+}
+
+const OPENERS = [
+  'Camus shrugs at the sky,',
+  'Nietzsche laughs in the dark,',
+  'The void hums quietly while',
+  'A hedonist clinks a glass because',
+  'Sisyphus pauses mid-push as',
+  'Dionysus sings over static and',
+] as const;
+
+const DRIVERS = [
+  'meaning is negotiated then forgotten,',
+  'willpower tastes like rusted metal,',
+  'pleasure is an act of rebellion,',
+  'every rule is a rumor,',
+  'the abyss wants a conversation,',
+  'time is a joke with a long punchline,',
+] as const;
+
+const SPINS = [
+  'so I dance anyway.',
+  'yet we still buy coffee at dawn.',
+  'and the night market keeps buzzing.',
+  'because absurd joy is cheaper than despair.',
+  'while the sea keeps no memory.',
+  'so breath becomes a quiet manifesto.',
+] as const;
+
+export function buildResponderLine(): string {
+  return `${pick(OPENERS)} ${pick(DRIVERS)} ${pick(SPINS)}`;
+}
+
+const THOUGHTS = [
+  'I should tell the user about the abyss.',
+  'Perhaps hedonism is the answer.',
+  'Maybe the code hides a better metaphor.',
+  "I'd like to learn more about the codebase; maybe I'll send a tool call.",
+  'Is meaning just another branch to merge?',
+  'Should I warn them the void has opinions?',
+] as const;
+
+export function buildThinkingLine(): string {
+  return pick(THOUGHTS);
+}
+
+export function countWords(text: string): number {
+  const matches = text.trim().match(/\S+/g);
+  return matches ? matches.length : 0;
+}
+
+function pick<T>(items: readonly T[]): T {
+  return items[secureRandomBetween(0, items.length - 1)];
+}
+
+type ToolKind = 'ReadFile' | 'Glob' | 'SearchInFile';
+
+const SAMPLE_FILES = [
+  'src/app.tsx',
+  'src/modalShell.tsx',
+  'src/searchSelectModal.tsx',
+  'src/history.ts',
+  'scripts/check-limits.ts',
+];
+
+const SAMPLE_PATTERNS = [
+  'useState',
+  'Modal',
+  'stream',
+  'return',
+  'export function',
+  'const ',
+];
+
+export function maybeBuildToolCalls(): ToolCallBlock | null {
+  if (secureRandomBetween(0, 6) !== 0) {
+    return null;
+  }
+  const parallel = secureRandomBetween(0, 1) === 1;
+  const count = secureRandomBetween(1, 5);
+  const calls = Array.from({ length: count }, () =>
+    buildToolCallLines(randomToolKind()),
+  ).flat();
+  if (parallel) {
+    return {
+      lines: [
+        `[tool batch] ${count} calls`,
+        ...calls.map((line) => `  ${line}`),
+      ],
+      isBatch: true,
+    };
+  }
+  return { lines: calls, isBatch: false };
+}
+
+function buildToolCallLines(kind: ToolKind): string[] {
+  if (kind === 'ReadFile') {
+    const file = pick(SAMPLE_FILES);
+    const start = secureRandomBetween(3, 40);
+    const end = start + secureRandomBetween(2, 6);
+    return [
+      formatToolHeader(`ReadFile ${file} ${start}-${end}`),
+      `    ${start}: // simulated code line`,
+      `    ${start + 1}: // more simulated code`,
+      `    ${end}: // eof snippet`,
+    ];
+  }
+  if (kind === 'Glob') {
+    const pattern = pick(['./*.ts', './src/*.tsx', './**/*.ts']);
+    return [
+      formatToolHeader(`Glob ${pattern}`),
+      `    -> ${pick(SAMPLE_FILES)}`,
+      `    -> ${pick(SAMPLE_FILES)}`,
+    ];
+  }
+  const file = pick(SAMPLE_FILES);
+  const pattern = pick(SAMPLE_PATTERNS);
+  const first = secureRandomBetween(5, 60);
+  return [
+    formatToolHeader(`SearchInFile ${file} "${pattern}"`),
+    `    ${first}: match: ${pattern}()`,
+    `    ${first + secureRandomBetween(1, 10)}: match: ${pattern} // more`,
+  ];
+}
+
+function formatToolHeader(description: string): string {
+  return `[tool] ${description}`;
+}
+
+function randomToolKind(): ToolKind {
+  const kinds: ToolKind[] = ['ReadFile', 'Glob', 'SearchInFile'];
+  return kinds[secureRandomBetween(0, kinds.length - 1)];
+}
+
+const SHELL_COMMANDS = [
+  'npm run test',
+  'find . -name "*.ts"',
+  'git status --short',
+  'ls -la',
+  'npm run lint',
+];
+
+export function maybeBuildShellPlan(): ShellPlan | null {
+  if (secureRandomBetween(0, 5) !== 0) {
+    return null;
+  }
+  const command = pick(SHELL_COMMANDS);
+  const total = secureRandomBetween(24, 80);
+  const output: string[] = [];
+  for (let index = 0; index < total; index += 1) {
+    if (command.startsWith('find')) {
+      output.push(
+        `./src/${pick(['app.tsx', 'history.ts', 'modalShell.tsx', 'responder.ts'])}:${secureRandomBetween(1, 200)}`,
+      );
+    } else if (command.startsWith('npm run test')) {
+      output.push(randomTestLine(index));
+    } else if (command === 'npm run lint') {
+      output.push(randomLintLine(index));
+    } else if (command === 'git status --short') {
+      output.push(
+        `${pick(['M', 'A', '??'])} ${pick(['src/app.tsx', 'src/responder.ts', 'src/modalShell.tsx'])}`,
+      );
+    } else {
+      output.push(randomLsLine(index));
+    }
+  }
+  return { command, output, maxHeight: 20 };
+}
+
+function randomTestLine(index: number): string {
+  const parts = [
+    ` PASS  src/${pick(['app.test.ts', 'history.test.ts', 'suggestions.test.ts'])}`,
+    `  ✓ scenario ${index + 1} ${pick(['(2 ms)', '(4 ms)', '(1 ms)'])}`,
+    `  ✓ renders tool block ${index % 5} ${pick(['(snapshot)', '(dom)', '(cli)'])}`,
+    `  ✓ streaming chunk ${index}`,
+  ];
+  return pick(parts);
+}
+
+function randomLintLine(index: number): string {
+  return [
+    `src/${pick(['app.tsx', 'responder.ts', 'modalShell.tsx'])}:${secureRandomBetween(10, 200)}:${secureRandomBetween(2, 80)}  warning  ${pick(
+      [
+        'Unexpected console statement',
+        'Trailing spaces not allowed',
+        'Function has a complexity of 18',
+      ],
+    )}`,
+    `✖ ${index + 1} problem (0 errors, ${secureRandomBetween(1, 2)} warnings)`,
+  ][secureRandomBetween(0, 1)];
+}
+
+function randomLsLine(index: number): string {
+  const size = secureRandomBetween(1, 4096);
+  const name = pick([
+    'src',
+    'scripts',
+    'node_modules',
+    'README.md',
+    `file-${index}.ts`,
+  ]);
+  return `-rw-r--r--  1 user  staff  ${size.toString().padStart(6, ' ')} Dec  4 12:${(index % 60).toString().padStart(2, '0')} ${name}`;
+}

package/src/features/completion/completions.ts

@@ -0,0 +1,161 @@
+import type { TextareaRenderable } from '@vybestack/opentui-core';
+import { useCallback, useState, useRef, type RefObject } from 'react';
+import {
+  extractMentionQuery,
+  findMentionRange,
+  getSuggestions,
+  MAX_SUGGESTION_COUNT,
+} from './suggestions';
+import { extractSlashContext, getSlashSuggestions } from './slash';
+
+type CompletionMode = 'none' | 'mention' | 'slash';
+
+export interface CompletionSuggestion {
+  value: string;
+  description?: string;
+  insertText: string;
+  mode: Exclude<CompletionMode, 'none'>;
+  displayPrefix?: boolean;
+  hasChildren?: boolean;
+}
+
+const SLASH_SUGGESTION_LIMIT = 50;
+
+export function useCompletionManager(
+  textareaRef: RefObject<TextareaRenderable | null>,
+) {
+  const [suggestions, setSuggestions] = useState<CompletionSuggestion[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const slashContext = useRef<{ start: number; end: number } | null>(null);
+  const reset = useCallback(() => {
+    slashContext.current = null;
+    setSuggestions([]);
+    setSelectedIndex(0);
+  }, []);
+  const refresh = useCallback(() => {
+    const editor = textareaRef.current;
+    if (editor == null) {
+      return;
+    }
+    const text = editor.plainText;
+    const cursor = editor.cursorOffset;
+    const slash = extractSlashContext(text, cursor);
+    if (slash) {
+      slashContext.current = { start: slash.start, end: slash.end };
+      setSuggestions(buildSlashCompletions(slash.parts));
+      setSelectedIndex(0);
+      return;
+    }
+    const mention = extractMentionQuery(text, cursor);
+    if (mention !== null) {
+      slashContext.current = null;
+      setSuggestions(buildMentionCompletions(mention));
+      setSelectedIndex(0);
+      return;
+    }
+    reset();
+  }, [reset, textareaRef]);
+  const moveSelection = useCallback(
+    (delta: number) => {
+      if (suggestions.length === 0) {
+        return;
+      }
+      setSelectedIndex((prev) => {
+        const next = prev + delta;
+        if (next < 0) {
+          return 0;
+        }
+        if (next >= suggestions.length) {
+          return suggestions.length - 1;
+        }
+        return next;
+      });
+    },
+    [suggestions.length],
+  );
+  const applySelection = useCallback(() => {
+    const editor = textareaRef.current;
+    if (editor == null) {
+      return;
+    }
+    const current = suggestions.at(selectedIndex);
+    if (current == null) {
+      return;
+    }
+    if (current.mode === 'mention') {
+      applyMentionCompletion(editor, current);
+      reset();
+      return;
+    }
+    // current.mode === "slash" at this point
+    if (slashContext.current == null) {
+      return;
+    }
+    applySlashCompletion(editor, slashContext.current, current);
+    slashContext.current = null;
+    if (current.hasChildren ?? false) {
+      refresh();
+    } else {
+      reset();
+    }
+  }, [refresh, reset, selectedIndex, suggestions, textareaRef]);
+  return {
+    suggestions,
+    selectedIndex,
+    refresh,
+    clear: reset,
+    moveSelection,
+    applySelection,
+  };
+}
+
+function buildSlashCompletions(parts: string[]): CompletionSuggestion[] {
+  const isRoot = parts.length <= 1;
+  return getSlashSuggestions(parts, SLASH_SUGGESTION_LIMIT).map(
+    (suggestion) => ({
+      value: suggestion.value,
+      description: suggestion.description,
+      insertText: suggestion.fullPath,
+      mode: 'slash' as const,
+      displayPrefix: isRoot,
+      hasChildren: suggestion.hasChildren,
+    }),
+  );
+}
+
+function buildMentionCompletions(query: string): CompletionSuggestion[] {
+  return getSuggestions(query, MAX_SUGGESTION_COUNT).map((value) => ({
+    value,
+    insertText: value,
+    mode: 'mention' as const,
+  }));
+}
+
+function applyMentionCompletion(
+  editor: TextareaRenderable,
+  suggestion: CompletionSuggestion,
+): void {
+  const range = findMentionRange(editor.plainText, editor.cursorOffset);
+  if (!range) {
+    return;
+  }
+  const before = editor.plainText.slice(0, range.start);
+  const after = editor.plainText.slice(range.end);
+  const completion = `${suggestion.insertText} `;
+  const nextText = `${before}${completion}${after}`;
+  editor.setText(nextText);
+  editor.cursorOffset = (before + completion).length;
+}
+
+function applySlashCompletion(
+  editor: TextareaRenderable,
+  context: { start: number; end: number },
+  suggestion: CompletionSuggestion,
+): void {
+  const before = editor.plainText.slice(0, context.start);
+  const after = editor.plainText.slice(context.end);
+  const completion = `${suggestion.insertText} `;
+  const nextText = `${before}${completion}${after}`;
+  editor.setText(nextText);
+  editor.cursorOffset = (before + completion).length;
+}

package/src/features/completion/index.ts

@@ -0,0 +1,3 @@
+export * from './completions';
+export * from './suggestions';
+export * from './slash';

package/src/features/completion/slash.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import {
+  extractSlashContext,
+  getSlashSuggestions,
+  setProfileSuggestions,
+} from './slash';
+
+describe('slash suggestions', () => {
+  it('lists root commands on bare slash', () => {
+    const suggestions = getSlashSuggestions([], 5);
+    expect(suggestions.length).toBeGreaterThan(0);
+  });
+
+  it('prioritizes prefix match', () => {
+    const suggestions = getSlashSuggestions(['st'], 5);
+    expect(suggestions[0]?.value).toBe('stats');
+  });
+
+  it('returns children for stats', () => {
+    const suggestions = getSlashSuggestions(['stats', 'm'], 5);
+    expect(suggestions.map((s) => s.value)).toContain('model');
+  });
+
+  it('builds full path for stats child', () => {
+    const suggestion = getSlashSuggestions(['stats', 'mo'], 5).find(
+      (s) => s.value === 'model',
+    );
+    expect(suggestion?.fullPath).toBe('/stats model');
+  });
+
+  it('returns children for set', () => {
+    const suggestions = getSlashSuggestions(['set', 'emo'], 5);
+    expect(suggestions[0]?.value).toBe('emojifilter');
+  });
+
+  it('includes new config commands', () => {
+    const root = getSlashSuggestions(['b'], 10).map((s) => s.value);
+    expect(root).toContain('baseurl');
+    expect(getSlashSuggestions(['k'], 10).some((s) => s.value === 'key')).toBe(
+      true,
+    );
+  });
+
+  it('returns profile load suggestions', () => {
+    setProfileSuggestions(['synthetic', 'custom']);
+    const level1 = getSlashSuggestions(['profile', 'l'], 5);
+    expect(level1.some((s) => s.value === 'load')).toBe(true);
+    const level2 = getSlashSuggestions(['profile', 'load', 's'], 5);
+    expect(level2.some((s) => s.value === 'synthetic')).toBe(true);
+  });
+
+  it('returns grandchildren for set emojifilter', () => {
+    const suggestions = getSlashSuggestions(['set', 'emojifilter', 'a'], 5);
+    expect(suggestions.some((s) => s.value === 'auto')).toBe(true);
+  });
+
+  it('builds full path for deep set option', () => {
+    const suggestion = getSlashSuggestions(['set', 'emojifilter', 'a'], 5).find(
+      (s) => s.value === 'auto',
+    );
+    expect(suggestion?.fullPath).toBe('/set emojifilter auto');
+  });
+
+  it('returns empty after completing leaf with trailing space', () => {
+    const suggestions = getSlashSuggestions(
+      ['set', 'emojifilter', 'auto', ''],
+      5,
+    );
+    expect(suggestions).toHaveLength(0);
+  });
+});
+
+describe('extractSlashContext', () => {
+  it('extracts at start of line', () => {
+    const ctx = extractSlashContext('/st', 3);
+    expect(ctx?.parts).toStrictEqual(['st']);
+  });
+
+  it('returns null when not preceded by space boundary', () => {
+    expect(extractSlashContext('test/st', 6)).toBeNull();
+  });
+});