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

package/src/commands/ModelCommand.tsx

@@ -0,0 +1,102 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useCommand } from '../uicontext';
+import { SearchSelectModal } from '../ui/modals';
+import type { SearchItem } from '../ui/modals/types';
+import type { SessionConfig } from '../features/config';
+import type { ThemeDefinition } from '../features/theme';
+
+interface ModelCommandProps {
+  readonly fetchModelItems: () => Promise<{
+    items: SearchItem[];
+    messages?: string[];
+  }>;
+  readonly sessionConfig: SessionConfig;
+  readonly setSessionConfig: (config: SessionConfig) => void;
+  readonly appendMessage: (
+    role: 'user' | 'model' | 'system',
+    text: string,
+  ) => string;
+  readonly theme: ThemeDefinition;
+  readonly focusInput: () => void;
+}
+
+export function ModelCommand({
+  fetchModelItems,
+  sessionConfig,
+  setSessionConfig,
+  appendMessage,
+  theme,
+  focusInput,
+}: ModelCommandProps): React.ReactNode | null {
+  const { register } = useCommand();
+  const dialogClearRef = useRef<(() => void) | null>(null);
+  const [modalItems, setModalItems] = useState<SearchItem[]>([]);
+
+  const handleClose = useCallback((): void => {
+    if (dialogClearRef.current !== null) {
+      dialogClearRef.current();
+    }
+    focusInput();
+  }, [focusInput]);
+
+  const handleSelect = useCallback(
+    (item: SearchItem): void => {
+      setSessionConfig({ ...sessionConfig, model: item.id });
+      appendMessage('system', `Selected model: ${item.label}`);
+      if (dialogClearRef.current !== null) {
+        dialogClearRef.current();
+      }
+      focusInput();
+    },
+    [sessionConfig, setSessionConfig, appendMessage, focusInput],
+  );
+
+  const modal = useMemo(
+    () => (
+      <SearchSelectModal
+        title="Search Models"
+        noun="models"
+        items={modalItems}
+        alphabetical
+        footerHint="Tab to switch modes"
+        onClose={handleClose}
+        onSelect={handleSelect}
+        theme={theme}
+      />
+    ),
+    [modalItems, handleClose, handleSelect, theme],
+  );
+
+  useEffect(() => {
+    const cleanup = register([
+      {
+        name: '/model',
+        title: 'Select Model',
+        category: 'configuration',
+        onExecute: async (dialog) => {
+          const result = await fetchModelItems();
+          if (result.messages !== undefined && result.messages.length > 0) {
+            appendMessage('system', result.messages.join('\n'));
+          }
+          if (result.items.length === 0) {
+            return;
+          }
+
+          dialogClearRef.current = dialog.clear;
+          setModalItems(result.items);
+          dialog.replace(modal);
+        },
+      },
+    ]);
+
+    return cleanup;
+  }, [register, fetchModelItems, appendMessage, modal]);
+
+  return null;
+}

package/src/commands/ProviderCommand.tsx

