@renxqoo/renx-code 0.0.2 → 0.0.4

package/src/components/model-picker-dialog.tsx

@@ -0,0 +1,248 @@
+import type { KeyEvent, TextareaRenderable } from '@opentui/core';
+import { TextAttributes } from '@opentui/core';
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { AgentModelOption } from '../agent/runtime/model-types';
+import { uiTheme } from '../ui/theme';
+
+type ModelPickerDialogProps = {
+  visible: boolean;
+  viewportWidth: number;
+  viewportHeight: number;
+  loading: boolean;
+  switching: boolean;
+  error: string | null;
+  search: string;
+  options: AgentModelOption[];
+  selectedIndex: number;
+  onSearchChange: (value: string) => void;
+  onSelectIndex: (index: number) => void;
+  onConfirm: () => void;
+  onListKeyDown: (event: KeyEvent) => boolean;
+};
+
+const selectedBackground = '#f4b183';
+const selectedForeground = '#050608';
+
+const toProviderLabel = (provider: string) => {
+  if (!provider) {
+    return 'Other';
+  }
+  return provider.slice(0, 1).toUpperCase() + provider.slice(1);
+};
+
+export const ModelPickerDialog = ({
+  visible,
+  viewportWidth,
+  viewportHeight,
+  loading,
+  switching,
+  error,
+  search,
+  options,
+  selectedIndex,
+  onSearchChange,
+  onSelectIndex,
+  onConfirm,
+  onListKeyDown,
+}: ModelPickerDialogProps) => {
+  const searchRef = useRef<TextareaRenderable | null>(null);
+
+  const panelWidth = Math.min(78, Math.max(40, viewportWidth - 8));
+  const panelHeight = Math.min(26, Math.max(14, viewportHeight - 4));
+  const left = Math.max(2, Math.floor((viewportWidth - panelWidth) / 2));
+  const top = Math.max(1, Math.floor((viewportHeight - panelHeight) / 2));
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    const searchInput = searchRef.current;
+    if (!searchInput) {
+      return;
+    }
+
+    searchInput.setText(search);
+    searchInput.cursorOffset = search.length;
+    searchInput.focus();
+  }, [search, visible]);
+
+  const rows = useMemo(() => {
+    const result: Array<{
+      type: 'section' | 'option';
+      label?: string;
+      option?: AgentModelOption;
+      index?: number;
+    }> = [];
+    let lastProvider = '';
+
+    options.forEach((option, index) => {
+      if (option.provider !== lastProvider) {
+        lastProvider = option.provider;
+        result.push({
+          type: 'section',
+          label: toProviderLabel(option.provider),
+        });
+      }
+
+      result.push({
+        type: 'option',
+        option,
+        index,
+      });
+    });
+
+    return result;
+  }, [options]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <box
+      position="absolute"
+      top={top}
+      left={left}
+      width={panelWidth}
+      height={panelHeight}
+      zIndex={140}
+    >
+      <box
+        width="100%"
+        height="100%"
+        flexDirection="column"
+        backgroundColor={uiTheme.surface}
+        border={['top', 'bottom', 'left', 'right']}
+        borderColor={uiTheme.divider}
+      >
+        <box justifyContent="space-between" paddingX={2} paddingTop={1} paddingBottom={0}>
+          <text fg={uiTheme.text} attributes={TextAttributes.BOLD}>
+            Select model
+          </text>
+          <text fg={uiTheme.muted}>
+            <strong>esc</strong>
+          </text>
+        </box>
+
+        <box paddingX={2} paddingTop={1} paddingBottom={1} flexDirection="column" gap={0}>
+          <text fg={uiTheme.muted}>Search</text>
+          <box backgroundColor={uiTheme.panel} paddingX={1}>
+            <textarea
+              ref={searchRef}
+              width="100%"
+              minHeight={1}
+              maxHeight={1}
+              initialValue={search}
+              textColor={uiTheme.text}
+              focusedTextColor={uiTheme.text}
+              backgroundColor={uiTheme.panel}
+              focusedBackgroundColor={uiTheme.panel}
+              onContentChange={() => onSearchChange(searchRef.current?.plainText ?? '')}
+              onKeyDown={event => {
+                if (onListKeyDown(event)) {
+                  return;
+                }
+              }}
+            />
+          </box>
+        </box>
+
+        <box flexGrow={1} paddingX={1}>
+          <scrollbox
+            height="100%"
+            scrollY
+            stickyScroll
+            stickyStart="top"
+            scrollbarOptions={{ visible: false }}
+            viewportOptions={{ backgroundColor: uiTheme.surface }}
+            contentOptions={{ backgroundColor: uiTheme.surface }}
+          >
+            <box flexDirection="column" backgroundColor={uiTheme.surface}>
+              {loading ? (
+                <box paddingX={1}>
+                  <text fg={uiTheme.muted}>Loading models...</text>
+                </box>
+              ) : rows.length === 0 ? (
+                <box paddingX={1}>
+                  <text fg={uiTheme.muted}>No matching model</text>
+                </box>
+              ) : (
+                rows.map((row, idx) => {
+                  if (row.type === 'section') {
+                    return (
+                      <box
+                        key={`section:${row.label}:${idx}`}
+                        paddingX={1}
+                        paddingTop={idx === 0 ? 0 : 1}
+                      >
+                        <text fg="#b294ff" attributes={TextAttributes.BOLD}>
+                          {row.label}
+                        </text>
+                      </box>
+                    );
+                  }
+
+                  const option = row.option!;
+                  const optionIndex = row.index ?? 0;
+                  const isSelected = optionIndex === selectedIndex;
+                  const suffix = option.current
+                    ? 'Current'
+                    : option.configured
+                      ? 'Ready'
+                      : 'No key';
+
+                  return (
+                    <box
+                      key={option.id}
+                      flexDirection="row"
+                      justifyContent="space-between"
+                      paddingX={1}
+                      backgroundColor={isSelected ? selectedBackground : uiTheme.surface}
+                      onMouseOver={() => onSelectIndex(optionIndex)}
+                      onMouseUp={() => onConfirm()}
+                    >
+                      <text
+                        fg={isSelected ? selectedForeground : uiTheme.text}
+                        attributes={TextAttributes.BOLD}
+                        wrapMode="none"
+                      >
+                        {option.name}
+                      </text>
+                      <text fg={isSelected ? selectedForeground : uiTheme.muted}>{suffix}</text>
+                    </box>
+                  );
+                })
+              )}
+            </box>
+          </scrollbox>
+        </box>
+
+        <box paddingX={2} paddingY={1} justifyContent="space-between">
+          <text fg={switching ? uiTheme.accent : uiTheme.muted}>
+            {switching ? 'Switching model...' : 'enter select  up/down navigate'}
+          </text>
+          <text fg={uiTheme.muted}>
+            <strong>esc</strong> close
+          </text>
+        </box>
+
+        {error ? (
+          <box paddingX={2} paddingBottom={1}>
+            <text fg="#ff8d8d">{error}</text>
+          </box>
+        ) : null}
+
+        <box
+          position="absolute"
+          top={0}
+          left={0}
+          width={1}
+          height="100%"
+          backgroundColor={uiTheme.accent}
+        />
+      </box>
+    </box>
+  );
+};

