@renxqoo/renx-code 0.0.2 → 0.0.4

package/src/App.tsx

@@ -0,0 +1,297 @@
+import { TextAttributes, type Selection } from '@opentui/core';
+import { useKeyboard, useRenderer, useTerminalDimensions } from '@opentui/react';
+import { useEffect, useRef, useState } from 'react';
+
+import { resolveSlashCommand, type SlashCommandDefinition } from './commands/slash-commands';
+import { ConversationPanel } from './components/conversation-panel';
+import { FilePickerDialog } from './components/file-picker-dialog';
+import { ModelPickerDialog } from './components/model-picker-dialog';
+import { Prompt } from './components/prompt';
+import { ToolConfirmDialog } from './components/tool-confirm-dialog';
+import { isMediaSelection } from './files/attachment-capabilities';
+import type { PromptFileSelection } from './files/types';
+import { useAgentChat } from './hooks/use-agent-chat';
+import { useFilePicker } from './hooks/use-file-picker';
+import { useModelPicker } from './hooks/use-model-picker';
+import { requestExit } from './runtime/exit';
+import { copyTextToClipboard } from './runtime/clipboard';
+import { uiTheme } from './ui/theme';
+
+const appendFileTokens = (currentValue: string, files: PromptFileSelection[]) => {
+  if (files.length === 0) {
+    return currentValue;
+  }
+
+  const existingTokens = new Set(currentValue.match(/@\/\S+/g) ?? []);
+  const newTokens = files
+    .filter(file => !isMediaSelection(file))
+    .map(file => `@/${file.relativePath}`)
+    .filter(token => !existingTokens.has(token));
+
+  if (newTokens.length === 0) {
+    return currentValue;
+  }
+
+  const trimmed = currentValue.trimEnd();
+  const separator = trimmed.length > 0 ? ' ' : '';
+  return `${trimmed}${separator}${newTokens.join(' ')} `;
+};
+
+export const App = () => {
+  const {
+    turns,
+    inputValue,
+    isThinking,
+    modelLabel,
+    contextUsagePercent,
+    pendingToolConfirm,
+    setInputValue,
+    selectedFiles,
+    setSelectedFiles,
+    appendSelectedFiles,
+    submitInput,
+    stopActiveReply,
+    clearInput,
+    resetConversation,
+    setModelLabelDisplay,
+    setToolConfirmSelection,
+    submitToolConfirmSelection,
+    rejectPendingToolConfirm,
+  } = useAgentChat();
+  const [slashMenuVisible, setSlashMenuVisible] = useState(false);
+  const modelPicker = useModelPicker({
+    onModelChanged: setModelLabelDisplay,
+  });
+  const filePicker = useFilePicker();
+  const dimensions = useTerminalDimensions();
+  const renderer = useRenderer();
+  const [copyToastVisible, setCopyToastVisible] = useState(false);
+  const selectionCopyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const copyToastTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const handleSelection = (selection: Selection) => {
+      const selectedText = selection.getSelectedText();
+      if (!selectedText) {
+        return;
+      }
+
+      if (selectionCopyTimeoutRef.current) {
+        clearTimeout(selectionCopyTimeoutRef.current);
+      }
+
+      selectionCopyTimeoutRef.current = setTimeout(() => {
+        void copyTextToClipboard(selectedText, renderer).then(success => {
+          if (!success) {
+            return;
+          }
+
+          setCopyToastVisible(true);
+          if (copyToastTimeoutRef.current) {
+            clearTimeout(copyToastTimeoutRef.current);
+          }
+          copyToastTimeoutRef.current = setTimeout(() => {
+            setCopyToastVisible(false);
+            copyToastTimeoutRef.current = null;
+          }, 1500);
+        });
+        selectionCopyTimeoutRef.current = null;
+      }, 80);
+    };
+
+    renderer.on('selection', handleSelection);
+
+    return () => {
+      renderer.off('selection', handleSelection);
+      if (selectionCopyTimeoutRef.current) {
+        clearTimeout(selectionCopyTimeoutRef.current);
+        selectionCopyTimeoutRef.current = null;
+      }
+      if (copyToastTimeoutRef.current) {
+        clearTimeout(copyToastTimeoutRef.current);
+        copyToastTimeoutRef.current = null;
+      }
+    };
+  }, [renderer]);
+
+  const submitWithCommands = () => {
+    const command = resolveSlashCommand(inputValue);
+    if (command?.action === 'models') {
+      setInputValue('');
+      modelPicker.open();
+      return;
+    }
+    if (command?.action === 'files') {
+      setInputValue('');
+      filePicker.open(selectedFiles);
+      return;
+    }
+
+    submitInput();
+  };
+
+  const handleSlashCommandSelect = (command: SlashCommandDefinition) => {
+    if (command.action === 'models') {
+      setInputValue('');
+      modelPicker.open();
+      return true;
+    }
+    if (command.action === 'files') {
+      setInputValue('');
+      filePicker.open(selectedFiles);
+      return true;
+    }
+    return false;
+  };
+
+  useKeyboard(key => {
+    if (key.ctrl && key.name === 'c') {
+      requestExit(0);
+      return;
+    }
+
+    if (modelPicker.visible) {
+      if (key.name === 'escape') {
+        modelPicker.close();
+      }
+      return;
+    }
+
+    if (filePicker.visible) {
+      if (key.name === 'escape') {
+        filePicker.close();
+      }
+      return;
+    }
+
+    if (pendingToolConfirm) {
+      if (key.name === 'left' || key.name === 'h') {
+        setToolConfirmSelection('approve');
+        return;
+      }
+
+      if (key.name === 'right' || key.name === 'l') {
+        setToolConfirmSelection('deny');
+        return;
+      }
+
+      if (key.name === 'return' || key.name === 'enter') {
+        submitToolConfirmSelection();
+        return;
+      }
+
+      if (key.name === 'escape') {
+        rejectPendingToolConfirm();
+      }
+      return;
+    }
+
+    if (key.ctrl && key.name === 'l') {
+      resetConversation();
+      return;
+    }
+
+    if (key.name === 'escape') {
+      if (slashMenuVisible) {
+        return;
+      }
+      if (isThinking) {
+        stopActiveReply();
+        return;
+      }
+      clearInput();
+    }
+  });
+
+  return (
+    <box
+      width={dimensions.width}
+      height={dimensions.height}
+      flexDirection="column"
+      backgroundColor={uiTheme.bg}
+      paddingTop={uiTheme.layout.appPaddingTop}
+      paddingBottom={uiTheme.layout.appPaddingBottom}
+      paddingLeft={uiTheme.layout.appPaddingX}
+      paddingRight={uiTheme.layout.appPaddingX}
+    >
+      <ConversationPanel turns={turns} isThinking={isThinking} />
+      <Prompt
+        isThinking={isThinking}
+        disabled={modelPicker.visible || filePicker.visible || Boolean(pendingToolConfirm)}
+        modelLabel={modelLabel}
+        contextUsagePercent={contextUsagePercent}
+        value={inputValue}
+        selectedFiles={selectedFiles}
+        onAddSelectedFiles={appendSelectedFiles}
+        onValueChange={setInputValue}
+        onSlashCommandSelect={handleSlashCommandSelect}
+        onSlashMenuVisibilityChange={setSlashMenuVisible}
+        onSubmit={submitWithCommands}
+      />
+      <ToolConfirmDialog
+        visible={Boolean(pendingToolConfirm)}
+        viewportWidth={dimensions.width}
+        viewportHeight={dimensions.height}
+        request={pendingToolConfirm}
+      />
+      <FilePickerDialog
+        visible={filePicker.visible}
+        viewportWidth={dimensions.width}
+        viewportHeight={dimensions.height}
+        loading={filePicker.loading}
+        error={filePicker.error}
+        search={filePicker.search}
+        options={filePicker.options}
+        selectedIndex={filePicker.selectedIndex}
+        selectedPaths={filePicker.selectedPaths}
+        onSearchChange={filePicker.setSearch}
+        onSelectIndex={filePicker.setSelectedIndex}
+        onToggleSelected={filePicker.toggleSelectedIndex}
+        onConfirm={() => {
+          const confirmedFiles = filePicker.confirmSelected();
+          setSelectedFiles(confirmedFiles);
+          setInputValue(appendFileTokens(inputValue, confirmedFiles));
+        }}
+        onListKeyDown={filePicker.handleListKeyDown}
+      />
+      <ModelPickerDialog
+        visible={modelPicker.visible}
+        viewportWidth={dimensions.width}
+        viewportHeight={dimensions.height}
+        loading={modelPicker.loading}
+        switching={modelPicker.switching}
+        error={modelPicker.error}
+        search={modelPicker.search}
+        options={modelPicker.options}
+        selectedIndex={modelPicker.selectedIndex}
+        onSearchChange={modelPicker.setSearch}
+        onSelectIndex={modelPicker.setSelectedIndex}
+        onConfirm={() => {
+          void modelPicker.confirmSelected();
+        }}
+        onListKeyDown={modelPicker.handleListKeyDown}
+      />
+      {copyToastVisible ? (
+        <box
+          position="absolute"
+          right={2}
+          top={1}
+          zIndex={20}
+          flexDirection="row"
+          gap={1}
+          borderColor={uiTheme.divider}
+          borderStyle="rounded"
+          paddingX={1}
+          paddingY={0}
+        >
+          <text fg={uiTheme.accent} attributes={TextAttributes.BOLD}>
+            ✓
+          </text>
+          <text fg={uiTheme.text} attributes={TextAttributes.BOLD}>
+            Copied
+          </text>
+        </box>
+      ) : null}
+    </box>
+  );
+};

