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

package/src/hooks/useInputManager.ts

@@ -0,0 +1,99 @@
+import type { RefObject, Dispatch, SetStateAction } from 'react';
+import { useCallback, useState } from 'react';
+import type { TextareaRenderable } from '@vybestack/opentui-core';
+import type { Role } from './useChatStore';
+
+type StateSetter<T> = Dispatch<SetStateAction<T>>;
+
+const MIN_INPUT_LINES = 1;
+const MAX_INPUT_LINES = 10;
+
+function clampInputLines(value: number): number {
+  return Math.min(MAX_INPUT_LINES, Math.max(MIN_INPUT_LINES, value));
+}
+
+export interface UseInputManagerReturn {
+  inputLineCount: number;
+  enforceInputLineBounds: () => void;
+  handleSubmit: () => Promise<void>;
+  handleTabComplete: () => void;
+}
+
+export function useInputManager(
+  textareaRef: RefObject<TextareaRenderable | null>,
+  appendMessage: (role: Role, text: string) => string,
+  setPromptCount: StateSetter<number>,
+  setAutoFollow: StateSetter<boolean>,
+  startStreamingResponder: (prompt: string) => Promise<void>,
+  refreshCompletion: () => void,
+  clearCompletion: () => void,
+  applyCompletion: () => void,
+  handleCommand: (command: string) => Promise<boolean>,
+  recordHistory: (prompt: string) => void,
+): UseInputManagerReturn {
+  const [inputLineCount, setInputLineCount] = useState(MIN_INPUT_LINES);
+
+  const enforceInputLineBounds = useCallback(() => {
+    const editor = textareaRef.current;
+    if (editor == null) {
+      return;
+    }
+    const clamped = clampInputLines(editor.lineCount);
+    setInputLineCount(clamped);
+    refreshCompletion();
+  }, [refreshCompletion, textareaRef]);
+
+  const handleSubmit = useCallback(async () => {
+    const editor = textareaRef.current;
+    if (editor == null) {
+      return;
+    }
+    const raw = editor.plainText.trimEnd();
+    if (raw.trim().length === 0) {
+      return;
+    }
+    const trimmed = raw.trim();
+    if (await handleCommand(trimmed)) {
+      recordHistory(raw);
+      editor.clear();
+      setInputLineCount(MIN_INPUT_LINES);
+      setAutoFollow(true);
+      clearCompletion();
+      editor.submit();
+      return;
+    }
+    if (trimmed === '/quit') {
+      process.exit(0);
+    }
+    recordHistory(raw);
+    appendMessage('user', raw);
+    setPromptCount((count) => count + 1);
+    editor.clear();
+    setInputLineCount(MIN_INPUT_LINES);
+    setAutoFollow(true);
+    clearCompletion();
+    editor.submit();
+    await startStreamingResponder(trimmed);
+  }, [
+    appendMessage,
+    clearCompletion,
+    handleCommand,
+    recordHistory,
+    setAutoFollow,
+    setPromptCount,
+    startStreamingResponder,
+    textareaRef,
+  ]);
+
+  const handleTabComplete = useCallback(() => {
+    applyCompletion();
+    refreshCompletion();
+  }, [applyCompletion, refreshCompletion]);
+
+  return {
+    inputLineCount,
+    enforceInputLineBounds,
+    handleSubmit,
+    handleTabComplete,
+  };
+}

package/src/hooks/useKeyboardHandlers.ts

