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

package/src/hooks/useAppCommands.ts

@@ -0,0 +1,129 @@
+import { useCallback } from 'react';
+import type { SessionConfig } from '../features/config';
+import type { ConfigSessionOptions } from '../features/config/configSession';
+import { listModels, listProviders } from '../features/config';
+import {
+  applyProfileWithSession,
+  validateSessionConfig,
+} from '../features/config';
+import { findTheme, type ThemeDefinition } from '../features/theme';
+
+interface ItemFetchResult {
+  items: { id: string; label: string }[];
+  messages?: string[];
+}
+
+interface ConfigCommandResult {
+  handled: boolean;
+  nextConfig: SessionConfig;
+  messages: string[];
+}
+
+interface UseAppCommandsProps {
+  sessionConfig: SessionConfig;
+  setSessionConfig: (config: SessionConfig) => void;
+  themes: ThemeDefinition[];
+  setThemeBySlug: (slug: string) => void;
+  appendMessage: (role: 'user' | 'model' | 'system', text: string) => string;
+  createSession: (options: ConfigSessionOptions) => Promise<void>;
+}
+
+interface UseAppCommandsResult {
+  fetchModelItems: () => Promise<ItemFetchResult>;
+  fetchProviderItems: () => Promise<ItemFetchResult>;
+  applyTheme: (key: string) => void;
+  handleConfigCommand: (command: string) => Promise<ConfigCommandResult>;
+}
+
+export function useAppCommands({
+  sessionConfig,
+  setSessionConfig,
+  themes,
+  setThemeBySlug,
+  appendMessage,
+  createSession,
+}: UseAppCommandsProps): UseAppCommandsResult {
+  const fetchModelItems = useCallback(async (): Promise<ItemFetchResult> => {
+    const missing = validateSessionConfig(sessionConfig, {
+      requireModel: false,
+    });
+    if (missing.length > 0) {
+      return { items: [], messages: missing };
+    }
+    try {
+      const models = await listModels(sessionConfig);
+      const items = models.map((model) => ({
+        id: model.id,
+        label: model.name || model.id,
+      }));
+      return { items };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return { items: [], messages: [`Failed to load models: ${message}`] };
+    }
+  }, [sessionConfig]);
+
+  const fetchProviderItems = useCallback(async (): Promise<ItemFetchResult> => {
+    try {
+      const providers = await Promise.resolve(listProviders());
+      const items = providers.map((p) => ({ id: p.id, label: p.label }));
+      return { items };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return { items: [], messages: [`Failed to load providers: ${message}`] };
+    }
+  }, []);
+
+  const applyTheme = useCallback(
+    (key: string) => {
+      const match = findTheme(themes, key);
+      if (!match) {
+        appendMessage('system', `Theme not found: ${key}`);
+        return;
+      }
+      setThemeBySlug(match.slug);
+      appendMessage('system', `Theme set to ${match.name}`);
+    },
+    [appendMessage, setThemeBySlug, themes],
+  );
+
+  const handleConfigCommand = useCallback(
+    async (command: string): Promise<ConfigCommandResult> => {
+      const configResult = await applyProfileWithSession(
+        command,
+        sessionConfig,
+        {
+          workingDir: process.cwd(),
+        },
+      );
+      if (configResult.handled) {
+        setSessionConfig(configResult.nextConfig);
+        for (const msg of configResult.messages) {
+          appendMessage('system', msg);
+        }
+
+        // If profile was loaded successfully, create the session
+        if (configResult.sessionOptions) {
+          try {
+            appendMessage('system', 'Initializing session...');
+            await createSession(configResult.sessionOptions);
+            appendMessage('system', 'Session ready. You can now chat.');
+          } catch (error) {
+            const message =
+              error instanceof Error ? error.message : String(error);
+            appendMessage('system', `Failed to initialize session: ${message}`);
+          }
+        }
+      }
+      return configResult;
+    },
+    [appendMessage, sessionConfig, setSessionConfig, createSession],
+  );
+
+  return {
+    fetchModelItems,
+    fetchProviderItems,
+    applyTheme,
+    handleConfigCommand,
+  };
+}