@@ -0,0 +1,103 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useCommand } from '../uicontext';
+import { SearchSelectModal } from '../ui/modals';
+import type { SearchItem } from '../ui/modals/types';
+import type { SessionConfig } from '../features/config';
+import type { ThemeDefinition } from '../features/theme';
+
+interface ProviderCommandProps {
+  readonly fetchProviderItems: () => Promise<{
+    items: SearchItem[];
+    messages?: string[];
+  }>;
+  readonly sessionConfig: SessionConfig;
+  readonly setSessionConfig: (config: SessionConfig) => void;
+  readonly appendMessage: (
+    role: 'user' | 'model' | 'system',
+    text: string,
+  ) => string;
+  readonly theme: ThemeDefinition;
+  readonly focusInput: () => void;
+}
+
+export function ProviderCommand({
+  fetchProviderItems,
+  sessionConfig,
+  setSessionConfig,
+  appendMessage,
+  theme,
+  focusInput,
+}: ProviderCommandProps): React.ReactNode | null {
+  const { register } = useCommand();
+  const dialogClearRef = useRef<(() => void) | null>(null);
+  const [modalItems, setModalItems] = useState<SearchItem[]>([]);
+
+  const handleClose = useCallback((): void => {
+    if (dialogClearRef.current !== null) {
+      dialogClearRef.current();
+    }
+    focusInput();
+  }, [focusInput]);
+
+  const handleSelect = useCallback(
+    (item: SearchItem): void => {
+      const id = item.id.toLowerCase();
+      setSessionConfig({ ...sessionConfig, provider: id });
+      appendMessage('system', `Selected provider: ${item.label}`);
+      if (dialogClearRef.current !== null) {
+        dialogClearRef.current();
+      }
+      focusInput();
+    },
+    [sessionConfig, setSessionConfig, appendMessage, focusInput],
+  );
+
+  const modal = useMemo(
+    () => (
+      <SearchSelectModal
+        title="Select Provider"
+        noun="providers"
+        items={modalItems}
+        alphabetical
+        footerHint="Tab to switch modes"
+        onClose={handleClose}
+        onSelect={handleSelect}
+        theme={theme}
+      />
+    ),
+    [modalItems, handleClose, handleSelect, theme],
+  );
+
+  useEffect(() => {
+    const cleanup = register([
+      {
+        name: '/provider',
+        title: 'Select Provider',
+        category: 'configuration',
+        onExecute: async (dialog) => {
+          const result = await fetchProviderItems();
+          if (result.messages !== undefined && result.messages.length > 0) {
+            appendMessage('system', result.messages.join('\n'));
+          }
+          if (result.items.length === 0) {
+            return;
+          }
+
+          dialogClearRef.current = dialog.clear;
+          setModalItems(result.items);
+          dialog.replace(modal);
+        },
+      },
+    ]);
+
+    return cleanup;
+  }, [register, fetchProviderItems, appendMessage, modal]);
+
+  return null;
+}

package/src/commands/ThemeCommand.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCommand } from '../uicontext';
+import { ThemeModal } from '../ui/modals';
+import type { ThemeDefinition } from '../features/theme';
+
+interface ThemeCommandProps {
+  readonly themes: ThemeDefinition[];
+  readonly currentTheme: ThemeDefinition;
+  readonly onThemeSelect: (theme: ThemeDefinition) => void;
+  readonly appendMessage: (
+    role: 'user' | 'model' | 'system',
+    text: string,
+  ) => string;
+  readonly focusInput: () => void;
+}
+
+export function ThemeCommand({
+  themes,
+  currentTheme,
+  onThemeSelect,
+  appendMessage,
+  focusInput,
+}: ThemeCommandProps): React.ReactNode | null {
+  const { register } = useCommand();
+  const dialogClearRef = useRef<(() => void) | null>(null);
+
+  const handleClose = useCallback((): void => {
+    if (dialogClearRef.current !== null) {
+      dialogClearRef.current();
+    }
+    focusInput();
+  }, [focusInput]);
+
+  const handleSelect = useCallback(
+    (theme: ThemeDefinition): void => {
+      onThemeSelect(theme);
+      appendMessage('system', `Theme set to ${theme.name}`);
+    },
+    [onThemeSelect, appendMessage],
+  );
+
+  const modal = useMemo(
+    () => (
+      <ThemeModal
+        themes={themes}
+        current={currentTheme}
+        onClose={handleClose}
+        onSelect={handleSelect}
+      />
+    ),
+    [themes, currentTheme, handleClose, handleSelect],
+  );
+
+  useEffect(() => {
+    const cleanup = register([
+      {
+        name: '/theme',
+        title: 'Select Theme',
+        category: 'appearance',
+        onExecute: (dialog) => {
+          dialogClearRef.current = dialog.clear;
+          dialog.replace(modal);
+        },
+      },
+    ]);
+
+    return cleanup;
+  }, [register, modal]);
+
+  return null;
+}

package/src/features/chat/history.ts