@@ -0,0 +1,130 @@
+import type { KeyEvent, TextareaRenderable } from '@vybestack/opentui-core';
+import type { RefObject } from 'react';
+import { useKeyboard } from '@vybestack/opentui-react';
+import { useCallback, useEffect, useRef } from 'react';
+import { getLogger } from '../lib/logger';
+
+const logger = getLogger('nui:keyboard');
+
+function isEnterKey(key: KeyEvent): boolean {
+  // Don't match linefeed (\n / shift+enter) - let textarea handle it as newline
+  return (
+    key.name === 'return' ||
+    key.name === 'enter' ||
+    key.name === 'kpenter' ||
+    key.name === 'kpplus' ||
+    key.sequence === '\r'
+  );
+}
+
+export function useEnterSubmit(onSubmit: () => void, isBlocked: boolean): void {
+  useKeyboard((key) => {
+    if (!isEnterKey(key) || isBlocked) return;
+    const hasModifier =
+      key.shift === true ||
+      key.ctrl === true ||
+      key.meta === true ||
+      key.option === true ||
+      key.super === true;
+    if (!hasModifier) {
+      key.preventDefault();
+      onSubmit();
+    }
+  });
+}
+
+export function useFocusAndMount(
+  textareaRef: RefObject<TextareaRenderable | null>,
+  mountedRef: RefObject<boolean>,
+): void {
+  useEffect(() => {
+    textareaRef.current?.focus();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [mountedRef, textareaRef]);
+}
+
+export function useSuggestionKeybindings(
+  suggestionCount: number,
+  moveSelection: (delta: number) => void,
+  handleTabComplete: () => void,
+  cancelAll: () => void,
+  clearInput: () => Promise<void>,
+  isBusy: () => boolean,
+  isInputEmpty: () => boolean,
+): void {
+  const hasSuggestions = suggestionCount > 0;
+
+  // Use refs to avoid stale closures
+  const cancelAllRef = useRef(cancelAll);
+  const clearInputRef = useRef(clearInput);
+  const isBusyRef = useRef(isBusy);
+  const isInputEmptyRef = useRef(isInputEmpty);
+
+  useEffect(() => {
+    cancelAllRef.current = cancelAll;
+  }, [cancelAll]);
+  useEffect(() => {
+    clearInputRef.current = clearInput;
+  }, [clearInput]);
+  useEffect(() => {
+    isBusyRef.current = isBusy;
+  }, [isBusy]);
+  useEffect(() => {
+    isInputEmptyRef.current = isInputEmpty;
+  }, [isInputEmpty]);
+
+  useKeyboard((key) => {
+    if (hasSuggestions && key.name === 'down') {
+      key.preventDefault();
+      moveSelection(1);
+    } else if (hasSuggestions && key.name === 'up') {
+      key.preventDefault();
+      moveSelection(-1);
+    } else if (hasSuggestions && key.name === 'tab') {
+      key.preventDefault();
+      handleTabComplete();
+    } else if (key.name === 'escape') {
+      const empty = isInputEmptyRef.current();
+      const busy = isBusyRef.current();
+      logger.debug('Escape pressed', 'inputEmpty:', empty, 'busy:', busy);
+
+      // First Esc clears input if it has text
+      // Second Esc (or first if input empty) cancels streaming/tools
+      if (!empty) {
+        logger.debug('Clearing input');
+        void clearInputRef.current();
+      } else if (busy) {
+        logger.debug('Cancelling all');
+        cancelAllRef.current();
+      }
+    }
+  });
+}
+
+export function useLineIdGenerator(): () => string {
+  const nextLineId = useRef(0);
+  return useCallback((): string => {
+    nextLineId.current += 1;
+    return `line-${nextLineId.current}`;
+  }, []);
+}
+
+export function useHistoryNavigation(
+  modalOpen: boolean,
+  suggestionCount: number,
+  handleHistoryKey: (direction: 'up' | 'down') => boolean,
+): void {
+  useKeyboard((key) => {
+    if (modalOpen || suggestionCount > 0 || key.eventType !== 'press') {
+      return;
+    }
+    if (key.name === 'up' || key.name === 'down') {
+      const handled = handleHistoryKey(key.name);
+      if (handled) {
+        key.preventDefault();
+      }
+    }
+  });
+}

package/src/hooks/useListNavigation.test.ts

@@ -0,0 +1,166 @@
+import { describe, expect, it } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useListNavigation, useFilteredList } from './useListNavigation';
+
+describe('useListNavigation', () => {
+  it('initializes with selectedIndex 0', () => {
+    const { result } = renderHook(() => useListNavigation(5));
+    expect(result.current.selectedIndex).toBe(0);
+  });
+
+  it('moves selection down within bounds', () => {
+    const { result } = renderHook(() => useListNavigation(5));
+    act(() => {
+      result.current.moveSelection(1);
+    });
+    expect(result.current.selectedIndex).toBe(1);
+  });
+
+  it('moves selection up within bounds', () => {
+    const { result } = renderHook(() => useListNavigation(5));
+    act(() => {
+      result.current.setSelectedIndex(3);
+    });
+    act(() => {
+      result.current.moveSelection(-1);
+    });
+    expect(result.current.selectedIndex).toBe(2);
+  });
+
+  it('clamps selection to 0 when moving below minimum', () => {
+    const { result } = renderHook(() => useListNavigation(5));
+    act(() => {
+      result.current.moveSelection(-5);
+    });
+    expect(result.current.selectedIndex).toBe(0);
+  });
+
+  it('clamps selection to length-1 when moving above maximum', () => {
+    const { result } = renderHook(() => useListNavigation(5));
+    act(() => {
+      result.current.moveSelection(10);
+    });
+    expect(result.current.selectedIndex).toBe(4);
+  });
+
+  it('handles empty list by clamping to 0', () => {
+    const { result } = renderHook(() => useListNavigation(0));
+    act(() => {
+      result.current.moveSelection(5);
+    });
+    expect(result.current.selectedIndex).toBe(0);
+  });
+
+  it('allows direct setting of selectedIndex', () => {
+    const { result } = renderHook(() => useListNavigation(5));
+    act(() => {
+      result.current.setSelectedIndex(3);
+    });
+    expect(result.current.selectedIndex).toBe(3);
+  });
+
+  it('updates when length changes', () => {
+    const { result, rerender } = renderHook(
+      ({ length }) => useListNavigation(length),
+      {
+        initialProps: { length: 5 },
+      },
+    );
+    act(() => {
+      result.current.setSelectedIndex(4);
+    });
+    expect(result.current.selectedIndex).toBe(4);
+
+    rerender({ length: 3 });
+    act(() => {
+      result.current.moveSelection(0);
+    });
+    expect(result.current.selectedIndex).toBe(2);
+  });
+});
+
+describe('useFilteredList', () => {
+  interface TestItem {
+    readonly id: string;
+    readonly name: string;
+  }
+
+  const items: TestItem[] = [
+    { id: '1', name: 'Apple' },
+    { id: '2', name: 'Banana' },
+    { id: '3', name: 'Cherry' },
+    { id: '4', name: 'Apricot' },
+  ];
+
+  const filterFn = (item: TestItem, query: string): boolean => {
+    return item.name.toLowerCase().includes(query.toLowerCase());
+  };
+
+  it('returns all items when query is empty', () => {
+    const { result } = renderHook(() => useFilteredList(items, '', filterFn));
+    expect(result.current.filteredItems).toHaveLength(4);
+    expect(result.current.filteredItems).toStrictEqual(items);
+  });
+
+  it('filters items based on query', () => {
+    const { result } = renderHook(() => useFilteredList(items, 'ap', filterFn));
+    expect(result.current.filteredItems).toHaveLength(2);
+    expect(result.current.filteredItems.map((item) => item.id)).toStrictEqual([
+      '1',
+      '4',
+    ]);
+  });
+
+  it('resets selectedIndex to 0 when query changes', () => {
+    const { result, rerender } = renderHook(
+      ({ query }) => useFilteredList(items, query, filterFn),
+      { initialProps: { query: '' } },
+    );
+
+    act(() => {
+      result.current.setSelectedIndex(2);
+    });
+    expect(result.current.selectedIndex).toBe(2);
+
+    rerender({ query: 'ban' });
+    expect(result.current.selectedIndex).toBe(0);
+  });
+
+  it('exposes moveSelection from useListNavigation', () => {
+    const { result } = renderHook(() => useFilteredList(items, 'ap', filterFn));
+    expect(result.current.selectedIndex).toBe(0);
+
+    act(() => {
+      result.current.moveSelection(1);
+    });
+    expect(result.current.selectedIndex).toBe(1);
+  });
+
+  it('clamps selection when filtered list shrinks', () => {
+    const { result, rerender } = renderHook(
+      ({ query }) => useFilteredList(items, query, filterFn),
+      { initialProps: { query: '' } },
+    );
+
+    act(() => {
+      result.current.setSelectedIndex(3);
+    });
+    expect(result.current.selectedIndex).toBe(3);
+
+    rerender({ query: 'ban' });
+    expect(result.current.selectedIndex).toBe(0);
+  });
+
+  it('memoizes filtered items', () => {
+    const { result, rerender } = renderHook(
+      ({ query }) => useFilteredList(items, query, filterFn),
+      { initialProps: { query: 'ap' } },
+    );
+
+    const firstResult = result.current.filteredItems;
+    rerender({ query: 'ap' });
+    const secondResult = result.current.filteredItems;
+
+    expect(firstResult).toBe(secondResult);
+  });
+});

