aegiscode 3.1.7 → 3.1.10

package/src/ui/hooks/useInputBuffer.ts

@@ -0,0 +1,122 @@
+/**
+ * useInputBuffer - 输入缓冲区管理
+ * 
+ * 
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+interface InputBufferResult {
+  /** 当前输入值 */
+  value: string;
+  /** 光标位置 */
+  cursorPosition: number;
+  /** 设置输入值 */
+  setValue: (newValue: string) => void;
+  /** 设置光标位置 */
+  setCursorPosition: (pos: number) => void;
+  /** 在光标位置插入文本 */
+  insertAt: (text: string) => void;
+  /** 删除光标前的字符 */
+  deleteBackward: () => void;
+  /** 删除光标后的字符 */
+  deleteForward: () => void;
+  /** 清空输入 */
+  clear: () => void;
+  /** 移动光标到开头 */
+  moveToStart: () => void;
+  /** 移动光标到结尾 */
+  moveToEnd: () => void;
+  /** 获取当前引用（用于避免重渲染时的闭包问题） */
+  getRef: () => { value: string; cursorPosition: number };
+}
+
+/**
+ * 
+ */
+export const useInputBuffer = (
+  initialValue = '',
+  initialCursor = 0
+): InputBufferResult => {
+  const [value, setValueState] = useState(initialValue);
+  const [cursorPosition, setCursorPositionState] = useState(initialCursor);
+
+  // 稳定的引用，避免 resize 时重
+  const bufferRef = useRef({ value, cursorPosition });
+
+  useEffect(() => {
+    bufferRef.current = { value, cursorPosition };
+  }, [value, cursorPosition]);
+
+  const setValue = useCallback((newValue: string) => {
+    // 立即更新 ref，避免 setCursorPosition 使用旧的长度限
+    bufferRef.current.value = newValue;
+    setValueState(newValue);
+    // 确保光标不超出范
+    setCursorPositionState(prev => Math.min(prev, newValue.length));
+  }, []);
+
+  const setCursorPosition = useCallback((pos: number) => {
+    const newPos = Math.max(0, Math.min(pos, bufferRef.current.value.length));
+    // 立即更新 ref，保持同
+    bufferRef.current.cursorPosition = newPos;
+    setCursorPositionState(newPos);
+  }, []);
+
+  const insertAt = useCallback((text: string) => {
+    setValueState(prev => {
+      const pos = bufferRef.current.cursorPosition;
+      const newValue = prev.slice(0, pos) + text + prev.slice(pos);
+      return newValue;
+    });
+    setCursorPositionState(prev => prev + text.length);
+  }, []);
+
+  const deleteBackward = useCallback(() => {
+    if (bufferRef.current.cursorPosition > 0) {
+      setValueState(prev => {
+        const pos = bufferRef.current.cursorPosition;
+        return prev.slice(0, pos - 1) + prev.slice(pos);
+      });
+      setCursorPositionState(prev => prev - 1);
+    }
+  }, []);
+
+  const deleteForward = useCallback(() => {
+    if (bufferRef.current.cursorPosition < bufferRef.current.value.length) {
+      setValueState(prev => {
+        const pos = bufferRef.current.cursorPosition;
+        return prev.slice(0, pos) + prev.slice(pos + 1);
+      });
+    }
+  }, []);
+
+  const clear = useCallback(() => {
+    setValueState('');
+    setCursorPositionState(0);
+  }, []);
+
+  const moveToStart = useCallback(() => {
+    setCursorPositionState(0);
+  }, []);
+
+  const moveToEnd = useCallback(() => {
+    setCursorPositionState(bufferRef.current.value.length);
+  }, []);
+
+  const getRef = useCallback(() => bufferRef.current, []);
+
+  return {
+    value,
+    cursorPosition,
+    setValue,
+    setCursorPosition,
+    insertAt,
+    deleteBackward,
+    deleteForward,
+    clear,
+    moveToStart,
+    moveToEnd,
+    getRef,
+  };
+};

package/src/ui/hooks/useTerminalSize.ts

@@ -0,0 +1,68 @@
+/**
+ * useTerminalSize - Combined terminal size hook with RAF debounce + resize observer
+ *
+ * Consolidates useTerminalWidth and useTerminalHeight into a single hook
+ * to avoid duplicate RAF loops and ensure width/height are always in sync.
+ */
+
+import { useState, useEffect, useRef } from 'react';
+
+interface TerminalSize {
+  width: number;
+  height: number;
+}
+
+function getSize(): TerminalSize {
+  return {
+    width: process.stdout.columns || 80,
+    height: process.stdout.rows || 24,
+  };
+}
+
+const DEBOUNCE_MS = 80; // Wait 80ms after last resize event before updating
+
+export function useTerminalSize(): TerminalSize {
+  const [size, setSize] = useState(getSize);
+  const rafRef = useRef<number | null>(null);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const sizeRef = useRef(size);
+  sizeRef.current = size;
+
+  useEffect(() => {
+    const handleResize = () => {
+      // RAF-throttle: skip if a frame is already queued
+      if (rafRef.current !== null) return;
+
+      // Debounce: restart timer on each resize event
+      if (debounceTimerRef.current !== null) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        rafRef.current = requestAnimationFrame(() => {
+          const newSize = getSize();
+          const prev = sizeRef.current;
+          // Only update if either dimension changed
+          if (newSize.width !== prev.width || newSize.height !== prev.height) {
+            setSize(newSize);
+          }
+          rafRef.current = null;
+        });
+        debounceTimerRef.current = null;
+      }, DEBOUNCE_MS);
+    };
+
+    process.stdout.on('resize', handleResize);
+    return () => {
+      process.stdout.off('resize', handleResize);
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      if (debounceTimerRef.current !== null) clearTimeout(debounceTimerRef.current);
+    };
+  }, []);
+
+  return size;
+}
+
+// Re-export individual hooks for backward compatibility
+export const useTerminalWidth = (): number => useTerminalSize().width;
+export const useTerminalHeight = (): number => useTerminalSize().height;