package/src/components/prompt.tsx

@@ -0,0 +1,233 @@
+import type { KeyEvent, PasteEvent, TextareaRenderable } from '@opentui/core';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { FileMentionMenu } from './file-mention-menu';
+import { FooterHints } from './footer-hints';
+import { SlashCommandMenu } from './slash-command-menu';
+import type { SlashCommandDefinition } from '../commands/slash-commands';
+import {
+  isAudioSelection,
+  isImageSelection,
+  isVideoSelection,
+} from '../files/attachment-capabilities';
+import type { PromptFileSelection } from '../files/types';
+import { useFileMentionMenu } from '../hooks/use-file-mention-menu';
+import { useSlashCommandMenu } from '../hooks/use-slash-command-menu';
+import { uiTheme } from '../ui/theme';
+
+type PromptProps = {
+  isThinking: boolean;
+  disabled?: boolean;
+  modelLabel: string;
+  contextUsagePercent: number | null;
+  value: string;
+  selectedFiles: PromptFileSelection[];
+  onAddSelectedFiles: (files: PromptFileSelection[]) => void;
+  onValueChange: (value: string) => void;
+  onSlashCommandSelect?: (command: SlashCommandDefinition) => boolean;
+  onSlashMenuVisibilityChange?: (visible: boolean) => void;
+  onSubmit: () => void;
+};
+
+export const Prompt = ({
+  isThinking,
+  disabled = false,
+  modelLabel,
+  contextUsagePercent,
+  value,
+  selectedFiles,
+  onAddSelectedFiles,
+  onValueChange,
+  onSlashCommandSelect,
+  onSlashMenuVisibilityChange,
+  onSubmit,
+}: PromptProps) => {
+  const textareaRef = useRef<TextareaRenderable | null>(null);
+  const mediaFiles = useMemo(
+    () =>
+      selectedFiles.filter(
+        file => isImageSelection(file) || isAudioSelection(file) || isVideoSelection(file)
+      ),
+    [selectedFiles]
+  );
+  const inputLocked = isThinking || disabled;
+  const promptAlignPaddingX =
+    uiTheme.layout.conversationPaddingX +
+    uiTheme.layout.conversationContentPaddingX +
+    uiTheme.layout.promptPaddingX;
+  const slashMenu = useSlashCommandMenu({
+    value,
+    onValueChange,
+    textareaRef,
+    onCommandSelected: onSlashCommandSelect,
+    disabled: inputLocked,
+  });
+  const fileMentionMenu = useFileMentionMenu({
+    value,
+    textareaRef,
+    selectedFiles,
+    onFilesSelected: onAddSelectedFiles,
+    onValueChange,
+    disabled: inputLocked,
+  });
+
+  useEffect(() => {
+    onSlashMenuVisibilityChange?.(slashMenu.visible || fileMentionMenu.visible);
+  }, [fileMentionMenu.visible, onSlashMenuVisibilityChange, slashMenu.visible]);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    if (textarea.plainText !== value) {
+      textarea.setText(value);
+      textarea.cursorOffset = value.length;
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    if (inputLocked) {
+      textarea.blur();
+      return;
+    }
+
+    textarea.focus();
+  }, [inputLocked]);
+
+  const submit = useCallback(() => {
+    if (inputLocked) {
+      return;
+    }
+    onSubmit();
+  }, [inputLocked, onSubmit]);
+
+  const handleContentChange = useCallback(() => {
+    onValueChange(textareaRef.current?.plainText ?? '');
+  }, [onValueChange]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyEvent) => {
+      if (inputLocked) {
+        event.preventDefault();
+        return;
+      }
+
+      if (fileMentionMenu.handleKeyDown(event)) {
+        return;
+      }
+
+      if (slashMenu.handleKeyDown(event)) {
+        return;
+      }
+
+      const isEnter = event.name === 'return' || event.name === 'enter';
+      if (isEnter && !event.shift) {
+        event.preventDefault();
+        submit();
+      }
+    },
+    [fileMentionMenu, inputLocked, slashMenu, submit]
+  );
+
+  const handlePaste = useCallback((event: PasteEvent) => {
+    const normalized = event.text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    if (normalized === event.text) {
+      return;
+    }
+
+    event.preventDefault();
+    textareaRef.current?.insertText(normalized);
+  }, []);
+
+  return (
+    <box
+      flexDirection="column"
+      flexShrink={0}
+      width="100%"
+      gap={0}
+      paddingBottom={uiTheme.layout.promptPaddingBottom}
+    >
+      <box flexDirection="column" width="100%" gap={0} paddingX={promptAlignPaddingX}>
+        <FileMentionMenu
+          visible={fileMentionMenu.visible}
+          loading={fileMentionMenu.loading}
+          error={fileMentionMenu.error}
+          options={fileMentionMenu.options}
+          selectedIndex={fileMentionMenu.selectedIndex}
+        />
+        <SlashCommandMenu
+          visible={!fileMentionMenu.visible && slashMenu.visible}
+          options={slashMenu.options}
+          selectedIndex={slashMenu.selectedIndex}
+        />
+        <box width="100%" flexDirection="row" overflow="hidden">
+          <box width={1} backgroundColor={uiTheme.accent} />
+          <box
+            width="100%"
+            flexGrow={1}
+            paddingX={2}
+            paddingTop={1}
+            paddingBottom={0}
+            backgroundColor={uiTheme.inputBg}
+          >
+            {mediaFiles.length > 0 ? (
+              <box flexDirection="column" gap={0} paddingBottom={1}>
+                <text fg={uiTheme.muted}>Media files</text>
+                {mediaFiles.map(file => (
+                  <text key={file.absolutePath} fg={uiTheme.accent} wrapMode="none">
+                    {file.relativePath}
+                  </text>
+                ))}
+              </box>
+            ) : null}
+            <textarea
+              ref={textareaRef}
+              buffered={false}
+              width="100%"
+              minWidth="100%"
+              maxWidth="100%"
+              minHeight={1}
+              maxHeight={4}
+              wrapMode="char"
+              initialValue={value}
+              textColor={uiTheme.userPromptText}
+              focusedTextColor={uiTheme.userPromptText}
+              backgroundColor="transparent"
+              focusedBackgroundColor="transparent"
+              cursorColor={uiTheme.inputCursor}
+              selectionBg={uiTheme.inputSelectionBg}
+              selectionFg={uiTheme.inputSelectionText}
+              placeholder={
+                isThinking
+                  ? 'waiting for agent response...'
+                  : disabled
+                    ? 'command dialog active...'
+                    : 'Type your message...'
+              }
+              placeholderColor={uiTheme.muted}
+              onContentChange={handleContentChange}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+            />
+            <box flexDirection="row" gap={1} paddingTop={1} paddingBottom={1}>
+              <text fg={uiTheme.text} attributes={uiTheme.typography.heading}>
+                {modelLabel}
+              </text>
+              <text fg={uiTheme.muted} attributes={uiTheme.typography.muted}>
+                Coding Agent
+              </text>
+            </box>
+          </box>
+        </box>
+      </box>
+      <FooterHints isThinking={isThinking} contextUsagePercent={contextUsagePercent} />
+    </box>
+  );
+};