package/src/hooks/useListNavigation.ts

@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useState } from 'react';
+
+export interface ListNavigationResult {
+  readonly selectedIndex: number;
+  readonly setSelectedIndex: (value: number) => void;
+  readonly moveSelection: (delta: number) => void;
+}
+
+export function useListNavigation(length: number): ListNavigationResult {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const moveSelection = (delta: number): void => {
+    setSelectedIndex((current) => {
+      if (length === 0) {
+        return 0;
+      }
+      const next = current + delta;
+      return Math.max(0, Math.min(next, length - 1));
+    });
+  };
+
+  return {
+    selectedIndex,
+    setSelectedIndex,
+    moveSelection,
+  };
+}
+
+export interface FilteredListResult<T> {
+  readonly filteredItems: T[];
+  readonly selectedIndex: number;
+  readonly setSelectedIndex: (value: number) => void;
+  readonly moveSelection: (delta: number) => void;
+}
+
+export function useFilteredList<T>(
+  items: T[],
+  query: string,
+  filterFn: (item: T, query: string) => boolean,
+): FilteredListResult<T> {
+  const filteredItems = useMemo(() => {
+    if (!query.trim()) {
+      return items;
+    }
+    return items.filter((item) => filterFn(item, query));
+  }, [items, query, filterFn]);
+
+  const { selectedIndex, setSelectedIndex, moveSelection } = useListNavigation(
+    filteredItems.length,
+  );
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query, setSelectedIndex]);
+
+  return {
+    filteredItems,
+    selectedIndex,
+    setSelectedIndex,
+    moveSelection,
+  };
+}

