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

package/src/ui/modals/ToolApprovalModal.test.ts

@@ -0,0 +1,206 @@
+import { describe, expect, it } from 'vitest';
+import type {
+  ToolApprovalOutcome,
+  ToolApprovalDetails,
+  ToolApprovalModalProps,
+} from './ToolApprovalModal';
+import type { ThemeDefinition } from '../../features/theme';
+import type { ToolConfirmationType } from '../../types/events';
+
+describe('ToolApprovalModal', () => {
+  const mockTheme: ThemeDefinition = {
+    slug: 'test',
+    name: 'Test Theme',
+    kind: 'dark',
+    colors: {
+      background: '#000000',
+      text: {
+        primary: '#ffffff',
+        muted: '#888888',
+        user: '#00ff00',
+        responder: '#0088ff',
+        thinking: '#ff8800',
+        tool: '#ff00ff',
+      },
+      input: {
+        fg: '#ffffff',
+        bg: '#000000',
+        border: '#333333',
+        placeholder: '#666666',
+      },
+      panel: {
+        bg: '#111111',
+        border: '#333333',
+      },
+      status: {
+        fg: '#ffffff',
+      },
+      accent: {
+        primary: '#00ffff',
+      },
+      selection: {
+        fg: '#000000',
+        bg: '#ffffff',
+      },
+      diff: {
+        addedBg: '#003300',
+        addedFg: '#00ff00',
+        removedBg: '#330000',
+        removedFg: '#ff0000',
+      },
+      message: {
+        userBorder: '#00ff00',
+        systemBorder: '#888888',
+        systemText: '#888888',
+      },
+    },
+  };
+
+  describe('ToolApprovalOutcome type', () => {
+    it('accepts valid outcome values', () => {
+      const allowOnce: ToolApprovalOutcome = 'allow_once';
+      const allowAlways: ToolApprovalOutcome = 'allow_always';
+      const cancel: ToolApprovalOutcome = 'cancel';
+
+      expect(allowOnce).toBe('allow_once');
+      expect(allowAlways).toBe('allow_always');
+      expect(cancel).toBe('cancel');
+    });
+  });
+
+  describe('ToolApprovalDetails type', () => {
+    it('accepts required properties for edit confirmation', () => {
+      const details: ToolApprovalDetails = {
+        callId: 'call-123',
+        toolName: 'write_file',
+        confirmationType: 'edit' as ToolConfirmationType,
+        question: 'Allow file write?',
+        preview: 'Writing to /path/to/file.ts',
+        params: { path: '/path/to/file.ts', content: 'new content' },
+        canAllowAlways: true,
+      };
+
+      expect(details.callId).toBe('call-123');
+      expect(details.toolName).toBe('write_file');
+      expect(details.confirmationType).toBe('edit');
+      expect(details.canAllowAlways).toBe(true);
+    });
+
+    it('accepts exec confirmation type', () => {
+      const details: ToolApprovalDetails = {
+        callId: 'call-456',
+        toolName: 'run_command',
+        confirmationType: 'exec' as ToolConfirmationType,
+        question: 'Allow command execution?',
+        preview: 'npm install express',
+        params: { command: 'npm install express' },
+        canAllowAlways: false,
+      };
+
+      expect(details.confirmationType).toBe('exec');
+      expect(details.preview).toBe('npm install express');
+    });
+
+    it('accepts mcp confirmation type', () => {
+      const details: ToolApprovalDetails = {
+        callId: 'call-789',
+        toolName: 'mcp_tool',
+        confirmationType: 'mcp' as ToolConfirmationType,
+        question: 'Allow MCP tool call?',
+        preview: 'Calling external service',
+        params: { serverName: 'my-mcp-server', action: 'query' },
+        canAllowAlways: true,
+      };
+
+      expect(details.confirmationType).toBe('mcp');
+    });
+
+    it('accepts info confirmation type', () => {
+      const details: ToolApprovalDetails = {
+        callId: 'call-info',
+        toolName: 'read_file',
+        confirmationType: 'info' as ToolConfirmationType,
+        question: 'Allow file read?',
+        preview: 'Reading /path/to/file.ts',
+        params: { path: '/path/to/file.ts' },
+        canAllowAlways: true,
+      };
+
+      expect(details.confirmationType).toBe('info');
+    });
+  });
+
+  describe('ToolApprovalModalProps type', () => {
+    it('accepts required props', () => {
+      const details: ToolApprovalDetails = {
+        callId: 'call-123',
+        toolName: 'write_file',
+        confirmationType: 'edit' as ToolConfirmationType,
+        question: 'Allow file write?',
+        preview: 'Writing to file',
+        params: {},
+        canAllowAlways: true,
+      };
+
+      const props: ToolApprovalModalProps = {
+        details,
+        onDecision: () => {},
+        onClose: () => {},
+      };
+
+      expect(props.details).toBe(details);
+      expect(typeof props.onDecision).toBe('function');
+      expect(typeof props.onClose).toBe('function');
+    });
+
+    it('accepts optional theme prop', () => {
+      const details: ToolApprovalDetails = {
+        callId: 'call-123',
+        toolName: 'write_file',
+        confirmationType: 'edit' as ToolConfirmationType,
+        question: 'Allow file write?',
+        preview: 'Writing to file',
+        params: {},
+        canAllowAlways: false,
+      };
+
+      const props: ToolApprovalModalProps = {
+        details,
+        onDecision: () => {},
+        onClose: () => {},
+        theme: mockTheme,
+      };
+
+      expect(props.theme).toBe(mockTheme);
+    });
+
+    it('onDecision callback receives correct arguments', () => {
+      let receivedCallId: string | null = null;
+      let receivedOutcome: ToolApprovalOutcome | null = null;
+
+      const details: ToolApprovalDetails = {
+        callId: 'call-test',
+        toolName: 'test_tool',
+        confirmationType: 'exec' as ToolConfirmationType,
+        question: 'Allow?',
+        preview: 'Test preview',
+        params: {},
+        canAllowAlways: true,
+      };
+
+      const props: ToolApprovalModalProps = {
+        details,
+        onDecision: (callId: string, outcome: ToolApprovalOutcome) => {
+          receivedCallId = callId;
+          receivedOutcome = outcome;
+        },
+        onClose: () => {},
+      };
+
+      props.onDecision('call-test', 'allow_once');
+
+      expect(receivedCallId).toBe('call-test');
+      expect(receivedOutcome).toBe('allow_once');
+    });
+  });
+});