@@ -0,0 +1,178 @@
+import type { TextareaRenderable } from '@vybestack/opentui-core';
+import { useCallback, useEffect, useRef, type RefObject } from 'react';
+import type { PersistentHistoryService } from './persistentHistory';
+
+type Direction = 'up' | 'down';
+
+export interface UsePromptHistoryOptions {
+  /** Optional persistent history service for cross-session history */
+  persistentHistory?: PersistentHistoryService | null;
+}
+
+/**
+ * Calculate which line the cursor is on (0-indexed) based on cursor offset
+ */
+function getCursorLine(text: string, cursorOffset: number): number {
+  const textBeforeCursor = text.slice(0, cursorOffset);
+  const newlineMatches = textBeforeCursor.match(/\n/g);
+  return newlineMatches ? newlineMatches.length : 0;
+}
+
+/**
+ * Get the total number of lines in text (1-indexed count)
+ */
+function getLineCount(text: string): number {
+  const newlineMatches = text.match(/\n/g);
+  return (newlineMatches ? newlineMatches.length : 0) + 1;
+}
+
+export function usePromptHistory(
+  textareaRef: RefObject<TextareaRenderable | null>,
+  options?: UsePromptHistoryOptions,
+): {
+  record: (prompt: string) => void;
+  handleHistoryKey: (direction: Direction) => boolean;
+} {
+  // Session entries are stored oldest-first for easy navigation
+  const sessionEntries = useRef<string[]>([]);
+  // Combined history: persistent (newest-first reversed) + session entries
+  const combinedEntries = useRef<string[]>([]);
+  const index = useRef<number>(0);
+  const lastKey = useRef<{ direction: Direction; time: number } | null>(null);
+  const persistentHistoryRef = useRef(options?.persistentHistory);
+  // Draft text saved when user starts navigating history
+  const draft = useRef<string | null>(null);
+  // Track if we're currently navigating history
+  const isNavigating = useRef<boolean>(false);
+
+  // Keep ref in sync
+  useEffect(() => {
+    persistentHistoryRef.current = options?.persistentHistory;
+  }, [options?.persistentHistory]);
+
+  // Load persistent history on mount or when service changes
+  useEffect(() => {
+    const persistent = options?.persistentHistory;
+    if (persistent) {
+      // Persistent history is newest-first, reverse it for our oldest-first array
+      const persistentEntries = [...persistent.getHistory()].reverse();
+      combinedEntries.current = [
+        ...persistentEntries,
+        ...sessionEntries.current,
+      ];
+      index.current = combinedEntries.current.length;
+    } else {
+      combinedEntries.current = [...sessionEntries.current];
+      index.current = combinedEntries.current.length;
+    }
+  }, [options?.persistentHistory]);
+
+  const record = useCallback((prompt: string) => {
+    // Add to session entries
+    sessionEntries.current.push(prompt);
+
+    // Update combined entries
+    const persistent = persistentHistoryRef.current;
+    if (persistent) {
+      const persistentEntries = [...persistent.getHistory()].reverse();
+      combinedEntries.current = [
+        ...persistentEntries,
+        ...sessionEntries.current,
+      ];
+    } else {
+      combinedEntries.current = [...sessionEntries.current];
+    }
+    index.current = combinedEntries.current.length;
+
+    // Reset navigation state
+    draft.current = null;
+    isNavigating.current = false;
+
+    // Record to persistent storage (async, fire-and-forget)
+    if (persistent) {
+      void persistent.record(prompt);
+    }
+  }, []);
+
+  const applyEntry = useCallback(
+    (direction: Direction) => {
+      if (combinedEntries.current.length === 0) {
+        return false;
+      }
+      if (textareaRef.current == null) {
+        return false;
+      }
+
+      const currentText = textareaRef.current.plainText;
+      const cursorOffset = textareaRef.current.cursorOffset;
+      const cursorLine = getCursorLine(currentText, cursorOffset);
+      const totalLines = getLineCount(currentText);
+
+      // Check cursor position requirement:
+      // - For "up": cursor must be on the first line (line 0)
+      // - For "down": cursor must be on the last line
+      if (direction === 'up' && cursorLine !== 0) {
+        return false;
+      }
+      if (direction === 'down' && cursorLine !== totalLines - 1) {
+        return false;
+      }
+
+      // Save draft when starting to navigate up
+      if (!isNavigating.current && direction === 'up') {
+        draft.current = currentText;
+        isNavigating.current = true;
+      }
+
+      if (direction === 'up') {
+        index.current = Math.max(0, index.current - 1);
+      } else {
+        index.current = Math.min(
+          combinedEntries.current.length,
+          index.current + 1,
+        );
+      }
+
+      // When navigating down past the end, restore the draft
+      if (index.current >= combinedEntries.current.length) {
+        const value = draft.current ?? '';
+        textareaRef.current.setText(value);
+        textareaRef.current.cursorOffset = value.length;
+        // Reset navigation state when back at draft
+        isNavigating.current = false;
+        return true;
+      }
+
+      const value = combinedEntries.current[index.current] ?? '';
+      textareaRef.current.setText(value);
+      textareaRef.current.cursorOffset = value.length;
+      return true;
+    },
+    [textareaRef],
+  );
+
+  const handleHistoryKey = useCallback(
+    (direction: Direction): boolean => {
+      // Down arrow: single press when navigating (on last line)
+      if (direction === 'down' && isNavigating.current) {
+        return applyEntry(direction);
+      }
+
+      // Up arrow: requires double-tap
+      const now = Date.now();
+      if (
+        lastKey.current?.direction === direction &&
+        now - lastKey.current.time < 400
+      ) {
+        const applied = applyEntry(direction);
+        lastKey.current = null;
+        return applied;
+      }
+      lastKey.current = { direction, time: now };
+      return false;
+    },
+    [applyEntry],
+  );
+
+  return { record, handleHistoryKey };
+}