package/src/hooks/usePersistentHistory.ts

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import type { PersistentHistoryService } from '../features/chat/persistentHistory';
+import { createPersistentHistory } from '../features/chat/persistentHistory';
+import { getLogger } from '../lib/logger';
+
+const logger = getLogger('nui:use-persistent-history');
+
+export interface UsePersistentHistoryOptions {
+  /** Working directory for the session */
+  workingDir: string | null;
+  /** Session ID */
+  sessionId: string | null;
+}
+
+export interface UsePersistentHistoryReturn {
+  /** The persistent history service, null if not initialized */
+  service: PersistentHistoryService | null;
+  /** Whether the service is ready */
+  isReady: boolean;
+}
+
+/**
+ * Hook to manage persistent history service lifecycle.
+ * Initializes when workingDir and sessionId are provided,
+ * cleans up when they change or component unmounts.
+ */
+export function usePersistentHistory(
+  options: UsePersistentHistoryOptions,
+): UsePersistentHistoryReturn {
+  const { workingDir, sessionId } = options;
+  const [service, setService] = useState<PersistentHistoryService | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const serviceRef = useRef<PersistentHistoryService | null>(null);
+
+  useEffect(() => {
+    // Clean up previous service
+    if (serviceRef.current) {
+      logger.debug('Closing previous persistent history service');
+      serviceRef.current.close();
+      serviceRef.current = null;
+      setService(null);
+      setIsReady(false);
+    }
+
+    // Don't initialize without required params
+    if (!workingDir || !sessionId) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const initService = async () => {
+      logger.debug('Initializing persistent history', {
+        workingDir,
+        sessionId,
+      });
+      const newService = createPersistentHistory(workingDir, sessionId);
+
+      try {
+        await newService.initialize();
+
+        if (cancelled) {
+          newService.close();
+          return;
+        }
+
+        serviceRef.current = newService;
+        setService(newService);
+        setIsReady(true);
+        logger.debug('Persistent history ready', {
+          historyCount: newService.count,
+        });
+      } catch (err) {
+        logger.error('Failed to initialize persistent history:', String(err));
+        if (!cancelled) {
+          setService(null);
+          setIsReady(false);
+        }
+      }
+    };
+
+    void initService();
+
+    return () => {
+      cancelled = true;
+      if (serviceRef.current) {
+        serviceRef.current.close();
+        serviceRef.current = null;
+      }
+    };
+  }, [workingDir, sessionId]);
+
+  return { service, isReady };
+}

package/src/hooks/useScrollManagement.ts