package/src/agent/runtime/event-format.ts

@@ -0,0 +1,258 @@
+import type {
+  AgentLoopEvent,
+  AgentStepEvent,
+  AgentStopEvent,
+  AgentToolConfirmEvent,
+  AgentToolResultEvent,
+  AgentToolStreamEvent,
+  AgentToolUseEvent,
+} from './types';
+
+const MAX_TOOL_TEXT = 12000;
+
+const stringify = (value: unknown): string => {
+  if (value === undefined) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+
+const stringifyPretty = (value: unknown): string => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const limitText = (value: string): string => {
+  if (value.length <= MAX_TOOL_TEXT) {
+    return value;
+  }
+  return `${value.slice(0, MAX_TOOL_TEXT)}\n... (truncated)`;
+};
+
+const hasNonEmptyText = (value: unknown): value is string => {
+  return typeof value === 'string' && value.length > 0;
+};
+
+type ToolCallLike = {
+  id?: string;
+  function?: {
+    name?: string;
+    arguments?: string;
+  };
+};
+
+type ToolResultLike = {
+  success?: boolean;
+  data?: unknown;
+  error?: string;
+};
+
+const asObject = (value: unknown): Record<string, unknown> => {
+  if (!value || typeof value !== 'object') {
+    return {};
+  }
+  return value as Record<string, unknown>;
+};
+
+const toToolCall = (value: unknown): ToolCallLike => {
+  const objectValue = asObject(value);
+  const functionValue = asObject(objectValue.function);
+  return {
+    id: typeof objectValue.id === 'string' ? objectValue.id : undefined,
+    function: {
+      name: typeof functionValue.name === 'string' ? functionValue.name : undefined,
+      arguments: typeof functionValue.arguments === 'string' ? functionValue.arguments : undefined,
+    },
+  };
+};
+
+const parseToolArguments = (raw?: string): Record<string, unknown> => {
+  if (!raw) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    return asObject(parsed);
+  } catch {
+    return { raw };
+  }
+};
+
+const pickString = (value: unknown): string | undefined => {
+  return typeof value === 'string' ? value : undefined;
+};
+
+const formatToolUseAsCode = (toolCall: ToolCallLike): string => {
+  const toolName = toolCall.function?.name ?? 'tool';
+  const callId = toolCall.id ?? 'unknown';
+  const args = parseToolArguments(toolCall.function?.arguments);
+
+  if (toolName === 'bash') {
+    const command = pickString(args.command) ?? '';
+    const timeout = args.timeout;
+    const lines = [`# Tool: bash (${callId})`, `$ ${command}`];
+    if (typeof timeout === 'number') {
+      lines.push(`# timeout: ${timeout}ms`);
+    }
+    return lines.join('\n');
+  }
+
+  if (toolName.startsWith('file_')) {
+    const path = pickString(args.path);
+    const action = pickString(args.action);
+    const lines = [`# Tool: ${toolName} (${callId})`];
+    if (action) {
+      lines.push(`# action: ${action}`);
+    }
+    if (path) {
+      lines.push(`# path: ${path}`);
+    }
+    const rest = { ...args };
+    delete rest.action;
+    delete rest.path;
+    if (Object.keys(rest).length > 0) {
+      lines.push(stringifyPretty(rest));
+    }
+    return lines.join('\n');
+  }
+
+  return [`# Tool: ${toolName} (${callId})`, stringifyPretty(args)].join('\n');
+};
+
+const omitOutputField = (value: Record<string, unknown>): Record<string, unknown> => {
+  const cloned = { ...value };
+  delete cloned.output;
+  delete cloned.summary;
+  return cloned;
+};
+
+const formatToolResultAsCode = (
+  event: AgentToolResultEvent,
+  opts?: { suppressOutput?: boolean }
+): string => {
+  const toolCall = toToolCall(event.toolCall);
+  const toolName = toolCall.function?.name ?? 'tool';
+  const callId = toolCall.id ?? 'unknown';
+
+  const result = asObject(event.result) as ToolResultLike;
+  const data = asObject(result.data);
+  const lines = [`# Result: ${toolName} (${callId}) ${result.success ? 'success' : 'error'}`];
+
+  if (result.error) {
+    lines.push(result.error);
+  }
+
+  const summary = pickString(data.summary);
+  const output = pickString(data.output);
+  if (!opts?.suppressOutput && hasNonEmptyText(output)) {
+    lines.push(output);
+    return limitText(lines.join('\n'));
+  }
+
+  if (summary) {
+    lines.push(summary);
+  }
+
+  if (output === '') {
+    if (!summary) {
+      lines.push('no output');
+    }
+    return limitText(lines.join('\n'));
+  }
+
+  const normalizedData = opts?.suppressOutput ? omitOutputField(data) : data;
+  if (Object.keys(normalizedData).length > 0) {
+    lines.push(stringifyPretty(normalizedData));
+    return limitText(lines.join('\n'));
+  }
+
+  if (opts?.suppressOutput && hasNonEmptyText(output)) {
+    return limitText(lines.join('\n'));
+  }
+
+  const raw = stringifyPretty(event.result);
+  if (raw) {
+    lines.push(raw);
+  }
+
+  return limitText(lines.join('\n'));
+};
+
+export const formatToolConfirmEvent = (event: AgentToolConfirmEvent): string => {
+  const reason = event.reason ? ` reason=${event.reason}` : '';
+  const args = stringify(event.args);
+  return `[tool-confirm:${event.toolName}:${event.toolCallId}]${reason} args=${args}`;
+};
+
+export const formatToolUseEvent = (event: AgentToolUseEvent): string => {
+  return `[tool-use] ${stringify(event)}`;
+};
+
+export const formatToolUseEventCode = (event: AgentToolUseEvent): string => {
+  return formatToolUseAsCode(toToolCall(event));
+};
+
+export const formatToolResultEvent = (event: AgentToolResultEvent): string => {
+  return `[tool-result] ${stringify(event)}`;
+};
+
+export const formatToolResultEventCode = (
+  event: AgentToolResultEvent,
+  opts?: { suppressOutput?: boolean }
+): string => {
+  return formatToolResultAsCode(event, opts);
+};
+
+export const formatStepEvent = (event: AgentStepEvent): string => {
+  const finish = event.finishReason ?? 'unknown';
+  return `[step] index=${event.stepIndex} finishReason=${finish} toolCalls=${event.toolCallsCount}`;
+};
+
+export const formatLoopEvent = (event: AgentLoopEvent): string => {
+  return `[loop] index=${event.loopIndex} steps=${event.steps}`;
+};
+
+export const formatStopEvent = (event: AgentStopEvent): string => {
+  if (event.message) {
+    return `[stop] reason=${event.reason} message=${event.message}`;
+  }
+  return `[stop] reason=${event.reason}`;
+};
+
+export const formatToolStreamEvent = (
+  event: AgentToolStreamEvent
+): { note?: string; codeChunk?: string; segmentKey?: string } => {
+  const prefix = `[tool:${event.toolName}:${event.toolCallId}:${event.type}#${event.sequence}]`;
+
+  if (event.type === 'stdout' || event.type === 'stderr') {
+    const channel = event.type === 'stderr' ? 'stderr' : 'stdout';
+    const chunk = event.content ?? '';
+    return {
+      codeChunk: chunk.endsWith('\n') ? chunk : `${chunk}\n`,
+      segmentKey: `${event.toolCallId}:${channel}`,
+    };
+  }
+
+  if (event.content) {
+    return { note: `${prefix} ${event.content}` };
+  }
+
+  if (event.data !== undefined) {
+    return { note: `${prefix} ${stringify(event.data)}` };
+  }
+
+  return { note: prefix };
+};

package/src/agent/runtime/model-types.ts

@@ -0,0 +1,13 @@
+export type AgentModelOption = {
+  id: string;
+  name: string;
+  provider: string;
+  apiKeyEnv: string;
+  configured: boolean;
+  current: boolean;
+};
+
+export type AgentModelSwitchResult = {
+  modelId: string;
+  modelLabel: string;
+};