package/src/hooks/useApprovalKeyboard.ts

@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState } from 'react';
+import { useKeyboard } from '@vybestack/opentui-react';
+import type { ToolApprovalOutcome } from '../ui/components/ChatLayout';
+import { getLogger } from '../lib/logger';
+
+const logger = getLogger('nui:approval-keyboard');
+
+/** Approval options in order */
+const APPROVAL_OPTIONS: ToolApprovalOutcome[] = [
+  'allow_once',
+  'allow_always',
+  'cancel',
+];
+
+interface UseApprovalKeyboardOptions {
+  /** Whether approval is currently active */
+  isActive: boolean;
+  /** Whether "allow always" option is available */
+  canAllowAlways: boolean;
+  /** Callback when user selects an option */
+  onSelect: (outcome: ToolApprovalOutcome) => void;
+  /** Callback when user cancels (Esc) */
+  onCancel: () => void;
+}
+
+interface UseApprovalKeyboardResult {
+  /** Currently selected index */
+  selectedIndex: number;
+  /** Total number of options */
+  optionCount: number;
+}
+
+/**
+ * Hook to handle keyboard navigation for inline tool approval.
+ * Captures arrow keys and enter when approval is active.
+ */
+export function useApprovalKeyboard(
+  options: UseApprovalKeyboardOptions,
+): UseApprovalKeyboardResult {
+  const { isActive, canAllowAlways, onSelect, onCancel } = options;
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Use refs to avoid stale closures in keyboard handler
+  const isActiveRef = useRef(isActive);
+  const canAllowAlwaysRef = useRef(canAllowAlways);
+  const onSelectRef = useRef(onSelect);
+  const onCancelRef = useRef(onCancel);
+  const selectedIndexRef = useRef(selectedIndex);
+
+  // Keep refs in sync
+  useEffect(() => {
+    isActiveRef.current = isActive;
+  }, [isActive]);
+  useEffect(() => {
+    canAllowAlwaysRef.current = canAllowAlways;
+  }, [canAllowAlways]);
+  useEffect(() => {
+    onSelectRef.current = onSelect;
+  }, [onSelect]);
+  useEffect(() => {
+    onCancelRef.current = onCancel;
+  }, [onCancel]);
+  useEffect(() => {
+    selectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+
+  // Get available options based on canAllowAlways
+  const availableOptions = canAllowAlways
+    ? APPROVAL_OPTIONS
+    : APPROVAL_OPTIONS.filter((o) => o !== 'allow_always');
+
+  const optionCount = availableOptions.length;
+
+  // Reset selection when approval becomes active
+  useEffect(() => {
+    if (isActive) {
+      setSelectedIndex(0);
+    }
+  }, [isActive]);
+
+  // Use useKeyboard hook to intercept keys when approval is active
+  useKeyboard((key) => {
+    logger.debug('key received', key.name, 'isActive:', isActiveRef.current);
+    if (!isActiveRef.current) return;
+
+    const currentCanAllowAlways = canAllowAlwaysRef.current;
+    const currentOptions = currentCanAllowAlways
+      ? APPROVAL_OPTIONS
+      : APPROVAL_OPTIONS.filter((o) => o !== 'allow_always');
+    const currentOptionCount = currentOptions.length;
+
+    let handled = false;
+
+    switch (key.name) {
+      case 'up':
+        setSelectedIndex((prev) =>
+          prev > 0 ? prev - 1 : currentOptionCount - 1,
+        );
+        handled = true;
+        break;
+      case 'down':
+        setSelectedIndex((prev) =>
+          prev < currentOptionCount - 1 ? prev + 1 : 0,
+        );
+        handled = true;
+        break;
+      case 'return':
+      case 'kpenter': {
+        const outcome = currentOptions[selectedIndexRef.current];
+        logger.debug(
+          'Enter pressed',
+          'selectedIndex:',
+          selectedIndexRef.current,
+          'outcome:',
+          outcome,
+        );
+        onSelectRef.current(outcome);
+        handled = true;
+        break;
+      }
+      case 'escape':
+        logger.debug('Escape pressed, calling onCancel');
+        onCancelRef.current();
+        handled = true;
+        break;
+      case '1':
+        logger.debug('1 pressed, selecting allow_once');
+        onSelectRef.current('allow_once');
+        handled = true;
+        break;
+      case '2':
+        if (currentCanAllowAlways) {
+          onSelectRef.current('allow_always');
+        } else {
+          onSelectRef.current('cancel');
+        }
+        handled = true;
+        break;
+      case '3':
+        if (currentCanAllowAlways) {
+          onSelectRef.current('cancel');
+          handled = true;
+        }
+        break;
+    }
+
+    if (handled) {
+      key.preventDefault();
+    }
+  });
+
+  return {
+    selectedIndex,
+    optionCount,
+  };
+}

package/src/hooks/useChatStore.test.ts

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useChatStore } from './useChatStore';
+
+describe('useChatStore message handling', () => {
+  let idCounter = 0;
+  const makeId = () => `test-${idCounter++}`;
+
+  it('should append a system message', () => {
+    const { result } = renderHook(() => useChatStore(makeId));
+
+    act(() => {
+      result.current.appendMessage('system', 'System notification');
+    });
+
+    expect(result.current.entries).toHaveLength(1);
+    expect(result.current.entries[0]).toMatchObject({
+      kind: 'message',
+      role: 'system',
+      text: 'System notification',
+    });
+  });
+
+  it('should append a model message', () => {
+    const { result } = renderHook(() => useChatStore(makeId));
+
+    act(() => {
+      result.current.appendMessage('model', 'Model response');
+    });
+
+    expect(result.current.entries).toHaveLength(1);
+    expect(result.current.entries[0]).toMatchObject({
+      kind: 'message',
+      role: 'model',
+      text: 'Model response',
+    });
+  });
+
+  it('should store messages with correct role', () => {
+    const { result } = renderHook(() => useChatStore(makeId));
+
+    act(() => {
+      result.current.appendMessage('user', 'User input');
+      result.current.appendMessage('model', 'Model response');
+      result.current.appendMessage('thinking', 'Model thinking');
+      result.current.appendMessage('system', 'System message');
+    });
+
+    expect(result.current.entries).toHaveLength(4);
+    const messages = result.current.entries.filter((e) => e.kind === 'message');
+    expect(messages[0].role).toBe('user');
+    expect(messages[1].role).toBe('model');
+    expect(messages[2].role).toBe('thinking');
+    expect(messages[3].role).toBe('system');
+  });
+
+  it('should append text to an existing message', () => {
+    const { result } = renderHook(() => useChatStore(makeId));
+
+    let messageId: string;
+    act(() => {
+      messageId = result.current.appendMessage('model', 'First line');
+    });
+
+    act(() => {
+      result.current.appendToMessage(messageId!, '\nSecond line');
+    });
+
+    expect(result.current.entries).toHaveLength(1);
+    const message = result.current.entries[0];
+    expect(message.kind).toBe('message');
+    expect((message as { text: string }).text).toBe('First line\nSecond line');
+  });
+
+  it('should return the message id from appendMessage', () => {
+    const { result } = renderHook(() => useChatStore(makeId));
+
+    let messageId: string;
+    act(() => {
+      messageId = result.current.appendMessage('user', 'Test message');
+    });
+
+    expect(messageId!).toBeDefined();
+    expect(typeof messageId!).toBe('string');
+    expect(result.current.entries[0].id).toBe(messageId!);
+  });
+
+  it('should clear all entries and reset counts', () => {
+    const { result } = renderHook(() => useChatStore(makeId));
+
+    // Add some entries and update counts
+    act(() => {
+      result.current.appendMessage('user', 'First message');
+      result.current.appendMessage('model', 'Response');
+      result.current.setPromptCount(5);
+      result.current.setResponderWordCount(100);
+    });
+
+    expect(result.current.entries).toHaveLength(2);
+    expect(result.current.promptCount).toBe(5);
+    expect(result.current.responderWordCount).toBe(100);
+
+    // Clear everything
+    act(() => {
+      result.current.clearEntries();
+    });
+
+    expect(result.current.entries).toHaveLength(0);
+    expect(result.current.promptCount).toBe(0);
+    expect(result.current.responderWordCount).toBe(0);
+  });
+});

package/src/hooks/useChatStore.ts

@@ -0,0 +1,252 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback, useState } from 'react';
+import type { MessageRole } from '../ui/components/messages';
+import type { ToolStatus, ToolConfirmationType } from '../types/events';
+import type { ToolCallConfirmationDetails } from '@vybestack/llxprt-code-core';
+
+type Role = MessageRole;
+/**
+ * Stream state represents whether the system is waiting for user input or busy with LLM operations.
+ * - "idle": Ready for user input
+ * - "busy": Processing (streaming from model, executing tools, or waiting for tool responses)
+ */
+type StreamState = 'idle' | 'busy';
+
+interface ChatMessage {
+  id: string;
+  kind: 'message';
+  role: Role;
+  text: string;
+}
+
+interface ToolBlockLegacy {
+  id: string;
+  kind: 'tool';
+  lines: string[];
+  isBatch: boolean;
+  scrollable?: boolean;
+  maxHeight?: number;
+  streaming?: boolean;
+}
+
+interface ToolCall {
+  id: string;
+  kind: 'toolcall';
+  /** The tool call ID from the backend */
+  callId: string;
+  name: string;
+  params: Record<string, unknown>;
+  status: ToolStatus;
+  /** Tool output after execution */
+  output?: string;
+  /** Error message if failed */
+  errorMessage?: string;
+  /** Confirmation details if awaiting approval */
+  confirmation?: {
+    confirmationType: ToolConfirmationType;
+    question: string;
+    preview: string;
+    canAllowAlways: boolean;
+    /** Full confirmation details from CoreToolScheduler (includes diff for edits) */
+    coreDetails?: ToolCallConfirmationDetails;
+  };
+}
+
+type ToolBlock = ToolBlockLegacy | ToolCall;
+
+type ChatEntry = ChatMessage | ToolBlock;
+
+type StateSetter<T> = Dispatch<SetStateAction<T>>;
+
+export type {
+  Role,
+  StreamState,
+  ChatMessage,
+  ToolBlock,
+  ToolBlockLegacy,
+  ToolCall,
+  ChatEntry,
+  StateSetter,
+};
+
+export interface UseChatStoreReturn {
+  entries: ChatEntry[];
+  appendMessage: (role: Role, text: string) => string;
+  appendToMessage: (id: string, text: string) => void;
+  appendToolBlock: (tool: {
+    lines: string[];
+    isBatch: boolean;
+    scrollable?: boolean;
+    maxHeight?: number;
+    streaming?: boolean;
+  }) => string;
+  appendToolCall: (
+    callId: string,
+    name: string,
+    params: Record<string, unknown>,
+  ) => string;
+  updateToolCall: (
+    callId: string,
+    update: Partial<Omit<ToolCall, 'id' | 'kind' | 'callId'>>,
+  ) => void;
+  findToolCallByCallId: (callId: string) => ToolCall | undefined;
+  clearEntries: () => void;
+  promptCount: number;
+  setPromptCount: StateSetter<number>;
+  responderWordCount: number;
+  setResponderWordCount: StateSetter<number>;
+  streamState: StreamState;
+  setStreamState: StateSetter<StreamState>;
+  updateToolBlock: (
+    id: string,
+    mutate: (block: ToolBlock) => ToolBlock,
+  ) => void;
+}
+
+export function useChatStore(makeId: () => string): UseChatStoreReturn {
+  const [entries, setEntries] = useState<ChatEntry[]>([]);
+  const [promptCount, setPromptCount] = useState(0);
+  const [responderWordCount, setResponderWordCount] = useState(0);
+  const [streamState, setStreamState] = useState<StreamState>('idle');
+
+  const appendMessage = useCallback(
+    (role: Role, text: string): string => {
+      const id = makeId();
+      setEntries((prev) => [
+        ...prev,
+        {
+          id,
+          kind: 'message',
+          role,
+          text,
+        },
+      ]);
+      return id;
+    },
+    [makeId],
+  );
+
+  const appendToMessage = useCallback((id: string, text: string): void => {
+    setEntries((prev) =>
+      prev.map((entry) => {
+        if (entry.kind !== 'message' || entry.id !== id) {
+          return entry;
+        }
+        return { ...entry, text: entry.text + text };
+      }),
+    );
+  }, []);
+
+  const appendToolBlock = useCallback(
+    (tool: {
+      lines: string[];
+      isBatch: boolean;
+      scrollable?: boolean;
+      maxHeight?: number;
+      streaming?: boolean;
+    }) => {
+      const id = makeId();
+      setEntries((prev) => [
+        ...prev,
+        {
+          id,
+          kind: 'tool',
+          lines: tool.lines,
+          isBatch: tool.isBatch,
+          scrollable: tool.scrollable,
+          maxHeight: tool.maxHeight,
+          streaming: tool.streaming,
+        },
+      ]);
+      return id;
+    },
+    [makeId],
+  );
+
+  const appendToolCall = useCallback(
+    (callId: string, name: string, params: Record<string, unknown>): string => {
+      const id = makeId();
+      setEntries((prev) => [
+        ...prev,
+        {
+          id,
+          kind: 'toolcall',
+          callId,
+          name,
+          params,
+          status: 'pending' as const,
+        },
+      ]);
+      return id;
+    },
+    [makeId],
+  );
+
+  const updateToolCall = useCallback(
+    (
+      callId: string,
+      update: Partial<Omit<ToolCall, 'id' | 'kind' | 'callId'>>,
+    ) => {
+      setEntries((prev) =>
+        prev.map((item) => {
+          if (item.kind !== 'toolcall' || item.callId !== callId) {
+            return item;
+          }
+          return { ...item, ...update };
+        }),
+      );
+    },
+    [],
+  );
+
+  const findToolCallByCallId = useCallback(
+    (callId: string): ToolCall | undefined => {
+      return entries.find(
+        (entry): entry is ToolCall =>
+          entry.kind === 'toolcall' && entry.callId === callId,
+      );
+    },
+    [entries],
+  );
+
+  const updateToolBlock = useCallback(
+    (id: string, mutate: (block: ToolBlock) => ToolBlock) => {
+      setEntries((prev) =>
+        prev.map((item) => {
+          if (
+            (item.kind !== 'tool' && item.kind !== 'toolcall') ||
+            item.id !== id
+          ) {
+            return item;
+          }
+          return mutate(item);
+        }),
+      );
+    },
+    [],
+  );
+
+  const clearEntries = useCallback(() => {
+    setEntries([]);
+    setPromptCount(0);
+    setResponderWordCount(0);
+  }, []);
+
+  return {
+    entries,
+    appendMessage,
+    appendToMessage,
+    appendToolBlock,
+    appendToolCall,
+    updateToolCall,
+    findToolCallByCallId,
+    clearEntries,
+    promptCount,
+    setPromptCount,
+    responderWordCount,
+    setResponderWordCount,
+    streamState,
+    setStreamState,
+    updateToolBlock,
+  };
+}