package/src/ui/modals/ToolApprovalModal.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import { useCallback, useMemo } from 'react';
+import type { ThemeDefinition } from '../../features/theme';
+import type { ToolConfirmationType } from '../../types/events';
+import type { ToolCallConfirmationDetails } from '@vybestack/llxprt-code-core';
+import { ModalShell } from './ModalShell';
+import { RadioSelect, type RadioSelectOption } from '../components/RadioSelect';
+import { DiffViewer } from '../components/DiffViewer';
+
+export type ToolApprovalOutcome = 'allow_once' | 'allow_always' | 'cancel';
+
+export interface ToolApprovalDetails {
+  readonly callId: string;
+  readonly toolName: string;
+  readonly confirmationType: ToolConfirmationType;
+  readonly question: string;
+  readonly preview: string;
+  readonly params: Record<string, unknown>;
+  readonly canAllowAlways: boolean;
+  /** Full confirmation details from CoreToolScheduler (includes diff for edits) */
+  readonly coreDetails?: ToolCallConfirmationDetails;
+}
+
+export interface ToolApprovalModalProps {
+  readonly details: ToolApprovalDetails;
+  readonly onDecision: (callId: string, outcome: ToolApprovalOutcome) => void;
+  readonly onClose: () => void;
+  readonly theme?: ThemeDefinition;
+}
+
+function getTypeIcon(type: ToolConfirmationType): string {
+  switch (type) {
+    case 'edit':
+      return '✎';
+    case 'exec':
+      return '⚡';
+    case 'mcp':
+      return '⚙';
+    case 'info':
+      return 'ℹ';
+    default:
+      return '?';
+  }
+}
+
+function getTypeLabel(type: ToolConfirmationType): string {
+  switch (type) {
+    case 'edit':
+      return 'File Edit';
+    case 'exec':
+      return 'Shell Command';
+    case 'mcp':
+      return 'MCP Tool';
+    case 'info':
+      return 'Information Request';
+    default:
+      return 'Tool';
+  }
+}
+
+interface PreviewContentProps {
+  readonly details: ToolApprovalDetails;
+  readonly theme?: ThemeDefinition;
+}
+
+/**
+ * Render the preview content based on confirmation type
+ */
+function PreviewContent(props: PreviewContentProps): React.ReactNode {
+  const { details, theme } = props;
+
+  // For edit confirmations with core details, show diff
+  if (
+    details.confirmationType === 'edit' &&
+    details.coreDetails?.type === 'edit'
+  ) {
+    const editDetails = details.coreDetails;
+    return (
+      <DiffViewer
+        diffContent={editDetails.fileDiff}
+        filename={editDetails.fileName}
+        maxHeight={15}
+        {...(theme !== undefined ? { theme } : {})}
+      />
+    );
+  }
+
+  // For exec confirmations, show command
+  if (
+    details.confirmationType === 'exec' &&
+    details.coreDetails?.type === 'exec'
+  ) {
+    const execDetails = details.coreDetails;
+    return (
+      <box
+        border
+        style={{
+          padding: 1,
+          borderColor: theme?.colors.panel.border,
+          backgroundColor: theme?.colors.panel.bg,
+          flexDirection: 'column',
+          gap: 0,
+        }}
+      >
+        <text fg={theme?.colors.text.muted}>Command:</text>
+        <text fg={theme?.colors.accent.warning ?? theme?.colors.text.primary}>
+          {execDetails.command}
+        </text>
+      </box>
+    );
+  }
+
+  // For info confirmations (web fetch), show prompt and URLs
+  if (
+    details.confirmationType === 'info' &&
+    details.coreDetails?.type === 'info'
+  ) {
+    const infoDetails = details.coreDetails;
+    return (
+      <box
+        border
+        style={{
+          padding: 1,
+          borderColor: theme?.colors.panel.border,
+          backgroundColor: theme?.colors.panel.bg,
+          flexDirection: 'column',
+          gap: 0,
+        }}
+      >
+        <text fg={theme?.colors.text.muted}>Prompt:</text>
+        <text fg={theme?.colors.text.tool}>{infoDetails.prompt}</text>
+        {infoDetails.urls && infoDetails.urls.length > 0 && (
+          <>
+            <text fg={theme?.colors.text.muted} style={{ marginTop: 1 }}>
+              URLs:
+            </text>
+            {infoDetails.urls.map((url, index) => (
+              <text key={`url-${index}`} fg={theme?.colors.accent.primary}>
+                • {url}
+              </text>
+            ))}
+          </>
+        )}
+      </box>
+    );
+  }
+
+  // For MCP tool confirmations
+  if (
+    details.confirmationType === 'mcp' &&
+    details.coreDetails?.type === 'mcp'
+  ) {
+    const mcpDetails = details.coreDetails;
+    return (
+      <box
+        border
+        style={{
+          padding: 1,
+          borderColor: theme?.colors.panel.border,
+          backgroundColor: theme?.colors.panel.bg,
+          flexDirection: 'column',
+          gap: 0,
+        }}
+      >
+        <text fg={theme?.colors.text.muted}>
+          MCP Server: {mcpDetails.serverName}
+        </text>
+        <text fg={theme?.colors.text.muted}>
+          Tool: {mcpDetails.toolDisplayName}
+        </text>
+      </box>
+    );
+  }
+
+  // Fallback: show raw preview text
+  const previewLines = details.preview.split('\n').slice(0, 20);
+  return (
+    <box
+      border
+      style={{
+        padding: 1,
+        borderColor: theme?.colors.panel.border,
+        backgroundColor: theme?.colors.panel.bg,
+        flexDirection: 'column',
+        gap: 0,
+        maxHeight: 15,
+        overflow: 'hidden',
+      }}
+    >
+      {previewLines.map((line, index) => (
+        <text key={`preview-${index}`} fg={theme?.colors.text.tool}>
+          {line}
+        </text>
+      ))}
+    </box>
+  );
+}
+
+export function ToolApprovalModal(
+  props: ToolApprovalModalProps,
+): React.ReactNode {
+  const { details, onDecision, onClose, theme } = props;
+
+  const options = useMemo((): RadioSelectOption<ToolApprovalOutcome>[] => {
+    const result: RadioSelectOption<ToolApprovalOutcome>[] = [
+      { label: 'Yes, allow once', value: 'allow_once', key: 'allow_once' },
+    ];
+
+    if (details.canAllowAlways) {
+      result.push({
+        label: 'Yes, allow always',
+        value: 'allow_always',
+        key: 'allow_always',
+      });
+    }
+
+    result.push({
+      label: 'No, cancel (esc)',
+      value: 'cancel',
+      key: 'cancel',
+    });
+
+    return result;
+  }, [details.canAllowAlways]);
+
+  const handleSelect = useCallback(
+    (outcome: ToolApprovalOutcome): void => {
+      onDecision(details.callId, outcome);
+      onClose();
+    },
+    [details.callId, onDecision, onClose],
+  );
+
+  const typeIcon = getTypeIcon(details.confirmationType);
+  const typeLabel = getTypeLabel(details.confirmationType);
+
+  // For edits, include filename in title
+  let title = `${typeIcon} ${typeLabel}: ${details.toolName}`;
+  if (
+    details.confirmationType === 'edit' &&
+    details.coreDetails?.type === 'edit'
+  ) {
+    title = `${typeIcon} ${typeLabel}: ${details.coreDetails.fileName}`;
+  }
+
+  const footer = (
+    <text fg={theme?.colors.text.muted}>
+      ↑/↓ to navigate, Enter to select, Esc to cancel
+    </text>
+  );
+
+  return (
+    <ModalShell
+      title={title}
+      subtitle={details.question}
+      onClose={onClose}
+      theme={theme}
+      footer={footer}
+      width="80%"
+    >
+      <box
+        flexDirection="column"
+        style={{
+          gap: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <PreviewContent details={details} theme={theme} />
+
+        <box style={{ marginTop: 1 }}>
+          <RadioSelect
+            options={options}
+            onSelect={handleSelect}
+            theme={theme}
+            isFocused={true}
+          />
+        </box>
+      </box>
+    </ModalShell>
+  );
+}

package/src/ui/modals/index.ts

@@ -0,0 +1,20 @@
+export { ModalShell, type ModalShellProps } from './ModalShell';
+export { SearchSelectModal, type SearchSelectProps } from './SearchSelectModal';
+export { AuthModal, type AuthOption } from './AuthModal';
+export { ThemeModal } from './ThemeModal';
+export { filterItems, type SearchItem } from './types';
+export {
+  ToolApprovalModal,
+  type ToolApprovalModalProps,
+  type ToolApprovalDetails,
+  type ToolApprovalOutcome,
+} from './ToolApprovalModal';
+
+// Default auth options used by the auth dialog
+import type { AuthOption } from './AuthModal';
+export const AUTH_DEFAULTS: AuthOption[] = [
+  { id: 'gemini', label: '1. Gemini (Google OAuth)', enabled: true },
+  { id: 'qwen', label: '2. Qwen (OAuth)', enabled: true },
+  { id: 'anthropic', label: '3. Anthropic Claude (OAuth)', enabled: true },
+  { id: 'close', label: '4. Close', enabled: false },
+];

package/src/ui/modals/modals.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { filterItems, type SearchItem } from './types';
+
+const SAMPLE_ITEMS: SearchItem[] = [
+  { id: 'a', label: 'Alpha' },
+  { id: 'b', label: 'Beta' },
+  { id: 'g', label: 'Gamma' },
+];
+
+describe('filterItems', () => {
+  it('filters by substring', () => {
+    const result = filterItems(SAMPLE_ITEMS, 'al');
+    expect(result.map((item) => item.id)).toStrictEqual(['a']);
+  });
+
+  it('sorts alphabetically when requested', () => {
+    const result = filterItems(SAMPLE_ITEMS, '', true);
+    expect(result.map((item) => item.id)).toStrictEqual(['a', 'b', 'g']);
+  });
+
+  it('preserves order when not sorting', () => {
+    const reversed = [...SAMPLE_ITEMS].reverse();
+    const result = filterItems(reversed, '');
+    expect(result.map((item) => item.id)).toStrictEqual(['g', 'b', 'a']);
+  });
+});

package/src/ui/modals/types.ts

@@ -0,0 +1,19 @@
+export interface SearchItem {
+  readonly id: string;
+  readonly label: string;
+}
+
+export function filterItems(
+  items: SearchItem[],
+  query: string,
+  alphabetical?: boolean,
+): SearchItem[] {
+  const normalized = query.trim().toLowerCase();
+  const filtered = items.filter((item) =>
+    item.label.toLowerCase().includes(normalized),
+  );
+  if (alphabetical === true) {
+    return [...filtered].sort((a, b) => a.label.localeCompare(b.label));
+  }
+  return filtered;
+}

package/src/uicontext/Command.tsx

@@ -0,0 +1,102 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import type { DialogContextValue } from './Dialog';
+
+interface CommandDef {
+  readonly name: string;
+  readonly title: string;
+  readonly category?: string;
+  readonly onExecute: (dialog: DialogContextValue) => void | Promise<void>;
+}
+
+interface CommandContextValue {
+  readonly register: (commands: CommandDef[]) => () => void;
+  readonly trigger: (name: string) => Promise<boolean>;
+  readonly getCommands: () => CommandDef[];
+}
+
+const CommandContext = createContext<CommandContextValue | null>(null);
+
+export function useCommand(): CommandContextValue {
+  const context = useContext(CommandContext);
+  if (context === null) {
+    throw new Error('useCommand must be used within Command');
+  }
+  return context;
+}
+
+interface CommandProps {
+  readonly children: ReactNode;
+  readonly dialogContext: DialogContextValue;
+}
+
+let registrationId = 0;
+
+export function Command({
+  children,
+  dialogContext,
+}: CommandProps): React.ReactNode {
+  const [commands, setCommands] = useState<Map<string, CommandDef>>(new Map());
+  const mountedComponents = useRef(new Set<number>());
+
+  const register = useCallback((newCommands: CommandDef[]) => {
+    registrationId += 1;
+    const componentId = registrationId;
+    mountedComponents.current.add(componentId);
+
+    setCommands((prev) => {
+      const next = new Map(prev);
+      for (const command of newCommands) {
+        next.set(command.name, command);
+      }
+      return next;
+    });
+
+    return () => {
+      mountedComponents.current.delete(componentId);
+      setCommands((prev) => {
+        const next = new Map(prev);
+        for (const command of newCommands) {
+          next.delete(command.name);
+        }
+        return next;
+      });
+    };
+  }, []);
+
+  const trigger = useCallback(
+    async (name: string): Promise<boolean> => {
+      const command = commands.get(name);
+      if (command === undefined) {
+        return false;
+      }
+      await command.onExecute(dialogContext);
+      return true;
+    },
+    [commands, dialogContext],
+  );
+
+  const getCommands = useCallback((): CommandDef[] => {
+    return Array.from(commands.values());
+  }, [commands]);
+
+  const contextValue = useMemo(
+    () => ({ register, trigger, getCommands }),
+    [register, trigger, getCommands],
+  );
+
+  return (
+    <CommandContext.Provider value={contextValue}>
+      {children}
+    </CommandContext.Provider>
+  );
+}
+
+export type { CommandDef };