package/src/ui/hooks/useTerminalWidth.ts

@@ -0,0 +1,5 @@
+/**
+ * Re-export from consolidated useTerminalSize hook for backward compatibility.
+ */
+
+export { useTerminalWidth, useTerminalHeight, useTerminalSize } from './useTerminalSize.js';

package/src/ui/hooks/useWindowedList.ts

@@ -0,0 +1,118 @@
+/**
+ * useWindowedList - Virtual list rendering hook for Ink
+ *
+ * Only renders items within the visible window, drastically reducing
+ * render cost for long message lists.
+ *
+ * Uses a fixed item height estimate for simplicity. Ink doesn't give us
+ * actual item heights, so we estimate based on content length.
+ */
+
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+
+interface WindowedListResult<T> {
+  /** The subset of items to render */
+  visibleItems: Array<{ item: T; index: number }>;
+  /** Total number of items */
+  totalItems: number;
+  /** Render padding at top to maintain scroll position */
+  topPadding: number;
+  /** Render padding at bottom */
+  bottomPadding: number;
+  /** Call when user scrolls up/down */
+  scrollTo: (index: number) => void;
+  /** Scroll to bottom (latest messages) */
+  scrollToBottom: () => void;
+  /** Whether we're pinned to bottom */
+  isAtBottom: boolean;
+  /** Ref to attach to scroll container */
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const ESTIMATED_ITEM_HEIGHT = 3; // rows per message average
+const OVERSCAN = 3; // extra items above/below viewport
+
+function calcVisibleCount(terminalHeight: number): number {
+  const visibleHeight = Math.max(terminalHeight - 5, 5);
+  return Math.ceil(visibleHeight / ESTIMATED_ITEM_HEIGHT) + OVERSCAN * 2;
+}
+
+export function useWindowedList<T>(
+  items: T[],
+  terminalHeight: number,
+): WindowedListResult<T> {
+  const visibleCount = calcVisibleCount(terminalHeight);
+
+  const [scrollIndex, setScrollIndex] = useState<number>(() =>
+    Math.max(0, items.length - visibleCount),
+  );
+  const prevLenRef = useRef(items.length);
+  const isAtBottomRef = useRef(true);
+
+  // Track latest items length via ref to avoid callback recreations
+  const itemsLenRef = useRef(items.length);
+  itemsLenRef.current = items.length;
+
+  // Auto-scroll to bottom when new items arrive (if already at bottom)
+  useEffect(() => {
+    const prevLen = prevLenRef.current;
+    const currentLen = items.length;
+    if (currentLen > prevLen && isAtBottomRef.current) {
+      setScrollIndex(Math.max(0, currentLen - visibleCount));
+    }
+    prevLenRef.current = currentLen;
+  }, [items.length, visibleCount]);
+
+  const [committedScrollIndex, setCommittedScrollIndex] = useState(scrollIndex);
+
+  const isAtBottom = useMemo(
+    () => committedScrollIndex + visibleCount >= items.length,
+    [committedScrollIndex, visibleCount, items.length],
+  );
+
+  const scrollTo = useCallback((index: number) => {
+    const len = itemsLenRef.current;
+    const vCount = calcVisibleCount(terminalHeight);
+    const clamped = Math.max(0, Math.min(index, len - 1));
+    setScrollIndex(clamped);
+    setCommittedScrollIndex(clamped);
+    isAtBottomRef.current = clamped + vCount >= len;
+  }, [terminalHeight]);
+
+  const scrollToBottom = useCallback(() => {
+    const len = itemsLenRef.current;
+    const vCount = calcVisibleCount(terminalHeight);
+    const bottom = Math.max(0, len - vCount);
+    setScrollIndex(bottom);
+    setCommittedScrollIndex(bottom);
+    isAtBottomRef.current = true;
+  }, [terminalHeight]);
+
+  // Compute visible window
+  const startIndex = Math.max(0, committedScrollIndex - OVERSCAN);
+  const endIndex = Math.min(items.length, committedScrollIndex + visibleCount + OVERSCAN);
+
+  const visibleItems = useMemo(
+    () => items.slice(startIndex, endIndex).map((item, i) => ({
+      item,
+      index: startIndex + i,
+    })),
+    [items, startIndex, endIndex],
+  );
+
+  const topPadding = startIndex * ESTIMATED_ITEM_HEIGHT;
+  const bottomPadding = (items.length - endIndex) * ESTIMATED_ITEM_HEIGHT;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  return {
+    visibleItems,
+    totalItems: items.length,
+    topPadding,
+    bottomPadding,
+    scrollTo,
+    scrollToBottom,
+    isAtBottom,
+    containerRef,
+  } as any; // Type cast for Ink compatibility
+}