package/src/components/slash-command-menu.tsx

@@ -0,0 +1,65 @@
+import { TextAttributes } from '@opentui/core';
+
+import type { SlashCommandDefinition } from '../commands/slash-commands';
+import { uiTheme } from '../ui/theme';
+
+type SlashCommandMenuProps = {
+  visible: boolean;
+  options: SlashCommandDefinition[];
+  selectedIndex: number;
+};
+
+const selectedBackground = '#f4b183';
+const selectedForeground = '#050608';
+
+export const SlashCommandMenu = ({ visible, options, selectedIndex }: SlashCommandMenuProps) => {
+  if (!visible) {
+    return null;
+  }
+
+  const labelWidth = options.reduce((max, option) => {
+    const width = `/${option.name}`.length;
+    return Math.max(max, width);
+  }, 0);
+
+  return (
+    <box
+      width="100%"
+      flexShrink={0}
+      backgroundColor={uiTheme.panel}
+      border={['top', 'bottom', 'left', 'right']}
+      borderColor={uiTheme.divider}
+      marginBottom={0}
+      height={Math.min(11, options.length + 2)}
+    >
+      <scrollbox scrollY stickyScroll stickyStart="top" scrollbarOptions={{ visible: false }}>
+        <box flexDirection="column" backgroundColor={uiTheme.panel}>
+          {options.map((option, index) => {
+            const isSelected = index === selectedIndex;
+            const commandText = `/${option.name}`.padEnd(labelWidth + 2, ' ');
+
+            return (
+              <box
+                key={option.name}
+                flexDirection="row"
+                paddingX={1}
+                backgroundColor={isSelected ? selectedBackground : uiTheme.panel}
+              >
+                <text
+                  fg={isSelected ? selectedForeground : uiTheme.text}
+                  attributes={TextAttributes.BOLD}
+                  flexShrink={0}
+                >
+                  {commandText}
+                </text>
+                <text fg={isSelected ? selectedForeground : uiTheme.muted} wrapMode="word">
+                  {option.description}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+      </scrollbox>
+    </box>
+  );
+};

package/src/components/tool-confirm-dialog-content.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+
+import { buildToolConfirmDialogContent } from './tool-confirm-dialog-content';
+
+describe('buildToolConfirmDialogContent', () => {
+  it('formats outside-workspace glob confirmations with path details', () => {
+    const content = buildToolConfirmDialogContent({
+      toolCallId: 'call_1',
+      toolName: 'glob',
+      args: {
+        pattern: '**/*sandbox*',
+        path: '/Users/wrr/work/ironclaw',
+      },
+      rawArgs: {
+        pattern: '**/*sandbox*',
+        path: '/Users/wrr/work/ironclaw',
+      },
+      reason:
+        'SEARCH_PATH_NOT_ALLOWED: /Users/wrr/work/ironclaw is outside allowed directories: /Users/wrr/work/coding-agent-v2',
+      metadata: {
+        requestedPath: '/Users/wrr/work/ironclaw',
+        allowedDirectories: ['/Users/wrr/work/coding-agent-v2'],
+      },
+    });
+
+    expect(content.summary).toBe('Glob **/*sandbox*');
+    expect(content.detail).toBe('Path: /Users/wrr/work/ironclaw');
+    expect(content.requestedPath).toBe('/Users/wrr/work/ironclaw');
+    expect(content.allowedDirectories).toEqual(['/Users/wrr/work/coding-agent-v2']);
+    expect(content.argumentItems).toEqual([]);
+  });
+
+  it('formats bash confirmations with command preview', () => {
+    const content = buildToolConfirmDialogContent({
+      toolCallId: 'call_2',
+      toolName: 'bash',
+      args: {
+        description: 'List repo files',
+        command: 'rg --files src',
+      },
+      rawArgs: {
+        description: 'List repo files',
+        command: 'rg --files src',
+      },
+    });
+
+    expect(content.summary).toBe('Run bash: List repo files');
+    expect(content.detail).toBe('$ rg --files src');
+    expect(content.reason).toBeUndefined();
+    expect(content.argumentItems).toEqual([]);
+  });
+
+  it('hides redundant file path arguments that are already surfaced elsewhere', () => {
+    const content = buildToolConfirmDialogContent({
+      toolCallId: 'call_3',
+      toolName: 'file_read',
+      args: {
+        path: '/Users/wrr/work/ironclaw/src/sandbox/config.rs',
+      },
+      rawArgs: {
+        path: '/Users/wrr/work/ironclaw/src/sandbox/config.rs',
+      },
+      reason:
+        'PATH_NOT_ALLOWED: /Users/wrr/work/ironclaw/src/sandbox/config.rs is outside allowed directories: /Users/wrr/work/coding-agent-v2',
+      metadata: {
+        requestedPath: '/Users/wrr/work/ironclaw/src/sandbox/config.rs',
+        allowedDirectories: ['/Users/wrr/work/coding-agent-v2'],
+      },
+    });
+
+    expect(content.summary).toBe('Read /Users/wrr/work/ironclaw/src/sandbox/config.rs');
+    expect(content.argumentItems).toEqual([]);
+  });
+
+  it('parses json-like string arguments into readable structured values', () => {
+    const content = buildToolConfirmDialogContent({
+      toolCallId: 'call_4',
+      toolName: 'custom_tool',
+      args: {
+        payload: '{"path":"/tmp/project","recursive":true}',
+        retries: 3,
+      },
+      rawArgs: {
+        payload: '{"path":"/tmp/project","recursive":true}',
+        retries: 3,
+      },
+    });
+
+    expect(content.summary).toBe('Call custom_tool');
+    expect(content.argumentItems).toEqual([
+      {
+        label: 'Payload',
+        value: '{\n  "path": "/tmp/project",\n  "recursive": true\n}',
+        multiline: true,
+      },
+      {
+        label: 'Retries',
+        value: '3',
+        multiline: undefined,
+      },
+    ]);
+  });
+});