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

package/src/hooks/useToolScheduler.ts

@@ -0,0 +1,432 @@
+import { useCallback, useState, useRef, useEffect } from 'react';
+import type { Config, ToolCallRequestInfo } from '@vybestack/llxprt-code-core';
+import {
+  CoreToolScheduler,
+  type ToolCall as CoreToolCall,
+  type CompletedToolCall,
+  type WaitingToolCall,
+  type ExecutingToolCall,
+  type CancelledToolCall,
+  type ToolCallConfirmationDetails,
+  type ToolConfirmationOutcome,
+} from '@vybestack/llxprt-code-core';
+import type { ToolStatus } from '../types/events';
+import { getLogger } from '../lib/logger';
+
+const logger = getLogger('nui:tool-scheduler');
+
+/**
+ * Tracked tool call with response submission state
+ */
+export type TrackedToolCall = CoreToolCall & {
+  responseSubmittedToModel?: boolean;
+};
+
+export type TrackedCompletedToolCall = CompletedToolCall & {
+  responseSubmittedToModel?: boolean;
+};
+
+export type TrackedCancelledToolCall = CancelledToolCall & {
+  responseSubmittedToModel?: boolean;
+};
+
+export type TrackedWaitingToolCall = WaitingToolCall & {
+  responseSubmittedToModel?: boolean;
+};
+
+export type TrackedExecutingToolCall = ExecutingToolCall & {
+  responseSubmittedToModel?: boolean;
+  liveOutput?: string;
+};
+
+/**
+ * Tool call display info for the UI
+ */
+export interface ToolCallDisplayInfo {
+  callId: string;
+  name: string;
+  displayName: string;
+  description: string;
+  status: ToolStatus;
+  output?: string;
+  errorMessage?: string;
+  confirmationDetails?: ToolCallConfirmationDetails;
+}
+
+export type ScheduleFn = (
+  request: ToolCallRequestInfo | ToolCallRequestInfo[],
+  signal: AbortSignal,
+) => void;
+
+export type MarkToolsAsSubmittedFn = (callIds: string[]) => void;
+export type CancelAllFn = () => void;
+export type RespondToConfirmationFn = (
+  callId: string,
+  outcome: ToolConfirmationOutcome,
+) => void;
+
+export interface UseToolSchedulerResult {
+  toolCalls: TrackedToolCall[];
+  schedule: ScheduleFn;
+  markToolsAsSubmitted: MarkToolsAsSubmittedFn;
+  cancelAll: CancelAllFn;
+  getToolDisplayInfo: () => ToolCallDisplayInfo[];
+  respondToConfirmation: RespondToConfirmationFn;
+}
+
+/**
+ * Map CoreToolScheduler status to UI ToolStatus
+ */
+function mapCoreStatusToToolStatus(status: CoreToolCall['status']): ToolStatus {
+  switch (status) {
+    case 'scheduled':
+      return 'pending';
+    case 'validating':
+      return 'executing';
+    case 'awaiting_approval':
+      return 'confirming';
+    case 'executing':
+      return 'executing';
+    case 'success':
+      return 'complete';
+    case 'error':
+      return 'error';
+    case 'cancelled':
+      return 'cancelled';
+    default:
+      return 'pending';
+  }
+}
+
+type OnCompleteCallback = (
+  completedTools: CompletedToolCall[],
+) => Promise<void> | void;
+type OnUpdateCallback = (tools: TrackedToolCall[]) => void;
+
+/**
+ * Update a single tool call with live output
+ */
+function updateToolCallOutput(
+  call: TrackedToolCall,
+  toolCallId: string,
+  outputChunk: string,
+): TrackedToolCall {
+  if (call.request.callId !== toolCallId || call.status !== 'executing') {
+    return call;
+  }
+  return { ...call, liveOutput: outputChunk } as TrackedExecutingToolCall;
+}
+
+/**
+ * Apply output update to all tool calls
+ */
+function applyOutputUpdate(
+  prevCalls: TrackedToolCall[],
+  toolCallId: string,
+  outputChunk: string,
+): TrackedToolCall[] {
+  // Check if any call would be updated
+  const hasMatch = prevCalls.some(
+    (call) => call.request.callId === toolCallId && call.status === 'executing',
+  );
+  if (!hasMatch) {
+    return prevCalls;
+  }
+  return prevCalls.map((call) =>
+    updateToolCallOutput(call, toolCallId, outputChunk),
+  );
+}
+
+/**
+ * Transform core tool calls to tracked tool calls
+ */
+function transformToTrackedCalls(
+  updatedCalls: CoreToolCall[],
+  prevCalls: TrackedToolCall[],
+): TrackedToolCall[] {
+  const previousCallMap = new Map(
+    prevCalls.map((call) => [call.request.callId, call]),
+  );
+  return updatedCalls.map((call) => ({
+    ...call,
+    responseSubmittedToModel:
+      previousCallMap.get(call.request.callId)?.responseSubmittedToModel ??
+      false,
+  })) as TrackedToolCall[];
+}
+
+/**
+ * Get description from a tool call
+ */
+function getToolCallDescription(call: TrackedToolCall): string {
+  if ('invocation' in call) {
+    const invocation = call.invocation as
+      | { getDescription(): string }
+      | undefined;
+    if (invocation) {
+      return invocation.getDescription();
+    }
+  }
+  return JSON.stringify(call.request.args);
+}
+
+/**
+ * Get output from a completed tool call
+ */
+function getToolCallOutput(call: TrackedToolCall): string | undefined {
+  if (
+    call.status === 'success' ||
+    call.status === 'error' ||
+    call.status === 'cancelled'
+  ) {
+    const completed = call as CompletedToolCall | CancelledToolCall;
+    if (completed.response.resultDisplay != null) {
+      return typeof completed.response.resultDisplay === 'string'
+        ? completed.response.resultDisplay
+        : JSON.stringify(completed.response.resultDisplay);
+    }
+  }
+  if (call.status === 'executing') {
+    const executing = call as TrackedExecutingToolCall;
+    return executing.liveOutput;
+  }
+  return undefined;
+}
+
+/**
+ * Get error message from a failed tool call
+ */
+function getToolCallError(call: TrackedToolCall): string | undefined {
+  if (call.status === 'error') {
+    const completed = call as CompletedToolCall;
+    const error = completed.response.error;
+    if (error) {
+      return error.message;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Convert a TrackedToolCall to ToolCallDisplayInfo
+ */
+function toDisplayInfo(call: TrackedToolCall): ToolCallDisplayInfo {
+  const displayName = call.tool?.displayName ?? call.request.name;
+  const description = getToolCallDescription(call);
+  const output = getToolCallOutput(call);
+  const errorMessage = getToolCallError(call);
+
+  const result: ToolCallDisplayInfo = {
+    callId: call.request.callId,
+    name: call.request.name,
+    displayName,
+    description,
+    status: mapCoreStatusToToolStatus(call.status),
+  };
+
+  if (output !== undefined) {
+    result.output = output;
+  }
+  if (errorMessage !== undefined) {
+    result.errorMessage = errorMessage;
+  }
+  if (call.status === 'awaiting_approval') {
+    const waiting = call as WaitingToolCall;
+    result.confirmationDetails = waiting.confirmationDetails;
+  }
+
+  return result;
+}
+
+/**
+ * Mark specified tool calls as submitted
+ */
+function markCallsAsSubmitted(
+  prevCalls: TrackedToolCall[],
+  callIdsToMark: string[],
+): TrackedToolCall[] {
+  const hasMatch = prevCalls.some((call) =>
+    callIdsToMark.includes(call.request.callId),
+  );
+  if (!hasMatch) {
+    return prevCalls;
+  }
+  return prevCalls.map((call) => {
+    if (callIdsToMark.includes(call.request.callId)) {
+      return { ...call, responseSubmittedToModel: true };
+    }
+    return call;
+  });
+}
+
+/**
+ * Hook that wraps CoreToolScheduler for React usage.
+ * Handles tool execution lifecycle with confirmation support.
+ */
+export function useToolScheduler(
+  config: Config | null,
+  onAllToolCallsComplete: OnCompleteCallback,
+  onToolCallsUpdate?: OnUpdateCallback,
+): UseToolSchedulerResult {
+  const [toolCalls, setToolCalls] = useState<TrackedToolCall[]>([]);
+  const schedulerRef = useRef<CoreToolScheduler | null>(null);
+
+  // Use refs to store callbacks so they don't trigger effect re-runs
+  const onCompleteRef = useRef<OnCompleteCallback>(onAllToolCallsComplete);
+  const onUpdateRef = useRef<OnUpdateCallback | undefined>(onToolCallsUpdate);
+
+  // Keep refs in sync with props
+  useEffect(() => {
+    onCompleteRef.current = onAllToolCallsComplete;
+  }, [onAllToolCallsComplete]);
+
+  useEffect(() => {
+    onUpdateRef.current = onToolCallsUpdate;
+  }, [onToolCallsUpdate]);
+
+  // Create scheduler when config changes
+  useEffect(() => {
+    if (!config) {
+      schedulerRef.current = null;
+      return;
+    }
+
+    const handleOutputUpdate = (
+      toolCallId: string,
+      outputChunk: string,
+    ): void => {
+      setToolCalls((prev) => applyOutputUpdate(prev, toolCallId, outputChunk));
+    };
+
+    const handleToolCallsUpdate = (updatedCalls: CoreToolCall[]): void => {
+      setToolCalls((prevCalls) => {
+        if (updatedCalls.length === 0) {
+          return [];
+        }
+        const newCalls = transformToTrackedCalls(updatedCalls, prevCalls);
+        const updateCallback = onUpdateRef.current;
+        if (updateCallback) {
+          updateCallback(newCalls);
+        }
+        return newCalls;
+      });
+    };
+
+    const handleAllComplete = async (
+      completedToolCalls: CompletedToolCall[],
+    ): Promise<void> => {
+      logger.debug(
+        'handleAllComplete called',
+        'toolCount:',
+        completedToolCalls.length,
+      );
+      if (completedToolCalls.length > 0) {
+        logger.debug('handleAllComplete: calling onCompleteRef.current');
+        await onCompleteRef.current(completedToolCalls);
+        logger.debug('handleAllComplete: onCompleteRef.current returned');
+      } else {
+        logger.debug(
+          'handleAllComplete: no completed tools, skipping callback',
+        );
+      }
+      handleToolCallsUpdate([]);
+    };
+
+    const scheduler = new CoreToolScheduler({
+      config,
+      outputUpdateHandler: handleOutputUpdate,
+      onAllToolCallsComplete: handleAllComplete,
+      onToolCallsUpdate: handleToolCallsUpdate,
+      getPreferredEditor: () => undefined,
+      onEditorClose: () => {
+        /* no-op */
+      },
+    });
+
+    schedulerRef.current = scheduler;
+
+    return () => {
+      schedulerRef.current = null;
+    };
+  }, [config]);
+
+  // Schedule new tool calls
+  const schedule: ScheduleFn = useCallback(
+    (
+      request: ToolCallRequestInfo | ToolCallRequestInfo[],
+      signal: AbortSignal,
+    ) => {
+      const scheduler = schedulerRef.current;
+      if (scheduler) {
+        void scheduler.schedule(request, signal);
+      }
+    },
+    [],
+  );
+
+  // Mark tools as submitted to the model
+  const markToolsAsSubmitted: MarkToolsAsSubmittedFn = useCallback(
+    (callIdsToMark: string[]) => {
+      if (callIdsToMark.length > 0) {
+        setToolCalls((prev) => markCallsAsSubmitted(prev, callIdsToMark));
+      }
+    },
+    [],
+  );
+
+  // Cancel all pending tool calls
+  const cancelAll: CancelAllFn = useCallback(() => {
+    const scheduler = schedulerRef.current;
+    if (scheduler !== null) {
+      // Cast needed as types may be out of sync with runtime
+      (scheduler as unknown as { cancelAll(): void }).cancelAll();
+    }
+  }, []);
+
+  // Get tool display info for UI rendering
+  const getToolDisplayInfo = useCallback((): ToolCallDisplayInfo[] => {
+    return toolCalls.map(toDisplayInfo);
+  }, [toolCalls]);
+
+  // Respond to a tool confirmation request
+  const respondToConfirmation: RespondToConfirmationFn = useCallback(
+    (callId: string, outcome: ToolConfirmationOutcome) => {
+      logger.debug(
+        'respondToConfirmation called',
+        'callId:',
+        callId,
+        'outcome:',
+        outcome,
+      );
+
+      // Find the tool call with matching callId that is awaiting approval
+      const toolCall = toolCalls.find(
+        (tc) =>
+          tc.request.callId === callId && tc.status === 'awaiting_approval',
+      );
+
+      if (!toolCall) {
+        logger.warn(
+          'respondToConfirmation: tool call not found or not awaiting approval',
+          'callId:',
+          callId,
+        );
+        return;
+      }
+
+      const waitingCall = toolCall as WaitingToolCall;
+      logger.debug('Calling onConfirm callback', 'callId:', callId);
+      void waitingCall.confirmationDetails.onConfirm(outcome);
+    },
+    [toolCalls],
+  );
+
+  return {
+    toolCalls,
+    schedule,
+    markToolsAsSubmitted,
+    cancelAll,
+    getToolDisplayInfo,
+    respondToConfirmation,
+  };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+// Public API for @vybestack/llxprt-ui package
+export { startNui } from './bootstrap.js';
+export type { UILaunchConfig } from './types.js';

package/src/jsx.d.ts

@@ -0,0 +1,11 @@
+// Override JSX namespace to allow ReactNode as Element
+// This is needed because OpenTUI's JSX types are stricter than standard React
+import type React from 'react';
+
+declare global {
+  namespace JSX {
+    type Element = React.ReactNode;
+  }
+}
+
+export {};

package/src/lib/clipboard.ts

@@ -0,0 +1,18 @@
+import clipboardy from 'clipboardy';
+
+export async function readClipboardText(): Promise<string | undefined> {
+  try {
+    const text = await clipboardy.read();
+    return text.trim().length > 0 ? text : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export async function writeClipboardText(text: string): Promise<void> {
+  try {
+    await clipboardy.write(text);
+  } catch {
+    // ignore copy failures; OSC52 will still have been attempted
+  }
+}

package/src/lib/logger.ts

@@ -0,0 +1,107 @@
+/**
+ * Lightweight logger for nui.
+ * API compatible with @llxprt-code/core DebugLogger for future replacement.
+ * Currently logs to file, can be extended to use opentui's console capture.
+ */
+import { appendFileSync, mkdirSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+const LOG_DIR = join(homedir(), '.llxprt', 'nuilog');
+const LOG_FILE = join(LOG_DIR, 'nui.log');
+
+// Ensure log directory exists
+try {
+  mkdirSync(LOG_DIR, { recursive: true });
+} catch {
+  // Ignore errors - logging is best-effort
+}
+
+type LogLevel = 'debug' | 'log' | 'warn' | 'error';
+
+interface LogEntry {
+  timestamp: string;
+  namespace: string;
+  level: LogLevel;
+  message: string;
+  args?: unknown[];
+}
+
+function formatEntry(entry: LogEntry): string {
+  const argsStr =
+    entry.args !== undefined && entry.args.length > 0
+      ? ` ${JSON.stringify(entry.args)}`
+      : '';
+  return `[${entry.timestamp}] [${entry.level.toUpperCase()}] [${entry.namespace}] ${entry.message}${argsStr}`;
+}
+
+function writeLog(entry: LogEntry): void {
+  try {
+    appendFileSync(LOG_FILE, formatEntry(entry) + '\n', 'utf8');
+  } catch {
+    // Ignore write errors - logging is best-effort
+  }
+}
+
+export class Logger {
+  private _namespace: string;
+  private _enabled = true;
+
+  constructor(namespace: string) {
+    this._namespace = namespace;
+  }
+
+  get namespace(): string {
+    return this._namespace;
+  }
+
+  get enabled(): boolean {
+    return this._enabled;
+  }
+
+  set enabled(value: boolean) {
+    this._enabled = value;
+  }
+
+  private logAtLevel(level: LogLevel, message: string, args: unknown[]): void {
+    if (!this._enabled) return;
+
+    const entry: LogEntry = {
+      timestamp: new Date().toISOString(),
+      namespace: this._namespace,
+      level,
+      message,
+      args: args.length > 0 ? args : undefined,
+    };
+
+    writeLog(entry);
+  }
+
+  debug(message: string, ...args: unknown[]): void {
+    this.logAtLevel('debug', message, args);
+  }
+
+  log(message: string, ...args: unknown[]): void {
+    this.logAtLevel('log', message, args);
+  }
+
+  warn(message: string, ...args: unknown[]): void {
+    this.logAtLevel('warn', message, args);
+  }
+
+  error(message: string, ...args: unknown[]): void {
+    this.logAtLevel('error', message, args);
+  }
+}
+
+// Singleton loggers by namespace
+const loggers = new Map<string, Logger>();
+
+export function getLogger(namespace: string): Logger {
+  let logger = loggers.get(namespace);
+  if (logger === undefined) {
+    logger = new Logger(namespace);
+    loggers.set(namespace, logger);
+  }
+  return logger;
+}

package/src/lib/random.ts

@@ -0,0 +1,5 @@
+import { randomInt } from 'node:crypto';
+
+export function secureRandomBetween(min: number, max: number): number {
+  return randomInt(min, max + 1);
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import { createCliRenderer } from '@vybestack/opentui-core';
+import { createRoot } from '@vybestack/opentui-react';
+import { App } from './app';
+
+const renderer = await createCliRenderer({
+  exitOnCtrlC: true,
+  useMouse: true,
+  useAlternateScreen: true,
+  useKittyKeyboard: { events: true },
+});
+
+createRoot(renderer).render(<App />);
+renderer.start();

package/src/test/mockTheme.ts

@@ -0,0 +1,51 @@
+import type { ThemeDefinition } from '../features/theme';
+
+export function createMockTheme(): ThemeDefinition {
+  return {
+    slug: 'test',
+    name: 'Test Theme',
+    kind: 'dark',
+    colors: {
+      background: '#000000',
+      panel: {
+        bg: '#111111',
+        border: '#333333',
+      },
+      text: {
+        primary: '#ffffff',
+        muted: '#888888',
+        user: '#00ff00',
+        responder: '#0088ff',
+        thinking: '#ff8800',
+        tool: '#ff00ff',
+      },
+      input: {
+        fg: '#ffffff',
+        bg: '#000000',
+        border: '#333333',
+        placeholder: '#666666',
+      },
+      status: {
+        fg: '#ffffff',
+      },
+      accent: {
+        primary: '#00ffff',
+      },
+      diff: {
+        addedBg: '#003300',
+        addedFg: '#00ff00',
+        removedBg: '#330000',
+        removedFg: '#ff0000',
+      },
+      selection: {
+        fg: '#000000',
+        bg: '#ffffff',
+      },
+      message: {
+        userBorder: '#00ff00',
+        systemBorder: '#ffff00',
+        systemText: '#ffff00',
+      },
+    },
+  };
+}