@@ -0,0 +1,107 @@
+import type { RefObject, Dispatch, SetStateAction } from 'react';
+import { useCallback, useState } from 'react';
+import { useKeyboard } from '@vybestack/opentui-react';
+import type { ScrollBoxRenderable } from '@vybestack/opentui-core';
+
+type StateSetter<T> = Dispatch<SetStateAction<T>>;
+
+const SCROLL_STEP = 2;
+const PAGE_STEP = 10;
+
+export interface UseScrollManagementReturn {
+  autoFollow: boolean;
+  setAutoFollow: StateSetter<boolean>;
+  scrollBy: (delta: number) => void;
+  jumpToBottom: () => void;
+  handleContentChange: () => void;
+  handleMouseScroll: (event: { type: string }) => void;
+}
+
+export function useScrollManagement(
+  scrollRef: RefObject<ScrollBoxRenderable | null>,
+): UseScrollManagementReturn {
+  const [autoFollow, setAutoFollow] = useState(true);
+
+  const scrollToBottom = useCallback(() => {
+    const scrollBox = scrollRef.current;
+    if (scrollBox == null) {
+      return;
+    }
+    scrollBox.scrollTo({ x: 0, y: scrollBox.scrollHeight });
+  }, [scrollRef]);
+
+  const isAtBottom = useCallback((box: ScrollBoxRenderable): boolean => {
+    const viewportHeight = box.viewport.height;
+    return box.scrollTop + viewportHeight >= box.scrollHeight - 1;
+  }, []);
+
+  const scrollBy = useCallback(
+    (delta: number) => {
+      const scrollBox = scrollRef.current;
+      if (scrollBox == null) {
+        return;
+      }
+      scrollBox.scrollTo({ x: 0, y: scrollBox.scrollTop + delta });
+      if (delta < 0) {
+        setAutoFollow(false);
+        return;
+      }
+      setAutoFollow(isAtBottom(scrollBox));
+    },
+    [isAtBottom, scrollRef],
+  );
+
+  const jumpToBottom = useCallback(() => {
+    scrollToBottom();
+    setAutoFollow(true);
+  }, [scrollToBottom]);
+
+  const handleContentChange = useCallback(() => {
+    if (autoFollow) {
+      scrollToBottom();
+    }
+  }, [autoFollow, scrollToBottom]);
+
+  const handleMouseScroll = useCallback(
+    (event: { type: string }) => {
+      if (event.type !== 'scroll') {
+        return;
+      }
+      const scrollBox = scrollRef.current;
+      if (scrollBox == null) {
+        return;
+      }
+      setAutoFollow(isAtBottom(scrollBox));
+    },
+    [isAtBottom, scrollRef],
+  );
+
+  useKeyboard((key) => {
+    if (key.name === 'pageup' || (key.ctrl && key.name === 'up')) {
+      scrollBy(-PAGE_STEP);
+    } else if (key.name === 'pagedown' || (key.ctrl && key.name === 'down')) {
+      scrollBy(PAGE_STEP);
+    } else if (key.name === 'end') {
+      jumpToBottom();
+    } else if (key.name === 'home') {
+      setAutoFollow(false);
+      const scrollBox = scrollRef.current;
+      if (scrollBox != null) {
+        scrollBox.scrollTo({ x: 0, y: 0 });
+      }
+    } else if (key.ctrl && key.name === 'b') {
+      scrollBy(-SCROLL_STEP);
+    } else if (key.ctrl && key.name === 'f') {
+      scrollBy(SCROLL_STEP);
+    }
+  });
+
+  return {
+    autoFollow,
+    setAutoFollow,
+    scrollBy,
+    jumpToBottom,
+    handleContentChange,
+    handleMouseScroll,
+  };
+}

package/src/hooks/useSelectionClipboard.ts

@@ -0,0 +1,48 @@
+import { useCallback } from 'react';
+import clipboard from 'clipboardy';
+
+/**
+ * Hook that returns a handler for copying selected text to clipboard.
+ * Uses OSC 52 escape sequence for terminal clipboard support (including tmux).
+ */
+export function useSelectionClipboard(renderer: unknown): () => void {
+  return useCallback(() => {
+    const rendererWithSelection = renderer as {
+      getSelection?: () => { getSelectedText?: () => string | null } | null;
+    };
+    if (rendererWithSelection.getSelection == null) {
+      return;
+    }
+    const selection = rendererWithSelection.getSelection();
+    if (selection?.getSelectedText == null) {
+      return;
+    }
+    const text = selection.getSelectedText() ?? '';
+    if (text.length === 0) {
+      return;
+    }
+    // Send OSC 52 to terminal for clipboard
+    const osc = buildOsc52(text);
+    try {
+      const rendererWithWrite = renderer as {
+        writeOut?: (chunk: string) => void;
+      };
+      if (rendererWithWrite.writeOut != null) {
+        rendererWithWrite.writeOut(osc);
+      }
+    } catch {
+      // ignore renderer write failures
+    }
+    // Also copy via clipboardy as fallback
+    void clipboard.write(text).catch(() => undefined);
+  }, [renderer]);
+}
+
+function buildOsc52(text: string): string {
+  const base64 = Buffer.from(text).toString('base64');
+  const osc52 = `\u001b]52;c;${base64}\u0007`;
+  if (process.env.TMUX) {
+    return `\u001bPtmux;\u001b${osc52}\u001b\\`;
+  }
+  return osc52;
+}