package/src/features/chat/index.ts

@@ -0,0 +1,3 @@
+export * from './responder';
+export * from './history';
+export * from './persistentHistory';

package/src/features/chat/persistentHistory.ts

@@ -0,0 +1,102 @@
+import {
+  Logger,
+  MessageSenderType,
+  Storage,
+} from '@vybestack/llxprt-code-core';
+import { getLogger } from '../../lib/logger';
+
+const debug = getLogger('nui:persistent-history');
+
+/**
+ * Service for persistent prompt history that shares data with llxprt-code.
+ * History is stored in ~/.llxprt/tmp/{project-hash}/logs.json
+ */
+export class PersistentHistoryService {
+  private logger: Logger | null = null;
+  private initialized = false;
+  private cachedHistory: string[] = [];
+
+  constructor(
+    private readonly workingDir: string,
+    private readonly sessionId: string,
+  ) {}
+
+  /**
+   * Initialize the history service. Must be called before using other methods.
+   */
+  async initialize(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+
+    try {
+      const storage = new Storage(this.workingDir);
+      this.logger = new Logger(this.sessionId, storage);
+      await this.logger.initialize();
+
+      // Load existing history
+      this.cachedHistory = await this.logger.getPreviousUserMessages();
+      debug.debug('Loaded history', 'count:', this.cachedHistory.length);
+
+      this.initialized = true;
+    } catch (err) {
+      debug.error('Failed to initialize persistent history:', String(err));
+      this.initialized = false;
+    }
+  }
+
+  /**
+   * Record a new prompt to persistent storage.
+   */
+  async record(prompt: string): Promise<void> {
+    if (!this.initialized || !this.logger) {
+      debug.warn('Cannot record: history service not initialized');
+      return;
+    }
+
+    try {
+      await this.logger.logMessage(MessageSenderType.USER, prompt);
+      // Add to cache (at the beginning since getPreviousUserMessages returns newest first)
+      this.cachedHistory.unshift(prompt);
+      debug.debug('Recorded prompt to history');
+    } catch (err) {
+      debug.error('Failed to record prompt:', String(err));
+    }
+  }
+
+  /**
+   * Get all previous user messages, newest first.
+   */
+  getHistory(): string[] {
+    return this.cachedHistory;
+  }
+
+  /**
+   * Get the number of history entries.
+   */
+  get count(): number {
+    return this.cachedHistory.length;
+  }
+
+  /**
+   * Close the history service.
+   */
+  close(): void {
+    if (this.logger) {
+      this.logger.close();
+      this.logger = null;
+    }
+    this.initialized = false;
+    this.cachedHistory = [];
+  }
+}
+
+/**
+ * Create a persistent history service for the given working directory.
+ */
+export function createPersistentHistory(
+  workingDir: string,
+  sessionId: string,
+): PersistentHistoryService {
+  return new PersistentHistoryService(workingDir, sessionId);
+}